.tabs { min-width: 0; }
.tablist, [role="tablist"].segment-control {
  display: flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  max-width: 100%;
  margin: 32px auto 24px;
  padding: 6px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--bg-panel);
  color: var(--text);
}
.tablist [role="tab"], .segment-control [role="tab"] {
  flex-shrink: 0;
  min-height: 44px;
  padding: 10px 18px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--clear);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--text-body-small);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}
.tablist [role="tab"]:hover, .segment-control [role="tab"]:hover { background: var(--paper-bar); color: var(--text); }
.tablist [role="tab"][aria-selected="true"], .segment-control [role="tab"][aria-selected="true"] { background: var(--accent); color: var(--on-accent); }
.feature-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
  gap: 48px;
  align-items: center;
  padding: 64px;
  border-radius: var(--r-section);
  background: var(--bg-panel-2);
  color: var(--text);
}
.feature-panel > * { min-width: 0; }
.feature-panel::before { content: ""; position: absolute; left: 24px; top: -12px; width: 36px; height: 36px; border-radius: var(--r-round) 0 0 0; background: var(--honey); color: var(--text); }
.feature-copy h3 { font-size: var(--text-h2); }
.feature-copy p { margin-top: 20px; line-height: 1.9; color: var(--text-muted); }
.feature-copy ul { margin-top: 22px; padding-left: 20px; list-style: disc; }
.feature-copy li + li { margin-top: 10px; }
.material-card { min-width: 0; padding: 28px; background: var(--bg-panel); color: var(--text); border-radius: var(--r-window); box-shadow: var(--shadow-near), var(--shadow-sheet); }
.material-card pre { padding: 0; border: 0; background: var(--bg-panel); color: var(--text); }
.material-label { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); margin-bottom: 16px; }
.toc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  background: var(--bg-panel);
  color: var(--text);
}
.toc a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border-radius: var(--r-pill); font-size: var(--text-body-small); }
.toc a:hover, .toc a[aria-current="location"] { background: var(--paper-bar); color: var(--accent-dark); }
.toc-sticky { position: sticky; top: 16px; z-index: 10; }
.faq-list { display: grid; gap: 12px; }
.faq-item { border: 1px solid var(--border); border-radius: var(--r-panel); background: var(--bg-panel); color: var(--text); }
.faq-item summary { position: relative; min-height: 58px; padding: 18px 56px 18px 24px; list-style: none; font-weight: var(--weight-semibold); cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 24px; top: 18px; font-family: var(--font-mono); color: var(--accent-dark); }
.faq-item[open] summary::after { content: "−"; }
.faq-answer { padding: 0 24px 24px; color: var(--text-muted); line-height: 1.85; }
.term-card { padding: 28px; border-radius: var(--r-cell); border: 1px solid var(--border); background: var(--bg-panel); color: var(--text); box-shadow: var(--shadow-sheet); }
.term-card h3 { margin-top: 14px; font-family: var(--font-mono); font-size: var(--text-card-title); overflow-wrap: anywhere; }
.term-card p { margin-top: 14px; color: var(--text-muted); line-height: 1.85; }
.term-card .term-related { display: inline-flex; min-height: 44px; align-items: center; margin-top: 12px; color: var(--accent-dark); font-size: var(--text-body-small); }
.badge, .fact-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--bg-panel);
  color: var(--text-muted);
  font-size: var(--text-xs-plus);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.badge-accent { background: var(--accent); color: var(--text); border-color: var(--accent); }
