:root { --xp-blue:#245edb; --xp-dark:#0a246a; --xp-light:#d6e8f7; --taskbar:#1d72d4; font-family:Tahoma, Arial, sans-serif; }
* { box-sizing:border-box; } body { margin:0; overflow:hidden; background:#000; color:#111; font-size:13px; }
button,input { font:inherit; } button { cursor:pointer; }
.boot,.login { height:100vh; display:flex; align-items:center; justify-content:center; color:#fff; }
.boot { background:#000; flex-direction:column; gap:22px; position:relative; }
.xp-logo { font-family:Arial,sans-serif; font-size:42px; font-weight:bold; letter-spacing:-2px; text-shadow:0 2px 4px #000; }.xp-logo i { color:#f05b32; font-style:normal; }.xp-logo small { font-size:14px; letter-spacing:0; margin-left:6px; font-weight:normal; }
.bootbar { width:180px; height:14px; border:2px solid #777; padding:1px; overflow:hidden; }.bootbar:after { content:""; display:block; height:100%; width:48px; background:linear-gradient(90deg,#1252cc,#6cb0ff,#1252cc); animation:load 1s infinite linear; } @keyframes load { from{transform:translateX(-50px)} to{transform:translateX(180px)} }
.skip { position:absolute; right:26px; bottom:20px; color:#aaa; border:0; background:transparent; text-decoration:underline; }
.login { background:radial-gradient(ellipse at 50% 40%,#4e97dc 0,#1b66b8 52%,#0c3f86 100%); flex-direction:column; gap:18px; }.login h1 { font-size:27px; font-weight:normal; text-shadow:1px 2px #13427b; margin:0 0 16px; }.accounts { display:flex; gap:26px; }.account { background:transparent; color:#fff; border:0; font-size:15px; text-shadow:1px 1px 2px #123; }.avatar { display:grid; place-items:center; width:86px; height:86px; background:linear-gradient(135deg,#fff,#cfedff); border:4px solid #f6f6f6; box-shadow:0 1px 5px #123; color:#398952; font-size:42px; margin-bottom:7px; }.login-note { height:18px; color:#e8f4ff; font-size:12px; }.turnoff { position:absolute; right:24px; bottom:22px; border:0; border-radius:4px; padding:8px 14px; color:white; background:linear-gradient(#4a91dc,#1c5eae); box-shadow:0 1px 3px #06326c; }
.desktop { position:relative; height:100vh; overflow:hidden; background:#58aee1 url('./assets/windows-xp-bliss.jpg') center/cover no-repeat; }.desktop:before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(15,74,148,.12),transparent 35%); pointer-events:none; }.desktop:after { display:none; }
.icons { position:absolute; z-index:1; top:14px; left:11px; display:grid; grid-template-columns:82px; gap:12px; }.desktop-icon { width:76px; min-height:77px; border:1px solid transparent; background:transparent; color:#fff; text-shadow:1px 1px 2px #064e9c; padding:2px; border-radius:4px; }.desktop-icon.selected,.desktop-icon:focus { background:rgba(43,112,205,.45); border-color:rgba(220,240,255,.65); outline:0; }.icon-art { display:block; font-size:34px; filter:drop-shadow(1px 1px 1px #376); }.desktop-icon span { display:block; line-height:15px; }
.taskbar { position:absolute; z-index:20; bottom:0; left:0; right:0; height:31px; display:flex; align-items:center; background:linear-gradient(#3e95e5 0,#2169c8 13%,#2456bc 100%); box-shadow:inset 0 2px #78b7f0; }.start { height:31px; min-width:100px; padding:0 14px 0 8px; border:0; border-radius:0 13px 13px 0; background:linear-gradient(#72c93e,#3b8f32 52%,#287126); color:#fff; font-size:16px; font-weight:bold; font-style:italic; text-shadow:1px 1px #1b5a19; box-shadow:inset 0 1px #c2ef8d, 1px 0 3px #143d8e; }.flag { font-style:normal; font-size:18px; margin-right:3px; }.task-buttons { display:flex; gap:3px; padding:3px 6px; flex:1; overflow:hidden; }.task-button { max-width:175px; flex:1; height:24px; border:1px solid #1b4eaa; border-radius:4px; color:white; text-align:left; padding:2px 8px; background:linear-gradient(#4b8dd6,#2860b4); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.task-button.active { background:linear-gradient(#1a4f9c,#316fb7); box-shadow:inset 0 1px 2px #123c7d; }.tray { color:#fff; padding:0 10px; white-space:nowrap; font-size:11px; text-shadow:1px 1px #164b9c; }
.start-menu { z-index:25; position:absolute; left:0; bottom:31px; width:390px; height:430px; border:2px solid #1a57ad; border-radius:7px 7px 0 0; box-shadow:3px -2px 14px #16456d; overflow:hidden; background:#fff; }.start-head { height:64px; display:flex; align-items:center; gap:9px; padding:8px 12px; color:white; font-size:18px; font-weight:bold; text-shadow:1px 1px #164272; background:linear-gradient(110deg,#2473cc,#2162b7 55%,#53a741); }.mini-avatar { width:44px; height:44px; border:2px solid white; background:#ebf8ff; color:#3f9651; display:grid; place-items:center; font-size:26px; }.start-cols { display:grid; grid-template-columns:1fr 1fr; height:318px; }.start-left { padding:10px 8px; }.start-right { padding:12px 10px; background:linear-gradient(90deg,#d5e8fa,#c3dcf4); border-left:1px solid #9ebddf; }.start-item { display:flex; width:100%; gap:9px; align-items:center; border:0; background:transparent; padding:7px 8px; text-align:left; color:#123; font-size:13px; }.start-item:hover { color:#fff; background:#2a71c5; }.start-foot { height:44px; display:flex; justify-content:flex-end; gap:7px; padding:8px 12px; background:linear-gradient(#387fd0,#1d58ad); }.start-foot button,.xp-button { border:1px solid #003c74; border-radius:4px; padding:3px 10px; color:#fff; background:linear-gradient(#6da6e1,#2b6ebc); text-shadow:1px 1px #23548e; }.context { z-index:40; position:absolute; width:175px; padding:3px; background:#f5f5f5; border:1px solid #7892b3; box-shadow:2px 3px 7px #35617d; }.context button { display:block; width:100%; text-align:left; border:0; padding:6px 20px; background:transparent; }.context button:hover { background:#286ec7; color:#fff; }
.window { position:absolute; z-index:5; min-width:280px; min-height:190px; display:flex; flex-direction:column; border:1px solid #0b4aa1; border-radius:8px 8px 3px 3px; overflow:hidden; resize:both; box-shadow:2px 4px 12px rgba(0,37,90,.65); background:#fff; animation:open .18s ease-out; }.window.inactive { border-color:#7193bb; }.window.maximized { inset:0 0 31px 0 !important; width:auto !important; height:auto !important; resize:none; border-radius:0; }.titlebar { height:29px; flex:none; display:flex; align-items:center; padding-left:7px; color:#fff; font-weight:bold; text-shadow:1px 1px #0e3e84; background:linear-gradient(#5da8ed 0,#2876cf 14%,#0e55b4 100%); cursor:move; }.inactive .titlebar { background:linear-gradient(#a5b8cc,#6a87a8); }.title { flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.window-controls { display:flex; align-self:stretch; gap:2px; padding:3px; }.window-controls button { width:22px; border:1px solid #0751aa; border-radius:3px; color:#fff; font-weight:bold; line-height:16px; background:linear-gradient(#91c4fa,#2c76c8); }.window-controls .close { background:linear-gradient(#f37a75,#be2525); border-color:#9d1e1e; }.window-body { min-height:0; flex:1; overflow:auto; background:#fff; }.explorer { display:flex; height:100%; }.sidepane { width:146px; flex:none; padding:12px 9px; background:#d6e8f7; border-right:1px solid #aac9e5; color:#164d90; }.sidepane h4 { margin:0 0 7px; color:#1c5b9c; }.sidepane a { display:block; color:#195496; margin:6px 0; font-size:12px; }.content { padding:17px; flex:1; }.content h2 { color:#245eaa; margin:0 0 12px; font-size:18px; }.menubar { padding:3px 8px; border-bottom:1px solid #ddd; font-size:12px; word-spacing:15px; }.notepad { padding:16px; white-space:pre-wrap; font-family:"Courier New",monospace; line-height:1.55; }.file-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:16px; }.file { border:0; background:transparent; text-align:center; color:#123; padding:4px; }.file:hover { background:#d7eaff; }.file .file-icon { display:block; font-size:42px; }.skills { display:grid; gap:12px; }.skill-row { display:grid; grid-template-columns:110px 1fr; align-items:center; gap:8px; }.meter { height:16px; border:1px solid #6c8faf; padding:2px; background:#fff; }.meter i { display:block; height:100%; background:linear-gradient(#82c9ff,#2977d0); }.form-row { margin:10px 0; display:grid; gap:4px; }.form-row input,.form-row textarea { border:1px solid #7993ae; border-top-color:#4e647d; padding:5px; box-shadow:inset 1px 1px 2px #c1c1c1; }.form-row textarea { min-height:78px; resize:vertical; }.resume { max-width:650px; margin:auto; padding:22px; box-shadow:0 0 3px #777; }.resume h1 { border-bottom:2px solid #2367b2; color:#134d93; }.viewer { text-align:center; }.photo { height:115px; border-radius:2px; background:linear-gradient(145deg,#76c7f1 0 55%,#55b734 56%); border:4px solid white; box-shadow:0 1px 4px #778; }.dialog { padding:22px; }.dialog p { line-height:1.55; } @keyframes open { from { transform:scale(.9); opacity:0 } to { transform:scale(1); opacity:1 } }
@media(max-width:650px){ .window { inset:0 0 31px 0 !important; width:auto!important; height:auto!important; resize:none; border-radius:0; }.icons { grid-template-columns:repeat(2,82px); }.start-menu { width:100%; }.desktop-icon { min-height:60px; }.sidepane { width:115px; }.task-button { max-width:95px; }.login h1 { font-size:23px; } }

/* Luna-era icon drawings; deliberately avoid modern platform emoji. */
.icon-art{display:grid;place-items:center;height:44px;font-size:0}.xp-icon{position:relative;display:inline-block;width:34px;height:34px;flex:none;vertical-align:middle}.xp-icon.small{width:18px;height:18px;margin-right:4px;transform:scale(.62);transform-origin:left center}.xp-photos{border:3px solid #f3e49a;background:linear-gradient(145deg,#70bde8 0 47%,#5caf3b 48%);box-shadow:inset 0 0 0 1px #496f38,2px 2px #9e8327}.xp-photos:after{content:'';position:absolute;width:6px;height:6px;top:4px;right:4px;border-radius:50%;background:#fff4a0}.xp-about{background:linear-gradient(135deg,#fff 0 74%,#d1d1d1 75%);border:1px solid #a3a3a3;box-shadow:2px 2px #6c8497}.xp-about:before{content:'';position:absolute;width:18px;height:4px;background:#efc333;top:15px;left:12px;transform:rotate(-43deg);border:1px solid #987211}.xp-about:after{content:'•••';color:#2b70af;position:absolute;top:3px;left:4px;font-size:14px;letter-spacing:1px}.xp-projects{height:25px;margin-top:7px;border:1px solid #9b7a25;border-radius:2px;background:linear-gradient(#ffe98b,#d8a72b);box-shadow:2px 2px #53646a}.xp-projects:before{content:'';position:absolute;width:16px;height:7px;left:2px;top:-5px;border:1px solid #a58a37;border-bottom:0;background:#ffe276;border-radius:2px 4px 0 0}.xp-skills{border-radius:50%;background:radial-gradient(circle at 35% 30%,#e6f9ff 0 10%,#7aabc7 11% 39%,#3d6381 40% 54%,transparent 55%)}.xp-skills:after{content:'⚒';position:absolute;left:5px;top:3px;color:#e5e5e5;font-size:25px;text-shadow:1px 1px #36536d}.xp-resume{width:27px;margin-left:3px;background:linear-gradient(135deg,#fff 0 82%,#d5d5d5 83%);border:1px solid #aaa;box-shadow:2px 2px #668096}.xp-resume:after{content:'≡';position:absolute;left:6px;top:7px;color:#4982bb;font:bold 18px Arial}.xp-contact{height:23px;margin-top:6px;border:1px solid #7992a6;border-radius:2px;background:linear-gradient(#fff,#c9d8e5);box-shadow:2px 2px #526b7c}.xp-contact:after{content:'';position:absolute;inset:2px;border-bottom:2px solid #668299;transform:skewY(-30deg) rotate(-1deg)}.xp-computer{border-radius:2px;background:linear-gradient(#eaf0f0 0 61%,#6c8391 62% 70%,#d0d4d2 71%);border:1px solid #536a76;box-shadow:2px 2px #375267}.xp-recycle{width:24px;height:29px;margin-top:4px;background:repeating-linear-gradient(90deg,#759caf 0 3px,#d4f3fb 3px 5px);border:1px solid #466e82;clip-path:polygon(8% 12%,92% 12%,82% 100%,18% 100%)}.xp-recycle:before{content:'';position:absolute;width:23px;height:4px;top:-5px;left:0;background:#c1e6ec;border:1px solid #527a87}.start-menu,.context{animation:menu-in .14s ease-out}@keyframes menu-in{from{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}