:root{font-family:Avenir Next,Avenir,Segoe UI,sans-serif;color:#f2f1e8;background:#10110f;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-optical-sizing:auto;font-weight:400;--page: #10110f;--surface: #191a17;--surface-soft: #20211e;--line: #31322e;--muted: #85867e;--paper: #f2f1e8;--lime: #d1f05a;--orange: #ff8053;--mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;--display: "Avenir Next", Avenir, "Segoe UI", sans-serif}*{box-sizing:border-box}body{margin:0;min-width:360px;min-height:100vh;background:radial-gradient(ellipse at 49% 28%,rgb(64 66 48 / 12%),transparent 48%),var(--page)}button,input,select{font:inherit}button{color:inherit}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,.sequencer-scroll:focus-visible{outline:2px solid var(--lime);outline-offset:3px}.app-shell{width:min(1344px,calc(100% - 80px));margin:0 auto}.topbar{height:82px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #292a26}.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--paper)}.brand-mark{width:32px;height:32px;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:3px;padding:2px;transform:rotate(-8deg)}.brand-mark i{background:var(--lime);border-radius:2px}.brand-mark i:nth-child(2){opacity:.64}.brand-mark i:nth-child(3){opacity:.82}.brand-mark i:nth-child(4){background:var(--orange)}.brand-wordmark{font-family:var(--display);font-size:16px;letter-spacing:.11em;font-weight:700}.brand-wordmark span{color:var(--lime)}.topbar-right{display:flex;gap:22px;align-items:center;color:var(--muted);font:10px var(--mono);letter-spacing:.06em}.local-badge{display:flex;align-items:center;gap:9px;color:#b8b9af}.local-badge span,.save-dot{width:6px;height:6px;display:inline-block;border-radius:50%;background:var(--lime)}.topbar-divider{height:19px;border-left:1px solid #373832}.save-status{display:flex;align-items:center;gap:8px}.save-dot{width:5px;height:5px;background:#797b72}.intro{display:flex;align-items:center;justify-content:space-between;padding:49px 0 40px}.eyebrow,.control-caption,.transport-label,.grid-corner,.page-footer{font-family:var(--mono);font-size:9px;letter-spacing:.13em}.eyebrow{display:flex;align-items:center;gap:10px;color:var(--lime);margin:0 0 14px}.eyebrow-line{width:19px;border-top:1px solid var(--lime)}h1{margin:0;font:600 clamp(38px,5vw,58px)/1.02 var(--display);letter-spacing:-.055em}h1 span{color:var(--lime)}.intro-copy{color:#a3a49c;margin:13px 0 0;font-size:14px;letter-spacing:.01em}.intro-stamp{width:73px;height:73px;display:flex;align-items:center;justify-content:center;position:relative;border:1px solid #47483e;border-radius:50%;color:#c7c8b9;font:8px/1.35 var(--mono);text-align:center;letter-spacing:.08em;transform:rotate(9deg)}.stamp-star{position:absolute;right:-5px;top:-6px;color:var(--orange);font-size:21px}.studio-card{overflow:hidden;border:1px solid #393a34;border-radius:9px;background:#181916;box-shadow:0 23px 75px #00000038}.transport{display:flex;justify-content:space-between;align-items:center;min-height:106px;padding:19px 25px;border-bottom:1px solid var(--line);background:linear-gradient(110deg,rgb(255 255 255 / 1.3%),transparent 37%),#1c1d19}.transport-main,.transport-controls,.transport-state,.tempo-heading,.tempo-slider-wrap,.pattern-name-wrap,.playhead-label{display:flex;align-items:center}.transport-main{gap:15px}.play-button{width:53px;height:53px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--lime);color:#161811;cursor:pointer;transition:transform .16s ease,background .16s ease}.play-button:hover{transform:scale(1.05);background:#dcf77d}.play-button.is-playing{background:#2c2e28;color:var(--orange);border:1px solid #55564d}.play-button:disabled{opacity:.7;cursor:wait}.loading-ring{width:16px;height:16px;border:2px solid rgb(22 24 17 / 25%);border-top-color:#161811;border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.play-triangle{width:0;height:0;margin-left:4px;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:11px solid currentColor}.stop-square{width:12px;height:12px;border-radius:2px;background:currentColor}.transport-state{flex-direction:column;align-items:flex-start;gap:6px}.transport-label{color:var(--lime)}.transport-hint{color:#8d8e85;font:11px var(--mono)}.transport-controls{gap:24px}.tempo-control,.bars-control{display:flex;flex-direction:column;align-items:stretch;gap:7px}.tempo-control{width:150px}.tempo-heading{justify-content:space-between}.control-caption{color:#818279;font-size:8px}.tempo-value{color:var(--paper);font:12px var(--mono)}.tempo-value span{color:#85867e;font-size:8px}.tempo-slider-wrap{height:20px}.tempo-slider-wrap input{width:100%;height:20px;margin:0;accent-color:var(--lime);cursor:pointer}.tempo-slider-wrap input:focus-visible{outline-offset:1px}.bars-control select,.sample-select{color:var(--paper);background:#171815;border:1px solid #41423b;border-radius:4px}.bars-control select{min-width:83px;height:31px;padding:0 8px;font:10px var(--mono)}.export-button{height:39px;display:flex;align-items:center;justify-content:center;gap:9px;padding:0 14px;border:1px solid #d1f05a;border-radius:4px;background:var(--lime);color:#191b13;font-size:11px;font-weight:700;cursor:pointer;transition:background .15s ease}.export-button:hover:not(:disabled){background:#e0f988}.export-button:disabled{opacity:.62;cursor:wait}.export-icon{font-size:18px;line-height:10px}.pattern-toolbar{display:flex;min-height:53px;justify-content:space-between;align-items:center;padding:0 23px;border-bottom:1px solid var(--line)}.pattern-name-wrap{gap:10px;min-width:0}.pattern-icon{color:var(--orange);font-size:18px}.pattern-name{width:min(210px,32vw);min-width:80px;padding:0;border:0;outline:0;background:transparent;color:#edede4;font:600 12px var(--display)}.pattern-name:focus-visible{outline:1px solid var(--lime);outline-offset:4px}.pattern-meta{padding-left:11px;border-left:1px solid #3d3e37;color:#83847b;font:8px var(--mono);letter-spacing:.08em}.playhead-label{gap:8px;color:#777970;font:8px var(--mono);letter-spacing:.09em}.playhead-dot{width:6px;height:6px;border-radius:50%;background:#50514a}.playhead-dot.active{background:var(--orange);box-shadow:0 0 9px #ff8053b3;animation:pulse 1s ease-in-out infinite alternate}@keyframes pulse{to{opacity:.48}}.sequencer-scroll{overflow:auto;max-height:min(63vh,650px);scrollbar-color:#52534a #1b1c18;scrollbar-width:thin}.sequencer-grid{display:grid;grid-template-columns:248px repeat(var(--step-count),minmax(0,1fr));width:100%;background:#171815}.track-sticky{position:sticky;left:0;z-index:3}.grid-corner{display:flex;justify-content:space-between;align-items:center;padding:0 14px;background:#1d1e1a;color:#8d8e84;border-bottom:1px solid #353630;font-size:8px;height:37px}.grid-corner span:last-child{color:#686a61;font-size:7px}.step-heading{position:relative;display:flex;align-items:center;justify-content:center;height:37px;border-bottom:1px solid #353630;color:#696b62;font:8px var(--mono)}.step-heading.beat-start{border-left:1px solid #363730}.step-heading.bar-start{border-left:2px solid #56574d;background:#21221e;color:var(--lime)}.step-heading.current-heading{color:var(--orange)}.bar-number{font-size:8px}.beat-number{opacity:.78}.subdivision{font-size:14px;opacity:.56}.track-panel{z-index:2;height:83px;padding:10px 12px 8px;border-bottom:1px solid #30312c;background:#1b1c18}.track-panel.last-track{border-bottom-color:#494a40}.track-title-row,.track-settings,.track-volume{display:flex;align-items:center}.track-title-row{gap:7px;height:19px}.track-index{width:19px;color:#73756c;font:8px var(--mono)}.track-name{width:100%;min-width:0;padding:0;border:0;outline:0;background:transparent;color:#eeeee5;font:600 10px var(--display)}.track-name:focus-visible{outline:1px solid var(--lime);outline-offset:2px}.icon-button{width:20px;height:20px;flex:0 0 auto;padding:0;border:1px solid transparent;border-radius:3px;background:transparent;color:#888a80;cursor:pointer;font:9px var(--mono)}.icon-button:hover{color:var(--lime);border-color:#4a4b41}.remove-button:hover{color:var(--orange)}.track-settings{gap:5px;margin:5px 0 3px 26px}.sample-select{width:100%;min-width:0;height:22px;padding:0 5px;font:8px var(--mono);text-overflow:ellipsis}.track-toggle{width:22px;height:21px;padding:0;border:1px solid #45463e;border-radius:3px;background:#20211d;color:#87887f;cursor:pointer;font:9px var(--mono)}.track-toggle:hover{border-color:#77796b;color:var(--paper)}.track-toggle.selected{border-color:var(--orange);background:#ff80531f;color:var(--orange)}.track-volume{gap:7px;margin-left:26px;height:12px}.volume-label,.volume-value{color:#74766d;font:7px var(--mono)}.volume-value{width:19px;text-align:right}.track-volume input{height:12px;min-width:0;flex:1;accent-color:var(--lime);cursor:pointer}.sample-error{margin:2px 0 0 26px;color:var(--orange);font:7px var(--mono)}.step-cell{display:grid;place-items:center;height:83px;padding:0;border:0;border-bottom:1px solid #30312c;border-left:1px solid #252621;background:#171815;cursor:pointer;transition:background .12s ease}.step-cell:hover{background:#24251f}.step-cell.beat-start{border-left-color:#363730}.step-cell.bar-start{border-left:2px solid #56574d}.step-light{width:15px;height:15px;border:1px solid #4b4c43;border-radius:4px;background:#22231f;transition:background .11s ease,box-shadow .11s ease,transform .11s ease}.step-cell:hover .step-light{border-color:#8a8d76}.step-cell.active .step-light{border-color:var(--lime);background:var(--lime);box-shadow:0 0 12px #d1f05a3b}.step-cell.beat-active .step-light{width:18px;height:18px;border-radius:5px}.step-cell.downbeat-active .step-light{border-color:var(--orange);background:var(--orange);box-shadow:0 0 13px #ff805357}.step-cell.current-step{position:relative;z-index:1;background:#2b2c25;box-shadow:inset 0 2px var(--orange),inset 0 -2px var(--orange)}.step-cell.current-step.active .step-light{box-shadow:0 0 15px #ff80538c}.sequencer-footer{display:flex;justify-content:space-between;align-items:center;min-height:52px;padding:0 21px;border-top:1px solid #383932;background:#1b1c18}.grid-legend{display:flex;align-items:center;gap:17px}.legend-item{display:flex;align-items:center;gap:7px;color:#909187;font:8px var(--mono)}.legend-pad{width:9px;height:9px;display:inline-block;border-radius:2px;background:var(--lime)}.legend-playhead{width:10px;height:9px;display:inline-block;border-top:2px solid var(--orange);border-bottom:2px solid var(--orange)}.legend-divider{height:10px;border-left:2px solid #77796b}.solo-note{color:var(--orange);font:8px var(--mono)}.add-track-button{display:flex;align-items:center;gap:6px;padding:7px 10px;border:1px solid #4a4b42;border-radius:4px;background:#20211d;color:#e2e2d8;font-size:10px;cursor:pointer}.add-track-button span{color:var(--lime);font-size:15px;line-height:10px}.add-track-button:hover{border-color:var(--lime)}.notice{display:flex;align-items:center;gap:9px;min-height:39px;padding:8px 15px;border-top:1px solid #434536;background:#25291b;color:#d9e7a9;font-size:10px}.notice-error{border-top-color:#624135;background:#2a201c;color:#ffab8b}.notice-mark{font-size:13px;color:var(--lime)}.notice-error .notice-mark{color:var(--orange)}.undo-button,.dismiss-notice{border:0;background:transparent;color:var(--lime);cursor:pointer;font-size:10px}.undo-button{text-decoration:underline;text-underline-offset:2px}.dismiss-notice{margin-left:auto;color:#a8a99f;font-size:17px}.page-footer{display:flex;justify-content:space-between;padding:25px 2px 34px;color:#73756c;font-size:8px}.page-footer b{margin-left:4px;color:var(--orange);font-size:11px}@media(max-width:820px){.app-shell{width:calc(100% - 36px)}.intro{padding:40px 0 30px}.transport{align-items:flex-start;flex-direction:column;gap:18px;padding:17px}.transport-controls{width:100%;justify-content:space-between;gap:10px}.export-button{margin-left:auto}.sequencer-grid{grid-template-columns:220px repeat(var(--step-count),minmax(0,1fr))}.grid-corner{padding:0 11px}.track-panel{padding-right:9px;padding-left:9px}.legend-item{gap:5px}.grid-legend{gap:11px}}@media(max-width:520px){body{min-width:360px}.app-shell{width:calc(100% - 24px)}.topbar{height:65px}.brand-wordmark{font-size:13px}.topbar-right{gap:10px;font-size:8px}.local-badge{gap:5px}.topbar-divider{height:14px}.intro{padding:33px 0 26px}h1{font-size:40px}.eyebrow{font-size:7px}.intro-copy{font-size:12px}.intro-stamp{width:59px;height:59px;font-size:7px}.transport{min-height:auto;gap:15px;padding:14px}.play-button{width:45px;height:45px}.transport-controls{gap:8px}.tempo-control{width:auto;min-width:88px;flex:1}.bars-control select{min-width:72px;padding:0 5px;font-size:9px}.export-button{gap:5px;padding:0 8px;font-size:9px}.pattern-toolbar{min-height:46px;padding:0 12px}.pattern-name{width:112px;font-size:10px}.pattern-meta{padding-left:7px;font-size:7px}.playhead-label{font-size:7px}.sequencer-grid{grid-template-columns:205px repeat(var(--step-count),minmax(0,1fr))}.sequencer-footer{align-items:flex-start;gap:8px;min-height:62px;padding:9px 11px}.grid-legend{display:grid;grid-template-columns:repeat(2,max-content);gap:7px 10px}.solo-note{grid-column:1 / -1}.add-track-button{margin-top:2px;white-space:nowrap}.page-footer{font-size:6px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}