/* small design system: doc page + components. Uses tokens.css. No build step. */
@font-face{font-family:"Haskoy";src:url("../fonts/Haskoy-Variable.woff2") format("woff2");font-weight:400 500;size-adjust:104%;font-style:normal;font-display:swap}
@font-face{font-family:"Commit Mono";src:url("../fonts/CommitMono-Variable.woff2") format("woff2");font-weight:400 500;font-style:normal;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto;scroll-padding-top:72px}
body{margin:0;background:var(--bg);color:var(--text);font:var(--fw-ui) var(--fs-ui)/var(--lh-ui) var(--font-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,pre{margin:0}
ul,ol{padding:0;list-style:none}
a{color:var(--accent);text-decoration:none;text-underline-offset:3px}
a:hover{color:var(--accent-hover);text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
svg.i{width:16px;height:16px;fill:currentColor;flex:none;display:block}
svg.i.lg{width:20px;height:20px}
::selection{background:var(--accent-subtle);color:var(--text)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius-sm)}
.mono{font-family:var(--font-mono);font-feature-settings:"calt" 0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--text-2)}.faint{color:var(--text-3)}
kbd{display:inline-flex;align-items:center;height:20px;min-width:20px;padding:0 5px;justify-content:center;font:500 12px/1 var(--font-mono);color:var(--text-2);background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-sm)}

/* wordmark */
.wm{display:inline-flex;align-items:baseline;font-weight:500;letter-spacing:-0.045em;line-height:1;color:var(--text);font-size:var(--wm-size,20px);white-space:nowrap}
.wm i{display:inline-block;width:.2em;height:.2em;background:var(--accent);margin:0 .02em 0 .045em;flex:none;border-radius:1px}
.wm b{font-weight:500;color:var(--text-2)}
a.wm:hover{text-decoration:none;color:var(--text)}

/* page shell */
.top{position:sticky;top:0;z-index:var(--z-sticky);height:56px;display:flex;align-items:center;gap:var(--space-3);padding:0 var(--space-5);background:var(--bg);border-bottom:1px solid var(--border)}
.top .sp{flex:1}
.doc{display:grid;grid-template-columns:208px minmax(0,1fr);max-width:1280px;margin:0 auto}
.toc{position:sticky;top:56px;align-self:start;height:calc(100dvh - 56px);overflow:auto;padding:var(--space-5) var(--space-3) var(--space-5) var(--space-5);border-right:1px solid var(--border)}
.toc a{display:block;padding:5px 8px;border-radius:var(--radius-md);color:var(--text-2);font-size:13px;line-height:20px}
.toc a:hover{background:var(--surface-2);color:var(--text);text-decoration:none}
.toc a[aria-current="true"]{color:var(--text);font-weight:500;background:var(--surface-2)}
.toc .grp{margin:var(--space-4) 8px 4px;font-size:12px;color:var(--text-3);font-weight:500}
.toc .grp:first-child{margin-top:0}
main{min-width:0;padding:0 var(--space-7) var(--space-9)}
.sec{padding-top:var(--space-9)}
.sec>h2{font-size:var(--fs-title);line-height:var(--lh-title);letter-spacing:var(--ls-title);font-weight:500;margin-bottom:var(--space-3)}
.sec>.lede{color:var(--text-2);font-size:15px;line-height:24px;max-width:66ch;margin-bottom:var(--space-6)}
.sec h3{font-size:16px;line-height:24px;font-weight:500;letter-spacing:-0.01em;margin:var(--space-7) 0 var(--space-3)}
.sec h3:first-of-type{margin-top:0}
.sec h4{font-size:13px;line-height:20px;font-weight:500;margin-bottom:var(--space-2)}
.note{font-size:13px;line-height:20px;color:var(--text-3);margin-top:var(--space-3);max-width:77ch}
code,.code{font-family:var(--font-mono);font-size:.92em;background:var(--surface-2);border-radius:var(--radius-sm);padding:1px 5px}
.snip{font:400 13px/20px var(--font-mono);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-4);overflow:auto;color:var(--text);margin-top:var(--space-4)}
.snip .k{color:var(--accent)}.snip .c{color:var(--text-3)}

/* hero */
.hero{padding-top:var(--space-8);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:var(--space-8);align-items:center}
.hero h1{font-size:clamp(34px,5vw,var(--fs-display));line-height:1.08;letter-spacing:var(--ls-display);font-weight:500;max-width:13.2ch}
.hero p{margin-top:var(--space-4);color:var(--text-2);font-size:16px;line-height:26px;max-width:48ch}
.hero .cta{display:flex;gap:var(--space-2);margin-top:var(--space-5);flex-wrap:wrap}
.hero .stage{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);padding:var(--space-5)}
.hero .stage .cap{margin-top:var(--space-4)}
.cap{font-size:12px;line-height:16px;color:var(--text-3)}

/* generic demo blocks */
.demo{border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-5);background:var(--bg)}
.demo.alt{background:var(--surface)}
.demo+.demo,.demo+.note+.demo{margin-top:var(--space-4)}
.demo .lbl{font-size:12px;line-height:16px;color:var(--text-3);margin-bottom:var(--space-3);display:block}
.states{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--space-5) var(--space-4);align-items:start}
.states.fstates{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--space-5) var(--space-6)}
.fcol{display:grid;gap:var(--space-5);max-width:460px}
.states>div{min-width:0}
.cols2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5)}
.dd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-5);margin-top:var(--space-4)}
.dd>div{min-width:0}
.dd h4{display:flex;align-items:center;gap:6px}
.dd ul{display:grid;gap:var(--space-2);font-size:14px;color:var(--text-2);line-height:20px}
.dd li{padding-left:16px;position:relative}
.dd li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:1px;background:var(--text-3)}
.dd .do h4{color:var(--success)}.dd .dont h4{color:var(--danger)}
dl.defs{display:grid;grid-template-columns:200px minmax(0,1fr);gap:0}
dl.defs dt,dl.defs dd{padding:var(--space-4) 0;border-top:1px solid var(--border)}
dl.defs dt:first-of-type,dl.defs dt:first-of-type+dd{border-top:0;padding-top:0}
dl.defs dt{font-weight:500;font-size:15px;letter-spacing:-0.008em}
dl.defs dd{color:var(--text-2);font-size:15px;line-height:24px;max-width:66ch}

