:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#050505;--card-bg:linear-gradient(145deg, #0e0e12f2 0%, #09090be6 50%, #050505d9 100%);--border:#ffffff14;--border-hover:#ffffff29;--text-main:#f1f5f9;--text-muted:#94a3b8;--violet:#8a2be299;--cyan:#0ff6;--glow-hover:#8a2be233;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--heading:system-ui, "Segoe UI", Roboto, sans-serif}body{background-color:var(--bg);min-width:320px;color:var(--text-main);font-family:var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(#0e0e12 0%,#050505 100%);min-height:100svh;margin:0;overflow-x:hidden}body:before{content:"";opacity:.03;pointer-events:none;z-index:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");position:fixed;inset:0}#root{z-index:1;min-height:100svh;position:relative}h1,h2,h3{font-family:var(--heading);color:var(--text-main);font-weight:500}h1{letter-spacing:-.02em;margin:0 0 16px;font-size:clamp(2rem,5vw,4rem)}p{color:var(--text-muted);margin:0;line-height:1.6}.bento-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;width:100%;max-width:1100px;margin:0 auto;padding:32px 0;display:grid}.bento-card{background:var(--card-bg);border:1px solid var(--border);-webkit-backdrop-filter:blur(12px);cursor:pointer;border-radius:16px;flex-direction:column;gap:12px;padding:32px;text-decoration:none;transition:all .3s;display:flex;position:relative;overflow:hidden}.bento-card:hover{border-color:var(--border-hover);box-shadow:0 8px 30px #00000080, 0 0 30px var(--glow-hover);background:linear-gradient(145deg,#101014fa 0%,#0a0a0ceb 52%,#060607e0 100%);transform:translateY(-2px)}.bento-card h2{margin:0;font-size:1.25rem}.glass-panel{border:1px solid var(--border);-webkit-backdrop-filter:blur(16px);background:linear-gradient(145deg,#101014f2 0%,#0a0a0ce6 50%,#060607d9 100%);border-radius:24px;position:relative;overflow:hidden;box-shadow:0 18px 40px #0006}.glass-panel:before{content:"";opacity:.04;mix-blend-mode:overlay;pointer-events:none;z-index:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");position:absolute;inset:0}.glass-panel>*{z-index:1;position:relative}*{scrollbar-width:thin;scrollbar-color:#94a3b84d #ffffff08}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#ffffff08;border-radius:8px}::-webkit-scrollbar-thumb{background:#94a3b84d;border-radius:8px}::-webkit-scrollbar-thumb:hover{background:#22d3ee66}select option{color:#f8fafc;background-color:#0f1117}:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*,:before,:after{box-sizing:border-box}.app-root{background:0 0;justify-content:center;align-items:stretch;width:100%;min-height:auto;padding:0;display:flex}.app-card{background:linear-gradient(145deg,#0e0e12f2 0%,#09090be6 50%,#050505d9 100%);border-radius:28px;flex-direction:column;gap:24px;width:min(100%,1100px);margin:0 auto;padding:clamp(20px,3vw,28px);display:flex;box-shadow:0 24px 60px #00000073,0 0 0 1px #ffffff14}.app-header h1{letter-spacing:.04em;margin:0;font-size:1.9rem}.subtext{color:#9ca3af;margin:4px 0 0;font-size:.9rem}.bpm-section,.bar-section{flex-direction:column;gap:10px;width:100%;display:flex}.bpm-label-row{justify-content:space-between;align-items:baseline;display:flex}.label{text-transform:uppercase;letter-spacing:.14em;color:#9ca3af;font-size:.75rem}.bpm-display{font-size:1.6rem;font-weight:600}.bpm-unit{color:#9ca3af;margin-left:4px;font-size:.8rem}.bpm-controls{align-items:center;gap:10px;display:flex}.round-btn{color:#e5e7eb;cursor:pointer;background:#09090beb;border:1px solid #ffffff1f;border-radius:999px;width:56px;height:40px;font-size:.95rem;transition:background .15s,border-color .15s,transform 80ms}.round-btn:hover{background:#ffffff0d;border-color:#38bdf8}.round-btn:active{transform:scale(.97)}.bpm-input{color:#e5e7eb;text-align:center;background:#09090beb;border:1px solid #ffffff1f;border-radius:999px;flex:1;padding:8px 14px;font-size:1rem}.bpm-input:focus{border-color:#38bdf8;outline:none}.bpm-slider{appearance:none;background:#ffffff14;border-radius:999px;outline:none;width:100%;height:4px}.bpm-slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#38bdf8;border-radius:50%;width:18px;height:18px;transition:transform 80ms,box-shadow .1s;box-shadow:0 0 0 3px #38bdf840}.bpm-slider::-webkit-slider-thumb:hover{transform:scale(1.07);box-shadow:0 0 0 5px #38bdf866}.bpm-slider::-moz-range-thumb{cursor:pointer;background:#38bdf8;border:none;border-radius:50%;width:18px;height:18px;box-shadow:0 0 0 3px #38bdf840}.bar-header{justify-content:space-between;align-items:center;gap:10px;display:flex}.beats-select{color:#e5e7eb;background:#09090bf5;border:1px solid #ffffff1f;border-radius:999px;padding:8px 12px;font-size:.9rem}.beats-select:focus{border-color:#38bdf8;outline:none}.radial-beat-wrapper{justify-content:center;align-items:center;margin-top:8px;margin-bottom:4px;display:flex}.radial-beat-container{width:260px;height:260px}.radial-beat-svg{width:min(260px,70vw);height:auto}.radial-beat-outer{fill:#09090be0;stroke:#ffffff1f;stroke-width:1px}.radial-beat-center{fill:#050505;stroke:#ffffff14;stroke-width:1px}.radial-beat-slice{cursor:pointer;transition:fill .12s,stroke .12s,fill-opacity .12s}.radial-beat-slice:hover{fill-opacity:1}.sub-dot{fill:#94a3b873}.sub-dot-active{fill:#38bdf8}.radial-pointer{stroke:#f8fafce6;stroke-width:2px;stroke-linecap:round}.samples-row{flex-wrap:wrap;gap:14px;display:flex}.sample-column{flex-direction:column;flex:1 1 0;gap:6px;min-width:180px;display:flex}.sample-label{text-transform:uppercase;letter-spacing:.12em;color:#9ca3af;font-size:.78rem}.transport-section{justify-content:center;margin-top:8px;display:flex}.play-btn{cursor:pointer;color:#0b1120;background:linear-gradient(135deg,#22c55e,#4ade80);border:none;border-radius:999px;min-width:190px;padding:12px 32px;font-size:1.05rem;font-weight:600}.play-btn.play{color:#022c22;background:linear-gradient(135deg,#22c55e,#4ade80)}.play-btn.stop{color:#111827;background:linear-gradient(135deg,#f97373,#f97316)}.footer{color:#6b7280;justify-content:space-between;align-items:center;margin-top:8px;font-size:.8rem;display:flex}.reset-btn{color:#e5e7eb;cursor:pointer;background:0 0;border:1px solid #94a3b880;border-radius:999px;padding:6px 16px;font-size:.8rem}.reset-btn:hover{color:#fecaca;border-color:#f97373}.view-toggle-row{justify-content:space-between;align-items:center;gap:8px;margin-top:12px;display:flex}.view-toggle-buttons{gap:6px;display:flex}.toggle-chip{color:#e5e7eb;cursor:pointer;background:0 0;border:1px solid #94a3b859;border-radius:999px;padding:4px 10px;font-size:.75rem;transition:background .16s,border-color .16s,color .16s,transform .12s}.toggle-chip:hover{background:#ffffff0d;border-color:#94a3b8b3}.toggle-chip.active{color:#bfdbfe;background:#3b82f629;border-color:#60a5faf2}.subdiv-section{margin-top:10px}.subdiv-helper{color:#9ca3af;opacity:.9;font-size:.7rem}.subdiv-table{background:#09090beb;border:1px solid #ffffff14;border-radius:16px;flex-direction:column;gap:2px;margin-top:6px;padding:6px 10px;display:flex}.subdiv-row{color:#e5e7eb;justify-content:space-between;align-items:baseline;padding:3px 2px;font-size:.78rem;display:flex}.subdiv-name{flex-direction:column;gap:1px;display:flex}.subdiv-short{text-transform:uppercase;letter-spacing:.08em;color:#9ca3af;font-size:.7rem}.subdiv-label{color:#9ca3af;font-size:.76rem}.subdiv-bpm{color:#f9fafb;font-size:.8rem;font-weight:600}@media (height<=900px){.app-card{gap:16px;padding:18px 20px}.app-header h1{font-size:1.7rem}.app-header .subtext{font-size:.8rem}.bpm-section,.bar-section,.transport-section{margin-top:6px;margin-bottom:6px}.radial-beat-wrapper{margin-top:8px}.radial-beat-svg{width:210px}.play-btn{padding:10px 32px}}@media (height<=780px){.app-card{gap:12px;padding:14px 16px}.radial-beat-svg{width:185px}.app-header h1{font-size:1.5rem}.app-header .subtext{font-size:.75rem}}@media (width<=768px){.app-card{border-radius:20px;width:100%}.bar-header,.view-toggle-row,.footer{flex-direction:column;align-items:flex-start}}