/* Structured Chance - colours and type come from assets/theme.css */
body{background:var(--bg); color:var(--ink); font-family:var(--font-ui); line-height:1.55}
header.page{padding:24px 20px 16px; border-bottom:1px solid var(--line); background:var(--surface)}
.wrap{max-width:1140px; margin:0 auto; padding:0 18px}
h1{font-family:var(--font-display); margin:0; font-size:1.65rem; font-weight:600}
.sub{color:var(--ink-2); font-size:.87rem; margin-top:4px}
.levels{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.lvl{font-family:inherit; font-size:.82rem; padding:8px 13px; border-radius:20px; border:1px solid var(--line-2); background:var(--surface); cursor:pointer; text-align:left; color:var(--ink); transition:.15s}
.lvl:hover{border-color:var(--accent)}
.lvl.active{background:var(--gold-fill); border-color:var(--gold-fill); color:var(--on-gold); font-weight:600}
.lvl small{display:block; color:var(--ink-3); font-size:.69rem; font-weight:400}
.lvl.active small{color:var(--on-gold); opacity:.8}
.controls{display:flex; flex-wrap:wrap; gap:9px; align-items:center; margin-top:14px}
button{font-family:inherit; font-size:.86rem; border:1px solid var(--line-2); background:var(--surface); color:var(--ink); padding:9px 14px; border-radius:var(--radius-sm); cursor:pointer; box-shadow:var(--shadow); transition:.15s}
button:hover{border-color:var(--accent); color:var(--accent)}
button.primary{background:var(--accent-fill); color:var(--on-accent); border-color:var(--accent-fill)}
button.primary:hover{background:var(--accent-hover); border-color:var(--accent-hover); color:var(--on-accent)}
button.small{font-size:.78rem; padding:6px 10px; box-shadow:none}
.legend{font-size:.79rem; color:var(--ink-2); margin-top:9px}
.seedline{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:12px; font-size:.8rem; color:var(--ink-3)}
.seedline input{font-family:var(--font-mono); font-size:.8rem; padding:7px 9px; border:1px solid var(--line-2); border-radius:7px; width:150px; background:var(--bg); color:var(--ink)}
main{padding:20px 0 70px}
.warnbox{background:var(--warn-bg); border:1px solid var(--warn-line); color:var(--warn-ink); border-radius:var(--radius-sm); padding:12px 16px; margin:0 0 18px; font-size:.87rem; display:none}
.warnbox.show{display:block}
.warnbox ul{margin:8px 0 0; padding-left:20px}
.group{margin-bottom:24px}
.group h2{font-family:var(--font-ui); font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color:var(--warm); border-bottom:1px solid var(--line); padding-bottom:6px; margin:0 0 12px; font-weight:700}
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:12px; align-items:start}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:13px 14px; box-shadow:var(--shadow); position:relative; display:flex; flex-direction:column}
.card .pname{font-size:.68rem; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3); display:flex; justify-content:space-between; align-items:center; gap:6px}
.cardbtns{display:flex; gap:2px; flex:0 0 auto}
.card .pname button{border:none; background:none; padding:2px 5px; box-shadow:none; color:var(--warm-2); font-size:.88rem; line-height:1; border-radius:6px}
.card .pname button:hover{background:var(--surface-2); color:var(--accent)}
.card .pname button.info{font-family:var(--font-display); font-style:italic; font-weight:700; font-size:.95rem}
.card .pname button.info.open{background:var(--accent-fill); color:var(--on-accent)}
.card .val{font-size:1rem; margin-top:7px; font-weight:600}
.card .idx{font-size:.68rem; color:var(--gold); font-weight:700; margin-top:6px; font-variant-numeric:tabular-nums}

.cyclebar{display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; margin-top:9px;
  padding-top:9px; border-top:1px dashed var(--line-2); font-size:.85rem}
