@font-face{font-family:DM;src:url('/assets/fonts/dm-sans-variable.ttf') format('truetype');font-style:normal;font-weight:100 900;font-display:swap}
:root{--paper:#eee9df;--ink:#252c23;--lime:#d6ef65;--gutter:clamp(22px,2.9vw,60px);font-family:DM,Arial,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}body{margin:0;min-height:600px;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:wait}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,.landscape:focus-visible{outline:2px solid var(--ink);outline-offset:7px}button{border:0;background:none}button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}a span{margin-left:10px}.sr-only,.skip:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.skip:focus{position:fixed;top:10px;left:20px;z-index:20;background:var(--paper);padding:12px}
.header{height:100px;position:fixed;z-index:5;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 var(--gutter);pointer-events:none}.header>*{pointer-events:auto}.brand{font-size:clamp(19px,1.65vw,29px);letter-spacing:-.04em}.header nav{display:flex;align-items:center;gap:4.3vw;font-size:clamp(15px,1.25vw,21px)}.text-button{padding:6px 0;display:inline-flex;align-items:center;gap:12px}.contact-link:hover,.text-button:hover,.dialog-contact:hover{opacity:.6}
.experience{position:relative;height:100svh;min-height:600px}h1{position:absolute;z-index:2;top:11.5%;left:var(--gutter);margin:0;font-size:clamp(80px,9.1vw,180px);font-weight:300;word-spacing:.03em;line-height:.89;letter-spacing:-.035em;pointer-events:none}h1 br{display:block}.landscape{position:absolute;inset:0;z-index:1;outline-offset:-9px;touch-action:none;cursor:grab}.landscape:active{cursor:grabbing}.landscape canvas{display:block;width:100%;height:100%;opacity:0;transition:opacity .9s}.ready .landscape canvas{opacity:1}.fallback img{width:100%;height:100%;object-fit:cover}.fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:1}.ready .fallback{opacity:0;visibility:hidden;transition:opacity .7s,visibility .7s}
.instructions{position:absolute;z-index:2;bottom:14.4%;left:var(--gutter);pointer-events:none;font-size:clamp(14px,1.23vw,21px);line-height:1.4}.instructions p{margin:0}.instructions a{pointer-events:auto;text-decoration:underline;text-underline-offset:4px}.fallback-message{margin-top:10px!important;font-size:15px}.gesture{display:none}.ready .gesture{display:block}.ready .fallback-message{display:none}.mobile-instruction{display:none}.controls{z-index:4;position:absolute;bottom:0;left:var(--gutter);right:var(--gutter);height:11.9%;min-height:86px;border-top:1px solid #252c2370;display:flex;align-items:center;justify-content:space-between;font-size:clamp(15px,1.25vw,21px)}[hidden]{display:none!important}.layers{display:flex;gap:clamp(26px,3vw,55px);align-self:stretch;align-items:center}.layer{position:relative;padding:12px 0}.layer::after{content:'';position:absolute;height:3px;inset:auto -2px 0;background:var(--lime);transform:scaleX(0);transition:transform .3s}.layer[aria-pressed=true]::after{transform:scaleX(1)}.utilities{display:flex;gap:clamp(24px,4vw,70px);align-items:center}.motion{display:grid;place-items:center;width:49px;height:49px;border:1px solid;border-radius:50%;padding:10px;transition:background .2s}.motion:hover{background:var(--lime)}.motion svg{width:24px;height:24px}.play-icon{display:none}.paused .play-icon{display:block}.paused .pause-icon{display:none}.save span[aria-hidden]{font-size:1.25em}
dialog{position:fixed;inset:0 0 0 auto;max-width:none;max-height:none;width:min(650px,100%);height:100%;margin:0;border:0;padding:35px clamp(26px,4vw,55px);color:var(--ink);background:var(--paper);box-shadow:-30px 0 100px #252c2320;overflow-y:auto}dialog::backdrop{background:#252c2355;backdrop-filter:blur(6px)}.dialog-top{display:flex;justify-content:space-between;align-items:center;font-size:17px;gap:20px}.close{display:flex;align-items:center;gap:15px;padding:10px 0}.close span{font-size:28px;line-height:.6}dialog h2{font-weight:400;font-size:clamp(38px,4vw,62px);line-height:1.04;letter-spacing:-.06em;margin:13vh 0 35px}dialog p{font-size:20px;line-height:1.55;max-width:475px;margin:0 0 25px}.authorship{margin-top:45px!important}.authorship a{text-decoration:underline;text-underline-offset:4px}.note{font-size:14px!important;opacity:.7}.dialog-contact{display:inline-block;font-size:25px;border-bottom:1px solid;padding-bottom:9px;margin-top:25px}
@media(min-aspect-ratio:19/10){h1{top:16%;font-size:7.8vw}.instructions{bottom:16%}.controls{height:13%}.header{height:80px}}
@media(max-width:700px){:root{--gutter:20px}.header{height:76px}.header nav{font-size:15px}.brand{font-size:20px}.header .contact-link{display:none}.experience{min-height:620px}h1{top:13.4%;font-size:clamp(48px,15vw,82px);line-height:.95;letter-spacing:-.035em}.desktop-instruction{display:none}.mobile-instruction{display:inline}.instructions{bottom:20%;font-size:13px;line-height:1.5}.controls{height:17%;min-height:110px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;padding-bottom:max(9px,env(safe-area-inset-bottom));font-size:14px}.layers{grid-column:1/-1;justify-content:space-between;gap:0;width:100%}.layer{padding:12px 0 9px;min-width:64px}.layer:first-child{text-align:left}.layer:last-child{text-align:right}.regenerate{justify-self:start;font-size:14px;gap:8px}.utilities{display:contents}.motion{position:absolute;bottom:max(13px,env(safe-area-inset-bottom));left:calc(50% - 22px);width:43px;height:43px}.save{justify-self:end;gap:5px;font-size:14px}.regenerate svg{width:20px}.fallback{object-fit:contain}.fallback-message{max-width:290px;font-size:13px}.dialog-top{font-size:15px}dialog h2{margin-top:11vh}dialog p{font-size:18px}}
@media(max-height:650px) and (min-width:701px){h1{font-size:7.2vw;top:17%}.header{height:70px}.instructions{font-size:13px;bottom:19%}.controls{height:15%;min-height:64px}.motion{width:38px;height:38px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.idea-button{display:none}.js .idea-button{display:inline-flex}
@media(max-height:500px) and (min-width:701px){body{min-height:360px}.experience{min-height:360px}h1{top:20%}}