/* Aurelia v1.102 — the Soft UI design system (V2, CR-03 phase A; KS froze prototype Round 4 on 29 Oct 2026).
   Calm editorial look: Cormorant Garamond headings, porcelain cards; neumorphic parts — raised (convex) buttons and cards,
   pressed (dent) wells and fields; white pill badges with a symbol AND a word; status tiles with small animated picture icons
   (still when the device asks for reduced motion). Colour themes are tokens on <html data-soft="…">: Porcelain (default),
   Sage, Midnight, Champagne, Stone, Pearl, Graphite and Kitchen contrast. aurelia-soft.js sets the theme and draws the icons. */
:root[data-soft], :root[data-soft="porcelain"] {
  --s-bg: #eeebe4; --s-surface: #f3f0ea; --s-paper: #faf8f3; --s-ink: #343b35; --s-muted: #62655c; --s-gold: #a18a5e; --s-gold-text: #7a6540;
  --s-line: #dcd8cd; --s-lo: #ccc7bd; --s-hi: #ffffff; --s-edge: #ffffff4d; --s-accent: #a18a5e; --s-accent-ink: #1f1a10; --s-rose: #f1e1dc;
  --s-alarm: #b3263a; --s-green-text: #2f6a4a; --s-go: #237a4f; --s-go-ink: #ffffff; --s-on-a: #d9a53a; --s-on-b: #b98424; --s-on-ink: #1c1405; color-scheme: light;
}
:root[data-soft="sage"] { --s-bg: #e4e9e0; --s-surface: #ecf0e8; --s-paper: #f6f8f2; --s-ink: #2f3a33; --s-muted: #566054; --s-gold: #73836a; --s-gold-text: #4f5f47; --s-line: #cdd5c9; --s-lo: #bdc7b8; --s-hi: #ffffff; --s-edge: #ffffff4d; --s-accent: #4a7a5e; --s-accent-ink: #ffffff; --s-rose: #efe0da; --s-alarm: #b3263a; --s-green-text: #2f6a4a; --s-on-a: #2f8358; --s-on-b: #1e6340; --s-on-ink: #ffffff; }
:root[data-soft="midnight"] { --s-bg: #242c29; --s-surface: #2c3530; --s-paper: #333d36; --s-ink: #eee9de; --s-muted: #b2b8a9; --s-gold: #cfb782; --s-gold-text: #d9c497; --s-line: #465047; --s-lo: #111a16; --s-hi: #3b4539; --s-edge: #ffffff14; --s-accent: #cfb782; --s-accent-ink: #1d1a12; --s-rose: #513d37; --s-alarm: #ff9aa5; --s-green-text: #b4d3b7; --s-on-a: #f0c35a; --s-on-b: #d49b2c; --s-on-ink: #1d1a12; color-scheme: dark; }
:root[data-soft="champagne"] { --s-bg: #ebe5da; --s-surface: #f1ece3; --s-paper: #faf6ee; --s-ink: #362f25; --s-muted: #5d5446; --s-gold: #b8975f; --s-gold-text: #6d5228; --s-line: #d8cfbf; --s-lo: #c9bfb0; --s-hi: #fffaf1; --s-edge: #ffffff4d; --s-accent: #b8975f; --s-accent-ink: #231c12; --s-rose: #f3dfd8; --s-alarm: #b3263a; --s-green-text: #2f6a4a; --s-on-a: #dcaa45; --s-on-b: #b8862a; --s-on-ink: #231c12; }
:root[data-soft="stone"] { --s-bg: #dedbd7; --s-surface: #e6e3df; --s-paper: #f3f1ee; --s-ink: #34352f; --s-muted: #55554f; --s-gold: #c9a35a; --s-gold-text: #6b5523; --s-line: #cbc7c1; --s-lo: #b8b5b1; --s-hi: #faf9f6; --s-edge: #ffffff4d; --s-accent: #c9a35a; --s-accent-ink: #2b2a25; --s-rose: #efdcd6; --s-alarm: #b3263a; --s-green-text: #2f6a4a; --s-on-a: #d9a744; --s-on-b: #b5832a; --s-on-ink: #2b2a25; }
:root[data-soft="pearl"] { --s-bg: #eff0f0; --s-surface: #f5f6f6; --s-paper: #ffffff; --s-ink: #2f333a; --s-muted: #5b5f66; --s-gold: #3b6fc4; --s-gold-text: #2a548f; --s-line: #d9dcdf; --s-lo: #cfd2d6; --s-hi: #ffffff; --s-edge: #ffffff80; --s-accent: #3b6fc4; --s-accent-ink: #ffffff; --s-rose: #f6e3e1; --s-alarm: #b3263a; --s-green-text: #2f6a4a; --s-on-a: #2f6fdc; --s-on-b: #1f4fb0; --s-on-ink: #ffffff; }
:root[data-soft="graphite"] { --s-bg: #2e3239; --s-surface: #353a42; --s-paper: #3c414a; --s-ink: #eceef2; --s-muted: #aab0ba; --s-gold: #d6b98a; --s-gold-text: #d6b98a; --s-line: #4a505a; --s-lo: #1d2025; --s-hi: #3f444d; --s-edge: #ffffff14; --s-accent: #d6b98a; --s-accent-ink: #1d1a14; --s-rose: #4d3a3a; --s-alarm: #ff9aa5; --s-green-text: #a8d5b8; --s-on-a: #f2c66a; --s-on-b: #d39d3c; --s-on-ink: #1d1a14; color-scheme: dark; }
:root[data-soft="kitchen"] { --s-bg: #15171b; --s-surface: #1d2025; --s-paper: #23272d; --s-ink: #ffffff; --s-muted: #d2d7df; --s-gold: #ffc94d; --s-gold-text: #ffd77a; --s-line: #ffffff33; --s-lo: #000000; --s-hi: #2a2e35; --s-edge: #ffffff33; --s-accent: #ffc94d; --s-accent-ink: #1a1300; --s-rose: #4a2228; --s-alarm: #ff9aa5; --s-green-text: #a8d5b8; --s-on-a: #ffcf3d; --s-on-b: #f0a800; --s-on-ink: #1a1300; color-scheme: dark; }
/* the shared shell's panel, search and account menu follow the Soft theme on Soft pages */
:root[data-soft][data-soft] { --a-bg: var(--s-bg); --a-panel: var(--s-paper); --a-tile: var(--s-surface); --a-tile2: var(--s-paper); --a-field: var(--s-surface); --a-text: var(--s-ink); --a-muted: var(--s-muted);
  --a-gold: var(--s-gold-text); --a-line: var(--s-line); --a-edge: var(--s-line); --a-heading-font: "Cormorant Garamond"; --a-ui-font: "DM Sans"; }

.soft, .soft *, .soft *::before, .soft *::after { box-sizing: border-box; }
body.soft { margin: 0; min-height: 100vh; background: var(--s-bg); color: var(--s-ink); font: 400 14px/1.5 "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
:where(.soft) button, :where(.soft) input, :where(.soft) select, :where(.soft) textarea { font: inherit; color: inherit; }
.soft [hidden] { display: none !important; }
.soft :focus-visible { outline: 2px solid var(--s-gold); outline-offset: 2px; }
.soft a { color: var(--s-gold-text); }
.soft a:hover { color: var(--s-ink); }
.s-serif, .soft h1, .soft h2, .soft h3 { font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif; font-weight: 500; }
.soft h1, .soft h2, .soft h3 { margin: 0; letter-spacing: -.01em; line-height: 1.1; }
.soft h1 em, .soft h2 em { color: var(--s-gold-text); font-style: italic; }
.s-eyebrow { text-transform: uppercase; font-size: 10.5px; letter-spacing: .18em; color: var(--s-muted); font-weight: 600; }
.s-muted { color: var(--s-muted); }
.s-num { font-variant-numeric: tabular-nums; }

/* raised and pressed parts */
.s-card { background: linear-gradient(145deg, var(--s-paper), var(--s-surface)); border: 1px solid var(--s-edge); border-radius: 22px; box-shadow: 8px 8px 22px var(--s-lo), -8px -8px 22px var(--s-hi); }
.s-panel { background: var(--s-surface); border-radius: 20px; box-shadow: 7px 7px 18px var(--s-lo), -7px -7px 18px var(--s-hi); }
.s-well { background: var(--s-surface); box-shadow: inset 3px 3px 8px var(--s-lo), inset -3px -3px 8px var(--s-hi); border-radius: 14px; }
.s-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 12px; background: var(--s-surface); color: var(--s-ink); min-height: 44px; padding: 0 16px;
  font-size: 13px; cursor: pointer; text-decoration: none; box-shadow: 4px 4px 10px var(--s-lo), -4px -4px 10px var(--s-hi); white-space: nowrap; }
.s-btn:hover { color: var(--s-ink); background: var(--s-paper); }
.s-btn:active, .s-btn[aria-pressed="true"], .s-btn[aria-expanded="true"] { box-shadow: inset 3px 3px 8px var(--s-lo), inset -3px -3px 8px var(--s-hi); color: var(--s-gold-text); font-weight: 600; }
.s-btn:disabled { opacity: .55; cursor: default; }
.s-acc { background: var(--s-accent); color: var(--s-accent-ink); font-weight: 600; box-shadow: 0 5px 14px var(--s-lo); }
.s-acc:hover { background: var(--s-accent); color: var(--s-accent-ink); filter: brightness(1.06); }
.soft a.s-btn { color: var(--s-ink); } .soft a.s-acc, .soft a.s-acc:hover { color: var(--s-accent-ink); } .soft a.s-go, .soft a.s-go:hover { color: var(--s-go-ink); }   /* v1.117: links styled as buttons keep the button's text colour */
.s-go { background: var(--s-go); color: var(--s-go-ink); font-weight: 600; box-shadow: 0 5px 12px #1d5a3a40; }
.s-go:hover { background: var(--s-go); color: var(--s-go-ink); filter: brightness(1.1); }
.s-big { min-height: 52px; font-size: 15px; border-radius: 14px; width: 100%; }
.s-link { border: 0; background: transparent; color: var(--s-muted); min-height: 44px; padding: 0 4px; cursor: pointer; font-size: 13px; }
.s-link:hover { color: var(--s-gold-text); }
.s-chip { height: 38px; padding: 0 13px; border: 1px solid var(--s-line); border-radius: 999px; background: var(--s-paper); color: var(--s-ink); font-size: 12.5px; cursor: pointer; }
.s-chip:hover { border-color: var(--s-gold); }
.s-field { display: flex; flex-direction: column; gap: 7px; font-size: 12px; color: var(--s-muted); }
.s-field input, .s-field select, .s-field textarea { min-height: 50px; border: 1px solid var(--s-line); border-radius: 12px; padding: 0 15px; background: var(--s-surface); color: var(--s-ink); font-size: 15px; outline: none;
  box-shadow: inset 3px 3px 8px var(--s-lo), inset -3px -3px 8px var(--s-hi); }
.s-field input:focus { border-color: var(--s-gold); }
.s-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--s-surface); box-shadow: inset 3px 3px 8px var(--s-lo), inset -3px -3px 8px var(--s-hi); flex-wrap: wrap; }
.s-seg button { border: 0; background: transparent; color: var(--s-muted); border-radius: 8px; padding: 0 12px; min-height: 34px; font-size: 12px; cursor: pointer; }
.s-seg button[aria-pressed="true"] { background: var(--s-paper); color: var(--s-ink); font-weight: 600; box-shadow: 1px 2px 5px #00000014; }
.s-count { font-size: 11px; border: 1px solid var(--s-line); padding: 2px 9px; border-radius: 20px; color: var(--s-gold-text); white-space: nowrap; }

/* badges: a symbol and a word, always (never colour alone) */
.s-bdg { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 2px 9px 2px 7px; border-radius: 7px; font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; align-self: flex-start; border: 0; }
.s-bdg svg { width: 13px; height: 13px; flex: none; }
.s-bdg.ok { background: #dff3e8; color: #1d6b43; } .s-bdg.warn { background: #fde9cc; color: #7a4900; } .s-bdg.bad { background: #fadde1; color: #97202f; }
.s-bdg.info { background: #dde7fb; color: #224c99; } .s-bdg.unk { background: #e8eaed; color: #454b54; } .s-bdg.bill { background: #efe1c4; color: #5a3f12; }
.s-pill { display: inline-flex; align-items: center; min-height: 26px; padding: 0 11px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; flex: none; }
.s-pill.warn { background: #f3e3c3; color: #6e4a10; } .s-pill.info { background: #dfe6ec; color: #2f4a63; } .s-pill.ok { background: #dcebdc; color: #2c5d3a; } .s-pill.bad { background: #f6d6db; color: #8a1f2e; }

/* header status icons: grey until signed in, then a green dot (KS, R4) */
.s-ibtn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; position: relative; background: var(--s-surface); color: var(--s-ink); border: 0; padding: 0;
  box-shadow: 5px 5px 12px var(--s-lo), -5px -5px 12px var(--s-hi); flex: none; cursor: default; }
.s-ibtn svg { width: 19px; height: 19px; }
.s-ibtn i { position: absolute; top: 5px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: #9aa0a8; border: 2px solid var(--s-surface); }
.s-ibtn[data-state="ok"] i { background: #3fbf7f; } .s-ibtn[data-state="warn"] i { background: #f0a43a; } .s-ibtn[data-state="bad"] i { background: #e5566b; }
.s-ibtn[data-state="off"] { opacity: .55; }

/* status tiles: the picture icon top right, a bucket that fills by status */
.s-stat { position: relative; overflow: hidden; padding: 16px 18px; border-radius: 18px; text-align: left; border: 0; color: inherit; }
.s-stat > * { position: relative; }
.s-stat > .s-bucket { position: absolute; left: 0; right: 0; bottom: 0; transition: height .6s ease; background: linear-gradient(0deg, #f0a43a33, #f0a43a10); pointer-events: none; }
.s-stat > .s-bucket.ok { background: linear-gradient(0deg, #3fbf7f30, #3fbf7f0c); } .s-stat > .s-bucket.bad { background: linear-gradient(0deg, #e5566b33, #e5566b10); } .s-stat > .s-bucket.info { background: linear-gradient(0deg, #5b8def30, #5b8def0c); }
.s-stat .s-label { font-size: 11.5px; color: var(--s-muted); display: flex; align-items: center; gap: 8px; padding-right: 44px; }
.s-stat .s-val { font-family: "Cormorant Garamond", Georgia, serif; font-size: 32px; line-height: 1.15; margin: 8px 0 6px; font-variant-numeric: tabular-nums; }
.s-stat .s-val small { font-family: "DM Sans", sans-serif; font-size: 12.5px; color: var(--s-muted); }
.s-stat .s-trend { font-size: 11.5px; color: var(--s-green-text); font-weight: 600; }
.s-stat .s-trend.down { color: var(--s-alarm); }
.s-stat .s-trend span { color: var(--s-muted); font-weight: 400; margin-left: 4px; }
.s-pic { position: absolute; right: 12px; top: 10px; width: 40px; height: 40px; overflow: visible; }
.s-pic svg { width: 100%; height: 100%; overflow: visible; }

/* the left rail (desktop and tablet), the top bar, the phone tab bar */
.s-app { display: flex; min-height: 100vh; }
.s-rail { width: 92px; flex: none; display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 18px 8px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.s-mark { width: 46px; height: 46px; margin: 0 auto 14px; display: grid; place-items: center; border: 1px solid var(--s-gold); border-radius: 50%; color: var(--s-gold-text); font: 26px "Cormorant Garamond", Georgia, serif;
  text-decoration: none; box-shadow: inset 0 0 0 4px var(--s-bg), inset 0 0 0 5px var(--s-line); flex: none; }
.s-nav { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 11px 3px; border-radius: 16px; color: var(--s-muted); text-decoration: none; font-size: 11px; letter-spacing: .02em; text-align: center;
  border: 0; background: transparent; cursor: pointer; line-height: 1.2; }
.s-nav svg { width: 22px; height: 22px; }
.soft .s-nav:hover { color: var(--s-ink); background: var(--s-surface); }
/* v1.116 (KS, 29 Oct, canvas comment "Enabled one should be colourful"): the menu item you are on is filled with the theme's
   strong colour; the others stay plain grey line icons */
.soft .s-nav[aria-current="page"] { background: linear-gradient(145deg, var(--s-on-a), var(--s-on-b)); color: var(--s-on-ink); font-weight: 700;
  box-shadow: 0 6px 14px var(--s-lo), inset 0 1px 0 #ffffff59; }
.soft .s-nav[aria-current="page"]:hover { color: var(--s-on-ink); filter: brightness(1.05); }
.s-rail .s-grow { flex: 1; }
.s-main { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 20px 32px 16px 18px; gap: 20px; }
.s-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 0 52px 14px 0; border-bottom: 1px solid var(--s-line); }
.s-word { letter-spacing: .3em; font: 17px "Cormorant Garamond", Georgia, serif; color: var(--s-gold-text); }
/* v1.120 KS's logo: the colour symbol is the rail mark; the AURELIA wordmark is drawn in the theme's ink (the word stays in the
   page for screen readers); the animated symbol (AureliaSoft.voice) shows wherever Aurelia speaks. All TRANSPARENT on every
   theme — no black tile or chip behind them (KS, 30 Oct) */
.s-mark { border: 0; background: none; box-shadow: none; font-size: 0; }
.s-mark .s-sym, .s-mark img { width: 44px; height: 44px; display: block; }
.s-word { display: inline-block; width: 124px; height: 16px; font-size: 0; letter-spacing: 0; color: transparent; overflow: hidden; background: var(--s-ink); flex: none;
  -webkit-mask: url(/assets/brand/aurelia-wordmark.png) left center / contain no-repeat; mask: url(/assets/brand/aurelia-wordmark.png) left center / contain no-repeat; }
.s-aur { display: inline-block; flex: none; vertical-align: middle; line-height: 0; }
.s-aur img { width: 100%; height: 100%; display: block; }
.s-search .s-aur { margin-left: -4px; }
h2 .s-aur, h3 .s-aur, h2 .s-sym, .s-well .s-aur { margin-right: 6px; vertical-align: -4px; }
.dcard .cat .s-aur { margin: -2px 0; }   /* the 18 px symbol takes no more height than the line's 14 px (Round 5c fit) */
.s-search { flex: 1; min-width: 200px; max-width: 560px; display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 14px; border: 0; border-radius: 14px; background: var(--s-surface); color: var(--s-muted);
  box-shadow: inset 3px 3px 8px var(--s-lo), inset -3px -3px 8px var(--s-hi); cursor: text; font-size: 13.5px; text-align: left; }
.s-search kbd { margin-left: auto; font: 11px "DM Sans", sans-serif; color: var(--s-muted); border: 1px solid var(--s-line); border-radius: 6px; padding: 1px 6px; }
.s-who { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--s-accent); color: var(--s-accent-ink); font-weight: 700; font-size: 13px; flex: none; }
.s-tabs { display: none; }
.s-foot { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--s-line); padding-top: 12px; font-size: 11.5px; flex-wrap: wrap; }
.s-swatch { width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 2px solid var(--s-bg); cursor: pointer; box-shadow: 0 0 0 1px var(--s-line); }
.s-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--s-gold); }
.s-clock { padding: 5px 12px; border-radius: 10px; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; width: 10.5ch; white-space: nowrap; overflow: hidden; text-align: center; display: inline-block; box-sizing: content-box; }

/* rows, lists */
.s-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.s-kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; padding: 12px 14px; font-size: 12.5px; }
.s-kv b { text-align: right; font-weight: 600; }
.s-alert { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; padding: 12px 14px; border: 0; border-radius: 16px; background: var(--s-surface); color: var(--s-ink); cursor: pointer; text-decoration: none;
  box-shadow: 6px 6px 16px var(--s-lo), -6px -6px 16px var(--s-hi); }
.s-alert.urgent { background: var(--s-rose); }
.s-alert strong { display: block; font-size: 13.5px; }
.s-aicon { width: 50px; height: 50px; border-radius: 16px; background: var(--s-paper); display: grid; place-items: center; flex: none; box-shadow: inset 2px 2px 6px var(--s-lo), inset -2px -2px 6px var(--s-hi); }
.s-aicon svg { width: 38px; height: 38px; overflow: visible; }
.s-empty { border: 1px dashed var(--s-line); border-radius: 20px; padding: 24px 18px; text-align: center; color: var(--s-muted); }
.s-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--s-paper); color: var(--s-ink); border-radius: 14px; padding: 12px 18px; z-index: 9999;
  max-width: min(440px, 92vw); box-shadow: 8px 8px 22px var(--s-lo), -4px -4px 14px var(--s-hi); font-size: 13.5px; }

/* the animated picture icons (fire = busy/peak, fog = uncertain, frost = cold, sun = calm, lightning = urgent, hourglass =
   waiting, rising wind = trend up, thermometer = reading); still pictures with reduced motion — the badge word says it too */
.s-cc { transform-box: fill-box; transform-origin: 50% 50%; }
.s-f1, .s-f2, .s-fglow { transform-box: fill-box; transform-origin: 50% 100%; }
.s-f1 { animation: s-flick 1.7s ease-in-out infinite; } .s-f2 { animation: s-flick2 1.25s ease-in-out infinite; } .s-fglow { animation: s-fpulse 1.6s ease-in-out infinite; }
@keyframes s-flick { 0%, 100% { transform: scale(1, 1) skewX(0); } 25% { transform: scale(.96, 1.06) skewX(2deg); } 50% { transform: scale(1.03, .95) skewX(-2deg); } 75% { transform: scale(.98, 1.04) skewX(1deg); } }
@keyframes s-flick2 { 0%, 100% { transform: scale(1, 1) skewX(0); } 30% { transform: scale(1.04, .94) skewX(-3deg); } 60% { transform: scale(.95, 1.07) skewX(3deg); } }
@keyframes s-fpulse { 0%, 100% { opacity: .45; transform: scale(1); } 50% { opacity: .8; transform: scale(1.08); } }
.s-ember { animation: s-ember 2.2s ease-out infinite; opacity: 0; } .s-ember.e2 { animation-delay: .7s; }
@keyframes s-ember { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-22px); opacity: 0; } }
.s-cloud { animation: s-drift 5s ease-in-out infinite alternate; }
@keyframes s-drift { from { transform: translateX(-3px); } to { transform: translateX(4px); } }
.s-fog1 { animation: s-fog 4s ease-in-out infinite alternate; } .s-fog2 { animation: s-fog 4s ease-in-out 1.2s infinite alternate; }
@keyframes s-fog { from { opacity: .35; transform: translateX(-4px); } to { opacity: .9; transform: translateX(5px); } }
.s-glow { animation: s-glow 3s ease-in-out infinite; }
@keyframes s-glow { 0%, 100% { opacity: .3; } 50% { opacity: .7; } }
.s-spin { animation: s-spin 14s linear infinite; } .s-spin2 { animation: s-spin 24s linear infinite; }
@keyframes s-spin { to { transform: rotate(360deg); } }
.s-turn { animation: s-turn 3.2s ease-in-out infinite; }
@keyframes s-turn { 0%, 75% { transform: rotate(0); } 100% { transform: rotate(180deg); } }
.s-merc { transform-box: fill-box; transform-origin: 50% 100%; animation: s-merc 2.6s ease-in-out infinite alternate; }
@keyframes s-merc { from { transform: scaleY(.7); } to { transform: scaleY(1); } }
.s-flash { animation: s-flash 2.4s ease-in-out infinite; }
@keyframes s-flash { 0%, 70%, 100% { opacity: 1; } 76% { opacity: .25; } 82% { opacity: 1; } 88% { opacity: .4; } }
.s-rise { animation: s-rise 1.8s ease-in-out infinite alternate; }
@keyframes s-rise { from { transform: translateY(3px); } to { transform: translateY(-4px); } }
.s-wind { stroke-dasharray: 8 6; animation: s-wind 1.4s linear infinite; }
@keyframes s-wind { to { stroke-dashoffset: -28; } }
.s-sit { animation: s-sit 2.8s ease-in-out infinite; }
@keyframes s-sit { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(2px); } }
.s-queue { animation: s-shuffle 3s ease-in-out infinite; }
@keyframes s-shuffle { 0%, 70%, 100% { transform: translateX(0); } 80% { transform: translateX(3px); } }
.s-steam path { animation: s-steam 2.2s ease-in-out infinite; } .s-steam path:nth-child(2) { animation-delay: .7s; }
@keyframes s-steam { 0% { opacity: 0; transform: translateY(4px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6px); } }
.s-spark { transform-box: fill-box; transform-origin: 50% 50%; animation: s-twinkle 2.4s ease-in-out infinite; }
@keyframes s-twinkle { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.18) rotate(18deg); } }
@media (prefers-reduced-motion: reduce) {
  .soft *, .soft *::before, .soft *::after { animation: none !important; transition: none !important; }
  .s-ember { opacity: 0; }
}
:root[data-motion="still"] .soft *, :root[data-motion="still"] .soft *::before { animation: none !important; }

/* tablet: the rail stays, slimmer; phone: tabs at the bottom, no rail */
@media (max-width: 1199px) { .s-main { padding: 16px 18px 14px 10px; } .s-rail { width: 80px; } }
@media (max-width: 767px) {
  .s-rail { display: none; }
  .s-main { padding: 14px 16px calc(92px + env(safe-area-inset-bottom, 0px)); gap: 16px; }
  .s-top { gap: 10px; } .s-top .s-word, .s-top .s-hide-phone { display: none; }
  .s-search { order: 9; min-width: 100%; }
  .s-tabs { display: flex; gap: 4px; position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 40; padding: 6px; border-radius: 20px; background: var(--s-surface);
    box-shadow: 6px 6px 16px var(--s-lo), -6px -6px 16px var(--s-hi); }
  .s-tabs .s-nav { flex: 1; padding: 8px 0; min-height: 52px; }
  .s-foot .s-hide-phone { display: none; }
}

/* v1.117 — KS's Round 5c layout (29 Oct 2026, accepted): actions first on the page; a DOCK at the bottom (role items, theme,
   clock); a SIDE TRAY (owner/manager: Set up + Connections; others: Details · Status · Activity); a BOTTOM SHEET that rises
   with details (drag up for all); an ACCOUNT menu on the avatar; connection icons only when something is wrong; a + button
   with each role's quick actions. Tablet and desktop screens fit without scrolling; the phone scrolls. */
.s-av { display: flex; align-items: center; gap: 9px; border: 0; background: transparent; padding: 0 4px 0 0; cursor: pointer; color: var(--s-ink); min-height: 44px; text-align: left; font: inherit; }
.s-av .c { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; position: relative; flex: none;
  background: linear-gradient(145deg, var(--s-on-a), var(--s-on-b)); box-shadow: 0 4px 10px #00000030, inset 0 1px 0 #ffffff55; }
.s-av .c i { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: #3fbf7f; border: 2px solid var(--s-bg); }
.s-av b { display: block; font-size: 13px; } .s-av small { display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--s-muted); }
.s-me { position: fixed; z-index: 60; top: 70px; right: 24px; width: 330px; padding: 14px; border-radius: 20px; background: var(--s-paper); border: 1px solid var(--s-line); box-shadow: 0 18px 40px #00000033; display: flex; flex-direction: column; gap: 2px; }
.s-me .mi { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: transparent; border-radius: 12px; min-height: 46px; padding: 6px 10px; font: inherit; font-size: 13px; color: var(--s-ink); cursor: pointer; text-align: left; text-decoration: none; }
.s-me .mi:hover { background: var(--s-surface); } .s-me .mi small { display: block; color: var(--s-muted); font-size: 11px; } .s-me .mi svg { flex: none; color: var(--s-gold-text); }
.s-ibtn[data-state="bad"], .s-ibtn[data-state="warn"] { cursor: pointer; } .s-ibtn[data-state="bad"] { background: #fadde1; color: #97202f; }
.s-ibtn[data-state="bad"] i { animation: s-pulse 1.6s ease-in-out infinite; }
@keyframes s-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
.s-dock { position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 30; display: flex; align-items: flex-end; gap: 4px; padding: 7px 10px; border-radius: 22px; max-width: calc(100vw - 220px);
  background: color-mix(in srgb, var(--s-paper) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--s-line); box-shadow: 0 10px 28px #00000026; }
.s-dock .di { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 62px; padding: 4px 6px; border: 0; background: transparent; color: var(--s-ink); font: inherit; font-size: 10.5px; cursor: pointer; text-decoration: none; border-radius: 12px; white-space: nowrap; }
.s-dock .di:hover { background: var(--s-surface); }
.s-dock .dic { position: relative; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--s-surface); box-shadow: 3px 3px 8px var(--s-lo), -3px -3px 8px var(--s-hi); }
.s-dock .dic b { position: absolute; top: -6px; right: -7px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #c9302c; color: #fff; font-size: 10px; display: grid; place-items: center; }
.s-dock .sep { width: 1px; align-self: stretch; background: var(--s-line); margin: 4px 4px; }
.s-dock .s-clock { align-self: center; }
.s-tray { position: fixed; top: 0; right: 0; bottom: 0; width: 440px; max-width: 100%; z-index: 50; display: flex; flex-direction: column; gap: 12px; padding: 18px 0 16px; background: var(--s-paper);
  border-left: 1px solid var(--s-line); box-shadow: -16px 0 36px #00000029; transform: translateX(106%); transition: transform .28s ease; visibility: hidden; }
.s-tray.on { transform: none; visibility: visible; }
.s-tray .th { display: flex; align-items: flex-start; gap: 10px; padding: 0 18px; } .s-tray .th > div { flex: 1; min-width: 0; } .s-tray h2 { font-size: 28px; line-height: 1.1; margin: 3px 0 0; }
.s-tray .s-seg { margin: 0 18px; display: flex; } .s-tray .s-seg button { flex: 1; }
.s-tray .tb { flex: 1; min-height: 0; overflow-y: auto; padding: 0 18px 24px; display: flex; flex-direction: column; gap: 10px; }
.s-handle { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 29; width: 24px; height: 104px; border: 0; border-radius: 13px 0 0 13px; background: var(--s-surface); box-shadow: -5px 0 14px var(--s-lo); cursor: pointer; display: grid; place-items: center; color: var(--s-muted); padding: 0; }
.s-acd { border-top: 1px solid var(--s-line); } .s-acd summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 48px; cursor: pointer; font-size: 13px; font-weight: 600; }
.s-acd summary::-webkit-details-marker { display: none; } .s-acd summary .chev { transition: transform .2s; color: var(--s-muted); } .s-acd[open] summary .chev { transform: rotate(90deg); }
.s-acd summary .ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--s-surface); box-shadow: 3px 3px 8px var(--s-lo), -3px -3px 8px var(--s-hi); color: var(--s-gold-text); flex: none; }
.s-rows { display: flex; flex-direction: column; } .s-rows > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 12.5px; border-top: 1px solid var(--s-line); }
.s-rows > div:first-child { border-top: 0; } .s-rows > div > span:first-child { color: var(--s-muted); } .s-rows > div > span:last-child { text-align: right; font-weight: 600; }
.s-sheet { position: fixed; right: 0; bottom: 0; left: 92px; z-index: 45; background: var(--s-paper); border-top: 1px solid var(--s-line); border-radius: 24px 24px 0 0; box-shadow: 0 -14px 34px #00000030;
  display: flex; flex-direction: column; overflow: hidden; transition: height .22s ease; height: 340px; }
.s-sheet.drag { transition: none; }
.s-sheet .grip { border: 0; background: transparent; cursor: grab; touch-action: none; display: flex; align-items: center; justify-content: center; height: 22px; width: 100%; padding: 0; flex: none; }
.s-sheet .grip span { width: 52px; height: 5px; border-radius: 3px; background: var(--s-line); }
.s-sheet .sh { display: flex; align-items: center; gap: 12px; padding: 0 24px 10px; } .s-sheet .sh > div { flex: 1; min-width: 0; } .s-sheet h2 { font-size: 28px; line-height: 1.05; margin: 2px 0 0; }
.s-sheet .sb { flex: 1; min-height: 0; overflow-y: auto; padding: 0 24px 18px; }
.s-sgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; align-content: start; }
.s-scard { border-radius: 16px; padding: 10px 14px; background: var(--s-surface); box-shadow: inset 2px 2px 6px var(--s-lo), inset -2px -2px 6px var(--s-hi); min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.s-acd summary .s-bdg, .s-scard h3 .s-bdg { align-self: center; flex: none; }
.s-scard h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font: 700 13px "DM Sans", system-ui, sans-serif; } .s-scard h3 span { flex: 1; }
.s-fab { position: fixed; z-index: 31; right: 30px; bottom: 16px; width: 62px; height: 62px; border-radius: 50%; border: 0; cursor: pointer; background: linear-gradient(145deg, var(--s-on-a), var(--s-on-b)); color: var(--s-on-ink);
  box-shadow: 0 12px 26px #00000045, inset 0 1px 0 #ffffff66; display: grid; place-items: center; transition: transform .22s; }
.s-fab[aria-expanded="true"] { transform: rotate(45deg); }
.s-scrim { position: fixed; inset: 0; z-index: 30; border: 0; background: #00000022; cursor: default; }
.s-rad { position: fixed; z-index: 32; display: flex; align-items: center; gap: 10px; border: 0; background: transparent; cursor: pointer; font: inherit; color: var(--s-ink); text-decoration: none; flex-direction: row-reverse; }
.s-rad .ri { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--s-paper); box-shadow: 0 6px 16px #00000035; color: var(--s-gold-text); }
.s-rad .rl { padding: 6px 11px; border-radius: 10px; background: var(--s-paper); box-shadow: 0 4px 12px #00000025; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.soft.s-fit { overflow: hidden; } .soft.s-fit .s-app { height: 100vh; min-height: 0; } .soft.s-fit .s-main { height: 100vh; overflow-y: auto; padding-bottom: 92px; }  /* laid out to fit; auto only as a fallback for unusual data */
@media (prefers-reduced-motion: reduce) { .s-tray, .s-sheet, .s-fab { transition: none; } .s-ibtn[data-state="bad"] i { animation: none; } }
@media (max-width: 1199px) { .s-sheet { left: 80px; } .s-dock { max-width: calc(100vw - 180px); } .s-dock .di { min-width: 54px; } }
@media (max-width: 767px) { .s-dock { display: none; } .s-sheet { left: 0; } .s-tray { width: 100%; } .s-fab { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); right: 18px; }
  .soft.s-fit { overflow: auto; } .soft.s-fit .s-app, .soft.s-fit .s-main { height: auto; overflow: visible; } .s-me { left: 12px; right: 12px; width: auto; } }
.s-nod { transform-box: fill-box; transform-origin: 50% 100%; animation: s-nod 2.6s ease-in-out infinite; } .s-nod.n2 { animation-delay: 1.3s; }
@keyframes s-nod { 0%, 100% { transform: translateY(0) rotate(0); } 40% { transform: translateY(-2px) rotate(-6deg); } 60% { transform: translateY(-1px) rotate(4deg); } }
.s-walk { animation: s-walk 1.6s ease-in-out infinite alternate; } @keyframes s-walk { from { transform: translateX(-4px); } to { transform: translateX(4px); } }
.s-leg { transform-box: view-box; transform-origin: 31px 36px; animation: s-leg .8s ease-in-out infinite alternate; } .s-leg.l2 { animation-direction: alternate-reverse; }
@keyframes s-leg { from { transform: rotate(-20deg); } to { transform: rotate(20deg); } }
.s-dash { animation: s-dash .8s linear infinite; } @keyframes s-dash { 0%, 100% { opacity: .15; } 50% { opacity: .8; } }
@media (prefers-reduced-motion: reduce) { .s-nod, .s-walk, .s-leg, .s-dash { animation: none; } }

/* v1.127 KS's Black atmosphere (owner prototype v159, 30 Oct): true black, neutral greys, the same gold accents */
:root[data-soft="black"] { --s-bg: #000000; --s-surface: #121212; --s-paper: #1a1a1a; --s-ink: #f2f2f0; --s-muted: #a6a6a2; --s-gold: #d4b97a; --s-gold-text: #e0c98f; --s-line: #2e2e2e; --s-lo: #000000; --s-hi: #262626; --s-edge: #ffffff14; --s-accent: #d4b97a; --s-accent-ink: #15120b; --s-alarm: #ff8f9b;
  --s-rose: #3a2a2a; --s-green-text: #b4d3b7; --s-go: #2f8358; --s-go-ink: #ffffff; --s-on-a: #f0c35a; --s-on-b: #d49b2c; --s-on-ink: #15120b; --ok: #1f3a2a; --warn: #3d321a; --bad: #4a2430; --info: #22303b; --stage: #0a0a0a; color-scheme: dark; }

/* v1.135 All apps inside Today (aurelia-apps.js; KS 31 Oct: no Control Centre — its parts move into Today) */
.ap-wrap { position: fixed; inset: 0; z-index: 90; display: flex; align-items: stretch; justify-content: flex-end; }
.ap-scrim { position: absolute; inset: 0; background: rgba(20, 18, 14, .32); backdrop-filter: blur(2px); }
.ap-panel { position: relative; width: min(760px, 100%); height: 100%; overflow-y: auto; background: var(--s-bg, #eeebe4); color: var(--s-ink, #1f1d1a); box-shadow: -18px 0 40px rgba(0, 0, 0, .18); padding: 22px 26px 26px; font-family: "DM Sans", system-ui, sans-serif; }
.ap-panel.ap-small { width: min(520px, 100%); }
.ap-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.ap-head h2 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: 34px; margin: 0; line-height: 1.1; }
.ap-eye { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--s-gold-text, #8a6d33); min-height: 14px; }
.ap-x { border: 0; background: var(--s-surface, #f6f4ef); color: inherit; width: 36px; height: 36px; border-radius: 50%; font-size: 22px; line-height: 1; cursor: pointer; box-shadow: 3px 3px 8px var(--s-lo, rgba(0,0,0,.12)), -3px -3px 8px var(--s-hi, rgba(255,255,255,.7)); }
.ap-sec h3, .ap-panel h3 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: 22px; margin: 18px 0 8px; }
.ap-muted { color: var(--s-muted, #6b665d); font-size: 13px; }
.ap-foot { margin-top: 22px; font-size: 11px; letter-spacing: .14em; color: var(--s-muted, #6b665d); }
.ap-panel .tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ap-panel .tile { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; width: 100%; min-height: 96px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--s-line, #ddd8cd); background: var(--s-surface, #f6f4ef); color: inherit; text-decoration: none; text-align: left; font: inherit; position: relative; box-shadow: 4px 4px 10px var(--s-lo, rgba(0,0,0,.08)), -4px -4px 10px var(--s-hi, rgba(255,255,255,.7)); }
.ap-panel a.tile:hover, .ap-panel a.tile:focus-visible { border-color: var(--s-gold, #b8955a); outline: none; }
.ap-panel .tile .glyph { width: 24px; height: 24px; color: var(--s-gold-text, #8a6d33); }
.ap-panel .tile .lock { position: absolute; right: 12px; top: 12px; width: 15px; height: 15px; color: var(--s-muted, #6b665d); }
.ap-panel .tile-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; }
.ap-panel .tile-name { font-weight: 600; font-size: 14px; display: block; }
.ap-panel .tile-sub { display: block; font-size: 11.5px; color: var(--s-muted, #6b665d); margin-top: 2px; }
.ap-panel .tile.locked, .ap-panel .tile.soon { opacity: .62; cursor: default; box-shadow: none; }
.ap-panel .tile-arrow { color: var(--s-muted, #6b665d); }
.ap-panel .notices { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.ap-panel .notices:empty { display: none; }
.ap-panel .notices li { padding: 9px 12px; border-radius: 10px; border: 1px solid var(--s-gold, #b8955a); font-size: 12.5px; }
.ap-venues { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.ap-venues small { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--s-muted, #6b665d); margin-right: 4px; }
.ap-v, .ap-btn { border: 1px solid var(--s-line, #ddd8cd); background: var(--s-surface, #f6f4ef); color: inherit; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.ap-v[aria-pressed="true"] { border-color: var(--s-gold, #b8955a); font-weight: 600; }
.ap-panel .inbox-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ap-panel .ib a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--s-surface, #f6f4ef); border: 1px solid var(--s-line, #ddd8cd); color: inherit; text-decoration: none; }
.ap-panel .ib.urgent a { border-color: var(--s-alarm, #b4433b); }
.ap-panel .ib-n { font-family: "Cormorant Garamond", Georgia, serif; font-size: 22px; min-width: 26px; text-align: center; }
.ap-panel .ib-t { flex: 1; min-width: 0; } .ap-panel .ib-t b { display: block; font-size: 13.5px; } .ap-panel .ib-t small { color: var(--s-muted, #6b665d); font-size: 12px; }
.ap-panel .cv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.ap-panel .cv { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 14px; background: var(--s-surface, #f6f4ef); border: 1px solid var(--s-line, #ddd8cd); color: inherit; text-decoration: none; font-size: 12.5px; }
.ap-panel .cv-k { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--s-gold-text, #8a6d33); }
.ap-panel .cv-v { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: 24px; }
.ap-panel .cv-s, .ap-panel .cv-m { color: var(--s-muted, #6b665d); } .ap-panel .cv-w, .ap-panel .cv-bad { color: var(--s-alarm, #b4433b); } .ap-panel .cv-ok { color: var(--s-green-text, #2f6b45); }
.ap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-bottom: 10px; }
.ap-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--s-muted, #6b665d); }
.ap-grid select, .ap-grid input[type=range] { font: inherit; font-size: 14px; color: var(--s-ink, #1f1d1a); }
.ap-grid select { padding: 7px 9px; border-radius: 10px; border: 1px solid var(--s-line, #ddd8cd); background: var(--s-paper, #fbfaf7); }
@media (max-width: 767px) { .ap-panel { padding: 16px; } .ap-panel .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ap-panel .tile { min-height: 84px; padding: 10px; } .ap-grid { grid-template-columns: 1fr; } }

/* v1.136 KS (31 Oct): three more owner Atmospheres from KS's reference pictures — GLASS PANEL (smoked warm glass, ivory
   selection), NIGHT GLASS (minimal glassmorphism, night-blue) and MATTE (warm matte frosted panel, monospace capitals).
   Prototype: docs/prototypes/atmospheres-glass-matte-v1.html. */
:root[data-soft="glass"] {
  --s-bg: transparent; --s-surface: rgba(40,38,36,.32); --s-paper: rgba(255,255,255,.10); --s-ink: #ffffff; --s-muted: rgba(250,248,244,.92);
  --s-gold: #f1ece0; --s-gold-text: #f1ece0; --s-line: rgba(255,255,255,.16); --s-lo: transparent; --s-hi: transparent; --s-edge: rgba(255,255,255,.25);
  --s-accent: #f1ece0; --s-accent-ink: #2a2724; --s-alarm: #ffb4a8;
  --ok: rgba(170,230,190,.16); --ok-ink: #c9f0d6; --warn: rgba(255,214,150,.18); --warn-ink: #ffe0b0; --bad: rgba(255,150,140,.18); --bad-ink: #ffd0c8; --info: rgba(200,215,255,.14); --info-ink: #dfe7ff;
  --stage: #3b3631; --lb-ink: #f7f5f0; --logo-fx: brightness(1.15);
  --f-head: "DM Sans", system-ui, sans-serif;
  --ivory: #f1ece0; --ivory-ink: #2a2724; --pane: rgba(52,48,44,.52); --well: rgba(24,22,20,.42); --outline: 1px solid rgba(255,255,255,.38);
  --glass-blur: blur(28px) saturate(120%);
  color-scheme: dark;
}
:root[data-soft="night"] {
  --s-bg: transparent; --s-surface: rgba(255,255,255,.045); --s-paper: rgba(255,255,255,.06); --s-ink: #eef2f9; --s-muted: #bcc5d4;
  --s-gold: #8fb8ff; --s-gold-text: #a9c8ff; --s-line: rgba(255,255,255,.08); --s-lo: transparent; --s-hi: transparent; --s-edge: rgba(255,255,255,.12);
  --s-accent: #7fb0ff; --s-accent-ink: #0b1322; --s-alarm: #ff8fa0;
  --ok: rgba(110,210,160,.12); --ok-ink: #9fe3c0; --warn: rgba(255,190,110,.12); --warn-ink: #ffd49c; --bad: rgba(255,120,140,.12); --bad-ink: #ffb3c0; --info: rgba(130,170,255,.12); --info-ink: #b9d0ff;
  --stage: #0d1424; --lb-ink: #e9eef7; --logo-fx: brightness(1.15) saturate(1.1); --glass-blur: blur(20px) saturate(130%);
  --glass: linear-gradient(160deg, rgba(255,255,255,.075), rgba(255,255,255,.03)); --glass-in: rgba(255,255,255,.04);
  --hair: 1px solid rgba(255,255,255,.09); --toplight: inset 0 1px 0 rgba(255,255,255,.08); --calm-shadow: 0 10px 30px rgba(0,0,0,.28);
  color-scheme: dark;
}
:root[data-soft="matte"] {
  --s-bg: transparent; --s-surface: rgba(240,238,234,.55); --s-paper: rgba(242,240,236,.7); --s-ink: #1c1b19; --s-muted: #5f5b54;
  --s-gold: #1c1b19; --s-gold-text: #1c1b19; --s-line: rgba(28,27,25,.10); --s-lo: transparent; --s-hi: transparent; --s-edge: rgba(255,255,255,.5);
  --s-accent: #1c1b19; --s-accent-ink: #f2f0ec; --s-alarm: #b3263a;
  --ok: rgba(60,110,70,.10); --ok-ink: #2f5d3a; --warn: rgba(150,100,30,.10); --warn-ink: #6e4a10; --bad: rgba(170,40,55,.09); --bad-ink: #8a1f2e; --info: rgba(60,80,110,.08); --info-ink: #2f4a63;
  --stage: #e9e5df; --lb-ink: #7a1418; --logo-fx: saturate(1.25) brightness(.92) drop-shadow(0 0 1px rgba(40,30,20,.35));
  --f-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --matte-blur: blur(36px) saturate(110%);
  color-scheme: light;
}
:root[data-soft="pebble"] {
  --s-bg: transparent; --s-surface: #f7f4ef; --s-paper: #fbf9f6; --s-ink: #34302b; --s-muted: #645d54;
  --s-gold: #e8b9a6; --s-gold-text: #8f4f3a; --s-line: rgba(58,54,49,.08); --s-lo: rgba(120,104,86,.16); --s-hi: #ffffff; --s-edge: #ffffff;
  --s-accent: #f1c7b6; --s-accent-ink: #5a3a2e; --s-alarm: #c0495a;
  --ok: #e6efe4; --ok-ink: #3f6b47; --warn: #f6e8d6; --warn-ink: #8a5a1c; --bad: #f7dcd8; --bad-ink: #9a3340; --info: #e9edf0; --info-ink: #4a5c6c;
  --stage: #cfc8bf; --lb-ink: #7a1418; --logo-fx: saturate(1.25) brightness(.92) drop-shadow(0 0 1px rgba(40,30,20,.35));
  --peach: linear-gradient(160deg, #fbe3d8 0%, #f2c6b4 55%, #e8b09b 100%);
  --pearl: radial-gradient(circle at 35% 30%, #ffffff 0%, #f6ebe4 45%, #e9d6cb 100%);
  --stone: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.40  0 0 0 0 0.35  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"), radial-gradient(circle at 35% 30%, #f6f2ec, #ddd4c8 75%);
  --lift: 0 1px 2px rgba(120,104,86,.08), 0 18px 40px rgba(120,104,86,.16);
  color-scheme: light;
}