:root{
  --ink:#0c0a09;--ink2:#141110;--ink3:#1c1816;--line:#2a2421;--paper:#f2ebe0;--soft:#c9bfb1;--muted:#8f8578;--dim:#5f574e;
  --candle:#f0b35d;--candle2:#ffd9a0;--ember:#c4562e;--her:#2a2523;--me:#0a84ff;--stamp:#c23b2a;
  --serif:'Instrument Serif',ui-serif,Georgia,serif;--sans:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --ios:-apple-system,BlinkMacSystemFont,'SF Pro Text',Inter,system-ui,sans-serif;
  --mx:50vw;--my:30vh;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--paper);font:400 17px/1.55 var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.serif{font-family:var(--serif);font-weight:400;letter-spacing:-.01em}
.big{font-size:clamp(44px,6.4vw,96px);line-height:.98;margin:0}
img,video,canvas{display:block;max-width:100%}

/* film grain and the candle that follows you */
.grain{position:fixed;inset:-50%;z-index:60;pointer-events:none;opacity:.075;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  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%)}100%{transform:translate(0,0)}}
.candle{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(520px 420px at var(--mx) var(--my),rgba(240,179,93,.09),transparent 70%);transition:background .2s}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:28px;padding:18px clamp(18px,4vw,48px);
  background:linear-gradient(var(--ink),rgba(12,10,9,0));transition:background .3s}
.nav.solid{background:rgba(12,10,9,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.mark{display:flex;align-items:center;gap:8px;text-decoration:none;font-family:var(--serif);font-size:28px;line-height:1}
.mark svg{width:22px;height:22px;color:var(--candle);filter:drop-shadow(0 0 8px rgba(240,179,93,.6));animation:flicker 3.2s infinite}
@keyframes flicker{0%,100%{opacity:1;transform:scale(1)}41%{opacity:.86;transform:scale(.97,1.03)}44%{opacity:1}70%{opacity:.92;transform:scale(1.02,.98)}}
.links{display:flex;gap:26px;margin-left:auto;font-size:14px;color:var(--soft)}
.links a{text-decoration:none}.links a:hover{color:var(--paper)}
.pill{display:inline-block;text-align:center;line-height:1.25;padding:15px 26px;border-radius:999px;background:var(--paper);color:var(--ink);
  font-weight:600;font-size:16px;text-decoration:none;box-shadow:0 0 0 0 rgba(240,179,93,.0);transition:transform .25s,box-shadow .35s,background .25s}
.pill:hover{transform:translateY(-1px);box-shadow:0 10px 40px -6px rgba(240,179,93,.45);background:#fff}
.pill.small{padding:10px 18px;font-size:14px}
.pill.wide{width:100%}
.ghost{padding:15px 6px;color:var(--soft);font-size:15px;text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--dim)}
.ghost:hover{color:var(--paper)}

/* 1. hero */
.hero{position:relative;z-index:1;min-height:100vh;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:clamp(24px,5vw,80px);
  padding:110px clamp(18px,5vw,72px) 60px;max-width:1440px;margin:0 auto}
.hero h1{font-size:clamp(64px,9.6vw,168px);line-height:.9;margin:0 0 30px;letter-spacing:-.025em}
.hero h1 .line{display:inline-block}
.who{display:inline-grid;font-style:italic;color:var(--candle2);text-shadow:0 0 50px rgba(240,179,93,.4);vertical-align:bottom;padding:0 .04em .08em}
.who span{grid-area:1/1;display:inline-block;transition:transform .9s cubic-bezier(.2,.8,.1,1),opacity .9s,filter .9s}
.who span.out{transform:translateY(-.6em);opacity:0;filter:blur(8px)}
.who span.in{transform:translateY(.6em);opacity:0;filter:blur(8px)}
.lead{font-size:clamp(17px,1.5vw,21px);color:var(--soft);max-width:34em;margin:0 0 34px}
.cta{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center}

.portrait{margin:0;justify-self:center;width:min(100%,430px)}
.frame{position:relative;aspect-ratio:9/16;max-height:78vh;border-radius:6px;overflow:hidden;background:#000;
  box-shadow:0 0 0 1px rgba(255,255,255,.06),0 40px 120px -20px rgba(0,0,0,.9),0 0 160px -40px rgba(240,179,93,.35);
  transform:perspective(1400px) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg));transition:transform .4s ease-out}
