:root{--ink:#1d1d1b;--paper:#f3f0e7;--white:#fffefb;--lime:#d9f344;--pink:#f4b3cc;--lilac:#c7b7ef;--red:#f24a2d;--blue:#2862ae}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;line-height:1.3}
header{display:grid;grid-template-columns:1.35fr .65fr;gap:40px;align-items:end;max-width:2200px;margin:auto;padding:34px 3vw 30px;border-bottom:2px solid}.kicker,.eyebrow{font-size:11px;font-weight:900;letter-spacing:.09em;text-transform:uppercase}h1{font-size:clamp(54px,7vw,116px);line-height:.83;letter-spacing:-.07em;margin:12px 0 0}header p,.section-head p{margin:0;font-size:14px;max-width:650px}
main{max-width:2200px;margin:auto;padding:28px 3vw 82px}.scope{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:56px}.scope div{background:var(--white);border:1.5px solid;padding:11px 12px;font-size:12px}.scope b,.notes b{display:block;font-size:9px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px}
section{margin-top:76px}.section-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,650px);gap:30px;align-items:end;margin-bottom:16px}.section-head h2{font-size:clamp(42px,4.5vw,76px);line-height:.88;letter-spacing:-.06em;margin:7px 0 0}.study-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:8px}.study-head h3{font-size:22px;letter-spacing:-.035em;margin:0}.tools{display:flex;align-items:center;gap:8px}.tools button{appearance:none;border:2px solid;border-radius:999px;background:var(--white);padding:8px 13px;font-size:10px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}.tools button:hover,.tools button:focus-visible{background:var(--ink);color:var(--white)}.tools button:focus-visible{outline:3px solid var(--red);outline-offset:2px}.state{border:1.5px solid;border-radius:999px;background:var(--white);padding:5px 8px;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}.state.active{background:var(--red);color:white}.state.complete{background:var(--lime)}
.frame{position:relative;aspect-ratio:16/8.5;border:2px solid;overflow:hidden;touch-action:none}.frame svg{display:block;width:100%;height:100%}.hint{position:absolute;right:10px;bottom:9px;border:1px solid;background:rgba(255,254,251,.94);padding:5px 7px;font-size:9px;font-weight:900;letter-spacing:.05em}.pattern{will-change:transform}.skill{opacity:1;transition:opacity .22s ease,filter .22s ease}.skill.hidden{opacity:0}.notes{display:grid;grid-template-columns:repeat(4,1fr);border:2px solid;border-top:0;background:var(--white);margin-top:10px}.notes>div{min-height:82px;padding:10px 11px;border-left:1px solid rgba(29,29,27,.25);font-size:11px}.notes>div:first-child{border-left:0}
.palette-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.palette-study{border:2px solid;background:var(--white);padding:10px}.palette-study h3{font-size:14px;letter-spacing:.02em;margin:0 0 8px}.palette-study small{display:block;margin-top:8px;font-size:9px;text-transform:uppercase;letter-spacing:.04em}.mini-scene{position:relative;aspect-ratio:16/10;border:1.5px solid;overflow:hidden}.mini-scene .p{position:absolute;width:43%;height:14%;border-radius:999px}.mini-scene .p1{left:-11%;top:12%;transform:rotate(-8deg)}.mini-scene .p2{right:-8%;top:18%;transform:rotate(7deg)}.mini-scene .p3{right:8%;bottom:8%;transform:rotate(-6deg)}.mini-scene img{position:absolute;z-index:3;width:60%;left:20%;top:29%}.mini-scene b{position:absolute;z-index:4;left:-3%;bottom:12%;border:3px solid;border-radius:999px;background:var(--white);padding:8px 13px;font-size:14px;transform:rotate(-5deg)}.mini-scene i{position:absolute;z-index:5;width:28px;height:28px;border-radius:50%;background:var(--red);right:8%;top:8%}.lime .mini-scene{background:var(--lime)}.lime .p,.blue .p{background:var(--lilac)}.blue .mini-scene{background:var(--blue)}.pink .mini-scene{background:var(--pink)}.pink .p{background:var(--lime)}
footer{display:flex;justify-content:space-between;gap:20px;border-top:2px solid;margin-top:62px;padding-top:16px;font-size:12px}
@media(max-width:1300px){.scope,.notes{grid-template-columns:1fr 1fr}.notes>div:nth-child(3){border-left:0;border-top:1px solid rgba(29,29,27,.25)}}
@media(max-width:900px){header,.section-head{grid-template-columns:1fr}.palette-grid{grid-template-columns:1fr}.mini-scene{aspect-ratio:16/8}.frame{aspect-ratio:4/5}.scope,.notes{grid-template-columns:1fr}.notes>div{border-left:0;border-top:1px solid rgba(29,29,27,.25)}.notes>div:first-child{border-top:0}}
@media(max-width:600px){header{padding:24px 18px}main{padding:22px 18px 64px}.study-head{align-items:flex-start}.tools{flex-wrap:wrap;justify-content:flex-end}footer{display:block}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.skill{transition:none!important}}