.hero { position:relative; text-align:center; padding:52px 24px 0; overflow-x:clip; }
.hero__copy { max-width:1140px; margin:0 auto; display:flex; flex-direction:column; align-items:center; }
.tag {
  display:inline-flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px;
  max-width:100%; padding:6px 15px 6px 12px;
  border:1px solid var(--c-line); border-radius:var(--r-pill);
  background:var(--c-bg); color:var(--c-text); box-shadow:var(--sh-near);
  font-size:13px;
}
.tag__dot { position:relative; flex-shrink:0; width:7px; height:7px; border-radius:var(--r-round); background:var(--c-ink); }
.tag__dot::after {
  content:""; position:absolute; inset:0; border-radius:var(--r-round);
  background:var(--c-ink-ring); animation:breathe 2.8s ease-out infinite;
}
.tag__sep { color:var(--c-muted); }
.tag__dev { color:var(--c-muted); overflow-wrap:anywhere; }
.hero h1 {
  margin:26px 0 0; font-family:var(--f-display); font-weight:var(--weight-regular);
  font-size:clamp(30px,3.2vw,46px); line-height:1.16;
  letter-spacing:var(--tracking-heading); color:var(--c-text); text-wrap:balance;
}
.lede { margin:22px 0 0; max-width:640px; font-size:16px; line-height:1.7; color:var(--c-muted); }
.lede strong { color:var(--c-text); font-weight:var(--weight-medium); }
.devices {
  list-style:none; margin:18px 0 0; padding:0;
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:4px 6px;
}
.devices a {
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 10px; border-radius:var(--r-sm);
  color:var(--c-muted); text-decoration:none; font-size:13.5px;
  transition:color var(--duration) ease,background-color var(--duration) ease;
}
.devices a:hover { color:var(--c-text); background:var(--c-panel); }
.devices a:hover .ico { color:var(--c-ink); }
.devices .ico { width:18px; height:18px; flex-shrink:0; }
.devices__rule { width:1px; height:16px; background:var(--c-line); margin:0 8px; }
.chip,.badge {
  display:inline-flex; align-items:center; gap:6px;
  max-width:100%; overflow-wrap:anywhere;
  padding:3px 9px; border:1px solid var(--c-line); border-radius:var(--r-xs);
  background:var(--c-panel); color:var(--c-text);
  font-family:var(--f-mono); font-size:12px; letter-spacing:.01em;
}
.badge { font-family:var(--f-body); border-radius:var(--r-pill); }
.facts {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:8px; margin:24px 0 0; padding:0; list-style:none;
}
.facts li {
  min-width:0; max-width:100%; padding:7px 11px;
  border:1px solid var(--c-line); border-radius:var(--r-pill);
  background:var(--c-bg); color:var(--c-muted);
  font-family:var(--f-mono); font-size:12px; overflow-wrap:anywhere;
}
.facts strong { color:var(--c-text); font-weight:var(--weight-regular); }
.stage { position:relative; margin-top:46px; padding-bottom:150px; overflow-x:clip; }
.stage::before {
  content:""; position:absolute; left:0; right:0; bottom:0;
  top:calc(var(--ipad-w) / var(--ipad-ratio) * .4);
  background:linear-gradient(180deg,var(--c-bg) 0%,var(--c-panel-2) 38%,var(--c-bg) 100%);
  z-index:0; pointer-events:none;
}
.device { position:relative; z-index:1; width:var(--ipad-w); margin:0 auto; }
.device::before {
  content:""; position:absolute; left:50%; top:42%; width:140%; height:92%;
  transform:translate(-50%,-50%);
  background:radial-gradient(50% 50% at 50% 50%,var(--c-halo-a) 0%,var(--c-halo-b) 46%,var(--c-clear) 74%);
  z-index:0; pointer-events:none;
}
.ipad {
  position:relative; z-index:1; width:100%; aspect-ratio:var(--ipad-ratio);
  padding:18px; border-radius:var(--r-device);
  background:var(--c-bezel); color:var(--c-on-ink); box-shadow:var(--sh-ipad);
}
.ipad::before {
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow:inset 0 0 0 1px var(--c-sheen),inset 0 1px 0 1px var(--c-sheen);
  pointer-events:none;
}
.ipad::after {
  content:""; position:absolute; left:6px; top:50%;
  width:6px; height:6px; margin-top:-3px; border-radius:var(--r-round);
  background:var(--c-camera); box-shadow:0 0 0 1px var(--c-camera-ring);
}
.screen {
  position:relative; height:100%; overflow:hidden; border-radius:var(--r-screen);
  background:linear-gradient(180deg,var(--c-screen-top) 0%,var(--c-bg) 40%); color:var(--c-text);
}
.sheet__bar {
  position:relative; display:flex; align-items:center; gap:7px;
  height:40px; padding:0 18px; border-bottom:1px solid var(--c-line);
}
.sheet__bar i { display:block; flex-shrink:0; width:9px; height:9px; border-radius:var(--r-round); }
.sheet__bar i:nth-child(1) { background:var(--c-err); }
.sheet__bar i:nth-child(2) { background:var(--c-warn); }
.sheet__bar i:nth-child(3) { background:var(--c-ok); }
.sheet__title {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-family:var(--f-mono); font-size:12.5px; color:var(--c-muted);
}
.rules { position:relative; list-style:none; margin:0; padding:26px 48px 0 36px; }
.rules::after {
  content:""; position:absolute; top:18px; right:calc(48px + var(--note-w));
  width:1px; height:calc(var(--row-h) * 8 + 8px); background:var(--c-line);
}
.row {
  display:grid; grid-template-columns:30px max-content minmax(40px,1fr) var(--note-w);
  align-items:center; height:var(--row-h);
  animation:rowIn .5s var(--ease) both;
}
.row > * { min-width:0; }
.row:nth-child(1) { animation-delay:0s; }
.row:nth-child(2) { animation-delay:.07s; }
.row:nth-child(3) { animation-delay:.14s; }
.row:nth-child(4) { animation-delay:.21s; }
.row:nth-child(5) { animation-delay:.28s; }
.row:nth-child(6) { animation-delay:.35s; }
.row:nth-child(7) { animation-delay:.42s; }
.row:nth-child(8) { animation-delay:.49s; }
.ln { font-family:var(--f-mono); font-size:12px; color:var(--c-muted); text-align:right; user-select:none; }
.src { font-family:var(--f-mono); font-size:15px; color:var(--c-muted); padding-left:18px; white-space:nowrap; letter-spacing:0; }
.src--comment { font-size:12.5px; }
.kw { color:var(--c-ink); font-weight:var(--weight-medium); }
.pn { color:var(--c-muted); }
.caret {
  display:inline-block; width:8px; height:17px; vertical-align:-3px;
  background:var(--c-ink); opacity:.55; border-radius:var(--r-caret);
}
.lead {
  position:relative; height:1px; margin-left:16px;
  background-image:repeating-linear-gradient(90deg,var(--c-leader) 0 4px,var(--c-clear) 4px 8px);
}
.lead::before {
  content:""; position:absolute; left:-2px; top:-2px;
  width:5px; height:5px; border-radius:var(--r-round); background:var(--c-ink);
}
.lead::after {
  content:""; position:absolute; right:-4px; top:-3px; width:7px; height:7px;
  border-radius:var(--r-round); background:var(--c-bg); border:1px solid var(--c-leader);
}
.note { padding-left:20px; font-family:var(--f-body); font-size:13.5px; color:var(--c-text); white-space:nowrap; }

