:root{--bg:#0b0a22;--win:#22203f;--win2:#2c2950;--hi:#5b57a0;--lo:#0a0918;--txt:#e6e2ff;--link:#8ec9ff;--vis:#ff9fdc;--t1:#2a1d6e;--t2:#7a4fc2;--font:Tahoma,Verdana,"MS Sans Serif",Geneva,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--txt);font:13px/1.5 var(--font);background:var(--bg);min-height:100vh;padding-bottom:44px;overflow-x:hidden;
background-image:radial-gradient(1px 1px at 20px 30px,#fff,transparent),radial-gradient(1px 1px at 90px 120px,#cfc8ff,transparent),radial-gradient(1.5px 1.5px at 160px 60px,#ffd6f2,transparent),radial-gradient(1px 1px at 230px 170px,#fff,transparent),linear-gradient(180deg,#07061a 0%,#1a1550 55%,#3a2468 100%);
background-size:260px 220px,260px 220px,260px 220px,260px 220px,100% 100%;background-attachment:fixed}
a{color:var(--link)}a:visited{color:var(--vis)}a:hover{color:#fff;text-shadow:0 0 6px #b9a6ff}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;z-index:99;background:#fff;color:#000;padding:4px}
.sky{position:fixed;inset:0;pointer-events:none;z-index:0}
.moon{position:absolute;right:8%;top:6%;width:70px;height:70px;border-radius:50%;box-shadow:-14px 6px 0 0 #fff4c9;filter:drop-shadow(0 0 14px #fff2b066)}
.cloud{position:absolute;width:120px;height:26px;background:#3b3378;opacity:.55;border-radius:20px;image-rendering:pixelated;box-shadow:24px -12px 0 4px #3b3378,60px -6px 0 2px #3b3378}
.c1{left:10%;top:18%}.c2{left:58%;top:42%;transform:scale(1.4)}.c3{left:30%;top:78%}
/* desktop icons */
.icons{position:fixed;left:10px;top:12px;display:flex;flex-direction:column;gap:10px;z-index:2;width:84px}
.icons a{display:flex;flex-direction:column;align-items:center;text-align:center;color:#fff;text-decoration:none;font-size:11px;text-shadow:1px 1px 0 #000;padding:3px}
.icons a:hover,.icons a:focus{background:#3a3a9a88;outline:1px dotted #fff}
.ic{width:34px;height:34px;margin-bottom:3px;image-rendering:pixelated;display:block;position:relative}
.ic-pc{background:linear-gradient(#9aa4ff,#9aa4ff) 5px 4px/24px 17px no-repeat,linear-gradient(#cfcfe6,#cfcfe6) 2px 1px/30px 23px no-repeat,linear-gradient(#cfcfe6,#cfcfe6) 8px 26px/18px 6px no-repeat}
.ic-bot{background:linear-gradient(#ff9fdc,#ff9fdc) 15px 0/4px 6px no-repeat,linear-gradient(#222,#222) 9px 12px/5px 5px no-repeat,linear-gradient(#222,#222) 20px 12px/5px 5px no-repeat,linear-gradient(#c8c2ff,#c8c2ff) 4px 6px/26px 22px no-repeat}
.ic-cd{border-radius:50%;background:radial-gradient(circle,#0b0a22 0 3px,#ddd 4px 7px,transparent 8px),conic-gradient(#ffb3e6,#a6e3ff,#d7b3ff,#fff2a6,#ffb3e6)}
.ic-book{background:linear-gradient(#ff9fdc,#ff9fdc) 6px 3px/22px 28px no-repeat,linear-gradient(#fff,#fff) 10px 8px/14px 3px no-repeat}
.ic-bag{background:linear-gradient(#fff2a6,#fff2a6) 5px 10px/24px 22px no-repeat;border-top:4px solid transparent}
.ic-bag::before{content:"";position:absolute;left:11px;top:2px;width:12px;height:10px;border:3px solid #fff2a6;border-bottom:0;border-radius:6px 6px 0 0}
.ic-globe{border-radius:50%;background:radial-gradient(circle at 35% 35%,#bfe6ff,#3b7bd8 60%,#1b2a7a)}
.ic-globe::after{content:"";position:absolute;inset:10px 6px 12px 12px;background:#6fd28a;border-radius:40% 60% 50% 30%}
.ic-note{background:linear-gradient(#ffffe0,#ffffe0) 6px 2px/22px 30px no-repeat;box-shadow:inset 0 0 0 0}
.ic-note::after{content:"";position:absolute;left:10px;top:9px;width:14px;height:14px;background:repeating-linear-gradient(#7a7aa8 0 1px,transparent 1px 5px)}
/* windows */
.desk{position:relative;z-index:1;display:grid;grid-template-columns:repeat(12,1fr);gap:18px;padding:20px 20px 20px 110px;max-width:1400px;margin:0 auto}
.win{background:var(--win);border:2px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi);box-shadow:inset 1px 1px 0 #7c78c8,inset -1px -1px 0 #15132c,0 0 22px #6b4fd04d,4px 4px 0 #00000066;padding:2px;align-self:start}
.tb{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(90deg,var(--t1),var(--t2) 70%,#c06fc8);color:#fff;font-weight:bold;padding:3px 3px 3px 6px;font-size:12px;cursor:move;user-select:none}
.win.inactive .tb{background:linear-gradient(90deg,#34324e,#55527a)}
.tt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btns{display:flex;gap:2px}
.btns b{width:16px;height:14px;font:bold 10px/12px var(--font);text-align:center;background:var(--win2);color:var(--txt);border:1px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi)}
.menu{padding:2px 6px;font-size:12px;border-bottom:1px solid var(--lo)}
.addr{display:flex;gap:6px;align-items:center;padding:3px 6px;font-size:12px}
.addr code{flex:1;background:#0f0e24;border:2px inset #3b3870;padding:1px 4px;font:12px/1.3 "Courier New",monospace;color:#bdb7ff;overflow:hidden;white-space:nowrap}
.go{padding:0 6px;border:1px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi)}
.body{background:#141230;margin:2px;padding:12px 14px;border:2px solid;border-color:var(--lo) var(--hi) var(--hi) var(--lo)}
h1,h2,h3{font-family:"Times New Roman",Times,serif;font-weight:normal;margin:.2em 0 .4em}
h1{font-size:44px;font-style:italic;text-align:center;color:#fff;text-shadow:0 0 8px #ff9fdc,0 0 22px #8c6cff}
h2{font-size:24px;color:#ffd6f2;text-shadow:0 0 6px #b06cff88}
h2::before{content:"♡ ";color:var(--vis);font-size:.8em}
h3{font-size:19px;color:#cfe8ff;display:flex;align-items:center;gap:6px}
.sp{color:#fff2a6}
.tag{text-align:center;font-family:"Comic Sans MS","Comic Neue",cursive;color:#ffbfe9;margin:0}
.lead{text-align:center;max-width:52ch;margin:8px auto}
.w-home{grid-column:1/8}.w-bots{grid-column:8/13;grid-row:span 2}.w-music{grid-column:1/5}.w-scifi{grid-column:5/8}.w-merch{grid-column:8/13}.w-links{grid-column:1/7}.w-gb{grid-column:7/13}
.err{position:absolute;z-index:5;left:46%;top:330px;width:290px;transform:rotate(-1.5deg)}
.err .body{display:block}.x{display:inline-block;width:22px;height:22px;border-radius:50%;background:#d8304a;color:#fff;text-align:center;font-weight:bold;line-height:22px;margin-right:6px;box-shadow:0 0 8px #ff5a7a}
.eb{text-align:right;margin:6px 0 0}
.marq{overflow:hidden;background:#0a0920;border:1px solid #3b3870;color:#fff2a6;font-size:12px;white-space:nowrap;margin-bottom:8px}
.mt{display:inline-flex;animation:mq 30s linear infinite}@keyframes mq{to{transform:translateX(-50%)}}
.badges{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:10px 0}
.b88{width:88px;height:31px;font:bold 8px/1.15 Verdana,sans-serif;display:flex;align-items:center;justify-content:center;text-align:center;border:1px solid #fff;background:linear-gradient(#3a2f8a,#160f45);color:#fff}
.b88:nth-child(2){background:linear-gradient(#a33f8f,#4a1450)}.b88:nth-child(3){background:#000;color:#9fe0ff}.b88:nth-child(4){background:linear-gradient(#2d6a5a,#0c2a26)}.b88:nth-child(5){background:repeating-linear-gradient(45deg,#2a2060 0 4px,#3a2c80 4px 8px)}
.uc{text-align:center;font-size:11px;color:#fff2a6;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.stripe{width:40px;height:10px;background:repeating-linear-gradient(45deg,#fff2a6 0 5px,#111 5px 10px)}
.load{display:flex;gap:8px;align-items:center;font-size:11px;justify-content:center}
.bar{width:180px;height:14px;border:2px inset #3b3870;background:#0a0920;padding:1px}
.bar i{display:block;height:100%;width:60%;background:repeating-linear-gradient(90deg,#8c7bff 0 8px,transparent 8px 10px);animation:ld 4s steps(18) infinite}@keyframes ld{from{width:0}to{width:100%}}
.cards{display:grid;gap:10px}
.card{background:#1c1a3d;border:1px dotted #6a64b8;padding:8px 10px}
.card p{margin:.3em 0}.sub{font-style:italic;color:#bdb3ff;font-size:12px}
.fi{width:16px;height:13px;background:#fff2a6;display:inline-block;clip-path:polygon(0 15%,40% 15%,50% 0,100% 0,100% 100%,0 100%)}
.btn{display:inline-block;padding:3px 12px;background:var(--win2);color:var(--txt)!important;text-decoration:none;border:2px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi);font:12px var(--font)}
.btn:hover{background:#3a3670;text-shadow:none}.btn:active{border-color:var(--lo) var(--hi) var(--hi) var(--lo)}
.btn:focus-visible{outline:1px dotted #fff;outline-offset:-4px}
.btn.disabled{color:#8a86b0!important;text-shadow:1px 1px 0 #000;cursor:not-allowed}
.soon{font-size:11px;color:#ffbfe9;font-family:"Comic Sans MS","Comic Neue",cursive}
.status{display:flex;gap:4px;margin-top:10px;font-size:11px}.status span{flex:1;border:1px inset #3b3870;padding:0 4px}
.disc{float:right;width:64px;height:64px;border-radius:50%;margin:0 0 6px 8px;background:radial-gradient(circle,#141230 0 6px,#ccc 7px 11px,transparent 12px),conic-gradient(#ffb3e6,#a6e3ff,#d7b3ff,#fff2a6,#ffb3e6);animation:spin 6s linear infinite;box-shadow:0 0 12px #a6e3ff66}@keyframes spin{to{transform:rotate(1turn)}}
.eq{clear:both;display:flex;gap:3px;align-items:flex-end;height:22px;margin-top:10px}.eq i{width:8px;background:#8ec9ff;animation:eq 1s steps(4) infinite alternate}.eq i:nth-child(odd){background:#ff9fdc;animation-duration:.7s}@keyframes eq{from{height:4px}to{height:22px}}
.linklist{border-collapse:collapse;width:100%}.linklist td{border:1px solid #4a4590;padding:4px 8px}.linklist td:first-child{width:28px;color:#fff2a6;text-align:center}
.ring{text-align:center;font-size:11px;margin:10px 0 0;color:#bdb3ff}
.note{font-size:11px;color:#bdb3ff}
.gb{background:#ffffe014;border:1px dashed #6a64b8;padding:4px 10px;font-family:"Comic Sans MS","Comic Neue",cursive}.gb b{color:#ffbfe9}
.counter{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px;font-size:11px}.digits{font:bold 16px "Courier New",monospace;background:#000;color:#9fffb0;padding:1px 6px;letter-spacing:3px;border:2px inset #444}.counter small{color:#8a86b0}
footer{position:relative;z-index:1;text-align:center;font-size:12px;padding:10px}.tiny{font-size:10px;color:#a9a2e0;margin:0}
.taskbar{position:fixed;left:0;right:0;bottom:0;height:34px;z-index:10;display:flex;align-items:center;gap:6px;padding:3px;background:#1d1b3a;border-top:2px solid #5b57a0;box-shadow:0 -4px 16px #6b4fd033;font-size:12px}
.start{display:flex;align-items:center;gap:5px;font-weight:bold;font-style:italic;padding:2px 12px 2px 8px;background:linear-gradient(#5a3fb0,#2c1d6e);color:#fff;border-radius:0 12px 12px 0;height:100%}
.flag{width:14px;height:14px;background:conic-gradient(#ff9fdc 0 25%,#8ec9ff 0 50%,#fff2a6 0 75%,#b49cff 0);transform:skewY(-8deg)}
.tasks{display:flex;gap:4px;flex:1;overflow:hidden}.tasks span{padding:3px 10px;border:2px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi);background:var(--win2);white-space:nowrap;max-width:160px;overflow:hidden;text-overflow:ellipsis}
.tray{padding:3px 10px;border:1px inset #3b3870;white-space:nowrap}
.spk{position:fixed;pointer-events:none;color:#fff;z-index:20;font-size:12px;animation:fade 1s forwards;text-shadow:0 0 6px #ff9fdc}@keyframes fade{to{opacity:0;transform:translateY(14px) scale(.4)}}
.dragging{opacity:.92;z-index:30!important}
@media (max-width:900px){
 .icons{position:static;flex-direction:row;flex-wrap:wrap;width:auto;justify-content:center;padding:10px 6px 0;gap:4px}
 .icons a{width:74px}
 .desk{display:flex;flex-direction:column;padding:12px 10px}
 .err{position:relative;left:auto;top:auto;width:auto;transform:none;order:3}
 #home{order:1}#bots{order:2}#music{order:4}#scifi{order:5}#merch{order:6}#links{order:7}#guestbook{order:8}
 h1{font-size:34px}.moon{width:48px;height:48px}
 .tasks span:nth-child(2){display:none}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}.bar i{width:60%}}
.win{min-width:0;max-width:100%}.marq{max-width:100%;contain:inline-size}
.w-home{grid-row:1}.w-bots{grid-row:1/3}.w-music,.w-scifi{grid-row:2/4}.w-merch{grid-row:3}.w-links,.w-gb{grid-row:4}
.err{left:auto;right:3%;top:-14px;width:260px;transform:rotate(2deg)}
@media (max-width:900px){.err{right:auto;top:auto;transform:none}}
@media (min-width:901px){.err{right:auto;left:30%;top:505px}}
