@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Share+Tech+Mono&display=swap');
:root{--bg:#030b11;--panel:#061720;--cyan:#8ceaff;--blue:#35c9f6;--muted:#8aa8b4;--line:rgba(111,220,255,.4);--cream:#d6d2bd}
*{box-sizing:border-box}
html{min-height:100%;background:var(--bg)}
body{margin:0;color:#d8f7ff;background:radial-gradient(ellipse at 75% 38%,#0b3445 0,#061923 28%,#02080d 72%);font-family:'IBM Plex Mono',monospace;min-height:100vh;overflow-x:hidden}
.grain{position:fixed;inset:0;pointer-events:none;opacity:.1;z-index:4;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='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E")}
.layout{display:grid;grid-template-columns:minmax(310px, .88fr) minmax(420px,1.12fr);max-width:1500px;min-height:calc(100vh - 35px);margin:auto;position:relative}
.left-panel{padding:5vh clamp(22px,4vw,64px) 40px;position:relative;z-index:2;display:flex;flex-direction:column}
.masthead{margin-bottom:30px}
.eyebrow{font-size:10px;letter-spacing:.24em;color:#6dabbc;margin:0 0 10px}
h1{font-size:clamp(54px,7vw,92px);line-height:.95;letter-spacing:.12em;font-weight:400;color:#b6f2ff;text-shadow:0 0 22px #42bfe877;margin:0 0 12px}
.subtitle,.byline{font-family:'Share Tech Mono',monospace;letter-spacing:.08em;color:#a5dce9;font-size:clamp(11px,1.3vw,15px);margin:5px 0}
.history{display:flex;flex-direction:column;gap:15px}
.exchange{border:1px solid var(--line);border-radius:8px;padding:14px 16px;background:linear-gradient(135deg,rgba(7,35,48,.86),rgba(3,17,25,.72));box-shadow:0 0 18px #2dcfff0b,inset 0 0 15px #1d7f9a0a;animation:fade-in .4s ease}
.exchange p{font-family:'Share Tech Mono',monospace;color:var(--cream);font-size:14px;line-height:1.6;margin:0 0 5px}
.exchange p:last-child{margin-bottom:0}
.exchange b{color:#9feeff;font-weight:500}
.input-line{display:flex;align-items:center;gap:9px;margin-top:25px;border-bottom:1px solid #7ccce4;padding:8px 0}
.input-line label{color:#a3eaff;white-space:nowrap}
.input-line input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:#e7fbff;font:14px 'IBM Plex Mono',monospace;padding:7px 0}
.input-line input::placeholder{color:#4b7380}
.input-line button{background:transparent;color:#91e9ff;border:1px solid #2a7188;border-radius:3px;font-size:20px;width:36px;height:34px;cursor:pointer}
.input-line button:hover{background:#0b4054}
.hint{color:#476b79;font-size:10px;letter-spacing:.08em;margin-top:10px}
.right-panel{position:relative;min-height:760px;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#12536a66,transparent 55%)}
.ambient-grid{position:absolute;inset:0;background-image:linear-gradient(#54dfff0a 1px,transparent 1px),linear-gradient(90deg,#54dfff0a 1px,transparent 1px);background-size:35px 35px;mask-image:linear-gradient(transparent,black 18%,black 85%,transparent);transform:perspective(400px) rotateX(7deg);opacity:.6}
.holo{position:absolute;inset:5% -5% 12% 0;filter:drop-shadow(0 0 22px #4bdcff55)}
.face{position:absolute;left:17%;top:3%;width:63%;height:73%;animation:float 7s ease-in-out infinite}
.head{position:absolute;left:19%;top:10%;width:57%;height:48%;border-radius:49% 48% 45% 47%;background:radial-gradient(ellipse at 38% 27%,#c5f7ffb8 0,#4db5d5a1 19%,#12607c9c 50%,#061c2a 83%);border:1px solid #9aeaffb5;box-shadow:inset 9px 0 18px #b4f7ff6b,inset -13px -8px 24px #00111e,0 0 24px #65dfff66;clip-path:polygon(14% 0,79% 0,100% 27%,91% 64%,68% 88%,51% 100%,27% 92%,10% 67%,0 34%)}
.head:before{content:"";position:absolute;inset:3% 9%;border-radius:50%;background:repeating-linear-gradient(105deg,transparent 0 7px,#83e9ff35 8px,#83e9ff35 9px,transparent 10px 15px);opacity:.7}
.hair{position:absolute;z-index:2;left:12%;top:0;width:73%;height:41%;border-radius:55% 50% 25% 25%;border-top:2px solid #a9f0ffb8;box-shadow:0 -9px 0 -7px #b7f5ff,0 -17px 0 -15px #64c8e9;transform:rotate(-8deg)}
.ear{position:absolute;top:29%;width:10%;height:15%;border:1px solid #78dff9;border-radius:50%;background:#247b98aa}
.ear-left{left:13%}.ear-right{right:17%}
.neck{position:absolute;top:53%;left:39%;height:24%;width:25%;background:linear-gradient(90deg,#0b3448,#75d9ef8c,#0b3146);clip-path:polygon(18% 0,80% 0,100% 100%,0 100%)}
.eye{position:absolute;top:35%;width:19%;height:4%;border-bottom:2px solid #c2f8ff;border-radius:50%;filter:drop-shadow(0 0 4px #68e6ff)}
.eye-left{left:21%}.eye-right{right:20%}
.eye i{display:block;width:5px;height:5px;border-radius:50%;background:#d9fbff;margin:0 auto;box-shadow:0 0 8px #fff}
.brow{position:absolute;top:30%;width:21%;border-top:2px solid #8ceaff;opacity:.75}
.brow-left{left:19%;transform:rotate(-5deg)}.brow-right{right:18%;transform:rotate(5deg)}
.nose{position:absolute;top:37%;left:47%;height:17%;width:12%;border-right:1px solid #b4f6ff;border-bottom:1px solid #b4f6ff;transform:skew(-10deg);opacity:.8}
.mouth{position:absolute;top:61%;left:39%;width:23%;height:4%;border-bottom:2px solid #c0f7ff;border-radius:50%;filter:drop-shadow(0 0 4px #55dfff)}
.jaw-glow{position:absolute;bottom:4%;left:23%;width:55%;height:20%;border-bottom:2px solid #b1f3ff;border-radius:0 0 50% 50%;filter:blur(1px)}
.wire{position:absolute;border:1px solid #7ce8ff8a;border-radius:50%;transform:rotate(-20deg)}
.wire-a{inset:1% 2% 0 -1%}.wire-b{inset:-4% -2% 3% 4%;transform:rotate(28deg)}.wire-c{inset:7% -6% 0 9%;transform:rotate(62deg)}
.data-points{position:absolute;inset:0;background-image:radial-gradient(circle,#a5f4ff 1px,transparent 1.8px);background-size:17px 19px;mask-image:linear-gradient(120deg,transparent 10%,black 38%,transparent 85%);opacity:.75}
.shoulders{position:absolute;left:-2%;right:-7%;bottom:0;height:37%;border:1px solid #80e7ff88;border-radius:48% 48% 0 0;background:repeating-linear-gradient(105deg,transparent 0 12px,#56d9ff26 13px,#56d9ff26 14px,transparent 15px 22px),radial-gradient(ellipse at 50% 0,#7be7ff8a,#0b415a88 30%,#061522 76%);clip-path:polygon(25% 0,43% 13%,59% 13%,78% 0,100% 24%,100% 100%,0 100%,0 24%);box-shadow:inset 0 10px 25px #b6f8ff33,0 0 22px #32cfff3b}
.circuit{position:absolute;bottom:9%;height:25%;width:55%;border-top:1px solid #8deeff;opacity:.8}
.circuit-a{left:-8%;transform:rotate(-18deg)}.circuit-b{right:-12%;transform:rotate(17deg)}
.orbital{position:absolute;left:20%;top:7%;width:65%;height:54%;border:1px solid #5edcff40;border-radius:50%;transform:rotate(-27deg)}
.orbit-two{transform:rotate(35deg);left:15%;top:10%;width:72%;height:45%;border-color:#9aefff26}
.status-card,.terminal,.plaque,.side-plaque{position:absolute;border:1px solid #316b7e;background:linear-gradient(145deg,#061a24ed,#020a10f2);box-shadow:0 0 20px #0008,inset 0 0 14px #2dbce81b;color:#87b8c5}
.status-card{right:3%;bottom:23%;width:40%;padding:16px;font-size:10px;letter-spacing:.04em;transform:perspective(500px) rotateY(-5deg)}
.status-card p{margin:5px 0}.status-title{color:#b4efff;font-weight:600}.status-card span{color:#8cf0ff}
.waveform{display:flex;align-items:center;gap:3px;height:28px;margin-top:9px;border-top:1px solid #205568}
.waveform i{display:block;width:3px;height:var(--h,8px);background:#42d9fa;box-shadow:0 0 6px #42d9fa;animation:pulse 1.3s ease-in-out infinite alternate}
.waveform i:nth-child(3n){--h:19px}.waveform i:nth-child(4n){--h:5px}.waveform i:nth-child(5n){--h:24px}
.terminal{left:16%;bottom:3%;width:68%;padding:27px 32px;border-radius:7px;min-height:165px;transform:perspective(500px) rotateX(2deg)}
.terminal-title{font-size:27px;letter-spacing:.14em;color:#b9f5ff;margin:0 0 10px}
.terminal p{font-family:'Share Tech Mono',monospace;font-size:13px}
.ready{margin-top:23px;color:#d7f9ff}.ready span{color:#4bd7ff}
.plaque{left:2%;bottom:5%;width:39%;padding:17px 14px;transform:rotate(-5deg);font-size:10px;color:#c5c2ad;z-index:2}
.plaque p{margin:5px 0 10px}.holes{height:14px;margin:12px -3px -7px;background:radial-gradient(circle,#02080b 2px,transparent 3px);background-size:15px 12px}
.side-plaque{right:1%;bottom:4%;padding:14px;width:22%;font-size:9px;line-height:1.8;color:#b8b49d}
.side-plaque b{font-size:15px;letter-spacing:.2em}
footer{text-align:center;padding:10px 20px 15px;color:#315b69;font-size:9px;letter-spacing:.18em}
footer span{color:#6fe6ff;padding:0 8px}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes pulse{from{transform:scaleY(.5);opacity:.45}to{transform:scaleY(1.2);opacity:1}}
@keyframes fade-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:850px){.layout{grid-template-columns:1fr}.left-panel{padding:28px 22px 30px}.right-panel{min-height:690px;grid-row:1}.masthead{margin-bottom:24px}.holo{inset:2% -2% 10% 0}.status-card{bottom:22%;width:43%;right:2%}.terminal{bottom:3%;left:16%;width:68%}.plaque{bottom:5%;width:38%}.side-plaque{bottom:4%;width:21%}.history{max-width:650px}.left-panel{background:linear-gradient(#04121b,#030b11)}}
@media(max-width:520px){.right-panel{min-height:520px}.face{left:15%;width:70%;top:2%}.status-card{font-size:8px;padding:9px;width:48%;bottom:23%}.terminal{padding:15px 18px;min-height:120px;bottom:3%;width:72%;left:14%}.terminal-title{font-size:20px}.terminal p{font-size:10px}.plaque{font-size:7px;padding:8px;width:36%;bottom:5%}.side-plaque{font-size:6px;padding:7px;width:23%;bottom:4%}.side-plaque b{font-size:11px}.exchange{padding:12px}.exchange p{font-size:12px}.eyebrow{font-size:9px}footer{font-size:7px}}

/* Accessible controls and the reflection-first conversation experience */
.masthead{position:relative;padding-top:43px}
.toolbar{position:absolute;top:0;right:0;display:flex;align-items:center;gap:8px}
.language-switch{display:flex;gap:2px;border:1px solid #285a6a;border-radius:999px;padding:3px;background:#031018cc}
.language-switch button,.install-button,.conversation-heading button,.suggestions button{font:500 10px 'IBM Plex Mono',monospace;letter-spacing:.06em;color:#a9eaf8;background:#071b25;border:1px solid #28596a;border-radius:999px;padding:8px 10px;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
.language-switch button{border-color:transparent;padding:6px 8px}
.language-switch button[aria-pressed="true"]{background:#14516a;color:#e1fbff;border-color:#4ecbed66}
.install-button:hover,.conversation-heading button:hover,.suggestions button:hover{background:#0b3a4b;border-color:#57cfe9;transform:translateY(-1px)}
.intro{max-width:48ch;color:#aac4cb;font:14px/1.7 'IBM Plex Mono',monospace;margin:18px 0 0}
.conversation-heading{display:flex;align-items:center;justify-content:space-between;margin:4px 0 9px;color:#71aebd;font-size:10px;letter-spacing:.14em}
.conversation-heading button{padding:6px 10px;font-size:9px}
.disclaimer{border-left:2px solid #43bdd0;padding:8px 11px;margin:0 0 12px;background:#09202a88;color:#8db3bd;font-size:10px;line-height:1.6}
.privacy-note{border-left:2px solid #316b7e;padding:7px 11px;margin:-6px 0 12px;color:#7597a1;font-size:9px;line-height:1.6}
.history{max-height:min(36vh,360px);overflow-y:auto;overscroll-behavior:contain;scrollbar-color:#286b7b transparent;scrollbar-width:thin;padding-right:5px}
.exchange{border-color:#327d8f;background:linear-gradient(135deg,rgba(7,35,48,.94),rgba(3,17,25,.84));box-shadow:0 8px 26px #0002,inset 0 0 15px #1d7f9a0a}
.exchange p{font-size:13px;line-height:1.75}
.exchange p b{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.06em}
.exchange p:first-child:last-child{color:#e1f7fb}
.suggestions{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.suggestions button{font-size:9px;padding:8px 11px;color:#a3dbe7}
.input-line{margin-top:16px;border:1px solid #367b8c;border-radius:8px;padding:7px 8px 7px 12px;background:#04131bc9;box-shadow:0 0 22px #00101888}
.input-line:focus-within{border-color:#80e9ff;box-shadow:0 0 0 3px #4cc8e522,0 0 24px #00101888}
.input-line input{font-size:13px}
.input-line input:disabled{opacity:.7}
.input-line button{border-radius:6px;width:38px;height:36px;background:#0b3443}
.input-line button:disabled{opacity:.45;cursor:wait}
.hint{line-height:1.6}
.app-feedback{min-height:18px;color:#90d9e8;font-size:10px;line-height:1.6;margin:3px 0 0}
:focus-visible{outline:2px solid #9deeff;outline-offset:3px}
button:active{transform:translateY(0) scale(.98)}
@media(max-width:850px){.masthead{padding-top:46px}.toolbar{right:0}.history{max-height:35vh}.left-panel{padding-top:26px}}
@media(max-width:520px){.toolbar{left:0;right:auto;justify-content:space-between;width:100%}.masthead{padding-top:49px}.language-switch button,.install-button{font-size:9px}.intro{font-size:12px}.disclaimer{font-size:9px}.privacy-note{font-size:8px}.conversation-heading{font-size:9px}.suggestions button{font-size:8px}.history{max-height:34vh}.exchange p{font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}