:root { --ink:#0a0e0d; --surface:#101615; --surface-raised:#17201e; --line:#2b3835; --muted:#91a39e; --text:#edf2e8; --acid:#c9ff42; --cyan:#7ee3d0; --danger:#ffba8e; --serif:"Iowan Old Style", "Palatino Linotype", Georgia, serif; --mono:"Cascadia Mono", "Courier New", monospace; }
* { box-sizing:border-box; } html { background:var(--ink); } body { min-width:20rem; margin:0; background:var(--ink); color:var(--text); font:1rem/1.5 var(--mono); overflow-x:hidden; }
button, textarea { font:inherit; } button { cursor:pointer; } .ambient { position:fixed; z-index:0; width:28rem; height:28rem; border-radius:50%; filter:blur(7rem); opacity:.12; pointer-events:none; } .ambient-one { top:-12rem; right:20%; background:var(--acid); } .ambient-two { bottom:-17rem; left:15%; background:var(--cyan); }
.shell { position:relative; z-index:1; display:grid; min-height:100dvh; grid-template-columns:1fr; } .sidebar, .evidence-panel { background:rgba(16,22,21,.93); backdrop-filter:blur(1rem); } .sidebar { display:none; padding:1.25rem; border-bottom:1px solid var(--line); } .sidebar.open { display:block; position:fixed; inset:0 2.5rem 0 0; z-index:4; border-right:1px solid var(--line); overflow:auto; }
.brand { display:flex; align-items:center; gap:.75rem; margin-bottom:1.5rem; font-family:var(--serif); letter-spacing:.04em; } .brand-mark { display:grid; place-items:center; width:2.75rem; aspect-ratio:1; border:1px solid var(--acid); color:var(--acid); font-weight:700; font-size:1.35rem; clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); } .brand strong, .brand span { display:block; } .brand strong { font-size:1rem; } .brand div span { color:var(--muted); font:700 .65rem/1.2 var(--mono); }
.new-task { width:100%; min-height:2.75rem; margin-bottom:1.5rem; padding:.65rem .8rem; border:1px solid var(--acid); background:var(--acid); color:#10150c; font-weight:800; text-align:left; transition:transform .2s, background .2s; } .new-task:hover { transform:translateY(-.125rem); background:#d7ff71; } .new-task span { margin-right:.6rem; font-size:1.25rem; }
.nav-label, .eyebrow { margin:1.35rem 0 .7rem; color:var(--muted); font:700 .66rem/1.2 var(--mono); letter-spacing:.12em; } nav .nav-label:first-child { margin-top:0; } .workspace-list, .nav-stack { display:grid; gap:.3rem; } .workspace, .nav-item { display:flex; align-items:center; gap:.6rem; width:100%; min-height:2.75rem; border:1px solid transparent; padding:.55rem .4rem; background:transparent; color:var(--muted); text-align:left; font-size:.78rem; transition:background .2s,color .2s,border .2s; } .workspace span:first-child, .nav-glyph { display:grid; flex:0 0 auto; place-items:center; width:1.7rem; height:1.7rem; border:1px solid var(--line); color:var(--cyan); font-size:.72rem; } .nav-item span:last-child { min-width:0; } .nav-item b, .nav-item small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .nav-item b { color:inherit; font-size:.73rem; } .nav-item small { margin-top:.12rem; color:var(--muted); font-size:.56rem; } .workspace:hover, .workspace.selected, .nav-item:hover, .nav-item.selected { border-color:var(--line); background:var(--surface-raised); color:var(--text); } .workspace.selected, .nav-item.selected { border-left-color:var(--acid); }
.sidebar-foot { margin-top:2rem; padding-top:1.2rem; border-top:1px solid var(--line); color:var(--muted); font-size:.7rem; } .health-line { display:flex; gap:.45rem; align-items:center; color:var(--text); font-size:.7rem; } .health-line i, .state-dot { width:.5rem; height:.5rem; border-radius:50%; background:var(--acid); box-shadow:0 0 .7rem var(--acid); }
.workbench { display:flex; min-width:0; min-height:100dvh; flex-direction:column; } .topbar { display:flex; min-height:4.25rem; align-items:center; gap:.8rem; padding:0 1rem; border-bottom:1px solid var(--line); background:rgba(10,14,13,.72); } .menu-button { display:grid; place-items:center; min-width:2.75rem; min-height:2.75rem; border:1px solid var(--line); background:var(--surface); color:var(--text); } .context { flex:1; min-width:0; } .context span { display:block; overflow:hidden; color:var(--text); font-weight:700; text-overflow:ellipsis; white-space:nowrap; } .context small { color:var(--muted); font-size:.65rem; } .context b { color:var(--cyan); font-weight:700; } .system-state { display:none; align-items:center; gap:.45rem; color:var(--danger); font-size:.66rem; text-align:right; } .system-state span { width:.4rem; height:.4rem; border-radius:50%; background:var(--danger); }
.chat { flex:1; width:100%; max-width:58rem; margin:0 auto; padding:3rem 1.15rem 2rem; } .welcome { max-width:48rem; padding:1rem 0 3rem; animation:reveal .6s both; } .welcome h1 { margin:0; font:clamp(2.4rem,10vw,5.5rem)/.9 var(--serif); letter-spacing:-.06em; } .welcome h1 em { color:var(--acid); font-weight:400; } .welcome-copy { max-width:47ch; margin:1.7rem 0; color:var(--muted); } .capabilities { display:flex; flex-wrap:wrap; gap:.45rem; } .capabilities span { border:1px solid var(--line); padding:.32rem .45rem; color:var(--cyan); font-size:.65rem; }
.messages { display:grid; gap:1rem; } .message { max-width:52rem; padding:1rem 1.1rem; border:1px solid var(--line); animation:reveal .3s both; } .message p { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; } .message-label { margin-bottom:.45rem !important; color:var(--cyan); font-size:.67rem; font-weight:700; letter-spacing:.08em; } .message.user { margin-left:auto; border-color:#4f6341; background:#182116; } .message.user .message-label { color:var(--acid); } .message.system { border-left:3px solid var(--danger); background:#211b15; } .message.system .message-label { color:var(--danger); }
.composer-panel { position:sticky; bottom:0; padding:.7rem 1rem 1.15rem; border-top:1px solid var(--line); background:linear-gradient(180deg,rgba(10,14,13,.86),var(--ink) 35%); } .task-strip { display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; max-width:58rem; margin:0 auto .5rem; color:var(--muted); font-size:.66rem; } .task-strip strong { color:var(--cyan); font-size:.66rem; } .task-strip.pending .state-dot { background:var(--danger); box-shadow:0 0 .7rem var(--danger); } .composer { display:grid; gap:.5rem; max-width:58rem; margin:auto; padding:.5rem; border:1px solid var(--line); background:var(--surface); } .composer-controls { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:.45rem .6rem; padding:.1rem .15rem .35rem; border-bottom:1px solid var(--line); color:var(--muted); font-size:.65rem; } .composer-controls label { color:var(--cyan); font-weight:700; letter-spacing:.08em; } .composer-controls select { min-width:0; min-height:2.75rem; border:1px solid var(--line); padding:.45rem .55rem; background:var(--surface-raised); color:var(--text); font:inherit; } .composer-controls span { grid-column:1 / -1; color:var(--muted); font-size:.6rem; } textarea { min-width:0; min-height:4.5rem; resize:vertical; border:0; outline:0; background:transparent; color:var(--text); line-height:1.45; } textarea::placeholder { color:#6c7a76; } .send-button { display:grid; place-items:center; justify-self:end; min-width:2.75rem; min-height:2.75rem; border:1px solid var(--acid); background:var(--acid); color:#10150c; font-size:1.3rem; font-weight:900; transition:transform .2s; } .send-button:hover { transform:translateY(-.12rem); } .composer-note { max-width:58rem; margin:.55rem auto 0; color:var(--muted); font-size:.64rem; }
.evidence-panel { display:none; padding:1.5rem; border-left:1px solid var(--line); } .evidence-heading { display:flex; align-items:start; justify-content:space-between; gap:.5rem; } .evidence-heading span { color:var(--acid); font-size:.65rem; } .evidence-card { display:grid; gap:.25rem; padding:1rem 0; border-bottom:1px solid var(--line); } .evidence-card span { color:var(--muted); font-size:.64rem; letter-spacing:.08em; } .evidence-card strong { overflow-wrap:anywhere; color:var(--text); font-size:.74rem; } .evidence-note { color:var(--muted); font-size:.68rem; }
.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; } @keyframes reveal { from { opacity:0; transform:translateY(.65rem); } to { opacity:1; transform:translateY(0); } }
@media (min-width:48rem) { .system-state { display:flex; } .chat { padding:5rem 2.2rem 2rem; } .composer-panel { padding-left:2.2rem; padding-right:2.2rem; } .composer { grid-template-columns:minmax(0,1fr) auto; } .composer-controls { grid-column:1 / -1; } .send-button { grid-column:2; grid-row:2; } textarea { grid-column:1; grid-row:2; } }
@media (min-width:64rem) { .shell { grid-template-columns:16rem minmax(0,1fr); } .sidebar { display:block; min-height:100dvh; border-right:1px solid var(--line); border-bottom:0; } .menu-button { display:none; } }
@media (min-width:80rem) { .shell { grid-template-columns:16rem minmax(0,1fr) 17rem; } .evidence-panel { display:block; } }