/* Ponya homepage v3 — "Đèn Ngủ / Night-Light". One night under a kitchen lamp, ending in morning light.
   Tokens: night #17110D · umber #2A1D16 · lamp #F2B872 · terracotta #C8553D · cream #F6EDE0 · dawn #F7D9BF · paper #FBF5EC · ink #2A1B14
   sage #5E8C6A (confident) · amber #D9963A (unsure) — never red. All text pairs AA in both token sets. */

/* ── fonts: Newsreader (opsz 72 static), Be Vietnam Pro, JetBrains Mono — latin / latin-ext / vietnamese ── */
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/nr-vietnamese.v1.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/nr-latin-ext.v1.woff2) format("woff2");unicode-range:U+0100-0101,U+0104-010F,U+0112-0127,U+012A-0167,U+016A-019F,U+01A2-01AE,U+01B1-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/nr-latin.v1.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400 600;font-display:swap;src:url(/assets/fonts/nr-vietnamese-italic.v1.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400 600;font-display:swap;src:url(/assets/fonts/nr-latin-ext-italic.v1.woff2) format("woff2");unicode-range:U+0100-0101,U+0104-010F,U+0112-0127,U+012A-0167,U+016A-019F,U+01A2-01AE,U+01B1-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400 600;font-display:swap;src:url(/assets/fonts/nr-latin-italic.v1.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-weight:400;font-display:swap;src:url(/assets/fonts/bvp-vietnamese-400.v1.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-weight:400;font-display:swap;src:url(/assets/fonts/bvp-latin-ext-400.v1.woff2) format("woff2");unicode-range:U+0100-0101,U+0104-010F,U+0112-0127,U+012A-0167,U+016A-019F,U+01A2-01AE,U+01B1-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Be Vietnam Pro";font-weight:400;font-display:swap;src:url(/assets/fonts/bvp-latin-400.v1.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-weight:600;font-display:swap;src:url(/assets/fonts/bvp-vietnamese-600.v1.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-weight:600;font-display:swap;src:url(/assets/fonts/bvp-latin-ext-600.v1.woff2) format("woff2");unicode-range:U+0100-0101,U+0104-010F,U+0112-0127,U+012A-0167,U+016A-019F,U+01A2-01AE,U+01B1-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Be Vietnam Pro";font-weight:600;font-display:swap;src:url(/assets/fonts/bvp-latin-600.v1.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-weight:600;font-display:swap;src:url(/assets/fonts/jbm-vietnamese-500.v1.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"JetBrains Mono";font-weight:600;font-display:swap;src:url(/assets/fonts/jbm-latin-ext-500.v1.woff2) format("woff2");unicode-range:U+0100-0101,U+0104-010F,U+0112-0127,U+012A-0167,U+016A-019F,U+01A2-01AE,U+01B1-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";font-weight:600;font-display:swap;src:url(/assets/fonts/jbm-latin-500.v1.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* metric-matched fallbacks (measured against Times New Roman / Arial / Courier New metrics) keep CLS near zero while webfonts swap */
@font-face{font-family:"Newsreader Fallback";font-style:normal;src:local("Times New Roman"),local("Liberation Serif"),local("Times");size-adjust:111.56%;ascent-override:65.88%;descent-override:23.75%;line-gap-override:0%}
@font-face{font-family:"Newsreader Fallback";font-style:italic;src:local("Times New Roman Italic"),local("Liberation Serif Italic"),local("Times-Italic");size-adjust:103.71%;ascent-override:70.87%;descent-override:25.55%;line-gap-override:0%}
@font-face{font-family:"Be Vietnam Pro Fallback";font-weight:400 500;src:local("Arial"),local("Liberation Sans"),local("Helvetica");size-adjust:107.81%;ascent-override:92.75%;descent-override:24.58%;line-gap-override:0%}
@font-face{font-family:"Be Vietnam Pro Fallback";font-weight:600 700;src:local("Arial Bold"),local("Liberation Sans Bold"),local("Helvetica Bold");size-adjust:104.25%;ascent-override:95.93%;descent-override:25.42%;line-gap-override:0%}
@font-face{font-family:"JetBrains Mono Fallback";src:local("Courier New"),local("Liberation Mono"),local("Courier");size-adjust:99.98%;ascent-override:102.02%;descent-override:30%;line-gap-override:0%}

:root{
  --night:#17110D;--umber:#2A1D16;--deep:#120D0A;--dusk:#2E3740;
  --lamp:#F2B872;--terra:#C8553D;--ember:#E8906F;--cream:#F6EDE0;--muted:#CDBBA8;
  --dawn:#F7D9BF;--paper:#FBF5EC;--ink:#2A1B14;--ink-2:#6B5547;--terra-d:#A9482A;
  --sage:#5E8C6A;--sage-d:#3F6B4B;--sage-l:#8DB898;--amber:#D9963A;--amber-d:#8A5A14;
  --serif:"Newsreader","Newsreader Fallback",Georgia,serif;
  --sans:"Be Vietnam Pro","Be Vietnam Pro Fallback",system-ui,sans-serif;
  --mono:"JetBrains Mono","JetBrains Mono Fallback",ui-monospace,monospace;
  --gutter:clamp(16px,5vw,80px);--max:1280px;--nav:56px;--sec-y:clamp(60px,5.4vw,80px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
[data-tone=night]{--fg:var(--cream);--fg2:var(--muted);--accent:var(--lamp);--em:var(--ember);--line:rgba(246,237,224,.14);--chip:rgba(246,237,224,.07);--chipb:rgba(246,237,224,.22);color:var(--fg)}
[data-tone=day]{--fg:var(--ink);--fg2:var(--ink-2);--accent:#8E3B22;--em:var(--terra-d);--line:rgba(42,27,20,.13);--chip:rgba(42,27,20,.04);--chipb:rgba(42,27,20,.2);color:var(--fg)}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--dawn);-webkit-text-size-adjust:100%;scroll-padding-top:72px}
body{margin:0;background:transparent;color:var(--cream);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{display:block;max-width:100%}
picture{display:block}
a{color:inherit}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
h3{text-wrap:balance}p,dd,li{text-wrap:pretty}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit;cursor:pointer}
::selection{background:var(--lamp);color:var(--night)}
:focus-visible{outline:2.5px solid var(--lamp);outline-offset:3px;border-radius:8px}
[data-tone=day] :focus-visible{outline-color:var(--terra-d)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:12px;top:-60px;z-index:100;padding:10px 16px;border-radius:10px;background:var(--cream);color:var(--ink);font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.wrap{width:100%;max-width:calc(var(--max) + var(--gutter)*2);margin:0 auto;padding:0 var(--gutter)}
.nw{white-space:nowrap}

/* ── nav: transparent over the hero, tinted glass after; tone follows the section under it ── */
.nav{position:fixed;inset:0 0 auto;z-index:50;height:var(--nav);transition:background-color .4s,box-shadow .4s}
.nav__in{height:100%;display:flex;align-items:center;gap:16px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:500 23px/1 var(--serif);letter-spacing:-.01em;color:var(--fg)}
.brand img{width:32px;height:32px;border-radius:50%}
.nav__clock{margin-left:auto;font:500 12.5px/1 var(--mono);letter-spacing:.06em;color:var(--accent);display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:99px;border:1px solid var(--line);transition:opacity .4s}
.nav__clock::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.nav__links{display:flex;align-items:center;gap:4px;font:400 14px/1 var(--sans)}
.nav__links a{padding:10px 12px;border-radius:99px;text-decoration:none;color:var(--fg2)}
.nav__links a:hover{color:var(--fg)}
.nav__links .lang{border:1px solid var(--chipb);color:var(--fg)}
.lang__short{display:none}
.nav.is-scrolled[data-tone=night]{background:rgba(23,17,13,.78);box-shadow:0 1px 0 rgba(246,237,224,.08)}
.nav.is-scrolled[data-tone=day]{background:rgba(251,245,236,.86);box-shadow:0 1px 0 rgba(42,27,20,.08)}
@supports (backdrop-filter:blur(1px)){.nav.is-scrolled{backdrop-filter:blur(14px) saturate(1.2)}}
.nav.on-hero .nav__clock,html:not(.js) .nav__clock{opacity:0}
@media (max-width:760px){
  .nav__links a:not(.lang){display:none}
  .lang__long{display:none}.lang__short{display:inline}
  .nav__links .lang{padding:9px 12px;font-size:13px}
  .brand{font-size:21px}.brand img{width:30px;height:30px}
  .nav__clock{padding:7px 10px;font-size:12px}
}
@media (min-width:1000px){:root{--nav:68px}}

/* ── shared type ── */
.stamp{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin:0 0 18px;font:500 12.5px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg2)}
.stamp time{display:inline-flex;align-items:center;gap:12px;color:var(--accent);letter-spacing:.04em}
.stamp time::after{content:"";width:32px;height:1px;background:currentColor;opacity:.55}
h2{font:440 clamp(34px,5.2vw,74px)/1.04 var(--serif);letter-spacing:-.022em;color:var(--fg);text-wrap:balance}
h2 em{font-style:italic;font-weight:400;color:var(--em)}
.lede{margin-top:20px;font-size:clamp(16.5px,1.35vw,19px);line-height:1.6;color:var(--fg2);max-width:34em}
.lede a{color:var(--fg)}
.sec{position:relative;padding:var(--sec-y) 0;isolation:isolate}
.glow{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity 1.4s ease}
.sec.is-lit .glow,.final.is-lit .final__sun{opacity:1}
html:not(.js) .glow,html:not(.js) .final__sun{opacity:1}

/* ── status chip + mailto (not live) / badge (live) ── */
.cta__row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px}
.status{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;font:400 14px/1.2 var(--sans);color:var(--fg)}
.status__dot{width:8px;height:8px;border-radius:50%;background:var(--lamp);box-shadow:0 0 0 4px rgba(242,184,114,.18)}
[data-tone=day] .status__dot{background:var(--terra)}
.notify{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 22px;border-radius:99px;background:var(--lamp);color:var(--night);font:600 15px/1.1 var(--sans);text-decoration:none;white-space:nowrap;box-shadow:0 10px 30px rgba(242,170,96,.22);transition:transform .2s var(--ease),box-shadow .2s}
.notify:hover{transform:translateY(-1px);box-shadow:0 14px 34px rgba(242,170,96,.32)}
[data-tone=day] .notify{background:var(--terra-d);color:#fff;box-shadow:0 10px 26px rgba(169,72,42,.22)}
.cta__alt{margin-top:12px;font-size:13.5px;color:var(--fg2)}
.cta__alt a{color:var(--fg);display:inline-block;padding-block:3px}
.cta__meta{margin-top:12px;font:500 12px/1.4 var(--mono);letter-spacing:.03em;color:var(--fg2)}
.badge img{height:54px;width:auto}
.qr{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--fg2)}
.qr img{border-radius:8px;background:#fff;padding:4px}
.android-note{display:none}
html.is-android .android-note{display:inline}
@media (hover:none){.qr{display:none}}

/* ════════════ HERO — 11:58 PM (photographic) ════════════ */
.hero__copy{position:relative;z-index:3}
.eyebrow{font:500 13px/1.4 var(--mono);letter-spacing:.02em;color:var(--lamp);margin-bottom:12px}
.lang-vi .eyebrow{letter-spacing:.1em}
@media (max-width:359px){.eyebrow,.lang-vi .eyebrow{font-size:10.5px;letter-spacing:.06em}}
h1{font-family:var(--serif);font-weight:440;color:var(--cream);letter-spacing:-.02em}
.h1a{display:block;font-size:clamp(27px,7.4vw,46px);line-height:1.08}
.h1b{display:block;font-style:italic;font-weight:400;font-size:clamp(52px,15vw,96px);line-height:1;color:var(--lamp);letter-spacing:-.025em;margin-top:2px}
.lang-vi .h1b{font-size:clamp(48px,13.6vw,92px)}
.hero__tools{position:absolute;z-index:6;right:var(--gutter);top:0;display:flex;align-items:center;gap:10px}
.clock{position:relative;display:flex;align-items:baseline;gap:6px;padding:8px 11px 7px;border-radius:10px;background:#0c0806;border:1px solid #35251b;box-shadow:0 14px 30px rgba(0,0,0,.45)}
.clock__d{min-width:5ch;text-align:center;font:500 22px/1 var(--mono);color:var(--lamp);letter-spacing:.02em;text-shadow:0 0 12px rgba(242,170,96,.55);font-variant-numeric:tabular-nums}
.clock__s{font:500 10px/1 var(--mono);color:var(--lamp);letter-spacing:.12em}
.clock__s:empty{display:none}

.bubble{position:absolute;z-index:4;right:var(--gutter);top:58px;width:min(48%,196px);display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.bubble__k{font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.bubble__t{position:relative;display:block;align-self:stretch;min-height:calc(2.7em + 22px);padding:11px 15px;border-radius:18px 18px 6px 18px;background:var(--paper);color:var(--ink);font:400 15px/1.35 var(--sans);box-shadow:0 14px 40px rgba(0,0,0,.45)}
.caret{display:inline-block;animation:caret 1s steps(1) infinite;width:2px;height:1.05em;background:var(--terra);vertical-align:-.15em;margin-left:2px}
.bubble.is-done .caret,html:not(.js) .caret,html.rm .caret{display:none}
@keyframes caret{50%{opacity:0}}
.ghost{color:rgba(42,27,20,.34)}
.bubble__t::after{content:"";position:absolute;left:26px;bottom:-9px;border:9px solid transparent;border-bottom:0;border-top-color:var(--paper)}

.hcard{--c:clamp(0,calc((var(--p) - .6) * 5),1);--g:clamp(0,calc((var(--p) - .82) * 7),1);position:absolute;z-index:5;right:var(--gutter);bottom:4px;width:min(50%,200px);padding:13px 14px 11px;border-radius:20px;background:var(--paper);color:var(--ink);box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.5) inset}
.hcard__top{display:flex;justify-content:space-between;align-items:center;font:500 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.hcard__ok{display:inline-flex;align-items:center;gap:5px;color:var(--sage-d)}
.hcard__ok svg{width:12px;height:12px}
.hcard__title{margin-top:9px;font:600 14px/1.25 var(--sans)}
.hcard__total{display:flex;align-items:baseline;gap:6px;margin-top:4px}
.hcard__total b{font:440 40px/1 var(--serif);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.hcard__total span{font-size:14px;color:var(--ink-2)}
.hcard__range{margin-top:8px;font-size:12.5px;color:var(--ink-2)}
.hcard__range b{color:var(--ink);font-weight:600}
.rb{position:relative;display:block;height:7px;border-radius:9px;background:#efe2cf;margin-bottom:6px}
.rb__fill{position:absolute;top:0;bottom:0;left:26%;right:24%;border-radius:9px;background:linear-gradient(90deg,#f0c48e,var(--amber) 50%,#f0c48e)}
.rb__dot{position:absolute;top:50%;left:40%;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 3px var(--paper)}
.hcard__items{display:none;margin-top:10px;padding-top:8px;border-top:1px solid #eadcc8;font-size:13px}
.hcard__items li{display:flex;justify-content:space-between;gap:8px;padding:3px 0}
.hcard__items small{font-size:11.5px;font-weight:600;margin-left:4px}
.hcard__guilt{display:flex;align-items:baseline;gap:8px;margin-top:9px;padding-top:8px;border-top:1px dashed #d9c6ad;font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.hcard__guilt i{flex:1;border-bottom:1.5px dotted #c9b296;transform:translateY(-3px)}
.hcard__guilt b{font:500 20px/1 var(--mono);color:var(--sage-d);letter-spacing:0}
.conf--high{color:var(--sage-d)}.conf--mid{color:var(--ink-2)}.conf--low{color:var(--amber-d)}

/* sequence states — default (no JS / reduced motion) is the final 1:04 AM frame */
html.js .hcard{opacity:var(--c);transform:translateY(calc((1 - var(--c)) * 34px)) scale(calc(.95 + var(--c) * .05));transform-origin:50% 100%}
html.js .hcard__guilt{opacity:var(--g)}
html.js .hcard__guilt b{display:inline-block;transform:scale(calc(.6 + var(--g) * .4))}
.hero__bar{position:relative;z-index:6;margin-top:18px}
.hero__desc{font-size:15px;line-height:1.5;color:var(--muted);margin-bottom:14px;max-width:34em}
.d-long{display:none}
.play{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 14px 0 12px;border-radius:99px;border:1px solid rgba(242,184,114,.5);background:rgba(242,184,114,.1);color:var(--lamp);font:600 14px/1 var(--sans)}
.play:hover{background:rgba(242,184,114,.18)}
.play{min-width:7.4em;justify-content:center;white-space:nowrap}
html:not(.js) .play,html.rm .play,html:not(.js) .modes,html:not(.js) .try{display:none}
.hero__hint{display:none;margin:0;font:500 11.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
html.pin .hero__hint{display:inline;opacity:calc(1 - var(--p) * .25)}
.hero{position:relative;background:var(--night);box-shadow:0 -100vh 0 var(--night);color:var(--cream)}
.hero__stage{--p:1;position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;padding:calc(var(--nav) + 18px) var(--gutter) 28px;background:var(--night)}
/* the photograph: a box with the image's exact aspect, so the eye patch stays pixel-aligned at every crop */
.hero__photo{position:relative;z-index:0;overflow:hidden;margin:14px calc(var(--gutter) * -1) 0;aspect-ratio:1/1;max-height:56svh;width:calc(100% + var(--gutter) * 2)}
.hero__box{--ex:38.649%;--ew:29.292%;position:absolute;left:0;top:0;width:100%;aspect-ratio:1229/1536;transform:translateY(-19%)}
.hero__img,.hero__img img{display:block;width:100%;height:100%}
.hero__img img{object-fit:cover}
.hero__eyes{position:absolute;left:var(--ex);top:47.852%;width:var(--ew);height:13.672%;opacity:0;transition:opacity .45s ease}
.hero__eyes img{width:100%;height:100%}
.hero__photo.is-blink .hero__eyes{opacity:1;transition-duration:.06s}
.hero__photo.is-content .hero__eyes{opacity:1}
html:not(.js) .hero__eyes,html.rm .hero__eyes{opacity:1}
.hero__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--night) 0,rgba(23,17,13,0) 14%,rgba(23,17,13,0) 74%,var(--night) 100%);pointer-events:none}
.hero__veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:#000;opacity:0}
html.js .hero__veil{animation:dim 1.2s steps(1) .1s both}
@keyframes dim{0%{opacity:.7}12%{opacity:.18}18%{opacity:.55}26%{opacity:0}34%{opacity:.28}42%,100%{opacity:0}}
.hero__copy{order:-2}
.hero__tools{order:-1;position:relative;right:auto;top:auto;z-index:3;display:flex;margin-top:14px}
.hero__slot{position:relative;z-index:3;display:grid;margin-top:-30px}
.bubble,.hcard{grid-area:1/1;position:relative;inset:auto;width:auto;max-width:none}
.bubble{align-self:start;align-items:stretch}
.bubble__k{text-align:right;color:var(--cream)}
.bubble__t::after{left:auto;right:56%;bottom:auto;top:-9px;border:9px solid transparent;border-top:0;border-bottom-color:var(--paper)}
.hcard{z-index:2;padding:14px 16px 12px;display:grid;grid-template-columns:1fr auto;column-gap:16px}
.hcard__top,.hcard__title,.hcard__guilt,.hcard__items{grid-column:1/-1}
.hcard__total{grid-column:1}.hcard__range{grid-column:2;align-self:end;min-width:44%}
html.js .hcard{opacity:clamp(0,calc((var(--p) - .56) * 60),1);transform:translateY(calc((1 - clamp(0,calc((var(--p) - .56) * 6),1)) * 18px))}
html.js .bubble{opacity:clamp(0,calc((.6 - var(--p)) * 40),1)}
.hero__bar{position:relative;z-index:3;margin-top:22px}
@media (max-width:359px){.clock__s{display:none}.hcard__range{min-width:0}}
/* tablet: the full scene, cropped 16:10 around Ponya */
@media (min-width:700px){
  .hero__photo{aspect-ratio:16/10;max-height:none}
  .hero__box{--ex:53.052%;--ew:13.081%;left:-7.43%;width:111.98%;aspect-ratio:2752/1536;transform:none}
  .hero__slot{width:min(380px,100%);margin:-110px var(--gutter) 0 auto}
  .hcard__items{display:block}
  .d-long{display:inline}.d-short{display:none}
  .hero__desc{font-size:16.5px}
}
/* desktop: one full-bleed photograph; words on the dark left, clock + the 1am message on the right */
@media (min-width:1000px){
  .hero__stage{display:block;height:100vh;min-height:680px;max-height:1100px;padding:0}
  .hero__photo{position:absolute;inset:0;margin:0;width:auto;aspect-ratio:auto}
  .hero__box{left:auto;right:0;top:50%;width:max(100%,179.2vh,1218px);transform:translateY(-50%)}
  .hero__photo::after{background:linear-gradient(90deg,var(--night) 0,rgba(23,17,13,.94) 20%,rgba(23,17,13,.62) 33%,rgba(23,17,13,0) 46%),linear-gradient(0deg,var(--night) 0,rgba(23,17,13,.86) 9%,rgba(23,17,13,0) 24%),linear-gradient(180deg,rgba(23,17,13,.7) 0,rgba(23,17,13,0) 14%)}
  .hero__copy{position:absolute;z-index:3;left:var(--gutter);top:max(calc(var(--nav) + 6vh),calc(50% - 190px));width:min(40vw,600px)}
  .eyebrow{font-size:13px;margin-bottom:18px}
  .h1a{font-size:clamp(38px,3.2vw,50px)}
  .h1b{font-size:clamp(76px,6.8vw,108px);margin-top:4px}
  .lang-vi .h1b{font-size:clamp(68px,6.1vw,98px)}
  .hero__tools{position:absolute;right:var(--gutter);top:calc(var(--nav) + 4vh);margin:0}
  .clock__d{font-size:40px}
  .clock__s{font-size:13px}
  .hero__slot{position:absolute;right:var(--gutter);top:calc(var(--nav) + 4vh + 96px);width:clamp(290px,22vw,330px);margin:0}
  .bubble__t{font-size:17px;padding:14px 18px;border-radius:20px}
  .bubble__t::after{right:auto;left:-10px;top:calc(50% - 10px);border:10px solid transparent;border-left:0;border-right-color:var(--paper)}
  .bubble{align-items:stretch;margin-top:40px}
  .bubble__k{text-align:left}
  .hcard{display:block;padding:18px 20px 16px;border-radius:24px}
  .hcard__title{font-size:17px;margin-top:12px}
  .hcard__total b{font-size:56px}
  .hero__bar{position:absolute;z-index:3;left:var(--gutter);top:calc(max(calc(var(--nav) + 6vh),calc(50% - 190px)) + 236px);width:min(36vw,520px);margin:0}
  .hero__desc{font-size:17.5px;color:var(--cream);max-width:none;margin-bottom:22px}
}
@media (min-width:1000px) and (max-height:760px){.hero__slot{top:calc(var(--nav) + 2vh + 88px)}.hero__tools{top:calc(var(--nav) + 2vh)}.hcard__items{display:none}}

/* ════════════ 1:04 AM — the demo ════════════ */
.demo{background:linear-gradient(180deg,var(--night) 0,var(--umber) 60%,#241811 100%)}
.glow--lamp{background:radial-gradient(40% 50% at 74% 44%,rgba(242,170,96,.22),transparent 70%)}
.demo__grid{display:grid;gap:40px;align-items:center}
.modes{display:inline-flex;margin-top:30px;padding:4px;border-radius:99px;background:rgba(246,237,224,.06);border:1px solid var(--line)}
.mode{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border:0;border-radius:99px;background:none;color:var(--fg2);font:600 14.5px/1 var(--sans)}
.mode.is-on{background:var(--cream);color:var(--ink)}
.try{margin-top:22px}
.try__label{display:block;font:500 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg2);margin-bottom:12px}
.try__chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:7px;padding:10px 15px;border-radius:99px;border:1px solid var(--chipb);background:var(--chip);color:var(--fg);font:600 14px/1 var(--sans);transition:background-color .2s,color .2s}
.chip:hover{border-color:var(--lamp)}
.chip.is-on{background:var(--lamp);border-color:var(--lamp);color:var(--night)}
.demo__note{margin-top:18px;font-size:13px;color:var(--fg2)}

.sheet{position:relative;max-width:440px;width:100%;justify-self:center;padding:14px 16px 16px;border-radius:30px;background:var(--paper);color:var(--ink);box-shadow:0 40px 90px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.5) inset,0 0 120px rgba(242,170,96,.14)}
.sheet__bar{display:grid;grid-template-columns:32px 1fr 32px;align-items:center;text-align:center;font:600 15px/1 var(--sans);padding:4px 2px 12px}
.sheet__x{width:30px;height:30px;border-radius:50%;background:#efe4d4;display:grid;place-items:center;font-size:12px;color:var(--ink-2)}
.typed{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:#f2e7d8;min-height:66px}
.typed__photo{display:none;width:48px;height:48px;border-radius:12px;object-fit:cover}
.typed.has-photo .typed__photo{display:block}
.typed__body{display:flex;flex-direction:column;gap:3px;min-width:0}
.typed__label{font:500 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.typed__text{font:400 15px/1.35 var(--sans)}
.typed.is-typing .typed__text::after{content:"";display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-.12em;background:var(--terra);animation:caret 1s steps(1) infinite}
.result{min-height:300px;transition:opacity .35s ease,transform .45s var(--ease)}
html.js .result:not(.is-in){opacity:0;transform:translateY(6px)}
.r-total{padding:16px 4px 8px}
.r-total small{display:block;font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.r-total b{display:flex;align-items:baseline;gap:6px;margin-top:6px;font:440 52px/1 var(--serif);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.r-total b i{font:400 15px/1 var(--sans);color:var(--ink-2);font-style:normal}
.r-total__m{display:block;margin-top:6px;font-size:13px;color:var(--ink-2)}
.r-item{margin-top:8px;padding:12px 14px;border-radius:16px;background:#fff;box-shadow:0 1px 0 rgba(42,27,20,.06),0 6px 18px rgba(42,27,20,.05)}
.r-item__top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.r-item__top strong{font-weight:600;font-size:15.5px}
.r-item__top em{font-style:normal;font-weight:600;font-size:16px}
.r-item__top em small{font-weight:400;font-size:12px;color:var(--ink-2);margin-left:3px}
.r-item__d{font-size:12.5px;color:var(--ink-2);margin-top:2px}
.r-item__c{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:6px;font-size:12.5px}
.conf{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.r-item .conf::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.r-item .conf--low::before{background:var(--amber)}
.r-item .conf--high::before{background:var(--sage)}
.r-item .conf--mid::before{background:#b9a38a}
.r-range{color:var(--ink-2)}
.r-after{margin-top:12px;padding:0 4px}
.r-after__row{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-2)}
.r-after__row b{color:var(--ink)}
.r-bar{width:100%;height:6px;margin-top:8px}
.r-bar__bg{fill:#eadcc8}.r-bar__fg{fill:var(--terra);transition:width .7s var(--ease)}
.sheet__save{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:nowrap;margin-top:14px;padding:4px 4px 0;font-size:12.5px;color:var(--ink-2)}
.sheet__save>span[data-save]{white-space:nowrap;flex:none;display:inline-flex;align-items:center;gap:6px;padding:11px 18px;border-radius:99px;background:var(--terra-d);color:#fff;font:600 14px/1 var(--sans)}
@media (min-width:900px){.demo__grid{grid-template-columns:1fr 440px;gap:64px}}

/* ════════════ 1:20 AM — yesterday's log: full-bleed ledger, centred head ════════════ */
.food{background:transparent}
.food__head{text-align:center;display:grid;justify-items:center}
.food__head .lede{margin-inline:auto}
.food .stamp{justify-content:center}
.log{margin-top:48px;border-top:1px solid var(--line)}
.log li{position:relative;border-bottom:1px solid var(--line)}
.log__in{display:grid;grid-template-columns:1fr auto;gap:4px 16px;align-items:baseline;max-width:calc(var(--max) + var(--gutter)*2);margin:0 auto;padding:18px var(--gutter)}
.log time{grid-column:1/-1;font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--fg2);transition:color .9s ease}
.log q{font:italic 400 clamp(23px,3vw,40px)/1.15 var(--serif);color:var(--fg);quotes:"“" "”"}
.log b{font:500 15px/1 var(--mono);color:var(--lamp);white-space:nowrap}
.log b small{color:var(--fg2);font-size:12px}
.log li::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,transparent,rgba(242,184,114,.1) 30%,rgba(242,184,114,.04) 70%,transparent);opacity:0;transition:opacity .9s ease}
.log li.is-lit::before,html:not(.js) .log li::before{opacity:1}
.log li.is-lit time{color:var(--lamp)}
.log__note{margin-top:18px;font-size:13.5px;color:var(--fg2);text-align:center}
@media (min-width:900px){.log__in{grid-template-columns:9em 1fr auto;padding:24px var(--gutter)}.log time{grid-column:auto}}

/* ════════════ 2:00 AM — film stills on a dark shelf (3 large, 2 by scroll) ════════════ */
.screens{background:transparent}
.shelf{--sw:clamp(232px,66vw,300px);--top:calc(var(--sw) * 1.1 * 1.839);margin-top:40px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:34px var(--gutter) 8px;scroll-padding-inline:var(--gutter);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 90px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 90px),transparent)}
.shelf::-webkit-scrollbar{display:none}
.shelf ol{position:relative;display:flex;align-items:flex-start;gap:clamp(20px,2.6vw,40px);width:max-content}
.shelf ol::before{content:"";position:absolute;z-index:0;left:-80px;right:-80px;top:calc(var(--top) - 3px);height:26px;border-radius:2px 2px 4px 4px;background:linear-gradient(180deg,#7a573f 0,#5c4130 2px,#46301f 9px,#3a2819 10px,rgba(255,206,150,.22) 10px,rgba(255,206,150,.22) 11px,#2b1d13 12px,#1b120b 100%);box-shadow:0 26px 40px rgba(0,0,0,.7),0 8px 12px rgba(0,0,0,.5)}
.shelf ol::after{content:"";position:absolute;left:0;right:0;top:-40px;height:calc(var(--top) + 40px);background:radial-gradient(40% 70% at 30% 0,rgba(242,184,114,.13),transparent 72%);pointer-events:none}
.shelf li{--k:1;position:relative;z-index:1;width:calc(var(--sw) * var(--k));padding-top:calc((1.1 - var(--k)) * var(--sw) * 1.839);scroll-snap-align:start}
.shelf li.is-hero{--k:1.1}
.shelf li::after{content:"";position:absolute;z-index:-1;left:6%;right:6%;top:calc(var(--top) - 9px);height:16px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.85),transparent)}
.shelf img{width:100%;height:auto;border-radius:22px;box-shadow:0 2px 0 rgba(255,214,170,.08),0 18px 30px rgba(0,0,0,.45);filter:brightness(.93) saturate(.95)}
.shelf li.is-hero img{filter:none;box-shadow:0 0 0 1px rgba(242,184,114,.25),0 24px 50px rgba(0,0,0,.5),0 0 60px rgba(242,184,114,.12)}
.shelf figcaption{margin-top:38px;font-size:15px;line-height:1.4;color:var(--fg)}
.shelf figcaption span{display:block;margin-bottom:6px;font:500 11.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--lamp)}
.shelf__note{margin-top:20px;font-size:13px;color:var(--fg2)}
@media (min-width:1000px){.shelf{padding-left:max(var(--gutter),calc((100vw - var(--max)) / 2))}}

/* ════════════ 3:30 AM — centred: Ponya asleep on the nightstand carries it ════════════ */
.friend{background:transparent;overflow-x:clip}
.friend__in{display:grid;justify-items:center;text-align:center}
.friend .stamp{justify-content:center}
.friend .lede{margin:34px auto 0}
.points{display:grid;gap:22px;margin-top:34px;text-align:left;width:100%}
.points li{position:relative;padding-left:26px}
.points li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:10px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 4px rgba(217,150,58,.18)}
.points h3{font:600 17px/1.35 var(--sans);color:var(--fg)}
.points p{margin-top:4px;color:var(--fg2);font-size:15.5px}
@media (min-width:900px){.points{grid-template-columns:repeat(4,1fr);gap:32px;padding-top:34px;border-top:1px solid var(--line)}.nightstand picture{width:280px}}

/* ════════════ 5:15 AM — chart left, words right ════════════ */
.trend{background:transparent}
.trend__grid{display:grid;gap:40px;align-items:center}
.chart{padding:22px 22px 16px;border-radius:24px;background:rgba(16,13,28,.82);border:1px solid rgba(246,237,224,.14)}
.chart__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:10px}
.chart__label,.chart__delta{white-space:nowrap}
.chart__label{display:block;font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg2)}
.chart__val{display:block;margin-top:6px;font:440 40px/1 var(--serif);color:var(--fg)}
.chart__val small{font:400 15px/1 var(--sans);color:var(--fg2)}
.chart__delta{font:500 13px/1 var(--mono);color:#e9dcef;padding:7px 10px;border-radius:8px;border:1px solid rgba(233,220,239,.3)}
.chart svg{width:100%;height:auto;aspect-ratio:560/240}
.chart__grid line{stroke:rgba(246,237,224,.1);stroke-dasharray:3 5}
.chart .s0{stop-color:#f2c393;stop-opacity:.2}.chart .s1{stop-color:#f2c393;stop-opacity:0}
.chart__dots circle{fill:rgba(246,237,224,.35)}
.chart__line{fill:none;stroke:var(--dawn);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.chart__end{fill:var(--dawn);stroke:#2a2440;stroke-width:3}
.chart__legend{display:flex;gap:18px;margin-top:10px;font-size:13px;color:var(--fg2)}
.lg::before{content:"";display:inline-block;vertical-align:middle;margin-right:7px}
.lg--dot::before{width:7px;height:7px;border-radius:50%;background:rgba(246,237,224,.5)}
.lg--line::before{width:18px;height:3px;border-radius:2px;background:var(--dawn)}
@media (min-width:900px){.trend__grid{grid-template-columns:1fr 1fr;gap:72px}.trend__copy{order:2}.trend h2{font-size:clamp(38px,4.5vw,64px)}}

/* ════════════ 6:20 AM — the dawn happens on a frosted Barrie window ════════════ */
.window__cap{margin-top:14px;font:500 12px/1.3 var(--mono);letter-spacing:.05em;color:var(--ink)}
.trust .wrap{padding-bottom:var(--sec-y)}
.trust__grid{display:grid;gap:24px;margin-top:40px}
.trust__grid .note{margin-top:4px}
.privacy,.founder{padding:26px 26px 24px;border-radius:24px;background:#fff;box-shadow:0 1px 0 rgba(42,27,20,.05),0 20px 50px rgba(42,27,20,.07)}
.privacy h3,.credits__h{font:440 28px/1.1 var(--serif);color:var(--ink)}
.checks{display:grid;gap:14px;margin-top:18px}
.checks li{display:flex;gap:10px;align-items:flex-start;color:var(--ink);font-size:16px}
.checks svg{flex:none;margin-top:5px;color:var(--sage-d)}
.link{display:inline-block;margin-top:20px;font-weight:600;color:var(--terra-d);text-decoration:none;border-bottom:1px solid currentColor;padding:4px 0 2px}
.credits{display:grid;gap:2px;margin-top:18px}
.credits dd+dt{margin-top:12px}
.credits dt{font:500 11px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.credits dd{font:440 18px/1.35 var(--serif);color:var(--ink)}
.note{position:relative;margin-top:26px;padding:24px 22px 20px;background:#fffaf2;border:1px solid #efe2cf;border-radius:4px;transform:rotate(-1.1deg);box-shadow:0 14px 30px rgba(42,27,20,.09)}
.note::before{content:"";position:absolute;left:50%;top:-11px;width:96px;height:22px;transform:translateX(-50%) rotate(2deg);background:rgba(232,206,170,.75);border-radius:2px}
.note p{font:italic 400 19px/1.5 var(--serif);color:var(--ink)}
.note p a{color:var(--terra-d)}
.note .note__h{font-size:24px;margin-bottom:6px}
.note .note__sign{margin-top:12px;font-size:17px;color:var(--ink-2)}
.foot nav a,.faq a,.founder a,.note a{display:inline-block;padding-block:3px}
@media (min-width:900px){
  .trust__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;gap:28px}
  .trust__grid .note{grid-column:1/-1;max-width:860px;justify-self:center;padding:30px 40px 26px;transform:rotate(-.6deg)}
  .privacy{padding:32px}
  .credits{grid-template-columns:auto 1fr;gap:10px 18px}.credits dd+dt{margin-top:0}.credits dt{text-align:right;padding-top:3px}
}

/* ════════════ 6:40 AM — FAQ ════════════ */
.faq{background:var(--paper)}
.faq__grid{display:grid;gap:32px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{position:relative;list-style:none;cursor:pointer;padding:20px 40px 20px 0;font:600 17px/1.4 var(--sans);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;margin-top:-7px;border-right:2px solid var(--terra-d);border-bottom:2px solid var(--terra-d);transform:rotate(45deg);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(225deg);margin-top:-2px}
.faq details p{padding:0 0 20px;color:var(--ink-2);max-width:40em}
.faq details a,.faq__head a{color:var(--terra-d)}
.faq details:first-child{border-top:1px solid var(--line)}
@media (min-width:900px){.faq__grid{grid-template-columns:.8fr 1.2fr;gap:80px}}

/* ════════════ 7:02 AM — sunrise: the hero composition, in daylight ════════════ */
.final{position:relative;isolation:isolate;overflow:clip;padding:var(--sec-y) 0 calc(var(--sec-y) * .5);background:radial-gradient(55% 62% at 74% 62%,rgba(242,184,114,.55),rgba(242,184,114,.18) 50%,transparent 78%),linear-gradient(180deg,var(--paper) 0%,#fbeedd 40%,var(--dawn) 100%)}
.final__in{display:grid;gap:8px}
.final .cta{margin-top:28px}
.final h2{font-size:clamp(44px,6.4vw,92px)}
@media (min-width:900px){
  .final__in{grid-template-columns:1fr auto;align-items:center;gap:64px}
}

.final,.foot{--fg2:#5E463A}
.foot{background:var(--dawn);color:var(--ink);padding:0 0 40px;position:relative}
.foot__morning{font:italic 400 clamp(34px,4.4vw,60px)/1 var(--serif);color:var(--ink);padding:24px 0 26px}
.foot__in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 22px;font-size:14.5px}
.foot nav a{text-decoration:none;color:var(--ink)}
.foot nav a:hover{text-decoration:underline}
.brand--sm{font-size:19px}.brand--sm img{width:26px;height:26px}
.foot__note{margin-top:20px;font-size:13.5px;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:4px 16px}
.foot__note strong{color:var(--ink);font-weight:600}

/* ════════════ round 5: the night is physical ════════════ */
/* one fixed sky behind the middle of the page: night → indigo → pre-dawn; moon arcs and sets; stars fade */
.sky{position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#120d0b 0%,#17110d 60%,#1d1410 100%);transition:opacity .6s ease}
html.js .sky:not(.is-on),.sky.is-gone{opacity:0}
.sky__l,.sky__stars,.sky__moon{position:absolute;display:block}
.sky__l{inset:0}
.sky__l--indigo{background:linear-gradient(180deg,#0f0f22 0%,#17162d 55%,#211a2c 100%);opacity:clamp(0,calc(var(--t,0) * 2.2),1)}
.sky__l--pre{background:radial-gradient(120% 55% at 70% 108%,rgba(232,150,110,.42),rgba(190,110,110,.16) 45%,transparent 72%),linear-gradient(180deg,#151632 0%,#231d3c 50%,#3a2840 85%,#4a2f42 100%);opacity:clamp(0,calc(var(--t,0) * 2.4 - 1.4),1)}
.sky__stars{inset:0 0 25%;background:url(/assets/img/stars.v1.svg) 0 0/640px 560px repeat;-webkit-mask-image:linear-gradient(180deg,#000 40%,transparent);mask-image:linear-gradient(180deg,#000 40%,transparent);opacity:clamp(0,calc(1 - var(--t,0) * 1.25),1)}
.demo{background:transparent}
.glow--lamp{background:radial-gradient(40% 50% at 74% 44%,rgba(242,170,96,.16),transparent 70%)}

/* hero: Try/Replay lives on the clock face */
.clock{align-items:center;gap:10px;padding:6px 6px 6px 12px}
.clock__face{display:flex;align-items:baseline;gap:6px}
.play{min-width:0;min-height:36px;padding:0 12px 0 10px;border-radius:8px;border-color:rgba(242,184,114,.35)}
.play__l{font-size:13.5px}
@media (max-width:699px){.play{width:40px;height:40px;padding:0;justify-content:center}.play__l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
@media (min-width:1000px){.clock{padding:10px 10px 10px 18px;gap:16px}.play{min-height:44px;padding:0 16px 0 14px}.play__l{font-size:15px}}

@media (max-width:359px){.clock__s{display:none}.hcard__range{min-width:0}}

/* 1:04 — Ponya peeks over the sheet, eyes closed; the snapped photo is the hero of the sheet */
.sheet__ponya{position:absolute;right:28px;top:-60px;width:84px;z-index:-1}
.sheet__ponya img{width:100%;height:auto}
.sheet{isolation:isolate}
.typed__shot{display:none;position:relative;width:160px;height:160px;border-radius:16px;overflow:hidden;box-shadow:0 10px 24px rgba(42,27,20,.18)}
.typed__shot::after{content:"";position:absolute;inset:8px;border-radius:10px;background:linear-gradient(#fff,#fff) 0 0/16px 2px,linear-gradient(#fff,#fff) 0 0/2px 16px,linear-gradient(#fff,#fff) 100% 0/16px 2px,linear-gradient(#fff,#fff) 100% 0/2px 16px,linear-gradient(#fff,#fff) 0 100%/16px 2px,linear-gradient(#fff,#fff) 0 100%/2px 16px,linear-gradient(#fff,#fff) 100% 100%/16px 2px,linear-gradient(#fff,#fff) 100% 100%/2px 16px;background-repeat:no-repeat;opacity:.85}
.typed__photo{display:block!important;width:100%!important;height:100%!important;border-radius:0!important}
.typed.has-photo{flex-direction:column;align-items:center;text-align:center;gap:10px;padding:14px}
.typed.has-photo .typed__shot{display:block}
.save-mine{display:inline-flex;align-items:center;gap:8px;font-size:13px;line-height:1.3;color:var(--ink-2)}
.cb{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:5px;background:var(--sage-d);color:#fff}
.cb svg{width:12px;height:12px}


/* footer ends the page */
.foot{padding-bottom:28px}

/* VI: no tracked mono caps on Vietnamese labels (keep mono for digits) */
.lang-vi :is(.eyebrow,.stamp span,.bubble__k,.try__label,.typed__label,.r-total small,.hcard__top>span,.hcard__guilt>span,.credits dt,.chart__label,.shelf figcaption span,.cta__meta,.window__cap,.nightstand figcaption){font-family:var(--sans);text-transform:none;letter-spacing:0;font-weight:600}
.lang-vi .eyebrow{font-size:14px}
.lang-vi .stamp span,.lang-vi .shelf figcaption span,.lang-vi .credits dt,.lang-vi .chart__label{font-size:13.5px}
.lang-vi .bubble__k,.lang-vi .try__label,.lang-vi .typed__label,.lang-vi .r-total small,.lang-vi .hcard__top>span,.lang-vi .hcard__guilt>span{font-size:12.5px}
.lang-vi .cta__meta,.lang-vi .window__cap,.lang-vi .nightstand figcaption{font-weight:400;font-size:13px}

/* live: keep the hero CTA inside the counter */
@media (min-width:1000px){.hero .cta--live .qr img{width:56px;height:56px}.hero .cta--live .badge img{height:46px}.hero .cta--live .cta__row{gap:10px 16px}}

/* ── reduced motion: final hero frame, instant light swaps ── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
}
/* clock object never changes width while the time or the button label changes */
.clock__d{min-width:5ch;text-align:right}
.clock__s{display:inline-block;width:2.2ch}
.lang-vi .clock__s{display:none}
.play__l{display:inline-block;min-width:4.6em;text-align:center}
.lang-vi .play__l{min-width:4.2em}
.clock__d{width:3.05em;min-width:0}

/* ═══ round 6 ═══ */

.sheet__ponya{left:-46px;right:auto;top:30px;width:78px;transform:rotate(-8deg)}
@media (max-width:899px){.sheet__ponya{left:auto;right:24px;top:-56px;transform:none}}
.play{background:#0c0806;color:var(--lamp);border-color:rgba(242,184,114,.45)}
.play:hover{background:#1c130d}
/* yesterday: one quiet label, daytime times muted */
.log__day{margin:44px auto -30px;font:500 12px/1 var(--mono);color:var(--fg2);display:flex;align-items:center;gap:12px}
.log__day::after{content:"";flex:1;height:1px;background:var(--line)}
.log time,.log li.is-lit time{color:#a8978a}
.log{margin-top:40px}
/* 2:00 — screens in dark frames under the lamp */
.shelf{--sw:clamp(236px,64vw,300px);--top:calc(var(--sw) * 1.1 * 1.315 + 22px)}
.shelf li{padding-top:calc((1.1 - var(--k)) * (var(--sw) * 1.315 + 22px))}
.phone{display:block;padding:11px 11px 0;border-radius:44px 44px 6px 6px;background:linear-gradient(160deg,#2a211c,#0c0807 40%,#16100c);box-shadow:inset 0 0 0 1px rgba(255,214,170,.14),0 -2px 0 rgba(255,220,180,.06),0 30px 50px rgba(0,0,0,.55);position:relative}
.phone::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(200deg,rgba(255,210,150,.16),transparent 38%);pointer-events:none}
.shelf .phone img{border-radius:34px 34px 0 0;box-shadow:none;filter:brightness(.88) saturate(.92)}
.shelf li.is-hero .phone img{filter:none;box-shadow:none}
.shelf li.is-hero .phone{box-shadow:inset 0 0 0 1px rgba(242,184,114,.3),0 30px 60px rgba(0,0,0,.55),0 0 70px rgba(242,184,114,.14)}
.final__echo{margin-top:22px}
.final__echo span{display:inline-flex;gap:8px;padding:8px 12px;border-radius:8px;border:1px dashed rgba(42,27,20,.25);font:500 12.5px/1 var(--mono);color:var(--fg2)}
/* labels: sentence-case sans on both languages (mono kept for times and digits) */
:is(.stamp span,.bubble__k,.try__label,.typed__label,.r-total small,.hcard__top>span,.hcard__guilt>span,.credits dt,.chart__label,.shelf figcaption span){font-family:var(--sans);text-transform:none;letter-spacing:0;font-weight:600}
.stamp span,.shelf figcaption span,.credits dt,.chart__label{font-size:13.5px}
.bubble__k,.try__label,.typed__label,.r-total small,.hcard__top>span,.hcard__guilt>span{font-size:12.5px}
.lang-vi .eyebrow{font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.02em}

/* ═══ the photographic world: 3:30, 6:20, 7:02 ═══ */
.still330{position:relative;width:min(1120px,calc(100% + var(--gutter) * 2));margin:34px calc(var(--gutter) * -1) 0}
.still330__img img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:52% 50%}
.still330::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 60px 30px rgba(15,15,34,.55)}
.still330 figcaption{position:absolute;left:0;right:0;bottom:16px;z-index:1;font:500 12.5px/1.5 var(--mono);color:#e8e1ef;text-shadow:0 1px 8px rgba(0,0,0,.8)}
@media (min-width:700px){.still330{margin-inline:auto;width:min(1120px,100%)}.still330__img img{aspect-ratio:16/9;object-position:50% 52%;border-radius:22px}.still330::after{border-radius:22px;box-shadow:inset 0 0 80px 30px rgba(15,15,34,.5),0 40px 90px rgba(0,0,0,.45)}}

.trust{--dg:clamp(70px,10vw,150px);--dh:calc(var(--sec-y) * .6 + min(1200px,100vw) * .5581);padding-top:0;background:linear-gradient(180deg,transparent 0,transparent calc(var(--dh) - 2px),#3a2a2c calc(var(--dh) - 1px),#b98a7a calc(var(--dh) + var(--dg) * .45),#ecd2bb calc(var(--dh) + var(--dg)),var(--paper) calc(var(--dh) + var(--dg) * 1.5),var(--paper) 100%)}
.dawn{display:block;position:relative;width:min(1200px,100vw);margin:0 auto var(--dg);padding-top:calc(var(--sec-y) * .6)}
.dawn__img img{display:block;width:100%;height:auto;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.dawn .window__cap{position:absolute;left:0;right:0;bottom:12px;text-align:center;margin:0;font:500 12px/1.3 var(--mono);color:#f3e6d6;text-shadow:0 1px 8px rgba(0,0,0,.85)}
@media (min-width:1000px){.dawn__img img{display:block;width:100%;height:auto;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}}

.final{position:relative;isolation:isolate;overflow:clip;padding:var(--sec-y) 0 0;background:var(--paper);display:flex;flex-direction:column}
.final__bg{order:2}
.final__bg{display:block;margin-top:28px}
.final__bg img{display:block;width:100%;height:auto;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%);mask-image:linear-gradient(180deg,transparent 0,#000 18%)}
.final__in{position:relative;z-index:1}
.final .cta{margin-top:26px}
@media (min-width:900px){
  .final{display:grid;align-items:center;flex-direction:initial;min-height:min(56.25vw,880px);padding:var(--sec-y) 0}
  .final__bg{position:absolute;inset:0;z-index:-1;margin:0}
  .final__bg img{width:100%;height:100%;object-fit:cover;object-position:62% 50%;-webkit-mask-image:none;mask-image:none}
  .final::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--paper) 0,rgba(251,245,236,0) 16%),linear-gradient(90deg,rgba(251,245,236,.95) 0,rgba(251,245,236,.86) 30%,rgba(251,245,236,.4) 46%,rgba(251,245,236,0) 58%),linear-gradient(0deg,var(--dawn) 0,rgba(247,217,191,0) 16%)}
  .final__in{grid-template-columns:minmax(0,640px)}
  .final h2{font-size:clamp(48px,5.4vw,84px)}
}
.foot{background:var(--dawn)}
/* demo: the snapped photo, big */
.typed__shot{width:200px;height:200px}
.typed__shot picture{display:block;width:100%;height:100%}
.dawn .window__cap,.still330 figcaption{left:50%;right:auto;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);padding:6px 12px;border-radius:99px;background:rgba(14,11,16,.72);color:#f3ece2;text-shadow:none}
@supports (backdrop-filter:blur(1px)){.dawn .window__cap,.still330 figcaption{backdrop-filter:blur(6px)}}

/* ═══ round 7 ═══ */
html{background:linear-gradient(180deg,var(--night) 0,var(--night) 60%,var(--dawn) 60%)}
html.js .result:not(.is-in){transition-duration:.14s}
html:not(.js) .bubble{display:none}
@media (min-width:900px){.demo__grid{align-items:center}}
/* desktop hero: bigger, lower scene so the lamp light reaches the words and the dead floor is cropped */
@media (min-width:1000px){
  .hero__box{width:max(100%,196vh,1218px);transform:translateY(-45%)}
  .hero__copy{width:min(42vw,620px)}
  .hero__bar{width:min(34vw,500px)}
}
/* 1:20 — the same kitchen: Ponya reads yesterday's diary; the list continues on the lamp-lit walnut */
.food{padding-top:0;background:linear-gradient(180deg,#1a110c 0,#1c120c 50%,#170f0a 100%)}
.food__band{position:relative;isolation:isolate}
.food__img img{display:block;width:100%;height:auto}
.food__band::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(23,17,13,.85) 0,rgba(23,17,13,0) 18%,rgba(26,17,12,0) 70%,#1a110c 100%)}
.food__head{position:relative;z-index:1;margin-top:-28px}
.food .log__day{margin-top:36px}
@media (min-width:900px){
  .food__band::after{background:linear-gradient(90deg,#16100b 0,rgba(22,16,11,.9) 26%,rgba(22,16,11,0) 46%),linear-gradient(180deg,rgba(23,17,13,.9) 0,rgba(23,17,13,0) 16%,rgba(26,17,12,0) 72%,#1a110c 100%)}
  .food__head{position:absolute;z-index:1;inset:0;margin:0 auto;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:left;padding-top:24px}
  .food__head>*{max-width:min(38vw,520px)}
  .food .stamp{justify-content:flex-start}
  .food__head .lede{margin-inline:0}
  .food .log__day{margin-top:8px}
}
/* 2:00 — the phones sit on the same walnut counter, lit by the lamp */
.screens{background:radial-gradient(50% 42% at 50% 62%,rgba(242,170,96,.16),transparent 72%),linear-gradient(180deg,#170f0a 0,#1a110c 60%,#140d09 100%)}
.shelf ol::before{height:44px;top:calc(var(--top) - 2px);background:linear-gradient(180deg,#8a6446 0,#6b4a33 2px,#4e3524 10px,#3a2719 22px,#24180f 100%);box-shadow:0 30px 50px rgba(0,0,0,.7)}
.phone{border-radius:44px 44px 0 0;-webkit-mask-image:linear-gradient(180deg,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,#000 82%,transparent 100%)}
.shelf li::after{top:calc(var(--top) - 12px);height:22px;background:radial-gradient(closest-side,rgba(0,0,0,.9),rgba(0,0,0,.35) 60%,transparent)}
.shelf li::before{content:"";position:absolute;z-index:-1;left:-10%;right:-10%;top:calc(var(--top) - 70px);height:90px;background:radial-gradient(closest-side,rgba(242,170,96,.14),transparent)}
@media (min-width:1000px){.shelf{--sw:min(270px,calc((min(100vw,var(--max)) - 3 * 36px) / 4.1));-webkit-mask-image:none;mask-image:none;padding-left:var(--gutter)}.shelf ol{margin:0 auto;gap:36px}}
/* 6:20 — full-width window, feathered top and bottom; the dawn gradient happens through the image */
.trust{--ih:clamp(300px,52vw,700px);--pt:calc(var(--sec-y) * .4);--ie:calc(var(--pt) + var(--ih));background:linear-gradient(180deg,transparent 0,transparent calc(var(--ie) - var(--ih) * .34),#3a2a2c calc(var(--ie) - var(--ih) * .3),#b98a7a calc(var(--ie) - var(--ih) * .12),#ecd2bb var(--ie),var(--paper) calc(var(--ie) + var(--dg) * .5),var(--paper) 100%)}
.dawn{width:100%;margin:0 0 calc(var(--dg) * .6);padding-top:var(--pt)}
.dawn__img img{width:100%;height:var(--ih);object-fit:cover;object-position:60% 55%;border-radius:0!important;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 62%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 62%,transparent 100%)}
.dawn .window__cap{bottom:36%}
/* credits fit their content; tighter run into 6:40 */
@media (min-width:900px){.trust__grid{align-items:start}}
.trust .wrap{padding-bottom:calc(var(--sec-y) * .5)}
.faq{padding-top:calc(var(--sec-y) * .7)}
/* sunrise: the picture first, words on its calm lower part (cream scrim) — phones too */
@media (max-width:899px){
  .final{padding-top:0}
  .final__bg{order:0;position:relative;margin:0}
  .final__bg img{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%);mask-image:linear-gradient(180deg,transparent 0,#000 12%)}
  .final__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(251,245,236,0) 74%,rgba(251,245,236,.9) 92%,var(--paper) 100%)}
  .final__in{order:1;margin-top:-12vw;padding-bottom:var(--sec-y)}
}
@media (min-width:900px){.final__bg{z-index:-2}}
/* mobile hero: CTA inside the first screen — clock rides on the photo, shorter crop */
@media (max-width:699px){
  .hero__tools{margin:12px 0 -52px;align-self:flex-end;z-index:4}
  .hero__photo{aspect-ratio:10/9;margin-top:10px}
  .hero__box{transform:translateY(-22%)}
  .hero__slot{margin-top:-40px}
  .hero__bar{margin-top:16px}
  .hero__desc{margin-bottom:12px}
}
/* the lamp cools as the night goes on */
.sky::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(60,80,140,.0),rgba(60,80,140,.08));opacity:var(--t,0)}
.shelf figcaption{margin-top:60px}
@media (max-width:899px){.food__head{margin-top:6px}}
/* ═══ round 8 ═══ */
/* demo: top-aligned, fixed-height panel; the result reveals in sequence after typing */
@media (min-width:900px){
  .demo__grid{align-items:start}
  .sheet{display:flex;flex-direction:column;min-height:640px}
  .sheet__save{margin-top:auto}
  .typed.has-photo{flex-direction:row;text-align:left;align-items:center;gap:14px;padding:12px}
  .typed__shot{width:132px;height:132px;flex:none}
  .result{min-height:0}
}
.typed{min-height:66px}
html.js .result>*{opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .45s var(--ease)}
html.js .result.is-in>*{opacity:1;transform:none}
.result.is-in>:nth-child(2){transition-delay:.12s}
.result.is-in>:nth-child(3){transition-delay:.24s}
.result.is-in>:nth-child(4){transition-delay:.36s}
html.js .result:not(.is-in)>*{transition-duration:.12s;transition-delay:0s}
html.js .result:not(.is-in){opacity:1;transform:none}
/* hero card: numbers arrive after the message, one by one */
html.js .hcard__title{opacity:clamp(0,calc((var(--p) - .58) * 14),1)}
html.js .hcard__total,html.js .hcard__range{opacity:clamp(0,calc((var(--p) - .64) * 12),1)}
html.js .hcard__items{opacity:clamp(0,calc((var(--p) - .72) * 12),1)}
/* phones: one size, one fade line, one caption baseline */
.shelf li.is-hero{--k:1}
.shelf li{padding-top:0}
.shelf{--top:calc(var(--sw) * 1.315 + 22px)}
.shelf figcaption{margin-top:60px;min-height:3em}
/* mobile hero: the clock sits above the card, clear of the lamp */
@media (max-width:699px){
  .hero__tools{order:0;align-self:flex-end;margin:-58px 0 6px;z-index:4}
  .hero__slot{margin-top:0}
}
/* morning: privacy · credits + the 6:30 mug still */
.mug{margin:0;border-radius:22px;overflow:hidden;box-shadow:0 20px 50px rgba(42,27,20,.12)}
.mug img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
@media (min-width:900px){.trust__grid{grid-template-areas:"priv cred" "priv mug" "note note"}.privacy{grid-area:priv}.founder{grid-area:cred}.mug{grid-area:mug}.trust__grid .note{grid-area:note}}
/* sunrise: crop off the lamp entirely on desktop — no bleed, nothing cut under the nav */
@media (min-width:900px){
  .final{min-height:min(42vw,720px)}
  .final__bg img{object-position:62% 100%}
  .final::before{background:linear-gradient(90deg,rgba(251,245,236,.95) 0,rgba(251,245,236,.86) 30%,rgba(251,245,236,.4) 46%,rgba(251,245,236,0) 58%),linear-gradient(0deg,var(--dawn) 0,rgba(247,217,191,0) 16%)}
  .foot__morning{padding-top:88px}
}
/* hero copy lower; VI measure tighter */
@media (min-width:1000px){
  .hero__copy{top:max(calc(var(--nav) + 8vh),calc(50% - 150px))}
  .hero__bar{top:calc(max(calc(var(--nav) + 8vh),calc(50% - 150px)) + 236px)}
  .lang-vi .hero__copy{width:min(calc(42vw - 40px),580px)}
}
/* 5:15 first light warms the bottom edge */
.trend{background:radial-gradient(70% 40% at 60% 100%,rgba(232,150,110,.16),transparent 70%)}
/* skeleton while Ponya reads what you typed */
html.js .result{background-repeat:no-repeat;transition:background-color .2s}
html.js .result:not(.is-in){background-image:linear-gradient(#ece0cf,#ece0cf),linear-gradient(#ece0cf,#ece0cf),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#ece0cf,#ece0cf);background-size:34% 10px,22% 44px,100% 88px,100% 88px,100% 8px;background-position:4px 18px,4px 38px,0 112px,0 210px,0 318px}
@media (max-width:699px){.clock{box-shadow:none}.hero__tools{margin-bottom:10px}}
/* 6:30 mug still: right column beside privacy + credits; after privacy on phones */
.mug img{aspect-ratio:auto;height:auto}
@media (max-width:899px){.trust__grid{display:flex;flex-direction:column}.privacy{order:1}.mug{order:2}.founder{order:3}.trust__grid .note{order:4}.mug img{aspect-ratio:4/5;object-fit:cover}}
@media (min-width:900px){.trust__grid{grid-template-areas:"priv mug" "cred mug" "note note";grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:stretch}.mug{align-self:stretch;position:relative;min-height:420px}.mug picture,.mug img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 70%}.founder{align-self:start}}
/* ═══ round 9 ═══ */
/* header: solid enough everywhere, tone from the section beneath */
.nav.is-scrolled[data-tone=night]{background:rgba(20,14,11,.9)}
.nav.is-scrolled[data-tone=day]{background:rgba(251,245,236,.94)}
@supports (backdrop-filter:blur(1px)){.nav.is-scrolled{backdrop-filter:blur(22px) saturate(1.3)}}
@media (max-width:699px){.nav.is-scrolled[data-tone=night]{background:rgba(20,14,11,.95)}.nav.is-scrolled[data-tone=day]{background:rgba(251,245,236,.97)}}
/* 2:00 — four phones on walnut stands; the real app screens sit in the glass */
.screens{padding-bottom:var(--sec-y)}
.phones{margin-top:36px;overflow-x:auto;scrollbar-width:none}
.phones::-webkit-scrollbar{display:none}
.phones__band{position:relative;width:100%}
.phones__img img{display:block;width:100%;height:auto;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 86%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 86%,transparent 100%)}
.scr{position:absolute;top:32.44%;width:10.54%;height:47.47%;border-radius:12%/6.3%;overflow:hidden;box-shadow:0 0 22px rgba(242,190,130,.16)}
.scr img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0;filter:brightness(.9) saturate(.95)}
.scr::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(200deg,rgba(255,236,210,.16) 0,rgba(255,236,210,0) 34%),linear-gradient(0deg,rgba(40,20,8,.18),rgba(40,20,8,0) 40%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
.scr--1{left:20.08%}.scr--2{left:35.10%}.scr--3{left:50.13%}.scr--4{left:65.09%}
.phones__caps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:20px;font-size:14.5px;line-height:1.4;color:var(--fg)}
.phones__caps span{display:block;margin-bottom:4px;font:600 13.5px/1 var(--sans);color:var(--lamp)}
@media (min-width:900px){.phones__caps{padding-left:calc(20.08vw - var(--gutter));padding-right:calc(24.37vw - var(--gutter));max-width:none;gap:4.5vw}}
@media (max-width:899px){
  .phones__band{width:1000px}
  .phones{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 60px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 60px),transparent);scroll-snap-type:x proximity}
  .phones__caps{grid-template-columns:1fr 1fr;gap:16px 20px}
}
/* demo: Ponya tucked into the sheet header; cream skeleton with a shimmer; the snapped photo, big */
.sheet__ponya{left:auto!important;right:14px!important;top:10px!important;width:40px!important;transform:none!important;z-index:1!important}
.sheet__ponya img{border-radius:50%}
html.js .result:not(.is-in){background-image:linear-gradient(#efe4d4,#efe4d4),linear-gradient(#efe4d4,#efe4d4),linear-gradient(#f4ebdf,#f4ebdf),linear-gradient(#f4ebdf,#f4ebdf),linear-gradient(#efe4d4,#efe4d4)}
.result{position:relative;overflow:hidden;border-radius:12px}
html.js .result:not(.is-in)::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,250,242,.7) 50%,transparent 70%);animation:shimmer 1.3s linear infinite}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.typed.has-photo{flex-direction:column!important;align-items:stretch!important;text-align:left!important}
.typed.has-photo .typed__shot{width:100%;height:190px}
.typed__shot .typed__photo{object-fit:cover;object-position:50% 30%}
.det{display:none;position:absolute;z-index:1;padding:3px 8px;border-radius:6px;background:rgba(251,245,236,.92);color:var(--ink);font:600 11.5px/1.2 var(--sans);font-style:normal;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.has-photo .det{display:block}
.det::before{content:"";position:absolute;inset:auto;border:1.5px solid rgba(251,245,236,.85);border-radius:10px}
.det--a{left:34%;top:56%}
.det--b{right:4%;top:6%}
.typed__shot::after{display:none}
/* 5:15 → 6:20: one continuous tone; window feathered on every edge */
.trend{background:linear-gradient(180deg,transparent 60%,rgba(40,30,45,.0) 100%)}
.dawn__img img{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 62%,transparent 100%),linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 62%,transparent 100%),linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);mask-composite:intersect}
@media (max-width:699px){
  .trust{--ih:min(134vw,600px)}
  .dawn__img img{object-position:50% 40%;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 70%,transparent 100%)}
  .dawn .window__cap{left:16px;transform:none;bottom:31%}
}
/* mobile hero clock: compact, clear of the paw */
@media (max-width:699px){.clock{padding:4px 4px 4px 10px;gap:6px}.clock__d{font-size:17px;width:3.1em}.clock__s{font-size:9px}.play{width:34px;height:34px;min-height:34px}.hero__tools{margin:-50px 0 8px}}
.screens{background:radial-gradient(50% 30% at 50% 45%,rgba(242,170,96,.12),transparent 72%),linear-gradient(180deg,#170f0a 0,#1a110c 55%,rgba(20,13,9,.9) 75%,rgba(20,13,9,0) 100%)}
@media (max-width:699px){.dawn .window__cap{bottom:auto;top:calc(var(--pt) + 16%)}}
/* ═══ round 10 ═══ */
/* 2:00 — band scaled up so the screens read; captions sit in the same warm light */
.screens{padding-bottom:0;background:radial-gradient(50% 30% at 50% 45%,rgba(242,170,96,.12),transparent 72%),linear-gradient(180deg,#170f0a 0,#1a110c 70%,#1a110c 100%)}
.phones{overflow:hidden;margin-top:28px}
.phones__band{width:120%;margin-left:-7.4%}
.phones__img img{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 90%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 90%,transparent 100%)}
.scr img{filter:none}
.scr::after{background:linear-gradient(200deg,rgba(255,236,210,.14) 0,rgba(255,236,210,0) 30%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.3)}
.phones__caps{margin:-1.5vw 0 0;padding:0 0 calc(var(--sec-y) * .9) 16.7vw;max-width:none;grid-template-columns:repeat(4,12.65vw);gap:5.35vw;background:linear-gradient(180deg,#1a110c 0,#1a110c 70%,rgba(26,17,12,0) 100%)}
.shelf__note{margin:0 auto;padding:0 var(--gutter) calc(var(--sec-y) * .8);text-align:center;font-size:12.5px;color:var(--fg2)}
.phones__caps+.shelf__note{margin-top:calc(var(--sec-y) * -.6)}
@media (max-width:899px){
  .phones{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-mask-image:none;mask-image:none;height:calc(588vw * .4242 * .6)}
  .phones__band{width:588vw;margin:calc(588vw * .4242 * -.24) 0 0}
  .scr{scroll-snap-align:center}
  .phones__caps{display:none}
  .phones__img img{-webkit-mask-image:none;mask-image:none}
}
/* demo: card sized to content, left column centred; on phones the result comes before the chips */
@media (min-width:900px){.demo__grid{align-items:center}.sheet{min-height:0}}
@media (max-width:899px){
  .demo__copy{display:contents}
  .demo__grid{display:flex;flex-direction:column;gap:0}
  .demo .stamp,.demo h2,.demo .lede{order:1}
  .sheet{order:2;margin:28px 0 8px}
  .modes{order:3}.try{order:4}.demo__note{order:5}
}
/* hero: the bowl sits in the lit area, above the floor fade */
@media (min-width:1000px){
  .hero__box{transform:translateY(-54%)}
  .hero__photo::after{background:linear-gradient(90deg,var(--night) 0,rgba(23,17,13,.94) 20%,rgba(23,17,13,.62) 33%,rgba(23,17,13,0) 46%),linear-gradient(0deg,var(--night) 0,rgba(23,17,13,.7) 5%,rgba(23,17,13,0) 13%),linear-gradient(180deg,rgba(23,17,13,.7) 0,rgba(23,17,13,0) 14%)}
}
html.js:not(.rm) .bubble:not(.is-done) .caret{display:inline-block!important}
/* 6:30 — a still-life detail on desktop */
@media (min-width:900px){.mug picture,.mug img{object-position:50% 60%}}
@media (min-width:900px){.phones__band{margin-top:-9%}.phones{margin-top:0}}
.screens{background:radial-gradient(50% 30% at 50% 45%,rgba(242,170,96,.12),transparent 72%),linear-gradient(180deg,#170f0a 0,#1a110c 78%,rgba(26,17,12,0) 100%)}
.phones__caps{background:none}
@media (max-width:899px){.phones__caps+.shelf__note{margin-top:14px}}
/* ═══ round 11 — screens finished with real app UI; band fits one viewport ═══ */
.scr{container-type:inline-size;display:flex;flex-direction:column;background:#F9F6F1}
.scr picture{flex:none}
.scr img{height:auto!important;object-fit:fill}
.scr--widget{background:#F3D3BF}
.ui{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:2.6cqw;padding:0 3.2cqw 3.6cqw;font-family:var(--sans);color:#2A1B14;min-height:0;position:relative;z-index:1}
.ui::before{content:"";position:absolute;left:0;right:0;top:-7cqw;height:7cqw;background:linear-gradient(180deg,rgba(249,246,241,0),#F9F6F1)}
.ui--home::before{background:linear-gradient(180deg,rgba(243,211,191,0),#F3D3BF)}
.ui-save{margin:0 -3.2cqw -3.6cqw;padding:3cqw 4cqw 5cqw;background:#FBF8F3;border-top:.3cqw solid #ECE3D8;display:grid;gap:2.6cqw}
.ui-also{display:flex;align-items:center;gap:2.2cqw;font-size:3.7cqw;font-weight:400;color:#3a2a20}
.ui-cb{display:inline-grid;place-items:center;width:4.6cqw;height:4.6cqw;border:.4cqw solid #8a7766;border-radius:1cqw}
.ui-cb svg{display:none}
.ui-pill{display:flex;align-items:center;justify-content:center;gap:1.6cqw;height:12cqw;border-radius:99px;background:#D97954;color:#2A1B14;font-size:4.6cqw;font-weight:600;box-shadow:0 1.4cqw 3cqw rgba(217,121,84,.25)}
.ui-pill svg{width:4.2cqw;height:4.2cqw;padding:.6cqw;border-radius:50%;background:rgba(42,27,20,.75);color:#D97954}
.ui-card{background:#fff;border-radius:4cqw;padding:3.4cqw 4cqw;box-shadow:0 .4cqw 1.6cqw rgba(42,27,20,.06)}
.ui-card--tail{margin-top:-1cqw;border-radius:0 0 4cqw 4cqw;padding-top:1cqw}
.ui-rough{display:flex;align-items:center;gap:1.6cqw;font-size:3.5cqw;font-weight:600;color:#9a5b12}
.ui-rough i{width:2cqw;height:2cqw;border-radius:50%;background:#D9963A}
.ui-note{font-size:3.3cqw;color:#6B5547;margin-top:.8cqw}
.ui-after p{display:flex;justify-content:space-between;font-size:3.4cqw;color:#6B5547}
.ui-after b{color:#2A1B14;font-weight:600}
.ui-bar{display:block;height:1.4cqw;border-radius:9px;background:#EADCC8;margin-top:1.8cqw}
.ui-bar i{display:block;width:76%;height:100%;border-radius:inherit;background:#D97954}
.ui-label{font-size:3.2cqw;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#6B5547}
.ui-bars{display:flex;align-items:flex-end;gap:1.6cqw;height:30cqw;margin-top:2.4cqw}
.ui-b{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:.8cqw}
.ui-b em{font-style:normal;font-size:2.4cqw;font-weight:600}
.ui-b i{display:block;width:100%;border-radius:1.4cqw;background:#3F7A6B}
.ui-b--b i{background:#CBBBA5}
.ui-b small{font-size:2.6cqw;color:#6B5547}
.ui-b--today i{height:6cqw;border:.4cqw dashed #6B5547;background:none}
.ui-b--today small{font-weight:700;color:#2A1B14}
.ui-b:nth-child(1) i{height:15cqw}.ui-b:nth-child(2) i{height:14.3cqw}.ui-b:nth-child(3) i{height:14cqw}.ui-b:nth-child(4) i{height:20cqw}.ui-b:nth-child(5) i{height:16.3cqw}.ui-b:nth-child(6) i{height:14.6cqw}
.ui-tab{display:flex;justify-content:space-between;align-items:flex-end;margin:0 -3.2cqw -3.6cqw;padding:2.4cqw 4cqw 5.4cqw;background:#FAF7F2;border-top:.3cqw solid #ECE3D8}
.ui-tab span{display:flex;flex-direction:column;align-items:center;gap:1cqw;font-size:2.8cqw;font-weight:600;color:#6B5547}
.ui-tab span.is-on{color:#2A1B14}
.ui-ic{display:block;width:5.4cqw;height:5.4cqw;border-radius:1.2cqw;background:#CDBBA8}
.ui-tab .is-on .ui-ic{background:#D97954}
.ui-ic--home{border-radius:2.6cqw 2.6cqw 1cqw 1cqw}
.ui-ic--history,.ui-ic--profile{border-radius:50%}
.ui-tab__log{margin-top:-5cqw}
.ui-tab__log i{display:grid;place-items:center;width:11cqw;height:11cqw;border-radius:50%;background:#D97954;color:#2A1B14;font-style:normal;font-size:7cqw;font-weight:400;line-height:1;box-shadow:0 0 0 1.4cqw #FAF7F2}
.ui--home{gap:0;padding:0 7cqw 4cqw}
.ui-icons{display:grid;grid-template-columns:repeat(4,1fr);gap:5.6cqw 7cqw;margin-bottom:auto;padding-top:5cqw}
.ui-icons i,.ui-dock i{display:block;aspect-ratio:1;border-radius:4.4cqw;background:rgba(255,255,255,.34);box-shadow:inset 0 0 0 .3cqw rgba(255,255,255,.25)}
.ui-dock{display:grid;grid-template-columns:repeat(4,1fr);gap:7cqw;margin:0 -3cqw;padding:3.6cqw 5cqw;border-radius:7cqw;background:rgba(255,255,255,.28)}
.ui-dock i{background:rgba(255,255,255,.5)}
.scr::after{z-index:2}
/* band: one viewport tall at most, centred on the phones, dark continuing to the edges */
.phones{--bw:min(120vw,calc((100svh - 200px) / .386));position:relative;overflow:hidden;margin:0;height:calc(var(--bw) * .4242 * .93)}
.phones__band{position:absolute;top:calc(var(--bw) * .4242 * -.07);left:calc(50% - var(--bw) * .4785);width:var(--bw)!important;margin:0!important}
.phones__img img{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(180deg,transparent 0,#000 14%,#000 84%,transparent 96%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(180deg,transparent 0,#000 14%,#000 84%,transparent 96%);mask-composite:intersect}
.phones__cap{position:absolute;top:86%;width:12.5%;margin:0;font-size:clamp(12.5px,.62vw + 4px,15px);line-height:1.35;color:var(--cream)}
.phones__cap span{display:block;margin-bottom:3px;font:600 clamp(12px,.55vw + 4px,14px)/1.2 var(--sans);color:var(--lamp)}
.phones__cap--1{left:20.08%}.phones__cap--2{left:35.10%}.phones__cap--3{left:50.13%}.phones__cap--4{left:65.09%}
.phones__caps{display:none}
.shelf__note,.phones__caps+.shelf__note{margin:6px auto 0}
@media (max-width:1099px){
  .phones{--bw:min(217vw,330vh);height:calc(var(--bw) * .4242 * .93);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory}
  .phones__band{left:0}
  .scr{scroll-snap-align:none}
  .scr--2,.scr--3{scroll-snap-align:center}
}
@media (max-width:699px){
  .phones{--bw:588vw}
  .scr{scroll-snap-align:center}
  .phones__cap{font-size:13px}
}
.phones{--ct:.07;--cv:.93;height:calc(var(--bw) * .4242 * var(--cv))}
.phones__band{top:calc(var(--bw) * .4242 * var(--ct) * -1)}
@media (max-width:1099px){.phones{--ct:.2;--cv:.78}}
@media (max-width:699px){.phones{--ct:.27;--cv:.71}}
/* sunrise: wall side fully covered by cream; long fade into the footer painted above the photo */
@media (min-width:900px){
  .final::before{z-index:-1;background:linear-gradient(90deg,var(--paper) 0,var(--paper) 18%,rgba(251,245,236,.9) 30%,rgba(251,245,236,.45) 46%,rgba(251,245,236,0) 58%),linear-gradient(0deg,var(--dawn) 0,rgba(247,217,191,.85) 10%,rgba(247,217,191,0) 32%)}
  .final__bg{z-index:-2}
  .foot{margin-top:-1px}
}
@media (max-width:899px){.final__bg::after{background:linear-gradient(180deg,rgba(251,245,236,0) 74%,rgba(251,245,236,.9) 92%,var(--paper) 100%)}.foot{background:linear-gradient(180deg,var(--paper) 0,var(--dawn) 120px)}}
/* 6:30 mug: whole Ponya, face always in frame */
@media (min-width:900px){.mug picture,.mug img{object-position:50% 35%!important}}
/* 6:20 caption: on the sill, bottom-left, never over the face */
.dawn .window__cap{left:24%!important;right:auto!important;bottom:38%!important;top:auto!important;transform:none!important}
@media (max-width:699px){.dawn .window__cap{left:16px!important;bottom:31%!important}}
/* demo: photo slot reserved — the panel never changes height between chips */
.typed{min-height:0}
.sheet{min-height:var(--sheet-h,auto);display:flex;flex-direction:column}.sheet__save{margin-top:auto}
.typed__shot{height:190px}
.nw{white-space:nowrap}
@media (min-width:900px){.final::before{background:linear-gradient(0deg,var(--dawn) 0,rgba(247,217,191,.9) 9%,rgba(247,217,191,0) 30%),linear-gradient(90deg,var(--paper) 0,var(--paper) 18%,rgba(251,245,236,.9) 30%,rgba(251,245,236,.45) 46%,rgba(251,245,236,0) 58%)}}
@media (min-width:700px) and (max-width:999px){.hero__slot{width:300px!important;margin-right:calc(var(--gutter) * .5)!important}}
/* 1000–1199: copy left, Ponya centre-right, clock top-right, card bottom-right (face and bowl clear) */
@media (min-width:1000px) and (max-width:1199px){
  .hero__box{width:max(1376px,179.2vh);right:-323px;transform:translateY(-50%)}
  .hero__copy{width:400px}
  .h1a{font-size:34px}.h1b,.lang-vi .h1b{font-size:64px}
  .hero__bar{width:400px;top:calc(max(calc(var(--nav) + 8vh),calc(50% - 150px)) + 200px)}
  .hero__slot{top:auto!important;bottom:28px;width:272px!important}
  .hcard__items{display:none}
  .hero__photo::after{background:linear-gradient(90deg,var(--night) 0,rgba(23,17,13,.94) 30%,rgba(23,17,13,.5) 40%,rgba(23,17,13,0) 48%),linear-gradient(0deg,rgba(23,17,13,.6) 0,rgba(23,17,13,0) 18%)}
}
/* ═══ round 12 ═══ */
/* screens: 12px fade at the join; Iced Coffee card; chart ends the stats screen */
.scr picture img{-webkit-mask-image:linear-gradient(0deg,transparent 0,#000 12px);mask-image:linear-gradient(0deg,transparent 0,#000 12px)}
.scr--addons picture img{-webkit-mask-image:none;mask-image:none}
.ui::before{display:none}
.ui{justify-content:flex-start;padding-top:2.6cqw}
.ui-save{margin-top:auto}
.scr--stats .ui{justify-content:flex-start}
.ui-item__top{display:flex;justify-content:space-between;font-size:4.2cqw}
.ui-item__top b{font-weight:600}.ui-item__top small{font-weight:400;font-size:3cqw;color:#6B5547}
.ui-sure{display:flex;align-items:center;gap:1.4cqw;margin-top:1cqw;font-size:3.1cqw;color:#5E463A}
.ui-sure i{width:1.8cqw;height:1.8cqw;border-radius:50%;background:#5E463A}
.ui-card--tail{margin-top:-2.6cqw;box-shadow:0 .4cqw 1.6cqw rgba(42,27,20,.06)}
.ui-week{flex:1;display:flex;flex-direction:column}
.ui-week .ui-bars{flex:1;height:auto;min-height:24cqw}
.ui-b--b i{background:#CDBBA5}
/* demo: no reserved height on desktop; on phones a dashed photo slot keeps the card steady */
@media (min-width:900px){.sheet{min-height:0!important}.demo__grid{align-items:start}.demo__copy{padding-top:40px}}
@media (max-width:899px){
  .typed{flex-direction:column!important;align-items:stretch!important;text-align:left!important}
  .typed__shot{display:grid!important;width:100%;height:150px;place-items:center;cursor:pointer}
  .typed:not(.has-photo) .typed__shot{border:1.5px dashed #cdb59b;border-radius:14px;background:rgba(255,255,255,.35);box-shadow:none}
  .typed:not(.has-photo) .typed__shot picture,.typed:not(.has-photo) .det{display:none}
  .typed:not(.has-photo) .typed__shot::before{content:"\2295\00a0 " attr(data-snap);font:600 14px/1 var(--sans);color:#6B5547}
  .typed.has-photo .typed__shot{height:150px}
}
/* tablet hero (1000–1199): words + the 1am card in the left column; Ponya whole on the right; clock clear of the cord */
@media (min-width:1000px) and (max-width:1199px){
  .hero__box{right:-260px}
  .hero__copy{top:calc(var(--nav) + 40px)!important}
  .hero__slot{left:var(--gutter);right:auto!important;top:calc(var(--nav) + 190px)!important;bottom:auto!important;width:330px!important}
  .bubble{display:none}
  html.js .hcard{opacity:1;transform:none}
  .hcard{padding:14px 16px 12px}
  .hcard__total b{font-size:44px}
  .hero__bar{top:calc(var(--nav) + 440px)!important}
  .hero__photo::after{background:linear-gradient(90deg,var(--night) 0,rgba(23,17,13,.94) 36%,rgba(23,17,13,.5) 44%,rgba(23,17,13,0) 52%),linear-gradient(0deg,rgba(23,17,13,.5) 0,rgba(23,17,13,0) 14%)}
}
/* carousel hint: 4 dots under the band (820–1099) */
.phones__dots{display:none}
@media (min-width:700px) and (max-width:1099px){.phones__dots{display:flex;justify-content:center;gap:8px;margin:10px 0 0}.phones__dots i{width:7px;height:7px;border-radius:50%;background:rgba(246,237,224,.3)}.phones__dots i:nth-child(-n+3){background:var(--lamp)}}
/* desktop: less empty backdrop above the phones */
@media (min-width:1100px){.phones{--ct:.17;--cv:.83}.screens .wrap{position:relative;z-index:1}}
/* sunrise fade starts lower so the paws stay crisp */
@media (min-width:900px){.final::before{background:linear-gradient(0deg,var(--dawn) 0,rgba(247,217,191,.9) 5%,rgba(247,217,191,0) 26%),linear-gradient(90deg,var(--paper) 0,var(--paper) 18%,rgba(251,245,236,.9) 30%,rgba(251,245,236,.45) 46%,rgba(251,245,236,0) 58%)}}
@media (min-width:1000px) and (max-width:1199px){.hero__tools{right:16px!important;top:calc(var(--nav) + 14px)!important}.clock__d{font-size:30px}}
.screens .shelf__note{padding-bottom:0}.screens+.friend{padding-top:calc(var(--sec-y) * .7)}
/* ═══ round 13 ═══ */
/* screen 1: Iced Coffee card built like the Phở card */
.ui-item{padding:3cqw 3.6cqw 2.8cqw;border-radius:3.6cqw}
.ui-item__top{align-items:baseline;font-size:4cqw}
.ui-item__top>b{font-weight:700}
.ui-item__top span b{font-weight:700;font-size:4cqw}
.ui-x{font-style:normal;font-weight:400;font-size:3.6cqw;color:#9a8878;margin-left:1.6cqw}
.ui-sub{font-size:2.9cqw;line-height:1.35;color:#2A1B14}
.ui-item .ui-sure{font-size:2.8cqw;margin-top:.4cqw}
.ui-portions{display:flex;align-items:center;gap:1.6cqw;margin-top:2.4cqw}
.ui-portions i{font-style:normal;font-size:2.8cqw;font-weight:600;padding:1.2cqw 2.4cqw;border-radius:99px;background:#F3EDE4;color:#2A1B14}
.ui-portions i.is-on{background:#24170f;color:#fff}
.ui-portions em{margin-left:auto;font-style:normal;font-size:3cqw;font-weight:600}
/* screen 2: close the fried-chicken card, 8px gap, then the next card */
.ui-cardend{display:block;height:3cqw;margin:-2.6cqw 0 0;background:#F6F3EE;border-radius:0 0 4cqw 4cqw;box-shadow:0 .8cqw 1.4cqw rgba(42,27,20,.06)}
.scr--addons .ui{gap:2.2cqw}
.scr--addons picture img{-webkit-mask-image:linear-gradient(0deg,rgba(0,0,0,.0) 0,#000 10px);mask-image:linear-gradient(0deg,rgba(0,0,0,.0) 0,#000 10px)}
.scr--addons .ui-cardend{background:#F4F1EC}
/* screen 4: a weekly widget, one icon row and a dock that clears the rounded corners */
.ui-wk{margin:3cqw 0 0;padding:4cqw;border-radius:6cqw;background:rgba(42,27,20,.82);color:#fff}
.ui-wk .ui-label{color:rgba(255,255,255,.7)}
.ui-wk__v{font-size:3.4cqw;margin-top:1cqw}.ui-wk__v b{font-size:7cqw;font-weight:700}.ui-wk__v span{color:#8DB898;font-weight:600;margin-left:1.6cqw}
.ui-wk__bars{display:flex;align-items:flex-end;gap:2cqw;height:10cqw;margin-top:2cqw}
.ui-wk__bars i{flex:1;border-radius:1cqw;background:#D97954}
.ui-wk__bars .h0{height:60%}.ui-wk__bars .h1{height:54%}.ui-wk__bars .h2{height:52%}.ui-wk__bars .h3{height:78%}.ui-wk__bars .h4{height:64%}.ui-wk__bars .h5{height:56%}.ui-wk__bars .h6{height:30%;background:rgba(255,255,255,.35)}
.ui--home{padding:0 6cqw 9cqw}
.ui-icons{margin:5cqw 0 auto;padding-top:0}
.ui-dock{margin:0 -1cqw;border-radius:8cqw}
/* every photographic band fades into its neighbour — no hard straight edges */
.food__img img{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 clamp(120px,14vw,240px),#000 82%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 clamp(120px,14vw,240px),#000 82%,transparent 100%)}
.phones{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 clamp(80px,9vw,180px),#000 calc(100% - 60px),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 clamp(80px,9vw,180px),#000 calc(100% - 60px),transparent 100%)}
@media (min-width:900px){
  .final__bg img{object-position:62% 62%}
  .final::after{content:"";position:absolute;inset:0 0 auto;height:clamp(120px,12vw,220px);z-index:-1;background:linear-gradient(180deg,var(--paper),rgba(251,245,236,0));pointer-events:none}
}
/* 3:30: full-bleed still with soft edges */
.still330{width:100vw!important;max-width:none!important;margin:34px 0 0 calc(50% - 50vw)!important}
.still330__img img{aspect-ratio:21/9!important;border-radius:0!important;object-position:50% 58%!important;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%),linear-gradient(180deg,transparent 0,#000 16%,#000 80%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%),linear-gradient(180deg,transparent 0,#000 16%,#000 80%,transparent 100%);mask-composite:intersect}
.still330::after{display:none}
@media (max-width:699px){.still330__img img{aspect-ratio:4/5!important;object-position:52% 50%!important}}
.still330 figcaption{bottom:12%}
/* hero aligned to the nav container at wide screens */
@media (min-width:1000px){
  .hero__stage{--hx:max(var(--gutter),calc((100vw - var(--max)) / 2))}
  .hero__copy,.hero__bar{left:var(--hx)}
  .hero__tools,.hero__slot{right:var(--hx)}
}
@media (min-width:1000px) and (max-width:1199px){
  .hero__slot{left:var(--hx)}
  .hero__tools{right:var(--hx)!important;top:calc(var(--nav) + 32px)!important}
}
/* mobile hero: clock between the photo and the card, never on Ponya */
@media (max-width:699px){.hero__tools{margin:10px 0 10px!important;align-self:flex-start}}
/* demo: phones — toggle + chips above the card, photo only in Snap; desktop — both states the same height */
.typed:not(.has-photo) .typed__shot{display:none!important}
@media (max-width:767px){.demo .modes{order:2}.demo .try{order:3}.demo .demo__note{order:4}.sheet{order:5;margin-top:22px}.demo h2,.demo .lede,.demo .stamp{order:1}}
@media (min-width:900px){
  .typed{height:132px;min-height:0;align-items:center}
  .typed__text{font-size:17px}
  .typed.has-photo{flex-direction:row!important;align-items:center!important;gap:14px;padding:12px}
  .typed.has-photo .typed__shot{width:108px!important;height:108px!important;flex:none;display:block!important}
  .det{display:none!important}
}
.typed{transition:background-color .3s}
/* 820–1099: three whole phones + a peek of the fourth */
@media (min-width:700px) and (max-width:1099px){.phones{--bw:calc((100vw - 76px) / .4501)}}
.ui-x{color:#6B5547}
/* ═══ round 14 ═══ */
.mug picture,.mug img{object-position:35% 40%!important}
@media (max-width:899px){.mug img{aspect-ratio:1856/2304!important;object-fit:contain!important}}
@media (min-width:900px){
  .final__bg img{object-position:62% 100%!important}
  .final::after{height:clamp(60px,6vw,110px)}
  .final::before{background:linear-gradient(0deg,var(--dawn) 0,rgba(247,217,191,.7) 3%,rgba(247,217,191,0) 12%),linear-gradient(90deg,var(--paper) 0,var(--paper) 18%,rgba(251,245,236,.9) 30%,rgba(251,245,236,.45) 46%,rgba(251,245,236,0) 58%)!important}
}
/* desktop demo: the slot shows a small dashed photo target in Type mode — no empty half */
@media (min-width:900px){
  .typed:not(.has-photo) .typed__shot{display:grid!important;place-items:center;width:108px!important;height:108px!important;flex:none;border:1.5px dashed #cdb59b;border-radius:12px;background:rgba(255,255,255,.35);box-shadow:none;cursor:pointer}
  .typed:not(.has-photo) .typed__shot picture{display:none}
  .typed:not(.has-photo) .typed__shot::before{content:"\2295\00a0 " attr(data-snap);display:block!important;font:600 13px/1 var(--sans);color:#6B5547}
  .typed:not(.has-photo){gap:14px;padding:12px}
}
.still330 figcaption{bottom:4%!important}
.ui-cardend{height:4cqw;margin-top:-3.2cqw;background:#F6F1E9;border:.35cqw solid #ECE3D8;border-top:0}
.ui--home{padding-bottom:13cqw}
@media (min-width:700px) and (max-width:1099px){.phones{--bw:calc((100vw - 110px) / .4501)}}
@media (min-width:1000px) and (max-width:1199px){.hero__tools{right:auto!important;left:calc(var(--hx) + 420px)!important;top:calc(var(--nav) + 40px)!important}}
.scr--addons picture img{-webkit-mask-image:none!important;mask-image:none!important}
.mug picture,.mug img{object-position:80% 82%!important}
@media (min-width:1000px) and (max-width:1199px){.hero__tools{left:auto!important;right:var(--hx)!important;top:calc(var(--nav) + 18px)!important}}
@media (min-width:1000px) and (max-width:1199px){.play{width:40px;padding:0;justify-content:center}.play__l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.clock__d{font-size:26px}}
@media (min-width:1000px) and (max-width:1199px){.hero__box{right:-210px!important}.hero__tools{top:calc(var(--nav) + 6px)!important}}
/* ═══ round 15 ═══ */
/* demo: indoors — warm lamp-lit dark, no stars; columns centred */
.demo{background:radial-gradient(46% 60% at 72% 50%,rgba(242,170,96,.13),transparent 72%),linear-gradient(180deg,#17110D 0,#1a110c 30%,#1a110c 100%)}
@media (min-width:900px){.demo__grid{align-items:center}.demo__copy{padding-top:0}}
.typed:not(.has-photo) .typed__shot{opacity:.5}
.has-photo .typed__text{font-style:italic;color:var(--ink-2)}
/* night turns gradually: warm kitchen → navy */
.food{background:linear-gradient(180deg,#1a110c 0,#1c120c 50%,#1a110c 100%)}
.screens{background:radial-gradient(50% 30% at 50% 40%,rgba(242,170,96,.12),transparent 72%),linear-gradient(180deg,#1a110c 0,#1a110c 60%,rgba(26,17,12,.75) 80%,rgba(26,17,12,0) 100%)!important;padding-bottom:clamp(120px,14vw,260px)}
.friend{background:linear-gradient(180deg,rgba(26,17,12,.0) 0,transparent 100%)}
/* 6:20: soft contact shadow under Ponya on the sill */
.dawn{position:relative}
.dawn::after{content:"";position:absolute;left:62%;width:15%;top:calc(var(--pt) + var(--ih) * .79);height:calc(var(--ih) * .05);border-radius:50%;background:radial-gradient(closest-side,rgba(20,10,8,.55),transparent);pointer-events:none}
@media (max-width:699px){.dawn::after{left:46%;width:44%;top:calc(var(--pt) + var(--ih) * .67)}}
/* mobile carousel: phone 1 against the gutter, ~30px of phone 2 peeking */
@media (max-width:699px){.phones{scroll-padding-inline:16px}.scr{scroll-snap-align:start!important}}
/* mobile hero: words + CTA first, then the clock and the 1am card; labelled play */
@media (max-width:699px){
  .hero__photo{aspect-ratio:auto;height:44svh;max-height:none}
  .hero__box{top:50%;transform:translateY(-58%)}
  .hero__bar{order:1;margin-top:-34px;position:relative;z-index:4}
  .hero__tools{order:2;margin:22px 0 10px!important}
  .hero__slot{order:3}
  .play{width:auto!important;height:34px;padding:0 12px 0 10px!important}
  .play__l{position:static!important;width:auto!important;height:auto!important;clip:auto!important;overflow:visible!important;font-size:13px}
}
/* 1920: card above Ponya's ear and clear of the lamp; period clear of the leaf */
@media (min-width:1440px){
  .hero__slot{width:300px!important;top:calc(var(--nav) + 3vh + 84px)}
  .hero__tools{top:calc(var(--nav) + 3vh)}
  .hcard__items{display:none}
  .h1b{font-size:min(6.8vw,100px)}
}
/* ═══ round 16 — one night, one room ═══ */
:root{--s1:8px;--s2:16px;--s3:24px;--s4:32px;--s6:48px;--r-paper:4px;--r-ui:22px;
  --sh-night:10px 18px 40px rgba(0,0,0,.5),2px 4px 10px rgba(0,0,0,.35);
  --sh-day:10px 18px 36px rgba(60,32,16,.16),2px 4px 8px rgba(60,32,16,.08);
  --c-a:#17110D;--c-b:#1a110c;--c-c:#16152a;--c-d:#1c1a34;--c-e:#3a2a44}
/* the sky is one continuous gradient: each section ends on the colour the next one starts with */
.demo{background:radial-gradient(46% 60% at 72% 50%,rgba(242,170,96,.13),transparent 72%),linear-gradient(180deg,var(--c-a),var(--c-b))!important}
.food{background:var(--c-b)!important}
.screens{background:radial-gradient(50% 30% at 50% 40%,rgba(242,170,96,.12),transparent 72%),linear-gradient(180deg,var(--c-b) 0,var(--c-b) 58%,var(--c-c) 100%)!important}
.friend{background:linear-gradient(180deg,var(--c-c),var(--c-d))!important}
.trend{background:radial-gradient(70% 40% at 60% 100%,rgba(232,150,110,.16),transparent 70%),linear-gradient(180deg,var(--c-d),var(--c-e))!important}
.trust{background:linear-gradient(180deg,var(--c-e) 0,var(--c-e) calc(var(--ie) - var(--ih) * .34),#b98a7a calc(var(--ie) - var(--ih) * .12),#ecd2bb var(--ie),var(--paper) calc(var(--ie) + var(--dg) * .5),var(--paper) 100%)!important}
h2,h3{text-wrap:balance}p,li,dd,summary{text-wrap:pretty}
/* 1:04 — a glowing phone on the nightstand */
.device{position:relative;justify-self:center;width:min(440px,100%);padding-bottom:var(--s6)}
.device__glow{position:absolute;left:-25%;right:-25%;top:10%;bottom:10%;background:radial-gradient(closest-side,rgba(255,226,180,.16),transparent);pointer-events:none}
.sheet{border:10px solid #0d0907!important;border-radius:48px!important;padding:12px 14px 16px!important;box-shadow:0 0 0 1.5px #4a3426,var(--sh-night),0 0 80px rgba(255,214,160,.12)!important}
.sheet__status{display:flex;justify-content:space-between;align-items:center;padding:2px 14px 10px;font:600 13px/1 var(--sans);color:var(--ink)}
.sheet__status span{font-size:8px;letter-spacing:1px;color:var(--ink)}
.sheet__island{width:84px;height:24px;border-radius:99px;background:#0d0907}
.sheet__ponya{top:58px!important}
.device__stand{position:absolute;z-index:-1;left:-30%;right:-30%;bottom:0;height:var(--s6);border-radius:var(--r-paper);background:linear-gradient(180deg,#6b4a33 0,#4e3524 6px,#3a2719 22px,#24180f 100%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
.device__stand::before{content:"";position:absolute;left:22%;right:18%;top:-6px;height:16px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.7),transparent)}
/* 3:30 — notes left on the nightstand, each with a little doodle */
.notes{gap:var(--s3)!important;border-top:0!important;padding-top:var(--s4)!important}
.notes li{position:relative;padding:var(--s3) var(--s3) var(--s3) !important;border-radius:var(--r-paper);background:linear-gradient(180deg,#f6ecd9,#efe2c9);color:var(--ink);box-shadow:var(--sh-night);transform:rotate(-1.2deg)}
.notes li:nth-child(2n){transform:rotate(1deg);background:linear-gradient(180deg,#f3e3c4,#ecd9b4)}
.notes li:nth-child(3){transform:rotate(-.4deg)}
.notes li::before{content:"";position:absolute!important;left:50%!important;top:-10px!important;width:64px!important;height:20px!important;border-radius:2px!important;transform:translateX(-50%) rotate(-2deg);background:rgba(232,206,170,.7)!important;box-shadow:none!important}
.notes h3{color:var(--ink)!important;font:italic 500 19px/1.25 var(--serif)!important}
.notes p{color:#5E463A!important;font-size:15px!important;margin-top:var(--s1)!important}
.doodle{display:block;width:44px;height:44px;margin-bottom:var(--s2)}
.doodle svg{width:100%;height:100%;fill:none;stroke:#A9482A;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:899px){.notes{grid-template-columns:1fr 1fr!important}.notes li{padding:var(--s2)!important}.notes h3{font-size:17px!important}}
@media (max-width:420px){.notes{grid-template-columns:1fr!important;gap:var(--s4)!important}}
/* 6:30 — the privacy promise as a sealed letter; credits on an index card */
.letter{position:relative;border-radius:var(--r-paper)!important;background:#fffaf2!important;padding-top:72px!important;box-shadow:var(--sh-day)!important}
.letter::before{content:"";position:absolute;left:0;right:0;top:0;height:64px;background:linear-gradient(180deg,#f2e6d4,#ece0cc);clip-path:polygon(0 0,100% 0,50% 100%)}
.letter__seal{position:absolute;left:50%;top:40px;width:40px;height:40px;margin-left:-20px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 40% 35%,#c8553d,#8E3B22);color:#fbe9dc;font:italic 500 19px/1 var(--serif);box-shadow:3px 5px 10px rgba(80,30,10,.3)}
.index-card{border-radius:var(--r-paper)!important;background:repeating-linear-gradient(180deg,transparent 0,transparent 31px,rgba(94,140,160,.18) 31px,rgba(94,140,160,.18) 32px),#fffdf8!important;background-position:0 70px!important;border-top:3px solid rgba(200,85,61,.45);box-shadow:var(--sh-day)!important}
.trust__grid .note{box-shadow:var(--sh-day)}
.mug{border-radius:var(--r-paper)!important;box-shadow:var(--sh-day)!important}
/* 6:40 — questions in a notebook */
.notebook{position:relative;padding:var(--s3) var(--s3) var(--s3) 64px;border-radius:var(--r-paper);background:repeating-linear-gradient(180deg,transparent 0,transparent 39px,rgba(94,140,160,.2) 39px,rgba(94,140,160,.2) 40px),#fffbf3;box-shadow:var(--sh-day)}
.notebook::before{content:"";position:absolute;left:44px;top:0;bottom:0;width:1.5px;background:rgba(200,85,61,.45)}
.notebook::after{content:"";position:absolute;left:14px;top:24px;bottom:24px;width:12px;background:radial-gradient(circle,#efe2cf 0 5px,transparent 6px) 0 0/12px 72px repeat-y}
.notebook details{border:0!important}
.notebook summary{font:italic 500 19px/1.4 var(--serif)!important;padding:var(--s2) 40px var(--s1) 0!important}
.notebook details p{padding-bottom:var(--s2)!important}
@media (max-width:699px){.notebook{padding-left:44px}.notebook::before{left:30px}.notebook::after{left:6px}.notebook summary{font-size:17.5px!important}}
.notebook{background:#fffbf3!important}
.notebook details{border-bottom:1px solid rgba(94,140,160,.28)!important}
.notebook details:last-child{border-bottom:0!important}
.index-card{background:#fffdf8!important}
.index-card .credits dd{border-bottom:1px solid rgba(94,140,160,.18);padding-bottom:6px}
.demo{overflow-x:clip}
.letter__seal{background:radial-gradient(circle at 40% 35%,#a9482a,#6e2c18)!important;color:#fff!important}
@media (max-width:899px){.device{order:2;margin-top:24px}}@media (max-width:767px){.device{order:5}}
/* ═══ round 17 — seams, table, receipt, reach ═══ */
/* 5:15 → 6:20: the glow now fades out inside the trend section, so the join is one colour */
.trend{background:radial-gradient(56% 34% at 60% 56%,rgba(232,150,110,.12),transparent 72%),linear-gradient(180deg,var(--c-d),var(--c-e))!important}
/* 2:00 → 3:30: the wood-brown room melts into the blue bedroom over ~340px; the lamp clicks off half-way */
.screens{padding-bottom:0!important;background:radial-gradient(50% 30% at 50% 40%,rgba(242,170,96,.12),transparent 72%),linear-gradient(180deg,var(--c-b) 0,var(--c-b) calc(100% - 360px),#191326 calc(100% - 140px),var(--c-c) 100%)!important}
.screens+.friend{padding-top:var(--s6)!important}
.tick{display:flex;align-items:center;justify-content:center;gap:var(--s2);max-width:520px;margin:0 auto;padding:120px var(--gutter) 128px;font:500 12px/1 var(--mono);letter-spacing:.08em;color:#a8978a}
.tick::before,.tick::after{content:"";flex:1;height:1px;max-width:96px;background:linear-gradient(90deg,transparent,rgba(246,237,224,.22))}
.tick::after{order:3;background:linear-gradient(90deg,rgba(246,237,224,.22),transparent)}
.tick time:first-child{order:0}.tick::before{order:1}.tick svg{order:2}.tick span{order:2}.tick time:last-child{order:4}
.tick svg{width:22px;height:22px;fill:none;stroke:#a8978a;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tick span{font:italic 400 15px/1 var(--serif);letter-spacing:0;color:#cbbcad}
.tick time:last-child{color:var(--lamp)}
.lang-vi .tick span{font-family:var(--serif)}
@media (max-width:699px){.tick{padding:72px var(--gutter) 80px;gap:12px}.tick::before,.tick::after{max-width:40px}.screens{background:linear-gradient(180deg,var(--c-b) 0,var(--c-b) calc(100% - 240px),#191326 calc(100% - 90px),var(--c-c) 100%)!important}.screens+.friend{padding-top:var(--s4)!important}
  .phones{--cv:.655;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 clamp(80px,9vw,180px),#000 calc(100% - 20px),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 clamp(80px,9vw,180px),#000 calc(100% - 20px),transparent 100%)}
  .screens .shelf__note{margin-top:var(--s2)!important}}
/* 1:04 — a real nightstand top under the phone; light from the top-left, so the contact shadow leans right */
.device{isolation:isolate}
.device__stand{z-index:-1;left:-34%;right:-34%;height:var(--s6);border-radius:3px;background:radial-gradient(34% 22px at 48% 0,rgba(255,214,160,.22),transparent),linear-gradient(180deg,#8a6446 0,#74533a 2px,#634631 12px,#3e2a1c 13px,#2e1f14 30px,#1e140d 100%)!important;-webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent)}
.device__stand::before{display:none}
.device__stand::after{content:"";position:absolute;left:0;right:0;top:0;height:12px;background:repeating-linear-gradient(90deg,rgba(255,226,190,.05) 0 1px,transparent 1px 7px,rgba(0,0,0,.06) 7px 9px,transparent 9px 17px)}
.device__contact{position:absolute;left:21%;right:15%;top:-2px;height:14px;border-radius:50%;background:radial-gradient(closest-side,rgba(8,4,2,.8),rgba(8,4,2,.35) 60%,transparent)}
.sheet{margin-bottom:0}
/* phone header: × · title · avatar on one line; a clean status bar */
.sheet__bar{grid-template-columns:30px 1fr 30px!important}
.sheet__ava{display:block;width:30px;height:30px;justify-self:end}
.sheet__ava img{display:block;width:100%;height:100%;border-radius:50%;background:#efe4d4}
.sheet__icons{width:40px;height:11px;fill:currentColor;color:var(--ink)}
/* 6:20 — the window melts into the sky on all four sides */
.dawn__img img{-webkit-mask-image:radial-gradient(ellipse 64% 62% at 50% 46%,#000 58%,transparent 100%),linear-gradient(180deg,transparent 0,#000 26%,#000 58%,transparent 100%),linear-gradient(90deg,transparent 0,#000 20%,#000 80%,transparent 100%)!important;-webkit-mask-composite:source-in,source-in;mask-image:radial-gradient(ellipse 64% 62% at 50% 46%,#000 58%,transparent 100%),linear-gradient(180deg,transparent 0,#000 26%,#000 58%,transparent 100%),linear-gradient(90deg,transparent 0,#000 20%,#000 80%,transparent 100%)!important;mask-composite:intersect,intersect}
@media (max-width:699px){.dawn__img img{-webkit-mask-image:radial-gradient(ellipse 78% 64% at 50% 46%,#000 60%,transparent 100%),linear-gradient(180deg,transparent 0,#000 20%,#000 62%,transparent 100%),linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)!important;mask-image:radial-gradient(ellipse 78% 64% at 50% 46%,#000 60%,transparent 100%),linear-gradient(180deg,transparent 0,#000 20%,#000 62%,transparent 100%),linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)!important}}
/* 3:30 — left-aligned like every other headline */
.friend__in{justify-items:start;text-align:left}
.friend .stamp{justify-content:flex-start}
.friend .lede{margin:var(--s4) 0 0;max-width:36em}
.friend .still330{justify-self:stretch}
.friend .notes{justify-self:stretch}
/* 1:20 — yesterday's log is a receipt Ponya is reading in bed */
.receipt{width:min(640px,calc(100% - var(--gutter) * 2));margin:var(--s6) auto 0}
.receipt .log__day{margin:0 0 var(--s3)!important;font:500 12px/1 var(--mono);letter-spacing:.06em;color:#a8978a}
.lang-vi .receipt .log__day{font-family:var(--sans);letter-spacing:0;font-size:13px}
.receipt__paper{position:relative;padding:var(--s3) 0 var(--s2);background:#f4ead8;color:var(--ink);transform:rotate(-.7deg);filter:drop-shadow(10px 16px 22px rgba(0,0,0,.5)) drop-shadow(2px 3px 4px rgba(0,0,0,.35))}
.receipt__paper::before,.receipt__paper::after{content:"";position:absolute;left:0;right:0;height:6px}
.receipt__paper::before{top:-6px;background:conic-gradient(from 135deg at 50% 0,#f4ead8 90deg,transparent 0) 0 0/12px 6px repeat-x}
.receipt__paper::after{bottom:-6px;background:conic-gradient(from -45deg at 50% 100%,#f4ead8 90deg,transparent 0) 0 0/12px 6px repeat-x}
.receipt__head{display:flex;justify-content:space-between;align-items:baseline;margin:0 var(--s3);padding-bottom:var(--s2);border-bottom:1px dashed rgba(42,27,20,.3);font:500 12px/1 var(--mono);color:#6b5547}
.receipt__head b{font:italic 500 22px/1 var(--serif);color:var(--ink)}
.receipt .log{margin:0!important;border:0!important}
.receipt .log li{border-bottom:1px dashed rgba(42,27,20,.18)!important}
.receipt .log li::before{background:linear-gradient(90deg,transparent,rgba(200,85,61,.08) 30%,rgba(200,85,61,.03) 70%,transparent)!important}
.receipt .log__in{max-width:none;grid-template-columns:1fr auto;padding:14px var(--s3)!important}
@media (min-width:700px){.receipt .log__in{grid-template-columns:5.6em 1fr auto}.receipt .log time{grid-column:auto}}
.receipt .log time,.receipt .log li.is-lit time{color:#6b5547}
.receipt .log q{font-size:clamp(19px,2vw,23px);color:var(--ink)}
.receipt .log b{color:#8e3b22}
.receipt .log b small{color:#6b5547}
.receipt__total{display:flex;justify-content:space-between;align-items:baseline;margin:var(--s1) var(--s3) 0;padding-top:var(--s2);border-top:3px double rgba(42,27,20,.3);font:500 13px/1 var(--mono);color:#6b5547;text-transform:uppercase;letter-spacing:.06em}
.receipt__total b{font:600 16px/1 var(--mono);color:var(--ink);text-transform:none}
.receipt__total b small{font-size:12px;color:#6b5547}
.lang-vi .receipt__total{font-family:var(--sans);text-transform:none;letter-spacing:0}
.receipt .log__note{margin-top:var(--s4)!important;text-align:center}
/* 6:30 — the wax seal never touches the title */
.letter h3{padding-top:var(--s2)}
@media (max-width:699px){.letter h3{padding-top:28px}}
/* 6:40 — one punched hole per question, centred on its first line; focus ring inside the dividers */
.notebook::after{display:none!important}
.notebook details{position:relative}
.notebook details::before{content:"";position:absolute;left:-50px;top:23px;width:12px;height:12px;border-radius:50%;background:var(--paper);box-shadow:inset 1px 2px 2px rgba(60,32,16,.32)}
@media (max-width:699px){.notebook details::before{left:-38px;top:22px}}
.notebook summary:focus-visible{outline-offset:-4px}
/* conversion: secondary "copy email" (JS only) */
.copy{display:inline-flex;align-items:center;min-height:44px;margin-left:var(--s1);padding:0 var(--s2);border:1px solid rgba(42,27,20,.35);border-radius:99px;background:rgba(255,250,242,.6);color:var(--ink);font:600 14px/1 var(--sans);cursor:pointer;vertical-align:middle}
.copy.is-done{border-color:#2f6b4f;color:#245a41}
.copy[hidden]{display:none}
/* mobile reach: 44px targets, padding only */
@media (max-width:699px){
  .nav__links .lang{min-height:44px;display:inline-flex;align-items:center;padding:0 16px}
  .chip,.mode{min-height:44px}
  .play{height:44px!important;min-height:44px!important}
  .foot nav a{display:inline-flex;align-items:center;min-height:44px}
  .foot nav{gap:0 22px}
  .cta__alt a{padding-block:12px}
}
/* 390: headline, Ponya, CTA, then the 1:04 clock and the logged card — all on the first screen */
@media (max-width:699px){
  .hero__photo{height:clamp(220px,calc(100svh - 548px),44svh)}
  .hero__box{transform:translateY(-55%)}
  .hero__tools{margin:12px 0 8px!important}
  .hcard__items{display:none}
}
@media (max-width:699px){
  .hero__photo{height:clamp(220px,calc(100svh - 576px),44svh)}
}
/* the table under the four phones runs on and dissolves slowly instead of stopping at a line */
@media (min-width:1100px){.phones{--cv:.93;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 clamp(80px,9vw,180px),#000 calc(100% - 200px),rgba(0,0,0,.45) calc(100% - 90px),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 clamp(80px,9vw,180px),#000 calc(100% - 200px),rgba(0,0,0,.45) calc(100% - 90px),transparent 100%)}.tick{padding-top:64px}}
/* the nightstand reads as a surface: a lit top you can see into, a darker front edge; the phone stands on it */
.device{padding-bottom:52px}
.device__stand{height:72px!important;background:radial-gradient(30% 26px at 47% 10px,rgba(255,214,160,.26),transparent),linear-gradient(180deg,#5a3f2b 0,#7a5639 18px,#8d6545 25px,#4a3221 26px,#34231688 40px,#1e140d 100%)!important}
.device__stand::after{top:0;height:25px;background:repeating-linear-gradient(178deg,rgba(255,226,190,.05) 0 1px,transparent 1px 5px,rgba(0,0,0,.07) 5px 6px,transparent 6px 11px)}
.device__contact{top:14px!important;left:20%!important;right:13%!important;height:16px!important;background:radial-gradient(closest-side,rgba(8,4,2,.85),rgba(8,4,2,.4) 55%,transparent)!important}
.device__stand{height:84px!important;background:radial-gradient(34% 34px at 47% 16px,rgba(255,214,160,.3),transparent),linear-gradient(180deg,#4d3524 0,#6e4d33 14px,#93694a 35px,#a87b57 36px,#3d2819 37px,#2a1b11 56px,#1a110b 100%)!important;-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}
.device__stand::after{height:36px}
.device__contact{top:24px!important;left:19%!important;right:12%!important;height:20px!important;background:radial-gradient(60% 50% at 56% 50%,rgba(8,4,2,.8),rgba(8,4,2,.35) 60%,transparent)!important}
@media (max-width:699px){.hero__stage{padding-bottom:40px!important}}
/* ═══ round 18 ═══ */
/* the 1am card is always complete: never an empty cream box, with or without JS / motion */
html.js .hcard__title,html.js .hcard__total,html.js .hcard__range,html.js .hcard__items,html.js .hcard__guilt{opacity:1!important}
html.js .hcard__guilt b{transform:none!important}
/* 2:00 — the whole shelf fits one screen at desktop; each caption carries the benefit that used to be a sticky note */
@media (min-width:1100px){.phones{--bw:min(100vw,calc((100svh - 230px) / .43))}}
.phones__cap{color:#d3c5b6}
.phones__cap strong{display:block;margin:2px 0 4px;font:italic 500 clamp(15px,.45vw + 8px,18px)/1.25 var(--serif);color:var(--cream)}
.phones__cap span{margin-bottom:2px}
/* swipe cue on phones/tablets: dots follow the scroll, plus a hint */
@media (max-width:1099px){.phones__dots{display:flex!important;justify-content:center;align-items:center;gap:8px;margin:12px 0 0}.phones__dots i{width:7px;height:7px;border-radius:50%;background:rgba(246,237,224,.3)!important;transition:background-color .3s,width .3s}.phones__dots i.is-on{width:18px;border-radius:4px;background:var(--lamp)!important}}
.phones__dots span{display:none}
@media (max-width:699px){.phones__dots span{display:inline;margin-left:8px;font:500 12px/1 var(--mono);letter-spacing:.04em;color:#a8978a}.lang-vi .phones__dots span{font-family:var(--sans)}}
/* 3:30 — the asleep scene is a wide strip, not a full screen */
@media (min-width:700px){.still330__img img{aspect-ratio:3/1!important}}
@media (max-width:699px){.still330__img img{aspect-ratio:1/1!important}}
/* 5:15 — a moonlit paper card pinned by the window, trend in pencil */
.pinned{position:relative;padding:30px 26px 18px!important;border:0!important;border-radius:var(--r-paper)!important;background:radial-gradient(80% 60% at 18% 0,rgba(255,255,255,.35),transparent 70%),linear-gradient(170deg,#e4e5ef 0,#d6d8e6 60%,#c9cbdc 100%)!important;color:#262a40;transform:rotate(-1.3deg);box-shadow:var(--sh-night)!important}
.pinned__pin{position:absolute;left:50%;top:-7px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#e98a6c,#a9482a 55%,#6e2c18);box-shadow:4px 6px 6px rgba(0,0,0,.45)}
.pinned .chart__label{color:#474c66}
.pinned .chart__val{color:#1f2238;font-style:italic}
.pinned .chart__val small{color:#474c66;font-style:normal}
.pinned .chart__delta{border:1.5px solid rgba(47,51,80,.45);border-radius:50% / 60%;padding:7px 14px;font:italic 500 16px/1 var(--serif);color:#2a2e4a;transform:rotate(2deg)}
.pencil__grid line{stroke:rgba(60,64,96,.2);stroke-dasharray:2 6}
.pencil__dots circle{fill:none;stroke:rgba(47,51,80,.6);stroke-width:1.3}
.pencil__ghost{fill:none;stroke:rgba(47,51,80,.28);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.pencil__line{fill:none;stroke:#2a2e4a;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.pencil__end{fill:none;stroke:#a9482a;stroke-width:2}
.pinned .chart__legend{color:#474c66}
.pinned .lg--dot::before{background:none!important;border:1.3px solid #474c66;width:7px;height:7px}
.pinned .lg--line::before{background:#2a2e4a!important;height:2.5px}
/* 6:30 — one letter: privacy, Ken's note, sign-off, credits */
.letter__body{margin-top:var(--s4);padding-top:var(--s3);border-top:1px dashed rgba(42,27,20,.22)}
.letter__hi{font:italic 500 22px/1.2 var(--serif);color:var(--ink)}
.letter__body p:not(.letter__hi):not(.letter__sign){margin-top:var(--s1);font:italic 400 17px/1.55 var(--serif);color:#3d2a20}
.letter__sign{margin-top:var(--s2);font:italic 400 17px/1 var(--serif);color:var(--ink-2);text-align:right}
.letter__credits{margin-top:var(--s3);padding-top:var(--s2);border-top:1px solid rgba(42,27,20,.12);font-size:13px;line-height:1.6;color:var(--ink-2)}
.letter__credits b{margin-right:6px;font:500 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--terra-d)}
.lang-vi .letter__credits b{font-family:var(--sans);letter-spacing:0;text-transform:none;font-size:13px;font-weight:600}
@media (min-width:900px){.trust__grid{grid-template-areas:"priv mug"!important;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)!important;align-items:stretch!important}.mug{min-height:0!important}}
@media (max-width:699px){.trust__grid .mug{display:none}}
/* copy button: same width in both states */
.copy{min-width:12.6em;justify-content:center}
/* pacing: tighter night */
:root{--sec-y:clamp(48px,4.2vw,64px)}
@media (min-width:1100px){.receipt{position:relative;z-index:2;margin:calc(150px - 21.2vw) 0 0 max(var(--gutter),calc((100vw - var(--max)) / 2));width:min(600px,46vw)}}
.receipt .log__in{padding:11px var(--s3)!important}
@media (min-width:1100px){.tick{padding:40px var(--gutter) 56px}}
@media (min-width:700px){.still330__img img{aspect-ratio:3.4/1!important}}
.trust{--ih:clamp(300px,40vw,580px)!important}
/* 5:15 → 6:20: the pinned card hangs over the top of the window */
@media (min-width:900px){.trend{padding-bottom:0!important}.trend+.trust{margin-top:0}.trust .dawn{padding-top:0!important}.trust{--pt:0px!important}}
.trust{--dg:clamp(48px,5vw,90px)!important}
.trust .dawn{margin-bottom:calc(var(--dg) * .4)!important}
@media (min-width:1100px){.receipt{margin-top:calc(190px - 21.2vw)}}
/* the letter spans the page: promises on the left, Ken's note on the right, credits along the bottom */
@media (min-width:900px){.trust__grid{display:block!important}
  .letter{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--s6);align-content:start;padding:76px var(--s6) var(--s4)!important}
  .letter>h3,.letter>.checks,.letter>.link{grid-column:1}
  .letter>.link{justify-self:start}
  .letter__body{grid-column:2;grid-row:1 / span 3;margin-top:0;padding-top:0;padding-left:var(--s6);border-top:0;border-left:1px dashed rgba(42,27,20,.22)}
  .letter__credits{grid-column:1 / -1}}
@media (min-width:1100px){.final{min-height:clamp(520px,32vw,620px)!important}}
.receipt .log li::before{display:none!important}
/* mobile hero: the tagline sits below the photo, never on it; the lamp shade is cropped out cleanly */
@media (max-width:699px){
  .hero__bar{margin-top:12px!important}
  .hero__photo{height:clamp(200px,calc(100svh - 594px),40svh)!important}
}
@media (max-width:699px){.hero__photo::after{background:linear-gradient(0deg,var(--night) 0,rgba(23,17,13,.7) 8%,rgba(23,17,13,0) 26%),linear-gradient(180deg,var(--night) 0,var(--night) 9%,rgba(23,17,13,0) 34%)!important}}
/* short phones (<700px tall): compact hero — photo, the logged card, then the pitch */
@media (max-width:699px) and (max-height:700px){
  .hero__photo{height:180px!important}
  .hero__box{transform:translateY(-53%)}
  .hero__tools{order:-1!important;align-self:flex-end!important;margin:6px 0 -50px!important;z-index:4}
  .hero__tools .clock{transform:scale(.88);transform-origin:100% 0}
  .hero__slot{order:1!important;margin-top:-28px!important;position:relative;z-index:4}
  .hcard__range{display:none!important}
  .hero__bar{order:2!important;margin-top:16px!important}
}
/* 820–1099: the window keeps its sill, paws and lamp; caption sits on the left pane */
@media (min-width:700px) and (max-width:1099px){.dawn__img img{-webkit-mask-image:radial-gradient(ellipse 70% 78% at 50% 44%,#000 62%,transparent 100%),linear-gradient(180deg,transparent 0,#000 18%,#000 72%,transparent 100%),linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%)!important;mask-image:radial-gradient(ellipse 70% 78% at 50% 44%,#000 62%,transparent 100%),linear-gradient(180deg,transparent 0,#000 18%,#000 72%,transparent 100%),linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%)!important}}
@media (max-width:899px){.dawn .window__cap{left:16px!important;right:auto!important;transform:none!important}}
@media (min-width:700px) and (max-width:1099px){.trust{--ih:clamp(300px,54vw,580px)!important}.dawn__img img{object-position:55% 62%!important}}
@media (min-width:700px) and (max-width:899px){.dawn .window__cap{bottom:auto!important;top:calc(var(--pt) + var(--ih) * .2)!important}}
@media (max-width:699px){.phones{--cv:.72!important}.dawn .window__cap{top:calc(var(--pt) + var(--ih) * .1)!important;bottom:auto!important}}
@media (min-width:700px) and (max-width:1099px){.phones{--cv:.86!important}}
@media (min-width:700px) and (max-width:1099px){.phones{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 clamp(80px,9vw,180px),#000 calc(100% - 24px),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 clamp(80px,9vw,180px),#000 calc(100% - 24px),transparent 100%)}}
@media (max-width:899px){.final__bg img{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 110px);mask-image:linear-gradient(180deg,transparent 0,#000 110px)}}
.ui-pill{color:#1a0f0a;font-weight:700;background:#de8460}
@media (min-width:1100px){.phones{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 clamp(80px,9vw,180px),#000 87%,rgba(0,0,0,.45) 94%,transparent 100%)!important;mask-image:linear-gradient(180deg,transparent 0,#000 clamp(80px,9vw,180px),#000 87%,rgba(0,0,0,.45) 94%,transparent 100%)!important}}
@media (min-width:1100px){.phones{--cv:1!important}}
@media (min-width:1100px) and (max-width:1279px){.phones{--cv:1.1!important}}
@media (min-width:1100px){.still330__img img{aspect-ratio:3.8/1!important}.tick{padding:32px var(--gutter) 40px}.final{min-height:clamp(520px,30vw,580px)!important}}
@media (max-width:699px){.still330__img img{aspect-ratio:5/4!important}.tick{padding:48px var(--gutter) 56px}}
/* ═══ round 19 ═══ */
/* demo: the finished card is there on arrival; while Ponya reads a new meal the old one dims under a shimmer */
html.js .result.is-wait>*{opacity:.32!important;transition:opacity .2s!important;transition-delay:0s!important}
html.js .result.is-wait::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,250,242,.7) 50%,transparent 70%);animation:shimmer 1.3s linear infinite}
/* 3:30 — the whole sleeping Ponya, ears to blanket, at every width */
@media (min-width:700px){
  .friend .still330{justify-self:center!important;width:min(980px,100%)!important;max-width:none!important;margin:var(--s4) auto 0!important}
  .still330__img img{aspect-ratio:1.8/1!important;object-position:50% 86%!important;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%),linear-gradient(180deg,transparent 0,#000 6%,#000 90%,transparent 100%)!important;mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%),linear-gradient(180deg,transparent 0,#000 6%,#000 90%,transparent 100%)!important}
}
@media (max-width:699px){.still330__img img{aspect-ratio:1/1!important;object-position:50% 80%!important}}
/* the night in one glance: 11:58 PM → 1:04 AM next to the clock */
.hero__tools{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.clock__span{margin:0;font:500 11.5px/1 var(--mono);letter-spacing:.04em;color:#bfae9e;white-space:nowrap}
@media (max-width:699px){.hero__tools{flex-direction:row;align-items:center;gap:12px}}
@media (max-width:699px) and (max-height:700px){.hero__tools{flex-direction:column;align-items:flex-end;gap:2px}.clock__span{display:none}}
@media (min-width:1000px){.hero__slot{margin-top:18px!important}}
@media (min-width:1000px) and (max-width:1199px){.hero__slot{margin-top:26px!important}.play{width:44px!important;min-width:44px!important;height:44px}}
/* 1920: the shelf (four phones + Ponya) is centred in the viewport; less dark wall above it */
@media (min-width:1100px){.phones{--ct:.22!important;--cv:.95!important}.phones__band{left:calc(50% - var(--bw) * .59)!important}}
@media (min-width:1100px) and (max-width:1279px){.phones{--cv:1.05!important}}
@media (min-width:1440px){.phones{--cv:.91!important}}
.phones__dots.is-end span{visibility:hidden}
@media (max-width:1099px){.phones{scroll-padding-inline-end:16px}}
/* the letter's credits sit under Ken's signature */
@media (min-width:900px){.letter__body{grid-row:1 / span 2!important}.letter__credits{grid-column:2!important;grid-row:3;align-self:end;margin-top:var(--s3);padding:var(--s2) 0 0 var(--s6);border-top:0;border-left:1px dashed rgba(42,27,20,.22)}.letter>.link{grid-row:3;align-self:end}}
/* the pinned trend card hangs over the window */
@media (min-width:900px){.trend{z-index:2}.pinned{transform:rotate(-1.3deg) translateY(40px)}}
/* ═══ round 20 ═══ */
:root{--wood:#a8794f;--wood-hi:#c99f74;--wood-d:#6f4529;--linen:#f4ebdf}
/* 7:02 — the whole Ponya with headroom, the switched-off lamp in frame; the counter runs into the footer */
@media (min-width:900px){
  .final{--H:max(680px,44vw);--iw:max(100vw,calc(var(--H) * 1.792));min-height:var(--H)!important;padding:var(--sec-y) 0!important}
  .final__bg img{object-position:62% 22%!important}
  .final::after{height:150px!important;background:linear-gradient(180deg,var(--paper) 0,rgba(251,245,236,.82) 22%,rgba(251,245,236,.5) 48%,rgba(251,245,236,.18) 74%,rgba(251,245,236,0) 100%)!important}
  .final::before{background:linear-gradient(0deg,var(--wood) 0,rgba(168,121,79,.9) 2.5%,rgba(168,121,79,.4) 7%,rgba(168,121,79,0) 14%),linear-gradient(90deg,var(--paper) 0,var(--paper) 18%,rgba(251,245,236,.9) 30%,rgba(251,245,236,.45) 46%,rgba(251,245,236,0) 58%)!important}
  .final__lamp{position:absolute;z-index:1;left:calc((100vw - var(--iw)) * .62 + var(--iw) * .72 + clamp(56px,5vw,96px));top:calc((var(--H) - var(--iw) / 1.792) * .22 + var(--iw) / 1.792 * .11)}
}
.final__lamp{margin:0;font:italic 400 15px/1.2 var(--serif);color:#6b5547;white-space:nowrap}
.final__lamp::before{content:"";display:inline-block;width:22px;height:1px;margin:0 8px 4px 0;vertical-align:middle;background:rgba(107,85,71,.5)}
@media (max-width:899px){.final{position:relative}.final__lamp{position:absolute;z-index:1;left:62%;top:9%}.final::after{content:"";position:absolute;left:0;right:0;bottom:0;height:56px;z-index:-1;background:linear-gradient(180deg,rgba(168,121,79,0),var(--wood))}}
/* footer: the counter's front edge, then linen; a centred sign-off */
.foot{position:relative;padding:44px 0 32px!important;background:linear-gradient(180deg,var(--wood) 0,var(--wood) 6px,var(--wood-hi) 7px,#9a6c45 9px,var(--wood-d) 26px,#5a3820 27px,rgba(90,56,32,.0) 27px),repeating-linear-gradient(45deg,rgba(120,90,60,.035) 0 1px,transparent 1px 4px),repeating-linear-gradient(-45deg,rgba(120,90,60,.03) 0 1px,transparent 1px 5px),var(--linen)!important;color:var(--ink);text-align:center}
.foot::before{content:"";position:absolute;left:0;right:0;top:27px;height:22px;background:linear-gradient(180deg,rgba(60,32,16,.22),rgba(60,32,16,0));pointer-events:none}
.foot__in{position:relative;max-width:min(680px,calc(100% - var(--gutter) * 2));margin:0 auto;padding-top:var(--s4)}
.foot__face{position:relative;display:inline-block;width:56px;height:56px;isolation:isolate}
.foot__face img{display:block;width:56px;height:56px;border-radius:50%;box-shadow:var(--sh-day)}
.foot__sun{position:absolute;z-index:-1;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:radial-gradient(circle,rgba(247,190,120,.75) 0,rgba(247,190,120,.35) 45%,rgba(247,190,120,0) 70%)}
.foot__morning{margin:var(--s2) 0 0!important;font:italic 400 clamp(30px,3.4vw,40px)/1.1 var(--serif)!important;color:var(--ink)!important}
.foot__bye{margin:var(--s1) 0 0;font:400 16px/1.4 var(--sans);color:var(--ink-2)}
.foot__links{display:flex;flex-wrap:wrap;justify-content:center;gap:0;margin:var(--s4) 0 0;padding:0;list-style:none;font-size:14.5px}
.foot__links li{white-space:nowrap}
.foot__links li+li::before{content:"·";margin:0 10px;color:#9a8474}
.foot__links a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:none}
.foot__links a:hover{text-decoration:underline}
.foot__note{margin:var(--s2) auto 0!important;font-size:13px!important;line-height:1.6;color:var(--ink-2)!important;text-wrap:balance}
.foot__note strong{font-weight:600;color:var(--ink)}
.foot .wrap,.foot__in>.foot__in{all:unset}
@media (max-width:699px){.foot__links{font-size:14px}.foot__links li+li::before{margin:0 7px}}
.foot__in{display:block!important;text-align:center}
@media (min-width:900px){.final::before{background:linear-gradient(0deg,var(--wood) 0,rgba(168,121,79,.85) 1.6%,rgba(168,121,79,.3) 4.5%,rgba(168,121,79,0) 8%),linear-gradient(90deg,var(--paper) 0,var(--paper) 18%,rgba(251,245,236,.9) 30%,rgba(251,245,236,.45) 46%,rgba(251,245,236,0) 58%)!important}}
.final__lamp{font-size:16px;color:#5e463a}
.foot__morning{padding:0!important;border:0!important;background:none!important}.foot__morning::before,.foot__morning::after{display:none!important}
/* hero headline never touches Ponya's ear or leaf (≥1200: headline column ≤ 30vw) */
@media (min-width:1200px){.h1a{font-size:min(2.78vw,50px)!important}.h1b{font-size:min(5.9vw,100px)!important}}
@media (min-width:1200px){.hero__copy{--A:calc(100vw - .495 * max(100vw, 196vh) - max(var(--gutter), (100vw - 1280px) / 2) - 36px)}.h1a{font-size:min(2.78vw,50px,calc(var(--A) / 10.9))!important}.h1b{font-size:min(5.9vw,100px,calc(var(--A) / 5.15))!important}}
@media (min-width:1200px){.lang-vi .h1a{font-size:min(2.7vw,50px,calc(var(--A) / 12))!important}}
@media (min-width:1200px){.lang-vi .h1b{font-size:min(5.6vw,96px,calc(var(--A) / 5.6))!important}}
/* ═══ motion (round 20): transform/opacity only, paused off-screen, none under reduced motion ═══ */
.fx-glow,.fx-steam,.fx-dust,.fx-stars,.fx-snow,.fx-motes,.fx-ray{position:absolute;pointer-events:none;display:none}
.tick__lamp{position:relative;display:inline-flex;order:2}.tick__glow{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:radial-gradient(circle,rgba(242,184,114,.6),rgba(242,184,114,0) 66%);opacity:0}
[data-navclock]{display:inline-block}
@media (prefers-reduced-motion:no-preference){
 .fx-glow,.fx-steam,.fx-dust,.fx-stars,.fx-snow,.fx-motes,.fx-ray{display:block}
 :is(.fx-glow,.fx-steam path,.fx-dust i,.fx-stars i,.fx-snow i,.fx-snow i::before,.fx-motes i,.fx-ray){animation-play-state:paused!important}
 :is(.is-vis,.fx-all) :is(.fx-glow,.fx-steam path,.fx-dust i,.fx-stars i,.fx-snow i,.fx-snow i::before,.fx-motes i,.fx-ray){animation-play-state:running!important}
 .fx-glow{z-index:1;left:43%;top:20%;width:34%;height:46%;background:radial-gradient(closest-side,rgba(255,196,120,.26),rgba(255,196,120,0));mix-blend-mode:screen;animation:fxBreathe 6s ease-in-out infinite alternate}
 .fx-steam{z-index:1;left:45.6%;top:60%;width:6.4%;aspect-ratio:60/90;filter:blur(1.2px)}
 .fx-steam svg{display:block;width:100%;height:100%;overflow:visible}
 .fx-steam path{fill:none;stroke:rgba(255,238,220,.5);stroke-width:2.4;stroke-linecap:round;opacity:0;transform-box:fill-box;transform-origin:50% 100%;animation:fxSteam 5s ease-in-out infinite}
 .fx-steam path:nth-child(2){animation-duration:6.2s;animation-delay:-2.1s}.fx-steam path:nth-child(3){animation-duration:5.4s;animation-delay:-3.7s}
 .fx-dust{z-index:1;left:50%;top:30%;width:20%;height:34%}
 .fx-dust i{position:absolute;width:3px;height:3px;border-radius:50%;background:radial-gradient(circle,rgba(255,220,160,.9),rgba(255,220,160,0) 70%);opacity:0;animation:fxDust 9s ease-in-out infinite}
 .fx-dust i:nth-child(1){left:46%;top:39%;animation-duration:9.0s;animation-delay:-0.5s;width:2px;height:3px}
 .fx-dust i:nth-child(2){left:79%;top:27%;animation-duration:11.5s;animation-delay:-2.1s;width:2px;height:4px}
 .fx-dust i:nth-child(3){left:58%;top:28%;animation-duration:8.2s;animation-delay:-5.5s;width:2px;height:2px}
 .fx-dust i:nth-child(4){left:33%;top:94%;animation-duration:11.7s;animation-delay:-5.8s;width:4px;height:2px}
 .fx-dust i:nth-child(5){left:33%;top:25%;animation-duration:9.8s;animation-delay:-1.3s;width:4px;height:3px}
 .fx-dust i:nth-child(6){left:74%;top:35%;animation-duration:9.9s;animation-delay:-5.6s;width:3px;height:2px}
 .fx-dust i:nth-child(7){left:79%;top:93%;animation-duration:10.2s;animation-delay:-3.7s;width:2px;height:2px}
 @media (max-width:699px){.fx-glow{left:30%;top:18%;width:48%}.fx-steam{left:22.5%;top:59%;width:14%}.fx-dust{left:36%;top:28%;width:36%}}
 .fx-stars{z-index:-1;inset:0 0 auto;height:min(70%,900px);-webkit-mask-image:linear-gradient(180deg,#000 30%,transparent);mask-image:linear-gradient(180deg,#000 30%,transparent)}
 .fx-stars i{position:absolute;inset:0;background:url(/assets/img/stars.v1.svg) 0 0/640px 560px repeat;opacity:.25;animation:fxTwinkle 5.5s ease-in-out infinite alternate}
 .fx-stars i:nth-child(2){background-position:320px 190px;animation-duration:7.5s;animation-delay:-3s}
 .fx-snow{z-index:1;left:9%;width:44%;top:calc(var(--pt,0px) + var(--ih) * .05);height:calc(var(--ih) * .6);overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 70%,transparent 100%)}
 .fx-snow i{position:absolute;top:0;height:100%;width:8px;animation:fxFall 9s linear infinite}
 .fx-snow i::before{content:"";position:absolute;left:0;top:-6px;width:var(--s,4px);height:var(--s,4px);border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.95),rgba(255,255,255,0) 70%);opacity:var(--o,.8);animation:fxSway 3.2s ease-in-out infinite alternate}
 .fx-snow i:nth-child(1){left:60.0%;--s:5px;--o:0.79;animation-duration:10.0s;animation-delay:-4.4s}
 .fx-snow i:nth-child(2){left:56.8%;--s:5px;--o:0.63;animation-duration:8.7s;animation-delay:-2.5s}
 .fx-snow i:nth-child(3){left:75.6%;--s:3px;--o:0.74;animation-duration:10.7s;animation-delay:-12.3s}
 .fx-snow i:nth-child(4){left:70.8%;--s:4px;--o:0.75;animation-duration:7.5s;animation-delay:-7.2s}
 .fx-snow i:nth-child(5){left:16.0%;--s:4px;--o:0.53;animation-duration:10.4s;animation-delay:-0.5s}
 .fx-snow i:nth-child(6){left:64.8%;--s:6px;--o:0.74;animation-duration:13.1s;animation-delay:-4.4s}
 .fx-snow i:nth-child(7){left:67.4%;--s:6px;--o:0.70;animation-duration:12.6s;animation-delay:-1.0s}
 .fx-snow i:nth-child(8){left:9.1%;--s:4px;--o:0.69;animation-duration:11.6s;animation-delay:-0.8s}
 .fx-snow i:nth-child(9){left:68.0%;--s:7px;--o:0.74;animation-duration:11.8s;animation-delay:-6.2s}
 .fx-snow i:nth-child(10){left:69.5%;--s:7px;--o:0.62;animation-duration:13.6s;animation-delay:-5.0s}
 .fx-snow i:nth-child(11){left:59.3%;--s:5px;--o:0.48;animation-duration:12.4s;animation-delay:-1.8s}
 .fx-snow i:nth-child(12){left:24.0%;--s:5px;--o:0.91;animation-duration:10.5s;animation-delay:-2.3s}
 .fx-snow i:nth-child(13){left:39.0%;--s:4px;--o:0.89;animation-duration:12.7s;animation-delay:-12.1s}
 .fx-snow i:nth-child(14){left:27.0%;--s:5px;--o:0.94;animation-duration:11.8s;animation-delay:-5.3s}
 .fx-snow i:nth-child(15){left:22.4%;--s:3px;--o:0.54;animation-duration:8.6s;animation-delay:-3.3s}
 .fx-snow i:nth-child(16){left:47.0%;--s:6px;--o:0.54;animation-duration:9.0s;animation-delay:-2.0s}
 .fx-snow i:nth-child(17){left:51.9%;--s:6px;--o:0.73;animation-duration:13.7s;animation-delay:-9.7s}
 .fx-snow i:nth-child(18){left:50.0%;--s:6px;--o:0.78;animation-duration:12.2s;animation-delay:-6.4s}
 .fx-snow i:nth-child(19){left:84.5%;--s:7px;--o:0.85;animation-duration:9.7s;animation-delay:-5.6s}
 .fx-snow i:nth-child(20){left:10.0%;--s:7px;--o:0.65;animation-duration:8.3s;animation-delay:-13.8s}
 .fx-snow i:nth-child(21){left:42.7%;--s:3px;--o:0.62;animation-duration:7.4s;animation-delay:-0.0s}
 .fx-snow i:nth-child(22){left:14.7%;--s:3px;--o:0.92;animation-duration:11.3s;animation-delay:-1.0s}
 @media (max-width:699px){.fx-snow{display:none}}
 .fx-ray{z-index:-1;top:0;bottom:0;left:30%;width:42%;background:linear-gradient(112deg,rgba(255,231,190,0) 38%,rgba(255,231,190,.28) 50%,rgba(255,231,190,0) 62%);opacity:.5;animation:fxRay 11s ease-in-out infinite alternate}
 .fx-motes{z-index:0;left:34%;top:8%;width:30%;height:78%}
 .fx-motes i{position:absolute;width:4px;height:4px;border-radius:50%;background:radial-gradient(circle,rgba(255,214,140,.95),rgba(255,214,140,0) 70%);opacity:0;animation:fxMote 12s ease-in-out infinite}
 .fx-motes i:nth-child(1){left:28%;top:93%;animation-duration:12.3s;animation-delay:-8.9s}
 .fx-motes i:nth-child(2){left:46%;top:92%;animation-duration:12.2s;animation-delay:-1.7s}
 .fx-motes i:nth-child(3){left:64%;top:74%;animation-duration:12.9s;animation-delay:-4.4s}
 .fx-motes i:nth-child(4){left:20%;top:28%;animation-duration:14.5s;animation-delay:-10.4s}
 .fx-motes i:nth-child(5){left:63%;top:35%;animation-duration:13.1s;animation-delay:-2.9s}
 .fx-motes i:nth-child(6){left:69%;top:61%;animation-duration:10.9s;animation-delay:-7.6s}
 .fx-motes i:nth-child(7){left:5%;top:82%;animation-duration:11.8s;animation-delay:-9.0s}
 .fx-motes i:nth-child(8){left:13%;top:48%;animation-duration:13.1s;animation-delay:-12.7s}
 .fx-motes i:nth-child(9){left:47%;top:43%;animation-duration:13.2s;animation-delay:-10.9s}
 @media (max-width:899px){.fx-ray,.fx-motes{display:none}}
 html.js .tick:not(.is-lit) .tick__glow{opacity:1}
 .tick.is-lit .tick__glow{animation:fxLampOff 1.5s ease-out .25s both}
 .tick.is-lit svg{animation:fxIconOff 1.5s ease-out .25s both}
 .pinned{--ty:0px;transform:translateY(var(--ty)) rotate(-1.3deg)!important;transform-origin:50% 0}
 @media (min-width:900px){.pinned{--ty:40px}}
 html.js .pinned:not(.is-lit){transform:translateY(var(--ty)) rotate(-6deg)!important}
 .pinned.is-lit{animation:fxSwing 2s cubic-bezier(.25,.7,.3,1) both}
 html.js .pinned:not(.is-lit) .pencil__line,html.js .pinned:not(.is-lit) .pencil__ghost{stroke-dasharray:1;stroke-dashoffset:1}
 .pinned.is-lit .pencil__line{stroke-dasharray:1;animation:fxDraw 1.3s cubic-bezier(.4,0,.2,1) .2s both}
 .pinned.is-lit .pencil__ghost{stroke-dasharray:1;animation:fxDraw 1.3s cubic-bezier(.4,0,.2,1) .35s both}
 .letter::before{transform-origin:50% 0;transition:transform .9s cubic-bezier(.2,.8,.2,1) .1s}
 html.js .letter:not(.is-lit)::before{transform:scaleY(1.8)}
 html.js .letter:not(.is-lit) .letter__seal{opacity:0}
 .letter.is-lit .letter__seal{animation:fxStamp .55s cubic-bezier(.3,1.4,.5,1) .7s both}
 .foot__sun{transition:transform 1.8s cubic-bezier(.2,.8,.2,1) .2s,opacity 1.4s ease .2s}
 html.js .foot__in:not(.is-lit) .foot__sun{opacity:0;transform:translateY(30px) scale(.6)}
 .foot__in.is-lit .foot__sun{transform:translateY(-10px)}
 [data-navclock].is-roll{animation:fxRoll .5s cubic-bezier(.2,.8,.2,1)}
 @supports (animation-timeline:view()){.receipt__paper{animation:fxRise linear both;animation-timeline:view();animation-range:entry 0% entry 70%}}
}
@keyframes fxBreathe{from{opacity:.75}to{opacity:1}}
@keyframes fxSteam{0%{opacity:0;transform:translateY(12%) scaleX(1)}25%{opacity:.75}60%{opacity:.35;transform:translateY(-14%) scaleX(1.12)}100%{opacity:0;transform:translateY(-34%) scaleX(.9)}}
@keyframes fxDust{0%,100%{opacity:0;transform:translate(0,0)}30%{opacity:.85}60%{opacity:.5;transform:translate(10px,-22px)}85%{opacity:0;transform:translate(-6px,-40px)}}
@keyframes fxTwinkle{from{opacity:.2}to{opacity:.85}}
@keyframes fxFall{from{transform:translateY(-8%)}to{transform:translateY(102%)}}
@keyframes fxSway{from{transform:translateX(-4px)}to{transform:translateX(5px)}}
@keyframes fxRay{from{opacity:.35;transform:translateX(-2%)}to{opacity:.8;transform:translateX(2%)}}
@keyframes fxMote{0%,100%{opacity:0;transform:translate(0,0)}25%{opacity:.9}70%{opacity:.4;transform:translate(18px,-30px)}90%{opacity:0;transform:translate(26px,-46px)}}
@keyframes fxLampOff{0%{opacity:1}14%{opacity:.25}22%{opacity:.95}34%{opacity:.15}42%{opacity:.6}100%{opacity:0}}
@keyframes fxIconOff{0%{opacity:1}14%{opacity:.6}22%{opacity:1}34%{opacity:.55}100%{opacity:1}}
@keyframes fxSwing{0%{transform:translateY(var(--ty)) rotate(-6deg)}32%{transform:translateY(var(--ty)) rotate(1.8deg)}56%{transform:translateY(var(--ty)) rotate(-3deg)}76%{transform:translateY(var(--ty)) rotate(-.7deg)}100%{transform:translateY(var(--ty)) rotate(-1.3deg)}}
@keyframes fxDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes fxStamp{0%{opacity:0;transform:scale(1.6) rotate(-12deg)}60%{opacity:1;transform:scale(.92) rotate(2deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes fxRoll{from{opacity:0;transform:translateY(70%)}to{opacity:1;transform:none}}
@keyframes fxRise{from{opacity:0;transform:translateY(70px) rotate(-.7deg)}to{opacity:1;transform:translateY(0) rotate(-.7deg)}}
@media (max-width:699px){.foot__links{display:grid;grid-template-columns:auto auto;justify-content:center;column-gap:28px}.foot__links li+li::before{content:none}}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:24px;z-index:3;pointer-events:none;background:linear-gradient(180deg,rgba(23,17,13,0),#17110D)}
@media (min-width:900px){.final::before{background:linear-gradient(0deg,var(--wood) 0,var(--wood) 6px,rgba(168,121,79,.85) calc(6px + 1%),rgba(168,121,79,.3) 4.5%,rgba(168,121,79,0) 8%),linear-gradient(90deg,var(--paper) 0,var(--paper) 18%,rgba(251,245,236,.9) 30%,rgba(251,245,236,.45) 46%,rgba(251,245,236,0) 58%)!important}}
.trend{overflow-x:clip}
@media (prefers-reduced-motion:no-preference) and (max-width:899px){html.js .pinned:not(.is-lit){transform:translateY(var(--ty)) rotate(-3deg)!important}}
.final__lamp{color:var(--ink)!important;padding:3px 10px 4px;border-radius:99px;background:rgba(251,245,236,.72)}
@media (prefers-reduced-motion:no-preference){.fx-snow i::before{animation-play-state:paused!important}.is-vis .fx-snow i::before,.fx-all .fx-snow i::before{animation-play-state:running!important}}
/* ═══ round 21 — sunrise: whole Ponya on the real counter; the counter's front edge is the seam ═══ */
:root{--edge:#7a4f30;--edge-d:#5c3a22}
@media (min-width:900px){
  /* source rows 100 → 1460 of 2752×1536: box = 1360/2752 of the width; image fills the width */
  .final{--H:calc(100vw * 1360 / 2752);min-height:var(--H)!important;height:auto;padding:var(--sec-y) 0!important}
  .final__bg img{object-position:62% 56.8%!important}
  .final::after{height:64px!important;background:linear-gradient(180deg,var(--paper),rgba(251,245,236,0))!important}
  /* paper behind the copy only: fades out before the bowl and never reaches the counter */
  .final::before{background:linear-gradient(90deg,var(--paper) 0,var(--paper) 18%,rgba(251,245,236,.9) 30%,rgba(251,245,236,.45) 42%,rgba(251,245,236,0) 50%)!important;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 60%,transparent 74%);mask-image:linear-gradient(180deg,#000 0,#000 60%,transparent 74%)}
  .final__lamp{left:calc(80vw + 18px)!important;top:5.2vw!important}
  /* the footer's wood strip continues the counter's front edge (left corner of the counter ≈ 33.8% of the width) */
  .foot::after{content:"";position:absolute;top:0;left:33.8%;right:0;height:14px;border-radius:0 0 0 3px;background:linear-gradient(180deg,var(--edge) 0,#734a2c 70%,var(--edge-d) 100%);box-shadow:0 6px 14px rgba(60,32,16,.18)}
  .foot{background:repeating-linear-gradient(45deg,rgba(120,90,60,.035) 0 1px,transparent 1px 4px),repeating-linear-gradient(-45deg,rgba(120,90,60,.03) 0 1px,transparent 1px 5px),var(--linen)!important;padding-top:56px!important}
  .foot::before{display:none}
}
@media (max-width:899px){
  .final__bg::after{background:linear-gradient(180deg,rgba(251,245,236,0) 94%,var(--paper) 100%)!important}
  .final::after{display:none!important}
  .foot{background:linear-gradient(180deg,var(--edge) 0,var(--edge) 10px,var(--edge-d) 12px,rgba(60,32,16,.16) 12px,rgba(60,32,16,0) 30px),repeating-linear-gradient(45deg,rgba(120,90,60,.035) 0 1px,transparent 1px 4px),var(--linen)!important}
  .foot::before{display:none}
}
@media (min-width:900px){
  .final{--H:calc(100vw * 1390 / 2752)}
  .final__bg img{object-position:62% 47.9%!important}
  .final::after{height:36px!important}
  .final__lamp{top:6.6vw!important}
  /* left of the counter (plain wall) melts into the linen; the counter itself is untouched */
  .final__bg::after{content:"";position:absolute;left:0;bottom:0;width:33.8%;height:110px;background:linear-gradient(0deg,var(--linen) 0,rgba(244,235,223,0) 100%);-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
}
/* 900–1099: copy first, then the full counter scene below it (no copy over the bowl) */
@media (min-width:900px) and (max-width:1099px){
  .final{display:flex!important;flex-direction:column;min-height:0!important;padding:var(--sec-y) 0 0!important}
  .final__in{order:0;width:100%}
  .final__lamp{order:1;position:relative!important;left:auto!important;top:auto!important;align-self:flex-start;margin:24px 0 -44px calc(80vw + 18px)!important;z-index:2}
  .final__bg{order:2;position:relative!important;inset:auto!important;z-index:0!important;margin:0!important;aspect-ratio:2752/1390}
  .final__bg img{position:absolute;inset:0;width:100%;height:100%;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 56px);mask-image:linear-gradient(180deg,transparent 0,#000 56px)}
  .final::before,.final::after{display:none!important}
}
@media (min-width:900px) and (max-width:1099px){.final__bg{display:block!important;width:100%!important;align-self:stretch}}
/* ═══ round 21b — whole Ponya everywhere ═══ */
/* 6:20 window: source rows 450 → 1430 (ears to sill) at full width; feather top & sides only, the sill stays solid */
.trust{--ih:calc(100vw * 980 / 2752)!important}
.dawn__img img{object-position:50% 81%!important;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 94%,transparent 100%),linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%)!important;mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 94%,transparent 100%),linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%)!important;-webkit-mask-composite:source-in!important;mask-composite:intersect!important}
.trust{background:linear-gradient(180deg,var(--c-e) 0,var(--c-e) calc(var(--ie) - 30px),#4a3236 var(--ie),#8f6563 calc(var(--ie) + 70px),#d4ab98 calc(var(--ie) + 140px),#efd9c6 calc(var(--ie) + 190px),var(--paper) calc(var(--ie) + 240px),var(--paper) 100%)!important}
.trust .dawn{margin-bottom:200px!important}
.dawn::after{display:none!important}
@media (min-width:700px){.dawn .window__cap{left:22%!important;right:auto!important;top:calc(var(--pt) + var(--ih) * .5)!important;bottom:auto!important;transform:none!important}}
@media (max-width:699px){
  .trust{--ih:calc(100vw * 990 / 1144)!important}
  .dawn__img img{object-position:50% 82.4%!important}
  .trust .dawn{margin-bottom:150px!important}
  .dawn .window__cap{left:16px!important;top:calc(var(--pt) + 12px)!important;bottom:auto!important}
}
/* 1:20 notebook: the top fade ends above the ears */
.food__img img{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 clamp(48px,8vw,150px),#000 82%,transparent 100%)!important;mask-image:linear-gradient(180deg,transparent 0,#000 clamp(48px,8vw,150px),#000 82%,transparent 100%)!important}
@media (max-width:699px){.food__img img{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 13%,#000 86%,transparent 100%)!important;mask-image:linear-gradient(180deg,transparent 0,#000 13%,#000 86%,transparent 100%)!important}.food__band::after{background:linear-gradient(180deg,rgba(23,17,13,.8) 0,rgba(23,17,13,0) 12%,rgba(26,17,12,0) 80%,#1a110c 100%)!important}}
/* 2:00 shelf: shorter top fade (ears clear) */
@media (min-width:1100px){.phones{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 clamp(40px,4.5vw,90px),#000 87%,rgba(0,0,0,.45) 94%,transparent 100%)!important;mask-image:linear-gradient(180deg,transparent 0,#000 clamp(40px,4.5vw,90px),#000 87%,rgba(0,0,0,.45) 94%,transparent 100%)!important}}
/* carousel (<1100): the band ends after phone 4, so Ponya is never half-shown at the scroll end */
@media (max-width:1099px){
  .phones__band{width:calc(var(--bw) * .762)!important;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#000 96%,transparent);mask-image:linear-gradient(90deg,#000 96%,transparent)}
  .phones__img,.phones__img img{width:var(--bw)!important;max-width:none}
  .scr{width:calc(10.54% / .762)!important}
  .scr--1{left:calc(20.08% / .762)!important}.scr--2{left:calc(35.10% / .762)!important}.scr--3{left:calc(50.13% / .762)!important}.scr--4{left:calc(65.09% / .762)!important}
  .phones__cap{width:calc(12.5% / .762)!important}.phones__cap--4{width:calc(10.6% / .762)!important}
  .phones__cap--1{left:calc(20.08% / .762)!important}.phones__cap--2{left:calc(35.10% / .762)!important}.phones__cap--3{left:calc(50.13% / .762)!important}.phones__cap--4{left:calc(65.09% / .762)!important}
}
/* hero ≥1000: the side shade stops before the leaf; the card stays clear of the tail */
@media (min-width:1000px){.hero__photo::after{background:linear-gradient(90deg,var(--night) 0,rgba(23,17,13,.94) 18%,rgba(23,17,13,.55) 27%,rgba(23,17,13,0) 35%),linear-gradient(0deg,rgba(23,17,13,.5) 0,rgba(23,17,13,0) 12%)!important}.hcard__items{display:none!important}}
/* hero 700–999: the card moves to the empty left, under the headline */
@media (min-width:700px) and (max-width:999px){.hero__slot{order:-1;position:relative!important;left:auto!important;top:auto!important;height:0;margin:28px 0 0!important;align-self:flex-start;width:min(300px,40vw)!important;z-index:5}}
/* hero ≤699: source rows 520 → 1400 (ears to feet), thin shades only at the very edges */
@media (max-width:699px){
  .hero__photo{height:calc(100vw * 880 / 1229)!important}
  .hero__box{top:0!important;transform:translateY(-33.85%)!important}
  .hero__photo::after{background:linear-gradient(180deg,var(--night) 0,rgba(23,17,13,0) 9%),linear-gradient(0deg,var(--night) 0,rgba(23,17,13,0) 7%)!important}
  .hero .cta__meta{display:none}
  .hero__tools{margin:8px 0 6px!important}
}
@media (max-width:699px) and (max-height:700px){
  .hero__photo{height:150px!important}
  .hero__box{width:calc(150px * 1229 / 880)!important;left:calc(50% - 150px * 1229 / 1760)!important;right:auto!important;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
  .hero__tools{margin:4px 0 4px!important}
  .hero__slot{margin-top:8px!important}
}
@media (min-width:1000px) and (max-width:1439px){.hero__slot{width:236px!important}}
@media (max-width:699px) and (max-height:700px){.hero__box{-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 96.5%,transparent)!important;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 96.5%,transparent)!important}}
/* seam = the counter's front: wood only where the photo's counter front reaches the bottom row (48.2% → 93.7%) */
@media (min-width:900px){
  .foot::after{left:48.2%!important;right:6.3%!important;border-radius:0 0 3px 3px!important}
  .final__bg::after{left:0!important;right:0!important;width:auto!important;height:110px!important;-webkit-mask-image:none!important;mask-image:none!important;background:linear-gradient(0deg,var(--linen),rgba(244,235,223,0)) 0 100%/33.8% 100% no-repeat,linear-gradient(0deg,var(--linen),rgba(244,235,223,0)) 39.49% 100%/14.4% 32px no-repeat,linear-gradient(0deg,var(--linen),rgba(244,235,223,0)) 100% 100%/6.3% 32px no-repeat!important}
}
@media (min-width:900px) and (max-width:1099px){.final__bg::after{content:"";position:absolute;bottom:0}}
@media (max-width:899px){.foot{background:linear-gradient(180deg,var(--paper),rgba(244,235,223,0) 48px),repeating-linear-gradient(45deg,rgba(120,90,60,.035) 0 1px,transparent 1px 4px),var(--linen)!important}}
/* the strip IS the photo: the same sunrise image, continued from source row 1460 (the counter front runs on into the footer) */
@media (min-width:900px){.foot::after{height:max(14px,1vw)!important;border-radius:0 0 3px 3px!important;background:linear-gradient(180deg,rgba(60,32,16,0) 55%,rgba(60,32,16,.35) 100%),image-set(url(/assets/img/sunrise-1920.v7.avif) type("image/avif"),url(/assets/img/sunrise-1920.v7.webp) type("image/webp")) calc(-48.2vw) calc(-100vw * 1460 / 2752)/100vw auto no-repeat!important}}
@media (max-width:899px){.final__in{margin-top:12px!important}}
@media (max-width:899px){.trust{background:linear-gradient(180deg,var(--c-e) 0,var(--c-e) calc(var(--ie) - 20px),#4a3236 var(--ie),#8f6563 calc(var(--ie) + 40px),#d4ab98 calc(var(--ie) + 80px),#efd9c6 calc(var(--ie) + 110px),var(--paper) calc(var(--ie) + 140px),var(--paper) 100%)!important}}
@media (min-width:1000px){.hero .status{padding:3px 10px 3px 8px;border-radius:99px;background:rgba(18,13,10,.66)}}
/* ═══ round 22 — sunrise bottom: the photo down to the cabinet, one soft full-width fade into the linen ═══ */
@media (min-width:900px){
  .foot::after{display:none!important}
  .foot{padding-top:44px!important}
  /* source rows 70 → 1536 */
  .final{--H:calc(100vw * 1466 / 2752)!important}
  .final__bg img{object-position:62% 100%!important}
  .final__bg::after{content:""!important;position:absolute!important;left:0!important;right:0!important;bottom:0!important;width:auto!important;height:max(80px,calc(100vw * 130 / 2752))!important;background:linear-gradient(0deg,var(--linen) 0,var(--linen) 6%,rgba(244,235,223,.82) 30%,rgba(244,235,223,.45) 58%,rgba(244,235,223,.14) 82%,rgba(244,235,223,0) 100%)!important}
  /* one light tone on the left all the way down; the wide wash behind the copy curves away before the bowl */
  .final::before{-webkit-mask-image:none!important;mask-image:none!important;background:radial-gradient(ellipse 54% 64% at 0 30%,rgba(251,245,236,.9) 55%,rgba(251,245,236,0) 100%),linear-gradient(90deg,var(--paper) 0,var(--paper) 20%,rgba(251,245,236,.8) 28%,rgba(251,245,236,0) 36%)!important}
}
@media (min-width:1100px){.final__lamp{top:6.3vw!important}}
@media (min-width:900px){
  .final__bg::after{background:linear-gradient(0deg,var(--paper) 0,var(--paper) 6%,rgba(251,245,236,.82) 30%,rgba(251,245,236,.45) 58%,rgba(251,245,236,.14) 82%,rgba(251,245,236,0) 100%)!important}
  .foot{background:linear-gradient(180deg,var(--paper),rgba(244,235,223,0) 90px),repeating-linear-gradient(45deg,rgba(120,90,60,.035) 0 1px,transparent 1px 4px),repeating-linear-gradient(-45deg,rgba(120,90,60,.03) 0 1px,transparent 1px 5px),var(--linen)!important}
}
/* ═══ round 23 ═══ */
/* 3:30 — the sleeping Ponya melts into the indigo: no box, no blurry window strip */
.friend .still330{width:min(860px,100%)!important;margin:var(--s4) auto 0!important;justify-self:center!important}
.still330::after,.still330::before{display:none!important}
.still330__img img{aspect-ratio:2070/1642!important;object-fit:cover;object-position:50% 50%!important;border-radius:0!important;box-shadow:none!important;-webkit-mask-image:radial-gradient(ellipse 48% 54% at 52% 54%,#000 66%,transparent 100%)!important;mask-image:radial-gradient(ellipse 48% 54% at 52% 54%,#000 66%,transparent 100%)!important;-webkit-mask-composite:source-over!important;mask-composite:add!important}
@media (max-width:699px){.friend .still330{width:calc(100% + var(--gutter) * 2)!important;margin:var(--s3) calc(var(--gutter) * -1) 0!important}}
.still330 figcaption{bottom:4%!important}
/* 7:02 at phones: the full lamp shade with headroom, a short soft top fade above it */
@media (max-width:899px){.final__bg img{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24px)!important;mask-image:linear-gradient(180deg,transparent 0,#000 24px)!important;object-position:50% 0!important}}
/* 1:20 receipt: always visible; scrolling only lifts it a little */
@keyframes fxRise{from{opacity:.85;transform:translateY(24px) rotate(-.7deg)}to{opacity:1;transform:translateY(0) rotate(-.7deg)}}
.receipt .log__note{width:100%;text-align:center!important;margin-left:0!important;margin-right:0!important}
@media (prefers-reduced-motion:no-preference){
 .fx-snow{left:11%!important;width:45%!important;top:calc(var(--pt,0px) + var(--ih) * .03)!important;height:calc(var(--ih) * .72)!important}
 .fx-snow i{width:14px!important}
 .fx-snow i::before{background:radial-gradient(circle,#fff 0,#fff 45%,rgba(255,255,255,0) 75%)!important;animation-name:fxSway2!important}
 .fx-snow i:nth-child(1){left:43.4%!important;--s:4px!important;--o:0.90!important;animation-duration:9.9s!important;animation-delay:-5.0s!important}
 .fx-snow i:nth-child(2){left:82.1%!important;--s:3px!important;--o:0.66!important;animation-duration:8.6s!important;animation-delay:-6.9s!important}
 .fx-snow i:nth-child(3){left:76.1%!important;--s:2px!important;--o:0.76!important;animation-duration:6.7s!important;animation-delay:-5.9s!important}
 .fx-snow i:nth-child(4){left:85.5%!important;--s:5px!important;--o:0.61!important;animation-duration:10.9s!important;animation-delay:-10.6s!important}
 .fx-snow i:nth-child(5){left:62.8%!important;--s:4px!important;--o:0.83!important;animation-duration:9.1s!important;animation-delay:-9.1s!important}
 .fx-snow i:nth-child(6){left:6.1%!important;--s:2px!important;--o:0.67!important;animation-duration:7.2s!important;animation-delay:-0.3s!important}
 .fx-snow i:nth-child(7){left:44.5%!important;--s:4px!important;--o:0.81!important;animation-duration:7.0s!important;animation-delay:-2.6s!important}
 .fx-snow i:nth-child(8){left:28.2%!important;--s:2px!important;--o:0.83!important;animation-duration:8.3s!important;animation-delay:-3.1s!important}
 .fx-snow i:nth-child(9){left:95.8%!important;--s:5px!important;--o:0.63!important;animation-duration:7.3s!important;animation-delay:-8.3s!important}
 .fx-snow i:nth-child(10){left:49.2%!important;--s:2px!important;--o:0.62!important;animation-duration:9.8s!important;animation-delay:-4.4s!important}
 .fx-snow i:nth-child(11){left:81.3%!important;--s:4px!important;--o:0.62!important;animation-duration:6.1s!important;animation-delay:-7.5s!important}
 .fx-snow i:nth-child(12){left:20.5%!important;--s:2px!important;--o:0.76!important;animation-duration:10.9s!important;animation-delay:-4.4s!important}
 .fx-snow i:nth-child(13){left:7.0%!important;--s:5px!important;--o:0.67!important;animation-duration:9.4s!important;animation-delay:-3.7s!important}
 .fx-snow i:nth-child(14){left:29.9%!important;--s:2px!important;--o:0.94!important;animation-duration:9.8s!important;animation-delay:-1.3s!important}
 .fx-snow i:nth-child(15){left:23.7%!important;--s:2px!important;--o:0.60!important;animation-duration:8.3s!important;animation-delay:-5.4s!important}
 .fx-snow i:nth-child(16){left:65.5%!important;--s:3px!important;--o:0.76!important;animation-duration:7.0s!important;animation-delay:-8.1s!important}
 .fx-snow i:nth-child(17){left:12.6%!important;--s:5px!important;--o:0.73!important;animation-duration:8.0s!important;animation-delay:-10.9s!important}
 .fx-snow i:nth-child(18){left:0.0%!important;--s:5px!important;--o:0.94!important;animation-duration:10.0s!important;animation-delay:-3.3s!important}
 .fx-snow i:nth-child(19){left:84.9%!important;--s:3px!important;--o:0.67!important;animation-duration:11.0s!important;animation-delay:-6.6s!important}
 .fx-snow i:nth-child(20){left:55.4%!important;--s:2px!important;--o:0.95!important;animation-duration:7.1s!important;animation-delay:-2.8s!important}
 .fx-snow i:nth-child(21){left:74.2%!important;--s:3px!important;--o:0.89!important;animation-duration:7.9s!important;animation-delay:-0.8s!important}
 .fx-snow i:nth-child(22){left:20.0%!important;--s:5px!important;--o:0.69!important;animation-duration:9.0s!important;animation-delay:-4.1s!important}
 .fx-snow i:nth-child(23){left:43.5%!important;--s:4px!important;--o:0.77!important;animation-duration:8.9s!important;animation-delay:-9.5s!important}
 .fx-snow i:nth-child(24){left:17.6%!important;--s:3px!important;--o:0.71!important;animation-duration:7.1s!important;animation-delay:-6.7s!important}
 .fx-snow i:nth-child(25){left:69.6%!important;--s:3px!important;--o:0.86!important;animation-duration:10.7s!important;animation-delay:-2.2s!important}
 .fx-snow i:nth-child(26){left:91.2%!important;--s:4px!important;--o:0.81!important;animation-duration:8.1s!important;animation-delay:-1.1s!important}
 .fx-snow i:nth-child(27){left:3.7%!important;--s:3px!important;--o:0.68!important;animation-duration:9.5s!important;animation-delay:-2.8s!important}
 .fx-snow i:nth-child(28){left:79.1%!important;--s:4px!important;--o:0.77!important;animation-duration:8.6s!important;animation-delay:-10.2s!important}
 .fx-snow i:nth-child(29){left:93.8%!important;--s:3px!important;--o:0.68!important;animation-duration:8.8s!important;animation-delay:-9.4s!important}
 .fx-snow i:nth-child(30){left:59.0%!important;--s:3px!important;--o:0.67!important;animation-duration:10.6s!important;animation-delay:-8.2s!important}
 .fx-snow i:nth-child(31){left:6.6%!important;--s:4px!important;--o:0.76!important;animation-duration:6.3s!important;animation-delay:-1.9s!important}
 .fx-snow i:nth-child(32){left:35.4%!important;--s:4px!important;--o:0.94!important;animation-duration:6.5s!important;animation-delay:-1.5s!important}
 .fx-snow i:nth-child(33){left:43.2%!important;--s:3px!important;--o:0.83!important;animation-duration:9.5s!important;animation-delay:-6.4s!important}
 .fx-snow i:nth-child(34){left:13.5%!important;--s:2px!important;--o:0.92!important;animation-duration:8.4s!important;animation-delay:-3.9s!important}
 .fx-snow i:nth-child(35){left:29.9%!important;--s:2px!important;--o:0.61!important;animation-duration:9.2s!important;animation-delay:-5.3s!important}
 .fx-snow i:nth-child(36){left:70.1%!important;--s:3px!important;--o:0.65!important;animation-duration:6.4s!important;animation-delay:-5.0s!important}
 .fx-snow i:nth-child(37){left:35.3%!important;--s:2px!important;--o:0.92!important;animation-duration:9.7s!important;animation-delay:-7.7s!important}
 .fx-snow i:nth-child(38){left:76.2%!important;--s:3px!important;--o:0.72!important;animation-duration:9.4s!important;animation-delay:-9.9s!important}
 .fx-snow i:nth-child(39){left:83.6%!important;--s:4px!important;--o:0.93!important;animation-duration:6.2s!important;animation-delay:-5.5s!important}
 .fx-snow i:nth-child(40){left:1.4%!important;--s:5px!important;--o:0.73!important;animation-duration:8.9s!important;animation-delay:-6.7s!important}
 .fx-snow i:nth-child(n+23){display:block}
 .fx-steam path{stroke:rgba(255,240,224,.72)!important;stroke-width:3.2!important}
 .fx-steam{filter:blur(.9px)!important}
 @supports (animation-timeline:view()){
  .screens{timeline-scope:--lamp}
  .tick{view-timeline:--lamp block}
  .fx-warm{display:block!important;position:absolute;z-index:-1;left:0;right:0;top:35%;bottom:0;pointer-events:none;background:radial-gradient(75% 65% at 50% 45%,rgba(255,164,84,.52),rgba(255,164,84,.22) 55%,rgba(255,164,84,0) 88%);-webkit-mask-image:linear-gradient(180deg,#000 0,#000 72%,transparent 96%);mask-image:linear-gradient(180deg,#000 0,#000 72%,transparent 96%);animation:fxDim linear both;animation-timeline:--lamp;animation-range:entry 20% exit 40%}
  .tick__glow{opacity:1}
  html.js .tick .tick__glow{animation:fxLampOff2 linear both!important;animation-timeline:--lamp!important;animation-range:entry 40% cover 60%!important}
  html.js .tick svg{animation:fxIconOff2 linear both!important;animation-timeline:--lamp!important;animation-range:entry 40% cover 60%!important}
 }
}
.fx-warm{display:none}
@keyframes fxSway2{from{transform:translateX(-9px)}to{transform:translateX(9px)}}
@keyframes fxDim{0%{opacity:1}100%{opacity:0}}
@keyframes fxLampOff2{0%{opacity:1;transform:scale(1.25)}30%{opacity:.2}38%{opacity:.9}52%{opacity:.1}60%{opacity:.55}100%{opacity:0;transform:scale(.8)}}
@keyframes fxIconOff2{0%{opacity:1;stroke:#f2b872}30%{opacity:.5}38%{opacity:1;stroke:#f2b872}52%{opacity:.4}100%{opacity:1;stroke:#a8978a}}
@media (min-width:1100px){.receipt .log__note{text-align:left!important;padding-left:var(--s3)}}
@media (max-width:899px){.final__lamp{left:16px!important;top:44px!important}.final__lamp::before{display:none}}
.phones__cap{color:#ece2d6!important}.phones__cap span{color:#ffcf96!important}.phones__dots span{color:#d6c6b6!important}
.phones__cap span{color:#ffdcae!important}