:root{--ink:#f2f5f7;--muted:#a9b6c2;--glass:rgba(10,16,24,.62);--line:rgba(255,255,255,.14);--accent:#7fe3c4;color-scheme:dark}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:#0d141c;color:var(--ink);font:14px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif;overflow:hidden}
canvas{position:fixed;inset:0;width:100vw;height:100vh;display:block;image-rendering:auto;touch-action:none}
header{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;gap:14px;padding:12px 16px;pointer-events:none}
.brand{font-weight:700;letter-spacing:.14em;font-size:12px;display:flex;align-items:center;gap:8px;background:var(--glass);border:1px solid var(--line);padding:6px 10px;border-radius:999px;backdrop-filter:blur(8px)}
.brand small{color:var(--muted);font-weight:500}.dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
#title{margin:0;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.6);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.actions{display:flex;gap:8px;pointer-events:auto}
button,select{font:inherit;color:var(--ink);background:var(--glass);border:1px solid var(--line);border-radius:999px;padding:6px 12px;cursor:pointer;backdrop-filter:blur(8px)}
button:hover{border-color:rgba(255,255,255,.35)}button:disabled{opacity:.5;cursor:default}
#crosshair{position:fixed;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:rgba(255,255,255,.75);box-shadow:0 0 4px rgba(0,0,0,.6);pointer-events:none}
#loading{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--glass);border:1px solid var(--line);border-radius:14px;padding:16px 18px;min-width:min(320px,calc(100vw - 32px));display:flex;flex-direction:column;gap:6px;backdrop-filter:blur(10px)}
#loading[hidden]{display:none}#loading span{color:var(--muted);font-size:13px}.bar{height:4px;background:rgba(255,255,255,.12);border-radius:4px;overflow:hidden}.bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s}
#panel{position:fixed;top:60px;right:16px;width:min(320px,calc(100vw - 32px));max-height:calc(100vh - 140px);overflow:auto;background:var(--glass);border:1px solid var(--line);border-radius:14px;padding:14px 16px;backdrop-filter:blur(10px)}
#panel h2{margin:0 0 6px;font-size:15px}#panel p{margin:0 0 10px;color:var(--muted);font-size:13px}
dl{display:grid;grid-template-columns:1fr auto;gap:4px 12px;margin:0 0 12px}dt{color:var(--muted)}dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
#panel label{display:flex;gap:8px;align-items:center;color:var(--muted)}#panel select{flex:1;border-radius:8px}
#editor{position:fixed;left:16px;bottom:64px;top:60px;width:min(560px,calc(100vw - 32px));display:flex;flex-direction:column;background:var(--glass);border:1px solid var(--line);border-radius:14px;padding:12px;backdrop-filter:blur(10px)}
#editor[hidden]{display:none}.editor-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}.editor-head span{color:var(--muted);font-size:12px;flex:1}
#program{flex:1;width:100%;resize:none;font:12px/1.45 ui-monospace,Consolas,monospace;color:#dfe8ef;background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:10px;padding:10px}
#editor-status{margin:8px 0 0;color:var(--muted);font-size:12px;min-height:1.4em}
footer{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:space-between;gap:12px;padding:10px 16px;pointer-events:none;color:var(--muted);font-size:12px;text-shadow:0 1px 2px rgba(0,0,0,.7)}
footer p{margin:0}
#touch{display:none}
@media (pointer:coarse){#help{display:none}#touch{display:block}
 #stick{position:fixed;left:24px;bottom:56px;width:116px;height:116px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid var(--line);touch-action:none}
 #stick span{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px;border-radius:50%;background:rgba(255,255,255,.28)}
 #jump{position:fixed;right:24px;bottom:72px;width:64px;height:64px;border-radius:50%;font-size:22px}}
@media (max-width:600px){#title{font-size:13px}.brand small{display:none}}
#composer{position:fixed;left:50%;bottom:34px;transform:translateX(-50%);width:min(680px,calc(100vw - 32px));display:flex;gap:8px;background:var(--glass);border:1px solid var(--line);border-radius:999px;padding:6px 6px 6px 16px;backdrop-filter:blur(10px)}
#prompt{flex:1;min-width:0;background:none;border:0;color:var(--ink);font:inherit;outline:none}#prompt::placeholder{color:var(--muted)}
#send{background:var(--accent);color:#06281f;border-color:transparent;font-weight:600}#send:disabled{background:rgba(255,255,255,.2);color:var(--muted)}
@media (pointer:coarse){#composer{bottom:auto;top:58px}}