:root{color-scheme:light;--background:#ecece8;--ink:#20221f;--muted:#62655e;--margin:clamp(20px,3.6vw,64px)}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--background);color:var(--ink)}
body{font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
button[hidden],[hidden]{display:none!important}
button:focus-visible,a:focus-visible{outline:2px solid #a23a21;outline-offset:5px}
::selection{background:#cecec5}
.screen{width:100%;height:100vh;height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden}
.header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px var(--margin) 0;position:relative;z-index:3}
.wordmark{display:flex;align-items:flex-start;gap:5px;font-size:28px;line-height:1;font-weight:600;letter-spacing:-1.3px;margin:0}
.wordmark span{font-size:10px;font-weight:400;line-height:1;margin-top:2px;letter-spacing:0}
.projects-link{display:inline-flex;align-items:center;justify-content:space-between;gap:35px;min-height:48px;padding:0 20px;background:var(--ink);color:#f7f7f3;font-size:14px;line-height:1.2;transition:background .15s}
.projects-link:hover{background:#41473b}
.projects-link svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.3;fill:none}
.stage{min-width:0;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;padding:6px 20px;isolation:isolate}
.artwork{position:relative;width:100%;height:100%;min-height:0;margin:0;display:flex;align-items:center;justify-content:center}
.form-stage{position:relative;height:100%;width:100%;max-height:100%;isolation:isolate;touch-action:pinch-zoom}
.form-stage.is-live{cursor:default}
.form-stage.is-hovering{cursor:grab}
.form-stage.is-dragging{cursor:grabbing}
.form-poster,.form-canvas{position:absolute;display:block;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none;-webkit-user-drag:none}
.form-poster{z-index:1}
html[data-artwork]:not([data-artwork="poster"]) .form-poster{opacity:0;visibility:hidden}
.form-canvas{z-index:2;opacity:0;transition:opacity .18s ease-out}
.form-stage.is-live .form-canvas{opacity:1}
.form-stage.is-live .form-poster{opacity:0}
.shadow{position:absolute;left:50%;bottom:5%;transform:translateX(-50%);width:min(32vh,45vw);height:3%;background:radial-gradient(ellipse,#31372b30,transparent 70%);filter:blur(12px);pointer-events:none}
.footer{position:relative;z-index:3;display:grid;grid-template-columns:1fr auto;align-items:center;gap:20px;padding:8px var(--margin) max(20px,env(safe-area-inset-bottom));min-height:78px;font-size:12px;line-height:1.4;color:var(--muted)}
.caption{margin:0}
.controls{justify-self:end;display:flex;align-items:center;gap:25px;min-height:44px;grid-column:2}
.controls button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:44px;min-height:44px;padding:0;border:0;background:none;font-size:12px;white-space:nowrap}
.controls button:hover{color:var(--ink)}
.controls svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.3;fill:none}
.play-icon{display:none}
[data-paused="true"] .pause-icon{display:none}
[data-paused="true"] .play-icon{display:block}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:1000px){.form-stage{max-width:1200px}.stage{padding-top:12px;padding-bottom:12px}}
@media(max-width:650px){.header{padding-top:max(18px,env(safe-area-inset-top));gap:16px}.wordmark{font-size:25px;letter-spacing:-1.1px}.projects-link{min-height:44px;padding:0 15px;gap:26px;font-size:13px}.stage{padding:0 4px}.footer{grid-template-columns:1fr auto;gap:10px;min-height:82px;padding-bottom:max(16px,env(safe-area-inset-bottom));font-size:11px}.controls{grid-column:2;gap:12px}.controls button{font-size:11px;gap:5px}.shadow{bottom:22%;height:3%;filter:blur(10px)}}
@media(max-width:360px){.footer{font-size:10px}.controls{gap:8px}.controls button{font-size:10px}.controls svg{width:15px;height:15px}.caption{max-width:105px}}
@media(max-height:500px){.header{padding-top:10px}.projects-link{min-height:40px}.wordmark{font-size:23px}.footer{padding-top:0;padding-bottom:max(8px,env(safe-area-inset-bottom));min-height:52px}.stage{padding:0}.shadow{bottom:5%}.controls button{min-height:40px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
html[data-motion="off"] *,html[data-motion="off"] *:before,html[data-motion="off"] *:after{animation:none!important;transition:none!important}
/* The artwork uses the whole stage; navigation remains on its own clear surface. */
.form-stage{max-width:none!important;overflow:hidden}
.form-poster{object-fit:contain}
.stage{padding:0!important}
@media(min-width:1000px){.stage{margin:0 10px}}