/* ============================================================
   mligotti.com — a creative-tool shell around a 3D viewport.
   Full-viewport app. No page scroll. Panels scroll internally.
   ============================================================ */

:root{
  color-scheme: dark;
  --ink:    #050607;
  --panel:  #0A0B0C;
  --panel-2:#101213;
  --line:   rgba(214,222,218,.13);
  --line-2: rgba(214,222,218,.06);
  --bone:   #DCE3DF;
  --bone-2: rgba(220,227,223,.58);
  --bone-3: rgba(220,227,223,.40);
  --shadow: 0 14px 34px rgba(0,0,0,.55);

  /* three greens — the scene shift stays legible without leaving the palette */
  --g1:     #4AFF8F;
  --g2:     #00E7B0;
  --g3:     #DFFF6B;
  --g4:     #00A85C;
  --g5:     #B4FF39;
  --sig:      var(--g1);
  --sig-soft: rgba(74,255,143,.16);

  --display:"Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:   "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --bar: 42px;
  --side-l: 232px;
  --side-r: 232px;
  --con: 208px;
  --ease: cubic-bezier(.22,1,.36,1);

  --grid-a: .09;   /* viewport floor alpha — dimmed after dark */
  --bone-rgb: 220,227,223;   /* canvas reads this for grid, vertices, trace */
}

/* ---------- light ---------- */
html[data-theme="light"]{
  color-scheme: light;
  --ink:    #F4F3EF;
  --panel:  #EDECE6;
  --panel-2:#E4E3DC;
  --line:   rgba(24,28,26,.16);
  --line-2: rgba(24,28,26,.08);
  --bone:   #191D1B;
  --bone-2: rgba(25,29,27,.66);
  --bone-3: rgba(25,29,27,.54);
  --bone-rgb: 25,29,27;
  --grid-a: .16;
  --shadow: 0 14px 30px rgba(24,28,26,.14);
  --sig-soft: rgba(12,138,70,.16);

  /* greens darkened so they hold contrast on paper */
  --g1: #0C8A46;
  --g2: #00705C;
  --g3: #5D7800;
  --g4: #095F33;
  --g5: #446900;
}
html[data-theme="light"][data-channel="n2"]{ --sig:var(--g2); --sig-soft:rgba(0,112,92,.16) }
html[data-theme="light"][data-channel="n3"]{ --sig:var(--g3); --sig-soft:rgba(93,120,0,.16) }
html[data-theme="light"][data-channel="n4"]{ --sig:var(--g4); --sig-soft:rgba(9,95,51,.18) }
html[data-theme="light"][data-channel="n5"]{ --sig:var(--g5); --sig-soft:rgba(68,105,0,.16) }
html[data-theme="light"][data-phase="night"]{ --grid-a:.13 }
html[data-theme="light"][data-phase="dusk"] { --grid-a:.14 }

/* the CRT treatment only makes sense on a dark screen */
html[data-theme="light"] .scanlines{ display:none; }
html[data-theme="light"] .grain{ opacity:.03; }
html[data-theme="light"] .cursor{ mix-blend-mode:normal; }
html[data-theme="light"] .cursor__ring{ border-color:var(--bone); }
html[data-theme="light"] .cursor__dot{ background:var(--bone); }
html[data-theme="light"] .cursor__label{ color:var(--bone); }
html[data-channel="n2"]{ --sig:var(--g2); --sig-soft:rgba(0,231,176,.15); }
html[data-channel="n3"]{ --sig:var(--g3); --sig-soft:rgba(223,255,107,.15); }
html[data-channel="n4"]{ --sig:var(--g4); --sig-soft:rgba(0,168,92,.18); }
html[data-channel="n5"]{ --sig:var(--g5); --sig-soft:rgba(180,255,57,.15); }

