:root{
  --desk:#000;--desk2:#161616;--face:#151515;--page:#0a0a0a;--ink:#efefef;--mute:#8a8a8a;
  --hi:#6a6a6a;--lo:#000;--sel:#efefef;--selink:#000;--line:#333;
  --crt:.6;--grain:.08;
  --ui:Tahoma,Verdana,"Segoe UI",sans-serif;--px:"Pixelify Sans",Tahoma,sans-serif;--term:"VT323",ui-monospace,monospace;
  --tb:38px;
}
html[data-theme=paper]{--desk:#bdbdb4;--desk2:#adada4;--face:#e6e6df;--page:#fbfbf7;--ink:#111;--mute:#666;--hi:#fff;--lo:#6e6e6e;--sel:#111;--selink:#fff;--line:#c9c9c2}
html[data-theme=terminal]{--desk:#000;--desk2:#03200a;--face:#011306;--page:#000;--ink:#3dff6e;--mute:#1d8f3d;--hi:#0f6a28;--lo:#000;--sel:#3dff6e;--selink:#000;--line:#0b3d18}
html[data-theme=amber]{--desk:#000;--desk2:#2a1a00;--face:#140c00;--page:#050300;--ink:#ffb31a;--mute:#a36f0a;--hi:#6a4806;--lo:#000;--sel:#ffb31a;--selink:#000;--line:#3a2803}
html[data-theme=moo]{--desk:#f2f2f2;--desk2:#111;--face:#ececec;--page:#fff;--ink:#0d0d0d;--mute:#5c5c5c;--hi:#fff;--lo:#0d0d0d;--sel:#0d0d0d;--selink:#fff;--line:#d0d0d0}
html[data-theme=fog]{--desk:#8d9298;--desk2:#81868c;--face:#c8cbcf;--page:#e5e7ea;--ink:#1a1c1f;--mute:#5d6167;--hi:#f1f2f4;--lo:#55595e;--sel:#3b3f45;--selink:#f1f2f4;--line:#b5b9be}
html[data-theme=blueprint]{--desk:#082464;--desk2:#0c2f7c;--face:#0d2c70;--page:#0a2566;--ink:#e8eeff;--mute:#8fa6dd;--hi:#5577c4;--lo:#03113a;--sel:#e8eeff;--selink:#082464;--line:#2a4b9a}

*{box-sizing:border-box;scrollbar-width:none}
*::-webkit-scrollbar{display:none;width:0;height:0}
html,body{height:100%;margin:0}
body{background:var(--desk);color:var(--ink);font:13px/1.45 var(--ui);overflow:hidden;
  background-image:repeating-conic-gradient(var(--desk2) 0 25%,transparent 0 50%);background-size:4px 4px}
html[data-theme=moo] body{background-image:
  radial-gradient(closest-side,#111 92%,transparent 100%),radial-gradient(closest-side,#111 92%,transparent 100%),radial-gradient(closest-side,#111 92%,transparent 100%);
  background-size:420px 300px,300px 380px,520px 460px;background-position:40px 60px,220px 10px,0 200px;background-repeat:repeat}
html[data-theme=moo] body::before{content:"";position:fixed;inset:0;background:radial-gradient(closest-side,transparent 60%,transparent);pointer-events:none}
a{color:inherit}
:focus-visible{outline:1px dotted var(--ink);outline-offset:2px}
::selection{background:var(--sel);color:var(--selink)}
.pix{display:inline-block;vertical-align:middle;shape-rendering:crispEdges}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* bevels */
.out{border:2px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi)}
.in{border:2px solid;border-color:var(--lo) var(--hi) var(--hi) var(--lo)}
.btn{font:12px var(--ui);color:var(--ink);background:var(--face);border:2px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi);padding:3px 10px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px;line-height:1.2}
.btn:active,.btn[aria-pressed=true]{border-color:var(--lo) var(--hi) var(--hi) var(--lo)}
.btn.big{font:700 15px var(--px);padding:8px 16px}

/* desktop icons */
#icons{position:fixed;left:8px;top:8px;bottom:calc(var(--tb) + 8px);display:flex;flex-direction:column;flex-wrap:wrap;gap:2px;align-content:flex-start;z-index:1}
.dicon{text-decoration:none;width:76px;padding:3px 2px;background:none;border:0;color:var(--ink);font:12px var(--ui);text-align:center;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;transition:transform .9s cubic-bezier(.5,0,.75,0)}
html[data-theme=moo] .dicon span,html[data-theme=paper] .dicon span,html[data-theme=fog] .dicon span{background:var(--page)}
.dicon span{padding:0 3px;word-break:break-all}
.dicon:focus span,.dicon:hover span{background:var(--sel);color:var(--selink)}
.dicon .new{font:700 9px var(--ui);background:var(--ink);color:var(--page);padding:0 3px;margin-right:2px}

/* windows */
.win{position:fixed;background:var(--face);display:flex;flex-direction:column;z-index:10;box-shadow:4px 4px 0 rgba(0,0,0,.45);min-width:220px}
.win[hidden]{display:none}
.tbar{display:flex;align-items:center;gap:6px;padding:3px 3px 3px 5px;background:var(--mute);color:var(--face);font:700 12px var(--ui);cursor:default;user-select:none;touch-action:none}
.win.active .tbar{background:var(--sel);color:var(--selink)}
.tbar .grip{flex:1;height:9px;min-width:10px;background:repeating-linear-gradient(currentColor 0 1px,transparent 1px 3px);opacity:.55}
.tbar .ttl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70%}
.tbtn{width:18px;height:16px;padding:0;display:grid;place-items:center;background:var(--face);color:var(--ink);border:2px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi);cursor:pointer}
.tbtn:active{border-color:var(--lo) var(--hi) var(--hi) var(--lo)}
.wbody{flex:1;min-height:0;padding:8px;overflow:auto}

/* navigator */
#w-nav{left:100px;top:10px;width:calc(100vw - 114px);height:calc(100vh - var(--tb) - 20px);max-width:1240px}
#w-nav.max{left:0!important;top:0!important;width:100vw!important;height:calc(100vh - var(--tb))!important;max-width:none}
#w-nav .wbody{padding:0;display:flex;flex-direction:column;overflow:hidden}
.tabs{display:flex;gap:2px;padding:4px 6px 0;overflow-x:auto;scrollbar-width:none}
.tab{display:flex;align-items:center;gap:5px;padding:4px 10px;background:var(--face);border:2px solid;border-bottom:0;border-color:var(--hi) var(--lo) transparent var(--hi);text-decoration:none;white-space:nowrap;font-size:12px;cursor:pointer}
.tab.on{background:var(--page);position:relative;top:2px;padding-bottom:6px}
.tab b{font-size:9px;background:var(--ink);color:var(--page);padding:0 3px}
.tabs .plus{opacity:.6;padding:4px 8px;cursor:default}
.toolbar{display:flex;gap:4px;align-items:center;padding:5px 6px;border-top:2px solid var(--lo)}
.toolbar .btn{padding:2px 7px}
.addr{flex:1;display:flex;align-items:center;gap:6px;background:var(--page);padding:2px 6px;min-width:0}
.addr input{flex:1;min-width:0;background:none;border:0;color:var(--ink);font:13px var(--ui);outline:none}
.coin{width:28px;height:28px;padding:0;border:0;background:none;perspective:160px;display:grid;place-items:center;flex:none;cursor:pointer}
.coin .c3{position:relative;width:24px;height:24px;transform-style:preserve-3d;will-change:transform}
.coin .ce{position:absolute;inset:0;border-radius:50%;background:linear-gradient(90deg,#8a5a00,#d9a21c 45%,#8a5a00);transform:translateZ(var(--z))}
.coin .cf{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;font:700 11px/1 var(--px);letter-spacing:-.5px;color:#8a5600;
  text-shadow:1px 1px 0 #ffeaa0,-1px -1px 0 #9a6400;background:radial-gradient(circle at 34% 28%,#fff8c4 0,#ffd84a 32%,#e9ae12 62%,#b07800 100%);
  box-shadow:inset 0 0 0 1.5px #a26c00,inset 0 0 0 3px #ffe27a;transform:translateZ(2.2px);backface-visibility:hidden}
.coin .cb{transform:rotateY(180deg) translateZ(2.2px)}

@keyframes spin{to{transform:rotate(360deg)}}
.bmarks{display:flex;align-items:center;gap:12px;padding:3px 8px;font-size:12px;border-top:1px solid var(--line);flex-wrap:wrap}
.bmarks a{text-decoration:none}.bmarks a:hover{text-decoration:underline}
.bmarks .sp{flex:1}
.bmarks button{background:none;border:0;color:var(--ink);font:12px var(--ui);cursor:pointer;padding:0;display:flex;gap:4px;align-items:center}
.marq{overflow:hidden;white-space:nowrap;background:var(--ink);color:var(--page);font:20px/1.2 var(--term);padding:1px 0}
.marq div{display:inline-block;padding-left:100%;animation:marq 48s linear infinite}
.marq:hover div{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-100%)}}
.page{flex:1;overflow:auto;background:var(--page);margin:0 6px;scroll-behavior:smooth}
.status{display:flex;gap:4px;padding:3px 4px;font-size:12px}
.status>div{padding:1px 8px}
.status .grow{flex:1}

/* page layout */
.cols{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:22px;padding:18px 22px 28px;max-width:1120px;margin:0 auto}
main,aside{min-width:0}
main>section{margin-bottom:34px}
h2{font:700 30px/1.1 var(--px);margin:0 0 10px;letter-spacing:.5px}
h3{font:700 17px var(--px);margin:0 0 4px}
h4{font:700 14px var(--px);margin:0 0 8px}
p{margin:0 0 10px;max-width:68ch}
hr{border:0;border-top:1px dashed var(--line);margin:0 0 30px}
kbd{font:16px var(--term);border:1px solid var(--ink);padding:0 5px}

.hero{text-align:center;padding-top:6px}
.hero{margin:-18px -22px 18px;padding:0;text-align:center;border-bottom:2px solid var(--line);background:var(--page)}
#logo{width:100%;height:340px;display:block}
.hero .cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center;padding:16px;background:var(--face);border-top:2px solid var(--hi)}
.hero .ver{font:18px/1.1 var(--term);text-align:left}.hero .ver .dim{color:var(--mute)}
.ach-row{display:flex;justify-content:center;margin-bottom:6px}
.burst{position:relative;display:inline-grid;place-items:center;width:36px;height:36px;margin:-10px -10px -10px 0;font:700 9px var(--ui);color:var(--page);isolation:isolate;animation:burstp 1.2s ease-in-out infinite}
.burst::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);clip-path:polygon(50% 0,59% 18%,79% 9%,76% 30%,97% 33%,82% 49%,97% 65%,76% 69%,80% 90%,60% 81%,50% 100%,40% 81%,20% 90%,24% 69%,3% 65%,18% 49%,3% 33%,24% 30%,21% 9%,41% 18%);animation:spin 8s linear infinite}
@keyframes burstp{50%{transform:scale(1.12)}}
.pulse{position:relative}
.pulse::before{content:"";position:absolute;inset:-6px;border:2px solid var(--ink);opacity:0;animation:pring 2s ease-out infinite;pointer-events:none}
@keyframes pring{0%{opacity:.7;transform:scale(.96)}100%{opacity:0;transform:scale(1.12)}}
.hero .acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:18px 0 8px}
.hero .ver{font:18px var(--term);color:var(--mute)}
.newb{display:inline-block;font:700 10px var(--ui);background:var(--ink);color:var(--page);padding:1px 4px;vertical-align:middle;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{background:var(--page);color:var(--ink);outline:1px solid var(--ink)}}

