:root{--face: #d4d0c8;--face-light: #ffffff;--face-shadow: #808080;--face-dark: #404040;--title-from: #0a246a;--title-to: #3a6ea5;--title-text: #ffffff;--ink: #000000;--field: #ffffff;--selection: #0a246a;--ui-font: "Tahoma", "Geneva", "DejaVu Sans", system-ui, sans-serif}*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden;background:#3a7fc4;font-family:var(--ui-font);font-size:12px;color:var(--ink);-webkit-font-smoothing:antialiased}.desktop{position:fixed;inset:0;overflow:hidden;--ready-opacity: 0}.desktop #webamp{opacity:var(--ready-opacity);transition:opacity .22s ease-out}.desktop.is-ready{--ready-opacity: 1}.desktop__stage{position:absolute;inset:0}.desktop.is-drop-target:after{content:"";position:absolute;inset:10px;border:2px dashed rgba(255,255,255,.85);border-radius:4px;pointer-events:none}.fatal{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);max-width:420px;padding:18px 20px;background:var(--face);border:2px outset var(--face-light);text-align:center;line-height:1.5}.desktop-hint{position:absolute;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translate(-50%);display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:#0000006b;backdrop-filter:blur(6px);color:#fff;font-size:11px;white-space:nowrap;z-index:1200;transition:opacity .2s ease-out,transform .2s ease-out}.desktop-hint.is-hidden{opacity:0;transform:translate(-50%) translateY(6px);pointer-events:none}.desktop-hint__action{appearance:none;border:1px solid rgba(255,255,255,.55);background:#ffffff1a;color:#fff;font:inherit;padding:3px 10px;border-radius:999px;cursor:pointer}.desktop-hint__action:hover{background:#ffffff3d}.desktop-hint__tail{opacity:.75}.share-banner{position:absolute;left:50%;top:calc(14px + env(safe-area-inset-top));transform:translate(-50%);display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:#00000085;backdrop-filter:blur(6px);color:#fff;font-size:11px;white-space:nowrap;z-index:1200;transition:opacity .2s ease-out,transform .2s ease-out}.share-banner.is-hidden{opacity:0;transform:translate(-50%) translateY(-6px);pointer-events:none}.share-banner__text{opacity:.85}.share-banner__action{appearance:none;border:1px solid rgba(255,255,255,.55);background:#ffffff1a;color:#fff;font:inherit;padding:3px 10px;border-radius:999px;cursor:pointer}.share-banner__action:hover{background:#ffffff3d}.win98{background:var(--face);border-top:1px solid var(--face-light);border-left:1px solid var(--face-light);border-right:1px solid var(--face-dark);border-bottom:1px solid var(--face-dark);box-shadow:inset -1px -1px 0 var(--face-shadow),inset 1px 1px #dfdfdf,2px 2px 6px #00000059;color:var(--ink)}.win98-button{display:inline-flex;align-items:center;justify-content:center;min-width:76px;padding:4px 12px;font:inherit;color:var(--ink);background:var(--face);border:1px solid var(--face-dark);border-top-color:var(--face-light);border-left-color:var(--face-light);box-shadow:inset -1px -1px 0 var(--face-shadow),inset 1px 1px #efefef;cursor:pointer;user-select:none}.win98-button:active:not(:disabled){border-color:var(--face-light);border-top-color:var(--face-dark);border-left-color:var(--face-dark);box-shadow:inset 1px 1px 0 var(--face-shadow);padding:5px 11px 3px 13px}.win98-button:disabled{color:var(--face-shadow);text-shadow:1px 1px 0 var(--face-light);cursor:default}.win98-button:focus-visible{outline:1px dotted var(--ink);outline-offset:-4px}.win98-input{width:100%;padding:4px 6px;font:inherit;color:var(--ink);background:var(--field);border:1px solid var(--face-shadow);border-top-color:var(--face-dark);border-left-color:var(--face-dark);box-shadow:inset 1px 1px #0000001f}.win98-input:focus{outline:none;box-shadow:inset 1px 1px #0000001f,0 0 0 1px var(--title-to)}.dialog{position:fixed;display:flex;flex-direction:column;max-width:calc(100vw - 16px);max-height:min(78vh,720px);max-height:min(78dvh,720px);padding:3px}.dialog--fill{height:min(605px,78vh);height:min(605px,78dvh)}.dialog--fill .dialog__body{display:flex;flex-direction:column;overflow:hidden}.dialog__titlebar{display:flex;align-items:center;gap:8px;padding:3px 3px 3px 7px;touch-action:none;background:linear-gradient(90deg,var(--title-from),var(--title-to));color:var(--title-text);cursor:grab;user-select:none}.dialog__titlebar.is-dragging{cursor:grabbing}.dialog__title{flex:1;font-weight:700;font-size:12px;text-shadow:1px 1px 0 rgba(0,0,0,.35)}.dialog__close{width:18px;height:16px;display:grid;place-items:center;font:700 10px/1 var(--ui-font);color:var(--ink);background:var(--face);border:1px solid var(--face-dark);border-top-color:var(--face-light);border-left-color:var(--face-light);cursor:pointer}.dialog__close:active{border-color:var(--face-light);border-top-color:var(--face-dark);border-left-color:var(--face-dark)}.dialog__body{flex:1;min-height:0;padding:12px;overflow:auto}.dialog__footer{display:flex;justify-content:flex-end;gap:8px;padding:0 12px 12px}.add-media__label{display:block;margin-bottom:6px}.add-media__hint,.add-media__status{margin:8px 0 0;color:#454545;line-height:1.45}.add-media__status{min-height:16px;font-weight:700}.add-media__status.is-error{color:#a40000}.add-media__footer{display:flex;gap:8px}.skin-browser{display:flex;flex-direction:column;gap:10px;flex:1;min-height:0}.skin-browser__toolbar{display:flex;gap:8px;align-items:center}.skin-browser__toolbar .win98-input{flex:1}.skin-browser__toolbar .win98-button{min-width:92px;white-space:nowrap}.skin-browser__grid{flex:1;min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px;padding:8px;background:var(--field);border:1px solid var(--face-shadow);border-top-color:var(--face-dark);border-left-color:var(--face-dark)}.skin-browser__sentinel{grid-column:1 / -1;height:1px}.skin-browser__status{color:#454545;min-height:15px}.skin-tile{display:flex;flex-direction:column;gap:4px;padding:4px;background:transparent;border:1px solid transparent;font:inherit;text-align:left;cursor:pointer}.skin-tile:hover,.skin-tile:focus-visible{background:#e8f0ff;border-color:var(--title-to);outline:none}.skin-tile img{width:100%;aspect-ratio:275 / 116;object-fit:cover;object-position:top center;image-rendering:pixelated;background:#101010;border:1px solid var(--face-shadow)}.skin-tile__name{font-size:10px;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.station-browser{display:flex;flex-direction:column;gap:10px;flex:1;min-height:0}.station-browser__toolbar{display:flex;gap:8px;align-items:center}.station-browser__toolbar .win98-input{flex:1}.station-browser__genre{flex:0 0 132px;width:132px}.station-browser__list{flex:1;min-height:0;overflow-y:auto;padding:2px;background:var(--field);border:1px solid var(--face-shadow);border-top-color:var(--face-dark);border-left-color:var(--face-dark)}.station-browser__sentinel{height:1px}.station-browser__status{color:#454545;min-height:15px}.station-row{display:flex;align-items:stretch;gap:2px}.station-row__play{display:flex;flex:1;min-width:0;align-items:center;gap:8px;padding:5px 6px;font:inherit;text-align:left;color:var(--ink);background:transparent;border:1px solid transparent;cursor:pointer}.station-row__play:hover,.station-row__play:focus-visible{background:var(--title-from, #000080);border-color:var(--title-from, #000080);color:#fff;outline:none}.station-row__icon{position:relative;display:flex;flex:0 0 32px;align-items:center;justify-content:center;width:32px;height:32px;overflow:hidden;color:var(--face-shadow);font-size:15px;background:#0000000f;border:1px solid var(--face-shadow)}.station-row__icon img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--field)}.station-row__text{display:flex;flex-direction:column;min-width:0;gap:1px}.station-row__name{overflow:hidden;font-weight:700;text-overflow:ellipsis;white-space:nowrap}.station-row__detail{overflow:hidden;color:#454545;text-overflow:ellipsis;white-space:nowrap}.station-row__play:hover .station-row__detail,.station-row__play:focus-visible .station-row__detail{color:#c8c8dc}.station-row__add{flex:0 0 28px;align-self:center;min-width:0;width:28px;padding:2px 0;font:inherit;font-weight:700;color:var(--ink);background:var(--face);border:1px solid var(--face-dark);border-top-color:var(--face-light);border-left-color:var(--face-light);box-shadow:inset -1px -1px 0 var(--face-shadow),inset 1px 1px #efefef;cursor:pointer}.station-row__add:active{border-color:var(--face-light);border-top-color:var(--face-dark);border-left-color:var(--face-dark);box-shadow:inset 1px 1px 0 var(--face-shadow)}.context-menu{position:fixed;min-width:178px;padding:2px;z-index:300000;user-select:none}.context-menu--nested{position:absolute;left:100%;top:-3px;display:none}.context-menu__group{position:relative}.context-menu__item{position:relative;width:100%;margin:0;background:none;border:0;box-shadow:none;font:inherit;color:inherit;text-align:left;display:flex;align-items:center;gap:10px;padding:4px 10px 4px 22px;white-space:nowrap;cursor:default}.context-menu__item:hover:not(:disabled){background:var(--selection);color:#fff}@media(hover:hover){.context-menu__group:hover>.context-menu--nested{display:block}}.context-menu__group.is-open>.context-menu--nested{display:block}.context-menu--root.is-flipped .context-menu--nested{left:auto;right:100%}.context-menu.is-arming{pointer-events:none}.context-menu__item:disabled{color:var(--face-shadow);text-shadow:1px 1px 0 var(--face-light)}.context-menu__item.is-checked:before{content:"✓";position:absolute;left:7px;font-size:11px}.context-menu__label{flex:1}.context-menu__arrow{font-size:9px}.context-menu__separator{height:0;margin:3px 2px;border-top:1px solid var(--face-shadow);border-bottom:1px solid var(--face-light)}#webamp-context-menu ul.context-menu li.parent.is-open>ul{display:block}@media(hover:none){#webamp-context-menu ul.context-menu li:hover>ul{display:none}#webamp-context-menu ul.context-menu li:hover,#webamp-context-menu ul.context-menu li:hover a{background-color:transparent;color:var(--ink)}#webamp-context-menu ul.context-menu li:active,#webamp-context-menu ul.context-menu li:active a{background-color:var(--selection);color:var(--title-text)}}.yt-stage{position:fixed;left:0;top:0;width:min(320px,calc(100vw - 16px));height:200px;padding:3px;z-index:900;background:var(--face);border-top:1px solid var(--face-light);border-left:1px solid var(--face-light);border-right:1px solid var(--face-dark);border-bottom:1px solid var(--face-dark);box-shadow:2px 2px 6px #00000059;display:flex;flex-direction:column;clip-path:inset(50%);opacity:0;pointer-events:none}.yt-stage.is-visible{clip-path:none;opacity:1;pointer-events:auto}.yt-stage__titlebar{display:flex;align-items:center;gap:8px;padding:2px 2px 2px 6px;touch-action:none;background:linear-gradient(90deg,var(--title-from),var(--title-to));color:var(--title-text);font-weight:700;cursor:grab;user-select:none;flex:0 0 auto}.yt-stage__titlebar span{flex:1}.yt-stage__close{width:18px;height:15px;display:grid;place-items:center;font:700 10px/1 var(--ui-font);background:var(--face);border:1px solid var(--face-dark);border-top-color:var(--face-light);border-left-color:var(--face-light);cursor:pointer}.yt-stage>div:not(.yt-stage__titlebar){flex:1;min-height:0;background:#000}.yt-stage iframe{width:100%;height:100%;border:0;display:block}.toast-stack{position:fixed;right:calc(14px + env(safe-area-inset-right));bottom:calc(14px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px;z-index:400000;pointer-events:none}.toast{max-width:min(320px,calc(100vw - 28px));padding:9px 13px;background:#141418ed;color:#fff;border-left:3px solid #62d162;border-radius:3px;box-shadow:0 4px 14px #0006;line-height:1.45;animation:toast-in .18s ease-out}.toast--error{border-left-color:#e05252}.toast.is-leaving{opacity:0;transition:opacity .28s ease-in}@keyframes toast-in{0%{opacity:0;transform:translateY(8px)}}@media(prefers-reduced-motion:reduce){.toast,.desktop #webamp{animation:none;transition:none}}@media(pointer:coarse){.desktop{touch-action:none;-webkit-touch-callout:none;user-select:none}.win98-input{font-size:16px}.win98-button{min-height:40px;padding:9px 14px;font-size:13px}.win98-button:active:not(:disabled){padding:10px 13px 8px 15px}.dialog__titlebar{padding:5px 5px 5px 9px}.dialog__close{width:34px;height:28px;font-size:12px}.dialog__body{-webkit-overflow-scrolling:touch}.yt-stage__close{width:34px;height:26px}.desktop-hint__action{padding:8px 14px}.station-row__play{padding:9px 6px}.station-row__add{flex:0 0 44px;align-self:stretch;width:44px;font-size:15px}.skin-tile{padding:6px}.context-menu{max-width:calc(100vw - 16px);max-height:70dvh;overflow-y:auto}.context-menu__item{padding:12px 14px 12px 28px}.context-menu__item.is-checked:before{left:10px}.context-menu--nested{position:static;min-width:0;margin:6px 0 2px;border:0;border-left:3px solid var(--face-shadow);box-shadow:none;background:#00000012}.context-menu--nested .context-menu__item{padding:11px 10px 11px 20px}.context-menu--root.is-flipped .context-menu--nested{right:auto}#webamp-context-menu ul.context-menu{max-width:calc(100vw - 16px);max-height:70dvh;overflow-y:auto}#webamp-context-menu ul.context-menu li{padding:11px 26px;font-size:13px}#webamp-context-menu ul.context-menu li.parent.is-open>ul{position:static;order:1;margin:6px 0 2px;border:0;border-left:3px solid var(--face-shadow);box-shadow:none;background:#00000012}#webamp-context-menu ul.context-menu li.parent.is-open{display:flex;flex-direction:column}#webamp-context-menu ul.context-menu li.parent.is-open:after{position:absolute;top:11px;right:14px;margin:0}}@media(max-width:560px){.skin-browser__toolbar,.station-browser__toolbar,.add-media__footer,.dialog__footer{flex-wrap:wrap}.station-browser__genre{flex:1 1 100%;width:auto}.skin-browser__grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}.dialog__body{padding:10px}.dialog__footer{padding:0 10px 10px}.desktop-hint{left:12px;right:12px;transform:none;flex-wrap:wrap;justify-content:center;white-space:normal;border-radius:14px}.desktop-hint.is-hidden{transform:translateY(6px)}.share-banner{left:12px;right:12px;transform:none;flex-wrap:wrap;justify-content:center;white-space:normal;border-radius:14px}.share-banner.is-hidden{transform:translateY(-6px)}}
