/* lil 0's desktop.
 *
 * WHY THIS AND NOT THE OBVIOUS THING.
 *
 * The first build of this landing page took the brutalist reference and
 * reproduced its skeleton: full bleed centred slabs, stacked one under the
 * next, in order, symmetric. That is not a style, that is somebody else's
 * page with the words swapped. It also flattened the second reference, whose
 * whole character is maximalism, and ignored FOOL, whose character is a live
 * number in an alarm bar plus greentext plus things sitting at angles on top
 * of each other.
 *
 * So this is not a document. It is a DESKTOP, and it has crashed. Windows are
 * scattered, tilted, overlapping and out of order. There is a taskbar with
 * live readouts. Dialogs interrupt you. One window will not stay closed.
 * Nothing is aligned to anything, on purpose, and the only thing that behaves
 * itself is the arithmetic.
 *
 * That fits him better than a document ever did: he is a machine that thinks
 * in windows, and a crashed desktop is what "impulsive" looks like when the
 * thing being impulsive is software.
 *
 * PALETTE DISCIPLINE: black, gray, white, one green. That is the constraint,
 * so the chaos has to come from LAYOUT, MOTION, INVERSION and TYPE MIXING
 * instead of from hue. Four colours used violently beats nine used politely.
 */

:root{
  --bg:#000;
  --green:#00ff41;
  --green-d:#00b52f;
  --green-k:#00591a;
  --green-x:#002b0c;
  --gray:#7a807c;
  --gray-l:#b9c0ba;
  --gray-d:#131613;
  --white:#fff;
  --mono:"Courier New",ui-monospace,Consolas,monospace;
  --serif:"Times New Roman",Times,serif;
  --sans:Impact,"Haettenschweiler","Arial Narrow Bold",sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#000;color:var(--green);overflow-x:hidden}
body{font-family:var(--mono);font-size:14px;line-height:1.45}
a{color:var(--green);text-underline-offset:2px}
a:hover{background:var(--green);color:#000;text-decoration:none}
pre{margin:0;font-family:var(--mono)}

/* the wallpaper: drifting noise, so the black is never dead */
.wall{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(0,255,65,.30) 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 60%, rgba(0,255,65,.22) 50%, transparent 51%),
    radial-gradient(1px 1px at 40% 80%, rgba(0,255,65,.16) 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 15%, rgba(0,255,65,.24) 50%, transparent 51%);
  background-size:220px 220px,340px 340px,180px 180px,420px 420px;
  animation:drift 40s linear infinite;
}
@keyframes drift{to{background-position:220px 220px,-340px 340px,180px -180px,-420px 420px}}
.scan{position:fixed;inset:0;z-index:60;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.17) 0 1px,transparent 1px 3px)}

