:root{--bg:#ffffff;--ink:#242633;--accent:#3157cb;--surface:#eceef3;--line:#c3c6d0}h1,h2,h3{font-weight:650;letter-spacing:-.04em}.studio-header{border-bottom:1px solid var(--ink)}.studio-header .wrap{display:flex;justify-content:space-between;align-items:center;gap:25px;min-height:85px}.studio-brand{font-size:30px;letter-spacing:-.06em;font-weight:850;text-decoration:none}.studio-brand b{background:var(--ink);color:#fff;padding:0 7px;margin-left:5px}.studio-header nav{display:flex;gap:26px}.studio-header a{text-decoration:none}.studio-intro{padding:40px 0 30px;display:flex;justify-content:space-between;align-items:end;gap:60px}.studio-intro h1{font-size:clamp(38px,4.6vw,65px);max-width:700px;margin-bottom:16px}.studio-intro p{max-width:400px;font-size:17px}.workstation{display:grid;grid-template-columns:300px minmax(0,1fr);border:1px solid var(--ink);margin:16px 0 45px}.parameter{padding:25px;border-right:1px solid var(--ink);background:var(--surface)}.parameter h2{font:16px monospace;letter-spacing:0}.canvas-area{background:#fff;padding:20px;min-width:0;display:flex;flex-direction:column;justify-content:space-between}.canvas-area canvas{display:block;width:100%;aspect-ratio:1.6;object-fit:contain}.canvas-caption{display:flex;justify-content:space-between;gap:15px;font-size:13px;padding-top:12px}.tool-strip{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--ink);margin-bottom:45px}.tool-strip a{padding:26px;text-decoration:none;min-width:0}.tool-strip a+a{border-left:1px solid var(--ink)}.tool-strip strong{display:block;font-size:25px;margin-bottom:8px}.tool-strip a:hover{background:var(--surface)}.tool-strip p{font-size:15px;margin:0}.swatches{display:flex;min-height:130px}.swatches span{flex:1;display:flex;align-items:end;justify-content:center;padding:15px 3px;font:12px monospace;color:#fff;text-shadow:0 1px 3px #000}.palette-card{border:1px solid var(--line)}.palette-card .palette-copy{padding:18px 20px}.palette-card a{text-decoration:none}.palette-card h3{margin-bottom:7px}.palette-card p{font-size:15px;margin:0}.palette-full{min-height:310px;margin:25px 0}.palette-full span{font-size:19px}.docs-list{display:grid;grid-template-columns:1fr 1fr;gap:0 50px}.docs-list a{display:block;padding:24px 0;border-top:1px solid var(--line);text-decoration:none}.docs-list h3{font-size:25px;margin:8px 0}.docs-list p{margin:0;font-size:16px}.studio-reading{display:grid;grid-template-columns:250px minmax(0,740px);gap:70px}.studio-reading aside{font-size:15px;border-top:4px solid var(--accent);padding-top:18px}.studio-reading aside a{display:block;padding:9px 0}.contrast-preview{padding:45px 25px;border:1px solid var(--ink);font-size:30px;font-weight:bold;min-height:220px}.ratio{font:52px monospace;letter-spacing:-.05em;padding:20px 0}.audio-panel{background:#242633;color:white;padding:35px;min-height:300px}.audio-panel h2{color:#f6dd47}.audio-panel .wave-bars{display:flex;align-items:center;gap:10px;height:130px}.wave-bars i{display:block;width:15px;background:#f6dd47;height:30%}.wave-bars i:nth-child(3n){height:85%}.wave-bars i:nth-child(2n){height:55%}.beat-light{height:18px;width:18px;border-radius:50%;background:#70727c;display:inline-block}.beat-light.lit{background:#f6dd47}.board-layout{display:grid;grid-template-columns:340px 1fr;gap:40px}.studio-subnav{display:flex;gap:25px;flex-wrap:wrap;padding:18px 0;border-bottom:1px solid var(--line);font-size:14px}.studio-header .mobile-menu a{padding:9px}.mono{font-family:monospace}@media(max-width:950px){.studio-intro{display:block;padding-top:28px}.studio-intro p{max-width:700px}.workstation{grid-template-columns:250px 1fr}.parameter{padding:20px}.studio-reading{grid-template-columns:1fr;gap:30px}.studio-reading aside{order:2}.board-layout{grid-template-columns:1fr 1fr;gap:25px}}@media(max-width:650px){.workstation{display:flex;flex-direction:column}.canvas-area{order:1;padding:12px}.parameter{order:2;border-right:0;border-top:1px solid var(--ink)}.parameter .actions{margin-bottom:10px}.tool-strip{grid-template-columns:1fr}.tool-strip a+a{border-left:0;border-top:1px solid var(--ink)}.tool-strip a{padding:20px}.docs-list{grid-template-columns:1fr}.board-layout{grid-template-columns:1fr}.studio-brand{font-size:27px}.studio-header .wrap{min-height:75px;align-items:start;padding-top:16px;padding-bottom:14px}.studio-intro h1{font-size:37px}.studio-intro .eyebrow{font-size:12px}.palette-full{min-height:220px}.palette-full span{font-size:12px}.studio-subnav{gap:18px;font-size:13px}.audio-panel{padding:25px}.canvas-caption{font-size:11px}.studio-intro{padding-bottom:5px}.swatches span{font-size:11px}}