:root{
  --face:#c0c0c0; --hi:#fff; --shade:#808080; --dark:#000; --navy:#0a246a; --navy2:#1c5aa8;
  --bg:#06100f; --accent:#39ff9c; --tb:34px;
  --text:#000; --body-bg:#fff; --body-fg:#000; --tab-on:#dcdcdc; --btn-text:#000;
  --player-bg:#1b1b1f; --player-fg:#9cffc8; --pacc:#39ff9c; --trk-bg:#031a10;
  --media-bg:#111; --media-fg:#eee; --icon-text:#fff; --icon-shadow:1px 1px #000;
  --desk-bg:radial-gradient(ellipse at 30% 20%,#12302b 0,#06100f 60%,#020706 100%);
  --vid-bg:#020706; --vid-filter:none; --crt-lines:rgba(0,0,0,.16); --crt-vig:rgba(0,0,0,.7);
  --logo-filter:drop-shadow(0 0 10px rgba(0,0,0,.55)); --focus:#39ff9c;
  --tbi1:#6b6b6b; --tbi2:#a0a0a0; --menu-hover:#0a246a; --menu-hover-text:#fff;
  --font:"MS Sans Serif","Segoe UI",Tahoma,Verdana,Arial,sans-serif;
  --mono:"Courier New",Courier,monospace;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;min-height:100vh;min-height:100dvh;width:100%;overflow:hidden;background:#000;color:#000;font-family:var(--font);font-size:14px;
  overscroll-behavior:none;-webkit-text-size-adjust:100%}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
[hidden]{display:none!important}

/* ---------- BOOT ---------- */
#boot{position:fixed;inset:0;z-index:9999;background:#000;color:#cfcfcf;font-family:var(--mono);padding:16px;overflow:hidden}
.boot-bios{white-space:pre-wrap;font-size:13px;line-height:1.4;color:#b8b8b8}
.boot-bios .ok{color:var(--accent)}
.boot-logo{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#000;text-align:center;padding:20px}
.logo-text{font-family:var(--font);font-weight:900;font-size:clamp(34px,10vw,76px);line-height:.95;letter-spacing:2px;color:#e8e8e8;
  text-shadow:2px 0 #ff2a6d,-2px 0 #05d9e8;animation:flick 1.6s infinite steps(1)}
.logo-sub{margin:18px 0 14px;font-size:13px;color:#8a8a8a;letter-spacing:1px}
.bar{width:min(320px,80vw);height:20px;border:2px inset #777;background:#050505;padding:2px}
.bar span{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,var(--accent) 0 12px,transparent 12px 16px)}
#skipBoot{position:absolute;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));background:transparent;border:1px solid #444;color:#999;padding:10px 14px;font-family:var(--mono);font-size:12px;z-index:2}
.fade-out{animation:fadeout .5s forwards}
@keyframes fadeout{to{opacity:0;visibility:hidden}}
@keyframes flick{0%,92%,100%{opacity:1}93%{opacity:.6}95%{opacity:1}97%{opacity:.4}}

/* ---------- DESKTOP ---------- */
#desktop{position:fixed;top:0;left:0;width:100%;height:100vh;height:100dvh;overflow:hidden;
  background:var(--desk-bg);
  padding-bottom:var(--tb)}
body.booting #desktop{visibility:hidden}
#bgVideo{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;min-width:100%;min-height:100%;
  object-fit:cover;object-position:center center;z-index:0;pointer-events:none;background:var(--vid-bg);filter:var(--vid-filter);
  transform:translateZ(0);-webkit-transform:translateZ(0)}
#bgVideo::-webkit-media-controls,#bgVideo::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
.crt{position:absolute;inset:0;pointer-events:none;z-index:8000;
  background:repeating-linear-gradient(to bottom,transparent 0 2px,var(--crt-lines) 2px 3px);
  box-shadow:inset 0 0 120px var(--crt-vig)}
.wallpaper-logo{position:absolute;right:max(14px,2.5%);bottom:calc(var(--tb) + 14px + env(safe-area-inset-bottom,0px));
  width:clamp(130px,26vw,360px);height:auto;max-height:40%;object-fit:contain;filter:var(--logo-filter);pointer-events:none;user-select:none;-webkit-user-select:none}

.icons{position:absolute;top:10px;left:8px;display:flex;flex-direction:column;flex-wrap:wrap;gap:6px;max-height:calc(100% - var(--tb) - 20px);z-index:1}
.icon{width:84px;padding:6px 2px;background:transparent;border:1px dotted transparent;color:var(--icon-text);text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;text-shadow:var(--icon-shadow)}
.icon .ico{font-size:34px;line-height:1;filter:drop-shadow(1px 1px 0 rgba(0,0,0,.6))}
.icon.sel,.icon:focus-visible{background:rgba(10,36,106,.7);border-color:#fff;outline:none}

/* ---------- WINDOWS ---------- */
.win{position:absolute;display:flex;flex-direction:column;background:var(--face);
  border:2px solid;border-color:var(--hi) var(--dark) var(--dark) var(--hi);
  box-shadow:inset -1px -1px var(--shade),inset 1px 1px #dfdfdf,4px 4px 0 rgba(0,0,0,.5);
  padding:2px;min-width:260px;max-width:100vw;z-index:10}
.win.max{left:0!important;top:0!important;width:100%!important;height:calc(100% - var(--tb))!important}
.titlebar{display:flex;align-items:center;justify-content:space-between;gap:6px;height:28px;padding:2px 3px;
  background:linear-gradient(90deg,var(--navy),var(--navy2));color:#fff;font-weight:700;touch-action:none;user-select:none;-webkit-user-select:none;cursor:default;flex:none}
.win:not(.active) .titlebar{background:linear-gradient(90deg,var(--tbi1),var(--tbi2))}
.titlebar .t{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px}
.btns{display:flex;gap:2px;flex:none}
.btns button,.btn95,.controls button,.tab,#startBtn,.task{
  background:var(--face);border:2px solid;border-color:var(--hi) var(--dark) var(--dark) var(--hi);
  box-shadow:inset -1px -1px var(--shade);}
.btns button{width:24px;height:22px;padding:0;font-size:12px;font-weight:900;line-height:1;color:var(--btn-text)}
.btns button:active,.btn95:active,.controls button:active,.task.on,#startBtn.on{border-color:var(--dark) var(--hi) var(--hi) var(--dark);box-shadow:inset 1px 1px var(--shade)}
.menubar{display:flex;gap:14px;padding:3px 8px;font-size:13px;flex:none;border-bottom:1px solid var(--shade)}
.body{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;margin-top:2px;
  border:2px solid;border-color:var(--shade) var(--hi) var(--hi) var(--shade);background:var(--body-bg);color:var(--body-fg)}
.paper{padding:14px 16px;font-family:var(--mono);font-size:14px;line-height:1.5}
.paper h1{font-size:20px;margin:0 0 10px;letter-spacing:1px}
.paper p{margin:0 0 10px}
.blink{animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.glitch{position:relative}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;overflow:hidden;pointer-events:none}
.glitch::before{color:#ff2a6d;transform:translate(2px,0);clip-path:inset(0 0 55% 0);animation:gl 2.4s infinite steps(1)}
.glitch::after{color:#05d9e8;transform:translate(-2px,0);clip-path:inset(55% 0 0 0);animation:gl 2.4s infinite steps(1) reverse}
@keyframes gl{0%,90%,100%{opacity:0}92%,96%{opacity:.9}}

.btn95{display:inline-block;padding:8px 14px;text-decoration:none;color:var(--btn-text);text-align:center;font-size:13px;min-height:36px}
.btn95.wide{display:block;margin:8px}

.media-body,.social-body{background:var(--media-bg);display:flex;flex-direction:column}
.media-body iframe{flex:1;width:100%;min-height:352px;border:0;background:var(--media-bg)}
.social-body{position:relative}
.pane{display:none;flex-direction:column;flex:1;min-height:0}
.pane.on{display:flex}
.pane iframe{flex:1;width:100%;min-height:380px;border:0;background:#fff}
.tabs{display:flex;gap:2px;padding:4px 4px 0;flex:none}
.tab{padding:7px 14px;font-size:13px;border-bottom:0;min-height:34px}
.tab.on{font-weight:700;background:var(--tab-on)}
.yt-card{margin:auto;padding:24px;text-align:center;color:var(--media-fg);font-family:var(--font)}
.yt-card h2{margin:8px 0}
.yt-ico{width:84px;height:58px;margin:0 auto;border-radius:14px;background:#e00;color:#fff;font-size:30px;display:flex;align-items:center;justify-content:center}
.yt-card iframe{width:100%;aspect-ratio:16/9;border:0;min-height:0}
.pane#pane-yt{background:var(--media-bg)}

/* ---------- PLAYER ---------- */
.player{background:var(--player-bg);padding:8px;display:flex;flex-direction:column;gap:8px;color:var(--player-fg);font-family:var(--mono)}
.screen{position:relative;background:#000;border:2px inset #666;aspect-ratio:4/3;max-height:52vh;width:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none}
.screen img{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;display:block;opacity:0;transition:opacity .25s}
.screen img.show{opacity:1}
.screen-msg{position:absolute;color:#888}
.osd{position:absolute;left:8px;top:6px;font-size:12px;color:#39ff9c;text-shadow:0 0 6px #39ff9c}
.screen:fullscreen{max-height:none;aspect-ratio:auto}
.trackinfo{display:flex;justify-content:space-between;font-size:13px;background:var(--trk-bg);border:2px inset #555;padding:4px 8px;color:var(--pacc)}
.trackinfo span:first-child{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:8px}
#seek{width:100%;height:28px;margin:0;accent-color:var(--pacc);touch-action:pan-y}
.controls{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.controls button{min-width:46px;height:40px;font-size:15px;color:var(--btn-text)}
.controls button[aria-pressed="true"]{border-color:var(--dark) var(--hi) var(--hi) var(--dark);background:#9fe9bf}
.thumbs{display:flex;gap:6px;overflow-x:auto;padding:4px 2px 8px;-webkit-overflow-scrolling:touch}
.thumbs button{flex:none;width:64px;height:48px;padding:0;border:2px solid #444;background:#000;opacity:.65}
.thumbs button.on{border-color:var(--pacc);opacity:1}
.thumbs img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- START / TASKBAR ---------- */
#taskbar{position:absolute;left:0;right:0;bottom:0;height:var(--tb);padding:2px 3px calc(2px + env(safe-area-inset-bottom,0px));
  background:var(--face);border-top:2px solid var(--hi);display:flex;gap:4px;align-items:stretch;z-index:9000;box-sizing:content-box}
#startBtn{padding:0 12px;min-width:74px;font-size:14px}
#tasks{flex:1;display:flex;gap:4px;overflow-x:auto;min-width:0}
.task{flex:0 1 150px;min-width:48px;padding:0 8px;text-align:left;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px}
#tray{display:flex;align-items:center;padding:0 10px;border:2px inset #999;font-size:13px}
#startMenu{position:absolute;left:3px;bottom:calc(var(--tb) + 4px + env(safe-area-inset-bottom,0px));width:220px;display:flex;background:var(--face);
  border:2px solid;border-color:var(--hi) var(--dark) var(--dark) var(--hi);z-index:9100;box-shadow:3px 3px 0 rgba(0,0,0,.5)}
#startMenu .side{width:26px;background:linear-gradient(to top,var(--navy),var(--navy2));position:relative}
#startMenu .side span{position:absolute;left:3px;bottom:6px;writing-mode:vertical-rl;transform:rotate(180deg);color:#fff;font-weight:900;font-size:15px;white-space:nowrap}
#startMenu ul{list-style:none;margin:0;padding:2px;flex:1}
#startMenu li button{width:100%;text-align:left;background:transparent;border:0;padding:12px 10px;font-size:14px}
#startMenu li button:hover,#startMenu li button:active{background:var(--menu-hover);color:var(--menu-hover-text)}
#startMenu .sep{height:2px;margin:3px 2px;border-top:1px solid var(--shade);border-bottom:1px solid var(--hi)}

#off{position:fixed;inset:0;z-index:9990;background:#000;color:#ff9a1f;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;font-family:var(--font);font-size:clamp(18px,4.5vw,28px);gap:24px}

/* ---------- MOBILE ---------- */
@media (max-width:720px),(pointer:coarse) and (max-width:900px){
  .win{left:0!important;top:0!important;width:100%!important;height:calc(100% - var(--tb) - env(safe-area-inset-bottom,0px))!important;
    box-shadow:none;border-width:2px}
  .titlebar{height:36px}
  .btns button{width:34px;height:28px;font-size:14px}
  [data-act="max"]{display:none}
  .icons{flex-direction:row;flex-wrap:wrap;max-height:none;right:8px;gap:4px}
  .icon{width:calc(25% - 4px);min-width:70px}
  .icon .ico{font-size:38px}
  .wallpaper-logo{width:clamp(170px,48vw,280px);right:12px;max-height:34%}
  .screen{max-height:46vh}
  .media-body iframe{min-height:0}
  #startMenu{width:min(260px,80vw)}
  .task{flex-basis:90px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- THEMES ---------- */
.win,#taskbar,#startMenu,#themeMenu{color:var(--text)}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
#themeBtn{background:var(--face);border:2px solid;border-color:var(--hi) var(--dark) var(--dark) var(--hi);box-shadow:inset -1px -1px var(--shade);
  min-width:44px;padding:0 8px;font-size:16px;line-height:1}
#themeBtn.on{border-color:var(--dark) var(--hi) var(--hi) var(--dark);box-shadow:inset 1px 1px var(--shade)}
#themeMenu{position:absolute;right:3px;bottom:calc(var(--tb) + 4px + env(safe-area-inset-bottom,0px));width:min(220px,80vw);display:flex;flex-direction:column;padding:2px;
  background:var(--face);border:2px solid;border-color:var(--hi) var(--dark) var(--dark) var(--hi);z-index:9100;box-shadow:3px 3px 0 rgba(0,0,0,.5)}
#themeMenu button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:transparent;border:0;padding:12px 10px;font-size:14px}
#themeMenu button:hover,#themeMenu button:active{background:var(--menu-hover);color:var(--menu-hover-text)}
#themeMenu .chk{width:14px;text-align:center;font-weight:900}
#themeMenu button[aria-checked="true"] .chk::before{content:"\2714"}

html[data-theme="light"]{
  --face:#e4e4e4; --shade:#8c8c8c; --dark:#303030; --navy:#1f4fa3; --navy2:#3d7bd0;
  --player-bg:#f1f1f1; --player-fg:#0b5a36; --pacc:#0b7a45; --trk-bg:#e3f4ea;
  --media-bg:#eee; --media-fg:#111; --icon-text:#0a1a2a; --icon-shadow:0 0 4px #fff,0 0 2px #fff,1px 1px #fff;
  --desk-bg:radial-gradient(ellipse at 30% 20%,#dff3ee 0,#bcd8d2 60%,#a6c4be 100%);
  --vid-bg:#a6c4be; --vid-filter:brightness(1.35) contrast(.9) saturate(.85);
  --crt-lines:transparent; --crt-vig:rgba(255,255,255,.25);
  --logo-filter:drop-shadow(0 0 10px rgba(255,255,255,.7)); --focus:#0b5ed7;
  --tbi1:#8d8d8d; --tbi2:#bdbdbd; --menu-hover:#1f4fa3;
}
html[data-theme="light"] .icon.sel{background:rgba(31,79,163,.75);color:#fff;text-shadow:1px 1px #000}

html[data-theme="contrast"]{
  --face:#000; --hi:#fff; --shade:#fff; --dark:#fff; --navy:#00009c; --navy2:#00009c;
  --text:#fff; --body-bg:#000; --body-fg:#fff; --tab-on:#00009c; --btn-text:#fff;
  --player-bg:#000; --player-fg:#fff; --pacc:#ffff00; --trk-bg:#000;
  --media-bg:#000; --media-fg:#fff; --icon-text:#fff; --icon-shadow:1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000;
  --desk-bg:#000; --vid-bg:#000; --vid-filter:grayscale(1) invert(1);
  --crt-lines:transparent; --crt-vig:transparent;
  --logo-filter:drop-shadow(0 0 6px #fff); --focus:#ffff00;
  --tbi1:#333; --tbi2:#333; --menu-hover:#ffff00; --menu-hover-text:#000;
}
html[data-theme="contrast"] .icon.sel{background:#00009c;border-color:#ffff00}
html[data-theme="contrast"] .controls button[aria-pressed="true"]{background:#00009c}
html[data-theme="contrast"] .screen-msg{color:#fff}
html[data-theme="contrast"] .thumbs button{border-color:#fff;opacity:1}
html[data-theme="contrast"] .thumbs button.on{border-width:3px}
html[data-theme="contrast"] .btn95,html[data-theme="contrast"] a{color:#ffff00}
html[data-theme="contrast"] #startMenu .side{background:#00009c}