body {
  --design-font: 'Segoe UI Variable Display', 'Segoe UI', system-ui, sans-serif;
  --design-text: #f5f7ff;
  --design-muted: #e0e6f1;
  --design-background: linear-gradient(125deg, #294985 0%, #535790 40%, #76668f 59%, #397f99 80%, #479eaf 100%);
  --design-radius: 18px;
  --design-glass: #a3aacb38;
  --design-panel: linear-gradient(160deg, #a5b5ce32, #b2bacb24);
  --design-border: #edf6ff35;
  --design-trail-a: #9edee8;
  --design-trail-b: #c4a5e0;
  --design-glow: drop-shadow(0 0 5px #95c9df88) drop-shadow(0 0 16px #b393d544);
}
body[data-design='performance'] {
  --design-text: #f2f1ed;
  --design-muted: #bcbdbb;
  --design-background: radial-gradient(ellipse at 50% 38%, #141618 0%, #070809 48%, #000 100%);
  --design-radius: 3px;
  --design-glass: #08090b99;
  --design-panel: linear-gradient(160deg, #17191b70, #08090b55);
  --design-border: #e4e4de30;
  --design-trail-a: #f2f1e9;
  --design-trail-b: #b5b7b5;
  --design-glow: drop-shadow(0 0 5px #efeee566) drop-shadow(0 0 16px #efeee522);
}
.ring-portal-background { background: var(--design-background); }
.portal-ring { filter: var(--design-glow); }
.ring-trail { stroke: var(--design-trail-a); }
.ring-trail[data-trail='1'] { stroke: var(--design-trail-b); }
.portal-ring rect { rx: 287px; }
.ring-stage.is-square .portal-ring rect { rx: 3px; }
.ring-stage.is-square .ring-back { border-radius: 3px; }
.ring-welcome, .phase-briefing { color: var(--design-text); font-family: var(--design-font); }
.ring-welcome p, .briefing-heading p { color: var(--design-muted); }
.briefing-header {
  backdrop-filter: blur(20px) saturate(.9);
  border-radius: var(--design-radius) var(--design-radius) 0 0;
  background: var(--design-glass);
  border-color: var(--design-border);
}
.briefing-body {
  backdrop-filter: blur(24px) saturate(.9);
  border-radius: 0 0 var(--design-radius) var(--design-radius);
  background: var(--design-panel);
  border-color: var(--design-border);
}
body[data-design='performance'] .ring-rail { stroke: #eeeee54d; }
body[data-design='performance'] .briefing-phase-title { font-weight: 500; letter-spacing: .1em; }
body[data-design='performance'] .briefing-heading h3 { font-weight: 600; }
body[data-design='performance'] .briefing-number { border-color: #e4e4de65; }
.design-switch {
  position: fixed; right: 28px; bottom: 28px; z-index: 6;
  padding: 12px; border: 1px solid #ffffff26; border-radius: 8px;
  background: #121315d9; color: #f2f1ed; backdrop-filter: blur(16px);
  font: 12px/1.4 var(--design-font);
}
.design-switch[hidden] { display: none; }
.design-switch > span { display: block; margin: 0 0 7px 3px; color: #bcbdbb; }
.design-switch div { display: flex; gap: 4px; }
.design-switch button {
  border: 1px solid transparent; border-radius: 4px;
  padding: 9px 15px; background: transparent; color: #bcbdbb; font: inherit; cursor: pointer;
}
.design-switch button[aria-pressed='true'] { background: #f2f1ed; color: #161718; }
.design-switch button:focus-visible { outline: 2px solid #f2f1ed; outline-offset: 3px; }
.welcome-skip {
  pointer-events: auto; margin-top: 34px; padding: 12px 24px;
  border: 1px solid var(--design-border); border-radius: var(--design-radius);
  background: var(--design-glass); color: var(--design-text);
  backdrop-filter: blur(20px); font: 14px var(--design-font); cursor: pointer;
}
.welcome-skip[hidden] { display: none; }
.welcome-skip:hover { background: #ffffff20; }
.welcome-skip:focus-visible { outline: 2px solid var(--design-text); outline-offset: 4px; }
@media (max-width: 600px) {
  .design-switch { right: 16px; bottom: 22px; padding: 8px; }
  .design-switch button { padding: 8px 10px; }
}