/* Python Game Lab: bright 2.5D cartoon / retro arcade theme. Cream and sky backgrounds, chunky navy comic borders with hard
   shadows, big type for screen sharing. No dark panels, no timers, no overlays: feedback is inline. */
.pygwrap{padding-bottom:12px}
.pg{--ink:#1E293B;--cream:#FFFDF7;--sky:#E0F2FE;--coral:#FF5A43;--sun:#FACC15;--green:#10B981;--purple:#7C3AED;--bd:3px solid var(--ink);--sh:6px 6px 0 var(--ink);--code:clamp(17px,1.4vw + 7px,22px);position:relative;color:var(--ink);font-size:18px;line-height:1.5;border:var(--bd);border-radius:26px;padding:clamp(12px,2.4vw,26px);background:radial-gradient(circle at 12% 8%,#fff 0 6%,transparent 7%),radial-gradient(circle at 86% 4%,#fff7c2 0 5%,transparent 6%),linear-gradient(180deg,var(--sky),var(--cream) 36%);box-shadow:8px 8px 0 var(--ink);overflow:hidden}
.pg *{box-sizing:border-box}
.pg h2,.pg h3{font-family:var(--serif);font-weight:600;margin:0;color:var(--ink)}
.pg code{font:800 .92em ui-monospace,SFMono-Regular,Consolas,monospace;padding:1px 7px;border-radius:8px;background:#FEF3C7;border:2px solid var(--ink)}
/* header */
.pg-head{display:flex;gap:12px 20px;align-items:center;flex-wrap:wrap;padding:12px 16px;border:var(--bd);border-radius:20px;background:#fff;box-shadow:var(--sh)}
.pg-title{display:flex;gap:10px;align-items:center}.pg-logo{font-size:36px}.pg-title small{display:block;font:900 12px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--purple)}.pg-title b{font:700 24px var(--serif)}
.pg-who{display:grid;gap:0;font-size:15px}.pg-who b{color:var(--coral)}
.pg-switch{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.pg-switch small{font:900 11px var(--sans);letter-spacing:.12em;text-transform:uppercase}
.pg-seg{display:grid;padding:6px 14px;border:var(--bd);border-radius:14px;background:#fff;cursor:pointer;font:inherit;text-align:center;box-shadow:3px 3px 0 var(--ink);transition:transform .1s,box-shadow .1s}.pg-seg b{font-size:16px}.pg-seg small{font:700 12px var(--sans);letter-spacing:0;text-transform:none}
.pg-seg[aria-pressed=true]{background:var(--sun)}.pg-seg:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.pg-score{margin-left:auto;display:grid;justify-items:end;font-size:16px}.pg-free{font-size:13px;font-weight:800;color:var(--green)}
/* milestones: always clickable (free jump) */
.pg-track{display:flex;gap:8px;margin:16px 0 10px;overflow-x:auto;padding:6px 4px 12px;scrollbar-width:thin}
.pg-node{flex:1 0 96px;display:grid;gap:5px;justify-items:center;background:none;border:0;cursor:pointer;font:inherit;color:var(--ink);padding:0;position:relative}
.pg-node::before{content:"";position:absolute;top:24px;left:-50%;width:100%;height:5px;background:repeating-linear-gradient(90deg,var(--ink) 0 8px,transparent 8px 14px);z-index:0}.pg-node:first-child::before{display:none}
.pg-dot{position:relative;z-index:1;display:grid;place-items:center;width:50px;height:50px;border:var(--bd);border-radius:50%;background:#fff;font-size:24px;box-shadow:3px 3px 0 var(--ink);transition:transform .15s}
.pg-node small{font:800 13px var(--sans)}.pg-node.cur .pg-dot{background:var(--sun);transform:scale(1.12)}.pg-node.done .pg-dot{background:var(--green);color:#fff;font-weight:900}
/* stage */
.pg-stage{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
.pg-modhead h2{font-size:clamp(26px,3.6vw,40px);line-height:1.1}.pg-kicker{margin:0 0 4px;font:900 12.5px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--coral)}
.pg-widget{display:grid;gap:16px;min-width:0}
.pg-loading,.pg-err{margin:0}
.pg-lead{margin:0;font-size:20px}
.pg-card{display:grid;gap:12px;align-content:start;padding:clamp(12px,2vw,20px);border:var(--bd);border-radius:20px;background:#fff;box-shadow:var(--sh);min-width:0}.pg-card h3{font-size:clamp(22px,2.4vw,28px)}.pg-card p{margin:0}
.pg-card.coral{background:#FFE4DE}.pg-card.sky{background:#E0F2FE}.pg-card.yellow{background:#FEF9C3}.pg-card.green{background:#D1FAE5}
.pg-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:16px;align-items:start}.pg-split.tight{gap:12px}
.pg-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.pg-task{margin:0;padding:10px 16px;border:var(--bd);border-radius:14px;background:#EDE9FE;font-weight:800}
.pg-msg{margin:0;min-height:1.5em;font-weight:800}.pg-label{margin:0;font:900 12px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--purple)}.pg-hintline{margin:0;font-size:16px;color:#475569}
.pg-btn{padding:11px 18px;border:var(--bd);border-radius:14px;background:var(--sun);color:var(--ink);font:900 clamp(16px,1vw + 9px,19px) var(--sans);cursor:pointer;box-shadow:4px 4px 0 var(--ink);transition:transform .1s,box-shadow .1s}
.pg-btn:active:not(:disabled){transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}.pg-btn:disabled{opacity:.5;cursor:default}
.pg-btn.ghost{background:#fff}.pg-btn.coral{background:var(--coral);color:#fff}.pg-btn.green{background:var(--green);color:#fff}.pg-btn.purple{background:var(--purple);color:#fff}
.pg-btn[aria-pressed=true]{background:#FDBA74}
.pg-in{height:48px;padding:0 14px;border:var(--bd);border-radius:12px;background:#fff;color:var(--ink);font:800 20px ui-monospace,Consolas,monospace;width:140px;min-width:0}.pg-in.wide{width:min(320px,100%)}.pg-in:focus{outline:0;box-shadow:0 0 0 4px var(--sun)}
.pg-fld{display:grid;gap:4px}
/* code (bright) */
.pg-code,.pg-pylines pre{margin:0}
.pg-code{padding:10px 4px;border:var(--bd);border-radius:14px;background:#FFFDF7;font:700 var(--code)/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;overflow-x:auto;white-space:pre;min-width:0}
.pg-code .ln{display:block;padding:0 12px;border-left:5px solid transparent}.pg-code .ln.hot{background:#FEF08A;border-left-color:var(--coral)}
.pg-code i{font-style:normal}.pg-code .k{color:#B4236A;font-weight:900}.pg-code .s{color:#0F7A4F}.pg-code .f{color:#6D28D9}
.pg-code.dict{padding:12px 14px}.pg-code .kv{padding:1px 4px;border-radius:6px;transition:background .2s}.pg-code .kv.hot{background:var(--sun);outline:2px solid var(--ink)}
.pg-code .hot{background:#FEF08A;border-radius:6px;padding:0 4px;font-weight:900}.pg-code .bad{color:#B91C1C;font-weight:900}.pg-code .good{color:#047857;font-weight:900}
.pg-pylines{display:grid}
.pg-term{margin:0;padding:12px 16px;border:var(--bd);border-radius:14px;background:#ECFDF5;color:#064E3B;font:800 var(--code)/1.45 ui-monospace,Consolas,monospace;white-space:pre-wrap;word-break:break-word;min-height:5em;max-height:420px;overflow:auto;min-width:0}.pg-term.big{min-height:14em}
/* boards and grids */
.pg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:min(100%,330px);margin-inline:auto}
.pg-cell{position:relative;aspect-ratio:1;border:var(--bd);border-radius:16px;background:#fff;color:var(--ink);font:900 clamp(34px,6vw,52px) var(--sans);cursor:pointer;box-shadow:4px 4px 0 var(--ink);transition:transform .1s,box-shadow .1s,background .15s;display:grid;place-items:center;padding:0}
.pg-cell small{position:absolute;left:8px;top:4px;font:900 14px ui-monospace,Consolas,monospace;color:#64748B}.pg-cell.x{background:#FFE4DE;color:#E11D48}.pg-cell.o{background:#DBEAFE;color:#1D4ED8}.pg-cell.hot{background:var(--sun)}
.pg-cell:active:not(.static){transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}.pg-cell.static{cursor:default}.pg-cell.lit{background:var(--green);color:#fff;animation:pg-pop .35s}
.pg-grid.small{width:min(100%,230px)}.pg-grid.small .pg-cell{font-size:30px}
@keyframes pg-pop{from{transform:scale(.8)}}
.pg-radar{display:grid;grid-template-columns:repeat(20,1fr);gap:3px}.pg-radar.long{grid-template-columns:repeat(25,1fr)}
.pg-radar i{aspect-ratio:1;border:2px solid var(--ink);border-radius:4px;background:#fff}.pg-radar i.low{background:#93C5FD}.pg-radar i.high{background:#FCA5A5}.pg-radar i.secret{background:var(--sun);outline:3px solid var(--ink)}
.pg-legend{display:flex;gap:10px;flex-wrap:wrap;font-size:14px;font-weight:800}.pg-legend span{padding:2px 10px;border:2px solid var(--ink);border-radius:99px;background:#fff}.pg-legend .low{background:#93C5FD}.pg-legend .high{background:#FCA5A5}
.pg-pips{font-size:26px;letter-spacing:4px;color:var(--coral)}
.pg-badge{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-weight:800;min-height:1.6em}.pg-badge span{padding:3px 14px;border:var(--bd);border-radius:99px;font-weight:900}.pg-badge .even{background:#BBF7D0}.pg-badge .odd{background:#FBCFE8}
.pg-loopbox{min-width:0}
.pg-moves{display:flex;gap:6px;flex-wrap:wrap}.pg-mv{padding:6px 10px;min-width:44px;text-align:center;border:var(--bd);border-radius:10px;background:#fff;font:900 17px ui-monospace,Consolas,monospace}.pg-mv.x{background:#FFE4DE}.pg-mv.o{background:#DBEAFE}
.pg-quiz{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.pg-opt{padding:8px 16px;border:var(--bd);border-radius:12px;background:#fff;font:800 17px ui-monospace,Consolas,monospace;cursor:pointer;box-shadow:3px 3px 0 var(--ink)}.pg-opt.ok{background:#BBF7D0}.pg-opt.bad{background:#FECACA}
.pg-lines{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}.pg-line{display:grid;gap:0;padding:8px 10px;border:var(--bd);border-radius:12px;background:#fff;cursor:pointer;text-align:left;font:inherit;box-shadow:3px 3px 0 var(--ink)}.pg-line b{font:900 20px ui-monospace,Consolas,monospace}.pg-line small{font-weight:700;color:#475569}.pg-line.seen{background:#D1FAE5}.pg-line.on{background:var(--sun)}
/* builders */
.pg-idehead{display:flex;gap:12px;align-items:end;justify-content:space-between;flex-wrap:wrap;margin-bottom:12px}.pg-idehead small{display:block;font:900 12px var(--sans);letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px}.pg-count{font-weight:900;color:var(--purple)}
.pg-stepchips{display:flex;gap:6px;flex-wrap:wrap}.pg-chip{width:46px;height:46px;border:var(--bd);border-radius:12px;background:#fff;font:900 18px var(--sans);cursor:pointer;box-shadow:3px 3px 0 var(--ink)}.pg-chip.cur{background:var(--sun)}.pg-chip.done{background:var(--green);color:#fff}
.pg-idegrid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px;align-items:start}.pg-pane{display:grid;gap:12px;min-width:0}
.pg-step small{font:900 12.5px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--coral)}.pg-step h3{margin:2px 0 6px}.pg-step p{margin:0;font-size:19px}
.pg-hint{padding:10px 14px;border:var(--bd);border-radius:12px;background:#fff}.pg-hint[hidden],.pg-explain[hidden],.pg-inrow[hidden]{display:none}
.pg-explain{padding:10px 14px;border:var(--bd);border-radius:12px;background:#fff;display:grid;gap:4px}.pg-explain small{font:900 11px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--purple)}.pg-explain code{justify-self:start;max-width:100%;overflow:auto}.pg-explain p{font-weight:700}
.pg-status{min-height:1.5em;font-weight:800}.pg-status.ok,.pg-status.bad,.pg-status.info{padding:10px 14px;border:var(--bd);border-radius:12px}.pg-status.ok{background:#BBF7D0}.pg-status.bad{background:#FEE2E2}.pg-status.info{background:#E0F2FE}
.pg-edhost{height:clamp(320px,52vh,560px);border:var(--bd);border-radius:16px;overflow:hidden;box-shadow:var(--sh);background:var(--cream);min-width:0}.pg-edhost .ce{height:100%;border:0;background:var(--cream);box-shadow:none;border-radius:0;min-width:0;max-width:100%}.pg-edhost .cm-editor{height:100%;min-width:0;max-width:100%}.pg-edhost .cm-scroller{overflow:auto}
.pg-edhost .ce-plain{background:var(--cream);color:var(--ink);font-size:var(--code);min-height:320px}
.pg-inrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:10px;border:var(--bd);border-radius:14px;background:#fff}.pg-prompt{font-weight:900;flex:1 1 100%}
.pg-peek{font-weight:900;color:var(--purple)}
/* eye break, recap, certificate */
.pg-eyestage{max-width:520px;margin:0 auto;width:100%;padding:8px;border:var(--bd);border-radius:20px;background:#fff}.pg-inf{display:block;width:100%;height:auto}
.pg-flips{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:14px}
.pg-flip{position:relative;height:220px;border:0;background:none;perspective:900px;cursor:pointer;padding:0;font:inherit;color:var(--ink)}.pg-flip .face{position:absolute;inset:0;display:grid;gap:4px;align-content:center;justify-items:center;padding:14px;border:var(--bd);border-radius:18px;text-align:center;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:transform .6s;box-shadow:var(--sh)}
.pg-flip .front{background:#fff}.pg-flip .front em{font-style:normal;font-size:38px}.pg-flip .front b{font:900 21px ui-monospace,Consolas,monospace}.pg-flip .front small{font-size:15px;font-weight:700}
.pg-flip .back{background:#FBCFE8;transform:rotateY(180deg)}.pg-flip .back p{font-size:16px;font-weight:700}.pg-flip .back code{font-size:14px;white-space:pre-wrap;text-align:left}.pg-flip.on .front{transform:rotateY(-180deg)}.pg-flip.on .back{transform:rotateY(0)}
.pg-cert{position:relative;display:grid;gap:8px;justify-items:center;text-align:center;padding:clamp(20px,3vw,40px);border:var(--bd);border-radius:22px;background:radial-gradient(circle at 50% 0,#FFFBEB,#FDE68A);box-shadow:var(--sh)}.pg-cert small{font:900 12px var(--sans);letter-spacing:.16em;text-transform:uppercase}.pg-cert h3{font-size:clamp(26px,3.4vw,40px);color:#7C2D12}.pg-cert p{font-size:18px}
.pg-certname{font:600 clamp(30px,4vw,48px) var(--serif);color:var(--coral);border-bottom:4px solid var(--ink);padding:0 18px}.pg-sign{display:flex;gap:40px;flex-wrap:wrap;justify-content:center;margin-top:8px}.pg-sign div{display:grid;border-top:3px solid var(--ink);padding-top:4px;min-width:150px}.pg-cert .seal{position:absolute;right:18px;bottom:12px;font-size:46px}
/* inline celebration (no overlay) */
.pg-cheer{display:flex;gap:14px;align-items:center;padding:14px 18px;border:var(--bd);border-radius:18px;background:#D1FAE5;box-shadow:var(--sh);animation:pg-pop .5s both}.pg-cheer p{margin:0}.pg-burst{font-size:34px;animation:pg-bounce 1.2s ease-in-out 2}@keyframes pg-bounce{50%{transform:translateY(-8px) rotate(-6deg)}}
.pg-cheerslot:empty{display:none}
.pg-notes{border:var(--bd);border-radius:14px;background:#fff;padding:8px 16px}.pg-notes summary{cursor:pointer;font-weight:900}.pg-notes ul{margin:8px 0 4px;padding-left:22px}
.pg-foot{display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap}
@media(max-width:900px){.pg-idegrid{grid-template-columns:minmax(0,1fr)}.pg-score{margin-left:0;justify-items:start}}
@media(max-width:560px){.pg{font-size:17px;border-radius:20px;box-shadow:5px 5px 0 var(--ink)}.pg-btn{width:100%}.pg-row .pg-btn{flex:1 1 100%}.pg-radar{grid-template-columns:repeat(10,1fr)}.pg-radar.long{grid-template-columns:repeat(10,1fr)}.pg-foot{display:grid}}
@media(prefers-reduced-motion:reduce){.pg-cheer,.pg-burst,.pg-cell.lit{animation:none}.pg-flip .face{transition:none}}
.pg-split>*,.pg-card>*,.pg-widget>*,.pg-pane>*{min-width:0}.pg-code,.pg-term{max-width:100%}