/* ============================================================
   VEX-OS — the site is an operating system (v6)
   phosphor-tinted black · bone · vex red · JetBrains Mono
   ============================================================ */
:root{
  --bg:#0A0B09;
  --desk:#0C0E0B;
  --panel:#10130F;
  --panel-2:#151812;
  --fg:#E6E4D6;
  --dim:rgba(230,228,214,.55);
  --faint:rgba(230,228,214,.32);
  --line:rgba(230,228,214,.16);
  --line-soft:rgba(230,228,214,.08);
  --red:#FF3B30;
  --red-dim:rgba(255,59,48,.5);
  --green:#57D96A;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--bg);color:var(--fg);
  font:400 13px/1.7 var(--mono);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--red);color:#fff}
b{font-weight:700}
.red{color:var(--red)}
.dim{color:var(--dim)}
button{font-family:var(--mono)}
[hidden]{display:none !important}

/* subtle scanlines */
body::after{
  content:'';position:fixed;inset:0;z-index:900;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px);
  opacity:.5;
}

/* ---- desktop ---- */
.os{
  position:fixed;inset:0;
  background:
    radial-gradient(1200px 700px at 70% 20%,rgba(255,59,48,.05),transparent 60%),
    var(--desk);
  opacity:0;transition:opacity .5s ease;
}
html.booted .os{opacity:1}
#wall{position:absolute;inset:0;width:100%;height:100%;z-index:0}

/* ---- desktop icons ---- */
.icons{
  position:absolute;top:18px;left:14px;z-index:1;
  display:flex;flex-direction:column;gap:6px;
}
.dicon{
  width:92px;padding:10px 6px 8px;
  display:flex;flex-direction:column;align-items:center;gap:7px;
  background:transparent;border:1px solid transparent;color:var(--dim);
  cursor:pointer;
}
.dicon svg{width:30px;height:30px}
.dicon span{font:700 9.5px/1.3 var(--mono);letter-spacing:.14em;text-align:center}
.dicon:hover{color:var(--fg);border-color:var(--line);background:rgba(230,228,214,.04)}
.dicon:active{color:var(--red)}
.dicon.pulse svg{animation:iconpulse 2.2s ease-in-out infinite}
@keyframes iconpulse{50%{color:var(--red)}}

/* ---- windows ---- */
.win{
  position:absolute;left:var(--x);top:var(--y);width:min(var(--w),94vw);
  max-height:calc(100vh - 92px);
  background:var(--panel);
  border:1px solid var(--line);
  box-shadow:0 18px 50px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.6);
  display:none;flex-direction:column;
  z-index:10;
}
.win.open{display:flex}
.win.focused{border-color:rgba(230,228,214,.42)}
.win.min{display:none !important}

