/* wizWick tokens + study player. Shared by the app and every standalone export. */
:root{
  --bg:#060B1C; --bg2:#0A1430; --surface:#0E1835; --surface2:#13214A; --line:#22356A; --line2:#2E4686;
  --ink:#E9F1FF; --soft:#A3B5DB; --faint:#6F82AD;
  --accent:#3CB9FF; --accent2:#7FD6FF; --accent-ink:#03142E; --accent-bg:rgba(60,185,255,.13);
  --glow:0 0 0 1px rgba(60,185,255,.35), 0 0 24px rgba(60,185,255,.18);
  --good:#46DDA0; --good-bg:rgba(70,221,160,.12); --warn:#FFC266; --warn-bg:rgba(255,194,102,.12);
  --focus:#9BE0FF;
  --radius:16px; --radius-sm:12px;
  --font-body:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",Verdana,sans-serif;
  --font-head:"Sora","Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#F3F6FC; --bg2:#E9EFFA; --surface:#FFFFFF; --surface2:#F1F5FD; --line:#D3DDEF; --line2:#B9C8E4;
  --ink:#0D1A35; --soft:#45577D; --faint:#6A7A9C;
  --accent:#0A62C2; --accent2:#0A4F9E; --accent-ink:#FFFFFF; --accent-bg:#E4F0FF;
  --glow:0 0 0 1px rgba(10,98,194,.25), 0 6px 18px rgba(13,26,53,.08);
  --good:#0D7A52; --good-bg:#E2F6EE; --warn:#8A5600; --warn-bg:#FFF3DD;
  --focus:#0A62C2;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--ink); background:var(--bg);
  font-family:var(--font-body); font-size:19px; line-height:1.55;
}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.soft{color:var(--soft)} .small{font-size:.88rem}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus); outline-offset:2px}

/* ---------- study column ---------- */
.wz-study{max-width:740px; margin:0 auto}
.wz-study h1,.wz-study h2,.wz-study h3{font-family:var(--font-head); letter-spacing:-.015em; line-height:1.15}
.wz-study h1{font-size:clamp(1.9rem,6vw,2.6rem); margin:.15em 0 .35em; font-weight:700}
.wz-study h1:focus{outline:none}
.wz-study h2{font-size:1.35rem; margin:0 0 .5em; font-weight:650}
.wz-study h3{font-size:1.08rem; margin:0 0 .3em; font-weight:650}
.wz-study p{margin:0 0 .8em}
.wz-kicker{font-family:var(--font-head); font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin:0!important}
.wz-lede{color:var(--soft); font-size:1.06rem}
.wz-when{display:inline-block; font-weight:700; color:var(--ink); background:var(--accent-bg); border:1px solid var(--line2); border-radius:999px; padding:4px 14px; font-size:.95rem}
.wz-head{margin:4px 0 26px}
.wz-h1{margin-top:4px}

/* plan */
.wz-plan{margin:34px 0 0}
.wz-day{position:relative; padding-left:20px; margin:0 0 24px; border-left:3px solid var(--line)}
.wz-day.final{border-left-color:var(--accent)}
.wz-day h3{margin-bottom:.15em}
.wz-day > p{margin:0 0 .6em}
.wz-step{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:14px 16px; margin:0 0 9px; cursor:pointer; transition:border-color .15s, box-shadow .15s, transform .15s;
}
.wz-step:hover{border-color:var(--accent); box-shadow:var(--glow)}
.wz-step .t{flex:1; min-width:0}
.wz-step .t b{display:block; font-size:1.04rem}
.wz-step .t span{display:block; color:var(--soft); font-size:.9rem}
.wz-tick{flex:none; width:30px; height:30px; border-radius:50%; border:2px solid var(--line2); display:grid; place-items:center}
.wz-tick svg{width:16px; height:16px}
.wz-tick.on{border-color:var(--good); background:var(--good); color:var(--bg)}
.wz-pile{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  background:var(--warn-bg); border:1px solid var(--warn); border-radius:var(--radius-sm); padding:14px 16px; margin:22px 0 0}
.wz-unsure{background:var(--warn-bg); border:1px solid var(--warn); border-radius:var(--radius-sm); padding:16px 18px; margin:22px 0 0}
.wz-unsure h2{font-size:1.1rem}
.wz-unsure ul{margin:0; padding-left:1.2em}
.wz-keys{margin:30px 0 0}
.wz-five{padding-left:1.4em; margin:0}
.wz-five li{margin:0 0 10px}
.wz-five li::marker{font-weight:700; color:var(--accent)}
.wz-more{margin:18px 0 0; border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 16px; background:var(--surface)}
.wz-more summary{cursor:pointer; font-weight:700}
.wz-more[open] summary{margin-bottom:10px}
.wz-more ul{margin:0 0 8px; padding-left:1.2em}
.wz-foot{margin:36px 0 8px; padding-top:18px; border-top:1px dashed var(--line)}
.wz-code{font-family:var(--font-mono); font-weight:500; letter-spacing:.02em; color:var(--accent)}