/* the floor reads dimmer at night — the only thing time of day touches */
html[data-phase="night"]{ --grid-a: .05; }
html[data-phase="dusk"] { --grid-a: .07; }

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }
body{
  margin:0; background:var(--ink); color:var(--bone);
  font-family:var(--mono); font-size:12px; line-height:1.6;
  overflow:hidden; -webkit-font-smoothing:antialiased;
}
canvas{ display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
dl,dd{ margin:0; }
ul{ list-style:none; margin:0; padding:0; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
::selection{ background:var(--sig); color:var(--ink); }
:focus-visible{ outline:1px solid var(--sig); outline-offset:2px; }

/* ============================================================
   BOOT
   ============================================================ */
.boot{
  position:fixed; inset:0; z-index:200; background:var(--ink);
  display:grid; place-items:center;
  transition:opacity .6s var(--ease), visibility .6s;
}
.boot.is-done{ opacity:0; visibility:hidden; pointer-events:none; }
.boot__inner{ width:min(460px,80vw); }
.boot__bars{ display:flex; gap:5px; justify-content:center; align-items:flex-end; height:40px; margin-bottom:30px; }
.boot__bars i{ width:5px; background:var(--g1); transform-origin:bottom; animation:eq 1s cubic-bezier(.65,.05,.36,1) infinite alternate; }
.boot__bars i:nth-child(1){ height:12px; animation-delay:0s }
.boot__bars i:nth-child(2){ height:26px; animation-delay:.08s }
.boot__bars i:nth-child(3){ height:40px; animation-delay:.16s }
.boot__bars i:nth-child(4){ height:20px; animation-delay:.24s }
.boot__bars i:nth-child(5){ height:34px; animation-delay:.32s }
.boot__bars i:nth-child(6){ height:16px; animation-delay:.40s }
.boot__bars i:nth-child(7){ height:28px; animation-delay:.48s }
@keyframes eq{ from{ transform:scaleY(.25); opacity:.45 } to{ transform:scaleY(1); opacity:1 } }

.boot__read{ display:flex; justify-content:space-between; font-size:10px; letter-spacing:.22em; color:var(--bone-2); margin-bottom:10px; }
.boot__pct{ color:var(--bone); font-variant-numeric:tabular-nums; }
.boot__pct em{ font-style:normal; color:var(--bone-3); }
.boot__track{ height:2px; background:var(--line); overflow:hidden; }
.boot__fill{ height:100%; width:0; background:var(--g1); transition:width .2s linear; }
.boot__meta{ display:flex; justify-content:space-between; margin-top:12px; font-size:9px; letter-spacing:.2em; color:var(--bone-3); }

/* ============================================================
   ATMOSPHERE
   ============================================================ */
.grain{
  position:fixed; inset:-150%; z-index:150; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%,100%{ transform:translate(0,0) } 20%{ transform:translate(-4%,3%) }
  40%{ transform:translate(3%,-4%) }  60%{ transform:translate(-3%,-3%) }
  80%{ transform:translate(4%,4%) }
}
body.no-grain .grain{ display:none; }

.scanlines{
  position:fixed; inset:0; z-index:149; pointer-events:none; opacity:.3;
  background:repeating-linear-gradient(180deg, transparent 0 2px, rgba(0,0,0,.2) 2px 4px);
  mix-blend-mode:multiply;
}

.cursor{ position:fixed; top:0; left:0; z-index:190; pointer-events:none; mix-blend-mode:difference; }
.cursor__ring{
  position:absolute; width:26px; height:26px; margin:-13px 0 0 -13px;
  border:1px solid var(--bone); border-radius:50%;
  transition:width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease);
}
.cursor__dot{ position:absolute; width:3px; height:3px; margin:-1.5px 0 0 -1.5px; background:var(--bone); border-radius:50%; }
.cursor__label{
  position:absolute; top:20px; left:0; transform:translateX(-50%);
  font-size:9px; letter-spacing:.2em; color:var(--bone); white-space:nowrap;
  opacity:0; transition:opacity .25s;
}
.cursor.is-hot .cursor__ring{ width:52px; height:52px; margin:-26px 0 0 -26px; }
.cursor.is-hot .cursor__label{ opacity:1; }
@media (hover:none),(pointer:coarse){ .cursor{ display:none } }

/* ============================================================
   APP GRID
   ============================================================ */
.app{
  height:100svh; display:grid;
  grid-template-columns:var(--side-l) 0 minmax(0,1fr) 0 var(--side-r);
  grid-template-rows:var(--bar) minmax(0,1fr) 0 var(--con);
  grid-template-areas:
    "bar  bar  bar   bar  bar"
    "out  sl   view  sr   insp"
    "conh conh conh  conh conh"
    "con  con  con   con  con";
}

/* ---------- resize handles ---------- */
.split{
  position:relative; z-index:60; background:none; border:0; padding:0;
  touch-action:pinch-zoom;
}
.split--v{ grid-area:sl; cursor:col-resize; }
.split--v.split--r{ grid-area:sr; }
.split--h{ grid-area:conh; cursor:row-resize; }

/* the visible line is the panel border; this just widens the grab zone */
.split::before{
  content:""; position:absolute; background:var(--sig);
  opacity:0; transition:opacity .2s var(--ease);
}
.split--v::before{ inset:0 -4px; }
.split--h::before{ inset:-4px 0; }
.split:hover::before,
.split:focus-visible::before,
.split.is-drag::before{ opacity:.55; }
.split:focus-visible{ outline:none; }
body.is-resizing{ cursor:inherit; user-select:none; }
body.is-resizing .split.is-drag{ cursor:inherit; }


/* ---------- interference ---------- */
/* fired when someone swears at the console. the transmission stutters, once. */
@keyframes glitchShake{
  0%,100%{ transform:translate3d(0,0,0) }
  10%{ transform:translate3d(-3px,1px,0) }
  20%{ transform:translate3d(4px,-2px,0) }
  30%{ transform:translate3d(-5px,0,0) }
  40%{ transform:translate3d(3px,2px,0) }
  55%{ transform:translate3d(-2px,-1px,0) }
  70%{ transform:translate3d(2px,1px,0) }
  85%{ transform:translate3d(-1px,0,0) }
}
@keyframes glitchBars{
  0%,100%{ opacity:0; transform:translateY(0) }
  15%{ opacity:.85; transform:translateY(-12%) }
  45%{ opacity:.5;  transform:translateY(22%) }
  75%{ opacity:.7;  transform:translateY(-6%) }
}
body.is-glitch .app{ animation:glitchShake .55s steps(2) 1; }
body.is-glitch .scanlines{ opacity:.75; }

.tear{
  position:fixed; inset:0; z-index:151; pointer-events:none; opacity:0;
  background:repeating-linear-gradient(
    180deg, transparent 0 6px, var(--sig) 6px 7px, transparent 7px 22px);
  mix-blend-mode:screen;
}
body.is-glitch .tear{ animation:glitchBars .55s steps(3) 1; }

@media (prefers-reduced-motion:reduce){
  body.is-glitch .app{ animation:none; }
  body.is-glitch .tear{ animation:none; opacity:0; }
  body.is-glitch .scanlines{ opacity:.3; }
}

/* ---------- menu bar ---------- */
.bar{
  grid-area:bar; display:flex; align-items:center; gap:22px;
  padding:0 16px; border-bottom:1px solid var(--line); background:var(--panel);
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
}
/* the wordmark stays lowercase — the only thing in the bar that isn't caps */
.bar__mark{
  display:flex; align-items:center; gap:8px; color:var(--bone);
  font-weight:500; text-transform:none; letter-spacing:.06em; font-size:12px;
}
.bar__sig{
  width:6px; height:6px; border-radius:50%; background:var(--sig);
  animation:pulse 2.4s infinite; transition:background .7s var(--ease);
}
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 var(--sig-soft) } 70%{ box-shadow:0 0 0 9px transparent } 100%{ box-shadow:0 0 0 0 transparent } }
.bar__menu{ position:relative; display:flex; gap:18px; color:var(--bone-3); }
.menu{
  font:inherit; letter-spacing:inherit; text-transform:inherit;
  color:var(--bone-3); padding:0; transition:color .25s var(--ease);
}
.menu:hover,.menu:focus-visible,.menu.is-open{ color:var(--bone); }
.menu.is-open{ color:var(--sig); }

