*,*::before,*::after{box-sizing:border-box}
:root{
  --paper:#dfe0ea; --ink:#2b2b33; --win:#f3f3f7; --winline:#55556a;
  --title:#2457a8; --title2:#1a3f80; --err:#17387a; --dialog:#c9ced8;
  --btn:#f4d35e; --btn2:#c9c9c9; --purple:#6a3fb5; --glitch:#b56bff;
  --wobble:255px 15px 225px 15px / 15px 225px 15px 255px;
  --font:"Patrick Hand","Comic Sans MS","Comic Neue",cursive;
  --hand:"Gloria Hallelujah","Comic Sans MS",cursive;
}
html,body{margin:0;height:100%;overflow:hidden}
body{
  font-family:var(--font);font-size:17px;color:var(--ink);
  background:var(--paper);
  background-image:radial-gradient(circle at 20% 30%,#e9e9f3 0,transparent 50%),radial-gradient(circle at 80% 70%,#d3d6e6 0,transparent 55%);
  user-select:none;-webkit-user-select:none;
}
#scribbles{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
#headline{
  position:fixed;left:50%;top:48px;transform:translateX(-50%) rotate(-5deg);
  font-family:var(--hand);color:var(--purple);font-size:30px;line-height:1.1;
  text-align:center;z-index:1;pointer-events:none;white-space:nowrap;
}
#headline .small{font-size:19px}
#desktop{position:fixed;inset:0 0 64px 0;z-index:2}