.badge-dark { background: var(--cell-deep); color: var(--on-dark); border-color: var(--cell-deep); }
.badge svg, .fact-pill svg { width: 14px; height: 14px; flex-shrink: 0; }
.status-dot { width: 8px; height: 8px; border-radius: var(--r-round); background: var(--success); flex-shrink: 0; }
.facts-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.facts-row.on-dark .fact-pill { background: var(--glass-row); color: var(--on-dark-muted); border-color: var(--line-dark); }
.appstore-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  max-width: 100%;
  padding: 10px 24px;
  border: 1px solid var(--accent-dark);
  border-radius: var(--r-btn);
  background: var(--accent-dark);
  color: var(--on-accent);
  font-family: var(--font-body);
  line-height: 1.2;
  box-shadow: inset 0 1px 0 var(--hi-line), var(--shadow-btn);
  transition: background-color var(--ease-ui), transform var(--ease-ui);
}
.appstore-button:hover { background: var(--accent-dark-hover); color: var(--on-accent); transform: translateY(-1px); }
.appstore-button svg { width: 25px; height: 29px; flex-shrink: 0; }
.appstore-label { display: block; text-align: left; }
.appstore-label small { display: block; font-size: var(--text-xs); font-weight: var(--weight-medium); }
.appstore-label strong { display: block; margin-top: 3px; font-size: var(--text-base); font-weight: var(--weight-semibold); }
.store-guide-card { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 28px; padding: 36px; border-radius: var(--r-section); background: var(--bg-panel-2); color: var(--text); }
.store-guide-card > div { min-width: 0; flex: 1 1 280px; }
.store-guide-card h2, .store-guide-card h3 { font-size: var(--text-h3); }
.store-guide-card p { margin-top: 12px; color: var(--text-muted); }
.official-shot { width: 100%; max-width: 280px; margin-inline: auto; padding: 0; flex-shrink: 0; }
.official-shot img { display: block; width: 100%; height: auto; border-radius: var(--r-shot); }
.official-shot img { outline: 1px solid var(--border); outline-offset: -1px; }
.official-shot figcaption { margin-top: 12px; font-size: var(--text-xs-plus); color: var(--text-muted); line-height: 1.7; text-align: center; }
.shot-row { display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; gap: 32px; }
.shot-placeholder { display: grid; place-items: center; width: 100%; aspect-ratio: 750 / 1334; border: 1px solid var(--border); border-radius: var(--r-shot); background: var(--paper-bar); color: var(--text-muted); font-size: var(--text-sm); text-align: center; }
.device-card { display: flex; align-items: flex-start; gap: 24px; padding: 36px; border-radius: var(--r-cell); background: var(--bg-panel); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow-sheet); }
.device-card > svg { width: 48px; height: 64px; color: var(--accent-dark); flex-shrink: 0; }
.device-card > div { min-width: 0; }
.device-card h3 { font-size: var(--text-h3); }
.device-card p { margin-top: 12px; color: var(--text-muted); }
.device-card .cell-link { min-height: 44px; align-items: center; }
.article-card { display: flex; flex-direction: column; min-width: 0; padding: 30px; border-radius: var(--r-cell); background: var(--bg-panel); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow-sheet); }
.article-card h3 { margin-top: 22px; font-size: var(--text-h3); }
.article-card h3 a:hover { color: var(--accent-dark); }
.article-card p { margin-top: 14px; color: var(--text-muted); line-height: 1.85; }
.article-card .article-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; font-size: var(--text-xs-plus); color: var(--text-muted); }
.article-card .cell-link { margin-top: auto; padding-top: 20px; min-height: 44px; }
.callout { padding: 24px 28px; border-left: 4px solid var(--accent-dark); border-radius: var(--r-panel); background: var(--bg-panel-2); color: var(--text); }
.callout p { margin-top: 8px; line-height: 1.85; color: var(--text-muted); }
.callout strong { font-weight: var(--weight-semibold); }
.table-scroll { overflow-x: auto; max-width: 100%; min-width: 0; overscroll-behavior-inline: contain; border: 1px solid var(--border); border-radius: var(--r-panel); }
.data-table { width: 100%; border-collapse: collapse; text-align: left; font-size: var(--text-body-small); }
.data-table th, .data-table td, .prose table th, .prose table td {
  min-width: 7em;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  overflow-wrap: normal;
  word-break: normal;
  vertical-align: top;
}
.data-table th, .prose table th { background: var(--paper-bar); color: var(--text); font-weight: var(--weight-semibold); }
.data-table td, .prose table td { background: var(--bg-panel); color: var(--text); }
.data-table tr:last-child td { border-bottom: 0; }
.prose table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  min-width: 0;
  border-collapse: collapse;
  text-align: left;
  overscroll-behavior-inline: contain;
}
.prose table code, .data-table code { overflow-wrap: anywhere; }
.dl-fab {
  position: fixed;
  z-index: 30;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 40px);
  min-height: 56px;
  padding: 12px 20px;
  border: 1px solid var(--hi-line);
  border-radius: var(--r-pill);
  background: var(--accent-dark);
  color: var(--on-accent);
  box-shadow: var(--shadow-near), var(--shadow-far);
  font-size: var(--text-body-small);
  font-weight: var(--weight-semibold);
}
.dl-fab svg { width: 20px; height: 20px; flex-shrink: 0; }
.dl-fab:hover { background: var(--accent-dark-hover); color: var(--on-accent); }
.article-page .site-footer { padding-bottom: 110px; }
.stage { position: relative; background: var(--bg); color: var(--on-dark); padding-bottom: 180px; }
.bento {
  position: relative;
  z-index: 3;
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin: 16px auto 0;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 280px;
  grid-template-rows: auto auto;
  gap: 16px;
}
.bento > * { min-width: 0; }
.cell { position: relative; border-radius: var(--r-cell); padding: 24px; transition: transform var(--ease-lift), box-shadow var(--ease-lift); }
.cell:hover { transform: translateY(-4px); box-shadow: var(--shadow-cell); }
.cell-main { grid-column: 2; grid-row: 1 / span 2; padding: 30px 40px 26px; text-align: center; background: linear-gradient(180deg, var(--glass-top), var(--glass-bottom)); color: var(--on-dark); box-shadow: inset 0 0 0 1px var(--line-dark), inset 0 1px 0 var(--hi-line); }
.cell-main:hover { box-shadow: inset 0 0 0 1px var(--line-dark), inset 0 1px 0 var(--hi-line), var(--shadow-cell); }
.cell-deep { background: var(--cell-deep); color: var(--on-dark); box-shadow: inset 0 0 0 1px var(--line-dark); }
.cell-deep:hover { box-shadow: inset 0 0 0 1px var(--line-dark), var(--shadow-cell); }
.cell-light { background: var(--bg-panel); color: var(--text); box-shadow: var(--shadow-near); }
.cell-light:hover { box-shadow: var(--shadow-near), var(--shadow-cell); }
.cell-routing { grid-column: 1; grid-row: 1 / span 2; display: flex; flex-direction: column; }
.cell-buy { grid-column: 3; grid-row: 1; }
.cell-proto { grid-column: 3; grid-row: 2; }
.hero-title { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-hero); line-height: 1.18; letter-spacing: var(--tracking-title); }
.hero-title-line { display: block; color: var(--on-dark); }
.hero-title-line.is-accent { color: var(--accent); }
.hero-lead { max-width: 600px; margin: 12px auto 0; font-size: var(--text-lead-small); line-height: 1.7; color: var(--on-dark-muted); }
.hero-lead strong { color: var(--on-dark); font-weight: var(--weight-semibold); }
.cta-row { display: flex; justify-content: center; gap: 14px; margin-top: 22px; }
.device-row { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px 18px; margin-top: 20px; font-size: var(--text-sm-plus); color: var(--on-dark-muted); }
.device { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; }
.device:hover { color: var(--on-dark); }
.device svg { width: 18px; height: 18px; color: var(--on-dark); }
.device-sep { width: 1px; height: 16px; background: var(--line-dark); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: var(--r-pill); border: 1px solid var(--line-dark); color: var(--on-dark); font-size: var(--text-xs-plus); font-weight: var(--weight-medium); }
.cell-kicker { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); color: var(--accent); }
.cell-light .cell-kicker { color: var(--accent-dark); display: inline-flex; align-items: center; gap: 6px; }
.cell-light .cell-kicker svg { width: 13px; height: 13px; }
.cell-title { margin-top: 6px; font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-brand); line-height: 1.35; color: var(--on-dark); }
.cell-light .cell-title { color: var(--text); }
.cell-text { margin-top: 8px; font-size: var(--text-sm-plus); line-height: 1.65; color: var(--text-muted); }
.cell-link { display: inline-flex; gap: 6px; margin-top: 10px; font-size: var(--text-sm-plus); font-weight: var(--weight-semibold); color: var(--accent-dark); }
.cell-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.route-list { margin-top: 16px; border-radius: var(--r-panel); background: var(--glass-row); color: var(--on-dark-muted); box-shadow: inset 0 0 0 1px var(--line-dark); overflow: hidden; }
.route-item { display: grid; grid-template-columns: 10px 62px minmax(0, 1fr); align-items: center; gap: 10px; padding: 12px 14px; font-size: var(--text-xs-plus); line-height: 1.45; color: var(--on-dark-muted); }
.route-item + .route-item { border-top: 1px solid var(--line-dark); }
.route-name { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--on-dark); }
.dot { width: 9px; height: 9px; border-radius: var(--r-round); flex-shrink: 0; }
.dot-fill { background: var(--accent); box-shadow: 0 0 0 3px var(--glass-top); }
.dot-ring { box-shadow: inset 0 0 0 2px var(--accent); }
.dot-muted { box-shadow: inset 0 0 0 2px var(--on-dark-muted); }
.route-foot { margin-top: auto; padding-top: 14px; font-size: var(--text-xs-plus); line-height: 1.55; color: var(--on-dark-muted); }
.route-foot .mono { color: var(--on-dark); font-weight: var(--weight-semibold); }
.proto-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.proto-chips li { max-width: 100%; padding: 3px 9px; border-radius: var(--r-pill); border: 1px solid var(--line-dark); font-family: var(--font-mono); font-size: var(--text-chip); color: var(--on-dark); overflow-wrap: anywhere; }
.scene { position: relative; z-index: 1; height: 420px; margin: 8px 0 0; }
.arc { position: absolute; border-radius: var(--r-round); box-shadow: inset 0 1px 0 var(--hi-line); }
.arc-1 { width: 2400px; height: 2400px; left: calc(50% - 1200px); top: 0; background: var(--arc-1); color: var(--on-dark); }
.arc-2 { width: 1700px; height: 1700px; left: calc(50% - 850px); top: 84px; background: var(--arc-2); color: var(--on-dark); }
.arc-3 { width: 1100px; height: 1100px; left: calc(50% - 550px); top: 172px; background: var(--arc-3); color: var(--on-dark); }
.geo-tri { position: absolute; z-index: 2; left: calc(50% + 500px); top: 54px; width: 38px; height: 34px; color: var(--honey); transform: rotate(-8deg); }
.rulefile-wrap { position: absolute; z-index: 3; left: 50%; top: 36px; width: 720px; margin-left: -360px; }
.geo-sun { position: absolute; z-index: 0; right: -120px; top: 38px; width: 240px; height: 240px; border-radius: var(--r-round); background: var(--honey); color: var(--text); }
.geo-square { position: absolute; z-index: 0; left: -64px; top: -30px; width: 104px; height: 104px; border-radius: var(--r-geo); background: var(--sakura); color: var(--text); transform: rotate(-12deg); }
.sheet { position: absolute; inset: 0; border-radius: var(--r-window); box-shadow: var(--shadow-sheet); }
.sheet-back { z-index: 1; background: var(--paper-2); color: var(--text); transform: translate(32px, -24px) rotate(2.6deg); }
.sheet-mid { z-index: 1; background: var(--paper-1); color: var(--text); transform: translate(16px, -12px) rotate(1.3deg); }
.rulefile { position: relative; z-index: 2; border-radius: var(--r-window); background: var(--bg-panel); color: var(--text); box-shadow: var(--shadow-near), var(--shadow-far); overflow: hidden; }
.rulefile-bar { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 20px 0 22px; background: var(--paper-bar); color: var(--text); border-bottom: 1px solid var(--border); }
.filename { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text); }
.filename svg { width: 15px; height: 15px; color: var(--accent-dark); }
.bar-more { width: 18px; height: 18px; color: var(--text-muted); }
.section-tabs { display: flex; gap: 8px; padding: 12px 22px; border-bottom: 1px solid var(--border); }
.section-tab { padding: 4px 12px; border-radius: var(--r-pill); border: 1px solid var(--border); font-family: var(--font-mono); font-size: var(--text-xs-plus); color: var(--text-muted); white-space: nowrap; }
.section-tab.is-on { background: var(--accent); border-color: var(--accent); color: var(--text); font-weight: var(--weight-semibold); }
.rules-scroll { overflow-x: auto; overscroll-behavior-inline: contain; }
.rules { padding: 14px 24px 18px 60px; min-width: 590px; }
.rule { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 16px; height: 34px; }
.ln { font-family: var(--font-mono); font-size: var(--text-xs); text-align: right; color: var(--text-muted); }
.rule code { display: flex; align-items: center; white-space: nowrap; font-family: var(--font-mono); font-size: var(--text-body-small); color: var(--text); }
.kw { color: var(--accent-dark); font-weight: var(--weight-semibold); }
.sep { color: var(--text-muted); }
.pol { display: inline-block; padding: 2px 8px; border-radius: var(--r-tag); font-size: var(--text-chip); font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); line-height: 1.5; }
.pol-proxy { background: var(--accent); color: var(--on-accent); }
.pol-direct { box-shadow: inset 0 0 0 1.5px var(--accent-dark); color: var(--accent-dark); }
.pol-reject { background: var(--sakura); color: var(--text); }
.iphone { position: absolute; z-index: 4; left: -104px; top: 120px; width: 146px; height: 290px; padding: 7px; border-radius: var(--r-phone); background: var(--navy); color: var(--on-dark); box-shadow: inset 0 0 0 1px var(--hi-line), var(--shadow-near), var(--shadow-far); }
.iphone::after { content: ""; position: absolute; right: -3px; top: 78px; width: 3px; height: 42px; border-radius: 0 var(--r-phone-key) var(--r-phone-key) 0; background: var(--navy); color: var(--on-dark); }
.iphone-screen { position: relative; height: 100%; border-radius: var(--r-screen); background: linear-gradient(180deg, var(--accent), var(--accent-dark)); color: var(--navy); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.iphone-island { position: absolute; top: 10px; left: 50%; width: 46px; height: 13px; margin-left: -23px; border-radius: var(--r-pill); background: var(--navy); color: var(--on-dark); }
.iphone-word { font-family: var(--font-mono); font-size: var(--text-brand); font-weight: var(--weight-bold); letter-spacing: 0.14em; color: var(--on-dark); text-shadow: 0 1px 3px var(--navy); }
.facts { position: relative; z-index: 2; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 120px var(--gutter) 0; text-align: center; }
.facts-title { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-facts); line-height: 1.3; color: var(--on-dark); }
.facts-lead { margin-top: 10px; font-size: var(--text-lead-small); color: var(--on-dark-muted); }
.facts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 44px; text-align: left; }
.fact { min-width: 0; padding: 28px; border-radius: var(--r-cell); background: var(--fact-bg); color: var(--on-dark); box-shadow: inset 0 0 0 1px var(--line-dark); }
.fact-key { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--accent); }
.fact h3 { margin-top: 8px; font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-card-title); color: var(--on-dark); }
.fact p { margin-top: 8px; font-size: var(--text-nav); line-height: 1.7; color: var(--on-dark-muted); overflow-wrap: anywhere; }
.paper { position: relative; z-index: 2; margin-top: calc(var(--r-layer) * -1); border-radius: var(--r-layer) var(--r-layer) 0 0; background: var(--bg-panel); color: var(--text); padding: 140px var(--gutter) 160px; text-align: center; }
.paper-title { max-width: 820px; margin: 0 auto; font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-h2); line-height: 1.3; color: var(--text); }
.paper-lead { max-width: 700px; margin: 18px auto 0; font-size: var(--text-lead); line-height: 1.75; color: var(--text-muted); }
.preview-section { padding-top: 140px; padding-bottom: 0; }
.preview-section:last-child { padding-bottom: 140px; }
.preview-section > h2 { margin-bottom: 32px; }
.preview-section > p { margin-top: 16px; margin-bottom: 28px; color: var(--text-muted); }
.preview-stack { display: grid; gap: 24px; }
.preview-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.preview-dark { padding: 36px; border-radius: var(--r-section); background: var(--bg); color: var(--on-dark); }
.swatch-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.swatch { min-width: 0; border: 1px solid var(--border); border-radius: var(--r-panel); overflow: hidden; background: var(--bg-panel); color: var(--text); }
.swatch-color { display: block; height: 72px; border-bottom: 1px solid var(--border); }
.swatch code { display: block; padding: 10px 12px; font-size: var(--text-xs); }
.sw-bg { background: var(--bg); }
.sw-panel { background: var(--bg-panel); }
.sw-panel2 { background: var(--bg-panel-2); }
.sw-border { background: var(--border); }
.sw-accent { background: var(--accent); }
.sw-accent-dark { background: var(--accent-dark); }
.sw-hover { background: var(--accent-dark-hover); }
.sw-text { background: var(--text); }
.sw-muted { background: var(--text-muted); }
.sw-success { background: var(--success); }
.sw-warn { background: var(--warn); }
.sw-error { background: var(--error); }
.sw-sakura { background: var(--sakura); }
.sw-on-dark { background: var(--on-dark); }
.sw-on-muted { background: var(--on-dark-muted); }
.sw-arc1 { background: var(--arc-1); }
.sw-arc2 { background: var(--arc-2); }
.sw-arc3 { background: var(--arc-3); }
.sw-cell { background: var(--cell-deep); }
.sw-navy { background: var(--navy); }
.sw-bar { background: var(--paper-bar); }
.sw-paper1 { background: var(--paper-1); }
.sw-paper2 { background: var(--paper-2); }
.sw-glass-top { background: linear-gradient(var(--glass-top), var(--glass-top)), var(--bg); }
.sw-glass-bottom { background: linear-gradient(var(--glass-bottom), var(--glass-bottom)), var(--bg); }
.sw-glass-row { background: linear-gradient(var(--glass-row), var(--glass-row)), var(--bg); }
.sw-line { background: linear-gradient(var(--line-dark), var(--line-dark)), var(--bg); }
.sw-strong { background: linear-gradient(var(--line-strong), var(--line-strong)), var(--bg); }
.sw-hi { background: linear-gradient(var(--hi-line), var(--hi-line)), var(--bg); }
.sw-fact { background: linear-gradient(var(--fact-bg), var(--fact-bg)), var(--bg); }
.sw-veil { background: linear-gradient(var(--veil-bg), var(--veil-bg)), var(--bg-panel); }
.sw-clear { background: var(--clear); }
.type-display { font-family: var(--font-display); font-size: var(--text-h1); font-weight: var(--weight-bold); line-height: 1.3; }
@media (max-width: 1180px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .cell-main { grid-column: 1 / -1; grid-row: 1; }
  .cell-routing { grid-column: 1; grid-row: 2 / span 2; }
  .cell-buy { grid-column: 2; grid-row: 2; }
  .cell-proto { grid-column: 2; grid-row: 3; }
  .geo-tri { left: auto; right: 40px; }
}
@media (max-width: 860px) {
  .facts-grid { grid-template-columns: 1fr; }
  .feature-panel { grid-template-columns: minmax(0, 1fr); padding: 40px; }
  .scene { height: 520px; }
  .rulefile-wrap { left: 20px; right: 20px; width: auto; margin-left: 0; }
  .rules { padding-left: 20px; padding-right: 16px; min-width: 520px; }
  .rule { gap: 10px; }
  .rule code { font-size: var(--text-xs); }
  .section-tabs { flex-wrap: wrap; }
  .iphone { left: auto; right: 6px; top: auto; bottom: -190px; width: 112px; height: 222px; border-radius: var(--r-phone-small); }
  .iphone-screen { border-radius: var(--r-screen-small); gap: 12px; }
  .iphone-word { font-size: var(--text-body-small); }
  .geo-sun { width: 160px; height: 160px; right: -60px; }
  .geo-square { left: -20px; width: 72px; height: 72px; }
  .swatch-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .hero-title { font-size: clamp(24px, 5vw, 30px); }
}
@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; }
  .cell-main, .cell-routing, .cell-buy, .cell-proto { grid-column: 1; grid-row: auto; }
  .cell-main { padding: 26px 20px 22px; }
  .hero-title { font-size: clamp(24px, 7vw, 30px); }
  .cta-row { flex-direction: column; align-items: stretch; }
  .btn-primary, .btn-ghost { min-width: 0; }
  .device-sep { display: none; }
  .device-row { gap: 8px 14px; }
  .scene { height: 500px; }
  .facts { padding-top: 160px; }
  .paper { padding: 100px var(--gutter) 120px; }
  .feature-panel { padding: 36px 24px; gap: 28px; }
  .material-card { padding: 20px; }
  .tablist, [role="tablist"].segment-control { justify-content: flex-start; }
  .facts-row { flex-direction: row; flex-wrap: wrap; }
  .shot-row { flex-direction: column; align-items: center; }
  .device-card { padding: 24px; gap: 18px; }
  .device-card > svg { width: 36px; height: 48px; }
  .store-guide-card { padding: 28px 24px; }
  .swatch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sheet-back { transform: translate(12px, -16px); }
  .sheet-mid { transform: translate(6px, -8px); }
  .geo-square, .geo-tri { transform: none; }
  .preview-dark { padding: 28px 24px; }
  .dl-fab { right: 18px; bottom: max(18px, env(safe-area-inset-bottom)); font-size: var(--text-sm); }
}
@media (prefers-reduced-motion: reduce) {
  .cell:hover, .appstore-button:hover { transform: none; }
}