.drop{
  position:absolute; top:calc(100% + 9px); left:0; z-index:130; min-width:150px;
  background:var(--panel-2); border:1px solid var(--line); padding:5px;
  display:flex; flex-direction:column;
  box-shadow:var(--shadow);
  animation:dropIn .2s var(--ease);
}
@keyframes dropIn{ from{ opacity:0; transform:translateY(-5px) } }
.drop[hidden]{ display:none; }
.drop__i{
  text-align:left; padding:7px 10px; font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--bone-3); transition:all .2s var(--ease);
}
.drop__i:hover{ color:var(--ink); background:var(--sig); }
.drop__i:focus-visible{ color:var(--ink); background:var(--sig); outline:0; }
.drop__i.is-on{ color:var(--sig); }
.drop__i.is-on::after{ content:" ·"; }
.drop__i.is-on:hover{ color:var(--ink); }
.bar__spacer{ flex:1; }
.bar__stat{ display:flex; align-items:center; gap:7px; color:var(--sig); transition:color .7s var(--ease); }
.bar__rec{ width:6px; height:6px; border-radius:50%; background:var(--sig); animation:blink 1.6s steps(2) infinite; }
@keyframes blink{ 0%,50%{ opacity:1 } 51%,100%{ opacity:.25 } }
.bar__theme{
  color:var(--bone-3); padding:4px 8px; border:1px solid var(--line);
  font:inherit; letter-spacing:.16em; transition:all .25s var(--ease);
}
.bar__theme:hover{ color:var(--ink); background:var(--sig); border-color:var(--sig); }
.bar__delta{ color:var(--bone-3); font-variant-numeric:tabular-nums; }
.bar__time{ color:var(--bone-3); font-variant-numeric:tabular-nums; }