/* wordmark section */
.wmstage{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--space-4)}
.wmbig{display:flex;align-items:center;min-height:200px;padding:var(--space-6);border:1px solid var(--border);border-radius:var(--radius-lg);--wm-size:72px;overflow:hidden}
.wmvars{display:grid;grid-template-rows:1fr 1fr;gap:var(--space-4)}
.wmvars>div{display:flex;align-items:center;padding:0 var(--space-5);border:1px solid var(--border);border-radius:var(--radius-lg);--wm-size:30px;min-height:92px}
.tile{width:40px;height:40px;border:1px solid var(--border-strong);border-radius:var(--radius-lg);background:var(--surface);position:relative;flex:none}
.tile::after{content:"";position:absolute;left:30%;bottom:30%;width:20%;height:20%;background:var(--accent);border-radius:1px}
.marks{display:flex;align-items:flex-end;gap:var(--space-5);flex-wrap:wrap}
.marks .tile.s{width:24px;height:24px;border-radius:6px}
.marks .tile.l{width:64px;height:64px;border-radius:12px}
.marks figure{display:grid;gap:var(--space-2);justify-items:start}

/* swatches */
.sw-group{margin-top:var(--space-6)}
.sw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--space-5) var(--space-4)}
.sw{min-width:0}
.sw .chip{display:grid;grid-template-columns:1fr 1fr;height:56px;border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden}
.sw .chip span{display:flex;align-items:flex-end;padding:4px 6px;font:400 11px/14px var(--font-mono)}
.sw .nm{margin-top:var(--space-2);font:500 13px/20px var(--font-mono)}
.sw .us{font-size:12px;line-height:16px;color:var(--text-3);margin-top:2px}
table.data{width:100%;border-collapse:collapse;font-size:13px;line-height:20px}
table.data th{text-align:left;font-weight:500;font-size:12px;color:var(--text-3);padding:8px 12px;background:var(--surface);border-bottom:1px solid var(--border)}
table.data td{padding:8px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
table.data tbody tr:last-child td{border-bottom:0}
table.data .n{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.tw{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-lg)}
.ok{color:var(--success);font-weight:500}
.pair{display:inline-flex;align-items:center;justify-content:center;width:44px;height:24px;border-radius:var(--radius-sm);font:500 12px/1 var(--font-mono);border:1px solid var(--border)}

/* type */
.fontspec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
.fontspec>div{border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-5);min-width:0}
.fontspec .aa{font-size:64px;line-height:64px;letter-spacing:-0.04em;font-weight:500;margin-bottom:var(--space-4)}
.fontspec .aa.m{font-family:var(--font-mono);letter-spacing:-0.06em;font-weight:400}
.fontspec p{color:var(--text-2);font-size:13px;line-height:20px}
.fontspec .w{display:flex;gap:var(--space-5);margin-top:var(--space-3);font-size:15px}
.scale{display:grid;gap:var(--space-5)}
.scale .grp{display:grid;gap:var(--space-4)}
.scale .grp+.grp{border-top:1px solid var(--border);padding-top:var(--space-5)}
.scale .r{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:var(--space-4);align-items:baseline}
.scale .meta{font:400 12px/16px var(--font-mono);color:var(--text-3)}
.scale .meta b{font-weight:500;color:var(--text-2)}
.scale .s{min-width:0;overflow-wrap:anywhere}

/* space and shape */
.bars{display:grid;gap:var(--space-2)}
.bars .r{display:grid;grid-template-columns:56px 48px minmax(0,1fr);align-items:center;gap:var(--space-3);font:400 12px/16px var(--font-mono);color:var(--text-3)}
.bars .r b{color:var(--text);font-weight:500}
.bars .bar{height:8px;background:var(--text);border-radius:1px}
.shape{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4)}
.shape figure{display:grid;gap:var(--space-2)}
.shape .box{height:72px;border:1px solid var(--border-strong);background:var(--surface)}
.shape figcaption{font-size:12px;line-height:16px;color:var(--text-3)}
.shape figcaption b{display:block;font:500 13px/20px var(--font-mono);color:var(--text)}
.elev{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5)}
.elev .box{height:88px;border-radius:var(--radius-lg);background:var(--bg);border:1px solid var(--border);display:flex;align-items:flex-end;padding:var(--space-3);font-size:12px;color:var(--text-3)}
.elev figure{display:grid;gap:var(--space-2)}
.elev figcaption{font-size:12px;line-height:16px;color:var(--text-3)}
.elev figcaption b{display:block;font:500 13px/20px var(--font-mono);color:var(--text)}

/* motion */
.tracks{display:grid;gap:var(--space-4)}
.track{display:grid;grid-template-columns:120px minmax(0,1fr);gap:var(--space-4);align-items:center;font:400 12px/16px var(--font-mono);color:var(--text-3)}
.track b{display:block;color:var(--text);font-weight:500;font-size:13px;line-height:20px}
.lane{height:28px;border-radius:var(--radius-md);background:var(--surface);border:1px solid var(--border);position:relative;overflow:hidden}
.lane i{position:absolute;left:4px;top:4px;width:18px;height:18px;border-radius:var(--radius-sm);background:var(--text);transform:translateX(0);transition:transform var(--d) var(--ease-out)}
.lane.go i{transform:translateX(var(--run,300px))}
.motion-rules{columns:2;column-gap:var(--space-6)}

