:root{
 --void:#040509;--deep:#090b11;--deep2:#0e1119;
 --ice:#eef2f8;--ice-dim:rgba(238,242,248,.74);--ice-faint:rgba(238,242,248,.46);
 --line:rgba(205,220,245,.14);--line2:rgba(205,220,245,.26);
 --warm:#edb58d;--warm2:#f6d2b5;--violet:#a493ff;--cyan:#a9dcff;
 --sans:'Commissioner',system-ui,sans-serif;--serif:'EB Garamond',Georgia,serif;--mono:'JetBrains Mono',ui-monospace,monospace;
 --pad:clamp(20px,6vw,96px);
 color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--void);color:var(--ice);font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video,canvas{display:block;max-width:100%}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3,h4{font-weight:250;letter-spacing:-.035em;line-height:1.05;margin:0}
em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--warm)}
p{margin:0 0 1em}
::selection{background:var(--warm);color:var(--void)}
.skip{position:absolute;left:-999px;top:10px;z-index:100;background:var(--ice);color:var(--void);padding:10px 16px}
.skip:focus{left:10px}
:focus-visible{outline:1px solid var(--warm);outline-offset:4px}

/* grain + cursor light */
.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}}
.cursor-light{position:fixed;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;pointer-events:none;z-index:2;background:radial-gradient(circle,rgba(169,220,255,.07),rgba(164,147,255,.03) 40%,transparent 70%);mix-blend-mode:screen;transform:translate3d(-999px,-999px,0)}

/* header */
.top{position:fixed;inset:0 0 auto;z-index:50;height:84px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 var(--pad);transition:background .5s,backdrop-filter .5s,border-color .5s;border-bottom:1px solid transparent}
.top.solid{background:rgba(4,5,9,.62);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border-color:var(--line)}
.brand{display:flex;align-items:center;gap:14px}
.monogram{font-family:var(--serif);font-style:italic;font-size:40px;line-height:1;color:var(--warm);letter-spacing:-.04em}
.brand-word{font-size:11px;font-weight:500;letter-spacing:.24em;line-height:1.5}
.brand-word small{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--ice-faint);font-weight:400}
.top nav{display:flex;gap:34px;font-size:13px;letter-spacing:.04em;color:var(--ice-dim)}
.top nav a{position:relative;padding:6px 0}
.top nav a:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--warm);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.1,1)}
.top nav a:hover{color:var(--ice)}.top nav a:hover:after{transform:scaleX(1)}
.header-actions{display:flex;align-items:center;gap:18px}
.language-switch{display:flex;font-family:var(--mono);font-size:11px;border:1px solid var(--line);border-radius:30px;padding:3px}
.language-switch a{padding:5px 10px;border-radius:20px;color:var(--ice-faint)}
.language-switch a[aria-current=true]{background:var(--ice);color:var(--void)}
.nav-action{display:inline-flex;gap:10px;align-items:center;font-size:13px;font-weight:500;padding:11px 18px;border-radius:40px;border:1px solid var(--line2);background:rgba(238,242,248,.04);transition:background .3s,border-color .3s}
.nav-action:hover{background:var(--warm);color:var(--void);border-color:var(--warm)}
.sound{display:flex;align-items:center;gap:8px;border:0;background:none;font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--ice-faint);padding:6px}
.sound-bars{display:flex;gap:2px;align-items:flex-end;height:12px}
.sound-bars i{width:2px;height:3px;background:currentColor;transition:height .3s}
.sound[aria-pressed=true]{color:var(--warm)}
.sound[aria-pressed=true] .sound-bars i{animation:bar .9s ease-in-out infinite}
.sound[aria-pressed=true] .sound-bars i:nth-child(2){animation-delay:-.3s}.sound[aria-pressed=true] .sound-bars i:nth-child(3){animation-delay:-.6s}
@keyframes bar{50%{height:12px}}

/* shared */
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.24em;color:var(--warm);margin:0 0 28px;display:flex;align-items:center;gap:14px}
.eyebrow:before{content:"";width:28px;height:1px;background:currentColor;opacity:.7}
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:34px;padding:17px 24px;border-radius:50px;font-size:15px;font-weight:500;letter-spacing:.01em;border:1px solid var(--line2);background:rgba(238,242,248,.05);transition:transform .4s cubic-bezier(.2,.7,.1,1),background .3s,box-shadow .4s}
.glow-btn{background:var(--ice);color:var(--void);border-color:var(--ice);box-shadow:0 0 0 0 rgba(237,181,141,0)}
.glow-btn:hover{background:var(--warm);border-color:var(--warm);transform:translateY(-2px);box-shadow:0 10px 60px -10px rgba(237,181,141,.6)}
.text-button{border:0;background:none;padding:0 0 4px;font-size:14px;font-weight:500;border-bottom:1px solid var(--warm);color:var(--ice);display:inline-flex;gap:10px}
.text-button:hover{color:var(--warm)}
.quiet-link{font-size:14px;color:var(--ice-dim);border-bottom:1px solid var(--line2);padding-bottom:3px}
.lit{background:linear-gradient(100deg,var(--ice) 0%,var(--ice) var(--lit,0%),rgba(238,242,248,.2) calc(var(--lit,0%) + 12%));-webkit-background-clip:text;background-clip:text;color:transparent}

