:root {
  --bg: #f8f6f1;
  --surface: #ffffff;
  --ink: #14213d;
  --muted: #566177;
  --line: #e6dcc3;
  --navy: #0e1628;
  --navy-2: #1b2744;
  --gold: #b8902f;
  --gold-bright: #e2c06b;
  --gold-soft: #f4ead0;
  --gold-disabled: #dbc99d;
  --good: #1f7a4d;
  --good-soft: #def3e7;
  --ok: #8a6100;
  --ok-soft: #fbf0cf;
  --bad: #b3261e;
  --bad-soft: #fbe3e0;
  --shadow: 0 1px 2px rgba(20, 28, 45, .06), 0 8px 24px rgba(20, 28, 45, .07);
  --serif: "Playfair Display", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c1220; --surface: #151f34; --ink: #ece8dc; --muted: #a4adbf; --line: #2c3750;
    --gold: #e2c06b; --gold-bright: #f0d48a; --gold-soft: #2a2819; --gold-disabled: #5a4f2c;
    --good: #6fd3a0; --good-soft: #17352a; --ok: #f0c35a; --ok-soft: #3a2f12; --bad: #ff8d84; --bad-soft: #3e1d1b;
    --shadow: none;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.55 var(--sans); }
.wrap { max-width: 1060px; margin: 0 auto; padding: 0 20px; }
h1, h2, h3, .serif { font-family: var(--serif); }
h1 { font-size: 2.5rem; line-height: 1.12; margin: 2rem 0 .5rem; font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: 1.5rem; margin: 2rem 0 .6rem; font-weight: 700; }
h3 { font-size: 1.15rem; margin: 0 0 .3rem; font-weight: 700; }
p { margin: .4rem 0 .9rem; }
.lead { font-size: 1.2rem; color: var(--muted); margin: 0 0 1.4rem; max-width: 62ch; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }
a { color: var(--gold); }
[hidden] { display: none !important; }

