/* Palette follows the taja default skin (same as hwainfo); no dark mode */
:root{
  --bg:#ECEFF2; --side:#D8E5F1; --surface:#FFFFFF; --ink:#2A3036; --muted:#7A8590; --soft:#F5F7F9;
  --blue:#5B9FE8; --link:#2B66B8; --track:#C9D3DC;
  --grid:rgba(42,48,54,.09); --grid-strong:rgba(42,48,54,.2);
  --ok:#2FAF5F; --ok-bg:#E2F4EA; --ok-ink:#1D7A41;
  --no:#D6383B; --no-bg:#FDE8E8; --no-ink:#A8262A;
  --yel-c:#FFF8DF; --yel-k:#FFEDB3; --org-k:#F9CFA8;
  /* Entry block palette (EntryStatic.colorSet.block), only for debugger panels; code itself is plain text */
  --e-flow:#19baea; --e-calc:#f4af18; --e-var:#dd47d8; --e-looks:#ff3a61; --e-text:#e43500; --e-moving:#ad3efb;
  --t-flow:#0f7fa3; --t-judge:#1b3ad8; --t-calc:#c46a00; --t-var:#b819b3; --t-moving:#8b19db;
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0; min-height:100vh; background:var(--bg); color:var(--ink);
  font-family:"Noto Sans KR",-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif; font-size:16px; line-height:1.6;
  -webkit-text-size-adjust:100%}
button{font:inherit; color:inherit}
[hidden]{display:none !important}

/* ── Header ── */
.top{display:flex; align-items:center; gap:18px 26px; flex-wrap:wrap; padding:16px 22px 14px; max-width:1500px; margin:0 auto}
.brand{display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none; user-select:none; white-space:nowrap; animation:fadeIn .5s ease backwards}
.brand .logo{width:46px; height:46px; flex:none; transition:transform .35s var(--ease)}
.brand:hover .logo{transform:rotate(-6deg) scale(1.05)}
.brand b{display:block; font-size:1.45rem; font-weight:700; line-height:1.15; letter-spacing:-.01em}
.brand small{display:block; margin-top:2px; font-size:.76rem; font-weight:500; color:var(--muted)}

/* ── Layout: problem buttons on the left, the problem on the right ── */
.wrap{display:grid; grid-template-columns:230px minmax(0, 1fr); gap:20px; align-items:start; max-width:1500px; margin:0 auto; padding:0 22px 30px}
.card{border-radius:22px; background:var(--surface);
  box-shadow:0 18px 40px -28px rgba(30,60,100,.5), 0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent)}

.side{position:sticky; top:14px; max-height:calc(100vh - 28px); display:flex; flex-direction:column; padding:16px 12px 12px;
  animation:fadeUp .55s var(--ease) .15s backwards}
.side h2{margin:0 6px 8px; font-size:1.02rem; font-weight:700; line-height:1.35}
.side .note{margin:0 6px 4px; font-size:.84rem; color:var(--muted)}
.legend{display:flex; gap:10px; flex-wrap:wrap; margin:0 6px 10px; font-size:.72rem; color:var(--muted)}
.legend span{display:inline-flex; align-items:center; gap:4px}
/* Compact list: a lone problem takes a whole row, the problems of one group share a row (4-1 | 4-2) */
.plist{list-style:none; margin:0; padding:3px; display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:5px; overflow:auto; scrollbar-width:thin; scrollbar-color:var(--track) transparent}
.plist > li{grid-column:span var(--span, 6); min-width:0}
.pbtn{width:100%; display:flex; align-items:center; justify-content:space-between; gap:6px; height:34px; padding:0 9px 0 11px; border:0; border-radius:11px; cursor:pointer;
  font-size:.84rem; font-weight:700; color:var(--muted); background:var(--soft); white-space:nowrap;
  transition:background-color .25s, color .25s, box-shadow .25s, transform .1s}
.pbtn .pn{min-width:0; overflow:hidden; text-overflow:ellipsis}
.pbtn.read{justify-content:flex-start}
.pbtn svg{width:15px; height:15px; flex:none}
.pbtn:hover{color:var(--ink); background:color-mix(in srgb, var(--blue) 9%, var(--soft))}
.pbtn:active{transform:scale(.97)}
.pbtn[aria-current="true"]{color:var(--link); background:var(--surface); box-shadow:0 0 0 2px var(--blue), 0 8px 18px -12px rgba(40,80,140,.6)}
.pbtn:focus-visible{outline:2px solid var(--blue); outline-offset:2px}

