@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;--page:#f8f0df;--panel:#fffaf0;--ink:#3e2a1d;--soft:#755c47;--line:#e0cbb1;--accent:#92522a;--warm:#f0c18b;--deep:#5b3421}
*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:var(--page);color:var(--ink);font:500 1rem/1.54 Inter,system-ui,sans-serif}a{color:var(--accent);text-underline-offset:4px}button,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.53;cursor:default}:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{width:min(1140px,calc(100% - 48px));margin:auto}.top,.bottom{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:14px 0;font-size:.85rem}.brand{display:flex;align-items:center;gap:8px;color:var(--ink);font-weight:810;text-decoration:none}.brand span{width:25px;height:25px;border:6px solid #b7692f;border-radius:50%;background:#f2c583;box-shadow:inset 0 0 0 2px #f9e1ba}
.hero{border-radius:13px;display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1fr);overflow:hidden;background:var(--deep);color:#fff4e5;margin-bottom:13px}.hero>div{padding:clamp(25px,5.8vw,65px);align-self:center}.hero h1,.guide h1{font:400 clamp(3.65rem,8.5vw,7.5rem)/.83 'Instrument Serif',Georgia,serif;letter-spacing:-.025em;margin:0}.hero p{max-width:41ch;color:#ffe3c2;margin:15px 0 16px}.jump{display:inline-block;padding:7px 10px;border-radius:6px;background:#ffe0b8;color:#663820;font-weight:790;font-size:.8rem;text-decoration:none}.jump:focus-visible{outline-color:#fff}.hero figure{margin:0;position:relative;min-height:235px}.hero img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}.hero figcaption{position:absolute;right:6px;bottom:6px;background:#3d2a21e8;color:#fff4e5;font-size:.72rem;padding:4px 7px;border-radius:4px}.hero figcaption a{color:#fff4e5}
.workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:12px}.panel{min-width:0;border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:clamp(13px,2.2vw,22px)}.section-head{display:flex;justify-content:space-between;align-items:center;gap:10px}h2{font-size:1.06rem;margin:0;letter-spacing:-.019em}h3{font-size:.83rem;margin:12px 0 3px}.panel button{min-height:33px;border:1px solid #caad8d;background:#fff7e5;color:var(--accent);border-radius:6px;padding:5px 8px;font-size:.77rem;font-weight:740}.panel button:hover:not(:disabled){background:#ffedd1}.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:7px}label{display:grid;gap:4px;min-width:0;color:var(--soft);font-size:.78rem;font-weight:720}input{width:100%;min-width:0;min-height:36px;border:1px solid #c5ac91;border-radius:6px;background:#fffaf0;color:var(--ink);padding:6px;font-size:.86rem}details{margin-top:11px;border-top:1px solid var(--line);padding-top:8px}summary{font-size:.83rem;font-weight:750;color:var(--accent);cursor:pointer}.hint,.error{font-size:.77rem;color:var(--soft);margin:5px 0 0}.hint:empty{display:none}.error{color:#9d3628;font-weight:710}.result{background:#fff4e3}.batch-size{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:8px 0}.batch-size output{font:400 clamp(2.35rem,5vw,3.8rem)/1 'Instrument Serif',Georgia,serif}.batch-size span{font-size:.76rem;color:var(--soft)}
.composition{display:flex;overflow:hidden;height:12px;border-radius:8px;background:#ffe5c0}.composition span{min-width:0}.composition span:nth-child(1),.legend span:nth-child(1)::before{background:#ad602e}.composition span:nth-child(2),.legend span:nth-child(2)::before{background:#7b8c7a}.composition span:nth-child(3),.legend span:nth-child(3)::before{background:#dda953}.legend{display:flex;gap:11px;font-size:.72rem;color:var(--soft);margin-top:6px}.legend span{display:flex;gap:3px;align-items:center}.legend span::before{content:'';width:7px;height:7px;border-radius:2px}dl{margin:8px 0}dl>div{display:flex;justify-content:space-between;align-items:baseline;gap:8px;border-top:1px solid var(--line);padding:4px 0;font-size:.83rem}dd{margin:0;font-weight:760;font-variant-numeric:tabular-nums;white-space:nowrap}.learn,.bottom{border-top:1px solid var(--line)}.learn{margin-top:24px;padding:15px 0}.learn p{max-width:65ch;color:var(--soft);margin:5px 0 9px}.bottom{margin-top:8px}.guide{width:min(720px,100%);margin:43px auto}.guide h1{font-size:clamp(3.1rem,8vw,6rem);margin:15px 0 22px}.guide h2{margin:22px 0 5px}.guide p,.guide li{color:var(--soft)}.formula{background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:10px 13px}
@media(max-width:740px){.workspace{grid-template-columns:1fr}.hero{grid-template-columns:minmax(0,1fr)}.hero figure{max-height:275px}.hero h1{font-size:clamp(3.7rem,13vw,6.2rem)}}@media(max-width:430px){.wrap{width:calc(100% - 24px)}.hero h1{font-size:clamp(3.15rem,13vw,4.45rem)}.top,.bottom{font-size:.75rem}}