/* ============================================================
   Signal Vol.2 — 디지털 인터랙티브 매거진 공통 스타일
   theme: "내 컴퓨터 안의 AI — 로컬·온디바이스 AI"
   자급자족(외부 빌드 없음). 색 대비 WCAG AA 이상 목표.
   ============================================================ */

:root {
  --bg:        #f7f6f2;
  --surface:   #ffffff;
  --surface-2: #f0eee7;
  --ink:       #171622;
  --ink-soft:  #383747;
  --muted:     #5d5c70;
  --border:    #e4e1d7;
  --accent:    #4b34d6;   /* electric indigo (Signal identity) */
  --accent-ink:#3a27ad;
  --accent-bg: #ece7ff;
  --signal:    #e8451f;   /* signal orange */
  --signal-bg: #ffe8df;
  --home:      #1f7a4d;   /* 🟢 원활 / 🏠 내 집 */
  --home-bg:   #e2f3ea;
  --home-ink:  #14603a;
  --tight:     #9a6b00;   /* 🟡 빠듯 / 🔀 하이브리드 */
  --tight-bg:  #fbf0d6;
  --heavy:     #c0392b;   /* 🔴 버거움 */
  --heavy-bg:  #fbe4e0;
  --cloud:     #3a6ea8;   /* ☁️ 클라우드 */
  --cloud-bg:  #e3edf7;
  --code-bg:   #1c1b2a;
  --code-ink:  #e6e6f0;
  --ok:        #1f7a4d;
  --ok-bg:     #e2f3ea;
  --radius:    14px;
  --radius-sm: 9px;
  --shadow:    0 1px 2px rgba(20,20,40,.05), 0 8px 24px rgba(20,20,40,.06);
  --shadow-lg: 0 10px 40px rgba(30,20,80,.14);
  --maxtext:   730px;
  --font: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", "SFMono-Regular", "Consolas", "D2Coding", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font); background: var(--bg); color: var(--ink);
  line-height: 1.72; font-size: 18px;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; }
a { color: var(--accent-ink); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--accent); color: #fff; padding: 10px 16px; z-index: 100; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- reading progress bar ---------- */
.progress-rail { position: fixed; inset: 0 0 auto 0; height: 4px; background: transparent; z-index: 50; }
.progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--signal)); transition: width .1s linear; }

