:root {
  --indigo: #18243d;
  --indigo-2: #24324d;
  --paper: #f5f1e8;
  --paper-2: #ece5d8;
  --white: #fffdf8;
  --slate: #3b4b59;
  --muted: #6f777a;
  --orange: #cc6324;
  --sand: #bfa07a;
  --blush: #d9c3b0;
  --sage: #708776;
  --blue: #54748b;
  --plum: #745f7e;
  --line: rgba(24, 36, 61, 0.16);
  --line-strong: rgba(24, 36, 61, 0.28);
  --shadow: 0 16px 44px rgba(24, 36, 61, 0.09);
  --shadow-soft: 0 7px 22px rgba(24, 36, 61, 0.07);
  --radius: 14px;
  --sidebar: 208px;
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html {
  min-width: 320px;
  min-height: 100%;
  background: var(--paper);
  color: var(--indigo);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
  min-width: 320px;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 90% 4%, rgba(191, 160, 122, 0.12), transparent 27rem),
    var(--paper);
}

button, input, select, textarea { font: inherit; }
button { touch-action: manipulation; }
button, [role="button"], input, select, textarea { -webkit-tap-highlight-color: transparent; }

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 10px;
  left: 10px;
  padding: 11px 14px;
  color: var(--white);
  background: var(--indigo);
  border-radius: 8px;
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

.suite-shell {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  width: var(--sidebar);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: max(22px, env(safe-area-inset-top)) 15px max(18px, env(safe-area-inset-bottom));
  color: rgba(255, 253, 248, 0.76);
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 25%),
    var(--indigo);
  border-right: 1px solid rgba(255, 255, 255, 0.09);
}

.brand {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 8px;
}
.brand-mark {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--paper);
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 10px;
  background: rgba(255,255,255,.06);
}
.brand-mark svg { width: 28px; height: 28px; }
.brand-text { display: grid; gap: 3px; }
.brand-text strong { color: var(--white); font-size: .92rem; letter-spacing: -.01em; }
.brand-text small { color: rgba(255,255,255,.56); font-size: .67rem; line-height: 1.15; }

.primary-nav { display: grid; gap: 4px; }
.nav-button {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  color: inherit;
  border: 0;
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-size: .78rem;
  font-weight: 650;
  transition: color 140ms ease, background 140ms ease;
}
.nav-button svg { width: 19px; height: 19px; flex: 0 0 auto; }
.nav-button:hover { color: var(--white); background: rgba(255,255,255,.07); }
.nav-button.is-selected { color: var(--white); background: rgba(255,255,255,.12); }
.nav-button.is-selected::after {
  width: 4px;
  height: 4px;
  margin-left: auto;
  content: "";
  border-radius: 50%;
  background: var(--orange);
}
.sidebar-rule { height: 1px; background: rgba(255,255,255,.1); }
.sidebar-foot {
  margin-top: auto;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 8px;
  row-gap: 8px;
  padding: 11px 8px 0;
  border-top: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.56);
  font-size: .68rem;
}
.sidebar-foot button {
  grid-column: 1 / -1;
  min-height: 38px;
  color: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px;
  background: rgba(255,255,255,.05);
  cursor: pointer;
}
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #8fb397; box-shadow: 0 0 0 3px rgba(143,179,151,.12); }
.status-dot.is-offline { background: var(--sand); }

.main {
  grid-column: 2;
  min-height: 100dvh;
  padding: max(24px, env(safe-area-inset-top)) clamp(28px, 4vw, 64px) max(42px, env(safe-area-inset-bottom));
}
.topline {
  min-height: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: var(--muted);
  font-size: .72rem;
}
.save-state { display: inline-flex; align-items: center; gap: 6px; }
.save-state svg { width: 15px; height: 15px; color: var(--sage); }
.save-state.is-saving svg { animation: savePulse 800ms ease infinite; }
.today { font-weight: 650; }

.page-heading { max-width: 760px; margin: clamp(38px, 6vh, 68px) 0 clamp(27px, 4vh, 42px); }
.eyebrow {
  margin: 0 0 10px;
  color: var(--orange);
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.page-heading h1 {
  margin: 0;
  max-width: 680px;
  font-family: inherit;
  font-size: clamp(2.2rem, 4.1vw, 4.5rem);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: .98;
}
.page-heading > p:last-child {
  max-width: 570px;
  margin: 19px 0 0;
  color: var(--slate);
  font-size: clamp(.92rem, 1.2vw, 1.05rem);
  line-height: 1.58;
}

.section-label-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 12px; }
.section-label-row h2 { margin: 0; font-size: .71rem; letter-spacing: .13em; text-transform: uppercase; }
.text-button { min-height: 36px; color: var(--slate); border: 0; background: transparent; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.recent-strip { max-width: 1160px; margin-bottom: 28px; }
.recent-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 5px; }
.recent-chip {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  white-space: nowrap;
  color: var(--indigo);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,253,248,.7);
  cursor: pointer;
}
.recent-chip svg { width: 17px; height: 17px; }

