:root{--device-width: 240px;--device-height: 282px;--canvas-bg: #000000;--info-text: #ffffff;--body-orange: #ff6a00;--wheel-bg: #f1f1f1;--wheel-center: #ffffff;--wheel-outline: #d7d7d7;--wheel-ink: #6c6c6c;--meter-track: rgba(255, 255, 255, .18);--meter-fill: #ffffff;--modal-bg: rgba(0, 0, 0, .9)}*{margin:0;padding:0;box-sizing:border-box}html,body{min-width:var(--device-width);min-height:var(--device-height);width:100%;height:100%;overflow:hidden;background:var(--canvas-bg);color:var(--info-text);font-family:Avenir Next,Trebuchet MS,Gill Sans,sans-serif;-webkit-user-select:none;user-select:none}body{display:flex;justify-content:center;align-items:flex-start}button,input{font:inherit}button{-webkit-tap-highlight-color:transparent}svg{display:block}#deviceRoot{position:relative;width:var(--device-width);height:var(--device-height);overflow:hidden;background:var(--canvas-bg)}#app{width:100%;height:100%}.ipod-shell{width:100%;height:100%;display:flex;flex-direction:column}.display-panel{flex:0 0 76px;padding:10px 10px 8px;background:#000;color:var(--info-text)}.display-status{font-size:18px;line-height:1;font-weight:400;white-space:nowrap}.display-url{margin-top:8px;font-size:10px;line-height:1.2;font-weight:400;color:#fffffff0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clickwheel-stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;background:var(--body-orange);border-radius:18px}.clickwheel{position:relative;width:186px;height:186px;--wheel-axis-offset: 66px;border-radius:50%;background:var(--wheel-bg);border:1px solid var(--wheel-outline);touch-action:none}.clickwheel.dragging{cursor:grabbing}.wheel-btn,.wheel-center{position:absolute;border:none;background:transparent;color:var(--wheel-ink);cursor:pointer;outline:none}.wheel-btn{z-index:3;display:flex;align-items:center;justify-content:center;text-align:center;font-size:11px;line-height:1;font-weight:700;letter-spacing:.12em}.wheel-btn svg{width:28px;height:28px}.wheel-btn-top{top:calc(50% - var(--wheel-axis-offset));left:50%;width:78px;height:26px;transform:translate(-50%,-50%)}.wheel-btn-left{top:50%;left:calc(50% - var(--wheel-axis-offset));width:34px;height:56px;transform:translate(-50%,-50%)}.wheel-btn-right{top:50%;left:calc(50% + var(--wheel-axis-offset));width:34px;height:56px;transform:translate(-50%,-50%)}.wheel-btn-bottom{top:calc(50% + var(--wheel-axis-offset));left:50%;width:70px;height:28px;transform:translate(-50%,-50%)}.wheel-center{z-index:2;top:50%;left:50%;width:82px;height:82px;display:flex;align-items:center;justify-content:center;transform:translate(-50%,-50%);border-radius:50%;background:var(--wheel-center);border:1px solid var(--wheel-outline)}.wheel-center svg{width:28px;height:28px}.wheel-btn:active,.wheel-center:active,#playStopBtn[aria-pressed=true]{color:#4f4f4f}#scanQrBtn:disabled{opacity:.55;cursor:wait}.wheel-btn:focus-visible,.wheel-center:focus-visible,.scanner-close-btn:focus-visible{outline:2px solid #ffffff;outline-offset:2px}.volume-meter{position:relative;width:100%;height:3px;margin-top:10px;border-radius:999px;background:var(--meter-track);overflow:hidden;pointer-events:none}.volume-meter-fill{position:absolute;left:0;bottom:0;width:0;height:100%;border-radius:999px;background:var(--meter-fill);transition:width .16s ease}.hidden{display:none!important}.scanner-modal{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;display:flex;align-items:center;justify-content:center;padding:12px;background:var(--modal-bg)}.scanner-panel{width:100%;height:100%;display:flex;flex-direction:column;gap:10px;padding:10px;background:#111;border:1px solid #444444;border-radius:16px}.scanner-preview{position:relative;width:100%;height:124px;overflow:hidden;border-radius:12px;border:1px solid #555555;background:#000}.scanner-preview:after{content:"";position:absolute;top:14px;right:14px;bottom:14px;left:14px;border-radius:10px;border:2px solid rgba(255,255,255,.45);pointer-events:none}#qrVideo{width:100%;height:100%;object-fit:cover}.scanner-message{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;font-size:10px;line-height:1.35}.scanner-message.error{color:#ffb0b0}.scanner-close-btn{min-height:38px;border:1px solid #444444;border-radius:10px;background:#fff;color:#000;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}