/* icons */
.icons{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:0}
.icons figure{display:grid;justify-items:center;gap:var(--space-2);padding:var(--space-4) var(--space-2);font:400 11px/14px var(--font-mono);color:var(--text-3);min-width:0;text-align:center;overflow-wrap:anywhere}
.icons figure svg{color:var(--text);width:20px;height:20px}
.sizes{display:flex;gap:var(--space-6);align-items:flex-end;margin-top:var(--space-5);flex-wrap:wrap}
.sizes figure{display:grid;gap:var(--space-2);justify-items:start;font:400 12px/16px var(--font-mono);color:var(--text-3)}
.sizes svg{color:var(--text)}

/* ===== components ===== */
.btn{--h:var(--control-h);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);height:var(--h);padding:0 12px;border-radius:var(--radius-md);border:1px solid transparent;background:transparent;font-size:14px;line-height:20px;font-weight:500;white-space:nowrap;text-decoration:none;transition:background-color var(--dur-instant) var(--ease-out),border-color var(--dur-instant) var(--ease-out),color var(--dur-instant) var(--ease-out),transform var(--dur-instant) var(--ease-out)}
.btn:hover{text-decoration:none}
.btn:active,.btn.is-active{transform:scale(.98)}
.btn.sm{--h:var(--control-h-sm);padding:0 10px;font-size:13px}
.btn.lg{--h:var(--control-h-lg);padding:0 16px}
.btn.icon{width:var(--h);padding:0}
.btn.primary{background:var(--action);color:var(--on-action)}
.btn.primary:hover,.btn.primary.is-hover{background:var(--action-hover);color:var(--on-action)}
.btn.primary:active,.btn.primary.is-active{background:var(--action-hover)}
.btn.secondary{background:var(--bg);color:var(--text);border-color:var(--border-strong)}
.btn.secondary:hover,.btn.secondary.is-hover{background:var(--surface-2);color:var(--text)}
.btn.secondary:active,.btn.secondary.is-active{background:var(--surface-3)}
.btn.ghost{color:var(--text-2)}
.btn.ghost:hover,.btn.ghost.is-hover{background:var(--surface-2);color:var(--text)}
.btn.ghost:active,.btn.ghost.is-active{background:var(--surface-3);color:var(--text)}
.btn.danger{background:var(--bg);color:var(--danger);border-color:var(--border-strong)}
.btn.danger:hover,.btn.danger.is-hover{background:var(--danger-subtle);border-color:var(--danger)}
.btn.is-focus{outline:2px solid var(--accent);outline-offset:2px}
.btn:disabled,.btn[aria-disabled="true"]{background:var(--surface-2);color:var(--text-3);border-color:var(--border);cursor:not-allowed;transform:none}
.btn .spin{animation:none}
@media (prefers-reduced-motion:no-preference){.btn[aria-busy="true"] .spin{animation:spin 900ms linear infinite}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== forms: field, input, select, textarea, composite fields, check, switch ===== */
.field{display:grid;gap:6px;min-width:0;align-content:start}
.field>label,.field>.lab{font-size:13px;line-height:20px;font-weight:500;color:var(--text)}
.field>label .opt{font-weight:400;color:var(--text-3);margin-left:4px}
.field .help{font-size:13px;line-height:20px;color:var(--text-3)}
.field .err{display:flex;gap:6px;align-items:flex-start;font-size:13px;line-height:20px;color:var(--danger)}
.field .ok{display:flex;gap:6px;align-items:flex-start;font-size:13px;line-height:20px;color:var(--success)}
.field .err svg,.field .ok svg{margin-top:2px}

/* shared surface of every field */
.input,.select select,.fbox{width:100%;min-width:0;height:var(--field-h);border:1px solid var(--field-border);border-radius:var(--field-radius);background:var(--field-bg);box-shadow:var(--shadow-field);color:var(--text);font-size:14px;line-height:20px;outline:0;transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out)}
.input,.select select{padding:0 var(--field-px);appearance:none;-webkit-appearance:none}
.input::placeholder,.fbox input::placeholder{color:var(--text-3);opacity:1}
.input:hover,.select select:hover,.fbox:hover,.input.is-hover,.fbox.is-hover{border-color:var(--field-border-hover)}
.input:focus,.select select:focus,.fbox:focus-within,.input.is-focus,.fbox.is-focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--field-ring)}
.input.sm,.select.sm select,.fbox.sm{height:var(--field-h-sm);font-size:13px}
.input.mono,.fbox .mono{font-family:var(--font-mono);font-size:13px;letter-spacing:0}
.input[type="search"]::-webkit-search-cancel-button,.input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;display:none}

/* states */
.input[aria-invalid="true"],.fbox:has(input[aria-invalid="true"]),.fbox.is-invalid,.select select[aria-invalid="true"]{border-color:var(--danger)}
.input[aria-invalid="true"]:focus,.fbox:has(input[aria-invalid="true"]):focus-within,.fbox.is-invalid:focus-within,.input[aria-invalid="true"].is-focus{border-color:var(--danger);box-shadow:0 0 0 2px color-mix(in srgb,var(--danger) 20%,transparent)}
.input.is-valid,.fbox.is-valid{border-color:color-mix(in srgb,var(--success) 60%,var(--field-border))}
.input.is-valid:focus,.fbox.is-valid:focus-within{border-color:var(--success);box-shadow:0 0 0 2px color-mix(in srgb,var(--success) 20%,transparent)}
.input[readonly],.fbox.is-readonly,.fbox:has(input[readonly]){background:var(--surface);box-shadow:none}
.input[readonly]:hover,.fbox.is-readonly:hover,.fbox:has(input[readonly]):hover{border-color:var(--field-border)}
.input[readonly]:focus,.fbox.is-readonly:focus-within,.fbox:has(input[readonly]):focus-within{border-color:var(--field-border-hover);box-shadow:0 0 0 2px var(--surface-3)}
.input:disabled,.select select:disabled,.fbox.is-disabled,.fbox:has(input:disabled){background:var(--surface);border-color:var(--border);box-shadow:none;color:var(--text-3);cursor:not-allowed;-webkit-text-fill-color:var(--text-3)}
.input:disabled::placeholder{color:var(--text-3)}
.fbox.is-disabled *,.fbox:has(input:disabled) *{cursor:not-allowed}

