:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--color-bg:#0a0a0a;--color-text:#f5f5f7;--color-text-soft:#dcdce1;--color-text-muted:#ffffff8c;--color-field-bg:#ffffff14;--color-field-border:#ffffff29;--color-field-border-focus:#ffffff6b;--color-placeholder:#ffffff47;--color-button-bg:#f5f5f7;--color-button-text:#0a0a0a;--color-tick:#ffffff47;--color-tick-done:#ffffffeb;--color-control-bg:#0a0a0a73;--color-control-border:#ffffff2e;--shade-gradient:linear-gradient(to top, #000000c7 0%, #0000006b 40%, #0000 100%);--font-system:-apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--frame-max-width:768px;--space-page:clamp(24px, 7vw, 48px);--tick-top:12px;--tick-inset:12px;--tick-height:2px;--tick-gap:4px;--control-size:40px;--control-gap:14px;--duration-fade:.7s;--duration-caption:.35s;--duration-settle:4s;--settle-scale:1.03;--letter-max-width:34rem;--letter-font-size:clamp(17px, 1.6vw + 12px, 19px);--letter-line-height:1.65}@media (prefers-reduced-motion:reduce){:root{--duration-fade:.2s;--duration-caption:0s}}*,:before,:after{box-sizing:border-box}html,body{height:100%;margin:0}html{background:var(--color-bg);color:var(--color-text);font-family:var(--font-system);-webkit-font-smoothing:antialiased;text-size-adjust:100%}body{overscroll-behavior:none;overflow:hidden}[hidden]{display:none!important}.app{background:var(--color-bg);touch-action:manipulation;position:fixed;inset:0}.screen{position:absolute;inset:0}button,input{font:inherit;color:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.screen--intro{text-align:center;padding:calc(var(--safe-top) + var(--space-page)) calc(var(--safe-right) + var(--space-page)) calc(var(--safe-bottom) + var(--space-page)) calc(var(--safe-left) + var(--space-page));flex-direction:column;justify-content:center;align-items:center;display:flex}.family{letter-spacing:.32em;text-indent:.32em;text-transform:uppercase;margin:0;font-size:clamp(22px,6.5vw,30px);font-weight:500}.year{letter-spacing:.22em;text-indent:.22em;color:var(--color-text-muted);margin:10px 0 0;font-size:15px}.gate-form{flex-direction:column;align-items:center;margin-top:48px;display:flex}.pin{text-align:center;letter-spacing:.45em;text-indent:.45em;background:var(--color-field-bg);border:1px solid var(--color-field-border);width:11ch;height:50px;caret-color:var(--color-text);-webkit-appearance:none;appearance:none;border-radius:14px;outline:none;padding:0 12px;font-size:22px}.pin::placeholder{color:var(--color-placeholder);letter-spacing:.2em;text-indent:.2em}.pin:focus{border-color:var(--color-field-border-focus)}.gate-message{min-height:1.5em;color:var(--color-text-muted);margin:18px 0 0;font-size:15px}.prompt{margin:0 0 28px;font-size:20px}.button{background:var(--color-button-bg);min-width:168px;height:50px;color:var(--color-button-text);border:0;border-radius:999px;padding:0 30px;font-size:17px;font-weight:500;transition:opacity .15s,transform .15s}.button:active{opacity:.85;transform:scale(.98)}.button:focus-visible{outline:2px solid var(--color-text);outline-offset:4px}.screen--memory{background:var(--color-bg);overflow:hidden}.stage{touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;position:absolute;inset:0}.frame{width:100%;max-width:var(--frame-max-width);height:100%;margin:0 auto;position:relative;overflow:hidden}.layer{z-index:0;object-fit:contain;opacity:0;pointer-events:none;transform-origin:50%;will-change:opacity, transform;width:100%;height:100%;position:absolute;inset:0}.layer.is-visible,.layer.is-leaving{animation:settle var(--duration-settle) ease-out forwards}.layer.is-visible{opacity:1}.layer.is-leaving{z-index:1;opacity:0;transition:opacity var(--duration-fade) ease}@keyframes settle{0%{transform:scale(var(--settle-scale))}to{transform:scale(1)}}.shade{z-index:2;background:var(--shade-gradient);pointer-events:none;height:40%;transition:opacity var(--duration-caption) ease;position:absolute;inset:auto 0 0}.caption{z-index:2;padding:0 calc(var(--safe-right) + var(--space-page)) calc(var(--safe-bottom) + 30px) calc(var(--safe-left) + var(--space-page));pointer-events:none;transition:opacity var(--duration-caption) ease;position:absolute;inset:auto 0 0}.caption p{margin:0}.caption__month{letter-spacing:.22em;text-transform:uppercase;color:var(--color-text-muted);font-size:12px;font-weight:500}.caption__month:not([hidden])+.caption__text{margin-top:8px}.caption__text{max-width:30rem;color:var(--color-text);font-size:17px;line-height:1.4}.stage:not(.has-caption) .shade,.stage:not(.has-caption) .caption,.stage.is-letter .shade,.stage.is-letter .caption{opacity:0}.ticks{z-index:5;top:calc(var(--safe-top) + var(--tick-top));right:calc(var(--safe-right) + var(--tick-inset));left:calc(var(--safe-left) + var(--tick-inset));gap:var(--tick-gap);pointer-events:none;display:flex;position:absolute}.tick{height:var(--tick-height);border-radius:var(--tick-height);background:var(--color-tick);flex:1 1 0;position:relative;overflow:hidden}.tick__fill{background:var(--color-tick-done);transform-origin:0;position:absolute;inset:0;transform:scaleX(0)}.tick.is-done .tick__fill{transform:scaleX(1)}.controls{z-index:5;top:calc(var(--safe-top) + var(--tick-top) + var(--tick-height) + var(--control-gap));right:calc(var(--safe-right) + var(--control-gap));gap:10px;display:flex;position:absolute}.control{width:var(--control-size);height:var(--control-size);border:1px solid var(--color-control-border);background:var(--color-control-bg);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:50%;place-items:center;padding:0;display:grid;position:relative}.control .icon{fill:currentColor;width:15px;height:15px}.control--memory .icon--play{transform:translate(1px)}.control--memory[aria-pressed=true] .icon--play,.control--memory[aria-pressed=false] .icon--pause{display:none}.control--song[aria-pressed=false] .icon{opacity:.45}.control--song[aria-pressed=false]:after{content:"";background:currentColor;width:55%;height:1.5px;position:absolute;transform:rotate(-45deg)}.stage.is-letter .control--memory{display:none}.control:focus-visible{outline:2px solid var(--color-text);outline-offset:3px}.letter{z-index:4;overscroll-behavior:contain;padding:calc(var(--safe-top) + var(--tick-top) + var(--tick-height) + var(--control-gap) + var(--control-size) + 28px) calc(var(--safe-right) + var(--space-page)) calc(var(--safe-bottom) + 56px) calc(var(--safe-left) + var(--space-page));background:var(--color-bg);opacity:0;visibility:hidden;transition:opacity var(--duration-fade) ease, visibility 0s linear var(--duration-fade);position:absolute;inset:0;overflow-y:auto}.letter.is-visible{opacity:1;visibility:visible;transition:opacity var(--duration-fade) ease}.letter__body{max-width:var(--letter-max-width);white-space:pre-wrap;overflow-wrap:break-word;font-size:var(--letter-font-size);line-height:var(--letter-line-height);color:var(--color-text-soft);margin:0 auto}@media (prefers-reduced-motion:reduce){.layer.is-visible,.layer.is-leaving{animation:none}}