/* ============================================================
   A VIEW FROM NO ONE
   An archival desktop environment.
   The interface is monochrome. HERE is the only colour.
   ============================================================ */

:root{
  /* neutral system palette */
  --bg:        #121315;
  --bg-grid:   #171a1c;
  --chrome:    #1c1f22;
  --chrome-2:  #232629;
  --line:      #303539;
  --line-soft: #26292c;
  --ink:       #b9bec4;
  --ink-dim:   #6f767d;
  --ink-faint: #4a5057;
  --ink-hi:    #e6e9ec;

  /* the only chromatic value in the system */
  --here:      #ffb35c;
  --here-soft: #ffd8a8;

  --mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas,
          "Liberation Mono", monospace;

  --bar: 30px;
  --side: 330px;
}

*{ box-sizing:border-box; }

html,body{
  height:100%; margin:0; padding:0;
  background:#000;
  color:var(--ink);
  font-family:var(--mono);
  font-size:12px;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  cursor:default;
  user-select:none;
}

#root{
  position:fixed; inset:0;
  display:flex; flex-direction:column;
  background:var(--bg);
}

/* faint desktop texture — a plotted grid, not a hacker screen */
#root::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.014) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.014) 1px, transparent 1px);
  background-size:34px 34px;
}

/* ───────────────────────── MENU BAR ───────────────────────── */

#menubar{
  position:relative; z-index:5;
  height:var(--bar); flex:0 0 var(--bar);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 10px 0 12px;
  background:var(--chrome);
  border-bottom:1px solid var(--line);
}
.mb-left, .mb-right{ display:flex; align-items:center; gap:14px; }

.mb-mark{
  width:9px; height:9px; border:1px solid var(--ink-dim);
  border-radius:50%;
  box-shadow:inset 0 0 0 2px var(--chrome);
}
.mb-title{
  color:var(--ink-hi); letter-spacing:.06em; font-size:11px;
}
.mb-menu{
  color:var(--ink-dim); font-size:11px; letter-spacing:.03em;
  padding:2px 3px; border-radius:2px;
}
.mb-menu:hover{ color:var(--ink); background:var(--chrome-2); }

.mb-clock{
  color:var(--ink-faint); font-size:11px; letter-spacing:.08em;
  font-variant-numeric:tabular-nums; min-width:66px; text-align:right;
}

/* segmented viewer-mode control */
.segmented{ display:flex; align-items:center; gap:8px; }
.seg-label{
  color:var(--ink-faint); font-size:9px; letter-spacing:.22em;
}
.segmented .seg{
  font:inherit; font-size:10px; letter-spacing:.16em;
  color:var(--ink-dim);
  background:var(--bg);
  border:1px solid var(--line);
  padding:4px 13px 3px;
  cursor:pointer;
  transition:background .18s, color .18s, box-shadow .18s;
}
.segmented .seg:hover{ color:var(--ink); }
.segmented .seg[aria-pressed="true"]{
  color:#0f1113; background:var(--ink);
  box-shadow:inset 0 0 0 1px var(--ink);
}
.mode-ai .segmented .seg[aria-pressed="true"]{
  background:var(--ink-hi); color:#0f1113;
}

/* DISPLAY uses exactly the same control as VIEWER MODE — two keys
   of the same kind sitting side by side should look the same. */
.segmented.sub{ margin-right:10px; }

/* ───────────────────────── BODY ───────────────────────── */

#body{ position:relative; z-index:2; flex:1 1 auto; display:flex; min-height:0; }

/* ── directory ── */

#sidebar{
  flex:0 0 var(--side); width:var(--side);
  background:var(--chrome);
  border-right:1px solid var(--line);
  display:flex; flex-direction:column; min-height:0;
}
.side-head{
  display:flex; align-items:baseline; justify-content:space-between;
  padding:11px 12px 8px;
}
.side-title{ color:var(--ink-hi); font-size:10px; letter-spacing:.22em; }
.side-count{ color:var(--ink-faint); font-size:10px; }

.side-cols{
  display:flex; justify-content:space-between;
  padding:0 12px 5px;
  color:var(--ink-faint); font-size:9px; letter-spacing:.14em;
  border-bottom:1px solid var(--line);
}

#directory{
  list-style:none; margin:0; padding:4px 0;
  overflow-y:auto; flex:1 1 auto;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