/* ---------- shared panel bits ---------- */
.panel__h{
  margin:0 0 12px; font-size:9px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--bone-3); padding-bottom:9px; border-bottom:1px solid var(--line-2);
}
.panel__h--mt{ margin-top:26px; }

/* ---------- outliner ---------- */
.out{
  grid-area:out; padding:14px 14px 18px; background:var(--panel);
  border-right:1px solid var(--line); overflow-y:auto;
}
.out__list li + li{ margin-top:2px; }
.node{
  width:100%; display:flex; align-items:center; gap:9px; padding:9px 10px;
  font-size:11px; letter-spacing:.1em; color:var(--bone-3);
  border:1px solid transparent; transition:all .25s var(--ease); text-align:left;
}
.node__g{
  width:8px; height:8px; border:1px solid currentColor; flex:none;
  transform:rotate(45deg); transition:all .3s var(--ease);
}
.node b{ font-weight:400; color:var(--bone-3); }
.node span{ flex:1; }
.node:hover{ color:var(--bone-2); background:var(--panel-2); }
/* the diamond leans toward square on hover — a preview of selection */
.node:hover .node__g{ transform:rotate(25deg); }
.node.is-on{ color:var(--sig); border-color:var(--line); background:var(--panel-2); }
.node.is-on b{ color:var(--sig); }
.node.is-on .node__g{ background:var(--sig); border-color:var(--sig); transform:rotate(0deg); }

.out__id > div{ display:flex; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px solid var(--line-2); }
.out__id dt{ font-size:10px; letter-spacing:.16em; color:var(--bone-3); text-transform:uppercase; }
.out__id dd{
  font-family:var(--display); font-size:14px; font-weight:500;
  letter-spacing:-.018em; color:var(--bone);
}


/* ---------- viewport ---------- */
.view{ grid-area:view; position:relative; overflow:hidden; background:var(--ink); cursor:grab; touch-action:none; }
.view.is-drag{ cursor:grabbing; }
.view canvas{ position:absolute; inset:0; width:100%; height:100%; }

