:root[data-theme="night"]{
    --bg:#241d33;
    --bg-2:#2c2440;
    --panel:#352b4c;
    --panel-edge:#473a63;
    --text:#f3ead9;
    --text-muted:#ad9fc9;
    --accent:#f3b27a;
    --accent-2:#e6a0b8;
    --sky-1:#1a1430;
    --sky-2:#3c3160;
    --frame:#4a3b5c;
    --sill:#382c49;
    --shadow:rgba(10,6,20,0.55);
    --win-bar:#2a2040;
    --win-bar-border:#3d3060;
    --win-body:#1e1730;
  }
  :root[data-theme="day"]{
    --bg:#f7ecd9;
    --bg-2:#f1e2c4;
    --panel:#fbf3e2;
    --panel-edge:#e3d2ad;
    --text:#4a3b32;
    --text-muted:#8a7763;
    --accent:#d9824d;
    --accent-2:#c97a93;
    --sky-1:#aee0e6;
    --sky-2:#f6d8a3;
    --frame:#caa977;
    --sill:#b08e5d;
    --shadow:rgba(90,70,40,0.22);
    --win-bar:#d6c9b0;
    --win-bar-border:#c4b49a;
    --win-body:#f7ecd9;
  }

  *{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; width:100%; height:100%; }
  body{
    background:var(--bg);
    color:var(--text);
    font-family:'Nunito', sans-serif;
    transition: background .5s ease, color .5s ease;
    overflow:hidden;
    user-select:none;
  }

  h1,h2,h3{ font-family:'Fredoka', sans-serif; font-weight:600; margin:0; }
  a{ color:var(--accent); text-decoration:none; }
  a:hover{ text-decoration:underline; }
  .label{ font-family:'Space Mono', monospace; letter-spacing:.08em; text-transform:uppercase; font-size:.72rem; color:var(--text-muted); }
  button{ font-family:inherit; cursor:pointer; }
  :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

  /* ===== AURORA BACKGROUND ===== */
  .aurora-canvas{
    position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  }
  /* ── Live Wallpaper ── sits above the aurora canvas (which is purely
     decorative for the default look) but still behind every desktop
     window, widget, and dock element. Hidden + empty until the person
     picks one from the wallpaper window. */
  .live-wallpaper{
    position:fixed; inset:0; z-index:1;
    width:100%; height:100%; object-fit:cover;
    pointer-events:none; opacity:0;
    transition:opacity .6s ease;
  }
  .live-wallpaper.active{ opacity:1; }
  /* the aurora blobs are decoration for the default background only —
     hide them so they don't drift visibly over real video footage */
  :root.wallpaper-active .aurora-canvas{ display:none; }

  /* ── Live Wallpaper Picker tiles ── */
  .wallpaper-tile{
    position:relative; aspect-ratio:16/10; border-radius:10px; overflow:hidden;
    background:var(--bg-2); border:2px solid var(--panel-edge);
    cursor:pointer; padding:0; display:flex; align-items:flex-end;
    transition:border-color .15s ease, transform .15s ease;
  }
  .wallpaper-tile:hover{ transform:scale(1.03); }
  .wallpaper-tile.active-pick{ border-color:var(--accent); }
  .wallpaper-tile-video{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  }
  .wallpaper-tile-default{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font-size:1.3rem; color:var(--text-muted);
  }
  .wallpaper-tile-label{
    position:relative; z-index:1; width:100%;
    font-family:'Space Mono', monospace; font-size:.55rem; color:#fff;
    background:linear-gradient(transparent, rgba(0,0,0,.7));
    padding:14px 6px 5px; line-height:1.3; text-align:left;
  }
  .aurora-blob{
    position:absolute; border-radius:50%;
    filter:blur(80px); opacity:.28;
    animation: blob-float var(--dur, 18s) ease-in-out infinite;
    transform-origin:center;
  }
  :root[data-theme="night"] .aurora-blob{ opacity:.22; }
  :root[data-theme="day"]   .aurora-blob{ opacity:.25; filter:blur(90px) saturate(1.3); }

  @keyframes blob-float{
    0%  { transform: translate(0,      0)      scale(1);    }
    25% { transform: translate(var(--tx1), var(--ty1)) scale(1.08); }
    50% { transform: translate(var(--tx2), var(--ty2)) scale(.94); }
    75% { transform: translate(var(--tx3), var(--ty3)) scale(1.05); }
    100%{ transform: translate(0,      0)      scale(1);    }
  }

  /* ===== DESKTOP CANVAS ===== */
  .desktop{
    position:relative; width:100vw; height:100vh;
    overflow:hidden;
    display:flex; align-items:center; justify-content:center;
  }

  .hero{
    display:flex; flex-direction:column; align-items:center;
    text-align:center; gap:14px; pointer-events:none;
    padding:24px; position:relative; z-index:2;
  }
  .scene{ width:min(420px, 80vw); height:auto; transition:opacity .3s ease; }
  /* hide the whole hero block (cat scene, title, tagline, now-playing
     pill, visualizer) and the polaroid garland while a live wallpaper
     plays — one class toggle, so flipping back to "default" instantly
     brings it all back with no extra markup juggling needed */
  :root.wallpaper-active .hero,
  :root.wallpaper-active .garland{ display:none; }
  .hero h1{ font-size:2rem; pointer-events:auto; }
  .hero h1 .highlight{ color:var(--accent); }
  .tagline{ color:var(--text-muted); font-size:1rem; max-width:400px; margin:0; }

  /* ===== NOW PLAYING PILL + MARQUEE ===== */
  .now-playing-wrap{
    display:flex; flex-direction:column; align-items:center; gap:10px;
    pointer-events:none;
    width:min(340px,80vw);
  }

  .now-playing{
    font-family:'Space Mono', monospace; font-size:.75rem; color:var(--text-muted);
    background:var(--panel); border:1px solid var(--panel-edge);
    padding:5px 16px 5px 10px; border-radius:999px;
    display:flex; align-items:center; gap:8px;
    width:100%; overflow:hidden;
    box-shadow:0 2px 12px var(--shadow);
  }

  .np-dot{
    flex:none; width:6px; height:6px; border-radius:50%;
    background:var(--accent);
    animation:np-pulse 1.8s ease-in-out infinite;
    transition:background .3s ease;
  }
  .np-dot.idle{ background:var(--text-muted); animation:none; }

  @keyframes np-pulse{
    0%,100%{ opacity:1; transform:scale(1); }
    50%    { opacity:.4; transform:scale(.7); }
  }

  /* Marquee */
  .np-ticker{
    overflow:hidden; flex:1; min-width:0; position:relative;
  }
  .np-inner{
    display:flex; white-space:nowrap;
    /* JS drives the transform */
  }
  /* only fade the right trailing edge */
  .np-ticker{
    mask-image:linear-gradient(to right,black 0%,black 78%,transparent 100%);
    -webkit-mask-image:linear-gradient(to right,black 0%,black 78%,transparent 100%);
  }
  .np-item{ padding:0; flex:none; }

  /* ===== VISUALIZER ===== */
  .visualizer-wrap{
    width:100%; height:38px;
    margin-top:8px;
    opacity:0; transition:opacity .5s ease;
    pointer-events:none;
  }
  .visualizer-wrap.active{ opacity:1; }
  #vizCanvas{
    width:100%; height:38px; display:block;
    border-radius:6px;
  }

  footer{
    position:fixed; bottom:0; left:0; right:0;
    display:flex; flex-direction:column; align-items:center; gap:8px;
    padding:14px 24px 18px; color:var(--text-muted); font-size:.82rem;
    pointer-events:none; z-index:5;
  }
  .socials{ display:flex; gap:14px; pointer-events:auto; }
  .socials a{ color:var(--text-muted); display:flex; }
  .socials a:hover{ color:var(--accent); }
  .socials svg{ width:18px; height:18px; }

  /* ===== BGM "CLICK ME" BUBBLE ===== */
  .bgm-bubble{
    position:absolute; top:calc(100% + 10px); right:-6px;
    background:var(--panel); border:1px solid var(--panel-edge);
    color:var(--text); font-family:'Nunito', sans-serif; font-weight:700;
    font-size:.78rem; white-space:nowrap;
    padding:7px 13px; border-radius:999px;
    box-shadow:0 6px 18px var(--shadow);
    pointer-events:none;
    animation: bgm-bob 1.8s ease-in-out infinite;
    z-index:250;
  }
  .bgm-bubble.hide{ animation:none; opacity:0; transform:translateY(-6px) scale(.9); transition:opacity .25s ease, transform .25s ease; }
  .bgm-bubble-arrow{
    position:absolute; top:-5px; right:18px;
    width:10px; height:10px;
    background:var(--panel); border-left:1px solid var(--panel-edge); border-top:1px solid var(--panel-edge);
    transform:rotate(45deg);
  }
  @keyframes bgm-bob{
    0%,100%{ transform:translateY(0); }
    50%    { transform:translateY(-4px); }
  }

  /* ===== TOP CONTROLS ===== */
  .top-controls{
    position:fixed; top:16px; right:16px; z-index:200;
    display:flex; gap:10px;
  }
  .icon-btn{
    width:40px; height:40px; border-radius:50%;
    background:var(--panel); border:1px solid var(--panel-edge);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 12px var(--shadow);
    transition: transform .2s ease, background .3s ease;
  }
  .icon-btn:hover{ transform:translateY(-2px); }
  .icon-btn svg{ width:18px; height:18px; }
  .icon-btn .moon-icon, .icon-btn .sun-icon{ position:absolute; transition:opacity .3s ease, transform .3s ease; }
  :root[data-theme="night"] .sun-icon{ opacity:0; transform:rotate(-40deg) scale(.6); }
  :root[data-theme="night"] .moon-icon{ opacity:1; transform:rotate(0) scale(1); }
  :root[data-theme="day"] .sun-icon{ opacity:1; transform:rotate(0) scale(1); }
  :root[data-theme="day"] .moon-icon{ opacity:0; transform:rotate(40deg) scale(.6); }
  #themeToggle{ position:relative; }
  #vinylToggle.active{ background:var(--accent); }
  #vinylToggle.active svg{ fill:var(--bg); }

  /* ===== VOLUME CONTROL ===== */
  #volToggle.muted{ background:var(--panel-edge); }
  #volToggle .vol-mute-line{
    opacity:0; transition:opacity .15s ease;
  }
  #volToggle.muted .vol-mute-line{ opacity:1; }
  #volToggle.muted #vol-wave-1,
  #volToggle.muted #vol-wave-2{ opacity:0; }
  #vol-popover{
    position:absolute; top:50%; right:calc(100% + 10px);
    opacity:0; transform:translateY(-50%) translateX(6px) scale(.96);
    transition:opacity .16s ease, transform .16s ease;
    pointer-events:none;
  }
  #vol-popover.show{
    opacity:1; transform:translateY(-50%) translateX(0) scale(1);
    pointer-events:auto;
  }
  #vol-popover #volSlider{ width:90px; }
  @media (max-width:720px), (max-height:500px) and (max-width:1024px){
    #vol-popover{ right:calc(100% + 8px); }
    #vol-popover #volSlider{ width:70px; }
  }

  /* ===== DOCK ===== */
  .dock{
    position:fixed; bottom:18px; left:50%; transform:translateX(-50%);
    z-index:200;
    display:flex; flex-direction:row; align-items:flex-end; gap:6px;
    background:var(--panel);
    border:1px solid var(--panel-edge);
    border-radius:20px;
    padding:8px 14px 10px;
    box-shadow:0 8px 32px var(--shadow), 0 2px 8px var(--shadow);
  }
  .dock button{
    position:relative;
    display:flex; flex-direction:column; align-items:center; gap:4px;
    background:none; border:none; padding:4px 6px 2px;
    color:var(--text);
    transition: transform .18s cubic-bezier(.34,1.6,.64,1);
    cursor:pointer;
  }
  .dock button:hover{ transform:translateY(-8px) scale(1.18); }
  .dock button:hover .dock-tooltip{ opacity:1; transform:translateX(-50%) translateY(-4px); }
  .dock button.win-open .dock-icon{ box-shadow:0 0 0 2px var(--accent); }
  .dock button.dock-bounce{ animation: dock-pop .35s cubic-bezier(.34,1.7,.64,1); }
  @keyframes dock-pop{
    0%{ transform:translateY(0) scale(1); }
    40%{ transform:translateY(-14px) scale(1.22); }
    100%{ transform:translateY(0) scale(1); }
  }
  .dock-icon{
    width:48px; height:48px; border-radius:12px;
    background:var(--bg-2);
    border:1px solid var(--panel-edge);
    display:flex; align-items:center; justify-content:center;
    font-size:1.45rem;
    transition: background .2s ease, box-shadow .2s ease;
    box-shadow:0 2px 6px var(--shadow);
  }
  .dock button:hover .dock-icon{ background:var(--panel-edge); box-shadow:0 4px 14px var(--shadow); }
  .dock .dock-label{
    font-size:.6rem; font-weight:700; color:var(--text-muted);
    white-space:nowrap; letter-spacing:.03em;
    font-family:'Space Mono', monospace;
  }
  .dock button.win-open .dock-label{ color:var(--accent); }
  .dock-dot{
    position:absolute; bottom:-2px; left:50%; transform:translateX(-50%);
    width:4px; height:4px; border-radius:50%;
    background:var(--accent); opacity:0;
    transition: opacity .2s ease;
  }
  .dock button.win-open .dock-dot{ opacity:1; }
  .dock-tooltip{
    position:absolute; bottom:calc(100% + 10px); left:50%;
    transform:translateX(-50%) translateY(4px);
    background:var(--panel-edge); color:var(--text);
    font-family:'Space Mono', monospace; font-size:.65rem;
    padding:4px 9px; border-radius:8px; white-space:nowrap;
    opacity:0; pointer-events:none;
    transition: opacity .15s ease, transform .15s ease;
    box-shadow:0 4px 12px var(--shadow);
  }
  .dock .tape{ display:none; }

  /* ===== MORE APPS FOLDER ===== */
  .folder-app-btn{
    display:flex; flex-direction:column; align-items:center; gap:5px;
    background:var(--bg-2); border:1px solid var(--panel-edge);
    border-radius:12px; padding:10px 6px 8px;
    cursor:pointer; color:var(--text);
    font-family:'Space Mono',monospace; font-size:.55rem;
    letter-spacing:.04em; text-transform:uppercase;
    transition: background .15s ease, transform .15s ease;
  }
  .folder-app-btn:hover{ background:var(--panel-edge); transform:translateY(-2px); }
  .folder-app-btn:active{ transform:scale(.94); }
  .folder-app-btn.win-open{ border-color:var(--accent); }
  #moreAppsFolder.visible{ display:block !important; animation: folderPop .2s cubic-bezier(.34,1.5,.64,1) both; }
  @keyframes folderPop{
    from{ opacity:0; transform:scale(.88) translateY(8px); }
    to{ opacity:1; transform:scale(1) translateY(0); }
  }

  /* ===== DESKTOP WINDOWS ===== */
  .win{
    position:fixed;
    width: 440px;
    max-width: calc(100vw - 32px);
    min-width: 220px;
    background:var(--win-body);
    border:1px solid var(--win-bar-border);
    border-radius:10px;
    box-shadow:0 12px 40px var(--shadow), 0 2px 8px var(--shadow);
    z-index:100;
    display:none;
    overflow:hidden;
    /* Each window is its own responsive container: content inside reacts
       to the WINDOW's current width (as the person drags the resize
       handle), not the browser viewport. This is what lets things like
       the terminal's side panel or the files tree reflow/collapse as a
       window is resized, instead of just clipping or shrinking in place. */
    container-type: inline-size;
    container-name: win;
  }

  /* ===== RESIZE HANDLES =====
     Eight invisible grab zones per window — one on each edge (drag to
     resize in that single direction) and one on each corner (drag to
     resize both dimensions at once). Dragging is handled in the "RESIZE
     WINDOWS" block in script.js. The corner grip glyphs are drawn with
     layered gradients so they recolor on hover using the same tokens as
     the rest of the UI; edges just get a soft accent-colored bar. */
  .win-resize-handle{
    position:absolute;
    z-index:5;
    touch-action:none;
  }
  /* edges — thin strips inset from the corners so they don't overlap them */
  .win-resize-handle.dir-e,
  .win-resize-handle.dir-w{ top:18px; bottom:18px; width:9px; cursor:ew-resize; }
  .win-resize-handle.dir-e{ right:-4px; }
  .win-resize-handle.dir-w{ left:-4px; }
  .win-resize-handle.dir-n,
  .win-resize-handle.dir-s{ left:18px; right:18px; height:9px; cursor:ns-resize; }
  .win-resize-handle.dir-n{ top:-4px; }
  .win-resize-handle.dir-s{ bottom:-4px; }
  /* edge hover/active feedback: a soft centered accent bar */
  .win-resize-handle.dir-e::before, .win-resize-handle.dir-w::before{
    content:''; position:absolute; top:0; bottom:0; left:50%; width:3px;
    margin-left:-1.5px; border-radius:999px; background:var(--accent);
    opacity:0; transition:opacity .15s ease;
  }
  .win-resize-handle.dir-n::before, .win-resize-handle.dir-s::before{
    content:''; position:absolute; left:0; right:0; top:50%; height:3px;
    margin-top:-1.5px; border-radius:999px; background:var(--accent);
    opacity:0; transition:opacity .15s ease;
  }
  .win-resize-handle.dir-e:hover::before, .win-resize-handle.dir-w:hover::before,
  .win-resize-handle.dir-n:hover::before, .win-resize-handle.dir-s:hover::before,
  .win-resize-handle.handle-active::before{ opacity:.6; }

  /* corners */
  .win-resize-handle.dir-ne, .win-resize-handle.dir-nw,
  .win-resize-handle.dir-se, .win-resize-handle.dir-sw{ width:20px; height:20px; }
  .win-resize-handle.dir-se{ right:0; bottom:0; cursor:nwse-resize; }
  .win-resize-handle.dir-nw{ left:0; top:0; cursor:nwse-resize; }
  .win-resize-handle.dir-ne{ right:0; top:0; cursor:nesw-resize; }
  .win-resize-handle.dir-sw{ left:0; bottom:0; cursor:nesw-resize; }

  .win-resize-handle.dir-se::after, .win-resize-handle.dir-nw::after,
  .win-resize-handle.dir-ne::after, .win-resize-handle.dir-sw::after{
    content:'';
    position:absolute;
    width:9px; height:9px;
    opacity:.75;
    transition: opacity .15s ease;
  }
  .win-resize-handle.dir-se::after{
    right:4px; bottom:4px;
    background:
      linear-gradient(135deg, transparent 0 50%, var(--panel-edge) 50% 58%, transparent 58% 100%),
      linear-gradient(135deg, transparent 0 66%, var(--panel-edge) 66% 74%, transparent 74% 100%);
  }
  .win-resize-handle.dir-nw::after{
    left:4px; top:4px;
    background:
      linear-gradient(-45deg, transparent 0 50%, var(--panel-edge) 50% 58%, transparent 58% 100%),
      linear-gradient(-45deg, transparent 0 66%, var(--panel-edge) 66% 74%, transparent 74% 100%);
  }
  .win-resize-handle.dir-ne::after{
    right:4px; top:4px;
    background:
      linear-gradient(45deg, transparent 0 50%, var(--panel-edge) 50% 58%, transparent 58% 100%),
      linear-gradient(45deg, transparent 0 66%, var(--panel-edge) 66% 74%, transparent 74% 100%);
  }
  .win-resize-handle.dir-sw::after{
    left:4px; bottom:4px;
    background:
      linear-gradient(-135deg, transparent 0 50%, var(--panel-edge) 50% 58%, transparent 58% 100%),
      linear-gradient(-135deg, transparent 0 66%, var(--panel-edge) 66% 74%, transparent 74% 100%);
  }
  .win-resize-handle.dir-se:hover::after, .win-resize-handle.dir-nw:hover::after,
  .win-resize-handle.dir-ne:hover::after, .win-resize-handle.dir-sw:hover::after,
  .win-resize-handle.handle-active::after{
    opacity:1;
  }
  .win-resize-handle.dir-se:hover::after, .win-resize-handle.dir-se.handle-active::after{
    background:
      linear-gradient(135deg, transparent 0 50%, var(--accent) 50% 58%, transparent 58% 100%),
      linear-gradient(135deg, transparent 0 66%, var(--accent) 66% 74%, transparent 74% 100%);
  }
  .win-resize-handle.dir-nw:hover::after, .win-resize-handle.dir-nw.handle-active::after{
    background:
      linear-gradient(-45deg, transparent 0 50%, var(--accent) 50% 58%, transparent 58% 100%),
      linear-gradient(-45deg, transparent 0 66%, var(--accent) 66% 74%, transparent 74% 100%);
  }
  .win-resize-handle.dir-ne:hover::after, .win-resize-handle.dir-ne.handle-active::after{
    background:
      linear-gradient(45deg, transparent 0 50%, var(--accent) 50% 58%, transparent 58% 100%),
      linear-gradient(45deg, transparent 0 66%, var(--accent) 66% 74%, transparent 74% 100%);
  }
  .win-resize-handle.dir-sw:hover::after, .win-resize-handle.dir-sw.handle-active::after{
    background:
      linear-gradient(-135deg, transparent 0 50%, var(--accent) 50% 58%, transparent 58% 100%),
      linear-gradient(-135deg, transparent 0 66%, var(--accent) 66% 74%, transparent 74% 100%);
  }
  .win.resizing{ user-select:none; }
  /* winOpen only plays the very first time a window appears; once it has

     been opened at least once we rely on the minimize/restore transitions
     instead, so reopening from minimized doesn't replay the entrance pop */
  .win.visible:not(.opened-once){ animation: winOpen .22s cubic-bezier(.34,1.4,.64,1) both; }
  .win.visible{ display:block; }
  .win.focused{ z-index:150; }
  /* Visible focus ring for when the window itself holds keyboard focus
     (content-only windows with nothing interactive inside, like "about") —
     :focus-visible so it only shows for keyboard focus, not every click. */
  .win:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }

  @keyframes winOpen{
    from{ opacity:0; transform:scale(.92); }
    to{ opacity:1; transform:scale(1); }
  }

  /* ===== MINIMIZE (genie-to-dock) — desktop ===== */
  .win.minimized{
    display:none !important;
  }
  .win.minimizing{
    animation:none;
    transition: transform .38s cubic-bezier(.6,-0.05,.85,.15),
                opacity .34s ease .04s;
    transform-origin: var(--mz-ox,50%) var(--mz-oy,100%);
    opacity:0;
    pointer-events:none;
    transform:
      translate(var(--mz-tx,0), var(--mz-ty,0))
      scale(var(--mz-sx,.06), var(--mz-sy,.06));
  }
  /* restoring from the dock plays the mirror image of minimizing */
  .win.restoring{
    animation:none;
    transform-origin: var(--mz-ox,50%) var(--mz-oy,100%);
    transition: transform .34s cubic-bezier(.32,1.4,.5,1), opacity .28s ease;
  }

  .win-bar{
    background:var(--win-bar);
    border-bottom:1px solid var(--win-bar-border);
    padding:0 14px;
    height:38px;
    display:flex; align-items:center; justify-content:space-between;
    cursor:grab;
    user-select:none;
  }
  .win-bar:active{ cursor:grabbing; }
  .win-bar-left{ display:flex; align-items:center; gap:10px; }
  .win-title{
    font-family:'Space Mono', monospace;
    font-size:.72rem; color:var(--text-muted);
    letter-spacing:.06em;
  }
  .win-dots{ display:flex; gap:6px; }
  .win-dot{
    width:12px; height:12px; border-radius:50%;
    border:none; padding:0; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition: opacity .15s;
  }
  .win-dot:hover{ opacity:.75; }
  .win-dot.close{ background:#ff5f57; }
  .win-dot.min{ background:#febc2e; }

  .win-dot.close svg{
    width:8px; height:8px;
    opacity:0; transform:scale(.6);
    transition: opacity .15s ease, transform .15s ease;
  }
  .win-dot.close svg path{ stroke:#4d0c08; stroke-width:1.6; stroke-linecap:round; }
  .win-dot.close:hover svg,
  .win-dot.close:focus-visible svg{
    opacity:1; transform:scale(1);
  }

  .win-body{
    padding:22px 22px 28px;
    max-height: calc(100vh - 100px);
    overflow-y:auto;
    user-select:text;
    scrollbar-width: thin;
    scrollbar-color: var(--panel-edge) transparent;
  }
  .win-body::-webkit-scrollbar{ width:4px; }
  .win-body::-webkit-scrollbar-thumb{ background:var(--panel-edge); border-radius:999px; }
  .win-body::-webkit-scrollbar-track{ background:transparent; }

  .win-body p{ line-height:1.6; color:var(--text); margin:0 0 10px; }
  .win-body hr{ border:none; border-top:1px dashed var(--panel-edge); margin:18px 0; }

  .about-id-row{ display:flex; align-items:center; gap:16px; margin-top:14px; }
  .about-avatar{
    flex:none; width:100px; height:100px; border-radius:50%; overflow:hidden;
    border:2px solid var(--panel-edge); box-shadow:0 4px 14px var(--shadow);
  }
  /* Orientation change: at narrow "about" window widths, the photo and
     name/quote no longer fit comfortably side-by-side — stack them and
     center instead of squeezing both into a cramped row. */
  @container win (max-width: 320px){
    .about-id-row{ flex-direction:column; text-align:center; gap:10px; }
  }

  /* Default: everything in one column — identity block, then education
     and "currently", stacked top to bottom exactly like before. */
  .about-layout{ display:flex; flex-direction:column; }
  .about-side{ }
  .about-main{ }

  /* Once the window is wide enough to actually afford it, split into a
     profile sidebar (photo, name, quote, interests) + a content column
     (education, currently) instead of just stretching the same single
     column wider. This is the "about" equivalent of the work window's
     card grid — a real layout change, not the content scaling up. */
  @container win (min-width: 480px){
    .about-layout{ flex-direction:row; align-items:flex-start; gap:26px; }
    .about-side{
      flex:0 0 190px;
      padding-right:22px;
      border-right:1px dashed var(--panel-edge);
    }
    .about-main{ flex:1; min-width:0; padding-top:14px; }
    .about-side .about-id-row{ flex-direction:column; text-align:center; gap:10px; margin-top:0; }
    .about-side .about-avatar{ margin:0 auto; }
    .about-side hr{ margin:16px 0; }
  }

  /* terminal's content area isn't a .win-body (custom two-pane flex
     layout instead) — give it a real class so the resize handler can
     target its height directly, same as it does for .win-body elsewhere */
  .terminal-body{
    display:flex; background:#0d0b14;
    height:480px; max-height:calc(100vh - 120px);
    overflow:hidden;
  }
  /* ASCII art side panel — sized/laid out in fixed, discrete steps as the
     terminal WINDOW is resized, not a smooth continuous scale (that reads
     as "zooming"). Each step below is a real layout change: the panel
     gets narrower, then the whole pane flips from side-by-side to
     stacked (row → column), then disappears — the same kind of thing a
     media query would do for viewport width, but keyed to this window. */
  #terminal-art-panel{
    flex:none;
    width:420px;
    overflow:hidden;
    border-right:1px solid #1e1730;
    display:flex; align-items:center; justify-content:center;
    padding:10px 20px;
  }
  #terminal-art{
    font-family:'Space Mono',monospace;
    font-size:0.38rem;
    line-height:1;
    letter-spacing:0;
    color:#e8e3f0;
    margin:0 auto; padding:0;
    white-space:pre;
    text-align:center;
    user-select:none;
    text-shadow: 0 0 4px rgba(232,227,240,0.12);
  }
  /* Step 1 — still side-by-side, but the art column steps down to a
     smaller fixed size so the terminal pane gets more of the window. */
  @container win (max-width: 820px){
    #terminal-art-panel{ width:260px; padding:10px 12px; }
    #terminal-art{ font-size:0.24rem; }
  }
  /* Step 2 — orientation change: the two panes flip from side-by-side
     (row) to stacked (column). The art becomes a short strip across the
     top instead of a tall column down the side. */
  @container win (max-width: 640px){
    .terminal-body{ flex-direction:column; }
    #terminal-art-panel{
      width:100%; height:96px; flex:none;
      border-right:none; border-bottom:1px solid #1e1730;
      padding:8px 12px;
    }
    #terminal-art{ font-size:0.15rem; }
  }
  /* Step 3 — no room left to show art without crowding the actual
     terminal; drop it and let the interactive pane use the full window. */
  @container win (max-width: 520px){
    #terminal-art-panel{ display:none; }
  }

  /* ===== ALL FILES (repo code viewer) ===== */
  .files-app{
    display:flex; background:#0d0b14; height:520px; max-height:calc(100vh - 120px); overflow:hidden;
  }
  .files-tree{
    flex:none; width:210px; overflow-y:auto;
    border-right:1px solid #1e1730; padding:14px 10px 16px;
    scrollbar-width:thin; scrollbar-color:#3a2e55 transparent;
  }
  .files-tree::-webkit-scrollbar{ width:4px; }
  .files-tree::-webkit-scrollbar-thumb{ background:#3a2e55; border-radius:999px; }
  .files-tree-label{
    font-family:'Space Mono',monospace; font-size:.62rem; letter-spacing:.06em;
    color:#7a6f95; margin:0 4px 10px; text-transform:lowercase;
  }
  .files-tree-item{
    display:flex; align-items:center; gap:8px; width:100%;
    background:none; border:none; border-radius:8px;
    padding:7px 8px; margin-bottom:2px; cursor:pointer; text-align:left;
    font-family:'Space Mono',monospace; font-size:.72rem; color:#c9b8e8;
    transition: background .12s ease, color .12s ease;
  }
  .files-tree-item:hover{ background:#1e1730; color:#f3ead9; }
  .files-tree-item.active{ background:#2a2140; color:#f3b27a; }
  .files-tree-icon{ flex:none; font-size:.85rem; line-height:1; }
  .files-tree-name{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .files-code{ flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; }
  .files-code-header{
    flex:none; display:flex; align-items:center; gap:10px;
    padding:10px 16px; border-bottom:1px solid #1e1730;
  }
  .files-code-name{ font-family:'Space Mono',monospace; font-size:.78rem; color:#f3ead9; }
  .files-code-meta{ font-family:'Space Mono',monospace; font-size:.62rem; color:#7a6f95; flex:1; }
  .files-code-actions{ display:flex; gap:6px; flex:none; }
  .files-code-btn{
    font-family:'Space Mono',monospace; font-size:.62rem; letter-spacing:.03em;
    color:#c9b8e8; background:#1e1730; border:1px solid #2f2549; border-radius:7px;
    padding:5px 9px; cursor:pointer; text-decoration:none; transition:background .12s ease,color .12s ease;
  }
  .files-code-btn:hover{ background:#2a2140; color:#f3b27a; }
  .files-code-btn.copied{ color:#2dd4bf; border-color:#2dd4bf; }
  .files-code-body{
    flex:1; overflow:auto; scrollbar-width:thin; scrollbar-color:#3a2e55 transparent;
  }
  .files-code-body::-webkit-scrollbar{ width:8px; height:8px; }
  .files-code-body::-webkit-scrollbar-thumb{ background:#3a2e55; border-radius:999px; }
  /* Orientation change: below this WINDOW width there's no room for a
     vertical file-tree sidebar next to a code pane, so the tree flips
     from a tall column on the left to a horizontal scrollable strip on
     top, same treatment the mobile bottom-sheet layout already used —
     now driven by the files window's own size, not the viewport's. */
  @container win (max-width: 560px){
    .files-app{ flex-direction:column; }
    .files-tree{
      width:100%; height:auto; flex:none;
      display:flex; align-items:center; gap:6px;
      overflow-x:auto; overflow-y:hidden;
      border-right:none; border-bottom:1px solid #1e1730;
      padding:10px 12px;
    }
    .files-tree-label{ display:none; }
    .files-tree-item{ flex:none; width:auto; margin-bottom:0; white-space:nowrap; }
    .files-tree-folder{
      flex:none; margin-top:0; border-top:none; border-left:1px dashed #241d33;
      white-space:nowrap;
    }
    .files-code{ flex:1; min-height:200px; }
    .assets-grid{ grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); }
    .assets-summary{ margin-left:0; width:100%; }
  }
  .files-code-placeholder{
    padding:24px; margin:0; font-family:'Space Mono',monospace; font-size:.75rem; color:#5c5378;
  }
  .code-line{
    display:grid; grid-template-columns:46px 1fr; min-width:max-content;
  }
  .code-line .ln{
    text-align:right; padding:0 12px 0 0; color:#453a63; user-select:none;
    font-family:'Space Mono',monospace; font-size:.72rem; line-height:1.65;
  }
  .code-line .lc{
    padding-right:20px; white-space:pre; color:#e8e3f0;
    font-family:'Space Mono',monospace; font-size:.72rem; line-height:1.65;
  }
  .code-line:hover{ background:rgba(255,255,255,0.03); }
  .tok-comment{ color:#6f6690; font-style:italic; }
  .tok-string{ color:#f3b27a; }
  .tok-keyword{ color:#818cf8; }
  .tok-number{ color:#2dd4bf; }
  .tok-tag{ color:#e6a0b8; }
  .tok-attr{ color:#a78bfa; }
  .tok-prop{ color:#2dd4bf; }
  .tok-selector{ color:#f3b27a; }
  .tok-at{ color:#e6a0b8; font-weight:700; }
  .tok-heading{ color:#f3b27a; font-weight:700; }
  .tok-bold{ color:#f3ead9; font-weight:700; }
  .tok-code{ color:#2dd4bf; }
  .tok-link{ color:#818cf8; text-decoration:underline; }

  /* ===== files/assets tabs ===== */
  .files-tabs{
    display:flex; gap:2px; padding:8px 12px 0; background:#0d0b14;
    border-bottom:1px solid #1e1730;
  }
  .files-tab{
    font-family:'Space Mono',monospace; font-size:.68rem; color:#7a6f95;
    background:none; border:none; padding:8px 14px; cursor:pointer;
    border-radius:8px 8px 0 0; transition:background .12s ease,color .12s ease;
  }
  .files-tab:hover{ color:#c9b8e8; }
  .files-tab.active{ color:#f3b27a; background:#151022; }
  .files-panel[hidden]{ display:none; }

  /* ===== assets browser ===== */
  .files-tree-folder{
    display:flex; align-items:center; gap:8px; width:100%; margin-top:8px; padding:7px 8px;
    border-radius:8px; font-family:'Space Mono',monospace; font-size:.7rem;
    color:#5c5378; cursor:pointer; border:none; border-top:1px dashed #241d33; background:none;
    text-align:left; transition:background .12s ease,color .12s ease;
  }
  .files-tree-folder:hover{ background:#1e1730; color:#c9b8e8; }
  .files-tree-item .count{
    margin-left:auto; font-size:.6rem; color:#5c5378; flex:none;
  }
  .assets-toolbar{
    flex:none; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    padding:10px 16px; border-bottom:1px solid #1e1730;
  }
  .chip{
    font-family:'Space Mono',monospace; font-size:.66rem; color:#c9b8e8;
    background:#1e1730; border:1px solid #2f2549; border-radius:999px;
    padding:5px 12px; cursor:pointer; transition:background .12s ease,color .12s ease,border-color .12s ease;
  }
  .chip:hover{ background:#2a2140; color:#f3ead9; }
  .chip.active{ background:#2a2140; color:#f3b27a; border-color:#f3b27a; }
  .assets-summary{
    font-family:'Space Mono',monospace; font-size:.6rem; color:#7a6f95; margin-left:auto;
  }
  .assets-body{
    flex:1; overflow-y:auto; padding:16px;
    scrollbar-width:thin; scrollbar-color:#3a2e55 transparent;
  }
  .assets-body::-webkit-scrollbar{ width:8px; }
  .assets-body::-webkit-scrollbar-thumb{ background:#3a2e55; border-radius:999px; }
  .assets-section{ margin-bottom:22px; }
  .assets-section-title{
    font-family:'Space Mono',monospace; font-size:.62rem; letter-spacing:.06em;
    color:#7a6f95; text-transform:uppercase; margin:0 0 10px;
  }
  .assets-grid{
    display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:12px;
  }
  .asset-card{
    background:#151022; border:1px solid #241d33; border-radius:10px;
    overflow:hidden; display:flex; flex-direction:column; text-decoration:none;
  }
  .asset-thumb{
    width:100%; aspect-ratio:1/1; object-fit:cover; background:#1e1730; display:block;
  }
  .asset-meta{ padding:6px 8px; }
  .asset-name{
    font-family:'Space Mono',monospace; font-size:.6rem; color:#e8e3f0;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .asset-size{ font-family:'Space Mono',monospace; font-size:.56rem; color:#5c5378; }
  .asset-list{ display:flex; flex-direction:column; gap:8px; }
  .asset-row{ background:#151022; border:1px solid #241d33; border-radius:10px; padding:10px 12px; }
  .asset-row-head{ display:flex; align-items:center; gap:10px; }
  .asset-row-icon{ font-size:1.05rem; flex:none; }
  .asset-row-name{
    flex:1; min-width:0; font-family:'Space Mono',monospace; font-size:.68rem; color:#e8e3f0;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .asset-row-size{ font-family:'Space Mono',monospace; font-size:.58rem; color:#5c5378; flex:none; }
  .asset-row-play{
    font-family:'Space Mono',monospace; font-size:.6rem; color:#c9b8e8; flex:none;
    background:#1e1730; border:1px solid #2f2549; border-radius:7px; padding:4px 10px; cursor:pointer;
    transition:background .12s ease,color .12s ease;
  }
  .asset-row-play:hover{ background:#2a2140; color:#f3b27a; }

  /* ===== asset overlay: image lightbox + custom video player ===== */
  .asset-overlay{
    position:fixed; inset:0; z-index:9999;
    display:flex; align-items:center; justify-content:center;
    padding:24px;
  }
  .asset-overlay[hidden]{ display:none; }
  .asset-overlay-backdrop{
    position:absolute; inset:0; background:rgba(10,7,18,.84); backdrop-filter:blur(6px);
  }
  .asset-overlay-card{
    position:relative; z-index:1; width:min(880px,100%); max-height:88vh;
    background:#0d0b14; border:1px solid #241d33; border-radius:16px;
    box-shadow:0 24px 70px rgba(0,0,0,.55); display:flex; flex-direction:column; overflow:hidden;
  }
  .asset-overlay-bar{
    flex:none; display:flex; align-items:center; gap:10px; padding:10px 14px;
    border-bottom:1px solid #1e1730;
  }
  .asset-overlay-name{
    flex:1; min-width:0; font-family:'Space Mono',monospace; font-size:.72rem; color:#f3ead9;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .asset-overlay-actions{ display:flex; gap:8px; align-items:center; flex:none; }
  .asset-overlay-close{
    background:#1e1730; border:1px solid #2f2549; color:#c9b8e8; border-radius:7px;
    width:28px; height:28px; cursor:pointer; font-size:.75rem; line-height:1;
    transition:background .12s ease,color .12s ease;
  }
  .asset-overlay-close:hover{ background:#2a2140; color:#f3b27a; }
  .asset-overlay-body{
    flex:1; display:flex; align-items:center; justify-content:center; overflow:auto; background:#000; min-height:200px;
  }
  .asset-overlay-body img{ max-width:100%; max-height:80vh; display:block; object-fit:contain; }
  .asset-overlay-nav{
    position:absolute; top:50%; transform:translateY(-50%); z-index:2;
    width:44px; height:44px; border-radius:50%; flex:none;
    background:#1e1730; border:1px solid #2f2549; color:#f3ead9;
    font-size:1.4rem; line-height:1; cursor:pointer;
    transition:background .12s ease,color .12s ease;
  }
  .asset-overlay-nav:hover{ background:#2a2140; color:#f3b27a; }
  .asset-overlay-nav.prev{ left:8px; }
  .asset-overlay-nav.next{ right:8px; }
  .asset-overlay-nav[hidden]{ display:none; }

  /* custom themed video player */
  .avp{ width:100%; display:flex; flex-direction:column; background:#000; }
  .avp-video{ width:100%; max-height:64vh; display:block; background:#000; cursor:pointer; }
  .avp-controls{
    flex:none; display:flex; flex-direction:column; gap:8px;
    padding:10px 14px 12px; background:#0d0b14; border-top:1px solid #1e1730;
  }
  .avp-scrub-row{ display:flex; align-items:center; gap:8px; }
  .avp-time{
    flex:none; width:38px; text-align:center; font-family:'Space Mono',monospace; font-size:.6rem; color:#7a6f95;
  }
  .avp-scrub{
    flex:1; -webkit-appearance:none; appearance:none; height:4px; border-radius:999px;
    background:linear-gradient(90deg,#f3b27a var(--pct,0%),#241d33 var(--pct,0%)); cursor:pointer;
  }
  .avp-scrub::-webkit-slider-thumb{
    -webkit-appearance:none; width:12px; height:12px; border-radius:50%; margin-top:-4px;
    background:linear-gradient(135deg,#f3b27a,#e6a0b8); cursor:pointer; box-shadow:0 0 0 3px rgba(243,178,122,.18);
  }
  .avp-scrub::-moz-range-thumb{
    width:12px; height:12px; border:none; border-radius:50%;
    background:linear-gradient(135deg,#f3b27a,#e6a0b8); cursor:pointer;
  }
  .avp-row2{ display:flex; align-items:center; gap:12px; }
  .avp-playbtn{
    flex:none; width:32px; height:32px; border-radius:50%; border:none; cursor:pointer;
    background:linear-gradient(135deg,#f3b27a,#e6a0b8);
    display:flex; align-items:center; justify-content:center;
    transition:transform .12s ease,filter .12s ease;
  }
  .avp-playbtn:hover{ transform:scale(1.06); filter:brightness(1.05); }
  .avp-playbtn svg{ width:13px; height:13px; fill:#0d0b14; }
  .avp-playbtn .avp-icon-pause{ display:none; }
  .avp.is-playing .avp-playbtn .avp-icon-play{ display:none; }
  .avp.is-playing .avp-playbtn .avp-icon-pause{ display:block; }
  .avp-btn{
    flex:none; background:none; border:none; color:#c9b8e8; cursor:pointer;
    width:26px; height:26px; display:flex; align-items:center; justify-content:center;
    transition:color .12s ease,transform .12s ease;
  }
  .avp-btn:hover{ color:#f3b27a; transform:scale(1.1); }
  .avp-btn svg{ width:15px; height:15px; }
  .avp-spacer{ flex:1; }
  .avp-vol{
    width:70px; -webkit-appearance:none; appearance:none; height:3px; border-radius:999px; background:#241d33; cursor:pointer;
  }
  .avp-vol::-webkit-slider-thumb{
    -webkit-appearance:none; width:10px; height:10px; border-radius:50%; background:#c9b8e8; cursor:pointer;
  }
  .avp-vol::-moz-range-thumb{ width:10px; height:10px; border:none; border-radius:50%; background:#c9b8e8; cursor:pointer; }
  .win-body h2{ font-size:1.4rem; margin-bottom:4px; }

  /* ===== SHARED INNER COMPONENTS ===== */
  .tag-row{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 16px; }
  .tag{
    font-family:'Space Mono', monospace; font-size:.7rem; padding:4px 10px;
    background:var(--panel); border:1px solid var(--panel-edge); border-radius:6px; color:var(--text-muted);
  }

  .link-grid{ display:flex; flex-direction:column; gap:8px; margin-top:8px; }
  .link-row{
    display:flex; align-items:center; gap:12px; padding:11px 13px;
    background:var(--panel); border:1px solid var(--panel-edge); border-radius:12px;
    color:var(--text); transition: background .2s ease, transform .2s ease;
  }
  .link-row:hover{ background:var(--panel-edge); transform:translateX(3px); text-decoration:none; }
  .link-row svg{ width:18px; height:18px; flex:none; color:var(--accent); }
  .link-row span{ font-weight:700; }

  /* Default: a single scrollable column, same as before — this is what
     you see at the window's normal/narrow width. */
  .project-grid{
    display:grid;
    grid-template-columns: 1fr;
    gap:14px;
    margin-top:10px;
  }
  .project-card{
    background:var(--panel); border:1px solid var(--panel-edge); border-radius:14px;
    padding:16px;
    display:flex; flex-direction:column;
  }
  .project-card p{ flex:1; }
  .project-links{
    margin-top:12px; padding-top:2px;
    display:flex; align-items:center; flex-wrap:wrap; gap:6px;
  }
  .project-cover{
    height:100px; border-radius:8px; margin-bottom:10px;
    background:linear-gradient(135deg, var(--accent), var(--accent-2));
    display:flex; align-items:center; justify-content:center; font-size:1.8rem;
  }
  .project-card h3{ font-size:1rem; margin-bottom:5px; }
  .project-card p{ font-size:.9rem; }
  /* Fixed-height, cropped thumbnail so cards line up evenly once there
     are 2-3 of them side by side — this is what keeps the images from
     just ballooning in size ("zooming") as the window gets wider. */
  .project-img{
    width:100%; height:150px; object-fit:cover;
    border-radius:8px; display:block; margin-bottom:12px;
    background:var(--panel-edge);
  }

  /* As the WORK window gets wider, reorganize the project list from one
     scrollable column into a responsive grid — 2 columns once there's
     room for them, 3 once there's even more. This is real reflow (an
     actual layout change), not the cards/images just scaling up. */
  @container win (min-width: 560px){
    .project-grid{ grid-template-columns: repeat(2, 1fr); }
  }
  @container win (min-width: 880px){
    .project-grid{ grid-template-columns: repeat(3, 1fr); }
    .project-img{ height:130px; }
  }

  .faq-item{ border-bottom:1px solid var(--panel-edge); }
  .faq-q{
    width:100%; text-align:left; background:none; border:none; color:var(--text);
    font-weight:700; padding:12px 0; display:flex; justify-content:space-between; align-items:center;
    font-family:'Nunito',sans-serif; font-size:1rem;
  }
  .faq-q .plus{ transition:transform .25s ease; color:var(--accent); }
  .faq-item.open .faq-q .plus{ transform:rotate(45deg); }
  .faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
  .faq-a p{ padding-bottom:12px; font-size:.9rem; }

  .mail-card{
    background:var(--panel); border:1px solid var(--panel-edge); border-radius:14px;
    padding:20px; text-align:center; margin-top:14px;
  }
  .mail-btn{
    display:inline-block; margin-top:12px; padding:9px 20px; border-radius:999px;
    background:var(--accent); color:var(--bg); font-weight:700; font-family:'Fredoka',sans-serif;
    font-size:1rem; border:none; cursor:pointer;
  }
  .mail-btn:hover{ text-decoration:none; filter:brightness(1.08); }

  /* ===== COZY CAT RUN MINIGAME ===== */
  #cr-stage{
    position:relative; width:100%; border-radius:12px; overflow:hidden;
    border:1px solid var(--panel-edge); line-height:0;
  }
  #cr-canvas{ display:block; width:100%; height:auto; cursor:pointer; }
  #cr-overlay{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    background:rgba(0,0,0,.32); cursor:pointer; text-align:center; padding:16px;
  }
  #cr-overlay p{
    margin:0; color:#fff; font-family:'Fredoka',sans-serif; font-weight:600;
    font-size:.95rem; text-shadow:0 1px 4px rgba(0,0,0,.4);
  }

  /* ===== GUESTBOOK TOAST (scoped inside #win-logs, bottom-right) ===== */
  #gb-toast{
    position:absolute;
    bottom:72px; right:16px;
    max-width:min(240px, calc(100% - 32px));
    display:flex; align-items:flex-start; gap:9px;
    background:var(--panel);
    border:1px solid var(--accent);
    border-radius:14px 14px 4px 14px;
    padding:10px 14px 11px 12px;
    box-shadow:0 10px 28px var(--shadow), 0 2px 8px var(--shadow);
    z-index:40;
    transform:translateY(14px) scale(.94) rotate(-1.5deg);
    opacity:0;
    pointer-events:none;
    transition: transform .32s cubic-bezier(.32,1.4,.5,1), opacity .26s ease;
  }
  #gb-toast.show{
    transform:translateY(0) scale(1) rotate(0deg);
    opacity:1;
  }
  #gb-toast.error{ border-color:#e06868; }
  .gb-toast-icon{
    flex:none; font-size:1.15rem; line-height:1.3;
    filter: drop-shadow(0 1px 2px var(--shadow));
  }
  .gb-toast-msg{
    font-family:'Nunito', sans-serif; font-weight:700;
    font-size:.82rem; line-height:1.35; color:var(--text);
  }

  /* ===== CHAT WINDOW (logs redesign) ===== */
  #win-logs .win-body{
    padding:0;
    display:flex; flex-direction:column;
    height:480px;
    max-height:calc(100vh - 120px);
    overflow:hidden;
  }
  .chat-header{
    padding:12px 16px;
    border-bottom:1px solid var(--panel-edge);
    background:var(--win-bar);
    display:flex; align-items:center; gap:10px;
    flex:none;
  }
  .chat-avatar{
    width:36px; height:36px; border-radius:50%;
    background:linear-gradient(135deg,var(--accent),var(--accent-2));
    display:flex; align-items:center; justify-content:center;
    font-size:1.1rem; flex:none;
    box-shadow:0 2px 8px var(--shadow);
  }
  .chat-header-info{ flex:1; min-width:0; }
  .chat-header-name{
    font-family:'Fredoka',sans-serif; font-weight:600;
    font-size:.95rem; color:var(--text); line-height:1.2;
  }
  .chat-header-status{
    font-size:.7rem; color:var(--text-muted);
    display:flex; align-items:center; gap:5px;
    font-family:'Space Mono',monospace;
  }
  .chat-online-dot{
    width:6px; height:6px; border-radius:50%;
    background:#4ade80;
    animation:np-pulse 2s ease-in-out infinite;
  }

  /* messages feed */
  .chat-feed{
    flex:1; overflow-y:auto; padding:14px 14px 10px;
    display:flex; flex-direction:column; gap:10px;
    scrollbar-width:thin; scrollbar-color:var(--panel-edge) transparent;
  }
  .chat-feed::-webkit-scrollbar{ width:4px; }
  .chat-feed::-webkit-scrollbar-thumb{ background:var(--panel-edge); border-radius:999px; }
  .chat-feed::-webkit-scrollbar-track{ background:transparent; }
  /* pushes messages to the bottom when there are few of them */
  .chat-feed-spacer{ flex:1; }

  /* date divider */
  .chat-date-divider{
    display:flex; align-items:center; gap:8px;
    font-family:'Space Mono',monospace; font-size:.62rem;
    color:var(--text-muted); margin:4px 0;
  }
  .chat-date-divider::before,.chat-date-divider::after{
    content:''; flex:1; height:1px; background:var(--panel-edge);
  }

  /* bubble */
  .chat-bubble-row{
    display:flex; align-items:flex-end; gap:8px;
  }
  .chat-bubble-row.mine{
    flex-direction:row-reverse;
  }
  .bubble-avatar{
    width:28px; height:28px; border-radius:50%;
    background:var(--panel-edge);
    display:flex; align-items:center; justify-content:center;
    font-size:.85rem; flex:none; margin-bottom:2px;
  }
  .bubble-avatar.host{
    background:linear-gradient(135deg,var(--accent),var(--accent-2));
  }
  .bubble-col{ display:flex; flex-direction:column; gap:3px; max-width:78%; }
  .chat-bubble-row.mine .bubble-col{ align-items:flex-end; }

  .bubble-sender{
    font-family:'Space Mono',monospace; font-size:.62rem;
    color:var(--text-muted); padding:0 4px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
  }
  .bubble-from-inline{
    font-family:'Space Mono',monospace; font-size:.62rem;
    color:var(--text-muted); opacity:.7;
  }
  .bubble{
    padding:9px 13px; border-radius:16px;
    font-family:'Nunito',sans-serif; font-size:.88rem;
    line-height:1.5; color:var(--text);
    background:var(--panel); border:1px solid var(--panel-edge);
    word-break:break-word;
    position:relative;
    display:inline-block; width:fit-content; max-width:100%;
  }
  .bubble.host-bubble{
    background:var(--accent); color:var(--bg);
    border-color:transparent;
    border-radius:16px 16px 4px 16px;
  }
  .bubble.visitor-bubble{
    border-radius:16px 16px 16px 4px;
  }
  .bubble-meta{
    font-family:'Space Mono',monospace; font-size:.6rem;
    color:var(--text-muted); padding:0 4px;
    display:flex; align-items:center; gap:4px;
  }
  .chat-bubble-row.mine .bubble-meta{ justify-content:flex-end; }
  .bubble-from-badge{
    background:var(--bg-2); border:1px solid var(--panel-edge);
    border-radius:999px; padding:1px 7px;
    font-size:.6rem; font-family:'Space Mono',monospace;
    color:var(--text-muted);
  }

  /* empty / loading state */
  .chat-empty{
    text-align:center; padding:32px 16px;
    font-family:'Indie Flower',cursive; font-size:1rem;
    color:var(--text-muted);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:10px; flex:1;
  }
  .chat-loading-dots{
    display:flex; gap:6px; align-items:center; justify-content:center;
  }
  .chat-loading-dots span{
    width:8px; height:8px; border-radius:50%;
    background:var(--accent); opacity:.7;
    animation: chat-dot-bounce 1.2s ease-in-out infinite;
  }
  .chat-loading-dots span:nth-child(2){ animation-delay:.2s; }
  .chat-loading-dots span:nth-child(3){ animation-delay:.4s; }
  @keyframes chat-dot-bounce{
    0%,80%,100%{ transform:translateY(0); opacity:.4; }
    40%         { transform:translateY(-6px); opacity:1; }
  }
  .chat-loading-label{
    font-family:'Space Mono',monospace; font-size:.68rem;
    color:var(--text-muted); letter-spacing:.06em;
  }

  /* compose bar */
  .chat-compose{
    flex:none;
    border-top:1px solid var(--panel-edge);
    background:var(--win-bar);
    padding:10px 12px;
    display:flex; flex-direction:column; gap:8px;
  }
  .chat-compose-fields{
    display:flex; gap:8px;
  }
  .chat-compose-fields input{
    flex:1; padding:6px 10px;
    border-radius:8px; border:1px solid var(--panel-edge);
    background:var(--bg); color:var(--text);
    font-family:'Nunito',sans-serif; font-size:.82rem;
    outline:none;
  }
  .chat-compose-fields input:focus{ border-color:var(--accent); }
  .chat-compose-row{
    display:flex; gap:8px; align-items:flex-end;
  }
  .chat-compose-row textarea{
    flex:1; padding:8px 12px;
    border-radius:12px; border:1px solid var(--panel-edge);
    background:var(--bg); color:var(--text);
    font-family:'Nunito',sans-serif; font-size:.88rem;
    resize:none; outline:none; line-height:1.4;
    max-height:80px;
  }
  .chat-compose-row textarea:focus{ border-color:var(--accent); }
  .chat-send-btn{
    width:38px; height:38px; border-radius:50%; flex:none;
    background:var(--accent); border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:transform .15s ease, filter .15s ease;
    box-shadow:0 2px 8px var(--shadow);
  }
  .chat-send-btn:hover{ transform:scale(1.08); filter:brightness(1.1); }
  .chat-send-btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }
  .chat-send-btn svg{ width:16px; height:16px; fill:var(--bg); }
  .chat-status-row{
    font-size:.72rem; color:var(--accent);
    font-family:'Nunito',sans-serif; min-height:1em;
    padding:0 2px;
  }

  /* ===== PLAYER STATION ===== */
  #playerStation{
    position:fixed; right:18px; bottom:18px; z-index:300;
    width:420px;
    display:flex; flex-direction:column; align-items:stretch;
    transform: translateY(calc(100% + 24px));
    opacity:0;
    pointer-events:none;
    transition: transform .38s cubic-bezier(.32,1.26,.54,1), opacity .25s ease;
  }
  #playerStation.mini{
    transform: translateY(0);
    opacity:1;
    pointer-events:auto;
  }

  /* ----- windowed mode: dragged free of the corner dock into a real,
     draggable/resizable floating window, same family as .win ----- */
  #playerStation{
    container-type: inline-size;
    container-name: player;
  }
  #playerStation.windowed{
    transform:none !important;
    opacity:1;
    pointer-events:auto;
    transition:none;
    right:auto; bottom:auto;
    min-width:380px;
    max-width:calc(100vw - 24px);
  }
  #playerStation.windowed .mini-bar{ display:none; }
  #playerStation.windowed .player-full{
    display:flex; flex-direction:column;
    /* fill the fixed-height #playerStation box the JS now sets on undock/
       resize, instead of relying on a hand-computed pixel height on the
       body below — see .player-full-body note underneath. */
    flex:1 1 auto; min-height:0;
    border-radius:12px;
    box-shadow:0 12px 40px var(--shadow), 0 2px 8px var(--shadow);
    max-height:none;
    transition:none;
  }
  #playerStation.windowed .player-titlebar{ border-radius:12px 12px 0 0; }
  /* flex:1 + min-height:0 makes this fill whatever's left under the
     titlebar exactly, so overflow-y:auto (set on the base .player-full-body
     rule above) always has a real, reliable box to clip/scroll against —
     no more relying on JS to compute and re-set an exact pixel height
     on this element every time the window opens or resizes. */
  #playerStation.windowed .player-full-body{ max-height:none; flex:1 1 auto; min-height:0; }
  #playerStation.resizing{ user-select:none; }
  .player-full{
    background:var(--win-body);
    border:1px solid var(--win-bar-border);
    border-radius:14px 14px 0 0;
    border-bottom:none;
    overflow:hidden;
    max-height:0;
    opacity:0;
    transition: max-height .42s cubic-bezier(.32,1.26,.54,1), opacity .28s ease;
  }
  #playerStation.expanded .player-full{
    max-height:740px;
    opacity:1;
  }
  /* undocking from an already-expanded mini-bar leaves both .expanded and
     .windowed on the element at once. That rule above and the .windowed
     max-height:none rule earlier in the file have identical specificity,
     so source order alone decided the winner (740px) — harmless today
     only because WIN_OPEN.h/WIN_MAX.h happen to fit under 740px, but a
     latent clipping bug the moment those change. This compound selector
     out-specifies both, so "windowed" always wins when it's present. */
  #playerStation.windowed.expanded .player-full{
    max-height:none;
    opacity:1;
  }

  .player-titlebar{
    background:var(--win-bar);
    border-bottom:1px solid var(--win-bar-border);
    padding:0 14px; height:38px;
    display:flex; align-items:center; justify-content:space-between;
    user-select:none;
    cursor:grab;
  }
  .player-titlebar:active{ cursor:grabbing; }
  .player-titlebar-left{ display:flex; align-items:center; gap:10px; }
  .player-titlebar .win-dots{ display:flex; gap:6px; }

  .player-redock-btn{
    display:none; align-items:center; justify-content:center;
    width:22px; height:22px; flex:none; border-radius:6px;
    background:none; border:none; color:var(--text-muted); cursor:pointer;
    transition: background .15s ease, color .15s ease;
  }
  .player-redock-btn:hover{ background:var(--panel-edge); color:var(--text); }
  .player-redock-btn svg{ width:12px; height:12px; }
  #playerStation.windowed .player-redock-btn{ display:flex; }
  .player-title{
    font-family:'Space Mono', monospace;
    font-size:.72rem; color:var(--text-muted); letter-spacing:.06em;
  }

  .player-full-body{
    padding:18px 20px 20px;
    overflow-y:auto;
    max-height:calc(740px - 38px);
    user-select:text;
    scrollbar-width: thin;
    scrollbar-color: var(--panel-edge) transparent;
  }
  .player-full-body::-webkit-scrollbar{ width:4px; }
  .player-full-body::-webkit-scrollbar-thumb{ background:var(--panel-edge); border-radius:999px; }
  .player-full-body::-webkit-scrollbar-track{ background:transparent; }

  .player-full-body h2{ font-size:1.3rem; margin-bottom:4px; }
  .player-full-body p{ line-height:1.6; color:var(--text); margin:0 0 10px; }
  .player-full-body hr{ border:none; border-top:1px dashed var(--panel-edge); margin:14px 0; }

  /* ----- player-now-panel: album card, transport, and volume used to each
     be their own bordered/backgrounded box stacked with gaps between them,
     which read as three disconnected panels. They're wrapped in a single
     .player-now-panel shell that owns the background/border, with soft
     dashed dividers between the three sections instead — one cohesive
     card. (Named distinctly from the unrelated header .now-playing pill.) ----- */
  .player-now-panel{
    display:flex; flex-direction:column;
    background:var(--panel); border:1px solid var(--panel-edge); border-radius:12px;
    padding:14px;
  }
  .player-card{
    display:flex; align-items:center; gap:14px;
  }
  .player-disc-wrap{ flex:none; width:88px; height:88px; position:relative; }
  .player-thumb{
    position:absolute; left:0; top:0; width:88px; height:88px; z-index:2;
    border-radius:12px; overflow:hidden;
    background:linear-gradient(145deg, var(--accent-2), var(--accent));
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 14px var(--shadow);
  }
  .player-thumb span{ font-size:1.8rem; filter:drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
  .player-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
  .player-meta{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
  .player-meta .label{ margin:0; line-height:1.2; }
  .player-track{ font-weight:700; font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:0; line-height:1.3; }
  .player-artist{ color:var(--text-muted); font-size:.8rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:0; line-height:1.3; }

  .player-controls{
    display:flex; flex-direction:column; align-items:stretch; gap:10px;
    margin-top:14px; padding-top:14px;
    border-top:1px dashed var(--panel-edge);
  }
  .player-transport{
    display:flex; align-items:center; justify-content:space-between;
    width:100%;
  }
  .player-transport-main{ display:flex; align-items:center; gap:16px; }
  .player-playbtn{
    width:42px; height:42px; border-radius:50%; flex:none;
    background:var(--accent); border:none; color:var(--bg);
    display:flex; align-items:center; justify-content:center;
    transition: transform .15s ease, filter .15s ease;
  }
  .player-playbtn:hover{ transform:scale(1.06); filter:brightness(1.05); }
  .player-playbtn svg{ width:17px; height:17px; }

  .player-playbtn .icon-pause{ display:none; }
  .player-playbtn .icon-play{ display:block; }
  #playerStation.is-playing .player-playbtn .icon-play{ display:none; }
  #playerStation.is-playing .player-playbtn .icon-pause{ display:block; }

  .player-ctrl-btn{
    width:28px; height:28px; flex:none; border:none; background:none;
    color:var(--text-muted); cursor:pointer; border-radius:6px;
    display:flex; align-items:center; justify-content:center;
    transition: color .15s ease, transform .15s ease;
  }
  .player-ctrl-btn:hover{ color:var(--text); transform:scale(1.1); }
  .player-ctrl-btn svg{ width:14px; height:14px; }
  .player-ctrl-btn.active{ color:var(--accent); }
  /* repeat-1 shows a "1" badge */
  #playerRepeatBtn{ position:relative; }
  #playerRepeatBtn.repeat-one::after{
    content:'1'; position:absolute; top:-3px; right:-3px;
    width:11px; height:11px; border-radius:50%;
    background:var(--accent); color:var(--panel);
    font-size:.52rem; font-weight:800; line-height:11px; text-align:center;
  }

  /* ----- time labels + sliders: these were fixed px everywhere, so they
     stayed exactly as small on the wide 860px+ windowed tier as they were
     on the narrow docked card — clamp() driven by container query width
     (cqw, relative to #playerStation's own inline-size container set up
     above) lets them scale fluidly with however much room the player
     actually has, instead of needing another hand-tuned breakpoint. ----- */
  .player-scrub-wrap{ width:100%; display:flex; align-items:center; gap:8px; min-width:0; }
  .player-time{
    font-family:'Space Mono', monospace; color:var(--text-muted); flex:none; text-align:center;
    font-size: clamp(.64rem, 2.3cqw, .82rem);
    width: clamp(30px, 9cqw, 44px);
  }
  /* flex items default to min-width:auto, not 0 — for a native <input
     type="range"> that "auto" resolves to the control's intrinsic
     width, so flex:1 alone couldn't actually shrink it past that
     point. Once the now-playing card's own column got narrower than
     time-label + intrinsic-slider + time-label (e.g. the fixed 220px
     left column at the 560px windowed tier), the slider refused to
     give up any more space and the trailing .player-time got pushed
     out past the card's right edge/border instead. min-width:0 lets
     it shrink all the way down like any other flexed box. */
  .player-scrub{
    -webkit-appearance:none; appearance:none; flex:1; min-width:0; border-radius:999px;
    background:var(--panel-edge); outline:none; cursor:pointer;
    height: clamp(4px, 1.1cqw, 6px);
  }
  .player-scrub::-webkit-slider-thumb{
    -webkit-appearance:none; border-radius:50%;
    background:var(--accent); cursor:pointer; border:none;
    width: clamp(11px, 2.8cqw, 15px); height: clamp(11px, 2.8cqw, 15px);
  }
  .player-scrub::-moz-range-thumb{
    border-radius:50%; background:var(--accent); cursor:pointer; border:none;
    width: clamp(11px, 2.8cqw, 15px); height: clamp(11px, 2.8cqw, 15px);
  }
  .player-vol-row{
    display:flex; align-items:center; gap:8px; min-width:0;
    margin-top:10px; padding-top:10px;
    border-top:1px dashed var(--panel-edge);
  }
  .player-vol-row svg{
    flex:none; color:var(--text-muted);
    width: clamp(14px, 3cqw, 18px); height: clamp(14px, 3cqw, 18px);
  }
  /* same intrinsic-min-width fix as .player-scrub above */
  .player-vol{
    -webkit-appearance:none; appearance:none; flex:1; min-width:0; border-radius:999px;
    background:var(--panel-edge); outline:none; cursor:pointer;
    height: clamp(3px, .9cqw, 5px);
  }
  .player-vol::-webkit-slider-thumb{
    -webkit-appearance:none; border-radius:50%;
    background:var(--text-muted); cursor:pointer; border:none;
    width: clamp(9px, 2.3cqw, 12px); height: clamp(9px, 2.3cqw, 12px);
  }
  .player-vol::-moz-range-thumb{
    border-radius:50%; background:var(--text-muted); cursor:pointer; border:none;
    width: clamp(9px, 2.3cqw, 12px); height: clamp(9px, 2.3cqw, 12px);
  }

  /* ===== GENRE FOLDERS ===== */
  .genre-shelf{ margin-top:14px; }
  .genre-tabs{
    display:flex; gap:6px; overflow-x:auto; padding-bottom:6px;
    scrollbar-width:thin; scrollbar-color: var(--panel-edge) transparent;
    cursor:grab;
  }
  .genre-tabs:active{ cursor:grabbing; }
  .genre-tabs::-webkit-scrollbar{ height:4px; display:block; }
  .genre-tabs::-webkit-scrollbar-thumb{ background:var(--panel-edge); border-radius:999px; }
  .genre-tabs::-webkit-scrollbar-track{ background:transparent; }
  .genre-tab{
    flex:none; display:flex; align-items:center; gap:5px;
    font-family:'Space Mono', monospace; font-size:.65rem; letter-spacing:.05em;
    padding:5px 10px; border-radius:8px; border:1px solid var(--panel-edge);
    background:var(--panel); color:var(--text-muted); cursor:pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
    white-space:nowrap;
  }
  .genre-tab:hover{ background:var(--panel-edge); color:var(--text); }
  .genre-tab.active{ background:var(--accent); border-color:var(--accent); color:var(--bg); }
  .genre-tab .tab-icon{ font-size:.85rem; }

  .track-list{
    margin-top:8px;
    display:flex; flex-direction:column; gap:3px;
    max-height:240px; overflow-y:auto;
    scrollbar-width:thin; scrollbar-color: var(--panel-edge) transparent;
  }
  .track-list::-webkit-scrollbar{ width:4px; }
  .track-list::-webkit-scrollbar-thumb{ background:var(--panel-edge); border-radius:999px; }
  .track-row{
    display:flex; align-items:center; gap:10px;
    padding:8px 10px; border-radius:10px;
    cursor:pointer; border:1px solid transparent;
    transition: background .15s ease, border-color .15s ease;
  }
  .track-row:hover{ background:var(--panel); border-color:var(--panel-edge); }
  .track-row.playing{ background:var(--panel); border-color:var(--accent); }

  .track-num{
    font-family:'Space Mono', monospace; font-size:.65rem;
    color:var(--text-muted); width:18px; text-align:right; flex:none;
    display:block;
  }
  .track-row.playing .track-num{ display:none; }

  .track-info{ flex:1; min-width:0; }
  .track-name{
    font-size:.85rem; font-weight:700;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text);
  }
  .track-row.playing .track-name{ color:var(--accent); }
  .track-sub{
    font-size:.72rem; color:var(--text-muted);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .track-dur{
    font-family:'Space Mono', monospace; font-size:.65rem; color:var(--text-muted); flex:none;
  }

  .track-eq{
    flex:none;
    display:none;
    align-items:flex-end; gap:2px;
    height:14px; width:18px;
    min-width:18px;
  }
  .track-row.playing .track-eq{ display:flex; }

  .eq-bar{
    width:3px; border-radius:2px; background:var(--accent);
    animation: eq-bounce .7s ease-in-out infinite alternate;
  }
  .eq-bar:nth-child(2){ animation-delay:.15s; }
  .eq-bar:nth-child(3){ animation-delay:.3s; }
  @keyframes eq-bounce{ from{ height:3px; } to{ height:13px; } }

  /* ===== RADIO HISTORY (shown instead of .track-list while the 24/7
     radio tab is active — otherwise that whole column just sat empty,
     since a live stream has no browsable file list of its own) ===== */
  .radio-history{
    margin-top:8px;
    display:flex; flex-direction:column;
    max-height:240px; overflow-y:auto;
    scrollbar-width:thin; scrollbar-color: var(--panel-edge) transparent;
  }
  .radio-history::-webkit-scrollbar{ width:4px; }
  .radio-history::-webkit-scrollbar-thumb{ background:var(--panel-edge); border-radius:999px; }
  .radio-history-empty{
    font-size:.8rem; color:var(--text-muted); line-height:1.6; margin:0;
    padding:4px 2px;
  }
  .radio-history-row{
    display:flex; align-items:center; gap:10px;
    padding:8px 10px; border-radius:10px;
  }
  .radio-history-row + .radio-history-row{ border-top:1px dashed var(--panel-edge); }
  .radio-history-note{
    flex:none; width:18px; text-align:center;
    color:var(--text-muted); font-size:.8rem;
  }
  .radio-history-info{ flex:1; min-width:0; }
  .radio-history-title{
    font-size:.85rem; font-weight:700; color:var(--text);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .radio-history-artist{
    font-size:.72rem; color:var(--text-muted);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .radio-history-ago{
    font-family:'Space Mono', monospace; font-size:.62rem; color:var(--text-muted); flex:none;
  }

  /* ===== 24/7 RADIO: LIVE mode ===== */
  .radio-live-row{
    width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
    padding:2px 0 8px;
  }
  .radio-live-pill{
    display:flex; align-items:center; gap:6px; flex:none;
    font-family:'Space Mono', monospace; font-size:.68rem; font-weight:700; letter-spacing:.08em;
    color:var(--accent); background:rgba(248,113,113,.12);
    border:1px solid rgba(248,113,113,.35); border-radius:999px; padding:3px 10px;
  }
  .live-dot{ width:6px; height:6px; border-radius:50%; background:#f87171; flex:none; }
  #playerStation.radio-mode .live-dot{ animation: live-pulse 1.2s ease-in-out infinite; }
  @keyframes live-pulse{
    0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(248,113,113,.5); }
    50%{ opacity:.55; box-shadow:0 0 0 4px rgba(248,113,113,0); }
  }
  /* hide skip/shuffle/repeat + progress while a live stream is loaded — you can only pause it */
  #playerStation.radio-mode #playerShuffleBtn,
  #playerStation.radio-mode #playerPrevBtn,
  #playerStation.radio-mode #playerNextBtn,
  #playerStation.radio-mode #playerRepeatBtn,
  #playerStation.radio-mode #miniPrevBtn,
  #playerStation.radio-mode #miniNextBtn,
  #playerStation.radio-mode .mini-progress{
    display:none;
  }
  /* with shuffle/repeat hidden, the lone play button needs to be re-centered
     (it normally sits in a space-between row alongside those two) */
  #playerStation.radio-mode .player-transport{ justify-content:center; }
  #playerStation.radio-mode .player-playbtn{ width:48px; height:48px; }
  #playerStation.radio-mode .player-playbtn svg{ width:19px; height:19px; }

  /* ===== MINI BAR ===== */
  .mini-bar{
    display:flex; align-items:center; gap:10px;
    background:var(--panel); border:1px solid var(--panel-edge);
    border-radius:16px; padding:8px 12px 8px 8px;
    box-shadow:0 8px 28px var(--shadow), 0 2px 8px var(--shadow);
    cursor:pointer;
    position:relative;
    transition: background .2s ease;
  }
  #playerStation.expanded .mini-bar{
    border-radius:0 0 16px 16px;
    border-top:1px solid var(--win-bar-border);
    box-shadow:0 4px 16px var(--shadow);
  }
  .mini-bar:hover{ background:var(--panel-edge); }
  #playerStation.expanded .mini-bar{ background:var(--win-bar); }
  #playerStation.expanded .mini-bar:hover{ background:var(--win-bar-border); }

  .mini-thumb{
    flex:none; width:44px; height:44px; border-radius:9px; overflow:hidden;
    background:linear-gradient(145deg, var(--accent-2), var(--accent));
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 2px 6px var(--shadow);
  }
  .mini-thumb span{ font-size:1rem; filter:drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
  .mini-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

  .mini-meta{ flex:1; min-width:0; }
  .mini-track{
    font-weight:700; font-size:.8rem;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    color:var(--text);
  }
  .mini-artist{
    font-size:.7rem; color:var(--text-muted);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }

  .mini-controls{ display:flex; align-items:center; gap:3px; flex:none; }
  .mini-btn{
    width:28px; height:28px; border-radius:50%; border:none;
    background:transparent; color:var(--text-muted);
    display:flex; align-items:center; justify-content:center;
    transition: color .15s ease, background .15s ease, transform .15s ease;
  }
  .mini-btn:hover{ color:var(--text); background:var(--panel-edge); transform:scale(1.1); }
  .mini-btn svg{ width:13px; height:13px; }
  .mini-btn.mini-playbtn{
    width:32px; height:32px;
    background:var(--accent); color:var(--bg);
  }
  .mini-btn.mini-playbtn:hover{ filter:brightness(1.08); transform:scale(1.06); }
  .mini-btn.mini-playbtn svg{ width:14px; height:14px; }

  .mini-playbtn .icon-pause{ display:none; }
  .mini-playbtn .icon-play{ display:block; }
  #playerStation.is-playing .mini-playbtn .icon-play{ display:none; }
  #playerStation.is-playing .mini-playbtn .icon-pause{ display:block; }

  .mini-chevron{
    flex:none; width:20px; height:20px; border-radius:50%; border:none;
    background:transparent; color:var(--text-muted);
    display:flex; align-items:center; justify-content:center;
    pointer-events:none;
    transition: transform .32s ease, color .15s ease;
  }
  .mini-chevron svg{ width:11px; height:11px; }
  #playerStation.expanded .mini-chevron{ transform:rotate(180deg); }

  .mini-progress{
    position:absolute; bottom:0; left:8px; right:8px; height:3px;
    background:var(--panel-edge); border-radius:999px; overflow:hidden;
    pointer-events:none;
  }
  /* ----- windowed responsive layout: like Spotify's desktop/web player,
     the floating window reflows through multiple tiers as it's resized —
     not just one on/off switch. Below 560px (or docked) it's the compact
     single-column card. From 560px it becomes a real two-pane player.
     Past 860px the panes get room to breathe: bigger art, roomier type. ----- */
  @container player (min-width:560px){
    #playerStation.windowed .player-full-body{
      display:grid;
      grid-template-columns: 220px minmax(0,1fr);
      /* 6 explicit rows now: header (h3/intro/hr) gets rows 1-3 of its own
         instead of being left row-less, which is what was letting the grid
         auto-placement algorithm banish it to an implicit row *after*
         everything else — see the note below. */
      grid-template-rows: auto auto auto auto auto minmax(0,1fr);
      /* column-gap was 0, so the now-playing card's right edge butted
         straight up against the folders divider line with no breathing
         room at all. This opens a real gutter between them; folders-panel
         keeps its own padding-left for the space *after* the divider. */
      column-gap:20px;
      row-gap:2px;
      align-content:start;
      padding:18px 20px 20px;
      /* every grid item below also needs min-width:0 — grid items default
         to min-width:auto (sized to their content's max-content), and the
         folder-tabs row is wide enough on its own to blow past the column
         and get clipped by the window edge without this. */
      min-width:0;
    }
    #playerStation.windowed .player-full-body > *{ min-width:0; }
    /* IMPORTANT: these three must have an explicit grid-row, not just
       grid-column. Grid places explicitly-positioned items (the card,
       controls, volume row, folders label, genre shelf below all declare
       both column *and* row) before it auto-places anything else. Items
       that only specify grid-column get auto-placed into the next row
       that's *entirely* free across both columns — and since rows 4-6
       are already fully claimed by those explicit items, a row-less h3/
       p/hr gets pushed into new implicit rows appended after row 6,
       rendering below (and outside the clipped bounds of) the whole
       two-column layout instead of up top where it belongs.
    */
    #playerStation.windowed .player-full-body > h3{ grid-column:1 / -1; grid-row:1; }
    #playerStation.windowed .player-full-body > p:first-of-type{ grid-column:1 / -1; grid-row:2; }
    #playerStation.windowed .player-full-body > hr:first-of-type{ grid-column:1 / -1; grid-row:3; margin-bottom:14px; }
    #playerStation.windowed .player-full-body > hr:last-of-type{ display:none; }

    /* the whole now-playing card takes the left column's full row span
       (4 through the end, mirroring how .folders-panel spans column 2) as
       ONE grid item, so its background/border reads as a single panel
       instead of three separately-placed boxes with gaps between them. */
    #playerStation.windowed .player-now-panel{
      grid-column:1; grid-row:4 / -1;
      align-self:start;
      padding:20px 16px 18px;
    }
    #playerStation.windowed .player-card{
      flex-direction:column; text-align:center;
    }
    #playerStation.windowed .player-disc-wrap{ width:96px; height:96px; }
    #playerStation.windowed .player-thumb{ width:96px; height:96px; }
    #playerStation.windowed .player-thumb span{ font-size:2rem; }
    #playerStation.windowed .player-meta{ align-items:center; }
    #playerStation.windowed .player-track,
    #playerStation.windowed .player-artist{ white-space:normal; text-align:center; }

    #playerStation.windowed .player-controls{ margin-top:16px; padding-top:16px; }
    #playerStation.windowed .player-vol-row{ margin-top:12px; padding-top:12px; }

    /* right column: one grid item spanning the same row range as the
       now-playing column (4 through the end), laid out with its OWN
       internal flexbox instead of being split into two separately
       row-placed grid items. That split was the cause of the big dead
       gap under "FOLDERS" — the label's row height was being forced to
       match the tall album-art row next to it (row 4), so the tabs
       below it couldn't start until *that* row ended. As one flex
       column, "folders" and the tabs sit right next to each other
       regardless of what the left column is doing. */
    #playerStation.windowed .folders-panel{
      grid-column:2; grid-row:4 / -1;
      display:flex; flex-direction:column; min-height:0; min-width:0;
      padding-left:18px; border-left:1px solid var(--panel-edge);
    }
    #playerStation.windowed .folders-panel > p.label{ flex:none; margin-bottom:8px; }
    #playerStation.windowed .genre-shelf{
      flex:1; display:flex; flex-direction:column; min-height:0; min-width:0;
    }
    #playerStation.windowed .genre-tabs{ flex:none; min-width:0; }
    /* the base .track-list rule caps this at max-height:240px for the
       compact docked popover, where the whole card (not just the list)
       needs to stay short. In windowed mode the list lives inside its own
       flexed, already-clipped column, so that cap just left flex:1 unable
       to actually grow the list to fill the space — the box stayed
       240px tall and the rest of the column sat empty beneath it. */
    #playerStation.windowed .track-list{ flex:1; min-height:0; min-width:0; max-height:none; overflow-y:auto; }
    #playerStation.windowed .radio-history{ flex:1; min-height:0; min-width:0; max-height:none; overflow-y:auto; }
  }

  /* spacious tier: once there's real desktop-app room, let the left pane
     breathe instead of just keeping the compact 560px sizing */
  @container player (min-width:860px){
    #playerStation.windowed .player-full-body{
      grid-template-columns: 280px minmax(0,1fr);
      column-gap:26px;
      padding:22px 26px 24px;
    }
    #playerStation.windowed .player-full-body > hr:first-of-type{ margin-bottom:18px; }
    #playerStation.windowed .player-now-panel{ padding:26px 22px 22px; }
    #playerStation.windowed .player-disc-wrap{ width:140px; height:140px; }
    #playerStation.windowed .player-thumb{ width:140px; height:140px; }
    #playerStation.windowed .player-thumb span{ font-size:2.7rem; }
    #playerStation.windowed .player-controls{ margin-top:18px; padding-top:18px; }
    #playerStation.windowed .player-vol-row{ margin-top:14px; padding-top:14px; }
    #playerStation.windowed .folders-panel{ padding-left:24px; }
  }


  .mini-progress-fill{
    height:100%; width:0%; background:var(--accent);
    border-radius:999px; transition:width .5s linear;
  }

  @media (max-width:720px), (max-height:500px) and (max-width:1024px){
    #playerStation{ right:10px; left:10px; bottom:70px; width:auto; }
  }

  /* dynamic island is a mobile-only control; hidden by default, the
     max-width:720px block below gives it its real layout */
  #dynamicIsland{ display:none; }
  @media (max-width:720px), (max-height:500px) and (max-width:1024px){
    #dynamicIsland{ display:flex; }
  }

  /* ===== SVG SCENE ANIMATIONS ===== */
  .moon-group{ opacity:1; transition:opacity .5s ease; }
  .sun-group{ opacity:0; transition:opacity .5s ease; }
  :root[data-theme="day"] .moon-group{ opacity:0; }
  :root[data-theme="day"] .sun-group{ opacity:1; }
  .stars{ opacity:1; transition:opacity .5s ease; }
  .clouds{ opacity:0; transition:opacity .5s ease; }
  :root[data-theme="day"] .stars{ opacity:0; }
  :root[data-theme="day"] .clouds{ opacity:1; }

  .star{ animation:twinkle 2.6s ease-in-out infinite; }
  .cloud{ animation:drift 14s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
  .raindrop{ animation:fall 1.1s linear infinite; }
  :root[data-theme="day"] .rain{ display:none !important; }

  /* city lights: night only */
  .city-lights{ opacity:0; transition:opacity .6s ease; }
  :root[data-theme="night"] .city-lights{ opacity:1; }
  .sun-rays{ animation:spin-slow 50s linear infinite; transform-box:fill-box; transform-origin:center; }
  .tail-group{ animation:sway 4.5s ease-in-out infinite; transform-box:fill-box; transform-origin:90% 90%; }
  .cat-body-group{ animation:breathe 4s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
  .ear-left{ animation:ear-twitch 6s ease-in-out infinite; transform-box:fill-box; transform-origin:bottom center; }
  .ear-right{ animation:ear-twitch 6s ease-in-out infinite 3s; transform-box:fill-box; transform-origin:bottom center; }
  .steam-wisp{ animation:steam-rise 3s ease-out infinite; transform-box:fill-box; transform-origin:bottom center; }
  .steam-wisp.s2{ animation-delay:1s; }
  .bulb{ animation:glow-pulse 2.4s ease-in-out infinite; }
  .vinyl-disc, .vinyl-label{ transform-box:fill-box; transform-origin:center; }
  .lofi-notes{ opacity:0; transition:opacity .3s ease; }
  .scene.lofi-on .vinyl-disc,.scene.lofi-on .vinyl-label{ animation:vinyl-spin 2.6s linear infinite; }
  .scene.lofi-on .lofi-notes{ opacity:1; }
  .note{ animation:note-float 4s ease-in infinite; opacity:0; }
  .note.n2{ animation-delay:1.3s; }
  .note.n3{ animation-delay:2.6s; }

  @keyframes twinkle{ 0%,100%{opacity:.25;} 50%{opacity:1;} }
  @keyframes drift{ 0%{transform:translateX(-8px);} 50%{transform:translateX(8px);} 100%{transform:translateX(-8px);} }
  @keyframes fall{ 0%{transform:translateY(-6px); opacity:0;} 12%{opacity:.8;} 85%{opacity:.8;} 100%{transform:translateY(180px); opacity:0;} }
  @keyframes spin-slow{ to{ transform:rotate(360deg); } }
  @keyframes sway{ 0%,100%{ transform:rotate(-5deg); } 50%{ transform:rotate(5deg); } }
  @keyframes breathe{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.015); } }
  @keyframes ear-twitch{ 0%,90%,100%{ transform:rotate(0deg); } 94%{ transform:rotate(-14deg); } 97%{ transform:rotate(6deg); } }
  @keyframes steam-rise{ 0%{ transform:translateY(0) scale(1); opacity:.55; } 100%{ transform:translateY(-26px) scale(1.4); opacity:0; } }
  @keyframes glow-pulse{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }
  @keyframes vinyl-spin{ to{ transform:rotate(360deg); } }
  @keyframes note-float{ 0%{ transform:translate(0,0) rotate(0deg); opacity:0; } 20%{ opacity:1; } 100%{ transform:translate(14px,-70px) rotate(20deg); opacity:0; } }
  @keyframes tv-spin{ to{ transform:rotate(360deg); } }

  @media (prefers-reduced-motion: reduce){
    *{ animation:none !important; transition:none !important; }
  }

  /* ===== DESKTOP WIDGETS ===== */
  .desk-widget{
    position:fixed; z-index:10;
    pointer-events:auto; user-select:none;
    cursor:grab;
    transition: box-shadow .2s ease, transform .15s ease;
  }
  .desk-widget:active{ cursor:grabbing; }
  .desk-widget.dragging{
    box-shadow:0 16px 48px var(--shadow), 0 4px 16px var(--shadow) !important;
    z-index:50;
  }

  .widget-clock{
    top:20px; left:20px;
    background:var(--panel); border:1px solid var(--panel-edge);
    border-radius:16px; padding:14px 18px;
    box-shadow:0 4px 18px var(--shadow);
    display:flex; flex-direction:column; align-items:flex-start; gap:3px;
    min-width:140px;
  }
  .clock-time{
    font-family:'Space Mono', monospace;
    font-size:1.65rem; font-weight:700; color:var(--text);
    letter-spacing:-.02em; line-height:1;
  }
  .clock-date{
    font-family:'Space Mono', monospace;
    font-size:.58rem; color:var(--text-muted); letter-spacing:.06em;
    text-transform:uppercase; margin-top:1px;
  }
  .clock-day{
    font-size:.72rem; color:var(--accent); font-weight:800;
    font-family:'Nunito', sans-serif;
  }

  .widget-cal{
    top:20px; left:210px;
    background:var(--panel); border:1px solid var(--panel-edge);
    border-radius:16px; padding:12px 14px;
    box-shadow:0 4px 18px var(--shadow);
    min-width:196px;
  }
  .cal-month{
    font-family:'Fredoka', sans-serif; font-size:.92rem;
    color:var(--text); font-weight:600; margin-bottom:8px;
    text-align:center;
  }
  .cal-grid{
    display:grid; grid-template-columns:repeat(7,1fr);
    gap:2px; text-align:center;
  }
  .cal-dow{
    font-family:'Space Mono', monospace; font-size:.5rem;
    color:var(--text-muted); padding:2px 0;
  }
  .cal-day{
    font-family:'Space Mono', monospace; font-size:.6rem;
    color:var(--text-muted); padding:3px 1px;
    border-radius:5px; line-height:1.4;
  }
  .cal-day.today{
    background:var(--accent); color:var(--bg);
    font-weight:700;
  }

  /* ── Haiku Widget ── sits below the mint "now listening" sticky, left column ── */
  .widget-haiku{
    top:330px; left:20px;
    background:var(--panel); border:1px solid var(--panel-edge);
    border-radius:16px; padding:16px 18px 14px;
    box-shadow:0 4px 18px var(--shadow);
    width:230px;
    display:flex; flex-direction:column; gap:10px;
  }
  .widget-haiku-header{
    font-family:'Space Mono', monospace; font-size:.55rem;
    color:var(--accent); letter-spacing:.1em; text-transform:uppercase;
    display:flex; align-items:center; gap:5px;
  }
  /* formal literary serif, sized between too-small and too-large */
  .widget-haiku-text{
    font-family:'Lora', serif; font-size:1rem; font-weight:500;
    line-height:1.6; color:var(--text);
    display:flex; flex-direction:column; gap:1px;
    transition:opacity .22s ease;
    min-height:68px;
  }
  /* author · country · year — bumped up from .52rem for legibility */
  .widget-haiku-meta{
    font-family:'Space Mono', monospace; font-size:.62rem;
    color:var(--text-muted); line-height:1.45;
    transition:opacity .22s ease;
  }

  /* ── Quote Widget ── sits below the lavender "note to self" sticky, right column ── */
  .widget-quote{
    top:400px; right:20px;
    background:var(--panel); border:1px solid var(--panel-edge);
    border-radius:16px; padding:16px 18px 14px;
    box-shadow:0 4px 18px var(--shadow);
    width:230px;
    display:flex; flex-direction:column; gap:10px;
  }
  .widget-quote-header{
    font-family:'Space Mono', monospace; font-size:.55rem;
    color:var(--accent-2); letter-spacing:.1em; text-transform:uppercase;
    display:flex; align-items:center; gap:5px;
  }
  /* bold, confident, declarative sans for quotes */
  .widget-quote-text{
    font-family:'Sora', sans-serif; font-size:.88rem; font-weight:600;
    line-height:1.5; color:var(--text);
    transition:opacity .22s ease;
    min-height:68px;
  }
  /* author · country · year — bumped up from .52rem for legibility */
  .widget-quote-meta{
    font-family:'Space Mono', monospace; font-size:.62rem;
    color:var(--text-muted); line-height:1.45;
    transition:opacity .22s ease;
  }

  /* ── Visitor Count Widget ── sits below the quote widget, right column ── */
  .widget-visitors{
    top:640px; right:20px;
    background:var(--panel); border:1px solid var(--panel-edge);
    border-radius:16px; padding:16px 18px 14px;
    box-shadow:0 4px 18px var(--shadow);
    width:230px;
    display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  }
  .widget-visitors-header{
    font-family:'Space Mono', monospace; font-size:.55rem;
    color:var(--accent); letter-spacing:.1em; text-transform:uppercase;
    display:flex; align-items:center; gap:5px;
  }
  .widget-visitors-count{
    font-family:'Space Mono', monospace; font-size:1.55rem; font-weight:700;
    color:var(--text); letter-spacing:-.02em; line-height:1.2;
    transition:opacity .25s ease;
  }
  .widget-visitors-sub{
    font-family:'Nunito', sans-serif; font-size:.68rem;
    color:var(--text-muted); line-height:1.4;
  }

  /* ── Shared widget next button ── */
  .widget-next-btn{
    align-self:flex-end;
    background:none; border:1px solid var(--panel-edge);
    border-radius:8px; padding:4px 11px;
    font-family:'Space Mono', monospace; font-size:.55rem;
    color:var(--text-muted); cursor:pointer;
    transition:background .15s, color .15s;
    pointer-events:auto;
  }
  .widget-next-btn:hover{
    background:var(--panel-edge); color:var(--text);
  }

  .sticky{
    position:fixed; z-index:10;
    padding:13px 15px 16px 16px;
    border-radius:3px 14px 14px 3px;
    box-shadow:3px 5px 18px var(--shadow);
    font-family:'Nunito', sans-serif; font-size:.78rem; line-height:1.58;
    color:#3a2e20;
    pointer-events:auto; user-select:none;
    max-width:168px;
    cursor:grab;
    transition: box-shadow .2s ease;
  }
  .sticky:active{ cursor:grabbing; }
  .sticky.dragging{
    box-shadow:6px 12px 32px rgba(0,0,0,.35) !important;
    z-index:50;
  }
  .sticky::before{
    content:''; position:absolute; top:0; left:0;
    width:5px; height:100%; border-radius:3px 0 0 3px;
    background:rgba(0,0,0,.13);
  }
  .sticky-title{
    font-weight:800; font-size:.8rem; margin-bottom:5px;
    display:flex; align-items:center; gap:5px;
  }
  .sticky-yellow{ background:#fef08a; }
  .sticky-pink{   background:#fda4af; }
  .sticky-mint{   background:#a7f3d0; }
  .sticky-lavender{ background:#ddd6fe; }

  .paw-print{
    position:fixed; z-index:8; pointer-events:none; user-select:none;
    font-size:1.2rem; opacity:.12;
    animation: paw-drift 16s ease-in-out infinite;
  }
  @keyframes paw-drift{
    0%,100%{ transform:translateY(0) rotate(var(--pr,0deg)); }
    50%{ transform:translateY(-14px) rotate(calc(var(--pr,0deg) + 10deg)); }
  }

  /* ===== POLAROID GARLAND ===== */
  .garland{
    position:fixed; top:0; left:0; right:0; z-index:6;
    height:165px; pointer-events:none; user-select:none;
    display:flex; align-items:flex-start; justify-content:center;
    gap:clamp(14px, 4vw, 46px);
    padding:0 16px;
    max-width:760px; margin:0 auto;
  }
  .garland-wire{
    position:absolute; top:0; left:0; width:100%; height:34px;
    overflow:visible;
  }
  .garland-wire path{
    fill:none; stroke:var(--text-muted); stroke-width:1.4;
    opacity:.5;
  }
  .garland-wire circle{ fill:var(--accent-2); }
  .polaroid{
    position:relative; margin-top:14px;
    width:78px; background:var(--panel);
    border:1px solid var(--panel-edge);
    border-radius:4px; padding:6px 6px 10px;
    box-shadow:2px 6px 14px var(--shadow);
    animation: polaroid-sway 7s ease-in-out infinite;
    transform-origin: top center;
    pointer-events:auto;
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .polaroid:hover{ box-shadow:3px 10px 22px var(--shadow); z-index:7; }
  .polaroid::before{
    content:''; position:absolute; top:-13px; left:50%;
    width:2px; height:14px; background:var(--text-muted); opacity:.5;
    transform:translateX(-50%);
  }
  .polaroid-photo{
    width:100%; aspect-ratio:1/1; border-radius:2px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.7rem; line-height:1;
  }
  .polaroid-cap{
    display:block; margin-top:6px; text-align:center;
    font-family:'Space Mono', monospace; font-size:.52rem;
    letter-spacing:.03em; color:var(--text-muted);
    white-space:nowrap;
  }
  @keyframes polaroid-sway{
    0%,100%{ transform: rotate(var(--tilt, -3deg)); }
    50%{ transform: rotate(calc(var(--tilt, -3deg) * -1)); }
  }
  .note-polaroid{ cursor: pointer; }
  .note-polaroid.note-ping{ animation: note-ping .35s cubic-bezier(.34,1.7,.64,1) forwards !important; }
  @keyframes note-ping{
    0%  { transform: rotate(0deg) scale(1); }
    40% { transform: rotate(-8deg) scale(1.25) translateY(-6px); }
    70% { transform: rotate(5deg) scale(1.1) translateY(-3px); }
    100%{ transform: rotate(var(--tilt,-3deg)) scale(1); }
  }
  @media (max-width:720px), (max-height:500px) and (max-width:1024px){ .garland{ display:none; } }
  @media (max-width:720px), (max-height:500px) and (max-width:1024px){ .desk-widget, .sticky, .paw-print{ display:none; } }

  /* ===== MOBILE ===== */
  @media (max-width:720px), (max-height:500px) and (max-width:1024px){

    /* --- Layout --- */
    body{ overflow:hidden; }
    .desktop{
      height:100vh; height:100dvh;
      overflow:hidden;
      display:flex; flex-direction:column;
      align-items:center; justify-content:center;
    }

    /* --- Hero --- */
    .hero{ padding-top:0; gap:8px; }
    .scene{ width:min(240px, 62vw); }
    .hero h1{ font-size:1.45rem; }
    .tagline{ font-size:.82rem; }
    .now-playing-wrap{ width:min(300px, 88vw); gap:6px; }
    .visualizer-wrap{ height:28px; margin-top:4px; }
    #vizCanvas{ height:28px; }



    /* --- Top controls --- */
    .top-controls{ top:12px; right:12px; gap:8px; flex-direction:column; }
    .icon-btn{ width:38px; height:38px; }

    /* shared metric: total floating-dock footprint, used to keep other
       fixed/scrollable elements from being tucked underneath it */
    :root{ --dock-h: 78px; }

    /* --- Dock: horizontally scrollable so it never gets crushed/clipped --- */
    .dock{
      bottom:max(12px, env(safe-area-inset-bottom));
      padding:6px 6px 8px;
      gap:2px;
      max-width:92vw;
      overflow-x:auto;
      overscroll-behavior-x:contain;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
      scroll-snap-type:x proximity;
      justify-content:flex-start;
      mask-image:linear-gradient(to right,transparent 0,black 14px,black calc(100% - 14px),transparent 100%);
      -webkit-mask-image:linear-gradient(to right,transparent 0,black 14px,black calc(100% - 14px),transparent 100%);
    }
    .dock::-webkit-scrollbar{ display:none; }
    .dock button{
      flex:none;
      scroll-snap-align:center;
    }
    .dock-icon{ width:42px; height:42px; font-size:1.25rem; border-radius:11px; }
    .dock .dock-label{ display:none; }
    .dock-dot{ bottom:1px; }
    .dock button:hover{ transform:none; }
    .dock button:active{ transform:scale(.92); }
    .dock-tooltip{ display:none; }

    /* --- More-apps folder buttons: match the main dock's mobile
       treatment (fixed-size icon square, no text label) instead of
       keeping their full desktop padding + visible label, which made
       them noticeably taller than every other dock-style button. --- */
    .folder-app-btn{
      width:42px; height:42px;
      padding:0; gap:0;
      border-radius:11px;
      justify-content:center;
      justify-self:center;
    }
    .folder-app-btn span:first-child{ font-size:1.25rem !important; line-height:1; }
    .folder-app-btn span:last-child{ display:none; }
    /* the grid + popup width were sized for desktop buttons with visible
       labels; shrink both so the now icon-only buttons read as a snug
       grid instead of floating in oversized cells */
    #moreAppsFolder{ width:168px !important; padding:12px 12px 14px !important; }
    #moreAppsFolder > div{ gap:6px !important; }

    /* --- Windows: bottom sheets with drag handle pill --- */
    #terminal-art-panel{ display:none !important; }
    #win-terminal{ width:100% !important; }

    /* files app: tree becomes a horizontal scrollable strip on top,
       code pane fills the rest of the sheet */
    #win-files{ width:100% !important; }
    .files-app{
      flex-direction:column;
      height:auto;
      max-height:calc(88dvh - 34px);
    }
    .files-tree{
      width:100%; flex:none;
      display:flex; align-items:center; gap:6px;
      overflow-x:auto; overflow-y:hidden;
      border-right:none; border-bottom:1px solid #1e1730;
      padding:10px 12px;
      -webkit-overflow-scrolling:touch;
    }
    .files-tree-label{ display:none; }
    .files-tree-item{
      flex:none; width:auto; margin-bottom:0; white-space:nowrap;
    }
    .files-tree-folder{
      flex:none; margin-top:0; border-top:none; border-left:1px dashed #241d33;
      white-space:nowrap;
    }
    .files-code{
      flex:1; min-height:280px;
      padding-bottom:max(
        calc(var(--dock-h) + 10px),
        calc(env(safe-area-inset-bottom, 0px) + var(--dock-h) + 10px)
      );
    }
    .assets-grid{ grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); }
    .assets-summary{ margin-left:0; width:100%; }
    .asset-overlay{ padding:10px; }
    .asset-overlay-nav{ width:36px; height:36px; font-size:1.1rem; }
    .asset-overlay-nav.prev{ left:2px; }
    .asset-overlay-nav.next{ right:2px; }
    .avp-video{ max-height:46vh; }
    .avp-vol{ width:46px; }
    .win{
      position:fixed !important;
      left:0 !important; right:0 !important; bottom:0 !important;
      top:auto !important;
      width:100% !important; max-width:100% !important;
      max-height:88dvh;
      border-radius:20px 20px 0 0;
    }
    /* same opened-once guard as desktop: only animate in on the very
       first open, not on every restore-from-minimized */
    .win.visible:not(.opened-once){ animation: mobileWinOpen .28s cubic-bezier(.32,1.2,.54,1) both; }
    @keyframes mobileWinOpen{
      from{ transform:translateY(40px); opacity:0; }
      to  { transform:translateY(0);    opacity:1; }
    }
    /* minimize on mobile: slide the whole sheet down off-screen toward
       the dock instead of a genie-to-icon effect (no fixed icon target
       worth flying to on a bottom-sheet layout) */
    .win.minimizing{
      animation:none;
      transition: transform .32s cubic-bezier(.5,0,.85,.25), opacity .28s ease .03s;
      transform:translateY(100%);
      opacity:0;
      pointer-events:none;
    }
    .win.restoring{
      animation:none;
      transition: transform .3s cubic-bezier(.32,1.3,.5,1), opacity .26s ease;
    }
    /* drag handle pill */
    .win::before{
      content:'';
      display:block;
      width:36px; height:4px;
      border-radius:999px;
      background:var(--panel-edge);
      margin:8px auto 0;
    }
    .win-bar{ cursor:default; border-radius:0; height:34px; }
    .win-resize-handle{ display:none; }
    .win-body{
      max-height:calc(88dvh - 50px);
      padding:16px 18px;
      /* leave enough room so the last bit of content never sits behind
         the floating dock when the sheet is scrolled to its end */
      padding-bottom:max(
        calc(var(--dock-h) + 18px),
        calc(env(safe-area-inset-bottom, 0px) + var(--dock-h) + 18px)
      );
    }

    /* same dock-safe reservation every other window's .win-body gets —
       #win-tv's win-body uses an inline padding:0 + overflow:hidden (so
       the video screen sits flush), which was clobbering both the
       padding-bottom AND the ability to scroll to reach it, leaving the
       prev/next buttons stuck behind the floating dock with no escape. */
    #win-tv .win-body{
      overflow-y:auto !important;
      padding-bottom:max(
        calc(var(--dock-h) + 18px),
        calc(env(safe-area-inset-bottom, 0px) + var(--dock-h) + 18px)
      ) !important;
    }

    /* same problem, same fix, for the rest of the "more apps" folder —
       palette/wallpaper/slots all set their own inline padding on
       .win-body, which clobbers the dock-safe padding-bottom above just
       like #win-tv did. */
    #win-palette .win-body,
    #win-wallpaper .win-body,
    #win-slots .win-body{
      overflow-y:auto !important;
      padding-bottom:max(
        calc(var(--dock-h) + 18px),
        calc(env(safe-area-inset-bottom, 0px) + var(--dock-h) + 18px)
      ) !important;
    }

    /* terminal isn't built from .win-body at all — it's a custom flex
       column with an inline fixed height (480px) and its input row
       pinned to the bottom of that box, so it never got any dock
       clearance in the first place. Shrink the box and let the output
       area absorb the difference so the input row stays above the dock. */
    #win-terminal > div > div:last-child > div:last-child{
      padding-bottom:max(
        calc(var(--dock-h) + 14px),
        calc(env(safe-area-inset-bottom, 0px) + var(--dock-h) + 14px)
      ) !important;
    }

    /* --- Player station: on mobile, the old bottom mini-bar is fully
         replaced by the dynamic island pinned at the top of the screen.
         #playerStation itself is repositioned to drop the full player
         panel down from the island instead of floating bottom-right. --- */
    #playerStation{
      position:fixed !important;
      top:calc(max(10px, env(safe-area-inset-top)) + 30px + 8px) !important;
      left:50% !important; right:auto !important; bottom:auto !important;
      width:min(380px, 92vw) !important;
      transform:translate(-50%, -8px) !important;
      opacity:0;
      pointer-events:none;
      transition: opacity .25s ease, transform .25s ease;
      z-index:399;
    }
    #playerStation.mini{
      transform:translate(-50%, 0) !important;
      opacity:1;
      pointer-events:auto;
    }
    /* the panel should only ever be interactive/visible while actually
       expanded — "mini" alone (island showing, sheet collapsed) keeps it
       hidden so it doesn't sit invisible-but-clickable under the island */
    #playerStation:not(.expanded){
      opacity:0 !important;
      pointer-events:none !important;
    }
    .mini-bar{ display:none !important; }
    .player-full{
      border-radius:0 0 18px 18px;
      border-top:none;
    }
    #playerStation.expanded .player-full{
      max-height:min(70dvh, 560px);
    }
    .player-full-body{ max-height:min(calc(70dvh - 38px), 522px); }
    .track-list{ max-height:160px; }

    /* --- DYNAMIC ISLAND (mobile mini player) --- */
    #dynamicIsland{
      position:fixed;
      top:max(10px, env(safe-area-inset-top));
      left:50%;
      transform:translateX(-50%);
      z-index:401;
      display:flex;
      flex-direction:row;
      flex-wrap:nowrap;
      align-items:center;
      justify-content:flex-start;
      gap:7px;
      width:auto;
      height:30px;
      min-height:30px;
      max-height:30px;
      padding:0 12px 0 4px;
      border-radius:999px;
      background:#0b0712;
      box-shadow:0 6px 20px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.5);
      cursor:pointer;
      max-width:40px;
      white-space:nowrap;
      overflow:hidden;
      transition: max-width .42s cubic-bezier(.32,1.25,.5,1),
                  padding .42s cubic-bezier(.32,1.25,.5,1),
                  gap .3s ease, opacity .25s ease;
      opacity:0;
      pointer-events:none;
    }
    #dynamicIsland.show{ opacity:1; pointer-events:auto; }
    #dynamicIsland.playing{ max-width:min(210px, 72vw); }
    /* hidden while the full player sheet is open underneath it */
    #dynamicIsland.station-expanded{ opacity:0; pointer-events:none; }

    .island-dot{
      flex:none; flex-shrink:0;
      width:22px; height:22px; border-radius:50%; overflow:hidden;
      background:linear-gradient(145deg, var(--accent-2), var(--accent));
      display:flex; align-items:center; justify-content:center;
      font-size:.65rem;
    }
    .island-dot img{ width:100%; height:100%; object-fit:cover; display:block; }

    .island-meta{
      flex:1 1 auto; min-width:0; max-width:130px;
      display:flex; flex-direction:row; align-items:baseline;
      gap:5px;
      opacity:0; transition:opacity .2s ease .08s;
      overflow:hidden;
      white-space:nowrap;
    }
    #dynamicIsland.playing .island-meta{ opacity:1; }
    .island-track{
      flex:0 1 auto; min-width:0;
      font-size:.64rem; font-weight:700; color:#f3ead9;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
      margin:0; line-height:1;
    }
    .island-artist{
      flex:none;
      font-size:.54rem; color:#b9aed0;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
      margin:0; line-height:1;
    }

    .island-wave{
      flex:none; flex-shrink:0;
      display:flex; align-items:center; justify-content:center;
      gap:2px; width:14px; height:14px;
      opacity:0; transition:opacity .2s ease;
    }
    #dynamicIsland.playing.is-playing .island-wave{ opacity:1; }
    .island-wave span{
      display:block; width:2px; height:4px; border-radius:1px;
      background:var(--accent);
      animation: island-bar 1s ease-in-out infinite;
    }
    .island-wave span:nth-child(2){ animation-delay:.15s; }
    .island-wave span:nth-child(3){ animation-delay:.3s; }
    @keyframes island-bar{
      0%,100%{ height:4px; }
      50%{ height:10px; }
    }

    /* idle (collapsed) state: a plain dot, centered, no text/wave showing */
    #dynamicIsland:not(.playing){ justify-content:center; padding:0; gap:0; }
    #dynamicIsland:not(.playing) .island-dot{ width:30px; height:30px; }

    /* --- Notification toast: centered above the dock --- */
    #headphone-toast{
      left:50% !important;
      bottom:max(80px, calc(env(safe-area-inset-bottom, 0px) + 80px)) !important;
      transform:translateX(-50%) translateY(calc(100% + 40px)) !important;
      width:min(300px, 88vw) !important;
    }
    #headphone-toast.show{
      transform:translateX(-50%) translateY(0) !important;
    }

    /* --- Footer: hidden on mobile --- */
    footer{ display:none; }
  }

  /* --- Landscape phones: short, wide viewport (e.g. a phone rotated
     sideways). The vertical hero stack — cat scene, title, tagline,
     now-playing pill, visualizer — is sized for portrait phones above
     and is too tall to fit a ~360-430px-tall screen, so it gets clipped
     by .desktop's overflow:hidden. Shrink it down and stop centering
     vertically so everything stays visible and the dock/island don't
     overlap it. Scoped tightly to short+wide so portrait phones and
     tablets are unaffected. --- */
  @media (max-height:500px) and (max-width:1024px) and (orientation:landscape){
    .desktop{ justify-content:flex-start; padding-top:max(34px, calc(env(safe-area-inset-top, 0px) + 34px)); }
    .hero{ gap:3px; max-height:100dvh; overflow:hidden; }
    .scene{ width:min(96px, 22vh); }
    .hero h1{ font-size:1rem; }
    .tagline{ font-size:.7rem; max-width:240px; }
    .now-playing-wrap{ width:min(230px, 60vw); gap:3px; }
    .visualizer-wrap{ height:16px; margin-top:2px; }
    #vizCanvas{ height:16px; }
  }

/* ===== Component: egg/game dots ===== */
          .egg-dot{
            display:inline-block;width:10px;height:10px;border-radius:50%;
            background:var(--panel-edge);border:1px solid var(--panel-edge);
            transition:background .2s,transform .2s;
          }
          .egg-dot.lit{ background:var(--accent);transform:scale(1.25); }
          @keyframes egg-wiggle{
            0%,100%{transform:rotate(0);}
            20%{transform:rotate(-10deg) scale(1.05);}
            40%{transform:rotate(10deg) scale(1.05);}
            60%{transform:rotate(-6deg);}
            80%{transform:rotate(6deg);}
          }
          @keyframes egg-crack-flash{
            0%{opacity:0;} 30%{opacity:1;} 100%{opacity:0;}
          }
          @keyframes egg-hatch-burst{
            0%{opacity:1;transform:scale(1);}
            60%{opacity:.4;transform:scale(1.4);}
            100%{opacity:0;transform:scale(2);}
          }

/* ===== Component: slots / tama / help overlay ===== */
    /* slot reels */
    .slot-reel{
      width:64px; height:64px; overflow:hidden;
      background:var(--win-body); border:1px solid var(--panel-edge);
      border-radius:8px; position:relative;
    }
    .slot-inner{
      display:flex; flex-direction:column;
      transition:transform .0s;
    }
    .slot-cell{
      width:64px; height:64px;
      display:flex; align-items:center; justify-content:center;
      font-size:1.5rem; flex:none;
    }
    /* ball shake anim */
    @keyframes ball-shake{
      0%,100%{ transform:rotate(0deg) scale(1); }
      15%{ transform:rotate(-12deg) scale(1.06); }
      30%{ transform:rotate(10deg) scale(.96); }
      45%{ transform:rotate(-8deg) scale(1.04); }
      60%{ transform:rotate(6deg) scale(.98); }
      75%{ transform:rotate(-4deg) scale(1.02); }
    }
    #tama-win-body{ padding:16px 16px 20px; }
    @media (max-width:720px), (max-height:500px) and (max-width:1024px){
      /* same dock-safe reservation every other window's .win-body gets —
         tama-win-body used an inline padding override that was clobbering it */
      #tama-win-body{
        padding-bottom:max(
          calc(var(--dock-h) + 18px),
          calc(env(safe-area-inset-bottom, 0px) + var(--dock-h) + 18px)
        ) !important;
      }
    }
    .tama-action-grid{
      display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:8px;
    }
    /* Orientation change: at narrow game-window widths, 4 buttons across
       gets too cramped to tap comfortably — switch to a 2x2 grid instead
       of letting the 4 columns just keep shrinking. */
    @container win (max-width: 340px){
      .tama-action-grid{ grid-template-columns:repeat(2,1fr); }
    }
    .tama-status-row{
      display:flex; align-items:center; justify-content:space-between;
      margin-bottom:8px; gap:8px;
    }
    .tama-status-left{ display:flex; align-items:center; gap:8px; min-width:0; }
    .tama-status-right{ display:flex; gap:10px; align-items:center; flex:none; }
    /* Orientation change: name/badges and the age·score·tier readout no
       longer fit on one line at narrow widths — stack them instead of
       letting them crowd together or spill past the window edge. */
    @container win (max-width: 320px){
      .tama-status-row{ flex-direction:column; align-items:flex-start; gap:4px; }
    }
    .tama-action-btn{
      display:flex;flex-direction:column;align-items:center;gap:3px;
      background:var(--panel);border:1px solid var(--panel-edge);
      border-radius:12px;padding:8px 4px;cursor:pointer;
      color:var(--text);font-family:'Nunito',sans-serif;font-size:.72rem;font-weight:700;
      transition:background .15s,transform .15s,border-color .15s;
      box-shadow:0 2px 5px var(--shadow);
    }
    .tama-action-btn:hover{background:var(--panel-edge);transform:translateY(-2px);}
    .tama-action-btn:active{transform:translateY(1px);}
    .tama-action-btn:disabled{opacity:.35;cursor:not-allowed;transform:none;}
    .tama-pick-card{
      display:flex;flex-direction:column;align-items:center;gap:4px;
      background:var(--panel);border:2px solid var(--panel-edge);
      border-radius:14px;padding:10px 5px 8px;cursor:pointer;
      transition:background .15s,transform .15s,border-color .15s;
      box-shadow:0 2px 8px var(--shadow);
    }
    .tama-pick-card:hover{background:var(--panel-edge);transform:translateY(-3px);border-color:var(--accent);}
    @keyframes tama-fx-float{
      0%{opacity:1;transform:translateY(0) scale(1);}
      100%{opacity:0;transform:translateY(-44px) scale(1.3);}
    }
    #tama-minigame{ display:none; }
    #tama-minigame.active{ display:flex !important; }
    #tama-event-overlay.active{ display:flex !important; }

    /* ── Help button (title bar) ── */
    .tama-help-btn{
      width:20px;height:20px;border-radius:50%;flex:none;
      background:var(--panel);border:1px solid var(--panel-edge);
      color:var(--text-muted);font-family:'Space Mono',monospace;
      font-size:.72rem;font-weight:700;line-height:1;
      display:flex;align-items:center;justify-content:center;
      cursor:pointer;transition:background .15s,color .15s,transform .15s;
    }
    .tama-help-btn:hover{background:var(--accent);color:var(--bg);transform:scale(1.08);}
    .tama-help-btn:active{transform:scale(.95);}

    /* ── Help / how-to-play overlay ── */
    .tama-help-overlay{
      display:none;position:absolute;inset:0;z-index:50;
      background:rgba(0,0,0,.55);border-radius:14px;
      align-items:center;justify-content:center;padding:14px;
    }
    .tama-help-overlay.active{ display:flex; }
    .tama-help-card{
      position:relative;width:100%;max-width:340px;max-height:100%;overflow-y:auto;
      background:var(--win-body, var(--panel));border:1px solid var(--panel-edge);
      border-radius:16px;padding:20px 18px 16px;
      box-shadow:0 12px 32px var(--shadow);
      font-family:'Nunito',sans-serif;color:var(--text);
    }
    .tama-help-card h3{
      font-family:'Fredoka',sans-serif;font-size:.95rem;margin:0 0 6px;
    }
    .tama-help-card h3:not(:first-child){ margin-top:14px; }
    .tama-help-card p{ font-size:.82rem;line-height:1.5;margin:0 0 8px;color:var(--text); }
    .tama-help-card ul{ margin:0 0 8px;padding-left:18px; }
    .tama-help-card li{ font-size:.82rem;line-height:1.6; }
    .tama-help-close{
      position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:50%;
      background:var(--panel);border:1px solid var(--panel-edge);color:var(--text-muted);
      font-size:1.1rem;line-height:1;cursor:pointer;
      display:flex;align-items:center;justify-content:center;
      transition:background .15s,color .15s;
    }
    .tama-help-close:hover{ background:var(--accent);color:var(--bg); }

    @media (max-width:720px), (max-height:500px) and (max-width:1024px){
      .tama-help-btn{ width:26px;height:26px;font-size:.82rem; }
      .tama-help-close{ width:30px;height:30px; }
    }
/* ===== BOOT SEQUENCE ===== */
#boot-screen{
  position:fixed;inset:0;background:#0d0b14;z-index:9999;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:'Space Mono',monospace;color:#f3ead9;
  transition:opacity 1.1s cubic-bezier(.4,0,.2,1);
}
#boot-screen.fade-out{opacity:0;pointer-events:none;}
.boot-logo{font-size:3.5rem;margin-bottom:12px;animation:boot-rise .8s cubic-bezier(.22,1,.36,1) both;}
.boot-title{font-family:'Fredoka',sans-serif;font-size:1.6rem;color:#f3b27a;margin-bottom:4px;animation:boot-rise .8s .15s cubic-bezier(.22,1,.36,1) both;}
.boot-sub{font-size:.65rem;color:#ad9fc9;letter-spacing:.15em;text-transform:uppercase;margin-bottom:40px;animation:boot-rise .8s .28s cubic-bezier(.22,1,.36,1) both;}
.boot-log{width:min(480px,88vw);background:#1a1430;border:1px solid #352b4c;border-radius:10px;padding:14px 18px;font-size:.68rem;line-height:1.9;color:#ad9fc9;min-height:130px;animation:boot-rise .7s .38s cubic-bezier(.22,1,.36,1) both;}
.boot-log .ok{color:#a3e6a0;}.boot-log .warn{color:#f3b27a;}.boot-log .info{color:#818cf8;}
.boot-log-line{display:block;animation:boot-line-in .4s cubic-bezier(.22,1,.36,1) both;}
.boot-bar-wrap{width:min(480px,88vw);margin-top:18px;animation:boot-rise .7s .44s cubic-bezier(.22,1,.36,1) both;}
.boot-bar-label{font-size:.6rem;color:#ad9fc9;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px;display:flex;justify-content:space-between;}
.boot-bar-track{width:100%;height:6px;background:#1a1430;border:1px solid #352b4c;border-radius:999px;overflow:hidden;}
.boot-bar-fill{
  height:100%;width:0%;border-radius:999px;
  background:linear-gradient(90deg,#7c3aed,#e6a0b8,#f3b27a);
  background-size:200% 100%;
  transition:width .5s cubic-bezier(.4,0,.2,1);
  animation:boot-shimmer 2.5s linear infinite;
}
.boot-skip{margin-top:22px;font-size:.6rem;color:#473a63;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;border:none;background:none;font-family:'Space Mono',monospace;transition:color .3s ease;animation:boot-rise .6s .6s both;}
.boot-skip:hover{color:#ad9fc9;}
@keyframes boot-rise{
  from{opacity:0;transform:translateY(16px);}
  to  {opacity:1;transform:translateY(0);}
}
@keyframes boot-line-in{
  from{opacity:0;transform:translateX(-8px);}
  to  {opacity:1;transform:translateX(0);}
}
@keyframes boot-shimmer{
  0%  {background-position:200% 0;}
  100%{background-position:-200% 0;}
}