@font-face {
      font-family: 'VisbyCF';
      src: url('../../fonts/VisbyCF-Medium.woff2') format('woff2');
      font-weight: 500;
    }
    @font-face {
      font-family: 'VisbyCF';
      src: url('../../fonts/VisbyCF-Bold.woff2') format('woff2');
      font-weight: 700;
    }
    @font-face {
      font-family: 'VisbyHeavy';
      src: url('../../fonts/VisbyHeavy.woff') format('woff');
      font-weight: 900;
    }

    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    html, body {
      width: 100%; height: 100%;
      overflow: hidden;
      background: #000;
      cursor: none;
    }

    .scene {
      width: 100%; height: 100%;
      display: flex; align-items: center; justify-content: center;
    }

    /* ─────────────────────────────────────
       BROWSER WINDOW
    ───────────────────────────────────── */
    /* === RETRO / STAGE / EMOJI CSS RIMOSSO === */
    .scene   { display: none !important; }
    #stage, #emoji-flood, #shoe-kicker, #broom-sweeper, #final { display: none !important; }

    /* browser: nascosto di default, visibile con .open */
    .browser {
      display: none;
      position: fixed;
      top: 50%; left: 50%;
      width: 960px; height: 640px;
      max-width: 96vw; max-height: 90vh;
      z-index: 5500;
    }
    @keyframes browserPop {
      from { opacity: 0; transform: translate(-50%, -50%) scale(0.05); }
      to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    }
    .browser.open {
      display: flex; flex-direction: column;
      animation: browserPop 0.18s cubic-bezier(0.22,1,0.36,1) forwards;
      transform: translate(-50%, -50%);
    }

    .browser-gone {
      width: 960px; height: 640px;
      border-radius: 3px 3px 0 0;
      border: 2px solid #0038a8;
      border-bottom-color: #003090;
      overflow: hidden;
      flex-shrink: 0;
      position: relative; z-index: 230;
      will-change: transform, opacity;
      opacity: 0;
      background: #fff;
      display: flex; flex-direction: column; align-items: stretch;
      box-shadow: 0 0 0 1px #002880, 0 60px 180px rgba(0,0,0,1);
    }

    /* ── IE6 / Windows XP chrome ── */

    /* Title bar */
    .ie-titlebar {
      height: 22px; flex-shrink: 0;
      background: linear-gradient(180deg,
        #5b97f8 0%, #4282f0 18%, #2e6ee8 40%,
        #1c5cd8 65%, #1050cc 100%);
      display: flex; align-items: center;
      justify-content: space-between;
      padding: 0 2px 0 5px;
      font-family: 'Tahoma', Arial, sans-serif;
      font-size: 11px; font-weight: bold;
      color: #fff;
      text-shadow: 1px 1px 1px rgba(0,0,80,0.5);
      user-select: none;
    }
    .ie-title-left {
      display: flex; align-items: center; gap: 4px;
      overflow: hidden; white-space: nowrap;
    }
    .ie-title-icon { width: 14px; height: 14px; object-fit: contain; flex-shrink: 0; }
    .ie-winbtns   { display: flex; gap: 2px; flex-shrink: 0; }
    .ie-btn {
      width: 21px; height: 17px;
      display: flex; align-items: center; justify-content: center;
      cursor: default; border: none; padding: 0;
      background: none; box-shadow: none; outline: none;
    }
    .ie-btn img { width: 100%; height: 100%; object-fit: contain; display: block; }
    .ie-min, .ie-max, .ie-close { background: none; border: none; }

    /* Menu bar */
    .ie-menubar {
      height: 18px; flex-shrink: 0;
      background: #d4d0c8;
      border-bottom: 1px solid #808080;
      display: flex; align-items: center; padding: 0 2px;
      font-family: 'Tahoma', Arial, sans-serif; font-size: 11px;
      color: #000; user-select: none;
    }
    .ie-menubar span {
      padding: 1px 8px; cursor: default; height: 100%;
      display: flex; align-items: center;
    }
    .ie-menubar span:hover { background: #0a64d0; color: #fff; }

    /* Nav toolbar */
    .ie-toolbar {
      height: 30px; flex-shrink: 0;
      background: linear-gradient(180deg,#ede9e0 0%,#ccc8bc 100%);
      border-bottom: 1px solid #9a9690;
      display: flex; align-items: center;
      padding: 2px 4px; gap: 1px; overflow: hidden;
    }
    .ie-navbtn {
      height: 24px; padding: 0 7px;
      background: linear-gradient(180deg,#f4f0e8 0%,#ddd8cc 100%);
      border: 1px solid transparent;
      font-family: 'Tahoma', Arial, sans-serif; font-size: 10px;
      color: #000; cursor: default; white-space: nowrap;
      display: flex; align-items: center; gap: 3px;
    }
    .ie-navbtn:hover {
      border-color: #316ac5; background: linear-gradient(180deg,#d9eeff 0%,#a8d0f0 100%);
    }
    .ie-navbtn.disabled { color: #a0a0a0; }
    .ie-tsep { width: 1px; height: 22px; background: #a0a0a0; margin: 0 3px; flex-shrink: 0; }

    /* Address bar */
    .ie-addrbar {
      height: 24px; flex-shrink: 0;
      background: linear-gradient(180deg,#ede9e0 0%,#d0ccbf 100%);
      border-bottom: 2px solid #9a9690;
      display: flex; align-items: center;
      padding: 1px 4px; gap: 3px;
      font-family: 'Tahoma', Arial, sans-serif; font-size: 11px;
    }
    .ie-addr-label { color: #000; white-space: nowrap; padding-right: 2px; }
    .ie-addr-field {
      flex: 1; background: #fff;
      border: 1px solid; border-color: #606060 #d8d8d8 #d8d8d8 #606060;
      height: 18px; display: flex; align-items: center;
      padding: 0 4px; gap: 3px;
      font-family: 'Tahoma', monospace; font-size: 11px;
      color: #000; overflow: hidden; white-space: nowrap;
    }
    .ie-go {
      height: 18px; padding: 0 8px;
      background: linear-gradient(180deg,#f4f0e8 0%,#d8d4c8 100%);
      border: 1px solid; border-color: #e8e4dc #808070 #808070 #e8e4dc;
      font-family: 'Tahoma', Arial, sans-serif; font-size: 11px;
      cursor: default; color: #000;
    }

    /* Status bar */
    .ie-statusbar {
      height: 20px; flex-shrink: 0;
      background: #d4d0c8;
      border-top: 1px solid #808080;
      display: flex; align-items: center;
      justify-content: space-between;
      padding: 0 6px;
      font-family: 'Tahoma', Arial, sans-serif; font-size: 11px;
      color: #000;
    }
    .ie-zone {
      border-left: 1px solid #a0a0a0;
      padding-left: 8px; display: flex; align-items: center; gap: 3px;
    }

    /* ─────────────────────────────────────
       RETRO SITE
    ───────────────────────────────────── */
    .retro-wrap {
      height: 540px;
      flex-shrink: 0;
      overflow: hidden;
      background: #000080;
      font-family: 'Comic Relief', 'Comic Sans MS', cursive;
      position: relative;
    }

    /* Starfield */
    .stars {
      position: absolute; inset: 0; pointer-events: none;
      background:
        radial-gradient(2px 2px at 4% 9%,   #fff, transparent),
        radial-gradient(1px 1px at 13% 65%,  #fff, transparent),
        radial-gradient(1.5px 1.5px at 24% 22%, #fff, transparent),
        radial-gradient(1px 1px at 37% 82%,  #fff, transparent),
        radial-gradient(2px 2px at 49% 4%,   #fff, transparent),
        radial-gradient(1px 1px at 56% 53%,  #fff, transparent),
        radial-gradient(1.5px 1.5px at 68% 28%, #fff, transparent),
        radial-gradient(1px 1px at 75% 74%,  #fff, transparent),
        radial-gradient(2px 2px at 86% 14%,  #fff, transparent),
        radial-gradient(1px 1px at 93% 60%,  #fff, transparent),
        radial-gradient(1px 1px at 19% 46%,  #fff, transparent),
        radial-gradient(1.5px 1.5px at 43% 37%, #fff, transparent),
        radial-gradient(1px 1px at 61% 91%,  #fff, transparent),
        radial-gradient(1px 1px at 79% 6%,   #fff, transparent),
        radial-gradient(1.5px 1.5px at 96% 42%, #fff, transparent),
        radial-gradient(1px 1px at 8% 93%,   #fff, transparent);
    }

    .retro-body { position: relative; z-index: 1; text-align: center; }

    /* Marquee */
    .mq { background: #bb0000; color: #fff; overflow: hidden; padding: 3px 0; font-size: 12px; }
    @keyframes mq { from { transform: translateX(100%); } to { transform: translateX(-180%); } }
    .mq-text { display: inline-block; white-space: nowrap; animation: mq 16s linear infinite; }

    /* Blink */
    @keyframes bl { 0%,49%{opacity:1} 50%,100%{opacity:0} }
    .bl { animation: bl 0.85s step-end infinite; }

    /* Rainbow */
    @keyframes rb {
      0%{color:#f00} 14%{color:#f80} 28%{color:#ff0}
      42%{color:#0f0} 57%{color:#0ff} 71%{color:#88f} 85%{color:#f0f} 100%{color:#f00}
    }
    .rb { animation: rb 1.8s linear infinite; font-weight: bold; }

    /* Spin */
    @keyframes sp { to { transform: rotate(360deg); } }
    .sp { display: inline-block; animation: sp 1.2s linear infinite; }

    /* Big title */
    .big-title {
      font-size: 52px; font-weight: bold;
      color: #fff; letter-spacing: 4px;
      text-shadow: 4px 4px 0 #f0f, 8px 8px 0 #0ff;
      padding: 6px 0 2px; line-height: 1;
    }

    /* Gradient hr */
    .ghr {
      border: none; height: 4px; margin: 5px 0;
      background: linear-gradient(to right, transparent, #f0f 20%, #0ff 50%, #ff0 80%, transparent);
    }

    /* Hit counter */
    .counter {
      background: #000; color: #0f0;
      font-family: 'Courier New', monospace;
      font-size: 18px; letter-spacing: 4px;
      padding: 3px 10px; border: 2px solid #0f0;
      display: inline-block;
    }

    /* Table layout */
    .layout-table { width: 100%; border-collapse: collapse; }
    .layout-table td { border: 2px ridge #5555aa; padding: 8px; background: #000068; vertical-align: top; }
    .retro-body a { color: #0ff; text-decoration: underline; }
    .retro-body a:visited { color: #f0f; }

    /* Badge */
    .badge {
      font-size: 9px; padding: 2px 5px; border: 1px solid;
      font-family: Arial, sans-serif; display: inline-block;
    }

    /* ─────────────────────────────────────
       GIANT CURSOR
    ───────────────────────────────────── */
    #giant-cur {
      position: fixed; z-index: 1000;
      pointer-events: none;
      width: 112px; height: 136px;
      opacity: 0;
      will-change: transform, left, top, opacity;
    }

    /* ─────────────────────────────────────
       KINETIC TEXT STAGE
    ───────────────────────────────────── */
    #stage {
      position: fixed; inset: 0;
      display: flex; align-items: center; justify-content: center;
      pointer-events: none;
    }

    #stage-line {
      font-family: 'VisbyCF', -apple-system, sans-serif;
      font-weight: 700;
      font-size: 30px;
      color: #fff;
      line-height: 1.5;
      text-align: center;
      max-width: 900px;
      width: 90vw;
      padding: 0 40px;
      opacity: 0;
      transform: translateY(12px);
    }

    #stage-line.in {
      opacity: 1;
      transform: translateY(0);
      transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.19, 1, 0.22, 1);
    }

    #stage-line.out {
      opacity: 0;
      transform: translateY(-10px);
      transition: opacity 0.4s ease, transform 0.4s ease;
    }

    /* dim = negative/dismissed statement */
    #stage-line.dim { color: #666; }

    /* Shoe kick exit */
    #stage-line.kicked {
      opacity: 0;
      transform: translateX(-170%);
      transition: transform 0.28s cubic-bezier(0.55, 0, 1, 0.45), opacity 0.22s ease 0.04s;
    }

    /* Mobile: text stomped downward with squish */
    #stage-line.stomped {
      opacity: 0;
      transform: translateY(80px) scaleY(0.04);
      transform-origin: bottom center;
      transition: transform 0.55s cubic-bezier(0.55, 0, 1, 0.45), opacity 0.4s ease 0.15s;
    }

    /* Mobile shoe stomp bob */
    @keyframes shoe-stomp-bob {
      0%   { transform: scaleX(-1) translateY(0px);   }
      40%  { transform: scaleX(-1) translateY(-10px); }
      100% { transform: scaleX(-1) translateY(0px);   }
    }

    /* Shoe emoji */
    #shoe-kicker {
      position: fixed;
      font-size: 76px;
      line-height: 1;
      pointer-events: none;
      z-index: 999;
      opacity: 0;
      transform: scaleX(-1);
    }

    /* Walking bob animation (scaleX(-1) included so keyframe doesn't fight base) */
    @keyframes shoe-walk {
      0%   { transform: scaleX(-1) translateY(0px)   rotate(0deg);   }
      22%  { transform: scaleX(-1) translateY(-11px) rotate(-12deg); }
      50%  { transform: scaleX(-1) translateY(0px)   rotate(0deg);   }
      72%  { transform: scaleX(-1) translateY(-8px)  rotate(-8deg);  }
      100% { transform: scaleX(-1) translateY(0px)   rotate(0deg);   }
    }
    #shoe-kicker.walking {
      animation: shoe-walk 0.36s ease-in-out infinite;
    }

    /* ─────────────────────────────────────
       SPECIAL BUILD LINE (Progettiamo…)
    ───────────────────────────────────── */
    .sp-wrap {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      justify-content: center;
      column-gap: 0.28em;
      row-gap: 0.15em;
      padding-top: 62px; /* room for emoji above */
    }

    .sp-emoji {
      position: absolute;
      top: 4px; left: 50%;
      font-size: 48px; line-height: 1;
      opacity: 0;
      transform: translateX(-50%) scale(0.3) translateY(-14px);
      transition: opacity 0.18s ease, transform 0.26s cubic-bezier(0.34, 1.5, 0.64, 1);
    }
    .sp-emoji.vis {
      opacity: 1;
      transform: translateX(-50%) scale(1) translateY(0);
    }
    .sp-emoji.gone {
      opacity: 0;
      transform: translateX(-50%) scale(0.55) translateY(-12px);
      transition: opacity 0.18s ease, transform 0.18s ease;
    }

    .sp-word {
      opacity: 0;
      transform: translateY(7px);
      display: inline-block;
      transition: opacity 0.24s ease, transform 0.28s cubic-bezier(0.19, 1, 0.22, 1);
    }
    .sp-word.vis {
      opacity: 1;
      transform: translateY(0);
    }

    /* ─────────────────────────────────────
       SLOPPY WORD
    ───────────────────────────────────── */
    .sloppy-word   { font-size: 1.1em; letter-spacing: 0.035em; }
    .sloppy-letter { display: inline-block; }

    /* ─────────────────────────────────────
       LETTER-GROW LINE
    ───────────────────────────────────── */
    @keyframes letterAppear {
      from { opacity: 0; transform: translateY(4px); }
      to   { opacity: 1; transform: translateY(0);   }
    }

    .grow-char {
      display: inline-block;
      vertical-align: baseline;
      opacity: 0;
      line-height: 1;
      animation: letterAppear 0.28s ease both;
    }

    /* ─────────────────────────────────────
       RAIN / UMBRELLA SCENE
    ───────────────────────────────────── */
    .rain-scene {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    .rain-header {
      position: relative;
      width: 580px;
      max-width: 88vw;
      height: 78px;
    }

    .umbrella-icon {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      font-size: 64px;
      line-height: 1;
    }

    @keyframes raindrop {
      0%   { transform: translateY(-18px); opacity: 0;   }
      10%  { transform: translateY(-18px); opacity: 1;   }
      75%  { transform: translateY(34px);  opacity: 0.9; }
      100% { transform: translateY(40px);  opacity: 0;   }
    }

    .rain-drop {
      position: absolute;
      top: 5px;
      font-size: 16px;
      line-height: 1;
      animation: raindrop 0.78s ease-in infinite;
    }

    /* ─────────────────────────────────────
       ROCKET SCENE
    ───────────────────────────────────── */
    .rocket-scene {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }

    @keyframes labelVibrate {
      0%,100% { transform: translate(0,     0);    }
      20%     { transform: translate(-1px, -1px);  }
      40%     { transform: translate( 1px,  1px);  }
      60%     { transform: translate(-1px,  1px);  }
      80%     { transform: translate( 1px, -1px);  }
    }

    .rocket-label {
      font-size: 54px;
      font-weight: 700;
      letter-spacing: 0.04em;
      color: #fff;
      margin: 0;
      animation: labelVibrate 0.12s linear infinite;
    }

    .rocket-emoji {
      font-size: 84px;
      line-height: 1;
      display: block;
      /* rotate so nozzle points down, nose points up */
      transform: rotate(-45deg);
      animation: rocketShake 0.09s linear infinite;
    }

    @keyframes rocketShake {
      0%   { transform: rotate(-45deg) translate(  0,    0); }
      20%  { transform: rotate(-46deg) translate(-2px,  1px); }
      40%  { transform: rotate(-44deg) translate( 2px, -1px); }
      60%  { transform: rotate(-46deg) translate(-1px,  2px); }
      80%  { transform: rotate(-44deg) translate( 1px, -2px); }
      100% { transform: rotate(-45deg) translate(  0,    0); }
    }

    .rocket-flames {
      font-size: 44px;
      line-height: 1;
      display: flex;
      justify-content: center;
      gap: 0;
      margin-top: -14px;
      animation: flameFlicker 0.14s ease-in-out infinite;
    }

    @keyframes flameFlicker {
      0%,100% { transform: scaleY(1)    scaleX(1);    opacity: 1;   }
      25%     { transform: scaleY(1.18) scaleX(0.88); opacity: 0.8; }
      50%     { transform: scaleY(0.84) scaleX(1.12); opacity: 0.9; }
      75%     { transform: scaleY(1.12) scaleX(0.92); opacity: 1;   }
    }

    /* ─────────────────────────────────────
       HAMMER BUILD EFFECT
    ───────────────────────────────────── */
    @keyframes hammerStrike {
      0%   { transform: translateX(-50%) rotate(-30deg) translateY(-20px); opacity: 0; }
      20%  { transform: translateX(-50%) rotate(-30deg) translateY(-20px); opacity: 1; }
      55%  { transform: translateX(-50%) rotate(-5deg)  translateY(2px);   opacity: 1; }
      75%  { transform: translateX(-50%) rotate(-28deg) translateY(-14px); opacity: 1; }
      100% { transform: translateX(-50%) rotate(-30deg) translateY(-20px); opacity: 0; }
    }

    @keyframes hammerBuild {
      0%   { opacity: 0; transform: scale(0.2) translateY(-4px) rotate(-6deg); }
      55%  { opacity: 1; transform: scale(1.3) translateY(3px)  rotate(4deg);  }
      78%  { opacity: 1; transform: scale(0.9) translateY(-1px) rotate(0deg);  }
      100% { opacity: 1; transform: scale(1)   translateY(0)    rotate(0deg);  }
    }

    .hammer-scene { line-height: 1.9; text-align: center; }

    .hammer-letter {
      position: relative;
      display: inline-block;
    }

    .hl-hammer {
      position: absolute;
      left: 50%; top: -1.05em;
      font-size: 1.3em; line-height: 1;
      pointer-events: none;
      opacity: 0;
      animation: hammerStrike 0.48s ease-in-out both;
    }

    .hl-char {
      display: inline-block;
      opacity: 0;
      animation: hammerBuild 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }

    .hammer-post {
      opacity: 0;
      animation: letterAppear 0.35s ease both;
    }

    /* ─────────────────────────────────────
       SIGH SEQUENCE
    ───────────────────────────────────── */
    .sigh-scene {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
    }

    .sigh-emojis {
      font-size: 54px; line-height: 1;
      display: flex; gap: 10px; align-items: center;
      opacity: 0;
      transform: translateY(8px) scale(0.8);
      transition: opacity 0.22s ease, transform 0.3s cubic-bezier(0.34,1.5,0.64,1);
    }
    .sigh-emojis.vis  { opacity: 1; transform: translateY(0) scale(1); }
    .sigh-emojis.gone { opacity: 0; transform: translateY(-10px) scale(0.88);
                        transition: opacity 0.35s ease, transform 0.35s ease; }

    .sigh-pinch, .sigh-eye { display: inline-block; }

    @keyframes pinchGesture {
      0%   { transform: scale(1)    rotate(0deg)   translateY(0);    }
      18%  { transform: scale(0.72) rotate(-15deg) translateY(-6px); }
      36%  { transform: scale(1.12) rotate(7deg)   translateY(4px);  }
      54%  { transform: scale(0.78) rotate(-11deg) translateY(-4px); }
      72%  { transform: scale(1.07) rotate(5deg)   translateY(2px);  }
      90%  { transform: scale(0.93) rotate(-4deg)  translateY(-2px); }
      100% { transform: scale(1)    rotate(0deg)   translateY(0);    }
    }
    .sigh-pinch.gesturing { animation: pinchGesture 0.6s ease-in-out 3; }

    /* "sospiriamo" — letters slowly exhale outward then the text drifts away */
    @keyframes sighText {
      0%   { letter-spacing: 0.02em; opacity: 1;    transform: translateY(0);    }
      22%  { letter-spacing: 0.06em; opacity: 1;    transform: translateY(-5px); }
      100% { letter-spacing: 0.52em; opacity: 0.1;  transform: translateY(8px);  }
    }
    .sigh-word {
      margin: 0;
      animation: sighText 2.8s cubic-bezier(0.15,0,0.75,1) 0.5s both;
    }

    /* ─────────────────────────────────────
       POLISH EFFECT (sponge line)
    ───────────────────────────────────── */
    .polish-wrap {
      position: relative;
      display: block;
      width: 100%;
    }

    /* Letters shine from inside using background-clip:text */
    .polish-text {
      display: block;
      background: linear-gradient(
        90deg,
        #666 0%,
        #666 28%,
        #999 37%,
        #fff 50%,
        #999 63%,
        #666 72%,
        #666 100%
      );
      background-size: 300% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      /* from: 100% = bright spot off-screen LEFT  |  to: 0% = off-screen RIGHT */
      animation: letter-shine 2.5s ease-in-out 0.8s both;
    }

    @keyframes letter-shine {
      from { background-position: 100% 0; }
      to   { background-position: 0% 0;   }
    }

    /* Sponge travels with organic wavy path (Y oscillation + rotation) */
    .sponge-mover {
      position: absolute;
      top: 50%;
      font-size: 62px;
      line-height: 1;
      pointer-events: none;
      animation: sponge-travel 2.5s ease-in-out 0.7s both;
    }

    @keyframes sponge-travel {
      0%   { left: -8%;   transform: translateY(-50%) rotate(0deg);    opacity: 0; }
      8%   { left: 0%;    transform: translateY(-50%) rotate(-8deg);   opacity: 1; }
      22%  { left: 22%;   transform: translateY(-82%) rotate(11deg);   }
      38%  { left: 40%;   transform: translateY(-26%) rotate(-9deg);   }
      54%  { left: 57%;   transform: translateY(-74%) rotate(12deg);   }
      70%  { left: 73%;   transform: translateY(-33%) rotate(-10deg);  }
      84%  { left: 88%;   transform: translateY(-66%) rotate(9deg);    }
      92%  { left: 102%;  transform: translateY(-50%) rotate(-5deg);   opacity: 1; }
      100% { left: 108%;  transform: translateY(-50%) rotate(0deg);    opacity: 0; }
    }

    /* ─────────────────────────────────────
       FINAL SCREEN
    ───────────────────────────────────── */
    #final {
      position: fixed; inset: 0;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      pointer-events: none;
      gap: 18px;
      z-index: 205; /* sits above emoji flood (200) but below broom (210) */
      transition: opacity 0.6s ease;
    }

    #final-pre {
      font-family: 'VisbyCF', sans-serif;
      font-weight: 700;
      font-size: 22px;
      color: #555;
      text-align: center;
      letter-spacing: 0.01em;
      opacity: 0;
      transition: opacity 1.1s ease;
    }

    #final-cta {
      font-family: 'VisbyCF', sans-serif;
      font-weight: 700;
      font-size: 64px;
      color: #fff;
      text-align: center;
      letter-spacing: -2px;
      line-height: 1;
      opacity: 0;
      transform: translateY(14px);
      transition: opacity 1.4s ease, transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
    }

    #final-cta.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* ─────────────────────────────────────
       EMOJI FLOOD + BROOM + FINAL LOGO
    ───────────────────────────────────── */
    #emoji-flood {
      position: fixed; inset: 0;
      pointer-events: none; z-index: 200;
      overflow: hidden;
    }

    @keyframes efIn {
      from { opacity: 0; transform: scale(0.15); }
      to   { opacity: 1; transform: scale(1);    }
    }

    .ef-item {
      position: absolute;
      line-height: 1;
      display: block;
      opacity: 0;
      animation: efIn 0.3s cubic-bezier(0.34, 1.4, 0.64, 1) both;
    }

    #broom-sweeper {
      position: fixed;
      font-size: 108px; line-height: 1;
      top: 38%; left: -220px;
      opacity: 0;
      z-index: 210;
      pointer-events: none;
      will-change: left;
    }

    @keyframes broomWiggle {
      0%   { transform: translateY(0)     rotate(-6deg);  }
      18%  { transform: translateY(-26px) rotate(-28deg); }
      38%  { transform: translateY(24px)  rotate(8deg);   }
      58%  { transform: translateY(-20px) rotate(-24deg); }
      78%  { transform: translateY(20px)  rotate(6deg);   }
      100% { transform: translateY(0)     rotate(-6deg);  }
    }

    .broom-wiggle {
      display: block;
      animation: broomWiggle 0.4s ease-in-out infinite;
    }

    #final-logo {
      position: fixed; inset: 0;
      display: flex; align-items: center; justify-content: center;
      font-family: 'VisbyCF', -apple-system, sans-serif;
      font-weight: 700;
      font-size: 90px;
      letter-spacing: -0.03em;
      color: #fff;
      opacity: 1;
      z-index: 220;
      pointer-events: none;
    }

    @keyframes logoIn {
      from { opacity: 0; transform: scale(0.84); }
      to   { opacity: 1; transform: scale(1);    }
    }

    /* ─────────────────────────────────────
       IE ICON (opening screen)
    ───────────────────────────────────── */
    #desktop-icons {
      position: fixed;
      top: 22px; left: 22px;
      display: flex; flex-direction: column;
      align-items: center;
      gap: 22px;
      z-index: 10;
    }

    .desk-icon {
      display: flex; flex-direction: column; align-items: center;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.6s ease;
      cursor: pointer;
      user-select: none;
      -webkit-user-select: none;
    }
    /* Once JS enables pointer-events, ensure cursor is always visible */
    .desk-icon[style*="pointer-events: auto"],
    #win-taskbar, #win-taskbar * {
      cursor: default !important;
    }
    .desk-icon[style*="pointer-events: auto"] {
      cursor: pointer !important;
    }
    #cestino-icon, #mycomputer-icon, #wmp-icon, #cartook-icon {
      pointer-events: auto;
      cursor: pointer;
    }

    .desk-icon img {
      width: 52px; height: 52px;
      object-fit: contain;
    }

    .desk-icon span {
      font-family: Tahoma, 'MS Sans Serif', 'Helvetica Neue', sans-serif;
      font-size: 11px; font-weight: 400;
      color: #fff;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
      margin-top: 3px;
      padding: 1px 4px 2px;
      letter-spacing: 0.02em;
      text-align: center;
      max-width: 76px;
      line-height: 1.15;
    }
    /* Selezione icona desktop — stile Windows XP */
    @media (hover: hover) and (pointer: fine) {
      .desk-icon.selected span {
        background: #000080;
        color: #fff;
        text-shadow: none;
        box-decoration-break: clone;
        -webkit-box-decoration-break: clone;
      }
    }

    #ie-icon {
      filter: drop-shadow(0 4px 14px rgba(0,100,220,0.22));
    }

    /* ─────────────────────────────────────
       DESKTOP WALLPAPER LAYER
    ───────────────────────────────────── */
    #desktop-wallpaper {
      position: fixed; inset: 0;
      z-index: 0;
      background: #000 center/cover no-repeat;
      pointer-events: none;
    }

    /* ─────────────────────────────────────
       DISPLAY PROPERTIES MODAL
    ───────────────────────────────────── */
    #dp-overlay {
      display: none;
      position: fixed; inset: 0;
      z-index: 9000;
      background: rgba(0,0,0,0.25);
      align-items: center; justify-content: center;
    }
    #dp-overlay.open { display: flex; }
    #dp-modal {
      width: 340px; max-width: 96vw;
      background: #ece9d8;
      border: 2px solid #0831d9;
      border-top: 0;
      border-radius: 8px;
      box-shadow: 3px 3px 12px rgba(0,0,0,0.6);
      font-family: 'Tahoma', Arial, sans-serif;
      font-size: 11px;
      display: flex; flex-direction: column;
      animation: winPop 0.18s cubic-bezier(0.22,1,0.36,1) both;
      overflow: hidden;
    }
    #dp-titlebar {
      background: linear-gradient(180deg,#0997ff,#0053ee 8%,#0050ee 40%,#06f 88%,#06f 93%,#005bff 95%,#003dd7 96%,#003dd7);
      padding: 3px 4px 3px 6px;
      display: flex; align-items: center; gap: 5px;
      cursor: grab; user-select: none;
      border-radius: 5px 5px 0 0;
      flex-shrink: 0;
    }
    #dp-titlebar span { flex: 1; color: #fff; font-size: 11px; font-weight: bold; }
    /* Tabs */
    #dp-tabs {
      display: flex; gap: 0;
      padding: 5px 4px 0;
      background: #ece9d8;
      border-bottom: 2px solid #b0a898;
      flex-shrink: 0;
    }
    .dp-tab {
      padding: 3px 8px 4px;
      background: #d4d0c8;
      border: 1px solid #b0a898;
      border-bottom: none;
      border-radius: 3px 3px 0 0;
      margin-right: 2px;
      cursor: default;
      font-size: 10px;
      color: #444;
      white-space: nowrap;
    }
    .dp-tab-active {
      background: #ece9d8;
      font-weight: bold;
      color: #000;
      border-bottom: 2px solid #ece9d8;
      margin-bottom: -2px;
      z-index: 1;
      position: relative;
    }
    /* Content area */
    #dp-content {
      flex: 1; padding: 10px 12px 8px;
      display: flex; flex-direction: column; gap: 6px;
      background: #eceae1;
      margin: 4px;
      border: 1px solid #b0a898;
    }
    /* Monitor preview */
    #dp-monitor-wrap {
      position: relative;
      width: 200px; height: 158px;
      margin: 6px auto 4px;
      flex-shrink: 0;
    }
    #dp-monitor-bg {
      position: absolute;
      top: 13px; left: 25px;
      right: 25px; bottom: 35px;
      background-color: #000;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      z-index: 0;
    }
    #dp-monitor-img {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: contain;
      z-index: 1;
      pointer-events: none;
    }
    /* Background list */
    #dp-bg-label {
      font-size: 11px; font-weight: bold; color: #000;
      margin-top: 2px;
    }
    #dp-bg-list {
      border: 2px inset #fff;
      background: #fff;
      height: 160px;
      overflow-y: auto;
      flex-shrink: 0;
    }
    .dp-bg-item {
      display: flex; align-items: center; gap: 6px;
      padding: 2px 6px;
      cursor: default;
    }
    .dp-bg-item img { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; }
    .dp-bg-item span { font-size: 11px; color: #000; }
    .dp-bg-item:hover { background: #c1d2ee; }
    .dp-bg-selected { background: #316ac5 !important; }
    .dp-bg-selected span { color: #fff !important; }
    /* Footer */
    #dp-footer {
      display: flex; justify-content: flex-end; gap: 6px;
      padding: 8px 10px 10px;
      background: #ece9d8;
      border-top: 1px solid #b0a898;
      flex-shrink: 0;
    }
    .dp-btn {
      min-width: 68px; padding: 3px 8px;
      background: linear-gradient(180deg,#f0ece4 0%,#d8d4cc 100%);
      border: 1px solid #888; border-radius: 3px;
      font-family: 'Tahoma', Arial, sans-serif; font-size: 11px;
      cursor: default;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
    }
    .dp-btn:hover { background: linear-gradient(180deg,#fff 0%,#e0dcd4 100%); }
    .dp-btn:active { background: linear-gradient(180deg,#c8c4bc 0%,#e0dcd4 100%); }

    /* ─────────────────────────────────────
       DESKTOP RIGHT-CLICK CONTEXT MENU
    ───────────────────────────────────── */
    #desktop-ctx-menu {
      display: none;
      position: fixed;
      z-index: 9999;
      min-width: 170px;
      background: #f0ece0;
      border: 1px solid #888878;
      box-shadow: 2px 2px 4px rgba(0,0,0,0.35);
      font-family: 'Tahoma', Arial, sans-serif;
      font-size: 11px;
      padding: 2px 0;
      user-select: none;
    }
    #desktop-ctx-menu.open { display: block; }
    .ctx-item {
      padding: 4px 28px 4px 24px;
      color: #000;
      cursor: default;
      position: relative;
      white-space: nowrap;
    }
    .ctx-item:hover:not(.ctx-disabled) {
      background: #316ac5;
      color: #fff;
    }
    .ctx-item:hover:not(.ctx-disabled) .ctx-arrow { color: #fff; }
    .ctx-disabled {
      color: #888;
      cursor: default;
    }
    .ctx-separator {
      height: 1px;
      background: #c0bdb0;
      margin: 2px 0;
    }
    .ctx-has-sub { padding-right: 20px; }
    .ctx-arrow {
      position: absolute;
      right: 6px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 9px;
      color: #444;
    }
    .ctx-submenu {
      display: none;
      position: absolute;
      left: 100%;
      top: -2px;
      min-width: 160px;
      background: #f0ece0;
      border: 1px solid #888878;
      box-shadow: 2px 2px 4px rgba(0,0,0,0.35);
      padding: 2px 0;
      z-index: 10000;
    }
    .ctx-has-sub:hover .ctx-submenu { display: block; }

    /* ─────────────────────────────────────
       WINDOWS TASKBAR + START MENU
    ───────────────────────────────────── */
    #win-taskbar {
      position: fixed; bottom: 0; left: 0; right: 0; height: 38px;
      background: linear-gradient(180deg,#c0bcb4 0%,#a8a49c 40%,#9c9890 80%,#b0aca4 100%);
      border-top: 2px solid #f0ece4;
      display: flex; align-items: center;
      z-index: 400;
      font-family: 'Tahoma', Arial, sans-serif;
      user-select: none; pointer-events: auto;
    }
    #win-start-btn {
      height: 100%; padding: 0; border: none; background: none;
      cursor: pointer; display: flex; align-items: center; flex-shrink: 0;
    }
    #win-start-btn img { height: 100%; display: block; }

    /* WMP taskbar button */
    #wmp-taskbar-btn {
      display: none;
      height: 28px; padding: 0 8px;
      background: linear-gradient(180deg,#b0aca4 0%,#c8c4bc 100%);
      border: 2px solid; border-color: #404038 #f0ece4 #f0ece4 #404038;
      font-family: 'Tahoma', Arial, sans-serif;
      font-size: 11px; cursor: pointer; color: #000;
      align-items: center; gap: 5px;
      flex-shrink: 0; max-width: 160px;
      overflow: hidden; white-space: nowrap;
    }
    #wmp-taskbar-btn.active { display: flex; }
    #wmp-taskbar-btn img { width: 14px; height: 14px; object-fit: contain; flex-shrink: 0; }
    #wmp-taskbar-btn:hover { background: linear-gradient(180deg,#c8c4bc 0%,#d4d0c8 100%); }
    .win-taskbar-divider {
      width: 1px; height: 22px;
      border-left: 1px solid #888; border-right: 1px solid #d8d4cc;
      margin: 0 4px; flex-shrink: 0;
    }
    #win-clock {
      height: 100%;
      display: flex; align-items: center; padding: 0 4px;
      border-left: none;
      font-size: 11px; color: #000;
      background: linear-gradient(180deg,#b8b4ac 0%,#a0a098 100%);
    }

    /* Shutdown overlay */
    #win-shutdown {
      position: fixed; inset: 0;
      background: #000;
      z-index: 9000;
      display: none;
      align-items: center; justify-content: center;
      flex-direction: column;
      gap: 32px;
    }
    #win-shutdown.active { display: flex; }

    /* TV/CRT shutdown element */
    #tv-off-effect {
      position: absolute;
      top: 50%; left: 50%;
      width: 100vw; height: 100vh;
      background: #cce0ff;
      box-shadow: 0 0 120px 60px rgba(200,220,255,0.95);
      border-radius: 0;
      opacity: 0;
      pointer-events: none;
    }
    @keyframes tvShutdown {
      /* White flash covers whole screen */
      0%   { width:100vw; height:100vh; opacity:1;    border-radius:0;    transform:translate(-50%,-50%); box-shadow:0 0 80px 40px rgba(200,220,255,0.9); }
      /* Collapse vertically very fast → horizontal bar */
      22%  { width:100vw; height:7px;   opacity:1;    border-radius:4px;  transform:translate(-50%,-50%); box-shadow:0 0 40px 20px rgba(200,220,255,0.7); }
      /* Bar shrinks horizontally toward center */
      58%  { width:100px; height:5px;   opacity:1;    border-radius:4px;  transform:translate(-50%,-50%); box-shadow:0 0 28px 14px rgba(200,220,255,0.6); }
      /* Tiny glowing dot */
      80%  { width:16px;  height:16px;  opacity:0.9;  border-radius:50%;  transform:translate(-50%,-50%); box-shadow:0 0 20px 10px rgba(200,220,255,0.5); }
      /* Dot fades out */
      100% { width:4px;   height:4px;   opacity:0;    border-radius:50%;  transform:translate(-50%,-50%); box-shadow:0 0 6px  3px  rgba(200,220,255,0);   }
    }

    @keyframes tvPowerOn {
      /* Start as invisible dot */
      0%   { width:4px;   height:4px;   opacity:0;    border-radius:50%;  transform:translate(-50%,-50%); box-shadow:0 0 6px  3px  rgba(200,220,255,0);   }
      /* Dot appears and glows */
      12%  { width:16px;  height:16px;  opacity:1;    border-radius:50%;  transform:translate(-50%,-50%); box-shadow:0 0 24px 12px rgba(200,220,255,0.8); }
      /* Dot stretches to horizontal bar */
      38%  { width:100px; height:5px;   opacity:1;    border-radius:4px;  transform:translate(-50%,-50%); box-shadow:0 0 30px 14px rgba(200,220,255,0.7); }
      /* Bar expands full width */
      60%  { width:100vw; height:7px;   opacity:1;    border-radius:4px;  transform:translate(-50%,-50%); box-shadow:0 0 44px 22px rgba(200,220,255,0.6); }
      /* Expand vertically to full screen */
      88%  { width:100vw; height:100vh; opacity:1;    border-radius:0;    transform:translate(-50%,-50%); box-shadow:0 0 80px 40px rgba(200,220,255,0.9); }
      /* Flash then fade out revealing the page */
      100% { width:100vw; height:100vh; opacity:0;    border-radius:0;    transform:translate(-50%,-50%); box-shadow:0 0 0   0    rgba(200,220,255,0);   }
    }

    /* BIOS screen */
    #bios-screen {
      display: none;
      position: absolute; inset: 0;
      background: #000;
      font-family: 'Courier New', Courier, monospace;
      font-size: 17px;
      color: #aaffaa;
      padding: 22px 28px 14px;
      z-index: 9001;
      flex-direction: column;
      justify-content: space-between;
      opacity: 0;
      transition: opacity 0.5s ease;
      box-sizing: border-box;
    }
    #bios-screen.visible { display: flex; }
    #bios-screen.fadein  { opacity: 1; }
    #bios-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
    #bios-text-col { flex: 1; }
    #bios-energy { width: 200px; flex-shrink: 0; opacity: 0.9; margin-top: 4px; }
    #bios-lines { margin-top: 10px; }
    #bios-lines p { margin: 0; line-height: 2; }
    #bios-loading { margin-top: 20px; }
    #bios-bottom {
      border-top: 2px solid #447744;
      padding-top: 10px; margin-top: 14px;
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: 10px;
    }
    #bios-bottom-keys { font-size: 15px; color: #aaffaa; line-height: 1.8; }
    #bios-bottom-keys .bk {
      background: #aaffaa; color: #000;
      padding: 1px 6px; margin-right: 2px;
      font-weight: bold; font-size: 15px;
    }
    #win-reboot-btn {
      display: none;
      padding: 6px 28px;
      background: #000;
      border: 2px solid #aaffaa;
      font-family: 'Courier New', Courier, monospace;
      font-size: 16px; font-weight: bold;
      color: #aaffaa;
      cursor: pointer;
      letter-spacing: 0.08em;
      z-index: 9002;
      opacity: 0;
      transition: opacity 0.4s ease;
    }
    #win-reboot-btn:hover, #win-reboot-btn-inline:hover { background: #aaffaa; color: #000; }
    @media (max-width: 767px) {
      #bios-screen { font-size: 15px; padding: 18px 18px 12px; }
      #bios-energy { width: 100px; }
      #bios-bottom-keys { font-size: 13px; }
      #bios-bottom-keys .bk { font-size: 13px; }
      #win-reboot-btn { display: none !important; }
      #win-reboot-btn-inline { font-size: 15px !important; padding: 8px 28px !important; }
    }

    /* ── Windows Media Player Modal ── */
    #wmp-overlay {
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.25);
      z-index: 5001;
      display: none;
    }
    #wmp-overlay.open { display: block; }

    /* ── Windows Media Player XP ── */
    #wmp-modal {
      width: 680px; max-width: 96vw;
      background: #2a2a3a;
      border: 2px solid #1254a8;
      border-radius: 8px 8px 0 0;
      box-shadow: 4px 4px 16px rgba(0,0,0,0.8);
      font-family: 'Tahoma', Arial, sans-serif;
      animation: winPop 0.18s cubic-bezier(0.22,1,0.36,1) both;
      position: absolute;
      user-select: none;
      overflow: hidden;
      display: flex; flex-direction: column;
    }
    #wmp-titlebar {
      cursor: grab;
      background: linear-gradient(180deg,#0997ff,#0053ee 8%,#0050ee 40%,#06f 88%,#06f 93%,#005bff 95%,#003dd7 96%,#003dd7);
      padding: 4px 4px 4px 8px;
      display: flex; align-items: center; gap: 6px;
      border-radius: 7px 7px 0 0;
      flex-shrink: 0;
    }
    #wmp-titlebar:active { cursor: grabbing; }
    #wmp-titlebar span { flex: 1; color: #fff; font-size: 11px; font-weight: bold; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }

    /* Menu bar */
    #wmp-menubar {
      background: linear-gradient(180deg,#e8e8f0 0%,#d8d8e8 100%);
      border-bottom: 1px solid #8888aa;
      padding: 1px 4px;
      display: flex; gap: 0; flex-shrink: 0;
    }
    .wmp-menu {
      padding: 2px 8px; font-size: 11px; color: #000;
      cursor: default; border-radius: 2px;
    }
    .wmp-menu:hover { background: #316ac5; color: #fff; }

    /* Visualization */
    #wmp-vis-wrap {
      position: relative;
      background: #000;
      flex: 1;
      min-height: 380px;
      overflow: hidden;
    }
    #wmp-shader {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      display: flex;
    }
    #wmp-shader canvas {
      display: block !important;
      width: 100% !important;
      height: 100% !important;
      position: absolute; inset: 0;
    }
    #wmp-vis-label {
      position: absolute; bottom: 4px; right: 8px;
      font-size: 9px; color: rgba(255,255,255,0.3);
      pointer-events: none;
    }

    /* Status / seek area */
    #wmp-status-bar-area {
      background: #1a1a28;
      border-top: 1px solid #444466;
      padding: 4px 8px 2px;
      flex-shrink: 0;
    }
    #wmp-track-info {
      display: flex; justify-content: space-between; align-items: center;
      margin-bottom: 3px;
    }
    #wmp-track {
      font-size: 11px; font-weight: bold; color: #c8d8ff;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      max-width: 70%;
    }
    #wmp-status { font-size: 10px; color: #8898cc; }

    /* Seek bar */
    #wmp-seekwrap {
      display: flex; align-items: center; gap: 6px;
    }
    #wmp-seek {
      flex: 1; height: 10px;
      background: #0a0a18;
      border: 1px solid #333355;
      border-radius: 5px;
      position: relative; cursor: pointer;
    }
    #wmp-seek-fill {
      height: 100%; background: linear-gradient(90deg,#0060d0,#4090ff);
      border-radius: 5px;
      width: 0%; transition: width 0.5s linear;
      pointer-events: none;
    }
    #wmp-seek-thumb {
      position: absolute; top: 50%; width: 14px; height: 14px;
      background: radial-gradient(circle at 40% 35%, #80b8ff, #2060cc);
      border: 1px solid #1040a0;
      border-radius: 50%;
      transform: translate(-50%,-50%);
      left: 0%; pointer-events: none;
      box-shadow: 0 1px 3px rgba(0,0,0,0.6);
    }
    #wmp-timecode {
      font-size: 10px; color: #8898cc;
      white-space: nowrap; min-width: 80px; text-align: right;
    }

    /* Controls bar */
    #wmp-controls {
      background: linear-gradient(180deg,#22223a 0%,#18182a 100%);
      border-top: 1px solid #444466;
      padding: 6px 10px;
      display: flex; align-items: center; gap: 6px;
      flex-shrink: 0;
    }
    .wmp-xbtn {
      width: 28px; height: 28px;
      background: radial-gradient(circle at 50% 30%, #4a4a6a, #22223a);
      border: 1px solid #555577;
      border-radius: 50%;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      transition: background 0.1s;
    }
    .wmp-xbtn:hover {
      background: radial-gradient(circle at 50% 30%, #5a5a8a, #2a2a4a);
      border-color: #7777aa;
    }
    .wmp-xbtn:active {
      background: radial-gradient(circle at 50% 70%, #3a3a5a, #1a1a2a);
    }

    /* Volume */
    #wmp-vol-wrap {
      margin-left: auto;
      display: flex; align-items: center; gap: 6px;
    }
    #wmp-vol-track {
      width: 70px; height: 8px;
      background: #0a0a18;
      border: 1px solid #333355;
      border-radius: 4px;
      position: relative; cursor: pointer;
    }
    #wmp-vol-fill {
      height: 100%;
      background: linear-gradient(90deg,#008800,#00cc00);
      border-radius: 4px;
      width: 80%;
      pointer-events: none;
    }
    #wmp-vol-knob {
      position: absolute; top: 50%; left: 80%;
      width: 12px; height: 12px;
      background: radial-gradient(circle at 40% 35%, #80ff80, #008800);
      border: 1px solid #006600;
      border-radius: 50%;
      transform: translate(-50%,-50%);
      pointer-events: none;
    }
    #wmp-vol { width: 60px; cursor: pointer; accent-color: #00c050; }

    /* ── Notepad 2000-style modal ── */
    #notepad-overlay {
      position: fixed; inset: 0; z-index: 5012;
      display: none; background: rgba(0,0,0,0.3);
    }
    #notepad-overlay.open { display: flex; align-items: center; justify-content: center; }

    #notepad-modal {
      position: absolute;
      width: min(680px, 96vw);
      background: #d4d0c8;
      border: 2px solid; border-color: #f0ece4 #404038 #404038 #f0ece4;
      box-shadow: 4px 4px 14px rgba(0,0,0,0.6);
      font-family: 'Tahoma', Arial, sans-serif;
      font-size: 11px; user-select: none;
      animation: winPop 0.18s cubic-bezier(0.22,1,0.36,1) both;
      display: flex; flex-direction: column;
    }
    #notepad-titlebar {
      background: linear-gradient(180deg,#0997ff,#0053ee 8%,#0050ee 40%,#06f 88%,#06f 93%,#005bff 95%,#003dd7 96%,#003dd7);
      padding: 3px 4px 3px 6px;
      display: flex; align-items: center; gap: 5px; cursor: grab;
      flex-shrink: 0;
    }
    #notepad-titlebar:active { cursor: grabbing; }
    #notepad-titlebar span { flex:1; color:#fff; font-size:11px; font-weight:bold; }

    #notepad-menubar {
      background: #d4d0c8; padding: 2px 4px;
      display: flex; gap: 2px;
      border-bottom: 1px solid #808080; flex-shrink: 0;
    }
    .np-menu { padding: 2px 8px; font-size: 11px; cursor: default; }
    .np-menu:hover { background: #0a246a; color: #fff; }

    #notepad-textarea {
      width: 100%; box-sizing: border-box;
      border: none; outline: none;
      resize: none;
      font-family: 'Courier New', monospace;
      font-size: 13px; line-height: 1.5;
      padding: 8px;
      background: #fff;
      color: #000;
      min-height: 320px;
      user-select: text;
      cursor: text;
    }

    #notepad-footer {
      background: #d4d0c8;
      padding: 6px 8px;
      display: flex; align-items: center; justify-content: space-between;
      border-top: 1px solid #808080; flex-shrink: 0;
      gap: 8px;
    }
    #notepad-status { font-size: 11px; color: #444; flex: 1; }
    #notepad-send {
      background: linear-gradient(180deg,#e8e4dc 0%,#c8c4bc 100%);
      border: 2px solid; border-color: #f0ece4 #404038 #404038 #f0ece4;
      font-family: 'Tahoma', Arial, sans-serif;
      font-size: 11px; padding: 3px 18px; cursor: pointer;
      font-weight: bold;
    }
    #notepad-send:hover { background: linear-gradient(180deg,#d8d4cc 0%,#b8b4ac 100%); }
    #notepad-send:active { border-color: #404038 #f0ece4 #f0ece4 #404038; }

    #notepad-statusbar {
      background: #d4d0c8; padding: 2px 8px; font-size: 11px;
      border-top: 1px solid #808080; flex-shrink: 0;
      display: flex; gap: 16px;
    }

    @media (max-width: 767px) {
      #notepad-modal { width: 96vw !important; max-height: 88vh !important; }
      #notepad-textarea { min-height: 360px; font-size: 16px !important; }
    }

    /* ── Paint 2000-style modal ── */
    #paint-overlay {
      position: fixed; inset: 0; z-index: 5011;
      display: none; background: rgba(0,0,0,0.3);
    }
    #paint-overlay.open { display: block; }

    #paint-modal {
      position: absolute;
      width: min(860px, 96vw);
      background: #d4d0c8;
      border: 2px solid; border-color: #f0ece4 #404038 #404038 #f0ece4;
      box-shadow: 4px 4px 14px rgba(0,0,0,0.6);
      font-family: 'Tahoma', Arial, sans-serif;
      font-size: 11px; user-select: none;
      animation: winPop 0.18s cubic-bezier(0.22,1,0.36,1) both;
      display: flex; flex-direction: column;
    }
    #paint-titlebar {
      background: linear-gradient(180deg,#0997ff,#0053ee 8%,#0050ee 40%,#06f 88%,#06f 93%,#005bff 95%,#003dd7 96%,#003dd7);
      padding: 3px 4px 3px 6px;
      display: flex; align-items: center; gap: 5px; cursor: grab;
    }
    #paint-titlebar:active { cursor: grabbing; }
    #paint-titlebar span { flex:1; color:#fff; font-size:11px; font-weight:bold; }
    #paint-menubar {
      background:#d4d0c8; padding:2px 4px;
      display:flex; gap:2px; border-bottom:1px solid #808080;
    }
    .pnt-menu { padding:2px 8px; font-size:11px; cursor:default; }
    .pnt-menu:hover { background:#0a246a; color:#fff; }

    #paint-workspace {
      display: flex; flex: 1;
    }
    #paint-tools {
      width: 52px; background: #d4d0c8;
      border-right: 1px solid #808080;
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 1px; padding: 3px; align-content: start;
      flex-shrink: 0;
    }
    .pnt-tool {
      width: 22px; height: 22px;
      background: #d4d0c8;
      border: 1px solid transparent;
      display: flex; align-items: center; justify-content: center;
      font-size: 13px; cursor: default;
    }
    .pnt-tool:hover, .pnt-tool.active {
      border-color: #f0ece4 #404038 #404038 #f0ece4;
      background: #c0bcb4;
    }
    .pnt-tool.active { border-color: #404038 #f0ece4 #f0ece4 #404038; }

    #paint-canvas-scroll {
      flex: 1; overflow: auto;
      background: #808080; padding: 8px;
    }
    #paint-canvas {
      display: block;
      background: #fff;
      cursor: crosshair;
      box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
      width: 100%;
    }

    #paint-palette-area {
      background: #d4d0c8;
      border-top: 1px solid #808080;
      padding: 4px 6px;
      display: flex; align-items: center; gap: 6px;
    }
    #paint-active-colors {
      display: flex; flex-direction: column;
      gap: 1px; margin-right: 4px;
    }
    .pac-fg, .pac-bg {
      width: 18px; height: 13px;
      border: 1px solid #404038;
    }
    .pac-fg { background: #000; }
    .pac-bg { background: #fff; margin-left: 4px; margin-top: -6px; }
    #paint-colors {
      display: grid;
      grid-template-columns: repeat(20, 16px);
      gap: 2px;
    }
    .pc { width:14px; height:14px; border:1px solid #808080; cursor:pointer; }
    .pc:hover { border-color:#000; transform:scale(1.15); }

    #paint-statusbar {
      background:#d4d0c8; padding:2px 8px; font-size:11px;
      border-top:1px solid #808080;
      display:flex; gap:16px;
    }

    @media (max-width: 767px) {
      #paint-modal {
        width: 96vw !important;
        height: 82vh !important;
        max-height: 82vh !important;
        display: flex !important;
        flex-direction: column !important;
      }
      #paint-tools  { width:44px; }
      .pnt-tool { width:20px; height:20px; font-size:15px; }
      #paint-workspace { flex: 1 1 0 !important; min-height: 0 !important; overflow: hidden; }
      #paint-canvas-scroll { overflow: auto; flex: 1 1 0 !important; min-height: 0 !important; height: 100% !important; }
      #paint-canvas { width: 100% !important; }
      #paint-palette-area { flex-wrap: wrap; }
      #paint-colors { grid-template-columns: repeat(14, 18px); }
      .pc { width:16px; height:16px; }
    }

    /* ── Word 2000-style modal ── */
    #word-overlay {
      position: fixed; inset: 0;
      z-index: 5010;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(0,0,0,0.35);
    }
    #word-overlay.open { display: flex; }

    #word-modal {
      width: min(820px, 96vw);
      max-height: 92vh;
      background: #d4d0c8;
      border: 2px solid; border-color: #f0ece4 #404038 #404038 #f0ece4;
      box-shadow: 4px 4px 14px rgba(0,0,0,0.6);
      font-family: 'Tahoma', Arial, sans-serif;
      font-size: 11px;
      user-select: none;
      animation: winPop 0.18s cubic-bezier(0.22,1,0.36,1) both;
      display: flex; flex-direction: column;
    }

    #word-titlebar {
      background: linear-gradient(180deg,#0997ff,#0053ee 8%,#0050ee 40%,#06f 88%,#06f 93%,#005bff 95%,#003dd7 96%,#003dd7);
      padding: 3px 4px 3px 6px;
      display: flex; align-items: center; gap: 5px;
      cursor: grab; flex-shrink: 0;
    }
    #word-titlebar:active { cursor: grabbing; }
    #word-titlebar span { flex: 1; color: #fff; font-size: 11px; font-weight: bold; }

    #word-menubar {
      background: #d4d0c8; padding: 2px 4px;
      display: flex; gap: 2px;
      border-bottom: 1px solid #808080; flex-shrink: 0;
    }
    .word-menu-item {
      padding: 2px 8px; font-size: 11px; cursor: default;
    }
    .word-menu-item:hover { background: #0a246a; color: #fff; }

    #word-toolbar {
      background: #d4d0c8; padding: 3px 6px;
      display: flex; align-items: center; gap: 3px;
      border-bottom: 1px solid #808080; flex-shrink: 0;
      flex-wrap: wrap;
    }
    .word-tool-btn {
      min-width: 22px; height: 22px; padding: 0 4px;
      background: #d4d0c8;
      border: 1px solid transparent;
      font-size: 11px; cursor: default;
      display: flex; align-items: center; justify-content: center;
    }
    .word-tool-btn:hover { border-color: #808080 #f0ece4 #f0ece4 #808080; }
    .word-tool-sep { width: 1px; height: 20px; background: #808080; margin: 0 2px; }
    #word-font-box {
      font-size: 11px; border: 1px inset #808080;
      background: #fff; padding: 1px 3px; width: 120px;
    }
    #word-size-box {
      font-size: 11px; border: 1px inset #808080;
      background: #fff; padding: 1px 3px; width: 36px; text-align: center;
    }

    #word-ruler {
      background: #d4d0c8;
      height: 16px; border-bottom: 1px solid #808080;
      display: flex; align-items: center; padding: 0 80px;
      flex-shrink: 0; overflow: hidden;
    }
    #word-ruler-inner {
      flex: 1; height: 10px;
      background: #fff;
      border: 1px solid #808080;
      position: relative;
    }

    #word-page-area {
      flex: 1;
      overflow-y: auto;
      background: #808080;
      padding: 20px;
      display: flex; justify-content: center;
    }

    #word-page {
      width: 100%;
      max-width: 620px;
      min-height: 600px;
      background: #fff;
      box-shadow: 2px 2px 8px rgba(0,0,0,0.4);
      padding: 60px 70px;
      box-sizing: border-box;
      font-family: 'Comic Relief', 'Comic Sans MS', cursive;
      font-size: 14px;
      line-height: 1.7;
      color: #000;
      cursor: text;
    }

    #word-page .wd-title {
      font-size: 22px; font-weight: bold;
      margin-bottom: 24px; color: #1a1a6a;
      border-bottom: 2px solid #1a1a6a;
      padding-bottom: 6px;
    }
    #word-page .wd-body {
      font-size: 14px; margin-bottom: 20px;
    }
    #word-page .wd-big {
      font-size: 21px; font-weight: bold;
      margin-top: 28px; color: #000;
      line-height: 1.4;
    }
    #word-page .wd-cursor {
      display: inline-block;
      width: 2px; height: 1em;
      background: #000;
      vertical-align: text-bottom;
      margin-left: 1px;
      animation: bsodBlink 0.6s step-end infinite;
    }

    #word-statusbar {
      background: #d4d0c8; padding: 2px 8px;
      font-size: 11px; display: flex; gap: 16px;
      border-top: 1px solid #808080; flex-shrink: 0;
    }

    @media (max-width: 767px) {
      #word-modal { width: 96vw !important; max-height: 88vh; }
      #word-page  { padding: 30px 24px; font-size: 13px; }
      #word-toolbar, #word-ruler { display: none; }
    }

    /* ── Excel 2000-style Servizi modal ── */
    #xls-overlay {
      position: fixed; inset: 0;
      z-index: 5004;
      display: none;
    }
    #xls-overlay.open { display: block; }

    #xls-modal {
      position: absolute;
      width: min(860px, 96vw);
      background: #d4d0c8;
      border: 2px solid; border-color: #f0ece4 #404038 #404038 #f0ece4;
      box-shadow: 4px 4px 14px rgba(0,0,0,0.6);
      font-family: 'Tahoma', Arial, sans-serif;
      font-size: 11px;
      user-select: none;
      animation: winPop 0.18s cubic-bezier(0.22,1,0.36,1) both;
    }

    #xls-titlebar {
      background: linear-gradient(90deg,#1a4a1a 0%,#5a8a5a 100%);
      padding: 3px 4px 3px 6px;
      display: flex; align-items: center; gap: 5px;
      cursor: grab;
    }
    #xls-titlebar:active { cursor: grabbing; }
    #xls-titlebar svg { flex-shrink: 0; }
    #xls-titlebar span { flex: 1; color: #fff; font-size: 11px; font-weight: bold; }
    .xls-tb-btn {
      background: none; border: none; box-shadow: none;
      cursor: pointer; padding: 0;
      display: flex; align-items: center; justify-content: center;
    }
    .xls-tb-btn:hover { background: none; opacity: 0.85; }

    #xls-menubar {
      background: #d4d0c8; padding: 2px 4px;
      display: flex; gap: 2px;
      border-bottom: 1px solid #808080;
    }
    .xls-menu-item {
      padding: 2px 8px; font-size: 11px; cursor: default; color: #000;
    }
    .xls-menu-item:hover { background: #0a246a; color: #fff; }

    #xls-toolbar {
      background: #d4d0c8; padding: 3px 4px;
      display: flex; align-items: center; gap: 4px;
      border-bottom: 1px solid #808080;
    }
    .xls-tool-sep { width: 1px; height: 20px; background: #808080; margin: 0 2px; }
    .xls-tool-btn {
      min-width: 24px; height: 22px; padding: 0 4px;
      background: #d4d0c8;
      border: 1px solid transparent;
      font-size: 11px; cursor: default; display: flex;
      align-items: center; justify-content: center;
    }
    .xls-tool-btn:hover { border-color: #808080 #f0ece4 #f0ece4 #808080; }

    #xls-formula-bar {
      background: #d4d0c8; padding: 2px 6px;
      display: flex; align-items: center; gap: 4px;
      border-bottom: 1px solid #808080;
      font-size: 11px;
    }
    #xls-cell-ref {
      width: 52px; border: 1px inset #808080; background: #fff;
      padding: 1px 3px; font-size: 11px;
    }
    #xls-formula-input {
      flex: 1; border: 1px inset #808080; background: #fff;
      padding: 1px 4px; font-size: 11px;
    }

    #xls-sheet-area {
      overflow: auto; max-height: 820px;
      background: #fff;
      border: 1px solid; border-color: #808080 #d4d0c8 #d4d0c8 #808080;
      margin: 2px;
    }
    #xls-sheet-area table {
      border-collapse: collapse;
      font-family: 'Tahoma', Arial, sans-serif;
      font-size: 14px;
    }
    #xls-sheet-area .xls-col-hdr, #xls-sheet-area .xls-row-hdr {
      background: #e8e4dc;
      border: 1px solid #808080;
      min-width: 26px; width: 26px; height: 22px;
      text-align: center; font-size: 12px; color: #000;
      font-weight: normal; padding: 0 3px;
      user-select: none; cursor: default;
    }
    #xls-sheet-area .xls-col-hdr { height: 20px; }
    #xls-sheet-area td.xls-cell {
      border: 1px solid #d0ccc4;
      border-right-color: #c8c4bc;
      border-bottom-color: #c8c4bc;
      height: 24px; padding: 0 6px;
      white-space: nowrap;
      cursor: default;
    }
    #xls-sheet-area td.xls-cell.selected {
      background: #3b7dd8;
      color: #fff;
    }
    #xls-sheet-area td.xls-cell.header-cell {
      font-weight: bold; color: #1a4a1a;
    }
    #xls-sheet-area td.xls-cell.sub-cell {
      padding-left: 20px; color: #333;
    }
    #xls-sheet-area .col-A { min-width: 220px; width: 220px; }
    #xls-sheet-area .col-B { min-width: 120px; width: 120px; }
    #xls-sheet-area .col-C { min-width: 120px; width: 120px; }

    #xls-sheet-tabs {
      background: #d4d0c8; padding: 2px 4px 0;
      display: flex; gap: 2px;
      border-top: 1px solid #808080;
    }
    .xls-tab {
      background: #d4d0c8; padding: 2px 10px;
      border: 1px solid #808080; border-bottom: none;
      font-size: 11px; cursor: default;
    }
    .xls-tab.active { background: #fff; font-weight: bold; }

    #xls-statusbar {
      background: #d4d0c8; padding: 2px 6px;
      font-size: 11px; color: #000;
      border-top: 1px solid #808080;
      display: flex; justify-content: space-between;
    }

    /* ── Cartook IE modal ── */
    #cartook-overlay {
      position: fixed; inset: 0;
      z-index: 5003;
      display: none;
    }
    #cartook-overlay.open { display: block; }

    #cartook-modal {
      position: absolute;
      width: min(900px, 92vw);
      background: #d4d0c8;
      border: 2px solid; border-color: #f0ece4 #404038 #404038 #f0ece4;
      box-shadow: 4px 4px 14px rgba(0,0,0,0.6);
      animation: winPop 0.18s cubic-bezier(0.22,1,0.36,1) both;
      user-select: none;
    }
    #cartook-modal .ie-titlebar { cursor: grab; }
    #cartook-modal .ie-titlebar:active { cursor: grabbing; }

    #cartook-iframe-wrap {
      background: #fff;
      border: 1px solid; border-color: #808080 #d4d0c8 #d4d0c8 #808080;
      margin: 0 2px;
      height: 520px;
      overflow: hidden;
    }
    #cartook-iframe-wrap iframe {
      width: 100%; height: 100%;
      border: none; display: block;
    }

    /* ── Outlook Express Compose window ── */
    #oe-overlay {
      position: fixed; inset: 0;
      z-index: 5002;
      display: none;
    }
    #oe-overlay.open { display: block; }

    #oe-modal {
      position: absolute;
      width: 720px; max-width: 96vw;
      background: #d4d0c8;
      border: 2px solid; border-color: #f0ece4 #404038 #404038 #f0ece4;
      box-shadow: 4px 4px 12px rgba(0,0,0,0.55);
      font-family: 'Tahoma', Arial, sans-serif;
      font-size: 11px;
      user-select: none;
      animation: winPop 0.18s cubic-bezier(0.22,1,0.36,1) both;
    }

    #oe-titlebar {
      background: linear-gradient(180deg,#0997ff,#0053ee 8%,#0050ee 40%,#06f 88%,#06f 93%,#005bff 95%,#003dd7 96%,#003dd7);
      padding: 3px 4px 3px 6px;
      display: flex; align-items: center; gap: 5px;
      cursor: grab;
    }
    #oe-titlebar:active { cursor: grabbing; }
    #oe-titlebar svg { flex-shrink: 0; }
    #oe-titlebar span { flex: 1; color: #fff; font-size: 11px; font-weight: bold; }

    /* Toolbar */
    #oe-toolbar {
      background: linear-gradient(180deg,#d4d0c8 0%,#c0bdb4 100%);
      border-bottom: 1px solid #808080;
      padding: 3px 6px;
      display: flex; gap: 4px;
    }
    .oe-tb-btn {
      height: 28px; padding: 0 10px;
      background: linear-gradient(180deg,#d4d0c8 0%,#b8b4ac 100%);
      border: 2px solid; border-color: #f0ece4 #404038 #404038 #f0ece4;
      font-family: 'Tahoma', Arial, sans-serif;
      font-size: 11px; font-weight: bold; cursor: pointer; color: #000;
      display: flex; align-items: center; gap: 4px;
    }
    .oe-tb-btn:active { border-color: #404038 #f0ece4 #f0ece4 #404038; }

    /* Header fields */
    #oe-headers {
      border-bottom: 1px solid #808080;
      background: #d4d0c8;
    }
    .oe-field {
      display: flex; align-items: center;
      border-bottom: 1px solid #b0ada4;
      padding: 3px 6px; gap: 4px;
    }
    .oe-field:last-child { border-bottom: none; }
    .oe-field label {
      width: 54px; font-weight: bold; font-size: 11px;
      color: #000; flex-shrink: 0;
    }
    .oe-field input {
      flex: 1; height: 18px;
      border: 1px solid; border-color: #808080 #d4d0c8 #d4d0c8 #808080;
      background: #fff; padding: 0 4px;
      font-family: 'Tahoma', Arial, sans-serif; font-size: 11px;
    }

    /* Body */
    #oe-body {
      padding: 4px;
    }
    #oe-message {
      width: 100%; height: 240px;
      border: 1px solid; border-color: #808080 #d4d0c8 #d4d0c8 #808080;
      background: #fff; padding: 6px;
      font-family: 'Tahoma', Arial, sans-serif; font-size: 11px;
      resize: none; box-sizing: border-box;
      outline: none;
    }

    /* Company footer */
    #oe-footer {
      border-top: 1px solid #808080;
      background: linear-gradient(180deg,#c8c4bc 0%,#d4d0c8 100%);
      padding: 5px 8px;
      font-size: 10px; color: #444;
      line-height: 1.5;
    }
    #oe-footer strong { color: #000; }

    /* Status bar */
    #oe-statusbar {
      border-top: 1px solid #888;
      background: #d4d0c8;
      padding: 2px 6px;
      font-size: 10px; color: #000;
    }

    /* ── Welcome alert ── */
    #welcome-alert-overlay {
      position: fixed; inset: 0;
      z-index: 10000;
      display: none; align-items: center; justify-content: center;
    }
    #welcome-alert-overlay.open { display: flex; }
    #welcome-alert-box {
      width: 340px;
      background: #ece9d8;
      border: 3px solid #1254a8;
      border-radius: 8px 8px 6px 6px;
      box-shadow: 3px 3px 10px rgba(0,0,0,0.55), inset 0 0 0 1px #6a9de0;
      font-family: 'Tahoma', Arial, sans-serif;
      animation: winPop 0.18s cubic-bezier(0.22,1,0.36,1) both;
      overflow: hidden;
    }
    #welcome-alert-titlebar {
      background: linear-gradient(180deg,#0997ff,#0053ee 8%,#0050ee 40%,#06f 88%,#06f 93%,#005bff 95%,#003dd7 96%,#003dd7) !important;
      padding: 4px 4px 4px 8px;
      display: flex; align-items: center; gap: 4px;
      font-size: 12px; font-weight: bold; color: #fff;
      text-shadow: 1px 1px 2px rgba(0,0,60,0.6);
      user-select: none; border-radius: 5px 5px 0 0;
    }
    #welcome-alert-titlebar .wat-title { flex: 1; }
    /* XP colorful close button */
    #welcome-alert-xbtn {
      width: 21px; height: 19px;
      background: linear-gradient(180deg,#f07878 0%,#c82020 50%,#a01010 100%);
      border: 1px solid; border-color: #f8a0a0 #701010 #701010 #f8a0a0;
      border-radius: 3px;
      color: #fff; font-weight: bold; font-size: 11px; line-height: 1;
      cursor: pointer; font-family: 'Tahoma', Arial, sans-serif;
      display: flex; align-items: center; justify-content: center;
    }
    #welcome-alert-xbtn:hover { background: linear-gradient(180deg,#f89898 0%,#e03030 50%,#b01818 100%); }
    #welcome-alert-body {
      display: flex; align-items: center; gap: 14px;
      padding: 18px 18px 14px 16px;
      background: #ece9d8;
    }
    /* XP info balloon icon */
    #welcome-alert-icon {
      flex-shrink: 0; width: 42px; height: 42px;
      background: radial-gradient(circle at 35% 30%, #a0d0ff, #1060c0 60%, #0040a0);
      border-radius: 50% 50% 50% 10%;
      display: flex; align-items: center; justify-content: center;
      box-shadow: inset 0 2px 4px rgba(255,255,255,0.4), 0 2px 6px rgba(0,0,80,0.4);
      position: relative;
    }
    #welcome-alert-icon::after {
      content: '';
      position: absolute; bottom: -7px; left: 8px;
      width: 0; height: 0;
      border-left: 8px solid transparent;
      border-right: 4px solid transparent;
      border-top: 10px solid #0a50b0;
    }
    #welcome-alert-icon span {
      color: #fff; font-weight: bold; font-size: 24px;
      font-family: 'Times New Roman', serif; line-height: 1;
      text-shadow: 0 1px 3px rgba(0,0,60,0.5);
    }
    #welcome-alert-text {
      font-size: 13px; color: #000; line-height: 1.5;
    }
    #welcome-alert-footer {
      padding: 6px 0 14px; text-align: center;
      background: #ece9d8;
    }
    #welcome-alert-ok {
      padding: 4px 0; width: 76px;
      font-size: 12px; font-family: 'Tahoma', Arial, sans-serif;
      background: linear-gradient(180deg,#f0ece4 0%,#dbd8d0 100%);
      border: 2px solid; border-color: #f8f4ec #808078 #808078 #f8f4ec;
      cursor: pointer; outline: none;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5);
      position: relative;
    }
    /* Dotted focus ring like real XP */
    #welcome-alert-ok::after {
      content: '';
      position: absolute; inset: 2px;
      border: 1px dotted #000;
      pointer-events: none;
    }
    #welcome-alert-ok:hover { background: linear-gradient(180deg,#f8f4ec,#e8e4dc); }
    #welcome-alert-ok:active { border-color: #808078 #f8f4ec #f8f4ec #808078; }

    /* ── Windows alert dialog ── */
    #win-alert-overlay {
      position: fixed; inset: 0;
      z-index: 9999;
      display: none; align-items: center; justify-content: center;
      background: rgba(0,0,0,0.15);
    }
    #win-alert-overlay.open { display: flex; }
    #win-alert-box {
      background: #d4d0c8;
      border: 2px solid; border-color: #f0ece4 #404038 #404038 #f0ece4;
      box-shadow: 4px 4px 10px rgba(0,0,0,0.5);
      font-family: 'Tahoma', Arial, sans-serif;
      min-width: 300px; max-width: 380px;
      animation: winPop 0.18s cubic-bezier(0.22,1,0.36,1) both;
    }
    #win-alert-titlebar {
      background: linear-gradient(180deg,#0997ff,#0053ee 8%,#0050ee 40%,#06f 88%,#06f 93%,#005bff 95%,#003dd7 96%,#003dd7);
      padding: 3px 4px 3px 6px;
      display: flex; align-items: center; gap: 5px;
    }
    #win-alert-titlebar span { flex:1; color:#fff; font-size:11px; font-weight:bold; }
    #win-alert-body {
      padding: 18px 20px 12px;
      display: flex; align-items: flex-start; gap: 14px;
    }
    #win-alert-body svg { flex-shrink: 0; margin-top: 2px; }
    #win-alert-text { font-size: 12px; color: #000; line-height: 1.5; }
    #win-alert-footer {
      padding: 6px 20px 14px;
      display: flex; justify-content: center;
    }
    #win-alert-ok {
      min-width: 80px; height: 24px; padding: 0 16px;
      background: linear-gradient(180deg,#d4d0c8 0%,#b8b4ac 100%);
      border: 2px solid; border-color: #f0ece4 #404038 #404038 #f0ece4;
      font-family: 'Tahoma', Arial, sans-serif;
      font-size: 11px; font-weight: bold; cursor: pointer; color: #000;
    }
    #win-alert-ok:active { border-color: #404038 #f0ece4 #f0ece4 #404038; }

    /* ── BSOD ── */
    #bsod {
      position: fixed; inset: 0;
      background: #0000aa;
      z-index: 8000;
      display: none;
      padding: 48px 52px;
      font-family: 'Courier New', Courier, monospace;
      font-size: 15px;
      color: #fff;
      line-height: 1.65;
      box-sizing: border-box;
      overflow: hidden;
    }
    #bsod.active { display: block; }

    #bsod-header {
      background: #aaa;
      color: #0000aa;
      display: inline-block;
      padding: 0 6px;
      margin-bottom: 24px;
      font-weight: bold;
      font-size: 15px;
    }
    #bsod-body { white-space: pre-wrap; }
    #bsod-countdown {
      margin-top: 28px;
      font-size: 15px;
    }
    #bsod-cursor {
      display: inline-block;
      width: 9px; height: 15px;
      background: #fff;
      vertical-align: text-bottom;
      animation: bsodBlink 0.6s step-end infinite;
    }
    @keyframes bsodBlink {
      0%,100% { opacity: 1; } 50% { opacity: 0; }
    }

    /* ── Cestino modal ── */
    #cestino-overlay {
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.18);
      z-index: 5000;
      display: none;
      align-items: center;
      justify-content: center;
    }
    #cestino-overlay.open { display: flex; }

    #cestino-modal {
      width: 900px;
      max-width: 94vw;
      min-height: 560px;
      display: flex;
      flex-direction: column;
      background: #d4d0c8;
      border: 2px solid;
      border-color: #f0ece4 #404038 #404038 #f0ece4;
      box-shadow: 4px 4px 10px rgba(0,0,0,0.55);
      font-family: 'Tahoma', Arial, sans-serif;
      animation: winPop 0.18s cubic-bezier(0.22,1,0.36,1) both;
    }
    @keyframes winPop {
      from { opacity: 0; transform: scale(0.05); }
      to   { opacity: 1; transform: scale(1); }
    }
    @keyframes msnShakeAnim {
      0%   { transform: translateX(0); }
      8%   { transform: translateX(-12px); }
      18%  { transform: translateX(11px); }
      28%  { transform: translateX(-10px); }
      38%  { transform: translateX(9px); }
      48%  { transform: translateX(-7px); }
      58%  { transform: translateX(6px); }
      68%  { transform: translateX(-4px); }
      78%  { transform: translateX(3px); }
      88%  { transform: translateX(-2px); }
      100% { transform: translateX(0); }
    }
    /* shake gestita via JS inline style */
    @keyframes winClose {
      from { opacity: 1; transform: scale(1); }
      to   { opacity: 0; transform: scale(0.05); }
    }
    .win-closing {
      animation: winClose 0.15s cubic-bezier(0.55,0,1,0.45) both !important;
      pointer-events: none;
    }

    /* Title bar */
    #cestino-titlebar {
      background: linear-gradient(180deg,#0997ff,#0053ee 8%,#0050ee 40%,#06f 88%,#06f 93%,#005bff 95%,#003dd7 96%,#003dd7);
      padding: 3px 4px 3px 6px;
      display: flex; align-items: center; gap: 4px;
      user-select: none;
    }
    #cestino-titlebar img {
      width: 16px; height: 16px; object-fit: contain; flex-shrink: 0;
    }
    #cestino-titlebar span {
      flex: 1;
      color: #fff; font-size: 11px; font-weight: bold;
      letter-spacing: 0.02em;
    }
    .win-tb-btn {
      width: 16px; height: 14px;
      background: none; border: none; box-shadow: none; outline: none;
      cursor: pointer; padding: 0;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .win-tb-btn img { width: 100%; height: 100%; object-fit: contain; display: block; }

    /* Toolbar strip */
    #cestino-toolbar {
      background: linear-gradient(180deg,#d4d0c8 0%,#c8c4bc 100%);
      border-bottom: 1px solid #888;
      padding: 2px 4px;
      font-size: 11px; color: #444;
    }

    /* Address bar */
    #cestino-addrbar {
      background: #d4d0c8;
      border-bottom: 2px solid #888;
      padding: 2px 6px;
      display: flex; align-items: center; gap: 4px;
      font-size: 11px;
    }
    #cestino-addrbar label { color: #000; font-weight: bold; white-space: nowrap; }
    #cestino-addrbar .addr-box {
      flex: 1; height: 18px;
      background: #fff;
      border: 1px solid; border-color: #808080 #d4d0c8 #d4d0c8 #808080;
      padding: 0 4px; font-size: 11px; display: flex; align-items: center;
    }

    /* File grid */
    #cestino-files {
      padding: 10px 8px;
      display: flex; flex-wrap: wrap; gap: 14px 10px;
      min-height: 280px;
      background: #fff;
      overflow-y: auto;
    }
    .cestino-file {
      width: 96px;
      display: flex; flex-direction: column; align-items: center;
      gap: 4px; padding: 4px;
      cursor: default;
      border: 1px solid transparent;
    }
    .cestino-file:hover {
      background: #316ac5;
      border-color: #316ac5;
    }
    .cestino-file:hover .cf-name { color: #fff; }
    .cestino-file img { width: 42px; height: 42px; object-fit: contain; }
    .cf-name {
      font-size: 10px; color: #000; text-align: center;
      word-break: break-word; line-height: 1.3;
    }

    /* Status bar */
    #cestino-statusbar {
      border-top: 1px solid #888;
      padding: 2px 6px;
      font-size: 11px; color: #000;
      display: flex; gap: 12px;
    }

    /* ── Lavori modal ── */
    #lavori-overlay {
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.18);
      z-index: 5006;
      display: none;
      align-items: center;
      justify-content: center;
    }
    #lavori-overlay.open { display: flex; }
    #lavori-modal {
      position: absolute;
      width: 900px;
      min-height: 560px;
      display: flex;
      flex-direction: column;
      max-width: 94vw;
      background: #d4d0c8;
      border: 2px solid;
      border-color: #f0ece4 #404038 #404038 #f0ece4;
      box-shadow: 4px 4px 10px rgba(0,0,0,0.55);
      font-family: 'Tahoma', Arial, sans-serif;
      animation: winPop 0.18s cubic-bezier(0.22,1,0.36,1) both;
    }
    #lavori-titlebar {
      background: linear-gradient(180deg,#0997ff,#0053ee 8%,#0050ee 40%,#06f 88%,#06f 93%,#005bff 95%,#003dd7 96%,#003dd7);
      padding: 3px 4px 3px 6px;
      display: flex; align-items: center; gap: 4px;
      user-select: none; cursor: grab;
    }
    #lavori-titlebar:active { cursor: grabbing; }
    #lavori-titlebar img { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; }
    #lavori-titlebar span { flex: 1; color: #fff; font-size: 11px; font-weight: bold; }
    #lavori-toolbar {
      background: linear-gradient(180deg,#d4d0c8 0%,#c8c4bc 100%);
      border-bottom: 1px solid #888;
      padding: 2px 4px;
      font-size: 11px; color: #444;
    }
    #lavori-addrbar {
      background: #d4d0c8;
      border-bottom: 2px solid #888;
      padding: 2px 6px;
      display: flex; align-items: center; gap: 4px;
      font-size: 11px;
    }
    #lavori-addrbar label { color: #000; font-weight: bold; white-space: nowrap; }
    #lavori-addrbar .addr-box {
      flex: 1; height: 18px;
      background: #fff;
      border: 1px solid; border-color: #808080 #d4d0c8 #d4d0c8 #808080;
      padding: 0 4px; font-size: 11px; display: flex; align-items: center;
    }
    #lavori-files {
      padding: 14px 10px;
      display: flex; flex-wrap: wrap; gap: 18px 14px;
      align-items: flex-start; align-content: flex-start;
      min-height: 220px;
      background: #fff;
      overflow-y: auto;
    }
    .lavori-folder {
      width: 90px;
      display: flex; flex-direction: column; align-items: center;
      gap: 5px; padding: 6px 4px;
      cursor: default;
      border: 1px solid transparent;
      align-self: flex-start;
    }
    .lavori-folder:hover {
      background: #316ac5;
      border-color: #316ac5;
    }
    .lavori-folder:hover .lf-name { color: #fff; }
    .lavori-folder img { width: 44px; height: 44px; object-fit: contain; }
    .lf-name {
      font-size: 10px; color: #000; text-align: center;
      word-break: break-all; line-height: 1.3;
    }
    #lavori-statusbar {
      border-top: 1px solid #888;
      padding: 2px 6px;
      font-size: 11px; color: #000;
      display: flex; gap: 12px;
    }
    #cestino-statusbar span { border-right: 1px solid #999; padding-right: 10px; }
    #cestino-statusbar span:last-child { border-right: none; }

    /* ── Risorse del Computer modal ── */
    #mycomp-overlay {
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.18);
      z-index: 5007;
      display: none; align-items: center; justify-content: center;
    }
    #mycomp-overlay.open { display: flex; }
    #mycomp-modal {
      position: absolute;
      width: 900px; min-height: 560px;
      display: flex; flex-direction: column;
      max-width: 94vw;
      background: #d4d0c8;
      border: 2px solid; border-color: #f0ece4 #404038 #404038 #f0ece4;
      box-shadow: 4px 4px 10px rgba(0,0,0,0.55);
      font-family: 'Tahoma', Arial, sans-serif;
      animation: winPop 0.18s cubic-bezier(0.22,1,0.36,1) both;
    }
    #mycomp-titlebar {
      background: linear-gradient(180deg,#0997ff,#0053ee 8%,#0050ee 40%,#06f 88%,#06f 93%,#005bff 95%,#003dd7 96%,#003dd7);
      padding: 3px 4px 3px 6px;
      display: flex; align-items: center; gap: 4px;
      user-select: none; cursor: grab;
    }
    #mycomp-titlebar:active { cursor: grabbing; }
    #mycomp-titlebar img { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; }
    #mycomp-titlebar span { flex: 1; color: #fff; font-size: 11px; font-weight: bold; }
    #mycomp-toolbar {
      background: linear-gradient(180deg,#d4d0c8 0%,#c8c4bc 100%);
      border-bottom: 1px solid #888;
      padding: 2px 4px; font-size: 11px; color: #444;
    }
    #mycomp-addrbar {
      background: #d4d0c8; border-bottom: 2px solid #888;
      padding: 2px 6px; display: flex; align-items: center; gap: 4px; font-size: 11px;
    }
    #mycomp-addrbar label { color: #000; font-weight: bold; white-space: nowrap; }
    #mycomp-addrbar .addr-box {
      flex: 1; height: 18px; background: #fff;
      border: 1px solid; border-color: #808080 #d4d0c8 #d4d0c8 #808080;
      padding: 0 4px; font-size: 11px; display: flex; align-items: center;
    }
    #mycomp-files {
      flex: 1; background: #fff; overflow-y: auto; padding: 14px 18px;
    }
    .mycomp-section-title {
      font-size: 11px; font-weight: bold; color: #000;
      border-bottom: 1px solid #316ac5; margin-bottom: 10px; padding-bottom: 2px;
    }
    .mycomp-items-row {
      display: flex; flex-wrap: wrap; gap: 8px 16px;
      margin-bottom: 20px;
    }
    .mycomp-item {
      display: flex; align-items: center; gap: 10px;
      padding: 5px 8px; cursor: default;
      border: 1px solid transparent; border-radius: 2px;
      min-width: 180px;
    }
    .mycomp-item:hover { background: #316ac5; border-color: #316ac5; }
    .mycomp-item:hover .mycomp-item-name { color: #fff; }
    .mycomp-item:hover .mycomp-item-sub { color: rgba(255,255,255,0.8); }
    .mycomp-item img { width: 36px; height: 36px; object-fit: contain; flex-shrink: 0; }
    .mycomp-item-text { display: flex; flex-direction: column; }
    .mycomp-item-name { font-size: 11px; font-weight: bold; color: #000; }
    .mycomp-item-sub { font-size: 10px; color: #555; }
    #mycomp-statusbar {
      border-top: 1px solid #888; padding: 2px 6px;
      font-size: 11px; color: #000; display: flex; gap: 12px;
    }
    @media (max-width: 767px) {
      #mycomp-modal { width: 96vw !important; max-width: 96vw !important; }
      .mycomp-item { min-width: 140px; }
    }

    /* Start Menu (Windows 2000) */
    #win-startmenu {
      position: fixed; bottom: 38px; left: 0;
      z-index: 401;
      font-family: 'Tahoma', Arial, sans-serif;
      transform-origin: bottom left;
    }
    #win-startmenu.open {
      animation: menuPop 0.15s cubic-bezier(0.22,1,0.36,1) both;
    }
    @keyframes menuPop {
      from { opacity: 0; transform: scaleY(0.6); }
      to   { opacity: 1; transform: scaleY(1);   }
    }
    .win-menu-sidebar {
      width: 28px; flex-shrink: 0;
      background: linear-gradient(180deg,#2050d0 0%,#0c30b0 50%,#081ea0 100%);
      display: flex; align-items: flex-end; justify-content: center;
      padding-bottom: 8px;
    }
    .win-menu-sidebar span {
      writing-mode: vertical-rl; transform: rotate(180deg);
      color: rgba(255,255,255,0.82); font-size: 11px; font-weight: bold;
      letter-spacing: 0.06em; white-space: nowrap;
    }
    .win-menu-items { flex: 1; background: #fff; display: flex; flex-direction: column; }
    .win-menu-item {
      display: flex; align-items: center; gap: 9px;
      padding: 11px 12px; font-size: 12px; color: #000;
      cursor: pointer; text-decoration: none;
      width: 95%; margin: 0 auto; box-sizing: border-box;
      border-radius: 2px;
    }
    .win-menu-item:hover { background: #0824d0; color: #fff; }
    .win-menu-item .wm-icon { font-size: 22px; width: 26px; text-align: center; flex-shrink: 0; }
    .win-menu-item .wm-label { font-weight: bold; }
    .win-menu-sep { height: 1px; background: #d0d0d0; margin: 2px 0; }
    .win-menu-footer {
      display: flex; align-items: center; gap: 8px;
      padding: 6px 10px; font-size: 11px; color: #000;
      background: linear-gradient(180deg,#e8e4dc 0%,#d4d0c8 100%);
      border-top: 1px solid #b0aca4; cursor: pointer;
    }
    .win-menu-footer:hover { background: linear-gradient(180deg,#d0e8ff 0%,#a8d0f8 100%); }

    /* Second cursor for taskbar phase — same arrow, tip pointing down */
    #win-cursor {
      position: fixed; width: 58px; height: 74px;
      z-index: 450; pointer-events: none; opacity: 0;
      filter: drop-shadow(2px 3px 4px rgba(0,0,0,0.8));
      transform: rotate(180deg);
    }
    /* bounce moves the cursor TOWARD the button (down in screen space = -Y in rotated space) */
    @keyframes winCurBounce {
      0%,100% { transform: rotate(180deg) translateY(0); }
      40%      { transform: rotate(180deg) translateY(-11px); }
    }
    #win-cursor.bouncing { animation: winCurBounce 0.65s cubic-bezier(0.4,0,0.2,1) 3; }

    /* ═══════════════════════════════════════
       MOBILE RESPONSIVE
    ═══════════════════════════════════════ */
    @media (max-width: 767px) {
      #final-logo { font-size: 48px; }

      /* Hide overlays that truly can't work on mobile */
      #win-cursor, #win-alert-overlay {
        display: none !important;
      }

      /* BSOD works on mobile */
      #bsod { display: none; }
      #bsod.active { display: block !important; font-size: 13px; padding: 20px; }

      /* Cestino – responsive */
      #cestino-overlay.open { display: flex !important; align-items: center; justify-content: center; }
      #cestino-modal {
        width: 96vw !important; max-width: 96vw !important;
        position: relative !important; left: auto !important; top: auto !important;
      }
      #cestino-files { gap: 10px !important; padding: 10px !important; }
      .cestino-file { width: 70px !important; }
      .cestino-file img { width: 32px !important; height: 32px !important; }
      .cf-name { font-size: 9px !important; }

      /* Lavori – responsive */
      #lavori-modal {
        width: 96vw !important; max-width: 96vw !important;
        position: relative !important; left: auto !important; top: auto !important;
      }
      #lavori-files { gap: 10px !important; padding: 10px !important; }
      .lavori-folder { width: 70px !important; }
      .lavori-folder img { width: 32px !important; height: 32px !important; }
      .lf-name { font-size: 9px !important; }

      /* Task pane hidden on mobile */
      .xp-task-pane { display: none !important; }

      /* Windows Media Player – responsive */
      #wmp-overlay.open { display: flex !important; align-items: center; justify-content: center; }
      #wmp-modal {
        width: 96vw !important; max-width: 96vw !important;
        position: relative !important; left: auto !important; top: auto !important;
      }
      #wmp-vis-wrap { min-height: 200px !important; }

      /* Cartook – responsive */
      #cartook-overlay.open { display: block !important; }
      #cartook-modal {
        width: 96vw !important; max-width: 96vw !important;
        position: absolute !important;
        left: 2vw !important; top: 20px !important;
      }
      #cartook-iframe-wrap { height: 60vh !important; }
      #cartook-blocked { height: 60vh !important; }

      /* Shutdown overlay works on mobile */
      #win-shutdown { display: none; }
      #win-shutdown.active { display: flex !important; }

      /* Outlook Express – responsive on mobile */
      #oe-overlay.open { display: flex; align-items: center; justify-content: center; }
      #oe-modal {
        width: 96vw !important;
        max-width: 96vw !important;
        font-size: 12px !important;
        position: relative !important;
        left: auto !important; top: auto !important;
      }
      #oe-modal input, #oe-modal select, #oe-modal textarea {
        font-size: 16px !important;
      }
      #oe-modal .oe-message { height: 120px !important; }

      /* Excel Servizi – responsive on mobile */
      #xls-overlay.open { display: flex; align-items: center; justify-content: center; }
      #xls-modal {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        position: relative !important;
        left: auto !important; top: auto !important;
        border-radius: 0 !important;
        border: none !important;
        display: flex !important; flex-direction: column !important;
        overflow: hidden !important;
      }
      #xls-titlebar { flex-shrink: 0 !important; }
      #xls-menubar {
        display: flex !important;
        font-size: 10px !important;
        padding: 2px 3px !important;
        gap: 1px !important;
        flex-shrink: 0;
      }
      .xls-menu-item { padding: 1px 4px !important; font-size: 10px !important; }
      #xls-toolbar {
        display: flex !important;
        padding: 2px 3px !important;
        gap: 2px !important;
        flex-shrink: 0;
      }
      .xls-tool-btn { width: 22px !important; height: 22px !important; font-size: 12px !important; }
      #xls-formula-bar {
        display: flex !important;
        padding: 2px 4px !important;
        flex-shrink: 0;
      }
      #xls-cell-ref { width: 40px !important; font-size: 10px !important; }
      #xls-formula-input { font-size: 10px !important; }
      #xls-sheet-area {
        flex: 1 !important;
        max-height: none !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
      }
      #xls-sheet-area table { font-size: 11px !important; }
      #xls-sheet-area td.xls-cell { height: 20px !important; font-size: 11px !important; padding: 1px 4px !important; }
      #xls-sheet-area .col-A { min-width: 140px !important; width: 140px !important; }
      #xls-sheet-area .col-B { min-width: 90px !important; width: 90px !important; }
      #xls-sheet-area .col-C { min-width: 90px !important; width: 90px !important; }
      #xls-sheet-tabs { flex-shrink: 0; font-size: 10px !important; }
      .xls-tab { font-size: 10px !important; padding: 2px 8px !important; }
      #xls-statusbar { flex-shrink: 0; font-size: 10px !important; padding: 2px 6px !important; }

      /* Start menu: hidden by default, shown when open */
      #win-startmenu { display: none; }
      #win-startmenu.open { display: flex !important; flex-direction: column !important; z-index: 9999; width: 96vw !important; }
      #wm-columns { flex-direction: column !important; }
      #wm-left { width: 100% !important; }
      #wm-col-divider { width: 100% !important; height: 1px !important; }
      #wm-right { width: 100% !important; }

      /* Taskbar always visible, adjusted for mobile */
      #win-taskbar {
        display: flex !important;
        height: 36px;
      }
      #win-start-btn img { height: 28px; }

      /* Desktop icons visible, stack vertically on mobile */
      #desktop-icons {
        display: flex !important;
        flex-direction: column;
        gap: 8px;
        top: 8px;
        left: 8px;
      }
      .desk-icon {
        width: 44px;
      }
      .desk-icon img { width: 40px; height: 40px; }
      .desk-icon { margin-bottom: 5px; }
      .desk-icon span { font-size: 8px; }

      /* Scene center */
      .scene {
        padding: 0;
        align-items: center;
        justify-content: center;
      }

      /* Browser window: tall & narrow on mobile, above icons */
      .browser {
        width: 84vw;
        height: 72vh;
        z-index: 230;
      }

      /* Compact IE chrome */
      .ie-menubar,
      .ie-toolbar { display: none; }

      .ie-titlebar {
        height: 20px;
        padding: 0 2px 0 4px;
      }
      .ie-titlebar span { font-size: 9px; }
      .ie-title-icon { width: 12px; height: 12px; }
      .ie-btn { width: 14px; height: 13px; padding: 0; background: none; border: none; }

      .ie-addrbar {
        font-size: 9px;
        padding: 2px 4px;
        height: 20px;
        min-height: 0;
      }
      .ie-addr-field { font-size: 9px; }
      .ie-go { font-size: 9px; padding: 0 4px; }

      .ie-statusbar {
        font-size: 9px;
        padding: 1px 4px;
        height: 16px;
      }

      /* Retro site: single-column vertical layout */
      .retro-wrap {
        height: calc(72vh - 56px); /* full remaining height */
        overflow-y: auto;
        overflow-x: hidden;
      }

      /* Reset any scaling */
      .retro-wrap .retro-body {
        transform: none;
        width: 100%;
        margin-left: 0;
        padding: 6px 8px;
        box-sizing: border-box;
      }

      /* Marquee narrower */
      .mq { font-size: 10px; }

      /* Title smaller */
      .big-title { font-size: 20px !important; margin: 4px 0 !important; }

      /* 3-column table → stacked single column */
      .layout-table,
      .layout-table tbody,
      .layout-table tr { display: block; width: 100%; }

      .layout-table td {
        display: block;
        width: 100% !important;
        border-bottom: 1px dashed #444;
        padding: 8px 4px;
        text-align: left !important;
        font-size: 11px !important;
        line-height: 1.7;
      }

      /* Badges wrap nicely */
      .badge { font-size: 8px !important; padding: 1px 4px !important; }

      /* Visitor counter smaller */
      .counter { font-size: 16px !important; letter-spacing: 2px !important; }

      /* Kinetic text stage full width */
      #stage-line { width: 92vw; }

      /* Giant cursor stays large */
      #giant-cur { width: 80px; height: 100px; }
    }


    /* ═══════════════════════════════════════
       WINDOWS XP LUNA THEME OVERRIDES
    ═══════════════════════════════════════ */

    /* ── XP Task Pane (left sidebar for folder windows) ── */
    .xp-explorer-body {
      display: flex; flex: 1; overflow: hidden; min-height: 420px;
    }
    .xp-task-pane {
      width: 170px; flex-shrink: 0;
      background: linear-gradient(180deg, #c5d9f1 0%, #a8c4e8 100%);
      border-right: 1px solid #7aa0cc;
      overflow-y: auto;
      padding: 6px 0;
      display: flex; flex-direction: column; gap: 4px;
    }
    .xp-pane-section {
      margin: 0 4px;
      border: 1px solid #7aa0cc;
      border-radius: 4px;
      overflow: hidden;
    }
    .xp-pane-header {
      background: linear-gradient(180deg, #2878d4 0%, #1254a8 100%);
      color: #fff;
      font-size: 11px; font-weight: bold;
      padding: 4px 8px;
      cursor: default;
      display: flex; align-items: center; gap: 4px;
    }
    .xp-pane-items {
      background: rgba(255,255,255,0.55);
      padding: 4px 0;
    }
    .xp-pane-item {
      display: flex; align-items: center; gap: 6px;
      padding: 3px 8px;
      font-size: 11px; color: #00008b;
      cursor: pointer; text-decoration: none;
    }
    .xp-pane-item:hover { text-decoration: underline; color: #0000dd; }
    .xp-pane-item img { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; }
    .xp-files-area {
      flex: 1; overflow-y: auto;
    }

    /* ── All modal containers: XP border + fully rounded ── */
    #cestino-modal, #wmp-modal, #oe-modal, #word-modal,
    #paint-modal, #notepad-modal, #xls-modal, #cartook-modal,
    #lavori-modal, #mycomp-modal, #win-alert-modal, #gino-folder-modal {
      border: 3px solid #1254a8 !important;
      border-top: 0px !important;
      border-radius: 8px !important;
      overflow: hidden;
      box-shadow: 3px 3px 12px rgba(0,0,0,0.6),
                  inset 0 0 0 1px rgba(255,255,255,0.2) !important;
    }

    /* ── All titlebars: XP gradient + rounded top ── */
    #cestino-titlebar, #wmp-titlebar, #oe-titlebar, #word-titlebar,
    #paint-titlebar, #notepad-titlebar, #xls-titlebar,
    #cartook-modal .ie-titlebar, #lavori-titlebar, #mycomp-titlebar, #win-alert-titlebar,
    #gino-folder-titlebar, .ie-titlebar {
      background: linear-gradient(180deg,#0997ff,#0053ee 8%,#0050ee 40%,#06f 88%,#06f 93%,#005bff 95%,#003dd7 96%,#003dd7) !important;
      border-radius: 5px 5px 0 0;
      padding: 4px 4px 4px 8px !important;
    }

    /* WMP titlebar: standard XP blue */
    #wmp-titlebar {
      background: linear-gradient(180deg,#0997ff,#0053ee 8%,#0050ee 40%,#06f 88%,#06f 93%,#005bff 95%,#003dd7 96%,#003dd7) !important;
    }

    /* ── XP-style title bar buttons ── */
    .win-tb-btn {
      width: 21px !important; height: 21px !important;
      background: none !important;
      border: none !important;
      box-shadow: none !important;
      padding: 1px !important;
      display: flex; align-items: center; justify-content: center;
    }
    .win-tb-btn img { width: 100%; height: 100%; object-fit: contain; display: block; }
    .win-tb-btn:hover { background: none !important; opacity: 0.85; }
    .win-tb-btn:active { opacity: 0.7; }

    /* ── Taskbar XP blue ── */
    #win-taskbar {
      background: linear-gradient(180deg,#2e68c6 0%,#1957b8 12%,#1450b0 50%,#1450b0 80%,#1e62c0 100%) !important;
      border-top: 1px solid #0040a8 !important;
    }

    /* System tray XP style (azzurro chiaro) */
    #win-tray {
      margin-left: auto !important;
      height: 100% !important;
      display: flex !important;
      align-items: center !important;
      gap: 6px !important;
      padding: 0 10px !important;
      background: linear-gradient(#0c59b9 1%,#139ee9 6%,#18b5f2,#139beb 14%,#1290e8 19%,#0d8dea 63%,#0d9ff1 81%,#0f9eed 88%,#119be9,#1392e2,#137ed7,#095bc9) !important;
      border-left: 1px solid #0a50b0 !important;
    }
    #tray-network, #tray-msn {
      width: 16px !important; height: 16px !important;
      object-fit: contain !important;
      flex-shrink: 0 !important;
      cursor: default !important;
    }
    #win-clock {
      color: #fff !important;
      font-size: 11px !important;
      font-family: 'Tahoma', Arial, sans-serif !important;
      white-space: nowrap !important;
    }

    /* Clock + WMP taskbar btn XP style */
    #win-clock {
      background: transparent !important;
      color: #fff !important;
      border-left: none !important;
      font-size: 12px !important;
    }
    #wmp-taskbar-btn {
      background: linear-gradient(180deg,#1e5ec8 0%,#1450b0 100%) !important;
      border: 1px solid #0040a0 !important;
      color: #fff !important;
      border-radius: 3px !important;
    }
    #wmp-taskbar-btn:hover {
      background: linear-gradient(180deg,#2e6ed8 0%,#1c5cc4 100%) !important;
    }
    .win-taskbar-divider {
      border-left-color: #0a40a0 !important;
      border-right-color: #3878d4 !important;
    }

    /* ── Start menu XP two-column ── */
    #win-startmenu {
      border: 3px solid #1254a8 !important;
      border-radius: 8px 8px 0 0 !important;
      box-shadow: 4px 0 14px rgba(0,0,0,0.7) !important;
      bottom: 38px !important;
      width: 390px !important;
      overflow: hidden;
      display: none;
      flex-direction: column !important;
    }
    #win-startmenu.open { display: flex !important; }

    /* Header */
    #wm-header {
      background: linear-gradient(rgb(24,104,206) 0%,rgb(14,96,203) 12%,rgb(14,96,203) 20%,rgb(17,100,207) 32%,rgb(22,103,207) 33%,rgb(27,108,211) 47%,rgb(30,112,217) 54%,rgb(36,118,220) 60%,rgb(41,122,224) 65%,rgb(52,130,227) 77%,rgb(55,134,229) 79%,rgb(66,142,233) 90%,rgb(71,145,235) 100%);
      display: flex; align-items: center; gap: 10px;
      padding: 8px 12px 8px 10px;
      min-height: 54px;
      flex-shrink: 0;
    }
    #wm-avatar {
      width: 46px; height: 46px;
      background: #fff;
      border: 2px solid rgba(255,255,255,0.6);
      border-radius: 3px;
      display: flex; align-items: center; justify-content: center;
      font-family: 'VisbyCF', sans-serif;
      font-weight: 700; font-size: 14px; color: #1254a8;
      flex-shrink: 0;
      overflow: hidden;
    }
    #wm-username {
      color: #fff; font-size: 14px; font-weight: bold;
      font-family: 'Tahoma', Arial, sans-serif;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
      letter-spacing: 0.02em;
    }

    /* Two-column body */
    #wm-columns {
      display: flex; flex: 1;
      position: relative;
      background: #fff;
      min-height: 360px;
    }

    /* LEFT column */
    #wm-left {
      width: 210px; flex-shrink: 0;
      background: #fff;
      display: flex; flex-direction: column;
      padding: 10px 0 0;
    }
    .wm-app-item {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 12px;
      cursor: pointer; text-decoration: none;
      color: #000;
    }
    .wm-app-item:hover { background: #316ac5; color: #fff; }
    .wm-app-item:hover .wm-app-text span { color: rgba(255,255,255,0.8); }
    .wm-app-item img { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; }
    .wm-app-text { display: flex; flex-direction: column; line-height: 1.3; }
    .wm-app-text strong { font-size: 12px; font-weight: bold; }
    .wm-app-text span { font-size: 10px; color: #555; }
    .wm-col-sep {
      height: 1px; background: #c0c0c0;
      margin: 6px 0;
    }
    .wm-allprograms-row {
      margin-top: auto;
      display: flex; align-items: center; justify-content: space-between;
      padding: 8px 14px;
      font-family: 'Tahoma', Arial, sans-serif;
      font-size: 12px; font-weight: bold; color: #000;
      border-top: 1px solid #c0c0c0;
      cursor: pointer;
    }
    .wm-allprograms-row:hover { background: #316ac5; color: #fff; }
    .wm-allprograms-row:hover svg polygon { fill: #fff; }

    /* All Programs panel */
    #wm-allprograms-panel {
      display: none;
      position: fixed;
      bottom: 38px;
      left: 216px; /* right of #wm-left (210px) + start menu border (3px) + 3px */
      width: 240px;
      max-height: 70vh;
      background: #fff;
      border: 1px solid #7f9db9;
      border-bottom: none;
      box-shadow: 3px -3px 10px rgba(0,0,0,0.4);
      flex-direction: column;
      overflow-y: auto;
      z-index: 10001;
    }
    #wm-allprograms-panel.open { display: flex; }
    #wm-allprograms-back-row {
      display: flex; align-items: center; gap: 6px;
      padding: 6px 12px;
      font-size: 11px; color: #333;
      cursor: pointer;
      border-bottom: 1px solid #c0c0c0;
      background: #f0ece8;
      flex-shrink: 0;
    }
    #wm-allprograms-back-row:hover { background: #316ac5; color: #fff; }
    #wm-allprograms-back-row:hover svg polygon { fill: #fff; }
    .wm-prog-sep {
      height: 1px; background: #d0ccc8; margin: 2px 0; flex-shrink: 0;
    }
    .wm-prog-item {
      display: flex; align-items: center; gap: 8px;
      padding: 5px 12px;
      font-size: 11px; color: #000;
      cursor: default;
      flex-shrink: 0;
    }
    .wm-prog-item img { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; }
    .wm-prog-item:hover { background: #316ac5; color: #fff; }

    /* Vertical divider */
    #wm-col-divider {
      width: 1px;
      background: linear-gradient(180deg, #c0c8e0 0%, #8090c0 50%, #c0c8e0 100%);
      flex-shrink: 0;
    }

    /* RIGHT column */
    #wm-right {
      flex: 1;
      background: #d8e4f8;
      display: flex; flex-direction: column;
      padding: 12px 0;
      gap: 4px;
    }
    .wm-sys-item {
      display: flex; align-items: center; gap: 8px;
      padding: 9px 10px;
      cursor: pointer; text-decoration: none; color: #000;
      font-size: 12px; font-weight: bold;
      font-family: 'Tahoma', Arial, sans-serif;
      border-radius: 3px; margin: 0 4px;
    }
    .wm-sys-item:hover { background: #316ac5; color: #fff; }
    .wm-sys-item img { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }

    /* Footer */
    #wm-footer {
      background: linear-gradient(rgb(66,130,214) 0%,rgb(59,133,224) 3%,rgb(65,138,227) 5%,rgb(65,138,227) 17%,rgb(60,135,226) 21%,rgb(55,134,228) 26%,rgb(52,130,227) 29%,rgb(46,126,225) 39%,rgb(35,116,223) 49%,rgb(32,114,219) 57%,rgb(25,110,219) 62%,rgb(23,107,216) 72%,rgb(20,104,213) 75%,rgb(17,101,210) 83%,rgb(15,97,203) 88%);
      border-top: 1px solid #0a3090;
      display: flex; justify-content: flex-end;
      align-items: center;
      padding: 10px 10px;
      gap: 8px;
      flex-shrink: 0;
    }
    .wm-footer-btn {
      display: flex; align-items: center; gap: 6px;
      background: none;
      border: none;
      border-radius: 3px;
      padding: 3px 8px;
      font-family: 'Tahoma', Arial, sans-serif;
      font-size: 11px; font-weight: normal; color: #fff;
      cursor: pointer;
    }
    .wm-footer-btn:hover {
      background: rgba(255,255,255,0.15);
    }

    /* ── Modal bodies: white XP background ── */
    #cestino-modal, #lavori-modal, #mycomp-modal, #word-modal,
    #notepad-modal, #oe-modal, #cartook-modal, #win-alert-modal, #gino-folder-modal {
      background: #fff !important;
    }

    /* ── Toolbar/menubar strips: XP beige ── */
    #cestino-toolbar, #lavori-toolbar, #gino-folder-toolbar,
    #notepad-menubar, #word-menubar,
    #oe-menubar, #cartook-modal .ie-menubar, #cartook-modal .ie-toolbar,
    #paint-menubar, #xls-menubar, #xls-toolbar, #wmp-menubar {
      background: #ece9d8 !important;
      border-bottom: 1px solid #aca899 !important;
    }

    /* Address bars: white input style */
    #cestino-addrbar, #lavori-addrbar, #gino-folder-addrbar,
    #cartook-modal .ie-addrbar {
      background: #ece9d8 !important;
      border-bottom: 1px solid #aca899 !important;
    }
    #cestino-addrbar .addr-box, #lavori-addrbar .addr-box, #gino-folder-addrbar .addr-box {
      background: #fff !important;
      border: 1px solid #7f9db9 !important;
    }

    /* Status bars */
    #cestino-statusbar, #lavori-statusbar, #gino-folder-statusbar,
    #notepad-statusbar, #word-statusbar,
    #xls-statusbar, #oe-statusbar {
      background: #ece9d8 !important;
      border-top: 1px solid #aca899 !important;
      color: #000 !important;
    }

    /* Notepad textarea */
    #notepad-textarea {
      background: #fff !important;
    }

    /* Notepad footer */
    #notepad-footer {
      background: #ece9d8 !important;
      border-top: 1px solid #aca899 !important;
    }

    /* OE fields */
    #oe-body { background: #fff !important; }

    /* Excel sheet area stays white */
    #xls-sheet-area { background: #fff !important; }

    /* Paint workspace: keep gray (authentic) */
    #paint-canvas-scroll { background: #808080 !important; }
    #paint-tools { background: #ece9d8 !important; border-right: 1px solid #aca899 !important; }
    #paint-palette-area { background: #ece9d8 !important; border-top: 1px solid #aca899 !important; }
    #paint-statusbar { background: #ece9d8 !important; border-top: 1px solid #aca899 !important; }

    /* reboot btn: già stilizzato come DOS nel CSS base */

    /* IE browser XP titlebar */
    .ie-titlebar {
      border-radius: 5px 5px 0 0 !important;
    }
    .browser {
      border: 3px solid #1254a8 !important;
      border-radius: 8px !important;
      overflow: hidden;
    }


    /* ═══════════════════════════════════════
       VLC MEDIA PLAYER MODAL
    ═══════════════════════════════════════ */
    /* ══════════════════════════════════════
       MSN MESSENGER
    ══════════════════════════════════════ */
    #msn-overlay {
      position: fixed; inset: 0; z-index: 5010;
      display: none; pointer-events: none;
    }
    #msn-overlay.open { display: block; pointer-events: all; }

    #msn-modal {
      position: absolute;
      width: 680px; max-width: 96vw;
      height: 580px; max-height: 92vh;
      background: #c8d8f0;
      border: 3px solid #1254a8;
      border-radius: 8px;
      box-shadow: 4px 6px 18px rgba(0,0,0,0.55);
      font-family: 'Tahoma', Arial, sans-serif;
      font-size: 11px;
      display: flex; flex-direction: column;
      overflow: hidden;
      animation: winPop 0.18s cubic-bezier(0.22,1,0.36,1) both;
    }

    /* Title bar */
    #msn-titlebar {
      background: linear-gradient(180deg,#0997ff,#0053ee 8%,#0050ee 40%,#06f 88%,#06f 93%,#005bff 95%,#003dd7 96%,#003dd7);
      border-radius: 5px 5px 0 0;
      padding: 4px 4px 4px 8px;
      display: flex; align-items: center; gap: 6px;
      cursor: grab; flex-shrink: 0; user-select: none;
    }
    #msn-titlebar:active { cursor: grabbing; }
    #msn-titlebar img { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; }
    #msn-titlebar-text { flex: 1; color: #fff; font-size: 11px; font-weight: bold; text-shadow: 0 1px 2px rgba(0,0,0,0.4); }

    /* Menu bar */
    #msn-menubar {
      background: #d6e4f4; border-bottom: 1px solid #a0b8d8;
      padding: 1px 4px; display: flex; gap: 0; flex-shrink: 0;
    }
    .msn-menu { padding: 2px 8px; font-size: 11px; color: #000; cursor: default; border-radius: 2px; }
    .msn-menu:hover { background: #316ac5; color: #fff; }

    /* Big toolbar */
    #msn-toolbar {
      background: linear-gradient(180deg,#d8eaf8 0%,#c0d4ee 100%);
      border-bottom: 1px solid #a0b8d8;
      padding: 2px 6px; display: flex; align-items: center; gap: 0;
      flex-shrink: 0; min-height: 44px;
    }
    .msn-tool-btn {
      display: flex; flex-direction: column; align-items: center;
      gap: 1px; padding: 2px 6px; cursor: pointer; border-radius: 3px; min-width: 44px;
    }
    .msn-tool-btn:hover { background: rgba(255,255,255,0.5); }
    .msn-tool-icon { font-size: 18px; line-height: 1; }
    .msn-tool-label { font-size: 9px; color: #000; white-space: nowrap; }
    #msn-toolbar-logo {
      margin-left: auto; display: flex; flex-direction: column;
      align-items: flex-end; gap: 2px; padding-right: 4px;
    }
    #msn-logo-top { display: flex; align-items: flex-start; gap: 4px; }
    #msn-logo-text {
      font-size: 22px; font-weight: bold; font-style: italic;
      color: #1254a8; font-family: Georgia, 'Times New Roman', serif;
      letter-spacing: -1px; line-height: 1;
    }
    #msn-logo-butterfly { width: 28px; height: 28px; object-fit: contain; }
    #msn-toolbar-mini-btns { display: flex; gap: 4px; align-items: center; }
    .msn-mini-btn {
      width: 26px; height: 26px; border-radius: 50%;
      background: radial-gradient(circle at 40% 35%, #f0f0f0, #b8b8b8);
      border: 1px solid #888;
      box-shadow: 1px 1px 3px rgba(0,0,0,0.3), inset 0 1px 1px rgba(255,255,255,0.8);
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .msn-mini-btn svg { width: 14px; height: 14px; }

    /* Main body */
    #msn-body { display: flex; flex: 1; overflow: hidden; min-height: 0; background: #c8d8f0; padding: 6px; gap: 6px; }

    /* Left column */
    #msn-left { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid #8aaac8; min-width: 0; }

    /* Messages */
    #msn-messages {
      flex: 1; overflow-y: auto; padding: 6px 8px;
      background: #fff; font-size: 10pt; line-height: 1.6;
      font-family: Arial, sans-serif; min-height: 0;
    }
    .msn-msg-line { margin-bottom: 1px; }
    .msn-msg-who { font-weight: bold; font-family: Arial, sans-serif; font-size: 10pt; }
    .msn-msg-who.bot-who  { color: #004400; }
    .msn-msg-who.user-who { color: #0000cc; }
    .msn-msg-text { display: block; font-family: Arial, sans-serif; font-size: 10pt; }
    .msn-msg-text.bot-text  { color: #006600; }
    .msn-msg-text.user-text { color: #0000cc; }
    .msn-msg-meta { color: #999; font-size: 8pt; margin-left: 5px; }
    .msn-typing-row { font-family: Arial, sans-serif; font-size: 10pt; }

    /* Input controls row */
    #msn-input-controls {
      display: flex; align-items: center; gap: 2px;
      background: #d8eaf8; border-top: 1px solid #8aaac8;
      padding: 3px 6px; flex-shrink: 0;
    }
    .msn-ic-btn { background: none; border: 1px solid transparent; padding: 2px 4px; cursor: pointer; border-radius: 2px; font-size: 13px; color: #000; white-space: nowrap; }
    .msn-ic-btn:hover { background: rgba(255,255,255,0.7); border-color: #aaa; }
    .msn-ic-sep { width: 1px; height: 16px; background: #a0b8d8; margin: 0 2px; flex-shrink: 0; }

    /* Text input + send/search */
    #msn-input-row { display: flex; flex-shrink: 0; border-top: 1px solid #8aaac8; min-height: 80px; }
    #msn-textarea { flex: 1; border: none; outline: none; resize: none; padding: 5px 7px; font-family: Arial, sans-serif; font-size: 16px; background: #fff; color: #0000cc; }
    #msn-action-btns { display: flex; flex-direction: column; border-left: 1px solid #8aaac8; flex-shrink: 0; }
    #msn-send-btn, #msn-search-btn { flex: 1; width: 70px; border: none; background: linear-gradient(180deg,#e8e8e8,#d0d0d0); cursor: pointer; font-size: 11px; font-family: 'Tahoma', Arial, sans-serif; border-bottom: 1px solid #a0b8d8; }
    #msn-send-btn:hover, #msn-search-btn:hover { background: linear-gradient(180deg,#f0f0f0,#ddd); }

    /* Bottom micro bar */
    #msn-bottom-bar { display: flex; gap: 6px; align-items: center; background: #d8eaf8; border-top: 1px solid #8aaac8; padding: 2px 6px; flex-shrink: 0; }

    /* Ad bar */
    #msn-adbar { background: #d0e0f0; border-top: 1px solid #8aaac8; padding: 2px 6px; font-size: 10px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; }
    #msn-adbar a { color: #0033aa; text-decoration: underline; }

    /* Right panel: two avatar boxes */
    #msn-right-panel { width: 120px; display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
    .msn-avatar-box { flex: 1; background: #e8f0fc; border: 1px solid #8aaac8; border-radius: 2px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
    .msn-avatar-box img { width: 84px; height: 84px; object-fit: contain; }
    .msn-avatar-scroll { position: absolute; right: 0; top: 0; bottom: 0; width: 14px; background: #d0ddf0; border-left: 1px solid #8aaac8; display: flex; align-items: center; justify-content: center; font-size: 9px; color: #555; cursor: pointer; }

    @media (max-width: 767px) {
      #msn-modal { width: 96vw !important; height: 85vh !important; position: fixed !important; left: 2vw !important; top: 7.5vh !important; }
      #msn-modal.msn-compact { height: 52vh !important; width: 78vw !important; left: 11vw !important; top: 24vh !important; }
      #msn-right-panel { display: none !important; }
      .msn-tool-label { display: none; }
      .msn-tool-btn { min-width: 36px; padding: 2px 4px; }
    }

    /* ══════════════════════════════════════
       DIAL-UP CONNECTION MODAL
    ══════════════════════════════════════ */
    #dialup-overlay {
      position: fixed; inset: 0; z-index: 6000;
      display: none; align-items: center; justify-content: center;
      pointer-events: none;
    }
    #dialup-overlay.open { display: flex; pointer-events: all; }

    #dialup-modal {
      width: 360px; max-width: 94vw;
      background: #ece9d8;
      border: 3px solid #1254a8;
      border-radius: 8px;
      box-shadow: 6px 8px 24px rgba(0,0,0,0.6);
      font-family: 'Tahoma', Arial, sans-serif;
      font-size: 11px;
      overflow: hidden;
      animation: winPop 0.15s cubic-bezier(0.22,1,0.36,1) both;
    }

    #dialup-titlebar {
      background: linear-gradient(180deg,#0997ff,#0053ee 8%,#0050ee 40%,#06f 88%,#06f 93%,#005bff 95%,#003dd7 96%,#003dd7);
      border-radius: 5px 5px 0 0;
      padding: 4px 6px 4px 8px;
      display: flex; align-items: center; gap: 6px;
      flex-shrink: 0;
    }
    #dialup-titlebar img { width: 16px; height: 16px; object-fit: contain; }
    #dialup-titlebar span { flex: 1; color: #fff; font-size: 11px; font-weight: bold; text-shadow: 0 1px 2px rgba(0,0,0,0.4); }

    #dialup-body {
      padding: 14px 16px;
      display: flex; flex-direction: column; align-items: center; gap: 10px;
    }
    #dialup-body img { width: 100%; max-width: 300px; border: 1px solid #aca899; }
    #dialup-status { font-size: 12px; color: #000; font-weight: bold; align-self: flex-start; }
    #dialup-bars {
      width: 100%; height: 18px;
      background: #c8c4bc; border: 1px inset #888;
      position: relative; overflow: hidden;
    }
    #dialup-bar-fill {
      height: 100%;
      background: repeating-linear-gradient(
        90deg,
        #00aa00 0px, #00aa00 14px,
        #006600 14px, #006600 16px
      );
      width: 0%;
      transition: width 0.4s linear;
    }
    #dialup-cancel {
      align-self: flex-end;
      padding: 3px 18px;
      background: linear-gradient(180deg,#e8e4dc,#d0ccc4);
      border: 1px solid; border-color: #f0ece4 #808078 #808078 #f0ece4;
      font-family: 'Tahoma', Arial, sans-serif; font-size: 11px;
      cursor: pointer; border-radius: 2px;
    }
    #dialup-cancel:hover { background: linear-gradient(180deg,#f0ece4,#dcd8d0); }

    /* ══════════════════════════════════════
       GOOGLE 2005 INSIDE BROWSER
    ══════════════════════════════════════ */
    #google98-wrap {
      display: none;
      position: absolute;
      /* titlebar(22) + menubar(18) + toolbar(30) + addrbar(24) = 94px from top */
      top: 94px;
      bottom: 20px; /* statusbar */
      left: 0; right: 0;
      background: #fff;
      font-family: Arial, sans-serif;
      overflow: hidden;
      box-sizing: border-box;
      z-index: 2;
    }
    @media (max-width: 767px) {
      /* mobile: menubar+toolbar hidden → only titlebar(22) + addrbar(20) = 42px */
      #google98-wrap { top: 42px; bottom: 16px; }
    }
    #google98-wrap.visible { display: flex; flex-direction: column; }

    /* Google 2005 homepage */
    #g05-home {
      flex: 1 1 0; min-height: 0;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      padding: 0 0 40px;
      background: #fff;
      width: 100%;
    }
    #g05-logo-img {
      font-family: Arial, sans-serif;
      font-size: 80px; font-weight: bold;
      line-height: 1; margin-bottom: 16px;
      letter-spacing: -2px;
    }
    #g05-logo-img .gl-b { color: #3366cc; }
    #g05-logo-img .gl-r { color: #cc0000; }
    #g05-logo-img .gl-y { color: #ffcc00; }
    #g05-logo-img .gl-g { color: #009900; }
    #g05-logo-img sup { font-size: 18px; color: #999; vertical-align: super; }
    #g05-tabs {
      display: flex; gap: 0; border-bottom: 1px solid #999;
      margin-bottom: 10px; align-self: stretch; justify-content: center;
      font-size: 13px;
    }
    #g05-tabs span {
      padding: 4px 10px; cursor: default; color: #000; font-weight: bold;
      border: 1px solid #999; border-bottom: 2px solid #fff; margin-bottom: -1px;
      background: #fff;
    }
    #g05-tabs a {
      padding: 4px 10px; color: #0000cc; text-decoration: none; font-size: 13px;
    }
    #g05-tabs a:hover { text-decoration: underline; }
    #g05-tabs .tab-new { color: #cc0000; font-size: 10px; vertical-align: super; }
    #g05-search-row { display: flex; align-items: flex-start; gap: 10px; }
    #g05-search-input {
      width: 440px; height: 24px; padding: 2px 6px;
      border: 1px solid #7e9db9; font-size: 15px;
      box-shadow: inset 0 1px 3px rgba(0,0,0,0.15);
      outline: none;
    }
    #g05-search-input:focus { border-color: #4d90fe; }
    #g05-adv-links { font-size: 11px; color: #0000cc; display: flex; flex-direction: column; gap: 2px; }
    #g05-adv-links a { color: #0000cc; text-decoration: none; }
    #g05-adv-links a:hover { text-decoration: underline; }
    #g05-btns { margin-top: 8px; display: flex; gap: 6px; }
    .g05-btn {
      padding: 4px 16px; font-size: 13px;
      background: linear-gradient(#f5f5f5, #e8e8e8);
      border: 1px solid #dcdcdc; cursor: pointer;
      font-family: Arial, sans-serif; color: #000;
      border-radius: 2px;
    }
    .g05-btn:hover { border-color: #aaa; }
    #g05-tsunami { margin-top: 18px; font-size: 13px; }
    #g05-tsunami a { color: #0000cc; }
    #g05-footer-links {
      position: absolute; bottom: 20px; left: 0; right: 0;
      text-align: center; font-size: 11px; color: #666;
    }
    #g05-footer-links a { color: #0000cc; text-decoration: none; margin: 0 6px; }
    #g05-footer-links a:hover { text-decoration: underline; }

    /* Google 2005 results page */
    #g05-results {
      display: none; flex-direction: column;
      flex: 1 1 0; min-height: 0;
      overflow: hidden;
      width: 100%;
    }
    #g05-results.visible { display: flex; }
    #g05-res-header {
      background: #fff; padding: 6px 10px;
      border-bottom: 1px solid #e0e0e0;
      display: flex; align-items: center; gap: 12px; flex-shrink: 0;
    }
    #g05-res-logo {
      font-size: 28px; font-weight: bold; letter-spacing: -1px; cursor: pointer;
    }
    #g05-res-logo .gl-b { color: #3366cc; }
    #g05-res-logo .gl-r { color: #cc0000; }
    #g05-res-logo .gl-y { color: #ffcc00; }
    #g05-res-logo .gl-g { color: #009900; }
    #g05-res-input {
      width: 360px; height: 22px; padding: 2px 6px;
      border: 1px solid #7e9db9; font-size: 13px; outline: none;
    }
    .g05-res-btn {
      padding: 2px 10px; font-size: 12px;
      background: linear-gradient(#f5f5f5, #e8e8e8);
      border: 1px solid #dcdcdc; cursor: pointer;
      font-family: Arial, sans-serif;
    }
    #g05-res-tabs {
      font-size: 12px; padding: 4px 10px 0;
      border-bottom: 1px solid #84aecc;
      background: #e5ecf9; flex-shrink: 0;
    }
    #g05-res-tabs span { font-weight: bold; color: #000; border-bottom: 2px solid #cc4400; padding-bottom: 4px; }
    #g05-res-tabs a { color: #0000cc; text-decoration: none; margin: 0 8px; }
    #g05-res-tabs a:hover { text-decoration: underline; }
    #g05-res-body { display: flex; flex: 1 1 0; min-height: 0; overflow: hidden; }
    #g05-res-main { flex: 1; padding: 12px 16px; overflow-y: auto; }
    #g05-res-side { width: 180px; background: #f5f5f5; border-left: 1px solid #ddd; padding: 10px; font-size: 11px; overflow-y: auto; flex-shrink: 0; }
    #g05-stats { font-size: 11px; color: #666; margin-bottom: 12px; border-bottom: 1px solid #e0e0e0; padding-bottom: 6px; }
    .g05-result { margin-bottom: 20px; }
    .g05-result-title { font-size: 16px; font-weight: normal; }
    .g05-result-title a { color: #0000cc; text-decoration: none; }
    .g05-result-title a:hover { text-decoration: underline; }
    .g05-result-url { font-size: 12px; color: #006600; }
    .g05-result-desc { font-size: 13px; color: #000; margin-top: 2px; line-height: 1.4; }
    .g05-cached { font-size: 11px; color: #666; }
    .g05-cached a { color: #777; }

    /* The big byebyte message result */
    #g05-byebyte-result {
      background: #fffbe6; border: 1px solid #ffd966;
      padding: 14px 16px; border-radius: 4px; margin-bottom: 18px;
    }
    #g05-byebyte-result p {
      font-size: 14px; line-height: 1.6; color: #333; margin: 0;
    }
    #g05-byebyte-result strong { color: #cc4400; font-size: 15px; }

    /* ── Google 2005 MOBILE overrides ── */
    @media (max-width: 767px) {
      #google98-wrap { top: 36px; bottom: 14px; }

      #g05-home {
        padding: 10px 12px 30px;
        justify-content: flex-start;
        gap: 0;
      }
      #g05-logo-img {
        font-size: 52px; letter-spacing: -1px;
        margin-bottom: 4px; align-self: center;
        margin-top: 16px;
      }
      #g05-tabs {
        font-size: 11px; flex-wrap: wrap;
        justify-content: flex-start;
        border-bottom: 1px solid #ccc;
        margin-bottom: 8px;
        align-self: stretch;
      }
      #g05-tabs span { padding: 3px 8px; font-size: 11px; }
      #g05-tabs a { padding: 3px 8px; font-size: 11px; }
      #g05-search-row {
        flex-direction: column; align-items: stretch;
        gap: 6px; width: 100%;
      }
      #g05-search-input {
        width: 100%; height: 32px; font-size: 16px !important;
        box-sizing: border-box;
      }
      #g05-adv-links {
        flex-direction: row; flex-wrap: wrap; gap: 6px 14px;
        font-size: 12px;
      }
      #g05-btns { justify-content: flex-start; gap: 8px; }
      .g05-btn { padding: 5px 14px; font-size: 13px; }
      #g05-tsunami { font-size: 12px; margin-top: 10px; }
      #g05-footer-links {
        position: static; margin-top: 20px;
        font-size: 11px; text-align: center;
      }

      /* Results mobile */
      #g05-res-header { gap: 6px; padding: 4px 6px; flex-wrap: wrap; }
      #g05-res-logo { font-size: 22px; }
      #g05-res-input { width: 100%; flex: 1; font-size: 16px !important; min-width: 0; }
      #g05-res-tabs { font-size: 11px; padding: 3px 6px 0; }
      #g05-res-body { flex-direction: column; }
      #g05-res-side { display: none; }
      #g05-res-main { padding: 8px 10px; }
      #g05-stats { font-size: 10px; }
      .g05-result { margin-bottom: 14px; }
      .g05-result-title { font-size: 14px; }
      .g05-result-url { font-size: 11px; }
      .g05-result-desc { font-size: 12px; }
      #g05-byebyte-result { padding: 10px 12px; }
      #g05-byebyte-result p { font-size: 13px; }
      #g05-byebyte-result strong { font-size: 14px; }
    }

    #vlc-overlay {
      position: fixed; inset: 0; z-index: 5020;
      background: rgba(0,0,0,0.45);
      display: none; align-items: center; justify-content: center;
    }
    #vlc-overlay.open { display: flex; }

    #vlc-modal {
      position: absolute;
      width: min(860px, 96vw);
      background: #ece9d8;
      border: 3px solid #1254a8;
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      box-shadow: 0 8px 32px rgba(0,0,0,0.85);
      font-family: 'Tahoma', Arial, sans-serif;
      animation: winPop 0.14s cubic-bezier(0.22,1,0.36,1) both;
      display: flex; flex-direction: column;
      user-select: none;
    }

    /* Title bar – standard XP blue */
    #vlc-titlebar {
      background: linear-gradient(180deg,#0997ff,#0053ee 8%,#0050ee 40%,#06f 88%,#06f 93%,#005bff 95%,#003dd7 96%,#003dd7);
      border-radius: 5px 5px 0 0;
      padding: 4px 4px 4px 8px;
      display: flex; align-items: center; gap: 8px;
      cursor: grab; flex-shrink: 0;
    }
    #vlc-titlebar:active { cursor: grabbing; }
    #vlc-titlebar img { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; }
    #vlc-titlebar span { flex: 1; color: #fff; font-size: 11px; font-weight: bold; text-shadow: 0 1px 2px rgba(0,0,0,0.4); }

    /* Menu bar – beige XP */
    #vlc-menubar {
      background: #ece9d8;
      border-bottom: 1px solid #aca899;
      padding: 1px 4px;
      display: flex; gap: 0; flex-shrink: 0;
    }
    .vlc-menu {
      padding: 2px 8px; font-size: 11px; color: #000;
      cursor: default; border-radius: 2px;
    }
    .vlc-menu:hover { background: #316ac5; color: #fff; }

    /* Video area – pure black */
    #vlc-video-wrap {
      background: #000;
      flex: 1;
      min-height: 380px;
      display: flex;
      flex-direction: column;
    }
    #vlc-video {
      width: 100%; height: 100%;
      flex: 1;
      display: block;
      object-fit: contain;
      max-height: 460px;
    }

    /* Controls wrap – beige XP */
    #vlc-controls-wrap {
      background: #ece9d8;
      border-top: 1px solid #aca899;
      padding: 4px 8px 6px;
      flex-shrink: 0;
    }

    /* Seek row (top) */
    #vlc-seek-wrap {
      display: flex; align-items: center; gap: 6px;
      margin-bottom: 5px;
    }
    #vlc-time, #vlc-duration {
      font-size: 10px; color: #555; white-space: nowrap; min-width: 34px;
    }
    #vlc-duration { text-align: right; }
    #vlc-seek {
      flex: 1; height: 8px;
      background: #c8c4bc;
      border: 1px solid #888;
      border-radius: 2px;
      position: relative; cursor: pointer;
    }
    #vlc-seek-fill {
      height: 100%;
      background: linear-gradient(90deg,#888,#aaa);
      border-radius: 1px;
      width: 0%; pointer-events: none;
    }
    #vlc-seek-thumb {
      position: absolute; top: 50%; left: 0%;
      width: 10px; height: 14px;
      background: linear-gradient(180deg,#e0dcd4,#b8b4ac);
      border: 1px solid #666;
      border-radius: 1px;
      transform: translate(-50%,-50%);
      pointer-events: none;
    }

    /* Controls row (bottom) */
    #vlc-controls {
      display: flex; align-items: center; gap: 2px;
    }
    .vlc-btn {
      width: 28px; height: 26px;
      background: linear-gradient(180deg,#e0dcd4 0%,#c8c4bc 100%);
      border: 1px solid; border-color: #f0ece4 #808078 #808078 #f0ece4;
      border-radius: 2px;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      color: #222; font-size: 12px;
      flex-shrink: 0;
    }
    .vlc-btn:hover { background: linear-gradient(180deg,#eee8e0,#d8d4cc); }
    .vlc-btn:active { border-color: #808078 #f0ece4 #f0ece4 #808078; }

    /* Volume */
    #vlc-vol-wrap {
      margin-left: auto; display: flex; align-items: center; gap: 5px;
    }
    #vlc-vol-icon { font-size: 13px; color: #444; flex-shrink: 0; }
    #vlc-vol-bar {
      width: 72px; height: 12px;
      background: #c8c4bc;
      border: 1px solid #888;
      border-radius: 1px;
      position: relative; cursor: pointer;
      overflow: hidden;
    }
    #vlc-vol-fill {
      height: 100%;
      background: linear-gradient(90deg,#3a9a3a,#6acc6a);
      width: 80%;
      pointer-events: none;
    }
    #vlc-vol-knob { display: none; }
    #vlc-vol-pct { font-size: 10px; color: #444; min-width: 28px; }

    @media (max-width: 767px) {
      #vlc-modal { width: 96vw !important; position: relative !important; left: auto !important; top: auto !important; }
      #vlc-video-wrap { min-height: 220px !important; }
      #vlc-video { max-height: 240px !important; }
    }

    /* ── PowerPoint Modal ── */
    #ppt-overlay {
      position: fixed; inset: 0; z-index: 5050;
      display: none; align-items: center; justify-content: center;
      background: rgba(0,0,0,0.25);
      pointer-events: none;
    }
    #ppt-overlay.open { display: flex; pointer-events: auto; }
    #ppt-modal {
      width: 1020px; max-width: 98vw;
      height: 720px; max-height: 96vh;
      background: #dce6f1;
      border: 3px solid #1254a8;
      border-top: 0px;
      border-radius: 8px;
      box-shadow: 3px 3px 12px rgba(0,0,0,0.6);
      display: flex; flex-direction: column;
      position: relative;
      animation: winPop 0.18s cubic-bezier(0.34,1.35,0.64,1) both;
    }
    #ppt-modal.win-closing { animation: winClose 0.14s ease-in both; }

    /* Title bar */
    #ppt-titlebar {
      height: 22px; flex-shrink: 0;
      background: linear-gradient(180deg,#0997ff,#0053ee 8%,#0050ee 40%,#06f 88%,#06f 93%,#005bff 95%,#003dd7 96%,#003dd7);
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 4px 0 6px;
      font-family: 'Tahoma', Arial, sans-serif; font-size: 11px; font-weight: bold;
      color: #fff; text-shadow: 1px 1px 1px rgba(0,0,80,0.5);
      user-select: none; cursor: grab; border-radius: 5px 5px 0 0;
    }
    #ppt-titlebar:active { cursor: grabbing; }
    #ppt-title-left { display: flex; align-items: center; gap: 5px; overflow: hidden; }
    #ppt-title-left img { width: 14px; height: 14px; object-fit: contain; flex-shrink: 0; }
    #ppt-winbtns { display: flex; gap: 2px; flex-shrink: 0; }

    /* Menu bar (Office 2010 ribbon tabs) */
    #ppt-menubar {
      height: 22px; flex-shrink: 0;
      background: linear-gradient(180deg, #f0f0f0 0%, #dcdcdc 100%);
      border-bottom: 1px solid #b0b0b0;
      display: flex; align-items: flex-end;
      padding: 0 4px; gap: 0;
      font-family: 'Tahoma', Arial, sans-serif; font-size: 11px; color: #000;
      user-select: none;
    }
    .ppt-tab {
      padding: 2px 10px 3px; cursor: default; border: 1px solid transparent;
      border-bottom: none; border-radius: 2px 2px 0 0; position: relative; bottom: -1px;
      font-size: 11px;
    }
    .ppt-tab:hover { background: #e8e8ff; }
    .ppt-tab.active {
      background: #fff; border-color: #a0a0a0 #a0a0a0 #fff #a0a0a0;
      font-weight: bold;
    }

    /* Ribbon */
    #ppt-ribbon {
      height: 84px; flex-shrink: 0;
      background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
      border-bottom: 2px solid #2e6ee8;
      display: flex; align-items: flex-start; padding: 4px 6px; gap: 2px;
      font-family: 'Tahoma', Arial, sans-serif; font-size: 10px; color: #333;
      overflow: hidden;
    }
    .ppt-rgroup {
      display: flex; flex-direction: column; align-items: stretch;
      border-right: 1px solid #d0d0d0; padding: 2px 8px 2px 2px; min-width: 56px;
    }
    .ppt-rgroup-label {
      text-align: center; font-size: 9px; color: #666; margin-top: auto;
      padding-top: 2px; border-top: 1px solid #e0e0e0;
    }
    .ppt-rbig {
      display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
      gap: 2px; padding: 2px 4px; cursor: default; border: 1px solid transparent;
      border-radius: 2px; font-size: 9px; width: 48px; text-align: center;
    }
    .ppt-rbig:hover { background: #ddeeff; border-color: #88aadd; }
    .ppt-rbig img { width: 28px; height: 28px; object-fit: contain; }
    .ppt-rbig-lbl { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
    .ppt-rsmall {
      display: flex; align-items: center; gap: 4px; padding: 2px 4px;
      cursor: default; border: 1px solid transparent; border-radius: 2px; font-size: 10px;
      white-space: nowrap;
    }
    .ppt-rsmall:hover { background: #ddeeff; border-color: #88aadd; }
    .ppt-anim-star {
      display: inline-flex; align-items: center; justify-content: center;
      width: 28px; height: 28px; font-size: 20px;
    }
    .ppt-anim-selected {
      background: linear-gradient(180deg,#fff9c4 0%,#ffe082 100%);
      border: 1px solid #c8a000 !important;
    }

    /* Main area: slide panel + slide */
    #ppt-main {
      display: flex; flex: 1 1 0; min-height: 0; overflow: hidden;
      height: 0; /* force flex child to respect parent height */
    }

    /* Left: slide strip */
    #ppt-slides-panel {
      width: 140px; flex-shrink: 0;
      background: #f4f4f4; border-right: 1px solid #aaa;
      display: flex; flex-direction: column;
      padding: 6px 4px; gap: 4px; overflow-y: auto;
    }
    .ppt-thumb {
      background: #fff; border: 2px solid #3a7abf;
      width: 100%; aspect-ratio: 4/3;
      position: relative; overflow: hidden;
      cursor: default; font-size: 9px;
      display: flex; align-items: center; justify-content: center;
    }
    .ppt-thumb-ugly {
      background: #fff;
      border-color: #aac;
    }
    .ppt-thumb-ugly span {
      font-family: 'Comic Sans MS', cursive;
      font-size: 6px;
      color: #c00;
      text-align: center;
      line-height: 1.2;
      padding: 2px;
    }
    .ppt-thumb-figa {
      background: #0a0a0a !important;
      border-color: #444 !important;
    }
    .ppt-thumb-figa span {
      font-family: 'Tahoma', sans-serif !important;
      font-size: 7px !important;
      color: #ccc !important;
      text-align: center;
      line-height: 1.3;
    }
    .ppt-thumb-num {
      position: absolute; left: -18px; top: 50%;
      transform: translateY(-50%);
      font-family: 'Tahoma'; font-size: 9px; color: #666;
    }

    /* Right: editing area */
    #ppt-edit-area {
      flex: 1; background: #848484;
      display: flex; align-items: center; justify-content: center;
      overflow: hidden; position: relative; min-height: 340px;
    }
    #ppt-slide {
      background: linear-gradient(160deg, #cfe0f0 0%, #b8d0e8 50%, #a8c4e0 100%);
      width: 560px; max-width: calc(100% - 20px);
      aspect-ratio: 4/3;
      box-shadow: 0 4px 18px rgba(0,0,0,0.5);
      position: relative; overflow: hidden;
      flex-shrink: 0;
    }

    /* Slide content – layout like real PPT 2010 */
    #ppt-slide-inner {
      position: absolute; inset: 0;
      display: flex; flex-direction: column;
      align-items: center;
      padding: 0;
    }

    /* Big title area (upper ~55%) */
    #ppt-slide-title-wrap {
      width: 100%; flex: 0 0 58%;
      display: flex; flex-direction: column;
      align-items: center; justify-content: flex-end;
      padding-bottom: 4px;
      overflow: hidden;
    }
    #ppt-slide-title {
      font-family: 'Comic Sans MS', 'Comic Relief', cursive !important;
      font-size: clamp(28px, 5vw, 52px);
      font-weight: bold;
      color: #1a1a6e;
      text-align: center;
      line-height: 1.05;
      padding: 0 20px;
      word-break: break-word;
      /* reflection via CSS */
      position: relative;
    }
    /* Reflection effect below title */
    #ppt-slide-title::after {
      content: attr(data-text);
      display: block;
      transform: scaleY(-0.35);
      transform-origin: top center;
      opacity: 0.28;
      color: #1a1a6e;
      filter: blur(0.8px);
      margin-top: -2px;
      line-height: 1;
    }
    /* Horizontal line between title and subtitle (like in screenshot) */
    #ppt-slide-divline {
      width: 85%; height: 1px; background: rgba(100,130,180,0.4);
      flex-shrink: 0; margin: 2px 0;
    }

    /* Subtitle text box – selected */
    #ppt-selected-box {
      position: absolute;
      left: 8%; right: 8%;
      top: 58%; height: 28%;
      border: 1px dashed #444; pointer-events: none;
      box-sizing: border-box;
    }
    #ppt-slide-subtitle {
      font-family: 'Comic Sans MS', 'Comic Relief', cursive !important;
      font-size: clamp(14px, 2.2vw, 26px);
      color: #1a1a6e;
      text-align: center;
      line-height: 1.3;
      padding: 8px 8px 0;
      font-weight: bold;
    }
    /* text cursor blink inside subtitle (like in screenshot) */
    #ppt-cursor-blink {
      display: inline-block; width: 1px; height: 1.1em;
      background: #000; vertical-align: middle; margin-left: 1px;
      animation: bl 0.85s step-end infinite;
    }
    .ppt-handle {
      position: absolute; width: 8px; height: 8px;
      background: #fff; border: 1px solid #555;
      border-radius: 50%; box-sizing: border-box;
    }
    .ph-tl { top: -4px; left: -4px; }
    .ph-tm { top: -4px; left: calc(50% - 4px); }
    .ph-tr { top: -4px; right: -4px; }
    .ph-ml { top: calc(50% - 4px); left: -4px; }
    .ph-mr { top: calc(50% - 4px); right: -4px; }
    .ph-bl { bottom: -4px; left: -4px; }
    .ph-bm { bottom: -4px; left: calc(50% - 4px); }
    .ph-br { bottom: -4px; right: -4px; }
    .ph-rot { top: -22px; left: calc(50% - 4px); background: #0f0; width:8px;height:8px; }
    .ph-rot-line {
      position: absolute; top: -18px; left: calc(50% - 0.5px);
      width: 1px; height: 13px; background: #555;
    }
    /* slide number top-left */
    #ppt-slide-num {
      position: absolute; top: 6px; left: 8px;
      font-family: 'Tahoma'; font-size: 11px; color: #666;
    }

    /* Status bar */
    #ppt-statusbar {
      height: 20px; flex-shrink: 0;
      background: linear-gradient(180deg,#e8e8e8,#d8d8d8);
      border-top: 1px solid #aaa;
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 8px;
      font-family: 'Tahoma', Arial, sans-serif; font-size: 10px; color: #444;
    }
    .ppt-zoom-bar {
      display: flex; align-items: center; gap: 4px;
    }
    .ppt-zoom-slider {
      width: 60px; height: 4px; background: #aaa; border-radius: 2px; position: relative;
    }
    .ppt-zoom-fill { width: 60%; height: 100%; background: #555; border-radius: 2px; }

    /* Mobile PPT */
    @media (max-width: 767px) {
      #ppt-modal { width: 97vw; height: 80vh; }
      #ppt-slides-panel { display: none; }
      #ppt-ribbon { height: 60px; overflow-x: auto; flex-wrap: nowrap; }
      #ppt-ribbon .ppt-rgroup { min-width: auto; }
    }

    /* ── PPT Scripted Mini Cursor ── */
    #ppt-anim-cur {
      position: fixed; z-index: 9999;
      width: 18px; height: 22px;
      pointer-events: none; opacity: 0;
      transition: left 0.42s cubic-bezier(0.19,1,0.22,1),
                  top  0.42s cubic-bezier(0.19,1,0.22,1),
                  opacity 0.2s ease, transform 0.08s ease;
      filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.55));
    }
    #ppt-anim-cur.clicking { transform: scale(0.75); }

    /* PPT File Dropdown (fixed to escape modal overflow) */
    #ppt-file-menu {
      position: fixed; z-index: 8500;
      width: 186px; background: #fff;
      border: 1px solid #9a9a9a;
      box-shadow: 3px 3px 8px rgba(0,0,0,0.28);
      padding: 2px 0; display: none;
      font-family: 'Tahoma', Arial; font-size: 11px;
    }
    #ppt-file-menu.open { display: block; }
    .ppt-fm-item {
      padding: 5px 8px 5px 30px; cursor: default;
      color: #000; position: relative;
    }
    .ppt-fm-item.hover { background: #316ac5; color: #fff; }
    .ppt-fm-icon {
      position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
      font-size: 13px;
    }
    .ppt-fm-sep { height: 1px; background: #d4d0c8; margin: 2px 4px; }

    /* PPT XP Open File Dialog */
    #ppt-open-overlay {
      position: fixed; inset: 0; z-index: 7000;
      display: none; align-items: center; justify-content: center;
    }
    #ppt-open-overlay.open { display: flex; }
    #ppt-open-dialog {
      width: 530px; max-width: 95vw;
      background: #ece9d8;
      border: 2px solid #0038a8;
      border-radius: 3px 3px 2px 2px;
      box-shadow: 3px 3px 14px rgba(0,0,0,0.55);
      display: flex; flex-direction: column;
      font-family: 'Tahoma', Arial; font-size: 11px;
      animation: winPop 0.15s cubic-bezier(0.34,1.35,0.64,1) both;
    }
    #ppt-open-titlebar {
      height: 24px; flex-shrink: 0;
      background: linear-gradient(180deg,#5b97f8 0%,#4282f0 18%,#1050cc 100%);
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 4px 0 8px;
      font-weight: bold; color: #fff;
    }
    #ppt-open-addrbar {
      height: 28px; flex-shrink: 0;
      background: #ece9d8; border-bottom: 1px solid #9a9690;
      display: flex; align-items: center; padding: 0 6px; gap: 6px;
    }
    .ppt-open-addrbox {
      flex: 1; height: 20px; background: #fff;
      border: 1px solid; border-color: #7b7b7b #d4d0c8 #d4d0c8 #7b7b7b;
      padding: 0 6px; display: flex; align-items: center; gap: 4px;
    }
    #ppt-open-body { display: flex; height: 195px; flex: 0 0 195px; }
    #ppt-open-sidebar {
      width: 88px; flex-shrink: 0;
      background: #d8d4c8; border-right: 1px solid #9a9690;
      display: flex; flex-direction: column;
      padding: 6px 0; gap: 1px; overflow: hidden;
    }
    .ppt-sb-btn {
      display: flex; flex-direction: column; align-items: center;
      gap: 2px; padding: 5px 4px; cursor: default;
      font-size: 9px; text-align: center; color: #000;
    }
    .ppt-sb-btn:hover { background: rgba(49,106,197,0.18); }
    .ppt-sb-btn .ppt-sb-ic { font-size: 20px; line-height: 1; }
    #ppt-open-files {
      flex: 1; background: #fff; overflow-y: auto; padding: 4px;
    }
    .ppt-open-file {
      display: flex; align-items: center; gap: 6px;
      padding: 3px 4px; cursor: default; border-radius: 1px;
      user-select: none;
    }
    .ppt-open-file.selected {
      background: #316ac5; color: #fff;
    }
    .ppt-open-file .ppt-fi-ico { font-size: 16px; flex-shrink: 0; width: 18px; height: 18px; object-fit: contain; vertical-align: middle; }
    #ppt-open-footer {
      border-top: 1px solid #9a9690; padding: 6px 8px 8px;
      display: grid; grid-template-columns: auto 1fr auto auto;
      align-items: center; gap: 5px 6px; background: #ece9d8;
      flex-shrink: 0;
    }
    .ppt-open-lbl { white-space: nowrap; }
    .ppt-open-finput {
      height: 20px; border: 1px solid; border-color: #7b7b7b #d4d0c8 #d4d0c8 #7b7b7b;
      padding: 0 4px; font-size: 11px; background: #fff; font-family: 'Tahoma', Arial;
    }
    .ppt-open-btn {
      height: 23px; min-width: 72px; padding: 0 8px;
      background: linear-gradient(180deg,#fff,#ece9d8);
      border: 1px solid; border-color: #fff #808080 #808080 #fff;
      font-family: 'Tahoma'; font-size: 11px; cursor: default;
    }
    .ppt-open-btn:hover { background: linear-gradient(180deg,#ddeeff,#aaccff); }
    @media (max-width: 767px) {
      #ppt-open-dialog { width: 96vw; }
      #ppt-open-sidebar { display: none; }
    }

    /* PPT Fullscreen Slideshow */
    #ppt-slideshow {
      position: fixed; inset: 0; z-index: 9500;
      background: #000; display: none; overflow: hidden;
    }
    #ppt-slideshow.open { display: block; }
    #ppt-slides-wrap { position: absolute; inset: 0; }
    .ppt-slide-fs {
      position: absolute; inset: 0;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      opacity: 0; transition: opacity 0.75s ease;
      pointer-events: none; user-select: none;
    }
    .ppt-slide-fs.active { opacity: 1; pointer-events: auto; }
    #ppt-ss-progress {
      position: absolute; bottom: 0; left: 0; height: 2px;
      background: rgba(255,255,255,0.45); width: 0%;
    }
    #ppt-ss-counter {
      position: absolute; bottom: 14px; right: 18px;
      font-family: 'Tahoma'; font-size: 11px;
      color: rgba(255,255,255,0.38); user-select: none; pointer-events: none;
    }
    #ppt-ss-esc {
      position: absolute; top: 12px; right: 16px;
      font-family: 'Tahoma'; font-size: 11px;
      color: rgba(255,255,255,0.32); pointer-events: none;
    }
    #ppt-ss-close-mobile {
      display: none;
    }
    @media (max-width: 767px) {
      #ppt-ss-esc { display: none; }
      #ppt-ss-close-mobile {
        display: block;
        position: absolute; top: 12px; right: 14px;
        font-family: 'Tahoma', Arial, sans-serif; font-size: 13px;
        color: rgba(255,255,255,0.75);
        background: rgba(0,0,0,0.4);
        border: 1px solid rgba(255,255,255,0.25);
        border-radius: 4px;
        padding: 4px 10px;
        cursor: pointer;
        z-index: 20;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
      }
    }
    #ppt-ss-tap-prev, #ppt-ss-tap-next {
      position: absolute; top: 0; bottom: 0; width: 50%; z-index: 5;
    }
    #ppt-ss-tap-prev { left: 0; }
    #ppt-ss-tap-next { right: 0; }

    /* ── Slideshow Slide 1 Animation ── */
    #ppt-s1-single { display: none; }
    @keyframes ppt-s1-appear {
      0%   { transform: scale(0) rotate(-25deg); opacity: 0; }
      70%  { transform: scale(1.2) rotate(5deg);  opacity: 1; }
      100% { transform: scale(1)   rotate(0deg);  opacity: 1; }
    }
    #ppt-s1-single.show {
      animation: ppt-s1-appear 0.45s cubic-bezier(0.34,1.5,0.64,1) both;
    }
    #ppt-s1-grid {
      position: absolute; inset: 0; z-index: 4;
      display: flex; flex-wrap: wrap;
      align-content: flex-start;
      overflow: hidden; pointer-events: none;
    }
    .ppt-s1-cell {
      display: flex; align-items: center; justify-content: center;
      opacity: 0; line-height: 1; flex-shrink: 0;
    }
    @keyframes ppt-s1-cell-pop {
      0%   { transform: scale(0) rotate(-15deg); opacity: 0; }
      65%  { transform: scale(1.15) rotate(5deg); opacity: 0.85; }
      100% { transform: scale(1) rotate(0deg);    opacity: 0.85; }
    }
    .ppt-s1-cell.pop {
      animation: ppt-s1-cell-pop 0.18s cubic-bezier(0.34,1.5,0.64,1) both;
    }
    #ppt-s1-text {
      position: absolute; z-index: 6;
      font-family: 'VisbyCF', -apple-system, Arial, sans-serif;
      font-weight: 700;
      font-size: clamp(28px, 4.5vw, 58px);
      color: #fff; text-align: center; line-height: 1.15;
      opacity: 0; letter-spacing: -0.02em;
      pointer-events: none;
      padding: 0 40px;
    }
    @keyframes ppt-s1-text-in {
      0%   { transform: scale(0.45); opacity: 0; }
      60%  { transform: scale(1.06); opacity: 1; }
      100% { transform: scale(1);    opacity: 1; }
    }
    #ppt-s1-text.show {
      animation: ppt-s1-text-in 0.5s cubic-bezier(0.34,1.35,0.64,1) both;
    }

    /* ── Slideshow Slide 2 ── */
    .ppt-s2-phrase {
      display: block;
      font-family: 'VisbyCF', -apple-system, Arial, sans-serif;
      font-weight: 700;
      color: #fff;
      text-align: center;
      max-width: 88vw;
      line-height: 1.1;
      opacity: 0;
      pointer-events: none;
      white-space: nowrap;
    }
    @media (max-width: 767px) {
      .ppt-s2-phrase {
        white-space: normal !important;
        font-size: clamp(18px, 4.5vw, 28px) !important;
        line-height: 1.25 !important;
      }
    }
    @keyframes ppt-s2-float {
      0%, 100% { transform: translateY(0);    }
      50%       { transform: translateY(-12px); }
    }
    @keyframes ppt-s2-stamp {
      0%   { transform: scale(2.8); opacity: 0; }
      32%  { transform: scale(0.88); opacity: 1; }
      52%  { transform: scale(1.08); opacity: 1; }
      70%  { transform: scale(0.97); opacity: 1; }
      100% { transform: scale(1);    opacity: 1; }
    }
    .ppt-s2-phrase.show {
      animation: ppt-s2-stamp 0.5s cubic-bezier(0.36,0.07,0.19,0.97) both;
    }

    /* ── Slideshow Slide 3 ── */
    @keyframes ppt-s3-hit {
      0%   { transform: scale(1.55) translateY(-4px); }
      30%  { transform: scale(0.88) translateY(3px); }
      60%  { transform: scale(1.1) translateY(-2px); }
      80%  { transform: scale(0.97); }
      100% { transform: scale(1) translateY(0); }
    }
    @keyframes ppt-s3-dino-drop {
      0%   { transform: translateY(-92vh); }
      66%  { transform: translateY(8px); }
      78%  { transform: translateY(-22px); }
      89%  { transform: translateY(4px); }
      100% { transform: translateY(0); }
    }
    @keyframes ppt-s3-text-squish {
      0%   { transform: scaleY(1) scaleX(1); }
      22%  { transform: scaleY(0.3) scaleX(1.14); }
      48%  { transform: scaleY(1.13) scaleX(0.95); }
      68%  { transform: scaleY(0.92) scaleX(1.02); }
      100% { transform: scaleY(1) scaleX(1); }
    }
    @keyframes ppt-s3-smash-exit {
      0%   { transform: scaleY(1) scaleX(1); opacity: 1; }
      60%  { transform: scaleY(0.05) scaleX(1.35); opacity: 0.8; }
      100% { transform: scaleY(0) scaleX(1.35); opacity: 0; }
    }
    @keyframes ppt-s3-text-crushed {
      0%   { transform: translate(-50%,-50%) scaleY(1);    opacity: 1; }
      35%  { transform: translate(-50%, 8vh) scaleY(0.55); opacity: 1; }
      70%  { transform: translate(-50%,26vh) scaleY(0.14); opacity: 0.5; }
      100% { transform: translate(-50%,38vh) scaleY(0.02); opacity: 0; }
    }
    @keyframes ppt-s3-impact {
      0%   { transform: scale(0.08); opacity: 0; }
      100% { transform: scale(1);    opacity: 1; }
    }
    @keyframes ppt-s3-shimmer {
      0%   { background-position: 220% center; }
      100% { background-position: -220% center; }
    }
    .ppt-s3-shimmer-text {
      background: linear-gradient(
        105deg,
        #ffffff 30%,
        #fff8c0 43%,
        #ffe033 50%,
        #ffffff 57%,
        #ffffff 70%
      );
      background-size: 250% auto;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: ppt-s3-impact 0.22s cubic-bezier(0.175,0.885,0.32,1.275) 0.08s both,
                 ppt-s3-shimmer 1.8s linear 0.35s infinite;
    }
    @keyframes ppt-s3-emoji-crash {
      0%   { transform: translateY(-55vh) scale(0.4) rotate(-15deg); opacity: 0; }
      65%  { transform: translateY(12px)  scale(1.12) rotate(3deg);  opacity: 1; }
      82%  { transform: translateY(-6px)  scale(0.97) rotate(-1deg); opacity: 1; }
      100% { transform: translateY(0)     scale(1)    rotate(0deg);  opacity: 1; }
    }

    /* ── Slideshow Slide 4 ── */
    @keyframes ppt-s4-gravity {
      0%   { transform: translateY(0) rotate(0deg);    opacity: 1; }
      14%  { transform: translateY(18px) rotate(-2deg); opacity: 1; }
      100% { transform: translateY(115vh) rotate(-12deg); opacity: 0; }
    }
    @keyframes ppt-s4-vapor {
      0%   { transform: scale(1);   opacity: 1; filter: blur(0px); }
      35%  { transform: scale(1.6); opacity: 0.65; filter: blur(14px); }
      100% { transform: scale(3.2); opacity: 0;   filter: blur(40px); }
    }
    @keyframes ppt-s4-cement {
      0%   { transform: translateY(-52px); opacity: 0; }
      68%  { transform: translateY(6px);  opacity: 1; }
      83%  { transform: translateY(-3px); opacity: 1; }
      100% { transform: translateY(0);    opacity: 1; }
    }
    @keyframes ppt-s4-shake {
      0%,100% { transform: translateX(0); }
      20%      { transform: translateX(-5px); }
      40%      { transform: translateX(5px); }
      60%      { transform: translateX(-3px); }
      80%      { transform: translateX(3px); }
    }

    /* ── Slideshow Slide 5 ── */
    @keyframes ppt-s5-blur-reveal {
      0%   { filter: blur(22px); opacity: 0;   }
      22%  { filter: blur(0px);  opacity: 1;   }
      72%  { filter: blur(0px);  opacity: 1;   }
      100% { filter: blur(5px);  opacity: 0;   }
    }
    @keyframes ppt-s5-boulder {
      0%   { transform: scale(3.2) translateY(-20px); opacity: 0; filter: blur(6px); }
      45%  { transform: scale(0.9) translateY(6px);   opacity: 1; filter: blur(0); }
      65%  { transform: scale(1.08) translateY(-2px); }
      82%  { transform: scale(0.97); }
      100% { transform: scale(1) translateY(0); opacity: 1; }
    }
    @keyframes ppt-s5-drop {
      0%   { transform: translateY(-90vh) scale(0.6); opacity: 0; }
      62%  { transform: translateY(8px) scale(1.04);  opacity: 1; }
      78%  { transform: translateY(-4px) scale(0.98); }
      100% { transform: translateY(0) scale(1);       opacity: 1; }
    }
    @keyframes ppt-s5-vibrate {
      0%,100% { transform: translateX(0) rotate(0); }
      12%     { transform: translateX(-7px) rotate(-1.2deg); }
      24%     { transform: translateX(7px) rotate(1.2deg); }
      36%     { transform: translateX(-5px) rotate(-0.8deg); }
      48%     { transform: translateX(5px) rotate(0.8deg); }
      60%     { transform: translateX(-3px); }
      72%     { transform: translateX(3px); }
      85%     { transform: translateX(-1px); }
    }
    @keyframes ppt-s5-fly-away {
      0%   { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
      30%  { transform: translateY(-20px) rotate(-8deg) scale(1.15); opacity: 1; }
      100% { transform: translateY(-160px) rotate(20deg) scale(0.5); opacity: 0; }
    }
    @keyframes ppt-s5-bounce-land {
      0%   { transform: translateY(-95vh); opacity: 0; }
      50%  { transform: translateY(0);     opacity: 1; }
      62%  { transform: translateY(-40px); }
      74%  { transform: translateY(0);     }
      83%  { transform: translateY(-18px); }
      91%  { transform: translateY(0);     }
      96%  { transform: translateY(-6px);  }
      100% { transform: translateY(0);     opacity: 1; }
    }

    /* ── Slideshow Slide 6 ── */
    @keyframes ppt-s6-puff {
      0%   { transform: translateY(0)      translateX(var(--sdx,0px)) scale(var(--ss,0.3)); opacity: 0;    filter: blur(var(--sb1,4px)); }
      12%  { opacity: var(--so,0.55); }
      55%  { opacity: calc(var(--so,0.55) * 0.5); filter: blur(var(--sb2,10px)); }
      100% { transform: translateY(-150px) translateX(var(--sdx,0px)) scale(var(--se,2.8)); opacity: 0;    filter: blur(var(--sb3,20px)); }
    }
    @keyframes ppt-s6-flame-flicker {
      0%,100% { transform: scaleY(1)    scaleX(1)    rotate(0deg);    }
      15%     { transform: scaleY(1.12) scaleX(0.91) rotate(-2.5deg); }
      35%     { transform: scaleY(0.90) scaleX(1.08) rotate(2deg);    }
      55%     { transform: scaleY(1.09) scaleX(0.94) rotate(-1.5deg); }
      75%     { transform: scaleY(0.93) scaleX(1.05) rotate(1.5deg);  }
      90%     { transform: scaleY(1.04) scaleX(0.97) rotate(-1deg);   }
    }
    @keyframes ppt-s6-pop-in {
      0%   { transform: scale(0.2); opacity: 0; }
      70%  { transform: scale(1.12); opacity: 1; }
      100% { transform: scale(1);   opacity: 1; }
    }

    /* ── Slideshow Slide 7 ── */
    @keyframes ppt-s7-poke {
      0%,100% { transform: scale(1)    translateY(0);    }
      25%     { transform: scale(1.28) translateY(-12px);}
      55%     { transform: scale(0.86) translateY(8px);  }
      80%     { transform: scale(1.14) translateY(-5px); }
    }
    @keyframes ppt-s7-countdown-pulse {
      0%,100% { transform: scale(1);    }
      50%     { transform: scale(1.12); }
    }

    /* ── eMule Modal ── */
    #emule-overlay {
      position: fixed; inset: 0; z-index: 5030;
      background: rgba(0,0,0,0.35);
      display: none; align-items: center; justify-content: center;
    }
    #emule-overlay.open { display: flex; }
    #emule-modal {
      position: absolute;
      width: min(1020px, 97vw);
      background: #ece9d8;
      border: 3px solid #0054e3;
      border-radius: 8px 8px 4px 4px;
      box-shadow: 3px 3px 10px rgba(0,0,0,0.55);
      display: flex; flex-direction: column;
      animation: winPop 0.18s ease;
      overflow: hidden;
      user-select: none;
    }
    #emule-titlebar {
      background: linear-gradient(180deg,#2275d7 0%,#1553a8 4%,#1462d8 6%,#1255c4 96%,#0a39a6 100%);
      padding: 4px 6px; display: flex; align-items: center; gap: 6px;
      border-radius: 6px 6px 0 0; cursor: move; flex-shrink: 0;
    }
    #emule-titlebar span { color:#fff; font-size:12px; font-family:Tahoma,sans-serif; font-weight:bold; flex:1; }
    #emule-toolbar {
      background: #ece9d8; border-bottom: 2px solid #aca899;
      display: flex; gap: 1px; padding: 3px 4px; flex-shrink: 0; overflow-x: auto;
    }
    .emule-tb-btn {
      display: flex; flex-direction: column; align-items: center; gap: 2px;
      padding: 3px 8px; font-size: 10px; font-family: Tahoma,sans-serif;
      cursor: pointer; border: 1px solid transparent; background: transparent;
      color: #000; min-width: 50px; border-radius: 2px;
    }
    .emule-tb-btn:hover { background: #d4d0c8; border-color: #aca899; }
    .emule-tb-btn.emule-active { background: #c0d0e8; border-color: #7699c8; }
    .emule-tb-btn img { width: 24px; height: 24px; object-fit: contain; }
    #emule-section-hdr {
      background: #d4d0c8; border-bottom: 1px solid #aca899;
      padding: 3px 8px; font-size: 11px; font-family: Tahoma,sans-serif;
      display: flex; align-items: center; gap: 8px; flex-shrink: 0;
      font-weight: bold; color: #333;
    }
    #emule-table-wrap {
      overflow-y: auto; flex: 1 1 auto; min-height: 0; background: #fff;
    }
    table#emule-table {
      width: 100%; border-collapse: collapse;
      font-family: Tahoma,Arial,sans-serif; font-size: 11px;
    }
    #emule-table thead th {
      background: linear-gradient(180deg,#c8d8f0 0%,#b0c4e0 100%);
      border-right: 1px solid #8899bb; border-bottom: 2px solid #6680aa;
      padding: 3px 6px; text-align: left; font-weight: bold;
      white-space: nowrap; position: sticky; top: 0; z-index: 1;
      font-size: 11px; font-family: Tahoma,sans-serif;
    }
    #emule-table tbody tr { background: #fff; cursor: pointer; }
    #emule-table tbody tr:nth-child(even) { background: #f0f4ff; }
    #emule-table tbody tr:hover { background: #dde8f8; }
    #emule-table tbody tr.emule-selected { background: #316ac5 !important; color: #fff !important; }
    #emule-table tbody tr.emule-selected td { color: #fff !important; }
    #emule-table td {
      padding: 2px 6px; border-bottom: 1px solid #e0e4f0;
      border-right: 1px solid #e8ecf8; white-space: nowrap;
      overflow: hidden; max-width: 0; text-overflow: ellipsis;
    }
    .emule-prog-wrap {
      width: 110px; height: 13px; background: #1a1a1a;
      border: 1px solid #444; overflow: hidden;
      display: flex; flex-shrink: 0;
    }
    .emule-prog-done {
      background: repeating-linear-gradient(90deg,#00aaff 0px,#0055cc 5px,#1188ee 5px,#0066dd 10px);
      height: 100%; transition: width 2.5s linear;
    }
    .emule-prog-avail {
      background: repeating-linear-gradient(90deg,#cc2200 0px,#881100 5px,#bb3300 5px,#991100 10px);
      height: 100%; flex: 1;
    }
    .emule-prog-done-full {
      background: repeating-linear-gradient(90deg,#00cc55 0px,#008833 5px,#00bb44 5px,#009933 10px);
      height: 100%; width: 100%;
    }
    .emule-state-dl { color: #0055aa; font-weight: bold; }
    .emule-state-done { color: #008833; font-weight: bold; }
    .emule-state-wait { color: #888; }
    #emule-statusbar {
      background: #d4d0c8; border-top: 1px solid #aca899;
      padding: 2px 10px; font-size: 10px; font-family: Tahoma,sans-serif;
      display: flex; gap: 20px; align-items: center; flex-shrink: 0; color: #333;
    }
    #emule-now-playing {
      background: #001800; color: #aaffaa; font-family: 'Courier New',monospace;
      font-size: 10px; padding: 2px 8px; border-top: 1px solid #004400;
      display: none; align-items: center; gap: 6px; flex-shrink: 0;
    }
    #emule-now-playing.show { display: flex; }
    #emule-stop-btn {
      background: #440000; color: #ff6666; border: 1px solid #aa2222;
      padding: 1px 6px; font-size: 10px; cursor: pointer;
      font-family: 'Courier New',monospace;
    }
    @media (max-width: 767px) {
      #emule-modal { width: 97vw !important; left: auto !important; top: auto !important; position: relative !important; }
      #emule-toolbar { display: none; }
      #emule-table thead th { font-size: 10px; padding: 2px 4px; }
      #emule-table td { font-size: 10px; padding: 2px 4px; }
      #emule-table td:first-child { width: 20px; min-width: 20px; overflow: visible; padding: 2px 2px; }
      #emule-table td:first-child img { width: 16px; height: 16px; display: block; }
      .emule-prog-wrap { width: 70px; }
      #emule-table-wrap { max-height: 50vh; }
    }

    /* ── Turn Off Computer Dialog ── */
    #turnoff-overlay {
      display: none;
      position: fixed; inset: 0; z-index: 8000;
      align-items: center; justify-content: center;
    }
    #turnoff-overlay.open {
      display: flex;
    }
    /* grayscale sul resto della pagina */
    body.turnoff-gs > *:not(#turnoff-overlay) {
      filter: grayscale(1);
      pointer-events: none;
    }
    #turnoff-dialog {
      width: 380px; max-width: 94vw;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 4px 6px 24px rgba(0,0,0,0.6);
      font-family: 'Tahoma', Arial, sans-serif;
      animation: winPop 0.18s cubic-bezier(0.22,1,0.36,1) both;
    }
    #turnoff-header {
      background: linear-gradient(180deg,#0997ff,#0053ee 8%,#0050ee 40%,#06f 88%,#06f 93%,#005bff 95%,#003dd7 96%,#003dd7);
      padding: 10px 14px 10px 14px;
      display: flex; align-items: center; justify-content: space-between;
    }
    #turnoff-title {
      color: #fff; font-size: 14px; font-weight: bold;
      text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    }
    #turnoff-body {
      background: linear-gradient(180deg,#5aa0e8 0%,#3d8cd8 40%,#3282d0 100%);
      display: flex; align-items: center; justify-content: center;
      gap: 28px; padding: 28px 20px 24px;
    }
    .turnoff-btn {
      display: flex; flex-direction: column; align-items: center; gap: 8px;
      cursor: pointer;
    }
    .turnoff-btn img {
      width: 56px; height: 56px; object-fit: contain;
      border-radius: 6px;
      filter: brightness(0.82);
      transition: filter 0.15s ease;
    }
    .turnoff-btn:hover img { filter: brightness(1); }
    .turnoff-btn span {
      color: #fff; font-size: 12px; font-weight: bold;
      text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    }
    #turnoff-footer {
      background: linear-gradient(180deg,#3080cc 0%,#1f64b8 100%);
      padding: 8px 14px;
      display: flex; justify-content: flex-end;
      border-top: 1px solid rgba(255,255,255,0.15);
    }
    #turnoff-cancel {
      padding: 4px 22px;
      background: linear-gradient(180deg,#e8e4dc,#d0ccc4);
      border: 1px solid; border-color: #f0ece4 #808078 #808078 #f0ece4;
      font-family: 'Tahoma', Arial, sans-serif; font-size: 11px;
      cursor: pointer; border-radius: 2px;
    }
    #turnoff-cancel:hover { background: linear-gradient(180deg,#f0ece4,#dcd8d0); }

    /* ── MSN Sign-in Notification ── */
    #msn-notif {
      position: fixed;
      bottom: 42px;
      right: 0;
      z-index: 9999;
      pointer-events: none;
      opacity: 0;
      transform: translateY(16px);
      transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22,1,0.36,1);
      font-family: 'Tahoma', Arial, sans-serif;
      width: 260px;
    }
    #msn-notif.show {
      opacity: 1;
      transform: translateY(0);
      pointer-events: all;
    }
    #msn-notif-inner {
      display: flex;
      flex-direction: column;
      border: 1px solid #7aaee8;
      border-radius: 6px 6px 4px 4px;
      box-shadow: 2px 4px 18px rgba(0,30,100,0.38);
      overflow: hidden;
      cursor: pointer;
    }
    /* Header bar — blue gradient like WLM */
    #msn-notif-header {
      background: linear-gradient(180deg, #5ba3e8 0%, #2672c8 50%, #1a5ab8 100%);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 4px 6px 4px 8px;
      gap: 6px;
    }
    #msn-notif-header-left {
      display: flex;
      align-items: center;
      gap: 5px;
      flex: 1;
      min-width: 0;
    }
    #msn-notif-logo {
      width: 16px;
      height: 16px;
      object-fit: contain;
      flex-shrink: 0;
    }
    #msn-notif-title {
      font-size: 11px;
      font-weight: bold;
      color: #fff;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    #msn-notif-close {
      background: none;
      border: none;
      color: rgba(255,255,255,0.85);
      font-size: 12px;
      line-height: 1;
      cursor: pointer;
      padding: 0 2px;
      flex-shrink: 0;
    }
    #msn-notif-close:hover { color: #fff; }
    /* Body */
    #msn-notif-body {
      background: linear-gradient(180deg, #deeaf8 0%, #c8dcf4 100%);
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
    }
    #msn-notif-avatar {
      width: 44px;
      height: 44px;
      background: linear-gradient(180deg,#c8d8ee,#a0b8dc);
      border: 1px solid #7aaee8;
      border-radius: 3px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      overflow: hidden;
    }
    #msn-notif-avatar img {
      width: 34px;
      height: 34px;
      object-fit: contain;
    }
    #msn-notif-text {
      display: flex;
      flex-direction: column;
      gap: 2px;
      flex: 1;
    }
    #msn-notif-name {
      font-size: 12px;
      font-weight: bold;
      color: #0a1a4a;
    }
    #msn-notif-msg {
      font-size: 11px;
      color: #223;
    }
    /* Footer */
    #msn-notif-footer {
      background: linear-gradient(180deg,#c8dcf4 0%,#b0c8e8 100%);
      border-top: 1px solid #9ab8dc;
      text-align: right;
      padding: 3px 10px 4px;
    }
    #msn-notif-options {
      font-size: 11px;
      color: #1a4a9a;
      text-decoration: none;
      cursor: pointer;
    }
    #msn-notif-options:hover { text-decoration: underline; }

    /* ═══════════════════════════════════════
       PDF VIEWER MODAL
    ═══════════════════════════════════════ */
    #pdf-viewer-overlay {
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.35);
      z-index: 6000;
      display: none;
      align-items: center;
      justify-content: center;
    }
    #pdf-viewer-overlay.open { display: flex; }

    #pdf-viewer-modal {
      position: absolute;
      width: min(960px, 92vw);
      height: min(700px, 88vh);
      display: flex;
      flex-direction: column;
      border: 3px solid #1254a8;
      border-top: 0;
      border-radius: 0 0 6px 6px;
      box-shadow: 2px 4px 18px rgba(0,0,0,0.55);
      overflow: hidden;
      background: #f0f0ea;
      cursor: default;
      font-family: Tahoma, 'MS Sans Serif', Arial, sans-serif;
    }

    #pdf-viewer-titlebar {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 0 4px 0 6px;
      height: 22px;
      min-height: 22px;
      background: linear-gradient(180deg,#0997ff,#0053ee 8%,#0050ee 40%,#06f 88%,#06f 93%,#005bff 95%,#003dd7 96%,#003dd7) !important;
      border-radius: 5px 5px 0 0;
      user-select: none;
      cursor: move;
    }
    #pdf-viewer-titlebar img#pdf-viewer-icon {
      width: 14px; height: 14px; object-fit: contain; flex-shrink: 0;
    }
    #pdf-viewer-title {
      font-family: Tahoma, 'MS Sans Serif', Arial, sans-serif;
      font-size: 11px; font-weight: 700; color: #fff;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      flex: 1;
    }

    #pdf-viewer-menubar {
      background: #ece9d8;
      border-bottom: 1px solid #aca899;
      font-family: Tahoma, 'MS Sans Serif', Arial, sans-serif;
      font-size: 11px;
      color: #000;
      padding: 2px 8px;
      user-select: none;
    }

    #pdf-viewer-toolbar {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 3px 8px;
      background: linear-gradient(to bottom, #f5f4ee, #dedad0);
      border-bottom: 2px solid #aca899;
      user-select: none;
      font-family: Tahoma, 'MS Sans Serif', Arial, sans-serif;
    }
    #pdf-viewer-toolbar button {
      background: linear-gradient(to bottom, #fff, #ddd);
      border: 1px solid #999;
      border-radius: 3px;
      padding: 1px 8px;
      font-size: 11px;
      font-family: Tahoma, 'MS Sans Serif', Arial, sans-serif;
      cursor: pointer;
      color: #000;
      min-width: 26px;
    }
    #pdf-viewer-toolbar button:hover { background: linear-gradient(to bottom, #e8f0ff, #b8c8f0); }
    #pdf-viewer-toolbar button:active { background: #b0b8d0; }
    #pdf-page-display {
      font-size: 11px;
      font-family: Tahoma, 'MS Sans Serif', Arial, sans-serif;
      display: flex;
      align-items: center;
      gap: 3px;
      color: #000;
    }
    #pdf-page-input {
      width: 30px;
      text-align: center;
      font-size: 11px;
      font-family: Tahoma, 'MS Sans Serif', Arial, sans-serif;
      border: 1px solid #888;
      border-radius: 2px;
      padding: 1px 2px;
    }
    #pdf-zoom-select {
      font-size: 11px;
      font-family: Tahoma, 'MS Sans Serif', Arial, sans-serif;
      border: 1px solid #999;
      border-radius: 3px;
      padding: 1px 2px;
      background: #fff;
      cursor: pointer;
    }
    .pdf-sep {
      width: 1px; height: 18px;
      background: #aaa;
      margin: 0 4px;
    }

    #pdf-viewer-content {
      flex: 1;
      overflow: auto;
      background: #525659;
      position: relative;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding: 20px;
      box-sizing: border-box;
    }
    #pdf-page-wrapper {
      background: #fff;
      width: 720px;
      min-height: 842px;
      margin: 0 auto;
      transform-origin: top center;
      flex-shrink: 0;
      box-shadow: 0 2px 10px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,0,0,0.1);
    }
    #pdf-iframe {
      width: 100%;
      height: 842px;
      border: none;
      display: block;
    }

    #pdf-viewer-statusbar {
      display: flex;
      justify-content: space-between;
      padding: 2px 8px;
      background: #ece9d8;
      border-top: 1px solid #aca899;
      font-size: 10px;
      font-family: Tahoma, 'MS Sans Serif', Arial, sans-serif;
      color: #444;
    }

    /* Stato massimizzato */
    #pdf-viewer-modal.maximized {
      position: fixed !important;
      left: 0 !important; top: 0 !important;
      width: 100vw !important; height: 100vh !important;
      border-radius: 0 !important;
      border: none !important;
      box-shadow: none !important;
    }
    #pdf-viewer-modal.maximized #pdf-viewer-content {
      align-items: flex-start;
    }
    #pdf-viewer-modal.maximized #pdf-page-wrapper {
      width: 720px;
      min-height: 842px;
      margin: 0 auto;
    }
    #pdf-viewer-modal.maximized #pdf-iframe {
      height: 842px;
    }

    /* Maximize: WMP */
    #wmp-modal.maximized {
      position: fixed !important;
      left: 0 !important; top: 0 !important;
      width: 100vw !important; height: 100vh !important;
      max-width: none !important;
      border-radius: 0 !important;
      border-left: none !important;
      border-right: none !important;
      border-bottom: none !important;
      box-shadow: none !important;
      display: flex !important;
      flex-direction: column !important;
    }
    #wmp-modal.maximized #wmp-vis-wrap {
      flex: 1 !important;
      min-height: 0 !important;
    }
    #wmp-modal.maximized #wmp-shader,
    #wmp-modal.maximized #wmp-shader canvas {
      width: 100% !important;
      height: 100% !important;
    }

    /* Maximize: VLC e eMule */
    #vlc-modal.maximized,
    #emule-modal.maximized {
      position: fixed !important;
      left: 0 !important; top: 0 !important;
      width: 100vw !important; height: 100vh !important;
      border-radius: 0 !important;
      border-left: none !important;
      border-right: none !important;
      border-bottom: none !important;
      box-shadow: none !important;
    }
    #vlc-modal.maximized {
      display: flex !important;
      flex-direction: column !important;
    }
    #vlc-modal.maximized #vlc-video-wrap {
      flex: 1 !important;
      min-height: 0 !important;
      height: 0 !important;
    }
    #vlc-modal.maximized #vlc-video {
      width: 100% !important;
      height: 100% !important;
      max-height: none !important;
      object-fit: contain !important;
    }

    /* cartook item nel modal Lavori — cursore puntatore */
    .lavori-pdf { cursor: pointer !important; }

    @media (max-width: 767px) {
      #pdf-viewer-modal {
        width: 100vw !important;
        height: 100vh !important;
        left: 0 !important;
        top: 0 !important;
        border-radius: 0 !important;
        border: none !important;
      }
      #pdf-viewer-content {
        padding: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
      }
      #pdf-page-wrapper,
      #pdf-viewer-modal.maximized #pdf-page-wrapper {
        width: 100% !important;
        min-height: 0 !important;
        flex: 1 !important;
        margin: 0 !important;
        box-shadow: none !important;
      }
      #pdf-iframe,
      #pdf-viewer-modal.maximized #pdf-iframe {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
      }
    }

    /* ── MINESWEEPER ──────────────────────────── */
    #mines-overlay {
      position: fixed; inset: 0; z-index: 5030;
      background: rgba(0,0,0,0.25);
      display: none; align-items: center; justify-content: center;
    }
    #mines-overlay.open { display: flex; }
    #mines-modal {
      position: absolute;
      background: #d4d0c8;
      font-family: 'Tahoma', Arial, sans-serif;
      animation: winPop 0.18s cubic-bezier(0.22,1,0.36,1) both;
    }
    #mines-titlebar {
      background: linear-gradient(180deg,#0997ff,#0053ee 8%,#0050ee 40%,#06f 88%,#06f 93%,#005bff 95%,#003dd7 96%,#003dd7);
      padding: 3px 4px 3px 6px;
      display: flex; align-items: center; gap: 4px;
      user-select: none; cursor: grab;
    }
    #mines-titlebar:active { cursor: grabbing; }
    #mines-titlebar img { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; }
    #mines-titlebar .win-title { flex: 1; color: #fff; font-size: 11px; font-weight: bold; }
    #mines-menubar {
      background: #ece9d8;
      border-bottom: 1px solid #aca899;
      padding: 2px 6px;
      font-size: 11px; color: #444;
    }
    #mines-body {
      padding: 6px;
      background: #bdbdbd;
      border: 3px solid;
      border-color: #fff #808080 #808080 #fff;
      margin: 4px;
    }
    #mines-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 4px 3px;
      margin-bottom: 6px;
      border: 2px solid;
      border-color: #808080 #fff #fff #808080;
      background: #bdbdbd;
    }
    .ms-counter {
      background: #000;
      color: #f00;
      font-family: 'Consolas', 'Courier New', monospace;
      font-size: 22px;
      font-weight: 700;
      padding: 2px 4px;
      min-width: 42px;
      text-align: center;
      border: 1px solid;
      border-color: #808080 #fff #fff #808080;
      letter-spacing: 2px;
    }
    #mines-face {
      width: 28px; height: 28px;
      font-size: 16px;
      border: 2px solid;
      border-color: #fff #808080 #808080 #fff;
      background: #d4d0c8;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      padding: 0;
    }
    #mines-face:active {
      border-color: #808080 #fff #fff #808080;
    }
    #mines-grid {
      display: grid;
      grid-template-columns: repeat(9, 24px);
      grid-template-rows: repeat(9, 24px);
      border: 3px solid;
      border-color: #808080 #fff #fff #808080;
    }
    .ms-cell {
      width: 24px; height: 24px;
      border: 2px solid;
      border-color: #fff #808080 #808080 #fff;
      background: #bdbdbd;
      display: flex; align-items: center; justify-content: center;
      font-size: 12px; font-weight: 700;
      cursor: pointer;
      user-select: none;
      -webkit-user-select: none;
    }
    .ms-cell:active:not(.ms-revealed) {
      border-color: #808080;
      border-width: 1px;
    }
    .ms-revealed {
      border: 1px solid #808080;
      background: #c0c0c0;
      cursor: default;
    }
    .ms-mine { font-size: 14px; }
    @media (max-width: 767px) {
      #mines-modal {
        width: 95vw !important;
        left: 2.5vw !important;
        top: 60px !important;
      }
      #mines-grid {
        grid-template-columns: repeat(9, 1fr);
        grid-template-rows: repeat(9, 1fr);
      }
      .ms-cell { width: auto; height: 0; padding-bottom: 100%; position: relative; }
      .ms-cell > * { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
    }

    /* ── UNZIP DIALOG ─────────────────────────── */
    #unzip-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: rgba(0,0,0,0.3);
      justify-content: center;
      align-items: center;
    }
    #unzip-overlay.open { display: flex; }
    #unzip-dialog {
      background: #ece9d8;
      border: 2px solid #0054e3;
      border-radius: 8px 8px 4px 4px;
      box-shadow: 2px 4px 16px rgba(0,0,0,0.4);
      width: 400px;
      font-family: Tahoma, 'MS Sans Serif', Arial, sans-serif;
      overflow: hidden;
    }
    #unzip-titlebar {
      background: linear-gradient(180deg, #0a61e5 0%, #0554d4 50%, #0042b0 100%);
      color: #fff;
      font-size: 12px;
      font-weight: 700;
      padding: 5px 6px 5px 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    #unzip-close-btn {
      width: 21px; height: 21px;
      border: none;
      border-radius: 3px;
      background: linear-gradient(180deg, #e08a7c, #c1483a);
      cursor: pointer;
      padding: 3px;
    }
    #unzip-close-btn:hover { background: linear-gradient(180deg, #f09a8c, #d1584a); }
    #unzip-body {
      padding: 16px 24px 18px;
    }
    #unzip-anim {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 18px;
      padding: 0 20px;
      height: 48px;
      position: relative;
    }
    .unzip-folder-left, .unzip-folder-right {
      width: 40px; height: 40px;
    }
    .unzip-doc-fly {
      width: 20px; height: 24px;
      position: absolute;
      animation: docFly 1.2s ease-in-out infinite;
    }
    @keyframes docFly {
      0%   { left: 60px;  top: 0;    opacity: 1; }
      50%  { left: 170px; top: -16px; opacity: 1; }
      100% { left: 280px; top: 0;    opacity: 0; }
    }
    #unzip-filename {
      font-size: 11px;
      color: #000;
      margin-bottom: 2px;
    }
    #unzip-from {
      font-size: 11px;
      color: #000;
      margin-bottom: 14px;
    }
    #unzip-bar-wrap {
      height: 20px;
      background: #fff;
      border: 1px solid #8a8a7e;
      border-radius: 2px;
      padding: 2px;
      margin-bottom: 6px;
    }
    #unzip-bar-fill {
      height: 100%;
      width: 0%;
      background: repeating-linear-gradient(
        90deg,
        #37a634 0px, #37a634 8px,
        #32962f 8px, #32962f 10px
      );
      border-radius: 1px;
      transition: width 0.3s linear;
    }
    #unzip-status {
      font-size: 11px;
      color: #444;
      margin-bottom: 12px;
    }
    #unzip-cancel {
      float: right;
      margin-bottom: 4px;
      font-family: Tahoma, 'MS Sans Serif', Arial, sans-serif;
      font-size: 11px;
      padding: 3px 22px;
      background: linear-gradient(180deg, #fff, #ece9d8);
      border: 1px solid #aca899;
      border-radius: 3px;
      cursor: pointer;
    }
    #unzip-cancel:hover { background: linear-gradient(180deg, #fff, #ddd8c8); }

    /* ── GINO FOLDER ─────────────────────────── */
    #gino-folder-overlay {
      position: fixed; inset: 0; z-index: 5025;
      background: rgba(0,0,0,0.25);
      display: none; align-items: center; justify-content: center;
    }
    #gino-folder-overlay.open { display: flex; }
    #gino-folder-modal {
      position: absolute;
      width: 900px;
      min-height: 560px;
      max-width: 94vw;
      display: flex; flex-direction: column;
      background: #d4d0c8;
      border: 2px solid;
      border-color: #f0ece4 #404038 #404038 #f0ece4;
      box-shadow: 4px 4px 10px rgba(0,0,0,0.55);
      font-family: 'Tahoma', Arial, sans-serif;
      animation: winPop 0.18s cubic-bezier(0.22,1,0.36,1) both;
    }
    #gino-folder-titlebar {
      background: linear-gradient(180deg,#0997ff,#0053ee 8%,#0050ee 40%,#06f 88%,#06f 93%,#005bff 95%,#003dd7 96%,#003dd7);
      padding: 3px 4px 3px 6px;
      display: flex; align-items: center; gap: 4px;
      user-select: none; cursor: grab;
    }
    #gino-folder-titlebar:active { cursor: grabbing; }
    #gino-folder-titlebar img { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; }
    #gino-folder-titlebar span { flex: 1; color: #fff; font-size: 11px; font-weight: bold; }
    #gino-folder-toolbar {
      background: linear-gradient(180deg,#d4d0c8 0%,#c8c4bc 100%);
      border-bottom: 1px solid #888;
      padding: 2px 4px;
      font-size: 11px; color: #444;
    }
    #gino-folder-addrbar {
      background: #d4d0c8;
      border-bottom: 2px solid #888;
      padding: 2px 6px;
      display: flex; align-items: center; gap: 4px;
      font-size: 11px;
    }
    #gino-folder-addrbar label { color: #000; font-weight: bold; white-space: nowrap; }
    #gino-folder-addrbar .addr-box {
      flex: 1; height: 18px;
      background: #fff;
      border: 1px solid; border-color: #808080 #d4d0c8 #d4d0c8 #808080;
      padding: 0 4px; font-size: 11px; display: flex; align-items: center;
    }
    #gino-folder-files {
      padding: 14px 10px;
      display: flex; flex-wrap: wrap; gap: 18px 14px;
      align-items: flex-start; align-content: flex-start;
      flex: 1;
      background: #fff;
    }
    .gino-file {
      width: 90px;
      display: flex; flex-direction: column; align-items: center;
      gap: 5px; padding: 6px 4px;
      cursor: default;
      border: 1px solid transparent;
    }
    .gino-file:hover, .gino-file.selected {
      background: #316ac5;
      border-color: #316ac5;
    }
    .gino-file:hover .gf-name, .gino-file.selected .gf-name { color: #fff; }
    .gino-file img { width: 44px; height: 44px; object-fit: contain; }
    .gf-name {
      font-size: 10px; color: #000; text-align: center;
      word-break: break-all; line-height: 1.3;
    }
    #gino-folder-statusbar {
      display: flex; justify-content: space-between;
      padding: 2px 8px;
      background: #ece9d8;
      border-top: 1px solid #aca899;
      font-size: 10px; color: #444;
    }