/* select */
.select{position:relative;min-width:0}
.select select{padding-right:36px;cursor:pointer;text-overflow:ellipsis}
.select>svg{position:absolute;right:12px;top:50%;margin-top:-8px;pointer-events:none;color:var(--text-3);transition:color var(--dur-fast) var(--ease-out)}
.select:hover>svg,.select select:focus+svg{color:var(--text-2)}
.select select:disabled+svg{color:var(--text-3);opacity:.6}
.select.sm>svg{right:10px}
.select.sm select{padding-right:32px}

/* textarea */
.textarea{height:auto;min-height:112px;padding:9px var(--field-px);line-height:22px;resize:vertical;font-size:14px}
.input.textarea.mono{line-height:22px}

/* composite field: lead icon, bare input, trailing action, prefix and suffix, kbd hint */
.fbox{display:flex;align-items:center;gap:0;overflow:hidden;position:relative}
.fbox input,.fbox select{flex:1 1 auto;min-width:0;height:100%;border:0;background:transparent;outline:0;box-shadow:none;padding:0 var(--field-px);color:inherit;font:inherit;appearance:none;-webkit-appearance:none}
.fbox input.mono{font-family:var(--font-mono);font-size:13px}
.fbox input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.fbox>svg.lead{flex:none;margin-left:var(--field-px);margin-right:-4px;color:var(--text-3);pointer-events:none}
.fbox:focus-within>svg.lead{color:var(--text-2)}
.fbox>svg.lead+input{padding-left:8px}
.fbox .trail{flex:none;margin-right:3px}
.fbox .btn.icon.sm{--h:calc(var(--field-h) - 8px);width:var(--h);margin-right:3px}
.fbox.sm .btn.icon.sm{--h:calc(var(--field-h-sm) - 8px)}
.fbox kbd{flex:none;margin-right:var(--space-2);background:var(--surface);border-color:var(--border-strong);pointer-events:none}
.fbox:focus-within kbd.hint,.fbox:has(.btn:not([hidden])) kbd.hint{display:none}
.fbox [hidden]{display:none!important}
.fbox .pre,.fbox .suf{display:flex;align-items:center;align-self:stretch;flex:none;padding:0 var(--field-px);background:var(--field-affix);color:var(--text-2);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%}
.fbox .pre{border-right:1px solid var(--field-border)}
.fbox .suf{border-left:1px solid var(--field-border)}
.fbox .pre+input{padding-left:var(--field-px)}
.fbox .fv{flex:1 1 auto;min-width:0;padding:7px 0 7px var(--field-px);font-size:13px;line-height:20px;overflow-wrap:anywhere}
.fbox.multi{height:auto;min-height:var(--field-h);align-items:flex-start}
.fbox.multi .btn.icon.sm{margin-top:3px}

/* segmented field with an attached button */
.fgroup{display:flex;align-items:stretch;min-width:0}
.fgroup>.input,.fgroup>.fbox{flex:1 1 auto;border-top-right-radius:0;border-bottom-right-radius:0}
.fgroup>.input:focus,.fgroup>.fbox:focus-within{position:relative;z-index:1}
.fgroup>.btn{flex:none;height:var(--field-h);border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}
.fgroup>.btn.primary{border-color:var(--action)}
.inline{display:flex;gap:var(--space-2);align-items:flex-end}
.inline .field{flex:1}

/* checkbox and switch: 20px line, control centered on the first line of text */
.check{display:inline-flex;align-items:flex-start;gap:10px;font-size:14px;line-height:20px;cursor:pointer;position:relative}
.check input{position:absolute;opacity:0;width:16px;height:16px;top:2px;left:0;margin:0;cursor:inherit}
.check .box{width:16px;height:16px;margin-top:2px;border:1px solid var(--border-control);border-radius:var(--radius-sm);background:var(--field-bg);display:grid;place-items:center;color:var(--on-action);transition:background-color var(--dur-instant) var(--ease-out),border-color var(--dur-instant) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);flex:none}
.check .box svg{width:12px;height:12px;opacity:0}
.check .box svg.mix{display:none}
.check .sub{display:block;color:var(--text-3);font-size:13px}
.check:hover .box{border-color:var(--text-3)}
.check input:checked+.box,.check input:indeterminate+.box,.check.is-on .box{background:var(--action);border-color:var(--action)}
.check input:checked+.box svg.on,.check.is-on .box svg.on{opacity:1}
.check input:indeterminate+.box svg.on,.check.is-mixed .box svg.on{display:none}
.check input:indeterminate+.box svg.mix,.check.is-mixed .box svg.mix{display:block;opacity:1}
.check.is-mixed .box{background:var(--action);border-color:var(--action)}
.check input:focus-visible+.box,.check.is-focus .box{outline:0;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent)}
.check input:disabled+.box{background:var(--surface);border-color:var(--border-strong);color:var(--text-3)}
.check input:disabled:checked+.box{background:var(--surface-3);border-color:var(--border-strong)}
.check:has(input:disabled){color:var(--text-3);cursor:not-allowed}
.switch{display:inline-flex;align-items:flex-start;gap:10px;font-size:14px;line-height:20px;cursor:pointer;position:relative}
.switch input{position:absolute;opacity:0;width:32px;height:18px;top:1px;left:0;margin:0;cursor:inherit}
.switch .trk{width:32px;height:18px;margin-top:1px;border-radius:var(--radius-full);background:var(--surface-3);border:1px solid var(--field-border-hover);position:relative;flex:none;transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.switch .trk::after{content:"";position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:var(--text-2);transition:transform var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out)}
.switch:hover .trk{border-color:var(--text-3)}
.switch input:checked+.trk,.switch.is-on .trk{background:var(--action);border-color:var(--action)}
.switch input:checked+.trk::after,.switch.is-on .trk::after{transform:translateX(14px);background:var(--on-action)}
.switch input:focus-visible+.trk{outline:0;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent)}
.switch input:disabled+.trk{opacity:.5}
.switch:has(input:disabled){color:var(--text-3);cursor:not-allowed}
@media (forced-colors:active){.input:focus,.fbox:focus-within,.select select:focus{outline:2px solid Highlight}}

