/* shadowbox: full-screen light (WebGL canvas), the glowing words in the middle, a small control panel. */
@font-face{font-family:"Exposure";src:url("/ExposureVAR.woff2") format("woff2");font-style:normal;font-display:block}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;background:#163a1c}
body{color:#fff;font:400 13px/1.35 "Geist",system-ui,sans-serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
button{font:inherit;color:inherit;cursor:pointer}

/* Stage: the canvas fills the window; the words sit in the middle. No isolation on .stage, so the words' blend modes
   reach the light underneath (same as the homepage hero). Without WebGL, a still gradient in the same colors. */
.stage{position:fixed;inset:0;display:grid;place-items:center;background:radial-gradient(120% 90% at 22% 18%,#e4f1b8 0,#a6c93f 22%,#4f8a2a 48%,#24561f 70%,#123018 100%)}
.light{position:absolute;inset:0;width:100%;height:100%;display:block}

/* The homepage's glow treatment (style.css .glow / .tagline): three stacked copies of the words — a soft EXPO -70 halo in
   overlay, then two EXPO -50 layers (overlay, plus-lighter) — blended into the light. */
.glow{--expo-bright:-50;--expo-soft:-70;--bright-x:.01em;--soft-x:-.082em;display:grid;justify-items:center;font-family:"Exposure",Georgia,serif;font-style:normal;font-weight:400;line-height:1.14;text-align:center;user-select:none;-webkit-user-select:none}
.glow>[aria-hidden]{grid-area:1/1;position:relative;width:var(--tw-w,8.3em);max-width:var(--tw-max,none)}
.glow>[aria-hidden]:nth-child(1){left:var(--soft-x);font-variation-settings:"EXPO" var(--expo-soft);mix-blend-mode:overlay;filter:blur(.079em)}
.glow>[aria-hidden]:nth-child(2){left:var(--bright-x);font-variation-settings:"EXPO" var(--expo-bright);opacity:.85;mix-blend-mode:overlay;filter:blur(.023em)}
.glow>[aria-hidden]:nth-child(3){left:var(--bright-x);font-variation-settings:"EXPO" var(--expo-bright);opacity:.85;mix-blend-mode:plus-lighter;filter:blur(.023em)}
/* Desktop size is the homepage's (two lines, "objects for your / inner child"); shadowbox.js shrinks longer words to fit. */
.tagline{position:relative;margin:0 16px;padding-bottom:.08em;font-size:var(--fs,min(11.5vw,190px,calc((100svh - 280px) / 2.3)));cursor:text}
@media(max-width:700px){
.tagline{--fs:min(calc((100vw - 32px) / 3.95),112px,calc((100svh - 260px) / 4.64));--tw-w:calc(100vw - 32px)}
}

/* Words arrive one at a time (the homepage intro): each rises on a spring, fades in and sharpens while its soft halo
   flares; then they float, out of step. shadowbox.js wraps words (.tw) and letters (.tc) and adds .is-in. */
.tagline .tw{display:inline-block;white-space:nowrap}
.tagline .tc{display:inline-block;transition:font-variation-settings .15s ease,filter .15s ease}
.tagline .tg{display:inline-block;white-space:nowrap}
.tagline.is-split .tw{opacity:0}
.tagline.is-static .tw{opacity:1;animation:none!important}
.tagline{--t-dur:2.2s;--t-fade:1.2s;--t-stagger:170ms;--t-delay:120ms;--t-rise:.6;--t-ease-move:cubic-bezier(.32,1.8,.3,.8);--t-ease-fade:cubic-bezier(.45,0,.38,1);--t-blur-in:.04;--t-flare-dur:1.5s;--t-flare-scale:1.04;--t-flare-blur:.025;--t-flare-bright:1.5;--t-float:.03;--t-float-dur:3.6s;--t-float-start:.35;--t-float-in:1.8s}
@supports (animation-timing-function:linear(0,1)){.tagline{--t-ease-move:linear(0, 0.009, 0.035, 0.075, 0.125, 0.184, 0.249, 0.318, 0.389, 0.461, 0.532, 0.601, 0.667, 0.729, 0.787, 0.841, 0.889, 0.932, 0.97, 1.003, 1.031, 1.054, 1.073, 1.088, 1.099, 1.106, 1.11, 1.112, 1.111, 1.109, 1.104, 1.099, 1.092, 1.085, 1.077, 1.068, 1.06, 1.052, 1.044, 1.037, 1.03, 1.023, 1.017, 1.012, 1.008, 1.004, 1, 0.998, 0.996, 0.995, 0.994, 0.993, 0.993, 0.993, 0.994, 0.995, 0.996, 0.997, 0.998, 0.999, 1)}}
.tagline.is-in .tw{--d:calc(var(--w) * var(--t-stagger) + var(--t-delay));animation:tw-move var(--t-dur) var(--t-ease-move) both,tw-fade var(--t-fade) var(--t-ease-fade) both,tw-sharpen var(--t-fade) var(--t-ease-fade) both,tw-float calc(var(--t-float-dur) + var(--w) * .41s) ease-in-out infinite,tw-float-in var(--t-float-in) ease-in-out both;animation-delay:var(--d),var(--d),var(--d),calc(var(--d) + var(--t-dur) * var(--t-float-start)),calc(var(--d) + var(--t-dur) * var(--t-float-start))}
.tagline.is-in>[aria-hidden]:nth-child(1) .tw{animation:tw-move var(--t-dur) var(--t-ease-move) both,tw-fade var(--t-fade) var(--t-ease-fade) both,tw-flare var(--t-flare-dur) ease-in-out both,tw-float calc(var(--t-float-dur) + var(--w) * .41s) ease-in-out infinite,tw-float-in var(--t-float-in) ease-in-out both;animation-delay:var(--d),var(--d),var(--d),calc(var(--d) + var(--t-dur) * var(--t-float-start)),calc(var(--d) + var(--t-dur) * var(--t-float-start));transform-origin:50% 65%}
@keyframes tw-move{from{translate:0 calc(var(--t-rise) * 1em)}to{translate:0 0}}
@keyframes tw-fade{from{opacity:0}to{opacity:1}}
@property --fa{syntax:'<number>';inherits:false;initial-value:0}
@keyframes tw-float-in{from{--fa:0}to{--fa:1}}
@keyframes tw-float{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(var(--t-float) * var(--fa) * -1em))}}
@keyframes tw-sharpen{from{filter:blur(calc(var(--t-blur-in) * 1em))}to{filter:blur(0)}}
@keyframes tw-flare{0%{scale:1;filter:blur(calc(var(--t-blur-in) * 1em)) brightness(1)}55%{scale:var(--t-flare-scale);filter:blur(calc(var(--t-flare-blur) * 1em)) brightness(var(--t-flare-bright))}100%{scale:1;filter:blur(0) brightness(1)}}
/* phones: no float once landed (Safari snaps the 3px drift to whole pixels as the glow repaints, so it twitches) */
@media(pointer:coarse){
.tagline.is-in .tw{animation:tw-move var(--t-dur) var(--t-ease-move) both,tw-fade var(--t-fade) var(--t-ease-fade) both,tw-sharpen var(--t-fade) var(--t-ease-fade) both;animation-delay:var(--d),var(--d),var(--d)}
.tagline.is-in>[aria-hidden]:nth-child(1) .tw{animation:tw-move var(--t-dur) var(--t-ease-move) both,tw-fade var(--t-fade) var(--t-ease-fade) both,tw-flare var(--t-flare-dur) ease-in-out both;animation-delay:var(--d),var(--d),var(--d)}
}
@media(prefers-reduced-motion:reduce){.tagline.is-in .tw{animation:none!important;opacity:1}}

/* Top left: home link in the nav logo's glow, and the page name. */
.sb-top{position:fixed;top:0;left:0;z-index:5;display:flex;align-items:baseline;gap:12px;padding:calc(16px + env(safe-area-inset-top)) 20px 16px;pointer-events:none}
.sb-home{pointer-events:auto;color:#fff;text-decoration:none;font:400 clamp(24px,2.1vw,30px)/1 "Exposure",Georgia,serif;font-variation-settings:"EXPO" -60;text-shadow:0 0 .12em rgba(255,255,235,.85),0 0 .45em rgba(230,255,200,.45);mix-blend-mode:plus-lighter}
.sb-title{color:#fff;font-size:13px;letter-spacing:.01em;text-shadow:0 0 2px rgba(0,30,8,.35),0 1px 12px rgba(0,30,8,.6)}

/* Controls: frosted green glass, bottom left. */
.panel{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:5;width:316px;padding:10px 12px 12px;border-radius:16px;background:rgba(10,30,14,.34);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(18px) saturate(1.25);backdrop-filter:blur(18px) saturate(1.25);box-shadow:0 10px 40px rgba(0,20,6,.25);transition:opacity .35s,transform .35s}
.panel-head{display:flex;gap:8px;align-items:center}
.words{flex:1;min-width:0}
.words input{width:100%;padding:6px 2px 5px;border:0;border-bottom:1px solid rgba(255,255,255,.35);border-radius:0;background:none;color:#fff;font:400 16px/1.2 "Geist",system-ui,sans-serif;outline:none}
.words input::placeholder{color:rgba(255,255,255,.5)}
.words input:focus{border-bottom-color:#fff}
.more{flex:none;padding:5px 9px;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:none;font-size:12px;color:rgba(255,255,255,.9)}
.more::after{content:" ▾";font-size:10px}
.more[aria-expanded=false]::after{content:" ▴"}
.panel-body{display:grid;gap:9px;margin-top:12px}
.panel.is-collapsed .panel-body{display:none}
.row[hidden]{display:none}
.row{display:grid;grid-template-columns:64px 1fr;align-items:center;gap:8px}
.lbl{color:rgba(255,255,255,.72)}
.chips{display:flex;flex-wrap:wrap;gap:4px}
.chips button{padding:4px 9px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:none;font-size:12px;color:rgba(255,255,255,.88);transition:background .2s,color .2s,border-color .2s}
.chips button[aria-pressed=true]{background:#fff;border-color:#fff;color:#163a1c}
.swatches button{padding:3px;border-radius:50%;line-height:0}
.swatches i{display:block;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,var(--a) 0 32%,var(--b) 32% 66%,var(--c) 66%)}
.swatches button[aria-pressed=true]{background:none;border-color:#fff;box-shadow:0 0 0 1px #fff}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:20px;margin:0;background:none;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:2px;border-radius:2px;background:linear-gradient(90deg,#fff var(--p,50%),rgba(255,255,255,.28) var(--p,50%))}
input[type=range]::-moz-range-track{height:2px;border-radius:2px;background:rgba(255,255,255,.28)}
input[type=range]::-moz-range-progress{height:2px;background:#fff}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-6px;border-radius:50%;background:#fff;border:0;box-shadow:0 1px 6px rgba(0,30,8,.3)}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:0}
input[type=range]:focus-visible{outline:1px solid rgba(255,255,255,.6);outline-offset:4px;border-radius:4px}
.actions{display:flex;gap:6px;margin-top:3px}
.actions button{flex:1;padding:7px 8px;border:1px solid rgba(255,255,255,.28);border-radius:10px;background:rgba(255,255,255,.06);font-size:12px}
.actions button:hover,.more:hover,.chips button:hover{border-color:rgba(255,255,255,.6)}
kbd{font:inherit;opacity:.6;margin-left:3px}
.show-ui{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:5;padding:7px 12px;border:1px solid rgba(255,255,255,.3);border-radius:999px;background:rgba(10,30,14,.3);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-size:12px;opacity:0;transition:opacity .4s}
.show-ui.is-awake{opacity:1}
.ui-hidden .panel,.ui-hidden .sb-top{opacity:0;pointer-events:none;transform:translateY(8px)}
.ui-hidden .panel *{pointer-events:none}
.ui-hidden .tagline{cursor:default}

@media(max-width:700px){
.sb-top{padding:calc(14px + env(safe-area-inset-top)) 16px 14px}
.panel{left:8px;right:8px;width:auto;bottom:calc(8px + env(safe-area-inset-bottom))}
.row{grid-template-columns:58px 1fr}
.actions kbd{display:none}
}
@media(hover:none){.actions #hide kbd{display:none}}