/* ---------- masthead ---------- */
.masthead {
  border-bottom: 1px solid var(--border); background: var(--surface);
  position: sticky; top: 0; z-index: 40; backdrop-filter: saturate(1.2) blur(6px);
}
.masthead-inner { max-width: 1080px; margin: 0 auto; padding: 14px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { font-weight: 800; letter-spacing: .14em; font-size: 20px; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
.brand .dot { color: var(--signal); }
.brand small { font-weight: 600; letter-spacing: .04em; color: var(--muted); font-size: 12px; }
.masthead nav { display: flex; gap: 16px; font-size: 14px; }
.masthead nav a { text-decoration: none; color: var(--muted); font-weight: 600; }
.masthead nav a:hover { color: var(--accent); }

/* ============================================================ COVER ============================================================ */
.cover { max-width: 1080px; margin: 0 auto; padding: 56px 22px 24px; }
.cover-kicker { display: inline-block; font-weight: 700; letter-spacing: .12em; color: var(--signal); background: var(--signal-bg); padding: 6px 14px; border-radius: 999px; font-size: 13px; margin-bottom: 22px; }
.cover h1 { font-size: clamp(34px, 6vw, 62px); line-height: 1.07; margin: 0 0 18px; letter-spacing: -.02em; font-weight: 800; }
.cover h1 .grad { background: linear-gradient(100deg, var(--accent), var(--signal)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cover-lede { font-size: clamp(17px, 2.3vw, 21px); color: var(--ink-soft); max-width: 780px; margin: 0 0 22px; }
.cover-promise { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; max-width: 840px; box-shadow: var(--shadow); font-size: 16px; color: var(--ink-soft); }
.cover-promise strong { color: var(--ink); }
.cover-move { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 20px 0 6px; font-weight: 700; color: var(--muted); font-size: 15px; }
.cover-move .from { color: var(--muted); background: var(--surface-2); padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border); }
.cover-move .arrow { color: var(--signal); font-size: 20px; }
.cover-move .to { color: #fff; background: linear-gradient(100deg, var(--accent), var(--accent-ink)); padding: 6px 14px; border-radius: 999px; }

/* ============================================================ TOC ============================================================ */
.toc { max-width: 1080px; margin: 0 auto; padding: 28px 22px 80px; }
.toc-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.toc-head h2 { font-size: 22px; margin: 0; }
.toc-head .count { color: var(--muted); font-size: 14px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 26px; align-items: center; }
.filters .flabel { font-size: 13px; font-weight: 700; color: var(--muted); margin-right: 4px; }
.filter-chip { font: inherit; font-size: 14px; font-weight: 600; border: 1.5px solid var(--border); background: var(--surface); color: var(--ink-soft); padding: 8px 16px; border-radius: 999px; cursor: pointer; transition: all .15s; }
.filter-chip:hover { border-color: var(--accent); color: var(--accent); }
.filter-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }

.card-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s, border-color .15s; cursor: pointer; }
.card.is-hidden { display: none; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--accent); }
.card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.card-no { font-weight: 800; font-size: 13px; color: var(--accent); background: var(--accent-bg); width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; }
.status-pill { font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 999px; }
.status-live { color: #fff; background: var(--signal); }
.status-hold { color: var(--tight); background: var(--tight-bg); border: 1px solid #f0e4a8; }
.card h3 { font-size: 19px; margin: 2px 0 6px; line-height: 1.3; }
.card h3 a { color: var(--ink); text-decoration: none; }
.card:hover h3 a { color: var(--accent-ink); }
.card-hook { font-size: 14.5px; color: var(--muted); margin: 0 0 16px; flex: 1; }
.card .cover-tag { position: absolute; top: -10px; right: 16px; font-size: 11px; font-weight: 800; letter-spacing: .06em; color: #fff; background: linear-gradient(100deg, var(--accent), var(--signal)); padding: 4px 12px; border-radius: 999px; box-shadow: var(--shadow); }

.badges { display: flex; flex-wrap: wrap; gap: 7px; }
.badge { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 7px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.b-diff-1 { color: var(--ok);     background: var(--ok-bg); }
.b-diff-2 { color: #9a6b00;       background: #fbf0d6; }
.b-diff-3 { color: #b03a6e;       background: #f8e2ef; }
.b-mode-make { color: var(--accent-ink); background: var(--accent-bg); }
.b-mode-run  { color: #0d6a6a;    background: #d9f1f1; }
.b-mode-feel { color: #b8456b;    background: #fbe4ec; }
.b-time      { color: var(--muted); background: var(--surface-2); }
.toc-foot { margin-top: 40px; padding-top: 22px; border-top: 1px dashed var(--border); color: var(--muted); font-size: 14px; }

/* ============================================================ ARTICLE ============================================================ */
.article { max-width: var(--maxtext); margin: 0 auto; padding: 40px 22px 30px; }
.article-header { margin-bottom: 8px; }
.crumbs { font-size: 14px; margin-bottom: 18px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.article h1 { font-size: clamp(28px, 5vw, 40px); line-height: 1.18; margin: 6px 0 10px; letter-spacing: -.01em; font-weight: 800; }
.article .subtitle { font-size: 19px; color: var(--muted); margin: 0 0 18px; line-height: 1.5; }
.article-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.byline { color: var(--muted); font-size: 14px; margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--border); }

.article-body { font-size: 18px; }
.article-body > p { margin: 1.15em 0; color: var(--ink-soft); }
.article-body h2 { font-size: 25px; margin: 1.9em 0 .5em; line-height: 1.3; letter-spacing: -.01em; padding-top: 6px; }
.article-body h2::before { content: ""; display: block; width: 42px; height: 4px; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--signal)); margin-bottom: 14px; }
.article-body h3 { font-size: 20px; margin: 1.5em 0 .4em; }
.article-body ul, .article-body ol { padding-left: 1.2em; color: var(--ink-soft); }
.article-body li { margin: .5em 0; }
.article-body strong { color: var(--ink); }
.article-body blockquote { margin: 1.2em 0; padding: 4px 0 4px 18px; border-left: 4px solid var(--accent-bg); color: var(--ink-soft); font-style: italic; }
.article-body blockquote em { color: var(--accent-ink); font-style: normal; }
.article-body em { color: var(--ink-soft); }

/* pull quote / sample line */
.prompt-line { font-family: var(--mono); font-size: 15.5px; background: var(--surface); border: 1.5px dashed var(--accent); color: var(--accent-ink); padding: 14px 16px; border-radius: var(--radius-sm); margin: 1.1em 0; position: relative; word-break: break-all; }
.prompt-line::before { content: attr(data-label); position: absolute; top: -10px; left: 14px; font-family: var(--font); font-size: 11px; font-weight: 700; color: var(--accent); background: var(--bg); padding: 0 6px; }

/* data table in body */
.article-body .data-table { width: 100%; border-collapse: collapse; margin: 1.3em 0; font-size: 15px; }
.article-body .data-table th, .article-body .data-table td { border: 1px solid var(--border); padding: 9px 12px; text-align: left; }
.article-body .data-table thead th { background: var(--surface-2); font-weight: 700; }
.article-body .data-table tbody tr:nth-child(even) { background: #faf9f5; }

/* code blocks */
.codeblock { position: relative; margin: 1.3em 0; }
.codeblock pre { background: var(--code-bg); color: var(--code-ink); border-radius: var(--radius-sm); padding: 18px; overflow-x: auto; font-size: 14.5px; line-height: 1.65; margin: 0; border: 1px solid #2c2b40; }
.codeblock code { font-family: var(--mono); }
.codeblock .tok-com { color: #8a89b8; font-style: italic; }
.codeblock .tok-str { color: #9ee493; }
.codeblock .tok-key { color: #c792ea; }
.codeblock .tok-fn  { color: #82aaff; }
.copy-btn { position: absolute; top: 10px; right: 10px; z-index: 2; font: inherit; font-size: 12px; font-weight: 700; background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.22); padding: 5px 11px; border-radius: 7px; cursor: pointer; }
.copy-btn:hover { background: rgba(255,255,255,.2); }
.copy-btn.copied { background: var(--ok); border-color: var(--ok); }

/* 더 깊이 (collapsible) */
details.deeper { margin: 1.5em 0; border: 1px solid var(--accent-bg); border-left: 4px solid var(--accent); border-radius: var(--radius-sm); background: linear-gradient(180deg, #f6f3ff, var(--surface)); overflow: hidden; }
details.deeper > summary { cursor: pointer; list-style: none; padding: 14px 18px; font-weight: 700; color: var(--accent-ink); display: flex; align-items: center; gap: 8px; user-select: none; }
details.deeper > summary::-webkit-details-marker { display: none; }
details.deeper > summary .chev { transition: transform .2s; }
details.deeper[open] > summary .chev { transform: rotate(90deg); }
details.deeper > summary .tag { font-size: 11px; font-weight: 700; margin-left: auto; color: var(--muted); background: var(--surface-2); padding: 2px 9px; border-radius: 999px; }
.deeper-body { padding: 2px 18px 18px; font-size: 16.5px; color: var(--ink-soft); }
.deeper-body p { margin: .8em 0; }
.deeper-body code { font-family: var(--mono); font-size: .92em; background: var(--surface-2); padding: 1px 6px; border-radius: 5px; }

/* callout / warning */
.callout { margin: 1.4em 0; border-radius: var(--radius); padding: 16px 18px; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); font-size: 16px; color: var(--ink-soft); }
.callout.warn { border-color: #f0d9a8; background: #fff8e8; }
.callout.warn strong { color: #8a6d00; }
.callout.hold { border-color: #f0c9a8; background: #fff2e8; }
.callout.hold strong { color: var(--signal); }
.callout .c-title { font-weight: 800; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: var(--ink); }

/* 지금 해보기 callout */
.tryit { margin: 1.6em 0; border-radius: var(--radius); padding: 18px 20px; background: linear-gradient(180deg, #fff, #fbfaff); border: 1px solid var(--accent-bg); box-shadow: var(--shadow); }
.tryit-head { display: flex; align-items: center; gap: 9px; font-weight: 800; color: var(--accent-ink); font-size: 15px; margin-bottom: 8px; flex-wrap: wrap; }
.tryit-head .wrench { font-size: 18px; }
.tryit-head .lv { font-size: 12px; font-weight: 700; color: var(--muted); background: var(--surface-2); padding: 2px 9px; border-radius: 999px; }
.tryit p { margin: .4em 0 0; font-size: 15.5px; color: var(--ink-soft); }
.tryit .jump { margin-top: 12px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; background: var(--accent); color: #fff; border: 0; padding: 10px 16px; border-radius: 9px; display: inline-flex; align-items: center; gap: 7px; }
.tryit .jump:hover { background: var(--accent-ink); }

/* ============================================================ BUTTONS ============================================================ */
.btn-primary, .btn-ghost, .btn-pending { font: inherit; font-weight: 700; cursor: pointer; border-radius: 9px; padding: 10px 16px; display: inline-flex; align-items: center; gap: 7px; transition: all .14s; line-height: 1.2; text-decoration: none; }
.btn-primary { background: var(--accent); color: #fff; border: 1.5px solid var(--accent); }
.btn-primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.btn-ghost { background: var(--surface); color: var(--accent-ink); border: 1.5px solid var(--accent-bg); }
.btn-ghost:hover { border-color: var(--accent); background: var(--accent-bg); }
.btn-pending { background: var(--surface-2); color: var(--muted); border: 1.5px dashed var(--border); cursor: help; }
.btn-big { font-size: 17px; padding: 14px 26px; }

/* ============================================================ GENERIC WIDGET SHELL ============================================================ */
.widget { margin: 1.5em 0 1.9em; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-lg); overflow: hidden; scroll-margin-top: 80px; }
.w-banner { font-size: 12.5px; color: #6a5f2e; background: #fff7d6; border-bottom: 1px solid #f0e4a8; padding: 9px 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.w-banner .em { font-weight: 800; color: #8a6d00; }
.w-banner.info { color: var(--accent-ink); background: var(--accent-bg); border-bottom-color: #d9d0ff; }
.w-banner.info .em { color: var(--accent-ink); }
.w-sec { padding: 16px 18px; }
.w-sec + .w-sec { border-top: 1px solid var(--border); }
.w-label { font-weight: 800; font-size: 14.5px; display: block; margin-bottom: 10px; }
.w-label .hint { font-weight: 500; color: var(--muted); font-size: 13px; }
.w-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; background: var(--surface-2); }
.w-honest { font-size: 13.5px; color: var(--muted); background: var(--surface-2); border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: 12px 14px; }
.w-honest strong { color: var(--ink-soft); }
.w-actionsrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* chips (RAM / options / tools / hardware) */
.chiprow { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { font: inherit; font-size: 14.5px; font-weight: 700; border: 1.5px solid var(--border); background: var(--surface); color: var(--ink-soft); padding: 9px 16px; border-radius: 10px; cursor: pointer; transition: all .14s; }
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip[aria-pressed="true"], .chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.tip { font: inherit; font-size: 13px; font-weight: 700; color: var(--accent-ink); background: none; border: 0; cursor: pointer; text-decoration: underline; padding: 0; }
.tip-box { margin-top: 10px; font-size: 13.5px; color: var(--ink-soft); background: var(--surface-2); border-radius: var(--radius-sm); padding: 12px 14px; }
.tip-box.is-hidden { display: none; }

/* select / range */
.w-select { font: inherit; font-size: 14.5px; border: 1.5px solid var(--border); border-radius: 9px; padding: 9px 12px; background: var(--surface); color: var(--ink); }
.w-select:focus { border-color: var(--accent); }
input[type="range"] { width: 100%; accent-color: var(--accent); height: 26px; }
.rangefield { margin: 12px 0; }
.rangefield .rf-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 2px; }
.rangefield .rf-name { font-weight: 700; font-size: 14.5px; }
.rangefield .rf-q { font-weight: 500; color: var(--muted); font-size: 13px; }
.rangefield .rf-val { font-weight: 800; color: var(--accent-ink); font-size: 15px; }

/* model list (will-it-run) */
.modellist { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.modellist li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; font-size: 14.5px; transition: all .12s; }
.modellist li:hover { border-color: var(--accent); }
.modellist li.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-bg); }
.modellist .m-name { font-weight: 700; flex: 1; }
.modellist .m-size { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.vbadge { font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.vbadge.green { color: var(--home-ink); background: var(--home-bg); }
.vbadge.yellow { color: var(--tight); background: var(--tight-bg); }
.vbadge.red { color: var(--heavy); background: var(--heavy-bg); }

/* quant slider + bars */
.quant-stage { display: none; }
.quant-stage.show { display: block; }
.quant-verdict { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.quant-verdict .qv-model { font-weight: 800; font-size: 16px; }
.quant-slider-wrap { margin: 10px 0 14px; }
.quant-ticks { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 700; color: var(--muted); margin-top: 2px; }
.quant-ticks span.on { color: var(--accent-ink); }
.bars { display: grid; gap: 12px; margin: 8px 0; }
.bar-row { }
.bar-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 13.5px; font-weight: 700; margin-bottom: 5px; }
.bar-top .bt-val { font-family: var(--mono); }
.bar-track { height: 20px; background: var(--surface-2); border-radius: 999px; overflow: hidden; border: 1px solid var(--border); }
.bar-fill { height: 100%; border-radius: 999px; transition: width .35s cubic-bezier(.4,0,.2,1); }
.bar-fill.cap { background: linear-gradient(90deg, #6d5be0, #4b34d6); }
.bar-fill.qual { background: linear-gradient(90deg, #2fa06a, #1f7a4d); }
.tradeoff-line { margin-top: 10px; font-weight: 800; color: var(--accent-ink); background: var(--accent-bg); border-radius: var(--radius-sm); padding: 11px 14px; font-size: 15px; }

/* quiz */
.quiz-q { margin: 14px 0; }
.quiz-q .qtext { font-weight: 700; margin-bottom: 8px; }
.quiz-opt { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border: 1.5px solid var(--border); border-radius: 9px; margin: 6px 0; cursor: pointer; font-size: 14.5px; }
.quiz-opt:hover { border-color: var(--accent); }
.quiz-opt input { accent-color: var(--accent); width: 17px; height: 17px; }
.quiz-opt.correct { border-color: var(--home); background: var(--home-bg); }
.quiz-opt.wrong { border-color: var(--heavy); background: var(--heavy-bg); }
.quiz-explain { display: none; margin-top: 6px; font-size: 14px; color: var(--ink-soft); background: var(--surface-2); border-radius: var(--radius-sm); padding: 10px 13px; border-left: 3px solid var(--accent); }
.quiz-explain.show { display: block; }
.quiz-score { font-weight: 800; margin-top: 10px; color: var(--accent-ink); }

/* completion checklist + badge */
.checklist { list-style: none; margin: 6px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.checklist li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--muted); }
.checklist li .box { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--border); display: grid; place-items: center; flex: none; font-size: 13px; color: transparent; transition: all .15s; }
.checklist li.done { color: var(--ink); font-weight: 600; }
.checklist li.done .box { background: var(--home); border-color: var(--home); color: #fff; }
.done-badge { margin-top: 12px; display: none; align-items: center; gap: 10px; font-weight: 800; color: var(--home-ink); background: var(--home-bg); border: 1px solid #bfe3cf; border-radius: var(--radius-sm); padding: 12px 16px; }
.done-badge.show { display: inline-flex; }
.gold-badge { color: #8a6d00; background: linear-gradient(180deg,#fdf3d0,#f9e9b0); border-color: #efdc95; }

/* verify stamp (offline/private) */
.stamp { display: none; margin: 12px 0; align-items: center; gap: 12px; padding: 14px 18px; border-radius: var(--radius); font-weight: 800; }
.stamp.show { display: flex; }
.stamp.offline { color: var(--home-ink); background: var(--home-bg); border: 2px solid var(--home); }
.stamp .big { font-size: 22px; }
.stamp .sub { font-weight: 600; font-size: 13px; color: var(--muted); }

/* 3-way verdict big badge (mine-but-dumber) */
.verdict3 { display: none; margin: 12px 0; padding: 18px; border-radius: var(--radius); text-align: center; border: 2px solid; }
.verdict3.show { display: block; }
.verdict3 .v3-emoji { font-size: 34px; }
.verdict3 .v3-title { font-size: 20px; font-weight: 800; margin: 4px 0; }
.verdict3 .v3-why { font-size: 14.5px; color: var(--ink-soft); }
.verdict3.home  { border-color: var(--home);  background: var(--home-bg); }
.verdict3.home .v3-title { color: var(--home-ink); }
.verdict3.hybrid { border-color: var(--tight); background: var(--tight-bg); }
.verdict3.hybrid .v3-title { color: var(--tight); }
.verdict3.cloud { border-color: var(--cloud); background: var(--cloud-bg); }
.verdict3.cloud .v3-title { color: var(--cloud); }

/* headline savings */
.savings-headline { text-align: center; padding: 6px 0; }
.savings-headline .sh-big { font-size: clamp(28px, 7vw, 40px); font-weight: 800; color: var(--accent-ink); letter-spacing: -.01em; }
.savings-headline .sh-sub { color: var(--muted); font-size: 15px; }
.ledger { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0; }
.ledger .col { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 14px; }
.ledger .col.gain { background: var(--home-bg); border-color: #bfe3cf; }
.ledger .col.cost { background: var(--surface-2); }
.ledger .col h4 { margin: 0 0 8px; font-size: 14px; }
.ledger .col ul { margin: 0; padding-left: 1.1em; }
.ledger .col li { margin: 5px 0; }

/* vote bars (motive / poll) */
.votebtns { display: flex; gap: 8px; flex-wrap: wrap; }
.votebar-row { display: flex; align-items: center; gap: 10px; margin: 7px 0; font-size: 14px; }
.votebar-row .vb-label { width: 130px; flex: none; font-weight: 700; }
.votebar-track { flex: 1; height: 22px; background: var(--surface-2); border-radius: 999px; overflow: hidden; border: 1px solid var(--border); position: relative; }
.votebar-fill { height: 100%; background: linear-gradient(90deg, var(--accent-bg), var(--accent)); border-radius: 999px; transition: width .4s; }
.votebar-row .vb-pct { width: 46px; text-align: right; font-family: var(--mono); font-weight: 700; font-size: 13px; }
.votebar-row.mine .vb-label { color: var(--signal); }
.votebar-row.mine .votebar-fill { background: linear-gradient(90deg, var(--signal-bg), var(--signal)); }

/* story wall */
.storywall { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); margin: 12px 0; }
.story-card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; background: var(--surface); font-size: 14px; }
.story-card.mine { border-color: var(--signal); box-shadow: 0 0 0 2px var(--signal-bg); }
.story-card .s-stance { font-size: 12px; font-weight: 800; padding: 2px 9px; border-radius: 999px; display: inline-block; margin-bottom: 8px; }
.story-card .s-stance.local { color: var(--home-ink); background: var(--home-bg); }
.story-card .s-stance.hybrid { color: var(--tight); background: var(--tight-bg); }
.story-card .s-stance.cloud { color: var(--cloud); background: var(--cloud-bg); }
.story-card .s-text { color: var(--ink-soft); }
.story-card .s-motive { margin-top: 8px; font-size: 12px; color: var(--muted); }
.story-form { display: grid; gap: 10px; margin-top: 8px; }
.story-form input, .story-form select, .story-form textarea { font: inherit; font-size: 14.5px; border: 1.5px solid var(--border); border-radius: 9px; padding: 9px 12px; background: var(--surface); }
.story-form textarea { resize: vertical; min-height: 60px; }

/* device self-diagnosis checklist */
.devicerow { display: flex; gap: 10px; flex-wrap: wrap; }
.device-btn { font: inherit; font-size: 14px; font-weight: 700; border: 1.5px solid var(--border); background: var(--surface); color: var(--ink-soft); padding: 14px 18px; border-radius: var(--radius-sm); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 92px; transition: all .14s; }
.device-btn .ico { font-size: 26px; }
.device-btn:hover { border-color: var(--accent); }
.device-btn.on { border-color: var(--accent); background: var(--accent-bg); color: var(--accent-ink); }
.feature-card { border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; margin: 8px 0; background: var(--surface); }
.feature-card.everyone { border-color: var(--home); background: var(--home-bg); }
.feature-card .fc-top { display: flex; align-items: flex-start; gap: 10px; }
.feature-card .fc-chk { accent-color: var(--home); width: 20px; height: 20px; margin-top: 2px; flex: none; }
.feature-card .fc-name { font-weight: 700; font-size: 15px; }
.feature-card .fc-tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.net-badge { font-size: 11.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.net-badge.no { color: var(--home-ink); background: #cdeddb; }
.net-badge.some { color: var(--tight); background: #f5e3bb; }
.net-badge.maybe { color: var(--muted); background: var(--surface-2); }
.net-badge.everyone { color: #fff; background: var(--home); }
.feature-card .fc-how { font-size: 13px; color: var(--muted); margin-top: 4px; }
.feature-card details summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--accent-ink); }
.map-count { text-align: center; font-weight: 800; font-size: 18px; color: var(--home-ink); margin: 8px 0; }

/* path finder (librarian) */
.pathfinder .pf-q { margin: 12px 0; }
.pathfinder .pf-q .pfq-text { font-weight: 700; margin-bottom: 8px; }
.pathresult { display: none; margin-top: 12px; padding: 14px 16px; border-radius: var(--radius-sm); border: 2px solid var(--accent); background: var(--accent-bg); }
.pathresult.show { display: block; }
.pathresult .pr-title { font-weight: 800; color: var(--accent-ink); font-size: 16px; }

/* recommender output (bring-ai-home) */
.reco-out { display: none; margin-top: 12px; border: 1.5px solid var(--accent); border-radius: var(--radius-sm); padding: 14px 16px; background: #fbfaff; }
.reco-out.show { display: block; }
.reco-out .ro-models { font-weight: 800; font-size: 16px; color: var(--accent-ink); }
.reco-out .ro-meta { font-size: 14px; color: var(--muted); margin: 4px 0 8px; }
.copyname { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.copyname code { font-family: var(--mono); background: var(--surface-2); padding: 4px 10px; border-radius: 6px; font-size: 13.5px; }

/* download button grid */
.dlgrid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 8px 0; }
.dl-card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px; background: var(--surface); text-align: center; }
.dl-card h4 { margin: 0 0 4px; font-size: 15px; }
.dl-card p { margin: 0 0 12px; font-size: 13px; color: var(--muted); }

/* chat UI (webllm / whisper) */
.chat-msgs { list-style: none; margin: 0; padding: 4px; min-height: 120px; max-height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; background: var(--surface-2); border-radius: var(--radius-sm); }
.chat-msgs:empty::before { content: attr(data-empty); color: var(--muted); font-size: 14px; padding: 18px; display: block; text-align: center; }
.cmsg { max-width: 85%; padding: 10px 14px; border-radius: 14px; font-size: 15px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.cmsg.user { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.cmsg.bot { align-self: flex-start; background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.cmsg.sys { align-self: center; background: transparent; color: var(--muted); font-style: italic; font-size: 13px; }
.chat-form { display: flex; gap: 8px; margin-top: 12px; }
.chat-form input { flex: 1; font: inherit; font-size: 15px; border: 1.5px solid var(--border); border-radius: 10px; padding: 11px 14px; background: var(--surface); }
.chat-form input:focus { border-color: var(--accent); }
.progress { height: 12px; background: var(--surface-2); border-radius: 999px; overflow: hidden; margin: 10px 0; border: 1px solid var(--border); display: none; }
.progress.show { display: block; }
.progress > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--signal)); transition: width .2s; }
.netstatus { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.netstatus.online { color: var(--cloud); background: var(--cloud-bg); }
.netstatus.offline { color: var(--home-ink); background: var(--home-bg); }
.transcript-out { min-height: 60px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; background: var(--surface-2); font-size: 15px; margin: 8px 0; white-space: pre-wrap; }

/* share block */
.share-block { margin: 1.6em 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 20px; box-shadow: var(--shadow); }
.share-block h3 { margin: 0 0 6px; font-size: 17px; }
.share-block p { margin: 0 0 14px; font-size: 15px; color: var(--muted); }
.share-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.share-note { font-size: 12.5px; color: var(--muted); margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }
.composer { display: grid; gap: 8px; margin: 8px 0 14px; }
.composer label { font-size: 13px; font-weight: 700; color: var(--ink-soft); display: grid; gap: 4px; }
.composer input { font: inherit; font-size: 14.5px; border: 1.5px solid var(--border); border-radius: 9px; padding: 9px 12px; background: var(--surface); }
.composer .preview { font-size: 14px; color: var(--ink-soft); background: var(--surface-2); border-radius: var(--radius-sm); padding: 12px 14px; white-space: pre-wrap; }

/* share card canvas */
.cardout { margin-top: 14px; display: none; }
.cardout.show { display: block; }
.cardout canvas { max-width: 340px; width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--border); box-shadow: var(--shadow); }

/* completion celebration */
@keyframes pop { 0%{transform:scale(.6);opacity:0} 60%{transform:scale(1.15)} 100%{transform:scale(1);opacity:1} }
.celebrate { position: fixed; left: 50%; top: 28%; transform: translateX(-50%); z-index: 90; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); padding: 18px 26px; border-radius: var(--radius); font-weight: 800; font-size: 18px; color: var(--home-ink); animation: pop .4s ease; pointer-events: none; }

/* toast */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 95; background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 10px; font-size: 14px; box-shadow: var(--shadow-lg); opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; max-width: 90vw; text-align: center; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }

/* article footer nav */
.article-nav { max-width: var(--maxtext); margin: 30px auto 60px; padding: 0 22px; display: flex; gap: 12px; justify-content: space-between; flex-wrap: wrap; }
.nav-card { flex: 1; min-width: 220px; border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; background: var(--surface); text-decoration: none; color: var(--ink); box-shadow: var(--shadow); transition: all .15s; }
.nav-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.nav-card.disabled { opacity: .55; pointer-events: none; }
.nav-card .dir { font-size: 12px; color: var(--muted); font-weight: 700; }
.nav-card .ttl { font-weight: 700; font-size: 15px; margin-top: 4px; }
.nav-card.next { text-align: right; }

footer.site { border-top: 1px solid var(--border); background: var(--surface); padding: 30px 22px; text-align: center; color: var(--muted); font-size: 13.5px; }
footer.site a { color: var(--accent-ink); }
footer.site code { font-family: var(--mono); font-size: .9em; }

/* responsive */
@media (max-width: 640px) {
  body { font-size: 17px; }
  .article-body { font-size: 17px; }
  .card-grid { grid-template-columns: 1fr; }
  .ledger { grid-template-columns: 1fr; }
  .w-foot { flex-direction: column; align-items: stretch; }
  .masthead nav { display: none; }
  .article { padding-top: 26px; }
  .votebar-row .vb-label { width: 96px; font-size: 13px; }
  .storywall { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}