.tabs{display:flex;gap:var(--space-1);border-bottom:1px solid var(--border);min-width:0;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{position:relative;height:36px;padding:0 10px;border:0;background:transparent;color:var(--text-2);font-size:14px;font-weight:400;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;border-radius:var(--radius-md) var(--radius-md) 0 0;transition:color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out)}
.tab:hover,.tab.is-hover{color:var(--text);background:var(--surface)}
.tab[aria-selected="true"]{color:var(--text);font-weight:500}
.tab[aria-selected="true"]::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;background:var(--text)}
.tab:focus-visible{outline-offset:-2px}
.tab .x{width:16px;height:16px;display:grid;place-items:center;border-radius:var(--radius-sm);color:var(--text-3)}
.tab .x:hover{background:var(--surface-3);color:var(--text)}
.tab .cnt{font:400 12px/16px var(--font-mono);color:var(--text-3)}

.badge{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 6px;border-radius:var(--radius-sm);font-size:12px;line-height:16px;font-weight:500;background:var(--surface-2);color:var(--text-2);white-space:nowrap}
.badge svg{width:12px;height:12px}
.badge.accent{background:var(--accent-subtle);color:var(--accent)}
.badge.success{background:var(--success-subtle);color:var(--success)}
.badge.warning{background:var(--warning-subtle);color:var(--warning)}
.badge.danger{background:var(--danger-subtle);color:var(--danger)}

.rows{border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:var(--bg)}
.row{display:grid;gap:2px;padding:10px 16px;border-top:1px solid var(--border);cursor:pointer;color:var(--text-2);transition:background-color var(--dur-instant) var(--ease-out);position:relative;min-width:0}
.row:first-child{border-top:0}
.row:hover,.row.is-hover{background:var(--surface)}
.row[aria-selected="true"],.row.is-selected{background:var(--surface-2);box-shadow:inset 2px 0 0 var(--accent)}
.row .l1{display:flex;gap:var(--space-2);justify-content:space-between;align-items:baseline;min-width:0}
.row .who{font-size:14px;line-height:20px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .when{font:400 12px/16px var(--font-mono);color:var(--text-3);font-variant-numeric:tabular-nums;flex:none}
.row .subj{font-size:14px;line-height:20px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .prev{font-size:13px;line-height:20px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row.unread .who,.row.unread .subj{color:var(--text);font-weight:500}
.row.simple{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--space-3);padding:8px 12px;color:var(--text)}

.tbl{width:100%;border-collapse:collapse;font-size:14px;line-height:20px}
.tbl th{text-align:left;font-weight:500;font-size:12px;line-height:16px;color:var(--text-3);padding:8px 16px;background:var(--surface);border-bottom:1px solid var(--border)}
.tbl td{padding:10px 16px;border-bottom:1px solid var(--border)}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td{background:var(--surface)}
.tbl .num{font-family:var(--font-mono);font-size:13px;font-variant-numeric:tabular-nums;color:var(--text-2)}
.tbl .r{text-align:right}

.tip{position:relative;display:inline-flex}
.tip>.tipbox,.tipbox{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translate(-50%,2px);display:inline-flex;gap:8px;align-items:center;white-space:nowrap;padding:4px 8px;border-radius:var(--radius-sm);background:var(--action);color:var(--on-action);font-size:12px;line-height:16px;font-weight:500;box-shadow:var(--shadow-float);opacity:0;pointer-events:none;transition:opacity var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);z-index:var(--z-tooltip)}
.tip:hover>.tipbox,.tip:focus-within>.tipbox,.tipbox.show{opacity:1;transform:translate(-50%,0)}
.tipbox kbd{background:transparent;border-color:color-mix(in srgb,var(--on-action) 35%,transparent);color:var(--on-action);height:16px;min-width:16px;font-size:11px}
.tipbox.static{position:relative;left:auto;bottom:auto;transform:none;opacity:1}
.stage{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg)}

.dialog{width:100%;max-width:400px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-modal);padding:var(--space-5);color:var(--text)}
.dialog h4{font-size:16px;line-height:24px;font-weight:500;letter-spacing:-0.01em;margin:0}
.dialog p{font-size:14px;line-height:20px;color:var(--text-2);margin-top:var(--space-1)}
.dialog .body{margin-top:var(--space-4)}
.dialog .foot{display:flex;justify-content:flex-end;gap:var(--space-2);margin-top:var(--space-5)}
dialog.dialog{padding:var(--space-5);margin:auto}
dialog.dialog::backdrop{background:var(--overlay)}
dialog.dialog[open]{animation:none}
@media (prefers-reduced-motion:no-preference){dialog.dialog[open]{animation:dlg var(--dur-base) var(--ease-out)}dialog.dialog[open]::backdrop{animation:fade var(--dur-base) var(--ease-out)}}
@keyframes dlg{from{opacity:0;transform:translateY(4px)}}
@keyframes fade{from{opacity:0}}
.scrim{background:var(--overlay);border-radius:var(--radius-lg);padding:var(--space-7) var(--space-5);display:grid;place-items:center}