/* I. threshold */
.threshold{position:relative;height:420vh;background:var(--void)}
.threshold-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.face-src{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.noise-canvas{position:absolute;inset:0;width:100%;height:100%}
.scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px);mix-blend-mode:overlay}
.hud{position:absolute;left:var(--pad);right:var(--pad);bottom:34px;display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--ice-faint);z-index:3}
.hud b{font-weight:400;color:var(--ice)}
.th-line{position:absolute;left:var(--pad);right:var(--pad);bottom:16vh;z-index:3;opacity:0;pointer-events:none}
.th-line.on{pointer-events:auto}
.th-kicker{font-family:var(--mono);font-size:11px;letter-spacing:.28em;color:var(--ice-faint);margin-bottom:26px}
.th-big{font-size:clamp(38px,5.6vw,92px);font-weight:200;line-height:1.02;letter-spacing:-.045em;margin:0;text-shadow:0 2px 40px rgba(0,0,0,.6)}
.th-huge{font-size:clamp(56px,10vw,168px);font-weight:200;line-height:.92;letter-spacing:-.06em;margin:0;text-shadow:0 2px 60px rgba(0,0,0,.7)}
.th-4{bottom:11vh;max-width:980px}
.th-4 h1{font-size:clamp(44px,6.6vw,108px);font-weight:200;line-height:.98;letter-spacing:-.055em;margin-bottom:30px;text-shadow:0 2px 50px rgba(0,0,0,.65)}
.h1-l{display:block}
.intro{font-size:clamp(16px,1.35vw,20px);color:var(--ice-dim);max-width:520px;margin-bottom:34px;text-shadow:0 1px 20px rgba(0,0,0,.8)}
.hero-actions{display:flex;align-items:center;gap:30px;flex-wrap:wrap}
.scroll-cue{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:10px;font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:var(--ice-faint);margin:0}
.scroll-cue i{width:1px;height:46px;background:linear-gradient(var(--ice),transparent);animation:cue 2.2s ease-in-out infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* II. inscribe */
.inscribe{position:relative;height:460vh;background:var(--void)}
.inscribe-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.etch-canvas,.etch-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.etch-poster{opacity:0}
.no-seq .etch-poster{opacity:1}
.monolith{position:absolute;inset:0;opacity:0;transform:scale(1.25);will-change:transform,opacity}
.monolith img{width:100%;height:100%;object-fit:cover}
.monolith:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,transparent 28%,rgba(4,5,9,.85) 90%),linear-gradient(transparent 55%,rgba(4,5,9,.9))}
.monolith img{object-position:50% 30%}
.ps-words{position:absolute;inset:0;z-index:3;pointer-events:none}
.ps{position:absolute;left:var(--pad);bottom:18vh;max-width:900px;font-size:clamp(36px,5vw,84px);font-weight:200;letter-spacing:-.045em;line-height:1.02;margin:0;opacity:0;text-shadow:0 2px 40px rgba(0,0,0,.8)}
.ps-key{left:auto;right:var(--pad);bottom:9vh;text-align:right;font-size:clamp(30px,3.6vw,60px)}
.ps-counter{position:absolute;right:var(--pad);top:120px;z-index:3;display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--ice-faint)}
.pc-line{width:120px;height:1px;background:var(--line2);position:relative;overflow:hidden}
.pc-line b{position:absolute;inset:0;background:linear-gradient(90deg,var(--violet),var(--warm));transform:scaleX(0);transform-origin:left}

/* III. purpose */
.purpose{position:relative;padding:22vh var(--pad) 18vh;background:linear-gradient(var(--void),var(--deep));overflow:hidden}
.purpose-inner{max-width:1400px;margin:0 auto}
.purpose-title{font-size:clamp(64px,12vw,210px);font-weight:150;letter-spacing:-.07em;line-height:.85;margin:0 0 9vh;color:transparent;-webkit-text-stroke:1px rgba(238,242,248,.22)}
.purpose-title span{display:block}.purpose-title span+span{padding-left:12vw}
.purpose-statement{font-size:clamp(28px,3.4vw,54px);font-weight:250;letter-spacing:-.035em;line-height:1.18;max-width:1150px;margin:0 0 12vh}
.purpose-body{display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:end;border-top:1px solid var(--line);padding-top:6vh}
.purpose-body h2{font-size:clamp(34px,3.6vw,58px)}
.purpose-body p{color:var(--ice-dim);font-size:18px;max-width:560px;margin:0}