.cyclebar.off .cygrp{opacity:.4; pointer-events:none}
.cyclebar .cyto{display:flex; align-items:center; gap:6px; font-weight:700}
.cyclebar .cyhint{color:var(--muted); font-size:.78rem}
.cyclebar .cygrp{display:flex; align-items:center; gap:6px}
.cyclebar input{width:9em} .cyclebar input#cyNum{width:4.2em; text-align:center}
.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.card .scope{font-size:.7rem; font-weight:700; margin-top:6px; letter-spacing:.01em}
.card .scope.opening{color:var(--scope-open)}
.card .scope.global{color:var(--scope-glob)}
.card .scope.sectional{color:var(--scope-sect)}
.card .scope.event{color:var(--scope-evt)}
.scoperule{font-size:.8rem; color:var(--muted); border-left:2px solid var(--line-2); padding-left:9px; margin-bottom:9px}
.warnbox i{display:block; opacity:.8; font-size:.95em; margin-top:2px}
.band{font-size:.62rem; border-radius:5px; padding:1px 6px; vertical-align:middle}
.band.std{background:var(--green-soft); color:var(--green)}
.band.full{background:var(--accent-soft); color:var(--accent)}
.card.flagged{border-color:var(--warn-line); background:var(--warn-bg)}
/* inline description panel */
.info-panel{display:none; margin-top:11px; padding-top:11px; border-top:1px dashed var(--line-2)}
.info-panel.open{display:block}
.def{font-size:.84rem; margin:0 0 6px; color:var(--ink)}
.listen{font-size:.78rem; color:var(--ink-2); font-style:italic; margin:0 0 9px}
.listen b{color:var(--warm); font-style:normal}
.demo{background:var(--demo-bg); border:1px solid var(--line); border-radius:var(--radius-sm); padding:8px}
.demo svg{display:block; width:100%; height:auto}
.row{display:flex; gap:8px; align-items:center; margin-top:8px; flex-wrap:wrap}
button.play{font-size:.8rem; border:1px solid var(--warm); background:var(--warm); color:var(--surface); padding:7px 13px; border-radius:8px; cursor:pointer; box-shadow:none}
button.play:hover{filter:brightness(1.1); color:var(--surface)}
.tempo{font-size:.74rem; color:var(--ink-3)}
.notxt{font-size:.78rem; color:var(--ink-3); padding:6px 2px}
.keylabel{font:10px var(--font-ui); fill:var(--ink-3)}
.spell{font:11px var(--font-ui); fill:var(--warm)}
.catblurb{font-size:.75rem; color:var(--ink-2); margin-top:9px; padding-top:8px; border-top:1px solid var(--line)}
.catblurb b{color:var(--navy); font-style:normal}
/* composition log */
.logsec{margin-top:34px; border-top:2px solid var(--gold-fill); padding-top:18px}
.logsec h2{font-family:var(--font-display); font-size:1.2rem; color:var(--navy); margin:0 0 4px; font-weight:600}
.logsec .hint{color:var(--ink-2); font-size:.82rem; margin:0 0 14px}
.progline{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px}
.pbar{flex:1; min-width:180px; height:11px; background:var(--surface-2); border-radius:7px; overflow:hidden}
.pbar>div{height:100%; background:linear-gradient(90deg,var(--warm-2),var(--green)); border-radius:7px; transition:.3s}
.pcount{font-size:.8rem; color:var(--ink-2); white-space:nowrap; font-variant-numeric:tabular-nums}
.saveform{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:16px}
.saveform input{font-family:inherit; font-size:.88rem; padding:9px 11px; border:1px solid var(--line-2); border-radius:var(--radius-sm); background:var(--surface); color:var(--ink); flex:1; min-width:200px}
.entry{background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--warm-2); border-radius:11px; padding:12px 14px; margin-bottom:10px; box-shadow:var(--shadow)}
.entry.done{border-left-color:var(--green)}
.entry .etop{display:flex; justify-content:space-between; gap:10px; align-items:baseline; flex-wrap:wrap}
.entry .etitle{font-size:.98rem; font-weight:600}
.entry .emeta{font-size:.74rem; color:var(--ink-3)}
.entry select,.entry textarea{font-family:inherit; font-size:.82rem; border:1px solid var(--line-2); border-radius:8px; background:var(--bg); color:var(--ink); padding:6px 9px}
.entry textarea{width:100%; margin-top:8px; min-height:52px; resize:vertical}
.entry .erow{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:9px}
.empty{color:var(--ink-3); font-size:.85rem; font-style:italic; padding:10px 0}
footer.page{border-top:1px solid var(--line); padding:16px 0; color:var(--ink-3); font-size:.75rem; text-align:center}

/* ---- session timer ---- */
.timerbar{display:flex; flex-wrap:wrap; gap:9px; align-items:center; margin-top:13px;
  padding:9px 12px; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--surface); font-size:.8rem; color:var(--ink-2)}
