:root { --ink:#0B0909; --navy:#062045; --white:#FFFFFF; --lime:#CDFC8A; --canary:#FFFC8C; --muted:#61718B; --line:rgba(0,0,0,.11); --soft:#F6F7F3; --sans:"Manrope",Arial,sans-serif; --mono:"DM Mono",ui-monospace,monospace; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { min-height:100vh; margin:0; background:var(--white); color:var(--ink); font-family:var(--sans); } button,input,select { font:inherit; } button { cursor:pointer; } button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible { outline:3px solid var(--lime); outline-offset:3px; }
.site-header { position:sticky; z-index:10; top:0; height:76px; padding:0 clamp(22px,5vw,78px); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-bottom:1px solid var(--line); background:rgba(255,255,255,.95); backdrop-filter:blur(12px); }.login-header { grid-template-columns:1fr auto; }.brand { color:var(--ink); font-size:26px; font-weight:800; letter-spacing:-1.9px; text-decoration:none; }.brand span { color:#75ad29; }.site-header nav { display:flex; height:100%; align-items:center; gap:28px; }.site-header nav a { position:relative; height:100%; display:grid; place-items:center; color:var(--muted); font-size:12px; font-weight:700; text-decoration:none; }.site-header nav a.active { color:var(--ink); }.site-header nav a.active::after { position:absolute; right:0; bottom:0; left:0; height:3px; background:var(--lime); content:""; }.header-actions { justify-self:end; display:flex; align-items:center; gap:17px; }.connection-status { display:flex; align-items:center; gap:8px; color:var(--muted); font-family:var(--mono); font-size:10px; }.connection-status i { width:8px; height:8px; background:#9CA6B6; border-radius:50%; }.connection-status.online i { background:#65A51E; }.connection-status.offline i { background:#CE4C4C; }.sign-out { padding:0; border:0; background:transparent; color:var(--navy); font-family:var(--mono); font-size:10px; text-decoration:underline; text-underline-offset:4px; }
main { max-width:1440px; margin:auto; }.page { min-height:calc(100vh - 76px); padding:clamp(52px,8vw,118px) clamp(24px,8vw,130px); }.kicker { margin:0 0 17px; color:var(--navy); font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; }.account-page { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(350px,.72fr); align-items:center; gap:clamp(58px,10vw,170px); background:linear-gradient(90deg,var(--white) 0%,var(--white) 66%,var(--soft) 66%,var(--soft) 100%); }.page h1 { max-width:730px; margin:0; font-size:clamp(43px,5.7vw,82px); line-height:.98; letter-spacing:-.075em; }.page h1 em { color:var(--navy); font-weight:500; }.page-intro > p:not(.kicker),.page-heading > p { max-width:500px; margin:27px 0 0; color:var(--navy); font-size:15px; line-height:1.72; }.quiet-list { margin:42px 0 0; padding:0; display:grid; gap:12px; list-style:none; color:var(--navy); font-size:13px; }.quiet-list li { display:flex; gap:11px; align-items:center; }.quiet-list li::before { width:8px; height:8px; flex:none; background:var(--lime); content:""; }
.auth-panel { background:var(--white); border:1px solid var(--ink); box-shadow:9px 9px 0 var(--lime); }.form-tabs { display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--line); }.form-tabs button { min-height:58px; border:0; border-bottom:3px solid transparent; background:var(--white); color:var(--muted); font-size:13px; font-weight:700; }.form-tabs button[aria-selected="true"] { border-bottom-color:var(--ink); color:var(--ink); }.auth-form,.stack-form { padding:29px; }.field { display:grid; gap:8px; margin-bottom:18px; }.field label,.stack-form label,.device-finder > label { color:var(--navy); font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; }.field input,.stack-form input,.stack-form select,.input-action input { width:100%; min-height:47px; margin-top:8px; padding:11px 13px; border:1px solid var(--line); border-radius:0; background:var(--white); color:var(--ink); font-size:14px; }.field input:focus,.stack-form input:focus,.stack-form select:focus,.input-action input:focus { border-color:var(--navy); box-shadow:3px 3px 0 var(--lime); outline:0; }.primary-button,.secondary-button { min-height:47px; padding:0 19px; border:1px solid var(--ink); border-radius:0; background:var(--ink); color:var(--white); font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.04em; }.primary-button:hover { background:var(--lime); color:var(--ink); }.form-message { min-height:18px; margin:15px 0 0; color:var(--navy); font-size:12px; line-height:1.5; }.form-message.error { color:#AD2424; }.early-access { margin:0 29px 28px; padding-top:21px; border-top:1px solid var(--line); }.early-access p { margin:0 0 9px; color:var(--navy); font-size:12px; line-height:1.6; }.text-button { padding:0; border:0; background:transparent; color:var(--ink); font-family:var(--mono); font-size:11px; font-weight:500; text-decoration:underline; text-underline-offset:4px; }.text-button span { margin-left:7px; text-decoration:none; }
.page-heading { max-width:840px; }.device-page,.conversation-page { background:var(--white); }.device-layout { margin-top:68px; display:grid; grid-template-columns:minmax(290px,.75fr) minmax(0,1.25fr); border-top:2px solid var(--ink); }.device-finder { padding:28px 34px 34px 0; border-right:1px solid var(--line); }.input-action { margin-top:11px; display:flex; }.input-action input { margin:0; }.input-action .primary-button { flex:none; min-height:47px; white-space:nowrap; }.form-note { max-width:330px; margin:13px 0 0; color:var(--muted); font-size:11px; line-height:1.6; }.device-state { min-height:300px; padding:42px clamp(28px,5vw,75px); display:flex; align-items:flex-start; gap:21px; background:var(--soft); }.state-mark { width:39px; height:39px; flex:none; display:grid; place-items:center; background:var(--lime); color:var(--ink); font-family:var(--mono); font-size:24px; }.device-state h2,.conversation-detail h2 { margin:0; font-size:25px; letter-spacing:-.05em; }.device-state p,.conversation-detail > p:not(.kicker) { max-width:430px; margin:10px 0 0; color:var(--navy); font-size:13px; line-height:1.7; }.device-summary { width:100%; }.device-name { margin:0; font-size:26px; letter-spacing:-.05em; }.device-last-active { margin:7px 0 31px; color:var(--muted); font-size:12px; }.metrics { display:grid; grid-template-columns:1fr 1fr; gap:25px 38px; }.metric-label { display:flex; justify-content:space-between; gap:10px; margin-bottom:8px; color:var(--navy); font-family:var(--mono); font-size:10px; }.meter { height:8px; background:var(--white); }.meter i { display:block; height:100%; background:var(--navy); }.metric-value { margin-top:8px; color:var(--muted); font-size:11px; }
.device-layout.single-device { grid-template-columns:1fr; }.device-picker { border-right:1px solid var(--line); }.device-choice { width:100%; padding:17px 25px 17px 0; display:grid; gap:5px; border:0; border-bottom:1px solid var(--line); border-left:4px solid transparent; background:var(--white); color:var(--ink); text-align:left; }.device-choice:hover,.device-choice.active { padding-left:12px; background:var(--soft); }.device-choice.active { border-left-color:var(--lime); }.device-choice strong { overflow:hidden; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }.device-choice span { color:var(--muted); font-family:var(--mono); font-size:10px; }
.split-heading { max-width:none; display:flex; justify-content:space-between; align-items:flex-end; gap:24px; }.secondary-button { background:var(--white); color:var(--ink); }.secondary-button:hover { background:var(--canary); }.secondary-button span { margin-left:6px; }.conversation-layout { margin-top:60px; display:grid; grid-template-columns:minmax(250px,.6fr) minmax(0,1.4fr); min-height:440px; border-top:2px solid var(--ink); }.conversation-list { border-right:1px solid var(--line); }.list-label { display:flex; justify-content:space-between; padding:17px 24px 15px 0; border-bottom:1px solid var(--line); color:var(--navy); font-family:var(--mono); font-size:10px; letter-spacing:.07em; text-transform:uppercase; }.empty-copy { padding:25px 24px 25px 0; color:var(--muted); font-size:12px; line-height:1.6; }.conversation-item { width:100%; padding:17px 25px 17px 0; display:grid; gap:5px; border:0; border-bottom:1px solid var(--line); background:var(--white); color:var(--ink); text-align:left; }.conversation-item:hover,.conversation-item.active { padding-left:12px; background:var(--soft); }.conversation-item.active { border-left:4px solid var(--lime); }.conversation-item strong { overflow:hidden; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }.conversation-item span { color:var(--muted); font-family:var(--mono); font-size:10px; }.conversation-detail { padding:53px clamp(28px,6vw,95px); }.summary-head { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-bottom:24px; border-bottom:1px solid var(--line); }.summary-head h2 { max-width:500px; }.summary-date { color:var(--muted); font-family:var(--mono); font-size:10px; }.summary-copy { max-width:590px; margin:27px 0 0; color:var(--navy); font-size:15px; line-height:1.85; white-space:pre-wrap; }.summary-copy.loading { color:var(--muted); }
.transcript { margin:0; padding:0; list-style:none; }.transcript li { padding:21px 0; display:grid; grid-template-columns:76px 58px minmax(0,1fr); gap:15px; border-bottom:1px solid var(--line); }.transcript time,.entry-offset { padding-top:2px; color:var(--navy); font-family:var(--mono); font-size:10px; white-space:nowrap; }.entry-offset { color:var(--muted); }.transcript p { margin:0; color:var(--ink); font-size:13px; line-height:1.7; }.transcript .empty-copy { display:block; padding-left:0; }
.summary-request { margin:29px 0 35px; padding:24px 0; display:flex; justify-content:space-between; align-items:flex-end; gap:30px; border-bottom:1px solid var(--line); }.summary-request .kicker { margin-bottom:10px; }.summary-request h3,.conversation-summary h3 { margin:0; font-size:20px; letter-spacing:-.045em; }.summary-request p:not(.kicker) { max-width:420px; margin:8px 0 0; color:var(--navy); font-size:13px; line-height:1.65; }.summary-request .primary-button { flex:none; }.conversation-summary { margin:28px 0 35px; padding:0 0 2px 22px; border-left:4px solid var(--lime); }.conversation-summary .kicker { margin-bottom:9px; }.summary-description { max-width:610px; margin:10px 0 18px; color:var(--navy); font-size:14px; font-weight:600; line-height:1.65; }.summary-body { max-width:650px; }.summary-body p { margin:0 0 14px; color:var(--navy); font-size:13px; line-height:1.8; }.full-conversation > .kicker { margin-bottom:5px; }
dialog { width:min(480px,calc(100% - 36px)); padding:35px; border:1px solid var(--ink); border-radius:0; box-shadow:10px 10px 0 var(--lime); } dialog::backdrop { background:rgba(6,32,69,.36); backdrop-filter:blur(3px); }.dialog-close { position:absolute; top:13px; right:17px; width:31px; height:31px; border:0; background:transparent; color:var(--ink); font-size:25px; line-height:1; } dialog h2 { margin:0; font-size:34px; letter-spacing:-.06em; } dialog > p:not(.kicker) { margin:11px 0 0; color:var(--navy); font-size:13px; line-height:1.7; } dialog .stack-form { padding:25px 0 0; } .stack-form label { display:grid; gap:0; margin-bottom:15px; }.stack-form input,.stack-form select { margin-top:8px; }.stack-form .primary-button { width:100%; margin-top:7px; }
footer { min-height:90px; padding:0 clamp(24px,8vw,130px); display:flex; justify-content:space-between; align-items:center; background:var(--ink); color:var(--white); font-family:var(--mono); font-size:11px; } footer span:first-child { font-family:var(--sans); font-size:18px; font-weight:800; letter-spacing:-1px; } footer span:last-child { color:#C9D0C6; }
@media (max-width:780px) { .site-header { grid-template-columns:1fr auto; height:auto; min-height:66px; padding:0 20px; }.site-header nav { order:3; grid-column:1 / -1; height:44px; gap:24px; }.connection-status { font-size:9px; }.page { min-height:calc(100vh - 110px); padding:57px 25px; }.account-page { display:block; background:var(--white); }.auth-panel { margin-top:53px; }.device-layout,.conversation-layout { margin-top:43px; grid-template-columns:1fr; }.device-finder,.conversation-list { padding:25px 0; border-right:0; border-bottom:1px solid var(--line); }.device-state { padding:34px 0; background:var(--white); }.input-action { display:grid; gap:10px; }.input-action .primary-button { width:100%; }.split-heading { display:block; }.split-heading .secondary-button { margin-top:22px; }.conversation-detail { padding:38px 0; }.conversation-item { padding-right:0; }.list-label { padding-right:0; }.empty-copy { padding-left:0; }.metrics { gap:22px; } footer { padding:0 25px; } }
@media (max-width:420px) { .site-header nav { justify-content:space-between; gap:0; }.page h1 { font-size:42px; }.auth-form,.stack-form { padding:23px; }.early-access { margin:0 23px 23px; } footer { align-items:flex-start; justify-content:center; flex-direction:column; gap:5px; } }
@media (max-width:780px) { .device-picker { padding:25px 0; border-right:0; border-bottom:1px solid var(--line); }.device-choice { padding-right:0; } }

/* Working pages: surface useful content in the first viewport. */
.device-page,.conversation-page { padding-top:clamp(48px,5vw,78px); padding-bottom:clamp(58px,6vw,90px); }
.device-page h1,.conversation-page h1 { font-size:clamp(42px,4.5vw,64px); }
.device-page .page-heading > p,.conversation-page .page-heading > p { margin-top:20px; }
.device-layout { margin-top:40px; }
.conversation-layout { margin-top:38px; grid-template-columns:minmax(290px,.68fr) minmax(0,1.32fr); }
.device-state { min-height:250px; padding:34px clamp(28px,4vw,58px); }
.device-last-active { margin-bottom:24px; }
.metric-label { font-size:11px; }
.metric-value { font-size:12px; }
.conversation-detail { padding:39px clamp(30px,5vw,70px); }
.conversation-item strong { font-size:14px; }
.conversation-item span,.summary-date,.transcript time,.entry-offset { font-size:11px; }
.transcript p { font-size:14px; }

@media (max-width:780px) {
  .device-page,.conversation-page { padding-top:45px; }
  .device-page h1,.conversation-page h1 { font-size:clamp(40px,11vw,54px); }
  .device-layout,.conversation-layout { margin-top:34px; }
  .conversation-detail { padding:32px 0; }
}