:root {
  --win-gray: #c0c0c0;
  --win-light: #fff;
  --win-mid: #808080;
  --win-dark: #000;
  --navy: #000080;
  --teal: #008080;
  --pink: #ff00a8;
  --violet: #6a2ca0;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body {
  font-family: "MS Sans Serif", Tahoma, Geneva, sans-serif;
  color: #000;
  background: var(--teal);
  image-rendering: pixelated;
}
button, a { font: inherit; }
button:focus-visible, a:focus-visible { outline: 2px dotted #000; outline-offset: 2px; }

.desktop {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 480px;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 15%, rgba(76, 255, 229, .13), transparent 27%),
    radial-gradient(circle at 12% 85%, rgba(143, 0, 255, .14), transparent 32%),
    #087f80;
}
.desktop-noise {
  position: absolute; inset: 0; pointer-events: none; opacity: .12;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.14) 3px 4px),
    repeating-linear-gradient(90deg, transparent 0 5px, rgba(0,0,0,.08) 5px 6px);
}

.desktop-icon {
  position: absolute; top: 38px; left: 27px;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  width: 112px; padding: 5px 3px; border: 0; background: transparent; color: white;
  text-shadow: 1px 1px #000; cursor: default;
}
.desktop-icon:focus .icon-label, .desktop-icon.selected .icon-label {
  background: #000080; outline: 1px dotted white;
}
.icon-label { padding: 2px 4px; font-size: 15px; line-height: 1.15; }
.computer-icon { position: relative; display: block; width: 54px; height: 52px; filter: drop-shadow(2px 2px 0 #004747); }
.monitor {
  position: absolute; left: 4px; top: 0; width: 46px; height: 36px;
  border: 3px outset #ddd; background: #d6d2c4;
}
.screen-glow {
  display: grid; place-items: center; width: 100%; height: 100%;
  border: 2px inset #eee; background: linear-gradient(135deg,#02043e,#054bd5 55%,#0ff);
  color: #fff; font-weight: bold; font-family: Georgia,serif;
}
.stand { position: absolute; width: 30px; height: 8px; bottom: 3px; left: 12px; border: 3px outset #ddd; background: #c0c0c0; }

.browser-window {
  position: absolute; left: 50%; top: 48%; transform: translate(-50%,-50%);
  width: min(890px, calc(100vw - 38px)); height: min(680px, calc(100vh - 74px));
  min-width: 320px; min-height: 350px; display: none; flex-direction: column;
  padding: 3px; background: var(--win-gray);
  border: 2px outset var(--win-light); box-shadow: 3px 3px 0 rgba(0,0,0,.4); z-index: 10;
}
.browser-window.open { display: flex; }
.browser-window.maximized {
  top: 0 !important; left: 0 !important; transform: none !important;
  width: 100vw !important; height: calc(100vh - 35px) !important;
}
.titlebar {
  height: 26px; display: flex; align-items: center; justify-content: space-between;
  padding: 3px 3px 3px 5px; color: #fff; font-weight: bold;
  background: linear-gradient(90deg,#000080,#1084d0); user-select: none; cursor: move;
}
.titlebar-name { display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; }
.tiny-page { display: inline-grid; place-items: center; width: 17px; height: 17px; background: white; color: navy; border: 1px solid #000; font: bold 11px Georgia,serif; }
.window-actions { display: flex; gap: 2px; }
.window-actions button {
  display: grid; place-items: center; width: 21px; height: 20px; padding: 0;
  border: 2px outset #fff; background: var(--win-gray); color: #000; font-weight: bold; line-height: 1;
}
.window-actions button:active { border-style: inset; }
.menu-row { display: flex; padding: 2px 4px; border-bottom: 1px solid #808080; }
.menu-row button { padding: 2px 7px; border: 0; background: transparent; }
.menu-row button:hover { background: #000080; color: #fff; }
.toolbar { display: flex; gap: 2px; padding: 4px; border-top: 1px solid #fff; border-bottom: 1px solid #808080; overflow-x: auto; }
.tool-button { min-width: 58px; padding: 2px 5px; border: 0; background: transparent; font-size: 11px; }
.tool-button span { display: block; font: bold 22px Arial,sans-serif; color: #134ca3; line-height: 1; }
.tool-button:active { border: 2px inset #fff; padding: 0 3px; }
.tool-button.muted span { color: #888; }
.address-row { display: flex; align-items: center; gap: 5px; padding: 4px; font-size: 12px; border-bottom: 2px groove #fff; }
.address-box { display: flex; align-items: center; gap: 5px; flex: 1; min-width: 0; height: 24px; padding: 2px 5px; background: #fff; border: 2px inset #eee; white-space: nowrap; overflow: hidden; }
.address-icon { display: grid; place-items: center; width: 16px; height: 16px; color: white; background: #000080; font: bold 10px Georgia,serif; }
.address-row > button { height: 24px; border: 2px outset #fff; background: var(--win-gray); }

.page-frame { flex: 1; min-height: 0; margin: 2px 0; overflow: auto; background: #070013; border: 2px inset #fff; }
.web-page {
  min-height: 100%; padding: 15px 18px 25px; color: #f9ecff; text-align: center;
  background:
    radial-gradient(circle, rgba(255,255,255,.7) 0 1px, transparent 1.6px) 0 0/43px 43px,
    radial-gradient(circle, rgba(111,206,255,.65) 0 1px, transparent 1.7px) 16px 20px/57px 57px,
    linear-gradient(#050014,#12002d 55%,#030008);
  font-family: "Times New Roman", Times, serif;
}
.marquee { overflow: hidden; border: 1px solid #684d8a; background: #05000a; color: #00ffdc; font: bold 12px "Courier New",monospace; padding: 4px 0; white-space: nowrap; }
.marquee span { display: inline-block; padding-left: 100%; animation: marquee 14s linear infinite; }
@keyframes marquee { to { transform: translateX(-100%); } }
.site-header h1 {
  margin: 15px 0 3px; font: italic bold clamp(40px, 7vw, 76px)/.8 Georgia,serif;
  letter-spacing: -4px; color: #fff; text-shadow: 3px 3px 0 #6a00ff, 6px 6px 0 #ff008f;
}
.site-header h1 span { color: #86f7ff; }
.subtitle { margin: 12px 0 7px; color: #ff9be3; font: italic 16px Georgia,serif; }
.divider { color: #ab80ff; letter-spacing: 2px; margin: 11px 0; }
.welcome-box {
  width: min(540px,100%); margin: 10px auto 16px; padding: 7px 14px;
  border: 1px dashed #dbb8ff; background: rgba(57,0,91,.55); box-shadow: 4px 4px 0 #000;
}
.welcome-box p { margin: 5px; }
.welcome-box strong { color: #00ffe5; }
.links-grid {
  width: min(680px,100%); margin: 0 auto; display: grid; grid-template-columns: repeat(2,1fr); gap: 10px;
}
.web-link {
  display: flex; align-items: center; gap: 12px; min-height: 63px; padding: 9px 14px;
  border: 3px outset #bfc3c8; background: #c0c0c0; color: #000080; text-align: left;
  font-family: "MS Sans Serif",Tahoma,sans-serif; text-decoration: none;
}
.web-link:hover { filter: brightness(1.12); }
.web-link:active { border-style: inset; transform: translate(1px,1px); }
.web-link:last-child { grid-column: 1 / -1; width: calc(50% - 5px); justify-self: center; }
.web-link b { display: block; font-size: 16px; text-decoration: underline; }
.web-link small { display: block; margin-top: 3px; color: #111; font-size: 11px; }
.link-symbol { display: grid; place-items: center; width: 39px; height: 39px; flex: 0 0 39px; border: 2px inset #fff; background: #000080; color: white; font: bold 24px Arial,sans-serif; }
.spotify .link-symbol { background: #006b37; }.soundcloud .link-symbol { background: #aa3e00; }.instagram .link-symbol { background: #6d146e; }.tiktok .link-symbol { background: #101010; }.youtube .link-symbol { background: #9c0000; }
.coming-soon { margin: 18px auto; color: #ffff00; font: bold 13px "Courier New",monospace; }
.blink { padding: 2px 4px; background: #ff0000; color: #fff; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { visibility: hidden; } }
.site-footer { color: #aaa; font: 12px "Courier New",monospace; }
.site-footer p { margin: 5px; }
.site-footer a { color: #00ffff; }.hot-pink { color: #ff00bf; }
.counter { display: inline-block; padding: 3px 6px; border: 2px inset #777; background: #050505; color: #ff4242; font: 18px "Courier New",monospace; letter-spacing: 3px; }
.construction { color: #ffd800; }
.statusbar { display: grid; grid-template-columns: 1fr 160px; gap: 3px; height: 23px; }
.statusbar span { padding: 3px 5px; border: 2px inset #fff; font-size: 11px; }

.taskbar {
  position: absolute; bottom: 0; left: 0; z-index: 50; display: flex; align-items: center; gap: 4px;
  width: 100%; height: 35px; padding: 3px; background: var(--win-gray); border-top: 2px outset #fff;
}
.start-button, .task-window { height: 28px; background: var(--win-gray); border: 2px outset #fff; font-weight: bold; }
.start-button:active, .start-button.active, .task-window:active, .task-window.active { border-style: inset; }
.flag { color: #000080; font-size: 18px; }
.task-divider { height: 25px; border-left: 1px solid #808080; border-right: 1px solid #fff; }
.task-window { width: 190px; text-align: left; overflow: hidden; white-space: nowrap; }
.task-window .tiny-page { display: inline-grid; vertical-align: middle; margin-right: 4px; }
.tray { margin-left: auto; display: flex; align-items: center; gap: 8px; height: 27px; padding: 2px 8px; border: 2px inset #fff; font-size: 12px; white-space: nowrap; }
.start-menu {
  position: absolute; left: 3px; bottom: 34px; z-index: 60; display: none; width: 245px; min-height: 150px;
  border: 2px outset #fff; background: var(--win-gray); box-shadow: 2px 2px 0 #000;
}
.start-menu.open { display: flex; }
.start-side { width: 29px; padding: 7px 4px; background: #808080; color: #c0c0c0; font-weight: bold; letter-spacing: 1px; writing-mode: vertical-rl; transform: rotate(180deg); }
.start-items { flex: 1; padding: 7px 4px; }
.start-items button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; background: transparent; text-align: left; }
.start-items button:hover { background: #000080; color: #fff; }
.start-items button span { font-size: 22px; }
.menu-line { border-top: 1px solid #808080; border-bottom: 1px solid #fff; margin: 4px; }
.shutdown { position: fixed; inset: 0; z-index: 100; display: none; place-items: center; align-content: center; gap: 18px; color: #ff9fef; background: #000; font: 24px "Courier New",monospace; text-align: center; }
.shutdown.show { display: grid; }
.shutdown button { padding: 8px 15px; color: #fff; border: 1px solid #682c72; background: #160019; }

@media (max-width: 600px) {
  .desktop-icon { top: 24px; left: 15px; }
  .browser-window { width: calc(100vw - 10px); height: calc(100vh - 48px); top: 5px; left: 5px; transform: none; }
  .menu-row button { padding-inline: 5px; }
  .toolbar { padding: 2px; }.tool-button { min-width: 50px; font-size: 9px; }.tool-button span { font-size: 17px; }
  .address-row > span { display: none; }
  .web-page { padding: 12px 10px 22px; }
  .links-grid { grid-template-columns: 1fr; }
  .web-link:last-child { grid-column: auto; width: 100%; }
  .site-header h1 { font-size: 45px; }
  .statusbar { grid-template-columns: 1fr 95px; }
  .task-window { width: min(165px,42vw); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee span, .blink { animation: none; }
  .marquee span { padding-left: 0; }
}

/* Desktop Files shortcut */
.files-shortcut { left: 145px; }
.folder-desktop-icon {
  position: relative; display: block; width: 56px; height: 44px; margin: 4px 0;
  border: 3px outset #ffe56d; background: #f5c928; filter: drop-shadow(2px 2px 0 #004747);
}
.folder-desktop-icon::before {
  content: ""; position: absolute; left: 2px; top: -11px; width: 26px; height: 11px;
  border: 3px outset #ffe56d; border-bottom: 0; background: #eebf1d;
}
.folder-desktop-icon span { position: absolute; inset: 8px 5px 5px; border: 2px inset #fff2a6; }

/* maybeline.net browser home */
.web-page { min-height: 100%; padding: 0; background: #d7d3c8; color: #000; font-family: "MS Sans Serif",Tahoma,sans-serif; text-align: left; }
.browser-home {
  min-height: 100%; padding: 38px clamp(18px,6vw,64px) 24px;
  background:
    linear-gradient(90deg,rgba(0,0,128,.055) 1px,transparent 1px) 0 0/16px 16px,
    linear-gradient(rgba(0,0,128,.055) 1px,transparent 1px) 0 0/16px 16px,
    #ebe8de;
}
.browser-mark {
  width: 58px; height: 58px; margin: 0 auto 8px; padding: 5px; border: 3px outset #fff;
  background: #c0c0c0; box-shadow: 4px 4px 0 #737373;
}
.browser-mark span {
  display: grid; place-items: center; width: 100%; height: 100%;
  color: #fff; background: linear-gradient(135deg,#00005c,#4a09b7,#ff00a8);
  font: italic bold 30px Georgia,serif; text-shadow: 2px 2px #000;
}
.browser-home h1 { margin: 0; color: #000080; text-align: center; font: italic bold clamp(34px,6vw,58px) Georgia,serif; letter-spacing: -2px; text-shadow: 2px 2px #fff; }
.browser-tagline { margin: 2px 0 22px; color: #555; text-align: center; font: 12px "Courier New",monospace; }
.web-search { display: flex; width: min(650px,100%); height: 42px; margin: 0 auto 34px; }
.web-search input {
  flex: 1; min-width: 0; padding: 7px 11px; border: 3px inset #fff; border-radius: 0;
  background: #fff; color: #000; font: 16px "Courier New",monospace;
}
.web-search button { min-width: 92px; border: 3px outset #fff; background: #c0c0c0; color: #000; font-weight: bold; }
.web-search button:active { border-style: inset; }
.saved-tabs { width: min(720px,100%); margin: 0 auto; border: 2px outset #fff; background: #c0c0c0; box-shadow: 3px 3px 0 #777; }
.saved-tabs-heading {
  display: flex; align-items: center; justify-content: space-between; padding: 6px 9px;
  color: #fff; background: linear-gradient(90deg,#000080,#6a2ca0);
}
.saved-tabs-heading h2 { margin: 0; font-size: 16px; }
.saved-tabs-heading span { font-size: 11px; }
.tab-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; padding: 7px; background: #808080; }
.saved-tab {
  display: flex; align-items: center; gap: 11px; min-height: 66px; padding: 8px 10px;
  border: 2px outset #fff; background: #d4d0c8; color: #000; text-decoration: none;
}
.saved-tab:hover { background: #000080; color: #fff; }
.saved-tab:hover small { color: #d6d6ff; }
.saved-tab:active { border-style: inset; }
.saved-tab:last-child { grid-column: 1 / -1; }
.saved-tab b,.saved-tab small { display: block; }
.saved-tab small { margin-top: 3px; color: #555; font: 11px "Courier New",monospace; }
.tab-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; color: #fff; border: 2px inset #fff; background: #000080; font: bold 23px Arial,sans-serif; }
.saved-tab.spotify .tab-icon { background: #096f38; }.saved-tab.soundcloud .tab-icon { background: #aa3e00; }.saved-tab.instagram .tab-icon { background: #722272; }.saved-tab.tiktok .tab-icon { background: #111; }.saved-tab.youtube .tab-icon { background: #a00000; }
.browser-home-footer { margin-top: 28px; color: #666; text-align: center; font: 11px "Courier New",monospace; }
.search-results-panel {
  width: min(760px,100%); margin: -18px auto 24px; border: 2px outset #fff;
  background: #fff; color: #000; box-shadow: 3px 3px 0 #777;
}
.search-results-panel[hidden] { display: none; }
.search-results-titlebar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 30px; padding: 4px 6px; color: #fff; background: linear-gradient(90deg,#000080,#1084d0);
}
.search-results-titlebar button { padding: 3px 7px; border: 2px outset #fff; background: #c0c0c0; color: #000; font-size: 11px; }
.search-results-titlebar button:active { border-style: inset; }
.search-results-panel .gsc-control-cse { padding: 8px; border: 0; font-family: Arial,sans-serif; }
.search-results-panel .gsc-search-box { display: none; }
.search-results-panel .gsc-result { text-align: left; }
.search-results-panel .gs-title { font-size: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* vintage file manager */
.files-window { left: 54%; top: 51%; width: min(940px,calc(100vw - 38px)); height: min(620px,calc(100vh - 74px)); }
.tiny-folder { position: relative; display: inline-block; width: 18px; height: 13px; margin: 3px 4px 0 0; border: 1px solid #6e5500; background: #ffd43d; vertical-align: middle; }
.tiny-folder::before { content: ""; position: absolute; left: 1px; top: -5px; width: 8px; height: 5px; border: 1px solid #6e5500; border-bottom: 0; background: #ffd43d; }
.files-toolbar { display: flex; align-items: center; min-height: 43px; gap: 2px; padding: 3px; overflow-x: auto; border-top: 1px solid #fff; border-bottom: 1px solid #808080; }
.files-toolbar button { min-width: 42px; height: 34px; border: 0; background: transparent; font-size: 16px; }
.files-toolbar button span { font-size: 11px; }
.files-toolbar button:hover { border: 2px outset #fff; }
.toolbar-separator { height: 31px; border-left: 1px solid #808080; border-right: 1px solid #fff; margin: 0 3px; }
.files-address { display: flex; align-items: center; gap: 5px; padding: 4px; border-bottom: 2px groove #fff; font-size: 12px; }
.files-address > div { flex: 1; height: 25px; padding: 3px 7px; border: 2px inset #fff; background: #fff; }
.files-body { display: grid; grid-template-columns: 190px 1fr; flex: 1; min-height: 0; margin: 2px 0; border: 2px inset #fff; background: #fff; }
.files-sidebar { overflow-y: auto; padding-bottom: 8px; border-right: 2px groove #fff; background: #d4d0c8; }
.sidebar-title { padding: 7px 9px; color: #fff; background: linear-gradient(90deg,#000080,#1084d0); font-weight: bold; }
.side-location { display: flex; align-items: center; gap: 7px; width: 100%; padding: 8px 10px; border: 0; background: transparent; text-align: left; }
.side-location span { width: 24px; font-size: 18px; text-align: center; }
.side-location:hover,.side-location.active { color: #fff; background: #000080; }
.sidebar-divider { margin: 5px 8px; border-top: 1px solid #808080; border-bottom: 1px solid #fff; }
.files-content { min-width: 0; overflow: auto; background: #fff; }
.files-column-head,.file-row { display: grid; grid-template-columns: minmax(190px,1.5fr) minmax(150px,1fr) 120px; }
.files-column-head { position: sticky; top: 0; z-index: 1; background: #c0c0c0; }
.files-column-head span { padding: 5px 7px; border: 2px outset #fff; font-size: 11px; }
.file-row { align-items: center; width: 100%; min-height: 35px; padding: 0; border: 0; background: #fff; text-align: left; }
.file-row > * { padding: 5px 7px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-style: normal; font-size: 12px; }
.file-row:hover,.file-row.selected { color: #fff; background: #000080; outline: 1px dotted #fff; outline-offset: -2px; }
.file-row span { display: flex; align-items: center; gap: 8px; }
.list-folder { position: relative; width: 22px; height: 15px; flex: 0 0 22px; border: 1px solid #876900; background: #ffd43d; }
.list-folder::before { content: ""; position: absolute; left: 1px; top: -5px; width: 9px; height: 5px; border: 1px solid #876900; border-bottom: 0; background: #ffd43d; }
.folder-empty { display: grid; justify-items: center; align-content: center; min-height: 300px; color: #666; }
.folder-empty[hidden] { display: none; }
.large-folder { position: relative; width: 72px; height: 48px; border: 3px outset #ffe56d; background: #f5c928; filter: grayscale(.15); }
.large-folder::before { content: ""; position: absolute; left: 3px; top: -16px; width: 31px; height: 16px; border: 3px outset #ffe56d; border-bottom: 0; background: #eebf1d; }
.folder-empty p { margin: 18px 0 2px; color: #222; font-weight: bold; }
.folder-empty small { font-size: 11px; }
.files-status { margin-top: auto; }

/* sick kvnt retro picture folder */
.retro-gallery { min-height: 100%; padding: 7px; background: #fff; }
.retro-gallery[hidden],.music-library[hidden],.floating-viewer[hidden] { display: none; }
.gallery-note { margin-bottom: 7px; padding: 4px 6px; border: 1px inset #fff; background: #ffffd9; font-size: 12px; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(112px,1fr)); gap: 10px 7px; align-items: start; }
.retro-photo { min-width: 0; padding: 4px; border: 1px solid transparent; background: transparent; color: #000; text-align: center; }
.retro-photo:hover,.retro-photo.selected { border: 1px dotted #000; background: #d9e7ff; }
.retro-photo.dragging { opacity: .45; }
.side-location.drag-allowed { box-shadow: inset 0 0 0 2px #00a000; }
.side-location.drag-over { color: #fff; background: #008000; outline: 2px dotted #fff; outline-offset: -4px; }
.retro-photo > span {
  position: relative; display: block; width: 100%; aspect-ratio: 1; overflow: hidden;
  padding: 4px; border: 2px outset #fff; background: #c0c0c0;
}
.retro-photo > span::after,.photo-viewer-canvas::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .24;
  background: repeating-linear-gradient(0deg,rgba(255,255,255,.15) 0 1px,rgba(0,0,0,.12) 1px 3px);
  mix-blend-mode: soft-light;
}
.retro-photo img {
  width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated;
  filter: blur(.55px) contrast(1.12) saturate(.72) sepia(.16) brightness(.94);
  transform: scale(1.02);
}
.retro-photo b { display: block; overflow: hidden; margin-top: 4px; font-size: 11px; font-weight: normal; white-space: nowrap; text-overflow: ellipsis; }
.floating-viewer { position: fixed; z-index: 40; display: flex; flex-direction: column; padding: 3px; border: 2px outset #fff; background: #c0c0c0; box-shadow: 4px 4px 0 rgba(0,0,0,.45); }
.floating-titlebar { cursor: move; touch-action: none; user-select: none; }
.photo-viewer { left: 50%; top: 50%; width: min(560px,calc(100vw - 24px)); height: min(480px,calc(100vh - 70px)); transform: translate(-50%,-50%); }
.photo-viewer-bar { display: flex; align-items: center; justify-content: space-between; min-height: 25px; padding: 2px 3px 2px 6px; color: #fff; background: linear-gradient(90deg,#000080,#1084d0); font-size: 12px; }
.photo-viewer-bar button { width: 22px; height: 20px; padding: 0; border: 2px outset #fff; background: #c0c0c0; color: #000; font-weight: bold; }
.photo-viewer-canvas { position: relative; display: grid; place-items: center; flex: 1; min-height: 0; overflow: hidden; margin-top: 3px; border: 2px inset #fff; background: #181818; }
.photo-viewer-canvas img { max-width: 100%; max-height: 100%; object-fit: contain; image-rendering: pixelated; filter: blur(.4px) contrast(1.08) saturate(.76) sepia(.12); }

/* Music folder and movable DVD-style audio player */
.music-library { min-height: 100%; padding: 7px; background: #fff; }
.music-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(105px,1fr)); gap: 14px 8px; align-items: start; }
.music-file { padding: 5px; border: 1px solid transparent; background: transparent; text-align: center; }
.music-file:hover,.music-file.selected { border: 1px dotted #000; background: #d9e7ff; }
.media-file-icon { position: relative; display: grid; place-items: center; width: 55px; height: 46px; margin: 0 auto 5px; border: 3px outset #ddd; background: #222; color: #4effc4; font-size: 23px; text-shadow: 0 0 5px #4effc4; }
.media-file-icon::before,.media-file-icon::after { content: ""; position: absolute; top: 5px; bottom: 5px; width: 7px; background: repeating-linear-gradient(#ddd 0 4px,#222 4px 8px); }
.media-file-icon::before { left: 3px; }.media-file-icon::after { right: 3px; }
.music-file b { display: block; overflow: hidden; font-size: 11px; font-weight: normal; text-overflow: ellipsis; white-space: nowrap; }
.media-player { left: 50%; top: 48%; width: min(350px,calc(100vw - 18px)); transform: translate(-50%,-50%); color: #eee; background: #242424; border-color: #aaa; }
.media-player-title { display: flex; justify-content: space-between; align-items: center; min-height: 26px; padding: 2px 3px 2px 7px; color: #fff; background: linear-gradient(90deg,#3b003b,#a00078); font-size: 12px; }
.media-player-title button { width: 22px; height: 20px; padding: 0; border: 2px outset #ddd; background: #c0c0c0; font-weight: bold; }
.player-screen { display: grid; grid-template-columns: 46px 1fr; grid-template-rows: 1fr 1fr; align-items: center; min-height: 82px; margin: 7px; padding: 8px; border: 3px inset #777; color: #52ffbd; background: radial-gradient(circle at 25% 50%,#33224c,#070b0b 68%); font-family: "Courier New",monospace; text-shadow: 0 0 6px #19bd78; }
.screen-disc { grid-row: 1 / 3; display: grid; place-items: center; width: 38px; height: 38px; border: 3px dotted #52ffbd; border-radius: 50%; }
.player-screen strong { overflow: hidden; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }.player-screen small { font-size: 10px; }
.player-seek { width: calc(100% - 14px); margin: 0 7px; accent-color: #e000a8; }.player-time { display: flex; justify-content: space-between; padding: 0 9px 5px; color: #7fffd4; font: 10px "Courier New",monospace; }
.player-buttons,.player-effects { display: flex; justify-content: center; gap: 5px; padding: 3px 7px; }
.player-buttons button,.player-effects button { min-width: 45px; padding: 5px; border: 2px outset #ccc; background: #bdbdbd; color: #111; font-weight: bold; font-size: 11px; }
.player-buttons button:active,.player-effects button:active,.player-effects button.active { border-style: inset; background: #e000a8; color: #fff; }
.player-volume { display: flex; align-items: center; gap: 7px; margin: 5px 9px 8px; color: #7fffd4; font: 11px "Courier New",monospace; }.player-volume input { flex: 1; accent-color: #52ffbd; }

@media (max-width: 600px) {
  .files-shortcut { left: 120px; }
  .browser-home { padding: 24px 10px; }
  .tab-grid { grid-template-columns: 1fr; }
  .saved-tab:last-child { grid-column: auto; }
  .web-search button { min-width: 70px; }
  .files-window { width: calc(100vw - 10px); height: calc(100vh - 48px); left: 5px; top: 5px; }
  .files-body { grid-template-columns: 112px minmax(360px,1fr); }
  .side-location { padding: 7px 4px; font-size: 11px; }
  .side-location span { width: 21px; }
  .files-toolbar button span { display: none; }
  .files-address > span { display: none; }
  .gallery-grid { grid-template-columns: repeat(2,minmax(100px,1fr)); }
  .photo-viewer { width: calc(100vw - 12px); height: calc(100vh - 52px); }
}