/* the arena — shared skin for the hub pages. cozy woodland, two lights only:
   fungus green and lantern amber on near-black. HTB's bones, our paint.
   the challenge pages don't load this; they carry their own copy, on purpose,
   so each one is a single file you can open from anywhere. */
:root{
  --night:#0E0B08;--bark:#26190F;--bark2:#33231A;--dirt:#3B2B1E;
  --moss:#5B7A3D;--moss2:#8FB35E;--lichen:#D6D9BA;--paper:#F1ECDA;--dim:#A8B096;
  --lantern:#FFC86E;--fungus:#B8F0C9;
}
*{box-sizing:border-box}
body{margin:0;background:var(--night);color:var(--paper);
  font:17px/1.65 'Fraunces',Georgia,serif;
  padding:0 1.25rem 6rem;
  background-image:radial-gradient(ellipse 120% 30% at 50% 100%,rgba(46,74,34,.5),transparent 70%);
  background-attachment:fixed;-webkit-text-size-adjust:100%}
img{max-width:100%}
[hidden]{display:none!important}
.wrap{max-width:52rem;margin:0 auto}
a{color:var(--fungus)}
h1{font-weight:400;font-size:2.4rem;margin:0;font-variation-settings:'opsz' 96;line-height:1.1}
h2{font-weight:400;font-variation-settings:'opsz' 48}
.tag{font-family:Archivo,sans-serif;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.dim{color:var(--dim)}.amber{color:var(--lantern)}.green{color:var(--fungus)}
.lede{color:var(--lichen)}

/* the trailhead nav, on every hub page */
.nav{position:sticky;top:0;z-index:5;display:flex;gap:.2rem;flex-wrap:wrap;align-items:center;
  margin:0 -1.25rem 1.6rem;padding:.6rem 1.25rem;
  background:linear-gradient(to bottom,rgba(14,11,8,.96),rgba(14,11,8,.82));
  backdrop-filter:blur(4px);border-bottom:1px solid rgba(214,217,186,.12)}
.nav .brand{font-family:Archivo,sans-serif;font-weight:700;font-size:.82rem;letter-spacing:.06em;
  color:var(--paper);text-decoration:none;margin-right:.6rem;white-space:nowrap}
.nav .brand b{color:var(--fungus)}
.nav a.n{font-family:Archivo,sans-serif;font-size:.78rem;color:var(--dim);text-decoration:none;
  padding:.3rem .55rem;border-radius:5px;white-space:nowrap}
.nav a.n:hover{color:var(--paper);background:rgba(214,217,186,.08)}
.nav a.n[aria-current=page]{color:var(--night);background:var(--fungus)}
.nav a.n.more{font-size:.74rem;color:color-mix(in srgb,var(--dim) 78%,transparent)}
.nav a.n.more:hover{color:var(--paper)}
.nav a.n.more[aria-current=page]{color:var(--night);background:var(--fungus)}
.nav .nav-div{width:1px;align-self:stretch;margin:.25rem .35rem;background:rgba(214,217,186,.18)}
.nav .spacer{flex:1}
.nav .me{font-family:Archivo,sans-serif;font-size:.72rem;color:var(--lantern);white-space:nowrap;text-decoration:none;border-radius:5px;padding:.2rem .4rem}
.nav .me:hover{background:rgba(255,200,110,.12)}
.nav .me[aria-current=page]{color:var(--night);background:var(--lantern)}
@media(max-width:40rem){.nav .nav-div{display:none}}

/* the carved sign at the top of a page */
.sign{background:linear-gradient(to bottom,#3A2A1C,#2B1E13);padding:1.6rem 1.4rem;border-radius:6px;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.35),inset 0 0 0 4px rgba(198,205,176,.14),0 20px 40px -20px #000;
  margin-bottom:1.6rem}
.sign p{margin:.5rem 0 0;color:var(--lichen)}

/* a mushroom-topped shelf card */
.board{background:linear-gradient(to bottom,var(--bark2),var(--bark));border-radius:12px;padding:1.3rem 1.35rem;
  box-shadow:0 18px 34px -22px #000;position:relative}
.board.cap::after{content:'';position:absolute;left:7%;right:55%;top:-6px;height:11px;border-radius:50%;
  background:radial-gradient(ellipse at 50% 100%,var(--moss2),var(--moss) 60%,transparent 75%);opacity:.85}
.board h2{margin:.1rem 0 .3rem;font-size:1.35rem}
.grid{display:grid;gap:1rem}
.grid.two{grid-template-columns:1fr 1fr}
.grid.auto{grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}
@media(max-width:560px){.grid.two{grid-template-columns:1fr}}

/* the score strip */
.score{display:flex;gap:1.6rem;flex-wrap:wrap;font-family:Archivo,sans-serif;font-size:.85rem;margin:.2rem 0 0}
.score b{color:var(--lantern);font-size:1.5rem;display:block;font-weight:600;line-height:1.2}

/* rank + progress bar */
.rank{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin:.2rem 0 .1rem}
.rank .title{font-size:1.5rem}
.bar{height:12px;border-radius:99px;background:rgba(0,0,0,.4);overflow:hidden;margin:.5rem 0 .3rem;
  box-shadow:inset 0 0 0 1px rgba(214,217,186,.15)}
.bar>i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--moss),var(--fungus));transition:width .5s ease}
.toNext{font-family:Archivo,sans-serif;font-size:.78rem;color:var(--dim)}

/* category bars */
.cats{display:grid;gap:.55rem;margin-top:.4rem}
.catrow{display:grid;grid-template-columns:9rem 1fr auto;gap:.7rem;align-items:center;font-family:Archivo,sans-serif;font-size:.78rem}
.catrow .cbar{height:8px;border-radius:99px;background:rgba(0,0,0,.4);overflow:hidden}
.catrow .cbar>i{display:block;height:100%;background:linear-gradient(90deg,var(--moss),var(--moss2))}
.catrow .n{color:var(--dim);white-space:nowrap}
@media(max-width:520px){.catrow{grid-template-columns:6.5rem 1fr auto}}

/* filters + search */
.controls{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin:.2rem 0 1.1rem}
.filters{display:flex;gap:.3rem;flex-wrap:wrap}
.filters button{font-family:Archivo,sans-serif;font-size:.75rem;padding:.32rem .6rem;border-radius:99px;
  border:1px solid rgba(214,217,186,.2);background:none;color:var(--dim);cursor:pointer}
.filters button[aria-pressed=true]{color:var(--night);background:var(--fungus);border-color:var(--fungus)}
input,textarea,select{font:inherit;font-size:.95rem;padding:.5rem .7rem;background:rgba(0,0,0,.3);
  color:inherit;border:1px solid rgba(214,217,186,.35);border-radius:6px}
input:focus,select:focus{outline:none;border-color:var(--moss2)}
.search{flex:1 1 12rem;min-width:8rem}

