:root{color-scheme:dark;--bg:#101211;--text:#e8e6dd;--muted:#acb0a8;--light:#e5d5ad;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",sans-serif;font-size:16px;background:var(--bg);color:var(--text)}
*{box-sizing:border-box}body{margin:0;line-height:1.85}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:disabled{opacity:.4;cursor:default}a{color:var(--muted);text-underline-offset:5px}button:focus-visible,a:focus-visible,[role=button]:focus-visible{outline:2px solid var(--light);outline-offset:6px}[hidden]{display:none!important}
#experience{min-height:100svh;position:relative;display:flex;flex-direction:column;text-align:center;padding:max(30px,env(safe-area-inset-top)) max(26px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(26px,env(safe-area-inset-left));overflow-x:clip}
#wordmark{font-size:12px;letter-spacing:.42em;color:var(--muted);font-weight:400;padding-top:5svh}#signature{font-size:10px;letter-spacing:.26em;color:#9da399;padding:20px 0 2svh}
.scene{flex:1;width:100%;max-width:640px;margin:0 auto;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:36px 0}h1{font-size:clamp(26px,7vw,34px);font-weight:400;letter-spacing:.09em;line-height:1.65;margin:30px 0 8px}p{margin:12px 0;text-wrap:balance}.muted{color:var(--muted)}
.primary{border:1px solid #878d7e;border-radius:999px;background:transparent;min-height:54px;min-width:150px;padding:10px 28px;margin-top:36px;letter-spacing:.09em}.primary:hover{background:#1b201b}.circle-mark{width:90px;height:90px;border:1px solid #575f50;border-radius:50%;position:relative;margin-bottom:18px}.circle-mark i{position:absolute;left:calc(50% - 2px);top:-2px;width:4px;height:4px;background:#bcbaaa;border-radius:50%;transform-origin:2px 46px}.circle-mark i:nth-child(2){transform:rotate(120deg)}.circle-mark i:nth-child(3){transform:rotate(240deg)}
.sizes{display:flex;gap:clamp(8px,3vw,20px);margin:32px 0}.sizes button{width:56px;height:64px;border:1px solid #565f51;border-radius:50%;background:transparent;font-size:24px;font-weight:300}.sizes button:hover{background:#242a22}
#qr{width:min(232px,75vw);aspect-ratio:1;background:#fff;margin:22px 0 14px;padding:0;line-height:0}#qr svg{width:100%;height:100%}#join-url{max-width:100%;font-size:12px;overflow-wrap:anywhere;line-height:1.7;min-height:44px;padding:10px 0}#count{font-size:15px;letter-spacing:.15em;margin:8px 0}
#ordinal{font-size:clamp(72px,24vw,116px);line-height:1;font-weight:200;margin:0 0 52px;color:var(--text)}#instruction{font-size:clamp(16px,4.6vw,20px);letter-spacing:.04em;min-height:2em;position:relative;z-index:2;pointer-events:none}#hold-surface{position:absolute;inset:0;z-index:3;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}#hold-surface:focus-visible{outline-offset:-12px}#held-mark{width:4px;height:4px;border-radius:50%;background:var(--light);opacity:0;position:absolute;bottom:20svh;left:calc(50% - 2px);pointer-events:none}.holding #held-mark{opacity:.7}#core{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#illumination{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,#e5d5ad20 0%,#e5d5ad0a 48%,transparent 80%);opacity:0}#closing{font-size:clamp(24px,6.5vw,32px);font-weight:400;letter-spacing:.09em;opacity:0;line-height:1.8}
/* Core-only halo, round core and soft rim. All layers sample the existing cycle envelope. */
#traveling-light{--circle-light-radius:min(45vmin,280px);--circle-rim-opacity:0;position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 48%,#e5d5ad57 0%,#d6c8ac38 40%,#c4c0ac14 78%,#c4c0ac05 100%);opacity:0;will-change:opacity}
#traveling-light::before,#traveling-light::after{content:"";position:absolute;inset:0;pointer-events:none}
#traveling-light::before{background:radial-gradient(circle var(--circle-light-radius) at 50% 48%,#f4e8cb85 0%,#eedbb86e 35%,#e1cfa547 62%,#dfcea01c 74%,#dfcea000 86%)}
#traveling-light::after{background:radial-gradient(circle var(--circle-light-radius) at 50% 48%,#f0e1bc00 64%,#f0e1bc0c 69%,#f0e1bc57 76%,#e7d8b12e 81%,#e7d8b100 90%);opacity:var(--circle-rim-opacity)}
body[data-phase=success] #experience,body[data-phase=blank] #experience{min-height:100svh}body[data-phase=sequence] #ordinal,body[data-phase=release] #ordinal{visibility:hidden}body[data-phase=sequence] #instruction{color:var(--muted)}
@media(max-height:550px) and (orientation:landscape){#wordmark{padding-top:0}.scene{padding:20px 0}.circle-mark{width:58px;height:58px;margin:0}.circle-mark i{transform-origin:2px 30px}h1{margin-top:14px}.primary{margin-top:20px}#qr{width:150px;margin:8px 0}#ordinal{font-size:65px;margin-bottom:22px}#signature{padding:8px}#held-mark{bottom:12svh}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}