*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--l1)transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%}body{min-height:100vh;background:var(--bg1);color:var(--fg1);line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}body.grid,.site.grid{background-image:var(--grid);background-size:var(--grid-size);background-position:0 -1px}button,input,textarea,select{font:inherit;color:inherit;letter-spacing:inherit;background:0 0;border:0;padding:0;outline:none}button{cursor:pointer}textarea{resize:vertical}img,svg,video,canvas,picture{display:block;max-width:100%;height:auto}a{color:inherit;text-decoration:none}ul,ol,li{list-style:none}table{border-collapse:collapse;border-spacing:0}:focus{outline:none}:focus-visible{outline:none;box-shadow:var(--ring1)}input:focus-visible,textarea:focus-visible,select:focus-visible{box-shadow:none}::selection{background:var(--a3);color:var(--fg1)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--l1);border-radius:var(--r1);&:hover{background:var(--l3)}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}:root,button,input,textarea,select{font-family:avenir next,Avenir,Inter,system-ui,-apple-system,segoe ui,sans-serif;font-size:14px;font-weight:500;letter-spacing:0}:root{--p1:#ffb648;--p2:#ff9c1b;--p3:#f08d0a;--p4:#d87e00;--p5:#17100a;--g1:#f5efe2;--g2:#ddd3c0;--g3:#9d9888;--g4:#6f6a5e;--g5:#1a1c1e;--g6:#101214;--g7:#080a0b;--g8:#050607;--s1:#58d747;--w1:#ffb020;--e1:#ff453a;--i1:#3da8ff;--o1:.03;--o2:.06;--o3:.12;--o4:.24;--o5:.45;--o6:.72;--bg1:var(--g7);--bg2:var(--g8);--fg1:var(--g1);--fg2:var(--g2);--fg3:var(--g3);--fg4:var(--g4);--sf1:var(--g6);--sf2:#101214e6;--sf3:var(--g5);--sf4:var(--g8);--l1:#282422;--l2:#1c1a18;--l3:#ff9c1b66;--hl:inset 0 0 0 1px #ffffff08;--a1:var(--p2);--a2:var(--p3);--a3:#ff9c1b1f;--a4:#ff9c1b0f;--e2:#ff453a66;--e3:#ff453a14;--s2:#58d74766;--s3:#58d74714;--w2:#ffb02066;--w3:#ffb02014;--i2:#3da8ff66;--i3:#3da8ff14;--gl1:0 0 5px #ff9c1bcc;--gl2:0 0 24px #ff9c1b59, 0 0 96px #ff780026;--gle:0 0 5px #ff453a99;--gls:0 0 5px #58d74799;--sh1:0 16px 48px #00000059;--sh2:0 8px 24px #00000040;--grid:linear-gradient(#17120a 1px, transparent 1px),
            linear-gradient(90deg, #17120a 1px, transparent 1px);--grid-size:42px 42px;--r1:4px;--r2:5px;--r3:7px;--r4:10px;--r5:14px;--r6:20px;--r7:44px;--pill:999px;--mono:"SFMono-Regular", "Cascadia Code", "Roboto Mono", Consolas, monospace;--t1:11px;--t2:12px;--t3:14px;--t4:16px;--t5:20px;--t6:28px;--t7:40px;--t8:60px;--th:clamp(56px, 6vw, 92px);--dur1:80ms;--dur2:120ms;--dur3:160ms;--dur4:240ms;--ease1:cubic-bezier(.2, .7, .2, 1);--ring1:var(--gl1)}[layout]{display:flex;flex-direction:row;flex-wrap:nowrap;&[layout~=row]{flex-direction:row}&[layout~=col]{flex-direction:column}&[layout~=row-reverse]{flex-direction:row-reverse}&[layout~=col-reverse]{flex-direction:column-reverse}&[layout~=wrap]{flex-wrap:wrap}&[layout~=nowrap]{flex-wrap:nowrap}&[layout~=start]{justify-content:flex-start}&[layout~=center]{justify-content:center}&[layout~=end]{justify-content:flex-end}&[layout~=between]{justify-content:space-between}&[layout~=around]{justify-content:space-around}&[layout~=evenly]{justify-content:space-evenly}&[layout~=top]{align-items:flex-start}&[layout~=middle]{align-items:center}&[layout~=bottom]{align-items:flex-end}&[layout~=stretch]{align-items:stretch}&[layout~=baseline]{align-items:baseline}&[layout~=divide] > * + *{border-left:1px solid var(--l1);padding-left:16px}&[layout~=divide][layout~=col] > * + *, &[layout~=divide][layout~=col-reverse] > * + *{border-left:0;padding-left:0;border-top:1px solid var(--l1);padding-top:16px}}[grid]{display:grid;&[cols="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}&[cols="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}&[cols="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}&[cols="5"]{grid-template-columns:repeat(5,minmax(0,1fr))}&[cols="6"]{grid-template-columns:repeat(6,minmax(0,1fr))}&[cols="12"]{grid-template-columns:repeat(12,minmax(0,1fr))}&[cols=auto]{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}&[cols=aside]{grid-template-columns:minmax(0,1fr)minmax(0,2fr)}&[fit]{align-items:start}}@media(max-width:960px){[grid][cols="4"],[grid][cols="5"],[grid][cols="6"]{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){[grid][cols]{grid-template-columns:minmax(0,1fr)}}[gap]{gap:8px}[gap="1"]{gap:4px}[gap="2"]{gap:12px}[gap="3"]{gap:16px}[gap="4"]{gap:24px}[gap="5"]{gap:32px}[gap="6"]{gap:48px}[gap="7"]{gap:64px}[gap="8"]{gap:96px}[pad]{padding:16px}[pad="1"]{padding:8px}[pad="2"]{padding:24px}[pad="3"]{padding:32px}[pad="4"]{padding:48px}[pad-x]{padding-inline:16px}[pad-x="1"]{padding-inline:8px}[pad-x="2"]{padding-inline:24px}[pad-x="3"]{padding-inline:32px}[pad-x="4"]{padding-inline:48px}[pad-y]{padding-block:16px}[pad-y="1"]{padding-block:8px}[pad-y="2"]{padding-block:24px}[pad-y="3"]{padding-block:32px}[pad-y="4"]{padding-block:48px}[flex]{flex:1;min-width:0}[flex="0"]{flex:none}[flex="2"]{flex:2;min-width:0}[flex="3"]{flex:3;min-width:0}[flex=auto]{flex:auto;min-width:0}[flex=none]{flex:none}[hide=""]{display:none!important}@media(max-width:640px){[hide~=sm]{display:none!important}[show~=md],[show~=lg]{display:none!important}}@media(min-width:641px) and (max-width:960px){[hide~=md]{display:none!important}[show~=sm],[show~=lg]{display:none!important}}@media(min-width:961px){[hide~=lg]{display:none!important}[show~=sm],[show~=md]{display:none!important}}.container{width:100%;max-width:1280px;margin:0 auto;padding:0 24px;&[size=lg]{max-width:1360px}&[size=sm]{max-width:960px}}@media(max-width:640px){.container{padding:0 16px}}.split{display:grid;grid-template-columns:minmax(0,1fr)minmax(0,1fr);gap:64px;@media(max-width:800px){grid-template-columns: 1fr;}}[fx~=glow]{box-shadow:var(--gl1)}[fx~=hot]{box-shadow:var(--gl2)}[fx~=glow-hover]{transition:box-shadow var(--dur3)var(--ease1);&:hover{box-shadow:var(--gl1)}}[fx~=grid]{background-image:var(--grid);background-size:var(--grid-size);background-position:0 -1px;background-attachment:fixed}[fx~=grid-soft]{background-image:var(--grid);background-size:var(--grid-size);background-position:0 -1px}[fx~=fade]{-webkit-mask-image:radial-gradient(ellipse 110% 100% at 50% 0%,#000 35%,transparent 78%);mask-image:radial-gradient(ellipse 110% 100% at 50% 0%,#000 35%,transparent 78%)}[fx~=beam]{background-image:linear-gradient( 115deg,transparent 30%,var(--a3) 50%,transparent 70% )}[fx~=glass]{background:var(--sf1);border:1px solid var(--l1);box-shadow:var(--hl)}[fx~=glass-soft]{background:var(--sf3);border:1px solid var(--l1);box-shadow:var(--hl)}[fx~=noise]{position:relative;&::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.03;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");background-size:160px 160px}}[fx~=ring-amber]{box-shadow:inset 0 0 0 1px var(--l3)}[fx~=hot-line]{box-shadow:inset 0 1px 0 var(--l3),var(--gl1)}h1,h2,h3,h4,h5,h6{scroll-margin-top:80px}[ui~=display]{font-size:var(--th);font-weight:600;letter-spacing:-.04em;line-height:1.02;color:var(--fg1);margin:0}h1{font-size:var(--t7);font-weight:600;letter-spacing:-1px;line-height:1.1;color:var(--fg1);margin:32px 0 24px}h2{font-size:var(--t6);font-weight:600;letter-spacing:-.5px;line-height:1.2;color:var(--fg1);margin:48px 0 16px;padding-bottom:8px;border-bottom:1px solid var(--l2)}h3{font-size:var(--t5);font-weight:600;letter-spacing:-.5px;line-height:1.3;color:var(--fg1);margin:32px 0 12px}h4{font-size:var(--t4);font-weight:700;color:var(--a1);font-family:var(--mono);letter-spacing:.04em;margin:24px 0 8px}h5{font-size:var(--t3);font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--fg3);font-family:var(--mono);margin:20px 0 8px}h6{font-size:var(--t2);font-weight:600;color:var(--fg3);margin:16px 0 6px}h2[id],h3[id]{&::before{content:"#";color:var(--fg4);margin-right:8px;opacity:0;transition:opacity var(--dur3)}&:hover::before{opacity:1}}[ui~=eyebrow]{font-family:var(--mono);font-size:var(--t1);font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--a1);line-height:1;margin-bottom:12px;&[tone=muted]{color:var(--fg3)}&[ui~=rule]{display:flex;align-items:center;&::after{content:"";flex:1;height:1px;background:var(--l1);margin-left:12px}}}[ui~=lede]{font-size:var(--t4);line-height:1.6;color:var(--fg2);max-width:720px;margin:0 0 24px}[ui~=prose]{& > p{font-size:var(--t3);line-height:1.7;color:var(--fg2);margin:16px 0}& > ul, & > ol{padding-left:24px;margin:16px 0}& > ul{list-style:disc}& > ol{list-style:decimal}& > ul > li, & > ol > li{margin:6px 0;color:var(--fg2)}& > ul > li::marker{color:var(--a1)}& > ol > li::marker{color:var(--fg3);font-family:var(--mono)}& > blockquote{border-left:2px solid var(--a1);padding:8px 0 8px 20px;margin:24px 0;color:var(--fg2);font-style:italic}& > hr{border:0;border-top:1px solid var(--l1);margin:32px 0}& a{color:var(--a1);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;&:hover{text-decoration-color:var(--p1)}}}strong{color:var(--fg1);font-weight:700}em{color:var(--a1);font-style:normal;&[plain]{color:inherit;font-style:italic}}mark{background:var(--a3);color:var(--a1);padding:0 4px;border-radius:var(--r1)}kbd{display:inline-block;font-family:var(--mono);font-size:var(--t1);padding:2px 6px;border:1px solid var(--l1);border-bottom-width:2px;border-radius:var(--r1);background:var(--sf3);color:var(--fg2);line-height:1}@keyframes a-btn-spin{to{transform:rotate(360deg)}}a-button{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;gap:8px;height:34px;padding:0 16px;border:1px solid var(--l1);border-radius:var(--r3);background:var(--sf1);color:var(--fg1);box-shadow:var(--hl);font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;user-select:none;transition:background var(--dur2)var(--ease1),border-color var(--dur2)var(--ease1),color var(--dur2)var(--ease1),box-shadow var(--dur2)var(--ease1);&[size=lg]{height:40px;padding:0 20px;font-size:var(--t3)}&[size=sm]{height:28px;padding:0 12px;font-size:var(--t2)}&[size=xs]{height:24px;padding:0 8px;gap:4px;border-radius:var(--r2);font-size:var(--t1)}&[block]{display:flex;width:100%}&[variant=tertiary]{height:28px;padding:0 8px;border-radius:var(--r2)}&[variant=primary]{font-weight:700}&[variant=primary][aria-pressed=true]{background:var(--p4);border-color:var(--p4);color:var(--p5)}&[aria-busy=true]{cursor:progress} [part="label"] { overflow: hidden; text-overflow: ellipsis; } [part="spinner"] { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: var(--pill); opacity: .7; animation: a-btn-spin .6s linear infinite; } &[size="xs"] [part="spinner"] { width: 12px; height: 12px; }}a-button,icon-button{&[variant=primary]{background:var(--p2);border-color:var(--p2);color:var(--p5);&:hover, &[state=hover]{background:var(--p3);border-color:var(--p3);box-shadow:var(--gl1)}&:active, &[state=active]{background:var(--p4);border-color:var(--p4);box-shadow:none}}&[variant=secondary]{&:hover, &[state=hover]{border-color:var(--l3);background:var(--sf3)}&:active, &[state=active]{border-color:var(--l3);background:var(--sf1);box-shadow:var(--gl1)}}&[variant=tertiary]{border-color:transparent;background:0 0;box-shadow:none;color:var(--a1);&:hover, &[state=hover]{background:var(--sf3);color:var(--p1)}&:active, &[state=active]{border-color:var(--l3);background:var(--sf1);color:var(--a1);box-shadow:var(--gl1)}}&[variant=ghost]{background:0 0;border-color:transparent;box-shadow:none;color:var(--fg2);&:hover, &[state=hover]{background:var(--sf3);color:var(--fg1)}&:active, &[state=active]{border-color:var(--l3);background:var(--sf1);color:var(--fg1);box-shadow:var(--gl1)}}&[variant=destructive]{background:var(--e3);border-color:var(--e2);color:var(--e1);&:hover, &[state=hover]{border-color:var(--e1)}&:active, &[state=active]{border-color:var(--e1);box-shadow:var(--gle)}&:focus-visible{border-color:var(--e1);box-shadow:var(--gle)}}&[variant=success]{background:var(--s3);border-color:var(--s2);color:var(--s1);&:hover, &[state=hover]{border-color:var(--s1)}&:active, &[state=active]{border-color:var(--s1);box-shadow:var(--gls)}&:focus-visible{border-color:var(--s1);box-shadow:var(--gls)}}&[aria-pressed=true]{border-color:var(--l3);color:var(--a1);box-shadow:var(--gl1)}&[join=l]{border-top-right-radius:0;border-bottom-right-radius:0}&[join=m]{border-radius:0;margin-left:-1px}&[join=r]{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}&[join]:hover, &[join]:focus-visible{position:relative;z-index:1}&:focus-visible{border-color:var(--l3)}&[aria-disabled=true]{opacity:.4;cursor:not-allowed;pointer-events:none;box-shadow:var(--hl)}}button-group{display:inline-flex;align-self:flex-start;vertical-align:middle;max-width:100%;padding:4px;border:1px solid var(--l1);border-radius:var(--r4);background:var(--sf2);box-shadow:var(--hl);overflow-x:auto;scrollbar-width:none;&::-webkit-scrollbar{display:none}button{flex:none;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:26px;padding:0 12px;border-radius:var(--r2);color:var(--fg2);line-height:1;white-space:nowrap;transition:background var(--dur2)var(--ease1),color var(--dur2)var(--ease1)}button + button::before{content:"";position:absolute;inset:0 auto 0 -1px;width:1px;background:var(--l1)}button[active]::before, button[active] + button::before{content:none}button:hover:not([active]){color:var(--fg1)}button[active]{background:var(--p2);color:var(--p5)}button:focus-visible{color:var(--fg1)}button:disabled{opacity:.4;cursor:not-allowed}&[variant=joined]{padding:0;border:0;border-radius:0;background:0 0;box-shadow:none;button{height:34px;border:1px solid var(--l1);border-left-width:0;border-radius:0;background:var(--sf1);box-shadow:var(--hl)}button::before{content:none}button:first-child{border-left-width:1px;border-top-left-radius:var(--r3);border-bottom-left-radius:var(--r3)}button:last-child{border-top-right-radius:var(--r3);border-bottom-right-radius:var(--r3)}button:hover{position:relative;z-index:1;background:var(--sf3);color:var(--fg1)}button[active]{position:relative;z-index:1;background:var(--p2);border-color:var(--p2);color:var(--p5)}}}split-button{display:inline-flex;vertical-align:middle;position:relative;.split-caret an-icon{transform:rotate(90deg)} [part="menu"] { position: absolute; top: calc(100% + 4px); right: 0; z-index: 20; display: flex; flex-direction: column; gap: 4px; min-width: 100%; padding: 4px; border: 1px solid var(--l1); border-radius: var(--r3); background: var(--sf1); box-shadow: var(--hl), var(--sh1); } [part="menu"] a-button { justify-content: flex-start; }}@media(prefers-reduced-motion:reduce){a-button,button-group button{transition:none}a-button [part=spinner]{animation:none}}an-icon{display:inline-block;width:20px;height:20px;flex-shrink:0;&[size=xs]{width:12px;height:12px}&[size=sm]{width:14px;height:14px}&[size=lg]{width:32px;height:32px}svg{width:100%;height:100%;path{vector-effect:non-scaling-stroke}}}icon-button{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;width:34px;height:34px;border:1px solid var(--l1);border-radius:var(--r3);background:var(--sf1);color:var(--fg1);box-shadow:var(--hl);cursor:pointer;user-select:none;transition:background var(--dur2)var(--ease1),border-color var(--dur2)var(--ease1),color var(--dur2)var(--ease1),box-shadow var(--dur2)var(--ease1);&[size=lg]{width:40px;height:40px}&[size=sm]{width:28px;height:28px;border-radius:var(--r2)}&[size=xs]{width:24px;height:24px;border-radius:var(--r2)}}@media(prefers-reduced-motion:reduce){icon-button{transition:none}}select-field{display:block;width:100%; [part="label"] { display: block; margin-bottom: 8px; color: var(--fg2); font-size: var(--t2); font-weight: 600; } [part="field"] { position: relative; } [part="trigger"] { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 12px; border: 1px solid var(--l1); border-radius: var(--r3); background: var(--sf4); box-shadow: var(--hl); color: var(--fg1); cursor: pointer; transition: border-color var(--dur2) var(--ease1), box-shadow var(--dur2) var(--ease1); } [part="value"] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [part="value"][data-empty] { color: var(--fg4); } [part="input"] { flex: 1; min-width: 0; height: 36px; background: transparent; color: var(--fg1); font: inherit; } [part="chev"] { flex-shrink: 0; color: var(--fg3); transition: transform var(--dur2) var(--ease1); } [part="trigger"]:focus-visible, &[open] [part="trigger"], &[state="focus"] [part="trigger"] { border-color: var(--p2); box-shadow: var(--gl1); } &[open] [part="chev"] { transform: rotate(180deg); } [part="hint"] { margin-top: 6px; color: var(--fg3); font-size: var(--t2); } [part="listbox"] { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20; padding: 6px; border: 1px solid var(--l1); border-radius: var(--r3); background: var(--sf2); box-shadow: var(--hl), var(--sh2); max-height: 280px; overflow-y: auto; } [part="option"] { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--r2); color: var(--fg2); cursor: pointer; transition: background var(--dur1) var(--ease1), color var(--dur1) var(--ease1); } [part="option"]:hover { background: var(--sf3); color: var(--fg1); } [part="option"].sel { background: var(--a3); color: var(--a1); } [part="opt-icon"] { flex-shrink: 0; color: var(--fg3); } [part="opt-label"] { flex-shrink: 0; font-weight: 600; } [part="opt-desc"] { flex: 1; min-width: 0; color: var(--fg4); font-size: var(--t2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [part="opt-check"] { flex-shrink: 0; margin-left: auto; color: var(--a1); } [part="empty"] { padding: 8px 10px; color: var(--fg4); } &[state="error"] [part="trigger"] { border-color: var(--e2); background: var(--e3); } &[size="sm"] [part="trigger"] { min-height: 32px; } &[size="lg"] [part="trigger"] { min-height: 44px; } &[disabled] { opacity: .4; pointer-events: none; }}check-controls{display:block; [part="row"] { display: flex; align-items: center; gap: 10px; cursor: pointer; } [part="native"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } [part="copy"] { display: flex; align-items: baseline; gap: 8px; } [part="label"] { color: var(--fg1); font-weight: 600; } [part="desc"] { color: var(--fg4); font-size: var(--t2); } [part="box"] { position: relative; flex-shrink: 0; width: 16px; height: 16px; border: 1px solid var(--l1); border-radius: var(--r1); background: var(--sf4); box-shadow: var(--hl); transition: background var(--dur2) var(--ease1), border-color var(--dur2) var(--ease1), box-shadow var(--dur2) var(--ease1); } [part="box"]::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur1) var(--ease1), transform var(--dur2) var(--ease1); } [part="native"]:focus-visible + [part="box"] { border-color: var(--p2); box-shadow: var(--gl1); } &[type="checkbox"] { [part="box"]::after { background: var(--p5); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 8.5 7 11.5 12 4.5'/%3E%3C/svg%3E") center / 12px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 8.5 7 11.5 12 4.5'/%3E%3C/svg%3E") center / 12px no-repeat; } [part="native"]:checked + [part="box"], [part="native"]:indeterminate + [part="box"] { background: var(--p2); border-color: var(--p1); } [part="native"]:checked + [part="box"]::after { opacity: 1; } [part="native"]:indeterminate + [part="box"]::after { inset: 7px 3px; border-radius: 1px; -webkit-mask: none; mask: none; opacity: 1; } } &[type="radio"] { [part="box"] { border-radius: var(--pill); } [part="box"]::after { inset: 4px; border-radius: var(--pill); background: var(--p2); } [part="native"]:checked + [part="box"] { border-color: var(--p1); } [part="native"]:checked + [part="box"]::after { opacity: 1; } } &[type="switch"] { [part="box"] { width: 34px; height: 20px; border-radius: var(--pill); background: var(--sf3); } [part="box"]::after { inset: auto; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: var(--pill); background: var(--fg2); opacity: 1; } [part="native"]:checked + [part="box"] { background: var(--p2); border-color: var(--p1); } [part="native"]:checked + [part="box"]::after { transform: translateX(14px); background: var(--p5); } } &[type="slider"], &[type="range"] { width: 100%; } [part="head"] { display: flex; align-items: center; gap: 12px; } [part="head"] [part="label"] { flex-shrink: 0; color: var(--fg2); font-size: var(--t2); font-weight: 600; } [part="head"] [part="track"], [part="grow"] { flex: 1; min-width: 0; } [part="grow"] { position: relative; } [part="value"] { flex-shrink: 0; min-width: 24px; text-align: right; color: var(--fg1); font-variant-numeric: tabular-nums; } [part="track"] { -webkit-appearance: none; appearance: none; width: 100%; height: 16px; background: transparent; cursor: pointer; } [part="track"]::-webkit-slider-runnable-track { height: 4px; border-radius: var(--pill); background: linear-gradient(to right, var(--p2) var(--val, 0%), var(--sf3) var(--val, 0%)); } [part="track"]::-moz-range-track { height: 4px; border-radius: var(--pill); background: var(--sf3); } [part="track"]::-moz-range-progress { height: 4px; border-radius: var(--pill); background: var(--p2); } [part="track"]::-webkit-slider-thumb, [part="thumb"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -6px; border: 1px solid var(--l1); border-radius: var(--pill); background: var(--g1); box-shadow: var(--hl); transition: border-color var(--dur2) var(--ease1), box-shadow var(--dur2) var(--ease1); } [part="track"]::-moz-range-thumb, [part="thumb"]::-moz-range-thumb { width: 16px; height: 16px; border: 1px solid var(--l1); border-radius: var(--pill); background: var(--g1); box-shadow: var(--hl); } [part="thumb"]::-webkit-slider-thumb { pointer-events: auto; } [part="thumb"]::-moz-range-thumb { pointer-events: auto; } [part="track"]:focus-visible::-webkit-slider-thumb, &[state="focus"] [part="track"]::-webkit-slider-thumb, [part="thumb"]:focus-visible::-webkit-slider-thumb, &[state="focus"] [part="thumb"]::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -7px; border-color: var(--p2); box-shadow: var(--gl1); } [part="track"]:focus-visible::-moz-range-thumb, &[state="focus"] [part="track"]::-moz-range-thumb, [part="thumb"]:focus-visible::-moz-range-thumb, &[state="focus"] [part="thumb"]::-moz-range-thumb { width: 18px; height: 18px; border-color: var(--p2); box-shadow: var(--gl1); } [part="range"] { position: relative; height: 16px; } [part="rail"] { position: absolute; top: 6px; left: 0; right: 0; height: 4px; border-radius: var(--pill); background: var(--sf3); } [part="fill"] { position: absolute; top: 6px; height: 4px; left: var(--lo); right: calc(100% - var(--hi)); border-radius: var(--pill); background: var(--p2); } [part="thumb"] { position: absolute; top: 0; left: 0; width: 100%; height: 16px; margin: 0; -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none; } &[type="range"] { padding-bottom: 20px; } [part="ends"] { position: absolute; top: 100%; left: 0; right: 0; height: 16px; margin-top: 4px; color: var(--fg3); font-size: var(--t2); font-variant-numeric: tabular-nums; } [part="ends"] span { position: absolute; transform: translateX(-50%); white-space: nowrap; } &[disabled] [part="track"]::-webkit-slider-runnable-track { background: var(--sf3); } &[disabled] [part="track"]::-moz-range-progress { background: var(--sf3); } &[disabled] [part="fill"] { background: var(--sf3); } &[disabled] { opacity: .4; pointer-events: none; }}search-bar{display:block;width:100%; [part="bar"] { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 8px 0 12px; border: 1px solid var(--l1); border-radius: var(--r3); background: var(--sf4); box-shadow: var(--hl); overflow: hidden; transition: border-color var(--dur2) var(--ease1), box-shadow var(--dur2) var(--ease1); } [part="icon"] { flex-shrink: 0; color: var(--fg3); } [part="input"] { flex: 1; min-width: 0; height: 36px; background: transparent; color: var(--fg1); font: inherit; } [part="input"]::placeholder { color: var(--fg4); } [part="input"]::-webkit-search-cancel-button { display: none; } [part="bar"]:focus-within, &[state="focus"] [part="bar"] { border-color: var(--p2); box-shadow: var(--gl1); } [part="kbd"] { flex-shrink: 0; padding: 2px 6px; border: 1px solid var(--l1); border-radius: var(--r1); background: var(--sf3); box-shadow: var(--hl); color: var(--fg3); font-family: var(--mono); font-size: var(--t1); line-height: 1.4; } [part="action"] { flex-shrink: 0; align-self: stretch; margin: -1px -8px -1px 0; padding: 0 16px; border: 1px solid var(--p1); border-radius: 0 var(--r3) var(--r3) 0; background: var(--p2); color: var(--p5); font-weight: 700; transition: background var(--dur2) var(--ease1); } [part="action"]:hover { background: var(--p3); } [part="filters"] { display: flex; align-items: center; gap: 6px; margin-top: 10px; } [part="pill"] { padding: 4px 10px; border: 1px solid var(--l1); border-radius: var(--pill); background: var(--sf3); color: var(--fg3); font-size: var(--t2); transition: border-color var(--dur1) var(--ease1), color var(--dur1) var(--ease1); } [part="pill"]:hover { border-color: var(--l3); color: var(--fg1); } [part="pill"].on { background: var(--p2); border-color: var(--p1); color: var(--p5); font-weight: 600; } [part="filters"] [part="kbd"] { margin-left: auto; } &[disabled] { opacity: .4; pointer-events: none; }}@media(prefers-reduced-motion:reduce){select-field [part=trigger],select-field [part=chev],select-field [part=option],check-controls [part=box],check-controls [part=box]::after,check-controls [part=track]::-webkit-slider-thumb,check-controls [part=thumb]::-webkit-slider-thumb,search-bar [part=bar],search-bar [part=pill],search-bar [part=action]{transition:none}}@keyframes skeleton-pulse{0%,100%{opacity:1}50%{opacity:.5}}[ui~=card]{display:block;padding:20px;border:1px solid var(--l1);border-radius:var(--r3);background:var(--sf1);box-shadow:var(--hl);color:var(--fg1);transition:border-color var(--dur3)var(--ease1),box-shadow var(--dur3)var(--ease1);&[ui~=link]{cursor:pointer;&:hover{border-color:var(--l3)}}&[state~=active]{border-color:var(--p2);box-shadow:var(--gl1)}&[state~=disabled]{opacity:.5;pointer-events:none}& > [part=title]{font-size:var(--t4);font-weight:700;color:var(--fg1);letter-spacing:-.01em}& > [part=blurb]{margin-top:8px;font-size:var(--t3);color:var(--fg3);line-height:1.5}& > [part=action]{display:inline-flex;align-items:center;gap:6px;margin-top:16px;color:var(--a1);font-size:var(--t3);font-weight:600}}[ui~=panel]{display:block;padding:28px;border:1px solid var(--l1);border-radius:var(--r5);background:var(--sf1);box-shadow:var(--hl);color:var(--fg1);&[state~=active]{border-color:var(--p2);box-shadow:var(--gl1)}}[ui~=card-head]{padding:16px 20px;border-bottom:1px solid var(--l2);&[ui~=tools]{display:flex;align-items:center;flex-wrap:wrap;gap:12px;& > [ui~=eyebrow]{margin-right:auto}}}[ui~=card-body]{padding:20px}[ui~=card-foot]{padding:16px 20px;border-top:1px solid var(--l2)}[ui~=card]:has(>[ui~=card-head],>[ui~=card-body],>[ui~=card-foot]),[ui~=panel]:has(>[ui~=card-head],>[ui~=card-body],>[ui~=card-foot]){padding:0}[ui~=stat-value]{font-size:var(--t7);font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--fg1);&[size=lg]{font-size:var(--t8)}&[tone=amber]{color:var(--a1)}&[tone=success]{color:var(--s1)}&[tone=warning]{color:var(--w1)}&[tone=error]{color:var(--e1)}}stat-card{display:flex;flex-direction:column;gap:6px;padding:20px;border:1px solid var(--l1);border-radius:var(--r3);background:var(--sf1);box-shadow:var(--hl);color:var(--fg1);transition:border-color var(--dur3)var(--ease1),box-shadow var(--dur3)var(--ease1);& > an-icon[part=icon]{color:var(--a1);margin-bottom:8px}& > [part=value]{font-size:var(--t6);font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--fg1)}& > [part=label]{font-size:var(--t3);color:var(--fg3)}& > [part=sub]{font-size:var(--t2);color:var(--fg4);line-height:1.4}&[state~=active]{border-color:var(--p2);box-shadow:var(--gl1);& > [part=value]{color:var(--a1)}}}metric-tile{display:flex;flex-direction:column;gap:4px;padding:16px;border:1px solid var(--l1);border-radius:var(--r2);background:var(--sf1);box-shadow:var(--hl);color:var(--fg1);transition:border-color var(--dur3)var(--ease1),box-shadow var(--dur3)var(--ease1);& > [part=head]{display:flex;align-items:baseline;justify-content:space-between;gap:8px}& [part=value]{font-size:var(--t5);font-weight:700;line-height:1.1;letter-spacing:-.01em;color:var(--fg1);white-space:nowrap}& [part=delta]{font-size:var(--t1);font-variant-numeric:tabular-nums;white-space:nowrap;&[dir=up]{color:var(--s1)}&[dir=down]{color:var(--e1)}&[tone=success]{color:var(--s1)}&[tone=error]{color:var(--e1)}&[tone=neutral]{color:var(--fg3)}}& > [part=label]{font-size:var(--t2);color:var(--fg3)}& > [part=name]{font-size:var(--t2);color:var(--fg4)}& > sparkline, & > svg{display:block;width:100%;margin-top:8px;color:var(--fg4)}&[active]{border-color:var(--p2);box-shadow:var(--gl1);& [part=value]{color:var(--a1)}& > sparkline, & > svg{color:var(--a1)}}}[ui~=feature-card]{display:flex;align-items:flex-start;gap:14px;padding:16px 18px;border:1px solid var(--l1);border-radius:var(--r3);background:var(--sf1);box-shadow:var(--hl);color:var(--fg1);text-decoration:none;cursor:pointer;transition:border-color var(--dur3)var(--ease1);&:hover{border-color:var(--l3);& > an-icon[part=chevron]{color:var(--a1);transform:translateX(2px)}}& > an-icon[part=icon]{color:var(--a1);flex-shrink:0}& > [part=body]{flex:1;min-width:0}& [part=title]{font-size:var(--t3);font-weight:700;color:var(--fg1)}& [part=desc]{margin-top:2px;font-size:var(--t2);color:var(--fg3)}& > an-icon[part=chevron]{color:var(--fg4);flex-shrink:0;align-self:center;transition:transform var(--dur3)var(--ease1),color var(--dur3)var(--ease1)}}[ui~=accordion]{border:1px solid var(--l1);border-radius:var(--r3);background:var(--sf1);box-shadow:var(--hl);overflow:hidden;& > details{border-top:1px solid var(--l2);&:first-child{border-top:0}}& summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;list-style:none;cursor:pointer;font-size:var(--t3);font-weight:600;color:var(--fg1);transition:color var(--dur2)var(--ease1);&::-webkit-details-marker{display:none}&::after{content:'';flex-shrink:0;width:7px;height:7px;border-right:1.5px solid var(--fg4);border-bottom:1.5px solid var(--fg4);transform:rotate(45deg);transition:transform var(--dur3)var(--ease1)}&:hover{color:var(--fg1)}}& details[open] > summary{color:var(--a1);&::after{transform:rotate(-135deg);border-color:var(--a1)}}& [part=panel]{padding:0 16px 16px;font-size:var(--t3);color:var(--fg3);line-height:1.55}}[ui~=empty]{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:48px 24px;border:1px dashed var(--l1);border-radius:var(--r3);background:var(--sf4);color:var(--fg2);text-align:center;& > an-icon, & > svg{color:var(--fg4)}& > [part=title]{font-size:var(--t4);font-weight:700;color:var(--fg1)}& > [part=desc]{font-size:var(--t3);color:var(--fg3);max-width:44ch}}[ui~=skeleton]{display:block;width:100%;height:16px;border-radius:var(--r2);background:var(--sf3);animation:skeleton-pulse 1.5s var(--ease1)infinite;&[size=sm]{height:10px}&[size=lg]{height:28px}&[shape=text]{width:80%}&[shape=circle]{width:40px;height:40px;border-radius:var(--pill)}}@media(prefers-reduced-motion:reduce){[ui~=card],stat-card,metric-tile,[ui~=feature-card],[ui~=accordion] summary,[ui~=accordion] summary::after{transition:none}[ui~=feature-card]:hover>an-icon[part=chevron]{transform:none}[ui~=skeleton]{animation:none}}an-alert{display:flex;gap:12px;padding:14px 16px;border:1px solid var(--l1);border-radius:var(--r3);background:var(--sf1);box-shadow:var(--hl);color:var(--fg2);& > an-icon{flex-shrink:0;margin-top:1px}& > [part=body]{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}& [part=title]{font-weight:700;font-size:var(--t3);line-height:1.3;color:var(--fg1)}& [part=desc]{font-size:var(--t3);color:var(--fg3);line-height:1.45}& [part=action]{margin-top:8px}&[tone=info]{border-color:var(--i2);background:var(--i3);& > an-icon{color:var(--i1)}}&[tone=success]{border-color:var(--s2);background:var(--s3);& > an-icon{color:var(--s1)}}&[tone=warning]{border-color:var(--w2);background:var(--w3);& > an-icon{color:var(--w1)}}&[tone=error]{border-color:var(--e2);background:var(--e3);& > an-icon{color:var(--e1)}}}a-tab-rail{display:inline-flex;align-self:flex-start;max-width:100%;padding:4px;border:1px solid var(--l1);border-radius:var(--r4);background:var(--sf2);box-shadow:var(--hl);overflow-x:auto;scrollbar-width:none;&::-webkit-scrollbar{display:none} [part="tab"] { flex: none; position: relative; min-width: 78px; padding: 7px 14px; border-radius: var(--r2); color: var(--fg2); line-height: 1; white-space: nowrap; transition: color var(--dur2) var(--ease1), background var(--dur2) var(--ease1); + [part="tab"]::before { content: ""; position: absolute; inset: 0 auto 0 -1px; width: 1px; background: var(--l1); } &:hover { color: var(--fg1); } &[state~="active"] { background: var(--a1); color: var(--p5); } &[state~="active"]::before, &[state~="active"] + [part="tab"]::before { content: none; } &:disabled { opacity: .4; cursor: not-allowed; } }}a-tab-rail[variant=underline],a-tab-rail[variant=pill]{padding:0;border:0;border-radius:0;background:0 0;box-shadow:none;overflow:visible; [part="tab"] { min-width: 0; color: var(--fg3); &::before { content: none; } }}a-tab-rail[variant=underline]{display:flex;gap:4px;border-bottom:1px solid var(--l1); [part="tab"] { padding: 10px 14px; border-radius: 0; margin-bottom: -1px; &:hover { color: var(--fg1); } &[state~="active"] { background: transparent; color: var(--a1); box-shadow: inset 0 -2px 0 var(--a1); } &:focus-visible { color: var(--a1); box-shadow: inset 0 -2px 0 var(--a1), var(--gl1); } }}a-tab-rail[variant=pill]{display:inline-flex;flex-wrap:wrap;gap:6px; [part="tab"] { padding: 6px 14px; border: 1px solid var(--l1); border-radius: var(--pill); background: var(--sf1); box-shadow: var(--hl); &:hover { color: var(--fg1); border-color: var(--l3); } &[state~="active"] { border-color: var(--a1); background: var(--a1); color: var(--p5); box-shadow: none; } }}[ui~=sidebar]{display:flex;flex-direction:column;gap:2px; [ui~="group"] { margin: 16px 0 4px; padding: 0 12px; color: var(--fg4); font-size: var(--t1); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; &:first-child { margin-top: 0; } }}[ui~=sidebar-item]{display:flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid transparent;border-radius:var(--r3);color:var(--fg3);font-size:var(--t3);line-height:1;cursor:pointer;transition:color var(--dur2)var(--ease1),background var(--dur2)var(--ease1);&:hover{background:var(--sf3);color:var(--fg1)}&[state~=active]{border-color:var(--l3);background:var(--a3);color:var(--a1)}&:focus-visible{border-color:var(--l3)}svg{width:16px;height:16px;flex:none}}[ui~=nav-drawer]{position:fixed;top:0;left:0;z-index:100;width:min(320px,100vw);height:100vh;padding:20px;overflow:auto;background:var(--sf1);border:1px solid var(--l1);border-radius:0 var(--r5)var(--r5)0;box-shadow:var(--hl),var(--sh1);transform:translateX(-100%);transition:transform var(--dur4)var(--ease1);&[state~=open]{transform:translateX(0)}}a-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:var(--t2);color:var(--fg4); [part="crumb"] { color: var(--fg3); transition: color var(--dur2) var(--ease1); } a[part="crumb"]:hover { color: var(--fg1); } [part="crumb"] + [part="crumb"]::before { content: "›"; margin-right: 6px; color: var(--fg4); } [part="crumb"][aria-current="page"] { color: var(--a1); }}a-pagination{display:inline-flex;align-items:center;gap:2px;padding:4px;border:1px solid var(--l1);border-radius:var(--r4);background:var(--sf2);box-shadow:var(--hl); [part="page"], [part="nav"] { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 4px; border: 1px solid transparent; border-radius: var(--r2); color: var(--fg2); font-size: var(--t2); transition: color var(--dur2) var(--ease1), border-color var(--dur2) var(--ease1); &:hover:not(:disabled) { color: var(--fg1); border-color: var(--l3); } &:focus-visible { border-color: var(--l3); } &:disabled { opacity: .4; cursor: not-allowed; } } [part="page"][state~="active"] { border-color: var(--l3); background: var(--a4); color: var(--a1); } [part="count"] { padding: 0 8px; color: var(--fg2); font-size: var(--t2); font-variant-numeric: tabular-nums; }}a-stepper{display:flex;align-items:flex-start; [part="step"] { position: relative; flex: 1 1 0; display: grid; grid-template-columns: auto 1fr; grid-template-rows: 28px auto; column-gap: 8px; row-gap: 4px; padding-right: 32px; } [part="step"]:not(:last-child)::after { content: "→"; position: absolute; top: 14px; right: 16px; transform: translateY(-50%); color: var(--fg4); font-size: var(--t3); line-height: 1; } [part="marker"] { grid-row: 1; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--l1); border-radius: var(--pill); background: var(--sf1); box-shadow: var(--hl); color: var(--fg3); font-size: var(--t2); } [part="label"] { align-self: center; color: var(--fg1); font-size: var(--t3); font-weight: 600; line-height: 1.2; } [part="sub"] { grid-column: 2; color: var(--fg4); font-size: var(--t2); line-height: 1.3; } [part="step"][state~="active"] [part="marker"] { border-color: var(--a1); color: var(--a1); box-shadow: var(--gl1); } [part="step"][state~="active"] [part="label"] { color: var(--a1); } [part="step"][state~="done"] [part="marker"] { border-color: var(--a1); background: var(--a1); color: var(--p5); box-shadow: none; } @media (max-width: 640px) { [part="step"] { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 8px; padding-right: 8px; } [part="step"]:not(:last-child)::after { content: none; } [part="sub"] { grid-column: 1; } }}kbd,[ui~=kbd]{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border:1px solid var(--l1);border-radius:var(--r1);background:var(--sf4);box-shadow:var(--hl);color:var(--fg2);font-family:var(--mono);font-size:var(--t1)}[ui~=counter]{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--l1);border-radius:var(--pill);background:var(--sf1);box-shadow:var(--hl);color:var(--fg2);font-size:var(--t2); [ui~="star"] { color: var(--p2); }}[ui~=divider]{height:0;margin:16px 0;border:0;border-top:1px solid var(--l2);&[variant=dashed], &[variant=dotted]{border-top-color:var(--l1)}&[variant=dashed]{border-top-style:dashed}&[variant=dotted]{border-top-style:dotted}}.site-topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:24px;padding:12px 24px;border-bottom:1px solid var(--l1);background:var(--sf2);backdrop-filter:blur(12px); [ui~="logo-box"] { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid var(--a1); border-radius: var(--r3); background: var(--sf1); box-shadow: var(--gl1); color: var(--a1); font-family: var(--mono); font-size: var(--t5); font-weight: 800; } nav { display: flex; align-items: center; gap: 8px; } [ui~="link"] { padding: 8px 12px; border-radius: var(--r2); color: var(--fg3); font-size: var(--t4); line-height: 1; transition: color var(--dur2) var(--ease1); &:hover { color: var(--fg1); } &[state~="active"] { color: var(--a1); } } [ui~="right"] { display: flex; align-items: center; gap: 8px; margin-left: auto; }}@media(prefers-reduced-motion:reduce){a-tab-rail [part=tab],a-crumbs [part=crumb],a-pagination [part=page],a-pagination [part=nav],[ui~=sidebar-item],[ui~=nav-drawer],.site-topbar [ui~=link]{transition:none}[ui~=nav-drawer][state~=open]{transform:none}}a-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border:1px solid var(--l1);border-radius:var(--r1);background:var(--sf1);box-shadow:var(--hl);color:var(--fg2);font-size:var(--t2); [part="ico"] { width: 14px; height: 14px; color: var(--fg3); } [part="dismiss"] { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-right: -4px; border-radius: var(--r1); color: var(--fg4); transition: color var(--dur2) var(--ease1), background var(--dur2) var(--ease1); svg { width: 12px; height: 12px; } &:hover { color: var(--fg1); background: var(--sf3); } }}a-chip[variant=tag]{height:22px;padding:0 8px;border-color:var(--l3);background:var(--a4);color:var(--p2);font-family:var(--mono);font-size:var(--t1)}a-badge{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border:1px solid var(--l1);border-radius:var(--r1);background:var(--sf3);color:var(--fg2);font-size:var(--t2);font-weight:600;white-space:nowrap; [part="ico"] { width: 12px; height: 12px; flex: none; } [part="dot"] { width: 6px; height: 6px; border-radius: var(--pill); background: currentColor; }}a-badge[tone=success]{color:var(--s1);border-color:var(--s2);background:var(--s3)}a-badge[tone=warning]{color:var(--w1);border-color:var(--w2);background:var(--w3)}a-badge[tone=error]{color:var(--e1);border-color:var(--e2);background:var(--e3)}a-badge[tone=info]{color:var(--i1);border-color:var(--i2);background:var(--i3)}a-badge[tone=amber]{color:var(--p2);border-color:var(--l3);background:var(--a3)}a-badge[tone=neutral]{color:var(--fg3);border-color:var(--l1);background:var(--sf3)}a-badge[variant=version]{font-family:var(--mono);color:var(--a1);border-color:var(--l3);background:var(--a3)}a-badge[variant=dot]{height:auto;padding:0;border:0;background:0 0;color:var(--fg2);font-weight:500}a-badge[variant=dot][tone=online] [part=dot]{background:var(--s1);color:var(--s1)}a-badge[variant=dot][tone=idle] [part=dot]{background:var(--fg3);color:var(--fg3)}a-badge[variant=dot][tone=busy] [part=dot]{background:var(--p2);color:var(--p2)}a-badge[variant=dot][tone=offline] [part=dot]{background:var(--e1);color:var(--e1)}a-badge[variant=dot][state~=live] [part=dot]{animation:dot-pulse 1.6s var(--ease1)infinite}@media(prefers-reduced-motion:reduce){a-chip [part=dismiss]{transition:none}a-badge[variant=dot][state~=live] [part=dot]{animation:none}}@keyframes dot-pulse{0%,100%{box-shadow:0 0 currentColor;opacity:1}50%{box-shadow:0 0 0 5px transparent;opacity:.55}}[ui~=table-scroll]{overflow-x:auto}[ui~=table]{width:100%;border-collapse:collapse;font-size:var(--t3);& th{padding:10px 16px;border-bottom:1px solid var(--l1);color:var(--fg4);font-size:var(--t1);font-weight:600;letter-spacing:.1em;text-align:left;text-transform:uppercase}& td{padding:12px 16px;border-bottom:1px solid var(--l2);color:var(--fg2)}& tbody tr{transition:background var(--dur2)var(--ease1);&:hover td{background:var(--sf3)}}& [ui~=num], & th[ui~=num]{text-align:right;font-variant-numeric:tabular-nums}& td[tone=success]{color:var(--s1)}& td[tone=warning]{color:var(--w1)}& td[tone=error]{color:var(--e1)}& tr[state~=hot] td{background:var(--a3);color:var(--a1);font-weight:600}& tr[state~=selected] td{background:var(--a4);border-bottom-color:var(--l3)}&[ui~=compact]{& th, & td{padding:8px 12px}}}[ui~=bench]{display:flex;flex-direction:column;gap:10px;width:100%}[ui~=bench-row]{position:relative;display:flex;align-items:center;gap:12px;& > [ui~=bench-label]{position:absolute;left:12px;z-index:2;color:var(--fg2);font-size:var(--t3);white-space:nowrap;pointer-events:none}& > [ui~=bench-value]{min-width:96px;color:var(--fg3);font-size:var(--t2);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}&[state~=hot]{& > [ui~=bench-bar] > [ui~=bench-fill]{background:var(--p2);box-shadow:var(--gl1)}& > [ui~=bench-label]{color:var(--p5);font-weight:700}& > [ui~=bench-value]{color:var(--a1)}}}[ui~=bench-bar]{position:relative;flex:1;height:28px}[ui~=bench-fill]{position:absolute;top:0;bottom:0;left:0;border-radius:var(--r2);background:var(--sf3);transition:width var(--dur4)var(--ease1)}[ui~=progress]{width:100%;height:8px;border-radius:var(--pill);background:var(--sf4);overflow:hidden;&[size=sm]{height:5px}&[size=lg]{height:12px}}[ui~=progress-fill]{display:block;height:100%;background:var(--p2);transition:width 600ms var(--ease1);&[tone=success]{background:var(--s1)}&[tone=warning]{background:var(--w1)}&[tone=serious]{background:var(--p3)}&[tone=error]{background:var(--e1)}}[ui~=progress-row]{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px;font-size:var(--t2);color:var(--fg3);& > [part=pct]{color:var(--fg2);font-variant-numeric:tabular-nums}}[ui~=dot]{display:inline-block;width:8px;height:8px;border-radius:var(--pill);background:var(--fg4);color:var(--fg4);flex-shrink:0;&[tone=success]{background:var(--s1);color:var(--s1)}&[tone=warning]{background:var(--w1);color:var(--w1)}&[tone=error]{background:var(--e1);color:var(--e1)}&[tone=info]{background:var(--i1);color:var(--i1)}&[state~=live]{animation:dot-pulse 1.6s var(--ease1)infinite}}[ui~=badge],[ui~=tag]{display:inline-flex;align-items:center;padding:2px 8px;border:1px solid var(--l3);border-radius:var(--r1);background:var(--a3);color:var(--a1);font-family:var(--mono);font-size:var(--t1);line-height:1.3;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;&[tone=neutral]{background:var(--sf3);color:var(--fg2);border-color:var(--l1)}&[tone=success]{background:var(--s3);color:var(--s1);border-color:var(--s2)}&[tone=warning]{background:var(--w3);color:var(--w1);border-color:var(--w2)}&[tone=error]{background:var(--e3);color:var(--e1);border-color:var(--e2)}&[tone=info]{background:var(--i3);color:var(--i1);border-color:var(--i2)}}[ui~=badge][ui~=solid]{background:var(--p2);color:var(--p5);border-color:var(--p1)}[ui~=pill]:not([ui~=btn]),[ui~=chip]{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border:1px solid var(--l1);border-radius:var(--pill);background:var(--sf3);color:var(--fg2);font-size:var(--t2);line-height:1.3;white-space:nowrap;&[tone=amber]{background:var(--a3);color:var(--a1);border-color:var(--l3)}&[tone=success]{background:var(--s3);color:var(--s1);border-color:var(--s2)}&[tone=warning]{background:var(--w3);color:var(--w1);border-color:var(--w2)}&[tone=error]{background:var(--e3);color:var(--e1);border-color:var(--e2)}&[tone=info]{background:var(--i3);color:var(--i1);border-color:var(--i2)}}@media(prefers-reduced-motion:reduce){[ui~=bench-fill],[ui~=progress-fill],[ui~=table] tbody tr{transition:none}[ui~=dot][state~=live]{animation:none}}code{padding:1px 6px;border-radius:var(--r1);background:var(--sf3);color:var(--p1);font-family:var(--mono);font-size:.92em}[ui~=code-wrap]{position:relative;& pre{margin:0;padding:20px 24px;border:1px solid var(--l1);border-radius:var(--r3);background:var(--sf4);box-shadow:var(--hl);color:var(--fg2);font-family:var(--mono);font-size:var(--t2);line-height:1.7;overflow-x:auto}& pre code{padding:0;background:0 0;color:inherit;font-size:inherit}& .kw{color:var(--p2)}& .fn{color:var(--i1)}& .str{color:var(--s1)}& .cm{color:var(--fg4);font-style:italic}& .num{color:var(--p1)}& .op{color:var(--fg3)}& .tag{color:var(--i1)}& .attr{color:var(--p1)}& code{counter-reset:cl}& .cl{display:block;position:relative;padding-left:36px;counter-increment:cl;&:empty::after{content:'\00a0'}&::before{content:counter(cl);position:absolute;left:0;width:24px;text-align:right;color:var(--fg4);user-select:none}}}[ui~=panel] [ui~=code-wrap] pre{padding:0;border:0;border-radius:0;background:0 0;box-shadow:none}[ui~=copy-btn]{position:absolute;top:8px;right:8px;z-index:2;display:inline-flex;align-items:center;justify-content:center;height:24px;padding:0 8px;border:1px solid var(--l1);border-radius:var(--r2);background:0 0;color:var(--fg3);font-family:var(--mono);font-size:var(--t1);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:background var(--dur3)var(--ease1),border-color var(--dur3)var(--ease1),color var(--dur3)var(--ease1);&:hover{background:var(--sf3);color:var(--fg1);border-color:var(--l3)}&:active{background:var(--sf2)}&:focus-visible{outline:none;box-shadow:var(--ring1)}&[state~=copied]{color:var(--s1);border-color:var(--s2);background:var(--s3)}}[ui~=code-tabs]{display:flex;gap:0;margin:0;& [ui~=code-tab]{padding:10px 20px;border:1px solid var(--l1);border-bottom:none;background:0 0;color:var(--fg3);font-family:var(--mono);font-size:var(--t2);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:background var(--dur3)var(--ease1),color var(--dur3)var(--ease1),border-color var(--dur3)var(--ease1);&:first-child{border-radius:var(--r2)0 0 0}&:last-child{border-radius:0 var(--r2)0 0}& + [ui~=code-tab]{border-left:none}&:hover{color:var(--fg1);background:var(--sf3)}&:focus-visible{outline:none;box-shadow:var(--ring1);position:relative;z-index:1}&[state~=active]{background:var(--sf4);color:var(--a1);font-weight:600}}}[ui~=code-panel]{display:none;border:1px solid var(--l1);border-radius:var(--r3);background:var(--sf4);box-shadow:var(--hl);&[state~=active]{display:block}}[ui~=code-tabs]+[ui~=code-panel]{border-top:none;border-radius:0 0 var(--r2)var(--r2)}[ui~=callout]{padding:16px 20px;border-radius:var(--r3);border-left:3px solid var(--l1);background:var(--sf3);color:var(--fg2);font-size:var(--t3);line-height:1.6;&[tone=info]{border-left-color:var(--i1)}&[tone=success]{border-left-color:var(--s1)}&[tone=warning]{border-left-color:var(--w1)}&[tone=error]{border-left-color:var(--e1)}}[ui~=callout-title]{display:block;margin-bottom:6px;color:var(--fg1);font-family:var(--mono);font-size:var(--t1);letter-spacing:.16em;text-transform:uppercase;font-weight:600; [ui~="callout"][tone="info"] & { color: var(--i1); } [ui~="callout"][tone="success"] & { color: var(--s1); } [ui~="callout"][tone="warning"] & { color: var(--w1); } [ui~="callout"][tone="error"] & { color: var(--e1); }}[ui~=callout-body]{display:block;color:var(--fg2);& p{margin:0 0 8px}& p:last-child{margin-bottom:0}}[ui~=api-table]{display:flex;flex-direction:column;border:1px solid var(--l1);border-radius:var(--r3);background:var(--sf1);box-shadow:var(--hl);overflow:hidden}[ui~=api-row]{display:flex;align-items:baseline;gap:16px;padding:12px 20px;border-bottom:1px solid var(--l2);transition:background var(--dur3)var(--ease1);&:last-child{border-bottom:none}&:hover{background:var(--sf3)}& > [ui~=api-name]{flex:none;color:var(--p1);font-family:var(--mono);font-size:var(--t3);font-weight:600}& > [ui~=api-sig]{flex:none;color:var(--fg3);font-family:var(--mono);font-size:var(--t2)}& > [ui~=api-desc]{flex:auto;color:var(--fg2);font-size:var(--t3);line-height:1.5}}@media(prefers-reduced-motion:reduce){[ui~=copy-btn],[ui~=code-tab],[ui~=api-row]{transition:none}}[ui~=backdrop]{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity var(--dur3)var(--ease1);&[state~=open]{opacity:1;pointer-events:auto}&[state~=closed]{opacity:0;pointer-events:none}}[ui~=dropdown]{position:relative;display:inline-block}[ui~=dropdown-menu],[ui~=context-menu]{position:absolute;top:100%;left:0;z-index:80;min-width:200px;margin-top:6px;padding:6px;border:1px solid var(--l1);border-radius:var(--r3);background:var(--sf2);box-shadow:var(--hl),var(--sh2);backdrop-filter:blur(12px);opacity:0;pointer-events:none;transform:translateY(-4px);transition:opacity var(--dur2)var(--ease1),transform var(--dur2)var(--ease1);&[state~=open]{opacity:1;pointer-events:auto;transform:translateY(0)}&[state~=closed]{opacity:0;pointer-events:none;transform:translateY(-4px)}}[ui~=context-menu]{top:auto;left:auto}[ui~=menu-item]{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--r2);font-size:var(--t3);color:var(--fg2);cursor:pointer;transition:background var(--dur1)var(--ease1),color var(--dur1)var(--ease1);& > an-icon{color:var(--fg4);flex-shrink:0}& > [part=kbd]{margin-left:auto;color:var(--fg4);font-family:var(--mono);font-size:var(--t1)}&:hover{background:var(--sf3);color:var(--fg1);& > an-icon{color:var(--fg2)}}&[state~=active]{color:var(--a1);background:var(--sf3)}&[tone=danger]{color:var(--e1);& > an-icon{color:var(--e1)}&:hover{background:var(--e3);color:var(--e1)}}&[state~=disabled], &[disabled]{opacity:.45;pointer-events:none}}[ui~=menu-sep]{height:1px;margin:6px 4px;background:var(--l2);border:0}[ui~=menu-heading]{padding:8px 10px 4px;font-family:var(--mono);font-size:var(--t1);text-transform:uppercase;letter-spacing:.1em;color:var(--fg4)}[ui~=popover]{position:absolute;z-index:80;min-width:200px;max-width:300px;padding:14px 16px;border:1px solid var(--l1);border-radius:var(--r3);background:var(--sf2);box-shadow:var(--hl),var(--sh2);backdrop-filter:blur(12px);color:var(--fg2);font-size:var(--t3);line-height:1.5;opacity:0;pointer-events:none;transform:translateY(-4px);transition:opacity var(--dur2)var(--ease1),transform var(--dur2)var(--ease1);&[state~=open]{opacity:1;pointer-events:auto;transform:translateY(0)}&[state~=closed]{opacity:0;pointer-events:none;transform:translateY(-4px)}& [part=title]{margin-bottom:4px;font-size:var(--t3);font-weight:700;color:var(--fg1)}}[ui~=cmdk]{position:fixed;top:14vh;left:50%;z-index:100;display:flex;flex-direction:column;width:calc(100% - 32px);max-width:600px;max-height:64vh;overflow:hidden;border:1px solid var(--l1);border-radius:var(--r5);background:var(--sf1);box-shadow:var(--hl),var(--sh1);color:var(--fg1);opacity:0;pointer-events:none;transform:translateX(-50%)translateY(-8px);transition:opacity var(--dur3)var(--ease1),transform var(--dur3)var(--ease1);&[state~=open]{opacity:1;pointer-events:auto;transform:translateX(-50%)translateY(0)}&[state~=closed]{opacity:0;pointer-events:none;transform:translateX(-50%)translateY(-8px)}}[ui~=cmdk-head]{display:flex;align-items:center;gap:12px;padding-right:14px;border-bottom:1px solid var(--l1)}[ui~=cmdk-input]{flex:1;min-width:0;height:52px;padding:0 18px;border:0;background:0 0;color:var(--fg1);font-size:var(--t4);outline:none;&::placeholder{color:var(--fg4)}}[ui~=cmdk-list]{flex:1;padding:8px;overflow-y:auto}[ui~=cmdk-group]{padding:10px 12px 4px;font-family:var(--mono);font-size:var(--t1);font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--fg4)}[ui~=cmdk-foot]{display:flex;align-items:center;gap:16px;padding:10px 14px;border-top:1px solid var(--l1);color:var(--fg4);font-size:var(--t1);& .cmdk-hint{display:inline-flex;align-items:center;gap:6px}}[ui~=cmdk-item]{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r2);font-size:var(--t3);color:var(--fg2);cursor:pointer;transition:background var(--dur1)var(--ease1),color var(--dur1)var(--ease1);& > an-icon{color:var(--fg4);flex-shrink:0}& > [part=kbd]{margin-left:auto}&:hover{background:var(--sf3);color:var(--fg1);& > an-icon{color:var(--fg2)}}&[state~=active]{background:var(--a4);color:var(--a1);& > an-icon{color:var(--a1)}}}[ui~=kbd]{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border:1px solid var(--l1);border-radius:var(--r1);background:var(--sf3);color:var(--fg3);font-family:var(--mono);font-size:var(--t1);line-height:1}a-tooltip,[ui~=tooltip]{display:inline-block;max-width:240px;padding:5px 9px;border:1px solid var(--l1);border-radius:var(--r2);background:var(--sf2);box-shadow:var(--hl),var(--sh2);backdrop-filter:blur(12px);color:var(--fg2);font-size:var(--t1);line-height:1.4;pointer-events:none}a-tooltip{position:absolute;z-index:80;opacity:0;transition:opacity var(--dur2)var(--ease1);&[state~=open]{opacity:1}&[state~=closed]{opacity:0}}[ui~=toast-stack]{position:fixed;right:20px;bottom:20px;z-index:110;display:flex;flex-direction:column;gap:8px;max-width:340px;pointer-events:none;& > *{pointer-events:auto}}a-toast{display:flex;align-items:flex-start;gap:10px;min-width:240px;padding:12px 14px;border:1px solid var(--l1);border-radius:var(--r3);background:var(--sf1);box-shadow:var(--hl),var(--sh2);color:var(--fg1);opacity:0;transform:translateX(16px);transition:opacity var(--dur3)var(--ease1),transform var(--dur3)var(--ease1);&[state~=open]{opacity:1;transform:translateX(0)}&[state~=closed]{opacity:0;transform:translateX(16px)}& > an-icon{flex-shrink:0;margin-top:1px}& > [part=body]{flex:1;min-width:0}& [part=title]{font-size:var(--t3);font-weight:600;color:var(--fg1)}& [part=desc]{margin-top:2px;font-size:var(--t2);color:var(--fg3);line-height:1.4}& > icon-button{flex-shrink:0;margin:-2px -2px 0 0}&[tone=success] > an-icon{color:var(--s1)}&[tone=error] > an-icon{color:var(--e1)}&[tone=warning] > an-icon{color:var(--w1)}&[tone=info] > an-icon{color:var(--i1)}}[ui~=drawer]{position:fixed;top:0;right:0;z-index:100;width:min(380px,100vw);height:100vh;padding:20px;overflow:auto;background:var(--sf1);border:1px solid var(--l1);border-radius:var(--r5)0 0 var(--r5);box-shadow:var(--hl),var(--sh1);color:var(--fg1);transform:translateX(100%);transition:transform var(--dur4)var(--ease1);&[state~=open]{transform:translateX(0)}&[state~=closed]{transform:translateX(100%)}&[side=left]{right:auto;left:0;border-radius:0 var(--r5)var(--r5)0;transform:translateX(-100%);&[state~=open]{transform:translateX(0)}&[state~=closed]{transform:translateX(-100%)}}& > [part=head]{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-4px 0 4px;& > [part=title]{font-size:var(--t5);font-weight:700;color:var(--fg1);line-height:1.2}}& > [part=group]{margin-top:16px;margin-bottom:10px;font-family:var(--mono);font-size:var(--t1);font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--fg4)}& > * + [part=group]{margin-top:20px}& > [part=reset]{margin-top:20px;color:var(--e1);font-size:var(--t3);font-weight:600;text-decoration:none;&:hover{color:var(--fg1)}}& > select-field, & > check-controls{margin-bottom:12px}}@keyframes ui-spin{to{transform:rotate(360deg)}}[ui~=spinner]{display:inline-block;width:20px;height:20px;border:2px solid var(--l1);border-top-color:var(--fg2);border-radius:var(--pill);animation:ui-spin .7s linear infinite;&[size=sm]{width:14px;height:14px;border-width:1.5px}&[size=lg]{width:28px;height:28px}&[tone=amber]{border-top-color:var(--a1)}}@media(prefers-reduced-motion:reduce){[ui~=backdrop],[ui~=dropdown-menu],[ui~=context-menu],[ui~=popover],[ui~=cmdk],a-tooltip,a-toast,[ui~=drawer]{transition:opacity var(--dur1)linear;transform:none}[ui~=cmdk][state~=open],[ui~=cmdk][state~=closed]{transform:translateX(-50%)}a-toast[state~=open],a-toast[state~=closed],[ui~=drawer][state~=open],[ui~=drawer][state~=closed]{transform:none}[ui~=spinner]{animation:none}}:root{--topbar-h:64px;--c1:#cf7d0a;--c2:#3f8fe0;--c3:#39a353;--c4:#8f7ae6;--c5:#c85a3c}.site-topbar{height:var(--topbar-h)}.app-shell{display:flex;align-items:stretch}.app-side{position:sticky;top:var(--topbar-h);flex:0 0 232px;align-self:flex-start;display:flex;flex-direction:column;gap:24px;min-height:calc(100vh - var(--topbar-h));padding:20px 16px;border-right:1px solid var(--l1)}.app-brand{display:flex;align-items:center;gap:8px}.app-logo{flex:none;width:64px;height:64px;margin:-12px -8px -12px -12px}.app-body{flex:1;min-width:0;display:flex;flex-direction:column}.app-view-title{font-size:var(--t4);font-weight:700;letter-spacing:-.01em;color:var(--fg1);white-space:nowrap}.app-main{padding:24px;display:flex;flex-direction:column;gap:24px}.view{display:none}.view[state~=active]{display:flex;flex-direction:column;gap:24px}.wordmark{font-family:var(--mono);font-size:var(--t4);font-weight:700;letter-spacing:.12em;color:var(--fg1);white-space:nowrap;& b{color:var(--a1);font-weight:700}}.app-meta{font-family:var(--mono);font-size:var(--t1);color:var(--fg4);white-space:nowrap}.filter-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 24px;border-bottom:1px solid var(--l1);background:var(--sf1)}.app-foot{margin-top:auto;padding:20px 24px;border-top:1px solid var(--l1);font-family:var(--mono);font-size:var(--t1);letter-spacing:.18em;text-transform:uppercase;color:var(--fg4)}@media(max-width:900px){.site-topbar{height:auto;min-height:var(--topbar-h);flex-wrap:wrap;row-gap:12px}.app-shell{flex-direction:column}.app-side{position:static;flex:none;width:100%;min-width:0;gap:12px;min-height:0;padding:12px 16px;border-right:0;border-bottom:1px solid var(--l1);& [ui~=sidebar]{flex-direction:row;gap:4px;overflow-x:auto;scrollbar-width:none}& [ui~=sidebar-item]{flex:none}& [ui~=group]{display:none}}}@media(max-width:640px){.app-main{padding:16px}.filter-bar{padding:10px 16px}.picker{flex:1 1 100%}}[ui~=card-head]>[ui~=eyebrow]{margin-bottom:0}line-chart,bar-chart,pie-chart,scatter-chart,combo-chart{width:100%;& svg{width:100%;height:auto}& svg line[stroke="#e0e0e0"]{stroke:var(--g3);stroke-opacity:var(--o4)}& .cx-axis line{stroke:var(--l1)}}.cx-tip{border:1px solid var(--l1);border-radius:var(--r2);background:var(--sf3);box-shadow:var(--sh2);color:var(--fg1);font-family:var(--mono);font-size:var(--t1)}.cx-legend{color:var(--fg3);font-family:var(--mono);font-size:var(--t1);letter-spacing:.04em}.cx-axis text{fill:var(--fg4);font-family:var(--mono);font-size:var(--t1)}[ui~=card] svg path[stroke="#fff"],[ui~=card] svg circle[stroke="#fff"]{stroke:var(--sf1)}.depth-grid{display:flex;flex-direction:column;gap:3px}.depth-row{display:grid;grid-template-columns:44px 1fr 52px;align-items:center;gap:12px;font-family:var(--mono);font-size:var(--t1);font-variant-numeric:tabular-nums;& > [part=depth]{color:var(--fg4);text-align:right}& > [part=pct]{color:var(--fg2);text-align:right}}.live-row{display:flex;align-items:center;gap:12px;padding:7px 0;border-bottom:1px solid var(--l2);font-size:var(--t2);&:last-child{border-bottom:0}& > [part=path]{flex:1;min-width:0;color:var(--fg1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}& > [part=meta]{color:var(--fg3);flex-shrink:0}& > [part=ago]{width:44px;flex-shrink:0;color:var(--fg4);font-family:var(--mono);font-size:var(--t1);text-align:right}}.replay-stage{border:1px solid var(--l1);border-radius:var(--r3);background:var(--sf4);box-shadow:var(--hl);overflow:hidden;& canvas{display:block}& canvas + canvas{border-top:1px solid var(--l1)}}.picker{flex:0 0 340px;max-width:100%}.scrub{flex:1;height:6px;border:1px solid var(--l1);border-radius:var(--pill);background:var(--sf3);appearance:none;cursor:pointer;&::-webkit-slider-thumb{appearance:none;width:14px;height:14px;border:1px solid var(--p1);border-radius:var(--pill);background:var(--p2);box-shadow:var(--gl1)}&::-moz-range-thumb{width:14px;height:14px;border:1px solid var(--p1);border-radius:var(--pill);background:var(--p2)}}.heat-frame{position:relative;border:1px solid var(--l1);border-radius:var(--r3);background:var(--sf4);box-shadow:var(--hl);overflow:hidden;& > iframe{position:absolute;inset:0;border:0;opacity:.35;pointer-events:none}& > canvas{position:relative;pointer-events:none}}.mono{font-family:var(--mono);font-size:var(--t1);font-variant-numeric:tabular-nums;color:var(--fg3)}