:root{
  --wall:#3B2380; --bone:#EFEAD9; --ink:#15121A; --stencil:#4B2E9C; --red:#D3322A; --yellow:#F0C22E; --green:#3BAA6E;
  --title:"Silkscreen",monospace; --ui:"Pixelify Sans","Chicago",sans-serif; --txt:"VT323",monospace;
  --bar:44px; --task:48px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--wall);color:var(--ink);font-family:var(--ui);font-size:16px;line-height:1.4;overflow:hidden;position:relative}
.wallpaper{position:fixed;inset:0;background:rgba(255,255,255,.14);pointer-events:none;
  -webkit-mask-image:url(/assets/flash/web/flash-33.webp),url(/assets/flash/web/flash-19.webp),url(/assets/flash/web/flash-45.webp),url(/assets/flash/web/flash-04.webp),url(/assets/flash/web/flash-50.webp);
  mask-image:url(/assets/flash/web/flash-33.webp),url(/assets/flash/web/flash-19.webp),url(/assets/flash/web/flash-45.webp),url(/assets/flash/web/flash-04.webp),url(/assets/flash/web/flash-50.webp);
  -webkit-mask-size:170px,150px,180px,130px,160px;mask-size:170px,150px,180px,130px,160px;
  -webkit-mask-repeat:repeat;mask-repeat:repeat;
  -webkit-mask-position:0 0,240px 160px,120px 380px,420px 60px,300px 540px;mask-position:0 0,240px 160px,120px 380px,420px 60px,300px 540px}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer}
a{color:var(--stencil)}
:focus-visible{outline:3px dashed var(--yellow);outline-offset:2px}