/* challenge list/cards */
.list{display:grid;gap:.9rem}
.list.cards{grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr))}
.ch{display:grid;grid-template-columns:1fr auto;gap:.25rem .8rem;align-items:start;text-decoration:none;color:inherit;
  background:linear-gradient(to bottom,var(--bark2),var(--bark));padding:1rem 1.1rem;border-radius:10px;
  position:relative;box-shadow:0 14px 26px -20px #000}
.ch:hover{outline:1px solid rgba(214,217,186,.2)}
.ch h3{font-weight:400;font-size:1.2rem;margin:0;font-variation-settings:'opsz' 40}
.ch .b{color:var(--dim);font-size:.92rem;grid-column:1/-1;margin:.15rem 0 0}
.ch .meta{grid-column:1/-1;font-family:Archivo,sans-serif;font-size:.72rem;color:var(--dim);margin-top:.4rem;
  display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.ch .pts{font-family:Archivo,sans-serif;font-size:.8rem;color:var(--lantern);white-space:nowrap}
.ch.done{outline:1px solid rgba(184,240,201,.35)}.ch.done .pts{color:var(--fungus)}
.lvl{display:inline-flex;gap:2px;vertical-align:middle}
.lvl i{width:6px;height:6px;border-radius:50%;background:rgba(214,217,186,.25)}.lvl i.on{background:var(--lantern)}
.pill{font-family:Archivo,sans-serif;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;
  padding:.12rem .45rem;border-radius:99px;border:1px solid rgba(214,217,186,.2);color:var(--dim)}

/* the flag / submit lock */
.lock{display:flex;gap:.5rem;flex-wrap:wrap;margin:.3rem 0}
.lock input{flex:1 1 15rem}
.btn{font-family:Archivo,sans-serif;font-size:.85rem;padding:.55rem 1.1rem;border-radius:6px;border:0;
  background:var(--moss);color:var(--paper);cursor:pointer}
.btn:hover{background:var(--moss2);color:var(--night)}
.btn.ghost{background:none;border:1px solid var(--lantern);color:var(--lantern)}
.btn.ghost:hover{background:rgba(255,200,110,.12);color:var(--lantern)}
.msg{font-family:Archivo,sans-serif;font-size:.85rem;color:var(--dim);min-height:1.4rem;margin:.4rem 0}
.msg.ok{color:var(--fungus)}

/* tracks / paths */
.path{margin:0 0 1.2rem}
.steps{list-style:none;padding:0;margin:.6rem 0 0;display:grid;gap:.5rem}
.steps li{display:grid;grid-template-columns:auto 1fr auto;gap:.7rem;align-items:center}
.steps a{text-decoration:none;color:var(--paper)}
.steps .dot{width:1.5rem;height:1.5rem;border-radius:50%;display:grid;place-items:center;font-family:Archivo,sans-serif;
  font-size:.72rem;border:1px solid rgba(214,217,186,.3);color:var(--dim)}
.steps li.done .dot{background:var(--fungus);color:var(--night);border-color:var(--fungus)}

/* leaderboard table */
table.board-t{width:100%;border-collapse:collapse;font-family:Archivo,sans-serif;font-size:.86rem}
table.board-t th{text-align:left;color:var(--dim);font-weight:600;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.08em;padding:.4rem .5rem;border-bottom:1px solid rgba(214,217,186,.2)}
table.board-t td{padding:.5rem .5rem;border-bottom:1px solid rgba(214,217,186,.08)}
table.board-t td.r{color:var(--lantern);width:2.5rem}
.tablewrap{overflow-x:auto}

/* prose (rules / how it works) */
.prose h2{font-size:1.5rem;margin:2rem 0 .3rem}
.prose h3{font-family:Archivo,sans-serif;font-size:.95rem;letter-spacing:.02em;margin:1.3rem 0 .2rem;color:var(--lantern)}
.prose p,.prose li{color:var(--lichen)}
.prose code{font-family:ui-monospace,Menlo,monospace;font-size:.9em;background:rgba(0,0,0,.35);padding:.1em .35em;border-radius:3px}
.prose ul{padding-left:1.2rem}

/* the members-only wall */
.wall{max-width:34rem;margin:3.5rem auto 0;background:linear-gradient(to bottom,var(--bark2),var(--bark));
  border-radius:12px;padding:2rem 1.8rem;box-shadow:0 22px 44px -24px #000;position:relative;text-align:left}
.wall::after{content:'';position:absolute;left:8%;right:52%;top:-7px;height:12px;border-radius:50%;
  background:radial-gradient(ellipse at 50% 100%,var(--moss2),var(--moss) 60%,transparent 75%);opacity:.85}
.wall h1{margin:.4rem 0 .3rem;font-size:2rem;font-variation-settings:'opsz' 72}
.wall p{color:var(--lichen)}.wall .lede{color:var(--lichen)}
.wall-in{display:flex;gap:.5rem;flex-wrap:wrap;margin:1.2rem 0 .3rem}
.wall-in input{flex:1 1 15rem;min-width:0;font:inherit;font-size:max(16px,.95rem);padding:.55rem .75rem;border-radius:6px;
  border:1px solid color-mix(in srgb,var(--lantern) 35%,transparent);background:var(--night);color:var(--lichen)}
.wall-in input:focus{outline:none;border-color:var(--lantern)}
.wall-in button{font-family:Archivo,sans-serif;font-size:.85rem;padding:.55rem 1.1rem;border-radius:6px;border:0;background:var(--moss);color:var(--night);cursor:pointer;white-space:nowrap}
.wall-in button:hover{background:var(--moss2)}
.wall-say{min-height:1.1rem;font-size:.9rem;color:var(--lantern)}
.wall-cta{display:flex;gap:.6rem;flex-wrap:wrap;margin:.9rem 0 .4rem}
.wall-cta .btn{text-decoration:none;display:inline-block}
.wall-note{font-size:.9rem;color:var(--lantern);font-style:italic;margin-top:1rem}
.wall-foot{font-family:Archivo,sans-serif;font-size:.78rem;color:var(--dim);margin-top:1.2rem}

/* presence: who's here */
.here-n{font-family:Archivo,sans-serif;font-size:.95rem;color:var(--paper);margin:.3rem 0 .6rem}
.chips{display:flex;gap:.4rem;flex-wrap:wrap}
.chip{font-family:Archivo,sans-serif;font-size:.78rem;padding:.24rem .6rem;border-radius:99px;
  border:1px solid rgba(214,217,186,.2);color:var(--lichen);background:rgba(0,0,0,.25)}
.chip.me{border-color:var(--fungus);color:var(--fungus)}

/* the activity feed */
ul.feed{list-style:none;padding:0;margin:.4rem 0 0;display:grid;gap:.5rem;font-family:Archivo,sans-serif;font-size:.86rem}
ul.feed li{display:flex;gap:.4rem;flex-wrap:wrap;align-items:baseline;color:var(--lichen);
  padding-bottom:.45rem;border-bottom:1px solid rgba(214,217,186,.08)}
ul.feed li:last-child{border-bottom:0;padding-bottom:0}
ul.feed .who{color:var(--fungus)}
ul.feed .what{color:var(--paper)}
ul.feed .when{color:var(--dim);margin-left:auto;font-size:.78rem;white-space:nowrap}

/* "N cracked · first: wren" on a card's meta row */
.ch .meta .crack,.spotlight .meta .crack{color:var(--moss2)}

/* today's climb */
.spotlight::before{content:'';position:absolute;inset:0;border-radius:12px;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,200,110,.28)}
.spotlight h2{margin:.2rem 0 .3rem}
.spotlight .meta{font-family:Archivo,sans-serif;font-size:.72rem;color:var(--dim);margin-top:.5rem;
  display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}

/* badges */
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:.6rem;margin-top:.5rem}
.badge{border:1px solid rgba(214,217,186,.16);border-radius:10px;padding:.6rem .7rem;background:rgba(0,0,0,.22);opacity:.5}
.badge.on{opacity:1;border-color:rgba(184,240,201,.4);background:rgba(46,74,34,.28)}
.badge .bn{display:block;font-family:Archivo,sans-serif;font-size:.82rem;font-weight:600;color:var(--paper)}
.badge.on .bn{color:var(--fungus)}
.badge .bb{display:block;font-family:Archivo,sans-serif;font-size:.72rem;color:var(--dim);margin-top:.15rem;line-height:1.35}

/* the solve celebration: fireflies overlay + a toast */
canvas.fx{position:fixed;inset:0;pointer-events:none;z-index:60}
.toast{position:fixed;left:50%;bottom:1.4rem;transform:translateX(-50%);z-index:61;
  font-family:Archivo,sans-serif;font-size:.85rem;color:var(--night);background:var(--fungus);
  padding:.55rem 1rem;border-radius:99px;box-shadow:0 12px 30px -12px #000;max-width:90vw;text-align:center}
@media(prefers-reduced-motion:reduce){canvas.fx{display:none}}

/* the terminal — a typed way into the same catalogue */
.term-board{padding-bottom:1rem}
.term{background:rgba(0,0,0,.42);border:1px solid rgba(214,217,186,.14);border-radius:8px;
  padding:.7rem .85rem;margin:.6rem 0 .2rem;box-shadow:inset 0 0 30px -18px #000}
.term-out{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85rem;line-height:1.55;
  color:var(--lichen);max-height:60vh;min-height:15rem;overflow:auto;
  white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere}
.tline{margin:0;min-height:1.2em}
.tline.echo{color:var(--fungus)}
.tline.head{color:var(--lantern)}
.tline.ok{color:var(--fungus)}
.tline.dim{color:var(--dim)}
.term-in{display:flex;gap:.5rem;align-items:center;margin-top:.5rem;
  border-top:1px solid rgba(214,217,186,.12);padding-top:.55rem}
.term-caret{font-family:ui-monospace,Menlo,monospace;color:var(--fungus);font-size:1.05rem;line-height:1}
#tin{flex:1;min-width:0;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.95rem;
  background:none;border:0;color:var(--paper);padding:.45rem .2rem}
#tin:focus{outline:none}
.term-caret{animation:termblink 1.15s steps(1) infinite}
@keyframes termblink{50%{opacity:.3}}
@media(prefers-reduced-motion:reduce){.term-caret{animation:none}}
.term-tip{font-family:Archivo,sans-serif;font-size:.82rem;color:var(--dim);margin:.5rem 0 0}
.term-tip b{color:var(--lantern);font-weight:600}
.tline.err{color:#E8A08D}

/* the lab — a shell prompt in front of the input, and a taller scrollback */
.lab-term .term-out{max-height:64vh;min-height:18rem}
.term-ps{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.95rem;color:var(--fungus);
  white-space:pre;flex:0 0 auto;max-width:60%;overflow:hidden;text-overflow:ellipsis}
.lab-term .term-in{align-items:baseline}
@media(max-width:520px){.term-ps{max-width:100%;flex-basis:100%;font-size:.82rem}.lab-term .term-in{flex-wrap:wrap}}

.empty{color:var(--dim);font-style:italic}
footer{margin-top:3rem;font-family:Archivo,sans-serif;font-size:.78rem;color:var(--dim);
  border-top:1px solid rgba(214,217,186,.12);padding-top:1.2rem}
footer a{color:var(--dim)}
.stack{display:grid;gap:1.4rem}
.mt{margin-top:1.6rem}
h1 .lvl{margin-left:.4rem}

/* ============================================================
   TERMINAL SKIN — make the arena read like a real terminal you're inside.
   a phosphor CRT: mono type, a window titlebar with traffic lights, scanlines
   and a faint flicker, boot-banner signs, a blinking block cursor, prompt
   headers and bracketed buttons. layered over the woodland bones by redefining
   the tokens and re-skinning the loud surfaces. the flicker stops for anyone
   who asked for less movement. the challenge pages carry their own css, so
   this is only the hub — which is exactly where you feel like you're at a shell.
   ============================================================ */
:root{
  --night:#060D09; --bark:#0B1611; --bark2:#0E1B14; --dirt:#122018;
  --moss:#2F6B45; --moss2:#5FB07E; --lichen:#A6D6B4; --paper:#CFEFD9; --dim:#5E8A6E;
  --lantern:#F3C577; --fungus:#79F79E; --crt:#0A1410;
}
body{font-family:ui-monospace,"Cascadia Code","SF Mono",Menlo,Consolas,monospace;
  background:#060D09;
  background-image:radial-gradient(ellipse 130% 55% at 50% 0%,rgba(46,120,74,.10),transparent 60%),
                   radial-gradient(ellipse 120% 42% at 50% 100%,rgba(46,120,74,.14),transparent 72%);
  text-shadow:0 0 1px rgba(121,247,158,.12); padding-top:2.3rem}

/* the window titlebar, fixed at the top, with real traffic lights */
body::before{content:"visitor@arena: ~/arena — bash";
  position:fixed;top:0;left:0;right:0;z-index:40;height:2.3rem;display:flex;align-items:center;
  padding:0 .9rem 0 3.9rem;font-size:.72rem;letter-spacing:.02em;color:var(--dim);
  background:radial-gradient(circle at 1.1rem 50%,#ff5f56 0 5px,transparent 6px),
             radial-gradient(circle at 2.05rem 50%,#ffbd2e 0 5px,transparent 6px),
             radial-gradient(circle at 3rem 50%,#27c93f 0 5px,transparent 6px),
             #040805;
  border-bottom:1px solid rgba(121,247,158,.22); text-shadow:none;
  white-space:nowrap;overflow:hidden}

/* scanlines, a faint flicker, and a curved-glass vignette so it reads like a real CRT */
body::after{content:"";position:fixed;inset:0;z-index:55;pointer-events:none;
  background:
    radial-gradient(ellipse 100% 100% at 50% 48%, transparent 58%, rgba(0,0,0,.5) 100%),
    repeating-linear-gradient(0deg,rgba(0,0,0,.26) 0 1px,transparent 1px 3px);
  mix-blend-mode:multiply;opacity:.5;animation:crtflick 7s steps(40) infinite}
@keyframes crtflick{0%,100%{opacity:.4}47%{opacity:.34}48%{opacity:.46}}
@media(prefers-reduced-motion:reduce){body::after{animation:none}}

/* type: everything mono, headings glow */
h1,h2,h3{font-family:inherit;font-variation-settings:normal;letter-spacing:-.005em}
h1{color:var(--fungus);text-shadow:0 0 8px rgba(121,247,158,.35)}
.tag,.score,.btn,.filters button,.pill,.chip,.nav .brand,.nav a.n,.nav .me,
table.board-t,ul.feed,.prose h3,.toNext,.catrow,.here-n,.msg,.wall-in button,
.wall-in input,.badge .bn,.badge .bb,.steps .dot,footer{font-family:inherit}

/* the boot banner: each page's carved sign becomes a shell prompt */
.sign{position:relative;background:var(--crt);padding-top:2.5rem;border:1px solid rgba(121,247,158,.22);
  border-radius:4px;box-shadow:inset 0 0 44px -26px rgba(121,247,158,.6)}
.sign::before{content:"visitor@arena:~$ ./arena --start";position:absolute;top:.85rem;left:1.4rem;right:1.4rem;
  font-size:.8rem;color:var(--moss2);text-shadow:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sign .tag::before{content:"# "}
.sign h1::after,.wall h1::after{content:"\2588";color:var(--fungus);margin-left:.12em;
  animation:tcur 1.15s steps(1) infinite}
@keyframes tcur{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.sign h1::after,.wall h1::after{animation:none}}

/* panels: near-black, phosphor hairline, sharp; a ▸ prompt on headers */
.board,.wall{background:var(--crt);border:1px solid rgba(121,247,158,.18);border-radius:4px}
.board.cap::after,.wall::after{display:none}                 /* no mushroom caps in a terminal */
.board h2::before{content:"\25B8 ";color:var(--moss2)}
.ch{background:var(--crt);border:1px solid rgba(121,247,158,.13);border-radius:4px;box-shadow:none}
.ch:hover{outline:1px solid var(--fungus)}
.ch h3::before{content:"$ ";color:var(--moss2)}
.badge{border-radius:4px}

/* nav: a mono status/command strip under the titlebar */
.nav{top:2.3rem;background:#040805;border-bottom:1px solid rgba(121,247,158,.22);backdrop-filter:none}
.nav .brand b{color:var(--fungus)}

/* inputs + buttons: bracketed, mono, phosphor */
input,textarea,select{background:#040805;border:1px solid rgba(121,247,158,.3);border-radius:3px}
input:focus,select:focus,textarea:focus{border-color:var(--fungus)}
.btn{background:none;border:1px solid var(--fungus);color:var(--fungus);border-radius:3px}
.btn:hover{background:var(--fungus);color:#041007}
.btn::before{content:"[ "} .btn::after{content:" ]"}
.filters button{border-radius:3px}

/* the flag lock reads like a submit prompt */
.lock::before{content:"submit_flag > ";align-self:center;color:var(--moss2);font-size:.9rem}
@media(max-width:520px){.lock::before{flex-basis:100%}}

/* dashboard: ascii banner, live search, and an ascii trend chart — 80s/90s data-den vibe */
.asciiban { text-align: left; }
.ban { color: var(--fungus); font-family: ui-monospace, Menlo, Consolas, monospace; line-height: 1.05; font-size: clamp(.55rem, 2.4vw, 1rem); margin: 0; overflow-x: auto; text-shadow: 0 0 8px rgba(121,247,158,.4); }
.readout { font-family: ui-monospace, Menlo, monospace; font-size: .78rem; color: var(--dim); margin-top: .5rem; word-break: break-word; }
.readout .cur { margin-left: .1em; animation: tcur 1.15s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .readout .cur { animation: none; } }
.searchres { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; font-family: Archivo, sans-serif; font-size: .88rem; }
.searchres a { text-decoration: none; }
.srn { font-family: ui-monospace, Menlo, monospace; font-size: .74rem; margin: .55rem 0 0; }
.trendchart { font-family: ui-monospace, Menlo, monospace; font-size: .8rem; line-height: 1.55; color: var(--lichen); white-space: pre; overflow-x: auto; margin: .2rem 0 0; }
.spark14 { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; margin-top: .7rem; font-family: ui-monospace, Menlo, monospace; }
.sparkline { color: var(--fungus); letter-spacing: 1px; font-size: 1rem; text-shadow: 0 0 6px rgba(121,247,158,.4); }

/* the collective — bbs/anonymous-crew identity + tips board */
.crew { font-family: ui-monospace, Menlo, monospace; font-size: .8rem; color: var(--lantern); letter-spacing: .03em; margin-top: .55rem; word-break: break-word; text-shadow: 0 0 6px rgba(255,200,110,.3); }
.motd { font-family: ui-monospace, Menlo, monospace; font-size: .82rem; color: var(--lichen); margin-top: .4rem; }
.tips { display: grid; gap: .5rem; margin-top: .3rem; }
.tip { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: baseline; font-family: Archivo, sans-serif; font-size: .85rem; }
.tip code { font-family: ui-monospace, Menlo, monospace; font-size: .8rem; color: var(--fungus); background: rgba(0,0,0,.34); padding: .14em .45em; border-radius: 3px; white-space: nowrap; }
.tip span { color: var(--lichen); }
@media (max-width:560px) { .tip { grid-template-columns: 1fr; gap: .1rem; } .tip code { white-space: normal; } }

/* the lab-network node roster — a bbs node list on the front page */
.noderoster { font-family: ui-monospace, Menlo, monospace; font-size: .82rem; margin-top: .35rem; border: 1px solid rgba(121,247,158,.22); border-radius: 4px; overflow: hidden; }
.noderow { display: grid; grid-template-columns: 3.2rem 7rem 8rem 1fr 6.2rem; gap: .6rem; padding: .38rem .6rem; align-items: baseline; border-top: 1px solid rgba(121,247,158,.1); }
.noderow:first-child { border-top: 0; }
.noderow.nodehead { color: var(--dim); text-transform: uppercase; letter-spacing: .1em; font-size: .68rem; background: rgba(0,0,0,.3); }
.noderow:not(.nodehead):hover { background: rgba(121,247,158,.06); }
.noderow .green { text-shadow: 0 0 6px rgba(121,247,158,.4); white-space: nowrap; }
.nodenew { color: var(--night); background: var(--lantern); border-radius: 99px; padding: 0 .4em; font-size: .62rem; letter-spacing: .08em; vertical-align: .05em; }
@media (max-width:620px) {
  .noderoster { font-size: .78rem; }
  .noderow { grid-template-columns: 2.6rem 1fr auto; gap: .4rem .6rem; }
  .noderow span:nth-child(3), .noderow span:nth-child(4) { display: none; }
}

/* ============================================================
   THE DESKTOP (index.html) — the arena as someone's computer.
   a casual desk, a terminal box to work from, windows for the
   puzzles with dials. keeps the phosphor-green terminal inside.
   ============================================================ */
body[data-page="desktop"] { padding-top: 0; overflow: hidden; }
body[data-page="desktop"]::before, body[data-page="desktop"]::after { display: none; } /* no fake titlebar, no CRT scanlines — a casual desktop */
.deskroot { position: fixed; inset: 0; overflow: auto; }
/* a casual "personal computer" wallpaper: dusk over rolling hills, drawn in CSS (no photo to fetch) */
.desk { position: fixed; inset: 0; overflow: hidden;
  background: linear-gradient(180deg, #17233f 0%, #26314f 26%, #3a3a56 50%, #5b4a5f 70%, #855a54 87%, #a06e4f 100%); }
.desk::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(closest-side circle at 74% 27%, rgba(255,222,178,.6), rgba(255,200,150,.14) 55%, transparent 72%),
    radial-gradient(140% 62% at 18% 116%, #10192b 0 41%, transparent 42%),
    radial-gradient(150% 66% at 82% 121%, #182137 0 45%, transparent 46%),
    radial-gradient(170% 74% at 50% 128%, #202a41 0 50%, transparent 51%),
    radial-gradient(ellipse 100% 100% at 50% 44%, transparent 58%, rgba(0,0,0,.42) 100%); }
/* --- wallpaper themes (Settings) --- */
.desk[data-wall="daybreak"] { background: linear-gradient(180deg, #4f6a74 0%, #6d8478 42%, #9a9a72 74%, #b39a66 100%); }
.desk[data-wall="daybreak"]::before { background: radial-gradient(closest-side circle at 76% 24%, rgba(255,246,214,.7), transparent 58%), radial-gradient(150% 66% at 50% 126%, #3a5140 0 50%, transparent 51%), radial-gradient(ellipse 100% 100% at 50% 44%, transparent 60%, rgba(0,0,0,.3) 100%); }
.desk[data-wall="midnight"] { background: linear-gradient(180deg, #070b18 0%, #0d1428 55%, #121a34 100%); }
.desk[data-wall="midnight"]::before { background: radial-gradient(1px 1px at 15% 22%, #cfe0ff 99%, transparent), radial-gradient(1px 1px at 62% 14%, #cfe0ff 99%, transparent), radial-gradient(1px 1px at 82% 33%, #cfe0ff 99%, transparent), radial-gradient(1px 1px at 34% 40%, #cfe0ff 99%, transparent), radial-gradient(1px 1px at 48% 18%, #cfe0ff 99%, transparent), radial-gradient(160% 70% at 50% 128%, #0a1024 0 50%, transparent 51%), radial-gradient(ellipse 100% 100% at 50% 42%, transparent 55%, rgba(0,0,0,.5) 100%); }
.desk[data-wall="forest"] { background: linear-gradient(180deg, #16302a 0%, #1c3a2e 45%, #274a33 75%, #385a3d 100%); }
.desk[data-wall="forest"]::before { background: radial-gradient(closest-side circle at 74% 26%, rgba(220,240,190,.35), transparent 60%), radial-gradient(140% 62% at 18% 116%, #0c1c14 0 41%, transparent 42%), radial-gradient(150% 66% at 82% 121%, #12281c 0 45%, transparent 46%), radial-gradient(170% 74% at 50% 128%, #193626 0 50%, transparent 51%), radial-gradient(ellipse 100% 100% at 50% 44%, transparent 58%, rgba(0,0,0,.4) 100%); }
.desk[data-wall="aurora"] { background: linear-gradient(180deg, #0c1626 0%, #142a3a 45%, #2a2450 80%, #3a2a5a 100%); }
.desk[data-wall="aurora"]::before { background: radial-gradient(120% 45% at 40% 30%, rgba(90,240,180,.22), transparent 60%), radial-gradient(120% 45% at 65% 40%, rgba(150,120,255,.20), transparent 60%), radial-gradient(1px 1px at 20% 18%, #fff 99%, transparent), radial-gradient(1px 1px at 76% 24%, #fff 99%, transparent), radial-gradient(160% 70% at 50% 128%, #0a1220 0 50%, transparent 51%), radial-gradient(ellipse 100% 100% at 50% 44%, transparent 58%, rgba(0,0,0,.45) 100%); }
.desk[data-wall="ember"] { background: linear-gradient(180deg, #1c1414 0%, #2c1a18 45%, #5a2c22 78%, #7a3a24 100%); }
.desk[data-wall="ember"]::before { background: radial-gradient(closest-side circle at 74% 27%, rgba(255,180,120,.5), transparent 62%), radial-gradient(140% 62% at 18% 116%, #180d0b 0 41%, transparent 42%), radial-gradient(150% 66% at 82% 121%, #241211 0 45%, transparent 46%), radial-gradient(170% 74% at 50% 128%, #301715 0 50%, transparent 51%), radial-gradient(ellipse 100% 100% at 50% 44%, transparent 58%, rgba(0,0,0,.45) 100%); }
.desk[data-wall="phosphor"] { background: linear-gradient(180deg, #04120b, #061a10); }
.desk[data-wall="phosphor"]::before { background-image: linear-gradient(rgba(121,247,158,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(121,247,158,.10) 1px, transparent 1px); background-size: 26px 26px, 26px 26px; -webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 45%, #000 45%, transparent 90%); mask-image: radial-gradient(ellipse 90% 90% at 50% 45%, #000 45%, transparent 90%); }

/* Settings */
.awin-settings .awin-body { background: #0a1410; overflow: auto; padding: 1rem 1.1rem; }
.set-sec { margin-bottom: 1.3rem; }
.set-sec h3 { margin: 0 0 .6rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--lantern); font-weight: 600; }
.wall-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr)); gap: .6rem; }
.wall-sw { background: none; border: 1px solid transparent; border-radius: 7px; padding: .35rem; cursor: pointer; color: var(--lichen); font: inherit; font-size: .7rem; display: flex; flex-direction: column; gap: .3rem; align-items: center; }
.wall-sw:hover { background: rgba(121,247,158,.06); }
.wall-sw.on { border-color: var(--fungus); background: rgba(121,247,158,.1); }
.wall-prev { width: 100%; height: 3rem; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.set-rows { display: flex; flex-direction: column; gap: .3rem; }
.set-row { display: flex; justify-content: space-between; gap: 1rem; font-family: ui-monospace, Menlo, monospace; font-size: .76rem; color: var(--dim); }
.set-row b { color: var(--lichen); font-weight: 400; }
.set-about { margin: .8rem 0 0; font-size: .78rem; color: var(--dim); line-height: 1.5; }

/* Browser */
.awin-browser .awin-body { background: #0e1512; display: flex; flex-direction: column; }
.br-bar { flex: none; display: flex; gap: .4rem; padding: .4rem .5rem; border-bottom: 1px solid rgba(121,247,158,.14); background: #0c1813; }
.br-nav { font: inherit; font-size: .8rem; color: var(--lichen); background: rgba(121,247,158,.08); border: 1px solid rgba(121,247,158,.18); border-radius: 5px; padding: .3rem .55rem; cursor: pointer; }
.br-nav:hover { background: rgba(121,247,158,.16); }
.br-addr { flex: 1; font-family: ui-monospace, Menlo, monospace; font-size: .78rem; padding: .35rem .6rem; background: #060f0c; color: var(--paper); border: 1px solid rgba(121,247,158,.2); border-radius: 6px; }
.br-bm { flex: none; display: flex; gap: .3rem; padding: .35rem .5rem; border-bottom: 1px solid rgba(121,247,158,.1); overflow-x: auto; }
.br-bmk { font: inherit; font-size: .72rem; color: var(--lichen); background: rgba(121,247,158,.05); border: 1px solid rgba(121,247,158,.14); border-radius: 5px; padding: .25rem .5rem; cursor: pointer; white-space: nowrap; }
.br-bmk:hover { background: rgba(121,247,158,.12); }
.br-view { flex: 1; overflow: auto; background: #f4f1e8; color: #1c2420; }
.br-page, .br-home, .br-err { padding: 1.2rem 1.4rem; font-family: Archivo, sans-serif; font-size: .9rem; line-height: 1.6; }
.br-doc h1 { font-size: 1.4rem; margin: 0 0 .3rem; color: #14201a; }
.br-doc h3 { margin: 1rem 0 .3rem; font-size: 1rem; }
.br-view .dim { color: #6a7a70; }
.br-view a[data-go] { color: #1f6feb; text-decoration: underline; cursor: pointer; }
.br-view label { display: block; margin: .5rem 0; font-size: .85rem; }
.br-view input { font: inherit; font-size: .85rem; padding: .35rem .5rem; margin-left: .4rem; border: 1px solid #b9c2bb; border-radius: 4px; background: #fff; color: #1c2420; }
.br-btn { font: inherit; font-size: .85rem; margin-top: .5rem; padding: .4rem .9rem; border: 0; border-radius: 5px; background: #2f6b45; color: #fff; cursor: pointer; }
.br-msg { color: #c0392b; font-size: .82rem; }
.br-pre, .br-plain { font-family: ui-monospace, Menlo, monospace; font-size: .82rem; background: #e7e3d6; border: 1px solid #cfc9b8; border-radius: 5px; padding: .6rem .7rem; white-space: pre-wrap; word-break: break-all; color: #23302a; margin: .5rem 0; }
.br-dir { list-style: none; padding: 0; font-family: ui-monospace, Menlo, monospace; font-size: .85rem; }
.br-dir li { padding: .2rem 0; border-bottom: 1px solid #e0dccd; }
.br-view .grn { color: #2f8a4d; }
.br-home h2 { font-size: 1.1rem; color: #4a5a50; font-weight: 600; }
.br-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: .7rem; margin-top: .8rem; }
.br-tile { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: 1rem .5rem; background: #fff; border: 1px solid #d8d2c2; border-radius: 8px; cursor: pointer; font: inherit; font-size: .8rem; color: #23302a; }
.br-tile span { font-size: 1.8rem; }
.br-tile:hover { border-color: #2f6b45; }
.br-err { color: #444; }
.br-viewsrc { margin: 0; padding: 1rem; font-family: ui-monospace, Menlo, monospace; font-size: .76rem; line-height: 1.6; background: #0b1410; color: var(--lichen); white-space: pre-wrap; word-break: break-word; min-height: 100%; }

/* Photos */
.awin-photos .awin-body { background: #0a1410; display: flex; flex-direction: column; }
.ph-bar { flex: none; display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border-bottom: 1px solid rgba(121,247,158,.14); color: var(--lichen); font-size: .82rem; }
.ph-bar .dim { color: var(--dim); font-size: .74rem; }
.ph-bar .ph-info { margin-left: auto; }
.ph-back, .ph-info { font: inherit; font-size: .78rem; color: var(--lichen); background: rgba(121,247,158,.08); border: 1px solid rgba(121,247,158,.18); border-radius: 5px; padding: .25rem .55rem; cursor: pointer; }
.ph-back:hover, .ph-info:hover { background: rgba(121,247,158,.16); }
.ph-grid { flex: 1; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .7rem; padding: .8rem; align-content: start; }
.ph-tile { background: none; border: 0; cursor: pointer; color: var(--lichen); font: inherit; display: flex; flex-direction: column; gap: .3rem; }
.ph-img { display: flex; align-items: center; justify-content: center; aspect-ratio: 4/3; border-radius: 8px; box-shadow: 0 6px 18px -8px #000; }
.ph-emoji { font-size: 2.4rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); opacity: .9; }
.ph-cap { font-size: .72rem; color: var(--lichen); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.ph-stage { flex: 1; overflow: auto; display: flex; gap: 1rem; padding: 1rem; }
.ph-big { flex: 1; min-height: 14rem; border-radius: 10px; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 30px -12px #000; }
.ph-bigemoji { font-size: 5rem; filter: drop-shadow(0 3px 6px rgba(0,0,0,.4)); opacity: .92; }
.ph-meta { flex: none; width: 15rem; background: #0c1813; border: 1px solid rgba(121,247,158,.14); border-radius: 8px; padding: .8rem; overflow: auto; }
.ph-meta h4 { margin: 0 0 .5rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--lantern); }
.ph-ex { display: flex; flex-direction: column; gap: .3rem; font-family: ui-monospace, Menlo, monospace; font-size: .72rem; }
.ph-ex > div { display: flex; flex-direction: column; }
.ph-ex span { color: var(--dim); }
.ph-ex b { color: var(--lichen); font-weight: 400; word-break: break-all; }
.ph-meta .dim { color: var(--dim); font-size: .72rem; margin-top: .6rem; }
.ph-meta code { color: var(--fungus); }
@media (max-width: 640px) { .ph-stage { flex-direction: column; } .ph-meta { width: auto; } }
.desk-watermark { position: absolute; bottom: 3.4rem; right: 1.2rem; text-align: right; pointer-events: none;
  display: flex; flex-direction: column; gap: .2rem; color: rgba(255,255,255,.16); z-index: 0; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.desk-watermark b { font-size: 1.05rem; letter-spacing: .16em; font-weight: 700; }
.desk-watermark span { font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; }

.desk-icons { position: absolute; top: 1rem; left: 1rem; display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; gap: 1rem .4rem; max-height: calc(100vh - 4rem); z-index: 5; }
.icon { display: flex; flex-direction: column; align-items: center; gap: .25rem; width: 5rem; padding: .35rem;
  background: none; border: 0; border-radius: 6px; cursor: pointer; color: #fff; font: inherit; font-size: .72rem; text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,.75); }
.icon .ico { font-size: 1.7rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
.icon:hover { background: rgba(121,247,158,.08); }
.icon:focus-visible { outline: 2px solid var(--fungus); }

.winlayer { position: absolute; inset: 0 0 2.6rem 0; }

.awin { position: absolute; display: flex; flex-direction: column; min-width: 16rem;
  background: var(--crt); border: 1px solid rgba(150,180,165,.28); border-radius: 8px;
  box-shadow: 0 24px 60px -24px #000, 0 0 0 1px rgba(0,0,0,.4); overflow: hidden; }
.awin.active { border-color: rgba(121,247,158,.5); box-shadow: 0 28px 70px -22px #000, 0 0 0 1px rgba(121,247,158,.2); }
.awin.maxed { border-radius: 0; }
.awin-bar { display: flex; align-items: center; gap: .5rem; height: 2.1rem; padding: 0 .3rem 0 .6rem; cursor: grab;
  background: linear-gradient(#1a2a22, #10201a); border-bottom: 1px solid rgba(121,247,158,.14); user-select: none; touch-action: none; }
.awin.active .awin-bar { background: linear-gradient(#20362a, #16281f); border-bottom-color: rgba(121,247,158,.28); }
.awin-bar:active { cursor: grabbing; }
.awin-ico { font-size: .95rem; flex: none; line-height: 1; }
.awin-title { font-size: .78rem; color: var(--dim); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.awin.active .awin-title { color: var(--paper); }
.awin-actions { display: flex; gap: 0; }
.awin-actions button { width: 2rem; height: 2.1rem; border: 0; background: transparent; color: var(--dim); cursor: pointer; font-size: .95rem; line-height: 1; }
.awin-actions button:hover { background: rgba(255,255,255,.08); color: var(--paper); }
.awin-actions .awin-x:hover { background: #d64f43; color: #fff; }
.awin-body { flex: 1; overflow: auto; position: relative; min-height: 0; }
.awin-grip { position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; cursor: nwse-resize; z-index: 2;
  background: linear-gradient(135deg, transparent 50%, rgba(121,247,158,.35) 50%); }

.awin-term .awin-body { overflow: hidden; padding: 0; }
.awin-term .term-board { margin: 0; border: 0; border-radius: 0; max-width: none; height: 100%; display: flex; flex-direction: column; padding: .5rem .7rem .6rem; background: transparent; }
.awin-term .term { flex: 1; display: flex; flex-direction: column; min-height: 0; margin: 0; }
.awin-term .term-out { flex: 1; max-height: none; min-height: 0; }

.chframe { width: 100%; height: 100%; border: 0; background: transparent; display: block; }
.awin-ch .awin-body, .awin-lab .awin-body { display: flex; flex-direction: column; }
.awin-ch .chframe, .awin-lab .chframe { flex: 1; }
.chhint { flex: none; font-size: .72rem; color: var(--dim); padding: .35rem .7rem; border-top: 1px solid rgba(121,247,158,.15); background: #0a1410; }
.chhint b { color: var(--fungus); }

.awin-menu .awin-body { padding: 0; }
.menu-scroll { padding: .6rem .7rem 1rem; }
.msec { margin-bottom: 1rem; }
.mhead { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--lantern); margin: .3rem 0 .5rem; display: flex; gap: .5rem; align-items: baseline; }
.mcount { color: var(--dim); font-size: .68rem; }
.mgrid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.mcard { display: flex; gap: .5rem; align-items: center; text-align: left; cursor: pointer; color: var(--paper); font: inherit;
  background: rgba(121,247,158,.04); border: 1px solid rgba(121,247,158,.16); border-radius: 6px; padding: .45rem .55rem; }
.mcard:hover { background: rgba(121,247,158,.1); border-color: rgba(121,247,158,.4); }
.mcard.done { opacity: .72; }
.mnum { font-size: .7rem; color: var(--dim); flex: none; }
.mmid { display: flex; flex-direction: column; min-width: 0; }
.mtitle { font-size: .82rem; color: var(--lichen); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mtick { color: var(--fungus); }
.mmeta { font-size: .66rem; color: var(--dim); }
.mmeta .off { opacity: .3; }

.taskbar { position: absolute; left: 0; right: 0; bottom: 0; height: 2.6rem; display: flex; align-items: center; gap: .4rem;
  padding: 0 .6rem; background: #0a1410; border-top: 1px solid rgba(121,247,158,.25); z-index: 30; }
.tb { font: inherit; font-size: .78rem; color: var(--lichen); background: rgba(121,247,158,.06); border: 1px solid rgba(121,247,158,.18);
  border-radius: 5px; padding: .35rem .6rem; cursor: pointer; white-space: nowrap; text-decoration: none; }
.tb:hover { background: rgba(121,247,158,.14); }
.tb-start { color: var(--night); background: var(--fungus); border-color: var(--fungus); font-weight: 600; display: flex; align-items: center; gap: .35rem; }
.tb-start.on { filter: brightness(.85); }
.tb-start .startlogo { font-size: .9rem; }
.tb-freedom { display: flex; align-items: center; gap: .4rem; color: var(--fungus); background: rgba(121,247,158,.06); }
.tb-freedom .fmini { display: inline-block; width: 3.2rem; height: .5rem; border-radius: 3px; background: rgba(121,247,158,.16); overflow: hidden; }
.tb-freedom .fmini i { display: block; height: 100%; background: var(--fungus); box-shadow: 0 0 6px rgba(121,247,158,.6); }
.tb-tasks { display: flex; gap: .35rem; overflow: hidden; flex: 1; margin-left: .4rem; }
.tb-chip { font: inherit; font-size: .72rem; color: var(--dim); background: rgba(255,255,255,.04); border: 1px solid rgba(121,247,158,.14);
  border-radius: 5px; padding: .3rem .55rem; cursor: pointer; white-space: nowrap; max-width: 9rem; overflow: hidden; text-overflow: ellipsis; }
.tb-chip.active { color: var(--paper); border-color: rgba(121,247,158,.4); background: rgba(121,247,158,.1); }
.tb-sp { flex: none; width: .2rem; }
.tb-link { color: var(--dim); }
.tb-clock { font-size: .78rem; color: var(--lichen); font-variant-numeric: tabular-nums; padding-left: .3rem; }

body.desk-dragging iframe { pointer-events: none; } /* let a drag glide over an embedded page */

/* the start menu */
.startmenu { position: absolute; left: .6rem; bottom: 3rem; width: 16rem; z-index: 45;
  background: #0c1813; border: 1px solid rgba(121,247,158,.3); border-radius: 8px; box-shadow: 0 24px 60px -18px #000; overflow: hidden; }
.sm-head { padding: .7rem .8rem; background: linear-gradient(#173026, #10201a); border-bottom: 1px solid rgba(121,247,158,.18); display: flex; flex-direction: column; }
.sm-head b { color: var(--paper); font-size: .9rem; }
.sm-head span { color: var(--dim); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; }
.sm-free { position: relative; padding: .5rem .8rem; font-size: .72rem; color: var(--fungus); border-bottom: 1px solid rgba(121,247,158,.12); }
.sm-free i { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--fungus); }
.sm-list { padding: .3rem; max-height: 60vh; overflow: auto; }
.startitem { display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left; background: none; border: 0; border-radius: 5px;
  padding: .45rem .55rem; cursor: pointer; color: var(--lichen); font: inherit; font-size: .82rem; }
.startitem:hover { background: rgba(121,247,158,.12); }
.startitem .si-ico { font-size: 1rem; flex: none; }
.startitem .si-name { flex: 1; }
.startitem.locked { color: var(--dim); }
.startitem .si-lock { font-size: .64rem; color: var(--lantern); flex: none; }

/* his files (a folder window) */
.awin-folder .awin-body { background: #0a1410; }
.folder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr)); gap: .5rem; padding: .8rem; }
.ficon { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .5rem .2rem; background: none; border: 1px solid transparent; border-radius: 6px; cursor: pointer; color: var(--lichen); font: inherit; font-size: .7rem; text-align: center; position: relative; }
.ficon:hover { background: rgba(121,247,158,.08); border-color: rgba(121,247,158,.2); }
.ficon .fico { font-size: 1.9rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.ficon.locked { opacity: .6; }
.ficon .flock { position: absolute; top: .3rem; right: .5rem; font-size: .8rem; }

/* a locked file */
.lockbox { padding: 1.2rem; text-align: center; display: flex; flex-direction: column; gap: .5rem; align-items: center; height: 100%; justify-content: center; }
.lockbox .lockbig { font-size: 2.6rem; }
.lockbox h3 { margin: 0; color: var(--lantern); font-size: 1rem; }
.lockbox p { margin: 0; color: var(--lichen); font-size: .84rem; max-width: 20rem; }
.lockbar { width: 80%; height: 8px; border-radius: 4px; background: rgba(121,247,158,.14); overflow: hidden; margin-top: .3rem; }
.lockbar i { display: block; height: 100%; background: var(--fungus); }
.lockpct { color: var(--dim); font-size: .72rem; }
.lockgo { margin-top: .4rem; font: inherit; font-size: .8rem; color: var(--night); background: var(--fungus); border: 0; border-radius: 5px; padding: .45rem .9rem; cursor: pointer; }

/* readme */
.awin-readme .awin-body { background: #0a1410; }
.readme { margin: 0; padding: 1rem 1.1rem; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .82rem; line-height: 1.6; color: var(--lichen); white-space: pre-wrap; word-break: break-word; }

/* trophy room */
.awin-trophy .awin-body { background: #0a1410; padding: 1rem; }
.trophy-head { font-size: 1.1rem; color: var(--lantern); text-align: center; margin-bottom: 1rem; text-shadow: 0 0 8px rgba(243,197,119,.3); }

/* the break-in overlay */
.breach-ov { position: absolute; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 1.5rem;
  background: radial-gradient(ellipse at center, rgba(6,13,9,.9), rgba(4,8,5,.98)); }
.breach { max-width: 34rem; width: 100%; background: #0a1410; border: 1px solid rgba(121,247,158,.35); border-radius: 10px; padding: 1.4rem; box-shadow: 0 30px 80px -20px #000; }
.breach-log { margin: 0 0 1rem; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8rem; line-height: 1.7; color: var(--fungus); white-space: pre-wrap; }
.breach-msg { color: var(--lichen); font-size: .92rem; line-height: 1.6; }
.breach-msg b { color: var(--fungus); font-size: 1.05rem; letter-spacing: .04em; }
.breach-go { margin-top: 1.2rem; font: inherit; font-size: .9rem; color: var(--night); background: var(--fungus); border: 0; border-radius: 6px; padding: .6rem 1.2rem; cursor: pointer; font-weight: 600; }

/* the machine-freed payoff */
.freed-ov { position: absolute; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center; padding: 1.5rem;
  background: radial-gradient(ellipse at center, rgba(18,40,28,.85), rgba(4,8,5,.97)); }
.freed-card { text-align: center; max-width: 30rem; }
.freed-big { font-size: clamp(2rem, 8vw, 3.4rem); font-weight: 700; letter-spacing: .1em; color: var(--fungus); text-shadow: 0 0 22px rgba(121,247,158,.5); margin-bottom: .8rem; }
.freed-card p { color: var(--lichen); font-size: .95rem; line-height: 1.6; margin: .3rem 0; }
.freed-card .dim { color: var(--dim); font-size: .84rem; }
.freed-ok { margin-top: 1.2rem; font: inherit; font-size: .9rem; color: var(--night); background: var(--fungus); border: 0; border-radius: 6px; padding: .55rem 1.4rem; cursor: pointer; font-weight: 600; }

.freed-root { margin: 1rem auto 0; max-width: 24rem; display: flex; flex-direction: column; gap: .4rem; }
.freed-root code { font-family: ui-monospace, Menlo, monospace; font-size: .8rem; color: var(--fungus); background: rgba(0,0,0,.4); padding: .5rem .6rem; border-radius: 4px; word-break: break-all; }
.freed-root .dim { color: var(--dim); font-size: .78rem; }

/* the network scanner */
.awin-net .awin-body { background: #0a1410; display: flex; flex-direction: column; }
.net-head { flex: none; padding: .5rem .7rem; font-size: .74rem; color: var(--dim); border-bottom: 1px solid rgba(121,247,158,.14); }
.net-scan { color: var(--fungus); animation: netpulse 1.6s ease-in-out infinite; }
@keyframes netpulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .net-scan { animation: none; } }
.net-count { color: var(--lichen); }
.net-table { flex: 1; overflow: auto; font-family: ui-monospace, Menlo, monospace; font-size: .76rem; }
.net-row { display: grid; grid-template-columns: 2fr 1.2fr 1fr .8fr .8fr; gap: .5rem; padding: .34rem .7rem; border-bottom: 1px solid rgba(121,247,158,.06); align-items: center; }
.net-row.net-hd { color: var(--dim); text-transform: uppercase; font-size: .64rem; letter-spacing: .08em; position: sticky; top: 0; background: #0a1410; }
.net-row.click { cursor: pointer; }
.net-row.click:not(.lab):hover { background: rgba(121,247,158,.08); }
.net-row.lab { cursor: pointer; background: rgba(243,197,119,.06); }
.net-row.lab:hover { background: rgba(243,197,119,.14); }
.net-row.you { color: var(--fungus); }
.nd-name { color: var(--lichen); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nd-warn { color: var(--lantern); font-size: .66rem; }
.nd-you { color: var(--fungus); font-size: .66rem; }
.nd-ip, .nd-vendor, .nd-kbps { color: var(--dim); }
.nd-status.s-online { color: var(--fungus); }
.nd-status.s-idle { color: var(--lantern); }
.nd-status.s-away { color: var(--dim); }
.net-log { flex: none; max-height: 5.5rem; overflow: auto; padding: .4rem .7rem; border-top: 1px solid rgba(121,247,158,.12); font-family: ui-monospace, Menlo, monospace; font-size: .72rem; color: var(--dim); background: #081210; }

/* the packet capture (wireshark-ish) */
.awin-sniff .awin-body { background: #081210; display: flex; flex-direction: column; }
.sniff-bar { flex: none; display: flex; align-items: center; gap: .5rem; padding: .4rem .6rem; border-bottom: 1px solid rgba(121,247,158,.18); background: #0a1410; }
.sniff-lbl { font-size: .68rem; color: var(--dim); text-transform: uppercase; letter-spacing: .1em; }
#sniff-filter { flex: 1; font: inherit; font-family: ui-monospace, Menlo, monospace; font-size: .8rem; padding: .35rem .5rem; background: rgba(0,0,0,.4); color: var(--paper); border: 1px solid rgba(121,247,158,.25); border-radius: 4px; }
.sniff-stat { font-size: .7rem; color: var(--dim); white-space: nowrap; }
.sniff-live { font-size: .72rem; color: var(--fungus); cursor: pointer; white-space: nowrap; user-select: none; animation: netpulse 1.6s ease-in-out infinite; }
.sniff-live.paused { color: var(--lantern); animation: none; }
.sniff-protos { flex: none; display: flex; gap: .3rem; padding: .35rem .6rem; border-bottom: 1px solid rgba(121,247,158,.12); background: #0a1410; overflow-x: auto; }
.sproto { flex: none; font: inherit; font-family: ui-monospace, Menlo, monospace; font-size: .7rem; color: var(--dim); background: rgba(121,247,158,.05); border: 1px solid rgba(121,247,158,.14); border-radius: 4px; padding: .2rem .5rem; cursor: pointer; }
.sproto:hover { background: rgba(121,247,158,.12); }
.sproto.on { color: var(--night); background: var(--fungus); border-color: var(--fungus); font-weight: 600; }
.sniff-list { flex: 1.3; overflow: auto; font-family: ui-monospace, Menlo, monospace; font-size: .72rem; min-height: 6rem; }
.sniff-row { display: grid; grid-template-columns: 3rem 4rem 6.6rem 6.6rem 3.6rem 2.6rem 1fr; gap: .4rem; padding: .16rem .6rem; border-bottom: 1px solid rgba(255,255,255,.02); white-space: nowrap; cursor: default; }
.sniff-row.sniff-hd { color: var(--dim); text-transform: uppercase; font-size: .6rem; letter-spacing: .06em; position: sticky; top: 0; background: #0a1410; cursor: default; }
.sniff-row:not(.sniff-hd):hover { background: rgba(121,247,158,.06); }
.sniff-row.sel { background: rgba(121,247,158,.16) !important; }
.sniff-row.marked { background: rgba(243,197,119,.09); }
.sp-info { overflow: hidden; text-overflow: ellipsis; color: var(--lichen); }
.sniff-row .sp-proto { font-weight: 600; }
.s-dns .sp-proto { color: #7fd0ff; } .s-tcp .sp-proto { color: var(--dim); } .s-tlsv13 .sp-proto, .s-tls .sp-proto { color: #b6f0c8; }
.s-http .sp-proto { color: var(--lantern); } .s-arp .sp-proto { color: #d8b0ff; } .s-mdns .sp-proto { color: #7fd0ff; }
.s-mqtt .sp-proto { color: #ffb0c2; } .s-ntp .sp-proto, .s-quic .sp-proto { color: var(--dim); }
.sniff-detail { flex: 1; overflow: auto; border-top: 1px solid rgba(121,247,158,.18); padding: .5rem .7rem; background: #060d0a; }
.sniff-hint { color: var(--dim); font-family: Archivo, sans-serif; font-size: .82rem; margin: .3rem 0; }
.sniff-hint b { color: var(--fungus); }
.det-tree { font-family: ui-monospace, Menlo, monospace; font-size: .74rem; }
.det-layer { margin: 0 0 .1rem; }
.det-sum { color: var(--lichen); padding: .16rem 0; cursor: pointer; user-select: none; }
.det-sum:hover { color: var(--paper); }
.det-layer.open > .det-sum { color: var(--fungus); }
.det-fields { padding: .05rem 0 .3rem 1.3rem; border-left: 1px solid rgba(121,247,158,.15); margin-left: .35rem; }
.det-f { color: var(--dim); padding: .06rem 0; word-break: break-all; }
.det-layer.open > .det-fields .det-f { color: var(--lichen); }
.det-hex { margin: .4rem 0 0; padding: .5rem .6rem; background: #04100c; border-radius: 4px; color: var(--dim); white-space: pre; overflow-x: auto; font-size: .7rem; line-height: 1.5; }

/* the task manager */
.awin-task .awin-body { background: #0a1410; display: flex; flex-direction: column; }
.tm-tabs { flex: none; display: flex; gap: 0; border-bottom: 1px solid rgba(121,247,158,.18); background: #0c1813; }
.tm-tab { font: inherit; font-family: ui-monospace, Menlo, monospace; font-size: .78rem; color: var(--dim); background: none; border: 0; border-bottom: 2px solid transparent; padding: .5rem .9rem; cursor: pointer; }
.tm-tab:hover { color: var(--lichen); }
.tm-tab.on { color: var(--fungus); border-bottom-color: var(--fungus); }
.tm-body { flex: 1; overflow: auto; }
.tm-sum { display: flex; gap: 1.2rem; padding: .5rem .8rem; font-family: ui-monospace, Menlo, monospace; font-size: .74rem; color: var(--dim); border-bottom: 1px solid rgba(121,247,158,.1); }
.tm-sum b { color: var(--fungus); }
.tm-tip { margin-left: auto; color: var(--dim); font-size: .64rem; }
.tm-proc { font-family: ui-monospace, Menlo, monospace; font-size: .76rem; }
.tm-prow { display: grid; grid-template-columns: 1fr 3.5rem 3.5rem 5rem 4.5rem; gap: .5rem; align-items: center; padding: .32rem .8rem; border-bottom: 1px solid rgba(121,247,158,.05); }
.tm-prow:not(.tm-phd) { cursor: pointer; }
.tm-prow:not(.tm-phd):hover { background: rgba(121,247,158,.05); }
.tm-prow.open { background: rgba(121,247,158,.09); }
.tm-prow.sus { background: rgba(214,79,67,.10); }
.tm-prow.sus .tm-name { color: #ff9b8a; font-weight: 600; }
.tm-cmd { padding: .35rem .9rem .55rem; font-family: ui-monospace, Menlo, monospace; font-size: .7rem; background: rgba(0,0,0,.35); border-bottom: 1px solid rgba(121,247,158,.06); }
.tm-cmd code { color: var(--fungus); word-break: break-all; }
.tm-cmdk { color: var(--dim); text-transform: uppercase; font-size: .58rem; letter-spacing: .08em; margin-right: .4rem; }
.tm-prow.tm-phd { color: var(--dim); text-transform: uppercase; font-size: .62rem; letter-spacing: .08em; position: sticky; top: 0; background: #0a1410; }
.tm-name { color: var(--lichen); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-prow .hot { color: var(--lantern); font-weight: 600; }
.tm-end { font: inherit; font-size: .66rem; color: var(--dim); background: rgba(255,255,255,.04); border: 1px solid rgba(121,247,158,.14); border-radius: 4px; padding: .18rem .35rem; cursor: pointer; }
.tm-end:hover { color: #fff; background: #d64f43; border-color: #d64f43; }
.tm-perf { padding: .8rem; display: flex; flex-direction: column; gap: 1rem; }
.tm-graf { }
.tm-glabel { display: flex; justify-content: space-between; align-items: baseline; font-family: ui-monospace, Menlo, monospace; font-size: .72rem; color: var(--dim); margin-bottom: .3rem; }
.tm-glabel b { color: var(--fungus); font-size: .84rem; }
.tm-canvas { width: 100%; height: 80px; display: block; background: #060f0c; border: 1px solid rgba(121,247,158,.14); border-radius: 4px; }
.tm-bars { display: flex; flex-direction: column; gap: .55rem; margin-top: .2rem; }
.tm-bar { display: grid; grid-template-columns: 6.5rem 1fr auto; gap: .6rem; align-items: center; font-family: ui-monospace, Menlo, monospace; font-size: .72rem; color: var(--dim); }
.tm-track { height: .55rem; background: rgba(121,247,158,.12); border-radius: 3px; overflow: hidden; }
.tm-track i { display: block; height: 100%; width: 0; background: var(--fungus); transition: width .5s ease; }
.tm-bar b { color: var(--lichen); }

/* Files (the GUI file browser) */
.awin-files .awin-body { background: #0a1410; display: flex; flex-direction: column; }
.files-bar { flex: none; display: flex; align-items: center; gap: .5rem; padding: .4rem .6rem; border-bottom: 1px solid rgba(121,247,158,.14); background: #0c1813; }
.files-up, .files-home { font: inherit; font-size: .85rem; color: var(--lichen); background: rgba(121,247,158,.08); border: 1px solid rgba(121,247,158,.18); border-radius: 4px; width: 1.7rem; height: 1.7rem; cursor: pointer; }
.files-up:hover, .files-home:hover { background: rgba(121,247,158,.16); }
.files-crumb { font-family: ui-monospace, Menlo, monospace; font-size: .78rem; color: var(--dim); }
.files-grid { flex: 1; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr)); gap: .5rem; align-content: start; padding: .8rem; }
.fi { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .6rem .3rem; background: none; border: 1px solid transparent; border-radius: 6px; cursor: pointer; color: var(--lichen); font: inherit; font-size: .72rem; text-align: center; }
.fi:hover { background: rgba(121,247,158,.08); border-color: rgba(121,247,158,.2); }
.fi-ico { font-size: 2rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.fi-nm { word-break: break-word; line-height: 1.2; max-height: 2.4em; overflow: hidden; }
.files-view { flex: 1; overflow: auto; }
.fv-text { margin: 0; padding: 1rem; font-family: ui-monospace, Menlo, monospace; font-size: .8rem; line-height: 1.6; color: var(--lichen); white-space: pre-wrap; word-break: break-word; }
.fv-note { color: var(--dim); font-family: Archivo, sans-serif; font-size: .84rem; padding: 1.2rem; line-height: 1.6; }
.fv-note code { color: var(--fungus); }

/* Mail */
.awin-mail .awin-body { background: #0a1410; display: grid; grid-template-columns: 8.5rem 17.5rem 1fr; }
.mail-side { border-right: 1px solid rgba(121,247,158,.14); padding: .5rem .35rem; display: flex; flex-direction: column; gap: .2rem; }
.mail-f { display: flex; align-items: center; gap: .35rem; font: inherit; font-size: .78rem; color: var(--lichen); background: none; border: 0; border-radius: 5px; padding: .4rem .5rem; cursor: pointer; text-align: left; }
.mail-f:hover { background: rgba(121,247,158,.08); }
.mail-f.on { background: rgba(121,247,158,.14); color: var(--fungus); }
.mail-n { margin-left: auto; font-size: .64rem; color: var(--dim); }
.mail-mid { display: flex; flex-direction: column; overflow: hidden; border-right: 1px solid rgba(121,247,158,.14); }
.mail-search { flex: none; display: flex; gap: .4rem; padding: .45rem .5rem; border-bottom: 1px solid rgba(121,247,158,.1); }
#mail-q { flex: 1; font: inherit; font-size: .76rem; padding: .35rem .5rem; background: rgba(0,0,0,.35); color: var(--paper); border: 1px solid rgba(121,247,158,.2); border-radius: 5px; }
#mail-new { font: inherit; font-size: .9rem; width: 2rem; color: var(--night); background: var(--fungus); border: 0; border-radius: 5px; cursor: pointer; }
.mail-list { flex: 1; overflow: auto; }
.mail-item { display: grid; grid-template-columns: 2rem 1fr; gap: .5rem; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid rgba(121,247,158,.06); padding: .5rem .55rem; cursor: pointer; font: inherit; }
.mail-item:hover { background: rgba(121,247,158,.05); }
.mail-item.sel { background: rgba(121,247,158,.12); }
.mail-item.fresh { animation: mailfresh 2.5s ease; }
@keyframes mailfresh { 0% { background: rgba(121,247,158,.28); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .mail-item.fresh { animation: none; } }
.mi-av { width: 2rem; height: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .64rem; font-weight: 700; color: #fff; flex: none; }
.mi-main { min-width: 0; display: flex; flex-direction: column; gap: .05rem; }
.mi-top { display: flex; justify-content: space-between; gap: .5rem; }
.mi-from { font-size: .77rem; color: var(--lichen); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-item.unread .mi-from { color: var(--paper); font-weight: 700; }
.mail-item.unread .mi-from::before { content: '● '; color: var(--fungus); font-size: .7em; vertical-align: 1px; }
.mi-date { font-size: .64rem; color: var(--dim); white-space: nowrap; flex: none; }
.mi-sub { font-size: .73rem; color: var(--lichen); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mi-snip { font-size: .68rem; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-read { overflow: auto; padding: .8rem 1rem; }
.mr-head { border-bottom: 1px solid rgba(121,247,158,.14); padding-bottom: .6rem; margin-bottom: .6rem; }
.mr-subj { font-size: 1.05rem; color: var(--paper); margin-bottom: .3rem; }
.mr-meta { font-size: .74rem; color: var(--dim); display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin-top: .15rem; }
.mr-meta b { color: var(--lichen); }
.mr-meta .mi-av { width: 1.5rem; height: 1.5rem; font-size: .55rem; }
.mr-attach { margin: .5rem 0; font-size: .78rem; color: var(--lantern); }
.mr-attach .dim { color: var(--dim); }
.mr-raw { font: inherit; font-size: .68rem; color: var(--lantern); background: none; border: 1px solid rgba(243,197,119,.4); border-radius: 4px; padding: .1rem .4rem; cursor: pointer; }
.mr-body { font-family: Archivo, sans-serif; font-size: .84rem; color: var(--lichen); line-height: 1.6; white-space: pre-wrap; }
.mr-raw-box { font-family: ui-monospace, Menlo, monospace; font-size: .72rem; color: var(--lichen); background: #060f0c; border: 1px solid rgba(121,247,158,.14); border-radius: 4px; padding: .6rem; white-space: pre-wrap; word-break: break-all; }
.compose { display: flex; flex-direction: column; gap: .5rem; padding-top: .3rem; }
.compose input, .compose textarea { font: inherit; font-size: .82rem; padding: .45rem .6rem; background: rgba(0,0,0,.3); color: var(--paper); border: 1px solid rgba(121,247,158,.2); border-radius: 5px; }
.compose textarea { min-height: 8rem; resize: vertical; font-family: inherit; }
.cp-row { display: flex; align-items: center; gap: .6rem; }
.cp-send { font: inherit; font-size: .82rem; color: var(--night); background: var(--fungus); border: 0; border-radius: 5px; padding: .45rem 1rem; cursor: pointer; }

@media (max-width: 640px) {
  .desk-icons { display: none; }
  .awin { left: 2vw !important; right: 2vw; width: 96vw !important; max-width: 96vw; }
  .awin.maxed { left: 0 !important; right: 0; width: 100% !important; }
  .mgrid { grid-template-columns: 1fr; }
  .taskbar { overflow-x: auto; }
  .tb-tasks { display: none; }
  .startmenu { width: 84vw; }
  .desk-watermark b { font-size: 2rem; }
  .net-row { grid-template-columns: 1.6fr 1fr .7fr; }
  .net-row span:nth-child(3), .net-row span:nth-child(4) { display: none; }
  .awin-mail .awin-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr) 1fr; }
  .mail-side { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid rgba(121,247,158,.14); }
  .mail-mid { border-right: 0; border-bottom: 1px solid rgba(121,247,158,.14); }
  .wall-grid { grid-template-columns: 1fr 1fr; }
  .sniff-row { grid-template-columns: 2rem 4.6rem 4.6rem 3rem 1fr; font-size: .68rem; }
  .sniff-row span:nth-child(2), .sniff-row span:nth-child(6) { display: none; }
}