/* repair.fixesarmy.com, version 2: the www v2 design (sites/www/css/home.css, approved by Eddie
 * 2026-10-01) carried over to the repair site. The top half of this file is home.css with the 3D
 * stage taken out; repair's own parts (symptom picker, repair items, brands, inner pages) follow
 * at the end. Keep the shared half in step with home.css. */

:root {
  --bg: #060a13;
  --bg-2: #0a1222;
  --ink: #eef3fb;
  --ink-2: #c3cfdf;
  --ink-3: #8795aa;
  --line: rgba(170, 195, 230, 0.18);
  --glass: rgba(14, 22, 38, 0.72);
  --cyan: #5fe6ff;
  --lime: #c8ff5a;
  --amber: #ffb84d;
  --pink: #ff7ad9;
  --jp-a: #4f8bff;
  --jp-b: #9b5cff;
  --cta: linear-gradient(100deg, #6ff7ff 0%, #b8ff5c 55%, #e9ff7a 100%);
  --cta-glow: 0 0 0 1px rgba(214, 255, 150, 0.6), 0 10px 40px -6px rgba(140, 255, 200, 0.6), 0 0 80px -12px rgba(110, 240, 255, 0.5);
  --sans: "Noto Sans TC", "PingFang HK", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --hand: "LXGW WenKai TC", "Noto Sans TC", cursive;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --top-h: 60px;
  --pad: 20px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
/* The home hero points at Fixes Baby itself; the widget's pop-up greeting would cover the buttons. */
.fxc-teaser { display: none !important; } /* the hero already invites the chat; the bubble would sit on the page */
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.65 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; -webkit-tap-highlight-color: transparent; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p, li, summary { text-wrap: pretty; }
.nw { white-space: nowrap; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: #fff; color: #000; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }

/* ---------------------------------------------------------------- */
/* Buttons                                                            */
/* ---------------------------------------------------------------- */

.cta { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 60px; padding: 16px 34px; border-radius: 99px; overflow: hidden;
  background: var(--cta); box-shadow: var(--cta-glow); color: #051a0b; font-size: 19px; font-weight: 900; letter-spacing: 0.06em; text-decoration: none; transition: transform 0.25s var(--ease); }
.cta span { position: relative; z-index: 1; }
.cta::before { content: ""; position: absolute; inset: -2px; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.85) 45%, transparent 60%); transform: translateX(-120%); animation: sheen 3.4s ease-in-out infinite; }
.cta:hover { transform: translateY(-2px) scale(1.02); }
.cta:active { transform: scale(0.97); }
@keyframes sheen { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }

.ghost-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 24px; border-radius: 99px; border: 1.5px solid rgba(200, 230, 255, 0.42);
  background: rgba(255, 255, 255, 0.04); color: var(--ink); font-size: 17px; font-weight: 700; letter-spacing: 0.04em; text-decoration: none; transition: background 0.2s, border-color 0.2s; }
.ghost-btn:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(200, 255, 140, 0.7); }
.ghost-btn.sm { min-height: 44px; padding: 8px 18px; font-size: 16px; }
.acts { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------------------------------------------------------------- */
/* Top bar + menu                                                     */
/* ---------------------------------------------------------------- */

.top { position: fixed; z-index: 50; left: 0; right: 0; top: 0; height: calc(var(--top-h) + var(--safe-t)); padding: var(--safe-t) var(--pad) 0; display: flex; align-items: center; gap: 8px;
  transition: background 0.3s, box-shadow 0.3s; }
.top.solid { background: rgba(6, 10, 19, 0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); }
.logo { flex: none; }
.logo img { width: 112px; height: auto; }
@media (max-width: 420px) { .logo img { width: 92px; } .top-order, .top-learn { font-size: 13.5px; padding: 7px 11px; } }
@media (max-width: 380px) { .top { gap: 6px; } .logo img { width: 84px; } .top-order, .top-learn { font-size: 13px; padding: 7px 9px; } }
/* Below 375px logo + both buttons + menu do not fit; the menu carries 家電原理課. */
@media (max-width: 374px) { .top-learn { display: none; } }
.top-links { display: none; }
.top-order { margin-left: auto; padding: 8px 14px; white-space: nowrap; border-radius: 99px; background: var(--cta); color: #051a0b; font-size: 15px; font-weight: 900; text-decoration: none; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0s 0.3s; }
.top.solid .top-order { opacity: 1; visibility: visible; transition: opacity 0.3s; }
/* The Learn course sits beside every order button: lighter, see-through outline (Eddie 2026-10-01). */
.top-learn { padding: 7px 12px; border-radius: 99px; border: 1.5px solid rgba(200, 230, 255, 0.42); color: var(--ink); font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0s 0.3s; }
.top.solid .top-learn { opacity: 1; visibility: visible; transition: opacity 0.3s; }
.menu-btn { flex: none; width: 44px; height: 44px; margin-left: auto; border: 1px solid var(--line); border-radius: 99px; background: rgba(255, 255, 255, 0.04); display: grid; place-content: center; gap: 6px; }
.top.solid .menu-btn { margin-left: 0; }
/* Search (Eddie 2026-10-02): a magnifier button on phones, a search-box look on desktop. */
.top-find { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 99px; border: 1.5px solid rgba(95, 230, 255, 0.55); background: rgba(95, 230, 255, 0.08); color: var(--ink); text-decoration: none; box-shadow: 0 0 14px rgba(95, 230, 255, 0.18); }
.top-find svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.top-find span { display: none; }
.top-find ~ .menu-btn { margin-left: 0; }
@media (max-width: 400px) { .logo img { width: 96px; } .top { gap: 6px; } .top-order { padding: 8px 11px; } .top-learn { padding: 7px 9px; } }
.menu-find { display: flex; align-items: center; justify-content: center; gap: 8px; }
.menu-find svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.menu-btn span:not(.sr) { width: 18px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform 0.25s var(--ease); }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }
.menu { position: fixed; z-index: 49; inset: 0; padding: calc(var(--top-h) + var(--safe-t) + 8px) var(--pad) calc(var(--safe-b) + 96px); overflow-y: auto; background: rgba(6, 10, 19, 0.97); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.menu[hidden] { display: none; }
.menu-in { max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; }
.menu-h { margin: 22px 0 6px; font: 700 13px/1 var(--mono); letter-spacing: 0.12em; color: var(--ink-3); }
.menu a { padding: 12px 2px; border-bottom: 1px solid var(--line); font-size: 18px; font-weight: 700; text-decoration: none; }
.menu .menu-main { margin-top: 10px; padding: 14px 20px; border: 0; border-radius: 99px; text-align: center; background: var(--cta); color: #051a0b; font-size: 20px; font-weight: 900; }
.menu .menu-main.ghost { background: transparent; color: var(--ink); border: 1.5px solid rgba(200, 230, 255, 0.42); }
.menu-main small { display: block; font-size: 14px; font-weight: 500; opacity: 0.75; }
body.menu-open { overflow: hidden; --fxc-visibility: hidden; }
body.menu-open .top-order, body.menu-open .top-learn { opacity: 0 !important; visibility: hidden !important; }

/* ---------------------------------------------------------------- */
/* Hero: the whole first screen on a phone                            */
/* ---------------------------------------------------------------- */

.hero { position: relative; min-height: 100svh; padding: calc(var(--top-h) + var(--safe-t)) var(--pad) calc(var(--safe-b) + 92px); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; isolation: isolate; }
.hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); background: radial-gradient(120% 70% at 50% 18%, #0e1d38 0%, #070c17 55%, #04070d 100%); }
.hero-bg i { position: absolute; border-radius: 50%; filter: blur(70px); }
.hero-bg .g1 { width: 70vmax; height: 70vmax; left: -30vmax; top: -30vmax; background: radial-gradient(circle, rgba(95, 230, 255, 0.35), transparent 62%); animation: drift 14s ease-in-out infinite alternate; }
.hero-bg .g2 { width: 70vmax; height: 70vmax; right: -34vmax; bottom: -40vmax; background: radial-gradient(circle, rgba(200, 255, 90, 0.22), transparent 62%); animation: drift 17s ease-in-out infinite alternate-reverse; }
.hero-bg .grid { inset: 0; border-radius: 0; filter: none; background-image: linear-gradient(rgba(140, 190, 255, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(140, 190, 255, 0.07) 1px, transparent 1px); background-size: 40px 40px;
  mask-image: radial-gradient(70% 55% at 50% 30%, #000 20%, transparent 80%); -webkit-mask-image: radial-gradient(70% 55% at 50% 30%, #000 20%, transparent 80%); }
@keyframes drift { to { transform: translate(6vmax, 4vmax) scale(1.08); } }

/* Fixes Baby and the conversation. Phones: Fixes Baby on the left, the chat beside it, newest at the
   bottom (it fits any screen height). Bigger screens: Fixes Baby in the middle of three slow rings,
   two messages above, two below, none over the face. */
.orb { position: relative; flex: 1; min-height: 128px; max-height: 38svh; display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.orb-core { position: relative; flex: none; width: 104px; height: 104px; display: grid; place-items: center; }
.orb-ring { position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 1.5px solid rgba(125, 235, 255, 0.28); }
.orb-ring.r1 { animation: ring 6s ease-out infinite; }
.orb-ring.r2 { animation: ring 6s 2s ease-out infinite; }
.orb-ring.r3 { animation: ring 6s 4s ease-out infinite; }
@keyframes ring { 0% { transform: scale(0.45); opacity: 0; } 20% { opacity: 1; } 100% { transform: scale(1.25); opacity: 0; } }
.orb-baby { position: relative; width: 96px; height: auto; border-radius: 50%; box-shadow: 0 0 0 3px rgba(200, 255, 90, 0.8), 0 0 50px rgba(110, 240, 255, 0.5); animation: breathe 4.2s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.04); } }
.orb-bubbles { position: relative; flex: 1; min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; overflow: hidden; padding: 4px 0;
  -webkit-mask-image: linear-gradient(transparent, #000 30%); mask-image: linear-gradient(transparent, #000 30%); }
.ob { flex: none; max-width: 100%; padding: 7px 12px; border-radius: 16px; font-size: 14.5px; font-weight: 700; line-height: 1.35; }
.ob:not(.on) { display: none; }
.ob.on { animation: ob-in 0.45s var(--ease) both; }
@keyframes ob-in { from { opacity: 0; transform: translateY(10px) scale(0.94); } }
.ob.me { align-self: flex-end; background: #d9fdd3; color: #0b2a12; border-bottom-right-radius: 4px; }
.ob.ai { align-self: flex-start; background: var(--glass); border: 1px solid var(--line); color: var(--ink); border-bottom-left-radius: 4px; }
.ob.ok { background: linear-gradient(135deg, rgba(111, 247, 255, 0.24), rgba(184, 255, 92, 0.24)); border-color: rgba(200, 255, 90, 0.7); }
@media (min-width: 600px) and (min-height: 820px), (min-width: 900px) {
  .orb { display: grid; place-items: center; width: 100%; max-width: 560px; margin: 0 auto 8px; min-height: 300px; max-height: 46svh; }
  .orb-core { width: auto; height: auto; }
  .orb-ring { width: 300px; height: 300px; margin: -150px 0 0 -150px; }
  .orb-baby { width: 150px; }
  .orb-bubbles { position: absolute; inset: 0; display: block; padding: 0; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .ob { position: absolute; max-width: 58%; font-size: 15.5px; opacity: 0; transform: translateY(10px) scale(0.92); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
  .ob:not(.on) { display: block; }
  .ob.on { opacity: 1; transform: none; animation: none; }
  .ob:nth-child(1) { left: 0; top: 0; }
  .ob:nth-child(2) { right: 2%; top: 13%; }
  .ob:nth-child(3) { left: 4%; bottom: 13%; }
  .ob:nth-child(4) { right: 2%; bottom: 0; }
}

.hero-copy { position: relative; }
.live { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 99px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); font-size: 14px; font-weight: 700; color: var(--ink-2); }
.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 0 rgba(200, 255, 90, 0.7); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(200, 255, 90, 0); } 100% { box-shadow: 0 0 0 0 rgba(200, 255, 90, 0); } }
.hero h1 { margin-top: 14px; font-size: clamp(32px, 8.6vw, 72px); line-height: 1.18; font-weight: 900; letter-spacing: 0.01em; }
.hero h1 .l { display: block; white-space: nowrap; }
.hl { background: var(--cta); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { margin-top: 12px; font-size: 17.5px; color: var(--ink-2); max-width: 30em; }
.hero .acts { margin-top: 22px; }
.hero .cta { flex: 1 1 100%; max-width: 420px; min-height: 60px; font-size: 20px; }
.hero .ghost-btn { flex: 1 1 100%; max-width: 420px; min-height: 56px; }
/* Short phones (most phones with the browser bars showing): the hero still fits one screen, the
   buttons stay clear of Fixes Baby's corner launcher. */
@media (max-width: 899px) and (max-height: 760px) {
  .hero .live { display: none; }
  .hero h1 { margin-top: 0; font-size: clamp(28px, 7.8vw, 36px); }
  .lead { margin-top: 8px; font-size: 16px; }
  .hero .acts { margin-top: 16px; gap: 10px; }
  .hero .cta { min-height: 54px; }
  .hero .ghost-btn { min-height: 48px; }
  .hk-only { margin-top: 8px; }
}
/* Tablets: the phone layout, centred instead of stretched. */
@media (min-width: 600px) and (max-width: 899px) {
  .hero-copy { width: 100%; max-width: 640px; margin: 0 auto; text-align: center; }
  .hero h1 { font-size: clamp(32px, 6.6vw, 56px); }
  .hero .lead { margin-left: auto; margin-right: auto; }
  .hero .acts { justify-content: center; }
  .orb { max-width: 460px; }
  .ch, .story-hd, .promise, .faq, .other { padding-left: max(var(--pad), calc(50% - 320px)); padding-right: max(var(--pad), calc(50% - 320px)); }
  .tl { max-width: 720px; margin-left: auto; margin-right: auto; }
}
.hk-only { margin-top: 12px; font-size: 14px; color: var(--ink-3); }

/* The hand-drawn arrow from the hero to Fixes Baby in the corner. */
.to-baby { position: absolute; right: 80px; bottom: calc(var(--safe-b) + 36px); display: flex; align-items: flex-end; gap: 2px; font: 700 17px/1.2 var(--hand); color: var(--lime); text-align: right; opacity: 0; transition: opacity 0.6s; pointer-events: none; }
.to-baby.on { opacity: 1; }
.top.solid ~ main .to-baby { opacity: 0; }
.to-baby svg { width: 62px; height: 42px; fill: none; stroke: var(--lime); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 200; stroke-dashoffset: 200; }
.to-baby.on svg { animation: draw 1.2s 0.3s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---------------------------------------------------------------- */
/* Chapters                                                            */
/* ---------------------------------------------------------------- */

.ch { position: relative; padding: 72px var(--pad); display: grid; gap: 32px; }
.ch > * { min-width: 0; }
.ch-alt { background: linear-gradient(180deg, var(--bg), var(--bg-2) 30%, var(--bg-2) 70%, var(--bg)); }
.ch-n { font: 700 14px/1 var(--mono); letter-spacing: 0.16em; color: var(--cyan); }
.ch h2, .story h2, .other h2, .end h2 { margin-top: 12px; font-size: clamp(30px, 8vw, 52px); line-height: 1.2; font-weight: 900; }
.ch-p { margin-top: 14px; font-size: 17.5px; color: var(--ink-2); max-width: 30em; }
.ch-copy > .ghost-btn, .ch-copy > .acts { margin-top: 22px; }
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }

/* A phone, drawn flat. */
.phone { width: min(100%, 360px); justify-self: center; border-radius: 30px; padding: 10px; background: #0d1526; box-shadow: 0 0 0 1px rgba(125, 235, 255, 0.3), 0 30px 80px -30px rgba(40, 140, 255, 0.6); }
.phone-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 22px 22px 0 0; background: linear-gradient(90deg, #0b1426, #12305a); }
.phone-head img { width: 32px; height: 32px; border-radius: 50%; }
.phone-head b { font-size: 16px; }
.phone-head small { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.phone-head small i { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); animation: pulse 2s infinite; }
.chat { height: 320px; padding: 14px 12px; border-radius: 0 0 22px 22px; background: #eef3f8; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; overflow: hidden; }
.msg { max-width: 82%; padding: 9px 13px; border-radius: 16px; font-size: 15.5px; line-height: 1.45; color: #0b1426; animation: msg-in 0.4s var(--ease) both; }
.msg.me { align-self: flex-end; background: #d9fdd3; border-bottom-right-radius: 4px; }
.msg.ai { align-self: flex-start; background: #fff; border-bottom-left-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.msg.pic { padding: 6px; }
.msg.pic span { display: block; width: 150px; height: 84px; border-radius: 10px; background: linear-gradient(135deg, #cfd8e3, #eef2f6); position: relative; }
.msg.pic span::after { content: "型號 WW80T"; position: absolute; left: 12px; top: 28px; padding: 3px 8px; border-radius: 4px; background: #fff; font: 700 12px/1.3 var(--mono); color: #334; }
.msg.dots { display: flex; gap: 4px; padding: 13px 14px; }
.msg.dots i { width: 7px; height: 7px; border-radius: 50%; background: #9aa7b8; animation: dot 1s infinite; }
.msg.dots i:nth-child(2) { animation-delay: 0.15s; }
.msg.dots i:nth-child(3) { animation-delay: 0.3s; }
.msg.quote { background: linear-gradient(135deg, #f1fbff, #efffe6); border: 1px solid #b7e7ff; font-weight: 700; }
@keyframes msg-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes dot { 50% { transform: translateY(-4px); opacity: 0.5; } }

/* 體驗版 chips: the shared widget unhides the group once it can take them. */
.trial { margin-top: 24px; padding: 16px; border-radius: 20px; border: 1px solid var(--line); background: var(--glass); }
.trial[hidden] { display: none; }
.trial-h { font-size: 15px; color: var(--ink-2); }
.trial-h b { display: inline-block; margin-right: 8px; padding: 1px 9px; border-radius: 99px; background: linear-gradient(90deg, #2f62d8, #6f35e0); color: #fff; font-size: 13px; }
.chips { margin: 12px 0 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { min-height: 42px; padding: 8px 14px; border-radius: 99px; border: 1px solid rgba(125, 235, 255, 0.4); background: rgba(95, 230, 255, 0.08); font-size: 15.5px; font-weight: 700; }
.chips button:hover { background: rgba(95, 230, 255, 0.18); }

/* One link: the journey from 報價 to 收據 is one stream that changes colour as it flows (js/story.js
   journey). Each stop keeps its colour everywhere: on the stream, on the track, in the 6 steps. */
.ch-flow { gap: 24px; }
/* The picture sits in the same dark card as the timeline's pictures. */
.flow-art { position: relative; aspect-ratio: 400 / 410; border-radius: 22px; overflow: hidden;
  background: radial-gradient(100% 80% at 50% 45%, #0f1e3a 0%, #070c17 70%); box-shadow: 0 0 0 1px rgba(125, 235, 255, 0.16); }
.flow-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y pinch-zoom; }
.track { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
.track li:nth-child(1) { --c: #ff8a72; --g: 255, 138, 114; }
.track li:nth-child(2) { --c: #ffc862; --g: 255, 200, 98; }
.track li:nth-child(3) { --c: #5fd9a0; --g: 95, 217, 160; }
.track li:nth-child(4) { --c: #7393ff; --g: 115, 147, 255; }
.track::before, .track::after { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 13px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #ff8a72, #ffa566 17%, #ffc862 33%, #b8dd78 50%, #5fd9a0 67%, #62c2e6 83%, #7393ff); }
.track::before { opacity: 0.22; }
.track::after { clip-path: inset(0 calc(100% - 100% * var(--p, 0) / 3) 0 0); transition: clip-path 1.2s var(--ease); }
.track button { width: 100%; min-height: 64px; border: 0; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 700; color: var(--ink-3); position: relative; z-index: 1; }
.track i { width: 28px; height: 28px; border-radius: 50%; background: var(--bg-2); border: 1.5px solid rgba(var(--g), 0.5); transition: background 0.4s, border-color 0.4s, box-shadow 0.4s, transform 0.4s var(--ease); }
.track button.on, .track button.done { color: var(--ink); }
.track button.done i { background: linear-gradient(rgba(var(--g), 0.2), rgba(var(--g), 0.2)), var(--bg-2); border-color: rgba(var(--g), 0.8); }
.track button.on { color: var(--c); }
.track button.on i { background: linear-gradient(rgba(var(--g), 0.3), rgba(var(--g), 0.3)), var(--bg-2); border-color: var(--c); box-shadow: 0 0 0 4px rgba(var(--g), 0.12), 0 0 14px rgba(var(--g), 0.35); }
@media (min-width: 600px) { .flow-art { aspect-ratio: 800 / 410; } }
@media (min-width: 1100px) { .flow-art { aspect-ratio: 1600 / 410; cursor: pointer; } }

/* 6 steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; counter-reset: s; }
.steps li { position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 14px; border-radius: 18px; border: 1px solid rgba(var(--g), 0.22); background: linear-gradient(135deg, rgba(var(--g), 0.07), var(--glass) 60%); transition: border-color 0.4s, background 0.4s, transform 0.4s var(--ease); }
.steps i { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 700 15px/1 var(--mono); font-style: normal; border: 1.5px solid rgba(var(--g), 0.6); background: rgba(var(--g), 0.12); color: var(--c); transition: background 0.4s, border-color 0.4s, box-shadow 0.4s; }
.steps b { font-size: 16px; line-height: 1.3; }
.steps li.on { border-color: rgba(var(--g), 0.75); background: linear-gradient(135deg, rgba(var(--g), 0.2), rgba(var(--g), 0.06)); transform: translateY(-2px); }
.steps li.on i { background: rgba(var(--g), 0.28); border-color: var(--c); color: var(--ink); box-shadow: 0 0 14px rgba(var(--g), 0.35); }
/* The six steps run through the same colours as the stream: red, orange, yellow, green, blue, purple. */
.steps li:nth-child(1) { --c: #ff8a72; --g: 255, 138, 114; }
.steps li:nth-child(2) { --c: #ffa566; --g: 255, 165, 102; }
.steps li:nth-child(3) { --c: #ffc862; --g: 255, 200, 98; }
.steps li:nth-child(4) { --c: #5fd9a0; --g: 95, 217, 160; }
.steps li:nth-child(5) { --c: #7393ff; --g: 115, 147, 255; }
.steps li:nth-child(6) { --c: #a585ff; --g: 165, 133, 255; }
@media (max-width: 599px) { .steps li { flex-direction: column; align-items: flex-start; gap: 8px; } }

/* ---------------------------------------------------------------- */
/* Story, promise, other ways, end, footer                            */
/* ---------------------------------------------------------------- */

/* The timeline: the rail hugs the left edge, every event's picture runs (almost) the full width.
   A dot is a ring the rail passes behind: the line stops at its edge above and below. */
.story { padding: 72px 0 40px; }
.story-hd { padding: 0 var(--pad); }
.tl { position: relative; margin-top: 36px; padding: 0 12px 0 34px; }
.tl-rail { position: absolute; left: 15px; top: 8px; bottom: 0; width: 2px; background: rgba(170, 195, 230, 0.16); }
.tl-rail i { position: absolute; left: 0; top: 0; width: 100%; height: var(--tl, 0%); background: linear-gradient(180deg, var(--cyan), var(--lime) 60%, var(--jp-b)); box-shadow: 0 0 12px rgba(150, 255, 200, 0.6); }
.ev { position: relative; padding-bottom: 64px; }
.ev:last-child { padding-bottom: 0; }
.ev::before { content: ""; position: absolute; z-index: 1; left: -27px; top: 2px; width: 18px; height: 18px; border-radius: 50%; box-sizing: border-box;
  background: var(--bg); border: 2.5px solid rgba(170, 195, 230, 0.45); transition: border-color 0.5s, box-shadow 0.5s; }
.ev.lit::before { border-color: var(--lime); box-shadow: 0 0 0 4px var(--bg), 0 0 18px rgba(200, 255, 90, 0.7); }
.ev.jp.lit::before { border-color: var(--jp-b); box-shadow: 0 0 0 4px var(--bg), 0 0 18px rgba(155, 92, 255, 0.8); }
.ev-when { font: 800 15px/22px var(--sans); letter-spacing: 0.04em; color: var(--cyan); }
.ev.jp .ev-when { color: #a99cff; }
.ev-txt { padding-right: 8px; }
.ev h3 { margin-top: 8px; font-size: clamp(22px, 6vw, 34px); line-height: 1.3; font-weight: 900; }
.ev-txt p { margin-top: 10px; font-size: 17px; color: var(--ink-2); }
.ev-txt .num { color: var(--lime); }
.ev-txt .ghost-btn { margin-top: 16px; }
.ev-badge { display: inline-block; margin-top: 10px; padding: 3px 12px; border-radius: 99px; font-size: 13.5px; font-weight: 900; color: #fff; background: linear-gradient(90deg, #2f62d8, #6f35e0); }
.ev-badge.hu { color: #051a0b; background: var(--cta); }
.aig { background: linear-gradient(90deg, #7fb0ff, #b98cff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ev-art { position: relative; margin-top: 20px; aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden;
  background: radial-gradient(100% 80% at 50% 45%, #0f1e3a 0%, #070c17 70%); box-shadow: 0 0 0 1px rgba(125, 235, 255, 0.16); }
.ev.jp .ev-art { background: radial-gradient(100% 80% at 50% 45%, #1a1640 0%, #080a18 72%); box-shadow: 0 0 0 1px rgba(155, 92, 255, 0.28); }
.ev-art.tall { aspect-ratio: 1 / 0.9; }
.ev-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.promise { padding: 24px var(--pad) 64px; }
.promise ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.promise li { display: grid; grid-template-columns: 48px 1fr; column-gap: 14px; padding: 18px; border-radius: 20px; border: 1px solid var(--line); background: var(--glass); }
.promise svg { grid-row: span 2; width: 44px; height: 44px; fill: none; stroke: var(--cyan); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.promise b { font-size: 18px; }
.promise span { font-size: 15.5px; color: var(--ink-2); }

.faq { padding: 8px var(--pad) 64px; }
.faq h2 { font-size: clamp(26px, 7vw, 40px); line-height: 1.2; font-weight: 900; }
.faq-list { margin-top: 18px; display: grid; gap: 10px; }
.faq details { border-radius: 18px; border: 1px solid var(--line); background: var(--glass); }
.faq summary { list-style: none; position: relative; padding: 16px 48px 16px 18px; font-size: 17px; font-weight: 800; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 24px; color: var(--lime); transition: transform 0.3s var(--ease); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 18px 18px; font-size: 16px; color: var(--ink-2); }
.other { padding: 56px var(--pad); background: var(--bg-2); }
/* Three routes in, each in its own colour (網站 purple, WhatsApp green, 電話 amber). Every route
   starts with an AI and runs to the same end; a faint light runs along each line, one after another. */
.routes { margin-top: 26px; display: grid; gap: 14px; }
.rt { --c: #a585ff; --g: 165, 133, 255; display: flex; flex-direction: column; gap: 14px; padding: 20px 18px 18px; border-radius: 22px;
  border: 1px solid rgba(var(--g), 0.26); background: linear-gradient(160deg, rgba(var(--g), 0.09), var(--glass) 55%); }
.rt-web { border-color: rgba(var(--g), 0.5); box-shadow: 0 24px 60px -36px rgba(var(--g), 0.7); }
.rt-wa { --c: #25d366; --g: 37, 211, 102; }
.rt-tel { --c: #ffb84d; --g: 255, 184, 77; }
.rt-hd { display: flex; align-items: center; gap: 10px; }
.rt-hd svg { flex: none; width: 26px; height: 26px; fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rt h3 { font-size: 22px; line-height: 1.2; font-weight: 900; color: var(--c); }
.rt-tag { margin-left: auto; padding: 2px 11px; border-radius: 99px; font-size: 13px; font-weight: 900; color: #140b2c; background: var(--c); }
.rt-lead { font-size: 17px; font-weight: 700; text-wrap: balance; }
.rt p:not(.rt-lead) { font-size: 15.5px; color: var(--ink-2); }
.rt-line { list-style: none; margin: 2px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); position: relative; }
.rt-line::before { content: ""; position: absolute; left: 16.67%; right: 16.67%; top: 15px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent) -40% 0 / 28% 100% no-repeat, linear-gradient(90deg, rgba(var(--g), 0.75), rgba(var(--g), 0.35));
  animation: rt-run 6s linear infinite; }
.rt-wa .rt-line::before { animation-delay: 2s; }
.rt-tel .rt-line::before { animation-delay: 4s; }
@keyframes rt-run { 0% { background-position: -40% 0, 0 0; } 45%, 100% { background-position: 140% 0, 0 0; } }
.rt-line li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.rt-line i { width: 32px; height: 32px; margin-bottom: 7px; border-radius: 50%; display: grid; place-items: center; font: 700 11px/1 var(--mono); font-style: normal; letter-spacing: 0.04em;
  color: var(--c); border: 1.5px solid rgba(var(--g), 0.8); background: linear-gradient(rgba(var(--g), 0.16), rgba(var(--g), 0.16)), var(--bg-2); }
.rt-line .rt-end { grid-column: 3; }
.rt-line .rt-end i { width: 14px; height: 14px; margin: 9px 0 16px; border: 0; background: var(--c); box-shadow: 0 0 0 4px rgba(var(--g), 0.16); }
.rt-line b { font-size: 15px; line-height: 1.3; font-weight: 800; }
.rt-line small { font-size: 12.5px; line-height: 1.35; color: var(--ink-3); }
.rt-go { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 10px 20px; border-radius: 99px;
  border: 1.5px solid rgba(var(--g), 0.7); background: rgba(var(--g), 0.12); font-size: 17px; font-weight: 800; text-decoration: none; transition: background 0.2s; }
.rt-go:hover { background: rgba(var(--g), 0.24); }
.rt-go svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; }
.reviews { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; font-size: 16px; font-weight: 700; color: var(--ink-2); text-decoration: none; }
.reviews .stars { color: var(--amber); letter-spacing: 2px; }
.doors { margin-top: 28px; display: grid; gap: 10px; }
.doors a { display: flex; flex-direction: column; padding: 16px 44px 16px 18px; border-radius: 18px; border: 1px solid var(--line); text-decoration: none; position: relative; transition: border-color 0.2s; }
.doors a::after { content: "›"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 26px; color: var(--ink-3); }
.doors a:hover { border-color: rgba(125, 235, 255, 0.5); }
.doors b { font-size: 18px; }
.doors span { font-size: 15px; color: var(--ink-3); }

.end { padding: 88px var(--pad) 72px; text-align: center; background: radial-gradient(70% 60% at 50% 60%, rgba(40, 110, 200, 0.3), transparent 70%); }
.end .acts { margin-top: 26px; justify-content: center; }
.end .cta, .end .ghost-btn { flex: 1 1 100%; max-width: 420px; }
.join { display: inline-flex; align-items: center; gap: 14px; margin-top: 34px; padding: 14px 20px 14px 16px; border-radius: 18px; text-align: left; color: var(--ink); text-decoration: none;
  background: linear-gradient(120deg, rgba(110, 240, 255, 0.16), rgba(200, 255, 90, 0.12)); box-shadow: inset 0 0 0 1px rgba(160, 255, 200, 0.4), 0 10px 30px rgba(0, 0, 0, 0.3); }
.join svg { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 12px; box-sizing: border-box; fill: none; stroke: #071a10; stroke-width: 2; stroke-linejoin: round; background: var(--cta); }
.join b { display: block; font-size: 17px; font-weight: 900; }
.join small { display: block; font-size: 14px; color: var(--lime); }
.join i { font-style: normal; font-size: 22px; color: var(--lime); }

.foot { padding: 40px var(--pad) calc(var(--safe-b) + 110px); border-top: 1px solid var(--line); font-size: 15px; color: var(--ink-3); display: grid; gap: 12px; }
.foot img { width: 110px; height: auto; }
.foot a { text-decoration: none; }
.foot-l { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot-l a { color: var(--ink-2); }
.foot-l .foot-order { color: var(--lime); }
.foot-l .foot-order.learn { color: var(--ink); }
/* The order link and 家電原理課 wrap as one pair, never split across lines. */
.foot-pair { display: inline-flex; gap: 18px; white-space: nowrap; }
.foot-s { font-size: 13px; }

/* ---------------------------------------------------------------- */
/* Desktop                                                             */
/* ---------------------------------------------------------------- */

@media (min-width: 900px) {
  :root { --pad: 48px; --top-h: 72px; }
  .logo img { width: 130px; }
  .top-links { display: flex; gap: 28px; margin-left: 40px; }
  .top-find { width: auto; height: 40px; padding: 0 16px 0 12px; gap: 8px; display: inline-flex; align-items: center; border-color: rgba(95, 230, 255, 0.4); background: rgba(6, 10, 19, 0.55); color: var(--ink-3); font-size: 14.5px; box-shadow: none; }
  .top-find span { display: inline; }
  .top-find:hover { border-color: rgba(95, 230, 255, 0.9); color: var(--ink); }
  .top-links a { font-size: 15px; font-weight: 700; color: var(--ink-2); text-decoration: none; }
  .top-links a:hover { color: var(--ink); }
  .top-order, .top-learn { opacity: 1; visibility: visible; }
  .top { gap: 12px; padding-left: max(var(--pad), calc(50% - 620px)); padding-right: max(var(--pad), calc(50% - 620px)); }
  .menu-btn { margin-left: 0; }
  .hero { flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 40px; padding-bottom: 64px; padding-left: max(var(--pad), calc(50% - 632px)); padding-right: max(var(--pad), calc(50% - 632px)); }
  .orb { flex: 0 0 44%; max-width: none; margin: 0; max-height: none; height: 560px; }
  .orb-ring { width: 460px; height: 460px; margin: -230px 0 0 -230px; }
  .orb-baby { width: 200px; }
  .ob { font-size: 17px; }
  .hero-copy { flex: 1; min-width: 0; }
  .hero h1 { font-size: clamp(38px, 4.4vw, 72px); }
  .hero .cta, .hero .ghost-btn { flex: 0 0 auto; min-height: 58px; }
  .to-baby { right: 96px; bottom: 26px; font-size: 20px; }
  .to-baby svg { width: 90px; height: 60px; }
  .ch { grid-template-columns: 1fr 1fr; align-items: center; gap: 64px; max-width: 1240px; margin: 0 auto; padding: 120px var(--pad); }
  .ch-alt { max-width: none; padding-left: max(var(--pad), calc(50vw - 620px)); padding-right: max(var(--pad), calc(50vw - 620px)); }
  .ch-flow { grid-template-columns: 1fr; gap: 28px; }
  .ch-flow .ch-copy { max-width: 760px; }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .promise, .other { max-width: 1240px; margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
  .other { max-width: none; padding-left: max(var(--pad), calc(50vw - 572px)); padding-right: max(var(--pad), calc(50vw - 572px)); }
  .story { max-width: 1240px; margin: 0 auto; padding: 120px var(--pad) 40px; }
  .faq { max-width: 1240px; margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
  .faq-list { grid-template-columns: repeat(3, 1fr); align-items: start; }
  .story-hd { padding: 0; }
  .tl { padding: 0 0 0 64px; }
  .tl-rail { left: 23px; }
  .ev { display: grid; grid-template-columns: 0.72fr 1.28fr; grid-template-rows: auto 1fr; column-gap: 48px; padding-bottom: 96px; }
  .ev::before { left: -51px; top: 4px; width: 22px; height: 22px; }
  .ev-when { grid-column: 1; grid-row: 1; font-size: 17px; }
  .ev-txt { grid-column: 1; grid-row: 2; padding-top: 4px; }
  .ev-art { grid-column: 2; grid-row: 1 / 3; margin-top: 0; }
  .promise ul { grid-template-columns: repeat(3, 1fr); }
  .promise li { grid-template-columns: 1fr; row-gap: 8px; }
  .promise svg { grid-row: auto; }
  .routes { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .doors { grid-template-columns: repeat(3, 1fr); }
  .end .cta, .end .ghost-btn { flex: 0 0 auto; min-width: 220px; }
  .foot { grid-template-columns: auto 1fr; column-gap: 64px; max-width: 1240px; margin: 0 auto; padding-bottom: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}
/* Nothing moves while the page is hidden (app switch, lock, other tab), or while its section is off
   screen (home.js marks those .idle). */
body.paused *, body.paused *::before, body.paused *::after, .idle *, .idle *::before, .idle *::after { animation-play-state: paused !important; }
/* Phones: the Google review badge waits until the hero is passed, so it never sits on the buttons. */
@media (max-width: 899px) { body.hero-on .review-wrapper { display: none !important; } }

/* ================================================================ */
/* Repair's own parts                                                 */
/* ================================================================ */

/* Long lists (symptoms, repair items) stay in one calm colour; the journey hues belong to the
   four-stop journey and the six steps only (Eddie's restraint rule). */
.sym, .items { --c: #5fe6ff; --g: 95, 230, 255; }

/* Inner pages: a short hero under the top bar, then the page's chapters. */
.phero { position: relative; padding: calc(var(--top-h) + var(--safe-t) + 18px) var(--pad) 40px; display: grid; gap: 28px; overflow: hidden; isolation: isolate; }
.phero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(90% 60% at 20% 0%, rgba(95, 230, 255, 0.16), transparent 60%), radial-gradient(70% 50% at 100% 30%, rgba(165, 133, 255, 0.14), transparent 65%); }
.phero > * { min-width: 0; }
.crumbs { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 14px; padding: 0; list-style: none; font-size: 14px; color: var(--ink-3); }
.crumbs li + li::before { content: "›"; margin-right: 8px; color: var(--ink-3); }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.kicker { font: 700 14px/1.3 var(--mono); letter-spacing: 0.12em; color: var(--cyan); }
.phero h1 { margin-top: 10px; font-size: clamp(30px, 8.4vw, 60px); line-height: 1.2; font-weight: 900; }
.phero h1 .hl { white-space: nowrap; }
.phero .lead { margin-top: 14px; }
.phero .acts { margin-top: 22px; }
.phero .cta { flex: 1 1 100%; max-width: 420px; }
.phero .ghost-btn { flex: 1 1 100%; max-width: 420px; }
.aka { margin-top: 12px; font-size: 14.5px; color: var(--ink-3); }
.aka b { color: var(--ink-2); font-weight: 700; }

/* A picture card: the same dark card as the timeline (handoff: every canvas sits in one). */
.diag { position: relative; aspect-ratio: 560 / 420; border-radius: 22px; overflow: hidden;
  background: radial-gradient(100% 80% at 50% 45%, #0f1e3a 0%, #070c17 70%); box-shadow: 0 0 0 1px rgba(125, 235, 255, 0.16); }
.diag[hidden] { display: none; }
.diag canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y pinch-zoom; }

/* 洗衣機 / 雪櫃 tabs over the symptom lists. Without JavaScript both lists show. */
.tabs { display: inline-flex; padding: 4px; border-radius: 99px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); }
.tabs button { min-height: 44px; padding: 8px 22px; border: 0; border-radius: 99px; background: none; font-size: 16px; font-weight: 700; color: var(--ink-2); }
.tabs button[aria-selected="true"] { background: rgba(125, 235, 255, 0.18); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(125, 235, 255, 0.5); }
.pick:not(.js) .tabs { display: none; }
.pick [role="tabpanel"][hidden] { display: none; }
.pick-h { margin: 22px 0 10px; font-size: 15px; color: var(--ink-3); }
.pick:not(.js) [role="tabpanel"] + [role="tabpanel"] { margin-top: 28px; }

/* Symptoms: tinted chips, each its own hue, each a link to its page. */
.sym { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sym a { position: relative; display: flex; align-items: center; min-height: 54px; padding: 10px 34px 10px 14px; border-radius: 16px; text-decoration: none; font-size: 16px; font-weight: 700; line-height: 1.3;
  border: 1px solid rgba(var(--g), 0.28); background: linear-gradient(135deg, rgba(var(--g), 0.08), var(--glass) 62%); transition: border-color 0.25s, background 0.25s, transform 0.25s var(--ease); }
.sym a::before { content: ""; flex: none; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px rgba(var(--g), 0.6); }
.sym a::after { content: "›"; position: absolute; right: 13px; top: 50%; transform: translateY(-50%); font-size: 22px; color: rgba(var(--g), 0.85); }
.sym a:hover { border-color: rgba(var(--g), 0.7); background: linear-gradient(135deg, rgba(var(--g), 0.18), rgba(var(--g), 0.05)); transform: translateY(-1px); }
.sym small { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink-3); }

/* Repair items: name + starting price; the price is the shop's own list (repair_items.csv). */
.items { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.items a, .items .it { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; padding: 12px 40px 12px 16px; border-radius: 16px; text-decoration: none;
  border: 1px solid rgba(var(--g), 0.24); background: linear-gradient(135deg, rgba(var(--g), 0.07), var(--glass) 60%); transition: border-color 0.25s, background 0.25s; }
.items .it { padding-right: 16px; }
.items a::after { content: "›"; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); font-size: 22px; color: rgba(var(--g), 0.85); }
.items a:hover { border-color: rgba(var(--g), 0.7); }
.items b { font-size: 16.5px; line-height: 1.3; }
.items em { flex: none; font: 700 15px/1 var(--mono); font-style: normal; color: var(--ink); }
.items em.no { font-family: var(--sans); font-size: 13.5px; color: var(--ink-3); }
.note { margin-top: 14px; font-size: 14.5px; color: var(--ink-3); }
.note + .note { margin-top: 6px; }
/* Database pages (templates/_v2/page.html.j2): the 「資料更新」 line, quiet, before the closing call. */
.updated { margin: 0 auto; padding: 18px var(--pad) 0; max-width: 1240px; font-size: 13.5px; color: var(--ink-3); }
.updated time { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); }

/* Brands: quiet chips; the most-asked first. */
.brands { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.brands a { display: inline-flex; align-items: center; min-height: 42px; padding: 7px 15px; border-radius: 99px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); font-size: 15.5px; font-weight: 700; text-decoration: none; color: var(--ink-2); transition: border-color 0.2s, color 0.2s; }
.brands a:hover { border-color: rgba(125, 235, 255, 0.55); color: var(--ink); }
.brands small { margin-left: 6px; font-size: 12.5px; font-weight: 500; color: var(--ink-3); }
.brands .all a { border-style: dashed; color: var(--cyan); }

/* Long text (symptom explanations, repair notes, FAQ answers): one readable column. */
.prose { max-width: 40em; font-size: 17px; color: var(--ink-2); }
.prose > * + * { margin-top: 14px; }
.prose h2, .prose h3 { color: var(--ink); font-size: clamp(22px, 6vw, 30px); line-height: 1.3; font-weight: 900; }
.prose h3 { font-size: 19px; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose a { color: var(--cyan); }
.prose strong, .prose b { color: var(--ink); }
.quote-box { padding: 18px 18px 18px 20px; border-radius: 18px; border: 1px solid rgba(255, 184, 77, 0.35); background: linear-gradient(135deg, rgba(255, 184, 77, 0.1), var(--glass) 60%); }
.quote-box .who { display: block; margin-bottom: 6px; font: 700 13px/1.3 var(--mono); letter-spacing: 0.08em; color: var(--amber); }

/* Facts: price, time, warranty in small tinted cards. */
.facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.facts li { padding: 16px; border-radius: 18px; border: 1px solid rgba(var(--g), 0.3); background: linear-gradient(135deg, rgba(var(--g), 0.09), var(--glass) 60%); }
.facts span { display: block; font-size: 14px; color: var(--ink-3); }
.facts b { display: block; margin-top: 4px; font: 700 22px/1.2 var(--mono); color: var(--c); }
.facts b.tx { font-family: var(--sans); font-size: 19px; }
.facts small { display: block; margin-top: 6px; font-size: 13.5px; color: var(--ink-3); }

/* Things to try first: numbered tinted cards. */
.tips { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: tip; }
.tips li { counter-increment: tip; position: relative; padding: 16px 16px 16px 58px; border-radius: 18px; border: 1px solid rgba(var(--g), 0.26); background: linear-gradient(135deg, rgba(var(--g), 0.07), var(--glass) 60%); }
.tips li::before { content: counter(tip); position: absolute; left: 16px; top: 16px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 700 14px/1 var(--mono); color: var(--c); border: 1.5px solid rgba(var(--g), 0.6); background: rgba(var(--g), 0.12); }
.tips b { display: block; font-size: 17px; }
.tips p { margin-top: 6px; font-size: 15.5px; color: var(--ink-2); }

/* Related pages. */
.more { display: grid; gap: 10px; }
.more a { position: relative; display: block; padding: 14px 44px 14px 18px; border-radius: 16px; border: 1px solid var(--line); text-decoration: none; transition: border-color 0.2s; }
.more a::after { content: "›"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 24px; color: var(--ink-3); }
.more a:hover { border-color: rgba(125, 235, 255, 0.5); }
.more b { display: block; font-size: 17px; }
.more span { display: block; margin-top: 2px; font-size: 14.5px; color: var(--ink-3); }

/* A plain chapter on inner pages: heading + content, one column, then two on desktop. */
.sec { padding: 56px var(--pad); }
.sec > h2 { font-size: clamp(26px, 7vw, 42px); line-height: 1.25; font-weight: 900; }
.sec > .ch-n + h2 { margin-top: 12px; }
.sec > .ch-p { margin-bottom: 22px; }
.sec > h2 + :not(.ch-p) { margin-top: 22px; }
.sec-alt { background: linear-gradient(180deg, var(--bg), var(--bg-2) 20%, var(--bg-2) 80%, var(--bg)); }
.video { position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgba(125, 235, 255, 0.2); }
.video iframe, .video a { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video img { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; }
.video a::after { content: ""; position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; margin: -24px 0 0 -34px; border-radius: 14px; background: rgba(6, 10, 19, 0.75) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%23c8ff5a'/%3E%3C/svg%3E") center / 26px no-repeat; box-shadow: 0 0 0 1px rgba(200, 255, 90, 0.6); }
.notice { padding: 16px 18px; border-radius: 18px; border: 1px solid rgba(255, 184, 77, 0.45); background: rgba(255, 184, 77, 0.08); font-size: 16px; color: var(--ink); }

@media (min-width: 600px) {
  .sym { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 600px) and (max-width: 899px) {
  .phero, .sec { padding-left: max(var(--pad), calc(50% - 320px)); padding-right: max(var(--pad), calc(50% - 320px)); }
}
@media (min-width: 900px) {
  /* The words line up with the chapters under them (.sec: 1240 px, --pad inside) and start at the top. */
  .phero { grid-template-columns: 1.05fr 0.95fr; align-items: start; gap: 56px; padding: calc(var(--top-h) + 48px) max(var(--pad), calc(50vw - 620px + var(--pad))) 72px; }
  /* One column, full width like the rest (a 1000 px box showed its glow's edges); lines stay readable. */
  .phero.solo { grid-template-columns: 1fr; }
  .phero.solo > * { max-width: 920px; }
  .phero .cta, .phero .ghost-btn { flex: 0 0 auto; }
  .sec { max-width: 1240px; margin: 0 auto; padding: 96px var(--pad); }
  .sec-alt { max-width: none; padding-left: max(var(--pad), calc(50vw - 620px + var(--pad))); padding-right: max(var(--pad), calc(50vw - 620px + var(--pad))); }
  .sec.split { display: grid; grid-template-columns: 0.8fr 1.2fr; column-gap: 64px; align-items: start; }
  .sec.split > h2, .sec.split > .ch-n, .sec.split > .ch-p { grid-column: 1; }
  .sec.split > :not(h2):not(.ch-n):not(.ch-p) { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; }
  .sym { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pick .sym { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .more { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 499px) { .diag { aspect-ratio: 470 / 420; } .phero { padding-bottom: 76px; } }
/* Symptom names never break inside a phrase; long ones take the whole row on small phones. */
.sym a { word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; }
@media (max-width: 420px) { .sym:not(.short) { grid-template-columns: 1fr; } .sym a { min-height: 48px; } }
.w-optimization { display: contents; }

/* "其餘 N 個…": the rest of a long list, one tap away (the links stay in the page for search). */
.more-list { margin-top: 10px; }
.more-list > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); font-weight: 700; cursor: pointer; list-style: none; }
.more-list > summary::-webkit-details-marker { display: none; }
.more-list > summary::after { content: "›"; transform: rotate(90deg); transition: transform 0.2s; }
.more-list[open] > summary::after { transform: rotate(-90deg); }
.more-list[open] > summary { margin-bottom: 10px; }

/* ================================================================ */
/* 3D machine: templates/_v2/stage3d.html.j2 + js/repair-3d.js        */
/* ================================================================ */

/* The www v2 stage (home.css "3D"). Phones: at most min(60svh, 460px) tall, since the engine's
   OrbitControls set touch-action: none on the canvas and the page must still scroll past it. */
.s3d { position: relative; min-width: 0; }
.s3d-stage { position: relative; height: min(60svh, 460px); border-radius: 22px; overflow: hidden; isolation: isolate; background: var(--s3d-bg); box-shadow: 0 0 0 1px rgba(125, 235, 255, 0.24); touch-action: pan-y;
  --s3d-bg: radial-gradient(90% 70% at 50% 40%, #13254a, #070c17 75%); }
@media (min-width: 600px) { .s3d-stage { height: min(66svh, 520px); border-radius: 26px; } }
@media (min-width: 900px) { .s3d-stage { height: min(74svh, 600px); } }
.s3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: grab; }
.s3d-canvas:active { cursor: grabbing; }
.s3d-callouts { position: absolute; inset: 0; pointer-events: none; }

/* Callouts (focus.css): one colour per part, --c. */
.s3d .fx-callout.quiet { display: none; }
.s3d .tinted .fx-dot { background: var(--c); border-color: #fff; animation: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 28%, transparent), 0 1px 4px #0008; }
.s3d .tinted.ring .fx-dot { background: none; border-color: var(--c); box-shadow: 0 0 8px #0008; }
.s3d .tinted .fx-lead { background: color-mix(in srgb, var(--c) 55%, transparent); }
.s3d .tinted .fx-label { border-color: color-mix(in srgb, var(--c) 50%, transparent); background: rgba(6, 10, 19, 0.86); }
.s3d .fx-callout.sel .fx-label { border-color: var(--c, var(--cyan)); }
/* Part pages: the company's name a size up; during the sequence only the dot shows, the name
   fades in as the camera glides to it. */
.s3d[data-mode="part"] .fx-label { padding: 5px 12px; font-size: 14px; font-weight: 700; transition: opacity 0.5s, border-color 0.2s; }
.s3d[data-mode="part"] .fx-lead { transition: opacity 0.5s; }
.s3d[data-step]:not([data-step="named"], [data-step="done"]) :is(.fx-label, .fx-lead) { opacity: 0; pointer-events: none; }

/* In the card: 原理示意圖 (measured by the engine as UI), the gesture hint, 重播, the loader (it
   covers each look while it is drawn once), and the page's own words when there is no machine. */
.s3d-tag { position: absolute; z-index: 2; top: 12px; left: 12px; padding: 3px 10px; border-radius: 99px; border: 1px solid var(--line); background: rgba(6, 10, 19, 0.6); font-size: 12.5px; color: var(--ink-3); pointer-events: none; }
.s3d-gx { position: absolute; z-index: 2; left: 0; right: 0; bottom: 12px; text-align: center; font-size: 13px; color: var(--ink-3); pointer-events: none; transition: opacity 0.6s; }
.s3d-gx.off { opacity: 0; }
.s3d-gx-m { display: none; }
@media (pointer: fine) { .s3d-gx-t { display: none; } .s3d-gx-m { display: inline; } }
.s3d-replay { position: absolute; z-index: 3; right: 12px; bottom: 10px; min-height: 40px; padding: 6px 15px; border-radius: 99px; border: 1px solid var(--line); background: rgba(6, 10, 19, 0.72); font-size: 14px; font-weight: 700; color: var(--ink-2); }
.s3d-replay::before { content: "↺"; margin-right: 6px; color: var(--cyan); }
.s3d-load, .s3d-fb { position: absolute; inset: 0; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; text-align: center; color: var(--ink-2); }
.s3d-load { z-index: 4; display: flex; background: var(--s3d-bg); font-size: 15px; transition: opacity 0.6s, visibility 0s; }
.s3d-load.done { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.6s, visibility 0s 0.6s; }
.s3d-load.done * { animation: none; }
.s3d-spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--lime); animation: s3d-spin 0.9s linear infinite; }
@keyframes s3d-spin { to { transform: rotate(360deg); } }
.s3d-bar { width: 160px; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.s3d-bar b { display: block; height: 100%; width: 40%; background: var(--cta); animation: s3d-bar 1.4s ease-in-out infinite; }
@keyframes s3d-bar { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.s3d.offer :is(.s3d-spin, .s3d-bar) { display: none; }
.s3d-go { min-height: 48px; padding: 10px 22px; border-radius: 99px; border: 1.5px solid rgba(200, 255, 140, 0.6); background: rgba(184, 255, 92, 0.12); font-size: 16px; font-weight: 800; }
.s3d-fb { z-index: 5; display: none; overflow: auto; font-size: 16px; }
.s3d-fb p { max-width: 26em; }
.s3d-fb .ghost-btn { flex: none; }
.s3d-why { color: var(--ink); font-weight: 700; }
.s3d-why:empty { display: none; }
.s3d.fail .s3d-fb { display: flex; }
.s3d.fail .s3d-load { display: none; }
@media (scripting: none) { .s3d-fb { display: flex; } .s3d-load { display: none; } }

/* Under the card: a caption, the machine switch, system chips, each system's few lines. */
.s3d-caption { margin-top: 12px; font-size: 14.5px; color: var(--ink-3); }
.s3d-kinds { display: inline-flex; margin-top: 16px; padding: 4px; border-radius: 99px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); }
.s3d-kinds button { min-height: 44px; padding: 8px 22px; border: 0; border-radius: 99px; background: none; font-size: 16px; font-weight: 700; color: var(--ink-2); }
.s3d-kinds button[aria-pressed="true"] { background: rgba(125, 235, 255, 0.18); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(125, 235, 255, 0.5); }
.s3d-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.s3d-chips button { min-height: 42px; padding: 6px 14px; border-radius: 99px; border: 1px solid var(--line); background: none; font-size: 15px; font-weight: 700; color: var(--ink-2); }
@media (hover: hover) { .s3d-chips button:hover, .s3d-replay:hover { border-color: rgba(125, 235, 255, 0.5); color: var(--ink); } }
.s3d-chips button[aria-pressed="true"] { border-color: rgba(95, 230, 255, 0.75); color: var(--ink); background: rgba(95, 230, 255, 0.12); }
.s3d-panel { margin-top: 14px; padding: 16px 18px; border-radius: 18px; border: 1px solid rgba(95, 230, 255, 0.26); background: linear-gradient(135deg, rgba(95, 230, 255, 0.07), var(--glass) 60%); }
.s3d-panel h3 { font-size: 18px; font-weight: 900; line-height: 1.35; }
.s3d-panel p { margin-top: 6px; font-size: 15.5px; color: var(--ink-2); }
.s3d-links { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.s3d-links a { display: inline-flex; align-items: center; min-height: 36px; font-size: 15px; font-weight: 700; color: var(--cyan); text-decoration: none; }
.s3d-links a::after { content: "›"; margin-left: 5px; }
.s3d :is(.s3d-tag, .s3d-replay, .s3d-chips, .s3d-panel)[hidden] { display: none; }
/* Without JavaScript the chips do nothing: every system's panel shows instead. */
@media (scripting: none) { .s3d-kinds, .s3d .s3d-chips { display: none; } .s3d .s3d-panel[hidden] { display: block; } }

/* ---- Site search on home (templates/_v2/find.html.j2, js/site-search.js) ---- */
.find { padding: 56px var(--pad) 24px; scroll-margin-top: calc(var(--top-h) + 8px); }
.find-in { max-width: 1080px; margin: 0 auto; padding: 28px 22px; border-radius: 24px; border: 1px solid rgba(95, 230, 255, 0.28); background: linear-gradient(160deg, rgba(14, 29, 56, 0.85), rgba(10, 14, 26, 0.85)); box-shadow: 0 0 0 1px rgba(150, 120, 255, 0.08), 0 24px 60px rgba(0, 0, 0, 0.35); }
.find h2 { font-size: clamp(24px, 6vw, 34px); line-height: 1.25; font-weight: 900; }
.find-p { margin-top: 8px; font-size: 15.5px; color: var(--ink-2); }
.find-box { margin-top: 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.find-f { min-width: 0; }
.find-box[hidden] { display: none; }
.find-f[hidden] { display: none; }
@media (scripting: none) { .find-f { display: none; } }
.find-lab { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.find-lab label { font-size: 14.5px; font-weight: 700; color: var(--ink-2); }
/* 「?」: where is the model plate (opens .mg). A soft glow says it is a button. */
.find-help { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; display: grid; place-items: center; color: #061022; font: 900 16px/1 var(--sans);
  background: radial-gradient(circle at 35% 30%, #ffffff, #9ff0ff 35%, #8b7bff 100%); box-shadow: 0 0 0 3px rgba(95, 230, 255, 0.16), 0 0 16px rgba(139, 123, 255, 0.55); animation: find-glow 2.6s ease-in-out infinite; }
.find-help::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid rgba(95, 230, 255, 0.45); opacity: 0; animation: find-ring 2.6s ease-out infinite; }
@keyframes find-glow { 50% { box-shadow: 0 0 0 3px rgba(95, 230, 255, 0.28), 0 0 24px rgba(139, 123, 255, 0.85); } }
@keyframes find-ring { 0% { transform: scale(0.8); opacity: 0.9; } 70%, 100% { transform: scale(1.35); opacity: 0; } }
.find-r .pick { font-style: normal; font-weight: 700; color: var(--ink-2); }
.find-r .pick::after { content: " ·"; color: var(--ink-3); }
/* Section boxes (model and brand pages): not inside the home panel. */
.sec .find-f { margin-top: 20px; max-width: 640px; }
.mfind .ch-p { margin-top: 8px; }
/* Model plate picture. */
.mg { width: min(480px, calc(100vw - 24px)); max-height: calc(100svh - 24px); padding: 12px; border: 1px solid var(--line); border-radius: 22px; background: #0b1222; color: var(--ink); overflow: auto; }
.mg::backdrop { background: rgba(2, 5, 12, 0.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.mg img { display: block; width: 100%; height: auto; border-radius: 14px; }
.mg img[hidden] { display: none; }
.mg-x { position: sticky; top: 0; float: right; z-index: 1; width: 40px; height: 40px; margin: 0 0 -40px; border-radius: 50%; border: 1px solid var(--line); background: rgba(6, 10, 19, 0.85); color: var(--ink); font-size: 18px; cursor: pointer; }
.mg-tabs { display: flex; gap: 6px; margin: 2px 0 10px; }
.mg-tabs[hidden] { display: none; }
.mg-tabs button { min-height: 40px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--line); background: transparent; color: var(--ink-2); font: 700 15px/1 var(--sans); cursor: pointer; }
.mg-tabs button[aria-selected="true"] { background: rgba(95, 230, 255, 0.16); border-color: rgba(95, 230, 255, 0.6); color: var(--ink); }
.find-row { display: flex; gap: 8px; }
.find-row input { flex: 1; min-width: 0; min-height: 54px; padding: 12px 20px 12px 46px; background: rgba(6, 10, 19, 0.7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235fe6ff' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3C/svg%3E") no-repeat 17px 50% / 19px 19px; border-radius: 99px; border: 1.5px solid rgba(95, 230, 255, 0.45); color: var(--ink); font: 500 17px/1.3 var(--sans); outline: none; -webkit-appearance: none; appearance: none; }
.find-model input { font-family: var(--mono); letter-spacing: 0.04em; }
.find-row input::placeholder { font-family: var(--sans); font-weight: 400; font-size: 15.5px; letter-spacing: 0; color: var(--ink-3); }
.find-row input:focus { border-color: rgba(95, 230, 255, 0.95); box-shadow: 0 0 0 4px rgba(95, 230, 255, 0.14); }
.find-go { flex: none; min-height: 54px; padding: 0 20px; border-radius: 99px; border: 0; background: linear-gradient(135deg, #5fe6ff, #8b7bff); color: #061022; font: 800 16px/1 var(--sans); cursor: pointer; }
.find-m { margin-top: 8px; font-size: 14px; color: var(--ink-3); }
.find-m:empty { display: none; }
.find-r { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.find-r:empty { display: none; }
.find-r li { min-width: 0; }
.find-r a { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 2px; min-height: 48px; padding: 11px 16px; border-radius: 14px; border: 1px solid rgba(95, 230, 255, 0.2); background: var(--glass); color: var(--ink); text-decoration: none; }
.find-r a:hover, .find-r a:focus-visible { border-color: rgba(95, 230, 255, 0.7); }
.find-r b { font-weight: 800; }
.find-models b { font-family: var(--mono); letter-spacing: 0.03em; }
.find-r span { flex-basis: 100%; min-width: 0; font-size: 13.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.find-models span { flex-basis: auto; }
.find-r i { font-style: normal; font: 700 12px/1 var(--sans); padding: 5px 8px; border-radius: 99px; background: rgba(95, 230, 255, 0.14); color: var(--cyan); }
.find-r .hit a { border-color: rgba(200, 255, 90, 0.75); box-shadow: 0 0 0 3px rgba(200, 255, 90, 0.12); }
.find-r .hit a::after { content: "配對到 ✓"; margin-left: auto; font-size: 13px; font-weight: 800; color: #c8ff5a; }
.find-alt { margin-top: 18px; font-size: 14.5px; color: var(--ink-3); }
.find-alt a { color: var(--ink-2); }
@media (min-width: 900px) {
  .find-in { padding: 36px 40px; }
  .find-box { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
}

/* ---- Picks: 「係我部機嘅情況」 toggles and the 「已記低」 tray (js/picks.js) ---- */
.find-r li { position: relative; }
/* The fault toggle sits under its result, right-aligned: 「係我部機嘅情況」 is too long to share a phone row. */
.find-words-r li:has(.pk-tog) { display: grid; grid-template-columns: minmax(0, 1fr); }
.pk-tog { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 18px; border-radius: 99px; border: 1.5px solid rgba(200, 255, 90, 0.6); background: rgba(200, 255, 90, 0.08); color: #dfffa0; font: 800 15px/1 var(--sans); cursor: pointer; }
.pk-tog[aria-pressed="true"] { background: #c8ff5a; border-color: #c8ff5a; color: #0b1a02; }
.pk-tog.sm { justify-self: end; margin-top: 6px; min-height: 36px; padding: 0 12px; font-size: 13.5px; }
/* Keep the visitor's own words: an action under the results, dashed, never shaped like a result. */
.find-say { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed rgba(255, 255, 255, 0.18); }
.find-say[hidden] { display: none; }
.say-tog { min-height: 44px; max-width: 100%; padding: 8px 16px; border-radius: 12px; border: 1.5px dashed rgba(200, 255, 90, 0.6); background: none; color: #dfffa0; font: 800 15px/1.35 var(--sans); text-align: left; overflow-wrap: anywhere; cursor: pointer; }
.say-tog[aria-pressed="true"] { border-style: solid; background: rgba(200, 255, 90, 0.12); }
.say-note { color: var(--ink-3); font-size: 13.5px; }
.pk-chip.own > span { padding: 6px 4px 6px 12px; color: #dfffa0; font-weight: 700; }
.pk { margin-top: 16px; }
.pk[hidden], .pk-tray[hidden], .pk-hint[hidden] { display: none; }
@media (scripting: none) { .pk { display: none; } }
.pk-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.pk-hint { position: relative; display: inline-block; padding: 6px 12px 6px 30px; border-radius: 10px; color: var(--ink-3); font-size: 14px; font-weight: 700; }
.pk-hint::before { content: "←"; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); animation: pk-nudge 1.2s ease-in-out infinite; }
.find-m .pk-hint { display: block; margin-top: 6px; padding-left: 30px; }
.find-m .pk-hint::before { content: "↓"; }
@keyframes pk-nudge { 50% { transform: translate(-4px, -50%); } }
.pk-tray { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; font-size: 14px; }
.pk-tray > b { margin-right: 4px; color: var(--ink-2); }
.pk-chip { display: inline-flex; align-items: center; border-radius: 99px; border: 1px solid rgba(200, 255, 90, 0.45); background: rgba(200, 255, 90, 0.08); }
.pk-chip a { padding: 6px 4px 6px 12px; color: #dfffa0; font-weight: 700; text-decoration: none; }
.pk-chip button { width: 32px; height: 32px; border: 0; background: none; color: var(--ink-3); cursor: pointer; font-size: 13px; }