/* ── HomePlay 2.0 Preview：版面與節奏 ──────────────────────────
   沿用 style.css 的 token（底色、墨色、強調藍、圓角 28、系統字）。這裡多兩樣：
   1. 亮暗交替的段落：淺段跟著系統外觀，深段（.pv-dark）永遠是夜色，像 HomeView 在暗房裡亮著。
   2. 一條「夕照」漸層（--glow）：取自示範主畫面的夕陽與 👀 的琥珀色，只用在標題第二行、Preview 標記、進度條與導覽指示。
   字級：首屏 104 → 段落大標 64 → 導言 21 → 內文 17 → 註腳 12；中文字距不壓、行距放鬆。 */
.pv{
  --glow:linear-gradient(100deg,#ff9f6b 0%,#f0708e 42%,#8f7cf7 100%);
  --pv-night:#07080a; --pv-night-2:#121418; --pv-night-ink:#f5f5f7; --pv-night-muted:#a1a6ae; --pv-night-line:rgba(255,255,255,.1);
  --pv-card:#fff; --pv-well:#e4e7ec;
  --pv-sec:clamp(96px,11vw,168px);
  /* 版面網格：12 欄（平板 8 欄、手機 4 欄），欄距 = 邊距；版心 1180（≥1800 時 1360）減兩邊邊距。
     每一段的標題、內文、卡片都從第 1 欄的左線開始；等寬多欄（2／3／4／6 欄）用同一個欄距，自然落在 12 欄的線上。
     間距只用 4 的倍數（4、8、12、16、24、32、48…）。 */
  --margin:24px; --gutter:24px; --content:calc(1180px - 2 * var(--margin));
  --screen-r:13.5%;   /* 螢幕圓角 138/1024，與機身同一個圓角 */
  --dur-gal:6s; --dur-step:4.8s;
  background:var(--bg);
}
@media (prefers-color-scheme:dark){.pv{--pv-card:#191c21;--pv-well:#121418}}
.pv .sky,.pv .day-rail{display:none}

/* ── 頁首：品牌、膠囊導覽、語言 ──
   膠囊導覽照 👀 膠囊的樣子：一條黑色玻璃膠囊，左邊是那雙眼睛；現在讀到哪一段，亮片就滑到哪裡，眼睛也朝那邊瞄一下。 */
.pv-bar{position:sticky;top:0;z-index:30;backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);background:color-mix(in srgb,var(--bg) 76%,transparent)}
.pv-bar .wrap{display:flex;align-items:center;gap:20px;height:64px}
.pv-bar .end{margin-left:auto;display:flex;align-items:center}
.pv-nav{position:relative;display:flex;align-items:center;gap:2px;margin:0 auto;padding:4px 6px 4px 4px;border-radius:var(--pill);
  background:rgba(14,15,18,.86);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 8px 24px -12px rgba(0,0,0,.45);color:rgba(255,255,255,.72);font-size:14px;
  overflow-x:auto;scrollbar-width:none;max-width:100%}
.pv-nav::-webkit-scrollbar{display:none}
.pv-nav-eyes{flex:none;display:grid;place-items:center;width:40px;height:32px;font-size:19px;line-height:1;transform:translate(calc(var(--ex,0px) + var(--glance,0px)),var(--ey,0px));transition:transform .5s var(--spring)}
.pv-nav a{position:relative;z-index:1;flex:none;padding:7px 13px;border-radius:var(--pill);text-decoration:none;white-space:nowrap;transition:color .25s}
.pv-nav a:hover{color:#fff}
.pv-nav a[aria-current="true"]{color:#fff}
.pv-nav-thumb{position:absolute;z-index:0;top:4px;bottom:4px;left:0;width:var(--w,0);border-radius:var(--pill);background:rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);transform:translateX(var(--x,0));opacity:var(--o,0);transition:transform .45s var(--spring),width .45s var(--spring),opacity .3s}
.pv-nav a:focus-visible{outline-offset:-2px}

.pv-hero{padding:0}   /* style.css 給每個 section 112px 上下留白；首屏自己算高度 */
/* ── 首屏：左邊一句話，右邊一台機身；往下捲，螢幕從錶面換成主畫面（兩張圖同一個相機，逐像素對齊）── */
.pv-hero-track{position:relative;height:165vh}
.pv-hero-sticky{position:sticky;top:64px;height:calc(100vh - 64px);min-height:620px;display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);grid-template-rows:1fr auto;align-items:center;
  max-width:1180px;margin:0 auto;padding:0 24px;column-gap:48px}
.pv-hero-copy{grid-column:1;grid-row:1;padding:0;max-width:none;margin:0}
.pv-kicker{display:flex;align-items:center;gap:12px;font-size:17px;font-weight:600;color:var(--muted)}
.pv-badge{display:inline-block;padding:4px 11px;border-radius:var(--pill);font-size:13px;font-weight:650;letter-spacing:.02em;color:#fff;background:var(--glow)}
.pv h1{margin-top:24px;font-size:clamp(40px,5.6vw,82px);font-weight:700;letter-spacing:-.045em;line-height:1.02}
.pv h1 .l,.pv-head h2 span{display:block}
/* 首屏標題：寬螢幕上每個 span 一行不折（字級算過，最長一行約 8em 放得下）；窄螢幕照常折行 */
@media (min-width:821px){.pv h1 .l{white-space:nowrap}}
.pv h1 .glow{background:var(--glow);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
.pv-hero-lede{margin-top:24px;max-width:30em;font-size:clamp(17px,1.45vw,20px);line-height:1.6;color:var(--muted)}
.pv-ctas{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px}
.pv-stage{grid-column:2;grid-row:1 / span 2;position:relative;width:100%;max-width:500px;justify-self:end;aspect-ratio:1100/1280;
  transform:translateY(var(--lift,0px)) scale(var(--scale,1));transition:transform .2s linear}
.pv-prod{position:absolute;inset:0}
.pv-prod img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 40px 50px rgba(20,28,45,.22))}
.pv-prod.is-home{opacity:0;transition:opacity .7s var(--ease-in-out)}
.pv-stage[data-state="home"] .pv-prod.is-home{opacity:1}
.pv-hero-foot{grid-column:1;grid-row:2;padding-bottom:44px;display:grid;gap:16px;justify-items:start}
.pv-hero-note{font-size:13px;line-height:1.6;color:var(--muted);max-width:38em}
.pv-hero-flip{position:absolute;left:0;top:50%;bottom:0;width:1px;pointer-events:none}

/* ── 分段式按鈕：一條磨砂底，亮片（--x、--w 由 preview.js 量）滑到選中的那一格 ── */
.pv-seg{position:relative;display:inline-flex;padding:4px;border-radius:var(--pill);background:color-mix(in srgb,var(--ink) 7%,transparent);
  box-shadow:inset 0 0 0 1px var(--line)}
.pv-seg button{all:unset;box-sizing:border-box;position:relative;z-index:1;min-width:64px;height:40px;padding:0 18px;border-radius:var(--pill);
  display:grid;place-items:center;font-size:15px;font-weight:600;color:var(--muted);cursor:pointer;transition:color .25s;white-space:nowrap}
.pv-seg button[aria-pressed="true"]{color:var(--ink)}
.pv-seg button:active{transform:scale(.95)}
.pv-seg button{transition:color .25s,transform .2s var(--spring)}
.pv-seg button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pv-seg-thumb{position:absolute;z-index:0;top:4px;bottom:4px;left:0;width:var(--w,0);border-radius:var(--pill);background:var(--pv-card);
  box-shadow:0 1px 2px rgba(0,0,0,.08),0 6px 16px -6px rgba(0,0,0,.2);transform:translateX(var(--x,0));transition:transform .45s var(--spring),width .45s var(--spring)}
.pv-dark .pv-seg{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px var(--pv-night-line)}
.pv-dark .pv-seg button{color:var(--pv-night-muted)} .pv-dark .pv-seg button[aria-pressed="true"]{color:#fff}
.pv-dark .pv-seg-thumb{background:rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}

/* ── 段落共用 ── */
.pv-sec{padding:var(--pv-sec) 0;position:relative}
.pv-dark{background:var(--pv-night);color:var(--pv-night-ink);--muted:var(--pv-night-muted);--line:var(--pv-night-line);--ink:var(--pv-night-ink);--pv-card:var(--pv-night-2);--pv-well:#0d0f12}
.pv-head{max-width:860px;margin-bottom:clamp(48px,6vw,80px)}
.pv-eyebrow{font-size:clamp(17px,1.4vw,21px);font-weight:650;color:var(--tint,var(--accent));margin-bottom:16px}
.pv-head h2,.pv-h2-solo{font-size:clamp(36px,5.2vw,68px);font-weight:700;letter-spacing:-.035em;line-height:1.06}
.pv-head h2 span{color:var(--muted)}
.pv-lede{margin-top:24px;max-width:36em;font-size:clamp(17px,1.5vw,21px);line-height:1.6;color:var(--muted)}
.pv-h2-solo{margin-bottom:clamp(40px,5vw,64px)}
/* 中文：大字不壓字距，行距放鬆 */
.pv :is(h1,h2):lang(zh){letter-spacing:-.01em;line-height:1.14}
.pv-screen{display:block;position:relative}
.pv-screen img,video.pv-screen{display:block;width:100%;height:auto;border-radius:var(--screen-r);
  box-shadow:0 0 0 1px rgba(0,0,0,.06),0 30px 60px -28px rgba(10,20,40,.45)}
.pv-dark .pv-screen img{box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 80px -30px rgba(0,0,0,.8)}
.pv sup{font-size:.6em;line-height:0;vertical-align:super;margin-left:1px}
.pv sup a{color:inherit;text-decoration:none;padding:0 2px}
.pv sup a:hover{text-decoration:underline}
.pv-note{font-size:14px;color:var(--muted)}
.pv-round{all:unset;box-sizing:border-box;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:color-mix(in srgb,var(--ink) 9%,transparent);color:var(--ink);transition:background .2s,transform .2s var(--spring)}
.pv-round:hover{background:color-mix(in srgb,var(--ink) 15%,transparent)}
.pv-round:active{transform:scale(.92)}
.pv-round:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.pv-round svg{width:18px;height:18px;fill:currentColor}
.pv-round[disabled]{opacity:.35;cursor:default}
.pv-round .i-play{display:none} .pv-round.paused .i-play{display:inline} .pv-round.paused .i-pause{display:none}
.pv-pill{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 20px;border-radius:var(--pill);cursor:pointer;
  font-size:15px;font-weight:600;color:var(--ink);background:color-mix(in srgb,var(--ink) 8%,transparent);transition:background .2s,transform .2s var(--spring)}
.pv-pill::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .35s var(--spring)}
.pv-pill[aria-pressed="true"]::after{transform:translateY(2px) rotate(-135deg)}
.pv-pill:hover{background:color-mix(in srgb,var(--ink) 13%,transparent)} .pv-pill:active{transform:scale(.96)}
.pv-pill:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* 換圖：同一格裡疊幾張，換的是 .on（交叉淡入，輕微縮放，像螢幕亮起來） */
.pv-swap{position:relative;display:grid}
.pv-swap > *{grid-area:1/1;opacity:0;transform:scale(.985);transition:opacity .55s var(--ease-in-out),transform .7s var(--ease-out)}
.pv-swap > .on{opacity:1;transform:none}

/* ── 亮點：整排大卡，自動播放，捲動對齊 ── */
.pv-overview{padding-bottom:clamp(64px,7vw,104px);overflow:hidden}
.pv-gal{--tile:min(var(--content),calc(100vw - 2 * var(--margin)));--gut:calc((100vw - var(--tile)) / 2)}
.pv-gal-track{list-style:none;margin:0;padding:0 var(--gut);display:flex;gap:var(--gutter);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--gut);
  scrollbar-width:none;overscroll-behavior-x:contain}
.pv-gal-track::-webkit-scrollbar{display:none}
.pv-tile{flex:none;width:var(--tile);scroll-snap-align:start}
.pv-tile-in{position:relative;height:clamp(500px,46vw,640px);border-radius:var(--r);overflow:hidden;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:24px;
  padding:0 clamp(32px,5vw,72px);background:radial-gradient(120% 90% at 85% 50%,var(--t1,#2a2f3a),transparent 70%),linear-gradient(160deg,#16181d,#0c0d10)}
.pv-tile-cap{font-size:clamp(20px,2vw,28px);line-height:1.32;font-weight:600;color:var(--pv-night-muted);max-width:15em;letter-spacing:-.01em}
.pv-tile-cap b{color:#fff;font-weight:650}
.pv-tile-media{justify-self:center;width:min(100%,460px);transform:translateY(var(--ty,24px)) scale(var(--ts,.96));opacity:var(--to,.5);transition:transform 1s var(--ease-out),opacity .8s}
.pv-tile.is-cur .pv-tile-media{--ty:0px;--ts:1;--to:1}
.pv-tile-home-light{--t1:#6a4a2c} .pv-tile-era-1988{--t1:#3c3c3c} .pv-tile-clio-confirm{--t1:#3f3a6e}
.pv-tile-la-expanded{--t1:#5b3c2a} .pv-tile-people-greet{--t1:#6e4a30} .pv-tile-cc{--t1:#3b4250}
.pv-gal-ctl{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:28px;position:relative}
.pv-dots{display:flex;align-items:center;gap:4px;height:56px;padding:0 18px;border-radius:var(--pill);background:rgba(255,255,255,.1);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.pv-dots button{all:unset;box-sizing:border-box;width:24px;height:44px;display:grid;place-items:center;cursor:pointer;transition:width .45s var(--spring)}
.pv-dots button i{display:block;position:relative;width:8px;height:8px;border-radius:var(--pill);background:rgba(255,255,255,.45);overflow:hidden;transition:width .45s var(--spring),background .3s}
.pv-dots button:hover i{background:rgba(255,255,255,.7)}
.pv-dots button[aria-current="true"]{width:56px}
.pv-dots button[aria-current="true"] i{width:44px;background:rgba(255,255,255,.3)}
.pv-dots button[aria-current="true"] i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#fff;transform-origin:0 50%;transform:scaleX(var(--p,1))}
.pv-gal.auto .pv-dots button[aria-current="true"] i::after{animation:pv-fill var(--dur-gal) linear forwards}
.pv-gal.held .pv-dots button[aria-current="true"] i::after{animation-play-state:paused}
.pv-dots button:focus-visible{outline:2px solid #fff;outline-offset:-6px;border-radius:var(--pill)}
.pv-dark .pv-round{background:rgba(255,255,255,.1);color:#fff}
.pv-dark .pv-round:hover{background:rgba(255,255,255,.18)}
.pv-arrows{position:absolute;right:24px;display:flex;gap:12px}
@keyframes pv-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ── 主畫面：外觀切換的大圖 + 三張卡 ── */
.pv-home{--tint:#b4532b}
.pv-feature{border-radius:calc(var(--r) + 8px);background:var(--pv-well);padding:clamp(40px,6vw,88px) 24px clamp(32px,4vw,48px);display:grid;justify-items:center;gap:32px}
.pv-feature-media{width:min(100%,520px)}
.pv-feature-ctl{display:grid;justify-items:center;gap:12px;text-align:center}
.pv-cards{list-style:none;margin:var(--gutter) 0 0;padding:0;display:grid;gap:var(--gutter)}
.pv-cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pv-cards-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.pv-card{background:var(--pv-card);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;box-shadow:inset 0 0 0 1px var(--line)}
.pv-card-media{padding:32px 32px 0;background:var(--pv-well);display:grid;place-items:center;overflow:hidden}
.pv-card-media .pv-screen{width:min(100%,300px);transform:translateY(10%);transition:transform .6s var(--ease-out)}
.pv-card:hover .pv-card-media .pv-screen{transform:translateY(6%)}
.pv-card > p{padding:24px 28px 32px;font-size:17px;line-height:1.55;color:var(--muted)}
.pv-card > p b,.pv-points b,.pv-b p b,.pv-panel-text b{color:var(--ink);font-weight:650}

/* ── 隨手可及：Live Activities 與控制中心 ── */
.pv-system{--tint:#1d7a55;padding-top:0}
.pv-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gutter)}
.pv-panel{background:var(--pv-card);border-radius:var(--r);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column}
.pv-panel-media{background:var(--pv-well);padding:clamp(28px,4vw,48px);display:grid;place-items:center}
.pv-panel-media > *{width:min(100%,400px)}
.pv-panel-text{padding:28px 32px 32px;display:grid;gap:8px;justify-items:start}
.pv-panel-text h3{font-size:24px;letter-spacing:-.02em}
.pv-panel-text p{color:var(--muted);font-size:17px;line-height:1.55}
.pv-panel-text .pv-pill{margin-top:8px}

/* ── 錶面：十張一面牆 + 島錶面的三個年代 ── */
.pv-faces{--tint:#ffb340}
.pv-wall{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:32px var(--gutter)}
.pv-face{display:grid;gap:12px;justify-items:center;text-align:center}
.pv-face .pv-screen{width:100%;transition:transform .5s var(--spring)}
.pv-face:hover .pv-screen{transform:translateY(-6px) scale(1.02)}
.pv-face span{font-size:15px;font-weight:600;color:var(--muted)}
.pv-era{margin-top:clamp(72px,9vw,128px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center;
  padding:clamp(32px,5vw,64px);border-radius:calc(var(--r) + 8px);background:linear-gradient(160deg,#15171c,#0b0c0f);box-shadow:inset 0 0 0 1px var(--pv-night-line)}
.pv-era-text{display:grid;gap:16px;justify-items:start}
.pv-era-text h3{font-size:clamp(26px,2.6vw,34px);letter-spacing:-.02em}
.pv-era-text p{color:var(--muted);font-size:17px;line-height:1.6;max-width:28em}
.pv-era-media{width:min(100%,440px);justify-self:center}

/* ── App：天氣影片 + 九張卡 ── */
.pv-apps{--tint:#2459d6}
.pv-weather{margin:0;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:clamp(28px,5vw,72px);
  padding:clamp(32px,5vw,64px);border-radius:calc(var(--r) + 8px);background:linear-gradient(150deg,#5f7389,#3a4757 60%,#2a3441);color:#eef3f8}
.pv-weather-media{position:relative;width:min(100%,520px);justify-self:center}
.pv-weather-media .pv-round{position:absolute;right:14px;bottom:14px;background:rgba(0,0,0,.35);color:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.pv-weather figcaption{font-size:clamp(20px,2vw,26px);line-height:1.4;font-weight:600;color:rgba(238,243,248,.72)}
.pv-weather figcaption b{color:#fff}
.pv-apps .pv-cards{margin-top:var(--gutter)}

/* ── ClioTalk：三步驟 + 三個原則 ── */
.pv-clio{--tint:#b4a2ff;background:radial-gradient(60% 50% at 75% 30%,rgba(143,124,247,.22),transparent 70%),radial-gradient(50% 40% at 20% 85%,rgba(240,112,142,.14),transparent 70%),var(--pv-night)}
.pv-steps{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:center}
.pv-steps-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pv-steps-list button{all:unset;box-sizing:border-box;position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:16px;row-gap:4px;width:100%;
  padding:20px 24px 24px;border-radius:22px;cursor:pointer;transition:background .3s;overflow:hidden}
.pv-steps-list button:hover{background:rgba(255,255,255,.04)}
.pv-steps-list button[aria-pressed="true"]{background:rgba(255,255,255,.07)}
.pv-steps-list button:focus-visible{outline:2px solid var(--tint);outline-offset:2px}
.pv-step-n{grid-row:span 2;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:650 14px/1 var(--font);color:var(--pv-night-muted);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.25);transition:background .3s,color .3s}
.pv-steps-list button[aria-pressed="true"] .pv-step-n{background:#fff;color:#111;box-shadow:none}
.pv-step-t{font-size:21px;font-weight:650;color:var(--pv-night-muted);transition:color .3s}
.pv-steps-list button[aria-pressed="true"] .pv-step-t{color:#fff}
.pv-step-b{grid-column:2;font-size:16px;line-height:1.55;color:var(--pv-night-muted);max-height:0;opacity:0;overflow:hidden;transition:max-height .5s var(--ease-out),opacity .4s}
.pv-steps-list button[aria-pressed="true"] .pv-step-b{max-height:6em;opacity:1}
.pv-step-bar{position:absolute;left:24px;right:24px;bottom:0;height:2px;border-radius:2px;background:var(--glow);transform-origin:0 50%;transform:scaleX(0)}
.pv-steps.auto .pv-steps-list button[aria-pressed="true"] .pv-step-bar{animation:pv-fill var(--dur-step) linear forwards}
.pv-steps-media{width:min(100%,460px);justify-self:center}
.pv-points{list-style:none;margin:clamp(64px,8vw,104px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter)}
.pv-points li{padding-top:24px;border-top:1px solid var(--line)}
.pv-points p{font-size:17px;line-height:1.6;color:var(--muted)}

/* ── 家人與隱私 ── */
.pv-family{--tint:#b8355a}
.pv-family-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
.pv-family-media{width:min(100%,520px)}
.pv-family .pv-head{margin-bottom:0}
.pv-points-col{grid-template-columns:1fr;margin-top:40px;gap:24px}
.pv-points-col li{padding-top:16px}

/* ── 還有更多：五格便當盒 ── */
.pv-more{background:var(--pv-well)}
@media (prefers-color-scheme:dark){.pv-more{background:#0b0c0f}}
.pv-bento{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--gutter)}
.pv-b{background:var(--pv-card);border-radius:var(--r);padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;justify-content:space-between;gap:28px;grid-column:span 2;min-height:340px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.pv-b p{font-size:17px;line-height:1.55;color:var(--muted)}
.pv-b-devices{grid-column:span 4}
.pv-devices{flex:1;display:flex;align-items:flex-end;justify-content:center;gap:clamp(16px,2.4vw,28px);padding-top:8px}
/* 抽象的裝置外框：圓角深色框，不畫按鍵與鏡頭 */
.pv-ipad,.pv-iphone{background:#16181c;display:grid;place-items:center;box-shadow:0 0 0 1px rgba(0,0,0,.2),0 24px 40px -24px rgba(0,0,0,.45)}
.pv-ipad{width:min(56%,300px);aspect-ratio:3/4;border-radius:24px;padding:16px}
.pv-iphone{width:min(26%,140px);aspect-ratio:9/19;border-radius:26px;padding:8px}
.pv-ipad .pv-screen,.pv-iphone .pv-screen{width:100%}
.pv-ipad .pv-screen img,.pv-iphone .pv-screen img{box-shadow:none}
.pv-motif{width:min(100%,220px);height:auto;color:var(--ink);overflow:visible}
.pv-motif .m-body,.pv-motif .m-cable,.pv-motif .m-waves path{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.pv-motif .m-cable{stroke:var(--accent)}
.pv-motif .m-waves path{stroke:var(--accent);opacity:.2}
.pv-glass-demo{position:relative;flex:1;min-height:150px;border-radius:20px;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(40% 60% at 25% 40%,#ff9f6b,transparent 70%),radial-gradient(45% 60% at 75% 60%,#8f7cf7,transparent 70%),radial-gradient(50% 50% at 50% 100%,#f0708e,transparent 70%),#2a2140}
.pv-glass-pill{transform:translate(var(--gx,0px),var(--gy,0px));transition:transform .5s var(--spring);display:grid;place-items:center;width:132px;height:56px;border-radius:var(--pill);font-size:28px;line-height:1;
  background:rgba(255,255,255,.14);backdrop-filter:blur(10px) saturate(1.8);-webkit-backdrop-filter:blur(10px) saturate(1.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(255,255,255,.22),0 10px 24px -10px rgba(0,0,0,.4)}
.pv-b .pv-big{font-size:clamp(48px,6vw,80px);font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--ink);display:flex;gap:.3em}
.pv-b-langs .pv-big span:nth-child(2){color:var(--muted)} .pv-b-langs .pv-big span:nth-child(3){background:var(--glow);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ── Preview：界線、行動、註腳 ── */
.pv-limits{--tint:var(--muted)}
.pv-limit-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--gutter);counter-reset:lim}
.pv-limit-list li{position:relative;padding:24px 0 24px 48px;border-top:1px solid var(--line);font-size:17px;line-height:1.6;counter-increment:lim}
.pv-limit-list li::before{content:counter(lim,decimal-leading-zero);position:absolute;left:0;top:25px;font:600 13px/1.4 var(--mono);color:var(--muted)}
.pv-cta{margin-top:clamp(56px,7vw,96px);display:grid;grid-template-columns:minmax(0,1.2fr) auto;align-items:center;gap:32px;padding:clamp(32px,5vw,56px);
  border-radius:calc(var(--r) + 8px);background:var(--pv-night);color:var(--pv-night-ink);position:relative;overflow:hidden}
.pv-cta::before{content:"";position:absolute;inset:auto -10% -60% 40%;height:120%;background:var(--glow);opacity:.35;filter:blur(60px);pointer-events:none}
.pv-cta > *{position:relative}
.pv-cta h3{font-size:clamp(26px,3vw,40px);letter-spacing:-.025em}
.pv-cta p{margin-top:12px;color:var(--pv-night-muted);font-size:17px;line-height:1.6;max-width:34em}
.pv-cta .pv-ctas{margin-top:0}
.pv-cta .btn-ghost{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);color:#fff}
.pv-fn{margin-top:clamp(48px,6vw,72px);padding-top:24px;border-top:1px solid var(--line);font-size:12px;line-height:1.7;color:var(--muted);display:grid;gap:8px}
.pv-fn ol{margin:0;padding-left:1.4em;display:grid;gap:8px}
.pv-fn li:target{color:var(--ink)}

/* ── 進場：捲到才浮上來；同一組裡依序晚一點（--i 由 preview.js 給） ── */
@media (prefers-reduced-motion:no-preference) and (scripting:enabled){
  .pv .rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease-out),transform 1s var(--ease-out);transition-delay:calc(var(--i,0) * 70ms)}
  .pv .rv.in{opacity:1;transform:none}
  .pv-hero-copy > *{animation:rise .7s var(--ease-out) backwards}
  .pv-hero-copy > :nth-child(2){animation-delay:.08s} .pv-hero-copy > :nth-child(3){animation-delay:.18s} .pv-hero-copy > :nth-child(4){animation-delay:.28s}
  .pv-stage{animation:pv-arrive 1.1s var(--ease-out) .1s backwards}
  .pv-glass-demo{background-size:160% 160%;animation:pv-drift 14s ease-in-out infinite alternate}
}
@keyframes pv-arrive{from{opacity:0;transform:translateY(40px) scale(.94)}}
@keyframes pv-drift{from{background-position:0% 30%}to{background-position:100% 70%}}
@media (prefers-reduced-motion:reduce){
  .pv-hero-track{height:auto}
  .pv-hero-sticky{position:relative;top:0;height:auto;min-height:0;padding-top:56px;padding-bottom:56px}
  .pv-swap > *,.pv-prod.is-home,.pv-seg-thumb,.pv-nav-thumb,.pv-tile-media,.pv-step-b,.pv-nav-eyes{transition:none}
  .pv-tile-media{--ty:0px;--ts:1;--to:1}
  .pv-gal-track{scroll-behavior:auto}
}

/* ── 寬度：1100 以下兩欄變一欄；手機 16px 邊 ── */
@media (max-width:1100px){
  .pv-wall{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pv-cards-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pv-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pv-b,.pv-b-devices{grid-column:span 1}
  .pv-b-devices{grid-column:span 2}
}
@media (max-width:820px){
  .pv{--margin:16px;--gutter:16px}
  .pv-bar .wrap{flex-wrap:wrap;height:auto;padding-top:8px;padding-bottom:8px;row-gap:8px}
  .pv-nav{order:5;flex-basis:100%;margin:0;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .pv-nav.end-reached{-webkit-mask-image:none;mask-image:none}
  .pv-nav a{padding:8px 12px}
  .pv-hero-track{height:auto}
  .pv-hero-sticky{position:relative;top:0;height:auto;min-height:0;grid-template-columns:1fr;grid-template-rows:auto;padding:40px 16px 8px;row-gap:28px}
  .pv-hero-copy,.pv-stage,.pv-hero-foot{grid-column:1;grid-row:auto}
  .pv-stage{justify-self:center;width:min(100%,440px)}
  .pv-hero-foot{justify-items:center;text-align:center;padding-bottom:24px}
  .pv-hero-flip{display:none}
  .pv-ctas .btn{flex:1 1 auto;justify-content:center}
  .pv-gal{--tile:calc(100vw - 32px)}
  .pv-tile-in{grid-template-columns:1fr;grid-template-rows:auto 1fr;height:auto;min-height:560px;padding:32px 24px 0;align-items:start;gap:24px}
  .pv-tile-media{width:min(100%,360px);align-self:end;margin-bottom:-12%}
  .pv-tile-cap{font-size:20px}
  .pv-arrows{display:none}
  .pv-cards-3,.pv-duo,.pv-era,.pv-weather,.pv-steps,.pv-family-grid,.pv-points,.pv-limit-list,.pv-cta{grid-template-columns:1fr}
  .pv-cards-3{grid-auto-flow:column;grid-auto-columns:82%;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;margin-left:-16px;margin-right:-16px;padding:0 16px;scroll-padding:0 16px;scrollbar-width:none}
  .pv-cards-3::-webkit-scrollbar{display:none}
  .pv-cards-3 .pv-card{scroll-snap-align:start}
  .pv-wall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pv-era{padding:28px 20px}
  .pv-era-text{justify-items:stretch}
  .pv-era .pv-seg{justify-self:start}
  .pv-weather{padding:24px 20px}
  .pv-steps-media{order:-1;width:min(100%,380px)}
  .pv-family-media{justify-self:center;width:min(100%,420px)}
  .pv-b,.pv-b-devices{grid-column:span 2;min-height:0}
  .pv-cta{padding:28px 24px}
}
@media (max-width:600px){
  .pv-cards-grid{grid-template-columns:1fr}
  .pv-seg button{min-width:0;padding:0 14px}
  .pv-bento{grid-template-columns:1fr}
  .pv-b,.pv-b-devices{grid-column:span 1}
}
@media (max-width:360px){
  .pv-seg button{padding:0 10px;font-size:14px}
  .pv-kicker{font-size:15px}
}

/* ── 出站連結（另一頁）：膠囊最後一格，前面一條細分隔線 ── */
.pv .pv-nav a.pv-nav-out{margin-left:6px;color:rgba(255,255,255,.9)}
.pv .pv-nav a.pv-nav-out::before{content:"";position:absolute;left:-4px;top:9px;bottom:9px;width:1px;background:rgba(255,255,255,.18)}
.pv .pv-nav a.pv-nav-out::after{content:" ↗";opacity:.6}
/* 首頁 style.css 的手機導覽規則（膠囊外框、收起第 6 個）不套到這條膠囊上 */
@media (max-width:820px){
  .pv .pv-bar nav.pv-nav{padding:4px 6px 4px 4px;gap:2px;overflow-x:auto}
  .pv .pv-bar nav.pv-nav a{display:inline-flex;padding:8px 12px;border-radius:var(--pill);font-size:14px;color:rgba(255,255,255,.72);box-shadow:none;background:none}
  .pv .pv-bar nav.pv-nav a[aria-current="true"]{color:#fff;background:none}
  .pv .pv-bar nav.langs{order:0;flex-basis:auto;padding:0;overflow:visible}
  .pv .pv-bar nav.langs a{padding:0 4px;box-shadow:none;border-radius:0}   /* 語言切換是文字連結：不套膠囊外框（撐到 44 高後外框會變成圓圈） */
}

/* ── 便當盒最後一格：小工具往事（一排年份，接到那篇長文）── */
.pv-b-history{grid-column:1 / -1;min-height:0}
.pv-years{list-style:none;margin:0;padding:0;display:flex;gap:0;font:600 clamp(18px,2.1vw,32px)/1 var(--mono);letter-spacing:-.02em;color:var(--muted)}
.pv-years li{display:flex;align-items:center;flex:1 1 auto;white-space:nowrap}
.pv-years li:first-child{flex:0 0 auto}
.pv-years li + li::before{content:"";flex:1;min-width:10px;height:1px;margin:0 clamp(6px,1vw,14px);background:var(--line)}
@media (max-width:820px){.pv-years{flex-wrap:wrap;gap:10px 16px}.pv-years li,.pv-years li:first-child{flex:0 0 auto}.pv-years li + li::before{display:none}}
.pv-years li:last-child{background:var(--glow);-webkit-background-clip:text;background-clip:text;color:transparent}
.pv-b-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 40px;flex-wrap:wrap}
.pv-b-row p{max-width:40em}

/* 段落小標的色調：淺段用深一階（對比 ≥ 4.5:1），系統深色外觀下淺段變暗，改用亮一階 */
@media (prefers-color-scheme:dark){
  .pv-home{--tint:#ff9a6b} .pv-system{--tint:#4fd19a} .pv-apps{--tint:#7aa7ff} .pv-family{--tint:#ff8fae}
}
/* 首屏捲出去時：機身微微後退、文字淡出（只在支援捲動時間軸的瀏覽器；其他瀏覽器保持靜止，不影響閱讀） */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference) and (min-width:821px){
    .pv-hero-sticky{view-timeline:--hero block}
    .pv-hero-track{timeline-scope:--hero-track;view-timeline:--hero-track block}
    .pv-stage{animation:pv-arrive 1.1s var(--ease-out) .1s backwards,pv-recede linear both;animation-timeline:auto,--hero-track;animation-range:normal,exit 0% exit 60%}
  }
}
@keyframes pv-recede{to{transform:translateY(-6%) scale(.9);opacity:.2}}
/* App：重點卡片橫放、佔兩格（圖在左、字在右） */
.pv-cards-grid{grid-auto-flow:dense}
.pv-card.wide{grid-column:span 2;flex-direction:row}
.pv-card.wide .pv-card-media{flex:0 0 54%;padding:40px 40px 0;align-items:end}
.pv-card.wide .pv-card-media .pv-screen{width:min(88%,360px);transform:translateY(6%)}
.pv-card.wide:hover .pv-card-media .pv-screen{transform:translateY(3%)}
.pv-card.wide > p{align-self:center;font-size:clamp(17px,1.5vw,21px);line-height:1.5;padding:32px clamp(24px,3vw,44px)}
@media (max-width:600px){.pv-card.wide{grid-column:auto;flex-direction:column}.pv-card.wide .pv-card-media{flex:none}.pv-card.wide > p{font-size:17px;padding:24px 28px 32px}}
/* 家人段：標題在半欄裡，字級降一階，詞組不被拆開 */
.pv-family .pv-head h2{font-size:clamp(34px,3.9vw,56px)}
/* 超寬螢幕（≥ 1800）：版心放寬、字級跟著放大一點，不讓內容縮成中間一小條 */
@media (min-width:1800px){
  .pv .wrap,.pv-hero-sticky{max-width:1360px}
  .pv{--content:calc(1360px - 2 * var(--margin))}
  .pv h1{font-size:96px} .pv-stage{max-width:580px}
  .pv-head h2,.pv-h2-solo{font-size:76px}
}
/* 系統深色外觀：淺段變成石墨（#14161a），深段維持近黑，亮暗交替的節奏不消失；深色大卡加一圈細線免得融進底色 */
@media (prefers-color-scheme:dark){
  .pv{--bg:#14161a;--pv-card:#1c1f24;--pv-well:#101215}
  .pv-bar{background:color-mix(in srgb,#14161a 78%,transparent)}
  .pv-dark{--pv-night:#000}
  .pv-cta,.pv-era,.pv-tile-in{box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
  .pv-more{background:#0d0e11}
}
/* 平板直式（601–820）：錶面牆三欄、主畫面卡片兩張半露、兩格面板維持並排，不讓單張圖撐滿整個寬度 */
@media (min-width:601px) and (max-width:820px){
  .pv-wall{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pv-cards-3{grid-auto-columns:46%}
  .pv-duo{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pv-panel-text{padding:24px 24px 24px}
}
/* 寬卡整張是同一片帶色的底（訊息綠、食譜橘、家庭琥珀，取自各自 App 圖示），字和圖在同一塊上，重點一眼分得出 */
.pv-card.wide{background:var(--wt,var(--pv-well));box-shadow:none}
.pv-card.wide .pv-card-media{background:transparent}
.pv-card.wide > p{color:color-mix(in srgb,var(--ink) 62%,transparent)}
.pv-card.wide .pv-card-media .pv-screen{width:min(92%,400px)}
.pv-c-app-messages-confirm{--wt:linear-gradient(150deg,#e3f6e8,#cdeed7)}
.pv-c-app-recipe-step{--wt:linear-gradient(150deg,#fff0e3,#ffe0c7)}
.pv-c-app-home{--wt:linear-gradient(150deg,#fff5df,#ffe9b8)}
@media (prefers-color-scheme:dark){
  .pv-c-app-messages-confirm{--wt:linear-gradient(150deg,#13261b,#0f1f16)}
  .pv-c-app-recipe-step{--wt:linear-gradient(150deg,#2a1b10,#21150c)}
  .pv-c-app-home{--wt:linear-gradient(150deg,#2a2210,#211a0b)}
}

/* ── 網格落位（≥ 821）：兩欄的段落不用比例欄寬，直接佔 12 欄裡的整數欄，左右兩塊的邊都落在欄線上 ── */
@media (min-width:821px){
  .pv-hero-sticky,.pv-steps,.pv-family-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
  .pv-hero-copy,.pv-hero-foot{grid-column:1 / span 7}
  .pv-stage{grid-column:8 / span 5}
  .pv-steps-list{grid-column:1 / span 5;margin-left:-24px}   /* 步驟按鈕的底色往左懸出，編號和字對齊第 1 欄 */
  .pv-steps-media{grid-column:7 / span 6;justify-self:end}
  .pv-family-media{grid-column:1 / span 6}
  .pv-family-text{grid-column:7 / span 6}
}
/* 觸控目標至少 44 × 44（HIG）：品牌與語言連結把可點範圍撐到 44 高，外觀不變 */
.pv .brand,.pv .langs a{min-height:44px;display:inline-flex;align-items:center}
/* 膠囊導覽：每個連結 44 高；膠囊本身也是 44，亮片仍是內縮 4px 的 36 高 */
.pv-nav,.pv .pv-bar nav.pv-nav{padding-top:0;padding-bottom:0}
.pv-nav a{min-height:44px;display:inline-flex;align-items:center}
.pv-seg button{height:44px}
/* 頁尾連結：可點高度 44 */
.pv footer .links a{display:inline-block;padding:12px 0}

/* ── 小工具往事：長文版面。沿用 style.css 的 token、頁首、頁尾與按鈕；這裡只放閱讀節奏。──
   窄欄 40em、行距放大；每章：年代標（編號＋年份）→ 一句標題 → 短段落 → 出處 → 這一代留下的 → 插圖草案。 */
.hist .sky{display:none}
/* 正文欄＝12 欄網格的中間 8 欄（第 3–10 欄），左右邊落在欄線上；窄螢幕佔滿、邊距跟著網格 */
.essay{max-width:calc((var(--content) - 11 * var(--gutter)) / 12 * 8 + 7 * var(--gutter) + 2 * var(--margin));margin:0 auto;padding:0 var(--margin) 40px}
.read-bar{position:fixed;top:0;left:0;right:0;height:2px;z-index:30;pointer-events:none}
.read-bar i{display:block;height:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(var(--read,0))}

.essay .h-hero{padding:88px 0 40px}
.kicker{font:600 12px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.h-hero h1{margin-top:16px;font-size:clamp(32px,5.4vw,58px)}
.h-hero .lede{margin-top:24px;font-size:20px;line-height:1.65}
.h-meta{margin-top:16px;color:var(--muted);font-size:14px}

/* 年代條：一排年份，點了跳到那一章；窄螢幕橫向捲動，不撐開頁面 */
.era-strip{list-style:none;margin:40px 0 0;padding:0 0 8px;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.era-strip::-webkit-scrollbar{display:none}
.era-strip a{display:flex;flex-direction:column;gap:2px;min-width:92px;padding:12px 16px;border-radius:16px;text-decoration:none;
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);transition:transform .2s var(--spring)}
.era-strip a:active{transform:scale(.97)}
.era-strip b{font:600 15px/1.2 var(--mono);white-space:nowrap}
.era-strip span{font-size:12px;color:var(--muted);white-space:nowrap}

.h-toc{display:block;margin:24px 0 0;padding:28px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.h-toc h2{font-size:15px;letter-spacing:0;color:var(--muted);font-weight:600}
.h-toc ol{list-style:none;margin:8px 0 0;padding:0;columns:2;column-gap:var(--gutter)}
.h-toc li{break-inside:avoid;margin:0}
.h-toc a{display:flex;gap:12px;text-decoration:none;font-size:15px;line-height:1.45;color:var(--ink);white-space:normal;padding:11px 0;min-height:44px;border-radius:0;box-shadow:none;background:none;flex:initial}
.h-toc a[aria-current]{background:none;color:var(--ink)}
.h-toc a:hover{color:var(--accent)}
.h-toc a span{font:500 13px/1.6 var(--mono);color:var(--muted);flex:none}

/* 章節 */
.essay .ch{padding:88px 0 0;scroll-margin-top:72px}
.ch-era{display:flex;align-items:baseline;gap:12px;font:600 12px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ch-no{color:var(--accent);font-size:13px}
.ch h2{margin-top:16px;font-size:clamp(28px,3.6vw,40px)}
.ch > p:not(.ch-era):not(.lede):not(.ch-src){margin-top:20px;font-size:18px;line-height:1.85}
.ch h2 + p{margin-top:24px}
.ch-src{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px 16px;font-size:14px}
.ch-src a,.source-list a{color:var(--accent);text-decoration:none}
.ch-src a:hover,.source-list a:hover{text-decoration:underline;text-underline-offset:3px}

.lesson{margin:32px 0 0;padding:16px 24px;border-radius:18px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.lesson b{display:block;font-size:13px;color:var(--muted);font-weight:600}
.lesson p{margin-top:8px;font-size:16px;line-height:1.7}

/* ── 展品：每章一件可以動手的東西。外框共用，舞台裡的年代樣式由 exhibits/<id>.css 自己負責。──
   舞台寬度跟著正文欄走（最寬 760px，手機 343px）；展品自己用 container query 縮放，不撐開頁面。 */
.ex{margin:36px 0 0;padding:16px;border-radius:var(--r);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.ex-head{display:flex;align-items:baseline;gap:8px}
.ex-no{font:600 12px/1 var(--mono);color:var(--accent)}
.ex-head h3{font-size:16px;letter-spacing:0;flex:1}
.ex-reset{font:inherit;font-size:13px;color:var(--muted);background:none;border:0;padding:6px 10px;border-radius:var(--pill);cursor:pointer;box-shadow:inset 0 0 0 1px var(--line)}
.ex-reset:hover{color:var(--ink)}
.ex-task{margin-top:8px;font-size:15px;line-height:1.6;color:var(--muted)}
.ex-stage{position:relative;margin-top:16px;container-type:inline-size;border-radius:18px;overflow:hidden;min-height:120px}
.ex-stage button{font:inherit}
.ex-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ex-noscript{padding:20px;font-size:15px;line-height:1.7;color:var(--muted)}
.ex-status{margin-top:12px;min-height:1.6em;font-size:14px;line-height:1.6;color:var(--ink)}
.ex-how{margin-top:4px;font-size:13px;line-height:1.6;color:var(--muted)}
@media (max-width:820px){.ex{padding:12px}}

/* 年表 */
.h-timeline .lede,.h-unsure .lede,.h-sources .lede{margin-top:16px}
.tl-scroll{margin-top:28px;overflow-x:auto}
.h-timeline table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.55}
.h-timeline th,.h-timeline td{text-align:left;vertical-align:top;padding:12px 16px 12px 0;border-bottom:1px solid var(--line)}
.h-timeline thead th{font-size:13px;color:var(--muted);font-weight:600}
.h-timeline tbody th{font:600 14px/1.55 var(--mono);white-space:nowrap}
.h-timeline td:last-child{color:var(--muted)}

.h-unsure ul{margin:24px 0 0;padding-left:1.2em;display:grid;gap:8px;font-size:16px;line-height:1.7}

.source-list{margin:28px 0 0;padding:0;list-style:none;display:grid;gap:16px;counter-reset:src}
.source-list li{display:grid;gap:2px;padding-left:40px;position:relative;font-size:15px;line-height:1.55;counter-increment:src}
.source-list li::before{content:counter(src);position:absolute;left:0;top:1px;font:500 12px/1.6 var(--mono);color:var(--muted)}
.src-kind{font-size:12px;color:var(--muted)}
.src-note{color:var(--muted);font-size:14px}
.h-notice{margin-top:40px;color:var(--muted);font-size:13px}

@media (prefers-reduced-motion:no-preference) and (scripting:enabled){
  .hist .ch:not(.in){opacity:.001;transform:translateY(14px)}
  .hist .ch{transition:opacity .7s ease,transform .8s var(--ease-out)}
}
@media (max-width:820px){
  .essay{padding-bottom:32px}
  .essay .h-hero{padding:48px 0 28px}
  .h-hero .lede{font-size:18px}
  .h-toc ol{columns:1}
  .essay .ch{padding-top:64px}
  .ch > p:not(.ch-era):not(.lede):not(.ch-src){font-size:17px;line-height:1.8}
  .hist header nav:not(.langs) a:nth-child(n){display:inline-flex}
  .h-timeline table{font-size:14px}
  .h-timeline tbody th{font-size:12px;padding-right:8px}
}

/* ── 與 2.0 Preview 同一套設計（preview.css 先載入，body 是 .hist.pv）──
   共用：黑色膠囊導覽與 👀、Preview 式的編號標記、夕照漸層只用在進度、章節編號與「這一代留下的」；最後一章是 HomePlay，
   用和 2.0 頁同一片夜色整條鋪滿，讀到這裡就像走進 2.0。 */
.hist .read-bar i{background:var(--glow)}
.hist .h-hero .pv-kicker{margin:0}
.hist .h-hero h1{margin-top:24px;font-weight:700;letter-spacing:-.03em}
.hist .h-hero h1:lang(zh){letter-spacing:-.01em}
.hist .ch-no{background:var(--glow);-webkit-background-clip:text;background-clip:text;color:transparent}
.hist .lesson{position:relative;overflow:hidden;padding-left:24px}
.hist .lesson::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--glow)}
.hist .ex{border-radius:var(--r)}
.hist .era-strip a{border-radius:18px}
.hist .era-strip a:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 25%,transparent)}
.hist .h-toc a span{font-variant-numeric:tabular-nums}
/* 最後一章：整條夜色（box-shadow + clip-path 讓底色超出 760 欄寬，版面不動） */
.essay .ch#homeplay{--bg:var(--pv-night);--surface:var(--pv-night-2);--panel:#16181c;--ink:var(--pv-night-ink);--muted:var(--pv-night-muted);--line:var(--pv-night-line);
  color:var(--ink);background:var(--bg);box-shadow:0 0 0 100vmax var(--bg);clip-path:inset(0 -100vmax);margin-top:88px;padding-bottom:88px}
.essay .ch#homeplay h2{color:#fff}
.essay .ch#homeplay .ch-src a{color:#9db8ff}
/* 下一篇：接到 2.0 Preview */
.essay .h-next{margin-top:88px}
.essay .h-next h2{font-size:clamp(26px,3vw,40px);letter-spacing:-.025em;color:#fff}
.essay .h-next .pv-eyebrow{color:#ffb38f;margin-bottom:8px}
@media (max-width:820px){.essay .h-next{grid-template-columns:1fr}}
/* 展品的「重來」：外觀不變，可點範圍撐到 44 高 */
.ex-reset{position:relative}
.ex-reset::after{content:"";position:absolute;inset:-6px -4px}
/* 英文行長：正文最寬 34em（約 70 個字元）（中文 8 欄寬約 40 字，剛好） */
.essay :is(p,ul):lang(en){max-width:34em}
/* 中文大標照詞組換行，不把「小工具」拆成兩行 */
.h-hero h1 .l{display:inline-block}

/* 04 · 1997 Active Desktop。年代配色：青綠桌布、灰色斜面視窗，不跟深色模式變。尺寸用容器單位，窄螢幕改單欄。 */
.ad{--bevel-l:#fff;--bevel-d:#6b6b6b;--grey:#c3c3c3;container-type:inline-size;font:13px/1.35 var(--font);color:#111;background:#008080;padding:10px;display:grid;gap:8px}
.ad button{font:inherit;color:inherit}
.ad :focus-visible{outline:2px solid #ffff66;outline-offset:2px}
.ad-bar,.ad-item,.ad-bill{background:var(--grey);box-shadow:inset 1px 1px 0 var(--bevel-l),inset -1px -1px 0 var(--bevel-d),1px 1px 0 #000;border:0}
.ad-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px}
.ad-bartitle{font-weight:700}
.ad-switch{display:flex;align-items:center;gap:8px;min-height:32px;padding:3px 10px 3px 4px;background:var(--grey);border:0;cursor:pointer;box-shadow:inset 1px 1px 0 var(--bevel-l),inset -1px -1px 0 var(--bevel-d),1px 1px 0 #000}
.ad-switch:active{box-shadow:inset 1px 1px 0 var(--bevel-d),inset -1px -1px 0 var(--bevel-l)}
.ad-knob{width:26px;height:16px;background:#555;box-shadow:inset 1px 1px 0 #000,inset -1px -1px 0 #aaa;position:relative}
.ad-knob::after{content:"";position:absolute;top:2px;left:2px;width:10px;height:12px;background:var(--grey);box-shadow:inset 1px 1px 0 #fff,inset -1px -1px 0 #777;transition:transform .2s var(--ease-out)}
.ad-on .ad-knob{background:#0a7a2f}
.ad-on .ad-knob::after{transform:translateX(12px)}
.ad-swtext{font-weight:700}
.ad-desk{position:relative;display:grid;grid-template-columns:1fr minmax(96px,34%);grid-template-areas:"tk ch" "wx ch";gap:8px;min-height:236px;background:#2f9a9a;padding:8px}
.ad-ticker{grid-area:tk}.ad-weather{grid-area:wx}.ad-chbar{grid-area:ch;display:flex;flex-direction:column;min-height:0}
.ad-item{display:flex;flex-direction:column;min-width:0}
.ad-itemtitle{background:linear-gradient(90deg,#000080,#1084d0);color:#fff;font-weight:700;padding:2px 6px;font-size:12px}
.ad-list{list-style:none;margin:0;padding:4px 6px;font-family:var(--mono);font-size:12px;background:#000;color:#7CFC8A}
.ad-row{display:grid;grid-template-columns:3.2em 1fr auto;gap:6px;padding:1px 0}
.ad-px{text-align:right}.ad-chg.up{color:#7CFC8A}.ad-chg.dn{color:#ff8f8f}
.ad-flash{animation:ad-fl .4s ease-out}
@keyframes ad-fl{from{background:#2b4a2b}to{background:transparent}}
.ad-mapwrap{background:#1a3a7a}
.ad-mapwrap svg{display:block;width:100%;height:110px}
.ad-sea{fill:#2e5da8}.ad-land{fill:#6aa84f}.ad-front{stroke:#fff;stroke-width:1;stroke-dasharray:3 2}
.ad-cloud{fill:#f4f4f4;transform:translateX(calc(var(--wx,0)*1px));transition:transform .4s var(--ease-out)}
.ad-city{font:700 7px var(--font);fill:#fff}
.ad-temp{background:var(--grey);font-size:12px;padding:2px 6px}
.ad-chlist{overflow:auto;max-height:178px;flex:1;display:flex;flex-direction:column;gap:2px;padding:3px;background:#1d1d6b}
.ad-ch{display:flex;align-items:center;gap:6px;text-align:left;min-height:32px;padding:2px 6px;border:0;cursor:pointer;background:var(--grey);box-shadow:inset 1px 1px 0 var(--bevel-l),inset -1px -1px 0 var(--bevel-d)}
.ad-chdot{flex:none;width:10px;height:10px;border-radius:50%;background:#888;box-shadow:inset 0 0 0 1px #444}
.ad-ch[aria-pressed=true]{box-shadow:inset 1px 1px 0 var(--bevel-d),inset -1px -1px 0 var(--bevel-l);font-weight:700}
.ad-ch[aria-pressed=true] .ad-chdot{background:#e8c300;box-shadow:inset 0 0 0 1px #6a5a00}
.ad-picture{display:none;grid-column:1/-1;grid-row:1/-1;height:236px;background:#4a8fc7}
.ad-picture svg{display:block;width:100%;height:100%}
.ad-picture circle{fill:#f5e08a}.ad-picture path{fill:#5d9a5a}
.ad:not(.ad-on) .ad-item{display:none}
.ad:not(.ad-on) .ad-picture{display:block}
.ad-bill{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:6px 8px;text-align:center}
.ad-cost{display:flex;flex-direction:column;gap:2px}
.ad-val{font:700 18px var(--mono);font-variant-numeric:tabular-nums}
.ad-lab{font-size:11px;color:#333}
.ad-meter{height:8px;background:#555;box-shadow:inset 1px 1px 0 #000,inset -1px -1px 0 #aaa}
.ad-fill{display:block;height:100%;width:calc(var(--p,0)*100%);background:#e8c300;transition:width .3s}
@container (max-width:460px){.ad-desk{grid-template-columns:1fr;grid-template-areas:"tk" "wx" "ch";min-height:0}.ad-chlist{max-height:132px}.ad-val{font-size:15px}.ad-bar{flex-wrap:wrap}}
@media (prefers-reduced-motion:reduce){.ad *{animation:none!important;transition:none!important}}

/* 06 · 1997 → 2009 Microsoft Agent。舞台是淡色的一塊，機器人是原創的；位置用 --p（0 左、1 中、2 右）乘上容器寬度，減少動態時直接跳過去。 */
.ag{--p:1;container-type:inline-size;background:#eef0f4;color:#1b1d24;padding:10px;display:grid;gap:10px;font:13px/1.4 var(--font);border-radius:14px}
.ag-p0{--p:0}.ag-p1{--p:1}.ag-p2{--p:2}
.ag button,.ag input{font:inherit;color:inherit}
.ag :focus-visible{outline:2px solid #2f5de0;outline-offset:2px}
.ag-stage{position:relative;height:230px;overflow:hidden;border-radius:10px;background:linear-gradient(#cfe0f6,#e8eef8 62%,#b9c7da 62%,#9fb0c8);box-shadow:inset 0 0 0 1px #aab6c8}
.ag-actor{position:absolute;bottom:10px;left:50%;width:64px;margin-left:-32px;transform:translateX(calc((var(--p) - 1)*34cqw));transition:transform .35s var(--ease-out)}
.ag-actor[hidden]{display:none}
.ag-robot svg{display:block;width:64px;height:80px;overflow:visible}
.ag-fig{transform-origin:32px 70px;transform-box:view-box}
.ag-head{fill:#e9eef7;stroke:#4a5a78;stroke-width:2}.ag-torso{fill:#7f95bd;stroke:#4a5a78;stroke-width:2}.ag-arm{fill:#7f95bd;stroke:#4a5a78;stroke-width:1.5}
.ag-eye{fill:#1b2a4a}.ag-mouth{fill:none;stroke:#1b2a4a;stroke-width:2;stroke-linecap:round}.ag-ant{stroke:#4a5a78;stroke-width:2}.ag-ball{fill:#ef6a4c}
.ag-armR{transform-origin:51px 50px}.ag-ant,.ag-ball{transform-origin:32px 14px}
.wave .ag-armR{animation:ag-wave .2s ease-in-out 2 alternate}
.think .ag-ant,.think .ag-ball{animation:ag-sway .2s ease-in-out 2 alternate}
.bow .ag-fig{animation:ag-bow .4s ease-in-out 1 alternate both;animation-iteration-count:2}
@keyframes ag-wave{from{transform:rotate(0)}to{transform:rotate(-150deg)}}
@keyframes ag-sway{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
@keyframes ag-bow{from{transform:rotate(0)}to{transform:rotate(18deg)}}
.ag-bub{position:absolute;left:50%;bottom:calc(100% + var(--by,4px));width:max-content;max-width:42cqw;padding:5px 9px;border-radius:12px;background:#fff;border:1px solid #6b7894;box-shadow:0 2px 4px rgba(0,0,0,.15);transform:translateX(calc(-50% + var(--sh,0px) + var(--bx,0px)));font-size:12px;line-height:1.35}
.ag-bub[hidden]{display:none}
.ag-b0{--by:8px}.ag-b1{--by:4px;--bx:-12px;background:#fff6d6}.ag-b2{--by:30px;--bx:14px;background:#e1f3e4}.ag-b3{--by:56px;--bx:-4px;background:#f9e0e6}
.ag-p0 .ag-bub{--sh:46px}.ag-p2 .ag-bub{--sh:-46px}
.ag-cap{position:absolute;left:8px;top:6px;font:12px var(--mono);color:#34405a}
.ag-edit{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ag-h{font-weight:700;font-size:12px;margin-bottom:4px;color:#34405a}
.ag-palette{display:flex;flex-wrap:wrap;gap:5px}
.ag-pal,.ag-mini,.ag-go{min-height:32px;padding:3px 9px;border:0;border-radius:8px;background:#fff;cursor:pointer;box-shadow:inset 0 0 0 1px #aab6c8}
.ag-pal{font:12px var(--mono)}
.ag-pal:hover,.ag-mini:hover,.ag-go:hover{background:#dfe7f7}
.ag-speak{display:flex;gap:5px;flex:1 1 100%}
.ag-in{flex:1;min-width:0;min-height:32px;padding:3px 8px;border:0;border-radius:8px;box-shadow:inset 0 0 0 1px #aab6c8;background:#fff}
.ag-list{list-style:none;margin:0;padding:0;display:grid;gap:4px;max-height:210px;overflow:auto}
.ag-item{display:flex;align-items:center;gap:4px;padding:2px 4px 2px 8px;border-radius:8px;background:#fff;box-shadow:inset 0 0 0 1px #d2d9e6}
.ag-item.on{background:#ffe9a8;box-shadow:inset 0 0 0 2px #c58a00}
.ag-item code{flex:1;min-width:0;font:12px var(--mono);overflow-wrap:anywhere}
.ag-mini{min-width:32px;padding:3px 6px}
.ag-mini:disabled,.ag-go:disabled{opacity:.45;cursor:default}
.ag-ctrl{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ag-go{font-weight:700;padding:3px 14px}
.ag-three{background:#2f5de0;color:#fff}.ag-three:hover{background:#2449b8}
.ag-three:disabled{background:#2f5de0}
.ag-loud{display:inline-flex;align-items:center;gap:4px;min-height:32px;font-size:12px}
.ag-loud[hidden]{display:none}
@container (max-width:460px){.ag-edit{grid-template-columns:1fr}.ag-stage{height:250px}}
@media (prefers-reduced-motion:reduce){.ag *{animation:none!important;transition:none!important}}

/* 05 · 1997 Office 小幫手。字處理器視窗是灰色斜面；墨點助手是原創的。年代配色，不跟深色模式變。 */
.cl{container-type:inline-size;background:#c3c3c3;padding:3px;font:13px/1.4 var(--font);color:#111;box-shadow:inset 1px 1px 0 #fff,inset -1px -1px 0 #6b6b6b}
.cl button,.cl textarea{font:inherit;color:inherit}
.cl :focus-visible{outline:2px solid #1a3fd0;outline-offset:2px}
.cl-title{background:linear-gradient(90deg,#000080,#1084d0);color:#fff;font-weight:700;padding:3px 8px}
.cl-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;padding:6px 4px}
.cl-segs{display:inline-flex;box-shadow:inset 0 0 0 1px #6b6b6b}
.cl-seg{min-height:32px;padding:3px 12px;border:0;background:#c3c3c3;cursor:pointer;box-shadow:inset 1px 1px 0 #fff,inset -1px -1px 0 #6b6b6b}
.cl-seg[aria-pressed=true]{background:#000080;color:#fff;font-weight:700;box-shadow:none}
.cl-counts{display:flex;gap:14px;font-size:12px}
.cl-n{font:700 14px var(--mono);margin-left:2px}
.cl-paper{position:relative;background:#fff;box-shadow:inset 1px 1px 0 #6b6b6b,inset -1px -1px 0 #fff}
.cl-text{display:block;width:100%;min-height:200px;resize:none;border:0;background:transparent;padding:12px 14px;font-family:Georgia,"Songti TC","Songti SC",serif;font-size:15px;line-height:1.7;color:#111;box-sizing:border-box}
.cl-corner{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-height:76px;padding:4px 6px}
.cl-hint{flex:1;font-size:12px;color:#333}
.cl-ask{min-height:32px;padding:3px 14px;border:0;background:#c3c3c3;cursor:pointer;box-shadow:inset 1px 1px 0 #fff,inset -1px -1px 0 #6b6b6b,1px 1px 0 #000}
.cl-ask[hidden],.cl-dot[hidden],.cl-bubble[hidden]{display:none}
.cl-blot{position:relative;flex:none;width:60px;height:60px;transition:transform .35s var(--spring)}
.cl-blot svg{display:block;width:100%;height:100%}
.cl-body{fill:#1d1f3a}.cl-sheen{fill:none;stroke:#5b6096;stroke-width:2;stroke-linecap:round}.cl-eye{fill:#fff}.cl-glint{fill:#1d1f3a}.cl-drip{fill:#1d1f3a}
.cl-dot{position:absolute;top:-2px;right:-2px;width:14px;height:14px;border-radius:50%;background:#e8c300;box-shadow:0 0 0 2px #fff,0 0 0 3px #6a5a00}
/* 模式 A：助手跳到字的上面，氣泡蓋住文字（焦點仍在文字欄） */
.cl-pop .cl-blot{transform:translateY(-80px) scale(1.15);z-index:3;animation:cl-wob .5s var(--ease-out)}
.cl-paper .cl-bubble{position:absolute;right:14px;top:8px;z-index:2;max-width:min(300px,86%);background:#ffffe1;border:1px solid #000;box-shadow:4px 4px 0 rgba(0,0,0,.35);padding:10px 12px}
@keyframes cl-wob{0%{transform:translateY(-50px) scale(.6)}60%{transform:translateY(-88px) scale(1.25)}100%{transform:translateY(-80px) scale(1.15)}}
/* 模式 B：氣泡在角落那一條裡，不蓋文字 */
.cl-corner{flex-wrap:wrap}
.cl-corner .cl-bubble{flex:1 1 200px;order:-1;background:#ffffe1;border:1px solid #000;padding:8px 10px}
.cl-q{margin:0 0 8px}
.cl-acts{display:flex;gap:8px;flex-wrap:wrap}
.cl-btn{min-height:32px;padding:3px 12px;border:0;background:#c3c3c3;cursor:pointer;box-shadow:inset 1px 1px 0 #fff,inset -1px -1px 0 #6b6b6b,1px 1px 0 #000}
.cl-btn[hidden]{display:none}
@container (max-width:460px){.cl-text{font-size:14px}}
@media (prefers-reduced-motion:reduce){.cl *{animation:none!important;transition:none!important}}

/* 02 · Dashboard。桌面和小工具都是自己畫的：水藍桌面、光澤的圓角卡片。年代配色不跟深色模式變。 */
.db{position:relative;width:100%;height:452px;overflow:hidden;color:#16202e;outline-offset:-3px;
  background:radial-gradient(120% 90% at 20% 0,#7fb6e8,transparent 60%),linear-gradient(160deg,#3b6fb0,#2a3f78 60%,#27305f);font:500 13px/1.4 var(--font)}
@container (max-width:560px){.db{height:600px}}
:where(.db) button,:where(.db) textarea,:where(.db) output{font:inherit;color:inherit}
:where(.db) button{cursor:pointer}
.db :focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 4px #1b6fe0}
.db-bar{position:absolute;inset:0 0 auto;height:34px;display:flex;align-items:center;gap:10px;padding:0 10px;background:linear-gradient(#f4f6fa,#d3d9e3);border-bottom:1px solid #8892a4;z-index:1}
.db-brand{font-weight:700}
.db-count{margin-left:auto;font-size:12px;color:#445;font-variant-numeric:tabular-nums}
.db-sum{min-height:26px;padding:0 12px;border-radius:13px;border:1px solid #6a7690;background:linear-gradient(#fff,#d9dfea);font-weight:600}
.db-sum[aria-pressed=true]{background:linear-gradient(#a9c8f5,#6d9be0);border-color:#3b5fa8}
.db-doc{position:absolute;left:5%;right:5%;top:56px;bottom:22px;background:#fff;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.35);display:flex;flex-direction:column;overflow:hidden}
.db-dtitle{flex:none;text-align:center;padding:6px;font-size:12px;font-weight:600;background:linear-gradient(#eceff4,#d4d9e2);border-bottom:1px solid #aab}
.db-doctext{flex:1;border:0;resize:none;padding:12px;background:#fff;line-height:1.6;user-select:text}
/* 那一層 */
.db-layer{position:absolute;inset:34px 0 0;z-index:2;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;background:rgba(8,12,24,.72);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.db-layer.on{opacity:1;visibility:visible}
.db-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;flex:1;align-content:start}
@container (max-width:560px){.db-grid{grid-template-columns:repeat(2,1fr)}}
.db-w{height:212px;perspective:700px;transform:translateY(14px) scale(.94);opacity:0;transition:transform .3s var(--ease-out,ease-out),opacity .25s}
.db-layer.on .db-w{transform:none;opacity:1}
.db-flip{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .4s var(--ease-out,ease-out)}
.db-w.flipped .db-flip{transform:rotateY(180deg)}
.db-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:18px;padding:10px;display:flex;flex-direction:column;gap:6px;overflow:hidden;
  background:linear-gradient(160deg,#4a5670,#232b3d);color:#f2f5fb;border:1px solid rgba(255,255,255,.35);box-shadow:0 10px 22px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.45)}
.db-face::before{content:"";position:absolute;left:0;right:0;top:0;height:42%;background:linear-gradient(rgba(255,255,255,.28),rgba(255,255,255,.03));pointer-events:none;border-radius:18px 18px 60% 60%/18px 18px 14px 14px}
.db-back{transform:rotateY(180deg);background:linear-gradient(160deg,#2f3a52,#161c2b)}
.db-face>*{position:relative}
.db-hd{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;opacity:.85;padding-right:30px}
.db-i{position:absolute!important;right:2px;top:2px;width:32px;height:32px;border:0;font-weight:700;font-style:italic;font-family:Georgia,serif;
  background:radial-gradient(circle,rgba(255,255,255,.3) 0 10px,transparent 11px)}
.db-cbody{flex:1;display:flex;flex-direction:column;gap:6px;min-height:0}
.db-w[data-k=note] .db-front{background:linear-gradient(160deg,#ffe98a,#f2c94c);color:#4a3b00}
.db-w[data-k=note][data-c=p] .db-front{background:linear-gradient(160deg,#ffc2d6,#f08db0);color:#4a1030}
.db-w[data-k=note][data-c=g] .db-front{background:linear-gradient(160deg,#c6f0b0,#8fd36f);color:#12400a}
.db-notetext{flex:1;min-height:0;resize:none;border:0;background:transparent;line-height:1.45;padding:2px}
.db-clockface{flex:1;min-height:0;display:flex;justify-content:center}
.db-clockface svg{height:100%;max-height:122px;aspect-ratio:1}
.db-dial{fill:#f4f6fb;stroke:#9aa5bd;stroke-width:3}
.db-tk{stroke:#3a4458;stroke-width:2}
.db-hh,.db-mh,.db-sh{transform-origin:50px 50px;transform:rotate(var(--a,0deg))}
.db-hh line,.db-mh line{stroke:#1c2433;stroke-width:4;stroke-linecap:round}
.db-mh line{stroke-width:3}.db-sh line{stroke:#d6402f;stroke-width:1.6}.db-pin{fill:#d6402f}
.db-digital{text-align:center;font:600 16px var(--mono);font-variant-numeric:tabular-nums}
.db-disp{display:block;text-align:right;padding:3px 8px;border-radius:6px;background:#b9d3a4;color:#1a2a12;font:600 16px var(--mono);overflow:hidden}
.db-keys{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.db-key{min-height:32px;border:0;border-radius:8px;background:linear-gradient(#6b7790,#3d475c);box-shadow:inset 0 1px 0 rgba(255,255,255,.4);font-weight:600}
.db-key.op{background:linear-gradient(#f3a44d,#d9741a)}
.db-key:active{filter:brightness(.8)}
.db-wbody{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center}
.db-ico{position:relative;width:46px;height:46px;border-radius:50%;margin-bottom:4px}
.db-ico.sun{background:radial-gradient(circle,#ffe16a 0 55%,#ffb21c);box-shadow:0 0 18px 6px rgba(255,200,60,.55)}
.db-ico.cloud{width:56px;height:26px;margin-top:10px;border-radius:14px;background:#e6ecf7;box-shadow:12px -10px 0 2px #e6ecf7,-10px -4px 0 -2px #e6ecf7}
.db-ico.moon{background:#f6efc5;box-shadow:inset -12px 0 0 0 #232b3d,0 0 12px rgba(246,239,197,.5)}
.db-city{font-weight:700}.db-temp{font-size:28px;font-weight:300;line-height:1}.db-cond{font-size:12px;opacity:.8}
.db-die{width:72px;height:72px;margin:auto;border-radius:18px;background:linear-gradient(#fff,#cfd6e4);color:#1c2433;font-size:40px;font-weight:700;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;box-shadow:0 3px 8px rgba(0,0,0,.4)}
.db-act,.db-opt,.db-done,.db-rm{min-height:32px;border-radius:16px;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.14);padding:0 12px;font-weight:600}
.db-opt[aria-pressed=true]{background:#2f7be8;border-color:#9cc2ff}
.db-opt:disabled{opacity:.4;cursor:default}
.db-opts{display:flex;flex-direction:column;gap:6px;flex:1}
.db-back .db-hint{flex:1;font-size:12px;opacity:.85}
.db-rm{background:rgba(214,64,47,.4)}
.db-done{background:#2f7be8;border-color:#9cc2ff}
/* 底部：加號、托盤、收回 */
.db-foot{display:flex;align-items:center;gap:10px;flex:none;position:sticky;bottom:-16px;margin:0 -16px -16px;padding:10px 16px;background:linear-gradient(transparent,rgba(8,12,24,.9) 40%)}
.db-plus{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.18);color:#fff;font-size:24px;line-height:1}
.db-tray{display:flex;gap:8px;padding:6px 8px;border-radius:20px;background:rgba(255,255,255,.14)}
.db-tray[hidden]{display:none}
.db-tray .db-opt{color:#fff}
.db-close{margin-left:auto;min-height:36px;padding:0 16px;border-radius:18px;border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.18);color:#fff;font-weight:600}
@media (prefers-reduced-motion:reduce){.db-layer,.db-w,.db-flip{transition:none}.db-w{transform:none}}

/* 01 · 1984 桌面附件。1 位元：只有黑和白，灰是 2 × 2 的網點。尺寸全用邏輯像素 × --u（桌面寬 512，窄螢幕 360）。
   黑白不跟深色模式變：那是年代的樣子，不是主題色。字用系統字，不用原廠點陣字。 */
.dk{--W:512;--H:342;--u:calc(100cqw / var(--W));position:relative;width:100%;aspect-ratio:var(--W)/var(--H);overflow:hidden;
  background:repeating-conic-gradient(#000 0 25%,#fff 0 50%) 0 0/calc(var(--u)*2) calc(var(--u)*2);
  color:#000;font:600 calc(var(--u)*12)/1.25 -apple-system,BlinkMacSystemFont,"Helvetica Neue","PingFang TC","PingFang SC",sans-serif;
  -webkit-font-smoothing:none;user-select:none;touch-action:manipulation}
@container (max-width:480px){.dk{--W:360;--H:620}}
.dk button{color:#000;background:#fff;border:0;padding:0;margin:0;font:inherit;cursor:default;border-radius:0}
.dk :focus-visible{outline:calc(var(--u)*2) solid #000;outline-offset:calc(var(--u)*1)}
.dk-bar{position:absolute;inset:0 0 auto;height:calc(var(--u)*20);background:#fff;border-bottom:max(1px,var(--u)) solid #000;display:flex;align-items:center;gap:calc(var(--u)*4);padding:0 calc(var(--u)*8);z-index:999}
.dk-mtitle{padding:calc(var(--u)*2) calc(var(--u)*8);line-height:calc(var(--u)*16)}
.dk-mark{font-size:calc(var(--u)*15)}
.dk-mtitle.on{background:#000!important;color:#fff!important}
.dk-menu{position:absolute;left:calc(var(--u)*8);top:calc(var(--u)*19);min-width:calc(var(--u)*150);background:#fff;border:max(1px,var(--u)) solid #000;box-shadow:calc(var(--u)*1) calc(var(--u)*1) 0 #000;display:flex;flex-direction:column;padding:calc(var(--u)*2) 0}
.dk-menu[hidden]{display:none}
.dk-mitem{text-align:left;padding:calc(var(--u)*3) calc(var(--u)*16)!important;min-height:calc(var(--u)*20)}
.dk-mitem:hover,.dk-mitem:focus-visible{background:#000!important;color:#fff!important;outline:0}
.dk-win{position:absolute;left:calc(var(--x,0)*var(--u));top:calc(var(--y,0)*var(--u));z-index:var(--z,1);background:#fff;
  border:max(1px,var(--u)) solid #000;box-shadow:calc(var(--u)*1) calc(var(--u)*1) 0 #000;display:flex;flex-direction:column}
.dk-win[hidden]{display:none}
.dk-title{position:relative;flex:none;height:calc(var(--u)*19);border-bottom:max(1px,var(--u)) solid #000;display:flex;align-items:center;justify-content:center;touch-action:none;cursor:grab;
  background:linear-gradient(#fff,#fff) 0 0/100% calc(var(--u)*3) no-repeat,linear-gradient(#fff,#fff) 0 100%/100% calc(var(--u)*3) no-repeat,
    repeating-linear-gradient(#000 0 max(1px,var(--u)),#fff 0 calc(var(--u)*2))}
.dk-win:not(.front) .dk-title{background:#fff}
.dk-win:not(.front) .dk-close{visibility:hidden}
.dk-tname{background:#fff;padding:0 calc(var(--u)*6);white-space:nowrap}
.dk-close{position:absolute!important;left:calc(var(--u)*8);top:50%;width:calc(var(--u)*13);height:calc(var(--u)*13);transform:translateY(-50%);border:max(1px,var(--u)) solid #000!important;box-shadow:0 0 0 calc(var(--u)*1) #fff}
.dk-close:active{background:#000!important}
.dk-body{flex:1;min-height:0}
.dk-doc{--x:20;--y:30;width:calc(var(--u)*330);height:calc(var(--u)*220)}
@container (max-width:480px){.dk-doc{--x:12;--y:32;width:calc(var(--u)*336);height:calc(var(--u)*200)}}
.dk textarea{display:block;width:100%;height:100%;resize:none;border:0;padding:calc(var(--u)*8);font:500 calc(var(--u)*13)/1.45 inherit;font-family:inherit;color:#000;background:#fff;-webkit-font-smoothing:none;user-select:text}
.dk-doc textarea{height:calc(100% - var(--u)*19)}
/* 計算機 */
.dk-calc{width:calc(var(--u)*124)}
.dk-calc .dk-body{padding:calc(var(--u)*6)}
.dk-disp{display:block;height:calc(var(--u)*20);border:max(1px,var(--u)) solid #000;text-align:right;padding:0 calc(var(--u)*4);line-height:calc(var(--u)*18);overflow:hidden;font-variant-numeric:tabular-nums}
.dk-keys{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--u)*4);margin-top:calc(var(--u)*6)}
.dk-key{height:calc(var(--u)*20);border:max(1px,var(--u)) solid #000!important;border-radius:calc(var(--u)*3)!important;box-shadow:0 calc(var(--u)*1) 0 #000}
.dk-key:active{background:#000!important;color:#fff!important;box-shadow:none}
.dk-key.wide{grid-column:span 2}
/* 鬧鐘 */
.dk-clock{width:calc(var(--u)*140)}
.dk-time{padding:calc(var(--u)*6) 0;text-align:center;font-size:calc(var(--u)*16);font-variant-numeric:tabular-nums}
/* 記事本：右下角折起來的一頁 */
.dk-note{width:calc(var(--u)*172);height:calc(var(--u)*132)}
.dk-note .dk-body{position:relative}
.dk-dog{position:absolute;right:0;bottom:0;width:calc(var(--u)*14);height:calc(var(--u)*14);background:linear-gradient(135deg,#fff 0 50%,#000 50% calc(50% + var(--u)),#fff 0);border-left:max(1px,var(--u)) solid #000;border-top:max(1px,var(--u)) solid #000}
/* 拼圖 */
.dk-puzzle{width:calc(var(--u)*134)}
.dk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:calc(var(--u)*4)}
.dk-tile{height:calc(var(--u)*31);border:max(1px,var(--u)) solid #000!important;margin:calc(var(--u)*-0.5)!important;font-size:calc(var(--u)*13)}
.dk-tile.blank{background:repeating-conic-gradient(#000 0 25%,#fff 0 50%) 0 0/calc(var(--u)*2) calc(var(--u)*2)!important}
.dk-tile:active{background:#000!important;color:#fff!important}
/* 窄螢幕：按鍵與拼圖塊放大到手指點得到（放在最後，蓋過上面的預設尺寸） */
@container (max-width:480px){.dk-calc{width:calc(var(--u)*150)}.dk-key{height:calc(var(--u)*30)}.dk-disp{height:calc(var(--u)*26);line-height:calc(var(--u)*24)}
.dk-puzzle{width:calc(var(--u)*152)}.dk-tile{height:calc(var(--u)*35)!important}.dk-close{width:calc(var(--u)*18);height:calc(var(--u)*18)}.dk-title{height:calc(var(--u)*24)}}

/* 12 · 2026 HomePlay · ClioTalk。深色的圓角螢幕用首頁眼睛卡（.eyes-card）同一組色相，壓暗一點當夜裡的桌面。
   膠囊是黑色玻璃，裡面是首頁那雙 👀（不改樣子）；玻璃感只給面板與按鈕。螢幕本身不跟深色模式變，下方的說明列用網站色票。 */
.hp{display:grid;gap:14px;font-family:var(--font)}
.hp button{font:inherit;color:inherit;border:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hp :focus-visible{outline:2px solid #fff;outline-offset:3px}
.hp-screen{position:relative;display:grid;justify-items:center;gap:6px;padding:18px 16px 18px;border-radius:24px;overflow:hidden;color:#fff;outline:0;
  background:radial-gradient(120% 80% at 80% 110%,rgba(216,168,124,.55),transparent 60%),linear-gradient(160deg,#1a2036,#33416c 48%,#6e5f80 82%,#9c7e74);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
@container (min-width:560px){.hp-screen{padding:22px 28px 26px}}

/* 膠囊與 👀 */
.hp-capsule{--c:0;width:clamp(132px,34cqw,188px);aspect-ratio:2.7;border-radius:999px;display:grid;place-items:center;
  background:linear-gradient(180deg,rgba(14,16,22,.86),rgba(4,5,8,.92));box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(255,255,255,.08),0 8px 18px -10px rgba(0,0,0,.7)}
.hp-capsule svg{display:block;height:66%;width:auto}
.hp-capsule .pupil{opacity:calc(1 - var(--c))}
.hp-capsule .lid{opacity:var(--c)}

/* ClioTalk 的紫色小珠：聽的時候從膠囊落下來 */
.hp-bead{position:absolute;left:50%;top:calc(18px + clamp(132px,34cqw,188px) / 2.7 - 6px);width:11px;height:11px;margin-left:-5.5px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#e6d8ff,#9a72ff 45%,#6a3fe0);box-shadow:0 0 12px rgba(154,114,255,.8);opacity:0;transform:translateY(-6px) scale(.4);
  transition:transform .36s var(--spring),opacity .2s var(--ease-out)}
@container (min-width:560px){.hp-bead{top:calc(22px + clamp(132px,34cqw,188px) / 2.7 - 6px)}}
.hp:is([data-state="listen"],[data-state="answer"],[data-state="confirm"]) .hp-bead{opacity:1;transform:translateY(14px) scale(1)}

.hp-time{margin:16px 0 4px;font-size:clamp(46px,15cqw,84px);font-weight:250;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.9);text-shadow:0 2px 20px rgba(0,0,0,.25)}

/* 面板：玻璃 */
.hp-panel{width:min(100%,440px);display:grid;gap:10px;padding:10px;border-radius:22px;background:rgba(255,255,255,.13);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 10px 30px -18px rgba(0,0,0,.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6)}
.hp-ask{display:flex;align-items:center;gap:10px;width:100%;min-height:46px;padding:6px 6px 6px 14px;border-radius:999px;background:rgba(255,255,255,.08);text-align:left;transition:background .2s}
.hp-ask:hover{background:rgba(255,255,255,.16)}
.hp:is([data-state="listen"],[data-state="answer"],[data-state="confirm"]) .hp-ask{display:none}
.hp-dot{flex:none;width:9px;height:9px;border-radius:50%;background:#a98bff;box-shadow:0 0 8px rgba(169,139,255,.8)}
.hp-hint{flex:1;font-size:15px;color:rgba(255,255,255,.88)}
.hp .hp-askl{flex:none;padding:7px 16px;border-radius:999px;background:#fff;color:#15181c;font-size:14px;font-weight:600}
.hp-body{display:grid;gap:8px}
.hp[data-state="done"] .hp-ask{order:2}
.hp-body:empty{display:none}
.hp-pickrow{display:flex;align-items:center;gap:8px;padding-left:6px}
.hp-pick{flex:1;margin:0;font-size:13px;color:rgba(255,255,255,.75)}
.hp-x{flex:none;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.12);font-size:18px;line-height:1}
.hp-sugs{display:grid;gap:6px}
.hp-sug{min-height:42px;padding:9px 14px;border-radius:16px;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);text-align:left;font-size:15px;transition:background .2s,transform .2s var(--ease-out)}
.hp-sug:hover{background:rgba(255,255,255,.2)}
.hp-sug:active{transform:scale(.985)}
.hp-you{justify-self:end;margin:0;max-width:85%;padding:7px 13px;border-radius:16px 16px 4px 16px;background:rgba(255,255,255,.2);font-size:14px}

/* 卡片：暫時的是虛線框，留下的是實線框；要你確認的是一張讀給你聽的資料卡 */
.hp-card{display:grid;gap:6px;padding:12px 14px;border-radius:16px;background:#fbfbfd;color:#15181c;outline:0;animation:hp-in .3s var(--ease-out) both}
.hp-card:focus-visible{outline:2px solid #fff;outline-offset:2px}
.hp-temp{border:1.5px dashed #9aa1aa}
.hp-kept{border:1.5px solid #15181c;box-shadow:3px 3px 0 #15181c}
.hp-ctitle{margin:0;font-size:13px;font-weight:600;color:#5b626b}
.hp-lines{margin:0;padding:0;list-style:none;display:grid;gap:2px;font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
.hp-to{margin:0;font-size:13px;color:#5b626b}
.hp-draft{margin:0;font-size:19px;font-weight:600;line-height:1.35}
.hp-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px}
.hp-end{justify-content:flex-end}
.hp-tag{flex:1;font-size:12.5px;color:#5b626b}
.hp-yes{color:#1f7a4d;font-weight:600}
.hp .hp-btn{min-height:36px;padding:7px 16px;border-radius:999px;background:#e8eaee;color:#15181c;font-size:14px;font-weight:600}
.hp .hp-ok{background:#2a63d4;color:#fff}
.hp .hp-keep{background:#15181c;color:#fff}
.hp-card .hp-btn:focus-visible{outline-color:#2a63d4}
.hp-not{opacity:.72}
.hp-foot{margin:0;padding:0 6px;font-size:12.5px;color:rgba(255,255,255,.72)}
.hp-foot:empty{display:none}
@keyframes hp-in{from{opacity:0;transform:translateY(6px)}}

/* 下方的說明列：網站色票 */
.hp-meta{display:grid;gap:4px;padding:0 4px}
.hp-counter{display:flex;align-items:center;gap:10px;margin:0;font-size:14px;color:var(--ink)}
.hp-count{min-width:34px;padding:2px 10px;border-radius:var(--pill);background:var(--panel);font:600 16px/1.5 var(--mono);text-align:center}
.hp-compare{margin:0;font-size:13.5px;line-height:1.55;color:var(--muted)}
@media (prefers-reduced-motion:reduce){
  .hp-bead{transition:none;transform:translateY(14px) scale(1)}
  .hp-card{animation:none}
  .hp-sug,.hp-ask{transition:none}
}

/* 11 · 2026 HomeView。用網站自己的色票與圓角：面板 28px、可按的東西是膠囊或圓。
   玻璃感只給控制項（箭頭、選中的家人）；錶面是 HomePlay 的渲染圖，不另外畫機身。 */
.hv{display:grid;gap:18px;padding:18px;background:linear-gradient(160deg,rgba(58,76,124,.10),rgba(158,134,156,.10) 55%,rgba(216,168,124,.14)),var(--panel);color:var(--ink);font-family:var(--font)}
@container (min-width:560px){.hv{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:24px;padding:24px}}
.hv button{color:inherit;border:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hv :focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* 輪播 */
.hv-faces{display:grid;justify-items:center;gap:8px;min-width:0}
.hv-frame{position:relative;width:min(100%,300px)}
.hv-view{overflow:hidden;border-radius:22px;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.hv-drag .hv-view{cursor:grabbing}
.hv-track{--i:0;--dx:0px;display:flex;transform:translate3d(calc(var(--i)*-100% + var(--dx)),0,0);transition:transform .38s var(--ease-out)}
.hv-drag .hv-track{transition:none}
.hv-slide{flex:0 0 100%;display:grid;place-items:center}
.hv-img{display:block;width:100%;height:auto;-webkit-user-drag:none;pointer-events:none}
.hv-arrow{position:absolute;top:42%;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;padding:0;
  background:rgba(255,255,255,.62);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 6px 16px -8px rgba(20,30,60,.45);-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);transition:transform .2s var(--ease-out)}
.hv-arrow svg{width:16px;height:16px}
.hv-arrow:active{transform:scale(.94)}
.hv-prev{left:-6px}
.hv-next{right:-6px}
.hv-name{margin:4px 0 0;font-size:17px;font-weight:600;letter-spacing:-.01em;min-height:1.4em}
.hv-dots{display:flex;justify-content:center;flex-wrap:wrap}
.hv-dot{width:26px;height:32px;padding:0;background:none;display:grid;place-items:center}
.hv-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ink);opacity:.22;transition:opacity .2s,transform .2s var(--ease-out)}
.hv-dot.on::before{opacity:.85;transform:scale(1.25)}
.hv-cap{margin:2px 0 0;text-wrap:balance;font-size:12.5px;line-height:1.5;color:var(--muted);text-align:center;max-width:30em}

/* 家裡的人 */
.hv-house{display:grid;gap:12px;min-width:0;padding-top:8px}
.hv-label{margin:0;font-size:13px;color:var(--muted);font-weight:600}
.hv-people{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.hv-person{display:grid;justify-items:center;gap:5px;min-height:44px;padding:8px 4px 7px;border-radius:18px;background:transparent;font-size:13.5px;color:var(--muted);transition:background .2s,box-shadow .2s}
.hv-person[aria-checked="true"]{color:var(--ink);font-weight:600;background:rgba(255,255,255,.66);box-shadow:inset 0 0 0 1px rgba(255,255,255,.8),0 6px 16px -10px rgba(20,30,60,.5);-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6)}
.hv-avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:600;font-size:16px;opacity:.72;transition:opacity .2s}
.hv-person[aria-checked="true"] .hv-avatar{opacity:1}
.hv-p-a .hv-avatar{background:linear-gradient(150deg,#e9a27a,#c76a6a)}
.hv-p-b .hv-avatar{background:linear-gradient(150deg,#6f8fd8,#3a4c7c)}
.hv-p-c .hv-avatar{background:linear-gradient(150deg,#9ec29a,#5c8a76)}
.hv-home{margin:2px 0 0;font-size:15px;font-weight:600}
.hv-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.hv-chip{display:grid;gap:2px;align-content:start;min-height:84px;padding:10px 11px;border-radius:18px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);min-width:0}
.hv-clabel{font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hv-cbig{margin-top:2px;font-size:22px;font-weight:600;line-height:1.15;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hv-csmall{font-size:12.5px;line-height:1.35;color:var(--muted);overflow-wrap:anywhere}
.hv-lesson{margin-top:4px;padding:12px 14px;border-radius:18px;background:rgba(255,255,255,.5);box-shadow:inset 0 0 0 1px var(--line)}
.hv-lesson[hidden]{display:none}
.hv-ltext{margin:4px 0 0;font-size:14.5px;line-height:1.6}
.hv-c-a .hv-clabel{color:#b5584f}
.hv-c-b .hv-clabel{color:#3d5fae}
.hv-c-c .hv-clabel{color:#4f7d68}
.hv-in .hv-chip{animation:hv-up .32s var(--ease-out) both}
.hv-in .hv-chip:nth-child(2){animation-delay:.04s}
.hv-in .hv-chip:nth-child(3){animation-delay:.08s}
@keyframes hv-up{from{opacity:0;transform:translateY(6px)}}

@media (prefers-color-scheme:dark){
  .hv{background:linear-gradient(160deg,rgba(58,76,124,.28),rgba(158,134,156,.12) 55%,rgba(216,168,124,.12)),var(--panel)}
  .hv-arrow{background:rgba(40,44,52,.6);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 6px 16px -8px rgba(0,0,0,.6)}
  .hv-person[aria-checked="true"]{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
  .hv-lesson{background:rgba(255,255,255,.05)}
  .hv-c-a .hv-clabel{color:#f0a196}
  .hv-c-b .hv-clabel{color:#9db6f2}
  .hv-c-c .hv-clabel{color:#9fcfb6}
}
@media (prefers-reduced-motion:reduce){
  .hv-track,.hv-arrow,.hv-dot::before,.hv-person,.hv-avatar{transition:none}
  .hv-in .hv-chip{animation:none}
}

/* 04 · 即時動態與待機模式。「手機」只是一塊抽象的直式螢幕（9:16、細線框、不畫邊框與按鍵），藥丸是一顆黑色圓角條。裝置本身固定深色（不是主題）。 */
.lv{display:grid;gap:12px;padding:14px;background:var(--panel);color:var(--ink);font:14px/1.5 var(--font)}
.lv-room{display:grid;place-items:center;min-height:min(112cqw,470px)}
.lv-phone{--w:min(58cqw,250px);position:relative;width:var(--w);aspect-ratio:9/16;font-size:calc(var(--w)/20);border-radius:1.6em;background:#000;padding:0;box-shadow:0 0 0 1px var(--line),0 .8em 2em -1em rgba(0,0,0,.45);color:#fff;container-type:normal}
.lv-phone.land{--w:min(92cqw,480px);aspect-ratio:16/9;font-size:calc(var(--w)/36);border-radius:1.4em}
.lv-screen{position:relative;width:100%;height:100%;border-radius:inherit;overflow:hidden;background:linear-gradient(170deg,#24355f,#5e4f7d 58%,#b07f78)}
.land .lv-screen{background:#000}
.lv-lock{display:grid;justify-items:center;padding-top:4.4em;gap:.4em}
.lv-lclock{font:200 4.6em/1 var(--font);letter-spacing:-.02em}
.lv-ltag{font-size:.8em;opacity:.7}
.land .lv-lock,.land .lv-isl{display:none}
.lv-sb{display:none}
.land .lv-sb{display:block;height:100%}
.lv-sbidle{height:100%;display:grid;grid-template-columns:1fr 1.5fr 1fr;align-items:center;gap:1em;padding:1.6em}
.lv-sbw{display:grid;gap:.2em;justify-items:center;padding:1em .4em;border-radius:1.2em;background:#16181d}
.lv-sbw b{font:300 2.2em/1 var(--font)}.lv-sbw span{font-size:.8em;color:rgba(255,255,255,.65)}
.lv-sbclock{font:200 5.2em/1 var(--font);text-align:center;letter-spacing:-.03em;color:#ffb4a8}
.lv-sbact{display:none;height:100%;place-items:center;align-content:center;gap:.6em}
[data-s=act] .lv-sbidle{display:none}[data-s=act] .lv-sbact{display:grid}
.lv-sbname{font-size:1.1em;color:rgba(255,255,255,.7)}
.lv-sbring{width:9em;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#ff9f43 calc(var(--p)*360deg),#262932 0)}
.lv-sbtime{width:80%;aspect-ratio:1;border-radius:50%;background:#000;display:grid;place-items:center;font:300 2.4em/1 var(--font);font-variant-numeric:tabular-nums}
.lv-sbtag{font-size:.8em;color:rgba(255,255,255,.55)}
/* 藥丸：三種大小；內容淡入，不動畫尺寸 */
.lv-isl{position:absolute;z-index:3;top:1.3em;left:50%;transform:translateX(-50%);width:28%;height:1.5em;border-radius:1.5em;background:#000;color:#fff;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.lv-isl[data-s=compact],.lv-isl[data-s=done]{width:60%;height:2.1em}
.lv-isl[data-s=expanded]{width:90%;height:auto;border-radius:1.8em}
.lv-isl .lv-cbtn,.lv-isl .lv-card{display:none}
.lv-isl[data-s=compact] .lv-cbtn,.lv-isl[data-s=done] .lv-cbtn{display:flex}
.lv-isl[data-s=expanded] .lv-card{display:grid}
.lv-cbtn{width:100%;height:100%;align-items:center;justify-content:space-between;padding:0 .9em;border:0;background:transparent;color:#fff;font:inherit;font-weight:600;font-variant-numeric:tabular-nums;cursor:pointer;animation:lv-in .25s ease-out}
.lv-cbtn:disabled{color:#7ee0a0;cursor:default}
.lv-ico{display:inline-grid;width:1.3em;height:1.3em;color:#ff9f43}.lv-ico svg{width:100%;height:100%}
.lv-card{gap:.7em;padding:.9em 1em 1em;animation:lv-in .25s ease-out}
.lv-etop{display:flex;align-items:center;gap:.6em;font-size:.9em;color:rgba(255,255,255,.75)}
.lv-ename{flex:1}
.lv-fold{min-width:32px;min-height:32px;border:0;border-radius:50%;background:#22252c;color:#fff;font-size:1em;cursor:pointer}
.lv-etime{font:300 2.8em/1 var(--font);font-variant-numeric:tabular-nums}
.lv-ebar{height:.35em;border-radius:1em;background:#2a2d35;overflow:hidden}
.lv-ebar i{display:block;height:100%;width:100%;background:#ff9f43;transform-origin:left;transform:scaleX(var(--p))}
.lv-erow{display:grid;grid-template-columns:1fr 1fr;gap:.6em}
.lv-eb{min-height:36px;border:0;border-radius:2em;background:#2a2d35;color:#fff;font:inherit;font-size:.95em;font-weight:600;cursor:pointer}
.lv-cancel{background:#5a2328;color:#ffb4b4}
.lv-ctl{display:flex;flex-wrap:wrap;gap:8px}
.lv-btn{min-height:40px;padding:0 18px;border-radius:var(--pill);border:0;background:var(--accent);color:var(--accent-ink);font-weight:600;cursor:pointer;touch-action:manipulation}
.lv-btn:disabled{opacity:.45;cursor:default}
.lv-tog{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.lv-tog[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.lv-fact{margin:0;font-size:13px;color:var(--muted)}
.lv :focus-visible{outline:2px solid #6ea8ff;outline-offset:2px}
@keyframes lv-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.lv-cbtn,.lv-card{animation:none}}

/* 02 · 口袋裡的小工具。左：一直醒著的小工具；右：手機主畫面的時間軸小工具。用站上的色彩變數，深色模式自動跟著走。 */
.pk{display:grid;gap:14px;padding:12px;background:var(--panel);color:var(--ink);font:14px/1.5 var(--font)}
.pk-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@container (max-width:520px){.pk-cols{grid-template-columns:1fr}}
.pk-card{background:var(--surface);border-radius:20px;padding:14px;display:grid;gap:10px;align-content:start;box-shadow:inset 0 0 0 1px var(--line)}
.pk-h{margin:0;font-size:15px}
.pk-sub{margin:-4px 0 0;font-size:13px;color:var(--muted)}
.pk-gad{border-radius:14px;background:linear-gradient(#e6ebf3,#d3dbe8);color:#1b2433;padding:10px 12px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),0 1px 0 rgba(255,255,255,.5)}
.pk-gtitle{display:flex;justify-content:space-between;align-items:center;font:600 12px/1 var(--mono);letter-spacing:.04em;margin-bottom:8px}
.pk-gdot{width:8px;height:8px;border-radius:50%;background:#e5484d}
.pk-grow{display:flex;align-items:center;gap:10px}
.pk-gtemp{font-size:28px;font-weight:600;font-variant-numeric:tabular-nums}
.pk-gclock{margin-left:auto;font:600 13px/1 var(--mono)}
.pk-ico{display:inline-grid;width:1.9em;height:1.9em}.pk-ico svg{width:100%;height:100%}
.pk-meter{display:grid;gap:4px}
.pk-mlabel{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}
.pk-mval{font:600 13px/1.4 var(--mono);color:var(--ink)}
.pk-mbar{height:8px;border-radius:var(--pill);background:var(--panel);overflow:hidden}
.pk-mfill{display:block;height:100%;width:100%;border-radius:inherit;background:var(--accent);transform-origin:left;transform:scaleX(var(--v,0))}
.pk-card:first-child .pk-mfill{background:#e5484d}
/* 抽象的「一塊口袋螢幕」：細線框、不畫邊框與瀏海，和第 9、10 章同一種畫法 */
.pk-phone{position:relative;justify-self:center;width:min(100%,190px);aspect-ratio:9/12;border-radius:20px;background:linear-gradient(160deg,#2c3d63,#6b5a82 60%,#b8826e);padding:14px 12px 10px;box-shadow:0 0 0 1px var(--line),0 14px 30px -18px rgba(0,0,0,.45);display:grid;grid-template-rows:auto 1fr;gap:10px;overflow:hidden}
.pk-island{display:none}
.pk-widget{border-radius:16px;padding:9px 11px;display:grid;gap:2px;color:#fff;background:linear-gradient(#4f86d8,#8fb6ee);transition:background .3s}
.pk-k-moon,.pk-k-rain{background:linear-gradient(#2a3260,#4a4f86)}
.pk-k-dawn{background:linear-gradient(#5a6aa8,#e0a27a)}
.pk-k-cloud{background:linear-gradient(#6f7f98,#a5b2c6)}
.pk-wtop{display:flex;justify-content:space-between;gap:6px;font-size:12px;font-weight:600}
.pk-wmid{display:flex;justify-content:space-between;align-items:center}
.pk-wtemp{font-size:30px;font-weight:300;line-height:1.1;font-variant-numeric:tabular-nums}
.pk-wname{font-size:12px}.pk-wlast{font:11px/1.3 var(--mono);opacity:.8}
.pk-wstale{font-size:10px;font-weight:700;padding:0 6px;border-radius:var(--pill);background:#e5484d}
.pk-wstale[hidden]{display:none}
.pk-apps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;align-content:start}
.pk-app{aspect-ratio:1;border-radius:22%;background:rgba(255,255,255,.28)}
.pk-app.a1,.pk-app.a4{background:rgba(255,255,255,.45)}.pk-app.a2{background:rgba(120,200,160,.6)}.pk-app.a6{background:rgba(245,179,66,.6)}
.pk-ctl{display:grid;gap:8px;background:var(--surface);border-radius:20px;padding:14px;box-shadow:inset 0 0 0 1px var(--line)}
.pk-scrub{display:flex;align-items:center;gap:10px}
.pk-range{flex:1;min-width:0;height:32px;accent-color:var(--accent)}
.pk-time{font:600 14px/1 var(--mono);min-width:4.2em;text-align:right}
.pk-btn{min-height:36px;padding:0 16px;border-radius:var(--pill);border:0;background:var(--accent);color:var(--accent-ink);font-weight:600;cursor:pointer;touch-action:manipulation}
.pk-btn:disabled{opacity:.5}
.pk-ask{justify-self:start;background:var(--ink);color:var(--bg)}
.pk-cap{font-size:13px;color:var(--muted)}
.pk-strip{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.pk-ent{display:grid;justify-items:center;gap:2px;padding:6px 0;border-radius:12px;background:var(--panel);font-size:11px;opacity:.7}
.pk-ent.on{opacity:1;background:var(--surface);box-shadow:0 0 0 2px var(--accent)}
.pk-et{font:600 11px/1.2 var(--mono)}.pk-ed{font-weight:600}.pk-ent .pk-ico{width:22px;height:22px}
.pk-brow{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.pk-btext{font:600 13px/1.4 var(--mono)}
.pk-budget.out .pk-mfill{background:#e5484d}
.pk-fact{margin:0;font-size:13px;color:var(--muted)}
.pk :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.pk-widget{transition:none}}
.pk-cmp{margin:4px 0 0;padding:10px 12px;border-radius:12px;background:var(--panel);font-size:14px}

/* 04 · 收回。一個虛構的小工具圖庫：淡藍玻璃窗格。示範區用警示色，但全是模擬。年代配色，不跟深色模式變。 */
.rm{position:relative;display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:18px;background:linear-gradient(#e6eef9,#d3deef);color:#16202e;font:500 13px/1.45 var(--font);min-height:420px}
.rm button{font:inherit;color:inherit;cursor:pointer}
.rm :focus-visible{outline:2px solid #1b6fe0;outline-offset:2px}
.rm [hidden]{display:none!important}
.rm-cap{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#4a5670;margin-bottom:6px}
.rm-gal{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@container (max-width:560px){.rm-gal{grid-template-columns:repeat(2,1fr)}}
.rm-card{display:flex;flex-direction:column;gap:4px;padding:10px;border-radius:12px;background:rgba(255,255,255,.7);border:1px solid #aab8d0;box-shadow:0 2px 6px rgba(30,50,90,.15)}
.rm-ico{width:40px;height:40px;border-radius:10px;border:1px solid rgba(0,0,0,.2)}
.rm-ico[data-k=g0]{background:linear-gradient(135deg,#8fd0ff,#3f86d8)}.rm-ico[data-k=g1]{background:linear-gradient(135deg,#b8e08a,#4f9a3c)}
.rm-ico[data-k=g2]{background:radial-gradient(circle at 30% 30%,#fff 0 12%,transparent 13%),linear-gradient(135deg,#ffd36a,#e8863a)}.rm-ico[data-k=g3]{background:linear-gradient(135deg,#d7b6ff,#7a52d0)}
.rm-nm{font-weight:700}.rm-ds{font-size:12px;color:#4a5670;flex:1}
.rm-inst,.rm-yes,.rm-no,.rm-next{min-height:34px;padding:0 14px;border-radius:17px;border:1px solid #7b88a6;background:linear-gradient(#fff,#dbe2ef);font-weight:600}
.rm-inst:disabled{opacity:.5;cursor:default}
.rm-card.done{background:rgba(210,238,218,.8)}
.rm-trayrow{display:flex;flex-direction:column}
.rm-tray{display:flex;gap:6px;flex-wrap:wrap;min-height:30px;align-items:center}
.rm-empty{color:#667}
.rm-run{padding:4px 10px;border-radius:12px;background:#fff;border:1px solid #8fb09a;font-weight:600}
.rm-run.off{background:#e4e6ec;border-color:#b3b8c4;color:#778;text-decoration:line-through}
.rm-demo{padding:10px 12px;border-radius:12px;border:2px dashed #c0392b;background:#fff3f1;color:#4a1612}
.rm-tag{display:inline-block;padding:1px 8px;border-radius:10px;background:#c0392b;color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em}
.rm-dh{font-weight:700;margin:4px 0}
.rm-dl{margin:0;padding-left:18px;font-family:var(--mono);font-size:12px}
.rm-send{margin-top:6px;font-weight:700}
.rm-fix{padding:12px;border-radius:12px;background:rgba(255,255,255,.7);border:1px solid #aab8d0;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.rm-sw{display:flex;align-items:center;gap:12px;min-height:44px;padding:4px 14px 4px 4px;border-radius:24px;border:1px solid #7b88a6;background:#fff;font-weight:700;font-size:15px}
.rm-knob{position:relative;width:56px;height:34px;border-radius:17px;background:#aab3c4;transition:background .2s;flex:none}
.rm-knob::after{content:"";position:absolute;left:3px;top:3px;width:28px;height:28px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.4);transition:transform .2s}
.rm-sw[aria-checked=true] .rm-knob{background:#2e9b55}.rm-sw[aria-checked=true] .rm-knob::after{transform:translateX(22px)}
.rm-fixmsg{margin:0}
.rm-next{background:linear-gradient(#ffe69a,#f2b93b);border-color:#a5791a}
.rm-gone{padding:28px 16px;text-align:center;border-radius:12px;background:#1d2538;color:#e8edf8}
.rm-big{font-size:22px;font-weight:700;margin-bottom:6px}
.rm-gone p{margin:0}
.rm.gone{min-height:0}
.rm.gone .rm-trayrow{display:none}
.rm-contrast{margin:0;padding:8px 12px;border-radius:12px;background:rgba(255,255,255,.55);font-size:12px;color:#334}
/* 權限表：蓋在圖庫上 */
.rm-sheet{position:absolute;left:5%;right:5%;top:40px;z-index:3;padding:16px;border-radius:14px;background:#fff;border:1px solid #7b88a6;box-shadow:0 18px 40px rgba(10,20,50,.5)}
.rm-st{margin:0 0 6px;font-size:16px}.rm-lead{margin:0 0 8px;font-weight:600}
.rm-perms{margin:0 0 8px;padding-left:18px;display:grid;gap:4px}
.rm-files{display:block;font:12px var(--mono);color:#556}
.rm-same{margin:0 0 10px;font-size:12px;color:#556}
.rm-act{display:flex;gap:8px}
.rm-yes{background:linear-gradient(#a9c8f5,#6d9be0);border-color:#3b5fa8}
@media (prefers-reduced-motion:reduce){.rm-knob,.rm-knob::after{transition:none}}

/* 03 · 側邊欄與 SideShow。左：電腦桌面與玻璃側邊欄；右：筆電蓋子上的 220 × 176 小螢幕。年代配色，不跟深色模式變。 */
.sb{display:grid;gap:16px;padding:14px;background:linear-gradient(#e9eef6,#d8e0ee);color:#16202e;font:500 13px/1.4 var(--font);border-radius:18px}
@container (min-width:600px){.sb{grid-template-columns:1fr 1fr}}
.sb button{font:inherit;color:inherit;cursor:pointer}
.sb :focus-visible{outline:2px solid #1b6fe0;outline-offset:2px}
.sb [hidden]{display:none!important}
.sb-cap{font-weight:700;font-size:12px;margin-bottom:6px;text-transform:uppercase;letter-spacing:.05em;color:#4a5670}
.sb-wall{position:relative;height:370px;border-radius:10px;overflow:hidden;border:1px solid #6d7e9c;display:flex;justify-content:flex-end;
  background:radial-gradient(70% 50% at 30% 100%,#6fc08a,transparent 70%),linear-gradient(170deg,#58b0e8,#2f6fc0 55%,#264b92)}
.sb-win{position:absolute;left:8%;top:12%;width:44%;height:42%;border-radius:6px;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.8);box-shadow:0 6px 16px rgba(0,0,0,.25)}
.sb-side{position:relative;width:46%;min-width:140px;padding:8px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;background:linear-gradient(90deg,rgba(255,255,255,.28),rgba(20,40,80,.35));
  backdrop-filter:blur(8px);border-left:1px solid rgba(255,255,255,.6)}
.sb-g{border-radius:8px;padding:6px 8px 8px;background:rgba(10,24,52,.55);color:#fff;border:1px solid rgba(255,255,255,.3)}
.sb-gh{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:700;margin-bottom:4px}
.sb-x{width:32px;height:32px;margin:-6px -8px -6px 0;border:0;background:none;color:#fff;font-size:18px;line-height:1}
.sb-clk{display:block;text-align:center;font:600 24px var(--mono);font-variant-numeric:tabular-nums}
.sb-showwrap{position:relative}
.sb-tile{height:54px;border-radius:6px}
.sb-t-a{background:linear-gradient(135deg,#f6a35c,#d6406a)}.sb-t-b{background:linear-gradient(135deg,#6fd0c2,#2f6fc0)}.sb-t-c{background:linear-gradient(135deg,#c7a3f5,#5a4bc0)}
.sb-next{position:absolute;right:0;bottom:0;width:32px;height:32px;border:0;border-radius:6px 0 6px 0;background:rgba(0,0,0,.35);color:#fff;font-size:18px}
.sb-feed{margin:0;padding:0;list-style:none;font-size:12px;display:grid;gap:3px}
.sb-feed li{padding-bottom:3px;border-bottom:1px solid rgba(255,255,255,.2)}
.sb-zzz{position:absolute;inset:0;display:grid;place-items:center;background:rgba(6,10,24,.72);color:#cfd8ee;font-weight:700;font-size:18px;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;pointer-events:none}
.sb-wall.asleep .sb-zzz{opacity:1;visibility:visible}
.sb-wall.asleep .sb-side{pointer-events:none}
.sb-adds{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.sb-add,.sb-ctl{min-height:32px;padding:0 12px;border-radius:16px;border:1px solid #7b88a6;background:linear-gradient(#fff,#dbe2ef);font-weight:600}
.sb-ctl[aria-pressed=true]{background:linear-gradient(#ffe69a,#f2b93b);border-color:#a5791a}
.sb-ctl:disabled{opacity:.45;cursor:default}
/* 筆電蓋子 */
.sb-right{display:flex;flex-direction:column;gap:10px;align-items:center}
.sb-lap{width:100%;max-width:340px}
.sb-lid{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 16px 12px;border-radius:16px;background:linear-gradient(160deg,#c9ced8,#8d95a6 55%,#a9b0be);border:1px solid #5b6478;box-shadow:inset 0 1px 0 #fff,0 10px 18px rgba(30,40,70,.35)}
.sb-scr{width:72%;aspect-ratio:220/176;border-radius:6px;background:linear-gradient(#10243f,#0b1a30);color:#d9ecff;border:3px solid #202838;padding:8px 10px;display:flex;flex-direction:column;gap:4px;font-size:12px;line-height:1.35;overflow:hidden}
.sb-sh{font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#7fc4ff;border-bottom:1px solid #2b4a72;padding-bottom:2px}
.sb-menu{margin:0;padding:0;list-style:none;flex:1}
.sb-menu li{padding:3px 6px;border-radius:3px}
.sb-menu li.on{background:#2f7be8;color:#fff}
.sb-sbody{flex:1;font-size:15px;font-weight:600;display:flex;align-items:center}
.sb-sf{font-size:10px;color:#8fb2d6}.sb-sf.old{color:#ffc766}
.sb-dev{display:flex;gap:8px}
.sb-btn{min-width:44px;min-height:36px;border-radius:18px;border:1px solid #4a5268;background:linear-gradient(#f1f3f8,#b9c0cf);font-size:12px;font-weight:700}
.sb-btn:active{filter:brightness(.85)}
.sb-hinge{height:8px;margin:0 6%;border-radius:0 0 8px 8px;background:linear-gradient(#6c7488,#3a4156)}
.sb-ctls{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.sb-chips{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.sb-chip{padding:3px 10px;border-radius:12px;font-size:12px;font-weight:600}
.sb-chip.yes{background:#cdeed6;color:#14532d}.sb-chip.no{background:#fadbd8;color:#7a1f16}
.sb-stats{font:600 13px var(--mono);text-align:center;font-variant-numeric:tabular-nums}
.sb-note{margin:0;font-size:12px;color:#4a5670;text-align:center;max-width:42ch}
@media (prefers-reduced-motion:reduce){.sb-zzz{transition:none}}

/* 03 · 2015 錶面上的一小格。錶面自己設計：深色圓角方形、四個角落的格子、中間的時間。用站上的色彩變數排版，錶面本身固定深色（是裝置，不是主題）。 */
.ww{display:grid;grid-template-columns:minmax(0,260px) 1fr;gap:20px;align-items:start;justify-content:center;padding:16px;background:var(--panel);color:var(--ink);font:14px/1.5 var(--font)}
@container (max-width:560px){.ww{grid-template-columns:1fr;justify-items:center}.ww-side{width:100%}}
/* 抽象的「一小塊錶面」：只畫螢幕本身，一圈細線，不畫錶殼、錶冠或錶帶 */
.ww-watch{position:relative;width:min(100%,260px);aspect-ratio:1;border-radius:28%;background:#000;padding:0;box-shadow:0 0 0 1px var(--line),0 18px 40px -20px rgba(0,0,0,.45)}
.ww-face{position:relative;width:100%;height:100%;border-radius:28%;background:#000;color:#fff;padding:7%;display:grid;grid-template:1fr auto 1fr / 1fr 1fr;gap:6px;overflow:hidden}
.ww-slot{position:relative;min-height:52px;border-radius:16px;border:1.5px dashed rgba(255,255,255,.28);background:transparent;color:#fff;display:grid;place-items:center;padding:4px;cursor:pointer;touch-action:manipulation;transition:opacity .4s}
.ww-slot:not(.empty){border-color:transparent;background:#14161b}
.ww-slot.on{border:2px solid #6ea8ff}
.ww-slot:disabled{cursor:default;color:#fff}
.ww-watch.lit .ww-slot.empty{border-color:transparent}
.ww-tl,.ww-tr{grid-row:1;align-self:start}.ww-bl,.ww-br{grid-row:3;align-self:end}.ww-tl,.ww-bl{grid-column:1}.ww-tr,.ww-br{grid-column:2}
.ww-plus{font-size:22px;color:rgba(255,255,255,.5)}
.ww-c{display:grid;justify-items:center;gap:1px;line-height:1.15}
.ww-g{display:block;width:22px;height:22px}.ww-g svg{width:100%;height:100%;display:block}
.ww-v{font:600 15px/1.1 var(--font);font-variant-numeric:tabular-nums}
.ww-l{font-size:10px;color:rgba(255,255,255,.62)}
.ww-time{grid-column:1/-1;grid-row:2;align-self:center;text-align:center;font:200 clamp(40px,22cqw,64px)/1 var(--font);letter-spacing:-.02em;font-variant-numeric:tabular-nums;transition:opacity .4s}
/* 暗下來：內容只剩一點點輪廓；抬手亮著時不顯示空格的虛線 */
.ww-watch.dim .ww-slot,.ww-watch.dim .ww-time{opacity:.07}
.ww-watch.lit .ww-slot.empty{opacity:.15}
.ww-side{display:grid;gap:10px}
.ww-cap{font-size:13px;color:var(--muted)}
.ww-pals{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ww-pal{min-height:44px;display:flex;align-items:center;justify-content:center;gap:6px;padding:4px 8px;border-radius:14px;border:0;background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;font-size:13px;touch-action:manipulation}
.ww-pal.used{box-shadow:inset 0 0 0 2px var(--accent)}
.ww-pg{display:inline-grid;width:18px;height:18px;flex:none}.ww-pg svg{width:100%;height:100%}
.ww-pd{font:700 11px/18px var(--font);text-align:center;border-radius:5px;background:var(--panel)}
.ww-hint{margin:0;font-size:13px;color:var(--muted);min-height:2.7em}
.ww-row{display:flex;gap:8px;flex-wrap:wrap}
.ww-btn{min-height:40px;padding:0 18px;border-radius:var(--pill);border:0;background:var(--accent);color:var(--accent-ink);font-weight:600;cursor:pointer;touch-action:manipulation}
.ww-ghost{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.ww-btn:disabled,.ww-pal:disabled{opacity:.45;cursor:default}
.ww-q{display:grid;gap:8px;padding:12px;border-radius:16px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.ww-q[hidden]{display:none}
.ww-qp{margin:0;font-weight:600}
.ww-opts{display:grid;gap:6px}
.ww-opt{min-height:40px;border-radius:12px;border:0;background:var(--panel);color:var(--ink);font-size:15px;cursor:pointer;touch-action:manipulation}
.ww-opt:hover{box-shadow:inset 0 0 0 2px var(--accent)}
.ww-fact{margin:0;font-size:13px;color:var(--muted)}
.ww :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ww-face :focus-visible{outline-color:#9cc3ff}
@media (prefers-reduced-motion:reduce){.ww-slot,.ww-time{transition:none}}