.face{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:grayscale(1) sepia(.35) contrast(.92) brightness(.8);
  transition:opacity 1.6s ease,filter 3.2s ease,transform 9s ease;transform:scale(1.06)}
.face.on{opacity:1;transform:scale(1)}
.face.alive{filter:none}
.vignette{position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 35%,transparent 55%,rgba(0,0,0,.65));pointer-events:none}
.notif{position:absolute;left:12px;right:12px;top:14px;display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:20px;
  background:rgba(40,36,34,.62);backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);
  font:13px/1.3 var(--ios);color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.35);transform:translateY(-140%);opacity:0;transition:transform .7s cubic-bezier(.2,.9,.2,1.1),opacity .5s}
.notif.show{transform:none;opacity:1}
.notif div{display:grid;flex:1;min-width:0}.notif b{font-weight:600}.notif span{opacity:.92;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notif time,.tnotif time{align-self:flex-start;font-size:12px;opacity:.6}
.app{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(160deg,#2b2320,#0e0b0a);color:var(--candle);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.app svg{width:18px;height:18px;filter:drop-shadow(0 0 5px rgba(240,179,93,.8))}
figcaption{margin-top:14px;text-align:center;font-size:12.5px;color:var(--muted);letter-spacing:.02em;transition:opacity .6s}

/* 2. wake */
.wake{position:relative;z-index:1;padding:120px clamp(18px,5vw,72px) 120px;max-width:1280px;margin:0 auto;text-align:center}
.wake .sub{color:var(--muted);margin:16px auto 56px;max-width:36em}
.wake-grid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start;text-align:left}

.phone{position:relative;width:380px;height:780px;border-radius:58px;background:#000;padding:14px;margin:0 auto;
  box-shadow:0 0 0 2px #2e2a27,0 0 0 9px #0f0d0c,0 0 0 10px #2a2522,0 60px 140px -30px rgba(0,0,0,.95),0 0 200px -60px rgba(240,179,93,.25);
  display:flex;flex-direction:column;overflow:hidden;font-family:var(--ios)}
.island{position:absolute;top:24px;left:50%;width:118px;height:34px;margin-left:-59px;border-radius:20px;background:#000;z-index:5}
.status{display:flex;justify-content:space-between;align-items:center;padding:14px 30px 0;height:50px;font-size:15px;font-weight:600}
.sig{display:flex;gap:2px;align-items:flex-end}.sig i{width:3px;background:#fff;border-radius:1px}.sig i:nth-child(1){height:4px}.sig i:nth-child(2){height:6px}.sig i:nth-child(3){height:8px}.sig i:nth-child(4){height:10px}
.thread-head{display:grid;justify-items:center;gap:4px;padding:6px 0 10px;border-bottom:1px solid #1d1d1f;position:relative}
.back{position:absolute;left:14px;top:14px;font-size:34px;line-height:1;color:var(--me);font-weight:300}
.avatar{width:52px;height:52px;border-radius:50%;background:linear-gradient(160deg,#6e6560,#3a3330);display:grid;place-items:center;overflow:hidden;font-size:22px;font-weight:600;color:#fff;transition:box-shadow .8s}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar.lit{box-shadow:0 0 0 2px var(--ink),0 0 0 3.5px var(--candle),0 0 24px rgba(240,179,93,.6)}
.who-name{display:grid;justify-items:center;font-size:12px}.who-name b{font-weight:500}.who-name small{color:#8e8e93;font-size:11px}
.thread{flex:1;overflow:hidden;position:relative;padding:12px 12px 8px;display:flex;flex-direction:column;transition:padding .9s cubic-bezier(.2,.9,.2,1)}
.phone.pay .thread{padding-bottom:318px}
.drop{display:flex;flex-direction:column;gap:12px;height:100%;transition:opacity .5s,transform .5s}
.drop.gone{opacity:0;transform:scale(.96);pointer-events:none;position:absolute;inset:12px}
.choose{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.choose button{padding:6px 12px;border-radius:999px;background:#1c1c1e;color:#d1d1d6;font-size:13px}
.choose button[aria-pressed=true]{background:var(--paper);color:#000}
.zone{flex:1;display:grid;place-content:center;justify-items:center;gap:8px;text-align:center;border:1.5px dashed #3a3a3c;border-radius:24px;padding:20px;cursor:pointer;
  color:#aeaeb2;font-size:13px;transition:border-color .3s,background .3s,transform .3s}
.zone svg{width:44px;height:44px;color:var(--candle);margin-bottom:6px}
.zone b{color:#fff;font-size:19px;font-weight:600;font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.05}
.zone input{position:absolute;width:1px;height:1px;opacity:0}
.zone.over,.zone:hover{border-color:var(--candle);background:rgba(240,179,93,.05)}
.zone.over{transform:scale(1.02)}
.sample{font-size:13px;color:#8e8e93;padding:6px}.sample u{color:#e5e5ea;text-underline-offset:3px}
.pick{display:grid;gap:10px;justify-items:center;padding-top:30px}
.pick[hidden]{display:none}
.pick-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.pick-row button{padding:9px 16px;border-radius:999px;background:#1c1c1e;font-size:14px;transition:background .3s,color .3s}
.pick-row button.on{background:var(--paper);color:#000}
.sys{margin:0;text-align:center;font-size:12px;color:#8e8e93}
.msgs{display:flex;flex-direction:column;gap:3px;margin-top:auto}
.msgs .day{align-self:center;font-size:11px;color:#8e8e93;margin:8px 0 6px}
.b{margin:0;max-width:78%;padding:8px 13px;border-radius:19px;font-size:16px;line-height:1.28;animation:pop .45s cubic-bezier(.2,.9,.3,1.25) both;word-wrap:break-word}
.b.her{align-self:flex-start;background:var(--her);border-bottom-left-radius:6px}
.b.me{align-self:flex-end;background:var(--me);border-bottom-right-radius:6px}
.b.note{display:flex;align-items:center;gap:10px;padding:10px 14px;filter:none;position:relative}
.b.note .pl{width:26px;height:26px;border-radius:50%;background:#fff;color:#000;display:grid;place-items:center;font-size:10px}
.b.note .bars{display:flex;align-items:center;gap:2px;height:22px}.b.note .bars i{width:2.5px;border-radius:2px;background:#8e8e93}
.b.note small{font-size:12px;color:#aeaeb2}
.b.note .lock{position:absolute;inset:0;border-radius:inherit;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);background:rgba(20,17,16,.35);display:grid;place-items:center;font-size:12px;color:#fff}
.typing{align-self:flex-start;display:flex;gap:4px;padding:12px 14px;border-radius:19px;background:var(--her);animation:pop .4s both}
.typing i{width:7px;height:7px;border-radius:50%;background:#8e8e93;animation:dot 1.3s infinite}
.typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
@keyframes dot{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-3px)}}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.92)}to{opacity:1;transform:none}}
.composer{display:flex;align-items:center;gap:8px;margin:6px 10px 14px;padding:8px 14px;border-radius:20px;border:1px solid #2c2c2e;color:#636366;font-size:15px}
.composer i{margin-left:auto;width:24px;height:24px;border-radius:50%;background:#2c2c2e}
.sheet{position:absolute;left:14px;right:14px;bottom:14px;border-radius:30px 30px 44px 44px;background:rgba(22,19,18,.96);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);
  padding:10px 24px 16px;text-align:center;transform:translateY(105%);transition:transform .9s cubic-bezier(.2,.9,.2,1);box-shadow:0 -20px 60px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06);z-index:4}
.sheet.up{transform:none}
.grab{width:38px;height:5px;border-radius:3px;background:#48484a;margin:0 auto 14px}
.sheet h3{font-size:36px;margin:0 0 4px;line-height:1.05}
.sheet p{font-size:14px;color:#aeaeb2;margin:0 0 14px;font-family:var(--sans)}
.price{display:flex;align-items:baseline;justify-content:center;gap:6px;margin-bottom:12px}.price b{font-size:34px;font-weight:600}.price span{color:#8e8e93;font-size:14px}
.fine{display:block;margin-top:10px;font-size:12px;color:#8e8e93}
.again{margin-top:6px;font-size:12px;color:#636366;text-decoration:underline}

.learn{padding-top:20px}
.steps{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:2px}
.steps li{display:grid;grid-template-columns:22px 1fr auto;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line);color:var(--dim);transition:color .5s}
.steps li i{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--dim);transition:all .5s;position:relative}
.steps li em{font-style:normal;font-size:13px;color:var(--muted);text-align:right}
.steps li.doing{color:var(--paper)}
.steps li.doing i{border-color:var(--candle);box-shadow:0 0 12px var(--candle);animation:breathe 1.2s infinite}
.steps li.done{color:var(--soft)}
.steps li.done i{background:var(--candle);border-color:var(--candle)}
.steps li.done i::after{content:'';position:absolute;left:3.5px;top:1px;width:3px;height:6px;border:solid var(--ink);border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}
@keyframes breathe{50%{box-shadow:0 0 2px var(--candle)}}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.card{position:relative;height:118px;padding:16px 18px;border-radius:18px;background:var(--ink2);border:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden;transition:border-color .6s}
.card.wide{grid-column:span 2;height:150px}
.card.face-card{height:300px}
.card small{font-size:12px;color:var(--muted);letter-spacing:.02em}
.card b{font-family:var(--serif);font-weight:400;font-size:34px;line-height:1.1;margin-top:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .5s}
.card>span:last-child{font-size:13px;color:var(--soft);min-height:1.3em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card.lit{border-color:rgba(240,179,93,.4)}
.card.lit::before{content:'';position:absolute;inset:0;background:radial-gradient(300px 120px at 0% 0%,rgba(240,179,93,.12),transparent 70%);pointer-events:none}
.card canvas{width:100%;height:auto;margin-top:auto}
.card.face-card canvas{position:absolute;right:0;top:0;height:100%;width:auto;aspect-ratio:1;margin:0;z-index:0;-webkit-mask:linear-gradient(90deg,transparent,#000 30%);mask:linear-gradient(90deg,transparent,#000 30%)}
.card.face-card small,.card.face-card>span{position:relative;z-index:1}
.card.face-card>span:last-child{margin-top:auto}

/* 3. story */
.story{position:relative;z-index:1}
.chapter{min-height:100vh;display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:clamp(24px,5vw,80px);padding:80px clamp(18px,5vw,72px);max-width:1440px;margin:0 auto}
.chap-copy p{color:var(--soft);font-size:clamp(17px,1.4vw,20px);max-width:26em;margin:22px 0 0}
.river{height:84vh;overflow:hidden;position:relative;-webkit-mask:linear-gradient(transparent,#000 18%,#000 82%,transparent);mask:linear-gradient(transparent,#000 18%,#000 82%,transparent);font-family:var(--ios)}
.river .col{display:flex;flex-direction:column;gap:6px;will-change:transform}
.river .b{animation:none;font-size:17px;max-width:72%}
.river mark{background:none;color:var(--candle2);text-shadow:0 0 18px rgba(240,179,93,.6)}
.river .count{align-self:flex-start;font:12px var(--sans);color:var(--candle);margin:-2px 0 6px 10px;letter-spacing:.03em}
.voice .chap-copy{order:0}
.bigwave{width:100%;height:auto}
.play{margin-top:30px;display:inline-flex;align-items:center;gap:14px;padding:12px 22px 12px 12px;border-radius:999px;background:var(--ink3);border:1px solid var(--line);font-size:15px;transition:border-color .3s}
.play:hover{border-color:var(--candle)}
.play svg{width:40px;height:40px;padding:9px;border-radius:50%;background:var(--paper);color:var(--ink)}
.play .bars{display:none}.play.on .bars{display:inline}.play.on .tri{display:none}
.play time{color:var(--muted);font-variant-numeric:tabular-nums}
.wordface{width:100%;max-width:560px;height:auto;justify-self:center}

/* 4. convo */
.convo{position:relative;z-index:1;padding:120px 18px;display:grid;justify-items:center}
.convo .label{font-size:13px;color:var(--muted);margin:0 0 30px;letter-spacing:.03em}
.bubbles{width:min(100%,420px);display:flex;flex-direction:column;gap:5px;font-family:var(--ios)}
.bubbles p{margin:0;max-width:78%;padding:10px 15px;border-radius:21px;font-size:18px;line-height:1.3;opacity:0;transform:translateY(14px) scale(.94);transition:opacity .5s,transform .55s cubic-bezier(.2,.9,.3,1.25)}
.bubbles p.her{align-self:flex-start;background:var(--her);border-bottom-left-radius:7px}
.bubbles p.me{align-self:flex-end;background:var(--me);border-bottom-right-radius:7px}
.bubbles p.in{opacity:1;transform:none}
.bubbles .typing{margin:2px 0}

/* 6. price at her table */
.price-sec{position:relative;z-index:1;min-height:100vh;display:grid;place-items:center;overflow:hidden}
.table{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.85) brightness(.75)}
.table-shade{position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 55%,rgba(12,10,9,.25),rgba(12,10,9,.92)),linear-gradient(var(--ink),transparent 25%,transparent 75%,var(--ink))}
.tnotif{position:absolute;top:16%;left:50%;width:min(92vw,380px);margin-left:max(-46vw,-190px);display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:22px;
  background:rgba(40,36,34,.6);backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);font:14px/1.3 var(--ios);color:#fff;
  box-shadow:0 20px 50px rgba(0,0,0,.5);transform:translateY(-30px);opacity:0;transition:transform .8s cubic-bezier(.2,.9,.2,1.1),opacity .6s}
.tnotif.show{transform:none;opacity:1}
.tnotif div{display:grid;flex:1;min-width:0}.tnotif b{font-weight:600}
.price-card{position:relative;text-align:center;padding:0 18px;margin-top:12vh}
.amount{font-size:clamp(80px,12vw,190px);line-height:.9;margin:0}
.amount span{font-size:.28em;color:var(--soft);font-style:italic}
.fine-big{font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.4vw,34px);color:var(--soft);margin:18px 0 34px}

/* 7. faq */
.faq{position:relative;z-index:1;max-width:860px;margin:0 auto;padding:120px 18px}
.faq h2{font-size:clamp(40px,5vw,72px);margin-bottom:40px}
details{border-top:1px solid var(--line);padding:22px 0}
details:last-child{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;font-family:var(--serif);font-size:clamp(24px,2.4vw,32px);display:grid;grid-template-columns:1fr auto;gap:20px;align-items:baseline}
summary::-webkit-details-marker{display:none}
summary::after{content:'+';color:var(--candle);transition:transform .4s;font-family:var(--sans);font-weight:300}
details[open] summary::after{transform:rotate(45deg)}
details p{color:var(--soft);margin:14px 0 0;max-width:40em;animation:fade .5s both}
@keyframes fade{from{opacity:0;transform:translateY(-6px)}}

.foot{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:16px 40px;align-items:center;padding:50px clamp(18px,5vw,72px) 60px;border-top:1px solid var(--line);color:var(--muted);font-size:14px}
.foot p{margin:0;flex:1;min-width:260px}
.foot nav{display:flex;gap:20px}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,30px);opacity:0;padding:12px 20px;border-radius:999px;background:var(--paper);color:var(--ink);font-size:14px;font-weight:500;z-index:70;transition:all .4s;pointer-events:none}
.toast.on{transform:translate(-50%,0);opacity:1}

/* reveal on scroll */
[data-rise]{opacity:0;transform:translateY(40px);transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.2,.8,.1,1)}
[data-rise].risen{opacity:1;transform:none}

@media (max-width:980px){
  .hero{grid-template-columns:1fr;padding-top:96px;text-align:left}
  .portrait{width:min(100%,380px);order:-1}
  .frame{max-height:62vh}
  .wake-grid{grid-template-columns:1fr}
  .chapter{grid-template-columns:1fr}
  .chapter{min-height:auto;padding:80px clamp(18px,5vw,72px)}
  .river{height:60vh}
  .links{display:none}
  .nav .pill.small{margin-left:auto}
}
@media (max-width:440px){
  body{font-size:16px}
  .phone{width:100%;max-width:370px;height:740px;border-radius:50px}
  .cards{grid-template-columns:1fr 1fr}
  .card b{font-size:28px}
  .hero h1{font-size:clamp(56px,17vw,90px)}
  .mark{font-size:25px}
}
@media (prefers-reduced-motion:reduce){
  .grain,.mark svg{animation:none}
  *{transition-duration:.01s!important}
}