@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@500;700&display=swap');

:root { --ink: #182129; --paper: #f7f4eb; --accent: #62d3c5; --desktop: #277d82; --window: #f7f4eb; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; padding: 24px; background: radial-gradient(circle at 10% 0%, #f3b55b 0 13%, transparent 32%), linear-gradient(135deg, #20384b, #73518f); color: var(--ink); font-family: 'Space Grotesk', sans-serif; }
main { width: min(980px, 100%); margin: auto; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
a { color: var(--paper); font-weight: 700; }
.notice, .eyebrow { color: var(--paper); font: 500 .72rem 'DM Mono', monospace; letter-spacing: .12em; text-transform: uppercase; }
.notice { padding: 8px 10px; border: 1px solid rgba(255,255,255,.6); border-radius: 4px; }
.intro { margin: 58px 0 22px; color: var(--paper); }
h1 { margin: 0; font-size: clamp(3rem, 8vw, 6rem); line-height: .9; letter-spacing: -.05em; }
.intro p:last-child { max-width: 570px; margin: 18px 0 0; font-size: 1.1rem; }
.os-picker { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.os-choice { padding: 10px 14px; border: 2px solid var(--paper); border-radius: 4px; background: transparent; color: var(--paper); cursor: pointer; font: 700 .95rem 'Space Grotesk', sans-serif; }
.os-choice span { margin-right: 5px; }
.os-choice.active, .os-choice:hover { background: var(--paper); color: var(--ink); }
.vm-shell { overflow: hidden; border: 4px solid var(--ink); border-radius: 8px; background: var(--ink); box-shadow: 8px 8px 0 rgba(0,0,0,.28); }
.vm-bar { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; background: var(--ink); color: var(--paper); font: 500 .78rem 'DM Mono', monospace; }
.vm-bar span:first-child { margin-right: auto; }
.vm-light { width: 9px; height: 9px; border-radius: 50%; background: #e98468; }
.vm-light:nth-child(3) { background: #f0c563; }.vm-light:nth-child(4) { background: #65c79d; }
.desktop { position: relative; min-height: 520px; overflow: hidden; padding: 20px; background: var(--desktop); color: var(--paper); }
.desktop::before { position: absolute; inset: 0; background: radial-gradient(circle at 72% 27%, rgba(255,255,255,.12), transparent 26%), linear-gradient(135deg, transparent 55%, rgba(0,0,0,.14)); content: ''; pointer-events: none; }
.desktop-icons { position: relative; z-index: 1; display: grid; width: 80px; gap: 18px; }
.desktop-icon { display: grid; justify-items: center; gap: 6px; border: 0; background: transparent; color: var(--paper); cursor: pointer; font: 500 .76rem 'DM Mono', monospace; text-shadow: 1px 1px 2px rgba(0,0,0,.4); }
.desktop-icon:hover { color: #fff1b4; }
.icon { display: grid; place-items: center; width: 46px; height: 46px; border: 2px solid rgba(255,255,255,.7); border-radius: 7px; background: rgba(20,35,45,.35); font: 700 1.1rem 'DM Mono', monospace; }
.welcome { position: absolute; top: 40%; right: 10%; display: grid; gap: 8px; max-width: 360px; text-align: right; opacity: .9; }
.welcome strong { font-size: clamp(1.2rem, 3vw, 2rem); }.welcome span { font: .85rem 'DM Mono', monospace; }
.window { position: absolute; z-index: 2; top: 12%; left: 18%; width: min(590px, 76%); min-height: 245px; border: 2px solid var(--ink); border-radius: 5px; background: var(--window); color: var(--ink); box-shadow: 8px 8px 0 rgba(0,0,0,.32); }
.window-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; background: var(--ink); color: var(--paper); font: .8rem 'DM Mono', monospace; }
.window-head button { border: 0; background: transparent; color: var(--paper); cursor: pointer; font-size: 1.2rem; line-height: 1; }
.window-body { min-height: 200px; padding: 18px; font: .86rem/1.6 'DM Mono', monospace; }
.window-body code { color: #278579; }.file-list { display: grid; gap: 12px; }.file-list span { padding: 10px; background: #e7eee7; }.browser-card { display: grid; gap: 10px; }.browser-card input { padding: 9px; border: 1px solid #9aa6a0; font: .85rem 'DM Mono', monospace; }.browser-card button { width: fit-content; padding: 8px 12px; border: 0; background: var(--accent); cursor: pointer; font-weight: 700; }
.taskbar { position: absolute; z-index: 3; right: 0; bottom: 0; left: 0; display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 12px; background: rgba(16,29,35,.8); color: var(--paper); font: .75rem 'DM Mono', monospace; }.taskbar #clock { margin-left: auto; }.taskbar button { border: 1px solid rgba(255,255,255,.45); background: transparent; color: var(--paper); cursor: pointer; font: .7rem 'DM Mono', monospace; padding: 5px 8px; }
.disclaimer { margin: 20px 0 0; color: var(--paper); font: .8rem/1.5 'DM Mono', monospace; opacity: .85; }

body[data-os="macos"] { --desktop: #a8c4c5; --accent: #e6b7d2; }.macos-theme {}
body[data-os="linux"] { --desktop: #4b526d; --accent: #f2a65a; }
@media (max-width: 620px) { body { padding: 18px; }.intro { margin-top: 44px; }.desktop { min-height: 470px; }.window { left: 5%; width: 90%; }.welcome { right: 8%; bottom: 80px; top: auto; }.desktop-icons { gap: 14px; } }