.metro-page{color:#333042;background:radial-gradient(at 18% 15%,#f0eafb66,#0000 50%),#f7f6fa;min-height:100dvh}.metro-topbar{border-bottom:1px solid #e9e5ef;justify-content:space-between;align-items:center;max-width:1240px;height:86px;margin:auto;padding:0 40px;display:flex}.metro-brand{align-items:center;gap:11px;display:flex}.metro-brand>span{color:#fff;background:#7657c7;border-radius:13px;place-items:center;width:42px;height:42px;display:grid;box-shadow:0 4px 12px #7657c71a}.metro-brand>b{font-size:23px;font-weight:650;line-height:1.15}.metro-brand small{letter-spacing:3px;color:#a398b4;margin-top:5px;font-size:8px;display:block}.metro-back{color:#7d708f;align-items:center;gap:8px;min-height:44px;font-size:13px;display:flex}.metro-back:hover{color:#704fc0}.metro-workspace{max-width:1140px;margin:auto;padding:40px 40px 20px}.metro-heading{text-align:center;margin-bottom:32px}.metro-eyebrow{letter-spacing:2.7px;color:#a89ab6;font-size:9px}.metro-heading h1{letter-spacing:2px;margin:13px 0 9px;font-size:31px;font-weight:600}.metro-heading p{color:#9b91a7;font-size:13px}.metro-grid{grid-template-columns:minmax(0,1.13fr) minmax(0,1fr);align-items:start;gap:25px;display:grid}.metro-player,.metro-settings-card{background:#ffffffed;border:1px solid #e9e3f0;border-radius:22px;box-shadow:0 8px 32px #51426404}.metro-player{padding:23px 32px 20px;overflow:hidden}.metro-card-top{color:#8c7d9d;justify-content:space-between;gap:12px;font-size:12px;display:flex}.metro-card-top>span:first-child{align-items:center;gap:7px;display:flex}.metro-state{background:#f6f4f9;border-radius:20px;align-items:center;gap:6px;padding:4px 9px;font-size:10px;display:flex}.metro-state i{background:#b8adc6;border-radius:50%;width:5px;height:5px}.metro-state.is-running{color:#7a58bf;background:#f1eafa}.metro-state.is-running i{background:#8a67ca}.metro-pulse{--metro-glow:0;place-items:center;width:188px;height:188px;margin:22px auto 13px;display:grid;position:relative}.metro-pulse-ring{width:100%;height:100%;transform:scale(calc(1 + var(--metro-glow)*.045));background:#faf7fe;border:1px solid #e9e1f5;border-radius:50%;position:absolute;box-shadow:0 0 0 10px #fcfaff}.metro-pulse-ring:after{content:"";opacity:calc(.3 + var(--metro-glow)*.7);border:1px solid #e5d9f4;border-radius:50%;position:absolute;inset:10px}.metro-pulse-center{color:#7755b8;width:136px;height:136px;box-shadow:0 0 0 calc(var(--metro-glow)*13px) #e9def729;background:#eee5fb;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;display:flex;position:relative}.metro-pulse-center b{font-variant-numeric:tabular-nums;font-size:56px;font-weight:450;line-height:1.15}.metro-pulse-center small{color:#a38bba;margin-top:7px;font-size:10px}.metro-pulse[data-running=true] .metro-pulse-center{background:color-mix(in srgb,#e9def9 calc(var(--metro-glow)*100%),#f0e9f9)}.metro-tempo-control{justify-content:center;align-items:center;gap:31px;display:flex}.metro-adjust{color:#9277ba;background:#fcfaff;border-color:#e9e1f1;border-radius:50%;width:44px;min-width:44px;min-height:44px;padding:0}.metro-adjust:hover{background:#eee5f8}.metro-bpm{flex-direction:column;align-items:center;min-width:130px;display:flex}.metro-bpm input{-webkit-appearance:none;appearance:none;text-align:center;letter-spacing:-4px;color:#473456;font-variant-numeric:tabular-nums;background:0 0;border:0;border-radius:8px;width:150px;padding:0;font-size:74px;font-weight:520;line-height:1.2;display:block}.metro-bpm>span{letter-spacing:.7px;color:#a59aad;margin-top:1px;font-size:10px}.metro-tempo-name{text-align:center;color:#a597b0;margin:16px 0 19px;font-size:12px}.metro-speed-range{padding:0 7px}.metro-page input[type=range]{accent-color:#8a67ce;cursor:pointer;touch-action:pan-y;width:100%;height:24px;display:block}.metro-speed-range>div{color:#b6aabd;justify-content:space-between;margin-top:2px;font-size:10px;display:flex}.metro-transport{gap:12px;margin-top:27px;display:flex}.metro-start{color:#fff;background:#8060c6;border-color:#8060c6;border-radius:13px;flex:1;gap:11px;min-height:57px;font-size:16px;box-shadow:0 5px 12px #7d5cbe19}.metro-start:hover{background:#6e4bb8}.metro-start.is-running{background:#7050b3}.metro-tap{color:#8c74a8;background:#fbf8fd;border-color:#e8dfef;border-radius:13px;flex:1;gap:10px;min-height:57px;padding:8px;font-size:13px}.metro-tap>span{text-align:left;flex-direction:column;gap:2px;display:flex}.metro-tap small{color:#afa1bd;white-space:nowrap;font-size:9px}.metro-tap:active{background:#eee3fc;transform:scale(.98)}.metro-keyboard-hint{text-align:center;color:#b5aabd;margin-top:16px;font-size:10px}.metro-keyboard-hint span{padding:0 8px}.metro-notice{text-align:center;color:#a69aaf;border-top:1px solid #f0ebf5;min-height:34px;margin-top:18px;padding-top:16px;font-size:10px;line-height:1.8}.metro-settings{flex-direction:column;gap:18px;min-width:0;display:flex}.metro-settings-card{padding:24px 25px}.metro-section-title{align-items:center;gap:9px;display:flex}.metro-section-title>span{color:#a994c0;letter-spacing:1px;border:1px solid #eee6f5;border-radius:7px;place-items:center;width:25px;height:25px;font-size:10px;display:grid}.metro-section-title h2{color:#63506f;margin:0;font-size:15px;font-weight:600}.metro-meter-line{justify-content:space-between;align-items:center;margin:22px 0 13px;display:flex}.metro-meter-line label{color:#84738f;font-size:13px}.metro-meter-line label small{color:#b0a4b8;margin-top:4px;font-size:10px;display:block}.metro-meter-input{color:#9d88b5;background:#f8f5fc;border:1px solid #e9dfef;border-radius:10px;align-items:center;gap:9px;padding:0 12px 0 4px;display:flex}.metro-meter-input select{color:#74539a;background:0 0;border:0;min-width:57px;min-height:44px;padding:3px 6px;font-size:22px}.metro-meter-input>span{font-size:19px}.metro-presets{gap:8px;display:flex}.metro-presets button{color:#a89ab5;background:#fdfcfe;border-color:#eee7f4;border-radius:8px;flex:1;min-width:0;min-height:36px;padding:3px 8px;font-size:12px}.metro-presets button.selected{color:#815abb;background:#f5edfc;border-color:#d8c7ed}.metro-subdivision-label{color:#84738f;justify-content:space-between;align-items:center;margin:22px 0 12px;font-size:13px;display:flex}.metro-subdivision-label small{color:#b0a4b8;font-size:10px}.metro-subdivisions{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;display:grid}.metro-subdivisions button{color:#ab9cb9;background:#fdfcfe;border-color:#eee7f4;border-radius:10px;flex-direction:column;gap:9px;min-width:0;height:63px;padding:7px 3px;display:flex}.metro-subdivisions button>span{align-items:flex-end;gap:3px;height:13px;display:flex}.metro-subdivisions i{background:#c6b7d5;border-radius:3px;width:4px;height:12px;display:block}.metro-subdivisions i:not(:first-child){height:8px}.metro-subdivisions b{font-size:10px;font-weight:450}.metro-subdivisions button.selected{color:#8860b9;background:#f4ecfb;border-color:#d4bdea}.metro-subdivisions button.selected i{background:#a77dce}.metro-setting-description{color:#b0a4b8;margin-top:11px;font-size:10px}.metro-beat-buttons{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px 5px;margin:22px 0 15px;display:grid}.metro-beat{color:#a898b5;background:0 0;border:0;border-radius:12px;flex-direction:column;gap:7px;min-width:0;padding:0;display:flex}.metro-beat:hover{background:#faf5ff}.metro-beat>span{font-variant-numeric:tabular-nums;background:#faf6fd;border:1px solid #e7ddef;border-radius:50%;justify-content:center;align-items:center;width:43px;height:43px;font-size:15px;display:flex;position:relative}.metro-beat>span i{text-align:center;font-size:6px;font-style:normal;position:absolute;bottom:1px;left:0;right:0}.metro-beat small{font-size:9px}.metro-beat.accent>span{color:#fff;background:#a483cc;border-color:#a483cc}.metro-beat.accent small{color:#a282bd}.metro-beat.mute>span{color:#bcb4c3;background:#faf9fb;border-style:dashed}.metro-beat.mute>span i{font-size:9px;bottom:-2px}.metro-beat.current>span{color:#7a4eb5;background:#e7d9f6;border-color:#9870ca;box-shadow:0 0 0 4px #e8dcf7}.metro-beat.current.accent>span{color:#fff;background:#875dc0}.metro-beat.current.mute>span{background:#f6effe}.metro-beat-readout{color:#a28cb6;background:#faf7fc;border-radius:8px;padding:10px 12px;font-size:10px;line-height:1.8}.metro-beat-readout>span{color:#b9a9c6;font-size:9px;display:block}.metro-volume{border-top:1px solid #f0eaf4;margin-top:20px;padding-top:17px}.metro-volume>label{color:#96839f;align-items:center;gap:6px;margin-bottom:5px;font-size:12px;display:flex}.metro-volume>label>span{color:#b6a8bf;margin-left:auto;font-size:11px}.metro-small-note{text-align:center;color:#b2a7bc;font-size:10px;line-height:1.7}.metro-footer{color:#b8afc1;justify-content:space-between;gap:15px;padding-top:30px;font-size:10px;display:flex}.metro-footer a{color:#a28ab9;align-items:center;gap:5px;display:flex}.metro-footer a svg{transform:rotate(180deg)}@media (min-width:1000px){.metro-player{min-height:667px}.metro-pulse{margin-top:27px;margin-bottom:18px}.metro-transport{margin-top:30px}.metro-beat-buttons{grid-template-columns:repeat(6,minmax(0,1fr))}}@media (max-width:900px){.metro-workspace{padding:30px 25px 20px}.metro-topbar{padding:0 28px}.metro-grid{gap:18px}.metro-player{padding:22px}.metro-settings-card{padding:22px 20px}.metro-tempo-control{gap:18px}.metro-pulse{width:174px;height:174px}.metro-beat-buttons{grid-template-columns:repeat(4,minmax(0,1fr))}.metro-transport{gap:8px}.metro-tap{font-size:12px}.metro-tap>svg{display:none}.metro-heading{margin-bottom:27px}}@media (max-width:680px){.metro-topbar{height:72px;padding:0 21px}.metro-brand>b{font-size:21px}.metro-brand>span{width:37px;height:37px}.metro-back{font-size:12px}.metro-workspace{max-width:500px;padding:26px 16px 22px}.metro-heading{margin-bottom:23px}.metro-heading h1{letter-spacing:1px;font-size:26px}.metro-heading p{font-size:11px}.metro-eyebrow{letter-spacing:2px;font-size:8px}.metro-grid{grid-template-columns:1fr;gap:18px}.metro-player{padding:21px 25px 18px}.metro-card-top{font-size:11px}.metro-pulse{width:162px;height:162px;margin:25px auto 14px}.metro-pulse-center{width:123px;height:123px}.metro-pulse-center b{font-size:49px}.metro-tempo-control{gap:28px}.metro-bpm input{width:142px;font-size:70px}.metro-tempo-name{margin:13px 0 15px}.metro-transport{margin-top:22px}.metro-start,.metro-tap{min-height:55px}.metro-tap{font-size:13px}.metro-tap>svg{display:block}.metro-keyboard-hint{display:none}.metro-notice{margin-top:16px;padding-top:13px;font-size:10px}.metro-settings-card{padding:23px}.metro-beat-buttons{grid-template-columns:repeat(6,minmax(0,1fr));gap:14px 5px}.metro-beat>span{width:41px;height:41px}.metro-settings{gap:17px}.metro-footer{text-align:center;flex-wrap:wrap;justify-content:center;padding-top:25px;font-size:9px}.metro-footer>span{width:100%}}@media (max-width:360px){.metro-player{padding:18px}.metro-bpm input{width:129px;font-size:66px}.metro-tempo-control{gap:21px}.metro-beat-buttons{grid-template-columns:repeat(4,minmax(0,1fr))}.metro-tap>svg{display:none}.metro-heading h1{font-size:24px}}@media (min-width:681px) and (max-height:850px){.metro-topbar{height:65px}.metro-workspace{padding-top:23px}.metro-heading{margin-bottom:22px}.metro-heading h1{margin-top:9px;font-size:27px}.metro-player{min-height:0;padding:20px 27px 16px}.metro-pulse{width:145px;height:145px;margin:18px auto 10px}.metro-pulse-center{width:109px;height:109px}.metro-pulse-center b{font-size:45px}.metro-pulse-center small{font-size:9px}.metro-bpm input{font-size:63px;line-height:1.1}.metro-tempo-name{margin:13px 0}.metro-transport{margin-top:19px}.metro-start,.metro-tap{min-height:51px}.metro-keyboard-hint{margin-top:12px}.metro-notice{margin-top:12px;padding-top:11px}.metro-settings-card{padding:20px 23px}.metro-meter-line{margin-top:16px}.metro-subdivision-label{margin-top:17px}.metro-subdivisions button{height:56px}.metro-beat-buttons{margin-top:17px;margin-bottom:12px}.metro-volume{margin-top:14px;padding-top:12px}.metro-small-note{font-size:9px}.metro-footer{padding-top:22px}}@media (prefers-reduced-motion:reduce){.metro-pulse-ring{transform:none}.metro-pulse-center{box-shadow:none}.metro-tap:active{transform:none}}