:root{color-scheme:dark;--bg:#10151e;--panel:#151d28;--line:#2a3543;--muted:#96a5b5;--text:#e9eff5;--accent:#6ce4ce}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 'Segoe UI',sans-serif}header{height:78px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;gap:12px;align-items:center}.brand strong{font-size:14px;letter-spacing:.14em}.brand div{display:flex;flex-direction:column}.brand span:not(.mark){color:var(--muted);font-size:13px}.mark{font-size:32px;color:var(--accent)}.header-actions{display:flex;gap:18px;align-items:center}#savedState{color:var(--muted);font-size:13px}button{font:inherit;font-weight:600;border:1px solid #3b4859;color:var(--text);background:#202b39;border-radius:7px;padding:9px 12px;cursor:pointer}button:hover{background:#2e3c4f;border-color:#738a9e}button:disabled{opacity:.45;cursor:wait}button.primary{background:var(--accent);border-color:var(--accent);color:#0c2825}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}main{display:grid;grid-template-columns:minmax(0,1fr) 340px;height:calc(100dvh - 78px)}.viewport{position:relative;min-width:0;overflow:hidden;background:#17232f}canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}.view-top,.view-bottom{position:absolute;left:22px;right:22px;display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:none}.view-top{top:19px}.view-bottom{bottom:18px;font-size:13px;color:#c4d2df}.view-bottom span{background:#10151ec9;padding:8px 12px;border-radius:6px}.view-bottom button{pointer-events:auto;background:#10151ecc}.badge,#fps{background:#10151ebb;border:1px solid #5a68794a;padding:6px 9px;border-radius:5px;font-size:12px;letter-spacing:.08em}.badge{color:#bfe8df}aside{overflow:auto;background:var(--panel);border-left:1px solid var(--line)}.panel-title{padding:22px 21px 15px}h1{font-size:20px;margin:0 0 4px;font-weight:600}.panel-title p{margin:0;color:var(--muted)}details{border-top:1px solid var(--line)}summary{list-style:none;cursor:pointer;padding:16px 21px;font-weight:600;display:flex;justify-content:space-between}summary::before{content:'+';margin-right:10px;color:var(--accent)}details[open]>summary::before{content:'−'}summary span{margin-left:auto;color:#7f91a5;font-size:12px;font-weight:400}.section-content{padding:0 21px 20px}.button-row{display:flex;gap:8px;margin:8px 0 12px}.button-row button{flex:1;padding:8px;font-size:13px}.note{font-size:13px;color:var(--muted);line-height:1.55;margin:12px 0 0;overflow-wrap:anywhere}.range-label{display:flex;justify-content:space-between;align-items:center;margin-top:14px}output{font-variant-numeric:tabular-nums;color:var(--accent);font-size:13px}input[type=range]{width:100%;accent-color:var(--accent);margin:10px 0 3px;cursor:pointer;height:18px}input[type=checkbox]{accent-color:var(--accent);width:18px;height:18px}.inline{display:flex;justify-content:space-between;align-items:center;margin:12px 0}input[type=color]{border:1px solid #526075;padding:2px;width:54px;height:28px;border-radius:5px;background:#222d3c;cursor:pointer}select,input[type=number]{font:inherit;background:#0f1722;border:1px solid #3a4759;border-radius:5px;color:var(--text);padding:7px;width:100%}select{margin:8px 0 4px}.coords{display:flex;align-items:end;gap:6px;margin-top:14px}.coords>span{font-size:13px;color:var(--muted);padding-bottom:9px}.coords label{font-size:12px;min-width:0;color:var(--muted)}.coords input{margin-top:4px;font-size:13px;padding:6px}.wide{width:100%}footer{padding:18px 21px;color:var(--muted);font-size:12px;border-top:1px solid var(--line)}#loading{position:absolute;inset:0;background:#17232f;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;z-index:3}#loading h2{font-size:22px;margin:18px 0 0}#loading p{color:var(--muted);max-width:480px}.spinner{border:2px solid #344756;border-top-color:var(--accent);width:35px;height:35px;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#toast{position:absolute;bottom:74px;left:50%;transform:translateX(-50%);max-width:80%;background:#0d2522eb;border:1px solid #549f91;padding:11px 17px;border-radius:7px;opacity:0;transition:opacity .15s;pointer-events:none;z-index:4}#toast.show{opacity:1}@media(max-width:800px){header{padding:0 14px;height:72px}.header-actions{gap:8px}#savedState{display:none}main{grid-template-columns:1fr;height:auto}.viewport{height:60dvh;min-height:340px}aside{border-left:0;overflow:visible}.view-bottom span{font-size:11px}.view-top,.view-bottom{left:10px;right:10px}.panel-title{padding-top:18px}}.viewport:fullscreen{width:100vw;height:100vh}
[hidden]{display:none!important}

.back{color:#a5e6d9;text-decoration:none;font-size:14px}#loading:not(.started){background:linear-gradient(0deg,#0b1525ed 0%,#0b15254a 70%),url(preview.webp) center/cover}#loading:not(.started) h2{font-size:40px;text-shadow:0 2px 12px #000}#loading:not(.started) p{color:#f0f5fa;text-shadow:0 1px 5px #000}#loading button{padding:13px 24px;margin-top:12px}.header-actions{gap:12px}@media(max-width:800px){.brand strong{font-size:12px}.brand span:not(.mark){font-size:11px}.header-actions button{font-size:12px;padding:8px}.back{font-size:12px}}