/* Result mark: green = 맞힘, red = 틀림, ring = 안 풂 */
.st{flex:none; display:inline-block; width:10px; height:10px; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--track); transition:background-color .3s, box-shadow .3s}
.st.o{background:var(--ok); box-shadow:none}
.st.x{background:var(--no); box-shadow:none}

/* ── Problem card ── */
.main{min-width:0}
.prob{padding:24px 28px 26px}
.prob.enter{animation:viewIn .4s var(--ease)}
.phead{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px}
.phead h1{margin:0; font-size:1.45rem; font-weight:700; line-height:1.2}
.pill{display:inline-flex; align-items:center; gap:5px; padding:2px 10px; border-radius:999px; font-size:.76rem; font-weight:700; line-height:22px}
.pill.o{color:var(--ok-ink); background:var(--ok-bg)}
.pill.x{color:var(--no-ink); background:var(--no-bg)}
.pill.n{color:var(--muted); background:var(--soft)}
.phead .pill{margin-left:auto}

.passage{margin:0 0 16px; padding:14px 18px; border-radius:16px; background:var(--soft); font-size:.97rem}
.passage.group{background:var(--yel-c)}
.passage .gtag{display:inline-block; margin-bottom:6px; padding:0 9px; border-radius:999px; font-size:.74rem; font-weight:700; line-height:21px; color:#8A5A0B; background:var(--yel-k)}
.passage p, .expl p{margin:0 0 8px}
.passage > :last-child, .expl-in > :last-child{margin-bottom:0}
.tbl{overflow-x:auto; margin:6px 0 10px}
.tbl table{border-collapse:separate; border-spacing:0; min-width:min(100%, 320px); font-size:.92rem; background:var(--surface); border-radius:12px;
  box-shadow:0 0 0 1px var(--grid-strong); overflow:hidden}
.tbl th, .tbl td{padding:6px 12px; text-align:center; border-right:1px solid var(--grid); border-bottom:1px solid var(--grid); white-space:nowrap}
.tbl th{background:#E8F1FC; font-weight:700}
.tbl tr > :last-child{border-right:0}
.tbl tbody tr:last-child > *{border-bottom:0}
code{padding:0 5px; border-radius:6px; font-family:inherit; background:color-mix(in srgb, var(--ink) 7%, transparent)}

/* ── Code (plain black text, one row per block) ── */
.code{margin:0 0 18px; padding:10px 0; border-radius:16px; background:#FBFCFD; box-shadow:inset 0 0 0 1px var(--grid-strong); font-size:15px; overflow-x:auto}
.ln{position:relative; display:flex; align-items:stretch; min-height:30px; padding-right:14px; transition:background-color .3s}
.ln .no{flex:none; width:38px; padding:4px 12px 0 0; text-align:right; font-size:11.5px; line-height:22px; color:#A7B0B9; user-select:none}
.ln .ind{flex:none; width:calc(var(--d) * 26px);
  background:repeating-linear-gradient(to right, transparent 0 9px, var(--grid-strong) 9px 10px, transparent 10px 26px)}
.ln .tx{flex:1; min-width:0; margin:2px 0; padding:2px 10px 2px 4px; line-height:22px; word-break:keep-all; overflow-wrap:anywhere}
.ln.blank{min-height:12px}
.ln.bad .tx{text-decoration:wavy underline var(--no); text-underline-offset:5px}
.lbl{flex:none; align-self:center; margin-left:10px; font-weight:700; line-height:22px}
.ln.chg{background:color-mix(in srgb, var(--e-calc) 13%, transparent)}
.chg-tag{flex:none; align-self:center; margin-left:10px; padding:0 8px; border-radius:999px; font-size:.7rem; font-weight:700; line-height:20px; color:#fff; background:var(--t-calc)}

/* ── Question + options ── */
.question{margin:4px 0 12px; font-size:1.08rem; font-weight:700; line-height:1.55}
.qbox{margin:-2px 0 14px; padding:10px 16px; border-radius:14px; background:#FBFCFD; box-shadow:inset 0 0 0 1px var(--grid-strong); font-size:15px; line-height:1.6; overflow-wrap:anywhere}
.qbox p{margin:0}

/* Reading page (e.g. 정보문화 이론): text only, sections split by lines, ✔ 체크 boxes */
.doc{font-size:.98rem; line-height:1.75; word-break:keep-all; overflow-wrap:anywhere}
.doc h2{margin:0 0 12px; font-size:1.22rem; line-height:1.4}
.doc h3{margin:20px 0 8px; font-size:1.02rem; color:var(--link)}
.doc h2 + h3{margin-top:4px}
.doc p{margin:0 0 10px}
.doc ul{margin:0 0 12px; padding-left:1.3em}
.doc li{margin:3px 0}
.doc hr{margin:28px 0 24px; border:0; border-top:1px solid var(--grid-strong)}
.doc blockquote{margin:8px 0 14px; padding:10px 16px; border-radius:12px; font-weight:500; color:var(--ok-ink); background:var(--ok-bg)}
.doc blockquote p{margin:0}
.doc .tbl{margin:6px 0 14px}
.doc .tbl table{width:100%}
.doc .tbl th, .doc .tbl td{text-align:left; white-space:normal; vertical-align:top; line-height:1.6}
.doc .tbl td:first-child{white-space:nowrap; font-weight:700}
.doc > :last-child{margin-bottom:0}
.qbox p + p{margin-top:6px}
.opts{display:grid; gap:8px; margin:0 0 18px; padding:0; list-style:none}
.opt{width:100%; display:flex; align-items:flex-start; gap:12px; padding:11px 16px; border:0; border-radius:14px; text-align:left; cursor:pointer;
  background:var(--soft); box-shadow:inset 0 0 0 1.5px transparent;
  transition:background-color .25s, box-shadow .25s, transform .1s}
.opt:hover{background:color-mix(in srgb, var(--blue) 8%, var(--soft))}
.opt:active{transform:scale(.99)}
.opt:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
.opt .n{flex:none; font-size:1.05rem; font-weight:700; color:var(--muted); transition:color .25s}
.opt .t{flex:1; min-width:0; overflow-wrap:anywhere}
.opt[aria-checked="true"]{background:color-mix(in srgb, var(--blue) 12%, var(--surface)); box-shadow:inset 0 0 0 2px var(--blue)}
.opt[aria-checked="true"] .n{color:var(--link)}
.opt.right{background:var(--ok-bg); box-shadow:inset 0 0 0 2px var(--ok)}
.opt.right .n{color:var(--ok-ink)}
.opt.wrong{background:var(--no-bg); box-shadow:inset 0 0 0 2px var(--no)}
.opt.wrong .n{color:var(--no-ink)}

/* Options as a table (optionTable) */
.otbl{width:100%; margin:0 0 18px; border-collapse:separate; border-spacing:0 6px; font-size:.97rem}
.otbl th{padding:4px 12px; font-size:.82rem; font-weight:700; color:var(--muted); text-align:center}
.otbl td{padding:10px 12px; text-align:center; background:var(--soft); cursor:pointer; transition:background-color .25s, box-shadow .25s}
.otbl td:first-child{width:48px; border-radius:14px 0 0 14px; font-weight:700; color:var(--muted)}
.otbl td:last-child{border-radius:0 14px 14px 0}
.otbl tr:hover td{background:color-mix(in srgb, var(--blue) 8%, var(--soft))}
.otbl tr:focus-visible{outline:none}
.otbl tr:focus-visible td{box-shadow:inset 0 2px 0 var(--blue), inset 0 -2px 0 var(--blue)}
.otbl tr[aria-checked="true"] td{background:color-mix(in srgb, var(--blue) 12%, var(--surface)); box-shadow:inset 0 2px 0 var(--blue), inset 0 -2px 0 var(--blue)}
.otbl tr[aria-checked="true"] td:first-child{color:var(--link); box-shadow:inset 2px 2px 0 var(--blue), inset 0 -2px 0 var(--blue)}
.otbl tr[aria-checked="true"] td:last-child{box-shadow:inset -2px 2px 0 var(--blue), inset 0 -2px 0 var(--blue)}
.otbl tr.right td{background:var(--ok-bg); box-shadow:inset 0 2px 0 var(--ok), inset 0 -2px 0 var(--ok)}
.otbl tr.right td:first-child{color:var(--ok-ink); box-shadow:inset 2px 2px 0 var(--ok), inset 0 -2px 0 var(--ok)}
.otbl tr.right td:last-child{box-shadow:inset -2px 2px 0 var(--ok), inset 0 -2px 0 var(--ok)}
.otbl tr.wrong td{background:var(--no-bg); box-shadow:inset 0 2px 0 var(--no), inset 0 -2px 0 var(--no)}
.otbl tr.wrong td:first-child{color:var(--no-ink); box-shadow:inset 2px 2px 0 var(--no), inset 0 -2px 0 var(--no)}
.otbl tr.wrong td:last-child{box-shadow:inset -2px 2px 0 var(--no), inset 0 -2px 0 var(--no)}

/* ── Buttons ── */
.acts{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.btn{display:inline-flex; align-items:center; gap:7px; height:44px; padding:0 18px; border:0; border-radius:14px; cursor:pointer; font-size:.95rem; font-weight:700;
  color:var(--ink); background:var(--surface); box-shadow:0 0 0 1.5px var(--track), 0 2px 8px -6px rgba(0,0,0,.3);
  transition:background-color .2s, box-shadow .25s, color .2s, transform .1s}
.btn svg{width:19px; height:19px; flex:none}
.btn .sub{margin-left:4px; font-size:.8em; font-weight:500; color:var(--muted)}
.btn:hover{box-shadow:0 0 0 2px var(--blue), 0 8px 18px -12px rgba(40,80,140,.6)}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
.btn.primary{color:#fff; background:var(--blue); box-shadow:0 6px 16px -10px rgba(40,90,160,.8)}
.btn.primary:hover{background:#4A8FDB}
.btn.locked{color:var(--muted)}
.btn.locked:hover{box-shadow:0 0 0 1.5px var(--track)}

/* ── Result + explanation ── */
.result{margin-top:14px; padding:12px 16px; border-radius:14px; font-size:.97rem; animation:pop .35s var(--ease)}
.result b{display:block; font-size:1.02rem}
.result.o{color:var(--ok-ink); background:var(--ok-bg)}
.result.x{color:var(--no-ink); background:var(--no-bg)}
.result.hint{color:#8A5A0B; background:var(--yel-c)}
.result .fb{margin-top:3px; color:var(--ink)}
.expl{display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s var(--ease), margin-top .4s var(--ease); margin-top:0}
.expl.open{grid-template-rows:1fr; margin-top:14px}
.expl > div{overflow:hidden}
.expl-in{padding:14px 18px; border-radius:16px; background:#EEF5FD; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--blue) 25%, transparent)}
.expl-in h3{margin:0 0 6px; font-size:.95rem; color:var(--link)}
.expl-in .ans{display:inline-block; margin-left:6px; padding:0 9px; border-radius:999px; font-size:.78rem; line-height:21px; color:#fff; background:var(--link)}

.pnav{display:flex; justify-content:space-between; gap:10px; margin-top:22px; padding-top:16px; border-top:1px solid var(--grid)}
.pnav .btn{height:40px; font-size:.9rem}
.pnav .btn[disabled]{visibility:hidden}

.empty{padding:40px 28px; text-align:center; color:var(--muted)}
.loading{padding:40px 28px; text-align:center; color:var(--muted); animation:fadeIn .4s ease .3s backwards, breathe 1.6s ease-in-out .7s infinite}
@keyframes breathe{50%{opacity:.55}}
.loaderr{padding:26px 28px; color:var(--no-ink)}

/* ── Toast ── */
.toast{position:fixed; left:50%; bottom:26px; z-index:50; max-width:calc(100vw - 32px); padding:11px 20px; border-radius:14px; font-size:.92rem; font-weight:500;
  color:#fff; background:rgba(34,40,46,.92); box-shadow:0 12px 30px -12px rgba(0,0,0,.5);
  opacity:0; transform:translate(-50%, 12px); pointer-events:none; transition:opacity .3s, transform .35s var(--ease)}
.toast.on{opacity:1; transform:translate(-50%, 0)}

/* ── Debugger sheet ── */
html.dbg-open{overflow:hidden}
.dbg{position:fixed; inset:0; z-index:40; display:grid; place-items:center; padding:16px; visibility:hidden; transition:visibility 0s linear .45s}
.dbg.on{visibility:visible; transition-delay:0s}
.dbg-back{position:absolute; inset:0; background:rgba(28,38,50,.45); opacity:0; transition:opacity .3s}
.dbg.on .dbg-back{opacity:1}
.dbg-sheet{position:relative; width:min(1380px, 100%); height:min(920px, 100%); display:flex; flex-direction:column; overflow:hidden; border-radius:24px;
  background:var(--bg); box-shadow:0 30px 80px -30px rgba(10,30,60,.6);
  opacity:0; transform:translateY(26px) scale(.985); transition:opacity .3s, transform .45s var(--ease)}
.dbg.on .dbg-sheet{opacity:1; transform:none}

.dbg-head{display:flex; align-items:center; gap:10px 16px; flex-wrap:wrap; padding:12px 14px 12px 22px; background:var(--surface); border-bottom:1px solid var(--grid)}
.dbg-title{flex:1 1 240px; min-width:0; display:flex; align-items:baseline; gap:10px}
.dbg-title b{font-size:1.2rem; white-space:nowrap}
.dbg-q{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.86rem; color:var(--muted)}
.dbg-pickers{display:flex; gap:10px; flex-wrap:wrap}
.dbg-pickers:empty{display:none}
.seg{display:flex; align-items:center; gap:3px; padding:4px; border-radius:14px; background:color-mix(in srgb, var(--blue) 11%, transparent); overflow-x:auto; scrollbar-width:none}
.seg > span{flex:none; padding:0 8px 0 6px; font-size:.76rem; font-weight:700; color:var(--muted)}
.seg button{flex:none; height:34px; min-width:38px; padding:0 12px; border:0; border-radius:10px; cursor:pointer; font-size:.88rem; font-weight:700; color:var(--muted); background:transparent;
  transition:background-color .25s, color .25s, box-shadow .25s, transform .1s}
.seg button:hover{color:var(--ink)}
.seg button:active{transform:scale(.95)}
.seg button[aria-pressed="true"]{background:var(--surface); color:var(--link); box-shadow:0 2px 8px -4px rgba(0,0,0,.25)}
.seg button:focus-visible{outline:2px solid var(--blue); outline-offset:1px}
.dbg-x{flex:none; width:42px; height:42px; display:grid; place-items:center; border:0; border-radius:12px; cursor:pointer; color:var(--muted); background:var(--soft);
  transition:background-color .2s, color .2s, transform .1s}
.dbg-x svg{width:20px; height:20px}
.dbg-x:hover{color:var(--no-ink); background:var(--no-bg)}
.dbg-x:active{transform:scale(.94)}
.dbg-note{padding:7px 22px; font-size:.84rem; line-height:1.7; background:var(--yel-c); border-bottom:1px solid var(--grid); animation:fadeIn .3s}
.dbg-note .tag{display:inline-block; margin-right:8px; padding:0 9px; border-radius:999px; font-size:.74rem; font-weight:700; line-height:20px; color:#fff}
.tag.scn{background:var(--link)}
.tag.chg{background:var(--t-calc)}
.tag.tip{background:#8A6A1F}
.dbg-note .sep{display:inline-block; width:1px; height:12px; margin:0 12px; vertical-align:-1px; background:var(--grid-strong)}

.dbg-body{flex:1; min-height:0; display:grid; grid-template-columns:minmax(0, 1.12fr) minmax(340px, 1fr); gap:14px; padding:14px}
.dbg-left, .dbg-right{min-height:0; overflow:auto; scrollbar-width:thin; scrollbar-color:var(--track) transparent}
.dbg-left{padding:12px 12px 14px; border-radius:20px; background:var(--surface); box-shadow:0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent)}
.lh{margin:2px 6px 10px; font-size:.84rem; font-weight:700; color:var(--muted)}
.dbg-left .code{margin:0}
.dbg-right{display:flex; flex-direction:column; gap:12px; padding:0 2px 4px}

/* Current line in the debugger */
.ln.cur{background:color-mix(in srgb, var(--blue) 17%, transparent)}
.ln.cur .no{color:var(--link); font-weight:700}
.ln.cur .no::before{content:"▶"; margin-right:3px; font-size:9px; vertical-align:1px}
.ln.cur.is-true{background:color-mix(in srgb, var(--ok) 17%, transparent)}
.ln.cur.is-false{background:color-mix(in srgb, var(--no) 13%, transparent)}
.ln.cur.is-err{background:color-mix(in srgb, var(--no) 20%, transparent)}
.jb{flex:none; align-self:center; margin-left:8px; padding:0 10px; border-radius:999px; font-size:.78rem; font-weight:700; line-height:22px; color:#fff; animation:pop .3s var(--ease)}
.jb.t{background:var(--ok)}
.jb.f{background:var(--no)}

/* Step card stays on top of the right column */
.stepcard{position:sticky; top:0; z-index:2; padding:13px 16px 14px; border-radius:18px; background:var(--surface);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--blue) 40%, transparent), 0 10px 24px -18px rgba(30,60,100,.6); transition:box-shadow .3s}
.stepcard.err{box-shadow:0 0 0 2px var(--no), 0 10px 24px -18px rgba(30,60,100,.6)}
.stepcard.end{box-shadow:0 0 0 2px var(--ok), 0 10px 24px -18px rgba(30,60,100,.6)}
.stepcap{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px}
.stepno{font-size:.78rem; font-weight:700; color:var(--link); font-variant-numeric:tabular-nums}
.chips{display:flex; gap:6px; flex-wrap:wrap; margin-left:auto}
.chip{display:inline-flex; align-items:center; gap:6px; padding:0 10px; border-radius:999px; font-size:.78rem; font-weight:700; line-height:24px; white-space:nowrap}
.chip small{font-size:.7rem; font-weight:500; opacity:.75}
.chip.loop{color:var(--t-flow); background:color-mix(in srgb, var(--e-flow) 15%, transparent)}
.chip.time{color:#7A5A12; background:var(--yel-c)}
.chip.flash{animation:flash .8s var(--ease)}
.steptext{margin:0; font-size:1.02rem; line-height:1.65; overflow-wrap:anywhere}
.stepcard.tick .steptext{animation:fadeIn .3s}
.steptext .ar{margin:0 7px; color:var(--muted)}
.steptext .res{font-weight:700}
.errtxt{font-weight:700; color:var(--no-ink)}
.chain{list-style:none; margin:10px 0 0; padding:10px 14px; border-radius:12px; background:#F1F5FE; font-size:.95rem; line-height:1.7}
.chain li{animation:fadeUp .35s var(--ease) backwards; animation-delay:calc(var(--k, 0) * 140ms)}
.chain .ar{margin-right:7px; font-weight:700; color:var(--t-judge)}
.chain .final .cx{display:inline-block; padding:0 12px; border-radius:999px; font-weight:700; color:#fff; background:var(--link)}
.chain .final.t .cx{background:var(--ok)}
.chain .final.f .cx{background:var(--no)}

/* Panels */
/* Screen panel (manual mode): one row per screen part with the objects in it */
.scr{display:grid; gap:6px}
.srow{display:flex; align-items:center; gap:10px; min-height:40px; padding:6px 10px; border-radius:12px; background:var(--soft)}
.sname{flex:none; width:52px; font-size:.8rem; font-weight:700; color:var(--muted)}
.sitems{display:flex; flex-wrap:wrap; gap:6px}
.sitems:empty::before{content:"–"; color:var(--track)}
.sitem{padding:1px 10px; border-radius:9px; font-weight:700; color:var(--t-moving);
  background:color-mix(in srgb, var(--e-moving) 8%, var(--surface)); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--e-moving) 35%, transparent)}
.sitem.enter{animation:fadeUp .4s var(--ease) backwards}
.panel{padding:12px 14px 14px; border-radius:18px; background:var(--surface); box-shadow:0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent); animation:fadeUp .4s var(--ease) backwards}
.panel h3{margin:0 0 9px; font-size:.86rem; font-weight:700; color:var(--muted)}
.panel h3 small{margin-left:4px; font-weight:500; font-size:.74rem}
.vgrid{display:grid; grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)); gap:8px}
.var{display:flex; flex-direction:column; min-width:0; padding:7px 12px 8px; border-radius:12px;
  background:color-mix(in srgb, var(--e-var) 7%, var(--surface)); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--e-var) 24%, transparent);
  transition:box-shadow .3s, background-color .3s}
.var .vn{font-size:.78rem; font-weight:700; color:var(--t-var); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.var .vv{font-size:1.22rem; font-weight:700; line-height:1.35; overflow-wrap:anywhere}
.var .old{margin-right:6px; font-size:.84rem; font-weight:500; color:var(--muted); text-decoration:none}
.var.changed{box-shadow:inset 0 0 0 2px var(--e-var)}
.var.flash{animation:flash .9s var(--ease)}
.obj{background:color-mix(in srgb, var(--e-moving) 6%, var(--surface)); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--e-moving) 22%, transparent)}
.obj .vn{color:var(--t-moving)}
.obj.changed{box-shadow:inset 0 0 0 2px var(--e-moving)}
.ops{display:flex; flex-wrap:wrap; gap:2px 12px; font-size:1rem}
.op i{margin-right:5px; font-size:.74rem; font-style:normal; color:var(--muted)}
.op b{transition:color .3s}
.op.changed b{color:var(--t-moving); animation:flashText .8s}
@keyframes flash{from{background-color:#FFE58A}}
@keyframes flashText{from{background-color:#FFE58A}}

/* Lists: slot numbers stay fixed, values slide between slots */
.lists{display:grid; gap:14px}
.lst{--cw:66px; --step:72px}
.lhead{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:4px}
.lhead b{color:var(--t-var)}
.lcount{font-size:.76rem; color:var(--muted)}
.lop{padding:0 9px; border-radius:999px; font-size:.74rem; font-weight:700; line-height:20px; opacity:0; transform:translateX(-4px); transition:opacity .3s, transform .3s var(--ease)}
.lop.on{opacity:1; transform:none}
.lop.add, .lop.insert{color:var(--ok-ink); background:var(--ok-bg)}
.lop.delete{color:var(--no-ink); background:var(--no-bg)}
.lop.replace{color:#7A5A12; background:var(--yel-k)}
.ltrack{position:relative; overflow-x:auto; padding:0 2px 4px; scrollbar-width:thin}
.lnums, .litems{position:relative; width:calc(var(--n) * var(--step)); transition:width .45s var(--ease)}
.lnums{height:20px}
.lnums span{position:absolute; left:0; top:0; width:var(--cw); text-align:center; font-size:.76rem; font-weight:700; color:var(--muted)}
.lnums span.enter{animation:fadeIn .45s}
.litems{height:50px}
.cell{position:absolute; left:0; top:0; width:var(--cw); height:48px; display:grid; place-items:center; padding:0 4px; border-radius:11px; overflow:hidden;
  text-align:center; font-size:.9rem; font-weight:700; line-height:1.15; word-break:keep-all; overflow-wrap:anywhere;
  background:color-mix(in srgb, var(--e-var) 8%, var(--surface)); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--e-var) 28%, transparent);
  transition:transform .5s var(--ease), opacity .35s, scale .35s var(--ease), background-color .3s, box-shadow .3s, color .3s}
.cell.enter{animation:cellIn .45s var(--ease)}
.cell.leave{opacity:0; scale:.55}
.cell.doomed{color:var(--no-ink); background:var(--no-bg); box-shadow:inset 0 0 0 2px var(--no); scale:.94}
.cell.hl{animation:cellHl 1.1s var(--ease)}
.cell.moved{animation:cellMoved 1s var(--ease)}
@keyframes cellIn{from{opacity:0; scale:.5}}
@keyframes cellHl{0%, 35%{background-color:#FFE58A; box-shadow:inset 0 0 0 2px #E0AE00}}
@keyframes cellMoved{0%, 40%{box-shadow:inset 0 0 0 2px var(--blue)}}
.lempty{position:absolute; left:2px; top:20px; margin:0; line-height:48px; font-size:.84rem; color:var(--muted)}

/* Output */
.outl{list-style:none; margin:0; padding:0; display:grid; gap:5px}
.outl li{display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:10px; background:var(--soft); transition:background-color .5s}
.outl li.new{animation:fadeUp .35s var(--ease)}
.outl li.latest{background:#FFF1BD}
.otag{flex:none; padding:0 8px; border-radius:999px; font-size:.7rem; font-weight:700; line-height:19px; color:#fff; background:var(--e-looks)}
.otag.write{background:var(--e-text)}
.otx{font-weight:700; overflow-wrap:anywhere}
.p-out .none{margin:0; font-size:.84rem; color:var(--muted)}

/* Expression mode: list of expressions on the left, the rewrite chain on the right */
.m-expr .panel{display:none}
.m-expr .chain{font-size:1.12rem; padding:14px 16px}
.exl{display:grid; gap:8px}
.exb{width:100%; display:flex; align-items:center; gap:12px; padding:12px 14px; border:0; border-radius:14px; text-align:left; cursor:pointer;
  background:var(--soft); box-shadow:inset 0 0 0 1.5px transparent; transition:background-color .25s, box-shadow .25s, transform .1s}
.exb:hover{background:color-mix(in srgb, var(--blue) 8%, var(--soft))}
.exb:active{transform:scale(.99)}
.exb[aria-pressed="true"]{background:color-mix(in srgb, var(--blue) 12%, var(--surface)); box-shadow:inset 0 0 0 2px var(--blue)}
.exb .n{flex:none; font-size:1.05rem; font-weight:700; color:var(--muted)}
.exb .t{flex:1; min-width:0; overflow-wrap:anywhere}
.rp{display:inline-block; padding:0 10px; border-radius:999px; font-size:.8rem; font-weight:700; line-height:22px; color:#fff; background:var(--link); animation:pop .3s var(--ease)}
.rp.t{background:var(--ok)}
.rp.f, .rp.e{background:var(--no)}

/* Controls */
.dbg-ctrl{padding:10px 16px 14px; background:var(--surface); border-top:1px solid var(--grid)}
.scrubrow{display:flex; align-items:center; gap:12px; margin-bottom:8px}
.pos{min-width:84px; font-size:.8rem; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums}
.scrub, .speed input{accent-color:var(--blue); cursor:pointer}
.scrub{flex:1; min-width:0; margin:0}
.btnrow{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.cbtn{display:inline-flex; align-items:center; justify-content:center; gap:7px; height:46px; padding:0 16px; border:0; border-radius:14px; cursor:pointer;
  font-size:.92rem; font-weight:700; color:var(--ink); background:var(--surface); box-shadow:inset 0 0 0 1.5px var(--track);
  transition:background-color .2s, box-shadow .2s, color .2s, opacity .2s, transform .1s}
.cbtn svg{width:18px; height:18px; flex:none}
.cbtn:hover:not([disabled]){box-shadow:inset 0 0 0 2px var(--blue)}
.cbtn:active:not([disabled]){transform:scale(.96)}
.cbtn:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
.cbtn[disabled]{opacity:.38; cursor:default}
.cbtn.primary{min-width:150px; color:#fff; background:var(--blue); box-shadow:0 6px 16px -10px rgba(40,90,160,.8)}
.cbtn.primary:hover:not([disabled]){background:#4A8FDB; box-shadow:0 6px 16px -10px rgba(40,90,160,.8)}
.cbtn.auto.on{color:var(--ok-ink); background:var(--ok-bg); box-shadow:inset 0 0 0 2px var(--ok)}
.speed{display:flex; align-items:center; gap:8px; margin-left:auto; font-size:.82rem; color:var(--muted)}
.speed input{width:110px}
.speed b{min-width:72px; color:var(--ink)}

@keyframes fadeUp{from{opacity:0; transform:translateY(10px)}}
@keyframes fadeIn{from{opacity:0}}
@keyframes viewIn{from{opacity:0; transform:translateY(8px)}}
@keyframes pop{from{opacity:0; transform:scale(.97) translateY(4px)}}

/* ── Narrow screens: list becomes a row of numbers above the problem ── */
@media (max-width:900px){
  .top{padding:14px 16px 12px; gap:12px}
  .wrap{grid-template-columns:minmax(0, 1fr); gap:12px; padding:0 16px 24px}
  .side{position:static; max-height:none; padding:12px 12px 10px}
  .side h2, .legend{display:none}
  .plist{display:flex; gap:6px; overflow-x:auto; padding:3px 3px 5px}
  .pbtn{width:auto; flex:none; height:42px; padding:0 12px 0 14px; font-size:.94rem}
  .prob{padding:18px 16px 20px}
  .phead h1{font-size:1.25rem}
  .passage{padding:12px 14px}
  .code{font-size:14px}
  .ln .no{width:30px; padding-right:8px}
  .ln .ind{width:calc(var(--d) * 18px); background:repeating-linear-gradient(to right, transparent 0 6px, var(--grid-strong) 6px 7px, transparent 7px 18px)}
  .acts .btn{flex:1 1 auto; justify-content:center; padding:0 12px}

  /* Debugger fills the phone screen: code on top, step + panels below, controls at the bottom */
  .dbg{padding:0}
  .dbg-sheet{width:100%; height:100%; height:100dvh; border-radius:0}
  .dbg-head{padding:8px 8px 8px 14px; gap:8px}
  .dbg-title{flex:1 1 0}
  .dbg-pickers{order:3; width:100%}
  .seg{max-width:100%}
  .dbg-note{padding:6px 14px; font-size:.8rem}
  .dbg-body{display:flex; flex-direction:column; gap:10px; padding:10px}
  .dbg-left{flex:none; max-height:34vh; padding:8px 6px 10px}
  .dbg-right{flex:1}
  .stepcard{padding:11px 13px 12px}
  .steptext{font-size:.96rem}
  .lst{--cw:56px; --step:61px}
  .cell{font-size:.84rem}
  .dbg-ctrl{padding:8px 10px 10px}
  .scrubrow{margin-bottom:6px}
  .btnrow{gap:6px}
  .cbtn{flex:1 1 0; flex-direction:column; gap:1px; height:52px; padding:0 2px; font-size:.68rem}
  .cbtn.primary{min-width:0; flex-grow:1.4}
  .speed{width:100%; margin:2px 0 0}
  .speed input{flex:1}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
}