.view__tl,.view__tr,.view__bl,.view__br{
  position:absolute; z-index:2; display:flex; gap:14px;
  font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-3);
  pointer-events:none;
}
.view__tl{ top:14px; left:16px; flex-direction:column; gap:5px; }
.view__tr{ top:14px; right:16px; flex-direction:column; gap:5px; align-items:flex-end; }
.view__bl{ bottom:14px; left:16px; flex-direction:column; gap:5px; }
/* once the visitor has orbited, the hint has done its job — let it recede */
.view__hint{ transition:opacity .8s var(--ease); }
.view.is-learned .view__hint{ opacity:.4; }
.view__vtx{ color:var(--sig); font-variant-numeric:tabular-nums; min-height:1em; transition:color .7s var(--ease); }
.view__br{ bottom:14px; right:16px; }

.view__name{
  font-family:var(--display); font-size:27px; font-weight:500;
  letter-spacing:-.028em; text-transform:none;
  color:var(--bone); line-height:1;
}
.view__sub{ color:var(--bone-3); }
.view__tr span:first-child{ color:var(--sig); transition:color .7s var(--ease); }

.axis{ display:flex; gap:8px; }
.ax{ font-style:normal; opacity:.5; }
.ax--x{ color:var(--sig); opacity:1; }

.view__reticle{
  position:absolute; top:50%; left:50%; width:24px; height:24px;
  margin:-12px 0 0 -12px; pointer-events:none; opacity:.22;
  background:
    linear-gradient(var(--bone),var(--bone)) center/1px 100% no-repeat,
    linear-gradient(var(--bone),var(--bone)) center/100% 1px no-repeat;
}

/* ---------- inspector ---------- */
.insp{
  grid-area:insp; padding:14px 14px 18px; background:var(--panel);
  border-left:1px solid var(--line); overflow-y:auto;
  display:flex; flex-direction:column;
}
.insp__list > div{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  padding:9px 0; border-bottom:1px solid var(--line-2);
  opacity:0; transform:translateY(8px);
  animation:fadeUp .5s var(--ease) forwards;
}
.insp__list > div:nth-child(2){ animation-delay:.05s }
.insp__list > div:nth-child(3){ animation-delay:.10s }
.insp__list > div:nth-child(4){ animation-delay:.15s }
@keyframes fadeUp{ to{ opacity:1; transform:none } }
.insp dt{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--bone-3); }
.insp dd{ font-size:11px; color:var(--bone); text-align:right; }
.insp dd.hot{ color:var(--sig); }

.insp__out{
  margin-top:auto; display:flex; align-items:center; justify-content:space-between;
  padding:11px 12px; border:1px solid var(--line);
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-3);
  transition:all .3s var(--ease);
}
.insp__out svg{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.6; transition:transform .3s var(--ease); }
.insp__out:hover{ color:var(--ink); background:var(--sig); border-color:var(--sig); }
.insp__out:hover svg{ transform:translate(2px,-2px); }
.insp__out[hidden]{ display:none; }

/* ---------- console ---------- */
.con{
  grid-area:con; background:var(--panel); border-top:1px solid var(--line);
  display:flex; flex-direction:column; min-height:0;
}
.con__body{
  flex:1; min-height:0; overflow-y:auto; padding:14px 16px;
  font-size:12px; line-height:1.85; color:var(--bone-2);
}
.con__body .ln{ white-space:pre-wrap; word-break:break-word; }
.con__body .p{ color:var(--sig); }
.con__body .hd{ color:var(--bone); }
.con__body .dim{ color:var(--bone-3); }
.con__body a{ color:var(--bone); border-bottom:1px solid currentColor; }
.con__body a:hover{ color:var(--sig); }

/* ---------- the prompt ---------- */
.con__form{
  display:flex; align-items:center; gap:9px;
  padding:9px 16px; border-top:1px solid var(--line-2);
  transition:border-color .35s var(--ease);
}
/* the rule above the prompt warms when the prompt is live */
.con__form:focus-within{ border-top-color:var(--sig); }
.con__ps1{ color:var(--sig); transition:color .7s var(--ease); }
.con__input{
  flex:1; min-width:0; appearance:none; background:none; border:0; outline:0;
  font-family:var(--mono); font-size:13px; color:var(--bone);
  caret-color:var(--sig); padding:0;
}
.con__input::placeholder{ color:var(--bone-3); }