.app-store {
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  min-height:56px; padding:10px 22px;
  border:1px solid var(--c-clear); border-radius:var(--r-btn);
  background:var(--c-ink); color:var(--c-on-ink); box-shadow:var(--sh-btn);
  text-decoration:none; text-align:left;
  transition:background-color var(--duration) ease,transform var(--duration) ease;
}
.app-store:hover,.app-store.is-hover { background:var(--c-ink-deep); color:var(--c-on-ink); transform:translateY(-1px); }
.app-store .apple { width:26px; height:28px; }
.app-store__copy { display:block; line-height:1.35; }
.app-store__copy small { display:block; font-size:11px; }
.app-store__copy strong { display:block; font-size:16px; font-weight:var(--weight-medium); }
.app-store--lead { min-height:64px; padding:14px 28px; }
.store-endcap {
  padding:32px; border:1px solid var(--c-line); border-radius:var(--r-card);
  background:var(--c-panel); color:var(--c-text); box-shadow:var(--sh-float);
}
.store-endcap h2,.store-endcap h3 { margin-top:0; font-size:26px; }
.store-endcap p { color:var(--c-muted); }
.dl-fab {
  position:fixed; right:24px; bottom:calc(24px + env(safe-area-inset-bottom,0px)); z-index:40;
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px; padding:0 18px 0 15px;
  border:1px solid var(--c-line); border-radius:var(--r-pill);
  background:var(--c-bg); color:var(--c-ink);
  font-size:14px; font-weight:var(--weight-medium); text-decoration:none;
  box-shadow:var(--sh-mid),var(--sh-float);
  transition:transform var(--duration) ease,border-color var(--duration) ease;
}
.dl-fab .apple { width:15px; height:15px; margin-top:-2px; }
.dl-fab:hover { transform:translateY(-2px); border-color:var(--c-gutter); }