#directory::-webkit-scrollbar{ width:8px; }
#directory::-webkit-scrollbar-thumb{ background:var(--line); }

.dirrow{
  display:flex; align-items:center; gap:8px;
  padding:5px 12px;
  cursor:pointer;
  border-left:2px solid transparent;
}
.dirrow:hover{ background:var(--chrome-2); }
.dirrow .glyph{
  width:9px; height:11px; flex:0 0 9px;
  border:1px solid var(--ink-faint);
  position:relative;
}
.dirrow .glyph::after{
  content:""; position:absolute; left:2px; top:3px;
  width:0; height:0;
  border-left:4px solid var(--ink-faint);
  border-top:2.5px solid transparent;
  border-bottom:2.5px solid transparent;
}
.dirrow .name{
  flex:1 1 auto; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  color:var(--ink-dim); font-size:11px;
}
.dirrow .state{
  flex:0 0 auto; font-size:9px; letter-spacing:.14em; color:var(--ink-faint);
}
.dirrow.on{ border-left-color:var(--here); background:rgba(255,179,92,.045); }
.dirrow.on .name{ color:var(--ink-hi); }
.dirrow.on .state{ color:var(--here); }
.dirrow.on .glyph{ border-color:var(--here); }
.dirrow.on .glyph::after{ border-left-color:var(--here); }

.side-foot{ border-top:1px solid var(--line); padding:14px 12px 15px; }
/* the counter is where the rule is legible — give it weight, but keep
   it a readout, not a headline */
.meter-row{
  display:flex; align-items:baseline; justify-content:space-between;
  font-size:10px; letter-spacing:.18em; color:var(--ink-dim);
  padding:2px 0;
}
.meter-row span:last-child{
  font-size:17px; letter-spacing:.02em; line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.meter-row:first-child span:last-child{ color:var(--here); }
.meter{
  margin-top:10px; height:3px; background:var(--line-soft); overflow:hidden;
}
#meterfill{
  height:100%; width:0%; background:var(--here);
  transition:width .5s cubic-bezier(.2,.7,.2,1);
}

/* ── desktop ── */

#desktop{
  position:relative; flex:1 1 auto; min-width:0;
  display:flex; flex-direction:column;
  padding:16px; gap:12px;
}

#stage{
  flex:1 1 auto; min-height:0;
  display:grid; gap:10px;
  grid-template-columns:repeat(1, 1fr);
  align-content:stretch;
  transition:gap .5s ease;
}

/* ── a window ── */

.win{
  position:relative;
  display:flex; flex-direction:column;
  min-width:0; min-height:0;
  background:#000;
  border:1px solid var(--line);
  box-shadow:0 1px 0 rgba(0,0,0,.6), 0 10px 24px -18px #000;
  animation:winIn .42s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes winIn{
  from{ opacity:0; transform:scale(.965); }
  to  { opacity:1; transform:scale(1); }
}

.win-bar{
  flex:0 0 20px; height:20px;
  display:flex; align-items:center; gap:7px;
  padding:0 8px;
  background:var(--chrome-2);
  border-bottom:1px solid var(--line);
}
.win-dots{ display:flex; gap:4px; flex:0 0 auto; }
.win-dots i{
  width:5px; height:5px; border-radius:50%;
  background:var(--line); display:block;
}
.win-name{
  flex:1 1 auto; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  color:var(--ink-dim); font-size:10px; letter-spacing:.04em;
}
.win-meta{
  flex:0 1 auto; max-width:58%;
  color:var(--ink-faint); font-size:9px; letter-spacing:.1em;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-align:right;
}
.win.tiny .win-meta{ display:none; }
.win.tiny .win-bar{ flex:0 0 17px; height:17px; padding:0 6px; }
.win.tiny .win-dots{ display:none; }

.win-view{ position:relative; flex:1 1 auto; min-height:0; overflow:hidden; background:#050506; }
.win-view video{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.92) contrast(1.02);
}

/* scan-free subtle vignette so video sits inside the OS */
.win-view::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 60px rgba(0,0,0,.45);
}

/* ── the HERE label ── */

