/* em101 – ECG-paper look. System fonts only, so it works offline. */
:root{
  --paper:#fff7f5; --grid:#f8e1de; --grid-major:#f1c8c3;
  --surface:#ffffff; --surface-2:#fdf0ee;
  --ink:#171b2e; --ink-2:#4b5068; --ink-3:#6c7088;
  --line:#e8cfcb; --line-strong:#cfa9a4;
  --accent:#2b3fe0; --accent-ink:#ffffff; --accent-soft:#e8ebff;
  --ok:#0f7a52; --ok-bg:#e0f4ea; --bad:#b9263a; --bad-bg:#fde6e9;
  --mid:#8a5a00; --mid-bg:#fdf0d2;
  --serif:Charter,"Iowan Old Style","Palatino Linotype","Book Antiqua",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --paper:#0f131c; --grid:#151b27; --grid-major:#1d2636;
  --surface:#161c28; --surface-2:#1b2332;
  --ink:#e9edf8; --ink-2:#b3bad0; --ink-3:#8c94ae;
  --line:#2a3447; --line-strong:#43506b;
  --accent:#93a3ff; --accent-ink:#0f131c; --accent-soft:#222c52;
  --ok:#4fd6a0; --ok-bg:#12372b; --bad:#ff7a8b; --bad-bg:#3d1b24;
  --mid:#f0be5a; --mid-bg:#3a2d10;
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0f131c; --grid:#151b27; --grid-major:#1d2636;
    --surface:#161c28; --surface-2:#1b2332;
    --ink:#e9edf8; --ink-2:#b3bad0; --ink-3:#8c94ae;
    --line:#2a3447; --line-strong:#43506b;
    --accent:#93a3ff; --accent-ink:#0f131c; --accent-soft:#222c52;
    --ok:#4fd6a0; --ok-bg:#12372b; --bad:#ff7a8b; --bad-bg:#3d1b24;
    --mid:#f0be5a; --mid-bg:#3a2d10;
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font:16px/1.5 var(--sans); color:var(--ink); background-color:var(--paper);
  background-image:
    linear-gradient(var(--grid-major) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-major) 1px,transparent 1px),
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:48px 48px,48px 48px,12px 12px,12px 12px;
  background-position:-1px -1px;
  min-height:100vh;
}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:var(--accent-ink);padding:8px 12px;border-radius:8px;z-index:10}
.skip:focus{left:8px}
.wrap{max-width:980px;margin:0 auto;padding:0 16px calc(48px + env(safe-area-inset-bottom))}
.wrap.narrow{max-width:740px}

/* top bar */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0}
.mark{font-weight:800;font-size:1.55rem;letter-spacing:-.03em;text-decoration:none;color:var(--ink)}
.mark i{font-style:normal;color:var(--accent)}
.top nav{display:flex;gap:6px}
.btn-text{background:none;border:0;padding:8px 10px;border-radius:8px;text-decoration:none;color:var(--ink-2);font-weight:600;font-size:.95rem}
.btn-text:hover{background:var(--surface-2);color:var(--ink)}

/* hero */
.hero{padding:18px 0 8px}
.hero h1{margin:0;font-size:clamp(1.9rem,5.2vw,3rem);line-height:1.08;letter-spacing:-.03em;max-width:15em}
.hero p{margin:10px 0 0;color:var(--ink-2);max-width:34em}
.ecg{display:block;width:100%;height:84px;margin:22px 0 6px;overflow:visible}
.ecg path{fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:trace 2.6s cubic-bezier(.4,.1,.2,1) .15s forwards}
@keyframes trace{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.ecg path{animation:none;stroke-dashoffset:0}}

/* generic panels */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px}
h2{font-size:1.15rem;margin:30px 0 4px;letter-spacing:-.01em}
.lede{margin:0 0 12px;color:var(--ink-2);font-size:.95rem;max-width:40em}

/* action rows */
.rows{list-style:none;margin:14px 0 0;padding:0;overflow:hidden}
.rows li+li{border-top:1px solid var(--line)}
.row{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;background:none;border:0;text-align:left;text-decoration:none}
.row:hover{background:var(--surface-2)}
.row b{display:block;font-size:1rem}
.row small{display:block;color:var(--ink-2);font-size:.88rem}
.row .n{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink-2)}
.row[aria-disabled="true"]{opacity:.55;pointer-events:none}
.row.primary{background:var(--accent);color:var(--accent-ink)}
.row.primary small,.row.primary .n{color:inherit;opacity:.88}
.row.primary:hover{background:var(--accent);filter:brightness(1.07)}

