@import "https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&family=Playfair+Display:ital,wght@1,600&display=swap";:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--ink:#f3efe5;--muted:#8f9290;--line:#ffffff1f;--panel:#171918;--panel-deep:#111312;--lime:#d8ff57;--page-bg:#0b0d0c;--beat-duration:.5s;background:var(--page-bg);color:var(--ink);font-synthesis:none;font-family:Manrope,sans-serif}*{box-sizing:border-box}html{background:var(--page-bg);min-width:320px;min-height:100%}body{background:radial-gradient(circle at 18% 36%, #d8ff570b, transparent 29rem), var(--page-bg);min-height:100vh;margin:0;transition:background-color .18s,color .18s}button,input{font:inherit}button{color:inherit}button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--lime);outline-offset:3px}.app-shell{width:min(1420px,100%);min-height:100vh;margin:0 auto;padding:0 44px}.topbar{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;height:88px;display:flex}.brand{color:var(--ink);letter-spacing:.22em;align-items:center;gap:12px;font-size:14px;font-weight:700;text-decoration:none;display:flex}.brand-mark{align-items:center;gap:3px;height:25px;display:flex}.brand-mark i{background:var(--lime);border-radius:9px;width:3px;display:block}.brand-mark i:first-child,.brand-mark i:nth-child(4){height:9px}.brand-mark i:nth-child(2){height:18px}.brand-mark i:nth-child(3){height:25px}.status-pill{border:1px solid var(--line);color:#a5a7a5;letter-spacing:.08em;text-transform:uppercase;border-radius:99px;align-items:center;gap:9px;padding:8px 13px;font:11px DM Mono,monospace;display:flex}.status-dot{background:#676a68;border-radius:50%;width:6px;height:6px}.status-pill.active{color:var(--lime);border-color:#d8ff5740}.status-pill.active .status-dot{background:var(--lime);box-shadow:0 0 10px var(--lime);animation:statusPulse var(--beat-duration) ease-out infinite}.hero{justify-content:space-between;align-items:center;padding:58px 0 46px;display:flex}.eyebrow{color:var(--lime);letter-spacing:.2em;text-transform:uppercase;margin-bottom:0;font:11px DM Mono,monospace}.theme-toggle{border:1px solid var(--line);background:var(--panel);min-width:88px;height:38px;color:var(--muted);cursor:pointer;letter-spacing:.08em;text-transform:uppercase;border-radius:99px;justify-content:center;align-items:center;gap:8px;padding:0 13px;font:10px DM Mono,monospace;transition:border-color .15s,color .15s,background-color .18s;display:flex}.theme-toggle:hover{border-color:var(--lime);color:var(--lime)}.theme-toggle svg{fill:none;stroke:currentColor;stroke-width:1.7px;stroke-linecap:round;stroke-linejoin:round;width:16px;height:16px}.eyebrow:before{content:"";vertical-align:middle;background:var(--lime);width:28px;height:1px;margin-right:12px;display:inline-block}.hero h1{letter-spacing:-.055em;margin:0;font-size:clamp(40px,5vw,70px);line-height:.98}.hero h1 em{color:var(--lime);font-family:Playfair Display,serif;font-weight:600}.hero p{color:#858886;margin:18px 0 0;font-size:15px}.workspace{border:1px solid var(--line);background:var(--panel);border-radius:3px;grid-template-columns:minmax(0,1.06fr) minmax(430px,.94fr);min-height:660px;display:grid;overflow:hidden;box-shadow:0 28px 80px #00000045}.visual-panel{border-right:1px solid var(--line);background:linear-gradient(#ffffff06 1px, transparent 1px), linear-gradient(90deg, #ffffff06 1px, transparent 1px), radial-gradient(circle at 50% 45%, #d8ff5714, transparent 38%), var(--panel-deep);background-size:46px 46px,46px 46px,auto,auto;flex-direction:column;justify-content:space-between;min-height:660px;padding:32px 38px 42px;display:flex;position:relative;overflow:hidden}.visual-panel:after{content:"";pointer-events:none;background:linear-gradient(90deg,#0b0d0c40,#0000 22% 78%,#0b0d0c40);position:absolute;inset:0}.meter-heading,.section-label-row,.range-labels{justify-content:space-between;align-items:center;display:flex}.meter-heading{z-index:1;color:#797d7a;letter-spacing:.15em;text-transform:uppercase;font:10px DM Mono,monospace;position:relative}.pendulum-stage{z-index:1;place-items:center;width:330px;height:330px;margin:auto;display:grid;position:relative}.pendulum-stage:before,.pendulum-stage:after{content:"";border:1px solid #ffffff12;border-radius:50%;position:absolute}.pendulum-stage:before{inset:14px}.pendulum-stage:after{inset:62px}.halo{background:#d8ff570b;border-radius:50%;position:absolute;inset:86px}.playing .halo{animation:haloPulse var(--beat-duration) ease-out}.pendulum{transform-origin:2px 10px;width:4px;height:144px;transition:transform var(--beat-duration) cubic-bezier(.45, 0, .55, 1);z-index:2;position:absolute;top:24px;left:calc(50% - 2px)}.pendulum.left{transform:rotate(-28deg)}.pendulum.right{transform:rotate(28deg)}.pendulum-line{background:linear-gradient(to bottom, var(--lime), #d8ff5759);width:2px;height:127px;margin-left:1px;display:block;box-shadow:0 0 9px #d8ff5759}.pendulum-weight{border:3px solid var(--panel-deep);background:var(--lime);border-radius:50%;width:16px;height:16px;position:absolute;bottom:2px;left:-6px;box-shadow:0 0 0 1px #d8ff5766,0 0 16px #d8ff5766}.beat-number{color:var(--ink);letter-spacing:-.08em;margin-top:78px;font:500 86px/1 DM Mono,monospace}.playing .beat-number{animation:.15s ease-out numberPulse}.beat-label{color:#747875;letter-spacing:.26em;font:9px DM Mono,monospace;position:absolute;top:224px}.beat-track{z-index:1;padding:0 16px;position:relative}.track-line{background:#ffffff1f;height:1px;position:absolute;top:17px;left:38px;right:38px}.track-line span{background:#d8ff5799;height:1px;transition:width .14s;display:block}.beat-dots{justify-content:space-between;align-items:center;display:flex;position:relative}.beat-dot{background:var(--panel-deep);color:#777b78;cursor:pointer;border:1px solid #3b3e3c;border-radius:50%;width:35px;height:35px;padding:0;font:10px DM Mono,monospace;transition:all .15s}.beat-dot:hover{color:var(--ink);border-color:#6e736e}.beat-dot.accented{border-color:#d8ff5773}.beat-dot.current{border-color:var(--lime);background:var(--lime);color:#11130f;transform:scale(1.13);box-shadow:0 0 0 6px #d8ff5714,0 0 24px #d8ff5738}.controls-panel{background:#181a19;flex-direction:column;display:flex}.control-section{border-bottom:1px solid var(--line);padding:31px 38px}.tempo-section{padding-top:34px;padding-bottom:27px}.compact-section{padding-top:23px;padding-bottom:23px}.configuration-heading{border-bottom:1px solid var(--line);color:#8a8e89;letter-spacing:.12em;text-transform:uppercase;background:#141615;justify-content:space-between;align-items:center;min-height:42px;padding:0 38px;font:9px DM Mono,monospace;display:flex}.configuration-heading small{color:#5f635f;letter-spacing:.08em;font-size:8px}.section-label-row{margin-bottom:20px}.section-label-row label{color:#c3c5c1;letter-spacing:.13em;text-transform:uppercase;font-size:11px;font-weight:700}.section-label-row>span{color:#707471;letter-spacing:.08em;text-transform:uppercase;font:9px DM Mono,monospace}.tempo-control{grid-template-columns:42px 1fr 42px;align-items:center;gap:14px;display:grid}.tempo-control>button{color:#a7aaa6;cursor:pointer;background:#1d201e;border:1px solid #363936;border-radius:2px;width:42px;height:42px;font:22px DM Mono,monospace;transition:all .15s}.tempo-control>button:hover{color:var(--lime);border-color:#737873}.bpm-readout{justify-content:center;align-items:baseline;gap:10px;display:flex}.bpm-readout input{width:120px;color:var(--ink);text-align:right;letter-spacing:-.07em;background:0 0;border:0;outline:0;padding:0;font:500 52px/1 DM Mono,monospace}.bpm-readout span{color:#797d79;letter-spacing:.12em;font:10px DM Mono,monospace}.tempo-slider{--range:40%;appearance:none;background:linear-gradient(to right, var(--lime) 0 var(--range), #3b3e3c var(--range) 100%);cursor:pointer;border-radius:99px;width:100%;height:3px;margin:26px 0 0}.tempo-slider::-webkit-slider-thumb{appearance:none;background:var(--lime);width:14px;height:14px;box-shadow:0 0 0 1px var(--lime);border:3px solid #1a1c1b;border-radius:50%}.volume-control input::-webkit-slider-thumb{appearance:none;background:var(--lime);width:14px;height:14px;box-shadow:0 0 0 1px var(--lime);border:3px solid #1a1c1b;border-radius:50%}.tempo-slider::-moz-range-thumb{background:var(--lime);border:3px solid #1a1c1b;border-radius:50%;width:9px;height:9px}.volume-control input::-moz-range-thumb{background:var(--lime);border:3px solid #1a1c1b;border-radius:50%;width:9px;height:9px}.range-labels{color:#626663;margin-top:7px;font:8px DM Mono,monospace}.tap-button{text-align:left;cursor:pointer;background:#1d201e;border:1px solid #353835;border-radius:2px;align-items:center;gap:10px;width:calc(100% - 107px);min-height:44px;margin-top:20px;padding:7px 11px;transition:all .15s;display:flex}.tap-button:hover{background:#20231f;border-color:#d8ff576b}.tap-icon{width:28px;height:28px;color:var(--lime);background:#d8ff5717;border-radius:50%;place-items:center;display:grid}.tap-icon svg,.volume-control svg{fill:none;stroke:currentColor;stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round;width:19px}.tap-button>span:nth-child(2){flex-direction:column;flex:1;gap:3px;display:flex}.tap-button strong{color:#d3d4d1;letter-spacing:.04em;text-transform:uppercase;font-size:10px;font-weight:600}.tap-button small{color:#6f736f;font-size:9px}kbd{color:#696d69;background:#141615;border:1px solid #393d39;border-radius:3px;padding:4px 7px;font:8px DM Mono,monospace;box-shadow:0 1px #343733}.segmented{border:1px solid #353835;border-radius:2px;grid-template-columns:repeat(7,1fr);display:grid;overflow:hidden}.segmented button{color:#777b77;cursor:pointer;background:#1c1f1d;border:0;border-right:1px solid #353835;height:36px;font:11px DM Mono,monospace}.segmented button:last-child{border-right:0}.segmented button:hover{color:var(--ink)}.segmented button.selected{background:var(--lime);color:#11130f;font-weight:600}.subdivision-grid{grid-template-columns:repeat(6,1fr);gap:7px;display:grid}.subdivision-grid button{color:#707470;cursor:pointer;letter-spacing:.04em;text-transform:uppercase;background:#1c1f1d;border:1px solid #353835;border-radius:2px;flex-direction:column;justify-content:center;align-items:center;gap:3px;min-height:53px;padding:7px 4px;font-size:8px;transition:all .15s;display:flex}.subdivision-grid button:hover{color:#b7bab6;border-color:#6d716d}.subdivision-grid button.selected{color:var(--lime);background:#d8ff5712;border-color:#d8ff5785}.note-icon{text-transform:none;font:20px/1 serif}.subdivision-pips{justify-content:center;gap:7px;height:4px;margin-top:12px;display:flex}.subdivision-pips span{background:#454845;border-radius:50%;width:4px;height:4px}.subdivision-pips span.active{background:var(--lime);box-shadow:0 0 7px var(--lime)}.accent-section{flex:1}.accent-grid{grid-template-columns:repeat(8,1fr);gap:7px;display:grid}.accent-grid button{color:#696d69;cursor:pointer;background:#1c1f1d;border:1px solid #353835;border-radius:2px;justify-content:center;align-items:center;gap:5px;height:37px;font:9px DM Mono,monospace;display:flex}.accent-grid button i{background:#424642;border-radius:50%;width:4px;height:4px}.accent-grid button.selected{color:var(--lime);border-color:#d8ff5773}.accent-grid button.selected i{background:var(--lime);box-shadow:0 0 5px var(--lime)}.play-row{background:0 0;align-items:center;gap:17px;min-height:60px;margin-top:20px;padding:0;display:flex}.transport-row+.tap-button{margin-top:10px}.play-button{background:var(--lime);color:#11130f;cursor:pointer;letter-spacing:.09em;text-transform:uppercase;border:0;border-radius:2px;flex:1;align-items:center;gap:12px;min-height:60px;padding:0 17px;font-size:12px;font-weight:700;transition:all .15s;display:flex}.play-button:hover{background:#e2ff7d;transform:translateY(-1px);box-shadow:0 8px 25px #d8ff571c}.play-button svg{fill:currentColor;width:21px}.play-button span{text-align:left;flex:1}.play-button kbd{color:#00000085;box-shadow:none;background:#00000014;border-color:#0000002e}.volume-control{color:#747874;align-items:center;gap:8px;width:90px;display:flex}.volume-control svg{flex:0 0 21px}.volume-control input{appearance:none;cursor:pointer;background:#424642;width:60px;height:2px}.volume-control input::-webkit-slider-thumb{border-width:2px;width:10px;height:10px}footer{color:#5e625f;letter-spacing:.08em;text-transform:uppercase;justify-content:space-between;align-items:center;min-height:74px;font:9px DM Mono,monospace;display:flex}.footer-note{letter-spacing:.04em;text-transform:none;font:italic 12px Playfair Display,serif}html[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--ink:#20231e;--muted:#696e65;--line:#1d261826;--panel:#fbfaf5;--panel-deep:#f2f1ea;--lime:#638300;--page-bg:#ebeae3}html[data-theme=light] body{background:radial-gradient(circle at 18% 36%, #63830014, transparent 29rem), var(--page-bg)}html[data-theme=light] .workspace{box-shadow:0 28px 70px #2d30261f}html[data-theme=light] .visual-panel{background:linear-gradient(#1e26190b 1px, transparent 1px), linear-gradient(90deg, #1e26190b 1px, transparent 1px), radial-gradient(circle at 50% 45%, #63830017, transparent 38%), var(--panel-deep);background-size:46px 46px,46px 46px,auto,auto}html[data-theme=light] .visual-panel:after{background:linear-gradient(90deg,#ebeae359,#0000 22% 78%,#ebeae359)}html[data-theme=light] .pendulum-stage:before,html[data-theme=light] .pendulum-stage:after{border-color:#1d26181a}html[data-theme=light] .pendulum-weight{border-color:var(--panel-deep)}html[data-theme=light] .track-line{background:#1d261826}html[data-theme=light] .meter-heading,html[data-theme=light] .beat-label,html[data-theme=light] .section-label-row>span,html[data-theme=light] .range-labels,html[data-theme=light] .bpm-readout span,html[data-theme=light] .volume-control,html[data-theme=light] footer{color:#73786e}html[data-theme=light] .controls-panel{background:var(--panel)}html[data-theme=light] .section-label-row label,html[data-theme=light] .tap-button strong{color:#383d35}html[data-theme=light] .beat-dot,html[data-theme=light] .tempo-control>button,html[data-theme=light] .tap-button,html[data-theme=light] .segmented button,html[data-theme=light] .subdivision-grid button,html[data-theme=light] .accent-grid button{color:#686d64;background:#f6f5ef;border-color:#d0d3c9}html[data-theme=light] .tempo-control>button:hover,html[data-theme=light] .tap-button:hover,html[data-theme=light] .subdivision-grid button:hover{border-color:var(--lime);color:var(--lime);background:#efeee6}html[data-theme=light] .tempo-slider{background:linear-gradient(to right, var(--lime) 0 var(--range), #c8ccc1 var(--range) 100%)}html[data-theme=light] .tempo-slider::-webkit-slider-thumb{border-color:var(--panel)}html[data-theme=light] .volume-control input::-webkit-slider-thumb{border-color:var(--panel)}html[data-theme=light] .tempo-slider::-moz-range-thumb{border-color:var(--panel)}html[data-theme=light] .volume-control input::-moz-range-thumb{border-color:var(--panel)}html[data-theme=light] .tap-icon,html[data-theme=light] .subdivision-grid button.selected{background:#6383001a}html[data-theme=light] .segmented button.selected,html[data-theme=light] .beat-dot.current,html[data-theme=light] .play-button{border-color:var(--lime);background:var(--lime);color:#fff}html[data-theme=light] .subdivision-grid button.selected,html[data-theme=light] .accent-grid button.selected,html[data-theme=light] .beat-dot.accented{color:var(--lime);border-color:#63830085}html[data-theme=light] .subdivision-pips span,html[data-theme=light] .accent-grid button i,html[data-theme=light] .volume-control input{background:#b9beb3}html[data-theme=light] .accent-grid button.selected i,html[data-theme=light] .subdivision-pips span.active{background:var(--lime)}html[data-theme=light] kbd{color:#6e736a;background:#e8e7df;border-color:#cdd0c6;box-shadow:0 1px #c8cbc1}html[data-theme=light] .play-row{background:0 0}html[data-theme=light] .configuration-heading{color:#555b50;background:#e4e3dc}html[data-theme=light] .configuration-heading small{color:#7c8178}html[data-theme=light] .play-button:hover{background:#789b0d}html[data-theme=light] .play-button kbd{color:#ffffffd1;background:#ffffff26;border-color:#ffffff59}@keyframes haloPulse{0%{opacity:1;transform:scale(.82);box-shadow:0 0 #d8ff5714}to{opacity:0;transform:scale(1.5);box-shadow:0 0 0 24px #d8ff5700}}@keyframes numberPulse{0%{color:var(--lime);transform:scale(.9)}to{color:var(--ink);transform:scale(1)}}@keyframes statusPulse{0%{opacity:1}to{opacity:.4}}@media (width<=980px){.app-shell{padding:0 24px}.workspace{grid-template-columns:1fr}.visual-panel{border-right:0;border-bottom:1px solid var(--line);min-height:560px}.controls-panel{min-height:auto}}@media (width<=600px){.app-shell{padding:0 14px}.topbar{height:70px}.hero{padding:38px 4px 32px}.hero p{max-width:300px;line-height:1.6}.workspace{border-left:0;border-right:0;margin:0 -14px}.visual-panel{min-height:475px;padding:24px 20px 32px}.pendulum-stage{width:280px;height:280px}.beat-number{font-size:70px}.beat-label{top:196px}.beat-track{padding:0}.beat-dot{width:30px;height:30px}.track-line{top:14px;left:20px;right:20px}.control-section{padding-left:20px;padding-right:20px}.configuration-heading{padding:0 20px}.subdivision-grid{grid-template-columns:repeat(3,1fr)}.play-row{gap:12px}.tap-button{width:calc(100% - 80px)}.volume-control{width:68px}.volume-control input{width:40px}footer{justify-content:center;min-height:64px}footer span:first-child,.footer-note{display:none}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}