:root { --xp-blue:#245edb; --xp-dark:#003caa; --xp-light:#3c8cf4; --task-h:44px; --ui:"Trebuchet MS",Tahoma,Arial,sans-serif; --pixel:"Courier New",monospace; }
* { box-sizing:border-box; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; }
body { font-family:var(--ui); background:#1d5ba8; }
button,a { font:inherit; }
button { cursor:default; }
.skip-link { position:fixed; left:10px; top:-80px; z-index:99999; padding:10px; background:#fff; }.skip-link:focus { top:10px; }
.boot-screen { position:fixed; inset:0; z-index:10000; display:grid; place-content:center; justify-items:center; color:#fff; background:#030303; transition:opacity .45s,visibility .45s; }.boot-screen.done { opacity:0; visibility:hidden; }
.boot-mark,.windows-mark { display:grid; grid-template-columns:repeat(2,1fr); gap:2px; transform:skew(-8deg); }.boot-mark { width:52px; height:43px; gap:4px; }.boot-mark i:nth-child(1),.windows-mark i:nth-child(1){background:#f04436}.boot-mark i:nth-child(2),.windows-mark i:nth-child(2){background:#69b839}.boot-mark i:nth-child(3),.windows-mark i:nth-child(3){background:#3b8ddd}.boot-mark i:nth-child(4),.windows-mark i:nth-child(4){background:#f2c230}
.boot-screen p { margin:18px 0 4px; font-size:2rem; font-weight:300; }.boot-screen p span { color:#f05b38; }.boot-screen small { color:#aaa; }.boot-track { width:170px; height:12px; margin-top:20px; padding:2px; border:1px solid #777; border-radius:5px; overflow:hidden; }.boot-track span { display:block; width:45px; height:100%; border-radius:3px; background:linear-gradient(90deg,#154eca,#67a2ff,#154eca); animation:boot 1.2s linear infinite; }
.desktop { position:relative; width:100%; height:100%; overflow:hidden; background:radial-gradient(ellipse at 68% 76%,rgba(255,255,255,.42) 0 2%,transparent 22%),linear-gradient(176deg,transparent 61%,rgba(10,97,28,.95) 62%),linear-gradient(158deg,transparent 58%,#51a52f 59% 69%,#1e7c25 70%),linear-gradient(#49a7ed 0 48%,#9bd5ff 70%); }
.desktop::before { content:""; position:absolute; inset:0 0 var(--task-h); pointer-events:none; background:radial-gradient(circle at 20% 17%,rgba(255,255,255,.85) 0 1%,transparent 2%),radial-gradient(ellipse at 78% 24%,rgba(255,255,255,.65),transparent 16%),linear-gradient(120deg,transparent 0 54%,rgba(255,255,255,.12) 54.2% 54.5%,transparent 55%); }
.wallpaper-copy { position:absolute; right:4vw; bottom:9vh; display:grid; justify-items:end; color:rgba(255,255,255,.92); text-align:right; text-shadow:0 2px 8px rgba(0,51,87,.45); }.wallpaper-copy span { font-size:.65rem; font-weight:700; letter-spacing:.3em; }.wallpaper-copy strong { font-size:clamp(3rem,8vw,8rem); line-height:.73; letter-spacing:-.08em; }.wallpaper-copy small { margin-top:14px; font-size:.65rem; font-weight:800; letter-spacing:.12em; }
.desktop-icons { position:absolute; z-index:5; top:12px; left:8px; display:grid; grid-auto-flow:column; grid-template-rows:repeat(5,86px); gap:4px 12px; align-content:start; height:calc(100% - var(--task-h) - 16px); }
.desktop-icon { display:grid; width:84px; min-height:78px; place-items:center; align-content:center; gap:4px; padding:3px; border:1px solid transparent; color:#fff; background:transparent; text-decoration:none; text-align:center; text-shadow:1px 1px 2px #102a4b; }.desktop-icon:hover,.desktop-icon:focus-visible { border-color:rgba(255,255,255,.7); background:rgba(34,88,170,.38); }.desktop-icon b { max-width:82px; font:400 12px/1.15 Tahoma,sans-serif; }
.icon { display:grid; width:44px; height:42px; place-items:center; font-weight:900; text-shadow:none; }.computer-icon { color:#d8e6ee; border:4px solid #d9ddd7; border-bottom-width:8px; background:#163552; box-shadow:5px 4px 0 #777; }.ie-icon { color:#1287df; font:italic 900 42px/1 Arial; text-shadow:-2px 1px 0 #f5d13c; }.note-icon { color:#193b90; border:2px solid #fff; background:repeating-linear-gradient(#fff 0 6px,#8bb6e8 7px 8px); box-shadow:3px 3px #677; }.duke-icon { border-radius:50%; color:#171717; background:#f4d319; box-shadow:0 0 0 3px #111; font-size:30px; }.paint-icon { color:#ef2867; border:2px solid #e0e0dc; background:linear-gradient(135deg,#fff 45%,#198ed5 46%); box-shadow:3px 3px #555; }.mine-icon { font-size:30px; }.pdf-icon { width:37px; height:42px; color:#fff; background:#d52e2e; font:900 11px/1 Arial; clip-path:polygon(0 0,70% 0,100% 28%,100% 100%,0 100%); }.recycle-icon { color:#208a43; border:2px solid #d8e8ef; background:rgba(220,240,246,.8); font-size:28px; }
.modern-icon { border:2px solid #35e9ff; border-radius:3px 10px 3px 10px; color:#35e9ff; background:#07050d; box-shadow:0 0 12px rgba(53,233,255,.55); font:900 16px/1 "Courier New",monospace; }
.eval-icon { grid-template-columns:repeat(5,7px);grid-template-rows:repeat(4,7px);gap:1px;place-content:center;background:#071020;box-shadow:0 0 8px #35e9ff}.eval-icon i{background:#35e9ff}.eval-icon i:nth-child(1){grid-column:3;grid-row:1/4}.eval-icon i:nth-child(2){grid-column:2;grid-row:2/4}.eval-icon i:nth-child(3){grid-column:4;grid-row:2/4}.eval-icon i:nth-child(4){grid-column:1/3;grid-row:4;background:#ff4bd8}.eval-icon i:nth-child(5){grid-column:4/6;grid-row:4;background:#ff4bd8}
.window { position:absolute; z-index:20; left:clamp(88px,var(--x),calc(100% - 360px)); top:var(--y); width:min(var(--w),calc(100% - 110px)); max-height:calc(100% - var(--task-h) - 8px); display:flex; flex-direction:column; border:3px solid var(--xp-blue); border-radius:8px 8px 3px 3px; background:#ece9d8; box-shadow:2px 5px 15px rgba(0,25,65,.45); }.window[hidden] { display:none; }.window.active-window { z-index:50; box-shadow:4px 10px 28px rgba(0,25,65,.55); }.window.maximized { inset:0 0 var(--task-h)!important; width:100%!important; max-height:none; border-radius:0; }
.titlebar { flex:0 0 31px; display:flex; justify-content:space-between; align-items:center; padding:3px 4px 3px 7px; border-radius:5px 5px 0 0; color:#fff; background:linear-gradient(#3e91f9 0,#1c6de4 13%,#0755c7 70%,#1d6de2 100%); text-shadow:1px 1px #0b368d; user-select:none; }.titlebar > div:first-child { display:flex; min-width:0; align-items:center; gap:7px; }.titlebar strong { overflow:hidden; font:700 13px/1 Tahoma,sans-serif; white-space:nowrap; text-overflow:ellipsis; }.tiny-icon { display:grid; width:18px; height:18px; place-items:center; color:#123a88; background:#fff; text-shadow:none; font-weight:900; }
.window-controls { display:flex; gap:2px; }.window-controls button { display:grid; width:24px; height:22px; place-items:center; padding:0; border:1px solid #fff; border-radius:3px; color:#fff; background:linear-gradient(#5ba0ee,#1760c5); box-shadow:inset 0 0 0 1px #164daf; font:900 13px/1 Arial; text-shadow:1px 1px #123b85; }.window-controls button[data-close] { background:linear-gradient(#f28f76,#d8462e); box-shadow:inset 0 0 0 1px #a42c1d; }
.browser-menu { flex:0 0 24px; display:flex; align-items:center; gap:17px; padding:0 9px; border-bottom:1px solid #aca899; color:#222; background:#ece9d8; font:12px/1 Tahoma,sans-serif; }.addressbar { flex:0 0 30px; display:flex; align-items:center; gap:7px; padding:3px 5px; border-bottom:1px solid #999; background:#ece9d8; font:12px Tahoma,sans-serif; }.addressbar span { flex:1; padding:3px 5px; border:1px solid #7f9db9; background:#fff; }.addressbar button { height:22px; border:1px solid #888; background:#f5f3e8; }
.window-content { min-height:0; flex:1; overflow:auto; background:#fff; }.statusbar { flex:0 0 22px; display:flex; gap:3px; padding:2px; color:#333; background:#ece9d8; font:11px Tahoma,sans-serif; }.statusbar span { min-width:80px; flex:1; padding:2px 5px; border:1px solid; border-color:#aca899 #fff #fff #aca899; }
.homepage { color:#000080; background:#fff url("data:image/gif;base64,R0lGODlhBAAEAIAAAP///+vr6yH5BAEAAAEALAAAAAAEAAQAAAIFhI9pWQAAOw=="); font-family:"Times New Roman",serif; }.under-construction { padding:5px; color:#000; background:#f8ed27; font:bold 11px/1.2 var(--pixel); text-align:center; }.homepage-hero { max-width:560px; margin:auto; padding:24px 32px; text-align:center; }.homepage h1 { margin:8px 0; color:#c00000; font-size:clamp(2.2rem,6vw,4.5rem); line-height:.9; text-shadow:2px 2px #ffd700; }.homepage-hero > p:not(.hit-counter,.blink) { color:#111; font-size:17px; line-height:1.45; }.hit-counter { margin:0; color:#333; font:bold 10px var(--pixel); }.hit-counter span { padding:3px 5px; color:#45ff3d; background:#000; letter-spacing:.12em; }.blink { color:#0000ee; font:bold 14px var(--pixel); animation:blink .8s steps(2) infinite; }.hero-rule { height:5px; margin:18px 0; background:linear-gradient(90deg,#f00,#ff0,#0a0,#0ff,#00f,#f0f); }.web-buttons { display:flex; flex-wrap:wrap; justify-content:center; gap:9px; }.web-buttons button,.web-buttons a { padding:6px 9px; border:2px outset #ddd; color:#fff; background:#000080; font:bold 11px var(--pixel); text-decoration:none; }.now-playing { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; margin:10px 20px 20px; padding:8px; border:2px inset #ddd; color:#31f331; background:#080808; font:11px var(--pixel); }.now-playing span { color:#ffdf32; }.now-playing b { overflow:hidden; white-space:nowrap; }.homepage footer { padding:7px 15px; border-top:1px dotted #777; color:#444; font:11px var(--pixel); text-align:center; }
.explorer-page { color:#111; font-family:Verdana,sans-serif; }.explorer-page > header { padding:24px; color:#fff; background:linear-gradient(130deg,#001a68,#1064bd 70%,#6ab3f0); }.explorer-page header p { margin:0; font:bold 10px var(--pixel); letter-spacing:.15em; }.explorer-page h2 { margin:7px 0 0; font-size:2rem; }.explorer-page article { display:grid; grid-template-columns:54px 1fr auto; gap:15px; align-items:center; padding:18px; border-bottom:1px solid #ccd8e2; }.project-number { display:grid; width:48px; height:48px; place-items:center; color:#fff; background:#164c9d; font:bold 18px var(--pixel); }.explorer-page h3 { margin:0 0 4px; color:#063e91; }.explorer-page p { margin:0 0 7px; font-size:13px; line-height:1.45; }.explorer-page small { color:#666; }.explorer-page article > a { padding:7px; border:1px solid #275b9d; color:#0645ad; font:bold 10px var(--pixel); }.web-ring { padding:16px; color:#444; background:#fff8d3; font:bold 11px var(--pixel); text-align:center; }
.my-computer { display:grid; grid-template-columns:190px 1fr; min-height:430px; background:#fff; }.my-computer > aside { padding:14px; background:linear-gradient(#7ba2e7,#637bc5); }.my-computer aside h3 { margin:0 0 5px; padding:6px; border-radius:7px 7px 0 0; color:#17499c; background:#fff; font-size:13px; }.my-computer aside button,.my-computer aside a { display:block; width:100%; padding:5px 8px; border:0; color:#063a91; background:#d6e3fb; font-size:11px; text-align:left; text-decoration:none; }.my-computer aside h3:not(:first-child) { margin-top:18px; }.drives { padding:16px; }.drives h2 { margin:0 0 12px; padding-bottom:5px; border-bottom:1px solid #80a5dd; color:#275caa; font-size:14px; }.drives > button { display:inline-grid; grid-template-columns:45px 1fr; margin:0 20px 20px 0; padding:7px; border:1px solid transparent; background:transparent; text-align:left; }.drives > button:hover { border-color:#84a9d7; background:#e6f0ff; }.drives > button span { grid-row:1/3; font-size:28px; }.drives > button b { font-size:12px; }.drives > button small { color:#666; }.drive { display:grid; grid-template-columns:54px 1fr; gap:10px; margin-bottom:18px; }.drive-art { font-size:42px; color:#777; }.drive div { display:grid; align-content:center; gap:4px; }.drive i { display:block; height:12px; border:1px solid #777; background:#fff; }.drive em { display:block; height:100%; background:#345fc7; }.drive small { color:#555; font-size:10px; }.skill-folders { display:grid; grid-template-columns:1fr 1fr; gap:9px; font-size:12px; }
.note-paper { min-height:410px; padding:6px; overflow:auto; color:#111; background:#fff; font:14px/1.45 "Lucida Console",monospace; white-space:pre-wrap; }.game-shell { min-height:520px; background:#000; }.duke-titlebar { background:linear-gradient(#676767,#242424); }.dos-intro { min-height:520px; display:grid; grid-template-columns:190px 1fr; gap:30px; place-items:center; padding:42px; color:#ddd; background:radial-gradient(circle at 30% 30%,#3e3200,#090900 46%,#000 70%); font-family:var(--pixel); }.duke-badge { display:grid; width:150px; height:150px; place-items:center; border:8px solid #f2c900; border-radius:50%; color:#f3dd18; background:#111; box-shadow:0 0 0 6px #111,0 0 35px rgba(255,220,0,.5); font:900 35px/.75 Impact,sans-serif; text-align:center; transform:rotate(-4deg); }.duke-badge span { font-size:65px; }.dos-intro h2 { margin:8px 0; color:#f4d80a; font:900 2rem/1 Impact,sans-serif; letter-spacing:.04em; }.dos-intro p { line-height:1.5; }.dos-intro button { padding:11px 15px; border:3px outset #eee; color:#000; background:#f6d618; font:bold 13px var(--pixel); }.dos-intro small { display:block; margin-top:16px; color:#888; line-height:1.5; }.game-shell.running .dos-intro { display:none; }#dos-player { width:100%; height:520px; display:none; }.game-shell.running #dos-player { display:block; }
.paint-app { padding:8px; background:#c0c0c0; }.paint-tools { display:flex; gap:5px; align-items:center; margin-bottom:7px; }.paint-tools button { width:30px; height:30px; border:2px outset #eee; background:#ddd; }.paint-tools label { margin-left:auto; font-size:12px; }.paint-app canvas { display:block; width:100%; height:auto; border:3px inset #eee; background:#fff; touch-action:none; }.palette { display:flex; margin-top:6px; }.palette i { width:25px; height:18px; border:1px solid #555; }.palette i:nth-child(1){background:#000}.palette i:nth-child(2){background:#fff}.palette i:nth-child(3){background:#f00}.palette i:nth-child(4){background:#ff0}.palette i:nth-child(5){background:#0a0}.palette i:nth-child(6){background:#0ff}.palette i:nth-child(7){background:#00f}.palette i:nth-child(8){background:#f0f}
.mines-app { padding:9px; background:#c0c0c0; }.mine-score { display:grid; grid-template-columns:1fr 44px 1fr; gap:12px; align-items:center; margin-bottom:8px; padding:6px; border:3px inset #eee; }.mine-score span { padding:4px; color:#f22; background:#000; font:25px/1 var(--pixel); letter-spacing:.08em; }.mine-score span:last-child { text-align:right; }.mine-score button { height:38px; border:3px outset #eee; background:#c0c0c0; font-size:21px; }.mine-grid { display:grid; grid-template-columns:repeat(9,1fr); border:3px inset #eee; }.mine-cell { aspect-ratio:1; display:grid; place-items:center; padding:0; border:2px outset #eee; background:#c0c0c0; font:bold 15px Arial; }.mine-cell.revealed { border:1px solid #888; background:#c0c0c0; }.mine-cell.flagged::after { content:"🚩"; font-size:12px; }.mine-cell[data-n="1"]{color:#00f}.mine-cell[data-n="2"]{color:#087b08}.mine-cell[data-n="3"]{color:#f00}.recycle { padding:20px; }.recycle ul { min-height:150px; padding:12px 12px 12px 32px; border:1px solid #aaa; background:#fff; font:12px/1.7 Tahoma,sans-serif; }.recycle button { padding:7px 10px; }
.taskbar { position:absolute; z-index:1000; inset:auto 0 0; display:flex; height:var(--task-h); align-items:stretch; color:#fff; background:linear-gradient(#316fe8 0,#245edb 12%,#194ec3 88%,#1746ad); box-shadow:inset 0 2px rgba(255,255,255,.35); }.start-button { display:flex; flex:0 0 112px; align-items:center; gap:8px; padding:0 15px 0 10px; border:0; border-radius:0 16px 16px 0; color:#fff; background:linear-gradient(#57b64c,#2e8d2c 15%,#1f7921 85%,#165d18); box-shadow:inset -2px 0 4px rgba(0,0,0,.35),inset 0 2px rgba(255,255,255,.45); font:italic 700 18px/1 var(--ui); text-shadow:1px 1px #164a1a; }.windows-mark { width:25px; height:23px; flex:none; }.quick-launch { display:flex; align-items:center; gap:3px; padding:0 7px; border-right:1px solid #0e47ae; }.quick-launch button { width:28px; height:28px; padding:0; border:0; color:#ffda28; background:transparent; font:bold 20px Arial; }.task-buttons { min-width:0; flex:1; display:flex; gap:4px; align-items:center; padding:3px; overflow:hidden; }.task-button { min-width:110px; max-width:190px; flex:1; height:33px; overflow:hidden; padding:0 10px; border:1px solid #174394; border-radius:3px; color:#fff; background:#3b7ae2; font:12px Tahoma,sans-serif; text-align:left; white-space:nowrap; text-overflow:ellipsis; box-shadow:inset 1px 1px rgba(255,255,255,.25); }.task-button.active { background:#1850ad; box-shadow:inset 2px 2px rgba(0,0,0,.2); }.system-tray { display:flex; min-width:132px; align-items:center; justify-content:flex-end; gap:7px; padding:0 10px; border-left:1px solid #0f6eb8; background:linear-gradient(#19a6e9,#0d86d0); font:11px Tahoma,sans-serif; }
.start-menu { position:absolute; z-index:1100; left:0; bottom:var(--task-h); width:410px; border:2px solid #1452b5; border-radius:7px 7px 0 0; background:#fff; box-shadow:4px -4px 18px rgba(0,0,0,.35); }.start-menu[hidden] { display:none; }.start-menu header { display:flex; align-items:center; gap:10px; padding:10px; color:#fff; background:linear-gradient(#1f78dc,#1762c1); font-size:16px; text-shadow:1px 1px #17417a; }.avatar { display:grid; width:46px; height:46px; place-items:center; border:2px solid #fff; border-radius:5px; color:#0d4b9a; background:#dcedff; font:bold 16px var(--pixel); }.start-columns { display:grid; grid-template-columns:1.25fr .85fr; }.start-columns section { padding:8px; }.start-columns button,.start-columns a { width:100%; border:0; color:#111; background:transparent; text-decoration:none; text-align:left; }.start-columns section button,.start-program { display:grid; grid-template-columns:40px 1fr; padding:7px; }.start-columns section button:hover,.start-program:hover,.start-columns aside button:hover,.start-columns aside a:hover { background:#2f71cd; color:#fff; }.start-columns section button span,.start-program span { grid-row:1/3; font-size:25px; }.start-columns section button b,.start-program b { font-size:12px; }.start-columns section button small,.start-program small { color:#777; font-size:10px; }.start-columns aside { padding:8px; background:#d3e5fb; }.start-columns aside button,.start-columns aside a { display:block; padding:8px; color:#143e76; font-size:12px; }.start-menu footer { display:flex; justify-content:flex-end; gap:12px; padding:8px; color:#fff; background:#316ac5; }.start-menu footer button { border:0; color:#fff; background:transparent; font-size:11px; }
@keyframes boot { from{transform:translateX(-50px)}to{transform:translateX(170px)} }@keyframes blink { 50%{visibility:hidden} }
@media (max-width:700px) {
  :root { --task-h:52px; }.wallpaper-copy { right:4vw; bottom:12vh; opacity:.75; }.wallpaper-copy strong { font-size:18vw; }.desktop-icons { grid-template-rows:repeat(7,78px); grid-auto-flow:row; }.desktop-icon { width:72px; min-height:72px; }.icon { transform:scale(.86); }.window { left:4px!important; top:4px!important; width:calc(100% - 8px)!important; max-height:calc(100% - var(--task-h) - 8px); }.window:not(.active-window) { display:none; }.window.active-window { display:flex; }.browser-menu { gap:12px; overflow:hidden; }.addressbar b,.addressbar button { display:none; }.homepage-hero { padding:19px 16px; }.homepage h1 { font-size:2.5rem; }.homepage-hero > p:not(.hit-counter,.blink) { font-size:15px; }.explorer-page article { grid-template-columns:45px 1fr; }.explorer-page article > a { grid-column:2; justify-self:start; }.my-computer { grid-template-columns:1fr; }.my-computer > aside { display:none; }.skill-folders { grid-template-columns:1fr; }.dos-intro { grid-template-columns:1fr; min-height:560px; padding:25px; text-align:center; }.duke-badge { width:110px; height:110px; font-size:24px; }.duke-badge span { font-size:45px; }#dos-player { height:580px; }.task-buttons { display:none; }.quick-launch { flex:1; }.system-tray { min-width:105px; }.system-tray span { display:none; }.start-menu { width:min(410px,100%); }.start-button { flex-basis:105px; }.paint-tools { flex-wrap:wrap; }.game-window { max-height:calc(100% - var(--task-h)); }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }