html,body,#root{height:100%;margin:0;overflow:hidden}
body{font-family:Tahoma,"Segoe UI",Verdana,sans-serif;font-size:12px;user-select:none}
input,textarea{user-select:text}
.boot{position:fixed;inset:0;background:#000;color:#ccc}
.bios{font-family:'VT323',monospace;font-size:20px;padding:20px}
.xp-logo{display:flex;gap:12px;align-items:center;color:#fff;font-size:22px;line-height:1}
.xp-logo b{font-size:42px;font-style:italic}
.xp-logo sup{color:#f60;font-size:18px}
.flag,.flag-mini{display:grid;grid-template-columns:1fr 1fr;gap:3px;transform:skewY(-6deg)}
.flag{width:56px;height:56px}
.flag i,.flag-mini i{display:block;border-radius:3px}
.flag i:nth-child(1),.flag-mini i:nth-child(1){background:#f35325}
.flag i:nth-child(2),.flag-mini i:nth-child(2){background:#81bc06}
.flag i:nth-child(3),.flag-mini i:nth-child(3){background:#05a6f0}
.flag i:nth-child(4),.flag-mini i:nth-child(4){background:#ffba08}
.xp-loader{width:150px;height:16px;border:2px solid #b2b2b2;border-radius:4px;overflow:hidden;padding:2px}
.blocks{display:flex;gap:2px;animation:slide 1.6s linear infinite}
.blocks i{width:8px;height:8px;background:linear-gradient(#2838c7,#7fa0ff,#2838c7);display:block}
@keyframes slide{from{transform:translateX(-40px)}to{transform:translateX(160px)}}
.welcome{position:fixed;inset:0;display:flex;flex-direction:column;background:#5a7edc}
.w-top,.w-bot{height:12%;background:#003399}
.w-top{border-bottom:2px solid #f9a15a}
.w-bot{border-top:2px solid #6c8fdd;display:flex;align-items:center;padding:0 30px;color:#fff;font-size:14px}
.w-mid{flex:1;display:flex;align-items:center;justify-content:center;gap:30px;background:radial-gradient(circle at 20% 20%,#94b6f7,#5a7edc 50%);color:#fff;flex-wrap:wrap;padding:10px}
.w-logo{font-size:40px;font-weight:bold;font-style:italic}
.w-logo sup{color:#f60;font-size:18px}
.w-sep{width:2px;height:200px;background:linear-gradient(transparent,#fff,transparent)}
.user-tile{display:flex;align-items:center;gap:12px;padding:10px 20px;border-radius:8px;cursor:pointer;font-size:20px;transition:.2s}
.user-tile:hover{background:#00309c}
.avatar{width:56px;height:56px;border:3px solid #fff;border-radius:6px;background:#fc6;display:flex;align-items:center;justify-content:center;font-size:30px}
.avatar.small{width:40px;height:40px;font-size:22px}
.desktop{position:fixed;inset:0;background:linear-gradient(#245edb 0%,#5b8ff2 35%,#a9cbf7 60%);overflow:hidden}
.desktop.grayed>*:not(.shut-dlg){filter:grayscale(1)}
.bliss-hill{position:absolute;left:-20%;right:-20%;bottom:-45%;height:95%;border-radius:50% 50% 0 0;background:radial-gradient(ellipse at 40% 20%,#7ec850,#3d8b1e 55%,#2a6b12);pointer-events:none}
.cloud{position:absolute;background:#fff;opacity:.7;border-radius:100px;filter:blur(10px);pointer-events:none;animation:drift 80s linear infinite}
.c1{width:300px;height:60px;top:10%;left:10%}.c2{width:220px;height:40px;top:22%;left:60%;animation-duration:120s}
@keyframes drift{from{transform:translateX(-30vw)}to{transform:translateX(110vw)}}
.d-icon{position:absolute;width:78px;display:flex;flex-direction:column;align-items:center;text-align:center;color:#fff;text-shadow:1px 1px 2px #000;cursor:default;padding:2px;touch-action:none}
.d-icon span{font-size:11px;line-height:1.2;padding:1px 2px}
.d-icon.sel span{background:#316ac5}
.xp-window{position:absolute;flex-direction:column;background:#ece9d8;border:3px solid #0831d9;border-top:0;border-radius:8px 8px 0 0;box-shadow:2px 4px 14px rgba(0,0,0,.5);overflow:hidden}
.xp-title{height:28px;flex-shrink:0;background:linear-gradient(#0997ff,#0053ee 8%,#0050ee 40%,#06f 88%,#06f 93%,#005bff 95%,#003dd7 96%);color:#fff;font-family:Trebuchet MS,Tahoma;font-weight:bold;font-size:13px;display:flex;align-items:center;justify-content:space-between;padding:0 4px 0 8px;text-shadow:1px 1px #0f1089;touch-action:none;cursor:move}
.tb-btn{width:21px;height:21px;border:1px solid #fff;border-radius:3px;background:linear-gradient(#3c8cfe,#2663de);color:#fff;font-size:11px;font-weight:bold;line-height:1}
.tb-close{background:linear-gradient(#e97c5a,#c3401f)}
.resize-h{position:absolute;right:0;bottom:0;width:14px;height:14px;cursor:nwse-resize;background:linear-gradient(135deg,transparent 50%,#999 50%,transparent 60%,#999 70%,transparent 80%);touch-action:none}
.xp-btn{background:linear-gradient(#fff,#ece9d8 85%,#d6d0c5);border:1px solid #003c74;border-radius:3px;padding:2px 8px;font-size:11px;font-family:Tahoma}
.xp-btn:hover{box-shadow:inset 0 0 0 2px #f8b33a}
.xp-btn:disabled{color:#888;border-color:#aaa}
.xp-input{border:1px solid #7f9db9;padding:2px 4px;font-size:12px;background:#fff}
.taskbar{position:absolute;left:0;right:0;bottom:0;height:34px;background:linear-gradient(#1f2f86 0,#3168d5 3%,#4993e6 6%,#2157d7 10%,#2663e0 90%,#1941a5);display:flex;align-items:center;z-index:1000}
.start-btn{height:100%;padding:0 18px 0 10px;background:linear-gradient(#3c9a3c,#2d8a2d 20%,#3ca03c 80%,#1e6b1e);color:#fff;font-style:italic;font-weight:bold;font-size:19px;border-radius:0 12px 12px 0;display:flex;align-items:center;gap:6px;text-shadow:1px 1px 2px #000;font-family:Trebuchet MS}
.flag-mini{width:18px;height:18px;gap:1px}
.task-btn{max-width:160px;height:24px;flex-shrink:1;min-width:40px;background:#3c81f3;color:#fff;border-radius:3px;padding:0 8px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:1px solid #1d4cc2}
.task-btn.on{background:#1e52b7;box-shadow:inset 1px 1px 3px #000}
.tray{height:100%;background:linear-gradient(#0c59b9,#139ee9 10%,#18b5f2 15%,#139beb 80%,#1290e8);border-left:1px solid #092e6b;display:flex;align-items:center;gap:8px;padding:0 10px;color:#fff;font-size:11px;white-space:nowrap}
.cpu{width:8px;height:18px;background:#022;border:1px solid #9cf;display:flex;align-items:flex-end}
.cpu i{width:100%;background:#3f3;display:block;transition:height .8s}
.remix{color:#fff;text-decoration:underline;font-size:10px}
.start-menu{position:absolute;bottom:34px;left:0;width:min(400px,100vw);border-radius:8px 8px 0 0;overflow:hidden;box-shadow:3px 0 10px rgba(0,0,0,.5);z-index:1001;background:#fff;border:1px solid #0b4bc4}
.sm-head{background:linear-gradient(#1868ce,#0e60cb 15%,#3e8ce6);color:#fff;font-weight:bold;font-size:15px;display:flex;align-items:center;gap:10px;padding:8px;text-shadow:1px 1px #000}
.sm-left{flex:1;padding:4px}
.sm-right{width:45%;background:#d3e5fa;border-left:1px solid #95bdee;padding:4px}
.sm-item{display:flex;align-items:center;gap:6px;padding:5px;font-size:11px;cursor:pointer;border-radius:2px}
.sm-item.r{color:#0a246a;font-weight:bold}
.sm-item:hover{background:#316ac5;color:#fff}
.sm-foot{background:linear-gradient(#3e8ce6,#1868ce);display:flex;justify-content:flex-end;gap:10px;padding:6px;color:#fff}
.sm-foot button{color:#fff;font-size:11px}
.ctx-menu{position:fixed;background:#fff;border:1px solid #aca899;box-shadow:2px 2px 4px rgba(0,0,0,.4);z-index:2000;padding:2px;min-width:170px}
.ctx-item{padding:4px 18px;font-size:11px;cursor:pointer}
.ctx-item:hover{background:#316ac5;color:#fff}
.err-dialog{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(320px,92%);background:#ece9d8;border:3px solid #0831d9;border-top:0;border-radius:8px 8px 0 0;box-shadow:3px 3px 12px rgba(0,0,0,.5);z-index:50;font-size:12px}
.xp-title-mini{background:linear-gradient(#0997ff,#0053ee 20%,#06f);color:#fff;font-weight:bold;padding:5px 8px;border-radius:5px 5px 0 0}
.drop{border:2px dashed #7f9db9;background:#fff;padding:14px;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;border-radius:4px}
.drop.drag{background:#dce9ff;border-color:#0053ee}
.console{background:#000;color:#c0c0c0;font-family:'VT323',monospace;font-size:15px;padding:6px;min-height:80px}
.hourglass{display:inline-block;animation:dance .6s ease-in-out infinite alternate}
@keyframes dance{from{transform:rotate(-30deg) translateY(0)}to{transform:rotate(30deg) translateY(-8px)}}
.ms-cell{width:24px;height:24px;border:3px outset #fff;background:#c0c0c0;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:13px;cursor:pointer}
.ms-open{border:1px solid #888}
.tab{padding:3px 10px;background:#f4f3ee;border:1px solid #919b9c;border-bottom:0;border-radius:3px 3px 0 0;font-size:11px}
.tab-on{background:#fff;border-top:2px solid #f8b33a}
.store-card{border:1px solid #d0d0bf;border-radius:4px;padding:6px;background:linear-gradient(#fff,#f3f3ee)}
.pixel{image-rendering:pixelated}
.progress{height:14px;border:1px solid #888;background:#fff;padding:1px}
.progress div{height:100%;background:repeating-linear-gradient(90deg,#2bbd2b 0 8px,transparent 8px 10px)}
.flying{font-size:22px;position:relative}
.paper{display:inline-block;animation:fly 1s linear infinite}
@keyframes fly{0%{transform:translate(-30px,0)}50%{transform:translate(0,-12px)}100%{transform:translate(30px,0)}}
.wmp{background:linear-gradient(#26407a,#0d1f4a);border-radius:0}
.chan{color:#bcd3ff;padding:3px 4px;cursor:pointer;border-radius:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chan:hover,.chan-on{background:#4a6fc4;color:#fff}
.winamp{background:linear-gradient(#3a3a52,#1d1d2b);font-family:'Pixelify Sans',monospace}
.lcd,.lcd-box{background:#000;border:2px inset #555}
.lcd{color:#0f0;font-family:'VT323',monospace;font-size:18px;padding:4px;white-space:nowrap;display:flex;align-items:center}
.marquee{display:inline-block;animation:marq 9s linear infinite;padding-left:100%}
@keyframes marq{to{transform:translateX(-100%)}}
.wa-btn{background:linear-gradient(#d8d8e8,#8a8aa0);border:1px solid #222;width:28px;height:20px;font-size:11px;display:inline-flex;align-items:center;justify-content:center}
.eq{background:#111;padding:4px;border:1px solid #444}
.eq-s{writing-mode:vertical-lr;direction:rtl;height:50px;width:12px;accent-color:#0f0}
.playlist{background:#000;color:#0f0;font-family:'VT323',monospace;font-size:15px;padding:4px;border:2px inset #555}
.chrome-skin{background:linear-gradient(#7ea6e0,#c6d8f2)}
.ch-tab{background:#f2f6fc;padding:4px 14px;border-radius:6px 6px 0 0;font-size:11px;max-width:160px;overflow:hidden;white-space:nowrap}
.ff-skin{background:linear-gradient(#f2f2ef,#d6d3c8)}
.portal-logo{font-family:'Pixelify Sans';font-size:34px;font-weight:700;background:linear-gradient(90deg,#f35325,#ffba08,#81bc06,#05a6f0);-webkit-background-clip:text;color:transparent}
.clippy{position:absolute;right:14px;bottom:44px;z-index:900;display:flex;flex-direction:column;align-items:flex-end;max-width:240px}
.bubble{background:#ffffe1;border:1px solid #000;border-radius:10px;padding:8px;font-size:11px;box-shadow:2px 2px 4px rgba(0,0,0,.3)}
.wine-glass{font-size:44px;animation:bob 2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-6px) rotate(6deg)}}
.shut-dlg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(320px,92%);background:#5a7edc;border:1px solid #fff;z-index:3000;border-radius:4px;overflow:hidden}
.shut-head{background:#003399;color:#fff;padding:10px;font-size:16px}
@media(max-width:700px){.remix{display:none}.tray{gap:4px;padding:0 6px}.start-btn{font-size:16px;padding:0 12px 0 8px}.wmp{flex-direction:column}.wmp>div:first-child{width:100%;max-height:45%}}