/* JARVIS command center v3: chamfered HUD panels, perspective grid floor, arc-reactor core, Orbitron numerals. Glow only where it carries meaning. */
:root { --bg: #02060f; --bg-2: #071224; --panel: rgba(6, 16, 32, .82); --line: rgba(53, 214, 255, .22); --line-2: rgba(53, 214, 255, .55); --cyan: #35d6ff; --cyan-2: #9feeff; --text: #d9f0fb; --dim: #7ea4c0; --ok: #37e3a1; --warn: #ffb347; --bad: #ff5f6d; --mono: "Orbitron", ui-monospace, Consolas, monospace; --sans: "Rajdhani", "Segoe UI", system-ui, sans-serif; --cut: 14px; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.4 var(--sans); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
b { font-weight: 600; }
[hidden] { display: none !important; }
.dim { color: var(--dim); } .small { font-size: .78rem; } .ok { color: var(--ok); } .bad { color: var(--bad) !important; } .mt { margin-top: 1.1rem; }

/* ---------- background: vignette, perspective grid floor, slow radar sweep, scanlines ---------- */
.bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: radial-gradient(1100px 600px at 50% -10%, #0c2446 0%, var(--bg) 60%); }
.bg::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.013) 0 1px, transparent 1px 3px); }
/* grid and sweep animate with transforms only (composited on the GPU, no repaint), so the page stays cheap next to a game or a stream */
.bg__grid { position: absolute; left: -20%; right: -20%; bottom: -10%; height: 55vh; transform-origin: 50% 100%; mask: linear-gradient(180deg, transparent, #000 45%, #000); overflow: hidden; transform: perspective(520px) rotateX(62deg); }
.bg__grid::before { content: ""; position: absolute; inset: -48px 0 0 0; background: linear-gradient(rgba(53,214,255,.16) 1px, transparent 1px) 0 0 / 100% 48px, linear-gradient(90deg, rgba(53,214,255,.16) 1px, transparent 1px) 0 0 / 48px 100%; will-change: transform; animation: gridflow 5s linear infinite; }
@keyframes gridflow { to { transform: translateY(48px); } }
.bg__sweep { position: absolute; left: 50%; top: 42%; width: 1400px; height: 1400px; margin: -700px 0 0 -700px; border-radius: 50%; background: conic-gradient(from 0deg, rgba(53,214,255,.07), transparent 22%); animation: sweep 14s linear infinite; opacity: .8; will-change: transform; }
@keyframes sweep { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bg__grid, .bg__sweep, .ring, .logo__ring::before { animation: none !important; } }

/* ---------- frame ---------- */
.hud { position: relative; z-index: 1; display: grid; grid-template-columns: 236px 1fr; grid-template-rows: 60px 1fr 74px; min-height: 100vh; gap: 10px; padding: 10px; }
.side, .topbar, .bottombar, .panel { clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); }
.side, .topbar, .bottombar { position: relative; background: var(--panel); }
.side::before, .topbar::before, .bottombar::before, .panel > .in::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, var(--line-2), var(--line) 35%, var(--line) 65%, var(--line-2)); clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 0, 1px 1px, 1px calc(100% - var(--cut) - .4px), calc(var(--cut) + .4px) calc(100% - 1px), calc(100% - 1px) calc(100% - 1px), calc(100% - 1px) calc(var(--cut) + .4px), calc(100% - var(--cut) - .4px) 1px, 1px 1px); }