/* IV. four slabs */
.four{position:relative;height:300vh;background:var(--deep)}
.four-pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;padding:100px var(--pad) 60px;overflow:hidden;perspective:1400px}
.slabs{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,2vw,30px);transform-style:preserve-3d}
.slab{position:relative;min-height:min(58vh,520px);padding:28px 26px;border-radius:4px;border:1px solid var(--line);background:linear-gradient(160deg,rgba(220,235,255,.08),rgba(220,235,255,.015) 55%,rgba(164,147,255,.05));backdrop-filter:blur(6px);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;opacity:.18;transform:translateY(60px) rotateY(-24deg);transform-origin:left center;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 1px 0 0 rgba(255,255,255,.06)}
.slab:before{content:"";position:absolute;inset:-40% -60%;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.14) 50%,transparent 58%);transform:translateX(var(--sweep,-60%));pointer-events:none}
.slab-dots{position:absolute;inset:0;width:100%;height:100%}
.format-index{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--warm);position:relative}
.slab h2{font-size:clamp(28px,2.6vw,42px);margin:10px 0 14px;position:relative}
.slab p{font-size:15px;color:var(--ice-dim);margin:0;position:relative}

/* V. rooms */
.rooms{background:var(--deep)}
.rooms-head{padding:16vh var(--pad) 8vh}
.rooms-head h2{font-size:clamp(42px,5.4vw,92px)}
.room{position:relative;height:240vh}
.room-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.room-media{position:absolute;inset:0;overflow:hidden}
.room-media img,.room-media video{width:100%;height:100%;object-fit:cover}
.room-copy{position:absolute;z-index:3;max-width:470px}
.room-copy p{color:var(--ice-dim);font-size:16px}
.story-number{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--warm);margin-bottom:22px}
.room-quote{font-size:clamp(34px,3.8vw,62px)!important;font-weight:200;color:var(--ice)!important;letter-spacing:-.045em;line-height:1.02;margin-bottom:26px!important}
.room h3{font-size:24px;font-weight:400;letter-spacing:-.02em;margin-bottom:12px}
/* son: pixels resolve into a person */
.room-son .room-media{clip-path:inset(var(--ci,30%) var(--ci,30%) round 3px)}
.room-son .room-media img{transform:scale(var(--zs,1.25))}
.room-son .room-dark{position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,rgba(4,5,9,.92) 0%,rgba(4,5,9,.55) 35%,transparent 60%)}
.room-son canvas.pix{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.room-son .room-copy{left:var(--pad);bottom:13vh}
/* daughter: a slab of light opens */
.room-daughter .room-pin{display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;gap:5vw;padding:0 var(--pad)}
.room-daughter .room-copy{position:relative}
.room-daughter .room-media{position:relative;inset:auto;height:72vh;border-radius:3px;clip-path:inset(0 var(--cd,48%) 0 var(--cd,48%));box-shadow:0 40px 120px -40px rgba(237,181,141,.25)}
.room-daughter .room-media img{transform:scale(var(--zd,1.15))}
.light-ray{position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,236,210,.18) 45%,transparent 60%);mix-blend-mode:screen;transform:translateX(var(--ray,-40%))}
/* memory: the film */
.room-memory .room-pin{display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:5vw;padding:0 var(--pad)}
.room-memory .room-copy{position:relative}
.super8{position:relative;margin:0;padding:22px 46px;background:#0b0a09;border-radius:6px;box-shadow:0 0 0 1px var(--line),0 50px 140px -30px rgba(237,181,141,.28);transform:rotate(var(--rm,-4deg)) scale(var(--sm,.86))}
.super8 video{width:100%;aspect-ratio:16/9;object-fit:cover;filter:sepia(.18) contrast(1.05) saturate(1.05);animation:flick .18s steps(2) infinite}
@keyframes flick{50%{opacity:.94}}
.sprockets{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle,#1b1a18 0 30%,transparent 32%) left 14px top 10px/14px 30px repeat-y,radial-gradient(circle,#1b1a18 0 30%,transparent 32%) right 14px top 10px/14px 30px repeat-y}
.sprockets:before,.sprockets:after{content:"";position:absolute;top:0;bottom:0;width:10px;left:14px;background:repeating-linear-gradient(#000 0 10px,transparent 10px 28px);opacity:.0}
.s8-label{position:absolute;left:48px;bottom:3px;font-family:var(--mono);font-size:9px;letter-spacing:.3em;color:#a6774f}
.reel{position:absolute;left:3vw;top:10vh;display:flex;gap:30px;opacity:.12;pointer-events:none}
.reel i{width:22vw;height:22vw;max-width:300px;max-height:300px;border-radius:50%;border:1px dashed var(--ice);animation:spin 18s linear infinite}
.reel i+i{animation-duration:26s;animation-direction:reverse}
@keyframes spin{to{transform:rotate(360deg)}}

/* VI. journey */
.journey{display:grid;grid-template-columns:.85fr 1.15fr;gap:7vw;padding:18vh var(--pad);background:linear-gradient(var(--deep),var(--void));align-items:start}
.journey-heading{position:sticky;top:120px}
.journey h2{font-size:clamp(44px,5.4vw,90px);margin-bottom:28px}
.journey-heading>p{color:var(--ice-dim);font-size:18px}
.story-choices{display:flex;flex-wrap:wrap;gap:8px;margin:34px 0 44px}
.story-choice{border:1px solid var(--line2);background:transparent;border-radius:40px;padding:10px 16px;font-size:13px;color:var(--ice-dim);transition:.3s}
.story-choice.active,.story-choice:hover{background:var(--ice);color:var(--void);border-color:var(--ice)}
.timeline{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--ice-faint)}
.timeline b{display:block;font-family:var(--sans);font-weight:400;font-size:14px;letter-spacing:0;color:var(--ice);margin-top:6px}
.time-line{height:1px;background:var(--line2);position:relative}
.time-pulse{position:absolute;top:-3px;left:0;width:7px;height:7px;border-radius:50%;background:var(--warm);box-shadow:0 0 18px 4px rgba(237,181,141,.6);animation:pulse 4.5s cubic-bezier(.6,0,.4,1) infinite}
@keyframes pulse{0%{left:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:calc(100% - 7px);opacity:0}}
.message-card{position:relative;border:1px solid var(--line);border-radius:6px;padding:34px;background:linear-gradient(165deg,rgba(220,235,255,.07),rgba(220,235,255,.015) 60%);backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 60px 140px -60px rgba(164,147,255,.3);overflow:hidden;scroll-margin-top:110px}
.message-scene{margin:-34px -34px 30px;width:calc(100% + 68px);max-width:none;height:330px;object-fit:cover;filter:saturate(.85) brightness(.8);transition:filter 1.2s}
.message-card.opened .message-scene{filter:none}
.message-meta,.message-foot{display:flex;justify-content:space-between;gap:16px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--ice-faint)}
.message-foot{border-top:1px solid var(--line);padding-top:18px;margin-top:30px}
.message-to{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--warm);margin:22px 0 10px;text-transform:uppercase}
.message-card h3{font-size:clamp(30px,2.8vw,46px);margin-bottom:26px}
.sealed-state p{color:var(--ice-dim);font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.4}
.seal-button{display:inline-flex;align-items:center;gap:16px;border:1px solid var(--line2);background:rgba(238,242,248,.03);border-radius:60px;padding:8px 22px 8px 8px;font-size:14px;transition:.35s}
.seal-button:hover{border-color:var(--warm);background:rgba(237,181,141,.08)}
.chip{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(from 0deg,rgba(169,220,255,.5),rgba(164,147,255,.5),rgba(237,181,141,.6),rgba(169,220,255,.5));animation:spin 8s linear infinite}
.chip i{width:40px;height:40px;border-radius:50%;background:var(--deep2);box-shadow:inset 0 0 14px rgba(237,181,141,.5)}
.message-content{font-family:var(--serif);font-size:21px;line-height:1.7;color:var(--ice)}
.message-content #message-text{white-space:pre-wrap}
.story-medium{border-left:1px solid var(--warm);padding:4px 0 4px 20px;margin-bottom:28px;font-family:var(--sans)}
.medium-label{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--warm);margin-bottom:8px}
.story-medium h4{font-size:24px;font-weight:300;margin-bottom:8px}
.medium-description{font-size:15px;color:var(--ice-dim);line-height:1.6;margin:0}
.signature{font-style:italic;color:var(--warm)}
.recipient-note{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--ice-faint);margin-top:24px;text-align:right}

