:root{--paper:#faeed3;--ink:#234731;--muted:#687452;--line:#cdd0ac;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none;color-scheme:light}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{height:100svh;height:100dvh;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto;background:radial-gradient(ellipse at 50% 28%,#fff6df,transparent 65%),var(--paper)}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:3px solid #8050ad;outline-offset:4px}.skip{position:fixed;top:-70px;left:20px;z-index:20;background:var(--ink);color:var(--paper);padding:14px}.skip:focus{top:8px}.masthead{padding:18px 3vw;display:flex;justify-content:space-between;align-items:center;gap:20px}.studio-name{display:flex;align-items:center;gap:9px;font-weight:740;letter-spacing:-.04em;font-size:17px}.masthead nav{display:flex;gap:24px}.masthead nav button{border:0;background:none;font-size:12px;padding:10px 0}.intro{text-align:center;padding:0 24px;z-index:2;pointer-events:none}.eyebrow{text-transform:uppercase;letter-spacing:.15em;font-size:9px;font-weight:650;margin:8px 0}.status-dot{display:inline-block;width:6px;height:6px;background:#71964a;border-radius:50%;margin-right:7px}.intro h1{margin:13px auto 8px;width:min(460px,68vw)}.wordmark{display:block;width:100%;height:auto;max-height:10vh;object-fit:contain}.tagline{font:italic clamp(16px,2vh,23px) Georgia,serif;margin:6px 0 0}.world{min-height:0;position:relative;isolation:isolate}.sky,.foreground{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.sky{z-index:-1}.foreground{z-index:3;transform:translateX(var(--leaf-offset,0px))}.distant-clouds{transform:translateX(var(--cloud-offset,0px))}.world-viewport{width:100%;height:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#a2b27e transparent;position:relative;z-index:1}.world-scene{position:relative;height:100%;min-width:100%;display:flex;align-items:center;justify-content:center;gap:var(--gap,100px);padding:0 var(--edge,32px)}#bridges{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}.island-node{position:relative;flex:none;z-index:1}.island{display:block;height:100%;position:relative;border-radius:35%;outline-offset:2px}.island-art{display:block;width:var(--art-width);height:var(--art-height);margin:0 auto;overflow:visible;transition:filter .25s,transform .25s}.island:hover .island-art,.island:focus-visible .island-art{filter:drop-shadow(0 6px 8px #526c3c22);transform:translateY(-3px)}.island-caption{height:66px;display:flex;flex-direction:column;gap:7px;text-align:center;align-items:center;justify-content:center;position:absolute;top:var(--art-height);left:50%;transform:translateX(-50%);width:max(100%,240px);max-width:340px;pointer-events:none}.island-caption small{text-transform:uppercase;letter-spacing:.12em;font-size:9px;color:var(--muted)}.island-caption strong{font:700 clamp(17px,2.5vh,27px) Georgia,serif;letter-spacing:-.035em;white-space:nowrap}.island-caption>span{font-size:11px;white-space:nowrap}.island-caption b{display:inline-block;margin-left:5px;transition:transform .2s}.island:hover b{transform:translate(3px,-3px)}.window-glow{animation:window-light 4s ease-in-out infinite alternate}.window-glow.second{animation-delay:-2s}.studio-bits rect,.sky-bits rect{animation:float-bit 6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}.studio-bits rect:nth-child(2n){animation-delay:-3s}.smoke{transform-box:fill-box;transform-origin:50% 100%;animation:smoke-drift 6s ease-in-out infinite alternate}.smoke.teal{animation-duration:7.4s;animation-delay:-3s}.smoke.yellow{animation-duration:5.7s;animation-delay:-1s}.bridge-spark{stroke-dasharray:2 18;animation:bridge-travel 12s linear infinite}.journey-controls{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:12px 3vw;z-index:4}.scroll-hint{font-size:10px;color:var(--muted);margin:0;white-space:nowrap}.scroll-hint>span{font-size:20px;vertical-align:-2px;margin-right:7px}.stops{display:flex;align-items:center;gap:14px;max-width:70vw;overflow-x:auto;scrollbar-width:none}.stop{display:flex;align-items:center;gap:7px;border:0;background:none;padding:10px 4px;font:10px ui-monospace,monospace;color:var(--muted);min-height:44px;white-space:nowrap;flex:none}.stop>span{font-family:ui-sans-serif,system-ui;font-size:11px}.stop.active{color:var(--ink);font-weight:750}.stops i{width:30px;min-width:10px;height:1px;background:var(--line)}.motion-toggle{border:0;background:none;font-size:10px;padding:12px 0;min-height:44px;white-space:nowrap}.motion-toggle span{padding-left:7px}footer{border-top:1px solid var(--line);margin:0 3vw;padding:11px 0 max(11px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;gap:12px;font-size:9px;color:var(--muted)}footer>span:first-child{color:var(--ink)}footer>span:first-child span{margin:0 7px}.sr-only{position:fixed;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}body.motion-paused *,body.motion-paused *::before,body.motion-paused *::after{animation-play-state:paused!important}.motion-paused .distant-clouds,.motion-paused .foreground{transform:none}.no-script{position:absolute;inset:40% 15%;text-align:center}.no-script a{text-decoration:underline}dialog{border:1px solid var(--line);border-radius:16px;background:var(--paper);color:var(--ink);padding:45px;width:min(540px,90vw);max-height:85dvh;overflow:auto}dialog::backdrop{background:#1f342ab3}dialog h2{font:32px Georgia,serif;letter-spacing:-.04em}dialog p{font-size:14px;line-height:1.8}dialog small{font-size:10px;color:var(--muted)}.close-dialog{position:absolute;right:14px;top:10px;background:none;border:0;font-size:28px;min-width:44px;min-height:44px}.game-links{display:grid;gap:10px;margin:24px 0}.game-links a{padding:12px 0;border-bottom:1px solid var(--line);font-size:13px}
@keyframes window-light{from{opacity:.45;filter:drop-shadow(0 0 2px #ffbf46)}to{opacity:1;filter:drop-shadow(0 0 6px #ffd667)}}@keyframes float-bit{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translate(3px,-8px);opacity:1}}@keyframes smoke-drift{from{transform:translate(0,0) rotate(-1.5deg);opacity:.78}to{transform:translate(3px,-7px) rotate(2deg);opacity:1}}@keyframes bridge-travel{to{stroke-dashoffset:-200}}
@media(max-width:650px){.masthead{padding:10px 18px}.studio-name{font-size:15px;gap:7px}.studio-name img{width:24px;height:24px}.masthead nav{gap:14px}.masthead nav button{font-size:10px}.masthead nav button:last-child{display:none}.intro{padding:0 14px}.intro h1{width:min(360px,80vw);margin:12px auto 6px}.eyebrow{font-size:8px;margin:4px 0}.tagline{font-size:17px}.journey-controls{display:grid;grid-template-columns:1fr auto;padding:7px 18px;gap:0}.stops{grid-row:1;grid-column:1/-1;justify-content:center;max-width:calc(100vw - 36px);gap:12px}.stops i{width:20px}.stop{min-height:38px;font-size:9px}.stop>span{font-size:10px}.scroll-hint,.motion-toggle{font-size:9px}.motion-toggle{min-height:32px;padding:6px 0}footer{margin:0 18px;padding:8px 0 max(8px,env(safe-area-inset-bottom));font-size:8px}.island-caption{height:58px;width:max(100%,220px)}.island-caption strong{font-size:19px}.island-caption small{font-size:8px}.island-caption>span{font-size:10px}}
@media(max-height:600px){.masthead{padding-top:5px;padding-bottom:5px}.intro .eyebrow{display:none}.intro h1{margin:4px auto;width:min(330px,65vw)}.wordmark{max-height:9vh}.tagline{font-size:15px;margin:3px 0}.journey-controls{padding-top:2px;padding-bottom:2px}.stop{min-height:30px}.motion-toggle{min-height:28px}footer{padding-top:6px;padding-bottom:6px}.island-caption{height:48px;gap:4px}.island-caption strong{font-size:17px}.island-caption small{font-size:7px}.island-caption>span{font-size:9px}}
@media(prefers-reduced-motion:reduce){body:not(.motion-enabled) *,body:not(.motion-enabled) *::before,body:not(.motion-enabled) *::after{animation:none!important;transition:none!important}.distant-clouds,.foreground{transform:none}}

/* One intact panorama: clickable columns and motion overlays preserve its composition. */
.world-scene{display:block;min-width:100%;height:100%;padding:0;position:relative}
.panorama-art,.panorama-motion{position:absolute;top:0;left:var(--art-left);width:var(--art-width);height:var(--art-height);max-width:none;pointer-events:none}
.panorama-art{display:block;object-fit:fill}.panorama-motion{overflow:visible}
.island{position:absolute;top:0;height:100%;display:block;border-radius:0}
.island-caption{top:var(--art-height);height:66px;width:max(100%,200px);max-width:340px}
.island-halo{position:absolute;left:0;right:0;top:12%;height:70%;border-radius:45%;transition:box-shadow .25s}
.island:hover .island-halo,.island:focus-visible .island-halo{box-shadow:inset 0 0 35px #efffa422}
.smoke-layer{opacity:.38;mix-blend-mode:screen}
@media(max-width:650px){.island-caption{height:58px;width:max(100%,220px)}}
@media(max-height:450px){.intro{display:none}.island-caption{display:none}.journey-controls{display:flex;padding:2px 3vw}.scroll-hint{display:none}.stops{max-width:75vw}.masthead{padding-top:4px;padding-bottom:4px}footer{padding-top:5px;padding-bottom:5px}}

/* Full-bleed scene. UI overlays the artwork; no image frame or vertical page flow. */
html,body{width:100%;height:100%;overflow:hidden}
body{display:block;position:relative}
.masthead{position:fixed;z-index:6;left:0;right:0;top:0;width:100%;min-width:0;background:linear-gradient(#faeed3b3,transparent)}
.intro{position:fixed;z-index:5;left:0;right:0;top:8vh;width:100%;text-align:center}
.intro h1{width:min(460px,60vw);margin:13px auto 8px}
.world{position:fixed;inset:0;width:100vw;height:100svh;height:100dvh;min-width:0;z-index:0}
.world-viewport{width:100%;height:100%;max-width:100vw;scrollbar-width:none}
.world-viewport::-webkit-scrollbar{display:none}
.world-scene{min-width:0}
.panorama-art,.panorama-motion{top:var(--art-top,0px)}
.island-caption{top:auto;bottom:105px}
.journey-controls{position:fixed;z-index:6;left:0;right:0;bottom:29px;width:100%;padding:12px 3vw;background:linear-gradient(transparent,#faeed3b3)}
footer{position:fixed;z-index:6;left:0;right:0;bottom:0;margin:0;padding:9px 3vw;border:0;background:#faeed380}
#world-viewport:focus-visible{outline:2px solid #78885b;outline-offset:-2px}
@media(max-width:650px){.intro{top:7vh}.intro h1{width:min(360px,82vw)}.island-caption{bottom:120px}.journey-controls{padding:6px 18px;bottom:25px}footer{padding:7px 18px}.scroll-hint{display:block}}
@media(max-height:450px){.intro{display:block;top:9px;left:25%;right:25%;width:50%}.intro h1{width:min(230px,35vw);margin:0 auto}.intro .eyebrow,.intro .tagline{display:none}.island-caption{display:none}.journey-controls{display:flex;bottom:23px;padding:1px 3vw}.scroll-hint{display:none}footer{padding:6px 3vw}}

/* Visible motion remains on independent, lightweight layers above the intact scene. */
.window-glow{transform-box:fill-box;transform-origin:center;animation:window-pulse 2.8s ease-in-out infinite alternate}.light-1{animation-delay:-1.5s}.light-2{animation-delay:-.7s}.light-3{animation-delay:-2.1s}
.studio-bits rect{animation:firefly-rise 5s ease-in-out infinite;filter:drop-shadow(0 0 2px #e6fba2)}
.living-clouds path{transform-box:fill-box;animation:cloud-wander 18s ease-in-out infinite alternate}.living-clouds .cloud-two{animation-duration:23s;animation-delay:-9s}
.smoke-layer{opacity:.5}.smoke{animation:smoke-drift 4.4s ease-in-out infinite alternate}.smoke.teal{animation-duration:5.4s}.smoke.yellow{animation-duration:3.9s}
.moth-wings{transform-box:fill-box;transform-origin:center;animation:moth-flutter .8s ease-in-out infinite alternate}
.foreground path{transform-box:fill-box;transform-origin:50% 100%;animation:leaf-sway 5s ease-in-out infinite alternate}.foreground path:nth-child(2){animation-delay:-2s}
@keyframes window-pulse{from{opacity:.35;transform:scale(.97)}to{opacity:1;transform:scale(1.025)}}
@keyframes firefly-rise{0%{transform:translate(0,5px);opacity:0}25%{opacity:1}75%{opacity:.9}100%{transform:translate(7px,-20px);opacity:0}}
@keyframes cloud-wander{from{transform:translateX(-10px)}to{transform:translateX(24px)}}
@keyframes moth-flutter{from{transform:scaleX(.35) rotate(-12deg)}to{transform:scaleX(1) rotate(12deg)}}
@keyframes leaf-sway{from{transform:rotate(-2deg)}to{transform:rotate(3deg)}}

/* Keep focus on compact controls, without drawing frames around the artwork. */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline-color:#41644c}
.island,.island *{user-select:none;-webkit-user-select:none}
.island:focus,.island:focus-visible,#world-viewport:focus,#world-viewport:focus-visible{outline:none;box-shadow:none}
.island:focus-visible .island-halo{box-shadow:none}
.world:has(#world-viewport:focus-visible)~.journey-controls .stop.active{outline:2px solid #41644c;outline-offset:2px;border-radius:18px}
.touchgrass-action{position:absolute;z-index:4;width:44px;height:44px;transform:translate(-50%,-50%);border:0;border-radius:50%;background:#fcf4d020;color:#285e54;display:grid;place-items:center;opacity:.45;transition:opacity .2s,background .2s;box-shadow:0 0 15px #79d6ce20}
.touchgrass-action:hover,.touchgrass-action:focus-visible,.touchgrass-action[aria-pressed=true]{opacity:1;background:#fff5d4ce}
.action-glyph{font:22px Georgia,serif;text-shadow:0 0 8px #f7f9d3}
.touchgrass-hint{position:absolute;left:50%;top:calc(100% + 5px);transform:translateX(-50%);padding:7px 10px;border-radius:12px;white-space:nowrap;background:#faeed3ed;color:#234731;font-size:10px;opacity:0;pointer-events:none;transition:opacity .2s}
.touchgrass-action:hover .touchgrass-hint,.touchgrass-action:focus-visible .touchgrass-hint{opacity:1}
.tg-phone-glow{opacity:.35;transform-box:fill-box;transform-origin:center;animation:phone-dream 3.5s ease-in-out infinite alternate;transition:opacity .4s}
.touchgrass-awake .tg-phone-glow{opacity:.9;filter:drop-shadow(0 0 6px #78dcd4)}
.tg-panel{opacity:.15;animation:panel-light 4s ease-in-out infinite alternate}.touchgrass-awake .tg-panel{opacity:.55}.tower-awake .tg-panel{filter:drop-shadow(0 0 4px #7be8df)}
.tg-feed-line{animation:feed-drift 4s linear infinite}
.tg-heart{transform-box:fill-box;transform-origin:center;animation:heart-light 3s ease-in-out infinite alternate}
.tg-heart-burst{transform-box:fill-box;transform-origin:center;animation:heart-rise 1.8s ease-out both}
.motion-paused .tg-heart-burst{opacity:0}
@keyframes phone-dream{from{transform:scale(.96)}to{transform:scale(1.05)}}
@keyframes panel-light{from{fill:#85d8e2}to{fill:#c2f5e6}}
@keyframes feed-drift{0%{transform:translateY(6px);opacity:0}25%,75%{opacity:.6}100%{transform:translateY(-8px);opacity:0}}
@keyframes heart-light{from{opacity:.4;transform:scale(.8)}to{opacity:1;transform:scale(1.08)}}
@keyframes heart-rise{0%{opacity:0;transform:translate(0,0) scale(.4)}15%{opacity:1}100%{opacity:0;transform:translate(var(--heart-drift),-48px) scale(1.05)}}

/* The workshop lantern is a compact story entrance, not an artwork-sized focus target. */
.partner-lantern-action{position:absolute;z-index:5;width:44px;height:44px;display:grid;place-items:center;transform:translate(-50%,-50%);border:1px solid #e7cf8a40;border-radius:50%;background:#fff1bf22;color:#6f592f;opacity:.55;transition:opacity .2s,background .2s;box-shadow:0 0 15px #efc66d28}.partner-lantern-action:hover,.partner-lantern-action:focus-visible{opacity:1;background:#fff4d0df}.partner-lantern-glyph{font:21px Georgia,serif;text-shadow:0 0 7px #ffdf87}.partner-lantern-action:hover .touchgrass-hint,.partner-lantern-action:focus-visible .touchgrass-hint{opacity:1}.partner-lantern-glow{opacity:.55;transform-box:fill-box;transform-origin:center;animation:partner-window-light 3.3s ease-in-out infinite alternate}.world-scene:has(.partner-lantern-action:hover) .partner-lantern-glow,.world-scene:has(.partner-lantern-action:focus-visible) .partner-lantern-glow{opacity:.95}.partner-firefly{animation:partner-firefly-rise 5s ease-in-out infinite;transform-box:fill-box;transform-origin:center}.motion-paused *, .motion-paused *::before,.motion-paused *::after{transition:none!important}
@keyframes partner-window-light{from{filter:drop-shadow(0 0 2px #efc573);transform:scale(.97)}to{filter:drop-shadow(0 0 7px #efc573);transform:scale(1.03)}}
@keyframes partner-firefly-rise{0%,100%{opacity:.05;transform:translate(0,5px)}45%{opacity:.8;transform:translate(3px,-12px)}}
