.cell-device{display:grid;align-content:center;padding:30px 50px 50px 30px;overflow:hidden}
.stage{position:relative;min-width:0}
.plate{position:absolute;top:24px;left:24px;right:-26px;bottom:-26px;border:1px solid var(--border);border-radius:var(--radius);background-color:var(--bg-panel);color:var(--text);background-image:linear-gradient(var(--grid-line) 1px,var(--clear) 1px),linear-gradient(90deg,var(--grid-line) 1px,var(--clear) 1px);background-size:16px 16px;background-position:-1px -1px}
.win{position:relative;min-width:0;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-window);overflow:hidden}
.win-chrome{display:flex;align-items:center;gap:16px;min-height:40px;padding:8px 14px;border-bottom:1px solid var(--border)}
.win-dots{display:flex;gap:7px;flex-shrink:0}
.win-dots i{width:10px;height:10px;border-radius:var(--radius-round);background:var(--chrome-dot);color:var(--text);flex-shrink:0}
.win-title{font-family:var(--font-mono);font-size:12px;color:var(--text-muted);overflow-wrap:anywhere}
.win-tabs{display:flex;flex-wrap:wrap;gap:6px;padding:11px 14px;border-bottom:1px solid var(--border)}
.seg{display:inline-flex;align-items:center;justify-content:center;min-height:24px;padding:2px 12px;border:1px solid var(--border);border-radius:var(--radius-pill);font-size:12px;color:var(--text-muted)}
.seg.is-on{border-color:var(--text);color:var(--text)}
.win-scroll{max-width:100%;overflow-x:auto}
.win-body{position:relative;font-family:var(--font-mono);font-size:12px}
.rt-row{display:grid;grid-template-columns:112px minmax(0,1fr) 62px 36px 120px;align-items:center;height:44px;padding-left:16px;box-shadow:inset 0 -1px 0 var(--border);color:var(--text);white-space:nowrap}
.rt-row:last-of-type{box-shadow:none}
.rt-head{height:34px;background:var(--bg-panel);color:var(--text-muted);font-family:var(--font-body);font-size:11.5px;letter-spacing:.02em}
.rt-row.is-sel{background:var(--bg-panel-2);color:var(--text)}
.rt-match{display:flex;align-items:center;gap:7px;min-width:0}
.rt-empty{font-family:var(--font-body);font-size:11.5px;color:var(--text-muted)}
.flag{display:inline-flex;align-items:center;min-height:18px;padding:0 6px;border:1px solid var(--border);border-radius:var(--radius-xs);background:var(--bg-panel-2);color:var(--text-muted);font-style:normal;font-size:10px}
.chk{display:inline-grid;place-items:center;width:14px;height:14px;border:1px solid var(--accent-dark);border-radius:var(--radius-xs);background:var(--accent);color:var(--on-accent)}
.chk svg{width:10px;height:10px}
.chk path{fill:none;stroke:var(--on-accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.lane{position:absolute;top:0;right:0;width:120px;height:254px;pointer-events:none}
.lane-line{fill:none;stroke:var(--dash);stroke-width:1;stroke-dasharray:3 3}
.lane-node{fill:var(--surface);stroke:var(--border-strong);stroke-width:1}
.lane-text{font-family:var(--font-mono);font-size:10.5px;fill:var(--text)}
.lane-dot-accent{fill:var(--accent)}
.lane-dot-ink{fill:var(--text)}
.win-foot{display:flex;align-items:center;gap:20px;min-height:50px;padding:10px 16px;border-top:1px solid var(--border);background:var(--bg-panel);color:var(--text);font-size:12px}
.set{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.set-group{display:flex;gap:20px;margin-left:auto}
.sel{display:inline-flex;align-items:center;gap:5px;min-height:22px;padding:0 8px 0 10px;border:1px solid var(--border-strong);border-radius:var(--radius-pill);background:var(--surface);color:var(--text);font-size:11.5px}
.tg{position:relative;width:28px;height:16px;flex-shrink:0;border:1px solid var(--border-strong);border-radius:var(--radius-pill);background:var(--surface);color:var(--text)}
.tg .knob{position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:var(--radius-round);background:var(--border-strong);color:var(--text)}
.tg.is-on{background:var(--accent);color:var(--text);border-color:var(--accent-dark)}
.tg.is-on .knob{left:14px;background:var(--on-accent);color:var(--text);box-shadow:var(--shadow-knob)}
.tabs{min-width:0}
[role="tablist"]{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:28px;min-width:0}
[role="tab"]{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:9px 24px;border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--bg);color:var(--text-muted);font-size:14px}
[role="tab"]:hover{border-color:var(--border-strong);color:var(--text)}
[role="tab"][aria-selected="true"]{border-color:var(--text);background:var(--bg);color:var(--text)}
[role="tabpanel"]{min-width:0}
[role="tabpanel"]:focus-visible{outline-offset:6px}
.editor-demo{margin-top:64px}
.editor-demo h2{margin-bottom:32px}
.editor-demo h2 span{display:block}
.editor-content{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.editor-content>*{min-width:0}
.editor-content pre{border:0;border-radius:0;margin:0;background:var(--surface);color:var(--text);padding:28px}
.field-notes{padding:28px;border-left:1px solid var(--border);background:var(--bg-panel);color:var(--text)}
.field-notes dt{font-family:var(--font-mono);font-size:13px}
.field-notes dd{margin:7px 0 20px;color:var(--text-muted);font-size:13px}
.toc{position:sticky;top:16px;z-index:10;display:flex;flex-wrap:wrap;gap:8px;padding:12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);color:var(--text);margin-bottom:40px;max-width:100%}
.toc a{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:6px 12px;border:1px solid var(--border);border-radius:var(--radius-pill);font-size:13px}
.toc a:hover{background:var(--bg-panel-2);color:var(--text)}
.faq-item{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);margin-top:12px;min-width:0}
.faq-item summary{position:relative;cursor:pointer;list-style:none;padding:20px 52px 20px 22px;font-size:16px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:22px;top:20px;color:var(--text-muted)}
.faq-item[open] summary::after{content:"−"}
.faq-answer{padding:0 22px 22px;color:var(--text-muted);line-height:1.8}
.term-card dt{font-family:var(--font-display);font-size:21px;margin-bottom:8px}
.term-card dd{margin:0;color:var(--text-muted);line-height:1.8}
.term-key{font-family:var(--font-mono);font-size:12px;color:var(--text-muted)}
.badge-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.badge,.chip{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:26px;max-width:100%;padding:3px 10px;border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--bg-panel);color:var(--text-muted);font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.badge-first{border-color:var(--text);background:var(--bg-panel-2);color:var(--text)}
.badge-recommended{border-color:var(--border-strong);background:var(--bg-panel);color:var(--text)}
.badge-archived{border-style:dashed;background:var(--bg-panel-2);color:var(--text-muted)}
.client-card{display:flex;flex-direction:column;gap:20px}
.client-top{display:flex;align-items:center;gap:14px}
.client-top>div{min-width:0}
.client-icon{width:56px;height:56px;flex-shrink:0}
.client-top h3{margin-bottom:8px}
.client-card p{margin:0;color:var(--text-muted)}
.client-meta{display:flex;flex-wrap:wrap;gap:8px 16px;color:var(--text-muted);font-family:var(--font-mono);font-size:12px}
[data-version]:empty{display:none}
.client-card .actions{margin-top:auto}
.post-card{display:flex;flex-direction:column;gap:16px}
.post-meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px;color:var(--text-muted);font-size:12px}
.post-card p{margin:0;line-height:1.8}
.post-card h3 a:hover{text-decoration:underline;text-underline-offset:5px}
.post-link{margin-top:auto;font-size:13px}
.callout{margin-block:26px;padding:22px 24px;border:1px solid var(--border);border-left:3px solid var(--text);border-radius:var(--radius);background:var(--bg-panel);color:var(--text)}
.callout p{color:var(--text-muted);margin-top:8px}
.callout-warning{border-left-color:var(--warn)}
.table-wrap{max-width:100%;min-width:0;overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);-webkit-overflow-scrolling:touch}
.data-table{width:100%;border-collapse:collapse;text-align:left;background:var(--surface);color:var(--text);font-size:14px}
.data-table th,.data-table td,.prose table th,.prose table td,.article-body table th,.article-body table td{min-width:7em;padding:14px 18px;border-bottom:1px solid var(--border);overflow-wrap:normal;word-break:normal;vertical-align:top}
.data-table th,.prose table th,.article-body table th{font-weight:var(--weight-medium);background:var(--bg-panel);color:var(--text)}
.data-table tr:last-child td{border-bottom:0}
.data-table code,.prose table code,.article-body table code{overflow-wrap:anywhere;white-space:normal}
.prose table,.article-body table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;min-width:0;border-collapse:collapse;background:var(--surface);color:var(--text);text-align:left}
.dl-fab{position:fixed;right:24px;bottom:24px;z-index:20;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;max-width:calc(100% - 36px);padding:12px 18px;border:1px solid var(--border-strong);border-radius:var(--radius);background:var(--surface);color:var(--text);font-size:14px}
.dl-fab svg{width:20px;height:20px}
.dl-fab:hover{border-color:var(--text)}
.article-download{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:48px;padding:28px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-panel);color:var(--text)}
.article-download>div{min-width:0}
.article-download p{margin-top:8px;color:var(--text-muted)}
.feature-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.feature-card{display:flex;flex-direction:column;min-width:0;padding:26px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);color:var(--text);transition:border-color var(--speed) ease}
.feature-card:first-child{grid-column:span 2}
.feature-card:hover{border-color:var(--border-strong)}
.feature-card h3{font-size:18px;letter-spacing:-.01em}
.feature-icon{display:inline-block;width:17px;height:17px;vertical-align:-2px;margin-right:8px}
.feature-card p{margin-top:18px;margin-bottom:24px;color:var(--text-muted);font-size:13px;line-height:1.85}
.tech-diagram{width:100%;height:150px;margin-top:auto;color:var(--text-muted)}
.tech-diagram path,.tech-diagram rect,.tech-diagram circle,.tech-diagram line{fill:none;stroke:currentColor;stroke-width:1}
.tech-diagram text{fill:var(--text);font-family:var(--font-mono);font-size:11px}
.tech-diagram .diagram-dash{stroke-dasharray:3 4}
.tech-diagram .diagram-panel{fill:var(--bg-panel);stroke:var(--border-strong)}
.spec-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.swatch{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;min-width:0;background:var(--surface);color:var(--text)}
.swatch-sample{height:64px;border-bottom:1px solid var(--border)}
.swatch code{display:block;padding:12px;font-size:12px}
.sw-bg{background:var(--bg);color:var(--text)}
.sw-panel{background:var(--bg-panel);color:var(--text)}
.sw-panel2{background:var(--bg-panel-2);color:var(--text)}
.sw-surface{background:var(--surface);color:var(--text)}
.sw-border{background:var(--border);color:var(--text)}
.sw-border-strong{background:var(--border-strong);color:var(--text)}
.sw-accent{background:var(--accent);color:var(--text)}
.sw-accent-hover{background:var(--accent-hover);color:var(--text)}
.sw-accent-dark{background:var(--accent-dark);color:var(--on-accent)}
.sw-accent-ring{background:var(--accent-ring);color:var(--text)}
.sw-text{background:var(--text);color:var(--surface)}
.sw-muted{background:var(--text-muted);color:var(--surface)}
.sw-faint{background:var(--text-faint);color:var(--text)}
.sw-dash{background:var(--dash);color:var(--text)}
.sw-grid{background:var(--grid-line);color:var(--text)}
.sw-dot{background:var(--chrome-dot);color:var(--text)}
.sw-on{background:var(--on-accent);color:var(--text)}
.sw-success{background:var(--success);color:var(--surface)}
.sw-warn{background:var(--warn);color:var(--text)}
.sw-error{background:var(--error);color:var(--surface)}
.sw-clear{background:var(--clear);color:var(--text)}
.sw-veil{background:var(--veil);color:var(--text)}
.preview-stack>*+*{margin-top:28px}
.preview-type{font-size:clamp(24px,3vw,36px);font-weight:var(--weight-display);font-family:var(--font-display);line-height:1.25;letter-spacing:-.02em}
.preview-static-head .main-nav{display:block}
@media(min-width:1101px){
  .cell-device .win-body{font-size:10px}
  .cell-device .rt-row{grid-template-columns:100px minmax(0,1fr) 48px 26px 95px;padding-left:12px}
  .cell-device .lane{width:95px}
  .cell-device .rt-match{gap:3px;font-size:9px}
  .cell-device .flag{padding-inline:3px;font-size:8px}
  .cell-device .win-foot{gap:10px;font-size:11px;padding-inline:12px}
  .cell-device .set-group{gap:10px}
}
@media(max-width:1100px){
  .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .preview-static-head .main-nav{overflow-x:auto}
  .preview-static-head .head-row{gap:16px}
}
@media(max-width:768px){
  .editor-content{grid-template-columns:minmax(0,1fr)}
  .field-notes{border-left:0;border-top:1px solid var(--border)}
  .spec-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .cell-device{padding:20px 34px 34px 18px}
  .win-body{min-width:460px;font-size:10px}
  .lane,.rt-lane{display:none}
  .rt-row{grid-template-columns:110px minmax(0,1fr) 60px 28px;padding-left:12px}
  .rt-match{font-size:10px}
  .win-foot{flex-wrap:wrap;min-height:0;padding:10px 12px;gap:10px 16px}
  .set-group{margin-left:0;flex-wrap:wrap;gap:10px}
  .feature-grid{grid-template-columns:minmax(0,1fr)}
  .feature-card:first-child{grid-column:auto}
  .article-download{flex-direction:column;align-items:flex-start}
  .toc{position:static}
  .dl-fab{right:18px;bottom:18px}
  [role="tab"]{padding-inline:16px}
  .preview-static-head .main-nav{display:none}
  .preview-static-head .lang{margin-left:auto}
}