.side { grid-row: 1 / -1; display: flex; flex-direction: column; gap: 14px; padding: 16px 12px; }
.logo { display: flex; align-items: center; gap: 12px; padding: 2px 4px; }
.logo__ring { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--cyan); box-shadow: 0 0 18px rgba(53,214,255,.5), inset 0 0 10px rgba(53,214,255,.4); position: relative; flex: none; }
.logo__ring::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px dashed rgba(53,214,255,.5); animation: spin 12s linear infinite; }
.logo__ring::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
@keyframes spin { to { transform: rotate(360deg); } }
.logo b { display: block; font-family: var(--mono); letter-spacing: .32em; font-size: .95rem; color: #fff; } .logo small { font-family: var(--mono); letter-spacing: .2em; font-size: .52rem; color: var(--dim); }
.menu { display: grid; gap: 3px; }
.menu a { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; color: var(--dim); font-size: .95rem; font-weight: 500; border-left: 2px solid transparent; letter-spacing: .02em; position: relative; }
.menu a i { font-style: normal; font-family: var(--mono); font-size: .55rem; color: rgba(53,214,255,.55); width: 1.4em; }
.menu a em { font-style: normal; margin-left: auto; font-family: var(--mono); font-size: .62rem; padding: .1rem .45rem; background: var(--cyan); color: #041018; font-weight: 700; clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px); }
.menu a:hover { color: var(--text); background: rgba(53,214,255,.06); }
.menu a.is-active { color: #fff; background: linear-gradient(90deg, rgba(53,214,255,.16), transparent); border-left-color: var(--cyan); text-shadow: 0 0 10px rgba(53,214,255,.5); }
.voicebox { margin-top: auto; padding: 12px; border: 1px solid var(--line); text-align: center; background: rgba(2,6,15,.55); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); display: grid; gap: 4px; justify-items: center; }
.label { margin: 0 0 4px; font-family: var(--mono); font-size: .58rem; letter-spacing: .25em; color: var(--dim); }
.vu { width: 100%; height: 34px; display: block; }
.voicebox__state { margin: 2px 0; font-size: .85rem; color: var(--cyan-2); min-height: 1.2em; }
.mic { width: 66px; height: 66px; margin: 4px auto; border-radius: 50%; border: 2px solid var(--cyan); background: radial-gradient(circle, rgba(53,214,255,.28), rgba(53,214,255,.04)); display: grid; place-items: center; cursor: pointer; box-shadow: 0 0 20px rgba(53,214,255,.35); transition: transform .15s, box-shadow .15s; position: relative; }
.mic::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid rgba(53,214,255,.35); border-top-color: transparent; border-bottom-color: transparent; }
.mic span { width: 14px; height: 22px; border-radius: 7px; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); position: relative; }
.mic span::after { content: ""; position: absolute; left: -5px; right: -5px; bottom: -8px; height: 10px; border: 2px solid var(--cyan); border-top: 0; border-radius: 0 0 12px 12px; }
.mic.is-on { transform: scale(1.08); animation: pulse 1.2s ease-in-out infinite; } .mic.is-on::before { animation: spin 2s linear infinite; }
.mic.is-speaking { border-color: var(--ok); box-shadow: 0 0 28px rgba(55,227,161,.6); }
@keyframes pulse { 0%,100% { box-shadow: 0 0 20px rgba(53,214,255,.5); } 50% { box-shadow: 0 0 40px rgba(53,214,255,.95); } }

.topbar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.2rem; padding: 0 18px; }
.status { font-family: var(--mono); font-size: .62rem; letter-spacing: .22em; color: var(--dim); white-space: nowrap; } .status b { color: var(--ok); margin-left: .4rem; text-shadow: 0 0 10px rgba(55,227,161,.6); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .5rem; background: var(--dim); } .dot.ok { background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: blink 2.4s ease-in-out infinite; }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.ticker { display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap; font-family: var(--mono); font-size: .58rem; letter-spacing: .16em; color: var(--dim); }
.ticker span { padding: .3rem .6rem; border: 1px solid var(--line); background: rgba(53,214,255,.04); clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); } .ticker b { color: var(--cyan-2); margin-left: .35rem; }
.clock { text-align: right; } .clock small { display: block; font-size: .78rem; color: var(--dim); } .clock b { font-family: var(--mono); font-size: 1.25rem; color: var(--cyan-2); letter-spacing: .08em; text-shadow: 0 0 14px rgba(53,214,255,.5); }