.menubar{position:fixed;top:0;left:0;right:0;height:var(--bar);background:var(--bone);border-bottom:3px solid var(--ink);display:flex;align-items:center;gap:6px;padding-inline:10px;z-index:1000;font-family:var(--title);font-size:12px}
.menubar a{color:var(--ink);text-decoration:none;padding:6px 8px}
.menubar .logo{font-weight:700;font-size:14px;display:flex;align-items:center;gap:8px;padding-left:4px}
.menubar .logo i{display:inline-block;width:18px;height:18px;background:var(--stencil);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.menubar .m:hover{background:var(--stencil);color:#fff}
.menubar .right{margin-left:auto;display:flex;gap:8px;align-items:center}
.menubar .live{width:9px;height:9px;background:var(--green);border:2px solid var(--ink);display:inline-block;margin-right:6px}
@media (max-width:760px){.menubar .m{display:none}.menubar .right .ig{display:none}}

.icons{position:fixed;top:calc(var(--bar) + 16px);left:14px;display:grid;grid-template-columns:1fr;gap:12px;z-index:1}
.icon{width:84px;min-width:0;text-decoration:none;color:#fff;text-align:center;padding:4px;font-family:var(--title);font-size:10px;line-height:1.3;display:block}
.icon .box{width:56px;height:56px;margin:0 auto 6px;background:var(--bone);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);display:grid;place-items:center;padding:5px;transition:transform .1s}
.icon .box img{max-height:100%;max-width:100%;width:auto;object-fit:contain}
.icon:hover .box{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.icon.on .box{background:var(--yellow)}
.icon.hot .box{background:var(--red);animation:blink 1.2s steps(2) infinite}
.icon.hot .box img{filter:brightness(0) invert(1)}
@keyframes blink{50%{background:var(--yellow)}}
.icon span{display:block;background:rgba(21,18,26,.85);padding:2px 3px;margin-inline:-2px;overflow:hidden;text-overflow:ellipsis}
@media (max-width:760px){.icons{left:0;right:0;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding-inline:8px;justify-items:center}.icon{width:78px}.icon span{font-size:9px}}
@media (prefers-reduced-motion:reduce){.icon.hot .box{animation:none}}

.win{position:absolute;background:var(--bone);border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink);width:min(520px,calc(100vw - 32px));display:flex;flex-direction:column;z-index:10}
.win[hidden]{display:none}
.win .title{font-family:var(--title);font-size:12px;height:30px;display:flex;align-items:center;gap:10px;padding-inline:8px;border-bottom:3px solid var(--ink);cursor:grab;user-select:none;touch-action:none;
  background:repeating-linear-gradient(0deg,var(--bone) 0 2px,#c9c2ad 2px 4px)}
.win.active .title{background:repeating-linear-gradient(0deg,var(--stencil) 0 2px,#6b4fc4 2px 4px);color:#fff}
.win .title b{background:inherit;padding-inline:8px;flex:1;text-align:center;font-weight:400}
.win .x{width:18px;height:18px;border:2px solid currentColor;background:var(--bone);color:var(--ink);padding:0;line-height:1;font-size:12px;font-family:var(--title)}
.win .body{padding:14px;overflow:auto;max-height:min(70vh,560px)}
@media (max-width:760px){
  .win{position:fixed !important;left:8px !important;top:calc(var(--bar) + 214px) !important;right:8px;bottom:calc(var(--task) + 8px);width:auto !important;box-shadow:4px 4px 0 var(--ink)}
  .win:not(.active){display:none}
  .win .body{max-height:none;flex:1}
  .win .title{cursor:default}
}
.txt{font-family:var(--txt);font-size:21px;line-height:1.25}
.txt h1{font-family:var(--title);font-size:18px;margin:0 0 10px;color:var(--stencil)}
.txt p{margin:0 0 12px;max-width:52ch}
.txt .status{font-family:var(--title);font-size:10px;color:#5b5346}
.btn{display:inline-block;background:var(--red);color:#fff;border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);padding:8px 14px;font-family:var(--title);font-size:12px;text-decoration:none;margin:0 6px 8px 0}
.btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.btn.ghost{background:var(--bone);color:var(--ink)}
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.gallery img{aspect-ratio:4/5;object-fit:cover;width:100%;border:2px solid var(--ink);background:#fff}
@media (max-width:420px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gallery figure{margin:0}
.gallery figcaption{font-family:var(--title);font-size:9px;margin-top:4px;opacity:.75;overflow:hidden;text-overflow:ellipsis}

.taskbar{position:fixed;left:0;right:0;bottom:0;height:var(--task);background:var(--bone);border-top:3px solid var(--ink);display:flex;align-items:center;gap:8px;padding-inline:8px;z-index:1000;overflow-x:auto}
.start{font-family:var(--title);font-size:12px;font-weight:700;background:var(--stencil);color:#fff;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);padding:6px 10px;white-space:nowrap;text-decoration:none;display:flex;align-items:center;gap:8px}
.start::before{content:'';width:12px;height:12px;background:var(--yellow);border:2px solid var(--ink)}
#tasks{display:flex;gap:6px}
.tb{font-family:var(--title);font-size:10px;background:var(--bone);border:2px solid var(--ink);padding:6px 10px;white-space:nowrap}
.tb.active{background:#fff;box-shadow:inset 2px 2px 0 rgba(0,0,0,.25)}
.taskbar .clock{margin-left:auto;font-family:var(--title);font-size:11px;white-space:nowrap;padding-inline:6px}

/* games department: youtube + twitch windows */
.player{position:relative;aspect-ratio:16/9;background:#000;border:2px solid var(--ink)}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.nowplaying{display:flex;flex-direction:column;gap:2px;padding:8px 2px 10px;font-family:var(--txt);font-size:20px;line-height:1.15}
.nowplaying span{font-family:var(--title);font-size:9px;color:#5b5346}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.chip{font-family:var(--title);font-size:9px;background:#fff;border:2px solid var(--ink);padding:5px 8px;display:inline-flex;gap:6px;align-items:center}
.chip span{background:var(--ink);color:#fff;padding:0 4px}
.chip.on{background:var(--yellow)}
.playlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;max-height:300px;overflow:auto;border:2px solid var(--ink);background:#fff;padding:6px}
.playlist li[hidden]{display:none}
.playlist button{width:100%;display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px;align-items:center;text-align:left;background:#fff;border:2px solid transparent;padding:4px;font-family:var(--ui)}
.playlist button:hover,.playlist button.on{border-color:var(--ink);background:var(--bone)}
.playlist button.on{box-shadow:inset 3px 0 0 var(--red)}
.playlist img{width:96px;height:54px;object-fit:cover;border:1px solid var(--ink)}
.playlist .lbl{min-width:0}
.playlist .t{display:block;font-size:14px;line-height:1.2;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.playlist .g{display:block;font-family:var(--title);font-size:8px;color:#5b5346;margin-top:2px}
.txt.small{font-size:17px;margin-top:10px}
@media (max-width:560px){.playlist{grid-template-columns:1fr;max-height:none}}
#w-tube .body{max-height:min(84vh,900px)}