@layer components{.devices-page{--device-bg:#050606;--device-panel:#0c0e0de6;--device-line:#e0e6e229;--device-strong:#e0e6e247;--device-text:#eef0eb;--device-muted:#969d98;--device-signal:#d69b3d;background:var(--device-bg);color:var(--device-text)}.device-explorer{border-block-end:1px solid var(--device-line);background:linear-gradient(#ffffff06 1px,transparent 1px),linear-gradient(90deg,#ffffff06 1px,transparent 1px),radial-gradient(circle at 52% 47%,#d69b3d16,transparent 28rem),var(--device-bg);background-size:5rem 5rem,5rem 5rem,auto,auto;min-block-size:calc(100svh - 4.5rem);padding:clamp(1rem,2.4vw,2.25rem);position:relative;overflow:clip}.device-explorer:before{content:"";pointer-events:none;background:linear-gradient(90deg,#050606cc,#0000 22% 75%,#050606b8);position:absolute;inset:0}.device-explorer__header{z-index:3;gap:var(--grid-gap);border-block-end:1px solid var(--device-line);grid-template-columns:minmax(18rem,1fr) minmax(18rem,.65fr);align-items:end;padding-block-end:var(--space-4);display:grid;position:relative}.device-explorer__kicker,.device-explorer__model-note,.device-explorer__controls,.device-detail__index,.device-detail__category,.device-detail dt,.device-selector,.device-scene__status,.device-fallback__number,.device-fallback__role span{font-family:var(--font-technical);letter-spacing:.09em;text-transform:uppercase}.device-explorer__kicker{color:var(--device-signal);font-size:.64rem}.device-explorer h1{max-inline-size:18ch;letter-spacing:-.055em;margin-block-start:var(--space-2);font-size:clamp(2rem,3.6vw,4.6rem);font-weight:300;line-height:.98}.device-explorer__model-note{color:var(--device-muted);margin-block-start:var(--space-3);font-size:.56rem;line-height:1.5}.device-explorer__header>p{max-inline-size:35rem;color:var(--device-muted);justify-self:end;font-size:.92rem;line-height:1.55}.device-explorer__controls{z-index:5;border-block-start:1px solid var(--device-strong);inline-size:min(12.5rem,20vw);display:grid;position:absolute;inset-block-start:clamp(8rem,14vw,11rem);inset-inline-start:clamp(1rem,2.4vw,2.25rem)}.device-explorer__controls button{justify-content:space-between;gap:var(--space-3);border:0;border-block-end:1px solid var(--device-line);min-block-size:2.75rem;color:var(--device-muted);font:inherit;letter-spacing:inherit;text-align:start;text-transform:inherit;cursor:pointer;background:0 0;align-items:center;padding-inline:0;font-size:.62rem;display:flex}.device-explorer__controls button:hover,.device-explorer__controls button:focus-visible,.device-explorer__controls button[aria-pressed=true]{color:var(--device-text)}.device-explorer__controls button[aria-pressed=true] span:before{background:var(--device-signal);content:"";block-size:.4rem;inline-size:.4rem;margin-inline-end:.5rem;display:inline-block;transform:rotate(45deg)}.device-explorer__controls button:disabled{cursor:wait;opacity:.42}.device-explorer__controls kbd{color:var(--device-signal);font:inherit}.device-explorer__workspace{z-index:2;min-block-size:clamp(40rem,70vh,56rem);grid-template-columns:minmax(0,1fr) minmax(17rem,21rem);gap:clamp(1rem,2.5vw,2.5rem);padding-block-start:var(--space-4);display:grid;position:relative}.device-scene{min-block-size:clamp(38rem,68vh,54rem);min-inline-size:0;position:relative}.device-scene__canvas{touch-action:none;position:absolute;inset:0}.device-scene__canvas canvas{block-size:100%;inline-size:100%;display:block}.device-scene__callouts{pointer-events:none;position:absolute;inset:0}.device-scene__callouts[data-hidden=true]{display:none}.device-callout{z-index:3;min-block-size:2.75rem;color:var(--device-muted);font-family:var(--font-technical);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;opacity:0;pointer-events:auto;background:#050606b8;border:1px solid #0000;align-items:center;gap:.55rem;padding:.45rem .6rem;font-size:.58rem;transition:color .16s,border-color .16s,opacity .16s;display:flex;position:absolute;inset-block-start:var(--callout-y,50%);inset-inline-start:var(--callout-x,50%)}.device-callout[data-visible=true]{opacity:1}.device-callout[data-side=left]{transform:translate(calc(-100% - 2.5rem),-50%)}.device-callout[data-side=right]{transform:translate(2.5rem,-50%)}.device-callout:after{background:var(--device-strong);content:"";block-size:1px;inline-size:2.5rem;position:absolute;inset-block-start:50%}.device-callout[data-side=left]:after{inset-inline-start:100%}.device-callout[data-side=right]:after{inset-inline-end:100%}.device-callout span{color:var(--device-signal)}.device-callout:hover,.device-callout:focus-visible,.device-callout[aria-pressed=true]{border-color:var(--device-signal);color:var(--device-text)}.device-scene__status{color:var(--device-muted);font-size:.58rem;position:absolute;inset-block-end:var(--space-3);inset-inline-start:0}.device-scene__status span{color:var(--device-signal);margin-inline:.45rem}.device-detail{border:1px solid var(--device-strong);background:var(--device-panel);backdrop-filter:blur(1rem);align-self:end;margin-block-end:clamp(2rem,6vh,5rem);padding:clamp(1rem,2vw,1.5rem)}.device-detail__index{justify-content:space-between;gap:var(--space-3);color:var(--device-muted);font-size:.58rem;display:flex}.device-detail__index span:first-child,.device-detail__category,.device-detail dt{color:var(--device-signal)}.device-detail__category{margin-block-start:var(--space-7);font-size:.58rem}.device-detail h2{letter-spacing:-.04em;margin-block-start:var(--space-2);font-size:clamp(1.7rem,2.5vw,2.8rem);font-weight:350}.device-detail__summary{color:var(--device-text);margin-block-start:var(--space-4);font-size:1rem;line-height:1.5}.device-detail dl{margin-block-start:var(--space-5)}.device-detail dl div{padding-block:var(--space-3);border-block-start:1px solid var(--device-line)}.device-detail dt{font-size:.57rem}.device-detail dd{color:var(--device-muted);margin-block-start:var(--space-2);font-size:.82rem;line-height:1.55}.device-detail>a{gap:var(--space-3);color:var(--device-text);margin-block-start:var(--space-5);font-size:.75rem;display:inline-flex}.device-detail>a span{color:var(--device-signal)}.device-selector{z-index:3;gap:var(--space-4);border-block-start:1px solid var(--device-line);color:var(--device-muted);grid-template-columns:8rem minmax(0,1fr);align-items:center;font-size:.58rem;display:grid;position:relative}.device-selector>ul{grid-template-columns:repeat(7,minmax(0,1fr));margin:0;padding:0;list-style:none;display:grid}.device-selector li{min-inline-size:0}.device-selector button{gap:var(--space-2);border:0;border-inline-start:1px solid var(--device-line);min-block-size:3.25rem;color:var(--device-muted);font:inherit;text-align:start;text-transform:inherit;cursor:pointer;background:0 0;grid-template-columns:1.5rem 1fr;align-items:center;padding:.5rem;display:grid}.device-selector button span{color:var(--device-signal)}.device-selector button:hover,.device-selector button:focus-visible,.device-selector button[aria-pressed=true]{color:var(--device-text);background:#d69b3d14}.device-explorer__motion-note{z-index:3;color:var(--device-muted);padding-block-start:var(--space-3);font-size:.72rem;position:relative}.device-fallback{padding-block:clamp(4rem,8vw,7rem)}.device-fallback__header{gap:var(--grid-gap);grid-template-columns:minmax(15rem,.8fr) minmax(20rem,1.2fr);align-items:end;display:grid}.device-fallback__header h2{max-inline-size:17ch;color:var(--device-text);font-size:var(--type-section);margin-block-start:var(--space-3)}.device-fallback__header>p{max-inline-size:42rem;color:var(--device-muted);line-height:1.65}.device-fallback__list{border-block-start:1px solid var(--device-strong);margin-block-start:var(--space-7);list-style:none}.device-fallback__list>li{gap:var(--grid-gap);padding-block:var(--space-5);border-block-end:1px solid var(--device-line);grid-template-columns:3rem minmax(14rem,.8fr) minmax(18rem,1.2fr);display:grid}.device-fallback__number{color:var(--device-signal);font-size:.62rem}.device-fallback h3{color:var(--device-text);font-size:1.35rem}.device-fallback li p{color:var(--device-muted);margin-block-start:var(--space-2);line-height:1.55}.device-fallback__role span{color:var(--device-signal);margin-block-end:var(--space-2);font-size:.57rem;display:block}.device-fallback__role a{gap:var(--space-3);color:var(--device-text);margin-block-start:var(--space-3);font-size:.72rem;display:inline-flex}}@layer overrides{@media (width<=64rem){.device-explorer__workspace{grid-template-columns:minmax(0,1fr) minmax(15rem,18rem)}.device-selector{grid-template-columns:1fr}.device-selector>p{padding-block-start:var(--space-3)}.device-selector>ul{grid-template-columns:repeat(7,minmax(8rem,1fr));overflow-x:auto}}@media (width<=48rem){.device-explorer{min-block-size:0;padding:1rem}.device-explorer__header,.device-explorer__workspace,.device-fallback__header,.device-fallback__list>li{grid-template-columns:1fr}.device-explorer__header>p{justify-self:start;margin-block-start:var(--space-3)}.device-explorer__controls{inline-size:100%;border:1px solid var(--device-line);grid-template-columns:repeat(3,minmax(0,1fr));margin-block-start:var(--space-3);display:grid;position:relative;inset:auto}.device-explorer__controls button{border-block-end:0;border-inline-end:1px solid var(--device-line);min-block-size:3rem;padding-inline:.55rem}.device-explorer__controls button:last-child{border-inline-end:0}.device-explorer__workspace{min-block-size:0;padding-block-start:var(--space-3)}.device-scene{border-block:1px solid var(--device-line);min-block-size:clamp(28rem,62svh,39rem)}.device-detail{backdrop-filter:none;margin:0}.device-callout{min-block-size:2.75rem;padding:.35rem .45rem;font-size:.5rem}.device-selector{margin-block-start:var(--space-3)}.device-selector button{min-block-size:3.25rem}.device-fallback__list>li{gap:var(--space-3)}.device-fallback__role{border-block-start:1px solid var(--device-line);padding-block-start:var(--space-3)}}@media (width<=30rem){.device-explorer__controls button{font-size:.53rem}.device-explorer__controls kbd,.device-callout{display:none}}@media (prefers-reduced-motion:reduce){.device-callout{transition:none}}@media (forced-colors:active){.device-explorer,.device-detail,.device-callout,.device-selector button{color:canvastext;background:canvas}.device-detail,.device-callout[aria-pressed=true],.device-selector button[aria-pressed=true]{border-color:highlight}}}