/* ---------- panels ---------- */
.panels { display: grid; grid-template-columns: repeat(12, 1fr); gap: 10px; align-content: start; }
.panel { position: relative; grid-column: span 4; min-width: 0; animation: rise .4s cubic-bezier(.2,.8,.2,1) both; }
.panel:nth-child(2) { animation-delay: .04s; } .panel:nth-child(3) { animation-delay: .08s; } .panel:nth-child(4) { animation-delay: .12s; } .panel:nth-child(5) { animation-delay: .16s; } .panel:nth-child(6) { animation-delay: .2s; } .panel:nth-child(7) { animation-delay: .24s; } .panel:nth-child(8) { animation-delay: .28s; } .panel:nth-child(9) { animation-delay: .32s; } .panel:nth-child(10) { animation-delay: .36s; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
.panel > .in { position: relative; height: 100%; padding: 14px 16px; background: var(--panel); }
.panel > .in::after { content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan), transparent); opacity: .5; }
.panel h2 { margin: 0 0 10px; display: flex; justify-content: space-between; align-items: center; gap: .6rem; font-family: var(--mono); font-size: .6rem; letter-spacing: .22em; color: var(--cyan-2); font-weight: 500; }
.panel h2::before { content: "◢"; font-size: .5rem; color: var(--cyan); margin-right: .2rem; }
.panel h3 { margin: .8rem 0 .3rem; font-size: .95rem; color: #fff; display: flex; justify-content: space-between; } .panel h3 a { color: var(--dim); font-weight: 400; font-size: .78rem; }
.panel--core { grid-column: span 8; } .panel--core > .in { display: grid; grid-template-columns: 1fr 250px; gap: 10px; min-height: 440px; }
.panel--goal { grid-column: span 4; } .panel--chat { grid-column: span 8; }
.live { color: var(--ok); font-size: .55rem; animation: blink 2.4s ease-in-out infinite; }

/* core: canvas sphere + three CSS rings (segment, dashed, thin) that speed up when Jarvis speaks */
.core { position: relative; display: grid; place-items: center; }
.core canvas { width: min(100%, 460px); height: auto; aspect-ratio: 1; position: relative; z-index: 1; }
.ring { position: absolute; border-radius: 50%; pointer-events: none; }
.ring--1 { width: 72%; aspect-ratio: 1; border: 1px dashed rgba(53,214,255,.45); animation: spin 40s linear infinite; }
.ring--2 { width: 80%; aspect-ratio: 1; background: conic-gradient(from 0deg, var(--cyan) 0 12%, transparent 12% 25%, var(--cyan) 25% 30%, transparent 30% 60%, var(--cyan) 60% 68%, transparent 68%); mask: radial-gradient(circle closest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); opacity: .55; animation: spin 18s linear infinite reverse; }
.ring--3 { width: 90%; aspect-ratio: 1; border: 1px solid rgba(53,214,255,.18); border-left-color: var(--cyan); border-right-color: var(--cyan); animation: spin 26s linear infinite; opacity: .7; }
body[data-mode="speaking"] .ring--1 { animation-duration: 6s; } body[data-mode="speaking"] .ring--2 { animation-duration: 3s; opacity: .95; } body[data-mode="speaking"] .ring--3 { animation-duration: 4s; }
body[data-mode="listening"] .ring--2 { animation-duration: 8s; opacity: .8; } body[data-mode="thinking"] .ring--1 { animation-duration: 2.5s; }
.core__label { position: absolute; z-index: 2; text-align: center; pointer-events: none; }
.core__label b { display: block; font-family: var(--mono); font-size: 2.2rem; letter-spacing: .4em; color: #fff; text-shadow: 0 0 24px rgba(53,214,255,.9); margin-left: .4em; font-weight: 700; }
.core__label span { display: block; font-family: var(--mono); font-size: .6rem; letter-spacing: .5em; color: var(--cyan-2); margin-left: .5em; }
.core__label small { display: block; margin-top: .4rem; font-size: .8rem; color: var(--dim); }
.stats { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; align-content: start; }
.stats li { padding: 7px 10px; border: 1px solid var(--line); background: rgba(2,6,15,.45); clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); border-left: 2px solid rgba(53,214,255,.5); }
.stats b { display: block; font-size: .78rem; color: #fff; font-family: var(--mono); font-weight: 500; letter-spacing: .08em; } .stats span { font-size: .85rem; color: var(--dim); }

/* goal: 270° arc + 20 segment bar */
.goal { position: relative; display: grid; place-items: center; }
.goal__arc { width: min(100%, 230px); transform: rotate(135deg); }
.goal__track, .goal__bar { fill: none; stroke-width: 10; stroke-linecap: round; stroke-dasharray: 396 528; }
.goal__track { stroke: rgba(53,214,255,.12); }
.goal__bar { stroke: var(--cyan); stroke-dasharray: calc(var(--p) * 3.96) 528; filter: drop-shadow(0 0 8px rgba(53,214,255,.8)); transition: stroke-dasharray .8s cubic-bezier(.2,.8,.2,1); }
.goal__num { position: absolute; text-align: center; }
.goal__num b { display: block; font-family: var(--mono); font-size: 1.7rem; color: #fff; letter-spacing: .04em; text-shadow: 0 0 16px rgba(53,214,255,.6); }
.goal__num small { display: block; color: var(--dim); font-size: .85rem; } .goal__num em { display: block; font-style: normal; font-family: var(--mono); color: var(--cyan-2); font-size: .8rem; margin-top: .2rem; }
.segs { display: grid; grid-template-columns: repeat(20, 1fr); gap: 3px; margin: 2px 0 10px; }
.segs i { height: 8px; background: rgba(53,214,255,.12); clip-path: polygon(2px 0, 100% 0, calc(100% - 2px) 100%, 0 100%); }
.segs i.on { background: var(--cyan); box-shadow: 0 0 6px rgba(53,214,255,.8); }
.goal__gap { margin: 0 0 8px; font-size: .95rem; color: var(--dim); } .goal__gap b { color: #fff; font-family: var(--mono); font-size: .8rem; }
.goal__foot { display: flex; justify-content: space-between; align-items: center; }

/* intel (calendar + mail) */
.intel__sum { margin: 0 0 8px; font-size: .95rem; color: #fff; }
.intel { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.intel li { display: grid; grid-template-columns: auto 1fr; gap: .2rem .6rem; align-items: baseline; padding: .35rem 0; border-top: 1px solid var(--line); font-size: .9rem; }
.intel time { font-family: var(--mono); font-size: .62rem; color: var(--cyan-2); white-space: nowrap; }
.intel--mail { margin-top: 6px; } .intel--mail li { grid-template-columns: 1fr; gap: 0; } .intel--mail b { color: #fff; font-size: .85rem; } .intel--mail span { color: var(--text); } .intel--mail small { color: var(--dim); font-size: .78rem; }

.feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.feed__item { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 8px 10px; border: 1px solid var(--line); border-left: 3px solid var(--cyan); background: rgba(2,6,15,.45); clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); }
.feed__item b { font-size: .9rem; color: #fff; font-weight: 500; } .feed__item small { color: var(--dim); font-size: .78rem; }
.feed__item em { grid-row: 1 / span 2; align-self: center; font-style: normal; font-family: var(--mono); font-size: .5rem; letter-spacing: .14em; padding: .25rem .4rem; background: rgba(53,214,255,.12); color: var(--cyan-2); }
.feed__item.warn { border-left-color: var(--warn); } .feed__item.warn em { color: var(--warn); background: rgba(255,179,71,.12); }
.feed__item.live { border-left-color: var(--ok); } .feed__item.live em { color: var(--ok); background: rgba(55,227,161,.12); }
.tasks { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow: auto; }
.task label { display: grid; grid-template-columns: auto auto auto 1fr; gap: .5rem; align-items: baseline; padding: .45rem 0; border-top: 1px solid var(--line); cursor: pointer; font-size: .9rem; }
.task input { accent-color: var(--cyan); } .task .due { font-family: var(--mono); font-size: .62rem; color: var(--dim); } .task b { color: #fff; } .task span:last-child { color: var(--dim); }
.task.overdue .due { color: var(--bad); font-weight: 700; } .task.today .due { color: var(--cyan); font-weight: 700; } .task.done { opacity: .4; text-decoration: line-through; }
.add { display: grid; grid-template-columns: auto 1fr 2fr auto; gap: .4rem; margin-bottom: .6rem; }
.add input, .chat__form textarea { font: inherit; color: var(--text); background: rgba(2,6,15,.6); border: 1px solid var(--line-2); padding: .45rem .6rem; min-width: 0; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 10px; border-left: 1px solid var(--line-2); display: grid; gap: 8px; }
.timeline li { display: grid; grid-template-columns: 48px 1fr auto; gap: .6rem; align-items: baseline; font-size: .9rem; position: relative; }
.timeline li::before { content: ""; position: absolute; left: -14px; top: .45em; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.timeline time { font-family: var(--mono); font-size: .62rem; color: var(--cyan-2); } .timeline em { font-style: normal; font-size: .75rem; color: var(--dim); }
.qcs { display: grid; gap: 6px; }
.qc { display: block; width: 100%; text-align: left; font: inherit; font-size: .92rem; font-weight: 500; color: var(--text); padding: .5rem .8rem; border: 1px solid var(--line-2); background: linear-gradient(90deg, rgba(53,214,255,.12), rgba(53,214,255,.04)); cursor: pointer; transition: background .15s, box-shadow .15s, transform .1s; clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px)); letter-spacing: .02em; }
.qc:hover { background: rgba(53,214,255,.2); box-shadow: inset 0 0 14px rgba(53,214,255,.25); } .qc:active { transform: translateY(1px); }
.qc.small { width: auto; padding: .2rem .6rem; font-size: .78rem; }
.gauges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gauge { aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; text-align: center; background: conic-gradient(var(--cyan) calc(var(--v) * 1%), rgba(53,214,255,.12) 0); position: relative; }
.gauge::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--bg-2); } .gauge::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px dashed rgba(53,214,255,.25); }
.gauge b, .gauge span { position: relative; } .gauge b { font-family: var(--mono); font-size: .85rem; color: #fff; } .gauge span { font-family: var(--mono); font-size: .5rem; letter-spacing: .15em; color: var(--dim); }
table { width: 100%; border-collapse: collapse; font-size: .9rem; } th { text-align: left; font-weight: 500; color: var(--dim); font-family: var(--mono); font-size: .55rem; letter-spacing: .14em; padding: .25rem 0; border-bottom: 1px solid var(--line); } td { padding: .4rem 0; border-bottom: 1px solid var(--line); vertical-align: top; } td b { color: #fff; } td small { color: var(--dim); }
.tag { display: inline-block; font-family: var(--mono); font-size: .52rem; letter-spacing: .08em; padding: .2rem .45rem; background: rgba(53,214,255,.12); color: var(--cyan-2); white-space: nowrap; clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px); }
.tag.st-won, .tag.st-confirmed { color: var(--ok); background: rgba(55,227,161,.12); } .tag.st-lost, .tag.st-declined, .tag.st-cancelled { color: var(--bad); background: rgba(255,95,109,.12); }
.rows { list-style: none; margin: 0; padding: 0; } .rows li { display: grid; grid-template-columns: auto 1fr 1fr auto; gap: .5rem; align-items: baseline; padding: .35rem 0; border-top: 1px solid var(--line); font-size: .9rem; } .rows b { color: #fff; } .rows small { color: var(--dim); }
.chat { display: grid; gap: 8px; max-height: 320px; overflow: auto; padding-right: 4px; }
.msg { max-width: 82ch; padding: .55rem .8rem; background: rgba(2,6,15,.6); border: 1px solid var(--line); white-space: pre-wrap; font-size: .95rem; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); }
.msg.jarvis { border-left: 2px solid var(--cyan); }
.msg.you { margin-left: auto; background: rgba(53,214,255,.14); border-color: var(--line-2); } .msg.sys { background: transparent; border: 0; color: var(--dim); font-size: .82rem; }
.msg small { display: block; font-family: var(--mono); font-size: .5rem; letter-spacing: .1em; color: var(--dim); margin-bottom: .2rem; }
.chat__form { display: grid; grid-template-columns: 1fr auto auto; gap: .5rem; align-items: center; margin-top: .6rem; } .chat__form textarea { resize: vertical; }
.bottombar { grid-column: 2; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: 0 18px; }
.chips { display: flex; gap: .5rem; font-family: var(--mono); font-size: .55rem; letter-spacing: .1em; color: var(--dim); } .chips span { padding: .3rem .55rem; border: 1px solid var(--line); clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px); } .chips:last-child { justify-content: flex-end; }
.talk { display: flex; align-items: center; gap: 1rem; padding: .5rem 1.6rem; border: 1px solid var(--cyan); background: linear-gradient(90deg, rgba(53,214,255,.18), rgba(53,214,255,.06), rgba(53,214,255,.18)); color: #fff; cursor: pointer; box-shadow: 0 0 22px rgba(53,214,255,.35); font: inherit; clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%); }
.talk b { display: block; font-family: var(--mono); letter-spacing: .24em; font-size: .72rem; } .talk small { display: block; color: var(--cyan-2); font-size: .78rem; }
.talk__wave { width: 60px; height: 18px; background: repeating-linear-gradient(90deg, var(--cyan) 0 2px, transparent 2px 5px); mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); opacity: .5; }
.talk.is-on { animation: pulse 1.2s ease-in-out infinite; }

/* login */
.login { display: grid; place-items: center; min-height: 100vh; }
.login__box { position: relative; z-index: 1; display: grid; gap: .8rem; width: min(380px, 90vw); padding: 1.8rem; background: var(--panel); border: 1px solid var(--line-2); box-shadow: 0 0 40px rgba(53,214,255,.15); clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); }
.login__box h1 { margin: 0; font-size: 1.1rem; color: #fff; font-weight: 500; } .login__box .brand { font-family: var(--mono); letter-spacing: .35em; color: var(--cyan-2); margin: 0; font-size: .8rem; }
.login__box input { font: inherit; padding: .7rem .9rem; border: 1px solid var(--line-2); background: rgba(2,6,15,.6); color: var(--text); letter-spacing: .1em; }
.login__box .btn { font: inherit; font-family: var(--mono); font-size: .7rem; letter-spacing: .2em; padding: .8rem; border: 1px solid var(--cyan); background: rgba(53,214,255,.15); color: #fff; cursor: pointer; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
.err { color: var(--bad); margin: 0; font-size: .85rem; }

@media (max-width: 1100px) { .panel { grid-column: span 6; } .panel--core, .panel--chat { grid-column: span 12; } .panel--goal { grid-column: span 6; } }
@media (max-width: 760px) { .hud { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto; } .side { grid-row: auto; flex-direction: row; flex-wrap: wrap; } .menu { display: flex; flex-wrap: wrap; } .voicebox { margin: 0; flex: 1 1 100%; } .panel, .panel--goal { grid-column: span 12; } .panel--core > .in { grid-template-columns: 1fr; } .bottombar { grid-column: 1; grid-template-columns: 1fr; padding: 10px; } .chips, .ticker { display: none; } .topbar { grid-template-columns: 1fr auto; height: auto; padding: 8px 12px; } }