@import "https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;1,600;1,700&display=swap";:root{--canvas:#f1ecdf;--ink:#1f2521;--muted:#667068;--panel:#fffdf6;--panel-alt:#e6dfcf;--tab:#fbf7ed;--staff:#8e9589;--line:#262d2840;--accent:#ed5c3c;--accent-ink:#fffdf6;--shadow:#3d372316;--hero-orb:#cad7c8;--button-hover:#d8462a;color:var(--ink);background:var(--canvas);font-synthesis:none;font-family:Manrope,Arial,sans-serif}:root[data-theme=studio]{--canvas:#111513;--ink:#f2f0e7;--muted:#aab1a7;--panel:#1b211e;--panel-alt:#242c27;--tab:#101411;--staff:#667166;--line:#ffffff20;--accent:#d9fb58;--accent-ink:#172014;--shadow:#00000038;--hero-orb:#29382b;--button-hover:#e9ff92}:root[data-theme=night]{--canvas:#17172b;--ink:#f1efff;--muted:#b4b3ce;--panel:#21213a;--panel-alt:#2b2a4a;--tab:#151527;--staff:#666486;--line:#ffffff24;--accent:#8d8aff;--accent-ink:#f9f8ff;--shadow:#08081266;--hero-orb:#37345d;--button-hover:#adaaff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--canvas);min-width:320px;margin:0}button,input{font:inherit}button{cursor:pointer}main{background:radial-gradient(circle at 80% 12%, var(--hero-orb) 0, transparent 25rem), var(--canvas);min-height:100vh;position:relative;overflow:hidden}main:before{z-index:0;opacity:.22;pointer-events:none;content:"";background-image:linear-gradient(90deg, transparent 49.8%, var(--line) 50%, transparent 50.2%);background-size:72px 100%;position:absolute;inset:0}.site-header,.hero,.forge,footer{z-index:1;width:min(1180px,100% - 48px);margin:auto;position:relative}.site-header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;height:94px;display:flex}.brand{color:var(--ink);letter-spacing:.12em;align-items:center;gap:11px;font-size:13px;font-weight:800;text-decoration:none;display:inline-flex}.brand-mark{border:1px solid var(--ink);background:var(--accent);width:31px;height:31px;color:var(--accent-ink);letter-spacing:-1px;border-radius:50%;place-items:center;font:500 10px DM Mono,monospace;display:grid}.header-tools{align-items:center;gap:19px;display:flex}.header-note{color:var(--muted);letter-spacing:.06em;text-transform:uppercase;align-items:center;gap:9px;font:10px DM Mono,monospace;display:flex}.header-note i{background:var(--accent);width:6px;height:6px;box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);border-radius:50%}.theme-switcher{border:1px solid var(--line);background:color-mix(in srgb, var(--panel) 70%, transparent);border-radius:4px;padding:3px;display:flex}.theme-switcher button{color:var(--muted);letter-spacing:.04em;background:0 0;border:0;border-radius:2px;padding:5px 7px;font:9px DM Mono,monospace}.theme-switcher button.selected{background:var(--ink);color:var(--canvas)}.hero{padding:81px 0 60px}.eyebrow{color:var(--accent);letter-spacing:.14em;text-transform:uppercase;margin:0 0 15px;font:10px DM Mono,monospace}h1{max-width:900px;color:var(--ink);letter-spacing:-.07em;margin:0;font-size:clamp(48px,7.2vw,88px);font-weight:700;line-height:.94}h1 em{color:var(--accent);letter-spacing:-.08em;font-family:Playfair Display,Georgia,serif;font-weight:600;display:inline-block;transform:rotate(-1.5deg)}.hero-copy{width:min(500px,100%);color:var(--muted);margin:29px 0 0 2px;font-size:15px;line-height:1.78}.forge{border:1px solid var(--ink);background:var(--panel);box-shadow:10px 12px 0 var(--shadow);border-radius:3px;grid-template-columns:323px minmax(0,1fr);display:grid;overflow:hidden}.controls{border-right:1px solid var(--ink);background:var(--panel-alt);padding:28px}.panel-heading{align-items:center;gap:11px;margin-bottom:27px;display:flex}.panel-heading span{border:1px solid var(--ink);width:23px;height:23px;color:var(--ink);border-radius:50%;place-items:center;font:10px DM Mono,monospace;display:grid}h2{color:var(--ink);letter-spacing:-.045em;margin:0;font-size:19px;font-weight:800}.control-label,.range-head label,.tempo-control label{color:var(--muted);letter-spacing:.11em;text-transform:uppercase;margin:21px 0 9px;font:10px DM Mono,monospace;display:block}.key-grid{grid-template-columns:repeat(6,1fr);gap:4px;display:grid}.key-grid button,.choice-group button{border:1px solid var(--line);background:color-mix(in srgb, var(--panel) 73%, transparent);min-height:36px;color:var(--ink);border-radius:2px;font-size:11px;transition:background .15s,transform .15s}.key-grid button:hover,.choice-group button:hover{border-color:var(--ink);transform:translateY(-1px)}.key-grid button.selected,.choice-group button.selected{border-color:var(--accent);background:var(--accent);color:var(--accent-ink);font-weight:800}.choice-group{grid-template-columns:repeat(3,1fr);gap:4px;display:grid}.genre-group{grid-template-columns:repeat(2,1fr)}.range-head{justify-content:space-between;align-items:center;display:flex}.range-head label{margin-bottom:9px}.range-head strong{color:var(--ink);font:10px DM Mono,monospace}input[type=range]{width:100%;height:4px;accent-color:var(--accent);cursor:pointer;margin:0}.generate-button{border:1px solid var(--ink);background:var(--accent);width:100%;min-height:51px;color:var(--accent-ink);box-shadow:3px 3px 0 var(--ink);border-radius:2px;justify-content:center;align-items:center;gap:9px;margin-top:31px;font-size:12px;font-weight:800;transition:transform .15s,box-shadow .15s,background .15s;display:flex}.generate-button:hover{background:var(--button-hover);box-shadow:1px 1px 0 var(--ink);transform:translate(2px,2px)}.generate-button span{font-size:17px}.result-panel{background:color-mix(in srgb, var(--panel) 90%, transparent);min-width:0;padding:31px 34px 19px}.result-topline{justify-content:space-between;align-items:flex-start;margin-bottom:29px;display:flex}.result-topline .eyebrow{margin-bottom:8px}.result-topline h2{font-size:clamp(18px,2vw,24px)}.metadata{gap:7px;display:flex}.metadata span{border:1px solid var(--line);color:var(--muted);border-radius:2px;padding:6px 8px;font:10px DM Mono,monospace}.tab-card{border:1px solid var(--ink);background:var(--tab);border-radius:2px;overflow:hidden}.tab-row+.tab-row{border-top:1px solid var(--ink)}.tab-ruler{border-bottom:1px solid var(--line);color:var(--muted);letter-spacing:.05em;gap:0;padding-left:40px;font:9px DM Mono,monospace;display:grid}.tab-ruler span{border-right:1px solid var(--line);padding:11px 8px}.tab-lines{padding:12px 0 15px;overflow-x:auto}.tab-line{align-items:center;min-width:530px;height:28px;display:flex}.string-label{width:39px;color:var(--muted);text-align:center;flex:0 0 39px;font:12px DM Mono,monospace}.string-cells{background:linear-gradient(var(--staff), var(--staff)) center / 100% 1px no-repeat;flex:1;align-items:center;height:100%;display:grid}.tab-cell{height:100%;color:color-mix(in srgb, var(--staff) 75%, transparent);place-items:center;font:11px DM Mono,monospace;display:grid;position:relative}.tab-cell.has-note{color:var(--ink);background:var(--tab);font-weight:500}.tab-cell.active{z-index:1;background:var(--accent);box-shadow:0 0 0 1px var(--accent), 0 2px 8px color-mix(in srgb, var(--accent) 45%, transparent);color:var(--accent-ink);border-radius:1px;font-weight:700}.tab-cell.bar-end:after{z-index:0;background:var(--ink);content:"";width:1px;position:absolute;top:-2px;bottom:-2px;right:0}.player{border:1px solid var(--ink);background:var(--panel-alt);border-radius:2px;align-items:center;gap:14px;margin-top:23px;padding:14px;display:flex}.play-button{border:1px solid var(--ink);background:var(--accent);width:44px;height:44px;color:var(--accent-ink);border-radius:50%;flex:0 0 44px;place-items:center;padding:0;transition:transform .15s;display:grid}.play-button svg{fill:currentColor;width:18px;height:18px;display:block}.play-button:hover{transform:rotate(-8deg)scale(1.05)}.play-button.playing{background:var(--ink);color:var(--canvas)}.player-copy{gap:4px;min-width:0;display:grid}.player-copy strong{color:var(--ink);font-size:12px}.player-copy span{color:var(--muted);font:10px DM Mono,monospace}.sound-control,.tempo-control{min-width:135px;margin-left:auto}.sound-control+.tempo-control,.tempo-control+.tempo-control{margin-left:0}.sound-control>span,.tempo-control label{color:var(--muted);letter-spacing:.11em;text-transform:uppercase;margin:0 0 7px;font:10px DM Mono,monospace;display:block}.sound-control>div{gap:3px;display:flex}.sound-control button{border:1px solid var(--line);background:var(--panel);min-height:25px;color:var(--muted);border-radius:2px;padding:3px 6px;font:9px DM Mono,monospace}.sound-control button.selected{border-color:var(--accent);background:var(--accent);color:var(--accent-ink);font-weight:700}.tempo-control div{align-items:center;gap:8px;display:flex}.tempo-control input{min-width:0}.tempo-control output{width:31px;color:var(--ink);font:10px DM Mono,monospace}.step-counter{color:var(--muted);align-items:center;gap:7px;margin-top:14px;font:10px DM Mono,monospace;display:flex}.step-counter .step-indicator{background:var(--staff);border-radius:50%;width:6px;height:6px;display:inline-block}.step-counter .step-indicator.pulse{background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);animation:.8s infinite alternate pulse}@keyframes pulse{to{transform:scale(1.4)}}footer{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;justify-content:space-between;padding:39px 0 50px;font:10px DM Mono,monospace;display:flex}footer p{letter-spacing:0;text-transform:none;margin:0}@media (width<=900px){.sound-control,.tempo-control{min-width:104px}.player{flex-wrap:wrap}.player-copy{margin-right:auto}.sound-control,.tempo-control{margin-left:0}}@media (width<=780px){.site-header,.hero,.forge,footer{width:min(100% - 28px,600px)}.site-header{height:73px}.header-note{display:none}.theme-switcher button{padding:5px 6px}.hero{padding:55px 0 39px}.hero-copy{font-size:14px}.forge{grid-template-columns:1fr}.controls{border-right:0;border-bottom:1px solid var(--ink);padding:22px}.panel-heading{margin-bottom:20px}.control-label,.range-head label{margin-top:17px}.result-panel{padding:24px 17px 17px}.metadata{display:none}.player{gap:11px}.sound-control,.tempo-control{flex:120px}footer{flex-direction:column;gap:18px;padding-top:30px}}