/* tui docs — shared styles for the index and both app pages. */

:root{
  --bg:#0b0c11; --panel:#101218; --cmd:#0a0c12; --line:#232839;
  --fg:#e8ebf4; --mut:#9aa1b8; --dim:#646b84;
  --acc:#4dc4d6; --acc2:#7aa2ff; --green:#5fd39a;
  --glow:rgba(77,196,214,.22);
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--mono); font-size:15px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* Ambient layer: one soft accent bloom behind the masthead, and a faint scan
   texture over everything. Both are decorative and never intercept a click. */
body::before{
  content:""; position:fixed; inset:0 0 auto; height:70vh; pointer-events:none; z-index:0;
  background:
    radial-gradient(60% 42% at 50% -6%, var(--glow), transparent 68%),
    radial-gradient(38% 30% at 82% 4%, rgba(122,162,255,.12), transparent 70%);
}
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.35;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.028) 0 1px, transparent 1px 3px);
}
body > *{position:relative; z-index:1}

::selection{background:#26414a}
a{color:var(--acc)}
a:hover{color:var(--fg)}
a:focus-visible,button:focus-visible{outline:1px solid var(--acc); outline-offset:2px}
.wrap{max-width:82ch; margin:0 auto; padding:0 24px}
.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}

/* Reading-progress hairline, built by app.js. */
.prog{position:fixed; top:0; left:0; height:2px; width:0; z-index:9;
  background:linear-gradient(90deg, var(--acc), var(--acc2)); box-shadow:0 0 12px var(--glow)}