/* VII. currency */
.currency{position:relative;height:260vh;background:var(--void)}
.currency-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:center}
.constellation{position:absolute;inset:0;width:100%;height:100%}
.currency-copy{position:relative;z-index:2;padding:0 var(--pad);max-width:1200px}
.manifesto-text{font-size:clamp(46px,6.6vw,118px);font-weight:200;letter-spacing:-.055em;line-height:.98;margin-bottom:6vh}
.currency-rule{font-size:clamp(20px,1.9vw,30px);font-weight:300;line-height:1.45;max-width:880px;letter-spacing:-.015em}

/* VIII. continuity: three circles */
.continuity{position:relative;height:440vh;background:var(--void)}
.cont-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.cont-stages{position:absolute;inset:0}
.cont-img{position:absolute;inset:0;margin:0;opacity:0;will-change:opacity,transform}
.cont-img img{width:100%;height:100%;object-fit:cover;object-position:68% 50%}
.cont-veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,5,9,.94) 0%,rgba(4,5,9,.78) 34%,rgba(4,5,9,.15) 68%,rgba(4,5,9,.35) 100%),linear-gradient(transparent 60%,rgba(4,5,9,.8))}
.cont-head{position:absolute;left:var(--pad);top:15vh;z-index:3;max-width:620px;transform-origin:left top;will-change:transform}
.cont-head h2{font-size:clamp(46px,5.6vw,96px);margin-bottom:22px}
.continuity-lead{font-size:clamp(18px,1.5vw,23px);color:var(--ice-dim)}
.rings{position:absolute;z-index:3;right:var(--pad);bottom:9vh;width:min(26vw,320px);transform-origin:right bottom;overflow:visible;will-change:transform}
.ring{fill:none;stroke:rgba(238,242,248,.16);stroke-width:1;transition:stroke .8s,stroke-width .8s,filter .8s}
.ring.on{stroke:var(--warm);stroke-width:1.4;filter:drop-shadow(0 0 6px rgba(237,181,141,.7))}
.ring.done{stroke:rgba(237,181,141,.45)}
.wave{fill:none;stroke:var(--cyan);stroke-width:1;opacity:0}
.core{fill:var(--warm);filter:drop-shadow(0 0 8px rgba(237,181,141,.9))}
.rl{font-family:var(--mono);font-size:9px;letter-spacing:.2em;fill:var(--ice-faint);text-anchor:middle;transition:fill .6s}
.rl.on{fill:var(--warm)}
.rl0{fill:var(--ice)}
.cont-copy{list-style:none;margin:0;padding:0;position:absolute;left:var(--pad);bottom:12vh;z-index:3;width:min(560px,calc(100% - 2*var(--pad)))}
.cont-copy li{position:absolute;left:0;bottom:0;opacity:0;width:100%}
.cont-copy span{font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--warm)}
.cont-copy h3{font-size:clamp(30px,3vw,50px);font-weight:250;margin:14px 0 16px}
.cont-copy p{color:var(--ice-dim);font-size:17px;margin:0}
.cont-final{position:absolute;z-index:3;left:var(--pad);bottom:12vh;font-size:clamp(34px,4vw,68px);font-weight:200;letter-spacing:-.045em;line-height:1.02;margin:0;opacity:0}
/* IX. how */
.how{padding:18vh var(--pad);background:var(--deep)}
.how h2{font-size:clamp(42px,5.2vw,88px);margin-bottom:12vh}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:3vw;position:relative}
.fuse{position:absolute;left:0;right:0;top:-34px;height:1px;background:var(--line2)}
.fuse b{position:absolute;inset:0;background:linear-gradient(90deg,var(--violet),var(--cyan),var(--warm));transform:scaleX(var(--fuse,0));transform-origin:left;box-shadow:0 0 14px rgba(169,220,255,.6)}
.steps li{opacity:.25;transition:opacity .8s}
.steps li.on{opacity:1}
.steps span{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--warm)}
.steps h3{font-size:clamp(24px,2vw,32px);margin:14px 0}
.steps p{font-size:15px;color:var(--ice-dim)}