.callout{border:2px dashed var(--ink);padding:16px 18px;position:relative}
.callout .intro{font:18px var(--term);color:var(--mute)}
.callout h2{font-size:40px}
.callout ul{margin:6px 0 12px;padding-left:18px}

.nums{display:grid;grid-template-columns:repeat(4,1fr);border:2px solid var(--ink)}
.nums div{padding:10px;text-align:center;border-left:1px solid var(--ink)}
.nums div:first-child{border-left:0}
.nums b{display:block;font:700 34px/1 var(--px)}

/* tv */
.tv{display:grid;grid-template-columns:minmax(0,1fr) 92px;gap:12px;background:var(--face);padding:14px;max-width:640px}
.screen{position:relative;background:#000;aspect-ratio:4/3;overflow:hidden;border-radius:18px/14px}
.screen canvas{width:100%;height:100%;image-rendering:pixelated;display:block}
.screen::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(rgba(0,0,0,.35) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.6));pointer-events:none}
.chlabel{position:absolute;top:10px;left:14px;font:22px var(--term);color:#fff;text-shadow:2px 2px #000;z-index:1}
.screen.off canvas{animation:tvoff .35s forwards}
@keyframes tvoff{60%{transform:scale(1,.01)}100%{transform:scale(0,0)}}
.knobs{display:flex;flex-direction:column;gap:6px;align-items:stretch}
.knobs .brand{font:16px var(--term);text-align:center;line-height:1}
.chg{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.chg .btn{justify-content:center;padding:4px 0;font:16px var(--term)}
.power{margin-top:auto;justify-content:center}

/* menu demo */
.menu{display:grid;grid-template-columns:120px minmax(0,1fr);max-width:640px;background:var(--face);font-size:12px}
.menu .side{border-right:2px solid var(--lo);padding:8px 0;display:flex;flex-direction:column}
.menu .side .mlogo{font:700 16px var(--px);padding:0 10px 10px}
.mtab{background:none;border:0;color:var(--mute);text-align:left;padding:6px 10px;font:12px var(--ui);cursor:pointer;border-left:3px solid transparent}
.mtab[aria-selected=true]{color:var(--ink);border-left-color:var(--ink);background:var(--page)}
.mmain{display:flex;flex-direction:column;min-height:300px}
.msearch{display:flex;gap:6px;align-items:center;padding:6px 10px;border-bottom:1px solid var(--line);color:var(--mute);font:17px var(--term)}
.msearch span{color:var(--ink)}
.mlist{flex:1;padding:4px 0;outline:none}
.mod{display:flex;align-items:center;gap:10px;padding:5px 10px;cursor:pointer;user-select:none}
.mod:hover,.mod:focus{background:var(--page);outline:none}
.led{width:8px;height:8px;border:1px solid var(--ink)}
.mod[aria-checked=true] .led{background:var(--ink);box-shadow:0 0 6px var(--ink)}
.mod .nm{flex:1}
.mod[aria-checked=false] .nm{color:var(--mute)}
.eq{display:flex;gap:1px;align-items:flex-end;height:10px;opacity:0}
.eq i{width:2px;background:var(--ink);height:100%;animation:eq .6s ease-in-out infinite alternate}
.eq i:nth-child(2){animation-delay:-.2s}.eq i:nth-child(3){animation-delay:-.4s}
.mod[aria-checked=true] .eq{opacity:1}
@keyframes eq{from{transform:scaleY(.2)}to{transform:scaleY(1)}}
.mod .bind{font:15px var(--term);color:var(--mute);min-width:24px;text-align:right}
.mset{padding:4px 10px 8px 28px;display:flex;gap:8px;align-items:center;background:var(--page)}
.mset input{flex:1;accent-color:var(--ink)}
.shell{border-top:1px solid var(--line);padding:6px 10px;font:17px var(--term);min-height:31px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shell .cur{animation:blink 1s steps(1) infinite;background:var(--ink)}

/* projects */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
fieldset{border:2px groove var(--hi);margin:0;padding:8px 12px 12px;min-width:0}
legend{font:700 15px var(--px);padding:0 6px}
fieldset p{font-size:13px;margin-bottom:8px}

/* skin lab */
.lab{display:grid;grid-template-columns:260px minmax(0,1fr);gap:16px;align-items:start}
.stage{background:var(--page);height:340px;position:relative;display:grid;place-items:center;background-image:repeating-conic-gradient(var(--line) 0 25%,transparent 0 50%);background-size:16px 16px}
.stage canvas{cursor:grab}
.stage img{image-rendering:pixelated;max-height:300px}
.ctl label{display:block;margin:10px 0 4px;font-weight:700}
.row{display:flex;gap:6px;flex-wrap:wrap}
.ctl input[type=text]{background:var(--page);color:var(--ink);font:13px var(--ui);padding:4px 6px;flex:1;min-width:0}
.ctl input[type=range]{width:100%;accent-color:var(--ink)}
.labmsg{font:17px var(--term);color:var(--mute);margin-top:10px;min-height:22px}

/* dos */
.dos{background:#000;color:#cfcfcf;font:19px/1.25 var(--term);padding:14px 16px;height:340px;overflow:auto;cursor:text}
.dos .dout{white-space:pre-wrap;word-break:break-word}
.dos .line{display:flex;gap:0}
.dos .line input{flex:1;min-width:0;background:none;border:0;outline:none;color:inherit;font:inherit;caret-color:currentColor;padding:0}
.dos a{color:inherit}
html[data-theme=terminal] .dos{color:var(--ink)}html[data-theme=amber] .dos{color:var(--ink)}
.dos .cur{animation:blink 1s steps(1) infinite;background:#cfcfcf}

/* sidebar */
aside .box{border:2px solid var(--ink);padding:10px 12px;margin-bottom:16px}
.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.swatch{aspect-ratio:1;cursor:pointer;border:2px solid var(--ink);padding:0;position:relative}
.swatch[aria-pressed=true]::after{content:"";position:absolute;inset:4px;border:2px solid currentColor}
.swatch-name{font:17px var(--term);margin-top:6px}
.odo{display:flex;gap:2px;justify-content:center;margin:4px 0 10px}
.odo span{background:#000;color:#fff;font:24px/1 var(--term);padding:3px 5px;border:1px solid var(--mute)}
.statl{display:grid;grid-template-columns:1fr auto;gap:2px 8px;font-size:12px}
.statl b{font:17px var(--term)}
.cd{font:20px var(--term);line-height:1.15}
.poll label{display:flex;gap:6px;align-items:center;margin:3px 0;cursor:pointer}
.bar{height:10px;border:1px solid var(--ink);margin:2px 0 6px}
.bar i{display:block;height:100%;background:var(--ink)}
.small{font-size:11px;color:var(--mute)}
.ring{text-align:center}
.ring .rn{font:700 22px var(--px);border:2px solid var(--ink);display:inline-block;padding:0 10px;margin-bottom:6px}
.construct{height:46px;display:grid;place-items:center;font:700 12px var(--ui);color:#000;background:repeating-linear-gradient(-45deg,#fff 0 12px,#000 12px 24px);background-size:34px 34px;animation:stripes 1s linear infinite;border:2px solid var(--ink)}
.construct span{background:#fff;padding:2px 6px}
@keyframes stripes{to{background-position:34px 0}}
.badges{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding:6px 22px 18px}
.badge{width:88px;height:31px;border:1px solid var(--ink);display:flex;font:10px/1 var(--ui);overflow:hidden;text-decoration:none}
.badge b{background:var(--ink);color:var(--page);display:grid;place-items:center;padding:0 4px;font:700 11px var(--px)}
.badge span{flex:1;display:grid;place-items:center;text-align:center;padding:0 3px}
.foot{text-align:center;font-size:11px;color:var(--mute);padding:0 20px 30px}

/* taskbar + start */
#taskbar{position:fixed;left:0;right:0;bottom:0;height:var(--tb);background:var(--face);border-top:2px solid var(--hi);display:flex;align-items:center;gap:4px;padding:3px 4px;z-index:9000}
#start{font:700 13px var(--px);height:100%}
.ql{display:flex;gap:2px;padding:0 6px;border-left:1px solid var(--lo);border-right:1px solid var(--lo)}
.ql a,.ql button{display:grid;place-items:center;width:26px;height:26px;color:var(--ink);background:none;border:0;cursor:pointer}
#tasks{flex:1;display:flex;gap:3px;min-width:0;overflow:hidden;height:100%}
#tasks .btn{flex:0 1 180px;min-width:40px;overflow:hidden;white-space:nowrap;justify-content:flex-start}
#tasks .btn span{overflow:hidden;text-overflow:ellipsis}
.tray{display:flex;align-items:center;gap:8px;padding:0 10px;height:100%;font-size:12px}
.tray button{background:none;border:0;color:var(--ink);cursor:pointer;padding:0;display:grid;opacity:.45}
.tray button[aria-pressed=true]{opacity:1}
#smenu{position:fixed;left:2px;bottom:calc(var(--tb) - 2px);width:250px;background:var(--face);z-index:9001;display:flex}
#smenu[hidden]{display:none}
#smenu .band{width:30px;background:var(--ink);color:var(--page);writing-mode:vertical-rl;transform:rotate(180deg);font:700 18px var(--px);padding:10px 4px;text-align:right}
#smenu ul{list-style:none;margin:0;padding:3px;flex:1}
#smenu li>a,#smenu li>button{display:flex;gap:10px;align-items:center;width:100%;padding:6px 8px;background:none;border:0;color:var(--ink);font:13px var(--ui);text-decoration:none;cursor:pointer;text-align:left}
#smenu li>a:hover,#smenu li>button:hover,#smenu li>a:focus,#smenu li>button:focus{background:var(--sel);color:var(--selink);outline:none}
#smenu li small{display:block;font-size:10px;opacity:.7}
#smenu .sep{border-top:1px solid var(--lo);border-bottom:1px solid var(--hi);margin:3px 0}

/* small windows */
#w-moo{left:30%;top:18%;width:280px}
#w-moo canvas{display:block;width:100%;background:var(--page);image-rendering:pixelated}
#w-sus{left:24%;top:12%;width:340px}
#w-sus img{max-width:100%;display:block;margin:auto;image-rendering:pixelated}
#w-gb{left:20%;top:10%;width:min(420px,92vw);height:min(460px,80vh)}
#w-gb .wbody{display:flex;flex-direction:column;gap:6px}
#w-gb textarea,#w-gb input{background:var(--page);color:var(--ink);font:13px var(--ui);padding:4px 6px;width:100%}
#gblist{flex:1;overflow:auto;background:var(--page);padding:6px 8px;font:18px/1.2 var(--term)}
#gblist div{border-bottom:1px dashed var(--line);padding:4px 0}
#w-bin{left:34%;top:26%;width:300px}
.binl{background:var(--page);padding:6px;font-size:12px}
.binl div{display:flex;gap:8px;align-items:center;padding:3px}

/* fx layers */
#bgfx{position:fixed;inset:0;z-index:2;pointer-events:none}
#fx{position:fixed;inset:0;z-index:9500;pointer-events:none}
#crt{position:fixed;inset:0;z-index:9600;pointer-events:none;display:none;opacity:var(--crt);
  background:repeating-linear-gradient(rgba(0,0,0,.4) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 58%,rgba(0,0,0,.75) 100%);animation:flick 4s infinite}
html.crt #crt{display:block}
@keyframes flick{0%,100%{opacity:var(--crt)}48%{opacity:calc(var(--crt) * .9)}50%{opacity:var(--crt)}}
#grain{position:fixed;inset:-50%;z-index:9601;pointer-events:none;display:none;opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain .5s steps(4) infinite}
html.grain #grain{display:block}
@keyframes grain{25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-4%)}75%{transform:translate(-1%,3%)}}
html.invert{filter:invert(1)}
html.pcur,html.pcur *{cursor:var(--cur-a,auto),auto}
html.pcur a,html.pcur button,html.pcur [role=switch],html.pcur .mod,html.pcur label,html.pcur summary,html.pcur .cell,html.pcur .dicon,html.pcur .swatch,html.pcur [data-tip],html.pcur canvas#logo,html.pcur .top8 img,html.pcur .blinkie,html.pcur .award,html.pcur select{cursor:var(--cur-h,pointer),pointer}
html.pcur input[type=text],html.pcur input:not([type]),html.pcur textarea{cursor:var(--cur-t,text),text}
html.pcur .tbar,html.pcur .tbar .ttl,html.pcur .tbar .grip{cursor:move}
.roll{animation:roll 1.1s cubic-bezier(.6,0,.3,1)}
@keyframes roll{to{transform:rotate(360deg)}}


/* new stuff */
.ach-strip{display:flex;align-items:center;gap:10px;width:100%;max-width:440px;background:var(--page);color:var(--ink);padding:6px 10px;cursor:pointer;font:19px var(--term);text-align:left}
.ach-strip .bar{flex:1;margin:0}
.toasts{position:fixed;top:10px;right:10px;z-index:9700;display:flex;flex-direction:column;gap:6px;pointer-events:none}
.toast{display:flex;gap:10px;align-items:center;background:#202020;color:#fff;border:2px solid;border-color:#6a6a6a #000 #000 #6a6a6a;padding:8px 14px 8px 10px;min-width:250px;font:19px/1.05 var(--term);animation:tin .35s steps(5)}
.toast b{display:block;color:#ffff55;font-weight:400}
.toast.bye{animation:tout .35s steps(5) forwards}
@keyframes tin{from{transform:translateX(120%)}}@keyframes tout{to{transform:translateX(120%)}}
#clippy{position:fixed;right:14px;bottom:calc(var(--tb) + 10px);z-index:9400;display:flex;align-items:flex-end;gap:4px}
#clippy[hidden]{display:none}
.bubble{background:var(--page);color:var(--ink);border:2px solid var(--ink);padding:9px 11px;max-width:240px;font-size:12px;position:relative;margin-bottom:34px;box-shadow:3px 3px 0 rgba(0,0,0,.4)}
.bubble::after{content:"";position:absolute;right:-10px;bottom:10px;border:6px solid transparent;border-left:8px solid var(--ink)}
.ccow{color:var(--ink);background:var(--page);border:2px solid var(--ink);padding:4px;cursor:pointer;animation:bob 2.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-5px)}}
#saver{position:fixed;inset:0;z-index:9800;background:#000;width:100%;height:100%;cursor:none}
#saver[hidden]{display:none}
#bsod{position:fixed;inset:0;z-index:10002;background:#0000aa;color:#fff;font:24px/1.3 var(--term);padding:8vh 8vw;white-space:pre-wrap;cursor:pointer}
#bsod[hidden]{display:none}
#bsod .h{background:#aaa;color:#0000aa;padding:0 8px}
#ctx{position:fixed;z-index:9300;background:var(--face);min-width:170px}
#ctx[hidden]{display:none}
#ctx ul{list-style:none;margin:0;padding:3px}
#ctx button{display:block;width:100%;text-align:left;padding:4px 14px;background:none;border:0;color:var(--ink);font:12px var(--ui);cursor:pointer}
#ctx button:hover,#ctx button:focus{background:var(--sel);color:var(--selink);outline:none}
#ctx .sep{border-top:1px solid var(--lo);border-bottom:1px solid var(--hi);margin:3px 0}
#w-sweep{left:38%;top:14%}
.sw-top{display:flex;justify-content:space-between;align-items:center;padding:5px 6px;margin-bottom:6px}
.sw-num{background:#000;color:#fff;font:26px/1 var(--term);padding:1px 5px;min-width:44px;text-align:center}
.sw-face{font:22px/1 var(--term);padding:2px 8px}
.sw-grid{display:grid;grid-template-columns:repeat(9,24px);width:max-content}
.cell{width:24px;height:24px;padding:0;display:grid;place-items:center;background:var(--face);color:var(--ink);border:2px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi);font:700 13px var(--ui);cursor:pointer}
.cell.r{border:1px solid var(--line);background:var(--page);cursor:default}
.cell.boom{background:var(--ink);color:var(--page)}
.cell[data-n="1"]{font-weight:400}.cell[data-n="3"],.cell[data-n="4"]{text-decoration:underline}
#w-sb{left:44%;top:22%;width:min(380px,92vw)}
.sbg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.sbg .btn{height:54px;justify-content:center;text-align:center;font:18px/1 var(--term);white-space:normal;padding:2px 4px;min-width:0}
#w-ach{left:28%;top:8%;width:min(380px,92vw);height:min(470px,82vh)}
#w-ach .wbody{display:flex;flex-direction:column;gap:6px}
.achl{flex:1;overflow:auto;background:var(--page)}
.achl div{display:flex;gap:10px;align-items:center;padding:6px 8px;border-bottom:1px dashed var(--line)}
.achl div.lock{opacity:.45}
.achl b{display:block;font:700 13px var(--px)}
.achl span{font-size:11px;color:var(--mute)}
#w-readme{left:22%;top:16%;width:min(380px,92vw)}
.note{background:var(--page);padding:8px 10px;white-space:pre-wrap;font:18px/1.2 var(--term);max-height:60vh;overflow:auto}
.pet{margin-top:8px;font-size:12px}
.pet .pb{display:grid;grid-template-columns:52px 1fr;gap:6px;align-items:center;margin-top:4px}
.pet .bar{margin:0}
.pet input{width:100%;background:var(--page);color:var(--ink);font:13px var(--ui);padding:2px 5px}
.pet .mood{font:17px var(--term);margin-top:6px;min-height:20px}
/* 2000s stuff */
#tip{position:fixed;z-index:9950;background:#ffffe1;color:#000;border:1px solid #000;font:11px Tahoma,Verdana,sans-serif;padding:2px 6px;pointer-events:none;box-shadow:2px 2px 0 rgba(0,0,0,.35);max-width:260px}
#tip[hidden]{display:none}
#ctext{position:fixed;left:0;top:0;z-index:9560;pointer-events:none;font:700 16px "Comic Sans MS","Comic Sans",cursive;color:var(--ink);text-shadow:1px 1px 0 var(--page)}
#ctext span{position:fixed;left:0;top:0}
#ctext[hidden]{display:none}
.spin3d{animation:spin3d 2s linear infinite}
@keyframes spin3d{to{transform:rotateY(360deg)}}
.page a:not(.btn):not(.tab):not(.badge):hover{background:var(--ink);color:var(--page);text-decoration:none}
.page a:not(.btn):not(.tab):not(.badge):visited{text-decoration-style:dotted}
.np{margin-top:8px;font:17px var(--term);border-top:1px dashed var(--line);padding-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np[hidden]{display:none}
.top8{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.top8 figure{margin:0;text-align:center;font:11px "Comic Sans MS","Comic Sans",cursive;cursor:pointer}
.top8 img,.top8 svg{width:40px;height:40px;image-rendering:pixelated;border:2px solid var(--ink);display:block;margin:0 auto 2px;background:var(--line);transition:transform .15s}
.top8 figure:hover img,.top8 figure:hover svg{transform:scale(1.15) rotate(-6deg)}
.top8 .hit img,.top8 .hit svg{animation:hop .35s}
@keyframes hop{40%{transform:translateY(-8px)}}
.shake{animation:shake .5s}
@keyframes shake{20%{transform:translate(-8px,4px)}40%{transform:translate(7px,-6px)}60%{transform:translate(-5px,3px)}80%{transform:translate(4px,-2px)}}
.shl{height:150px;overflow:auto;background:var(--page);padding:4px 6px;font:12px/1.35 "Comic Sans MS","Comic Sans",cursive}
.shl div{padding:2px 0;border-bottom:1px dotted var(--line);word-break:break-word}
.shl b{font-weight:700}.shl .t{color:var(--mute);font-size:10px}
.shout input{flex:1;min-width:0;background:var(--page);color:var(--ink);font:12px var(--ui);padding:3px 5px}
.lnk{width:100%;background:var(--page);color:var(--ink);font:12px ui-monospace,monospace;padding:4px;resize:none}
.awards{display:flex;flex-direction:column;gap:6px}
.award{display:flex;gap:8px;align-items:center;font:12px "Comic Sans MS","Comic Sans",cursive;padding:4px 6px;border:1px dashed var(--ink);background:none;color:var(--ink);text-align:left}
.award:hover svg{animation:wig .4s infinite}
@keyframes wig{25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}
.blinkies{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;padding:4px 22px 8px}
.blinkie{width:150px;height:20px;border:1px solid var(--ink);display:grid;place-items:center;font:700 11px Tahoma,Verdana,sans-serif;background:var(--page);color:var(--ink);padding:0;animation:blinkie var(--sp,1s) steps(1) infinite}
@keyframes blinkie{50%{background:var(--ink);color:var(--page)}}
.blinkie.spin{animation:spinz .6s}
@keyframes spinz{to{transform:rotate(360deg)}}
.dlg{width:300px}
.dlg-b{display:flex;gap:12px;align-items:flex-start;padding:6px 4px 10px}
.dlg-ic{flex:none}
.dlg-t{font-size:12px;line-height:1.5}
.dlg-btns{justify-content:center}
.dlg .bar{margin-top:6px}
#splash{position:fixed;inset:0;z-index:9990;background:var(--desk);display:grid;place-items:center;padding:20px;background-image:repeating-conic-gradient(var(--desk2) 0 25%,transparent 0 50%);background-size:4px 4px}
#splash[hidden]{display:none}
#splash.bye{opacity:0;transition:opacity .45s}
.sp-in{background:var(--page);border:2px solid var(--ink);padding:28px 30px;text-align:center;max-width:520px;width:100%;box-shadow:6px 6px 0 rgba(0,0,0,.5)}
.sp-logo{font:700 clamp(36px,9vw,64px)/1 var(--px)}
.sp-sub{font:20px var(--term);color:var(--mute);margin:6px 0 18px}
.sp-load{display:flex;gap:10px;align-items:center;font:18px var(--term);margin-bottom:18px}
.sp-load .bar{flex:1;height:16px;margin:0}
.sp-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.sp-btns .btn[disabled]{opacity:.45}
.sp-btns .btn:not([disabled]):first-child{animation:blink 1s steps(1) infinite}
.sp-note{margin-top:16px;font-size:11px;color:var(--mute)}
#w-amp{left:52%;top:30%;width:300px;background:#29292e;color:#00e000}
#w-amp .tbar{background:#3c3c44;color:#ddd}#w-amp.active .tbar{background:#55555f;color:#fff}
.amp{background:#29292e;padding:6px}
.amp-lcd{display:flex;gap:6px;background:#000;border:2px solid;border-color:#111 #555 #555 #111;padding:5px}
.amp-l{display:flex;flex-direction:column;gap:3px}
.amp-time{font:30px/1 var(--term);color:#00e000;text-shadow:0 0 4px #00a000}
#ampViz{display:block;image-rendering:pixelated}
.amp-r{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:space-between}
.amp-title{overflow:hidden;white-space:nowrap;font:18px/1.1 var(--term);color:#00e000}
.amp-title span{display:inline-block}
.amp-title.scroll span{animation:ampsc 9s linear infinite;padding-left:100%}
@keyframes ampsc{to{transform:translateX(-100%)}}
.amp-info{display:flex;gap:8px;font:13px var(--term);color:#00a000}
.amp-seek{height:8px;background:#111;border:1px solid #555;margin:6px 0}
.amp-seek i{display:block;height:100%;background:#00c000;width:0}
.amp-ctl{display:flex;gap:2px;align-items:center}
.amp-ctl .btn{background:#45454d;color:#ddd;border-color:#77777f #111 #111 #77777f;padding:2px 7px;font:13px var(--term)}
.amp-vol{margin-left:auto;display:flex;gap:4px;align-items:center;font:13px var(--term);color:#00c000}
.amp-vol input{width:70px;accent-color:#00c000}
.amp-pl{margin-top:6px;background:#000;border:2px solid;border-color:#111 #555 #555 #111;font:16px/1.25 var(--term);color:#00c000;max-height:110px;overflow:auto}
.amp-pl button{display:flex;justify-content:space-between;width:100%;background:none;border:0;color:inherit;font:inherit;padding:1px 6px;text-align:left;cursor:pointer}
.amp-pl button.on{background:#0000c0;color:#fff}
/* fx.js */
#wall{position:fixed;inset:0;width:100%;height:100%;z-index:0;image-rendering:pixelated;pointer-events:none}
#balloons{position:fixed;right:10px;bottom:calc(var(--tb) + 8px);z-index:9450;display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none}
.balloon{pointer-events:auto;position:relative;width:min(290px,90vw);background:#ffffe1;color:#000;border:1px solid #000;border-radius:7px;padding:8px 26px 9px 10px;font:12px/1.4 Tahoma,Verdana,sans-serif;box-shadow:3px 3px 0 rgba(0,0,0,.35);animation:bin .28s ease-out}
.balloon::after{content:"";position:absolute;right:38px;bottom:-11px;border:6px solid transparent;border-top:6px solid #000;border-left-width:0;border-right-width:12px;border-right-color:transparent}
.balloon b{display:flex;gap:6px;align-items:center;margin-bottom:3px}.balloon p{margin:0}
.balloon .bx{position:absolute;right:5px;top:4px;width:16px;height:16px;border:1px solid #888;border-radius:3px;background:#fff;font:10px/1 Tahoma,sans-serif;padding:0;cursor:pointer;color:#000}
.balloon.out{animation:bout .26s ease-in forwards}
@keyframes bin{from{opacity:0;transform:translateY(10px) scale(.96)}}@keyframes bout{to{opacity:0;transform:translateY(10px)}}
.addr{position:relative;overflow:hidden}
.addr .load{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--ink);transition:width .5s ease-out;pointer-events:none}
.addr .star{background:none;border:0;padding:0 2px;color:var(--mute);cursor:pointer;display:grid;place-items:center}
.addr .star.on{color:var(--ink);animation:spinz .5s}
.tab.plus{cursor:pointer;opacity:1}.tab.plus:hover{background:var(--page)}
.smeter{height:3px;margin:0 6px;background:var(--face)}.smeter i{display:block;height:100%;width:0;background:var(--ink)}
#w-nav .wbody{position:relative}
.rocket{position:absolute;right:22px;bottom:44px;z-index:3;width:38px;height:38px;justify-content:center;padding:0;opacity:0;transform:translateY(20px);pointer-events:none;transition:opacity .2s,transform .2s}
.rocket.show{opacity:1;transform:none;pointer-events:auto}
.rocket.launch{animation:launch .9s ease-in forwards}
@keyframes launch{30%{transform:translateY(4px)}100%{transform:translateY(-120vh)}}
.crtp{position:fixed;inset:0;z-index:10005;pointer-events:none;background:#000}
.crtp i{position:absolute;left:0;right:0;top:50%;height:100%;transform:translateY(-50%);background:#fff}
.crtp.off{background:transparent;animation:crtbg .76s forwards}.crtp.off i{animation:crtoff .76s forwards}
@keyframes crtbg{0%{background:transparent}30%{background:#000}100%{background:#000}}
@keyframes crtoff{0%{height:100%;opacity:0;width:100%;left:0}25%{height:100%;opacity:.25}55%{height:2px;opacity:1;left:0;right:0}85%{height:2px;left:48%;right:48%}100%{height:0;left:50%;right:50%;opacity:0}}
.crtp.on i{animation:crton .9s forwards}.crtp.on{animation:crtonbg .9s forwards}
@keyframes crton{0%{height:0;left:50%;right:50%}30%{height:2px;left:0;right:0}70%{height:100%;opacity:.6}100%{height:100%;opacity:0}}
@keyframes crtonbg{0%,60%{background:#000}100%{background:transparent}}
.runaway{transition:transform .12s ease-out}
#w-pc{left:24%;top:8%;width:min(560px,94vw);height:min(470px,80vh)}
#w-pc .wbody{display:flex;flex-direction:column;gap:6px}
.pc-bar{display:flex;gap:8px;align-items:center;background:var(--page);padding:3px 6px;font:17px var(--term)}
.pc-bar input{margin-left:auto;width:140px;background:var(--face);color:var(--ink);border:1px solid var(--line);font:12px var(--ui);padding:2px 5px}
.pc-grid{flex:1;overflow:auto;background:var(--page);display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:4px;padding:8px;align-content:start}
.pc-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 2px;text-decoration:none;color:var(--ink);font-size:11px;text-align:center}
.pc-item span{padding:0 3px;word-break:break-word}
.pc-item:hover span,.pc-item:focus span{background:var(--sel);color:var(--selink)}
.pc-item.seen svg{opacity:.6}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 14px}
.fact{border:2px solid var(--ink);padding:8px 6px;text-align:center;font-size:12px;color:var(--mute)}
.fact b{display:block;font:700 30px/1 var(--px);color:var(--ink);margin-bottom:2px}
html.rv #page h2{opacity:0;transform:translateX(-16px);transition:opacity .45s,transform .45s}
html.rv #page h2.shown{opacity:1;transform:none}
html.rv .facts{opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}html.rv .facts.shown{opacity:1;transform:none}
fieldset.tilt{transform:perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .35s ease-out;position:relative}
fieldset.tilt.tilting{transition:transform .06s linear}
fieldset.tilt::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),color-mix(in srgb,var(--ink) 16%,transparent),transparent 60%)}
fieldset.tilt.tilting::after{opacity:1}
html.waved #page main>*,html.waved #page aside>*{animation:pwave .7s ease-in-out calc(var(--n,0)*70ms)}
@keyframes pwave{40%{transform:translateY(-16px) rotate(-1deg)}70%{transform:translateY(4px)}}
@media (max-width:700px){.facts{grid-template-columns:repeat(2,1fr)}.rocket{right:12px}}

/* boot + shutdown */
#boot{position:fixed;inset:0;background:#000;color:#cfcfcf;z-index:10000;font:22px/1.3 var(--term);padding:30px;white-space:pre-wrap;cursor:pointer}
#boot.bye{opacity:0;transition:opacity .4s}
#off{position:fixed;inset:0;background:#000;color:#ddd;z-index:10001;display:grid;place-items:center;text-align:center;font:28px var(--term);cursor:pointer}
#off[hidden]{display:none}

@media (max-width:860px){
  .cols{grid-template-columns:1fr;padding:14px}
  .hero{margin:-14px -14px 16px}#logo{height:230px}
  .grid,.lab{grid-template-columns:1fr}
}
@media (max-width:700px){
  #icons{display:none}#boot{font-size:15px;padding:16px}#bsod{font-size:18px}
  #w-nav{left:0!important;top:0!important;width:100vw!important;height:calc(100% - var(--tb))!important;max-width:none}
  .tv{grid-template-columns:1fr}.knobs{flex-direction:row;flex-wrap:wrap}.chg{grid-template-columns:repeat(6,1fr);flex:1}
  .menu{grid-template-columns:1fr}.menu .side{flex-direction:row;border-right:0;border-bottom:2px solid var(--lo);padding:0;overflow-x:auto}
  .menu .side .mlogo{display:none}
  .nums{grid-template-columns:repeat(2,1fr)}.nums div:nth-child(3){border-left:0}.nums div:nth-child(n+3){border-top:1px solid var(--ink)}
  .ql,#tasks{display:none}.tray{margin-left:auto}
  .win:not(#w-nav){left:4vw!important;top:6vh!important;width:92vw!important}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .marq div{padding-left:8px}
}