:root { color-scheme: light; --paper:#fffdf7; --ink:#302b37; --muted:#625769; --purple:#614576; --peach:#f1c8ae; --line:#d9ccdc; --white:#fffdf9; --selected:#ede3f0; --danger:#893c46; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:var(--paper); color:var(--ink); font:15px/1.5 system-ui,sans-serif; }
::selection { background:var(--peach); color:var(--ink); }
button,input,select { font:inherit; }
button,select { min-height:40px; }
button { border:1px solid var(--line); background:transparent; color:var(--ink); padding:8px 13px; border-radius:7px; cursor:pointer; font-weight:550; }
button:hover:not(:disabled) { background:var(--selected); border-color:var(--purple); }
button:disabled { opacity:.45; cursor:not-allowed; }
button.primary { background:var(--purple); border-color:var(--purple); color:#fff; }
button.primary:hover { background:#4c355f; }
button.quiet-danger { color:var(--danger); }
a { color:var(--purple); text-underline-offset:.2em; }
:focus-visible { outline:3px solid var(--purple); outline-offset:3px; }
input,select { color:var(--ink); background:var(--white); border:1px solid var(--line); padding:7px 9px; border-radius:5px; min-width:0; caret-color:var(--purple); }
input[type="range"] { border:0; padding:0; accent-color:var(--purple); cursor:pointer; width:100%; min-height:32px; }
input[type="checkbox"] { accent-color:var(--purple); width:17px; height:17px; }
label { font-size:13px; font-weight:550; }
h1,h2,p { margin:0; }
h1 { font:500 30px/1.15 Georgia,serif; letter-spacing:-.02em; text-wrap:balance; }
h2 { font-size:15px; font-weight:650; }
.hint,.stage-help { color:var(--muted); font-size:13px; line-height:1.55; }
.studio-header { display:flex; align-items:center; gap:18px; padding:17px 28px; border-bottom:1px solid var(--line); }
.wordmark { display:block; width:240px; aspect-ratio:1944/430; overflow:hidden; flex-shrink:0; }
.wordmark img { display:block; width:100%; height:auto; transform:translateY(-24%); }
.phase { color:var(--muted); font-size:13px; }
.studio-header nav { display:flex; gap:8px; margin-left:auto; flex-wrap:wrap; }
.studio-layout { display:grid; grid-template-columns:280px minmax(0,1fr); max-width:1680px; margin:auto; }
.library { padding:28px 22px; border-right:1px solid var(--line); }
.library>.hint { margin:10px 0 28px; }
.library section+section { margin-top:28px; }
.library section>h2 { margin-bottom:9px; }
.objects { display:flex; flex-wrap:wrap; gap:6px; }
.objects button { font-size:13px; }
.movements { margin-top:12px; display:grid; grid-template-columns:1fr 1fr; gap:14px 10px; }
.movement canvas { width:100%; aspect-ratio:1.35; display:block; background:var(--white); border-radius:7px; }
.movement h3 { font-size:13px; margin:6px 0 5px; }
.movement-actions { display:flex; gap:5px; }
.movement-actions button { font-size:12px; min-height:34px; padding:5px 8px; flex:1; }
.sequence-form label { display:block; margin-top:12px; margin-bottom:4px; }
.input-action { display:flex; gap:5px; }
.input-action input { width:100%; }
.saved-sequence { border-bottom:1px solid var(--line); padding:10px 0; }
.saved-sequence p { font-size:13px; overflow-wrap:anywhere; margin-bottom:6px; }
.saved-sequence button { min-height:34px; font-size:12px; margin-right:5px; }
.library-note { color:var(--muted); font-size:12px; margin-top:28px; }
.mobile-return { display:none; }
.workspace { padding:24px 28px; min-width:0; }
.scene-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:15px; }
.project-label { display:flex; align-items:center; gap:8px; color:var(--muted); margin-top:5px; }
.project-label input { border-color:transparent; background:transparent; padding:3px 0; font-size:16px; width:240px; }
.background-label { display:flex; align-items:center; gap:10px; color:var(--muted); }
.stage-wrap { background:var(--white); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
#stage { display:block; width:100%; aspect-ratio:1000/560; touch-action:none; cursor:grab; }
#stage:active { cursor:grabbing; }
.transport { display:flex; gap:9px; align-items:center; padding-top:12px; }
.scrubber { flex:1; }
.transport output { font-size:13px; font-variant-numeric:tabular-nums; white-space:nowrap; min-width:87px; }
.loop { display:flex; align-items:center; gap:5px; }
.stage-help { margin-top:8px; }
.edit-panel,.timeline-panel { margin-top:24px; border-top:1px solid var(--line); padding-top:16px; }
.edit-heading,.timeline-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.history { display:flex; gap:6px; }
.history button { min-height:32px; padding:4px 10px; font-size:13px; }
.item-list { display:flex; flex-wrap:wrap; gap:7px; margin:12px 0; }
.item-list button { min-height:36px; font-size:13px; }
.item-list button[aria-pressed="true"] { background:var(--peach); border-color:var(--purple); }
.inspector { display:grid; grid-template-columns:1.4fr 1.2fr 1.2fr .9fr .8fr auto; align-items:end; gap:14px; }
.inspector label { display:flex; flex-direction:column; gap:5px; color:var(--muted); }
.inspector input:not([type="range"]) { width:100%; }
.inspector button { font-size:13px; }
.timeline-heading span { font-size:13px; color:var(--muted); }
.timeline-panel>.hint { margin:7px 0 14px; }
.timeline { display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; margin:0; }
.clip { flex:0 1 182px; background:var(--selected); border-radius:8px; padding:12px; }
.clip strong { font-size:14px; }
.clip label { display:flex; align-items:center; gap:6px; margin:8px 0; color:var(--muted); }
.clip input { width:66px; background:var(--paper); }
.clip-controls { display:flex; gap:4px; }
.clip-controls button { padding:4px 7px; min-height:30px; font-size:12px; background:var(--paper); }
.empty { font-size:13px; color:var(--muted); padding:12px 0; }
.workspace-footer { margin-top:26px; border-top:1px solid var(--line); padding-top:16px; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
#save-status { font-size:13px; color:var(--purple); margin-bottom:5px; }
#save-status.error { color:var(--danger); }
.workspace-footer .hint { max-width:70ch; }
.skip { position:absolute; top:-80px; left:20px; background:var(--white); padding:10px; z-index:3; }
.skip:focus { top:8px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
* { scrollbar-width:thin; scrollbar-color:var(--line) var(--paper); }
@media(max-width:1150px) { .studio-layout { grid-template-columns:250px minmax(0,1fr); } .workspace { padding:22px 20px; } .inspector { grid-template-columns:repeat(3,minmax(0,1fr)); } .phase { display:none; } }
@media(max-width:760px) { .studio-header { padding:14px 16px; flex-wrap:wrap; gap:12px; } .wordmark { width:220px; } .studio-header nav { width:100%; margin:0; } .studio-header nav button { font-size:13px; padding:8px 10px; } .studio-layout { display:flex; flex-direction:column; } .workspace { order:0; padding:20px 16px; } .library { order:1; border-right:0; border-top:1px solid var(--line); padding:24px 16px; } .library h1 { font-size:26px; } .scene-heading { align-items:flex-start; } .project-label input { width:170px; font-size:14px; } .background-label { flex-direction:column; gap:3px; align-items:flex-start; } .background-label select { font-size:13px; min-height:34px; max-width:100px; } .transport { flex-wrap:wrap; } .transport .scrubber { order:5; flex-basis:100%; } .transport button { font-size:13px; } .transport output { margin-left:auto; } .inspector { grid-template-columns:1fr 1fr; gap:12px; } .clip { flex-basis:calc(50% - 5px); } .movements { grid-template-columns:repeat(4,minmax(0,1fr)); } .movement-actions { flex-direction:column; } .workspace-footer { flex-direction:column; } }
@media(max-width:400px) { .transport { gap:6px; } .loop { font-size:12px; } .movements { grid-template-columns:repeat(2,minmax(0,1fr)); } .movement-actions { flex-direction:row; } }
@media(max-width:760px) { .mobile-return { display:block; margin-bottom:16px; } .clip { min-width:0; } .clip-controls { flex-wrap:wrap; } .clip-controls button { flex:1; } .clip-controls button:last-child { flex-basis:100%; } }

.figure-choice { flex:1 1 90px; padding:8px; background:var(--white); }
.figure-choice canvas { display:block; width:100%; height:auto; max-height:115px; object-fit:contain; }
.figure-choice span { display:block; margin-top:4px; }