/* CloseEase desktop styles (Classic 98 look). themes.css adds the XP and Now looks. */
:root{
  --face:#c0c0c0; --hi:#ffffff; --lo:#808080; --dk:#0a0a0a;
  --title1:#021E59; --title2:#2f5cc4; --titleOff1:#5a5a5a; --titleOff2:#787878;
  --desk:#021E59; --accent:#E2B740; --text:#000;
  --font:"MS Sans Serif","Microsoft Sans Serif",Tahoma,Geneva,Verdana,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
/* Safari hides typed text in fields whose ancestors turn off text selection, so fields always allow it */
input,textarea,select,[contenteditable]{-webkit-user-select:text;user-select:text}
html,body{margin:0;height:100%;overflow:hidden;font-family:var(--font);font-size:12px;color:var(--text);user-select:none;-webkit-font-smoothing:none}
body{background:#00287f} /* the welcome screen's navy, so nothing flashes black before it appears */
button{font-family:inherit;font-size:12px}
img{image-rendering:pixelated}

/* ---------- bevels ---------- */
.raised{background:var(--face);box-shadow:inset -1px -1px var(--dk),inset 1px 1px var(--hi),inset -2px -2px var(--lo),inset 2px 2px #dfdfdf}
.sunken{background:#fff;box-shadow:inset -1px -1px var(--hi),inset 1px 1px var(--lo),inset -2px -2px #dfdfdf,inset 2px 2px var(--dk)}
.btn{background:var(--face);border:none;padding:4px 12px;min-width:75px;min-height:23px;cursor:pointer;
  box-shadow:inset -1px -1px var(--dk),inset 1px 1px var(--hi),inset -2px -2px var(--lo),inset 2px 2px #dfdfdf}
.btn:active,.btn.on{box-shadow:inset -1px -1px var(--hi),inset 1px 1px var(--dk),inset -2px -2px #dfdfdf,inset 2px 2px var(--lo);padding:5px 11px 3px 13px}
.btn:focus-visible{outline:1px dotted #000;outline-offset:-5px}
input[type=text],input[type=email],textarea,select{font-family:inherit;font-size:12px;border:none;padding:3px 4px;background:#fff;
  box-shadow:inset -1px -1px var(--hi),inset 1px 1px var(--lo),inset -2px -2px #dfdfdf,inset 2px 2px var(--dk);outline:none}

/* ---------- boot: the welcome screen (styled in themes.css) ---------- */

/* ---------- desktop ---------- */
#desktop{position:fixed;inset:0 0 30px 0;background:var(--desk);overflow:hidden;transition:background .4s}
#desktop.bg-clouds{background:linear-gradient(#5aa0e6,#a9d3ff 55%,#e8f4ff)}
#desktop.bg-tiles{background:#3a6ea5 repeating-conic-gradient(#3a6ea5 0 25%,#2f5f93 0 50%) 0 0/32px 32px}
#desktop.bg-sunset{background:linear-gradient(#2b1055,#7597de 30%,#ff9a8b 70%,#ffd27f)}
#desktop.bg-grid{background:#0b0b2a;background-image:linear-gradient(#ff00ff55 1px,transparent 1px),linear-gradient(90deg,#00ffff55 1px,transparent 1px);background-size:40px 40px}
#desktop.bg-keys{background:#1f4d3a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='none' stroke='%23ffffff22' stroke-width='3'%3E%3Ccircle cx='18' cy='18' r='7'/%3E%3Cpath d='M24 24l18 18m-6-6l5-5m-1 11l5-5'/%3E%3C/g%3E%3C/svg%3E")}
#desktop.bg-plain{background:#008080}
#desktop.bg-gold{background:#021E59 radial-gradient(circle at 50% 120%,#E2B74055,transparent 60%)}

.icons{position:absolute;inset:0}
.icon{position:absolute;width:92px;padding:4px 2px;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:default;text-align:center}
.icon .ico{width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:30px;line-height:1;filter:drop-shadow(1px 1px 0 #0005)}
.icon .lbl{color:#fff;padding:1px 3px;line-height:1.2;font-size:12px;text-shadow:1px 1px 0 #000a;overflow-wrap:break-word}
.icon.sel .lbl{background:var(--title1);outline:1px dotted #fff;text-shadow:none}
.icon.sel .ico{filter:drop-shadow(1px 1px 0 #0005) brightness(.6) sepia(1) hue-rotate(190deg) saturate(4)}
#marquee{position:absolute;border:1px dotted #fff;background:#ffffff18;display:none;pointer-events:none}

/* ---------- windows ---------- */
.win{position:absolute;display:flex;flex-direction:column;min-width:220px;min-height:120px;padding:3px;
  background:var(--face);box-shadow:inset -1px -1px var(--dk),inset 1px 1px #dfdfdf,inset -2px -2px var(--lo),inset 2px 2px var(--hi)}
.win.opening{animation:winOpen .18s steps(4) both}
.win.closing{animation:winOpen .14s steps(3) reverse both}
@keyframes winOpen{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
.win.max{left:0!important;top:0!important;width:100%!important;height:100%!important}
.win.min{display:none}
.titlebar{height:20px;display:flex;align-items:center;gap:4px;padding:0 2px 0 3px;color:#fff;font-weight:bold;
  background:linear-gradient(90deg,var(--titleOff1),var(--titleOff2));cursor:default;flex:none}
.win.active .titlebar{background:linear-gradient(90deg,var(--title1),var(--title2))}
.titlebar .ti{font-size:14px;line-height:1}
.titlebar .tt{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.titlebar .tb{width:16px;height:14px;padding:0;min-width:0;min-height:0;font-size:9px;line-height:1;font-weight:bold;color:#000;display:flex;align-items:center;justify-content:center}
.titlebar .tb:active{padding:1px 0 0 1px}
.titlebar .tb.x{margin-left:2px}
.menubar{display:flex;gap:2px;padding:2px 0;flex:none}
.menubar span{padding:2px 6px}
.menubar span:hover{background:var(--title1);color:#fff}
.menubar u{text-decoration:underline}
.wbody{flex:1;overflow:auto;margin-top:2px;position:relative}
.wbody.pad{padding:10px 12px;background:#fff;box-shadow:inset -1px -1px var(--hi),inset 1px 1px var(--lo),inset -2px -2px #dfdfdf,inset 2px 2px var(--dk)}
.wbody.flat{background:var(--face)}
.statusbar{display:flex;gap:2px;margin-top:2px;flex:none}
.statusbar div{flex:1;padding:2px 4px;box-shadow:inset -1px -1px var(--hi),inset 1px 1px var(--lo);white-space:nowrap;overflow:hidden}
.grip{position:absolute;right:2px;bottom:2px;width:13px;height:13px;cursor:nwse-resize;
  background:linear-gradient(135deg,transparent 0 45%,var(--lo) 45% 52%,var(--hi) 52% 60%,transparent 60% 68%,var(--lo) 68% 75%,var(--hi) 75% 83%,transparent 83%)}
.wbody h2{margin:0 0 6px;font-size:18px}
.wbody h3{margin:12px 0 4px;font-size:13px}
.wbody p{margin:0 0 8px;line-height:1.45}
.wbody a{color:#0000ee}
.ph{background:#fff3a6;border:1px dashed #b38f00;padding:0 3px}

/* explorer-style folder view */
.folder{display:flex;flex-wrap:wrap;gap:8px;padding:8px;align-content:flex-start}
.folder .icon{position:static}
.folder .icon .lbl{color:#000;text-shadow:none}
.folder .icon.sel .lbl{color:#fff}

/* ---------- taskbar ---------- */
#taskbar{position:fixed;left:0;right:0;bottom:0;height:30px;z-index:5000;display:flex;align-items:center;gap:4px;padding:2px;
  background:var(--face);box-shadow:inset 0 1px #dfdfdf,inset 0 2px var(--hi)}
#startBtn{display:flex;align-items:center;gap:4px;font-weight:bold;min-width:0;padding:3px 6px;height:24px}
#startBtn .flag{color:#c00;font-size:14px}
#tasks{flex:1;display:flex;gap:3px;overflow:hidden;height:100%;padding-left:3px;border-left:1px solid var(--lo);box-shadow:-1px 0 var(--hi) inset}
.task{height:24px;min-width:0;width:160px;max-width:160px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:3px 6px}
.task.on{font-weight:bold;background:repeating-conic-gradient(#c0c0c0 0 25%,#fff 0 50%) 0 0/2px 2px}
@keyframes blink{50%{opacity:.35}}
#tray{height:24px;display:flex;align-items:center;gap:6px;padding:0 8px;box-shadow:inset -1px -1px var(--hi),inset 1px 1px var(--lo)}
#tray .tic{cursor:pointer}

/* ---------- start menu ---------- */
#startMenu{position:fixed;left:2px;bottom:28px;z-index:6000;display:none;padding:3px;width:240px;
  box-shadow:inset -1px -1px var(--dk),inset 1px 1px #dfdfdf,inset -2px -2px var(--lo),inset 2px 2px var(--hi);background:var(--face)}
#startMenu.open{display:flex;animation:slideUp .12s steps(3)}
@keyframes slideUp{from{transform:translateY(30px);clip-path:inset(0 0 100% 0)}to{transform:none;clip-path:inset(0)}}
#startMenu .side{width:24px;background:linear-gradient(#021E59,#2f5cc4);color:#fff;writing-mode:vertical-rl;transform:rotate(180deg);
  font-weight:bold;font-size:16px;padding:8px 0;letter-spacing:1px;white-space:nowrap}
#startMenu .side b{color:var(--accent)}
#startMenu ul{list-style:none;margin:0;padding:0;flex:1}
#startMenu li{display:flex;align-items:center;gap:8px;padding:4px 6px 4px 6px;cursor:default}
#startMenu li .mi{width:22px;text-align:center;font-size:17px}
#startMenu li:hover{background:var(--title1);color:#fff}
#startMenu hr{border:none;border-top:1px solid var(--lo);border-bottom:1px solid var(--hi);margin:3px 2px}

/* ---------- tip / dialogs ---------- */
.tipbox{display:flex;gap:12px}
.tipbox .bulb{font-size:34px}
.tipbox .tiptext{flex:1;background:#ffffe1;padding:10px;min-height:80px;line-height:1.5;box-shadow:inset 1px 1px var(--lo),inset -1px -1px var(--hi)}
.dlg-row{display:flex;justify-content:flex-end;gap:6px;margin-top:10px}
.progress{height:20px;padding:3px}
.progress i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,#021E59 0 9px,transparent 9px 11px)}

/* ---------- full-screen overlays ---------- */
.overlay{position:fixed;inset:0;z-index:8000;display:none}
.overlay.show{display:block}
#sleep{background:#000;cursor:none}
#sleep canvas{position:absolute;inset:0}
#sleep .msg{position:absolute;bottom:30px;width:100%;text-align:center;color:#555;font-size:13px}
#sleep.show .msg{animation:ss-msg 6s forwards}@keyframes ss-msg{0%,70%{opacity:1}100%{opacity:0}}
#shutdown{background:#000;color:#ff8c00;display:none;align-items:center;justify-content:center;flex-direction:column;font-size:28px;text-align:center}
#shutdown.show{display:flex}
#shutdown a,#restartLink{color:#aaa;font-size:14px;margin-top:30px;cursor:pointer;text-decoration:underline}
#restartLink{background:none;border:0;font-family:inherit}
#shutdown .sd-sub a{color:#ffb347;font-size:inherit;margin:0}
#vortex{background:#000;overflow:hidden}
#vortex canvas{position:absolute;inset:0}
#vortex .hud{position:absolute;left:0;right:0;top:40%;text-align:center;color:#fff;font-family:"Courier New",monospace;text-shadow:0 0 12px #0ff}
#vortex .hud .vt{font-size:46px;font-weight:700;margin:0;font-family:var(--font);letter-spacing:2px}
#vortex .hud p{opacity:.8}
#vortex .gauges{position:absolute;bottom:40px;left:0;right:0;display:flex;justify-content:center;gap:40px}
#vortex .gauge{background:#111;border:2px solid #444;padding:8px 16px;color:#ff3b3b;font-family:"Courier New",monospace;font-size:24px;text-align:center;box-shadow:0 0 18px #f003}
#vortex .gauge small{display:block;color:#aaa;font-size:11px;letter-spacing:2px}

/* ---------- app specifics ---------- */
.work-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.doc{font-family:"Times New Roman",serif;font-size:14px;max-width:560px;margin:0 auto;background:#fff;padding:30px 40px;box-shadow:2px 2px 0 #0003;min-height:100%}
.doc h1{font-size:24px;margin:0 0 8px}
.ruler{height:18px;background:#fff;border-bottom:1px solid var(--lo);background-image:repeating-linear-gradient(90deg,#000 0 1px,transparent 1px 10px);background-size:10px 4px;background-repeat:repeat-x;background-position:0 bottom}
.toolbar{display:flex;gap:2px;padding:2px;flex:none;flex-wrap:wrap}
.toolbar .btn{min-width:24px;padding:2px 6px;min-height:22px}

.paint{display:flex;height:100%;gap:4px}
.paint .tools{display:grid;grid-template-columns:repeat(2,26px);gap:2px;align-content:start}
.paint .tools .btn{min-width:0;width:26px;height:26px;padding:0;font-size:14px}
.paint .canvaswrap{flex:1;overflow:auto;background:#808080;padding:4px;box-shadow:inset 1px 1px var(--dk),inset -1px -1px var(--hi)}
.paint canvas{background:#fff;display:block;cursor:crosshair}
.palette{display:flex;flex-wrap:wrap;gap:2px;width:250px}
.palette i{width:16px;height:16px;border:1px solid #000;box-shadow:inset 1px 1px #fff8;cursor:pointer}
.curcolor{width:30px;height:30px;border:1px solid #000;margin-right:6px}


.mines{display:inline-block;padding:6px}
.mines .hdr{display:flex;justify-content:space-between;align-items:center;padding:4px 6px;margin-bottom:6px}
.lcd{background:#000;color:#f00;font-family:"Courier New",monospace;font-weight:bold;font-size:20px;padding:0 3px;min-width:44px;text-align:right;letter-spacing:1px}
.mines .face{min-width:0;width:28px;height:28px;padding:0;font-size:16px}
.mines .grid{display:grid;padding:3px}
.cell{width:18px;height:18px;font-size:12px;font-weight:bold;display:flex;align-items:center;justify-content:center;background:var(--face);
  box-shadow:inset -1px -1px var(--dk),inset 1px 1px var(--hi),inset -2px -2px var(--lo),inset 2px 2px #dfdfdf;cursor:default}
.cell.open{box-shadow:inset 1px 1px var(--lo);background:var(--face)}
.cell.boom{background:#f00}
.n1{color:#00f}.n2{color:#080}.n3{color:#f00}.n4{color:#008}.n5{color:#800}.n6{color:#088}.n7{color:#000}.n8{color:#808080}

.gamebox{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px}
.gamebox canvas{background:#000;box-shadow:inset 1px 1px var(--dk)}
.ttt{display:grid;grid-template-columns:repeat(3,64px);gap:4px}
.ttt .btn{width:64px;height:64px;min-width:0;font-size:30px;font-weight:bold;padding:0}

.im{display:flex;flex-direction:column;height:100%}
.im .buddies{flex:1;overflow:auto;background:#fff;padding:4px}
.im .grp{font-weight:bold;margin:4px 0 2px}
.im .bud{padding:2px 12px;cursor:pointer}
.im .bud:hover{background:var(--title1);color:#fff}
.im .bud.away{color:#888;font-style:italic}
.chat{display:flex;flex-direction:column;height:100%;gap:4px}
.chat .log{flex:1;overflow:auto;background:#fff;padding:6px;line-height:1.5;font-family:Arial,sans-serif;font-size:13px;user-select:text}
.chat .log .me b{color:#c00}.chat .log .them b{color:#00c}
.chat .send{display:flex;gap:4px}
.chat .send input{flex:1}

.bgpick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.bgpick .sw{height:60px;border:2px solid #000;cursor:pointer}
.bgpick .sw.cur{outline:2px dashed var(--title1);outline-offset:2px}
.monitor{width:200px;height:150px;margin:0 auto 10px;border:10px solid var(--face);box-shadow:0 0 0 1px #000,inset 0 0 0 1px #000;position:relative}
.monitor:after{content:"";position:absolute;left:50%;bottom:-34px;width:80px;height:22px;transform:translateX(-50%);background:var(--face);border:1px solid #000}

.player{display:flex;flex-direction:column;gap:6px;height:100%}
.player .viz{height:60px;background:#000;display:flex;align-items:flex-end;gap:2px;padding:4px}
.player .viz i{flex:1;background:linear-gradient(#f00,#ff0 40%,#0f0);height:5%}
.player .tracks{flex:1;overflow:auto;background:#fff}
.player .tracks div{display:grid;grid-template-columns:1fr 70px 40px;padding:2px 6px;cursor:pointer}
.player .tracks div:nth-child(odd){background:#eef}
.player .tracks div.cur{background:var(--title1);color:#fff}
.player .ctl{display:flex;gap:4px;align-items:center}
.player .ctl .btn{min-width:32px;padding:3px 6px}

.moment{text-align:center;padding:10px}
.moment .big{font-size:60px;margin:6px 0}
.moment h2{font-size:20px}

.crt{background:#000;color:#3f3;font-family:"Courier New",monospace;padding:10px;height:100%;line-height:1.5;user-select:text}

.brandlogo{width:152px;height:96px;margin-bottom:14px;box-shadow:0 0 0 2px #E2B740}
.desk-logo{width:64px;height:64px;margin-bottom:8px;box-shadow:3px 3px 0 #0006}
#startBtn img{width:16px;height:16px}

/* pinball side panel */
.pb-panel{flex:1;display:flex;flex-direction:column;gap:8px;padding:10px;background:linear-gradient(#2a2f45,#0d1020);color:#fff}
.pb-badge{display:flex;gap:8px;align-items:center;font-weight:bold;font-size:13px;letter-spacing:1px;padding-bottom:8px;border-bottom:2px groove #6a7090}
.pb-badge b{color:var(--accent);font-size:16px}
.pb-seg{background:#050505;padding:6px 8px}
.pb-seg label{font-size:10px;color:#8a90b0;letter-spacing:2px}
.seg{position:relative;overflow:hidden;font-family:"Courier New",monospace;font-weight:bold;font-size:20px;text-align:right;height:30px;line-height:30px;letter-spacing:1px}
.seg.sm{font-size:16px}
.seg s{position:absolute;right:0;top:0;text-decoration:none;color:#E2B74014}
.seg span{position:relative;color:var(--accent);text-shadow:0 0 6px #E2B740,0 0 14px #E2B74088}
.pb-msg{background:#050505;color:#7cf;font-family:"Courier New",monospace;font-size:12px;min-height:46px;padding:6px;text-shadow:0 0 6px #7cf8}
.pb-keys{margin-top:auto;font-size:11px;color:#9aa0c0;line-height:1.7}

/* ---------- Windows 98 polish (round 2) ---------- */
.icon .ico svg{width:32px;height:32px;display:block}
.titlebar .ti svg,.task svg,#quick svg{width:16px;height:16px;display:block}
.titlebar .ti{display:flex;align-items:center}
.task{display:flex;align-items:center;gap:4px}
#startMenu{width:230px}
#startMenu li{padding:3px 8px 3px 4px;height:32px}
#startMenu li .mi{width:24px;height:24px;display:flex;align-items:center;justify-content:center}
#startMenu li .mi svg{width:24px;height:24px}
#startMenu .side{font-family:Arial,sans-serif;font-size:20px;letter-spacing:0;font-weight:normal;color:#fff;padding:6px 0;background:linear-gradient(#021E59,#1a4db0)}
#startMenu .side b{color:#fff;font-weight:900}
#startBtn{height:22px;padding:2px 5px 2px 3px;gap:3px}
#startBtn svg{display:block}
#startBtn b{font-size:12px}
#quick{display:flex;gap:1px;padding:0 4px;border-left:1px solid var(--lo);box-shadow:inset 1px 0 var(--hi);margin-left:2px;height:22px;align-items:center}
#quick .ql{width:22px;height:22px;border:none;background:none;padding:3px;cursor:pointer}
#quick .ql:hover{box-shadow:inset -1px -1px var(--lo),inset 1px 1px var(--hi)}
#quick .ql:active{box-shadow:inset 1px 1px var(--lo),inset -1px -1px var(--hi)}
#tasks{margin-left:2px}
#tray{height:22px}
.im .buddies{font-size:12px}
.im>div:first-child svg{width:24px;height:24px}

/* welcome video */
.vplayer{display:flex;flex-direction:column;height:100%;gap:4px;padding:4px}
.vscreen{flex:1;position:relative;background:#000;overflow:hidden}
.vscreen video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.vph{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#fff;
  background:radial-gradient(circle at 50% 40%,#0a2f86,#021E59 70%)}
.vph h2{margin:0;font-size:34px;font-style:italic}.vph h2 b{color:var(--accent)}
.vph p{margin:0;opacity:.85}
.vph-bar{width:220px;height:6px;background:#ffffff22;margin-top:10px}.vph-bar i{display:block;height:100%;width:0;background:var(--accent)}
.vsound{position:absolute;right:10px;bottom:10px;min-width:0}
.vend{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#021E59ee;color:#fff}
.vend[hidden]{display:none}
.vend h2{margin:0;font-size:26px}
.vend .vgo{font-weight:bold;padding:8px 18px;min-height:32px}
.vend a{color:#c9d6ff;cursor:pointer;text-decoration:underline}
.vctl{display:flex;gap:3px;align-items:center}
.vctl .btn{min-width:28px;padding:2px 6px;min-height:22px}
.vseek{flex:1;height:14px;padding:3px}.vseek i{display:block;height:100%;width:0;background:var(--title1)}
.vtime{min-width:40px;text-align:right;font-variant-numeric:tabular-nums}

/* CloseEase logon dialog */
.logon{display:flex;flex-direction:column;height:100%}
.logon-banner{display:flex;align-items:center;gap:10px;padding:6px 10px;background:linear-gradient(90deg,#021E59,#2f5cc4);color:#fff}
.logon-banner b{font-size:20px;font-style:italic;display:block}.logon-banner b span{color:var(--accent)}
.logon-banner small{opacity:.8}
.logon-body{display:flex;gap:12px;padding:10px}
.logon-key svg{width:40px;height:40px}
.logon-fields{flex:1;display:grid;grid-template-columns:72px 1fr;gap:6px;align-items:center}
.logon-fields p{grid-column:1/3;margin:0 0 4px}
.logon-links{grid-column:2;display:flex;gap:12px}
.logon-links a{color:#0000ee;text-decoration:underline;cursor:pointer}
.logon-btns{display:flex;flex-direction:column;gap:6px}
.logon-btns .btn{text-align:center;text-decoration:none;color:#000;white-space:nowrap}
.logon-fields .logon-links{grid-column:1/3}
.logon-msg{padding:0 10px;min-height:18px}

/* classic-style wallpapers (original CSS patterns) */
#desktop.bg-clouds,.sw.bg-clouds,.prev.bg-clouds{background:radial-gradient(ellipse 140px 60px at 20% 30%,#fff,transparent 70%),radial-gradient(ellipse 200px 80px at 65% 25%,#ffffffee,transparent 70%),radial-gradient(ellipse 160px 70px at 40% 70%,#fffffff0,transparent 70%),radial-gradient(ellipse 220px 70px at 85% 75%,#ffffffdd,transparent 70%),linear-gradient(#3a7fd8,#7fb4ee)}
#desktop.bg-bricks,.sw.bg-bricks,.prev.bg-bricks{background-color:#8a3a2a;background-image:linear-gradient(#c8b8a0 2px,transparent 2px),linear-gradient(90deg,#c8b8a0 2px,transparent 2px),linear-gradient(90deg,#c8b8a0 2px,transparent 2px);background-size:32px 16px,32px 32px,32px 32px;background-position:0 0,0 0,16px 16px}
#desktop.bg-weave,.sw.bg-weave,.prev.bg-weave{background:repeating-linear-gradient(45deg,#2a4d7a 0 6px,transparent 6px 12px),repeating-linear-gradient(-45deg,#1d3a60 0 6px,#244873 6px 12px)}
#desktop.bg-sand,.sw.bg-sand,.prev.bg-sand{background:#c8b088 radial-gradient(#b89c70 1px,transparent 1.5px) 0 0/6px 6px}
#desktop.bg-space,.sw.bg-space,.prev.bg-space{background:radial-gradient(1px 1px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 70% 80%,#fff,transparent),radial-gradient(1.5px 1.5px at 40% 60%,#fff,transparent),radial-gradient(1px 1px at 85% 20%,#fff,transparent),radial-gradient(circle at 70% 30%,#3d2a8a,#01061c 60%)}
#desktop.bg-plain,.sw.bg-plain,.prev.bg-plain{background:#008080}
#desktop.bg-tiles,.sw.bg-tiles,.prev.bg-tiles{background:#3a6ea5 repeating-conic-gradient(#3a6ea5 0 25%,#2f5f93 0 50%) 0 0/32px 32px}
#desktop.bg-gold,.sw.bg-gold,.prev.bg-gold{background:#021E59 radial-gradient(circle at 50% 120%,#E2B740aa,transparent 60%)}

/* =====================================================================
   Round 3: desktop polish, notifications, sticky note, messenger, mail,
   alerts, scan, games, utilities. Classic 98 look; themes.css restyles.
   ===================================================================== */
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#os{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='19' shape-rendering='crispEdges'%3E%3Cpath d='M0 0v16l4-4 3 7 2-1-3-7h5z' fill='%23000'/%3E%3Cpath d='M1 2v11l3-3 3 7 .5-.3-3-7h4z' fill='%23fff'/%3E%3C/svg%3E") 0 0,default}
body.busy #os,body.busy #os *{cursor:progress!important}
#os a,#os button,#os .icon,#os [role=button],#os summary{cursor:inherit}
#os input,#os textarea{cursor:text}

/* desktop brand mark */
.desk-brand{position:absolute;right:28px;bottom:24px;pointer-events:none;opacity:.9}
.desk-brand img{display:block;height:64px;width:auto;image-rendering:auto;filter:drop-shadow(2px 2px 0 #0006)}
/* Sign in and Sign up in the desktop's top right corner: above the icons, under any open window */
.desk-acct{position:absolute;top:10px;right:12px;z-index:50;display:flex;gap:8px}
.desk-acct a{font:700 13px/1 Tahoma,Verdana,sans-serif;text-decoration:none;padding:7px 15px;border-radius:3px;border:1px solid #003c74;color:#000;background:linear-gradient(180deg,#fff,#ecebe6 86%,#d6d0c5);box-shadow:0 1px 3px #0006;-webkit-font-smoothing:auto}
.desk-acct a:hover{box-shadow:inset -1px 1px #fff0cf,inset 1px 2px #fdd889,inset -2px 2px #fbc761,inset 2px -2px #e5a01a,0 1px 3px #0006}
.desk-acct a:focus-visible{outline:1px dotted #000;outline-offset:-4px}
.desk-acct .da-up{background:linear-gradient(180deg,#F6DA80,#E2B740 78%,#C99A22);border-color:#7a5a08;color:#021E59}
#desktop.refreshing .icons{visibility:hidden}

/* icons */
.icon.dragging{opacity:.65}
.icon:focus{outline:none}
.icon:focus-visible .lbl{outline:1px dotted #fff}
.icon.glow .ico{animation:glow 1.6s ease-in-out infinite}
@keyframes glow{50%{filter:drop-shadow(0 0 6px #ffe680) drop-shadow(0 0 2px #fff)}}
.icon.bounce .ico{animation:bounce .9s ease-in-out 6}
@keyframes bounce{30%{transform:translateY(-10px)}55%{transform:translateY(0)}70%{transform:translateY(-4px)}}
.icons.dance .icon{animation:dance .5s ease-in-out infinite alternate}
.icons.dance .icon:nth-child(2n){animation-delay:.25s}
@keyframes dance{from{transform:rotate(-8deg) translateY(0)}to{transform:rotate(8deg) translateY(-8px)}}
#desktop.gold-mode{background:radial-gradient(circle at 50% 110%,#ffe9a8,#E2B740 35%,#7a5300 80%)!important}
#desktop.gold-mode .icon .lbl{color:#fff6cc}

/* titlebar buttons: drawn glyphs and a bigger invisible hit area */
.titlebar .tb{position:relative}
.titlebar .tb::after{content:"";position:absolute;inset:-4px -2px}
.titlebar .tb i{display:block;width:8px;height:7px;background:center/contain no-repeat}
.titlebar .tb.mn i{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='7' shape-rendering='crispEdges'%3E%3Crect x='1' y='5' width='6' height='2'/%3E%3C/svg%3E")}
.titlebar .tb.mx i{width:9px;height:9px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h9v9H0zM1 2v6h7V2z' fill-rule='evenodd'/%3E%3C/svg%3E")}
.titlebar .tb.x i{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='7' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h2l2 2 2-2h2L5 3.5 8 7H6L4 5 2 7H0l3-3.5z'/%3E%3C/svg%3E")}
.win.moving{will-change:left,top}
.win.shake{animation:shake .7s linear}
@keyframes shake{0%,100%{transform:none}10%,50%,90%{transform:translate(-9px,3px)}30%,70%{transform:translate(9px,-3px)}20%,60%{transform:translate(6px,4px)}40%,80%{transform:translate(-6px,-4px)}}
.win.nudge{transform:translate(2px,-2px)}
.wbody.mono{font-family:"Courier New",monospace;font-size:13px}
.wbody.flat:has(.docwrap),.wbody.flat:has(.mail),.wbody.flat:has(.mailbox),.wbody.flat:has(.br-page){display:flex;flex-direction:column}

/* taskbar extras */
.sflag{width:16px;height:16px;flex:none;background:url(assets/logo.svg) center/contain no-repeat;image-rendering:auto}
.trayb{background:none;border:0;padding:0 2px;font-size:13px;line-height:1;min-width:0;cursor:inherit}
.trayb:focus-visible{outline:1px dotted #000}
/* "Switch to website": the always-visible way from the desktop to the standard site */
.web-switch{flex:none;align-self:center;height:24px;display:inline-flex;align-items:center;gap:6px;margin:0 6px 0 4px;padding:0 12px 0 9px;border:1px solid #8A6A10;border-radius:12px;
  background:linear-gradient(#FBE28E,#F2CC5E 45%,#E2B740 55%,#D7A92E);color:#021E59;font:700 12px/1 Tahoma,Verdana,Segoe UI,sans-serif;white-space:nowrap;cursor:pointer;
  box-shadow:inset 0 1px rgba(255,255,255,.55),0 1px 2px rgba(0,0,0,.35);text-shadow:none}
.web-switch:hover{background:linear-gradient(#FFEBA6,#F5D573 45%,#E8BF4E 55%,#DDB13A)}
.web-switch:active{background:linear-gradient(#D7A92E,#E2B740);box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}
.web-switch:focus-visible{outline:2px solid #fff;outline-offset:2px}
.web-switch svg{flex:none}
#clock{min-width:52px;text-align:right}

/* right-click menu */
.ctx{position:fixed;z-index:6500;list-style:none;margin:0;padding:3px;min-width:180px;background:var(--face);
  box-shadow:inset -1px -1px var(--dk),inset 1px 1px #dfdfdf,inset -2px -2px var(--lo),inset 2px 2px var(--hi)}
.ctx li{padding:4px 20px}
.ctx li:hover{background:var(--title1);color:#fff}
.ctx li.sep{padding:0}.ctx li.sep:hover{background:none}
.ctx hr{border:none;border-top:1px solid var(--lo);border-bottom:1px solid var(--hi);margin:3px 2px}
#startMenu li.sep{height:auto;padding:0}
#startMenu li:focus{outline:none;background:var(--title1);color:#fff}

/* tips and tray notifications */
.balloon{position:fixed;z-index:7000;max-width:220px;background:#ffffe1;border:1px solid #000;border-radius:6px;padding:6px 8px;line-height:1.4;box-shadow:2px 2px 0 #0004;pointer-events:none;animation:fadeIn .2s}
.balloon b{display:block}
#toasts{position:fixed;right:8px;bottom:38px;z-index:5500;display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none}
.toast{pointer-events:auto;position:relative;width:280px;display:flex;gap:10px;padding:10px 26px 10px 10px;background:#ffffe1;border:1px solid #000;border-radius:7px;box-shadow:3px 3px 0 #0004;cursor:pointer;animation:toastIn .3s ease-out}
.toast.out{animation:toastOut .3s ease-in forwards}
.toast .tx{position:absolute;right:4px;top:3px;border:0;background:none;font-size:16px;line-height:1;padding:2px 4px;cursor:inherit}
.toast .tic svg{width:32px;height:32px}
.toast .tbody b{display:block;margin-bottom:2px}
.toast .tbody p{margin:0;line-height:1.4}
@keyframes toastIn{from{transform:translateY(30px);opacity:0}}
@keyframes toastOut{to{transform:translateX(40px);opacity:0}}
@keyframes fadeIn{from{opacity:0}}

/* ---------- sticky note hero ---------- */
.win.sticky,#os .win.sticky{padding:0;border-radius:0;backdrop-filter:none;background:#fff59d;box-shadow:0 1px 0 #e6d36a,4px 6px 14px #0006;transform:rotate(-1.2deg);min-height:0}
.win.sticky.opening{animation:noteIn .35s ease-out both}
@keyframes noteIn{from{transform:rotate(-8deg) scale(.8);opacity:0}}
.win.sticky .wbody{margin:0;background:none;overflow:visible}
.st-top{height:26px;display:flex;align-items:center;justify-content:space-between;padding:0 4px 0 10px;background:#f3e16a;font:12px "Courier New",monospace;color:#6b5a00;cursor:move;touch-action:none}
.st-x{border:0;background:none;font-size:18px;line-height:1;padding:2px 6px;color:#6b5a00;cursor:inherit}
.st-x:hover{color:#000}
.st-body{padding:12px 18px 16px;color:#2a2400}
.st-eyebrow{font:13px "Segoe Print","Bradley Hand","Comic Sans MS",cursive;margin:0 0 6px!important}
.st-body h1{font:700 23px/1.15 Arial,Helvetica,sans-serif;margin:0 0 8px;letter-spacing:-.3px;text-wrap:balance}
.st-body p{font-size:13px;line-height:1.45}
.st-steps{font:700 17px Arial,sans-serif;display:flex;gap:10px}
.st-steps span:nth-child(2){background:#c8ef68;padding:0 4px}
.st-cta{font-weight:bold;min-height:30px;padding:6px 14px;margin-top:4px}
.st-login{display:block;margin-top:8px;color:#4a3f00!important;font-size:12px}

/* ---------- docs, mail, offer ---------- */
.docwrap{flex:1;overflow:auto;background:#808080;padding:12px}
.doc ol,.doc ul{padding-left:22px;line-height:1.5}
.offer-tag{display:inline-block;font:bold 11px "Courier New",monospace;letter-spacing:1px;background:#c8ef68;border:1px solid #000;padding:2px 6px}
.pricetag{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:center;border:2px solid #000;padding:8px 12px;margin:12px 0;background:#fffbe6}
.pricetag span{font:bold 11px "Courier New",monospace;text-transform:uppercase}
.pricetag small{grid-column:1/3;opacity:.8}
.doc-cta{font-weight:bold;min-height:28px}
.mail{display:flex;flex-direction:column;flex:1;gap:4px;padding:2px}
.mail-fields{display:grid;grid-template-columns:62px 1fr;gap:4px 6px;align-items:center;padding:4px}
.mail-fields label{text-align:right}
.mail textarea{flex:1;resize:none;margin:0 4px;font-family:Arial,sans-serif;font-size:13px}
.mail-status{padding:4px 6px;min-height:22px}
.mail .send{font-weight:bold}

/* ---------- messenger ---------- */
.im-head{display:flex;gap:8px;align-items:center;padding:6px 8px;background:linear-gradient(#fff,#dfe8f7);border-bottom:1px solid var(--lo)}
.im-head small{display:block;color:#060}
.im .buddies{margin:4px}
.im .bud{display:grid;grid-template-columns:12px 1fr;column-gap:6px;padding:3px 6px;cursor:inherit}
.im .bud small{grid-column:2;color:#666;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.im .bud:hover small,.im .bud:focus small{color:#ddd}
.im .bud:focus{outline:none;background:var(--title1);color:#fff}
.bud .dot{width:10px;height:10px;border-radius:50%;margin-top:2px;background:radial-gradient(circle at 35% 35%,#9f9,#1a9a1a);box-shadow:0 0 0 1px #0006}
.bud.busy .dot{background:radial-gradient(circle at 35% 35%,#f99,#c11)}
.bud.away .dot{background:radial-gradient(circle at 35% 35%,#ffd27a,#d88a00)}
.im-foot{padding:6px;display:flex;justify-content:center}
.chat{padding:4px}
.chat-to{padding:2px 4px}
.bot-badge{display:inline-block;background:#021E59;color:#fff;font-size:10px;padding:0 5px;border-radius:7px;margin-left:4px;vertical-align:1px}
.chat .log p{margin:0 0 6px 10px}
.typing{min-height:16px;font-style:italic;color:#555;padding:0 4px}
.quick{display:flex;flex-wrap:wrap;gap:3px}
.quick .btn{min-width:0;padding:2px 8px;min-height:20px;font-size:11px}
.chat-foot{display:flex;gap:4px}

/* ---------- inbox ---------- */
.mailbox{flex:1;display:grid;grid-template-columns:230px 1fr;gap:4px;padding:2px;min-height:0}
.mlist{list-style:none;margin:0;padding:2px;overflow:auto}
.mlist li{display:grid;grid-template-columns:1fr auto;padding:4px 6px;border-bottom:1px solid #eee}
.mlist li span{grid-column:1/3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mlist li small{grid-row:1;grid-column:2;color:#666}
.mlist li.unread{font-weight:bold}
.mlist li.unread b::before{content:"✉ ";color:#c80}
.mlist li.sel,.mlist li:focus{outline:none;background:var(--title1);color:#fff}
.mlist li.sel small{color:#ddd}
.mview{overflow:auto;padding:10px 14px;font-family:Arial,sans-serif;font-size:13px;line-height:1.5;user-select:text}
.mview header{border-bottom:1px solid #ccc;padding-bottom:6px;margin-bottom:10px;font-family:var(--font);font-size:12px}

/* ---------- pain-point alerts ---------- */
.win.alert{min-height:0}
.win.alert.opening{animation:alertIn .22s steps(3) both}
@keyframes alertIn{from{transform:scale(.6);opacity:0}}
.alert-body{display:flex;gap:12px;align-items:flex-start;padding:12px 12px 4px}
.alert-body p{margin:4px 0 0;line-height:1.4}
.aico{flex:none;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;font:bold 18px Arial,sans-serif;color:#fff;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff8a8a,#c00 70%);box-shadow:1px 1px 0 #0005}
.aico.warn{border-radius:0;color:#000;background:none;width:32px;height:30px;padding-top:8px;clip-path:polygon(50% 0,100% 100%,0 100%);background:linear-gradient(#fff36b,#e6b800)}
.aico.ok{background:radial-gradient(circle at 35% 30%,#8f8,#080 70%)}
.win.alert .dlg-row{padding:0 10px 10px}
.scan-list .aico{width:18px;height:18px;font-size:11px;vertical-align:middle}
.scan-list .aico.warn{height:16px;padding-top:4px}

/* ---------- CloseEase Scan ---------- */
.scan{display:flex;flex-direction:column;gap:6px;padding:8px;height:100%}
.scan-head{display:flex;gap:10px;align-items:center;padding:8px;background:linear-gradient(90deg,#021E59,#2f5cc4);color:#fff}
.scan-head small{display:block;opacity:.8}
.scan-stage{display:flex;flex-direction:column}
.scan-list{flex:1;list-style:none;margin:0;padding:6px;overflow:auto;line-height:1.7}
.scan-list li.ok{color:#060;text-decoration:line-through}
.scan-note{font-size:11px;color:#444;margin:0}
.scan-cta{font-weight:bold}

/* ---------- games ---------- */
.ghead{display:flex;justify-content:space-between;width:400px;font-weight:bold}
.gamebox .msg{color:#333}
.mines-lv{display:flex;gap:4px;padding:4px}
.btn.sm{min-width:0;padding:2px 8px;min-height:21px}
.mines .hdr{background:var(--face)}
.mines-help{margin:2px 8px;color:#444}
.pb-wrap{display:flex;gap:6px;padding:6px;height:100%}
.pb-cv{background:#000;box-shadow:inset 1px 1px #000;touch-action:none}
.pb-mission{background:#050505;padding:6px 8px;display:flex;flex-direction:column;gap:2px}
.pb-mission label{font-size:10px;color:#8a90b0;letter-spacing:2px}
.pb-mission b{color:#7f7;font-family:"Courier New",monospace;font-size:15px;text-shadow:0 0 6px #7f78}
.pb-mission span{font-size:11px;color:#ccd;line-height:1.35}
.pm-bar{height:6px;background:#222;margin-top:3px}.pm-bar i{display:block;height:100%;width:0;background:#7f7;transition:width .2s}
.hof{display:flex;flex-direction:column;height:100%;padding:6px;gap:6px}
.hof-tabs{display:flex;gap:2px;flex-wrap:wrap}
.hof-tabs button{border:0;background:var(--face);padding:3px 8px;box-shadow:inset -1px 0 var(--dk),inset 1px 1px var(--hi);cursor:inherit}
.hof-tabs button.on{font-weight:bold;background:#fff}
.hof-board{flex:1;overflow:auto;background:#000!important;color:#fff;padding:10px 14px;font-family:"Courier New",monospace}
.hof-board h2{margin:0;text-align:center;color:var(--accent);font-size:22px;letter-spacing:3px;text-shadow:0 0 8px #E2B74088}
.hof-sub{text-align:center;color:#8af;margin:2px 0 8px!important}
.hof-board table{width:100%;border-collapse:collapse;font-size:14px}
.hof-board th{color:#8a90b0;font-size:11px;text-align:left;padding:2px 4px}
.hof-board td{padding:3px 4px}
.hof-board tr:nth-child(1) td{color:var(--accent)}
.hof-board tr.me td{color:#7f7;animation:blink 1s steps(2) 6}
@keyframes blink{50%{opacity:.35}}
.hof-foot{display:flex;justify-content:space-between;align-items:center}
.wbody.hs{display:flex;flex-direction:column;gap:10px}
.hs-big{font-size:16px}
.hs-form{display:flex;gap:8px;align-items:center}
.hs-in{width:96px;font:bold 26px "Courier New",monospace!important;text-transform:uppercase;letter-spacing:6px;text-align:center}
.hs-card{width:100%;height:auto;border:1px solid #000;display:block}
.hs-btns{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
.hs-msg{min-height:16px;margin-top:4px!important;user-select:text}
.hs-prize{border:2px dashed #c80;background:#fffbe6;padding:8px 10px}
.hs-prize p{margin:4px 0 6px!important}
.sol-bar{display:flex;gap:4px;align-items:center;padding:3px}
.sol-st{margin-left:auto;padding:0 6px;white-space:pre}
.wbody.flat:has(.sol-table){display:flex;flex-direction:column}
.sol-table{flex:1;position:relative;background:#0b7a2a radial-gradient(circle at 50% 30%,#14963a,#0b6a24 80%);min-height:calc(100% - 30px);overflow:hidden;touch-action:none}
.sol-table .slot{position:absolute;width:71px;height:96px;border:1px solid #0a4a18;border-radius:4px;box-shadow:inset 0 0 0 1px #3fbf64}
.sol-table .found-slot::after{content:"A";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#3fbf6488;font:bold 30px Arial}
.sol-table .stock-slot::after{content:"↻";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#3fbf64;font:bold 30px Arial}
.pc{position:absolute;width:71px;height:96px;background:#fff;border:1px solid #000;border-radius:4px;color:#000;font-family:Arial,sans-serif;touch-action:none}
.pc.red{color:#c00}
.pc .cr{position:absolute;left:4px;top:3px;font:bold 13px/1.05 Arial;font-style:normal;text-align:center}
.pc .cr.br{left:auto;top:auto;right:4px;bottom:3px;transform:rotate(180deg)}
.pc .cc{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:normal}
.pc .cc.face{font:bold 30px Georgia,serif;flex-direction:column;line-height:1}
.pc .cc small{font-size:16px}
.pc.back{background:#021E59 url(assets/logo.svg) center/44px no-repeat;border:3px solid #fff;outline:1px solid #000;outline-offset:-1px;box-shadow:inset 0 0 0 2px #E2B740}
.pc.back>*{display:none}
.pc.lift{box-shadow:3px 4px 0 #0005}
.sol-fx{position:absolute;inset:0;z-index:2000}

/* ---------- utilities ---------- */
.gb{border:1px solid var(--lo);box-shadow:1px 1px var(--hi);padding:8px 10px;margin:0 0 10px}
.gb legend{padding:0 4px}
.chk{display:flex;gap:6px;align-items:center;margin:4px 0}
.note{font-size:11px;color:#444}
.s-list{list-style:none;margin:0 0 6px;padding:2px;height:150px;overflow:auto}
.s-list li{padding:2px 4px}
.s-list li.sel,.s-list li:focus{outline:none;background:var(--title1);color:#fff}
.du{display:flex;flex-direction:column;gap:6px}
.du-top{display:flex;align-items:center;gap:10px;font-size:14px;margin-bottom:4px}
.du-row{display:grid;grid-template-columns:100px 1fr;align-items:center}
.du-st{min-height:16px;margin:4px 0!important;font-weight:bold}
.du-btns{display:flex;gap:6px;justify-content:flex-end}
.np{width:100%;height:100%;resize:none;font:13px "Courier New",monospace;box-shadow:none!important;padding:6px}
.wbody.calc-b{background:var(--face);box-shadow:none;padding:8px}
.calc-d{display:block;text-align:right;font:18px "Courier New",monospace;padding:6px 8px;margin-bottom:8px;overflow:hidden;white-space:nowrap}
.calc-k{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.calc-k .btn{min-width:0;padding:4px 0;min-height:30px}
.calc-k .op,.calc-k [data-k="="]{color:#a00000}
.upd-lead{margin-bottom:10px!important}
.upd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.upd-card{display:flex;flex-direction:column;gap:4px;text-align:left;background:#fff;border:1px solid var(--lo);padding:8px;font:inherit;cursor:inherit}
.upd-card:hover,.upd-card:focus-visible{outline:2px solid var(--title1)}
.upd-card.on{background:#eef3ff}
.upd-card em{font-style:normal;color:#060;font-weight:bold}
.upd-prev{position:relative;height:90px;display:block;border:1px solid #000;overflow:hidden}
.upd-prev .pv-win{position:absolute;left:18%;top:14%;width:58%;height:52%;background:#c0c0c0;border:1px solid #000}
.upd-prev .pv-win i{display:block;height:9px;background:#021E59}
.upd-prev .pv-bar{position:absolute;left:0;right:0;bottom:0;height:12px;background:#c0c0c0;border-top:1px solid #fff}
.upd-prev .pv-bar i{position:absolute;left:2px;top:2px;width:22px;height:8px;background:#c0c0c0;box-shadow:inset -1px -1px #000,inset 1px 1px #fff}
.pv-98{background:#008080}
.pv-xp{background:radial-gradient(ellipse 140% 60% at 30% 120%,#5fb63a 55%,transparent 56%),linear-gradient(#2f7ed8,#9fd0ff)}
.pv-xp .pv-win{background:#ece9d8;border:2px solid #0a40d0;border-radius:4px 4px 0 0}.pv-xp .pv-win i{background:linear-gradient(#3a8cff,#0050e0)}
.pv-xp .pv-bar{background:linear-gradient(#3f8cf3,#245edb);border:0}.pv-xp .pv-bar i{background:#3c9a3c;box-shadow:none;border-radius:0 5px 5px 0;left:0}
.pv-modern{background:radial-gradient(circle at 20% 30%,#AA9BF4,transparent 50%),radial-gradient(circle at 80% 70%,#77D4C7,transparent 50%),#F3F0E8}
.pv-modern .pv-win{background:#ffffffcc;border:1px solid #0002;border-radius:6px}.pv-modern .pv-win i{background:transparent}
.pv-modern .pv-bar{background:#ffffffaa;border-top:1px solid #0001}.pv-modern .pv-bar i{left:44%;width:12%;border-radius:3px;background:#334BEE;box-shadow:none}
.br-bar{display:flex;gap:4px;align-items:center;padding:3px;flex:none}
.br-addr{flex:1;display:flex;gap:4px;align-items:center}
.br-addr input{flex:1}
.br-ext{text-decoration:none;color:#000}
.br-page{flex:1;overflow:auto;margin:0 2px;padding:0;background:#F3F0E8!important;user-select:text}
.bl{max-width:640px;margin:0 auto;padding:22px 26px 40px;font:15px/1.6 "Geist",system-ui,sans-serif;color:#19172C}
.bl h1{font:700 28px/1.15 "Space Grotesk",system-ui,sans-serif;margin:0 0 8px;letter-spacing:-.5px}
.bl h2{font:700 19px/1.2 "Space Grotesk",system-ui,sans-serif;margin:22px 0 6px}
.bl p,.bl li{font-size:15px;line-height:1.6}
.bl a{color:#334BEE}
.bl-sub,.bl .lead{font-size:17px!important}
.bl-item{border-top:2px solid #19172C;padding:12px 0}
.bl-item a{text-decoration:none;color:#19172C}.bl-item a:hover h2{text-decoration:underline}
.bl-item h2{margin:0 0 2px}
.bl-meta,.bl .meta{font:12px "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.5px;margin:0 0 6px!important}
.bl .draft{font:12px "IBM Plex Mono",monospace;background:#fff3a6;border:2px dashed #b38f00;padding:6px 10px}
.bl-cta{margin-top:26px;border:2px solid #19172C;background:#fff;padding:14px;display:flex;flex-direction:column;gap:8px;align-items:flex-start;box-shadow:4px 4px 0 #19172C}
.vph img{image-rendering:auto;margin-bottom:6px}

/* accessibility preferences */
body.bigtext{font-size:14px}
body.bigtext .wbody p,body.bigtext .wbody li{font-size:14px}
body.calm *,body.calm *::before,body.calm *::after{animation:none!important;transition:none!important}
body.calm .win.sticky{transform:none}
@media (prefers-reduced-motion:reduce){
  #os *,#os *::before,#os *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}
  .win.sticky{transform:none}
}

/* touch tablets: dragging windows and icons must not turn into page gestures */
.titlebar,#icons .icon,.grip{touch-action:none}
/* alerts size to their content so the buttons never get cut off (XP and Now looks have taller buttons) */
.win.alert{height:auto!important}
/* the placeholder video now plays a short text explainer */
.vph .vph-line{font:700 17px/1.3 Arial,Helvetica,sans-serif;color:#fff;max-width:26ch;text-align:center;margin:8px 0;min-height:2.6em;text-wrap:balance}
.vph .vph-line b{color:#E2B740}

/* Dual-boot menu ("Please select the operating system to start") */
/* XP edition switch in the tray, and the link in CloseEase Update */
.tray-xp{font:bold 10px/1 Tahoma,Verdana,sans-serif;text-decoration:none;color:inherit;border:1px solid currentColor;border-radius:2px;padding:1px 3px!important;opacity:.85}
.tray-xp:hover{opacity:1}
.upd-xp{margin:-4px 0 12px;font-size:12px}

/* ======================= Messenger (2005-era look, original drawing) ======================= */
.msn,.msn-c{font:12px/1.35 Tahoma,Verdana,"Segoe UI",sans-serif;color:#000}
.im.msn{background:linear-gradient(#e9f1fc,#d3e2f7 60%,#c7d9f3)}
.im.msn .im-head{background:linear-gradient(#fbfdff,#dbe7f8);border-bottom:1px solid #9bb3dc;align-items:flex-start}
.msn-dp{display:block;width:96px;height:96px;padding:3px;border:1px solid #7a96c8;border-radius:6px;background:linear-gradient(#fff,#e3ecfa);box-shadow:0 1px 3px #2f4f8a44;overflow:hidden;cursor:pointer}
.msn-dp svg,.msn-dp img{display:block;width:100%;height:100%;border-radius:3px;object-fit:contain;background:#fff}
.msn-dp.sm{width:52px;height:52px;padding:2px;flex:none}
.im-me{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px;padding-top:4px}
.im-me b{font-size:13px;white-space:nowrap}.im-me .st{font-weight:normal;color:#25600e}
.im .im-pm{width:100%;font-size:11px;color:#555;background:transparent;box-shadow:none;border:1px solid transparent;padding:1px 2px}
.im .im-pm:hover,.im .im-pm:focus{border-color:#9bb3dc;background:#fff}
.im-tabs{display:flex;gap:2px;padding:3px 6px 0}.im-tabs i{width:18px;height:14px;border-radius:3px 3px 0 0;background:linear-gradient(#ffd77a,#e8a800)}.im-tabs i+i{background:linear-gradient(#9fd28a,#3c9a2a)}.im-tabs i+i+i{background:linear-gradient(#a9c3f0,#3f6fc8)}
.im-find{padding:3px 6px}.im-find input{width:100%;font-size:11px}
.im.msn .buddies{margin:0 6px;background:#fff;border:1px solid #9bb3dc;border-radius:4px;padding:3px 2px}
.im.msn .grp{font:bold 12px Tahoma,sans-serif;color:#1c3f94;cursor:pointer;padding:2px 4px;margin:2px 0}
.im.msn .bud{display:grid;grid-template-columns:14px 1fr;column-gap:5px;padding:2px 6px;border-radius:2px;white-space:nowrap}
.im.msn .bud span{overflow:hidden;text-overflow:ellipsis}.im.msn .bud b{font-weight:normal}
.im.msn .bud small{grid-column:auto;color:#666;font-style:italic;font-size:11px}
.im.msn .bud:hover,.im.msn .bud:focus{background:#d6e4fb;color:#000;outline:1px dotted #555}
.im.msn .bud:hover small,.im.msn .bud:focus small{color:#444}
.im.msn .bud.away{color:#5c5c5c;font-style:normal}
.emo-w{display:inline-block;vertical-align:-4px;line-height:0}.emo-w svg,.emo{width:19px;height:19px}
.im-ad{display:block;margin:6px;padding:5px 8px;border:1px solid #c9a400;background:linear-gradient(#fff9cf,#ffe680);color:#000;text-decoration:none;font-size:11px;text-align:center}
.im-ad b{display:block;color:#b01818}.im-ad:hover{outline:1px solid #b01818}
.im.msn .im-foot{padding:2px 6px 6px}

.msn-c{height:100%;display:flex;flex-direction:column;background:linear-gradient(#e9f1fc,#d1e1f6);container-type:inline-size}
.msn-tools{display:flex;gap:1px;padding:3px 6px;background:linear-gradient(#fbfdff,#dbe7f8);border-bottom:1px solid #9bb3dc;overflow:hidden}
.msn-tools button{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:52px;padding:2px 4px;border:1px solid transparent;border-radius:3px;background:none;font:11px Tahoma,sans-serif;color:#1c3f94;cursor:pointer}
.msn-tools button:hover,.msn-tools button:focus-visible{border-color:#9bb3dc;background:linear-gradient(#fff,#e6effc);outline:none}
.msn-to{padding:4px 8px;font-size:12px;color:#333;border-bottom:1px solid #b8cbe8;background:#f4f8fe;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msn-main{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 108px;gap:6px;padding:6px}
.msn-left{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;gap:4px}
.msn-c .log{flex:1;min-height:60px;overflow:auto;background:#fff;border:1px solid #9bb3dc;border-radius:4px;padding:6px 8px;font:13px/1.45 Tahoma,Verdana,sans-serif;user-select:text;-webkit-user-select:text}
.msn-c .m{margin:0 0 6px}.msn-c .who{color:#666;font-size:12px}.msn-c .txt{padding-left:12px;word-wrap:break-word;overflow-wrap:anywhere}
.msn-c .sys{color:#666;font-size:12px;margin:2px 0 8px}
.msn-c .sys.nudge,.msn-c .sys.wink{display:flex;align-items:center;gap:8px;color:#555}
.msn-c .sys.nudge::before,.msn-c .sys.nudge::after,.msn-c .sys.wink::before,.msn-c .sys.wink::after{content:"";flex:1;border-top:1px solid #c8c8c8}
.msn-c .sys.tip{font-size:11px;color:#5c5c5c;border-bottom:1px solid #eee;padding-bottom:4px}
.msn-c .quick{display:flex;flex-wrap:wrap;gap:4px;margin:2px 0 6px 12px}
.msn-c .ql{border:0;background:none;padding:0;color:#0645ad;text-decoration:underline;font:12px Tahoma,sans-serif;cursor:pointer}
.msn-c .ql:hover{color:#c8102e}
.msn-fmt{position:relative;display:flex;align-items:center;gap:2px;padding:2px 2px;background:linear-gradient(#f6f9fe,#dfe9f8);border:1px solid #9bb3dc;border-radius:4px}
.msn-fmt>button{display:flex;align-items:center;gap:1px;height:24px;padding:0 4px;border:1px solid transparent;border-radius:3px;background:none;cursor:pointer;font:inherit}
.msn-fmt>button:hover,.msn-fmt>button:focus-visible{border-color:#7a96c8;background:#fff;outline:none}
.msn-fmt>button i{font-style:normal;font-size:8px;color:#333}
.msn-fmt .f-font b{font:bold 15px "Times New Roman",serif;color:#1c3f94;width:16px;text-align:center}
.msn-send{display:flex;gap:6px;min-height:0}
.msn-c textarea{flex:1;min-width:0;height:64px;resize:none;border:1px solid #9bb3dc;border-radius:4px;box-shadow:none;background:#fff;color:#000;-webkit-text-fill-color:currentColor;opacity:1;padding:4px 6px;font-size:13px;line-height:1.35}
.msn-c textarea:focus{border-color:#4a7bd4;outline:none}
.msn-btns{display:flex;flex-direction:column;gap:4px}.msn-btns .btn{min-width:64px;height:30px}.msn-btns .btn[type=submit]{height:34px;font-weight:bold}
.msn-pics{display:flex;flex-direction:column;justify-content:space-between;gap:6px;min-height:0}
.msn-status{padding:3px 8px;font-size:11px;color:#444;border-top:1px solid #b8cbe8;background:#eef3fb;min-height:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@container (max-width:470px){.msn-main{grid-template-columns:minmax(0,1fr)}.msn-pics{display:none}.msn-tools button span{display:none}.msn-tools button{min-width:34px}}
.msn-pop{position:absolute;left:0;bottom:calc(100% + 4px);z-index:5;background:#fff;border:1px solid #6b85b8;border-radius:4px;box-shadow:2px 3px 8px #0003;padding:6px;font:12px Tahoma,sans-serif}
.msn-pop .pop-h{font-weight:bold;color:#1c3f94;margin:0 0 5px}
.emo-grid{display:grid;grid-template-columns:repeat(9,26px);gap:2px}
.emo-grid button,.wink-grid button{border:1px solid transparent;background:none;padding:2px;border-radius:2px;cursor:pointer;line-height:0}
.emo-grid button:hover,.emo-grid button:focus-visible,.wink-grid button:hover,.wink-grid button:focus-visible{border-color:#316ac5;background:#e6effc;outline:none}
.wink-grid{display:grid;grid-template-columns:repeat(4,78px);gap:4px}
.wink-grid button{display:flex;flex-direction:column;align-items:center;gap:3px;line-height:1.2;font:11px Tahoma,sans-serif;color:#000}
.wink-grid svg{width:60px;height:60px;border:1px solid #9bb3dc;border-radius:3px}
.msn-pop.p-font{display:grid;gap:6px;min-width:220px}
.msn-pop .sw{display:flex;gap:3px}.msn-pop .sw button{width:18px;height:18px;border:1px solid #555;padding:0;cursor:pointer}.msn-pop .sw button.on{outline:2px solid #316ac5;outline-offset:1px}
.msn-pop .pv{border:1px solid #ccc;padding:4px 6px;font-size:13px}
.wink-stage{position:absolute;inset:0;z-index:4;border-radius:4px;overflow:hidden;background:#fff;pointer-events:none;animation:wkIn .2s ease-out}
.wink-stage svg{width:100%;height:100%;display:block}
@keyframes wkIn{from{opacity:0}to{opacity:1}}
.task.flash{animation:taskFlash 1s steps(1) 6 forwards}
@keyframes taskFlash{0%{background:#f7a21b;color:#000}50%{background:inherit}}
/* the messenger "signed in" popup that slides up from the corner */
.toast.msn{width:190px;min-height:112px;flex-direction:column;gap:4px;padding:0 0 8px;border:1px solid #6b85b8;border-radius:3px 3px 0 0;background:linear-gradient(#ffffff,#dce8fa 70%,#c3d6f4);box-shadow:1px 1px 6px #0004;animation:msnUp .5s ease-out}
.toast.msn.out{animation:msnDown .4s ease-in forwards}
.toast.msn .tic{display:none}
.toast.msn .tbody b{display:flex;align-items:center;gap:4px;margin:0;padding:3px 22px 3px 6px;font:11px Tahoma,sans-serif;color:#333;background:linear-gradient(#f4f8fe,#d6e3f7);border-bottom:1px solid #b8cbe8}
.toast.msn .tbody p{display:flex;align-items:center;gap:8px;padding:8px 10px 0;font:12px Tahoma,sans-serif;color:#000}
.toast.msn .tn-dp{flex:none;width:40px;height:40px;border:1px solid #7a96c8;border-radius:4px;background:#fff;padding:2px}.toast.msn .tn-dp img{width:100%;height:100%;object-fit:contain}
.toast.msn .tn-t u{color:#0645ad}
.toast.msn .tx{top:1px;font-size:13px}
@keyframes msnUp{from{transform:translateY(130%)}to{transform:none}}
@keyframes msnDown{to{transform:translateY(130%)}}
[data-theme=xp] .toast.msn,[data-theme=modern] .toast.msn{border-radius:3px 3px 0 0;background:linear-gradient(#ffffff,#dce8fa 70%,#c3d6f4);backdrop-filter:none;border:1px solid #6b85b8}
@media (prefers-reduced-motion:reduce){.toast.msn,.wink-stage{animation:none}}
/* long file names in folder windows wrap inside their own cell instead of running into the next icon */
.folder .icon .lbl{max-width:100%;overflow-wrap:anywhere;word-break:break-word}
.desk-brand img{height:72px;filter:drop-shadow(2px 3px 2px #0007)}

.doc .doc-steps li{margin-bottom:6px}