/* Cteen Control Panel: the yosefbogo.com homepage. Plain CSS, no libraries, no web fonts.
   Built as one phone-sized dashboard: no page scroll, no device frame, no scaled-down desktop layout. */
:root{
  --bg:#0d1114; --panel:#1c2329; --panel-2:#252e35; --edge:#0a0d10; --metal:#8c99a3;
  --text:#e8eef2; --muted:#a9b6c0; --sky:#08B5E9; --peach:#F6A85E; --orange:#C2410C;
  --green:#6CFFA8; --crt:#04150c; --amber:#FFB648; --lcd:#1a1206; --focus:#FFD54A;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --ticker-h:42px;
}
*{box-sizing:border-box}
html{background:var(--bg);height:100%;height:100dvh;overflow:hidden}
body{margin:0;height:100%;height:100dvh;overflow:hidden;font-family:var(--sans);color:var(--text);line-height:1.3;
  background:radial-gradient(1200px 600px at 50% -10%,#24313a 0%,var(--bg) 60%);
  padding:8px 8px calc(var(--ticker-h) + 8px + env(safe-area-inset-bottom, 0px));
  display:flex;flex-direction:column}
a{color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:8px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--focus);color:#111;padding:.6rem 1rem;border-radius:8px;font-weight:700}
.skip:focus{left:8px}

.panel{width:100%;max-width:430px;margin:0 auto;flex:1;min-height:0;display:flex;flex-direction:column;gap:8px}

/* metal plates with screws */
.plate{position:relative;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid #33404a;border-radius:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 -2px 0 rgba(0,0,0,.35),0 8px 20px rgba(0,0,0,.45);padding:10px 12px}
.screw{position:absolute;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#d5dde3,#6b7780 60%,#3a434a);box-shadow:0 1px 1px rgba(0,0,0,.6)}
.screw::after{content:"";position:absolute;left:1px;right:1px;top:4px;height:1px;background:#3a434a;transform:rotate(35deg)}
.tl{top:5px;left:5px}.tr{top:5px;right:5px}.bl{bottom:5px;left:5px}.br{bottom:5px;right:5px}

/* header plate */
.head-plate{flex:none;display:flex;align-items:center;gap:10px;flex-wrap:nowrap;padding:8px 28px 8px 14px}
.logo{width:36px;height:auto;background:#fff;border-radius:8px;padding:3px;box-shadow:0 0 0 2px #3a4650;flex:none}
.title{flex:1 1 auto;min-width:0}
.title h1{margin:0;font:800 1.05rem/1.05 var(--sans);letter-spacing:.06em;text-transform:uppercase}
.title h1 span{color:var(--sky)}
.title p{margin:.15rem 0 0;color:var(--muted);font-size:.68rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.status-leds{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;flex:none;
  font:700 .58rem/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.status-leds li{display:flex;align-items:center;gap:5px}

/* LEDs */
.led{display:inline-block;width:8px;height:8px;border-radius:50%;flex:none;background:#3b2a2a;box-shadow:inset 0 1px 2px rgba(0,0,0,.6)}
.led-green{background:#39e27f;box-shadow:0 0 8px #39e27f,0 0 2px #fff inset}
.led-sky{background:var(--sky);box-shadow:0 0 8px var(--sky)}
.led-amber{background:var(--amber);box-shadow:0 0 8px var(--amber)}
.blink{animation:blink 1.6s steps(1) infinite}
@keyframes blink{50%{opacity:.35}}

/* screens: three on top, two below — little readouts, one line each */
.screens{flex:none;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.screen{position:relative;border-radius:10px;padding:6px 8px 7px;min-height:0;overflow:hidden;
  border:4px solid #0b0f12;box-shadow:0 0 0 1px #3a4650,inset 0 0 16px rgba(0,0,0,.8)}
.clock-screen{grid-column:auto}
.crt{background:radial-gradient(ellipse at center,#08261a 0%,var(--crt) 75%);color:var(--green)}
.lcd{background:linear-gradient(180deg,#221808,var(--lcd));color:var(--amber)}
.glow .crt{text-shadow:0 0 6px rgba(108,255,168,.55)}
.glow .lcd{text-shadow:0 0 6px rgba(255,182,72,.45)}
.glow .crt::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px)}
.screen-label{margin:0 0 .25rem;font:700 .58rem/1.15 var(--mono);letter-spacing:.08em;text-transform:uppercase;opacity:.95}
.lines{list-style:none;margin:0;padding:0;font:600 .72rem/1.25 var(--mono)}
.lines li+li{margin-top:.2rem}
.lines b{font-weight:800}
.ph{opacity:.95;font-weight:500}
.js .rotating .lines{position:relative;height:2.5em}
.js .rotating .lines li{position:absolute;inset:0 0 auto 0;margin:0;opacity:0;transform:translateY(100%);transition:transform .5s ease,opacity .5s ease}
.js .rotating .lines li.on{opacity:1;transform:none}
.js .rotating .lines li.off{opacity:0;transform:translateY(-100%)}
.clock{margin:0;font:800 1.05rem/1.1 var(--mono);letter-spacing:.03em}
.clock-date{margin:.15rem 0 0;font:600 .68rem/1.2 var(--mono)}

/* control deck fills leftover height */
.deck{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto minmax(0,1fr) auto;
  grid-template-areas:"levers levers" "knob knob" "buttons toggles";gap:8px}
.deck:focus{outline:none}
.levers-bank{grid-area:levers}.knob-bank{grid-area:knob}.buttons-bank{grid-area:buttons}.toggles-bank{grid-area:toggles}
.bank{padding:10px 12px 12px;display:flex;flex-direction:column;min-height:0}
.bank-title{margin:0 0 8px;font:800 .68rem/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text)}
.bank-title span{color:var(--muted);font-weight:600;margin-left:.45em;letter-spacing:.06em}
.help{margin:.4rem 0 0;color:var(--muted);font-size:.7rem}
.js .nojs-help{display:none}

/* levers: a short row that fits five versions */
.levers{list-style:none;margin:0;padding:0;display:flex;gap:6px;flex-wrap:nowrap}
.levers li{flex:1 1 0;min-width:0}
.lever{display:grid;justify-items:center;gap:4px;text-decoration:none;color:var(--text);padding:4px 2px 6px;border-radius:10px;background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.06);user-select:none;-webkit-user-select:none;--pull:0}
.lever:hover{background:rgba(255,255,255,.05)}
.lever-slot{position:relative;width:16px;height:52px;--travel:26px;border-radius:9px;background:linear-gradient(90deg,#07090b,#1a2026 50%,#07090b);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.9),0 0 0 2px #3a4650;touch-action:none;cursor:grab}
.lever-slot::before{content:"";position:absolute;left:50%;top:8px;bottom:8px;width:3px;margin-left:-1.5px;background:#000;border-radius:2px}
.lever-handle{position:absolute;left:50%;top:0;width:34px;height:26px;margin-left:-17px;border-radius:50%;
  transform:translateY(calc(var(--pull) * var(--travel)));
  background:radial-gradient(circle at 35% 30%,#ffd1a8,var(--peach) 45%,#a8561b 100%);box-shadow:0 4px 8px rgba(0,0,0,.6),inset 0 -2px 4px rgba(0,0,0,.35)}
.lever-new .lever-handle{background:radial-gradient(circle at 35% 30%,#bff0ff,var(--sky) 45%,#05607d 100%)}
.lever.springing .lever-handle{transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.lever.pulling .lever-handle{transition:transform .28s ease-in}
.lever-tag{font:800 1rem/1 var(--mono);letter-spacing:.04em}
.lever-name{font-size:.62rem;color:var(--muted);text-align:center;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-height:2.4em}
.newest{display:block;margin:.2rem auto 0;width:max-content;font:800 .52rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#062330;background:var(--sky);padding:.2em .35em;border-radius:4px}
.lever .led{width:7px;height:7px}

/* knob */
.knob-bank{min-height:0}
.knob-wrap{display:flex;align-items:center;gap:10px;flex:1;min-height:0}
.dial{position:relative;width:min(148px,42vw,100%);aspect-ratio:1;height:auto;flex:none;max-height:100%}
.stops{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.stops li{position:absolute;left:50%;top:50%;width:0;height:0}
.stops a{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;font:800 .58rem/1 var(--mono);letter-spacing:.04em;color:var(--muted);text-decoration:none;padding:2px 3px;border-radius:4px}
.stops li.sel a{color:#062330;background:var(--amber)}
.knob{position:absolute;left:50%;top:50%;width:46%;height:46%;margin:0;transform:translate(-50%,-50%);border-radius:50%;cursor:grab;touch-action:none;
  background:conic-gradient(from 0deg,#2a3239,#59656e,#2a3239,#59656e,#2a3239,#59656e,#2a3239,#59656e,#2a3239);
  box-shadow:0 6px 14px rgba(0,0,0,.65),0 0 0 4px #11161a,0 0 0 6px #3a4650}
.knob-cap{position:absolute;inset:12%;border-radius:50%;background:radial-gradient(circle at 40% 35%,#6c7882,#2b3339 70%);
  transform:rotate(var(--angle,-135deg));transition:transform .18s ease}
.knob.dragging .knob-cap{transition:none}
.knob-pointer{position:absolute;left:50%;top:5px;width:5px;height:22px;margin-left:-2.5px;border-radius:3px;background:var(--amber);box-shadow:0 0 8px var(--amber)}
.knob:focus-visible{outline-offset:8px;border-radius:50%}
.knob-side{display:grid;gap:8px;flex:1 1 0;min-width:0;align-content:center}
.mini-lcd{margin:0;padding:8px 10px;border-radius:8px;border:3px solid #0b0f12;box-shadow:0 0 0 1px #3a4650;font:800 .78rem/1.25 var(--mono);min-height:2.8em}
.go-btn{display:grid;place-items:center;width:100%;min-height:48px;border-radius:12px;text-decoration:none;
  font:900 1.35rem/1 var(--mono);letter-spacing:.18em;color:#0B2A3C;background:linear-gradient(180deg,#ffc58f,var(--peach));
  box-shadow:0 5px 0 #9c5419,0 8px 16px rgba(0,0,0,.5);transition:transform .08s ease,box-shadow .08s ease}
.go-btn:hover{filter:brightness(1.06)}
.go-btn:active,.go-btn.pressed{transform:translateY(4px);box-shadow:0 1px 0 #9c5419,0 4px 10px rgba(0,0,0,.5)}
.knob-side .help{display:none}

/* push buttons */
.pushes{list-style:none;margin:0;padding:0;display:flex;gap:10px;justify-content:space-around;flex:1;align-items:center}
.push{display:grid;justify-items:center;gap:6px;text-decoration:none;color:var(--text);font:800 .62rem/1.15 var(--mono);letter-spacing:.04em;text-transform:uppercase;text-align:center;padding:2px;border-radius:10px;min-width:0;flex:1}
.push-cap{width:48px;height:48px;border-radius:50%;position:relative;transition:transform .08s ease,box-shadow .08s ease}
.push-cap::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid currentColor;opacity:.8}
.push-orange{color:var(--peach)}
.push-orange .push-cap{background:radial-gradient(circle at 40% 35%,#ff9a62,var(--orange) 60%,#7a2706);box-shadow:0 5px 0 #5c1d04,0 0 12px rgba(246,168,94,.5)}
.push-sky{color:var(--sky)}
.push-sky .push-cap{background:radial-gradient(circle at 40% 35%,#9be6ff,#0a8fc0 60%,#04506b);box-shadow:0 5px 0 #033a4e,0 0 12px rgba(8,181,233,.45)}
.push-label{color:var(--text)}
.push:active .push-cap,.push.pressed .push-cap{transform:translateY(4px);box-shadow:0 1px 0 #000}

/* toggles */
.toggles{list-style:none;margin:0;padding:0;display:flex;gap:6px;justify-content:space-between;flex:1;align-items:stretch}
.toggles[hidden]{display:none}
.toggles li{flex:1 1 0;min-width:0;display:flex}
.toggle{display:grid;justify-items:center;gap:4px;width:100%;min-width:0;padding:6px 4px;border-radius:10px;border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.18);color:var(--text);cursor:pointer;font:700 .58rem/1.15 var(--mono);letter-spacing:.04em;text-transform:uppercase}
.toggle:hover{background:rgba(255,255,255,.05)}
.tog-body{position:relative;width:28px;height:44px;border-radius:8px;background:linear-gradient(180deg,#0b0f12,#232b31);box-shadow:inset 0 2px 5px #000,0 0 0 2px #3a4650}
.tog-bat{position:absolute;left:50%;width:12px;height:18px;margin-left:-6px;border-radius:6px;top:3px;
  background:linear-gradient(90deg,#9aa6ae,#e9eef1 45%,#7d8a93);box-shadow:0 2px 3px rgba(0,0,0,.6);transition:top .15s ease}
.toggle[aria-checked="false"] .tog-bat{top:23px}
.toggle[aria-checked="true"] .led{background:#39e27f;box-shadow:0 0 8px #39e27f}
.toggle::after{content:"Off";font-size:.58rem;color:var(--muted)}
.toggle[aria-checked="true"]::after{content:"On";color:var(--green)}

.foot{display:none}

/* ticker */
.ticker{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:stretch;height:calc(var(--ticker-h) + env(safe-area-inset-bottom, 0px));padding-bottom:env(safe-area-inset-bottom, 0px);background:#05080a;border-top:3px solid #3a4650;box-shadow:0 -6px 20px rgba(0,0,0,.6)}
.ticker-tag{margin:0;flex:none;display:grid;place-items:center;padding:0 10px;background:var(--orange);color:#fff;font:900 .72rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;text-align:center}
.ticker-tag span{display:block;font-size:.52rem;font-weight:700;letter-spacing:.06em;margin-top:2px}
.ticker-window{flex:1;overflow:hidden;position:relative;display:flex;align-items:center}
.ticker-track{list-style:none;margin:0;padding:0 0 0 20px;display:flex;gap:40px;white-space:nowrap;font:700 .85rem/1 var(--mono);color:var(--amber)}
.ticker-track li::before{content:"\25C6";margin-right:12px;color:var(--sky)}
.ticker.running .ticker-track{animation:tick var(--dur,60s) linear infinite;will-change:transform}
.ticker.running:hover .ticker-track,.ticker.running:focus-within .ticker-track{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}
.ticker:not(.running) .ticker-window{overflow-x:auto}

/* a bit more breathing room on taller phones */
@media (min-height:780px){
  .panel{gap:10px}
  .lever-slot{height:64px;--travel:34px}
  .push-cap{width:56px;height:56px}
  .dial{width:min(168px,44vw)}
  .screen{padding:8px 10px}
  .clock{font-size:1.2rem}
}
@media (max-height:620px){
  .screen-label{margin-bottom:.15rem}
  .js .rotating .lines{height:2.2em}
  .lever-slot{height:42px;--travel:20px}
  .lever-handle{width:28px;height:22px;margin-left:-14px}
  .push-cap{width:40px;height:40px}
  .tog-body{height:36px}
  .toggle[aria-checked="false"] .tog-bat{top:16px}
  .go-btn{min-height:40px;font-size:1.15rem}
}

@media (prefers-reduced-motion:reduce){
  .blink{animation:none}
  .js .rotating .lines li{transition:none}
  .lever .lever-handle,.knob-cap,.go-btn,.push-cap,.tog-bat{transition:none!important}
  .ticker.running .ticker-track{animation:none}
}