.here{
  position:absolute; left:10px; bottom:9px; z-index:3;
  font-size:13px; letter-spacing:.34em; line-height:1;
  padding:4px 8px 3px;
  color:var(--here-soft);
  background:rgba(10,8,6,.34);
  border:1px solid rgba(255,179,92,.34);
  backdrop-filter:blur(2px);
  text-shadow:0 0 8px rgba(255,179,92,.55), 0 0 22px rgba(255,179,92,.22);
  box-shadow:0 0 14px -4px rgba(255,179,92,.5), inset 0 0 12px -6px rgba(255,179,92,.6);
  white-space:pre;
  transition:opacity .3s ease;
}
.win.solo .here{ font-size:19px; letter-spacing:.46em; padding:6px 12px 5px; left:14px; bottom:13px; }
.win.small .here{ font-size:10px; letter-spacing:.24em; padding:3px 6px 2px; left:7px; bottom:7px; }
.win.tiny  .here{ font-size:9px;  letter-spacing:.18em; padding:2px 5px 1px; left:5px; bottom:5px; }

/* instability states, applied per-label by the script */
.here.f-dim   { opacity:.12; }
.here.f-off   { opacity:0; }
.here.f-burn  {
  color:#fff;
  text-shadow:0 0 10px #ffcf9a, 0 0 30px rgba(255,179,92,.85), 0 0 60px rgba(255,179,92,.45);
  border-color:rgba(255,214,168,.85);
  box-shadow:0 0 26px -2px rgba(255,179,92,.8), inset 0 0 18px -6px rgba(255,214,168,.9);
}
.here.f-skew  { transform:skewX(-9deg) translateX(-2px); }
.here.f-slip  { transform:translate(3px,-2px); filter:blur(.6px); }
.here.f-ghost::after{
  content:attr(data-word); position:absolute; left:8px; top:4px;
  color:rgba(120,200,255,.5); mix-blend-mode:screen; transform:translate(-2px,0);
}
.here.f-hide  { visibility:hidden; }

/* after the erasure the labels are gone for good —
   and HERE stops being a colour the system knows */
.erased .here{ opacity:0 !important; transform:none !important; }
.erased .dirrow.on{ border-left-color:transparent; background:transparent; }
.erased .dirrow.on .name{ color:var(--ink-dim); }
.erased .dirrow.on .state{ color:var(--ink-faint); }
.erased .dirrow.on .glyph{ border-color:var(--ink-faint); }
.erased .dirrow.on .glyph::after{ border-left-color:var(--ink-faint); }
.erased .meter-row span{ color:var(--ink-faint) !important; }
.erased #meterfill{ background:var(--line); }
.erased .notice-dot{ background:var(--ink-faint); }

/* ── elsewhere tray ── */

#tray{
  flex:0 0 auto;
  border-top:1px solid var(--line-soft);
  padding-top:10px;
  transition:opacity .6s ease, max-height .6s ease, padding .6s ease;
  max-height:150px; overflow:hidden;
}
#tray.empty{ opacity:0; max-height:0; padding-top:0; pointer-events:none; }

.tray-head{ display:flex; align-items:baseline; gap:10px; margin-bottom:8px; }
.tray-title{ color:var(--ink-dim); font-size:9px; letter-spacing:.28em; }
.tray-count{ color:var(--ink-faint); font-size:9px; }

#traystrip{
  display:flex; align-items:flex-start; gap:8px; overflow-x:auto; padding-bottom:4px;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
#traystrip::-webkit-scrollbar{ height:6px; }
#traystrip::-webkit-scrollbar-thumb{ background:var(--line); }

