main{max-width:1180px;margin:auto;padding:38px 35px 90px}header{border-top:1px solid var(--ink);padding:17px 0 34px;max-width:850px}.eyebrow{font-size:.72rem}.eyebrow a{text-decoration:none}.eyebrow a:hover{text-decoration:underline}h1{font:400 clamp(2.7rem,6vw,5.3rem) 'Newsreader',Georgia,serif;line-height:1;letter-spacing:-.055em;margin:20px 0}h2{font:400 1.5rem 'Newsreader',Georgia,serif;margin:0}p{line-height:1.65;color:#444c44}strong{color:var(--ink)}.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:10px 0 22px;counter-reset:step}.flow>div{border:1px solid var(--line);background:var(--sheet);padding:13px 15px;min-height:97px}.flow strong,.flow small{display:block}.flow strong{font:.77rem 'DM Mono',monospace;text-transform:uppercase}.flow small{margin-top:9px;color:var(--muted);line-height:1.4}.flow>span{display:none}
.workspace{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(325px,.9fr);gap:12px}.panel{background:var(--sheet);border:1px solid var(--line);padding:22px}.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid var(--line);padding-bottom:13px}.panel-heading span{font:.73rem 'DM Mono',monospace;color:var(--muted)}svg{display:block;width:100%;height:auto;max-height:355px;background:#eef0e8;margin:15px 0}.ground{stroke:#adb6aa;stroke-width:2}.body{stroke:#4b5a4e;stroke-width:12;stroke-linecap:round;stroke-linejoin:round;fill:none}.head{fill:#748879}.arm{stroke-width:10;stroke-linecap:round;fill:none}.a{background:#c65f3e;fill:#c65f3e;stroke:#c65f3e}.b{background:#4b7185;fill:#4b7185;stroke:#4b7185}.hand{stroke:var(--sheet);stroke-width:3}svg text{fill:var(--ink);font:700 17px 'DM Mono',monospace}.legend{display:flex;flex-wrap:wrap;gap:16px;font-size:.8rem;color:#495149}.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px}.note{font-size:.84rem;color:var(--muted)}.field{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:22px 0 8px;font:.75rem 'DM Mono',monospace;text-transform:uppercase}.field select{font-family:'DM Sans',sans-serif;text-transform:none;background:var(--paper);border:1px solid var(--line);color:var(--ink);padding:9px;max-width:240px}.button-row{display:flex;flex-wrap:wrap;gap:8px;margin:17px 0}button{border:1px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;padding:10px 12px;font:.75rem 'DM Mono',monospace}button:hover{background:#e6ded0}button.primary{background:var(--ink);color:var(--sheet)}button.primary:hover{background:var(--accent);border-color:var(--accent)}input[type=range]{width:100%;accent-color:var(--accent);margin:12px 0}.time-field output{color:var(--accent);font-variant-numeric:tabular-nums}.timeline{display:grid;grid-template-columns:repeat(8,1fr);gap:2px}.timeline span{background:#dcded4;text-align:center;font:.65rem 'DM Mono',monospace;padding:6px 0;color:var(--muted)}.timeline span.active{background:var(--accent);color:white}.numbers{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin:22px 0}.numbers div{background:var(--sheet);padding:12px}.numbers dt{font:.7rem 'DM Mono',monospace;color:var(--muted)}.numbers dd{font:500 1.45rem 'Newsreader',Georgia,serif;margin:7px 0 0;font-variant-numeric:tabular-nums}.calculation{font:.75rem 'DM Mono',monospace;color:var(--green);overflow-wrap:anywhere}
.code-section{margin-top:12px}.code-section p{max-width:800px}.code-section code,.reading code,textarea{font-family:'DM Mono',monospace;font-size:.88em}code{color:#ae4c30}textarea{display:block;width:100%;min-height:106px;resize:vertical;background:#262c27;color:#f2f2e9;border:1px solid var(--ink);padding:15px;line-height:1.55}.source{border-top:1px solid var(--line);padding-top:13px;font-size:.87rem;color:var(--muted)}.source a{color:var(--ink)}.reading{max-width:850px;padding-top:38px}.reading h2{font-size:2.1rem}.reading li{line-height:1.8;margin:8px 0}.challenge{border-left:2px solid var(--accent);background:var(--sheet);padding:11px 16px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@media(max-width:800px){.workspace{grid-template-columns:1fr}.flow{grid-template-columns:repeat(2,1fr)}}@media(max-width:520px){main{padding:20px 15px 60px}.flow{grid-template-columns:1fr 1fr}.flow>div{padding:10px;min-height:100px}.panel{padding:15px}.numbers dd{font-size:1.25rem}}