/* bank lists */
.banks{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.bank{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:12px 14px;text-decoration:none;background:var(--surface);border:1px solid var(--line);border-radius:12px;height:100%}
.bank:hover{border-color:var(--accent)}
.bank .bt{font-weight:700;line-height:1.25}
.bank .bm{grid-column:1;color:var(--ink-2);font-size:.86rem}
.bank .bp{grid-column:2;grid-row:1/3;align-self:center;font-variant-numeric:tabular-nums;font-size:.86rem;color:var(--ink-2);text-align:right}
.bar{grid-column:1/-1;height:5px;border-radius:3px;background:var(--surface-2);margin-top:8px;overflow:hidden;border:1px solid var(--line)}
.bar i{display:block;height:100%;background:var(--accent)}

/* bank page */
.crumb{margin:6px 0 0;font-size:.92rem}
.crumb a{color:var(--ink-2)}
.pagehead h1{margin:6px 0 4px;font-size:clamp(1.6rem,4.4vw,2.3rem);letter-spacing:-.025em;line-height:1.12}
.pagehead p{margin:0;color:var(--ink-2)}
.stats{display:flex;flex-wrap:wrap;gap:8px 22px;margin:14px 0 0}
.stats div{font-size:.9rem;color:var(--ink-2)}
.stats b{display:block;font-size:1.35rem;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.2}
.tiles{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}
.tile{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:10px 12px;border-radius:8px;background:var(--surface);border:1.5px solid var(--line-strong);text-align:left}
.tile b{font-size:1.15rem;line-height:1.2}
.tile small{font-size:.8rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.tile:hover{border-color:var(--accent)}
.tile.ok{background:var(--ok-bg);border-color:var(--ok)}
.tile.mid{background:var(--mid-bg);border-color:var(--mid)}
.tile.low{background:var(--bad-bg);border-color:var(--bad)}

/* quiz */
.qtop{display:flex;align-items:center;gap:12px;padding:12px 0 8px}
.qtop .back{padding:8px 12px;border:1.5px solid var(--line-strong);border-radius:8px;background:var(--surface);text-decoration:none;font-weight:600;font-size:.92rem}
.qtop .qt{font-weight:700;line-height:1.2;min-width:0}
.qtop .qt small{display:block;font-weight:500;color:var(--ink-2);font-size:.82rem}
.qtop .cnt{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.seg{display:flex;gap:3px;margin:2px 0 14px}
.seg button{flex:1 1 0;min-width:0;height:10px;padding:0;border:0;border-radius:3px;background:var(--line);position:relative}
.seg button::after{content:"";position:absolute;inset:-10px -1px}
.seg button.ans{background:var(--ink-3)}
.seg button.ok{background:var(--ok)}
.seg button.bad{background:var(--bad)}
.seg button.cur{outline:2px solid var(--accent);outline-offset:2px}
.card{padding:20px 18px 18px}
.meta{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--ink-3);font-size:.84rem;margin-bottom:10px}
.flag{background:none;border:1.5px solid var(--line-strong);border-radius:8px;padding:5px 10px;font-size:.84rem;font-weight:600;color:var(--ink-2)}
.flag[aria-pressed="true"]{background:var(--mid-bg);border-color:var(--mid);color:var(--mid)}
.stem{font:1.18rem/1.62 var(--serif);margin:0 0 14px;max-width:44em}
.stem sub,.stem sup,.t sub,.t sup,.expl sub,.expl sup{line-height:0}
.figs{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 16px}
.figs button{padding:0;border:1px solid var(--line-strong);border-radius:8px;background:#fff;overflow:hidden;cursor:zoom-in;max-width:100%}
.figs img{display:block;max-width:100%;max-height:340px;height:auto}
.opts{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.opts li{display:flex;gap:6px;align-items:stretch}
.opt{flex:1;display:flex;gap:12px;align-items:flex-start;text-align:left;padding:11px 13px;border:1.5px solid var(--line-strong);border-radius:10px;background:var(--surface);line-height:1.45}
.opt .l{flex:none;width:28px;height:28px;border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center;font-weight:700;font-size:.88rem;color:var(--ink-2);margin-top:-1px}
.opt .t{flex:1;min-width:0}
.opt .tag{display:block;font-size:.8rem;font-weight:700;margin-top:3px}
.opt:hover:not([disabled]){border-color:var(--accent)}
.opt.sel{border-color:var(--accent);background:var(--accent-soft)}
.opt.sel .l{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.opt.right{border-color:var(--ok);background:var(--ok-bg)}
.opt.right .l{background:var(--ok);color:var(--surface);border-color:var(--ok)}
.opt.right .tag{color:var(--ok)}
.opt.wrong{border-color:var(--bad);background:var(--bad-bg)}
.opt.wrong .l{background:var(--bad);color:var(--surface);border-color:var(--bad)}
.opt.wrong .tag{color:var(--bad)}
.opt[disabled]{cursor:default}
.opt.struck .t{text-decoration:line-through;opacity:.5}
.x{flex:none;width:36px;border:0;background:none;color:var(--ink-3);border-radius:8px;font-size:1.05rem;opacity:.0}
.opts li:hover .x,.x:focus-visible,.opts li:focus-within .x{opacity:1}
@media (hover:none){.x{opacity:.55}}
.x:hover{background:var(--surface-2);color:var(--ink)}
.fb{margin:16px 0 0;padding:10px 14px;border-radius:10px;font-weight:700}
.fb.ok{background:var(--ok-bg);color:var(--ok)}
.fb.bad{background:var(--bad-bg);color:var(--bad)}
.expl{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.expl h3{margin:0 0 6px;font-size:.95rem}
.expl p{margin:0 0 10px;max-width:46em;line-height:1.62}
.ref{color:var(--ink-2);font-size:.88rem}
.qnav{display:flex;gap:10px;margin-top:16px}
.qnav .grow{flex:1}
.btn{padding:12px 18px;border-radius:10px;border:1.5px solid var(--line-strong);background:var(--surface);font-weight:700;text-decoration:none;display:inline-block;text-align:center}
.btn:hover{border-color:var(--accent)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.pri:hover{filter:brightness(1.08)}
.btn[disabled]{opacity:.45;pointer-events:none}
.kbd{color:var(--ink-3);font-size:.8rem;margin-top:10px}

/* results */
.score{display:flex;gap:22px;align-items:center;padding:20px;flex-wrap:wrap}
.ring{--p:0;width:116px;height:116px;border-radius:50%;background:conic-gradient(var(--ringc,var(--accent)) calc(var(--p)*1%),var(--line) 0);display:grid;place-items:center;flex:none}
.ring span{width:90px;height:90px;border-radius:50%;background:var(--surface);display:grid;place-items:center;font-weight:800;font-size:1.55rem;font-variant-numeric:tabular-nums}
.score h1{margin:0;font-size:1.6rem;letter-spacing:-.02em}
.score p{margin:2px 0 0;color:var(--ink-2)}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 0}
.rv{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.rv details{background:var(--surface);border:1px solid var(--line);border-radius:10px}
.rv summary{display:flex;gap:10px;padding:11px 13px;cursor:pointer;list-style:none;align-items:flex-start}
.rv summary::-webkit-details-marker{display:none}
.rv .ico{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.8rem;margin-top:1px}
.rv .ico.ok{background:var(--ok-bg);color:var(--ok)} .rv .ico.bad{background:var(--bad-bg);color:var(--bad)} .rv .ico.skip{background:var(--surface-2);color:var(--ink-3)}
.rv .s{flex:1;min-width:0;font-family:var(--serif);line-height:1.45}
.rv .body{padding:0 13px 13px 47px}
.rv .body .opts{margin-top:8px}

/* search */
.search{width:100%;padding:13px 14px;font:inherit;border:1.5px solid var(--line-strong);border-radius:10px;background:var(--surface);color:var(--ink);margin-top:12px}
.hint{color:var(--ink-2);font-size:.9rem;margin:10px 0}

/* dialogs */
dialog{border:1px solid var(--line-strong);border-radius:14px;background:var(--surface);color:var(--ink);padding:0;max-width:min(94vw,520px);width:100%}
dialog::backdrop{background:rgba(10,12,24,.55)}
#lb{max-width:96vw;width:auto;background:#fff;padding:8px}
#lb img{display:block;max-width:92vw;max-height:84vh}
.lb-close{display:block;margin:8px auto 0;padding:8px 18px;border-radius:8px;border:1.5px solid var(--line-strong);background:var(--surface);color:var(--ink);font-weight:600}
.dlg{padding:20px}
.dlg h2{margin:0 0 12px}
.dlg fieldset{border:0;padding:0;margin:0 0 14px}
.dlg legend{font-weight:700;margin-bottom:6px;padding:0}
.dlg label{display:flex;gap:10px;align-items:flex-start;padding:5px 0}
.dlg input[type=radio],.dlg input[type=checkbox]{margin-top:4px;accent-color:var(--accent);width:18px;height:18px}
.dlg .sub{display:block;color:var(--ink-2);font-size:.86rem}
.dlg .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.dlg .done{margin-top:16px;display:flex;justify-content:flex-end}

.loading{padding:40px 0;color:var(--ink-2)}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:10px;font-weight:600;z-index:20;max-width:90vw}

@media (min-width:760px){
  .card{padding:26px 28px 24px}
  .library{display:block}
}
@media (max-width:420px){
  .stem{font-size:1.1rem}
  .card{padding:16px 14px}
}

/* sign-in, sync, extra detail */
.sync{font-size:.8rem;color:var(--ink-3);align-self:center;margin-right:4px;white-space:nowrap}
@media (max-width:480px){.sync{display:none}}
.signin{padding:20px 18px;display:grid;gap:6px;margin-top:14px}
.signin label{font-weight:700;margin-top:10px}
.signin .hint2{display:block;font-weight:400;font-size:.86rem;color:var(--ink-2)}
.signin input{font:inherit;padding:12px 13px;border:1.5px solid var(--line-strong);border-radius:10px;background:var(--surface);color:var(--ink);width:100%}
.signin .err{min-height:1.4em;margin:6px 0 0;color:var(--bad);font-weight:600}
.signin .btn{margin-top:4px}
.more{margin-top:14px;padding:12px 14px;border-radius:10px;background:var(--accent-soft);border:1px solid var(--line)}
.more h3{margin:0 0 6px;font-size:.95rem}
.more p{margin:0 0 9px;max-width:46em;line-height:1.62}
.more p:last-child{margin-bottom:0}
.pinopt{margin-top:10px}.pinopt summary{cursor:pointer;color:var(--ink-2);font-weight:600}