/* 装置内部只有几何、渐变与规则文字，不复刻应用界面。 */
.visual { display:flex; justify-content:flex-end; align-items:center; min-width:0 }
.stage { width:min(100%,calc((100svh - var(--nav-h) - var(--seam) - 40px) * .972)); container-type:inline-size }
.set { position:relative; width:100%; aspect-ratio:700 / 720 }
.set::before { content:""; position:absolute; inset:-6% -10% 10% 20%; background:radial-gradient(48% 42% at 92% 12%,var(--accent-haze),var(--clear) 72%); pointer-events:none }
.floor { position:absolute; left:12%; top:80%; width:78%; height:12%; background:radial-gradient(50% 50% at 50% 50%,var(--floor),var(--clear) 72%); z-index:0 }
.orbit { position:absolute; inset:0; width:100%; height:100%; z-index:1; overflow:visible }
.orbit .ring { fill:none; stroke:var(--line-dark); stroke-width:1 }
.orbit .ring-inner { fill:none; stroke:var(--line-dark-soft); stroke-width:1; stroke-dasharray:2 7 }
.orbit .ring-dot { fill:var(--accent) }
.orbit .ring-dot-halo { fill:var(--accent-haze) }
.orbit text { font-family:var(--font-mono); font-size:11px; letter-spacing:var(--tracking-small); fill:var(--on-dark-faint) }
.device {
  position:absolute; background:var(--device); color:var(--on-dark);
  box-shadow:inset 0 0 0 1px var(--device-bevel),inset 0 -2px 6px var(--device-deep),0 0 0 1px var(--screen-ink);
}
.device::after {
  content:""; position:absolute; inset:-1px; border-radius:inherit;
  border:1.5px solid var(--clear); border-top-color:var(--accent); border-right-color:var(--accent);
  box-shadow:7px -5px 24px -10px var(--accent-glow);
  -webkit-mask-image:linear-gradient(225deg,var(--mask-solid) 35%,var(--clear) 78%);
  mask-image:linear-gradient(225deg,var(--mask-solid) 35%,var(--clear) 78%);
  opacity:.55; animation:rim var(--rim-duration) ease-in-out infinite; pointer-events:none;
}
.screen { position:relative; width:100%; height:100%; overflow:hidden; background:var(--screen-ink); color:var(--on-dark) }
.ipad { left:3%; top:15%; width:74%; aspect-ratio:4 / 3; border-radius:4.6cqw; padding:2.5cqw; transform:rotate(-8deg); z-index:2 }
.ipad .screen { border-radius:2.2cqw; background:linear-gradient(140deg,var(--bg-panel) 22%,var(--olive-deep) 100%); color:var(--on-dark) }
.ipad .circle { position:absolute; left:44%; top:-14%; width:66%; aspect-ratio:1; border-radius:var(--r-logo); border:1px solid var(--line-dark-soft); background:radial-gradient(circle at 35% 65%,var(--circle-fill),var(--clear) 68%) }
.ipad .cam { position:absolute; left:50%; top:.95cqw; width:.7cqw; height:.7cqw; border-radius:var(--r-logo); background:var(--screen-ink); box-shadow:inset 0 0 0 1px var(--device-bevel); transform:translateX(-50%) }
.iphone { left:60%; top:24%; width:32%; aspect-ratio:9 / 19; border-radius:6.2cqw; padding:1.4cqw; transform:rotate(6deg); z-index:3 }
.iphone .screen { border-radius:4.9cqw; background:linear-gradient(180deg,var(--accent) 0%,var(--green-mid) 30%,var(--accent-dark) 56%,var(--green-night) 100%); color:var(--on-dark) }
.island { position:absolute; left:50%; top:1.6cqw; width:9cqw; height:2.6cqw; border-radius:var(--r-pill); background:var(--screen-ink); transform:translateX(-50%) }
.rule { position:absolute; left:1.3cqw; right:1cqw; bottom:25%; font-family:var(--font-mono); font-size:1.42cqw; font-weight:var(--weight-medium); letter-spacing:-.01em; color:var(--on-dark); white-space:nowrap }
.rule-text { position:relative; display:inline-block; padding-bottom:1cqw }
.rule-text::after { content:""; position:absolute; left:0; right:0; bottom:0; height:.34cqw; border-radius:var(--r-pill); background:var(--accent); transform:scaleX(0); transform-origin:left center; animation:sweep var(--sweep-duration) cubic-bezier(.4,0,.2,1) .9s forwards }
.side { position:absolute; width:.5cqw; background:var(--device-edge); border-radius:var(--r-pill) }
.side-power { right:-.45cqw; top:26%; height:10% }
.side-vol-a { left:-.45cqw; top:21%; height:6% }
.side-vol-b { left:-.45cqw; top:29%; height:6% }
@keyframes rim { 0%,100% { opacity:.55 } 50% { opacity:1 } }
@keyframes sweep { to { transform:scaleX(1) } }

