:root{--ink:#17211d;--muted:#737a75;--soft:#9da29e;--paper:#fffdf9;--canvas:#f4f1ea;--line:#ddd8cf;--orange:#ee6038;--orange-dark:#cc4924;--orange-soft:#fbe4db;--green:#183f31;--green-2:#39735a;--green-soft:#dfede6;--gold:#d99b35;--shadow:0 18px 55px rgba(31,39,34,.09)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;min-height:100vh;color:var(--ink);background:var(--canvas);font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}button,input{font:inherit}button{color:inherit;cursor:pointer;border:0}button:focus-visible,input:focus-visible{outline:3px solid rgba(238,96,56,.3);outline-offset:2px}.shell{width:min(1240px,calc(100% - 48px));margin:0 auto}.site-header{height:84px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px}.brand>span:last-child strong,.brand>span:last-child small{display:block}.brand strong{font-size:17px;letter-spacing:.06em}.brand small{margin-top:4px;color:var(--soft);font-size:7px;letter-spacing:.2em}.brand-mark{width:38px;height:38px;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:9px 7px;background:var(--ink);border-radius:50%;transform:rotate(-7deg)}.brand-mark i{height:1px;background:var(--canvas)}.header-note{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:9px}.header-note i{width:7px;height:7px;background:var(--green-2);border-radius:50%;box-shadow:0 0 0 4px var(--green-soft)}.intro{display:grid;grid-template-columns:1fr .8fr;align-items:end;gap:80px;padding:55px 3px 28px}.eyebrow{display:block;color:var(--orange);font-size:9px;font-weight:800;letter-spacing:.17em}.intro h1{margin:9px 0 0;font-size:clamp(42px,5vw,68px);line-height:.96;letter-spacing:-.065em}.intro h1 em{color:var(--orange);font-style:normal}.intro-copy{padding-bottom:5px}.intro-copy p{max-width:520px;margin:0 0 18px;color:var(--muted);font-size:14px;line-height:1.8}.status-pill{display:inline-flex;padding:7px 13px;color:var(--green-2);background:var(--green-soft);border-radius:20px;font-size:9px;font-weight:800}.status-pill.is-live{color:#fff;background:var(--orange);box-shadow:0 0 0 5px var(--orange-soft)}.card{background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}
.tempo-console{display:grid;grid-template-columns:225px 1fr 120px;align-items:center;gap:28px;padding:23px 28px;background:linear-gradient(120deg,var(--paper),var(--paper) 72%,var(--orange-soft))}.tempo-display{display:grid;grid-template-columns:38px 1fr 38px;align-items:center;gap:9px}.tempo-display>div{text-align:center}.tempo-display strong{display:inline-block;font-size:48px;line-height:.9;letter-spacing:-.07em}.tempo-display span{display:block;margin-top:6px;color:var(--orange);font-size:8px;font-weight:800;letter-spacing:.16em}.tempo-nudge,.reset-button{width:38px;height:38px;color:var(--muted);background:var(--canvas);border:1px solid var(--line);border-radius:50%;font-size:20px}.tempo-nudge:hover{color:#fff;background:var(--orange);border-color:var(--orange)}.tempo-slider-wrap input,.volume-control input{width:100%;accent-color:var(--orange)}.tempo-labels{display:flex;justify-content:space-between;margin-bottom:10px;color:var(--soft);font-size:7px;font-weight:700;letter-spacing:.08em}.tap-button{height:62px;background:var(--canvas);border:1px solid var(--line);border-radius:12px}.tap-button strong,.tap-button span{display:block}.tap-button strong{font-size:15px;letter-spacing:.13em}.tap-button span{margin-top:4px;color:var(--muted);font-size:8px}.tap-button:active{color:#fff;background:var(--green);transform:scale(.97)}
.rhythm-layout{display:grid;grid-template-columns:285px 1fr;gap:15px;margin-top:15px}.rhythm-settings,.sequencer-card{padding:23px}.panel-heading h2,.sequencer-heading h2{margin:6px 0 0;font-size:22px;line-height:1.1;letter-spacing:-.04em}.rhythm-settings fieldset{margin:22px 0 0;padding:0;border:0}.rhythm-settings legend,.volume-control>span{display:block;margin:0 0 9px 2px;color:var(--muted);font-size:9px;font-weight:700}.meter-choices{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}.meter-choices button{height:36px;padding:0;color:var(--muted);background:var(--canvas);border:1px solid var(--line);border-radius:8px;font-size:9px;font-weight:700}.meter-choices button.is-active{color:#fff;background:var(--green);border-color:var(--green)}.sound-choices{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.sound-choices button{min-width:0;padding:9px 2px 7px;color:var(--muted);background:var(--canvas);border:1px solid transparent;border-radius:9px;font-size:8px}.sound-choices button.is-active{color:var(--orange);background:var(--orange-soft);border-color:var(--orange);font-weight:800}.sound-icon{width:23px;height:23px;position:relative;display:block;margin:0 auto 7px;border:2px solid currentColor;border-radius:50%}.wood-icon:after{content:"";position:absolute;left:4px;right:4px;top:9px;height:2px;background:currentColor;transform:rotate(-14deg)}.digital-icon{border-radius:5px}.digital-icon:after{content:"";position:absolute;inset:5px;border:1px solid currentColor}.bell-icon{border-radius:50% 50% 7px 7px}.bell-icon:after{content:"";position:absolute;width:5px;height:5px;left:7px;bottom:-4px;background:currentColor;border-radius:50%}.stick-icon{border:0}.stick-icon:before,.stick-icon:after{content:"";position:absolute;top:1px;left:10px;width:3px;height:22px;background:currentColor;border-radius:2px;transform:rotate(42deg)}.stick-icon:after{transform:rotate(-42deg)}
.mixer-block{margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}.output-badge{display:flex;align-items:center;gap:10px;margin-bottom:17px;padding:10px;color:var(--green);background:var(--green-soft);border-radius:9px}.output-badge>i{width:25px;height:25px;display:grid;place-items:center;color:#fff;background:var(--green-2);border-radius:50%;font-style:normal}.output-badge strong,.output-badge small{display:block}.output-badge strong{font-size:9px}.output-badge small{margin-top:2px;font-size:7px;opacity:.72}.mixer-row{display:flex;align-items:center;justify-content:space-between;gap:15px}.mixer-row>span{color:var(--ink)}.mixer-row strong,.mixer-row small{display:block}.mixer-row strong{font-size:10px}.mixer-row small{margin-top:3px;color:var(--soft);font-size:8px}.volume-control{display:block;margin:11px 0 17px}.switch{width:38px;height:21px;appearance:none;flex:0 0 auto;padding:2px;background:var(--line);border-radius:12px;transition:.2s}.switch:after{content:"";display:block;width:17px;height:17px;background:#fff;border-radius:50%;box-shadow:0 1px 4px rgba(0,0,0,.2);transition:.2s}.switch:checked{background:var(--orange)}.switch:checked:after{transform:translateX(17px)}
.sequencer-card{min-width:0;overflow:hidden}.sequencer-heading{display:flex;align-items:end;justify-content:space-between;gap:20px}.clear-button{padding:7px 0;color:var(--orange);background:none;font-size:9px;font-weight:800}.pattern-choices{display:grid;grid-template-columns:repeat(6,minmax(105px,1fr));gap:7px;margin:22px 0 24px;overflow-x:auto;padding-bottom:4px}.pattern-choices button{min-width:105px;padding:11px 10px;color:var(--muted);background:var(--canvas);border:1px solid var(--line);border-radius:10px;text-align:left}.pattern-choices strong,.pattern-choices span{display:block}.pattern-choices strong{color:var(--ink);font-size:9px}.pattern-choices span{margin-top:5px;color:var(--soft);font-size:7px;letter-spacing:.13em}.pattern-choices button.is-active{color:#fff;background:var(--orange);border-color:var(--orange);transform:translateY(-2px);box-shadow:0 8px 17px rgba(238,96,56,.19)}.pattern-choices button.is-active strong,.pattern-choices button.is-active span{color:#fff}.sequence-scroll{width:100%;overflow-x:auto;padding-bottom:8px}.beat-number-row,.sequence-row{--steps:16;min-width:max(680px,calc(var(--steps) * 34px + 98px));display:grid;grid-template-columns:92px repeat(var(--steps),minmax(26px,1fr));gap:4px}.beat-number-row{margin-bottom:6px}.beat-number-row span{color:var(--soft);font-size:7px;text-align:center}.beat-number-row span.is-pulse{color:var(--ink);font-weight:800}.sequence-row{margin-bottom:6px}.track-label{display:grid;grid-template-columns:10px 1fr;align-items:center;column-gap:7px}.track-label strong,.track-label small{display:block}.track-label strong{font-size:9px}.track-label small{grid-column:2;color:var(--soft);font-size:6px;letter-spacing:.1em}.step-cell{min-width:26px;aspect-ratio:1;display:grid;place-items:center;padding:0;background:var(--canvas);border:1px solid transparent;border-radius:6px;transition:.08s}.step-cell.is-pulse{border-color:var(--line)}.step-cell i{width:8px;height:8px;background:var(--line);border-radius:50%;transition:.1s}.step-cell:hover{border-color:var(--orange)}.step-cell.is-on{background:var(--green-soft);border-color:var(--green-2)}.step-cell.is-on i{width:14px;height:14px;background:var(--green)}.sequence-row:nth-child(2) .step-cell.is-on{background:var(--orange-soft);border-color:var(--orange)}.sequence-row:nth-child(2) .step-cell.is-on i{background:var(--orange)}.sequence-row:nth-child(3) .step-cell.is-on{background:#f7ecd2;border-color:var(--gold)}.sequence-row:nth-child(3) .step-cell.is-on i{background:var(--gold)}.step-cell.is-playing{box-shadow:0 0 0 3px var(--orange);transform:translateY(-2px)}
.sequencer-foot{display:flex;flex-wrap:wrap;gap:15px;margin-top:14px;padding-top:15px;color:var(--soft);border-top:1px solid var(--line);font-size:8px}.sequencer-foot span{display:flex;align-items:center;gap:5px}.sequencer-foot span:last-child{margin-left:auto}.legend-dot{width:8px;height:8px;display:inline-block;flex:0 0 auto;border-radius:50%}.kick-dot{background:var(--green)}.snare-dot{background:var(--orange)}.hat-dot{background:var(--gold)}.rhythm-transport{margin:15px 0 45px;padding:20px 25px 17px;text-align:center}.pulse-rail{display:flex;justify-content:center;gap:clamp(8px,2.2vw,28px);min-height:36px;margin-bottom:12px}.pulse-rail span{min-width:22px;color:var(--soft)}.pulse-rail i{width:11px;height:11px;display:block;margin:0 auto 5px;background:var(--line);border-radius:50%;transition:.08s}.pulse-rail small{font-size:7px}.pulse-rail span.is-accent i{box-shadow:0 0 0 4px var(--orange-soft)}.pulse-rail span.is-active{color:var(--orange);font-weight:800}.pulse-rail span.is-active i{background:var(--orange);transform:scale(1.5)}.transport-main{display:flex;align-items:center;justify-content:center;gap:13px}.rhythm-play{min-width:185px;height:52px;display:flex;align-items:center;justify-content:center;gap:12px;color:#fff;background:var(--orange);border-radius:28px;box-shadow:0 11px 25px rgba(238,96,56,.22)}.rhythm-play.is-running{background:var(--green);box-shadow:0 11px 25px rgba(24,63,49,.2)}.play-symbol{font-size:17px}.play-copy{text-align:left}.play-copy strong,.play-copy small{display:block}.play-copy strong{font-size:10px}.play-copy small{margin-top:2px;opacity:.65;font-size:7px}.bar-counter{min-width:74px;color:var(--muted);font-size:9px}.rhythm-transport>p{margin:12px 0 0;color:var(--soft);font-size:8px}footer{min-height:65px;display:flex;align-items:center;justify-content:space-between;color:var(--soft);border-top:1px solid var(--line);font-size:7px;letter-spacing:.12em}
@media(max-width:960px){.shell{width:min(100% - 28px,900px)}.rhythm-layout{grid-template-columns:1fr}.rhythm-settings{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}.rhythm-settings .panel-heading,.rhythm-settings .mixer-block{grid-column:1/-1}}
@media(max-width:660px){.shell{width:min(100% - 18px,620px)}.site-header{height:70px}.header-note{display:none}.intro{grid-template-columns:1fr;gap:18px;padding-top:38px}.intro h1{font-size:44px}.intro-copy p{font-size:12px}.tempo-console{grid-template-columns:1fr 82px;gap:17px;padding:20px 16px}.tempo-slider-wrap{grid-column:1/-1;grid-row:2}.tempo-display strong{font-size:42px}.tap-button{grid-column:2;grid-row:1}.rhythm-settings{display:block}.pattern-choices{grid-template-columns:repeat(6,112px)}.rhythm-transport{padding-left:12px;padding-right:12px}.pulse-rail{gap:8px;overflow-x:auto;justify-content:flex-start;padding:4px 8px}.bar-counter{display:none}.sequencer-foot span:last-child{width:100%;margin-left:0}footer{display:block;padding:20px 0;line-height:2}}