/* =====================================================================
   WINDOWS XP "LUNA" THEME
   ===================================================================== */
:root{
  --beige:#ece9d8;
  --xp-blue:#0054e3;
  --xp-dark:#0831d9;
  --taskbar-h:30px;
  --font:Tahoma,Verdana,"Segoe UI",Geneva,sans-serif;
  --title-font:"Trebuchet MS",Tahoma,Verdana,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0;overflow:hidden;background:#245edb;color:#000;
  font:11px/1.35 var(--font);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit}
input,textarea{font:inherit}
.i{display:block;flex:none;width:16px;height:16px}
.i16{width:16px;height:16px}.i24{width:24px;height:24px}.i32{width:32px;height:32px}
.i48{width:48px;height:48px}.i64{width:64px;height:64px}
:focus-visible{outline:2px dotted #000;outline-offset:1px}

/* ---------------------------------------------------------------------
   Boot screen
   --------------------------------------------------------------------- */
#boot{position:fixed;inset:0;z-index:300000;background:#000;color:#fff;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:34px;transition:opacity .6s}
#boot.out{opacity:0;pointer-events:none}
.boot-logo{display:flex;align-items:center;gap:16px}
.boot-logo .i64{width:84px;height:84px}
.boot-text{display:flex;flex-direction:column;line-height:1;font-family:var(--title-font)}
.b-ms{font-size:15px;letter-spacing:.04em}
.b-win{font-size:44px;font-weight:700;letter-spacing:-.02em}
.b-win sup{font-size:20px;font-style:italic;color:#ff7a2e;margin-left:3px}
.boot-bar{width:190px;height:16px;border:2px solid #b2b2b2;border-radius:5px;padding:2px;overflow:hidden}
.boot-bar i{display:block;height:100%;width:56px;border-radius:2px;
  background:repeating-linear-gradient(90deg,#2d73ff 0 9px,transparent 9px 12px);animation:bootslide 1.3s linear infinite}
@keyframes bootslide{from{transform:translateX(-60px)}to{transform:translateX(190px)}}
.boot-hint{position:absolute;bottom:26px;margin:0;color:#7d7d7d;font-size:11px}

/* ---------------------------------------------------------------------
   Screen / wallpaper
   --------------------------------------------------------------------- */
#screen{position:fixed;inset:0;overflow:hidden}
#wallpaper{position:absolute;inset:0;overflow:hidden;background:#3d8cea}
#wallpaper>svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.bliss-text{position:absolute;left:0;right:0;bottom:calc(var(--taskbar-h) + 7vh);display:flex;justify-content:center;
  pointer-events:none;perspective:900px}
/* the extrusion is a stack of hard 1px drop-shadows, the transform lays the text on the hill */
.bliss-3d{filter:
  drop-shadow(0 1px 0 #2f7d14) drop-shadow(0 1px 0 #2f7d14) drop-shadow(0 1px 0 #2d7712) drop-shadow(0 1px 0 #2d7712)
  drop-shadow(0 1px 0 #2a7010) drop-shadow(0 1px 0 #2a7010) drop-shadow(0 1px 0 #27690f) drop-shadow(0 1px 0 #27690f)
  drop-shadow(0 1px 0 #24620d) drop-shadow(0 1px 0 #24620d) drop-shadow(0 1px 0 #205a0b) drop-shadow(0 1px 0 #205a0b)
  drop-shadow(0 10px 12px rgba(10,50,0,.45))}
.bliss-3d span{display:block;font:900 clamp(2.2rem,8.4vw,8rem)/1 "Arial Black",Impact,"Segoe UI",sans-serif;letter-spacing:.07em;
  white-space:nowrap;background:linear-gradient(#d9ff9a,#8fdc4a 55%,#6cc236);-webkit-background-clip:text;background-clip:text;
  color:transparent;transform:perspective(900px) rotateX(58deg) scaleY(1.05);transform-origin:50% 100%}

#desktop{position:absolute;left:0;top:0;right:0;bottom:var(--taskbar-h);overflow:hidden}

/* ---------------------------------------------------------------------
   Desktop icons
   --------------------------------------------------------------------- */
#icons{position:absolute;left:8px;top:8px;display:flex;flex-direction:column;gap:8px;z-index:1}
.dicon{width:82px;padding:4px 2px 6px;background:none;border:1px solid transparent;display:flex;flex-direction:column;
  align-items:center;gap:5px;color:#fff;cursor:default;touch-action:manipulation}
.dicon .i{filter:drop-shadow(1px 2px 2px rgba(0,0,0,.55))}
.dlabel{text-align:center;text-shadow:1px 1px 2px #000,0 0 3px rgba(0,0,0,.7);padding:1px 3px;line-height:1.25;font-size:11.5px}
.dicon.sel .dlabel{background:#316ac5;text-shadow:none;outline:1px dotted #fff;outline-offset:-1px}
.dicon.sel .i{filter:drop-shadow(1px 2px 2px rgba(0,0,0,.55)) saturate(.7) brightness(.85)}

/* ---------------------------------------------------------------------
   Windows
   --------------------------------------------------------------------- */
.window{position:absolute;display:flex;flex-direction:column;background:var(--xp-blue);
  border:3px solid var(--xp-blue);border-top:0;border-radius:9px 9px 0 0;
  box-shadow:3px 5px 14px rgba(0,0,0,.5);animation:xpOpen .16s ease-out;min-width:240px;min-height:140px}
.window.hidden{display:none}
.window.closing{opacity:0;transform:scale(.96);transition:opacity .11s,transform .11s;pointer-events:none}
@keyframes xpOpen{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
.window.maximized{left:0!important;top:0!important;width:100%!important;height:100%!important;border-radius:0;border-width:0;box-shadow:none}
.titlebar{display:flex;align-items:center;gap:6px;height:30px;padding:0 5px 0 7px;flex:none;border-radius:8px 8px 0 0;touch-action:none;
  background:linear-gradient(to bottom,#0997ff 0%,#0053ee 8%,#0050ee 40%,#0066ff 88%,#0066ff 93%,#005bff 95%,#003dd7 96%,#003dd7 100%);
  color:#fff;font:700 13px/1 var(--title-font);text-shadow:1px 1px 0 #0f1089}
.window.maximized .titlebar{border-radius:0}
.ttext{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbtns{display:flex;gap:2px}
.tb{width:22px;height:22px;padding:0;display:flex;align-items:center;justify-content:center;border:1px solid #fff;border-radius:3px;
  background:radial-gradient(circle at 30% 25%,#7aa7ff,#2f63e6 60%,#2250cc);cursor:default;box-shadow:inset 0 0 2px rgba(0,0,0,.25)}
.tb:hover{filter:brightness(1.15)}
.tb:active{filter:brightness(.88)}
.tb.tclose{background:radial-gradient(circle at 30% 25%,#f5a58b,#e0522a 60%,#c63a14)}
.window.inactive .titlebar{background:linear-gradient(to bottom,#7a96df 0%,#9db5ee 8%,#7b99e3 40%,#85a1e8 88%,#7b97df 100%);
  color:#d8e2f8;text-shadow:none}
.window.inactive{border-color:#7a96df;background:#7a96df}
.window.inactive .tb{opacity:.8}
.wbody{flex:1;min-height:0;background:var(--beige);position:relative;overflow:hidden}
.rz{position:absolute;z-index:3;touch-action:none}
.rz-n{left:8px;right:8px;top:-3px;height:5px;cursor:n-resize}
.rz-s{left:8px;right:8px;bottom:-3px;height:5px;cursor:s-resize}
.rz-e{top:8px;bottom:8px;right:-3px;width:5px;cursor:e-resize}
.rz-w{top:8px;bottom:8px;left:-3px;width:5px;cursor:w-resize}
.rz-ne{top:-3px;right:-3px;width:9px;height:9px;cursor:ne-resize}
.rz-nw{top:-3px;left:-3px;width:9px;height:9px;cursor:nw-resize}
.rz-se{bottom:-3px;right:-3px;width:11px;height:11px;cursor:se-resize}
.rz-sw{bottom:-3px;left:-3px;width:11px;height:11px;cursor:sw-resize}
.window.maximized .rz{display:none}

/* ---------------------------------------------------------------------
   Shared window parts (menu bar, toolbar, address bar, status bar)
   --------------------------------------------------------------------- */
.app{display:flex;flex-direction:column;height:100%;min-height:0}
.menubar{display:flex;flex:none;background:var(--beige);border-bottom:1px solid #d6d2c2;padding:1px 3px}
.menubar span{padding:2px 7px;cursor:default}
.menubar span:hover{background:#316ac5;color:#fff}
.toolbar{display:flex;flex:none;align-items:center;gap:2px;background:var(--beige);padding:3px 4px;border-bottom:1px solid #aca899;flex-wrap:wrap}
.tsep{width:1px;height:22px;background:#c4c0ae;margin:0 4px;border-right:1px solid #fff}
.tbtn{display:flex;align-items:center;gap:4px;padding:2px 6px;min-height:26px;background:none;border:1px solid transparent;border-radius:3px;cursor:default}
.tbtn:hover:not(:disabled){border-color:#b6b09a;background:linear-gradient(#fff,#ece9d8)}
.tbtn:active:not(:disabled){background:#e0dccb;border-color:#9a947c}
.tbtn:disabled{opacity:.45}
.tbtn.back .i,.tbtn.fwd .i{width:22px;height:22px}
.rot180 .i{transform:rotate(180deg)}
.rotup .i{transform:rotate(-90deg)}
.addr{display:flex;flex:none;align-items:center;gap:6px;padding:3px 6px;background:var(--beige);border-bottom:1px solid #aca899}
.addr label{color:#444}
.ainput{flex:1;min-width:0;display:flex;align-items:center;gap:5px;background:#fff;border:1px solid #7f9db9;height:22px;padding:0 4px}
.ainput input{flex:1;min-width:0;border:0;outline:0;background:none;-webkit-user-select:text;user-select:text}
.gobtn{display:flex;align-items:center;gap:4px;background:none;border:1px solid transparent;border-radius:3px;padding:1px 5px;cursor:default}
.gobtn:hover{border-color:#b6b09a;background:linear-gradient(#fff,#ece9d8)}
.statusbar{flex:none;display:flex;gap:10px;align-items:center;justify-content:space-between;background:var(--beige);border-top:1px solid #aca899;padding:2px 8px;min-height:20px;color:#222}

/* ---------------------------------------------------------------------
   About Me (Explorer)
   --------------------------------------------------------------------- */
.exbody{flex:1;display:flex;min-height:0}
.pane{width:205px;flex:none;overflow:auto;padding:10px;background:linear-gradient(#7ba2e7,#6375d6)}
.pcard{border-radius:6px 6px 0 0;margin-bottom:10px;overflow:hidden;background:#d6dff7;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.pcard h4{margin:0;padding:5px 8px;display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#215dc6;
  background:linear-gradient(to right,#fff,#c6d3f7);cursor:default;font-weight:700}
.pcard h4::after{content:"";width:14px;height:14px;border-radius:50%;background:#fff;border:1px solid #9db7ee;
  background-image:linear-gradient(135deg,transparent 45%,#215dc6 45% 55%,transparent 55%);}
.pcard.closed h4::after{transform:rotate(180deg)}
.pcard.closed .pbody{display:none}
.pbody{padding:8px;display:flex;flex-direction:column;gap:6px;color:#222}
.plink{display:flex;gap:6px;align-items:center;color:#215dc6;background:none;border:0;padding:0;text-align:left;cursor:default}
.plink:hover{color:#428eff;text-decoration:underline}
.pbody b{display:block}
.pbody p{margin:0}
.main{flex:1;min-width:0;overflow:auto;background:#fff;padding:16px 20px;-webkit-user-select:text;user-select:text}
.hero-row{display:flex;gap:14px;align-items:center;margin-bottom:10px}
.bigavatar{width:76px;height:76px;border:2px solid #fff;border-radius:6px;overflow:hidden;box-shadow:0 0 0 1px #8aa3d8,2px 2px 5px rgba(0,0,0,.3);flex:none}
.bigavatar .i{width:100%;height:100%}
.main h1{margin:0;font:700 21px/1.15 var(--title-font);color:#0b2f87}
.main .sub{margin:3px 0 0;color:#555;font-size:12px}
.main p{margin:0 0 9px;font-size:12px;line-height:1.55;max-width:60ch}
.main h3{margin:16px 0 8px;font:700 13px var(--title-font);color:#215dc6;padding-bottom:3px;border-bottom:1px solid #c6d3f7}
.facts{display:grid;grid-template-columns:max-content 1fr;gap:3px 14px;margin:8px 0 4px;font-size:12px}
.facts dt{color:#555}.facts dd{margin:0;font-weight:700}
.tiles{display:flex;flex-wrap:wrap;gap:6px}
.tile{width:104px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:7px 4px;text-align:center;background:none;
  border:1px solid transparent;cursor:default;line-height:1.25;font-size:11.5px}
.tile:hover{background:#e8f0ff;border-color:#b5caf3}
.tile.on{background:#316ac5;color:#fff;border-color:#316ac5}
.fico{position:relative;display:block;width:48px;height:48px}
.fico b{position:absolute;left:0;right:0;top:22px;text-align:center;font:700 9px var(--font);color:#1c4cb0}
.btnrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.xpbtn{min-width:78px;padding:4px 14px;border:1px solid #003c74;border-radius:3px;cursor:default;color:#000;
  background:linear-gradient(#fff,#ecebe5 86%,#d6d0c5);box-shadow:inset 0 0 0 1px #fff}
.xpbtn:hover{box-shadow:inset 0 0 0 2px #f8b636}
.xpbtn:active{background:linear-gradient(#cdcac3,#e3e3db)}
.xpbtn.def{box-shadow:inset 0 0 0 2px #7ba0ee}

/* ---------------------------------------------------------------------
   Resume (PDF viewer)
   --------------------------------------------------------------------- */
.pdfbar{display:flex;flex:none;align-items:center;gap:3px;padding:4px 6px;flex-wrap:wrap;background:linear-gradient(#f6f5ef,#dcd9c9);border-bottom:1px solid #8b8878}
.zoomtxt{min-width:42px;text-align:center;font-weight:700}
.pdfarea{flex:1;min-height:0;overflow:auto;background:#808080;padding:18px}
.doc{background:#fff;margin:0 auto;width:46em;padding:3em 3.3em;color:#1b1b1b;font:1em/1.5 "Segoe UI",Arial,sans-serif;
  box-shadow:0 2px 10px rgba(0,0,0,.6);-webkit-user-select:text;user-select:text}
.doc h1{margin:0;font-size:2em;letter-spacing:.02em;color:#0b2f87}
.doc .contact{margin:.3em 0 1.3em;color:#444;font-size:.92em}
.doc h2{margin:1.2em 0 .45em;font-size:.95em;letter-spacing:.12em;color:#0b2f87;border-bottom:1.5px solid #0b2f87;padding-bottom:.15em}
.doc h3{margin:.5em 0 0;font-size:1em}
.doc p{margin:.3em 0}
.doc .meta{color:#555;font-size:.92em}
.doc ul{margin:.35em 0;padding-left:1.3em}.doc li{margin:.25em 0}
.doc .cert{display:flex;align-items:center;gap:.5em;width:100%;text-align:left;background:none;border:0;padding:.2em .3em;margin:.1em 0;font:inherit;color:#0b4fc4;cursor:pointer;border-radius:3px}
.doc .cert:hover{background:#eaf1ff;text-decoration:underline}
.doc .cert small{color:#666;margin-left:auto;white-space:nowrap}
.doc .cert .i{width:1.4em;height:1.4em}
@media print{
  body.printing *{visibility:hidden!important}
  body.printing .print-doc,body.printing .print-doc *{visibility:visible!important}
  body.printing .print-doc{position:fixed!important;left:0;top:0;width:100%!important;margin:0!important;padding:1.2cm!important;box-shadow:none!important;font-size:11pt!important}
  html,body{overflow:visible!important}
}

/* ---------------------------------------------------------------------
   Projects (Internet Explorer)
   --------------------------------------------------------------------- */
.ie-logo{margin-left:auto;display:flex;align-items:center;padding:0 6px;border-left:1px solid #c4c0ae}
.ie-logo .i{width:28px;height:28px}
.ie-logo.busy .i{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.web{flex:1;min-height:0;overflow:auto;background:#fff;-webkit-user-select:text;user-select:text}
.site-head{padding:22px 28px 0;color:#fff;background:linear-gradient(135deg,#0b3d91 0%,#1a6fd1 55%,#2e9b4f 100%)}
.site-head .eyebrow{margin:0 0 4px;font-size:12px;opacity:.9}
.site-head h1{margin:0;font:800 34px/1.05 var(--title-font);letter-spacing:-.01em}
.site-head p.tag{margin:6px 0 16px;font-size:13px;max-width:62ch;opacity:.95}
.site-nav{display:flex;gap:2px;flex-wrap:wrap}
.site-nav button{background:rgba(255,255,255,.14);color:#fff;border:0;padding:7px 14px;border-radius:6px 6px 0 0;font-size:12px;cursor:pointer}
.site-nav button:hover{background:rgba(255,255,255,.28)}
.site-nav button.on{background:#fff;color:#0b3d91;font-weight:700}
.site-body{padding:20px 28px 30px;font-size:12.5px;line-height:1.6;color:#1d2433}
.site-body h2{margin:0 0 8px;font:700 19px var(--title-font);color:#0b3d91}
.site-body p{margin:0 0 10px;max-width:70ch}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:14px 0}
.card{background:#f3f7ff;border:1px solid #bccbea;border-radius:7px;padding:12px 14px}
.card h4{margin:0 0 4px;font-size:13px;color:#0b3d91}
.card p{margin:0;font-size:12px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.chip{background:#e3ecff;border:1px solid #b5c8ef;color:#0b3d91;border-radius:99px;padding:2px 10px;font-size:11.5px}
.chip.green{background:#e4f5df;border-color:#a9d79b;color:#1d5d17}
.rolebtns{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 12px}
.rolebtn{padding:8px 14px;border-radius:7px;border:1px solid #9db7ee;background:#f3f7ff;color:#0b3d91;font-weight:700;cursor:pointer;font-size:12px}
.rolebtn:hover{background:#e3ecff}
.rolebtn.on{background:#0b3d91;color:#fff;border-color:#0b3d91}
.rolebox{border:1px solid #bccbea;border-radius:8px;padding:14px 16px;background:#fbfdff}
.rolebox h3{margin:0 0 4px;font-size:15px;color:#0b3d91}
.layer{border:2px solid #0b3d91;border-radius:8px;padding:10px 14px;margin-bottom:8px;background:#f3f7ff}
.layer.alt{background:#fff6c9;border-color:#b58a12}
.layer b{display:block;margin-bottom:2px}
.arrowdown{text-align:center;color:#58708f;margin:-2px 0 6px;font-size:16px;line-height:1}
.steps{list-style:none;margin:12px 0;padding:0;border-left:3px solid #1a6fd1}
.steps li{position:relative;padding:0 0 16px 18px}
.steps li::before{content:attr(data-n);position:absolute;left:-14px;top:-1px;width:24px;height:24px;border-radius:50%;background:#0b3d91;color:#fff;
  text-align:center;line-height:24px;font-weight:700;font-size:12px}
.steps b{display:block;font-size:13.5px;color:#0b3d91}
.progress{height:3px;background:linear-gradient(90deg,#fff,#2d73ff,#fff);animation:load .7s linear infinite;background-size:200% 100%}
@keyframes load{to{background-position:-200% 0}}

/* ---------------------------------------------------------------------
   Contact (Outlook-style composer)
   --------------------------------------------------------------------- */
.mailtool{display:flex;flex:none;gap:4px;padding:5px 6px;background:linear-gradient(#f6f5ef,#dcd9c9);border-bottom:1px solid #8b8878;align-items:center}
.bigtool{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:58px;padding:3px 8px;background:none;border:1px solid transparent;border-radius:3px;cursor:default}
.bigtool:hover{border-color:#b6b09a;background:linear-gradient(#fff,#ece9d8)}
.mailform{flex:1;min-height:0;display:flex;flex-direction:column;background:#fff;overflow:auto}
.mrow{display:flex;align-items:center;gap:8px;padding:4px 10px;border-bottom:1px solid #e3e1d6;background:var(--beige)}
.mrow label{width:58px;text-align:right;color:#222;flex:none}
.mrow input{flex:1;min-width:0;height:22px;border:1px solid #7f9db9;padding:0 5px;background:#fff;-webkit-user-select:text;user-select:text}
.mrow input[readonly]{background:#f4f3ee;color:#333}
.mmsg{flex:1;min-height:140px;width:100%;border:0;resize:none;outline:0;padding:10px 12px;font:13px/1.5 var(--font);-webkit-user-select:text;user-select:text}
.mailinfo{flex:none;background:#fff8d6;border-top:1px solid #e0cf86;padding:6px 12px;color:#4a3f10;display:flex;gap:14px;flex-wrap:wrap}
.mailinfo a{color:#0b4fc4}

/* ---------------------------------------------------------------------
   Notepad / Command Prompt
   --------------------------------------------------------------------- */
.npad{flex:1;min-height:0;width:100%;border:0;outline:0;resize:none;padding:4px 6px;background:#fff;font:13px/1.45 "Lucida Console",Consolas,monospace;-webkit-user-select:text;user-select:text;white-space:pre-wrap}
.cmd{height:100%;background:#000;color:#c0c0c0;font:13px/1.3 "Lucida Console",Consolas,monospace;padding:6px 8px;overflow:auto;-webkit-user-select:text;user-select:text;cursor:text}
.cmd .line{white-space:pre-wrap;word-break:break-word;min-height:1.3em}
.cmd .cin{display:flex;gap:0}
.cmd .prompt{white-space:pre;flex:none}
.cmd input{flex:1;min-width:0;background:none;border:0;outline:0;color:#c0c0c0;font:inherit;caret-color:#c0c0c0;padding:0}
.cmd .hl{color:#fff}

/* ---------------------------------------------------------------------
   VS Code
   --------------------------------------------------------------------- */
.vsc{display:grid;grid-template-columns:42px 190px 1fr;grid-template-rows:1fr 22px;height:100%;background:#1e1e1e;color:#d4d4d4;font:13px/1.5 Consolas,"Lucida Console",monospace}
.vsc .act{background:#333;display:flex;flex-direction:column;align-items:center;gap:16px;padding-top:12px}
.vsc .act i{width:20px;height:20px;border:2px solid #858585;border-radius:4px;opacity:.8}
.vsc .act i:first-child{border-color:#fff;opacity:1}
.vsc .side{background:#252526;overflow:auto;min-width:0}
.vsc .side h5{margin:0;padding:9px 12px 6px;font:600 10.5px var(--font);letter-spacing:.08em;color:#bbb}
.vsc .side button{display:flex;align-items:center;gap:6px;width:100%;border:0;background:none;color:#ccc;padding:3px 14px;font:13px Consolas,monospace;text-align:left;cursor:pointer}
.vsc .side button:hover{background:#2a2d2e}
.vsc .side button.on{background:#37373d;color:#fff}
.vsc .editor{display:flex;flex-direction:column;min-width:0;min-height:0}
.vsc .vtabs{display:flex;background:#252526;flex:none;overflow:hidden}
.vsc .vtab{padding:7px 14px;background:#2d2d2d;color:#999;border-right:1px solid #1e1e1e;white-space:nowrap}
.vsc .vtab.on{background:#1e1e1e;color:#fff;border-top:1px solid #3794ff}
.vsc .code{flex:1;overflow:auto;margin:0;padding:10px 0;counter-reset:ln;-webkit-user-select:text;user-select:text}
.vsc .code .ln{display:block;padding-left:56px;position:relative;white-space:pre;min-height:1.5em}
.vsc .code .ln::before{counter-increment:ln;content:counter(ln);position:absolute;left:0;width:42px;text-align:right;color:#6e7681}
.vsc .vstatus{grid-column:1/-1;background:#007acc;color:#fff;padding:2px 12px;font:11px var(--font);display:flex;gap:16px}
.tk-s{color:#ce9178}.tk-k{color:#569cd6}.tk-n{color:#b5cea8}.tk-c{color:#6a9955}.tk-p{color:#9cdcfe}

/* ---------------------------------------------------------------------
   Media Player
   --------------------------------------------------------------------- */
.wmp{display:flex;flex-direction:column;height:100%;background:#1a1d3a;color:#dfe6ff}
.wmp .wmain{flex:1;display:flex;min-height:0}
.wmp .viz{flex:1;min-width:0;position:relative;background:radial-gradient(circle at 50% 40%,#18306e,#070b1f 70%)}
.wmp canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.wmp .np{position:absolute;left:12px;top:10px;font:700 13px var(--title-font);text-shadow:0 1px 3px #000}
.wmp .np small{display:block;font:11px var(--font);color:#9fb4ee;font-weight:400}
.wmp .list{width:170px;flex:none;background:#0e1230;border-left:1px solid #2a3570;overflow:auto}
.wmp .list h5{margin:0;padding:7px 10px;font-size:11px;background:#233071;color:#cfdcff}
.wmp .list button{display:flex;justify-content:space-between;width:100%;padding:6px 10px;background:none;border:0;color:#bfcdf5;text-align:left;cursor:default}
.wmp .list button:hover{background:#18215a}
.wmp .list button.on{background:#2c47b8;color:#fff}
.wmp .ctrl{display:flex;flex:none;align-items:center;gap:10px;padding:8px 12px;flex-wrap:wrap;background:linear-gradient(#3c5fc9,#1d2f7a 55%,#16235f);border-top:1px solid #6f8be6}
.wmp .cbtn{width:34px;height:34px;border-radius:50%;border:1px solid #9fb6ff;background:radial-gradient(circle at 35% 25%,#d7e2ff,#6b8cf0 55%,#2a46b8);cursor:default;display:flex;align-items:center;justify-content:center;padding:0}
.wmp .cbtn.big{width:42px;height:42px}
.wmp .cbtn:hover{filter:brightness(1.12)}
.wmp .cbtn svg{width:16px;height:16px;fill:#10246b}
.wmp .seek,.wmp .vol{accent-color:#7db6ff}
.wmp .seek{flex:1;min-width:90px}
.wmp .vol{width:80px}
.wmp .time{font:11px Consolas,monospace;color:#cfdcff;min-width:86px;text-align:center}

/* ---------------------------------------------------------------------
   Picture viewer
   --------------------------------------------------------------------- */
.viewer{display:flex;flex-direction:column;height:100%;background:#fff}
.vimg{flex:1;min-height:0;overflow:auto;background:#fff;display:flex;align-items:center;justify-content:center;padding:10px}
.vimg img{max-width:100%;max-height:100%;object-fit:contain;display:block;box-shadow:0 1px 6px rgba(0,0,0,.35)}
.vimg.full img{max-width:none;max-height:none}

/* ---------------------------------------------------------------------
   Message box
   --------------------------------------------------------------------- */
.msgbox{position:fixed;left:50%;top:38%;transform:translate(-50%,-50%);z-index:250000;min-width:290px;max-width:min(92vw,420px);
  background:var(--beige);border:3px solid var(--xp-blue);border-top:0;border-radius:8px 8px 0 0;box-shadow:3px 5px 16px rgba(0,0,0,.55);animation:xpOpen .14s ease-out}
.msgbox .titlebar{border-radius:6px 6px 0 0}
.msgbody{display:flex;gap:14px;align-items:flex-start;padding:18px 18px 14px;font-size:12px;line-height:1.5;background:var(--beige)}
.msgbody .i{width:32px;height:32px}
.msgfoot{display:flex;justify-content:center;gap:8px;padding:0 14px 14px}

/* ---------------------------------------------------------------------
   Taskbar
   --------------------------------------------------------------------- */
#taskbar{position:absolute;left:0;right:0;bottom:0;height:var(--taskbar-h);z-index:100000;display:flex;align-items:stretch;
  background:linear-gradient(to bottom,#3168d5 0%,#4993e6 5%,#2a62d3 12%,#245edb 50%,#245edb 88%,#1941a5 100%);
  border-top:1px solid #0c3fb2;box-shadow:0 -1px 0 rgba(255,255,255,.2) inset}
#startbtn{display:flex;align-items:center;gap:5px;padding:0 20px 0 10px;margin-right:6px;border:0;border-radius:0 14px 14px 0;cursor:pointer;
  background:linear-gradient(to bottom,#5fbb55 0%,#3ba033 10%,#3c9b34 50%,#2f8a2b 88%,#1f6b1c 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.55),inset -2px 0 3px rgba(0,0,0,.35),2px 0 3px rgba(0,0,0,.35);
  color:#fff;font:italic 700 20px/1 var(--title-font);text-shadow:1px 1px 2px #1a4a12;letter-spacing:.02em}
#startbtn:hover{filter:brightness(1.1)}
#startbtn.on{filter:brightness(.88)}
#startbtn .i{filter:drop-shadow(1px 1px 1px rgba(0,0,0,.4))}
#tabs{flex:1;min-width:0;display:flex;align-items:center;gap:3px;padding:2px 0;overflow:hidden}
.tab{flex:0 1 164px;min-width:0;height:24px;display:flex;align-items:center;gap:5px;padding:0 8px;color:#fff;font-size:11px;
  background:linear-gradient(#5a95f0,#3c81f3 20%,#3270e4 90%,#2a63d3);border:1px solid #1e52b7;border-radius:3px;cursor:default;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);text-align:left}
.tab:hover{filter:brightness(1.1)}
.tab.active{background:linear-gradient(#1b4bb8,#1e56cb 60%,#2161d6);box-shadow:inset 1px 1px 3px rgba(0,0,0,.45);border-color:#14398f}
.ttab{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#tray{display:flex;align-items:center;gap:6px;padding:0 12px 0 14px;color:#fff;border-left:1px solid #0b4fb8;
  background:linear-gradient(to bottom,#0c59b9 0%,#139ee9 9%,#18b5f2 18%,#139ee9 92%,#0c59b9 100%);
  box-shadow:inset 1px 0 1px #1042af,inset 2px 0 2px #1a6fd6}
.tray-btn{background:none;border:0;padding:2px;display:flex;cursor:default;border-radius:3px}
.tray-btn:hover{background:rgba(255,255,255,.2)}
#clock{font-size:11px;min-width:58px;text-align:right;white-space:nowrap}

/* ---------------------------------------------------------------------
   Start menu
   --------------------------------------------------------------------- */
#startmenu{position:absolute;left:0;bottom:var(--taskbar-h);width:390px;max-width:100vw;z-index:100001;display:flex;flex-direction:column;
  border:1px solid #0a3ab3;border-bottom:0;border-radius:8px 8px 0 0;overflow:visible;box-shadow:3px -2px 10px rgba(0,0,0,.45);
  background:#245edb;animation:menuUp .12s ease-out}
@keyframes menuUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.sm-head{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:7px 7px 0 0;
  background:linear-gradient(to bottom,#1a63d6 0%,#3b8cf0 12%,#1d63d3 60%,#1553c2 100%);color:#fff;border-bottom:2px solid #f0a23a}
.sm-avatar{width:44px;height:44px;border:2px solid #fff;border-radius:5px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.sm-avatar .i{width:100%;height:100%}
.sm-name{font:700 16px var(--title-font);text-shadow:1px 1px 2px rgba(0,0,40,.7)}
.sm-cols{display:flex;min-height:0}
.sm-left{flex:1.12;background:#fff;padding:6px 4px 0;display:flex;flex-direction:column;border-right:1px solid #95bdee}
.sm-right{flex:1;background:#d3e5fa;padding:6px 4px;display:flex;flex-direction:column}
.sm-rtitle{margin:0;padding:2px 8px 6px;font-size:10.5px;color:#4d6a9a}
.sm-left hr,#allprograms hr{border:0;height:1px;margin:4px 8px;background:linear-gradient(to right,transparent,#c5d3ea,transparent)}
.sm-item{display:flex;align-items:center;gap:8px;width:100%;padding:5px 8px;background:none;border:0;text-align:left;cursor:default;color:#000;border-radius:2px}
.sm-item span{display:flex;flex-direction:column;min-width:0}
.sm-item small{color:#5b6b86;font-size:10.5px}
.sm-item b{font-weight:700;font-size:11.5px}
.sm-right .sm-item b{color:#00136b}
.sm-item:hover,.sm-item:focus-visible{background:#316ac5;color:#fff;outline:0}
.sm-item:hover small,.sm-item:hover b{color:#fff}
.sm-spacer{flex:1;min-height:14px}
.sm-allprog{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 -4px;padding:7px 8px;border:0;border-top:1px solid #95bdee;
  background:linear-gradient(#f7fbff,#dbe8fa);cursor:default;color:#000}
.sm-allprog:hover{background:#316ac5;color:#fff}
.sm-foot{display:flex;justify-content:flex-end;gap:14px;padding:6px 10px;color:#fff;border-top:2px solid #f0a23a;
  background:linear-gradient(to bottom,#1d63d3,#1554c4)}
.sm-foot button{display:flex;align-items:center;gap:6px;background:none;border:0;color:#fff;padding:3px 6px;border-radius:3px;cursor:default}
.sm-foot button:hover{background:rgba(255,255,255,.18)}
#allprograms{position:absolute;left:100%;bottom:44px;width:220px;max-width:calc(100vw - 390px);padding:4px;background:#fff;border:1px solid #6f8fcf;
  box-shadow:3px 3px 8px rgba(0,0,0,.4);z-index:2}

/* ---------------------------------------------------------------------
   Tray balloon
   --------------------------------------------------------------------- */
#balloon{position:absolute;right:12px;bottom:calc(var(--taskbar-h) + 10px);z-index:100002;width:270px;padding:10px 24px 12px 12px;
  background:#ffffe1;border:1px solid #000;border-radius:8px;box-shadow:2px 2px 6px rgba(0,0,0,.4);animation:menuUp .2s ease-out;
  -webkit-user-select:text;user-select:text}
#balloon::after{content:"";position:absolute;right:30px;bottom:-9px;border:8px solid transparent;border-top-color:#ffffe1;border-bottom:0}
#balloon b{display:block;margin-bottom:3px;font-size:12px}
#balloon p{margin:0;line-height:1.45}
#balloon .bx{position:absolute;right:5px;top:3px;border:0;background:none;font-size:16px;line-height:1;cursor:pointer;color:#444}

/* ---------------------------------------------------------------------
   Shut down / log on / power off
   --------------------------------------------------------------------- */
#shutdown{position:fixed;inset:0;z-index:260000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.5);backdrop-filter:grayscale(1)}
.sd-dialog{width:min(92vw,360px);border-radius:6px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.6);color:#fff}
.sd-top{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;font:700 17px var(--title-font);background:linear-gradient(#0c3fa8,#1a5fd1)}
.sd-mid{display:flex;justify-content:space-around;padding:22px 8px;background:linear-gradient(#6a8fe0,#4a74d4)}
.sd-mid button{display:flex;flex-direction:column;align-items:center;gap:7px;background:none;border:0;color:#fff;font-size:12px;cursor:default;padding:4px 8px;border-radius:4px}
.sd-mid button:hover{background:rgba(255,255,255,.15)}
.sd-ico{width:38px;height:38px;border-radius:7px;border:2px solid #fff;display:block}
.sd-ico.y{background:linear-gradient(#ffe56b,#e0a812)}
.sd-ico.r{background:linear-gradient(#ff8f77,#d03a18)}
.sd-ico.g{background:linear-gradient(#92e47e,#2c9a28)}
.sd-bot{display:flex;justify-content:flex-end;padding:10px 14px;background:linear-gradient(#0c3fa8,#1a5fd1)}
.sd-bot button{padding:3px 16px;border-radius:3px;border:1px solid #003c74;background:linear-gradient(#fff,#d6d0c5);cursor:default}
#logon{position:fixed;inset:0;z-index:270000;display:flex;align-items:center;background:linear-gradient(90deg,#00309c 0,#5a7edc 100%);color:#fff}
.lo-left{flex:1;height:100%;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:10px;padding:0 40px;border-right:2px solid #8aa8ee;
  background:linear-gradient(#0a2f8f,#00309c);font:700 22px var(--title-font);text-align:right}
.lo-left p{margin:0}
.lo-user{flex:1;display:flex;align-items:center;gap:14px;padding:0 40px;background:none;border:0;color:#fff;font:14px var(--title-font);text-align:left;cursor:pointer}
.lo-user b{display:block;font-size:20px}
.lo-user small{font-size:12px;opacity:.85}
.lo-av{width:64px;height:64px;border:2px solid #fff;border-radius:6px;overflow:hidden;flex:none}
.lo-av .i{width:100%;height:100%}
.lo-user:hover .lo-av{box-shadow:0 0 0 3px #f6c33c}
#poweroff{position:fixed;inset:0;z-index:280000;background:#000;color:#ff9c2a;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;font:16px var(--font);text-align:center;padding:20px}
#poweroff p{margin:0}
#poweroff button{background:none;border:1px solid #6b4a1a;color:#a07030;padding:6px 14px;border-radius:4px;cursor:pointer}

/* ---------------------------------------------------------------------
   Small screens: windows fill the desktop, icons shrink
   --------------------------------------------------------------------- */
@media (max-width:720px){
  #icons{gap:2px;left:4px;top:4px}
  .dicon{width:70px}
  .dicon .i48{width:40px;height:40px}
  .pane{width:120px;padding:6px}
  .main{padding:12px}
  .tab{flex-basis:44px;padding:0 6px}
  .tab .ttab{display:none}
  #startmenu{width:100vw}
  #allprograms{left:0;bottom:calc(100% - 52px);width:100%;max-width:none}
  .wmp .list{display:none}
  .vsc{grid-template-columns:34px 120px 1fr}
  .bliss-text{bottom:calc(var(--taskbar-h) + 4vh)}
}
@media (max-width:480px){
  .pane{display:none}
  .sm-left small{display:none}
  #balloon{left:8px;right:8px;width:auto}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}