/* X. trust */
.trust{padding:18vh var(--pad);background:var(--void);display:grid;grid-template-columns:1fr 1fr;gap:7vw}
.trust h2{font-size:clamp(40px,4.4vw,74px);margin-bottom:34px}
.trust-heading>p{color:var(--ice-dim)}
.trust-meaning{font-family:var(--serif);font-style:italic;color:var(--ice)!important;font-size:24px;line-height:1.45;margin-top:34px}
.pillars{display:grid;gap:0;border-top:1px solid var(--line)}
.trust-pillar{display:grid;grid-template-columns:150px 1fr;gap:6px 24px;padding:24px 0;border-bottom:1px solid var(--line)}
.trust-pillar span{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--warm);grid-row:span 2;padding-top:6px}
.trust-pillar h3{font-size:24px;font-weight:350}
.trust-pillar p{font-size:15px;color:var(--ice-dim);margin:0}
.fingerprint-demo{margin-top:44px;padding:30px;border:1px solid var(--line);border-radius:6px;background:linear-gradient(160deg,rgba(220,235,255,.05),transparent)}
.fp-title{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--ice-faint)}
#integrity-message{font-family:var(--serif);font-style:italic;font-size:26px;line-height:1.3;margin:6px 0 20px}
.fp-crystal{width:100%;height:120px;margin-bottom:20px}
.hash-label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--ice-faint);margin:22px 0 8px}
#integrity-hash{display:block;font-family:var(--mono);font-size:12px;line-height:1.7;word-break:break-all;color:var(--cyan)}
#integrity-status{font-size:14px;color:var(--warm);margin:12px 0 0}
.fp-note{font-size:13px;color:var(--ice-faint);margin:16px 0 0}

