:root[data-demo="poc-interview-guide"] {
  --paper: #edf2f4;
  --paper-deep: #dfe7ea;
  --card: #f8faf9;
  --ink: #101b24;
  --ink-2: #263844;
  --muted: #687985;
  --line: #bcc9cf;
  --line-soft: #d6e0e3;
  --blue: #1456cc;
  --blue-dark: #0b3d96;
  --cyan: #0e9bb1;
  --amber: #e7a10c;
  --red: #b43f36;
  --green: #23765f;
  --white: #fff;
  --shadow: 0 18px 55px rgba(28, 53, 66, .12);
  --display: "Songti SC", "STSong", "Noto Serif CJK SC", Georgia, serif;
  --body: "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", sans-serif;
  --utility: "DIN Alternate", "Avenir Next Condensed", "Arial Narrow", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-color: #81949d #dde5e8; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: #dde5e8; }
*::-webkit-scrollbar-thumb { background: #81949d; border: 2px solid #dde5e8; border-radius: 99px; }
*::-webkit-scrollbar-thumb:hover { background: #617781; }
body {
  margin: 0;
  color: var(--ink);
  font: 15px/1.75 var(--body);
  background-color: var(--paper);
  background-image:
    linear-gradient(rgba(20,86,204,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,86,204,.035) 1px, transparent 1px);
  background-size: 28px 28px;
}
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: .11;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.84' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}
.poc-app button, .poc-app input { font: inherit; }
.poc-app button { cursor: pointer; }
.poc-app a { color: var(--blue); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid rgba(20,86,204,.35); outline-offset: 3px; }
.poc-app { min-height: calc(100vh - var(--header-height)); }
.topline { height: 6px; background: linear-gradient(90deg, var(--blue) 0 58%, var(--amber) 58% 72%, var(--red) 72%); }
.poc-app .shell { width: min(var(--lm-canvas-content-width), calc(100% - 2 * var(--lm-page-gutter))); margin-inline: auto; }

.hero { padding: 52px 0 40px; position: relative; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(330px, .75fr); gap: 56px; align-items: end; }
.kicker { display: flex; align-items: center; gap: 10px; color: var(--blue); font: 700 12px/1 var(--utility); letter-spacing: .16em; text-transform: uppercase; }
.kicker::before { content:""; width: 34px; height: 3px; background: var(--blue); }
.poc-app :is(h1, h2, h3, h4) { margin: 0; }
.poc-app h1 { max-width: 800px; margin-top: 20px; font: 700 clamp(40px, 6vw, 76px)/1.08 var(--display); letter-spacing: -.045em; }
h1 .mark { color: var(--blue); }
.hero-copy { max-width: 740px; margin: 22px 0 0; color: var(--ink-2); font-size: 18px; }
.hero-copy strong { background: linear-gradient(transparent 55%, rgba(231,161,12,.32) 55%); }
.hero-note { margin-top: 24px; display: flex; gap: 9px 24px; flex-wrap: wrap; color: var(--muted); font: 12px/1.4 var(--utility); letter-spacing: .04em; }

.authority-card { background: var(--poc-deep, #101b24); color: var(--white); padding: 24px; box-shadow: 12px 12px 0 rgba(20,86,204,.16); position: relative; }
.authority-card::before { content:"CALIBRATION / 01"; display:block; color:#8ea1ad; font:700 10px/1 var(--utility); letter-spacing:.16em; margin-bottom:26px; }
.authority-card h2 { font: 600 23px/1.35 var(--display); }
.gap-chart { margin-top: 26px; display:grid; gap:17px; }
.bar-label { display:flex; justify-content:space-between; color:#afbdc5; font-size:12px; margin-bottom:6px; }
.track { height:10px; background:#2a3a44; overflow:hidden; }
.fill { display:block; height:100%; transform-origin:left; animation: grow .8s cubic-bezier(.2,.8,.2,1) both; }
.fill.authority { width:32%; background:#778d98; }
.fill.responsibility { width:96%; background:linear-gradient(90deg,var(--cyan),#5ee5f1); animation-delay:.12s; }
.gap-line { margin-top:22px; padding-top:16px; border-top:1px solid #334752; color:#d7e0e4; font-size:13px; }
@keyframes grow { from{transform:scaleX(0)} to{transform:scaleX(1)} }

.sticky-nav { position: sticky; top: var(--lm-chrome-offset); z-index: 20; background: var(--paper); }
/* Keep the full-width background; only the chapter rules follow the content axis. */
.nav { display:flex; gap:2px; overflow-x:auto; scrollbar-width: thin; border-block: 1px solid var(--line); }
.nav-btn { flex:0 0 auto; padding:15px 14px 13px; color:var(--muted); border:0; border-bottom:3px solid transparent; background:transparent; font-size:13px; }
.nav-btn:hover { color:var(--ink); background:rgba(255,255,255,.48); }
.nav-btn.active { color:var(--blue); border-bottom-color:var(--blue); font-weight:700; }

.poc-app main { padding: 42px 0 84px; }
.panel { display:block; animation: enter .34s ease both; }
.poc-app [hidden] { display:none !important; }
.poc-app .panel + .panel { margin-top: 4rem; }
.poc-ready .poc-app .panel { margin-top: 0; }
@keyframes enter { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.panel-head { display:grid; grid-template-columns: 210px 1fr; gap:40px; margin-bottom:30px; }
.panel-code { color:var(--blue); font:700 12px/1.5 var(--utility); letter-spacing:.12em; }
.panel-head h2 { max-width:850px; font:700 clamp(28px,4vw,48px)/1.2 var(--display); letter-spacing:-.025em; }
.panel-head p { max-width:850px; color:var(--muted); margin:12px 0 0; }
.section-title { margin: 42px 0 16px; padding-top:10px; border-top:2px solid var(--ink); font:700 24px/1.4 var(--display); }
.grid { display:grid; gap:16px; margin:18px 0; }
.g2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.g3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.g4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.card { min-width:0; padding:23px; background:rgba(248,250,249,.87); border:1px solid var(--line); box-shadow:0 8px 22px rgba(39,65,76,.05); }
.card.blue { color:#fff; background:var(--blue-dark); border-color:var(--blue-dark); }
.card.amber { background:#fff6dc; border-color:#d8ba68; }
.card.red { background:#fff2ef; border-color:#d8aaa5; }
.card h3 { font:700 19px/1.45 var(--display); margin-bottom:9px; }
.card p { color:var(--muted); margin:0; }
.card.blue p { color:#d9e4f5; }
.tag { display:inline-flex; align-items:center; border:1px solid currentColor; padding:3px 8px; margin-bottom:12px; color:var(--blue); font:700 10px/1.4 var(--utility); letter-spacing:.08em; text-transform:uppercase; }
.card.blue .tag { color:#8fc4ff; }
.callout { margin:22px 0; padding:22px 25px; border-left:5px solid var(--blue); background:rgba(255,255,255,.72); }
.callout strong { display:block; margin-bottom:6px; font-family:var(--display); font-size:18px; }
.callout.warn { border-left-color:var(--amber); background:#fff7e5; }
.callout.danger { border-left-color:var(--red); background:#fff1ef; }
.callout.good { border-left-color:var(--green); background:#edf8f3; }

.table-wrap { overflow:auto; border:1px solid var(--line); background:rgba(255,255,255,.68); margin:18px 0 28px; scrollbar-gutter:stable; }
table { width:100%; min-width:760px; border-collapse:collapse; }
th, td { text-align:left; vertical-align:top; padding:14px 16px; border-bottom:1px solid var(--line-soft); }
th { position:sticky; top:0; z-index:1; background:#dce6ea; color:var(--ink); font-size:12px; letter-spacing:.04em; }
td { color:var(--ink-2); }
tr:last-child td { border-bottom:0; }
tbody tr:hover td { background:rgba(20,86,204,.04); }
.pill { display:inline-block; padding:3px 8px; border-radius:99px; font-size:11px; white-space:nowrap; background:#dce8ff; color:var(--blue-dark); }
.pill.warn { background:#fff0c4; color:#805800; }
.pill.good { background:#dff1e9; color:#185c49; }

.ladder { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin:24px 0; border:1px solid var(--line); }
.ladder-step { padding:25px; min-height:220px; background:rgba(255,255,255,.64); position:relative; }
.ladder-step + .ladder-step { border-left:1px solid var(--line); }
.ladder-step.active { background:var(--blue-dark); color:#fff; transform:translateY(-8px); box-shadow:var(--shadow); }
.ladder-step .num { color:var(--blue); font:700 34px/1 var(--utility); }
.ladder-step.active .num { color:#8fc4ff; }
.ladder-step h3 { margin:15px 0 8px; font:700 22px/1.3 var(--display); }
.ladder-step p { margin:0; color:var(--muted); }
.ladder-step.active p { color:#cbdaf0; }

.score-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:22px; align-items:start; }
.score-list { display:grid; gap:11px; }
.score-row { display:grid; grid-template-columns:190px 1fr 28px; align-items:center; gap:14px; padding:14px 16px; border:1px solid var(--line); background:rgba(255,255,255,.7); }
.score-row label { font-weight:650; }
.score-row small { display:block; color:var(--muted); font-weight:400; line-height:1.45; }
input[type="range"] { width:100%; accent-color:var(--blue); cursor:pointer; }
output { color:var(--blue); font:700 20px/1 var(--utility); text-align:right; }
.score-card { position:sticky; top:calc(var(--lm-chrome-offset) + 5rem); padding:28px; color:#fff; background:var(--poc-deep, #101b24); box-shadow:var(--shadow); }
.score-card small { color:#9fb0ba; font:700 10px/1 var(--utility); letter-spacing:.12em; }
.score-total { margin:15px 0 2px; font:700 72px/.95 var(--utility); color:#75dceb; }
.score-max { color:#8fa0aa; }
.score-level { margin:22px 0 7px; font:700 22px/1.3 var(--display); }
.score-desc { color:#bfccd3; font-size:13px; }
.score-scale { display:grid; grid-template-columns:repeat(4,1fr); gap:3px; margin-top:22px; }
.score-scale span { height:5px; background:#354650; }
.score-scale span.on { background:var(--cyan); }

.filters { display:flex; gap:8px; flex-wrap:wrap; margin:18px 0; }
.filter-btn { border:1px solid var(--line); background:rgba(255,255,255,.72); color:var(--ink-2); padding:8px 13px; }
.filter-btn:hover { border-color:var(--blue); }
.filter-btn.active { background:var(--blue); color:white; border-color:var(--blue); }
.question-list { display:grid; gap:10px; }
.question { border:1px solid var(--line); background:rgba(255,255,255,.78); }
.question summary { list-style:none; cursor:pointer; padding:16px 18px; display:grid; grid-template-columns:105px 1fr 24px; gap:14px; align-items:start; }
.question summary::-webkit-details-marker { display:none; }
.question summary::after { content:"＋"; color:var(--blue); font-size:21px; line-height:1; }
.question[open] summary::after { content:"−"; }
.q-cat { color:var(--blue); font:700 11px/1.5 var(--utility); letter-spacing:.06em; }
.q-title { font-weight:650; line-height:1.55; }
.q-answer { padding:0 18px 18px 137px; color:var(--muted); }
.q-answer strong { color:var(--ink); }

.story-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.story { position:relative; padding:24px; min-height:310px; color:#fff; overflow:hidden; }
.story:nth-child(1){background:#123e91}.story:nth-child(2){background:#116779}.story:nth-child(3){background:#6f3a18}
.story::after { content:attr(data-index); position:absolute; right:-8px; bottom:-34px; color:rgba(255,255,255,.08); font:700 150px/1 var(--utility); }
.story h3 { font:700 22px/1.35 var(--display); margin:14px 0 10px; position:relative; z-index:1; }
.story p { color:rgba(255,255,255,.74); position:relative; z-index:1; }
.story ul { position:relative; z-index:1; padding-left:18px; color:rgba(255,255,255,.9); }

.answer-spine { margin:24px 0; display:grid; grid-template-columns:repeat(8,1fr); border:1px solid var(--line); }
.answer-spine div { padding:16px 10px; min-height:100px; background:rgba(255,255,255,.7); border-right:1px solid var(--line); }
.answer-spine div:last-child { border-right:0; }
.answer-spine b { display:block; color:var(--blue); font:700 18px/1 var(--utility); }
.answer-spine span { display:block; margin-top:8px; color:var(--muted); font-size:12px; line-height:1.4; }
details.case { border-top:1px solid var(--line); }
details.case:last-child { border-bottom:1px solid var(--line); }
details.case summary { cursor:pointer; padding:17px 4px; font:700 17px/1.4 var(--display); }
.case-body { padding:0 5px 20px; color:var(--ink-2); }
.case-body code { display:block; white-space:pre-wrap; padding:18px; color:#d9e5eb; background:var(--poc-deep, #101b24); font:13px/1.75 var(--body); }

.redflag { display:grid; grid-template-columns:44px 1fr; gap:12px; align-items:start; padding:18px; background:#fff6f4; border:1px solid #deb6b0; }
.redflag .x { width:30px; height:30px; display:grid; place-items:center; background:var(--red); color:white; font-weight:800; }
.redflag h3 { font-size:17px; font-family:var(--display); }
.redflag p { margin:5px 0 0; color:#765a57; }

.timeline { display:grid; grid-template-columns:repeat(4,1fr); border-top:3px solid var(--ink); }
.week { padding:20px; border-right:1px solid var(--line); background:rgba(255,255,255,.64); }
.week:last-child { border-right:0; }
.week .w { color:var(--blue); font:700 12px/1 var(--utility); letter-spacing:.09em; }
.week h3 { margin:12px 0 9px; font:700 19px/1.35 var(--display); }
.week ul { margin:0; padding-left:18px; color:var(--muted); }
.check-item { display:flex; align-items:flex-start; gap:11px; padding:13px 0; border-bottom:1px solid var(--line-soft); }
.check-item input { width:18px; height:18px; margin-top:4px; accent-color:var(--blue); }
.check-item label { cursor:pointer; }
.check-progress { margin:18px 0; height:9px; background:#cedadd; }
.check-progress span { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--blue),var(--cyan)); transition:width .25s ease; }

.source-list { display:grid; gap:10px; }
.source { display:grid; grid-template-columns:150px 1fr; gap:18px; padding:16px; background:rgba(255,255,255,.7); border:1px solid var(--line); }
.source b { color:var(--blue); }
.source p { margin:0; color:var(--muted); }
.print-btn { border:1px solid var(--ink); background:transparent; padding:7px 11px; color:var(--ink); }
.print-btn:hover { color:#fff; background:var(--poc-deep, #101b24); }

@media (max-width:900px) {
  .hero-grid,.panel-head,.score-layout { grid-template-columns:1fr; }
  .g3,.g4,.story-grid,.timeline { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .score-card { position:static; }
  .answer-spine { grid-template-columns:repeat(4,1fr); }
  .answer-spine div:nth-child(4){border-right:0}.answer-spine div:nth-child(-n+4){border-bottom:1px solid var(--line)}
}
@media (max-width:620px) {
  .hero { padding-top:38px; }
  .hero-grid { gap:30px; }
  .g2,.g3,.g4,.story-grid,.timeline,.ladder { grid-template-columns:1fr; }
  .ladder-step + .ladder-step { border-left:0; border-top:1px solid var(--line); }
  .ladder-step.active { transform:none; }
  .score-row { grid-template-columns:1fr 34px; }
  .score-row input { grid-column:1/-1; grid-row:2; }
  .question summary { grid-template-columns:80px 1fr 18px; gap:8px; }
  .q-answer { padding-left:18px; }
  .answer-spine { grid-template-columns:repeat(2,1fr); }
  .answer-spine div:nth-child(even){border-right:0}.answer-spine div{border-bottom:1px solid var(--line)}
  .source { grid-template-columns:1fr; gap:4px; }
}
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}.panel,.fill{animation:none} }
@media print {
  body { background:#fff; color:#000; }
  .sticky-nav,.print-btn,.filters { display:none !important; }
  .panel { display:block !important; break-before:page; animation:none; }
  .panel:first-of-type { break-before:auto; }
  .hero { padding-top:18px; }
  .card,.callout,.table-wrap,.question { box-shadow:none; break-inside:avoid; }
  .score-layout { grid-template-columns:1fr; }
  .score-card { color:#000; background:#fff; border:2px solid #000; }
  .score-total,.score-level { color:#000; }
  a { color:#000; }
}

/* Blog integration: keep this guide's calibration-room design and own palette. */
.poc-content-label { margin-bottom: 22px; color: var(--muted); font: 600 10px/1.5 var(--utility); letter-spacing: .1em; }
.poc-content-label > span { color: #587366; }
.poc-app .nav-btn { text-decoration: none; line-height: 1.75; }
.poc-app .nav-btn:not(.active) { color: var(--muted); }
.poc-app .nav-btn:hover { color: var(--ink); }
.poc-app .print-btn { margin-top: 18px; min-height: 40px; font-size: 12px; }
.poc-app .gap-caption { margin: 12px 0 0; color: #afbdc5; font-size: 11px; }
.poc-app .small-note { color: var(--muted); font-size: 13px; }
.poc-app :is(.panel, .panel h2, [id^="s"], [id^="c"]) { scroll-margin-top: calc(var(--lm-chrome-offset) + 5.5rem); }
.poc-app :is(.panel-head > *, .score-row > *, .question summary > *, .source > *) { min-width: 0; }
.poc-app .check-item input { flex: 0 0 18px; }
.poc-app .check-item label { flex: 1; padding-block: 2px; }
.poc-app .score-row input { min-height: 30px; }
.poc-app .table-wrap:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.poc-app .hero-grid { gap: 36px; grid-template-columns: minmax(0, 1.3fr) minmax(300px, .8fr); }
.poc-app h1 { font-size: clamp(38px, 4.5vw, 64px); overflow-wrap: anywhere; }
.poc-app .score-row { grid-template-columns: minmax(150px, 1fr) minmax(80px, .8fr) 28px; }
.poc-app :focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.poc-app .panel h2:focus { outline: none; }
.poc-app .panel h2:focus-visible { outline: 2px solid var(--blue); outline-offset: 6px; }

:root.dark[data-demo="poc-interview-guide"] {
  --paper: #151e25;
  --paper-deep: #202d36;
  --card: #1c2932;
  --ink: #e4edf1;
  --ink-2: #c7d5de;
  --muted: #9baebb;
  --line: #3f535f;
  --line-soft: #30424e;
  --blue: #8bb6ff;
  --blue-dark: #174b98;
  --cyan: #4cc5d4;
  --amber: #efbc56;
  --red: #ed958c;
  --green: #7bcab1;
  --poc-deep: #101b24;
  --shadow: 0 18px 55px rgba(0, 0, 0, .22);
  scrollbar-color: #5c7382 #151e25;
}
.dark[data-demo="poc-interview-guide"] body { background-image: linear-gradient(rgba(139,182,255,.035) 1px, transparent 1px), linear-gradient(90deg,rgba(139,182,255,.035) 1px,transparent 1px); }
.dark .poc-app .poc-content-label > span { color: #a5bcae; }
.dark .poc-app :is(.card:not(.blue):not(.amber):not(.red), .callout:not(.warn):not(.danger):not(.good), .table-wrap, .ladder-step:not(.active), .score-row, .filter-btn:not(.active), .question, .answer-spine div, .week, .source) { background: var(--card); }
.dark .poc-app :is(.card.amber, .callout.warn) { background: #352d1e; border-color: #827045; }
.dark .poc-app :is(.card.red, .callout.danger, .redflag) { background: #342528; border-color: #785456; }
.dark .poc-app .callout.good { background: #19362f; }
.dark .poc-app .redflag p { color: #d9b8b5; }
.dark .poc-app .redflag .x { background: #99473f; }
.dark .poc-app th { background: #293c47; }
.dark .poc-app .pill { background: #294263; color: #bdd4ff; }
.dark .poc-app .pill.warn { background: #4a3b1c; color: #f3d68e; }
.dark .poc-app .pill.good { background: #24473d; color: #afe4cd; }
.dark .poc-app .filter-btn.active { background: #245ba6; }
.dark .poc-app .nav-btn:hover { background: #23323d; }
.dark .poc-app .check-progress { background: #354b57; }
.dark .poc-app .check-progress span { background: linear-gradient(90deg,#357fea,var(--cyan)); }
.dark[data-demo="poc-interview-guide"] ::-webkit-scrollbar-track { background: #151e25; }
.dark[data-demo="poc-interview-guide"] ::-webkit-scrollbar-thumb { background: #5c7382; border-color: #151e25; }

@media (max-width: 1000px) {
  .poc-app .hero-grid { gap: 30px; }
  .poc-app .score-layout { grid-template-columns: minmax(0, 1fr) 250px; }
}
@media (max-width: 900px) {
  .poc-app :is(.hero-grid, .score-layout) { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .poc-app .question summary { grid-template-columns: 48px minmax(0, 1fr) 18px; gap: 8px; padding: 16px 14px; }
  .poc-app .score-row { grid-template-columns: minmax(0, 1fr) 28px; }
  .poc-app .score-row input { grid-column: 1 / -1; }
  .poc-app .panel-head { gap: 12px; }
  .poc-app .authority-card { box-shadow: 6px 6px 0 rgba(20,86,204,.16); }
  .poc-app .case-body code { overflow-wrap: anywhere; }
  .poc-app .week { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media print {
  :root[data-demo="poc-interview-guide"], :root.dark[data-demo="poc-interview-guide"] {
    --paper: #fff; --card: #fff; --ink: #111; --ink-2: #222; --muted: #444;
    --blue: #17477b; --line: #bbb; --line-soft: #ddd;
  }
  .poc-app .shell { width: 100%; }
  .poc-app :is(.panel[hidden], .question[hidden]) { display: block !important; }
  .poc-app .panel { margin-top: 2rem; break-before: page; }
  .poc-app .filters, .poc-app #question-count, body::after { display: none !important; }
  .poc-app details::details-content { content-visibility: visible; display: block; height: auto; }
  .poc-app :is(.hero-grid, .score-layout) { grid-template-columns: 1fr; }
  .poc-app :is(.card, .callout, .question, .source, .ladder-step, .score-row, .week, .story, .redflag, .authority-card, .score-card, .case-body code) { color: #111 !important; background: #fff !important; box-shadow: none; }
  .poc-app :is(.card p, .story p, .story ul, .gap-line, .bar-label, .gap-caption, .score-desc, .score-max, .score-card small, .ladder-step p, .redflag p) { color: #444 !important; }
  .poc-app .score-card { position: static; }
  .poc-app table { min-width: 0; font-size: 10pt; }
  .poc-app :is(th, td) { padding: 8px; }
  .poc-app .table-wrap { overflow: visible; }
  .poc-app .q-answer { padding-left: 18px; }
}