/* 首屏以确认稿的浅蓝渐隐、右侧等轴测装置为基准。 */
.hero{position:relative;display:flex;flex-direction:column;height:clamp(700px,calc(100vh - 56px),960px);padding-top:84px;overflow:clip;background:linear-gradient(180deg,var(--bg) 0%,var(--bg) 50%,var(--bg-fade) 82%,var(--bg-panel) 100%);color:var(--text)}
.hero-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px;width:100%;max-width:1440px;margin-inline:auto;padding-inline:var(--gutter)}
.hero-copy{max-width:600px;padding-bottom:6px}
.chips,.fact-pills{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.chip,.fact-pill{display:inline-flex;align-items:center;gap:8px;max-width:100%;min-height:28px;padding:4px 11px;border:1px solid var(--border-strong);border-radius:var(--r-btn);background:var(--bg-panel);color:var(--text-2);font-size:13px;font-weight:500;overflow-wrap:anywhere}
.dot{display:inline-block;width:6px;height:6px;border-radius:var(--r-circle);background:var(--accent);flex-shrink:0}
.h1{margin-top:28px;font-size:clamp(30px,2.2vw + 16px,48px);line-height:1.14;letter-spacing:-.02em}
.h1>span{display:block}
.h1 .h1-2{color:var(--text-soft)}
.lede{margin-top:22px;max-width:520px;font-size:17px;line-height:1.75;color:var(--text-muted)}
.lede strong{font-weight:600;color:var(--text);background:linear-gradient(180deg,transparent 64%,var(--tint-lagoon) 64%)}
.hero .fact-pills{margin-top:20px}
.devices{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:30px;padding-top:22px;border-top:1px dashed var(--border-strong)}
.dev-label{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.dev-list{display:flex;flex-wrap:wrap;gap:8px 20px}
.dev-list a{display:inline-flex;align-items:center;gap:7px;min-height:30px;font-size:14px;color:var(--text-2)}
.dev-list a:hover{color:var(--accent-dark)}
.dev-list svg{width:18px;height:18px}
.pill,.badge{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-height:26px;padding:4px 11px;border:1px solid var(--border-strong);border-radius:var(--r-pill);background:var(--bg-panel);color:var(--text);font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.06em;overflow-wrap:anywhere}
.pill:hover{border-color:var(--text-muted)}
.appstore-button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:10px 22px;border:1px solid var(--text);border-radius:var(--r-btn);background:var(--text);color:var(--bg-panel);box-shadow:var(--shadow-btn);transition:background-color var(--fast),transform var(--fast)}
.appstore-button:hover,.appstore-button.is-hover{background:var(--ink-hover);color:var(--bg-panel)}
.appstore-button:active{transform:translateY(1px)}
.appstore-button svg{width:23px;height:26px;flex-shrink:0}
.appstore-button>span{display:block;text-align:left;font-family:var(--font-mono);font-size:13px;font-weight:600;line-height:1.4;letter-spacing:.04em}
.appstore-button small{display:block;font-family:var(--font-body);font-size:11px;font-weight:400;letter-spacing:0}
.appstore-button[aria-disabled="true"]{opacity:.5;pointer-events:none}
.statusbar{flex-shrink:0;min-height:44px;border-top:1px solid var(--border);background:var(--bg-panel);color:var(--text-muted)}
.sb-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;max-width:1440px;margin-inline:auto;padding-inline:var(--gutter);font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.sb-group{display:flex;align-items:center;flex-wrap:wrap;gap:22px}
.sb-item{display:inline-flex;align-items:center;gap:8px}
.sb-item+.sb-item::before{content:"";width:1px;height:12px;margin-right:14px;background:var(--border-strong);flex-shrink:0}
.sb-clock{white-space:nowrap;color:var(--text-2);font-variant-numeric:tabular-nums}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.rig{--kw:1;--kh:1;--k:min(var(--kw),var(--kh));position:relative;justify-self:end;width:calc(720px * var(--k));height:calc(700px * var(--k))}
.scene{position:absolute;left:0;top:0;width:720px;height:700px;transform:scale(var(--k));transform-origin:0 0}
.iso{position:absolute;left:370px;top:455px;width:0;height:0;z-index:1;transform-style:preserve-3d;transform:rotateX(55deg) rotateZ(-35deg)}
.pos,.bob,.orient{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d}
.orbit{position:absolute;left:-330px;top:-330px;width:660px;height:660px;border-radius:var(--r-circle);border:1px dashed var(--line-construct);transform:translateZ(-3px)}
.gsh{position:absolute;border-radius:var(--r-phone)}
.gsh-1{left:-120px;top:-245px;width:240px;height:490px;background:var(--ink-a14);filter:blur(14px);transform:translate3d(10px,18px,-1px)}
.gsh-2{left:-150px;top:-290px;width:300px;height:580px;background:var(--ink-a06);filter:blur(34px);transform:translate3d(28px,48px,-2px)}
.ph{position:absolute;left:-115px;top:-235px;width:230px;height:470px;border-radius:var(--r-phone)}
.ph-1{transform:translateZ(0);background:var(--metal-6)}
.ph-2{transform:translateZ(2px);background:var(--metal-5)}
.ph-3{transform:translateZ(4px);background:var(--metal-4)}
.ph-4{transform:translateZ(6px);background:var(--metal-4)}
.ph-5{transform:translateZ(8px);background:var(--metal-3)}
.ph-6{transform:translateZ(10px);background:var(--metal-3)}
.ph-7{transform:translateZ(12px);background:var(--metal-2)}
.ph-face{transform:translateZ(14px);background:var(--metal-1);box-shadow:inset 0 0 0 1px var(--metal-3)}
.screen{position:absolute;inset:8px;border-radius:var(--r-screen);border:3px solid var(--bezel);background:repeating-linear-gradient(0deg,var(--grid-line) 0 1px,transparent 1px 22px),repeating-linear-gradient(90deg,var(--grid-line) 0 1px,transparent 1px 22px),linear-gradient(162deg,var(--accent) 0%,var(--accent-tint) 46%,var(--bg-panel) 100%)}
.screen::after{content:"";position:absolute;inset:0;border-radius:var(--r-screen);background:linear-gradient(118deg,transparent 30%,var(--glass-mid) 46%,transparent 60%)}
.key{position:absolute;left:-3px;width:6px;border-radius:var(--r-btn);background:var(--metal-5)}
.key-a{top:-11px;height:22px;transform:translate3d(-116px,-150px,7px) rotateY(90deg)}
.key-b{top:-22px;height:44px;transform:translate3d(-116px,-104px,7px) rotateY(90deg)}
.key-c{top:-22px;height:44px;transform:translate3d(-116px,-50px,7px) rotateY(90deg)}
.psh{position:absolute;border-radius:var(--r-pill);background:var(--ink-a14)}
.psh-disc{left:-22px;top:-118px;width:44px;height:236px;filter:blur(10px);transform:translate3d(-52px,8px,15px)}
.psh-strip{left:-195px;top:-24px;width:390px;height:48px;filter:blur(12px);transform:translate3d(48px,8px,15px)}
.psh-hex{left:-20px;top:-100px;width:40px;height:200px;filter:blur(11px);transform:translate3d(158px,10px,1px)}
.p-disc{transform:translate3d(-60px,-10px,175px)}
.p-strip{transform:translate3d(40px,-10px,160px)}
.p-hex{transform:translate3d(150px,-10px,195px)}
.o-stand{transform:rotateY(90deg)}
.o-tilt{transform:rotateY(-12deg)}
.dl{position:absolute;left:-115px;top:-115px;width:230px;height:230px;border-radius:var(--r-circle)}
.dl-1{transform:translateZ(-5px);background:linear-gradient(135deg,var(--glass-hi),var(--lagoon-a30) 40%,var(--lagoon-a55));border:1px solid var(--glass-hi)}
.dl-1::before{content:"";position:absolute;inset:24px;border-radius:var(--r-circle);border:1px solid var(--glass-hi)}
.dl-1::after{content:"";position:absolute;inset:6px;border-radius:var(--r-circle);box-shadow:inset 7px 7px 16px -9px var(--glass-hi)}
.dl-2{transform:translateZ(-3px);border:2px solid var(--lagoon-a70)}
.dl-3{transform:translateZ(-1px);border:2px solid var(--lagoon-a55)}
.dl-4{transform:translateZ(1px);border:2px solid var(--lagoon-a55)}
.dl-5{transform:translateZ(3px);border:2px solid var(--lagoon-a70)}
.dl-6{transform:translateZ(5px);background:var(--lagoon-a12);border:1px solid var(--lagoon-a55)}
.sl{position:absolute;left:-190px;top:-30px;width:380px;height:60px;border-radius:var(--r-card);opacity:.94}
.sl-1{transform:translateZ(0);background:var(--orchid-deep)}
.sl-2{transform:translateZ(2px);background:var(--orchid-deep)}
.sl-3{transform:translateZ(4px);background:var(--orchid)}
.sl-4{transform:translateZ(6px);background:var(--orchid)}
.sl-face{transform:translateZ(8px);background:linear-gradient(96deg,var(--orchid-pale),var(--orchid-light) 30%,var(--orchid) 74%,var(--orchid-deep))}
.sl-face::before{content:"";position:absolute;left:18px;right:18px;top:24px;height:12px;border-radius:var(--r-pill);background:var(--orchid-slot)}
.sl-face::after{content:"";position:absolute;right:62px;top:16px;width:44px;height:28px;border-radius:var(--r-btn);background:var(--glass-hi);box-shadow:0 0 0 1px var(--orchid-pale)}
.hl{position:absolute;left:-105px;top:-95px;width:210px;height:190px;overflow:visible;opacity:.96}
.hl-1{transform:translateZ(-9px)}
.hl-2{transform:translateZ(-6px)}
.hl-3{transform:translateZ(-3px)}
.hl-4{transform:translateZ(0)}
.hl-5{transform:translateZ(3px)}
.hl-6{transform:translateZ(6px)}
.hl-7{transform:translateZ(9px)}
.hx-face{fill:url(#hexGrad);stroke:url(#hexGrad)}
.hx-mid{fill:var(--ember);stroke:var(--ember)}
.hx-edge{fill:var(--ember-deep);stroke:var(--ember-deep)}
.hx-inner{fill:none;stroke:var(--ember-pale);stroke-width:1.5;stroke-linejoin:round}
.hs-1{stop-color:var(--ember-pale)}
.hs-2{stop-color:var(--ember-light)}
.hs-3{stop-color:var(--ember)}
.leads{position:absolute;inset:0;z-index:2;pointer-events:none}
.lead{position:absolute;width:0;height:0}
.lead-tag{position:absolute;left:-4px;top:0;display:flex;align-items:center;gap:9px;white-space:nowrap;font-family:var(--font-mono);font-size:11.5px;font-weight:600;line-height:16px;letter-spacing:.09em;color:var(--text)}
.mk{flex-shrink:0;display:inline-block;width:9px;height:9px;background:var(--text)}
.mk-half{background:linear-gradient(90deg,var(--text) 50%,transparent 50%);box-shadow:inset 0 0 0 1.25px var(--text)}
.mk-dot{border-radius:var(--r-circle)}
.lead-line{position:absolute;left:0;top:22px;width:1px;background:var(--text);transform-origin:50% 0}
.lead-line::after{content:"";position:absolute;left:-2.5px;bottom:-3px;width:6px;height:6px;border-radius:var(--r-circle);background:var(--bg-panel);border:1px solid var(--text)}
.lead-proxy{left:522px;top:40px}
.lead-proxy .lead-line{height:200px}
.lead-ondemand{left:410px;top:100px}
.lead-ondemand .lead-line{height:174px}
.lead-dns{left:262px;top:150px}
.lead-dns .lead-line{height:118px}
.rig.is-animated .bob-disc{animation:rig-bob 8s ease-in-out -2s infinite}
.rig.is-animated .bob-strip{animation:rig-bob 7s ease-in-out -1s infinite}
.rig.is-animated .bob-hex{animation:rig-bob 9s ease-in-out -4s infinite}
.rig.is-animated .lead-line{animation:rig-draw 900ms var(--ease) both}
@keyframes rig-bob{0%,100%{transform:translateZ(0)}50%{transform:translateZ(6px)}}
@keyframes rig-draw{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.fact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.fact{position:relative;display:flex;flex-direction:column;min-height:320px;padding:28px 30px 30px;border-radius:var(--r-card);color:var(--text)}
.fact::before{content:"";position:absolute;top:0;right:40px;width:72px;height:10px;background:linear-gradient(var(--tick),var(--tick)) top/100% 3px no-repeat,repeating-linear-gradient(90deg,var(--tick) 0 2px,transparent 2px 8px)}
.f-lagoon{background:var(--tint-lagoon);color:var(--text)}
.f-orchid{background:var(--tint-orchid);color:var(--text)}
.f-ember{background:var(--tint-ember);color:var(--text)}
.fact-tag{align-self:flex-start;display:inline-flex;align-items:center;min-height:30px;padding:4px 11px;border:1px solid var(--ink-a20);border-radius:var(--r-btn);font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.09em}
.fact-word{margin-top:30px;font-family:var(--font-display);font-weight:400;font-size:clamp(30px,1.6vw + 16px,40px);line-height:1.15;letter-spacing:-.02em;overflow-wrap:anywhere}
.fact-note{margin-top:auto;padding-top:28px;max-width:30em;font-size:15px;line-height:1.7;color:var(--text-muted)}
.settings-tabs [role="tablist"]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:16px}
.settings-tabs [role="tab"]{position:relative;min-width:0;min-height:96px;padding:20px 16px;border-radius:var(--r-card);background:var(--bg-panel);color:var(--text);font-size:clamp(18px,2vw,28px);font-weight:600}
.settings-tabs [role="tab"][aria-selected="true"]{background:var(--accent-tint);color:var(--text)}
.settings-tabs [role="tab"][aria-selected="true"]::after{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--accent)}
.tab-panel{border-radius:var(--r-card);background:var(--bg-panel);color:var(--text);padding:24px}
.settings-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px}
.setting-list details{border-bottom:1px solid var(--border)}
.setting-list details:last-child{border-bottom:0}
.setting-list summary{display:flex;align-items:center;gap:14px;min-height:80px;cursor:pointer;font-weight:600;list-style:none}
.setting-list summary::-webkit-details-marker{display:none}
.setting-list summary::after{content:"+";margin-left:auto;font-family:var(--font-mono);color:var(--text-muted)}
.setting-list details[open] summary::after{content:"−"}
.setting-list details p{padding:0 0 24px 58px;font-size:15px;line-height:1.85;color:var(--text-muted)}
.setting-icon{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;border-radius:var(--r-btn);background:var(--bg);color:var(--accent-dark)}
.setting-icon svg{width:22px;height:22px}
.rule-canvas{display:flex;align-items:center;justify-content:center;min-height:360px;padding:32px;overflow:clip;border-radius:var(--r-card);background:linear-gradient(125deg,var(--accent-tint) 0%,var(--accent-tint) 47%,var(--orchid-pale) 47%,var(--orchid-light) 100%);color:var(--text)}
.rule-card{width:100%;padding:24px;background:var(--bg-panel);color:var(--text);border:1px solid var(--glass-hi);border-radius:var(--r-card);box-shadow:var(--shadow-float)}
.rule-card pre{margin-top:20px;padding:16px;font-size:12px}
.toc{display:flex;flex-wrap:wrap;gap:8px;position:sticky;top:16px;z-index:10;padding:12px;border:1px solid var(--border);border-radius:var(--r-card);background:var(--bg-panel);color:var(--text)}
.toc a{display:flex;align-items:center;min-height:44px;padding:8px 12px;border-radius:var(--r-btn);font-size:14px}
.toc a:hover,.toc a[aria-current="location"]{background:var(--accent-tint);color:var(--text)}
.toc-static{position:static}
.faq-item{border-bottom:1px solid var(--border);background:var(--bg-panel);color:var(--text)}
.faq-item summary{position:relative;min-height:64px;padding:20px 44px 20px 20px;font-weight:600;cursor:pointer;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:20px;top:20px;font-family:var(--font-mono)}
.faq-item[open] summary::after{content:"−"}
.faq-answer{padding:0 20px 24px;color:var(--text-muted)}
.term-card{padding:28px;border-left:3px solid var(--accent);background:var(--bg-panel);color:var(--text);border-radius:var(--r-card)}
.term-card h3{font-family:var(--font-mono);font-size:20px}
.term-card p{margin-top:12px;color:var(--text-muted)}
.term-category{display:block;margin-bottom:12px;font-size:12px;color:var(--accent-dark)}
.official-shot{width:100%;max-width:280px;margin-inline:auto;flex-shrink:0;padding:0}
.official-shot img{display:block;width:100%;height:auto;border-radius:var(--r-shot)}
.official-shot img,.shot-placeholder{outline:1px solid var(--border);outline-offset:-1px}
.official-shot figcaption{padding-top:12px;font-size:13px;line-height:1.7;color:var(--text-muted)}
.shot-row{display:flex;align-items:flex-start;justify-content:center;flex-wrap:wrap;gap:32px}
.shot-placeholder{display:grid;place-items:center;aspect-ratio:750 / 1334;width:100%;border-radius:var(--r-shot);background:var(--bg-panel-2);color:var(--text-muted);text-align:center;font-family:var(--font-mono);font-size:13px}
.device-card{display:flex;align-items:flex-start;gap:24px;padding:30px;border:1px solid var(--border);border-radius:var(--r-card);background:var(--bg-panel);color:var(--text)}
.device-card>svg{width:56px;height:72px;color:var(--text-2)}
.device-card p{margin-top:12px;color:var(--text-muted)}
.device-card .btn{margin-top:24px}
.article-card{display:flex;flex-direction:column;gap:18px;padding:28px;border-top:3px solid var(--accent);border-radius:var(--r-card);background:var(--bg-panel);color:var(--text);box-shadow:var(--shadow-bar)}
.article-card h3{font-size:21px}
.article-card p{font-size:15px;color:var(--text-muted)}
.article-card .article-more{margin-top:auto;padding-top:12px;color:var(--accent-dark);font-size:14px}
.article-meta{display:flex;flex-wrap:wrap;gap:10px;color:var(--text-muted);font-family:var(--font-mono);font-size:12px}
.callout{margin:24px 0;padding:24px;border-left:3px solid var(--accent);border-radius:var(--r-btn);background:var(--tint-lagoon);color:var(--text-2)}
.callout p+p{margin-top:12px}
.callout strong{color:var(--text)}
.table-scroll{max-width:100%;min-width:0;overflow-x:auto;overscroll-behavior-inline:contain;border:1px solid var(--border);border-radius:var(--r-card)}
.data-table{width:100%;border-collapse:collapse;background:var(--bg-panel);color:var(--text)}
.data-table th,.data-table td,.prose th,.prose 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 th{background:var(--bg-panel-2);color:var(--text);font-weight:600}
.data-table td code,.prose td code{overflow-wrap:anywhere}
.prose table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;min-width:0;border-collapse:collapse;background:var(--bg-panel);color:var(--text)}
.dl-fab{position:fixed;right:24px;bottom:24px;z-index:25;display:flex;align-items:center;gap:12px;max-width:calc(100% - 40px);min-height:56px;padding:12px 18px;border:1px solid var(--border);border-radius:var(--r-card);background:var(--text);color:var(--bg-panel);box-shadow:var(--shadow-float);font-size:13px}
.dl-fab svg{width:22px;height:22px}
.dl-fab small{display:block;font-size:11px}
.dl-fab:hover{background:var(--ink-hover);color:var(--bg-panel)}
.article-store-note{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding:28px;background:var(--bg-panel-2);color:var(--text);border-radius:var(--r-card)}
.article-store-note p{margin-top:8px;color:var(--text-muted);max-width:42em}
.preview-only .dl-fab{position:static;max-width:100%;width:fit-content}
.preview-swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.swatch{border:1px solid var(--border);border-radius:var(--r-card);background:var(--bg-panel);color:var(--text);overflow:hidden}
.swatch-chip{height:64px;background:var(--bg)}
.swatch code{display:block;padding:10px 12px;font-size:11px}
.sw-bg{background:var(--bg)}.sw-fade{background:var(--bg-fade)}.sw-panel{background:var(--bg-panel)}.sw-panel2{background:var(--bg-panel-2)}
.sw-border{background:var(--border)}.sw-border-strong{background:var(--border-strong)}
.sw-accent{background:var(--accent)}.sw-accent-dark{background:var(--accent-dark)}.sw-accent-tint{background:var(--accent-tint)}
.sw-orchid{background:var(--orchid)}.sw-orchid-deep{background:var(--orchid-deep)}.sw-orchid-light{background:var(--orchid-light)}.sw-orchid-pale{background:var(--orchid-pale)}
.sw-ember{background:var(--ember)}.sw-ember-deep{background:var(--ember-deep)}.sw-ember-light{background:var(--ember-light)}.sw-ember-pale{background:var(--ember-pale)}
.sw-lagoon{background:var(--tint-lagoon)}.sw-tint-orchid{background:var(--tint-orchid)}.sw-tint-ember{background:var(--tint-ember)}.sw-tick{background:var(--tick)}
.sw-text{background:var(--text)}.sw-text2{background:var(--text-2)}.sw-hover{background:var(--ink-hover)}.sw-muted{background:var(--text-muted)}.sw-soft{background:var(--text-soft)}
.sw-btn{background:var(--btn-soft)}.sw-btn-hover{background:var(--btn-soft-hover)}
.sw-success{background:var(--success)}.sw-warn{background:var(--warn)}.sw-error{background:var(--error)}
.sw-metal1{background:var(--metal-1)}.sw-metal2{background:var(--metal-2)}.sw-metal3{background:var(--metal-3)}.sw-metal4{background:var(--metal-4)}.sw-metal5{background:var(--metal-5)}.sw-metal6{background:var(--metal-6)}
.sw-bezel{background:var(--bezel)}.sw-glass-hi{background:var(--glass-hi)}.sw-glass-mid{background:var(--glass-mid)}.sw-grid{background:var(--grid-line)}
.sw-a12{background:var(--lagoon-a12)}.sw-a30{background:var(--lagoon-a30)}.sw-a55{background:var(--lagoon-a55)}.sw-a70{background:var(--lagoon-a70)}.sw-slot{background:var(--orchid-slot)}
.sw-ink04{background:var(--ink-a04)}.sw-ink06{background:var(--ink-a06)}.sw-ink10{background:var(--ink-a10)}.sw-ink14{background:var(--ink-a14)}.sw-ink20{background:var(--ink-a20)}.sw-construct{background:var(--line-construct)}
.preview-type>*+*{margin-top:24px}
@media(max-width:1420px){.rig{--kw:.94}}
@media(max-width:1320px){.rig{--kw:.86}}
@media(max-width:1200px){.rig{--kw:.78}.hero-body{gap:16px}}
@media(max-width:1100px){.rig{--kw:.72}}
@media(max-height:860px){.rig{--kh:.92}}
@media(max-height:800px){.rig{--kh:.84}}
@media(max-height:740px){.rig{--kh:.8}}
@media(max-width:1023px){
  .hero{height:auto;padding-top:150px}
  .hero-body{grid-template-columns:1fr;gap:24px;padding-bottom:24px}
  .hero-copy{max-width:none}
  .rig{--kw:.9;--kh:1;justify-self:center}
  .fact-grid{grid-template-columns:1fr}
  .fact{min-height:240px}
  .settings-split{grid-template-columns:1fr}
  .preview-swatches{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:768px){
  .h1{font-size:clamp(24px,5vw,30px)}
  .rig{--kw:.62}
  .sb-opt{display:none}
  .settings-tabs [role="tablist"]{gap:8px}
  .settings-tabs [role="tab"]{font-size:16px;min-height:72px;padding:12px 8px}
}
@media(max-width:640px){
  .rig{--kw:.47}
  .rule-canvas{padding:20px;min-height:280px}
  .tab-panel{padding:20px}
  .setting-list details p{padding-left:0}
  .device-card{padding:24px;gap:18px}
  .device-card>svg{width:40px;height:56px}
  .official-shot{max-width:min(280px,100%)}
  .shot-row{flex-direction:column;align-items:center}
  .preview-swatches{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fact-pills{justify-content:flex-start}
  .dl-fab{right:20px;bottom:20px}
}
@media(max-width:520px){
  .hero .cta>.btn,.hero .cta>.appstore-button{flex:1 1 100%;justify-content:center}
  .hero .cta>.appstore-button>span{text-align:center}
  .hero .devices{gap:10px}
  .dev-list{gap:6px 12px}
  .dev-list a{font-size:12px}
  .dev-label{display:none}
  .sb-in{font-size:10px}
  .sb-group{gap:10px}
  .sb-item+.sb-item::before{margin-right:2px}
}
@media(max-width:360px){.rig{--kw:.39}.preview-nav a{padding-inline:7px}}