/* Char Dev landing page. Console VFD look, same tokens as app/src/styles.css.
   Type rule: IBM Plex Mono for headings and body; Tiny5 (--px) only for
   highlighted words, program names and app-element names; Doto (--lcd) only
   for readouts and step numbers. Fonts are copied in by site/build.mjs. */

@font-face{font-family:"Tiny5";src:url(fonts/Tiny5-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Doto";src:url(fonts/Doto-900.woff2) format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/IBMPlexMono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/IBMPlexMono-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/IBMPlexMono-600.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --bg:#0F1012;--panel:#17191C;--panel2:#1B1E22;--well:#07090B;
  --line:#2B2F35;--line2:#22262B;
  --text:#C9CED6;--dim:#8A929E;--ink:#E4E8EE;
  --accent:#58C7FF;--accent2:#A6E2FF;--hot:#0B1720;--hotmid:#2F6F91;
  --amber:#FFB547;--ok:#7BE0A4;
  --px:"Tiny5","IBM Plex Mono",ui-monospace,monospace;
  --lcd:"Doto","IBM Plex Mono",ui-monospace,monospace;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--mono);font-size:16px;line-height:1.6}
img{max-width:100%}
a{color:var(--accent)}
a:hover{color:var(--accent2)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--accent2);outline-offset:3px}

