/* Learning workspace 1.1. Desktop and touch layouts share the same answer fields. */
:root{--study-blue:#3152a4;--study-soft:#f2f5fc;--study-teal:#176f78;--study-line:#d8e2ed}
[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.study-control{margin:18px 0}.study-codebox{border:1px solid var(--study-line);border-radius:16px;background:#f7f9fd;padding:18px 12px;box-shadow:inset 3px 0 var(--study-blue)}
.study-code-line{display:flex;gap:12px;align-items:baseline;margin:6px 0;min-width:0}.line-number{color:#8594ac;font:12px/2 "DejaVu Sans Mono",monospace;min-width:18px;text-align:right;user-select:none}.code-pieces{font:500 16px/2.9 "DejaVu Sans Mono",SFMono-Regular,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere;min-width:0}
.code-slot{display:inline-flex;vertical-align:middle;gap:8px;align-items:center;justify-content:center;background:#fff;border:2px dashed #91a9d4;border-radius:9px;min-height:44px;min-width:70px;padding:5px 10px;color:#3152a4;font:700 15px "DejaVu Sans Mono",Consolas,monospace;position:relative;transition:background .16s,border-color .16s}
.code-slot[aria-pressed=true],.code-slot.is-target{border-color:var(--study-blue);background:#e6edff;box-shadow:0 0 0 3px #3152a420}.code-slot.is-filled{border-style:solid;border-color:#9ab6c6;color:#133648;background:#edf8f8}.code-slot:disabled{opacity:1;cursor:default}.slot-status{font:700 10px system-ui;display:grid;place-items:center;background:#edf1f9;width:16px;height:16px;border-radius:5px;color:#667896}
.code-slot.is-right,.trace-input.is-right{border-color:#198251;background:#edf9f2;color:#145936}.code-slot.is-wrong,.trace-input.is-wrong{border-color:#bb5542;background:#fff3ed;color:#873b2a}.qc-solution .code-slot,.qc-solution .trace-input{border-color:#188056;background:#eaf8ef;color:#12573a}
.token-caption{margin:13px 0 8px;display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:space-between;font-size:12px;color:#546885}.token-caption span{display:flex;gap:7px;align-items:center}.token-caption svg{width:16px;height:16px}.token-caption b{font-size:11px;color:var(--study-blue)}
.study-tokens{display:flex;flex-wrap:wrap;gap:8px}.study-tokens button{border:1px solid #a8c8cd;background:#eef8f7;border-radius:10px;min-height:44px;min-width:48px;padding:9px 15px;font:650 15px "DejaVu Sans Mono",Consolas,monospace;color:#155e68;touch-action:none;cursor:grab}.study-tokens button[aria-pressed=true]{background:#d8eeec;border-color:#1b7c7c;box-shadow:0 0 0 2px #1b7c7c25}.study-edit-tools{margin-top:12px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.study-edit-tools small{font-size:11px;color:#61728b}
.study-table-wrap{max-width:100%;overflow:auto;border:1px solid var(--study-line);border-radius:13px}.study-trace{width:100%;border-collapse:collapse;table-layout:auto;font-size:14px}.study-trace caption{caption-side:bottom;font-size:11px;color:#64758b;text-align:left;padding:9px 12px;background:#f8fafc}.study-trace th,.study-trace td{padding:10px 8px;border-right:1px solid #e0e6ef;border-bottom:1px solid #e0e6ef}.study-trace thead{background:#eef3fc;color:#254583}.study-trace tbody th{background:#fafbfd;text-align:left;font-weight:500;min-width:135px}.study-trace tbody th code{white-space:pre-wrap;overflow-wrap:anywhere}.study-trace td{min-width:66px}.step-index{display:inline-grid;place-items:center;border-radius:7px;background:#eaf0f9;color:#516887;width:20px;height:22px;font-size:10px;margin-right:9px}.trace-input{width:100%;min-width:40px;min-height:43px;border:1px solid #bbcbdd;border-radius:8px;padding:8px 6px;text-align:center;background:#fff;color:#142c45;font:600 15px "DejaVu Sans Mono",Consolas,monospace}.trace-input:focus{outline:2px solid var(--study-blue);outline-offset:1px}
.exercise-program{border:1px solid var(--study-line);border-left:3px solid var(--study-blue);padding:16px;border-radius:12px;margin:16px 0 0;background:#fff}.exercise-program pre,.question-context{white-space:pre-wrap;font:13px/1.8 "DejaVu Sans Mono",Consolas,monospace;margin:5px 0}.question-context{background:#f1f5fb;color:#264876;padding:8px 12px;border-radius:8px}
.study-tabs{display:flex;gap:5px;background:#eef2f8;padding:5px;border-radius:12px;margin:20px 0;position:sticky;top:78px;z-index:5}.study-tabs button{flex:1;min-height:44px;padding:9px 12px;border:0;border-radius:9px;background:transparent;color:#5a6e88;font-weight:750}.study-tabs button[aria-selected=true]{background:white;color:#284583;box-shadow:0 2px 10px #203f6510}.study-pane:focus{outline:none}.study-pane h2{font-size:22px;letter-spacing:-.5px;margin:22px 0 12px}.study-pane p{line-height:1.75;max-width:78ch}.lesson-content>h1{letter-spacing:-1px}.lesson-content .code-pair pre{font-size:13px;line-height:1.8}.study-reading{counter-reset:point}.study-reading>p{position:relative;padding:0 0 0 32px;margin:16px 0}.study-reading>p:before{counter-increment:point;content:counter(point);position:absolute;left:0;top:2px;width:23px;height:23px;border-radius:7px;background:#edf2fb;color:#35578d;text-align:center;font-size:11px;font-weight:800;line-height:23px}.study-check-meter{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:10px 14px;background:#f1f7f8;border-radius:10px;margin:12px 0;font-size:12px;color:#355975}.study-check-meter b{color:#176a72}
.study-lab{padding:22px;background:linear-gradient(145deg,#f5f9fc,#fff);border:1px solid #c9dce4;border-radius:18px}.study-lab-heading{display:flex;gap:12px;align-items:center;margin-bottom:10px}.study-lab-heading small{font-size:10px;font-weight:800;color:#506a90;letter-spacing:1px}.study-lab-heading h3{font-size:20px;line-height:1.3}.study-lab-icon{display:grid;place-items:center;width:43px;height:43px;border-radius:12px;background:#e6effa;color:#30548c;flex-shrink:0}.study-lab-icon svg{width:22px;height:22px}.study-step-count{margin-left:auto;font-size:12px;white-space:nowrap;font-weight:800;color:#647793}.study-predict{font-size:12px;color:#60768f;margin-bottom:15px}.study-machine{display:grid;grid-template-columns:1.2fr 1fr;gap:18px}.study-machine h4{font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:#6a7c91;margin:8px 0}.study-program{list-style:none;padding:8px;margin:0;border:1px solid #d9e2ee;border-radius:12px;background:#fff}.study-program li{display:flex;gap:10px;align-items:baseline;padding:10px 8px;border-radius:7px;min-height:40px}.study-program li>span{font:11px "DejaVu Sans Mono";color:#8496ac}.study-program li code{font:13px/1.75 "DejaVu Sans Mono",Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}.study-program li.active{background:#eaf0ff;box-shadow:inset 3px 0 #3152a4;color:#234b96}.study-memory{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.study-cell{border:1px solid #cbdbe4;background:white;border-radius:12px;padding:10px 5px;text-align:center;min-width:0}.study-cell small{display:block;color:#527190;font-size:12px}.study-cell strong{display:block;font:700 clamp(18px,2vw,24px)/1.4 "DejaVu Sans Mono",Consolas,monospace;margin:5px 0;overflow-wrap:anywhere}.study-cell>span{display:block;font-size:9px;color:#74869a}.study-cell.changed{border:2px solid #2b9489;padding:9px 4px;background:#edf9f4;animation:memoryPulse .5s ease-out}.study-constants{margin:10px 0}.study-constants span{display:flex;align-items:center;gap:6px;font:12px "DejaVu Sans Mono";color:#865c20}.study-constants svg{width:13px;height:13px}.study-constants small{font:10px system-ui}.study-screen{border:1px solid #cfdde9;border-radius:11px;margin-top:12px;background:#f0f4fa;padding:10px 12px}.study-screen small{display:flex;gap:6px;align-items:center;font-size:10px;color:#5b728e;text-transform:uppercase;letter-spacing:1px}.study-screen svg{width:14px;height:14px}.study-screen output{display:block;font:14px/1.5 "DejaVu Sans Mono",Consolas,monospace;margin-top:5px;overflow-wrap:anywhere}.study-stage{padding:15px 0;min-height:140px}.study-stage p{font-size:13px;margin:8px 0}.study-phase{font-size:10px;letter-spacing:.5px;font-weight:800;text-transform:uppercase;background:#eaf0f9;color:#355a91;padding:4px 8px;border-radius:5px}.study-phase.write{background:#e2f3ec;color:#1b7356}.study-flow{display:flex;gap:5px;align-items:center;margin-top:12px}.study-flow>div{min-width:0;flex:1;background:white;border:1px solid #dae4ed;padding:8px 6px;border-radius:9px;text-align:center}.study-flow small{display:block;font-size:9px;color:#65809a;margin-bottom:4px}.study-flow code{font-size:12px;overflow-wrap:anywhere}.study-flow svg{width:22px;flex-shrink:0;stroke:#4d8095;fill:none;stroke-width:2}.study-lab-form{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:10px 0 20px}.study-lab-form label{font-size:12px;color:#415c7a;display:grid;gap:6px}.study-lab-form input,.study-lab-form select{padding:8px 12px;font:16px system-ui;min-height:44px;border:1px solid #b7cad8;border-radius:10px;max-width:240px;width:100%;color:#1b3757;background:white}.study-lab-form p{font-size:11px!important;color:#6b7e94;max-width:240px}.study-input-error{font-size:12px;color:#98402c}.study-player{margin-top:0!important;gap:7px!important}.study-player .btn{min-height:44px}.study-groups{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}.study-group,.study-remainder{background:white;border:1px solid #9fc8bf;border-radius:12px;padding:9px;animation:memoryPulse .35s}.study-remainder{border-color:#ebc679;background:#fff8e8;min-width:100px;flex:1}.study-group small,.study-remainder small{display:block;font-size:10px;color:#567086;margin-bottom:7px}.study-group>div,.study-remainder>div{display:flex;gap:6px;flex-wrap:wrap}.study-dot{width:13px;height:13px;border-radius:50%;background:#398984}.study-remainder .study-dot{background:#c18a29}.study-equation{padding:12px 16px;border-radius:10px;background:#edf3fa;font:15px/1.75 "DejaVu Sans Mono",Consolas,monospace;white-space:pre-wrap;margin:12px 0}.study-logic-svg{width:100%;max-height:210px;display:block}.study-logic-svg path{fill:none;stroke-width:4}.study-logic-svg path.on{stroke:#21886c;stroke-dasharray:10 5;animation:signal .9s linear infinite}.study-logic-svg path.off{stroke:#c8d3dd}.study-logic-svg rect{fill:white;stroke:#b9cbda;stroke-width:1.5}.study-logic-svg rect.true-result{fill:#edf9f1;stroke:#27865e}.study-logic-svg text{text-anchor:middle;fill:#243e5a;font:600 15px system-ui}.study-char-row{display:flex;gap:7px;flex-wrap:wrap;margin:15px 0}.study-char-row>div{border:1px solid #d2deea;min-width:38px;text-align:center;border-radius:10px;background:white;padding:10px}.study-char-row strong{display:block;font:20px "DejaVu Sans Mono"}.study-char-row small{font-size:10px;color:#6c7f94}.study-char-row .kept{border-color:#308e80;background:#def4ea;transform:translateY(-3px);transition:transform .2s}
.pro-heading h1{letter-spacing:-1px}.pro-tabs{border:1px solid #e1e7f0!important;box-shadow:0 6px 18px #18385805}.pro-toolbar{gap:8px!important}.pro-form input,.pro-form select,.pro-heading select{min-height:44px;border:1px solid #b9cbdc;border-radius:9px;padding:8px 11px;background:white}.answer-card{padding:22px 0}.answer-card>h3{font-size:16px;line-height:1.65}.pro-pagination button{border-radius:9px;min-height:40px}.ex-head h2{font-size:25px}.ex-head p{max-width:80ch;line-height:1.75}.workbar{border-color:#c9dce4;background:#f3f8fa}.lesson-aside{box-shadow:none}.qc-choices{gap:10px}.qc-choice{border-radius:12px;min-height:48px}.qc-choice:has(input:checked){background:#eef3ff;border-color:#7093d0}.qc-letters{border-radius:8px}.qc-links{margin:14px 0}.qc-fields input{min-height:44px;font-size:16px}
@keyframes memoryPulse{from{box-shadow:0 0 0 4px #4dad8433}to{box-shadow:0 0 0 0 #4dad8400}}@keyframes signal{to{stroke-dashoffset:-15}}
@media(max-width:980px){.study-tabs{top:115px}.study-machine{grid-template-columns:1fr}.study-memory{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.study-lab{padding:15px 12px}.study-lab-heading h3{font-size:17px}.study-lab-icon{width:34px;height:34px}.study-lab-form{gap:9px}.study-lab-form label{flex:1;min-width:90px}.study-lab-form p{display:none}.study-tabs{top:0;position:relative;margin:15px 0}.study-tabs button{font-size:12px;padding:8px 4px;line-height:1.3}.study-tabs button span{display:none}.study-codebox{padding:12px 7px}.code-pieces{font-size:12px;line-height:3.5}.code-slot{font-size:13px;min-width:53px;padding:5px 6px;gap:4px}.study-code-line{gap:6px}.line-number{min-width:13px;font-size:10px}.slot-status{width:13px;height:13px;font-size:8px}.token-caption span{font-size:11px}.study-edit-tools small{display:none}.study-trace th,.study-trace td{padding:7px 5px}.study-trace tbody th{min-width:107px;font-size:11px}.study-trace td{min-width:44px}.step-index{display:none}.trace-input{min-width:34px;padding:7px 2px;font-size:14px}.study-player .btn{width:auto!important;font-size:11px;padding:8px 9px}.study-flow svg{width:15px}.study-flow small{font-size:8px}.study-flow code{font-size:11px}.study-flow>div{padding:7px 4px}.study-reading>p{padding-left:28px}.study-pane p{font-size:14px}.study-screen output{font-size:13px}.study-program li{padding:8px 6px}.study-program li code{font-size:12px}.study-lab-form input,.study-lab-form select{font-size:16px}.study-logic-svg{min-height:125px}.ex-head h2{font-size:21px}.answer-card{padding:18px 0}.answer-card>h3{font-size:15px}.pro-toolbar .btn{width:auto!important;font-size:11px}.question-context{font-size:12px}.course-layout>.card{min-width:0}}
@media(prefers-reduced-motion:reduce){.study-dot,.study-cell,.study-group,.study-logic-svg path.on{animation:none!important}.study-char-row .kept{transition:none!important}}