/* XI. plans */
.plans{padding:18vh var(--pad);background:var(--deep)}
.plans-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:8vh}
.plans h2{font-size:clamp(42px,5vw,86px)}
.plans-heading>p{color:var(--ice-dim);max-width:340px;margin:0}
.plan-table{overflow-x:auto;border:1px solid var(--line);border-radius:6px}
.plan-table table{width:100%;border-collapse:collapse;min-width:720px}
.plan-table th,.plan-table td{padding:18px 22px;text-align:left;border-bottom:1px solid var(--line);font-size:15px;font-weight:300}
.plan-table thead th{font-size:26px;font-weight:250;letter-spacing:-.03em;vertical-align:bottom}
.plan-table thead th:first-child{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--ice-faint)}
.plan-table thead small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--ice-faint);margin-top:8px}
.plan-table tbody th{color:var(--ice-faint);font-size:13px}
.plan-table .featured{background:linear-gradient(rgba(237,181,141,.07),rgba(237,181,141,.03))}
.plan-table thead .featured{color:var(--warm);box-shadow:inset 0 2px 0 var(--warm)}
.price-row td{font-size:44px!important;font-weight:200!important;letter-spacing:-.04em}
.plan-actions td,.plan-actions th{border-bottom:0}
.plan-select{border:1px solid var(--line2);background:transparent;border-radius:40px;padding:11px 18px;font-size:13px;transition:.3s}
.plan-select:hover,.featured .plan-select{background:var(--ice);color:var(--void);border-color:var(--ice)}
.featured .plan-select:hover{background:var(--warm);border-color:var(--warm)}
.capacity-note{font-size:12px;color:var(--ice-faint);margin:18px 0 10vh;max-width:900px}
.plan-extras{display:grid;grid-template-columns:1fr 1fr;gap:5vw}
.plan-extras article{border-top:1px solid var(--line);padding-top:40px}
.plan-extras h3{font-size:clamp(28px,2.6vw,42px);margin-bottom:20px}
.plan-extras p:not(.eyebrow){color:var(--ice-dim)}

/* XII. closing */
.closing{position:relative;min-height:110vh;display:flex;align-items:center;overflow:hidden;background:var(--void)}
.closing-media{position:absolute;inset:0}
.closing-media img{width:100%;height:100%;object-fit:cover;object-position:70% 50%;transform:scale(var(--zc,1.15))}
.closing-media:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--void) 8%,rgba(4,5,9,.6) 42%,transparent 70%),linear-gradient(transparent 70%,var(--void))}
.closing-copy{position:relative;z-index:2;padding:0 var(--pad);max-width:900px}
.closing h2{font-size:clamp(44px,5.6vw,96px);margin-bottom:46px}

