:root { --ink:#f3f0e8; --muted:#9e9a90; --line:rgba(255,255,255,.12); --panel:rgba(21,22,22,.72); --acid:#d9ff43; --orange:#ff7043; --bg:#0d0f0f; }
* { box-sizing:border-box; }
html { background:var(--bg); }
body { margin:0; min-height:100vh; color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif; background:radial-gradient(circle at 75% 10%,rgba(217,255,67,.08),transparent 30%),linear-gradient(135deg,#111313,#090a0a 65%); }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.22; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"); }
button,input { font:inherit; }
button { cursor:pointer; }
.shell { width:min(1180px,calc(100% - 40px)); margin:auto; position:relative; }
.topbar { height:88px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { display:flex; gap:12px; align-items:center; color:var(--ink); text-decoration:none; font-size:13px; letter-spacing:.22em; font-weight:800; }
.brand-mark { width:34px; height:34px; display:grid; place-items:center; color:#0b0c0c; background:var(--acid); border-radius:50%; font-family:Georgia,serif; font-size:22px; }
.status { display:flex; align-items:center; gap:9px; color:var(--muted); font-size:13px; }
.dot { width:8px; height:8px; border-radius:50%; background:#656762; box-shadow:0 0 0 5px rgba(255,255,255,.04); }
.dot.online { background:var(--acid); box-shadow:0 0 16px rgba(217,255,67,.8); }
.hero { min-height:510px; padding:70px 0 42px; position:relative; }
.eyebrow { color:var(--acid); font-weight:800; letter-spacing:.18em; font-size:11px; }
h1 { margin:18px 0 22px; max-width:780px; font-size:clamp(56px,8.2vw,112px); line-height:.82; letter-spacing:-.065em; font-weight:750; }
h1 em { color:transparent; -webkit-text-stroke:1px rgba(243,240,232,.72); font-family:Georgia,serif; font-weight:400; }
.lead { max-width:470px; color:var(--muted); font-size:18px; line-height:1.55; }
.voice-stage { position:absolute; right:6%; top:80px; width:310px; height:310px; display:grid; place-items:center; }
.rings,.rings i { position:absolute; inset:0; border:1px solid rgba(217,255,67,.15); border-radius:50%; }
.rings i:nth-child(1) { inset:13%; }.rings i:nth-child(2) { inset:26%; }.rings i:nth-child(3) { inset:39%; }
.voice-button { z-index:2; width:108px; height:108px; border:0; border-radius:50%; display:grid; place-items:center; color:#101111; background:var(--acid); box-shadow:0 18px 70px rgba(217,255,67,.18); transition:.25s ease; }
.voice-button:hover { transform:scale(1.04); }.voice-button svg { width:34px; fill:currentColor; }
.voice-hint { position:absolute; bottom:-2px; color:var(--muted); font-size:13px; }
body.connected .voice-button { background:var(--orange); color:white; }
body.connected .rings { animation:pulse 2.3s ease-out infinite; }
body.speaking .rings { animation:pulse .8s ease-out infinite; }
@keyframes pulse { 50% { transform:scale(1.06); opacity:.45; } }
.workspace-grid { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(290px,.8fr); gap:18px; padding-bottom:35px; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:18px; backdrop-filter:blur(18px); }
.conversation-panel { min-height:460px; display:flex; flex-direction:column; }
.panel-head { height:66px; display:flex; align-items:center; justify-content:space-between; padding:0 22px; border-bottom:1px solid var(--line); }
.panel h2 { margin:0; font-size:14px; letter-spacing:.04em; }.text-button { background:none; border:0; color:var(--muted); font-size:12px; }
.transcript { padding:24px; flex:1; max-height:420px; overflow:auto; }
.message { margin-bottom:20px; display:grid; grid-template-columns:74px 1fr; gap:12px; line-height:1.55; }
.message .who { color:var(--muted); font-size:11px; letter-spacing:.1em; padding-top:4px; }.message.assistant .who { color:var(--acid); }.message p { margin:0; white-space:pre-wrap; }
.empty-message,.empty-small { color:#6f716c; font-size:13px; }
.text-form { display:flex; margin:0 18px 18px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:rgba(0,0,0,.15); }
.text-form input { flex:1; min-width:0; padding:14px 16px; color:var(--ink); border:0; outline:0; background:transparent; }.text-form button { width:50px; border:0; background:var(--acid); font-size:22px; }
.side-stack { display:grid; gap:18px; }.compact-panel { min-height:220px; }.count { min-width:26px; height:26px; display:grid; place-items:center; border-radius:20px; background:rgba(217,255,67,.12); color:var(--acid); font-size:12px; }
.item-list { padding:12px 20px 20px; max-height:190px; overflow:auto; }.item { padding:11px 2px; border-bottom:1px solid rgba(255,255,255,.07); }.item:last-child { border:0; }.item-title { font-size:13px; }.item.done .item-title { color:#777; text-decoration:line-through; }.item-meta { margin-top:4px; color:var(--muted); font-size:11px; }
footer { min-height:70px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; color:#686a65; font-size:11px; } footer code { color:#8a8d85; }
.confirm-dialog { width:min(480px,calc(100% - 32px)); border:1px solid var(--line); border-radius:20px; color:var(--ink); background:#181a19; box-shadow:0 40px 100px #000; }.confirm-dialog::backdrop { background:rgba(0,0,0,.72); backdrop-filter:blur(6px); }.confirm-dialog form { padding:20px; }.dialog-icon { width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:rgba(255,112,67,.15);color:var(--orange);font-weight:800;margin-bottom:20px;}.confirm-dialog h2{font-size:24px;margin:8px 0 14px}.confirm-dialog pre{white-space:pre-wrap;max-height:200px;overflow:auto;color:#b8b7b0;background:#101111;padding:14px;border-radius:10px;font:12px/1.5 ui-monospace,monospace}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}.dialog-actions button{padding:11px 16px;border-radius:9px;border:1px solid var(--line)}.secondary{background:transparent;color:var(--ink)}.primary{background:var(--acid);color:#111;border-color:var(--acid)!important;font-weight:700}
.toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%,20px); padding:11px 16px; border-radius:10px; background:#e9e7df; color:#111; font-size:13px; opacity:0; pointer-events:none; transition:.25s; }.toast.show { opacity:1; transform:translate(-50%,0); }
@media(max-width:850px){.hero{padding-top:55px}.voice-stage{position:relative;right:auto;top:auto;margin:35px auto 15px;width:230px;height:230px}.workspace-grid{grid-template-columns:1fr}.hero{min-height:auto}h1{font-size:clamp(52px,14vw,82px)}.lead{font-size:16px}}
@media(max-width:520px){.shell{width:min(100% - 22px,1180px)}.topbar{height:70px}.hero{padding-top:38px}.message{grid-template-columns:1fr;gap:4px}.workspace-grid{gap:12px}footer{align-items:flex-start;flex-direction:column;justify-content:center;gap:6px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}