/* tutor box */
.wz-tutor{position:relative; margin:4px 0 28px; padding:20px 20px 18px; border-radius:var(--radius);
  background:linear-gradient(160deg,var(--surface2),var(--surface)); border:1px solid var(--line2); box-shadow:var(--glow)}
.wz-tutor-top{display:flex; gap:16px; align-items:flex-start}
.wz-owl{flex:none; width:72px; height:72px; border-radius:18px; object-fit:cover; box-shadow:0 0 0 2px var(--accent), 0 0 22px rgba(60,185,255,.35)}
.wz-tutor h2{margin:0 0 .3em}
.wz-tutor p{margin:0 0 .6em}
.wz-howto{margin:8px 0 14px; padding-left:1.3em}
.wz-howto li{margin:0 0 6px}
.wz-howto li::marker{color:var(--accent); font-weight:700}

/* bar */
.wz-bar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 16px}
.wz-link{display:inline-flex; align-items:center; gap:4px; background:none; border:0; padding:10px 0; font-weight:700; color:var(--accent); cursor:pointer; text-decoration:underline; text-underline-offset:3px}
.wz-link svg{width:18px; height:18px}
.wz-link.quiet{color:var(--soft); font-weight:400; padding:4px 0}
.wz-where{color:var(--soft); font-size:.9rem; text-align:right; line-height:1.3}

/* card */
.wz-card{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 22px 22px; margin:0 0 18px; box-shadow:0 1px 0 var(--line)}
.wz-tag{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; color:var(--soft); font-size:.92rem; margin:0 0 14px; padding-right:58px}
.wz-ref{font-family:var(--font-head); font-weight:650; color:var(--accent); letter-spacing:.01em}
.wz-basis{font-size:.78rem; border-radius:999px; padding:2px 10px; border:1px solid var(--line2); color:var(--soft)}
.wz-basis.src{border-color:var(--good); color:var(--good); background:var(--good-bg)}
.wz-basis.bg{border-color:var(--warn); color:var(--warn); background:var(--warn-bg)}
.wz-clz{font-size:clamp(1.25rem,4.2vw,1.55rem); line-height:1.55; margin:0}
.wz-prompt{font-size:clamp(1.18rem,3.9vw,1.42rem); line-height:1.55; margin:0}
.gap{display:inline-block; min-width:var(--w,5ch); max-width:100%; border-bottom:3px solid var(--ink); line-height:1.2; vertical-align:baseline}
.gap.on{display:inline; min-width:0; color:var(--accent); font-weight:700; border-bottom-color:var(--accent);
  background:var(--accent-bg); -webkit-box-decoration-break:clone; box-decoration-break:clone; padding:0 .14em; border-radius:4px 4px 0 0; animation:wzfill .35s ease-out}
@keyframes wzfill{from{background-size:0 100%}to{background-size:100% 100%}}
.m{font-family:var(--font-mono); font-weight:500; white-space:nowrap; font-size:.94em}
.wz-note{margin:16px 0 0; padding-top:14px; border-top:1px dashed var(--line); color:var(--soft)}
.wz-hint{background:var(--surface2); border-radius:10px; padding:10px 14px; margin:14px 0 0}
.say{position:absolute; top:16px; right:16px; width:46px; height:46px; border-radius:50%; border:2px solid var(--line2);
  background:var(--surface2); color:var(--ink); cursor:pointer; display:grid; place-items:center}
.say:hover{border-color:var(--accent)} .say.on{border-color:var(--accent); color:var(--accent); box-shadow:var(--glow)}
.say svg{width:22px; height:22px}
.wz-write{border-left:4px solid var(--accent); background:var(--accent-bg); padding:12px 14px; border-radius:0 10px 10px 0; margin:16px 0 0}
.wz-write b{color:var(--accent)}
.wz-steps{margin:16px 0 0; padding:0; list-style:none; border-top:1px dashed var(--line)}
.wz-steps li{padding:12px 0; border-bottom:1px dashed var(--line); display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 16px}
.wz-steps .ln{font-family:var(--font-mono); font-weight:500; font-size:clamp(1rem,3.4vw,1.15rem)}
.wz-steps .ln .m{font-size:1em}
.wz-steps .mv{color:var(--soft); font-size:.95rem}
.wz-answer{margin:16px 0 0; padding:12px 14px; border-radius:10px; background:var(--accent-bg); border:1px solid var(--accent)}
.wz-answer b:first-child{display:block; font-size:.85rem; letter-spacing:.06em; text-transform:uppercase; color:var(--accent)}
.wz-lesson p{font-size:1.08rem}
.wz-big{font-size:1.1rem}
.wz-right{color:var(--accent); font-weight:700}
.wz-actions{display:flex; gap:12px; flex-wrap:wrap; margin:0 0 6px}
.wz-btn{flex:1 1 170px; min-height:54px; border-radius:var(--radius-sm); font-weight:700; font-size:1.04rem; cursor:pointer; padding:10px 18px;
  border:2px solid var(--accent); background:var(--accent); color:var(--accent-ink); text-align:center; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:filter .15s, box-shadow .15s}
