:root{color:#171717;background:#f6f6f6;font:16px/1.55 system-ui,sans-serif;--navy:#161616;--muted:#505050;--line:#d6d6d6;--serif:Georgia,serif}*{box-sizing:border-box}body{margin:0}.wrap{width:min(1150px,calc(100% - 64px));margin:auto}.mast{border-bottom:1px solid var(--line);background:#fff}.mast-inner,.panel-title,.walk-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.mast-inner{min-height:70px}.brand{display:flex;gap:11px;align-items:center;font-weight:700;line-height:1.2}.brand small{display:block;color:var(--muted);font-size:.62rem;letter-spacing:.15em;margin-top:4px}.mark{display:grid;place-items:center;border-radius:9px;background:var(--navy);color:white;width:37px;height:37px;font:italic 23px var(--serif)}sup{font-size:.6em}.hero{padding:35px 0 24px}.hero h1{font:normal clamp(2rem,4vw,3.25rem)/1.08 var(--serif);margin:0 0 9px}.hero p,.lesson-head>p:last-child{color:var(--muted);margin:0}.workspace{display:grid;grid-template-columns:255px minmax(0,1fr);border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;margin-bottom:40px}aside{padding:23px 17px;background:#eeeeee;border-right:1px solid var(--line)}aside h2,.kicker{font-size:.69rem;letter-spacing:.16em;color:#464646;font-weight:750;margin:0 0 10px}nav h2,.glossary{padding:0 11px}.lesson-link{display:flex;justify-content:space-between;gap:8px;width:100%;text-align:left;background:transparent;border:0;margin-bottom:4px;font-size:.88rem;padding:10px 11px}.lesson-link[aria-current=true]{background:var(--navy);color:white}.glossary{border-top:1px solid var(--line);margin-top:23px;padding-top:20px}dl{margin:0}dt{font-weight:700;margin-top:11px;font-family:ui-monospace,monospace;font-size:.85rem}dd{margin:2px 0 0;color:var(--muted);font-size:.84rem;line-height:1.45}article{min-width:0;padding:25px clamp(20px,3.4vw,42px) 30px}.lesson-head h2{font:normal clamp(1.8rem,3vw,2.5rem)/1.1 var(--serif);margin:0 0 8px}h3{margin:0 0 5px;font-size:.97rem}.prompt,.output,.walkthrough{border:1px solid var(--line);border-radius:9px;padding:13px 15px;margin-top:16px}.prompt{background:#f5f5f5;border-left:4px solid #4a4a4a}.prompt p{margin:0;font-size:.92rem}.prompt p+p{margin-top:6px;color:var(--muted)}.panel{margin-top:16px;border:1px solid var(--line);border-radius:9px;overflow:hidden}.panel-title{padding:7px 12px;background:#ededed;font-weight:700;font-size:.87rem}textarea,pre{font: .88rem/1.55 ui-monospace,Consolas,monospace;tab-size:4}textarea{width:100%;display:block;border:0;padding:11px 13px;color:#191919;background:#fdfdfd;resize:vertical;min-height:118px}pre{margin:6px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}#editor-help{font-size:.75rem;color:var(--muted);margin:0;padding:4px 12px 7px}.controls{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}button{font:inherit;font-size:.85rem;font-weight:650;color:var(--navy);border:1px solid #c5c5c5;background:white;padding:7px 11px;border-radius:7px;cursor:pointer}button:hover:not(:disabled){box-shadow:inset 0 0 0 1px currentColor}button:disabled{opacity:.5;cursor:default}.primary{background:var(--navy);border-color:var(--navy);color:white}.quiet{border-color:transparent;background:transparent;padding:4px 7px}.output{margin-top:10px;background:#f4f4f4}.output.error{background:#f4f4f4;border-color:#383838;color:#1a1a1a}.output.success{background:#fafafa;border-color:#686868;color:#222222}.walkthrough{background:#f9f9f9}.walk-head h3{margin:0}#walk{margin-top:10px}#walk-code,#solution{background:#eeeeee;padding:9px;border-radius:6px}#walk-text{margin:7px 0}details{margin-top:13px}summary{cursor:pointer;font-size:.86rem;font-weight:700}#load{margin-top:8px}#print-code{display:none}:focus-visible{outline:3px solid #555555;outline-offset:2px}textarea:focus-visible{outline-offset:-3px}[hidden]{display:none!important}@media(max-width:730px){.wrap{width:calc(100% - 28px)}.workspace{display:flex;flex-direction:column}aside{border:0;border-bottom:1px solid var(--line);padding:13px}#lessons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}.lesson-link{margin:0}.glossary{margin-top:10px;padding-top:9px}dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 9px}dt,dd{margin:0}.hero{padding:25px 0 17px}}@media print{body,.workspace,aside,.prompt,.output,.walkthrough{background:white;color:black}.wrap{width:100%}.mast-inner{min-height:auto}.hero{padding:14px 0}button,textarea,#editor-help,nav{display:none!important}.workspace{display:grid;grid-template-columns:165px 1fr;margin:0}aside,article{padding:12px}.glossary{margin:0}.coding,.prompt,.walkthrough{break-inside:avoid}#print-code{display:block;padding:8px}#walk[hidden]{display:block!important}h1,h2,h3{break-after:avoid}}
#print-walk{display:none}@media print{.walkthrough{display:none!important}#print-walk{display:block;margin-top:14px}#print-walk pre{break-after:avoid}#print-walk p{font-size:.88rem;margin:3px 0 9px}}

.editor-tools{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:3px}
#editor{min-height:16rem;line-height:1.65;color-scheme:light}
#editor[data-theme=dark]{background:#111;color:#fafafa;caret-color:#fff;color-scheme:dark}
#editor[data-theme=dark]::selection{background:#ddd;color:#111}
#editor-theme[aria-pressed=true]{background:#161616;color:#fff}
#expanded-workspace{position:fixed;inset:0;width:min(98vw,1400px);height:calc(100dvh - 20px);max-width:none;max-height:none;margin:auto;padding:14px 20px;border:1px solid #aaa;border-radius:10px;background:white;color:#171717}
#expanded-workspace::backdrop{background:#0009}
#expanded-workspace[open]{display:flex;flex-direction:column;gap:10px}
.expanded-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.expanded-head h2{margin:0;font:normal clamp(1.1rem,3vw,1.55rem) Georgia,serif}
#expanded-workspace .coding{display:flex;flex:1;min-height:0;flex-direction:column}
#expanded-workspace .panel{display:flex;flex:1;min-height:0;flex-direction:column;margin-top:0}
#expanded-workspace #editor{flex:1;min-height:0;resize:none;font-size:1rem}
#expanded-workspace .output{max-height:27%;min-height:60px;overflow:auto}
@media(max-width:550px){.panel-title{align-items:flex-start;flex-wrap:wrap}.editor-tools{justify-content:flex-start}#expanded-workspace{width:100vw;height:100dvh;border-radius:0;padding:10px}}
@media print{#editor[data-theme=dark]{background:white;color:black}}

.pdf-workbook{margin-top:16px;padding:11px 13px;border:1px solid var(--line);border-radius:9px;background:#fff}
.pdf-heading,.pdf-reader-title{display:flex;justify-content:space-between;align-items:center;gap:10px}
.pdf-heading h3,.pdf-reader-title h3{margin:0}.pdf-heading p,#pdf-status,#pdf-page-status{margin:3px 0 0;color:var(--muted);font-size:.85rem}
#open-pdf,.pdf-reader-title button{flex:none}
#pdf-status:not([hidden]),#pdf-page-status:not([hidden]){margin-top:8px}
#pdf-reader{min-width:0;align-self:start;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#f8f8f8}
.pdf-reader-title,.pdf-toolbar{padding:9px 10px;background:#efefef;border-bottom:1px solid var(--line)}
#pdf-name{overflow-wrap:anywhere;min-width:0}
.pdf-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:.83rem}
.pdf-toolbar button{padding:4px 8px}
.pdf-toolbar input,.pdf-toolbar select{max-width:100%;font:inherit;color:#171717;background:#fff;border:1px solid #aaa;border-radius:4px;padding:4px}
#pdf-page{width:4.4em}
#pdf-page-status{padding:0 10px}
#pdf-scroll{max-height:68vh;overflow:auto;overscroll-behavior:contain;background:#dedede}
#pdf-canvas{display:block;width:calc(var(--pdf-width, 1) * 100%);height:auto;margin:0 auto;background:#fff}
#pdf-text-details{margin:0;padding:8px 10px}
#pdf-text{white-space:pre-wrap;overflow-wrap:anywhere;margin:8px 0 0;font-size:.86rem}
#practice-layout.with-pdf{display:grid;gap:12px;margin-top:12px}
#practice-layout.with-pdf .panel{margin-top:0}
@media(min-width:1000px){
  .wrap:has(#practice-layout.with-pdf){width:min(1460px,calc(100% - 44px))}
  .workspace:has(.with-pdf){grid-template-columns:205px minmax(0,1fr)}
  .workspace:has(.with-pdf) article{padding-inline:18px}
  #practice-layout.with-pdf{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media(max-width:999px){#practice-layout.with-pdf #pdf-scroll{max-height:52vh}}
@media print{.pdf-workbook,#pdf-reader{display:none!important}#practice-layout.with-pdf{display:block}}

#pdf-scroll{--pdf-pane-height:68vh;max-height:var(--pdf-pane-height)}
#pdf-scroll[data-fit=page] #pdf-canvas{width:auto;height:auto;max-width:100%;max-height:var(--pdf-pane-height)}
.pdf-page-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px;padding:8px 10px;background:#efefef;border-top:1px solid var(--line)}
#pdf-position{font-size:.83rem;font-weight:650}
@media(max-width:999px){#pdf-scroll{--pdf-pane-height:52vh}}