.app-shelf {
  max-width: 1160px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.app-card {
  --tool: var(--orange);
  --tint: #eee2d7;
  position: relative;
  min-height: 224px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 148px;
  gap: 18px;
  padding: 22px;
  overflow: hidden;
  color: var(--indigo);
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,253,248,.82);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset;
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
.app-card::before { position: absolute; inset: 0 auto 0 0; width: 4px; content: ""; background: var(--tool); }
.app-card:hover { transform: translateY(-2px); border-color: rgba(24,36,61,.28); box-shadow: var(--shadow-soft); }
.app-copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.app-number { color: var(--muted); font-size: .68rem; font-weight: 750; letter-spacing: .14em; }
.app-icon {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  margin-top: 18px;
  color: var(--tool);
  border: 1px solid color-mix(in srgb, var(--tool) 38%, transparent);
  border-radius: 10px;
  background: var(--tint);
}
.app-icon svg { width: 22px; height: 22px; }
.app-copy h2 { margin: 14px 0 4px; font-family: inherit; font-size: clamp(1.28rem, 2vw, 1.72rem); font-weight: 400; letter-spacing: -.025em; }
.app-purpose { color: var(--tool); font-size: .72rem; font-weight: 780; letter-spacing: .04em; }
.app-description { max-width: 290px; margin: 11px 0 0; color: var(--slate); font-size: .78rem; line-height: 1.5; }
.app-open { margin-top: auto; padding-top: 16px; color: var(--indigo); font-size: .72rem; font-weight: 800; }
.app-open span { display: inline-block; margin-left: 4px; transition: transform 150ms ease; }
.app-card:hover .app-open span { transform: translateX(3px); }

.app-preview {
  align-self: stretch;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--tool) 18%, transparent);
  border-radius: 10px;
  background: var(--tint);
}
.preview-steps { width: 100%; display: grid; gap: 8px; padding: 18px; }
.preview-steps i { height: 27px; display: flex; align-items: center; gap: 8px; padding: 0 8px; border-radius: 6px; background: rgba(255,255,255,.74); box-shadow: 0 3px 10px rgba(24,36,61,.05); }
.preview-steps i::before { width: 15px; height: 15px; content: ""; border: 2px solid var(--tool); border-radius: 4px; }
.preview-steps i:nth-child(2) { margin-left: 12px; }
.preview-now { width: 100%; display: grid; grid-template-columns: 1fr 22px 1fr; align-items: center; gap: 5px; padding: 15px; }
.preview-now i { aspect-ratio: .78; display: grid; place-items: end center; padding: 9px 4px; border-radius: 8px; background: rgba(255,255,255,.78); font-style: normal; font-size: .57rem; font-weight: 800; text-transform: uppercase; }
.preview-now b { color: var(--tool); font-size: 1rem; text-align: center; }
.preview-route { position: relative; width: 90%; height: 76%; }
.preview-route::before { position: absolute; inset: 8% 39% 14%; content:""; border-left: 3px dashed color-mix(in srgb, var(--tool) 55%, transparent); }
.preview-route i { position:absolute; width: 38px; height:38px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.85); font-style:normal; font-size:.65rem; font-weight:800; }
.preview-route i:first-child { left: 16%; top: 7%; }
.preview-route i:last-child { right: 14%; bottom: 8%; background: var(--tool); color:white; }
.preview-signal { width: 86px; aspect-ratio:1; display:grid; place-items:center; color:white; border-radius:50%; background:var(--tool); font-size:2.1rem; box-shadow:0 0 0 12px color-mix(in srgb,var(--tool) 12%,transparent); }
.preview-tone { width: 72%; display:grid; grid-template-columns:repeat(4,1fr); align-items:end; gap:7px; height:84px; }
.preview-tone i { display:block; border-radius:4px 4px 2px 2px; background:color-mix(in srgb,var(--tool) 58%,white); }
.preview-tone i:nth-child(1){height:24%}.preview-tone i:nth-child(2){height:45%}.preview-tone i:nth-child(3){height:68%}.preview-tone i:nth-child(4){height:94%;background:var(--tool)}
.preview-timer { width:100px; aspect-ratio:1; display:grid; place-items:center; border-radius:50%; background:conic-gradient(var(--tool) 0 72%,rgba(255,255,255,.72) 72%); }
.preview-timer::after { width:74px; aspect-ratio:1; display:grid; place-items:center; content:"8:00"; border-radius:50%; background:var(--tint); font-size:.72rem; font-weight:800; }
.preview-pause { width:90px; aspect-ratio:1; display:grid; place-items:center; border-radius:45% 55% 55% 45%; background:color-mix(in srgb,var(--tool) 68%,white); box-shadow:0 0 0 15px color-mix(in srgb,var(--tool) 10%,transparent); color:white; font-family: inherit;font-size:.74rem; }
.preview-ready { width:78%; display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.preview-ready i { min-height:45px; display:grid; place-items:center; border:1px solid rgba(24,36,61,.1); border-radius:7px; background:rgba(255,255,255,.76); font-style:normal; font-size:.9rem; font-weight:800; }
.preview-rotation { width:86%; display:grid; grid-template-columns:repeat(2,1fr); gap:6px; }
.preview-rotation i { min-height:54px; display:grid; place-items:center; border-radius:7px; background:rgba(255,255,255,.78); font-style:normal; font-size:.6rem; font-weight:750; }
.preview-tools { width:82%; display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.preview-tools i { aspect-ratio:1; display:grid; place-items:center; border-radius:7px; background:rgba(255,255,255,.78); font-style:normal; font-size:1rem; }
.empty-note { margin: 30px 0; color: var(--muted); }

.viewer {
  --tool: var(--orange);
  --tint: #eee2d7;
  position: fixed;
  inset: 0;
  z-index: 50;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 68px minmax(0, 1fr);
  overflow: hidden;
  background: var(--paper);
}
.viewer[hidden] { display: none; }
.viewer-bar {
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
  align-items: center;
  gap: 16px;
  padding: 10px max(18px, env(safe-area-inset-right)) 10px max(18px, env(safe-area-inset-left));
  color: var(--white);
  background: var(--indigo);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.viewer-button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  color: rgba(255,255,255,.82);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 9px;
  background: rgba(255,255,255,.05);
  cursor: pointer;
  font-size: .75rem;
  font-weight: 720;
}
.viewer-button:hover { color: white; background: rgba(255,255,255,.1); }
.viewer-button svg { width: 18px; height: 18px; }
.viewer-back { justify-self: start; border-color: transparent; background: transparent; }
.viewer-primary { color: white; border-color: var(--orange); background: var(--orange); }
.viewer-primary:hover { background: #dc7133; }
.viewer-actions { justify-self: end; display: flex; gap: 7px; }
.viewer-title { display: flex; align-items: center; gap: 10px; min-width: 190px; }
.viewer-title > span:last-child { display: grid; gap: 2px; }
.viewer-title small { color: rgba(255,255,255,.54); font-size: .61rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.viewer-title strong { color: white; font-family: inherit; font-size: 1.05rem; font-weight: 400; }
.viewer-symbol { width: 36px; height: 36px; display:grid; place-items:center; color: var(--tool); border-radius:9px; background:white; }
.viewer-symbol svg { width:21px;height:21px; }
.tool-root { min-height: 0; overflow: hidden; }
.tool-layout { height: 100%; display: grid; grid-template-columns: 330px minmax(0,1fr); }
.control-deck {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 23px 20px 30px;
  background: var(--white);
  border-right: 1px solid var(--line);
}
.control-heading { margin-bottom: 22px; }
.control-heading .eyebrow { margin-bottom: 7px; }
.control-heading h2 { margin:0; font-family: inherit; font-size:1.65rem; font-weight:400; line-height:1.05; }
.control-heading p { margin:9px 0 0; color:var(--slate); font-size:.76rem; line-height:1.45; }
.control-section { padding: 17px 0; border-top: 1px solid var(--line); }
.control-section:first-of-type { border-top:0; padding-top:0; }
.control-label-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.control-label-row h3, .control-section > h3 { margin:0 0 10px; font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.control-label-row h3 { margin:0; }
.control-hint { margin:8px 0 0; color:var(--muted); font-size:.68rem; line-height:1.45; }
.control-spacer { margin-top:auto; }

.field { display:grid; gap:6px; margin-bottom:10px; }
.field > span { color:var(--slate); font-size:.67rem; font-weight:740; }
.field input, .field select, .field textarea, .text-input {
  width:100%;
  min-height:44px;
  padding:10px 11px;
  color:var(--indigo);
  border:1px solid var(--line-strong);
  border-radius:8px;
  background:white;
}
.field textarea { min-height:76px; resize:vertical; }
.inline-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.button-row { display:flex; flex-wrap:wrap; gap:7px; }
.control-button, .chip-button, .primary-action, .secondary-action, .danger-action, .icon-button {
  min-height:44px;
  border-radius:8px;
  cursor:pointer;
  font-weight:720;
}
.control-button, .secondary-action {
  padding:9px 12px;
  color:var(--indigo);
  border:1px solid var(--line-strong);
  background:white;
}
.control-button:hover, .secondary-action:hover { border-color:var(--tool); }
.control-button.is-selected { color:white; border-color:var(--tool); background:var(--tool); }
.primary-action { padding:10px 14px; color:white; border:1px solid var(--tool); background:var(--tool); }
.danger-action { padding:10px 14px; color:white; border:1px solid #934638; background:#934638; }
.icon-button { width:44px; padding:0; display:grid; place-items:center; color:inherit; border:1px solid var(--line); background:transparent; }
.icon-button svg { width:19px;height:19px; }
.chip-grid { display:flex; flex-wrap:wrap; gap:6px; }
.chip-button {
  min-height:38px;
  padding:7px 10px;
  color:var(--slate);
  border:1px solid var(--line);
  border-radius:999px;
  background:white;
  font-size:.7rem;
}
.chip-button.is-selected { color:var(--tool); border-color:var(--tool); background:var(--tint); }
.segmented { display:grid; grid-template-columns:repeat(var(--segments,3),minmax(0,1fr)); gap:3px; padding:3px; border:1px solid var(--line); border-radius:9px; background:var(--paper-2); }
.segmented button { min-height:38px; padding:6px; color:var(--slate); border:0; border-radius:6px; background:transparent; cursor:pointer; font-size:.68rem; font-weight:750; }
.segmented button.is-selected { color:var(--indigo); background:white; box-shadow:0 1px 6px rgba(24,36,61,.08); }
.switch-row { min-height:44px; display:flex; align-items:center; gap:9px; color:var(--slate); font-size:.72rem; font-weight:700; cursor:pointer; }
.switch-row input { width:19px;height:19px;accent-color:var(--tool); }
.list-editor { display:grid; gap:7px; }
.list-item { min-height:48px; display:grid; grid-template-columns:28px minmax(0,1fr) auto; align-items:center; gap:7px; padding:6px 7px; border:1px solid var(--line); border-radius:8px; background:white; }
.list-item-index { width:25px;height:25px;display:grid;place-items:center;color:white;border-radius:6px;background:var(--tool);font-size:.66rem;font-weight:800; }
.list-item input { min-width:0; min-height:34px; padding:5px 7px; border:0; border-bottom:1px solid transparent; background:transparent; }
.list-item input:focus { border-bottom-color:var(--tool); outline:0; }
.list-actions { display:flex; gap:2px; }
.mini-button { width:34px;height:34px;display:grid;place-items:center;color:var(--slate);border:0;border-radius:6px;background:transparent;cursor:pointer; }
.mini-button:hover { background:var(--paper-2); }
.mini-button svg { width:16px;height:16px; }

.display-stage {
  position:relative;
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:auto;
  padding:clamp(24px,4vw,58px);
  background:
    linear-gradient(rgba(24,36,61,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(24,36,61,.025) 1px,transparent 1px),
    var(--paper);
  background-size:32px 32px;
}
.display-stage::before { position:absolute; inset:18px; pointer-events:none; content:""; border:1px solid rgba(24,36,61,.07); border-radius:16px; }
.stage-kicker { position:relative; z-index:1; margin:0 0 15px; color:var(--tool); font-size:.72rem; font-weight:820; letter-spacing:.16em; text-transform:uppercase; }
.stage-heading { position:relative; z-index:1; margin:0; font-family: inherit; font-size:clamp(2.6rem,6vw,6.4rem); font-weight:400; letter-spacing:-.055em; line-height:.95; }
.stage-subtitle { position:relative; z-index:1; max-width:720px; margin:18px 0 0; color:var(--slate); font-size:clamp(1rem,1.6vw,1.45rem); line-height:1.45; }
.stage-note { position:relative; z-index:1; align-self:flex-start; margin-top:auto; padding:10px 13px; color:var(--slate); border:1px solid var(--line); border-radius:8px; background:rgba(255,253,248,.8); font-size:.72rem; }

/* Step Cards */
.step-stack { position:relative; z-index:1; width:min(980px,100%); margin:auto; display:grid; gap:12px; }
.step-card-display { min-height:82px; display:grid; grid-template-columns:64px minmax(0,1fr) auto; align-items:center; gap:18px; padding:13px 22px 13px 13px; color:var(--indigo); border:1px solid var(--line); border-radius:12px; background:rgba(255,253,248,.92); box-shadow:var(--shadow-soft); transition:opacity 150ms ease,transform 150ms ease; }
.step-card-display.is-done { opacity:.44; }
.step-card-display.is-active { border-color:var(--tool); box-shadow:0 0 0 3px color-mix(in srgb,var(--tool) 16%,transparent),var(--shadow-soft); transform:translateX(6px); }
.step-index { width:54px;height:54px;display:grid;place-items:center;color:white;border-radius:10px;background:var(--tool);font-family: inherit;font-size:1.5rem; }
.step-text { font-family: inherit;font-size:clamp(1.35rem,2.7vw,2.5rem);line-height:1.08; }
.step-status { color:var(--muted);font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em; }
.step-focus .step-card-display { display:none; }
.step-focus .step-card-display.is-active { min-height:230px; display:grid; grid-template-columns:112px minmax(0,1fr); transform:none; padding:28px; }
.step-focus .step-card-display.is-active .step-index { width:96px;height:96px;font-size:2.5rem; }
.step-focus .step-card-display.is-active .step-text { font-size:clamp(3rem,7vw,7.2rem); }
.step-focus .step-status { display:none; }

/* Now & Next */
.schedule-board { position:relative;z-index:1;width:min(1080px,100%);margin:auto; }
.schedule-row { display:grid;grid-template-columns:1fr 78px 1fr;align-items:stretch;gap:18px; }
.schedule-card { min-height:330px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:28px;text-align:center;border:1px solid var(--line);border-radius:14px;background:rgba(255,253,248,.94);box-shadow:var(--shadow); }
.schedule-card small { color:var(--tool);font-size:.8rem;font-weight:850;letter-spacing:.16em;text-transform:uppercase; }
.schedule-card strong { margin-top:28px;font-family: inherit;font-size:clamp(2.8rem,5.5vw,6rem);font-weight:400;line-height:.96;letter-spacing:-.05em; }
.schedule-card span { margin-top:18px;color:var(--slate);font-size:clamp(.9rem,1.4vw,1.25rem); }
.schedule-arrow { display:grid;place-items:center;color:var(--tool);font-size:clamp(2rem,4vw,4rem); }
.schedule-later { width:50%;min-height:86px;margin:16px 0 0 auto;display:flex;align-items:center;gap:18px;padding:15px 20px;border:1px solid var(--line);border-radius:11px;background:rgba(255,253,248,.84); }
.schedule-later small { color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.12em; }
.schedule-later strong { font-family: inherit;font-size:1.7rem;font-weight:400; }
.transition-message { margin:22px auto 0;padding:12px 18px;text-align:center;color:var(--slate);font-size:1.1rem; }

/* This Way */
.route-board { position:relative;z-index:1;width:min(1120px,100%);margin:auto;display:grid;gap:12px; }
.route-lane { --lane:#54748b; min-height:104px;display:grid;grid-template-columns:minmax(150px,.8fr) 1fr minmax(150px,.8fr);align-items:center;gap:16px;padding:16px 20px;border:1px solid var(--line);border-radius:12px;background:rgba(255,253,248,.9);box-shadow:var(--shadow-soft); }
.route-place { display:flex;align-items:center;gap:12px;font-family: inherit;font-size:clamp(1.3rem,2vw,2rem); }
.route-place:last-child { justify-content:flex-end;text-align:right; }
.route-dot { width:42px;height:42px;display:grid;place-items:center;flex:0 0 auto;color:white;border-radius:50%;background:var(--lane);font-family:Inter,sans-serif;font-size:.74rem;font-weight:850; }
.route-path { height:4px;position:relative;background:repeating-linear-gradient(90deg,var(--lane) 0 9px,transparent 9px 16px); }
.route-path::after { position:absolute;right:-1px;top:50%;width:13px;height:13px;content:"";border-top:4px solid var(--lane);border-right:4px solid var(--lane);transform:translateY(-50%) rotate(45deg); }
.route-lane.is-waiting { opacity:.45; }
.route-lane.is-moving { border-color:var(--lane);box-shadow:0 0 0 3px color-mix(in srgb,var(--lane) 16%,transparent); }
.route-callout { position:relative;z-index:1;align-self:center;margin-top:18px;padding:12px 18px;color:white;border-radius:999px;background:var(--tool);font-weight:800; }

/* Class Signal */
.signal-stage { justify-content:center;align-items:center;text-align:center; }
.signal-display { position:relative;z-index:1;width:min(900px,100%);display:flex;flex-direction:column;align-items:center; }
.signal-orb { width:clamp(170px,24vw,290px);aspect-ratio:1;display:grid;place-items:center;color:white;border-radius:50%;background:var(--tool);box-shadow:0 0 0 22px color-mix(in srgb,var(--tool) 13%,transparent),0 28px 65px color-mix(in srgb,var(--tool) 22%,transparent);font-size:clamp(4.6rem,10vw,9rem); }
.signal-orb svg { width:56%;height:56%; }
.signal-display h2 { margin:42px 0 0;font-family: inherit;font-size:clamp(3.3rem,7vw,7.5rem);font-weight:400;letter-spacing:-.055em;line-height:.9; }
.signal-display p { margin:20px 0 0;color:var(--slate);font-size:clamp(1rem,1.8vw,1.55rem); }
.signal-flash .signal-orb { animation:signalPulse 650ms ease 2; }

/* Room Tone */
.tone-stage { justify-content:center;align-items:center;text-align:center; }
.tone-display { position:relative;z-index:1;width:min(980px,100%);display:grid;grid-template-columns:minmax(250px,.7fr) 1fr;align-items:center;gap:clamp(35px,7vw,100px); }
.tone-meter { height:340px;display:grid;grid-template-columns:repeat(4,1fr);align-items:end;gap:15px;padding:25px;border:1px solid var(--line);border-radius:14px;background:rgba(255,253,248,.86);box-shadow:var(--shadow); }
.tone-bar { display:block;border-radius:7px 7px 3px 3px;background:var(--paper-2); }
.tone-bar:nth-child(1){height:23%}.tone-bar:nth-child(2){height:46%}.tone-bar:nth-child(3){height:70%}.tone-bar:nth-child(4){height:96%}
.tone-bar.is-on { background:var(--tool); }
.tone-copy { text-align:left; }
.tone-copy small { color:var(--tool);font-size:.78rem;font-weight:850;letter-spacing:.16em;text-transform:uppercase; }
.tone-copy h2 { margin:13px 0 0;font-family: inherit;font-size:clamp(3.7rem,7vw,7.6rem);font-weight:400;letter-spacing:-.055em;line-height:.9; }
.tone-copy p { margin:20px 0 0;color:var(--slate);font-size:clamp(1.05rem,1.8vw,1.5rem);line-height:1.45; }
.tone-task { display:inline-flex;margin-top:24px;padding:10px 13px;border:1px solid var(--line);border-radius:8px;background:var(--white);font-weight:750; }

/* Time Shape */
.time-stage { justify-content:center;align-items:center;text-align:center; }
.timer-board { position:relative;z-index:1;width:min(1060px,100%);display:grid;grid-template-columns:minmax(310px,.8fr) 1fr;align-items:center;gap:clamp(35px,7vw,95px); }
.timer-ring { --progress:0deg; width:min(41vw,390px);max-width:100%;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:conic-gradient(var(--tool) var(--progress),rgba(24,36,61,.09) 0);box-shadow:var(--shadow); }
.timer-ring-inner { width:calc(100% - 28px);aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;background:var(--paper); }
.timer-digits { font-family: inherit;font-variant-numeric:tabular-nums;font-size:clamp(4.3rem,8vw,8.5rem);letter-spacing:-.07em;line-height:.85; }
.timer-ring small { margin-top:18px;color:var(--slate);font-weight:750; }
.phase-list { display:grid;gap:10px;text-align:left; }
.phase-item { min-height:76px;display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:14px;padding:12px 16px;border:1px solid var(--line);border-radius:11px;background:rgba(255,253,248,.84); }
.phase-item.is-active { border-color:var(--tool);box-shadow:0 0 0 3px color-mix(in srgb,var(--tool) 13%,transparent); }
.phase-number { width:42px;height:42px;display:grid;place-items:center;color:var(--slate);border-radius:8px;background:var(--paper-2);font-weight:800; }
.phase-item.is-active .phase-number { color:white;background:var(--tool); }
.phase-copy strong { display:block;font-family: inherit;font-size:1.35rem;font-weight:400; }
.phase-copy small,.phase-duration { color:var(--muted);font-size:.72rem; }

/* Pause Together */
.pause-stage { justify-content:center;align-items:center;text-align:center; }
.pause-board { position:relative;z-index:1;width:min(900px,100%);display:flex;flex-direction:column;align-items:center; }
.breathing-orb { width:clamp(190px,29vw,350px);aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:white;border-radius:44% 56% 50% 50%;background:var(--tool);box-shadow:0 0 0 24px color-mix(in srgb,var(--tool) 12%,transparent),var(--shadow); }
.motion-on .breathing-orb.is-running { animation:breathe 8s ease-in-out infinite; }
.breathing-orb strong { font-family: inherit;font-size:clamp(2.1rem,4vw,4.2rem);font-weight:400; }
.breathing-orb span { margin-top:9px;font-size:clamp(.9rem,1.3vw,1.15rem); }
.pause-board h2 { margin:40px 0 0;font-family: inherit;font-size:clamp(2.6rem,5vw,5rem);font-weight:400;letter-spacing:-.045em;line-height:.98; }
.pause-board p { max-width:690px;margin:18px 0 0;color:var(--slate);font-size:clamp(1rem,1.6vw,1.35rem);line-height:1.5; }
.choice-line { margin-top:22px;display:flex;gap:8px;flex-wrap:wrap;justify-content:center; }
.choice-line span { padding:9px 13px;border:1px solid var(--line);border-radius:999px;background:rgba(255,253,248,.78);font-size:.76rem;font-weight:750; }

/* Ready Check */
.ready-stage { justify-content:center;align-items:center; }
.ready-board { position:relative;z-index:1;width:min(1100px,100%); }
.ready-board h2 { max-width:900px;margin:0 auto 40px;text-align:center;font-family: inherit;font-size:clamp(2.6rem,5vw,5.4rem);font-weight:400;letter-spacing:-.05em;line-height:.97; }
.ready-options { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px; }
.ready-option { min-height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:18px;text-align:center;border:1px solid var(--line);border-radius:12px;background:rgba(255,253,248,.91);box-shadow:var(--shadow-soft); }
.ready-option span:first-child { width:50px;height:50px;display:grid;place-items:center;color:white;border-radius:50%;background:var(--tool);font-family: inherit;font-size:1.55rem; }
.ready-option strong { font-family: inherit;font-size:1.45rem;font-weight:400;line-height:1.1; }
.ready-footer { margin:26px auto 0;text-align:center;color:var(--slate);font-size:1rem; }
.support-card { max-width:840px;margin:0 auto;min-height:330px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:45px;text-align:center;border:1px solid var(--line);border-radius:14px;background:rgba(255,253,248,.92);box-shadow:var(--shadow); }
.support-card small { color:var(--tool);font-weight:850;letter-spacing:.16em;text-transform:uppercase; }
.support-card strong { margin-top:22px;font-family: inherit;font-size:clamp(3rem,6vw,6.4rem);font-weight:400;line-height:.94;letter-spacing:-.05em; }
.support-card p { margin:24px 0 0;color:var(--slate);font-size:1.2rem; }

/* Rotation Map */
.rotation-stage { justify-content:center; }
.rotation-board { position:relative;z-index:1;width:min(1150px,100%);margin:auto;display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:13px; }
.rotation-card { --group:#54748b; min-height:190px;display:flex;flex-direction:column;padding:18px;border:1px solid var(--line);border-top:5px solid var(--group);border-radius:12px;background:rgba(255,253,248,.92);box-shadow:var(--shadow-soft); }
.rotation-card small { color:var(--group);font-size:.68rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase; }
.rotation-card strong { margin:auto 0;font-family: inherit;font-size:clamp(2rem,3.3vw,3.5rem);font-weight:400;letter-spacing:-.04em;line-height:1; }
.rotation-card span { color:var(--slate);font-size:.75rem; }
.rotation-footer { position:relative;z-index:1;margin:20px auto 0;display:flex;align-items:center;gap:12px;color:var(--slate); }
.rotation-lock { padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:rgba(255,253,248,.78);font-size:.72rem;font-weight:750; }

/* Tool Board */
.toolboard-layout { grid-template-columns:290px minmax(0,1fr); }
.toolboard-stage { padding:20px; }
.utility-tabs { display:grid;grid-template-columns:repeat(2,1fr);gap:6px; }
.utility-tab { min-height:48px;display:flex;align-items:center;gap:8px;padding:8px 9px;color:var(--slate);text-align:left;border:1px solid var(--line);border-radius:8px;background:white;cursor:pointer;font-size:.68rem;font-weight:750; }
.utility-tab span:first-child { font-size:1.1rem; }
.utility-tab.is-selected { color:white;border-color:var(--tool);background:var(--tool); }
.board-surface { position:relative;z-index:1;width:100%;height:100%;min-height:450px;overflow:hidden;border:1px solid var(--line-strong);border-radius:13px;background:white;box-shadow:var(--shadow); }
.board-surface[data-background="lines"] { background:repeating-linear-gradient(white 0 39px,#cdd9e1 40px); }
.board-surface[data-background="grid"] { background:linear-gradient(#d9e0e3 1px,transparent 1px),linear-gradient(90deg,#d9e0e3 1px,transparent 1px),white;background-size:32px 32px; }
.board-surface[data-background="dots"] { background:radial-gradient(circle,#9da9ad 1px,transparent 1.5px),white;background-size:25px 25px; }
.board-canvas { width:100%;height:100%;display:block;touch-action:none; }
.board-overlay { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:40px;pointer-events:none; }
.utility-display { text-align:center; }
.utility-display strong { display:block;font-family: inherit;font-size:clamp(6rem,16vw,15rem);font-weight:400;letter-spacing:-.08em;line-height:.8; }
.utility-display span { display:block;margin-top:30px;color:var(--slate);font-size:clamp(1.1rem,2vw,1.7rem); }
.curtain { position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;color:white;background:repeating-linear-gradient(90deg,#793b39 0 11%,#8f4b46 11% 22%);transform:translateY(-101%);transition:transform .45s ease; }
.curtain.is-closed { transform:translateY(0); }
.curtain strong { font-family: inherit;font-size:clamp(3rem,7vw,7rem);font-weight:400;text-shadow:0 3px 10px rgba(0,0,0,.2); }
.spotlight-overlay { position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(circle 140px at var(--spot-x,50%) var(--spot-y,50%),transparent 0 96%,rgba(6,10,18,.88) 100%); }
.board-status { position:absolute;z-index:4;right:12px;bottom:12px;padding:7px 10px;color:var(--slate);border:1px solid var(--line);border-radius:7px;background:rgba(255,255,255,.88);font-size:.67rem; }

.presentation-dock {
  position:fixed;
  z-index:90;
  left:50%;
  bottom:max(16px,env(safe-area-inset-bottom));
  min-width:min(520px,calc(100vw - 28px));
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;
  padding:7px;
  color:white;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  background:rgba(24,36,61,.94);
  box-shadow:0 12px 34px rgba(0,0,0,.24);
  transform:translateX(-50%);
  backdrop-filter:blur(16px);
}
.presentation-dock[hidden] { display:none; }
.presentation-dock button { min-height:42px;padding:8px 13px;color:white;border:0;border-radius:8px;background:rgba(255,255,255,.1);cursor:pointer;font-weight:750; }
.presentation-dock button:last-child { justify-self:end;background:var(--orange); }
.presentation-dock span { color:rgba(255,255,255,.68);font-size:.7rem;font-weight:750; }
.viewer.is-presenting { grid-template-rows:minmax(0,1fr); }
.viewer.is-presenting .viewer-bar { display:none; }
.viewer.is-presenting .control-deck { display:none; }
.viewer.is-presenting .tool-layout { grid-template-columns:1fr; }
.viewer.is-presenting .display-stage { padding:clamp(34px,5vw,80px) clamp(30px,6vw,100px) 95px; }

dialog { color:var(--indigo);border:1px solid var(--line);border-radius:14px;background:var(--white);box-shadow:0 30px 90px rgba(24,36,61,.28); }
dialog::backdrop { background:rgba(24,36,61,.55);backdrop-filter:blur(4px); }
.settings-dialog { width:min(720px,calc(100vw - 28px));max-height:min(780px,calc(100dvh - 28px));padding:0; }
.settings-dialog form { padding:24px; }
.settings-dialog header { display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding-bottom:20px; }
.settings-dialog h2,.confirm-dialog h2 { margin:0;font-family: inherit;font-size:2rem;font-weight:400; }
.setting-row { display:grid;grid-template-columns:1fr auto;align-items:center;gap:24px;padding:19px 0;border-top:1px solid var(--line); }
.setting-row h3 { margin:0;font-size:.78rem; }
.setting-row p { max-width:440px;margin:5px 0 0;color:var(--slate);font-size:.72rem;line-height:1.45; }
.settings-dialog .segmented { min-width:240px; }
.settings-actions { display:flex;gap:7px; }
.settings-foot { margin:0;padding:14px;color:var(--slate);border-radius:8px;background:var(--paper);font-size:.69rem;text-align:center; }
.confirm-dialog { width:min(430px,calc(100vw - 28px));padding:25px; }
.confirm-dialog p { color:var(--slate);line-height:1.5; }
.confirm-dialog form > div { display:flex;justify-content:flex-end;gap:8px;margin-top:22px; }
.toast { position:fixed;z-index:200;left:50%;bottom:24px;max-width:min(460px,calc(100vw - 28px));padding:12px 16px;color:white;border-radius:9px;background:var(--indigo);box-shadow:var(--shadow);transform:translateX(-50%);font-size:.75rem;font-weight:720; }

[data-theme="indigo"] { color-scheme:dark; --paper:#121b2e;--paper-2:#1d2940;--white:#1a263d;--slate:#c7cfda;--muted:#98a3b1;--line:rgba(255,255,255,.13);--line-strong:rgba(255,255,255,.24);color:#f5f1e8; }
[data-theme="indigo"] body,[data-theme="indigo"] .viewer { background:#121b2e; }
[data-theme="indigo"] .app-card,[data-theme="indigo"] .control-deck,[data-theme="indigo"] dialog { color:#f5f1e8;background:#1a263d; }
[data-theme="indigo"] input,[data-theme="indigo"] select,[data-theme="indigo"] textarea,[data-theme="indigo"] .control-button,[data-theme="indigo"] .chip-button,[data-theme="indigo"] .secondary-action,[data-theme="indigo"] .list-item,[data-theme="indigo"] .utility-tab { color:#f5f1e8;background:#121b2e; }
[data-theme="indigo"] .display-stage { background-color:#121b2e; }
[data-theme="indigo"] .step-card-display,[data-theme="indigo"] .schedule-card,[data-theme="indigo"] .schedule-later,[data-theme="indigo"] .route-lane,[data-theme="indigo"] .tone-meter,[data-theme="indigo"] .phase-item,[data-theme="indigo"] .ready-option,[data-theme="indigo"] .support-card,[data-theme="indigo"] .rotation-card { color:#f5f1e8;background:rgba(26,38,61,.94); }

.page-heading h1,
.app-copy h2,
.stage-heading,
.schedule-card strong,
.signal-display h2,
.tone-copy h2,
.pause-board h2,
.ready-board h2,
.support-card strong,
.rotation-card strong,
.curtain strong { font-weight:720; }

.control-heading h2,
.viewer-title strong,
.phase-copy strong,
.ready-option strong,
.settings-dialog h2,
.confirm-dialog h2 { font-weight:700; }

@keyframes savePulse { 50%{opacity:.3} }
@keyframes signalPulse { 50%{transform:scale(1.08);box-shadow:0 0 0 35px color-mix(in srgb,var(--tool) 10%,transparent),0 28px 65px color-mix(in srgb,var(--tool) 22%,transparent)} }
@keyframes breathe { 0%,100%{transform:scale(.82) rotate(-2deg);border-radius:44% 56% 50% 50%} 50%{transform:scale(1.06) rotate(2deg);border-radius:54% 46% 52% 48%} }

@media (max-width: 980px) {
  :root { --sidebar: 78px; }
  .brand { justify-content:center;padding:0; }
  .brand-text,.nav-button span,.sidebar-foot span,.sidebar-foot button { display:none; }
  .nav-button { justify-content:center;padding:9px; }
  .nav-button.is-selected::after { position:absolute;right:9px; }
  .sidebar-foot { display:flex;justify-content:center; }
  .app-card { grid-template-columns:1fr 118px; }
  .tool-layout { grid-template-columns:300px minmax(0,1fr); }
  .viewer-bar { grid-template-columns:1fr auto; }
  .viewer-title { display:none; }
  .tone-display,.timer-board { grid-template-columns:1fr; }
  .tone-meter { height:190px; }
  .tone-copy { text-align:center; }
  .timer-ring { width:min(330px,55vw);margin:auto; }
  .phase-list { grid-template-columns:repeat(3,1fr); }
  .phase-item { grid-template-columns:38px 1fr; }
  .phase-duration { grid-column:2; }
}

@media (max-width: 760px) {
  :root { --sidebar: 0px; }
  .suite-shell { display:block;padding-bottom:72px; }
  .sidebar { inset:auto 0 0;width:auto;min-height:0;height:68px;display:block;padding:7px max(8px,env(safe-area-inset-right)) max(7px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));border-top:1px solid rgba(255,255,255,.12);border-right:0; }
  .brand,.sidebar-rule,.sidebar > #settingsButton,.sidebar-foot { display:none; }
  .primary-nav { height:100%;display:grid;grid-template-columns:repeat(5,1fr);gap:2px; }
  .nav-button { min-height:50px;display:flex;flex-direction:column;justify-content:center;gap:3px;padding:4px 2px;font-size:.57rem; }
  .nav-button span { display:block; }
  .nav-button svg { width:18px;height:18px; }
  .nav-button.is-selected::after { display:none; }
  .main { padding:20px 17px 28px; }
  .page-heading { margin:34px 0 25px; }
  .app-shelf { grid-template-columns:1fr; }
  .app-card { min-height:200px; }
  .viewer { grid-template-rows:auto minmax(0,1fr); }
  .viewer-bar { min-height:64px;grid-template-columns:auto 1fr;padding:9px 10px; }
  .viewer-actions { gap:4px; }
  .viewer-button { min-width:44px;padding:8px; }
  .viewer-button span { display:none; }
  .viewer-back span { display:inline; }
  .tool-root { overflow:auto; }
  .tool-layout,.toolboard-layout { min-height:100%;height:auto;grid-template-columns:1fr;grid-template-rows:auto minmax(520px,1fr); }
  .control-deck { max-height:none;overflow:visible;border-right:0;border-bottom:1px solid var(--line); }
  .display-stage { min-height:520px;padding:32px 20px 75px; }
  .schedule-row { grid-template-columns:1fr; }
  .schedule-arrow { transform:rotate(90deg); }
  .schedule-later { width:100%; }
  .route-lane { grid-template-columns:1fr 36px 1fr;gap:9px; }
  .tone-display,.timer-board { gap:35px; }
  .ready-options { grid-template-columns:repeat(2,1fr); }
  .rotation-board { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .setting-row { grid-template-columns:1fr;gap:12px; }
  .settings-dialog .segmented { min-width:0; }
}

@media (max-width: 490px) {
  .today { display:none; }
  .page-heading h1 { font-size:2.25rem; }
  .app-card { grid-template-columns:1fr 96px;padding:18px; }
  .app-description { font-size:.72rem; }
  .app-preview { min-height:145px; }
  .viewer-back span { display:none; }
  .schedule-card { min-height:230px; }
  .ready-options { grid-template-columns:1fr; }
  .rotation-board { grid-template-columns:1fr; }
  .phase-list { grid-template-columns:1fr; }
  .presentation-dock { min-width:calc(100vw - 18px);grid-template-columns:auto 1fr auto; }
  .presentation-dock span { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
  .backup-row .settings-actions { flex-direction:column; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important; }
}
.motion-off *, .motion-off *::before, .motion-off *::after { animation:none!important;transition:none!important; }

@media print {
  .sidebar,.topline,.viewer-bar,.control-deck,.presentation-dock,.toast,.settings-dialog,.confirm-dialog { display:none!important; }
  .suite-shell { display:block; }
  .main { padding:0; }
  .viewer { position:static;display:block; }
  .tool-root,.tool-layout,.display-stage { height:auto;min-height:0;display:block;overflow:visible;background:white; }
  .display-stage { padding:15mm; }
  .app-card { break-inside:avoid;box-shadow:none; }
}