/* start.css — /start 新手指南頁。內容族（圓角·暖·明體承載人聲）。
   依賴：tokens.css、chrome.css。body.start-page。
   慣例對齊 profile：masthead / lang-tab / app-btn / mode-stripe / foot folio / serif tagline。
   規則：只用共用 token，禁裸 hex、禁裸 px 圓角（check:spec W1/W3）、line-height 吸附 8px。
   自然捲動頁（非 app-shell）。 */

html { background: var(--paper); }

.start-page {
  --canvas-max: 760px;
  --margin: clamp(20px, 5vw, 28px);
  --kq-header-h: 56px;            /* 頁眉高度基準（sticky offset / scroll-margin 共用） */
}

/* ── 頁眉：sticky 固定頂部，寬度跟內容（canvas-max 置中）──
   水平內距對齊 .canvas（chrome.css .masthead 預設為 20px/12px 不對稱，此處覆寫成 --margin） */
.start-page .kq-header {
  position: sticky; top: 0; z-index: 50;
  max-width: var(--canvas-max);
  margin: 0 auto;
  padding-left: var(--margin); padding-right: var(--margin);
  background: var(--paper);       /* 捲動內容從下方穿過時遮住 */
}
/* 頁眉下緣色條：/start 身份色 = 品牌橘（對齊站內選單 HOW TO·/start 橘標）。
   .masthead(=.kq-header) 是 flex row，stripe 須絕對定位脫離 flex 才能橫跨底緣
   （對齊 profile/home 做法）；sticky 頁眉本身即定位脈絡，abs 對齊它。 */
.start-page .kq-header .mode-stripe {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--rule); background: var(--signal);
}

/* ── 頁尾：寬度跟內容（canvas-max 置中），自然流、不固定 ── */
.start-page .kq-footer {
  max-width: var(--canvas-max);
  margin: 0 auto;
}

/* ── 錨點捲動補償（02 大綱跳段時，避免段首被 sticky 頁眉蓋住）── */
.start-page section[id],
.start-page .hero[id],
.start-page .epigraph[id] {
  scroll-margin-top: calc(var(--kq-header-h) + 8px);
}

/* wordmark 單色（整顆 ink，不染 Q、不用 signal） */
.start-page .logo { color: var(--ink); }

/* ── 語言切換（masthead 右側，對齊 profile）── */
.start-page .lang-tabs { display: flex; align-items: center; gap: 10px; }
.start-page .lang-tab {
  font-family: var(--mono); font-size: var(--t--1); font-weight: 700;
  letter-spacing: .06em; line-height: 1;
  background: none; border: none; color: var(--ink-3);
  cursor: pointer; padding: 4px 2px; transition: color .25s, background .25s;
  border-radius: var(--r-xs);
}
.start-page .lang-tab:hover { color: var(--ink-2); }
.start-page .lang-tab.active {
  background: var(--signal); color: var(--paper);
  padding: 4px 9px; text-shadow: none;
}

/* ── 外觀按鈕：框內比例塊（對齊 profile / home-v2）── */
.start-page .app-btn {
  width: 40px; height: 28px; padding: 4px; cursor: pointer; display: flex;
  background: var(--paper-2); border: 1px solid var(--ink-3); border-radius: var(--r-xs);
  transition: border-color .2s; flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.start-page .app-btn:hover { border-color: var(--signal); }
.start-page .app-btn .blk { display: flex; flex: 1; overflow: hidden; border-radius: 1px; }
.start-page .app-btn .a { background: var(--sw-d); flex: 0 0 64%; transition: flex-basis .3s; }
.start-page .app-btn .b { background: var(--sw-l); flex: 1; transition: flex-basis .3s; }
:root[data-appearance="light"] .start-page .app-btn .a { flex: 0 0 36%; }

.start-page .masthead-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }

/* ── canvas ── */
.start-page .canvas { max-width: var(--canvas-max); margin: 0 auto; padding: 0 var(--margin); }
.start-page section { padding: 56px 0; border-top: 1px solid var(--seam); }
.start-page section.hero { padding: 56px 0 48px; border-top: none; }

/* ── folio（mono 段標，對齊 profile）── */
.start-page .folio {
  font-family: var(--mono); font-size: var(--t--2); line-height: var(--lh--2);
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 16px;
}
.start-page .folio .num { color: var(--teal-ink); margin-right: 8px; }

