/* Landing page (index.html + zh/index.html): "the site is a piece of audio
   that already has notes on it". Chapters carry timecodes on a vertical axis;
   with JS on, scrolling is playback and a player bar rides the bottom
   (home.js). Without JS it reads as an ordinary page.

   Tokens mirror the app's Cocoa palette (DESIGN.md §2, Sources/Views/CocoaTheme.swift):
   cold-grey paper, graphite ink, burnt-orange accent. Names follow the app's
   (`cream` is kept as the name; the colour is the 1.4+ cold-grey paper). */
:root{
  --cream:#eeeff1; --cream-2:#e5e6e9; --cream-3:#fafafb;
  --ink:#242527; --ink-2:#5c5e61; --ink-3:#696a6d; --ink-4:#8e9094;
  --accent:#c9531a; --accent-ink:#ae4816; --accent-deep:#8f3b12;
  --rule:#d6d8db;
  --foot-muted:#b5b7ba;
  --device:#1b1c1e;
  --maxw:1080px;
  --gut:140px;      /* timecode gutter */
  --axis:99px;      /* x of the vertical axis inside the gutter */
  --head:64px;
  --bar:84px;
  --drawer:360px;
  --serif:ui-serif,"New York",Georgia,"Iowan Old Style","Apple Garamond",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --time:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box;}
