:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;background:#182427;color:#edf1e9;font-size:15px;--panel:#213035;--border:#42565c;--muted:#b6c8cb;--accent:#d7e7a8}*{box-sizing:border-box}body{margin:0}a{color:var(--accent);text-underline-offset:4px}button,input,select{font:inherit}button,.file-button,.download{cursor:pointer;border:1px solid var(--border);background:#2c3e44;color:#edf1e9;border-radius:5px;padding:10px 13px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;min-height:42px}button:hover,.file-button:hover,.download:hover{background:#3b5056}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:3px}button:disabled{opacity:.5;cursor:wait}.site-header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);padding:18px max(24px,calc((100vw - 1580px)/2))}.brand{font:700 32px Georgia,serif;color:#edf1e9;text-decoration:none}.site-header nav{display:flex;gap:25px}.site-header nav a{text-decoration:none}main{max-width:1580px;margin:auto;padding:24px}.heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}h1{font-size:27px;font-weight:600;margin:0 0 8px}p{color:var(--muted);line-height:1.6;margin:0}.download{white-space:nowrap}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 340px;align-items:start;gap:22px}.preview-panel{min-width:0}.settings{display:grid;gap:12px}.settings details{border:1px solid var(--border);background:var(--panel);border-radius:7px;padding:0 16px 16px}.settings summary{cursor:pointer;padding:15px 0;font-weight:600}.settings details:not([open]){padding-bottom:0}.control{display:grid;gap:7px;margin:0 0 15px;font-size:14px;color:#cbd7d8}.control:last-child{margin-bottom:0}.control-top{display:flex;justify-content:space-between;gap:12px}.control output{font-variant-numeric:tabular-nums;color:var(--accent)}input[type=range]{width:100%;accent-color:var(--accent);min-height:25px;margin:0;cursor:pointer}input[type=number],input[type=text],select{width:100%;min-height:38px;padding:8px;border:1px solid var(--border);border-radius:4px;background:#182427;color:#edf1e9}input[type=color]{width:100%;height:36px;background:transparent;border:1px solid var(--border);border-radius:4px;padding:3px}input[type=checkbox]{accent-color:var(--accent);width:17px;height:17px}.check{display:flex;gap:9px;align-items:center;color:var(--muted);font-size:14px;line-height:1.4;margin:10px 0}.palette-colors{display:grid;grid-template-columns:1fr 1fr;gap:12px}.palette-colors .control{margin:0}.control-note{font-size:12px;color:var(--muted);line-height:1.5;margin-bottom:12px}#viewport{width:100%;height:clamp(360px,55vw,690px);position:relative;background:#0c1421;overflow:hidden;border:1px solid var(--border);border-radius:7px}#scene{display:block;width:100%;height:100%;touch-action:none}.labels{position:absolute;top:20px;left:22px;display:grid;gap:6px;pointer-events:none;text-shadow:0 2px 8px #000}.labels strong{font-size:25px;font-weight:600}.labels span{font-size:13px}.labels #phase{margin-top:8px;font-size:15px}.labels #projection{font-size:12px}.transport{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding-top:14px}#play{background:var(--accent);color:#182427;min-width:75px;font-weight:700}#clock{font-variant-numeric:tabular-nums;font-size:14px;white-space:nowrap;margin-inline:5px auto}.stage-label{display:flex;align-items:center;gap:8px;font-size:13px}.stage-label select{width:150px}.timeline-label{display:block;font-size:12px;color:var(--muted);margin-top:16px}.timeline-label input{display:block;margin-top:5px}.preview-help{font-size:12px;margin:6px 0 20px}.audio-panel{padding:18px;border:1px solid var(--border);border-radius:6px;background:var(--panel)}h2{font-size:17px;margin:0 0 14px}.audio-panel p{font-size:12px}.file-label{display:inline-grid;gap:8px;font-size:13px;margin-right:12px}input[type=file]{max-width:100%;font-size:12px}#audioName{display:block;margin:12px 0;color:var(--accent);font-size:13px;overflow-wrap:anywhere}.project-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.file-button{position:relative;overflow:hidden}.file-button input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}#status{min-height:24px;margin-top:14px;font-size:13px;color:var(--accent)}.notes{max-width:850px;border-top:1px solid var(--border);padding-top:24px;margin-top:30px}.notes p{font-size:14px;margin-bottom:12px}footer{max-width:1580px;margin:0 auto;padding:22px 24px;color:var(--muted);font-size:13px}#webglError{position:absolute;inset:0;padding:40px;background:#182427;z-index:2;line-height:1.6}@media(max-width:1000px){.workspace{grid-template-columns:minmax(0,1fr) 300px}main{padding:20px}.heading{align-items:flex-start}.heading h1{font-size:24px}.heading p{font-size:13px}.download{font-size:12px;padding:10px}#viewport{height:470px}}@media(max-width:760px){.workspace{grid-template-columns:1fr}.heading{flex-direction:column;gap:14px}main{padding:18px 14px}.site-header{padding:16px}.brand{font-size:28px}.site-header nav{gap:18px;font-size:14px}#viewport{height:440px}.settings{grid-template-columns:1fr}.transport{gap:8px}.transport button{font-size:13px;padding:9px 10px}#clock{margin-right:0}.stage-label{margin-left:auto}.stage-label select{width:135px}.labels{top:16px;left:16px}.labels strong{font-size:21px}.project-actions button,.file-button{font-size:12px}.notes{margin-top:24px}}@media(max-width:400px){#viewport{height:370px}.stage-label{margin-left:0}.heading h1{font-size:22px}.project-actions{gap:7px}.site-header nav{gap:14px}}

@media(min-width:761px){.settings{max-height:calc(100vh - 44px);overflow:auto;position:sticky;top:22px;padding-right:4px;scrollbar-color:#61747a #182427;scrollbar-width:thin}}

.audio-panel button{max-width:100%;white-space:normal;text-align:center}.audio-panel input[type=file]{width:100%;max-width:100%}

.construction-controls{display:grid;grid-template-columns:1fr 1.4fr 1.2fr;gap:12px 18px;align-items:start;margin-bottom:20px;padding:16px;border:1px solid var(--border);border-radius:6px;background:var(--panel)}.construction-controls label{display:grid;gap:7px;min-width:0;font-size:13px;color:var(--muted)}.construction-controls select{min-height:42px}.construction-controls p{grid-column:1/-1;font-size:12px;line-height:1.5}.settings label[hidden]{display:none!important}@media(max-width:760px){.construction-controls{grid-template-columns:1fr 1fr;padding:12px;gap:12px}.construction-controls label:last-of-type{grid-column:1/-1}}@media(max-width:400px){.construction-controls{grid-template-columns:1fr}.construction-controls label{grid-column:1/-1}}