.tabs { min-width:0; }
.feature-tabs {
  display:grid; grid-template-columns:minmax(220px,.85fr) minmax(0,1.5fr);
  gap:64px; align-items:start;
}
.feature-tabs [role="tablist"] { position:sticky; top:calc(var(--header-height) + 32px); }
[role="tablist"] { display:flex; gap:8px; min-width:0; }
.feature-tabs [role="tablist"] { flex-direction:column; gap:0; }
[role="tab"] {
  position:relative; min-height:48px; padding:12px 16px;
  border:0; border-bottom:1px solid var(--c-line);
  background:var(--c-clear); color:var(--c-muted);
  font-family:var(--f-body); font-size:18px; text-align:left;
  font-weight:var(--weight-regular);
}
.feature-tabs [role="tab"] { padding:22px 20px; font-size:23px; }
[role="tab"][aria-selected="true"] { background:var(--c-ink); color:var(--c-on-ink); }
[role="tab"][aria-selected="true"]::before {
  content:""; position:absolute; left:0; top:20%; bottom:20%; width:2px;
  background:var(--c-on-ink);
}
[role="tabpanel"] { min-width:0; }
.tab-panel {
  padding:36px; border:1px solid var(--c-line); border-radius:var(--r-card);
  background:var(--c-bg); color:var(--c-text); box-shadow:var(--sh-float);
}
.tab-panel h3 { margin:0 0 20px; }
.annotated-code { margin-top:28px; }
.annotated-code pre { margin-bottom:0; background:var(--c-panel); color:var(--c-text); }
.code-note {
  position:relative; margin:14px 0 0 24px; padding-left:20px;
  color:var(--c-muted); font-size:13px;
}
.code-note::before {
  content:""; position:absolute; left:0; top:-14px; height:25px; width:12px;
  border-left:1px dashed var(--c-leader); border-bottom:1px dashed var(--c-leader);
}
.toc {
  position:sticky; top:var(--header-height); z-index:20;
  display:flex; flex-wrap:wrap; gap:8px;
  padding:12px 16px; margin-bottom:32px;
  border:1px solid var(--c-line); border-radius:var(--r-btn);
  background:var(--c-bg); color:var(--c-text); box-shadow:var(--sh-near);
}
.toc a { display:inline-flex; align-items:center; min-height:36px; padding:4px 10px; color:var(--c-muted); text-decoration:none; font-size:14px; }
.toc a:hover,.toc a[aria-current="location"] { color:var(--c-ink); background:var(--c-panel); border-radius:var(--r-xs); }
.toc--flow { position:static; }
.faq-item { border-bottom:1px solid var(--c-line); }
.faq-item summary {
  position:relative; list-style:none; cursor:pointer; min-height:64px;
  padding:20px 36px 20px 0; font-size:17px; color:var(--c-text);
}
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; position:absolute; right:8px; top:18px; font-size:22px; color:var(--c-ink); }
.faq-item[open] summary::after { content:"−"; }
.faq-item__body { padding-bottom:24px; color:var(--c-muted); }
.faq-item__body p:last-child { margin-bottom:0; }
.term-card {
  padding:28px; min-width:0; border:1px solid var(--c-line);
  border-radius:var(--r-card); background:var(--c-bg); color:var(--c-text); box-shadow:var(--sh-float);
}
.term-card dt { font-family:var(--f-mono); color:var(--c-ink); font-size:18px; margin-bottom:12px; overflow-wrap:anywhere; }
.term-card dd { margin:0; color:var(--c-muted); }
.article-card {
  display:flex; flex-direction:column; align-items:flex-start; gap:18px;
  min-width:0; padding:28px;
  border:1px solid var(--c-line); border-radius:var(--r-card);
  background:var(--c-bg); color:var(--c-text); box-shadow:var(--sh-float);
}
.article-card h3 { margin:0; font-size:22px; line-height:1.5; }
.article-card h3 a { color:var(--c-text); text-decoration:none; }
.article-card h3 a:hover { color:var(--c-ink); text-decoration:underline; }
.article-card p { margin:0; color:var(--c-muted); font-size:14px; }
.article-card__link { margin-top:auto; font-size:14px; }
.device-card {
  display:flex; flex-direction:column; align-items:flex-start; gap:20px;
  min-width:0; padding:36px;
  border:1px solid var(--c-line); border-radius:var(--r-card);
  background:var(--c-bg); color:var(--c-text); box-shadow:var(--sh-float);
}
.device-card > .ico { width:40px; height:48px; color:var(--c-ink); }
.device-card h3 { margin:0; font-size:28px; }
.device-card p { margin:0; color:var(--c-muted); }
.device-card .btn { margin-top:auto; }
.callout {
  margin:28px 0; padding:22px 24px;
  border:1px solid var(--c-line); border-left:2px solid var(--c-ink);
  border-radius:var(--r-sm);
  background:var(--c-panel); color:var(--c-text);
}
.callout p:last-child { margin-bottom:0; }
.official-shot { width:100%; max-width:280px; margin-inline:auto; 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(--c-line); outline-offset:-1px; }
.official-shot figcaption { margin-top:12px; color:var(--c-muted); font-size:13px; line-height:1.7; }
.shot-row { display:flex; align-items:flex-start; justify-content:center; flex-wrap:wrap; gap:32px; }
.shot-placeholder {
  width:100%; aspect-ratio:750 / 1334;
  display:grid; place-items:center; padding:24px;
  border:1px solid var(--c-line); border-radius:var(--r-shot);
  background:linear-gradient(180deg,var(--c-panel-2),var(--c-bg));
  color:var(--c-muted); text-align:center; font-family:var(--f-mono); font-size:13px;
}
.table-scroll { max-width:100%; min-width:0; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.data-table { width:100%; border-collapse:collapse; text-align:left; }
.data-table caption { text-align:left; margin-bottom:12px; color:var(--c-muted); }
.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; vertical-align:top;
  border-bottom:1px solid var(--c-line);
  overflow-wrap:normal; word-break:normal;
}
.data-table th,.prose table th,.article-body table th {
  background:var(--c-panel); color:var(--c-text); font-weight:var(--weight-medium);
}
.data-table td,.prose table td,.article-body table td { background:var(--c-bg); color:var(--c-text); }
.prose table,.article-body 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,.article-body table code,.data-table code { overflow-wrap:anywhere; word-break:normal; }
.prose :is(div,section,article),.article-body :is(div,section,article) { min-width:0; max-width:100%; }

