/* Eddy app design system — token v2 (TH0, 2026-10-08; superstring/docs/theme-track.md).
   Every app page links this before its own CSS and reads only these tokens for its chrome. Root attributes
   static/theme.js applies before first paint:
     look    html[data-theme]    desktop (the default :root block) · dark · game · mission · blueprint · contrast — the mode
     level   html[data-level]    advanced (default) · moderate · simple — how much each app shows (TH11)
     density html[data-density]  comfortable (default) · compact · touch
     guide   html[data-guide]    on — the guided tours; motion html[data-motion] off — no animations
   Layers: palette → components → metrics → shape → type → icon treatment → motion. A look overrides any layer.
   DS1 (design-system-track.md): the token blocks are GENERATED from docs/design/tokens/*.tokens.json by
   scripts/ds_tokens.mjs; everything outside TOKENS:BEGIN / TOKENS:END is written by hand. */
/* TOKENS:BEGIN — generated by scripts/ds_tokens.mjs from docs/design/tokens/*.tokens.json (DS1). Edit the JSON, then run
   node scripts/ds_tokens.mjs --write. Order: :root, the modes, the densities, the guided mode, the visual contexts. */
:root {
  /* ---- type */
  --t-font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  --t-font: 12.5px/1.35 var(--t-font-family);
  --t-mono: Consolas, "Cascadia Mono", ui-monospace, monospace;
  --t-label-case: none;  /* tab / group label case: a look may set uppercase */
  --t-label-track: 0;  /* … and its tracking */
  --t-label-font: var(--t-font-family);  /* … and its face (Blueprint letters its labels in the mono) */
  /* ---- palette */
  --t-bg: #F0F0F0;  /* the window behind everything */
  --t-panel: #FFFFFF;  /* documents, trees, tables, canvases that read as paper */
  --t-panel2: #F7F7F7;  /* side panes, menus */
  --t-chrome: #E4E7EB;  /* ribbon tab strip, pane heads, group rows */
  --t-chrome2: #FAFAFA;  /* the ribbon body, toolbars */
  --t-raise: #EDF0F3;  /* hover on chrome */
  --t-line: #C5CAD1;  /* panel and control borders */
  --t-line2: #DADDE2;  /* dividers inside chrome */
  --t-line3: #EEEEEE;  /* row rules */
  --t-text: #1A1A1A;
  --t-text2: #333333;
  --t-muted: #5F6873;
  --t-dim: #8E959D;
  --t-accent: #1B5EA8;
  --t-accent2: #3D7BBF;
  --t-accent-soft: #DCE9F7;  /* menu hover, selected chips */
  --t-hover: #EAF2FB;
  --t-sel: #CCE0F4;
  --t-input-bg: #FFFFFF;
  --t-input-line: #A9A9A9;
  --t-title-bg: #2B3A4A;  /* a dark strip where a page still wants one (toasts) */
  --t-title-fg: #E8EEF4;
  --t-title-muted: #AAB8C6;
  --t-title-hover: #3C4E62;
  --t-title-line: #5A7290;
  --t-title-input: #1F2A36;
  --t-canvas: #E9EDF2;  /* 2D/3D viewport background: CSS reads it, WebGL clears read ssTheme.rgb("--t-canvas") */
  --t-canvas-grad: linear-gradient(#3E5A7A, #C9D6E2 70%, #DCE4EC);  /* the shell apps' viewport (the Ansys idiom) */
  --t-grid: #C9D1DA;  /* viewport / sheet grid lines; the 3D grid floor's minor lines */
  --t-grid-major: #9AA6B4;  /* the grid floor's every fifth line */
  --t-ok: #2E8B3A;
  --t-warn: #A87400;
  --t-err: #C22B1F;
  --t-ctx: #7A4E00;
  --t-ctx-bg: #F6E8C8;
  /* ---- titlebar: Eddy Parts' light strip */
  --t-titlebar: linear-gradient(#FAFBFC, var(--t-chrome));
  /* ---- components: toolbar buttons, pressed modes, pane headers, section labels */
  --t-btn-h: 26px;
  --t-btn-radius: 3px;
  --t-btn-bg: var(--t-panel);
  --t-btn-fg: var(--t-text);
  --t-btn-line: var(--t-line);
  --t-btn-hover-bg: var(--t-hover);
  --t-btn-hover-line: var(--t-accent2);
  --t-btn-on-bg: var(--t-accent-soft);  /* pressed / armed / the active mode */
  --t-btn-on-line: var(--t-accent);
  --t-btn-on-fg: var(--t-accent);
  --t-btn-glow: none;  /* a look's hover glow */
  --t-head-bg: var(--t-chrome);  /* pane headers */
  --t-head-fg: var(--t-text);
  --t-label-fg: var(--t-text2);  /* section labels inside panes (no capitals) */
  --t-primary-bg: var(--t-accent);  /* the one primary action (Save) */
  --t-primary-fg: #FFFFFF;
  /* ---- metrics: (density): SolidWorks' proportions at a 12 px UI font. The generated icons are 56 px PNGs with transparent margin, so each image is drawn larger than its layout box (-icon vs -box) and the margin pulled in (-pull): the glyph reads at SolidWorks' size while the band keeps its height. */
  --t-ribbon-font: 12px;
  --t-glyph-lg: 26px;  /* a big button's unicode glyph, when it has no image */
  --t-icon-lg: 42px;  /* big ribbon button: a ~25 px glyph */
  --t-icon-lg-box: 30px;
  --t-icon-sm: 30px;  /* a stacked small ribbon button: ~18 px */
  --t-icon-sm-box: 20px;
  --t-icon-qa: 30px;  /* quick-access and heads-up toolbars: ~18 px */
  --t-icon-qa-box: 20px;
  --t-icon-tree: 26px;  /* tree rows: ~16 px */
  --t-icon-tree-box: 18px;
  --t-row-sm: 25px;  /* a stacked small button's row: three fill the band */
  --t-row-tree: 3px;  /* a tree row's vertical padding */
  --t-tree-font: 12px;  /* tree and property-grid text */
  --t-icon-lg-pull: calc((var(--t-icon-lg-box) - var(--t-icon-lg)) / 2);
  --t-icon-sm-pull: calc((var(--t-icon-sm-box) - var(--t-icon-sm)) / 2);
  --t-icon-qa-pull: calc((var(--t-icon-qa-box) - var(--t-icon-qa)) / 2);
  --t-icon-tree-pull: calc((var(--t-icon-tree-box) - var(--t-icon-tree)) / 2);
  /* ---- shape */
  --t-radius: 2px;
  --t-shadow: 0 10px 34px rgba(0,0,0,.4);
  /* ---- icon */
  --t-icon-filter: none;
  /* ---- motion: zero under prefers-reduced-motion */
  --t-dur: 0s;
  --t-ease: cubic-bezier(.2, .7, .2, 1);
  --t-lift: 0px;  /* a look's hover lift */
  --t-dur-ui: 140ms;  /* TH10: menus, popups, dialogs, toasts appearing */
  --t-dur-in: 180ms;  /* TH10: panels sliding in, the ribbon's groups rising on a tab change */
  --t-dur-draw: 340ms;  /* TH10: Blueprint's pen strokes, the grid floor drawing in */
  /* ---- space: DS1: the spacing scale. Gaps, padding and margins in components read these, never raw pixels. */
  --t-space-1: 2px;
  --t-space-2: 4px;
  --t-space-3: 6px;
  --t-space-4: 8px;
  --t-space-5: 12px;
  --t-space-6: 16px;
  --t-space-7: 20px;
  --t-space-8: 24px;
  --t-space-9: 32px;
  --t-space-10: 40px;
  /* ---- text: DS1: the type scale (the UI's body is fs-3, TH's 12.5 px) and weights. */
  --t-fs-1: 11px;  /* captions, counters, token text */
  --t-fs-2: 12px;  /* labels, table text, ribbon labels */
  --t-fs-3: 12.5px;  /* body text: the size of --t-font */
  --t-fs-4: 14px;  /* large body, h4 */
  --t-fs-5: 16px;  /* h3: a container's header */
  --t-fs-6: 18px;  /* h2: a section */
  --t-fs-7: 22px;  /* h1: a page's title */
  --t-fs-8: 28px;  /* display: the console's hero and the design site */
  --t-fw-normal: 400;
  --t-fw-strong: 600;
  --t-fw-heading: 600;
  --t-lh-tight: 1.25;
  --t-lh: 1.4;
  --t-lh-prose: 1.55;  /* long-form text: help, docs, chat answers */
  /* ---- control: DS1: the DS components' control metrics, on top of TH's button tokens so every look and density reaches them. */
  --t-control-h: var(--t-btn-h);  /* a button, input or select: 26 px comfortable, 22 compact, 32 touch */
  --t-control-pad-x: 10px;  /* a control's inline padding */
  --t-control-radius: var(--t-btn-radius);
  --t-control-gap: 6px;  /* between an icon and a label inside a control */
  --t-row-h: 28px;  /* a table, list or menu row */
  --t-radius-lg: 6px;  /* containers, cards, modals, popovers */
  --t-icon-stroke: 1.75;  /* the UI icons' stroke width (scripts/ds_icons.py) */
  --t-icon-ui: 16px;  /* a UI icon beside text */
  --t-on-accent: #FFFFFF;  /* marks and text drawn on an accent fill: a checkbox's tick, a solid badge */
  /* ---- focus: DS1: the focus ring every DS component draws on :focus-visible (TH had one only in High contrast). */
  --t-focus-ring: 0 0 0 2px var(--t-panel), 0 0 0 4px var(--t-accent2);
  --t-focus-ring-inset: inset 0 0 0 2px var(--t-accent2);  /* for rows and cells, where an outside ring would be clipped */
  /* ---- elevation: DS1: three elevations. --t-shadow (TH) is the popover level. */
  --t-shadow-1: 0 1px 2px rgba(16,24,40,.08), 0 1px 3px rgba(16,24,40,.06);  /* containers and cards */
  --t-shadow-2: var(--t-shadow);  /* menus, popovers, dropdowns */
  --t-shadow-3: 0 24px 64px rgba(0,0,0,.35);  /* modals and drawers */
  --t-scrim: rgba(15,20,28,.45);  /* behind a modal */
  /* ---- layer: DS1: stacking for anything not in the browser's top layer (dialogs and popovers use the top layer). */
  --t-z-sticky: 10;
  --t-z-drawer: 9300;
  --t-z-dropdown: 9600;
  --t-z-modal: 9800;
  --t-z-toast: 9900;
  --t-z-tooltip: 9950;
  /* ---- status: DS1: the status colours' soft fills and lines, mixed from --t-ok / --t-warn / --t-err / --t-accent so every look derives its own. */
  --t-info: var(--t-accent);
  --t-ok-bg: color-mix(in srgb, var(--t-ok) 11%, var(--t-panel));
  --t-warn-bg: color-mix(in srgb, var(--t-warn) 13%, var(--t-panel));
  --t-err-bg: color-mix(in srgb, var(--t-err) 11%, var(--t-panel));
  --t-info-bg: color-mix(in srgb, var(--t-accent) 10%, var(--t-panel));
  --t-ok-line: color-mix(in srgb, var(--t-ok) 50%, var(--t-panel));
  --t-warn-line: color-mix(in srgb, var(--t-warn) 50%, var(--t-panel));
  --t-err-line: color-mix(in srgb, var(--t-err) 50%, var(--t-panel));
  --t-info-line: color-mix(in srgb, var(--t-accent) 45%, var(--t-panel));
  --t-ok-text: #1F7330;  /* status colour for TEXT (AA on the panels); --t-ok stays for icons and graphics, which need 3:1 */
  --t-warn-text: #7D5600;
  --t-err-text: #B0261B;
  /* ---- data: DS1: data visualisation. Eight categorical colours in an order safe for colour-blind readers (Okabe-Ito, reordered and darkened for a light surface), and the engineering colour maps as gradients (canvases read the stops through eddy.colormap()). */
  --t-data-1: #0072B2;
  --t-data-2: #D55E00;
  --t-data-3: #009E73;
  --t-data-4: #CC79A7;
  --t-data-5: #E69F00;
  --t-data-6: #56B4E9;
  --t-data-7: #8C6D00;
  --t-data-8: #6E7781;
  --t-cmap-viridis: linear-gradient(90deg, #440154, #482878, #3E4A89, #31688E, #26828E, #1F9E89, #35B779, #6DCD59, #B4DE2C, #FDE725);  /* perceptually uniform; the default for a scalar field */
  --t-cmap-turbo: linear-gradient(90deg, #30123B, #4662D7, #36AAF9, #1AE4B6, #72FE5E, #C8EF34, #FABA39, #F66B19, #CA2A04, #7A0403);  /* Eddy Flow's default (the Turbo map) */
  --t-cmap-rainbow: linear-gradient(90deg, #0000FF, #00FFFF, #00FF00, #FFFF00, #FF0000);  /* the Ansys / SolidWorks results legend, kept for familiarity */
  --t-cmap-coolwarm: linear-gradient(90deg, #3B4CC0, #7396F5, #B0CBFC, #DDDDDD, #F6BFA6, #E7745B, #B40426);  /* diverging: signed quantities about zero */
  --t-cmap-grey: linear-gradient(90deg, #000000, #FFFFFF);  /* print and the contrast look */
  /* ---- layout: DS1: the app layout's measures (DS5). */
  --t-topnav-h: 40px;
  --t-sidenav-w: 248px;
  --t-tools-w: 320px;
  --t-content-max: 1280px;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --t-bg: #1B1E22;
  --t-panel: #23272C;
  --t-panel2: #262A30;
  --t-chrome: #2C3137;
  --t-chrome2: #262A30;
  --t-raise: #343A41;
  --t-line: #3B424A;
  --t-line2: #30363D;
  --t-line3: #2B3036;
  --t-text: #E3E6EA;
  --t-text2: #C9CED4;
  --t-muted: #98A2AC;
  --t-dim: #707A84;
  --t-accent: #4BA3E3;
  --t-accent2: #6DB8F0;
  --t-accent-soft: #1E3448;
  --t-hover: #2A3644;
  --t-sel: #23466E;
  --t-input-bg: #1A1D21;
  --t-input-line: #48515B;
  --t-title-bg: #14171A;
  --t-title-fg: #E0E4E8;
  --t-title-muted: #8A949E;
  --t-title-hover: #262B30;
  --t-title-line: #3A4148;
  --t-title-input: #0D0F13;
  --t-canvas: #3A4048;
  --t-grid: #4A525C;
  --t-grid-major: #626C77;
  --t-canvas-grad: linear-gradient(#22262B, #343A42 70%, #3E454D);
  --t-ok: #6FCA7A;
  --t-warn: #E0B25C;
  --t-err: #E88A80;
  --t-ctx: #E0B25C;
  --t-ctx-bg: #3A2F14;
  --t-titlebar: linear-gradient(#2B3036, #23272C);
  --t-primary-bg: #2771B2;
  --t-icon-filter: brightness(1.12) drop-shadow(0 0 1px rgba(255,255,255,.35));
  --t-shadow: 0 10px 34px rgba(0,0,0,.6);
  --t-focus-ring: 0 0 0 2px var(--t-panel), 0 0 0 4px var(--t-accent);
  --t-shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
  --t-scrim: rgba(0,0,0,.6);
  --t-data-1: #4BA3E3;
  --t-data-2: #FF8A4C;
  --t-data-3: #2CC79B;
  --t-data-4: #E39AC4;
  --t-data-5: #F0B429;
  --t-data-6: #7FD0F5;
  --t-data-7: #D9C24A;
  --t-data-8: #A7B0BA;
  --t-on-accent: #0B1A26;
  --t-ok-text: var(--t-ok);
  --t-warn-text: var(--t-warn);
  --t-err-text: var(--t-err);
}

html[data-theme="game"] {
  color-scheme: dark;
  --t-font-family: "Bahnschrift", "Segoe UI", system-ui, sans-serif;
  --t-label-case: uppercase;
  --t-label-track: .09em;
  --t-bg: #0A0B09;
  --t-panel: #121410;
  --t-panel2: #161812;
  --t-chrome: #1B1E17;
  --t-chrome2: #141611;
  --t-raise: #252920;
  --t-line: #343A2B;
  --t-line2: #2A2F22;
  --t-line3: #20241A;
  --t-text: #EDEAE0;
  --t-text2: #C9C6B8;
  --t-muted: #9A988A;
  --t-dim: #67685C;
  --t-accent: #F2B31B;
  --t-accent2: #FFCF4D;
  --t-accent-soft: #3A2F10;
  --t-hover: #24281D;
  --t-sel: #45380F;
  --t-input-bg: #0E100C;
  --t-input-line: #3E4532;
  --t-title-bg: #070806;
  --t-title-fg: #EDEAE0;
  --t-title-muted: #8F8D80;
  --t-title-hover: #23271C;
  --t-title-line: #2E3326;
  --t-title-input: #0E100C;
  --t-canvas: #14170F;
  --t-grid: #2A3120;
  --t-grid-major: #6E7F3C;
  --t-canvas-grad: linear-gradient(#060705, #14170F 60%, #232816);
  --t-ok: #8FD444;
  --t-warn: #F2B31B;
  --t-err: #E8412C;
  --t-ctx: #FF7A2F;
  --t-ctx-bg: #2E1A0D;
  --t-titlebar: linear-gradient(90deg, #0B0C09 0%, #15180F 60%, #211B0B 100%);
  --t-btn-radius: 2px;
  --t-btn-bg: #171A13;
  --t-btn-line: #343A2B;
  --t-btn-hover-bg: #262A1E;
  --t-btn-hover-line: #F2B31B;
  --t-btn-on-bg: rgba(242,179,27,.15);
  --t-btn-on-line: #F2B31B;
  --t-btn-on-fg: #FFCF4D;
  --t-btn-glow: inset 0 0 0 1px rgba(242,179,27,.5), 0 0 10px rgba(242,179,27,.16);
  --t-head-bg: linear-gradient(90deg, #1E2219, #121410);
  --t-primary-bg: linear-gradient(90deg, #F2B31B, #FFCF4D);
  --t-primary-fg: #0B0C09;
  --t-radius: 2px;
  --t-icon-filter: saturate(.72) sepia(.16) brightness(1.08) contrast(1.06);
  --t-shadow: 0 0 0 1px rgba(242,179,27,.2), 0 14px 36px rgba(0,0,0,.78);
  --t-dur: .1s;
  --t-lift: -1px;
  --t-focus-ring: 0 0 0 1px #F2B31B, 0 0 0 3px rgba(242,179,27,.32);
  --t-radius-lg: 3px;
  --t-shadow-1: 0 0 0 1px rgba(242,179,27,.12), 0 6px 18px rgba(0,0,0,.55);
  --t-scrim: rgba(4,5,3,.74);
  --t-data-1: #F2B31B;
  --t-data-2: #8FD444;
  --t-data-3: #4FB3E8;
  --t-data-4: #E8412C;
  --t-data-5: #C79BFF;
  --t-data-6: #7FD6C2;
  --t-data-7: #D9D2B4;
  --t-data-8: #8E9384;
  --t-on-accent: #0B0C09;
  --t-ok-text: var(--t-ok);
  --t-warn-text: var(--t-warn);
  --t-err-text: var(--t-err);
}

html[data-theme="mission"] {
  color-scheme: dark;
  --t-bg: #060B13;
  --t-panel: #0B1420;
  --t-panel2: #0E1826;
  --t-chrome: #111D2D;
  --t-chrome2: #0C1622;
  --t-raise: #172638;
  --t-line: #22364E;
  --t-line2: #1A2B40;
  --t-line3: #142335;
  --t-text: #D9E4F0;
  --t-text2: #AEBFD3;
  --t-muted: #8196B0;
  --t-dim: #566A84;
  --t-accent: #4CE38A;
  --t-accent2: #8CF5B8;
  --t-accent-soft: #0D3324;
  --t-hover: #13253A;
  --t-sel: #12402F;
  --t-input-bg: #08111C;
  --t-input-line: #2A4260;
  --t-title-bg: #04080F;
  --t-title-fg: #D9E4F0;
  --t-title-muted: #7A8FA8;
  --t-title-hover: #12233A;
  --t-title-line: #1F334B;
  --t-title-input: #08111C;
  --t-canvas: #08111E;
  --t-grid: #123A33;
  --t-grid-major: #2E8B66;
  --t-canvas-grad: radial-gradient(ellipse at 50% 115%, #12304A 0%, #0A1626 50%, #040810 100%);
  --t-ok: #4CE38A;
  --t-warn: #FFB000;
  --t-err: #FF5040;
  --t-ctx: #FFB000;
  --t-ctx-bg: #2E2206;
  --t-titlebar: linear-gradient(90deg, #0A1322 0%, #0E1C30 55%, #0A1322 100%);
  --t-btn-radius: 3px;
  --t-btn-bg: #0F1A28;
  --t-btn-line: #22364E;
  --t-btn-hover-bg: #14273D;
  --t-btn-hover-line: #4CE38A;
  --t-btn-on-bg: rgba(76,227,138,.13);
  --t-btn-on-line: #4CE38A;
  --t-btn-on-fg: #8CF5B8;
  --t-btn-glow: 0 0 0 1px rgba(76,227,138,.4), 0 0 10px rgba(76,227,138,.14);
  --t-head-bg: linear-gradient(90deg, #132236, #0B1420);
  --t-primary-bg: #36C97D;
  --t-primary-fg: #03130A;
  --t-radius: 4px;
  --t-icon-filter: saturate(.88) brightness(1.08);
  --t-shadow: 0 0 0 1px rgba(76,227,138,.16), 0 12px 32px rgba(0,0,0,.62);
  --t-dur: .14s;
  --t-lift: 0px;
  --t-focus-ring: 0 0 0 1px #4CE38A, 0 0 0 3px rgba(76,227,138,.3);
  --t-radius-lg: 6px;
  --t-shadow-1: 0 0 0 1px rgba(76,227,138,.1), 0 6px 18px rgba(0,0,0,.5);
  --t-scrim: rgba(2,5,10,.7);
  --t-data-1: #4CE38A;
  --t-data-2: #FFB000;
  --t-data-3: #5BC8FF;
  --t-data-4: #FF6B5B;
  --t-data-5: #C9A4FF;
  --t-data-6: #F2E863;
  --t-data-7: #7FE3D6;
  --t-data-8: #A7B4C4;
  --t-on-accent: #03130A;
  --t-ok-text: var(--t-ok);
  --t-warn-text: var(--t-warn);
  --t-err-text: var(--t-err);
}

html[data-theme="blueprint"] {
  color-scheme: dark;
  --t-label-case: uppercase;
  --t-label-track: .1em;
  --t-label-font: var(--t-mono);
  --t-bg: #0A2240;
  --t-panel: #0D2C52;
  --t-panel2: #0F2F57;
  --t-chrome: #12375F;
  --t-chrome2: #0D2C52;
  --t-raise: #18467A;
  --t-line: #3F6C9C;
  --t-line2: #23507F;
  --t-line3: #1A416B;
  --t-text: #F0F6FF;
  --t-text2: #CFE0F5;
  --t-muted: #A2BDDD;
  --t-dim: #7393BA;
  --t-accent: #9BD6FF;
  --t-accent2: #C4E8FF;
  --t-accent-soft: #1C4C7C;
  --t-hover: #164170;
  --t-sel: #235F98;
  --t-input-bg: #0A2446;
  --t-input-line: #4A78A8;
  --t-title-bg: #08203D;
  --t-title-fg: #F0F6FF;
  --t-title-muted: #A2BDDD;
  --t-title-hover: #164170;
  --t-title-line: #3F6C9C;
  --t-title-input: #0A2446;
  --t-canvas: #0F3460;
  --t-grid: #1E4F84;
  --t-grid-major: #4A82BD;
  --t-canvas-grad: linear-gradient(#0C2C52, #0F3460 60%, #123A6A);
  --t-ok: #7CE0A3;
  --t-warn: #FFD166;
  --t-err: #FF8F86;
  --t-ctx: #FFD166;
  --t-ctx-bg: #3A3416;
  --t-titlebar: linear-gradient(#0F3260, #0A2240);
  --t-btn-radius: 0px;
  --t-radius: 0px;
  --t-btn-bg: #0D2C52;
  --t-btn-line: #4A78A8;
  --t-btn-hover-bg: #164170;
  --t-btn-hover-line: #C4E8FF;
  --t-btn-on-bg: rgba(155,214,255,.16);
  --t-btn-on-line: #9BD6FF;
  --t-btn-on-fg: #FFFFFF;
  --t-head-bg: #0A2240;
  --t-primary-bg: #FFD166;
  --t-primary-fg: #0A2240;
  --t-icon-filter: grayscale(1) brightness(1.3) contrast(1.05) drop-shadow(0 0 1px rgba(255,255,255,.4));
  --t-shadow: 0 0 0 1px rgba(155,214,255,.35), 0 10px 30px rgba(0,0,0,.55);
  --t-focus-ring: 0 0 0 1px #0A2240, 0 0 0 3px #C4E8FF;
  --t-radius-lg: 0px;
  --t-shadow-1: 0 0 0 1px rgba(155,214,255,.3);
  --t-scrim: rgba(5,18,36,.7);
  --t-data-1: #4BA3E3;
  --t-data-2: #FF8A4C;
  --t-data-3: #2CC79B;
  --t-data-4: #E39AC4;
  --t-data-5: #F0B429;
  --t-data-6: #7FD0F5;
  --t-data-7: #D9C24A;
  --t-data-8: #A7B0BA;
  --t-on-accent: #0A2240;
  --t-ok-text: var(--t-ok);
  --t-warn-text: var(--t-warn);
  --t-err-text: var(--t-err);
}

html[data-theme="contrast"] {
  --t-bg: #FFFFFF;
  --t-panel: #FFFFFF;
  --t-panel2: #FFFFFF;
  --t-chrome: #F0F0F0;
  --t-chrome2: #FFFFFF;
  --t-raise: #E6E6E6;
  --t-line: #000000;
  --t-line2: #3A3A3A;
  --t-line3: #767676;
  --t-text: #000000;
  --t-text2: #000000;
  --t-muted: #1F1F1F;
  --t-dim: #3D3D3D;
  --t-accent: #0037A8;
  --t-accent2: #0037A8;
  --t-accent-soft: #FFE600;
  --t-hover: #FFF59A;
  --t-sel: #FFE600;
  --t-input-bg: #FFFFFF;
  --t-input-line: #000000;
  --t-canvas: #FFFFFF;
  --t-grid: #8A8A8A;
  --t-grid-major: #000000;
  --t-canvas-grad: #FFFFFF;
  --t-ok: #006B1F;
  --t-warn: #7A4F00;
  --t-err: #B00010;
  --t-ctx: #000000;
  --t-ctx-bg: #FFE600;
  --t-titlebar: #FFFFFF;
  --t-btn-line: #000000;
  --t-btn-hover-line: #000000;
  --t-btn-hover-bg: #FFF59A;
  --t-btn-on-bg: #0037A8;
  --t-btn-on-line: #000000;
  --t-btn-on-fg: #FFFFFF;
  --t-primary-bg: #0037A8;
  --t-shadow: 0 0 0 2px #000000;
  --t-focus-ring: 0 0 0 3px #0037A8;
  --t-focus-ring-inset: inset 0 0 0 3px #0037A8;
  --t-shadow-1: 0 0 0 1px #000000;
  --t-shadow-3: 0 0 0 2px #000000;
  --t-scrim: rgba(0,0,0,.6);
  --t-ok-bg: #FFFFFF;
  --t-warn-bg: #FFFFFF;
  --t-err-bg: #FFFFFF;
  --t-info-bg: #FFFFFF;
  --t-ok-line: var(--t-ok);
  --t-warn-line: var(--t-warn);
  --t-err-line: var(--t-err);
  --t-info-line: var(--t-accent);
  --t-data-1: #0037A8;
  --t-data-2: #B33000;
  --t-data-3: #006B1F;
  --t-data-4: #8A2A6B;
  --t-data-5: #7A4F00;
  --t-data-6: #005A80;
  --t-data-7: #5C4A00;
  --t-data-8: #000000;
  --t-ok-text: var(--t-ok);
  --t-warn-text: var(--t-warn);
  --t-err-text: var(--t-err);
}

html[data-density="compact"] {
  --t-ribbon-font: 11.5px;
  --t-glyph-lg: 20px;
  --t-icon-lg: 34px;
  --t-icon-lg-box: 24px;
  --t-icon-sm: 26px;
  --t-icon-sm-box: 16px;
  --t-icon-qa: 26px;
  --t-icon-qa-box: 17px;
  --t-icon-tree: 22px;
  --t-icon-tree-box: 16px;
  --t-row-sm: 21px;
  --t-row-tree: 1px;
  --t-btn-h: 22px;
  --t-tree-font: 11.5px;
  --t-control-pad-x: 8px;
  --t-row-h: 24px;
  --t-fs-3: 12px;
}

html[data-density="touch"] {
  --t-ribbon-font: 13px;
  --t-glyph-lg: 30px;
  --t-icon-lg: 54px;
  --t-icon-lg-box: 38px;
  --t-icon-sm: 34px;
  --t-icon-sm-box: 22px;
  --t-icon-qa: 34px;
  --t-icon-qa-box: 22px;
  --t-icon-tree: 30px;
  --t-icon-tree-box: 20px;
  --t-row-sm: 30px;
  --t-row-tree: 6px;
  --t-btn-h: 32px;
  --t-btn-radius: 6px;
  --t-tree-font: 13.5px;
  --t-control-pad-x: 14px;
  --t-row-h: 36px;
  --t-fs-2: 13px;
  --t-fs-3: 13.5px;
  --t-icon-ui: 18px;
}

html[data-guide="on"] {
  --t-dur: .15s;
  --t-lift: -2px;
  --t-btn-radius: 6px;
}

/* A region that stays dark in every look: Eddy Drafting's model space (the owner: dark is the standard there), a terminal (DS1). */
[data-context="canvas-dark"] {
  color-scheme: dark;
  color: var(--t-text);
  --t-bg: #1B1E22;
  --t-panel: #23272C;
  --t-panel2: #262A30;
  --t-chrome: #2C3137;
  --t-line: #3B424A;
  --t-line2: #30363D;
  --t-line3: #2B3036;
  --t-text: #E3E6EA;
  --t-text2: #C9CED4;
  --t-muted: #98A2AC;
  --t-dim: #707A84;
  --t-accent: #4BA3E3;
  --t-accent2: #6DB8F0;
  --t-accent-soft: #1E3448;
  --t-hover: #2A3644;
  --t-sel: #23466E;
  --t-input-bg: #1A1D21;
  --t-input-line: #48515B;
  --t-grid: #30363D;
  --t-grid-major: #46505A;
  --t-ok: #6FCA7A;
  --t-warn: #E0B25C;
  --t-err: #E88A80;
  --t-data-1: #4BA3E3;
  --t-data-2: #FF8A4C;
  --t-data-3: #2CC79B;
  --t-data-4: #E39AC4;
  --t-data-5: #F0B429;
  --t-data-6: #7FD0F5;
  --t-data-7: #D9C24A;
  --t-data-8: #A7B0BA;
  --t-on-accent: #0B1A26;
  --t-ok-text: var(--t-ok);
  --t-warn-text: var(--t-warn);
  --t-err-text: var(--t-err);
}

/* A region that reads as paper in every look: the drawing sheet, chart paper, Eddy Circuits' schematic, Eddy 1D's diagram (DS1). */
[data-context="paper"] {
  color-scheme: light;
  color: var(--t-text);
  --t-bg: #FFFFFF;
  --t-panel: #FFFFFF;
  --t-panel2: #F7F7F7;
  --t-chrome: #E4E7EB;
  --t-line: #C5CAD1;
  --t-line2: #DADDE2;
  --t-line3: #EEEEEE;
  --t-text: #1A1A1A;
  --t-text2: #333333;
  --t-muted: #5F6873;
  --t-dim: #8E959D;
  --t-accent: #1B5EA8;
  --t-accent2: #3D7BBF;
  --t-accent-soft: #DCE9F7;
  --t-hover: #EAF2FB;
  --t-sel: #CCE0F4;
  --t-input-bg: #FFFFFF;
  --t-input-line: #A9A9A9;
  --t-grid: #D5DCE4;
  --t-grid-major: #AEB8C4;
  --t-ok: #2E8B3A;
  --t-warn: #A87400;
  --t-err: #C22B1F;
  --t-data-1: #0072B2;
  --t-data-2: #D55E00;
  --t-data-3: #009E73;
  --t-data-4: #CC79A7;
  --t-data-5: #E69F00;
  --t-data-6: #56B4E9;
  --t-data-7: #8C6D00;
  --t-data-8: #6E7781;
  --t-on-accent: #FFFFFF;
  --t-ok-text: #1F7330;
  --t-warn-text: #7D5600;
  --t-err-text: #B0261B;
}
/* TOKENS:END */

/* ===================================================================================== look-specific rules
   (each look's tokens are in the generated region above; these are the few rules a token cannot express) */
html[data-theme="blueprint"] #ribbon, html[data-theme="blueprint"] #toolbar {
  background-color: #0D2C52;
  background-image: linear-gradient(rgba(155,214,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(155,214,255,.07) 1px, transparent 1px);
  background-size: 16px 16px; }
html[data-theme="blueprint"] .ss-brand b, html[data-theme="blueprint"] #titlebar .logo { color: #FFFFFF; font-family: var(--t-mono); letter-spacing: .14em; }

html[data-theme="contrast"] :focus-visible { outline: 3px solid #0037A8 !important; outline-offset: 1px; }

/* ===================================================================================== motion */
@media (prefers-reduced-motion: reduce) { :root, html[data-theme] { --t-dur: 0s !important; --t-lift: 0px !important; --t-dur-ui: 0ms !important; --t-dur-in: 0ms !important; --t-dur-draw: 0ms !important; } }
/* Animations: Off (theme.js, html[data-motion="off"]) is the same as the system's reduce-motion */
html[data-motion="off"] { --t-dur: 0s !important; --t-lift: 0px !important; --t-dur-ui: 0ms !important; --t-dur-in: 0ms !important; --t-dur-draw: 0ms !important; }

/* ===================================================================================== base */
body { font-family: var(--t-font-family); }
/* Form controls take the page's font: left alone, every <button> / <input> / <select> renders in the browser's
   own face (Arial 13.33 px on Windows), which is why ribbon labels and title-bar buttons read differently from
   the text around them. Pages that want a monospace field still say so on the field. */
button, input, select, textarea { font-family: inherit; }
/* The Eddy brand mark and the title row: what the studio's title bar starts with, for every app. */
.ss-brand { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; flex: none; font: 12px var(--t-font-family); }
.ss-brand b { font-weight: 700; color: var(--t-accent); letter-spacing: .3px; }
.ss-brand span { color: var(--t-muted); }
.ss-titlerow { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 10px; background: var(--t-titlebar); border-bottom: 1px solid var(--t-line); flex: 0 0 auto; position: relative; z-index: 60; white-space: nowrap; }
.ss-titlerow > .ss-grow { flex: 1 1 0; min-width: 8px; }

/* The icon treatment reaches every generated icon (ribbons, quick access, view bars, trees). */
img.icimg, img.qimg, img.rtimg, img.vimg, img.rbimg, .titem .fic img, #lptabs img, #fmgr .hdr .ic img { filter: var(--t-icon-filter); }

/* Motion and glow on the shared control families; inert unless a look or mode sets --t-dur / --t-lift / --t-btn-glow. */
.rbtn, .rtxt, .tbn, .rbig, .rsm, .qbtn, .vbtn, .tbtn, .tb, .tb-btn, .tb-mode, .tb-act {
  transition: background-color var(--t-dur) var(--t-ease), border-color var(--t-dur) var(--t-ease), box-shadow var(--t-dur) var(--t-ease), transform var(--t-dur) var(--t-ease);
}
.rbtn:not(:disabled):hover, .tbn:hover, .rbig:not(.off):hover, .rtxt:not(:disabled):hover {
  box-shadow: var(--t-btn-glow); transform: translateY(var(--t-lift));
}
.rbtn:not(:disabled):active, .tbn:active, .rbig:not(.off):active { transform: translateY(0) scale(.97); }

/* Looks that track their labels in capitals (Game) reach tabs and group labels through these two tokens. */
#ribbontabs .rtab, .rtab, .rgroup .glabel, .tgroup .glabel { text-transform: var(--t-label-case); letter-spacing: var(--t-label-track); font-family: var(--t-label-font); }
/* Game (a Call of Duty-style menu): an amber brand, a hard amber bar under the active tab, a field-grey band with a
   faint diagonal weave, and HUD corner brackets on whatever pops up. Paint only: the face and label case are the
   tokens', and nothing here takes space. */
html[data-theme="game"] .ss-brand b, html[data-theme="game"] #titlebar .logo { color: #F2B31B; text-shadow: 0 0 8px rgba(242,179,27,.35); }
html[data-theme="game"] #ribbontabs .rtab.active, html[data-theme="game"] .rtab.active {
  box-shadow: inset 0 -3px 0 #F2B31B; background-image: linear-gradient(to top, rgba(242,179,27,.18), transparent 75%); }
html[data-theme="game"] #ribbon, html[data-theme="game"] #toolbar {
  background: repeating-linear-gradient(135deg, rgba(237,234,224,.02) 0 2px, transparent 2px 7px), linear-gradient(#191C15, #10120E); }
html[data-theme="game"] :is(.menupop, #ctxmenu, .ss-menu-pop, .ss-theme-pop, .tbmenu .tbdrop, .dropdown, .menu-drop, .dlg)::after {
  content: ""; position: absolute; inset: -1px; pointer-events: none;
  background: linear-gradient(#F2B31B, #F2B31B) left top / 10px 2px, linear-gradient(#F2B31B, #F2B31B) left top / 2px 10px,
              linear-gradient(#F2B31B, #F2B31B) right top / 10px 2px, linear-gradient(#F2B31B, #F2B31B) right top / 2px 10px,
              linear-gradient(#F2B31B, #F2B31B) left bottom / 10px 2px, linear-gradient(#F2B31B, #F2B31B) left bottom / 2px 10px,
              linear-gradient(#F2B31B, #F2B31B) right bottom / 10px 2px, linear-gradient(#F2B31B, #F2B31B) right bottom / 2px 10px;
  background-repeat: no-repeat; }
/* Mission control (a flight control room): a phosphor-green brand, consoles under a faint scan-line raster, a lit lamp
   under the active tab. Paint only, like Game. */
html[data-theme="mission"] .ss-brand b, html[data-theme="mission"] #titlebar .logo { color: #4CE38A; text-shadow: 0 0 6px rgba(76,227,138,.55); }
html[data-theme="mission"] #ribbontabs .rtab.active, html[data-theme="mission"] .rtab.active {
  box-shadow: inset 0 -2px 0 #4CE38A, inset 0 -10px 12px -10px rgba(76,227,138,.55); }
html[data-theme="mission"] #ribbon, html[data-theme="mission"] #toolbar {
  background: repeating-linear-gradient(0deg, rgba(140,245,184,.028) 0 1px, transparent 1px 3px), linear-gradient(#0F1B2B, #0A1420); }

/* ===================================================================================== motion (TH10) */
/* Every look: quick, meaningful, never in the way. Only transform, opacity, clip-path, box-shadow and
   background-position animate; the durations are tokens (zero under prefers-reduced-motion). */
@keyframes ss-pop-in   { from { opacity: 0; transform: translateY(-4px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes ss-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes ss-slide-in { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes ss-rise     { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ss-toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes ss-shimmer  { from { background-position: 160% 0; } to { background-position: -60% 0; } }
@keyframes ss-done     { 0% { box-shadow: inset 3px 0 0 var(--t-ok), inset 0 0 0 999px color-mix(in srgb, var(--t-ok) 20%, transparent); }
                         100% { box-shadow: inset 3px 0 0 transparent, inset 0 0 0 999px transparent; } }
/* menus, popups, flyouts and dialogs pop in; overlays fade; the PropertyManager slides in from its edge */
.menupop, #ctxmenu, #searchdrop, #orientpal, #modify, .tbmenu .tbdrop, .ss-menu-pop, .ss-theme-pop, .ss-panel,
.menu-drop, .dropdown, .dlg, #ql-drop { animation: ss-pop-in var(--t-dur-ui) var(--t-ease) backwards; transform-origin: top left; }
.ovl { animation: ss-fade-in var(--t-dur-ui) linear backwards; }
#prop { animation: ss-slide-in var(--t-dur-in) var(--t-ease) backwards; }
.ss-toast, .ss-milestone, .ss-coach, #ss-banner { animation: ss-toast-in var(--t-dur-in) var(--t-ease) backwards; }
/* a ribbon tab change: the band's groups rise in, one after another (theme.js ssTheme.fx.enter) */
.ss-enter > .rgroup, .ss-enter > .tgroup { animation: ss-rise var(--t-dur-in) var(--t-ease) backwards; animation-delay: calc(var(--i, 0) * 18ms); }
/* a rebuild in flight: the feature rows shimmer (after 120 ms, so quick rebuilds never flicker); a new feature's
   row flashes green when it lands (ssTheme.fx.done) */
body.ss-rebuilding #tree .titem[data-fid] {
  background-image: linear-gradient(90deg, transparent 30%, color-mix(in srgb, var(--t-accent2) 22%, transparent) 50%, transparent 70%);
  background-size: 250% 100%; animation: ss-shimmer 1.1s linear 120ms infinite backwards; }
.ss-done-flash { animation: ss-done 900ms ease-out; }

/* Blueprint: panels draw their frame in like a pen; the active tab gets a ruler that sweeps along it */
@keyframes ss-draw-frame { 0% { clip-path: inset(0 100% calc(100% - 1px) 0); } 45% { clip-path: inset(0 0 calc(100% - 1px) 0); } 100% { clip-path: inset(0 0 0 0); } }
@keyframes ss-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
html[data-theme="blueprint"] #prop { position: relative; }
html[data-theme="blueprint"] :is(.menupop, #ctxmenu, .ss-menu-pop, .ss-theme-pop, .tbmenu .tbdrop, .dropdown, .menu-drop, .dlg, #prop)::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border: 1px solid #C4E8FF; animation: ss-draw-frame var(--t-dur-draw) var(--t-ease) backwards; }
html[data-theme="blueprint"] :is(#ribbontabs .rtab.active, .rtab.active) { position: relative; }
html[data-theme="blueprint"] :is(#ribbontabs .rtab.active, .rtab.active)::after {
  content: ""; position: absolute; left: 6px; right: 6px; bottom: 2px; height: 5px; pointer-events: none; transform-origin: left center;
  background: repeating-linear-gradient(90deg, #C4E8FF 0 1px, transparent 1px 6px) left bottom / 100% 4px no-repeat,
              linear-gradient(#C4E8FF, #C4E8FF) left bottom / 100% 1px no-repeat;
  animation: ss-rule var(--t-dur-draw) var(--t-ease) backwards; }

/* Game: an amber scan sweeps the band on a tab change; the armed tool and pressed modes breathe amber; a landed
   feature gets the hit marker and its score (theme.js burst); a milestone's medal is a rank chevron */
@keyframes ss-sweep { 0% { transform: translateX(-100%); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateX(260%); opacity: 0; } }
@keyframes ss-glow-pulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(242,179,27,.35); } 50% { box-shadow: 0 0 0 1px rgba(242,179,27,.85), 0 0 12px rgba(242,179,27,.32), inset 0 0 8px rgba(242,179,27,.16); } }
@keyframes ss-hit { 0% { transform: rotate(var(--a)) translateY(-6px) scaleY(.5); opacity: 1; } 55% { opacity: 1; } 100% { transform: rotate(var(--a)) translateY(-11px) scaleY(1); opacity: 0; } }
@keyframes ss-score { 0% { transform: translateY(5px) scale(.8); opacity: 0; } 15% { transform: none; opacity: 1; } 70% { opacity: 1; } 100% { transform: translateY(-14px); opacity: 0; } }
@keyframes ss-ring { from { transform: scale(.2); opacity: .9; } to { transform: scale(2.4); opacity: 0; } }
html[data-theme="game"] :is(#ribbon, #toolbar).ss-enter { position: relative; }
html[data-theme="game"] :is(#ribbon, #toolbar).ss-enter::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 38%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(242,179,27,.16), rgba(255,207,77,.1), transparent);
  animation: ss-sweep calc(var(--t-dur-in) * 3) ease-out both; }
html[data-theme="game"] :is(.rbtn.armed, .tbn.armed, .gb.on, .tb.on, .tb-mode.pressed, .vbtn.on) { animation: ss-glow-pulse 1.8s ease-in-out infinite; }
.ss-burst { position: fixed; z-index: 9700; width: 0; height: 0; pointer-events: none; }
.ss-burst-game i { position: absolute; left: -1px; top: -4px; width: 2px; height: 8px; background: #EDEAE0; box-shadow: 0 0 2px rgba(0,0,0,.9);
  animation: ss-hit 440ms ease-out both; }
.ss-burst-game em { position: absolute; left: 18px; top: -8px; font: 700 13px/1 var(--t-font-family); font-style: normal; color: #F2B31B;
  text-shadow: 0 1px 2px rgba(0,0,0,.9); white-space: nowrap; animation: ss-score 900ms ease-out both; }
html[data-theme="game"] .ss-milestone .medal { background: linear-gradient(160deg, #FFD978, #F2B31B 45%, #8A5A0B); color: #0B0C09; border-radius: 0;
  clip-path: polygon(50% 0, 100% 22%, 100% 78%, 50% 100%, 0 78%, 0 22%); }
/* Mission control: a telemetry scan drops through the band on a tab change; the armed tool and pressed modes are lit
   lamps; a landed feature gets a radar ping */
@keyframes ss-scan { from { transform: translateY(-100%); opacity: 0; } 20% { opacity: 1; } to { transform: translateY(100%); opacity: 0; } }
@keyframes ss-lamp { 0%, 100% { box-shadow: 0 0 0 1px rgba(76,227,138,.5); } 50% { box-shadow: 0 0 0 1px rgba(76,227,138,.9), 0 0 10px rgba(76,227,138,.32); } }
html[data-theme="mission"] :is(#ribbon, #toolbar).ss-enter { position: relative; }
html[data-theme="mission"] :is(#ribbon, #toolbar).ss-enter::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(transparent 0 44%, rgba(140,245,184,.2) 50%, transparent 56%);
  animation: ss-scan calc(var(--t-dur-in) * 3) linear both; }
html[data-theme="mission"] :is(.rbtn.armed, .tbn.armed, .gb.on, .tb.on, .tb-mode.pressed, .vbtn.on) { animation: ss-lamp 2.4s ease-in-out infinite; }
.ss-burst-mission b { position: absolute; left: -18px; top: -18px; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid #4CE38A;
  box-shadow: 0 0 10px rgba(76,227,138,.5); animation: ss-ring 800ms ease-out both; }
.ss-burst-mission b + b { animation-delay: 170ms; }
html[data-theme="mission"] .ss-milestone .medal { background: radial-gradient(circle at 35% 30%, #8CF5B8, #2BA866 60%, #0D5C38); color: #03130A;
  box-shadow: 0 0 12px rgba(76,227,138,.5); }
/* still (the system's reduce-motion, or Animations: Off): no bursts, sweeps, pulses, shimmer or flashes, no fades */
@media (prefers-reduced-motion: reduce) {
  .ss-burst, html[data-theme="game"] :is(#ribbon, #toolbar).ss-enter::after, html[data-theme="mission"] :is(#ribbon, #toolbar).ss-enter::after { display: none; }
  html[data-theme="game"] :is(.rbtn.armed, .tbn.armed, .gb.on, .tb.on, .tb-mode.pressed, .vbtn.on), .ss-done-flash { animation: none; }
  html[data-theme="mission"] :is(.rbtn.armed, .tbn.armed, .gb.on, .tb.on, .tb-mode.pressed, .vbtn.on) { animation: none; }
  body.ss-rebuilding #tree .titem[data-fid] { animation: none; background-image: none; }
  :root .ss-toast { transition: none; }
}
html[data-motion="off"] .ss-burst, html[data-motion="off"] :is(#ribbon, #toolbar).ss-enter::after { display: none; }
html[data-motion="off"] :is(.rbtn.armed, .tbn.armed, .gb.on, .tb.on, .tb-mode.pressed, .vbtn.on, .ss-done-flash, .ss-pulse) { animation: none; }
html[data-motion="off"] body.ss-rebuilding #tree .titem[data-fid] { animation: none; background-image: none; }
html[data-motion="off"] .ss-toast { transition: none; }

/* ===================================================================================== levels (TH5, TH11) */
/* Simple: each group's headline commands only; the stacked commands, group labels and greyed placeholders hide,
   and every hidden command stays one click away in the group's More menu (the apps add .ss-more buttons) or the
   command search. Moderate: the full ribbon, but the not-yet-working commands sit in each group's More menu and
   the specialist tabs under More tabs (the apps decide both; .ss-moderate-hide marks the tabs). Advanced: all of it.
   A folded tab still shows while it is the active one. */
html[data-level="simple"] .rtxtcol, html[data-level="simple"] .tcol, html[data-level="simple"] .rcol,
html[data-level="simple"] .rgroup .glabel, html[data-level="simple"] .tgroup .glabel,
html[data-level="simple"] .rbtn:disabled, html[data-level="simple"] .rbig.off,
html[data-level="simple"] .ss-simple-hide:not(.active), html[data-level="moderate"] .ss-moderate-hide:not(.active) { display: none !important; }
html:not([data-level]) .ss-more, html:not([data-level="simple"]) .ss-more-simple { display: none !important; }
/* TH11 levels for the apps without a ribbon (theme.js foldBar): a control above the person's level folds into the bar's More */
[data-level-folded] { display: none !important; }
.ss-menu-pop { position: fixed; z-index: 9600; display: flex; flex-direction: column; min-width: 190px; padding: 3px; border-radius: 5px; background: var(--t-panel); border: 1px solid var(--t-line); box-shadow: var(--t-shadow); font: 12px var(--t-font-family); }
.ss-menu-pop button { border: none; background: none; color: var(--t-text); text-align: left; padding: 6px 10px; border-radius: 3px; cursor: pointer; font: inherit; white-space: nowrap; }
.ss-menu-pop button:hover { background: var(--t-hover); }
.ss-menu-pop button:disabled { opacity: .45; cursor: default; }

/* ===================================================================================== mode: guided (TH6) */
.ss-coach { position: fixed; z-index: 9500; max-width: 300px; padding: 12px 14px 10px; border-radius: 10px; background: var(--t-panel); color: var(--t-text);
  border: 1px solid var(--t-accent2); box-shadow: 0 10px 30px rgba(20,40,80,.28); font: 12.5px/1.45 var(--t-font-family); }
.ss-coach::before { content: ""; position: absolute; top: -7px; left: 26px; width: 12px; height: 12px; background: var(--t-panel);
  border-left: 1px solid var(--t-accent2); border-top: 1px solid var(--t-accent2); transform: rotate(45deg); }
.ss-coach.above::before { top: auto; bottom: -7px; transform: rotate(225deg); }
.ss-coach .ss-c-t { display: block; font-weight: 600; font-size: 13px; margin-bottom: 4px; color: var(--t-accent); }
.ss-coach .ss-c-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.ss-coach .ss-c-dots { flex: 1; color: var(--t-dim); letter-spacing: 3px; }
.ss-coach button { border: 1px solid var(--t-accent); background: var(--t-accent); color: #fff; border-radius: 6px; padding: 3px 12px; cursor: pointer; font: inherit; }
.ss-coach button.ghost { background: none; color: var(--t-accent); }
.ss-pulse { position: fixed; z-index: 9400; border-radius: 10px; pointer-events: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-accent2) 60%, transparent), 0 0 0 9px color-mix(in srgb, var(--t-accent2) 20%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .ss-pulse { animation: ss-pulse 1.6s ease-in-out infinite; }
  @keyframes ss-pulse { 50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-accent2) 80%, transparent), 0 0 0 14px color-mix(in srgb, var(--t-accent2) 5%, transparent); } }
}
.ss-kbd { display: inline-block; padding: 0 5px; border: 1px solid var(--t-line); border-bottom-width: 2px; border-radius: 4px; font: 11px var(--t-mono); color: var(--t-text2); background: var(--t-panel2); }
.ss-milestone { position: fixed; z-index: 9500; right: 18px; bottom: 34px; display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 10px;
  background: var(--t-panel); border: 1px solid var(--t-line); box-shadow: 0 8px 24px rgba(20,40,80,.22); font: 12.5px var(--t-font-family); color: var(--t-text); }
.ss-milestone .medal { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #FFD54A, #F59E0B); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; flex: none; }
.ss-milestone .sub { color: var(--t-muted); }
/* TH6 follow-ups (2026-10-14): the hover card (the tours on) and the "What can I do here?" palette, on the design
   system's popover / modal / listbox; these rules only place the card's larger icon and the rows' shortcut column */
.ss-hovercard { z-index: 9550; pointer-events: none; }
.ss-hovercard .ss-hc { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 2px; align-items: start; padding: 10px 12px; }
.ss-hovercard .ss-hc > :not(.ss-hc-icon) { grid-column: 2; }
.ss-hovercard .ss-hc-icon { grid-row: 1 / span 4; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; font-size: 34px; line-height: 1; color: var(--t-accent); }
.ss-hovercard .ss-hc-icon > * { width: 48px; height: 48px; font-size: 34px; display: flex; align-items: center; justify-content: center; object-fit: contain; }
.ss-hovercard .ss-hc-icon img, .ss-hovercard .ss-hc-icon svg { width: 48px; height: 48px; }
.ss-hovercard .ss-hc-name { font-weight: 600; }
.ss-hovercard .ss-hc-desc { color: var(--t-text2); }
.ss-hovercard .ss-hc-key { color: var(--t-muted); font-size: 11px; }
.ss-palette .eddy-listbox { max-height: min(56vh, 460px); }
.ss-palette .eddy-option, .ss-palette .eddy-listbox-group { flex: none; }
.ss-palette .eddy-option { align-items: center; }
.ss-palette .eddy-option-text { flex: 1; }
.ss-palette .ss-pal-meta { display: inline-flex; gap: 6px; align-items: center; flex: none; }

/* ===================================================================================== the picker (TH1) */
#ss-theme-slot { display: inline-flex; align-items: center; flex: none; }
.ss-theme-btn { width: 26px; height: 24px; border: 1px solid transparent; border-radius: var(--t-btn-radius); background: none; color: var(--t-text2); font: 15px/1 var(--t-font-family); cursor: pointer; padding: 0; }
.ss-theme-btn:hover { border-color: var(--t-btn-hover-line); background: var(--t-btn-hover-bg); }
.ss-theme-pop { position: fixed; z-index: 9600; width: 400px; padding: 12px; border-radius: 8px; background: var(--t-panel); color: var(--t-text); border: 1px solid var(--t-line);
  box-shadow: var(--t-shadow); font: 12px/1.4 var(--t-font-family); display: grid; gap: 10px; }
.ss-tp-h { font-weight: 700; font-size: 13px; }
.ss-tp-help { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border: 1px solid var(--t-line); border-radius: 6px; background: var(--t-panel2); color: var(--t-text); cursor: pointer; font: inherit; font-weight: 600; text-align: left; }
.ss-tp-help:hover { border-color: var(--t-accent2); }
.ss-tp-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ss-tp-preset { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 7px 4px; border: 1px solid var(--t-line); border-radius: 6px; background: var(--t-panel2); color: var(--t-text); cursor: pointer; font: inherit; }
.ss-tp-preset:hover { border-color: var(--t-accent2); }
.ss-tp-preset.on { border-color: var(--t-accent); box-shadow: inset 0 0 0 1px var(--t-accent); }
.ss-tp-sw { display: block; width: 100%; height: 22px; border-radius: 4px; border: 1px solid rgba(127,127,127,.35); }
.ss-tp-desktop { background: linear-gradient(90deg, #F0F0F0 0 40%, #FFFFFF 40% 70%, #1B5EA8 70%); }
.ss-tp-dark { background: linear-gradient(90deg, #1B1E22 0 40%, #2C3137 40% 70%, #4BA3E3 70%); }
.ss-tp-game { background: linear-gradient(90deg, #0A0B09 0 40%, #1B1E17 40% 62%, #6E7F3C 62% 80%, #F2B31B 80%); }
.ss-tp-mission { background: repeating-linear-gradient(0deg, rgba(140,245,184,.12) 0 1px, transparent 1px 3px), linear-gradient(90deg, #060B13 0 40%, #111D2D 40% 62%, #4CE38A 62% 82%, #FFB000 82%); }
.ss-tp-contrast { background: linear-gradient(90deg, #FFFFFF 0 40%, #000000 40% 70%, #FFE600 70%); }
.ss-tp-blueprint { background-color: #0F3460; background-image: linear-gradient(rgba(255,255,255,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.35) 1px, transparent 1px); background-size: 6px 6px; }
.ss-tp-row { display: grid; grid-template-columns: 82px 1fr; align-items: center; gap: 8px; }
.ss-tp-row > span { color: var(--t-muted); }
.ss-tp-seg { display: flex; border: 1px solid var(--t-line); border-radius: 6px; overflow: hidden; }
.ss-tp-seg button { flex: 1; border: none; border-left: 1px solid var(--t-line); background: var(--t-panel); color: var(--t-text); padding: 5px 4px; cursor: pointer; font: inherit; white-space: nowrap; }
.ss-tp-seg button:first-child { border-left: none; }
.ss-tp-seg button.on { background: var(--t-btn-on-bg); color: var(--t-btn-on-fg); font-weight: 600; }
.ss-tp-foot { color: var(--t-muted); font-size: 11px; }