@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
/* Unchanged source primitives. Compact application sizing and accessible action
   text are deliberate adaptations described in BRAND-NOTES.md. */
:root{--color-primary-accent:#41B6E6;--color-secondary-brand:#2E294E;--color-surface-white:#FFFFFF;--color-surface-subtle:#F8FAFC;--color-border-ui:#E2E8F0;--color-text-headers:#2E294E;--color-text-main:#0F172A;--color-text-secondary:#334155;--color-text-on-accent:#FFFFFF;--spacing-unit:1rem;--border-radius-ui:14px;--shadow-subtle:0 8px 24px rgba(15,23,42,.08);--page:var(--color-surface-white);--surface:#FFFFFF;--subtle:#F8FAFC;--line:#E2E8F0;--control:#64748B;--heading:#2E294E;--text:#0F172A;--muted:#334155;--accent:#41B6E6;--action-text:#2E294E;--highlight:#2E294E;--focus:#2E294E;--selected:#E8F6FC;--stage:#E8EEF5;--stage-center:#F8FAFC;--stage-ink:#334155;--shadow:var(--shadow-subtle);font-family:Inter,system-ui,-apple-system,sans-serif;color:var(--text);background:var(--page);color-scheme:light;font-size:14px}
:root[data-theme=dark]{--page:#0B1220;--surface:#111C2E;--subtle:#18263D;--line:#334155;--control:#94A3B8;--heading:#F8FAFC;--text:#F1F5F9;--muted:#CBD5E1;--highlight:#41B6E6;--focus:#F8FAFC;--selected:#203C53;--stage:#111C2E;--stage-center:#253A50;--stage-ink:#CBD5E1;--shadow:0 8px 24px rgba(0,0,0,.28);color-scheme:dark}
body{background:var(--page);color:var(--text);font-family:Inter,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
header{background:var(--surface);border-color:var(--line);height:auto!important;min-height:0;padding:10px 24px;gap:12px;flex-wrap:wrap}
.brand-block{display:flex;gap:14px;align-items:center;text-decoration:none;color:var(--heading);flex:none;margin-right:auto}
.logo-plate{display:block;background:#fff;padding:4px;border-radius:10px;line-height:0;flex:none}
.brand-logo{display:block;width:108px;max-width:none;height:auto;object-fit:contain}
.brand-copy{display:flex;flex-direction:column;gap:4px}.brand-copy strong{font:700 1.15rem/1.2 'Space Grotesk',sans-serif;letter-spacing:-.02em}.brand-copy small{font-size:.8rem;color:var(--muted)}
.version-pill{font-size:.72rem;color:var(--muted);border:1px solid var(--line);background:var(--subtle);border-radius:999px;padding:3px 8px;white-space:nowrap}
.theme-control{display:flex;align-items:center;gap:7px;min-height:32px;cursor:pointer;font-size:.75rem;font-weight:600;color:var(--muted)}
.theme-control input{appearance:none;position:relative;width:38px;height:22px;margin:0;background:var(--control);border-radius:11px;cursor:pointer;flex:none}.theme-control input:after{content:'';position:absolute;width:16px;height:16px;left:3px;top:3px;border-radius:50%;background:#fff;transition:transform .15s ease}.theme-control input:checked{background:var(--accent)}.theme-control input:checked:after{transform:translateX(16px);background:var(--action-text)}
h1,h2{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.02em;color:var(--heading)}aside{background:var(--surface);border-color:var(--line)}main{background:var(--subtle)}
.primary,.play{background:var(--accent);color:var(--action-text);font-weight:700}.primary{border-radius:14px;min-height:36px;padding:8px 16px;box-shadow:0 4px 6px -1px rgba(65,182,230,.2)}.primary:hover,.play:hover{background:#2FA8D7}
.glass{background:var(--surface);color:var(--text);border:1px solid var(--control);border-radius:14px;min-height:36px;padding:8px 12px;font-size:.8rem;display:inline-flex;align-items:center;justify-content:center}
.glass:hover{background:var(--subtle)}.move{color:var(--text);border-radius:14px}.move:hover{background:var(--subtle)}.move[aria-pressed=true]{background:var(--selected);border-color:var(--accent);color:var(--heading)}.move .symbol,.move[aria-pressed=true] .symbol{color:var(--highlight)}.move small,.move .num,.settings label,.sidebar-foot,.transport-foot{color:var(--muted)}.settings output{color:var(--text)}.settings{border-color:var(--line)}
.eyebrow span,.shot>span,#downloadVideo{color:var(--highlight)}.reset{color:var(--heading)}input[type=range],.toggle input{accent-color:var(--highlight)}
#viewport{background:radial-gradient(ellipse at 50% 45%,var(--stage-center),var(--stage) 75%);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.badge,.model-label,.model-label span+span,.hint,.orientation{color:var(--stage-ink)}.orientation span{color:var(--highlight)}
#overview{background:var(--surface);border-color:var(--control);border-radius:14px;box-shadow:var(--shadow)}#overview>div{color:var(--muted)}#overview span{color:var(--highlight)}#status{color:var(--highlight);font-weight:600;line-height:1.5}#drop{background:var(--surface);border-color:var(--accent);color:var(--heading)}
#exportVideo.recording{color:var(--highlight);border-color:var(--highlight);background:var(--selected)}
:focus-visible,button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.skip-link{position:fixed;left:12px;top:-80px;background:var(--surface);color:var(--text);padding:10px;z-index:50}.skip-link:focus{top:12px}
@media(min-width:601px){body{display:grid;grid-template-rows:auto minmax(0,1fr);height:100dvh;overflow:hidden}.layout{height:auto!important;min-height:0}aside{min-height:0}header{flex-wrap:nowrap}.move{min-height:36px}.settings input[type=range]{height:6px}.settings .toggle{min-height:26px}h1{font-size:1.9rem}h2{font-size:1.15rem}}
@media(min-width:601px) and (max-height:700px){header{padding:6px 20px}h1{font-size:1.5rem}.move{min-height:32px}.settings .toggle{min-height:24px}}
@media(min-width:601px) and (max-height:500px){.move{min-height:24px}header{padding:4px 16px}.brand-logo{width:84px}.brand-copy small,.version-pill{display:none}}
@media(min-width:601px) and (max-width:1100px){header{gap:8px;padding:8px 16px}.version-pill{display:none}.brand-copy small{display:none}.brand-block{gap:8px}.glass{padding:7px 9px;font-size:.75rem}.primary{padding:8px 10px;font-size:.8rem}}
@media(min-width:601px) and (max-width:850px){header{flex-wrap:wrap}.brand-block{flex:1}.theme-control{margin-left:auto}#fullscreen{margin-left:auto}.brand-logo{width:84px}}
@media(max-width:600px){body{display:block;height:auto;overflow:auto}header{padding:10px 16px;gap:10px}.brand-block{flex:1;min-width:220px}.brand-logo{width:84px}.brand-copy strong{font-size:1.1rem}.brand-copy small{font-size:.75rem}.version-pill{display:none}.theme-control{margin-left:auto}.glass,.primary{font-size:.8rem}.layout{height:auto!important}nav{gap:7px}.move{min-height:56px}.move strong{font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important}}
@media(forced-colors:active){.move[aria-pressed=true]{outline:2px solid Highlight}.theme-control input{appearance:auto}.theme-control input:after{display:none}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.language-control{display:flex;flex:none;gap:2px;border:1px solid var(--control);padding:2px;margin:0;border-radius:999px;min-width:0}.language-control label{position:relative;cursor:pointer}.language-control input{position:absolute;opacity:0;width:100%;height:100%;margin:0}.language-control span{display:flex;align-items:center;justify-content:center;min-width:34px;min-height:26px;padding:0 7px;font-size:.75rem;font-weight:600;border-radius:999px;color:var(--text)}.language-control input:checked+span{background:var(--accent);color:var(--action-text)}.language-control input:focus-visible+span{outline:2px solid var(--focus);outline-offset:2px}.preference-reset{background:none;border:0;color:var(--muted);font-size:18px;min-width:26px;min-height:28px;padding:0}.brand-copy{min-width:0}html[lang=fr] .brand-copy small{max-width:210px}html[lang=fr] h1{font-size:1.5rem}.eyebrow span:first-child{color:var(--muted)}
@media(min-width:851px) and (max-width:1200px){.brand-copy small,.version-pill{display:none}header{gap:8px}.brand-block{gap:8px}.brand-logo{width:84px}header .glass,header .primary{font-size:.75rem;padding:7px 9px}}
@media(min-width:601px) and (max-width:850px){.brand-block{flex-basis:calc(100% - 220px)}header{gap:6px}.theme-control{margin-left:0}header .glass{margin-left:0}#fullscreen{margin-left:auto}.move{gap:7px}.move strong{font-size:11px}html[lang=fr] .settings label{font-size:10px}}
@media(max-width:600px){.brand-block{flex-basis:100%;margin-right:0}.language-control{margin-right:auto}.theme-control{margin-left:0}.brand-copy small{max-width:none}header .primary{margin-left:auto}.move strong{font-size:11px}}
.settings #grid{appearance:none;position:relative;width:34px;height:20px;margin:0;background:var(--control);border-radius:10px;cursor:pointer;flex:none}.settings #grid:after{content:'';position:absolute;width:14px;height:14px;left:3px;top:3px;border-radius:50%;background:#fff}.settings #grid:checked{background:var(--accent)}.settings #grid:checked:after{transform:translateX(14px);background:var(--action-text)}
@media(forced-colors:active){.settings #grid{appearance:auto}.settings #grid:after{display:none}}
/* v1.2.0: camera-move dropdown, its tooltip and the Beat cuts tempo settings. */
.move-picker{margin-top:2px}
.move-trigger{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:var(--surface);color:var(--text);border:1px solid var(--control);border-radius:14px;padding:8px 12px;min-height:50px}
.move-trigger:hover{background:var(--subtle)}.move-trigger[aria-expanded=true]{border-color:var(--accent);background:var(--selected)}
.move-trigger .symbol,.move-option .symbol{font-size:21px;width:26px;text-align:center;color:var(--highlight);flex:none;line-height:1}
.move-text{display:flex;flex-direction:column;min-width:0;flex:1}
.move-text strong{font-size:13px;font-weight:600;color:var(--heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.move-text small{font-size:11px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.move-trigger .num{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.chevron{font-size:12px;color:var(--muted);transition:transform .15s}.move-trigger[aria-expanded=true] .chevron{transform:rotate(180deg)}
.move-list{position:fixed;z-index:40;display:grid;grid-template-columns:repeat(2,minmax(230px,1fr));align-items:start;gap:0 10px;padding:8px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px rgba(15,23,42,.2);overflow:auto;width:max-content;max-width:calc(100vw - 16px)}
.move-list.single{grid-template-columns:1fr}.move-list.single .move-group+.move-group{margin-top:6px}
.move-group{display:flex;flex-direction:column;gap:1px;min-width:0}
.move-group-title{font-size:10px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);padding:4px 8px 5px}
.move-option{display:flex;align-items:center;gap:10px;padding:5px 8px;border-radius:10px;cursor:pointer;border:1px solid transparent;min-height:38px}
.move-option .num{font-size:10px;color:var(--muted);margin-left:auto;padding-left:6px}
.move-option.active{background:var(--subtle);border-color:var(--line)}.move-option[aria-selected=true]{background:var(--selected);border-color:var(--accent)}
.move-tip{position:fixed;z-index:45;width:272px;padding:12px 14px;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px rgba(15,23,42,.22);pointer-events:none;font-size:12px;line-height:1.45}
.tip-head{display:flex;gap:10px;align-items:flex-start}.tip-head .symbol{font-size:22px;color:var(--highlight);line-height:1;width:24px;text-align:center}
.tip-head strong{display:block;font:700 14px/1.25 'Space Grotesk',sans-serif;color:var(--heading)}.tip-head em{display:block;font-style:normal;color:var(--highlight);font-weight:600;margin-top:3px}
.move-tip p{margin:8px 0;color:var(--muted)}
.tip-sketch{display:block;width:100%;height:auto;background:var(--subtle);border-radius:10px}
.tip-cube{fill:none;stroke:var(--control);stroke-width:1;opacity:.75}.tip-path{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tip-start{fill:#ffad66;stroke:var(--surface);stroke-width:1.5}.tip-end{fill:var(--surface);stroke:var(--heading);stroke-width:2}.tip-cut{fill:var(--accent)}
.tip-legend{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--muted);margin-top:6px}.tip-key{width:9px;height:9px;border-radius:50%;flex:none}.tip-key.start{background:#ffad66}.tip-key.end{border:2px solid var(--heading);margin-left:8px}
.tip-tags{display:flex;flex-wrap:wrap;gap:4px;margin:8px 0 0;padding:0;list-style:none}.tip-tags li{font-size:10px;font-weight:600;color:var(--heading);background:var(--selected);border-radius:999px;padding:2px 8px}
.setting-note{display:block;font-size:10px;color:var(--muted);margin-top:5px}
.settings .beat-settings{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:8px 15px;align-items:end}
.beat-every{border:0;margin:0;padding:0;min-width:0;font-size:11px;color:var(--muted)}.beat-every legend{padding:0;margin-bottom:5px}
.settings .beat-every label{display:inline-flex;align-items:center;gap:4px;margin:0 10px 0 0;color:var(--text)}.beat-every input{accent-color:var(--highlight);margin:0}
@media(min-width:601px){aside>.sidebar-foot{margin-top:auto;padding-top:12px}}
@media(min-width:601px) and (max-height:700px){.move-trigger{min-height:44px;padding:6px 10px}.move-option{min-height:34px;padding:3px 8px}}
@media(forced-colors:active){.move-option[aria-selected=true],.move-option.active{outline:2px solid Highlight}}
@media(min-width:601px) and (max-height:520px){.move-option small{display:none}.move-option{min-height:28px;padding:2px 8px}.move-group-title{padding:2px 8px 3px}}
/* v1.4.0: three move columns, Set front / reset in the viewport, Light follows camera switch. */
.move-list{grid-template-columns:repeat(var(--cols,2),minmax(220px,1fr))}.move-list.single{grid-template-columns:1fr}
.view-actions{display:flex;gap:8px;pointer-events:none}.view-actions button{pointer-events:auto}.glass.icon-only{min-width:36px;padding:8px}
.settings #lightFollow{appearance:none;position:relative;width:34px;height:20px;margin:0;background:var(--control);border-radius:10px;cursor:pointer;flex:none}.settings #lightFollow:after{content:'';position:absolute;width:14px;height:14px;left:3px;top:3px;border-radius:50%;background:#fff}.settings #lightFollow:checked{background:var(--accent)}.settings #lightFollow:checked:after{transform:translateX(14px);background:var(--action-text)}
@media(forced-colors:active){.settings #lightFollow{appearance:auto}.settings #lightFollow:after{display:none}}
@media(max-width:600px){.view-actions{gap:6px}.view-top .badge{display:none}.view-actions .glass{font-size:.72rem;padding:6px 9px}}