/* ── 標題層級 ── */
.start-page h2 {
  font-family: var(--sans); font-weight: 700; font-size: var(--k-2); line-height: var(--lh-2);
  letter-spacing: -.01em; margin: 0 0 20px;
}
.start-page h3 {
  font-family: var(--sans); font-weight: 700; font-size: var(--k-1); line-height: var(--lh-1);
  margin: 32px 0 12px;
}
.start-page p { margin: 0 0 16px; max-width: 62ch; }
.start-page .dim { color: var(--ink-2); }
.start-page b, .start-page strong { font-weight: 700; }

/* ── 內文 KILOQ 頁面連結（LOG / LOOK / rotation…）：暫定外觀，待統一調整 ──
   目前：Barlow 粗體 + 跟隨內文字級（inherit）。色/底線等之後統一處理。 */
.start-page .kq-xlink {
  font-family: var(--logo); font-weight: 700; font-size: inherit;
  text-transform: uppercase; color: inherit; text-decoration: none;
  transition: color .2s;
}
.start-page .kq-xlink:hover { color: var(--signal); }

/* ── hero ── */
.start-page .tagline {
  font-family: var(--mono); font-size: var(--t--1); line-height: var(--lh--1);
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 24px;
}
.start-page .hero h1 {
  font-family: var(--serif); font-weight: 600; font-size: var(--k-3); line-height: var(--lh-3);
  letter-spacing: .01em; margin: 0 0 24px; max-width: 18ch;
}
.start-page .lede {
  font-size: var(--k-1); line-height: var(--lh-1); color: var(--ink-2); max-width: 50ch; margin: 0 0 28px;
}
.start-page .lede b { color: var(--ink); font-weight: 500; }
.start-page .slogan { display: flex; gap: 28px; flex-wrap: wrap; }
.start-page .slogan .s {
  font-family: var(--logo); font-weight: 800; font-size: var(--k-1); line-height: 1;
  letter-spacing: -.01em; text-transform: uppercase; padding-bottom: 8px; border-bottom: 2px solid currentColor;
}
.start-page .slogan .s.log { color: var(--signal); }
.start-page .slogan .s.look { color: var(--teal-ink); }
.start-page .slogan .s small {
  display: block; font-family: var(--sans); font-weight: 400; font-size: var(--t--1);
  line-height: var(--lh--1); letter-spacing: 0; text-transform: none; color: var(--ink-2);
  margin-top: 8px; border: 0; padding: 0;
}

/* ── 引言（裝飾 · index-quotes.json，走 site-menu 同一套）── */
.start-page .epigraph {
  padding: 4px 0 8px;
}
.start-page .epigraph[hidden] { display: none; }
.start-page .epi-orig {
  font-family: var(--serif); font-weight: 500;
  font-size: var(--k-1); line-height: var(--lh-1);
  color: var(--ink-2); margin: 0; max-width: 46ch; text-wrap: balance;
}
.start-page .epi-zh {
  font-family: var(--serif); font-size: var(--u-0); line-height: var(--lh-u);
  color: var(--ink-3); margin: 6px 0 0; max-width: 46ch;
}
.start-page .epi-by {
  font-family: var(--mono); font-size: var(--t--2);
  letter-spacing: .08em; color: var(--ink-3); margin: 10px 0 0;
}

/* ── 條列：LOG 三種記法（左規 + mono 方法標 + 說明 + 角色）── */
.start-page .ways { margin: 24px 0; display: flex; flex-direction: column; gap: 16px; }
.start-page .way { border-left: 2px solid var(--paper-2); padding-left: 18px; }
.start-page .way .tag {
  display: block; font-family: var(--sans); font-weight: 700;
  font-size: var(--k-1); line-height: var(--lh-1); letter-spacing: -.01em;
  color: var(--ink); margin: 0 0 6px;
}
.start-page .way p { margin: 0; max-width: 62ch; color: var(--ink-2); }
.start-page .way .role { margin: 6px 0 0; color: var(--ink-3); font-size: var(--u-0); }

