.protocols { display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:8px;margin:0;padding:0;list-style:none }
.protocols__label { font-family:var(--font-mono);font-size:10.5px;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);margin-right:4px }
.protocols__chip,.badge {
  display:inline-flex;align-items:center;gap:7px;min-height:26px;max-width:100%;padding:3px 11px;
  background:var(--bg);color:var(--text-muted);border:1px solid var(--border);border-radius:var(--r-pill);
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.02em;overflow-wrap:anywhere;
}
.badge--accent { background:var(--accent-a06);color:var(--accent-dark);border-color:var(--accent-a22) }
.badge--success { color:var(--success-ink) }
.badge--warn { color:var(--warn-ink) }
.badge--error { color:var(--error-ink) }
.badge__dot { width:6px;height:6px;border-radius:var(--r-pill);background:currentColor;flex-shrink:0 }
.badge-row,.fact-pills { display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0;list-style:none }
.fact-pills li {
  display:inline-flex;align-items:center;gap:7px;max-width:100%;min-width:0;min-height:30px;
  padding:5px 11px;background:var(--bg);color:var(--text-muted);
  border:1px solid var(--border);border-radius:var(--r-pill);font-size:12px;overflow-wrap:anywhere;
}
.fact-pills strong { color:var(--text);font-weight:var(--weight-semibold) }
.fact-pills a { color:var(--accent-dark) }
.rulecard {
  position:relative;width:min(580px,100%);min-width:0;margin-top:24px;
  background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:var(--r-card);
  box-shadow:var(--shadow-card);overflow:hidden;
}
.rulecard::before { content:"";position:absolute;top:0;left:0;right:0;height:1px;z-index:3;background:linear-gradient(90deg,var(--clear) 4%,var(--accent) 34%,var(--accent-2) 68%,var(--clear) 96%) }
.rulecard__radio { position:absolute;opacity:0;pointer-events:none;width:1px;height:1px }
.rulecard__head { display:flex;align-items:stretch;height:46px;padding:0 8px 0 18px;background:var(--bg-soft);color:var(--text);border-bottom:1px solid var(--border) }
.rulecard__tabs { display:flex;align-items:stretch;gap:22px;min-width:0 }
.rulecard__tab { position:relative;display:flex;align-items:center;font-family:var(--font-mono);font-size:12px;font-weight:var(--weight-medium);letter-spacing:.05em;color:var(--text-muted);cursor:pointer;user-select:none }
.rulecard__tab::after { content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--text);opacity:0;transform:scaleX(.6);transition:opacity var(--motion-fast),transform var(--motion-fast) }
.rulecard__section { margin-left:auto;align-self:center;padding-right:10px;font-family:var(--font-mono);font-size:11px;color:var(--text-muted);letter-spacing:.04em }
.rulecard__tab.is-active { color:var(--text) }
.rulecard__tab.is-active::after { opacity:1;transform:scaleX(1) }
#rk-suffix:checked ~ .rulecard__head label[for="rk-suffix"],
#rk-geoip:checked ~ .rulecard__head label[for="rk-geoip"],
#rk-final:checked ~ .rulecard__head label[for="rk-final"] { color:var(--text) }
#rk-suffix:checked ~ .rulecard__head label[for="rk-suffix"]::after,
#rk-geoip:checked ~ .rulecard__head label[for="rk-geoip"]::after,
#rk-final:checked ~ .rulecard__head label[for="rk-final"]::after { opacity:1;transform:scaleX(1) }
#rk-suffix:focus-visible ~ .rulecard__head label[for="rk-suffix"],
#rk-geoip:focus-visible ~ .rulecard__head label[for="rk-geoip"],
#rk-final:focus-visible ~ .rulecard__head label[for="rk-final"] { outline:2px solid var(--accent);outline-offset:4px }
.rulecard__body { display:flex;align-items:center;gap:14px;min-height:66px;padding:14px 10px 14px 18px }
.rulecard__gutter { width:22px;flex-shrink:0;padding-right:12px;border-right:1px solid var(--border);font-family:var(--font-mono);font-size:12px;line-height:24px;text-align:right;color:var(--text-muted) }
.rulecard__code { flex:1;min-width:0;overflow-x:auto;scrollbar-width:thin }
.rulecard__line { display:none;margin:0;font-family:var(--font-mono);font-size:15px;line-height:24px;letter-spacing:.01em;white-space:nowrap;color:var(--text) }
.rulecard__line.is-active { display:block }
#rk-suffix:checked ~ .rulecard__body .rulecard__line--suffix,
#rk-geoip:checked ~ .rulecard__body .rulecard__line--geoip,
#rk-final:checked ~ .rulecard__body .rulecard__line--final { display:block }
.tok-key { color:var(--text);font-weight:var(--weight-semibold) }
.tok-sep { color:var(--text-muted) }
.tok-val { color:var(--text-muted) }
.tok-pol { color:var(--accent);font-weight:var(--weight-semibold) }
.rulecard__copy {
  display:grid;place-items:center;width:34px;height:34px;flex-shrink:0;
  background:var(--clear);color:var(--text-muted);border:1px solid var(--clear);border-radius:var(--r-btn);
}
.rulecard__copy svg { width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round }
.rulecard__copy:hover { background:var(--bg-panel);color:var(--text);border-color:var(--border) }
.devices { display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px;margin:34px 0 0;padding:0;list-style:none }
.devices__link { display:flex;align-items:center;gap:7px;min-height:32px;padding:5px 10px;border-radius:var(--r-btn);font-size:13px;font-weight:var(--weight-medium);color:var(--text-muted) }
.devices__link svg { width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round }
.devices__link:hover { background:var(--bg);color:var(--text) }
.devices__sep { width:1px;height:16px;margin:0 6px;background:var(--border-strong);flex-shrink:0 }
.devices__store { display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:4px 12px 4px 10px;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:var(--r-pill);box-shadow:var(--shadow-hair);font-size:12.5px;font-weight:var(--weight-semibold) }
.devices__store svg { width:13px;height:13px }
.appstore-button {
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  min-height:52px;max-width:100%;padding:9px 22px;
  background:var(--text);color:var(--on-dark);border:1px solid var(--text);border-radius:var(--r-btn);
  box-shadow:var(--shadow-cta);text-align:left;
  transition:background-color var(--motion-fast),box-shadow var(--motion-fast),transform var(--motion-fast);
}
.appstore-button > svg { width:24px;height:27px;fill:currentColor }
.appstore-button__text { display:block;min-width:0;line-height:1.2 }
.appstore-button__text small { display:block;font-size:10px;font-weight:var(--weight-medium);margin-bottom:3px }
.appstore-button__text strong { display:block;font-size:16px;font-weight:var(--weight-semibold) }
.appstore-button:hover { background:var(--ink);color:var(--on-dark);transform:translateY(-1px);box-shadow:var(--shadow-cta-hover) }
.appstore-button--primary { background:var(--accent);color:var(--on-dark);border-color:var(--accent);min-height:60px;padding:12px 28px }
.appstore-button--primary:hover { background:var(--accent-dark);color:var(--on-dark);border-color:var(--accent-dark) }
.appstore-button[aria-disabled="true"] { background:var(--bg-panel);color:var(--text-muted);border-color:var(--border);box-shadow:none;pointer-events:none }
.tabs { min-width:0 }
.tabs [role="tablist"] { display:flex;align-items:center;gap:var(--space-2);overflow-x:auto;max-width:100%;padding:4px;margin-bottom:var(--space-5);border-bottom:1px solid var(--border) }
.tabs [role="tab"] {
  flex-shrink:0;min-height:44px;padding:10px 16px;
  background:var(--clear);color:var(--text-muted);border:0;border-bottom:2px solid var(--clear);
  border-radius:var(--r-btn) var(--r-btn) 0 0;font-size:var(--text-sm);font-weight:var(--weight-semibold);
}
.tabs [role="tab"][aria-selected="true"] { background:var(--bg-panel);color:var(--accent-dark);border-bottom-color:var(--accent) }
.tabs [role="tabpanel"] { min-width:0 }
.tabs--features [role="tablist"] { display:block;overflow:visible;border:0;margin:0;padding:0 }
.feature-layout { display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--space-8);align-items:start }
.feature-item { border-bottom:1px solid var(--dark-border);padding-top:var(--space-2);padding-bottom:var(--space-2) }
.tabs--features [role="tab"] {
  display:flex;align-items:center;gap:14px;width:100%;min-height:58px;padding:14px 0;
  text-align:left;font-family:var(--font-mono);font-size:13px;letter-spacing:.08em;
  border:0;border-radius:0;background:var(--clear);color:var(--dark-muted);white-space:normal;
}
.tabs--features [role="tab"]::before { content:"";width:9px;height:9px;flex-shrink:0;border:1px solid var(--dark-muted);border-radius:var(--r-pill) }
.tabs--features [role="tab"]::after { content:"⌄";margin-left:auto;font-size:18px;flex-shrink:0 }
.tabs--features [role="tab"][aria-selected="true"] { background:var(--clear);color:var(--on-dark) }
.tabs--features [role="tab"][aria-selected="true"]::before { background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-a14) }
.tabs--features [role="tab"][aria-selected="true"]::after { content:"⌃" }
.feature-description { padding:0 0 24px 23px;color:var(--dark-muted);font-size:var(--text-sm);line-height:1.85 }
.feature-description p { margin-bottom:var(--space-4) }
.feature-terms { display:grid;gap:8px;font-family:var(--font-mono);font-size:12px }
.feature-terms .is-active { color:var(--accent-light) }
.feature-panel { min-width:0;padding:var(--space-6);border:1px solid var(--dark-border);border-radius:var(--r-card);background:var(--bg-panel-3);color:var(--on-dark);box-shadow:0 20px 60px -26px var(--accent-a40) }
.feature-panel pre { background:var(--bg-panel-3);color:var(--on-dark);border-color:var(--dark-border) }
.feature-panel .tok-key { color:var(--on-dark) }
.feature-panel .tok-val,.feature-panel .tok-sep { color:var(--dark-muted) }
.feature-panel .tok-pol { color:var(--accent-light) }
.feature-panel__label { margin-bottom:var(--space-5);font-family:var(--font-mono);font-size:11px;letter-spacing:var(--tracking-label);color:var(--dark-muted) }
.feature-panel .group-list { margin:0;padding:0;list-style:none }
.group-list li { display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4);border-bottom:1px solid var(--dark-border);font-family:var(--font-mono);font-size:var(--text-sm) }
.group-list li:last-child { border-bottom:0 }
.group-list li::after { content:"›";margin-left:auto;color:var(--dark-muted) }
.status-strip { display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-5);padding-top:var(--space-4);padding-bottom:var(--space-4);margin-bottom:var(--space-8);border-top:1px solid var(--dark-border);border-bottom:1px solid var(--dark-border);font:var(--weight-medium) 11px/1.6 var(--font-mono);letter-spacing:.08em;color:var(--dark-muted) }
.toc { display:flex;align-items:center;gap:var(--space-2);max-width:100%;overflow-x:auto;padding:var(--space-3);border:1px solid var(--border);border-radius:var(--r-card);background:var(--bg);color:var(--text);scrollbar-width:thin }
.toc a { display:block;flex-shrink:0;min-height:44px;padding:10px 14px;border-radius:var(--r-btn);font-size:var(--text-sm);white-space:nowrap }
.toc a:hover,.toc a[aria-current="location"] { background:var(--bg-panel);color:var(--accent-dark) }
.toc--sticky { position:sticky;top:var(--space-3);z-index:10 }
.faq-item { border-bottom:1px solid var(--border);background:var(--bg);color:var(--text) }
.faq-item summary { position:relative;padding:22px 38px 22px 0;min-height:56px;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:8px;top:22px;color:var(--accent);font-family:var(--font-mono) }
.faq-item[open] summary::after { content:"−" }
.faq-item__body { padding-right:var(--space-6);padding-bottom:var(--space-5);color:var(--text-muted);line-height:var(--leading-prose) }
.faq-item__body p:last-child { margin-bottom:0 }
.term-card { border:1px solid var(--border);border-radius:var(--r-card);padding:var(--space-5);background:var(--bg);color:var(--text);box-shadow:var(--shadow-hair) }
.term-card h3 { margin:0 0 var(--space-3);font-family:var(--font-mono);font-size:18px;letter-spacing:0;overflow-wrap:anywhere }
.term-card p { color:var(--text-muted);font-size:var(--text-sm) }
.term-card__category { display:block;margin-bottom:var(--space-3);font-size:var(--text-xs);color:var(--accent-dark) }
.official-shot { width:100%;max-width:280px;min-width:0;flex-shrink:0;margin:0 auto }
.official-shot img { display:block;width:100%;height:auto;border-radius:10px }
.official-shot img { outline:1px solid var(--border);outline-offset:-1px }
.official-shot figcaption { margin-top:var(--space-3);font-size:var(--text-xs);line-height:1.7;color:var(--text-muted);text-align:center }
.shot-layout { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,280px);gap:var(--space-7);align-items:start }
.device-card { display:flex;align-items:flex-start;gap:var(--space-5);padding:var(--space-6);background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--shadow-hair) }
.device-card > svg { width:40px;height:48px;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;color:var(--accent) }
.device-card__body { min-width:0 }
.device-card h3 { margin-top:0;margin-bottom:var(--space-3) }
.device-card p { color:var(--text-muted);font-size:var(--text-sm) }
.device-card__link { display:inline-flex;align-items:center;min-height:44px;color:var(--accent-dark);font-size:var(--text-sm);font-weight:var(--weight-semibold) }
.article-card { display:block;min-width:0;padding:var(--space-6);background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--shadow-hair);transition:border-color var(--motion-fast),box-shadow var(--motion-fast) }
.article-card:hover { border-color:var(--accent-a40);box-shadow:var(--shadow-nav) }
.article-card__meta { display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;font-size:var(--text-xs);color:var(--text-muted) }
.article-card h3 { margin-top:var(--space-5);margin-bottom:var(--space-4);font-size:20px;line-height:1.5 }
.article-card p { margin-bottom:var(--space-5);font-size:var(--text-sm);color:var(--text-muted) }
.article-card__more { color:var(--accent-dark);font-size:var(--text-sm);font-weight:var(--weight-semibold) }
.section--dark .article-card { background:var(--bg-panel-3);color:var(--on-dark);border-color:var(--dark-border) }
.section--dark .article-card p,.section--dark .article-card__meta { color:var(--dark-muted) }
.section--dark .article-card__more { color:var(--accent-light) }
.callout { margin:var(--space-5) 0;padding:var(--space-5);border:1px solid var(--accent-a22);border-left:3px solid var(--accent);border-radius:var(--r-btn);background:var(--accent-a06);color:var(--text);line-height:1.8 }
.callout p:last-child { margin-bottom:0 }
.callout__title { display:block;margin-bottom:var(--space-2);font-weight:var(--weight-semibold);color:var(--accent-dark) }
.table-scroll { max-width:100%;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border);border-radius:var(--r-card) }
.data-table { width:100%;text-align:left;font-size:var(--text-sm) }
.data-table th,.data-table td,.prose table th,.prose table td {
  min-width:7em;padding:14px 18px;border-bottom:1px solid var(--border);vertical-align:top;overflow-wrap:normal;word-break:normal;
}
.data-table th,.prose table th { background:var(--bg-panel);color:var(--text);font-weight:var(--weight-semibold) }
.data-table td,.prose table td { background:var(--bg);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 }
.prose table code,.data-table code { overflow-wrap:anywhere;white-space:normal }
.dl-fab {
  position:fixed;z-index:25;right:var(--space-5);bottom:calc(var(--space-5) + env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;gap:var(--space-3);max-width:calc(100vw - 32px);min-height:56px;padding:12px 18px;
  background:var(--text);color:var(--on-dark);border:1px solid var(--white-a12);border-radius:var(--r-card);box-shadow:var(--shadow-card);
}
.dl-fab svg { width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round }
.dl-fab strong { display:block;font-size:13px }
.dl-fab small { display:block;font-size:11px;color:var(--dark-muted) }
.dl-fab:hover { background:var(--ink);color:var(--on-dark) }
.article-store-guide { display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);padding:var(--space-6);margin-top:var(--space-7);background:var(--bg-panel);color:var(--text);border:1px solid var(--border);border-radius:var(--r-card) }
.article-store-guide h2 { margin:0 0 var(--space-3);font-size:22px }
.article-store-guide p { margin:0;font-size:var(--text-sm);color:var(--text-muted) }
.article-store-guide > div { min-width:0 }
.preview-colors { display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--space-4) }
.swatch { border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden;background:var(--bg);color:var(--text) }
.swatch__paint { display:block;height:64px;border-bottom:1px solid var(--border) }
.swatch__name { display:block;padding:var(--space-3);font:var(--weight-regular) 11px/1.7 var(--font-mono);overflow-wrap:anywhere }
.paint-bg { background:var(--bg) }
.paint-soft { background:var(--bg-soft) }
.paint-panel { background:var(--bg-panel) }
.paint-dark { background:var(--bg-panel-2) }
.paint-panel3 { background:var(--bg-panel-3) }
.paint-border { background:var(--border) }
.paint-border-strong { background:var(--border-strong) }
.paint-accent { background:var(--accent) }
.paint-accent-dark { background:var(--accent-dark) }
.paint-accent2 { background:var(--accent-2) }
.paint-accent-light { background:var(--accent-light) }
.paint-text { background:var(--text) }
.paint-ink { background:var(--ink) }
.paint-muted { background:var(--text-muted) }
.paint-faint { background:var(--text-faint) }
.paint-success { background:var(--success) }
.paint-success-ink { background:var(--success-ink) }
.paint-warn { background:var(--warn) }
.paint-warn-ink { background:var(--warn-ink) }
.paint-error { background:var(--error) }
.paint-error-ink { background:var(--error-ink) }
.paint-dark-muted { background:var(--dark-muted) }
.paint-dark-border { background:var(--dark-border) }
.paint-on-dark { background:var(--on-dark) }
.paint-clear { background:var(--clear) }
.paint-mask { background:var(--mask-solid) }
.paint-white12 { background:var(--white-a12) }
.paint-white86 { background:var(--white-a86) }
.paint-ink04 { background:var(--ink-a04) }
.paint-ink06 { background:var(--ink-a06) }
.paint-ink10 { background:var(--ink-a10) }
.paint-veil { background:var(--veil) }
.paint-accent06 { background:var(--accent-a06) }
.paint-accent14 { background:var(--accent-a14) }
.paint-accent22 { background:var(--accent-a22) }
.paint-accent40 { background:var(--accent-a40) }
.paint-accent55 { background:var(--accent-a55) }
.shot-placeholder { display:grid;place-items:center;aspect-ratio:750 / 1334;border:1px solid var(--border);border-radius:var(--r-shot);background:var(--bg-panel);color:var(--text-muted);font:var(--weight-medium) 13px/1.8 var(--font-mono);text-align:center }
.preview-demo-row { display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) }
.preview-demo-row + .preview-demo-row { margin-top:var(--space-5) }
.preview-type h1 { margin-top:0 }
.preview-note { font-size:var(--text-xs);color:var(--text-muted) }
@media (max-width:1080px) {
  .feature-layout { column-gap:var(--space-6) }
}
@media (max-width:768px) {
  .feature-layout { display:block }
  .feature-panel { margin-top:var(--space-5);margin-bottom:var(--space-5) }
  .shot-layout { grid-template-columns:minmax(0,1fr) }
  .article-store-guide { flex-direction:column;align-items:flex-start }
}
@media (max-width:640px) {
  .rulecard__tabs { gap:14px }
  .rulecard__tab { font-size:11px;letter-spacing:0 }
  .rulecard__section { display:none }
  .rulecard__line { font-size:13px }
  .rulecard__head { padding-left:12px }
  .rulecard__body { gap:8px;padding-left:12px }
  .rulecard__gutter { width:15px;padding-right:7px;font-size:10px }
  .rulecard__copy { width:30px }
  .protocols__chip { font-size:10.5px;padding-inline:9px }
  .devices { gap:2px;margin-top:26px }
  .devices__link { gap:5px;padding-inline:6px;font-size:12px }
  .devices__sep { display:none }
  .badge-row,.fact-pills { flex-direction:row;flex-wrap:wrap;justify-content:center }
  .device-card { padding:var(--space-5);gap:var(--space-4) }
  .feature-panel { padding:var(--space-5) }
  .dl-fab { right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));padding:10px 14px }
  .official-shot { margin-inline:auto }
}