@font-face{font-family:"JetBrains Mono";src:url(../assets/fonts/jetbrains-mono.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
:root{
  --bg:#0c0c0e; --panel:#121217; --fg:#e8e8ea; --dim:#9a9aa2; --line:#2c2c33; --edge:#6e6e76;
  --blue:#0a6cff;      /* banner cursor blue */
  --pfp:#1f3af5;       /* pfp field blue */
  --blue-soft:#7fb0ff; /* blue for text (8.9:1 on bg) */
}
*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.6 "JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;-webkit-font-smoothing:antialiased;min-height:100vh;overflow-wrap:anywhere}
::selection{background:var(--blue);color:#fff}
a{color:inherit}
h1,h2,h3,p{margin:0;font-size:inherit}
ul{list-style:none;margin:0;padding:0}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:2px}
.sr{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:12px;top:-60px;z-index:10;background:var(--blue);color:#fff;padding:6px 10px;text-decoration:none}
.skip:focus{top:12px}
.no-js .js-only{display:none!important}
.dim{color:var(--dim)}

.term{max-width:920px;margin:0 auto;padding:28px 28px 0;min-height:100vh;display:flex;flex-direction:column}

/* welcome panel */
.welcome{position:relative;border:1px solid var(--blue);border-radius:10px;padding:22px 22px 18px;display:grid;grid-template-columns:minmax(0,1.05fr) 1px minmax(0,1fr);gap:22px}
.legend{position:absolute;top:-.8em;left:16px;padding:0 8px;background:var(--bg);color:var(--blue-soft);line-height:1.6}
.rule{background:var(--line)}
.hello{margin:0 0 14px;font-size:15px;font-weight:700;text-align:center;color:#fff}
.art-wrap{display:flex;justify-content:center}
.art{margin:0;font:inherit;font-size:11px;line-height:1.02;white-space:pre;letter-spacing:0}
.art i{font-style:normal}.art .b{color:var(--pfp)}.art .f{color:#cfd3e6}
.tag{text-align:center;margin:12px 0 2px}
.cwd{text-align:center}
.links h2{margin:0 0 6px;font-weight:700;color:var(--blue-soft)}
.links .sec+.sec{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.kv>li{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;padding:1px 0}
.kv .k{width:7.5ch;color:var(--dim);flex:none}
.kv a{text-decoration:none;border-bottom:1px dotted var(--dim)}
.kv a:hover{color:#fff;border-bottom-color:var(--blue)}
.copy{font:inherit;font-size:12px;background:none;border:1px solid var(--edge);color:var(--dim);border-radius:4px;padding:0 6px;cursor:pointer;line-height:1.5}
.copy:hover{color:#fff;border-color:var(--blue)}
.copy.ok{color:var(--blue-soft);border-color:var(--blue)}
.no-js .copy{display:none}
.hint{color:var(--dim);font-size:12px;margin-top:8px}

/* github popover */
.gh{position:relative}
.trigger{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;border-bottom:1px dotted var(--dim)}
.trigger[aria-expanded="true"]{color:#fff;border-bottom-color:var(--blue)}
.trigger::after{content:" ▾";color:var(--dim)}
.accts{position:absolute;left:0;top:calc(100% + 6px);z-index:5;background:var(--panel);border:1px solid var(--blue);border-radius:8px;padding:6px;width:max-content;min-width:min(30ch,calc(100vw - 60px));max-width:calc(100vw - 40px);box-shadow:0 12px 30px rgba(0,0,0,.5)}
.accts[hidden]{display:none}
.accts::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}
.accts a{display:block;padding:5px 8px;border-radius:5px;text-decoration:none;border-bottom:0}
.accts a:hover{background:#1d1d25}
.accts small{display:block;color:var(--dim);font-size:12px}
/* without JS the accounts are simply listed inline */
.no-js .gh{flex-direction:column}
.no-js .accts{position:static;border:0;padding:0;box-shadow:none;background:none;min-width:0}
.no-js .accts a{padding:2px 0}
.no-js .trigger{display:none}

/* transcript */
.log{margin-top:26px;flex:1;padding-bottom:8px}
.turn{margin:0 0 22px}
.you{font-weight:400;color:var(--fg)}
.you>span{color:var(--dim)}
.call{margin-top:8px}
.dot{color:var(--blue)}
.tool{font-weight:700}
.args,.res{color:var(--dim)}
.res{padding-left:2ch}
.say{margin-top:8px;display:flex;gap:1ch}
.say>.dot{color:#fff;flex:none}
.say p,.bio p{max-width:72ch}
.bio p+p{margin-top:8px}
.out-err{color:#ffb4a8}
.out-err+.dim{margin-top:2px}

/* tools list */
.tools{margin:4px 0 0 2ch}
.grp{color:var(--blue-soft);font-weight:400;margin-top:10px}
.ls li{display:grid;grid-template-columns:14ch 14ch minmax(0,1fr);gap:0 1ch;padding:1px 0}
.ls .n{color:#fff}
.ls .l,.ls .a{color:var(--dim)}
#out .ls{margin:4px 0 0 2ch}
.cmds li{grid-template-columns:16ch minmax(0,1fr)}
.cmds button{font:inherit;color:#fff;background:none;border:0;padding:0;cursor:pointer;text-align:left;border-bottom:1px dotted var(--dim);justify-self:start;white-space:nowrap}
.cmds button:hover{border-bottom-color:var(--blue)}
.plain li{grid-template-columns:9ch minmax(0,1fr);align-items:baseline}
.plain a{text-decoration:none;border-bottom:1px dotted var(--dim)}
.plain .copy{margin-left:1ch}


/* projects */
.js .no-js-only{display:none}
.p-empty{margin:6px 0 0 2ch;color:var(--dim)}
.p-empty::before{content:"· ";color:var(--blue)}
.p-hint{margin:10px 0 0 2ch;font-size:12px}
.projects{list-style:none;margin:8px 0 0 2ch;padding:0}
.proj{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,260px);gap:18px;padding:12px 0 12px 16px;border-left:2px solid var(--blue);position:relative}
.proj+.proj{margin-top:6px}
.proj::before{content:"";position:absolute;left:-6px;top:17px;width:10px;height:10px;border-radius:50%;background:var(--bg);border:2px solid var(--blue)}
.proj-head,.proj-title{font-weight:400;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.proj-name{font:inherit;font-weight:700;color:#fff;background:none;border:0;padding:0;cursor:pointer;border-bottom:1px dotted var(--dim);text-align:left}
.proj-name:hover{border-bottom-color:var(--blue);color:var(--blue-soft)}
.proj-desc{margin-top:4px;max-width:64ch}
.badge{font-size:11px;line-height:1.5;padding:0 7px;border:1px solid var(--edge);border-radius:4px;color:var(--dim);text-transform:lowercase;white-space:nowrap}
.badge[data-status="building"]{color:var(--blue-soft);border-color:var(--blue)}
.badge[data-status="shipped"]{color:#fff;background:var(--blue);border-color:var(--blue)}
.p-tags{margin-top:6px;display:flex;flex-wrap:wrap;gap:6px}
.tag-chip{font-size:12px;color:var(--dim)}
.tag-chip::before{content:"#";color:var(--blue-soft)}
.p-links{margin-top:6px}
.p-links a{text-decoration:none;border-bottom:1px dotted var(--dim);margin-right:1.5ch}
.p-links a:hover{color:#fff;border-bottom-color:var(--blue)}
.shot{margin:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#08080a;align-self:start}
.shot-bar{display:flex;align-items:center;gap:8px;padding:4px 8px;font-size:11px;color:var(--dim);border-bottom:1px solid var(--line);min-width:0}
.shot-dot{width:7px;height:7px;border-radius:2px;background:var(--blue);flex:none}
.shot-path{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.shot-size{margin-left:auto;flex:none}
.shot img{display:block;width:100%;height:auto}
.proj-detail{margin:8px 0 0 2ch;padding:14px 16px;border:1px solid var(--line);border-left:2px solid var(--blue);border-radius:0 8px 8px 0}
.proj-title{font-size:18px;font-weight:700;color:#fff}
.shot.big{margin-top:12px;max-width:640px}
.facts{margin-top:12px!important;margin-left:0!important}
.facts a{justify-self:start;overflow-wrap:anywhere}

/* input dock */
.dock{position:sticky;bottom:0;background:linear-gradient(to bottom,rgba(12,12,14,0),var(--bg) 18px);padding:22px 0 14px;margin-top:auto}
.input{border:1px solid var(--edge);border-radius:10px;padding:10px 14px;display:flex;align-items:flex-start;gap:1ch;cursor:text;background:var(--bg)}
.input:focus-within{border-color:var(--blue-soft);box-shadow:0 0 0 1px var(--blue-soft)}
.field{position:relative;flex:1;min-width:0}
.mirror{display:block;white-space:pre-wrap;word-break:break-all;min-height:1.6em}
.field input{position:absolute;inset:0;width:100%;height:100%;opacity:0;font:inherit;border:0;padding:0;margin:0;background:none;color:transparent;caret-color:transparent;outline:none}
.cursor{display:inline-block;min-width:.6em;background:var(--blue);color:#fff;animation:blink 1.06s steps(1) infinite;box-shadow:0 0 10px rgba(10,108,255,.5)}
@keyframes blink{0%,55%{background:var(--blue);box-shadow:0 0 10px rgba(10,108,255,.5)}55.01%,100%{background:transparent;box-shadow:none}}
.ph{color:var(--dim);margin-left:1ch}
.status{display:flex;justify-content:space-between;gap:12px;color:var(--dim);font-size:12px;padding:6px 14px 0}
.status .mode{color:var(--blue-soft)}

@media (prefers-reduced-motion:reduce){
  .cursor{animation:none}
  html{scroll-behavior:auto}
}

@media (max-width:720px){
  body{font-size:13px}
  .term{padding:20px 12px 0}
  .welcome{grid-template-columns:minmax(0,1fr);gap:16px;padding:20px 14px 14px}
  .rule{height:1px}
  /* 40 columns x 0.6em advance = 24em; fit inside panel */
  .art{font-size:min(11px,calc((100vw - 64px) / 24))}
  .tools,#out .ls{margin-left:0}
  .ls li{grid-template-columns:minmax(0,1fr) auto;padding:3px 0}
  .ls .a{grid-column:1 / -1;font-size:12px}
  .cmds li{grid-template-columns:15.5ch minmax(0,1fr)}
  .plain li{grid-template-columns:8ch minmax(0,1fr)}
  .status .r{display:none}
  .projects,.proj-detail,.p-empty,.p-hint{margin-left:0}
  .proj{grid-template-columns:minmax(0,1fr);gap:10px;padding-left:14px}
  .proj-detail{padding:12px}
}
@media (max-width:360px){
  .ph{display:none}
}