.win-chrome{
  display:flex;align-items:center;gap:10px;
  padding:0 0 0 10px;height:34px;
  background:var(--panel-2);
  border-bottom:1px solid var(--line);
  cursor:grab;user-select:none;flex:none;
}
.win-chrome:active{cursor:grabbing}
.win-stripes{
  width:26px;height:12px;flex:none;
  background:repeating-linear-gradient(0deg,var(--red-dim) 0 1px,transparent 1px 3px);
}
.win.focused .win-stripes{background:repeating-linear-gradient(0deg,var(--red) 0 1px,transparent 1px 3px)}
.win-title{font:700 10.5px/1 var(--mono);letter-spacing:.22em;color:var(--dim);flex:1}
.win.focused .win-title{color:var(--fg)}
.win-btn{
  width:34px;height:100%;border:none;border-left:1px solid var(--line);
  background:transparent;color:var(--dim);font:700 12px/1 var(--mono);cursor:pointer;
}
.win-btn:hover{background:var(--red);color:#fff}

.win-body{padding:18px 20px;overflow-y:auto;min-height:0}
.win-body::-webkit-scrollbar{width:8px}
.win-body::-webkit-scrollbar-thumb{background:var(--line)}
.win-status{
  flex:none;border-top:1px solid var(--line);
  padding:6px 12px;font:500 9px/1.4 var(--mono);letter-spacing:.2em;color:var(--faint);
}

/* ---- readme window ---- */
.readme .eyebrow{font:700 10px/1.6 var(--mono);letter-spacing:.22em;color:var(--red);margin-bottom:16px}
.readme h1{font:700 clamp(34px,4.5vw,56px)/1.02 var(--mono);letter-spacing:-.04em;margin-bottom:16px}
.readme .sub{color:var(--dim);max-width:52ch;margin-bottom:20px}
.readme .sub b{color:var(--fg)}
.cta-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.readme .meta{
  display:flex;flex-wrap:wrap;gap:6px 18px;
  border-top:1px solid var(--line-soft);padding-top:12px;
  font:500 10px/1.6 var(--mono);letter-spacing:.1em;color:var(--dim);
}
.readme .meta b{color:var(--fg)}
.readme .meta i{font-style:normal;color:var(--green)}

/* ---- os buttons ---- */
.osbtn{
  font:700 11px/1 var(--mono);letter-spacing:.14em;
  padding:12px 18px;border:1px solid rgba(230,228,214,.4);
  background:transparent;color:var(--fg);cursor:pointer;
}
.osbtn:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.osbtn-red{border-color:var(--red);color:var(--red)}
.osbtn-red:hover{background:var(--red);color:#fff}
.osbtn-block{display:block;width:100%;text-align:center}

/* ---- spec window ---- */
.specs .spec{
  display:grid;grid-template-columns:44px 1fr auto;gap:2px 14px;align-items:baseline;
  padding:10px 4px;border-bottom:1px solid var(--line-soft);
}
.specs .spec:last-child{border-bottom:none}
.spec i{font:700 9.5px/1 var(--mono);color:var(--faint);font-style:normal;letter-spacing:.08em}
.spec b{font:700 12.5px/1.4 var(--mono);letter-spacing:.06em}
.spec em{font:700 15px/1 var(--mono);font-style:normal;color:var(--red);white-space:nowrap}
.spec p{grid-column:2/-1;font-size:11.5px;color:var(--dim);max-width:60ch}

/* ---- bench window ---- */
.bench{display:flex;flex-direction:column;gap:14px}
.b-row{display:grid;grid-template-columns:74px 1fr 64px;gap:12px;align-items:center}
.b-row span{font:700 10px/1.4 var(--mono);letter-spacing:.1em}
.b-bar{height:26px;border:1px solid var(--line);position:relative}
.b-bar i{
  position:absolute;inset:0;width:var(--w);
  background:repeating-linear-gradient(-45deg,rgba(230,228,214,.75) 0 4px,transparent 4px 8px);
  transform-origin:left;transform:scaleX(0);transition:transform .9s cubic-bezier(.22,.9,.26,1);
}
.b-bar i.vex{background:repeating-linear-gradient(-45deg,var(--red) 0 4px,transparent 4px 8px)}
.win.open .b-bar i{transform:scaleX(1)}
.b-row em{font:700 12px/1 var(--mono);font-style:normal;text-align:right}
.b-note{margin-top:4px;font:500 9px/1.8 var(--mono);letter-spacing:.12em;color:var(--faint)}

/* ---- license window ---- */
.lic-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:14px}
.lic{border:1px solid var(--line);padding:16px;display:flex;flex-direction:column;position:relative;background:var(--panel)}
.lic.hot{border-color:var(--red);box-shadow:0 0 24px rgba(255,59,48,.12)}
.stamp{
  position:absolute;top:-9px;right:10px;
  border:2px solid var(--red);color:var(--red);background:var(--panel);
  font:700 8.5px/1 var(--mono);letter-spacing:.2em;padding:4px 7px;
  transform:rotate(4deg);
}
.lid{font:700 9.5px/1 var(--mono);letter-spacing:.16em;color:var(--faint);margin-bottom:10px}
.price{font:700 40px/1 var(--mono);letter-spacing:-.04em;margin-bottom:14px}
.price sup{font-size:.4em;color:var(--dim)}
.lic ul{list-style:none;margin-bottom:16px;display:flex;flex-direction:column;gap:6px}
.lic li{font-size:11px;color:var(--dim);padding-left:14px;position:relative}
.lic li::before{content:'▸';position:absolute;left:0;color:var(--red)}

/* ---- terminal window ---- */
.tty-body{padding:12px 14px;display:flex;flex-direction:column}
.tty-out{
  height:210px;overflow-y:auto;
  font:400 12px/1.8 var(--mono);color:#CFcdc4;
}
.tty-out::-webkit-scrollbar{width:6px}
.tty-out::-webkit-scrollbar-thumb{background:var(--line)}
.t-line{white-space:pre-wrap;word-break:break-word}
.t-red{color:var(--red);font-weight:700}
.t-ok{color:var(--green)}
.t-dim{color:rgba(207,205,196,.45)}
.tty-line{display:flex;padding:6px 0 2px;font:400 12px/1.5 var(--mono)}
.tty-prompt{color:rgba(207,205,196,.45);white-space:pre}
.tty-caret{width:7px;height:14px;background:var(--red);margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ---- download window ---- */
.dl{display:flex;flex-direction:column;gap:14px}
.dl-line{font:700 12px/1.4 var(--mono);letter-spacing:.06em}
.dl-bar{height:22px;border:1px solid var(--line);position:relative;overflow:hidden}
.dl-bar i{
  position:absolute;inset:0;width:0%;
  background:repeating-linear-gradient(90deg,var(--red) 0 8px,rgba(255,59,48,.35) 8px 12px);
  transition:width .1s linear;
}
.dl-status{font:500 9.5px/1.8 var(--mono);letter-spacing:.14em;color:var(--faint)}

/* ---- trash ---- */
.trash-txt{font:700 15px/1.7 var(--mono);text-align:center;padding:18px 0}

/* ---- wire ticker ---- */
.wire{
  position:absolute;left:0;right:0;bottom:40px;z-index:5;
  border-top:1px solid var(--line);
  background:rgba(10,11,9,.85);
  overflow:hidden;pointer-events:none;
}
.wire-track{display:flex;white-space:nowrap;width:max-content;animation:tick 30s linear infinite}
.wire span{font:500 9.5px/2.4 var(--mono);letter-spacing:.18em;color:var(--faint)}
.wire b{color:var(--red);margin:0 4px}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---- taskbar ---- */
.taskbar{
  position:absolute;left:0;right:0;bottom:0;height:40px;z-index:50;
  display:flex;align-items:stretch;gap:0;
  background:var(--panel-2);border-top:1px solid var(--line);
}
.vxbtn{
  padding:0 18px;border:none;border-right:1px solid var(--line);
  background:transparent;color:var(--fg);font:700 11px/1 var(--mono);letter-spacing:.14em;cursor:pointer;
}
.vxbtn:hover,.vxbtn.active{background:var(--red);color:#fff}
.tasks{flex:1;display:flex;align-items:stretch;overflow-x:auto}
.tasks::-webkit-scrollbar{display:none}
.task{
  padding:0 14px;border:none;border-right:1px solid var(--line-soft);
  background:transparent;color:var(--faint);font:500 10px/1 var(--mono);letter-spacing:.1em;cursor:pointer;
  max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.task.active{color:var(--fg);box-shadow:inset 0 -2px 0 var(--red)}
.task:hover{color:var(--fg)}
.tray{display:flex;align-items:stretch}
.tray-item{
  display:flex;align-items:center;padding:0 12px;
  border-left:1px solid var(--line);
  font:500 10px/1 var(--mono);letter-spacing:.1em;color:var(--dim);
  background:transparent;border-top:none;border-right:none;border-bottom:none;
}
#snd{cursor:pointer}
#snd:hover{color:var(--fg)}
#snd.on{color:var(--red)}
.clock{color:var(--fg)}

/* ---- vex menu ---- */
.vxmenu{
  position:absolute;left:10px;bottom:50px;z-index:60;width:230px;
  background:var(--panel);border:1px solid var(--line);
  box-shadow:0 18px 50px rgba(0,0,0,.6);
  padding:6px;display:flex;flex-direction:column;
}
.vxmenu button,.vxmenu a{
  text-align:left;padding:9px 12px;border:none;background:transparent;
  color:var(--dim);font:500 11px/1 var(--mono);letter-spacing:.1em;cursor:pointer;text-decoration:none;
}
.vxmenu button:hover,.vxmenu a:hover{background:var(--red);color:#fff}
.vxmenu hr{border:none;border-top:1px solid var(--line-soft);margin:5px 0}
.vxmenu-foot{padding:9px 12px 6px;font:400 8.5px/1.6 var(--mono);letter-spacing:.1em;color:var(--faint)}

/* ---- shutdown screen ---- */
.shutdown{
  position:fixed;inset:0;z-index:950;background:#000;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
}
.shutdown p{font:400 20px/1.4 var(--mono);color:var(--fg);letter-spacing:.06em}

/* ---- boot ---- */
#boot{
  position:fixed;inset:0;z-index:400;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  transition:opacity .4s ease;cursor:pointer;
}
#boot.done{opacity:0;pointer-events:none}
#bootLog{
  font:500 13px/1.9 var(--mono);color:var(--fg);letter-spacing:.06em;
  min-width:380px;min-height:250px;white-space:pre-wrap;
}
#bootLog .t-red{color:var(--red);font-weight:700}
.boot-skip{font:400 10.5px/1 var(--mono);color:var(--faint);letter-spacing:.3em}

/* ---- responsive: windows become sheets ---- */
@media(max-width:860px){
  .icons{flex-direction:row;flex-wrap:wrap;top:8px;left:8px;right:8px;justify-content:center;gap:2px}
  .dicon{width:78px;padding:8px 4px 6px}
  .win{left:2vw !important;top:52px !important;width:96vw !important;max-height:calc(100vh - 140px)}
  .win-body{max-height:52vh}
  .tray-item{padding:0 8px}
  #traySessions{display:none}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  #boot{display:none}
  .os{opacity:1}
  html,body{overflow:auto}
}