.toast{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--space-3);align-items:start;width:100%;max-width:360px;padding:12px 12px 12px 16px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-float);font-size:14px;line-height:20px}
.toast svg.i{margin-top:2px}
.toast.success svg.i{color:var(--success)}.toast.error svg.i{color:var(--danger)}
.toast .t{font-weight:500}.toast .d{color:var(--text-2);font-size:13px}
.toast-host{position:fixed;right:var(--space-5);bottom:var(--space-5);display:grid;gap:var(--space-2);z-index:var(--z-toast);justify-items:end;pointer-events:none;max-width:calc(100vw - 32px)}
.toast-host .toast{pointer-events:auto}
@media (prefers-reduced-motion:no-preference){.toast-host .toast{animation:tin var(--dur-base) var(--ease-out)}}
@keyframes tin{from{opacity:0;transform:translateY(6px)}}

.palette{width:100%;max-width:560px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-modal);overflow:hidden;color:var(--text)}
.palette .q{display:flex;align-items:center;gap:var(--space-3);padding:0 16px;height:48px;border-bottom:1px solid var(--border);color:var(--text-3)}
.palette .q input{flex:1;border:0;outline:0;background:transparent;font-size:15px;min-width:0;color:var(--text)}
.palette .q input::placeholder{color:var(--text-3);opacity:1}
.palette .list{padding:var(--space-2);max-height:320px;overflow:auto}
.palette .gl{padding:8px 8px 4px;font-size:12px;line-height:16px;color:var(--text-3);font-weight:500}
.palette .it{display:flex;align-items:center;gap:var(--space-3);height:36px;padding:0 8px;border-radius:var(--radius-md);font-size:14px;color:var(--text);cursor:pointer}
.palette .it svg{color:var(--text-2)}
.palette .it .sp{flex:1}
.palette .it kbd{background:transparent}
.palette .it[aria-selected="true"],.palette .it.is-hover{background:var(--surface-2)}
.palette .foot{display:flex;gap:var(--space-4);padding:8px 16px;border-top:1px solid var(--border);font-size:12px;color:var(--text-3);background:var(--surface)}
.palette .foot span{display:inline-flex;gap:6px;align-items:center}
.palette .none{padding:var(--space-5);text-align:center;color:var(--text-3);font-size:14px}
dialog.pal{padding:0;border:0;background:transparent;margin:12vh auto 0;max-width:calc(100vw - 32px);overflow:visible}
dialog.pal::backdrop{background:var(--overlay)}

.empty{display:grid;justify-items:center;text-align:center;gap:var(--space-2);padding:var(--space-7) var(--space-5)}
.empty .ic{width:40px;height:40px;border:1px solid var(--border-strong);border-radius:var(--radius-lg);display:grid;place-items:center;color:var(--text-2);margin-bottom:var(--space-2)}
.empty h4{font-size:16px;line-height:24px;font-weight:500;margin:0;letter-spacing:-0.01em}
.empty p{color:var(--text-2);font-size:14px;line-height:20px;max-width:37ch}
.empty .btn{margin-top:var(--space-3)}
.skel{display:grid;gap:var(--space-3)}
.skel i{display:block;height:12px;border-radius:var(--radius-sm);background:var(--surface-3)}
@media (prefers-reduced-motion:no-preference){.skel i{animation:pulse 1.6s var(--ease-in-out) infinite}}
@keyframes pulse{50%{opacity:.45}}

