/* Mirror visualizer (mirror.html): wall stage with the configured mirror, option chips, room scene to scale.
   Uses tokens.css. Frame materials and LED colours stay the same in both themes: they are physical finishes and light. */
:root{
  --wall:#e4e6eb;
  --wall-light:rgba(255,255,255,.55);
  --wall-line:#d3d6de;
  --floor:#cdbfa6;
  --floor-line:#b9a888;
  --furn:#f7f7f5;
  --furn-edge:#b9bcc6;
  --furn-shade:#dfe1e6;
  --figure:#9ea2b1;
  --glass:#0b0d14;
  --glass-ink:#ffffff;
  /* LED colour temperatures: cold ≈ 6500 K, neutral ≈ 4000 K, warm ≈ 3000 K */
  --led-cold:rgba(196,226,255,.9);
  --led-neutral:rgba(255,246,228,.9);
  --led-warm:rgba(255,190,112,.9);
  --mat-black:linear-gradient(135deg,#3a3c44,#15161b 45%,#2b2d34);
  --mat-white:linear-gradient(135deg,#ffffff,#e3e3e0 50%,#f6f6f4);
  --mat-oak:linear-gradient(135deg,rgba(255,255,255,.2),transparent 50%,rgba(0,0,0,.14)),repeating-linear-gradient(100deg,#c79b69 0 4px,#b68a5b 4px 7px,#d0a675 7px 12px,#ad8152 12px 14px);
  --mat-brass:linear-gradient(135deg,#f1d797,#a9813b 45%,#e3c17b 70%,#9d752f);
  --mat-none:linear-gradient(135deg,#d3d7df,#8b919d);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --wall:#1f2230;
    --wall-light:rgba(255,255,255,.05);
    --wall-line:#2b2f41;
    --floor:#33291f;
    --floor-line:#45392b;
    --furn:#2b2e3f;
    --furn-edge:#4a4e66;
    --furn-shade:#363a4f;
    --figure:#5f6378;
  }
}
:root[data-theme="dark"]{
  --wall:#1f2230;
  --wall-light:rgba(255,255,255,.05);
  --wall-line:#2b2f41;
  --floor:#33291f;
  --floor-line:#45392b;
  --furn:#2b2e3f;
  --furn-edge:#4a4e66;
  --furn-shade:#363a4f;
  --figure:#5f6378;
}

/* ---------- page head ---------- */
.mx-viz-section { padding-top: var(--space-16); }
.mx-viz-h1 { margin: 0; font-size: 48px; line-height: 54px; font-weight: 700; color: var(--ink); text-wrap: balance; }
.mx-section-head .mx-eyebrow { margin-bottom: calc(var(--space-6) * -1 + var(--space-2)); }
@media (max-width: 720px) { .mx-viz-h1 { font-size: 34px; line-height: 40px; } }
.mx-nav-links a[aria-current="page"] { color: var(--accent); }

/* ---------- layout: stage | controls ---------- */
.mx-viz { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-12); align-items: start; }
@media (min-width: 961px) { .mx-viz-stage { position: sticky; top: 96px; } }
@media (max-width: 960px) { .mx-viz { grid-template-columns: minmax(0, 1fr); } }

/* ---------- stage: a piece of wall ---------- */
.mx-viz-stage { display: grid; place-items: center; min-height: 420px; padding: var(--space-12) var(--space-6); background: radial-gradient(ellipse 70% 55% at 50% 35%, var(--wall-light), transparent 70%), var(--wall); border: 1px solid var(--line); overflow: hidden; }
.mx-viz-stage[data-room="bath"] { background: radial-gradient(ellipse 70% 55% at 50% 35%, var(--wall-light), transparent 70%), linear-gradient(var(--wall-line) 1px, transparent 1px) 0 0 / 64px 64px, linear-gradient(90deg, var(--wall-line) 1px, transparent 1px) 0 0 / 64px 64px, var(--wall); }
.mx-viz-stage[data-room="bed"] { background: radial-gradient(ellipse 70% 55% at 50% 35%, var(--wall-light), transparent 70%), repeating-linear-gradient(90deg, transparent 0 46px, var(--wall-line) 46px 48px), var(--wall); }
@media (max-width: 720px) { .mx-viz-stage { min-height: 0; padding: var(--space-8) var(--space-4); } }

/* Mirror with dimension lines: [ . | width ] / [ height | mirror ] */
.mx-viz-figure { display: grid; grid-template-columns: auto minmax(0, max-content); gap: var(--space-3) 64px; max-width: 100%; }
@media (max-width: 720px) { .mx-viz-figure { column-gap: 40px; } }
.mx-viz-figure .mx-viz-dim-w { grid-column: 2; }
.mx-viz-figure .mx-viz-dim-h { grid-column: 1; grid-row: 2; }
.mx-viz-figure .mx-viz-mirror { grid-column: 2; grid-row: 2; }
.mx-viz-dim { display: flex; align-items: center; gap: var(--space-2); font-size: 12px; line-height: 16px; letter-spacing: .06em; color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mx-viz-dim::before, .mx-viz-dim::after { content: ""; flex: 1; block-size: 1px; background: currentColor; opacity: .55; }
.mx-viz-dim-w { border-inline: 1px solid currentColor; height: 12px; }
.mx-viz-dim-h { writing-mode: vertical-rl; transform: rotate(180deg); border-inline: 1px solid currentColor; width: 12px; }

/* ---------- the mirror (shared by the stage and the scene) ---------- */
.mx-viz-mirror { --ratio: .75; --back-glow: 0 0 0 0 transparent; --frame-bg: var(--mat-black);
  position: relative; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); min-height: 0; max-width: 100%;
  padding: var(--frame-px, 14px); background: var(--frame-bg); border-radius: 0;
  box-shadow: var(--back-glow), 0 26px 50px -24px rgba(10, 12, 20, .6), inset 0 0 0 1px rgba(255, 255, 255, .1);
  transition: border-radius .35s ease, box-shadow .35s ease; }
.mx-viz-mirror[data-frame="white"] { --frame-bg: var(--mat-white); }
.mx-viz-mirror[data-frame="oak"] { --frame-bg: var(--mat-oak); }
.mx-viz-mirror[data-frame="brass"] { --frame-bg: var(--mat-brass); }
.mx-viz-mirror[data-frame="none"] { --frame-bg: var(--mat-none); }
/* backlight: halo on the wall */
.mx-viz-mirror[data-back="cold"] { --back: var(--led-cold); }
.mx-viz-mirror[data-back="neutral"] { --back: var(--led-neutral); }
.mx-viz-mirror[data-back="warm"] { --back: var(--led-warm); }
.mx-viz-mirror:not([data-back="off"]) { --back-glow: 0 0 var(--glow-r, 46px) var(--glow-s, 10px) var(--back); }
/* front light: frosted band inside the glass edge */
.mx-viz-mirror[data-front="cold"] { --front: var(--led-cold); }
.mx-viz-mirror[data-front="neutral"] { --front: var(--led-neutral); }
.mx-viz-mirror[data-front="warm"] { --front: var(--led-warm); }

.mx-viz-glass { position: relative; min-height: 0; overflow: hidden; color: var(--glass-ink); container: glass / inline-size;
  background: radial-gradient(120% 70% at 50% 115%, #1c2233 0%, transparent 60%), radial-gradient(60% 40% at 15% 10%, #161b29 0%, transparent 70%), var(--glass); }
/* front light: frosted band, 3 cm wide, 3 cm in from the visible glass edge (placed by JS) */
.mx-viz-band { position: absolute; z-index: 2; pointer-events: none; border: 0 solid var(--front, transparent); opacity: .72; display: none;
  box-shadow: 0 0 var(--band-glow, 12px) var(--front, transparent), inset 0 0 var(--band-glow, 12px) var(--front, transparent); }
.mx-viz-mirror:not([data-front="off"]) .mx-viz-band { display: block; }
.mx-viz-touch { position: absolute; z-index: 2; display: none; border-radius: 50%; background: #ffffff; box-shadow: 0 0 0 1px rgba(11, 13, 20, .25), 0 0 6px rgba(255, 255, 255, .8); pointer-events: none; }
.mx-viz-mirror:not([data-front="off"]) .mx-viz-touch { display: block; }
.mx-viz-touch[hidden], .mx-viz-band[hidden] { display: none !important; }
/* reflection sheen over everything */
.mx-viz-glass::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: linear-gradient(118deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.04) 20%, transparent 36%, transparent 62%, rgba(255,255,255,.07) 69%, transparent 76%); }
/* microphone status dot */
.mx-viz-mic { position: absolute; z-index: 2; top: 2.5%; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 6px var(--aqua); display: none; }
.mx-viz-mirror[data-sound="voice"] .mx-viz-mic { display: block; }

/* ---------- screen behind the glass: real size in cm, placed by JS ---------- */
.mx-viz-screen { position: absolute; z-index: 1; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); container: screen / inline-size; font-size: var(--ui, 11px); }
.mx-viz-screen[hidden] { display: none; }
.mx-viz-content { height: 100%; display: flex; flex-direction: column; gap: .9em; padding: .9em; overflow: hidden; line-height: 1.35; }
.mx-viz-content > * { flex-shrink: 0; }
.mx-viz-content [hidden] { display: none !important; }
/* two columns: weather + forecast | clock + widgets; one column on a narrow display */
.mx-viz-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.2em; }
.mx-viz-col { display: flex; flex-direction: column; gap: .9em; min-width: 0; }
.mx-viz-col-r .mx-mirror-clock { text-align: right; }
.mx-viz-content .mx-mirror-clock .mx-clock { font-size: 3.4em; line-height: 1; }
.mx-viz-cols:has(> #viz-col-l[hidden]) { grid-template-columns: minmax(0, 1fr); }
.mx-viz-cols:has(> #viz-col-l[hidden]) .mx-mirror-clock { text-align: center; }
.mx-viz-cols:has(> #viz-col-l[hidden]) .mx-clock { font-size: 4.4em; }
@container screen (max-width: 24em) {
  .mx-viz-cols { display: flex; flex-direction: column; gap: .9em; }
  .mx-viz-col { display: contents; }
  .mx-viz-col-r .mx-mirror-clock { order: -1; text-align: left; }
}
.mx-viz-content small { display: block; font-size: .85em; line-height: 1.3; opacity: .9; }
.mx-viz-content .mx-weather { gap: .2em; }
.mx-viz-content .mx-w-info { font-size: .75em; line-height: 1.3; gap: .1em .6em; }
.mx-viz-content .mx-w-sub { width: 1.2em; height: 1.2em; }
.mx-viz-content .mx-w-main { gap: .3em; margin-top: .1em; }
.mx-viz-content .mx-w-icon { width: 2.4em; height: 2.4em; }
.mx-viz-content .mx-w-temp { font-size: 2.4em; }
.mx-viz-content .mx-w-desc { font-size: .95em; line-height: 1.3; }
.mx-viz-content .mx-w-city, .mx-viz-content .mx-w-feels { font-size: .72em; line-height: 1.3; }
.mx-viz-content .mx-fc { font-size: .85em; }
.mx-viz-content .mx-fc td { padding: .25em .5em .25em 0; }
.mx-viz-content .mx-fc img { width: 1.5em; height: 1.5em; }
.mx-viz-content .mx-compliment { margin-top: auto; min-height: 0; font-size: 1.45em; line-height: 1.3; }
.mx-viz-extras { display: grid; grid-template-columns: repeat(auto-fit, minmax(10em, 1fr)); gap: .8em 1.2em; font-size: .85em; line-height: 1.35; }
.mx-viz-mod { min-width: 0; }
.mx-viz-mod-wide { grid-column: 1 / -1; }
.mx-viz-mod h4 { margin: 0 0 .3em; font-size: .8em; line-height: 1.3; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .75; }
.mx-viz-mod ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .2em; }
.mx-viz-mod li { display: flex; gap: .6em; min-width: 0; }
.mx-viz-mod time { font-variant-numeric: tabular-nums; opacity: .75; flex: none; }
.mx-viz-mod-wide li { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-viz-mod-wide li::before { content: "› "; color: var(--aqua); }
.mx-viz-steps { margin: 0; font-size: 1.6em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.mx-viz-steps small { display: inline; font-size: .45em; opacity: .7; margin-left: .3em; }
.mx-viz-bar { height: .35em; margin-top: .4em; background: rgba(255,255,255,.18); }
.mx-viz-bar i { display: block; height: 100%; background: linear-gradient(to right, var(--aqua), var(--science-blue)); }
.mx-viz-track { margin: 0; display: flex; align-items: center; gap: .6em; }
.mx-viz-eq { display: inline-flex; align-items: flex-end; gap: .15em; height: 1em; }
.mx-viz-eq i { width: .22em; background: var(--aqua); animation: mx-eq 1s ease-in-out infinite alternate; }
.mx-viz-eq i:nth-child(1) { height: 40%; } .mx-viz-eq i:nth-child(2) { height: 100%; animation-delay: -.4s; } .mx-viz-eq i:nth-child(3) { height: 65%; animation-delay: -.7s; }
@keyframes mx-eq { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
.mx-viz-eq i { transform-origin: bottom; }
.mx-viz-voice { margin: 0; font-size: .85em; text-align: center; opacity: .8; }
.mx-viz-voice::before { content: ""; display: inline-block; width: .5em; height: .5em; margin-right: .5em; border-radius: 50%; background: var(--aqua); vertical-align: middle; }

/* ---------- controls ---------- */
.mx-viz-controls { display: grid; gap: var(--space-6); }
.mx-viz-summary { padding: var(--space-4) var(--space-6); background: var(--surface-alt); border-top: 6px solid transparent; border-image: linear-gradient(to right, var(--aqua), var(--science-blue)) 1; }
.mx-viz-summary p { margin: var(--space-2) 0 0; font-size: 16px; line-height: 25px; font-weight: 700; color: var(--ink); }
.mx-chip span small { font-size: 12px; color: inherit; opacity: .75; margin-left: 4px; }
.mx-chip input:disabled + span { opacity: .4; cursor: not-allowed; text-decoration: line-through; }
.mx-chip input:disabled { cursor: not-allowed; }
.mx-viz-swatch span, .mx-viz-temp span { display: inline-flex; align-items: center; gap: var(--space-2); }
.mx-viz-swatch b, .mx-viz-temp b { font-weight: 500; }
.mx-viz-swatch i, .mx-viz-temp i { width: 16px; height: 16px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.mx-viz-swatch i[data-frame="black"] { background: var(--mat-black); }
.mx-viz-swatch i[data-frame="white"] { background: var(--mat-white); }
.mx-viz-swatch i[data-frame="oak"] { background: var(--mat-oak); }
.mx-viz-swatch i[data-frame="brass"] { background: var(--mat-brass); }
.mx-viz-swatch i[data-frame="none"] { background: radial-gradient(circle at 35% 35%, #3a4152, var(--glass) 70%); box-shadow: inset 0 0 0 2px #c3c8d2; }
.mx-viz-temp i[data-temp="cold"] { background: var(--led-cold); }
.mx-viz-temp i[data-temp="neutral"] { background: var(--led-neutral); }
.mx-viz-temp i[data-temp="warm"] { background: var(--led-warm); }
.mx-viz-hint { margin: 0; font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.mx-viz-note { margin: var(--space-1) 0 0; padding-left: var(--space-3); border-left: 2px solid var(--accent); font-size: 13px; line-height: 20px; color: var(--ink); }
.mx-viz-note[hidden], .mx-viz-ranges[hidden] { display: none; }
.mx-viz-ranges { display: grid; gap: var(--space-3); margin-top: var(--space-2); }
.mx-viz-range { display: grid; gap: var(--space-1); }
.mx-viz-range label { display: flex; justify-content: space-between; gap: var(--space-4); font-size: 14px; line-height: 20px; font-weight: 500 !important; color: var(--ink-muted) !important; }
.mx-viz-range output { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.mx-viz-range input[type="range"] { width: 100%; margin: 0; accent-color: var(--action); }
.mx-viz-controls .mx-remark { margin-top: 0; }

/* ---------- room toggle + scene ---------- */
.mx-viz-room { margin-top: var(--space-16); padding-top: var(--space-12); border-top: 1px solid var(--line); }

/* scene: 400 × 288 cm (18 cm floor band + 270 cm wall) */
.mx-scene { position: relative; width: 100%; aspect-ratio: 400 / 288; max-width: 100%; overflow: hidden; border: 1px solid var(--line); container-type: inline-size;
  background: radial-gradient(ellipse 60% 50% at 40% 35%, var(--wall-light), transparent 70%), var(--wall); }
.mx-scene[data-room="bath"] { background: radial-gradient(ellipse 60% 50% at 40% 35%, var(--wall-light), transparent 70%), linear-gradient(var(--wall-line) 1px, transparent 1px) 0 100% / 7.5% 10.4167%, linear-gradient(90deg, var(--wall-line) 1px, transparent 1px) 0 0 / 7.5% 10.4167%, var(--wall); }
.mx-scene[data-room="bed"] { background: radial-gradient(ellipse 60% 50% at 40% 35%, var(--wall-light), transparent 70%), repeating-linear-gradient(90deg, transparent 0 4.5%, var(--wall-line) 4.5% 4.75%), var(--wall); }
.mx-scene-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 6.25%; background: repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 1px), var(--floor-line) calc(12.5% - 1px) 12.5%), var(--floor); border-top: 3px solid var(--furn-edge); }

.mx-furn { position: absolute; bottom: 6.25%; display: none; overflow: visible; }
.mx-furn .f-body { fill: var(--furn); stroke: var(--furn-edge); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mx-furn .f-shade { fill: var(--furn-shade); stroke: var(--furn-edge); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mx-furn .f-line { stroke: var(--furn-edge); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mx-furn[data-for="hall"] { left: 27.5%; width: 25%; height: 27.0833%; }
.mx-furn[data-for="bath"] { left: 28.75%; width: 22.5%; height: 29.5139%; }
.mx-furn[data-for="bed"] { left: 26.25%; width: 27.5%; height: 27.7778%; }
.mx-scene[data-room="hall"] .mx-furn[data-for="hall"], .mx-scene[data-room="bath"] .mx-furn[data-for="bath"], .mx-scene[data-room="bed"] .mx-furn[data-for="bed"] { display: block; }
/* vessel basin on the bathroom vanity: 44 × 12 cm */
.mx-scene-basin { position: absolute; display: none; left: 34.5%; width: 11%; bottom: 35.7639%; height: 4.1667%; background: var(--furn); border: 1px solid var(--furn-edge); border-radius: 0 0 50% 50% / 0 0 100% 100%; }
.mx-scene[data-room="bath"] .mx-scene-basin { display: block; }
.mx-scene[data-tall] .mx-furn, .mx-scene[data-tall] .mx-scene-basin { display: none !important; }

.mx-scene-eye { position: absolute; left: 0; right: 0; bottom: 61.8056%; border-top: 1px dashed var(--accent); }
.mx-scene-eye span { position: absolute; left: 1.5%; bottom: 3px; font-size: max(10px, 1.6cqw); line-height: 1.2; letter-spacing: .04em; color: var(--accent); }

.mx-scene-mirror { position: absolute; --glow-r: 2.4cqw; --glow-s: .5cqw;
  box-shadow: var(--back-glow), 0 10px 18px -10px rgba(10, 12, 20, .6), inset 0 0 0 1px rgba(255, 255, 255, .1);
  transition: left .35s ease, bottom .35s ease, width .35s ease, height .35s ease, border-radius .35s ease; }
.mx-scene-screen { display: grid; place-items: center; }
.mx-scene-time { font-size: 22cqw; line-height: 1; font-variant-numeric: tabular-nums; }

.mx-scene-person { position: absolute; left: 75%; bottom: 6.25%; width: 12.5%; height: 59.0278%; fill: var(--figure); }
.mx-scene-hdim { position: absolute; left: 89%; bottom: 6.25%; height: 59.0278%; font-size: max(10px, 1.6cqw); }
@media (prefers-reduced-motion: reduce) { .mx-viz-mirror, .mx-scene-mirror { transition: none; } .mx-viz-eq i { animation: none; } }
.mx-chip span b { font-weight: 500; }
.mx-viz-orient { width: 16px; height: 10px; border: 1.5px solid currentColor; border-radius: 1px; flex: none; }
.mx-viz-orient[data-o="v"] { width: 10px; height: 16px; }
.mx-chip span:has(> .mx-viz-orient) { display: inline-flex; align-items: center; gap: var(--space-2); }
.mx-viz-controls .mx-chips + .mx-chips { margin-top: var(--space-2); }
/* sound: waves spreading from both sides of the mirror */
.mx-viz-waves { position: absolute; overflow: hidden; top: 50%; width: 2.6em; height: 6em; margin-top: -3em; display: none; pointer-events: none; font-size: 16px; color: var(--accent); }
.mx-viz-waves[data-side="l"] { right: 100%; margin-right: .4em; }
.mx-viz-waves[data-side="r"] { left: 100%; margin-left: .4em; }
.mx-viz-mirror:not([data-sound="none"]) > .mx-viz-waves { display: block; }
.mx-viz-waves i { position: absolute; top: 50%; width: 6em; height: 6em; margin-top: -3em; border: .2em solid transparent; border-radius: 50%; opacity: 0; animation: mx-wave 2.4s ease-out infinite; }
.mx-viz-waves[data-side="l"] i { right: -3em; border-left-color: currentColor; }
.mx-viz-waves[data-side="r"] i { left: -3em; border-right-color: currentColor; }
.mx-viz-waves i:nth-child(2) { animation-delay: .8s; }
.mx-viz-waves i:nth-child(3) { animation-delay: 1.6s; }
@keyframes mx-wave { 0% { transform: scale(.35); opacity: .9; } 100% { transform: scale(1); opacity: 0; } }
.mx-scene .mx-viz-waves { font-size: max(4px, .9cqw); }
@media (prefers-reduced-motion: reduce) { .mx-viz-waves i { animation: none; opacity: .5; } .mx-viz-waves i:nth-child(1) { transform: scale(.5); } .mx-viz-waves i:nth-child(2) { transform: scale(.75); } .mx-viz-waves i:nth-child(3) { transform: scale(1); } }
/* dark-theme notice */
.mx-viz-toast { position: fixed; z-index: 9; left: 50%; bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: min(560px, calc(100% - 32px));
  display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-6); background: var(--surface-alt); color: var(--ink);
  border-top: 4px solid transparent; border-image: linear-gradient(to right, var(--aqua), var(--science-blue)) 1; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .55); animation: mx-pop .3s ease-out; }
.mx-viz-toast[hidden] { display: none; }
.mx-viz-toast p { margin: 0; flex: 1; min-width: 0; font-size: 14px; line-height: 20px; }
.mx-viz-toast-btn { flex: none; font: inherit; font-size: 13px; font-weight: 700; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; color: var(--accent); cursor: pointer; }
.mx-viz-toast-btn:hover { border-color: var(--accent); }
.mx-viz-toast-close { flex: none; width: 32px; height: 32px; border: 0; background: transparent; color: var(--ink-muted); font: inherit; font-size: 22px; line-height: 1; cursor: pointer; }
.mx-viz-toast-close:hover { color: var(--ink); }
.mx-viz-toast button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 480px) { .mx-viz-toast { flex-wrap: wrap; padding: var(--space-3) var(--space-4); } .mx-viz-toast p { flex-basis: calc(100% - 48px); } }
@media (prefers-reduced-motion: reduce) { .mx-viz-toast { animation: none; } }