.thumb{
  position:relative; flex:0 0 128px; width:128px; height:74px;
  border:1px solid var(--line); background:#0a0b0c;
  cursor:pointer; overflow:hidden;
  transition:border-color .2s, filter .3s, transform .2s;
  filter:grayscale(1) brightness(.5);
}
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.thumb:hover{ filter:grayscale(.35) brightness(.85); border-color:var(--ink-faint); }
.thumb .tlabel{
  position:absolute; left:5px; bottom:4px;
  font-size:7.5px; letter-spacing:.2em; color:var(--ink-dim);
  background:rgba(0,0,0,.55); padding:2px 4px 1px;
}
.thumb .tname{
  position:absolute; left:5px; top:4px; right:5px;
  font-size:8px; color:var(--ink-faint);
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.thumb.leaving{ transform:scale(.9); opacity:0; transition:all .35s ease; }

/* ── system notice ── */

.notice{
  position:absolute; right:18px; top:16px; z-index:20;
  width:290px;
  background:var(--chrome);
  border:1px solid var(--line);
  box-shadow:0 18px 40px -22px #000;
  opacity:0; transform:translateY(-6px);
  pointer-events:none;
  transition:opacity .35s ease, transform .35s ease;
}
.notice.show{ opacity:1; transform:translateY(0); }
.notice-bar{
  display:flex; align-items:center; gap:7px;
  padding:5px 9px; border-bottom:1px solid var(--line-soft);
  background:var(--chrome-2);
}
.notice-dot{ width:5px; height:5px; border-radius:50%; background:var(--here); }
.notice-src{ color:var(--ink-faint); font-size:9px; letter-spacing:.18em; }
.notice p{
  margin:0; padding:11px 11px 13px;
  color:var(--ink-hi); font-size:11.5px; line-height:1.55; letter-spacing:.01em;
}

/* ───────────────────────── STATUS BAR ───────────────────────── */

#statusbar{
  position:relative; z-index:5;
  flex:0 0 24px; height:24px;
  display:flex; align-items:center; gap:10px;
  padding:0 12px;
  background:var(--chrome);
  border-top:1px solid var(--line);
  color:var(--ink-faint); font-size:10px; letter-spacing:.09em;
}
.st-sep{ width:1px; height:11px; background:var(--line); }
.st-spacer{ flex:1 1 auto; }
#st-msg{ color:var(--ink-dim); letter-spacing:.03em; }
#st-mode{ color:var(--ink); }

/* ───────────────────────── BOOT ───────────────────────── */

#boot{
  position:absolute; inset:0; z-index:60;
  background:#0b0c0d;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .7s ease;
}
#boot.gone{ opacity:0; pointer-events:none; }

.boot-panel{
  width:min(420px, calc(100vw - 32px));
  background:var(--chrome);
  border:1px solid var(--line);
  box-shadow:0 40px 90px -50px #000;
}
.boot-bar{
  padding:5px 10px; font-size:9px; letter-spacing:.2em; color:var(--ink-faint);
  background:var(--chrome-2); border-bottom:1px solid var(--line);
}
.boot-body{ padding:26px 26px 22px; }
.boot-body h1{
  margin:0 0 6px; font-size:15px; font-weight:400;
  letter-spacing:.3em; color:var(--ink-hi);
}
.boot-sub{ margin:0 0 18px; font-size:10.5px; color:var(--ink-faint); letter-spacing:.06em; }
.boot-log{
  list-style:none; margin:0 0 20px; padding:0;
  height:76px; overflow:hidden;
  font-size:10px; color:var(--ink-faint); line-height:1.6;
}
.boot-log li{ opacity:0; animation:fadeUp .4s ease forwards; }
@keyframes fadeUp{ from{opacity:0; transform:translateY(3px);} to{opacity:1; transform:none;} }

#bootbtn{
  font:inherit; font-size:10px; letter-spacing:.24em;
  color:#0f1113; background:var(--ink);
  border:none; padding:9px 20px; cursor:pointer;
  transition:background .2s;
}
#bootbtn:hover{ background:var(--ink-hi); }
.boot-hint{ margin:12px 0 0; font-size:9.5px; color:var(--ink-faint); letter-spacing:.06em; }

/* ───────────────────────── END CARD ───────────────────────── */

/* Full bleed, nothing framed. The sentence is the only thing on the
   page with any size to it; the title sits quietly under it and the way
   back in waits at the foot. */
#endcard{
  position:absolute; inset:0; z-index:80;
  background:#000;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity 2.4s ease;
}
#endcard.show{ opacity:1; pointer-events:auto; }
.end-inner{
  display:flex; flex-direction:column; align-items:center;
  padding:0 40px;
}
.end-lines p{
  margin:0; text-align:center;
  font-size:clamp(21px, 2.9vw, 44px);
  letter-spacing:.3em; line-height:1.75;
  color:#cfd3d7;
  opacity:0; transition:opacity 1.6s ease;
}
#endcard.l1 .end-1{ opacity:1; }
#endcard.l2 .end-2{ opacity:1; }
.end-title{
  margin:40px 0 0; text-align:center;
  font-size:10px; letter-spacing:.5em; color:#5a6067;
  opacity:0; transition:opacity 1.4s ease;
}
#endcard.l3 .end-title{ opacity:.65; }

