.stage {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: radial-gradient(70% 60% at 88% 8%, var(--panel-glow) 0%, var(--clear) 70%), linear-gradient(168deg, var(--panel-2) 0%, var(--panel-mid) 58%, var(--panel) 100%);
  color: var(--text);
}
.stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--grid-line) 1px, var(--clear) 1px), linear-gradient(90deg, var(--grid-line) 1px, var(--clear) 1px);
  background-size: 44px 44px;
  background-position: -1px -1px;
  mask-image: radial-gradient(78% 72% at 55% 50%, var(--mask) 0%, var(--clear) 100%);
}
.stage__caption { position: absolute; top: 18px; left: 36px; display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--text-muted); text-transform: uppercase; }
.stage__caption::before { content: ""; width: 6px; height: 6px; flex-shrink: 0; border-radius: var(--radius-chip); background: var(--accent); color: var(--text); }
.mark { position: absolute; width: 12px; height: 12px; border: 0 solid var(--text-dim); opacity: 0.7; }
.mark--tl { top: 14px; left: 14px; border-top-width: 1px; border-left-width: 1px; }
.mark--tr { top: 14px; right: 14px; border-top-width: 1px; border-right-width: 1px; }
.mark--bl { bottom: 14px; left: 14px; border-bottom-width: 1px; border-left-width: 1px; }
.mark--br { bottom: 14px; right: 14px; border-bottom-width: 1px; border-right-width: 1px; }
.stage__rig { position: absolute; inset: 44px 12px 20px; }
.stage__rig svg { display: block; width: 100%; height: 100%; }
.s-bt-a { stop-color: var(--beam-top-a); }
.s-bt-b { stop-color: var(--beam-top-b); }
.s-bf-a { stop-color: var(--violet); }
.s-bf-b { stop-color: var(--violet-2); }
.s-disc-a { stop-color: var(--accent); }
.s-disc-b { stop-color: var(--sky); }
.s-glass-a { stop-color: var(--glass-a); }
.s-glass-b { stop-color: var(--glass-b); }
.s-hex-a { stop-color: var(--coral-2); }
.s-hex-b { stop-color: var(--coral); }
.s-gnd-a { stop-color: var(--accent); stop-opacity: 0.16; }
.s-gnd-b { stop-color: var(--accent); stop-opacity: 0; }
.ground { fill: url(#gGround); }
.beam-top { fill: url(#gBeamTop); }
.beam-front { fill: url(#gBeamFront); }
.beam-cap { fill: var(--beam-cap); }
.hex-side { fill: var(--coral-deep); stroke: var(--coral-deep); stroke-width: 16; stroke-linejoin: round; }
.hex-face { fill: url(#gHex); stroke: url(#gHex); stroke-width: 16; stroke-linejoin: round; }
.hex-hi { fill: none; stroke: var(--coral-hi); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; opacity: 0.85; }
.glass-rim { fill: var(--glass-rim-fill); stroke: var(--glass-rim); stroke-width: 1.2; }
.glass-face { fill: url(#gGlass); stroke: var(--glass-edge); stroke-width: 1.6; }
.glass-hi { fill: none; stroke: var(--white); stroke-width: 3; stroke-linecap: round; opacity: 0.9; }
.glass-lo { fill: none; stroke: var(--glass-rim); stroke-width: 2; stroke-linecap: round; opacity: 0.7; }
.disc-rim { fill: var(--accent-dark); }
.disc-face { fill: url(#gDisc); stroke: var(--disc-hi); stroke-width: 2; }
.disc-gloss { fill: none; stroke: var(--white); stroke-width: 1.4; stroke-linecap: round; opacity: 0.45; }
.disc-shade { fill: var(--accent-dark); opacity: 0.28; }
.leader { stroke: var(--text); stroke-width: 1; }
.anchor { fill: var(--text); stroke: var(--white); stroke-width: 1.5; }
.sym-fill { fill: var(--text); }
.sym-ring { fill: none; stroke: var(--text); stroke-width: 1.2; }
.sym-beam { fill: var(--violet-2); }
.note-tag { font-family: var(--font-mono); font-size: 11px; font-weight: var(--weight-medium); letter-spacing: 0.08em; fill: var(--text); }
.note-rule { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.02em; fill: var(--text-muted); }

.tabs { min-width: 0; }
.tab-strip, [role="tablist"].tab-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.tab-strip [role="tab"] { min-width: 0; min-height: 88px; padding: 16px 8px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--panel); color: var(--text-muted); font-family: var(--font-display); font-size: 20px; font-weight: var(--weight-medium); overflow-wrap: anywhere; }
.tab-strip [role="tab"]:hover { background: var(--hover); color: var(--text); }
.tab-strip [role="tab"][aria-selected="true"] { background: var(--fact-blue); color: var(--text); border-color: var(--fact-blue); font-size: 28px; font-weight: var(--weight-bold); }
.tab-panel { padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--panel); color: var(--text); }
.capability-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: stretch; }
.capability-list details { border-bottom: 1px solid var(--border); }
.capability-list details:first-child { border-top: 1px solid var(--border); }
.capability-list summary { display: flex; align-items: center; gap: 16px; min-height: 84px; padding-top: 18px; padding-bottom: 18px; cursor: pointer; font-weight: var(--weight-medium); list-style: none; }
.capability-list summary::-webkit-details-marker { display: none; }
.capability-list summary::after { content: "›"; margin-left: auto; font-family: var(--font-mono); color: var(--text-muted); }
.capability-list details[open] summary::after { transform: rotate(90deg); }
.capability-list details p { padding-left: 60px; color: var(--text-muted); line-height: 1.8; font-size: 15px; }
.icon-base { display: inline-flex; justify-content: center; align-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--radius-card); background: var(--panel-2); color: var(--accent-dark); }
.icon-base svg { width: 22px; height: 22px; flex-shrink: 0; }
.config-canvas { position: relative; min-height: 320px; display: grid; align-content: center; padding: 32px; overflow-x: clip; border-radius: var(--radius-card); background: linear-gradient(125deg, var(--panel-2) 0%, var(--fact-blue) 52%, var(--fact-pink) 52%, var(--panel) 100%); color: var(--text); }
.config-slip { position: relative; margin: 0; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--panel); color: var(--text); box-shadow: var(--shadow-float); font-family: var(--font-mono); font-size: 12px; line-height: 2.2; overflow-x: auto; }
.config-line { display: block; white-space: pre; }
.line-number { display: inline-block; width: 28px; color: var(--text-muted); user-select: none; }
.toc { position: sticky; top: 12px; z-index: 10; display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; margin-bottom: 40px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--panel); color: var(--text); }
.toc a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border-radius: var(--radius-pill); font-size: var(--fs-small); color: var(--text-muted); }
.toc a:hover, .toc a[aria-current] { background: var(--fact-blue); color: var(--accent-dark); }
.toc--static { position: static; }
.faq-list { border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--panel); color: var(--text); }
.faq-item + .faq-item { border-top: 1px solid var(--border); }
.faq-item summary { display: flex; align-items: center; gap: 16px; min-height: 72px; padding: 20px 24px; font-weight: var(--weight-medium); list-style: none; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; margin-left: auto; flex-shrink: 0; color: var(--accent-dark); font-family: var(--font-mono); }
.faq-item[open] summary::after { content: "−"; }
.faq-answer { padding: 0 24px 24px; color: var(--text-muted); }
.faq-answer > :last-child { margin-bottom: 0; }
.term-card { padding: 28px; border-radius: var(--radius-card); border: 1px solid var(--border); border-top: 3px solid var(--accent); background: var(--panel); color: var(--text); }
.term-card dt, .term-card h3 { margin: 12px 0; font-size: var(--fs-h3); font-family: var(--font-display); font-weight: var(--weight-bold); }
.term-card dd { margin: 0; color: var(--text-muted); }
.appstore-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 10px 22px; border: 1px solid var(--text); border-radius: var(--radius-btn); background: var(--text); color: var(--panel); font-family: var(--font-mono); transition: transform var(--duration) var(--ease); }
.appstore-button:hover { transform: translateY(-1px); background: var(--ink-soft); color: var(--panel); }
.appstore-button svg { width: 26px; height: 28px; flex-shrink: 0; }
.appstore-button__copy { display: block; line-height: 1.35; }
.appstore-button__copy small { display: block; font-size: 11px; letter-spacing: 0.04em; }
.appstore-button__copy strong { display: block; font-size: 15px; font-weight: var(--weight-medium); }
.fact-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 20px 0; padding: 0; list-style: none; }
.fact-pill { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 7px 12px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--panel-mid); color: var(--text-muted); font-size: 12px; overflow-wrap: anywhere; }
.fact-pill strong { font-weight: var(--weight-medium); color: var(--text); }
.fact-pill svg { width: 14px; height: 14px; flex-shrink: 0; }
.official-shot { width: 100%; max-width: 280px; margin: 0 auto; flex-shrink: 0; }
.official-shot img { display: block; width: 100%; height: auto; border-radius: 10px; }
.official-shot { border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--panel); color: var(--text); }
.official-shot figcaption { padding: 12px 14px; font-size: var(--fs-micro); color: var(--text-muted); line-height: 1.65; }
.shot-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 32px; }
.device-card { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 32px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--panel); color: var(--text); }
.device-card > svg { width: 48px; height: 48px; flex-shrink: 0; color: var(--accent-dark); }
.device-card h3 { margin: 0; }
.device-card p { margin: 0; color: var(--text-muted); }
.device-card .text-link { margin-top: auto; min-height: 44px; display: inline-flex; align-items: center; }
.article-card { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 28px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--panel); color: var(--text); }
.article-card h3 { margin: 0; font-size: 21px; line-height: 1.5; }
.article-card p { margin: 0; color: var(--text-muted); font-size: 15px; }
.article-card .text-link { margin-top: auto; min-height: 44px; display: inline-flex; align-items: center; }
.article-meta { display: flex; flex-wrap: wrap; gap: 12px; color: var(--text-muted); font-size: var(--fs-micro); }
.callout { margin: 24px 0; padding: 22px 24px; border-left: 3px solid var(--accent); border-radius: var(--radius-btn); background: var(--panel-2); color: var(--text); }
.callout p:last-child { margin-bottom: 0; }
.callout__label { display: block; margin-bottom: 8px; font-weight: var(--weight-medium); }
.table-scroll { overflow-x: auto; max-width: 100%; min-width: 0; -webkit-overflow-scrolling: touch; }
.data-table { width: 100%; border-collapse: collapse; text-align: left; font-size: var(--fs-small); }
.data-table th, .data-table td, .prose table th, .prose table td {
  min-width: 7em;
  padding: 16px;
  border: 1px solid var(--border);
  vertical-align: top;
  overflow-wrap: normal;
  word-break: normal;
}
.data-table th, .prose table th { background: var(--panel-2); color: var(--text); font-weight: var(--weight-medium); }
.data-table td, .prose table td { background: var(--panel); color: var(--text); }
.prose table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; min-width: 0; border-collapse: collapse; text-align: left; }
.prose table code, .data-table code { overflow-wrap: anywhere; }
.dl-fab { position: fixed; right: max(var(--gutter), env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 30; display: inline-flex; align-items: center; gap: 12px; max-width: calc(100% - var(--gutter) * 2); min-height: 56px; padding: 12px 18px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--panel); color: var(--text); box-shadow: var(--shadow-bar); }
.dl-fab svg { width: 24px; height: 24px; flex-shrink: 0; color: var(--accent-dark); }
.dl-fab strong { display: block; font-size: 14px; }
.dl-fab small { display: block; color: var(--text-muted); font-size: 11px; }
.has-dl-fab .site-footer { padding-bottom: 110px; }
.article-store-card { margin-top: 48px; padding: 28px; border-radius: var(--radius-card); background: var(--panel-2); color: var(--text); display: flex; align-items: center; flex-wrap: wrap; gap: 24px; }
.article-store-card__copy { flex: 1 1 240px; }
.article-store-card h2 { margin: 0 0 10px; font-size: 24px; }
.article-store-card p { margin: 0; color: var(--text-muted); font-size: 14px; }

