:root {
  --ink: #171713;
  --paper: #f4f0e7;
  --muted: #706e67;
  --line: rgba(23, 23, 19, .18);
  --acid: #d9ff47;
  --active-color: #f2c84b;
  --violet: #9c7cff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Manrope, sans-serif; }
button, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }

.grain { position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E"); }
.shell { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.topbar { height: 78px; padding: 0 max(20px, calc((100vw - 1180px) / 2)); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); position: relative; z-index: 10; }
.brand { color: inherit; text-decoration: none; font-weight: 800; letter-spacing: .08em; font-size: 13px; display: flex; align-items: center; gap: 11px; }
.brand-mark { width: 30px; height: 30px; border: 1px solid var(--ink); border-radius: 50%; display: flex; align-items: end; justify-content: center; gap: 2px; padding-bottom: 7px; }
.brand-mark i { width: 2px; background: var(--ink); display: block; }
.brand-mark i:nth-child(1) { height: 7px; }.brand-mark i:nth-child(2) { height: 13px; }.brand-mark i:nth-child(3) { height: 9px; }
.top-actions { display: flex; align-items: center; gap: 12px; }
.status-pill { border: 1px solid var(--line); border-radius: 99px; padding: 9px 13px; display: flex; align-items: center; gap: 8px; color: var(--muted); font: 500 11px DM Mono, monospace; text-transform: uppercase; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #aaa; }.status-pill.connected .status-dot { background: #48b86b; box-shadow: 0 0 0 4px rgba(72,184,107,.15); }
.button { border: 1px solid var(--ink); border-radius: 2px; min-height: 46px; padding: 0 19px; display: inline-flex; align-items: center; justify-content: center; gap: 18px; text-decoration: none; font-weight: 700; font-size: 13px; cursor: pointer; transition: transform .16s, box-shadow .16s, background .16s; }
.button:hover { transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--ink); }.button:disabled { cursor: wait; opacity: .65; transform: none; box-shadow: none; }
.button-dark { background: var(--ink); color: var(--paper); }.button-dark:hover { box-shadow: 4px 4px 0 var(--violet); }
.button-accent { background: var(--acid); }.button-ghost { background: transparent; }

.hero { min-height: 690px; padding: 84px 0 72px; display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 36px; }
.eyebrow { font: 500 11px DM Mono, monospace; letter-spacing: .12em; margin: 0 0 22px; }
.hero h1 { margin: 0; font-size: clamp(52px, 6.6vw, 94px); line-height: .91; letter-spacing: -.06em; max-width: 780px; }
.hero h1 em { font-family: Georgia, serif; font-weight: 400; color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
.hero-deck { font-size: 16px; line-height: 1.7; max-width: 620px; color: #4f4d47; margin: 30px 0; }
.hero-buttons { display: flex; gap: 11px; flex-wrap: wrap; }
.trust-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 38px; font: 500 9px DM Mono, monospace; letter-spacing: .08em; color: var(--muted); }
.hero-orbit { min-height: 520px; position: relative; display: grid; place-items: center; overflow: hidden; }
.orbit-ring { position: absolute; border: 1px solid var(--line); border-radius: 50%; }.ring-one { width: 410px; height: 410px; }.ring-two { width: 300px; height: 300px; border-style: dashed; animation: spin 28s linear infinite; }
.orb { width: 212px; height: 212px; border-radius: 50%; background: var(--violet); border: 2px solid var(--ink); box-shadow: 15px 15px 0 var(--ink); display: grid; place-items: center; position: relative; }
.orb:before,.orb:after { content:""; position:absolute; border:1px solid var(--ink); border-radius:50%; }.orb:before { inset:26px; }.orb:after { inset:54px; background: var(--acid); }
.orb-eye { z-index: 1; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); }
.signal-card { position: absolute; border: 1px solid var(--ink); background: var(--paper); padding: 14px; width: 126px; display: flex; justify-content: space-between; font: 500 9px DM Mono, monospace; box-shadow: 5px 5px 0 var(--ink); }.signal-card b { color: #8a31ea; }.signal-a { top: 78px; left: 18px; transform: rotate(-4deg); }.signal-b { right: 10px; bottom: 112px; transform: rotate(3deg); }
.frequency { position: absolute; bottom: 54px; left: 50%; transform: translateX(-50%); height: 50px; display: flex; align-items: center; gap: 7px; }.frequency i { display:block; width: 4px; height: 16px; background: var(--ink); animation: pulse 1.15s ease-in-out infinite alternate; }.frequency i:nth-child(2n){animation-delay:.2s}.frequency i:nth-child(3n){animation-delay:.4s}.frequency i:nth-child(4n){animation-delay:.6s}
@keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse { to { height: 47px; } }

.studio { padding: 90px 0 110px; border-top: 1px solid var(--line); }
.section-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; margin-bottom: 44px; }.section-heading h2 { font-size: clamp(38px,5vw,66px); line-height: 1; letter-spacing: -.05em; margin: 0; }.section-heading>p { color: var(--muted); line-height: 1.7; max-width: 540px; }
.character-grid { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--ink); margin-bottom: 24px; }
.character-card { min-height: 220px; border: 0; border-right: 1px solid var(--ink); background: transparent; text-align: left; padding: 23px; position: relative; cursor: pointer; transition: background .2s; }.character-card:last-child{border-right:0}.character-card:hover,.character-card.active{background:var(--character-color)}
.character-card .card-index { position:absolute; top:18px; right:19px; font:500 10px DM Mono,monospace; }.card-glyph { display:grid; place-items:center; width:66px; height:66px; border:1px solid var(--ink); border-radius:50%; font-size:27px; margin-bottom:27px; background:var(--paper); }.character-card strong { display:block; font-size:24px; text-transform:uppercase; }.character-card small { color:#555; }.card-arrow { position:absolute; right:20px; bottom:18px; font-size:20px; }
.console { border: 1px solid var(--ink); display: grid; grid-template-columns: 255px 1fr; min-height: 590px; box-shadow: 9px 9px 0 var(--ink); }
.console-sidebar { padding: 26px; border-right: 1px solid var(--ink); background: #eae6dc; display:flex; flex-direction:column; }.active-portrait { width:100%; aspect-ratio:1; border:1px solid var(--ink); display:grid; place-items:center; font-size:72px; margin-bottom:24px; }
.console-kicker { font:500 9px DM Mono,monospace; letter-spacing:.15em; margin:0 0 5px; }.console-sidebar h3 { margin:0; font-size:38px; letter-spacing:-.04em; }.console-sidebar>p:not(.console-kicker){color:var(--muted);margin:3px 0 25px}.voice-meta {border-top:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:10px;padding-top:18px;font:500 10px DM Mono,monospace}.voice-meta span{color:var(--muted)}
.text-button {border:0;background:transparent;text-decoration:underline;text-underline-offset:4px;font-size:11px;padding:0;cursor:pointer;text-align:left;margin-top:auto}.text-button:hover{color:#6f3bd2}
.conversation-panel { display:grid; grid-template-rows:1fr auto; min-width:0; background:#fbf8f1; }.conversation { padding:30px; overflow:auto; max-height:410px; display:flex; flex-direction:column; gap:20px; }.message{max-width:78%}.message.user{align-self:flex-end}.message-label{display:block;font:500 9px DM Mono,monospace;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:5px}.message p{margin:0;border:1px solid var(--ink);padding:15px 17px;line-height:1.55;background:white;box-shadow:3px 3px 0 var(--ink)}.message.user p{background:var(--active-color)}.message.system p{background:#ffd9d4}.composer{padding:21px;border-top:1px solid var(--ink);background:var(--paper)}.composer>label{display:block;font:500 9px DM Mono,monospace;letter-spacing:.1em;margin-bottom:8px}.composer textarea{width:100%;border:1px solid var(--ink);resize:vertical;background:white;padding:14px;min-height:70px;outline:0}.composer textarea:focus{box-shadow:3px 3px 0 var(--active-color)}.composer-row{display:flex;align-items:center;gap:14px;margin-top:12px}.record-wrap{display:flex;align-items:center;gap:9px;margin-right:auto;font-size:10px;color:var(--muted)}.record-button{width:35px;height:35px;border-radius:50%;border:1px solid var(--ink);background:white;display:grid;place-items:center;cursor:pointer}.record-button span{width:11px;height:11px;border-radius:50%;background:#ff5c4d}.record-button.recording{animation:recording 1s infinite;background:#ffd3ce}.record-button.recording span{border-radius:2px}.speak-toggle{display:flex;align-items:center;gap:7px;font-size:10px;cursor:pointer}.speak-toggle input{position:absolute;opacity:0}.speak-toggle span{width:28px;height:16px;border:1px solid var(--ink);border-radius:20px;position:relative;background:#bbb}.speak-toggle span:after{content:"";position:absolute;width:10px;height:10px;border-radius:50%;background:var(--ink);left:2px;top:2px;transition:.2s}.speak-toggle input:checked+span{background:var(--acid)}.speak-toggle input:checked+span:after{left:14px}.send-button{min-height:40px}.text-button.centered{display:block;margin:15px auto 0}.full-button{width:100%;margin-top:20px}@keyframes recording{50%{box-shadow:0 0 0 6px rgba(255,92,77,.18)}}

.under-hood { width:100%; max-width:none; background:var(--ink); color:var(--paper); padding:100px max(20px,calc((100vw - 1180px)/2)); }.section-heading.inverse>p{color:#aaa}.pipeline{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;border-top:1px solid #555;padding-top:36px;align-items:center}.pipeline article{padding:12px 30px 12px 0}.pipeline article span{font:500 10px DM Mono,monospace;color:var(--acid);display:block;margin-bottom:28px}.pipeline article b{font-size:22px}.pipeline article p{color:#aaa;line-height:1.6;max-width:260px}.pipeline>i{font-style:normal;color:var(--acid);font-size:28px}
.duplicate{padding:105px 0;display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:start}.duplicate h2{font-size:clamp(38px,5vw,62px);line-height:1.04;letter-spacing:-.05em;margin:0}.duplicate ol{list-style:none;padding:0;margin:0;counter-reset:steps}.duplicate li{border-top:1px solid var(--line);padding:18px 0;display:grid;grid-template-columns:35px 1fr;line-height:1.5;font-size:14px}.duplicate li span{font:500 10px DM Mono,monospace}.duplicate code{font-family:DM Mono,monospace;font-size:11px;background:#ded9ce;padding:2px 4px}.duplicate .button{grid-column:2;justify-self:start}
footer{border-top:1px solid var(--line);padding:26px 0}.footer-inner{display:flex;justify-content:space-between;align-items:center}.footer-inner div{display:flex;gap:16px;align-items:center}.footer-inner span{font-size:11px;color:var(--muted)}.footer-inner a{color:inherit;font-size:12px}

dialog{width:min(520px,calc(100% - 28px));border:1px solid var(--ink);padding:36px;background:var(--paper);box-shadow:12px 12px 0 var(--ink)}dialog::backdrop{background:rgba(23,23,19,.78);backdrop-filter:blur(3px)}dialog h2{font-size:38px;letter-spacing:-.04em;margin:0 0 15px}.dialog-close{position:absolute;right:17px;top:13px;border:0;background:transparent;font-size:28px;cursor:pointer}.dialog-copy{line-height:1.65;color:var(--muted)}.permission-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);margin:25px 0}.permission-grid span{padding:13px 8px;border-right:1px solid var(--line);text-align:center;font:500 9px DM Mono,monospace}.permission-grid span:last-child{border-right:0}.permission-grid b{display:block;font:700 22px Manrope,sans-serif;color:#6f3bd2}.device-panel{text-align:center;border:1px solid var(--ink);padding:22px;background:white}.device-panel small{font:500 9px DM Mono,monospace;letter-spacing:.1em}.device-panel strong{font:700 34px DM Mono,monospace;letter-spacing:.13em;display:block;margin:12px 0}.device-panel p{color:var(--muted);font-size:11px}.dialog-error{color:#bd2c21;font-size:12px;min-height:16px}.toast{position:fixed;z-index:200;left:50%;bottom:25px;transform:translate(-50%,140%);background:var(--ink);color:var(--paper);padding:13px 18px;border:1px solid var(--paper);font-size:12px;box-shadow:5px 5px 0 var(--violet);transition:.28s}.toast.show{transform:translate(-50%,0)}.toast[data-tone="success"]{box-shadow:5px 5px 0 #58c47b}.toast[data-tone="error"]{box-shadow:5px 5px 0 #ff6255}

@media (max-width: 860px){.hero{grid-template-columns:1fr;padding-top:58px}.hero-orbit{min-height:430px}.section-heading,.duplicate{grid-template-columns:1fr;gap:28px}.character-grid{grid-template-columns:1fr}.character-card{min-height:150px;border-right:0;border-bottom:1px solid var(--ink)}.character-card:last-child{border-bottom:0}.card-glyph{width:52px;height:52px;margin-bottom:14px}.console{grid-template-columns:1fr;box-shadow:6px 6px 0 var(--ink)}.console-sidebar{border-right:0;border-bottom:1px solid var(--ink);display:grid;grid-template-columns:90px 1fr;column-gap:18px}.active-portrait{grid-row:1/5;width:90px}.voice-meta,.console-sidebar>.text-button{grid-column:2}.pipeline{grid-template-columns:1fr}.pipeline>i{transform:rotate(90deg);justify-self:center}.duplicate .button{grid-column:1}.topbar{height:68px}.status-pill{display:none}}
@media (max-width:560px){.shell{width:min(100% - 26px,1180px)}.hero h1{font-size:49px}.hero-orbit{min-height:360px}.ring-one{width:320px;height:320px}.ring-two{width:240px;height:240px}.orb{width:170px;height:170px}.signal-a{left:0}.signal-b{right:0;bottom:70px}.console-sidebar{grid-template-columns:70px 1fr;padding:18px}.active-portrait{width:70px;font-size:36px}.conversation{padding:18px}.message{max-width:92%}.composer-row{flex-wrap:wrap}.send-button{width:100%}.permission-grid{grid-template-columns:1fr}.permission-grid span{border-right:0;border-bottom:1px solid var(--line)}.footer-inner,.footer-inner div{align-items:flex-start;flex-direction:column}.top-actions .button{padding:0 12px}.brand{font-size:11px}}
@media (prefers-reduced-motion: reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}