*{box-sizing:border-box}:root{--ink:#142c45;--muted:#52657a;--blue:#155caa;--teal:#087869;--line:#d9e3ed;--bg:#f3f7fb}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}a{color:var(--blue);text-underline-offset:4px}button,input,select,textarea{font:inherit}button,.button{display:inline-block;border:1px solid #aabccd;border-radius:8px;padding:10px 16px;background:#fff;color:var(--ink);cursor:pointer;font-weight:650;text-decoration:none}button:hover,.button:hover{background:#eaf2fa}button.primary,.button.primary{background:var(--blue);border-color:var(--blue);color:white}button:disabled{opacity:.5;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #ad5100;outline-offset:3px}header{background:white;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:20px 3vw;gap:20px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font-weight:800}.brand b{background:linear-gradient(135deg,var(--blue),var(--teal));color:#fff;border-radius:9px;padding:8px}.brand b span{font-size:12px}.brand small{display:block;letter-spacing:1.5px;font-size:10px;color:var(--muted)}.shell{max-width:1560px;margin:auto;display:grid;grid-template-columns:245px minmax(0,1fr)}aside{padding:32px 22px;border-right:1px solid var(--line)}aside h2{font-size:28px;line-height:1.2;margin:18px 0 28px}nav{display:grid;gap:5px}nav a{display:flex;justify-content:space-between;gap:8px;padding:11px 12px;border-radius:7px;text-decoration:none;color:var(--ink);font-size:14px}nav a[aria-current=page]{background:#dfecf9;color:#124f92;font-weight:750}nav span{color:var(--muted)}main{padding:32px clamp(20px,3vw,48px) 64px;min-width:0}h1{font-size:clamp(32px,3.5vw,48px);line-height:1.1;letter-spacing:-1.5px;margin:9px 0 16px}h2{font-size:25px;line-height:1.25;letter-spacing:-.5px}h3{line-height:1.3}.eyebrow{font-size:12px;letter-spacing:1.7px;font-weight:800;color:var(--teal);margin:0}.lead{font-size:18px;color:var(--muted);max-width:70ch}.small,small{font-size:13px;color:var(--muted)}.progress-box{margin-top:28px;padding-top:20px;border-top:1px solid var(--line);font-size:14px}progress{width:100%;height:8px;accent-color:var(--teal)}.workspace{display:grid;grid-template-columns:260px minmax(0,1fr);gap:22px;align-items:start;margin-top:26px}.panel,.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:23px;min-width:0}.panel h2:first-child{margin-top:0}.controls{padding:20px}.controls h2{font-size:19px}.field{display:block;margin:0 0 17px}.field>span{display:block;font-weight:650;font-size:14px;margin-bottom:6px}input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{width:100%;max-width:100%;padding:10px;border:1px solid #aabccd;border-radius:6px;background:white;color:var(--ink)}textarea{min-height:115px;resize:vertical}input[type=range]{width:100%;accent-color:var(--blue)}input[type=color]{height:42px;cursor:pointer}.color-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.color-row .field{margin-bottom:12px}.color-row small{display:block;font:12px ui-monospace,monospace}.preview-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}.preview-top h2{font-size:18px;margin:0}.segmented{display:flex;gap:5px}.segmented button{padding:7px 12px;font-size:14px}.segmented button[aria-pressed=true]{background:var(--ink);color:#fff}.preview-mat{background:#e7edf4;border:1px solid var(--line);padding:14px;border-radius:9px;display:flex;justify-content:center;overflow:hidden}iframe{display:block;border:0;background:white;width:100%;height:520px;max-width:100%;transition:width .15s}.contrast-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}.contrast{background:#f3f7fb;border-radius:8px;padding:13px;font-size:14px}.contrast strong{font-size:24px;display:block}.pass{color:#076454}.fail{color:#aa2929}.actions{display:flex;gap:9px;flex-wrap:wrap;margin:20px 0}.notice{padding:16px 20px;background:#e8f3f9;border-left:3px solid var(--blue);border-radius:5px;font-size:14px}.code{font:13px/1.55 ui-monospace,monospace;min-height:250px;margin-top:16px}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:25px}.card h2{font-size:20px}.card p{color:var(--muted);font-size:14px}.card .number{font-size:13px;color:var(--teal);font-weight:750}.two{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}.lesson{max-width:850px}.lesson .panel{margin:22px 0}.example{background:#e8f3f9;border-left:3px solid var(--teal);padding:20px;margin:22px 0}.lesson p{max-width:76ch}fieldset{border:0;padding:0;margin:20px 0}legend{font-weight:750;margin-bottom:14px}.option,.check{display:flex;align-items:flex-start;gap:12px;padding:13px;border:1px solid var(--line);border-radius:7px;margin:10px 0}.option input,.check input{margin-top:6px;accent-color:var(--blue);flex-shrink:0}.check small{display:block}.feedback{min-height:26px;font-weight:650}.checks{max-width:850px}.checks h2{margin-top:32px}.checks .check{background:#fff}.badge{font-size:12px;background:#e5f4ef;color:#075e4b;padding:4px 8px;border-radius:20px}.skip{position:absolute;top:-80px;left:15px;background:white;padding:10px;z-index:10}.skip:focus{top:10px}footer{padding:25px 3vw;border-top:1px solid var(--line);font-size:14px;color:var(--muted);display:flex;justify-content:space-between;gap:20px}#toast{position:fixed;bottom:20px;right:20px;background:var(--ink);color:white;max-width:min(420px,90vw);border-radius:8px;z-index:20}#toast:not(:empty){padding:14px 20px}summary{cursor:pointer;font-weight:650}.resource{display:block;padding:15px 0;border-bottom:1px solid var(--line)}@media(max-width:1150px){.shell{grid-template-columns:215px minmax(0,1fr)}.workspace{grid-template-columns:220px minmax(0,1fr);gap:16px}.grid{grid-template-columns:1fr 1fr}.contrast-grid{grid-template-columns:1fr}}@media(max-width:900px){.shell{grid-template-columns:1fr}aside{border-right:0;border-bottom:1px solid var(--line);padding:15px 20px}aside h2,aside>.eyebrow,aside>.small{display:none}nav{display:flex;flex-wrap:wrap;gap:4px}nav a{padding:8px}nav span{display:none}.progress-box{margin-top:12px;padding-top:10px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}.progress-box progress{width:100px}.progress-box p{margin:0}main{padding:26px 20px 50px}.workspace{grid-template-columns:240px minmax(0,1fr)}.two{grid-template-columns:1fr}}@media(max-width:620px){.workspace,.grid{grid-template-columns:1fr}.controls{display:grid;grid-template-columns:1fr 1fr;gap:0 15px}.controls h2,.controls .color-row,.controls .full{grid-column:1/-1}.contrast-grid{grid-template-columns:1fr 1fr}.panel{padding:18px}.preview-mat{padding:7px}header{padding:16px}.brand{font-size:14px}header>a:last-child{font-size:14px}footer{display:block}footer span{display:block;margin-top:8px}.lead{font-size:16px}h1{letter-spacing:-1px}.contrast{padding:10px;font-size:13px}.progress-box label{display:none}}@media(prefers-reduced-motion:reduce){iframe{transition:none}}@media print{aside,header,footer,.actions,#toast{display:none}.shell{display:block}main{padding:0}.panel,.card{break-inside:avoid}}