/* Device rotation is limited to the desktop hero illustration. */
.hero {position:relative;overflow:hidden;background:var(--bg-panel-2);color:var(--text);min-height:max(640px,calc(100vh - var(--nav-h) - var(--strip-h) - 18px));min-height:max(640px,calc(100svh - var(--nav-h) - var(--strip-h) - 18px));display:grid;grid-template-columns:46% 54%;align-items:center;align-content:center}
.copy {grid-column:1;position:relative;z-index:2;padding:64px 40px 64px max(var(--gutter),calc((100vw - var(--wrap))/2 + var(--gutter)))}
.copy-in {position:relative;max-width:520px}
.h1 {margin:0;color:var(--text);font:800 clamp(30px,3.3vw,48px)/1.15 var(--f-display);letter-spacing:-.012em}
.h1-line {display:block}
.kw {position:relative;display:inline-block}
.kw-arc {position:absolute;left:-3%;bottom:-13px;width:106%;height:16px;color:var(--accent);overflow:visible;pointer-events:none}
.lede {margin:28px 0 0;max-width:30em;font-size:17px;line-height:1.78;color:var(--text-muted)}
.lede strong {color:var(--text);font-weight:600;background:var(--accent-soft);padding:0 .18em;border-radius:var(--r-tiny);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.plats {display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:36px}
.plats-label {font:500 12px var(--f-mono);color:var(--ink-muted);letter-spacing:.02em}
.plats ul {display:flex;flex-wrap:wrap;gap:10px 20px;list-style:none;margin:0;padding:0}
.plat {display:inline-flex;align-items:center;gap:7px;color:var(--text-muted);text-decoration:none;font-size:14px;font-weight:500}
.plat:hover {color:var(--text)}
.plat svg {width:15px;height:15px;flex:none}
.plat .tux {width:13px}
.sym {position:absolute;font-family:var(--f-mono);font-weight:500;color:var(--sym);line-height:1;pointer-events:none;user-select:none}
.s1 {top:-56px;left:-48px;font-size:24px;transform:rotate(-9deg)}
.s2 {top:-34px;left:64%;font-size:22px;transform:rotate(14deg)}
.s3 {top:122px;left:-42px;font-size:26px;transform:rotate(6deg)}
.s4 {top:76px;left:84%;font-size:24px;transform:rotate(-18deg)}
.s5 {bottom:58px;left:-40px;font-size:22px;transform:rotate(12deg)}
.s6 {bottom:-48px;left:60%;font-size:20px;transform:rotate(10deg)}
.stage {position:absolute;top:0;bottom:0;left:46%;right:0;pointer-events:none}
.rig {position:absolute;width:1000px;height:900px;left:calc(50% - 380px);bottom:-110px;transform:rotate(-14deg);transform-origin:50% 50%}
.pad {position:absolute;left:180px;top:0;width:760px;height:540px;padding:14px;background:var(--device-black);color:var(--text);border-radius:var(--r-device);box-shadow:inset 0 0 0 1.5px var(--device-edge),var(--shadow-near),var(--shadow-far);z-index:1}
.pad::before {content:"";position:absolute;top:5px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:var(--r-dot);background:var(--device-edge)}
.glass {position:relative;overflow:hidden}
.glass::after {content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 1px 1px 0 var(--float-paper);pointer-events:none;z-index:4}
.pad-screen {height:100%;border-radius:var(--r-card-sm);background:var(--screen);color:var(--ink);display:grid;grid-template-columns:172px 1fr}
.sb {position:absolute;top:0;left:0;right:0;height:26px;padding:0 20px;z-index:3;display:flex;align-items:center;justify-content:space-between;font:600 10.5px var(--f-body);color:var(--ink)}
.bat {position:relative;display:block;width:21px;height:10px;border:1.2px solid var(--ink-soft);border-radius:var(--r-tiny)}
.bat::after {content:"";position:absolute;inset:1.2px 4px 1.2px 1.2px;border-radius:var(--r-tiny);background:var(--ink-soft)}
.side {display:flex;flex-direction:column;padding:40px 12px 14px;background:var(--screen-side);color:var(--ink);border-right:1px solid var(--line-light)}
.side-app {display:flex;align-items:center;gap:8px;padding:0 8px 16px;font:700 13px var(--f-body);color:var(--ink)}
.side-app img {width:18px;height:18px}
.side ul {list-style:none;margin:0;padding:0;display:grid;gap:2px}
.side li {display:flex;align-items:center;gap:10px;height:32px;padding:0 10px;border-radius:var(--r-item);font-size:12.5px;font-weight:500;color:var(--ink-soft)}
.side li.on {background:var(--screen-hi);color:var(--ink);font-weight:650}
.ic {width:15px;height:15px;flex:none}
.modes-label {margin-top:auto;padding:0 8px 6px;font-size:10.5px;font-weight:600;color:var(--ink-muted)}
.modes {display:grid;grid-template-columns:repeat(3,1fr);padding:3px;border-radius:var(--r-item);background:var(--screen-hi);color:var(--ink);font-size:11px;font-weight:500;text-align:center}
.modes span {padding:5px 0;border-radius:var(--r-focus);color:var(--ink-muted)}
.modes .on {background:var(--screen);color:var(--ink);box-shadow:var(--shadow-near)}
.main {display:flex;flex-direction:column;padding:38px 18px 18px 16px;min-width:0}
.main-head {display:flex;align-items:baseline;justify-content:space-between;padding:0 4px 12px}
.main-title {font:800 17px var(--f-display);color:var(--ink)}
.main-sub {font-size:11px;color:var(--ink-muted)}
.win {flex:1;overflow:hidden;background:var(--screen);color:var(--ink);border:1px solid var(--line-light);border-radius:var(--r-card-sm);box-shadow:var(--shadow-near)}
.win-bar {position:relative;min-height:36px;padding:0 14px;display:flex;align-items:center;gap:7px;background:var(--screen-side);color:var(--ink-muted);border-bottom:1px solid var(--line-light)}
.dot {position:relative;z-index:1;width:10px;height:10px;border-radius:var(--r-dot);flex-shrink:0}
.d-close {background:var(--dot-close)}
.d-min {background:var(--dot-min)}
.d-max {background:var(--dot-max)}
.win-title {position:absolute;left:55px;right:55px;text-align:center;font:500 11px var(--f-mono);color:var(--ink-muted)}
.code {padding:12px 0;font:400 12px/20px var(--f-mono)}
.ln {display:grid;grid-template-columns:38px 1fr}
.ln i {font-style:normal;text-align:right;padding-right:14px;color:var(--ink-muted)}
.ln>span {white-space:pre;color:var(--ink-muted)}
.ln.cur {background:var(--screen-line);color:var(--ink)}
.ck,.cp {color:var(--code-key);font-weight:500}
.phone {position:absolute;left:40px;top:196px;width:236px;height:474px;padding:9px;background:var(--device-black);color:var(--text);border-radius:var(--r-phone);transform:rotate(3deg);box-shadow:inset 0 0 0 1.5px var(--device-edge),var(--shadow-near),var(--shadow-far-lg);z-index:3}
.phone-screen {height:100%;border-radius:var(--r-phone-screen);background:var(--screen-side);color:var(--ink);padding:50px 14px 0}
.island {position:absolute;top:10px;left:50%;width:74px;height:22px;margin-left:-37px;border-radius:var(--r-pill);background:var(--device-black);z-index:5}
.p-sb {position:absolute;top:0;left:0;right:0;height:42px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;font:600 11px var(--f-body);color:var(--ink)}
.p-back {font-size:12px;font-weight:500;color:var(--ink-muted)}
.p-title {margin:8px 0 14px;font:800 21px/1.2 var(--f-display);color:var(--ink)}
.p-label {margin:0 0 6px 2px;font-size:10.5px;font-weight:600;color:var(--ink-muted)}
.p-input {padding:9px 10px;border-radius:var(--r-field);background:var(--screen);color:var(--ink-muted);box-shadow:inset 0 0 0 1px var(--line-light);font:400 10px/1.45 var(--f-mono);overflow-wrap:anywhere}
.p-btn {margin-top:10px;height:34px;border-radius:var(--r-field);display:flex;align-items:center;justify-content:center;background:var(--ink);color:var(--paper);font-size:12.5px;font-weight:600}
.p-group {margin-top:20px}
.p-list {padding:0 12px;border-radius:var(--r-small);background:var(--screen);color:var(--ink)}
.p-row {height:40px;display:flex;align-items:center;justify-content:space-between;font-size:12.5px;font-weight:500;color:var(--ink);border-bottom:1px solid var(--line-light)}
.p-row:last-child {border-bottom:0}
.tg {position:relative;display:block;width:34px;height:20px;border-radius:var(--r-pill);background:var(--track);flex-shrink:0}
.tg::after {content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:var(--r-dot);background:var(--knob);box-shadow:var(--knob-shadow)}
.home {position:absolute;bottom:8px;left:50%;width:84px;height:4px;margin-left:-42px;border-radius:var(--r-pill);background:var(--ink)}
.keys {position:absolute;left:300px;top:604px;width:700px;z-index:2}
.kb {display:grid;gap:5px;grid-template-rows:18px repeat(5,34px);padding:14px;background:var(--alu);color:var(--key-ink);border-radius:var(--r-card-sm);box-shadow:inset 0 1px 0 var(--paper),inset 0 -2px 0 var(--alu-edge),var(--shadow-near),var(--shadow-far)}
.kr {display:grid;grid-template-columns:repeat(29,1fr);gap:5px}
.k {grid-column:span 2;position:relative;display:flex;align-items:center;justify-content:center;background:var(--keycap);color:var(--key-ink);border-radius:var(--r-focus);box-shadow:var(--key-shadow);font:500 10px/1 var(--f-body)}
.w3 {grid-column:span 3}
.w4 {grid-column:span 4}
.w5 {grid-column:span 5}
.w9 {grid-column:span 9}
.fr .k {font-size:7px}
.mod {justify-content:flex-start;align-items:flex-end;padding:0 0 5px 6px;font-size:8px}
.strip {background:var(--paper);color:var(--ink);min-height:var(--strip-h)}
.strip-in {min-height:var(--strip-h);max-width:var(--wrap);margin:auto;padding-inline:var(--gutter);display:flex;align-items:center;gap:24px}
.strip-note {font-size:14.5px;color:var(--ink-muted)}
.facts {margin-left:auto;font:500 13px var(--f-mono);color:var(--ink-muted);letter-spacing:.02em}
.feature-browser {display:grid;grid-template-columns:minmax(0,32fr) minmax(0,68fr);gap:36px;margin-top:48px;align-items:start}
.feature-tabs {display:flex;flex-direction:column;gap:8px}
[role="tab"] {display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:12px 20px;max-width:100%;border:1px solid var(--line-light);border-radius:var(--r-pill);background:var(--paper);color:var(--ink-muted);font:600 15px/1.5 var(--f-body)}
[role="tab"][aria-selected="true"] {background:var(--screen-hi);color:var(--ink);border-color:var(--line-mid)}
[role="tablist"]:not(.feature-tabs) {display:flex;gap:10px;overflow-x:auto;padding-bottom:12px}
[role="tablist"]:not(.feature-tabs)>[role="tab"] {flex-shrink:0}
.feature-tabs [role="tab"] {position:relative;justify-content:flex-start;border-color:var(--transparent);border-radius:var(--r-small);background:var(--transparent);color:var(--text)}
.feature-tabs [role="tab"][aria-selected="true"] {background:var(--tab-active);color:var(--text)}
.feature-tabs [role="tab"][aria-selected="true"]::before {content:"";position:absolute;inset:12px auto 12px 0;width:3px;border-radius:var(--r-tiny);background:var(--accent)}
.feature-tabs .nested {padding-left:38px}
.feature-window {position:relative;border-radius:var(--r-card-lg);background:var(--paper);color:var(--ink);box-shadow:var(--shadow-near),var(--shadow-far)}
.feature-window .win-bar {border-radius:var(--r-card-lg) var(--r-card-lg) 0 0;min-height:48px}
.feature-content {padding:30px 32px 84px}
.feature-content p {font-size:15px;line-height:1.9;color:var(--ink-muted)}
.float-note {position:absolute;right:20px;bottom:-22px;max-width:calc(100% - 40px);padding:20px 24px;border:1px solid var(--line-light);border-radius:var(--r-card-sm);background:var(--float-paper);color:var(--ink);backdrop-filter:blur(10px);box-shadow:var(--shadow-near),var(--shadow-far);transform:rotate(-4deg)}
.annotation {width:92px;height:40px;color:var(--accent);display:block;margin-left:auto}
.tab-panel {min-width:0}
.toc {display:flex;flex-wrap:wrap;gap:8px;overflow-x:visible;max-width:100%;padding:12px;border:1px solid var(--line-light);border-radius:var(--r-card-sm);background:var(--paper);color:var(--ink)}
.toc a {display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 16px;flex-shrink:0;text-decoration:none;border-radius:var(--r-pill)}
.toc a:hover {background:var(--screen-hi);color:var(--ink)}
.toc-sticky {position:sticky;top:12px;z-index:10}
.faq-item {margin:12px 0;border:1px solid var(--line-light);border-radius:var(--r-card-sm);background:var(--paper);color:var(--ink)}
.faq-item summary {position:relative;cursor:pointer;list-style:none;padding:22px 56px 22px 24px;font-weight:650;line-height:1.6}
.faq-item summary::-webkit-details-marker {display:none}
.faq-item summary::after {content:"+";position:absolute;right:24px;top:22px;font-family:var(--f-mono);color:var(--ink-muted)}
.faq-item[open] summary::after {content:"−"}
.faq-answer {padding:0 24px 22px;color:var(--ink-muted)}
.faq-answer p:last-child {margin-bottom:0}
.term-card {border-top:4px solid var(--line-mid)}
.term-card dt {font-size:22px;font-weight:800}
.term-card dd {margin:16px 0 0;color:var(--ink-muted)}
.term-en {display:block;font:400 12px var(--f-mono);color:var(--ink-muted);margin-top:8px}
.client-card {display:flex;flex-direction:column;gap:20px}
.client-head {display:flex;align-items:center;gap:16px;min-width:0}
.client-head>div {min-width:0}
.client-head h3 {margin:0 0 8px;overflow-wrap:anywhere}
.app-icon {width:56px;height:56px;flex-shrink:0}
.client-actions {display:flex;flex-wrap:wrap;gap:10px;margin-top:auto}
.client-rev {font:400 12px var(--f-mono);color:var(--ink-muted)}
.client-rev:empty {display:none}
.badge-first {background:var(--ink);color:var(--paper);border-color:var(--ink)}
.badge-recommended {background:var(--screen-hi);color:var(--ink);border-color:var(--line-mid)}
.badge-archived {background:var(--bg-panel-2);color:var(--ink-muted);border-style:dashed}
.post-card {display:flex;flex-direction:column;gap:16px}
.post-card h3 {font-size:22px;line-height:1.5}
.post-card h3 a {text-decoration:none}
.post-card h3 a:hover {text-decoration:underline}
.post-meta {display:flex;flex-wrap:wrap;gap:12px;align-items:center;font:400 12px var(--f-mono);color:var(--ink-muted)}
.post-card p {color:var(--ink-muted);font-size:15px}
.callout {margin:24px 0;padding:24px 28px;border-left:4px solid var(--ink-soft);border-radius:0 var(--r-card-sm) var(--r-card-sm) 0;background:var(--screen-hi);color:var(--ink)}
.callout p:last-child {margin-bottom:0}
.section-dark .callout {background:var(--bg-panel);color:var(--text);border-color:var(--text-muted)}
.table-scroll {overflow-x:auto;max-width:100%;min-width:0;border:1px solid var(--line-light);border-radius:var(--r-card-sm);background:var(--paper);color:var(--ink)}
.data-table {width:100%;border-collapse:collapse;text-align:left}
.data-table th,.data-table td,.prose table th,.prose table td,.article-body table th,.article-body table td {min-width:7em;padding:16px 20px;border-bottom:1px solid var(--line-light);overflow-wrap:normal;word-break:normal;vertical-align:top}
.data-table th,.prose table th,.article-body table th {background:var(--screen-side);color:var(--ink);font-weight:650}
.prose table,.article-body table {display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;min-width:0;border-collapse:collapse;background:var(--paper);color:var(--ink)}
.data-table code,.prose table code,.article-body table code {overflow-wrap:anywhere;white-space:normal}
.dl-fab {position:fixed;right:24px;bottom:24px;z-index:30;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:60px;max-width:calc(100vw - 40px);padding:14px 20px;border:1px solid var(--line-mid);border-radius:var(--r-card-sm);background:var(--paper);color:var(--ink);text-decoration:none;box-shadow:var(--shadow-near),var(--shadow-far)}
.dl-fab svg {width:22px;height:22px}
.dl-fab strong {display:block;font-size:14px}
.dl-fab small {display:block;font-size:12px;color:var(--ink-muted)}
.article-download {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px;margin-top:48px}
.article-download h2 {font-size:24px;margin:0 0 10px}
.article-download p {color:var(--ink-muted);margin:0}
.preview-heading {margin-top:0}
.preview-colors {display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px}
.swatch {margin:0;border:1px solid var(--line-mid);border-radius:var(--r-small);overflow:hidden;background:var(--paper);color:var(--ink)}
.swatch i {display:block;height:64px;background:var(--swatch,var(--paper))}
.swatch figcaption {padding:12px;font:400 11px/1.6 var(--f-mono);overflow-wrap:anywhere}
.sw-bg {--swatch:var(--bg)} .sw-panel {--swatch:var(--bg-panel)} .sw-panel2 {--swatch:var(--bg-panel-2)}
.sw-border {--swatch:var(--border)} .sw-accent {--swatch:var(--accent)} .sw-accent-dark {--swatch:var(--accent-dark)} .sw-accent-soft {--swatch:var(--accent-soft)}
.sw-text {--swatch:var(--text)} .sw-muted {--swatch:var(--text-muted)} .sw-success {--swatch:var(--success)} .sw-warn {--swatch:var(--warn)} .sw-error {--swatch:var(--error)}
.sw-ink {--swatch:var(--ink)} .sw-soft {--swatch:var(--ink-soft)} .sw-ink-muted {--swatch:var(--ink-muted)} .sw-faint {--swatch:var(--ink-faint)} .sw-paper {--swatch:var(--paper)}
.sw-light {--swatch:var(--line-light)} .sw-mid {--swatch:var(--line-mid)} .sw-sym {--swatch:var(--sym)}
.sw-black {--swatch:var(--device-black)} .sw-edge {--swatch:var(--device-edge)} .sw-screen {--swatch:var(--screen)} .sw-side {--swatch:var(--screen-side)} .sw-hi {--swatch:var(--screen-hi)} .sw-screen-line {--swatch:var(--screen-line)}
.sw-code-key {--swatch:var(--code-key)} .sw-code-val {--swatch:var(--code-val)} .sw-code-num {--swatch:var(--code-num)}
.sw-track {--swatch:var(--track)} .sw-knob {--swatch:var(--knob)} .sw-alu {--swatch:var(--alu)} .sw-alu-edge {--swatch:var(--alu-edge)} .sw-keycap {--swatch:var(--keycap)} .sw-key-ink {--swatch:var(--key-ink)}
.sw-close {--swatch:var(--dot-close)} .sw-min {--swatch:var(--dot-min)} .sw-max {--swatch:var(--dot-max)} .sw-tab {--swatch:var(--tab-active)} .sw-float {--swatch:var(--float-paper)} .sw-veil {--swatch:var(--veil)} .sw-transparent {--swatch:var(--transparent)}
.preview-actions {display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.preview-nav {display:block}
.preview-language {position:relative}
.preview-language summary {list-style:none;cursor:pointer}
.preview-language ul {list-style:none}
@media (max-width:1180px) {
  .rig {transform:scale(.86) rotate(-14deg)}
}
@media (max-width:860px) {
  .hero {grid-template-columns:1fr;min-height:0;align-content:start}
  .copy {padding:40px var(--gutter) 8px}
  .h1 {font-size:clamp(24px,7.4vw,30px)}
  .kw-arc {bottom:-9px;height:12px}
  .lede {font-size:15.5px}
  .sym {display:none}
  .stage {position:relative;left:auto;grid-column:1;height:400px}
  .rig {position:relative;left:auto;bottom:auto;width:100%;height:100%;transform:none}
  .pad {position:relative;left:auto;top:auto;width:calc(100% - 40px);height:360px;margin:20px auto;padding:10px}
  .pad-screen {grid-template-columns:minmax(0,1fr)}
  .pad .side,.phone,.keys {display:none}
  .main {padding:38px 12px 12px}
  .main-head {flex-wrap:wrap;gap:4px 12px}
  .win {flex:none}
  .win-bar {height:36px}
  .code {overflow-x:auto}
  .win-title {position:static;margin-left:auto;line-height:1.4}
  .strip {padding-top:18px;padding-bottom:18px}
  .strip-in {min-height:0;flex-wrap:wrap;gap:12px 18px}
  .facts {margin-left:0;width:100%}
  .feature-browser {grid-template-columns:minmax(0,1fr);gap:24px}
  .feature-tabs {flex-direction:row;overflow-x:auto;padding-bottom:8px}
  .feature-tabs [role="tab"] {flex-shrink:0;border-radius:var(--r-pill);padding-inline:18px}
  .feature-tabs [role="tab"][aria-selected="true"]::before {display:none}
  .feature-content {padding:24px 24px 80px}
  .preview-nav {display:none}
}
@media (max-width:640px) {
  .float-note {transform:none}
  .dl-fab {right:20px;bottom:16px}
  .dl-fab small {display:none}
  .article-download {align-items:flex-start}
}