.han-metro-stage{--han-metro-accent: var(--han-accent);--han-metro-cyan: #b3eef8;--han-metro-panel: rgba(3, 8, 14, .28);--han-metro-line: rgba(255, 255, 255, .11);--han-metro-soft: rgba(220, 235, 246, .72)}.han-metro-stage-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-end;padding:4px 4px 16px}.han-metro-stage-head h2{max-width:620px;margin:0;color:#fff;font-size:24px;line-height:1.24;font-weight:920}.han-metro-stage-badges{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.han-metro-stage-badges span{min-height:34px;display:inline-flex;align-items:center;gap:7px;padding:0 11px;border:1px solid var(--han-metro-line);border-radius:12px;color:#eef7ffc7;background:var(--han-metro-panel);font-size:12px;font-weight:850}.han-metro-stage .han-tools-legacy-content{padding:0}.han-metro-stage .metronome{width:100%;margin:0;text-align:left;color:var(--han-metro-soft);font-size:14px}.han-metro-console,.han-metro-row{display:grid;gap:14px;min-width:0}.han-metro-panel{min-width:0;padding:18px;border:1px solid var(--han-metro-line);border-radius:22px;background:var(--han-metro-panel)}.han-metro-label{display:flex;align-items:center;gap:7px;margin:0 0 12px;color:#b3eef8db;font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.han-metro-screen{position:relative;overflow:hidden;display:grid;justify-items:center;gap:12px;padding:22px 18px 18px;border:1px solid rgba(255,106,140,.16);border-radius:24px;background:radial-gradient(circle at 50% 0%,rgba(255,106,140,.16),transparent 62%),#03080e57}.han-metro-screen:before{content:"";position:absolute;top:-70px;left:50%;width:260px;height:260px;transform:translate(-50%) scale(.86);border-radius:50%;background:radial-gradient(circle,rgba(255,106,140,.34),transparent 68%);opacity:0;pointer-events:none}.han-metro-screen.is-pulse:before{animation:han-metro-glow .42s ease-out}.han-metro-screen.is-pulse-down:before{animation-duration:.6s}@keyframes han-metro-glow{0%{opacity:.9;transform:translate(-50%) scale(.8)}to{opacity:0;transform:translate(-50%) scale(1.16)}}.han-metro-stage .beats{position:relative;min-width:116px;margin:0;color:#fff!important;font-size:76px;line-height:1;font-weight:950;font-variant-numeric:tabular-nums;text-align:center;letter-spacing:-.02em;text-shadow:0 16px 40px rgba(0,0,0,.45)}.han-metro-stage .beats.is-down{color:var(--han-metro-accent)!important}.han-metro-stage .beats.is-idle{color:#ffffff3d!important}.han-metro-stage .beats.is-tick{animation:han-metro-tick .2s ease-out}@keyframes han-metro-tick{0%{transform:scale(1.12)}to{transform:scale(1)}}.han-metro-state{display:inline-flex;align-items:center;gap:8px;margin:0;padding:5px 13px 5px 10px;border:1px solid var(--han-metro-line);border-radius:999px;background:#03080e57;color:#dcebf699;font-size:12px;font-weight:850;letter-spacing:.06em;text-transform:uppercase}.han-metro-state-dot{width:8px;height:8px;border-radius:50%;background:#ffffff47}.han-metro-stage .is-running .han-metro-state{border-color:#ff6a8c66;color:#ffd7e2}.han-metro-stage .is-running .han-metro-state-dot{background:var(--han-metro-accent);box-shadow:0 0 0 4px #ff6a8c2e}.han-metro-stage .han-metro-state-run,.han-metro-stage .is-running .han-metro-state-idle{display:none}.han-metro-stage .is-running .han-metro-state-run{display:inline}.han-metro-dots{width:100%;display:grid;justify-items:center;gap:4px}.han-metro-stage .beats--desktop,.han-metro-stage .beats--mobile{margin:0 auto;border-collapse:separate}.han-metro-stage .beats--mobile{display:none}.han-metro-stage .btn--circle{height:20px;margin:6px 0;display:flex;justify-content:space-between}.han-metro-stage .btn--circle td{width:18px;height:18px;margin:0 12px;border-radius:50%;background:#ffffff29!important;box-shadow:inset 0 0 0 1px #ffffff29;transition:background .24s ease,box-shadow .24s ease,transform .24s ease}.han-metro-stage .btn--circle td.is-beat{background:var(--han-metro-cyan)!important;box-shadow:0 0 0 5px #b3eef829;transform:scale(1.16)}.han-metro-stage .btn--circle td.is-down{background:var(--han-metro-accent)!important;box-shadow:0 0 0 6px #ff6a8c33;transform:scale(1.24)}.han-metro-panel--tempo{display:grid;gap:14px}.han-metro-tempo-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px}.han-metro-stage .bpmOut{padding:0;color:#fff;font-size:34px;line-height:1;font-weight:950;font-variant-numeric:tabular-nums}.han-metro-range-hint{margin:0;color:#dcebf680;font-size:12px;font-weight:700}.han-metro-stage .range--wrap{display:flex;align-items:center;gap:12px;padding:0}.han-metro-stage .keyMinus,.han-metro-stage .keyPlus{flex:none;width:44px;height:44px;display:grid;place-items:center;padding:0;border:1px solid var(--han-metro-line);border-radius:15px;color:#fff;background:#ffffff14;font:inherit;font-size:20px;font-weight:900;line-height:1;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;transition:background .18s ease,border-color .18s ease,transform .12s ease}.han-metro-stage .keyMinus:hover,.han-metro-stage .keyPlus:hover,.han-metro-stage .keyMinus.plus--hover,.han-metro-stage .keyPlus.plus--hover{color:#07111b;border-color:var(--han-metro-cyan);background:var(--han-metro-cyan)}.han-metro-stage .keyMinus:active,.han-metro-stage .keyPlus:active{transform:scale(.94)}.han-metro-stage input[type=range]{flex:1 1 auto;width:100%;min-width:0;height:30px;margin:0;background:transparent;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.han-metro-stage input[type=range]:focus{outline:none}.han-metro-stage input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:#ffffff24}.han-metro-stage input[type=range]::-webkit-slider-thumb{width:26px;height:26px;margin-top:-9px;border:3px solid #0b131b;border-radius:50%;background:var(--han-metro-cyan);box-shadow:0 6px 18px #0006;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.han-metro-stage input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px #b3eef84d}.han-metro-stage input[type=range]::-moz-range-track{height:8px;border:none;border-radius:999px;background:#ffffff24}.han-metro-stage input[type=range]::-moz-range-thumb{width:20px;height:20px;border:3px solid #0b131b;border-radius:50%;background:var(--han-metro-cyan);cursor:pointer}.han-metro-stage .tapper{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:10px}.han-metro-stage .start,.han-metro-stage .tapper--btn{width:auto;height:52px;margin:0;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:16px;font:inherit;font-size:15px;font-weight:900;letter-spacing:.01em;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;transition:background .18s ease,border-color .18s ease,color .18s ease,transform .12s ease}.han-metro-stage .start{color:#07111b!important;border:1px solid var(--han-metro-cyan)!important;background:var(--han-metro-cyan)!important}.han-metro-stage .start:hover{transform:translateY(-1px)}.han-metro-stage .start:active{transform:scale(.98)}.han-metro-stage .is-running .start{color:#fff!important;border:1px solid rgba(255,106,140,.9)!important;background:var(--han-metro-accent)!important}.han-metro-stage .tapper--btn{color:#fff;border:1px solid var(--han-metro-line);background:#ffffff14}.han-metro-stage .tapper--btn:hover,.han-metro-stage .tapper--btn:active,.han-metro-stage .tapper--btn.tapper--hover{color:#07111b;border-color:var(--han-metro-cyan);background:var(--han-metro-cyan)}.han-metro-stage #tempo{display:none}.han-metro-panel--bar{display:flex;flex-direction:column;padding:14px 8px;overflow-x:auto;scrollbar-width:thin}.han-metro-panel--bar .time--wrap{margin:auto}.han-metro-stage .time--wrap{position:relative;width:max-content;margin:0 auto;display:flex;justify-content:center;align-items:center;padding:0}.han-metro-stage .arrow-prev,.han-metro-stage .arrow-next{position:absolute;top:50%;z-index:2;transform:translateY(-50%);width:34px;height:34px;display:grid;place-items:center;padding:0;border:1px solid var(--han-metro-line);border-radius:12px;background:#0b131bd1;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;transition:background .18s ease,border-color .18s ease}.han-metro-stage .arrow-prev{left:0}.han-metro-stage .arrow-next{right:0}@media (min-width: 1024px){.han-metro-stage .arrow-prev,.han-metro-stage .arrow-next{position:static;flex:none;width:30px;height:30px;transform:none;background:#ffffff0f;backdrop-filter:none;-webkit-backdrop-filter:none}}.han-metro-stage .arrow-prev:hover,.han-metro-stage .arrow-next:hover{border-color:#b3eef880;background:#b3eef824}.han-metro-stage .arrow-prev svg,.han-metro-stage .arrow-next svg{width:13px;height:13px;fill:#eef7ffd1;transition:fill .18s ease}.han-metro-stage .arrow-prev:hover svg,.han-metro-stage .arrow-next:hover svg{fill:var(--han-metro-cyan)}.han-metro-stage .beat-slider-wrap{position:relative;flex:none;width:450px;height:90px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent)}.han-metro-stage .beat-slider{position:absolute;left:-90px;width:1200px;display:flex;margin:0;padding:0;list-style:none}.han-metro-stage .time{width:50px;height:50px;margin:20px;display:flex;justify-content:center;align-items:center;flex:none;border-radius:50%;color:#eef7ffc2;background:#ffffff14;box-shadow:inset 0 0 0 1px #ffffff1f;font:inherit;font-size:16px;font-weight:900;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .24s ease,color .24s ease,box-shadow .24s ease,transform .24s ease}.han-metro-stage .time:hover{color:#fff;background:#ffffff29}.han-metro-stage .beat-slider .active{color:#fff;background:var(--han-metro-accent);box-shadow:0 10px 26px #ff6a8c59;transform:scale(1.06)}.han-metro-panel--skip{display:grid;align-content:start;gap:12px}.han-metro-stage .time--text-container{display:block;padding:0;color:#eef7ffdb!important;font-size:15px;font-weight:700;line-height:2.2}.han-metro-stage .time--text-container span{color:#eef7ffdb!important}.han-metro-stage .time--text-container input[type=text]{width:46px;height:38px;margin:0 2px;padding:0;border:1px solid var(--han-metro-line);border-radius:11px;color:#fff!important;background:#ffffff14;font:inherit;font-size:16px;font-weight:900;text-align:center;outline:none}.han-metro-stage .time--text-container input[type=text]:focus{border-color:#b3eef88c;background:#b3eef81f}.han-metro-skip-note{margin:0;color:#dcebf685;font-size:13px;line-height:1.6}.han-metro-stage .switch{position:relative;flex:none;display:inline-block;width:46px;height:26px;margin:0 6px 0 0;vertical-align:middle;cursor:pointer}.han-metro-stage .switch .custom-checkbox{display:none}.han-metro-stage .slider{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:999px;background:#ffffff2e;cursor:pointer;transition:background .28s ease}.han-metro-stage .slider:before{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 6px #00000059;transition:transform .28s ease}.han-metro-stage .switch.active .slider{background:var(--han-metro-accent)}.han-metro-stage .switch.active .slider:before{transform:translate(20px)}.han-metro-keys{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}.han-metro-keys li{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border:1px solid var(--han-metro-line);border-radius:12px;background:#ffffff0d;color:#dcebf6ad;font-size:12.5px}.han-metro-keys kbd{min-width:26px;padding:3px 7px;border:1px solid rgba(255,255,255,.18);border-bottom-width:2px;border-radius:7px;background:#ffffff1a;color:#fff;font-family:inherit;font-size:11px;font-weight:900;text-align:center}.han-metro-guide{display:grid;gap:14px;margin-top:18px}.han-metro-guide-card{padding:20px;border:1px solid var(--han-metro-line);border-radius:22px;background:var(--han-metro-panel)}.han-metro-guide-card h2{margin:0 0 10px;color:#fff;font-size:20px;line-height:1.3;font-weight:920}.han-metro-guide-card p{margin:0 0 10px;color:var(--han-metro-soft);font-size:15px;line-height:1.75}.han-metro-guide-card p:last-child{margin-bottom:0}.han-metro-guide-card .liste{display:grid;gap:10px;margin:0;padding:0;list-style:none}.han-metro-guide-card .liste li{position:relative;padding-left:26px;color:var(--han-metro-soft);font-size:15px;line-height:1.7}.han-metro-guide-card .liste li:before{content:"";position:absolute;top:10px;left:6px;width:8px;height:8px;border-radius:50%;background:var(--han-metro-accent)}@media (min-width: 1240px){.han-metro-row--settings{grid-template-columns:minmax(0,1fr) 280px}}@media (min-width: 1180px){.han-metro-guide{grid-template-columns:repeat(2,minmax(0,1fr))}.han-metro-guide-card:first-child{grid-column:1 / -1}}@media (max-width: 900px){.han-metro-stage-head{flex-direction:column;align-items:flex-start;gap:12px}.han-metro-stage-badges{justify-content:flex-start}}@media (max-width: 640px){.han-metro-panel,.han-metro-guide-card{padding:15px;border-radius:18px}.han-metro-panel--bar{padding:14px 8px}.han-metro-screen{padding:20px 12px 18px;border-radius:20px}.han-metro-stage .beats{font-size:60px}.han-metro-stage .bpmOut{font-size:30px}.han-metro-stage .tapper{grid-template-columns:minmax(0,1fr)}}@media (max-width: 550px){.han-metro-stage .beat-slider-wrap{width:310px;height:80px}.han-metro-stage .time{width:40px;height:40px;margin:20px 10px;font-size:15px}}@media (max-width: 460px){.han-metro-stage .beat-slider-wrap{width:200px}.han-metro-stage .btn--circle td{margin:0 8px}}@media all and (max-width: 660px){.han-metro-stage .beats--desktop.twelve{display:none}.han-metro-stage .beats--mobile.twelve{display:table}}@media all and (max-width: 600px){.han-metro-stage .beats--desktop.eleven{display:none}.han-metro-stage .beats--mobile.eleven{display:table}}@media all and (max-width: 550px){.han-metro-stage .beats--desktop.ten{display:none}.han-metro-stage .beats--mobile.ten{display:table}}@media all and (max-width: 500px){.han-metro-stage .beats--desktop.nine{display:none}.han-metro-stage .beats--mobile.nine{display:table}}@media all and (max-width: 450px){.han-metro-stage .beats--desktop.eight{display:none}.han-metro-stage .beats--mobile.eight{display:table}}@media all and (max-width: 400px){.han-metro-stage .beats--desktop.seven{display:none}.han-metro-stage .beats--mobile.seven{display:table}}@media (prefers-reduced-motion: reduce){.han-metro-stage .beats.is-tick,.han-metro-screen.is-pulse:before{animation:none}}