/* ── 02 大綱路由 ── */
.start-page .toc { display: flex; flex-direction: column; }
.start-page .toc-row {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 14px 0; border-top: 1px solid var(--paper-2);
  color: var(--ink-2); text-decoration: none; transition: color .2s;
}
.start-page .toc-row:last-child { border-bottom: 1px solid var(--paper-2); }
.start-page .toc-row:hover { color: var(--ink); }
.start-page .toc-row b { color: var(--ink); font-weight: 700; }
.start-page .toc-row .to {
  margin-left: auto; font-family: var(--mono); font-size: var(--t--2);
  letter-spacing: .08em; color: var(--teal-ink); white-space: nowrap;
}

/* ── 雙模式卡（內容族，--r-sm）── */
.start-page .modes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.start-page .mode {
  border: 1px solid var(--paper-2); border-radius: var(--r-sm); background: var(--bubble); padding: 24px;
}
.start-page .mode .tab {
  display: inline-block; font-family: var(--logo); font-weight: 800; font-size: var(--t--1);
  letter-spacing: .02em; text-transform: uppercase; color: var(--paper);
  background: var(--ink-2);       /* 中性填色（01 雙住戶無 log/look 修飾，仍須可見） */
  padding: 4px 10px; border-radius: var(--r-xs); margin-bottom: 16px;
}
.start-page .mode.log .tab { background: var(--signal); }
.start-page .mode.look .tab { background: var(--teal-ink); }
.start-page .mode h3 { margin: 0 0 8px; font-size: var(--u-0); line-height: var(--lh-u); }
.start-page .mode p { font-size: var(--u-0); line-height: var(--lh-u); color: var(--ink-2); margin: 0; }
.start-page .mode .role { margin-top: 16px; font-family: var(--serif); font-size: var(--u-0); line-height: var(--lh-u); color: var(--ink); }
.start-page .lab-note { margin-top: 16px; font-family: var(--mono); font-size: var(--t--1); line-height: var(--lh--1); color: var(--ink-3); }

/* ── 裝置分欄 ── */
.start-page .split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 24px 0;
  border: 1px solid var(--paper-2); border-radius: var(--r-sm); overflow: hidden;
}
.start-page .split > div { padding: 20px 22px; }
.start-page .split > div:first-child { border-right: 1px solid var(--paper-2); }
.start-page .split h4 {
  font-family: var(--mono); font-size: var(--t--1); line-height: var(--lh--1);
  letter-spacing: .08em; text-transform: uppercase; color: var(--teal-ink); margin: 0 0 12px;
}
.start-page .split p { font-size: var(--u-0); line-height: var(--lh-u); color: var(--ink-2); margin: 0; }

/* ── 對話示意泡泡（對齊 chat.css 語彙：圓角 --r-sm，貼邊角 --r-0）── */
.start-page .chat { margin: 20px 0; display: flex; flex-direction: column; gap: 8px; }
.start-page .chat .lbl { font-family: var(--mono); font-size: var(--t--2); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 4px; }
.start-page .bub { max-width: 80%; padding: 10px 14px; border-radius: var(--r-sm); font-size: var(--u-0); line-height: var(--lh-u); }
.start-page .bub.you { align-self: flex-end; background: var(--paper-2); color: var(--ink); border-bottom-right-radius: var(--r-0); }
.start-page .bub.kq { align-self: flex-start; background: var(--bubble); border: 1px solid var(--paper-2); border-bottom-left-radius: var(--r-0); }
.start-page .bub.kq.voice { font-family: var(--serif); color: var(--ink); }

/* ── 條列：LOG 採訪步驟（左規 + mono 序號切過線 + 標籤 + 例句）── */
.start-page .flow { margin: 24px 0; border-left: 2px solid var(--paper-2); padding: 0; list-style: none; }
.start-page .flow li { position: relative; padding: 0 0 16px 18px; margin: 0; }
.start-page .flow li:last-child { padding-bottom: 0; }
.start-page .flow li::before {
  content: attr(data-n); position: absolute; left: 0; top: 0; transform: translateX(-50%);
  background: var(--paper); padding: 0 3px; color: var(--teal-ink);
  font-family: var(--mono); font-size: var(--t--2); line-height: var(--lh-u);
}
.start-page .flow b { font-weight: 700; color: var(--ink); }
.start-page .flow .q { font-family: var(--serif); color: var(--ink-2); display: block; margin-top: 2px; }

