/* ---- Logo palette (pulled from the Cloud Ary artwork) ---------------- */
  :root {
    --ary-pink: #e83fbf;
    --ary-sky: #9ccbe3;
    --taskbar-h: 36px;
  }

  /* ---- Video desktop ---------------------------------------------------- */
  .app-desktop { position: relative; background-color: #000; }

  .bg-video {
    position: fixed; inset: 0; overflow: hidden; z-index: 0;
    pointer-events: none; background: #000 url("https://i.ytimg.com/vi/9PM3YqpTuHE/hqdefault.jpg") center / cover no-repeat;
  }
  .bg-video iframe {
    position: absolute; top: 50%; left: 50%;
    width: 100vw; height: 56.25vw;          /* 16:9 */
    min-height: 100vh; min-width: 177.78vh; /* always cover */
    transform: translate(-50%, -50%) scale(1.15); /* crop YouTube chrome */
    border: 0;
  }
  /* CRT tint + scanlines so the windows stay readable */
  .bg-video::after {
    content: ""; position: absolute; inset: 0;
    background:
      repeating-linear-gradient(to bottom, rgba(0,0,0,.18) 0 1px, transparent 1px 3px),
      radial-gradient(ellipse at center, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%);
  }

  /* ---- Logo, top-left --------------------------------------------------- */
  .logo {
    position: fixed; top: 14px; left: 14px; z-index: 50;
    width: 128px; height: 128px; display: block;
    filter: drop-shadow(3px 3px 0 #000);
  }
  .logo img { width: 100%; height: 100%; display: block; }

  /* ---- Desktop icons ---------------------------------------------------- */
  .icons {
    position: fixed; top: 160px; left: 14px; z-index: 5;
    display: flex; flex-direction: column; gap: 14px; width: 128px; align-items: center;
  }
  .icon {
    width: 76px; display: flex; flex-direction: column; align-items: center; gap: 4px;
    color: #fff; text-align: center; cursor: pointer; background: none; border: 0;
    font-family: var(--font-family); font-size: var(--font-size);
  }
  .icon span { padding: 1px 2px; text-shadow: 1px 1px 0 #000; }
  .icon.social { text-decoration: none !important; color: #fff !important; }
  .brand { width: 32px; height: 32px; display: grid; place-items: center; box-sizing: border-box; }
  .brand svg { width: 22px; height: 22px; }
  .brand.ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
  .brand.tt { background: #000; }
  .brand.tt svg { width: 20px; height: 20px; }
  .brand.yt svg, .brand.sp svg { width: 32px; height: 32px; }
  .brand.file svg { width: 32px; height: 32px; }
  .icon:focus { outline: 0; }
  .icon:focus span { background: var(--bg-selected); outline: 1px dotted #fff; text-shadow: none; }

  /* ---- Windows on the desktop ------------------------------------------ */
  .win-window.floating { position: absolute; z-index: 10; margin: 0; display: flex; flex-direction: column; box-sizing: border-box; }
  .win-window.floating > .inner { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .win-window.floating .pad { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .grow { flex: 1 1 auto; min-height: 0; }
  .win-window.sized .bio { max-height: none; }
  .tracks.grow, .tab-panel { overflow-y: auto; }
  /* Win98 size grip, bottom-right corner */
  .size-grip {
    position: absolute; right: 2px; bottom: 2px; width: 13px; height: 13px; cursor: nwse-resize; z-index: 3; touch-action: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13' shape-rendering='crispEdges'%3E%3Cpath d='M12 1L1 12M12 5L5 12M12 9L9 12' stroke='%23fff'/%3E%3Cpath d='M12 2L2 12M12 6L6 12M12 10L10 12' stroke='%23808080'/%3E%3C/svg%3E") no-repeat;
  }
  .win-window.hidden { display: none; }
  .win-window__header { cursor: grab; padding-right: 60px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .win-window__header img { width: 16px; height: 16px; }
  .win-window__header .buttons button + button { margin-left: 0; }
  .win-window__header .buttons .button-close { margin-left: 2px; }
  .win-window.dragging .win-window__header { cursor: grabbing; }
  .win-window.dragging { opacity: .92; }
  .pad { padding: 6px; }
  .row { display: flex; gap: 6px; }

  /* Bio memo */
  .bio { max-height: 290px; overflow-y: auto; user-select: text; -webkit-user-select: text; }
  .bio p + p { margin-top: 8px; }
  .statusbar { display: flex; gap: 2px; }
  .statusbar .cell { flex: 1; white-space: nowrap; }
  .statusbar .cell.fit { flex: 0 0 auto; }

  /* Player */
  .screen {
    padding: 6px 8px 8px; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: end;
  }
  .now { min-width: 0; }
  .now-title { font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .now-sub { color: var(--color-disabled); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .screen .time { font-size: 20px; font-weight: bold; line-height: 1; font-variant-numeric: tabular-nums; }
  .viz { grid-column: 1 / -1; display: block; width: 100%; height: 44px; margin-top: 6px; }
  /* Win98 progress bar: silver well filled with navy blocks */
  .seek { height: 14px; margin-top: 4px; padding: 2px; background: var(--button-bg); }
  .seek-fill { height: 100%; width: 0; background: repeating-linear-gradient(to right, var(--bg-selected) 0 8px, transparent 8px 10px); }
  .sc-logo { width: 22px; height: 16px; flex: none; }
  #prev, #playpause, #next { width: 28px; }

  .tracks td { padding: 4px 6px; }
  .tracks tr { cursor: pointer; }
  .tracks tr:hover, .tracks tr.sel { background: var(--bg-selected); color: var(--color-selected); }
  .tracks tr:hover a, .tracks tr.sel a { color: var(--color-selected); }
  .tracks .num { width: 18px; color: var(--color-disabled); }
  .tracks tr:hover .num, .tracks tr.sel .num { color: var(--color-selected); }
  .tracks .meta { text-align: right; white-space: nowrap; opacity: .8; }
  .tracks .acts { width: 1%; white-space: nowrap; padding-left: 0; }
  .tracks .act { display: inline-grid; place-items: center; width: 22px; height: 20px; min-width: 0; padding: 0; vertical-align: middle; }
  .tracks .act + .act { margin-left: 2px; }
  .tracks .act svg { width: 11px; height: 11px; }
  .tracks .title { font-weight: bold; }
  .tracks .sub { font-size: 10px; opacity: .8; }

  /* DJ set window */
  .set-thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: #000 center / cover no-repeat; }
  .set-thumb .play {
    position: absolute; inset: 0; margin: auto; width: 64px; height: 28px;
  }
  .set-thumb:hover { filter: brightness(1.1); }
  .kv { display: grid; grid-template-columns: 92px 1fr; gap: 3px 8px; padding: 6px; line-height: 150%; }
  .kv dt { color: var(--color-disabled); }
  .kv dd { user-select: text; -webkit-user-select: text; overflow-wrap: anywhere; }

  /* Tabs (properties dialog) */
  .tabs { display: flex; gap: 0; padding: 4px 4px 0; position: relative; z-index: 1; }
  .tab {
    font-family: var(--font-family); font-size: var(--font-size); color: var(--color);
    background: var(--button-bg); padding: 3px 8px; margin-right: -1px; cursor: pointer;
    border: 1px solid var(--button-border-left); border-bottom: 0; border-right-color: #000;
    box-shadow: inset -1px 0 0 #808080; position: relative; top: 2px;
  }
  .tab[aria-selected="true"] { top: 0; padding-bottom: 5px; z-index: 2; }
  .tab-panel { margin: 0 4px 4px; padding: 8px; }
  .tab-panel[hidden] { display: none; }

  /* ---- Taskbar ---------------------------------------------------------- */
  .win-taskbar-wrapper { position: fixed; }
  .win-taskbar { height: var(--taskbar-h); box-sizing: border-box; }
  .win-taskbar > .win-button, .tasks .win-button, .tray { height: 28px; box-sizing: border-box; }
  .start { font-weight: bold; padding-left: 4px; }
  .start img { width: 18px; height: 18px; }
  .tasks { display: flex; gap: 3px; flex: 1; min-width: 0; overflow: hidden; }
  .tasks .win-button { min-width: 0; flex: 0 1 150px; white-space: nowrap; text-overflow: ellipsis; }
  .tasks .win-button img { width: 14px; height: 14px; flex: none; }
  .tasks .win-button span { overflow: hidden; text-overflow: ellipsis; }
  .tray { display: flex; align-items: center; gap: 8px; padding: 3px 8px; margin-right: 2px;
    border: 1px solid var(--forms-border-left); border-right-color: var(--forms-border-right); border-bottom-color: var(--forms-border-right); }
  .tray .dot { width: 7px; height: 7px; background: #e0002a; box-shadow: inset -1px -1px 0 #800000; }

  .start-menu { position: fixed; left: 2px; bottom: calc(var(--taskbar-h) - 1px); z-index: 9999; display: none; }
  .start-menu.open { display: block; }
  .start-menu .win-start-menu__sidebar span {
    writing-mode: vertical-rl; transform: rotate(180deg); color: #fff; font-weight: bold; font-size: 16px; letter-spacing: 1px;
  }
  .start-menu .win-start-menu__sidebar span b { color: var(--ary-sky); }
  .win-start-menu__item { text-decoration: none !important; color: var(--color) !important; gap: 9px; }
  .win-start-menu__item:hover { color: var(--color-selected) !important; }
  .win-start-menu__item svg { width: 22px; height: 22px; flex: none; }

  /* ---- Small screens: stack windows, let the page scroll --------------- */
  @media (max-width: 900px) {
    html { overflow: auto; height: auto; }
    body { overflow: visible; height: auto; }   /* only the root scrolls, so touches on windows scroll the page */
    .app-desktop { height: auto; min-height: 100%; overflow: visible; padding: 200px 16px calc(var(--taskbar-h) + 24px); box-sizing: border-box; }
    .logo { position: absolute; width: 112px; height: 112px; left: 16px; }
    .icons { position: absolute; top: 36px; left: 140px; right: 16px; width: auto; flex-direction: row; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
    .icon.social { width: 52px; }
    .win-window.floating { position: relative; left: auto !important; top: auto !important; width: 100% !important; margin: 0 0 16px; }
    .win-window.hidden { display: block; }
    .size-grip { display: none; }
    :root { --font-size: 13px; --font-size-header: 14px; --taskbar-h: 50px; }
    .win-memo p.lead { font-size: 16px !important; }
    .bio, .win-window.sized .bio { max-height: none; overflow: visible; }
    #prev, #playpause, #next { width: 48px; height: 44px; font-size: 16px; }
    .win-window .row .win-button { min-height: 44px; }
    .tracks td { padding: 10px 8px; }
    .tracks .act { width: 40px; height: 40px; }
    .tracks .act svg { width: 14px; height: 14px; }
    .tab { padding: 11px 14px; }
    .tab[aria-selected="true"] { padding-bottom: 13px; }
    .kv { gap: 6px 10px; }
    .kv a { display: inline-block; padding: 12px 0; margin: -12px 0; }
    .set-thumb .play { width: 80px; height: 36px; }
    .win-taskbar > .win-button, .tray { height: 42px; }
    .start { padding: 0 12px; }
    .win-window__header .buttons { display: none; }
    .win-window__header { cursor: default; padding-right: 2px; }
    .tasks { display: none; }
  }

/* Spotify embed window (home page) */
.spotify { display: block; width: 100%; min-height: 352px; border: 0; background: #121212; }