.lime-section {
  margin-inline:24px; padding:100px var(--gutter);
  border-radius:var(--r-xl);
  background:linear-gradient(110deg,var(--accent-soft),var(--accent)); color:var(--text);
  overflow-x:clip;
}
.lime-section h2 { font-size:var(--fs-fact-title); font-weight:var(--weight-heavy); line-height:1.15 }
.lime-section p { max-width:680px }
.feature-layout {
  display:grid; grid-template-columns:38fr 62fr;
  position:relative; overflow:hidden;
  background:var(--bg-panel-2); color:var(--text);
  border-radius:var(--r-xl); padding:40px 0 0;
}
.feature-list { padding:0 40px 40px; border-right:1px solid var(--border) }
[role="tablist"] { display:flex; gap:8px }
.feature-list[role="tablist"] { flex-direction:column; gap:4px }
[role="tab"] {
  position:relative; display:flex; align-items:center; gap:14px; min-height:56px;
  padding:12px 16px; border:0; border-radius:var(--r-btn);
  background:var(--clear); color:var(--text-muted);
  font-weight:var(--weight-bold); text-align:left;
}
[role="tab"][aria-selected="true"] { color:var(--text) }
.feature-list [role="tab"]::before { content:""; position:absolute; left:-16px; top:14px; bottom:14px; width:4px; border-radius:var(--r-pill); background:var(--clear) }
.feature-list [role="tab"][aria-selected="true"]::before { background:var(--accent) }
.tab-icon {
  display:inline-flex; justify-content:center; align-items:center;
  width:40px; height:40px; flex:none; border-radius:var(--r-logo);
  background:var(--accent); color:var(--text);
}
.tab-icon svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round }
.feature-detail { padding:36px 0 0 40px; min-width:0 }
.feature-detail [role="tabpanel"] {
  min-height:440px; padding:48px 48px 64px;
  border-radius:var(--r-lg) 0 0 0; background:var(--bg); color:var(--text);
}
.feature-detail p { max-width:620px }
.tab-strip { overflow-x:auto; max-width:100%; padding:4px; scrollbar-width:thin }
.tab-strip [role="tab"] { flex-shrink:0; border-radius:var(--r-pill); border:1px solid var(--border); background:var(--bg); color:var(--text-muted) }
.tab-strip [role="tab"][aria-selected="true"] { background:var(--accent); color:var(--text); border-color:var(--accent) }
.tab-panel { padding-top:24px }
.toc {
  display:flex; flex-wrap:wrap; gap:8px 20px; padding:20px 24px;
  border:1px solid var(--border); border-radius:var(--r-lg);
  background:var(--bg); color:var(--text);
}
.toc a { min-height:44px; display:inline-flex; align-items:center; font-size:14px; color:var(--accent-dark) }
.toc a:hover { text-decoration:underline; text-underline-offset:4px }
.toc.is-sticky { position:sticky; top:16px; z-index:20 }
.faq-group { background:var(--bg-panel-2); color:var(--text); border-radius:var(--r-lg); padding:8px 24px }
.faq-item { border-bottom:1px solid var(--border) }
.faq-item:last-child { border-bottom:0 }
.faq-item summary { position:relative; padding:22px 32px 22px 0; cursor:pointer; list-style:none; font-weight:var(--weight-semibold) }
.faq-item summary::-webkit-details-marker { display:none }
.faq-item summary::after { content:"+"; position:absolute; right:0; top:21px; color:var(--accent-dark); font-size:var(--fs-h3); line-height:1.3 }
.faq-item[open] summary::after { content:"−" }
.faq-answer { padding-bottom:24px; color:var(--text-muted) }
.faq-answer p:last-child { margin-bottom:0 }
.term-card { border-top:4px solid var(--accent) }
.term-card dt { margin-bottom:12px; font-family:var(--font-mono); font-size:var(--fs-h3); font-weight:var(--weight-semibold); overflow-wrap:anywhere }
.term-card dd { margin:0; color:var(--text-muted) }
.app-store-button {
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  min-height:58px; padding:12px 24px; max-width:100%;
  border:1px solid var(--accent); border-radius:var(--r-btn);
  background:var(--accent); color:var(--text);
  font-weight:var(--weight-semibold); line-height:1.35;
  transition:background-color var(--duration);
}
.app-store-button:hover { background:var(--accent-hover); color:var(--text) }
.app-store-button svg { width:24px; height:28px; flex:none; fill:currentColor }
.app-store-copy { display:block }
.app-store-copy small { display:block; font-size:var(--fs-tiny); font-weight:var(--weight-regular) }
.app-store-copy strong { display:block; font-size:var(--fs-body); font-weight:var(--weight-semibold) }
.app-store-button.is-dark { background:var(--bg-panel); color:var(--on-dark); border-color:var(--bg-panel) }
.app-store-button.is-dark:hover { background:var(--device); color:var(--on-dark) }
.fact-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-block:24px }
.fact-chip,.badge {
  display:inline-flex; align-items:center; gap:8px; max-width:100%;
  padding:6px 12px; border:1px solid var(--border); border-radius:var(--r-pill);
  background:var(--bg-panel-2); color:var(--text-muted);
  font-size:var(--fs-tiny); line-height:1.5; overflow-wrap:anywhere;
}
.fact-chip b { font-weight:var(--weight-medium); color:var(--text) }
.badge { background:var(--accent-soft); color:var(--accent-dark); border-color:var(--accent-soft); font-weight:var(--weight-semibold) }
.stage-dark .fact-chip { background:var(--device); color:var(--on-dark-muted); border-color:var(--line-dark) }
.stage-dark .fact-chip b { color:var(--on-dark) }
.shot-row { display:flex; justify-content:center; gap:32px; align-items:flex-start; flex-wrap:wrap }
.official-shot { width:100%; max-width:280px; margin:0; padding:0; flex-shrink:0; min-width: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 { padding-top:14px; font-size:var(--fs-small); color:var(--text-muted); line-height:1.7 }
.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(--bg-panel-2); color:var(--text-muted);
  text-align:center; font-family:var(--font-mono); font-size:var(--fs-small);
}
.device-entry { display:flex; flex-direction:column; align-items:flex-start; padding:40px; background:var(--bg-panel-2); color:var(--text); border-color:var(--bg-panel-2) }
.device-entry > svg { width:44px; height:56px; fill:none; stroke:currentColor; stroke-width:1.5; margin-bottom:28px; flex:none }
.device-entry h3 { margin-bottom:12px }
.device-entry p { color:var(--text-muted); flex:1 }
.device-entry .text-link { display:inline-flex; align-items:center; gap:16px; min-height:44px; font-weight:var(--weight-semibold) }
.article-card { display:flex; flex-direction:column; gap:18px }
.article-meta { display:flex; flex-wrap:wrap; gap:10px; align-items:center; font-family:var(--font-mono); font-size:var(--fs-tiny); color:var(--text-muted) }
.article-card h3 { margin:0 }
.article-card h3 a:hover { color:var(--accent-dark) }
.article-card p { margin:0; color:var(--text-muted) }
.article-card .text-link { margin-top:auto; padding-top:8px }
.callout { margin:28px 0; padding:24px 28px; border-left:4px solid var(--accent-dark); border-radius:0 var(--r-btn) var(--r-btn) 0; background:var(--bg-panel-2); color:var(--text) }
.callout p:last-child { margin-bottom:0 }
.callout strong { color:var(--accent-dark) }
.table-scroll { overflow-x:auto; max-width:100%; min-width:0; -webkit-overflow-scrolling:touch; border:1px solid var(--border); border-radius:var(--r-btn) }
.data-table { width:100%; border-collapse:collapse; font-size:14px; color:var(--text); background:var(--bg) }
.data-table th,.data-table td,.prose table th,.prose table td {
  min-width:7em; padding:16px 20px; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--border); overflow-wrap:normal; word-break:normal;
}
.data-table th,.prose table th { background:var(--bg-panel-2); color:var(--text); font-weight:var(--weight-semibold) }
.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;
  background:var(--bg); color:var(--text); margin-block:28px;
}
.prose table td code,.data-table td code { overflow-wrap:anywhere }
.grouped-list { list-style:none; padding:0; margin:0; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--bg); color:var(--text) }
.grouped-list li { margin:0 }
.grouped-list li + li { border-top:1px solid var(--border) }
.grouped-list a { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px; padding:16px 24px }
.grouped-list a::after { content:"›"; color:var(--accent-dark); flex:none }
.grouped-list a:hover { color:var(--accent-dark) }
.store-guide-card { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; padding:32px; border-radius:var(--r-lg); background:var(--bg-panel-2); color:var(--text) }
.store-guide-card h2 { font-size:var(--fs-h3); margin-bottom:8px }
.store-guide-card p { margin:0; max-width:620px; color:var(--text-muted) }
.dl-fab {
  position:fixed; right:24px; bottom:24px; z-index:50;
  display:inline-flex; align-items:center; gap:10px;
  min-height:46px; padding:10px 20px 10px 16px;
  border-radius:var(--r-pill); background:var(--bg); color:var(--text);
  border:1px solid var(--border); box-shadow:var(--shadow-fab);
  font-size:14px; font-weight:var(--weight-semibold); line-height:1.5;
  transition:border-color var(--duration);
}
.dl-fab:hover { border-color:var(--accent-dark) }

