*{box-sizing:border-box}body{margin:0;background:#f3f2e9;color:#173b31;font-family:Arial,sans-serif}header{padding:25px 5%;border-bottom:1px solid #ccd2c3;display:flex;gap:30px;align-items:center;font-size:10px;letter-spacing:1px}header a{color:inherit;text-decoration:none;font-size:22px;font-weight:bold;letter-spacing:-1px}.badge{margin-left:auto;border:1px solid #bbc8a7;padding:9px;font-size:8px}main{max-width:1500px;margin:auto;padding:40px 5%}.heading{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:30px}.eyebrow{font-size:9px;letter-spacing:1.8px;font-weight:bold}h1{font-size:44px;letter-spacing:-2px;margin:15px 0}h2{font-size:25px;letter-spacing:-1px}p{line-height:1.7;font-size:13px;color:#6a7668}nav{display:flex;gap:8px}button{border:1px solid #b8c4ac;background:transparent;color:inherit;padding:12px 15px;cursor:pointer;font:inherit;font-size:11px}button[aria-pressed=true],button:hover{background:#173b31;color:#f3f2e9}button:disabled{opacity:.5;cursor:wait}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #99b94c;outline-offset:4px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 280px;border:1px solid #bec9b1}canvas{width:100%;height:auto;display:block;background:#142f28;aspect-ratio:1100/620;align-self:center}aside{padding:26px;background:#e6ebdc}aside p{font-size:11px}dl{display:flex;flex-direction:column;margin:22px 0;gap:13px}dl div{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #c7d1bc;padding-bottom:10px}dt{font-size:8px;letter-spacing:1px}dd{font-family:monospace;font-size:16px;margin:0}label{display:flex;justify-content:space-between;font-size:10px}input{width:100%;accent-color:#173b31;margin:15px 0}.controls{display:flex;gap:10px}.capture{border-top:1px solid #c7d1bc;margin-top:22px;padding-top:15px;display:flex;flex-wrap:wrap;gap:8px}.capture p{font-size:9px;margin:0}.capture a{font-size:11px;color:#173b31}.footnote{font-size:10px}.notes{display:grid;grid-template-columns:1fr 1fr;gap:50px;border-top:1px solid #ccd2c3;margin-top:25px}.notes p{font-size:11px}@media(max-width:850px){.heading{display:block}nav{margin-top:20px}.workspace{grid-template-columns:1fr}aside{display:grid;grid-template-columns:1fr 1fr;gap:5px 20px}aside>p,aside>h2,aside>.capture{grid-column:1/-1}dl{grid-row:4/8;grid-column:2}header{gap:12px}.badge{display:none}.notes{grid-template-columns:1fr;gap:0}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
