:root { --silver:#c0c0c0; --navy:#000080; --teal:#008080; --black:#080808; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; overflow:hidden; }
body { font-family:"MS Sans Serif",Tahoma,Arial,sans-serif; color:#000; }
button,a { font:inherit; }
button { color:#000; }

.desktop { position:relative; width:100vw; height:100svh; overflow:hidden; background:linear-gradient(rgba(230,246,244,.25),rgba(206,235,232,.32)),url('assets/fivestar-1.jpg') center 42%/cover no-repeat; }
.desktop::after { content:""; position:absolute; inset:0 0 34px; pointer-events:none; background:linear-gradient(90deg,rgba(0,128,128,.18),transparent 38%,rgba(255,255,255,.2)); }
.startup-screen { position:fixed;z-index:1000;inset:0;display:grid;place-items:center }
.startup-gate { color:#d8d8d8;background:#050505 }
.startup-gate-panel { width:min(520px,calc(100vw - 40px));font-family:'Courier New',monospace;text-align:left }
.startup-gate-panel>p { margin:0 0 36px;color:#9d9d9d;font-size:12px;letter-spacing:.08em }
.startup-gate-panel h1 { margin:0 0 28px;color:#fff;font-size:clamp(26px,5vw,42px);font-weight:400;letter-spacing:-.06em }
.startup-gate-panel button { padding:9px 15px;display:inline-flex;align-items:center;gap:9px;color:#000;background:var(--silver);border:3px outset #fff;font:bold 13px 'MS Sans Serif',Tahoma,sans-serif;cursor:pointer }
.startup-gate-panel button:active { border-style:inset }
.startup-gate-panel small { display:block;margin-top:18px;color:#727272;font-size:10px }
.startup-cursor { display:block;margin-bottom:16px;color:#00d64f;font-size:20px;animation:cursor-blink .85s steps(1) infinite }
.startup-booting { overflow:hidden;background:#63a6e4 }
.boot-card { position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;color:#07076d;background:linear-gradient(#66aae8 0 60%,#eaf4ff 60% 100%) }
.boot-mark { position:relative;z-index:2;display:flex;align-items:flex-end;filter:drop-shadow(3px 3px 0 rgba(255,255,255,.8));font-family:Arial,sans-serif;font-style:italic;line-height:.8 }
.boot-mark span { font-size:clamp(55px,12vw,112px);font-weight:900;letter-spacing:-.1em }
.boot-mark b { margin-left:14px;color:#fff;font-size:clamp(23px,5vw,46px);text-shadow:2px 2px #000080 }
.boot-mark i { position:absolute;right:-26px;top:-14px;padding:4px;color:#fff;background:#eb2f27;font:bold 18px Arial;transform:rotate(-7deg);border:2px outset #ffb1a8 }
.boot-card>p { position:relative;z-index:2;margin:28px 0 38px;color:#fff;font:bold italic clamp(13px,2vw,18px) Arial;text-shadow:1px 1px #000080 }
.boot-progress { position:relative;z-index:2;width:min(420px,70vw);height:22px;padding:3px;background:#fff;border:2px inset #e8e8e8 }
.boot-progress i { display:block;height:100%;background:repeating-linear-gradient(90deg,#000080 0 12px,transparent 12px 16px);animation:boot-load 6.15s steps(28) forwards }
.boot-card>small { position:relative;z-index:2;margin-top:10px;color:#202060;font-size:11px }
.boot-cloud { position:absolute;width:420px;height:120px;border-radius:50%;background:rgba(255,255,255,.72);filter:blur(5px) }
.boot-cloud::before,.boot-cloud::after { content:"";position:absolute;border-radius:50%;background:inherit }.boot-cloud::before{width:190px;height:190px;left:80px;top:-70px}.boot-cloud::after{width:250px;height:160px;right:15px;top:-40px}
.boot-cloud-one { left:-70px;top:17% }.boot-cloud-two { right:-90px;bottom:22%;transform:scale(.75) }
@keyframes boot-load { from{width:0} to{width:100%} }
@keyframes cursor-blink { 50%{opacity:0} }
.version-stamp { position:absolute; top:18px; right:20px; z-index:2; padding:5px 8px; color:rgba(255,255,255,.8); background:rgba(0,64,64,.45); font-size:10px; letter-spacing:.08em; border:1px solid rgba(255,255,255,.4); }

.desktop-icons { position:relative; z-index:3; display:grid; grid-template-columns:82px; gap:16px; padding:20px 12px; }
.desktop-icon { width:78px; min-height:72px; padding:2px; display:flex; flex-direction:column; align-items:center; gap:5px; color:#fff; text-decoration:none; border:1px solid transparent; background:transparent; text-shadow:1px 1px #000; cursor:default; }
.desktop-icon:hover,.desktop-icon:focus-visible { background:rgba(0,0,128,.28); border:1px dotted #fff; outline:none; }
.desktop-icon b { max-width:76px; font-size:11px; line-height:1.15; text-align:center; }
.pixel-icon { position:relative; width:38px; height:32px; display:grid; place-items:center; filter:drop-shadow(2px 2px 0 rgba(0,0,0,.35)); }
.folder { margin-top:4px; height:27px; background:#f5d432; border:2px solid #222; box-shadow:inset 2px 2px #fff4a0,inset -2px -2px #b28c00; }
.folder::before { content:""; position:absolute; width:18px; height:7px; left:1px; top:-8px; background:#f5d432; border:2px solid #222; border-bottom:0; }
.music-folder::after { content:"♪"; color:#000080; font-size:18px; font-weight:bold; }
.disc { border-radius:50%; background:radial-gradient(circle,#111 0 10%,#ddd 11% 18%,#2974b8 19% 32%,#c4e7ff 33% 46%,#444 47% 55%,#e9f8ff 56%); color:#fff; font-weight:bold; }
.modem-icon { width:46px;height:46px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(2px 2px 0 rgba(0,0,0,.35)) }
.future { border:2px outset #ddd; background:#111b49; color:#7ff; font:bold 22px Arial; }

.window { position:absolute; z-index:8; left:50%; top:48%; width:min(700px,calc(100vw - 210px)); min-height:390px; transform:translate(-50%,-50%); padding:3px; background:var(--silver); border:2px outset #fff; box-shadow:6px 8px 0 rgba(0,0,0,.28); }
.window-welcome { width:min(610px,calc(100vw - 210px)); min-height:340px; }
.titlebar { height:25px; padding:3px 3px 3px 5px; display:flex; align-items:center; justify-content:space-between; color:#fff; background:linear-gradient(90deg,#000080,#1084d0); }
.titlebar>div { display:flex; align-items:center; gap:5px; }.titlebar strong{font-size:12px;letter-spacing:.01em}.tiny-app-icon{width:18px;height:17px;display:grid;place-items:center;color:#fff;background:#008080;font:bold 7px Arial;border:1px solid #fff}
.window-controls{display:flex!important;gap:3px!important}.window-controls button{width:20px;height:18px;padding:0;display:grid;place-items:center;font:bold 13px/1 Arial;background:var(--silver);border:2px outset #fff}.window-controls button:active{border-style:inset}
.menubar { height:23px; padding:4px 8px; display:flex; gap:18px; font-size:11px; border-bottom:1px solid #888; }.menubar span::first-letter{text-decoration:underline}
.window-body { margin:2px; background:#fff; border:2px inset #fff; min-height:300px; }
.welcome-body { display:grid; grid-template-columns:46% 54%; overflow:hidden; background:linear-gradient(135deg,#fff 0 46%,#bfe5e3 46%); }
.welcome-logo { min-height:294px; display:flex; align-items:flex-end; padding:24px; color:#fff; background:linear-gradient(rgba(0,128,128,.18),rgba(0,0,128,.58)),url('assets/fivestar-1.jpg') 45% center/cover; font:bold 34px Arial;text-shadow:2px 2px #000080}.welcome-logo span{color:#fe5d2a}.welcome-body>div:last-child{padding:55px 28px}.welcome-body h1{margin:0 0 18px;font:bold 34px Arial;color:#000080}.welcome-body p{font-size:16px;line-height:1.35}.win-button{margin-top:18px;padding:7px 16px;background:var(--silver);border:2px outset #fff;font-weight:bold}.win-button:active{border-style:inset}

.hidden{display:none!important}
.about-body { display:grid; grid-template-columns:42% 58%; }.about-body>img{width:100%;height:300px;object-fit:cover;filter:brightness(1.08) saturate(.7)}.about-body>div{padding:16px}.pathbar{padding:5px 7px;margin-bottom:18px;background:#fff;border:2px inset #fff;font:10px 'Courier New',monospace}.about-body h2,.player-info h2{margin:0;color:#000080;font:bold 38px Arial;letter-spacing:-.07em}.about-body p{font-size:15px;line-height:1.45}.small-copy{padding-top:14px;border-top:1px dotted #777;font:11px/1.5 'Courier New',monospace!important}
.music-body{padding:10px;background:#fff}.file-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:22px}.file-grid a{min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:#000;text-decoration:none;border:1px solid transparent}.file-grid a:hover,.file-grid a:focus-visible{border:1px dotted #000080;background:#e4e4ff;outline:none}.service-icon{width:50px;height:50px;display:grid;place-items:center;background:#008080;border:2px outset #fff}.service-icon img{width:28px;height:28px}.file-grid b{font-size:12px}.file-grid small{color:#666;font-size:9px}
.player-body{padding:20px;display:grid;grid-template-columns:250px 1fr;gap:24px;background:#111;color:#fff}.album-art{width:250px;height:250px;object-fit:cover;border:3px inset #ccc}.player-info>span{color:#3cff80;font:10px 'Courier New',monospace;letter-spacing:.2em}.player-info h2{margin-top:12px;color:#fff}.player-info p{margin:4px 0;color:#aaa}.progress{height:12px;margin:22px 0 14px;padding:2px;border:2px inset #bbb;background:#333}.progress i{display:block;width:38%;height:100%;background:#3cff80}.transport{display:flex;gap:6px}.transport button{width:38px;height:28px;background:var(--silver);border:2px outset #fff}.transport .play{width:48px}.spotify-button{margin-top:20px;padding:9px 12px;display:inline-flex;align-items:center;gap:8px;color:#fff;background:#1db954;text-decoration:none;border:2px outset #baffd2;font-size:11px;font-weight:bold}.spotify-button img{width:17px;height:17px}
.statusbar { height:22px;padding:3px;display:flex;gap:4px}.statusbar span{padding:2px 5px;flex:1;border:1px inset #fff;font-size:9px}.statusbar span:last-child{flex:0 0 90px}

.taskbar { position:absolute; z-index:20; left:0; right:0; bottom:0; height:35px; padding:3px; display:flex; gap:4px; align-items:center; background:var(--silver); border-top:2px outset #fff; }
.start-button { height:28px; padding:2px 7px; display:flex; align-items:center; gap:5px; background:var(--silver); border:2px outset #fff; font-size:12px; }.start-button.pressed,.start-button:active{border-style:inset}.start-logo{width:20px;height:20px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#f33 0 25%,#27a 25% 50%,#1a5 50% 75%,#fc2 75%);font:bold 7px Arial;text-shadow:1px 1px #000}.task-divider{height:27px;border-left:1px solid #777;border-right:1px solid #fff}.task-window{width:180px;height:27px;text-align:left;background:#ddd;border:2px inset #fff;font-size:11px}.task-window span{margin-right:5px;color:#fff;background:#008080;font-size:8px}.tray{margin-left:auto;height:27px;padding:3px 8px;display:flex;align-items:center;gap:9px;border:2px inset #fff;font-size:10px}
.start-menu { position:absolute; z-index:19; left:2px; bottom:35px; width:245px; min-height:255px; display:flex; background:var(--silver); border:2px outset #fff; box-shadow:3px 3px 0 rgba(0,0,0,.35); }
.start-rail { width:32px;padding:8px 4px;display:flex;align-items:flex-end;color:#fff;background:#7a7a7a;writing-mode:vertical-rl;transform:rotate(180deg);font:bold 18px Arial;letter-spacing:.04em}.start-rail b{color:#ccc;font-weight:400}.start-items{flex:1;padding:4px}.start-items button,.start-items a{width:100%;min-height:46px;padding:6px 8px;display:flex;align-items:center;gap:10px;color:#000;background:transparent;border:0;text-decoration:none;text-align:left;font-size:12px}.start-items button:hover,.start-items a:hover{color:#fff;background:#000080}.start-items span{font-size:22px}.start-items hr{margin:4px;border:0;border-top:1px solid #777;border-bottom:1px solid #fff}

.connect-dialog { position:absolute;z-index:30;left:50%;top:45%;width:min(360px,calc(100vw - 24px));padding:3px;transform:translate(-50%,-50%);background:var(--silver);border:2px outset #fff;box-shadow:7px 9px 0 rgba(0,0,0,.35) }
.connect-body { min-height:112px;padding:24px 20px;display:flex;align-items:center;gap:20px;background:#fff;border:2px inset #fff }
.connect-modem { flex:0 0 70px;width:70px;height:70px;object-fit:contain;image-rendering:pixelated }
.connect-body b { font-size:13px }.connect-body p { margin:7px 0 12px;font-size:11px }
.connection-lights { height:10px;display:flex;gap:4px }
.connection-lights i { width:10px;height:8px;background:#008000;border:1px inset #fff;animation:modem-light .55s steps(1) infinite }
.connection-lights i:nth-child(2){animation-delay:.1s}.connection-lights i:nth-child(3){animation-delay:.2s}.connection-lights i:nth-child(4){animation-delay:.3s}.connection-lights i:nth-child(5){animation-delay:.4s}
.connect-actions { padding:7px;display:flex;justify-content:flex-end }.connect-actions .win-button{margin:0;min-width:74px}
@keyframes modem-light { 0%,45%{background:#00f040;box-shadow:0 0 4px #00f040} 46%,100%{background:#315d31;box-shadow:none} }

@media(max-width:700px){.desktop{background-position:50% center}.version-stamp{top:8px;right:8px;font-size:8px}.desktop-icons{grid-template-columns:repeat(2,78px);gap:12px;width:180px}.window,.window-welcome{left:10px;right:10px;top:48%;width:auto;min-height:390px;transform:translateY(-50%)}.welcome-body{grid-template-columns:1fr}.welcome-logo{display:none}.welcome-body>div:last-child{padding:58px 28px}.about-body{grid-template-columns:1fr}.about-body>img{height:145px}.about-body>div{padding:12px}.file-grid{grid-template-columns:1fr;gap:4px;padding:8px}.file-grid a{min-height:70px;flex-direction:row;justify-content:flex-start;padding:8px}.file-grid small{margin-left:auto}.player-body{grid-template-columns:120px 1fr;padding:12px;gap:12px}.album-art{width:120px;height:120px}.player-info h2{font-size:28px}.progress{margin:12px 0}.spotify-button{font-size:9px}.task-window{width:110px}.window-body{min-height:330px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important}}