/* y2kmallrat theme kit: tokens + effect layers. SHARED by setup., io. and the main site. Source of truth: themes/themes.css.
   How each theme restyles a PAGE lives with the page: wizard/public/index.html and site/src/assets/skin.css. */
  :root { --bg:#0f1117; --card:#1a1d27; --line:#2a2e3d; --text:#e8e9ee; --muted:#9aa0b4; --accent:#6c8cff; --link:var(--accent);
          --on-accent:#0b0d14; --ok:#4cc38a; --bad:#ff6b6b; --card-border:1px solid var(--line); --shadow:none;
          --font:system-ui,-apple-system,"Segoe UI",sans-serif; --font-head:var(--font); }
  
  
  [data-theme="hollow"] { --bg:#0e0710; --card:#1b1020; --line:#432a3a; --text:#f6e9db; --muted:#c9a98f; --accent:#ff7a18; --on-accent:#1a0d02;
          --ok:#9be15d; --bad:#ff5a5a; --card-border:1px solid #6a3b1c; --shadow:0 0 28px #ff7a1833;
          --bar-fill:linear-gradient(90deg,#5a1f8f,#ff7a18); --body-bg:radial-gradient(ellipse at 80% 8%,#4a2418 0,transparent 42%),radial-gradient(ellipse at 20% 100%,#2a1240 0,transparent 55%),#0e0710;
          --font-head:Georgia,"Times New Roman",serif; }
  /* Arcade Carpet: the loud 90s mall-arcade carpet (dark purple, neon squiggles, triangles and confetti) with a 1UP scoreboard (fxCarpet). */
  [data-theme="carpet"] { --bg:#120a2b; --card:#1a1040; --line:#19e3d1; --text:#f4f1ff; --muted:#b9b0e0; --accent:#19e3d1; --link:#ffd23f; --on-accent:#08141a;
          --ok:#6df0a0; --bad:#ff6b8f; --card-border:2px solid #19e3d1; --shadow:5px 5px 0 #ff3fa4;
          --bar-fill:repeating-linear-gradient(90deg,#19e3d1 0 10px,#ff3fa4 10px 20px); --bar-h:12px;
          --body-bg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg opacity='.5'%3E%3Cg fill='none' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 30q8-14 16 0t16 0' stroke='%2319e3d1'/%3E%3Cpath d='M84 110q8-14 16 0t16 0' stroke='%23ff3fa4'/%3E%3Ccircle cx='100' cy='34' r='9' stroke='%23ffd23f'/%3E%3Cpath d='M30 96l10-18 10 18z' stroke='%237c5cff'/%3E%3Cpath d='M70 18v12M64 24h12' stroke='%23ffd23f'/%3E%3C/g%3E%3Crect x='60' y='62' width='8' height='8' fill='%23ff3fa4' transform='rotate(25 64 66)'/%3E%3Ccircle cx='20' cy='72' r='3' fill='%2319e3d1'/%3E%3Ccircle cx='120' cy='84' r='3' fill='%2319e3d1'/%3E%3C/g%3E%3C/svg%3E") 0 0/140px 140px,#120a2b;
          --font:Verdana,Tahoma,sans-serif; --font-head:"Arial Black",Impact,sans-serif; }
  
  
  /* ===== Round 3 themes ===== */
  [data-theme="mainframe"] { --bg:#020a04; --card:#061208; --line:#0f3d1c; --text:#b6ffcb; --muted:#78c493; --accent:#2cff6d; --link:#5dffa0; --on-accent:#021206;
          --ok:#2cff6d; --bad:#ff6b6b; --card-border:1px solid #1c7a3a; --shadow:0 0 22px #2cff6d2b;
          --bar-fill:repeating-linear-gradient(90deg,#2cff6d 0 8px,transparent 8px 11px); --bar-h:12px;
          --font:ui-monospace,"Cascadia Code","SF Mono",Consolas,monospace; --font-head:var(--font); }
  [data-theme="afterglow"] { --bg:#12002b; --card:#1b0838; --line:#5a1a8a; --text:#fdf3ff; --muted:#d3b6f0; --accent:#ff2d95; --link:#3ff2ff; --on-accent:#1a0018;
          --ok:#5dfcb0; --bad:#ff8aa0; --card-border:2px solid #3ff2ff; --shadow:0 0 22px #3ff2ff66,inset 0 0 18px #ff2d9522;
          --bar-fill:linear-gradient(90deg,#ff2d95,#ff9a3d,#3ff2ff); --bar-h:12px;
          --body-bg:linear-gradient(#0d0022 0%,#280a4a 45%,#8a1f6f 62%,#12002b 62.1%);
          --font-head:"Trebuchet MS","Arial Black",sans-serif; }
  
  
  
  
  
  [data-theme="petrichor"] { --bg:#070d1a; --card:#0d1730; --line:#25355e; --text:#e8eeff; --muted:#a6b6dc; --accent:#ff4fa3; --link:#7fe3ff; --on-accent:#1a0010;
          --ok:#6ef0b4; --bad:#ff9a9a; --card-border:1px solid #8aa8ff40; --shadow:0 0 34px #ff4fa31f;
          --bar-fill:linear-gradient(90deg,#ff4fa3,#7fe3ff);
          --body-bg:linear-gradient(#070d1a,#0c1630 60%,#131f42); }
  .theme-wrap { position:fixed; top:14px; right:14px; z-index:10; }
  .theme-btn { display:flex; align-items:center; gap:8px; padding:8px 14px; font-size:.9rem; }
  .theme-menu { position:absolute; right:0; margin-top:6px; min-width:190px; background:var(--card); border:var(--card-border); border-radius:10px; padding:6px; box-shadow:0 8px 24px #0009; }
  .theme-menu[hidden] { display:none; }
  .theme-menu button { display:flex; align-items:center; gap:10px; width:100%; border:0; background:transparent; padding:9px 10px; border-radius:6px; text-align:left; font-size:.95rem; }
  .theme-menu button:hover, .theme-menu button:focus-visible { background:var(--bg); outline:1px solid var(--line); }
  .dots { display:inline-flex; } .dots i { width:12px; height:12px; border-radius:50%; margin-right:-4px; border:1px solid #0006; }
  .theme-menu .check { margin-left:auto; color:var(--link); }
  :root { --rainbow:linear-gradient(180deg,#e40303 0 16.66%,#ff8c00 16.66% 33.33%,#ffed00 33.33% 50%,#008026 50% 66.66%,#004dff 66.66% 83.33%,#750787 83.33% 100%); }
  #fx { position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:0; display:none; }
  [data-theme="hollow"] #fx, [data-theme="carpet"] #fx{ display:block; }
  #bats { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:3; display:none; }
  
  #profile, #fakenav { display:none; }

  /* ---- Hollow: smoke, ghosts, embers, cobwebs, lightning ---- */
  .fog { position:absolute; left:-50%; width:200%; height:45%; filter:blur(38px); opacity:.55; animation:fogdrift 70s linear infinite;
         background:radial-gradient(ellipse 22% 50% at 15% 50%,rgba(210,200,235,.24),transparent 70%),radial-gradient(ellipse 25% 45% at 45% 60%,rgba(190,180,215,.2),transparent 70%),radial-gradient(ellipse 20% 50% at 78% 45%,rgba(220,210,240,.22),transparent 70%); }
  .fog.f1 { bottom:12%; } .fog.f2 { bottom:-8%; animation-duration:95s; animation-direction:reverse; opacity:.5; } .fog.f3 { top:4%; animation-duration:120s; opacity:.3; }
  @keyframes fogdrift { from { transform:translateX(0); } to { transform:translateX(25%); } }
  .wisp { position:absolute; bottom:-20%; width:150px; height:60vh; border-radius:50%; filter:blur(24px); opacity:0; animation:rise 14s ease-in infinite;
          background:radial-gradient(ellipse at 50% 100%,rgba(225,215,240,.32),transparent 70%); }
  @keyframes rise { 0% { transform:translateY(0) scaleX(.8); opacity:0; } 15% { opacity:.7; } 100% { transform:translateY(-70vh) translateX(50px) scaleX(1.8); opacity:0; } }
  .ghost { position:absolute; left:-10%; opacity:.24; filter:drop-shadow(0 0 10px rgba(255,255,255,.45)); animation:ghostx linear infinite, ghostbob 3.5s ease-in-out infinite; }
  .ghost svg { display:block; width:100%; height:auto; }
  @keyframes ghostx { from { left:-10%; } to { left:110%; } }
  @keyframes ghostbob { 0%,100% { transform:translateY(0) rotate(-3deg); } 50% { transform:translateY(-16px) rotate(3deg); } }
  .ember { position:absolute; bottom:-10px; width:5px; height:5px; border-radius:50%; background:#ffa040; box-shadow:0 0 8px 3px rgba(255,140,40,.7); opacity:0; animation:ember 9s linear infinite; }
  @keyframes ember { 0% { transform:translate(0,0); opacity:0; } 10% { opacity:.95; } 100% { transform:translate(var(--dx),-105vh); opacity:0; } }
  .moon-h { position:absolute; top:6%; right:8%; width:140px; height:140px; border-radius:50%; opacity:.55;
            background:radial-gradient(circle at 35% 35%,#ffd9a0,#ff9a3c 60%,#c25a10); box-shadow:0 0 90px 30px rgba(255,140,40,.28); }
  .flash { position:absolute; inset:0; background:#cfc3ff; opacity:0; animation:flash 26s linear infinite; }
  @keyframes flash { 0%,91% { opacity:0; } 92% { opacity:.13; } 93% { opacity:0; } 94% { opacity:.2; } 96%,100% { opacity:0; } }
  .web { position:absolute; top:0; width:220px; opacity:.38; }
  .web.l { left:0; } .web.r { right:0; transform:scaleX(-1); }
  .spider { position:absolute; top:0; left:16%; transform-origin:top center; animation:swing 4.2s ease-in-out infinite; font-size:22px; line-height:1; text-align:center; }
  .spider::before { content:''; display:block; width:1px; height:110px; background:rgba(230,225,240,.55); margin:0 auto; }
  @keyframes swing { 0%,100% { transform:rotate(-7deg); } 50% { transform:rotate(7deg); } }
  @keyframes flick { 0%,18%,22%,60%,64%,100% { opacity:1; } 20%,62% { opacity:.55; } }

  /* ---- Sparkles (twinkling glitter used by several themes) ---- */
  .spark { position:absolute; width:9px; height:9px; opacity:0; animation:twinkle 3s ease-in-out infinite; clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%); }
  @keyframes twinkle { 0%,100% { opacity:0; transform:scale(.4) rotate(0deg); } 50% { opacity:.95; transform:scale(1.3) rotate(90deg); } }

  @keyframes tw2 { 0%,100% { opacity:.15; } 50% { opacity:.85; } }

  #fakenav span:not(.brand) + span::before { content:"| "; margin-right:8px; opacity:.6; }
  #fakenav .brand { color:#ff2e97; font:bold 15px "Comic Sans MS",cursive; margin-right:10px; text-shadow:1px 1px 0 #fff3; }
  @keyframes glitter { to { background-position:300% 0; } }
  @keyframes blink { 50% { opacity:0; } }
  @keyframes marq { from { text-indent:100%; } to { text-indent:-100%; } }
  @keyframes pole { to { background-position:28px 0; } }
  .pbox { border:2px solid #ff2e97; background:#111; margin-bottom:12px; }
  .pbox h3 { margin:0; padding:4px 8px; background:#ff2e97; color:#fff; font:bold 13px "Comic Sans MS",cursive; }
  .pbody { padding:8px; color:#eee; line-height:1.5; } .pbody p { margin:4px 0; }
  .pavatar { aspect-ratio:1; border:3px double #b6ff00; display:grid; place-items:center; font-size:64px; background:repeating-linear-gradient(45deg,#1c1c1c 0 8px,#2a2a2a 8px 16px); }
  .online { color:#b6ff00; font-weight:bold; text-align:center; animation:blink 1s steps(2) infinite; }
  .eq { display:inline-flex; gap:2px; align-items:flex-end; height:14px; vertical-align:middle; }
  .eq i { width:3px; background:#b6ff00; animation:eq .8s ease-in-out infinite; } .eq i:nth-child(2) { animation-delay:.2s; } .eq i:nth-child(3) { animation-delay:.4s; } .eq i:nth-child(4) { animation-delay:.1s; }
  @keyframes eq { 0%,100% { height:3px; } 50% { height:14px; } }
  .f8 { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
  .fr { text-align:center; font-size:10px; color:#bbb; } .fr b { color:#ff2e97; }
  .fr .av { aspect-ratio:1; border:2px solid #555; display:grid; place-items:center; font-size:20px; background:#222; margin-bottom:2px; opacity:.55; }
  .fr.done .av { border-color:#b6ff00; opacity:1; } .fr.now .av { border-color:#ff2e97; opacity:1; animation:blink 1s steps(2) infinite; }
  .trail { position:fixed; pointer-events:none; z-index:100; font-size:16px; animation:trailfade .9s ease-out forwards; }
  @keyframes trailfade { from { opacity:1; transform:translateY(0) rotate(0deg) scale(1); } to { opacity:0; transform:translateY(26px) rotate(90deg) scale(.4); } }
  @media (prefers-reduced-motion: reduce) {
    #fx *, [data-theme] h1, [data-theme] .card, [data-theme] p.sub, [data-theme] .bar > div, #profile *, .trail { animation:none !important; }
  }
  #fxc { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; display:none; }
  [data-theme="mainframe"] #fxc, [data-theme="petrichor"] #fxc{ display:block; }
  #crt { position:fixed; inset:0; pointer-events:none; z-index:4; display:none; }
  #taskbar { display:none; }
  [data-theme="afterglow"] #fx, [data-theme="petrichor"] #fx{ display:block; }
  .theme-menu { max-height:72vh; overflow:auto; }

  /* ---- Mainframe ---- */
  [data-theme="mainframe"] #crt { display:block; animation:crt 5s infinite;
          background:repeating-linear-gradient(0deg,rgba(0,0,0,.2) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.6) 100%); }
  @keyframes crt { 0%,100% { opacity:.95; } 50% { opacity:1; } 52% { opacity:.82; } 54% { opacity:1; } }
  .ag-sun { position:absolute; left:50%; bottom:33%; width:min(30vw,300px); aspect-ratio:1; transform:translateX(-50%); border-radius:50%; transition:bottom 1.4s ease;
            background:linear-gradient(#fff36b 0%,#ff9a3d 38%,#ff2d95 72%,#a100ff 100%); filter:drop-shadow(0 0 40px #ff2d95aa);
            -webkit-mask-image:linear-gradient(#000 0 52%,transparent 52% 57%,#000 57% 64%,transparent 64% 70%,#000 70% 78%,transparent 78% 85%,#000 85%);
            mask-image:linear-gradient(#000 0 52%,transparent 52% 57%,#000 57% 64%,transparent 64% 70%,#000 70% 78%,transparent 78% 85%,#000 85%); }
  .ag-floor { position:absolute; left:0; right:0; bottom:0; height:38%; overflow:hidden; background:linear-gradient(#12002b,#2b0a58); border-top:2px solid #ff2d95; box-shadow:0 -6px 30px #ff2d9599; }
  .ag-grid { position:absolute; left:-50%; right:-50%; top:0; height:300%; transform-origin:50% 0; transform:perspective(320px) rotateX(64deg); opacity:.75; animation:gridmove 1.1s linear infinite;
             background-image:linear-gradient(#ff2d95 2px,transparent 2px),linear-gradient(90deg,#ff2d95 2px,transparent 2px); background-size:64px 64px; }
  @keyframes gridmove { to { background-position:0 64px; } }
  .ag-star { position:absolute; width:2px; height:2px; background:#fff; border-radius:50%; animation:tw2 3.5s ease-in-out infinite; }
  .ray { position:absolute; top:-15%; width:140px; height:130vh; transform-origin:top center; filter:blur(10px); animation:sway 9s ease-in-out infinite alternate;
         background:linear-gradient(rgba(150,225,255,.28),transparent 75%); }
  @keyframes sway { from { transform:rotate(14deg); opacity:.5; } to { transform:rotate(22deg); opacity:.9; } }
  .bub { position:absolute; bottom:-30px; border-radius:50%; border:1px solid rgba(210,245,255,.55); opacity:0; animation:bub 10s linear infinite;
         background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.55),rgba(255,255,255,.05)); }
  @keyframes bub { 0% { transform:translate(0,0); opacity:0; } 10% { opacity:.85; } 50% { transform:translate(var(--sx),-55vh); } 100% { transform:translate(0,-112vh); opacity:0; } }
  .jelly { position:absolute; width:64px; filter:drop-shadow(0 0 14px rgba(255,150,230,.7)); animation:jdrift 26s ease-in-out infinite alternate,jpulse 2.6s ease-in-out infinite; }
  .jelly svg { display:block; width:100%; height:auto; }
  @keyframes jdrift { from { transform:translate(0,0); } to { transform:translate(var(--jx),var(--jy)); } }
  @keyframes jpulse { 0%,100% { scale:1 1; } 50% { scale:1.08 .9; } }
  .mote { position:absolute; width:3px; height:3px; border-radius:50%; background:rgba(210,240,255,.6); opacity:0; animation:mote 12s linear infinite; }
  @keyframes mote { 0% { transform:translate(0,0); opacity:0; } 20% { opacity:.7; } 100% { transform:translate(var(--mx),-30vh); opacity:0; } }
  .depth { position:absolute; left:16px; bottom:16px; padding:8px 12px; border:1px solid #38b6ff88; border-radius:8px; background:#03192ccc; color:#bfeaff; font:12px ui-monospace,Consolas,monospace; }
  .depth b { display:block; font-size:20px; color:#7ff0ff; }
  .planet { position:absolute; right:-6vmin; bottom:-8vmin; width:32vmin; height:32vmin; border-radius:50%;
            background:radial-gradient(circle at 32% 30%,#ffd7a1 0,#e08a4a 35%,#7a3a2a 70%,#2a1418 100%); box-shadow:inset -10px -10px 30px #0008,0 0 60px #ff9a4a33; }
  .planet::before { content:''; position:absolute; left:-30%; right:-30%; top:38%; height:24%; border-radius:50%; border:6px solid #ffe2b366; transform:rotate(-14deg); box-shadow:0 0 12px #ffcf8a44; }
  .shoot { position:absolute; width:130px; height:2px; background:linear-gradient(90deg,transparent,#fff); opacity:0; transform:rotate(28deg); animation:shoot 9s linear infinite; }
  @keyframes shoot { 0% { transform:translate(0,0) rotate(28deg); opacity:0; } 3% { opacity:1; } 12% { transform:translate(420px,225px) rotate(28deg); opacity:0; } 100% { opacity:0; } }
  .branch { position:absolute; top:-6px; right:-6px; width:min(46vw,380px); }
  .sun-h { position:absolute; left:5%; top:8%; width:110px; height:110px; border-radius:50%; background:#e8455f; opacity:.14; }
  .kanji { position:absolute; right:3%; top:26%; writing-mode:vertical-rl; font:96px "Yu Mincho","Hiragino Mincho ProN",serif; color:#c92a5a; opacity:.09; letter-spacing:.1em; }
  /* ---- Xerox layers (all fixed, never block clicks) ---- */
  .xx-streaks { position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.34),transparent 1.3%,transparent 98.5%,rgba(0,0,0,.3)),repeating-linear-gradient(0deg,transparent 0 160px,rgba(0,0,0,.045) 160px 163px); mix-blend-mode:multiply; }
  .xx-holes { position:absolute; inset:0; background:radial-gradient(circle at 24px 17%,#d9d4c9 0 8px,#7d786d 8px 9.5px,transparent 10px),radial-gradient(circle at 24px 50%,#d9d4c9 0 8px,#7d786d 8px 9.5px,transparent 10px),radial-gradient(circle at 24px 83%,#d9d4c9 0 8px,#7d786d 8px 9.5px,transparent 10px); }
  .xx-fold { position:absolute; left:0; right:0; top:33%; height:2px; background:linear-gradient(90deg,transparent,rgba(0,0,0,.1) 25%,rgba(0,0,0,.22) 50%,rgba(0,0,0,.1) 75%,transparent); }
  .xx-dust { position:absolute; left:0; top:0; width:2px; height:2px; background:transparent; border-radius:50%; opacity:.5; }
  .xx-fax { position:absolute; right:12px; bottom:6px; font:11px "Courier New",monospace; letter-spacing:.08em; text-transform:uppercase; opacity:.6; color:#161616; }
  .xx-stamp { position:absolute; right:3vw; bottom:12vh; padding:4px 12px; border:3px double #b3121f; color:#b3121f; font:700 clamp(14px,2.4vw,24px) "Courier New",monospace; letter-spacing:.14em; text-transform:uppercase; transform:rotate(-9deg); opacity:.5; mix-blend-mode:multiply; }
  /* the letterhead and memo block sit in the page, right under the site header */
  .xx-letterhead { max-width:1100px; margin:14px auto 0; padding:0 18px; color:#161616; font-family:"Times New Roman",Georgia,serif; transform:rotate(-.3deg); text-shadow:.5px 0 0 rgba(0,0,0,.45); }
  .xx-co { font-size:clamp(1rem,2.6vw,1.5rem); letter-spacing:.14em; text-transform:uppercase; border-bottom:3px double #161616; padding-bottom:4px; }
  .xx-co b { font-size:1.45em; letter-spacing:.06em; }
  .xx-addr { font:11px/1.4 "Courier New",monospace; letter-spacing:.06em; margin-top:3px; opacity:.8; }
  .xx-memo { display:grid; grid-template-columns:auto 1fr; gap:1px 10px; margin:8px 0 0; font:12px/1.35 "Courier New",monospace; border-bottom:1px solid #161616; padding-bottom:6px; }
  .xx-memo b { text-transform:uppercase; letter-spacing:.1em; }
  
  #taskbar .start { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border:2px solid; border-color:#fff #404040 #404040 #fff; }
  #taskbar .start i { width:14px; height:14px; background:conic-gradient(#e33 0 25%,#3a3 0 50%,#36f 0 75%,#fc0 0); }
  #taskbar .task { padding:3px 12px; border:2px solid; border-color:#404040 #fff #fff #404040; background:repeating-conic-gradient(#c0c0c0 0 25%,#fff 0 50%) 0 0/2px 2px; }
  #taskbar .tray { margin-left:auto; padding:3px 10px; border:1px solid; border-color:#808080 #fff #fff #808080; font-weight:normal; }
  .dicons { position:absolute; left:14px; top:64px; display:none; flex-direction:column; gap:18px; }
  .dicon { width:72px; padding:0; border:0; background:none; cursor:default; text-align:center; color:#fff; font:12px Tahoma,Verdana,sans-serif; text-shadow:1px 1px 0 #000; pointer-events:auto; }
  .dicon:focus-visible { outline:1px dotted #fff; background:#00008099; }
  .dicons { pointer-events:none; }
  /* the pretend error box opened by the wannacry.exe joke icon */
  .win-dlg { position:fixed; left:50%; top:30%; width:min(380px,92vw); transform:translateX(-50%); z-index:12; background:#c0c0c0; border:2px solid; border-color:#fff #404040 #404040 #fff; box-shadow:1px 1px 0 #000,6px 6px 0 #0006; font:13px Tahoma,Verdana,sans-serif; color:#000; pointer-events:auto; }
  .win-title { background:linear-gradient(90deg,#000080,#1084d0); color:#fff; font-weight:700; padding:3px 6px; }
  .win-body { display:grid; grid-template-columns:36px 1fr; gap:4px 10px; padding:14px; align-items:start; }
  .win-body p { margin:0; } .win-small { grid-column:2; font-size:12px; color:#262626; }
  .win-x { grid-row:span 2; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:#c00; color:#fff; font-size:18px; }
  .win-ok { grid-column:1 / -1; justify-self:center; min-width:80px; padding:4px 14px; background:#c0c0c0; border:2px solid; border-color:#fff #404040 #404040 #fff; font:inherit; color:#000; cursor:pointer; }
  .win-ok:active { border-color:#404040 #fff #fff #404040; }
  .dicon span { display:block; font-size:34px; }
  .bokeh { position:absolute; bottom:var(--by); width:var(--bs); height:var(--bs); border-radius:50%; background:var(--bc); filter:blur(6px); opacity:.35; animation:bok 6s ease-in-out infinite alternate; }
  @keyframes bok { from { opacity:.2; transform:scale(.9); } to { opacity:.5; transform:scale(1.1); } }
  [data-theme="petrichor"] #crt { display:block; background:radial-gradient(ellipse at 50% 40%,transparent 50%,rgba(3,8,20,.6) 100%); }
  @keyframes neon { 0%,19%,21%,60%,62%,100% { opacity:1; } 20%,61% { opacity:.35; } 22% { opacity:.8; } }
  @media (prefers-reduced-motion: reduce) {
    .ag-grid, .ray, .bub, .jelly, .mote, .shoot, .bokeh, #crt, [data-theme="petrichor"] h1, [data-theme="mainframe"] h1::after { animation:none !important; }
  }
  /* ---- Hollow (reimagined): a haunted mansion, a lantern, and things watching from the dark ---- */
  .mansion { position:absolute; right:-2%; bottom:0; width:min(96vw,640px); height:auto; }
  .yard { position:absolute; left:-2%; bottom:0; width:min(70vw,520px); height:auto; }
  .win { fill:#160f1c; transition:fill .9s,filter .9s; }
  .win.lit { fill:#ffc266; filter:drop-shadow(0 0 9px #ff9a3c); animation:wflick 3.4s infinite; }
  @keyframes wflick { 0%,100% { opacity:1; } 42% { opacity:.88; } 47% { opacity:.6; } 52% { opacity:1; } }
  .pump .pb { fill:#3a1808; transition:fill .8s; }
  .pump .ps { fill:#12240c; }
  .pump .face { fill:#0e0604; transition:fill .8s,filter .8s; }
  .pump.lit .pb { fill:#e8781c; }
  .pump.lit .face { fill:#ffe08a; filter:drop-shadow(0 0 6px #ffb347); }
  .eyes { position:absolute; display:flex; gap:9px; opacity:0; animation:eyes 9s infinite; }
  .eyes i { width:7px; height:4px; border-radius:50%; background:#ffd24a; box-shadow:0 0 8px 2px #ff9a1a; }
  @keyframes eyes { 0%,8%,100% { opacity:0; } 10%,30% { opacity:1; } 32% { opacity:0; } 34%,40% { opacity:1; } 42% { opacity:0; } }
  .lantern { position:fixed; left:0; top:0; width:360px; height:360px; pointer-events:none; z-index:3; border-radius:50%; mix-blend-mode:screen;
             background:radial-gradient(circle,rgba(255,170,60,.30) 0,rgba(255,140,40,.10) 40%,transparent 70%); }
  .boom { position:absolute; inset:0; background:#d9ccff; opacity:0; }
  .boom.go { animation:boom 1.3s ease-out; }
  @keyframes boom { 0% { opacity:0; } 8% { opacity:.4; } 18% { opacity:.05; } 30% { opacity:.3; } 100% { opacity:0; } }
  .fx-lit .mansion { filter:drop-shadow(0 0 34px rgba(255,150,50,.4)); }
  @media (prefers-reduced-motion: reduce) { .win.lit, .eyes, .boom.go { animation:none !important; } .eyes { opacity:.8; } }
  /* ---- Arcade Carpet layers: drifting confetti shapes, the 1UP scoreboard, INSERT COIN ---- */
  .cp-s { position:absolute; opacity:.5; animation:cpdrift linear infinite; text-shadow:0 0 8px currentColor; }
  @keyframes cpdrift { from { transform:translate(0,0) rotate(0deg); } to { transform:translate(40px,-60px) rotate(360deg); } }
  .cp-ui { position:fixed; inset:0; pointer-events:none; z-index:5; }
  .cp-hud { position:absolute; top:70px; right:12px; font:700 14px "Courier New",monospace; letter-spacing:.12em; color:#ffd23f; text-shadow:0 0 8px #ffd23f88; background:#120a2bcc; border:2px solid #ffd23f; padding:2px 8px; }
  .cp-hud b { color:#fff; font-weight:700; }
  .cp-coin { position:absolute; bottom:10px; left:50%; transform:translateX(-50%); font:700 12px "Courier New",monospace; letter-spacing:.3em; color:#ff3fa4; animation:cpblink 1.2s steps(2) infinite; }
  @keyframes cpblink { 50% { opacity:0; } }
  @media (prefers-reduced-motion: reduce) { .cp-s { animation:none; } .cp-coin { animation:none; } }
  @media (max-width:760px) { .cp-hud { top:62px; font-size:12px; } }
  /* the picker works on pages that have no base button styles of their own (low specificity so page themes can still restyle it) */
  :where(.theme-wrap) button { font:inherit; font-size:.9rem; color:var(--text); background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:8px 14px; cursor:pointer; }
  :where(.theme-wrap) .theme-menu button, :where(.theme-wrap) .theme-menu button:hover { border:0; }
  .theme-wrap.inline { position:relative; top:auto; right:auto; z-index:30; display:flex; gap:8px; align-items:center; }
  .theme-wrap.inline .theme-menu { top:100%; right:0; z-index:40; }
  /* phones: in the site header the Theme button is icon-only, to keep the header on one slim line */
  @media (max-width:760px) { .theme-wrap.inline { gap:4px; } .theme-wrap.inline .tb-text { display:none; } .theme-wrap.inline .theme-btn { padding:5px 8px; } }
  @media (max-width:760px) { .theme-wrap.inline .theme-menu { position:fixed; top:auto; left:12px; right:12px; bottom:12px; width:auto; max-height:70vh; margin:0; } }

/* ---- Nocturne (reimagined): a gothic cathedral. Rose window, light shafts, dust, pillars, candles ---- */
.rose-wrap { position:absolute; left:50%; top:-4vmin; width:min(62vmin,520px); aspect-ratio:1; transform:translateX(-50%); opacity:.92; }
.rose-halo { position:absolute; inset:-14%; border-radius:50%; background:radial-gradient(circle,rgba(255,190,120,.26),rgba(194,35,63,.14) 45%,transparent 68%); filter:blur(18px); transition:opacity 1s; }
.fx-lit .rose-halo { background:radial-gradient(circle,rgba(255,200,130,.42),rgba(194,35,63,.2) 45%,transparent 70%); }
.rose { position:relative; display:block; width:100%; height:100%; animation:rosespin 240s linear infinite; filter:saturate(1.15) drop-shadow(0 0 26px rgba(255,170,90,.35)); }
@keyframes rosespin { to { transform:rotate(360deg); } }
.shafts { position:absolute; inset:0; }
.shaft { position:absolute; top:26vmin; left:calc(50% + var(--x)); width:15vmin; height:112vh; margin-left:-7.5vmin; transform-origin:50% 0; transform:rotate(var(--r)); clip-path:polygon(36% 0,64% 0,100% 100%,0 100%);
         background:linear-gradient(color-mix(in srgb,var(--c) 60%,transparent),transparent 80%); mix-blend-mode:screen; opacity:.5; filter:blur(3px); animation:shaft var(--d) ease-in-out infinite alternate; animation-delay:var(--dl); }
@keyframes shaft { from { opacity:.2; } to { opacity:.6; } }
.dust { position:absolute; width:3px; height:3px; border-radius:50%; background:#ffe1b0; opacity:0; animation:dustrise linear infinite; }
@keyframes dustrise { 0% { transform:translate(0,0); opacity:0; } 15% { opacity:.75; } 85% { opacity:.5; } 100% { transform:translate(var(--dx),-28vh); opacity:0; } }
.pillar { position:absolute; top:0; bottom:0; width:clamp(22px,6vw,96px); background:linear-gradient(90deg,#0d0709,#2a1519 35%,#3a1e22 50%,#22110f 70%,#0a0507); box-shadow:inset 0 0 40px #000; }
.pillar.l { left:0; border-right:2px solid #4a2028; } .pillar.r { right:0; border-left:2px solid #4a2028; transform:scaleX(-1); }
.pillar::after { content:''; position:absolute; inset:0; background:repeating-linear-gradient(0deg,transparent 0 118px,#0007 118px 121px); }
.candles { position:absolute; left:0; right:0; bottom:0; height:130px; display:flex; justify-content:space-around; align-items:flex-end; padding:0 clamp(34px,9vw,130px) 12px; }
.cd { position:relative; width:14px; height:var(--h); }
.cd .wax { position:absolute; inset:0; border-radius:3px 3px 1px 1px; background:linear-gradient(90deg,#8a7b66,#d9cbb0 45%,#a8987f); opacity:.5; transition:opacity .8s; }
.cd .wick { position:absolute; top:-5px; left:50%; width:2px; height:6px; margin-left:-1px; background:#1a0d08; }
.cd .flame { position:absolute; top:-27px; left:50%; width:12px; height:22px; margin-left:-6px; border-radius:50% 50% 50% 50% / 62% 62% 38% 38%; transform-origin:50% 100%; transform:scale(0); opacity:0;
             background:radial-gradient(ellipse at 50% 72%,#fff7d0,#ffb347 45%,#ff6a1a 75%,transparent); filter:drop-shadow(0 0 10px #ff9a3c); transition:transform .6s,opacity .6s; }
.cd.lit .wax { opacity:1; }
.cd.lit .flame { transform:scale(1); opacity:1; animation:flame 1.6s ease-in-out infinite alternate; }
@keyframes flame { 0% { transform:scale(1) rotate(-2deg); } 50% { transform:scale(1.08,.94) rotate(2deg); } 100% { transform:scale(.94,1.06) rotate(-1deg); } }
@media (prefers-reduced-motion:reduce) { .rose, .shaft, .dust, .cd.lit .flame { animation:none !important; } .dust { display:none; } .shaft { opacity:.4; } }
@media (max-width:640px) { .pillar { display:none; } .candles { height:96px; } .cd { width:10px; } }

/* ---- Top 8 (reimagined): glitter, a heart cursor, a music box, blinkies, a comment wall, a hit counter ---- */
.glit { position:absolute; left:0; top:0; width:var(--s); height:var(--s); background:var(--gc); opacity:0; animation:twinkle 3s ease-in-out infinite;
        clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%); }


.blinkies { display:flex; flex-wrap:wrap; gap:4px; margin:8px 0; }
.bl { display:inline-block; padding:2px 6px; font:bold 10px Verdana,sans-serif; border:2px outset #fff; color:#000; background:#ffd800; animation:blk 1.6s steps(2) infinite; }
.bl.b1 { background:#ff86bf; } .bl.b2 { background:#b6ff00; animation-delay:.4s; } .bl.b3 { background:#00e5ff; animation-delay:.8s; }
@keyframes blk { 50% { filter:brightness(1.35) saturate(1.3); } }
.player8 .song { color:#b6ff00; margin:2px 0 6px; } .player8 p { margin:2px 0; }
.ptrack { height:8px; border:1px inset #777; background:#222; } .ptrack i { display:block; height:100%; background:repeating-linear-gradient(45deg,#ff2e97 0 6px,#ff86bf 6px 12px); transition:width .6s; }
.ptime { color:#bbb; font-size:10px; }
.wall .cm { display:flex; gap:6px; padding:5px 0; border-bottom:1px dotted #ff2e9788; font-size:11px; line-height:1.35; }
.wall .cm:last-child { border-bottom:0; } .cav { width:26px; height:26px; flex:none; display:grid; place-items:center; border:2px solid #b6ff00; background:#222; font-size:14px; }
.wall small { color:#999; } .wall b { color:#ff2e97; } .cm.new { animation:cmpop .6s ease-out; } .cm-empty { color:#999; }
@keyframes cmpop { from { opacity:0; transform:translateY(-8px) scale(.96); background:#ff2e9733; } to { opacity:1; transform:none; background:transparent; } }
.odo { display:inline-flex; gap:2px; vertical-align:middle; } .odo i { font:bold 13px "Courier New",monospace; font-style:normal; padding:1px 4px; background:#000; color:#b6ff00; border:1px solid #555; }
.toast8 { position:fixed; right:16px; bottom:16px; z-index:120; padding:8px 14px; border:2px solid #fff; background:#ff2e97; color:#fff; font:bold 13px "Comic Sans MS",cursive; box-shadow:4px 4px 0 #000; animation:toastin .35s ease-out, toastout .4s 2.8s ease-in forwards; }
@keyframes toastin { from { transform:translateY(20px) rotate(-4deg); opacity:0; } to { transform:none; opacity:1; } } @keyframes toastout { to { opacity:0; transform:translateY(10px); } }
@media (prefers-reduced-motion:reduce) { .bl, .cm.new, .toast8 { animation:none !important; } .glit { display:none; } }

/* ===== K + R: two lovers letters in every theme (built by fxLove in themes.js) ===== */
#kr { position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:0; }
/* the K♥R badge lives in its own layer (#kr-pin, no stacking of its own) so it stays on top even where a page lifts its content above the floaters */
#kr .kr-f { position:absolute; top:100%; white-space:nowrap; color:var(--krc,#ff7ac6); font-family:var(--krf,inherit); text-shadow:var(--krs,none); opacity:0;
  animation:var(--kra,krrise) 24s linear infinite; }
#kr-pin .kr-badge { position:fixed; right:14px; left:auto; bottom:14px; appearance:none; -webkit-appearance:none; margin:0; z-index:5; pointer-events:auto; display:flex; align-items:center; gap:3px; padding:5px 10px; cursor:pointer; user-select:none;
  border-radius:var(--krbr,999px); background:var(--krbg,rgba(0,0,0,.35)); border:var(--krbd,1px solid currentColor); color:var(--krc,#ff7ac6); font:700 15px/1 var(--krf,inherit); box-shadow:var(--krbs,none); }
#kr-pin .kr-k, #kr-pin .kr-r { display:inline-block; transition:transform .35s cubic-bezier(.3,1.6,.5,1); }
#kr-pin .kr-badge:hover .kr-k { transform:translateX(3px) rotate(8deg); }
#kr-pin .kr-badge:hover .kr-r { transform:translateX(-3px) rotate(-8deg); }
#kr-pin .kr-h { color:var(--krh,#ff4f8b); animation:krbeat 1.6s ease-in-out infinite; }
#kr-pin .kr-b { position:absolute; left:50%; top:50%; pointer-events:none; animation:krburst .9s ease-out forwards; }
@keyframes krrise { 0%{transform:translate3d(0,0,0) rotate(-6deg);opacity:0} 10%{opacity:var(--kro,.5)} 50%{transform:translate3d(26px,-55vh,0) rotate(6deg)} 90%{opacity:var(--kro,.5)} 100%{transform:translate3d(-12px,-112vh,0) rotate(-6deg);opacity:0} }
@keyframes krfall { 0%{top:-6%;transform:translate3d(0,0,0) rotate(0);opacity:0} 10%{opacity:var(--kro,.5)} 50%{transform:translate3d(40px,0,0) rotate(180deg)} 90%{opacity:var(--kro,.5)} 100%{top:104%;transform:translate3d(-20px,0,0) rotate(360deg);opacity:0} }
@keyframes krrain { 0%{top:-6%;opacity:0} 8%{opacity:var(--kro,.5)} 92%{opacity:var(--kro,.5)} 100%{top:104%;opacity:0} }
@keyframes krtwinkle { 0%,100%{opacity:0;transform:scale(.8)} 50%{opacity:var(--kro,.6);transform:scale(1.1)} }
@keyframes krflick { 0%{transform:translate3d(0,0,0);opacity:0} 10%{opacity:.6} 20%{opacity:.25} 30%{opacity:.6} 50%{transform:translate3d(18px,-55vh,0);opacity:.35} 70%{opacity:.6} 100%{transform:translate3d(-8px,-112vh,0);opacity:0} }
@keyframes krbeat { 0%,100%{transform:scale(1)} 15%{transform:scale(1.35)} 30%{transform:scale(1)} 45%{transform:scale(1.2)} }
@keyframes krburst { 0%{transform:translate(-50%,-50%) scale(.4);opacity:1} 100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.3);opacity:0} }
@keyframes krhue { to { filter:hue-rotate(360deg); } }
@keyframes krblink { 50% { opacity:0; } }
@media (prefers-reduced-motion:reduce) { #kr .kr-f { animation:krtwinkle 8s ease-in-out infinite; top:auto; } #kr-pin .kr-h { animation:none; } }
@media (max-width:760px) { #kr-pin .kr-badge { right:8px; left:auto; bottom:8px; font-size:13px; padding:4px 8px; } }

/* the default floater is the mascot (the picture is embedded below by tools/embed-mascot.mjs) */
#kr .kr-pet { position:absolute; width:2.8em; height:auto; image-rendering:pixelated; filter:drop-shadow(0 0 5px var(--krc,#fff)); }
#kr .kr-m { position:absolute; width:2.4em; height:2.4em; filter:drop-shadow(0 0 5px var(--krc,#fff)); }
/* the picture is on ::before so the theme's tint (--mascot-filter) colours only the mascot, not its accessory prop on ::after */
#kr .kr-m::before { content:''; position:absolute; inset:0; background:var(--kr-mascot) center/contain no-repeat; filter:var(--mascot-filter,grayscale(0)); }
#kr .kr-m::after { content:var(--mascot-acc,none); position:absolute; bottom:-14%; right:-18%; font-size:.9em; line-height:1; }
#kr-pin .kr-badge:focus-visible { outline:3px solid var(--krc,#fff); outline-offset:2px; }
/*MASCOT*/ #kr { --kr-mascot:url("data:image/png;base64,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"); } /*END MASCOT*/
/* Twilight (default tokens): soft periwinkle starlight */
:is(#kr, #kr-pin) { --krc:#a9b8ff; --krs:0 0 8px rgba(108,140,255,.55); --kra:krrise; --kro:.5; --krbg:rgba(26,29,39,.8); --krbd:1px solid rgba(108,140,255,.45); --krh:#ff8fb8; }

/* Hollow: embers that flicker as they rise */
[data-theme="hollow"] :is(#kr, #kr-pin) { --krc:#ff9a3c; --krf:Georgia,"Times New Roman",serif; --krs:0 0 10px #ff7a18,0 0 20px #7b2fbf; --kra:krflick; --kro:.6; --krbg:rgba(18,10,5,.85); --krbd:1px solid #7b2fbf; --krh:#ff7a18; --krbs:0 0 14px rgba(123,47,191,.6); }
/* Arcade Carpet: neon arcade lettering */
[data-theme="carpet"] :is(#kr, #kr-pin) { --krc:#19e3d1; --krf:"Arial Black",Impact,sans-serif; --krs:0 0 8px #19e3d1; --kra:krrise; --kro:.7; --krbg:#120a2b; --krbd:2px solid #19e3d1; --krh:#ffd23f; --krbs:3px 3px 0 #ff3fa4; --krbr:2px; }




/* Mainframe: a terminal prompt with a blinking cursor */
[data-theme="mainframe"] :is(#kr, #kr-pin) { --krc:#2cff6d; --krf:ui-monospace,Consolas,"Courier New",monospace; --krs:0 0 6px rgba(44,255,109,.7); --kra:krrain; --kro:.45; --krbg:#020a04; --krbd:1px solid #0f3d1c; --krh:#2cff6d; --krbr:0; }
[data-theme="mainframe"] #kr .kr-f:not(.kr-m)::before, [data-theme="mainframe"] #kr-pin .kr-badge::before { content:"> "; }
[data-theme="mainframe"] #kr-pin .kr-badge::after { content:"_"; animation:krblink 1s steps(2) infinite; }
/* Afterglow: neon sign */
[data-theme="afterglow"] :is(#kr, #kr-pin) { --krc:#ff2d95; --krf:"Trebuchet MS",sans-serif; --krs:0 0 6px #ff2d95,0 0 16px #3ff2ff; --kra:krrise; --kro:.7; --krbg:rgba(40,10,74,.85); --krbd:2px solid #3ff2ff; --krh:#3ff2ff; --krbs:0 0 12px #3ff2ff,inset 0 0 8px #ff2d95; }











/* Petrichor: neon rain, every drop a love note */
[data-theme="petrichor"] :is(#kr, #kr-pin) { --krc:#7fe3ff; --krf:"Trebuchet MS",sans-serif; --krs:0 0 8px #ff4fa3; --kra:krrain; --kro:.6; --krbg:rgba(7,13,26,.85); --krbd:1px solid #ff4fa3; --krh:#ff4fa3; --krbs:0 0 12px rgba(255,79,163,.4); }


/* ---- THEME MASCOTS: every theme gives the site mascot its own tint (--mascot-filter) and a small accessory (--mascot-acc).
   They are used by the header logo, the big hero mascot, the floating mascots and the error pages (site skin.css and the rule above).
   The mascot stays recognisable: same face and shape, only the colour and one small prop change. ---- */
[data-theme="hollow"]    { --mascot-filter:sepia(.8) hue-rotate(335deg) saturate(2.4) brightness(.95); --mascot-acc:"🎃"; }
[data-theme="carpet"]    { --mascot-filter:sepia(.7) hue-rotate(130deg) saturate(3) brightness(.95); --mascot-acc:"🕹️"; }


[data-theme="mainframe"] { --mascot-filter:sepia(1) hue-rotate(70deg) saturate(4) brightness(.9); --mascot-acc:"💾"; }
[data-theme="afterglow"] { --mascot-filter:sepia(.7) hue-rotate(250deg) saturate(3); --mascot-acc:"🕶️"; }





[data-theme="petrichor"] { --mascot-filter:sepia(.6) hue-rotate(300deg) saturate(2.2) brightness(.95); --mascot-acc:"☔"; }