@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

:root{
  --bg:#070b0b; --panel:#0b1211; --line:#28423a; --text:#d8ffe9;
  --muted:#7ba18e; --accent:#76ffb0; --danger:#ff6d6d;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:"Share Tech Mono",monospace}
button{font:inherit;color:inherit}
.hidden{display:none!important}
.screen{position:fixed;inset:0;background:#020403;display:grid;place-items:center}
.boot-box{width:min(760px,88vw)}
.brand{font-size:clamp(20px,3vw,36px);letter-spacing:2px;margin-bottom:38px}
.brand span{color:var(--muted);font-size:.55em}
.boot-line{min-height:30px;color:var(--muted);margin-bottom:12px}
.progress{height:10px;border:1px solid var(--line);padding:2px}
.progress>div{height:100%;width:0;background:var(--accent);box-shadow:0 0 14px #76ffb0}
.boot-status{margin-top:12px;color:var(--muted);font-size:12px}
#enterBtn{margin-top:32px;background:transparent;border:1px solid var(--accent);padding:12px 22px;cursor:pointer}
#enterBtn:hover{background:var(--accent);color:#031009}

.desktop{position:fixed;inset:0;background:
 radial-gradient(circle at 70% 30%,rgba(40,100,70,.12),transparent 30%),
 linear-gradient(135deg,#050908,#07100e 55%,#030606)}
.wallpaper-grid{position:absolute;inset:0;opacity:.12;background-image:linear-gradient(var(--accent) 1px,transparent 1px),linear-gradient(90deg,var(--accent) 1px,transparent 1px);background-size:70px 70px;transform:perspective(500px) rotateX(55deg) scale(1.7) translateY(20%);transform-origin:center bottom}
.desktop-title{position:absolute;right:28px;top:22px;text-align:right;color:var(--muted);line-height:1.5;font-size:12px}
.desktop-title div{color:var(--text);font-size:16px}.green{color:var(--accent)}
.icons{position:absolute;top:28px;left:28px;display:grid;grid-template-columns:repeat(2,90px);gap:18px 12px}
.icon{width:90px;height:82px;background:transparent;border:1px solid transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;cursor:pointer}
.icon:hover{border-color:var(--line);background:rgba(118,255,176,.05)}
.icon span{font-size:30px;filter:grayscale(.25)}
.icon b{font-size:11px;font-weight:400}

.window{position:absolute;width:min(620px,82vw);min-height:220px;max-height:72vh;background:rgba(7,14,12,.97);border:1px solid var(--accent);box-shadow:0 0 35px rgba(118,255,176,.08);z-index:5}
.titlebar{height:34px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 10px;background:#0d1814;cursor:grab;user-select:none}
.titlebar b{font-size:12px;font-weight:400}.win-buttons{display:flex;gap:5px}.win-buttons button{border:1px solid var(--line);background:#08100d;width:24px;height:22px;cursor:pointer}.win-buttons button:hover{border-color:var(--accent)}
.window-content{padding:18px;overflow:auto;max-height:calc(72vh - 35px);line-height:1.6;font-size:14px}
.window-content h2{margin:0 0 12px;color:var(--accent);font-size:20px}
.window-content h3{color:var(--accent);font-size:14px;margin-top:20px}
.window-content .warning{color:var(--danger)}
.window-content .dim{color:var(--muted)}
.stat{display:grid;grid-template-columns:150px 1fr;gap:6px;border-bottom:1px dashed var(--line);padding:6px 0}
.card{border:1px solid var(--line);padding:12px;margin:10px 0;background:rgba(118,255,176,.025)}
.fake-photo{height:150px;border:1px dashed var(--line);display:grid;place-items:center;font-size:48px;margin-bottom:12px}
.cmdline{display:flex;gap:8px}.cmdline span{color:var(--accent)}#terminalInput{flex:1;background:transparent;border:0;outline:0;color:var(--text);font:inherit}
.terminal-output{white-space:pre-wrap;min-height:180px;color:#b9e7c9}
a{color:var(--accent)}
.taskbar{position:absolute;left:0;right:0;bottom:0;height:40px;background:rgba(4,9,7,.96);border-top:1px solid var(--line);display:flex;align-items:center;gap:8px;padding:4px 8px;z-index:20}
.start{height:30px;border:1px solid var(--accent);background:#09140f;cursor:pointer;padding:0 14px}.start:hover{background:var(--accent);color:#031009}
#taskItems{display:flex;gap:5px;flex:1}.task{height:30px;background:#0a1511;border:1px solid var(--line);padding:0 10px;cursor:pointer;font-size:11px}.clock{font-size:12px;color:var(--muted);padding:0 7px}
.start-menu{position:absolute;left:8px;bottom:47px;width:260px;background:#08100d;border:1px solid var(--accent);z-index:30;box-shadow:0 0 30px rgba(0,0,0,.5)}.menu-header{padding:14px;border-bottom:1px solid var(--line);color:var(--accent)}.start-menu button{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid #13221c;background:transparent;padding:12px;cursor:pointer}.start-menu button:hover{background:#102018}
#toast{position:fixed;right:20px;bottom:58px;background:#08100d;border:1px solid var(--accent);padding:12px 16px;z-index:100;opacity:0;transform:translateY(8px);transition:.2s}.toast-show{opacity:1!important;transform:none!important}
#scanlines{position:fixed;inset:0;pointer-events:none;z-index:1000;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.018) 0,rgba(255,255,255,.018) 1px,transparent 1px,transparent 4px);mix-blend-mode:screen}

@media(max-width:650px){
 .icons{grid-template-columns:repeat(3,70px);gap:7px}.icon{width:70px;height:70px}.icon span{font-size:25px}.icon b{font-size:9px}
 .desktop-title{display:none}.window{width:94vw;max-height:78vh}.window-content{font-size:13px}.stat{grid-template-columns:110px 1fr}
}