:root{--gold: #e8e2d0;--txt: #f4f1ea;--muted: rgba(244, 241, 234, .42);--faint: rgba(244, 241, 234, .16)}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%}body{font-family:Inter,Noto Sans JP,system-ui,sans-serif;background:#030712;color:var(--txt);overflow:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-tap-highlight-color:transparent}#stage{position:fixed;inset:0;display:flex;flex-direction:column;background:radial-gradient(120% 80% at 50% -10%,#16203a 0%,transparent 55%),linear-gradient(to bottom,#0b111e,#060a14 45%,#030712);padding:calc(env(safe-area-inset-top) + 4vh) 20px calc(env(safe-area-inset-bottom) + 22px);overflow:hidden}#stage:before,#stage:after{content:"";position:absolute;inset:0;background-repeat:repeat;pointer-events:none}#stage:before{background-image:radial-gradient(1px 1px at 12% 22%,rgba(255,255,255,.9),transparent),radial-gradient(1px 1px at 78% 14%,rgba(255,255,255,.7),transparent),radial-gradient(1px 1px at 33% 67%,rgba(255,255,255,.8),transparent),radial-gradient(1px 1px at 64% 82%,rgba(255,255,255,.6),transparent),radial-gradient(1.5px 1.5px at 88% 58%,rgba(255,255,255,.75),transparent);background-size:100% 100%;animation:twinkle 6s ease-in-out infinite;opacity:.55}#stage:after{background-image:radial-gradient(1px 1px at 22% 42%,rgba(200,215,255,.7),transparent),radial-gradient(1px 1px at 52% 12%,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 91% 32%,rgba(255,255,255,.6),transparent),radial-gradient(1px 1px at 8% 78%,rgba(200,215,255,.5),transparent);background-size:100% 100%;animation:twinkle 9s ease-in-out infinite reverse;opacity:.4}@keyframes twinkle{0%,to{opacity:.25}50%{opacity:.6}}header{position:relative;z-index:3;text-align:center;flex:0 0 auto;opacity:0;animation:fadeDown 1.2s .2s ease forwards}.date-line{font-size:13px;font-weight:300;letter-spacing:.42em;text-transform:uppercase;color:var(--muted);margin-left:.42em}.phase-name{font-family:Cormorant Garamond,Noto Sans JP,serif;font-weight:400;font-size:clamp(34px,11vw,52px);line-height:1.05;letter-spacing:.02em;margin:10px 0 4px;background:linear-gradient(180deg,#fff,#cfd6e6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.phase-en{font-size:11px;font-weight:400;letter-spacing:.3em;text-transform:uppercase;color:var(--faint)}.illum{margin-top:16px;display:inline-flex;align-items:baseline;gap:7px}.illum .num{font-size:26px;font-weight:200;letter-spacing:.02em;color:var(--gold)}.illum .lbl{font-size:10px;font-weight:400;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}#moon-stage{position:relative;z-index:2;flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-height:0}#moon-canvas{width:80vw;max-width:440px;aspect-ratio:1 / 1;max-height:100%;display:block;opacity:0;animation:fadeMoon 1.8s .4s cubic-bezier(.16,1,.3,1) forwards;filter:drop-shadow(0 0 60px rgba(120,150,220,.1))}#moon-canvas canvas{border-radius:50%}footer{position:relative;z-index:3;flex:0 0 auto;opacity:0;animation:fadeUp 1.2s .6s ease forwards}.scrub-date{text-align:center;font-size:12px;font-weight:300;letter-spacing:.26em;color:var(--muted);margin-bottom:16px;transition:color .3s}.scrub-date b{color:var(--txt);font-weight:400}.seek-wrap{position:relative;padding:0 6px}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:38px;background:transparent;cursor:grab}input[type=range]:active{cursor:grabbing}input[type=range]::-webkit-slider-runnable-track{height:2px;border-radius:2px;background:linear-gradient(to right,#f4f1ea0f,#f4f1ea47,#f4f1ea0f)}input[type=range]::-moz-range-track{height:2px;border-radius:2px;background:#f4f1ea2e}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-10px;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#d7d2c4 60%,#a9a496);box-shadow:0 0 0 1px #ffffff40,0 0 14px 2px #e8e2d08c,0 2px 8px #00000080;transition:box-shadow .25s,transform .15s}input[type=range]:active::-webkit-slider-thumb{transform:scale(1.12);box-shadow:0 0 0 1px #ffffff59,0 0 26px 5px #e8e2d0cc,0 2px 10px #0009}input[type=range]::-moz-range-thumb{width:22px;height:22px;border:none;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#d7d2c4 60%,#a9a496);box-shadow:0 0 14px 2px #e8e2d08c,0 2px 8px #00000080}.seek-marks{display:flex;justify-content:space-between;margin-top:10px;padding:0 4px;font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}.today-btn{display:block;margin:16px auto 0;padding:9px 22px;font-family:inherit;font-size:10px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);background:#f4f1ea0a;border:1px solid rgba(244,241,234,.12);border-radius:100px;cursor:pointer;transition:all .3s}.today-btn.is-today{opacity:.4}.today-btn:hover{color:var(--txt);border-color:#f4f1ea4d;background:#f4f1ea14}@keyframes fadeDown{0%{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}@keyframes fadeUp{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@keyframes fadeMoon{0%{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}@media(min-width:600px){#stage{max-width:480px;margin:0 auto;border-left:1px solid rgba(255,255,255,.04);border-right:1px solid rgba(255,255,255,.04)}}