/* -------------------------------------------------- alarm bars, FOOL's move */
.alarm{
  position:relative;z-index:30;background:var(--green);color:#000;
  font-weight:bold;overflow:hidden;white-space:nowrap;
  border-top:2px solid #000;border-bottom:2px solid #000;
  font-size:13px;letter-spacing:.06em;
}
.alarm span{display:inline-block;padding:4px 0;animation:sl 24s linear infinite}
.alarm.back{background:#000;color:var(--green);border-color:var(--green-k)}
.alarm.back span{animation:sr 31s linear infinite}
@keyframes sl{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes sr{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* ------------------------------------------------------------- the desktop */
.desk{position:relative;z-index:10;padding:14px 12px 120px;min-height:100vh}
/* clear the fixed icon rail, which was sitting on top of the first window */
@media(min-width:1181px){ .desk{padding-left:92px} }

/* windows. absolutely NOT a grid: they are placed, tilted and overlapping. */
.win{
  position:relative;background:#000;border:2px solid var(--green);
  box-shadow:6px 6px 0 rgba(0,255,65,.14), 0 0 26px rgba(0,255,65,.06);
  margin:0 0 22px;
}
.win.tilt1{transform:rotate(-.7deg)}
.win.tilt2{transform:rotate(.9deg)}
.win.tilt3{transform:rotate(-1.4deg)}
.win.tilt4{transform:rotate(1.6deg)}
.win.pushed{margin-left:26px}
.win.pulled{margin-right:34px}
.win.dead{border-color:var(--gray-d);box-shadow:6px 6px 0 rgba(122,128,124,.08)}
.win.dead .bar{background:var(--gray-d);color:var(--gray)}

.bar{
  background:var(--green);color:#000;font-weight:bold;
  display:flex;align-items:center;gap:8px;padding:3px 6px;
  font-size:12px;letter-spacing:.05em;cursor:default;user-select:none;
}
.bar .name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar b{font-family:var(--mono)}
.bar .btn{
  display:inline-block;min-width:17px;text-align:center;border:1px solid #000;
  background:#000;color:var(--green);cursor:pointer;line-height:1.1;padding:0 3px;
}
.bar .btn:hover{background:var(--green);color:#000}
.body{padding:12px 14px}
.body p{margin:0 0 9px}
.body p:last-child{margin-bottom:0}

/* the deliberately wrong one: a serif window in a terminal */
.win.wrong .body{font-family:var(--serif);font-size:16px;color:var(--gray-l)}
.win.wrong .body b{color:var(--green)}

/* greentext, straight off FOOL, and native to what he is made of */
.gt{color:var(--green-d);white-space:pre-wrap}
.gt b{color:var(--green);font-weight:normal}

/* ------------------------------------------------------- the scattered feel */
.spread{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;align-items:start}
.c3{grid-column:span 3}.c4{grid-column:span 4}.c5{grid-column:span 5}
.c6{grid-column:span 6}.c7{grid-column:span 7}.c8{grid-column:span 8}
.c9{grid-column:span 9}.c12{grid-column:span 12}
.down1{margin-top:26px}.down2{margin-top:54px}.up1{margin-top:-18px}
@media(max-width:900px){
  .spread{display:block}
  .c3,.c4,.c5,.c6,.c7,.c8,.c9,.c12{margin-bottom:20px}
  .win{transform:none!important;margin-left:0!important;margin-right:0!important}
  .down1,.down2,.up1{margin-top:0}
}

/* ------------------------------------------------------------- the big number */
.huge{
  font-family:var(--sans);font-size:clamp(56px,13vw,150px);line-height:.84;
  color:var(--white);letter-spacing:-.03em;margin:0;
}
.huge small{
  /* Its own line box. Inheriting the .huge line-height of .84 on a 150px font
     put a 13px label inside a 126px line and the number sat on top of it, so
     the single most important figure on the page was illegible. */
  font-family:var(--mono);font-size:13px;color:var(--green-d);
  display:block;letter-spacing:.24em;line-height:1.5;margin-bottom:2px;
}
/* zero is gray, but READABLE gray. it is the number the whole page is about
   and at --gray on black it disappeared entirely. */
.huge .z{color:#8f978f}
.beat{animation:beat 2.6s ease-in-out infinite}
@keyframes beat{50%{transform:scale(1.035)}}

.rowstat{display:flex;flex-wrap:wrap;gap:0}
.rowstat div{flex:1 1 120px;border:1px solid var(--green-k);padding:7px 9px;min-width:110px}
.rowstat dt{font-size:9px;letter-spacing:.2em;color:var(--green-k);margin:0}
.rowstat dd{margin:2px 0 0;font-size:20px;color:var(--white);font-weight:bold}
.rowstat dd.nil{color:var(--gray)}

/* ------------------------------------------------------------- the live feed */
.feed{height:190px;overflow:hidden;position:relative;font-size:12.5px}
.feed .ln{padding:3px 0;border-bottom:1px dotted var(--green-x);color:var(--gray-l)}
.feed .ln b{color:var(--green)}
.feed .ln.new{animation:pop .45s ease-out}
@keyframes pop{from{background:var(--green);color:#000}}

.tty{font-size:12.5px;color:var(--green-d);height:132px;overflow:hidden}
.tty i{color:var(--gray);font-style:normal}
.cur{display:inline-block;width:8px;background:var(--green);animation:bl .9s steps(1) infinite}
@keyframes bl{50%{opacity:0}}

/* ------------------------------------------------------------------- tables */
table.d{width:100%;border-collapse:collapse;font-size:12.5px}
table.d th{background:#000;color:var(--green-d);text-align:left;padding:3px 7px;
  font-size:10px;letter-spacing:.14em;border-bottom:1px solid var(--green-k)}
table.d td{padding:4px 7px;border-bottom:1px solid var(--gray-d);color:var(--gray-l)}
table.d td.n{color:var(--white);font-weight:bold;text-align:right}
table.d tr:hover td{background:var(--green-x)}
.bar0{display:inline-block;height:8px;background:var(--green);vertical-align:middle}

/* ------------------------------------------------------------------ the pet */
.petbox{display:flex;flex-direction:column;align-items:center;padding:6px 0 10px}
#pet{display:block;cursor:pointer}
.bubble{
  border:1px solid var(--green);background:#000;color:var(--green);
  padding:3px 8px;font-size:11px;margin-bottom:6px;opacity:0;transition:opacity .18s;
  white-space:nowrap;
}
.bubble.on{opacity:1}

/* ------------------------------------------------------------------- chat */
.chat{display:flex;flex-direction:column;height:340px}
.clog{flex:1;overflow-y:auto;padding:10px 12px;font-size:13px}
.clog .m{margin:0 0 10px;white-space:pre-wrap;word-wrap:break-word}
.clog .m.you{color:var(--gray-l)}
.clog .m.him{color:var(--green)}
.clog .who{font-size:9px;letter-spacing:.18em;color:var(--green-k);display:block}
.crow{display:flex;border-top:2px solid var(--green)}
.crow input{flex:1;background:#000;border:0;color:var(--green);font-family:var(--mono);
  font-size:13px;padding:9px;outline:none}
.crow button{background:var(--green);border:0;color:#000;font-family:var(--mono);
  font-weight:bold;padding:0 16px;cursor:pointer}
.crow button:disabled{background:var(--gray-d);color:var(--gray)}

/* -------------------------------------------------------------- desktop icons */
.icons{position:fixed;left:6px;top:74px;z-index:25;width:74px}
.icons a{
  display:block;text-align:center;color:var(--green-d);text-decoration:none;
  font-size:9.5px;letter-spacing:.06em;margin-bottom:14px;line-height:1.15;
}
.icons a .g{
  display:block;width:40px;height:34px;margin:0 auto 3px;border:2px solid var(--green-k);
  background:#000;color:var(--green);font-size:15px;line-height:30px;font-weight:bold;
}
.icons a:hover{background:none;color:var(--green)}
.icons a:hover .g{border-color:var(--green);box-shadow:0 0 12px rgba(0,255,65,.4)}
@media(max-width:1180px){.icons{display:none}}

/* ------------------------------------------------------------------ taskbar */
.task{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:#000;border-top:2px solid var(--green);
  display:flex;align-items:stretch;gap:0;font-size:11px;overflow-x:auto;
}
.task div{padding:5px 10px;border-right:1px solid var(--green-x);white-space:nowrap}
.task dt{display:inline;color:var(--green-d);letter-spacing:.14em;font-size:9px}
.task dd{display:inline;margin:0 0 0 5px;color:var(--white);font-weight:bold}
.task .lamp{color:var(--gray)}
.task .lamp.on{color:var(--green);animation:bl 1.4s steps(1) infinite}
.task .start{background:var(--green);color:#000;font-weight:bold;letter-spacing:.1em}

/* ------------------------------------------------------------------ dialogs */
.dlg{
  position:fixed;z-index:70;background:#000;border:2px solid var(--green);
  box-shadow:5px 5px 0 rgba(0,255,65,.2);max-width:330px;font-size:12.5px;
}
.dlg .bar{background:var(--green);color:#000}
.dlg .body{padding:11px 13px;color:var(--gray-l)}
.dlg button{
  font-family:var(--mono);background:#000;border:1px solid var(--green);
  color:var(--green);padding:3px 14px;cursor:pointer;font-weight:bold;margin-top:8px;
}
.dlg button:hover{background:var(--green);color:#000}

/* the gate. not a lightbox: a permission prompt that got the tone wrong. */
.gate{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.72);
  display:flex;align-items:center;justify-content:center;padding:16px}
.gate.hide{display:none}
.gate .win{max-width:430px;width:100%;transform:rotate(-1.1deg)}

.tiny{font-size:11px;color:var(--gray)}
.dim{color:var(--gray)}
.wht{color:var(--white)}
.grn{color:var(--green)}
.inv{background:var(--green);color:#000;padding:0 4px}
.strike{text-decoration:line-through;color:var(--gray)}
.jitter{animation:jt 7s infinite}
@keyframes jt{0%,96%{transform:none}97%{transform:translate(2px,-1px)}98%{transform:translate(-2px,1px)}}

@media(prefers-reduced-motion:reduce){*{animation:none!important}}