/* header */
.top { background: var(--navy); color: #f3ecd9; position: sticky; top: 0; z-index: 10; }
.top .wrap { max-width: 1260px; }
.top-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 14px; padding-bottom: 14px; flex-wrap: wrap; }
.brand { text-decoration: none; display: block; }
.wordmark { display: block; font-family: var(--serif); font-size: 1.7rem; font-weight: 700; color: var(--gold-bright); line-height: 1.1; }
.tagline { display: block; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: #d9cfae; margin-top: 4px; }
nav { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
nav button { font: inherit; font-size: .95rem; background: transparent; color: #e9e1c9; border: 1px solid #5b6786; border-radius: 999px; padding: 6px 14px; cursor: pointer; white-space: nowrap; }
nav button:hover:not([disabled]) { border-color: var(--gold-bright); }
nav button[aria-current="step"], nav button[aria-current="page"] { background: var(--gold); border-color: var(--gold); color: #fff; font-weight: 600; }
nav button[disabled] { opacity: .45; cursor: default; }
nav button.hist { border-radius: 8px; border-color: #8a96b5; margin-left: 6px; }
main { padding-bottom: 36px; outline: none; }
.foot { color: var(--muted); font-size: .92rem; padding-top: 24px; padding-bottom: 40px; text-align: center; max-width: 840px; }

/* cards and layout */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px; box-shadow: var(--shadow); margin: 14px 0; }
.grid { display: grid; gap: 16px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row.end { justify-content: flex-end; }
.spread { justify-content: space-between; }
label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: 5px; }
input[type=text], select, textarea { width: 100%; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
textarea { min-height: 120px; resize: vertical; }
input:focus, select:focus, textarea:focus, button:focus-visible, .pick:focus-visible { outline: 3px solid var(--gold-soft); outline-offset: 1px; border-color: var(--gold); }
::placeholder { color: #8d95a6; }

/* buttons */
.btn { font: inherit; font-weight: 600; border-radius: 12px; border: 2px solid var(--ink); background: var(--surface); color: var(--ink); padding: 11px 22px; cursor: pointer; }
.btn:hover:not([disabled]) { border-color: var(--gold); }
.btn.primary { background: var(--gold); border-color: var(--gold); color: #fff; }
.btn.primary:hover:not([disabled]) { filter: brightness(1.07); }
.btn.primary[disabled] { background: var(--gold-disabled); border-color: var(--gold-disabled); color: #8d7a45; cursor: not-allowed; }
.btn.danger { color: var(--bad); border-color: var(--bad); }
.btn.small { padding: 6px 12px; font-size: .88rem; font-weight: 500; border-width: 1px; border-color: var(--line); }
.btn[disabled] { cursor: not-allowed; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 26px 0 8px; }

/* selectable cards (tracks, personas, modes) */
.pick { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; background: var(--surface); border: 2px solid var(--line); border-radius: 22px; padding: 26px 28px 22px; text-align: left; font: inherit; color: var(--ink); cursor: pointer; box-shadow: var(--shadow); width: 100%; position: relative; }
.pick:hover { border-color: var(--gold); }
.pick[aria-pressed="true"], .pick[aria-checked="true"] { border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft), var(--shadow); }
.pick .kicker { font-size: .85rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.pick .title { font-family: var(--serif); font-size: 1.55rem; font-weight: 700; line-height: 1.2; margin: 4px 0 8px; }
.pick .desc { color: var(--muted); font-size: 1.02rem; }
.pick .tick { position: absolute; top: 14px; right: 16px; width: 26px; height: 26px; border-radius: 50%; background: var(--gold); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .9rem; }
.pick.persona { border-radius: 18px; padding: 18px 18px 16px; }
.pick.persona .head { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.pick.persona .nm { font-family: var(--serif); font-weight: 700; font-size: 1.15rem; line-height: 1.15; }
.pick.persona .rl { font-size: .85rem; color: var(--muted); }
.pick.persona .lab { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--gold); margin-top: 8px; display: block; }
.pick.persona .sigq { font-family: var(--serif); font-style: italic; font-size: .98rem; }
.pick.mode { padding: 18px 20px; border-radius: 16px; }
.pick.mode .title { font-size: 1.2rem; margin: 0 0 4px; }
.seg { display: flex; gap: 10px; flex-wrap: wrap; }
.chipbtn { font: inherit; font-weight: 600; border: 2px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 12px; padding: 10px 18px; cursor: pointer; }
.chipbtn[aria-pressed="true"] { border-color: var(--gold); background: var(--gold-soft); }
.chipbtn:hover { border-color: var(--gold); }

.avatar { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-weight: 700; color: #fff; flex: none; letter-spacing: .02em; border: 2px solid var(--gold-bright); }
.counter { font-weight: 700; }
.section-label { font-size: .85rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin: 0 0 6px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 4px 12px; font-size: .88rem; }
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.badge.strong { background: var(--good-soft); color: var(--good); }
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.weak { background: var(--bad-soft); color: var(--bad); }
.badge.plain { background: var(--gold-soft); color: var(--ink); }

/* stat tiles */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.stat b { display: block; font-family: var(--serif); font-size: 2rem; line-height: 1.1; }
.stat.gold b { color: var(--gold); }
.bigscore { font-family: var(--serif); font-size: 3.4rem; font-weight: 800; line-height: 1; color: var(--gold); }
.bar { height: 10px; border-radius: 99px; background: var(--line); overflow: hidden; min-width: 80px; }
.bar > i { display: block; height: 100%; }
.bar > i.strong { background: var(--good); } .bar > i.ok { background: var(--gold); } .bar > i.weak { background: var(--bad); }
table.t { width: 100%; border-collapse: collapse; }
table.t th, table.t td { text-align: left; padding: 9px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.t th { font-size: .8rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
details.qa { border: 1px solid var(--line); border-radius: 12px; margin: 8px 0; background: var(--surface); }
details.qa > summary { cursor: pointer; padding: 12px 16px; display: flex; gap: 10px; align-items: center; justify-content: space-between; }
details.qa .body { padding: 0 16px 16px; }
.ans { background: var(--bg); border-radius: 10px; padding: 10px 12px; white-space: pre-wrap; margin: 4px 0 10px; }
.qitem { display: flex; gap: 10px; justify-content: space-between; align-items: flex-start; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; margin: 8px 0; }
.check input { margin-top: 5px; }
.notice { background: var(--ok-soft); color: var(--ok); border-radius: 12px; padding: 10px 14px; font-size: .95rem; }
.notice.info { background: var(--gold-soft); color: var(--ink); }
.empty { text-align: center; padding: 30px 12px; color: var(--muted); }
.hint { min-height: 1.3em; color: var(--bad); font-size: .92rem; }
svg.chart { width: 100%; height: 170px; }
.react { font-family: var(--serif); font-size: 1.15rem; margin: 0 0 6px; }
ul.fb { margin: 4px 0 10px; padding-left: 18px; }
ul.fb li { margin: 3px 0; }

/* session: semi-circle panel at a table */
.progress { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--gold); transition: width .3s; }
.room { position: relative; height: 250px; margin: 14px 0 8px; }
.room::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: 0; height: 54px; border-radius: 50% 50% 14px 14px / 100% 100% 14px 14px; background: linear-gradient(#7a5a2a, #5a4120); opacity: .9; }
.seat { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, 0); width: 124px; text-align: center; z-index: 1; opacity: .72; transition: opacity .2s, transform .2s; }
.seat .avatar { margin: 0 auto 4px; width: 56px; height: 56px; font-size: 1.15rem; }
.seat .nm { font-weight: 700; font-size: .85rem; line-height: 1.15; }
.seat .tt { font-size: .74rem; color: var(--muted); line-height: 1.1; }
.seat.active { opacity: 1; transform: translate(-50%, -6px); }
.seat.active .avatar { box-shadow: 0 0 0 4px var(--gold-soft), 0 0 0 7px var(--gold); }
.seat.speaking .avatar { animation: speak 1.1s ease-in-out infinite; }
@keyframes speak { 50% { transform: scale(1.1); } }
.qcard { border-left: 6px solid var(--gold); animation: fadein .35s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.qtext { font-family: var(--serif); font-size: 1.55rem; line-height: 1.35; margin: 10px 0 4px; font-weight: 600; }
.qmeta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.timer { font-variant-numeric: tabular-nums; font-weight: 700; }
.timer.late { color: var(--bad); }
.mic { display: inline-flex; align-items: center; gap: 8px; }
.mic.live { background: var(--bad); border-color: var(--bad); color: #fff; }
.pulse { width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.mic.live .pulse { animation: pulse 1.1s infinite; }
@keyframes pulse { 50% { opacity: .25; transform: scale(.8); } }
@media (prefers-reduced-motion: reduce) { .mic.live .pulse, .seat.speaking .avatar, .qcard { animation: none; } .progress > i, .seat { transition: none; } }

@media (max-width: 640px) {
  .top { position: static; }
  .top-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  nav { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  nav button { flex: none; }
  h1 { font-size: 1.9rem; } .qtext { font-size: 1.25rem; } .bigscore { font-size: 2.6rem; } .lead { font-size: 1.05rem; }
  .wordmark { font-size: 1.4rem; }
  .room { height: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
  .room::after { display: none; }
  .seat { position: static; transform: none; width: 92px; } .seat.active { transform: none; }
  .btn.primary.big { width: 100%; }
}
@media print { .top, .foot, .noprint { display: none !important; } body { background: #fff; } .card { box-shadow: none; } }