/* ── callout ── */
.start-page .note {
  border: 1px solid var(--paper-2); border-left: 3px solid var(--teal-ink);
  border-radius: var(--r-xs); background: var(--bubble); padding: 16px 18px; margin: 20px 0;
}
.start-page .note.warm { border-left-color: var(--signal); }
.start-page .note p { margin: 0; color: var(--ink-2); font-size: var(--u-0); line-height: var(--lh-u); }
.start-page .note p + p { margin-top: 8px; }
.start-page .note .lbl { display: block; font-family: var(--mono); font-size: var(--t--2); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
/* 放大版標題：作為段落收尾的重點宣告（sans 700，退出 mono eyebrow 語彙） */
.start-page .note .lbl.lbl-lg {
  font-family: var(--sans); font-weight: 700; font-size: var(--k-1); line-height: var(--lh-1);
  letter-spacing: -.01em; text-transform: none; color: var(--ink); margin-bottom: 10px;
}
.start-page .note .s1-by { margin-top: 10px; color: var(--ink); }

/* note 標題列：放大標題在左、實際按鈕模樣掛右 */
.start-page .note-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.start-page .note-head .lbl.lbl-lg { margin-bottom: 0; }

/* REC 鈕模樣（複製 .kq-rec：透明框 40×40 + 會呼吸的 signal 圓點）*/
.start-page .rec-chip {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--r-xs);
  display: inline-flex; align-items: center; justify-content: center;
}
.start-page .rec-chip .dot {
  width: 10px; height: 10px; border-radius: var(--r-pill);
  background: var(--signal); animation: kq-rec-breath 1.8s ease-in-out infinite;
}
@keyframes kq-rec-breath { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* +（加入鞋櫃）鈕模樣（複製 .kq-addbtn：銳角 40×40 · signal 底 · paper glyph）*/
.start-page .add-chip {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--r-0);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--signal); color: var(--paper);
}

@media (prefers-reduced-motion: reduce) {
  .start-page .rec-chip .dot { animation: none; }
}

/* ── url chip ── */
.start-page .url {
  font-family: var(--mono); font-size: var(--t--1); color: var(--teal-ink);
  background: var(--paper-2); padding: 2px 7px; border-radius: var(--r-xs); white-space: nowrap;
}

/* ── 條列：簡單鍵→值清單（teal mono dash marker，去預設項目符號）── */
.start-page ul.plain { margin: 16px 0; padding: 0; list-style: none; }
.start-page ul.plain li { position: relative; margin: 0 0 8px; padding-left: 22px; color: var(--ink-2); line-height: var(--lh-u); }
.start-page ul.plain li:last-child { margin-bottom: 0; }
.start-page ul.plain li::before { content: '—'; position: absolute; left: 0; top: 0; color: var(--teal-ink); font-family: var(--mono); }
.start-page ul.plain li b { color: var(--ink); font-weight: 700; }

/* ── FAQ ── */
.start-page .faq details { border-top: 1px solid var(--seam); padding: 16px 0; }
.start-page .faq details:last-child { border-bottom: 1px solid var(--seam); }
.start-page .faq summary {
  cursor: pointer; list-style: none; font-weight: 500; font-size: var(--u-0); line-height: var(--lh-u);
  display: flex; gap: 12px; align-items: baseline;
}
.start-page .faq summary::-webkit-details-marker { display: none; }
.start-page .faq summary::before { content: '+'; font-family: var(--mono); color: var(--teal-ink); flex: 0 0 auto; }
.start-page .faq details[open] summary::before { content: '\2013'; }
.start-page .faq .a { margin: 12px 0 0 24px; color: var(--ink-2); font-size: var(--u-0); line-height: var(--lh-u); }

/* 頁尾改注入式 .kq-footer（chrome-footer.js）；排版基底在 chrome.css，寬度約束見檔首。 */