.preview-section { padding-top:72px; padding-bottom:72px; }
.preview-section h2 { margin-top:0; margin-bottom:32px; }
.preview-stack { display:flex; flex-wrap:wrap; align-items:center; gap:16px; }
.preview-stack--start { align-items:flex-start; }
.preview-small { max-width:780px; }
.swatches { display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:20px; }
.swatch { min-width:0; margin:0; }
.swatch__paint { height:72px; border:1px solid var(--c-line); border-radius:var(--r-sm); }
.swatch figcaption { padding-top:8px; color:var(--c-muted); font-family:var(--f-mono); font-size:12px; overflow-wrap:anywhere; }
.swatch--bg { background:var(--c-bg); }
.swatch--panel { background:var(--c-panel); }
.swatch--panel2 { background:var(--c-panel-2); }
.swatch--line { background:var(--c-line); }
.swatch--ink { background:var(--c-ink); }
.swatch--deep { background:var(--c-ink-deep); }
.swatch--text { background:var(--c-text); }
.swatch--muted { background:var(--c-muted); }
.swatch--ok { background:var(--c-ok); }
.swatch--warn { background:var(--c-warn); }
.swatch--err { background:var(--c-err); }
.swatch--on { background:var(--c-on-ink); }
.swatch--halo-a { background:var(--c-halo-a); }
.swatch--halo-b { background:var(--c-halo-b); }
.swatch--screen { background:var(--c-screen-top); }
.swatch--bezel { background:var(--c-bezel); }
.swatch--metal { background:var(--c-metal); }
.swatch--sheen { background:var(--c-sheen); }
.swatch--camera { background:var(--c-camera); }
.swatch--camera-ring { background:var(--c-camera-ring); }
.swatch--leader { background:var(--c-leader); }
.swatch--gutter { background:var(--c-gutter); }
.swatch--ring { background:var(--c-ink-ring); }
.swatch--veil { background:var(--c-veil); }
.swatch--clear { background:var(--c-clear); }