.wz-btn:hover{filter:brightness(1.08); box-shadow:var(--glow)}
.wz-btn.ghost{background:transparent; color:var(--ink); border-color:var(--line2)}
.wz-btn.ghost:hover{border-color:var(--accent)}
.wz-btn.inline{flex:none}
.wz-btn[disabled]{opacity:.45; cursor:not-allowed; filter:none; box-shadow:none}
.wz-dots{display:flex; flex-wrap:wrap; gap:6px; margin:18px 0 0}
.wz-dots i{width:9px; height:9px; border-radius:50%; background:var(--line2)}
.wz-dots i.past{background:var(--soft)}
.wz-dots i.now{background:var(--accent); box-shadow:0 0 0 3px var(--accent-bg)}
.wz-count{color:var(--soft); font-size:.9rem; margin:14px 0 0}

/* quiz */
.wz-opts{display:flex; flex-direction:column; gap:10px; margin:18px 0 0}
.wz-opt{position:relative; text-align:left; font-size:1.06rem; line-height:1.4; background:var(--surface2); border:2px solid var(--line); border-radius:var(--radius-sm); padding:14px 44px 14px 16px; cursor:pointer}
.wz-opt:hover:not([disabled]){border-color:var(--accent)}
.wz-opt[disabled]{cursor:default}
.wz-opt.correct{border-color:var(--good); background:var(--good-bg); font-weight:700}
.wz-opt.wrong{opacity:.6; text-decoration:line-through}
.wz-mk{position:absolute; right:12px; top:50%; transform:translateY(-50%); width:24px; height:24px; display:grid; place-items:center; border-radius:50%}
.wz-mk svg{width:14px; height:14px}
.wz-mk.ok{background:var(--good); color:var(--bg)} .wz-mk.no{background:var(--line2); color:var(--ink)}
.wz-gopt .wz-mk{position:static; transform:none; display:inline-grid; margin-left:8px; vertical-align:middle}
.wz-fb{margin:16px 0 0; font-size:1.04rem}
.wz-gopts{display:grid; grid-template-columns:1fr; gap:10px; margin:18px 0 0}
.wz-gopt{display:flex; align-items:center; gap:16px; background:var(--surface2); border:2px solid var(--line); border-radius:var(--radius-sm); padding:8px 14px 8px 8px; cursor:pointer; text-align:left}
.wz-gopt svg{width:150px; flex:none}
@media (min-width:620px){ .wz-gopts{grid-template-columns:repeat(3,minmax(0,1fr))} .wz-gopt{flex-direction:column; align-items:stretch; gap:2px; padding:8px 8px 4px} .wz-gopt svg{width:100%} .wz-gopt b{margin:0 0 0 4px} }
.wz-gopt:hover:not([disabled]){border-color:var(--accent)}
.wz-gopt[disabled]{cursor:default}
.wz-gopt.correct{border-color:var(--good); background:var(--good-bg)}
.wz-gopt.wrong{opacity:.5}

/* diagrams */
.pic{max-width:270px; margin:16px auto 0}
.atom{width:100%; height:auto; display:block}
.atom .ring{fill:none; stroke:var(--soft); stroke-width:1.4; opacity:.8}
.atom .el{fill:var(--accent)}
.atom .nucleus{fill:var(--accent-bg); stroke:var(--accent2); stroke-width:1.6}
.atom .nsym{fill:var(--ink); font:700 17px var(--font-body)}
.atom .pp{fill:var(--accent2)}
.atom .pn{fill:var(--surface); stroke:var(--accent2); stroke-width:1.4}
.atom .ppt{fill:var(--accent-ink); font:700 13px var(--font-body)}
.atom .pnt{fill:var(--accent2); font:700 10.5px var(--font-body)}
:root[data-theme="light"] .atom .ppt{fill:#fff}
.tbl-wrap{overflow-x:auto; margin:16px 0 0}
.tbl{border-collapse:collapse; width:100%; font-size:.98rem}
.tbl caption{text-align:left; font-weight:700; padding:0 0 6px}
.tbl th,.tbl td{border:1px solid var(--line2); padding:8px 10px; text-align:left; vertical-align:top}
.tbl th{background:var(--surface2)}
.nuc{white-space:nowrap; font-weight:700}
.nz{display:inline-block; vertical-align:-.36em; font-size:.56em; line-height:1.02; text-align:right; margin-right:.07em}
.nz i{display:block; font-style:normal}

.wz-flash{position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:50;
  background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:10px; font-size:.95rem; max-width:90vw}
@media (prefers-reduced-motion: reduce){ .gap.on{animation:none} .wz-step,.wz-btn{transition:none} }
@media (max-width:560px){ body{font-size:18px} .wz-card{padding:20px 16px 18px} .wz-tutor-top{flex-direction:column} }
@media print{ body{background:#fff; color:#000} .say,.wz-actions,.wz-bar{display:none} }