.preview-section { padding-top: 70px; padding-bottom: 70px; }
.preview-section + .preview-section { margin-top: 70px; }
.preview-section h2 { margin-top: 0; }
.preview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.preview-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.preview-placeholder { aspect-ratio: 750 / 1334; display: grid; place-items: center; padding: 24px; border-radius: var(--radius-card); background: linear-gradient(150deg, var(--panel-2), var(--panel-mid)); color: var(--text-muted); font-size: 14px; text-align: center; }
.swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.swatch { margin: 0; border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; background: var(--panel); color: var(--text); }
.swatch__paint { display: block; height: 64px; border-bottom: 1px solid var(--border); }
.swatch figcaption { padding: 10px 12px; font-family: var(--font-mono); font-size: 11px; overflow-wrap: anywhere; }
.paint-bg { background: var(--bg); color: var(--text); }
.paint-panel { background: var(--panel); color: var(--text); }
.paint-panel-2 { background: var(--panel-2); color: var(--text); }
.paint-panel-mid { background: var(--panel-mid); color: var(--text); }
.paint-panel-glow { background: var(--panel-glow); color: var(--text); }
.paint-border { background: var(--border); color: var(--text); }
.paint-accent { background: var(--accent); color: var(--text); }
.paint-accent-dark { background: var(--accent-dark); color: var(--panel); }
.paint-accent-halo { background: var(--accent-halo); color: var(--text); }
.paint-text { background: var(--text); color: var(--panel); }
.paint-text-muted { background: var(--text-muted); color: var(--panel); }
.paint-text-dim { background: var(--text-dim); color: var(--text); }
.paint-success { background: var(--success); color: var(--text); }
.paint-warn { background: var(--warn); color: var(--text); }
.paint-error { background: var(--error); color: var(--text); }
.paint-white { background: var(--white); color: var(--text); }
.paint-mask { background: var(--mask); color: var(--panel); }
.paint-clear { background: var(--clear); color: var(--text); }
.paint-violet { background: var(--violet); color: var(--text); }
.paint-violet-2 { background: var(--violet-2); color: var(--text); }
.paint-coral { background: var(--coral); color: var(--text); }
.paint-coral-2 { background: var(--coral-2); color: var(--text); }
.paint-coral-deep { background: var(--coral-deep); color: var(--text); }
.paint-coral-hi { background: var(--coral-hi); color: var(--text); }
.paint-sky { background: var(--sky); color: var(--text); }
.paint-disc-hi { background: var(--disc-hi); color: var(--text); }
.paint-beam-top-a { background: var(--beam-top-a); color: var(--text); }
.paint-beam-top-b { background: var(--beam-top-b); color: var(--text); }
.paint-beam-cap { background: var(--beam-cap); color: var(--text); }
.paint-glass-a { background: var(--glass-a); color: var(--text); }
.paint-glass-b { background: var(--glass-b); color: var(--text); }
.paint-glass-edge { background: var(--glass-edge); color: var(--text); }
.paint-glass-rim { background: var(--glass-rim); color: var(--text); }
.paint-glass-rim-fill { background: var(--glass-rim-fill); color: var(--text); }
.paint-fact-blue { background: var(--fact-blue); color: var(--text); }
.paint-fact-pink { background: var(--fact-pink); color: var(--text); }
.paint-fact-coral { background: var(--fact-coral); color: var(--text); }
.paint-chip-line { background: var(--chip-line); color: var(--text); }
.paint-chip-fill { background: var(--chip-fill); color: var(--text); }
.paint-ink-soft { background: var(--ink-soft); color: var(--panel); }
.paint-btn-quiet { background: var(--btn-quiet); color: var(--text); }
.paint-btn-quiet-hover { background: var(--btn-quiet-hover); color: var(--text); }
.paint-hover { background: var(--hover); color: var(--text); }
.paint-grid-line { background: var(--grid-line); color: var(--text); }
.paint-veil { background: var(--veil); color: var(--text); }
@media (max-width: 1024px) {
  .tab-strip, [role="tablist"].tab-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .capability-layout { grid-template-columns: 1fr; }
  .preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .stage__caption { left: 30px; font-size: 9px; }
  .tab-strip, [role="tablist"].tab-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tab-strip [role="tab"] { min-height: 64px; font-size: 17px; }
  .tab-strip [role="tab"][aria-selected="true"] { font-size: 24px; }
  .tab-panel { padding: 16px; }
  .capability-layout { gap: 24px; }
  .config-canvas { padding: 16px; min-height: 260px; }
  .config-slip { padding: 16px; font-size: 11px; }
  .capability-list details p { padding-left: 0; }
  .toc { position: static; gap: 4px; padding: 8px; }
  .toc a { padding-inline: 10px; }
  .fact-pills { flex-direction: row; justify-content: center; }
  .fact-pill { padding: 6px 9px; font-size: 11px; }
  .shot-row { flex-direction: column; align-items: center; }
  .official-shot { max-width: min(280px, 100%); }
  .device-card, .article-card, .term-card { padding: 24px; }
  .faq-item summary { padding: 18px; }
  .faq-answer { padding: 0 18px 20px; }
  .preview-grid { grid-template-columns: 1fr; }
  .swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-store-card { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .appstore-button { transition: none; }
}