/* XIII. compose (live form, restyled) */
.compose{display:grid;grid-template-columns:.7fr 1.3fr;gap:7%;padding:16vh var(--pad);background:var(--void);border-top:1px solid var(--line)}
.compose-heading{position:sticky;top:120px;align-self:start}
.compose h2{font-size:clamp(44px,5vw,84px);margin-bottom:24px}
.compose-heading>p:not(.eyebrow){color:var(--ice-dim);max-width:380px}
.compose-progress{list-style:none;padding:20px 0;margin:0;display:flex;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--ice-faint)}
.compose-progress .current{color:var(--warm);border-bottom:1px solid var(--warm)}
#message-form{max-width:720px;width:100%}
#message-form label{display:block;font-size:14px;color:var(--ice-dim);margin-bottom:22px}
input,textarea,select{display:block;width:100%;border:1px solid var(--line2);border-radius:4px;background:rgba(238,242,248,.035);color:var(--ice);padding:13px 15px;margin-top:8px;font:inherit;font-size:16px;font-weight:300;min-width:0}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--warm);background:rgba(237,181,141,.05)}
select option{background:var(--deep)}
input::-webkit-calendar-picker-indicator{filter:invert(1)}
textarea{resize:vertical;line-height:1.75}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field-help{display:block;font-size:13px;line-height:1.6;color:var(--ice-faint);margin:9px 0 20px}
.draft-bottom{display:flex;justify-content:space-between;gap:20px;font-size:12px;color:var(--ice-faint);margin:-12px 0 24px;font-family:var(--mono)}
.form-error{color:#ff9a8a;font-size:15px}.form-error:empty{display:none}
.media-composer{min-width:0;margin:0 0 40px;padding:26px;border:1px solid var(--line);border-radius:6px;background:linear-gradient(160deg,rgba(220,235,255,.05),transparent)}
.media-composer legend{font-size:24px;font-weight:300;letter-spacing:-.03em;padding:0 10px;margin-left:-10px}
.media-intro{font-size:15px;color:var(--ice-dim);margin:0 0 22px}
.media-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.media-action{display:flex;gap:12px;align-items:center;text-align:left;padding:16px 14px;border:1px solid var(--line);border-radius:4px;background:rgba(238,242,248,.025);min-width:0;transition:.3s}
.media-action:hover{border-color:var(--warm);background:rgba(237,181,141,.06)}
.media-action svg{width:24px;height:24px;flex-shrink:0;stroke:currentColor;stroke-width:1.4;fill:none;stroke-linecap:round;stroke-linejoin:round;color:var(--warm)}
.media-action strong{display:block;font-size:14px;font-weight:500}
.media-action small{display:block;font-size:12px;color:var(--ice-faint);margin-top:4px}
.record-action{grid-column:1/-1;background:var(--ice);color:var(--void);border-color:var(--ice);padding:20px}
.record-action:hover{background:var(--warm);border-color:var(--warm)}
.record-action svg{width:30px;height:30px;color:var(--void)}
.record-action strong{font-size:18px}.record-action small{color:rgba(4,5,9,.65);font-size:14px}
.record-action>span:last-child{margin-left:auto;font-size:22px}
.media-dropzone{margin-bottom:20px;border:1px dashed var(--line2);padding:18px;border-radius:4px;text-align:center;font-size:14px;color:var(--ice-faint)}
.media-dropzone.dragging{background:rgba(237,181,141,.08);border-color:var(--warm)}
.media-dropzone .field-help{font-size:12px;margin:8px 0 0}
#media-status:empty,#media-error:empty{display:none}
.attachment-list{list-style:none;padding:0;margin:0 0 25px;display:grid;gap:12px}.attachment-list:empty{display:none}
.attachment{display:grid;grid-template-columns:120px minmax(0,1fr) 30px;gap:14px;padding:12px;background:rgba(238,242,248,.04);border:1px solid var(--line);border-radius:4px;align-items:center;min-width:0}
.attachment-preview{border-radius:3px;overflow:hidden;min-width:0;background:rgba(238,242,248,.06);min-height:90px;display:flex;align-items:center;justify-content:center;font-size:13px;text-align:center;color:var(--ice-faint)}
.attachment-preview img{width:100%;height:100px;object-fit:contain}
.attachment-preview p{font-size:13px;margin:15px}
.attachment-info{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.attachment-info strong{font-size:14px;font-weight:500;overflow-wrap:anywhere}
.attachment-info span{font-size:12px;color:var(--ice-faint)}
.attachment-info a{font-size:13px;text-decoration:underline;color:var(--warm)}
.remove-attachment{border:0;background:var(--ice);color:var(--void);width:30px;height:30px;border-radius:50%;font-size:20px;line-height:1}
.attachment[data-kind=video],.attachment[data-kind=audio]{grid-template-columns:minmax(0,1fr) 30px}
.attachment[data-kind=video] .attachment-preview,.attachment[data-kind=audio] .attachment-preview{grid-column:1/-1}
.attachment video{width:100%;max-height:280px;background:#000}.attachment audio{width:100%}
.local-media-note{margin-bottom:0}
.recipient-heading{font-size:26px;font-weight:300;margin:0 0 24px}
dialog{border:1px solid var(--line2);background:var(--deep2);color:var(--ice);padding:50px;width:min(760px,92vw);max-height:90vh;border-radius:8px;box-shadow:0 40px 140px rgba(0,0,0,.7)}
dialog::backdrop{background:rgba(4,5,9,.75);backdrop-filter:blur(8px)}
dialog h2{font-size:44px;margin-bottom:24px}
.dialog-close{position:absolute;top:12px;right:18px;font-size:30px;border:0;background:none}
.review-meta{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0;display:grid;gap:12px;margin:0}
.review-meta div{display:grid;grid-template-columns:85px 1fr;gap:15px;font-size:14px;overflow-wrap:anywhere}
.review-meta dt{color:var(--ice-faint)}.review-meta dd{margin:0}
#review-message{white-space:pre-wrap;overflow-wrap:anywhere;margin:30px 0;font-family:var(--serif);font-size:21px;line-height:1.7}
.checkout-status{background:rgba(238,242,248,.05);border:1px solid var(--line);padding:20px;margin:20px 0 15px;border-radius:4px}
.checkout-status p{font-size:14px;color:var(--ice-dim);margin-bottom:16px}
.button:disabled{opacity:.45;cursor:not-allowed}
.capture-help{color:var(--ice-dim)}
#camera-preview{width:100%;max-height:360px;background:#000;border-radius:4px;transform:scaleX(-1)}
#capture-status{font-size:15px;margin:18px 0}
.capture-buttons{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:20px}
.stop-recording{background:#c0444f!important;border-color:#c0444f!important;color:#fff!important}
#capture-timer{font-family:var(--mono);font-size:22px;color:#ff8a7a}

/* footer */
footer{border-top:1px solid var(--line);padding:40px var(--pad);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font-size:13px;color:var(--ice-dim);background:var(--void)}
.foot-mark{font-family:var(--serif);font-style:italic;font-size:30px;color:var(--warm)}
footer span:nth-child(3){font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--warm)}
.credits{text-align:center;padding:0 var(--pad) 34px;font-size:12px;line-height:1.8;color:var(--ice-faint);background:var(--void)}

/* responsive */
@media (max-width:1000px){
 .top nav{display:none}
 .slabs{grid-template-columns:1fr 1fr}
 .slab{min-height:34vh}
 .purpose-body,.journey,.trust,.compose,.plan-extras{grid-template-columns:1fr}
 .rings{bottom:auto;top:96px;transform:none!important;width:min(46vw,260px)}
 .cont-head{top:auto;bottom:52vh}
 .cont-veil{background:linear-gradient(0deg,rgba(4,5,9,.96) 0%,rgba(4,5,9,.8) 45%,rgba(4,5,9,.25) 75%,rgba(4,5,9,.5) 100%)}
 .cont-img img{object-position:62% 50%}
 .journey-heading,.compose-heading{position:static}
 .steps{grid-template-columns:1fr 1fr;row-gap:6vh}
 .room-daughter .room-pin,.room-memory .room-pin{grid-template-columns:1fr;align-content:center;gap:5vh}
 .room-daughter .room-media{height:44vh;order:-1}
 .room-memory .room-copy{order:2}
}
@media (max-width:680px){
 body{font-size:16px}
 .top{height:70px}
 .brand-word{display:none}
 .nav-action{display:none}
 .sound-label{display:none}
 .th-line{bottom:13vh}
 .hud{bottom:20px;font-size:9px}
 .scroll-cue{display:none}
 .ps{bottom:14vh;font-size:clamp(32px,9vw,48px)}
 .ps-counter{top:90px}
 .slabs{gap:10px}.slab{padding:18px 16px;min-height:30vh}.slab h2{font-size:24px}.slab p{font-size:13px}.slab p br{display:none}
 .room-son .room-copy{bottom:8vh;right:var(--pad)}
 .room-son .room-dark{background:linear-gradient(0deg,rgba(4,5,9,.95) 10%,rgba(4,5,9,.5) 55%,transparent 80%)}
 .room-son .room-media img{object-position:70% 50%}
 .super8{padding:12px 28px}
 .room-copy .room-quote{font-size:34px!important}
 .message-card{padding:22px}.message-scene{margin:-22px -22px 22px;width:calc(100% + 44px);height:220px}
 .steps{grid-template-columns:1fr}
 .trust-pillar{grid-template-columns:1fr}
 .trust-pillar span{grid-row:auto}
 .plans-heading{flex-direction:column;align-items:flex-start}
 .media-actions{grid-template-columns:1fr 1fr}.media-action small{display:none}.record-action small{display:block}
 .form-row{grid-template-columns:1fr}
 dialog{padding:38px 22px}dialog h2{font-size:34px}
 .closing-media img{object-position:78% 50%}
 .closing-media:after{background:linear-gradient(0deg,var(--void) 18%,rgba(4,5,9,.55) 55%,transparent 80%)}
 .closing{align-items:flex-end;padding-bottom:12vh}
 h2 br{display:none}
}
@media (prefers-reduced-motion:reduce){
 .threshold,.inscribe,.four,.room,.currency,.continuity{height:auto}
 .threshold-pin,.inscribe-pin,.four-pin,.room-pin,.currency-pin,.cont-pin{position:relative;min-height:100vh}
 .th-line,.ps{opacity:1!important;position:relative;left:auto;bottom:auto;padding:0 var(--pad) 30px}
 .th-1,.th-2,.th-3{display:none}
 .th-4{position:absolute;bottom:10vh}
 .ps-words{position:relative;padding-top:60vh}
 .etch-poster{opacity:1}
 .slab{opacity:1;transform:none}
 .room-son .room-media,.room-daughter .room-media{clip-path:none}
 .steps li{opacity:1}
 .grain,.time-pulse,.chip,.reel i,.super8 video{animation:none}
 .lit{color:var(--ice);background:none}
}

/* MVP sealing flow (seal.js, ?beta=1) on the dark world */
:root{--wine:var(--warm);--ink:var(--ice)}
.seal-block,.sealed-done{background:linear-gradient(160deg,rgba(220,235,255,.06),rgba(220,235,255,.015))!important;border:1px solid var(--line2)!important;border-radius:6px;color:var(--ice)}
.sealed-done h3{font-size:28px;font-weight:300}
.fingerprint{color:var(--cyan)!important;font-family:var(--mono)!important}
#sender-email{margin-bottom:4px}
#seal-button{background:var(--ice);color:var(--void);border-color:var(--ice)}#seal-button:hover{background:var(--warm);border-color:var(--warm)}

/* consent */
.consent{position:fixed;right:var(--pad);bottom:64px;z-index:80;max-width:440px;padding:20px 22px;border:1px solid var(--line2);border-radius:8px;background:rgba(9,11,17,.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 30px 80px rgba(0,0,0,.5);opacity:0;transform:translateY(20px);pointer-events:none;transition:opacity .6s,transform .6s}
.consent.show{opacity:1;transform:none;pointer-events:auto}
.consent-t{font-size:14px;line-height:1.55;color:var(--ice-dim);margin:0 0 14px}
.consent-b{display:flex;gap:10px;justify-content:flex-end}
.consent button{border:1px solid var(--line2);background:transparent;border-radius:40px;padding:9px 16px;font-size:13px}
.consent .consent-yes{background:var(--ice);color:var(--void);border-color:var(--ice)}
.consent .consent-yes:hover{background:var(--warm);border-color:var(--warm)}
.foot-link{color:var(--ice-faint);text-decoration:underline;text-underline-offset:3px}
@media (max-width:680px){.consent{left:12px;right:12px;bottom:12px;max-width:none}}