/*! Sedna.UI — generated, comments stripped. The commented copy ships in the package as readable/Sedna.UI.css. */
@layer sedna.tokens, sedna.base, sedna.frame, sedna.paint, sedna.utilities, sedna.overrides;
@layer sedna.tokens {
}
@layer sedna.tokens {
:root {
    --white: #ffffff;
    --black: #000000;
    --slate-50: #f8fafc;
    --slate-100: #eef4fb;
    --slate-200: #dde7f3;
    --slate-300: #c8d5e5;
    --slate-400: #94a3b8;
    --slate-500: #707e93;
    --slate-600: #515e72;
    --slate-700: #354255;
    --slate-750: #2a3649;
    --slate-800: #1e293b;
    --slate-850: #162033;
    --slate-900: #0f172a;
    --slate-925: #0a1225;
    --slate-950: #04071b;
    --coral-50: #fff4f1;
    --coral-100: #ffe9e3;
    --coral-200: #ffd1c5;
    --coral-300: #ffb4a0;
    --coral-400: #ff8f74;
    --coral-500: #ff6b4a;
    --coral-600: #d73f1a;
    --coral-700: #be2e06;
    --coral-800: #a22000;
    --coral-900: #7b1403;
    --coral-950: #580000;
    --orbit-50: #eff8ff;
    --orbit-100: #e0f1ff;
    --orbit-200: #bde3ff;
    --orbit-300: #90d2ff;
    --orbit-400: #59c3ff;
    --orbit-500: #3aa8e2;
    --orbit-600: #158fc6;
    --orbit-700: #0077a5;
    --orbit-800: #005e82;
    --orbit-900: #004661;
    --orbit-950: #002c3f;
    --navy-50: #f4f7fc;
    --navy-100: #e9eff9;
    --navy-200: #d4def0;
    --navy-300: #bacae7;
    --navy-400: #9db4dd;
    --navy-500: #809dd2;
    --navy-600: #6484c2;
    --navy-700: #4b6cab;
    --navy-800: #35548f;
    --navy-900: #17346e;
    --navy-950: #0e2450;
    --green-200: #a2f4b6;
    --green-300: #75e594;
    --green-400: #44d272;
    --green-500: #22c55e;
    --green-600: #00a043;
    --green-700: #008433;
    --green-800: #006924;
    --green-900: #004e16;
    --amber-200: #ffd5a2;
    --amber-300: #feba61;
    --amber-400: #f09f24;
    --amber-500: #f59e0b;
    --amber-600: #b87300;
    --amber-700: #995e00;
    --amber-800: #7a4900;
    --amber-900: #5d3400;
    --crimson-200: #ffceda;
    --crimson-300: #ffafc4;
    --crimson-400: #ff87ab;
    --crimson-500: #f44588;
    --crimson-600: #d92b73;
    --crimson-700: #c72268;
    --crimson-800: #a60653;
    --crimson-900: #80003d;
    --violet-200: #ded7ff;
    --violet-300: #cbbfff;
    --violet-400: #b6a2ff;
    --violet-500: #a283ff;
    --violet-600: #8e61f7;
    --violet-700: #754bd3;
    --violet-800: #5d37ad;
    --violet-900: #452685;
    --cyan-200: #9cecfc;
    --cyan-300: #6adcf1;
    --cyan-400: #22d3ee;
    --cyan-500: #00b0c8;
    --cyan-600: #0096aa;
    --cyan-700: #007b8d;
    --cyan-800: #00616f;
    --cyan-900: #004853;
    --orange-200: #ffd4ae;
    --orange-300: #feb979;
    --orange-400: #f59e4b;
    --orange-500: #da852e;
    --orange-600: #bf6e10;
    --orange-700: #a15800;
    --orange-800: #814400;
    --orange-900: #623000;
    --teal-200: #a5eee1;
    --teal-300: #79dfcf;
    --teal-400: #47cbb9;
    --teal-500: #14b8a6;
    --teal-600: #009a8b;
    --teal-700: #007f72;
    --teal-800: #00645a;
    --teal-900: #004b42;
    --indigo-200: #d4dbff;
    --indigo-300: #bbc5ff;
    --indigo-400: #9fabff;
    --indigo-500: #8590fd;
    --indigo-600: #6f79e0;
    --indigo-700: #5a61bf;
    --indigo-800: #464b9b;
    --indigo-900: #323777;
}
}
@layer sedna.tokens {
:root :where([data-variant]),
:root {
    --color-scheme: dark;
    --picker-invert: 1;
    --bg:              var(--slate-900);
    --bg-elevated:     var(--slate-800);
    --bg-hover:        var(--slate-750);
    --fg:              var(--slate-50);
    --fg-soft:         var(--slate-300);
    --muted:           var(--slate-400);
    --placeholder:     var(--muted);
    --border:          var(--slate-700);
    --border-strong:   var(--slate-600);
    --border-hover:    var(--slate-500);
    --divider:         color-mix(in srgb, var(--white) 6%, transparent);
    --card-bg:         var(--slate-800);
    --surface-soft:    color-mix(in srgb, var(--white) 3%, transparent);
    --surface-strong:  color-mix(in srgb, var(--white) 5%, transparent);
    --surface-app:     var(--bg);
    --surface-chrome:  var(--sidebar-bg);
    --surface-content: var(--bg);
    --surface-raised-1: var(--card-bg);
    --surface-raised-2: var(--slate-750);
    --surface-raised-3: var(--slate-700);
    --on-solid:        var(--white);
    --badge-cyan-active: color-mix(in srgb, var(--badge-cyan-fg), var(--badge-cyan-bg) 25%);
    --badge-cyan-bg-active: color-mix(in srgb, var(--badge-cyan-bg), var(--badge-cyan-fg) 18%);
    --badge-cyan-bg-hover: color-mix(in srgb, var(--badge-cyan-bg), var(--badge-cyan-fg) 10%);
    --badge-cyan-hover: color-mix(in srgb, var(--badge-cyan-fg), var(--badge-cyan-bg) 15%);
    --badge-orange-active: color-mix(in srgb, var(--badge-orange-fg), var(--badge-orange-bg) 25%);
    --badge-orange-bg-active: color-mix(in srgb, var(--badge-orange-bg), var(--badge-orange-fg) 18%);
    --badge-orange-bg-hover: color-mix(in srgb, var(--badge-orange-bg), var(--badge-orange-fg) 10%);
    --badge-orange-hover: color-mix(in srgb, var(--badge-orange-fg), var(--badge-orange-bg) 15%);
    --badge-teal-active: color-mix(in srgb, var(--badge-teal-fg), var(--badge-teal-bg) 25%);
    --badge-teal-bg-active: color-mix(in srgb, var(--badge-teal-bg), var(--badge-teal-fg) 18%);
    --badge-teal-bg-hover: color-mix(in srgb, var(--badge-teal-bg), var(--badge-teal-fg) 10%);
    --badge-teal-hover: color-mix(in srgb, var(--badge-teal-fg), var(--badge-teal-bg) 15%);
    --danger-active: color-mix(in srgb, var(--danger-solid), var(--danger-fg) 25%);
    --danger-hover: color-mix(in srgb, var(--danger-solid), var(--danger-fg) 15%);
    --go-bg-active: color-mix(in srgb, var(--go-bg), var(--go-solid) 20%);
    --go-bg-hover: color-mix(in srgb, var(--go-bg), var(--go-solid) 12%);
    --info-active: color-mix(in srgb, var(--info-solid), var(--info-fg) 25%);
    --info-bg-active: color-mix(in srgb, var(--info-bg), var(--info-solid) 20%);
    --info-bg-hover: color-mix(in srgb, var(--info-bg), var(--info-solid) 12%);
    --info-hover: color-mix(in srgb, var(--info-solid), var(--info-fg) 15%);
    --secret-active: color-mix(in srgb, var(--secret-fg), var(--secret-bg) 25%);
    --secret-bg-active: color-mix(in srgb, var(--secret-bg), var(--secret-fg) 18%);
    --secret-bg-hover: color-mix(in srgb, var(--secret-bg), var(--secret-fg) 10%);
    --secret-hover: color-mix(in srgb, var(--secret-fg), var(--secret-bg) 15%);
    --on-viz:          var(--slate-900);
    --redacted:        var(--crimson-400);
    --brand:            var(--coral-600);
    --brand-hover:      var(--coral-700);
    --brand-active:     var(--coral-800);
    --brand-soft:       var(--coral-500);
    --brand-text:       var(--coral-400);
    --qr-brand-ink:     color-mix(in srgb, var(--brand) 45%, var(--black));
    --state-accent:     var(--brand);
    --viz-1: var(--brand);
    --viz-2: var(--cyan-600);
    --viz-3: var(--orange-400);
    --viz-4: var(--teal-400);
    --viz-5: var(--violet-500);
    --viz-6: var(--indigo-300);
    --viz-previous: var(--slate-400);
    --heat-0: var(--progress-track);
    --heat-1: var(--orbit-800);
    --heat-2: var(--orbit-600);
    --heat-3: var(--orbit-400);
    --heat-4: var(--orbit-200);
    --brand-tint:      color-mix(in srgb, var(--brand) 14%, transparent);
    --brand-tint-strong: color-mix(in srgb, var(--brand) 24%, transparent);
    --focus-ring:       var(--brand-soft);
    --brand-ring:       color-mix(in srgb, var(--brand) 50%, transparent);
    --brand-ring-soft:  color-mix(in srgb, var(--brand) 40%, transparent);
    --brand-ring-check: color-mix(in srgb, var(--brand) 35%, transparent);
    --brand-glow:       color-mix(in srgb, var(--brand) 18%, transparent);
    --brand-edge:       var(--brand-soft);
    --accent:           var(--orbit-400);
    --selected:         var(--brand);
    --tab-indicator:    var(--selected);
    --field-border-focus: var(--brand-soft);
    --field-border-danger: var(--crimson-500);
    --field-border-warn:   var(--amber-500);
    --control-on:         var(--brand);
    --rating-on:          var(--field-border-warn);
    --rating-off:         var(--control-border);
    --disabled-fg:     var(--muted);
    --disabled-bg:     var(--surface-soft);
    --disabled-border: var(--border);
    --sidebar-bg:      var(--slate-900);
    --sidebar-border:  var(--slate-800);
    --sidebar-fg:      var(--slate-200);
    --sidebar-muted:   var(--muted);
    --sidebar-active:  var(--coral-600);
    --sidebar-hover:   var(--slate-800);
    --topbar-bg:       var(--bg-elevated);
    --topbar-fg:       var(--fg);
    --topbar-muted:    var(--muted);
    --topbar-hover:    var(--bg-hover);
    --topbar-border:   var(--border);
    --go-solid:   var(--green-700);
    --go-hover:   var(--green-800);
    --go-active:  var(--green-900);
    --go-bg:      color-mix(in srgb, var(--green-500) 12%, transparent);
    --go-border:  var(--green-800);
    --go-fg:      var(--green-400);
    --go-ring:    color-mix(in srgb, var(--green-500) 50%, transparent);
    --warn-solid:      var(--amber-700);
    --warn-bg:         color-mix(in srgb, var(--amber-500) 12%, transparent);
    --warn-border:     var(--amber-800);
    --warn-fg:         var(--amber-300);
    --danger-solid:         var(--crimson-700);
    --danger-bg:            color-mix(in srgb, var(--crimson-900) 15%, transparent);
    --danger-bg-hover:      color-mix(in srgb, var(--crimson-800) 25%, transparent);
    --danger-bg-active:     color-mix(in srgb, var(--crimson-800) 35%, transparent);
    --danger-border:        color-mix(in srgb, var(--crimson-800) 60%, transparent);
    --danger-border-strong: var(--crimson-800);
    --danger-fg:            var(--crimson-400);
    --danger-ring:          color-mix(in srgb, var(--crimson-500) 40%, transparent);
    --info-bg:      color-mix(in srgb, var(--orbit-400) 12%, transparent);
    --info-border:  var(--orbit-800);
    --info-fg:      var(--orbit-300);
    --info-solid:   var(--orbit-700);
    --info-on-solid: var(--on-solid);
    --info-ring:    color-mix(in srgb, var(--orbit-400) 50%, transparent);
    --flow-light: var(--info-fg);
    --flow-line:  var(--info-border);
    --flow-tint:  var(--info-bg);
    --flow-glow:  var(--info-ring);
    --secret-bg:     color-mix(in srgb, var(--violet-600) 12%, transparent);
    --secret-border: var(--violet-800);
    --secret-fg:     var(--violet-300);
    --presence-out-of-office: var(--violet-600);
    --badge-cyan-bg:     color-mix(in srgb, var(--cyan-400) 15%, transparent);
    --badge-cyan-border: var(--cyan-800);
    --badge-cyan-fg:     var(--cyan-300);
    --badge-orange-bg:     color-mix(in srgb, var(--orange-400) 15%, transparent);
    --badge-orange-border: var(--orange-800);
    --badge-orange-fg:     var(--orange-300);
    --badge-teal-bg:     color-mix(in srgb, var(--teal-500) 15%, transparent);
    --badge-teal-border: var(--teal-800);
    --badge-teal-fg:     var(--teal-300);
    --sev-1-solid:  var(--crimson-800);
    --sev-1-bg:     var(--crimson-800);
    --sev-1-border: var(--crimson-700);
    --sev-1-fg:     var(--on-solid);
    --sev-2-solid:  var(--orange-700);
    --sev-2-bg:     color-mix(in srgb, var(--orange-400) 28%, transparent);
    --sev-2-border: var(--orange-700);
    --sev-2-fg:     var(--orange-200);
    --sev-3-solid:  var(--amber-600);
    --sev-3-bg:     color-mix(in srgb, var(--amber-500) 20%, transparent);
    --sev-3-border: var(--amber-800);
    --sev-3-fg:     var(--amber-300);
    --sev-4-solid:  var(--orbit-500);
    --sev-4-bg:     color-mix(in srgb, var(--orbit-400) 13%, transparent);
    --sev-4-border: var(--orbit-800);
    --sev-4-fg:     var(--orbit-300);
    --sev-5-solid:  var(--slate-400);
    --sev-5-bg:     color-mix(in srgb, var(--slate-400) 8%, transparent);
    --sev-5-border: var(--slate-700);
    --sev-5-fg:     var(--slate-300);
    --badge-bg:      color-mix(in srgb, var(--white) 7%, transparent);
    --table-head-bg: color-mix(in srgb, var(--white) 4%, transparent);
    --skeleton-bg:    color-mix(in srgb, var(--white) 6%, transparent);
    --skeleton-sheen: color-mix(in srgb, var(--white) 11%, transparent);
    --progress-track: color-mix(in srgb, var(--white) 8%, transparent);
    --btn-active-bg: var(--slate-850);
    --code-fg:       var(--indigo-300);
    --code-bg:       color-mix(in srgb, var(--indigo-500) 10%, transparent);
    --backdrop:      color-mix(in srgb, var(--black) 65%, transparent);
    --overlay:       color-mix(in srgb, var(--slate-900) 66%, transparent);
    --spotlight-dim: color-mix(in srgb, var(--slate-950) 62%, transparent);
    --tip-bg:        var(--slate-925);
    --tip-border:    var(--slate-600);
    --tip-fg:        var(--slate-50);
    --scrollbar:       var(--slate-700);
    --scrollbar-hover: var(--slate-600);
    --scroll-shade:    color-mix(in srgb, var(--black) 30%, transparent);
    --shadow-topbar:    0 3px 8px color-mix(in srgb, var(--black) 28%, transparent);
    --shadow-bottombar: 0 -3px 8px color-mix(in srgb, var(--black) 28%, transparent);
    --shadow-nav-tools: 0 -6px 12px 0 color-mix(in srgb, var(--black) 18%, transparent);
    --shadow-modal:     0 24px 64px color-mix(in srgb, var(--black) 50%, transparent);
    --shadow-tip:       0 8px 22px color-mix(in srgb, var(--black) 42%, transparent);
    --shadow-flyout:    0 6px 18px color-mix(in srgb, var(--black) 38%, transparent);
    --shadow-dropdown:  0 10px 30px color-mix(in srgb, var(--black) 30%, transparent);
    --shadow-float:     0 10px 30px color-mix(in srgb, var(--black) 34%, transparent);
    --shadow-pop:       0 14px 40px color-mix(in srgb, var(--black) 45%, transparent);
    --shadow-tile:      0 0 0 1px var(--border), 0 12px 32px color-mix(in srgb, var(--black) 38%, transparent);
    --shadow-edge-start:  6px 0 8px -6px color-mix(in srgb, var(--black) 45%, transparent);
    --shadow-edge-end:   -6px 0 8px -6px color-mix(in srgb, var(--black) 45%, transparent);
    --agent-from:  var(--coral-500);
    --agent-to:    var(--orbit-400);
    --agent-trail: color-mix(in srgb, var(--fg) 30%, transparent);
    --agent-tint:  color-mix(in srgb, var(--agent-to) 12%, transparent);
    --agent-edge:  color-mix(in srgb, var(--agent-to) 35%, transparent);
    --agent-glow:      color-mix(in srgb, var(--agent-to) 55%, transparent);
    --agent-glow-dim:  color-mix(in srgb, var(--agent-to) 25%, transparent);
    --agent-skeleton-cool: color-mix(in srgb, var(--agent-to) 24%, var(--skeleton-bg));
    --agent-skeleton-warm: color-mix(in srgb, var(--agent-from) 24%, var(--skeleton-bg));
    --agent-sphere-ring:  color-mix(in srgb, var(--agent-to) 30%, transparent);
    --agent-sphere-halo:  color-mix(in srgb, var(--agent-to) 70%, transparent);
}
:root {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: "SF Mono", Menlo, Consolas, monospace;
    --state-motion:     paused;
    --row-hover-accent: transparent;
    --field-border:       var(--slate-500);
    --control-border:     var(--field-border);
    --disabled-opacity: 0.4;
    --topbar-height:   44px;
    --topbar-panel-gap: var(--space-2);
    --modal-head-bg:   transparent;
    --modal-foot-bg:   transparent;
    --card-head-bg:    transparent;
    --warn-hover:      var(--amber-800);
    --warn-active:     var(--amber-900);
    --warn-bg-hover:   color-mix(in srgb, var(--amber-500) 20%, transparent);
    --warn-bg-active:  color-mix(in srgb, var(--amber-500) 28%, transparent);
    --warn-ring:       color-mix(in srgb, var(--amber-500) 40%, transparent);
    --warn-ring-solid: color-mix(in srgb, var(--amber-500) 50%, transparent);
    --media-bg:      var(--black);
    --media-scrim:   color-mix(in srgb, var(--black) 62%, transparent);
    --hero-scrim-strong: color-mix(in srgb, var(--black) 82%, transparent);
    --hero-scrim-soft:   color-mix(in srgb, var(--black) 18%, transparent);
    --checker-size:  8px;
    --reconnect-warn-bg:     color-mix(in srgb, var(--amber-900) 72%, var(--slate-950));
    --reconnect-warn-border: var(--amber-600);
    --reconnect-warn-fg:     var(--amber-200);
    --reconnect-fail-bg:     color-mix(in srgb, var(--crimson-900) 72%, var(--slate-950));
    --reconnect-fail-border: var(--crimson-700);
    --reconnect-fail-fg:     var(--crimson-400);
    --space-1:  2px;
    --space-2:  4px;
    --space-3:  6px;
    --space-4:  8px;
    --space-5:  10px;
    --space-6:  12px;
    --space-7:  16px;
    --space-8:  20px;
    --space-9:  24px;
    --space-10: 32px;
    --space-11: 40px;
    --control-height-sm: 28px;
    --control-height:    36px;
    --control-height-lg: 44px;
    --touch-target:      32px;
    --btn-gap: var(--space-4);
    --choice-inset-check:  calc(15px + var(--space-4));
    --choice-inset-switch: calc(34px + var(--space-5));
    --code-clamp: 360px;
    --text-1:  10px;
    --text-2:  11px;
    --text-3:  12px;
    --text-4:  13px;
    --text-5:  14px;
    --text-6:  15px;
    --text-7:  16px;
    --text-8:  18px;
    --text-9:  22px;
    --text-10: 26px;
    --text-11: 40px;
    --text-field-touch: 16px;
    --motion-fast: 0.12s;
    --motion-mid:  0.18s;
    --motion-slow: 0.25s;
    --spin-duration:     0.6s;
    --progress-duration: 1.1s;
    --skeleton-duration: 1.4s;
    --pulse-duration:    1.6s;
    --shimmer-duration:  2.2s;
    --caret-duration:    1s;
    --flow-duration:     1.6s;
    --roll-duration:     1.2s;
    --stagger-step:      30ms;
    --hover-delay:       400ms;
    --radius-control: 5px;
    --radius-surface: 6px;
    --radius-panel:   8px;
    --radius-inner:   4px;
    --radius-small:   3px;
    --radius-pill:    999px;
    --cap-gap: calc((1lh - 1cap) / 2);
    --cell-pad-y: 8px;
    --cell-pad-x: 12px;
    --card-pad-block:  var(--space-6);
    --card-pad-inline: var(--space-7);
    --list-pad-block:  var(--space-5);
    --list-pad-inline: var(--space-6);
    --list-gap:        var(--space-4);
    --page-rhythm:     var(--space-7);
    --page-pad:        var(--space-9);
    --page-banner-pad-block: var(--space-5);
    --list-lines: 1;
    --kv-key-width: 30%;
    --panel-placement: block-end;
    --level: initial;
    --agent-sedna-1:   var(--coral-400);  --agent-sedna-2:   var(--violet-500); --agent-sedna-3:   var(--orbit-400);
    --agent-aurora-1:  var(--teal-300);   --agent-aurora-2:  var(--cyan-600);   --agent-aurora-3:  var(--violet-400);
    --agent-ember-1:   var(--amber-300);  --agent-ember-2:   var(--coral-500);  --agent-ember-3:   var(--crimson-600);
    --agent-orbit-1:   var(--orbit-200);  --agent-orbit-2:   var(--orbit-500);  --agent-orbit-3:   var(--indigo-600);
    --agent-nebula-1:  var(--violet-300); --agent-nebula-2:  var(--indigo-500); --agent-nebula-3:  var(--coral-400);
    --agent-glacier-1: var(--slate-100);  --agent-glacier-2: var(--orbit-300);  --agent-glacier-3: var(--slate-500);
    --agent-sedna-glow:   color-mix(in srgb, var(--violet-500) 55%, transparent);
    --agent-aurora-glow:  color-mix(in srgb, var(--cyan-600) 55%, transparent);
    --agent-ember-glow:   color-mix(in srgb, var(--coral-500) 55%, transparent);
    --agent-orbit-glow:   color-mix(in srgb, var(--orbit-500) 55%, transparent);
    --agent-nebula-glow:  color-mix(in srgb, var(--indigo-500) 55%, transparent);
    --agent-glacier-glow: color-mix(in srgb, var(--orbit-300) 55%, transparent);
    --agent-sphere-gloss: color-mix(in srgb, var(--white) 42%, transparent);
    --agent-sphere-shade: color-mix(in srgb, var(--black) 26%, transparent);
    --agent-sphere-rim:   color-mix(in srgb, var(--white) 14%, transparent);
    --mochi-pink:  rgb(244, 166, 188); --mochi-pink-limb:  rgb(227, 141, 166);
    --mochi-mint:  rgb(142, 209, 176); --mochi-mint-limb:  rgb(116, 188, 153);
    --mochi-sky:   rgb(157, 184, 242); --mochi-sky-limb:   rgb(129, 157, 219);
    --mochi-lemon: rgb(255, 210, 122); --mochi-lemon-limb: rgb(237, 185, 86);
    --mochi-lilac: rgb(198, 173, 238); --mochi-lilac-limb: rgb(171, 143, 218);
    --mochi-coral: rgb(255, 154, 130); --mochi-coral-limb: rgb(240, 124, 99);
    --mochi-ink:     rgb(42, 39, 51);
    --mochi-band:    rgb(58, 64, 82);
    --mochi-leg-hi:  rgb(74, 81, 100);
    --mochi-leg-mid: rgb(52, 58, 75);
    --mochi-leg-lo:  rgb(38, 42, 54);
    --mochi-blush:   rgb(242, 143, 170);
    --mochi-tongue:  rgb(240, 122, 151);
    --mochi-shade:   rgb(27, 21, 48);
    --mochi-light:   var(--white);
    --mochi-dark:    var(--black);
    --mochi-bubble:  var(--white);
    --mochi-bubble-edge: rgb(217, 210, 214);
    --mochi-sweat:   rgb(169, 210, 242);
    --mochi-zzz:     rgb(154, 144, 176);
    --mochi-deck:    rgb(90, 97, 117);
    --mochi-spark:   rgb(255, 200, 92);
    --page-max: 1800px;
    --safe-block-start:  env(safe-area-inset-top, 0px);
    --safe-block-end:    env(safe-area-inset-bottom, 0px);
    --safe-inline-start: env(safe-area-inset-left, 0px);
    --safe-inline-end:   env(safe-area-inset-right, 0px);
}
:root[dir="rtl"] {
    --safe-inline-start: env(safe-area-inset-right, 0px);
    --safe-inline-end:   env(safe-area-inset-left, 0px);
}
}
@layer sedna.tokens {
:root [data-variant="light"],
:root[data-variant="light"] {
    --color-scheme:   light;
    --picker-invert:  0;
    --bg:             var(--slate-50);
    --bg-elevated:    var(--white);
    --bg-hover:       var(--slate-100);
    --fg:             var(--slate-900);
    --fg-soft:        var(--slate-700);
    --muted:          var(--slate-600);
    --border:         var(--slate-300);
    --border-strong:  var(--slate-400);
    --border-hover:   var(--slate-500);
    --divider:        color-mix(in srgb, var(--slate-900) 7%, transparent);
    --card-bg:        var(--white);
    --surface-soft:   color-mix(in srgb, var(--slate-900) 3%, transparent);
    --surface-strong: color-mix(in srgb, var(--slate-900) 5.5%, transparent);
    --surface-raised-2: var(--slate-100);
    --surface-raised-3: var(--slate-200);
    --redacted:       var(--crimson-700);
    --brand-soft: var(--coral-600);
    --brand-text: var(--coral-800);
    --brand-tint: color-mix(in srgb, var(--brand) 10%, transparent);
    --brand-tint-strong: color-mix(in srgb, var(--brand) 20%, transparent);
    --brand-edge: var(--brand);
    --accent:     var(--orbit-700);
    --sidebar-bg:     var(--white);
    --sidebar-border: var(--slate-200);
    --sidebar-fg:     var(--slate-700);
    --sidebar-hover:  var(--slate-100);
    --go-bg:     color-mix(in srgb, var(--green-500) 10%, transparent);
    --go-border: var(--green-300);
    --go-fg:     var(--green-800);
    --viz-2: var(--cyan-600);
    --viz-3: var(--orange-800);
    --viz-4: var(--teal-900);
    --viz-5: var(--violet-900);
    --viz-6: var(--indigo-700);
    --viz-previous: var(--slate-500);
    --on-viz: var(--white);
    --heat-1: var(--orbit-300);
    --heat-2: var(--orbit-500);
    --heat-3: var(--orbit-700);
    --heat-4: var(--orbit-900);
    --warn-bg:     color-mix(in srgb, var(--amber-500) 10%, transparent);
    --warn-border: var(--amber-300);
    --warn-fg:     var(--amber-800);
    --danger-solid: var(--crimson-700);
    --danger-bg:            color-mix(in srgb, var(--crimson-700) 8%, transparent);
    --danger-bg-hover:      color-mix(in srgb, var(--crimson-700) 14%, transparent);
    --danger-bg-active:     color-mix(in srgb, var(--crimson-700) 20%, transparent);
    --danger-border:        var(--crimson-300);
    --danger-border-strong: var(--crimson-700);
    --field-border-danger:  var(--crimson-700);
    --field-border-warn:    var(--amber-700);
    --danger-fg:            var(--crimson-800);
    --danger-ring:          color-mix(in srgb, var(--crimson-700) 35%, transparent);
    --info-bg:     color-mix(in srgb, var(--orbit-400) 8%, transparent);
    --info-border: var(--orbit-300);
    --info-fg:     var(--orbit-800);
    --info-solid:  var(--orbit-700);
    --info-ring:   color-mix(in srgb, var(--orbit-400) 40%, transparent);
    --secret-bg:     color-mix(in srgb, var(--violet-600) 8%, transparent);
    --secret-border: var(--violet-300);
    --secret-fg:     var(--violet-700);
    --badge-cyan-bg:     color-mix(in srgb, var(--cyan-400) 8%, transparent);
    --badge-cyan-border: var(--cyan-300);
    --badge-cyan-fg:     var(--cyan-800);
    --badge-orange-bg:     color-mix(in srgb, var(--orange-400) 8%, transparent);
    --badge-orange-border: var(--orange-300);
    --badge-orange-fg:     var(--orange-700);
    --badge-teal-bg:     color-mix(in srgb, var(--teal-500) 8%, transparent);
    --badge-teal-border: var(--teal-300);
    --badge-teal-fg:     var(--teal-800);
    --sev-1-solid:  var(--crimson-700);
    --sev-1-bg:     var(--crimson-700);
    --sev-1-border: var(--crimson-700);
    --sev-1-fg:     var(--on-solid);
    --sev-2-solid:  var(--orange-700);
    --sev-2-bg:     color-mix(in srgb, var(--orange-500) 22%, transparent);
    --sev-2-border: var(--orange-300);
    --sev-2-fg:     var(--orange-800);
    --sev-3-solid:  var(--amber-600);
    --sev-3-bg:     color-mix(in srgb, var(--amber-500) 18%, transparent);
    --sev-3-border: var(--amber-300);
    --sev-3-fg:     var(--amber-800);
    --sev-4-solid:  var(--orbit-600);
    --sev-4-bg:     color-mix(in srgb, var(--orbit-400) 14%, transparent);
    --sev-4-border: var(--orbit-300);
    --sev-4-fg:     var(--orbit-800);
    --sev-5-solid:  var(--slate-500);
    --sev-5-bg:     color-mix(in srgb, var(--slate-400) 10%, transparent);
    --sev-5-border: var(--slate-300);
    --sev-5-fg:     var(--slate-600);
    --badge-bg:      color-mix(in srgb, var(--slate-900) 4%, transparent);
    --table-head-bg: color-mix(in srgb, var(--slate-900) 3%, transparent);
    --agent-to:       var(--orbit-600);
    --skeleton-bg:    color-mix(in srgb, var(--slate-900) 6%, transparent);
    --skeleton-sheen: color-mix(in srgb, var(--slate-900) 11%, transparent);
    --progress-track: color-mix(in srgb, var(--slate-900) 8%, transparent);
    --btn-active-bg: var(--slate-300);
    --code-fg:       var(--indigo-800);
    --code-bg:       color-mix(in srgb, var(--indigo-700) 8%, transparent);
    --backdrop:      color-mix(in srgb, var(--slate-900) 35%, transparent);
    --overlay:       color-mix(in srgb, var(--slate-50) 66%, transparent);
    --spotlight-dim: color-mix(in srgb, var(--slate-900) 42%, transparent);
    --tip-bg:        var(--white);
    --tip-border:    var(--slate-300);
    --tip-fg:        var(--slate-900);
    --scrollbar:       var(--slate-300);
    --scrollbar-hover: var(--slate-400);
    --scroll-shade:    color-mix(in srgb, var(--slate-900) 16%, transparent);
    --shadow-topbar:    0 3px 8px color-mix(in srgb, var(--slate-900) 10%, transparent);
    --shadow-bottombar: 0 -3px 8px color-mix(in srgb, var(--slate-900) 10%, transparent);
    --shadow-nav-tools: 0 -6px 12px 0 color-mix(in srgb, var(--slate-900) 6%, transparent);
    --shadow-modal:     0 24px 64px color-mix(in srgb, var(--slate-900) 22%, transparent);
    --shadow-tip:       0 8px 22px color-mix(in srgb, var(--slate-900) 22%, transparent);
    --shadow-flyout:    0 6px 18px color-mix(in srgb, var(--slate-900) 16%, transparent);
    --shadow-dropdown:  0 10px 30px color-mix(in srgb, var(--slate-900) 14%, transparent);
    --shadow-pop:       0 14px 40px color-mix(in srgb, var(--slate-900) 20%, transparent);
    --shadow-float:     0 10px 30px color-mix(in srgb, var(--slate-900) 16%, transparent);
    --shadow-tile:      0 0 0 1px var(--border), 0 12px 32px color-mix(in srgb, var(--slate-900) 18%, transparent);
    --shadow-edge-start:  6px 0 8px -6px color-mix(in srgb, var(--slate-900) 18%, transparent);
    --shadow-edge-end:   -6px 0 8px -6px color-mix(in srgb, var(--slate-900) 18%, transparent);
}
}
@layer sedna.tokens {
:root[data-cvd="1"] :where([data-variant]),
:root[data-cvd="1"] {
    --go-solid:  var(--orbit-700);
    --go-hover:  var(--orbit-800);
    --go-active: var(--orbit-900);
    --go-bg:     color-mix(in srgb, var(--orbit-400) 14%, transparent);
    --go-border: var(--orbit-800);
    --go-fg:     var(--orbit-300);
    --go-ring:   color-mix(in srgb, var(--orbit-400) 50%, transparent);
    --danger-solid: var(--crimson-800);
    --danger-fg:    var(--crimson-300);
    --sev-1-solid:  var(--crimson-900);
    --sev-1-bg:     var(--crimson-900);
    --sev-1-border: var(--crimson-800);
    --sev-2-solid:  var(--violet-700);
    --sev-2-bg:     color-mix(in srgb, var(--violet-500) 28%, transparent);
    --sev-2-border: var(--violet-700);
    --sev-2-fg:     var(--violet-300);
}
:root[data-cvd="1"] [data-variant="light"],
:root[data-variant="light"][data-cvd="1"] {
    --go-bg:     color-mix(in srgb, var(--orbit-400) 8%, transparent);
    --go-border: var(--orbit-300);
    --go-fg:     var(--orbit-800);
    --danger-fg: var(--crimson-800);
    --sev-2-bg:     color-mix(in srgb, var(--violet-700) 22%, transparent);
    --sev-2-border: var(--violet-300);
    --sev-2-fg:     var(--violet-800);
}
}
@layer sedna.tokens {
:root[data-contrast="more"] :where([data-variant]),
:root[data-contrast="more"] {
    --bg:              var(--black);
    --bg-elevated:     var(--slate-950);
    --bg-hover:        var(--slate-800);
    --fg:              var(--white);
    --fg-soft:         var(--white);
    --muted:           var(--slate-300);
    --border:          var(--slate-400);
    --border-strong:   var(--slate-300);
    --border-hover:    var(--white);
    --divider:         var(--slate-500);
    --card-bg:         var(--slate-950);
    --surface-soft:    var(--slate-900);
    --surface-strong:  var(--slate-800);
    --brand-soft:      var(--coral-400);
    --brand-text:      var(--coral-300);
    --brand-tint:      var(--coral-950);
    --brand-tint-strong: var(--coral-900);
    --accent:          var(--orbit-300);
    --sidebar-bg:      var(--black);
    --sidebar-border:  var(--slate-400);
    --sidebar-fg:      var(--white);
    --sidebar-hover:   var(--slate-700);
    --go-bg:      var(--green-900);
    --go-border:  var(--green-400);
    --go-fg:      var(--green-300);
    --warn-bg:     var(--amber-900);
    --warn-border: var(--amber-400);
    --warn-fg:     var(--amber-300);
    --danger-bg:            var(--crimson-900);
    --danger-border:        var(--crimson-400);
    --danger-border-strong: var(--crimson-300);
    --field-border-danger:  var(--crimson-300);
    --field-border-warn:    var(--amber-300);
    --danger-fg:            var(--crimson-300);
    --info-bg:     var(--orbit-950);
    --info-border: var(--orbit-300);
    --info-fg:     var(--orbit-200);
    --info-solid:  var(--orbit-300);
    --info-on-solid: var(--black);
    --secret-bg:     var(--violet-900);
    --secret-border: var(--violet-300);
    --secret-fg:     var(--violet-200);
    --sev-1-solid:  var(--crimson-800);
    --sev-1-bg:     var(--crimson-800);
    --sev-1-border: var(--crimson-300);
    --sev-1-fg:     var(--white);
    --sev-2-solid:  var(--orange-300);
    --sev-2-bg:     var(--orange-900);
    --sev-2-border: var(--orange-300);
    --sev-2-fg:     var(--orange-200);
    --sev-3-solid:  var(--amber-300);
    --sev-3-bg:     var(--amber-900);
    --sev-3-border: var(--amber-400);
    --sev-3-fg:     var(--amber-300);
    --sev-4-solid:  var(--orbit-300);
    --sev-4-bg:     var(--orbit-950);
    --sev-4-border: var(--orbit-300);
    --sev-4-fg:     var(--orbit-200);
    --sev-5-solid:  var(--slate-300);
    --sev-5-bg:     var(--slate-800);
    --sev-5-border: var(--slate-300);
    --sev-5-fg:     var(--slate-200);
    --badge-bg:      var(--slate-800);
    --table-head-bg: var(--slate-800);
    --badge-cyan-bg: var(--cyan-900);     --badge-cyan-border: var(--cyan-300);     --badge-cyan-fg: var(--cyan-200);
    --badge-orange-bg: var(--orange-900); --badge-orange-border: var(--orange-300); --badge-orange-fg: var(--orange-200);
    --badge-teal-bg: var(--teal-900);     --badge-teal-border: var(--teal-300);     --badge-teal-fg: var(--teal-200);
    --skeleton-bg:    var(--slate-800);
    --skeleton-sheen: var(--slate-700);
    --progress-track: var(--slate-700);
    --heat-1:         var(--orbit-700);
    --heat-2:         var(--orbit-500);
    --heat-3:         var(--orbit-300);
    --heat-4:         var(--orbit-100);
    --btn-active-bg:  var(--slate-700);
    --code-fg:        var(--indigo-200);
    --code-bg:        var(--indigo-900);
    --backdrop:       color-mix(in srgb, var(--black) 85%, transparent);
    --overlay:        color-mix(in srgb, var(--black) 85%, transparent);
    --scrollbar:       var(--slate-400);
    --scrollbar-hover: var(--slate-300);
}
:root[data-contrast="more"] [data-variant="light"],
:root[data-variant="light"][data-contrast="more"] {
    --bg:              var(--white);
    --bg-elevated:     var(--white);
    --bg-hover:        var(--slate-200);
    --fg:              var(--black);
    --fg-soft:         var(--black);
    --muted:           var(--slate-800);
    --border:          var(--slate-600);
    --border-strong:   var(--slate-800);
    --border-hover:    var(--black);
    --divider:         var(--slate-400);
    --card-bg:         var(--white);
    --surface-soft:    var(--slate-100);
    --surface-strong:  var(--slate-200);
    --brand-soft:      var(--coral-700);
    --brand-text:      var(--coral-900);
    --brand-tint:      var(--coral-200);
    --brand-tint-strong: var(--coral-300);
    --accent:          var(--orbit-800);
    --sidebar-bg:      var(--white);
    --sidebar-border:  var(--slate-600);
    --sidebar-fg:      var(--black);
    --sidebar-hover:   var(--slate-200);
    --go-bg:      var(--green-200);
    --go-border:  var(--green-800);
    --go-fg:      var(--green-900);
    --warn-bg:     var(--amber-200);
    --warn-border: var(--amber-800);
    --warn-fg:     var(--amber-900);
    --danger-bg:            var(--crimson-200);
    --danger-border:        var(--crimson-800);
    --danger-border-strong: var(--crimson-900);
    --field-border-danger:  var(--crimson-900);
    --field-border-warn:    var(--amber-900);
    --danger-fg:            var(--crimson-900);
    --info-bg:     var(--orbit-100);
    --info-border: var(--orbit-800);
    --info-fg:     var(--orbit-900);
    --info-solid:  var(--orbit-900);
    --info-on-solid: var(--on-solid);
    --secret-bg:     var(--violet-200);
    --secret-border: var(--violet-800);
    --secret-fg:     var(--violet-900);
    --sev-1-solid:  var(--crimson-800);
    --sev-1-bg:     var(--crimson-800);
    --sev-1-border: var(--crimson-900);
    --sev-1-fg:     var(--white);
    --sev-2-solid:  var(--orange-900);
    --sev-2-bg:     var(--orange-200);
    --sev-2-border: var(--orange-800);
    --sev-2-fg:     var(--orange-900);
    --sev-3-solid:  var(--amber-900);
    --sev-3-bg:     var(--amber-200);
    --sev-3-border: var(--amber-800);
    --sev-3-fg:     var(--amber-900);
    --sev-4-solid:  var(--orbit-900);
    --sev-4-bg:     var(--orbit-100);
    --sev-4-border: var(--orbit-800);
    --sev-4-fg:     var(--orbit-900);
    --sev-5-solid:  var(--slate-700);
    --sev-5-bg:     var(--slate-200);
    --sev-5-border: var(--slate-600);
    --sev-5-fg:     var(--slate-900);
    --badge-bg:      var(--slate-200);
    --table-head-bg: var(--slate-200);
    --badge-cyan-bg: var(--cyan-200);     --badge-cyan-border: var(--cyan-800);     --badge-cyan-fg: var(--cyan-900);
    --badge-orange-bg: var(--orange-200); --badge-orange-border: var(--orange-800); --badge-orange-fg: var(--orange-900);
    --badge-teal-bg: var(--teal-200);     --badge-teal-border: var(--teal-800);     --badge-teal-fg: var(--teal-900);
    --skeleton-bg:    var(--slate-200);
    --skeleton-sheen: var(--slate-300);
    --progress-track: var(--slate-300);
    --viz-previous:   var(--slate-600);
    --heat-1:         var(--orbit-400);
    --heat-2:         var(--orbit-600);
    --heat-3:         var(--orbit-800);
    --heat-4:         var(--orbit-950);
    --btn-active-bg:  var(--slate-400);
    --code-fg:        var(--indigo-900);
    --code-bg:        var(--indigo-200);
    --backdrop:       color-mix(in srgb, var(--black) 60%, transparent);
    --overlay:        color-mix(in srgb, var(--white) 90%, transparent);
    --tip-bg:          var(--white);
    --tip-border:      var(--slate-800);
    --tip-fg:          var(--black);
    --scrollbar:       var(--slate-500);
    --scrollbar-hover: var(--slate-700);
    --redacted:        var(--crimson-900);
}
@media (prefers-contrast: more) {
    :root :where([data-variant]),
    :root {
        --border:         var(--slate-400);
        --border-strong:  var(--slate-300);
        --divider:        var(--slate-500);
        --fg-soft:        var(--white);
        --muted:          var(--slate-300);
        --surface-soft:   var(--slate-900);
        --surface-strong: var(--slate-800);
    }
    :root [data-variant="light"],
    :root[data-variant="light"] {
        --border:         var(--slate-600);
        --border-strong:  var(--slate-800);
        --divider:        var(--slate-400);
        --fg-soft:        var(--black);
        --muted:          var(--slate-800);
        --surface-soft:   var(--slate-100);
        --surface-strong: var(--slate-200);
    }
}
}
@layer sedna.base {
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
html {
    color-scheme: var(--color-scheme);
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar) transparent;
}
:root [data-variant] {
    color-scheme: var(--color-scheme);
    color: var(--fg);
    scrollbar-color: var(--scrollbar) transparent;
}
body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-sans);
    font-size: var(--text-5);
    line-height: 1.5;
    overflow-wrap: break-word;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code {
    font-family: var(--font-mono);
    font-size: var(--text-4);
    color: var(--code-fg);
    background: var(--code-bg);
    padding: 1px var(--space-2);
    border-radius: var(--radius-small);
    overflow-wrap: anywhere;
}
ins,
del {
    padding-inline: var(--space-1);
    border-radius: var(--radius-small);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    text-decoration-thickness: from-font;
}
ins { color: var(--go-fg); background: var(--go-bg); text-decoration-line: underline; }
del { color: var(--danger-fg); background: var(--danger-bg); text-decoration-line: line-through; }
h1 { font-size: var(--text-9); margin: 0 0 var(--space-4); }
h2 { font-size: var(--text-7); margin: var(--space-9) 0 var(--space-4); }
p.lede { color: var(--muted); margin: 0 0 var(--space-7); }
:focus:not(:focus-visible) { outline: none; }
[tabindex="-1"]:not(a, area, button, input, select, textarea, summary, [contenteditable], [role]):focus-visible {
    outline: none;
}
@keyframes sedna-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
:where([class^="ri-"], [class*=" ri-"]) { line-height: 1; }
@property --row-line {
    syntax: '<length>';
    inherits: true;
    initial-value: 0px;
}
@property --line-cap {
    syntax: '<length>';
    inherits: true;
    initial-value: 0px;
}
:where(*:not(.badge, .stale)) { --line-cap: 1cap; }
:where(span, strong, b, em, small, time, abbr, cite, data, output, q, s, u, var):where(:not([class]), [class^="text-"], [class*=" text-"], [class^="sedna-"], [class*=" sedna-"]):not(:empty, :has(*)) {
    text-box: trim-both cap alphabetic;
    padding-block: var(--cap-gap);
}
}
@layer sedna.frame {
.layout {
    display: flex;
    height: 100dvh;
    padding-block-start: var(--safe-block-start);
    padding-inline: var(--safe-inline-start) var(--safe-inline-end);
    overflow: hidden;
}
.content { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.bare-layout {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    padding-block-start: var(--safe-block-start);
    padding-inline: var(--safe-inline-start) var(--safe-inline-end);
    overflow: hidden;
}
.bare-brand  { display: flex; align-items: center; gap: var(--space-5); padding: 0 var(--space-7); font-size: var(--text-6); }
.bare-brand .brand-logo { width: 28px; height: 28px; border-radius: var(--radius-surface); flex-shrink: 0; }
}
@layer sedna.frame {
.sidebar {
    --sidebar-width: 220px;
    --sidebar-width-collapsed: 56px;
    width: var(--sidebar-width);
    --surface-here: var(--sidebar-bg);
    --muted-here: var(--sidebar-muted);
    background: var(--sidebar-bg);
    color: var(--sidebar-fg);
    padding: 0;
    flex-shrink: 0;
    border-inline-end: 1px solid var(--sidebar-border);
    display: flex;
    flex-direction: column;
    overflow: clip;
    transition: width var(--motion-mid) ease-out;
    --sidebar-snap: 0s;
    --snap: var(--sidebar-snap) var(--motion-mid);
}
.sidebar > .brand,
.sidebar > .nav,
.sidebar > .nav-tools { min-width: var(--sidebar-width); }
.brand {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    height: var(--topbar-height);
    flex-shrink: 0;
    padding: 0 var(--space-7);
    border-bottom: 1px solid var(--sidebar-border);
    color: inherit;
    text-decoration: none;
}
.brand:hover { text-decoration: none; }
.brand-logo { width: 30px; height: 30px; border-radius: var(--radius-surface); flex-shrink: 0; overflow: hidden; }
.brand-logo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.brand-text { display: flex; flex-direction: column; line-height: round(1.1em, 2px); }
.brand-sub {
    display: block; font-size: var(--text-1); color: var(--sidebar-muted);
    text-transform: uppercase; letter-spacing: 0.06em; margin-top: var(--space-1);
}
.nav { --nav-indent: var(--space-7); display: flex; flex-direction: column; flex: 1; overflow: hidden; }
.nav-scroll { flex: 1; overflow-y: auto; min-height: 0; }
.nav-scroll > :first-child { margin-block-start: var(--space-2); }
.nav-section { --nav-indent: var(--space-9); margin-bottom: var(--space-2); }
.nav-section-label {
    display: block;
    padding: var(--space-4) var(--space-7) var(--space-2);
    font-size: var(--text-1);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted-here, var(--muted));
    pointer-events: none;
}
.nav-link {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-7);
    padding-inline-start: var(--nav-indent);
    color: var(--sidebar-fg);
    font-size: var(--text-4);
}
.nav-link i { font-size: var(--text-7); flex-shrink: 0; opacity: 0.6; }
.nav-link:hover { background: var(--sidebar-hover); text-decoration: none; }
.nav-link:hover i { opacity: 1; }
.nav-link.active { background: var(--brand-tint); color: var(--brand-text); }
.nav-link.active i { opacity: 1; color: var(--brand-text); }
.nav-link .nav-link-ext { margin-inline-start: auto; font-size: var(--text-2); opacity: 0.35; }
.nav-count {
    margin-inline-start: auto;
    background: var(--brand);
    color: var(--on-solid);
    border-radius: var(--radius-pill);
    font-size: var(--text-2); font-weight: 600; line-height: round(1.6em, 2px);
    padding: 0 var(--space-4); min-width: 18px; text-align: center;
}
.nav-tools {
    flex-shrink: 0;
    border-top: 1px solid var(--sidebar-border);
    padding: var(--space-2) 0 var(--space-4);
    box-shadow: var(--shadow-nav-tools);
}
.nav-link-tool { font-size: var(--text-3); color: var(--sidebar-muted); }
.nav-link-tool i { opacity: 0.75; }
.nav-link-tool:hover { color: var(--sidebar-fg); }
.nav-link-tool:hover i { opacity: 1; }
.nav-tools-sep { border: none; border-top: 1px solid var(--sidebar-border); margin: var(--space-3) var(--space-8); }
.nav-status-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: var(--space-3) var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-inline-start-width: 3px;
    border-radius: var(--radius-surface);
    text-decoration: none;
    transition: background var(--motion-fast), border-color var(--motion-fast);
}
.nav-status-card:hover { background: var(--bg-hover); text-decoration: none; }
.nav-status-label {
    font-size: var(--text-1); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--sidebar-muted);
}
.nav-status-row { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-3); font-weight: 500; }
.nav-status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--border-hover); }
.nav-status-state { flex: 1; }
.nav-status-card--ok   { border-inline-start-color: var(--go-solid); }
.nav-status-card--ok   .nav-status-dot   { background: var(--go-solid); box-shadow: 0 0 5px var(--go-ring); }
.nav-status-card--ok   .nav-status-state { color: var(--go-fg); }
.nav-status-card--fail { border-inline-start-color: var(--danger-solid); }
.nav-status-card--fail .nav-status-dot   { background: var(--danger-solid); }
.nav-status-card--fail .nav-status-state { color: var(--danger-fg); }
.nav-count { text-box: trim-both cap alphabetic; padding-block: var(--cap-gap); }
.nav-status-state { text-box: trim-both cap alphabetic; padding-block: var(--cap-gap); }
}
@layer sedna.frame {
.sidebar.collapsed { width: var(--sidebar-width-collapsed); }
.sidebar.collapsed > .brand,
.sidebar.collapsed > .nav,
.sidebar.collapsed > .nav-tools { min-width: 0; transition: min-width var(--snap); }
.sidebar.collapsed .brand {
    justify-content: center; padding: 0; gap: 0;
    transition: justify-content var(--snap) allow-discrete, padding var(--snap), gap var(--snap);
}
.sidebar.collapsed .brand-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    transition: position var(--snap) allow-discrete, width var(--snap) allow-discrete, height var(--snap) allow-discrete, overflow var(--snap) allow-discrete, clip-path var(--snap) allow-discrete;
}
.sidebar.collapsed .nav-section-label { display: none; transition: display var(--motion-mid) allow-discrete; }
.sidebar.collapsed .nav-section { margin-bottom: var(--space-4); transition: margin-bottom var(--snap); }
.sidebar.collapsed .nav-link {
    justify-content: center; padding: var(--space-4) 0; gap: 0; position: relative;
    transition: justify-content var(--snap) allow-discrete, padding var(--snap), gap var(--snap);
}
.sidebar.collapsed .nav-link > span:not(.nav-count) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    transition: position var(--snap) allow-discrete, width var(--snap) allow-discrete, height var(--snap) allow-discrete, overflow var(--snap) allow-discrete, clip-path var(--snap) allow-discrete;
}
.sidebar.collapsed .nav-link-ext { display: none; transition: display var(--motion-mid) allow-discrete; }
.sidebar.collapsed .sidebar-wide { display: none; transition: display var(--motion-mid) allow-discrete; }
.sidebar.collapsed .nav-count {
    position: absolute; top: 2px; inset-inline-end: var(--space-3); margin-inline-start: 0;
    min-width: 15px; padding: var(--cap-gap) var(--space-2); font-size: var(--text-1); line-height: round(1.6em, 2px);
    transition: position var(--snap) allow-discrete, top var(--snap), inset-inline-end var(--snap), margin-inline-start var(--snap), min-width var(--snap), padding var(--snap), font-size var(--snap), line-height var(--snap);
}
.sidebar.collapsed .nav-status-card {
    align-items: center; padding: var(--space-4) 0; position: relative;
    transition: background var(--motion-fast), border-color var(--motion-fast), align-items var(--snap) allow-discrete, padding var(--snap);
}
.sidebar.collapsed .nav-status-label,
.sidebar.collapsed .nav-status-state {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    transition: position var(--snap) allow-discrete, width var(--snap) allow-discrete, height var(--snap) allow-discrete, overflow var(--snap) allow-discrete, clip-path var(--snap) allow-discrete;
}
.sidebar.collapsed .nav-status-dot { width: 9px; height: 9px; transition: width var(--snap), height var(--snap); }
.sidebar.collapsed .nav-tools-sep { margin: var(--space-3) var(--space-7); transition: margin var(--snap); }
.sidebar.collapsed .nav-filter { display: none; transition: display var(--motion-mid) allow-discrete; }
.sidebar.collapsed.sidebar--areas > .nav { display: none; transition: display var(--motion-mid) allow-discrete, min-width var(--snap); }
.sidebar.collapsed.sidebar--areas .nav-areas { border-inline-end: none; transition: border-inline-end var(--snap); }
.sidebar.collapsed [data-tip] { anchor-name: --sedna-rail-tip; anchor-scope: --sedna-rail-tip; }
.sidebar.collapsed [data-tip]:hover::after {
    content: attr(data-tip);
    position: fixed;
    position-anchor: --sedna-rail-tip;
    position-area: inline-end;
    align-self: anchor-center;
    margin-inline-start: var(--space-5);
    background: var(--card-bg); color: var(--fg); border: 1px solid var(--border);
    padding: var(--space-2) var(--space-4); border-radius: var(--radius-surface); font-size: var(--text-3); font-weight: 500;
    white-space: nowrap; z-index: 400; box-shadow: var(--shadow-flyout);
    pointer-events: none;
}
}
@layer sedna.frame {
.topbar {
    display: flex;
    align-items: stretch;
    height: var(--topbar-height);
    --surface-here: var(--topbar-bg);
    --muted-here: var(--topbar-muted);
    background: var(--topbar-bg);
    color: var(--topbar-fg);
    border-bottom: 1px solid var(--topbar-border);
    flex-shrink: 0;
    position: relative;
    z-index: 60;
    box-shadow: var(--shadow-topbar);
}
.topbar-spacer { flex: 1; }
.topbar-section {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0 var(--space-8);
    border-inline-start: 1px solid var(--topbar-border);
}
.topbar-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--topbar-height); flex-shrink: 0;
    background: none; border: none; border-inline-start: 1px solid var(--topbar-border);
    color: var(--topbar-muted); cursor: pointer; font-size: var(--text-8);
    text-decoration: none;
}
.topbar-btn:hover { background: var(--topbar-hover); color: var(--topbar-fg); text-decoration: none; }
.topbar-btn--start { border-inline-start: none; border-inline-end: 1px solid var(--topbar-border); }
.topbar--sticky { position: sticky; inset-block-start: 0; }
.topbar-version {
    display: inline-flex;
    align-items: center;
    align-self: center;
    flex-shrink: 0;
    padding: var(--space-1) var(--space-4);
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--topbar-muted);
    font-family: var(--font-mono);
    font-size: var(--text-2);
    font-variant-numeric: tabular-nums;
    line-height: round(1.5em, 2px);
    white-space: nowrap;
    text-decoration: none;
}
a.topbar-version:hover {
    background: var(--surface-strong);
    border-color: var(--border-strong);
    color: var(--topbar-fg);
    text-decoration: none;
}
.topbar-version--pre {
    background: var(--warn-bg);
    border-color: var(--warn-border);
    color: var(--warn-fg);
}
a.topbar-version--pre:hover {
    background: var(--warn-bg-hover);
    border-color: var(--warn-fg);
    color: var(--warn-fg);
}
.topbar > .health-badge,
.topbar > .stale,
.topbar > .topbar-version { align-self: center; margin-inline: var(--space-6); }
.topbar-version:not(:has(> *)) { display: inline-block; text-box: trim-both cap alphabetic; padding-block: calc(var(--space-1) + var(--cap-gap)); }
}
@layer sedna.frame {
.nav-filter {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin: var(--space-4) var(--space-5) var(--space-2);
}
.nav-filter > i {
    position: absolute;
    inset-inline-start: var(--space-4);
    font-size: var(--text-5);
    color: var(--muted);
    pointer-events: none;
}
.nav-filter-input {
    width: 100%;
    min-height: var(--control-height-sm);
    padding: var(--space-2) var(--space-4);
    padding-inline-start: calc(var(--space-4) + var(--text-5) + var(--space-3));
    background: var(--bg);
    border: 1px solid var(--field-border);
    border-radius: var(--radius-control);
    color: var(--fg);
    font-family: inherit;
    font-size: var(--text-3);
    line-height: round(1.4em, 2px);
    transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.nav-filter-input::placeholder { color: var(--placeholder); }
.nav-filter-input:focus {
    outline: none;
    border-color: var(--field-border-focus);
    box-shadow: 0 0 0 2px var(--brand-glow);
}
.nav-filter-empty {
    display: none;
    margin: 0;
    padding: var(--space-4) var(--space-7);
    color: var(--muted);
    font-size: var(--text-3);
}
.nav[data-filtering] .nav-scroll .nav-link[data-nav-miss] { display: none; }
.nav[data-filtering] .nav-section:not(:has(.nav-link:not([data-nav-miss]))),
.nav[data-filtering] .nav-group:not(:has(.nav-link:not([data-nav-miss]))) { display: none; }
.nav[data-filtering] .nav-group::details-content { content-visibility: visible; }
.nav[data-filtering] .nav-group > summary::after { transform: rotate(-180deg); }
.nav[data-filtering] .nav-scroll:not(:has(.nav-link:not([data-nav-miss]))) .nav-filter-empty { display: block; }
}
@layer sedna.frame {
.user-widget {
    position: relative;
    z-index: 200;
    display: flex;
    align-items: stretch;
    border-inline-start: 1px solid var(--topbar-border);
}
.user-trigger {
    display: flex; align-items: center; gap: var(--space-5);
    padding: 0 var(--space-7);
    background: none; border: none; cursor: pointer;
    color: var(--topbar-fg); white-space: nowrap;
}
.user-trigger:hover { background: var(--topbar-hover); text-decoration: none; }
.user-info  { display: flex; flex-direction: column; align-items: flex-start; }
.user-name  { font-size: var(--text-4); font-weight: 500; line-height: round(1.2em, 2px); }
.user-email { font-size: var(--text-2); color: var(--topbar-muted); line-height: round(1.2em, 2px); }
.user-avatar {
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--brand-tint); color: var(--brand-text); font-size: var(--text-6);
}
.user-signout {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; flex-shrink: 0;
    color: var(--topbar-muted); font-size: var(--text-8); text-decoration: none;
    transition: background var(--motion-fast), color var(--motion-fast);
}
.user-signout:hover, .user-signout:focus, .user-signout:hover:focus {
    background: var(--topbar-hover); color: var(--topbar-fg); text-decoration: none;
}
.user-widget > .menu {
    color: var(--fg);
    min-width: 220px;
    position: absolute;
    top: calc(100% + var(--topbar-panel-gap));
    inset-inline-end: var(--topbar-panel-gap);
    z-index: 550;
}
.user-avatar:not(:has(> *)) { display: inline-block; align-content: center; text-align: center; text-box: trim-both cap alphabetic; }
}
@layer sedna.frame {
.page {
    --page-gap: var(--page-rhythm);
    padding: var(--page-pad);
    padding-inline: max(var(--page-pad), calc((100% - var(--page-max)) / 2));
    padding-block-end: calc(var(--page-pad) + var(--safe-block-end));
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    position: relative;
}
.page > * + *:not(h1, h2, h3, h4, h5, h6, .lede, dialog, [popover]) { margin-block-start: var(--page-gap); }
.page--fill { display: flex; flex-direction: column; }
.page--fill > * { flex-shrink: 0; }
.page--fill > .page-foot { margin-top: auto; }
.back-link {
    display: flex; inline-size: fit-content; align-items: center; gap: var(--space-2);
    font-size: var(--text-3); color: var(--muted); text-decoration: none; margin-bottom: var(--space-6);
}
.back-link:hover { color: var(--fg); }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--scrollbar); border-radius: var(--radius-pill);
    border: 2px solid transparent; background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); }
*::-webkit-scrollbar-corner { background: transparent; }
.page, .nav-scroll, .sedna-scroll, .drawer-body, .palette-list, .form-combo-list,
.modal-body, .deck-body {
    --scroll-bg: var(--surface-here, var(--bg));
    background:
        linear-gradient(var(--scroll-bg) 30%, transparent) center top,
        linear-gradient(transparent, var(--scroll-bg) 70%) center bottom,
        linear-gradient(to bottom, var(--scroll-shade), transparent) center top,
        linear-gradient(to top, var(--scroll-shade), transparent) center bottom;
    background-repeat: no-repeat;
    background-size: 100% 26px, 100% 26px, 100% 10px, 100% 10px;
    background-attachment: local, local, scroll, scroll;
}
.drawer-body,
.palette-list,
.form-combo-list { --surface-here: var(--bg-elevated); --muted-here: var(--muted); }
.nav-scroll { --surface-here: var(--sidebar-bg); --muted-here: var(--sidebar-muted); }
}
@layer sedna.frame {
.sedna-tip {
    position: fixed;
    top: 0; left: 0; right: auto; bottom: auto;
    margin: 0;
    overflow: visible;
    z-index: 1000;
    max-width: 280px;
    padding: var(--space-3) var(--space-5);
    background: var(--tip-bg);
    color: var(--tip-fg);
    border: 1px solid var(--tip-border);
    border-radius: var(--radius-surface);
    font-size: var(--text-3);
    font-weight: 500;
    line-height: 1.45;
    box-shadow: var(--shadow-tip);
    pointer-events: none;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity var(--motion-fast) ease, transform var(--motion-fast) ease;
}
.sedna-tip--visible { opacity: 1; transform: none; }
.btn[data-tip] { cursor: pointer; }
[data-tip] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
}
@layer sedna.frame {
.page-banner {
    --row-line: 1lh;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "lead body actions dismiss";
    align-items: center;
    flex-shrink: 0;
    padding-block: var(--page-banner-pad-block);
    padding-inline: max(var(--page-pad), calc((100% - var(--page-max)) / 2));
    background: var(--surface-soft);
    border-block-end: 1px solid var(--border);
    color: var(--fg);
    font-size: var(--text-4);
    overflow-wrap: anywhere;
}
.topbar:not(.topbar--sticky):has(+ .page-banner) { box-shadow: none; }
.topbar:not(.topbar--sticky) + .page-banner {
    position: relative;
    z-index: 3;
    box-shadow: var(--shadow-topbar);
}
.page-banner > i {
    grid-area: lead;
    margin-inline-end: var(--space-5);
    color: var(--tone-fg, var(--muted));
    font-size: var(--text-7);
}
.page-banner > .badge {
    grid-area: lead;
    margin-inline-end: var(--space-5);
}
.page-banner-body {
    grid-area: body;
    min-width: 0;
    text-box: trim-both cap alphabetic;
    padding-block: var(--cap-gap);
}
.page-banner-body > * { margin-block: 0; }
.page-banner-body > * + * { margin-block-start: var(--space-3); }
.page-banner-title {
    display: block;
    color: var(--fg);
    font-size: inherit;
    font-weight: 600;
    line-height: inherit;
}
.page-banner-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}
.page-banner > .page-banner-actions {
    grid-area: actions;
    margin-inline-start: var(--space-7);
}
.page-banner-body > .page-banner-actions { margin-block-start: var(--space-6); }
.page-banner-dismiss {
    grid-area: dismiss;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--control-height-sm);
    block-size: var(--control-height-sm);
    margin-inline-start: var(--space-5);
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--radius-control);
    color: var(--tone-fg, var(--muted));
    font: inherit;
    font-size: var(--text-7);
    cursor: pointer;
}
.page-banner-dismiss:hover { background: var(--tone-bg-hover, var(--bg-hover)); color: var(--tone-fg, var(--fg)); }
.page-banner-dismiss:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring); }
.page-banner:has(> .page-banner-body > .page-banner-title) { align-items: start; }
.page-banner:has(> .page-banner-body > .page-banner-title) > i {
    margin-block-start: calc((var(--row-line) - 1em) / 2);
}
.page-banner:has(> .page-banner-body > .page-banner-title) > .page-banner-dismiss {
    margin-block-start: calc((var(--row-line) - var(--control-height-sm)) / 2);
}
.page-banner:has(> .page-banner-body > .page-banner-title) > :is(.badge, .page-banner-actions) {
    translate: 0 calc((var(--row-line) - 100%) / 2);
}
.page-banner--phase {
    padding-block: calc(var(--page-banner-pad-block) * 0.6);
    background: transparent;
    color: var(--fg-soft);
    font-size: var(--text-3);
}
@media (max-width: 560px) {
    .page-banner {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "lead body dismiss" ". actions actions";
        align-items: start;
    }
    .page-banner > i { margin-block-start: calc((var(--row-line) - 1em) / 2); }
    .page-banner > .page-banner-dismiss { margin-block-start: calc((var(--row-line) - var(--control-height-sm)) / 2); }
    .page-banner > .badge { translate: 0 calc((var(--row-line) - 100%) / 2); }
    .page-banner > .page-banner-actions {
        margin-inline-start: 0;
        margin-block-start: var(--space-4);
    }
    .page-banner:has(> .page-banner-body > .page-banner-title) > .page-banner-actions { translate: none; }
}
}
@layer sedna.frame {
#components-reconnect-modal,
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0; inset-inline: 0;
    z-index: 1000;
}
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-paused,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-resume-failed,
#components-reconnect-modal.components-reconnect-rejected { display: block; }
.status-bar {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-5) var(--space-8);
    padding-block-end: calc(var(--space-5) + var(--safe-block-end));
    font-size: var(--text-4);
    font-weight: 500;
}
.status-bar > i { font-size: var(--text-7); flex-shrink: 0; }
.status-bar--reconnecting,
.status-bar--paused {
    background: var(--reconnect-warn-bg);
    border-top: 1px solid var(--reconnect-warn-border);
    color: var(--reconnect-warn-fg);
}
.status-bar--reconnecting > i { animation: sedna-pulse var(--pulse-duration) ease-in-out infinite; }
.status-bar--failed,
.status-bar--resume-failed,
.status-bar--expired,
.status-bar--error {
    background: var(--reconnect-fail-bg);
    border-top: 1px solid var(--reconnect-fail-border);
    color: var(--reconnect-fail-fg);
}
.status-bar-attempt { opacity: 0.75; font-weight: 400; }
#components-reconnect-modal .status-bar-attempt { display: none; }
#components-reconnect-modal.components-reconnect-retrying .status-bar-attempt { display: inline; }
.status-bar-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    flex-shrink: 0;
    margin-inline-start: auto;
    min-height: var(--control-height-sm);
    padding: var(--space-2) var(--space-5);
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    color: var(--on-solid);
    font: inherit;
    font-size: var(--text-3);
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}
.status-bar-action i { font-size: var(--text-4); }
.status-bar-action:hover { border-color: currentColor; text-decoration: none; }
.status-bar-action:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--on-solid); }
.status-bar--reconnecting .status-bar-action,
.status-bar--paused .status-bar-action { background: var(--warn-solid); }
.status-bar--failed .status-bar-action,
.status-bar--resume-failed .status-bar-action,
.status-bar--expired .status-bar-action,
.status-bar--error .status-bar-action { background: var(--danger-solid); }
.status-bar-dismiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-inline-start: auto;
    padding: 0;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    font-size: var(--text-7);
    line-height: 1;
    opacity: 0.75;
    cursor: pointer;
}
.status-bar-action ~ .status-bar-dismiss { margin-inline-start: var(--space-3); }
.status-bar-dismiss:hover { opacity: 1; }
.status-bar-dismiss:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--on-solid); }
#components-reconnect-modal .status-bar { display: none; }
#components-reconnect-modal.components-reconnect-show     .status-bar--reconnecting { display: flex; }
#components-reconnect-modal.components-reconnect-retrying .status-bar--reconnecting { display: flex; }
#components-reconnect-modal.components-reconnect-paused   .status-bar--paused       { display: flex; }
#components-reconnect-modal.components-reconnect-failed   .status-bar--failed       { display: flex; }
#components-reconnect-modal.components-reconnect-rejected .status-bar--expired      { display: flex; }
#components-reconnect-modal.components-reconnect-resume-failed .status-bar--resume-failed { display: flex; }
#components-reconnect-modal.components-reconnect-resume-failed:not(:has(.status-bar--resume-failed))
    .status-bar--failed { display: flex; }
#components-reconnect-modal.components-reconnect-paused:not(:has(.status-bar--paused))
    .status-bar--reconnecting { display: flex; }
}
@layer sedna.frame {
@media (max-width: 560px) {
    .layout--responsive.layout--compact-at-sm { --sedna-rail: forced; }
}
@media (max-width: 900px) {
    .layout--responsive:not(.layout--compact-at-sm, .layout--compact-at-lg) { --sedna-rail: forced; }
    .topbar--responsive .user-email { display: none; }
}
@media (max-width: 1200px) {
    .layout--responsive.layout--compact-at-lg { --sedna-rail: forced; }
}
@container style(--sedna-rail: forced) {
    .layout--responsive .sidebar { width: var(--sidebar-width-collapsed); }
    .layout--responsive .sidebar > .brand,
    .layout--responsive .sidebar > .nav,
    .layout--responsive .sidebar > .nav-tools { min-width: 0; }
    .layout--responsive .sidebar .brand { justify-content: center; padding: 0; gap: 0; }
    .layout--responsive .sidebar .brand-text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }
    .layout--responsive .sidebar .nav-section-label { display: none; }
    .layout--responsive .sidebar .nav-section { margin-bottom: var(--space-4); }
    .layout--responsive .sidebar .nav-link { justify-content: center; padding: var(--space-4) 0; gap: 0; position: relative; }
    .layout--responsive .sidebar .nav-link > span:not(.nav-count) {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }
    .layout--responsive .sidebar .nav-link-ext { display: none; }
    .layout--responsive .sidebar .sidebar-wide { display: none; }
    .layout--responsive .sidebar .nav-count {
        position: absolute; top: 2px; inset-inline-end: var(--space-3); margin-inline-start: 0;
        min-width: 15px; padding: var(--cap-gap) var(--space-2); font-size: var(--text-1); line-height: round(1.6em, 2px);
    }
    .layout--responsive .sidebar .nav-status-card { align-items: center; padding: var(--space-4) 0; position: relative; }
    .layout--responsive .sidebar .nav-status-label,
    .layout--responsive .sidebar .nav-status-state {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }
    .layout--responsive .sidebar .nav-status-dot { width: 9px; height: 9px; }
    .layout--responsive .sidebar .nav-tools-sep { margin: var(--space-3) var(--space-7); }
    .layout--responsive .sidebar .nav-filter { display: none; }
    .layout--responsive .sidebar.sidebar--areas > .nav { display: none; }
    .layout--responsive .sidebar.sidebar--areas .nav-areas { border-inline-end: none; }
    .layout--responsive .sidebar [data-tip] { anchor-name: --sedna-rail-tip; anchor-scope: --sedna-rail-tip; }
    .layout--responsive .sidebar [data-tip]:hover::after {
        content: attr(data-tip);
        position: fixed;
        position-anchor: --sedna-rail-tip;
        position-area: inline-end;
        align-self: anchor-center;
        margin-inline-start: var(--space-5);
        background: var(--card-bg); color: var(--fg); border: 1px solid var(--border);
        padding: var(--space-2) var(--space-4); border-radius: var(--radius-surface); font-size: var(--text-3); font-weight: 500;
        white-space: nowrap; z-index: 400; box-shadow: var(--shadow-flyout);
        pointer-events: none;
    }
    .layout--responsive .user-email { display: none; }
}
@media (max-width: 560px) {
    .layout--responsive .user-info,
    .topbar--responsive .user-info { display: none; }
    .layout--responsive .user-trigger,
    .topbar--responsive .user-trigger { padding: 0 var(--space-6); }
    .layout--responsive .topbar-version,
    .topbar--responsive .topbar-version { display: none; }
    .layout--responsive .topbar-wide,
    .topbar--responsive .topbar-wide { display: none; }
}
@media (max-width: 560px) {
    .layout--flow {
        height: auto;
        min-height: 100dvh;
        overflow: clip visible;
    }
    .layout--flow > .content { overflow: visible; min-width: 0; }
    .layout--flow .page {
        flex: 1 0 auto;
        min-width: 0;
        overflow: visible;
        background: none;
    }
    .layout--flow .topbar {
        position: sticky;
        top: var(--safe-block-start);
    }
    .layout--flow .topbar:has(+ .page-banner) { box-shadow: var(--shadow-topbar); }
    .layout--flow .topbar + .page-banner { position: static; box-shadow: none; }
    .layout--flow > .sidebar {
        position: sticky;
        top: 0;
        height: 100dvh;
        align-self: flex-start;
    }
    .layout--flow .bottombar {
        position: sticky;
        bottom: 0;
    }
}
}
@layer sedna.frame {
.kiosk {
    --kiosk-zoom: 1;
    --kiosk-side: 22rem;
    zoom: var(--kiosk-zoom);
    inline-size: calc(100vw / var(--kiosk-zoom));
    block-size: calc(100dvh / var(--kiosk-zoom));
    overflow: hidden;
    cursor: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "strip strip" "stage side";
    gap: var(--page-rhythm);
    padding: var(--page-pad);
    box-sizing: border-box;
    background: var(--bg);
}
@media (min-width: 1366px) { .kiosk { --kiosk-zoom: 1.067; } }
@media (min-width: 1920px) { .kiosk { --kiosk-zoom: 1.5; } }
@media (min-width: 2560px) { .kiosk { --kiosk-zoom: 2; } }
@media (min-width: 3840px) { .kiosk { --kiosk-zoom: 3; } }
.kiosk-strip { grid-area: strip; min-inline-size: 0; }
.kiosk-stage { grid-area: stage; min-inline-size: 0; min-block-size: 0; }
.kiosk-side  { grid-area: side; min-block-size: 0; inline-size: var(--kiosk-side); }
.kiosk, .kiosk * { scrollbar-width: none; }
.kiosk::-webkit-scrollbar, .kiosk *::-webkit-scrollbar { display: none; }
}
@layer sedna.frame {
.auth-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    min-height: 100dvh;
    padding: var(--space-9);
    background: var(--bg);
}
.auth-brand { display: flex; align-items: center; gap: var(--space-5); font-size: var(--text-7); font-weight: 600; }
.auth-brand img { width: 32px; height: 32px; border-radius: var(--radius-surface); }
.auth-card { width: 100%; max-width: 380px; }
.auth-foot { color: var(--muted); font-size: var(--text-3); text-align: center; }
.full-layout {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}
.full-layout-fill { flex: 1; min-height: 0; }
.nav-group > summary {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-7);
    padding-inline-start: var(--nav-indent);
    color: var(--sidebar-fg);
    font-size: var(--text-4);
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary:hover { background: var(--sidebar-hover); }
.nav-group > summary:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus-ring); }
.nav-group > summary > i { font-size: var(--text-7); flex-shrink: 0; opacity: 0.6; }
.nav-group > summary::after {
    content: '';
    margin-inline-start: auto;
    width: 0;
    height: 0;
    border-inline: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: 0.45;
    transition: transform var(--motion-fast) ease;
}
.nav-group[open] > summary::after { transform: rotate(-180deg); }
.nav-group .nav-link {
    padding-inline-start: calc(var(--nav-indent) + var(--text-7) + var(--space-4));
    font-size: var(--text-3);
}
.sidebar.collapsed .nav-group > summary { justify-content: center; padding: var(--space-4) 0; gap: 0; }
.sidebar.collapsed .nav-group > summary::after { display: none; }
.sidebar.collapsed .nav-group > summary > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}
.sidebar.collapsed .nav-group .nav-link { padding-inline-start: 0; }
.skip-link {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: 1000;
    padding: var(--space-5) var(--space-7);
    padding-block-start: calc(var(--space-5) + var(--safe-block-start));
    padding-inline-start: calc(var(--space-7) + var(--safe-inline-start));
    background: var(--brand);
    border-end-end-radius: var(--radius-surface);
    color: var(--on-solid);
    font-size: var(--text-4);
    font-weight: 500;
    text-decoration: none;
    transform: translateY(-110%);
    transition: transform var(--motion-fast) ease;
}
.skip-link:focus {
    transform: none;
    text-decoration: none;
    outline: none;
    box-shadow: 0 0 0 3px var(--focus-ring);
}
}
@layer sedna.frame {
.search {
    position: relative;
    display: flex;
    align-items: center;
    --search-max: 480px;
    flex: 0 1 var(--search-max);
    min-width: 130px;
    margin-inline: var(--space-6) var(--space-7);
}
.search-icon {
    position: absolute;
    inset-inline-start: var(--space-6);
    color: var(--muted);
    font-size: var(--text-6);
    pointer-events: none;
}
.search-input {
    width: 100%;
    height: var(--control-height);
    padding: 0 var(--space-10);
    background: var(--surface-strong);
    border: 1px solid var(--field-border);
    border-radius: var(--radius-surface);
    color: var(--fg);
    font-family: inherit;
    font-size: var(--text-4);
    outline: none;
}
.search-input::placeholder { color: var(--placeholder); }
.search-input::-webkit-search-cancel-button { display: none; }
.search-input:focus { border-color: var(--field-border-focus); background: var(--card-bg); }
.search-clear {
    position: absolute;
    inset-inline-end: var(--space-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    background: none;
    border-radius: var(--radius-control);
    color: var(--muted);
    font-size: var(--text-6);
    cursor: pointer;
}
.search-clear:hover { background: var(--bg-hover); color: var(--fg); }
.search-input:placeholder-shown ~ .search-clear { display: none; }
.search-panel {
    position: fixed;
    z-index: 550;
    max-height: 360px;
    overflow-y: auto;
    padding: var(--space-2);
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-surface);
    box-shadow: var(--shadow-dropdown);
    --surface-here: var(--card-bg);
    --muted-here: var(--muted);
    color: var(--fg);
}
.search-status {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-6);
    color: var(--muted);
    font-size: var(--text-3);
}
.search-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    width: 100%;
    padding: var(--space-4) var(--space-5);
    border: none;
    background: none;
    border-radius: var(--radius-surface);
    color: inherit;
    font-family: inherit;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}
.search-item--sel { background: var(--bg-hover); }
.search-item:hover { background: var(--bg-hover); text-decoration: none; }
.search-item-title {
    overflow: hidden;
    color: var(--fg);
    font-size: var(--text-4);
    font-weight: 600;
    line-height: round(1.35em, 2px);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.search-item-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    color: var(--muted);
    font-size: var(--text-2);
}
.search-tag {
    padding: 0 var(--space-3);
    background: var(--surface-strong);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--muted);
    font-size: var(--text-1);
}
.search-tag--warn { border-color: var(--warn-border); color: var(--warn-fg); }
.topbar-btn--search { display: none; }
@media (max-width: 720px) {
    .search { display: none; }
    .topbar-btn--search { display: inline-flex; }
}
.search-panel--anchored {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline: 0;
}
}
@layer sedna.frame {
.sidebar.sidebar--areas {
    --nav-areas-width: 64px;
    --sidebar-width: calc(var(--nav-areas-width) + 200px);
    --sidebar-width-collapsed: var(--nav-areas-width);
    flex-direction: row;
}
.nav-areas {
    width: var(--nav-areas-width);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-inline-end: 1px solid var(--sidebar-border);
}
.nav-areas .brand { justify-content: center; padding: 0; gap: 0; }
.nav-areas .brand-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}
.nav-areas-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-1);
}
.nav-areas-list::-webkit-scrollbar { display: none; }
.nav-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-4) 0;
    background: none;
    border: none;
    border-radius: var(--radius-surface);
    color: var(--muted-here, var(--muted));
    font-family: inherit;
    font-size: var(--text-1);
    font-weight: 500;
    line-height: round(1.2em, 2px);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.nav-area i { font-size: var(--text-8); line-height: 1; }
.nav-area > span { max-width: 100%; hyphens: auto; overflow-wrap: anywhere; }
.nav-area:hover { background: var(--sidebar-hover); color: var(--sidebar-fg); text-decoration: none; }
.nav-area:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus-ring); }
.nav-area[aria-expanded="true"],
.nav-area.active { background: var(--brand-tint); color: var(--brand-text); }
.sidebar--areas > .nav { flex: 1; min-width: calc(var(--sidebar-width) - var(--nav-areas-width)); }
.nav-area-title {
    display: flex;
    align-items: center;
    height: var(--topbar-height);
    flex-shrink: 0;
    padding: 0 var(--space-7);
    border-bottom: 1px solid var(--sidebar-border);
    color: var(--sidebar-fg);
    font-size: var(--text-4);
    font-weight: 600;
}
.nav-area-title:not(:has(> *)) { display: block; align-content: center; text-box: trim-both cap alphabetic; }
}
@layer sedna.frame {
.topbar-nav {
    display: flex;
    align-items: stretch;
    gap: var(--space-1);
    min-width: 0;
    padding: 0 var(--space-5);
    overflow-x: auto;
    scrollbar-width: none;
}
.topbar-nav::-webkit-scrollbar { display: none; }
.topbar-nav-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
    padding: 0 var(--space-5);
    border-bottom: 2px solid transparent;
    border-top: 2px solid transparent;
    color: var(--topbar-muted);
    font-size: var(--text-4);
    white-space: nowrap;
    text-decoration: none;
}
.topbar-nav-link i { font-size: var(--text-6); }
.topbar-nav-link:hover { color: var(--topbar-fg); text-decoration: none; }
.topbar-nav-link:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus-ring); }
.topbar-nav-link.active,
.topbar-nav-link[aria-current="page"] {
    border-bottom-color: var(--tab-indicator);
    color: var(--topbar-fg);
}
}
@layer sedna.frame {
.bottombar {
    --bottombar-height: 46px;
    --bottombar-radius: var(--radius-surface);
    --bottombar-surface: var(--bg-elevated);
    --bottombar-fg: var(--fg);
    --bottombar-muted: var(--muted);
    --bottombar-hover: var(--bg-hover);
    --surface-here: var(--bottombar-surface);
    --muted-here: var(--bottombar-muted);
    color: var(--bottombar-fg);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--bottombar-surface);
    border-top: 1px solid var(--border);
    box-shadow: var(--shadow-bottombar);
    padding-block-end: var(--safe-block-end);
}
.bottombar-items {
    display: flex;
    align-items: stretch;
    height: var(--bottombar-height);
    overflow: hidden;
    transition: height var(--motion-mid) ease;
}
.bottombar-item {
    position: relative;
    flex: 1 1 0;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: 0;
    background: none;
    border: none;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    color: var(--bottombar-muted);
    font-family: inherit;
    font-size: var(--text-3);
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}
.bottombar-item:hover { background: var(--bottombar-hover); color: var(--bottombar-fg); text-decoration: none; }
.bottombar-item:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus-ring); }
.bottombar-icon { position: relative; display: inline-flex; }
.bottombar-icon i { font-size: var(--text-8); line-height: 1; }
.bottombar-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    order: 1;
}
.bottombar-count {
    position: absolute;
    top: -5px;
    inset-inline-start: calc(100% - 7px);
    min-width: 16px;
    height: 16px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--brand);
    color: var(--on-solid);
    font-size: var(--text-1);
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 2px var(--bottombar-surface);
    order: 2;
}
.bottombar-item.active,
.bottombar-item[aria-current="page"] {
    flex: 0 1 auto;
    padding-inline: var(--space-6);
    border-top-color: var(--tab-indicator);
    color: var(--bottombar-fg);
}
.bottombar-item.active i,
.bottombar-item[aria-current="page"] i { color: var(--brand-text); }
.bottombar-item.active .bottombar-label,
.bottombar-item[aria-current="page"] .bottombar-label {
    position: static;
    width: auto;
    height: auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    clip-path: none;
}
.bottombar-item.active .bottombar-icon,
.bottombar-item[aria-current="page"] .bottombar-icon { display: contents; }
.bottombar-item.active .bottombar-count,
.bottombar-item[aria-current="page"] .bottombar-count { position: static; box-shadow: none; }
.bottombar-item--end,
.bottombar-item--start { flex: 0 0 var(--bottombar-height); }
.bottombar-item--end::before,
.bottombar-item--start::before {
    content: '';
    position: absolute;
    inset-block: var(--space-5);
    width: 1px;
    background: var(--border);
}
.bottombar-item--end::before { inset-inline-start: 0; }
.bottombar-item--start::before { inset-inline-end: 0; }
.bottombar-accessory {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-height: 38px;
    padding: 0 var(--space-3) 0 var(--space-6);
    border-bottom: 1px solid var(--border);
    font-size: var(--text-3);
}
.bottombar-accessory > i { color: var(--brand-text); font-size: var(--text-6); }
.bottombar-accessory-text { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bottombar-meter { flex: 0 0 48px; display: flex; flex-direction: column; }
.bottombar[data-away] .bottombar-items { height: 0; }
.bottombar[data-away] .bottombar-accessory { border-bottom-color: transparent; }
.bottombar--tint { --bottombar-height: 52px; }
.bottombar--tint .bottombar-items { gap: var(--space-2); padding: var(--space-3) var(--space-3); }
.bottombar--tint .bottombar-item { border-width: 0; border-radius: max(var(--radius-control), calc(var(--bottombar-radius) - var(--space-3))); }
.bottombar--tint .bottombar-item.active,
.bottombar--tint .bottombar-item[aria-current="page"] { background: var(--brand-tint); color: var(--brand-text); }
.bottombar--tint .bottombar-item--end,
.bottombar--tint .bottombar-item--start { flex-basis: 40px; border-radius: 0; }
.bottombar--tint .bottombar-item--end::before,
.bottombar--tint .bottombar-item--start::before { inset-block: var(--space-2); }
.bottombar--tint .bottombar-item--end { margin-inline-start: var(--space-2); }
.bottombar--tint .bottombar-item--start { margin-inline-end: var(--space-2); }
.bottombar--tint[data-away] .bottombar-items { padding-block: 0; }
.bottombar--card {
    --bottombar-height: 50px;
    --bottombar-surface: var(--card-bg);
    gap: var(--space-3);
    padding: 0 var(--space-5) calc(var(--space-5) + var(--safe-block-end));
    background: none;
    border-top: none;
    box-shadow: none;
}
.bottombar--card .bottombar-accessory,
.bottombar--card .bottombar-items {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--bottombar-radius);
    box-shadow: var(--shadow-float);
}
.bottombar--card .bottombar-items { gap: var(--space-1); padding: var(--space-2); }
.bottombar--card .bottombar-item { border-width: 0; border-radius: max(var(--radius-control), calc(var(--bottombar-radius) - var(--space-2) - 1px)); }
.bottombar--card .bottombar-item.active,
.bottombar--card .bottombar-item[aria-current="page"] { background: var(--surface-strong); }
.bottombar--card .bottombar-item--end,
.bottombar--card .bottombar-item--start { flex-basis: 40px; border-radius: 0; }
.bottombar--card .bottombar-item--end {
    border-start-end-radius: max(0px, calc(var(--bottombar-radius) - var(--space-2) - 1px));
    border-end-end-radius: max(0px, calc(var(--bottombar-radius) - var(--space-2) - 1px));
}
.bottombar--card .bottombar-item--start {
    border-start-start-radius: max(0px, calc(var(--bottombar-radius) - var(--space-2) - 1px));
    border-end-start-radius: max(0px, calc(var(--bottombar-radius) - var(--space-2) - 1px));
}
.bottombar--card .bottombar-item--end::before,
.bottombar--card .bottombar-item--start::before { inset-block: var(--space-3); }
.bottombar--card[data-away] .bottombar-items { padding-block: 0; border-width: 0; box-shadow: none; }
.bottombar--icons { --bottombar-height: 48px; }
.bottombar--icons .bottombar-item { border-width: 0; }
.bottombar--icons .bottombar-item.active,
.bottombar--icons .bottombar-item[aria-current="page"] { flex: 1 1 0; padding-inline: 0; }
.bottombar--icons .bottombar-item.active .bottombar-label,
.bottombar--icons .bottombar-item[aria-current="page"] .bottombar-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}
.bottombar--icons .bottombar-item.active .bottombar-icon,
.bottombar--icons .bottombar-item[aria-current="page"] .bottombar-icon { display: inline-flex; }
.bottombar--icons .bottombar-item.active .bottombar-count,
.bottombar--icons .bottombar-item[aria-current="page"] .bottombar-count { position: absolute; box-shadow: 0 0 0 2px var(--bottombar-surface); }
.bottombar--icons .bottombar-item.active::after,
.bottombar--icons .bottombar-item[aria-current="page"]::after {
    content: '';
    position: absolute;
    bottom: var(--space-3);
    inset-inline-start: 50%;
    width: 16px;
    height: 2px;
    margin-inline-start: -8px;
    border-radius: 1px;
    background: var(--tab-indicator);
}
.layout > .content > .bottombar { anchor-name: --sedna-bottombar; }
.content:has(> .bottombar) > .page { padding-block-end: var(--space-9); }
@media (max-width: 560px) {
    .layout--bottombar > .sidebar { display: none; }
    .layout--bottombar .topbar-btn--search { display: none; }
}
@media (min-width: 561px) {
    .layout--bottombar .bottombar { display: none; }
    .layout--bottombar .content:has(> .bottombar) > .page { padding-block-end: calc(var(--space-9) + var(--safe-block-end)); }
}
@media (max-width: 560px) {
    .layout--flow:has(> .content > .bottombar) {
        --bottombar-reach-items: calc(46px + 1px);
        --bottombar-reach-accessory: 0px;
        --bottombar-reach: calc(var(--bottombar-reach-items) + var(--bottombar-reach-accessory) + var(--safe-block-end));
    }
    .layout--flow:has(> .content > .bottombar--tint)  { --bottombar-reach-items: calc(52px + 1px); }
    .layout--flow:has(> .content > .bottombar--icons) { --bottombar-reach-items: calc(48px + 1px); }
    .layout--flow:has(> .content > .bottombar--card)  { --bottombar-reach-items: calc(50px + var(--space-5)); }
    .layout--flow:has(> .content > .bottombar > .bottombar-accessory) { --bottombar-reach-accessory: 38px; }
    .layout--flow:has(> .content > .bottombar--card > .bottombar-accessory) { --bottombar-reach-accessory: calc(38px + var(--space-3)); }
}
}
@layer sedna.paint {
.card {
    --surface-here: var(--surface-raised-1);
    --muted-here: var(--muted);
    background: var(--surface-raised-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-surface);
    overflow: hidden;
}
.card .card {
    --surface-here: var(--surface-raised-2);
    --muted-here: var(--muted);
    background: var(--surface-raised-2);
}
.card .card .card {
    --surface-here: var(--surface-raised-3);
    --muted-here: var(--muted);
    background: var(--surface-raised-3);
    --muted: var(--fg-soft);
}
a.card {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: background var(--motion-fast), border-color var(--motion-fast);
}
a.card:hover { background: var(--bg-hover); border-color: var(--border-strong); text-decoration: none; }
a.card:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring); }
a.card.card--fill { display: flex; }
.card-head {
    --card-head-control: var(--control-height-sm);
    min-block-size: calc(2 * var(--card-pad-block) + var(--card-head-control) + 1px);
    display: flex;
    flex-wrap: wrap;
    row-gap: var(--space-3);
    justify-content: space-between;
    align-items: center;
    padding: var(--card-pad-block) var(--card-pad-inline);
    border-bottom: 1px solid var(--border);
    background: var(--card-head-bg);
}
.card-head .btn:not(.btn--lg) {
    min-block-size: var(--card-head-control);
    padding-block: 0;
}
.card-head :is(h1, h2, h3, h4) { margin: 0; font-size: var(--text-6); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.card-head-right { display: flex; align-items: center; gap: var(--space-4); }
.card-head-lead { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; margin-inline-end: var(--space-4); color: var(--muted); }
.card-head:has(> .card-head-lead) { justify-content: flex-start; }
.card-head:has(> .card-head-lead) > .card-head-right { margin-inline-start: auto; }
.card.card--folded > :not(.card-head) { display: none; }
.card.card--folded > .card-head { border-bottom: none; }
.card--resizable {
    --card-height: auto;
    --card-max-height: none;
    display: flex;
    flex-direction: column;
    block-size: var(--card-height);
    max-block-size: var(--card-max-height);
}
.card--resizable > .card-body { flex: 1 1 auto; min-block-size: 0; overflow: auto; }
.card-resize {
    flex-shrink: 0;
    block-size: var(--space-4);
    margin-block-start: calc(var(--space-4) * -1);
    cursor: ns-resize;
    touch-action: none;
    position: relative;
}
.card-resize::before {
    content: "";
    position: absolute;
    inset-inline: 40%;
    inset-block-start: calc(50% - 1px);
    block-size: 2px;
    border-radius: var(--radius-pill);
    background: var(--border-strong);
    opacity: 0;
    transition: opacity var(--motion-fast);
}
.card-resize:hover::before,
.card-resize:focus-visible::before,
.card-resize[data-resizing]::before { opacity: 1; background: var(--selected); }
.card-resize:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring); border-radius: var(--radius-inner); }
.card--resizable {
    --card-width: auto;
    inline-size: var(--card-width);
    max-inline-size: 100%;
}
:where(.card:has(> .card-resize--inline, > .card-resize--corner)) { position: relative; }
.card-resize--inline,
.card-resize--corner {
    position: absolute;
    margin: 0;
}
.card-resize--inline {
    inset-block: 0;
    inset-inline-end: 0;
    inline-size: var(--space-4);
    block-size: auto;
    cursor: ew-resize;
}
.card-resize--inline::before {
    inset-inline: auto;
    inset-inline-start: calc(50% - 1px);
    inset-block: 40%;
    inline-size: 2px;
    block-size: auto;
}
.card-resize--corner {
    inset-block-end: 0;
    inset-inline-end: 0;
    inline-size: var(--space-6);
    block-size: var(--space-6);
    cursor: nwse-resize;
}
.card-resize--corner::before {
    inset: auto;
    inset-block-end: var(--space-2);
    inset-inline-end: var(--space-2);
    inline-size: var(--space-4);
    block-size: var(--space-4);
    background: none;
    border-block-end: 2px solid var(--border-strong);
    border-inline-end: 2px solid var(--border-strong);
    border-radius: 0;
    border-end-end-radius: var(--radius-inner);
    opacity: 1;
}
.card-resize--corner:hover::before,
.card-resize--corner[data-resizing]::before { background: none; border-color: var(--selected); }
.card-head--tabs {
    align-items: stretch;
    padding: 0;
    min-block-size: 0;
}
.card-head--tabs .tabs {
    flex: 1;
    min-width: 0;
    border-bottom: none;
}
.card-head--tabs .tab { padding-inline: var(--card-pad-inline); }
.card-head--tabs .card-head-right { padding-inline-end: var(--card-pad-inline); }
.card-head--tabs + .card-body > .tab-panel { padding-top: 0; }
.card-body { padding: var(--card-pad-block) var(--card-pad-inline); }
:where(.card-body, .card-section) > :is(p, ul, ol, dl, h1, h2, h3, h4, h5, h6):where(:first-child) { margin-block-start: 0; }
:where(.card-body, .card-section) > :is(p, ul, ol, dl, h1, h2, h3, h4, h5, h6):where(:last-child) { margin-block-end: 0; }
.card-body--flush { padding: 0; }
.card-section { min-width: 0; }
* + .card-section {
    margin-block-start: var(--card-pad-block);
    padding-block-start: var(--card-pad-block);
    border-top: 1px solid var(--border);
}
.card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-4);
    padding: var(--card-pad-block) var(--card-pad-inline);
    border-top: 1px solid var(--border);
}
.card-foot--split { justify-content: space-between; }
.card-foot--start { justify-content: flex-start; }
.card-warning {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--card-pad-inline);
    border-top: 1px solid var(--warn-border);
    background: var(--warn-bg);
    color: var(--warn-fg);
    font-size: var(--text-3);
}
.card-warning i { font-size: var(--text-5); flex-shrink: 0; }
.card--fill { display: flex; flex-direction: column; }
.card--fill > .card-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.card--fill > :is(.card-foot, .card-warning):not(:is(.card-foot, .card-warning) + *) { margin-block-start: auto; }
.kv { display: flex; justify-content: space-between; gap: var(--space-7); padding: var(--space-2) 0; }
.kv .k { color: var(--muted); flex-shrink: 0; max-width: 50%; overflow-wrap: break-word; }
.kv .v { font-family: var(--font-mono); }
.kv > * { min-width: 0; overflow-wrap: anywhere; }
.kv--text .v { font-family: var(--font-sans); overflow-wrap: break-word; }
.kv > :is(dt, dd) { margin: 0; }
:has(> .kv > .kv-action) > .kv {
    container: sedna-kv / inline-size;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-start;
    row-gap: var(--space-2);
    padding-block: var(--cell-pad-y);
}
:has(> .kv > .kv-action) > .kv + .kv { border-top: 1px solid var(--divider); }
:has(> .kv > .kv-action) > .kv > .k { flex: 0 0 var(--kv-key-width); max-width: none; }
:has(> .kv > .kv-action) > .kv > .v { flex: 1 1 0; }
.kv-action { flex-shrink: 0; margin-inline-start: auto; text-align: end; white-space: nowrap; }
@container sedna-kv (width < 30rem) {
    :has(> .kv > .kv-action) > .kv > .k { flex-basis: 100%; }
}
}
@layer sedna.paint {
.ribbon-host { position: relative; overflow: hidden; }
.ribbon {
    --ribbon-inset: 30px;
    --ribbon-pad-block: var(--space-1);
    --ribbon-pad-inline: var(--space-3);
    --ribbon-bg: var(--brand);
    position: absolute;
    inset-block-start: var(--ribbon-inset);
    inset-inline-end: var(--ribbon-inset);
    translate: 50% -50%;
    rotate: 45deg;
    padding: calc(var(--ribbon-pad-block) + var(--cap-gap)) var(--ribbon-pad-inline);
    min-width: 30px;
    box-sizing: border-box;
    text-align: center;
    background: var(--ribbon-bg);
    box-shadow:
        -30px 0 0 var(--ribbon-bg), 30px 0 0 var(--ribbon-bg),
        -60px 0 0 var(--ribbon-bg), 60px 0 0 var(--ribbon-bg),
        -90px 0 0 var(--ribbon-bg), 90px 0 0 var(--ribbon-bg);
    color: var(--on-solid);
    font-size: var(--text-1);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: round(1.4em, 2px);
    text-box: trim-both cap alphabetic;
    pointer-events: none;
    print-color-adjust: exact;
}
.ribbon--sm { --ribbon-inset: 22px; --ribbon-pad-block: 0px; --ribbon-pad-inline: var(--space-2); }
.ribbon--lg { --ribbon-inset: 40px; --ribbon-pad-block: var(--space-2); --ribbon-pad-inline: var(--space-4); font-size: var(--text-2); }
.ribbon--tab {
    --ribbon-pad-inline: var(--space-4);
    inset-block-start: 0;
    inset-inline-end: 0;
    translate: none;
    rotate: none;
    box-shadow: none;
    min-width: 0;
    border-end-start-radius: var(--radius-small);
    letter-spacing: 0.04em;
}
.ribbon--tab.ribbon--sm { --ribbon-pad-inline: var(--space-3); }
.ribbon--tab.ribbon--lg { --ribbon-pad-inline: var(--space-5); }
}
@layer sedna.paint {
.badge {
    --badge-gap: var(--space-2);
    display: inline-flex;
    align-items: center;
    gap: var(--badge-gap);
    background: var(--badge-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    font-size: var(--text-2);
    padding: var(--space-1) var(--space-4);
    color: var(--fg-soft);
    line-height: round(1.45em, 2px);
    white-space: nowrap;
    vertical-align: calc(var(--line-cap) / 2);
}
.badge i { font-size: var(--text-3); line-height: 1; }
.badge--sm   { font-size: var(--text-1); padding: 0 var(--space-3); }
.badge--sm i { font-size: var(--text-2); }
.badge--lg   { font-size: var(--text-3); padding: var(--space-2) var(--space-5); }
.badge--lg i { font-size: var(--text-4); }
.badge--sev-1 { background: var(--sev-1-bg); border-color: var(--sev-1-border); color: var(--sev-1-fg); }
.badge--sev-2 { background: var(--sev-2-bg); border-color: var(--sev-2-border); color: var(--sev-2-fg); }
.badge--sev-3 { background: var(--sev-3-bg); border-color: var(--sev-3-border); color: var(--sev-3-fg); }
.badge--sev-4 { background: var(--sev-4-bg); border-color: var(--sev-4-border); color: var(--sev-4-fg); }
.badge--sev-5 { background: var(--sev-5-bg); border-color: var(--sev-5-border); color: var(--sev-5-fg); }
.badge:not(:has(> *))     { display: inline-block; text-box: trim-both cap alphabetic; padding-block: calc(var(--space-1) + var(--cap-gap)); }
.badge--sm:not(:has(> *)) { padding-block: var(--cap-gap); }
.badge--lg:not(:has(> *)) { padding-block: calc(var(--space-2) + var(--cap-gap)); }
.badge:not(:has(> *)) { vertical-align: calc((var(--line-cap) - 1cap) / 2); }
.badge:has(> *):not(.badge--swatch)::before {
    content: '';
    align-self: center;
    width: 0;
    height: 0;
    margin-inline-end: calc(var(--badge-gap) * -1);
}
.badge--swatch { vertical-align: calc((var(--line-cap) - var(--badge-dot)) / 2); }
.badge--mono {
    font-family: var(--font-mono);
    letter-spacing: 0;
    background: var(--code-bg);
    color: var(--code-fg);
    border-radius: var(--radius-small);
    max-width: 100%;
}
.badge-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    text-box: trim-both cap alphabetic;
    padding-block: var(--cap-gap);
}
.badge-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-inline-end: calc(var(--space-2) * -1);
    padding: 0 var(--space-1);
    background: none;
    border: 0;
    border-radius: var(--radius-small);
    color: inherit;
    opacity: 0.65;
    cursor: pointer;
    font: inherit;
    line-height: 1;
}
.badge-copy:hover { opacity: 1; }
.badge-copy:focus-visible { opacity: 1; outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.badge--scoped { --badge-gap: 0px; padding-inline-start: 0; overflow: hidden; }
.badge-key {
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-block: calc(var(--space-1) * -1);
    margin-inline-end: var(--space-3);
    padding-inline: var(--space-4) var(--space-3);
    background: var(--badge-bg);
    color: var(--fg-soft);
    border-inline-end: 1px solid var(--border);
}
.badge--sm .badge-key { margin-block: 0; padding-inline: var(--space-3) var(--space-2); margin-inline-end: var(--space-2); }
.badge--lg .badge-key { margin-block: calc(var(--space-2) * -1); padding-inline-start: var(--space-5); }
.badge--swatch { --label-colour: var(--muted); --badge-dot: 8px; }
.badge--sm.badge--swatch { --badge-dot: 6px; }
.badge--swatch::before {
    content: '';
    width: var(--badge-dot);
    height: var(--badge-dot);
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--label-colour);
}
.badge--swatch-outline { border-color: var(--label-colour); }
button.badge-more {
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    background: transparent;
    border-style: dashed;
    border-color: var(--border-hover);
    color: var(--fg-soft);
}
button.badge-more:hover { background: var(--badge-bg); color: var(--fg); }
button.badge-more:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
}
@layer sedna.paint {
.count-host {
    --count-inset: 2px;
    --count-size: 14px;
    --count-dot: 8px;
    --count-text: var(--text-1);
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}
.count-host--round { --count-inset: round(14.6%, 1px); }
.btn.count-host    { --count-inset: 3px; }
.count-host:not(.btn, .count-host--round):has(> i) { --count-inset: -2px; }
.count-host:not(.btn, .count-host--round) > .count-badge--lg { --count-inset: 2px; }
.btn--sm.count-host,
.count-host:not(.btn):has(> i),
.count-host:has(> .avatar--sm),
.count-badge--sm { --count-size: 12px; --count-dot: 6px; --count-text: var(--text-1); --count-pad: var(--space-1); }
.btn--lg.count-host,
.count-host:has(> .avatar--lg),
.count-badge--lg { --count-size: 16px; --count-dot: 10px; --count-text: var(--text-2); --count-pad: var(--space-2); }
.count-badge {
    position: absolute;
    inset-block-start: var(--count-inset);
    inset-inline-start: calc(100% - var(--count-inset) - var(--count-size, 14px) / 2);
    translate: 0 -50%;
    box-sizing: border-box;
    min-width: var(--count-size, 14px);
    height: var(--count-size, 14px);
    padding: 0 var(--count-pad, var(--space-2));
    border-radius: var(--radius-pill);
    background: var(--brand);
    color: var(--on-solid);
    font-family: var(--font-sans);
    font-size: var(--count-text, var(--text-1));
    font-weight: 700;
    line-height: 1;
    text-align: center;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-box: trim-both cap alphabetic;
    align-content: center;
    box-shadow: 0 0 0 2px var(--surface-here, var(--bg));
    pointer-events: none;
    print-color-adjust: exact;
}
.count-badge:empty {
    min-width: 0;
    width: var(--count-dot, 8px);
    height: var(--count-dot, 8px);
    padding: 0;
    inset-inline-start: calc(100% - var(--count-inset) - var(--count-dot, 8px) / 2);
}
}
@layer sedna.paint {
.kbd {
    display: inline-flex;
    align-items: center;
    padding: 1px var(--space-2);
    background: var(--code-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-small);
    color: var(--code-fg);
    font-family: var(--font-mono);
    font-size: var(--text-2);
    line-height: round(1.5em, 2px);
}
.kbd i { font-size: 1.05em; line-height: 1; }
.kbd--sm { font-size: var(--text-1); padding-inline: var(--space-1); }
.kbd--lg { font-size: var(--text-3); padding-inline: var(--space-3); }
.kbd-combo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    white-space: nowrap;
    vertical-align: middle;
    font: inherit;
}
.kbd-combo > .kbd { min-width: 1.75em; box-sizing: border-box; justify-content: center; text-align: center; }
.kbd-combo > .kbd--sm { min-width: 1.6em; }
.kbd-combo-sep {
    color: var(--muted);
    font-size: var(--text-1);
    text-box: trim-both cap alphabetic;
    padding-block: var(--cap-gap);
}
.btn > .kbd-combo { margin-inline-start: auto; padding-inline-start: var(--space-4); }
.kbd:not(:has(> *))    { display: inline-block; text-box: trim-both cap alphabetic; padding-block: calc(1px + var(--cap-gap)); }
}
@layer sedna.paint {
.table { width: 100%; border-collapse: collapse; }
.table th, .table td {
    text-align: start;
    padding: var(--cell-pad-y) var(--cell-pad-x);
    border-bottom: 1px solid var(--border);
    line-height: round(1.5em, 2px);
}
.table :is(th, td):not(:has(*)) {
    text-box: trim-both cap alphabetic;
    padding-block: calc(var(--cell-pad-y) + var(--cap-gap));
}
.table th {
    background: var(--table-head-bg);
    font-weight: 600;
    color: var(--muted);
    font-size: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.tr-clickable { cursor: pointer; user-select: none; }
.tr-clickable:hover > td,
.tr-clickable:hover::after { background: var(--bg-hover); }
.col-muted { color: var(--muted); font-size: var(--text-3); white-space: nowrap; }
}
@layer sedna.paint {
.btn {
    --btn-pad-x: var(--space-7);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--btn-gap);
    min-height: var(--control-height);
    padding: var(--space-3) var(--btn-pad-x);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--bg-elevated);
    color: var(--fg);
    font-size: var(--text-4);
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    line-height: round(1.4em, 2px);
    white-space: nowrap;
    text-decoration: none;
    transition: background var(--motion-fast), border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.btn i { font-size: var(--text-6); line-height: 1; }
.btn:hover         { background: var(--bg-hover); border-color: var(--border-strong); text-decoration: none; }
.btn:active        { background: var(--btn-active-bg); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring); }
.btn:disabled      { cursor: not-allowed; }
.btn--sm   { --btn-pad-x: var(--space-5); min-height: var(--control-height-sm); padding-block: var(--space-2); font-size: var(--text-3); }
.btn--sm i { font-size: var(--text-4); }
.btn--lg   { --btn-pad-x: var(--space-9); min-height: var(--control-height-lg); padding-block: var(--space-4); font-size: var(--text-5); }
.btn--lg i { font-size: var(--text-8); }
.btn:not(.btn--icon):has(> i:first-child:not(:only-child)) { padding-inline-start: calc(var(--btn-pad-x) - var(--space-2)); }
.btn:not(.btn--icon):has(> i:last-child:not(:only-child))  { padding-inline-end:   calc(var(--btn-pad-x) - var(--space-2)); }
.btn.btn--fill { display: flex; width: 100%; white-space: normal; }
.btn.btn--wrap { white-space: normal; text-align: start; justify-content: flex-start; overflow-wrap: anywhere; }
.btn[aria-busy="true"] {
    position: relative;
    -webkit-text-fill-color: transparent;
    cursor: progress;
    pointer-events: none;
}
.btn[aria-busy="true"] > :is(svg, img) { visibility: hidden; }
.btn[aria-busy="true"]::after {
    content: '';
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    width: round(1em + 4px, 2px);
    height: round(1em + 4px, 2px);
    margin: auto;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    border-radius: 50%;
    animation: sedna-spin var(--spin-duration) linear infinite;
}
.btn:not(:has(> *)) {
    display: inline-block;
    align-content: center;
    text-align: center;
    text-box: trim-both cap alphabetic;
}
.btn.btn--wrap:not(:has(> *)) { text-align: start; }
}
@layer sedna.paint {
.form-field { display: flex; flex-direction: column; gap: var(--space-3); }
.form-label {
    font-size: var(--text-2);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}
.form-input,
.form-select {
    min-height: var(--control-height);
    padding: var(--space-3) var(--space-5);
    background: var(--bg);
    border: 1px solid var(--field-border);
    border-radius: var(--radius-control);
    color: var(--fg);
    font-size: var(--text-4);
    font-family: inherit;
    line-height: round(1.4em, 2px);
    width: 100%;
    transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.form-input:focus,
.form-select:focus {
    outline: none;
    border-color: var(--field-border-focus);
    box-shadow: 0 0 0 2px var(--brand-glow);
}
.form-input::placeholder { color: var(--placeholder); }
textarea.form-input { resize: vertical; }
textarea.form-input--resize-none { resize: none; }
textarea.form-input--resize-both { resize: both; }
textarea.form-input::-webkit-resizer {
    background: linear-gradient(-45deg, transparent 0 4px, var(--scrollbar) 4px 5px,
                transparent 5px 7px, var(--scrollbar) 7px 8px, transparent 8px);
}
.form-input--sm { min-height: var(--control-height-sm); padding: var(--space-2) var(--space-4); font-size: var(--text-3); }
.form-input--lg { min-height: var(--control-height-lg); padding: var(--space-5) var(--space-7); font-size: var(--text-5); }
.form-value-display {
    display: flex;
    align-items: center;
    min-height: var(--control-height);
    padding: var(--space-3) var(--space-5);
    background: var(--surface-soft);
    border: 1px solid var(--field-border);
    border-radius: var(--radius-control);
    font-size: var(--text-4);
}
.form-check {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    font-size: var(--text-4);
    cursor: pointer;
    user-select: none;
}
.form-check input[type="checkbox"] {
    appearance: none;
    margin: 0;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    cursor: pointer;
    background: var(--bg);
    border: 1px solid var(--control-border);
    border-radius: var(--radius-small);
    position: relative;
    transition: background var(--motion-fast), border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.form-check input[type="checkbox"]:hover { border-color: var(--border-hover); }
.form-check input[type="checkbox"]:is(:checked, :indeterminate, [aria-checked="mixed"]) {
    background: var(--control-on);
    border-color: var(--control-on);
}
.form-check input[type="checkbox"]:checked::after,
.tree [aria-checked="true"] > .tree-row > .tree-check::after,
.form-combo-option[aria-selected="true"]::after,
.listbox [role="option"][aria-selected="true"]::after,
.menu-item[aria-current]:not([aria-current="false"])::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--on-solid);
    mask-image:
        linear-gradient(45deg, transparent calc(50% - 4.5px), currentColor calc(50% - 3.5px),
            currentColor calc(50% + 5.5px), transparent calc(50% + 6.5px)),
        linear-gradient(135deg, transparent calc(50% - 4.5px), currentColor calc(50% - 3.5px),
            currentColor calc(50% + 1.5px), transparent calc(50% + 2.5px)),
        linear-gradient(45deg, transparent calc(50% - 4.5px), currentColor calc(50% - 3.5px),
            currentColor calc(50% - 2.5px), transparent calc(50% - 1.5px)),
        linear-gradient(135deg, transparent calc(50% - 0.5px), currentColor calc(50% + 0.5px),
            currentColor calc(50% + 1.5px), transparent calc(50% + 2.5px));
    mask-composite: intersect, intersect, add;
    mask-repeat: no-repeat;
}
.form-check input[type="checkbox"]:is(:indeterminate, [aria-checked="mixed"])::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--on-solid);
    mask-image: linear-gradient(currentColor, currentColor);
    mask-size: 7px 2px;
    mask-position: 50% 50%;
    mask-repeat: no-repeat;
    mask-composite: add;
}
.form-check input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--focus-ring);
}
.form-check:has(input:disabled) { color: var(--disabled-fg); cursor: not-allowed; }
.form-check input:disabled { opacity: var(--disabled-opacity); cursor: not-allowed; }
.form-check:has(> .form-check-count) { display: flex; }
.form-check-count {
    margin-inline-start: auto;
    padding-inline-start: var(--space-4);
    color: var(--muted);
    font-size: var(--text-2);
    font-variant-numeric: tabular-nums;
    text-box: trim-both cap alphabetic;
    padding-block: var(--cap-gap);
}
.form-input:disabled,
.form-select:disabled,
.form-input[readonly] { cursor: not-allowed; background: var(--disabled-bg); border-color: var(--disabled-border); color: var(--disabled-fg); }
.form-input[readonly] { cursor: text; color: var(--fg); }
.form-hint { font-size: var(--text-3); color: var(--muted); margin: 0; }
}
@layer sedna.paint {
.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    margin-bottom: var(--space-7);
    flex-wrap: wrap;
}
.toolbar-filters { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.toolbar-actions { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-inline-start: auto; }
.toolbar-input { --toolbar-input-width: 160px; width: var(--toolbar-input-width); max-inline-size: 100%; }
.toolbar-input--wide { --toolbar-input-width: 280px; }
.toolbar-input--grow { --toolbar-input-width: auto; flex: 1 1 12rem; min-width: 12rem; }
.input-group.toolbar-input { width: var(--toolbar-input-width); }
.toolbar-count { font-size: var(--text-3); color: var(--muted); white-space: nowrap; }
}
@layer sedna.paint {
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: var(--backdrop);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 500;
    backdrop-filter: blur(2px);
}
.modal {
    --surface-here: var(--bg-elevated);
    --muted-here: var(--muted);
    --modal-max-height: calc(100dvh - 2 * var(--space-8) - var(--safe-block-start) - var(--safe-block-end));
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-panel);
    --modal-width: 480px;
    width: 100%;
    max-width: var(--modal-width);
    max-height: var(--modal-max-height);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-modal);
}
.modal--sm   { --modal-width: 360px; }
.modal--lg   { --modal-width: 760px; }
.modal--xl   { --modal-width: 1140px; }
.modal--full { --modal-width: calc(100% - 2 * var(--space-8) - var(--safe-inline-start) - var(--safe-inline-end)); }
dialog.modal {
    padding: 0;
    color: var(--fg);
    --dialog-backdrop: var(--backdrop);
    animation: sedna-modal-in var(--motion-fast) ease;
}
dialog.modal:not([open]) { display: none; }
dialog.modal::backdrop {
    background: var(--dialog-backdrop);
    backdrop-filter: blur(2px);
}
.modal > form { display: contents; }
@keyframes sedna-modal-in {
    from { opacity: 0; transform: translateY(-10px) scale(0.97); }
    to   { opacity: 1; transform: none; }
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    padding: var(--space-7) var(--space-8);
    border-bottom: 1px solid var(--border);
    background: var(--modal-head-bg);
    border-start-start-radius: calc(var(--radius-panel) - 1px);
    border-start-end-radius: calc(var(--radius-panel) - 1px);
}
.modal-header h3 { margin: 0; font-size: var(--text-6); font-weight: 600; }
.modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    background: none;
    border: none;
    border-radius: var(--radius-inner);
    color: var(--muted);
    cursor: pointer;
    font-size: var(--text-8);
    padding: 0;
    transition: background var(--motion-fast), color var(--motion-fast);
}
.modal-close:hover { background: var(--bg-hover); color: var(--fg); }
.modal-close:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring); }
.modal-body {
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-7);
    overflow-y: auto;
    min-height: 0;
}
:where(.modal-body) p { margin: 0; }
:where(.modal-body) > :is(p, ul, ol, dl, h1, h2, h3, h4, h5, h6):where(:first-child) { margin-block-start: 0; }
:where(.modal-body) > :is(p, ul, ol, dl, h1, h2, h3, h4, h5, h6):where(:last-child) { margin-block-end: 0; }
.modal-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    flex-shrink: 0;
    gap: var(--space-4);
    padding: var(--space-7) var(--space-8);
    border-top: 1px solid var(--border);
    background: var(--modal-foot-bg);
    border-end-start-radius: calc(var(--radius-panel) - 1px);
    border-end-end-radius: calc(var(--radius-panel) - 1px);
}
.deck { --deck-height: 320px; }
.deck-body {
    display: flex;
    height: var(--deck-height);
    overflow-y: auto;
    padding: var(--space-8);
}
.deck-step {
    width: 100%;
    margin: auto 0;
    animation: sedna-deck-in var(--motion-mid) ease;
}
:where(.deck-step) :is(h1, h2, h3, h4, h5, h6, p) { margin: 0; }
:where(.deck-step) :is(h1, h2, h3, h4, h5, h6) + p { margin-block-start: var(--space-2); }
:where(.deck-step) p + p { margin-block-start: var(--space-3); }
:where(.deck-step) > :is(p, ul, ol, dl, h1, h2, h3, h4, h5, h6):where(:first-child) { margin-block-start: 0; }
:where(.deck-step) > :is(p, ul, ol, dl, h1, h2, h3, h4, h5, h6):where(:last-child) { margin-block-end: 0; }
@keyframes sedna-deck-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
.deck-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    gap: var(--space-6);
    padding: var(--space-7) var(--space-8);
    border-top: 1px solid var(--border);
}
.deck-dots { display: flex; align-items: center; gap: var(--space-3); }
.deck-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border-hover);
    transition: background var(--motion-fast), width var(--motion-fast);
}
.deck-dot--active,
.deck-dot[aria-current] { width: 18px; border-radius: var(--radius-pill); background: var(--brand); }
button.deck-dot {
    position: relative;
    padding: 0;
    border: none;
    appearance: none;
    cursor: pointer;
}
button.deck-dot::before {
    content: '';
    position: absolute;
    inset-block: -9px;
    inset-inline: -3px;
}
button.deck-dot:hover { background: var(--muted); }
button.deck-dot[aria-current]:hover { background: var(--brand); }
button.deck-dot:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
}
@layer sedna.paint {
.alert {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-7);
    border-radius: var(--radius-surface);
    font-size: var(--text-4);
    margin-bottom: var(--space-7);
    border: 1px solid var(--border);
    background: var(--surface-soft);
    color: var(--fg);
    overflow-wrap: anywhere;
}
.alert > * { min-width: 0; }
.alert i { font-size: var(--text-7); flex-shrink: 0; }
.alert > :is(.btn, button) { flex-shrink: 0; }
}
@layer sedna.paint {
.toast-stack {
    position: fixed;
    inset: auto;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: visible;
    background: transparent;
    color: inherit;
    inset-block-end: calc(var(--space-8) + var(--safe-block-end));
    inset-block-end: calc(var(--space-8) + anchor-size(--sedna-bottombar block, var(--safe-block-end)));
    inset-inline-end: calc(var(--space-8) + var(--safe-inline-end));
    z-index: 600;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    pointer-events: none;
}
.toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: var(--space-5);
    width: 320px;
    max-width: min(calc(100vw - 40px), 100%);
    padding: var(--space-5) var(--space-6);
    --surface-here: var(--bg-elevated);
    --muted-here: var(--muted);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-inline-start: 3px solid var(--border-strong);
    border-radius: var(--radius-surface);
    box-shadow: var(--shadow-float);
    font-size: var(--text-4);
    color: var(--fg-soft);
}
.toast:not(:has(strong)) { align-items: center; }
.toast          { --row-line: 1lh; }
.toast i        { font-size: var(--text-7); flex-shrink: 0; color: var(--muted); }
.toast > i      { margin-block-start: calc((var(--row-line) - 1em) / 2); }
.toast:not(:has(strong)) > i { margin-block-start: 0; }
.toast > .spinner { flex-shrink: 0; font-size: var(--text-7); margin-block-start: calc((var(--row-line) - 1em) / 2); }
.toast:not(:has(strong)) > .spinner { margin-block-start: 0; }
.toast strong   { display: block; color: var(--fg); font-weight: 600; }
.toast-body     { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.toast-body:not(:has(> strong)) { text-box: trim-both cap alphabetic; padding-block: var(--cap-gap); }
.toast-close {
    flex-shrink: 0;
    background: none; border: none; padding: 0;
    color: var(--muted); font-size: var(--text-6); cursor: pointer;
    line-height: 1;
}
.toast-close:hover { color: var(--fg); }
:is(a, button).toast-body {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-small);
    background: none;
    color: inherit;
    font: inherit;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}
:is(a, button).toast-body:hover > strong { text-decoration: underline; }
:is(a, button).toast-body:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring); }
.toast-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-block-start: var(--space-4);
}
.toast-stack--pile {
    --toast-pile-step: var(--space-4);
    display: grid;
    align-items: end;
}
.toast-stack--pile > .toast {
    position: relative;
    grid-area: 1 / 1;
    transform-origin: 50% 0;
    transition: transform var(--motion-mid) ease, opacity var(--motion-mid) ease;
}
.toast-stack--pile > .toast:not(:last-child) {
    height: 0;
    min-height: 100%;
    overflow: hidden;
}
.toast-stack--pile > .toast:not(:last-child) > * { opacity: 0; }
.toast-stack--pile > .toast:nth-last-child(2) { transform: translateY(calc(var(--toast-pile-step) * -1)) scale(0.95); }
.toast-stack--pile > .toast:nth-last-child(3) { transform: translateY(calc(var(--toast-pile-step) * -2)) scale(0.9); }
.toast-stack--pile > .toast:nth-last-child(n+4) { transform: translateY(calc(var(--toast-pile-step) * -2)) scale(0.9); opacity: 0; }
.toast-stack--pile:is(:hover, :focus-within) {
    display: flex;
    align-items: normal;
    pointer-events: auto;
}
.toast-stack--pile:is(:hover, :focus-within) > .toast {
    height: auto;
    min-height: 0;
    overflow: visible;
    transform: none;
    opacity: 1;
}
.toast-stack--pile:is(:hover, :focus-within) > .toast > * { opacity: 1; }
.toast-stack > .toast[data-toast-queued] { display: none; }
[data-sedna-toasts] > .toast {
    --toast-swipe: 0px;
    --toast-swipe-progress: 0;
    touch-action: pan-y;
    translate: var(--toast-swipe) 0;
    transition: translate var(--motion-mid) ease, transform var(--motion-mid) ease, opacity var(--motion-mid) ease;
}
[data-sedna-toasts] > .toast[data-toast-swiping] {
    opacity: calc(1 - var(--toast-swipe-progress));
    transition: none;
    user-select: none;
}
}
@layer sedna.paint {
.spinner {
    display: inline-block;
    flex: none;
    box-sizing: border-box;
    width: round(1em, 2px);
    height: round(1em, 2px);
    border: 2px solid var(--border);
    border-top-color: var(--brand-soft);
    border-radius: 50%;
    animation: sedna-spin var(--spin-duration) linear infinite;
    vertical-align: -0.125em;
}
.spinner--sm { width: round(0.75em, 2px); height: round(0.75em, 2px); border-width: 1.5px; }
.spinner--lg { width: 24px; height: 24px; border-width: 3px; }
@keyframes sedna-spin { to { transform: rotate(360deg); } }
.splash {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-7);
    padding: max(var(--space-9), var(--safe-block-start)) max(var(--space-9), var(--safe-inline-end))
             max(var(--space-9), var(--safe-block-end)) max(var(--space-9), var(--safe-inline-start));
    background: var(--bg);
    color: var(--muted);
    font-size: var(--text-4);
    text-align: center;
}
}
@layer sedna.paint {
.skeleton {
    display: block;
    --skeleton-band: linear-gradient(90deg, transparent 0%, var(--skeleton-sheen) 50%, transparent 100%);
    background-color: var(--skeleton-bg);
    background-image: var(--skeleton-band);
    background-size: 50% 100%;
    background-repeat: no-repeat;
    background-position: -100% 0;
    border-radius: var(--radius-inner);
    animation: sedna-skeleton var(--skeleton-duration) ease-in-out infinite;
}
.skeleton-text {
    --skeleton-width: auto;
    --skeleton-height: 12px;
    width: var(--skeleton-width);
    height: var(--skeleton-height);
    margin: var(--space-3) 0;
}
.skeleton-title {
    --skeleton-width: auto;
    --skeleton-height: 18px;
    width: var(--skeleton-width);
    height: var(--skeleton-height);
    margin: var(--space-4) 0;
    border-radius: var(--radius-control);
}
.skeleton-avatar {
    --skeleton-size: 28px;
    width: var(--skeleton-size);
    height: var(--skeleton-size);
    border-radius: 50%;
    flex-shrink: 0;
}
.skeleton-block {
    --skeleton-width: auto;
    --skeleton-height: 8rem;
    width: var(--skeleton-width);
    height: var(--skeleton-height);
    border-radius: var(--radius-surface);
}
.skeleton-block--sm { --skeleton-height: 4rem; }
.skeleton-block--lg { --skeleton-height: 12rem; }
.skeleton-control {
    --skeleton-width: auto;
    --skeleton-height: var(--control-height);
    width: var(--skeleton-width);
    height: var(--skeleton-height);
    border-radius: var(--radius-control);
}
.skeleton-control--sm { --skeleton-height: var(--control-height-sm); }
.skeleton-control--lg { --skeleton-height: var(--control-height-lg); }
.skeleton-badge {
    --skeleton-width: 4rem;
    --skeleton-height: 18px;
    width: var(--skeleton-width);
    height: var(--skeleton-height);
    border-radius: var(--radius-pill);
}
.skeleton-circle {
    --skeleton-size: 36px;
    width: var(--skeleton-size);
    height: var(--skeleton-size);
    border-radius: 50%;
    flex-shrink: 0;
}
.skeleton-image {
    --skeleton-width: 100%;
    aspect-ratio: var(--media-ratio, 16 / 9);
    width: var(--skeleton-width);
    border-radius: var(--radius-surface);
}
.skeleton-bars {
    --skeleton-width: auto;
    --skeleton-height: 8rem;
    display: flex;
    align-items: flex-end;
    gap: var(--space-3);
    width: var(--skeleton-width);
    height: var(--skeleton-height);
}
.skeleton-bars > .skeleton {
    --bar: 50%;
    flex: 1;
    height: var(--bar);
    border-radius: var(--radius-inner) var(--radius-inner) 0 0;
}
@keyframes sedna-skeleton {
    from { background-position: -100% 0; }
    to   { background-position: 200% 0; }
}
}
@layer sedna.paint {
.progress {
    display: block;
    height: 6px;
    background: var(--progress-track);
    border-radius: var(--radius-pill);
    overflow: hidden;
}
.progress-bar {
    display: block;
    height: 100%;
    background: var(--brand);
    border-radius: inherit;
    transition: width var(--motion-slow) ease;
}
.progress-bar--go     { background: var(--go-solid); }
.progress-bar--warn   { background: var(--warn-solid); }
.progress-bar--danger { background: var(--danger-solid); }
.progress-bar--muted  { background: var(--muted); }
.progress-bar--sev-1 { background: var(--sev-1-solid); }
.progress-bar--sev-2 { background: var(--sev-2-solid); }
.progress-bar--sev-3 { background: var(--sev-3-solid); }
.progress-bar--sev-4 { background: var(--sev-4-solid); }
.progress-bar--sev-5 { background: var(--sev-5-solid); }
.progress--indeterminate .progress-bar {
    --progress-flow: 1;
    width: 35%;
    animation: sedna-progress var(--progress-duration) ease-in-out infinite;
}
@keyframes sedna-progress {
    from { translate: calc(var(--progress-flow) * -110%) 0; }
    to   { translate: calc(var(--progress-flow) * 340%) 0; }
}
.progress--route {
    position: fixed;
    inset-block-start: var(--safe-block-start);
    inset-inline: 0;
    z-index: 1000;
    height: 3px;
    background: transparent;
    border-radius: 0;
    pointer-events: none;
    animation: sedna-progress-route var(--motion-mid) ease var(--motion-slow) both;
}
@keyframes sedna-progress-route {
    from { opacity: 0; }
}
@property --progress {
    syntax: '<percentage>';
    inherits: true;
    initial-value: 0%;
}
.progress-ring {
    --progress: 0%;
    --progress-ring-size: 40px;
    --progress-ring-width: 4px;
    position: relative;
    display: inline-grid;
    place-items: center;
    inline-size: var(--progress-ring-size);
    block-size: var(--progress-ring-size);
    flex-shrink: 0;
    font-size: var(--text-2);
    font-variant-numeric: tabular-nums;
    color: var(--muted);
    transition: --progress var(--motion-slow) ease;
}
.progress-ring::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(var(--brand) var(--progress), var(--progress-track) 0);
    mask: radial-gradient(farthest-side, transparent calc(100% - var(--progress-ring-width)), currentColor calc(100% - var(--progress-ring-width) + 0.5px));
}
.progress-ring--sm { --progress-ring-size: 24px; --progress-ring-width: 3px; font-size: var(--text-1); }
.progress-ring--lg { --progress-ring-size: 64px; --progress-ring-width: 6px; font-size: var(--text-4); }
.progress-ring--round::before {
    background:
        radial-gradient(circle at 50% calc(var(--progress-ring-width) / 2),
            var(--brand) calc(var(--progress-ring-width) / 2 - 0.5px), transparent calc(var(--progress-ring-width) / 2)),
        conic-gradient(var(--brand) var(--progress), var(--progress-track) 0);
}
.progress-ring--round::after {
    --progress-ring-turn: calc(progress(var(--progress), 0%, 100%) * 360deg);
    --progress-ring-radius: calc((var(--progress-ring-size) - var(--progress-ring-width)) / 2);
    content: "";
    position: absolute;
    left: calc(50% + var(--progress-ring-radius) * sin(var(--progress-ring-turn)) - var(--progress-ring-width) / 2);
    top: calc(50% - var(--progress-ring-radius) * cos(var(--progress-ring-turn)) - var(--progress-ring-width) / 2);
    inline-size: var(--progress-ring-width);
    block-size: var(--progress-ring-width);
    border-radius: 50%;
    background: var(--brand);
}
}
@layer sedna.paint {
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-4);
    padding: var(--space-11) var(--space-9);
    color: var(--muted);
}
.state-art,
.state-icon { margin-bottom: var(--space-4); }
.empty-state-title { font-size: var(--text-5); font-weight: 600; color: var(--fg); }
.empty-state p     { margin: 0; font-size: var(--text-4); max-width: 44ch; }
.empty-state .btn  { margin-top: var(--space-3); }
.empty-state--bare { padding: var(--space-9) 0; }
.empty-state--pending > .spinner,
.empty-state--pending > .spinner--lg {
    width: 40px;
    height: 40px;
    margin-bottom: var(--space-4);
    border-width: 3px;
    color: var(--muted);
}
.empty-state--failed { --state-accent: var(--danger-fg); }
.empty-state--pending { --state-motion: running; }
.empty-state--failed .state-icon { color: var(--danger-fg); }
.empty-state-detail {
    max-width: 44ch;
    font-family: var(--font-mono);
    font-size: var(--text-2);
    color: var(--muted);
    overflow-wrap: anywhere;
}
.empty-state--page {
    flex: 1;
    min-height: 0;
    justify-content: center;
    gap: var(--space-5);
    padding-block: var(--space-11);
}
.empty-state--page .state-art,
.empty-state--page .state-icon { margin-bottom: var(--space-5); }
.empty-state--page .empty-state-title { font-size: var(--text-9); }
.empty-state--page p { font-size: var(--text-5); max-width: 52ch; }
.empty-state--page.empty-state--pending > .spinner,
.empty-state--page.empty-state--pending > .spinner--lg { width: 56px; height: 56px; border-width: 4px; }
.empty-state-code {
    font-family: var(--font-mono);
    font-size: var(--text-2);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}
.empty-state-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-5);
    margin-top: var(--space-3);
}
.empty-state-actions .btn { margin-top: 0; }
}
@layer sedna.paint {
.state-art {
    display: block;
    flex-shrink: 0;
    width: 96px;
    height: 96px;
    color: var(--muted);
}
.state-art--sm { width: 56px; height: 56px; }
.state-art--lg { width: 152px; height: 152px; }
.state-art--go     { --state-accent: var(--go-fg); }
.state-art--warn   { --state-accent: var(--warn-fg); }
.state-art--danger { --state-accent: var(--danger-fg); }
.state-art--info   { --state-accent: var(--info-fg); }
.state-art--live { --state-motion: running; }
.sedna-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}
.sedna-art-line,
.sedna-art-soft,
.sedna-art-accent {
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.sedna-art-soft { opacity: 0.4; }
.sedna-art-dash { stroke-dasharray: 6 7; }
.sedna-art-accent { stroke: var(--state-accent); }
.sedna-art-accent-fill { fill: var(--state-accent); stroke: none; }
.sedna-art-tint { fill: currentColor; stroke: none; opacity: 0.07; }
.sedna-art-knockout { fill: var(--surface-here, var(--bg)); stroke: none; }
.sedna-art-bob,
.sedna-art-sweep,
.sedna-art-nudge,
.sedna-art-blink,
.sedna-art-tick,
.sedna-art-twinkle {
    animation-play-state: var(--state-motion);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
.sedna-art-bob     { animation-name: sedna-art-bob;     animation-duration: 2.4s; }
.sedna-art-sweep   { animation-name: sedna-art-sweep;   animation-duration: 3.2s; }
.sedna-art-nudge   { animation-name: sedna-art-nudge;   animation-duration: 1.8s; }
.sedna-art-blink   { animation-name: sedna-art-blink;   animation-duration: 1.6s; }
.sedna-art-tick {
    animation-name: sedna-art-tick;
    animation-duration: 12s;
    animation-timing-function: linear;
    transform-box: view-box;
    transform-origin: 88px 80px;
}
.sedna-art-twinkle {
    animation-name: sedna-art-twinkle;
    animation-duration: 2s;
    transform-box: fill-box;
    transform-origin: center;
}
@keyframes sedna-art-bob     { 0%, 100% { transform: translateY(0); }   50% { transform: translateY(5px); } }
@keyframes sedna-art-sweep   { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-7px, 3px); } }
@keyframes sedna-art-nudge   { 0%, 100% { transform: translateX(0); }   50% { transform: translateX(6px); } }
@keyframes sedna-art-blink   { 0%, 100% { opacity: 1; }                 50% { opacity: 0.2; } }
@keyframes sedna-art-tick    { to { transform: rotate(360deg); } }
@keyframes sedna-art-twinkle { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.7); opacity: 0.45; } }
.state-icon {
    display: block;
    flex-shrink: 0;
    font-size: var(--text-11);
    line-height: 1;
    color: var(--border-strong);
}
.state-icon--sm { font-size: var(--text-10); }
.state-icon--lg { font-size: calc(var(--text-11) * 1.6); }
}
@layer sedna.paint {
.sedna-grid {
    --grid-min: 280px;
    --grid-max: 24;
    --grid-gap: var(--space-7);
    --grid-track: max(var(--grid-min), (100% - (var(--grid-max) - 1) * var(--grid-gap)) / var(--grid-max));
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--grid-track), 100%), 1fr));
    gap: var(--grid-gap);
}
.sedna-grid--fit { grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-track), 100%), 1fr)); }
.sedna-grid--sm  { --grid-min: 200px; }
.sedna-grid--lg  { --grid-min: 340px; }
.sedna-grid-24 {
    --grid-gap: var(--space-7);
    container: sedna-grid-24 / inline-size;
    display: grid;
    grid-template-columns: repeat(24, minmax(0, 1fr));
    gap: var(--grid-gap);
    column-gap: min(var(--grid-gap), 100% / 23);
}
:where(.sedna-grid-24) > * {
    --span: 24;
    --span-md: 24;
    grid-column: span var(--span);
    min-width: 0;
}
@container sedna-grid-24 (width < 48rem) {
    :where(.sedna-grid-24) > * { grid-column: span var(--span-md); }
}
@container sedna-grid-24 (width < 30rem) {
    :where(.sedna-grid-24) > * { grid-column: span 24; }
}
.sedna-span-1  { --span: 1;  --span-md: 12; }
.sedna-span-2  { --span: 2;  --span-md: 12; }
.sedna-span-3  { --span: 3;  --span-md: 12; }
.sedna-span-4  { --span: 4;  --span-md: 12; }
.sedna-span-5  { --span: 5;  --span-md: 12; }
.sedna-span-6  { --span: 6;  --span-md: 12; }
.sedna-span-7  { --span: 7;  --span-md: 12; }
.sedna-span-8  { --span: 8;  --span-md: 24; }
.sedna-span-9  { --span: 9;  --span-md: 24; }
.sedna-span-10 { --span: 10; --span-md: 24; }
.sedna-span-11 { --span: 11; --span-md: 24; }
.sedna-span-12 { --span: 12; --span-md: 24; }
.sedna-span-13 { --span: 13; --span-md: 24; }
.sedna-span-14 { --span: 14; --span-md: 24; }
.sedna-span-15 { --span: 15; --span-md: 24; }
.sedna-span-16 { --span: 16; --span-md: 24; }
.sedna-span-17 { --span: 17; --span-md: 24; }
.sedna-span-18 { --span: 18; --span-md: 24; }
.sedna-span-19 { --span: 19; --span-md: 24; }
.sedna-span-20 { --span: 20; --span-md: 24; }
.sedna-span-21 { --span: 21; --span-md: 24; }
.sedna-span-22 { --span: 22; --span-md: 24; }
.sedna-span-23 { --span: 23; --span-md: 24; }
.sedna-span-24 { --span: 24; --span-md: 24; }
.sedna-row-span-2 { grid-row: span 2; }
.sedna-row-span-3 { grid-row: span 3; }
.sedna-row-span-4 { grid-row: span 4; }
.sedna-grid-24--rows {
    --grid-row: 9rem;
    grid-auto-rows: var(--grid-row);
}
.sedna-grid-24--dense { grid-auto-flow: row dense; }
.sedna-stack {
    display: flex;
    flex-direction: column;
    gap: var(--grid-gap, var(--space-7));
    min-width: 0;
}
.sedna-span-full { grid-column: 1 / -1; min-width: 0; }
.sedna-split {
    --split-aside: 18rem;
    --split-main: 60%;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-7);
}
.sedna-split > * {
    flex: 999 1 0;
    min-inline-size: min(var(--split-main), 100%);
}
.sedna-split > .sedna-split-aside {
    flex: 1 1 var(--split-aside);
    min-inline-size: 0;
}
.sedna-split--sm { --split-aside: 14rem; }
.sedna-split--lg { --split-aside: 24rem; }
.split-resize {
    flex: 0 0 var(--space-7);
    align-self: stretch;
    min-inline-size: 0;
    margin-inline: calc(var(--space-7) * -1);
    cursor: ew-resize;
    touch-action: none;
    position: relative;
}
.split-resize::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: calc(50% - 1px);
    inline-size: 2px;
    background: var(--border);
    transition: background var(--motion-fast);
}
.split-resize:hover::before,
.split-resize:focus-visible::before,
.split-resize[data-resizing]::before { background: var(--selected); }
.split-resize:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring); border-radius: var(--radius-inner); }
.sedna-split--even > *,
.sedna-split--even > .sedna-split-aside { flex: 1 1 var(--split-aside); min-inline-size: 0; }
.sedna-split:is(.sedna-split--stack-sm, .sedna-split--stack-md, .sedna-split--stack-lg) {
    container: sedna-split / inline-size;
}
.sedna-split:is(.sedna-split--stack-sm, .sedna-split--stack-md, .sedna-split--stack-lg) > * { min-inline-size: 0; }
@container sedna-split (width >= 560px) {
    .sedna-split--stack-sm.sedna-split--sticky > .sedna-split-aside { position: sticky; inset-block-start: var(--space-7); align-self: flex-start; }
}
@container sedna-split (width >= 900px) {
    .sedna-split--stack-md.sedna-split--sticky > .sedna-split-aside { position: sticky; inset-block-start: var(--space-7); align-self: flex-start; }
}
@container sedna-split (width >= 1200px) {
    .sedna-split--stack-lg.sedna-split--sticky > .sedna-split-aside { position: sticky; inset-block-start: var(--space-7); align-self: flex-start; }
}
@container sedna-split (width < 560px) {
    .sedna-split--stack-sm > * { flex-basis: 100%; }
    .sedna-split--stack-sm > .split-resize { display: none; }
    .sedna-split--stack-sm.sedna-split--aside-first > .sedna-split-aside { order: -1; }
}
@container sedna-split (width < 900px) {
    .sedna-split--stack-md > * { flex-basis: 100%; }
    .sedna-split--stack-md > .split-resize { display: none; }
    .sedna-split--stack-md.sedna-split--aside-first > .sedna-split-aside { order: -1; }
}
@container sedna-split (width < 1200px) {
    .sedna-split--stack-lg > * { flex-basis: 100%; }
    .sedna-split--stack-lg > .split-resize { display: none; }
    .sedna-split--stack-lg.sedna-split--aside-first > .sedna-split-aside { order: -1; }
}
.panel-grid {
    --panel-cols: 24;
    --panel-row: 3rem;
    --grid-gap: var(--space-7);
    --panel-drop-x: 0;
    --panel-drop-y: 0;
    --panel-drop-w: 1;
    --panel-drop-h: 1;
    container: panel-grid / inline-size;
    display: grid;
    grid-template-columns: repeat(var(--panel-cols), minmax(0, 1fr));
    grid-auto-rows: var(--panel-row);
    gap: var(--grid-gap);
    --panel-gap-x: min(var(--grid-gap), 100% / max(1, calc(var(--panel-cols) - 1)));
    column-gap: var(--panel-gap-x);
}
:where(.panel-grid > *) {
    --panel-x: 0;
    --panel-y: 0;
    --panel-w: 1;
    --panel-h: 1;
    --panel-preview-x: initial;
    --panel-preview-y: initial;
    --panel-preview-w: initial;
    --panel-preview-h: initial;
    --panel-stacked: 0;
}
.panel-grid > * {
    grid-column: calc(var(--panel-preview-x, var(--panel-x)) + 1) / span var(--panel-preview-w, var(--panel-w));
    grid-row: calc(var(--panel-preview-y, var(--panel-y)) + 1) / span var(--panel-preview-h, var(--panel-h));
    min-inline-size: 0;
    min-block-size: 0;
}
.panel-grid > .card--resizable { block-size: auto; max-block-size: none; inline-size: auto; }
.panel-grid[data-arrange] {
    --panel-guide-dot: var(--border-strong);
    position: relative;
}
:where(.panel-grid[data-arrange] > *) { z-index: 1; }
.panel-grid[data-arrange]::after {
    --panel-pitch-x: calc((100% + var(--panel-gap-x)) / var(--panel-cols));
    --panel-dot-x: max(0px, calc((var(--panel-pitch-x) - var(--panel-gap-x)) / 2 - 1px));
    --panel-dot-y: calc(var(--panel-row) / 2 - 1px);
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: var(--panel-guide-dot);
    mask:
        repeating-linear-gradient(90deg, transparent 0 var(--panel-dot-x),
            currentColor var(--panel-dot-x) calc(var(--panel-dot-x) + 2px),
            transparent calc(var(--panel-dot-x) + 2px) var(--panel-pitch-x)),
        repeating-linear-gradient(180deg, transparent 0 var(--panel-dot-y),
            currentColor var(--panel-dot-y) calc(var(--panel-dot-y) + 2px),
            transparent calc(var(--panel-dot-y) + 2px) calc(var(--panel-row) + var(--grid-gap)));
    mask-composite: intersect;
}
.panel-grid:not([data-arrange]) [data-drag-handle]:not(.panel-grid [data-drag-zone] *),
.panel-grid:not([data-arrange]) > * > [data-resize] { display: none; }
.panel-grid[data-drop-over]::before {
    content: "";
    grid-column: calc(var(--panel-drop-x) + 1) / span var(--panel-drop-w);
    grid-row: calc(var(--panel-drop-y) + 1) / span var(--panel-drop-h);
    border: 2px dashed var(--brand);
    border-radius: var(--radius-surface);
    background: var(--brand-tint);
    pointer-events: none;
}
@container panel-grid (width < 560px) {
    .panel-grid > * {
        --panel-stacked: 1;
        grid-column: span var(--panel-cols);
        grid-row: auto / span var(--panel-h);
        order: calc(var(--panel-y) * 1000 + var(--panel-x));
    }
    .panel-grid [data-drag-handle]:not(.panel-grid [data-drag-zone] *),
    .panel-grid > * > [data-resize] { display: none; }
}
}
@layer sedna.paint {
.editor {
    display: flex;
    flex-direction: column;
    background: var(--bg);
    border: 1px solid var(--field-border);
    border-radius: var(--radius-control);
    --surface-here: var(--bg);
    --muted-here: var(--muted);
    --editor-max-height: 480px;
    transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.editor:focus-within { border-color: var(--field-border-focus); box-shadow: 0 0 0 2px var(--brand-glow); }
.editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2);
    border-bottom: 1px solid var(--divider);
}
.editor-toolbar [aria-pressed="true"] { background: var(--brand-tint); color: var(--brand-text); }
.editor-toolbar .form-select { inline-size: auto; flex: none; }
.editor-sep {
    align-self: stretch;
    inline-size: 1px;
    margin: var(--space-1) var(--space-2);
    background: var(--divider);
}
.editor-body {
    min-block-size: 160px;
    max-block-size: var(--editor-max-height);
    overflow-y: auto;
    padding: var(--space-5) var(--space-6);
    max-width: none;
}
.editor-body [contenteditable]:focus,
.editor-body[contenteditable]:focus { outline: none; }
.md-editor {
    border: 1px solid var(--border);
    border-radius: var(--radius-panel);
    overflow: hidden;
    --surface-here: var(--card-bg);
    --muted-here: var(--muted);
    background: var(--card-bg);
}
.md-toolbar {
    display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap;
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border);
    background: var(--bg-elevated);
}
.md-tool {
    background: none; border: none; border-radius: var(--radius-control); cursor: pointer;
    color: var(--fg-soft); font-size: var(--text-6);
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
}
.md-tool:hover { background: var(--bg-hover); color: var(--fg); }
.md-tool[aria-pressed="true"] { background: var(--brand-tint); color: var(--brand-text); }
.md-toolbar .segmented { margin-inline-start: auto; min-height: var(--control-height-sm); }
.md-toolbar .segmented-option { padding-block: var(--space-1); font-size: var(--text-3); }
.md-editor .md-input {
    border: none; border-radius: 0; background: transparent;
    width: 100%; display: block;
    font-family: var(--font-mono); font-size: var(--text-3); resize: vertical;
}
.md-editor .md-preview {
    display: none; box-sizing: border-box;
    padding: var(--space-6) var(--space-7); min-height: 140px;
    overflow-y: auto; resize: vertical;
}
.md-editor[data-md-view="preview"] .md-input   { display: none; }
.md-editor[data-md-view="preview"] .md-preview { display: block; }
.md-editor[data-md-dragging] { border-color: var(--field-border-focus); box-shadow: 0 0 0 2px var(--brand-glow); }
.md-editor[data-md-view="split"],
.md-editor[data-md-fullscreen] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
}
.md-editor[data-md-view="split"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.md-editor[data-md-view="split"] > * { grid-column: 1 / span 2; }
.md-editor[data-md-fullscreen]:not([data-md-view="split"]) > * { grid-column: 1; }
.md-editor[data-md-view="split"] > .md-toolbar,
.md-editor[data-md-fullscreen] > .md-toolbar { grid-row: 1; }
.md-editor[data-md-view="split"] > .md-input,
.md-editor[data-md-fullscreen] > .md-input { grid-column: 1; grid-row: 2; }
.md-editor[data-md-view="split"] > .md-preview,
.md-editor[data-md-fullscreen] > .md-preview { grid-column: 2; grid-row: 2; }
.md-editor[data-md-fullscreen]:not([data-md-view="split"]) > .md-preview { grid-column: 1; }
.md-editor[data-md-view="split"] > .md-preview {
    display: block;
    contain: size;
    resize: none;
    border-inline-start: 1px solid var(--border);
}
@media (max-width: 40rem) {
    .md-editor[data-md-view="split"] > .md-input,
    .md-editor[data-md-view="split"] > .md-preview { grid-column: 1 / span 2; }
    .md-editor[data-md-view="split"] > .md-preview {
        grid-row: 3;
        border-inline-start-color: transparent;
        border-block-start: 1px solid var(--border);
    }
    .md-editor[data-md-view="split"]:not([data-md-fullscreen]) { grid-template-rows: auto auto auto; }
}
.md-editor[data-md-fullscreen] {
    position: fixed;
    inset: 0;
    z-index: 500;
    border: 0;
    border-radius: 0;
    grid-template-rows: auto minmax(0, 1fr) auto;
}
.md-editor[data-md-fullscreen] > .md-input,
.md-editor[data-md-fullscreen] > .md-preview {
    block-size: 100%;
    min-block-size: 0;
    max-block-size: none;
    resize: none;
}
html:has(.md-editor[data-md-fullscreen]) { overflow: hidden; }
.md-editor .md-input,
.md-editor .md-preview { scrollbar-width: thin; scrollbar-color: var(--scrollbar) transparent; }
.md-editor .md-input::-webkit-scrollbar,
.md-editor .md-preview::-webkit-scrollbar { width: 10px; height: 10px; }
.md-editor .md-input::-webkit-scrollbar-thumb,
.md-editor .md-preview::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: var(--radius-pill); }
.md-editor .md-input::-webkit-scrollbar-thumb:hover,
.md-editor .md-preview::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); }
.md-editor .md-input::-webkit-scrollbar-track,
.md-editor .md-preview::-webkit-scrollbar-track,
.md-editor .md-input::-webkit-scrollbar-corner,
.md-editor .md-preview::-webkit-scrollbar-corner { background: transparent; }
.md-editor .md-input::-webkit-resizer,
.md-editor .md-preview::-webkit-resizer {
    background: linear-gradient(-45deg, transparent 0 4px, var(--scrollbar) 4px 5px,
                transparent 5px 7px, var(--scrollbar) 7px 8px, transparent 8px);
}
.markdown-body { color: var(--fg-soft); font-size: var(--text-4); line-height: 1.6; word-break: break-word; }
.markdown-body > :first-child { margin-top: 0; }
.markdown-body > :last-child  { margin-bottom: 0; }
.markdown-body h1, .markdown-body h2, .markdown-body h3,
.markdown-body h4, .markdown-body h5, .markdown-body h6 {
    color: var(--fg); margin: 0.7em 0 0.3em; line-height: 1.3;
}
.markdown-body h1 { font-size: 1.4em; }
.markdown-body h2 { font-size: 1.25em; }
.markdown-body h3 { font-size: 1.1em; }
.markdown-body h4 { font-size: 1em; }
.markdown-body h5 { font-size: 0.9em; }
.markdown-body h6 { font-size: 0.9em; color: var(--muted); }
.markdown-body p  { margin: 0.5em 0; }
.markdown-body ul, .markdown-body ol { margin: 0.5em 0; padding-inline-start: 1.5em; }
.markdown-body li { margin: 0.15em 0; }
.markdown-body li > :is(ul, ol) { margin: 0.15em 0; }
.markdown-body li > p { margin: 0.3em 0; }
.markdown-body li > :first-child { margin-top: 0; }
.markdown-body li > :last-child { margin-bottom: 0; }
.markdown-body li:has(> p) { margin: 0.6em 0; }
.markdown-body hr { border: none; border-top: 1px solid var(--border); margin: 1.2em 0; }
.markdown-body del { color: var(--muted); }
.markdown-body .task-list-item { list-style: none; }
.markdown-body .task-list-item input[type="checkbox"] {
    margin-block: 0;
    margin-inline: -1.5em 0.5em;
    inline-size: 1em;
    block-size: 1em;
    vertical-align: middle;
    accent-color: var(--control-on);
}
.markdown-body a  { color: var(--brand-text); text-decoration: underline; }
.markdown-body code {
    font-family: var(--font-mono); font-size: 0.9em;
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: var(--radius-inner); padding: 0.1em 0.35em;
}
.markdown-body pre {
    background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-surface);
    padding: var(--space-5) var(--space-6); overflow-x: auto; margin: 0.6em 0;
}
.markdown-body pre code { background: none; border: none; padding: 0; }
.markdown-body :is(img, video) { max-inline-size: 100%; block-size: auto; border-radius: var(--radius-inner); }
.markdown-body blockquote {
    border-inline-start: 3px solid var(--border);
    margin: 0.6em 0; padding: 0.2em 0 0.2em 0.8em;
    color: var(--muted);
}
.markdown-body blockquote > :first-child { margin-top: 0; }
.markdown-body blockquote > :last-child  { margin-bottom: 0; }
.markdown-body table { display: block; overflow-x: auto; max-inline-size: 100%; border-collapse: collapse; margin: 0.6em 0; }
.markdown-body th, .markdown-body td { padding: var(--space-3) var(--space-5); border: 1px solid var(--border); text-align: start; }
.markdown-body th { background: var(--table-head-bg); color: var(--muted); font-size: 0.9em; }
.markdown-body :is(th, td)[align="center"] { text-align: center; }
.markdown-body :is(th, td)[align="right"] { text-align: end; }
}
@layer sedna.paint {
.editor { position: relative; }
@media (scripting: none) {
    .editor :is(.editor-toolbar, .editor-body, [data-editor-link], [data-editor-media], [data-editor-media-bar], [data-editor-slash], [data-editor-mention]) { display: none; }
    .editor textarea[data-editor-value] {
        display: block;
        box-sizing: border-box;
        inline-size: 100%;
        min-block-size: 160px;
        padding: var(--space-5) var(--space-6);
        border: none;
        background: transparent;
        color: var(--fg);
        font: inherit;
        resize: vertical;
    }
}
.editor:fullscreen {
    --editor-max-height: none;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    inline-size: 100%;
    block-size: 100%;
    border-radius: 0;
    background: var(--bg);
}
.editor:fullscreen .editor-body { flex: 1; min-block-size: 0; display: flex; flex-direction: column; }
.editor:fullscreen .ql-editor { flex: 1; min-block-size: 0; }
.editor .ql-container {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    margin: 0;
}
.editor-body.ql-container {
    min-block-size: 0;
    max-block-size: none;
    padding: 0;
    overflow: visible;
}
.editor .ql-editor {
    flex: 1;
    box-sizing: border-box;
    min-block-size: 160px;
    max-block-size: var(--editor-max-height);
    overflow-y: auto;
    padding: var(--space-5) var(--space-6);
    outline: none;
    tab-size: 4;
    text-align: start;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    counter-reset: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.editor .ql-editor > * { cursor: text; }
.editor .ql-clipboard {
    position: absolute;
    inset-inline-start: -100000px;
    top: 50%;
    height: 1px;
    overflow-y: hidden;
}
.editor .ql-hidden { display: none; }
.editor .ql-editor.ql-blank::before {
    content: attr(data-placeholder);
    position: absolute;
    inset-inline: var(--space-6);
    color: var(--placeholder);
    pointer-events: none;
}
.editor .ql-container.ql-disabled .ql-editor > * { cursor: default; }
.editor:has(.ql-container.ql-disabled) { background: var(--surface-soft); }
.editor:has(.ql-container.ql-disabled) .editor-toolbar { opacity: var(--disabled-opacity); pointer-events: none; }
.editor .ql-editor table {
    display: table;
    inline-size: 100%;
    margin-block: var(--space-4);
    table-layout: fixed;
}
.editor .ql-editor td {
    vertical-align: top;
    min-inline-size: 2em;
    overflow-wrap: anywhere;
}
.editor .ql-editor ol { padding-inline-start: 1.5em; }
.editor .ql-editor li {
    position: relative;
    list-style-type: none;
    padding-inline-start: 1.5em;
}
.editor .ql-editor .ql-ui { position: absolute; }
.editor .ql-editor li > .ql-ui::before {
    display: inline-block;
    width: 1.2em;
    margin-inline-start: -1.5em;
    margin-inline-end: 0.3em;
    text-align: end;
    white-space: nowrap;
    color: var(--muted);
}
.editor .ql-editor li[data-list="bullet"] > .ql-ui::before { content: "\2022"; }
.editor .ql-editor li:is([data-list="checked"], [data-list="unchecked"]) > .ql-ui::before {
    content: "";
    box-sizing: border-box;
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-inner);
    background: var(--bg);
}
.editor .ql-editor li[data-list="checked"] > .ql-ui::before {
    content: "\2713";
    display: inline-grid;
    place-items: center;
    font-size: 0.8em;
    width: 1.25em;
    height: 1.25em;
    line-height: 1;
    border-color: var(--brand);
    background: var(--brand);
    color: var(--on-solid);
}
.editor .ql-editor li[data-list="checked"] { color: var(--muted); text-decoration: line-through; }
.editor .ql-container:not(.ql-disabled) li:is([data-list="checked"], [data-list="unchecked"]) > .ql-ui { cursor: pointer; }
.editor .ql-editor :is(p, h1, h2, h3, h4, h5, h6) { counter-set: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; }
.editor .ql-editor li[data-list] { counter-set: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; }
.editor .ql-editor li[data-list].ql-indent-1 { counter-set: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; }
.editor .ql-editor li[data-list].ql-indent-2 { counter-set: list-3 list-4 list-5 list-6 list-7 list-8 list-9; }
.editor .ql-editor li[data-list].ql-indent-3 { counter-set: list-4 list-5 list-6 list-7 list-8 list-9; }
.editor .ql-editor li[data-list].ql-indent-4 { counter-set: list-5 list-6 list-7 list-8 list-9; }
.editor .ql-editor li[data-list].ql-indent-5 { counter-set: list-6 list-7 list-8 list-9; }
.editor .ql-editor li[data-list].ql-indent-6 { counter-set: list-7 list-8 list-9; }
.editor .ql-editor li[data-list].ql-indent-7 { counter-set: list-8 list-9; }
.editor .ql-editor li[data-list].ql-indent-8 { counter-set: list-9; }
.editor .ql-editor li[data-list="ordered"] { counter-increment: list-0; }
.editor .ql-editor li[data-list="ordered"] > .ql-ui::before { content: counter(list-0, decimal) ". "; }
.editor .ql-editor li[data-list="ordered"].ql-indent-1 { counter-increment: list-1; }
.editor .ql-editor li[data-list="ordered"].ql-indent-1 > .ql-ui::before { content: counter(list-1, lower-alpha) ". "; }
.editor .ql-editor li[data-list="ordered"].ql-indent-2 { counter-increment: list-2; }
.editor .ql-editor li[data-list="ordered"].ql-indent-2 > .ql-ui::before { content: counter(list-2, lower-roman) ". "; }
.editor .ql-editor li[data-list="ordered"].ql-indent-3 { counter-increment: list-3; }
.editor .ql-editor li[data-list="ordered"].ql-indent-3 > .ql-ui::before { content: counter(list-3, decimal) ". "; }
.editor .ql-editor li[data-list="ordered"].ql-indent-4 { counter-increment: list-4; }
.editor .ql-editor li[data-list="ordered"].ql-indent-4 > .ql-ui::before { content: counter(list-4, lower-alpha) ". "; }
.editor .ql-editor li[data-list="ordered"].ql-indent-5 { counter-increment: list-5; }
.editor .ql-editor li[data-list="ordered"].ql-indent-5 > .ql-ui::before { content: counter(list-5, lower-roman) ". "; }
.editor .ql-editor li[data-list="ordered"].ql-indent-6 { counter-increment: list-6; }
.editor .ql-editor li[data-list="ordered"].ql-indent-6 > .ql-ui::before { content: counter(list-6, decimal) ". "; }
.editor .ql-editor li[data-list="ordered"].ql-indent-7 { counter-increment: list-7; }
.editor .ql-editor li[data-list="ordered"].ql-indent-7 > .ql-ui::before { content: counter(list-7, lower-alpha) ". "; }
.editor .ql-editor li[data-list="ordered"].ql-indent-8 { counter-increment: list-8; }
.editor .ql-editor li[data-list="ordered"].ql-indent-8 > .ql-ui::before { content: counter(list-8, lower-roman) ". "; }
.editor .ql-editor .ql-indent-1 { padding-inline-start: 3em; }
.editor .ql-editor li.ql-indent-1 { padding-inline-start: 4.5em; }
.editor .ql-editor .ql-indent-2 { padding-inline-start: 6em; }
.editor .ql-editor li.ql-indent-2 { padding-inline-start: 7.5em; }
.editor .ql-editor .ql-indent-3 { padding-inline-start: 9em; }
.editor .ql-editor li.ql-indent-3 { padding-inline-start: 10.5em; }
.editor .ql-editor .ql-indent-4 { padding-inline-start: 12em; }
.editor .ql-editor li.ql-indent-4 { padding-inline-start: 13.5em; }
.editor .ql-editor .ql-indent-5 { padding-inline-start: 15em; }
.editor .ql-editor li.ql-indent-5 { padding-inline-start: 16.5em; }
.editor .ql-editor .ql-indent-6 { padding-inline-start: 18em; }
.editor .ql-editor li.ql-indent-6 { padding-inline-start: 19.5em; }
.editor .ql-editor .ql-indent-7 { padding-inline-start: 21em; }
.editor .ql-editor li.ql-indent-7 { padding-inline-start: 22.5em; }
.editor .ql-editor .ql-indent-8 { padding-inline-start: 24em; }
.editor .ql-editor li.ql-indent-8 { padding-inline-start: 25.5em; }
.editor .ql-editor .ql-direction-rtl { direction: rtl; text-align: inherit; }
.editor .ql-editor .ql-align-center { text-align: center; }
.editor .ql-editor .ql-align-justify { text-align: justify; }
.editor .ql-editor .ql-align-right { text-align: end; }
.editor .ql-editor .ql-direction-rtl.ql-align-right { text-align: start; }
.editor .ql-editor .ql-size-small { font-size: 0.75em; }
.editor .ql-editor .ql-size-large { font-size: 1.5em; }
.editor .ql-editor .ql-size-huge { font-size: 2.5em; }
.editor .ql-editor .ql-font-monospace { font-family: var(--font-mono); }
.editor .ql-editor .ql-video { display: block; max-width: 100%; }
.editor .ql-editor img {
    max-inline-size: 100%;
    block-size: auto;
    vertical-align: bottom;
    border-radius: var(--radius-inner);
}
.editor .ql-editor video {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
    margin: 0.8em 0;
    border-radius: var(--radius-inner);
    background: var(--bg-elevated);
}
.editor .ql-editor :is(img, video)[data-editor-selected] {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}
.editor .ql-editor code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    padding: 0.1em 0.35em;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-inner);
}
.editor .ql-editor .ql-code-block-container {
    position: relative;
    margin: 0.8em 0;
    padding: var(--space-5) var(--space-6);
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-surface);
    overflow-x: auto;
}
.editor .ql-editor .ql-code-block-container .ql-ui { top: var(--space-2); inset-inline-end: var(--space-2); }
.editor .ql-editor a { color: var(--accent); text-decoration: underline; }
.editor-link,
.editor-media {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: 550;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-surface);
    box-shadow: var(--shadow-dropdown);
}
.editor-link .form-input,
.editor-media .form-input { inline-size: 16rem; }
.editor-media { flex-wrap: wrap; max-inline-size: calc(100% - 2 * var(--space-4)); }
.editor-media .form-input { flex: 1 1 12rem; inline-size: auto; }
.editor-media :is([data-editor-media-width], [data-editor-media-height]) { flex: 0 1 7rem; }
.editor-media-bar {
    position: absolute;
    inset-block-start: 0;
    left: 0;
    z-index: 550;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    max-inline-size: calc(100% - 2 * var(--space-4));
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-surface);
    box-shadow: var(--shadow-dropdown);
}
.editor-media-bar[hidden] { display: none; }
.editor-notice {
    margin: 0;
    padding: var(--space-3) var(--space-6);
    border-block-start: 1px solid var(--divider);
}
.editor-slash,
.editor-mention {
    position: absolute;
    inset-block-start: 0;
    left: 0;
    z-index: 550;
    max-block-size: min(18rem, 60vh);
    overflow-y: auto;
}
}
@layer sedna.paint {
.form-color-picker {
    --spectrum-white: #ffffff;
    --spectrum-black: #000000;
    --spectrum-hue: hsl(var(--picker-hue) 100% 50%);
    --spectrum-hues: linear-gradient(to right, #ff0000 0%, #ffff00 16.667%, #00ff00 33.333%, #00ffff 50%, #0000ff 66.667%, #ff00ff 83.333%, #ff0000 100%);
    --picker-hue: 0;
    --picker-x: 100%;
    --picker-y: 0%;
    --picker-color: transparent;
    --picker-opaque: transparent;
    --picker-width: 280px;
    --picker-area: 160px;
    --picker-thumb: 16px;
    --picker-track: 12px;
    display: grid;
    gap: var(--space-6);
    inline-size: 100%;
    max-inline-size: var(--picker-width);
}
.form-color-area {
    position: relative;
    direction: ltr;
    block-size: var(--picker-area);
    border-radius: var(--radius-control);
    background:
        linear-gradient(to top, var(--spectrum-black), transparent),
        linear-gradient(to right, var(--spectrum-white), transparent),
        var(--spectrum-hue);
    cursor: crosshair;
    touch-action: none;
}
.form-color-area:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.form-color-area[aria-disabled="true"] { cursor: not-allowed; opacity: var(--disabled-opacity); }
.form-color-area::after {
    content: "";
    position: absolute;
    left: var(--picker-x);
    inset-block-start: var(--picker-y);
    inline-size: var(--picker-thumb);
    block-size: var(--picker-thumb);
    translate: -50% -50%;
    border: 2px solid var(--spectrum-white);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--spectrum-black), inset 0 0 0 1px var(--spectrum-black);
    pointer-events: none;
}
.form-range.form-range--hue,
.form-range.form-range--alpha {
    --range-thumb: var(--picker-thumb);
    --range-track: var(--picker-track);
    direction: ltr;
}
.form-range.form-range--hue::-webkit-slider-runnable-track { background: var(--spectrum-hues); }
.form-range.form-range--hue::-moz-range-track { background: var(--spectrum-hues); }
.form-range.form-range--alpha::-webkit-slider-runnable-track {
    background:
        linear-gradient(to right, transparent, var(--picker-opaque)),
        repeating-conic-gradient(var(--border) 0 25%, var(--surface-soft) 0 50%) 0 0 / calc(var(--checker-size) * 2) calc(var(--checker-size) * 2);
}
.form-range.form-range--alpha::-moz-range-track {
    background:
        linear-gradient(to right, transparent, var(--picker-opaque)),
        repeating-conic-gradient(var(--border) 0 25%, var(--surface-soft) 0 50%) 0 0 / calc(var(--checker-size) * 2) calc(var(--checker-size) * 2);
}
.form-range.form-range--hue::-webkit-slider-thumb,
.form-range.form-range--alpha::-webkit-slider-thumb {
    background: transparent;
    border: 2px solid var(--spectrum-white);
    box-shadow: 0 0 0 1px var(--spectrum-black), inset 0 0 0 1px var(--spectrum-black);
}
.form-range.form-range--hue::-moz-range-thumb,
.form-range.form-range--alpha::-moz-range-thumb {
    background: transparent;
    border: 2px solid var(--spectrum-white);
    box-shadow: 0 0 0 1px var(--spectrum-black), inset 0 0 0 1px var(--spectrum-black);
}
.form-color-preview {
    flex: none;
    inline-size: var(--control-height);
    block-size: var(--control-height);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-control);
    background:
        linear-gradient(var(--picker-color), var(--picker-color)),
        repeating-conic-gradient(var(--border) 0 25%, var(--surface-soft) 0 50%) 0 0 / calc(var(--checker-size) * 2) calc(var(--checker-size) * 2);
}
}
@layer sedna.paint {
.form-select { cursor: pointer; }
.form-select[multiple],
.form-select[size]:not([size="1"]) { cursor: auto; }
@supports not (appearance: base-select) {
    .form-select {
        appearance: none;
        padding-inline-end: var(--space-10);
        background-image:
            linear-gradient(45deg,  transparent 50%, var(--muted) 50%),
            linear-gradient(135deg, var(--muted) 50%, transparent 50%);
        background-position:
            calc(100% - 17px) calc(50% - 2px),
            calc(100% - 12px) calc(50% - 2px);
        background-size: 5px 5px;
        background-repeat: no-repeat;
    }
    .form-select[multiple],
    .form-select[size]:not([size="1"]) {
        background-image: none;
        padding-inline-end: var(--space-5);
    }
}
.form-select--sm {
    min-height: var(--control-height-sm);
    padding-block: var(--space-2);
    padding-inline-start: var(--space-4);
    font-size: var(--text-3);
}
.form-select--lg {
    min-height: var(--control-height-lg);
    padding-block: var(--space-5);
    padding-inline-start: var(--space-7);
    font-size: var(--text-5);
}
.form-check input[type="radio"] {
    appearance: none;
    margin: 0;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    cursor: pointer;
    background: var(--bg);
    border: 1px solid var(--control-border);
    border-radius: 50%;
    position: relative;
    transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.form-check input[type="radio"]:hover { border-color: var(--border-hover); }
.form-check input[type="radio"]:checked { border-color: var(--control-on); }
.form-check input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--control-on);
}
.form-check input[type="radio"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--focus-ring);
}
.switch {
    display: inline-flex;
    align-items: center;
    gap: var(--space-5);
    font-size: var(--text-4);
    cursor: pointer;
    user-select: none;
}
.switch input[type="checkbox"] {
    appearance: none;
    margin: 0;
    position: relative;
    flex-shrink: 0;
    width: 34px;
    height: 19px;
    background: var(--control-border);
    border: 1px solid var(--control-border);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background var(--motion-fast), border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.switch input[type="checkbox"]::after {
    content: '';
    position: absolute;
    top: 2px;
    inset-inline-start: 2px;
    width: 13px;
    height: 13px;
    background: var(--on-solid);
    border-radius: 50%;
    transition: transform var(--motion-fast) ease;
}
.switch input[type="checkbox"]:hover { border-color: var(--border-hover); }
.switch input[type="checkbox"]:checked {
    background: var(--control-on);
    border-color: var(--control-on);
}
.switch input[type="checkbox"]:checked::after { transform: translateX(15px); }
.switch input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--focus-ring);
}
.switch input[type="checkbox"]:disabled { cursor: not-allowed; opacity: var(--disabled-opacity); }
.switch:has(input:disabled) { cursor: not-allowed; color: var(--disabled-fg); }
.choice-text { display: flex; flex-direction: column; gap: var(--space-1); }
.choice-hint { font-size: var(--text-3); color: var(--muted); }
.choice-meta {
    color: var(--muted);
    font-size: var(--text-2);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
.form-color {
    inline-size: var(--control-height);
    block-size: var(--control-height);
    padding: var(--space-1);
    background: var(--bg);
    border: 1px solid var(--field-border);
    border-radius: var(--radius-control);
    cursor: pointer;
    transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.form-color.form-input--sm { inline-size: var(--control-height-sm); block-size: var(--control-height-sm); }
.form-color.form-input--lg { inline-size: var(--control-height-lg); block-size: var(--control-height-lg); }
.form-color:hover { border-color: var(--border-hover); }
.form-color:focus-visible { outline: none; border-color: var(--field-border-focus); box-shadow: 0 0 0 2px var(--brand-glow); }
.form-color:disabled { cursor: not-allowed; opacity: var(--disabled-opacity); }
.form-color::-webkit-color-swatch-wrapper { padding: 0; }
.form-color::-webkit-color-swatch { border: none; border-radius: calc(var(--radius-control) - 2px); }
.form-color::-moz-color-swatch { border: none; border-radius: calc(var(--radius-control) - 2px); }
.swatch-grid { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.swatch {
    --swatch: transparent;
    inline-size: var(--control-height-sm);
    block-size: var(--control-height-sm);
    padding: 0;
    background: var(--swatch);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    cursor: pointer;
}
.swatch:hover { border-color: var(--border-strong); }
.swatch:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--brand-glow); }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--fg); }
.swatch[aria-pressed="true"]:focus-visible { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--brand-soft); }
}
@layer sedna.paint {
fieldset.form-field {
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
fieldset.form-field > legend {
    inline-size: 100%;
    margin: 0 0 var(--space-3);
    padding: 0;
}
.form-check-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    min-inline-size: 0;
}
.form-check-list > .form-check:has(> .form-check-count) { align-self: stretch; }
.form-check-list > .form-check:has(> .choice-text) {
    --row-line: 1lh;
    align-items: flex-start;
}
.form-check-list > .form-check:has(> .choice-text) > input { margin-block-start: calc((var(--row-line) - 15px) / 2); }
.form-check-list--inline {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-7);
}
.form-check-list--sm { gap: var(--space-2); }
.form-check-list--sm > .form-check { font-size: var(--text-3); }
.form-check-list--lg { gap: var(--space-6); }
.form-check-list--lg > .form-check { font-size: var(--text-5); }
.form-check-list--scroll {
    --check-list-max: 16rem;
    max-block-size: var(--check-list-max);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
}
.form-check-list--cards {
    align-items: stretch;
    gap: var(--space-3);
}
.form-check-list--cards > .form-check {
    display: flex;
    padding: var(--space-5);
    background: var(--card-bg);
    border: 1px solid var(--control-border);
    border-radius: var(--radius-surface);
    transition: border-color var(--motion-fast), background var(--motion-fast), box-shadow var(--motion-fast);
}
.form-check-list--cards > .form-check:hover { border-color: var(--border-hover); }
.form-check-list--cards > .form-check:has(> input:checked) {
    border-color: var(--selected);
    background: var(--brand-tint);
    box-shadow: inset 0 0 0 1px var(--selected);
}
.form-check-list--cards > .form-check:has(> input[aria-invalid="true"]) { border-color: var(--field-border-danger); }
.form-check-list--cards > .form-check:has(> input:disabled) {
    background: var(--disabled-bg);
    border-color: var(--disabled-border);
}
.form-check-list--cards.form-check-list--sm > .form-check { padding: var(--space-3) var(--space-4); }
.form-check-list-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-6);
    padding-block-end: var(--space-4);
    border-block-end: 1px solid var(--divider);
}
.form-check-list-count {
    color: var(--muted);
    font-size: var(--text-3);
    font-variant-numeric: tabular-nums;
    text-box: trim-both cap alphabetic;
    padding-block: var(--cap-gap);
}
.form-check-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-inline-size: 0;
}
.form-check-group + .form-check-group { margin-block-start: var(--space-5); }
.form-check-group-title {
    margin: 0;
    color: var(--fg);
    font-size: var(--text-3);
    font-weight: 600;
}
.form-check-or {
    margin: 0;
    color: var(--muted);
    font-size: var(--text-3);
}
.form-check-skeleton {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-block-size: 1lh;
    font-size: var(--text-4);
}
.form-check-skeleton > .skeleton:first-child {
    flex-shrink: 0;
    inline-size: 15px;
    block-size: 15px;
    border-radius: var(--radius-small);
}
.form-check-skeleton > .skeleton:not(:first-child) {
    --skeleton-width: 10rem;
    inline-size: var(--skeleton-width);
    max-inline-size: 100%;
    block-size: 12px;
}
.form-check-list-empty {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
    color: var(--muted);
    font-size: var(--text-3);
}
.form-check-list-empty > i { flex-shrink: 0; font-size: var(--text-5); }
}
@layer sedna.paint {
:is(.form-input, .form-select, .form-color, .listbox)[data-state="warn"],
.input-group:has(> :is(.form-input, .form-select)[data-state="warn"]),
.form-combo-box:has(> .form-combo-input[data-state="warn"]),
.editor[data-state="warn"],
.editor:has(> [data-editor-value][data-state="warn"], > .editor-body [data-state="warn"]),
.md-editor:has(> [data-md-input][data-state="warn"]) { border-color: var(--field-border-warn); }
:is(.form-input, .form-select, .listbox)[data-state="warn"]:focus,
.form-color[data-state="warn"]:focus-visible,
.input-group:has(> :is(.form-input, .form-select)[data-state="warn"]):focus-within,
.form-combo-box:has(> .form-combo-input[data-state="warn"]):focus-within,
.editor[data-state="warn"]:focus-within,
.editor:has(> [data-editor-value][data-state="warn"], > .editor-body [data-state="warn"]):focus-within {
    border-color: var(--field-border-warn);
    box-shadow: 0 0 0 2px var(--focus-ring);
}
:is(.form-input, .form-select, .form-color, .listbox)[aria-invalid="true"],
.input-group:has(> :is(.form-input, .form-select)[aria-invalid="true"]),
.form-combo-box:has(> .form-combo-input[aria-invalid="true"]),
.editor[aria-invalid="true"],
.editor:has(> [data-editor-value][aria-invalid="true"], > .editor-body [aria-invalid="true"]),
.md-editor:has(> [data-md-input][aria-invalid="true"]) { border-color: var(--field-border-danger); }
:is(.form-input, .form-select, .listbox)[aria-invalid="true"]:focus,
.form-color[aria-invalid="true"]:focus-visible,
.input-group:has(> :is(.form-input, .form-select)[aria-invalid="true"]):focus-within,
.form-combo-box:has(> .form-combo-input[aria-invalid="true"]):focus-within,
.editor[aria-invalid="true"]:focus-within,
.editor:has(> [data-editor-value][aria-invalid="true"], > .editor-body [aria-invalid="true"]):focus-within {
    border-color: var(--field-border-danger);
    box-shadow: 0 0 0 2px var(--focus-ring);
}
.form-check input:is([type="checkbox"], [type="radio"])[aria-invalid="true"] { border-color: var(--field-border-danger); }
.form-error,
.form-warning {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: 0;
    font-size: var(--text-3);
}
.form-error   { color: var(--danger-fg); }
.form-warning { color: var(--warn-fg); }
.form-error,
.form-warning { --row-line: 1lh; }
.form-error i,
.form-warning i { font-size: var(--text-5); flex-shrink: 0; margin-block-start: calc((var(--row-line) - 1em) / 2); }
.form-label--required::after {
    content: '*';
    margin-inline-start: var(--space-2);
    color: var(--danger-fg);
}
.input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-height: var(--control-height);
    background: var(--bg);
    border: 1px solid var(--field-border);
    border-radius: var(--radius-control);
    transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.input-group--sm { min-height: var(--control-height-sm); }
.input-group--sm .form-input,
.input-group--sm .btn,
.input-group--sm .input-affix { padding-block: var(--space-1); font-size: var(--text-3); }
.input-group--lg { min-height: var(--control-height-lg); }
.input-group--lg .form-input,
.input-group--lg .btn,
.input-group--lg .input-affix { font-size: var(--text-5); }
.input-group:focus-within {
    border-color: var(--field-border-focus);
    box-shadow: 0 0 0 2px var(--brand-glow);
}
.input-group .form-input,
.input-group .form-select {
    flex: 1;
    min-width: 0;
    min-height: 0;
    border: none;
    border-radius: 0;
    background: none;
}
.input-group .form-input:focus,
.input-group .form-select:focus { box-shadow: none; }
.input-group > :first-child { border-start-start-radius: var(--radius-inner); border-end-start-radius: var(--radius-inner); }
.input-group > :last-child  { border-start-end-radius: var(--radius-inner);   border-end-end-radius: var(--radius-inner); }
.input-affix {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
    padding: 0 var(--space-5);
    color: var(--muted);
    font-size: var(--text-4);
    white-space: nowrap;
}
.input-affix i { font-size: var(--text-6); line-height: 1; }
.input-affix:first-child { border-inline-end: 1px solid var(--border); }
.input-affix:last-child  { border-inline-start: 1px solid var(--border); }
.input-group .btn {
    min-height: 0;
    border: none;
    border-radius: 0;
    background: var(--surface-strong);
}
.input-group .btn:hover { background: var(--bg-hover); }
.input-group .btn:not(:first-child) { border-inline-start: 1px solid var(--border); }
.input-group .btn:not(:last-child)  { border-inline-end:   1px solid var(--border); }
.input-group .btn:focus-visible { box-shadow: inset 0 0 0 2px var(--focus-ring); }
.input-clear,
.input-reveal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: center;
    width: 22px;
    height: 22px;
    margin-inline: var(--space-1);
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--radius-small);
    color: var(--muted);
    font-size: var(--text-5);
    line-height: 1;
    cursor: pointer;
}
.input-clear:hover,
.input-reveal:hover { background: var(--bg-hover); color: var(--fg); }
.input-clear:focus-visible,
.input-reveal:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring); }
.input-group:has(> .form-input:placeholder-shown) > .input-clear { display: none; }
.input-group:has(> .input-clear) > .form-input::-webkit-search-cancel-button { display: none; }
.input-reveal[aria-pressed="true"] { color: var(--fg); }
.input-reveal:not([aria-pressed="true"]) > i + i,
.input-reveal[aria-pressed="true"] > i:has(+ i) { display: none; }
.input-group:has(> .input-reveal) > .form-input::-ms-reveal { display: none; }
.secret-value:not([data-sedna-revealed]) {
    -webkit-text-security: disc;
    user-select: none;
}
[data-reveal]:not(.input-reveal):not([aria-pressed="true"]) > i + i,
[data-reveal]:not(.input-reveal)[aria-pressed="true"] > i:has(+ i) { display: none; }
.form-trigger {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-align: start;
    white-space: nowrap;
    cursor: pointer;
}
.form-trigger > i { flex-shrink: 0; color: var(--muted); font-size: var(--text-5); line-height: 1; }
.form-trigger > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.form-trigger::after {
    content: '';
    flex-shrink: 0;
    margin-inline-start: auto;
    width: 0;
    height: 0;
    border-inline: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: 0.5;
    transition: transform var(--motion-fast);
}
.form-trigger:hover { border-color: var(--border-hover); }
.form-trigger:hover::after { opacity: 1; }
.form-trigger[aria-expanded="true"]::after,
.form-trigger:has(+ :popover-open)::after { transform: rotate(180deg); }
.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-4);
    margin-top: var(--space-7);
}
.form-actions--split { justify-content: space-between; }
.form-actions--start { justify-content: flex-start; }
.form-actions--sticky,
.form-actions--save-bar {
    position: sticky;
    inset-block-end: 0;
    z-index: 3;
    padding-block: var(--space-5);
    background: var(--surface-here, var(--bg));
    border-top: 1px solid var(--border);
}
.page :is(.form-actions--sticky, .form-actions--save-bar):not(:is(.sedna-scroll, .modal-body, .drawer-body) *) {
    inset-block-end: calc(-1 * (var(--page-pad) + var(--safe-block-end)));
    padding-block-end: calc(var(--space-5) + var(--safe-block-end));
}
.content:has(> .bottombar) > .page :is(.form-actions--sticky, .form-actions--save-bar):not(:is(.sedna-scroll, .modal-body, .drawer-body) *) {
    inset-block-end: calc(-1 * var(--space-9));
    padding-block-end: var(--space-5);
}
@media (min-width: 561px) {
    .layout--bottombar .content:has(> .bottombar) > .page :is(.form-actions--sticky, .form-actions--save-bar):not(:is(.sedna-scroll, .modal-body, .drawer-body) *) {
        inset-block-end: calc(-1 * (var(--space-9) + var(--safe-block-end)));
        padding-block-end: calc(var(--space-5) + var(--safe-block-end));
    }
}
@media (max-width: 560px) {
    .layout--flow > .content > .page :is(.form-actions--sticky, .form-actions--save-bar):not(:is(.sedna-scroll, .modal-body, .drawer-body) *) { inset-block-end: 0; }
    .layout--flow:has(> .content > .bottombar) > .content > .page :is(.form-actions--sticky, .form-actions--save-bar):not(:is(.sedna-scroll, .modal-body, .drawer-body) *) {
        inset-block-end: var(--bottombar-reach);
    }
}
.card:has(.form-actions--sticky, .form-actions--save-bar) { overflow: clip; }
.form-actions--save-bar { display: none; }
[data-dirty] .form-actions--save-bar { display: flex; }
.form-actions-status {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
    margin-inline-end: auto;
    color: var(--muted-here, var(--muted));
    font-size: var(--text-3);
}
.form-actions-status i { color: var(--warn-fg); font-size: var(--text-5); }
.form-section {
    margin: 0 0 var(--space-8);
    padding: 0;
    border: none;
    min-width: 0;
}
.form-section > legend,
.form-section-title {
    width: 100%;
    padding: 0 0 var(--space-3);
    margin-bottom: var(--space-6);
    border-bottom: 1px solid var(--border);
    font-size: var(--text-4);
    font-weight: 600;
    color: var(--fg);
}
.form-section-hint {
    margin: -6px 0 var(--space-6);
    font-size: var(--text-3);
    color: var(--muted);
}
.form-section-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-7);
}
.form-section--question > legend {
    padding-block-end: 0;
    margin-bottom: var(--space-6);
    border-bottom: none;
    font-size: inherit;
}
.form-section--question > legend > :is(h1, h2) { margin: 0; }
.form-section--question > legend > .eyebrow { margin-bottom: var(--space-2); }
.form-section--box {
    --section-line: round(calc(var(--text-4) * 1.4), 2px);
    position: relative;
    padding: var(--card-pad-block) var(--card-pad-inline);
    border: 1px solid var(--border);
    border-radius: var(--radius-panel);
}
.form-section--box > legend,
.form-section--box > summary > .form-section-legend {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    inline-size: auto;
    margin: 0;
    margin-inline-start: calc(-1 * var(--space-3));
    padding: 0 var(--space-3);
    border: 0;
    font-size: var(--text-4);
    font-weight: 600;
    line-height: var(--section-line);
    color: var(--fg);
}
.form-section--box > legend,
.form-section--box > summary > .form-section-legend { block-size: var(--section-line); }
.form-section--box > .form-section-hint { margin-block-start: calc(-1 * var(--space-3)); }
details.form-section--box {
    margin-block-start: calc((var(--section-line) - 1px) / 2);
    padding-block-start: 0;
}
.form-section--box > summary {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-block: calc(-0.5 * (var(--section-line) + 1px)) 0;
    list-style: none;
    cursor: pointer;
}
details[open].form-section--box > summary { margin-block-end: var(--card-pad-block); }
.form-section--box > summary::-webkit-details-marker { display: none; }
.form-section--box > summary:focus-visible { outline: none; }
.form-section--box > summary:focus-visible > .form-section-legend {
    outline: 2px solid var(--focus-ring);
    outline-offset: 0;
    border-radius: var(--radius-small);
}
.form-section--box > summary > .form-section-legend::before {
    content: '';
    inline-size: 0;
    block-size: 0;
    border-inline: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: 0.6;
    rotate: -90deg;
    transition: rotate var(--motion-fast) ease;
}
.form-section--box > summary > .form-section-legend:dir(rtl)::before { rotate: 90deg; }
details[open].form-section--box > summary > .form-section-legend::before { rotate: 0deg; }
.form-section-summary {
    margin-block-start: var(--space-3);
    font-size: var(--text-3);
    line-height: round(1.4em, 2px);
    color: var(--muted);
}
details[open] > summary > .form-section-summary { display: none; }
.form-section--box > summary > .form-section-legend,
.form-section-action {
    background:
        linear-gradient(var(--section-tint, transparent) 0 0) top / 100% calc(50% + 1px) no-repeat,
        linear-gradient(var(--surface-here, var(--bg)) 0 0) top / 100% calc(50% + 1px) no-repeat;
}
.form-section-action {
    position: absolute;
    inset-block-start: -0.5px;
    inset-inline-end: calc(var(--card-pad-inline) - var(--space-3));
    translate: 0 -50%;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0 var(--space-3);
    font-size: var(--text-3);
    line-height: var(--section-line);
}
.form-section-action:has(.btn) { padding-inline: var(--space-2); }
fieldset.form-section--box > .form-section-action { inset-block-start: calc(-0.5 * var(--section-line)); }
.form-section--box:has(> .form-error) { border-color: var(--field-border-danger); }
.form-section--box > .form-error { margin-block: 0 var(--space-6); }
fieldset.form-section--box:disabled > legend { color: var(--muted); }
fieldset.form-section--box:disabled { border-color: var(--border); }
.form-section--filled { background: var(--surface-soft); }
.form-section--filled > :not(legend, summary, .form-section-action) { --section-tint: var(--surface-soft); }
.choice-dependent {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    min-width: 0;
}
.form-check + .choice-dependent,
.form-check + :is(.form-error, .form-warning) + .choice-dependent { margin-inline-start: var(--choice-inset-check); }
.switch + .choice-dependent,
.switch + :is(.form-error, .form-warning) + .choice-dependent { margin-inline-start: var(--choice-inset-switch); }
:is(
    :is(.form-check, .switch):has(> input:not(:checked)) + .choice-dependent:not(.choice-dependent--off),
    :is(.form-check, .switch):has(> input:not(:checked)) + :is(.form-error, .form-warning) + .choice-dependent:not(.choice-dependent--off),
    :is(.form-check, .switch):has(> input:checked) + .choice-dependent--off,
    :is(.form-check, .switch):has(> input:checked) + :is(.form-error, .form-warning) + .choice-dependent--off,
    .form-section > legend:has(> :is(.form-check, .switch) > input:not(:checked)) ~ .choice-dependent:not(.choice-dependent--off),
    .form-section > legend:has(> :is(.form-check, .switch) > input:checked) ~ .choice-dependent--off
).choice-dependent--hide { display: none; }
:is(
    :is(.form-check, .switch):has(> input:not(:checked)) + .choice-dependent:not(.choice-dependent--off),
    :is(.form-check, .switch):has(> input:not(:checked)) + :is(.form-error, .form-warning) + .choice-dependent:not(.choice-dependent--off),
    :is(.form-check, .switch):has(> input:checked) + .choice-dependent--off,
    :is(.form-check, .switch):has(> input:checked) + :is(.form-error, .form-warning) + .choice-dependent--off,
    .form-section > legend:has(> :is(.form-check, .switch) > input:not(:checked)) ~ .choice-dependent:not(.choice-dependent--off),
    .form-section > legend:has(> :is(.form-check, .switch) > input:checked) ~ .choice-dependent--off
).choice-dependent--dim {
    opacity: 0.45;
    interactivity: inert;
}
:is(
    :is(.form-check, .switch):has(> input:not(:checked)) + .choice-dependent:not(.choice-dependent--off),
    :is(.form-check, .switch):has(> input:not(:checked)) + :is(.form-error, .form-warning) + .choice-dependent:not(.choice-dependent--off),
    :is(.form-check, .switch):has(> input:checked) + .choice-dependent--off,
    :is(.form-check, .switch):has(> input:checked) + :is(.form-error, .form-warning) + .choice-dependent--off,
    .form-section > legend:has(> :is(.form-check, .switch) > input:not(:checked)) ~ .choice-dependent:not(.choice-dependent--off),
    .form-section > legend:has(> :is(.form-check, .switch) > input:checked) ~ .choice-dependent--off
).choice-dependent--dim .choice-dependent--dim { opacity: 1; }
.transfer {
    container: sedna-transfer / inline-size;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-6);
}
.transfer-actions {
    align-self: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
@container sedna-transfer (width < 640px) {
    .transfer > * { grid-column: 1 / span 3; }
    .transfer-actions { flex-direction: row; justify-content: center; }
}
.rule-group {
    container: sedna-rule-group / inline-size;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    min-width: 0;
    padding: var(--space-6);
    border: 1px solid var(--border);
    border-radius: var(--radius-surface);
}
.rule-group .rule-group {
    padding: var(--space-5);
    background: var(--surface-soft);
}
.rule-group-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    color: var(--fg-soft);
    font-size: var(--text-4);
}
.rule-group-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
    margin-inline-start: var(--space-3);
    padding-inline-start: var(--space-6);
    border-inline-start: 2px solid var(--border);
}
.rule-group-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 3fr) auto;
    align-items: center;
    gap: var(--space-4);
}
.rule-group-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}
@container sedna-rule-group (width < 480px) {
    .rule-group-row { grid-template-columns: minmax(0, 1fr) auto; }
    .rule-group-row > :not(:last-child) { grid-column: 1; }
    .rule-group-row > :last-child { grid-column: 2; grid-row: 1; }
}
}
@layer sedna.paint {
.form-file { position: relative; display: inline-flex; align-items: center; gap: var(--space-5); }
.form-file input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    border: 0;
}
.form-file-name { color: var(--muted); font-size: var(--text-3); }
.form-file:has(input:focus-visible) .btn { box-shadow: 0 0 0 2px var(--focus-ring); }
.form-input[type="file"] {
    padding-block: var(--space-1);
    align-content: center;
}
.form-input::file-selector-button {
    margin-inline-end: var(--space-5);
    padding: var(--space-2) var(--space-5);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-inner);
    color: var(--fg);
    font-family: inherit;
    font-size: var(--text-3);
    cursor: pointer;
}
.form-input::file-selector-button:hover { background: var(--bg-hover); }
.dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-9);
    background: var(--surface-soft);
    border: 1px dashed var(--control-border);
    border-radius: var(--radius-surface);
    color: var(--muted);
    font-size: var(--text-4);
    text-align: center;
    cursor: pointer;
    transition: background var(--motion-fast), border-color var(--motion-fast);
}
.dropzone i { font-size: var(--text-10); color: var(--border-hover); }
.dropzone:hover { border-color: var(--border-hover); }
.dropzone--over {
    background: var(--brand-tint);
    border-color: var(--brand-soft);
    border-style: solid;
    color: var(--brand-text);
}
.dropzone--over i { color: var(--brand-soft); }
.dropzone:focus-within { box-shadow: 0 0 0 2px var(--focus-ring); }
.dropzone--sm {
    flex-direction: row;
    justify-content: center;
    gap: var(--space-3);
    min-height: var(--control-height-sm);
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-control);
    font-size: var(--text-3);
}
.dropzone--sm i { font-size: var(--text-4); }
.dropzone--lg { padding: var(--space-11); gap: var(--space-5); font-size: var(--text-5); }
.dropzone--lg i { font-size: var(--text-10); }
.dropzone--page {
    display: none;
    position: fixed;
    inset: var(--space-6);
    z-index: 500;
    justify-content: center;
    padding: var(--space-11);
    border-width: 2px;
    background-color: var(--bg-elevated);
    box-shadow: var(--shadow-modal);
    font-size: var(--text-6);
    pointer-events: none;
}
.dropzone--page.dropzone--over {
    display: flex;
    background-image: linear-gradient(var(--brand-tint), var(--brand-tint));
}
.dropzone--page i { font-size: var(--text-11); }
.file-list { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.file-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-inner);
    font-size: var(--text-3);
}
.file-item > i { font-size: var(--text-7); color: var(--muted); flex-shrink: 0; }
.file-item-name { flex: 1; }
.file-item-size { color: var(--muted); font-family: var(--font-mono); flex-shrink: 0; }
.file-item--error { border-color: var(--danger-border); color: var(--danger-fg); }
.file-item--error > i { color: var(--danger-fg); }
.file-item-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.file-item-main > .file-item-name { flex: none; }
.file-item-main > .progress { height: 3px; }
.file-item-status { flex-shrink: 0; font-size: var(--text-6); color: var(--muted); }
.file-item--done .file-item-status { color: var(--go-fg); }
.file-item--error .file-item-status { color: var(--danger-fg); }
.file-item--error .file-meta { color: var(--danger-fg); }
.file-item-actions { display: flex; align-items: center; gap: var(--space-1); flex-shrink: 0; }
.file-item--paused .progress-bar { background: var(--muted); }
.file-item--paused .file-meta { color: var(--muted); }
a.file-item { color: inherit; text-decoration: none; }
a.file-item:hover { border-color: var(--border-strong); text-decoration: none; }
a.file-item:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring); }
.file-batch {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--space-4);
    row-gap: var(--space-3);
    padding: var(--space-4);
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-inner);
    font-size: var(--text-3);
}
.file-batch-status { flex-shrink: 0; font-size: var(--text-7); color: var(--brand-text); }
.file-batch-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: var(--space-4);
    row-gap: var(--space-1);
}
.file-batch-title {
    font-weight: 600;
    color: var(--fg);
    text-box: trim-both cap alphabetic;
    padding-block: var(--cap-gap);
}
.file-batch-actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.file-batch > .progress { flex-basis: 100%; height: 4px; }
.file-batch--paused .file-batch-status { color: var(--muted); }
.file-batch--paused .progress-bar { background: var(--muted); }
.file-batch--done .file-batch-status { color: var(--go-fg); }
.file-batch--done .progress-bar { background: var(--go-solid); }
.file-batch--error { border-color: var(--danger-border); }
.file-batch--error .file-batch-status { color: var(--danger-fg); }
.file-batch--error .progress-bar { background: var(--danger-solid); }
}
@layer sedna.paint {
.form-signature {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    inline-size: 100%;
    max-inline-size: 36rem;
}
.form-signature-pad {
    --signature-ink: var(--fg);
    --signature-ink-width: 2.5px;
    --signature-ratio: 3 / 1;
    position: relative;
    display: grid;
    place-items: center;
    inline-size: 100%;
    aspect-ratio: var(--signature-ratio);
    background: var(--bg);
    border: 1px solid var(--field-border);
    border-radius: var(--radius-control);
    overflow: hidden;
    cursor: crosshair;
    transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.form-signature-pad::before {
    content: "";
    position: absolute;
    inset-inline: 6%;
    inset-block-start: 74%;
    border-block-start: 1px dashed var(--border-hover);
    pointer-events: none;
}
.form-signature-pad > canvas {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    touch-action: none;
}
.form-signature-pad:hover { border-color: var(--border-hover); }
.form-signature-hint {
    color: var(--placeholder);
    font-size: var(--text-4);
    pointer-events: none;
    user-select: none;
}
.form-signature[data-signature-inked] .form-signature-hint { visibility: hidden; }
.form-signature-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
}
.form-signature:has([data-signature-value]:disabled) .form-signature-pad,
.form-signature:has([data-signature-value][readonly]) .form-signature-pad {
    background: var(--disabled-bg);
    border-color: var(--disabled-border);
    cursor: not-allowed;
}
.form-signature:has([data-signature-value]:disabled, [data-signature-value][readonly]) .form-signature-pad > canvas { touch-action: auto; }
.form-signature:has([data-signature-value]:disabled) .form-signature-pad { opacity: var(--disabled-opacity); }
.form-signature:has([data-signature-value][readonly]) .form-signature-pad { cursor: default; }
.form-signature:has([data-signature-value][data-state="warn"]) .form-signature-pad { border-color: var(--field-border-warn); }
.form-signature:has([data-signature-value][aria-invalid="true"]) .form-signature-pad { border-color: var(--field-border-danger); }
}
@layer sedna.paint {
.form-code {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    width: fit-content;
}
.form-code > .form-input {
    flex-shrink: 0;
    width: var(--control-height);
    padding: 0;
    font-family: var(--font-mono);
    font-size: var(--text-8);
    font-variant-numeric: tabular-nums;
    text-align: center;
}
.form-code--sm > .form-input {
    min-height: var(--control-height-sm);
    width: var(--control-height-sm);
    font-size: var(--text-5);
}
.form-code--lg > .form-input {
    min-height: var(--control-height-lg);
    width: var(--control-height-lg);
    font-size: var(--text-9);
}
.form-code-sep {
    color: var(--muted);
    font-size: var(--text-6);
    line-height: 1;
    user-select: none;
}
}
@layer sedna.paint {
.form-range {
    --range-thumb: 14px;
    --range-track: 4px;
    --range-on: var(--control-on);
    appearance: none;
    inline-size: 100%;
    block-size: calc(var(--range-thumb) + 4px);
    background: none;
    cursor: pointer;
}
.form-range--sm { --range-thumb: 12px; --range-track: 3px; }
.form-range--lg { --range-thumb: 20px; --range-track: 6px; }
.form-range[data-state="warn"] { --range-on: var(--field-border-warn); }
.form-range[aria-invalid="true"] { --range-on: var(--field-border-danger); }
.form-range::-webkit-slider-runnable-track {
    block-size: var(--range-track);
    background: var(--progress-track);
    border-radius: var(--radius-pill);
}
.form-range::-webkit-slider-thumb {
    appearance: none;
    inline-size: var(--range-thumb);
    block-size: var(--range-thumb);
    margin-block-start: calc((var(--range-track) - var(--range-thumb)) / 2);
    background: var(--range-on);
    border: none;
    border-radius: 50%;
}
.form-range::-moz-range-track {
    block-size: var(--range-track);
    background: var(--progress-track);
    border-radius: var(--radius-pill);
}
.form-range::-moz-range-thumb {
    inline-size: var(--range-thumb);
    block-size: var(--range-thumb);
    background: var(--range-on);
    border: none;
    border-radius: 50%;
}
.form-range:focus-visible { outline: none; }
.form-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--focus-ring); }
.form-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--focus-ring); }
.form-range:disabled { opacity: var(--disabled-opacity); cursor: not-allowed; }
.form-range-value {
    min-width: 4ch;
    color: var(--fg);
    font-size: var(--text-4);
    line-height: round(1.4em, 2px);
    font-variant-numeric: tabular-nums;
    text-align: end;
    text-box: trim-both cap alphabetic;
    padding-block: var(--cap-gap);
}
.form-range-box {
    --range-thumb: 14px;
    --range-track: 4px;
    --range-on: var(--control-on);
    --range-start: 0;
    --range-end: 0;
    --range-toward: to right;
    --range-length: 160px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    inline-size: 100%;
}
.form-range-box:has(> .form-range--sm) { --range-thumb: 12px; --range-track: 3px; }
.form-range-box:has(> .form-range--lg) { --range-thumb: 20px; --range-track: 6px; }
.form-range-box:has(> .form-range[data-state="warn"]) { --range-on: var(--field-border-warn); }
.form-range-box:has(> .form-range[aria-invalid="true"]) { --range-on: var(--field-border-danger); }
.form-range-box::before {
    --range-from: calc(var(--range-start) * (100% - var(--range-thumb)));
    --range-to: calc(var(--range-thumb) + var(--range-end) * (100% - var(--range-thumb)));
    content: "";
    grid-area: 2 / 1;
    block-size: var(--range-track);
    border-radius: var(--radius-pill);
    background: linear-gradient(var(--range-toward),
        var(--progress-track) var(--range-from),
        var(--range-on) var(--range-from) var(--range-to),
        var(--progress-track) var(--range-to));
}
.form-range-box:not(:has(> .form-range ~ .form-range))::before { --range-from: 0px; }
.form-range-box > .form-range {
    grid-area: 2 / 1;
    z-index: 1;
    margin: 0;
}
.form-range-box > .form-range:first-of-type:has(~ .form-range) {
    z-index: calc(1 + min(1, round(down, var(--range-start) * 2, 1)));
}
.form-range-box > .form-range::-webkit-slider-runnable-track { background: none; }
.form-range-box > .form-range::-moz-range-track { background: none; }
.form-range-box > .form-range:disabled { opacity: 1; }
.form-range-box:has(> .form-range:disabled) { opacity: var(--disabled-opacity); }
.form-range-box:has(> .form-range ~ .form-range) > .form-range { pointer-events: none; }
.form-range-box:has(> .form-range ~ .form-range) > .form-range::-webkit-slider-thumb { pointer-events: auto; }
.form-range-box:has(> .form-range ~ .form-range) > .form-range::-moz-range-thumb { pointer-events: auto; }
.form-range-box:has(> .form-range ~ .form-range) > .form-range[aria-readonly="true"]::-webkit-slider-thumb { pointer-events: none; }
.form-range-box:has(> .form-range ~ .form-range) > .form-range[aria-readonly="true"]::-moz-range-thumb { pointer-events: none; }
.form-range-ticks {
    grid-area: 3 / 1;
    display: flex;
    justify-content: space-between;
    padding-inline: calc(var(--range-thumb) / 2);
    margin-block-start: var(--space-1);
    color: var(--muted);
    font-size: var(--text-2);
    line-height: round(1.4em, 2px);
    font-variant-numeric: tabular-nums;
}
.form-range-ticks > option {
    display: flex;
    flex-direction: column;
    align-items: center;
    inline-size: 0;
    min-block-size: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    white-space: nowrap;
}
.form-range-ticks > option::before {
    content: "";
    inline-size: 0;
    block-size: var(--space-3);
    margin-block-end: var(--space-1);
    border-inline-start: 1px solid var(--border-strong);
}
.form-range-bubble {
    --range-at: 0;
    grid-area: 1 / 1;
    justify-self: start;
    display: block;
    block-size: 22px;
    min-inline-size: 22px;
    margin-inline-start: calc(var(--range-thumb) / 2 + var(--range-at) * (100% - var(--range-thumb)));
    margin-block-end: var(--space-3);
    padding-inline: var(--space-3);
    box-sizing: border-box;
    translate: -50% 0;
    align-content: center;
    text-align: center;
    background: var(--tip-bg);
    color: var(--tip-fg);
    border: 1px solid var(--tip-border);
    border-radius: var(--radius-surface);
    font-size: var(--text-3);
    line-height: round(1.4em, 2px);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-box: trim-both cap alphabetic;
    pointer-events: none;
}
.form-range-box--vertical {
    --range-toward: to top;
    writing-mode: vertical-lr;
    direction: rtl;
    inline-size: var(--range-length);
    block-size: fit-content;
}
.form-range-box--vertical > .form-range { block-size: max(calc(var(--range-thumb) + 4px), 24px); }
.form-range-box--vertical > .form-range-ticks > option {
    writing-mode: horizontal-tb;
    flex-direction: row;
    inline-size: auto;
    block-size: 0;
    direction: ltr;
}
.form-range-box--vertical > .form-range-ticks > option::before {
    inline-size: var(--space-3);
    block-size: 0;
    margin-block-end: 0;
    margin-inline-end: var(--space-2);
    border-inline-start: 0;
    border-block-start: 1px solid var(--border-strong);
}
.form-range-box--vertical > .form-range-bubble {
    writing-mode: horizontal-tb;
    direction: ltr;
    margin: 0;
    margin-right: var(--space-3);
    margin-bottom: calc(var(--range-thumb) / 2 + var(--range-at) * (100% - var(--range-thumb)));
    translate: 0 50%;
}
.stepper { display: inline-flex; align-items: stretch; }
.stepper .form-input {
    width: 5ch;
    text-align: center;
    border-radius: 0;
    font-variant-numeric: tabular-nums;
    appearance: textfield;
}
.stepper .form-input::-webkit-outer-spin-button,
.stepper .form-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper .btn { border-radius: 0; border-color: var(--field-border); }
.stepper .btn:hover { border-color: var(--border-hover); }
.stepper > :first-child { border-start-start-radius: var(--radius-control); border-end-start-radius: var(--radius-control); }
.stepper > :last-child  { border-start-end-radius: var(--radius-control);   border-end-end-radius: var(--radius-control); }
.stepper > * + * { margin-inline-start: -1px; }
.stepper .form-input:focus,
.stepper .btn:focus-visible { position: relative; z-index: 1; }
.form-input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.55;
    filter: invert(var(--picker-invert));
}
.form-input::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.form-input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]) {
    min-width: 0;
    appearance: none;
}
.form-input::-webkit-date-and-time-value {
    text-align: start;
    min-height: 1.4em;
}
}
@layer sedna.paint {
.form-combo {
    position: relative;
    display: block;
    width: 100%;
    anchor-scope: --sedna-combo;
}
.form-combo-box {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--control-height);
    padding: var(--space-1) var(--space-2);
    background: var(--bg);
    border: 1px solid var(--field-border);
    border-radius: var(--radius-control);
    color: var(--fg);
    cursor: text;
    anchor-name: --sedna-combo;
    transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.form-combo-box:hover { border-color: var(--border-hover); }
.form-combo-box:focus-within {
    border-color: var(--field-border-focus);
    box-shadow: 0 0 0 2px var(--brand-glow);
}
.form-combo-box:has(> .form-combo-input:disabled) {
    background: var(--surface-soft);
    color: var(--muted);
    cursor: not-allowed;
}
.form-combo-icon {
    flex-shrink: 0;
    padding-inline-start: var(--space-3);
    color: var(--muted);
    font-size: var(--text-5);
}
.form-combo-input {
    flex: 1 1 8ch;
    min-width: 8ch;
    min-height: var(--control-height-sm);
    padding: 0 var(--space-3);
    background: none;
    border: 0;
    outline: none;
    color: var(--fg);
    font: inherit;
    font-size: var(--text-4);
}
.form-combo-input::placeholder { color: var(--placeholder); }
.form-combo-input:disabled { cursor: not-allowed; }
.form-combo-box:has(> .form-combo-value) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}
.form-combo-box > .form-combo-value,
.form-combo-box:has(> .form-combo-value) > .form-combo-input {
    grid-row: 1;
    grid-column: 1;
}
.form-combo-box:has(> .form-combo-value) > .form-combo-actions { grid-row: 1; grid-column: 2; }
.form-combo-box:has(> .form-combo-value):has(> .form-combo-icon) { grid-template-columns: auto minmax(0, 1fr) auto; }
.form-combo-box:has(> .form-combo-value) > .form-combo-icon { grid-row: 1; grid-column: 1; }
.form-combo-box:has(> .form-combo-value):has(> .form-combo-icon) > :is(.form-combo-value, .form-combo-input) { grid-column: 2; }
.form-combo-box:has(> .form-combo-value):has(> .form-combo-icon) > .form-combo-actions { grid-column: 3; }
.form-combo-value {
    overflow: hidden;
    padding: 0 var(--space-3);
    font-size: var(--text-4);
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
}
.form-combo-value:not(:empty) ~ .form-combo-input::placeholder { color: transparent; }
.form-combo-box:has(> .form-combo-input:not(:placeholder-shown)) > .form-combo-value { visibility: hidden; }
.form-combo-box:has(> .form-combo-input[aria-expanded="true"]) > .form-combo-value { color: var(--muted); }
.form-combo-actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-inline-start: auto;
    padding-inline-start: var(--space-2);
}
.form-combo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--control-height-sm);
    height: var(--control-height-sm);
    padding: 0;
    background: none;
    border: 0;
    border-radius: var(--radius-small);
    color: var(--muted);
    font-size: var(--text-6);
    line-height: 1;
    cursor: pointer;
}
.form-combo-btn:hover { background: var(--bg-hover); color: var(--fg); }
.form-combo-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring); }
.form-combo-toggle i { transition: transform var(--motion-fast); }
.form-combo-box:has(> .form-combo-input[aria-expanded="true"]) .form-combo-toggle i { transform: rotate(180deg); }
.form-combo-box:not(:has(> .chip, > .form-combo-value:not(:empty))) .form-combo-clear { display: none; }
.form-combo-box:has(> .form-combo-input:disabled) .form-combo-btn { display: none; }
.form-combo-busy { margin-inline: var(--space-3); }
.form-combo:not(:has(.form-combo-list[aria-busy="true"])) .form-combo-busy { display: none; }
.form-combo-box > .chip[data-armed] {
    border-color: var(--brand);
    box-shadow: 0 0 0 2px var(--focus-ring);
    color: var(--fg);
}
.form-combo--collapse:not(:focus-within) > .form-combo-box {
    flex-wrap: nowrap;
    overflow: hidden;
    counter-reset: sedna-combo-more;
}
.form-combo--collapse:not(:focus-within) > .form-combo-box > .chip { flex-shrink: 1; min-width: 0; }
.form-combo--collapse:not(:focus-within) > .form-combo-box > .form-combo-input { flex-basis: 0; }
.form-combo--collapse:not(:focus-within) > .form-combo-box > .chip:nth-child(n + 4 of .chip) {
    position: absolute;
    visibility: hidden;
    counter-increment: sedna-combo-more;
}
.form-combo--collapse:not(:focus-within) > .form-combo-box > .form-combo-input,
.form-combo--collapse:not(:focus-within) > .form-combo-box > .form-combo-actions { order: 2; }
.form-combo--collapse:not(:focus-within) > .form-combo-box:has(> .chip:nth-child(4 of .chip))::after {
    content: "+" counter(sedna-combo-more);
    order: 1;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    min-height: var(--control-height-sm);
    padding: 0 var(--space-4);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-pill);
    color: var(--muted);
    font-size: var(--text-3);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.form-combo-panel {
    display: none;
    position: fixed;
    position-anchor: --sedna-combo;
    position-area: block-end span-inline-end;
    justify-self: start;
    align-self: start;
    width: var(--form-combo-panel-width, anchor-size(width));
    min-width: max(anchor-size(width), 14rem);
    max-width: calc(100vw - 2 * var(--space-7));
    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
    position-visibility: anchors-visible;
    margin-block-start: var(--space-2);
    padding: var(--space-2);
    --surface-here: var(--bg-elevated);
    --muted-here: var(--muted);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-surface);
    box-shadow: var(--shadow-dropdown);
    z-index: 550;
}
.form-combo:has(> .form-combo-box > .form-combo-input[aria-expanded="true"]) > .form-combo-panel { display: block; }
@container style(--panel-placement: block-start) {
    .form-combo:not(.form-combo--inline) > .form-combo-panel {
        position-area: block-start span-inline-end;
        align-self: end;
        margin-block: 0 var(--space-2);
    }
}
@container style(--panel-placement: inline-end) {
    .form-combo:not(.form-combo--inline) > .form-combo-panel {
        position-area: inline-end span-block-end;
        justify-self: start;
        align-self: start;
        margin-block: 0;
        margin-inline: var(--space-2) 0;
        position-try-fallbacks: flip-inline, flip-block, flip-inline flip-block,
            --sedna-panel-below, --sedna-panel-below flip-inline, --sedna-panel-above, --sedna-panel-above flip-inline;
    }
}
@container style(--panel-placement: inline-start) {
    .form-combo:not(.form-combo--inline) > .form-combo-panel {
        position-area: inline-start span-block-end;
        justify-self: end;
        align-self: start;
        margin-block: 0;
        margin-inline: 0 var(--space-2);
        position-try-fallbacks: flip-inline, flip-block, flip-inline flip-block,
            --sedna-panel-below, --sedna-panel-below flip-inline, --sedna-panel-above, --sedna-panel-above flip-inline;
    }
}
@media (max-width: 767px) {
    .form-combo:not(.form-combo--inline) > .form-combo-panel {
        inset: auto 0 0;
        position-area: none;
        position-try-fallbacks: none;
        position-visibility: always;
        align-self: normal;
        width: 100%;
        min-width: 0;
        max-width: none;
        margin: 0;
        padding: var(--space-3) var(--space-3) calc(var(--space-3) + var(--safe-block-end));
        border-bottom: none;
        border-radius: var(--radius-panel) var(--radius-panel) 0 0;
        box-shadow: var(--shadow-modal);
    }
    .form-combo:not(.form-combo--inline) > .form-combo-panel > :is(.form-combo-list, .tree) { max-height: 50dvh; }
}
.form-combo--fit { --form-combo-panel-width: max-content; }
.form-combo--fit > .form-combo-panel { max-width: min(36rem, 100vw - 2 * var(--space-7)); }
.form-combo--wrap .form-combo-option-text {
    white-space: normal;
    overflow-wrap: anywhere;
}
.form-combo--inline > .form-combo-panel {
    display: block;
    position: static;
    justify-self: stretch;
    align-self: auto;
    width: auto;
    min-width: 0;
    box-shadow: none;
}
.form-combo-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    max-height: 16rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.form-combo-panel > .tree {
    max-height: 16rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.form-combo-list[aria-busy="true"] > .form-combo-option { opacity: 0.5; }
.form-combo-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-2) var(--space-4) var(--space-3);
    margin-block-end: var(--space-2);
    border-bottom: 1px solid var(--border);
    color: var(--muted);
    font-size: var(--text-2);
    font-variant-numeric: tabular-nums;
}
.form-combo-head button {
    padding: 0;
    background: none;
    border: 0;
    color: var(--brand-text);
    font: inherit;
    cursor: pointer;
}
.form-combo-head button:hover { text-decoration: underline; }
.form-combo-option {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-height: calc(var(--control-height-sm) + var(--space-2));
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-inner);
    color: var(--fg);
    font-size: var(--text-4);
    line-height: round(1.35em, 2px);
    cursor: pointer;
    user-select: none;
}
.form-combo-option:hover,
.form-combo-option[data-active] { background: var(--bg-hover); }
.form-combo-option[aria-disabled="true"] { color: var(--muted); cursor: default; }
.form-combo-option[aria-disabled="true"]:hover { background: none; }
.form-combo-option { position: relative; }
.form-combo-option::before {
    content: "";
    flex-shrink: 0;
    width: 15px;
    height: 15px;
}
.form-combo-option[aria-selected="true"]::after {
    inset: auto;
    inset-inline-start: calc(var(--space-4) + 1px);
    top: calc(50% - 6.5px);
    width: 13px;
    height: 13px;
    background: var(--brand-text);
}
[aria-multiselectable="true"] > .form-combo-option::before {
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-small);
}
[aria-multiselectable="true"] > .form-combo-option[aria-selected="true"]::before {
    background: var(--brand);
    border-color: var(--brand);
}
[aria-multiselectable="true"] > .form-combo-option[aria-selected="true"]::after {
    background: var(--on-solid);
}
.form-combo-option-text { overflow: hidden; min-width: 0; text-overflow: ellipsis; white-space: nowrap; }
.form-combo-option-meta {
    flex-shrink: 0;
    margin-inline-start: auto;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--text-2);
    white-space: nowrap;
}
.form-combo-option > i { flex-shrink: 0; color: var(--muted); font-size: var(--text-6); }
.form-combo-option-note {
    display: block;
    overflow: hidden;
    color: var(--muted);
    font-size: var(--text-2);
    text-overflow: ellipsis;
}
.form-combo-option > .kbd { flex-shrink: 0; margin-inline-start: auto; }
.form-combo-group {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-4) var(--space-2);
    color: var(--muted);
    font-size: var(--text-1);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.form-combo-group-action {
    flex-shrink: 0;
    margin-inline-start: auto;
    margin-block: calc(-1 * var(--space-2));
    padding: var(--space-2) var(--space-3);
    background: none;
    border: 0;
    border-radius: var(--radius-small);
    color: var(--brand-text);
    font: inherit;
    font-size: var(--text-2);
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
}
.form-combo-group-action:hover { text-decoration: underline; }
.form-combo-group-action[data-active] {
    background: var(--bg-hover);
    box-shadow: 0 0 0 2px var(--focus-ring);
}
.form-combo-group-action:disabled {
    color: var(--muted);
    text-decoration: none;
    cursor: default;
}
.form-combo-group[data-all-selected] .form-combo-group-pick,
.form-combo-group:not([data-all-selected]) .form-combo-group-unpick { display: none; }
::highlight(sedna-combo-match) {
    background-color: var(--brand-tint-strong);
    color: var(--fg);
}
.form-combo-empty,
.form-combo-status {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-4);
    color: var(--muted);
    font-size: var(--text-3);
}
.form-combo-empty i,
.form-combo-status i { font-size: var(--text-6); }
.form-combo-empty { display: none; }
.form-combo-panel:not(:has(.form-combo-option:not([hidden]), [role="treeitem"]:not([hidden]))):not(:has([aria-busy="true"])) > .form-combo-empty { display: flex; }
.form-combo-status--error { color: var(--danger-fg); }
.form-combo-status .btn { margin-inline-start: auto; }
.form-combo-skeleton {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-height: calc(var(--control-height-sm) + var(--space-2));
    padding: var(--space-2) var(--space-4);
}
.form-combo-skeleton > .skeleton { margin: 0; }
.form-combo-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    width: 100%;
    min-height: calc(var(--control-height-sm) + var(--space-2));
    padding: var(--space-2) var(--space-4);
    background: none;
    border: 0;
    border-radius: var(--radius-inner);
    color: var(--muted);
    font: inherit;
    font-size: var(--text-2);
    cursor: pointer;
}
.form-combo-more:hover { background: var(--bg-hover); color: var(--fg); }
}
@layer sedna.paint {
@supports (appearance: base-select) {
    .form-select { appearance: base-select; }
    .form-select::picker(select) { appearance: base-select; }
}
@supports (appearance: base-select) {
    .form-select {
        align-items: center;
        gap: var(--space-4);
        padding-inline-end: var(--space-5);
        white-space: nowrap;
        overflow: hidden;
        text-align: start;
    }
    .form-select--sm { padding-inline-end: var(--space-4); }
    .form-select--lg { padding-inline-end: var(--space-7); }
}
.form-select selectedcontent {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-inline-size: 0;
    overflow: hidden;
}
.form-select selectedcontent .option-hint { display: none; }
@supports (appearance: base-select) {
    .form-select .option-sep { display: none; }
}
.form-select::picker-icon {
    content: '';
    width: 10px;
    height: 5px;
    flex-shrink: 0;
    margin-inline-start: auto;
    background-image:
        linear-gradient(45deg,  transparent 50%, var(--muted) 50%),
        linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: 0 0, 5px 0;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    transition: rotate var(--motion-fast);
}
.form-select:open::picker-icon { rotate: 180deg; }
.form-select:open { border-color: var(--field-border-focus); }
.form-select::picker(select) {
    position-area: block-end span-inline-end;
    position-try-fallbacks: none;
    padding: var(--space-2);
    --surface-here: var(--bg-elevated);
    --muted-here: var(--muted);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-surface);
    box-shadow: var(--shadow-dropdown);
    color: var(--fg);
    font-size: var(--text-4);
    margin-block-start: var(--space-2);
    opacity: 0;
    transition:
        opacity var(--motion-fast),
        display var(--motion-fast) allow-discrete,
        overlay var(--motion-fast) allow-discrete;
}
@container style(--panel-placement: block-start) {
    .form-select::picker(select) {
        position-area: block-start span-inline-end;
        position-try-fallbacks: flip-block;
        position-try-order: normal;
        margin-block: 0 var(--space-2);
    }
}
@container style(--panel-placement: inline-end) {
    .form-select::picker(select) {
        position-area: inline-end span-block-end;
        position-try-fallbacks: flip-inline, flip-block, flip-inline flip-block,
            --sedna-panel-below, --sedna-panel-below flip-inline, --sedna-panel-above, --sedna-panel-above flip-inline;
        position-try-order: normal;
        margin-block: 0;
        margin-inline: var(--space-2) 0;
    }
}
@container style(--panel-placement: inline-start) {
    .form-select::picker(select) {
        position-area: inline-start span-block-end;
        position-try-fallbacks: flip-inline, flip-block, flip-inline flip-block,
            --sedna-panel-below, --sedna-panel-below flip-inline, --sedna-panel-above, --sedna-panel-above flip-inline;
        position-try-order: normal;
        margin-block: 0;
        margin-inline: 0 var(--space-2);
    }
}
.form-select:open::picker(select) { opacity: 1; }
@starting-style {
    .form-select:open::picker(select) { opacity: 0; }
}
.form-select option {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-inner);
    color: var(--fg);
    font-size: var(--text-4);
    cursor: pointer;
}
.form-select option + option { margin-block-start: var(--space-1); }
.form-select option:hover,
.form-select option:focus { background: var(--bg-hover); }
.form-select option:checked { background: var(--brand-tint); color: var(--brand-text); }
.form-select option:checked:hover,
.form-select option:checked:focus { background: var(--brand-tint-strong); }
.form-select option:disabled { color: var(--muted); cursor: not-allowed; }
.form-select option i,
.form-select selectedcontent i { font-size: var(--text-7); color: var(--muted); flex-shrink: 0; }
.form-select option::checkmark {
    order: 2;
    margin-inline-start: auto;
    color: var(--brand-text);
}
.form-select .option-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-inline-size: 0;
    overflow: hidden;
}
.form-select .option-hint {
    color: var(--muted);
    font-size: var(--text-3);
}
.form-select option > .option-hint { order: 1; margin-inline-start: auto; }
.form-select option:has(> .option-hint)::checkmark { margin-inline-start: var(--space-5); }
.form-select optgroup > legend {
    padding: var(--space-4) var(--space-5) var(--space-2);
    font-size: var(--text-1);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}
.form-select:not([multiple], [size]:not([size="1"])) :is(optgroup, option) + optgroup {
    margin-block-start: var(--space-2);
    border-block-start: 1px solid var(--divider);
}
.form-select hr {
    margin: var(--space-2) 0;
    border: 0;
    border-block-start: 1px solid var(--divider);
}
.form-select:not([multiple], [size]:not([size="1"])) hr + optgroup {
    margin-block-start: 0;
    border-block-start: 0;
}
@supports (appearance: base-select) {
    .form-select[multiple],
    .form-select[size]:not([size="1"]) {
        box-sizing: border-box;
        --surface-here: var(--bg);
        --muted-here: var(--muted);
        white-space: normal;
        overflow: auto;
        block-size: calc(max(2, attr(size type(<number>), 4)) * 2.4em + var(--space-2) * 2);
        padding: var(--space-2);
        line-height: 2.4;
    }
    .form-select[multiple] option,
    .form-select[size]:not([size="1"]) option {
        padding-block: 0;
        line-height: calc(2.4em - 2px);
    }
    .form-select[multiple] option + option,
    .form-select[size]:not([size="1"]) option + option {
        margin-block-start: var(--space-1);
    }
    .form-select[multiple] option:has(.option-text),
    .form-select[size]:not([size="1"]) option:has(.option-text) {
        padding-block: var(--space-3);
        line-height: round(1.4em, 2px);
    }
}
}
@layer sedna.paint {
.tabs {
    display: flex;
    align-items: stretch;
    gap: var(--space-1);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-7);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    color: var(--muted);
    font-family: inherit;
    font-size: var(--text-4);
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: color var(--motion-fast), border-color var(--motion-fast), background var(--motion-fast);
}
.tab i { font-size: var(--text-6); }
.tab:hover { color: var(--fg); border-bottom-color: var(--control-border); text-decoration: none; }
.tab:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring); }
.tab:disabled,
.tab[aria-disabled="true"] { cursor: not-allowed; }
.tab:where(:disabled, [aria-disabled="true"]):hover { color: var(--muted); border-bottom-color: transparent; }
.tab--active,
.tab[aria-selected="true"] { color: var(--brand-text); border-bottom-color: var(--tab-indicator); }
.tab--active:hover,
.tab[aria-selected="true"]:hover { color: var(--brand-text); }
.tab-count {
    padding: 0 var(--space-3);
    background: var(--badge-bg);
    border-radius: var(--radius-pill);
    color: var(--fg-soft);
    font-size: var(--text-2);
    font-weight: 600;
}
.tab--active .tab-count,
.tab[aria-selected="true"] .tab-count { background: var(--brand-tint); color: var(--brand-text); }
.tab-panel { padding-top: var(--space-7); }
.tabs--fill > .tab {
    flex: 1 1 0;
    min-width: min-content;
    justify-content: center;
    text-align: center;
    white-space: normal;
    overflow-wrap: break-word;
}
.tab:not(:has(> *)) { display: inline-block; text-box: trim-both cap alphabetic; padding-block: calc(var(--space-4) + var(--cap-gap)); }
.tab-count { text-box: trim-both cap alphabetic; padding-block: var(--cap-gap); }
}
@layer sedna.paint {
.choice-tiles {
    --choice-min: 160px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--choice-min), 100%), 1fr));
    gap: var(--space-5);
}
.choice-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-inline-size: 0;
    padding: var(--space-5);
    background: var(--card-bg);
    border: 1px solid var(--control-border);
    border-radius: var(--radius-surface);
    color: var(--fg-soft);
    font-size: var(--text-4);
    cursor: pointer;
    transition: border-color var(--motion-fast), background var(--motion-fast), box-shadow var(--motion-fast);
}
.choice-tile > input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}
.choice-tile:hover { border-color: var(--border-hover); }
.choice-tile-art {
    display: grid;
    place-items: center;
    aspect-ratio: var(--media-ratio, 16 / 9);
    margin-block-end: var(--space-2);
    border-radius: var(--radius-inner);
    background: var(--surface-soft);
    color: var(--muted);
    font-size: var(--text-10);
    overflow: hidden;
}
.choice-tile-art > :is(img, svg) { inline-size: 100%; block-size: 100%; object-fit: cover; }
.choice-tile-title { color: var(--fg); font-weight: 600; overflow-wrap: anywhere; }
.choice-tile-hint { color: var(--muted); font-size: var(--text-3); overflow-wrap: anywhere; }
.choice-tile:has(> input:checked) {
    border-color: var(--selected);
    background: var(--brand-tint);
    box-shadow: inset 0 0 0 1px var(--selected);
}
.choice-tile:has(> input:checked) .choice-tile-art { color: var(--brand-text); }
.choice-tile:has(> input:focus-visible) { box-shadow: 0 0 0 2px var(--focus-ring); }
.choice-tile:has(> input:checked:focus-visible) { box-shadow: inset 0 0 0 1px var(--selected), 0 0 0 2px var(--focus-ring); }
.choice-tile:has(> input:disabled) {
    background: var(--disabled-bg);
    border-color: var(--disabled-border);
    color: var(--disabled-fg);
    cursor: not-allowed;
}
.choice-tile:has(> input:disabled) :is(.choice-tile-title, .choice-tile-art) { color: var(--disabled-fg); }
}
@layer sedna.paint {
.rating {
    --rating-size: 20px;
    --rating-shape: polygon(50% 2.4%, 61.8% 38.8%, 100% 38.8%, 69.1% 61.2%, 80.9% 97.6%, 50% 75.1%, 19.1% 97.6%, 30.9% 61.2%, 0% 38.8%, 38.2% 38.8%);
    --rating-shape-half: polygon(50% 75.1%, 19.1% 97.6%, 30.9% 61.2%, 0% 38.8%, 38.2% 38.8%, 50% 2.4%);
    --rating-shape-outline: polygon(evenodd,
        50% 2.4%, 61.8% 38.8%, 100% 38.8%, 69.1% 61.2%, 80.9% 97.6%, 50% 75.1%, 19.1% 97.6%, 30.9% 61.2%, 0% 38.8%, 38.2% 38.8%, 50% 2.4%,
        50% 28.3%, 44% 46.8%, 24.6% 46.8%, 40.3% 58.2%, 34.3% 76.6%, 50% 65.2%, 65.7% 76.6%, 59.7% 58.2%, 75.4% 46.8%, 56% 46.8%, 50% 28.3%,
        50% 2.4%);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    width: fit-content;
    vertical-align: middle;
}
.rating-value {
    position: relative;
    inset-block-start: round(calc(var(--rating-size) * 0.05), 1px);
    margin-inline-start: var(--space-2);
    color: var(--fg-soft);
    font-size: calc(var(--rating-size) * 0.7);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-box: trim-both cap alphabetic;
    padding-block: var(--cap-gap);
}
.rating--sm { --rating-size: 16px; }
.rating--lg { --rating-size: 28px; }
.rating:has(input) { min-height: var(--control-height); }
.rating--sm:has(input) { min-height: var(--control-height-sm); }
.rating--lg:has(input) { min-height: var(--control-height-lg); }
.rating-star {
    position: relative;
    flex-shrink: 0;
    width: var(--rating-size);
    height: var(--rating-size);
    border-radius: var(--radius-small);
}
.rating-star::before,
.rating-star::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    print-color-adjust: exact;
}
.rating-star::before { background: var(--rating-off); clip-path: var(--rating-shape-outline); }
.rating-star::after { background: var(--rating-on); clip-path: var(--rating-shape); visibility: hidden; }
.rating-star > input,
.rating-half > input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}
.rating-star:has(> input),
.rating-half { cursor: pointer; }
.rating-half {
    position: absolute;
    inset-block: 0;
    inline-size: 50%;
    border-radius: var(--radius-small);
}
.rating-half:first-child { inset-inline-start: 0; }
.rating-half:last-child { inset-inline-end: 0; }
.rating-star--on::after,
.rating-star:has(> input:checked)::after,
.rating-star:has(> .rating-half:last-child > input:checked)::after,
.rating-star:has(~ .rating-star input:checked)::after { visibility: visible; }
.rating-star--half::after,
.rating-star:has(> .rating-half:first-child > input:checked)::after { visibility: visible; clip-path: var(--rating-shape-half); }
.rating:has(input:enabled):has(> .rating-star:hover) .rating-star::after { visibility: hidden; clip-path: var(--rating-shape); }
.rating:has(input:enabled):has(> .rating-star:hover) :is(.rating-star:hover, .rating-star:has(~ .rating-star:hover))::after { visibility: visible; }
.rating:has(input:enabled):has(> .rating-star:hover) .rating-star:has(> .rating-half:first-child:hover)::after { clip-path: var(--rating-shape-half); }
.rating-star:has(> input:focus-visible),
.rating-half:has(> input:focus-visible) { box-shadow: 0 0 0 2px var(--focus-ring); }
.rating:has(input:disabled) .rating-star { opacity: var(--disabled-opacity); }
.rating:has(input:disabled) :is(.rating-star, .rating-half) { cursor: not-allowed; }
}
@layer sedna.paint {
.segmented {
    display: inline-flex;
    width: fit-content;
    align-items: stretch;
    min-height: var(--control-height);
    padding: var(--space-1);
    background: var(--surface-strong);
    border: 1px solid var(--control-border);
    border-radius: var(--radius-control);
}
.segmented-option {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-6);
    border-radius: var(--radius-inner);
    color: var(--muted);
    font-size: var(--text-3);
    font-weight: 500;
    line-height: round(1.4em, 2px);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background var(--motion-fast), color var(--motion-fast);
}
.segmented-option i { font-size: var(--text-5); line-height: 1; }
.segmented.segmented--fill { display: flex; width: 100%; }
.segmented--fill > .segmented-option {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    text-align: center;
    white-space: normal;
}
.segmented-option input {
    position: absolute;
    inset: 0;
    margin: 0;
    appearance: none;
    opacity: 0;
    cursor: pointer;
}
.segmented-option:hover:not(:has(input:disabled)) { color: var(--fg); }
.segmented-option input:disabled { cursor: not-allowed; }
.segmented-option:has(input:checked) {
    background: var(--bg-elevated);
    color: var(--fg);
    box-shadow: inset 0 0 0 1px var(--control-border);
}
.segmented-option:has(input:focus-visible) { box-shadow: 0 0 0 2px var(--focus-ring); }
.segmented-option:has(input:checked:focus-visible) {
    box-shadow: inset 0 0 0 1px var(--control-border), 0 0 0 2px var(--focus-ring);
}
.segmented-option:has(input:disabled) { cursor: not-allowed; }
.segmented--sm { min-height: var(--control-height-sm); }
.segmented--sm .segmented-option   { padding-block: var(--space-1); font-size: var(--text-2); }
.segmented--sm .segmented-option i { font-size: var(--text-4); }
.segmented--lg { min-height: var(--control-height-lg); }
.segmented--lg .segmented-option   { padding-block: var(--space-4); font-size: var(--text-4); }
.segmented--lg .segmented-option i { font-size: var(--text-6); }
}
@layer sedna.paint {
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    --avatar-size: 28px;
    --avatar-overlap: 8px;
    --avatar-gap: 2px;
    --avatar-cut-x: calc(100% + var(--avatar-size) / 2 - var(--avatar-overlap));
    --avatar-cut-y: 50%;
    width: var(--avatar-size);
    height: var(--avatar-size);
    border-radius: 50%;
    overflow: hidden;
    background: var(--brand-tint);
    color: var(--brand-text);
    font-size: var(--text-3);
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    user-select: none;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar i { font-size: var(--text-6); }
.avatar--sm { --avatar-size: 22px; --avatar-overlap: 6px; font-size: var(--text-1); }
.avatar--sm i { font-size: var(--text-5); }
.avatar--lg { --avatar-size: 40px; --avatar-overlap: 11px; font-size: var(--text-6); }
.avatar--lg i { font-size: var(--text-9); }
.avatar--muted { background: var(--surface-strong); color: var(--muted); }
.avatar--viz-1 { background: var(--viz-1); color: var(--on-solid); }
.avatar--viz-2 { background: var(--viz-2); color: var(--on-viz); }
.avatar--viz-3 { background: var(--viz-3); color: var(--on-viz); }
.avatar--viz-4 { background: var(--viz-4); color: var(--on-viz); }
.avatar--viz-5 { background: var(--viz-5); color: var(--on-viz); }
.avatar--viz-6 { background: var(--viz-6); color: var(--on-viz); }
.avatar--ring,
.avatar--ring-warn {
    --avatar-ring: var(--brand);
    --avatar-ring-width: 2px;
    --avatar-ring-offset: 2px;
    outline: var(--avatar-ring-width) solid var(--avatar-ring);
    outline-offset: var(--avatar-ring-offset);
}
.avatar--ring-warn { --avatar-ring: var(--warn-solid); }
.avatar-presence {
    --presence-size: 10px;
    --presence-stroke: 2px;
    --presence-knockout: var(--surface-here, var(--bg));
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}
.avatar-presence:has(> .avatar--lg) { --presence-size: 12px; }
.avatar-presence::after {
    content: '';
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: 0;
    flex-shrink: 0;
    width: var(--presence-size);
    height: var(--presence-size);
    border-radius: 50%;
    background: var(--muted);
    box-shadow: 0 0 0 2px var(--presence-knockout);
}
.avatar-presence--online::after {
    background:
        linear-gradient(45deg, transparent calc(50% - var(--presence-stroke) / 2), var(--presence-knockout) 0 calc(50% + var(--presence-stroke) / 2), transparent 0)
            calc(var(--presence-size) * 0.2) calc(var(--presence-size) * 0.42) / calc(var(--presence-size) * 0.3) calc(var(--presence-size) * 0.3) no-repeat,
        linear-gradient(-45deg, transparent calc(50% - var(--presence-stroke) / 2), var(--presence-knockout) 0 calc(50% + var(--presence-stroke) / 2), transparent 0)
            calc(var(--presence-size) * 0.38) calc(var(--presence-size) * 0.24) / calc(var(--presence-size) * 0.44) calc(var(--presence-size) * 0.44) no-repeat,
        var(--go-solid);
}
.avatar-presence--away::after {
    background:
        linear-gradient(var(--presence-knockout), var(--presence-knockout))
            calc(var(--presence-size) / 2 - var(--presence-stroke) / 2) calc(var(--presence-size) * 0.2)
            / var(--presence-stroke) calc(var(--presence-size) * 0.3 + var(--presence-stroke) / 2) no-repeat,
        linear-gradient(var(--presence-knockout), var(--presence-knockout))
            calc(var(--presence-size) / 2 - var(--presence-stroke) / 2) calc(var(--presence-size) / 2 - var(--presence-stroke) / 2)
            / calc(var(--presence-size) * 0.28 + var(--presence-stroke) / 2) var(--presence-stroke) no-repeat,
        var(--warn-solid);
}
.avatar-presence--busy::after { background: var(--danger-solid); }
.avatar-presence--do-not-disturb::after {
    background:
        linear-gradient(var(--presence-knockout), var(--presence-knockout))
            center / calc(var(--presence-size) * 0.6) var(--presence-stroke) no-repeat,
        var(--danger-solid);
}
.avatar-presence--meeting::after {
    background:
        radial-gradient(circle calc(var(--presence-size) * 0.2), var(--presence-knockout) 100%, transparent 100%),
        var(--danger-solid);
}
.avatar-presence--presenting::after {
    background:
        conic-gradient(from 240deg at 100% 50%, var(--presence-knockout) 0 60deg, transparent 0)
            calc(var(--presence-size) * 0.34) calc(var(--presence-size) * 0.27)
            / calc(var(--presence-size) * 0.42) calc(var(--presence-size) * 0.46) no-repeat,
        var(--danger-solid);
}
.avatar-presence--out-of-office::after {
    background:
        conic-gradient(from 45deg at 0 50%, var(--presence-knockout) 0 90deg, transparent 0)
            calc(var(--presence-size) * 0.18) calc(var(--presence-size) * 0.2)
            / calc(var(--presence-size) * 0.3) calc(var(--presence-size) * 0.6) no-repeat,
        linear-gradient(var(--presence-knockout), var(--presence-knockout))
            calc(var(--presence-size) * 0.4) calc(var(--presence-size) / 2 - var(--presence-stroke) / 2)
            / calc(var(--presence-size) * 0.42) var(--presence-stroke) no-repeat,
        var(--presence-out-of-office);
}
.avatar-presence--offline::after {
    background: var(--bg-elevated);
    box-shadow: 0 0 0 2px var(--presence-knockout), inset 0 0 0 var(--presence-stroke) var(--muted);
}
.avatar-presence--unknown::after {
    background:
        radial-gradient(circle closest-side, var(--bg-elevated) calc(100% - var(--presence-stroke)), transparent 0),
        repeating-conic-gradient(var(--muted) 0 36deg, var(--bg-elevated) 0 60deg);
}
.avatar-presence--label {
    align-items: center;
    gap: var(--space-3);
    vertical-align: middle;
}
.avatar-presence--label::after {
    position: static;
    order: -1;
    box-shadow: none;
}
.avatar-presence--label.avatar-presence--offline::after { box-shadow: inset 0 0 0 var(--presence-stroke) var(--muted); }
.avatar-group { display: inline-flex; align-items: center; --avatar-overlap: 8px; --avatar-gap: 2px; }
.avatar-group > * + * { margin-inline-start: calc(var(--avatar-overlap) * -1); }
.avatar-group > .avatar:has(+ .avatar),
.avatar-pair > .avatar:first-child:not(:last-child) {
    mask-image: radial-gradient(
        circle calc(var(--avatar-size) / 2 + var(--avatar-gap))
        at var(--avatar-cut-x) var(--avatar-cut-y),
        transparent 100%, currentColor 100%);
}
.avatar-more {
    display: inline-flex;
    align-items: center;
    margin-inline-start: var(--avatar-gap);
    padding-inline: var(--space-2) var(--space-4);
    color: var(--muted);
    font-size: var(--text-3);
}
.avatar-pair {
    --avatar-pair-size: var(--avatar-size, 28px);
    display: inline-grid;
    flex-shrink: 0;
    width: var(--avatar-pair-size);
    height: var(--avatar-pair-size);
    border-radius: 50%;
    vertical-align: middle;
}
.avatar-pair > .avatar {
    --avatar-size: round(down, calc(var(--avatar-pair-size) * 0.72), 2px);
    grid-area: 1 / 1;
    font-size: var(--text-1);
}
.avatar-pair > .avatar i { font-size: var(--text-3); }
.avatar-pair.avatar--lg > .avatar { font-size: var(--text-3); }
.avatar-pair.avatar--lg > .avatar i { font-size: var(--text-6); }
.avatar-pair > .avatar:first-child:not(:last-child) {
    --avatar-cut-x: calc(var(--avatar-pair-size) - var(--avatar-size) / 2);
    --avatar-cut-y: calc(var(--avatar-pair-size) - var(--avatar-size) / 2);
}
.avatar-pair > .avatar:last-child:not(:first-child) {
    margin-block-start: calc(var(--avatar-pair-size) - var(--avatar-size));
    margin-inline-start: calc(var(--avatar-pair-size) - var(--avatar-size));
}
.avatar-pair:is(.avatar--ring, .avatar--ring-warn) {
    --avatar-ring-offset: calc(2px
        + (var(--avatar-pair-size) - round(down, calc(var(--avatar-pair-size) * 0.72), 2px)) / 2 * 1.4142
        + round(down, calc(var(--avatar-pair-size) * 0.72), 2px) / 2
        - var(--avatar-pair-size) / 2);
}
.avatar:not(:has(> *)) { display: inline-block; align-content: center; text-align: center; text-box: trim-both cap alphabetic; }
}
@layer sedna.paint {
.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    max-width: 100%;
    min-height: var(--control-height-sm);
    padding: var(--space-1) var(--space-2) var(--space-1) var(--space-5);
    background: var(--surface-strong);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--fg-soft);
    font-size: var(--text-3);
    line-height: round(1.6em, 2px);
}
.chip--lg { min-height: var(--control-height); font-size: var(--text-4); padding-inline-start: var(--space-6); }
.chip--sm { min-height: calc(var(--control-height-sm) - 6px); font-size: var(--text-2); padding-block: 0; padding-inline-start: var(--space-4); }
.chip--lg .chip-dismiss { width: 22px; height: 22px; }
.chip:not(:has(.chip-dismiss)) { padding-inline-end: var(--space-5); }
.chip > i { font-size: var(--text-5); color: var(--muted); }
.chip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip:not(.chip--lg) > .avatar { --avatar-size: 20px; }
.chip-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--tone-solid, var(--border-hover));
}
.chip--sm .chip-dot { width: 6px; height: 6px; }
.chip--lg .chip-dot { width: 8px; height: 8px; }
.chip-dismiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 50%;
    color: var(--muted);
    font-size: var(--text-5);
    line-height: 1;
    cursor: pointer;
}
.chip-dismiss:hover { background: var(--bg-hover); color: var(--fg); }
.chip-dismiss:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring); }
.chip--active,
button.chip[aria-pressed="true"],
a.chip[aria-current="page"] {
    background: var(--brand-tint);
    border-color: var(--brand-soft);
    color: var(--brand-text);
}
.chip--active i,
.chip--active .chip-dismiss,
button.chip[aria-pressed="true"] i,
a.chip[aria-current="page"] i { color: var(--brand-text); }
.chip--invalid {
    background: var(--danger-bg);
    border-color: var(--danger-border);
    color: var(--danger-fg);
}
.chip--invalid > i,
.chip--invalid .chip-dismiss { color: var(--danger-fg); }
button.chip { font-family: inherit; cursor: pointer; }
button.chip:hover { border-color: var(--border-hover); }
button.chip:not([aria-pressed="true"], .chip--active):hover,
a.chip:not([aria-current="page"], .chip--active):hover { background: var(--bg-hover); color: var(--fg); }
button.chip:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring); }
a.chip { text-decoration: none; }
a.chip:hover { border-color: var(--border-hover); text-decoration: none; }
a.chip:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring); }
.chip-set { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.chip:not(:has(> *)) { display: inline-block; align-content: center; text-box: trim-both cap alphabetic; }
.chip-label { text-box: trim-both cap alphabetic; padding-block: var(--cap-gap); }
}
@layer sedna.paint {
.chart {
    position: relative;
    display: grid;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    height: var(--chart-height, 16rem);
    min-width: 0;
    overflow: hidden;
    border-radius: inherit;
}
.chart--sm { --chart-height: 10rem; }
.chart--lg { --chart-height: 24rem; }
.chart--fill { height: 100%; min-height: 8rem; }
.chart:focus { outline: none; }
.chart:focus-visible:not([data-chart-pointer])::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    box-shadow: inset 0 0 0 2px var(--focus-ring);
    pointer-events: none;
}
.chart-plot {
    position: relative;
    grid-area: 1 / 1 / -1 / -1;
    min-width: 0;
    min-height: 0;
}
.chart-data {
    position: absolute;
    width: 1px;
    height: 1px;
    table-layout: fixed;
    border-spacing: 0;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.chart-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    direction: ltr;
    font-family: var(--font-sans);
    font-size: var(--text-2);
    font-variant-numeric: tabular-nums;
    user-select: none;
    -webkit-user-select: none;
}
.chart-grid line {
    stroke: var(--border);
    stroke-width: 1;
    shape-rendering: crispEdges;
}
.chart-axis {
    stroke: var(--border-strong);
    stroke-width: 1;
    shape-rendering: crispEdges;
}
.chart-tick { fill: var(--muted); }
.chart-category { fill: var(--fg-soft); }
.chart-mark { fill: currentColor; stroke: none; }
.chart-line {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}
.chart-area { fill-opacity: 0.18; }
.chart-marker { stroke: var(--surface-here, var(--bg)); stroke-width: 1.5; }
.chart-marker--active { stroke-width: 2; }
.chart-slice { stroke: var(--surface-here, var(--bg)); stroke-width: 2; stroke-linejoin: round; }
.chart-ring {
    fill: none;
    stroke: var(--fg);
    stroke-width: 2;
    pointer-events: none;
}
.chart-guide {
    stroke: var(--border-strong);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    pointer-events: none;
}
.chart-band { fill: var(--bg-hover); pointer-events: none; }
.chart-svg[data-chart-enter] .chart-marks { animation: sedna-chart-in var(--motion-slow) ease-out both; }
@keyframes sedna-chart-in { from { opacity: 0; } }
.chart-tip {
    --chart-tip-tone: var(--viz-1);
    position: absolute;
    left: 0;
    inset-block-start: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 8rem;
    max-width: 18rem;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-3);
    line-height: 1.4;
    color: var(--tip-fg);
    background: var(--tip-bg);
    border: 1px solid var(--tip-border);
    border-radius: var(--radius-control);
    box-shadow: var(--shadow-tip);
    pointer-events: none;
}
.chart-tip-title { font-weight: 600; }
.chart-tip-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--muted);
}
.chart-tip-row[data-chart-current] { color: var(--tip-fg); }
.chart-tip-swatch {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    color: var(--chart-tip-tone);
    background: currentColor;
    border-radius: 2px;
}
.chart-tip-value {
    margin-inline-start: auto;
    padding-inline-start: var(--space-5);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--tip-fg);
}
[data-chart-tone="1"] { --chart-tip-tone: var(--viz-1); }
[data-chart-tone="2"] { --chart-tip-tone: var(--viz-2); }
[data-chart-tone="3"] { --chart-tip-tone: var(--viz-3); }
[data-chart-tone="4"] { --chart-tip-tone: var(--viz-4); }
[data-chart-tone="5"] { --chart-tip-tone: var(--viz-5); }
[data-chart-tone="6"] { --chart-tip-tone: var(--viz-6); }
[data-chart-tone="go"] { --chart-tip-tone: var(--go-solid); }
[data-chart-tone="warn"] { --chart-tip-tone: var(--warn-solid); }
[data-chart-tone="danger"] { --chart-tip-tone: var(--danger-solid); }
[data-chart-tone="info"] { --chart-tip-tone: var(--info-solid); }
[data-chart-tone="muted"] { --chart-tip-tone: var(--muted); }
.chart-wait,
.chart-empty {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.chart-wait { height: auto; }
.chart[data-chart-state]:not([aria-busy="true"]) .chart-wait { display: none; }
.chart-empty {
    display: none;
    align-items: center;
    justify-content: center;
    margin: 0;
}
.chart[data-chart-state="empty"]:not([aria-busy="true"], [data-chart-error]) .chart-empty:not(.chart-empty--error),
.chart[data-chart-error]:not([aria-busy="true"]) .chart-empty--error { display: flex; }
.chart:is([aria-busy="true"], [data-chart-error]) .chart-plot { visibility: hidden; }
.chart-total {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    pointer-events: none;
    text-align: center;
}
.chart-total-value {
    font-size: var(--text-9);
    font-weight: 650;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--fg);
}
.chart-total-label { font-size: var(--text-2); color: var(--muted); }
.chart--sm .chart-total-value { font-size: var(--text-6); }
.chart-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-6);
    font-size: var(--text-3);
    color: var(--fg-soft);
}
.chart-legend + .chart,
.chart + .chart-legend { margin-block-start: var(--space-5); }
.chart-key {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font: inherit;
    color: inherit;
}
button.chart-key {
    padding: var(--space-1) var(--space-2);
    margin: calc(-1 * var(--space-1)) calc(-1 * var(--space-2));
    background: transparent;
    border: 0;
    border-radius: var(--radius-control);
    cursor: pointer;
}
button.chart-key:hover { background: var(--bg-hover); }
button.chart-key:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring); }
button.chart-key[aria-pressed="false"] { color: var(--muted); text-decoration: line-through; }
button.chart-key[aria-pressed="false"] .chart-swatch { opacity: 0.35; }
.chart-swatch {
    display: inline-block;
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    background: currentColor;
    border-radius: 50%;
}
.chart-swatch--square { border-radius: 1px; }
.chart-swatch--diamond { border-radius: 1px; transform: rotate(45deg) scale(0.86); }
.chart-swatch--triangle { border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.chart-swatch--triangle-down { border-radius: 0; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.chart-swatch--cross {
    border-radius: 0;
    clip-path: polygon(30% 0, 70% 0, 70% 30%, 100% 30%, 100% 70%, 70% 70%, 70% 100%, 30% 100%, 30% 70%, 0 70%, 0 30%, 30% 30%);
}
.chart-swatch--block { border-radius: 2px; }
.chart-swatch--line {
    width: 16px;
    height: 2px;
    border-radius: 1px;
}
@media (scripting: none) {
    .chart {
        display: block;
        height: auto;
        overflow: visible;
    }
    .chart-plot,
    .chart-wait,
    .chart-total { display: none; }
    .chart-data {
        position: static;
        width: auto;
        height: auto;
        table-layout: auto;
        margin: 0;
        overflow: visible;
        clip-path: none;
        white-space: normal;
    }
}
@media print {
    .chart-tip { display: none; }
}
}
@layer sedna.paint {
.bar-list {
    --bar-list-label: 9rem;
    display: grid;
    grid-template-columns: minmax(0, var(--bar-list-label)) 1fr auto;
    gap: var(--space-4) var(--space-5);
}
.bar-list-row {
    display: grid;
    grid-column: span 3;
    grid-template-columns: subgrid;
    align-items: center;
}
.bar-list-label {
    font-size: var(--text-3);
    color: var(--fg-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bar-list-track {
    display: block;
    height: 10px;
    background: var(--progress-track);
    border-radius: var(--radius-pill);
    overflow: hidden;
}
.bar-list-fill {
    --value: 0%;
    display: block;
    height: 100%;
    width: var(--value);
    background: currentColor;
    color: var(--viz-1);
    border-radius: inherit;
    transition: width var(--motion-slow) ease;
}
.bar-list-value {
    font-size: var(--text-3);
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    min-width: 3ch;
    text-align: end;
}
.bar-list-fill:has(> .stack-bar-segment) {
    display: flex;
    gap: var(--space-1);
    background: none;
    overflow: hidden;
}
.bar-list-row[aria-current="true"] .bar-list-label,
.bar-list-row[aria-current="true"] .bar-list-value { color: var(--fg); font-weight: 600; }
.stack-bar {
    display: flex;
    gap: var(--space-1);
    height: 10px;
    background: var(--progress-track);
    border-radius: var(--radius-pill);
    overflow: hidden;
}
.stack-bar--sm { height: 6px; }
.stack-bar--lg { height: 18px; }
.stack-bar-segment {
    --value: 0%;
    flex: 0 0 var(--value);
    min-width: 2px;
    background: currentColor;
    color: var(--viz-1);
    transition: flex-basis var(--motion-slow) ease;
}
.stack-bar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-7);
    margin-top: var(--space-4);
    font-size: var(--text-3);
    color: var(--muted);
}
.stack-bar-key {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-variant-numeric: tabular-nums;
}
.stack-bar-swatch {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    border-radius: var(--radius-inner);
    background: currentColor;
    color: var(--viz-1);
}
.meter {
    position: relative;
    height: 10px;
    background: var(--progress-track);
    border-radius: var(--radius-pill);
}
.meter--sm { height: 6px; }
.meter--lg { height: 18px; }
.meter--labelled { margin-bottom: calc(var(--text-2) + var(--space-5)); }
.meter--labelled:has(.meter-mark--above) { margin-top: calc(var(--text-2) + var(--space-5)); }
.meter-fill {
    --value: 0%;
    display: block;
    height: 100%;
    width: var(--value);
    background: currentColor;
    color: var(--viz-1);
    border-radius: inherit;
    transition: width var(--motion-slow) ease;
}
.meter-mark {
    --at: 0%;
    position: absolute;
    top: -3px;
    bottom: -3px;
    inset-inline-start: var(--at);
    width: 2px;
    margin-inline-start: -1px;
    border-radius: 1px;
    background: var(--fg-soft);
}
.meter-mark-label {
    position: absolute;
    top: 100%;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    margin-top: var(--space-2);
    font-size: var(--text-2);
    color: var(--muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.meter-mark--above .meter-mark-label {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: var(--space-2);
}
.meter-scale {
    display: flex;
    justify-content: space-between;
    margin-top: var(--space-2);
    font-size: var(--text-2);
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.sparkline {
    display: block;
    width: 100%;
    height: 32px;
    color: var(--viz-1);
    overflow: visible;
}
.sparkline--sm { height: 20px; }
.sparkline--lg { height: 56px; }
.sparkline-line {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}
.sparkline-area { fill: currentColor; opacity: 0.12; stroke: none; }
.sparkline-ref {
    stroke: currentColor;
    stroke-width: 1;
    stroke-dasharray: 3 3;
    opacity: 0.5;
    vector-effect: non-scaling-stroke;
}
.table td > .sparkline { width: 96px; height: 24px; }
.bar-list-track:has(> .bar-previous),
.meter:has(> .bar-previous),
.progress:has(> .bar-previous) {
    position: relative;
    isolation: isolate;
    overflow: visible;
}
.bar-previous {
    --value: 0%;
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--value);
    border-radius: inherit;
    color: var(--viz-previous);
    background: repeating-linear-gradient(-45deg, currentColor 0 2px, transparent 2px 5px);
    transition: width var(--motion-slow) ease;
}
.bar-previous::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: -3px;
    bottom: -3px;
    inset-inline-end: -1px;
    width: 2px;
    border-radius: 1px;
    background: currentColor;
}
.bar-previous ~ :is(.bar-list-fill, .meter-fill, .progress-bar) { position: relative; }
.bar-list-value:has(> .bar-list-previous, > .stat-delta) { color: var(--fg-soft); }
.bar-list-previous {
    margin-inline-start: var(--space-2);
    font-size: var(--text-2);
    color: var(--muted);
}
.bar-list-value > .stat-delta { margin-inline-start: var(--space-3); }
.stack-bar-swatch--previous {
    color: var(--viz-previous);
    background: repeating-linear-gradient(-45deg, currentColor 0 2px, transparent 2px 4px);
    border-inline-end: 2px solid currentColor;
}
.stack-bar-figure {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}
.stack-bar-figure:has(.meter-mark-label) { margin-top: calc(var(--text-2) + var(--space-5)); }
.stack-bar-figure > .stack-bar,
.stack-bar-figure > .meter-mark { grid-area: 1 / 1 / 2 / 2; }
.stack-bar-figure .meter-mark-label {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: var(--space-2);
}
.meter-mark[data-tip]::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline: calc(var(--space-3) * -1);
}
.stack-bar-labels {
    grid-row: 2;
    display: grid;
    margin-top: var(--space-2);
    font-size: var(--text-2);
    line-height: round(1.4em, 2px);
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.stack-bar-label,
.stack-bar-total {
    grid-area: 1 / 1;
    white-space: nowrap;
}
.stack-bar-label {
    --at: 0%;
    justify-self: start;
    margin-inline-start: var(--at);
    translate: -50% 0;
}
.stack-bar-total {
    justify-self: end;
    color: var(--fg-soft);
    font-weight: 600;
}
.tracker {
    --tracker-height: 28px;
    display: flex;
    gap: var(--space-1);
    block-size: var(--tracker-height);
}
.tracker--sm { --tracker-height: 16px; }
.tracker--lg { --tracker-height: 40px; }
.tracker-block {
    flex: 1 1 0;
    min-inline-size: 2px;
    border-radius: var(--radius-small);
    background: currentColor;
    color: var(--viz-1);
    print-color-adjust: exact;
    transition: opacity var(--motion-fast);
}
.tracker:has(> .tracker-block:hover) > .tracker-block:not(:hover) { opacity: 0.35; }
@property --gauge-fill {
    syntax: '<percentage>';
    inherits: true;
    initial-value: 0%;
}
.gauge {
    --value: 0%;
    --gauge-size: 120px;
    --gauge-width: 12px;
    --gauge-sweep: 0.5;
    --gauge-text: var(--text-8);
    --gauge-label-text: var(--text-2);
    --gauge-fill: var(--value);
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
    inline-size: var(--gauge-size);
    block-size: calc(var(--gauge-size) / 2);
    overflow: clip;
    color: var(--viz-1);
    transition: --gauge-fill var(--motion-slow) ease;
}
.gauge::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: 0;
    block-size: var(--gauge-size);
    border-radius: 50%;
    background: conic-gradient(from calc(var(--gauge-sweep) * -180deg),
        currentColor calc(var(--gauge-fill) * var(--gauge-sweep)),
        var(--progress-track) 0 calc(var(--gauge-sweep) * 100%),
        transparent 0);
    mask: radial-gradient(farthest-side, transparent calc(100% - var(--gauge-width)), currentColor calc(100% - var(--gauge-width) + 0.5px));
    print-color-adjust: exact;
}
.gauge--arc {
    --gauge-sweep: 0.75;
    justify-content: center;
    block-size: var(--gauge-size);
}
.gauge--sm { --gauge-size: 80px; --gauge-width: 6px; --gauge-text: var(--text-4); --gauge-label-text: var(--text-1); }
.gauge--lg { --gauge-size: 180px; --gauge-width: 16px; --gauge-text: var(--text-10); }
.gauge-value {
    position: relative;
    font-size: var(--gauge-text);
    font-weight: 600;
    line-height: round(1.2em, 2px);
    color: var(--fg);
    font-variant-numeric: tabular-nums;
}
.gauge-label {
    position: relative;
    margin-top: var(--space-1);
    font-size: var(--gauge-label-text);
    line-height: round(1.2em, 2px);
    color: var(--muted);
}
.series-1 { color: var(--viz-1); }
.series-2 { color: var(--viz-2); }
.series-3 { color: var(--viz-3); }
.series-4 { color: var(--viz-4); }
.series-5 { color: var(--viz-5); }
.series-6 { color: var(--viz-6); }
.series-go     { color: var(--go-solid); }
.series-warn   { color: var(--warn-solid); }
.series-danger { color: var(--danger-solid); }
.series-info   { color: var(--info-solid); }
.series-muted  { color: var(--muted); }
}
@layer sedna.paint {
.graph {
    container: sedna-graph / inline-size;
    position: relative;
    display: grid;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    height: var(--graph-height, 26rem);
    overflow: hidden;
    border-radius: inherit;
    user-select: none;
    -webkit-user-select: none;
}
.graph--sm { --graph-height: 18rem; }
.graph--lg { --graph-height: 38rem; }
.graph--fill { height: 100%; min-height: 12rem; }
.graph--viewport { --graph-height: clamp(24rem, calc(100dvh - 18rem), 72rem); }
.graph:focus { outline: none; }
.graph:focus-visible:not([data-graph-pointer])::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    box-shadow: inset 0 0 0 2px var(--focus-ring);
    pointer-events: none;
}
.graph-canvas {
    position: relative;
    grid-area: 1 / 1 / -1 / -1;
    min-width: 0;
    min-height: 0;
    z-index: 0;
}
.graph[data-graph-drawing] .graph-canvas { cursor: crosshair; }
.graph-data {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.graph-tools {
    position: absolute;
    inset-block-start: var(--space-4);
    inset-inline-end: var(--space-4);
    z-index: 2;
    display: flex;
    gap: var(--space-1);
    padding: var(--space-1);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-surface);
    box-shadow: var(--shadow-float);
}
.graph-tools--start { inset-inline-end: auto; inset-inline-start: var(--space-4); }
.graph-tools--bottom { inset-block-start: auto; inset-block-end: var(--space-4); }
.graph-tools--stack { flex-direction: column; }
.graph-tools-sep {
    align-self: stretch;
    width: 1px;
    margin: var(--space-1) var(--space-1);
    background: var(--border);
}
.graph-tools--stack .graph-tools-sep { width: auto; height: 1px; }
.graph-tools > .form-range {
    inline-size: 7rem;
    align-self: center;
    margin-inline: var(--space-2);
}
.graph-tools--stack > .form-range {
    writing-mode: vertical-lr;
    direction: rtl;
}
.graph-tools .btn[aria-pressed="true"] {
    background: var(--brand-tint);
    color: var(--brand-text);
}
.btn[aria-pressed="true"] > .graph-when-off,
.btn:not([aria-pressed="true"]) > .graph-when-on { display: none; }
.graph-minimap {
    position: absolute;
    inset-block-end: var(--space-4);
    inset-inline-end: var(--space-4);
    z-index: 2;
    width: 11rem;
    height: 7.5rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    box-shadow: var(--shadow-float);
    cursor: grab;
}
.graph-minimap:active { cursor: grabbing; }
.graph-minimap--start { inset-inline-end: auto; inset-inline-start: var(--space-4); }
.graph-minimap--top { inset-block-end: auto; inset-block-start: var(--space-4); }
.graph--sm .graph-minimap { width: 8rem; height: 5.5rem; }
@container sedna-graph (width < 560px) {
    .graph-minimap { display: none; }
}
.graph-tip {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    max-width: 18rem;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-3);
    line-height: 1.4;
    color: var(--tip-fg);
    background: var(--tip-bg);
    border: 1px solid var(--tip-border);
    border-radius: var(--radius-control);
    box-shadow: var(--shadow-tip);
    pointer-events: none;
}
.graph-tip-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.graph-tip-title { font-weight: 600; }
.graph-tip-meta { color: var(--muted); }
.graph-tip-ref {
    font-family: var(--font-mono);
    font-size: var(--text-2);
    color: var(--muted);
}
.graph-menu {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: 3;
    min-width: 12rem;
}
.graph-edge-tool {
    position: absolute;
    left: 0;
    inset-block-start: 0;
    z-index: 1;
    display: flex;
    gap: var(--space-1);
    padding: 1px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-float);
    translate: -50% -50%;
}
.graph-edge-tool > .btn { border-radius: var(--radius-pill); }
.graph-wait,
.graph-empty {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.graph-wait { height: auto; }
.graph[data-graph-state]:not([data-graph-state="loading"]) .graph-wait { display: none; }
.graph-empty {
    display: none;
    align-items: center;
    justify-content: center;
    margin: 0;
}
.graph[data-graph-state="empty"] .graph-empty:not(.graph-empty--filtered, .graph-empty--error),
.graph[data-graph-state="filtered"] .graph-empty--filtered,
.graph[data-graph-state="error"] .graph-empty--error { display: flex; }
.graph-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-6);
    font-size: var(--text-3);
    color: var(--fg-soft);
}
.graph-key {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
}
.graph-swatch {
    display: inline-block;
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    background: currentColor;
    border-radius: 50%;
}
.graph-swatch--square { border-radius: 1px; }
.graph-swatch--rounded { border-radius: 3px; }
.graph-swatch--diamond { border-radius: 1px; transform: rotate(45deg) scale(0.86); }
.graph-swatch--triangle { border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.graph-swatch--hexagon { border-radius: 0; clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); }
.graph-swatch--star {
    border-radius: 0;
    clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.graph-swatch--tag { border-radius: 0; clip-path: polygon(0 0, 62% 0, 100% 50%, 62% 100%, 0 100%); }
.graph-swatch--muted { opacity: 0.45; }
.graph-swatch--group {
    width: 14px;
    height: 10px;
    background: transparent;
    border: 1.5px dashed currentColor;
    border-radius: 3px;
}
.graph-line {
    position: relative;
    flex-shrink: 0;
    width: 18px;
    height: 0;
    border-block-start: 2px solid currentColor;
}
.graph-line--dashed { border-block-start-style: dashed; }
.graph-line--dotted { border-block-start-style: dotted; }
.graph-line--light { border-block-start-width: 1px; opacity: 0.7; }
.graph-line--heavy { border-block-start-width: 3px; }
.graph-line--arrow::after {
    content: "";
    position: absolute;
    inset-inline-end: -2px;
    inset-block-start: -5px;
    border-block: 4px solid transparent;
    border-inline-start: 6px solid currentColor;
}
.graph-line--flow {
    color: var(--agent-to);
    border-block-start-color: transparent;
}
.graph-line--flow::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: -2px;
    border-block-start: 2px solid currentColor;
    mask: repeating-linear-gradient(to right, currentColor 0 6px, transparent 6px 10px) 0 0 / 10px 100%;
    animation: sedna-graph-flow var(--progress-duration) linear infinite;
}
.graph-line--flow:dir(rtl)::before { animation-direction: reverse; }
@keyframes sedna-graph-flow { to { mask-position: 10px 0; } }
.graph-frame {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    min-width: 0;
}
.graph-frame:fullscreen,
.graph:fullscreen { background: var(--bg); }
.graph-frame:fullscreen {
    padding: var(--space-7);
    overflow: auto;
}
.graph-frame:fullscreen :has(.graph):not(.sedna-split, .sedna-split > *) {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
.graph-frame:fullscreen .sedna-split > :has(.graph) {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.graph-frame:fullscreen .sedna-split:has(.graph) > * { contain: size; }
.graph-frame:fullscreen .sedna-split:has(.graph) {
    flex: 1 1 auto;
    min-height: 0;
}
.graph-frame:fullscreen .graph {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
}
.graph-frame:fullscreen .graph-detail { max-height: none; }
.graph:fullscreen {
    height: 100dvh;
    border-radius: 0;
}
.graph-detail { max-height: var(--graph-height, 26rem); }
.graph-direction {
    display: inline-flex;
    color: var(--muted);
}
.graph-direction > * { display: none; }
[data-graph-direction="out"] .graph-direction-out,
[data-graph-direction="in"] .graph-direction-in,
[data-graph-direction="both"] .graph-direction-both { display: inline; }
@media (scripting: none) {
    .graph {
        display: block;
        height: auto;
        overflow: visible;
    }
    .graph-canvas,
    .graph-wait,
    .graph-tools,
    .graph-minimap { display: none; }
    .graph-data {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        padding: var(--space-5) var(--space-5) var(--space-5) var(--space-8);
        overflow: visible;
        clip-path: none;
        white-space: normal;
        color: var(--fg-soft);
    }
    .graph-data :empty { display: none; }
}
@media print {
    .graph-tools,
    .graph-minimap,
    .graph-tip,
    .graph-menu,
    .graph-edge-tool { display: none; }
}
}
@layer sedna.paint {
.heatmap {
    --heatmap-rows: 7;
    --heatmap-cell: 12px;
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(var(--heatmap-rows), var(--heatmap-cell));
    grid-auto-columns: var(--heatmap-cell);
    gap: var(--space-1);
    inline-size: max-content;
}
.heatmap--sm { --heatmap-cell: 9px; }
.heatmap--lg { --heatmap-cell: 16px; }
.heatmap-cell {
    inline-size: var(--heatmap-cell, 12px);
    block-size: var(--heatmap-cell, 12px);
    border-radius: var(--radius-small);
    background: var(--heat-0);
    print-color-adjust: exact;
}
.heatmap-cell--1 { background: var(--heat-1); }
.heatmap-cell--2 { background: var(--heat-2); }
.heatmap-cell--3 { background: var(--heat-3); }
.heatmap-cell--4 { background: var(--heat-4); }
.heatmap-cell[data-tip]:hover { outline: 1px solid var(--fg-soft); }
.heatmap-legend {
    --heatmap-cell: 12px;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-4);
    font-size: var(--text-2);
    color: var(--muted);
}
.heatmap-legend > :not(.heatmap-cell) { margin-inline: var(--space-2); }
.heatmap-legend > :not(.heatmap-cell):first-child { margin-inline-start: 0; }
.heatmap-legend > :not(.heatmap-cell):last-child { margin-inline-end: 0; }
}
@layer sedna.paint {
.stat { display: flex; flex-direction: column; gap: var(--space-1); }
.stat-label {
    font-size: var(--text-2);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}
.stat-value {
    font-size: var(--text-9);
    font-weight: 600;
    line-height: round(1.2em, 2px);
    color: var(--fg);
    font-variant-numeric: tabular-nums;
}
.stat--sm .stat-value { font-size: var(--text-6); }
.stat--lg .stat-value { font-size: var(--text-10); }
.stat > .skeleton-title { font-size: var(--text-9); --skeleton-height: round(1.2em, 2px); }
.stat--sm > .skeleton-title { font-size: var(--text-6); }
.stat--lg > .skeleton-title { font-size: var(--text-10); }
.stat-unit { font-size: var(--text-4); font-weight: 500; color: var(--muted); }
.stat-note { font-size: var(--text-3); color: var(--muted); }
.stat-delta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-3);
    font-weight: 500;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.stat-delta i { font-size: var(--text-5); }
.stat-delta--good { color: var(--go-fg); }
.stat-delta--bad  { color: var(--danger-fg); }
.stat-delta--warn { color: var(--warn-fg); }
.stat-target { font-size: var(--text-3); color: var(--muted); font-variant-numeric: tabular-nums; }
.stat > :is(.progress, .meter, .stack-bar, .tracker, .sparkline) { margin-top: var(--space-2); }
.stat > :is(.stat-label, .stat-value, .stat-note, .stat-target) { text-box: trim-both cap alphabetic; padding-block: var(--cap-gap); }
.stat > :is(.stat-label, .stat-value, .stat-note, .stat-target, .stat-delta):first-child { margin-block-start: calc(var(--cap-gap) * -1); }
.stat > :is(.stat-label, .stat-value, .stat-note, .stat-target, .stat-delta):last-child  { margin-block-end:   calc(var(--cap-gap) * -1); }
a.stat {
    padding: var(--space-4);
    margin: calc(var(--space-4) * -1);
    border-radius: var(--radius-surface);
    color: inherit;
    text-decoration: none;
    transition: background var(--motion-fast);
}
a.stat:hover { background: var(--bg-hover); text-decoration: none; }
a.stat:hover .stat-value { color: var(--brand-text); }
a.stat:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring); }
@property --stat-roll {
    syntax: '<integer>';
    inherits: true;
    initial-value: 0;
}
@property --stat-rolling {
    syntax: '<integer>';
    inherits: true;
    initial-value: 0;
}
.stat-value--roll {
    --roll-to: 0;
    position: relative;
    animation: sedna-stat-roll var(--roll-duration) cubic-bezier(0.2, 0.7, 0.2, 1);
}
.stat-value--roll > * { -webkit-text-fill-color: currentColor; }
.stat-value--roll::after {
    content: counter(stat-roll) / "";
    counter-reset: stat-roll calc(var(--stat-roll));
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    opacity: var(--stat-rolling);
    -webkit-text-fill-color: currentColor;
    pointer-events: none;
}
@keyframes sedna-stat-roll {
    from { --stat-roll: 0; --stat-rolling: 1; -webkit-text-fill-color: transparent; }
    to   { --stat-roll: var(--roll-to); --stat-rolling: 1; -webkit-text-fill-color: transparent; }
}
.stat--unavailable .stat-value { color: var(--muted); font-weight: 500; }
.stat--unavailable .stat-delta,
.stat--unavailable .stat-target { visibility: hidden; }
.stat:is(.stat--brand, .stat--go, .stat--warn, .stat--danger, .stat--info, .stat--secret) {
    padding: calc(var(--space-3) - 1px);
    margin: calc(var(--space-3) * -1);
    border: 1px solid transparent;
    border-radius: var(--radius-surface);
}
.card-body > .stat-row > .stat:is(.stat--brand, .stat--go, .stat--warn, .stat--danger, .stat--info, .stat--secret) {
    margin-block: calc(var(--space-1) * -1);
    padding-block: calc(var(--space-2) + var(--space-1) - 1px);
}
.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
    gap: var(--space-7);
    clip-path: inset(calc(var(--space-6) * -1));
}
.stat-row--divided,
.card-body > .stat-row {
    grid-template-columns: repeat(auto-fit, minmax(min(calc(150px - 2 * var(--space-7)), 100%), 1fr));
    column-gap: calc(2 * var(--space-7));
    row-gap: var(--space-7);
}
.stat-row--divided > .stat,
.card-body > .stat-row > .stat { position: relative; }
.card-body > .stat-row > .stat { padding-block: var(--space-2); }
.card-body > .stat-row > a.stat { margin-block: calc(var(--space-2) * -1); padding-block: var(--space-4); }
.stat-row--divided > .stat::before,
.card-body > .stat-row > .stat::before {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-start: calc(-1 * var(--space-7));
    border-inline-start: 1px solid var(--divider);
}
.stat-row--divided > a.stat::before,
.card-body > .stat-row > a.stat::before {
    inset-block: var(--space-4);
    inset-inline-start: calc(var(--space-4) - var(--space-7));
}
.card-body > .stat-row > a.stat::before { inset-block: var(--space-2); }
.stat-row--divided > .stat:is(.stat--brand, .stat--go, .stat--warn, .stat--danger, .stat--info, .stat--secret)::before,
.card-body > .stat-row > .stat:is(.stat--brand, .stat--go, .stat--warn, .stat--danger, .stat--info, .stat--secret)::before {
    inset-block: calc(var(--space-3) - 1px);
    inset-inline-start: calc(var(--space-3) - 1px - var(--space-7));
}
.card-body > .stat-row > .stat:is(.stat--brand, .stat--go, .stat--warn, .stat--danger, .stat--info, .stat--secret)::before {
    inset-block: calc(var(--space-1) - 1px);
}
}
@layer sedna.paint {
.page-head:has(> .page-head-actions--fold) { container: sedna-page-head / inline-size; }
.toolbar:has(> .toolbar-actions--fold) { container: sedna-toolbar / inline-size; }
:is(.page-head-actions--fold, .toolbar-actions--fold) > .actions-more { display: none; }
@container sedna-page-head (width < 40rem) {
    .page-head-actions--fold > :not(.actions-more, .actions-keep) { display: none; }
    .page-head-actions--fold > .actions-more { display: inline-flex; }
}
@container sedna-toolbar (width < 40rem) {
    .toolbar-actions--fold > :not(.actions-more, .actions-keep) { display: none; }
    .toolbar-actions--fold > .actions-more { display: inline-flex; }
}
}
@layer sedna.paint {
.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-6);
    margin-bottom: var(--space-7);
}
.page-head-text { flex: 1 1 20rem; min-width: 0; }
.page-head :is(h1, h2, h3) { margin: 0; }
.page-head-text > p { margin: var(--space-2) 0 0; color: var(--muted); font-size: var(--text-4); }
.page-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.page-head--collapse {
    --page-head-lede: round(calc(var(--text-4) * 1.4), 2px);
    --page-head-fold: calc(var(--space-2) + var(--page-head-lede));
    --page-head-range: calc(var(--space-11) * 2);
}
.page .page-head--collapse:not(:is(.sedna-scroll, .modal-body, .drawer-body) *) { inset-block-start: calc(-1 * var(--page-pad)); }
@media (max-width: 560px) {
    .layout--flow > .content > .page .page-head--collapse:not(:is(.sedna-scroll, .modal-body, .drawer-body) *) { inset-block-start: var(--safe-block-start); }
    .layout--flow:has(> .content > .topbar) > .content > .page .page-head--collapse:not(:is(.sedna-scroll, .modal-body, .drawer-body) *) {
        inset-block-start: calc(var(--safe-block-start) + var(--topbar-height));
    }
}
@supports (animation-timeline: scroll()) {
    .page-head--collapse {
        position: sticky;
        inset-block-start: 0;
        z-index: 60;
        background: var(--surface-here, var(--bg));
        animation: sedna-page-head-fold linear both, sedna-page-head-edge linear both;
        animation-composition: add, replace;
        animation-timeline: scroll();
        animation-range: 0 var(--page-head-range);
    }
    .page-head--collapse .page-head-text > :is(h1, h2, h3) {
        min-block-size: var(--control-height);
        align-content: center;
    }
    .page-head--collapse .page-head-text > p {
        overflow: hidden;
        line-height: var(--page-head-lede);
        text-overflow: ellipsis;
        white-space: nowrap;
        animation: sedna-page-head-fold-lede linear both, sedna-page-head-fade linear both;
        animation-composition: add, replace;
        animation-timeline: scroll();
        animation-range: 0 var(--page-head-range);
    }
}
@keyframes sedna-page-head-fold {
    to {
        margin-block-end: calc(var(--page-head-fold) - 2 * var(--space-4));
        padding-block: var(--space-4);
    }
}
@keyframes sedna-page-head-edge {
    to { box-shadow: 0 1px 0 var(--border); }
}
@keyframes sedna-page-head-fold-lede {
    to { margin-block-start: calc(-1 * var(--page-head-fold)); }
}
@keyframes sedna-page-head-fade {
    to { opacity: 0; visibility: hidden; }
}
.confirmation-panel {
    margin: 0 0 var(--space-9);
    padding: var(--space-10) var(--space-8);
    background: var(--go-solid);
    border: 1px solid var(--go-solid);
    border-radius: var(--radius-surface);
    color: var(--on-solid);
    text-align: center;
    overflow-wrap: anywhere;
    print-color-adjust: exact;
}
.confirmation-panel-title { margin: 0; color: inherit; font-size: var(--text-10); }
.confirmation-panel > p:not(.confirmation-panel-ref) { margin: var(--space-6) 0 0; font-size: var(--text-7); }
.confirmation-panel-ref {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    margin: var(--space-2) 0 0;
    font-family: var(--font-mono);
    font-size: var(--text-9);
    font-weight: 700;
}
.divider { border: none; border-top: 1px solid var(--border); margin: var(--space-8) 0; }
.divider-labelled {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    margin: var(--space-8) 0;
    color: var(--muted);
    font-size: var(--text-2);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.divider-labelled::before,
.divider-labelled::after {
    content: '';
    flex: 1;
    border-top: 1px solid var(--border);
}
.divider-labelled--start::before { flex: 0 0 0; }
.divider-labelled > .btn { text-transform: none; letter-spacing: normal; }
.callout {
    display: flex;
    gap: var(--space-5);
    padding: var(--space-6) var(--space-7);
    margin: var(--space-7) 0;
    background: var(--surface-soft);
    border-inline-start: 3px solid var(--border-strong);
    border-radius: var(--radius-inner);
    color: var(--fg-soft);
    font-size: var(--text-4);
    --row-line: 1lh;
}
.callout > i {
    font-size: var(--text-8);
    flex-shrink: 0;
    color: var(--muted);
    margin-block-start: calc((var(--row-line) - 1em) / 2);
}
.callout-body { min-width: 0; text-box: trim-both cap alphabetic; padding-block: var(--cap-gap); }
.callout-body > :first-child { margin-top: 0; }
.callout-body > :last-child { margin-bottom: 0; }
.callout-title { display: block; font-weight: 600; color: var(--fg); margin-bottom: var(--space-1); }
.callout:not(:has(.callout-title)) { align-items: center; }
.callout:not(:has(.callout-title)) > i { margin-block-start: 0; }
.callout-title:only-child { margin-bottom: 0; }
}
@layer sedna.paint {
.code-block {
    position: relative;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-surface);
    overflow: hidden;
}
.code-block--flush { border: none; border-radius: 0; }
.code-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-6);
    background: var(--surface-soft);
    border-bottom: 1px solid var(--border);
    color: var(--muted);
    font-size: var(--text-2);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.code-block pre {
    margin: 0;
    padding: var(--space-6) var(--space-7);
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: var(--text-3);
    line-height: 1.55;
    color: var(--fg-soft);
    tab-size: 4;
}
.code-block pre code {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    font-size: inherit;
}
.code-block-copy {
    position: absolute;
    top: 8px;
    inset-inline-end: var(--space-4);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-inner);
    color: var(--muted);
    font-family: inherit;
    font-size: var(--text-2);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--motion-fast), color var(--motion-fast), background var(--motion-fast);
}
.code-block:hover .code-block-copy,
.code-block-copy:focus-visible { opacity: 1; }
.code-block-copy:hover { background: var(--bg-hover); color: var(--fg); }
.code-block-copy:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring); }
@media (hover: none) {
    .code-block-copy { opacity: 1; }
}
.code-block-head .code-block-copy { position: static; opacity: 1; }
.code-block--clamped pre {
    max-height: var(--code-clamp);
    overflow-y: auto;
}
.code-block--clamped .code-block-lip {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 68px;
    margin-top: -68px;
    padding-bottom: var(--space-4);
    background: linear-gradient(transparent, var(--bg) 70%);
    pointer-events: none;
}
.code-block-lip {
    display: flex;
    justify-content: center;
    padding: var(--space-3) 0 var(--space-4);
}
.code-block-expand {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--control-height-sm);
    padding: var(--space-2) var(--space-6);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--fg-soft);
    font-family: inherit;
    font-size: var(--text-2);
    cursor: pointer;
    transition: background var(--motion-fast), color var(--motion-fast);
}
.code-block-expand:hover { background: var(--bg-hover); color: var(--fg); }
.code-block-expand:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring); }
.code-block-expand i { font-size: var(--text-4); }
}
@layer sedna.paint {
.diff {
    --diff-num: 5ch;
    --diff-min: 280px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-surface);
    overflow: hidden;
}
.diff--flush { border: none; border-radius: 0; }
.diff-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
    background: var(--surface-soft);
    border-block-end: 1px solid var(--border);
    font-size: var(--text-3);
}
.diff-file {
    flex: 1 1 auto;
    min-inline-size: 0;
    overflow-wrap: anywhere;
    color: var(--fg);
    font-family: var(--font-mono);
    font-weight: 600;
    text-box: trim-both cap alphabetic;
    padding-block: var(--cap-gap);
}
.diff-body {
    overflow-x: auto;
    direction: ltr;
}
.diff-table {
    inline-size: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--font-mono);
    font-size: var(--text-3);
    line-height: round(1.6em, 2px);
    color: var(--fg-soft);
    tab-size: 4;
}
.diff-table td { vertical-align: top; }
.diff-num {
    inline-size: calc(var(--diff-num) + 2 * var(--space-4));
    padding-block: 0;
    padding-inline: var(--space-4);
    color: var(--muted);
    text-align: end;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    user-select: none;
}
.diff-num + .diff-code { border-inline-start: 1px solid var(--divider); }
.diff-code {
    position: relative;
    padding-block: 0;
    padding-inline: calc(var(--space-4) + 2ch) var(--space-7);
    white-space: pre;
    text-align: start;
}
.diff-code::before {
    position: absolute;
    inset-inline-start: var(--space-4);
    user-select: none;
}
:is(tr.diff-add > td, td.diff-add) { background: var(--go-bg); }
:is(tr.diff-del > td, td.diff-del) { background: var(--danger-bg); }
:is(tr.diff-add > td, td.diff-add).diff-num { color: var(--go-fg); }
:is(tr.diff-del > td, td.diff-del).diff-num { color: var(--danger-fg); }
:is(tr.diff-add > .diff-code, .diff-code.diff-add)::before { content: "+"; color: var(--go-fg); }
:is(tr.diff-del > .diff-code, .diff-code.diff-del)::before { content: "\2212"; color: var(--danger-fg); }
td.diff-gap { background: var(--surface-soft); }
.diff-code :is(ins, del) {
    padding-inline: 0;
    border-radius: var(--radius-small);
    color: inherit;
    text-decoration-line: none;
}
.diff-code ins { background: var(--go-bg-active); }
.diff-code del { background: var(--danger-bg-active); }
.diff-fold > td {
    padding: var(--space-2) var(--space-6);
    background: var(--surface-soft);
    border-block: 1px solid var(--divider);
    color: var(--muted);
    font-family: var(--font-sans);
    font-size: var(--text-3);
}
.diff-table tr:first-child.diff-fold > td { border-block-start: none; }
.diff-table tr:last-child.diff-fold > td { border-block-end: none; }
.diff--wrap .diff-code,
.diff--split .diff-code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.diff--split .diff-table { min-inline-size: calc(2 * (var(--diff-min) + var(--diff-num))); }
.diff--split .diff-code { inline-size: 50%; }
.diff--split .diff-code + .diff-num { border-inline-start: 1px solid var(--border); }
}
@layer sedna.paint {
.page-head--hero {
    --hero-height: 22rem;
    --hero-measure: 40rem;
    --hero-pad-inline: var(--space-8);
    --hero-scrim-angle: 90deg;
    position: relative;
    isolation: isolate;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-end;
    gap: var(--space-6);
    box-sizing: border-box;
    min-block-size: var(--hero-height);
    max-inline-size: var(--page-max);
    margin-inline: auto;
    padding: var(--space-10) var(--hero-pad-inline);
    overflow: hidden;
    border-radius: var(--radius-surface);
    background: var(--media-bg);
}
.page-head-image {
    position: absolute;
    inset: 0;
    z-index: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}
.page-head--hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        var(--hero-scrim-angle),
        var(--hero-scrim-strong) calc(var(--hero-measure) + 2 * var(--hero-pad-inline)),
        var(--hero-scrim-soft));
}
.page-head--hero > :is(.page-head-text, .page-head-actions) { position: relative; z-index: 2; }
.page-head--hero .page-head-text {
    flex: 0 1 auto;
    inline-size: 100%;
    max-inline-size: var(--hero-measure);
    background: var(--surface-soft);
}
.page-head--hero .page-head-text > p {
    margin: var(--space-4) 0 0;
    color: var(--fg-soft);
    font-size: var(--text-7);
}
.page-head--hero :is(h1, h2, h3) {
    color: var(--fg);
    font-size: var(--text-10);
    line-height: 1.15;
    overflow-wrap: anywhere;
}
@media (min-width: 48rem) {
    .page-head--hero :is(h1, h2, h3) { font-size: var(--text-11); }
}
@media (max-width: 560px) {
    .page-head--hero { --hero-pad-inline: var(--space-6); padding-block: var(--space-8); }
}
}
@layer sedna.paint {
.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}
.page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-width: 32px;
    min-height: 32px;
    padding: 0 var(--space-4);
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius-inner);
    color: var(--fg-soft);
    font-family: inherit;
    font-size: var(--text-4);
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    cursor: pointer;
}
.page-link:hover { background: var(--bg-hover); border-color: var(--border); text-decoration: none; }
.page-link:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring); }
.page-link[aria-current="page"] {
    background: var(--brand-tint);
    border-color: var(--brand-soft);
    color: var(--brand-text);
    font-weight: 600;
}
.page-link:disabled,
.page-link[aria-disabled="true"] {
    cursor: not-allowed;
    pointer-events: none;
}
.page-gap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    color: var(--muted);
    user-select: none;
}
.page-count { margin-inline-start: auto; color: var(--muted); font-size: var(--text-3); }
:not(.page, .toolbar, .toolbar-filters, .toolbar-actions) > * + .pagination { margin-block-start: var(--space-7); }
.breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
    overflow-x: auto;
    scrollbar-width: none;
    font-size: var(--text-3);
    white-space: nowrap;
}
.breadcrumb::-webkit-scrollbar { display: none; }
.breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
    color: var(--muted);
    text-decoration: none;
}
.breadcrumb-item i { font-size: var(--text-5); }
a.breadcrumb-item:hover { color: var(--fg); text-decoration: none; }
.breadcrumb-item + .breadcrumb-item::before {
    content: '/';
    color: var(--border-strong);
}
.breadcrumb-item[aria-current="page"] { color: var(--fg); }
.page-link:not(:has(> *)) { display: inline-block; align-content: center; text-align: center; text-box: trim-both cap alphabetic; }
.breadcrumb-item:not(:has(> *)) { display: inline-block; text-box: trim-both cap alphabetic; padding-block: var(--cap-gap); }
.breadcrumb-item + .breadcrumb-item:not(:has(> *))::before { margin-inline-end: var(--space-3); }
.page-toc { font-size: var(--text-4); }
.page-toc-title {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin: 0 0 var(--space-4);
    color: var(--muted);
    font-size: var(--text-2);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.page-toc-fold > .page-toc-title {
    cursor: pointer;
    list-style: none;
    user-select: none;
    border-radius: var(--radius-inner);
}
.page-toc-fold > .page-toc-title::-webkit-details-marker { display: none; }
.page-toc-fold > .page-toc-title:hover { color: var(--fg); }
.page-toc-fold > .page-toc-title:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring); }
.page-toc-fold > .page-toc-title::after {
    content: '';
    margin-inline-start: auto;
    width: 0;
    height: 0;
    border-inline: 4px solid transparent;
    border-top: 5px solid currentColor;
    transition: transform var(--motion-fast) ease;
}
.page-toc-fold[open] > .page-toc-title::after { transform: rotate(-180deg); }
.page-toc-fold:not([open]) > .page-toc-title { margin-bottom: 0; }
.page-toc-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-inline-start: 1px solid var(--border);
}
.page-toc-list .page-toc-list { border-inline-start: none; }
.page-toc-link {
    display: block;
    margin-inline-start: -1px;
    padding: calc(var(--space-2) + var(--cap-gap)) var(--space-6);
    border-inline-start: 2px solid transparent;
    color: var(--muted);
    line-height: round(1.4em, 2px);
    text-decoration: none;
    text-box: trim-both cap alphabetic;
}
.page-toc-list .page-toc-list .page-toc-link { padding-inline-start: calc(var(--space-6) * 2); }
.page-toc-link:hover { color: var(--fg); text-decoration: none; }
.page-toc-link:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus-ring); border-radius: var(--radius-inner); }
.page-toc-link[aria-current="location"] {
    border-inline-start-color: var(--brand);
    color: var(--brand-text);
}
.page-toc-list > li:has(> .page-toc-list .page-toc-link[aria-current="location"]) > .page-toc-link { color: var(--fg); }
.back-to-top {
    --back-to-top-after: 100vh;
    position: sticky;
    inset-block-end: var(--space-8);
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 40px;
    block-size: 40px;
    margin-inline-start: auto;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--fg-soft);
    box-shadow: var(--shadow-float);
    text-decoration: none;
}
.back-to-top i { font-size: var(--text-8); }
.back-to-top:hover { background: var(--bg-hover); color: var(--fg); text-decoration: none; }
.back-to-top:focus-visible { outline: none; box-shadow: var(--shadow-float), 0 0 0 3px var(--focus-ring); }
@media (max-width: 560px) {
    .layout--flow > .content > .page .back-to-top:not(:is(.sedna-scroll, .modal-body, .drawer-body) *) {
        inset-block-end: calc(var(--space-8) + var(--safe-block-end));
    }
    .layout--flow:has(> .content > .bottombar) > .content > .page .back-to-top:not(:is(.sedna-scroll, .modal-body, .drawer-body) *) {
        inset-block-end: calc(var(--space-8) + var(--bottombar-reach));
    }
}
@supports (animation-timeline: scroll()) {
    .back-to-top {
        animation: sedna-back-to-top linear both;
        animation-timeline: scroll();
        animation-range: var(--back-to-top-after) calc(var(--back-to-top-after) + var(--space-11));
    }
}
@keyframes sedna-back-to-top {
    from { opacity: 0; visibility: hidden; }
}
}
@layer sedna.paint {
.menu {
    width: max-content;
    max-width: min(20rem, calc(100vw - 32px));
    padding: var(--space-2);
    --surface-here: var(--bg-elevated);
    --muted-here: var(--muted);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-surface);
    box-shadow: var(--shadow-dropdown);
}
.menu[data-menu-raised] {
    inset: auto;
    margin: 0;
    overflow: visible;
    color: inherit;
}
.menu-anchor {
    position: relative;
    display: inline-flex;
    align-self: start;
    anchor-name: --sedna-menu-anchor;
    anchor-scope: --sedna-menu-anchor;
}
.menu-anchor > .menu {
    position: fixed;
    position-anchor: --sedna-menu-anchor;
    position-area: block-end span-inline-start;
    justify-self: end;
    align-self: start;
    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
    position-visibility: anchors-visible;
    margin-block-start: var(--space-2);
    min-width: anchor-size(inline, 0px);
    z-index: 550;
}
.menu-anchor > .menu--start {
    position-area: block-end span-inline-end;
    justify-self: start;
}
@position-try --sedna-panel-below {
    position-area: block-end span-inline-end;
    justify-self: start;
    align-self: start;
    margin: var(--space-2) 0 0;
}
@position-try --sedna-panel-above {
    position-area: block-start span-inline-end;
    justify-self: start;
    align-self: end;
    margin: 0 0 var(--space-2);
}
@container style(--panel-placement: block-start) {
    .menu-anchor > .menu {
        position-area: block-start span-inline-start;
        align-self: end;
        margin-block: 0 var(--space-2);
    }
    .menu-anchor > .menu--start { position-area: block-start span-inline-end; }
}
@container style(--panel-placement: inline-end) {
    .menu-anchor > .menu {
        position-area: inline-end span-block-end;
        justify-self: start;
        align-self: start;
        margin-block: 0;
        margin-inline: var(--space-2) 0;
        position-try-fallbacks: flip-inline, flip-block, flip-inline flip-block,
            --sedna-panel-below, --sedna-panel-below flip-inline, --sedna-panel-above, --sedna-panel-above flip-inline;
    }
}
@container style(--panel-placement: inline-start) {
    .menu-anchor > .menu {
        position-area: inline-start span-block-end;
        justify-self: end;
        align-self: start;
        margin-block: 0;
        margin-inline: 0 var(--space-2);
        position-try-fallbacks: flip-inline, flip-block, flip-inline flip-block,
            --sedna-panel-below, --sedna-panel-below flip-inline, --sedna-panel-above, --sedna-panel-above flip-inline;
    }
}
.menu-sub-anchor { position: relative; anchor-name: --sedna-submenu; anchor-scope: --sedna-submenu; }
.menu-sub-anchor > .menu-sub {
    display: none;
    position: fixed;
    position-anchor: --sedna-submenu;
    position-area: inline-end span-block-end;
    position-try-fallbacks: flip-inline;
    margin-block-start: calc(var(--space-2) * -1);
    z-index: 550;
}
.menu-sub-anchor:is(:hover, :focus-within, [data-open]) > .menu-sub { display: block; }
.menu-sub-anchor > .menu-item[data-menu-sub] > :last-child { margin-inline-start: auto; }
.menu-point {
    position: fixed;
    inline-size: 0;
    block-size: 0;
    pointer-events: none;
    anchor-name: --sedna-menu-point;
}
.menu[popover]:not([data-menu-raised]) {
    inset: auto;
    margin: 0;
    position: fixed;
    position-anchor: --sedna-menu-point;
    position-area: block-end span-inline-end;
    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
    z-index: 550;
}
.value-trigger {
    --value-trigger-measure: 0ch;
    min-width: calc(var(--value-trigger-measure) + var(--space-4) + 8px
                    + var(--space-3) * 2 + 2px);
    width: max-content;
    max-width: calc(100% + var(--space-3) * 2);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-1) var(--space-3);
    margin-inline: calc(var(--space-3) * -1);
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius-inner);
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}
.value-trigger::after {
    content: '';
    flex-shrink: 0;
    margin-inline-start: auto;
    width: 0;
    height: 0;
    border-inline: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: 0.5;
}
.value-trigger:hover { background: var(--bg-hover); border-color: var(--border); }
.value-trigger:hover::after { opacity: 1; }
.value-trigger:focus-visible { outline: none; border-color: var(--brand-soft); box-shadow: 0 0 0 2px var(--focus-ring); }
.value-trigger[aria-expanded="true"] { background: var(--bg-hover); border-color: var(--border); }
.value-trigger[aria-expanded="true"]::after { transform: rotate(180deg); }
.value-trigger[aria-disabled="true"] { color: var(--muted); pointer-events: none; }
.value-trigger[aria-disabled="true"]::after { display: none; }
.value-trigger > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.menu-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    width: 100%;
    padding: var(--space-4) var(--space-5);
    background: none;
    border: none;
    border-radius: var(--radius-inner);
    color: var(--fg);
    font-family: inherit;
    font-size: var(--text-4);
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}
.menu-item i { font-size: var(--text-7); color: var(--muted); }
.menu-item { overflow-wrap: anywhere; }
.menu-item > * { min-width: 0; }
.menu-item:hover { background: var(--bg-hover); text-decoration: none; }
.menu-item:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring); }
.menu-item:disabled,
.menu-item[aria-disabled="true"] { cursor: not-allowed; pointer-events: none; }
.menu-item--danger,
.menu-item--danger i { color: var(--danger-fg); }
.menu-item-note { margin-inline-start: auto; color: var(--muted); font-size: var(--text-2); }
.menu:has(.menu-item[aria-current]:not([aria-current="false"])) .menu-item {
    position: relative;
    padding-inline-end: calc(var(--space-5) * 2 + var(--space-4));
}
.menu-item[aria-current]:not([aria-current="false"]) { background: var(--brand-tint); color: var(--brand-text); }
.menu-item[aria-current]:not([aria-current="false"]) i { color: var(--brand-text); }
.menu-item[aria-current]:not([aria-current="false"]):is(:hover, [data-active]) { background: var(--brand-tint-strong); }
.menu-item[aria-current]:not([aria-current="false"])::after {
    inset: auto;
    inset-inline-end: var(--space-5);
    top: calc(50% - 6.5px);
    width: 13px;
    height: 13px;
    background: var(--brand-text);
}
.menu-label {
    display: block;
    padding: calc(var(--space-4) + var(--cap-gap)) var(--space-5) calc(var(--space-2) + var(--cap-gap));
    font-size: var(--text-1);
    font-weight: 600;
    line-height: round(1.5em, 2px);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    text-box: trim-both cap alphabetic;
}
.menu-sep { border: none; border-top: 1px solid var(--divider); margin: var(--space-2) var(--space-1); }
.menu > .form-check {
    display: flex;
    width: 100%;
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-inner);
    color: var(--fg);
    line-height: normal;
}
.menu > .form-check:hover { background: var(--bg-hover); }
.menu > .form-check:has(> input:disabled) { cursor: not-allowed; color: var(--muted); }
.menu > .form-check > input:disabled { cursor: not-allowed; }
.menu-scrim { position: fixed; inset: 0; cursor: default; }
.menu-item:not(:has(> *)) { display: block; text-box: trim-both cap alphabetic; padding-block: calc(var(--space-4) + var(--cap-gap)); }
.menu-filter {
    display: block;
    width: 100%;
    margin-block-end: var(--space-2);
}
.menu-empty {
    display: none;
    padding: var(--space-4) var(--space-5);
    color: var(--muted);
    font-size: var(--text-3);
}
.menu[data-menu-empty] > .menu-empty {
    display: block;
    text-box: trim-both cap alphabetic;
    padding-block: calc(var(--space-4) + var(--cap-gap));
}
.menu-item[data-active] { background: var(--bg-hover); }
.mention-field {
    position: relative;
    display: block;
    min-inline-size: 0;
    anchor-name: --sedna-mention;
    anchor-scope: --sedna-mention;
}
.mention-field > textarea,
.mention-field > input { display: block; inline-size: 100%; }
.mention-field > .menu {
    position: fixed;
    position-anchor: --sedna-mention;
    position-area: block-end span-inline-end;
    justify-self: start;
    align-self: start;
    position-try-fallbacks: flip-block;
    position-visibility: anchors-visible;
    margin-block-start: var(--space-2);
    min-inline-size: 220px;
    max-block-size: 16rem;
    overflow-y: auto;
    z-index: 550;
}
@container style(--panel-placement: block-start) {
    .mention-field > .menu {
        position-area: block-start span-inline-end;
        align-self: end;
        margin-block: 0 var(--space-2);
    }
}
@container style(--panel-placement: inline-end) {
    .mention-field > .menu {
        position-area: inline-end span-block-end;
        justify-self: start;
        align-self: start;
        margin-block: 0;
        margin-inline: var(--space-2) 0;
        position-try-fallbacks: flip-inline, flip-block, flip-inline flip-block,
            --sedna-panel-below, --sedna-panel-below flip-inline, --sedna-panel-above, --sedna-panel-above flip-inline;
    }
}
@container style(--panel-placement: inline-start) {
    .mention-field > .menu {
        position-area: inline-start span-block-end;
        justify-self: end;
        align-self: start;
        margin-block: 0;
        margin-inline: 0 var(--space-2);
        position-try-fallbacks: flip-inline, flip-block, flip-inline flip-block,
            --sedna-panel-below, --sedna-panel-below flip-inline, --sedna-panel-above, --sedna-panel-above flip-inline;
    }
}
.chat-composer-row > .mention-field { flex: 1; }
.chat-composer-row > .mention-field > .form-input {
    resize: none;
    field-sizing: content;
    max-height: 9.5em;
}
@media (max-width: 767px) {
    .menu-anchor:not(.fab-dial):has(> [aria-expanded="true"], [data-menu-toggle][aria-expanded="true"]) > .menu,
    .menu[popover]:not([data-menu-raised]) {
        position: fixed;
        inset: auto 0 0;
        position-area: none;
        position-try-fallbacks: none;
        position-visibility: always;
        align-self: normal;
        width: 100%;
        min-width: 0;
        max-width: none;
        max-height: 70dvh;
        overflow-y: auto;
        margin: 0;
        padding: var(--space-3) var(--space-3) calc(var(--space-3) + var(--safe-block-end));
        border-bottom: none;
        border-radius: var(--radius-panel) var(--radius-panel) 0 0;
        box-shadow: var(--shadow-modal);
        z-index: 550;
    }
    .menu-anchor:not(.fab-dial):has(> [aria-expanded="true"], [data-menu-toggle][aria-expanded="true"]) > .menu { box-shadow: var(--shadow-modal), 0 0 0 100vmax var(--backdrop); }
    .menu-anchor:not(.fab-dial):has(> [aria-expanded="true"], [data-menu-toggle][aria-expanded="true"]):not(:has(> .menu-scrim)) > .menu::before {
        content: '';
        position: fixed;
        inset: 0;
        z-index: 0;
    }
    .menu-anchor:not(.fab-dial):has(> [aria-expanded="true"], [data-menu-toggle][aria-expanded="true"]):not(:has(> .menu-scrim)) > .menu > * { position: relative; z-index: 1; }
    .menu[popover]:not([data-menu-raised])::backdrop { background: var(--backdrop); }
    :is(.menu-anchor:not(.fab-dial):has(> [aria-expanded="true"], [data-menu-toggle][aria-expanded="true"]) > .menu, .menu[popover]) .menu-item { padding-block: var(--space-5); }
    :is(.menu-anchor:not(.fab-dial):has(> [aria-expanded="true"], [data-menu-toggle][aria-expanded="true"]) > .menu, .menu[popover]) .menu-item:not(:has(> *)) {
        padding-block: calc(var(--space-5) + var(--cap-gap));
    }
    :is(.menu-anchor:not(.fab-dial):has(> [aria-expanded="true"], [data-menu-toggle][aria-expanded="true"]) > .menu, .menu[popover]) .menu-sub-anchor > .menu-sub {
        position: static;
        width: auto;
        min-width: 0;
        max-width: none;
        margin: 0;
        padding: 0;
        padding-inline-start: var(--space-7);
        background: none;
        border: none;
        box-shadow: none;
    }
}
}
@layer sedna.paint {
.table--sticky { border-collapse: separate; border-spacing: 0; }
.table--sticky thead {
    position: sticky;
    top: 0;
    z-index: 2;
}
.table--sticky thead th {
    background: var(--bg-elevated);
    box-shadow: inset 0 -1px 0 var(--border), 0 -1px 0 var(--bg-elevated);
}
.table--sticky td { border-bottom: 1px solid var(--border); }
.table--sticky-foot { border-collapse: separate; border-spacing: 0; }
.table--sticky-foot tfoot {
    position: sticky;
    bottom: 0;
    z-index: 2;
}
.table.table--sticky-foot tfoot :is(td, th) {
    background-color: var(--surface-here, var(--bg));
    background-image: linear-gradient(var(--surface-soft), var(--surface-soft));
}
.table thead .tr-pinned > td {
    background-color: var(--surface-here, var(--bg));
    background-image: linear-gradient(var(--brand-tint), var(--brand-tint));
    border-bottom-color: var(--border-strong);
}
.table thead .tr-pinned { --pin-tint: var(--brand-tint); }
.table--zebra tbody tr:nth-child(even of :where(:not(:empty))):where(:not([aria-rowindex])) > td,
.table--zebra tbody tr:is([aria-rowindex$="1"], [aria-rowindex$="3"], [aria-rowindex$="5"], [aria-rowindex$="7"], [aria-rowindex$="9"]) > td,
.table--zebra tbody tr:is([aria-rowindex$="1"], [aria-rowindex$="3"], [aria-rowindex$="5"], [aria-rowindex$="7"], [aria-rowindex$="9"])::after { background: var(--surface-soft); }
.table--zebra .tr-clickable:hover > td,
.table--zebra .tr-clickable:hover::after { background: var(--bg-hover); }
.table th[aria-sort] { padding: 0; }
.th-sort {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--cell-pad-y) var(--cell-pad-x);
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    text-align: start;
    cursor: pointer;
}
.th-sort:hover { color: var(--fg); background: var(--surface-strong); }
.th-sort:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus-ring); }
.th-sort::after {
    content: '';
    flex-shrink: 0;
    width: 0;
    height: 0;
    border-inline: 4px solid transparent;
    opacity: 0;
}
.table th[aria-sort="none"] .th-sort:hover::after { border-top: 5px solid currentColor; opacity: 0.4; }
.table th[aria-sort="ascending"] .th-sort::after { border-bottom: 5px solid currentColor; opacity: 1; }
.table th[aria-sort="descending"] .th-sort::after { border-top: 5px solid currentColor; opacity: 1; }
.table .col-num > .th-sort { flex-direction: row-reverse; text-align: end; }
.table th[aria-sort="ascending"],
.table th[aria-sort="descending"] { color: var(--brand-text); }
.table .col-num { text-align: end; font-variant-numeric: tabular-nums; }
.table tbody tr[aria-selected="true"] > td,
.table tbody tr[aria-selected="true"]::after { background: var(--brand-tint); }
.table:not(.table--pin-start) tbody tr[aria-selected="true"] > td:first-child { position: relative; }
.table:not(.table--stack) tbody tr[aria-selected="true"] > td:first-child::before {
    content: "";
    position: absolute;
    inset-block: -1px;
    inset-inline-start: 0;
    inline-size: 3px;
    background: var(--selected);
    pointer-events: none;
}
.table--stack tbody tr[aria-selected="true"] > td:first-child { box-shadow: inset 3px 0 0 var(--selected); }
.table :is(td, th) > .form-check:only-child {
    display: flex;
    inline-size: max-content;
}
.table :is(td, th):is(.col-num, .text-end) > .form-check:only-child { margin-inline-start: auto; }
.table :is(td, th):is(.text-center) > .form-check:only-child { margin-inline: auto; }
.table--pin-start,
.table--pin-end { border-collapse: separate; border-spacing: 0; --pin-bg: var(--surface-here, var(--bg)); }
.table--pin-start { --pin-edge-start: var(--shadow-edge-start); }
.table--pin-end   { --pin-edge-end:   var(--shadow-edge-end); }
.table--pin-start tbody tr > td:first-child:not([colspan]),
.table--pin-start thead .tr-pinned > td:first-child:not([colspan]),
.table--pin-start tfoot tr > :is(td, th):first-child:not([colspan]) {
    --pin-shadow: var(--pin-edge-start);
    position: sticky;
    inset-inline-start: 0;
    z-index: 1;
    background-color: var(--pin-bg);
    background-image: linear-gradient(var(--pin-tint, transparent), var(--pin-tint, transparent));
    box-shadow: var(--pin-shadow);
}
.table--pin-end tbody tr > td:last-child:not([colspan]),
.table--pin-end thead .tr-pinned > td:last-child:not([colspan]),
.table--pin-end tfoot tr > :is(td, th):last-child:not([colspan]) {
    --pin-shadow: var(--pin-edge-end);
    position: sticky;
    inset-inline-end: 0;
    z-index: 1;
    background-color: var(--pin-bg);
    background-image: linear-gradient(var(--pin-tint, transparent), var(--pin-tint, transparent));
    box-shadow: var(--pin-shadow);
}
.table--pin-start thead th:first-child:not([colspan]) {
    --pin-shadow: var(--pin-edge-start);
    position: sticky;
    inset-inline-start: 0;
    z-index: 3;
    background-color: var(--pin-bg);
    background-image: linear-gradient(var(--table-head-bg), var(--table-head-bg));
    box-shadow: var(--pin-shadow);
}
.table--pin-end thead th:last-child:not([colspan]) {
    --pin-shadow: var(--pin-edge-end);
    position: sticky;
    inset-inline-end: 0;
    z-index: 3;
    background-color: var(--pin-bg);
    background-image: linear-gradient(var(--table-head-bg), var(--table-head-bg));
    box-shadow: var(--pin-shadow);
}
.table--sticky.table--pin-start thead th:first-child:not([colspan]),
.table--sticky.table--pin-end thead th:last-child:not([colspan]) {
    background-color: var(--bg-elevated);
    background-image: none;
    box-shadow: inset 0 -1px 0 var(--border), 0 -1px 0 var(--bg-elevated), var(--pin-shadow);
}
@container not scroll-state(scrollable: inline-start) {
    .table--pin-start thead th:first-child:not([colspan]),
    .table--pin-start tbody tr > td:first-child:not([colspan]),
    .table--pin-start thead .tr-pinned > td:first-child:not([colspan]),
    .table--pin-start tfoot tr > :is(td, th):first-child:not([colspan]) { --pin-shadow: 0 0 0 transparent; }
}
@container not scroll-state(scrollable: inline-end) {
    .table--pin-end thead th:last-child:not([colspan]),
    .table--pin-end tbody tr > td:last-child:not([colspan]),
    .table--pin-end thead .tr-pinned > td:last-child:not([colspan]),
    .table--pin-end tfoot tr > :is(td, th):last-child:not([colspan]) { --pin-shadow: 0 0 0 transparent; }
}
.sedna-scroll-x[data-scroll-start] .table--pin-start thead th:first-child:not([colspan]),
.sedna-scroll-x[data-scroll-start] .table--pin-start tbody tr > td:first-child:not([colspan]),
.sedna-scroll-x[data-scroll-start] .table--pin-start thead .tr-pinned > td:first-child:not([colspan]),
.sedna-scroll-x[data-scroll-start] .table--pin-start tfoot tr > :is(td, th):first-child:not([colspan]),
.sedna-scroll-x[data-scroll-end] .table--pin-end thead th:last-child:not([colspan]),
.sedna-scroll-x[data-scroll-end] .table--pin-end tbody tr > td:last-child:not([colspan]),
.sedna-scroll-x[data-scroll-end] .table--pin-end thead .tr-pinned > td:last-child:not([colspan]),
.sedna-scroll-x[data-scroll-end] .table--pin-end tfoot tr > :is(td, th):last-child:not([colspan]) { --pin-shadow: 0 0 0 transparent; }
.tr-group > th,
.tr-group > td {
    background: var(--surface-soft);
    padding-block: var(--space-3);
    font-size: var(--text-3);
    font-weight: 600;
    color: var(--fg-soft);
    text-transform: none;
    letter-spacing: 0;
}
.tr-group-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
}
.tr-group-count {
    margin-inline-start: auto;
    color: var(--muted);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.table--sticky { --table-head-height: 35px; --table-filter-height: 0px; }
.table--sticky .tr-group > th {
    position: sticky;
    top: calc(var(--table-head-height) + var(--table-filter-height) - 1px);
    z-index: 1;
}
.tr-filter > th {
    padding-block: var(--space-2);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--fg);
}
.tr-filter :is(.form-input, .form-select) { width: 100%; min-width: 0; }
.table--sticky:has(.tr-filter) { --table-filter-height: 37px; }
.tr-filter :is(.input-group, .form-trigger) { width: 100%; min-width: 0; }
.tr-filter .segmented { display: flex; width: 100%; }
.tr-filter .segmented-option { flex: 1 1 0; justify-content: center; padding-inline: var(--space-3); }
.tr-filter .input-affix { padding-inline: var(--space-3); border-inline: 0; }
.tr-filter .input-affix:first-child + .form-input { padding-inline-start: 0; }
.tr-filter .input-affix:not(:first-child, :last-child) { padding-inline: 0; }
.tr-filter .form-input::-webkit-inner-spin-button,
.tr-filter .form-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.table th.col-filtered { color: var(--brand-text); }
.table thead tr:not(.tr-filter) > th.col-filtered { box-shadow: inset 0 -2px 0 var(--brand); }
.table--sticky thead tr:not(.tr-filter) > th.col-filtered {
    box-shadow: inset 0 -2px 0 var(--brand), 0 -1px 0 var(--bg-elevated);
}
.tr-filter > th.col-filtered :is(.form-input, .form-select, .input-group, .segmented) {
    border-color: var(--brand-soft);
}
.th-filter {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-block: -3px;
    margin-inline-start: auto;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--radius-small);
    color: var(--muted);
    font-size: var(--text-4);
    line-height: 1;
    cursor: pointer;
}
.th-filter:hover { background: var(--bg-hover); color: var(--fg); }
.th-filter:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring); }
.table th[aria-sort] .th-filter { margin-inline-end: var(--space-3); }
.th-filter--active,
.th-filter--active:hover { background: var(--brand-tint); color: var(--brand-text); }
.th-filter--active::after {
    content: '';
    position: absolute;
    inset-block-start: 2px;
    inset-inline-end: 2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand);
}
.tr-empty > td,
.tr-busy > td,
.list-empty {
    padding: var(--space-10) var(--space-7);
    color: var(--muted);
    font-size: var(--text-4);
    text-align: center;
}
.tr-empty:hover > td,
.tr-busy:hover > td,
.tr-busy:hover::after { background: none; }
.tr-busy .spinner { margin-inline-end: var(--space-4); }
:is(.tr-empty, .list-empty) .state-art { display: block; margin: 0 auto var(--space-5); }
.table tbody tr.tr-more > td {
    padding-block: var(--space-4);
    background: none;
    text-align: center;
}
.tr-more-count {
    margin-inline-start: var(--space-4);
    color: var(--muted);
    font-size: var(--text-3);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.table--zebra tbody tr:nth-child(even of :where(:not(:empty))):where(:not([aria-rowindex])),
.table--zebra tbody tr:is([aria-rowindex$="1"], [aria-rowindex$="3"], [aria-rowindex$="5"], [aria-rowindex$="7"], [aria-rowindex$="9"]) { --pin-tint: var(--surface-soft); }
.table tbody tr[aria-selected="true"] { --pin-tint: var(--brand-tint); }
.tr-clickable:hover { --pin-tint: var(--bg-hover); }
.table--zebra .tr-clickable:hover { --pin-tint: var(--bg-hover); }
.table tfoot tr { --pin-tint: var(--surface-soft); }
.table:is([role="grid"], [role="treegrid"]) :is(td, th):focus {
    outline: 2px solid var(--focus-ring);
    outline-offset: -2px;
}
.table:is([role="grid"], [role="treegrid"]) :is(td, th)[aria-selected="true"] {
    --pin-tint: var(--brand-tint);
    background-image: linear-gradient(var(--brand-tint), var(--brand-tint));
}
.table {
    --cell-dirty-mark: var(--info-fg);
    --cell-invalid-mark: var(--field-border-danger);
    --cell-mark-size: 7px;
}
.table :is(td, th):is([data-dirty], [aria-invalid="true"], :has(> .cell-editor)) { position: relative; }
.table :is(td, th):has(> .cell-editor):not(:has(> :not(.cell-editor, .visually-hidden))) {
    text-box: trim-both cap alphabetic;
    padding-block: calc(var(--cell-pad-y) + var(--cap-gap));
}
.cell-editor { display: none; }
.table :is(td, th)[data-editing] > .cell-editor,
.table tr[data-editing] > :is(td, th) > .cell-editor {
    display: block;
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0 var(--cell-pad-x);
    background: var(--bg);
    border: 0;
    border-radius: 0;
    color: var(--fg);
    font: inherit;
    text-align: inherit;
    resize: none;
}
.table textarea.cell-editor { padding-block: var(--cell-pad-y); }
.table .cell-editor { box-shadow: inset 0 0 0 1px var(--field-border); }
.table .cell-editor:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--focus-ring);
}
.table .cell-editor[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--field-border-danger); }
.table .cell-editor[aria-invalid="true"]:focus {
    box-shadow: inset 0 0 0 1px var(--field-border-danger), inset 0 0 0 3px var(--focus-ring);
}
.table :is(td, th):is([data-dirty], [aria-invalid="true"], :has(> .cell-editor[aria-invalid="true"]))::after {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    border-block-start: var(--cell-mark-size) solid var(--cell-mark, var(--cell-dirty-mark));
    border-inline-start: var(--cell-mark-size) solid transparent;
    pointer-events: none;
}
.table :is(td, th)[data-dirty] { --cell-mark: var(--cell-dirty-mark); }
.table :is(td, th):is([aria-invalid="true"], :has(> .cell-editor[aria-invalid="true"])) { --cell-mark: var(--cell-invalid-mark); }
.table tbody tr[data-editing] > td,
.table tbody tr[data-editing]::after { background: var(--surface-soft); }
.table tbody tr[data-editing] { --pin-tint: var(--surface-soft); }
.table .col-control {
    --col-control-min: 14rem;
    --col-control-max: none;
    min-width: var(--col-control-min);
    max-width: var(--col-control-max);
}
.table .col-control > .form-input,
.table .col-control > .form-select { width: 100%; }
.table .col-prose {
    --col-prose-min: 12rem;
    --col-prose-max: 30rem;
    min-width: var(--col-prose-min);
    max-width: var(--col-prose-max);
    white-space: normal;
    overflow-wrap: anywhere;
}
.table .col-fit { width: 1%; white-space: nowrap; }
@property --resize-min {
    syntax: '<length> | none';
    inherits: false;
    initial-value: none;
}
@property --resize-max {
    syntax: '<length> | none';
    inherits: false;
    initial-value: none;
}
.table--fixed {
    --col-width: 10rem;
    --col-min: 4rem;
    --col-max: 40rem;
    table-layout: fixed;
    inline-size: 0;
    min-inline-size: 100%;
}
.table--fixed tr::after {
    content: '';
    display: table-cell;
    padding: 0;
    border-bottom: 1px solid var(--border);
}
.table--fixed > thead > tr::after { background: var(--table-head-bg); }
.table--fixed.table--sticky > thead > tr::after {
    background: var(--bg-elevated);
    box-shadow: inset 0 -1px 0 var(--border), 0 -1px 0 var(--bg-elevated);
}
.table--fixed > thead > tr:first-child > :is(th, td) {
    inline-size: clamp(var(--col-min), var(--col-width), var(--col-max));
}
.table--fixed :is(th, td) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.table--fixed .th-sort { min-inline-size: 0; }
:where(.table th:has(> .col-resize)) { position: relative; }
.col-resize {
    --resize-min: var(--col-min);
    --resize-max: var(--col-max);
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    inline-size: var(--space-4);
    cursor: col-resize;
    touch-action: none;
}
.col-resize::before {
    content: "";
    position: absolute;
    inset-block: 25%;
    inset-inline-end: 0;
    border-inline-end: 2px solid var(--border-strong);
    transition: border-color var(--motion-fast);
}
.col-resize:hover::before,
.col-resize:focus-visible::before,
.col-resize[data-resizing]::before { inset-block: 0; border-inline-end-color: var(--selected); }
.col-resize:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus-ring); }
tr[data-drag-zone] > [data-dragging="pointer"] { translate: var(--drag-x) 0; }
tr[data-drop-state="valid"]:not([data-drop-over]) > [data-dragging="pointer"] { opacity: 0.5; }
tr[data-drag-zone] > [data-drop-edge]::before {
    inset-block: 0;
    inset-inline: auto;
    width: 0;
    height: auto;
    border-top: 0;
    border-inline-start: 3px solid var(--brand);
}
tr[data-drag-zone] > [data-drop-edge="before"]::before { inset-inline-start: 0; }
tr[data-drag-zone] > [data-drop-edge="after"]::before { inset-inline-end: 0; }
.tr-detail > td {
    position: relative;
    padding: 0;
    background: var(--surface-soft);
}
.tr-detail > td::before {
    content: "";
    position: absolute;
    inset-block: -1px;
    inset-inline-start: 0;
    inline-size: 3px;
    background: var(--border-strong);
    pointer-events: none;
}
.table code { overflow-wrap: break-word; }
.tr-detail-body {
    padding: var(--space-6) var(--space-7);
    inline-size: 0;
    min-inline-size: 100%;
    box-sizing: border-box;
    overflow-x: auto;
}
.table th[colspan] { text-align: center; border-bottom-color: var(--border-strong); }
.table tfoot td,
.table tfoot th {
    background: var(--surface-soft);
    border-top: 1px solid var(--border-strong);
    border-bottom: none;
    font-weight: 600;
    color: var(--fg);
}
@media (max-width: 640px) {
    .table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .table--stack tr::after { content: none; }
    .table--stack tr { display: block; margin-bottom: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-surface); overflow: hidden; }
    .table--stack :is(tbody, tfoot) :is(td, th) { display: flow-root; text-align: end; border-bottom: 1px solid var(--divider); }
    .table.table--stack :is(tbody, tfoot) :is(td, th) { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; }
    .table--stack tr > :is(td, th):last-child { border-bottom: none; }
    .table--stack :is(td, th)[data-label]::before {
        content: attr(data-label);
        float: inline-start;
        margin-inline-end: var(--space-6);
        color: var(--muted);
        font-size: var(--text-2);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }
    .table--stack :is(tbody, tfoot) :is(td, th):not([data-label]) { text-align: start; }
    .table--stack .tr-group { border-width: 0; }
    .table--stack tr:empty { margin: 0; border-width: 0; }
    .card > .table--stack { position: relative; display: block; padding: var(--space-5); }
    .card > .table--stack > thead { inset-block-start: 0; inset-inline-start: 0; }
    .card > .table--stack > :is(tbody, tfoot) { display: block; }
    .card > .table--stack > :is(tbody, tfoot):last-child > tr:last-child { margin-bottom: 0; }
}
}
@layer sedna.paint {
.listbox {
    --listbox-rows: 4;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    width: 100%;
    block-size: calc(var(--listbox-rows) * 2.4em + var(--space-1) * (var(--listbox-rows) - 1) + var(--space-2) * 2 + 2px);
    padding: var(--space-2);
    overflow: auto;
    background: var(--bg);
    border: 1px solid var(--field-border);
    border-radius: var(--radius-control);
    color: var(--fg);
    font-size: var(--text-4);
    line-height: round(1.4em, 2px);
    --surface-here: var(--bg);
    --muted-here: var(--muted);
    transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.listbox:focus {
    border-color: var(--field-border-focus);
    box-shadow: 0 0 0 2px var(--brand-glow);
}
.listbox[aria-disabled="true"] { background: var(--disabled-bg); border-color: var(--disabled-border); color: var(--disabled-fg); cursor: not-allowed; }
.listbox [role="option"] {
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--space-4);
    box-sizing: border-box;
    min-block-size: 2.4em;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-inner);
    color: var(--fg);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}
.listbox [role="option"] > i { flex-shrink: 0; color: var(--muted); font-size: var(--text-7); line-height: 1; }
.listbox [role="group"] { display: flex; flex-direction: column; gap: var(--space-1); }
.listbox-heading {
    padding: var(--space-4) var(--space-5) var(--space-2);
    color: var(--muted);
    font-size: var(--text-1);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.listbox [role="option"]:hover,
.listbox [role="option"][data-active] { background: var(--bg-hover); }
.listbox:focus-visible [role="option"][data-active] { box-shadow: inset 0 0 0 2px var(--focus-ring); }
.listbox [role="option"][aria-selected="true"] {
    padding-inline-end: calc(var(--space-5) * 2 + var(--space-4));
    background: var(--brand-tint);
    color: var(--brand-text);
}
.listbox [role="option"][aria-selected="true"] > i { color: var(--brand-text); }
.listbox [role="option"][aria-selected="true"]:is(:hover, [data-active]) { background: var(--brand-tint-strong); }
.listbox [role="option"][aria-disabled="true"] { color: var(--muted); cursor: not-allowed; }
.listbox [role="option"][aria-disabled="true"]:hover { background: none; }
.listbox [role="option"][aria-disabled="true"][aria-selected="true"] { background: var(--brand-tint); }
.listbox [role="option"][aria-selected="true"]::after {
    inset: auto;
    inset-inline-end: var(--space-4);
    top: calc(50% - 6.5px);
    width: 13px;
    height: 13px;
    background: var(--brand-text);
}
.listbox .option-text { display: flex; flex-direction: column; gap: var(--space-1); min-inline-size: 0; }
.listbox .option-hint { color: var(--muted); font-size: var(--text-3); }
.listbox [role="option"][aria-selected="true"] .option-hint { color: var(--brand-text); opacity: 0.8; }
.listbox [role="option"]:has(.option-text) { padding-block: var(--space-3); }
}
@layer sedna.paint {
.list { list-style: none; margin: 0; padding: 0; }
.list > li + li { border-top: 1px solid var(--divider); }
.list-row {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    padding: var(--list-pad-block) var(--list-pad-inline);
    color: inherit;
    text-decoration: none;
}
button.list-row {
    width: 100%;
    background: none;
    border: none;
    font: inherit;
    text-align: start;
    cursor: pointer;
}
:is(a, button).list-row:hover { background: var(--bg-hover); text-decoration: none; }
:is(a, button).list-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus-ring); }
button.list-row:active { background: var(--btn-active-bg); }
button.list-row:disabled,
button.list-row[aria-disabled="true"] { cursor: not-allowed; pointer-events: none; }
.list-row[aria-current="true"],
.list-row[aria-selected="true"] {
    background: var(--brand-tint);
    box-shadow: inset 3px 0 0 var(--selected);
}
.list-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.list-title,
.list-sub {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--list-lines);
    overflow: hidden;
    overflow-wrap: anywhere;
}
.list-title { color: var(--fg); font-weight: 500; }
.list-sub { color: var(--muted); font-size: var(--text-3); }
.list-meta { display: flex; align-items: center; gap: var(--space-4); flex-shrink: 0; color: var(--muted); font-size: var(--text-3); }
.list-main > .list-meta { flex-wrap: wrap; row-gap: var(--space-1); }
@container not style(--list-lines: 1) {
    .list-row > * { align-self: flex-start; }
}
.list-row:has(> .list-main > .list-meta:first-child) > * { align-self: flex-start; }
.card > .list > li > .list-row { padding-inline: var(--card-pad-inline); }
.list--cards { display: flex; flex-direction: column; gap: var(--list-gap); }
.list--cards > li + li { border-top: none; }
.list--cards > li > .list-row {
    --surface-here: var(--surface-raised-1);
    --muted-here: var(--muted);
    background-color: var(--surface-here);
    border: 1px solid var(--border);
    border-radius: var(--radius-surface);
}
.card .list--cards > li > .list-row { --surface-here: var(--surface-raised-2); --muted-here: var(--muted); }
.card .card .list--cards > li > .list-row { --surface-here: var(--surface-raised-3); --muted-here: var(--muted); --muted: var(--fg-soft); }
.list--cards > li > :is(a, button).list-row:hover { background-color: var(--bg-hover); border-color: var(--border-strong); }
.list--cards > li > button.list-row:active { background-color: var(--btn-active-bg); }
.list--cards > li > .list-row:is([aria-current="true"], [aria-selected="true"]),
.list--cards > li > .list-row:is([aria-current="true"], [aria-selected="true"]):hover {
    background-color: var(--surface-here);
    background-image: linear-gradient(var(--brand-tint), var(--brand-tint));
    border-color: var(--selected);
    box-shadow: inset 0 0 0 1px var(--selected);
}
.list--cards > li > :is(a, button).list-row:is([aria-current="true"], [aria-selected="true"]):focus-visible {
    box-shadow: inset 0 0 0 1px var(--selected), inset 0 0 0 3px var(--focus-ring);
}
.card > .list--cards { padding: var(--card-pad-block) var(--card-pad-inline); }
.card > .list--cards > li > .list-row { padding-inline: var(--list-pad-inline); }
.list--cards > .sticky-group-head,
.card > .list--cards > .sticky-group-head { padding-inline: calc(var(--list-pad-inline) + 1px); }
.list-row--flush { padding: 0; gap: var(--space-5); }
.list--tasks { --list-lines: none; }
.list--tasks > li > .list-row > :is(.list-main, .list-status) { align-self: baseline; }
.list--tasks > li > a.list-row .list-title { color: var(--accent); }
.list-status {
    flex-shrink: 0;
    margin-inline-start: auto;
    color: var(--fg);
    font-size: var(--text-3);
    font-weight: 500;
    text-align: end;
}
.list-status--muted { color: var(--muted); font-weight: 400; }
.steps {
    --step-marker: 28px;
    list-style: none;
    margin: 0 0 var(--space-7);
    padding: 0;
    display: flex;
    counter-reset: sedna-step;
}
.steps > li {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: 0 var(--space-4);
    color: var(--muted);
    font-size: var(--text-3);
    text-align: center;
    counter-increment: sedna-step;
}
.steps > li::before {
    content: counter(sedna-step);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--step-marker);
    height: var(--step-marker);
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    background: var(--bg);
    color: var(--muted);
    font-weight: 600;
    position: relative;
    z-index: 1;
}
.steps > li:not(:last-child)::after {
    content: '';
    position: absolute;
    top: calc(var(--step-marker) / 2);
    inset-inline-start: 50%;
    width: 100%;
    border-top: 1px solid var(--border);
}
.steps > li[data-state="done"] { color: var(--fg-soft); }
.steps > li[data-state="done"]::before {
    background: var(--go-solid);
    border-color: var(--go-solid);
    color: var(--on-solid);
}
.steps > li[data-state="done"]:not(:last-child)::after { border-top-color: var(--go-solid); }
.steps > li[data-state="current"] { color: var(--fg); font-weight: 600; }
.steps > li[data-state="current"]::before {
    border-color: var(--brand);
    color: var(--brand-text);
    box-shadow: 0 0 0 3px var(--brand-glow);
}
.sticky-group-head {
    --group-head-index: 0;
    --group-head-height: 32px;
    --group-head-bg: var(--surface-here, var(--bg));
    --group-head-fg: var(--muted);
    position: sticky;
    top: calc(var(--group-head-index) * (var(--group-head-height) - 1px));
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-shrink: 0;
    height: var(--group-head-height);
    padding: 0 var(--space-6);
    background: var(--group-head-bg);
    border-bottom: 1px solid var(--border);
    color: var(--group-head-fg);
    font-size: var(--text-2);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.card > .list > .sticky-group-head,
.card > .sticky-group-head { padding-inline: var(--card-pad-inline); }
.sticky-group-head--rule { border-bottom: none; }
.sticky-group-head--rule::after {
    content: '';
    order: 1;
    flex: 1;
    border-top: 1px solid var(--border);
}
.sticky-group-count {
    order: 2;
    flex-shrink: 0;
    margin-inline-start: auto;
    color: var(--fg-soft);
    font-variant-numeric: tabular-nums;
}
.sticky-group-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    flex: 0 1 auto;
    min-width: 0;
    block-size: 100%;
    margin-inline-start: calc(var(--space-2) * -1);
    padding-inline: var(--space-2);
    background: none;
    border: none;
    border-radius: var(--radius-inner);
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    text-align: start;
    cursor: pointer;
}
.sticky-group-toggle::before {
    content: "";
    flex-shrink: 0;
    inline-size: 6px;
    block-size: 6px;
    margin-block-start: -3px;
    border-inline-end: 1.5px solid currentColor;
    border-block-end: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--motion-fast);
}
.sticky-group-toggle[aria-expanded="false"]::before { transform: rotate(-45deg); margin-block-start: 0; }
.sticky-group-toggle[aria-expanded="false"]:dir(rtl)::before { transform: rotate(135deg); }
.sticky-group-toggle:hover { color: var(--fg); }
.sticky-group-toggle:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus-ring); }
[data-group-hidden] { display: none; }
.accordion { border: 1px solid var(--border); border-radius: var(--radius-surface); overflow: hidden; }
.accordion--flush { border: none; border-radius: 0; }
.accordion > details + details { border-top: 1px solid var(--border); }
.accordion summary {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-7);
    background: var(--surface-soft);
    color: var(--fg);
    font-size: var(--text-4);
    font-weight: 500;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary:hover { background: var(--bg-hover); }
.accordion summary:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus-ring); }
.accordion summary::after {
    content: '';
    margin-inline-start: auto;
    width: 0;
    height: 0;
    border-inline: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: 0.5;
    transition: transform var(--motion-fast) ease;
}
.accordion details[open] > summary::after { transform: rotate(-180deg); }
.accordion details[open] > summary { background: var(--surface-strong); }
.accordion-body { padding: var(--space-6) var(--space-7); font-size: var(--text-4); color: var(--fg-soft); }
.accordion-body > :first-child { margin-top: 0; }
.accordion-body > :last-child { margin-bottom: 0; }
.sticky-group-count { text-box: trim-both cap alphabetic; padding-block: var(--cap-gap); }
.list-meta:not(:has(> *)) { display: block; text-box: trim-both cap alphabetic; padding-block: var(--cap-gap); }
}
@layer sedna.paint {
.tree,
.tree [role="group"] { list-style: none; margin: 0; padding: 0; }
.tree [role="group"] {
    padding-inline-start: var(--space-7);
    margin-inline-start: var(--space-5);
    border-inline-start: 1px solid var(--divider);
}
.tree [role="treeitem"] { font-size: var(--text-4); outline: none; }
.tree [role="treeitem"] + [role="treeitem"],
.tree [role="treeitem"] > [role="group"] { margin-block-start: var(--space-1); }
.tree [aria-expanded="false"] > [role="group"] { display: none; }
.tree-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-inner);
    color: var(--fg-soft);
    line-height: round(1.4em, 2px);
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}
.tree-row:hover { background: var(--bg-hover); color: var(--fg); text-decoration: none; }
.tree [role="treeitem"]:focus-visible > .tree-row { box-shadow: 0 0 0 2px var(--focus-ring); }
.tree [role="treeitem"][data-active] > .tree-row { background: var(--bg-hover); color: var(--fg); }
.tree [aria-selected="true"] > .tree-row,
.tree [aria-current]:not([aria-current="false"]) > .tree-row { background: var(--brand-tint); color: var(--brand-text); }
.tree [aria-disabled="true"] > .tree-row { color: var(--muted); cursor: default; }
.tree [aria-disabled="true"] > .tree-row:hover { background: none; }
.tree-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-box: trim-both cap alphabetic;
    padding-block: var(--cap-gap);
}
.tree-count {
    margin-inline-start: auto;
    color: var(--muted);
    font-size: var(--text-2);
    font-variant-numeric: tabular-nums;
    text-box: trim-both cap alphabetic;
    padding-block: var(--cap-gap);
}
.tree-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--space-5);
    height: 1em;
}
.tree [aria-expanded] > .tree-row > .tree-toggle::before,
.table[role="treegrid"] tr[aria-expanded] > * > .tree-toggle::before {
    content: '';
    width: 0;
    height: 0;
    border-block: 4px solid transparent;
    border-inline-start: 5px solid currentColor;
    opacity: 0.55;
    transition: transform var(--motion-fast) ease;
}
.tree [aria-expanded="true"] > .tree-row > .tree-toggle::before,
.table[role="treegrid"] tr[aria-expanded="true"] > * > .tree-toggle::before { transform: rotate(90deg); }
.tree [aria-busy="true"] > .tree-row > .tree-toggle::before,
.table[role="treegrid"] tr[aria-busy="true"] > * > .tree-toggle::before {
    flex: none;
    box-sizing: border-box;
    width: round(0.75em + 3px, 2px);
    height: round(0.75em + 3px, 2px);
    border: 1.5px solid var(--border);
    border-top-color: var(--brand-soft);
    border-radius: 50%;
    opacity: 1;
    transform: none;
    animation: sedna-spin var(--spin-duration) linear infinite;
}
.table[role="treegrid"] { --treegrid-indent: var(--space-7); }
.table[role="treegrid"] tr[aria-level="2"] { --tree-depth: 1; }
.table[role="treegrid"] tr[aria-level="3"] { --tree-depth: 2; }
.table[role="treegrid"] tr[aria-level="4"] { --tree-depth: 3; }
.table[role="treegrid"] tr[aria-level="5"] { --tree-depth: 4; }
.table[role="treegrid"] tr[aria-level="6"] { --tree-depth: 5; }
.table[role="treegrid"] tr[aria-level="7"] { --tree-depth: 6; }
.table[role="treegrid"] tr[aria-level="8"] { --tree-depth: 7; }
.table[role="treegrid"] tr > :has(> .tree-toggle) {
    padding-inline-start: calc(var(--cell-pad-x) + var(--tree-depth, 0) * var(--treegrid-indent));
    white-space: nowrap;
}
.table[role="treegrid"] tr > :has(> .tree-toggle) {
    text-box: trim-both cap alphabetic;
    padding-block: calc(var(--cell-pad-y) + var(--cap-gap));
}
.table[role="treegrid"] .tree-toggle {
    display: inline-block;
    position: relative;
    width: round(0.75em + 3px, 2px);
    height: 1cap;
    margin-inline-end: var(--space-3);
    vertical-align: baseline;
}
.table[role="treegrid"] tr > * > .tree-toggle::before {
    position: absolute;
    left: 50%; top: 50%;
    translate: -50% -50%;
}
.table[role="treegrid"] tr[aria-expanded] > * > .tree-toggle { cursor: pointer; }
.tree-check {
    position: relative;
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-small);
}
.tree :is([aria-checked="true"], [aria-checked="mixed"]) > .tree-row > .tree-check {
    background: var(--brand);
    border-color: var(--brand);
}
.tree [aria-checked="mixed"] > .tree-row > .tree-check::after {
    content: '';
    position: absolute;
    inset-inline: 3px;
    top: calc(50% - 1px);
    height: 2px;
    background: var(--on-solid);
}
.tree [aria-disabled="true"] > .tree-row > .tree-check { opacity: 0.5; }
}
@layer sedna.paint {
.btn-group { display: inline-flex; align-items: stretch; }
.btn-group > .btn { border-radius: 0; }
.btn-group > :first-child { border-start-start-radius: var(--radius-control); border-end-start-radius: var(--radius-control); }
.btn-group > :last-child  { border-start-end-radius: var(--radius-control);   border-end-end-radius: var(--radius-control); }
.btn-group > * + * { margin-inline-start: -1px; }
.btn-group > .btn:hover,
.btn-group > .btn:focus-visible { position: relative; z-index: 1; }
.split-btn { display: inline-flex; align-items: stretch; }
.split-btn > .btn:first-child { border-start-end-radius: 0; border-end-end-radius: 0; }
.split-btn > .btn:last-child {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    margin-inline-start: -1px;
    padding-inline: var(--space-4);
}
.split-btn > .btn:hover,
.split-btn > .btn:focus-visible { position: relative; z-index: 1; }
.split-btn > .btn--solid + .btn--solid { box-shadow: inset 1px 0 0 var(--surface-strong); }
.btn--icon { padding-inline: 0; width: var(--control-height); }
.btn--icon.btn--sm { width: var(--control-height-sm); }
.btn--icon.btn--lg { width: var(--control-height-lg); }
.btn-bare {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0;
    border: none;
    border-radius: var(--radius-small);
    background: none;
    color: inherit;
    font: inherit;
    text-align: inherit;
    cursor: pointer;
}
.btn-bare i { line-height: 1; }
.btn-bare:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring); }
.btn-bare:disabled { cursor: not-allowed; }
.btn-bare--link { color: var(--accent); }
.btn-bare--link:hover { text-decoration: underline; }
.fab {
    position: fixed;
    inset-block-end: calc(var(--space-8) + var(--safe-block-end));
    inset-block-end: calc(var(--space-8) + anchor-size(--sedna-bottombar block, var(--safe-block-end)));
    inset-inline-end: calc(var(--space-8) + var(--safe-inline-end));
    z-index: 60;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--btn-gap);
    --fab-size: 48px;
    min-height: var(--fab-size);
    padding: 0 var(--space-8);
    background: var(--brand);
    border: 1px solid var(--brand-edge);
    border-radius: var(--radius-pill);
    color: var(--on-solid);
    font-family: inherit;
    font-size: var(--text-5);
    font-weight: 500;
    box-shadow: var(--shadow-float);
    cursor: pointer;
}
.fab i { font-size: var(--text-8); }
.fab:hover { background: var(--brand-hover); }
.fab:focus-visible { outline: none; box-shadow: var(--shadow-float), 0 0 0 3px var(--focus-ring); }
.fab--icon { width: var(--fab-size); padding: 0; }
.fab--sm { --fab-size: 40px; padding-inline: var(--space-7); font-size: var(--text-4); }
.fab--sm i { font-size: var(--text-7); }
.fab--lg { --fab-size: 56px; padding-inline: var(--space-9); }
.fab--lg i { font-size: var(--text-9); }
.fab--icon:is(.fab--sm, .fab--lg) { padding: 0; }
.menu-anchor.fab-dial {
    --panel-placement: block-start;
    position: fixed;
    inset-block-end: calc(var(--space-8) + var(--safe-block-end));
    inset-block-end: calc(var(--space-8) + anchor-size(--sedna-bottombar block, var(--safe-block-end)));
    inset-inline-end: calc(var(--space-8) + var(--safe-inline-end));
    z-index: 60;
}
.fab-dial > .fab { position: static; }
.fab-dial > .fab i { transition: transform var(--motion-fast) ease; }
.fab-dial > .fab[aria-expanded="true"] i { transform: rotate(45deg); }
.fab-dial > .menu {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-3);
    width: max-content;
    min-width: 0;
    margin-block: 0 var(--space-4);
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
}
.fab-dial > .menu > .menu-item {
    width: auto;
    padding: var(--space-4) var(--space-6);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-dropdown);
}
.fab-dial > .menu > .menu-item:hover { background: var(--bg-hover); }
}
@layer sedna.paint {
.carousel {
    --carousel-per-view: 1;
    --carousel-peek: 0px;
    --carousel-gap: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    min-width: 0;
}
.carousel--peek { --carousel-peek: 15%; }
.carousel-track {
    display: flex;
    gap: var(--carousel-gap);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
    border-radius: var(--radius-surface);
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring); }
.carousel-slide {
    flex: 0 0 calc((100% - var(--carousel-peek) - var(--carousel-gap) * (var(--carousel-per-view) - 1)) / var(--carousel-per-view));
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}
.carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
}
.carousel :is([data-carousel-prev], [data-carousel-next])[aria-disabled="true"] {
    color: var(--muted);
    cursor: not-allowed;
}
}
@layer sedna.paint {
.media-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    aspect-ratio: var(--media-ratio, 16 / 9);
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-surface);
}
.media-frame > img,
.media-frame > video,
.media-frame > iframe { max-width: 100%; max-height: 100%; object-fit: contain; border: none; }
.media-frame--square { --media-ratio: 1; }
.media-frame--wide { --media-ratio: 21 / 9; }
.media-frame--cover > img { width: 100%; height: 100%; object-fit: cover; }
:is(.media-frame--transparency, .file-tile-thumb--transparency, .file-thumb--transparency,
    .choice-tile-art--transparency, .lightbox-stage--transparency) > :is(img, svg) {
    background-color: var(--surface-soft);
    background-image: repeating-conic-gradient(var(--border) 0 25%, transparent 0 50%);
    background-size: calc(var(--checker-size) * 2) calc(var(--checker-size) * 2);
}
.media-figure { margin: 0; }
.media-figure > figcaption { margin-top: var(--space-3); color: var(--muted); font-size: var(--text-3); }
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr));
    gap: var(--space-5);
}
.gallery > * { position: relative; display: block; text-decoration: none; }
.gallery { --media-ratio: 1; }
.gallery > a:hover .media-frame,
.gallery > button:hover .media-frame { border-color: var(--border-hover); }
.gallery > *:focus-visible { outline: none; }
.gallery > *:focus-visible .media-frame { box-shadow: 0 0 0 2px var(--focus-ring); }
.gallery--tight {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-1);
    width: min(100%, 320px);
}
.gallery--tight > *,
.gallery--tight .media-frame { border-radius: 0; }
.link-preview {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: stretch;
    max-width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-inner);
    background: var(--surface-here);
    color: inherit;
    text-decoration: none;
    overflow: hidden;
}
.link-preview:hover { border-color: var(--border-strong); text-decoration: none; }
.link-preview:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring); }
.link-preview > img { width: 88px; height: 100%; object-fit: cover; }
.link-preview-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-3);
}
.link-preview-body > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-preview-body > span { color: var(--fg-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.link-preview-body > small { color: var(--muted); font-size: var(--text-2); }
.prose {
    --prose-measure: 72ch;
    color: var(--fg-soft);
    font-size: var(--text-5);
    line-height: 1.65;
    max-width: var(--prose-measure);
}
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose h1, .prose h2, .prose h3, .prose h4 { color: var(--fg); line-height: 1.3; margin: 1.4em 0 0.4em; }
.prose h1 { font-size: 1.5em; }
.prose h2 { font-size: 1.25em; }
.prose h3 { font-size: 1.1em; }
.prose p, .prose ul, .prose ol { margin: 0.8em 0; }
.prose li { margin: 0.3em 0; }
.prose a { color: var(--accent); text-decoration: underline; }
.prose blockquote {
    margin: 1em 0;
    padding: 0.2em 0 0.2em 1em;
    border-inline-start: 3px solid var(--border);
    color: var(--muted);
}
.prose data[value] { color: var(--accent); font-weight: 500; }
.prose .ql-align-center { text-align: center; }
.prose .ql-align-justify { text-align: justify; }
.prose .ql-align-right { text-align: end; }
.prose .ql-direction-rtl { direction: rtl; text-align: inherit; }
.prose .ql-direction-rtl.ql-align-right { text-align: start; }
.prose :is(p, h1, h2, h3, h4, h5, h6, blockquote).ql-indent-1 { padding-inline-start: 3em; }
.prose :is(p, h1, h2, h3, h4, h5, h6, blockquote).ql-indent-2 { padding-inline-start: 6em; }
.prose :is(p, h1, h2, h3, h4, h5, h6, blockquote).ql-indent-3 { padding-inline-start: 9em; }
.prose :is(p, h1, h2, h3, h4, h5, h6, blockquote).ql-indent-4 { padding-inline-start: 12em; }
.prose :is(p, h1, h2, h3, h4, h5, h6, blockquote).ql-indent-5 { padding-inline-start: 15em; }
.prose :is(p, h1, h2, h3, h4, h5, h6, blockquote).ql-indent-6 { padding-inline-start: 18em; }
.prose :is(p, h1, h2, h3, h4, h5, h6, blockquote).ql-indent-7 { padding-inline-start: 21em; }
.prose :is(p, h1, h2, h3, h4, h5, h6, blockquote).ql-indent-8 { padding-inline-start: 24em; }
.prose hr { border: none; border-top: 1px solid var(--border); margin: 2em 0; }
.prose img { max-width: 100%; height: auto; border-radius: var(--radius-inner); }
.prose video { display: block; max-width: 100%; height: auto; margin: 1em 0; border-radius: var(--radius-inner); }
.prose img[data-align="start"] { float: inline-start; margin-block: 0.25em 0.5em; margin-inline: 0 1em; }
.prose img[data-align="end"] { float: inline-end; margin-block: 0.25em 0.5em; margin-inline: 1em 0; }
.prose :is(img, video)[data-align="center"] { display: block; margin-inline: auto; }
.prose video[data-align="start"] { margin-inline: 0 auto; }
.prose video[data-align="end"] { margin-inline: auto 0; }
.prose:has(img[data-align="start"], img[data-align="end"]) { display: flow-root; }
@media (max-width: 560px) {
    .prose img[data-align="start"],
    .prose img[data-align="end"] { float: none; display: block; margin-inline: 0; }
}
.prose table { display: block; overflow-x: auto; max-width: 100%; border-collapse: collapse; }
.prose th, .prose td { padding: var(--space-3) var(--space-5); border: 1px solid var(--border); text-align: start; }
.prose :is(th, td):not(:has(*)) { padding-block: calc(var(--space-3) + var(--cap-gap)); text-box: trim-both cap alphabetic; }
.prose th { background: var(--table-head-bg); color: var(--muted); font-size: 0.9em; }
.redacted {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 1px var(--space-3);
    background: var(--secret-bg);
    border: 1px dashed var(--secret-border);
    border-radius: var(--radius-inner);
    color: var(--redacted);
    font-family: var(--font-mono);
    font-size: var(--text-3);
    user-select: none;
}
.redacted i { font-size: var(--text-4); }
.prose--foreign { overflow-wrap: anywhere; }
.prose--foreign th,
.prose--foreign td { overflow-wrap: normal; }
.prose--foreign pre { white-space: pre-wrap; overflow-x: auto; }
.prose--foreign img,
.prose--foreign svg,
.prose--foreign video,
.prose--foreign canvas,
.prose--foreign iframe,
.prose--foreign embed,
.prose--foreign object { max-width: 100%; }
.prose--foreign svg,
.prose--foreign video,
.prose--foreign canvas { height: auto; }
}
@layer sedna.paint {
.pdf-frame {
    --pdf-height: min(80dvh, 960px);
    display: flex;
    flex-direction: column;
    block-size: var(--pdf-height);
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-surface);
    overflow: hidden;
}
.pdf-frame--flush { border: none; border-radius: 0; }
.pdf-frame--page {
    block-size: auto;
    aspect-ratio: var(--media-ratio, 210 / 297);
}
.pdf-frame-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
    background: var(--bg);
    border-block-end: 1px solid var(--border);
}
.pdf-frame-name {
    flex: 1 1 auto;
    min-inline-size: 0;
    overflow-wrap: anywhere;
    color: var(--fg);
    font-size: var(--text-4);
    font-weight: 600;
    text-box: trim-both cap alphabetic;
    padding-block: var(--cap-gap);
}
.pdf-frame > :is(object, iframe, embed) {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    inline-size: 100%;
    min-block-size: 0;
    border: 0;
    overflow: auto;
}
}
@layer sedna.paint {
.qr {
    --qr-size: 10rem;
    --qr-ink: var(--slate-900);
    --qr-paper: var(--white);
    --qr-ink-safe: var(--slate-900);
    --qr-paper-safe: var(--white);
    --qr-quiet: 4;
    --qr-logo-size: 0.22;
    --qr-modules: 25;
    --qr-logo-modules: 0;
    position: relative;
    display: inline-block;
    flex: none;
    inline-size: var(--qr-size);
    block-size: var(--qr-size);
    vertical-align: middle;
    background: var(--qr-paper);
    border-radius: var(--radius-inner);
}
.qr > svg:not(.qr-logo) {
    --qr-gap: calc(100% * var(--qr-quiet) / (var(--qr-modules) + 2 * var(--qr-quiet)));
    position: absolute;
    inset-block-start: var(--qr-gap);
    inset-inline-start: var(--qr-gap);
    inline-size: calc(100% - 2 * var(--qr-gap));
    block-size: calc(100% - 2 * var(--qr-gap));
    fill: var(--qr-ink);
}
.qr[data-qr-contrast="fallback"] { background: var(--qr-paper-safe); }
.qr[data-qr-contrast="fallback"] > svg:not(.qr-logo) { fill: var(--qr-ink-safe); }
.qr--sm { --qr-size: 6rem; }
.qr--lg { --qr-size: 15rem; }
.qr--brand  { --qr-ink: var(--qr-brand-ink); }
.qr--go     { --qr-ink: var(--green-900); }
.qr--warn   { --qr-ink: var(--amber-900); }
.qr--danger { --qr-ink: var(--crimson-900); }
.qr--info   { --qr-ink: var(--orbit-900); }
.qr--secret { --qr-ink: var(--violet-900); }
.qr--cyan   { --qr-ink: var(--cyan-900); }
.qr--orange { --qr-ink: var(--orange-900); }
.qr--teal   { --qr-ink: var(--teal-900); }
.qr--navy   { --qr-ink: var(--navy-900); }
.qr--orbit  { --qr-ink: var(--orbit-900); }
.qr--coral  { --qr-ink: var(--coral-900); }
.qr-logo {
    position: absolute;
    inset: 0;
    margin: auto;
    display: block;
    inline-size: calc(var(--qr-logo-modules) / (var(--qr-modules) + 2 * var(--qr-quiet)) * 100%);
    block-size: calc(var(--qr-logo-modules) / (var(--qr-modules) + 2 * var(--qr-quiet)) * 100%);
    object-fit: contain;
}
.qr-logo > :is(img, svg) {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
}
.qr-figure {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
}
.qr-caption {
    max-inline-size: 18rem;
    color: var(--muted);
    font-size: var(--text-3);
    text-align: center;
    overflow-wrap: anywhere;
}
}
@layer sedna.paint {
:where([data-drag-item], [data-drop-edge]) { position: relative; }
:where([data-drag-item]) {
    --drag-x: 0px;
    --drag-y: 0px;
    --drag-left: 0px;
    --drag-top: 0px;
    --drag-width: auto;
    --drag-height: auto;
    --drag-slot-size: 0px;
    --drag-slot-column: auto;
    --drag-name: "";
}
:where([data-drag-zone] > [data-drag-item]:not([aria-disabled="true"]):not(:has([data-drag-handle]))) {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
:where([data-drag-handle]) {
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
:where([data-drag-item][aria-disabled="true"] [data-drag-handle]) { cursor: not-allowed; }
.drag-list,
.drag-grid {
    --drop-gap: var(--space-3);
    margin: 0;
    padding: var(--space-2);
    list-style: none;
    border-radius: var(--radius-surface);
}
.drag-list {
    display: flex;
    flex-direction: column;
    gap: var(--drop-gap);
}
.drag-grid {
    --drop-gap: var(--space-4);
    --drag-grid-min: 7.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--drag-grid-min)), 1fr));
    gap: var(--drop-gap);
}
.drag-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-height: var(--control-height-lg);
    padding: var(--space-2) var(--space-5);
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    color: var(--fg);
    font-size: var(--text-4);
}
.drag-item:has(> .drag-handle) { padding-inline-start: var(--space-2); }
.drag-item:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring); }
.drag-item[aria-disabled="true"] {
    background: var(--surface-soft);
    color: var(--muted);
}
.drag-grid > .drag-item {
    flex-direction: column;
    justify-content: center;
    min-height: 6rem;
    padding: var(--space-4);
    text-align: center;
}
.drag-grid > .drag-item > i { font-size: var(--text-8); color: var(--muted); }
.drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: stretch;
    width: var(--control-height-sm);
    min-height: var(--control-height-sm);
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: var(--radius-small);
    color: var(--muted);
    font-size: var(--text-6);
    line-height: 1;
}
.drag-handle:hover { background: var(--bg-hover); color: var(--fg); }
.drag-handle:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring); }
[aria-disabled="true"] > .drag-handle { color: var(--muted); background: none; }
.drag-board {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(min(15rem, 80%), 1fr);
    gap: var(--space-5);
    overflow-x: auto;
    padding-block-end: var(--space-2);
}
.drag-lane {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-4);
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-panel);
}
.drag-lane-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin: 0;
    padding-inline: var(--space-2);
    color: var(--fg);
    font-size: var(--text-4);
    font-weight: 600;
}
.drag-lane > .drag-list { flex: 1; }
.drag-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    min-height: var(--control-height-lg);
    padding: var(--space-4);
    border: 1px dashed var(--border);
    border-radius: var(--radius-control);
    color: var(--muted);
    font-size: var(--text-3);
    text-align: center;
}
[data-drag-zone]:has(> [data-drag-item]) > .drag-empty { display: none; }
[data-drop-state="valid"][data-drop-over] > .drag-empty {
    border-color: var(--brand);
    color: var(--brand-text);
}
[data-dragging="pointer"] {
    translate: var(--drag-x) var(--drag-y);
    z-index: 3;
    box-shadow: var(--shadow-float);
    cursor: grabbing;
    opacity: 0.94;
}
[data-dragging="pointer"] [data-drag-handle] { cursor: grabbing; }
[data-dragging="pointer"]:popover-open {
    position: fixed;
    inset: auto;
    left: var(--drag-left);
    top: var(--drag-top);
    width: var(--drag-width);
    height: var(--drag-height);
    margin: 0;
    box-sizing: border-box;
}
[data-drag-slot="start"] { margin-block-start: var(--drag-slot-size); }
[data-drag-slot="end"]   { margin-block-end: var(--drag-slot-size); }
[data-drag-axis="x"] > [data-drag-slot="start"] { margin-block-start: 0; margin-inline-start: var(--drag-slot-size); }
[data-drag-axis="x"] > [data-drag-slot="end"]   { margin-block-end: 0; margin-inline-end: var(--drag-slot-size); }
[data-drag-slot="column"] { grid-column-start: var(--drag-slot-column); }
:where([data-dragging="pointer"]:popover-open) {
    padding: 0;
    border: 0;
    color: inherit;
    background-color: transparent;
    overflow: visible;
}
[data-dragging="keyboard"] {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    box-shadow: var(--shadow-dropdown);
}
[data-drag-carried] { opacity: 0.45; }
[data-drag-count]::after {
    content: attr(data-drag-count);
    position: absolute;
    inset-block-start: calc(var(--space-4) * -1);
    inset-inline-end: calc(var(--space-4) * -1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding-inline: var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: var(--brand);
    color: var(--on-solid);
    box-shadow: var(--shadow-dropdown);
    font-size: var(--text-2);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    pointer-events: none;
}
[data-drag-copy] {
    outline: 2px dashed var(--brand);
    outline-offset: 2px;
}
[data-drag-carried][data-drag-copy] { opacity: 1; }
[data-dragging="pointer"][data-drag-copy] {
    translate: none;
    box-shadow: none;
    opacity: 1;
    cursor: copy;
}
[data-dragging="pointer"][data-drag-copy] [data-drag-handle] { cursor: copy; }
[data-dragging="pointer"][data-drag-copy]::before {
    content: var(--drag-name);
    position: absolute;
    inset: 0;
    z-index: 1;
    translate: var(--drag-x) var(--drag-y);
    box-sizing: border-box;
    align-content: center;
    padding: var(--space-2) var(--space-4);
    overflow: hidden;
    background: var(--card-bg);
    border: 1px solid var(--brand);
    border-radius: var(--radius-control);
    box-shadow: var(--shadow-float);
    color: var(--fg);
    font-size: var(--text-4);
    font-weight: 600;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
}
[data-dragging="pointer"][data-drag-copy][data-drag-count]::after {
    z-index: 2;
    translate: var(--drag-x) var(--drag-y);
}
[data-drop-state] {
    outline: 2px dashed var(--border-strong);
    outline-offset: 2px;
}
[data-drop-state="valid"][data-drop-over] {
    outline-style: solid;
    outline-color: var(--brand);
    background-color: var(--brand-tint);
}
[data-drop-state="invalid"] {
    outline-style: dotted;
    outline-color: var(--border);
}
[data-drop-state="invalid"] > [data-drag-item]:not([data-dragging], [data-drag-carried]) { opacity: 0.55; }
[data-drop-state="invalid"][data-drop-over] {
    outline-color: var(--danger-border-strong);
    background-color: var(--danger-bg);
    cursor: not-allowed;
}
[data-drop-edge]::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    height: 0;
    border-top: 3px solid var(--brand);
    border-radius: var(--radius-pill);
    pointer-events: none;
}
[data-drop-edge="before"]::before { top: calc(var(--drop-gap, 0px) / -2 - 1.5px); }
[data-drop-edge="after"]::before  { bottom: calc(var(--drop-gap, 0px) / -2 - 1.5px); }
:is([data-drag-axis="x"], [data-drag-axis="grid"]) > [data-drop-edge]::before {
    inset-block: 0;
    inset-inline: auto;
    width: 0;
    height: auto;
    border-top: 0;
    border-inline-start: 3px solid var(--brand);
}
:is([data-drag-axis="x"], [data-drag-axis="grid"]) > [data-drop-edge="before"]::before {
    top: 0;
    inset-inline-start: calc(var(--drop-gap, 0px) / -2 - 1.5px);
}
:is([data-drag-axis="x"], [data-drag-axis="grid"]) > [data-drop-edge="after"]::before {
    bottom: 0;
    inset-inline-end: calc(var(--drop-gap, 0px) / -2 - 1.5px);
}
}
@layer sedna.paint {
.drawer-scrim {
    position: fixed;
    inset: 0;
    z-index: 480;
    background: var(--backdrop);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--motion-mid) ease, visibility var(--motion-mid);
}
.drawer {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    z-index: 490;
    display: flex;
    flex-direction: column;
    --drawer-width: 420px;
    width: min(var(--drawer-width), 100vw);
    padding-block-end: var(--safe-block-end);
    --surface-here: var(--bg-elevated);
    --muted-here: var(--muted);
    background: var(--bg-elevated);
    border-inline-start: 1px solid var(--border);
    box-shadow: var(--shadow-modal);
    visibility: hidden;
    transform: translateX(100%);
    transition: transform var(--motion-mid) ease, visibility var(--motion-mid);
}
.drawer--start {
    inset-inline-end: auto;
    inset-inline-start: 0;
    border-inline-start: none;
    border-inline-end: 1px solid var(--border);
    transform: translateX(-100%);
}
.sheet {
    inset-block: auto 0;
    inset-inline: 0;
    --drawer-width: 480px;
    width: min(var(--drawer-width), 100vw);
    margin-inline: auto;
    max-height: 85dvh;
    border: 1px solid var(--border);
    border-bottom: none;
    border-start-start-radius: var(--radius-panel);
    border-start-end-radius: var(--radius-panel);
    transform: translateY(100%);
}
.drawer--open { visibility: visible; transform: none; }
.drawer--open + .drawer-scrim,
.drawer-scrim--open { opacity: 1; visibility: visible; }
dialog.drawer {
    margin: 0;
    height: auto;
    inset-inline-start: auto;
    inset-inline-end: 0;
    max-width: none;
    max-height: none;
    padding: 0 0 var(--safe-block-end);
    border: none;
    border-inline-start: 1px solid var(--border);
    color: var(--fg);
    --dialog-backdrop: var(--backdrop);
    transition: transform var(--motion-mid) ease, display var(--motion-mid) allow-discrete, overlay var(--motion-mid) allow-discrete;
}
dialog.drawer:not([open]) { display: none; }
dialog.drawer.drawer--start {
    inset-inline-start: 0;
    inset-inline-end: auto;
    border-inline-start: none;
    border-inline-end: 1px solid var(--border);
}
dialog.sheet {
    inset-inline: 0;
    height: fit-content;
    max-height: 85dvh;
    margin-inline: auto;
    border: 1px solid var(--border);
    border-bottom: none;
}
dialog.drawer::backdrop {
    background-color: transparent;
    transition: background-color var(--motion-mid) ease, display var(--motion-mid) allow-discrete, overlay var(--motion-mid) allow-discrete;
}
dialog.drawer[open]::backdrop { background-color: var(--dialog-backdrop); }
@starting-style {
    dialog.drawer[open]::backdrop { background-color: transparent; }
}
.drawer {
    --sedna-exit-duration: var(--motion-mid);
    --sedna-exit-easing: ease;
}
.drawer[data-sedna-closing="modal"] {
    box-shadow: var(--shadow-modal), 0 0 0 100vmax var(--dialog-backdrop);
    animation: sedna-dim-out var(--sedna-exit-duration) var(--sedna-exit-easing) forwards;
}
@keyframes sedna-dim-out {
    to { box-shadow: var(--shadow-modal), 0 0 0 100vmax transparent; }
}
dialog.drawer[open] { visibility: visible; transform: none; }
@starting-style {
    dialog.drawer[open] { transform: translateX(100%); }
    dialog.drawer.drawer--start[open],
    [dir="rtl"] dialog.drawer[open] { transform: translateX(-100%); }
    dialog.sheet[open] { transform: translateY(100%); }
}
.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-shrink: 0;
    padding: var(--space-7) var(--space-8);
    border-bottom: 1px solid var(--border);
}
.drawer-header h3 { margin: 0; font-size: var(--text-6); font-weight: 600; }
.drawer-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-7) var(--space-8); }
:where(.drawer-body) > :is(p, ul, ol, dl, h1, h2, h3, h4, h5, h6):where(:first-child) { margin-block-start: 0; }
:where(.drawer-body) > :is(p, ul, ol, dl, h1, h2, h3, h4, h5, h6):where(:last-child) { margin-block-end: 0; }
.drawer-body--flush { padding: 0; }
.drawer-body--flush > .list > li > .list-row,
.drawer-body--flush > .list > .sticky-group-head { padding-inline: var(--space-8); }
.drawer-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-4);
    flex-shrink: 0;
    padding: var(--space-7) var(--space-8);
    border-top: 1px solid var(--border);
}
.sheet-handle {
    position: absolute;
    inset-block-start: var(--space-3);
    inset-inline: 0;
    width: 36px;
    height: 4px;
    margin-inline: auto;
    background: var(--border-strong);
    border-radius: var(--radius-pill);
}
.sheet-handle::before {
    content: '';
    position: absolute;
    inset: -10px -24px;
}
dialog.sheet[data-sheet] > .sheet-handle,
dialog.sheet[data-sheet] > .drawer-header { touch-action: none; user-select: none; }
dialog.sheet[data-sheet] > .drawer-header { cursor: grab; }
dialog.sheet[data-sheet].sheet--dragging > .drawer-header { cursor: grabbing; }
dialog.sheet.sheet--dragging { transition: none; }
dialog.sheet[data-sheet-snap] { --sheet-rest: 0%; height: 85dvh; }
dialog.sheet[data-sheet-snap][open] { transform: translateY(var(--sheet-rest)); }
@starting-style {
    dialog.sheet[data-sheet-snap][open] { transform: translateY(100%); }
}
button.sheet-handle {
    padding: 0;
    border: 0;
    cursor: pointer;
}
button.sheet-handle:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring); }
@media (min-width: 900px) {
    .layout > dialog.drawer.drawer--dock {
        position: relative;
        inset: auto;
        z-index: auto;
        flex: none;
        width: var(--drawer-width);
        max-width: 50%;
        height: auto;
        box-shadow: none;
        transform: none;
        transition: none;
    }
}
}
@layer sedna.paint {
.file-icon {
    --file-icon-size: 36px;
    --file-icon-ink: var(--muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--file-icon-size);
    height: var(--file-icon-size);
    border-radius: var(--radius-inner);
    background: var(--surface-strong);
    color: var(--file-icon-ink);
    overflow: hidden;
    line-height: 1;
}
.file-icon > i { font-size: var(--text-8); }
.file-icon > img { width: 100%; height: 100%; object-fit: cover; }
.file-icon--sm { --file-icon-size: 28px; }
.file-icon--sm > i { font-size: var(--text-6); }
.file-icon--lg { --file-icon-size: 56px; }
.file-icon--lg > i { font-size: var(--text-10); }
.file-icon--pdf    { --file-icon-ink: var(--viz-1); }
.file-icon--image  { --file-icon-ink: var(--viz-2); }
.file-icon--slides { --file-icon-ink: var(--viz-3); }
.file-icon--sheet  { --file-icon-ink: var(--viz-4); }
.file-icon--media  { --file-icon-ink: var(--viz-5); }
.file-icon--doc    { --file-icon-ink: var(--viz-6); }
:is(.file-name, .file-item-name, .form-file-name) {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
:is(.file-name, .file-item-name, .form-file-name):has(> .file-name-start) {
    display: flex;
    overflow: visible;
}
.file-name-start { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.file-name-end { flex-shrink: 0; }
:is(.file-name, .file-item-name, .form-file-name).file-name--wrap {
    display: block;
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
}
.file-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--space-3);
    min-width: 0;
    color: var(--muted);
    font-size: var(--text-3);
    font-variant-numeric: tabular-nums;
}
.file-meta > * + *::before {
    content: '·';
    margin-inline-end: var(--space-3);
}
.file-cell {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    min-width: 0;
}
a.file-cell { color: inherit; text-decoration: none; }
a.file-cell:hover .file-name { text-decoration: underline; }
.table td:has(> .file-cell) { width: 100%; max-width: 0; min-width: 10rem; }
.file-thumb {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-inner);
    overflow: hidden;
    border: 1px solid var(--border);
}
.file-thumb > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.file-thumb > .chip-dismiss {
    position: absolute;
    top: var(--space-1);
    inset-inline-end: var(--space-1);
    background: var(--bg-elevated);
}
.file-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(136px, 100%), 1fr));
    gap: var(--space-6);
    margin: 0;
    padding: 0;
    list-style: none;
}
.file-grid--wide { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.file-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-surface);
    background: var(--surface-here, var(--bg));
    transition: border-color var(--motion-fast), background var(--motion-fast);
}
.file-tile:hover { border-color: var(--border-hover); }
.file-tile:has(.file-tile-check :checked) {
    border-color: var(--selected);
    box-shadow: inset 0 0 0 1px var(--selected);
    background-image: linear-gradient(var(--brand-tint), var(--brand-tint));
}
.file-tile:has(.file-tile-open:focus-visible),
.file-tile:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring); }
.file-tile-thumb {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: var(--media-ratio, 1);
    overflow: hidden;
    border-radius: var(--radius-inner);
    background: var(--surface-soft);
}
.file-tile-thumb > img { width: 100%; height: 100%; object-fit: cover; }
.file-tile-thumb > .file-icon { --file-icon-size: 56px; background: transparent; }
.file-tile-thumb > .file-icon > i { font-size: var(--text-11); }
.file-grid--wide { --media-ratio: 16 / 9; }
.file-tile-thumb--contain > img { object-fit: contain; }
.file-tile-thumb.file-tile-thumb--natural:has(> img) { aspect-ratio: auto; }
.file-tile-thumb--natural > img { height: auto; object-fit: contain; }
.file-tile-open {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
    padding: 0;
    border: none;
    background: none;
    color: var(--fg);
    font: inherit;
    font-size: var(--text-3);
    font-weight: 500;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}
.file-tile-open:focus-visible { outline: none; }
.file-tile-open::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.file-tile-open:hover { text-decoration: none; }
.file-tile-check,
.file-tile-menu {
    position: absolute;
    top: var(--space-5);
    z-index: 1;
    opacity: 0;
    transition: opacity var(--motion-fast);
}
.file-tile-check { inset-inline-start: var(--space-5); }
.file-tile-menu { inset-inline-end: var(--space-5); }
.file-tile-menu.btn { background: var(--bg-elevated); }
.file-tile:hover :is(.file-tile-check, .file-tile-menu),
.file-tile:focus-within :is(.file-tile-check, .file-tile-menu),
.file-tile-check:has(:checked),
.file-grid:has(.file-tile-check :checked) .file-tile-check { opacity: 1; }
@media (hover: none) {
    .file-tile-check,
    .file-tile-menu { opacity: 1; }
}
.file-tile-menu--always { opacity: 1; }
.file-tile > .file-meta { font-size: var(--text-2); }
.file-tile-badge {
    position: absolute;
    inset-block-end: var(--space-2);
    inset-inline-end: var(--space-2);
    padding: 0 var(--space-3);
    border-radius: var(--radius-inner);
    background: var(--media-scrim);
    color: var(--on-solid);
    font-size: var(--text-2);
    font-weight: 600;
    line-height: round(1.6em, 2px);
    font-variant-numeric: tabular-nums;
}
.file-tile-play {
    position: absolute;
    inset: 0;
    margin: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--media-scrim);
    color: var(--on-solid);
    font-size: var(--text-8);
}
}
@layer sedna.paint {
dialog.lightbox {
    --lightbox-bar: 56px;
    inset: 0;
    margin: 0;
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--on-solid);
    overflow: hidden;
}
dialog.lightbox::backdrop {
    background: var(--backdrop);
    backdrop-filter: blur(4px);
}
dialog.lightbox::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--backdrop);
}
.lightbox-stage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--lightbox-bar) + var(--safe-block-start)) calc(var(--space-11) + var(--safe-inline-end)) calc(var(--lightbox-bar) + var(--safe-block-end)) calc(var(--space-11) + var(--safe-inline-start));
}
.lightbox-stage > img,
.lightbox-stage > video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--radius-surface);
    box-shadow: var(--shadow-float);
}
.lightbox-frame {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: var(--radius-surface);
    background: var(--bg-elevated);
    box-shadow: var(--shadow-float);
}
.lightbox-head {
    position: absolute;
    top: var(--safe-block-start);
    inset-inline: var(--safe-inline-start) var(--safe-inline-end);
    display: flex;
    align-items: center;
    gap: var(--space-5);
    min-height: var(--lightbox-bar);
    padding: var(--space-4) var(--space-6);
    z-index: 1;
}
.lightbox-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-5);
}
.lightbox-meta {
    font-size: var(--text-3);
    opacity: 0.75;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.lightbox-actions { display: flex; align-items: center; gap: var(--space-2); }
.lightbox-actions > .btn,
.lightbox-actions > form > .btn { color: var(--on-solid); }
.lightbox-actions > .btn:hover,
.lightbox-actions > form > .btn:hover { color: var(--on-solid); background: var(--backdrop); border-color: transparent; }
.lightbox-prev,
.lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--backdrop);
    color: var(--on-solid);
    font-size: var(--text-8);
    cursor: pointer;
}
.lightbox-prev { inset-inline-start: calc(var(--space-4) + var(--safe-inline-start)); }
.lightbox-next { inset-inline-end: calc(var(--space-4) + var(--safe-inline-end)); }
.lightbox-prev:hover, .lightbox-next:hover { background: var(--bg-elevated); color: var(--fg); }
.lightbox-prev:focus-visible, .lightbox-next:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.lightbox-prev:disabled, .lightbox-next:disabled { opacity: 0.35; cursor: not-allowed; }
.lightbox-caption {
    position: absolute;
    bottom: var(--safe-block-end);
    inset-inline: var(--safe-inline-start) var(--safe-inline-end);
    margin: 0;
    padding: var(--space-4) var(--space-8);
    min-height: var(--lightbox-bar);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: var(--text-3);
    opacity: 0.85;
}
.media-open {
    display: block;
    padding: 0;
    border: none;
    border-radius: var(--radius-surface);
    background: none;
    cursor: zoom-in;
    overflow: hidden;
}
.media-open > img { display: block; }
.media-open:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
}
@layer sedna.paint {
.media-player {
    container: sedna-media-player / inline-size;
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-surface);
    background: var(--surface-here, var(--bg));
    overflow: hidden;
}
.media-player--flush { border: none; border-radius: 0; }
.media-player > video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--media-ratio, 16 / 9);
    object-fit: contain;
    background: var(--media-bg);
}
.media-player-body {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    min-width: 0;
    padding: var(--space-5) var(--space-6);
}
.media-player-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.media-player-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--fg);
    font-size: var(--text-5);
    font-weight: 600;
}
.media-player-actions { display: flex; align-items: center; gap: var(--space-1); flex-shrink: 0; }
.media-player-text > audio {
    display: block;
    width: 100%;
    height: var(--control-height);
    margin-top: var(--space-3);
}
.media-player-text > audio::-webkit-media-controls-enclosure {
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--surface-here, var(--bg));
}
.media-player-text > audio::-webkit-media-controls-panel { background: transparent; }
@container sedna-media-player (width < 560px) {
    .media-player-body { flex-wrap: wrap; }
    .media-player-body > .media-player-actions { margin-inline-start: auto; }
}
.media-transcript { border-top: 1px solid var(--divider); }
.media-transcript > summary {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
    color: var(--fg-soft);
    font-size: var(--text-3);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.media-transcript > summary::-webkit-details-marker { display: none; }
.media-transcript > summary:hover { background: var(--bg-hover); }
.media-transcript > summary:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus-ring); }
.media-transcript > summary::after {
    content: '';
    margin-inline-start: auto;
    width: 0;
    height: 0;
    border-inline: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: 0.5;
    transition: transform var(--motion-fast) ease;
}
.media-transcript[open] > summary::after { transform: rotate(-180deg); }
.media-transcript > ol {
    margin: 0;
    padding: 0 0 var(--space-4);
    list-style: none;
    max-height: 16rem;
    overflow-y: auto;
}
.media-transcript li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: var(--space-5);
    padding: var(--space-2) var(--space-6);
    color: var(--fg-soft);
    font-size: var(--text-4);
    line-height: 1.5;
}
.media-transcript li[aria-current="true"] {
    background: var(--brand-tint);
    box-shadow: inset 3px 0 0 var(--selected);
    color: var(--fg);
}
.media-transcript-time {
    padding: 0;
    border: none;
    background: none;
    color: var(--brand-text);
    font-family: var(--font-mono);
    font-size: var(--text-3);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}
.media-transcript-time:hover { text-decoration: underline; }
.media-transcript-time:focus-visible { outline: none; border-radius: var(--radius-small); box-shadow: 0 0 0 2px var(--focus-ring); }
.media-track-num {
    flex-shrink: 0;
    width: 20px;
    color: var(--muted);
    font-size: var(--text-3);
    font-variant-numeric: tabular-nums;
    text-align: center;
}
.media-track-num > i { font-size: var(--text-6); }
[aria-current="true"] > .media-track-num { color: var(--brand-text); }
.audio-wave {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    max-width: 100%;
}
.audio-wave > .btn { flex-shrink: 0; border-radius: 50%; }
.audio-wave-bars {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex: 0 1 auto;
    min-width: 0;
    height: 28px;
    overflow: hidden;
}
.audio-wave-bars > i {
    --h: 30%;
    flex: none;
    width: 3px;
    height: var(--h);
    min-height: 3px;
    border-radius: var(--radius-pill);
    background: var(--muted);
    opacity: 0.6;
}
.audio-wave-bars > .audio-wave-heard { background: var(--brand); opacity: 1; }
.audio-wave-time {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: var(--text-3);
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
}
@layer sedna.paint {
.palette {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    --surface-here: var(--bg-elevated);
    --muted-here: var(--muted);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-pop);
    color: var(--fg);
}
dialog.palette {
    width: min(560px, calc(100vw - 32px));
    max-height: 60dvh;
    margin: 12dvh auto auto;
    --dialog-backdrop: var(--backdrop);
}
dialog.palette:not([open]) { display: none; }
dialog.palette::backdrop { background: var(--dialog-backdrop); backdrop-filter: blur(2px); }
.palette-input {
    flex-shrink: 0;
    width: 100%;
    padding: var(--space-7) var(--space-7);
    background: none;
    border: none;
    border-bottom: 1px solid var(--border);
    color: var(--fg);
    font-family: inherit;
    font-size: var(--text-6);
}
.palette-input:focus { outline: none; }
.palette-input::placeholder { color: var(--placeholder); }
.palette-list { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-3); margin: 0; list-style: none; }
.palette-item {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    width: 100%;
    padding: var(--space-4) var(--space-5);
    background: none;
    border: none;
    border-radius: var(--radius-inner);
    color: var(--fg-soft);
    font-family: inherit;
    font-size: var(--text-4);
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}
.palette-item i { font-size: var(--text-7); color: var(--muted); flex-shrink: 0; }
.palette-item-note { margin-inline-start: auto; color: var(--muted); font-size: var(--text-2); flex-shrink: 0; }
.palette-item[aria-selected="true"] { background: var(--brand-tint); color: var(--brand-text); }
.palette-item[aria-selected="true"] i { color: var(--brand-text); }
.palette-item:hover { background: var(--bg-hover); color: var(--fg); }
.palette-group {
    padding: var(--space-5) var(--space-5) var(--space-2);
    color: var(--muted);
    font-size: var(--text-1);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.palette-empty { padding: var(--space-9) var(--space-7); color: var(--muted); font-size: var(--text-4); text-align: center; }
.palette-path {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-5) 0;
}
.palette-trail { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }
.palette-crumb {
    display: inline-block;
    padding: var(--space-1) var(--space-4);
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--fg-soft);
    font-size: var(--text-2);
    line-height: round(1.5em, 2px);
}
.palette-crumb:not(:has(> *)) { text-box: trim-both cap alphabetic; padding-block: calc(var(--space-1) + var(--cap-gap)); }
.palette-separator { height: 0; margin: var(--space-3) var(--space-5); border-top: 1px solid var(--border); }
.palette-loading {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-4) var(--space-5);
    color: var(--muted);
    font-size: var(--text-4);
}
.palette-footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-4) var(--space-7);
    border-top: 1px solid var(--border);
    background: var(--surface-soft);
    color: var(--muted);
    font-size: var(--text-2);
}
.spotlight-hole {
    position: absolute;
    z-index: 510;
    border-radius: var(--radius-surface);
    pointer-events: none;
    box-shadow: 0 0 0 100vmax var(--spotlight-dim);
    transition:
        top var(--motion-slow) ease,
        left var(--motion-slow) ease,
        width var(--motion-slow) ease,
        height var(--motion-slow) ease;
}
.spotlight-ring { box-shadow: 0 0 0 100vmax var(--spotlight-dim), 0 0 0 2px var(--selected); }
.spotlight-tip {
    position: absolute;
    z-index: 510;
    max-width: 300px;
    padding: var(--space-6) var(--space-7);
    --surface-here: var(--bg-elevated);
    --muted-here: var(--muted);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-surface);
    box-shadow: var(--shadow-pop);
    color: var(--fg-soft);
    font-size: var(--text-4);
}
.spotlight-tip-title { display: block; color: var(--fg); font-weight: 600; margin-bottom: var(--space-2); }
.spotlight-tip-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-5); }
.spotlight-step { color: var(--muted); font-size: var(--text-2); font-variant-numeric: tabular-nums; }
.spotlight-tip:has(.spotlight-tip-head) { padding: 0; }
.spotlight-tip-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    padding: var(--space-6) var(--space-7) 0;
}
.spotlight-tip-body { padding: var(--space-4) var(--space-7) var(--space-6); line-height: 1.55; }
.spotlight-tip-body strong { color: var(--fg); }
.spotlight-tip:has(.spotlight-tip-head) .spotlight-tip-actions {
    margin-top: 0;
    padding: var(--space-5) var(--space-7);
    border-top: 1px solid var(--border);
}
.spotlight-tip-exit {
    flex-shrink: 0;
    padding: var(--space-1) var(--space-3);
    background: none;
    border: none;
    border-radius: var(--radius-small);
    color: var(--muted);
    font-family: inherit;
    font-size: var(--text-2);
    cursor: pointer;
}
.spotlight-tip-exit:hover { background: var(--bg-hover); color: var(--fg); }
.spotlight-tip-do {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-5);
    background: var(--warn-bg);
    border: 1px solid var(--warn-border);
    border-radius: var(--radius-pill);
    color: var(--warn-fg);
    font-size: var(--text-2);
}
.spotlight-tip-do i { animation: sedna-pulse var(--pulse-duration) ease-in-out infinite; }
.spotlight-hole:popover-open,
.spotlight-tip:popover-open {
    position: fixed;
    inset: auto;
    margin: 0;
    overflow: visible;
}
.spotlight-hole:popover-open { padding: 0; border: 0; background: none; }
body.spotlight-lock :is(button, a, input, select, textarea, label) { pointer-events: none; }
body.spotlight-lock :is(.spotlight-tip, .spotlight-allowed),
body.spotlight-lock :is(.spotlight-tip, .spotlight-allowed) :is(button, a, input, select, textarea, label) {
    pointer-events: auto;
}
body.spotlight-lock #components-reconnect-modal,
body.spotlight-lock #components-reconnect-modal :is(button, a) { pointer-events: auto; }
body.spotlight-lock .spotlight-allowed [data-spotlight-block],
body.spotlight-lock .spotlight-allowed [data-spotlight-block] :is(button, a, input, select, textarea, label) {
    pointer-events: none;
}
.spotlight-step { text-box: trim-both cap alphabetic; padding-block: var(--cap-gap); }
}
@layer sedna.paint {
.app-switcher {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
    inline-size: 17rem;
    max-inline-size: 100%;
    margin: 0;
    padding: 0;
}
.popover:has(> .app-switcher) {
    position-area: block-end span-inline-start;
    position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline;
    margin-block-start: var(--topbar-panel-gap);
    margin-inline-end: var(--topbar-panel-gap);
}
@container style(--panel-placement: block-start) {
    .popover:has(> .app-switcher) {
        position-area: block-start span-inline-start;
        align-self: end;
        margin-block: 0 var(--topbar-panel-gap);
    }
}
@container style(--panel-placement: inline-end) {
    .popover:has(> .app-switcher) {
        position-area: inline-end span-block-end;
        justify-self: start;
        align-self: start;
        margin-block: 0;
        margin-inline: var(--topbar-panel-gap) 0;
    }
}
@container style(--panel-placement: inline-start) {
    .popover:has(> .app-switcher) {
        position-area: inline-start span-block-end;
        justify-self: end;
        align-self: start;
        margin-block: 0;
        margin-inline: 0 var(--topbar-panel-gap);
    }
}
.app-switcher-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-5) var(--space-2);
    border-radius: var(--radius-control);
    color: var(--fg-soft);
    font-size: var(--text-5);
    line-height: round(1.4em, 2px);
    text-align: center;
    text-decoration: none;
    overflow-wrap: anywhere;
}
.app-switcher-item:hover { background: var(--bg-hover); color: var(--fg); text-decoration: none; }
.app-switcher-item:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring); }
.app-switcher-item[aria-current]:not([aria-current="false"]) { background: var(--brand-tint); color: var(--brand-text); }
.app-switcher-item > :not(.app-switcher-icon) {
    text-box: trim-both cap alphabetic;
    padding-block: var(--cap-gap) 0;
}
.app-switcher--icons { grid-template-columns: repeat(3, max-content); inline-size: auto; }
.app-switcher--icons .app-switcher-item { padding: var(--space-3); }
.app-switcher--icons .app-switcher-item > :not(.app-switcher-icon) {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.app-switcher-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    inline-size: var(--control-height-lg);
    block-size: var(--control-height-lg);
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-surface);
    color: var(--brand-text);
    font-size: var(--text-9);
}
}
@layer sedna.paint {
.popover {
    inset: auto;
    margin: 0;
    position: fixed;
    position-area: block-end span-inline-end;
    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
    margin-block-start: var(--space-3);
    z-index: 550;
    width: max-content;
    max-width: min(320px, calc(100vw - 32px));
    padding: var(--space-6) var(--space-7);
    --surface-here: var(--bg-elevated);
    --muted-here: var(--muted);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-surface);
    box-shadow: var(--shadow-pop);
    color: var(--fg-soft);
    font-size: var(--text-4);
    line-height: 1.6;
    font-weight: 400;
    letter-spacing: normal;
    text-align: start;
    text-transform: none;
    white-space: normal;
}
@position-try --sedna-popover-below {
    position-area: block-end span-inline-end;
    justify-self: start;
    align-self: start;
    margin: var(--space-3) 0 0;
}
@position-try --sedna-popover-above {
    position-area: block-start span-inline-end;
    justify-self: start;
    align-self: end;
    margin: 0 0 var(--space-3);
}
@container style(--panel-placement: block-start) {
    .popover {
        position-area: block-start span-inline-end;
        align-self: end;
        margin-block: 0 var(--space-3);
    }
}
@container style(--panel-placement: inline-end) {
    .popover {
        position-area: inline-end span-block-end;
        justify-self: start;
        align-self: start;
        margin-block: 0;
        margin-inline: var(--space-3) 0;
        position-try-fallbacks: flip-inline, flip-block, flip-inline flip-block,
            --sedna-popover-below, --sedna-popover-below flip-inline, --sedna-popover-above, --sedna-popover-above flip-inline;
    }
}
@container style(--panel-placement: inline-start) {
    .popover {
        position-area: inline-start span-block-end;
        justify-self: end;
        align-self: start;
        margin-block: 0;
        margin-inline: 0 var(--space-3);
        position-try-fallbacks: flip-inline, flip-block, flip-inline flip-block,
            --sedna-popover-below, --sedna-popover-below flip-inline, --sedna-popover-above, --sedna-popover-above flip-inline;
    }
}
.popover > :first-child { margin-top: 0; }
.popover > :last-child { margin-bottom: 0; }
.popover-title {
    display: block;
    margin-bottom: var(--space-3);
    color: var(--fg);
    font-size: var(--text-4);
    font-weight: 600;
}
.popover-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-3);
    margin-block-start: var(--space-6);
}
.popover--flush { padding: 0; overflow: hidden; }
.popover--flush > .popover-title {
    margin-bottom: 0;
    padding: var(--space-6) var(--space-7) var(--space-3);
}
.popover--flush > .table tr:nth-last-child(1 of :where(:not(:empty))) > td { border-bottom: none; }
:where([data-popover][data-popover-hover]) { -webkit-touch-callout: none; }
}
@layer sedna.paint {
.selection-toolbar {
    inset: auto;
    margin: 0;
    position: fixed;
    z-index: 550;
    align-items: center;
    gap: var(--space-1);
    max-inline-size: calc(100vw - 16px);
    padding: var(--space-1);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-surface);
    box-shadow: var(--shadow-dropdown);
    color: var(--fg);
}
.selection-toolbar:popover-open { display: flex; }
.selection-toolbar > .btn { flex-shrink: 0; }
.selection-toolbar-sep { flex: none; inline-size: 1px; block-size: 16px; margin-inline: var(--space-1); background: var(--border); }
}
@layer sedna.paint {
.text-shimmer,
.reasoning[data-state="running"] .reasoning-label {
    background: linear-gradient(90deg, var(--muted) 0 38%, var(--fg) 50%, var(--muted) 62% 100%) 0 0 / 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: text-shimmer var(--shimmer-duration) linear infinite;
}
@keyframes text-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.agent-status {
    --status-h: 32px;
    --status-orb: 20px;
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    block-size: var(--status-h);
    max-inline-size: 100%;
    padding-inline: calc((var(--status-h) - var(--status-orb)) / 2 - 1px) var(--space-7);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface-raised-1);
    color: var(--fg-soft);
    font-size: var(--text-4);
    line-height: 1;
    white-space: nowrap;
}
.agent-status > .orb { --orb-size: var(--status-orb); }
.agent-status-label { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; text-box: trim-both cap alphabetic; padding-block: calc(var(--space-1) + var(--cap-gap)); }
.agent-status-time { color: var(--muted); font-size: var(--text-3); font-variant-numeric: tabular-nums; text-box: trim-both cap alphabetic; padding-block: var(--cap-gap); }
.agent-status:has(> .btn:last-child) { padding-inline-end: calc((var(--status-h) - var(--control-height-sm)) / 2 - 1px); }
.agent-status > .btn { border-radius: 50%; }
.agent-status--sm { --status-h: 24px; --status-orb: 14px; gap: var(--space-3); font-size: var(--text-3); }
.agent-status--lg { --status-h: 44px; --status-orb: 32px; gap: var(--space-6); font-size: var(--text-6); }
.agent-status--xl { --status-h: 64px; --status-orb: 48px; gap: var(--space-7); padding-inline-end: var(--space-10); font-size: var(--text-8); }
.agent-status--warn { border-color: var(--warn-border); background: var(--warn-bg); color: var(--warn-fg); }
.badge-ai {
    background: var(--info-bg);
    border-color: var(--info-border);
    color: var(--info-fg);
}
button.badge-ai {
    font-family: inherit;
    cursor: pointer;
    transition: border-color var(--motion-fast), background var(--motion-fast);
}
button.badge-ai:hover { background: var(--info-bg-hover); border-color: var(--info-fg); }
button.badge-ai:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring); }
.badge-ai--icon {
    --badge-ai-pad: var(--space-1);
    justify-content: center;
    flex-shrink: 0;
    inline-size: calc(1lh + 2 * var(--badge-ai-pad) + 2px);
    block-size: calc(1lh + 2 * var(--badge-ai-pad) + 2px);
    padding: 0;
}
.badge--sm.badge-ai--icon { --badge-ai-pad: 0px; }
.badge--lg.badge-ai--icon { --badge-ai-pad: var(--space-2); }
.input-group > .badge-ai { align-self: center; margin-inline: var(--space-3); border-radius: var(--radius-pill); }
.confidence { display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--text-3); color: var(--muted); line-height: 1; }
.confidence-bars { display: inline-flex; align-items: flex-end; gap: var(--space-1); block-size: 12px; }
.confidence-bars > i { inline-size: 3px; border-radius: 1px; background: var(--border-strong); }
.confidence-bars > i:nth-child(1) { block-size: 5px; }
.confidence-bars > i:nth-child(2) { block-size: 8px; }
.confidence-bars > i:nth-child(3) { block-size: 12px; }
.confidence[data-level="1"] .confidence-bars > i:nth-child(-n+1) { background: var(--warn-fg); }
.confidence[data-level="2"] .confidence-bars > i:nth-child(-n+2) { background: var(--info-fg); }
.confidence[data-level="3"] .confidence-bars > i:nth-child(-n+3) { background: var(--go-fg); }
.context-ring {
    --value: 0;
    --ring: var(--agent-to);
    --ring-size: 20px;
    --ring-width: 3px;
    display: inline-block;
    flex: none;
    inline-size: var(--ring-size);
    block-size: var(--ring-size);
    border-radius: 50%;
    background: conic-gradient(var(--ring) calc(var(--value) * 1%), var(--surface-strong) 0);
    mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring-width) - 0.5px), currentColor calc(100% - var(--ring-width)));
}
.context-ring--warn   { --ring: var(--warn-fg); }
.context-ring--danger { --ring: var(--danger-fg); }
.context-ring--sm { --ring-size: 14px; --ring-width: 2px; }
.context-ring--lg { --ring-size: 56px; --ring-width: 5px; }
.context-usage { min-inline-size: min(240px, 100%); font-size: var(--text-3); }
.context-usage > * + * { margin-block-start: var(--space-5); }
.context-usage-head,
.context-usage-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
.context-usage-head > strong { color: var(--fg); font-size: var(--text-4); }
.context-usage-head > :last-child { color: var(--muted); font-variant-numeric: tabular-nums; }
.context-usage .meter-fill { color: var(--agent-to); }
.context-usage-rows {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    column-gap: var(--space-7);
    row-gap: var(--space-3);
    margin: 0;
}
.context-usage-rows > div { display: contents; }
.context-usage-rows dt { color: var(--fg-soft); }
.context-usage-rows dd { margin: 0; color: var(--muted); font-variant-numeric: tabular-nums; text-align: end; }
.context-usage-rows :is(dt, dd) { text-box: trim-both cap alphabetic; padding-block: var(--cap-gap); }
.context-usage-foot { padding-block-start: var(--space-5); border-block-start: 1px solid var(--border); color: var(--fg); }
.context-usage-foot > strong { font-variant-numeric: tabular-nums; }
.skeleton--agent {
    --skeleton-band: linear-gradient(90deg,
        transparent 0%,
        var(--agent-skeleton-cool) 40%,
        var(--agent-skeleton-warm) 60%,
        transparent 100%);
}
}
@layer sedna.paint {
.agent-avatar {
    --size: var(--avatar-size, 32px);
    --spin: 18s;
    --flow: 7s;
    --c1: var(--agent-sedna-1);
    --c2: var(--agent-sedna-2);
    --c3: var(--agent-sedna-3);
    --c-glow: var(--agent-sedna-glow);
    position: relative;
    display: inline-block;
    flex: none;
    inline-size: var(--size);
    block-size: var(--size);
    vertical-align: middle;
    border-radius: 50%;
    overflow: hidden;
    isolation: isolate;
    background: var(--c2);
    transition: box-shadow 80ms linear, filter var(--motion-mid), opacity var(--motion-mid);
}
.agent-avatar::before {
    content: '';
    position: absolute;
    inset: -30%;
    background:
        radial-gradient(circle at 30% 28%, var(--c1) 0, transparent 36%),
        radial-gradient(circle at 72% 70%, var(--c3) 0, transparent 40%),
        conic-gradient(from 40deg, var(--c2), var(--c1), var(--c3), var(--c2), var(--c3), var(--c1), var(--c2));
    filter: blur(calc(var(--size) * 0.13)) saturate(1.15);
    scale: calc(1 + var(--level, 0) * 0.22);
    animation: agent-avatar-swirl var(--spin) linear infinite, agent-avatar-flow var(--flow) ease-in-out infinite alternate;
    transition: scale 80ms linear;
}
.agent-avatar::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 24%, var(--agent-sphere-gloss) 0, transparent 30%),
        radial-gradient(circle at 50% 46%, transparent 56%, var(--agent-sphere-shade) 100%);
    box-shadow: inset 0 0 0 1px var(--agent-sphere-rim);
}
@keyframes agent-avatar-swirl { to { rotate: 1turn; } }
@keyframes agent-avatar-flow  { to { translate: 6% -4%; } }
.agent-avatar--xs   { --size: 20px; }
.agent-avatar--sm   { --size: 24px; }
.agent-avatar--lg   { --size: 40px; }
.agent-avatar--xl   { --size: 56px; }
.agent-avatar--2xl  { --size: 96px; }
.agent-avatar--hero { --size: 200px; }
.agent-avatar[data-tone="aurora"]  { --c1: var(--agent-aurora-1);  --c2: var(--agent-aurora-2);  --c3: var(--agent-aurora-3);  --c-glow: var(--agent-aurora-glow); }
.agent-avatar[data-tone="ember"]   { --c1: var(--agent-ember-1);   --c2: var(--agent-ember-2);   --c3: var(--agent-ember-3);   --c-glow: var(--agent-ember-glow); }
.agent-avatar[data-tone="orbit"]   { --c1: var(--agent-orbit-1);   --c2: var(--agent-orbit-2);   --c3: var(--agent-orbit-3);   --c-glow: var(--agent-orbit-glow); }
.agent-avatar[data-tone="nebula"]  { --c1: var(--agent-nebula-1);  --c2: var(--agent-nebula-2);  --c3: var(--agent-nebula-3);  --c-glow: var(--agent-nebula-glow); }
.agent-avatar[data-tone="glacier"] { --c1: var(--agent-glacier-1); --c2: var(--agent-glacier-2); --c3: var(--agent-glacier-3); --c-glow: var(--agent-glacier-glow); }
.agent-avatar[data-state="thinking"] { --spin: 3.2s; }
.agent-avatar[data-state="listening"] {
    --spin: 9s;
    box-shadow: 0 0 0 calc(2px + var(--level, 0) * var(--size) * 0.06) var(--agent-sphere-ring);
}
.agent-avatar[data-state="speaking"] {
    --spin: 7s;
    box-shadow: 0 0 calc(var(--size) * (0.08 + var(--level, 0) * 0.28)) calc(var(--level, 0) * var(--size) * 0.04) var(--c-glow);
}
.agent-avatar[data-state="working"] {
    --spin: 5s;
    outline: 2px solid var(--agent-sphere-ring);
    outline-offset: 2px;
}
.agent-avatar[data-state="offline"] { filter: grayscale(1); opacity: 0.55; }
.agent-avatar[data-state="offline"]::before { animation-play-state: paused; }
}
@layer sedna.paint {
.reasoning { font-size: var(--text-4); }
.reasoning > summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    inline-size: fit-content;
    block-size: 22px;
    color: var(--muted);
    cursor: pointer;
    list-style: none;
    transition: color var(--motion-fast);
}
.reasoning > summary::-webkit-details-marker { display: none; }
.reasoning > summary:hover { color: var(--fg); }
.reasoning > summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-small); }
.reasoning-chevron { inline-size: 20px; text-align: center; font-size: var(--text-6); transition: rotate var(--motion-fast); }
.reasoning[open] .reasoning-chevron { rotate: 90deg; }
.reasoning-body {
    margin-block: var(--space-4) var(--space-2);
    margin-inline-start: calc(var(--space-5) - 1px);
    padding-inline-start: calc(var(--space-7) + 1px);
    border-inline-start: 2px solid var(--border);
    color: var(--muted);
    line-height: 1.65;
}
.reasoning-body > p { margin: 0 0 var(--space-4); }
.reasoning-body > p:last-child { margin: 0; }
.reasoning-label { min-inline-size: 0; text-box: trim-both cap alphabetic; padding-block: var(--cap-gap); }
.reasoning[data-state="running"] .reasoning-chevron { color: var(--agent-to); }
.reasoning-bar { display: flex; align-items: flex-start; gap: var(--space-4); min-inline-size: 0; }
.reasoning-bar > .reasoning { flex: 1; min-inline-size: 0; }
.reasoning-bar > .reasoning > summary { block-size: var(--control-height-sm); }
.reasoning-bar > .btn { flex: none; }
.agent-steps { --step-icon: 20px; list-style: none; margin: 0; padding: 0; font-size: var(--text-4); }
.agent-steps > li { position: relative; padding-inline-start: calc(var(--step-icon) + var(--space-4)); padding-block-end: var(--space-5); }
.agent-steps > li:last-child { padding-block-end: 0; }
.agent-steps > li:not(:last-child)::before {
    content: '';
    position: absolute;
    inset-inline-start: 9px;
    inset-block: 24px 4px;
    inline-size: 2px;
    border-radius: 1px;
    background: var(--border);
}
.agent-step-icon {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 1px;
    display: grid;
    place-items: center;
    inline-size: var(--step-icon);
    block-size: var(--step-icon);
    border-radius: 50%;
    background: var(--surface-strong);
    color: var(--muted);
    box-shadow: inset 0 0 0 1px var(--border);
    font-size: var(--text-3);
    line-height: 1;
}
.agent-steps > li[data-state="done"]    .agent-step-icon { background: var(--go-bg); color: var(--go-fg); box-shadow: none; }
.agent-steps > li[data-state="failed"]  .agent-step-icon { background: var(--danger-bg); color: var(--danger-fg); box-shadow: none; }
.agent-steps > li[data-state="running"] .agent-step-icon { background: none; box-shadow: none; }
.agent-steps > li[data-state="pending"] { color: var(--muted); }
.agent-step > summary {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-block-size: 22px;
    cursor: pointer;
    list-style: none;
}
.agent-step > summary::-webkit-details-marker { display: none; }
.agent-step-label { display: flex; align-items: center; gap: var(--space-3); min-inline-size: 0; }
.agent-step-label > i { color: var(--muted); font-size: var(--text-5); }
.agent-step-meta { margin-inline-start: auto; color: var(--muted); font-size: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; text-box: trim-both cap alphabetic; padding-block: var(--cap-gap); }
.agent-step > .code-block { margin-block-start: var(--space-4); }
.agent-plan { --plan-mark: 20px; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); font-size: var(--text-4); }
.agent-plan > li { display: flex; align-items: center; gap: var(--space-5); min-block-size: var(--plan-mark); }
.agent-plan-mark {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: var(--plan-mark);
    block-size: var(--plan-mark);
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.5px var(--border-strong);
    font-size: var(--text-3);
    line-height: 1;
}
.agent-plan > li[data-state="done"] { color: var(--muted); }
.agent-plan > li[data-state="done"] .agent-plan-mark { background: var(--go-solid); color: var(--on-solid); box-shadow: none; }
.agent-plan > li[data-state="current"] { color: var(--fg); font-weight: 600; }
.agent-plan > li[data-state="current"] .agent-plan-mark { box-shadow: none; }
.agent-plan > li[data-state="skipped"] { color: var(--muted); }
.agent-plan > li[data-state="skipped"] .agent-plan-label { text-decoration: line-through; }
.agent-plan > li[data-state="skipped"] .agent-plan-mark { box-shadow: inset 0 0 0 1.5px var(--border); }
.agent-plan-label { min-inline-size: 0; overflow-wrap: anywhere; }
.agent-plan--todo > li[data-state="done"] .agent-plan-label { text-decoration: line-through; }
.agent-plan-actions {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--space-1);
    margin-block: calc((var(--plan-mark) - var(--control-height-sm)) / 2);
    margin-inline-start: auto;
    opacity: 0;
}
.agent-plan > li:hover .agent-plan-actions,
.agent-plan > li:focus-within .agent-plan-actions { opacity: 1; }
@media (hover: none) {
    .agent-plan-actions { opacity: 1; }
}
.agent-approval { border-color: var(--warn-border); }
.agent-approval-head { display: flex; align-items: center; gap: var(--space-5); min-inline-size: 0; }
.agent-approval-icon {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 32px;
    block-size: 32px;
    border-radius: var(--radius-panel);
    background: var(--warn-bg);
    color: var(--warn-fg);
    font-size: var(--text-8);
}
.agent-approval-title { display: grid; gap: var(--space-1); min-inline-size: 0; }
.agent-approval-title > strong { font-size: var(--text-5); }
.agent-approval-title > span { color: var(--muted); font-size: var(--text-3); }
.agent-approval-change {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    border: 1px solid var(--border);
    border-radius: var(--radius-surface);
    background: var(--surface-soft);
    font-size: var(--text-4);
    font-variant-numeric: tabular-nums;
}
.agent-approval-change > :first-child { color: var(--muted); font-family: var(--font-mono); font-size: var(--text-3); overflow-wrap: anywhere; }
.agent-approval-change > s,
.agent-approval-change > i { color: var(--muted); }
.agent-approval-change > strong { color: var(--fg); }
.agent-approval-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); inline-size: 100%; }
.agent-approval-result { display: none; align-items: center; gap: var(--space-3); inline-size: 100%; font-size: var(--text-4); font-weight: 600; }
.agent-approval[data-state] .agent-approval-actions { display: none; }
.agent-approval[data-state] .agent-approval-result { display: flex; }
.agent-approval[data-state="approved"] { border-color: var(--go-border); }
.agent-approval[data-state="approved"] .agent-approval-result { color: var(--go-fg); }
.agent-approval[data-state="approved"] .agent-approval-icon { background: var(--go-bg); color: var(--go-fg); }
.agent-approval[data-state="denied"] { border-color: var(--border); }
.agent-approval[data-state="denied"] .agent-approval-result { color: var(--muted); }
.agent-approval[data-state="denied"] .agent-approval-icon { background: var(--surface-strong); color: var(--muted); }
.agent-approval[data-state="answered"] { border-color: var(--border); }
.agent-approval[data-state="answered"] .agent-approval-result { color: var(--fg-soft); }
}
@layer sedna.paint {
.agent-tool { font-size: var(--text-4); }
.agent-tool > summary {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-block-size: 40px;
    padding: var(--space-3) var(--space-5);
    cursor: pointer;
    list-style: none;
    transition: background var(--motion-fast);
}
.agent-tool > summary::-webkit-details-marker { display: none; }
.agent-tool > summary:hover { background: var(--bg-hover); }
.agent-tool > summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; border-radius: var(--radius-surface); }
.agent-tool[open] > summary { border-block-end: 1px solid var(--border); }
.agent-tool-icon {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 24px;
    block-size: 24px;
    border-radius: var(--radius-inner);
    background: var(--surface-strong);
    color: var(--muted);
    font-size: var(--text-5);
    line-height: 1;
}
.agent-tool-name {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--fg);
    font-family: var(--font-mono);
    font-size: var(--text-3);
    font-weight: 600;
    text-box: trim-both cap alphabetic;
    padding-block: var(--cap-gap);
}
.agent-tool-status { flex: none; }
.agent-tool-meta {
    flex: none;
    margin-inline-start: auto;
    color: var(--muted);
    font-size: var(--text-3);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-box: trim-both cap alphabetic;
    padding-block: var(--cap-gap);
}
.agent-tool-chevron {
    flex: none;
    margin-inline-start: auto;
    color: var(--muted);
    font-size: var(--text-6);
    transition: rotate var(--motion-fast);
}
.agent-tool-meta + .agent-tool-chevron { margin-inline-start: 0; }
.agent-tool[open] .agent-tool-chevron { rotate: 180deg; }
.agent-tool-body { display: grid; gap: var(--space-5); padding: var(--space-5); min-inline-size: 0; }
.agent-tool-body > .agent-approval-actions { justify-content: flex-end; }
.agent-tool-error { border-color: var(--danger-border); }
.agent-tool-error > .code-block-head { color: var(--danger-fg); }
.agent-tool[data-state="streaming"] .agent-tool-status { border-style: dashed; background: none; color: var(--muted); }
.agent-tool[data-state="running"]   .agent-tool-status { border-color: var(--info-border); background: var(--info-bg); color: var(--info-fg); }
.agent-tool[data-state="waiting"]   { border-color: var(--warn-border); }
.agent-tool[data-state="waiting"]   .agent-tool-status { border-color: var(--warn-border); background: var(--warn-bg); color: var(--warn-fg); }
.agent-tool[data-state="approved"]  .agent-tool-status { border-color: var(--go-border); background: none; color: var(--go-fg); }
.agent-tool[data-state="done"]      .agent-tool-status { border-color: var(--go-border); background: var(--go-bg); color: var(--go-fg); }
.agent-tool[data-state="failed"]    { border-color: var(--danger-border); }
.agent-tool[data-state="failed"]    .agent-tool-status { border-color: var(--danger-border); background: var(--danger-bg); color: var(--danger-fg); }
.agent-tool[data-state="failed"]    .agent-tool-icon { background: var(--danger-bg); color: var(--danger-fg); }
.agent-tool[data-state="denied"]    .agent-tool-status { background: var(--surface-strong); color: var(--muted); }
.agent-tool[data-state="denied"]    .agent-tool-name { color: var(--muted); text-decoration: line-through; }
.agent-approval--question { border-color: var(--info-border); }
.agent-approval--question .agent-approval-icon { background: var(--info-bg); color: var(--info-fg); }
.agent-question { display: grid; gap: var(--space-4); min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.agent-question > legend,
.agent-question > label:first-child {
    float: inline-start;
    padding: 0;
    color: var(--fg);
    font-size: var(--text-4);
    font-weight: 600;
}
.agent-question > .choice-tiles { --choice-min: 140px; }
}
@layer sedna.paint {
.cal-agenda {
    --cal-agenda-time: 8.5rem;
    --cal-fill: var(--brand-tint);
    --cal-accent: var(--brand);
    --cal-solid: var(--brand-text);
    container: cal-agenda / inline-size;
    border: 1px solid var(--border);
    border-radius: var(--radius-surface);
    overflow: clip;
    background: var(--card-bg);
    --surface-here: var(--card-bg);
    --muted-here: var(--muted);
}
.cal-agenda--flush { border: none; border-radius: 0; }
.cal-agenda-day + .cal-agenda-day { border-top: 1px solid var(--border); }
.cal-agenda-head {
    position: sticky;
    inset-block-start: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    margin: 0;
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--divider);
    background-color: var(--card-bg);
    background-image: linear-gradient(var(--surface-strong), var(--surface-strong));
    color: var(--fg);
    font-size: var(--text-3);
    font-weight: 600;
    line-height: round(1.4em, 2px);
}
.cal-agenda-date {
    margin-inline-start: auto;
    color: var(--fg-soft);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.cal-agenda-head::before {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    border-inline-start: 3px solid transparent;
}
.cal-agenda-day[aria-current="date"] > .cal-agenda-head { color: var(--brand-text); }
.cal-agenda-day[aria-current="date"] > .cal-agenda-head::before { border-inline-start-color: var(--brand); }
.cal-agenda-day[aria-current="date"] > .cal-agenda-head > .cal-agenda-date { color: var(--brand-text); }
.cal-agenda-events {
    margin: 0;
    padding: 0;
    list-style: none;
}
.cal-agenda-event {
    --row-line: 1lh;
    display: grid;
    grid-template-columns: var(--cal-agenda-time) auto minmax(0, 1fr);
    column-gap: var(--space-4);
    align-items: start;
    padding: var(--space-3) var(--space-5);
    color: var(--fg);
    font-size: var(--text-3);
    line-height: round(1.45em, 2px);
}
.cal-agenda-event + .cal-agenda-event { border-top: 1px solid var(--divider); }
.cal-agenda-event > .cal-agenda-time  { grid-column: 1; grid-row: 1; }
.cal-agenda-event > .cal-event-dot    { grid-column: 2; grid-row: 1; margin-block-start: calc((var(--row-line) - 6px) / 2); vertical-align: 0; }
.cal-agenda-event > .cal-agenda-title { grid-column: 3; grid-row: 1; }
.cal-agenda-event > .cal-agenda-meta  { grid-column: 3; grid-row: 2; }
.cal-agenda-time {
    color: var(--fg-soft);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.cal-agenda-title {
    min-width: 0;
    color: var(--fg);
    font-weight: 500;
    overflow-wrap: anywhere;
    text-decoration: none;
}
a.cal-agenda-title:hover { text-decoration: underline; }
a.cal-agenda-title:focus-visible { outline: none; border-radius: var(--radius-small); box-shadow: 0 0 0 2px var(--focus-ring); }
.cal-agenda-meta {
    min-width: 0;
    margin-block-start: var(--space-1);
    color: var(--muted);
    font-size: var(--text-2);
    line-height: round(1.45em, 2px);
}
.cal-agenda-event--past > :is(.cal-agenda-time, .cal-agenda-title) { color: var(--muted); }
.cal-agenda-event--past > .cal-event-dot { opacity: 0.55; }
.cal-agenda-empty {
    margin: 0;
    padding: var(--space-3) var(--space-5);
    color: var(--muted);
    font-size: var(--text-3);
    font-style: italic;
}
@container cal-agenda (max-width: 30rem) {
    .cal-agenda-event { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-3); }
    .cal-agenda-event > .cal-event-dot    { grid-column: 1; grid-row: 1; }
    .cal-agenda-event > .cal-agenda-time  { grid-column: 2; grid-row: 1; }
    .cal-agenda-event > .cal-agenda-title { grid-column: 2; grid-row: 2; }
    .cal-agenda-event > .cal-agenda-meta  { grid-column: 2; grid-row: 3; }
    .cal-agenda-head,
    .cal-agenda-event,
    .cal-agenda-empty { padding-inline: var(--space-4); }
}
:is(.cal-agenda-weekday, .cal-agenda-date, .cal-agenda-time):not(:has(> *)) {
    text-box: trim-both cap alphabetic;
    padding-block: var(--cap-gap);
}
}
@layer sedna.paint {
.cal-month {
    --cal-lanes: 3;
    --cal-event-height: 20px;
    --cal-day-head: 28px;
    --cal-weeknum-width: 40px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius-surface);
    overflow: hidden;
    background: var(--card-bg);
    --surface-here: var(--card-bg);
    --muted-here: var(--muted);
}
.cal-month--flush { border: none; border-radius: 0; }
.cal-weekdays,
.cal-row {
    display: grid;
    grid-template-columns: repeat(7, [day] minmax(0, 1fr));
}
.cal-month--weeknums > :is(.cal-weekdays, .cal-row) {
    grid-template-columns: var(--cal-weeknum-width) repeat(7, [day] minmax(0, 1fr));
}
.cal-weekdays { border-bottom: 1px solid var(--border); }
.cal-weekday {
    padding: var(--space-3) var(--space-4);
    color: var(--muted);
    font-size: var(--text-2);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: start;
}
.cal-row { position: relative; }
.cal-row + .cal-row { border-top: 1px solid var(--divider); }
.cal-day {
    min-height: calc(var(--cal-day-head) + (var(--cal-lanes) + 1) * (var(--cal-event-height) + var(--space-1)) + var(--space-3));
    padding: var(--space-2) var(--space-3);
    color: var(--fg);
    text-align: start;
}
.cal-day + .cal-day { border-inline-start: 1px solid var(--divider); }
.cal-day--weekend { background: var(--surface-soft); }
.cal-day--outside { color: var(--muted); }
.cal-day-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 24px;
    block-size: 24px;
    padding-inline: var(--space-2);
    border-radius: var(--radius-pill);
    font-size: var(--text-3);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.cal-day[aria-current="date"] .cal-day-num { background: var(--brand); color: var(--on-solid); }
.cal-day:is([aria-selected="true"], [aria-pressed="true"]) { background: var(--brand-tint); }
.cal-weeknum {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--space-2) 0;
    border-inline-end: 1px solid var(--divider);
    color: var(--muted);
    font-size: var(--text-2);
    font-variant-numeric: tabular-nums;
    line-height: 24px;
    text-align: center;
}
button.cal-weeknum { background: none; border-block: none; border-inline-start: none; font-family: inherit; cursor: pointer; }
button.cal-weeknum:hover { background: var(--bg-hover); color: var(--fg); }
button.cal-weeknum:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus-ring); }
.cal-month--weeknums .cal-weekdays > .cal-weekday:first-child { padding-inline: 0; text-align: center; }
.cal-row-events {
    position: absolute;
    grid-column: day 1 / -1;
    inset: calc(var(--cal-day-head) + var(--space-2)) 0 var(--space-2);
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-template-rows: repeat(var(--cal-lanes), var(--cal-event-height)) var(--cal-event-height);
    row-gap: var(--space-1);
    align-content: start;
    z-index: 1;
    pointer-events: none;
}
.cal-row-events > * { pointer-events: auto; min-width: 0; }
.cal-event,
.cal-block {
    --cal-fill: var(--brand-tint);
    --cal-accent: var(--brand);
    --cal-solid: var(--brand-text);
    --cal-event-radius: 2px;
}
.cal-event {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-inline: var(--space-2);
    padding-inline: var(--space-3);
    overflow: hidden;
    background: var(--cal-fill);
    border-inline-start: 3px solid var(--cal-accent);
    border-radius: var(--cal-event-radius);
    color: var(--fg);
    font-size: var(--text-2);
    font-weight: 500;
    line-height: var(--cal-event-height);
    white-space: nowrap;
    text-overflow: ellipsis;
    text-decoration: none;
}
a.cal-event:hover,
button.cal-event:hover { filter: brightness(1.15); text-decoration: none; }
button.cal-event { border-block: none; border-inline-end: none; font-family: inherit; text-align: start; cursor: pointer; }
.cal-event:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring); }
.cal-event-time { color: var(--fg-soft); font-weight: 400; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.cal-event--continues-start {
    margin-inline-start: 0;
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    border-inline-start-width: 0;
}
.cal-event--continues-end {
    margin-inline-end: 0;
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}
.cal-event--go     { --cal-fill: var(--go-bg);     --cal-accent: var(--go-fg);     --cal-solid: var(--go-fg); }
.cal-event--warn   { --cal-fill: var(--warn-bg);   --cal-accent: var(--warn-fg);   --cal-solid: var(--warn-fg); }
.cal-event--danger { --cal-fill: var(--danger-bg); --cal-accent: var(--danger-fg); --cal-solid: var(--danger-fg); }
.cal-event--info   { --cal-fill: var(--info-bg);   --cal-accent: var(--info-fg);   --cal-solid: var(--info-fg); }
.cal-event--cyan   { --cal-fill: var(--badge-cyan-bg);   --cal-accent: var(--badge-cyan-fg);   --cal-solid: var(--badge-cyan-fg); }
.cal-event--orange { --cal-fill: var(--badge-orange-bg); --cal-accent: var(--badge-orange-fg); --cal-solid: var(--badge-orange-fg); }
.cal-event--teal   { --cal-fill: var(--badge-teal-bg);   --cal-accent: var(--badge-teal-fg);   --cal-solid: var(--badge-teal-fg); }
:is(.cal-event, .cal-block).cal-event--filled {
    background: var(--cal-solid);
    border-inline-start-color: var(--cal-solid);
    color: var(--card-bg);
}
.cal-event--filled .cal-event-time { color: inherit; }
:is(.cal-event, .cal-block):is(.cal-event--outline, .cal-event--tentative) {
    --cal-edge: 1px;
    background: var(--card-bg);
    border: var(--cal-edge) solid var(--cal-accent);
    border-inline-start-width: 3px;
}
:is(.cal-event, .cal-block).cal-event--tentative {
    background: repeating-linear-gradient(-45deg, var(--cal-fill) 0 4px, transparent 4px 8px), var(--card-bg);
    border-style: dashed;
}
.cal-event:is(.cal-event--outline, .cal-event--tentative) { line-height: calc(var(--cal-event-height) - 2 * var(--cal-edge)); }
.cal-event-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-block .cal-event-title { white-space: normal; }
.cal-event-icon {
    flex-shrink: 0;
    color: var(--cal-accent);
    font-size: var(--text-3);
    line-height: 1;
    vertical-align: -0.1em;
}
.cal-event-dot {
    display: inline-block;
    flex-shrink: 0;
    inline-size: 6px;
    block-size: 6px;
    border-radius: 50%;
    background: var(--cal-accent);
    vertical-align: 0.1em;
}
.cal-event-dot--live { animation: sedna-pulse var(--pulse-duration) ease-in-out infinite; }
.cal-event--filled :is(.cal-event-icon, .cal-event-dot) { color: inherit; }
.cal-event--filled .cal-event-dot { background: currentColor; }
.cal-block :is(.cal-event-icon, .cal-event-dot) { margin-inline-end: var(--space-2); }
.cal-event-avatars {
    --avatar-size: 18px;
    --avatar-overlap: 6px;
    --avatar-gap: 1px;
    flex-shrink: 0;
    margin-inline-start: auto;
}
.cal-event-avatars > .avatar { --avatar-size: 18px; --avatar-overlap: 6px; --avatar-gap: 1px; font-size: var(--text-1); letter-spacing: -0.04em; }
.cal-event-avatars > .avatar-more { padding-inline: var(--space-1) 0; font-size: var(--text-1); color: inherit; }
.cal-block .cal-event-avatars { float: inline-end; margin-block-start: var(--space-1); margin-inline-start: var(--space-2); line-height: 1; }
.cal-more {
    grid-row: -2 / -1;
    margin-inline: var(--space-2);
    padding-inline: var(--space-3);
    color: var(--muted);
    font-size: var(--text-2);
    font-weight: 600;
    line-height: var(--cal-event-height);
    white-space: nowrap;
}
button.cal-more { background: none; border: none; font-family: inherit; text-align: start; cursor: pointer; border-radius: var(--radius-inner); }
button.cal-more:hover { background: var(--bg-hover); color: var(--fg); }
.cal-month--grow .cal-row > * { grid-row: 1; }
.cal-month--grow .cal-weeknum { grid-column: 1; }
.cal-month--grow .cal-day:nth-child(1 of .cal-day) { grid-column: day 1; }
.cal-month--grow .cal-day:nth-child(2 of .cal-day) { grid-column: day 2; }
.cal-month--grow .cal-day:nth-child(3 of .cal-day) { grid-column: day 3; }
.cal-month--grow .cal-day:nth-child(4 of .cal-day) { grid-column: day 4; }
.cal-month--grow .cal-day:nth-child(5 of .cal-day) { grid-column: day 5; }
.cal-month--grow .cal-day:nth-child(6 of .cal-day) { grid-column: day 6; }
.cal-month--grow .cal-day:nth-child(7 of .cal-day) { grid-column: day 7; }
.cal-month--grow .cal-day {
    min-height: calc(var(--cal-day-head) + var(--cal-lanes) * (var(--cal-event-height) + var(--space-1)) + var(--space-3));
}
.cal-month--grow .cal-row-events {
    position: relative;
    inset: auto;
    margin-block: calc(var(--cal-day-head) + var(--space-2)) var(--space-2);
    grid-template-rows: none;
    grid-auto-rows: var(--cal-event-height);
}
.cal-week {
    --cal-days: 7;
    --cal-hours: 24;
    --cal-hour-height: 48px;
    --cal-gutter: 56px;
    --cal-day-min: 0px;
    --cal-week-max-height: 560px;
    display: flex;
    flex-direction: column;
    min-inline-size: calc(var(--cal-gutter) + var(--cal-days) * var(--cal-day-min));
    border: 1px solid var(--border);
    border-radius: var(--radius-surface);
    overflow: hidden;
    background: var(--card-bg);
    --surface-here: var(--card-bg);
    --muted-here: var(--muted);
}
.cal-week--flush { border: none; border-radius: 0; }
.cal-week-head,
.cal-week-body {
    display: grid;
    grid-template-columns: var(--cal-gutter) repeat(var(--cal-days), minmax(var(--cal-day-min), 1fr));
}
.cal-week--by-lanes > :is(.cal-week-head, .cal-week-body) { display: flex; }
.cal-week--by-lanes > :is(.cal-week-head, .cal-week-body) > :first-child { flex: 0 0 var(--cal-gutter); }
.cal-week--by-lanes > .cal-week-head > .cal-weekday,
.cal-week--by-lanes .cal-day-col {
    --cal-lanes: 1;
    flex: var(--cal-lanes) 1 0;
    min-inline-size: var(--cal-day-min);
}
.cal-week--by-lanes > .cal-week-head > .cal-weekday { padding-inline: var(--space-4); border-inline-start: 1px solid transparent; }
.cal-week--by-lanes .cal-day-col { padding-inline: var(--space-4); }
.cal-week-head { border-bottom: 1px solid var(--border); }
.cal-week-head .cal-weekday { text-transform: none; letter-spacing: 0; font-size: var(--text-3); }
.cal-week-head .cal-weekday[aria-current="date"] { color: var(--brand-text); }
.cal-week-body { max-block-size: var(--cal-week-max-height); overflow-y: auto; }
.cal-hours {
    display: grid;
    grid-template-rows: repeat(var(--cal-hours), var(--cal-hour-height));
}
.cal-hour {
    padding-inline-end: var(--space-3);
    color: var(--muted);
    font-size: var(--text-2);
    font-variant-numeric: tabular-nums;
    text-align: end;
    translate: 0 -0.6em;
}
.cal-hour:first-child { translate: none; }
.cal-day-col {
    position: relative;
    block-size: calc(var(--cal-hours) * var(--cal-hour-height));
    border-inline-start: 1px solid var(--divider);
    background-image: linear-gradient(var(--divider) 1px, transparent 1px);
    background-size: 100% var(--cal-hour-height);
}
.cal-day-col[aria-current="date"] { background-color: var(--surface-soft); }
.cal-block {
    --cal-start: 0;
    --cal-span: 1;
    --cal-lane: 0;
    --cal-lanes: 1;
    position: absolute;
    inset-block-start: calc(var(--cal-start) * var(--cal-hour-height));
    inset-inline-start: calc(100% * var(--cal-lane) / var(--cal-lanes));
    inline-size: calc(100% / var(--cal-lanes) - var(--space-2));
    --cal-height: initial;
    --cal-length: var(--cal-height, calc(var(--cal-span) * var(--cal-hour-height)));
    block-size: calc(var(--cal-length) - var(--space-1));
    z-index: 1;
    padding: var(--space-1) var(--space-3);
    background: linear-gradient(var(--cal-fill), var(--cal-fill)), var(--card-bg);
    border-inline-start: 3px solid var(--cal-accent);
    border-radius: var(--cal-event-radius);
    color: var(--fg);
    font-size: var(--text-2);
    font-weight: 500;
    line-height: round(1.35em, 2px);
    text-decoration: none;
    --cal-edge: 0px;
    --cal-block-inner: calc(var(--cal-length) - 2 * var(--space-1) - 2 * var(--cal-edge));
    --cal-block-rest: max(0px, var(--cal-block-inner) - max(1lh, round(down, var(--cal-block-inner) - var(--space-1), 1lh)));
    padding-block-end: var(--cal-block-rest);
    overflow: clip;
}
.cal-block::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: var(--cal-block-rest);
    background: inherit;
}
.cal-block:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring); }
.cal-block .cal-event-time { display: block; }
.cal-now {
    --cal-at: 0;
    position: absolute;
    inset-inline: 0;
    inset-block-start: calc(var(--cal-at) * var(--cal-hour-height));
    block-size: 2px;
    z-index: 2;
    background: var(--danger-fg);
    pointer-events: none;
}
.cal-now::before {
    content: '';
    position: absolute;
    inset-inline-start: -4px;
    inset-block-start: -3px;
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background: var(--danger-fg);
}
.cal-timeline {
    --cal-columns: 7;
    --cal-lanes: 2;
    --cal-event-height: 20px;
    --cal-label-width: 136px;
    --cal-column-min: 32px;
    --cal-at: 0;
    --cal-label-edge: var(--shadow-edge-start);
    position: relative;
    min-inline-size: calc(var(--cal-label-width) + var(--cal-columns) * var(--cal-column-min));
    border: 1px solid var(--border);
    border-radius: var(--radius-surface);
    background: var(--card-bg);
    --surface-here: var(--card-bg);
    --muted-here: var(--muted);
}
.cal-timeline--flush { border: none; border-radius: 0; }
.cal-timeline-head,
.cal-timeline-row {
    display: grid;
    grid-template-columns: var(--cal-label-width) repeat(var(--cal-columns), [col] minmax(var(--cal-column-min), 1fr));
}
.cal-timeline-head { border-bottom: 1px solid var(--border); }
.cal-timeline-row { position: relative; }
.cal-timeline-row + .cal-timeline-row { border-top: 1px solid var(--divider); }
.cal-timeline-corner,
.cal-timeline-label {
    position: sticky;
    inset-inline-start: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    min-width: 0;
    padding: var(--space-2) var(--space-4);
    background: var(--card-bg);
    border-inline-end: 1px solid var(--divider);
}
.cal-timeline-corner {
    color: var(--muted);
    font-size: var(--text-2);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.cal-timeline-label {
    align-items: flex-start;
    line-height: var(--cal-event-height);
    color: var(--fg);
    font-size: var(--text-3);
    font-weight: 500;
    min-block-size: calc((var(--cal-lanes) + 1) * (var(--cal-event-height) + var(--space-1)) + 2 * var(--space-2));
}
.cal-timeline-label > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-timeline :is(.cal-timeline-corner, .cal-timeline-label) { box-shadow: var(--cal-label-edge); }
@container not scroll-state(scrollable: inline-start) {
    .cal-timeline :is(.cal-timeline-corner, .cal-timeline-label) { box-shadow: none; }
}
.sedna-scroll-x[data-scroll-start] .cal-timeline :is(.cal-timeline-corner, .cal-timeline-label) { box-shadow: none; }
.cal-timeline-corner { border-start-start-radius: calc(var(--radius-surface) - 1px); }
.cal-timeline-row:not(:has(~ .cal-timeline-row)) > .cal-timeline-label { border-end-start-radius: calc(var(--radius-surface) - 1px); }
.cal-timeline-col {
    padding: var(--space-3) var(--space-1);
    color: var(--muted);
    font-size: var(--text-2);
    font-variant-numeric: tabular-nums;
    text-align: center;
    white-space: nowrap;
}
.cal-timeline-col + .cal-timeline-col { border-inline-start: 1px solid var(--divider); }
.cal-timeline-col[aria-current="date"] { color: var(--brand-text); font-weight: 600; }
.cal-timeline-cells {
    grid-column: col 1 / -1;
    grid-row: 1;
    display: grid;
    grid-template-columns: repeat(var(--cal-columns), minmax(0, 1fr));
    background-image: linear-gradient(to right, var(--divider) 1px, transparent 1px);
    background-size: calc(100% / var(--cal-columns)) 100%;
}
.cal-timeline-cells > .cal-day--outside { background: var(--surface-soft); }
.cal-timeline-label { grid-column: 1; grid-row: 1; }
.cal-timeline-row > .cal-row-events {
    grid-column: col 1 / -1;
    inset: var(--space-2) 0;
    grid-template-columns: repeat(var(--cal-columns), minmax(0, 1fr));
}
.cal-timeline > .cal-now {
    inset-block: 0;
    inset-inline-start: calc(var(--cal-label-width) + (100% - var(--cal-label-width)) * var(--cal-at) / var(--cal-columns));
    inline-size: 2px;
    block-size: auto;
}
.cal-timeline > .cal-now::before { inset-inline-start: -3px; inset-block-start: -4px; }
.cal-row > .cal-now {
    inset-block: 0;
    inset-inline-start: calc(100% * var(--cal-at) / 7);
    inline-size: 2px;
    block-size: auto;
}
.cal-month--weeknums > .cal-row > .cal-now {
    inset-inline-start: calc(var(--cal-weeknum-width) + (100% - var(--cal-weeknum-width)) * var(--cal-at) / 7);
}
.cal-row > .cal-now::before { inset-inline-start: -3px; inset-block-start: -4px; }
.cal-timeline--grow .cal-timeline-row > .cal-row-events {
    position: relative;
    inset: auto;
    grid-row: 1;
    margin-block: var(--space-2);
    grid-template-rows: none;
    grid-auto-rows: var(--cal-event-height);
    min-block-size: calc(var(--cal-lanes) * (var(--cal-event-height) + var(--space-1)));
}
.cal-timeline--grow .cal-timeline-label { min-block-size: 0; }
.cal-year {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-7);
}
.cal-year-month { display: flex; flex-direction: column; gap: var(--space-3); }
.cal-year-title { margin: 0; font-size: var(--text-4); font-weight: 600; color: var(--fg); }
.cal-month--mini { border: none; border-radius: 0; background: none; overflow: visible; }
.cal-month--mini .cal-weekdays { border-bottom: none; }
.cal-month--mini .cal-weekday { padding: var(--space-2) 0; text-align: center; font-size: var(--text-1); }
.cal-month--mini .cal-row + .cal-row { border-top: none; }
.cal-month--mini .cal-day {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    aspect-ratio: 1;
    padding: 0;
    border-radius: var(--radius-inner);
    font-size: var(--text-3);
    font-variant-numeric: tabular-nums;
}
.cal-month--mini .cal-day + .cal-day { border-inline-start: none; }
.cal-month--mini { --cal-weeknum-width: 28px; }
.cal-month--mini .cal-weeknum {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-inline-end: none;
    font-size: var(--text-1);
    line-height: 1;
}
.cal-month--mini .cal-day--weekend { background: none; color: var(--fg-soft); }
.cal-month--mini .cal-day[aria-current="date"] { box-shadow: inset 0 0 0 1px var(--brand); color: var(--brand-text); font-weight: 600; }
.cal-month--mini .cal-day:is([aria-selected="true"], [aria-pressed="true"]) { background: var(--brand); color: var(--on-solid); }
.cal-day--marked::after {
    content: '';
    position: absolute;
    inset-block-end: 3px;
    inset-inline-start: calc(50% - 2px);
    inline-size: 4px;
    block-size: 4px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.7;
}
button.cal-day {
    background: none;
    border: none;
    font-family: inherit;
    cursor: pointer;
}
button.cal-day:hover { background: var(--bg-hover); }
button.cal-day:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring); }
.cal-month--mini button.cal-day[aria-pressed="true"]:hover { background: var(--brand); }
.cal-day:disabled,
.cal-day[aria-disabled="true"] {
    color: var(--muted);
    text-decoration: line-through;
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}
.cal-day--holiday { background: var(--surface-soft); }
.cal-month--mini .cal-day--holiday { background: var(--surface-soft); }
:is(.cal-day, .cal-weekday):has(> .cal-holiday) {
    container: cal-cell / inline-size;
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}
.cal-holiday {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    block-size: 24px;
    color: var(--fg-soft);
    font-size: var(--text-2);
    line-height: round(1.5em, 2px);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}
.cal-holiday > i { flex-shrink: 0; color: var(--muted); font-size: var(--text-4); }
.cal-weekday > .cal-holiday { block-size: auto; }
.cal-holiday-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@container cal-cell (max-width: 72px) {
    .cal-holiday-name { display: none; }
}
.cal-day:has(> .cal-marks) {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}
.cal-marks {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-1);
    min-width: 0;
    margin-inline-start: auto;
    padding-block-start: 2px;
}
.cal-weekday:has(> .cal-marks) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}
.cal-weekday > .cal-marks { justify-content: flex-start; margin-inline-start: 0; padding-block-start: 0; }
.cal-mark {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    block-size: 20px;
    padding: 0 var(--space-2);
    border: none;
    border-radius: var(--radius-pill);
    background: var(--surface-strong);
    color: var(--fg-soft);
    font-family: inherit;
    font-size: var(--text-2);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    white-space: nowrap;
}
.cal-mark > i { color: var(--muted); font-size: var(--text-3); }
button.cal-mark { cursor: pointer; transition: background var(--motion-fast), color var(--motion-fast); }
button.cal-mark:hover { background: var(--bg-hover); color: var(--fg); }
button.cal-mark:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring); }
button.cal-mark[aria-expanded="true"] { background: var(--brand-tint); color: var(--brand-text); }
.cal-month--day-tones .cal-day--weekend:not([aria-current="date"]) .cal-day-num { background: var(--info-bg); color: var(--info-fg); }
.cal-month--day-tones .cal-day--holiday:not([aria-current="date"]) .cal-day-num { background: var(--danger-bg); color: var(--danger-fg); }
:is(.cal-month--day-tones, .cal-week--day-tones) .cal-weekday.cal-day--weekend:not([aria-current="date"]) { background: var(--info-bg); color: var(--info-fg); }
:is(.cal-month--day-tones, .cal-week--day-tones) .cal-weekday.cal-day--holiday:not([aria-current="date"]) { background: var(--danger-bg); color: var(--danger-fg); }
.datepicker { inline-size: 288px; max-inline-size: calc(100vw - 32px); padding: var(--space-5); }
.datepicker-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-block-end: var(--space-3);
}
.datepicker-title { flex: 1; text-align: center; font-size: var(--text-4); font-weight: 600; color: var(--fg); }
.datepicker-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    margin-block-start: var(--space-4);
    padding-block-start: var(--space-4);
    border-top: 1px solid var(--divider);
}
.datepicker-actions > :first-child { margin-inline-end: auto; }
button.datepicker-title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: none;
    border: none;
    border-radius: var(--radius-control);
    font-family: inherit;
    cursor: pointer;
}
button.datepicker-title:hover { background: var(--bg-hover); }
button.datepicker-title:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring); }
button.datepicker-title > i { color: var(--muted); font-size: var(--text-5); }
.cal-months,
.cal-years {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
}
.cal-years { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cal-pick {
    display: flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--control-height);
    padding: var(--space-2);
    background: none;
    border: none;
    border-radius: var(--radius-inner);
    color: var(--fg);
    font-family: inherit;
    font-size: var(--text-3);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}
.cal-pick:hover { background: var(--bg-hover); }
.cal-pick:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring); }
.cal-pick--outside { color: var(--muted); }
.cal-pick:where([aria-current]:not([aria-current="false"])) { box-shadow: inset 0 0 0 1px var(--brand); color: var(--brand-text); font-weight: 600; }
.cal-pick[aria-pressed="true"],
.cal-pick[aria-pressed="true"]:hover { background: var(--brand); color: var(--on-solid); }
.cal-pick:disabled,
.cal-pick[aria-disabled="true"] {
    color: var(--muted);
    text-decoration: line-through;
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}
.datepicker-time {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-block-start: var(--space-4);
    padding-block-start: var(--space-4);
    border-top: 1px solid var(--divider);
    color: var(--fg-soft);
    font-size: var(--text-3);
}
.datepicker-time > .form-input { flex: 1; min-inline-size: 0; }
.datepicker-time + .datepicker-actions { border-top: none; padding-block-start: 0; }
.cal-month--mini .cal-day--in-range,
.cal-month--mini .cal-day--in-range:is([aria-pressed="true"], [aria-selected="true"]) {
    background: var(--brand-tint);
    color: var(--fg);
    border-radius: 0;
}
.cal-month--mini .cal-day--range-start,
.cal-month--mini .cal-day--range-end {
    background: var(--brand);
    color: var(--on-solid);
}
.cal-month--mini .cal-day--range-start { border-start-end-radius: 0; border-end-end-radius: 0; }
.cal-month--mini .cal-day--range-end { border-start-start-radius: 0; border-end-start-radius: 0; }
.cal-month--mini .cal-day--range-start.cal-day--range-end { border-radius: var(--radius-inner); }
button.cal-more:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring); }
button.cal-more[aria-expanded="true"] { background: var(--brand-tint); color: var(--brand-text); }
.cal-event-list {
    --cal-event-height: 24px;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-inline-size: min(14rem, 100%);
    margin: 0;
    padding: 0;
    list-style: none;
}
.cal-event-list > li { display: flex; flex-direction: column; }
.cal-event-list .cal-event { margin-inline: 0; }
:is(.cal-event, .cal-block).cal-event--background {
    background: var(--cal-fill);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--fg-soft);
    font-size: var(--text-1);
    font-weight: 600;
    letter-spacing: 0.02em;
    pointer-events: none;
}
.cal-row-events > .cal-event--background {
    position: absolute;
    grid-row: auto;
    inset-inline: 0;
    inset-block: calc(-1 * (var(--cal-day-head) + var(--space-2))) calc(-1 * var(--space-2));
    z-index: 0;
    align-items: flex-start;
    margin: 0;
    padding-block-start: var(--space-2);
    padding-inline: calc(var(--space-3) + var(--cal-day-head) + var(--space-1)) var(--space-3);
    line-height: 24px;
}
.cal-row-events > .cal-event--background ~ :not(.cal-event--background) { position: relative; z-index: 1; }
.cal-timeline-row > .cal-row-events > .cal-event--background {
    inset-block: calc(-1 * var(--space-2));
    align-items: flex-end;
    padding: 0 var(--space-3) var(--space-2);
    line-height: var(--cal-event-height);
}
.cal-block.cal-event--background {
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: var(--cal-length);
    z-index: 0;
    background: var(--cal-fill);
    padding-block-end: var(--space-1);
}
.cal-block.cal-event--background::after { content: none; }
.cal-closed {
    --cal-start: 0;
    --cal-span: 1;
    position: absolute;
    inset-inline: 0;
    inset-block-start: calc(var(--cal-start) * var(--cal-hour-height));
    block-size: calc(var(--cal-span) * var(--cal-hour-height));
    background: repeating-linear-gradient(-45deg, var(--divider) 0 1px, transparent 1px 7px), var(--surface-strong);
    pointer-events: none;
}
.cal-day-col.cal-day-col--closed {
    background-color: var(--surface-strong);
    background-image:
        linear-gradient(var(--divider) 1px, transparent 1px),
        repeating-linear-gradient(-45deg, var(--divider) 0 1px, transparent 1px 7px);
    background-size: 100% var(--cal-hour-height), auto;
}
.cal-slots {
    --cal-slot-hours: 0.5;
    position: absolute;
    inset: 0;
    display: grid;
    grid-auto-rows: calc(var(--cal-slot-hours) * var(--cal-hour-height));
}
.cal-slot { min-width: 0; }
:is(.cal-day, .cal-slot)[data-drop-state] { outline: none; }
:is(.cal-day, .cal-slot)[data-drop-state="valid"][data-drop-over] {
    outline: 2px solid var(--brand);
    outline-offset: -2px;
    background-color: var(--brand-tint);
}
:is(.cal-day, .cal-slot)[data-drop-state="invalid"][data-drop-over] {
    outline: 2px dotted var(--danger-border-strong);
    outline-offset: -2px;
    background-color: var(--danger-bg);
}
:is(.cal-row-events, .cal-day-col)[data-drop-state] { outline: none; }
:is(.cal-row-events, .cal-day-col)[data-drop-state] > [data-drag-item] { opacity: 1; }
.cal-resize {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: var(--space-3);
    z-index: 1;
    cursor: ns-resize;
    touch-action: none;
}
.cal-resize::after {
    content: '';
    position: absolute;
    inset-inline-start: 50%;
    inset-block-end: 3px;
    inline-size: 16px;
    margin-inline-start: -8px;
    border-block-start: 2px solid var(--cal-accent);
    border-radius: var(--radius-pill);
    opacity: 0;
    transition: opacity var(--motion-fast);
}
.cal-block:is(:hover, :focus-within) > .cal-resize::after,
.cal-resize[data-resizing]::after { opacity: 1; }
.cal-resize:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus-ring); }
@media (hover: none) {
    .cal-resize::after { opacity: 1; }
}
.cal-day-num:not(:has(> *)) { display: inline-block; align-content: center; text-align: center; text-box: trim-both cap alphabetic; }
.cal-holiday-name { text-box: trim-both cap alphabetic; padding-block: var(--cap-gap); }
}
@layer sedna.paint {
.chat {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5) 0;
}
.chat-day,
.chat-unread {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    margin-block: var(--space-4);
    font-size: var(--text-2);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}
.chat-day::before, .chat-day::after,
.chat-unread::before, .chat-unread::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--divider);
}
.chat-unread { color: var(--brand-text); }
.chat-unread::before, .chat-unread::after { background: var(--brand); opacity: 0.5; }
.chat-system {
    align-self: center;
    font-size: var(--text-3);
    color: var(--muted);
    text-align: center;
}
.chat-message {
    display: flex;
    align-items: flex-end;
    gap: var(--space-4);
    max-width: min(72%, 40rem);
    position: relative;
}
.chat-message--mine { align-self: flex-end; flex-direction: row-reverse; }
.chat-message--continued { margin-top: calc(var(--space-2) * -1); }
.chat-message--continued > .avatar { visibility: hidden; }
.chat-message--continued .chat-meta:first-child { display: none; }
.chat-body { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.chat-message--mine .chat-body { align-items: flex-end; }
.chat-meta {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    font-size: var(--text-2);
    color: var(--muted);
    padding-inline: var(--space-2);
}
.chat-author { font-weight: 600; color: var(--fg-soft); }
.chat-time { font-variant-numeric: tabular-nums; }
.chat-edited { font-style: italic; }
.chat-status { font-size: var(--text-4); }
.chat-status--read { color: var(--brand-text); }
.chat-status--failed { color: var(--danger-fg); }
.chat-bubble {
    --surface-here: var(--surface-strong);
    --muted-here: var(--muted);
    background: var(--surface-here);
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-surface);
    border-end-start-radius: var(--radius-inner);
    color: var(--fg);
    font-size: var(--text-4);
    line-height: 1.5;
    overflow-wrap: anywhere;
    max-width: 100%;
}
.chat-message--mine .chat-bubble {
    background: var(--brand-tint);
    border-end-start-radius: var(--radius-surface);
    border-end-end-radius: var(--radius-inner);
}
:where(.chat-bubble) p { margin: 0; }
:where(.chat-bubble) p + p { margin-top: var(--space-3); }
.chat-bubble--failed { box-shadow: inset 0 0 0 1px var(--danger-border); }
.chat-message:has(> .chat-body > .chat-bubble--editing) { inline-size: min(72%, 40rem); }
.chat-message:has(> .chat-body > .chat-bubble--editing) > .chat-body { flex: 1; }
.chat-bubble--editing { display: grid; gap: var(--space-4); inline-size: 100%; padding: var(--space-4); }
.chat-bubble--editing > .form-input { inline-size: 100%; }
.chat-bubble--deleted { font-style: italic; color: var(--muted); }
.chat-forwarded {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    font-size: var(--text-2);
    font-style: italic;
    color: var(--muted);
}
.chat-bubble pre {
    margin: var(--space-3) 0 0;
    padding: var(--space-3) var(--space-4);
    max-width: 100%;
    overflow-x: auto;
    border-radius: var(--radius-inner);
    background: var(--code-bg);
    color: var(--code-fg);
    font-family: var(--font-mono);
    font-size: var(--text-3);
    line-height: 1.5;
}
.chat-bubble code { font-family: var(--font-mono); font-size: 0.9em; }
.chat-bubble pre code { font-size: inherit; }
.chat-bubble ul,
.chat-bubble ol { margin: var(--space-3) 0 0; padding-inline-start: var(--space-7); }
.chat-bubble > .markdown-body { color: inherit; font-size: inherit; line-height: inherit; }
.chat-bubble--media { padding: 0; overflow: hidden; }
.chat-bubble--media > img,
.chat-bubble--media > video { display: block; max-width: 100%; height: auto; }
.chat-mention {
    color: var(--brand-text);
    font-weight: 600;
    text-decoration: none;
}
.chat-mention:hover { text-decoration: underline; }
.chat-quote {
    display: block;
    margin-bottom: var(--space-3);
    padding: var(--space-2) var(--space-4);
    border-inline-start: 2px solid var(--border-strong);
    border-radius: var(--radius-inner);
    background: var(--surface-soft);
    font-size: var(--text-3);
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-quote > strong { color: var(--fg-soft); margin-inline-end: var(--space-3); }
.chat-bubble .file-item { background: var(--surface-here); }
.chat-bubble .file-item + .file-item { margin-top: var(--space-2); }
.chat-bubble > .link-preview { margin-top: var(--space-3); }
.chat-reactions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chat-reaction {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 24px;
    padding: 0 var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface-strong);
    color: var(--fg-soft);
    font-family: inherit;
    font-size: var(--text-3);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}
.chat-reaction:hover { border-color: var(--border-strong); }
.chat-reaction[aria-pressed="true"] {
    background: var(--brand-tint);
    border-color: var(--selected);
    color: var(--brand-text);
}
.chat-reaction:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring); }
.chat-replies {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-3);
    color: var(--muted);
    text-decoration: none;
}
.chat-replies > strong { font-weight: 600; color: var(--brand-text); }
.chat-replies:hover { text-decoration: none; }
.chat-replies:hover > strong { text-decoration: underline; }
.chat-quick-replies { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chat-quick-replies > .chip { cursor: pointer; font-family: inherit; }
.chat-quick-replies > .chip:hover { border-color: var(--border-strong); color: var(--fg); }
.chat-emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: var(--space-1);
}
.chat-emoji {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radius-inner);
    background: none;
    font-size: var(--text-7);
    line-height: 1;
    cursor: pointer;
}
.chat-emoji:hover { background: var(--bg-hover); }
.chat-emoji:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring); }
.chat-actions {
    position: absolute;
    top: calc(var(--space-6) * -1);
    inset-inline-end: 0;
    display: flex;
    gap: var(--space-1);
    padding: var(--space-1);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    box-shadow: var(--shadow-float);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--motion-fast), visibility var(--motion-fast);
}
.chat-message--mine .chat-actions { inset-inline-end: auto; inset-inline-start: 0; }
.chat-message:hover .chat-actions,
.chat-message:focus-within .chat-actions { opacity: 1; visibility: visible; }
.chat-seen {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    font-size: var(--text-2);
    color: var(--muted);
}
.chat-typing {
    display: inline-flex;
    gap: var(--space-2);
    align-items: center;
    min-height: 1.5em;
}
.chat-typing > i {
    --chat-typing-duration: 1.2s;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--muted);
    animation: sedna-chat-typing var(--chat-typing-duration) ease-in-out infinite;
}
.chat-typing > i:nth-child(2) { animation-delay: calc(var(--chat-typing-duration) / 6); }
.chat-typing > i:nth-child(3) { animation-delay: calc(var(--chat-typing-duration) / 3); }
@keyframes sedna-chat-typing {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
}
.chat-composer {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--divider);
}
.chat-composer-reply {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-2) var(--space-4);
    border-inline-start: 2px solid var(--brand);
    background: var(--surface-soft);
    border-radius: var(--radius-inner);
    font-size: var(--text-3);
    color: var(--muted);
}
.chat-composer-reply > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-composer-reply > strong { color: var(--fg-soft); }
.chat-composer-files { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.chat-composer-row { display: flex; align-items: flex-end; gap: var(--space-3); }
.chat-composer-row > .form-input {
    flex: 1;
    min-width: 0;
    resize: none;
    field-sizing: content;
    max-height: 9.5em;
}
.chat-closed {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-5);
    border-top: 1px solid var(--divider);
    font-size: var(--text-3);
    color: var(--muted);
    text-align: center;
}
.chat-pane {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    --surface-here: var(--bg);
    --muted-here: var(--muted);
}
.card .chat-pane { --surface-here: var(--card-bg); --muted-here: var(--muted); }
.drawer > .chat-pane { flex: 1; height: auto; --surface-here: var(--bg-elevated); --muted-here: var(--muted); }
.chat-pane > .chat {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 var(--space-5) var(--space-4);
    anchor-name: --sedna-chat-thread;
}
.chat-pane > .chat:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus-ring); }
.chat-pane .chat-day {
    position: sticky;
    top: 0;
    z-index: 1;
    margin-block: 0;
    padding-block: var(--space-3);
    background: var(--surface-here);
}
.chat-pane > .chat-composer,
.chat-pane > .chat-closed { padding-inline: var(--space-5); padding-bottom: var(--space-4); }
.chat-jump {
    position: absolute;
    position-anchor: --sedna-chat-thread;
    inset-block-end: anchor(end);
    justify-self: anchor-center;
    margin-block-end: var(--space-4);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--bg-elevated);
    color: var(--fg-soft);
    font-family: inherit;
    font-size: var(--text-3);
    font-weight: 600;
    box-shadow: var(--shadow-float);
    cursor: pointer;
}
.chat-jump:hover { color: var(--fg); border-color: var(--border-strong); }
.chat-jump:focus-visible { outline: none; box-shadow: var(--shadow-float), 0 0 0 3px var(--focus-ring); }
.chat-pinned {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--divider);
    background: var(--surface-soft);
    font-size: var(--text-3);
}
.chat-pinned > i { color: var(--muted); flex-shrink: 0; }
.chat-pinned > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-pinned > span > strong { color: var(--fg-soft); margin-inline-end: var(--space-3); }
.chat--flat { gap: var(--space-1); }
.chat--flat .chat-message,
.chat--flat .chat-message--mine {
    max-width: none;
    align-self: stretch;
    flex-direction: row;
    align-items: flex-start;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-inner);
}
.chat--flat .chat-message:hover,
.chat--flat .chat-message:focus-within { background: var(--bg-hover); }
.chat--flat .chat-message--continued { margin-top: calc(var(--space-2) * -1); }
.chat--flat .chat-body,
.chat--flat .chat-message--mine .chat-body { align-items: flex-start; }
.chat--flat .chat-meta { padding-inline: 0; }
.chat--flat .chat-bubble,
.chat--flat .chat-message--mine .chat-bubble { padding: 0; background: transparent; border-radius: 0; }
.chat--flat .chat-bubble--failed { box-shadow: none; }
.chat--flat .chat-actions,
.chat--flat .chat-message--mine .chat-actions { top: calc(var(--space-4) * -1); inset-inline-end: var(--space-4); inset-inline-start: auto; }
.chat-launcher {
    position: fixed;
    inset-block-end: calc(var(--space-8) + var(--safe-block-end));
    inset-inline-end: calc(var(--space-8) + var(--safe-inline-end));
    z-index: 60;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 50%;
    background: var(--brand);
    color: var(--on-solid);
    font-size: var(--text-8);
    box-shadow: var(--shadow-float);
    cursor: pointer;
}
.chat-launcher:hover { background: var(--brand-hover); }
.chat-launcher:focus-visible { outline: none; box-shadow: var(--shadow-float), 0 0 0 3px var(--focus-ring); }
.chat-launcher-count {
    position: absolute;
    top: -4px;
    inset-inline-end: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--danger-solid);
    color: var(--on-solid);
    font-size: var(--text-2);
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--bg);
    align-content: center;
    text-box: trim-both cap alphabetic;
}
.chat-flyover {
    inset: auto;
    margin: 0;
    position: fixed;
    inset-block-end: calc(var(--space-8) + 52px + var(--space-4) + var(--safe-block-end));
    inset-inline-end: calc(var(--space-8) + var(--safe-inline-end));
    z-index: 550;
    display: none;
    flex-direction: column;
    width: min(380px, calc(100vw - 2 * var(--space-8)));
    height: min(560px, calc(100dvh - 120px - var(--safe-block-end)));
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-surface);
    --surface-here: var(--bg-elevated);
    --muted-here: var(--muted);
    background: var(--bg-elevated);
    color: var(--fg);
    box-shadow: var(--shadow-float);
    overflow: hidden;
}
.chat-flyover:popover-open { display: flex; }
.chat-flyover-head {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--divider);
}
.chat-flyover-head > strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-flyover > .chat { flex: 1; min-height: 0; overflow-y: auto; padding-inline: var(--space-5); }
.chat-flyover > .chat-composer { padding: var(--space-4) var(--space-5); }
@media (max-width: 560px) {
    .chat-flyover {
        inset: 0;
        width: 100%;
        height: 100dvh;
        max-height: none;
        border: none;
        border-radius: 0;
        padding-top: var(--safe-block-start);
        padding-bottom: var(--safe-block-end);
    }
}
:is(.chat-author, .chat-time, .chat-edited) { text-box: trim-both cap alphabetic; padding-block: var(--cap-gap); }
.chat-bubble:not(:has(> *)) { text-box: trim-both cap alphabetic; padding-block: calc(var(--space-4) + var(--cap-gap)); }
.chat--flat .chat-bubble:not(:has(> *)) { padding-block: var(--cap-gap); }
}
@layer sedna.paint {
.inbox {
    --inbox-width: 380px;
    --inbox-list-height: min(440px, 60vh);
    width: var(--inbox-width);
    max-width: min(100%, calc(100vw - var(--space-8) * 2));
    padding: 0;
    overflow: hidden;
    --surface-here: var(--bg-elevated);
    --muted-here: var(--muted);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-surface);
    color: var(--fg-soft);
    font-size: var(--text-4);
    line-height: 1.5;
}
.popover.inbox {
    max-width: calc(100vw - var(--space-8) * 2);
    position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline;
}
@media (max-width: 560px) {
    .popover.inbox {
        position-area: block-end span-all;
        width: calc(100vw - var(--space-4) * 2);
        max-width: none;
        margin-inline: var(--space-4);
    }
}
.inbox-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-block: var(--space-4);
    padding-inline: var(--space-6) var(--space-4);
}
.inbox-title {
    flex: 1;
    min-width: 0;
    color: var(--fg);
    font-size: var(--text-5);
    font-weight: 600;
    text-box: trim-both cap alphabetic;
    padding-block: var(--cap-gap);
}
.inbox-tabs { padding-inline: var(--space-4); }
.inbox .tab-panel { padding-top: 0; }
.inbox-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: var(--inbox-list-height);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.inbox-list > li + li { border-top: 1px solid var(--divider); }
.inbox-item {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    column-gap: var(--space-5);
    padding-block: var(--space-5);
    padding-inline: var(--space-6) var(--space-4);
}
.inbox-item:hover { background: var(--bg-hover); }
.inbox-item:has(.inbox-item-title:focus-visible) { box-shadow: inset 0 0 0 2px var(--focus-ring); }
.inbox-item:not(:has(> .avatar, > .avatar-presence)) { grid-template-columns: minmax(0, 1fr) auto; }
.inbox-item-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}
.inbox-item-title {
    color: var(--fg-soft);
    font-weight: 400;
    text-decoration: none;
    overflow-wrap: anywhere;
}
a.inbox-item-title::after,
button.inbox-item-title::after { content: ""; position: absolute; inset: 0; }
button.inbox-item-title {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    text-align: start;
    cursor: pointer;
}
:is(a, button).inbox-item-title:focus-visible { outline: none; }
.inbox-item-title:hover { text-decoration: none; }
.inbox-item-title strong { color: var(--fg); font-weight: 600; }
.inbox-item-text {
    color: var(--muted);
    font-size: var(--text-3);
    overflow-wrap: anywhere;
}
.inbox-item-time {
    color: var(--muted);
    font-size: var(--text-2);
    font-variant-numeric: tabular-nums;
}
.inbox-item-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-3);
}
.inbox-item-menu { position: relative; z-index: 1; }
.inbox-item--unread .inbox-item-title { color: var(--fg); font-weight: 600; }
.inbox-item--unread .inbox-item-time::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-inline-end: var(--space-3);
    border-radius: 50%;
    background: var(--brand);
    vertical-align: calc((1cap - 6px) / 2);
}
.inbox .empty-state { padding: var(--space-9) var(--space-6); }
.inbox-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--divider);
    font-size: var(--text-3);
}
}
@layer sedna.paint {
.orb {
    --orb-size: 32px;
    --orb-body:  var(--agent-from);
    --orb-dot:   var(--agent-to);
    --orb-trail: var(--agent-trail);
    position: relative;
    display: inline-block;
    flex: none;
    inline-size: var(--orb-size);
    block-size: var(--orb-size);
    vertical-align: middle;
    border-radius: 50%;
    background: radial-gradient(circle, var(--orb-body) 0 18%, transparent 19%);
    box-shadow: inset 0 0 0 1px var(--orb-trail);
}
.orb:has(> canvas) { background: none; box-shadow: none; }
.orb > canvas { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.orb--xs   { --orb-size: 16px; }
.orb--sm   { --orb-size: 20px; }
.orb--md   { --orb-size: 48px; }
.orb--lg   { --orb-size: 64px; }
.orb--xl   { --orb-size: 96px; }
.orb--hero { --orb-size: 220px; }
.orb--inline { --orb-size: 1.15em; vertical-align: -0.22em; }
.orb[data-orb="waiting"] { --orb-body: var(--warn-fg);   --orb-dot: var(--warn-fg); }
.orb[data-orb="error"]   { --orb-body: var(--danger-fg); --orb-dot: var(--danger-fg); }
.orb[data-orb="done"]    { --orb-body: var(--go-fg);     --orb-dot: var(--go-fg); }
.orb[data-orb-tone="brand"]  { --orb-body: var(--agent-from); --orb-dot: var(--agent-from); }
.orb[data-orb-tone="mono"]   { --orb-body: var(--fg);         --orb-dot: var(--fg); }
.orb[data-orb-tone="go"]     { --orb-body: var(--go-fg);      --orb-dot: var(--go-fg); }
.orb[data-orb-tone="warn"]   { --orb-body: var(--warn-fg);    --orb-dot: var(--warn-fg); }
.orb[data-orb-tone="danger"] { --orb-body: var(--danger-fg);  --orb-dot: var(--danger-fg); }
}
@layer sedna.paint {
.health-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-3);
    font-weight: 500;
    white-space: nowrap;
}
.health-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--border-hover);
}
.health-badge--live       { color: var(--go-fg); }
.health-badge--live       .health-dot { background: var(--go-solid); box-shadow: 0 0 6px var(--go-ring); }
.health-badge--streaming  { color: var(--info-fg); }
.health-badge--streaming  .health-dot { background: var(--info-solid); box-shadow: 0 0 6px var(--info-ring); }
.health-badge--connecting { color: var(--warn-fg); }
.health-badge--connecting .health-dot { background: var(--warn-solid); }
.health-badge--idle       { color: var(--muted); }
.health-badge--idle       .health-dot { background: var(--border-hover); }
.health-badge--degraded   { color: var(--warn-fg); }
.health-badge--degraded   .health-dot { background: var(--warn-solid); }
.health-badge--down       { color: var(--danger-fg); }
.health-badge--down       .health-dot { background: var(--danger-solid); }
.health-badge--live .health-dot,
.health-badge--streaming .health-dot,
.health-badge--connecting .health-dot { animation: sedna-pulse var(--pulse-duration) ease-in-out infinite; }
.health-badge--healthy { color: var(--go-fg); }
.health-badge--healthy .health-dot {
    background: var(--go-solid);
    box-shadow: 0 0 6px var(--go-ring);
    animation: sedna-pulse var(--pulse-duration) ease-in-out infinite;
}
.stale {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--muted);
    font-size: var(--text-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    vertical-align: calc(var(--line-cap) / 2);
}
.stale::before {
    content: '';
    align-self: center;
    width: 0;
    height: 0;
    margin-inline-end: calc(var(--space-2) * -1);
}
.stale i { font-size: var(--text-3); }
.stale--warn { color: var(--warn-fg); }
}
@layer sedna.paint {
.chat-message--agent { max-width: 100%; align-items: flex-start; gap: var(--space-6); }
.chat-message--agent > .agent-avatar { --size: 28px; }
.chat-message--agent > .chat-body { flex: 1; gap: var(--space-5); }
.chat-message--agent > .chat-body > .chat-meta:first-child { min-block-size: 28px; padding-inline: 0; }
.chat-message--agent .chat-bubble {
    padding: 0;
    background: none;
    border-radius: 0;
    font-size: var(--text-5);
    line-height: 1.65;
}
.chat-message--agent .chat-bubble > p { margin: 0 0 var(--space-5); }
.chat-message--agent .chat-bubble.chat-bubble--failed {
    padding: var(--space-5) var(--space-6);
    border-radius: var(--radius-surface);
    background: var(--danger-bg);
    font-size: var(--text-4);
}
.chat-message--agent .chat-bubble > p:last-child { margin-block-end: 0; }
.chat-bubble--streaming > :last-child::after {
    content: '';
    display: inline-block;
    inline-size: 2px;
    block-size: 1.1em;
    margin-inline-start: var(--space-1);
    vertical-align: -0.18em;
    border-radius: 1px;
    background: var(--agent-to);
    animation: chat-caret var(--caret-duration) steps(1) infinite;
}
@keyframes chat-caret { 50% { opacity: 0; } }
.chat-feedback {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    margin-inline-start: calc((var(--control-height-sm) - var(--text-4)) / -2);
}
.chat-feedback > .btn { color: var(--muted); }
.chat-feedback > .btn:hover { color: var(--fg); }
.chat-feedback > .btn[aria-pressed="true"] { color: var(--brand-text); }
.chat-feedback-sep { inline-size: 1px; block-size: 16px; margin-inline: var(--space-4); background: var(--border); }
.chat-versions { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--muted); font-size: var(--text-3); font-variant-numeric: tabular-nums; }
.chat-versions > .btn { width: calc(var(--control-height-sm) - var(--space-2)); min-height: calc(var(--control-height-sm) - var(--space-2)); padding: 0; border-radius: var(--radius-small); }
.citation {
    display: inline-grid;
    place-items: center;
    min-inline-size: 18px;
    block-size: 18px;
    margin-inline: var(--space-1);
    padding: 0 var(--space-2);
    vertical-align: 1px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--surface-strong);
    color: var(--fg-soft);
    font: 600 var(--text-1) / 1 var(--font-sans);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background var(--motion-fast), color var(--motion-fast);
}
.citation:hover,
.citation:focus-visible { background: var(--agent-tint); color: var(--accent); outline: none; }
.citation-sources { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-4); }
.source-card {
    display: grid;
    align-content: start;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-6);
    border: 1px solid var(--border);
    border-radius: var(--radius-surface);
    background: var(--surface-soft);
    color: var(--fg);
    font-size: var(--text-3);
    transition: border-color var(--motion-fast), background var(--motion-fast);
}
.source-card:hover { border-color: var(--border-hover); background: var(--surface-strong); text-decoration: none; }
.source-card:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring); }
.source-card-host { display: flex; align-items: center; gap: var(--space-3); color: var(--muted); min-inline-size: 0; }
.source-card-n {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 16px;
    block-size: 16px;
    border-radius: var(--radius-small);
    background: var(--surface-strong);
    color: var(--fg-soft);
    font-size: var(--text-1);
    font-weight: 600;
    line-height: round(1.2em, 2px);
}
.source-card-title { font-size: var(--text-4); font-weight: 600; line-height: round(1.35em, 2px); }
.chat-composer--prompt {
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-panel);
    background: var(--surface-raised-2);
    transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.chat-composer--prompt:focus-within { border-color: var(--field-border-focus); box-shadow: 0 0 0 2px var(--brand-glow); }
.chat-composer--prompt .chat-composer-row > .form-input,
.chat-composer--prompt .chat-composer-row > .form-input:focus,
.chat-composer--prompt .chat-composer-row > .ghost-field > .form-input,
.chat-composer--prompt .chat-composer-row > .ghost-field > .form-input:focus {
    min-height: var(--control-height-lg);
    padding: var(--space-3) var(--space-4);
    border: 0;
    background: none;
    box-shadow: none;
    font-size: var(--text-6);
}
.chat-pane > .chat-composer--prompt,
.chat-flyover > .chat-composer--prompt { margin: 0 var(--space-5) var(--space-5); padding: var(--space-4); }
.chat-composer--prompt > .chat-composer-files { padding-inline: var(--space-4); padding-block-start: var(--space-2); }
.chat-composer-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.chat-composer-tools > .menu-anchor { align-self: center; }
.chat-composer-tools > .form-hint { padding-inline: var(--space-4); }
.chat-composer-send { display: flex; align-items: center; gap: var(--space-3); margin-inline-start: auto; }
.chat-composer-send > .btn--icon { border-radius: 50%; }
.chat-composer-send [data-when] { display: none; }
.chat-composer-send:not([data-state]) [data-when~="idle"],
.chat-composer-send[data-state="idle"] [data-when~="idle"],
.chat-composer-send[data-state="submitted"] [data-when~="submitted"],
.chat-composer-send[data-state="streaming"] [data-when~="streaming"],
.chat-composer-send[data-state="error"] [data-when~="error"] { display: contents; }
.citation:not(:has(> *)) { display: inline-block; align-content: center; text-align: center; text-box: trim-both cap alphabetic; }
.source-card-n:not(:has(> *)) { display: block; align-content: center; text-align: center; text-box: trim-both cap alphabetic; }
.chat-message--agent .chat-bubble:not(:has(> *)) { padding-block: var(--cap-gap); }
}
@layer sedna.paint {
.artifact {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    --surface-here: var(--card-bg);
    --muted-here: var(--muted);
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-surface);
}
.artifact-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-4) var(--space-6);
    flex-shrink: 0;
    padding: var(--card-pad-block) var(--card-pad-inline);
    border-bottom: 1px solid var(--border);
}
.artifact-head-text { flex: 1 1 12rem; min-width: 0; }
.artifact-title {
    display: block;
    min-height: var(--control-height-sm);
    align-content: center;
    margin: 0;
    color: var(--fg);
    font-size: var(--text-6);
    font-weight: 600;
    line-height: round(1.4em, 2px);
    overflow-wrap: anywhere;
}
.artifact-head-text > p {
    margin: 0;
    color: var(--muted);
    font-size: var(--text-3);
    line-height: round(1.5em, 2px);
}
.artifact-actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-inline-start: auto;
}
.artifact-actions > .btn { color: var(--muted); }
.artifact-actions > .btn:hover { color: var(--fg); }
.artifact-actions > .chat-versions { margin-inline-end: var(--space-4); }
.artifact-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: var(--card-pad-block) var(--card-pad-inline);
}
.artifact-body--flush { padding: 0; }
:where(.artifact-body) > :is(p, ul, ol, dl, h1, h2, h3, h4, h5, h6):where(:first-child) { margin-block-start: 0; }
:where(.artifact-body) > :is(p, ul, ol, dl, h1, h2, h3, h4, h5, h6):where(:last-child) { margin-block-end: 0; }
.drawer > .artifact {
    flex: 1;
    border: none;
    border-radius: 0;
    background: none;
    --surface-here: var(--bg-elevated);
    --muted-here: var(--muted);
}
}
@layer sedna.paint {
.ghost-field { position: relative; display: block; min-inline-size: 0; }
.ghost-field > textarea { display: block; }
.ghost-text {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    margin: 0;
    overflow: hidden;
    border: 0 solid transparent;
    background: none;
    color: var(--placeholder);
    white-space: pre-wrap;
    overflow-wrap: break-word;
    pointer-events: none;
    user-select: none;
}
.ghost-text[data-ghost-rest] { display: block; }
.ghost-text::before { content: attr(data-ghost-typed); color: transparent; }
.ghost-text::after { content: attr(data-ghost-rest); }
.ghost-field:has(> .ghost-text[data-ghost-rest]) > textarea::placeholder { color: transparent; }
.chat-composer-row > .ghost-field { flex: 1; }
.chat-composer-row > .ghost-field > .form-input {
    resize: none;
    field-sizing: content;
    max-height: 9.5em;
}
}
@layer sedna.paint {
.output {
    --output-level-width: 8ch;
    --output-source-width: 20ch;
    --output-max-height: 320px;
    display: block;
    max-height: var(--output-max-height);
    overflow-y: auto;
    margin: 0;
    padding: var(--space-4) 0;
    list-style: none;
    background: var(--code-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-surface);
    color: var(--fg-soft);
    font-family: var(--font-mono);
    font-size: var(--text-3);
    font-variant-numeric: tabular-nums;
    line-height: 1.65;
}
.output-head {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-4) var(--space-6);
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-bottom: none;
    border-start-start-radius: var(--radius-surface);
    border-start-end-radius: var(--radius-surface);
    font-size: var(--text-3);
    color: var(--muted);
}
.output-head + .output {
    border-start-start-radius: 0;
    border-start-end-radius: 0;
}
.output-line {
    display: block;
    padding: 0 var(--space-6);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.output-line:hover { background: var(--bg-hover); }
.output-time { color: var(--muted); }
.output-line--warn   { background: var(--warn-bg);   color: var(--warn-fg); }
.output-line--error  { background: var(--danger-bg); color: var(--danger-fg); }
.output-line--go     { color: var(--go-fg); }
.output-line--note   { color: var(--muted); font-style: italic; }
.output-line--debug  { color: var(--muted); }
.output-line--info .output-level { color: var(--info-fg); }
.output-time,
.output-level,
.output-source { flex: none; white-space: nowrap; }
.output-level {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
    inline-size: var(--output-level-width);
    font-weight: 600;
}
.output-level > i { align-self: center; font-weight: normal; }
.output-source {
    display: inline-block;
    inline-size: var(--output-source-width);
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
    color: var(--muted);
}
.output--columns .output-line,
.output--columns .output-details > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: first baseline;
    column-gap: var(--space-5);
}
.output--columns .output-line { padding-inline-start: var(--space-9); }
.output-msg { flex: 1 1 32ch; min-width: 0; }
.output-id  { color: var(--badge-cyan-fg); }
.output-num { color: var(--badge-orange-fg); }
.output-str { color: var(--badge-teal-fg); }
.output-key { color: var(--muted); }
:is(.output-line--warn, .output-line--error) :is(.output-id, .output-num, .output-str) {
    color: inherit;
    font-weight: 600;
}
.output-details { flex: 1 1 100%; min-width: 0; white-space: normal; }
.output-details > summary {
    position: relative;
    white-space: pre-wrap;
    list-style: none;
    cursor: pointer;
}
.output-details > summary::-webkit-details-marker { display: none; }
.output-details > summary:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring); }
.output-details > summary::before {
    content: '';
    position: absolute;
    inset-inline-start: calc(var(--space-7) * -1);
    inset-block-start: calc(0.5lh - 2px);
    width: 0;
    height: 0;
    border-inline: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: 0.6;
}
.output-details[open] > summary::before { transform: rotate(-180deg); }
.output-trace {
    margin: var(--space-2) 0 var(--space-4);
    padding: var(--space-4) var(--space-6);
    background: var(--surface-soft);
    border-inline-start: 2px solid var(--border-strong);
    border-radius: var(--radius-inner);
    color: var(--fg-soft);
    font: inherit;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.output-line:has(> .output-actions) { position: relative; }
.output-actions {
    position: absolute;
    inset-block-start: calc((1lh - var(--control-height-sm)) / 2);
    inset-inline-end: var(--space-4);
    display: flex;
    gap: var(--space-1);
    background: var(--bg-elevated);
    border-radius: var(--radius-inner);
    box-shadow: var(--shadow-dropdown);
    font-family: var(--font-sans);
    white-space: normal;
    opacity: 0;
}
.output-line:hover > .output-actions,
.output-line:focus-within > .output-actions,
.output-actions:has([aria-expanded="true"]) { opacity: 1; }
@media (hover: none) {
    .output-actions { opacity: 1; background: none; box-shadow: none; }
    .output-line:has(> .output-actions) { padding-inline-end: calc(var(--control-height-sm) * 2 + var(--space-6)); }
}
.output--nowrap .output-line,
.output--nowrap .output-msg {
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
}
.output--nowrap.output--columns .output-line { overflow: visible; }
.output--nowrap.output--columns .output-line,
.output--nowrap.output--columns .output-details > summary { flex-wrap: nowrap; }
.output--nowrap .output-trace { white-space: pre-wrap; }
.output--dense { padding-block: var(--space-2); line-height: 1.35; }
.output-empty,
.output-busy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    color: var(--muted);
    font-family: var(--font-sans);
    font-size: var(--text-4);
    text-align: center;
    white-space: normal;
}
.output-empty { padding-inline: var(--space-7); }
.output-busy { padding: var(--space-4) var(--space-7); }
.output-panel { position: relative; }
.output-jump {
    position: absolute;
    inset-block-end: var(--space-6);
    inset-inline: 0;
    width: max-content;
    margin-inline: auto;
    box-shadow: var(--shadow-dropdown);
}
.output-panel:not(:has(> .output[data-follow-paused])) > .output-jump { display: none; }
.output--terminal .output-line:hover { background: none; }
.output-line--prompt {
    display: flex;
    align-items: baseline;
    gap: var(--space-4);
    color: var(--fg);
}
.output--terminal .output-line--prompt:not(:first-child) { margin-block-start: var(--space-4); }
.output-prompt { flex: none; color: var(--muted); user-select: none; }
.output-cmd { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.output-trace:has(> :is(.output-frames, .output-frames-fold, .output-exception)) { white-space: normal; }
.output-exception { margin: 0 0 var(--space-3); color: var(--fg); white-space: pre-wrap; overflow-wrap: anywhere; }
.output-exception > strong { color: var(--danger-fg); }
.output-frames {
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--font-mono);
}
.output-frame {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: var(--space-6);
    padding-inline-start: var(--space-7);
}
.output-frame > :first-child { flex: 1 1 24ch; min-width: 0; overflow-wrap: anywhere; }
.output-frame-loc { flex: none; margin-inline-start: auto; color: var(--accent); white-space: nowrap; }
.output-frame--external { color: var(--muted); }
.output-frame--external > .output-frame-loc { color: var(--muted); }
.output-frames-fold > summary {
    padding-inline-start: var(--space-7);
    color: var(--muted);
    list-style: none;
    cursor: pointer;
}
.output-frames-fold > summary::-webkit-details-marker { display: none; }
.output-frames-fold > summary::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-inline-end: var(--space-3);
    vertical-align: middle;
    border-inline: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: 0.6;
    transform: rotate(-90deg);
}
.output-frames-fold[open] > summary::before { transform: none; }
.output-frames-fold > summary:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring); border-radius: var(--radius-inner); }
.test-suite {
    --test-caret: 8px;
    border-top: 1px solid var(--divider);
}
.test-suite > summary,
.test-case {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--list-pad-block) var(--list-pad-inline);
}
.test-suite > summary {
    list-style: none;
    cursor: pointer;
    font-weight: 600;
}
.test-suite > summary::-webkit-details-marker { display: none; }
.test-suite > summary::before {
    content: '';
    flex: none;
    width: 0;
    height: 0;
    border-inline: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: 0.6;
    transform: rotate(-90deg);
}
.test-suite[open] > summary::before { transform: none; }
.test-suite > summary:hover { background: var(--bg-hover); }
.test-suite > summary:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus-ring); }
.test-suite > summary > i,
.test-case > i { flex: none; font-size: var(--text-5); }
.test-suite--pass > summary > i,
.test-case--pass > i { color: var(--go-fg); }
.test-suite--fail > summary > i,
.test-case--fail > i { color: var(--danger-fg); }
.test-suite--skip > summary > i,
.test-case--skip > i { color: var(--muted); }
.test-suite-name,
.test-case-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-family: var(--font-mono); font-size: var(--text-3); }
.test-suite-count { flex: none; color: var(--muted); font-size: var(--text-3); font-weight: 400; }
.test-time { flex: none; color: var(--muted); font-size: var(--text-3); font-weight: 400; font-variant-numeric: tabular-nums; }
.test-suite-name,
.test-case-name,
.test-suite-count,
.test-time { line-height: round(1.4em, 2px); text-box: trim-both cap alphabetic; padding-block: var(--cap-gap); }
.test-cases { margin: 0; padding: 0; list-style: none; }
.test-case { flex-wrap: wrap; padding-inline-start: calc(var(--list-pad-inline) + var(--test-caret) + var(--space-4)); }
.test-case + .test-case { border-top: 1px solid var(--divider); }
.test-case--skip > .test-case-name { color: var(--muted); }
.test-case > .output-trace {
    flex: 1 1 100%;
    min-width: 0;
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-3);
    line-height: 1.65;
}
}
@layer sedna.paint {
.voice-session {
    display: grid;
    justify-items: center;
    gap: var(--space-9);
    padding: var(--space-11) var(--space-8) var(--space-10);
    text-align: center;
}
.voice-stage { display: grid; place-items: center; inline-size: 220px; block-size: 220px; max-inline-size: 100%; }
.voice-who { font-size: var(--text-2); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.voice-caption {
    max-inline-size: 30ch;
    min-block-size: calc(2 * 1.45em);
    margin: 0;
    font-size: var(--text-8);
    line-height: 1.45;
    text-wrap: balance;
}
.voice-caption-interim { color: var(--muted); }
.voice-controls { display: flex; align-items: center; gap: var(--space-6); }
.voice-controls > .btn { inline-size: var(--control-height-lg); min-height: var(--control-height-lg); padding: 0; border-radius: 50%; justify-content: center; }
.voice-controls > .btn i { font-size: var(--text-8); }
.voice-bars { display: inline-flex; align-items: center; gap: var(--space-1); block-size: 28px; }
.voice-bars > i {
    --bar: 0.6;
    inline-size: 3px;
    block-size: min(100%, calc(4px + var(--level, 0) * var(--bar) * 130%));
    border-radius: var(--radius-pill);
    background: var(--agent-to);
    transition: block-size 80ms linear;
}
.voice-bars > i:nth-child(7n+1) { --bar: 0.42; }
.voice-bars > i:nth-child(7n+2) { --bar: 0.78; }
.voice-bars > i:nth-child(7n+3) { --bar: 1; }
.voice-bars > i:nth-child(7n+4) { --bar: 0.64; }
.voice-bars > i:nth-child(7n+5) { --bar: 0.9; }
.voice-bars > i:nth-child(7n+6) { --bar: 0.5; }
.voice-bars > i:nth-child(7n+7) { --bar: 0.3; }
.voice-bars--mine > i { background: var(--brand-soft); }
.btn-mic { border-radius: 50%; transition: box-shadow 80ms linear, background var(--motion-fast), color var(--motion-fast); }
.btn-mic[data-state="listening"],
.btn-mic[data-state="listening"]:hover {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--on-solid);
    box-shadow: 0 0 0 calc(2px + var(--level, 0) * 8px) var(--brand-tint-strong);
}
.btn-mic[data-state="muted"],
.btn-mic[data-state="muted"]:hover { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-fg); }
}
@layer sedna.paint {
:where(:has(> .guard)) { position: relative; }
.guard {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-7);
    background: var(--overlay);
    backdrop-filter: blur(2px);
    border-radius: inherit;
}
.guard-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
    max-width: 280px;
    padding: var(--space-8);
    --surface-here: var(--bg-elevated);
    --muted-here: var(--muted);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-surface);
    box-shadow: var(--shadow-float);
    color: var(--fg-soft);
    font-size: var(--text-4);
    text-align: center;
}
.guard-card > p { margin: 0; }
.guard-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--surface-strong);
    border-radius: 50%;
    color: var(--muted);
    font-size: var(--text-8);
}
}
@layer sedna.paint {
.mochi {
    --size: 112px;
    --perch-inset: 24px;
    --mochi-body: var(--mochi-pink);
    --mochi-limb: var(--mochi-pink-limb);
    --mochi-cup:  var(--mochi-mint);
    --px: 0px; --py: 0px; --prot: 0deg; --pivot-y: 120px; --lean: 0deg; --clip: none;
    --legs-stand: 1; --legs-sit: 0; --g-stand: 1; --g-sit: 0; --leg-l: 0deg; --leg-r: 0deg;
    --bl-a: 113deg; --bl-l: 15px; --bl-on: 1; --bl-hand: 1;
    --br-a: 67deg;  --br-l: 15px; --br-on: 1; --br-hand: 1;
    --fl-a: 58deg;  --fl-l: 22px; --fl-on: 0; --fl-drop: 1; --fl-seg: 0;
    --fr-a: 122deg; --fr-l: 22px; --fr-on: 0; --fr-drop: 1; --fr-seg: 0;
    --grip-l: 0; --grip-r: 0; --grip-side: 0; --grip-hl: 0; --grip-hr: 0;
    --finger: 0; --cup-glow: 0;
    --look-x: 0px; --look-y: 0px;
    --e-open: 1; --e-wide: 0; --e-happy: 0; --e-closed: 0; --e-love: 0; --e-wink: 0;
    --brow-worry: 0; --brow-focus: 0;
    --m-smile: 1; --m-grin: 0; --m-flat: 0; --m-frown: 0; --m-o: 0; --m-o-small: 0; --m-cat: 0; --m-talk: 0;
    --cheeks: 0.5;
    --pose-d: calc(var(--motion-slow) * 2); --reach-d: calc(var(--motion-slow) * 2.2); --look-d: calc(var(--motion-slow) * 1.6);
    --a-place: none; --a-place-d: 3.2s;
    --a-rig: none; --a-rig-d: 1s; --a-ground: none;
    --a-lean: none;
    --a-tilt: none; --a-tilt-d: 3s;
    --a-breathe: sedna-mochi-breathe; --a-breathe-d: 3.4s;
    --a-bl: none; --a-br: none; --a-arm-d: 1s;
    --a-swing: none; --a-kick: none; --a-tap: none; --a-scan: none; --a-chatter: none;
    --a-glow: none; --a-heart: none; --a-blink: sedna-mochi-blink;
    --a-screen: none; --a-bubble: none; --a-confetti: none; --a-sweat: none; --a-z: none;
    --a-arc: none; --a-pop: none; --a-check: none; --a-float: none;
    --play: running;
    --loops: infinite;
    --p-think: none; --p-laptop: none; --p-confetti: none; --p-sweat: none; --p-zzz: none;
    --p-waves: none; --p-pop: none; --p-check: none; --p-hearts: none;
    display: inline-block;
    flex: none;
    inline-size: var(--size);
    block-size: var(--size);
    vertical-align: middle;
}
.mochi > svg { display: block; inline-size: 100%; block-size: 100%; overflow: visible; }
.mochi--sm { --size: 64px; }
.mochi--md { --size: 88px; }
.mochi--lg { --size: 140px; }
.mochi--xl { --size: 220px; }
.mochi--still { --loops: 0; }
.mochi--bust { overflow: hidden; border-radius: 50%; background: var(--surface-strong); }
.mochi--bust > svg {
    inline-size: calc(var(--size) * 160 / 100);
    block-size: calc(var(--size) * 160 / 100);
    margin-inline-start: calc(var(--size) * -30 / 100);
    margin-block-start: calc(var(--size) * -30 / 100);
}
.mochi[data-tone="mint"]  { --mochi-body: var(--mochi-mint);  --mochi-limb: var(--mochi-mint-limb);  --mochi-cup: var(--mochi-pink); }
.mochi[data-tone="sky"]   { --mochi-body: var(--mochi-sky);   --mochi-limb: var(--mochi-sky-limb);   --mochi-cup: var(--mochi-lemon); }
.mochi[data-tone="lemon"] { --mochi-body: var(--mochi-lemon); --mochi-limb: var(--mochi-lemon-limb); --mochi-cup: var(--mochi-sky); }
.mochi[data-tone="lilac"] { --mochi-body: var(--mochi-lilac); --mochi-limb: var(--mochi-lilac-limb); --mochi-cup: var(--mochi-mint); }
.mochi[data-tone="coral"] { --mochi-body: var(--mochi-coral); --mochi-limb: var(--mochi-coral-limb); --mochi-cup: var(--agent-to); }
.mochi:where([data-perch="sit"], [data-action="think"], [data-action="work"], [data-action="listen"], [data-action="sleep"]):where(:not([data-perch="stand"], [data-perch="side"], [data-perch="point"], [data-perch="hang"])) {
    --legs-stand: 0; --legs-sit: 1; --g-stand: 0; --g-sit: 1;
    --bl-on: 0; --br-on: 0; --fl-on: 1; --fr-on: 1;
    --a-swing: sedna-mochi-swing;
}
.mochi[data-action="wave"]      { --br-on: 1; --fr-on: 0; --br-a: -53deg; --br-l: 30px; --a-br: sedna-mochi-wave; --a-arm-d: 0.9s; --a-tilt: sedna-mochi-lean; --a-tilt-d: 1.8s; --m-smile: 0; --m-grin: 1; --cheeks: 0.8; }
.mochi[data-action="point"]     { --br-on: 1; --fr-on: 0; --br-a: -14deg; --br-l: 25px; --finger: 1; --a-br: sedna-mochi-jab; --a-arm-d: 1.4s; --look-x: 3px; --a-tilt: sedna-mochi-lean; --a-tilt-d: 2.8s; }
.mochi[data-action="think"]     { --a-bubble: sedna-mochi-bubble; --fr-on: 1; --br-on: 0; --fr-a: 189deg; --fr-l: 26px; --fr-seg: 1; --fr-drop: 0; --look-x: -2px; --look-y: -3px; --m-smile: 0; --m-flat: 1; --p-think: inline; --a-tilt: sedna-mochi-ponder; --a-tilt-d: 4.2s; }
.mochi[data-action="work"]      { --a-screen: sedna-mochi-screen; --fl-on: 1; --fr-on: 1; --bl-on: 0; --br-on: 0; --fl-a: 49deg; --fl-l: 18px; --fr-a: 131deg; --fr-l: 18px; --fl-drop: 0; --fr-drop: 0; --a-tap: sedna-mochi-tap; --a-swing: none; --look-y: 3px; --p-laptop: inline; }
.mochi[data-action="talk"]      { --a-chatter: sedna-mochi-chatter; --a-tilt: sedna-mochi-chat; --a-tilt-d: 2.4s; --cheeks: 0.7; }
.mochi[data-action="listen"]    { --a-glow: sedna-mochi-glow; --a-arc: sedna-mochi-arc; --fr-on: 1; --br-on: 0; --fr-a: -45deg; --fr-l: 12px; --fr-seg: 1; --fr-drop: 0; --cup-glow: 1; --p-waves: inline; --look-x: 2px; --a-tilt: sedna-mochi-listen; --a-tilt-d: 3.2s; }
.mochi[data-action="celebrate"] { --a-confetti: sedna-mochi-confetti; --bl-on: 1; --br-on: 1; --fl-on: 0; --fr-on: 0; --bl-a: 238deg; --bl-l: 30px; --br-a: -58deg; --br-l: 30px; --a-bl: sedna-mochi-pump-l; --a-br: sedna-mochi-pump-r; --a-arm-d: 1s; --a-rig: sedna-mochi-jump; --a-rig-d: 1s; --a-ground: sedna-mochi-ground-jump; --p-confetti: inline; --e-open: 0; --e-happy: 1; --m-smile: 0; --m-grin: 1; --cheeks: 1; }
.mochi[data-action="oops"]      { --a-sweat: sedna-mochi-sweat; --bl-a: 97deg; --bl-l: 16px; --br-a: 83deg; --br-l: 16px; --brow-worry: 1; --m-smile: 0; --m-frown: 1; --cheeks: 0.3; --p-sweat: inline; --a-tilt: sedna-mochi-wobble; --a-tilt-d: 2.8s; }
.mochi[data-action="sleep"]     { --a-z: sedna-mochi-z; --a-blink: none; --e-open: 0; --e-closed: 1; --m-smile: 0; --m-o-small: 1; --cheeks: 0.65; --p-zzz: inline; --a-breathe: sedna-mochi-snooze; --a-breathe-d: 4.2s; --a-swing: none; }
.mochi[data-action="surprised"] { --a-pop: sedna-mochi-pop; --bl-on: 1; --br-on: 1; --fl-on: 0; --fr-on: 0; --bl-a: 221deg; --bl-l: 18px; --br-a: -41deg; --br-l: 18px; --e-open: 0; --e-wide: 1; --m-smile: 0; --m-o: 1; --cheeks: 0.3; --p-pop: inline; --a-rig: sedna-mochi-startle; --a-rig-d: 2.6s; }
.mochi[data-action="done"]      { --a-check: sedna-mochi-check; --e-open: 0; --e-happy: 1; --m-smile: 0; --m-grin: 1; --cheeks: 0.9; --p-check: inline; --a-rig: sedna-mochi-nod; --a-rig-d: 2.6s; }
.mochi[data-action="love"]      { --a-float: sedna-mochi-heart; --a-heart: sedna-mochi-beat; --e-open: 0; --e-love: 1; --m-smile: 0; --m-cat: 1; --cheeks: 1; --p-hearts: inline; --a-tilt: sedna-mochi-sway; --a-tilt-d: 2.8s; }
.mochi[data-perch="sit"][data-action="celebrate"] { --a-rig: sedna-mochi-seat-bounce; --a-ground: none; }
.mochi[data-mood] {
    --e-open: 1; --e-wide: 0; --e-happy: 0; --e-closed: 0; --e-love: 0; --e-wink: 0; --brow-worry: 0; --brow-focus: 0; --a-heart: none; --a-blink: sedna-mochi-blink;
    --m-smile: 1; --m-grin: 0; --m-flat: 0; --m-frown: 0; --m-o: 0; --m-o-small: 0; --m-cat: 0; --cheeks: 0.5;
}
.mochi[data-mood="happy"]     { --e-open: 0; --e-happy: 1; --m-smile: 0; --m-grin: 1; --cheeks: 0.9; }
.mochi[data-mood="excited"]   { --e-open: 0; --e-wide: 1; --m-smile: 0; --m-grin: 1; --cheeks: 1; }
.mochi[data-mood="surprised"] { --e-open: 0; --e-wide: 1; --m-smile: 0; --m-o: 1; --cheeks: 0.3; }
.mochi[data-mood="curious"]   { --look-x: 2px; --look-y: -2px; --m-smile: 0; --m-o-small: 1; --cheeks: 0.6; }
.mochi[data-mood="focused"]   { --brow-focus: 1; --m-smile: 0; --m-flat: 1; --cheeks: 0.3; }
.mochi[data-mood="worried"]   { --brow-worry: 1; --m-smile: 0; --m-frown: 1; --cheeks: 0.2; }
.mochi[data-mood="sleepy"]    { --a-blink: none; --e-open: 0; --e-closed: 1; --m-smile: 0; --m-o-small: 1; --cheeks: 0.6; }
.mochi[data-mood="love"]      { --a-heart: sedna-mochi-beat; --e-open: 0; --e-love: 1; --m-smile: 0; --m-cat: 1; --cheeks: 1; }
.mochi[data-mood="wink"]      { --e-open: 0; --e-wink: 1; --m-smile: 0; --m-cat: 1; --cheeks: 0.9; }
.mochi[data-action="talk"] { --m-smile: 0; --m-grin: 0; --m-flat: 0; --m-frown: 0; --m-o: 0; --m-o-small: 0; --m-cat: 0; --m-talk: 1; }
.mochi-host { position: relative; isolation: isolate; }
.mochi[data-perch] { position: absolute; z-index: 1; pointer-events: none; }
.mochi[data-perch="sit"] { inset-block-start: calc(var(--size) * -0.75); inset-inline-end: var(--perch-inset); }
.mochi[data-perch="peek"],
.mochi[data-perch="look"] {
    inset-block-start: calc(var(--size) * -0.65);
    inset-inline-end: var(--perch-inset);
    --clip: inset(-80px -80px 56px -80px) view-box; --py: 16px; --grip-l: 1; --grip-r: 1;
    --bl-on: 0; --br-on: 0; --fl-on: 0; --fr-on: 0; --legs-stand: 0; --legs-sit: 0; --g-stand: 0; --g-sit: 0;
    --a-rig: none; --a-ground: none; --p-laptop: none; --a-screen: none;
}
.mochi[data-perch="look"] { --py: 7px; --prot: -4deg; --look-y: 4px; --a-scan: sedna-mochi-read; }
.mochi[data-perch="peek"][data-action="wave"],
.mochi[data-perch="look"][data-action="wave"] { --grip-r: 0; --br-on: 1; --br-a: -48deg; --br-l: 42px; }
.mochi[data-perch="peek"][data-action="point"],
.mochi[data-perch="look"][data-action="point"] { --grip-r: 0; --br-on: 1; }
.mochi[data-perch="stand"] { inset-block-end: calc(var(--size) * -0.0375); inset-inline-end: var(--perch-inset); }
.mochi[data-perch="side"] {
    inset-block-end: calc(var(--size) * -0.0375);
    inset-inline-start: calc(100% - var(--size) * 0.375);
    --clip: inset(-80px -80px -80px 60px) view-box; --px: -18px; --lean: -10deg; --a-lean: sedna-mochi-peek-out;
    --leg-l: 5deg; --leg-r: -12deg; --grip-side: 1; --bl-on: 0; --fl-on: 0; --look-x: 3px;
    --a-rig: none; --a-ground: none; --p-laptop: none; --a-screen: none;
}
.mochi[data-perch="side"][data-action="work"] { --fr-on: 0; --br-on: 1; --a-tap: none; }
.mochi[data-perch="hang"] {
    inset-block-start: calc(100% - var(--size) * 0.1875);
    inset-inline-end: var(--perch-inset);
    --clip: inset(28px -80px -80px -80px) view-box; --pivot-y: 30px; --a-place: sedna-mochi-hang;
    --legs-stand: 1; --legs-sit: 0; --g-stand: 0; --g-sit: 0; --a-kick: sedna-mochi-kick;
    --bl-on: 1; --br-on: 1; --fl-on: 0; --fr-on: 0; --bl-hand: 0; --br-hand: 0; --grip-hl: 1; --grip-hr: 1; --finger: 0;
    --bl-a: 266.7deg; --bl-l: 70px; --br-a: -86.7deg; --br-l: 70px;
    --a-rig: none; --a-ground: none; --a-bl: none; --a-br: none; --p-laptop: none; --a-screen: none;
}
.mochi[data-perch="hang"][data-action="wave"] { --grip-hr: 0; --br-hand: 1; --br-a: -40deg; --br-l: 34px; --a-br: sedna-mochi-wave; }
.mochi[data-perch="hang"][data-action="point"] { --grip-hr: 0; --br-hand: 1; --finger: 1; --br-a: -14deg; --br-l: 25px; --a-br: sedna-mochi-jab; }
.mochi[data-perch="point"] {
    inset-inline-end: calc(anchor(start) + 4px - var(--size) * 0.03);
    inset-block-start: calc(anchor(center) - var(--size) * 0.569);
}
.mochi[data-perch="point"][data-facing="start"] {
    inset-inline-end: auto;
    inset-inline-start: calc(anchor(end) + 4px - var(--size) * 0.03);
}
.mochi[data-facing="start"] > svg { transform: scaleX(-1); }
.mochi-host--inline { display: inline-block; vertical-align: middle; }
.mochi-host--inline > .mochi[data-perch] { --perch-inset: calc(50% - var(--size) / 2); }
.mochi-host:has(> :is(.divider, .divider-labelled)) { margin-block: var(--space-8); }
.mochi-host > :is(.divider, .divider-labelled) { margin-block: 0; }
.mochi-host:has(> .divider-labelled) > .mochi[data-perch="sit"]   { inset-block-start: calc(50% - var(--size) * 0.75); }
.mochi-host:has(> .divider-labelled) > .mochi[data-perch="stand"] { inset-block-end: calc(50% - var(--size) * 0.0375); }
.mochi-host:has(> .divider-labelled) > .mochi[data-perch="hang"]  { inset-block-start: calc(50% - var(--size) * 0.1875); }
.mochi-host--room { --size: 112px; }
.mochi-host--room:has(> .mochi--sm) { --size: 64px; }
.mochi-host--room:has(> .mochi--md) { --size: 88px; }
.mochi-host--room:has(> .mochi--lg) { --size: 140px; }
.mochi-host--room:has(> .mochi--xl) { --size: 220px; }
.mochi-host--room > .mochi { --size: inherit; }
.mochi-host--room:has(> .mochi[data-perch="sit"])  { margin-block-start: calc(var(--size) * 0.8); }
.mochi-host--room:has(> .mochi:is([data-perch="peek"], [data-perch="look"])) { margin-block-start: calc(var(--size) * 0.4); }
.mochi-host--room:has(> .mochi[data-perch="hang"]) { margin-block-end: calc(var(--size) * 0.82); }
.mochi-host--room:has(> .mochi[data-perch="side"]) { margin-inline-end: calc(var(--size) * 0.65); }
.mochi-host--room:has(> .mochi[data-perch="point"]) { padding-block: calc(var(--size) * 0.4); padding-inline-start: calc(var(--size) * 1.05); }
.mochi-host--room:has(> .mochi[data-perch="point"][data-facing="start"]) { padding-inline: 0 calc(var(--size) * 1.05); }
.mochi-host--room:has(> :is(.divider, .divider-labelled)):has(> .mochi[data-perch="stand"]) { margin-block-start: calc(var(--size) * 0.8); }
.mochi-host--room:has(> :is(.divider, .divider-labelled)):has(> .mochi[data-perch="sit"]) { margin-block-end: calc(var(--size) * 0.25); }
.sedna-mochi-body  { fill: var(--mochi-body); }
.sedna-mochi-palm  { fill: var(--mochi-body); }
.sedna-mochi-seg   { fill: var(--mochi-limb); }
.sedna-mochi-cup   { fill: var(--mochi-cup); }
.sedna-mochi-sheen-hi  { stop-color: var(--mochi-light); stop-opacity: 0.34; }
.sedna-mochi-sheen-mid { stop-color: var(--mochi-light); stop-opacity: 0; }
.sedna-mochi-sheen-lo  { stop-color: var(--mochi-dark); stop-opacity: 0.1; }
.sedna-mochi-leg-hi    { stop-color: var(--mochi-leg-hi); }
.sedna-mochi-leg-mid   { stop-color: var(--mochi-leg-mid); }
.sedna-mochi-leg-lo    { stop-color: var(--mochi-leg-lo); }
.sedna-mochi-shadow-flood { flood-color: var(--mochi-shade); }
.sedna-mochi-light-flood  { flood-color: var(--mochi-light); }
.sedna-mochi-band  { fill: none; stroke: var(--mochi-band); stroke-width: 5; }
.sedna-mochi-boom  { fill: none; stroke: var(--mochi-band); stroke-width: 3; stroke-linecap: round; }
.sedna-mochi-ink   { fill: var(--mochi-ink); }
.sedna-mochi-grin  { fill: var(--mochi-ink); stroke: var(--mochi-ink); stroke-width: 1.5; stroke-linejoin: round; }
.sedna-mochi-line  { fill: none; stroke: var(--mochi-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.sedna-mochi-lid   { fill: none; stroke: var(--mochi-ink); stroke-width: 3.2; stroke-linecap: round; }
.sedna-mochi-shine { fill: var(--mochi-light); opacity: 0.85; }
.sedna-mochi-blush { fill: var(--mochi-blush); opacity: 0.5; }
.sedna-mochi-tongue { fill: var(--mochi-tongue); }
.sedna-mochi-drop  { fill: var(--mochi-shade); opacity: 0.22; }
.sedna-mochi-drop--long { opacity: 0.14; }
.sedna-mochi-ao    { fill: var(--mochi-shade); opacity: 0.35; }
.sedna-mochi-ground { fill: var(--mochi-shade); opacity: calc(var(--g-stand) * 0.2); transform-origin: 80px 154px; animation: var(--a-ground) var(--a-rig-d) cubic-bezier(.45, 0, .55, 1) infinite; transition: opacity var(--motion-slow); }
.sedna-mochi-seat  { fill: var(--mochi-shade); opacity: calc(var(--g-sit) * 0.18); transition: opacity var(--motion-slow); }
.sedna-mochi-finger { fill: var(--mochi-body); opacity: var(--finger); transition: opacity var(--motion-mid); }
.sedna-mochi-glow  { fill: none; stroke: var(--mochi-cup); stroke-width: 4.5; opacity: calc(var(--cup-glow) * 0.55); transition: opacity var(--motion-slow); animation: var(--a-glow) ease-in-out infinite; animation-duration: 1.4s; }
.sedna-mochi-screen { fill: var(--mochi-cup); animation: var(--a-screen) ease-in-out infinite; animation-duration: 1.6s; }
.sedna-mochi-deck  { fill: var(--mochi-deck); }
.sedna-mochi-part  { transition: opacity var(--motion-fast) ease; }
.sedna-mochi-e-open     { opacity: var(--e-open); }
.sedna-mochi-e-wide     { opacity: var(--e-wide); }
.sedna-mochi-e-happy    { opacity: var(--e-happy); }
.sedna-mochi-e-closed   { opacity: var(--e-closed); }
.sedna-mochi-e-love     { opacity: var(--e-love); }
.sedna-mochi-e-wink     { opacity: var(--e-wink); }
.sedna-mochi-brow-worry { opacity: var(--brow-worry); }
.sedna-mochi-brow-focus { opacity: var(--brow-focus); }
.sedna-mochi-cheeks     { opacity: var(--cheeks); }
.sedna-mochi-m-smile    { opacity: var(--m-smile); }
.sedna-mochi-m-grin     { opacity: var(--m-grin); }
.sedna-mochi-m-flat     { opacity: var(--m-flat); }
.sedna-mochi-m-frown    { opacity: var(--m-frown); }
.sedna-mochi-m-o        { opacity: var(--m-o); }
.sedna-mochi-m-o-small  { opacity: var(--m-o-small); }
.sedna-mochi-m-cat      { opacity: var(--m-cat); }
.sedna-mochi-m-talk     { opacity: var(--m-talk); }
.sedna-mochi-legs-stand { opacity: var(--legs-stand); transition: opacity var(--motion-fast); }
.sedna-mochi-legs-sit   { opacity: var(--legs-sit); transition: opacity var(--motion-fast); }
.sedna-mochi-grip-l     { opacity: var(--grip-l); transition: opacity var(--motion-slow); }
.sedna-mochi-grip-r     { opacity: var(--grip-r); transition: opacity var(--motion-slow); }
.sedna-mochi-grip-side  { opacity: var(--grip-side); transition: opacity var(--motion-slow); }
.sedna-mochi-grip-hl    { opacity: var(--grip-hl); transition: opacity var(--motion-slow); }
.sedna-mochi-grip-hr    { opacity: var(--grip-hr); transition: opacity var(--motion-slow); }
.sedna-mochi-p-think    { display: var(--p-think); }
.sedna-mochi-p-laptop   { display: var(--p-laptop); }
.sedna-mochi-p-confetti { display: var(--p-confetti); }
.sedna-mochi-p-sweat    { display: var(--p-sweat); }
.sedna-mochi-p-zzz      { display: var(--p-zzz); }
.sedna-mochi-p-waves    { display: var(--p-waves); }
.sedna-mochi-p-pop      { display: var(--p-pop); }
.sedna-mochi-p-check    { display: var(--p-check); }
.sedna-mochi-p-hearts   { display: var(--p-hearts); }
.sedna-mochi-clip  { clip-path: var(--clip); }
.sedna-mochi-place {
    transform: translate(var(--px), var(--py)) rotate(var(--prot));
    transform-origin: 80px var(--pivot-y);
    transition: transform var(--pose-d) cubic-bezier(.34, 1.25, .5, 1);
    animation: var(--a-place) var(--a-place-d) cubic-bezier(.45, 0, .55, 1) infinite;
}
.sedna-mochi-rig     { transform-origin: 80px 154px; animation: var(--a-rig) var(--a-rig-d) cubic-bezier(.45, 0, .55, 1) infinite; }
.sedna-mochi-lean    { transform: skewX(var(--lean)); transform-origin: 80px 120px; transition: transform var(--pose-d) cubic-bezier(.34, 1.25, .5, 1); animation: var(--a-lean) cubic-bezier(.45, 0, .55, 1) infinite; animation-duration: 4.4s; }
.sedna-mochi-tilt    { transform-origin: 80px 120px; animation: var(--a-tilt) var(--a-tilt-d) cubic-bezier(.45, 0, .55, 1) infinite; }
.sedna-mochi-breathe { transform-origin: 80px 120px; animation: var(--a-breathe) var(--a-breathe-d) steps(1, end) infinite; }
.sedna-mochi-eyes    { transform: translate(var(--look-x), var(--look-y)); transition: transform var(--look-d) cubic-bezier(.34, 1.3, .5, 1); }
.sedna-mochi-scan    { animation: var(--a-scan) cubic-bezier(.45, 0, .55, 1) infinite; animation-duration: 3.6s; }
.sedna-mochi-blink   { transform-origin: 80px 78px; animation: var(--a-blink) ease-in-out infinite; animation-duration: 5.2s; }
.sedna-mochi-talk    { transform-origin: 80px 88px; transform: scale(1, calc(0.35 + var(--level, 0.45) * 1.1)); transition: transform 80ms linear; animation: var(--a-chatter) ease-in-out infinite; animation-duration: 0.9s; }
.sedna-mochi-leg-l  { rotate: var(--leg-l); transform-origin: 70px 110px; transition: rotate var(--pose-d) cubic-bezier(.34, 1.25, .5, 1); animation: var(--a-kick) cubic-bezier(.45, 0, .55, 1) infinite; animation-duration: 1.8s; }
.sedna-mochi-leg-r  { rotate: var(--leg-r); transform-origin: 90px 110px; transition: rotate var(--pose-d) cubic-bezier(.34, 1.25, .5, 1); animation: var(--a-kick) cubic-bezier(.45, 0, .55, 1) infinite; animation-duration: 1.8s; animation-delay: -0.9s; }
.sedna-mochi-foot-l { rotate: calc(var(--leg-l) * -1); transform-origin: 70px 148px; transition: rotate var(--pose-d) cubic-bezier(.34, 1.25, .5, 1); }
.sedna-mochi-foot-r { rotate: calc(var(--leg-r) * -1); transform-origin: 90px 148px; transition: rotate var(--pose-d) cubic-bezier(.34, 1.25, .5, 1); }
.sedna-mochi-shin-l { transform-origin: 63px 121px; animation: var(--a-swing) cubic-bezier(.45, 0, .55, 1) infinite; animation-duration: 2.8s; }
.sedna-mochi-shin-r { transform-origin: 97px 121px; animation: var(--a-swing) cubic-bezier(.45, 0, .55, 1) infinite; animation-duration: 2.8s; animation-delay: -1.4s; }
.sedna-mochi-arm-bl { transform: translate(40px, 100px) rotate(var(--bl-a)); opacity: var(--bl-on); }
.sedna-mochi-arm-br { transform: translate(120px, 100px) rotate(var(--br-a)); opacity: var(--br-on); }
.sedna-mochi-arm-fl { transform: translate(40px, 100px) rotate(var(--fl-a)); opacity: var(--fl-on); }
.sedna-mochi-arm-fr { transform: translate(120px, 100px) rotate(var(--fr-a)); opacity: var(--fr-on); }
.sedna-mochi-arm-bl,
.sedna-mochi-arm-br,
.sedna-mochi-arm-fl,
.sedna-mochi-arm-fr { transition: transform var(--reach-d) cubic-bezier(.34, 1.3, .5, 1), opacity var(--motion-mid) ease; }
.sedna-mochi-seg-bl { width: var(--bl-l); }
.sedna-mochi-seg-br { width: var(--br-l); }
.sedna-mochi-seg-fl { width: var(--fl-l); opacity: var(--fl-seg); }
.sedna-mochi-seg-fr { width: var(--fr-l); opacity: var(--fr-seg); }
.sedna-mochi-seg-bl,
.sedna-mochi-seg-br,
.sedna-mochi-seg-fl,
.sedna-mochi-seg-fr { transition: width var(--reach-d) cubic-bezier(.34, 1.3, .5, 1), opacity var(--motion-mid) ease; }
.sedna-mochi-reach-bl { transform: translateX(var(--bl-l)); }
.sedna-mochi-reach-br { transform: translateX(var(--br-l)); }
.sedna-mochi-reach-fl { transform: translateX(var(--fl-l)) rotate(calc(var(--fl-a) * -1)); }
.sedna-mochi-reach-fr { transform: translateX(var(--fr-l)) rotate(calc(var(--fr-a) * -1)); }
.sedna-mochi-reach-bl,
.sedna-mochi-reach-br,
.sedna-mochi-reach-fl,
.sedna-mochi-reach-fr { transition: transform var(--reach-d) cubic-bezier(.34, 1.3, .5, 1); }
.sedna-mochi-hand-bl { opacity: var(--bl-hand); transition: opacity var(--motion-mid) ease; }
.sedna-mochi-hand-br { opacity: var(--br-hand); transition: opacity var(--motion-mid) ease; }
.sedna-mochi-drop-fl { opacity: calc(var(--fl-drop) * 0.22); }
.sedna-mochi-drop-fr { opacity: calc(var(--fr-drop) * 0.22); }
.sedna-mochi-act-bl { animation: var(--a-bl) var(--a-arm-d) cubic-bezier(.45, 0, .55, 1) infinite; }
.sedna-mochi-act-br { animation: var(--a-br) var(--a-arm-d) cubic-bezier(.45, 0, .55, 1) infinite; }
.sedna-mochi-tap-fl { animation: var(--a-tap) ease-in-out infinite; animation-duration: 0.34s; }
.sedna-mochi-tap-fr { animation: var(--a-tap) ease-in-out infinite; animation-duration: 0.34s; animation-delay: -0.17s; }
.sedna-mochi-bubble   { fill: var(--mochi-bubble); stroke: var(--mochi-bubble-edge); stroke-width: 1.5; transform-box: fill-box; transform-origin: 50% 50%; animation: var(--a-bubble) cubic-bezier(.34, 1.4, .5, 1) infinite; animation-duration: 2.8s; }
.sedna-mochi-bubble-2 { animation-delay: 0.18s; }
.sedna-mochi-bubble-3 { animation-delay: 0.36s; }
.sedna-mochi-confetti { transform-box: fill-box; transform-origin: 50% 50%; animation: var(--a-confetti) cubic-bezier(.3, .7, .4, 1) infinite; animation-duration: 1.6s; }
.sedna-mochi-confetti-a { fill: var(--mochi-mint); }
.sedna-mochi-confetti-b { fill: var(--mochi-spark); }
.sedna-mochi-confetti-c { fill: var(--mochi-sky); }
.sedna-mochi-confetti-d { fill: var(--mochi-blush); }
.sedna-mochi-confetti-e { fill: var(--mochi-lilac); }
.sedna-mochi-delay-1 { animation-delay: 0.2s; }
.sedna-mochi-delay-2 { animation-delay: 0.45s; }
.sedna-mochi-delay-3 { animation-delay: 0.65s; }
.sedna-mochi-delay-4 { animation-delay: 0.85s; }
.sedna-mochi-delay-5 { animation-delay: 1.05s; }
.sedna-mochi-sweat { fill: var(--mochi-sweat); animation: var(--a-sweat) cubic-bezier(.5, 0, .75, 1) infinite; animation-duration: 2.8s; }
.sedna-mochi-z     { fill: none; stroke: var(--mochi-zzz); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transform-box: fill-box; transform-origin: 50% 50%; animation: var(--a-z) cubic-bezier(.3, .6, .5, 1) infinite; animation-duration: 3.6s; }
.sedna-mochi-z-2   { animation-delay: 1.2s; }
.sedna-mochi-z-3   { animation-delay: 2.4s; }
.sedna-mochi-arc   { fill: none; stroke: var(--mochi-cup); stroke-width: 2.6; stroke-linecap: round; animation: var(--a-arc) ease-out infinite; animation-duration: 1.5s; }
.sedna-mochi-arc-2 { animation-delay: 0.25s; }
.sedna-mochi-pop   { stroke: var(--mochi-ink); stroke-width: 3; stroke-linecap: round; transform-origin: 80px 60px; animation: var(--a-pop) cubic-bezier(.34, 1.4, .5, 1) infinite; animation-duration: 2.6s; }
.sedna-mochi-check { transform-box: fill-box; transform-origin: 50% 50%; animation: var(--a-check) cubic-bezier(.34, 1.5, .5, 1) infinite; animation-duration: 2.6s; }
.sedna-mochi-check-bg   { fill: var(--go-solid); }
.sedna-mochi-check-mark { fill: none; stroke: var(--on-solid); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.sedna-mochi-heart      { fill: var(--mochi-tongue); transform-box: fill-box; transform-origin: 50% 50%; animation: var(--a-heart) ease-in-out infinite; animation-duration: 0.9s; }
.sedna-mochi-float-heart   { fill: var(--mochi-tongue); transform-box: fill-box; transform-origin: 50% 50%; animation: var(--a-float) ease-out infinite; animation-duration: 2.6s; }
.sedna-mochi-float-heart-2 { animation-delay: 0.85s; }
.sedna-mochi-float-heart-3 { animation-delay: 1.7s; }
.mochi[data-mochi-away] { --play: paused; content-visibility: hidden; }
.sedna-mochi-ground,
.sedna-mochi-glow,
.sedna-mochi-screen,
.sedna-mochi-place,
.sedna-mochi-rig,
.sedna-mochi-lean,
.sedna-mochi-tilt,
.sedna-mochi-breathe,
.sedna-mochi-scan,
.sedna-mochi-blink,
.sedna-mochi-talk,
.sedna-mochi-leg-l,
.sedna-mochi-leg-r,
.sedna-mochi-shin-l,
.sedna-mochi-shin-r,
.sedna-mochi-act-bl,
.sedna-mochi-act-br,
.sedna-mochi-tap-fl,
.sedna-mochi-tap-fr,
.sedna-mochi-bubble,
.sedna-mochi-confetti,
.sedna-mochi-sweat,
.sedna-mochi-z,
.sedna-mochi-arc,
.sedna-mochi-pop,
.sedna-mochi-check,
.sedna-mochi-heart,
.sedna-mochi-float-heart { animation-play-state: var(--play); animation-iteration-count: var(--loops); }
@keyframes sedna-mochi-breathe { 0% { transform: scale(1, 1); } 4.1667% { transform: scale(1.0003, 0.9997); } 8.3333% { transform: scale(1.0011, 0.9989); } 12.5% { transform: scale(1.0023, 0.9977); } 16.6667% { transform: scale(1.004, 0.996); } 20.8333% { transform: scale(1.0059, 0.9941); } 25% { transform: scale(1.008, 0.992); } 29.1667% { transform: scale(1.0101, 0.9899); } 33.3333% { transform: scale(1.012, 0.988); } 37.5% { transform: scale(1.0137, 0.9863); } 41.6667% { transform: scale(1.0149, 0.9851); } 45.8333% { transform: scale(1.0157, 0.9843); } 50% { transform: scale(1.016, 0.984); } 54.1667% { transform: scale(1.0157, 0.9843); } 58.3333% { transform: scale(1.0149, 0.9851); } 62.5% { transform: scale(1.0137, 0.9863); } 66.6667% { transform: scale(1.012, 0.988); } 70.8333% { transform: scale(1.0101, 0.9899); } 75% { transform: scale(1.008, 0.992); } 79.1667% { transform: scale(1.0059, 0.9941); } 83.3333% { transform: scale(1.004, 0.996); } 87.5% { transform: scale(1.0023, 0.9977); } 91.6667% { transform: scale(1.0011, 0.9989); } 95.8333% { transform: scale(1.0003, 0.9997); } 100% { transform: scale(1, 1); } }
@keyframes sedna-mochi-snooze { 0% { transform: scale(1, 1) translateY(0px); } 3.125% { transform: scale(1.0003, 0.9997) translateY(0.0096px); } 6.25% { transform: scale(1.0013, 0.9987) translateY(0.0381px); } 9.375% { transform: scale(1.0029, 0.9971) translateY(0.0843px); } 12.5% { transform: scale(1.0051, 0.9949) translateY(0.1464px); } 15.625% { transform: scale(1.0078, 0.9922) translateY(0.2222px); } 18.75% { transform: scale(1.0108, 0.9892) translateY(0.3087px); } 21.875% { transform: scale(1.0141, 0.9859) translateY(0.4025px); } 25% { transform: scale(1.0175, 0.9825) translateY(0.5px); } 28.125% { transform: scale(1.0209, 0.9791) translateY(0.5975px); } 31.25% { transform: scale(1.0242, 0.9758) translateY(0.6913px); } 34.375% { transform: scale(1.0272, 0.9728) translateY(0.7778px); } 37.5% { transform: scale(1.0299, 0.9701) translateY(0.8536px); } 40.625% { transform: scale(1.0321, 0.9679) translateY(0.9157px); } 43.75% { transform: scale(1.0337, 0.9663) translateY(0.9619px); } 46.875% { transform: scale(1.0347, 0.9653) translateY(0.9904px); } 50% { transform: scale(1.035, 0.965) translateY(1px); } 53.125% { transform: scale(1.0347, 0.9653) translateY(0.9904px); } 56.25% { transform: scale(1.0337, 0.9663) translateY(0.9619px); } 59.375% { transform: scale(1.0321, 0.9679) translateY(0.9157px); } 62.5% { transform: scale(1.0299, 0.9701) translateY(0.8536px); } 65.625% { transform: scale(1.0272, 0.9728) translateY(0.7778px); } 68.75% { transform: scale(1.0242, 0.9758) translateY(0.6913px); } 71.875% { transform: scale(1.0209, 0.9791) translateY(0.5975px); } 75% { transform: scale(1.0175, 0.9825) translateY(0.5px); } 78.125% { transform: scale(1.0141, 0.9859) translateY(0.4025px); } 81.25% { transform: scale(1.0108, 0.9892) translateY(0.3087px); } 84.375% { transform: scale(1.0078, 0.9922) translateY(0.2222px); } 87.5% { transform: scale(1.0051, 0.9949) translateY(0.1464px); } 90.625% { transform: scale(1.0029, 0.9971) translateY(0.0843px); } 93.75% { transform: scale(1.0013, 0.9987) translateY(0.0381px); } 96.875% { transform: scale(1.0003, 0.9997) translateY(0.0096px); } 100% { transform: scale(1, 1) translateY(0px); } }
@keyframes sedna-mochi-chatter { 0%, 100% { scale: 1 0.7; } 22% { scale: 1 1.15; } 40% { scale: 1 0.75; } 62% { scale: 1 1.05; } 80% { scale: 1 0.85; } }
@keyframes sedna-mochi-blink   { 0%, 45%, 49%, 100% { transform: scaleY(1); } 47% { transform: scaleY(0.08); } }
@keyframes sedna-mochi-lean    { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(2.5deg); } }
@keyframes sedna-mochi-ponder  { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-3deg); } }
@keyframes sedna-mochi-chat    { 0%, 100% { transform: rotate(0deg) translateY(0); } 25% { transform: rotate(-1.5deg) translateY(-0.6px); } 75% { transform: rotate(1.5deg) translateY(-0.6px); } }
@keyframes sedna-mochi-listen  { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(4deg); } }
@keyframes sedna-mochi-wobble  { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes sedna-mochi-sway    { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes sedna-mochi-wave    { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-20deg); } }
@keyframes sedna-mochi-jab     { 0%, 60%, 100% { transform: translateX(0); } 20% { transform: translateX(4px); } 35% { transform: translateX(0); } 45% { transform: translateX(2.5px); } }
@keyframes sedna-mochi-pump-l  { 0%, 100% { transform: rotate(0deg); } 40% { transform: rotate(14deg); } }
@keyframes sedna-mochi-pump-r  { 0%, 100% { transform: rotate(0deg); } 40% { transform: rotate(-14deg); } }
@keyframes sedna-mochi-jump    { 0%, 100% { transform: translateY(0) scale(1, 1); } 12% { transform: translateY(0) scale(1.07, 0.92); } 40% { transform: translateY(-17px) scale(0.96, 1.05); } 64% { transform: translateY(0) scale(1.06, 0.94); } 78% { transform: translateY(0) scale(0.99, 1.01); } }
@keyframes sedna-mochi-ground-jump { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.08); } 40% { transform: scale(0.62); opacity: 0.08; } 64% { transform: scale(1.08); } }
@keyframes sedna-mochi-seat-bounce { 0%, 100% { transform: translateY(0) scale(1, 1); } 30% { transform: translateY(-5px) scale(0.98, 1.02); } 60% { transform: translateY(0) scale(1.03, 0.97); } }
@keyframes sedna-mochi-startle { 0%, 100% { transform: translateY(0) scale(1, 1); } 6% { transform: translateY(-7px) scale(0.96, 1.05); } 14% { transform: translateY(0) scale(1.04, 0.96); } 22% { transform: translateY(0) scale(1, 1); } }
@keyframes sedna-mochi-nod     { 0%, 50%, 100% { transform: translateY(0); } 12%, 36% { transform: translateY(2.5px) scale(1.02, 0.98); } 24% { transform: translateY(0); } }
@keyframes sedna-mochi-swing   { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(11deg); } }
@keyframes sedna-mochi-kick    { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(8deg); } }
@keyframes sedna-mochi-hang    { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes sedna-mochi-peek-out { 0%, 100% { transform: skewX(-7deg); } 45%, 70% { transform: skewX(-13deg); } }
@keyframes sedna-mochi-tap     { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.6px); } }
@keyframes sedna-mochi-read    { 0%, 100% { transform: translateX(-2.5px); } 40% { transform: translateX(2.5px); } 48% { transform: translateX(2.5px) translateY(0.6px); } 56% { transform: translateX(-2.5px) translateY(0.6px); } }
@keyframes sedna-mochi-glow    { 50% { opacity: calc(var(--cup-glow) * 0.22); } }
@keyframes sedna-mochi-screen  { 50% { opacity: 0.45; } }
@keyframes sedna-mochi-beat    { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.16); } }
@keyframes sedna-mochi-bubble  { 0% { transform: scale(0); opacity: 0; } 14%, 78% { transform: scale(1); opacity: 1; } 92%, 100% { transform: scale(0.6); opacity: 0; } }
@keyframes sedna-mochi-confetti { 0% { transform: translateY(8px) scale(0.3) rotate(0deg); opacity: 0; } 18% { opacity: 1; } 55% { transform: translateY(-8px) scale(1) rotate(150deg); opacity: 1; } 100% { transform: translateY(14px) scale(0.9) rotate(290deg); opacity: 0; } }
@keyframes sedna-mochi-sweat   { 0% { transform: translateY(-4px); opacity: 0; } 18% { opacity: 1; } 100% { transform: translateY(12px); opacity: 0; } }
@keyframes sedna-mochi-z       { 0% { transform: translate(0, 6px) scale(0.6); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(8px, -16px) scale(1.15); opacity: 0; } }
@keyframes sedna-mochi-arc     { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sedna-mochi-pop     { 0% { transform: scale(0.5); opacity: 0; } 8% { transform: scale(1.12); opacity: 1; } 18% { transform: scale(1); opacity: 1; } 40%, 100% { transform: scale(1.06); opacity: 0; } }
@keyframes sedna-mochi-check   { 0% { transform: scale(0); } 12% { transform: scale(1.18); } 20%, 100% { transform: scale(1); } }
@keyframes sedna-mochi-heart   { 0% { transform: translate(0, 0) scale(0.5); opacity: 0; } 20% { transform: translate(-2px, -6px) scale(1); opacity: 1; } 100% { transform: translate(5px, -28px) scale(0.9); opacity: 0; } }
.agent-status > .mochi { --size: calc(var(--status-orb) + 6px); margin-block: -3px; }
}
@layer sedna.paint {
.workflow {
    --workflow-node: 232px;
    --workflow-head: 36px;
    --workflow-pad: var(--space-6);
    --workflow-wire: 2px;
    --workflow-gap: calc(var(--space-11) + var(--space-4));
    --workflow-lanes: var(--space-9);
    --workflow-curve: 10px;
    --workflow-mark: 18px;
    --workflow-drop: var(--space-11);
    --workflow-pill: 22px;
    --workflow-end: 30px;
    --workflow-port: calc(1px + var(--workflow-pad) + var(--workflow-head) / 2);
    --workflow-lead: 0px;
    --workflow-surface: var(--surface-here, var(--bg));
    --workflow-trail: var(--go-solid);
    --workflow-flow: var(--flow-light);
    --workflow-flow-line: var(--flow-line);
    --workflow-flow-tint: var(--flow-tint);
    --workflow-flow-glow: var(--flow-glow);
    --workflow-axis-x: 1;
    --workflow-axis-y: 0;
    --workflow-dir-x: 1;
    --workflow-dash-angle: calc(90deg * var(--workflow-axis-x) + 180deg * var(--workflow-axis-y));
    --workflow-start-x: 0%;
    --workflow-end-x: 100%;
    --workflow-start-side: left;
    --workflow-end-side: right;
    --workflow-mirror: 0;
    --workflow-cw: cw;
    --workflow-ccw: ccw;
    --workflow-seam-a: 0deg;
    --workflow-seam-b: 180deg;
    --workflow-seam-c: 90deg;
    --workflow-seam-d: 270deg;
    --workflow-seam-ac-p0: 0deg;
    --workflow-seam-ac-p1: 40deg;
    --workflow-seam-ac-t1: 90deg;
    --workflow-seam-bd-p0: 50deg;
    --workflow-seam-bd-p1: 90deg;
    --workflow-seam-bd-t1: 90deg;
    --workflow-over-at: 0 0;
    --workflow-flow-ahead: 135deg;
    --workflow-flow-up: 45deg;
    --workflow-flow-spacing: 240px;
    --workflow-flow-comet: 40px;
    --workflow-flow-speed: 1;
    --workflow-flow-packets: 1;
    --workflow-flow-period: calc(var(--workflow-flow-spacing) / var(--workflow-flow-packets));
    --workflow-flow-duration: calc(var(--flow-duration) / var(--workflow-flow-speed) / var(--workflow-flow-packets));
    --workflow-flow-play: running;
    --workflow-comet: var(--workflow-flow);
    --workflow-flow-base: var(--workflow-flow-line);
    --workflow-comet-end: calc(var(--workflow-flow-period) * 0.70711);
    --workflow-comet-head: calc(var(--workflow-comet-end) - 1px);
    --workflow-comet-tail: calc((var(--workflow-flow-period) - var(--workflow-flow-comet)) * 0.70711);
    --workflow-stream-angle: var(--workflow-flow-ahead);
    --workflow-stream-side: var(--workflow-start-side);
    --workflow-stream-at: 0px;
    --workflow-stream-step: var(--workflow-flow-period);
    display: flex;
    align-items: flex-start;
    gap: var(--workflow-gap);
    margin: 0;
    padding: var(--space-9);
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    isolation: isolate;
}
.workflow:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus-ring); }
.workflow--grid {
    background-image: radial-gradient(circle, var(--border) 1px, transparent 1.5px);
    background-size: 16px 16px;
    background-attachment: local;
}
.workflow--center { justify-content: safe center; }
.workflow.workflow--fill > li { flex: 1 1 0; min-inline-size: calc(var(--workflow-node) * 0.75); }
.workflow.workflow--fill > li > .workflow-node { inline-size: 100%; }
.workflow--flow-off {
    --workflow-comet: transparent;
    --workflow-flow-base: var(--workflow-flow);
    --workflow-flow-play: paused;
}
.workflow--sm {
    --workflow-node: 184px;
    --workflow-head: 28px;
    --workflow-pad: var(--space-4);
    --workflow-gap: var(--space-10);
    --workflow-lanes: var(--space-7);
    --workflow-curve: 8px;
    --workflow-mark: 14px;
    --workflow-drop: var(--space-10);
}
.workflow--xl {
    --workflow-node: 360px;
    --workflow-head: 64px;
    --workflow-pad: var(--space-9);
    --workflow-wire: 4px;
    --workflow-gap: calc(var(--space-11) * 2);
    --workflow-lanes: var(--space-11);
    --workflow-curve: 20px;
    --workflow-mark: 30px;
    --workflow-drop: calc(var(--space-11) + var(--space-9));
    --workflow-pill: 32px;
    --workflow-end: 48px;
    --workflow-flow-spacing: 400px;
    --workflow-flow-comet: 72px;
}
.workflow--lg {
    --workflow-node: 288px;
    --workflow-head: 48px;
    --workflow-pad: var(--space-7);
    --workflow-gap: calc(var(--space-11) + var(--space-9));
    --workflow-lanes: var(--space-10);
    --workflow-curve: 14px;
    --workflow-mark: 22px;
}
.workflow-path {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--workflow-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}
.workflow > li,
.workflow-path > li,
.workflow-branch {
    --workflow-wire-colour: var(--border-strong);
    --workflow-wire-paint: linear-gradient(var(--workflow-wire-colour), var(--workflow-wire-colour));
}
.workflow > li,
.workflow-path > li {
    position: relative;
    flex: none;
}
.workflow > li::before,
.workflow-path > li::before {
    content: '';
    position: absolute;
    z-index: 1;
    inset-inline-end: 100%;
    inset-block-start: calc(var(--workflow-port) - var(--workflow-wire) / 2);
    inline-size: var(--workflow-gap);
    block-size: var(--workflow-wire);
    background: var(--workflow-wire-paint);
}
.workflow > li:first-child::before { content: none; }
.workflow-path > li:first-child::before { inline-size: var(--workflow-lead); }
.workflow-branch:last-child::after {
    --workflow-wire-colour: var(--border-strong);
    --workflow-wire-paint: linear-gradient(var(--workflow-wire-colour), var(--workflow-wire-colour));
}
.workflow > [data-state="waiting"],
.workflow > [data-state="done"],
.workflow > [data-state="failed"],
.workflow-path > [data-state="waiting"],
.workflow-path > [data-state="done"],
.workflow-path > [data-state="failed"],
.workflow-fork:has(+ .workflow-step:is([data-state="waiting"], [data-state="done"], [data-state="failed"])) > .workflow-branch:last-child::after {
    --workflow-wire-colour: var(--workflow-trail);
}
.workflow > [data-state="next"],
.workflow-path > [data-state="next"],
.workflow-fork:has(+ .workflow-step[data-state="next"]) > .workflow-branch:last-child::after {
    --workflow-wire-colour: var(--border-hover);
    --workflow-wire-paint:
        repeating-linear-gradient(var(--workflow-dash-angle), var(--workflow-wire-colour) 0 6px, transparent 6px 11px),
        linear-gradient(var(--workflow-surface), var(--workflow-surface));
}
.workflow > [data-state="skipped"],
.workflow-path > [data-state="skipped"],
.workflow-fork:has(+ .workflow-step[data-state="skipped"]) > .workflow-branch:last-child::after {
    --workflow-wire-colour: var(--border);
    --workflow-wire-paint:
        repeating-linear-gradient(var(--workflow-dash-angle), var(--workflow-wire-colour) 0 4px, transparent 4px 9px),
        linear-gradient(var(--workflow-surface), var(--workflow-surface));
}
.workflow > .workflow-step:has(> .workflow-node--add),
.workflow-path > .workflow-step:has(> .workflow-node--add),
.workflow-fork:has(+ .workflow-step > .workflow-node--add) > .workflow-branch:last-child::after {
    --workflow-wire-colour: var(--border-strong);
    --workflow-wire-paint:
        repeating-linear-gradient(var(--workflow-dash-angle), var(--workflow-wire-colour) 0 4px, transparent 4px 9px),
        linear-gradient(var(--workflow-surface), var(--workflow-surface));
}
.workflow > [data-state="running"],
.workflow-path > [data-state="running"],
.workflow-fork:has(+ .workflow-step[data-state="running"]) > .workflow-branch:last-child::after {
    --workflow-wire-colour: var(--workflow-flow-base);
}
.workflow > :is(.workflow-fork, .workflow-loop)[data-state="running"],
.workflow-path > :is(.workflow-fork, .workflow-loop)[data-state="running"] {
    --workflow-wire-colour: var(--workflow-trail);
}
.workflow-step {
    display: flex;
    align-items: flex-start;
    column-gap: var(--space-7);
}
.workflow-node {
    --surface-here: var(--surface-raised-1);
    --muted-here: var(--muted);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    inline-size: var(--workflow-node);
    padding: var(--workflow-pad);
    border: 1px solid var(--border);
    border-radius: var(--radius-panel);
    background: var(--surface-here);
    color: var(--fg);
    font: inherit;
    font-size: var(--text-4);
    line-height: 1.45;
    text-align: start;
    text-decoration: none;
    box-shadow: var(--workflow-ring, 0 0 transparent), var(--workflow-glow, 0 0 transparent);
    transition: border-color var(--motion-fast), box-shadow var(--motion-mid);
}
.card .workflow-node { --surface-here: var(--surface-raised-2); --muted-here: var(--muted); }
.card .card .workflow-node { --surface-here: var(--surface-raised-3); --muted-here: var(--muted); --muted: var(--fg-soft); }
:is(a, button).workflow-node { cursor: pointer; }
:is(a, button).workflow-node:hover { border-color: var(--border-hover); }
:is(a, button).workflow-node:focus-visible { outline: none; --workflow-ring: 0 0 0 2px var(--focus-ring); }
.workflow-node[aria-pressed="true"] { --workflow-ring: 0 0 0 2px var(--selected); }
.workflow-node-head {
    display: grid;
    grid-template-columns: var(--workflow-head) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 1fr);
    column-gap: var(--space-5);
    min-block-size: var(--workflow-head);
    padding-inline-end: calc(var(--workflow-mark) + var(--space-4));
}
.workflow-node-head > * { grid-column: 1; grid-row: 1 / -1; align-self: start; justify-self: center; }
.workflow-node-head > .orb { --orb-size: var(--workflow-head); }
.workflow-node-head > .avatar { --avatar-size: var(--workflow-head); }
.workflow-node-title {
    grid-column: 2;
    grid-row: 2;
    justify-self: stretch;
    color: var(--fg);
    font-size: var(--text-5);
    font-weight: 600;
    line-height: 20px;
    hyphens: auto;
    overflow-wrap: normal;
}
.workflow-node-meta {
    grid-column: 2;
    grid-row: 3;
    justify-self: stretch;
    overflow-x: clip;
    color: var(--muted);
    font-size: var(--text-3);
    line-height: 16px;
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.workflow-node-icon {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: var(--workflow-head);
    block-size: var(--workflow-head);
    border-radius: var(--radius-surface);
    font-size: var(--text-8);
    line-height: 1;
}
.workflow-node-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: currentColor;
    opacity: 0.14;
}
.workflow-node-icon > * { position: relative; }
:where(.workflow-node-icon) { color: var(--fg-soft); }
.workflow-node-icon--agent {
    background: linear-gradient(135deg, var(--agent-from), var(--agent-to));
    color: var(--on-solid);
}
.workflow-node-icon--agent::before { content: none; }
.workflow-node-now {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-size: var(--text-3);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
:where(.workflow-node-now) { color: var(--fg-soft); }
.workflow-node-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-4);
    padding-block-start: var(--space-4);
    border-block-start: 1px solid var(--border);
    color: var(--muted);
    font-size: var(--text-3);
    font-variant-numeric: tabular-nums;
}
.workflow-node::before,
.workflow-node::after {
    content: '';
    position: absolute;
    box-sizing: border-box;
    inset-block-start: calc(var(--workflow-port) - 1px - var(--workflow-mark) / 2);
    inset-inline-end: var(--workflow-pad);
    inline-size: var(--workflow-mark);
    block-size: var(--workflow-mark);
    border-radius: 50%;
}
.workflow-node::before { border: 2px solid var(--border-strong); }
.workflow-step[data-state="next"] > .workflow-node::before { border-color: var(--brand-soft); box-shadow: 0 0 0 3px var(--brand-glow); }
.workflow-step[data-state="next"] > .workflow-node::after {
    background: radial-gradient(circle, var(--brand-soft) 0 3px, transparent 3.5px);
}
.workflow-step[data-state="running"] > .workflow-node::before {
    border-color: var(--workflow-flow-line);
    border-block-start-color: var(--workflow-flow);
    animation: sedna-spin var(--spin-duration) linear infinite;
}
.workflow-step[data-state="running"] > .workflow-node--agent::before {
    border-color: var(--agent-edge);
    border-block-start-color: var(--agent-to);
}
.workflow-step[data-state="waiting"] > .workflow-node::before {
    border-color: var(--warn-solid);
    background: var(--warn-solid);
    animation: sedna-pulse var(--pulse-duration) ease-in-out infinite;
}
.workflow-step[data-state="waiting"] > .workflow-node::after {
    background:
        linear-gradient(var(--on-solid), var(--on-solid)) calc(50% - 2px) 50% / 2px 40% no-repeat,
        linear-gradient(var(--on-solid), var(--on-solid)) calc(50% + 2px) 50% / 2px 40% no-repeat;
}
.workflow-step[data-state="done"] > .workflow-node::before { border-color: var(--go-solid); background: var(--go-solid); }
.workflow-step[data-state="failed"] > .workflow-node::before { border-color: var(--danger-solid); background: var(--danger-solid); }
.workflow-step[data-state="failed"] > .workflow-node::after {
    background:
        linear-gradient(var(--on-solid), var(--on-solid)) 50% 50% / 2px 50% no-repeat,
        linear-gradient(var(--on-solid), var(--on-solid)) 50% 50% / 50% 2px no-repeat;
    rotate: 45deg;
}
.workflow-step[data-state="skipped"] > .workflow-node::before,
.workflow-branch[data-state="skipped"] .workflow-node::before { border-color: var(--border); }
.workflow-step[data-state="skipped"] > .workflow-node::after,
.workflow-branch[data-state="skipped"] .workflow-node::after {
    background: linear-gradient(var(--muted), var(--muted)) 50% 50% / 40% 2px no-repeat;
}
.workflow-step[data-state="done"] > .workflow-node::after,
.workflow-decision > [data-state="chosen"]::after {
    inline-size: calc(var(--workflow-mark) * 0.28);
    block-size: calc(var(--workflow-mark) * 0.5);
    border-radius: 0;
    border-right: 2px solid var(--on-solid);
    border-bottom: 2px solid var(--on-solid);
    rotate: 45deg;
}
.workflow-step[data-state="done"] > .workflow-node::after {
    margin-inline-end: calc(var(--workflow-mark) * 0.36);
    margin-block-start: calc(var(--workflow-mark) * 0.2);
}
.workflow-step[data-state="next"] > .workflow-node {
    border-style: dashed;
    border-color: var(--brand-soft);
}
.workflow-step[data-state="running"] > .workflow-node {
    --workflow-glow: 0 0 0 3px var(--workflow-flow-tint);
    border-color: var(--workflow-flow);
}
.workflow-step[data-state="running"] > .workflow-node--glow {
    --workflow-glow: 0 0 22px -4px var(--workflow-flow-glow);
}
.workflow-step[data-state="running"] > .workflow-node--agent {
    --workflow-glow: 0 0 0 3px var(--agent-tint), 0 8px 28px -10px var(--agent-glow);
    border-color: transparent;
    background:
        linear-gradient(var(--surface-here), var(--surface-here)) padding-box,
        linear-gradient(90deg, var(--agent-from), var(--agent-to)) border-box;
}
.workflow-step[data-state="waiting"] > .workflow-node {
    border-style: dashed;
    border-color: var(--warn-border);
}
.workflow-step[data-state="failed"] > .workflow-node {
    border-color: var(--danger-border);
    background: linear-gradient(var(--danger-bg), var(--danger-bg)), var(--surface-here);
}
.workflow-step[data-state="skipped"] > .workflow-node,
.workflow-branch[data-state="skipped"] .workflow-node {
    border-style: dashed;
    color: var(--muted);
}
.workflow-step[data-state="skipped"] .workflow-node-title,
.workflow-branch[data-state="skipped"] .workflow-node-title { color: var(--muted); font-weight: 500; }
.workflow-step[data-state="skipped"] .workflow-node-head > :first-child,
.workflow-branch[data-state="skipped"] .workflow-node-head > :first-child { opacity: 0.55; filter: grayscale(1); }
.workflow-node--add {
    border-style: dashed;
    border-color: var(--border-strong);
    background: transparent;
    color: var(--fg-soft);
}
.workflow-node--add::before,
.workflow-node--add::after { content: none; }
.workflow-node--add > .workflow-node-head { padding-inline-end: 0; }
.workflow-node--add .workflow-node-title { color: var(--fg-soft); font-weight: 500; }
.workflow-node.workflow-node--add:hover {
    border-color: var(--brand-soft);
    background: var(--brand-tint);
    color: var(--brand-text);
}
.workflow-node.workflow-node--add:hover .workflow-node-title,
.workflow-node.workflow-node--add:hover .workflow-node-icon { color: var(--brand-text); }
.workflow-end {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    block-size: var(--workflow-end);
    margin-block-start: calc(var(--workflow-port) - var(--workflow-end) / 2);
    padding-inline: var(--space-6);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: var(--workflow-surface);
    color: var(--fg-soft);
    font-size: var(--text-3);
    font-weight: 600;
    white-space: nowrap;
}
.workflow-end > i { color: var(--muted); font-size: var(--text-5); }
.workflow-step[data-state="done"] > .workflow-end { border-color: var(--go-border); background: var(--go-bg); color: var(--go-fg); }
.workflow-step[data-state="done"] > .workflow-end > i { color: currentColor; }
.workflow-step[data-state="failed"] > .workflow-end { border-color: var(--danger-border); background: var(--danger-bg); color: var(--danger-fg); }
.workflow-branch[data-state="skipped"] .workflow-end { border-style: dashed; border-color: var(--border); color: var(--muted); }
.workflow-label {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    block-size: var(--workflow-pill);
    margin-block-start: calc(var(--workflow-port) - var(--workflow-pill) / 2);
    padding-inline: var(--space-4);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: var(--workflow-surface);
    color: var(--fg-soft);
    font-size: var(--text-2);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.workflow-label > i { font-size: var(--text-3); }
.workflow-label:not(:has(> *)) { display: inline-block; align-content: center; text-box: trim-both cap alphabetic; }
.workflow-label::before,
.workflow-label::after {
    content: '';
    position: absolute;
    z-index: 1;
    inset-block-start: calc(50% - var(--workflow-wire) / 2);
    block-size: var(--workflow-wire);
    background: var(--workflow-wire-paint);
}
.workflow-label::before { content: none; }
.workflow-label::after { inset-inline-start: calc(100% + 1px); inline-size: var(--space-7); }
.workflow-fork {
    display: flex;
    flex-direction: column;
    gap: var(--workflow-lanes);
}
.workflow > .workflow-fork::before,
.workflow-path > .workflow-fork::before {
    z-index: 2;
    inset-inline-end: calc(100% + var(--workflow-gap) / 2);
    inline-size: calc(var(--workflow-gap) / 2);
}
.workflow-path > .workflow-fork:first-child::before { content: none; }
.workflow-fork + li::before { inline-size: calc(var(--workflow-gap) / 2); }
.workflow-fork--decision::after {
    content: '';
    position: absolute;
    z-index: 3;
    box-sizing: border-box;
    inset-inline-start: calc(var(--workflow-gap) / -2 - 6px);
    inset-block-start: calc(var(--workflow-port) - 6px);
    inline-size: 12px;
    block-size: 12px;
    border: 2px solid var(--workflow-wire-colour);
    background: var(--workflow-surface);
    rotate: 45deg;
}
.workflow-branch {
    --workflow-line: var(--workflow-port);
    --workflow-lead: 0px;
    --workflow-in: var(--border-strong);
    --workflow-in-z: 1;
    --workflow-out: var(--border-strong);
    --workflow-out-z: 1;
    --workflow-under-in: transparent;
    --workflow-under-out: transparent;
    --workflow-stub-in: 0;
    --workflow-stub-out: 0;
    anchor-name: --workflow-branch;
    anchor-scope: --workflow-branch, --workflow-last;
    display: flex;
    align-items: flex-start;
    column-gap: var(--space-7);
}
.workflow-branch > .workflow-path { position: static; flex: 1; }
.workflow-branch > .workflow-path > :last-child { anchor-name: --workflow-last; }
.workflow-branch::before,
.workflow-branch:not(:first-child)::after,
:where(.workflow-fork:not(:last-child), .workflow-fork:not(:last-child) > .workflow-branch > .workflow-path > .workflow-fork:last-child) > .workflow-branch > .workflow-path::before,
:where(.workflow-fork:not(:last-child), .workflow-fork:not(:last-child) > .workflow-branch > .workflow-path > .workflow-fork:last-child) > .workflow-branch:not(:first-child) > .workflow-path::after {
    --workflow-way-r: calc(var(--workflow-curve) + var(--workflow-wire) / 2);
    --workflow-way-ri: calc(var(--workflow-curve) - var(--workflow-wire) / 2);
    --workflow-way-fade: var(--workflow-way-r);
    content: '';
    position: absolute;
    box-sizing: border-box;
    border-width: 0;
    background-origin: border-box;
}
.workflow-branch::before,
.workflow-branch:not(:first-child)::after {
    z-index: var(--workflow-in-z);
}
.workflow-branch::before {
    --workflow-stream-at: calc(var(--workflow-curve) - var(--workflow-gap) / 2);
    --workflow-way-over: conic-gradient(from var(--workflow-seam-a) at calc(0px + var(--workflow-mirror) * (100% - 2 * (0px))) 100%, transparent 0, var(--workflow-trunk) var(--workflow-seam-ac-p0), var(--workflow-trunk) var(--workflow-seam-ac-p1), transparent var(--workflow-seam-ac-t1), transparent 0);
    inset-inline-end: calc(100% + var(--workflow-gap) / 2 - var(--workflow-wire) / 2);
    inset-block-start: calc(var(--workflow-port) - var(--workflow-wire) / 2);
    inline-size: var(--workflow-way-r);
    block-size: var(--workflow-way-r);
    border-block-start-width: var(--workflow-wire);
    border-inline-end-width: var(--workflow-wire);
    border-start-end-radius: var(--workflow-way-r);
}
.workflow-branch:first-child::before {
    --workflow-stream-at: calc(var(--workflow-gap) / -2);
    --workflow-way-over: none;
    inset-inline-end: 100%;
    inline-size: calc(var(--workflow-gap) / 2);
    block-size: var(--workflow-wire);
    border-inline-end-width: 0;
    border-radius: 0;
}
.workflow-branch:not(:first-child)::after {
    --workflow-stream-at: calc(-1 * (var(--workflow-gap) / 2 + var(--workflow-curve)));
    --workflow-way-over: conic-gradient(from var(--workflow-seam-b) at calc(var(--workflow-wire) / 2 + var(--workflow-curve) + var(--workflow-mirror) * (100% - 2 * (var(--workflow-wire) / 2 + var(--workflow-curve)))) calc(100% - var(--workflow-way-r)), transparent 0, var(--workflow-under-in) var(--workflow-seam-bd-p0), var(--workflow-under-in) var(--workflow-seam-bd-p1), transparent var(--workflow-seam-bd-t1), transparent 0);
    inset-inline-end: 100%;
    inline-size: calc(var(--workflow-gap) / 2 + var(--workflow-wire) / 2);
    inset-block: calc(var(--workflow-port) + var(--workflow-curve)) calc(anchor(--workflow-branch top) - var(--workflow-line) - var(--workflow-wire) / 2);
    border-inline-start-width: var(--workflow-wire);
    border-block-end-width: var(--workflow-wire);
    border-end-start-radius: var(--workflow-way-r);
}
.workflow-branch:is([data-state="taken"]:not(:has(> .workflow-path > :first-child[data-state="running"])), :has(> .workflow-path > :first-child:is([data-state="waiting"], [data-state="done"], [data-state="failed"]))):has(~ .workflow-branch):not(:has(~ .workflow-branch[data-state="taken"] > .workflow-path > :first-child:not([data-state="running"])), :has(~ .workflow-branch > .workflow-path > :first-child:is([data-state="waiting"], [data-state="done"], [data-state="failed"]))):not(:first-child)::after,
.workflow-branch:is(:has(> .workflow-path > :first-child[data-state="running"])):has(~ .workflow-branch):not(:has(~ .workflow-branch[data-state="taken"] > .workflow-path > :first-child:not([data-state="running"])), :has(~ .workflow-branch > .workflow-path > :first-child:is([data-state="waiting"], [data-state="done"], [data-state="failed"])), :has(~ .workflow-branch > .workflow-path > :first-child[data-state="running"])):not(:first-child)::after,
.workflow-branch:not([data-state="skipped"]):not([data-state="taken"]:not(:has(> .workflow-path > :first-child[data-state="running"])), :has(> .workflow-path > :first-child:is([data-state="waiting"], [data-state="done"], [data-state="failed"]))):not(:has(> .workflow-path > :first-child[data-state="running"])):has(~ .workflow-branch):not(:has(~ .workflow-branch:not([data-state="skipped"]))):not(:first-child)::after {
    --workflow-way-over: radial-gradient(circle at calc(var(--workflow-way-r) + var(--workflow-mirror) * (100% - 2 * (var(--workflow-way-r)))) 0, transparent var(--workflow-way-r), var(--workflow-under-in) hypot(var(--workflow-way-ri), var(--workflow-way-fade))) var(--workflow-start-side) 0 bottom calc(var(--workflow-way-r) - var(--workflow-way-fade)) / var(--workflow-wire) var(--workflow-way-fade) no-repeat;
    --workflow-over-at: var(--workflow-start-side) 0 bottom calc(var(--workflow-way-r) - var(--workflow-way-fade));
}
.workflow-path > .workflow-fork:first-child > .workflow-branch:not(:first-child)::before { content: none; }
.workflow-path > .workflow-fork:first-child > .workflow-branch:not(:first-child)::after {
    --workflow-stream-at: calc(-1 * (var(--workflow-gap) / 2 + var(--workflow-wire) / 2));
    inset-block-start: calc(var(--workflow-port) + var(--workflow-wire) / 2);
}
:where(.workflow-fork:not(:last-child), .workflow-fork:not(:last-child) > .workflow-branch > .workflow-path > .workflow-fork:last-child) > .workflow-branch > .workflow-path::before,
:where(.workflow-fork:not(:last-child), .workflow-fork:not(:last-child) > .workflow-branch > .workflow-path > .workflow-fork:last-child) > .workflow-branch:not(:first-child) > .workflow-path::after {
    --workflow-stream-angle: var(--workflow-flow-up);
    --workflow-stream-side: var(--workflow-end-side);
    --workflow-stream-at: 0px;
    --workflow-stream-step: calc(-1 * var(--workflow-flow-period));
    z-index: var(--workflow-out-z);
}
:where(.workflow-fork:not(:last-child), .workflow-fork:not(:last-child) > .workflow-branch > .workflow-path > .workflow-fork:last-child) > .workflow-branch > .workflow-path::before {
    --workflow-way-over: none;
    inset-inline-start: anchor(--workflow-last end);
    inset-inline-end: calc(var(--workflow-gap) / -2);
    inset-block-start: calc(var(--workflow-port) - var(--workflow-wire) / 2);
    block-size: var(--workflow-wire);
    border-block-start-width: var(--workflow-wire);
}
:where(.workflow-fork:not(:last-child), .workflow-fork:not(:last-child) > .workflow-branch > .workflow-path > .workflow-fork:last-child) > .workflow-branch:not(:first-child) > .workflow-path::before {
    --workflow-stream-at: calc(-1 * (var(--workflow-gap) / 2 + var(--workflow-curve)));
    --workflow-way-over: conic-gradient(from var(--workflow-seam-c) at calc(100% - var(--workflow-way-r) + var(--workflow-mirror) * (100% - 2 * (100% - var(--workflow-way-r)))) calc(100% - var(--workflow-way-r)), transparent 0, var(--workflow-under-out) var(--workflow-seam-ac-p0), var(--workflow-under-out) var(--workflow-seam-ac-p1), transparent var(--workflow-seam-ac-t1), transparent 0);
    inset-inline-end: calc(-1 * (var(--workflow-gap) / 2 + var(--workflow-wire) / 2));
    inset-block: calc(var(--workflow-port) + var(--workflow-curve)) calc(anchor(--workflow-last top) - var(--workflow-line) - var(--workflow-wire) / 2);
    block-size: auto;
    border-block-start-width: 0;
    border-block-end-width: var(--workflow-wire);
    border-inline-end-width: var(--workflow-wire);
    border-end-end-radius: var(--workflow-way-r);
}
:where(.workflow-fork:not(:last-child), .workflow-fork:not(:last-child) > .workflow-branch > .workflow-path > .workflow-fork:last-child) > .workflow-branch:is(:has(> .workflow-path > :last-child[data-state="done"])):has(~ .workflow-branch):not(:has(~ .workflow-branch > .workflow-path > :last-child[data-state="done"])):not(:first-child) > .workflow-path::before,
:where(.workflow-fork:not(:last-child), .workflow-fork:not(:last-child) > .workflow-branch > .workflow-path > .workflow-fork:last-child) > .workflow-branch:not([data-state="skipped"]):not(:has(> .workflow-path > :last-child[data-state="done"])):has(~ .workflow-branch):not(:has(~ .workflow-branch:not([data-state="skipped"]))):not(:first-child) > .workflow-path::before {
    --workflow-way-over: radial-gradient(circle at calc(var(--workflow-wire) - var(--workflow-way-r) + var(--workflow-mirror) * (100% - 2 * (var(--workflow-wire) - var(--workflow-way-r)))) 0, transparent var(--workflow-way-r), var(--workflow-under-out) hypot(var(--workflow-way-ri), var(--workflow-way-fade))) var(--workflow-end-side) 0 bottom calc(var(--workflow-way-r) - var(--workflow-way-fade)) / var(--workflow-wire) var(--workflow-way-fade) no-repeat;
    --workflow-over-at: var(--workflow-end-side) 0 bottom calc(var(--workflow-way-r) - var(--workflow-way-fade));
}
:where(.workflow-fork:not(:last-child), .workflow-fork:not(:last-child) > .workflow-branch > .workflow-path > .workflow-fork:last-child) > .workflow-branch:not(:first-child) > .workflow-path::after {
    --workflow-stream-at: calc(-1 * (var(--workflow-gap) / 2 - var(--workflow-curve)));
    --workflow-way-over: conic-gradient(from var(--workflow-seam-d) at calc(100% + var(--workflow-mirror) * (100% - 2 * (100%))) 100%, transparent 0, var(--workflow-joined) var(--workflow-seam-bd-p0), var(--workflow-joined) var(--workflow-seam-bd-p1), transparent var(--workflow-seam-bd-t1), transparent 0);
    inset-inline-end: calc(-1 * (var(--workflow-gap) / 2 + var(--workflow-curve)));
    inset-block-start: calc(var(--workflow-port) - var(--workflow-wire) / 2);
    inline-size: var(--workflow-way-r);
    block-size: var(--workflow-way-r);
    border-block-start-width: var(--workflow-wire);
    border-inline-start-width: var(--workflow-wire);
    border-start-start-radius: var(--workflow-way-r);
}
:where(.workflow-branch)::before,
:where(.workflow-branch:not(:first-child))::after,
:where(:is(.workflow-fork:not(:last-child), .workflow-fork:not(:last-child) > .workflow-branch > .workflow-path > .workflow-fork:last-child) > .workflow-branch > .workflow-path)::before,
:where(:is(.workflow-fork:not(:last-child), .workflow-fork:not(:last-child) > .workflow-branch > .workflow-path > .workflow-fork:last-child) > .workflow-branch:not(:first-child) > .workflow-path)::after {
    border-style: solid;
    border-color: transparent;
}
:where(.workflow-branch)::before,
:where(.workflow-branch:not(:first-child))::after {
    background: var(--workflow-way-over), linear-gradient(var(--workflow-in), var(--workflow-in));
}
:where(:is(.workflow-fork:not(:last-child), .workflow-fork:not(:last-child) > .workflow-branch > .workflow-path > .workflow-fork:last-child) > .workflow-branch > .workflow-path)::before,
:where(:is(.workflow-fork:not(:last-child), .workflow-fork:not(:last-child) > .workflow-branch > .workflow-path > .workflow-fork:last-child) > .workflow-branch:not(:first-child) > .workflow-path)::after {
    background: var(--workflow-way-over), linear-gradient(var(--workflow-out), var(--workflow-out));
}
:where(.workflow-branch:not(:first-child))::before { clip-path: shape(from calc(0px + var(--workflow-mirror) * (100% - 2 * (0px))) 0, arc to calc(100% + var(--workflow-mirror) * (100% - 2 * (100%))) 100% of var(--workflow-way-r) var(--workflow-cw), line to calc(100% - var(--workflow-wire) + var(--workflow-mirror) * (100% - 2 * (100% - var(--workflow-wire)))) 100%, arc to calc(0px + var(--workflow-mirror) * (100% - 2 * (0px))) var(--workflow-wire) of var(--workflow-way-ri) var(--workflow-ccw), close); }
:where(.workflow-branch:not(:first-child))::after { clip-path: shape(from calc(0px + var(--workflow-mirror) * (100% - 2 * (0px))) 0, line to calc(var(--workflow-wire) + var(--workflow-mirror) * (100% - 2 * (var(--workflow-wire)))) 0, line to calc(var(--workflow-wire) + var(--workflow-mirror) * (100% - 2 * (var(--workflow-wire)))) calc(100% - var(--workflow-way-r)), arc to calc(var(--workflow-wire) / 2 + var(--workflow-curve) + var(--workflow-mirror) * (100% - 2 * (var(--workflow-wire) / 2 + var(--workflow-curve)))) calc(100% - var(--workflow-wire)) of var(--workflow-way-ri) var(--workflow-ccw), line to calc(100% + var(--workflow-mirror) * (100% - 2 * (100%))) calc(100% - var(--workflow-wire)), line to calc(100% + var(--workflow-mirror) * (100% - 2 * (100%))) 100%, line to calc(var(--workflow-wire) / 2 + var(--workflow-curve) + var(--workflow-mirror) * (100% - 2 * (var(--workflow-wire) / 2 + var(--workflow-curve)))) 100%, arc to calc(0px + var(--workflow-mirror) * (100% - 2 * (0px))) calc(100% - var(--workflow-way-r)) of var(--workflow-way-r) var(--workflow-cw), close, move to calc(0px + var(--workflow-mirror) * (100% - 2 * (0px))) calc(100% - var(--workflow-way-r)), line to calc(var(--workflow-wire) + var(--workflow-mirror) * (100% - 2 * (var(--workflow-wire)))) calc(100% - var(--workflow-way-r)), line to calc(var(--workflow-wire) + var(--workflow-mirror) * (100% - 2 * (var(--workflow-wire)))) calc(100% - var(--workflow-way-r) + var(--workflow-way-fade) * var(--workflow-stub-in)), line to calc(0px + var(--workflow-mirror) * (100% - 2 * (0px))) calc(100% - var(--workflow-way-r) + var(--workflow-way-fade) * var(--workflow-stub-in)), close); }
:where(:is(.workflow-fork:not(:last-child), .workflow-fork:not(:last-child) > .workflow-branch > .workflow-path > .workflow-fork:last-child) > .workflow-branch:not(:first-child) > .workflow-path)::before { clip-path: shape(from calc(0px + var(--workflow-mirror) * (100% - 2 * (0px))) calc(100% - var(--workflow-wire)), line to calc(100% - var(--workflow-way-r) + var(--workflow-mirror) * (100% - 2 * (100% - var(--workflow-way-r)))) calc(100% - var(--workflow-wire)), arc to calc(100% - var(--workflow-wire) + var(--workflow-mirror) * (100% - 2 * (100% - var(--workflow-wire)))) calc(100% - var(--workflow-way-r)) of var(--workflow-way-ri) var(--workflow-ccw), line to calc(100% - var(--workflow-wire) + var(--workflow-mirror) * (100% - 2 * (100% - var(--workflow-wire)))) 0, line to calc(100% + var(--workflow-mirror) * (100% - 2 * (100%))) 0, line to calc(100% + var(--workflow-mirror) * (100% - 2 * (100%))) calc(100% - var(--workflow-way-r)), arc to calc(100% - var(--workflow-way-r) + var(--workflow-mirror) * (100% - 2 * (100% - var(--workflow-way-r)))) 100% of var(--workflow-way-r) var(--workflow-cw), line to calc(0px + var(--workflow-mirror) * (100% - 2 * (0px))) 100%, close, move to calc(100% - var(--workflow-wire) + var(--workflow-mirror) * (100% - 2 * (100% - var(--workflow-wire)))) calc(100% - var(--workflow-way-r)), line to calc(100% + var(--workflow-mirror) * (100% - 2 * (100%))) calc(100% - var(--workflow-way-r)), line to calc(100% + var(--workflow-mirror) * (100% - 2 * (100%))) calc(100% - var(--workflow-way-r) + var(--workflow-way-fade) * var(--workflow-stub-out)), line to calc(100% - var(--workflow-wire) + var(--workflow-mirror) * (100% - 2 * (100% - var(--workflow-wire)))) calc(100% - var(--workflow-way-r) + var(--workflow-way-fade) * var(--workflow-stub-out)), close); }
:where(:is(.workflow-fork:not(:last-child), .workflow-fork:not(:last-child) > .workflow-branch > .workflow-path > .workflow-fork:last-child) > .workflow-branch:not(:first-child) > .workflow-path)::after { clip-path: shape(from calc(0px + var(--workflow-mirror) * (100% - 2 * (0px))) 100%, arc to calc(100% + var(--workflow-mirror) * (100% - 2 * (100%))) 0 of var(--workflow-way-r) var(--workflow-cw), line to calc(100% + var(--workflow-mirror) * (100% - 2 * (100%))) var(--workflow-wire), arc to calc(var(--workflow-wire) + var(--workflow-mirror) * (100% - 2 * (var(--workflow-wire)))) 100% of var(--workflow-way-ri) var(--workflow-ccw), close); }
:where(.workflow-branch[data-state="skipped"], .workflow-branch:has(> .workflow-path > :first-child[data-state="next"]), .workflow-branch:has(> .workflow-path > :first-child > .workflow-node--add))::before,
:where(.workflow-branch[data-state="skipped"], .workflow-branch:has(> .workflow-path > :first-child[data-state="next"]):not(:first-child), .workflow-branch:has(> .workflow-path > :first-child > .workflow-node--add):not(:first-child))::after {
    border-style: dashed;
    border-color: var(--workflow-in);
    background: none;
    clip-path: none;
}
:where(:is(.workflow-fork:not(:last-child), .workflow-fork:not(:last-child) > .workflow-branch > .workflow-path > .workflow-fork:last-child) > .workflow-branch[data-state="skipped"] > .workflow-path)::before,
:where(:is(.workflow-fork:not(:last-child), .workflow-fork:not(:last-child) > .workflow-branch > .workflow-path > .workflow-fork:last-child) > .workflow-branch[data-state="skipped"]:not(:first-child) > .workflow-path)::after {
    border-style: dashed;
    border-color: var(--workflow-out);
    background: none;
    clip-path: none;
}
.workflow-fork {
    --workflow-trunk: var(--workflow-wire-colour);
    --workflow-joined: var(--border-strong);
}
.workflow-fork:has(> .workflow-branch > .workflow-path > :first-child[data-state="running"]):not(:has(> .workflow-branch > .workflow-path > :first-child:is([data-state="waiting"], [data-state="done"], [data-state="failed"]))) {
    --workflow-trunk: var(--workflow-flow-base);
}
.workflow-fork:has(+ .workflow-step:is([data-state="waiting"], [data-state="done"], [data-state="failed"])) { --workflow-joined: var(--workflow-trail); }
.workflow-fork:has(+ .workflow-step[data-state="next"]) { --workflow-joined: var(--border-hover); }
.workflow-fork:has(+ .workflow-step[data-state="skipped"]) { --workflow-joined: var(--border); }
.workflow-fork:has(+ .workflow-step[data-state="running"]) { --workflow-joined: var(--workflow-flow-base); }
.workflow-fork:has(> .workflow-branch[data-state="taken"]),
.workflow-fork:has(> .workflow-branch > .workflow-path > :first-child:is([data-state="running"], [data-state="waiting"], [data-state="done"], [data-state="failed"])) {
    --workflow-wire-colour: var(--workflow-trail);
}
.workflow-branch[data-state="skipped"],
.workflow-branch[data-state="skipped"] li {
    --workflow-wire-colour: var(--border);
    --workflow-wire-paint:
        repeating-linear-gradient(var(--workflow-dash-angle), var(--workflow-wire-colour) 0 4px, transparent 4px 9px),
        linear-gradient(var(--workflow-surface), var(--workflow-surface));
}
.workflow-branch[data-state="skipped"] {
    --workflow-in: var(--border);
    --workflow-out: var(--border);
    --workflow-in-z: 0;
    --workflow-out-z: 0;
}
.workflow-branch:has(> .workflow-path > :first-child[data-state="next"]) {
    --workflow-in: var(--border-hover);
}
.workflow-branch[data-state="taken"],
.workflow-branch:has(> .workflow-path > :first-child:is([data-state="running"], [data-state="waiting"], [data-state="done"], [data-state="failed"])) {
    --workflow-wire-colour: var(--workflow-trail);
}
.workflow-branch:is(
    [data-state="taken"],
    :has(> .workflow-path > :first-child:is([data-state="running"], [data-state="waiting"], [data-state="done"], [data-state="failed"])),
    :has(> .workflow-path > .workflow-fork:first-child > .workflow-branch[data-state="taken"]),
    :has(> .workflow-path > .workflow-fork:first-child > .workflow-branch > .workflow-path > :first-child:is([data-state="running"], [data-state="waiting"], [data-state="done"], [data-state="failed"]))
) {
    --workflow-in: var(--workflow-trail);
    --workflow-in-z: 3;
}
.workflow-branch:has(> .workflow-path > :last-child[data-state="done"]) {
    --workflow-out: var(--workflow-trail);
    --workflow-out-z: 3;
}
.workflow-branch:has(~ .workflow-branch[data-state="skipped"]) { --workflow-under-in: var(--border); --workflow-under-out: var(--border); }
.workflow-branch:has(~ .workflow-branch:not([data-state="skipped"])) { --workflow-under-in: var(--border-strong); --workflow-under-out: var(--border-strong); }
.workflow-branch:has(~ .workflow-branch > .workflow-path > :first-child[data-state="next"]) { --workflow-under-in: var(--border-hover); }
.workflow-branch:has(~ .workflow-branch > .workflow-path > :first-child[data-state="running"]) { --workflow-under-in: var(--workflow-flow-base); }
.workflow-branch:has(~ .workflow-branch[data-state="taken"] > .workflow-path > :first-child:not([data-state="running"])),
.workflow-branch:has(~ .workflow-branch > .workflow-path > :first-child:is([data-state="waiting"], [data-state="done"], [data-state="failed"])) { --workflow-under-in: var(--workflow-trail); }
.workflow-branch:has(~ .workflow-branch > .workflow-path > :last-child[data-state="done"]) { --workflow-under-out: var(--workflow-trail); }
.workflow-branch:is([data-state="taken"]:not(:has(> .workflow-path > :first-child[data-state="running"])), :has(> .workflow-path > :first-child:is([data-state="waiting"], [data-state="done"], [data-state="failed"]))):has(~ .workflow-branch):not(:has(~ .workflow-branch[data-state="taken"] > .workflow-path > :first-child:not([data-state="running"])), :has(~ .workflow-branch > .workflow-path > :first-child:is([data-state="waiting"], [data-state="done"], [data-state="failed"]))),
.workflow-branch:is(:has(> .workflow-path > :first-child[data-state="running"])):has(~ .workflow-branch):not(:has(~ .workflow-branch[data-state="taken"] > .workflow-path > :first-child:not([data-state="running"])), :has(~ .workflow-branch > .workflow-path > :first-child:is([data-state="waiting"], [data-state="done"], [data-state="failed"])), :has(~ .workflow-branch > .workflow-path > :first-child[data-state="running"])),
.workflow-branch:not([data-state="skipped"]):not([data-state="taken"]:not(:has(> .workflow-path > :first-child[data-state="running"])), :has(> .workflow-path > :first-child:is([data-state="waiting"], [data-state="done"], [data-state="failed"]))):not(:has(> .workflow-path > :first-child[data-state="running"])):has(~ .workflow-branch):not(:has(~ .workflow-branch:not([data-state="skipped"]))) { --workflow-stub-in: 1; }
.workflow-branch:is(:has(> .workflow-path > :last-child[data-state="done"])):has(~ .workflow-branch):not(:has(~ .workflow-branch > .workflow-path > :last-child[data-state="done"])),
.workflow-branch:not([data-state="skipped"]):not(:has(> .workflow-path > :last-child[data-state="done"])):has(~ .workflow-branch):not(:has(~ .workflow-branch:not([data-state="skipped"]))) { --workflow-stub-out: 1; }
.workflow-branch[data-state="taken"] > .workflow-label { border-color: var(--go-border); color: var(--go-fg); }
.workflow-branch[data-state="skipped"] > .workflow-label { border-style: dashed; border-color: var(--border); color: var(--muted); }
.workflow-branch:has(> .workflow-path > :first-child[data-state="running"]) > .workflow-label {
    --workflow-wire-colour: var(--workflow-flow-base);
}
.workflow-loop {
    --workflow-lead: calc(var(--workflow-gap) / 2);
    --workflow-loop-colour: var(--border-strong);
    display: flex;
    align-items: flex-start;
    padding-inline: calc(var(--workflow-gap) / 2);
    padding-block-end: var(--workflow-drop);
}
.workflow-loop[data-state="running"],
.workflow-loop[data-state="waiting"] { --workflow-loop-colour: var(--workflow-flow); }
.workflow-loop[data-state="done"] { --workflow-loop-colour: var(--workflow-trail); }
.workflow-loop[data-state="failed"] { --workflow-loop-colour: var(--danger-solid); }
.workflow-loop::after {
    content: '';
    position: absolute;
    box-sizing: border-box;
    inset-inline: calc(var(--workflow-gap) / 4 - var(--workflow-wire) / 2);
    inset-block: calc(var(--workflow-port) + var(--workflow-wire) / 2) calc(var(--workflow-drop) / 2 - var(--workflow-wire) / 2);
    border: var(--workflow-wire) dashed var(--workflow-loop-colour);
    border-block-start: none;
    border-end-start-radius: calc(var(--workflow-curve) + var(--workflow-wire) / 2);
    border-end-end-radius: calc(var(--workflow-curve) + var(--workflow-wire) / 2);
}
.workflow-loop > .workflow-path::after {
    content: '';
    position: absolute;
    inset-inline-start: 100%;
    inset-block-start: calc(var(--workflow-port) - var(--workflow-wire) / 2);
    inline-size: calc(var(--workflow-gap) / 2);
    block-size: var(--workflow-wire);
    background: var(--workflow-loop-colour);
}
.workflow-loop-count {
    position: absolute;
    z-index: 2;
    inset-inline: 0;
    inset-block-end: calc(var(--workflow-drop) / 2 - var(--workflow-pill) / 2);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    inline-size: fit-content;
    block-size: var(--workflow-pill);
    margin-inline: auto;
    padding-inline: var(--space-4);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: var(--workflow-surface);
    color: var(--fg-soft);
    font-size: var(--text-2);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.workflow-loop-count > i { color: var(--muted); font-size: var(--text-3); }
.workflow-loop:has(> .workflow-path > :first-child[data-state="running"])::before {
    inset-inline-end: calc(100% - var(--workflow-gap) / 2);
    inline-size: calc(var(--workflow-gap) * 1.5);
}
.workflow-loop + .workflow-step::before { inline-size: calc(var(--workflow-gap) * 1.5); }
:is(.workflow, .workflow-path) > .workflow-step[data-state="running"]:not(.workflow-branch > .workflow-path > :first-child, .workflow-loop > .workflow-path > :first-child, .workflow-fork + *)::before,
.workflow-step[data-state="running"] > .workflow-label::after,
.workflow-branch:has(> .workflow-path > :first-child[data-state="running"]) > .workflow-label::after,
.workflow-fork:has(> .workflow-branch > .workflow-path > :first-child[data-state="running"])::before,
.workflow-fork:has(> .workflow-branch > .workflow-path > .workflow-fork:first-child > .workflow-branch > .workflow-path > :first-child[data-state="running"])::before,
.workflow-loop:has(> .workflow-path > :first-child[data-state="running"])::before,
.workflow-fork:has(+ .workflow-step[data-state="running"]) > .workflow-branch:last-child::after,
.workflow-branch:has(> .workflow-path > :first-child[data-state="running"])::before,
.workflow-branch:has(> .workflow-path > .workflow-fork:first-child > .workflow-branch > .workflow-path > :first-child[data-state="running"])::before,
.workflow-branch:has(> .workflow-path > :first-child[data-state="running"])::after,
.workflow-branch:has(> .workflow-path > .workflow-fork:first-child > .workflow-branch > .workflow-path > :first-child[data-state="running"])::after,
.workflow-fork:has(+ .workflow-step[data-state="running"]) > .workflow-branch:not([data-state="skipped"]) > .workflow-path::before,
.workflow-fork:has(+ .workflow-step[data-state="running"]) > .workflow-branch:not([data-state="skipped"]) > .workflow-path > .workflow-fork:last-child > .workflow-branch:not([data-state="skipped"]) > .workflow-path::before,
.workflow-fork:has(+ .workflow-step[data-state="running"]) > .workflow-branch:not([data-state="skipped"]) > .workflow-path::after,
.workflow-fork:has(+ .workflow-step[data-state="running"]) > .workflow-branch:not([data-state="skipped"]) > .workflow-path > .workflow-fork:last-child > .workflow-branch:not([data-state="skipped"]) > .workflow-path::after {
    background:
        var(--workflow-way-over, none),
        repeating-linear-gradient(var(--workflow-stream-angle), transparent 0 var(--workflow-comet-tail), var(--workflow-comet) var(--workflow-comet-head), transparent var(--workflow-comet-end))
            var(--workflow-stream-side) var(--workflow-stream-at) top 0 / var(--workflow-flow-period) var(--workflow-flow-period),
        linear-gradient(var(--workflow-flow-base), var(--workflow-flow-base));
    animation: workflow-flow var(--workflow-flow-duration) linear infinite var(--workflow-flow-play);
}
.workflow-branch:has(> .workflow-path > :first-child[data-state="running"])::before,
.workflow-branch:has(> .workflow-path > .workflow-fork:first-child > .workflow-branch > .workflow-path > :first-child[data-state="running"])::before,
.workflow-branch:has(> .workflow-path > :first-child[data-state="running"])::after,
.workflow-branch:has(> .workflow-path > .workflow-fork:first-child > .workflow-branch > .workflow-path > :first-child[data-state="running"])::after,
.workflow-fork:has(+ .workflow-step[data-state="running"]) > .workflow-branch:not([data-state="skipped"]) > .workflow-path::before,
.workflow-fork:has(+ .workflow-step[data-state="running"]) > .workflow-branch:not([data-state="skipped"]) > .workflow-path > .workflow-fork:last-child > .workflow-branch:not([data-state="skipped"]) > .workflow-path::before,
.workflow-fork:has(+ .workflow-step[data-state="running"]) > .workflow-branch:not([data-state="skipped"]) > .workflow-path::after,
.workflow-fork:has(+ .workflow-step[data-state="running"]) > .workflow-branch:not([data-state="skipped"]) > .workflow-path > .workflow-fork:last-child > .workflow-branch:not([data-state="skipped"]) > .workflow-path::after {
    z-index: 2;
    background-origin: border-box;
}
.workflow-fork:not(:has(> .workflow-branch > .workflow-path > :first-child:is([data-state="waiting"], [data-state="done"], [data-state="failed"]))) > .workflow-branch:has(> .workflow-path > :first-child[data-state="running"])::before,
.workflow-fork:not(:has(> .workflow-branch > .workflow-path > :first-child:is([data-state="waiting"], [data-state="done"], [data-state="failed"]))) > .workflow-branch:has(> .workflow-path > .workflow-fork:first-child > .workflow-branch > .workflow-path > :first-child[data-state="running"])::before,
.workflow-fork:has(+ .workflow-step[data-state="running"]) > .workflow-branch:not([data-state="skipped"]) > .workflow-path::before,
.workflow-fork:has(+ .workflow-step[data-state="running"]) > .workflow-branch:not([data-state="skipped"]) > .workflow-path > .workflow-fork:last-child > .workflow-branch:not([data-state="skipped"]) > .workflow-path::before,
.workflow-fork:has(+ .workflow-step[data-state="running"]) > .workflow-branch:not([data-state="skipped"]) > .workflow-path::after,
.workflow-fork:has(+ .workflow-step[data-state="running"]) > .workflow-branch:not([data-state="skipped"]) > .workflow-path > .workflow-fork:last-child > .workflow-branch:not([data-state="skipped"]) > .workflow-path::after {
    --workflow-way-over: none;
}
.workflow-fork:has(+ .workflow-step[data-state="running"]) > .workflow-branch:first-child:not([data-state="skipped"]) > .workflow-path::before,
.workflow-fork:has(+ .workflow-step[data-state="running"]) > .workflow-branch:not([data-state="skipped"]) > .workflow-path > .workflow-fork:last-child > .workflow-branch:first-child:not([data-state="skipped"]) > .workflow-path::before {
    inset-inline-end: calc(-1 * var(--workflow-gap));
}
.workflow-fork:has(> .workflow-branch > .workflow-path > :first-child[data-state="running"])::before,
.workflow-fork:has(> .workflow-branch > .workflow-path > .workflow-fork:first-child > .workflow-branch > .workflow-path > :first-child[data-state="running"])::before {
    z-index: 3;
}
.workflow-fork:has(> .workflow-branch > .workflow-path > :first-child:is([data-state="waiting"], [data-state="done"], [data-state="failed"]))::before {
    z-index: 3;
    background: var(--workflow-wire-paint);
    animation: none;
}
@container not style(--workflow-axis: down) {
    .workflow-fork:has(+ .workflow-step[data-state="running"]) > .workflow-branch:last-child:not(:first-child)::after {
        background: var(--workflow-way-over), linear-gradient(var(--workflow-in), var(--workflow-in));
        animation: none;
    }
}
@keyframes workflow-flow {
    from { background-position: var(--workflow-over-at), var(--workflow-stream-side) var(--workflow-stream-at) top 0, 0 0; }
    to { background-position: var(--workflow-over-at), var(--workflow-stream-side) calc(var(--workflow-stream-at) + var(--workflow-stream-step)) top 0, 0 0; }
}
.workflow--sm .workflow-node-title { font-size: var(--text-4); line-height: 16px; }
.workflow--sm .workflow-node-meta { font-size: var(--text-2); line-height: 12px; }
.workflow--sm .workflow-node-icon { font-size: var(--text-6); }
.workflow--sm .workflow-node { gap: var(--space-4); font-size: var(--text-3); }
.workflow--lg .workflow-node-title { font-size: var(--text-7); line-height: 26px; }
.workflow--lg .workflow-node-meta { font-size: var(--text-4); line-height: 22px; }
.workflow--lg .workflow-node-icon { font-size: var(--text-9); border-radius: var(--radius-panel); }
.workflow--lg .workflow-node { gap: var(--space-6); font-size: var(--text-5); }
.workflow--xl .workflow-node-title { font-size: var(--text-10); line-height: 36px; }
.workflow--xl .workflow-node-meta { font-size: var(--text-7); line-height: 28px; }
.workflow--xl .workflow-node-icon { font-size: var(--text-10); border-radius: var(--radius-panel); }
.workflow--xl .workflow-node { gap: var(--space-7); font-size: var(--text-7); }
.workflow--xl .workflow-node-now { font-size: var(--text-6); }
.workflow--xl :is(.workflow-label, .workflow-loop-count) { padding-inline: var(--space-6); font-size: var(--text-4); }
.workflow--xl .workflow-end { padding-inline: var(--space-8); font-size: var(--text-6); }
.workflow > li { contain-intrinsic-size: auto none; }
.workflow > [data-workflow-away] { content-visibility: auto; }
.workflow--focus .workflow-step:not([data-state="running"]):not([data-state="waiting"]) > .workflow-node > :not(.workflow-node-head) { display: none; }
.workflow--focus:not(.workflow--fill) .workflow-step:is([data-state="running"], [data-state="waiting"]) > .workflow-node { inline-size: calc(var(--workflow-node) * 1.5); }
.workflow.workflow--focus.workflow--fill > :is([data-state="running"], [data-state="waiting"]) { flex-grow: 2; }
.workflow--down {
    --workflow-axis: down;
    --workflow-axis-x: 0;
    --workflow-axis-y: 1;
    --workflow-node: 100%;
    --workflow-gap: var(--space-9);
    --workflow-drop: calc(var(--space-11) + var(--space-7));
    --workflow-indent: calc(var(--workflow-port) + var(--space-9));
    flex-direction: column;
    align-items: stretch;
}
@media (max-width: 640px) {
    .workflow--auto {
        --workflow-axis: down;
        --workflow-axis-x: 0;
        --workflow-axis-y: 1;
            --workflow-node: 100%;
        --workflow-gap: var(--space-9);
        --workflow-drop: calc(var(--space-11) + var(--space-7));
        --workflow-indent: calc(var(--workflow-port) + var(--space-9));
            flex-direction: column;
        align-items: stretch;
    }
}
@container style(--workflow-axis: down) {
    .workflow-path { flex-direction: column; align-items: stretch; }
    .workflow-step { flex-direction: column; align-items: stretch; row-gap: var(--space-5); }
    .workflow-node { max-inline-size: 100%; }
    .workflow.workflow--fill > li { flex: none; min-inline-size: 0; }
    .workflow > li::before,
    .workflow-path > li::before {
        inset-inline: calc(var(--workflow-port) - var(--workflow-wire) / 2) auto;
        inset-block: auto 100%;
        inline-size: var(--workflow-wire);
        block-size: var(--workflow-gap);
    }
    .workflow-path > li:first-child::before { block-size: var(--workflow-lead); }
    .workflow > .workflow-fork::before,
    .workflow-path > .workflow-fork::before,
    .workflow-fork + li::before {
        inset-inline-end: auto;
        inline-size: var(--workflow-wire);
    }
    .workflow > .workflow-fork::before,
    .workflow-path > .workflow-fork::before {
        inset-block-end: calc(100% - 1px);
        block-size: calc(var(--workflow-gap) + 1px);
    }
    .workflow-end,
    .workflow-step > .workflow-label {
        align-self: flex-start;
        margin-block-start: 0;
    }
    .workflow-label::after {
        inset-inline-start: calc(var(--workflow-port) - 1px - var(--workflow-wire) / 2);
        inset-block-start: calc(100% + 1px);
        inline-size: var(--workflow-wire);
        block-size: var(--space-5);
    }
    .workflow-branch {
        flex-direction: column;
        align-items: stretch;
        row-gap: var(--space-5);
        padding-inline-start: var(--workflow-indent);
    }
    .workflow-branch:has(> .workflow-label) { --workflow-line: calc(var(--workflow-pill) / 2); }
    .workflow-branch > .workflow-path { flex: none; }
    .workflow-branch::before,
    .workflow-branch:first-child::before,
    .workflow-branch:not(:first-child)::before,
    .workflow-path > .workflow-fork:first-child > .workflow-branch:not(:first-child)::before {
        --workflow-stream-at: calc(-1 * var(--workflow-gap));
        --workflow-way-over: conic-gradient(from var(--workflow-seam-b) at calc(var(--workflow-wire) / 2 + var(--workflow-curve) + var(--workflow-mirror) * (100% - 2 * (var(--workflow-wire) / 2 + var(--workflow-curve)))) calc(100% - var(--workflow-way-r)), transparent 0, var(--workflow-under-in) var(--workflow-seam-bd-p0), var(--workflow-under-in) var(--workflow-seam-bd-p1), transparent var(--workflow-seam-bd-t1), transparent 0);
        --workflow-over-at: 0 0;
        content: '';
        inset-inline: calc(var(--workflow-port) - var(--workflow-wire) / 2) auto;
        inline-size: calc(var(--workflow-indent) - var(--workflow-port) + var(--workflow-wire) / 2);
        inset-block: 0 calc(anchor(--workflow-branch top) - var(--workflow-line) - var(--workflow-wire) / 2);
        block-size: auto;
        border-width: 0;
        border-inline-start-width: var(--workflow-wire);
        border-block-end-width: var(--workflow-wire);
        border-radius: 0;
        border-end-start-radius: var(--workflow-way-r);
    }
    .workflow-branch:is([data-state="taken"]:not(:has(> .workflow-path > :first-child[data-state="running"])), :has(> .workflow-path > :first-child:is([data-state="waiting"], [data-state="done"], [data-state="failed"]))):has(~ .workflow-branch):not(:has(~ .workflow-branch[data-state="taken"] > .workflow-path > :first-child:not([data-state="running"])), :has(~ .workflow-branch > .workflow-path > :first-child:is([data-state="waiting"], [data-state="done"], [data-state="failed"])))::before,
    .workflow-branch:is(:has(> .workflow-path > :first-child[data-state="running"])):has(~ .workflow-branch):not(:has(~ .workflow-branch[data-state="taken"] > .workflow-path > :first-child:not([data-state="running"])), :has(~ .workflow-branch > .workflow-path > :first-child:is([data-state="waiting"], [data-state="done"], [data-state="failed"])), :has(~ .workflow-branch > .workflow-path > :first-child[data-state="running"]))::before,
    .workflow-branch:not([data-state="skipped"]):not([data-state="taken"]:not(:has(> .workflow-path > :first-child[data-state="running"])), :has(> .workflow-path > :first-child:is([data-state="waiting"], [data-state="done"], [data-state="failed"]))):not(:has(> .workflow-path > :first-child[data-state="running"])):has(~ .workflow-branch):not(:has(~ .workflow-branch:not([data-state="skipped"])))::before,
    .workflow-fork:not(:last-child) > .workflow-branch:last-child:is([data-state="taken"]:not(:has(> .workflow-path > :first-child[data-state="running"])), :has(> .workflow-path > :first-child:is([data-state="waiting"], [data-state="done"], [data-state="failed"])), :has(> .workflow-path > :first-child[data-state="running"]))::before {
        --workflow-way-over: radial-gradient(circle at calc(var(--workflow-way-r) + var(--workflow-mirror) * (100% - 2 * (var(--workflow-way-r)))) 0, transparent var(--workflow-way-r), var(--workflow-under-in) hypot(var(--workflow-way-ri), var(--workflow-way-fade))) var(--workflow-start-side) 0 bottom calc(var(--workflow-way-r) - var(--workflow-way-fade)) / var(--workflow-wire) var(--workflow-way-fade) no-repeat;
        --workflow-over-at: var(--workflow-start-side) 0 bottom calc(var(--workflow-way-r) - var(--workflow-way-fade));
    }
    .workflow-fork:not(:last-child) > .workflow-branch:last-child:is([data-state="taken"]:not(:has(> .workflow-path > :first-child[data-state="running"])), :has(> .workflow-path > :first-child:is([data-state="waiting"], [data-state="done"], [data-state="failed"])), :has(> .workflow-path > :first-child[data-state="running"])) { --workflow-stub-in: 1; }
    :where(.workflow-branch)::before { clip-path: shape(from calc(0px + var(--workflow-mirror) * (100% - 2 * (0px))) 0, line to calc(var(--workflow-wire) + var(--workflow-mirror) * (100% - 2 * (var(--workflow-wire)))) 0, line to calc(var(--workflow-wire) + var(--workflow-mirror) * (100% - 2 * (var(--workflow-wire)))) calc(100% - var(--workflow-way-r)), arc to calc(var(--workflow-wire) / 2 + var(--workflow-curve) + var(--workflow-mirror) * (100% - 2 * (var(--workflow-wire) / 2 + var(--workflow-curve)))) calc(100% - var(--workflow-wire)) of var(--workflow-way-ri) var(--workflow-ccw), line to calc(100% + var(--workflow-mirror) * (100% - 2 * (100%))) calc(100% - var(--workflow-wire)), line to calc(100% + var(--workflow-mirror) * (100% - 2 * (100%))) 100%, line to calc(var(--workflow-wire) / 2 + var(--workflow-curve) + var(--workflow-mirror) * (100% - 2 * (var(--workflow-wire) / 2 + var(--workflow-curve)))) 100%, arc to calc(0px + var(--workflow-mirror) * (100% - 2 * (0px))) calc(100% - var(--workflow-way-r)) of var(--workflow-way-r) var(--workflow-cw), close, move to calc(0px + var(--workflow-mirror) * (100% - 2 * (0px))) calc(100% - var(--workflow-way-r)), line to calc(var(--workflow-wire) + var(--workflow-mirror) * (100% - 2 * (var(--workflow-wire)))) calc(100% - var(--workflow-way-r)), line to calc(var(--workflow-wire) + var(--workflow-mirror) * (100% - 2 * (var(--workflow-wire)))) calc(100% - var(--workflow-way-r) + var(--workflow-way-fade) * var(--workflow-stub-in)), line to calc(0px + var(--workflow-mirror) * (100% - 2 * (0px))) calc(100% - var(--workflow-way-r) + var(--workflow-way-fade) * var(--workflow-stub-in)), close); }
    :where(.workflow-branch[data-state="skipped"], .workflow-branch:has(> .workflow-path > :first-child[data-state="next"]), .workflow-branch:has(> .workflow-path > :first-child > .workflow-node--add))::before { clip-path: none; }
    .workflow-fork:not(:has(> .workflow-branch > .workflow-path > :first-child:is([data-state="waiting"], [data-state="done"], [data-state="failed"]))) > .workflow-branch:nth-child(n):has(> .workflow-path > :first-child[data-state="running"])::before,
    .workflow-fork:not(:has(> .workflow-branch > .workflow-path > :first-child:is([data-state="waiting"], [data-state="done"], [data-state="failed"]))) > .workflow-branch:nth-child(n):has(> .workflow-path > .workflow-fork:first-child > .workflow-branch > .workflow-path > :first-child[data-state="running"])::before {
        --workflow-way-over: conic-gradient(from var(--workflow-seam-b) at calc(var(--workflow-wire) / 2 + var(--workflow-curve) + var(--workflow-mirror) * (100% - 2 * (var(--workflow-wire) / 2 + var(--workflow-curve)))) calc(100% - var(--workflow-way-r)), transparent 0, var(--workflow-under-in) var(--workflow-seam-bd-p0), var(--workflow-under-in) var(--workflow-seam-bd-p1), transparent var(--workflow-seam-bd-t1), transparent 0);
    }
    .workflow-fork:not(:has(> .workflow-branch > .workflow-path > :first-child:is([data-state="waiting"], [data-state="done"], [data-state="failed"]))) > .workflow-branch:nth-child(n):has(> .workflow-path > :first-child[data-state="running"]):not(:has(~ .workflow-branch[data-state="taken"] > .workflow-path > :first-child:not([data-state="running"])), :has(~ .workflow-branch > .workflow-path > :first-child:is([data-state="waiting"], [data-state="done"], [data-state="failed"])), :has(~ .workflow-branch > .workflow-path > :first-child[data-state="running"])):has(~ .workflow-branch)::before,
    .workflow-fork:not(:last-child):not(:has(> .workflow-branch > .workflow-path > :first-child:is([data-state="waiting"], [data-state="done"], [data-state="failed"]))) > .workflow-branch:nth-child(n):has(> .workflow-path > :first-child[data-state="running"]):last-child::before {
        --workflow-way-over: radial-gradient(circle at calc(var(--workflow-way-r) + var(--workflow-mirror) * (100% - 2 * (var(--workflow-way-r)))) 0, transparent var(--workflow-way-r), var(--workflow-under-in) hypot(var(--workflow-way-ri), var(--workflow-way-fade))) var(--workflow-start-side) 0 bottom calc(var(--workflow-way-r) - var(--workflow-way-fade)) / var(--workflow-wire) var(--workflow-way-fade) no-repeat;
        --workflow-over-at: var(--workflow-start-side) 0 bottom calc(var(--workflow-way-r) - var(--workflow-way-fade));
    }
    .workflow-branch:has(> .workflow-path > .workflow-fork:first-child)::before {
        inline-size: calc(var(--workflow-indent) + var(--workflow-wire) / 2);
    }
    .workflow-path > .workflow-fork:first-child > .workflow-branch:nth-child(n)::before {
        inset-block-start: calc(var(--workflow-port) - var(--workflow-wire) / 2);
    }
    .workflow-branch:not(:first-child)::after { content: none; }
    .workflow-branch:last-child::after,
    .workflow-branch:last-child:not(:first-child)::after {
        --workflow-stream-at: 0px;
        --workflow-way-over: none;
        --workflow-over-at: 0 0;
        content: '';
        z-index: 1;
        inset-inline: calc(var(--workflow-port) - var(--workflow-wire) / 2) auto;
        inline-size: var(--workflow-wire);
        inset-block: calc(anchor(--workflow-branch top) + var(--workflow-line) - var(--workflow-curve)) 0;
        block-size: auto;
        border: 0;
        border-radius: 0;
        clip-path: none;
        background: var(--workflow-wire-paint);
    }
    .workflow-branch:has(> .workflow-path > :first-child[data-state="running"])::after,
    .workflow-branch:has(> .workflow-path > .workflow-fork:first-child > .workflow-branch > .workflow-path > :first-child[data-state="running"])::after {
        z-index: 1;
        border: 0;
        clip-path: none;
        background: var(--workflow-wire-paint);
        animation: none;
    }
    .workflow-fork + .workflow-step::before { content: none; }
    .workflow-fork:has(+ .workflow-step) > .workflow-branch:last-child::after { inset-block-end: calc(-1 * var(--workflow-gap)); }
    .workflow-fork:has(+ :is(.workflow-fork, .workflow-loop)):has(> .workflow-branch > .workflow-path > :last-child[data-state="done"]) > .workflow-branch:last-child::after {
        --workflow-wire-colour: var(--workflow-trail);
    }
    .workflow-fork:last-child > .workflow-branch:last-child::after { content: none; }
    .workflow-fork:not(:last-child) > .workflow-branch:last-child { --workflow-under-in: var(--border-strong); }
    .workflow-fork:has(+ .workflow-step:is([data-state="waiting"], [data-state="done"], [data-state="failed"])) > .workflow-branch:last-child,
    .workflow-fork:has(+ :is(.workflow-fork, .workflow-loop)):has(> .workflow-branch > .workflow-path > :last-child[data-state="done"]) > .workflow-branch:last-child { --workflow-under-in: var(--workflow-trail); }
    .workflow-fork:has(+ .workflow-step[data-state="next"]) > .workflow-branch:last-child { --workflow-under-in: var(--border-hover); }
    .workflow-fork:has(+ .workflow-step[data-state="skipped"]) > .workflow-branch:last-child { --workflow-under-in: var(--border); }
    .workflow-fork:has(+ .workflow-step[data-state="running"]) > .workflow-branch:last-child { --workflow-under-in: var(--workflow-flow-base); }
    .workflow-branch:nth-child(n):nth-child(n):nth-child(n) > .workflow-path::before,
    .workflow-branch:nth-child(n):nth-child(n):nth-child(n) > .workflow-path::after { content: none; }
    .workflow-branch > .workflow-path > li:first-child::before { content: none; }
    .workflow-branch > .workflow-label { align-self: flex-start; margin-block-start: 0; }
    .workflow-loop:has(> .workflow-path > :first-child[data-state="running"])::before,
    .workflow-loop + .workflow-step::before {
        inset-inline-end: auto;
        inline-size: var(--workflow-wire);
    }
    .workflow-fork--decision::after {
        inset-inline-start: calc(var(--workflow-port) - 6px);
        inset-block-start: calc(var(--workflow-gap) / -2 - 6px);
    }
    .workflow-loop {
        --workflow-lead: 0px;
        flex-direction: column;
        align-items: stretch;
        padding-inline: 0 var(--workflow-drop);
        padding-block-end: 0;
    }
    .workflow-loop::after {
        inset-inline: auto calc(var(--workflow-drop) / 2 - var(--workflow-wire) / 2);
        inset-block: calc(var(--workflow-port) - var(--workflow-wire) / 2);
        inline-size: calc(var(--workflow-drop) / 2 + var(--workflow-wire) / 2);
        border: var(--workflow-wire) dashed var(--workflow-loop-colour);
        border-inline-start: 0;
        border-radius: 0;
        border-start-end-radius: calc(var(--workflow-curve) + var(--workflow-wire) / 2);
        border-end-end-radius: calc(var(--workflow-curve) + var(--workflow-wire) / 2);
    }
    .workflow-loop > .workflow-path::after { content: none; }
    .workflow-loop-count {
        inset-inline: auto calc(var(--workflow-drop) / 2);
        inset-block: 0;
        margin-block: auto;
        margin-inline: 0;
        translate: calc(50% * var(--workflow-dir-x)) 0;
    }
}
.workflow-decision {
    --workflow-mark: 16px;
    display: grid;
    grid-template-columns: var(--workflow-mark) minmax(0, 1fr) minmax(48px, 28%) auto;
    column-gap: var(--space-5);
    row-gap: var(--space-6);
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-4);
}
.workflow-decision > li {
    display: grid;
    grid-column: span 4;
    grid-template-columns: subgrid;
    row-gap: var(--space-1);
    align-items: center;
}
.workflow-decision > li::before,
.workflow-decision > li::after {
    content: '';
    box-sizing: border-box;
    grid-column: 1;
    grid-row: 1;
    place-self: center;
    inline-size: var(--workflow-mark);
    block-size: var(--workflow-mark);
    border-radius: 50%;
}
.workflow-decision > li::before { border: 2px solid var(--border-strong); }
.workflow-decision > [data-state="chosen"]::before { border-color: var(--go-solid); background: var(--go-solid); }
.workflow-decision > [data-state="chosen"]::after { translate: 0 -1px; }
.workflow-decision > [data-state="rejected"] { color: var(--muted); }
.workflow-decision > [data-state="rejected"]::before { border-color: var(--border); }
.workflow-decision-option { grid-column: 2; grid-row: 1; min-inline-size: 0; overflow-wrap: anywhere; }
.workflow-decision > [data-state="chosen"] .workflow-decision-option { font-weight: 600; }
.workflow-decision > li > .meter { grid-column: 3; grid-row: 1; block-size: 6px; }
.workflow-decision > li > .meter > .meter-fill { color: var(--info-solid); }
.workflow-decision > [data-state="chosen"] > .meter > .meter-fill { color: var(--go-solid); }
.workflow-decision > [data-state="rejected"] > .meter > .meter-fill { color: var(--border-strong); }
.workflow-decision-score {
    grid-column: 4;
    grid-row: 1;
    color: var(--fg-soft);
    font-size: var(--text-3);
    font-variant-numeric: tabular-nums;
    text-align: end;
}
.workflow-decision > [data-state="rejected"] .workflow-decision-score { color: var(--muted); }
.workflow-decision-why {
    grid-column: 2 / -1;
    grid-row: 2;
    color: var(--muted);
    font-size: var(--text-3);
}
}
@layer sedna.paint {
.beam,
.beam:hover,
.beam:focus,
.beam:focus-within {
    --beam-fill: var(--surface-raised-1);
    border-color: transparent;
    background:
        linear-gradient(var(--beam-fill), var(--beam-fill)) padding-box,
        linear-gradient(90deg, var(--agent-from), var(--agent-to)) border-box;
}
.beam--glow { box-shadow: 0 0 18px -4px var(--agent-glow-dim); }
.beam--glow:focus,
.beam--glow:focus-within { box-shadow: 0 0 0 2px var(--brand-glow), 0 0 18px -4px var(--agent-glow-dim); }
.form-input.beam,
.form-input.beam:focus             { --beam-fill: var(--bg); }
.btn.beam                          { --beam-fill: var(--bg-elevated); }
.btn.beam:hover                    { --beam-fill: var(--bg-hover); }
.chat-composer--prompt.beam,
.chat-composer--prompt.beam:focus-within { --beam-fill: var(--surface-raised-2); }
}
@layer sedna.paint {
:is(.btn-bare, .menu-item, .tab, button.chip, .page-link, :is(a, button).list-row, .segmented-option,
    .topbar-btn, .bottombar-item, .nav-link, .fab)[aria-busy="true"] {
    cursor: progress;
    pointer-events: none;
}
:is(.btn-bare, .menu-item, .tab, button.chip, .page-link, :is(a, button).list-row, .segmented-option,
    .topbar-btn, .bottombar-item, .nav-link, .fab)[aria-busy="true"] > i:first-of-type {
    position: relative;
    color: transparent;
}
:is(.btn-bare, .menu-item, .tab, button.chip, .page-link, :is(a, button).list-row, .segmented-option,
    .topbar-btn, .bottombar-item, .nav-link, .fab)[aria-busy="true"] > i:first-of-type::after {
    content: "";
    position: absolute;
    inset: 0;
    inline-size: round(1em, 2px);
    block-size: round(1em, 2px);
    margin: auto;
    border: 2px solid var(--muted);
    border-inline-end-color: transparent;
    border-radius: 50%;
    box-sizing: border-box;
    animation: sedna-spin var(--spin-duration) linear infinite;
}
:is(.card, .modal, .drawer, .sheet, .list, .table, .stat-row, .output-panel, .chat, .graph-frame, .form-section)[aria-busy="true"] {
    cursor: progress;
    background-image: linear-gradient(var(--brand-soft), var(--brand-soft));
    background-size: 30% 2px;
    background-repeat: no-repeat;
    background-position: -42.8572% 0;
    animation: sedna-busy-bar var(--progress-duration) ease-in-out infinite;
}
:is(.card, .modal, .drawer, .sheet, .list, .table, .stat-row, .output-panel, .chat, .graph-frame, .form-section)[aria-busy="true"] > * {
    opacity: 0.55;
    pointer-events: none;
}
@keyframes sedna-busy-bar {
    from { background-position: -42.8572% 0; }
    to   { background-position: 142.8572% 0; }
}
:is(.form-select, .form-combo-box, .form-color)[aria-readonly="true"],
.form-combo:has(.form-combo-input[aria-readonly="true"]) .form-combo-box {
    background-color: var(--disabled-bg);
    border-color: var(--disabled-border);
    color: var(--fg);
    pointer-events: none;
}
:is(.segmented, .form-range, .choice-tiles, .form-color-area)[aria-readonly="true"],
:is(.form-check, .switch):has(input[aria-readonly="true"]) {
    pointer-events: none;
}
:is(.form-check, .switch):has(input[aria-readonly="true"]) input { opacity: 1; }
}
@layer sedna.paint {
.table--stagger tbody > tr,
.list--stagger > li {
    animation: sedna-row-in var(--motion-slow) ease-out backwards;
    animation-delay: calc(var(--row-index, 12) * var(--stagger-step));
}
.table--stagger tbody > tr:nth-child(1), .list--stagger > li:nth-child(1) { --row-index: 0; }
.table--stagger tbody > tr:nth-child(2), .list--stagger > li:nth-child(2) { --row-index: 1; }
.table--stagger tbody > tr:nth-child(3), .list--stagger > li:nth-child(3) { --row-index: 2; }
.table--stagger tbody > tr:nth-child(4), .list--stagger > li:nth-child(4) { --row-index: 3; }
.table--stagger tbody > tr:nth-child(5), .list--stagger > li:nth-child(5) { --row-index: 4; }
.table--stagger tbody > tr:nth-child(6), .list--stagger > li:nth-child(6) { --row-index: 5; }
.table--stagger tbody > tr:nth-child(7), .list--stagger > li:nth-child(7) { --row-index: 6; }
.table--stagger tbody > tr:nth-child(8), .list--stagger > li:nth-child(8) { --row-index: 7; }
.table--stagger tbody > tr:nth-child(9), .list--stagger > li:nth-child(9) { --row-index: 8; }
.table--stagger tbody > tr:nth-child(10), .list--stagger > li:nth-child(10) { --row-index: 9; }
.table--stagger tbody > tr:nth-child(11), .list--stagger > li:nth-child(11) { --row-index: 10; }
.table--stagger tbody > tr:nth-child(12), .list--stagger > li:nth-child(12) { --row-index: 11; }
@keyframes sedna-row-in {
    from { opacity: 0; transform: translateY(4px); }
}
:where(.tr-clickable > td:first-child, :is(a, button).list-row) { position: relative; }
.tr-clickable:not([aria-selected="true"]):hover > td:first-child::after,
:is(a, button).list-row:not([aria-selected="true"], [aria-current="true"]):hover::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 3px;
    background: var(--row-hover-accent);
    pointer-events: none;
}
}
@layer sedna.paint {
.timeline {
    --timeline-line: 1px;
    --timeline-dot: 13px;
    --timeline-marker: 27px;
    --timeline-lead: 17px;
    --timeline-gap: var(--space-7);
    --timeline-surface: var(--surface-here, var(--bg));
    list-style: none;
    margin: 0;
    padding: 0;
}
.timeline > li {
    position: relative;
    margin-inline-start: calc((var(--timeline-dot) - var(--timeline-line)) / 2);
    padding-block: 0 var(--timeline-gap);
    padding-inline: var(--space-9) 0;
    border-inline-start: var(--timeline-line) solid transparent;
    isolation: isolate;
}
.timeline > li:last-child { padding-block-end: 0; }
.timeline > li::after {
    content: '';
    position: absolute;
    inset-inline-start: calc(var(--timeline-line) * -1);
    inset-block: calc(var(--timeline-lead) / 2) calc(var(--timeline-lead) / -2);
    border-inline-start: var(--timeline-line) solid var(--border);
}
.timeline > li:last-child::after { content: none; }
.timeline > li::before {
    content: '';
    position: absolute;
    box-sizing: border-box;
    inset-inline-start: calc((var(--timeline-line) + var(--timeline-dot)) / -2);
    top: calc((var(--timeline-lead) - var(--timeline-dot)) / 2);
    width: var(--timeline-dot);
    height: var(--timeline-dot);
    background: var(--border-hover);
    border: 2px solid var(--timeline-surface);
    border-radius: 50%;
    z-index: 1;
}
.timeline-when {
    display: block;
    color: var(--muted);
    font-size: var(--text-2);
    line-height: var(--timeline-lead);
    font-variant-numeric: tabular-nums;
}
.timeline-what { color: var(--fg-soft); font-size: var(--text-4); }
.timeline > li[data-kind="go"]::before     { background: var(--go-solid); }
.timeline > li[data-kind="warn"]::before   { background: var(--warn-solid); }
.timeline > li[data-kind="danger"]::before { background: var(--danger-solid); }
.timeline > li[data-kind="info"]::before   { background: var(--info-solid); }
.timeline > li[data-state="current"]::before {
    background: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-glow);
}
.timeline > li[data-state="current"] > .timeline-mark {
    border-color: var(--brand);
    color: var(--brand-text);
    box-shadow: 0 0 0 3px var(--brand-glow);
}
.timeline > li[data-state="current"] > .timeline-what { color: var(--fg); font-weight: 500; }
.timeline-body {
    margin-top: var(--space-4);
    color: var(--fg-soft);
    font-size: var(--text-3);
}
.timeline-body > :first-child { margin-top: 0; }
.timeline-body > :last-child { margin-bottom: 0; }
.timeline:has(.timeline-mark) {
    --timeline-lead: var(--timeline-marker);
}
.timeline:has(.timeline-mark) > li {
    margin-inline-start: calc((var(--timeline-marker) - var(--timeline-line)) / 2);
    padding-inline-start: var(--space-10);
}
.timeline > li:has(> .timeline-mark)::before { content: none; }
.timeline-mark {
    position: absolute;
    z-index: 1;
    inset-inline-start: calc((var(--timeline-line) + var(--timeline-marker)) / -2);
    top: calc((var(--timeline-lead) - var(--timeline-marker)) / 2);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--timeline-marker);
    height: var(--timeline-marker);
    background: var(--timeline-surface);
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--muted);
    font-size: var(--text-4);
}
.timeline > li[data-kind="go"] > .timeline-mark {
    background: var(--go-solid);
    border-color: var(--go-solid);
    color: var(--on-solid);
}
.timeline > li[data-kind="warn"] > .timeline-mark {
    background: var(--warn-solid);
    border-color: var(--warn-solid);
    color: var(--on-solid);
}
.timeline > li[data-kind="danger"] > .timeline-mark {
    background: var(--danger-solid);
    border-color: var(--danger-solid);
    color: var(--on-solid);
}
.timeline > li[data-kind="info"] > .timeline-mark {
    background: var(--info-solid);
    border-color: var(--info-solid);
    color: var(--on-solid);
}
.timeline-mark--bare { background: var(--timeline-surface); border: none; }
.timeline-mark--bare .avatar { --avatar-size: var(--timeline-marker); }
.timeline-group {
    padding-block: var(--space-7) var(--space-4);
    color: var(--muted);
    font-size: var(--text-2);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.timeline > li.timeline-group::before { content: none; }
.timeline > li.timeline-group:first-child { padding-block-start: 0; }
.timeline > li.timeline-group:first-child::after { content: none; }
.timeline-more { color: var(--muted); font-size: var(--text-3); }
.timeline > li.timeline-more::before {
    background: var(--timeline-surface);
    border-color: var(--border-hover);
    box-shadow: 0 0 0 2px var(--timeline-surface);
}
.timeline--aside {
    --timeline-aside: 68px;
    --timeline-lead: 21px;
    padding-inline-start: calc(var(--timeline-aside) + var(--timeline-marker) / 2 + var(--space-4));
}
.timeline--aside > li > .timeline-when {
    position: absolute;
    top: 0;
    inset-inline-end: 100%;
    margin-inline-end: calc(var(--timeline-marker) / 2 + var(--space-4));
    width: var(--timeline-aside);
    text-align: end;
}
.timeline--aside > li > .timeline-what { display: block; line-height: var(--timeline-lead); }
}
@layer sedna.paint {
.btn, .fab, .badge, .alert, .callout, .toast, .chip, .stat, tr, .page-banner, .ribbon, .count-badge {
    --tone-fg: initial;
    --tone-bg: initial;
    --tone-bg-hover: initial;
    --tone-bg-active: initial;
    --tone-border: initial;
    --tone-border-strong: initial;
    --tone-solid: initial;
    --tone-solid-hover: initial;
    --tone-solid-active: initial;
    --tone-solid-edge: initial;
    --tone-ring: initial;
    --tone-ring-solid: initial;
    --tone-on-solid: initial;
}
.btn--brand, .fab--brand, .badge--brand, .alert--brand, .callout--brand, .toast--brand, .chip--brand, .stat--brand, .tr--brand, .page-banner--brand, .ribbon--brand, .count-badge--brand {
    --tone-fg: var(--brand-text);
    --tone-bg: var(--brand-tint);
    --tone-bg-hover: var(--brand-tint-strong);
    --tone-bg-active: var(--brand-tint-strong);
    --tone-border: var(--brand-soft);
    --tone-border-strong: var(--brand);
    --tone-solid: var(--brand);
    --tone-solid-hover: var(--brand-hover);
    --tone-solid-active: var(--brand-active);
    --tone-solid-edge: var(--brand-edge);
    --tone-ring: var(--brand-ring-soft);
    --tone-ring-solid: var(--brand-ring);
    --tone-on-solid: var(--on-solid);
}
.btn--go, .fab--go, .badge--go, .alert--go, .callout--go, .toast--go, .chip--go, .stat--go, .tr--go, .page-banner--go, .ribbon--go, .count-badge--go {
    --tone-fg: var(--go-fg);
    --tone-bg: var(--go-bg);
    --tone-bg-hover: var(--go-bg-hover);
    --tone-bg-active: var(--go-bg-active);
    --tone-border: var(--go-border);
    --tone-border-strong: var(--go-hover);
    --tone-solid: var(--go-solid);
    --tone-solid-hover: var(--go-hover);
    --tone-solid-active: var(--go-active);
    --tone-solid-edge: var(--go-fg);
    --tone-ring: var(--go-ring);
    --tone-ring-solid: var(--go-ring);
    --tone-on-solid: var(--on-solid);
}
.btn--warn, .fab--warn, .badge--warn, .alert--warn, .callout--warn, .toast--warn, .chip--warn, .stat--warn, .tr--warn, .page-banner--warn, .ribbon--warn, .count-badge--warn {
    --tone-fg: var(--warn-fg);
    --tone-bg: var(--warn-bg);
    --tone-bg-hover: var(--warn-bg-hover);
    --tone-bg-active: var(--warn-bg-active);
    --tone-border: var(--warn-border);
    --tone-border-strong: var(--warn-hover);
    --tone-solid: var(--warn-solid);
    --tone-solid-hover: var(--warn-hover);
    --tone-solid-active: var(--warn-active);
    --tone-solid-edge: var(--warn-fg);
    --tone-ring: var(--warn-ring);
    --tone-ring-solid: var(--warn-ring-solid);
    --tone-on-solid: var(--on-solid);
}
.btn--danger, .fab--danger, .badge--danger, .alert--danger, .callout--danger, .toast--danger, .chip--danger, .stat--danger, .tr--danger, .page-banner--danger, .ribbon--danger, .count-badge--danger {
    --tone-fg: var(--danger-fg);
    --tone-bg: var(--danger-bg);
    --tone-bg-hover: var(--danger-bg-hover);
    --tone-bg-active: var(--danger-bg-active);
    --tone-border: var(--danger-border);
    --tone-border-strong: var(--danger-border-strong);
    --tone-solid: var(--danger-solid);
    --tone-solid-hover: var(--danger-hover);
    --tone-solid-active: var(--danger-active);
    --tone-solid-edge: var(--danger-fg);
    --tone-ring: var(--danger-ring);
    --tone-ring-solid: var(--danger-ring);
    --tone-on-solid: var(--on-solid);
}
.btn--info, .fab--info, .badge--info, .alert--info, .callout--info, .toast--info, .chip--info, .stat--info, .tr--info, .page-banner--info, .ribbon--info, .count-badge--info {
    --tone-fg: var(--info-fg);
    --tone-bg: var(--info-bg);
    --tone-bg-hover: var(--info-bg-hover);
    --tone-bg-active: var(--info-bg-active);
    --tone-border: var(--info-border);
    --tone-border-strong: var(--info-border);
    --tone-solid: var(--info-solid);
    --tone-solid-hover: var(--info-hover);
    --tone-solid-active: var(--info-active);
    --tone-solid-edge: var(--info-fg);
    --tone-ring: var(--info-ring);
    --tone-ring-solid: var(--info-ring);
    --tone-on-solid: var(--info-on-solid);
}
.btn--secret, .fab--secret, .badge--secret, .alert--secret, .callout--secret, .toast--secret, .chip--secret, .stat--secret, .tr--secret, .page-banner--secret, .ribbon--secret, .count-badge--secret {
    --tone-fg: var(--secret-fg);
    --tone-bg: var(--secret-bg);
    --tone-bg-hover: var(--secret-bg-hover);
    --tone-bg-active: var(--secret-bg-active);
    --tone-border: var(--secret-border);
    --tone-border-strong: var(--secret-border);
    --tone-solid: var(--secret-fg);
    --tone-solid-hover: var(--secret-hover);
    --tone-solid-active: var(--secret-active);
    --tone-solid-edge: var(--secret-fg);
    --tone-ring: var(--brand-ring-soft);
    --tone-ring-solid: var(--brand-ring);
    --tone-on-solid: var(--bg);
}
.badge--cyan, .chip--cyan, .ribbon--cyan, .count-badge--cyan {
    --tone-fg: var(--badge-cyan-fg);
    --tone-bg: var(--badge-cyan-bg);
    --tone-bg-hover: var(--badge-cyan-bg-hover);
    --tone-bg-active: var(--badge-cyan-bg-active);
    --tone-border: var(--badge-cyan-border);
    --tone-border-strong: var(--badge-cyan-border);
    --tone-solid: var(--badge-cyan-fg);
    --tone-solid-hover: var(--badge-cyan-hover);
    --tone-solid-active: var(--badge-cyan-active);
    --tone-solid-edge: var(--badge-cyan-fg);
    --tone-ring: var(--brand-ring-soft);
    --tone-ring-solid: var(--brand-ring);
    --tone-on-solid: var(--bg);
}
.badge--orange, .chip--orange, .ribbon--orange, .count-badge--orange {
    --tone-fg: var(--badge-orange-fg);
    --tone-bg: var(--badge-orange-bg);
    --tone-bg-hover: var(--badge-orange-bg-hover);
    --tone-bg-active: var(--badge-orange-bg-active);
    --tone-border: var(--badge-orange-border);
    --tone-border-strong: var(--badge-orange-border);
    --tone-solid: var(--badge-orange-fg);
    --tone-solid-hover: var(--badge-orange-hover);
    --tone-solid-active: var(--badge-orange-active);
    --tone-solid-edge: var(--badge-orange-fg);
    --tone-ring: var(--brand-ring-soft);
    --tone-ring-solid: var(--brand-ring);
    --tone-on-solid: var(--bg);
}
.badge--teal, .chip--teal, .ribbon--teal, .count-badge--teal {
    --tone-fg: var(--badge-teal-fg);
    --tone-bg: var(--badge-teal-bg);
    --tone-bg-hover: var(--badge-teal-bg-hover);
    --tone-bg-active: var(--badge-teal-bg-active);
    --tone-border: var(--badge-teal-border);
    --tone-border-strong: var(--badge-teal-border);
    --tone-solid: var(--badge-teal-fg);
    --tone-solid-hover: var(--badge-teal-hover);
    --tone-solid-active: var(--badge-teal-active);
    --tone-solid-edge: var(--badge-teal-fg);
    --tone-ring: var(--brand-ring-soft);
    --tone-ring-solid: var(--brand-ring);
    --tone-on-solid: var(--bg);
}
.ribbon--muted, .count-badge--muted {
    --tone-fg: var(--fg-soft);
    --tone-bg: var(--badge-bg);
    --tone-bg-hover: var(--bg-hover);
    --tone-bg-active: var(--btn-active-bg);
    --tone-border: var(--border);
    --tone-border-strong: var(--border-hover);
    --tone-solid: var(--muted);
    --tone-solid-hover: var(--fg-soft);
    --tone-solid-active: var(--fg);
    --tone-solid-edge: var(--muted);
    --tone-ring: var(--brand-ring-soft);
    --tone-ring-solid: var(--brand-ring);
    --tone-on-solid: var(--bg);
}
.btn:is(.btn--brand, .btn--go, .btn--warn, .btn--danger, .btn--info, .btn--secret) { background: var(--tone-bg); border-color: var(--tone-border); color: var(--tone-fg); }
.btn:is(.btn--brand, .btn--go, .btn--warn, .btn--danger, .btn--info, .btn--secret):hover { background: var(--tone-bg-hover); border-color: var(--tone-border-strong); }
.btn:is(.btn--brand, .btn--go, .btn--warn, .btn--danger, .btn--info, .btn--secret):active { background: var(--tone-bg-active); }
.btn:is(.btn--brand, .btn--go, .btn--warn, .btn--danger, .btn--info, .btn--secret):focus-visible { box-shadow: 0 0 0 2px var(--focus-ring); }
.btn.btn--solid { background: var(--tone-solid, var(--fg)); border-color: var(--tone-solid-edge, var(--fg)); color: var(--tone-on-solid, var(--bg)); }
.btn.btn--solid:hover { background: var(--tone-solid-hover, var(--fg-soft)); }
.btn.btn--solid:active { background: var(--tone-solid-active, var(--fg-soft)); }
.btn.btn--solid:focus-visible { box-shadow: 0 0 0 2px var(--focus-ring); }
.fab:is(.fab--brand, .fab--go, .fab--warn, .fab--danger, .fab--info, .fab--secret) { background: var(--tone-solid); border-color: var(--tone-solid-edge); color: var(--tone-on-solid); }
.fab:is(.fab--brand, .fab--go, .fab--warn, .fab--danger, .fab--info, .fab--secret):hover { background: var(--tone-solid-hover); }
.fab:is(.fab--brand, .fab--go, .fab--warn, .fab--danger, .fab--info, .fab--secret):active { background: var(--tone-solid-active); }
.fab:is(.fab--brand, .fab--go, .fab--warn, .fab--danger, .fab--info, .fab--secret):focus-visible { box-shadow: var(--shadow-float), 0 0 0 3px var(--tone-ring-solid); }
.btn.btn--ghost { background: none; border-color: transparent; color: var(--tone-fg, var(--muted)); }
.btn.btn--ghost:hover { background: var(--tone-bg, var(--bg-hover)); border-color: transparent; color: var(--tone-fg, var(--fg)); }
.btn.btn--ghost:active { background: var(--tone-bg-active, var(--btn-active-bg)); }
.badge:is(.badge--brand, .badge--go, .badge--warn, .badge--danger, .badge--info, .badge--secret, .badge--cyan, .badge--orange, .badge--teal) { background: var(--tone-bg); border-color: var(--tone-border); color: var(--tone-fg); }
.badge.badge--solid { background: var(--tone-solid, var(--fg-soft)); border-color: var(--tone-solid, var(--fg-soft)); color: var(--tone-on-solid, var(--bg)); }
.badge.badge--ghost { background: transparent; border-color: var(--tone-border, var(--border)); color: var(--tone-fg, var(--fg-soft)); }
.alert:is(.alert--brand, .alert--go, .alert--warn, .alert--danger, .alert--info, .alert--secret) { background: var(--tone-bg); border-color: var(--tone-border-strong); color: var(--tone-fg); }
.alert.alert--solid { background: var(--tone-solid, var(--fg)); border-color: var(--tone-solid, var(--fg)); color: var(--tone-on-solid, var(--bg)); }
.alert:is(.alert--brand, .alert--go, .alert--warn, .alert--danger, .alert--info, .alert--secret) a, .alert.alert--solid a { color: inherit; text-decoration: underline; }
.callout:is(.callout--brand, .callout--go, .callout--warn, .callout--danger, .callout--info, .callout--secret) { background: var(--tone-bg); border-inline-start-color: var(--tone-solid); }
.callout:is(.callout--brand, .callout--go, .callout--warn, .callout--danger, .callout--info, .callout--secret) > i { color: var(--tone-fg); }
.callout:is(.callout--brand, .callout--go, .callout--warn, .callout--danger, .callout--info, .callout--secret) a { color: inherit; text-decoration: underline; }
.toast:is(.toast--brand, .toast--go, .toast--warn, .toast--danger, .toast--info, .toast--secret) { border-inline-start-color: var(--tone-solid); }
.toast:is(.toast--brand, .toast--go, .toast--warn, .toast--danger, .toast--info, .toast--secret) i { color: var(--tone-fg); }
.page-banner:is(.page-banner--brand, .page-banner--go, .page-banner--warn, .page-banner--danger, .page-banner--info, .page-banner--secret) { background: var(--tone-bg); border-block-end-color: var(--tone-border); }
.page-banner:is(.page-banner--brand, .page-banner--go, .page-banner--warn, .page-banner--danger, .page-banner--info, .page-banner--secret) .page-banner-body a:not([class]) { color: inherit; text-decoration: underline; }
.chip:is(.chip--brand, .chip--go, .chip--warn, .chip--danger, .chip--info, .chip--secret, .chip--cyan, .chip--orange, .chip--teal) { background: var(--tone-bg); border-color: var(--tone-border); color: var(--tone-fg); }
.ribbon:is(.ribbon--brand, .ribbon--go, .ribbon--warn, .ribbon--danger, .ribbon--info, .ribbon--secret, .ribbon--cyan, .ribbon--orange, .ribbon--teal, .ribbon--muted) { --ribbon-bg: var(--tone-solid); color: var(--tone-on-solid); }
.count-badge:is(.count-badge--brand, .count-badge--go, .count-badge--warn, .count-badge--danger, .count-badge--info, .count-badge--secret, .count-badge--cyan, .count-badge--orange, .count-badge--teal, .count-badge--muted) { background: var(--tone-solid); color: var(--tone-on-solid); }
.stat:is(.stat--brand, .stat--go, .stat--warn, .stat--danger, .stat--info, .stat--secret) { background: var(--tone-bg); border-color: var(--tone-border); }
.stat:is(.stat--brand, .stat--go, .stat--warn, .stat--danger, .stat--info, .stat--secret) .stat-value, a.stat:is(.stat--brand, .stat--go, .stat--warn, .stat--danger, .stat--info, .stat--secret):hover .stat-value { color: var(--tone-fg); }
a.stat:is(.stat--brand, .stat--go, .stat--warn, .stat--danger, .stat--info, .stat--secret):hover { background: var(--tone-bg-hover); }
.table tr:is(.tr--brand, .tr--go, .tr--warn, .tr--danger, .tr--info, .tr--secret) > td,
.table tr:is(.tr--brand, .tr--go, .tr--warn, .tr--danger, .tr--info, .tr--secret)::after { background: var(--tone-bg); }
.table tr:is(.tr--brand, .tr--go, .tr--warn, .tr--danger, .tr--info, .tr--secret):hover > td,
.table tr:is(.tr--brand, .tr--go, .tr--warn, .tr--danger, .tr--info, .tr--secret):hover::after { background: var(--tone-bg-hover); }
:is(.topbar, .topbar-section) > .btn.btn--ghost:not(:is(.btn--brand, .btn--go, .btn--warn, .btn--danger, .btn--info, .btn--secret)) { color: var(--topbar-muted); }
:is(.topbar, .topbar-section) > .btn.btn--ghost:not(:is(.btn--brand, .btn--go, .btn--warn, .btn--danger, .btn--info, .btn--secret)):hover { background: var(--topbar-hover); color: var(--topbar-fg); }
:is(.btn, .fab):is(:disabled, [aria-disabled="true"]),
:is(.btn, .fab):is(:disabled, [aria-disabled="true"]):is(:hover, :active) {
    background: var(--disabled-bg);
    border-color: var(--disabled-border);
    color: var(--disabled-fg);
    cursor: not-allowed;
}
.btn.btn--ghost:is(:disabled, [aria-disabled="true"]):is(*, :hover, :active) { background: transparent; border-color: transparent; }
.chip:is(button, a):is(:disabled, [aria-disabled="true"]),
.chip:is(button, a):is(:disabled, [aria-disabled="true"]):is(:hover, :active) {
    background: var(--disabled-bg);
    border-color: var(--disabled-border);
    color: var(--disabled-fg);
    cursor: not-allowed;
}
.chip:is(button, a):is(:disabled, [aria-disabled="true"]) > i { color: inherit; }
:is(.btn-bare, .tab, .menu-item, button.list-row, .page-link):is(:disabled, [aria-disabled="true"]),
.segmented-option:has(input:disabled) { color: var(--disabled-fg); }
}
@layer sedna.paint {
@media (pointer: coarse) {
    :where(.chip-dismiss, .input-clear, .input-reveal, .search-clear, .th-filter, .modal-close, .toast-close, .page-banner-dismiss, button.cal-mark) { position: relative; }
    :where(.chip-dismiss, .input-clear, .input-reveal, .search-clear, .th-filter, .modal-close, .toast-close, .page-banner-dismiss, button.cal-mark)::before {
        content: "";
        position: absolute;
        inset: min(0px, calc((var(--touch-target) - 100%) / -2));
    }
    .rating:has(input) { --rating-size: var(--touch-target); }
    .rating:has(.rating-half) { --rating-size: calc(var(--touch-target) * 1.5); }
}
}
@layer sedna.paint {
[dir="rtl"] .page-head--hero,
.page-head--hero[dir="rtl"] { --hero-scrim-angle: 270deg; }
[dir="rtl"] .card-resize--corner { cursor: nesw-resize; }
[dir="rtl"] .switch input[type="checkbox"]:checked::after { transform: translateX(-15px); }
@supports not (appearance: base-select) {
    [dir="rtl"] .form-select {
        padding-inline-end: var(--space-5);
        padding-inline-start: var(--space-10);
        background-position:
            calc(0% + 12px) calc(50% - 2px),
            calc(0% + 17px) calc(50% - 2px);
    }
    [dir="rtl"] .form-select {
        background-image:
            linear-gradient(135deg, var(--muted) 50%, transparent 50%),
            linear-gradient(45deg,  transparent 50%, var(--muted) 50%);
    }
    [dir="rtl"] .form-select[multiple],
    [dir="rtl"] .form-select[size]:not([size="1"]) { padding-inline-start: var(--space-5); }
}
[dir="rtl"] .drawer { transform: translateX(-100%); }
[dir="rtl"] .output-frames-fold:not([open]) > summary::before,
[dir="rtl"] .test-suite:not([open]) > summary::before { transform: rotate(90deg); }
[dir="rtl"] .meter-mark-label { transform: translateX(50%); }
[dir="rtl"] .stack-bar-label { translate: 50% 0; }
[dir="rtl"] .form-range-box { --range-toward: to left; }
[dir="rtl"] .form-range-bubble { translate: 50% 0; }
[dir="rtl"] .form-range-box--vertical { --range-toward: to top; }
[dir="rtl"] .form-range-box--vertical > .form-range-bubble { translate: 0 50%; }
[dir="rtl"] .drawer--start { transform: translateX(100%); }
[dir="rtl"] .sheet { transform: translateY(100%); }
[dir="rtl"] .drawer--open { transform: none; }
@starting-style {
    [dir="rtl"] dialog.sheet[open] { transform: translateY(100%); }
}
[dir="rtl"] .avatar { --avatar-cut-x: calc(var(--avatar-overlap) - var(--avatar-size) / 2); }
[dir="rtl"] .avatar-pair > .avatar:first-child:not(:last-child) { --avatar-cut-x: calc(var(--avatar-size) * 1.5 - var(--avatar-pair-size)); }
[dir="rtl"] .tree [aria-expanded="true"] > .tree-row > .tree-toggle::before,
[dir="rtl"] .table[role="treegrid"] tr[aria-expanded="true"] > * > .tree-toggle::before { transform: rotate(-90deg); }
[dir="rtl"] .table--pin-start { --pin-edge-start: var(--shadow-edge-end); }
[dir="rtl"] .table--pin-end   { --pin-edge-end:   var(--shadow-edge-start); }
[dir="rtl"] .cal-timeline     { --cal-label-edge: var(--shadow-edge-end); }
[dir="rtl"] .mochi > svg { transform: scaleX(-1); }
[dir="rtl"] .mochi[data-facing="start"] > svg { transform: none; }
[dir="rtl"] .workflow {
    --workflow-dir-x: -1;
    --workflow-start-x: 100%;
    --workflow-end-x: 0%;
    --workflow-start-side: right;
    --workflow-end-side: left;
    --workflow-mirror: 1;
    --workflow-cw: ccw;
    --workflow-ccw: cw;
    --workflow-seam-a: 270deg;
    --workflow-seam-b: 90deg;
    --workflow-seam-c: 180deg;
    --workflow-seam-d: 0deg;
    --workflow-seam-ac-p0: 50deg;
    --workflow-seam-ac-p1: 90deg;
    --workflow-seam-ac-t1: 90deg;
    --workflow-seam-bd-p0: 0deg;
    --workflow-seam-bd-p1: 40deg;
    --workflow-seam-bd-t1: 90deg;
    --workflow-flow-ahead: 225deg;
    --workflow-flow-up: 315deg;
}
[dir="rtl"] .rating-star::after { transform: scaleX(-1); }
[dir="rtl"] .form-code { direction: ltr; }
[dir="rtl"] .carousel :is([data-carousel-prev], [data-carousel-next]) > i { transform: scaleX(-1); }
[dir="rtl"] .progress--indeterminate .progress-bar { --progress-flow: -1; }
[dir="rtl"] .skeleton {
    animation-direction: reverse;
    background-position: 200% 0;
}
[dir="rtl"] .diff-fold > td { direction: rtl; }
[dir="rtl"] .ribbon:not(.ribbon--tab) { rotate: -45deg; translate: -50% -50%; }
[dir="rtl"] :is(.card, .modal, .drawer, .sheet, .list, .table, .stat-row, .output-panel, .chat, .graph-frame, .form-section)[aria-busy="true"] {
    animation-direction: reverse;
    background-position: 142.8572% 0;
}
}
@layer sedna.paint {
@media (forced-colors: active) {
    :root :where([data-variant]),
    :root {
        --bg:              Canvas;
        --bg-elevated:     Canvas;
        --bg-hover:        Highlight;
        --fg:              CanvasText;
        --fg-soft:         CanvasText;
        --muted:           GrayText;
        --border:          CanvasText;
        --border-strong:   CanvasText;
        --border-hover:    Highlight;
        --divider:         CanvasText;
        --card-bg:         Canvas;
        --surface-soft:    Canvas;
        --surface-strong:  Canvas;
        --on-solid:        HighlightText;
        --on-viz:          CanvasText;
        --brand:           Highlight;
        --brand-hover:     Highlight;
        --brand-active:    Highlight;
        --brand-soft:      Highlight;
        --brand-text:      LinkText;
        --brand-tint:      Canvas;
        --accent:          LinkText;
        --sidebar-bg:      Canvas;
        --sidebar-border:   CanvasText;
        --sidebar-fg:      CanvasText;
        --sidebar-active:  Highlight;
        --go-solid: CanvasText;   --go-bg: Canvas;     --go-border: CanvasText;   --go-fg: CanvasText;
        --warn-solid: CanvasText; --warn-bg: Canvas;   --warn-border: CanvasText; --warn-fg: CanvasText;
        --danger-solid: CanvasText; --danger-bg: Canvas; --danger-fg: CanvasText;
        --danger-border: CanvasText; --danger-border-strong: CanvasText;
        --field-border-danger: CanvasText; --field-border-warn: CanvasText;
        --info-bg: Canvas;   --info-border: CanvasText;   --info-fg: CanvasText;
        --flow-light: Highlight; --flow-line: CanvasText; --flow-tint: Canvas; --flow-glow: Canvas;
        --presence-out-of-office: CanvasText;
        --surface-raised-2: Canvas;
        --surface-raised-3: Canvas;
        --secret-bg: Canvas; --secret-border: CanvasText; --secret-fg: CanvasText;
        --badge-bg: Canvas;
        --table-head-bg: Canvas;
        --skeleton-bg: Canvas;
        --skeleton-sheen: Canvas;
        --progress-track: Canvas;
        --viz-previous: GrayText;
        --heat-0: Canvas;
        --heat-1: color-mix(in srgb, CanvasText 25%, Canvas);
        --heat-2: color-mix(in srgb, CanvasText 50%, Canvas);
        --heat-3: color-mix(in srgb, CanvasText 75%, Canvas);
        --heat-4: CanvasText;
        --code-bg: Canvas;
        --code-fg: CanvasText;
        --backdrop: Canvas;
        --overlay: Canvas;
        --tip-bg: Canvas;
        --tip-border: CanvasText;
        --tip-fg: CanvasText;
        --agent-from: Highlight;
        --agent-to: Highlight;
        --rating-on: Highlight;
        --rating-off: CanvasText;
    }
    .btn:focus-visible,
    .badge-copy:focus-visible,
    button.badge-more:focus-visible,
    .btn-bare:focus-visible,
    .form-input:focus,
    .form-select:focus,
    .form-check input:focus-visible,
    .switch input[type="checkbox"]:focus-visible,
    .form-range:focus-visible,
    .input-group:focus-within,
    .tab:focus-visible,
    .menu-item:focus-visible,
    .page-link:focus-visible,
    .chip-dismiss:focus-visible,
    .th-sort:focus-visible,
    .th-filter:focus-visible,
    .input-clear:focus-visible,
    .accordion summary:focus-visible,
    .form-section--box > summary:focus-visible > .form-section-legend,
    .tree [role="treeitem"]:focus-visible > .tree-row,
    .skip-link:focus,
    .fab:focus-visible,
    .back-to-top:focus-visible,
    .page-toc-link:focus-visible,
    .page-toc-fold > .page-toc-title:focus-visible,
    button.sheet-handle:focus-visible,
    .form-color:focus-visible,
    .form-color-area:focus-visible,
    .swatch:focus-visible,
    .editor:focus-within,
    a.file-item:focus-visible,
    .file-tile:has(.file-tile-open:focus-visible),
    .media-transcript > summary:focus-visible,
    .media-transcript-time:focus-visible,
    .drag-item:focus-visible,
    .drag-handle:focus-visible,
    :is(a, button).list-row:focus-visible,
    .nav-group > summary:focus-visible,
    .nav-area:focus-visible,
    .topbar-nav-link:focus-visible,
    .bottombar-item:focus-visible,
    .form-check input[type="checkbox"]:focus-visible,
    .form-check input[type="radio"]:focus-visible,
    .modal-close:focus-visible,
    button.deck-dot:focus-visible,
    .form-file:has(input:focus-visible) .btn,
    .dropzone:focus-within,
    .form-combo-box:has(> .form-combo-input):focus-within,
    .form-combo-btn:focus-visible,
    .form-combo-box > .chip[data-armed],
    .form-combo-group-action[data-active],
    .segmented-option:has(input:focus-visible),
    .segmented-option:has(input:checked:focus-visible),
    .listbox:focus-visible [role="option"][data-active],
    button.chip:focus-visible,
    a.chip:focus-visible,
    a.stat:focus-visible,
    a.card:focus-visible,
    .source-card:focus-visible,
    .code-block-copy:focus-visible,
    .code-block-expand:focus-visible,
    .carousel-track:focus-visible,
    .value-trigger:focus-visible,
    .list--cards > li > :is(a, button).list-row:is([aria-current="true"], [aria-selected="true"]):focus-visible,
    .gallery > *:focus-visible .media-frame,
    .link-preview:focus-visible,
    .file-tile:focus-visible,
    .lightbox-prev:focus-visible,
    .lightbox-next:focus-visible,
    .media-open:focus-visible,
    .reasoning > summary:focus-visible,
    .agent-tool > summary:focus-visible,
    button.cal-weeknum:focus-visible,
    .cal-event:focus-visible,
    .cal-block:focus-visible,
    button.cal-day:focus-visible,
    button.datepicker-title:focus-visible,
    .cal-pick:focus-visible,
    .chat-reaction:focus-visible,
    .chat-emoji:focus-visible,
    .chat-pane > .chat:focus-visible,
    .chat-jump:focus-visible,
    .chat-launcher:focus-visible,
    .output-details > summary:focus-visible,
    .output-frames-fold > summary:focus-visible,
    .card-resize:focus-visible,
    .choice-tile:has(> input:focus-visible),
    button.cal-mark:focus-visible,
    .sticky-group-toggle:focus-visible,
    .choice-tile:has(> input:checked:focus-visible),
    .split-resize:focus-visible,
    .cal-resize:focus-visible,
    button.cal-more:focus-visible,
    a.cal-agenda-title:focus-visible,
    :is(a, button).toast-body:focus-visible,
    :is(.form-input, .form-select, .listbox)[data-state="warn"]:focus,
    :is(.form-input, .form-select, .listbox)[aria-invalid="true"]:focus,
    .form-color[data-state="warn"]:focus-visible,
    .input-group:has(> :is(.form-input, .form-select)[data-state="warn"]):focus-within,
    .input-group:has(> :is(.form-input, .form-select)[aria-invalid="true"]):focus-within,
    .form-combo-box:has(> .form-combo-input[data-state="warn"]):focus-within,
    .editor[data-state="warn"]:focus-within,
    .editor:has(> [data-editor-value][data-state="warn"], > .editor-body [data-state="warn"]):focus-within,
    .editor:has(> [data-editor-value][aria-invalid="true"], > .editor-body [aria-invalid="true"]):focus-within,
    :is(a, button).workflow-node:focus-visible,
    .input-reveal:focus-visible,
    button.badge-ai:focus-visible,
    .rating-star:has(> input:focus-visible),
    .rating-half:has(> input:focus-visible),
    .page-banner-dismiss:focus-visible,
    .app-switcher-item:focus-visible { outline: 2px solid CanvasText; outline-offset: 1px; }
    .workflow:focus-visible { outline: 2px solid CanvasText; outline-offset: -2px; }
    .editor .ql-editor :is(img, video)[data-editor-selected] { outline: 2px solid CanvasText; outline-offset: 2px; }
    .col-resize:focus-visible { outline: 2px solid CanvasText; outline-offset: -2px; }
    .test-suite > summary:focus-visible { outline: 2px solid CanvasText; outline-offset: -2px; }
    .inbox-item:has(.inbox-item-title:focus-visible) { outline: 2px solid CanvasText; outline-offset: -2px; }
    .graph:focus-visible:not([data-graph-pointer])::after { outline: 2px solid CanvasText; outline-offset: -2px; }
    .chart:focus-visible:not([data-chart-pointer])::after { outline: 2px solid CanvasText; outline-offset: -2px; }
    button.chart-key:focus-visible { outline: 2px solid CanvasText; outline-offset: 1px; }
    .nav-link.active,
    .menu-item[aria-current]:not([aria-current="false"]),
    .tab[aria-selected="true"],
    .page-link[aria-current="page"],
    .page-toc-link[aria-current="location"],
    .palette-item[aria-selected="true"],
    .tree [aria-selected="true"] > .tree-row,
    .tree [aria-current]:not([aria-current="false"]) > .tree-row,
    .tree [role="treeitem"][data-active] > .tree-row,
    .list-row[aria-current="true"],
    .list-row[aria-selected="true"],
    .file-tile:has(.file-tile-check :checked),
    .media-transcript li[aria-current="true"],
    .segmented-option:has(input:checked),
    .listbox [role="option"][aria-selected="true"],
    .th-filter--active,
    .chat-reaction[aria-pressed="true"],
    .swatch[aria-pressed="true"],
    .cal-day:is([aria-pressed="true"], [aria-selected="true"], [aria-current="date"]),
    .cal-pick:is([aria-pressed="true"], [aria-current]:not([aria-current="false"])),
    .editor-toolbar [aria-pressed="true"],
    .workflow-node[aria-pressed="true"],
    .choice-tile:has(> input:checked),
    .form-check-list--cards > .form-check:has(> input:checked),
    .app-switcher-item[aria-current]:not([aria-current="false"]) { outline: 1px solid Highlight; }
    .table tbody tr[aria-selected="true"] > td { outline: 2px solid Highlight; outline-offset: -2px; }
    .table:is([role="grid"], [role="treegrid"]) :is(td, th)[aria-selected="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
    .table :is(td, th)[data-editing] > .cell-editor,
    .table tr[data-editing] > :is(td, th) > .cell-editor { outline: 1px solid CanvasText; outline-offset: -1px; }
    .table:is([role="grid"], [role="treegrid"]) :is(td, th):focus,
    .table .cell-editor:focus { outline: 2px solid CanvasText; outline-offset: -2px; }
    .chat-bubble,
    .link-preview,
    .chat-reaction,
    .chat-jump,
    .cal-event,
    .cal-block { outline: 1px solid CanvasText; outline-offset: -1px; }
    .cal-event--background,
    .cal-closed { outline: 1px dashed GrayText; outline-offset: -1px; }
    .cal-agenda-event > .cal-event-dot { forced-color-adjust: none; }
    .form-section--box > summary > .form-section-legend,
    .form-section-action { forced-color-adjust: none; }
    .table thead tr:not(.tr-filter) > th.col-filtered { outline: 2px solid Highlight; outline-offset: -2px; }
    .nav-status-dot,
    .health-dot,
    .chip-dot,
    .th-filter--active::after,
    .avatar-presence::after,
    .count-badge,
    .ribbon,
    .badge--swatch::before,
    .inbox-item--unread .inbox-item-time::before,
    .timeline > li::before { forced-color-adjust: none; }
    .workflow > li::before,
    .workflow-path > li::before,
    .workflow-label::before,
    .workflow-label::after,
    .workflow-branch::before,
    .workflow-branch::after,
    .workflow-branch > .workflow-path::before,
    .workflow-branch > .workflow-path::after,
    .workflow-loop > .workflow-path::after { forced-color-adjust: none; }
    .bar-list-fill,
    .stack-bar-segment,
    .stack-bar-swatch,
    .meter-fill,
    .meter-mark,
    .form-range-box::before,
    .progress-bar,
    .bar-previous,
    .tracker-block,
    .gauge::before,
    .rating-star::before,
    .rating-star::after,
    .form-check input[type="checkbox"],
    .tree-check,
    .form-combo-option::before,
    .form-combo-option::after,
    .listbox [role="option"]::after,
    .menu-item[aria-current]:not([aria-current="false"])::after { forced-color-adjust: none; }
    .chart-svg,
    .chart-swatch,
    .chart-tip-swatch { forced-color-adjust: none; }
    .heatmap-cell { forced-color-adjust: none; outline: 1px solid GrayText; outline-offset: -1px; }
    .diff-code :is(ins, del) { outline: 1px solid CanvasText; outline-offset: -1px; }
    .form-color-area,
    .form-range--hue,
    .form-range--alpha,
    .form-color-preview { forced-color-adjust: none; }
    .qr { forced-color-adjust: none; }
}
}
@layer sedna.paint {
@media print {
    .layout,
    .bare-layout,
    .auth-layout { display: block; height: auto; min-height: 0; overflow: visible; }
    .content,
    .page,
    .full-layout { display: block; overflow: visible; min-height: 0; padding: 0; }
    .sidebar,
    .topbar,
    .skip-link,
    .toast-stack,
    .sedna-tip,
    .fab,
    .back-to-top,
    .progress--route,
    .dropzone--page,
    .fab-dial,
    .drawer,
    .drawer-scrim,
    .spotlight-hole,
    .spotlight-tip,
    .status-bar,
    .page-banner,
    .modal-backdrop,
    .page-head-actions,
    .form-actions,
    .code-block-copy,
    .confirmation-panel [data-copy],
    .chat-launcher,
    .chat-flyover,
    .chat-composer,
    .chat-closed,
    .chat-actions,
    .chat-jump,
    .chat-quick-replies,
    .col-resize { display: none; }
    .ghost-text[data-ghost-rest] { display: none; }
    .selection-toolbar:popover-open { display: none; }
    .agent-plan-actions,
    .reasoning-bar > .btn { display: none; }
    .workflow-step:has(> .workflow-node--add) { display: none; }
    .chat-pane > .chat { overflow: visible; }
    .chat-message { break-inside: avoid; }
    .cal-agenda-head { position: relative; inset-block-start: auto; }
    .cal-agenda-day { break-inside: avoid; }
    .cal-resize { display: none; }
    .card,
    .code-block,
    .callout,
    .confirmation-panel,
    .media-frame { box-shadow: none; break-inside: avoid; }
    .table--sticky thead,
    .table--sticky-foot tfoot { position: static; }
    .page-head--collapse { position: static; }
    .table thead { display: table-header-group; }
    .table tfoot { display: table-footer-group; }
    .table tr:empty { display: none; }
    .table tr { break-inside: avoid; }
    .table tr:is(*, [data-editing]) > :is(td, th):is(*, [data-editing]) > .cell-editor { display: none; }
    .sedna-scroll,
    .drawer-body,
    .artifact-body,
    .md-editor .md-preview,
    .palette-list { max-height: none; overflow: visible; }
    .prose a[href^="http"]::after,
    .markdown-body a[href^="http"]::after {
        content: ' (' attr(href) ')';
        font-size: 0.85em;
        word-break: break-all;
    }
    .stat-value--roll { animation: none; }
    .carousel-track { flex-direction: column; overflow: visible; }
    .carousel-slide { flex-basis: auto; break-inside: avoid; }
    .carousel-controls { display: none; }
    .diff-body { overflow: visible; }
    .diff-code { white-space: pre-wrap; overflow-wrap: anywhere; }
    .diff-table tr { break-inside: avoid; }
    .pdf-frame { display: none; }
    .form-signature-actions { display: none; }
    .qr { break-inside: avoid; }
    h1, h2, h3, .card-head, .page-head { break-after: avoid; }
}
}
@layer sedna.utilities {
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.visually-hidden--focusable:focus,
.visually-hidden--focusable:focus-within {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    white-space: normal;
}
.text-start  { text-align: start; }
.text-center { text-align: center; }
.text-end    { text-align: end; }
.text-muted { color: var(--muted-here, var(--muted)); }
.eyebrow {
    display: block;
    margin: 0;
    color: var(--muted-here, var(--muted));
    font-size: var(--text-2);
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: round(1.4em, 2px);
    text-transform: uppercase;
}
.text-mono  { font-family: var(--font-mono); }
.text-nums  { font-variant-numeric: tabular-nums; }
.text-nowrap { white-space: nowrap; }
.text-sm { font-size: var(--text-3); }
.text-lg { font-size: var(--text-6); }
.text-break { overflow-wrap: anywhere; }
.text-clamp-2,
.text-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.text-clamp-2 { -webkit-line-clamp: 2; }
.text-clamp-3 { -webkit-line-clamp: 3; }
:is(.text-clamp-2, .text-clamp-3)[data-clamp-open] {
    display: block;
    -webkit-line-clamp: none;
    overflow: visible;
}
[data-clamp-toggle][data-clamp-fits] { display: none; }
[data-clamp-toggle][aria-expanded="true"] .text-clamp-more,
[data-clamp-toggle]:not([aria-expanded="true"]) .text-clamp-less { display: none; }
.text-truncate {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sedna-row { display: flex; align-items: center; gap: var(--space-4); }
.sedna-row-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4); }
.sedna-col { display: flex; flex-direction: column; gap: var(--space-4); }
.sedna-push { margin-inline-start: auto; }
.sedna-gap-0 { gap: 0;             --grid-gap: 0px; }
.sedna-gap-8 { gap: var(--space-4); --grid-gap: var(--space-4); }
.sedna-gap-12 { gap: var(--space-6); --grid-gap: var(--space-6); }
.sedna-gap-16 { gap: var(--space-7); --grid-gap: var(--space-7); }
.sedna-gap-20 { gap: var(--space-8); --grid-gap: var(--space-8); }
.sedna-gap-24 { gap: var(--space-9); --grid-gap: var(--space-9); }
.sedna-gap-32 { gap: var(--space-10); --grid-gap: var(--space-10); }
.sedna-gap-40 { gap: var(--space-11); --grid-gap: var(--space-11); }
.sedna-grid-24:is(.sedna-gap-0, .sedna-gap-8, .sedna-gap-12, .sedna-gap-16, .sedna-gap-20, .sedna-gap-24, .sedna-gap-32, .sedna-gap-40) { column-gap: min(var(--grid-gap), 100% / 23); }
.sedna-wrap     { flex-wrap: wrap; }
.sedna-start    { align-items: flex-start; }
.sedna-center   { align-items: center; }
.sedna-end      { align-items: flex-end; }
.sedna-baseline { align-items: baseline; }
.sedna-between  { justify-content: space-between; }
.sedna-justify-center { justify-content: center; }
.sedna-justify-end    { justify-content: flex-end; }
.sedna-self-start   { align-self: flex-start; }
.sedna-self-center  { align-self: center; }
.sedna-self-end     { align-self: flex-end; }
.sedna-self-stretch { align-self: stretch; }
.sedna-place-center { display: grid; place-items: center; }
.sedna-fill { flex: 1; min-width: 0; }
.sedna-shrink-0 { flex-shrink: 0; }
.sedna-w-full { width: 100%; }
.sedna-w-fit { width: fit-content; }
.sedna-w {
    --sedna-w: 12rem;
    width: var(--sedna-w);
    max-width: 100%;
}
.sedna-w--sm { --sedna-w: 8rem; }
.sedna-w--md { --sedna-w: 12rem; }
.sedna-w--lg { --sedna-w: 18rem; }
.sedna-mt-0 { margin-top: 0; }
.sedna-mt-8 { margin-top: var(--space-4); }
.sedna-mt-12 { margin-top: var(--space-6); }
.sedna-mt-16 { margin-top: var(--space-7); }
.sedna-mt-20 { margin-top: var(--space-8); }
.sedna-mt-24 { margin-top: var(--space-9); }
.sedna-mt-32 { margin-top: var(--space-10); }
.sedna-mt-40 { margin-top: var(--space-11); }
.sedna-mb-0 { margin-bottom: 0; }
.sedna-mb-8 { margin-bottom: var(--space-4); }
.sedna-mb-12 { margin-bottom: var(--space-6); }
.sedna-mb-16 { margin-bottom: var(--space-7); }
.sedna-mb-20 { margin-bottom: var(--space-8); }
.sedna-mb-24 { margin-bottom: var(--space-9); }
.sedna-mb-32 { margin-bottom: var(--space-10); }
.sedna-mb-40 { margin-bottom: var(--space-11); }
.sedna-divider-top    { border-top: 1px solid var(--divider); }
.sedna-divider-bottom { border-bottom: 1px solid var(--divider); }
.sedna-scroll-x { overflow-x: auto; container-type: scroll-state; }
.sedna-scroll {
    --scroll-max: none;
    max-height: var(--scroll-max);
    overflow-y: auto;
}
.sedna-scroll--sm { --scroll-max: 12rem; }
.sedna-scroll--md { --scroll-max: 20rem; }
.sedna-scroll--lg { --scroll-max: 32rem; }
[hidden]:not([hidden="until-found"]) { display: none; }
.sedna-invisible { visibility: hidden; }
.sedna-busy { opacity: 0.55; pointer-events: none; cursor: progress; }
.sedna-disabled {
    color: var(--muted);
    pointer-events: none;
    cursor: not-allowed;
}
[data-copied] [data-copied-hide] { display: none; }
[data-copied-show]:not([data-copied="ok"] [data-copied-show="ok"], [data-copied="failed"] [data-copied-show="failed"]) {
    display: none;
}
.sedna-safe-top    { padding-block-start: var(--safe-block-start); }
.sedna-safe-bottom { padding-block-end: var(--safe-block-end); }
.sedna-safe-inline { padding-inline: var(--safe-inline-start) var(--safe-inline-end); }
@media print {
    .sedna-no-print { display: none; }
}
.sedna-print-only { display: none; }
@media print {
    .sedna-print-only { display: revert; }
}
.text-brand  { color: var(--brand-text); }
.text-go     { color: var(--go-fg); }
.text-warn   { color: var(--warn-fg); }
.text-danger { color: var(--danger-fg); }
.text-info   { color: var(--info-fg); }
.text-secret { color: var(--secret-fg); }
}
@layer sedna.overrides {
:root[data-density="compact"] {
    --cell-pad-y: var(--space-2);
    --cell-pad-x: var(--space-5);
    --card-pad-block: var(--space-4);
    --card-pad-inline: var(--space-6);
    --list-pad-block: var(--space-3);
    --list-pad-inline: var(--space-5);
    --list-gap: var(--space-2);
    --page-rhythm: var(--space-5);
    --page-pad: var(--space-7);
    --page-banner-pad-block: var(--space-3);
    --control-height-sm: 24px;
    --control-height: 30px;
    --control-height-lg: 38px;
}
:root[data-density="touch"] {
    --cell-pad-y: var(--space-6);
    --cell-pad-x: var(--space-7);
    --card-pad-block: var(--space-8);
    --card-pad-inline: var(--space-8);
    --list-pad-block: var(--space-7);
    --list-pad-inline: var(--space-7);
    --list-gap: var(--space-6);
    --page-rhythm: var(--space-8);
    --page-banner-pad-block: var(--space-7);
    --control-height-sm: 36px;
    --control-height: 44px;
    --control-height-lg: 52px;
}
@media (pointer: coarse) {
    :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"],
                     [type="button"], [type="submit"], [type="reset"], [type="image"], [type="hidden"]),
           select, textarea) { font-size: var(--text-field-touch); }
}
}
@layer sedna.overrides {
@media (prefers-reduced-motion: reduce) {
    .sidebar          { transition: none; }
    .sidebar.collapsed > .brand,
    .sidebar.collapsed > .nav,
    .sidebar.collapsed > .nav-tools { transition: none; }
    .sidebar.collapsed .brand { transition: none; }
    .sidebar.collapsed .brand-text { transition: none; }
    .sidebar.collapsed .nav-section-label { transition: none; }
    .sidebar.collapsed .nav-section { transition: none; }
    .sidebar.collapsed .nav-link { transition: none; }
    .sidebar.collapsed .nav-link > span:not(.nav-count) { transition: none; }
    .sidebar.collapsed .nav-link-ext { transition: none; }
    .sidebar.collapsed .sidebar-wide { transition: none; }
    .sidebar.collapsed .nav-count { transition: none; }
    .sidebar.collapsed .nav-status-card { transition: none; }
    .sidebar.collapsed .nav-status-label,
    .sidebar.collapsed .nav-status-state { transition: none; }
    .sidebar.collapsed .nav-status-dot { transition: none; }
    .sidebar.collapsed .nav-tools-sep { transition: none; }
    .sidebar.collapsed .nav-filter { transition: none; }
    .sidebar.collapsed.sidebar--areas > .nav { transition: none; }
    .sidebar.collapsed.sidebar--areas .nav-areas { transition: none; }
    .nav-status-card  { transition: none; }
    .nav-filter-input { transition: none; }
    .bottombar-items  { transition: none; }
    .user-signout     { transition: none; }
    .sedna-tip           { transition: none; transform: none; }
    .status-bar--reconnecting > i { animation: none; }
    .nav-group > summary::after { transition: none; }
    .skip-link        { transition: none; }
    .btn              { transition: none; }
    .form-input,
    .form-select      { transition: none; }
    .form-check input[type="checkbox"] { transition: none; }
    .listbox          { transition: none; }
    .editor           { transition: none; }
    .form-color       { transition: none; }
    .form-signature-pad { transition: none; }
    .form-select::picker-icon      { transition: none; }
    .form-select::picker(select)   { transition: none; }
    .form-combo-box,
    .form-combo-toggle i { transition: none; }
    .form-check input[type="radio"]    { transition: none; }
    .switch input[type="checkbox"]     { transition: none; }
    .switch input[type="checkbox"]::after { transition: none; }
    .input-group      { transition: none; }
    .form-check-list--cards > .form-check { transition: none; }
    .form-trigger::after { transition: none; }
    .form-section--box > summary > .form-section-legend::before { transition: none; }
    .dropzone         { transition: none; }
    dialog.modal      { animation: none; }
    .modal-close      { transition: none; }
    .deck-step        { animation: none; }
    .deck-dot         { transition: none; }
    .toast-stack--pile > .toast { transition: none; }
    [data-sedna-toasts] > .toast { transition: none; }
    .spinner          { animation: none; }
    .btn[aria-busy="true"]::after { animation: none; }
    .skeleton         { animation: none; background-image: none; }
    [dir="rtl"] .skeleton { animation: none; background-image: none; }
    .progress-bar     { transition: none; }
    .progress-ring    { transition: none; }
    .progress--indeterminate .progress-bar { animation: none; width: 100%; }
    .progress--route  { animation: none; }
    .tab              { transition: none; }
    .page-head--collapse { animation: none; position: static; }
    .page-head--collapse .page-head-text > p { animation: none; white-space: normal; }
    .page-toc-fold > .page-toc-title::after { transition: none; }
    .back-to-top { animation-timing-function: step-end; }
    a.stat            { transition: none; }
    a.card            { transition: none; }
    .chart-svg[data-chart-enter] .chart-marks { animation: none; }
    .graph-line--flow::before,
    .graph-line--flow:dir(rtl)::before { animation: none; }
    .health-badge--live .health-dot,
    .health-badge--streaming .health-dot,
    .health-badge--connecting .health-dot { animation: none; }
    .health-badge--healthy .health-dot { animation: none; }
    .cal-event-dot--live { animation: none; }
    .segmented-option { transition: none; }
    .spotlight-hole   { transition: none; }
    .spotlight-tip-do i { animation: none; }
    .code-block-copy  { transition: none; }
    .code-block-expand { transition: none; }
    .accordion summary::after { transition: none; }
    .tree [aria-expanded] > .tree-row > .tree-toggle::before { transition: none; }
    .tree [aria-busy="true"] > .tree-row > .tree-toggle::before { animation: none; }
    .table[role="treegrid"] tr[aria-expanded] > * > .tree-toggle::before { transition: none; }
    .table[role="treegrid"] tr[aria-busy="true"] > * > .tree-toggle::before { animation: none; }
    .drawer-scrim     { transition: none; }
    .drawer           { transition: none; }
    dialog.drawer     { transition: none; }
    dialog.drawer::backdrop { transition: none; }
    .drawer[data-sedna-closing="modal"] { animation: none; }
    button.badge-ai   { transition: none; }
    .fab-dial > .fab i { transition: none; }
    .sedna-art-bob,
    .sedna-art-sweep,
    .sedna-art-nudge,
    .sedna-art-blink,
    .sedna-art-tick,
    .sedna-art-twinkle { animation: none; }
    .file-tile,
    .file-tile-check,
    .file-tile-menu,
    .media-transcript > summary::after { transition: none; }
    .chat-typing > i { animation: none; }
    .chat-typing > i:nth-child(2) { animation: none; }
    .chat-typing > i:nth-child(3) { animation: none; }
    .chat-actions    { transition: none; }
    .text-shimmer,
    .reasoning[data-state="running"] .reasoning-label { animation: none; }
    .agent-avatar,
    .agent-avatar::before { animation: none; transition: none; }
    .reasoning > summary,
    .reasoning-chevron { transition: none; }
    .agent-tool > summary,
    .agent-tool-chevron { transition: none; }
    .chat-bubble--streaming > :last-child::after { animation: none; }
    .citation,
    .source-card,
    .chat-composer--prompt { transition: none; }
    .voice-bars > i,
    .btn-mic { transition: none; }
    .sedna-mochi-ground,
    .sedna-mochi-seat,
    .sedna-mochi-finger,
    .sedna-mochi-glow,
    .sedna-mochi-screen,
    .sedna-mochi-part,
    .sedna-mochi-legs-stand,
    .sedna-mochi-legs-sit,
    .sedna-mochi-grip-l,
    .sedna-mochi-grip-r,
    .sedna-mochi-grip-side,
    .sedna-mochi-grip-hl,
    .sedna-mochi-grip-hr,
    .sedna-mochi-place,
    .sedna-mochi-rig,
    .sedna-mochi-lean,
    .sedna-mochi-tilt,
    .sedna-mochi-breathe,
    .sedna-mochi-eyes,
    .sedna-mochi-scan,
    .sedna-mochi-blink,
    .sedna-mochi-talk,
    .sedna-mochi-leg-l,
    .sedna-mochi-leg-r,
    .sedna-mochi-foot-l,
    .sedna-mochi-foot-r,
    .sedna-mochi-shin-l,
    .sedna-mochi-shin-r,
    .sedna-mochi-arm-bl,
    .sedna-mochi-arm-br,
    .sedna-mochi-arm-fl,
    .sedna-mochi-arm-fr,
    .sedna-mochi-seg-bl,
    .sedna-mochi-seg-br,
    .sedna-mochi-seg-fl,
    .sedna-mochi-seg-fr,
    .sedna-mochi-reach-bl,
    .sedna-mochi-reach-br,
    .sedna-mochi-reach-fl,
    .sedna-mochi-reach-fr,
    .sedna-mochi-hand-bl,
    .sedna-mochi-hand-br,
    .sedna-mochi-act-bl,
    .sedna-mochi-act-br,
    .sedna-mochi-tap-fl,
    .sedna-mochi-tap-fr,
    .sedna-mochi-bubble,
    .sedna-mochi-bubble-2,
    .sedna-mochi-bubble-3,
    .sedna-mochi-confetti,
    .sedna-mochi-delay-1,
    .sedna-mochi-delay-2,
    .sedna-mochi-delay-3,
    .sedna-mochi-delay-4,
    .sedna-mochi-delay-5,
    .sedna-mochi-sweat,
    .sedna-mochi-z,
    .sedna-mochi-z-2,
    .sedna-mochi-z-3,
    .sedna-mochi-arc,
    .sedna-mochi-arc-2,
    .sedna-mochi-pop,
    .sedna-mochi-check,
    .sedna-mochi-heart,
    .sedna-mochi-float-heart,
    .sedna-mochi-float-heart-2,
    .sedna-mochi-float-heart-3 { animation: none; transition: none; }
    .workflow-node { transition: none; }
    .workflow { --workflow-comet: transparent; --workflow-flow-base: var(--workflow-flow); }
    .workflow-step[data-state="running"] > .workflow-node::before,
    .workflow-step[data-state="waiting"] > .workflow-node::before { animation: none; }
    :is(.workflow, .workflow-path) > .workflow-step[data-state="running"]:not(.workflow-branch > .workflow-path > :first-child, .workflow-loop > .workflow-path > :first-child, .workflow-fork + *)::before,
    .workflow-step[data-state="running"] > .workflow-label::after,
    .workflow-branch:has(> .workflow-path > :first-child[data-state="running"]) > .workflow-label::after,
    .workflow-fork:has(> .workflow-branch > .workflow-path > :first-child[data-state="running"])::before,
    .workflow-fork:has(> .workflow-branch > .workflow-path > .workflow-fork:first-child > .workflow-branch > .workflow-path > :first-child[data-state="running"])::before,
    .workflow-loop:has(> .workflow-path > :first-child[data-state="running"])::before,
    .workflow-fork:has(+ .workflow-step[data-state="running"]) > .workflow-branch:last-child::after,
    .workflow-branch:has(> .workflow-path > :first-child[data-state="running"])::before,
    .workflow-branch:has(> .workflow-path > .workflow-fork:first-child > .workflow-branch > .workflow-path > :first-child[data-state="running"])::before,
    .workflow-branch:has(> .workflow-path > :first-child[data-state="running"])::after,
    .workflow-branch:has(> .workflow-path > .workflow-fork:first-child > .workflow-branch > .workflow-path > :first-child[data-state="running"])::after,
    .workflow-fork:has(+ .workflow-step[data-state="running"]) > .workflow-branch:not([data-state="skipped"]) > .workflow-path::before,
    .workflow-fork:has(+ .workflow-step[data-state="running"]) > .workflow-branch:not([data-state="skipped"]) > .workflow-path > .workflow-fork:last-child > .workflow-branch:not([data-state="skipped"]) > .workflow-path::before,
    .workflow-fork:has(+ .workflow-step[data-state="running"]) > .workflow-branch:not([data-state="skipped"]) > .workflow-path::after,
    .workflow-fork:has(+ .workflow-step[data-state="running"]) > .workflow-branch:not([data-state="skipped"]) > .workflow-path > .workflow-fork:last-child > .workflow-branch:not([data-state="skipped"]) > .workflow-path::after {
        --workflow-comet: transparent;
        --workflow-flow-base: var(--workflow-flow);
        animation: none;
    }
    .bar-list-fill,
    .stack-bar-segment,
    .meter-fill,
    .bar-previous { transition: none; }
    .gauge { transition: none; }
    .tracker-block { transition: none; }
    .stat-value--roll { animation: none; }
    .table--stagger tbody > tr,
    .list--stagger > li { animation: none; }
    .card-resize::before,
    .split-resize::before,
    .col-resize::before { transition: none; }
    :is(.btn-bare, .menu-item, .tab, button.chip, .page-link, :is(a, button).list-row, .segmented-option,
        .topbar-btn, .bottombar-item, .nav-link, .fab)[aria-busy="true"] > i:first-of-type::after { animation: none; }
    :is(.card, .modal, .drawer, .sheet, .list, .table, .stat-row, .output-panel, .chat, .graph-frame, .form-section)[aria-busy="true"] {
        animation: none;
        background-size: 100% 2px;
        background-position: 0 0;
    }
    [dir="rtl"] :is(.card, .modal, .drawer, .sheet, .list, .table, .stat-row, .output-panel, .chat, .graph-frame, .form-section)[aria-busy="true"] {
        animation: none;
        background-size: 100% 2px;
        background-position: 0 0;
    }
    .choice-tile { transition: none; }
    button.cal-mark { transition: none; }
    .cal-resize::after { transition: none; }
    .sticky-group-toggle::before { transition: none; }
}
}