@font-face{font-family:Inter;src:url('/inter.woff2') format('woff2');font-display:swap;font-weight:100 900}@font-face{font-family:'Instrument Serif';src:url('/instrument-serif.woff2') format('woff2');font-display:swap;font-weight:400}
:root{color-scheme:light;--paper:#fff1e3;--panel:#fffaf5;--ink:#352a25;--muted:#70564b;--hot:#9d3a2e;--line:#e4c8b9;--salmon:#ffc6a9}
*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:var(--paper);color:var(--ink);font:500 1rem/1.54 Inter,system-ui,sans-serif}a{color:var(--hot);text-underline-offset:4px}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.58}:focus-visible{outline:2px solid var(--hot);outline-offset:3px}
.wrap{width:min(1100px,calc(100% - 48px));margin:auto}.top,.bottom{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 0;font-size:.86rem}.brand{display:flex;gap:8px;align-items:center;color:var(--ink);text-decoration:none;font-weight:800}.brand span{background:var(--hot);color:white;width:25px;height:25px;border-radius:50%;display:grid;place-items:center}
.hero{border:1px solid #dfad98;background:#ffd7be;border-radius:13px;padding:clamp(25px,6vw,64px);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:20px;margin-bottom:13px}.hero h1,.guide h1{font:400 clamp(3.5rem,8.4vw,7.3rem)/.81 'Instrument Serif',Georgia,serif;letter-spacing:-.028em;margin:0}.hero p{max-width:55ch;margin:14px 0 0;color:#69443a}.hero button{background:#552f29;color:#fff9ef;border:1px solid #552f29;border-radius:6px;padding:8px 10px;font-size:.8rem;font-weight:750}
.workspace{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr);align-items:start;gap:12px}.panel{min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:clamp(12px,2.2vw,22px)}h2{font-size:1.06rem;letter-spacing:-.017em;margin:0}.editor{display:grid;gap:10px}.editor label{display:grid;gap:4px;font-size:.79rem;font-weight:720;color:var(--muted);min-width:0}.pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7px}.editor input,.editor select,.editor textarea{width:100%;min-width:0;min-height:36px;border:1px solid #cca796;border-radius:6px;background:#fffaf4;color:var(--ink);padding:7px;font-size:.82rem}.editor textarea{resize:vertical}.editor input::placeholder,.editor textarea::placeholder{color:#82685d}.editor input[type=range]{accent-color:var(--hot)}.editor input[type=file]{padding:5px;font-size:.73rem}.editor input[type=file]::file-selector-button{font:inherit;background:#ffe5d9;border:1px solid #dab4a5;border-radius:4px;color:#6b322b;margin-right:5px;cursor:pointer}.toggles{display:flex;gap:10px;flex-wrap:wrap}.toggles label{display:flex;align-items:center;gap:4px}.toggles input{width:16px;height:16px;min-height:0;accent-color:var(--hot)}
.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px}.section-head output{color:var(--muted);font-size:.77rem}.preview{background:#fff8ee}.preview figure{margin:0 auto}.preview figcaption{color:var(--muted);font-size:.76rem;margin:5px 0 2px}.frame{position:relative;max-width:100%;background:#402e28;min-height:120px;border-radius:8px;overflow:hidden;width:min(100%,445px);margin:auto}.frame canvas{display:block;width:100%;height:auto}.margin{position:absolute;inset:8%;border:1px dashed #fff4c7;outline:1px dashed rgba(0,0,0,.78);pointer-events:none}.hint,.status{color:var(--muted);font-size:.77rem;margin:6px 0 0}.status:empty{display:none}.status.problem{color:#9c342d;font-weight:690}.buttons{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}.panel button{min-height:36px;padding:6px 10px;border:1px solid #d0ad9d;border-radius:6px;background:#fffaf4;color:var(--hot);font-size:.8rem;font-weight:750}.panel button:hover:not(:disabled){background:#ffece1}.panel button.primary{background:var(--hot);border-color:var(--hot);color:#fff}.panel button.primary:hover:not(:disabled){background:#873128}
.learn,.bottom{border-top:1px solid var(--line)}.learn{margin-top:25px;padding:15px 0}.learn p{color:var(--muted);max-width:65ch;margin:6px 0 9px}.bottom{margin-top:9px}.guide{width:min(720px,100%);margin:42px auto}.guide h1{font-size:clamp(3.2rem,8vw,6rem);margin:14px 0 23px}.guide h2{margin:23px 0 4px}.guide p{color:var(--muted)}.example{background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:10px 13px}
@media(max-width:730px){.workspace{grid-template-columns:1fr}.hero{grid-template-columns:1fr;gap:12px}.hero h1{font-size:clamp(3.5rem,13vw,5.8rem)}}@media(max-width:425px){.wrap{width:calc(100% - 24px)}.hero h1{font-size:clamp(3rem,13vw,4rem)}.top,.bottom{font-size:.76rem}}