/* Chapters 15–17 share the case study's blue palette, type scale and page width. */
.case-section.ds-reference {
  --ds-unit: min(1vw, 22.857px);
  --ds-ink: #0c204d;
  --ds-muted: #536d93;
  --ds-blue: #247bff;
  --ds-line: #e0eafa;
  position: relative;
  isolation: isolate;
  padding: 0;
  background: linear-gradient(115deg, #f7fbff, #fbfcfe 56%, #f5faff);
  color: var(--ds-ink);
  border-top: 1px solid #e6eef9;
}
.ds-reference .ds-shell { width: 87.5%; max-width: 2000px; margin-inline: auto; padding: calc(3.5 * var(--ds-unit)) 0 calc(3 * var(--ds-unit)); }
.ds-reference .ds-header { display: grid; grid-template-columns: minmax(0, 72fr) minmax(0, 28fr); align-items: center; gap: 3%; margin-bottom: calc(2.4 * var(--ds-unit)); }
.ds-reference .ds-header > * { min-width: 0; }
.ds-reference .section-label { margin: 0 0 calc(1.25 * var(--ds-unit)); font-size: clamp(11px, calc(.85 * var(--ds-unit)), 18px); font-weight: 400; line-height: 1.7; letter-spacing: .1em; color: #506b93; }
.ds-reference .ds-header h2 { max-width: none; margin: 0; color: #081730; font-size: clamp(30px, calc(2.74 * var(--ds-unit)), 62px); font-weight: 700; line-height: 1.4; letter-spacing: -.025em; text-wrap: initial; }
.ds-reference .ds-copy { max-width: 70ch; margin: calc(1.8 * var(--ds-unit)) 0 0; color: var(--ds-muted); font-size: clamp(15px, calc(1.16 * var(--ds-unit)), 24px); line-height: 1.85; text-wrap: pretty; }
.ds-reference .ds-aside { position: relative; align-self: center; min-height: 220px; }
.ds-reference .ds-panel { min-width: 0; margin-top: calc(1.2 * var(--ds-unit)); padding: clamp(20px, calc(1.6 * var(--ds-unit)), 36px); border-radius: 14px; background: #ffffffde; }
.ds-reference .ds-panel-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px 24px; margin-bottom: clamp(16px, calc(1.35 * var(--ds-unit)), 30px); }
.ds-reference .ds-panel-head h3, .ds-reference h3.ds-subtitle { min-width: 0; color: var(--ds-ink); font-size: clamp(17px, calc(1.2 * var(--ds-unit)), 27px); font-weight: 700; line-height: 1.6; letter-spacing: -.01em; text-wrap: initial; }
.ds-reference .ds-panel-head h3 > span { color: var(--ds-muted); font-weight: 400; letter-spacing: .02em; margin-right: .5em; }
.ds-reference .ds-panel-head p { margin: 0; color: var(--ds-muted); font-size: clamp(13px, calc(.9 * var(--ds-unit)), 19px); line-height: 1.75; }
.ds-reference .ds-subtitle { font-size: clamp(17px, calc(1.2 * var(--ds-unit)), 27px); line-height: 1.6; }
.ds-reference .ds-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: clamp(22px, calc(1.5 * var(--ds-unit)), 36px); color: #3e5d87; }
.ds-reference .ds-footer p { margin: 0; font-size: clamp(15px, calc(1.05 * var(--ds-unit)), 23px); line-height: 1.8; }
.ds-reference .ds-footer > span { flex-shrink: 0; color: #536f98; font-size: clamp(10px, calc(.8 * var(--ds-unit)), 17px); letter-spacing: .08em; line-height: 1.6; }
.ds-reference button, .ds-reference input, .ds-reference select, .ds-reference textarea { font-family: inherit; }
.ds-reference :is(button, a, input, select, textarea, summary):focus-visible { outline: 2px solid #247bff; outline-offset: 4px; }
.ds-reference [hidden] { display: none !important; }
.ds-reference .ds-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 1100px) {
 .ds-reference .ds-shell { width: 90%; padding-block: 40px 36px; }
 .ds-reference .ds-header { grid-template-columns: minmax(0, 72fr) minmax(0, 28fr); gap: 2%; margin-bottom: 30px; }
 .ds-reference .ds-header h2 { font-size: clamp(28px, 3.15vw, 35px); }
 .ds-reference .section-label { margin-bottom: 18px; }
 .ds-reference .ds-copy { margin-top: 22px; }
 .ds-reference .ds-panel { margin-top: 18px; }
 .ds-reference .ds-footer { align-items: flex-start; }
}
@media (max-width: 720px) {
 .ds-reference .ds-shell { padding-block: 32px; }
 .ds-reference .ds-header { grid-template-columns: 1fr; gap: 20px; margin-bottom: 24px; }
 .ds-reference .ds-header h2 { font-size: clamp(25px, 4.8vw, 34px); }
 .ds-reference .ds-copy { font-size: 15px; line-height: 1.85; }
 .ds-reference .ds-panel { padding: 18px; border-radius: 12px; }
 .ds-reference .ds-panel-head { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 18px; }
 .ds-reference .ds-panel-head h3, .ds-reference h3.ds-subtitle { font-size: 17px; }
 .ds-reference .ds-footer { flex-direction: column; gap: 12px; }
 .ds-reference .ds-footer p { font-size: 15px; }
 .ds-reference .ds-footer > span { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
 .ds-reference *, .ds-reference *::before, .ds-reference *::after { scroll-behavior: auto !important; transition-duration: 0s !important; animation-duration: 0s !important; }
}


/* Chapter 15: editable component specimens and an isolated interaction sandbox. */
#component-library .cl-header-art { position:relative; min-height:260px; align-self:stretch; }
#component-library .cl-handnote { position:absolute; top:20%; left:8%; color:#6381b0; font:clamp(19px,1.5vw,32px)/1.6 'KaiTi','STKaiti','楷体',serif; letter-spacing:.15em; transform:rotate(-13deg); white-space:nowrap; }
#component-library .cl-note-line { position:absolute; color:#6a9eff; top:42%; left:3%; width:92%; height:25%; }
#component-library .cl-layer-stack { position:absolute; left:23%; bottom:10%; width:48%; height:38%; filter:drop-shadow(0 18px 13px #79a9e82b); }
#component-library .cl-layer-stack i { position:absolute; display:block; width:80%; aspect-ratio:1; left:10%; top:26%; border-radius:10%; border:1px solid #bdd9ff; background:linear-gradient(140deg,#fff,#e7f3ff); transform:rotate(30deg) skewX(-30deg) scaleY(.86); box-shadow:4px 5px 8px #5998ef1a; }
#component-library .cl-layer-stack i:nth-child(2) { top:7%; background:linear-gradient(140deg,#e4f1ffcf,#b8d8ffb3); border-color:#9bc6ff; }
#component-library .cl-layer-stack i:nth-child(3) { top:-12%; background:linear-gradient(140deg,#bcd9ffc7,#77b3ff75); border-color:#a0c8ff; }
#component-library .cl-example-note { align-self:center; margin:0; color:#536d93; font-size:clamp(11px,.76vw,16px); line-height:1.6; }
#component-library .cl-foundation-row { display:grid; gap:clamp(15px,1.4vw,30px); border:1px solid #e0eafb; border-radius:12px; padding:clamp(18px,1.3vw,28px); margin-top:14px; }
#component-library .cl-foundation-primary { grid-template-columns:1.08fr 1.02fr .8fr 1.2fr; align-items:start; }
#component-library .cl-foundation-secondary { grid-template-columns:1.35fr .65fr 1.2fr 1fr; align-items:center; }
#component-library .cl-specimen { min-width:0; }
#component-library .cl-specimen h4, #component-library .cl-specimen-title { display:block; margin:0 0 14px; color:#0c204d; font-size:clamp(14px,1vw,21px); font-weight:500; line-height:1.4; }
#component-library .cl-button-pair { display:flex; gap:10px; }
#component-library .cl-button { display:inline-flex; align-items:center; justify-content:center; min-width:0; min-height:42px; padding:8px 14px; border-radius:7px; border:1px solid #bdd6ff; font-size:clamp(12px,.83vw,18px); font-weight:500; line-height:1.4; cursor:pointer; transition:background-color .15s ease, border-color .15s ease; }
#component-library .cl-button-primary { color:#fff; background:#1469d6; border-color:#1469d6; box-shadow:0 3px 8px #247bff12; }
#component-library .cl-button-primary:hover { background:#156be9; border-color:#156be9; }
#component-library .cl-button-secondary { color:#1469d6; background:#fafdff; }
#component-library .cl-button-secondary:hover { background:#edf5ff; border-color:#82b4ff; }
#component-library .cl-input-wrap { position:relative; }
#component-library .cl-input-wrap input, #component-library .cl-specimen select { width:100%; min-width:0; min-height:42px; padding:8px 12px; color:#36577d; background:#fff; border:1px solid #d7e5fb; border-radius:7px; font-size:clamp(11px,.8vw,17px); line-height:1.5; }
#component-library .cl-input-wrap input { padding-right:34px; }
#component-library .cl-input-wrap input::placeholder { color:#536d93; }
#component-library .cl-input-wrap input::-webkit-search-cancel-button { cursor:pointer; }
#component-library .cl-input-wrap svg { position:absolute; width:18px; height:18px; right:10px; top:12px; color:#7293c0; pointer-events:none; }
#component-library .cl-specimen select { cursor:pointer; padding-right:8px; }
#component-library .cl-tabs { display:flex; align-items:stretch; border:1px solid #d7e5fb; border-radius:7px; }
#component-library .cl-tabs button { position:relative; flex:1; min-width:0; min-height:42px; border:0; border-radius:6px; padding:8px 5px; color:#536d93; background:transparent; cursor:pointer; font-size:clamp(11px,.79vw,17px); font-weight:500; line-height:1.5; white-space:nowrap; }
#component-library .cl-tabs button[aria-selected='true'] { color:#1469d6; background:#f4f9ff; }
#component-library .cl-tabs button[aria-selected='true']::after { content:''; position:absolute; width:30%; left:35%; bottom:0; border-bottom:2px solid #247bff; }
#component-library .cl-tab-caption { margin:6px 0 -5px; color:#536d93; font-size:clamp(10px,.67vw,14px); line-height:1.4; }
#component-library .cl-checkbox-pair { display:flex; gap:clamp(15px,2vw,44px); flex-wrap:wrap; }
#component-library .cl-checkbox-pair label { display:flex; align-items:center; gap:9px; min-height:32px; color:#536d93; font-size:clamp(12px,.86vw,18px); cursor:pointer; }
#component-library .cl-checkbox-pair input { appearance:none; width:22px; height:22px; margin:0; border:1px solid #c2d6f5; border-radius:5px; background:#fff; cursor:pointer; }
#component-library .cl-checkbox-pair input:checked { border-color:#247bff; background:#247bff; }
#component-library .cl-checkbox-pair input:checked::after { content:''; display:block; width:6px; height:11px; margin:2px 0 0 7px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
#component-library .cl-avatar-specimen, #component-library .cl-tooltip-specimen, #component-library .cl-empty-specimen { padding-left:clamp(14px,1.4vw,28px); border-left:1px solid #e6eefb; }
#component-library .cl-avatar { display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:linear-gradient(150deg,#d1e0f4,#aebfd6); color:#304b72; font-size:27px; font-weight:400; line-height:1; }
#component-library .cl-tooltip-demo { display:flex; align-items:center; gap:12px; min-height:50px; }
#component-library .cl-tooltip-trigger { display:grid; place-items:center; width:29px; height:29px; padding:0; border:0; border-radius:50%; background:#edf5ff; color:#73a6ea; cursor:pointer; flex:0 0 auto; }
#component-library .cl-tooltip-trigger svg { width:22px; height:22px; }
#component-library .cl-tooltip { position:relative; display:block; padding:9px 12px; border-radius:6px; background:#263950; color:#fff; font-size:clamp(12px,.85vw,18px); line-height:1.5; box-shadow:0 5px 13px #10244516; }
#component-library .cl-tooltip::before { content:''; position:absolute; top:calc(50% - 5px); left:-4px; width:9px; height:9px; background:inherit; transform:rotate(45deg); }
#component-library .cl-tooltip-trigger[aria-expanded='false'] + .cl-tooltip { visibility:hidden; }
#component-library .cl-empty-specimen { display:grid; justify-items:center; }
#component-library .cl-empty-specimen h4 { margin-bottom:9px; }
#component-library .cl-empty-icon { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:#eff3f9; color:#9bb3d2; }
#component-library .cl-empty-icon svg { width:24px; height:24px; }
#component-library .cl-empty-specimen p { margin:4px 0 0; color:#536d93; font-size:clamp(11px,.8vw,16px); line-height:1.4; }
#component-library .cl-interaction-feedback { margin:11px 0 0; color:#536d93; font-size:clamp(10px,.72vw,15px); line-height:1.5; min-height:1.5em; }
#component-library .cl-status-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(10px,1vw,20px); }
#component-library .cl-state { --cl-state-color:#247bff; --cl-state-text:#1469d6; --cl-state-bg:#f0f7ff; display:flex; align-items:center; gap:clamp(12px,1vw,22px); min-width:0; padding:clamp(16px,1.2vw,26px); border-radius:12px; background:var(--cl-state-bg); }
#component-library .cl-state-green { --cl-state-color:#00a985; --cl-state-text:#007e64; --cl-state-bg:#ecfbf6; }
#component-library .cl-state-gray { --cl-state-color:#59708e; --cl-state-text:#536d93; --cl-state-bg:#f4f6fa; }
#component-library .cl-state-orange { --cl-state-color:#d98a04; --cl-state-text:#a56500; --cl-state-bg:#fffaed; }
#component-library .cl-state-red { --cl-state-color:#f23947; --cl-state-text:#cf2838; --cl-state-bg:#fff1f3; }
#component-library .cl-state-icon { display:grid; place-items:center; flex:0 0 auto; width:clamp(37px,2.65vw,58px); height:clamp(37px,2.65vw,58px); border-radius:50%; color:var(--cl-state-color); background:color-mix(in srgb,var(--cl-state-color) 9%,transparent); }
#component-library .cl-state-icon svg { width:52%; height:52%; }
#component-library .cl-state-question { font-size:25px; line-height:1; }
#component-library .cl-state h4 { font-size:clamp(13px,1vw,21px); color:var(--cl-state-text); font-weight:500; line-height:1.5; text-wrap:initial; }
#component-library .cl-state p { margin:2px 0 0; color:var(--cl-state-text); font-size:clamp(12px,.9vw,19px); line-height:1.45; }
#component-library .cl-state-boundary { display:flex; align-items:center; gap:clamp(18px,1.7vw,36px); padding:clamp(17px,1.3vw,28px); margin-top:clamp(15px,1.2vw,25px); border-radius:12px; background:linear-gradient(100deg,#f0f7ff,#f7fbff); }
#component-library .cl-boundary-icon { display:grid; place-items:center; flex:0 0 auto; width:43px; height:43px; color:#247bff; border-radius:50%; border:2px solid #247bff; box-shadow:0 0 0 7px #e3efff; font:500 27px/1 Georgia,serif; }
#component-library .cl-state-boundary ul { display:flex; flex-wrap:wrap; gap:9px 0; color:#0c204d; font-size:clamp(13px,1.09vw,23px); font-weight:500; line-height:1.5; }
#component-library .cl-state-boundary li + li { border-left:1px solid #c9dcf7; margin-left:clamp(14px,1.7vw,36px); padding-left:clamp(14px,1.7vw,36px); }
#component-library .cl-state-boundary b { font-weight:500; }
#component-library .cl-state-boundary p { margin:5px 0 0; color:#536d93; font-size:clamp(12px,.9vw,19px); line-height:1.7; }
#component-library .cl-business-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,1vw,21px); }
#component-library .cl-business-grid > li { min-width:0; padding:clamp(16px,1.2vw,26px); border:1px solid #e0eafb; border-radius:11px; }
#component-library .cl-business-grid h4 { margin:0; color:#0c204d; font-size:clamp(13px,1vw,21px); font-weight:500; line-height:1.5; text-wrap:initial; }
#component-library .cl-business-grid > li > p { margin:2px 0 13px; color:#536d93; font-size:clamp(12px,.9vw,18px); line-height:1.5; }
#component-library .cl-mini-company, #component-library .cl-mini-evidence, #component-library .cl-mini-followup, #component-library .cl-mini-drawer { display:flex; align-items:center; gap:15px; min-height:45px; }
#component-library .cl-mini-company > span { display:grid; place-items:center; flex:0 0 auto; width:44px; height:44px; background:#ecf2fb; border-radius:9px; color:#183763; font-size:23px; line-height:1; }
#component-library .cl-skeleton { display:grid; gap:9px; flex:1; }
#component-library .cl-skeleton i { height:9px; border-radius:3px; background:#e4ecf8; }
#component-library .cl-skeleton i:last-child { width:72%; }
#component-library .cl-mini-icon { display:grid; place-items:center; flex:0 0 auto; width:44px; height:44px; color:#247bff; background:#eff6ff; border-radius:9px; }
#component-library .cl-mini-icon svg { width:25px; height:25px; }
#component-library .cl-mini-match { display:flex; flex-wrap:wrap; gap:9px 15px; align-items:center; min-height:45px; }
#component-library .cl-mini-match strong { color:#007e64; font-size:clamp(18px,1.35vw,29px); font-weight:500; line-height:1.3; }
#component-library .cl-mini-match span { font-size:clamp(10px,.74vw,16px); color:#536d93; }
#component-library .cl-mini-draft { min-height:45px; align-content:center; }
#component-library .cl-mini-draft i:last-child { width:55%; }
#component-library .cl-mini-review { display:flex; align-items:center; gap:16px; min-height:45px; }
#component-library .cl-mini-review > span { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; font-size:23px; line-height:1; }
#component-library .cl-mini-approved { color:#00a985; background:#dff7ef; }
#component-library .cl-mini-revised { color:#e39a11; background:#fff6e2; }
#component-library .cl-mini-revised svg { width:24px; height:24px; }
#component-library .cl-mini-run { display:flex; align-items:center; gap:clamp(9px,1vw,22px); min-height:45px; }
#component-library .cl-mini-run span { color:#536d93; font-size:clamp(19px,1.4vw,29px); }
#component-library .cl-mini-run i { flex:1; height:9px; border-radius:5px; background:#e4ecf8; }
#component-library .cl-mini-run i:first-of-type { background:#247bff; }
#component-library .cl-mini-drawer > svg { flex:0 0 auto; width:25px; height:31px; color:#b6c9e4; }
#component-library .cl-workflow-heading { margin-top:clamp(20px,1.6vw,34px); }
#component-library .cl-workflow-heading h3 { color:#5a749b; font-size:clamp(13px,1vw,21px); font-weight:400; line-height:1.6; letter-spacing:.02em; }
#component-library .cl-workflow-heading .ds-subtitle { margin:3px 0 0; color:#536d93; font-size:clamp(12px,.9vw,19px); line-height:1.7; }
#component-library .cl-assembly { display:grid; grid-template-columns:repeat(3,minmax(0,.85fr)) minmax(0,1.2fr) repeat(3,minmax(0,1fr)); gap:clamp(14px,1.5vw,30px); margin-top:12px; }
#component-library .cl-assembly li { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-width:0; min-height:65px; padding:11px 8px; color:#1469d6; border-radius:9px; background:#f1f7ff; text-align:center; line-height:1.45; }
#component-library .cl-assembly li + li::before { content:'→'; position:absolute; right:calc(100% + 3px); width:calc(clamp(14px,1.5vw,30px) - 6px); top:calc(50% - .6em); color:#6b88b1; font-size:clamp(12px,.95vw,20px); line-height:1.2; }
#component-library .cl-assembly span { font-size:clamp(12px,.88vw,19px); }
#component-library .cl-assembly small { font-size:clamp(10px,.71vw,15px); overflow-wrap:anywhere; }
#component-library .cl-assembly .cl-atom-green { color:#007e64; background:#eefbf6; }
#component-library .cl-assembly .cl-atom-orange { color:#a56500; background:#fff9ed; }
#component-library .cl-assembly .cl-atom-neutral { color:#536d93; background:#f5f8fd; }
@media (max-width:1100px) {
 #component-library .cl-header-art { min-height:230px; }
 #component-library .cl-desktop-break { display:none; }
 #component-library .cl-foundation-primary { grid-template-columns:1fr 1fr; }
 #component-library .cl-foundation-secondary { grid-template-columns:1.1fr .7fr 1.1fr .9fr; gap:16px; }
 #component-library .cl-tooltip { padding:8px 10px; }
 #component-library .cl-state { gap:12px; padding:16px 13px; }
 #component-library .cl-state-boundary li + li { margin-left:14px; padding-left:14px; }
 #component-library .cl-assembly { gap:16px; }
}
@media (max-width:720px) {
 #component-library .cl-header-art { min-height:130px; margin-top:2px; }
 #component-library .cl-handnote { top:3%; left:2%; font-size:19px; }
 #component-library .cl-note-line { width:40%; left:2%; top:35%; height:48%; }
 #component-library .cl-layer-stack { left:auto; right:8%; width:90px; height:85px; bottom:25px; }
 #component-library .cl-example-note { font-size:11px; }
 #component-library .cl-foundation-row { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 16px; padding:17px 14px; }
 #component-library .cl-specimen h4, #component-library .cl-specimen-title { margin-bottom:12px; font-size:14px; }
 #component-library .cl-button-pair { flex-direction:column; gap:7px; }
 #component-library .cl-button { min-height:38px; font-size:12px; }
 #component-library .cl-input-wrap input, #component-library .cl-specimen select { font-size:12px; min-height:40px; padding-left:8px; }
 #component-library .cl-tabs { flex-wrap:wrap; }
 #component-library .cl-tabs button { min-width:40px; min-height:38px; font-size:11px; }
 #component-library .cl-tab-caption { font-size:10px; }
 #component-library .cl-avatar-specimen, #component-library .cl-tooltip-specimen, #component-library .cl-empty-specimen { padding-left:0; border:0; }
 #component-library .cl-avatar-specimen, #component-library .cl-empty-specimen { justify-self:center; }
 #component-library .cl-checkbox-pair { flex-direction:column; gap:4px; }
 #component-library .cl-checkbox-pair label { font-size:12px; }
 #component-library .cl-tooltip-demo { gap:6px; }
 #component-library .cl-tooltip-trigger { width:24px; height:24px; }
 #component-library .cl-tooltip { padding:7px; font-size:11px; }
 #component-library .cl-status-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
 #component-library .cl-state { padding:13px 11px; gap:9px; }
 #component-library .cl-state-icon { width:30px; height:30px; }
 #component-library .cl-state-question { font-size:20px; }
 #component-library .cl-state h4 { font-size:12px; overflow-wrap:anywhere; }
 #component-library .cl-state p { font-size:12px; }
 #component-library .cl-state-boundary { gap:16px; padding:18px 15px; align-items:flex-start; }
 #component-library .cl-boundary-icon { width:29px; height:29px; font-size:21px; margin-top:5px; box-shadow:0 0 0 5px #e3efff; }
 #component-library .cl-state-boundary ul { flex-direction:column; gap:8px; font-size:13px; }
 #component-library .cl-state-boundary li + li { margin:0; padding:0; border:0; }
 #component-library .cl-state-boundary p { margin-top:11px; font-size:12px; }
 #component-library .cl-business-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
 #component-library .cl-business-grid > li { padding:13px 11px; }
 #component-library .cl-business-grid h4 { font-size:12px; overflow-wrap:anywhere; }
 #component-library .cl-business-grid > li > p { font-size:12px; }
 #component-library .cl-mini-company, #component-library .cl-mini-evidence, #component-library .cl-mini-followup, #component-library .cl-mini-drawer { gap:9px; }
 #component-library .cl-mini-company > span, #component-library .cl-mini-icon { width:32px; height:36px; }
 #component-library .cl-mini-company > span { font-size:20px; }
 #component-library .cl-mini-icon svg { width:22px; height:22px; }
 #component-library .cl-mini-match strong { font-size:19px; }
 #component-library .cl-mini-match span { font-size:10px; }
 #component-library .cl-mini-review { gap:10px; }
 #component-library .cl-mini-review > span { width:33px; height:33px; font-size:20px; }
 #component-library .cl-mini-run { gap:9px; }
 #component-library .cl-mini-run span { font-size:19px; }
 #component-library .cl-mini-run i, #component-library .cl-skeleton i { height:7px; }
 #component-library .cl-assembly { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 23px; }
 #component-library .cl-assembly li { min-height:61px; }
 #component-library .cl-assembly li + li::before { width:17px; }
 #component-library .cl-assembly li:nth-child(odd)::before { content:none; }
 #component-library .cl-assembly span { font-size:12px; }
 #component-library .cl-assembly small { font-size:10px; }
}
@media (max-width:380px) {
 #component-library .cl-foundation-primary { grid-template-columns:1fr; }
 #component-library .cl-foundation-primary .cl-button-pair { flex-direction:row; }
 #component-library .cl-foundation-primary .cl-button { flex:1; }
 #component-library .cl-foundation-secondary { grid-template-columns:1fr 1fr; }
 #component-library .cl-tooltip-demo { flex-direction:column; align-items:flex-start; gap:7px; }
 #component-library .cl-tooltip::before { top:-4px; left:8px; }
 #component-library .cl-state { flex-direction:column; align-items:flex-start; }
 #component-library .cl-mini-match { gap:4px; }
 #component-library .cl-mini-match span { font-size:9px; }
}
@media (prefers-reduced-motion:reduce) {
 #component-library .cl-button, #component-library .cl-tooltip { transition:none; }
}


/* Chapter 16 — shared visual rules and their business meaning. */
#component-guidelines { color: #0c204d; }
#component-guidelines .cg-heading { min-width: 0; }
#component-guidelines .cg-panels { display: grid; gap: clamp(18px, 1.45vw, 30px); }
#component-guidelines .cg-panels .ds-panel { margin: 0; }
#component-guidelines .ds-panel-head { gap: 16px; margin-bottom: 0; }
#component-guidelines .ds-panel-head > p { color: #536d93; font-size: clamp(12px, .87vw, 18px); line-height: 1.65; text-align: right; }
#component-guidelines .ds-subtitle { font-size: clamp(15px, 1.13vw, 24px); line-height: 1.65; font-weight: 700; }
#component-guidelines .ds-subtitle > span { color: #536d93; font-weight: 400; margin-right: .35em; }
#component-guidelines .ds-aside { position: relative; align-self: stretch; min-height: 240px; }
#component-guidelines .cg-handnote { position: relative; z-index: 1; width: max-content; max-width: 100%; margin: 5% auto 0; color: #5576ab; font: clamp(18px, 1.55vw, 33px)/1.65 KaiTi, STKaiti, "楷体", serif; letter-spacing: .1em; transform: rotate(-12deg); }
#component-guidelines .cg-handnote::after { content: ""; display: block; width: 100%; height: 1.7em; margin-top: -.35em; border-top: 1px solid #85b0ff; border-radius: 50%; transform: rotate(-5deg); }
#component-guidelines .cg-rules-art { position: relative; width: 66%; height: clamp(138px, 13vw, 265px); margin: -2% auto 0; perspective: 700px; }
#component-guidelines .cg-sheet { position: absolute; display: block; width: 55%; height: 73%; left: 14%; top: 20%; border: 1px solid #d1e3ff; border-radius: 9px; transform: rotateY(-29deg) skewY(13deg); }
#component-guidelines .cg-sheet-back { left: 44%; top: 0; background: linear-gradient(105deg, #d8eaff, #b6d7ff); border-color: #cee2ff; }
#component-guidelines .cg-sheet-middle { left: 30%; top: 11%; background: linear-gradient(130deg, #ffffffde, #e5f1ffcf); }
#component-guidelines .cg-sheet-front { padding: 18% 10%; background: linear-gradient(130deg, #ffffff, #edf5ff); box-shadow: 6px 7px 8px #a4c6f124; }
#component-guidelines .cg-sheet-front > i { display: block; width: 100%; height: 7%; margin-bottom: 18%; background: #d7e8ff; border-radius: 2px; }
#component-guidelines .cg-sheet-front > i:first-child { width: 63%; }
#component-guidelines .cg-sheet-front > i:last-child { width: 77%; }
#component-guidelines .cg-art-check { position: absolute; top: 13%; left: 2%; color: #95bfff; font: 700 clamp(32px, 3.6vw, 72px)/1 "Portfolio Noto SC", sans-serif; transform: rotate(-12deg); }
#component-guidelines .cg-color-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, .95vw, 20px); margin-top: clamp(20px, 1.6vw, 34px); }
#component-guidelines .cg-color { min-width: 0; min-height: clamp(170px, 10.75vw, 226px); padding: clamp(15px, 1.4vw, 28px); border: 1px solid #e4ecf7; border-radius: 12px; background: #f9fcff; }
#component-guidelines .cg-swatch { display: block; width: clamp(30px, 2.05vw, 43px); height: clamp(30px, 2.05vw, 43px); border-radius: 50%; margin-bottom: clamp(15px, 1.2vw, 25px); background: var(--cg-state); }
#component-guidelines .cg-blue { --cg-state: #247bff; background: #f8fbff; }
#component-guidelines .cg-green { --cg-state: #00b895; background: #f5fcfa; }
#component-guidelines .cg-orange { --cg-state: #ffb738; background: #fffdf8; }
#component-guidelines .cg-red { --cg-state: #ff414b; background: #fff8f9; }
#component-guidelines .cg-gray { --cg-state: #b4c0d0; background: #fbfcfe; }
#component-guidelines .cg-color h4, #component-guidelines .cg-color strong { display: block; font-size: clamp(15px, 1.03vw, 22px); line-height: 1.7; font-weight: 500; }
#component-guidelines .cg-color p { margin: 4px 0 0; color: #536d93; font-size: clamp(12px, .88vw, 18px); line-height: 1.7; }
#component-guidelines .cg-evidence-flow { display: grid; grid-template-columns: 1.12fr repeat(5, minmax(0, 1fr)); gap: 28px; margin-top: clamp(18px, 1.55vw, 32px); padding: clamp(21px, 1.6vw, 34px) clamp(18px, 1.4vw, 28px); border: 1px solid #e3edf9; border-radius: 12px; }
#component-guidelines .cg-evidence-flow > li { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
#component-guidelines .cg-evidence-flow > li:not(:last-child)::after { content: "→"; position: absolute; right: -24px; top: 34%; color: #247bff; font-size: clamp(19px, 1.4vw, 29px); line-height: 1; }
#component-guidelines .cg-flow-icon { display: grid; place-items: center; width: clamp(45px, 3.3vw, 68px); height: clamp(45px, 3.3vw, 68px); border-radius: 50%; color: #247bff; background: #f0f6ff; }
#component-guidelines .cg-flow-icon svg { width: 49%; height: 49%; }
#component-guidelines .cg-evidence-flow h4 { margin-top: 11px; font-size: clamp(14px, 1vw, 21px); font-weight: 500; line-height: 1.65; }
#component-guidelines .cg-evidence-flow p { margin: 3px 0 0; color: #536d93; font-size: clamp(11px, .85vw, 18px); line-height: 1.6; }
#component-guidelines .cg-evidence-flow .cg-assessment { align-items: flex-start; text-align: left; }
#component-guidelines .cg-match-label { font-size: clamp(13px, .92vw, 19px); line-height: 1.6; font-weight: 500; }
#component-guidelines .cg-assessment strong { color: #009d7d; font-size: clamp(22px, 1.72vw, 36px); line-height: 1.5; font-weight: 700; }
#component-guidelines .cg-sample-label { color: #536d93; font-size: clamp(10px, .73vw, 15px); }
#component-guidelines .cg-match-line { display: block; width: 84%; max-width: 165px; height: 9px; border-radius: 5px; background: #edf3fc; margin-top: 8px; }
#component-guidelines .cg-match-line i { display: block; height: 100%; width: 78%; border-radius: inherit; background: #00b895; }
#component-guidelines .cg-inline-quote, #component-guidelines .cg-footer { display: flex; flex-direction: row; align-items: center; gap: clamp(16px, 1.5vw, 32px); border-radius: 12px; background: linear-gradient(100deg, #f0f7ff, #f7fbff); }
#component-guidelines .cg-inline-quote { margin-top: clamp(16px, 1.2vw, 25px); padding: clamp(16px, 1.2vw, 25px) clamp(18px, 1.3vw, 27px); }
#component-guidelines .cg-quote-mark { flex: 0 0 auto; align-self: center; height: .7em; color: #9bc1ff; font: 700 clamp(55px, 4.6vw, 96px)/1 Georgia, serif; }
#component-guidelines .cg-inline-quote p { margin: 0; font-family: KaiTi, STKaiti, "楷体", serif; font-size: clamp(15px, 1.08vw, 23px); line-height: 1.7; }
#component-guidelines .cg-inline-quote cite, #component-guidelines .cg-footer cite { display: flex; align-items: center; gap: 18px; margin-left: auto; color: #5877a7; font-size: clamp(10px, .83vw, 17px); font-style: normal; line-height: 1.5; white-space: nowrap; }
#component-guidelines .cg-inline-quote cite::before, #component-guidelines .cg-footer cite::before { content: ""; width: clamp(22px, 2vw, 42px); border-top: 1px solid #7e9ecb; }
#component-guidelines .cg-action-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(13px, 1.1vw, 23px); margin-top: clamp(18px, 1.4vw, 30px); }
#component-guidelines .cg-action-grid li { min-width: 0; display: flex; flex-direction: column; padding: clamp(16px, 1.4vw, 29px); border: 1px solid #e3edf9; border-radius: 11px; background: #fff; }
#component-guidelines .cg-action-grid h4 { font-size: clamp(17px, 1.15vw, 24px); line-height: 1.5; font-weight: 700; }
#component-guidelines .cg-action-grid p { margin: 6px 0 0; color: #536d93; font-size: clamp(13px, .97vw, 20px); }
#component-guidelines .cg-action-grid strong { margin: clamp(15px, 1.2vw, 24px) 0 0; color: #1665d0; font-size: clamp(16px, 1.12vw, 24px); font-weight: 500; }
#component-guidelines .cg-action-grid li:nth-child(even) strong { color: #008d70; }
#component-guidelines .cg-action-grid a { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; margin-top: clamp(13px, 1vw, 20px); padding: 10px 14px; color: #1263d0; background: #eff6ff; border-radius: 7px; font-size: clamp(12px, .85vw, 18px); line-height: 1.5; text-decoration: none; transition: background-color .18s ease, color .18s ease; }
#component-guidelines .cg-action-grid li:nth-child(even) a { color: #007e64; background: #edf9f5; }
#component-guidelines .cg-action-grid a:hover { background: #dfecff; color: #074aa3; }
#component-guidelines .cg-action-grid li:nth-child(even) a:hover { background: #daf3e9; color: #005c49; }
#component-guidelines .cg-action-grid a:focus-visible { outline: 2px solid #247bff; outline-offset: 4px; }
#component-guidelines .cg-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(17px, 1.1vw, 24px); margin-top: clamp(18px, 1.4vw, 30px); }
#component-guidelines .cg-example { display: flex; gap: clamp(17px, 1.4vw, 30px); min-width: 0; padding: clamp(22px, 1.9vw, 40px); border: 1px solid #e3edf9; border-radius: 12px; background: #fff; }
#component-guidelines .cg-example > div { min-width: 0; }
#component-guidelines .cg-verdict { flex: 0 0 auto; display: grid; place-items: center; width: clamp(31px, 2.3vw, 48px); height: clamp(31px, 2.3vw, 48px); border-radius: 50%; background: #ff414b; color: white; font-size: clamp(23px, 1.6vw, 34px); line-height: 1; }
#component-guidelines .cg-example-positive .cg-verdict { background: #00b895; font-size: clamp(19px, 1.4vw, 30px); }
#component-guidelines .cg-example h4 { color: #d52b37; font-size: clamp(15px, 1.03vw, 22px); font-weight: 500; }
#component-guidelines .cg-example-positive h4 { color: #008a6e; }
#component-guidelines .cg-example p { margin: 10px 0 0; color: #536d93; font-size: clamp(13px, .93vw, 20px); line-height: 1.75; }
#component-guidelines .cg-example .cg-field { margin-top: 12px; color: #0c204d; font-size: clamp(15px, 1.08vw, 23px); overflow-wrap: anywhere; }
#component-guidelines .cg-field strong { display: inline-block; margin-left: .35em; }
#component-guidelines .cg-footer { margin-top: clamp(22px, 1.6vw, 34px); padding: clamp(23px, 1.6vw, 34px); }
#component-guidelines .cg-footer p { margin: 0; font-size: clamp(16px, 1.16vw, 25px); line-height: 1.65; }
@media (max-width: 1100px) {
  #component-guidelines .ds-panel-head { align-items: flex-start; flex-direction: column; gap: 5px; }
  #component-guidelines .ds-panel-head > p { text-align: left; font-size: 13px; }
  #component-guidelines .ds-aside { min-height: 220px; }
  #component-guidelines .cg-color-grid { gap: 9px; }
  #component-guidelines .cg-color { padding: 16px 11px; }
  #component-guidelines .cg-color p { font-size: 12px; }
  #component-guidelines .cg-evidence-flow { gap: 19px; padding: 20px 15px; }
  #component-guidelines .cg-evidence-flow > li:not(:last-child)::after { right: -19px; font-size: 20px; }
  #component-guidelines .cg-evidence-flow p { font-size: 11px; }
  #component-guidelines .cg-action-grid { gap: 10px; }
  #component-guidelines .cg-action-grid li { padding: 16px 12px; }
  #component-guidelines .cg-action-grid a { padding-inline: 10px; gap: 6px; }
  #component-guidelines .cg-inline-quote cite, #component-guidelines .cg-footer cite { white-space: normal; max-width: 220px; }
  #component-guidelines .cg-inline-quote cite::before, #component-guidelines .cg-footer cite::before { width: 22px; flex: 0 0 auto; }
  #component-guidelines .cg-example { padding: 20px 16px; gap: 14px; }
  #component-guidelines .cg-desktop-break { display: none; }
}
@media (max-width: 720px) {
  #component-guidelines .ds-aside { display: flex; align-items: center; justify-content: center; gap: 18px; min-height: 165px; }
  #component-guidelines .cg-handnote { margin: 0; font-size: clamp(17px, 4.2vw, 24px); flex: 0 1 auto; }
  #component-guidelines .cg-handnote::after { width: 105%; }
  #component-guidelines .cg-rules-art { width: 145px; flex: 0 0 145px; height: 148px; margin: 0; }
  #component-guidelines .cg-color-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #component-guidelines .cg-color { min-height: 170px; padding: 17px; }
  #component-guidelines .cg-color:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: 38px 1fr 1fr; align-items: center; gap: 3px 12px; min-height: auto; }
  #component-guidelines .cg-color:last-child .cg-swatch { grid-row: 1 / 3; margin: 0; }
  #component-guidelines .cg-color:last-child p { grid-column: 2 / -1; margin: 0; }
  #component-guidelines .cg-color h4, #component-guidelines .cg-color strong { font-size: 15px; }
  #component-guidelines .cg-color p { font-size: 12px; }
  #component-guidelines .cg-evidence-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 18px; padding: 20px 12px; }
  #component-guidelines .cg-evidence-flow > li { justify-content: flex-start; }
  #component-guidelines .cg-evidence-flow > li:nth-child(3)::after { display: none; }
  #component-guidelines .cg-evidence-flow .cg-assessment { justify-content: center; }
  #component-guidelines .cg-evidence-flow h4 { font-size: 13px; }
  #component-guidelines .cg-evidence-flow p { font-size: 11px; }
  #component-guidelines .cg-flow-icon { width: 43px; height: 43px; }
  #component-guidelines .cg-match-label { font-size: 10px; }
  #component-guidelines .cg-assessment strong { font-size: 21px; }
  #component-guidelines .cg-evidence-flow > li:not(:last-child)::after { right: -16px; top: 23px; font-size: 18px; }
  #component-guidelines .cg-inline-quote, #component-guidelines .cg-footer { flex-wrap: wrap; gap: 12px; padding: 19px 16px; }
  #component-guidelines .cg-inline-quote p, #component-guidelines .cg-footer p { flex: 1 1 calc(100% - 48px); font-size: 15px; }
  #component-guidelines .cg-inline-quote cite, #component-guidelines .cg-footer cite { max-width: none; font-size: 10px; margin-left: 40px; }
  #component-guidelines .cg-quote-mark { font-size: 55px; }
  #component-guidelines .cg-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #component-guidelines .cg-action-grid li { padding: 17px 14px; }
  #component-guidelines .cg-action-grid h4 { font-size: 17px; }
  #component-guidelines .cg-action-grid p { font-size: 13px; }
  #component-guidelines .cg-action-grid strong { font-size: 15px; }
  #component-guidelines .cg-action-grid a { font-size: 11px; }
  #component-guidelines .cg-comparison { grid-template-columns: 1fr; gap: 12px; }
  #component-guidelines .cg-example { padding: 21px 17px; }
  #component-guidelines .cg-example .cg-field { font-size: 15px; }
  #component-guidelines .cg-example p { font-size: 13px; }
}
@media (max-width: 390px) {
  #component-guidelines .ds-aside { gap: 5px; min-height: 145px; }
  #component-guidelines .cg-rules-art { flex-basis: 116px; width: 116px; height: 125px; }
  #component-guidelines .cg-handnote { font-size: 16px; }
  #component-guidelines .cg-action-grid { grid-template-columns: 1fr; }
  #component-guidelines .cg-action-grid li { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
  #component-guidelines .cg-action-grid li p { margin: 0; align-self: center; }
  #component-guidelines .cg-action-grid li strong { margin: 6px 0 0; }
  #component-guidelines .cg-action-grid li a { grid-column: 1 / -1; margin-top: 9px; font-size: 12px; }
  #component-guidelines .cg-evidence-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 25px; }
  #component-guidelines .cg-evidence-flow > li:nth-child(3)::after { display: block; }
  #component-guidelines .cg-evidence-flow > li:nth-child(even)::after { display: none; }
  #component-guidelines .cg-color:last-child { grid-template-columns: 34px 1fr; }
  #component-guidelines .cg-color:last-child strong { grid-column: 2; }
  #component-guidelines .cg-color:last-child .cg-swatch { grid-row: 1 / 4; }
  #component-guidelines .cg-example { gap: 11px; padding: 17px 12px; }
  #component-guidelines .cg-example .cg-field { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  #component-guidelines .cg-action-grid a { transition: none; }
}


/* Chapter 17: an inspectable product prototype, using local fixture data only. */
#interactive-prototype .ip-symbols { position:absolute; width:0; height:0; overflow:hidden; }
#interactive-prototype svg:not(.ip-symbols):not(.ip-handnote svg) { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
#interactive-prototype .ip-header { margin-bottom:clamp(28px,2.7vw,54px); }
#interactive-prototype .ip-handnote { align-self:start; width:92%; padding-top:1.6vw; min-height:0; color:#5478b5; font-family:KaiTi,STKaiti,"楷体",serif; font-size:clamp(19px,1.5vw,31px); line-height:1.8; letter-spacing:.12em; transform:rotate(-7deg); }
#interactive-prototype .ip-handnote svg { width:90%; height:5.8vw; min-height:55px; margin-top:12px; overflow:visible; }
#interactive-prototype button { cursor:pointer; }
#interactive-prototype button,#interactive-prototype input,#interactive-prototype select,#interactive-prototype textarea { font:inherit; }
#interactive-prototype button { min-height:44px; }
#interactive-prototype button:hover { filter:brightness(.98); }
#interactive-prototype button:focus-visible,#interactive-prototype input:focus-visible,#interactive-prototype select:focus-visible,#interactive-prototype textarea:focus-visible,#interactive-prototype .ip-table-scroll:focus-visible { outline:2px solid #1670ff; outline-offset:3px; }
#interactive-prototype .ip-app { border:1px solid #dce8f8; border-radius:16px; background:#ffffffdf; overflow:hidden; box-shadow:0 14px 45px #9db4d70d; }
#interactive-prototype .ip-browser { display:flex; align-items:center; gap:20px; min-height:48px; padding:10px 24px; background:linear-gradient(100deg,#eef4f8,#f5f9ff); border-bottom:1px solid #e0eaf7; font-size:12px; color:#536d93; }
#interactive-prototype .ip-browser-dots { display:flex; gap:8px; }
#interactive-prototype .ip-browser-dots i { width:10px; height:10px; border-radius:50%; background:#ff6863; }
#interactive-prototype .ip-browser-dots i:nth-child(2) { background:#ffc950; }
#interactive-prototype .ip-browser-dots i:nth-child(3) { background:#32c891; }
#interactive-prototype .ip-browser-name { letter-spacing:.02em; }
#interactive-prototype .ip-browser-local { margin-left:auto; color:#536d93; font-size:11px; }
#interactive-prototype .ip-app-body { display:grid; grid-template-columns:16% minmax(0,1fr); }
#interactive-prototype .ip-sidebar { padding:25px 0; border-right:1px solid #e1eafa; background:linear-gradient(115deg,#fafcff,#f0f6fd); }
#interactive-prototype .ip-brand { display:flex; align-items:center; gap:10px; padding:0 18px 24px; font-size:clamp(14px,1.12vw,23px); font-weight:700; white-space:nowrap; }
#interactive-prototype .ip-brand > span { display:grid; place-items:center; width:24px; height:28px; border:2px solid #1670ff; border-radius:7px; color:#1670ff; font-size:16px; }
#interactive-prototype .ip-sidebar button { display:flex; align-items:center; width:calc(100% - 10px); gap:16px; padding:12px 20px; border:0; border-left:2px solid transparent; border-radius:0 8px 8px 0; background:transparent; color:#48628e; text-align:left; font-size:clamp(13px,1.02vw,20px); }
#interactive-prototype .ip-sidebar svg { width:20px; height:20px; }
#interactive-prototype .ip-sidebar .ip-nav-active { background:#e5f2ff; border-left-color:#1e74ff; color:#0964ff; font-weight:500; }
#interactive-prototype .ip-sidebar > p { margin:30px 20px 0; font-size:12px; color:#536d93; line-height:1.8; }
#interactive-prototype .ip-workspace { padding:clamp(20px,2.15vw,42px); min-width:0; }
#interactive-prototype .ip-app-toolbar { display:flex; align-items:center; gap:18px; margin-bottom:20px; }
#interactive-prototype .ip-app-toolbar h3 { font-size:clamp(22px,1.75vw,34px); font-weight:700; line-height:1.4; margin-right:auto; }
#interactive-prototype .ip-search { display:flex; align-items:center; gap:10px; width:45%; min-height:44px; padding:8px 12px; border:1px solid #dce7f7; border-radius:8px; background:#fff; color:#536d93; }
#interactive-prototype .ip-search svg { width:18px; height:18px; }
#interactive-prototype .ip-search input { width:100%; min-width:0; border:0; outline:0; color:#1b3158; background:transparent; font-size:clamp(11px,.83vw,16px); }
#interactive-prototype .ip-search:focus-within { outline:2px solid #1670ff; outline-offset:2px; }
#interactive-prototype .ip-search input::placeholder { color:#536d93; opacity:1; }
#interactive-prototype .ip-new-task { padding:8px 20px; border:1px solid #1c3456; border-radius:7px; background:#203957; color:white; white-space:nowrap; font-size:clamp(12px,.93vw,18px); line-height:1.5; }
#interactive-prototype .ip-filters { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:21px; }
#interactive-prototype .ip-filters button { padding:7px 14px; border:1px solid #e0e9f7; border-radius:7px; background:#fff; color:#536d93; font-size:clamp(12px,.85vw,17px); line-height:1.5; }
#interactive-prototype .ip-filters .is-active { border-color:#79aaff; color:#1168ff; background:#f7fbff; }
#interactive-prototype .ip-table-scroll { overflow-x:auto; border:1px solid #e0e9f7; border-radius:10px; }
#interactive-prototype .ip-table { width:100%; border-collapse:collapse; min-width:780px; text-align:left; font-size:clamp(11px,.85vw,17px); line-height:1.6; }
#interactive-prototype .ip-table th { padding:13px 12px; font-weight:400; color:#536d93; background:#f9fbff; white-space:nowrap; }
#interactive-prototype .ip-table td { padding:12px; border-top:1px solid #edf2fa; color:#536d93; white-space:nowrap; }
#interactive-prototype .ip-table th:first-child,#interactive-prototype .ip-table td:first-child { padding-left:18px; }
#interactive-prototype .ip-table td:nth-child(5) { color:#253958; }
#interactive-prototype .ip-company { display:flex; align-items:center; gap:11px; padding:0; border:0; background:none; font-weight:500; color:#14284c; text-align:left; }
#interactive-prototype .ip-company:hover { color:#0864fb; }
#interactive-prototype .ip-company > span { display:grid; place-items:center; width:26px; height:27px; flex-shrink:0; border-radius:6px; background:linear-gradient(140deg,#12213d,#3a4d6e); box-shadow:0 3px 6px #24355720; color:#fff; font-size:13px; }
#interactive-prototype .ip-company > .ip-logo-blue { background:#3079ff; }
#interactive-prototype .ip-match { color:#008267; font-size:.93em; }
#interactive-prototype .ip-match-potential { color:#236fda; }
#interactive-prototype .ip-match-unknown { color:#718099; }
#interactive-prototype .ip-badge { display:inline-block; padding:3px 9px; border-radius:6px; font-size:.9em; white-space:nowrap; }
#interactive-prototype .ip-green { color:#007e66; background:#e0f8ef; }
#interactive-prototype .ip-blue { color:#156aea; background:#e9f3ff; }
#interactive-prototype .ip-amber { color:#95600e; background:#fff5dc; }
#interactive-prototype .ip-gray { color:#61728d; background:#edf1f5; }
#interactive-prototype .ip-empty { padding:28px 18px; color:#597398; font-size:14px; }
#interactive-prototype .ip-table-foot { display:flex; justify-content:space-between; gap:12px; margin-top:12px; color:#536d93; font-size:11px; }
#interactive-prototype .ip-scroll-hint { display:none; }
#interactive-prototype .ip-demo-note { margin:0; border-top:1px solid #e3ecf8; padding:10px 22px; background:#f7fbff; color:#5c769b; text-align:right; font-size:12px; line-height:1.7; }
#interactive-prototype .ip-journey { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; padding:25px 20px; margin:20px 0; border:1px solid #e1eaf8; border-radius:14px; background:#ffffffd9; list-style:none; }
#interactive-prototype .ip-journey li { position:relative; display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center; font-size:clamp(13px,1.05vw,21px); color:#4a6390; }
#interactive-prototype .ip-journey li:not(:last-child)::after { content:'→'; position:absolute; color:#94b7fc; right:-15px; top:15px; font-size:24px; }
#interactive-prototype .ip-journey li > span { display:grid; place-items:center; width:clamp(42px,3.5vw,64px); height:clamp(42px,3.5vw,64px); border-radius:50%; background:#edf5ff; color:#136dff; font-size:clamp(14px,1.03vw,20px); }
#interactive-prototype .ip-journey strong { font-weight:500; }
#interactive-prototype .ip-journey .is-current > span { color:white; background:#1975ff; box-shadow:0 5px 12px #2079ff24; }
#interactive-prototype .ip-journey .is-current strong { color:#116aff; }
#interactive-prototype .ip-journey .is-done > span { background:#e5f8f2; color:#008c72; }
#interactive-prototype .ip-entry-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-bottom:20px; }
#interactive-prototype .ip-entry-grid article { padding:clamp(20px,1.7vw,34px); border:1px solid #e1eaf8; border-radius:14px; background:#ffffffdc; }
#interactive-prototype .ip-entry-icon { display:grid; place-items:center; width:58px; height:58px; margin-bottom:15px; border-radius:13px; background:#edf5ff; color:#116bff; }
#interactive-prototype .ip-entry-icon svg { width:33px; height:33px; }
#interactive-prototype .ip-entry-grid h3 { font-size:clamp(19px,1.5vw,29px); line-height:1.5; font-weight:700; }
#interactive-prototype .ip-entry-grid p { font-size:clamp(14px,1.08vw,21px); color:#617aa2; margin:6px 0 22px; }
#interactive-prototype .ip-entry-grid button { display:flex; width:100%; justify-content:center; align-items:center; gap:10px; padding:10px 14px; border:1px solid #e7effb; border-radius:8px; background:#f0f7ff; color:#0666ff; font-size:clamp(15px,1.1vw,22px); }
#interactive-prototype .ip-entry-grid button:hover { background:#e5f0ff; }
#interactive-prototype .ip-try h3 { font-size:clamp(18px,1.25vw,25px); font-weight:700; line-height:1.5; margin-bottom:20px; }
#interactive-prototype .ip-chips { display:flex; flex-wrap:wrap; gap:13px; }
#interactive-prototype .ip-chips button { display:flex; align-items:center; justify-content:center; gap:13px; padding:12px 20px; border:1px solid #e9f0fb; border-radius:9px; background:#f4f8ff; color:#182d53; font-size:clamp(14px,1.02vw,20px); line-height:1.6; }
#interactive-prototype .ip-chips svg { color:#116cff; }
#interactive-prototype .ip-footer { display:flex; align-items:center; gap:24px; margin-top:20px; padding:24px 30px; border:0; border-radius:14px; background:linear-gradient(120deg,#edf5ff,#f4f9ff); }
#interactive-prototype .ip-quote { font-family:Georgia,serif; color:#9cbffc; font-size:80px; line-height:.9; font-weight:700; }
#interactive-prototype .ip-footer p { color:#16315c; font-size:clamp(16px,1.12vw,23px); line-height:1.7; }
#interactive-prototype .ip-footer p > span { color:#547098; font-size:.9em; }
#interactive-prototype .ip-footer small { color:#536d93; font-size:clamp(11px,.84vw,16px); letter-spacing:.09em; white-space:nowrap; margin-left:auto; }
#interactive-prototype .ip-footer small::before { content:'—'; margin-right:18px; }
#interactive-prototype .ip-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
#interactive-prototype [hidden] { display:none!important; }
/* The modal uses the top layer, so section clipping cannot hide it. */
#interactive-prototype .ip-dialog { width:min(800px,calc(100% - 40px)); max-height:calc(100dvh - 48px); padding:28px; border:1px solid #d6e4f6; border-radius:18px; background:#f9fcff; color:#173052; box-shadow:0 24px 100px #102a5733; font-family:inherit; font-size:15px; line-height:1.7; overflow:auto; }
#interactive-prototype .ip-dialog::backdrop { background:#10213e70; backdrop-filter:blur(5px); }
#interactive-prototype .ip-dialog-head { display:flex; align-items:start; justify-content:space-between; gap:15px; }
#interactive-prototype .ip-dialog-head p { color:#477fbf; font-size:11px; letter-spacing:.09em; }
#interactive-prototype .ip-dialog-head h3 { margin-top:5px; font-size:26px; font-weight:700; line-height:1.5; }
#interactive-prototype .ip-dialog-close { width:44px; border:1px solid #e0e9f6; border-radius:50%; background:#fff; color:#45658e; font-size:26px; line-height:1; flex-shrink:0; }
#interactive-prototype .ip-dialog-note { margin:15px 0; padding:10px 12px; border-radius:8px; color:#627a9b; background:#eef5ff; font-size:12px; }
#interactive-prototype .ip-dialog-progress { display:flex; gap:5px; margin:18px 0 24px; }
#interactive-prototype .ip-dialog-progress > span { height:4px; flex:1; background:#e0e9f5; border-radius:4px; }
#interactive-prototype .ip-dialog-progress > span.is-current { background:#1d77ff; }
#interactive-prototype .ip-dialog-progress > span.is-done { background:#47bba7; }
#interactive-prototype .ip-dialog .ip-step-kicker { font-size:12px; color:#4c7bbb; margin-bottom:6px; }
#interactive-prototype .ip-dialog h4 { font-size:19px; font-weight:700; line-height:1.6; }
#interactive-prototype .ip-dialog .ip-step-copy { margin-top:6px; color:#61799a; font-size:14px; }
#interactive-prototype .ip-dialog label { display:block; font-size:13px; font-weight:500; color:#3c587e; margin:16px 0 6px; }
#interactive-prototype .ip-dialog input,#interactive-prototype .ip-dialog select,#interactive-prototype .ip-dialog textarea { display:block; width:100%; min-height:44px; border:1px solid #d2e0f1; background:#fff; border-radius:8px; padding:10px 12px; color:#173052; font-size:14px; line-height:1.6; }
#interactive-prototype .ip-dialog textarea { min-height:132px; resize:vertical; }
#interactive-prototype .ip-dialog .ip-form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
#interactive-prototype .ip-modal-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; margin-top:24px; }
#interactive-prototype .ip-modal-actions button { border:1px solid #d3e2f5; border-radius:8px; background:#fff; color:#3a618c; padding:9px 16px; line-height:1.6; }
#interactive-prototype .ip-modal-actions button.ip-primary { background:#1766d9; border-color:#1766d9; color:#fff; }
#interactive-prototype .ip-modal-actions button.ip-approve { background:#008267; border-color:#008267; color:#fff; }
#interactive-prototype .ip-evidence-list { display:grid; gap:10px; margin-top:18px; }
#interactive-prototype .ip-evidence-list > li { padding:14px 16px; border:1px solid #e0e9f6; border-radius:10px; background:#fff; }
#interactive-prototype .ip-evidence-list strong { display:block; color:#1e426f; font-size:14px; }
#interactive-prototype .ip-evidence-list p { font-size:13px; color:#617a9c; margin-top:5px; }
#interactive-prototype .ip-modal-callout { margin-top:18px; padding:13px 16px; background:#edf6ff; border-left:3px solid #79aaff; color:#47678f; font-size:13px; }
#interactive-prototype .ip-modal-success { background:#e9f8f3; border-left-color:#37b99c; color:#187c68; }
#interactive-prototype .ip-draft-hint { margin-top:7px; color:#6f82a0; font-size:12px; }
#interactive-prototype .ip-history { list-style:none; padding-left:18px; margin-top:20px; border-left:1px solid #cbdcf1; }
#interactive-prototype .ip-history li { position:relative; padding:0 0 16px 8px; color:#4f6c90; font-size:13px; }
#interactive-prototype .ip-history li::before { content:''; position:absolute; left:-23px; top:7px; width:8px; height:8px; border-radius:50%; background:#5195fc; }
#interactive-prototype .ip-history strong { display:block; color:#274e7c; font-size:14px; }
#interactive-prototype .ip-dialog .ip-feedback { min-height:24px; color:#087862; font-size:13px; margin-top:12px; }
@media(max-width:1100px) {
  #interactive-prototype .ip-app-body { grid-template-columns:132px minmax(0,1fr); }
  #interactive-prototype .ip-sidebar button { padding-inline:15px; gap:12px; }
  #interactive-prototype .ip-brand { padding-inline:14px; font-size:14px; gap:8px; }
  #interactive-prototype .ip-workspace { padding:20px; }
  #interactive-prototype .ip-table { font-size:12px; }
  #interactive-prototype .ip-scroll-hint { display:inline; }
  #interactive-prototype .ip-entry-grid { gap:14px; }
  #interactive-prototype .ip-chips { gap:10px; }
  #interactive-prototype .ip-chips button { padding:10px 14px; }
  #interactive-prototype .ip-demo-note { font-size:11px; }
}
@media(max-width:720px) {
  #interactive-prototype .ip-handnote { display:none; }
  #interactive-prototype .ip-browser { padding:10px 14px; gap:12px; }
  #interactive-prototype .ip-browser-name { font-size:10px; }
  #interactive-prototype .ip-browser-local { display:none; }
  #interactive-prototype .ip-app-body { display:block; }
  #interactive-prototype .ip-sidebar { display:flex; align-items:center; padding:8px; gap:3px; border-right:0; border-bottom:1px solid #e1eafa; overflow-x:auto; }
  #interactive-prototype .ip-brand,#interactive-prototype .ip-sidebar > p { display:none; }
  #interactive-prototype .ip-sidebar button { justify-content:center; width:auto; flex:1; min-width:52px; gap:6px; padding:8px 5px; border-left:0; border-radius:6px; font-size:11px; }
  #interactive-prototype .ip-sidebar svg { width:16px; height:16px; }
  #interactive-prototype .ip-workspace { padding:18px 14px; }
  #interactive-prototype .ip-app-toolbar { flex-wrap:wrap; gap:12px; }
  #interactive-prototype .ip-app-toolbar h3 { font-size:22px; }
  #interactive-prototype .ip-search { order:3; width:100%; }
  #interactive-prototype .ip-search input { font-size:13px; }
  #interactive-prototype .ip-new-task { font-size:13px; padding-inline:14px; }
  #interactive-prototype .ip-filters { gap:6px; }
  #interactive-prototype .ip-filters button { font-size:11px; padding:6px 9px; }
  #interactive-prototype .ip-table th,#interactive-prototype .ip-table td { padding-block:10px; }
  #interactive-prototype .ip-table-foot { flex-wrap:wrap; font-size:10px; }
  #interactive-prototype .ip-demo-note { text-align:left; padding:10px 14px; }
  #interactive-prototype .ip-journey { grid-template-columns:repeat(3,minmax(0,1fr)); padding:20px 12px; gap:22px 10px; }
  #interactive-prototype .ip-journey li { font-size:13px; gap:8px; }
  #interactive-prototype .ip-journey li:nth-child(3)::after { display:none; }
  #interactive-prototype .ip-journey li:not(:last-child)::after { right:-10px; top:9px; }
  #interactive-prototype .ip-entry-grid { grid-template-columns:1fr; gap:12px; }
  #interactive-prototype .ip-entry-grid article { display:grid; grid-template-columns:48px minmax(0,1fr); align-items:center; gap:0 16px; padding:18px; }
  #interactive-prototype .ip-entry-icon { grid-column:1; grid-row:1/3; width:48px; height:48px; margin:0; }
  #interactive-prototype .ip-entry-icon svg { width:27px; height:27px; }
  #interactive-prototype .ip-entry-grid h3 { font-size:18px; }
  #interactive-prototype .ip-entry-grid p { grid-column:2; margin:3px 0 0; font-size:12px; }
  #interactive-prototype .ip-entry-grid button { grid-column:1/-1; margin-top:16px; font-size:14px; }
  #interactive-prototype .ip-try h3 { font-size:17px; margin-bottom:16px; }
  #interactive-prototype .ip-chips { gap:8px; }
  #interactive-prototype .ip-chips button { justify-content:flex-start; flex:1 1 44%; gap:8px; font-size:12px; padding:10px; }
  #interactive-prototype .ip-chips svg { width:18px; height:18px; }
  #interactive-prototype .ip-footer { flex-direction:row; flex-wrap:wrap; padding:20px; gap:12px; }
  #interactive-prototype .ip-quote { font-size:56px; }
  #interactive-prototype .ip-footer p { flex:1; font-size:14px; }
  #interactive-prototype .ip-footer small { width:100%; font-size:10px; text-align:right; }
  #interactive-prototype .ip-dialog { width:calc(100% - 24px); max-height:calc(100dvh - 24px); padding:20px; border-radius:14px; }
  #interactive-prototype .ip-dialog-head h3 { font-size:22px; }
  #interactive-prototype .ip-dialog-head p { font-size:9px; }
  #interactive-prototype .ip-dialog .ip-form-row { grid-template-columns:1fr; gap:0; }
  #interactive-prototype .ip-modal-actions button { flex:1 1 auto; font-size:13px; }
}
@media(prefers-reduced-motion:reduce) { #interactive-prototype * { scroll-behavior:auto; } }