.metro-widget{position:fixed;left:24px;bottom:24px;z-index:200;font-family:Courier New,Courier,monospace;-webkit-user-select:none;-moz-user-select:none;user-select:none;animation:metro-appear .18s ease both}.metro-widget--above-transport{bottom:76px}.metro-pill{display:flex;align-items:center;gap:6px;background:gold;border:3px solid #000;box-shadow:5px 5px 0 #000;padding:6px 10px;cursor:-webkit-grab;cursor:grab;min-width:160px;height:44px;white-space:nowrap}.metro-pill:active{cursor:-webkit-grabbing;cursor:grabbing}.metro-pill:hover{box-shadow:7px 7px 0 #000}.metro-pill button{cursor:pointer}.metro-pill__icon{width:22px;height:22px;object-fit:contain;flex-shrink:0}.metro-pill__bpm{font-size:18px;font-weight:700;color:#000;min-width:46px;text-align:center}.metro-pill__bpm--playing{color:#000}.metro-pill__btn{background:#000;color:gold;border:2px solid #000;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;flex-shrink:0;padding:0;line-height:1}.metro-pill__btn:hover{background:#333}.metro-pill__btn:active{transform:translate(2px,2px)}.metro-pill__expand{background:transparent;border:none;cursor:pointer;font-size:14px;color:#000;margin-left:auto;padding:0 2px;line-height:1}.metro-pill__expand:hover{opacity:.7}.metro-panel{background:#fafaf0;border:3px solid #000;box-shadow:5px 5px 0 #000;width:280px;display:flex;flex-direction:column;max-height:90vh;overflow-y:auto}.metro-panel__header{background:#000;color:gold;display:flex;align-items:center;padding:6px 10px;gap:8px;cursor:-webkit-grab;cursor:grab;flex-shrink:0}.metro-panel__header:active{cursor:-webkit-grabbing;cursor:grabbing}.metro-panel__header-icon{width:18px;height:18px;object-fit:contain;flex-shrink:0;filter:invert(1) brightness(1.5)}.metro-panel__title{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;flex:1 1}.metro-panel__header-btn{background:transparent;border:1px solid #444;color:#fff;width:22px;height:22px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:11px;padding:0;line-height:1}.metro-panel__header-btn:hover{background:#333}.metro-panel__header-btn:active{transform:translate(1px,1px)}.metro-panel__bpm-section{padding:16px 16px 10px;border-bottom:2px solid #000}.metro-panel__bpm-display{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:10px}.metro-panel__bpm-number{font-size:52px;font-weight:700;line-height:1;border:3px solid #000;padding:4px 14px;min-width:120px;text-align:center;background:#fff;transition:border-color .18s ease}.metro-panel__bpm-number--playing{border-color:#aaa}.metro-panel__bpm-number--beat{border-color:#f7f}.metro-panel__bpm-step-btn{background:#fff;border:2px solid #000;box-shadow:3px 3px 0 #000;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;font-weight:700;padding:0;line-height:1;flex-shrink:0}.metro-panel__bpm-step-btn:hover{background:gold}.metro-panel__bpm-step-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #000}.metro-panel__bpm-slider{width:100%;-webkit-appearance:none;height:6px;background:#000;cursor:pointer}.metro-panel__bpm-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;background:gold;border:2px solid #000;cursor:pointer}.metro-panel__bpm-slider::-moz-range-thumb{width:20px;height:20px;background:gold;border:2px solid #000;cursor:pointer}.metro-panel__bpm-range{display:flex;justify-content:space-between;font-size:10px;color:#666;margin-top:3px}.metro-panel__tap{width:100%;background:#f7f;border:2px solid #000;border-right:none;border-left:none;padding:14px 0;font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;color:#000;font-family:inherit;transition:background .05s}.metro-panel__tap:hover{background:#e5e}.metro-panel__tap--flash,.metro-panel__tap:active{background:#fff}.metro-panel__playback{display:flex;border-bottom:2px solid #000;flex-shrink:0}.metro-panel__play-btn,.metro-panel__stop-btn{flex:1 1;padding:10px 0;font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;font-family:inherit;border:none}.metro-panel__play-btn:active,.metro-panel__stop-btn:active{filter:brightness(.85)}.metro-panel__play-btn{background:gold;color:#000;border-right:2px solid #000}.metro-panel__play-btn:hover{background:#ffe533}.metro-panel__stop-btn{background:#fff;color:#000;border-left:1px solid #000}.metro-panel__stop-btn:hover{background:#f0f0f0}.metro-panel__beats{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-bottom:2px solid #000;flex-shrink:0}.metro-panel__beat-dot{width:24px;height:24px;border:2px solid #000;border-radius:0;background:#fff;transition:background .05s,transform .05s;flex-shrink:0}.metro-panel__beat-dot--accent{background:gold}.metro-panel__beat-dot--active{background:#f7f!important;transform:scale(1.15)}.metro-panel__section{padding:8px 16px;border-bottom:2px solid #000;flex-shrink:0}.metro-panel__section-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#666;margin-bottom:6px;display:block}.metro-panel__seg-group{display:flex;gap:0}.metro-panel__seg-group button{flex:1 1;padding:6px 4px;font-size:11px;font-weight:700;border:2px solid #000;background:#fff;cursor:pointer;font-family:inherit;margin-left:-1px;white-space:nowrap}.metro-panel__seg-group button:first-child{margin-left:0}.metro-panel__seg-group button:hover{background:gold}.metro-panel__seg-group button:active{transform:translate(1px,1px)}.metro-panel__seg-group button.active{background:#000;color:gold}.metro-panel__train{padding:8px 16px 12px;flex-shrink:0}.metro-panel__train-toggle{display:flex;align-items:center;gap:8px;margin-bottom:8px;cursor:pointer;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.metro-panel__toggle-switch{width:36px;height:20px;background:#ccc;border:2px solid #000;position:relative;cursor:pointer;transition:background .15s}.metro-panel__toggle-switch--on{background:gold}.metro-panel__toggle-switch:after{content:"";position:absolute;width:12px;height:12px;background:#000;top:2px;left:2px;transition:left .15s}.metro-panel__toggle-switch--on:after{left:18px}.metro-panel__train-config{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.metro-panel__train-field{display:flex;flex-direction:column;gap:4px;font-size:10px;color:#666;font-weight:700;text-transform:uppercase}.metro-panel__train-field select{background:#fff;border:2px solid #000;padding:4px 6px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;box-shadow:2px 2px 0 #000}.metro-panel__train-field select:focus{outline:2px solid gold}.metro-panel__sync{width:calc(100% - 32px);margin:8px 16px;padding:8px;background:#fff;border:2px solid #000;box-shadow:3px 3px 0 #000;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;font-family:inherit}.metro-panel__sync:hover{background:gold}.metro-panel__sync:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #000}@keyframes metro-appear{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes bpm-pulse{0%,to{border-color:#f7f}50%{border-color:#000}}@media(max-width:767px){.metro-widget{left:0;right:0;bottom:0;width:100%}.metro-widget--above-transport{bottom:0}.metro-pill{box-shadow:0 -3px 0 #000}.metro-panel,.metro-pill{width:100%;border-left:none;border-right:none;border-bottom:none}.metro-panel{position:fixed;left:0;right:0;bottom:0;max-height:65vh;box-shadow:0 -5px 0 #000}.metro-panel__bpm-number{font-size:44px}.metro-panel__tabs{display:flex;border-bottom:3px solid #000}.metro-panel__tab{flex:1 1;padding:8px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;background:#fff;cursor:pointer;font-family:inherit;border:none;border-right:2px solid #000}.metro-panel__tab:last-child{border-right:none}.metro-panel__tab.active{background:gold}}.metro-page{padding:24px 20px 40px;max-width:700px;margin:0 auto;font-family:Courier New,monospace}.metro-page__header{margin-bottom:24px}.metro-page__header h1{font-size:clamp(28px,6vw,48px);font-weight:700;margin:0 0 4px}.metro-page__header p{color:#666;font-size:14px;margin:0}.metro-page__main{border:3px solid #000;box-shadow:5px 5px 0 #000;background:#fafaf0;padding:24px;margin-bottom:20px}.metro-page__bpm-display{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:16px}.metro-page__bpm-number{font-size:clamp(72px,15vw,120px);font-weight:700;border:3px solid #000;padding:8px 20px;min-width:220px;text-align:center;background:#fff;line-height:1.1;transition:border-color .18s ease}.metro-page__bpm-number--playing{border-color:#aaa}.metro-page__bpm-number--beat{border-color:#f7f}.metro-page__step-btn{background:#fff;border:2px solid #000;box-shadow:4px 4px 0 #000;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:22px;font-weight:700;padding:0;flex-shrink:0}.metro-page__step-btn:hover{background:gold}.metro-page__step-btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 #000}.metro-page__bpm-slider{width:100%;-webkit-appearance:none;height:8px;background:#000;cursor:pointer;margin-bottom:4px}.metro-page__bpm-slider::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;background:gold;border:2px solid #000;cursor:pointer}.metro-page__bpm-slider::-moz-range-thumb{width:24px;height:24px;background:gold;border:2px solid #000;cursor:pointer}.metro-page__bpm-range{display:flex;justify-content:space-between;font-size:11px;color:#888;margin-bottom:20px}.metro-page__visualizer{display:flex;align-items:flex-end;justify-content:center;gap:12px;height:80px;margin-bottom:20px;border:3px solid #000;background:#fff;padding:8px 16px}.metro-page__bar{flex:1 1;max-width:60px;background:#000;transition:height .05s ease;min-height:6px;height:20%}.metro-page__bar--active{background:#f7f;height:100%!important}.metro-page__bar--accent-inactive{background:gold}.metro-page__bar--accent-active{background:gold;height:100%!important}.metro-page__beat-labels{display:flex;justify-content:center;gap:12px;padding:0 16px;margin-bottom:20px}.metro-page__beat-labels span{flex:1 1;max-width:60px;text-align:center;font-size:12px;font-weight:700;color:#000}.metro-page__tap{width:100%;background:#f7f;border:3px solid #000;box-shadow:5px 5px 0 #000;padding:18px 0;font-size:16px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;color:#000;font-family:inherit;margin-bottom:16px;transition:background .05s}.metro-page__tap:hover{background:#e5e}.metro-page__tap--flash,.metro-page__tap:active{background:#fff}.metro-page__tap:active{transform:translate(3px,3px);box-shadow:2px 2px 0 #000}.metro-page__playback{display:flex;gap:12px;margin-bottom:20px}.metro-page__play-btn,.metro-page__stop-btn{flex:1 1;padding:14px 0;font-size:15px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;font-family:inherit;border:3px solid #000;box-shadow:4px 4px 0 #000}.metro-page__play-btn:active,.metro-page__stop-btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 #000}.metro-page__play-btn{background:gold;color:#000}.metro-page__play-btn:hover{background:#ffe533}.metro-page__stop-btn{background:#fff;color:#000}.metro-page__stop-btn:hover{background:#f0f0f0}.metro-page__footer{display:grid;grid-template-columns:1fr 1fr;grid-gap:16px;gap:16px}.metro-page__control-group{border:3px solid #000;padding:12px}.metro-page__control-group label{display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#666;margin-bottom:8px}.metro-page__seg-group{display:flex;gap:0;flex-wrap:wrap}.metro-page__seg-group button{flex:1 1;padding:7px 4px;font-size:11px;font-weight:700;border:2px solid #000;background:#fff;cursor:pointer;font-family:inherit;margin-left:-1px;white-space:nowrap;min-width:36px}.metro-page__seg-group button:first-child{margin-left:0}.metro-page__seg-group button:hover{background:gold}.metro-page__seg-group button.active{background:#000;color:gold}