.steps{counter-reset:step;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;display:grid}.step{counter-increment:step;position:relative;container-type:inline-size}.step .feat-art{aspect-ratio:400/232;height:auto;max-height:236px}.step h3{align-items:flex-start;gap:10px;display:flex}.step h3:before{content:counter(step);background:var(--accent);width:26px;height:26px;color:var(--accent-text);font-size:.875rem;font-weight:var(--w-heavy);letter-spacing:0;font-variant-numeric:tabular-nums;border-radius:50%;flex:none;place-items:center;display:grid}.step-next{z-index:1;background:var(--card);border:1px solid var(--line);width:32px;height:32px;color:var(--accent);box-shadow:var(--shadow-1);border-radius:50%;place-items:center;display:grid;position:absolute;top:calc(-6px + min(118px,29cqw - 5.8px));right:-24px}.step-next .ic{stroke-width:2px;width:16px;height:16px}.step:last-child .step-next{display:none}@media (width<=900px){.steps{grid-template-columns:minmax(0,1fr)}.step-next{inset:auto auto -24px calc(50% - 16px);transform:rotate(90deg)}}.screens{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:clamp(20px,3vw,40px);display:grid}.tabs{gap:8px;display:grid}.tab{text-align:left;border-radius:var(--r-lg);background:0 0;border:1px solid #0000;gap:4px;width:100%;padding:16px 18px 16px 22px;transition:background-color .2s,border-color .2s,box-shadow .2s;display:grid;position:relative}.tab:before{content:"";background:var(--accent);width:3px;transition:transform var(--dur) var(--ease);border-radius:3px;position:absolute;top:18px;bottom:18px;left:8px;transform:scaleY(0)}.tab:hover{background:color-mix(in srgb, var(--text) 4%, transparent)}.tab[aria-selected=true]{background:var(--card);border-color:var(--line);box-shadow:var(--shadow-2)}.tab[aria-selected=true]:before{transform:scaleY(1)}.tab-h{font-size:1.125rem;font-weight:var(--w-bold);letter-spacing:-.01em}.tab-p{font-size:var(--fs-small);color:var(--muted);line-height:1.5}.shots{border-radius:var(--r-2xl);background:radial-gradient(70% 60% at 50% 0%, color-mix(in srgb, var(--accent) 9%, var(--panel)), var(--panel) 70%);border:1px solid var(--line);place-items:center;min-height:760px;padding:28px;display:grid}.shot{border-radius:16px;min-width:0;max-width:100%}.shots{grid-template-columns:minmax(0,1fr);min-width:0}.shots>.shot{justify-self:center}@media (width<=900px){.screens{grid-template-columns:minmax(0,1fr)}.tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.shots{min-height:0;padding:20px}}@media (width<=719px){.tabs{grid-template-columns:minmax(0,1fr)}.tab{padding:12px 14px 12px 20px}.tab:not([aria-selected=true]) .tab-p{display:none}.shots{border-radius:22px;padding:14px}}.demo{border-radius:var(--r-2xl);background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow-3);grid-template-columns:minmax(0,1fr) 304px;gap:6px;margin-top:clamp(20px,3vw,36px);padding:10px;display:grid}.stage{border-radius:var(--r-lg);color:var(--text);border:1px solid var(--line);background:radial-gradient(70% 60% at 50% 0,#1a1a1e,#0f0f11 75%);align-items:center;display:flex;position:relative;overflow:hidden}.scene{aspect-ratio:880/500;width:100%;height:auto;font-family:var(--font);-webkit-user-select:none;user-select:none;display:block}.demo-pause{position:absolute;top:8px;right:8px}.demo-pause .ic{width:18px;height:18px}.scene .desk{fill:#17171a;stroke:var(--line);stroke-width:1px}.scene .lbl{fill:var(--muted);font-size:15px;font-weight:var(--w-bold);text-anchor:middle;transition:fill .3s}.scene .cap{fill:var(--muted);font-size:12.5px;font-weight:var(--w-medium);text-anchor:middle}.scene[data-layout=tall] .cap{display:none}.pc{--pc:var(--win)}.pc[data-pc="1"]{--pc:var(--ubu)}.pc[data-pc="2"]{--pc:var(--mac)}.pc .glow{opacity:0;transition:opacity .4s}.pc .body{fill:#222228;stroke:var(--line-strong);stroke-width:2px;transition:stroke .3s}.pc .detail{fill:none;stroke:#45454e;stroke-width:2px;stroke-linecap:round}.pc .part{fill:#2e2e35}.pc .led{fill:#45454e;transition:fill .3s}.pc .own-screen{opacity:.4;transition:opacity .3s}.pc.has .glow{opacity:1}.pc.has .body{stroke:var(--pc)}.pc.has .led{fill:var(--pc)}.pc.has .lbl{fill:var(--text)}.pc.has .own-screen{opacity:1}.main-tag rect{fill:var(--chip);stroke:var(--line);stroke-width:1px}.main-tag path{fill:none;stroke:var(--muted);stroke-width:2.8px;stroke-linecap:round;stroke-linejoin:round}.main-tag text{fill:var(--text);font-size:12px;font-weight:var(--w-bold)}.scene[data-layout=tall] .main-tag text{font-size:13px}.hub rect{fill:var(--chip)}.hub circle{fill:#131315;stroke:var(--line-strong);stroke-width:1.5px}.cable{--pc:var(--win)}.cable path{fill:none;stroke-linecap:round}.cable-glow{stroke:var(--pc);stroke-width:10px;opacity:.13;transition:stroke .35s}.cable-core{stroke:var(--pc);stroke-width:3px;transition:stroke .35s}.cable-flow{stroke:#fff;stroke-width:2px;stroke-dasharray:1 17;opacity:.75;animation:1.1s linear infinite cable-flow}.cable[data-flow=in] .cable-flow{animation-direction:reverse}.cable-plug{fill:var(--pc);transition:fill .35s}@keyframes cable-flow{to{stroke-dashoffset:-18px}}.dev{--pc:var(--win)}.dev .body{fill:#222228;stroke:color-mix(in srgb, var(--pc) 45%, var(--line-strong));stroke-width:2px;transition:stroke .35s}.dev .band{fill:none;stroke:color-mix(in srgb, var(--pc) 45%, var(--line-strong));stroke-width:5px;stroke-linecap:round;transition:stroke .35s}.dev .part{fill:#3b3b45}.dev .f11{fill:var(--accent);transition:fill var(--dur)}.scene.tap .dev .f11{fill:#ffd2bd;transition:none}.mon-bezel{fill:#0a0a0c;stroke:color-mix(in srgb, var(--pc) 45%, var(--line-strong));stroke-width:2px;transition:stroke .35s}.mon-stand{fill:#2a2a30}.screen{opacity:0;transition:opacity .14s ease-out}.screen.on{opacity:1;transition:opacity .32s ease-out .14s}.os-name{fill:#fff;font-size:24px;font-weight:var(--w-heavy);letter-spacing:-.01em;text-anchor:middle}.cursor{opacity:0;transition:opacity .2s}.cursor.on{opacity:1;transition:opacity var(--dur) .3s}.bars rect,.il3-bars rect{transform-box:fill-box;transform-origin:50%;animation:.9s ease-in-out infinite alternate eq}.bars rect{fill:var(--pc);transition:fill .35s}.bars rect:nth-child(2),.il3-bars rect:nth-child(2){animation-duration:.7s;animation-delay:-.3s}.bars rect:nth-child(3),.il3-bars rect:nth-child(3){animation-duration:1.1s;animation-delay:-.6s}.bars rect:nth-child(4),.il3-bars rect:nth-child(4){animation-duration:.8s;animation-delay:-.2s}.bars rect:nth-child(5),.il3-bars rect:nth-child(5){animation-duration:1s;animation-delay:-.5s}@keyframes eq{0%{transform:scaleY(.3)}to{transform:scaleY(1)}}.panel{flex-direction:column;gap:14px;padding:16px 12px 12px 14px;display:flex}.keyzone{flex-direction:column;align-items:center;gap:4px;display:flex}.key{cursor:pointer;border-radius:var(--r-xl);-webkit-tap-highlight-color:transparent;background:0 0;border:0;padding:0 0 10px;display:block;position:relative}.key:focus-visible{outline-color:var(--text);outline-offset:5px}.key-cap{background:linear-gradient(var(--key-top), var(--accent));width:148px;height:92px;color:var(--accent-text);font-size:2.125rem;font-weight:var(--w-heavy);letter-spacing:-.02em;box-shadow:0 9px 0 var(--accent-deep), 0 20px 36px -6px color-mix(in srgb, var(--accent) 45%, transparent), inset 0 1.5px 0 #fff6;transition:transform 90ms ease-out, box-shadow 90ms ease-out, filter var(--dur-fast);border-radius:22px;place-items:center;display:grid}.key:hover .key-cap{filter:brightness(1.06)}.key:active .key-cap,.key.is-down .key-cap{box-shadow:0 2px 0 var(--accent-deep), 0 8px 18px -6px color-mix(in srgb, var(--accent) 40%, transparent), inset 0 1.5px 0 #fff6;transform:translateY(7px)}.key:after{content:"";border-radius:var(--r-2xl);border:2px solid var(--accent);opacity:0;pointer-events:none;position:absolute;inset:-6px -6px 4px}.demo.is-auto .key:after{animation:2.8s ease-out infinite invite}@keyframes invite{0%{opacity:.55;transform:scale(.96)}70%,to{opacity:0;transform:scale(1.1)}}.key-hint{text-align:center;min-height:1.9em;font-size:var(--fs-fine);color:var(--muted);justify-content:center;align-items:center;line-height:1.9;display:flex}.key-hint kbd{margin-left:2px}.hint-coarse{display:none}@media (hover:none) and (pointer:coarse){.hint-fine{display:none}.hint-coarse{display:inline}}.moves{flex-direction:column;gap:8px;display:flex}.group{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-1);overflow:hidden}.tog{text-align:left;width:100%;min-height:44px;font-weight:var(--w-medium);cursor:pointer;transition:background-color var(--dur-fast);background:0 0;border:0;align-items:center;gap:10px;padding:8px 12px 8px 14px;display:flex}.tog+.tog{border-top:1px solid var(--line)}.tog:hover{background:color-mix(in srgb, var(--text) 4%, transparent)}.tog:focus-visible{outline-offset:-3px;border-radius:13px}.tog .ic{color:var(--muted);transition:color var(--dur-fast)}.tog[aria-checked=true] .ic{color:var(--accent)}.tog-name{flex:1;min-width:0}.tog[aria-checked=false] .tog-name{color:var(--muted)}.switch{border:1px solid var(--line-strong);background:var(--chip);width:42px;height:24px;transition:background-color var(--dur-fast) ease, border-color var(--dur-fast) ease;border-radius:12px;flex:none;position:relative}.switch .knob{width:18px;height:18px;transition:transform var(--dur-fast) ease;background:#fff;border-radius:50%;position:absolute;top:2px;left:2px;box-shadow:0 1px 2px #0000004d}.tog[aria-checked=true] .switch{background:var(--accent);border-color:var(--accent)}.tog[aria-checked=true] .switch .knob{transform:translate(18px)}.note{min-height:2.9em;font-size:var(--fs-fine);color:var(--muted);line-height:1.45}.note.warn{color:var(--warn)}.moves.shake .group{animation:.3s ease-in-out shake}@keyframes shake{25%{transform:translate(-4px)}75%{transform:translate(4px)}}.panel .btn.home{height:44px;margin-top:auto}.plat-line{margin-top:var(--sp-4);text-align:center;color:var(--muted);font-size:.875rem}@media (width<=1080px){.demo{grid-template-columns:minmax(0,1fr)}.panel{grid-template-columns:200px minmax(0,1fr);align-items:start;gap:16px 24px;padding:16px 12px 12px;display:grid}.keyzone{grid-row:span 2;padding-top:8px}.note{min-height:1.45em}}@media (width<=900px){.scene .cap{font-size:14.5px}}@media (width<=719px){.demo{border-radius:var(--r-xl);padding:8px}.stage{border-radius:16px;justify-content:center}.scene{aspect-ratio:400/490;max-width:440px}.demo-pause{inset:auto auto 6px 6px}.panel{grid-template-columns:minmax(0,1fr);padding:16px 6px 6px}.keyzone{grid-row:auto;padding-top:0}.note{min-height:2.9em}}@media (width>=1081px) and (height<=800px){:root{--top-h:56px}.hero{padding-top:6px}.hero h1{font-size:2.5rem}.hero .lede{font-size:var(--fs-large);margin-top:10px}.demo{margin-top:18px}}@media (prefers-reduced-motion:reduce){.cable-flow{display:none}}.band-label{text-align:center}.stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:20px;display:grid}.stat{text-align:center;align-content:start;justify-items:center;gap:6px;display:grid}.stat-v{font-size:clamp(3.25rem,2rem + 5vw,5.5rem);font-weight:var(--w-heavy);letter-spacing:-.045em;font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1}.stat-pre{font-size:.42em;font-weight:var(--w-bold);letter-spacing:-.02em;margin-right:.1em}.stat-l{max-width:30ch;color:var(--muted);font-size:var(--fs-large);line-height:1.45}.facts{border-top:1px solid var(--line);grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(32px,5vw,56px);padding-top:clamp(24px,4vw,40px);display:grid}.facts li{font-weight:var(--w-bold);font-size:var(--fs-large);justify-content:center;align-items:center;gap:12px;display:flex}@media (width<=719px){.stats{grid-template-columns:minmax(0,1fr);gap:32px}.facts{grid-template-columns:minmax(0,1fr);justify-items:start;width:fit-content;margin-inline:auto}.facts li{justify-content:flex-start}}.replaces{grid-template-columns:repeat(3,minmax(0,1fr)) auto minmax(0,1.15fr);align-items:stretch;gap:16px;display:grid}.rep{border-radius:22px;flex-direction:column;gap:6px;padding:20px 22px 24px;display:flex}.rep p{font-size:var(--fs-small);color:var(--muted)}.rep.old{border:1.5px dashed var(--line-strong)}.rep.old h3{color:var(--muted)}.rep.new{border:1.5px solid var(--accent);background:var(--card);box-shadow:var(--glow)}.rep-art{width:100%;max-width:190px;height:108px;margin-bottom:8px;display:block}.rep-key{place-items:center;max-width:none;display:grid}.rep-arrow{background:var(--accent-soft);width:40px;height:40px;color:var(--accent);border-radius:50%;align-self:center;place-items:center;display:grid}.r-s{fill:none;stroke:var(--line-strong);stroke-width:2px}.r-l{fill:none;stroke:var(--line-strong);stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}.r-dash{stroke-dasharray:3 5}.r-f,.r-dot{fill:var(--line-strong)}.r-hi{fill:var(--line-strong);opacity:.45}@media (width<=1080px){.replaces{grid-template-columns:repeat(3,minmax(0,1fr))}.rep-arrow{grid-column:1/-1;justify-self:center;transform:rotate(90deg)}.rep.new{text-align:center;grid-column:1/-1;align-items:center}}@media (width<=719px){.replaces{grid-template-columns:minmax(0,1fr)}.rep.old{flex-flow:wrap;align-items:center;column-gap:16px}.rep.old .rep-art{flex:none;width:96px;height:58px;margin:0}.rep.old h3{flex:1;min-width:0}.rep.old p{flex-basis:100%}}.plat{margin-top:16px;padding:0;overflow:hidden}.plat-head{border-bottom:1px solid var(--line);flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 24px;padding:18px 26px 14px;display:flex}.plat-head h2{font-size:var(--fs-heading);letter-spacing:-.015em;line-height:1.3;font-weight:var(--w-bold)}.plat-head p{font-size:var(--fs-small)}.plat-grid{grid-template-rows:repeat(3,auto);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.os{grid-row:span 3;grid-template-rows:subgrid;row-gap:10px;padding:18px 26px 20px;display:grid}.os+.os{border-left:1px solid var(--line)}.os-top{align-items:center;gap:12px;display:flex}.os-top h3{flex:1;min-width:0}.os .tile{background:var(--chip);width:40px;height:40px;color:var(--text)}.os-fact{font-size:var(--fs-small)}.os-dl{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.dl-l{font-size:.875rem}.os-dl .file{font-size:var(--fs-small);color:var(--text);padding:7px 12px}@media (width<=900px){.plat-grid{grid-template-rows:none;grid-template-columns:minmax(0,1fr)}.os{grid-row:auto;grid-template-rows:none}.os+.os{border-left:0;border-top:1px solid var(--line)}}.faq{border-top:1px solid var(--line);max-width:780px;margin-inline:auto}.faq details{border-bottom:1px solid var(--line)}.faq summary{min-height:60px;font-size:1.0938rem;font-weight:var(--w-bold);cursor:pointer;transition:color var(--dur-fast);justify-content:space-between;align-items:center;gap:16px;padding:16px 2px;line-height:1.35;list-style:none;display:flex}.faq summary::-webkit-details-marker{display:none}.faq summary:hover{color:var(--accent)}.faq summary:focus-visible{border-radius:8px}.faq summary .ic{color:var(--muted);transition:transform var(--dur) var(--ease)}.faq details[open] summary .ic{transform:rotate(45deg)}.faq details p{color:var(--muted);max-width:68ch;padding:0 40px 22px 2px}.faq details p+p{margin-top:-10px}@media (width<=719px){.faq details p{padding-right:8px}}
