/* SPDX-License-Identifier: MIT. Stamp Composer visual theme. */
:root,:root[data-theme="dark"]{--ground:#f4efdf;--ink:#27303b;--muted:#686d70;--rule:#d9d3c3;--accent:#cc3934;--teal:#197b7b;--card:#fffbf1;--bad:#b22d2b;--focus:#197b7b;color-scheme:light}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--ground);color:var(--ink);padding:0 24px 40px;font:15px/1.55 system-ui,sans-serif}body>header,main,footer{max-width:1160px;margin:auto}body>header{display:flex;padding:22px 0;border-bottom:1px solid var(--rule);gap:20px;align-items:center}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-size:17px;font-weight:850;letter-spacing:-.5px}.brand img{width:28px;height:32px;image-rendering:pixelated}.brand small{font:11px/1 monospace;background:var(--ink);color:white;padding:5px 6px;margin-left:6px}header nav{display:flex;gap:18px;margin-left:auto}header nav a{color:var(--muted);font-size:11px;letter-spacing:1px;text-transform:uppercase;text-decoration:none;font-weight:750}header nav a[aria-current]{color:var(--accent)}a:hover{text-decoration:underline}
.hero{display:flex;align-items:end;justify-content:space-between;gap:28px;padding:34px 0 26px}.eyebrow{font:700 11px/1.4 monospace;letter-spacing:2px;text-transform:uppercase;color:var(--teal);margin:0 0 12px}.hero h1{font:850 clamp(32px,4vw,53px)/1.04 system-ui,sans-serif;letter-spacing:-2px;margin:0}.hero h1 span{color:var(--accent)}.hero-copy{max-width:365px;color:var(--muted);font-size:14px;margin:0 0 3px}.hero-copy b{color:var(--ink)}
.workspace{display:grid;grid-template-columns:minmax(0,1fr) 272px;gap:22px;align-items:start}.instrument-wrap{min-width:0}.devicebox{border-radius:26px;background:#27303b;box-shadow:0 12px 0 #ddd6c3,0 25px 35px #302b161a}.device{min-width:560px}.device canvas{image-rendering:pixelated;image-rendering:crisp-edges;border-radius:0}.start{background:#27303bc7;backdrop-filter:blur(2px);border-radius:26px}.start button{background:#ef554b;color:#fff8e9;font:750 14px system-ui;padding:15px 25px;border-radius:7px;box-shadow:0 4px 0 #8e2c2b;letter-spacing:.2px}.start button:hover{background:#ff685c}.bar{font-size:12px;margin:24px 0 14px;gap:10px}.bar button,.speak button{border:1px solid var(--rule);border-radius:5px;background:#fffbf1;color:var(--ink);min-height:34px}.cpu{margin-left:auto;font-size:10px}.speak{margin:12px 0 0;padding:12px 15px;border-radius:6px;background:transparent}.speak summary h2{font:650 12px system-ui}.speak legend{font-size:12px}.speak fieldset{font-size:12px}#said{font-size:15px}.speak p.note{font-size:11px}.turn{font-size:12px}.studio-card{background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:18px}.studio-card h2{font-size:16px;letter-spacing:-.5px;margin:0 0 4px}.studio-card p{font-size:12px;color:var(--muted);margin:0 0 15px}.studio-card .eyebrow{font-size:10px;color:var(--teal);margin-bottom:8px}.palette{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;margin:12px 0 16px}.palette button{border:1px solid var(--rule);background:#f4efdf;border-radius:5px;height:36px;padding:0;cursor:pointer}.palette button img{width:20px;height:22px;image-rendering:pixelated}.palette button[aria-pressed="true"]{border:2px solid var(--accent);background:#ffe5b8}.palette button:disabled{opacity:.45;cursor:default}.selected-name{font:700 11px monospace;text-transform:uppercase;color:var(--teal);min-height:18px}.studio-action{width:100%;min-height:39px;border-radius:5px;border:1px solid var(--rule);background:var(--card);font:650 12px system-ui;color:var(--ink);margin-top:7px;cursor:pointer}.studio-action.primary{background:var(--accent);border-color:var(--accent);color:white}.studio-action:disabled{opacity:.45;cursor:default}.studio-divider{border:0;border-top:1px solid var(--rule);margin:17px 0}.studio-state{display:flex;justify-content:space-between;font:10px monospace;color:var(--muted);margin:15px 0 0}.sound-note{font-size:10px!important;margin:15px 0 0!important}.import-input{max-width:100%;font-size:11px}.file-label{display:block;font:650 11px system-ui;margin:9px 0 7px}.guide{margin:32px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.guide section{border-top:2px solid var(--ink);padding:17px 0}.step-index{font:11px monospace;color:var(--accent)}.guide h2{font-size:16px;letter-spacing:-.5px;margin:9px 0}.guide p{font-size:12px;color:var(--muted);margin:0;max-width:32em}.guide kbd{font-size:10px;color:var(--ink);background:#fffbf1}.guide strong{color:var(--ink)}.fineprint{display:flex;gap:20px;justify-content:space-between;border-top:1px solid var(--rule);padding-top:18px;margin-top:25px;font-size:10px;color:var(--muted)}.fineprint a{color:var(--muted)}:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.dim .btnface{fill:#755246}.lit .btnface{fill:#ef554b}.lit text.btn{fill:#fff8e9}.lit .keyface.white{fill:#f1b562}.lit .keyface.black{fill:#ef7064}.held .btnface,.held .keyface{stroke:#ef554b}.hit:focus-visible{outline-color:#f1b562}
@media(max-width:950px){.workspace{grid-template-columns:minmax(0,1fr)}.studio-card{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}.sound-picker{grid-row:span 2}.studio-divider{display:none}.palette{max-width:300px}.hero-copy{max-width:300px}.cpu{display:none}}
@media(max-width:620px){body{padding:0 14px 25px}body>header{flex-wrap:wrap;gap:15px;padding:18px 0}header nav{margin-left:0;width:100%;gap:21px}.hero{padding:25px 0;display:block}.hero-copy{margin-top:17px;max-width:none}.hero h1{font-size:38px}.workspace{gap:24px}.studio-card{display:block}.studio-divider{display:block}.guide{grid-template-columns:1fr;gap:0}.guide section{padding:17px 0}.devicebox{border-radius:18px}.fineprint{display:block}.fineprint p{margin:8px 0}.bar{flex-wrap:wrap}.palette{max-width:none}.palette button{height:46px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.start{backdrop-filter:none}}