/* ── 響應式 ── */
@media (max-width: 560px) {
  .start-page { --k-3: 30px; --lh-3: 40px; --k-2: 24px; --lh-2: 32px; --k-1: 19px; --lh-1: 24px; }
  .start-page .modes { grid-template-columns: 1fr; }
  .start-page .split { grid-template-columns: 1fr; }
  .start-page .split > div:first-child { border-right: none; border-bottom: 1px solid var(--paper-2); }
  .start-page section { padding: 40px 0; }
  .start-page .bub { max-width: 90%; }
  .start-page .lang-tabs { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .start-page * { transition: none !important; }
}

/* ── /start LOG·LOOK 用法動畫（dispatch 2026-06-24；scope .kq-demo）──
   LOG=我直接說＋REC；人聲＝明體、KILOQ＝黑體；LOG=signal、LOOK=teal-ink。*/
.kq-demo { margin: 28px 0 8px; max-width: 460px; }
.kq-demo .kqd-cap { font-family: var(--mono); font-size: var(--t--2); letter-spacing: .08em; color: var(--ink-3); margin-bottom: 10px; }

.kqd-panel { background: var(--paper-2); border: 1px solid var(--seam); border-radius: var(--r-sm); overflow: hidden; }
.kqd-hd { position: relative; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px 13px; border-bottom: 1px solid var(--seam); }
.kqd-mode { font-family: var(--logo); font-weight: 800; font-size: var(--k-1); letter-spacing: -.02em; text-transform: uppercase; color: var(--ink); }
.kqd-sub { font-family: var(--mono); font-size: var(--t--2); letter-spacing: .1em; color: var(--ink-3); }
.kqd-url { order: 3; width: 100%; margin-top: 2px; font-family: var(--mono); font-size: var(--t--2); letter-spacing: .04em; color: var(--ink-3); }
.kqd-stripe { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; }
.kqd-log  .kqd-stripe { background: var(--signal); }
.kqd-look .kqd-stripe { background: var(--teal-ink); }
.kqd-ways { display: flex; gap: 6px; margin-left: auto; }
.kqd-ways span { font-family: var(--mono); font-size: var(--t--2); letter-spacing: .04em; color: var(--ink-3); padding: 3px 7px; border-radius: var(--r-xs); }
.kqd-ways span.on { background: var(--signal); color: var(--on-signal); }
.kqd-pane { margin-left: auto; font-family: var(--mono); font-size: var(--t--2); letter-spacing: .04em; color: var(--teal-ink); }

.kqd-thread { position: relative; min-height: 330px; overflow: hidden; padding: 18px 16px 18px 46px; display: flex; flex-direction: column; justify-content: flex-end; gap: 18px; }
.kqd-msg { position: relative; }
.kqd-who { position: absolute; left: -34px; width: 30px; top: 1px; text-align: center; font-family: var(--mono); font-size: var(--t--2); line-height: var(--lh-u); color: var(--ink-3); }
.kqd-msg.kq .kqd-who { color: var(--signal); }
.kqd-look .kqd-msg.kq .kqd-who { color: var(--teal-ink); }
.kqd-tkq { font-family: var(--sans); font-size: var(--u-0); line-height: var(--lh-u); color: var(--ink); width: 88%; text-wrap: pretty; }
.kqd-tyou { font-family: var(--serif); font-weight: 600; font-size: var(--u-0); line-height: var(--lh-u); color: var(--ink); width: 88%; transition: color .4s var(--ease-kq); }
/* 我直接說：按 REC 後，原話明體降成灰（交給 KILOQ） */
.kqd-thread.filed .kqd-msg.you .kqd-tyou { color: var(--ink-3); }

.kqd-typing { display: flex; align-items: center; gap: 5px; position: relative; }
.kqd-typing .kqd-who { position: absolute; left: -34px; }
.kqd-log  .kqd-typing .kqd-who { color: var(--signal); }
.kqd-look .kqd-typing .kqd-who { color: var(--teal-ink); }
.kqd-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--teal-ink); animation: kqdBob 1.2s ease-in-out infinite; }
.kqd-log .kqd-dot { background: var(--signal); }
.kqd-dot:nth-child(3) { animation-delay: .15s; }
.kqd-dot:nth-child(4) { animation-delay: .3s; }
.kqd-label { font-family: var(--mono); font-size: var(--t--2); letter-spacing: .06em; color: var(--ink-3); margin-left: 8px; }
@keyframes kqdBob { 0%,80%,100% { transform: scale(.6); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }

.kqd-list { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.kqd-lcard { background: var(--teal); border-radius: var(--r-sm); padding: 10px 12px; }
.kqd-lnum { display: block; font-family: var(--mono); font-size: var(--t--2); letter-spacing: .1em; color: var(--signal); margin-bottom: 3px; }
.kqd-lsrc { font-family: var(--mono); font-size: var(--t--2); letter-spacing: .06em; color: var(--teal-ink); }
.kqd-lbody { font-family: var(--serif); font-size: var(--u-0); line-height: var(--lh-u); color: var(--ink); margin-top: 2px; }

.kqd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.kqd-chip { font-family: var(--mono); font-size: var(--t--1); letter-spacing: .02em; color: var(--ink-2); border: 1px solid var(--seam); border-radius: var(--r-xs); padding: 5px 10px; }
.kqd-chip.tapped { border-color: var(--teal-ink); color: var(--teal-ink); }

.kqd-card { background: var(--bubble); border: 1px solid var(--teal-border); border-radius: var(--r-sm); padding: 12px 14px; width: 100%; }
.kqd-card-name { font-family: var(--serif); font-weight: 600; font-size: var(--u-0); color: var(--ink); }
.kqd-card-line { display: block; font-family: var(--sans); font-size: var(--t--1); line-height: var(--lh--1); color: var(--ink-2); margin-top: 4px; }
.kqd-card-receipt { display: block; font-family: var(--mono); font-size: var(--t--2); letter-spacing: .06em; color: var(--teal-ink); margin-top: 8px; }

.kqd-input { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--seam); }
.kqd-fake { flex: 1; font-family: var(--sans); font-size: var(--u-0); color: var(--ink-3); border-bottom: 1px solid var(--ink-3); padding: 6px 2px; min-height: 30px; }
/* 錄音鈕（僅 LOG）＋呼吸圓點 */
.kqd-rec { position: relative; width: 40px; height: 40px; border: 1px solid var(--ink-3); border-radius: var(--r-xs); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kqd-pulse { width: 11px; height: 11px; border-radius: var(--r-pill); background: var(--signal); animation: kqdBreathe 1.8s ease-in-out infinite; }
@keyframes kqdBreathe { 0%,100% { transform: scale(.82); opacity: .7; } 50% { transform: scale(1.12); opacity: 1; } }
.kqd-ring { position: absolute; inset: 0; border-radius: var(--r-xs); border: 1px solid var(--signal); opacity: 0; animation: kqdRipple 2.4s ease-out infinite; }
@keyframes kqdRipple { 0% { transform: scale(.7); opacity: .6; } 70%,100% { transform: scale(1.25); opacity: 0; } }
/* REC 按下態 */
.kqd-rec.pressed { border-color: var(--signal); background: color-mix(in srgb, var(--signal) 16%, transparent); }
.kqd-rec.pressed .kqd-pulse { animation: none; transform: scale(1); opacity: 1; }
.kqd-rec.pressed .kqd-ring { animation: none; opacity: 0; }
/* REC hint-tip：教學標註（非 app UI），冒在錄音鈕上方、指箭頭朝下 */
.kqd-tip { position: absolute; bottom: calc(100% + 9px); right: -6px; white-space: nowrap; font-family: var(--mono); font-size: var(--t--2); letter-spacing: .04em; color: var(--ink); background: var(--bubble); border: 1px solid var(--signal); border-radius: var(--r-xs); padding: 6px 10px; opacity: 0; pointer-events: none; z-index: 5; }
.kqd-tip::after { content: ""; position: absolute; top: 100%; right: 22px; border: 5px solid transparent; border-top-color: var(--signal); }

.kqd-send { width: 40px; height: 40px; border-radius: var(--r-0); flex-shrink: 0; border: none; display: flex; align-items: center; justify-content: center; color: var(--on-signal); }
.kqd-log  .kqd-send { background: var(--signal); }
.kqd-look .kqd-send { background: var(--teal-ink); }
.kqd-send svg { width: 20px; height: 20px; }

.kqd-replay { margin-top: 10px; font-family: var(--mono); font-size: var(--t--1); letter-spacing: .06em; color: var(--ink-3); background: none; border: 1px solid var(--seam); border-radius: var(--r-xs); padding: 5px 11px; cursor: pointer; transition: border-color .2s, color .2s; }
.kqd-replay:hover { border-color: var(--signal); color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) {
  .kqd-pulse, .kqd-ring, .kqd-dot { animation: none; }
}