@keyframes breathe {
  0% { transform:scale(1); opacity:1; }
  70%,100% { transform:scale(2.6); opacity:0; }
}
@keyframes rowIn {
  from { opacity:0; transform:translateY(6px); }
  to { opacity:1; transform:none; }
}
@media (max-width:1100px) {
  .src { font-size:13.5px; }
  .rules { padding:22px 32px 0 24px; }
  .rules::after { right:calc(32px + var(--note-w)); }
  .note { font-size:12.5px; padding-left:16px; }
  .feature-tabs { gap:32px; grid-template-columns:minmax(190px,.8fr) minmax(0,1.4fr); }
  .feature-tabs [role="tab"] { font-size:20px; }
}
@media (max-width:768px) {
  .feature-tabs { display:block; }
  .feature-tabs [role="tablist"] {
    position:static; flex-direction:row; overflow-x:auto; gap:20px; margin-bottom:24px;
  }
  .feature-tabs [role="tab"] { flex-shrink:0; font-size:17px; padding:14px 4px; white-space:nowrap; }
  .feature-tabs [role="tab"][aria-selected="true"]::before { top:auto; bottom:0; left:0; width:100%; height:2px; }
  .tab-panel { padding:24px; }
  .toc { flex-wrap:nowrap; overflow-x:auto; }
  .toc a { flex-shrink:0; white-space:nowrap; }
  .hero h1 { font-size:clamp(24px,6.6vw,30px); }
}
@media (max-width:720px) {
  :root { --ipad-w:92vw; --row-h:auto; }
  .hero { padding:34px 18px 0; }
  .hero h1 { margin-top:22px; }
  .actions { margin-top:24px; }
  .btn { min-height:48px; padding-inline:18px; }
  .lede { font-size:15px; }
  .devices__rule { display:none; }
  .stage { margin-top:36px; padding-bottom:80px; }
  .stage::before { top:30%; }
  .ipad { aspect-ratio:auto; padding:10px; border-radius:var(--r-device-mobile); }
  .ipad::after { left:2px; width:5px; height:5px; margin-top:-2.5px; }
  .sheet__bar { height:34px; padding:0 12px; }
  .sheet__bar i { width:7px; height:7px; }
  .sheet__title { font-size:11px; }
  .rules { padding:14px 14px 18px 8px; }
  .rules::after { display:none; }
  .row { grid-template-columns:22px minmax(0,1fr); height:auto; padding:5px 0; row-gap:2px; }
  .src { font-size:12px; padding-left:12px; white-space:normal; overflow-wrap:anywhere; }
  .src--comment { font-size:11px; }
  .lead { display:none; }
  .note { grid-column:2; padding-left:12px; font-size:12px; color:var(--c-muted); white-space:normal; }
}
@media (max-width:640px) {
  .facts { flex-direction:row; flex-wrap:wrap; gap:6px; }
  .facts li { font-size:11px; padding:6px 9px; }
  .device-card,.article-card,.term-card { padding:24px; }
  .shot-row { flex-direction:column; align-items:center; }
  .official-shot { max-width:min(280px,100%); }
  .dl-fab { right:14px; bottom:calc(14px + env(safe-area-inset-bottom,0px)); min-height:44px; padding:0 14px 0 12px; font-size:13px; }
  .store-endcap { padding:24px; }
  .tag { gap:6px; font-size:11px; }
}
@media (prefers-reduced-motion:reduce) {
  .tag__dot::after { animation:none; opacity:0; }
  .row { animation:none; }
}
@supports not (overflow:clip) {
  .hero,.stage { overflow-x:hidden; }
}