/* icons */
#icons{position:absolute;left:14px;top:12px;display:grid;grid-template-columns:repeat(2,96px);gap:14px 8px;z-index:1}
.icon{width:96px;text-align:center;cursor:pointer;padding:6px 2px;border-radius:8px;transition:transform .15s}
.icon:hover{background:rgba(255,255,255,.35)}
.icon:active{transform:scale(.95)}
.icon .glyph{font-size:46px;line-height:1;filter:drop-shadow(1px 2px 0 rgba(0,0,0,.25));position:relative;display:inline-block}
.icon .glyph .badge{position:absolute;right:-8px;top:-6px;font-size:22px}
.icon .name{font-size:16px;line-height:1.1;margin-top:4px;text-shadow:0 0 6px #fff,0 0 6px #fff}
.icon.shake{animation:shake .4s}

/* windows */
.win{
  position:absolute;background:var(--win);border:2.5px solid var(--winline);
  border-radius:var(--wobble);box-shadow:4px 6px 0 rgba(0,0,0,.22);
  min-width:240px;display:flex;flex-direction:column;overflow:hidden;
  transform:rotate(var(--tilt,0deg));
}
.win.dragging{box-shadow:8px 12px 0 rgba(0,0,0,.18)}
.titlebar{
  background:linear-gradient(var(--title),var(--title2));color:#fff;padding:6px 10px;
  display:flex;align-items:center;gap:8px;cursor:grab;font-size:18px;position:relative;
  border-bottom:2px solid var(--winline);touch-action:none;
}
.titlebar:active{cursor:grabbing}
.titlebar .ttitle{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.titlebar .tbtns{display:flex;gap:6px}
.titlebar .tbtns button{
  width:26px;height:24px;border:2px solid #fff;background:transparent;color:#fff;
  border-radius:6px 6px 6px 6px / 8px 4px 8px 4px;font:inherit;font-size:15px;line-height:1;cursor:pointer;
}
.titlebar .tbtns button:hover{background:rgba(255,255,255,.2)}
.titlebar .tbtns .x{background:#d43a3a;border-color:#fff}
.titlebar .tbtns .x:hover{background:#ff5555}
.titlebar.glitch::after{
  content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:repeating-linear-gradient(90deg,transparent 0 7px,var(--glitch) 7px 9px,transparent 9px 23px,#ff57c9 23px 26px);
  animation:glitch .45s steps(6) 1;
}
.win.error .titlebar{background:var(--err)}
.win.dialog .titlebar,.win.update .titlebar{background:linear-gradient(#5d7ab8,#3c5a9a)}
.win.dialog,.win.update,.win.error{background:var(--dialog)}
.win.terminal .titlebar{background:#2a2a2a}
.win.terminal{background:#15171b;color:#c8f0a0}
.win.launch{background:#fff}
.launch{font-family:var(--font)}
.lhero{background:linear-gradient(135deg,#6a3fb5,#b56bff);color:#fff;padding:24px 22px 22px;text-align:center}
.lpill{display:inline-block;background:rgba(255,255,255,.2);border:1.5px solid rgba(255,255,255,.6);border-radius:20px;padding:2px 12px;font-size:13px;margin-bottom:8px}
.lhero h1{font-family:var(--hand);font-size:34px;margin:0 0 6px;line-height:1.1}
.lsub{opacity:.92;font-size:17px}
.lcta{margin-top:14px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.lfeat{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;padding:18px 22px}
.lfeat div{background:#f6f3fc;border:2px solid #d9d0ee;border-radius:12px;padding:10px 12px;font-size:15px;line-height:1.3}
.lfeat b{display:block;font-size:17px;margin-bottom:2px}
.lprice{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 22px 16px}
.ltier{border:2.5px solid #333;border-radius:var(--wobble);padding:12px 10px;text-align:center;background:#fff8d6;display:flex;flex-direction:column;gap:4px;align-items:center}
.ltier.pro{background:#e8f8ff;transform:scale(1.04)}
.ltier .lname{font-size:14px;text-transform:uppercase;letter-spacing:.08em;color:#555}
.ltier .big{font-size:26px;font-weight:700}
.ltier .lnote{font-size:13px;color:#555;min-height:34px}
.lquote{padding:0 22px 14px;font-style:italic;color:#444;line-height:1.5}
.lshare{padding:0 22px 14px}
.lbrag{background:#fff8d6;border:2px dashed #999;border-radius:8px;padding:8px 10px;font-size:15px;margin:6px 0 8px}
.lfoot{border-top:2px dashed #999;padding:10px 22px 12px;font-size:14px;color:#555;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;align-items:center}
.lbtns{display:flex;gap:8px}
@media (max-width:640px){.lprice{grid-template-columns:1fr}.ltier.pro{transform:none}.lhero h1{font-size:28px}}
.body{padding:12px 14px;flex:1;overflow:auto;font-size:17px;line-height:1.35}
.body p{margin:0 0 8px}
.body .bold{font-weight:700}
.body .muted{color:#666;font-size:15px}
.btnrow{display:flex;gap:12px;justify-content:center;padding:6px 14px 14px;flex-wrap:wrap}
.btn{
  font:inherit;font-size:19px;padding:7px 22px;background:var(--btn);border:2.5px solid #444;
  border-radius:var(--wobble);cursor:pointer;box-shadow:2px 3px 0 rgba(0,0,0,.3);
  transition:transform .08s;
}
.btn.grey{background:var(--btn2)}
.btn.small{font-size:15px;padding:4px 12px}
.btn:hover{transform:translate(-1px,-1px)}
.btn:active{transform:translate(1px,2px);box-shadow:0 0 0 rgba(0,0,0,.3)}
.chk{display:flex;align-items:center;gap:8px;margin:8px 0;cursor:pointer;position:relative;transition:transform .18s;width:max-content;max-width:100%}
.chk input{width:18px;height:18px;accent-color:var(--purple)}
.progress{
  height:22px;border:2px solid #333;border-radius:10px 4px 12px 4px;background:#fff;overflow:hidden;
  position:relative;margin:6px 0;
}
.progress .fill{height:100%;background:repeating-linear-gradient(90deg,#4b6fd6 0 8px,#5e85ec 8px 16px);width:0;transition:width .35s}
.progress .lbl{position:absolute;inset:0;display:flex;align-items:center;padding:0 8px;font-size:15px;color:#111;mix-blend-mode:multiply}
.shake{animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
@keyframes glitch{0%{opacity:1;transform:translateX(-3px)}50%{opacity:.6;transform:translateX(4px)}100%{opacity:0}}

/* explorer */
.explorer{display:flex;flex-direction:column;flex:1;min-height:0}
.pathbar{display:flex;gap:8px;padding:8px 10px;border-bottom:2px solid #bbb;background:#e9e9ef;align-items:center}
.pathbar .path{flex:1;background:#fff;border:2px solid #777;border-radius:6px;padding:2px 8px;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pathbar .btn{font-size:15px;padding:2px 10px}
.toolbar{display:flex;gap:8px;padding:6px 10px;background:#e9e9ef;border-bottom:2px solid #bbb;flex-wrap:wrap}
.files{flex:1;min-height:0;overflow:auto;background:#fff}
.files table{width:100%;border-collapse:collapse;font-size:16px}
.files th{text-align:left;font-weight:400;color:#555;border-bottom:1px solid #ddd;padding:4px 8px;position:sticky;top:0;background:#fafafa}
.files td{padding:4px 8px;white-space:nowrap;cursor:default}
.files tr.row:hover td{background:#eef}
.files tr.sel td{background:#cfe0ff}
.files td.red{color:#d02;font-weight:700}

/* notes / terminal */
.notes{white-space:pre-wrap;font-size:17px;margin:0;font-family:var(--font);line-height:1.4;outline:none}
.term{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;white-space:pre-wrap;margin:0;line-height:1.45;min-height:120px}
.term .cursor{display:inline-block;width:8px;height:14px;background:#c8f0a0;vertical-align:-2px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.term .err{color:#ff7b7b}.term .ok{color:#7bffb0}.term .dim{color:#8a9a7a}

/* todo */
.todo .item{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:18px}
.todo .item.done{text-decoration:line-through;color:#888}
.todo .item .box{width:20px;height:20px;border:2px solid #333;border-radius:5px 3px 6px 3px;display:grid;place-items:center;font-size:15px;background:#fff}

/* clippies */
#clippies{position:absolute;right:22px;bottom:14px;display:flex;gap:6px;align-items:flex-end;z-index:5}
.clippy{position:relative;width:70px;cursor:pointer;transition:transform .5s cubic-bezier(.3,1.6,.6,1)}
.clippy:hover{transform:translateY(-6px) rotate(-6deg)}
.clippy .clip{width:70px;height:120px;filter:drop-shadow(2px 3px 0 rgba(0,0,0,.25))}
.clippy .pupil{fill:#222;transition:transform .3s}
.clippy .bubble{
  position:absolute;bottom:118px;right:0;width:190px;background:#fff;border:2.5px solid #333;
  border-radius:var(--wobble);padding:8px 10px;font-size:15px;line-height:1.25;
  box-shadow:3px 4px 0 rgba(0,0,0,.2);opacity:0;transform:translateY(8px) scale(.9);transition:all .25s;
  pointer-events:none;
}
.clippy .bubble::after{content:"";position:absolute;right:28px;bottom:-12px;border:8px solid transparent;border-top-color:#333;border-bottom:0}
.clippy .bubble.show{opacity:1;transform:none}
.clippy[data-n="1"] .bubble{right:auto;left:-20px;background:#fff2a8}
.clippy.hop{animation:hop .6s}
@keyframes hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-40px) rotate(8deg)}70%{transform:translateY(0) scaleY(.9)}}

/* taskbar */
#taskbar{
  position:fixed;left:0;right:0;bottom:0;height:64px;background:#2e3140;border-top:3px solid #111;
  display:flex;align-items:stretch;gap:4px;padding:0 6px;z-index:50;color:#fff;
}
#taskbar button{font:inherit;color:#fff;background:transparent;border:0;cursor:pointer;padding:0 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:22px;line-height:1;border-radius:6px}
#taskbar button small{font-size:12px;margin-top:3px;opacity:.85}
#taskbar button:hover,#taskbar button.open{background:rgba(255,255,255,.12)}
#stort{flex-direction:row !important;gap:6px;font-size:18px !important;font-weight:700}
#stort .logo{color:var(--glitch);font-size:24px}
#hud{flex:1;display:flex;align-items:center;justify-content:center;gap:22px;font-size:15px}
.meter{display:flex;align-items:center;gap:8px}
.meter .bar{width:140px;height:14px;border:2px solid #fff;border-radius:7px;overflow:hidden;background:#111}
#sanitybar{height:100%;width:100%;background:linear-gradient(90deg,#ff5e5e,#ffd84a,#7bff9a);transition:width .3s}
#taskcount{opacity:.9}
#tray{display:flex;align-items:center;gap:14px;font-size:15px;padding-right:6px}
#tray #clock{text-align:right;line-height:1.1;font-size:13px}
#tray #clock b{font-size:14px}
#statusline{pointer-events:none;
  position:fixed;left:0;right:0;bottom:64px;background:rgba(255,255,255,.75);border-top:1.5px solid #888;
  font-size:13px;padding:2px 10px;z-index:49;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#333;
}
#startmenu{
  position:fixed;left:8px;bottom:70px;background:var(--win);border:2.5px solid var(--winline);border-radius:var(--wobble);
  box-shadow:4px 6px 0 rgba(0,0,0,.22);padding:8px;z-index:60;display:flex;flex-direction:column;min-width:200px;
}
#startmenu[hidden]{display:none}
#startmenu .smhead{font-family:var(--hand);color:var(--purple);padding:4px 10px 8px;font-size:18px}
#startmenu button{font:inherit;font-size:17px;text-align:left;background:transparent;border:0;padding:6px 10px;cursor:pointer;border-radius:6px}
#startmenu button:hover{background:#cfe0ff}
#startmenu hr{border:0;border-top:1.5px dashed #888;margin:6px 4px}

/* BSOD + boot */
#bsod{position:fixed;inset:0;background:#1a3f80;color:#fff;z-index:100;padding:8vh 10vw;font-size:22px;line-height:1.4;overflow:auto}
#bsod[hidden]{display:none}
#bsod .face{font-size:90px;line-height:1;margin-bottom:20px;font-family:ui-monospace,monospace}
#bsod a{color:#ffd84a}
#bsod .nope{color:#ffb0b0;font-size:17px}
#boot{position:fixed;inset:0;background:#111;color:#eee;z-index:200;display:grid;place-items:center;font-family:ui-monospace,monospace}
#boot[hidden]{display:none}
.bootbox{width:min(440px,90vw);text-align:center}
.bootlogo{font-family:var(--hand);font-size:48px;color:var(--glitch)}
.bootsub{color:#999;margin-bottom:26px}
.bootline{font-size:14px;min-height:20px;margin-bottom:8px;text-align:left;color:#9c9}
.bootbar{height:14px;border:1px solid #777;background:#222}
#bootfill{height:100%;width:0;background:var(--glitch);transition:width .3s}

@media (max-width:640px){
  #taskbar .tb{display:none}
  #bsod{font-size:17px;padding:5vh 6vw}
  #headline{font-size:20px;top:10px;left:auto;right:8px;transform:rotate(-4deg)}
  #headline .small{font-size:13px}
  #icons{grid-template-columns:repeat(2,80px);gap:8px 4px}
  .icon{width:80px}.icon .glyph{font-size:36px}.icon .name{font-size:13px}
  #hud{gap:10px;font-size:12px}.meter .bar{width:70px}
  #tray{gap:8px;font-size:12px}#tray #clock{display:none}
  #taskbar button{padding:0 6px;font-size:18px}
  #statusline{display:none}
  #clippies{right:6px}
  .clippy .bubble{width:150px;font-size:13px}
  .clippy[data-n="1"] .bubble{left:auto;right:0}
}

/* ---- Slopamp ---- */
input,textarea,[contenteditable]{user-select:text;-webkit-user-select:text}
.win.ampwin{background:#23252f;border-color:#111;color:#ccc}
.win.ampwin .titlebar{background:linear-gradient(#3a3d5c,#22243a);font-size:14px;letter-spacing:2px}
.amp{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px}
.amp .lcd{background:#000;margin:8px 8px 6px;padding:6px 8px;border:2px solid #444;border-radius:4px;color:#2eff5a;display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:center}
.amp .time{font-size:24px;letter-spacing:2px;line-height:1}
.amp canvas{width:152px;height:32px;image-rendering:pixelated;background:#050505;justify-self:end}
.amp .marq{grid-column:1/-1;overflow:hidden;white-space:nowrap;border-top:1px solid #163;padding-top:3px}
.amp .marq span{display:inline-block;padding-left:100%;animation:marq 11s linear infinite}
@keyframes marq{to{transform:translateX(-100%)}}
.amp .meta{grid-column:1/-1;color:#1a9;font-size:11px}
.amp .sliders{display:flex;gap:8px;padding:0 10px;align-items:center}
.amp .sliders .vlbl{font-size:11px;color:#999}
.amp input[type=range]{accent-color:#2eff5a;flex:1;min-width:0}
.amp .sliders .vol{flex:0 0 90px}
.amp .ctrls{display:flex;gap:4px;padding:6px 10px;align-items:center;flex-wrap:wrap}
.amp .ctrls button{font:inherit;background:linear-gradient(#5a5d70,#33354a);color:#eee;border:1px solid #111;border-radius:3px;width:30px;height:24px;cursor:pointer;font-size:12px}
.amp .ctrls button.wide{width:auto;padding:0 8px;font-size:11px}
.amp .ctrls button.lit{box-shadow:inset 0 0 0 1px #2eff5a;color:#2eff5a}
.amp .ctrls button:active{transform:translateY(1px)}
.amp .ctrls label{font-size:11px;display:flex;align-items:center;gap:3px;margin-left:auto;color:#999}
.amp .plist{background:#000;margin:0 8px 8px;border:2px solid #444;max-height:118px;overflow:auto;color:#2eff5a}
.amp .plist div{padding:2px 6px;cursor:pointer;display:flex;justify-content:space-between;gap:10px;white-space:nowrap}
.amp .plist div span:first-child{overflow:hidden;text-overflow:ellipsis}
.amp .plist div:hover{background:#133}
.amp .plist div.cur{background:#1a3fa8;color:#fff}
.eqrow{display:flex;justify-content:space-between;padding:6px 4px}
.eqrow label{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px}
.eqrow input[type=range]{-webkit-appearance:slider-vertical;writing-mode:vertical-lr;direction:rtl;width:18px;height:90px;accent-color:var(--purple)}
.win.terminal .kbd{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;border:0;padding:0;pointer-events:none}

/* ---- Slopfox?? ---- */
.win.browserwin{background:#eceef4}
.browser{display:flex;flex-direction:column;flex:1;min-height:0}
.tabs{display:flex;gap:4px;padding:6px 8px 0;background:#d9dce8;align-items:flex-end}
.tab{background:#fff;border:2px solid #777;border-bottom:0;border-radius:8px 8px 0 0;padding:3px 12px;font-size:14px}
.tab.add{background:transparent;border:0;cursor:pointer;font:inherit;font-size:18px;padding:0 8px 2px}
.navbar{display:flex;gap:6px;padding:6px 8px;background:#fff;border-bottom:2px solid #bbb;align-items:center}
.navbar .btn.small{padding:2px 8px;font-size:14px}
.addrwrap{flex:1;display:flex;align-items:center;gap:6px;border:2px solid #777;border-radius:16px;padding:2px 10px;background:#f7f7fb;font-size:15px;min-width:0}
.addrwrap input{flex:1;border:0;background:transparent;font:inherit;outline:none;min-width:0}
.bookmarks{display:flex;gap:14px;padding:4px 10px;background:#f1f2f7;border-bottom:2px solid #ccc;font-size:14px;overflow:auto}
.bookmarks span{cursor:pointer;white-space:nowrap}
.bookmarks span:hover{text-decoration:underline}
.frame{flex:1;min-height:0;background:#fff}
.frame iframe{width:100%;height:100%;border:0;display:block}
.bstatus{font-size:13px;padding:2px 10px;background:#e3e5ee;border-top:1px solid #bbb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:640px){ .bookmarks{display:none} .navbar .btn.small{padding:2px 5px} }

/* ---- Defragslop ---- */
.win.defragwin{background:#d4d0c8}
.defrag{display:flex;flex-direction:column;flex:1;min-height:0;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px}
.dfhead{padding:8px 12px 4px;font-family:var(--font);font-size:16px}
.dfcanvas{margin:0 12px;border:2px inset #888;background:#000;line-height:0}
.dfcanvas canvas{width:100%;image-rendering:pixelated}
.dfstats{display:flex;flex-wrap:wrap;gap:4px 16px;padding:6px 12px 0}
.dfline{padding:2px 12px}
.dflegend{display:none;flex-wrap:wrap;gap:4px 12px;padding:4px 12px;font-size:12px}
.dflegend.show{display:flex}
.dflegend i{display:inline-block;width:10px;height:10px;border:1px solid #333;margin-right:4px;vertical-align:-1px}
.defrag .btnrow{padding:6px 12px 10px;justify-content:flex-start}
.term .ps{color:#8fd3ff}.term .in{color:#fff}
.win.terminal:focus{outline:none}
/* ---- tray popups ---- */
#tray [data-tray]{cursor:pointer;padding:4px 5px;border-radius:5px}
#tray [data-tray]:hover{background:rgba(255,255,255,.12)}
.traypop{position:fixed;bottom:70px;background:var(--win);border:2.5px solid var(--winline);border-radius:var(--wobble);box-shadow:4px 6px 0 rgba(0,0,0,.22);padding:8px 12px 10px;z-index:60;min-width:230px;max-width:min(320px,calc(100vw - 12px));font-size:15px;color:var(--ink)}
.traypop .smhead{font-family:var(--hand);color:var(--purple);padding:2px 0 8px;font-size:16px}
.traypop p{margin:0 0 4px}
.traypop .muted{color:#666;font-size:13px}
.netrow{display:flex;justify-content:space-between;gap:12px;padding:4px 6px;cursor:pointer;border-radius:6px;white-space:nowrap}
.netrow:hover{background:#cfe0ff}
.cal{display:grid;grid-template-columns:repeat(7,30px);gap:2px;text-align:center;font-size:13px}
.cal .h{color:#666;font-size:11px}
.cal .d{cursor:pointer;border-radius:6px;padding:2px 0}
.cal .d:hover{background:#cfe0ff}
.cal .d.today{background:var(--purple);color:#fff}
.cal .d.bonus{color:#d02;font-weight:700}

.sharerow{display:flex;flex-wrap:wrap;gap:6px;padding:4px 0}
.sharerow .btn.small{font-size:14px;padding:3px 10px}