.wrap,.wide{margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.wrap{max-width:1200px}
.wide{max-width:1360px}

.px{font-family:var(--px);font-weight:400;letter-spacing:.06em;color:var(--accent)}
.cap{font-family:var(--px);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.lcd{font-family:var(--lcd);font-weight:900;color:var(--accent);background-color:var(--well);background-image:radial-gradient(rgba(88,199,255,.08) 1px,transparent 1.3px);background-size:3px 3px;text-shadow:0 0 8px rgba(88,199,255,.5);border:1px solid var(--line);border-radius:3px;padding:5px 12px;letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ok{font-family:var(--px);font-size:12px;letter-spacing:.14em;color:var(--ok);border:1px solid #24493A;background:#0B1A14;padding:6px 10px;border-radius:3px;white-space:nowrap}

/* header */
.navbar{border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:20px}
.wm{display:inline-flex;align-items:center;font-family:var(--px);font-size:26px;letter-spacing:.06em;line-height:1;text-decoration:none}
.wm-c{background:var(--accent);color:var(--well);padding:4px 5px 2px}
.wm-d{color:var(--accent);padding-left:.35em}
.wm-k{display:inline-block;width:11px;height:22px;background:var(--accent);margin-left:5px;animation:blink 1.1s steps(1) infinite}
.wm.sm{font-size:18px}
@keyframes blink{50%{opacity:0}}
.navlinks{display:flex;gap:28px;align-items:center;flex-wrap:wrap;font-size:14px}
.navlinks .plain{color:var(--dim);text-decoration:none}
.navlinks .plain:hover{color:var(--text)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 22px;font-family:var(--px);font-size:16px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border:1px solid var(--accent);border-radius:3px}
.btn.primary{background:var(--accent);color:var(--well)}
.btn.primary:hover{background:var(--accent2);border-color:var(--accent2);color:var(--well)}
.btn.ghost{background:transparent;color:var(--accent);border-color:var(--hotmid)}
.btn.ghost:hover{background:var(--hot);color:var(--accent2)}
.btn.sm{min-height:38px;padding:0 16px;font-size:14px}
.ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.trust{font-size:13px;color:var(--dim);margin:18px 0 0}

/* type */
.h1{font-family:var(--mono);font-weight:600;font-size:clamp(36px,4.6vw,64px);line-height:1.08;letter-spacing:-.02em;margin:0;color:var(--ink);text-wrap:balance}
.h1 .k{font-family:var(--px);font-weight:400;letter-spacing:.04em;color:var(--well);background:var(--accent);padding:0 .14em;margin:0 .04em}
.h2{font-family:var(--mono);font-weight:600;font-size:clamp(28px,3vw,40px);line-height:1.15;letter-spacing:-.015em;margin:0;color:var(--ink);text-wrap:balance}
.lede{font-size:18px;line-height:1.65;margin:0 0 28px;max-width:30em}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:64px;align-items:end;padding-block:72px 64px}

/* demo */
.demo{padding-bottom:96px}
.console{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);background:var(--panel);border:1px solid var(--line);border-radius:6px;box-shadow:0 30px 80px rgba(0,0,0,.45);overflow:hidden}
.c-view{background:#0A0B0D;background-image:radial-gradient(var(--panel2) 1px,transparent 1.4px);background-size:14px 14px;padding:28px;display:flex;justify-content:center;align-items:center;border-right:1px solid var(--line)}
.cv{display:block;width:100%;max-width:440px;aspect-ratio:4/5;background:var(--well);border:1px solid var(--line)}
.c-side{display:flex;flex-direction:column;min-width:0}
.c-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.c-head .lcd{flex:1 1 auto;min-width:0;font-size:20px}
.c-ctl{flex:1 1 auto;display:flex;flex-direction:column;gap:22px;padding:22px 18px}
.fld,.grp{display:flex;flex-direction:column;gap:8px;min-width:0}
.fld input{font-family:var(--px);font-size:24px;letter-spacing:.2em;color:var(--accent);background:var(--well);border:1px solid var(--hotmid);border-radius:3px;padding:6px 12px;min-height:46px;width:100%}
.segs{display:flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--well)}
.seg{flex:1 1 auto;font-family:var(--mono);font-size:13px;color:var(--dim);background:transparent;border:0;border-right:1px solid var(--line);min-height:42px;padding:0 10px;cursor:pointer}
.seg:last-child{border-right:0}
.seg:hover{color:var(--text)}
.seg[aria-pressed="true"]{background:var(--hot);color:var(--accent);box-shadow:inset 0 0 0 1px var(--hotmid)}
.switch{display:inline-flex;align-items:center;gap:10px;background:transparent;border:0;cursor:pointer;padding:0;min-height:44px;align-self:flex-start;color:var(--text);font:inherit;font-size:14px}
.switch i{position:relative;width:38px;height:20px;background:var(--well);border:1px solid var(--line);border-radius:2px}
.switch i::after{content:"";position:absolute;top:3px;left:3px;width:12px;height:12px;background:#5C646F;transition:left .15s}
.switch[aria-checked="true"] i{border-color:var(--hotmid)}
.switch[aria-checked="true"] i::after{left:21px;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.c-foot{display:flex;align-items:center;gap:12px;padding:12px 18px;border-top:1px solid var(--line);flex-wrap:wrap}
.c-foot .lcd{font-size:18px}
.c-foot .ok{margin-left:auto}
.note{font-size:13px;color:var(--dim);margin:16px 2px 0}

/* program wall */
.count{display:flex;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.count .lcd{font-size:18px}
.count p{margin:0;font-size:13px;color:var(--dim)}
.wall{list-style:none;margin:0;padding:0 0 96px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 14px}
.tile{margin:0;display:flex;flex-direction:column;gap:10px;min-width:0}
.frame{position:relative;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--well)}
.frame img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;transition:transform .5s ease}
.tile:hover .frame img{transform:scale(1.03)}
.typed{position:absolute;left:10px;top:10px;display:flex;align-items:center;gap:8px;background:rgba(7,9,11,.86);border:1px solid var(--hotmid);border-radius:3px;padding:4px 10px 4px 8px;max-width:calc(100% - 20px)}
.typed .t{font-family:var(--px);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.typed .g{font-family:var(--px);font-size:20px;line-height:1.2;color:var(--accent);letter-spacing:.12em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 0 8px rgba(88,199,255,.5)}
.tile figcaption{display:flex;flex-direction:column;gap:2px;font-size:13px;line-height:1.5}
.tile .pn{font-family:var(--px);font-size:15px;letter-spacing:.06em;color:var(--ink)}
.tile .fx{color:var(--dim)}

/* how it works */
.sec{padding-block:96px 24px;border-top:1px solid var(--line)}
.sechead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:48px;align-items:end;margin-bottom:24px}
.sechead p{margin:0;color:var(--dim);max-width:36em}
.steps{list-style:none;margin:0;padding:0}
.row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:center;padding-block:72px;border-top:1px solid var(--line2)}
.stepn{font-family:var(--lcd);font-weight:900;font-size:56px;line-height:1;color:var(--accent);text-shadow:0 0 12px rgba(88,199,255,.4)}
.row h3{font-family:var(--mono);font-weight:600;font-size:28px;letter-spacing:-.01em;margin:18px 0 14px;color:var(--ink)}
.row p{margin:0 0 16px;max-width:30em}
.inapp{font-size:13px;color:var(--dim)}
.fig{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:24px;min-width:0;margin:0}
.figcap{font-size:13px;color:var(--dim);margin:16px 0 0}

.keys{display:flex;flex-wrap:wrap;gap:10px}
.kc{width:64px;height:68px;display:flex;align-items:center;justify-content:center;background:#1F2328;border:1px solid #353A41;border-bottom-width:6px;border-radius:6px;font-family:var(--px);font-size:30px;color:var(--ink)}
.kc.on{color:var(--accent);border-color:var(--hotmid);background:var(--hot);text-shadow:0 0 10px rgba(88,199,255,.6)}
.field{margin-top:22px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.field .in{font-family:var(--px);font-size:24px;letter-spacing:.24em;color:var(--accent);background:var(--well);border:1px solid var(--hotmid);border-radius:3px;padding:6px 14px}
.field .ct{font-size:13px;color:var(--dim)}

.gridfig{display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px}
.xax,.cells{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}
.yax{display:grid;grid-template-rows:repeat(6,minmax(0,1fr));gap:4px}
.ax{display:flex;align-items:center;justify-content:center;font-family:var(--px);font-size:16px;color:var(--accent);height:28px}
.yax .ax{height:auto}
.ax.gp{color:#5C646F}
.cell{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;background:var(--well);border:1px solid var(--line2);font-family:var(--px);font-size:clamp(16px,2vw,26px);color:var(--accent);text-shadow:0 0 8px rgba(88,199,255,.45)}
.lanes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:18px}
.lane{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--dim)}
.lane b{font-family:var(--px);font-weight:400;color:var(--accent);letter-spacing:.2em}

.lfo{display:flex;align-items:flex-end;gap:3px;height:96px;padding:8px;background:var(--well);border:1px solid var(--line);border-radius:3px;margin-top:10px}
.lb{flex:1 1 0;background:var(--accent);opacity:.9;min-width:0}
.lb.dim{background:var(--hotmid);opacity:.55}
.lfometa{display:flex;flex-wrap:wrap;gap:8px 20px;margin:12px 0 22px;font-size:13px;color:var(--dim)}
.lfometa b{color:var(--text);font-weight:500}
.wave{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px;padding:16px;background:var(--well);border:1px solid var(--line);border-radius:3px}
.dot{display:flex;align-items:center;justify-content:center;font-family:var(--px);font-size:22px;color:var(--accent);height:30px;animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(.35);opacity:.35}50%{transform:scale(1.15);opacity:1}}

.chainfig{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px;align-items:center}
.chain{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.node{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:center}
.mk{font-family:var(--px);font-size:12px;letter-spacing:.1em;color:var(--dim);border:1px solid var(--line);border-radius:3px;text-align:center;padding:4px 0;background:var(--well)}
.card{background:var(--panel2);border:1px solid var(--line);border-radius:4px;padding:10px 12px;min-width:0}
.card .nm{font-family:var(--px);font-size:15px;letter-spacing:.1em;color:var(--ink);text-transform:uppercase}
.card .sm{font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card.in .nm{color:var(--amber)}
.out img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border:1px solid var(--line);border-radius:4px}

.pop{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--panel2)}
.pi{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 16px;border-bottom:1px solid var(--line2)}
.pi:last-child{border-bottom:0}
.pi .pn{font-family:var(--px);font-size:16px;letter-spacing:.1em;color:var(--ink)}
.pi .pm{font-size:13px;color:var(--dim);text-align:right}
.pi.hd{background:var(--panel);padding-block:8px}
.seam{display:flex;align-items:center;gap:12px;margin-top:18px;flex-wrap:wrap}
.track{flex:1 1 200px;height:10px;background:var(--well);border:1px solid var(--line);border-radius:2px;position:relative;min-width:0}
.track i{position:absolute;top:-4px;width:2px;height:16px;background:var(--accent)}
.track i:last-child{right:0}
.lcdm{font-family:var(--lcd);font-weight:900;font-size:16px;color:var(--accent);text-shadow:0 0 8px rgba(88,199,255,.5)}

/* close + footer */
.close{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:48px;align-items:center;padding-block:96px;border-top:1px solid var(--line)}
.close .h2{font-size:clamp(32px,4.4vw,60px)}
.foot{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:center;padding-block:28px 40px;border-top:1px solid var(--line);font-size:13px;color:var(--dim)}
.sup{display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap}

@media (max-width:980px){
  .hero,.sechead,.close,.row,.chainfig{grid-template-columns:minmax(0,1fr);gap:32px}
  .console{grid-template-columns:minmax(0,1fr)}
  .c-view{border-right:0;border-bottom:1px solid var(--line)}
  .wall{grid-template-columns:repeat(3,minmax(0,1fr))}
  .row{padding-block:56px}
}
@media (max-width:560px){
  .navlinks .plain{display:none}
  .nav{gap:12px}
  .nav .wm{font-size:20px}
  .nav .wm-k{width:9px;height:17px}
  .navlinks .btn.sm{padding:0 12px;font-size:13px}
  .wall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .close{padding-block:64px}
  .wave{gap:3px;padding:10px}
  .dot{font-size:16px;height:24px}
  .lanes{grid-template-columns:minmax(0,1fr)}
  .kc{width:52px;height:56px;font-size:24px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .wm-k,.dot{animation:none}
  .frame img{transition:none}
}