/* ───────────────────────── responsive ───────────────────────── */

@media (max-width:900px){
  :root{ --side:0px; }
  #sidebar{ display:none; }
}

/* ============================================================
   ENDING — DISSOLUTION
   ------------------------------------------------------------
   Added for the second ending. Nothing above this line changed.
   HERE grows, comes loose from the perspective it belonged to,
   drifts, and goes out. The system keeps working the whole time.
   ============================================================ */

/* the moment nothing is elsewhere */
.side-note{
  margin:9px 0 0; padding:0;
  font-size:9px; letter-spacing:.18em;
  color:var(--ink-faint);
  opacity:0; transition:opacity 1.1s ease;
}
.side-note.show{ opacity:1; }

.saturated .meter-row{ color:var(--ink); }
.saturated .meter-row:first-child{
  color:var(--here);
  transition:color .8s ease;
}
.saturated .meter-row:first-child span:last-child{
  font-weight:700;
}

/* labels that have come loose live here, above every window */
#floatlayer{
  position:fixed; inset:0; z-index:40; pointer-events:none;
}

/* ── small screens ──────────────────────────────────────────
   Sixteen simultaneous streams in a four-column grid is a
   desktop proposition. Be honest about it at the door. */
/* the panel carries `hidden` in the markup, so a stale or missing
   stylesheet can never leak it onto the desktop layout */
@media (max-width:900px){
  #gate[hidden]{
    display:flex !important;
    position:fixed; inset:0; z-index:120;
    align-items:center; justify-content:center;
    padding:26px;
    background:var(--bg);
  }
  .gate-panel{
    width:100%; max-width:420px;
    background:var(--chrome);
    border:1px solid var(--line);
  }
  .gate-bar{
    padding:6px 11px; font-size:9px; letter-spacing:.2em;
    color:var(--ink-faint);
    background:var(--chrome-2); border-bottom:1px solid var(--line);
  }
  .gate-body{ padding:22px 20px 20px; }
  .gate-body h2{
    margin:0 0 14px; font-size:13px; font-weight:400;
    letter-spacing:.24em; color:var(--ink-hi);
  }
  .gate-body p{
    margin:0 0 16px; font-size:12px; line-height:1.7; color:var(--ink-dim);
  }
  #gatego{
    font:inherit; font-size:10px; letter-spacing:.2em;
    color:var(--ink-dim); background:transparent;
    border:1px solid var(--line); padding:8px 16px; cursor:pointer;
  }
  #gatego:hover{ color:var(--ink); border-color:var(--ink-dim); }
}
#floatlayer .here{
  position:fixed; left:0; top:0; bottom:auto; right:auto;
  will-change:transform, opacity;
}

/* growth and drift are driven inline by the script so that the
   scale can be measured against each window; these are only the
   defaults it starts from */
.dissolving .here{
  transform-origin:left bottom;
}

/* once loose, HERE stops being a label: the field, the rule and the
   drop shadow let go and what is left is the word itself */
.here.loose{
  background:transparent;
  border-color:transparent;
  box-shadow:0 0 0 rgba(0,0,0,0), inset 0 0 0 rgba(0,0,0,0);
  color:var(--here);
}

/* the way back in is the same key as the way in — identical to
   MOUNT ARCHIVE, so the loop closes on the control it opened with */
#remount{
  position:absolute; left:50%; bottom:64px; transform:translateX(-50%);
  font:inherit; font-size:10px; letter-spacing:.24em;
  color:#0f1113; background:var(--ink);
  border:none; padding:9px 20px; cursor:pointer;
  opacity:0; pointer-events:none;
  transition:opacity 1.4s ease, background .2s;
}
#endcard.l3 #remount{ opacity:1; pointer-events:auto; }
#remount:hover{ background:var(--ink-hi); }


/* ── strain: the word under load ─────────────────────────────
   Restrained on purpose. A waver, a slip off the mark, a second
   impression, a moment gone — never a fault. */
.here.s-dim  { opacity:.34; }
.here.s-out  { opacity:0; }
.here.s-ghost{ text-shadow:2px -1px 0 rgba(255,255,255,.22); }