:root{color-scheme:light;--ink:#202329;--muted:#7f8590;--paper:#f9fafc;--hair:rgba(60,66,77,.12);--glass:rgba(255,255,255,.7)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;overflow-x:hidden;background:var(--paper);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","PingFang SC","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased;color:var(--ink)}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid rgba(83,123,236,.55);outline-offset:4px}[hidden]{display:none!important}
.ambient{position:fixed;z-index:-1;pointer-events:none;filter:blur(95px);border-radius:50%;opacity:.44;mix-blend-mode:multiply;animation:ambientMove 18s ease-in-out infinite alternate}.ambient-a{width:48vw;height:48vw;min-width:380px;min-height:380px;top:-30%;left:-15%;background:radial-gradient(circle,rgba(191,206,250,.46),rgba(220,200,243,.13) 63%,transparent 76%)}.ambient-b{width:48vw;height:48vw;min-width:420px;min-height:420px;right:-17%;bottom:-42%;background:radial-gradient(circle,rgba(255,211,187,.47),rgba(217,239,223,.23) 65%,transparent 79%);animation-delay:-8s}@keyframes ambientMove{to{transform:translate(7%,5%) scale(1.1)}}
.topbar{height:92px;max-width:1420px;padding:0 clamp(24px,6vw,104px);margin:auto;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:5}.brand{display:inline-flex;align-items:center;gap:13px;font-size:16px;font-weight:600;letter-spacing:.045em}.back-arrow{border:1px solid var(--hair);border-radius:50%;width:34px;height:34px;display:grid;place-items:center;font-size:17px;font-weight:400;background:#ffffff66;transition:background .2s,transform .2s}.brand:hover .back-arrow{transform:translate(-3px,-2px);background:#fff}.mid-dot{color:#a0a9bd}.top-mark,.bottom-bar,.gate-foot,.letter-kicker,.paper-heading{font-size:10px;font-weight:600;letter-spacing:.21em;color:#9297a1}.top-mark span{padding:0 8px;color:#c0c3ce}
.gate-stage{width:min(100% - 34px,740px);min-height:calc(100svh - 148px);margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 0 26px;animation:pageAppear .7s ease both}.section-tag{display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:.21em;color:#9298a3;font-weight:650;margin:0 0 27px}.tag-dot{width:7px;height:7px;border-radius:50%;display:inline-block;background:#b7c8f6;box-shadow:0 0 0 4px rgba(192,205,247,.2)}.date-grid{display:flex;gap:clamp(8px,3.3vw,25px);justify-content:center;align-items:end;margin-bottom:28px}.date-cell{display:flex;flex-direction:column;align-items:center;gap:7px}.date-cell>span{font-size:9px;font-weight:600;letter-spacing:.22em;color:#a5aab6}.date-cell strong{font-weight:320;font-size:clamp(54px,9vw,92px);letter-spacing:-.092em;line-height:1;font-variant-numeric:tabular-nums}.date-separator{font-size:clamp(44px,6vw,66px);font-weight:200;line-height:1.06;color:#c8ccd5;margin:0 .02em}
.card-wrap{width:min(100%,530px);position:relative}.halo-ring{position:absolute;inset:-55px -54px;z-index:0;opacity:.55;pointer-events:none;filter:blur(.3px)}.halo-ring .ring-petal{position:absolute;top:50%;left:50%;width:10px;height:25px;border-radius:65% 50% 66% 35%;transform-origin:50% 115px;opacity:.75;filter:blur(.6px);animation:pulse 11s ease-in-out infinite alternate}@keyframes pulse{to{opacity:.25;filter:blur(2.5px)}}.gate-card{position:relative;z-index:1;isolation:isolate;background:linear-gradient(148deg,rgba(255,255,255,.93),rgba(255,255,255,.78));border:1px solid rgba(255,255,255,.96);box-shadow:0 20px 90px rgba(73,89,132,.09),0 0 0 1px rgba(66,72,91,.035);border-radius:32px;text-align:center;padding:42px clamp(24px,6vw,60px) 27px;backdrop-filter:blur(20px)}.card-light{position:absolute;z-index:-1;inset:0;pointer-events:none;background:radial-gradient(ellipse at 27% -10%,rgba(197,216,255,.36),transparent 42%),radial-gradient(ellipse at 83% 115%,rgba(251,209,203,.27),transparent 40%);border-radius:inherit}.lock-symbol{display:inline-grid;place-items:center;width:43px;height:43px;border-radius:15px;background:linear-gradient(125deg,#e6efff,#ffe9e2);color:#7c94c7;font-size:23px;margin-bottom:20px}.gate-card h1{font-weight:520;font-size:clamp(26px,4vw,35px);letter-spacing:-.06em;margin:0}.card-note{color:#8b919b;font-size:14px;line-height:1.9;margin:16px 0 33px}.gate-card form{text-align:left}.gate-card label{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:650;color:#555d69;margin-bottom:11px}.tiny-label{font-size:9px;color:#a3a9b6;letter-spacing:.17em}.input-row{display:flex;gap:9px}.input-row input{width:100%;min-width:0;border:1px solid #e0e5ef;background:#f8f9fc;border-radius:13px;min-height:54px;font-size:20px;letter-spacing:.24em;padding:0 16px;color:#3f4e66;font-variant-numeric:tabular-nums;transition:border-color .2s,box-shadow .2s}.input-row input:focus{outline:none;border-color:#a9b9e3;box-shadow:0 0 0 4px #aabceb32}.input-row input::placeholder{color:#b7bdcb;letter-spacing:.21em}.input-row button{flex:0 0 110px;min-height:54px;border:0;background:#242b39;color:#fff;border-radius:13px;font-size:13px;font-weight:600;transition:transform .2s,background .2s}.input-row button:hover{background:#37435b;transform:translateY(-1px)}.input-row button:disabled{opacity:.55;cursor:wait;transform:none}.input-row button span{padding-left:6px}.status{text-align:center;font-size:11px;color:#a0a5b0;min-height:22px;margin:12px 0 21px}.status.error{color:#c7505b}.status.success{color:#357b66}.gate-foot{border-top:1px solid var(--hair);padding-top:21px;display:flex;justify-content:space-between;font-size:9px}.gate-caption{margin:31px 0 0;font-size:12px;letter-spacing:.035em;color:#9b9fac}
.letter-stage{max-width:1000px;padding:0 24px 80px;margin:0 auto;animation:pageAppear .78s cubic-bezier(.23,1,.32,1) both}.letter-head{text-align:center;min-height:65vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:90px 0 25px}.letter-kicker{display:flex;align-items:center;gap:12px}.letter-kicker .slash{color:#bec5cd}.letter-series{font-size:13px;letter-spacing:.16em;color:#737a88;margin:55px 0 0}.letter-series span{color:#b7bbc4;margin-left:8px}.letter-head h1{font-size:clamp(64px,10vw,124px);line-height:1.2;letter-spacing:-.085em;font-weight:320;margin:8px 0 10px;background:linear-gradient(125deg,#22283a 12%,#667ca6 45%,#916f90 70%,#30394b 93%);-webkit-background-clip:text;background-clip:text;color:transparent}.letter-subtitle{font-size:15px;line-height:1.75;color:#9298a1;margin:0}.letter-scroll-cue{display:flex;align-items:center;gap:17px;margin-top:83px;color:#afb2bc;font-size:10px;letter-spacing:.21em}.letter-scroll-cue span:last-child{font-size:18px;animation:floatDown 2s ease-in-out infinite}@keyframes floatDown{50%{transform:translateY(6px)}}.letter-paper{background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.95);border-radius:30px;box-shadow:0 18px 74px rgba(76,94,136,.06);max-width:760px;margin:auto;padding:clamp(30px,6vw,80px);min-height:400px}.paper-heading{display:flex;justify-content:space-between;border-bottom:1px solid var(--hair);padding-bottom:27px}.letter-paper h2{font-size:clamp(27px,4vw,42px);font-weight:450;letter-spacing:-.05em;margin:55px 0 35px}.letter-paragraphs p{font-size:clamp(16px,2vw,19px);line-height:2.2;letter-spacing:.025em;margin:0 0 25px;white-space:pre-wrap}.letter-paragraphs .pending-copy{color:#abb0bb;border:1px dashed #d9dce6;border-radius:14px;padding:38px 26px;text-align:center;font-size:14px;letter-spacing:.07em}.letter-signoff{text-align:right;margin:36px 0 0;font-size:14px;color:#737a88;white-space:pre-wrap}.paper-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:85px;padding-top:20px;border-top:1px solid var(--hair);color:#aeb3bc;letter-spacing:.13em;font-size:10px}.inline-spark{font-size:25px;color:#b2bfe5}.letter-tail{max-width:760px;margin:26px auto 0;display:flex;justify-content:space-between;align-items:center;color:#a1a6b1;font-size:12px}.letter-tail button{background:none;border:0;color:#66758a;font-size:12px;padding:9px 0}.letter-tail button:hover{text-decoration:underline}.bottom-bar{max-width:1420px;margin:0 auto;padding:22px clamp(24px,6vw,104px) 26px;display:flex;justify-content:space-between;color:#afb4be;font-size:9px}
@keyframes pageAppear{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}@media(max-width:680px){.topbar{height:75px;padding:0 22px}.top-mark{font-size:8px}.gate-stage{min-height:calc(100svh - 132px)}.gate-card{border-radius:26px;padding:36px 25px 20px}.date-cell strong{font-size:clamp(52px,11vw,70px)}.date-grid{margin-bottom:23px}.halo-ring{inset:-30px -13px;opacity:.33}.card-note{margin-bottom:26px}.input-row button{flex-basis:95px}.letter-head{min-height:55vh}.letter-scroll-cue{margin-top:52px}.letter-paper{border-radius:22px}.gate-foot{font-size:8px}.gate-caption{font-size:11px;text-align:center}.bottom-bar{padding:20px 22px;font-size:8px}.letter-tail{align-items:flex-start;gap:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}

/* The sealed chapter stays quiet, only the background's light follows time. */
.ambient-a{background:radial-gradient(circle,var(--site-glow-a,rgba(191,206,250,.46)),transparent 76%)}
.ambient-b{background:radial-gradient(circle,var(--site-glow-b,rgba(255,211,187,.47)),transparent 79%)}