/* status bar */
.status{position:sticky; top:0; z-index:8; border-bottom:1px solid var(--line);
  background:rgba(13,15,22,.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.status-in{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:10px 24px; font-size:13px}
.brand{color:var(--fg); text-decoration:none; font-weight:700}
.brand b{color:var(--acc); font-weight:700; text-shadow:0 0 14px var(--glow)}
.tabs{display:flex; gap:18px}
.tabs a{color:var(--dim); text-decoration:none; transition:color .15s ease}
.tabs a:hover{color:var(--fg)}
.tabs a span{color:var(--acc)}

/* block wordmark */
.banner{margin:40px 0 0; display:flex; justify-content:center}
.banner pre{
  margin:0; padding:0; border:0; background:none; overflow:visible;
  font-size:clamp(9px,3.3vw,25px); line-height:1.04; font-weight:700; letter-spacing:0;
  background-image:linear-gradient(168deg, var(--acc) 0%, var(--acc2) 52%, var(--green) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 26px var(--glow));
}
.tagline{text-align:center; color:var(--dim); font-size:12.5px; letter-spacing:.16em; margin:14px 0 0; text-transform:lowercase}

/* session */
.session{margin:44px 0 10px; font-size:15px; font-weight:700}
.prompt{color:var(--green); font-weight:700; user-select:none}
.cursor{display:inline-block; width:9px; height:1.15em; background:var(--acc); vertical-align:text-bottom; margin-left:6px;
  box-shadow:0 0 10px var(--glow); animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.lede{color:var(--mut); font-size:14.5px; max-width:68ch; margin:0 0 30px}
.lede strong{color:var(--fg)}
.meta{color:var(--dim); font-size:12.5px}

/* app rows (index) */
.app{position:relative; border:1px solid var(--line); border-radius:8px; background:var(--panel); margin:0 0 24px; overflow:hidden;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease}
.app::before{content:""; position:absolute; left:0; top:0; bottom:0; width:2px; transform:scaleY(0); transform-origin:50% 100%;
  background:linear-gradient(180deg, var(--acc), var(--acc2)); transition:transform .28s ease}
.app:hover{border-color:#2f3750; transform:translateY(-2px); box-shadow:0 22px 48px -30px rgba(0,0,0,.95)}
.app:hover::before{transform:scaleY(1)}
.app-head{display:flex; align-items:baseline; gap:12px; padding:20px 20px 0}
.idx{color:var(--dim); font-size:13px}
.app-head h2{margin:0; font-size:19px; letter-spacing:-.01em}
.app-head h2 a{color:var(--fg); text-decoration:none}
.app-head h2 a:hover{color:var(--acc); text-decoration:underline; text-underline-offset:4px}
.ver{margin-left:auto; color:var(--dim); font-size:12.5px; white-space:nowrap}
.app-desc{color:var(--mut); font-size:14px; max-width:64ch; margin:0; padding:8px 20px 0}
.app .meta{padding:10px 20px 0}
.app-links{display:flex; gap:20px; padding:12px 20px 18px; font-size:13.5px}

/* command line */
.cmd{display:flex; align-items:stretch; background:var(--cmd); border:1px solid var(--line); border-radius:6px; overflow:hidden;
  transition:border-color .2s ease, box-shadow .2s ease}
.cmd:hover{border-color:#2f3750; box-shadow:0 0 0 3px rgba(77,196,214,.06)}
.app .cmd{margin:14px 20px 0}
.cmd code{flex:1; min-width:0; font-size:13px; padding:12px 14px; color:var(--fg); white-space:pre-wrap; overflow-wrap:anywhere}
.app .cmd code{font-size:12.5px; padding:10px 12px}
.cmd button{flex:none; border:0; border-left:1px solid var(--line); background:transparent; color:var(--dim); cursor:pointer;
  font-family:var(--mono); font-size:12.5px; padding:0 16px; transition:color .15s ease, background .15s ease}
.cmd button:hover{color:var(--fg); background:rgba(255,255,255,.03)}
.cmd button.done{color:var(--green)}
.note{font-size:13px; color:var(--dim); margin:10px 2px 0}
.note code{color:var(--mut)}

/* screenshot window */
.term{border:1px solid var(--line); border-radius:8px; background:#080a0f; overflow:hidden; margin-top:14px;
  box-shadow:0 20px 46px -28px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.04);
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease}
.term:hover{border-color:#2f3750; transform:translateY(-2px); box-shadow:0 28px 60px -28px rgba(0,0,0,1), 0 0 0 1px rgba(77,196,214,.12), inset 0 1px 0 rgba(255,255,255,.05)}
.app .term{border:0; border-top:1px solid var(--line); border-radius:0; margin-top:0; box-shadow:none; transform:none}
.app .term:hover{border-color:var(--line); box-shadow:none}
.titlebar{display:flex; align-items:center; gap:8px; padding:8px 12px; border-bottom:1px solid var(--line); color:var(--dim); font-size:12px}
.d{width:9px; height:9px; border-radius:50%; border:1px solid #3a4159}
.titlebar span:last-child{margin-left:4px}
.term img{display:block; width:100%; height:auto}
.cap{font-size:12.5px; color:var(--dim); margin:8px 2px 0}

/* recorded demo: a poster frame until app.js swaps the GIF in, and a control
   in the title bar so a reader can stop the motion. The title bar span is no
   longer the last child once the button is there, so give it its margin back. */
.demo .titlebar span{margin-left:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pp{margin-left:auto; flex:none; border:1px solid var(--line); border-radius:4px;
  background:transparent; color:var(--dim); cursor:pointer;
  font-family:var(--mono); font-size:11px; line-height:1; padding:4px 9px;
  transition:color .15s ease, border-color .15s ease}
.pp:hover{color:var(--fg); border-color:#2f3750}

/* prose blocks */
.pline{color:var(--dim); font-size:13px; margin:40px 0 10px}
pre.out{border:1px solid var(--line); border-radius:6px; background:var(--panel); padding:14px 16px; font-size:13px; line-height:1.7;
  color:var(--mut); overflow-x:auto; white-space:pre-wrap; margin:0}
pre.out b{color:var(--fg); font-weight:700}
dl.cov{margin:0; border-top:1px solid var(--line)}
dl.cov div{display:grid; grid-template-columns:22ch 1fr; gap:16px; padding:9px 2px; border-bottom:1px solid var(--line); font-size:13.5px;
  transition:background .15s ease}
dl.cov div:hover{background:rgba(255,255,255,.02)}
dl.cov dt{color:var(--fg)}
dl.cov dd{margin:0; color:var(--mut)}
.keys{display:grid; grid-template-columns:1fr 1fr; gap:0 32px}
table{width:100%; border-collapse:collapse; font-size:13.5px}
th,td{text-align:left; padding:8px 4px; border-bottom:1px solid var(--line); vertical-align:top}
th{color:var(--dim); font-weight:400; font-size:12px}
td:first-child{color:var(--fg); white-space:nowrap; padding-right:16px}
td{color:var(--mut)}
pre{background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:12px 14px; overflow-x:auto; font-size:13px;
  line-height:1.6; color:var(--fg); margin:0 0 12px}
pre .c{color:var(--dim)}
h3.sub{font-size:13.5px; margin:0 0 8px; font-weight:700}
.blk{margin-bottom:22px}
.blk p{font-size:13.5px; color:var(--mut); margin:0}

footer{margin:52px 0 0; border-top:1px solid var(--line); padding:18px 0 52px; color:var(--dim); font-size:12.5px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}
footer a{color:var(--mut)}

/* Entrance reveals. app.js adds .rv, then .in once the block is on screen.
   Without JS nothing is tagged, so everything is simply visible. */
.rv{opacity:0; transform:translateY(10px)}
.rv.in{opacity:1; transform:none; transition:opacity .5s ease, transform .5s ease}

@media (max-width:640px){
  .ver{display:none}
  .tabs{gap:12px}
  .app .cmd code{font-size:12px}
  dl.cov div{grid-template-columns:1fr; gap:2px}
  .keys{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .cursor{animation:none}
  .app,.term,.cmd,.tabs a,dl.cov div,.cmd button{transition:none}
  .app:hover,.term:hover{transform:none}
  .rv{opacity:1; transform:none}
  .rv.in{transition:none}
}