.timerbar .tlabel{font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3)}
.tmode{display:flex; gap:0; border:1px solid var(--line-2); border-radius:999px; overflow:hidden}
.tmode .tm{font-family:inherit; font-size:.76rem; padding:5px 13px; border:none; background:transparent;
  color:var(--ink-2); cursor:pointer; box-shadow:none; border-radius:0}
.tmode .tm:hover{background:var(--surface-2); color:var(--ink)}
.tmode .tm.on{background:var(--accent-fill); color:var(--on-accent); font-weight:700}
.tmins{display:flex; align-items:center; gap:6px; font-size:.76rem; color:var(--ink-3)}
.tmins input{width:64px; font-family:var(--font-mono); font-size:.78rem; padding:5px 7px;
  border:1px solid var(--line-2); border-radius:7px; background:var(--bg); color:var(--ink); text-align:center}
.clock{font-family:var(--font-mono); font-size:1.15rem; font-weight:700; letter-spacing:.02em;
  font-variant-numeric:tabular-nums; color:var(--ink); min-width:78px; text-align:center}
.clock.run{color:var(--accent)}
.clock.over{color:var(--warn-ink)}
.clock.done{color:var(--danger)}
.thide{display:flex; align-items:center; gap:5px; font-size:.73rem; color:var(--ink-3); cursor:pointer}
.thide input{accent-color:var(--accent)}
.tnote{font-size:.73rem; color:var(--ink-3); flex:1; min-width:130px}
.tnote.warn{color:var(--warn-ink)}
.timerbar.off .tmins,.timerbar.off #tStart,.timerbar.off #tReset,
.timerbar.off .clock,.timerbar.off .thide{display:none}
.timerbar.ringing{border-color:var(--danger); background:var(--danger-soft)}

/* ---- process banner ---- */
.process{margin:0 0 18px}
.process details{border:1px solid var(--line); border-left:3px solid var(--warm-2);
  border-radius:var(--radius-sm); background:var(--surface); box-shadow:var(--shadow)}
.process summary{list-style:none; cursor:pointer; padding:11px 15px; display:flex;
  align-items:baseline; gap:12px; flex-wrap:wrap}
.process summary::-webkit-details-marker{display:none}
.process summary::after{content:'\25BE'; margin-left:auto; color:var(--ink-3); font-size:.7rem; transition:transform .2s}
.process details[open] summary::after{transform:rotate(180deg)}
.process .ptitle{font-size:.68rem; text-transform:uppercase; letter-spacing:.11em;
  color:var(--warm); font-weight:700}
.process .pwhy{font-size:.82rem; color:var(--ink-2)}
.psteps{display:grid; grid-template-columns:repeat(auto-fit,minmax(185px,1fr)); gap:12px;
  margin:0; padding:4px 15px 15px; list-style:none; counter-reset:pstep}
.psteps li{counter-increment:pstep; padding-top:9px; border-top:2px solid var(--line)}
.psteps li::before{content:counter(pstep); display:block; font-family:var(--font-mono);
  font-size:.68rem; font-weight:700; color:var(--gold); margin-bottom:3px}
.psteps b{display:block; font-size:.85rem; margin-bottom:2px}
.psteps span{font-size:.76rem; color:var(--ink-2); line-height:1.45}

/* ---- log entries: the five steps ---- */
.entry .steps{display:flex; flex-wrap:wrap; gap:5px; margin-top:10px}
.entry .step{display:flex; align-items:center; gap:6px; font-family:inherit; font-size:.72rem;
  padding:5px 10px; border:1px solid var(--line-2); border-radius:999px;
  background:var(--bg); color:var(--ink-2); cursor:pointer; box-shadow:none}
.entry .step:hover{border-color:var(--accent)}
.entry .step .dot{width:11px; height:11px; border-radius:50%; border:1.5px solid var(--line-2); flex:0 0 auto}
.entry .step.on{background:var(--green-soft); border-color:var(--green); color:var(--green); font-weight:600}
.entry .step.on .dot{background:var(--green-fill); border-color:var(--green-fill)}
.entry .timeline{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:10px;
  font-size:.75rem; color:var(--ink-3)}
.entry .timeline label{display:flex; align-items:center; gap:5px}
.entry .timeline input[type=number]{width:58px; font-family:var(--font-mono); font-size:.76rem;
  padding:4px 6px; border:1px solid var(--line-2); border-radius:6px; background:var(--bg); color:var(--ink); text-align:center}
