@font-face{font-family:"Ginto Normal";src:url("fonts/GintoNormal-Regular.99ded2892aed.woff2") format("woff2");font-weight:400;font-display:swap}
:root{--page:#2b2a1f;--scene-ink:#b7daf0;--scene-hint:#b7daf0;--ui-ink:#c0dce7;--edge:clamp(24px,5vw,72px);color-scheme:dark;font:400 16px/1.5 "Ginto Normal",Arial,sans-serif;color:var(--ui-ink);background:var(--page)}
*{box-sizing:border-box}
body{margin:0;min-width:280px;min-height:100svh;background:var(--page)}
.page-grain{position:fixed;inset:0;pointer-events:none;z-index:0;background:var(--page) url('page-grain.4e246769b3b4.webp') repeat;background-size:156px}
#preview{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:0}
body:has(.stage.ready) #preview{opacity:1}
/* Mobile Safari extends a solid tint beneath its floating toolbar. Ease the
   stationary grain into that exact color before the viewport ends. This paints
   above both background layers, below the UI, and below the paper's bounds. */
@media(hover:none) and (pointer:coarse){
 body::after{content:"";position:fixed;inset:auto 0 0;height:clamp(72px,12svh,112px);height:calc(clamp(72px,12svh,112px) + env(safe-area-inset-bottom));z-index:0;pointer-events:none;background:linear-gradient(to bottom,transparent 0%,color-mix(in srgb,var(--page) 10%,transparent) 20%,color-mix(in srgb,var(--page) 35%,transparent) 40%,color-mix(in srgb,var(--page) 70%,transparent) 60%,color-mix(in srgb,var(--page) 94%,transparent) 80%,var(--page) calc(100% - 4px),var(--page) 100%)}
}
/* Reserve the actions even before a reveal: the scene never jumps on replay. */
.site-shell{position:relative;z-index:1;display:grid;grid-template-rows:24px minmax(0,1fr) 80px;width:100%;height:100svh;height:100dvh;min-height:360px;padding:max(40px,env(safe-area-inset-top)) max(var(--edge),env(safe-area-inset-right)) max(46px,env(safe-area-inset-bottom)) max(var(--edge),env(safe-area-inset-left));isolation:isolate}
.site-header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;z-index:2}
.site-header h1{font:inherit;color:var(--ui-ink);letter-spacing:0;margin:0;white-space:nowrap}
.tally{white-space:pre;letter-spacing:2px;text-align:center}
.studio-desktop{justify-self:end;white-space:nowrap}
.scene-region{display:grid;grid-template-columns:minmax(0,1fr);place-items:center;min-width:0;min-height:0}
/* Keep the movie's 6:5 projection intact, including the invisible hit target. */
.stage{position:relative;width:min(880px,100%,calc((100dvh - 170px)*1.2));aspect-ratio:6/5;isolation:isolate;transform:translateY(5.5%)}
.stage video{position:absolute;width:100%;height:100%;object-fit:contain;inset:0;visibility:hidden}
.loading-poster{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.stage.ready .loading-poster,.stage.fallback .loading-poster{visibility:hidden}
.loading-poster{transition:transform .12s ease-out}
.stage.tap-queued .loading-poster{transform:translateY(2px) scale(.98)}
.stage.fallback video{filter:brightness(1.06);visibility:visible;mask-image:radial-gradient(ellipse,#000 45%,transparent 72%)}
.experience-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,233px));justify-content:center;align-items:stretch;gap:16px;min-height:80px;z-index:2}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button.control{min-width:0;min-height:44px;padding:16px 20px;border:1px solid var(--ui-ink);border-radius:0;background:transparent;line-height:24px;color:var(--ui-ink)}
body:has(#cookie) button.control,body:has(#cookie) h1{color:var(--ui-ink)}
@media(hover:hover){button.control:hover{background:color-mix(in srgb,var(--ui-ink) 9%,transparent)}.sound-toggle:hover{text-decoration:underline;text-underline-offset:4px}}
button:focus-visible,textarea:focus-visible{outline:2px solid var(--ui-ink);outline-offset:5px}
button:disabled{cursor:default}
[hidden]{display:none!important}
.grip-hint{font-size:12px;opacity:.8;bottom:13%}
.site-footer{position:absolute;inset-inline: max(var(--edge),env(safe-area-inset-left)) max(var(--edge),env(safe-area-inset-right));bottom:max(30px,env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:44px;pointer-events:none}
.sound-toggle{justify-self:start;min-width:44px;min-height:44px;padding:10px 0;border:0;background:none;text-align:left;pointer-events:auto}
.experiment{grid-column:3;justify-self:end}
.studio-mobile{display:none}
.status{position:absolute;top:calc(50% + 100px);inset-inline:24px;font-size:12px;text-align:center;color:var(--ui-ink);margin:0;pointer-events:none}
.fallback-fortune{position:absolute;top:43%;left:50%;transform:translate(-50%,-50%);width:80%;margin:0;font:300 clamp(17px,2.6vw,32px)/1.25 "Times Now",serif;white-space:pre-line;text-align:center;color:var(--scene-ink)}
/* The mobile footer has its own row, including room for browser/screen insets. */
@media(max-width:700px){
 .site-shell{grid-template-rows:64px minmax(0,1fr) 64px auto;min-height:460px;padding:max(40px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
 .site-header{grid-template-columns:1fr;grid-template-rows:24px 24px;gap:16px;justify-items:center}
 .studio-desktop{display:none}
 .scene-region{margin-inline:-16px;overflow:clip}
 .stage{width:min(calc(100vw + 14px),calc((100dvh - 290px)*1.2));max-width:none;transform:translateY(-8%)}
 .experience-buttons{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;min-height:64px}
 button.control{font-size:clamp(14px,4vw,16px);padding:12px 8px}
 .site-footer{position:static;inset:auto;height:44px;margin:clamp(20px,7.1svh,62px) 8px 0;pointer-events:auto}
 .studio-mobile{display:block;grid-column:2;text-align:center}
 .grip-hint{bottom:11%;font-size:11px}
 .fallback-fortune{font-size:clamp(16px,4.6vw,24px)}
}
/* Short landscape windows retain reachable controls and a useful scene. */
@media(max-height:560px){
 .site-shell{padding-top:max(16px,env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom));grid-template-rows:24px minmax(0,1fr) 52px}
 .stage{width:min(650px,100%,calc((100dvh - 70px)*1.3));transform:none}
 .experience-buttons{min-height:52px}
 .site-footer{bottom:max(16px,env(safe-area-inset-bottom))}
}
@media(max-width:700px) and (max-height:560px){
 .site-shell{grid-template-rows:24px minmax(0,1fr) 52px 44px;min-height:360px}
 .site-header{grid-template-columns:1fr auto;grid-template-rows:24px;justify-items:start;gap:12px}
 .tally{justify-self:end;font-size:12px}
 .stage{width:min(calc(100vw + 14px),400px)}
 .site-footer{margin-top:12px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Video export is an on-demand, focus-contained preview, separate from the scene. */
.share-dialog{width:min(440px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:20px;border:1px solid var(--ui-ink);border-radius:0;background:var(--page);color:var(--ui-ink);overflow:auto;overscroll-behavior:contain}
.share-dialog::backdrop{background:#0a0a08c9}
.share-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}
.share-heading h2{font:400 20px/1.3 "Ginto Normal",Arial,sans-serif;margin:0}
.share-close{border:0;background:none;font-size:28px;width:44px;height:44px;margin:-10px -10px -10px 0}
#share-status{font-size:13px;line-height:1.45;margin:14px 0}
#share-progress{display:block;width:100%;height:4px;margin:0 0 16px;accent-color:var(--ui-ink)}
#share-canvas,#share-video{display:block;max-width:100%;width:auto;height:min(48dvh,460px);aspect-ratio:9/16;margin:0 auto;background:var(--page)}
.share-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:16px}
.share-actions .control{flex:1 1 140px;font:400 14px/24px "Ginto Normal",Arial,sans-serif;text-align:center;min-height:48px;padding:10px 12px;border:1px solid var(--ui-ink);border-radius:0;background:transparent;color:var(--ui-ink);text-decoration:none;cursor:pointer}
.share-actions a:focus-visible{outline:2px solid var(--ui-ink);outline-offset:4px}
.copy-fate{display:block;min-height:44px;margin:8px auto 0;padding:8px 16px;font-size:13px;text-decoration:underline;text-underline-offset:3px;border:0;background:none}
#share-text{width:100%;font:300 18px/1.3 "Times Now",serif;color:var(--ui-ink);background:transparent;border:1px solid var(--ui-ink);padding:12px}
@media(prefers-reduced-motion:reduce){#share-canvas{visibility:hidden;height:0}}