/* generated by site/build.mjs from frames/sales.dc.html: do not edit */
/* ds:l3-virgil-d5-v2 */@layer l3-virgil-d5-v2.core, product;:root{--pal-shell:#E6E4DF;--pal-plate:#F3F2EE;--pal-ink:#141414;--pal-ink-2:#45433F;--pal-ink-3:#5F5C56;--pal-line:#C4C1BA;--pal-white:#FFFFFF;--pal-black:#000000;--pal-panel:#171717;--pal-panel-2:#232322;--pal-panel-line:#3C3B38;--pal-light:#EDEBE6;--pal-light-2:#B6B3AC;--pal-light-3:#A09D96;--pal-screen:#0D100F;--pal-screen-2:#161A18;--pal-phosphor:#E9E5D8;--pal-phosphor-2:#A9AFA6;--pal-go:#FF5A1F;--pal-go-ink:#A8350A;--pal-go-lift:#FF8A5C;--pal-blue:#2F5BFF;--pal-blue-ink:#1F44CC;--pal-blue-lift:#93A8FF;--pal-red:#B3261E;--pal-red-bright:#FF8A7A;--font-text:'Archivo', system-ui, sans-serif;--font-mono:'JetBrains Mono', ui-monospace, monospace;--fs-label:12px;--fs-small:14px;--fs-body:17px;--fs-lede:19px;--fs-h3:22px;--fs-h2:clamp(28px, 3.4vw, 44px);--fs-h1:clamp(38px, 5.6vw, 76px);--fs-figure:clamp(30px, 3.6vw, 48px);--fs-display:clamp(40px, 6.4vw, 92px);--lh-tight:1.08;--lh-body:1.55;--track-label:0.08em;--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:72px;--sp-9:112px;--radius-s:8px;--radius-m:14px;--rule:1px;--rule-strong:2px;--radius-l:22px;--row:48px;--label-col:148px;--figure-col:112px;--measure:38em;--duration-quick:160ms;--duration-move:1000ms;--duration-stagger:160ms;--duration-sequence-max:5000ms;--ease-standard:cubic-bezier(0.2, 0, 0, 1);--ease-out:cubic-bezier(0.33, 1, 0.68, 1);--ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);--z-below:-1;--z-base:0;--z-raised:100;--z-sticky:200;--z-overlay:300;--z-modal:400;--z-toast:500;--opacity-disabled:0.5;--opacity-scrim:0.64;--focus-width:2px;--focus-offset:3px;--target-min:44px;--ts-display-family:var(--font-text);--ts-display-size:var(--fs-display);--ts-display-line-height:1.02;--ts-display-weight:800;--ts-display-tracking:-0.025em;--ts-display-case:none;--ts-display-numeric:normal;--ts-h1-family:var(--font-text);--ts-h1-size:var(--fs-h1);--ts-h1-line-height:var(--lh-tight);--ts-h1-weight:800;--ts-h1-tracking:-0.03em;--ts-h1-case:none;--ts-h1-numeric:normal;--ts-h2-family:var(--font-text);--ts-h2-size:var(--fs-h2);--ts-h2-line-height:1.12;--ts-h2-weight:800;--ts-h2-tracking:-0.015em;--ts-h2-case:none;--ts-h2-numeric:normal;--ts-h3-family:var(--font-text);--ts-h3-size:var(--fs-h3);--ts-h3-line-height:1.25;--ts-h3-weight:600;--ts-h3-tracking:0;--ts-h3-case:none;--ts-h3-numeric:normal;--ts-lede-family:var(--font-text);--ts-lede-size:var(--fs-lede);--ts-lede-line-height:1.45;--ts-lede-weight:400;--ts-lede-tracking:0;--ts-lede-case:none;--ts-lede-numeric:normal;--ts-body-family:var(--font-text);--ts-body-size:var(--fs-body);--ts-body-line-height:var(--lh-body);--ts-body-weight:400;--ts-body-tracking:0;--ts-body-case:none;--ts-body-numeric:normal;--ts-small-family:var(--font-text);--ts-small-size:var(--fs-small);--ts-small-line-height:1.45;--ts-small-weight:400;--ts-small-tracking:0;--ts-small-case:none;--ts-small-numeric:normal;--ts-label-family:var(--font-mono);--ts-label-size:var(--fs-label);--ts-label-line-height:1.35;--ts-label-weight:500;--ts-label-tracking:var(--track-label);--ts-label-case:uppercase;--ts-label-numeric:tabular-nums;--ts-figure-family:var(--font-mono);--ts-figure-size:var(--fs-figure);--ts-figure-line-height:1;--ts-figure-weight:700;--ts-figure-tracking:0;--ts-figure-case:none;--ts-figure-numeric:tabular-nums}:root,[data-scheme="shell"]{--surface:var(--pal-shell);--surface-raised:var(--pal-plate);--text:var(--pal-ink);--text-2:var(--pal-ink-2);--text-3:var(--pal-ink-3);--border:var(--pal-line);--border-strong:var(--pal-ink);--accent:var(--pal-ink);--action:var(--pal-go);--on-action:var(--pal-ink);--action-shade:var(--pal-white);--field-surface:var(--pal-white);--focus:var(--pal-ink);--error-text:var(--pal-red);--code-surface:var(--pal-screen);--code-ink:var(--pal-phosphor);--code-ink-2:var(--pal-phosphor-2);--code-line:var(--pal-screen);--shadow:var(--pal-ink);--signal:var(--pal-go);--go-text:var(--pal-go-ink);--ai:var(--pal-blue);--ai-text:var(--pal-blue-ink);--key:var(--pal-plate);--key-edge:var(--pal-line)}[data-scheme="plate"]{--surface:var(--pal-plate);--surface-raised:var(--pal-white);--text:var(--pal-ink);--text-2:var(--pal-ink-2);--text-3:var(--pal-ink-3);--border:var(--pal-line);--border-strong:var(--pal-ink);--accent:var(--pal-ink);--action:var(--pal-go);--on-action:var(--pal-ink);--action-shade:var(--pal-white);--field-surface:var(--pal-white);--focus:var(--pal-ink);--error-text:var(--pal-red);--code-surface:var(--pal-screen);--code-ink:var(--pal-phosphor);--code-ink-2:var(--pal-phosphor-2);--code-line:var(--pal-screen);--shadow:var(--pal-ink);--signal:var(--pal-go);--go-text:var(--pal-go-ink);--ai:var(--pal-blue);--ai-text:var(--pal-blue-ink);--key:var(--pal-white);--key-edge:var(--pal-line)}[data-scheme="panel"]{--surface:var(--pal-panel);--surface-raised:var(--pal-panel-2);--text:var(--pal-light);--text-2:var(--pal-light-2);--text-3:var(--pal-light-3);--border:var(--pal-panel-line);--border-strong:var(--pal-light);--accent:var(--pal-light);--action:var(--pal-go);--on-action:var(--pal-ink);--action-shade:var(--pal-white);--field-surface:var(--pal-panel-2);--focus:var(--pal-go-lift);--error-text:var(--pal-red-bright);--code-surface:var(--pal-screen);--code-ink:var(--pal-phosphor);--code-ink-2:var(--pal-phosphor-2);--code-line:var(--pal-panel-line);--shadow:var(--pal-black);--signal:var(--pal-go);--go-text:var(--pal-go-lift);--ai:var(--pal-blue-lift);--ai-text:var(--pal-blue-lift);--key:var(--pal-panel-2);--key-edge:var(--pal-black)}[data-scheme="screen"]{--surface:var(--pal-screen);--surface-raised:var(--pal-screen-2);--text:var(--pal-phosphor);--text-2:var(--pal-phosphor-2);--text-3:var(--pal-phosphor-2);--border:var(--pal-panel-line);--border-strong:var(--pal-light);--accent:var(--pal-light);--action:var(--pal-go);--on-action:var(--pal-ink);--action-shade:var(--pal-white);--field-surface:var(--pal-panel-2);--focus:var(--pal-go-lift);--error-text:var(--pal-red-bright);--code-surface:var(--pal-screen);--code-ink:var(--pal-phosphor);--code-ink-2:var(--pal-phosphor-2);--code-line:var(--pal-panel-line);--shadow:var(--pal-black);--signal:var(--pal-go);--go-text:var(--pal-go-lift);--ai:var(--pal-blue-lift);--ai-text:var(--pal-blue-lift);--key:var(--pal-panel-2);--key-edge:var(--pal-black)}:where(:root,[data-scheme],[data-product]){--text-hover:color-mix(in oklab, var(--text) 80%, var(--surface));--text-active:color-mix(in oklab, var(--text) 68%, var(--surface));--action-hover:color-mix(in oklab, var(--action) 84%, var(--action-shade));--action-active:color-mix(in oklab, var(--action) 72%, var(--action-shade));--accent-wash:color-mix(in oklab, var(--accent) 7%, var(--surface));--accent-wash-2:color-mix(in oklab, var(--accent) 12%, var(--surface));--surface-hover:color-mix(in oklab, var(--text) 6%, var(--surface));--border-hover:color-mix(in oklab, var(--text-3) 55%, var(--text));--disabled-bg:color-mix(in oklab, var(--text) 7%, var(--surface));--disabled-text:color-mix(in oklab, var(--text) 50%, var(--surface));--disabled-border:color-mix(in oklab, var(--text) 16%, var(--surface));--shadow-raised:0 1px 2px color-mix(in oklab, var(--shadow) 16%, transparent), 0 8px 24px color-mix(in oklab, var(--shadow) 10%, transparent)}@layer l3-virgil-d5-v2.core{:where(:root,[data-scheme],[data-product]){--label-text:var(--text-2);--lede-text:var(--text-2);--small-text:var(--text-2);--focus-ring:var(--focus);--focus-ring-width:var(--focus-width);--focus-ring-offset:var(--focus-offset);--btn-bg:var(--action);--btn-text:var(--on-action);--btn-border:var(--action);--btn-hover-bg:var(--action-hover);--btn-hover-text:var(--on-action);--btn-hover-border:var(--action-hover);--btn-active-bg:var(--action-active);--btn-disabled-bg:var(--disabled-bg);--btn-disabled-text:var(--disabled-text);--btn-disabled-border:var(--disabled-border);--btn-font:600 15px/1 var(--font-text);--btn-height:var(--target-min);--btn-pad-x:var(--sp-5);--btn-radius:var(--radius-s);--btn-border-width:var(--rule-strong);--btn-decoration:none;--link-text:var(--text);--link-hover-text:var(--text);--link-underline:1px;--link-underline-hover:2px;--field-bg:var(--field-surface);--field-text:var(--text);--field-label:var(--text-2);--field-placeholder:var(--text-3);--field-frame:var(--text-3);--field-border:var(--text-3);--field-border-hover:var(--border-hover);--field-focus:var(--focus);--field-error:var(--error-text);--field-height:var(--target-min);--field-pad-x:var(--sp-3);--field-radius:var(--radius-s);--field-border-width:var(--rule);--card-bg:var(--surface-raised);--card-border:var(--border);--card-border-width:var(--rule);--card-top-width:var(--rule);--card-radius:var(--radius-m);--card-pad:var(--sp-5);--card-shadow:none;--code-bg:var(--code-surface);--code-text:var(--code-ink);--code-muted:var(--code-ink-2);--code-border:var(--code-line);--code-radius:var(--radius-m);--key-bg:var(--key);--key-text:var(--text);--key-label:var(--text-2);--key-edge-c:var(--key-edge);--key-led-on:var(--signal);--key-radius:var(--radius-s);--key-size:var(--target-min);--key-depth:3px;--led-c:var(--border)}.t-display{font-family:var(--ts-display-family);font-size:var(--ts-display-size);line-height:var(--ts-display-line-height);font-weight:var(--ts-display-weight);letter-spacing:var(--ts-display-tracking);text-transform:var(--ts-display-case);font-variant-numeric:var(--ts-display-numeric)}.t-h1,.hy h1{font-family:var(--ts-h1-family);font-size:var(--ts-h1-size);line-height:var(--ts-h1-line-height);font-weight:var(--ts-h1-weight);letter-spacing:var(--ts-h1-tracking);text-transform:var(--ts-h1-case);font-variant-numeric:var(--ts-h1-numeric)}.t-h2,.hy h2{font-family:var(--ts-h2-family);font-size:var(--ts-h2-size);line-height:var(--ts-h2-line-height);font-weight:var(--ts-h2-weight);letter-spacing:var(--ts-h2-tracking);text-transform:var(--ts-h2-case);font-variant-numeric:var(--ts-h2-numeric)}.t-h3,.hy h3{font-family:var(--ts-h3-family);font-size:var(--ts-h3-size);line-height:var(--ts-h3-line-height);font-weight:var(--ts-h3-weight);letter-spacing:var(--ts-h3-tracking);text-transform:var(--ts-h3-case);font-variant-numeric:var(--ts-h3-numeric)}.t-lede,.lede{font-family:var(--ts-lede-family);font-size:var(--ts-lede-size);line-height:var(--ts-lede-line-height);font-weight:var(--ts-lede-weight);letter-spacing:var(--ts-lede-tracking);text-transform:var(--ts-lede-case);font-variant-numeric:var(--ts-lede-numeric)}.t-body,.hy{font-family:var(--ts-body-family);font-size:var(--ts-body-size);line-height:var(--ts-body-line-height);font-weight:var(--ts-body-weight);letter-spacing:var(--ts-body-tracking);text-transform:var(--ts-body-case);font-variant-numeric:var(--ts-body-numeric)}.t-small,.small{font-family:var(--ts-small-family);font-size:var(--ts-small-size);line-height:var(--ts-small-line-height);font-weight:var(--ts-small-weight);letter-spacing:var(--ts-small-tracking);text-transform:var(--ts-small-case);font-variant-numeric:var(--ts-small-numeric)}.t-label,.lbl{font-family:var(--ts-label-family);font-size:var(--ts-label-size);line-height:var(--ts-label-line-height);font-weight:var(--ts-label-weight);letter-spacing:var(--ts-label-tracking);text-transform:var(--ts-label-case);font-variant-numeric:var(--ts-label-numeric)}.t-figure{font-family:var(--ts-figure-family);font-size:var(--ts-figure-size);line-height:var(--ts-figure-line-height);font-weight:var(--ts-figure-weight);letter-spacing:var(--ts-figure-tracking);text-transform:var(--ts-figure-case);font-variant-numeric:var(--ts-figure-numeric)}.btn[data-variant="solid-secondary"]{--btn-bg:var(--text);--btn-text:var(--surface);--btn-border:var(--text);--btn-hover-bg:var(--text-hover);--btn-hover-text:var(--surface);--btn-hover-border:var(--text-hover);--btn-active-bg:var(--text-active)}.btn[data-variant="outline-primary"]{--btn-bg:transparent;--btn-text:var(--accent);--btn-border:var(--accent);--btn-hover-bg:var(--accent-wash);--btn-hover-text:var(--accent);--btn-hover-border:var(--accent);--btn-active-bg:var(--accent-wash-2);--btn-disabled-bg:transparent}.btn[data-variant="outline-secondary"]{--btn-bg:transparent;--btn-text:var(--text);--btn-border:var(--text);--btn-hover-bg:var(--surface-hover);--btn-hover-text:var(--text);--btn-hover-border:var(--text);--btn-active-bg:var(--disabled-bg);--btn-disabled-bg:transparent}.btn[data-variant="link-primary"]{--btn-bg:transparent;--btn-text:var(--accent);--btn-border:transparent;--btn-hover-bg:transparent;--btn-hover-text:var(--text);--btn-hover-border:transparent;--btn-active-bg:transparent;--btn-disabled-bg:transparent;--btn-disabled-border:transparent;--btn-pad-x:0;--btn-decoration:underline}.btn[data-variant="link-secondary"]{--btn-bg:transparent;--btn-text:var(--text);--btn-border:transparent;--btn-hover-bg:transparent;--btn-hover-text:var(--text-2);--btn-hover-border:transparent;--btn-active-bg:transparent;--btn-disabled-bg:transparent;--btn-disabled-border:transparent;--btn-pad-x:0;--btn-decoration:underline}.field[data-variant="underline"]{--field-bg:transparent;--field-frame:transparent;--field-radius:0;--field-pad-x:0}.card[data-variant="raised"]{--card-border:transparent;--card-shadow:var(--shadow-raised)}.card[data-variant="ruled"]{--card-bg:transparent;--card-border:var(--border-strong);--card-border-width:0;--card-top-width:var(--rule-strong);--card-radius:0;--card-pad:var(--sp-4) 0 0}.key[data-variant="go"]{--key-bg:var(--action);--key-text:var(--on-action);--key-label:var(--on-action);--key-led-on:var(--on-action)}}/* /ds */
body{margin:0}
@layer l3-virgil-d5-v2.core{
.cq{container-type:inline-size}
*,*::before,*::after{box-sizing:border-box}
[data-scheme],[data-product]{background:var(--surface);color:var(--text)}
.hy{container-type:inline-size;color:var(--text)}
.hy h1,.hy h2,.hy h3,.hy p{margin:0}
.lede{color:var(--lede-text);max-width:var(--measure)}
.lbl{color:var(--label-text)}
.small{color:var(--small-text)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:var(--btn-height);min-width:var(--target-min);padding:0 var(--btn-pad-x);border-radius:var(--btn-radius);font:var(--btn-font);border:var(--btn-border-width) solid var(--btn-border);background:var(--btn-bg);color:var(--btn-text);text-decoration:var(--btn-decoration);text-underline-offset:4px;cursor:pointer;white-space:nowrap;transition:background-color var(--duration-quick) var(--ease-standard),border-color var(--duration-quick) var(--ease-standard),color var(--duration-quick) var(--ease-standard)}
.btn:hover,.btn.is-hover{background:var(--btn-hover-bg);border-color:var(--btn-hover-border);color:var(--btn-hover-text)}
.btn:active,.btn.is-active{background:var(--btn-active-bg)}
.btn:focus-visible,.btn.is-focus{outline:var(--focus-ring-width) solid var(--focus-ring);outline-offset:var(--focus-ring-offset)}
.btn[disabled],.btn.is-disabled,.btn[aria-disabled="true"]{background:var(--btn-disabled-bg);border-color:var(--btn-disabled-border);color:var(--btn-disabled-text);cursor:not-allowed}
a.link{color:var(--link-text);text-decoration:underline;text-decoration-thickness:var(--link-underline);text-underline-offset:3px}
a.link:hover{color:var(--link-hover-text);text-decoration-thickness:var(--link-underline-hover)}
.field{display:flex;flex-direction:column;gap:var(--sp-1)}
.field>.lbl{color:var(--field-label)}
.field input,.field textarea,.field select{min-height:var(--field-height);padding:0 var(--field-pad-x);border:var(--field-border-width) solid var(--field-frame);border-bottom-color:var(--field-border);border-radius:var(--field-radius);font:16px var(--font-text);color:var(--field-text);background:var(--field-bg)}
.field input::placeholder{color:var(--field-placeholder)}
.field input:hover,.field.is-hover input{border-bottom-color:var(--field-border-hover)}
.field input:focus-visible,.field.is-focus input{outline:var(--focus-ring-width) solid var(--field-focus);outline-offset:1px}
.field.is-error input,.field[data-state="error"] input{border-color:var(--field-error);border-width:var(--rule-strong)}
.field .msg{font-size:var(--fs-small);color:var(--field-error)}
.card{display:flex;flex-direction:column;gap:var(--sp-3);background:var(--card-bg);border:var(--card-border-width) solid var(--card-border);border-top-width:var(--card-top-width);border-radius:var(--card-radius);padding:var(--card-pad);box-shadow:var(--card-shadow)}
.code{margin:0;white-space:pre;overflow-x:auto;font:13px/1.6 var(--font-mono);background:var(--code-bg);color:var(--code-text);box-shadow:inset 0 0 0 var(--rule) var(--code-border);padding:var(--sp-4) var(--sp-5);border-radius:var(--code-radius)}
.code .ln{display:block;min-height:1.6em}.code .c{color:var(--code-muted)}.code .k{color:var(--code-text);font-weight:500}
.key{position:relative;display:inline-flex;flex-direction:column;justify-content:space-between;gap:var(--sp-2);min-height:var(--key-size);min-width:var(--key-size);padding:var(--sp-2) var(--sp-3) calc(var(--sp-2) + var(--key-depth));background:var(--key-bg);color:var(--key-text);border-radius:var(--key-radius);box-shadow:inset 0 calc(-1 * var(--key-depth)) 0 var(--key-edge-c),0 0 0 1px var(--key-edge-c);font:600 15px/1.15 var(--font-text);text-decoration:none;text-align:left;cursor:pointer;transition:transform var(--duration-quick) var(--ease-standard),box-shadow var(--duration-quick) var(--ease-standard)}
.key .k-n{font:500 var(--fs-label)/1 var(--font-mono);letter-spacing:var(--track-label);color:var(--key-label)}
.key:hover,.key.is-hover{transform:translateY(1px);box-shadow:inset 0 calc(-1 * var(--key-depth) + 1px) 0 var(--key-edge-c),0 0 0 1px var(--key-edge-c)}
.key:active,.key.is-active,.key[aria-pressed="true"]{transform:translateY(2px);box-shadow:inset 0 0 0 0 var(--key-edge-c),0 0 0 1px var(--key-edge-c)}
.key:focus-visible,.key.is-focus{outline:var(--focus-ring-width) solid var(--focus-ring);outline-offset:var(--focus-ring-offset)}
.led{display:inline-block;flex:none;width:9px;height:9px;border-radius:50%;background:var(--led-c);box-shadow:0 0 0 2px color-mix(in oklab,var(--text) 82%,transparent)}
.led.on{--led-c:var(--key-led-on)}.led.ai{--led-c:var(--ai)}.led.here{--led-c:var(--text)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
}
/* SHARED: built from src/shared.css by generator/frame-build.mjs. Identical in every frame; edit src, not this. */
/* SHARED: helper classes used in more than one frame. Roles and component tokens only. */
.hy h1,.hy h2,.t-wide{font-stretch:125%}
.mk{display:block;flex:none;--mk-cap:var(--text);--mk-v:var(--surface);--mk-led:var(--signal)}
.mk .mk-c{fill:var(--mk-cap)}.mk .mk-v{fill:var(--mk-v)}.mk .mk-d{fill:var(--mk-led)}
.mk.one{--mk-led:var(--surface)}
.wm{display:inline-flex;align-items:baseline;font:400 var(--wm-size,28px)/1 'Instrument Serif',Georgia,serif;letter-spacing:-0.005em;color:var(--text);white-space:nowrap}
.wm .ti{font-style:italic;color:color-mix(in oklab,var(--signal) 78%,var(--text))}
.wm.one .ti{color:inherit}
.wm .wm-2{margin-left:0.24em}
.lbl{font:var(--ts-label-weight) var(--ts-label-size)/var(--ts-label-line-height) var(--ts-label-family);letter-spacing:var(--ts-label-tracking);text-transform:uppercase;font-variant-numeric:tabular-nums}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.screws{position:relative}
.screws::before,.screws::after{content:"";position:absolute;top:12px;width:7px;height:7px;border-radius:50%;background:radial-gradient(circle,var(--text-3) 0 1px,transparent 1.5px),var(--border);box-shadow:inset 0 0 0 1px var(--text-3)}
.screws::before{left:12px}.screws::after{right:12px}
.pad{border-radius:var(--radius-s);background:var(--surface-raised);box-shadow:0 0 0 1px var(--border);padding:var(--sp-3) var(--sp-4)}
.pad-top{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.pad-top .lbl{margin-right:auto}
.vkey{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;background:var(--text);color:var(--surface);font:800 13px/1 var(--font-text);font-stretch:125%;flex:none}
.tag{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:999px;box-shadow:0 0 0 1px var(--border);font:500 var(--fs-label)/1.6 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-2)}
.slot{font-family:var(--font-mono);color:var(--text-2);white-space:nowrap;border-bottom:1px dashed var(--text-3)}
.sheet{position:relative;background:var(--surface-raised);color:var(--text);border-radius:4px;box-shadow:0 1px 0 var(--border),0 18px 40px color-mix(in oklab,var(--shadow) 18%,transparent);padding:var(--sp-6) var(--sp-5) var(--sp-5);font-size:15px}
.sheet::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:radial-gradient(circle at 6px 0,var(--surface) 0 3.5px,transparent 4px) 0 0/12px 10px repeat-x}
.sheet dl{margin:0;display:grid;gap:var(--sp-4)}
.sheet dt{margin-bottom:4px}
.sheet dd{margin:0;line-height:1.5}
.sheet .sig{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px dashed var(--text-3)}
.co{border-radius:var(--radius-s);box-shadow:0 0 0 1px var(--border);background:var(--surface-raised);padding:var(--sp-4);font-size:15px;color:var(--text)}
.co .r{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px var(--sp-3);padding:6px 0;border-bottom:1px solid var(--border)}
.co .r:last-child{border-bottom:0}
.co .r b{font-weight:600}
.co .amt{margin-left:auto;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
/* page patterns (shown in Components first) */
.wrap{max-width:1280px;margin:0 auto;padding-left:16px;padding-right:16px}
.skip{position:absolute;left:12px;top:-200px;z-index:var(--z-modal);min-height:44px;display:inline-flex;align-items:center;padding:0 16px;background:var(--text);color:var(--surface);border-radius:var(--radius-s);font-weight:600}
.skip:focus{top:12px;outline:var(--focus-ring-width) solid var(--focus-ring);outline-offset:2px}
a.link{min-height:44px;display:inline-flex;align-items:center}
.hy h3{font:700 19px/1.25 var(--font-text);font-stretch:112%}
.top{position:sticky;top:0;z-index:var(--z-sticky);border-bottom:1px solid var(--border)}
.top-in{display:flex;align-items:center;gap:8px;min-height:64px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;min-height:44px;min-width:44px;margin-right:auto}
.brand:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring);outline-offset:3px;border-radius:6px}
.brand-wm{--wm-size:19px;display:none}
.navk{display:flex;gap:4px}
.nk{flex-direction:row;align-items:center;gap:6px;padding:0 9px calc(var(--key-depth));min-width:44px;font:500 13px/1 var(--font-mono)}
.nk .nk-w{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.nk[aria-current="true"] .led{--led-c:var(--text)}
.hk{flex-direction:row;align-items:center;gap:8px;padding:0 12px var(--key-depth);font:700 15px/1 var(--font-text)}
.hk .hk-x{display:none}
.face{position:relative;border-radius:var(--radius-l);padding:14px 16px 16px;box-shadow:0 0 0 1px var(--border),0 2px 0 var(--border);
background:radial-gradient(circle at 12px 12px,var(--text-3) 0 1px,var(--border) 1.5px 3.5px,transparent 4px),radial-gradient(circle at calc(100% - 12px) 12px,var(--text-3) 0 1px,var(--border) 1.5px 3.5px,transparent 4px),radial-gradient(circle at 12px calc(100% - 12px),var(--text-3) 0 1px,var(--border) 1.5px 3.5px,transparent 4px),radial-gradient(circle at calc(100% - 12px) calc(100% - 12px),var(--text-3) 0 1px,var(--border) 1.5px 3.5px,transparent 4px),var(--surface)}
.face-k{display:flex;flex-wrap:wrap;gap:2px 16px;justify-content:space-between;padding:0 8px 12px;margin-bottom:18px!important;border-bottom:1px solid var(--border);color:var(--text-2)}
.face-k span:first-child{color:var(--text)}
.face-k2{display:none}
.gk-ar{font:500 20px/1 var(--font-mono)}
.gokey{min-width:200px;min-height:64px;padding:10px 16px calc(10px + var(--key-depth));box-shadow:inset 0 calc(-1 * var(--key-depth)) 0 color-mix(in oklab,var(--action) 60%,var(--text)),0 0 0 1px var(--text)}
.gokey .k-n{opacity:1}
.gk-l{display:flex;align-items:center;justify-content:space-between;gap:16px;font:800 19px/1 var(--font-text);font-stretch:112%}
.dev{margin:0;border-radius:var(--radius-m);padding:10px 10px 0;box-shadow:inset 0 0 0 1px var(--border)}
.dev-scr{border-radius:var(--radius-m);overflow:hidden;box-shadow:inset 0 0 0 1px var(--border);height:300px}
.dev-scr img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.dev-ro{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:10px 6px 12px;color:var(--text-2)}
.dev-ro .lbl:first-child{margin-right:auto;color:var(--text)}
.jack{display:inline-block;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle,var(--text) 0 3px,var(--surface-raised) 3.5px 5px,var(--text-3) 5.5px);flex:none}
.jack.big{width:22px;height:22px;background:radial-gradient(circle,var(--text) 0 5px,var(--surface-raised) 5.5px 8px,var(--text-3) 8.5px)}
@media (min-width:900px){
.face{padding:18px 28px 28px}
.face-k{padding:0 0 16px;margin-bottom:28px!important;padding-right:180px}
.dev-scr{height:auto;aspect-ratio:4/4.2}
.dev-scr img{object-position:50% 20%}
}
.mod{border-radius:var(--radius-m);background:var(--surface-raised);box-shadow:0 0 0 1px var(--border);padding:18px 20px 20px;display:flex;flex-direction:column;gap:10px}
.mod-top{display:flex;align-items:center;gap:10px}
.mod-out{margin-top:auto!important;padding-top:12px;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;font-weight:600}
.mod-spec{background:var(--surface);box-shadow:none}
.spec{list-style:none;margin:0;padding:0;display:grid}
.spec li{display:flex;flex-wrap:wrap;gap:2px 14px;padding:9px 0;border-bottom:1px solid var(--border);font-size:15px}
.spec li:last-child{border-bottom:0}
.spec li{flex-direction:column}
.spec li span:first-child{font-family:var(--font-mono);min-width:6.5em;color:var(--text)}
.spec li span:last-child{color:var(--text-2)}
.seq-ro{border-radius:var(--radius-m);padding:18px 18px 20px;box-shadow:inset 0 0 0 1px var(--border)}
.ro-k{display:flex;align-items:center;gap:10px;color:var(--text-2)}
.ro-t{margin-top:10px!important;font:600 20px/1.35 var(--font-text);max-width:34em}
.ro-f{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}
.ro-f li{display:flex;flex-direction:column;gap:4px;font-size:14px;color:var(--text-2)}
.ro-f b{font-size:28px;line-height:1;font-weight:700;color:var(--text)}
.seq-leg{display:flex;flex-wrap:wrap;gap:10px 22px;margin:22px 0 14px;font-size:14px;color:var(--text-2)}
.seq-leg>span{display:inline-flex;align-items:center;gap:8px}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.st .pad-top{margin-bottom:6px;gap:12px}
.st .pad-top .lbl{margin-right:0}
.st h3{margin-right:auto!important}
.st .lights{display:flex;gap:8px;align-items:center}
.st p{font-size:15px;line-height:1.5;color:var(--text-2)}
.st-v{box-shadow:0 0 0 2px var(--text)}
.st-live{box-shadow:0 0 0 1px var(--border),inset 0 3px 0 var(--signal)}
.slot-out{margin:28px auto 0;max-width:560px;height:28px;border-radius:14px 14px 0 0;background:var(--surface-raised);box-shadow:inset 0 2px 0 var(--border);display:flex;align-items:flex-start;justify-content:center;padding-top:7px}
.slot-out .lbl{color:var(--text-2);font-size:12px}
.sh-k{display:flex;justify-content:space-between;gap:12px;color:var(--text-2)}
.sh-t{font:800 22px/1.15 var(--font-text);font-stretch:125%;margin:10px 0 18px!important}
.sheet dt{display:flex;align-items:center;gap:8px;color:var(--text-2)}
@keyframes lit{from{opacity:.25;transform:scale(.6)}}
.slot-out{margin-left:6%;margin-right:0;max-width:544px}
.carts{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.cart{border-radius:var(--radius-m);background:var(--surface-raised);box-shadow:0 0 0 1px var(--border),inset 0 -4px 0 var(--border);padding:14px 16px 22px;display:flex;flex-direction:column;gap:10px}
.cart-l{display:flex;align-items:center;justify-content:space-between}
.cart-img{border-radius:var(--radius-s);overflow:hidden;aspect-ratio:16/10;background:var(--surface);display:grid;place-items:center;padding:0}
.cart-img img{width:100%;height:100%;object-fit:cover;display:block}
.cart-img .co{width:86%;font-size:14px}
.cart-img.cart-co{aspect-ratio:auto;min-height:0;padding:20px 0}
.close-a{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:10px}
.foot{padding:20px 0;border-top:1px solid var(--border)}
.foot-g{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px}
.foot-b{display:inline-flex;align-items:center;gap:10px}