.entry .timeline input[type=checkbox]{accent-color:var(--accent)}
.entry .timeline .over{color:var(--warn-ink); font-weight:600}
.entry .recline{display:flex; align-items:center; gap:8px; margin-top:9px}
.entry .recline input[type=text]{flex:1; min-width:150px; font-family:inherit; font-size:.8rem;
  padding:6px 9px; border:1px solid var(--line-2); border-radius:8px; background:var(--bg); color:var(--ink)}
.logstats{font-size:.75rem; color:var(--ink-3); margin:-6px 0 14px}

@media print{
  .ms-bar,.levels,.controls,.seedline,footer.page,.card .pname button,.logsec,.legend,.timerbar,.process{display:none !important}
  .card{box-shadow:none; break-inside:avoid}
  button.play{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}

/* ---- v21 ---- */
.card.branch{box-shadow:inset 3px 0 0 var(--scope-open,#6b7bd6)}
.card.repeat{box-shadow:inset 3px 0 0 #b8860b}
.card.repeat .pname::after{content:'second encounter';font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;opacity:.75;margin-left:8px;font-weight:600}
.realise{margin:8px 0 2px;padding:9px 11px;border-left:2px solid var(--accent,#33418c);
  background:var(--panel,rgba(127,127,127,.07));font-size:13.5px;line-height:1.5;border-radius:2px}
.realise b{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;opacity:.7;margin-bottom:3px}
.durrule{margin-top:6px;font-size:12.5px}
.durrule b{display:inline;font-size:12.5px;letter-spacing:0;text-transform:none;opacity:1;margin:0}
.nottaken{margin-top:6px;font-size:11.5px;opacity:.65;font-style:italic}
.standing{padding:12px 14px;border:1px solid var(--line,rgba(127,127,127,.28));border-radius:3px;font-size:14px}
.standing p{margin:0 0 10px}
.standing ul{margin:0;padding-left:20px}
.standing li{margin:3px 0}
.spiceroll{margin-top:8px}
table.declared,table.rubric{width:100%;border-collapse:collapse;margin-top:10px;font-size:13px}
table.declared th,table.declared td,table.rubric th,table.rubric td{
  border:1px solid var(--line,rgba(127,127,127,.28));padding:6px 8px;text-align:left;vertical-align:top}
table.declared thead th{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
table.declared th{width:22%;font-weight:600}
table.declared textarea{width:100%;box-sizing:border-box;font:inherit;font-size:12.5px;
  background:transparent;color:inherit;border:0;resize:vertical}
table.declared select{font:inherit;font-size:12.5px;width:100%;background:transparent;color:inherit}
tr.opensep th{background:var(--panel,rgba(127,127,127,.07));font-size:11.5px;letter-spacing:.04em}
table.rubric th{width:24%}
table.rubric td.score{width:70px;text-align:center}
table.rubric select{font:inherit;background:transparent;color:inherit}
@media print{.realise{border-left-width:2px}.nottaken{opacity:.8}}

.sheetfoot{margin-top:10px;font-size:11.5px;opacity:.6}
.saved{color:#2F6B45;font-weight:600;opacity:0;transition:opacity .2s}
.saved.on{opacity:1}
.spicewhy input{font:inherit;font-size:12.5px;width:min(340px,100%);background:transparent;color:inherit;
  border:0;border-bottom:1px solid var(--line,rgba(127,127,127,.4));padding:2px 0;margin-left:4px}
.sheetsum{margin:10px 0;padding:9px 11px;border:1px solid var(--line,rgba(127,127,127,.28));border-radius:3px;
  background:var(--panel,rgba(127,127,127,.05))}
.sline{font-size:12px}
.sline.dim{opacity:.6;margin-top:6px}
.openlist{margin-top:6px;display:flex;flex-direction:column;gap:2px;font-size:11.5px;opacity:.85}
table.rescore{width:100%;border-collapse:collapse;margin-top:8px;font-size:12px}
table.rescore th,table.rescore td{border-bottom:1px solid var(--line,rgba(127,127,127,.2));padding:3px 6px;text-align:left}
table.rescore thead th{font-size:10px;letter-spacing:.09em;text-transform:uppercase;opacity:.65}
table.rescore td.num{text-align:center;width:78px;font-variant-numeric:tabular-nums}
table.rescore select{font:inherit;font-size:12px;background:transparent;color:inherit}
table.rescore td.delta{width:46px;text-align:center;font-variant-numeric:tabular-nums;font-weight:600}
td.delta.up{color:#2F6B45} td.delta.down{color:#A0392A}

/* ---- v21.2: quieter card, collapsible sheets ---- */
.card .idxline{margin-top:6px;font-size:11px;opacity:.5;font-variant-numeric:tabular-nums}
details.fold{border:1px solid var(--line,rgba(127,127,127,.28));border-radius:3px;margin-bottom:10px;
  background:var(--panel,rgba(127,127,127,.04))}
details.fold>summary{cursor:pointer;list-style:none;padding:9px 12px;display:flex;align-items:baseline;
  gap:10px;flex-wrap:wrap;font-size:13.5px}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary::before{content:'\25B8';font-size:10px;opacity:.55;transform:translateY(-1px)}
details.fold[open]>summary::before{content:'\25BE'}
details.fold>summary b{font-weight:600}
details.fold>summary .st{margin-left:auto;font-size:11.5px;opacity:.6;font-variant-numeric:tabular-nums}
details.fold .foldbody{padding:0 12px 12px}
details.fold>summary:focus-visible{outline:2px solid var(--accent,#33418c);outline-offset:-2px}
.ctxline{font-size:12.5px}

.foldwhy{font-size:11.5px;opacity:.6;margin-top:10px}
details.fold .foldwhy:first-child{margin-top:0;margin-bottom:10px}
.card .idx,.card .band{display:none}
.info-panel .idxline{font-size:11px;opacity:.55;letter-spacing:.02em;margin-bottom:5px;font-variant-numeric:tabular-nums}
.info-panel .scope{margin-bottom:6px}

.kindtag{font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  color:var(--accent,#8b9ae8);opacity:.85;margin:2px 0 6px;padding-left:8px;
  border-left:2px solid currentColor;line-height:1.35}
details.fold .spiceroll{margin:0 0 8px}
details.fold label{display:block;font-size:13px;margin:4px 0}

/* ---- anchored self-assessment ---- */
.opensrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 16px;
  padding-bottom:12px;border-bottom:1px solid var(--line,rgba(127,127,127,.22));font-size:13px}
.opensrow>b{font-size:11px;letter-spacing:.09em;text-transform:uppercase;opacity:.7}
label.opensel{display:flex;align-items:center;gap:5px}
label.opensel>span{font-size:10.5px;opacity:.5;font-variant-numeric:tabular-nums}
label.opensel select{font:inherit;font-size:12.5px;background:transparent;color:inherit;
  border:0;border-bottom:1px solid var(--line,rgba(127,127,127,.4));padding:2px 0;max-width:190px}
.axis{margin-bottom:16px}
.axis:last-child{margin-bottom:0}
.axhead{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;opacity:.75;margin-bottom:5px}
ol.anchors{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
ol.anchors li{margin:0}
label.anch{display:grid;grid-template-columns:22px 1fr;gap:9px;align-items:start;
  padding:5px 8px;border-radius:3px;cursor:pointer;font-size:12.5px;line-height:1.45}
label.anch:hover{background:var(--panel,rgba(127,127,127,.07))}
label.anch input{grid-column:1;margin:2px 0 0;accent-color:var(--accent,#8b9ae8)}
label.anch b{display:none}
label.anch span{grid-column:2;opacity:.8}
label.anch.on{background:var(--accent-soft,rgba(127,127,180,.14))}
label.anch.on span{opacity:1;font-weight:500}
label.anch:focus-within{outline:2px solid var(--accent,#33418c);outline-offset:1px}

.lvl .bkno{display:block;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.6;margin-bottom:1px}
.metline{font-size:11.5px;opacity:.75;margin:4px 0 6px;padding-left:8px;
  border-left:2px solid var(--scope-evt,#b8860b)}
.ctxline.dim{opacity:.65;font-size:11.5px}

#lvbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0 4px}
.lvbtn{font:inherit;font-size:13px;font-weight:600;cursor:pointer;border-radius:999px;
  padding:6px 15px;background:transparent;color:inherit;
  border:1px solid var(--line,rgba(127,127,127,.38));line-height:1.25;text-align:left}
.lvbtn small{display:block;font-size:10px;font-weight:400;opacity:.65;letter-spacing:.02em}
.lvbtn:hover{border-color:var(--accent,#33418c)}
.lvbtn.active{background:var(--accent,#33418c);border-color:var(--accent,#33418c);color:#fff}
:root[data-theme="dark"] .lvbtn.active,
:root:not([data-theme="light"]) .lvbtn.active{color:#0F1117}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .lvbtn.active{color:#fff}}
.lvnote{flex:1 1 260px;min-width:220px;font-size:11.5px;opacity:.65;line-height:1.45}
.lvl .bkno{letter-spacing:.16em}

/* ============ v25: laid out like the Piano Trainer ============
   Same tokens, same idioms: 980px column, pill selectors, uppercase
   micro-labels over tabular numerals, thin cards with a left accent. */
.wrap{max-width:980px}
header.page{padding:22px 16px 18px}
h1{font-size:1.55rem}
.hdrtop{display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:8px}
.hdrtop .sub{margin-top:0}
.mlab{font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3)}

/* the procedure, as steps */
.setup{list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:8px}
.step{display:flex; gap:12px; align-items:flex-start; background:var(--surface);
  border:1px solid var(--line); border-left:4px solid var(--accent);
  border-radius:var(--radius); padding:11px 14px; box-shadow:var(--shadow)}
.step .sn{flex:0 0 auto; width:22px; height:22px; border-radius:50%; background:var(--accent-fill);
  color:var(--on-accent); font-size:.74rem; font-weight:700; display:flex; align-items:center;
  justify-content:center; font-variant-numeric:tabular-nums; margin-top:1px}
.step .sb{min-width:0; flex:1}
.step .sl{font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); font-weight:700}
.step .sl em{font-style:normal; text-transform:none; letter-spacing:0; font-weight:400;
  color:var(--muted); margin-left:7px; font-size:.95em}
.step .levels,.step .lvrow{margin-top:8px}
.step .seedline,.step .timerbar{margin-top:8px}
.step .cyclebar{margin-top:8px}
.step .timerbar{border:none; padding:0; background:none}

/* book + level selectors: pills, accent when chosen */
.levels{display:flex; flex-wrap:wrap; gap:6px; margin-top:0}
.lvl{border-radius:999px; padding:7px 14px; font-size:.83rem}
.lvl.active{background:var(--accent-fill); border-color:var(--accent-fill); color:var(--on-accent); font-weight:700}
.lvl.active small{color:var(--on-accent); opacity:.85}
.lvrow{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.lvbtn{font-family:inherit; font-size:.83rem; padding:7px 14px; border-radius:999px;
  border:1px solid var(--line-2); background:var(--surface); color:var(--ink); cursor:pointer;
  text-align:left; box-shadow:var(--shadow); transition:.15s}
.lvbtn:hover{border-color:var(--accent)}
.lvbtn.active{background:var(--accent-fill); border-color:var(--accent-fill); color:var(--on-accent); font-weight:700}
.lvbtn small{display:block; font-size:.69rem; font-weight:400; color:var(--ink-3)}
.lvbtn.active small{color:var(--on-accent); opacity:.85}

/* two buttons, not six */
.controls{margin-top:14px; gap:8px}
.menu{position:relative; display:inline-block}
.menu>summary{list-style:none; cursor:pointer; font-size:.86rem; padding:9px 14px;
  border:1px solid var(--line-2); border-radius:var(--radius-sm); background:var(--surface);
  color:var(--ink); box-shadow:var(--shadow); user-select:none}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary::after{content:' \25BE'; color:var(--ink-3); font-size:.75em}
.menu>summary:hover{border-color:var(--accent); color:var(--accent)}
.menuitems{position:absolute; z-index:40; top:calc(100% + 5px); left:0; min-width:200px;
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lg); padding:5px; display:flex; flex-direction:column; gap:2px}
.menuitems button{width:100%; text-align:left; border:none; box-shadow:none; background:none;
  padding:8px 10px; border-radius:7px; font-size:.83rem}
.menuitems button:hover{background:var(--surface-2); color:var(--accent)}

/* steps 5-7 happen away from the screen */
.offsteps{margin:14px 0 0; padding-left:0; list-style:none; counter-reset:off 4;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:10px}
.offsteps li{counter-increment:off; font-size:.8rem; color:var(--ink-2);
  border-top:2px solid var(--line); padding-top:8px}
.offsteps li::before{content:counter(off); display:block; font-family:var(--font-mono);
  font-size:.72rem; font-weight:700; color:var(--ink-3); margin-bottom:3px}
.offsteps b{color:var(--ink); font-weight:700}

@media(max-width:560px){
  .step{flex-wrap:nowrap}
  .lvl,.lvbtn{font-size:.79rem; padding:6px 11px}
  .menuitems{left:auto; right:0}
}