.con__cmds{
  display:flex; flex-wrap:wrap; gap:6px; padding:10px 16px;
  border-top:1px solid var(--line-2); transition:opacity .5s var(--ease);
}
/* once you have typed a command, the training wheels fold away */
.con.is-taught .con__cmds{ opacity:.32; }
.con.is-taught .con__cmds:hover,
.con.is-taught .con__cmds:focus-within{ opacity:1; }
.cmd{
  padding:6px 13px; border:1px solid var(--line); font-size:11px; color:var(--bone-3);
  transition:all .25s var(--ease);
}
.cmd::before{ content:"$ "; color:var(--sig); }
.cmd:hover{ color:var(--ink); background:var(--sig); border-color:var(--sig); }
.cmd:hover::before{ color:var(--ink); }
.cmd:active,.bar__theme:active{ transform:translateY(1px); transition-duration:.06s; }

/* scrollbars */
.out,.insp,.con__body{ scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.out::-webkit-scrollbar,.insp::-webkit-scrollbar,.con__body::-webkit-scrollbar{ width:8px; }
.out::-webkit-scrollbar-thumb,.insp::-webkit-scrollbar-thumb,.con__body::-webkit-scrollbar-thumb{ background:var(--line); }
.out::-webkit-scrollbar-track,.insp::-webkit-scrollbar-track,.con__body::-webkit-scrollbar-track{ background:transparent; }

/* ============================================================
   RESPONSIVE — fold the side panels away, keep viewport + console
   ============================================================ */
@media (max-width:1000px){
  :root{ --side-l:190px; --side-r:190px; --con:180px; }
}
@media (max-width:900px){
  /* the bar gets crowded once the menus fold — drop the least-load-bearing bits */
  .bar{ gap:12px; }
  .bar__delta{ display:none; }
}
@media (max-width:820px){
  .app{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:var(--bar) minmax(0,1fr) auto auto;
    grid-template-areas:"bar" "view" "out" "con";
  }
  .split{ display:none;
  }
  .out{ border-right:0; border-top:1px solid var(--line); overflow:visible; }
  /* scrolls sideways so the node count can grow without crushing the labels */
  .out__list{
    display:flex; gap:6px; flex-wrap:nowrap;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; padding-bottom:2px;
  }
  .out__list::-webkit-scrollbar{ display:none; }
  .out__list li{ flex:0 0 auto; }
  .out__list li + li{ margin-top:0; }
  .node{ justify-content:center; padding:10px 14px; white-space:nowrap; }
  .node b{ display:none; }
  .panel__h--mt,.out__id{ display:none; }
  .insp{ display:none; }
  .bar__menu{ display:none; }
  .con{ --con:auto; }
  .con__body{
    /* fixed height, not min/max — so `clear` cannot make the panel jump */
    height:clamp(190px, 32vh, 280px);
    max-height:none; min-height:0; flex:none;
    font-size:13px;
  }
  .view__hint{ display:none; }

  /* chips scroll sideways rather than stacking three rows deep */
  .con__cmds{
    flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; padding:12px 14px;
  }
  .cmd{ padding:10px 16px; font-size:12px; }
  .con__cmds::-webkit-scrollbar{ display:none; }
  .cmd{ flex:0 0 auto; }
  .con__form{ padding:10px 14px; }
  .con__input{ font-size:16px; }   /* 16px stops iOS zooming on focus */

  .view__tr,.view__br{ display:none; }   /* telemetry is desktop garnish */
  .view__name{ font-size:22px; }
}
@media (max-width:520px){
  .bar{ gap:12px; padding:0 12px; }
  .bar__stat{ display:none; }
  .out{ padding:12px 12px 14px; }
  .con__body{ height:clamp(170px, 30vh, 240px); }
  .view__name{ font-size:20px; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .grain,.scanlines,.cursor{ display:none; }
  .insp__list > div{ opacity:1; transform:none; }
}