.nav{display:grid;gap:2px}
.nav .gl{padding:12px 8px 4px;font-size:12px;line-height:16px;color:var(--text-3);font-weight:500}
.nav a,.nav button.ni{display:flex;align-items:center;gap:var(--space-2);height:32px;padding:0 8px;border-radius:var(--radius-md);color:var(--text-2);font-size:14px;line-height:20px;border:0;background:transparent;width:100%;text-align:left;text-decoration:none;transition:background-color var(--dur-instant) var(--ease-out),color var(--dur-instant) var(--ease-out);min-width:0}
.nav a>span:not(.cnt),.nav button.ni>span:not(.cnt){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.nav a:hover,.nav a.is-hover,.nav button.ni:hover{background:var(--surface-2);color:var(--text);text-decoration:none}
.nav a[aria-current="page"],.nav a.is-active{background:var(--surface-2);color:var(--text);font-weight:500}
.nav .cnt{margin-left:auto;font:400 12px/16px var(--font-mono);color:var(--text-3);font-variant-numeric:tabular-nums}
.nav a[aria-current="page"] .cnt{color:var(--text-2)}
.nav a.is-focus{outline:2px solid var(--accent);outline-offset:-2px}

/* ===== example screens ===== */
.frame{container-type:inline-size;margin-top:var(--space-4)}
.app{display:grid;height:680px;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:var(--bg);color:var(--text);min-width:0}
.app>*{min-width:0;min-height:0}
.app .side{background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:var(--space-3);gap:var(--space-3);overflow:hidden}
.app .side .brand{padding:6px 8px 2px;--wm-size:18px}
.app .side .grow{flex:1;min-height:0;overflow:hidden}
.app .side .foot{margin-top:auto}
.app .nav a:hover,.app .nav a.is-hover,.app .nav button.ni:hover{background:var(--surface-3)}
.app .nav a[aria-current="page"],.app .nav a.is-active{background:var(--surface-3)}
.mail{grid-template-columns:216px minmax(0,1fr)}
.mail .main{display:grid;grid-template-rows:auto minmax(0,1fr);background:var(--bg)}
.strip{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--space-4);align-items:center;padding:10px 16px;border-bottom:1px solid var(--border);background:var(--bg)}
.strip .tx b{display:block;font-size:14px;line-height:20px;font-weight:500}
.strip .tx span{display:block;font-size:13px;line-height:20px;color:var(--text-3)}
.strip form{display:flex;gap:var(--space-2);justify-content:flex-end;min-width:0}
.strip .input,.strip .fgroup{max-width:300px}
.mailbody{display:grid;grid-template-columns:320px minmax(0,1fr);min-height:0}
.mlist{border-right:1px solid var(--border);display:flex;flex-direction:column;min-height:0}
.mlist .hd{display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 8px;border-bottom:1px solid var(--border);height:37px}
.mlist .hd .tabs{border:0;height:36px}
.mlist .hd .tab[aria-selected="true"]::after{bottom:0}
.mlist .rl{overflow:hidden;flex:1;min-height:0}
.mlist .row{padding:10px 16px}
.pane{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.pane .tb{display:flex;align-items:center;gap:2px;height:37px;padding:0 8px;border-bottom:1px solid var(--border)}
.pane .tb .sp{flex:1}
.pane .msg{padding:var(--space-5) var(--space-6);overflow:hidden;flex:1;min-height:0}
.pane h3.subject{margin:0 0 var(--space-4);font-size:20px;line-height:28px;letter-spacing:-0.015em;font-weight:500}
.who2{display:flex;gap:var(--space-3);align-items:center;margin-bottom:var(--space-5)}
.av{width:32px;height:32px;border:1px solid var(--border-strong);border-radius:var(--radius-md);display:grid;place-items:center;font-size:12px;font-weight:500;color:var(--text-2);background:var(--surface);flex:none}
.who2 b{display:block;font-weight:500;font-size:14px;line-height:20px}
.who2 span{display:block;font-size:13px;line-height:20px;color:var(--text-3)}
.who2 .when{margin-left:auto;font:400 12px/16px var(--font-mono);color:var(--text-3);align-self:flex-start}
.prose{font-size:15px;line-height:24px;color:var(--text);max-width:68ch}
.prose p+p{margin-top:var(--space-3)}
.reply{margin:0 var(--space-6) var(--space-5);border:1px solid var(--field-border);background:var(--field-bg);box-shadow:var(--shadow-field);border-radius:var(--radius-md);display:flex;align-items:center;gap:var(--space-2);padding:3px 3px 3px 12px;color:var(--text-3);font-size:14px}
.reply span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.notes{grid-template-columns:248px minmax(0,1fr)}
.tree{font-size:13px;line-height:20px}
.tree .it{display:flex;align-items:center;gap:6px;height:28px;padding:0 8px;border-radius:var(--radius-md);color:var(--text-2);white-space:nowrap;cursor:pointer;min-width:0}
.tree .it span{overflow:hidden;text-overflow:ellipsis}
.tree .it:hover{background:var(--surface-3);color:var(--text)}
.tree .it.sel{background:var(--surface-3);color:var(--text);font-weight:500}
.tree .it .car{color:var(--text-3)}
.tree .d1{padding-left:20px}.tree .d2{padding-left:36px}.tree .d3{padding-left:52px}
.tree .it svg.i{color:var(--text-3)}.tree .it.sel svg.i{color:var(--text-2)}
.edit{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;background:var(--bg)}
.edit .tabs{background:var(--surface);padding:0 var(--space-2);height:37px;align-items:flex-end}
.edit .tab{height:36px;font-size:13px;font-family:var(--font-sans)}
.edit .tab[aria-selected="true"]{background:var(--bg);border:1px solid var(--border);border-bottom-color:var(--bg);border-radius:var(--radius-md) var(--radius-md) 0 0;margin-bottom:-1px;height:37px;align-self:flex-end}
.edit .tab[aria-selected="true"]::after{display:none}
.crumbs{display:flex;align-items:center;gap:6px;height:36px;padding:0 var(--space-4);border-bottom:1px solid var(--border);font-size:13px;color:var(--text-3)}
.crumbs b{color:var(--text);font-weight:500}.crumbs .sp{flex:1}
.code-pane{font:400 13px/22px var(--font-mono);display:grid;grid-template-columns:52px minmax(0,1fr);overflow:hidden;min-height:0;tab-size:2}
.gut{background:var(--bg);color:var(--text-3);text-align:right;padding:var(--space-3) 12px var(--space-3) 0;user-select:none;font-variant-numeric:tabular-nums;border-right:1px solid var(--border)}
.gut div,.ln{height:22px}
.gut div.cur{color:var(--text);font-weight:500}
.src{padding:var(--space-3) 0;overflow:hidden;min-width:0}
.ln{padding:0 var(--space-4);white-space:pre;color:var(--text);position:relative}
.ln.fm{background:var(--surface)}
.ln.cur{background:var(--accent-subtle)}
.ln .k{color:var(--accent)}
.ln .p{color:var(--text-3)}
.ln .h{font-weight:500}
.ln .s{color:var(--text)}
.ln .v{color:var(--text-2)}
.ln .lk{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.ln .ic{background:var(--surface-2);border-radius:3px;padding:0 3px}
.ln .caret{display:inline-block;width:1.5px;height:16px;background:var(--accent);vertical-align:-3px;margin-left:-1px}
.stat{display:flex;gap:var(--space-4);align-items:center;height:28px;padding:0 var(--space-4);border-top:1px solid var(--border);background:var(--surface);font:400 12px/16px var(--font-mono);color:var(--text-3)}
.stat .sp{flex:1}

.solo-link{display:inline-flex;margin-top:var(--space-3);font-size:13px}
body.solo{overflow:hidden}
body.solo>:not(.frame):not(svg):not(script){display:none!important}
body.solo .frame{position:fixed;inset:0;margin:0;z-index:1}
body.solo .app{height:100dvh;border:0;border-radius:0}

@container (max-width:900px){
  .mailbody{grid-template-columns:280px minmax(0,1fr)}
  .strip .tx span{display:none}
}
@container (max-width:759px){
  .mail,.notes{grid-template-columns:minmax(0,1fr)}
  .app .side{display:none}
  .mailbody{grid-template-columns:minmax(0,1fr)}
  .pane{display:none}
  .mlist{border-right:0}
  .strip{grid-template-columns:minmax(0,1fr)}
  .strip .tx{display:none}
  .strip form{justify-content:stretch}.strip .input,.strip .fgroup{max-width:none}
  .code-pane{grid-template-columns:40px minmax(0,1fr)}
}

/* responsive */
@media (max-width:1100px){
  main{padding:0 var(--space-5) var(--space-9)}
  .hero{grid-template-columns:minmax(0,1fr)}
  .hero h1{max-width:17.6ch}
}
@media (max-width:860px){
  .doc{grid-template-columns:minmax(0,1fr)}
  .toc{position:sticky;top:56px;height:auto;display:flex;gap:2px;overflow-x:auto;padding:6px var(--space-3);border-right:0;border-bottom:1px solid var(--border);background:var(--bg);z-index:var(--z-sticky);scrollbar-width:none}
  .toc::-webkit-scrollbar{display:none}
  .toc a{white-space:nowrap}
  .toc .grp{display:none}
  html{scroll-padding-top:112px}
  .sec{padding-top:var(--space-8)}
  .wmstage,.fontspec,.cols2,.dd{grid-template-columns:minmax(0,1fr)}
  .wmbig{--wm-size:56px;min-height:160px}
  .shape{grid-template-columns:repeat(2,minmax(0,1fr))}
  .elev{grid-template-columns:minmax(0,1fr)}
  .motion-rules{columns:1}
  dl.defs{grid-template-columns:minmax(0,1fr)}
  dl.defs dt{border-top:1px solid var(--border);padding-bottom:var(--space-1)}
  dl.defs dd{border-top:0;padding-top:0}
  dl.defs dt:first-of-type{border-top:0}
  .scale .r{grid-template-columns:minmax(0,1fr)}
  .scale .r .meta{order:-1}
  .track{grid-template-columns:minmax(0,1fr)}
  .top{padding:0 var(--space-4)}
  .top .hide-sm{display:none}
}
@media (max-width:520px){
  .hero{padding-top:var(--space-6)}
  .demo{padding:var(--space-4)}
  .hero .stage{padding:var(--space-4)}
  .wmbig{--wm-size:44px;padding:var(--space-5)}
  .inline{flex-direction:column;align-items:stretch}
  .sw-grid{grid-template-columns:minmax(0,1fr)}
  .states{grid-template-columns:repeat(2,minmax(0,1fr))}
  .states.fstates{grid-template-columns:minmax(0,1fr)}
}
@media print{.top,.toc{display:none}}

/* theme toggle label swap */
.tt .dk{display:none}[data-theme="dark"] .tt .dk{display:inline}[data-theme="dark"] .tt .lt{display:none}
.tt .moon{display:block}.tt .sun{display:none}[data-theme="dark"] .tt .moon{display:none}[data-theme="dark"] .tt .sun{display:block}
.fam{display:grid;gap:0}
.fam .p{display:grid;gap:var(--space-2);padding:var(--space-4) 0;border-top:1px solid var(--border);--wm-size:26px}
.fam .p:first-child{border-top:0;padding-top:0}.fam .p:last-child{padding-bottom:0}
.fam .p span{font-size:14px;line-height:20px;color:var(--text-2)}

/* fixes after review */
.mlist .rl{overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}
.app .src{overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.app .src::-webkit-scrollbar{display:none}
.palette .foot{flex-wrap:wrap;gap:4px 16px}

/* floating panel (prototype switcher) */
.fbtn{gap:6px;background:var(--bg);box-shadow:var(--shadow-float);max-width:100%}
.fbtn .k{color:var(--text-3);font-weight:400}
.fbtn b{font-weight:500}
.fbtn svg:first-child{color:var(--accent)}
.fpanel{width:min(344px,calc(100vw - 24px));background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-float);max-height:calc(100dvh - 88px);overflow:auto;display:flex;flex-direction:column}
.fpanel[hidden]{display:none}
.fpanel .hd{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:8px 8px 8px 14px;border-bottom:1px solid var(--border)}
.fpanel .hd .cap{color:var(--text-2)}
.fpanel .bd{display:grid;padding:6px}
.fopt{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--space-3);align-items:start;padding:10px;border-radius:var(--radius-md);cursor:pointer;position:relative;border:1px solid transparent}
.fopt:hover{background:var(--surface-2)}
.fopt input{position:absolute;opacity:0;width:100%;height:100%;inset:0;margin:0;cursor:pointer}
.fopt .fi{width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--border-strong);border-radius:var(--radius-md);color:var(--text-2);background:var(--surface)}
.fopt .ftx{min-width:0}
.fopt b{display:block;font-weight:500;font-size:14px;line-height:20px}
.fopt .ds{display:block;font-size:12.5px;line-height:18px;color:var(--text-3)}
.fopt .ck{color:var(--accent);opacity:0;margin-top:6px}
.fopt:has(input:checked){background:var(--surface-2);border-color:var(--border)}
.fopt:has(input:checked) .ck{opacity:1}
.fopt:has(input:checked) .fi{color:var(--accent);border-color:var(--accent)}
.fopt:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:-2px}
.fpanel .ft{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2);padding:10px 14px;border-top:1px solid var(--border)}
.fpanel .ft .cap{color:var(--text-3)}

/* disclosure with a technical payload */
.tech{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg)}
.tech>summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:10px 14px;cursor:pointer;list-style:none;font-weight:500;font-size:14px;border-radius:var(--radius-lg)}
.tech>summary::-webkit-details-marker{display:none}
.tech>summary svg{color:var(--text-2);transition:transform var(--dur-fast) var(--ease-out)}
.tech[open]>summary svg{transform:rotate(180deg)}
.tech[open]>summary{border-bottom:1px solid var(--border);border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.tech-b{padding:var(--space-3) var(--space-3) var(--space-3);display:grid;gap:var(--space-3)}
.tech-b .dnstbl{border-radius:var(--radius-md)}
.tech-b .cap{color:var(--text-3)}
@media (prefers-reduced-motion:reduce){.tech>summary svg{transition:none}}


.fp-demo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5);align-items:end}
.fp-stage{display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-2);min-width:0}
@media (max-width:760px){.fp-demo{grid-template-columns:minmax(0,1fr)}.fp-stage{align-items:stretch}}
.fp-stage .fpanel{width:100%;max-width:344px}