/* 仅预览工具，不参与正式页面的信息架构。 */
.preview-section { margin-top:var(--section-gap) }
.preview-section > h2 { margin-bottom:40px }
.palette-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px }
.swatch { display:flex; flex-direction:column; min-width:0; border:1px solid var(--border); border-radius:var(--r-btn); overflow:hidden; background:var(--bg); color:var(--text) }
.swatch-color { height:72px }
.swatch code { display:block; padding:12px; font-size:var(--fs-tiny) }
.swatch-bg { background:var(--bg) }
.swatch-panel { background:var(--bg-panel) }
.swatch-panel2 { background:var(--bg-panel-2) }
.swatch-border { background:var(--border) }
.swatch-accent { background:var(--accent) }
.swatch-hover { background:var(--accent-hover) }
.swatch-soft { background:var(--accent-soft) }
.swatch-dark { background:var(--accent-dark) }
.swatch-text { background:var(--text) }
.swatch-muted { background:var(--text-muted) }
.swatch-success { background:var(--success) }
.swatch-warn { background:var(--warn) }
.swatch-error { background:var(--error) }
.swatch-on-dark { background:var(--on-dark) }
.swatch-on-muted { background:var(--on-dark-muted) }
.swatch-on-faint { background:var(--on-dark-faint) }
.swatch-device { background:var(--device) }
.swatch-edge { background:var(--device-edge) }
.swatch-ink { background:var(--screen-ink) }
.swatch-olive { background:var(--olive-deep) }
.swatch-mid { background:var(--green-mid) }
.swatch-night { background:var(--green-night) }
.preview-buttons { display:flex; flex-wrap:wrap; align-items:center; gap:18px }
.preview-dark { padding:32px; border-radius:var(--r-lg); background:var(--bg-panel); color:var(--on-dark) }
.token-list { columns:2; column-gap:40px; padding:0; list-style:none }
.token-list li { break-inside:avoid; padding-block:8px; border-bottom:1px solid var(--border); font-size:14px }
.preview-type-title { font-size:var(--fs-h1); font-weight:var(--weight-heavy); line-height:1.12 }
@media (max-width:1100px) {
  .feature-list { padding-inline:24px }
  .feature-detail { padding-left:24px }
  .feature-detail [role="tabpanel"] { padding:32px }
}
@media (max-width:900px) {
  .visual { justify-content:center }
  .stage { width:100% }
  .set { aspect-ratio:700 / 640 }
  .ipad { display:none }
  .iphone { left:31%; top:2%; width:38% }
  .rule { font-size:1.7cqw }
  .floor { top:76% }
  .device::after { animation:none; opacity:.9 }
  .feature-layout { display:block; padding-top:24px }
  .feature-list[role="tablist"] { flex-direction:row; overflow-x:auto; padding:4px 24px 20px; border-right:0; gap:8px }
  .feature-list [role="tab"] { flex:none; min-height:48px; border-radius:var(--r-pill); padding:6px 14px; border:1px solid var(--border); background:var(--bg); color:var(--text) }
  .feature-list [role="tab"][aria-selected="true"] { background:var(--accent); color:var(--text); border-color:var(--accent) }
  .feature-list [role="tab"]::before { display:none }
  .feature-list .tab-icon { width:28px; height:28px }
  .feature-detail { padding:0 }
  .feature-detail [role="tabpanel"] { min-height:0; border-radius:var(--r-lg) var(--r-lg) 0 0; padding:32px 24px 40px }
}
@media (max-width:640px) {
  .lime-section { margin-inline:20px; padding:64px 24px }
  .lime-section h2 { font-size:32px }
  .fact-row { justify-content:center; gap:6px }
  .fact-chip { padding:5px 9px }
  .official-shot { margin-inline:auto }
  .shot-row { flex-direction:column; align-items:center }
  .device-entry { padding:28px }
  .callout { padding:20px }
  .toc { flex-wrap:nowrap; overflow-x:auto; padding:12px 16px; border-radius:var(--r-btn) }
  .toc a { flex:none }
  .dl-fab { right:16px; bottom:16px }
  .palette-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .token-list { columns:1 }
  .store-guide-card { padding:24px }
}
@media (prefers-reduced-motion:reduce) {
  .device::after { animation:none; opacity:1 }
  .rule-text::after { animation:none; transform:none }
  .app-store-button,.dl-fab { transition:none }
}