@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--bg:#f5f3eb;--paper:#fffef9;--ink:#193e37;--muted:#68756d;--line:#d9ded2;--green:#dce9bd;--gold:#e8ad58;--soft:#ecf0e5;--rust:#b95436}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--bg);font-family:'Space Grotesk','Noto Sans JP',sans-serif;font-size:14px;line-height:1.7}button,input,select,textarea{font:inherit;color:inherit}button,a,input,select,summary{touch-action:manipulation}button,select{cursor:pointer}button{border:1px solid var(--line);border-radius:7px;padding:9px 13px;background:var(--paper);font-weight:600;transition:background .15s,transform .15s}button:hover{background:var(--soft)}button:active{transform:translateY(1px)}button:disabled{opacity:.5;cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:3px}input,select,textarea{border:1px solid #becabd;border-radius:6px;background:var(--paper);padding:9px;max-width:100%}label{display:block;font-size:12px;font-weight:600}label span{color:var(--muted);font-weight:400}h1,h2,h3,p{margin:0}h2{font-size:17px}h3{font-size:16px}a{color:inherit}header.top{height:78px;padding:0 4.5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:var(--paper)}.brand{text-decoration:none;letter-spacing:1px;font-size:20px;font-weight:700;display:flex;align-items:center;gap:9px}.brand b{background:var(--green);border-radius:4px;font-size:12px;padding:1px 6px;letter-spacing:1px}.brand-icon{background:var(--ink);color:var(--green);width:34px;height:34px;text-align:center;font-size:28px;line-height:32px;border-radius:7px}.version{font-size:10px;letter-spacing:1px;display:flex;gap:13px;align-items:center}.dot{background:var(--gold);border-radius:50%;width:6px;height:6px}main{max-width:1510px;padding:36px 4.5% 65px;margin:auto}.hero{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px;gap:25px}.eyebrow{color:var(--muted);font-size:10px;letter-spacing:2px;font-weight:700;margin-bottom:12px}h1{font-size:clamp(24px,3vw,38px);letter-spacing:-1.2px;line-height:1.5;margin-bottom:10px}.hero p:last-child{color:var(--muted);font-size:13px}.mobile{display:none}.hero-mark{transform:rotate(-3deg);font-family:monospace;line-height:1.1;color:#8b9d84;font-size:14px;padding:8px 18px;border-left:2px solid var(--gold)}.hero-mark span{display:block}.hero-mark i{font-style:normal;display:block;font-size:8px;letter-spacing:2px;margin-top:10px}.workspace{display:grid;grid-template-columns:280px minmax(0,1fr);gap:24px;align-items:start}.input-panel{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:22px;position:sticky;top:16px}.panel-heading{display:flex;align-items:center;gap:10px;margin-bottom:19px}.step-label{font:600 11px 'Space Grotesk',sans-serif;width:25px;height:25px;display:grid;place-items:center;background:var(--green);border-radius:5px}.input-panel label>span{float:right;font-size:10px}.input-panel textarea{width:100%;resize:vertical;font-family:'Space Grotesk',monospace;font-size:17px;line-height:1.8;margin-top:7px;background:#f8f9f1;padding:13px;min-height:116px}.examples{display:flex;gap:5px;margin:10px 0 19px}.examples button{font-size:10px;padding:4px 8px;background:var(--soft);border:0}.two-inputs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}.two-inputs select{display:block;width:100%;margin-top:5px;font-size:11px}.primary{background:var(--ink);color:#fffef9;border-color:var(--ink)}.primary:hover{background:#29574d}.full{width:100%;display:flex;justify-content:space-between}.quiet{font-size:11px;color:var(--muted);margin-top:10px}.quiet.error{color:var(--rust)}.help{font-size:11px;margin:18px 0;color:var(--muted);border-top:1px solid var(--line);padding-top:15px}.help summary{cursor:pointer;font-weight:700}.help p{margin-top:12px}.help code{display:block;background:var(--soft);padding:6px;margin-top:8px}.save-row{display:flex;gap:7px}.save-row button{font-size:10px;padding:7px 9px}.small-tag{font-size:9px;color:var(--muted);margin-left:auto;border:1px solid var(--line);border-radius:20px;padding:2px 10px}.levels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.levels button{text-align:left;padding:15px 12px;background:transparent;border-color:#c9d2c2}.levels button span{font-size:9px;letter-spacing:1px;color:var(--muted);display:block;margin-bottom:8px}.levels button b{font-size:14px;display:block}.levels button small{display:block;font-size:10px;font-weight:400;color:var(--muted);margin-top:5px}.levels button[aria-pressed=true]{background:var(--ink);color:white;border-color:var(--ink)}.levels button[aria-pressed=true] span,.levels button[aria-pressed=true] small{color:#c4d7ba}.arrangement-summary{display:flex;gap:10px;align-items:center;justify-content:space-between;margin:15px 0}.arrangement-summary p{font-size:12px;color:var(--muted)}.arrangement-summary button{font-size:11px;flex-shrink:0}.transport{border:1px solid var(--line);background:var(--paper);border-radius:10px;padding:16px 18px;margin-bottom:26px}.play-row{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.play-row button{font-size:12px}.play-button{background:var(--green);border-color:#bccca1}.play-button.is-playing{background:var(--gold)}.loop{display:flex;gap:5px;align-items:center;font-size:11px}.loop input{accent-color:var(--ink)}#now{margin-left:auto;font-family:monospace;color:var(--muted);font-size:11px}.sound-row{display:flex;gap:15px;align-items:center;flex-wrap:wrap;margin-top:14px;border-top:1px solid #edf0e7;padding-top:12px}.sound-row label{display:flex;gap:6px;align-items:center;font-size:10px}.sound-row input[type=number]{width:58px;padding:4px 7px}.sound-row select{font-size:10px;padding:5px}.count-hint{font-size:9px;color:var(--muted);margin-left:auto}.mixer{position:relative;font-size:10px}.mixer summary{cursor:pointer}.mixer[open]{background:var(--soft);padding:8px;border-radius:7px}.mixer label{margin:6px 0}.mixer input{width:90px;accent-color:var(--ink)}.score-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.score-heading p{font-size:10px;color:var(--muted);margin-top:3px}.score-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.score-actions button{font-size:10px;padding:6px 9px}.note-toggle{font-size:10px;display:flex;align-items:center;gap:3px}.score-hint{font-size:10px;color:var(--muted);margin:12px 0}.score{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.bar{border:1px solid var(--line);border-radius:9px;background:var(--paper);overflow:hidden;transition:box-shadow .1s}.bar.playing{box-shadow:0 0 0 2px var(--gold)}.bar.pinned{border-color:#829b74}.bar-top{display:flex;align-items:center;justify-content:space-between;padding:9px 11px;background:#edf1e5;gap:7px}.bar-title{font-size:10px;color:var(--muted)}.bar-tools{display:flex;gap:4px;align-items:center}.bar-tools button{font-size:9px;padding:3px 5px;white-space:nowrap}.bar-tools select{font-size:9px;padding:2px;max-width:103px}.chord-labels{margin:10px 9px 2px 31px;display:grid;grid-template-columns:repeat(8,1fr);font-weight:700;font-size:13px}.tab-grid{display:grid;grid-template-columns:21px repeat(8,minmax(0,1fr));margin:0 9px 8px;row-gap:1px}.string-label{font:11px monospace;color:var(--muted);display:grid;place-items:center;height:27px}.cell{height:27px;display:grid;place-items:center;position:relative;min-width:0}.cell.string::before{content:'';position:absolute;height:1px;background:#c5cdbd;left:0;right:0;z-index:0}.cell.end{border-right:1px solid #a8b49f}.cell.note button{position:relative;padding:0 3px;min-width:21px;height:23px;font:700 13px monospace;border:0;background:var(--paper);border-radius:4px;z-index:1}.cell.note button.root{color:var(--ink)}.cell.note button.color{color:var(--rust)}.cell.note button.selected{background:var(--ink);color:white}.cell.active{background:#f6e8bf}.cell.note.active button{background:var(--gold);color:var(--ink)}.beat{font:9px monospace;color:var(--muted);height:20px}.rest{color:#899981;font-size:9px}.bar-bottom{padding:6px 11px;border-top:1px solid #edf0e7;font-size:9px;color:var(--muted);display:flex;justify-content:space-between}.note-card{display:flex;gap:17px;background:#e4edcf;border:1px solid #cbd9b5;border-radius:9px;padding:19px;margin-top:19px}.note-badge{font-size:9px;letter-spacing:1px;background:var(--ink);color:#f6f6e9;border-radius:5px;padding:5px 9px;height:fit-content;white-space:nowrap}.note-card h3{font-size:13px}.note-card p{font-size:12px;margin-top:5px;color:#52694d}.prototype-note{margin-top:22px;font-size:11px;color:var(--muted)}.prototype-note b{color:var(--ink)}.prototype-note p{margin-top:6px}footer{max-width:1510px;margin:auto;padding:20px 4.5%;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;font-size:10px;color:var(--muted)}[hidden]{display:none!important}
@media(min-width:1450px){.workspace{grid-template-columns:300px minmax(0,1fr)}}@media(max-width:1050px){.workspace{grid-template-columns:245px minmax(0,1fr);gap:18px}.input-panel{padding:17px}.levels{grid-template-columns:repeat(2,1fr)}.score{grid-template-columns:1fr}.hero-mark{display:none}.count-hint{display:none}}@media(max-width:700px){header.top{height:65px;padding:0 5%}.brand{font-size:16px}.version{font-size:8px}.version .dot{display:none}.version{max-width:75px;text-align:right;line-height:1.5}main{padding:25px 5% 40px}.hero{margin-bottom:23px}.hero h1{font-size:29px}.hero p:last-child{font-size:12px}.mobile{display:initial}.workspace{grid-template-columns:1fr}.input-panel{position:static;padding:18px}.input-panel textarea{min-height:76px;max-height:180px}.two-inputs{margin-bottom:14px}.help{margin:13px 0}.output{min-width:0;margin-top:8px}.levels button{padding:12px}.levels button span{margin-bottom:5px}.levels button b{font-size:13px}.levels button small{font-size:10px}.small-tag{font-size:8px}.score-heading{align-items:start;flex-direction:column}.score{gap:12px}.score-actions{justify-content:space-between;width:100%}.transport{padding:13px}.play-row{gap:7px}.play-row button{padding:8px 10px;font-size:11px}#now{width:100%;margin:0}.sound-row{gap:10px}.note-card{padding:15px;flex-direction:column;gap:10px}.note-badge{align-self:start}footer{flex-direction:column}}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}@media print{header.top,.hero,.input-panel,.levels,.transport,.arrangement-summary,.score-actions,.score-hint,.bar-tools,.prototype-note,footer,.panel-heading{display:none!important}body,main{background:white!important;padding:0!important;color:black}.workspace{display:block}.score{display:grid;grid-template-columns:1fr 1fr}.bar{break-inside:avoid;box-shadow:none!important;border-color:#999}.bar-top{background:#eee}.note-card{break-inside:avoid;background:white}.score-heading{margin-bottom:15px}}