:root{--night:#07111f;--night-soft:#0d1b2d;--night-blue:#132943;--cream:#f5eddd;--paper:#faf4e8;--ink:#14243a;--mist:#aebed0;--moon:#f8e8bd;--gold:#cbb27a;--line:#f5eddd2b;--serif:"Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;--sans:Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif}*{box-sizing:border-box}html{background:var(--night);scroll-behavior:smooth}body{background:var(--night);min-width:320px;color:var(--cream);font-family:var(--sans);-webkit-font-smoothing:antialiased;margin:0}button,input{font:inherit}button{color:inherit}.site{background:radial-gradient(circle at 72% 16%, #6284ae2e, transparent 29rem), radial-gradient(circle at 20% 82%, #2944643d, transparent 32rem), linear-gradient(145deg, #050c17 0%, var(--night) 48%, #0a1728 100%);min-height:100svh;position:relative;overflow:hidden}.night-sky{z-index:0;pointer-events:none;position:fixed;inset:0;overflow:hidden}.night-sky:after{content:"";opacity:.12;mix-blend-mode:soft-light;background-image:radial-gradient(circle at 20% 30%,#ffffff4d 0 .5px,#0000 .7px),radial-gradient(circle at 70% 65%,#ffffff38 0 .5px,#0000 .7px);background-size:5px 7px,9px 11px;position:absolute;inset:0}.star{background:var(--cream);border-radius:50%;width:3px;height:3px;animation:4.8s ease-in-out infinite glimmer;position:absolute;box-shadow:0 0 12px #f5edddcc}.star-one{top:16%;left:11%}.star-two{opacity:.7;animation-delay:-2.4s;top:68%;left:27%}.star-three{animation-delay:-1.2s;top:31%;right:17%}.star-four{opacity:.56;animation-delay:-3.1s;bottom:14%;right:31%}.star-five{opacity:.65;animation-delay:-.8s;top:9%;left:52%}.moon-halo{aspect-ratio:1;filter:blur(4px);background:radial-gradient(circle,#fff1c91c,#749bc709 48%,#0000 69%);border-radius:50%;width:min(44vw,36rem);position:absolute;top:-22%;right:-15%}@keyframes glimmer{0%,to{opacity:.25;transform:scale(.8)}50%{opacity:.9;transform:scale(1.15)}}.gate{z-index:2;text-align:center;opacity:1;visibility:visible;place-items:center;min-height:100svh;padding:4rem 1.5rem 2rem;transition:opacity .62s,visibility .62s;display:grid;position:relative}.is-unlocked .gate{opacity:0;visibility:hidden;pointer-events:none}.gate-inner{width:min(100%,36rem);animation:1s cubic-bezier(.22,.75,.24,1) both arrive}@keyframes arrive{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.tiny-moon{background:var(--moon);border-radius:50%;width:2.25rem;height:2.25rem;margin:0 auto 1.75rem;position:relative;box-shadow:0 0 2rem #f8e8bd5c}.tiny-moon:after{content:"";background:#07111f;border-radius:50%;width:2.15rem;height:2.15rem;position:absolute;top:-.22rem;left:.68rem}.eyebrow{color:var(--gold);letter-spacing:.24em;text-transform:uppercase;margin:0;font-size:.67rem;font-weight:600}.gate h1{font-family:var(--serif);letter-spacing:-.055em;text-wrap:balance;text-shadow:0 0 3rem #d3e1f01a;margin:1rem 0 1.15rem;font-size:clamp(4rem,13vw,6.8rem);font-style:italic;font-weight:400;line-height:.83}.gate-note{color:var(--mist);font-family:var(--serif);margin:0 auto;font-size:1rem;font-style:italic;line-height:1.6}.password-form{width:min(100%,25rem);margin:3.2rem auto 0}.password-form label{color:#f5eddda8;letter-spacing:.15em;text-transform:uppercase;margin-bottom:.85rem;font-size:.68rem;font-weight:600;display:block}.password-row{background:#ffffff09;border:1px solid #f5eddd3d;border-radius:999px;grid-template-columns:1fr 3.1rem;height:3.2rem;padding:.28rem;transition:border-color .2s,box-shadow .2s;display:grid;box-shadow:inset 0 1px #ffffff09,0 1rem 4rem #00000029}.password-row:focus-within{border-color:#f8e8bd99;box-shadow:0 0 0 3px #f8e8bd14,0 1rem 4rem #00000029}.password-row input{min-width:0;color:var(--cream);font-family:var(--serif);background:0 0;border:0;outline:0;padding:0 1rem 0 1.2rem;font-size:1.03rem}.password-row input::placeholder{color:#aebed06b;font-style:italic}.password-row button{background:var(--cream);width:2.6rem;height:2.6rem;color:var(--night);cursor:pointer;border:0;border-radius:50%;font-size:1.25rem;transition:transform .18s,background-color .18s}.password-row button:hover{background:#fff9ec;transform:translate(2px)}.password-row button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.password-message{color:#aebed078;letter-spacing:.025em;min-height:1.2rem;margin:.72rem 0 0;font-size:.69rem}.has-error .password-row{border-color:#e59e90bf;animation:.42s soft-shake}.has-error .password-message{color:#dba496}@keyframes soft-shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.gate-footer{color:#aebed059;font-family:var(--serif);margin:0;font-size:.76rem;font-style:italic;position:absolute;bottom:1.5rem}.letter-room{z-index:1;opacity:0;visibility:hidden;height:100svh;padding:2.4rem clamp(1.25rem,5vw,5rem) 8rem;transition:opacity .8s .32s,visibility .8s .32s,transform .8s .32s;position:absolute;inset:0;overflow-y:auto;transform:translateY(10px)}.is-unlocked .letter-room{opacity:1;visibility:visible;transform:translateY(0)}.room-header,.view-switch,.view-panel,.player-shell,.room-footer{width:min(100%,64rem);margin-inline:auto}.room-header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:flex-end;gap:2rem;padding-bottom:1.5rem;display:flex}.room-header h2{font-family:var(--serif);letter-spacing:-.04em;margin:.35rem 0 0;font-size:clamp(2rem,5vw,3.2rem);font-style:italic;font-weight:400}.for-mia{color:var(--mist);font-family:var(--serif);margin:0 0 .3rem;font-size:1.05rem;font-style:italic}.view-switch{justify-content:center;gap:.35rem;padding:1.8rem 0 1.2rem;display:flex}.view-switch button{color:#aebed08f;cursor:pointer;letter-spacing:.11em;text-transform:uppercase;background:0 0;border:0;border-radius:999px;padding:.65rem 1rem;font-size:.7rem;font-weight:650;transition:background .2s,color .2s}.view-switch button:hover{color:var(--cream)}.view-switch button.is-active{color:var(--night);background:var(--cream)}.view-switch button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.view-panel{display:none}.view-panel.is-visible{animation:.42s both panel-in;display:block}@keyframes panel-in{0%{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}.transcript{overscroll-behavior:contain;scrollbar-width:none;height:min(51svh,34rem);position:relative;overflow-y:auto;-webkit-mask-image:linear-gradient(#0000,#000 16% 84%,#0000);mask-image:linear-gradient(#0000,#000 16% 84%,#0000)}.transcript::-webkit-scrollbar{display:none}.transcript-copy{width:min(100%,50rem);margin-inline:auto;padding:40svh 0}.transcript-copy p{text-align:center;font-family:var(--serif);letter-spacing:-.025em;margin:0 0 1.3rem;font-size:clamp(1.55rem,3.5vw,2.65rem);line-height:1.4}.word{color:#aebed03d;cursor:pointer;font:inherit;line-height:inherit;background:0 0;border:0;margin:0 .22em 0 0;padding:0;transition:color .38s,text-shadow .38s;display:inline}.word:hover{color:#f5edddc2}.word.is-spoken{color:#aebed07a}.word.is-current{color:var(--cream);text-shadow:0 0 1.4rem #f8e8bd6b}.word:focus-visible{outline:1px solid var(--gold);outline-offset:3px;border-radius:2px}.transcript-hint{text-align:center;color:#aebed063;letter-spacing:.08em;text-transform:uppercase;margin:-.25rem 0 0;font-size:.65rem}.paper-letter{background:linear-gradient(#ffffff26, transparent), var(--paper);width:min(100%,46rem);color:var(--ink);border-radius:.3rem;margin-top:1rem;padding:clamp(2rem,7vw,5.4rem);position:relative;box-shadow:0 2rem 6rem #00000047}.paper-letter:before{content:"";border-radius:inherit;opacity:.08;pointer-events:none;background-image:repeating-linear-gradient(89deg,#14243a29 0 1px,#0000 1px 5px),repeating-linear-gradient(2deg,#14243a1a 0 1px,#0000 1px 7px);position:absolute;inset:0}.paper-letter p{font-family:var(--serif);margin:0 0 1.35em;font-size:clamp(1.06rem,2.2vw,1.25rem);line-height:1.82;position:relative}.paper-letter .letter-date{color:#697180;font-family:var(--sans);letter-spacing:.12em;text-transform:uppercase;margin-bottom:2.4rem;font-size:.7rem;font-weight:600}.paper-letter .salutation{font-size:1.42rem;font-style:italic}.paper-letter .signoff{margin-top:2.6rem;font-style:italic}.paper-letter .signoff span{margin-top:.25rem;font-size:1.6rem;display:inline-block}.player-shell{z-index:4;margin-top:1.6rem;position:sticky;bottom:1.2rem}.player{-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);background:#091423d1;border:1px solid #f5eddd29;border-radius:1.15rem;grid-template-columns:3rem 1fr 2.8rem;align-items:center;gap:1rem;min-height:5.5rem;padding:.8rem 1.1rem;display:grid;box-shadow:0 1.5rem 4rem #00000057,inset 0 1px #ffffff09}.play-button{background:var(--cream);cursor:pointer;border:0;border-radius:50%;width:3rem;height:3rem;transition:transform .18s,background .18s;position:relative}.play-button:hover{background:#fff9ec;transform:scale(1.035)}.play-button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.play-button>span:before{content:"";border-top:.48rem solid #0000;border-bottom:.48rem solid #0000;border-left:.73rem solid var(--night);width:0;height:0;position:absolute;top:1.02rem;left:1.18rem}.play-button.is-playing>span:before{background:var(--night);width:.26rem;height:.9rem;box-shadow:.56rem 0 0 var(--night);border:0;top:1.05rem;left:1.05rem}.timeline-wrap{min-width:0}.waveform{cursor:pointer;align-items:center;gap:max(1px,.18vw);height:2.35rem;display:flex}.waveform:focus-visible{outline:1px solid var(--gold);outline-offset:4px;border-radius:3px}.bar{background:#aebed03d;border-radius:2px;flex:1 1 0;min-width:1px;max-width:3px;transition:background-color .18s}.bar.is-past{background:var(--moon)}.time-row{color:#aebed080;font-variant-numeric:tabular-nums;justify-content:space-between;margin-top:.2rem;font-size:.62rem;display:flex}.volume-control{justify-content:flex-end;display:flex;position:relative}.volume-button{color:#f5eddda3;cursor:pointer;letter-spacing:-.1em;background:0 0;border:0;width:2.7rem;height:2.7rem;font-size:.77rem}.volume-button:hover{color:var(--cream)}.volume-button:focus-visible{outline:1px solid var(--gold);border-radius:50%}.volume-control input{width:5.5rem;height:2.2rem;accent-color:var(--moon);background:var(--night-soft);border-radius:999px;padding:0 .7rem;position:absolute;bottom:3.7rem;right:-.65rem;transform:rotate(-90deg)translate(2rem);box-shadow:0 .8rem 2rem #00000059}.room-footer{color:#aebed059;font-family:var(--serif);justify-content:center;align-items:center;gap:.75rem;padding:2.5rem 0 1rem;font-size:.78rem;font-style:italic;display:flex}.heart{color:var(--gold);font-size:.55rem}@media (width<=640px){.gate{padding-top:3rem}.gate h1{font-size:clamp(3.9rem,20vw,5.5rem)}.password-form{margin-top:2.5rem}.letter-room{padding:1.4rem 1rem 7rem}.room-header{align-items:flex-start}.room-header h2{font-size:2.15rem}.for-mia{margin-top:1.35rem}.view-switch{padding-top:1.35rem}.view-switch button{padding-inline:.76rem;font-size:.61rem}.transcript{height:50svh}.transcript-copy{padding-block:39svh}.transcript-copy p{font-size:1.7rem;line-height:1.46}.paper-letter{padding:2rem 1.5rem}.player{grid-template-columns:2.85rem 1fr;gap:.85rem;padding-inline:.85rem}.play-button{width:2.85rem;height:2.85rem}.play-button>span:before{top:.94rem;left:1.13rem}.play-button.is-playing>span:before{top:.98rem;left:1rem}.volume-control{display:none}.room-footer{text-align:center;flex-wrap:wrap;gap:.45rem .7rem;max-width:21rem;padding-bottom:.25rem}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}