:root{
  --void:#050505;--acid:#c8ff00;--acid-hot:#eaff66;--magenta:#ff2bd6;--cyan:#00f0ff;
  --ink:#f2ffe6;--muted:#8a8a8a;--yellow:#ffe600;
  --mono:"Lucida Console","Courier New",monospace;
  --font:"Tahoma","Segoe UI",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%;background:var(--void);color:var(--ink);font-family:var(--font)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.wipe{position:fixed;inset:0;z-index:100;pointer-events:none!important;opacity:0;background:#050505;transition:opacity .22s ease}
.wipe.on{opacity:1;pointer-events:none!important}

.xp-desktop{position:relative;min-height:100dvh;overflow:hidden;padding-bottom:clamp(2.6rem,4.2vw,3.2rem)}
.xp-wallpaper{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 35%,rgba(200,255,0,.08),transparent 60%),
    linear-gradient(180deg,#0a1a08 0%,#06100a 40%,#050505 100%);
}
.xp-noise{position:absolute;inset:0;opacity:.14;pointer-events:none;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.65'/%3E%3C/svg%3E")}

.xp-icons{position:absolute;z-index:2;top:1rem;left:.75rem;display:flex;flex-direction:column;gap:.85rem;width:5.5rem}
.xp-icon{display:flex;flex-direction:column;align-items:center;gap:.25rem;color:#eaffc8;text-shadow:1px 1px 0 #000;
  font-size:.62rem;letter-spacing:.02em;padding:.25rem;border:1px dotted transparent}
.xp-icon:hover,.xp-icon:focus-visible{background:rgba(200,255,0,.18);border-color:var(--acid);outline:none}
.xp-ico{font-size:1.6rem;line-height:1;filter:drop-shadow(1px 1px 0 #000)}

.xp-float-layer{position:absolute;inset:0;z-index:4;pointer-events:none}
.xp-float-layer .xp-window{pointer-events:auto}

.xp-window{
  position:absolute;z-index:3;width:min(520px,90vw);min-width:260px;min-height:180px;
  background:#d4d0c8;border:2px solid #000;box-shadow:6px 6px 0 rgba(0,0,0,.65);
  display:flex;flex-direction:column;max-height:min(78dvh,560px);
  resize:none;overflow:hidden;
}
.xp-window.xp-browser{position:relative;z-index:3;width:min(820px,92vw);margin:2.2rem auto 4.5rem;left:auto;top:auto;max-height:min(78dvh,640px)}
.xp-window.is-floating{position:absolute;margin:0}
.xp-window.is-min{height:auto!important;min-height:0;max-height:none}
.xp-window.is-min .xp-toolbar,
.xp-window.is-min .xp-address,
.xp-window.is-min .xp-page,
.xp-window.is-min .xp-statusbar,
.xp-window.is-min .xp-resize,
.xp-window.is-min .xp-dropbody{display:none!important}
.xp-window.is-focused{z-index:15;box-shadow:6px 6px 0 rgba(0,0,0,.75),0 0 0 1px var(--acid)}
.xp-window.is-hidden{display:none!important}

.xp-titlebar{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:.2rem .3rem .2rem .45rem;cursor:grab;touch-action:none;flex:0 0 auto;
  background:linear-gradient(90deg,#1a3a1a,#3a6b20 40%,#1a3a1a);
  color:#c8ff00;font-weight:700;font-size:.78rem;letter-spacing:.04em;user-select:none;
}
.xp-window.is-dragging .xp-titlebar{cursor:grabbing}
.xp-winbtns{display:flex;gap:2px}
.xp-wb{width:1.35rem;height:1.1rem;background:#c8c4bc;border:1px solid #000;font-size:.7rem;line-height:1;color:#000}
.xp-close{background:#c44;color:#fff;font-weight:800}
.xp-toolbar{display:flex;gap:.25rem;padding:.25rem .35rem;background:#c8c4bc;border-bottom:1px solid #808080;flex:0 0 auto}
.xp-tool{padding:.15rem .45rem;border:1px solid transparent;font-size:.68rem;color:#111}
.xp-tool:hover{border-color:#000;background:#e8e4dc}
.xp-address{display:flex;align-items:center;gap:.4rem;padding:.25rem .4rem;background:#c8c4bc;border-bottom:1px solid #808080;font-size:.68rem;color:#111;flex:0 0 auto}
.xp-url{flex:1;background:#fff;border:1px solid #808080;padding:.15rem .35rem;font-family:var(--mono);font-size:.62rem;color:#050505}
.xp-go{padding:.15rem .5rem;background:linear-gradient(180deg,#eaff66,#c8ff00);border:1px solid #000;font-weight:800;font-size:.62rem;color:#050505}
.xp-page{flex:1;min-height:0;overflow:auto;background:#0a0a0a;color:var(--ink);padding:.75rem .9rem 1rem}
.xp-page-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.55rem;
  border-bottom:2px solid var(--acid);padding-bottom:.4rem}
.xp-page-head strong{color:var(--acid);letter-spacing:.14em;font-size:1rem}
.xp-page-head nav{display:flex;gap:.75rem;font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;color:var(--muted)}
.xp-page-head a:hover{color:var(--acid)}
.xp-lede{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;color:var(--muted);margin-bottom:.75rem}
.xp-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem}
.xp-card{aspect-ratio:3/4;border:2px solid rgba(200,255,0,.35);display:flex;flex-direction:column;justify-content:flex-end;
  padding:.55rem;box-shadow:3px 3px 0 #000;position:relative;overflow:hidden;cursor:pointer}
.xp-card span{font-family:var(--mono);font-size:.5rem;letter-spacing:.12em;color:rgba(255,255,255,.7)}
.xp-card b{font-size:.85rem;letter-spacing:.06em;color:#fff;text-shadow:2px 2px 0 #000}
.xp-card.c1{background:linear-gradient(160deg,#1a1a1a,#333 40%,#c8ff00 140%)}
.xp-card.c2{background:linear-gradient(160deg,#0a0a0a,#1a0010 50%,#ff2bd6 130%)}
.xp-card.c3{background:linear-gradient(160deg,#050505,#001a22,#00f0ff 140%)}
.xp-card.c4{background:linear-gradient(160deg,#111,#222 45%,#ffe600 130%)}
.xp-card.c5{background:linear-gradient(160deg,#050505,#142200,#c8ff00 125%)}
.xp-card.c6{background:linear-gradient(160deg,#0a0a0a,#2a001a,#ff2bd6 125%)}
.xp-card:hover,.xp-card:focus-visible{border-color:var(--acid);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--magenta);outline:none}
.xp-statusbar{display:flex;justify-content:space-between;padding:.15rem .4rem;background:#c8c4bc;border-top:1px solid #fff;font-size:.58rem;color:#111;flex:0 0 auto}

.xp-dropbody{flex:1;min-height:0;overflow:auto;background:#0a0a0a;color:var(--ink);padding:.85rem}
.xp-dropbody .drop-meta{font-family:var(--mono);font-size:.5rem;letter-spacing:.12em;color:var(--magenta);margin-bottom:.35rem;text-transform:uppercase}
.xp-dropbody h2{font-size:1.15rem;letter-spacing:.06em;color:var(--acid);margin-bottom:.45rem}
.xp-dropbody p{font-size:.85rem;line-height:1.45;color:#ccc}
.xp-dropbody .drop-fake{margin-top:.75rem;padding:.55rem;border:1px dashed rgba(200,255,0,.35);font-family:var(--mono);font-size:.55rem;letter-spacing:.08em;color:var(--muted)}

.xp-resize{position:absolute;right:0;bottom:0;width:14px;height:14px;cursor:nwse-resize;
  background:linear-gradient(135deg,transparent 50%,rgba(0,0,0,.45) 50%);z-index:2}

.xp-taskbar{
  position:fixed;left:0;right:0;bottom:clamp(2.6rem,4.2vw,3.2rem);z-index:6;height:2rem;
  display:flex;align-items:stretch;gap:.35rem;padding:0 .25rem;
  background:linear-gradient(180deg,#2a2a2a,#111);border-top:2px solid var(--acid);
}
.xp-start{
  padding:0 .7rem;margin:.15rem 0;background:linear-gradient(180deg,#5cbf4a,#2f8f2c);
  border:1px solid #0a3a0a;color:#fff;font-weight:800;font-style:italic;letter-spacing:.04em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}
.xp-start:hover{filter:brightness(1.08)}
.xp-tasks{flex:1;display:flex;align-items:center;gap:.25rem;padding:.15rem 0;overflow:auto}
.xp-task{padding:.15rem .6rem;background:rgba(200,255,0,.12);border:1px solid rgba(200,255,0,.35);
  font-size:.62rem;color:var(--acid);max-width:12rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xp-task.is-on{background:rgba(200,255,0,.25);border-color:var(--acid)}
.xp-tray{display:flex;align-items:center;gap:.4rem;padding:0 .55rem;font-family:var(--mono);font-size:.62rem;color:var(--yellow)}

.xp-startmenu{
  position:fixed;left:.25rem;bottom:calc(clamp(2.6rem,4.2vw,3.2rem) + 2.1rem);z-index:8;
  width:min(200px,70vw);background:#111;border:2px solid var(--acid);box-shadow:4px 4px 0 #000;
  display:flex;flex-direction:column;padding:.25rem;
}
.xp-startmenu[hidden]{display:none!important}
.xp-startmenu button{text-align:left;padding:.45rem .55rem;font-family:var(--mono);font-size:.65rem;letter-spacing:.08em;color:var(--acid)}
.xp-startmenu button:hover{background:var(--acid);color:#050505}

.tabtray{position:fixed;left:0;right:0;bottom:0;z-index:5;height:clamp(2.6rem,4.2vw,3.2rem);display:flex;align-items:stretch;gap:1px;background:#000;border-top:2px solid #c8ff00;padding:0 .3rem}
.tab{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;font-family:var(--mono);font-size:clamp(.45rem,.7vw,.55rem);letter-spacing:.08em;color:#8a8a8a;border-left:1px solid rgba(200,255,0,.15);border-right:1px solid rgba(200,255,0,.15)}
.tab-ico{font-size:clamp(.75rem,1.4vw,1rem);line-height:1;color:#c8ff00}
.tab:hover{background:rgba(200,255,0,.12);color:#c8ff00}
.tab.is-on{background:#c8ff00;color:#050505}
.tab.is-on .tab-ico{color:#050505}
.tab.spacer{flex:1.4 1 0;pointer-events:none;border:0}
@media(max-width:560px){
  .xp-gallery{grid-template-columns:1fr 1fr}
  .xp-icons{display:none}
  .tab span:not(.tab-ico){display:none}.tab{flex-direction:row;gap:.35rem}
}

/* y2k19 — TEST ITEM ★ + gallery polish */
.xp-icon.is-test{color:var(--yellow);border-color:rgba(255,230,0,.45);background:rgba(255,230,0,.08);
  animation:testPulse 1.4s ease-in-out infinite alternate}
.xp-icon.is-test .xp-ico{color:var(--yellow);filter:drop-shadow(0 0 6px rgba(255,230,0,.55))}
.xp-card.is-test,.xp-card.c-test{
  border-color:var(--yellow);box-shadow:3px 3px 0 var(--magenta),0 0 12px rgba(255,230,0,.35);
  background:linear-gradient(160deg,#1a1400 10%,#3a2a00 50%,#ffe600 120%);
  animation:testPulse 1.4s ease-in-out infinite alternate;grid-column:span 1}
.xp-card.is-test i,.xp-card.c-test i{font-style:normal;font-family:var(--mono);font-size:.48rem;letter-spacing:.1em;color:rgba(5,5,5,.85);margin-top:.15rem}
@keyframes testPulse{from{filter:brightness(1)}to{filter:brightness(1.12)}}
.xp-gallery{grid-template-columns:repeat(3,1fr)}
@media(min-width:720px){.xp-gallery{grid-template-columns:repeat(4,1fr)}.xp-card.is-test,.xp-card.c-test{grid-column:span 1}}


/* y2k20 float fix */
.xp-float-layer{z-index:30;pointer-events:none}
.xp-float-layer .xp-window{pointer-events:auto}
.xp-window.is-floating{
  position:fixed!important;z-index:60!important;margin:0!important;
  box-shadow:8px 8px 0 #000,0 0 0 2px var(--acid,#c8ff00);
}