@font-face{font-family:Sora;src:url('./sora-regular.ttf');font-weight:400;font-display:swap}
@font-face{font-family:Sora;src:url('./sora-semibold.ttf');font-weight:600;font-display:swap}
@font-face{font-family:'DM Sans';src:url('./dm-sans.ttf');font-weight:400;font-display:swap}
:root{color-scheme:light;--paper:#eeeae2;--ink:#272823;--orange:#bb3616;--line:#c2beb5;--muted:#626259;--hover:#dfdad0;--theme-duration:420ms;--theme-ease:cubic-bezier(.22,1,.36,1)}
:root[data-theme=dark]{color-scheme:dark;--paper:#181a18;--ink:#f0ece4;--orange:#ff936f;--line:#50534c;--muted:#bbbdb2;--hover:#30332d}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif}::selection{background:var(--orange);color:var(--paper)}button,select{font:inherit;color:inherit}button,select{cursor:pointer}button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid var(--orange);outline-offset:5px}[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.skip{position:fixed;top:10px;left:10px;z-index:10;background:var(--ink);color:var(--paper);padding:12px;transform:translateY(-160%)}.skip:focus{transform:none}
.page{min-height:100svh;max-width:1800px;margin:auto;padding:clamp(20px,2.5vw,40px) clamp(20px,4.2vw,76px) 24px;display:flex;flex-direction:column}
header{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-bottom:24px;border-bottom:1px solid var(--line)}.brand{font-size:clamp(22px,2.1vw,30px);font-weight:600;letter-spacing:-1.4px;display:flex;gap:12px;align-items:center}.mark{width:26px;height:25px;flex-shrink:0}.header-tools{display:flex;align-items:center;gap:clamp(15px,2.5vw,38px);flex-wrap:wrap}.header-note{font-size:11px;letter-spacing:.07em;text-transform:uppercase;display:flex;align-items:center;gap:9px}.dot{height:7px;width:7px;border-radius:50%;background:var(--orange);flex-shrink:0}.theme-picker{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:999px;padding:0 12px;min-height:44px}.theme-picker select{border:0;background:transparent;min-height:42px;max-width:145px;font-size:12px}.theme-picker option{background:var(--paper);color:var(--ink)}
main{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(12px,2vw,32px);padding:clamp(38px,5vw,80px) 0;min-width:0}.intro{min-width:0;container-type:inline-size}.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.14em;margin-bottom:28px;display:flex;align-items:center;gap:14px}.eyebrow:before{content:'';height:1px;width:30px;background:var(--orange)}h1{font-size:clamp(32px,16cqi,118px);font-weight:400;line-height:1.02;letter-spacing:-.08em;margin:0 0 30px}h1 span{display:block}h1 em{font-family:inherit;font-style:normal;font-weight:600;letter-spacing:inherit}.description{font-size:15px;line-height:1.75;max-width:310px;margin:0;color:var(--muted)}
.signature{display:flex;align-items:center;gap:12px;margin-top:30px;font-size:13px;width:fit-content;max-width:100%;border:1px solid var(--line);border-radius:999px;background:transparent;padding:10px 20px 10px 12px;min-height:48px;transition:background .25s,color .25s,border-color .25s}.signature .arrow{display:grid;place-items:center;width:30px;height:30px;font-size:24px;color:var(--orange);transition:transform .3s,color .25s}.signature:hover,.signature:focus-visible,.signature[aria-expanded=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}.signature:hover .arrow,.signature:focus-visible .arrow{transform:translate(2px,-2px);color:inherit}.soon-note{font-size:13px;line-height:1.7;color:var(--muted);max-width:310px;margin:16px 0 0}
.art{position:relative;width:100%;min-width:0;aspect-ratio:1/1.12;max-width:740px;justify-self:center}.art canvas{position:absolute;inset:0;width:100%;height:calc(100% - 64px);z-index:1;touch-action:pan-y}.shadow{position:absolute;left:25%;right:15%;bottom:18%;height:7%;border-radius:50%;background:#777263;filter:blur(24px);opacity:.2;transform:rotate(-8deg)}[data-theme=dark] .shadow{background:#000;opacity:.65}.fallback{position:absolute;inset:20% 20% 30%;border:clamp(20px,4vw,50px) solid #aaa79e;border-radius:45%;transform:rotate(-35deg);box-shadow:inset 8px 12px 15px #fff,10px 18px 20px #0002}.art.ready .fallback{display:none}.art-label{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;color:var(--muted);font-size:10px;letter-spacing:.04em;text-transform:uppercase}.controls{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border:1px solid var(--line);border-radius:999px;padding:10px 14px;font-size:12px;letter-spacing:0;background:var(--paper);color:var(--ink);transition:background .2s}.controls:hover{background:var(--hover)}.controls:disabled{cursor:default;color:var(--muted)}.controls svg{flex-shrink:0}
.bottom{border-top:1px solid var(--line);padding-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:20px}.bottom-title{font-size:12px;display:flex;gap:12px;align-items:center}.index{color:var(--orange);font-size:11px}.bottom-copy{font-size:12px;line-height:1.7;color:var(--muted);max-width:330px;justify-self:end;margin:0}footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:15px;margin-top:40px;font-size:11px;color:var(--muted)}.intro,.art{animation:enter .9s ease-out both}@keyframes enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(max-width:760px){main{grid-template-columns:minmax(0,1fr);gap:22px;padding:40px 0 32px}.intro{max-width:580px}h1{font-size:clamp(32px,13cqi,80px)}.art{width:100%;max-width:520px;aspect-ratio:1/1.08}.eyebrow{font-size:10px}.header-tools{gap:12px}.header-note{font-size:9px}.bottom{grid-template-columns:1fr}.bottom-copy{justify-self:start}.description{font-size:14px}.signature{margin-top:22px}}
@media(max-width:480px){header{gap:18px}.header-tools{width:100%;justify-content:space-between}.art-label{font-size:9px}footer{font-size:10px}.eyebrow{margin-bottom:22px}h1{margin-bottom:24px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.signature:hover .arrow,.signature:focus-visible .arrow{transform:none}}
@media(forced-colors:active){button,select,.theme-picker{border:1px solid ButtonText}.dot{background:CanvasText}}

/* One-screen composition: the scene consumes only the space left by the copy. */
body,header,footer,.description,.eyebrow::before,.dot,.art-label,.index,.bottom-copy,.theme-switch,.theme-switch button,.signature,.controls,.toast{
 transition:background-color var(--theme-duration) var(--theme-ease),color var(--theme-duration) var(--theme-ease),border-color var(--theme-duration) var(--theme-ease);
}
.shadow{transition:background-color var(--theme-duration) var(--theme-ease),opacity var(--theme-duration) var(--theme-ease)}
html,body{height:100%;overflow:hidden}
.page{height:100dvh;min-height:0;max-height:100dvh;padding:clamp(12px,3dvh,28px) clamp(18px,4vw,72px);gap:0}
header{flex:0 0 auto;padding-bottom:clamp(10px,2dvh,20px);gap:12px}
.header-tools{gap:16px}.header-note{font-size:10px}
.theme-switch{display:flex;align-items:center;padding:4px;border:1px solid var(--line);border-radius:999px;gap:2px}
.theme-switch button{appearance:none;border:0;background:transparent;border-radius:999px;padding:0 12px;min-height:36px;font-size:11px;outline:none}
.theme-switch button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.theme-switch button:hover:not([aria-pressed=true]){background:var(--hover)}
.theme-switch button:focus-visible{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--orange)}
button:focus:not(:focus-visible){outline:none}
main{min-height:0;grid-template-rows:minmax(0,1fr);padding:clamp(12px,3dvh,36px) 0;gap:20px}
.intro{min-height:0}.eyebrow{margin-bottom:clamp(10px,2.4dvh,24px)}
h1{font-size:clamp(30px,min(16cqi,12dvh),118px);margin-bottom:clamp(12px,2.8dvh,28px)}
.description{font-size:clamp(12px,1.8dvh,15px);line-height:1.6}
.signature{margin-top:clamp(12px,2.6dvh,26px);min-height:44px;padding:6px 18px 6px 10px}
.art{height:100%;min-height:0;aspect-ratio:auto;max-width:none;align-self:stretch}
.art canvas{height:calc(100% - 50px)}.art-label{flex-wrap:nowrap;font-size:9px;gap:8px}.controls{min-height:40px;padding:8px 12px;font-size:11px;white-space:nowrap}
.bottom{display:none}footer{flex:0 0 auto;margin-top:0;padding-top:clamp(10px,2dvh,20px);border-top:1px solid var(--line);font-size:10px;gap:10px}
.toast{position:fixed;z-index:20;left:50%;bottom:max(24px,6dvh);transform:translate(-50%,8px);width:max-content;max-width:calc(100vw - 36px);padding:18px 24px;background:var(--ink);color:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:0 12px 40px #0003;font-size:14px;line-height:1.6;text-align:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s,transform .18s,visibility .18s}
.toast.visible{opacity:1;visibility:visible;transform:translate(-50%,0)}
@media(max-width:760px) and (min-height:501px){
 main{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:8px;padding:clamp(12px,2.5dvh,24px) 0 12px}
 .intro{max-width:none}h1{font-size:clamp(30px,min(13cqi,8.5dvh),76px);margin-bottom:12px}.eyebrow{margin-bottom:12px;font-size:9px}
 .signature{margin-top:12px}.art{max-width:520px}.header-tools{width:auto}.header-note{display:none}
 .description{max-width:340px}.art-label>span{font-size:8px}footer span:nth-child(2){display:none}
}
@media(max-width:400px){.brand{font-size:19px;gap:7px}.mark{width:20px}.theme-switch button{padding:0 9px;font-size:10px}.theme-switch{padding:3px}header{gap:8px}.header-tools{width:auto}footer{font-size:9px}}
@media(max-height:500px){
 .page{padding:10px 22px}header{padding-bottom:8px}.header-note{display:none}.brand{font-size:21px}
 main{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:18px;padding:10px 0}
 h1{font-size:clamp(25px,min(15cqi,11dvh),52px);margin-bottom:8px}.eyebrow{margin-bottom:8px;font-size:8px}.description{font-size:11px;line-height:1.4}.signature{margin-top:8px;min-height:36px;padding:2px 12px;font-size:11px}
 .art{max-width:none}.art-label>span{display:none}.art-label{justify-content:flex-end}.art canvas{height:calc(100% - 42px)}footer{padding-top:8px;font-size:9px}.header-tools{width:auto}
}

/* Retain interaction timing while blending theme colors. */
.signature,.controls{transition:background-color var(--theme-duration) var(--theme-ease),color var(--theme-duration) var(--theme-ease),border-color var(--theme-duration) var(--theme-ease)}
.toast{transition:opacity .18s,transform .18s,visibility .18s,background-color var(--theme-duration) var(--theme-ease),color var(--theme-duration) var(--theme-ease),border-color var(--theme-duration) var(--theme-ease)}

h1,.brand{font-family:Sora,sans-serif}h1{letter-spacing:-.065em}h1 em{color:var(--orange);transition:color var(--theme-duration) var(--theme-ease)}.brand{letter-spacing:-1.2px}.theme-switch button,.controls{font-weight:400}