[hidden]{display:none!important;}
html,body{margin:0;padding:0;}
body{background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
.js body{padding-bottom:var(--bar);}
img{max-width:100%;display:block;}
a{color:var(--accent-ink);}
a:hover{color:var(--accent-deep);}
button{font:inherit;color:inherit;}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible,[role="slider"]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
h1,h2,h3{font-family:var(--serif);font-weight:600;margin:0;text-wrap:balance;}
/* CJK headings break at their punctuation, not mid-phrase */
html[lang^="zh"] h1,html[lang^="zh"] h2{text-wrap:wrap;word-break:keep-all;overflow-wrap:anywhere;}
p{margin:0;}
html:not(.js) .js-only{display:none!important;}
.tc{font-family:var(--time);font-variant-numeric:tabular-nums;}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 22px;border-radius:999px;border:0;background:var(--accent);color:#fff;text-decoration:none;font-size:15px;font-weight:600;cursor:pointer;white-space:nowrap;}
.btn:hover{background:var(--accent-ink);color:#fff;}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--rule);font-weight:500;padding:0 20px;}
.btn.ghost:hover{border-color:var(--ink-3);color:var(--ink);}

/* Header */
.site-header{position:sticky;top:0;z-index:30;height:var(--head);background:var(--cream);border-bottom:1px solid var(--rule);}
.site-header .in{height:100%;padding:0 28px;display:flex;align-items:center;justify-content:space-between;}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);}
.brand:hover{color:var(--ink);}
.brand img{width:32px;height:32px;border-radius:7px;}
.brand b{font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:-0.02em;}
.brand span{font-size:13px;color:var(--ink-3);}
.nav{display:flex;align-items:center;gap:22px;font-size:15px;}
.nav a{color:var(--ink-2);text-decoration:none;}
.nav a:hover{color:var(--ink);}
.nav .btn{height:38px;padding:0 16px;font-size:15px;color:#fff;}
.nav .btn:hover{color:#fff;}

/* Page column + the vertical listening axis */
.page{transition:margin-right .2s ease;}
.wrap{position:relative;max-width:var(--maxw);margin:0 auto;padding-right:56px;}
.wrap::before{content:"";position:absolute;left:var(--axis);top:0;bottom:0;width:1px;background:var(--rule);}
.ch{display:grid;grid-template-columns:var(--gut) minmax(0,1fr);scroll-margin-top:var(--head);}
.ch-gut{position:relative;}
.ch-body{padding:64px 0;border-top:1px solid var(--rule);min-width:0;}
.ch-body.narrow{max-width:760px;}

/* Gutter marker: timecode over a dot sitting on the axis */
.gm{position:absolute;left:calc(var(--axis) + 1px);top:64px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;padding:4px 2px;border:0;background:var(--cream);color:var(--ink-3);text-decoration:none;cursor:pointer;}
.gm-tc{font-family:var(--time);font-size:13px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;}
.gm-dot{width:7px;height:7px;border-radius:50%;border:1.5px solid var(--ink-4);background:var(--cream);transition:transform .15s;}
.gm-name{display:none;}
.gm.noted{color:var(--accent-ink);}
.gm.noted .gm-dot{width:9px;height:9px;border:0;background:var(--accent);}
.gm:hover .gm-dot{transform:scale(1.35);}
.gm:hover .gm-tc{text-decoration:underline;}

.eyebrow{margin:0 0 10px;font-size:13px;letter-spacing:.14em;color:var(--ink-3);font-weight:500;}
html[lang="en"] .eyebrow{font-size:12px;text-transform:uppercase;}
.ch h2{font-size:30px;line-height:1.22;letter-spacing:-0.01em;margin:0 0 14px;}
.lead{font-size:17px;color:var(--ink-2);}

/* Hero */
.hero .gm{top:60px;}
.hero .ch-body{padding:56px 0 64px;border-top:0;display:flex;gap:48px;align-items:center;}
.hero-copy{flex:1 1 auto;min-width:0;}
.hero h1{font-size:46px;line-height:1.1;letter-spacing:-0.02em;margin:0 0 18px;}
.hero .lead{font-size:18px;max-width:34em;margin:0 0 26px;}
.cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
.haxis{position:relative;height:70px;margin-top:48px;}
.haxis::before{content:"";position:absolute;left:0;right:0;top:29px;height:1px;background:var(--rule);}
.hm{position:absolute;top:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:var(--ink-2);}
.hm-tc{font-family:var(--time);font-size:14px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;color:var(--accent-ink);}
.hm i{display:block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-top:4px;}
.hm-lb{font-size:12px;line-height:1;white-space:nowrap;}
.hm:hover .hm-tc{text-decoration:underline;}
.hero-hint{margin-top:14px;font-size:14px;color:var(--ink-2);}

/* Device frames */
.device{width:210px;flex-shrink:0;background:var(--device);border-radius:34px;padding:7px;box-shadow:0 24px 48px -20px rgba(36,37,39,.32);}
.device img{width:196px;height:auto;aspect-ratio:900/1956;object-fit:cover;border-radius:27px;}
.hero .device{width:236px;border-radius:38px;padding:8px;}
.hero .device img{width:220px;border-radius:30px;}

.trust{margin-left:var(--gut);display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 16px;padding:14px 0;border-top:1px solid var(--rule);font-size:14px;color:var(--ink-2);}

/* Feature chapters */
.split{display:flex;gap:56px;align-items:center;}
.split .copy{flex:1 1 auto;min-width:0;}
.pin{display:flex;gap:12px;align-items:flex-start;margin-top:18px;padding:12px 16px;background:var(--cream-3);border:1px solid var(--rule);border-radius:12px;max-width:420px;}
.pin > i{width:8px;height:8px;margin-top:7px;border-radius:50%;background:var(--accent);flex-shrink:0;}
.pin > span{display:flex;flex-direction:column;gap:2px;}
.pin-tc{font-family:var(--time);font-size:12px;font-weight:600;color:var(--accent-ink);font-variant-numeric:tabular-nums;}
.pin-tx{font-family:var(--serif);font-size:17px;line-height:1.45;}
.try{display:flex;align-items:center;gap:10px;margin-top:12px;padding:10px 14px;border:1px dashed var(--accent);border-radius:12px;max-width:420px;}
.try span{font-size:14px;color:var(--ink-2);flex-grow:1;}
.try button{height:36px;padding:0 14px;border-radius:999px;border:0;background:var(--accent);color:#fff;font-weight:600;font-size:14px;cursor:pointer;flex-shrink:0;}
.try button:hover{background:var(--accent-ink);}
.copy ul{list-style:none;padding:0;margin:18px 0 0;border-top:1px solid var(--rule);}
.copy li{padding:9px 0;border-bottom:1px solid var(--rule);color:var(--ink-2);font-size:15px;}
.more{display:inline-block;margin-top:16px;font-weight:600;text-decoration:none;}
.more:hover{text-decoration:underline;}

/* Headphones: three set-up steps, the chime button, and a ring on the
   Headphone Controls card in the real Settings shot (an overlay, so no copy
   is baked into the image). --hl-top is the card's top as a share of that
   locale's image height. */
.hp-steps{list-style:none;counter-reset:hp;padding:0;margin:0;display:grid;gap:10px;max-width:460px;flex:1 1 auto;}
.copy .hp-steps li{counter-increment:hp;display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:baseline;padding:0;border:0;font-size:15px;color:var(--ink-2);}
.hp-steps li::before{content:counter(hp);width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;font-size:13px;font-weight:600;display:grid;place-items:center;align-self:start;margin-top:1px;}
.hp-steps b{color:var(--ink);font-weight:600;}
.hp-chime{margin-left:6px;height:28px;padding:0 12px;border-radius:999px;border:1px solid var(--accent);background:transparent;color:var(--accent-ink);font-size:13px;font-weight:600;cursor:pointer;vertical-align:1px;}
.hp-chime:hover{background:var(--accent);color:#fff;}
.hp-chime.ring{animation:hp-ring .5s ease-out;}
@keyframes hp-ring{0%{box-shadow:0 0 0 0 rgba(201,83,26,.45);}100%{box-shadow:0 0 0 12px rgba(201,83,26,0);}}
.hp-shot{position:relative;display:block;}
.hp-shot img{display:block;}
.hp-hl{position:absolute;left:3%;right:3%;top:calc(var(--hl-top) - .7%);height:13.6%;border:2px solid var(--accent);border-radius:12px;box-shadow:0 0 0 4px rgba(201,83,26,.14);pointer-events:none;}
/* The earbuds beside the steps, as in the App Store shot (icon + how-to):
   the same drawing (tools/appstore/bookmark_variants.py `_draw_earbuds`),
   ring on the stem that gets pressed. "Play it" adds .press: two ripples,
   then the chime. Phone: above the steps. */
.hp-how{display:flex;align-items:center;gap:36px;margin-top:22px;}
.hp-buds{width:150px;height:auto;flex-shrink:0;overflow:visible;filter:drop-shadow(0 8px 12px rgba(36,37,39,.16));}
.hp-bud{fill:#fff;stroke:#a3a7ad;stroke-width:2.5;}
.hp-port{fill:#41454b;}
.hp-mic{stroke:#41454b;stroke-width:3;stroke-linecap:round;}
.hp-ring,.hp-wave{fill:none;stroke:var(--accent);stroke-width:6;}
.hp-wave{opacity:0;transform-box:fill-box;transform-origin:center;}
.hp-dot{fill:var(--accent);transform-box:fill-box;transform-origin:center;}
.hp-x2{fill:var(--accent-ink);font:700 34px var(--sans);}
.hp-buds.press .hp-wave{animation:hp-wave .55s ease-out;}
.hp-buds.press .hp-wave + .hp-wave{animation-delay:.24s;}
.hp-buds.press .hp-dot{animation:hp-tap .24s ease-in-out 2;}
@keyframes hp-wave{0%{opacity:.9;transform:scale(.6);}100%{opacity:0;transform:scale(1.9);}}
@keyframes hp-tap{50%{transform:scale(.55);}}
@media (max-width:1000px){.hp-how{gap:24px;} .hp-buds{width:112px;}}
@media (max-width:820px){.hp-how{flex-direction:column;align-items:flex-start;gap:18px;} .hp-buds{order:-1;width:120px;margin-left:4px;}}

/* Everything else: margin-note rows, not an icon grid (DESIGN §10) */
.extras{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px;}
.extras > div{display:grid;grid-template-columns:7em minmax(0,1fr);gap:14px;padding:14px 0;border-top:1px solid var(--rule);}
html[lang="en"] .extras > div{grid-template-columns:10.5em minmax(0,1fr);}
.extras h3{font-family:var(--sans);font-size:15px;font-weight:600;}
.extras p{font-size:15px;color:var(--ink-2);}

/* Privacy */
.privacy .ch-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px;align-items:center;}
.privacy .pin{max-width:none;}
.checklist{list-style:none;padding:0;margin:0;border-top:1px solid var(--rule);}
.checklist li{padding:13px 0 13px 28px;position:relative;border-bottom:1px solid var(--rule);font-size:17px;}
.checklist li::before{content:"✓";position:absolute;left:2px;color:var(--ink-3);font-weight:600;}

/* FAQ */
.faq .ch-body{max-width:780px;}
.faq-hint{margin:0 0 20px;font-size:15px;color:var(--ink-2);}
.faq details{border-top:1px solid var(--rule);padding:14px 0;}
.faq details:last-of-type{border-bottom:1px solid var(--rule);}
.faq summary{display:flex;justify-content:space-between;gap:16px;font-weight:500;list-style:none;cursor:pointer;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";color:var(--ink-3);font-size:20px;line-height:1;transition:transform .15s;flex-shrink:0;}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq details p{margin:8px 0 0;color:var(--ink-2);}
.chip{display:inline-flex;align-items:center;gap:8px;height:34px;margin-top:10px;padding:0 14px;border:1px solid var(--rule);border-radius:999px;background:transparent;color:var(--accent-ink);font-size:13px;font-weight:600;text-decoration:none;}
.chip i{width:6px;height:6px;border-radius:50%;background:var(--accent);}
.chip:hover{border-color:var(--accent-ink);}

/* Closing */
.end .ch-body{padding:64px 0 72px;}
.end h2{font-size:34px;line-height:1.24;max-width:18em;margin-bottom:20px;}
.tally{display:flex;gap:16px;align-items:center;padding:18px 20px;background:var(--cream-3);border:1px solid var(--rule);border-radius:14px;max-width:700px;}
.tally-dots{display:flex;gap:5px;flex-shrink:0;}
.tally-dots i{width:9px;height:9px;border-radius:50%;background:var(--accent);}
.tally-dots i.me{background:var(--ink);}
.tally p{font-size:16px;line-height:1.5;flex-grow:1;}
.end .cta{margin-top:22px;}
.episodes{margin-top:56px;max-width:760px;}
.episodes ol{list-style:none;padding:0;margin:0;border-top:1px solid var(--rule);}
.episodes li{display:grid;grid-template-columns:4em minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--rule);}
html[lang="en"] .episodes li{grid-template-columns:3.4em minmax(0,1fr);}
.episodes .ep{font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums;padding-top:2px;}
.episodes a{font-weight:600;text-decoration:none;}
.episodes a:hover{text-decoration:underline;}
.episodes .ep-d{display:block;font-size:14px;color:var(--ink-2);}

/* Footer */
.site-footer{background:var(--ink);color:var(--foot-muted);padding:32px 0;}
.site-footer .in{max-width:var(--maxw);margin:0 auto;padding:0 56px 0 var(--gut);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;font-size:14px;}
.site-footer a{color:var(--cream);text-decoration:none;opacity:.85;}
.site-footer a:hover{opacity:1;color:var(--cream);}

/* 2× skim: headings and notes only */
.x2 .slow{display:none!important;}

/* ---------- Player bar (JS only) ---------- */
.player{display:none;}
.js .player{position:fixed;left:0;right:0;bottom:0;z-index:40;height:var(--bar);padding:0 24px;background:var(--cream-3);border-top:1px solid var(--rule);display:grid;grid-template-columns:290px minmax(0,1fr) auto;gap:28px;align-items:center;}
.p-meta{display:flex;align-items:center;gap:12px;min-width:0;}
.p-meta img{width:44px;height:44px;border-radius:10px;flex-shrink:0;}
.p-meta > div{min-width:0;}
.p-title{font-family:var(--serif);font-size:15px;font-weight:600;line-height:1.3;}
.p-sub{font-size:13px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.p-title.m,.p-sub.m{display:none;}
.p-track{display:flex;align-items:center;gap:14px;min-width:0;}
.p-cur{font-size:13px;font-weight:600;width:44px;text-align:right;flex-shrink:0;}
.p-rem{font-size:13px;color:var(--ink-2);width:52px;flex-shrink:0;}
.p-bar{position:relative;flex-grow:1;height:32px;cursor:pointer;touch-action:none;}
.p-bar .rail,.p-bar .fill{position:absolute;left:0;top:14px;height:3px;border-radius:2px;}
.p-bar .rail{right:0;background:var(--rule);}
.p-bar .fill{background:var(--accent);width:0;}
.p-bar .am,.p-bar .mm,.p-bar .head{position:absolute;border-radius:50%;pointer-events:none;}
.p-bar .am{top:9px;width:13px;height:13px;margin-left:-6.5px;background:var(--accent);border:2px solid var(--cream-3);}
.p-bar .mm{top:8px;width:15px;height:15px;margin-left:-7.5px;background:var(--ink);border:2px solid var(--cream-3);}
.p-bar .head{top:8.5px;width:14px;height:14px;margin-left:-7px;background:var(--cream-3);border:2px solid var(--ink);left:0;}
.p-ctl{display:flex;align-items:center;gap:8px;}
.pbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--rule);background:transparent;font-size:14px;font-weight:500;cursor:pointer;white-space:nowrap;}
.pbtn:hover{border-color:var(--ink-3);}
.pbtn svg{flex-shrink:0;}
.pbtn.speed{min-width:64px;font-weight:600;font-variant-numeric:tabular-nums;}
.pbtn.speed[aria-pressed="true"]{background:var(--ink);color:var(--cream-3);border-color:var(--ink);}
.pbtn.mark{padding:0 18px;border:0;background:var(--accent);color:#fff;font-size:15px;font-weight:600;}
.pbtn.mark:hover{background:var(--accent-ink);}
.pbtn.icon{width:44px;padding:0;border-radius:50%;}

.toast{position:fixed;left:50%;bottom:calc(var(--bar) + 20px);transform:translateX(-50%);z-index:60;max-width:calc(100vw - 32px);background:#2c2d30;color:#fff;padding:11px 20px;border-radius:999px;font-size:14px;font-weight:500;text-align:center;}

/* Resume card: "you were here last time" */
.resume{position:fixed;z-index:45;left:50%;bottom:calc(var(--bar) + 16px);transform:translateX(-50%);width:min(440px,calc(100vw - 24px));padding:14px 14px 14px 16px;background:var(--cream-3);border:1px solid var(--rule);border-radius:16px;box-shadow:0 16px 36px -18px rgba(36,37,39,.4);display:flex;align-items:center;gap:12px;}
.resume > div{flex-grow:1;min-width:0;}
.drawer-open .resume{left:calc((100vw - var(--drawer)) / 2);}
.r-k{font-size:12px;color:var(--ink-2);}
.r-v{font-family:var(--serif);font-size:17px;font-weight:600;line-height:1.35;}
.r-v .tc{color:var(--accent-ink);font-weight:600;}
.r-m{font-size:12px;color:var(--ink-2);}
.resume .r-skip{height:44px;padding:0 12px;border:0;background:transparent;font-size:14px;color:var(--ink-2);cursor:pointer;}
.resume .r-go{height:44px;padding:0 18px;border-radius:999px;border:0;background:var(--accent);color:#fff;font-size:15px;font-weight:600;cursor:pointer;}
.resume .r-go:hover{background:var(--accent-ink);}

/* ---------- Notes drawer / sheet ---------- */
.scrim{display:none;}
.drawer{position:fixed;top:var(--head);right:0;bottom:var(--bar);width:var(--drawer);z-index:35;background:var(--cream-3);border-left:1px solid var(--rule);display:flex;flex-direction:column;}
.drawer[hidden]{display:none;}
.d-grab{display:none;}
.d-head{padding:18px 20px 12px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;border-bottom:1px solid var(--rule);}
.d-title{font-family:var(--serif);font-size:21px;font-weight:600;line-height:1.3;}
.d-count{font-size:13px;color:var(--ink-2);}
.d-x{width:36px;height:36px;border-radius:50%;border:0;background:var(--cream);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.d-exp-m{display:none;}
.d-list{flex-grow:1;overflow-y:auto;overscroll-behavior:contain;}
.d-sec{padding:14px 20px 6px;font-size:12px;letter-spacing:.12em;color:var(--ink-2);font-weight:500;}
html[lang="en"] .d-sec{text-transform:uppercase;}
.nrow{display:block;width:100%;text-align:left;padding:10px 20px;border:0;background:transparent;cursor:pointer;}
.nrow:hover,.nrow.on{background:var(--cream);}
.n-meta{display:flex;align-items:center;gap:8px;font-family:var(--time);font-size:12px;font-weight:600;color:var(--accent-ink);font-variant-numeric:tabular-nums;}
.n-meta i{width:7px;height:7px;border-radius:50%;background:var(--accent);flex-shrink:0;}
.nrow.on .n-meta i{width:9px;height:9px;box-shadow:0 0 0 3px rgba(201,83,26,.22);}
.n-meta span{color:var(--ink-2);font-weight:500;font-family:var(--sans);}
.n-tx{display:block;margin-top:3px;font-family:var(--serif);font-size:15px;line-height:1.45;color:var(--ink);}
.d-empty{padding:4px 20px 16px;font-size:14px;color:var(--ink-2);}
.mrow{display:flex;gap:10px;align-items:center;padding:8px 20px;border-top:1px solid var(--cream-2);}
.m-go{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border-radius:999px;border:1px solid var(--ink);background:transparent;font-family:var(--time);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;cursor:pointer;flex-shrink:0;}
.m-go i{width:6px;height:6px;border-radius:50%;background:var(--ink);}
.m-tx{flex-grow:1;min-width:0;height:32px;border:0;border-bottom:1px solid var(--rule);background:transparent;font-family:var(--serif);font-size:15px;color:var(--ink);border-radius:0;}
.m-tx::placeholder{color:var(--ink-3);}
.m-rm{width:32px;height:32px;border:0;background:transparent;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:50%;}
.m-rm:hover{background:var(--cream);}
.d-foot{padding:12px 20px 14px;border-top:1px solid var(--rule);}
.d-exp{width:100%;height:40px;border-radius:999px;border:1px solid var(--rule);background:transparent;font-size:14px;font-weight:600;cursor:pointer;}
.d-exp:hover{border-color:var(--ink-3);}
.d-note{margin-top:8px;font-size:12px;line-height:1.5;color:var(--ink-2);text-align:center;}
.d-foot-m{display:none;}

.export{position:absolute;left:12px;right:12px;bottom:12px;top:120px;background:var(--cream-3);border:1px solid var(--rule);border-radius:14px;box-shadow:0 16px 40px -18px rgba(36,37,39,.35);display:flex;flex-direction:column;}
.export[hidden]{display:none;}
.e-head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 10px 10px 14px;border-bottom:1px solid var(--rule);}
.e-name{font-size:14px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.e-acts{display:flex;gap:6px;align-items:center;flex-shrink:0;}
.e-btn{height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--rule);background:transparent;font-size:13px;font-weight:600;cursor:pointer;}
.e-btn:hover{border-color:var(--ink-3);}
.export pre{flex-grow:1;margin:0;padding:14px;overflow:auto;white-space:pre-wrap;word-break:break-word;font-family:var(--mono);font-size:12px;line-height:1.6;color:var(--ink);}
.e-foot{padding:10px 14px 14px;font-size:12px;color:var(--ink-2);border-top:1px solid var(--rule);}

/* Wide screens: the open drawer pushes the page instead of covering it */
@media (min-width:1280px){
  .drawer-open .page{margin-right:var(--drawer);}
}
@media (min-width:821px) and (max-width:1279px){
  .drawer{box-shadow:-18px 0 40px -24px rgba(36,37,39,.35);}
}
@media (max-width:1100px) and (min-width:821px){
  .js .player{grid-template-columns:200px minmax(0,1fr) auto;gap:18px;padding:0 16px;}
  .p-rem{display:none;}
}
@media (max-width:1000px) and (min-width:821px){
  .p-meta{display:none!important;}
  .js .player{grid-template-columns:minmax(0,1fr) auto;}
}

/* ---------- Phone ---------- */
@media (max-width:820px){
  :root{--head:56px;--bar:76px;}
  body{font-size:16px;}
  .site-header .in{padding:0 16px;}
  .brand img{width:28px;height:28px;border-radius:6px;}
  .brand b{font-size:17px;}
  .brand span{display:none;}
  .nav{gap:14px;}
  .nav a.nl{display:none;}
  .nav .btn{height:36px;padding:0 14px;font-size:14px;}
  .wrap{padding:0 16px;}
  .wrap::before{display:none;}
  .ch{display:block;}
  /* The gutter marker becomes the chapter's eyebrow: "08:16 · Notes" */
  .ch-gut{padding-top:48px;}
  .ch-body{padding:0 0 48px;border-top:0;}
  .ch + .ch,.trust + .ch{border-top:1px solid var(--rule);}
  .ch .eyebrow{display:none;}
  .gm{position:static;transform:none;flex-direction:row;gap:0;padding:0;margin:0 0 10px;background:transparent;font-size:12px;}
  .gm-tc{font-size:12px;}
  .gm-dot{display:none;}
  .gm-name{display:inline;font-size:12px;font-weight:500;color:var(--ink-2);margin-left:.4em;}
  .gm-name::before{content:"· ";}
  .hero .ch-gut{padding-top:24px;}
  .hero .ch-body{display:block;padding:0 0 40px;}
  .hero h1{font-size:32px;line-height:1.14;margin-bottom:14px;}
  .hero .lead{font-size:16px;margin-bottom:20px;}
  .haxis{height:56px;margin:28px 0 0;}
  .haxis::before{left:-16px;right:-16px;top:23px;}
  .hm-tc{font-size:13px;}
  .hm i{margin-top:3px;}
  .hm-lb{display:none;}
  .hero-hint{font-size:13px;}
  .hero .device{width:210px;margin:24px auto 0;border-radius:34px;padding:7px;}
  .hero .device img{width:196px;border-radius:27px;}
  .trust{margin-left:0;justify-content:flex-start;gap:4px 18px;}
  .ch h2{font-size:26px;line-height:1.24;}
  .lead{font-size:16px;}
  .split{flex-direction:column;align-items:stretch;gap:28px;}
  .split .device{order:2;margin:0 auto;}
  .extras{grid-template-columns:1fr;}
  .extras > div,html[lang="en"] .extras > div{grid-template-columns:1fr;gap:2px;}
  .privacy .ch-body{grid-template-columns:1fr;gap:28px;}
  .end h2{font-size:26px;}
  .tally{align-items:flex-start;flex-direction:column;gap:10px;}
  .site-footer{padding:24px 0;}
  .site-footer .in{padding:0 16px;flex-direction:column;}

  .js .player{height:var(--bar);padding:0 12px 0 16px;grid-template-columns:minmax(0,1fr) auto;gap:10px;}
  .p-meta img,.p-title.d,.p-sub.d{display:none;}
  .p-title.m,.p-sub.m{display:block;}
  .p-sub.m{font-variant-numeric:tabular-nums;}
  .p-track{position:absolute;left:0;right:0;top:-8px;height:16px;}
  .p-cur,.p-rem{display:none;}
  .p-bar{height:16px;}
  .p-bar .rail,.p-bar .fill{top:7px;height:3px;border-radius:0;}
  .p-bar .am{top:4px;width:9px;height:9px;margin-left:-4.5px;border:0;}
  .p-bar .mm{top:3px;width:11px;height:11px;margin-left:-5.5px;border:0;}
  .p-bar .head{display:none;}
  .pbtn.speed,.pbtn.icon{display:none;}
  .pbtn.notes{padding:0 12px;}
  .pbtn.notes svg{display:none;}
  .pbtn.mark{padding:0 16px;}

  .resume{left:12px;right:12px;width:auto;transform:none;bottom:calc(var(--bar) + 16px);}

  .scrim{display:block;position:fixed;inset:0;z-index:50;background:rgba(36,37,39,.34);}
  .scrim[hidden]{display:none;}
  .drawer{top:auto;left:0;right:0;bottom:0;width:auto;height:min(600px,82vh);z-index:55;border-left:0;border-radius:22px 22px 0 0;box-shadow:0 -12px 40px -20px rgba(36,37,39,.4);}
  .d-grab{display:block;width:36px;height:5px;border-radius:3px;background:var(--rule);margin:8px auto 0;flex-shrink:0;}
  .d-head{padding:12px 20px;align-items:flex-end;}
  .d-x{display:none;}
  .d-exp-m{display:inline-flex;align-items:center;height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--rule);background:transparent;font-size:13px;font-weight:600;cursor:pointer;flex-shrink:0;}
  .d-foot{display:none;}
  .d-foot-m{display:flex;align-items:center;gap:12px;padding:10px 16px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--rule);}
  .d-foot-m p{flex-grow:1;font-size:12px;line-height:1.5;color:var(--ink-2);}
  .d-foot-m .btn{height:44px;padding:0 16px;font-size:14px;}
  .export{top:64px;}
}
@media (prefers-reduced-motion:reduce){
  .hp-chime.ring,.hp-buds.press .hp-wave,.hp-buds.press .hp-dot{animation:none;}
  .page,.gm-dot,.faq summary::after{transition:none;}
}

/* ---------- Home (index.html, zh/index.html): no playback layer ----------
   The landing pages are a plain product page; the timecode gutter, player bar
   and notes drawer above only apply to tour.html. The one interactive bit is
   the mini demo in the Notes section (demo.js). */
.home body{padding-bottom:0;}
.home .wrap{padding:0 48px;}
.home .wrap::before{display:none;}
.home .ch{display:block;}
.home .trust{margin-left:0;}
.home .site-footer .in{padding:0 48px;}
.cta-note{margin-top:12px;font-size:14px;color:var(--ink-2);}

/* Hero: two phones, Now Playing in front of Episode Notes, both cut off by
   the rule above the trust row. Notes come first in the DOM so the player
   stacks on top. */
.home .hero .ch-body{align-items:flex-start;gap:56px;padding:48px 0 0;clip-path:inset(-200px -200px 0 -200px);}
.home .hero-copy{align-self:center;padding-bottom:48px;}
.hero-stage{position:relative;flex:0 0 460px;height:600px;}
@media (min-width:821px){.home .hero h1{font-size:56px;} .hero-stage{margin-right:-48px;}}
.home .hero-stage .device{position:absolute;width:296px;margin:0;border-radius:46px;padding:10px;}
.home .hero-stage .device img{width:276px;border-radius:37px;}
.hero-stage .front{right:0;top:0;box-shadow:0 40px 80px -30px rgba(36,37,39,.45);}
.hero-stage .back{left:0;top:84px;transform:rotate(-4deg);}
@media (max-width:1100px) and (min-width:821px){
  .hero-stage{flex-basis:400px;height:540px;margin-right:-24px;}
  .home .hero-stage .device{width:260px;border-radius:42px;padding:9px;}
  .home .hero-stage .device img{width:242px;border-radius:33px;}
  .hero-stage .back{top:72px;}
}
.episodes.plain li{display:block;}

.demo{margin-top:20px;padding:14px 16px 12px;max-width:440px;background:var(--cream-3);border:1px solid var(--rule);border-radius:14px;}
.demo-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;}
.demo-title{font-family:var(--serif);font-size:15px;font-weight:600;}
.demo-k{font-size:12px;color:var(--ink-3);white-space:nowrap;}
.demo-bar{position:relative;height:26px;margin-top:6px;cursor:pointer;touch-action:pan-y;user-select:none;-webkit-user-select:none;}
.demo-bar.is-drag{cursor:grabbing;}
.demo-bar .rail,.demo-bar .fill{position:absolute;left:0;top:11px;height:3px;border-radius:2px;}
.demo-bar .rail{right:0;background:var(--rule);}
.demo-bar .fill{background:var(--ink-3);width:0;}
.demo-bar .dot,.demo-bar .head{position:absolute;border-radius:50%;pointer-events:none;}
.demo-bar .dot{top:7px;width:11px;height:11px;margin-left:-5.5px;background:var(--accent);border:2px solid var(--cream-3);}
.demo-bar .head{top:6.5px;width:12px;height:12px;margin-left:-6px;background:var(--cream-3);border:2px solid var(--ink);}
.demo-ctl{display:flex;align-items:center;gap:8px;}
.demo-pp{width:36px;height:36px;border-radius:50%;border:1px solid var(--rule);background:transparent;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);flex-shrink:0;}
.demo-pp:hover{border-color:var(--ink-3);}
.demo-cur{font-size:14px;font-weight:600;}
.demo-tot{font-size:14px;color:var(--ink-3);flex-grow:1;}
.demo-mark{height:36px;padding:0 18px;border-radius:999px;border:0;background:var(--accent);color:#fff;font-size:14px;font-weight:600;cursor:pointer;flex-shrink:0;}
.demo-mark:hover{background:var(--accent-ink);}
.demo-mark:disabled{opacity:.45;cursor:default;}
.demo-list{margin-top:8px;}
.demo-mrow{display:flex;gap:8px;align-items:center;padding:6px 0;border-top:1px solid var(--cream-2);}
.demo-go{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:999px;border:1px solid var(--rule);background:transparent;font-family:var(--time);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--accent-ink);cursor:pointer;flex-shrink:0;}
.demo-go:hover{border-color:var(--accent-ink);}
.demo-go i{width:6px;height:6px;border-radius:50%;background:var(--accent);}
.demo-tx{flex-grow:1;min-width:0;height:30px;border:0;border-bottom:1px solid var(--rule);background:transparent;font-family:var(--serif);font-size:15px;color:var(--ink);border-radius:0;}
.demo-tx::placeholder{color:var(--ink-3);}
.demo-rm{width:30px;height:30px;border:0;background:transparent;color:var(--ink-3);cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:50%;}
.demo-rm:hover{background:var(--cream);}
.demo-hint{margin-top:8px;font-size:13px;color:var(--ink-2);}

@media (max-width:820px){
  .home .wrap{padding:0 16px;}
  .home .ch-body{padding:48px 0;}
  .home .hero .ch-body{display:block;padding:28px 0 0;}
  .home .hero-copy{padding-bottom:0;}
  .hero-stage{width:330px;max-width:100%;height:420px;margin:28px auto 0;}
  .home .hero-stage .device{width:210px;border-radius:34px;padding:7px;}
  .home .hero-stage .device img{width:196px;border-radius:27px;}
  .hero-stage .back{top:48px;}
  .home .ch + .ch,.home .trust + .ch{border-top:1px solid var(--rule);}
  .home .ch .eyebrow{display:block;}
  .home .site-footer .in{padding:0 16px;}
  .demo{max-width:none;}
  .demo-tx{font-size:16px;} /* below 16px iOS Safari zooms in on focus */
}

/* Native language menu works without JavaScript and keeps long locale names
   from crowding the header on small screens. Shared with answer.css. */
.language-menu{position:relative;flex-shrink:0;font-size:14px}
.language-menu summary{cursor:pointer;list-style:none;padding:8px 4px;white-space:nowrap}
.language-menu summary::-webkit-details-marker{display:none}
.language-menu summary::after{content:" ▾";font-size:11px}
.language-menu>div{position:absolute;right:0;top:100%;z-index:100;min-width:140px;padding:8px;background:var(--cream);border:1px solid var(--rule);border-radius:10px;box-shadow:0 8px 24px #24252718}
.language-menu>div>a{display:block;padding:9px 12px;white-space:nowrap}
.language-menu [aria-current="page"]{font-weight:700;text-decoration:underline}
.language-menu summary:focus-visible,.language-menu a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.screenshot-note{max-width:1100px;margin:0 auto;padding:8px 24px;color:var(--ink-2);font-size:13px;text-align:center}
html[lang="de"] .hero h1{hyphens:auto;overflow-wrap:break-word}
html[lang="ja"] .hero h1{letter-spacing:0;line-height:1.2;word-break:normal}

/* Localized tour actions need wrapping at the smallest phone width. */
html:lang(ja) .end .btn,html:lang(de) .end .btn{max-width:100%;height:auto;min-height:46px;white-space:normal;text-align:center;padding-block:10px}