/* Windows 95: gray chrome, white file panes, compact labels, no website cards. */
.titlebar { font-family:var(--system-font); font-size:12px; font-weight:bold; letter-spacing:0; }
.desktop-icons { gap:20px; max-height:calc(100% - var(--taskbar-height) - 24px); overflow-y:auto; scrollbar-width:thin; }
.desktop-icon { min-height:66px; flex-shrink:0; font-family:var(--system-font); font-size:12px; }
.hub-window { left:18%; top:10%; width:min(740px,74%); height:65%; min-height:280px; }
.hub-window .aux-content,.video-player-window .aux-content { padding:0; display:flex; flex-direction:column; overflow:hidden; }
.hub-window .menubar,.video-player-window .menubar { height:24px; min-height:24px; border-bottom:0; font-size:12px; }
.hub-window .menubar button,.video-player-window .menubar button { padding:3px 8px; font:12px var(--system-font); }
.explorer-toolbar { display:flex; align-items:center; gap:7px; padding:3px 2px 5px; border-top:1px solid white; flex-shrink:0; font-size:11px; }
.explorer-toolbar .bevel { display:flex; align-items:center; gap:5px; padding:2px 6px; min-height:24px; }
.explorer-toolbar img { width:16px; height:16px; image-rendering:pixelated; }
.explorer-location { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-left:4px; }
.explorer-toolbar label { display:flex; align-items:center; gap:4px; padding-right:4px; }
.explorer-toolbar select { background:white; font-size:11px; max-width:110px; }
.explorer-pane { display:grid; align-content:start; align-items:start; flex:1; min-height:0; overflow:auto; margin:0; padding:14px 8px; gap:18px 8px; background:white; border:2px solid; border-color:#808080 #fff #fff #808080; box-shadow:inset 1px 1px #222; scrollbar-color:#c0c0c0 #dedede; }
.explorer-pane.icon-view { grid-template-columns:repeat(auto-fill,minmax(95px,1fr)); }
.explorer-pane.thumbnail-view { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
.explorer-item { display:flex; flex-direction:column; align-items:center; gap:5px; min-width:0; padding:3px; color:#000; text-align:center; text-decoration:none; font:12px/1.25 var(--system-font); border:0; background:transparent; }
.file-thumbnail { display:block; position:relative; flex-shrink:0; }
.icon-view .file-thumbnail { width:32px; height:32px; }
.file-thumbnail img { display:block; width:100%; height:100%; object-fit:contain; }
.icon-view img { image-rendering:pixelated; }
.thumbnail-view .file-thumbnail { width:136px; height:85px; background:#eee; border:1px solid #808080; padding:2px; }
.vlogs-hub .file-thumbnail img { object-fit:cover; }
.shop-hub .file-thumbnail { height:114px; background:#f5f5f5; }
.file-name { padding:1px 3px; overflow-wrap:anywhere; max-width:100%; }
.explorer-item[aria-selected=true] .file-name { background:#000080; color:white; }
.explorer-item[aria-selected=true] .file-thumbnail { outline:1px dotted #000080; outline-offset:1px; }
.explorer-item:focus-visible { outline:0; }
.explorer-item:focus-visible .file-name { outline:1px dotted black; outline-offset:1px; }
.file-duration { position:absolute; bottom:3px; right:3px; padding:1px 3px; font:10px var(--system-font); color:white; background:black; }
.explorer-pane.details-view { display:flex; flex-direction:column; align-items:stretch; gap:1px; padding:4px; }
.details-view .explorer-item { flex-direction:row; text-align:left; gap:8px; padding:3px; }
.details-view .file-thumbnail { width:24px; height:24px; background:transparent; border:0; padding:0; }
.details-view .file-duration { position:static; color:#555; background:none; margin-left:8px; }
.details-view .file-thumbnail .file-duration { display:none; }
.explorer-status { flex-shrink:0; display:flex; gap:3px; padding-top:3px; min-height:23px; font:11px var(--system-font); }
.explorer-status>span { border:1px solid; border-color:#808080 white white #808080; padding:3px 5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.explorer-status>span:first-child { min-width:95px; }
.explorer-status>span:last-child { flex:1; }
.video-player-window { left:24%; top:14%; width:min(720px,72%); height:min(530px,76%); min-height:260px; }
.video-screen { flex:1; min-height:0; position:relative; display:grid; place-items:center; margin-top:2px; border:2px inset white; background:#000; }
.video-screen iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-controls { display:flex; align-items:center; gap:5px; padding:6px 2px 3px; flex-wrap:wrap; font-size:11px; }
.video-controls .bevel,.video-resume { padding:5px 10px; background:#c0c0c0; color:black; text-decoration:none; }
.video-controls a { margin-left:auto; }
.video-player-window .titlebar .window-title { font-size:12px; }
.missing-thumbnail .file-thumbnail img { object-fit:contain; image-rendering:pixelated; }
@media(max-width:680px),(max-width:1000px) and (max-height:500px){
  .desktop-icons:not(.desktop-apps) { left:4px; right:4px; width:auto; max-width:none; flex-direction:row; justify-content:space-around; gap:0; overflow:visible; }
  .desktop-icons:not(.desktop-apps) .desktop-icon { width:20%; min-height:76px; }
  .desktop-apps { display:none; }
  .hub-window,.video-player-window { min-height:0; }
  .hub-window .menubar,.video-player-window .menubar { min-height:32px; height:32px; }
  .hub-window .menubar button,.video-player-window .menubar button { min-height:32px; padding:5px 10px; }
  .explorer-toolbar { flex-wrap:wrap; gap:4px; }
  .explorer-toolbar .bevel { min-height:32px; }
  .explorer-toolbar select { font-size:16px; min-height:30px; }
  .explorer-toolbar label { margin-left:auto; }
  .explorer-pane.thumbnail-view { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 5px; padding:12px 5px; }
  .thumbnail-view .file-thumbnail { width:100%; max-width:160px; aspect-ratio:16/10; height:auto; }
  .shop-hub .file-thumbnail { aspect-ratio:1; }
  .explorer-item { font-size:11px; }
  .explorer-status>span:first-child { min-width:72px; }
  .explorer-status { font-size:10px; }
  .video-controls .bevel { min-height:36px; display:grid; place-items:center; padding:6px; }
  .details-view .file-thumbnail { width:24px; height:24px; aspect-ratio:auto; }
}
@media(max-height:540px) and (max-width:680px),(max-height:500px) and (max-width:1000px){
  .desktop-icons:not(.desktop-apps) { display:none; }
}
/* Freely positioned shortcuts remain behind application windows. */
#desktop.icons-ready .desktop-icons { display:contents; }
#desktop.icons-ready .desktop-icon { position:absolute; z-index:1; height:74px; min-height:0; margin:0; padding:3px; touch-action:none; user-select:none; -webkit-user-select:none; }
#desktop.icons-ready .desktop-icon img { -webkit-user-drag:none; }
#desktop.icons-ready .desktop-icon span { white-space:normal; }
#desktop.icons-ready .desktop-icon:focus span { background:none; outline:none; }
#desktop.icons-ready .desktop-icon.icon-selected span { background:#000080; outline:1px dotted white; }
#desktop.icons-ready .desktop-icon.icon-selected img { filter:brightness(.8) sepia(.15) saturate(1.5); }
#desktop.icons-ready .desktop-icon.icon-dragging { opacity:.65; cursor:move; }
@media(max-width:680px),(max-width:1000px) and (max-height:500px){
  #desktop.icons-ready .desktop-apps { display:none; }
  #desktop.icons-ready .desktop-icon { height:76px; }
}
@media(max-height:540px) and (max-width:680px),(max-height:500px) and (max-width:1000px){
  #desktop.icons-ready .desktop-icons { display:none; }
}
/* Playback belongs to the window's gray control panel. */
.video-controls { display:block; padding:5px 3px 2px; flex-shrink:0; border-top:1px solid white; }
.video-timeline { display:flex; align-items:center; gap:10px; padding:2px 2px 5px; }
.video-time { min-width:90px; text-align:right; font:11px var(--system-font); }
.video-seek { flex:1; min-width:0; }
.video-transport { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.video-transport .bevel { height:28px; min-height:28px; min-width:30px; padding:3px 8px; }
.video-toggle,.video-stop { font:13px var(--system-font); }
.video-volume-label { display:flex; align-items:center; gap:5px; font-size:11px; }
.video-volume { width:75px; }
.video-external { margin-left:auto; font-size:11px; }
.video-controls input[type=range] { appearance:none; -webkit-appearance:none; height:22px; background:transparent; padding:0; margin:0; }
.video-controls input[type=range]::-webkit-slider-runnable-track { height:5px; background:#888; border:1px solid; border-color:#555 white white #555; }
.video-controls input[type=range]::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:11px; height:19px; margin-top:-8px; background:#c0c0c0; border:2px solid; border-color:white #333 #333 white; border-radius:0; }
.video-controls input[type=range]::-moz-range-track { height:4px; background:#888; border:1px inset white; }
.video-controls input[type=range]::-moz-range-thumb { width:9px; height:16px; background:#c0c0c0; border:2px outset white; border-radius:0; }
.video-controls input[type=range]:focus-visible { outline:1px dotted black; }
.video-controls input:disabled { opacity:.45; }
.video-idle { color:#aaa; font:12px var(--system-font); }
.video-player-window:fullscreen { inset:0!important; width:100%!important; height:100%!important; max-width:none; max-height:none; margin:0; resize:none; }
@media(max-width:680px),(max-width:1000px) and (max-height:500px){
  .video-transport .bevel { height:36px; min-height:36px; padding:5px 7px; }
  .video-transport { gap:4px; }
  .video-volume { width:58px; }
  .video-controls input[type=range] { height:30px; }
  .video-controls input[type=range]::-webkit-slider-thumb { width:16px; height:24px; margin-top:-10px; }
  .video-time { min-width:87px; font-size:10px; }
}
.video-player-window .aux-content { overflow-y:auto; }
.video-screen { min-height:200px; }

/* Keep pointer and keyboard interaction on the window controls, not the embed. */
.video-screen iframe { pointer-events:none; }

.songs-hub .file-meta { font-size:11px; color:#555; }
.songs-hub .details-view .file-meta { margin-left:auto; white-space:nowrap; }
.play-controls .track-step { padding:4px 6px; min-width:28px; flex-shrink:0; }
.play-controls .track-step:disabled { color:#808080; text-shadow:1px 1px white; }

.songs-hub .explorer-pane.icon-view:not(.details-view) { grid-template-columns:repeat(auto-fill,minmax(125px,1fr)); }
.window.player-window { resize:none; }
.player-window .window-controls [data-win=maximize]:disabled::after { border-color:#808080; box-shadow:1px 1px white; }

/* Fixed icon boxes avoid font-baseline drift in the transport buttons. */
.play-controls > .bevel { display:inline-flex; align-items:center; justify-content:center; }
.play-controls > .bevel svg { display:block; width:16px; height:16px; flex-shrink:0; pointer-events:none; }