:root{--petrol-950:#05171d;--petrol-900:#082027;--petrol-800:#0b2a33;--petrol-700:#0f3742;--petrol-600:#13525a;--teal-500:#1f8f97;--teal-400:#2ea3a5;--teal-300:#5fd6c8;--sand-100:#f4e6d4;--sand-200:#e8d3b8;--sand-400:#c9a684;--coral-500:#e98f6b;--coral-600:#d9704c;--ink:#f6ecdf;--ink-dim:#b6c6c8;--ink-faint:#9badaf;--weba-ink:#141a1f;--weba-slate:#243039;--weba-teal:#2e5f63;--weba-amber:#d9a05b;--weba-bone:#efe7dc;--weba-mist:#9fb0b5;--radius-lg:24px;--radius-md:14px;--radius-sm:10px;--font-display:"Iowan Old Style", "Palatino Linotype", "Georgia", serif;--font-sans:"Inter", "Segoe UI", system-ui, -apple-system, sans-serif;--shadow-deep:0 30px 80px -30px #000000b3;--focus:0 0 0 3px var(--petrol-950), 0 0 0 5px var(--teal-300);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body,#root{width:100%;max-width:100%;height:100%}html{overflow-x:clip}body{min-width:0;font-family:var(--font-sans);color:var(--ink);background:radial-gradient(ellipse 70% 55% at 12% 8%, #2ea3a538, transparent 60%), radial-gradient(ellipse 60% 50% at 92% 92%, #e98f6b24, transparent 62%), linear-gradient(168deg, var(--petrol-950), #04121a 55%, #071c22);-webkit-font-smoothing:antialiased;background-attachment:fixed;margin:0}.visually-hidden{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}:focus-visible{box-shadow:var(--focus);border-radius:var(--radius-sm);outline:none}.skip-link{z-index:50;background:var(--teal-400);color:var(--petrol-950);border-radius:0 0 var(--radius-sm) var(--radius-sm);padding:12px 18px;font-weight:600;text-decoration:none;transition:top .18s;position:absolute;top:-100px;left:16px}.skip-link:focus{top:0}.app{flex-direction:column;gap:22px;width:100%;max-width:1440px;min-height:100%;margin:0 auto;padding:26px clamp(16px,3vw,40px) 32px;display:flex}.app__header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;display:flex}.brand{align-items:center;gap:14px;display:flex}.brand__mark{width:46px;height:46px;font-family:var(--font-display);color:var(--petrol-950);background:linear-gradient(140deg, var(--teal-300), var(--coral-500));box-shadow:0 10px 30px -12px var(--teal-400);border-radius:14px;place-items:center;font-size:24px;font-weight:700;display:grid}.brand__name{font-family:var(--font-display);letter-spacing:.14em;margin:0;font-size:30px;font-weight:600;line-height:1}.brand__tag{color:var(--ink-faint);letter-spacing:.02em;margin:5px 0 0;font-size:13px}.badge{color:var(--ink-dim);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0b2a33bf;border:1px solid #5fd6c838;border-radius:999px;align-items:center;gap:9px;margin:0;padding:9px 15px;font-size:13px;font-weight:500;display:inline-flex}.badge__dot{background:var(--teal-300);border-radius:50%;width:8px;height:8px}.badge--watching{color:#ffe3d3;background:#d9704c33;border-color:#e98f6b8c}.badge--watching .badge__dot{background:var(--coral-500);animation:2s ease-in-out infinite pulse}.app__main{flex:1;grid-template-columns:minmax(340px,.85fr) minmax(420px,1.15fr);align-items:start;gap:clamp(18px,2.2vw,32px);min-height:0;display:grid}.app__left,.app__right{flex-direction:column;gap:18px;width:100%;min-width:0;max-width:100%;display:flex}.app__right{height:min(74vh,780px);min-height:480px}.stage{border-radius:var(--radius-lg);box-shadow:var(--shadow-deep);background:linear-gradient(155deg,#0f3742e0,#082027eb);border:1px solid #5fd6c829;flex-direction:column;gap:14px;width:100%;min-width:0;max-width:100%;padding:20px;display:flex}.stage__frame{aspect-ratio:4/5;background:radial-gradient(circle at 68% 26%,#d9a05b33,#0000 58%),radial-gradient(circle at 16% 62%,#2e5f6338,#0000 60%),linear-gradient(#243039,#141a1f);border-radius:18px;place-items:center;width:100%;max-height:52vh;transition:box-shadow .6s;display:grid;position:relative;overflow:hidden}.stage__frame:after{content:"";pointer-events:none;background:radial-gradient(at 50% 100%,#d9a05b24,#0000 55%);position:absolute;inset:0}.stage__frame[data-state=warm],.stage__frame[data-state=amused]{box-shadow:inset 0 -60px 90px -50px var(--weba-amber)}.stage__frame[data-state=thinking],.stage__frame[data-state=focused]{box-shadow:inset 0 60px 90px -60px var(--weba-teal)}.stage__frame[data-state=concerned]{box-shadow:inset 0 0 90px -30px #b98a7273}.portrait{width:100%;height:100%;transition:transform .7s cubic-bezier(.22,1,.36,1)}.portrait path,.portrait ellipse,.portrait circle{transition:d .5s,opacity .45s,cx .35s,cy .35s,rx .4s,ry .22s,transform .5s}.breathe{transform-origin:160px 300px;animation:5.2s ease-in-out infinite breathe}.pulse-dot{animation:2.4s ease-in-out infinite pulse}.strand{transform-origin:212px 122px;animation:7.3s ease-in-out infinite strand-sway}@keyframes strand-sway{0%,to{transform:rotate(0)}50%{transform:rotate(1.6deg)}}@keyframes breathe{0%,to{transform:translateY(0)scale(1)}50%{transform:translateY(-3px)scale(1.008)}}@keyframes pulse{0%,to{opacity:.35}50%{opacity:1}}.stage__text-only{text-align:center;place-items:center;gap:12px;padding:30px;display:grid}.stage__text-only-mark{width:88px;height:88px;font-family:var(--font-display);color:var(--petrol-950);background:linear-gradient(140deg, var(--teal-300), var(--sand-200));border-radius:26px;place-items:center;font-size:44px;display:grid}.stage__text-only-state{font-size:19px;font-family:var(--font-display);margin:0}.stage__text-only-hint{max-width:34ch;color:var(--ink-faint);margin:0;font-size:13px}.stage__meta{gap:6px;display:grid}.stage__status{letter-spacing:.01em;align-items:center;gap:9px;margin:0;font-size:15px;font-weight:500;display:flex}.dot{background:var(--teal-300);width:9px;height:9px;box-shadow:0 0 12px var(--teal-300);border-radius:50%;transition:background .4s}.dot--warm,.dot--amused{background:var(--coral-500);box-shadow:0 0 12px var(--coral-500)}.dot--concerned{background:var(--sand-400);box-shadow:0 0 12px var(--sand-400)}.dot--thinking,.dot--focused{background:var(--sand-200);box-shadow:0 0 12px var(--sand-200)}.stage__disclaimer{color:var(--ink-faint);margin:0;font-size:11.5px;line-height:1.5}.panel{border-radius:var(--radius-lg);background:#082027b8;border:1px solid #5fd6c81f;gap:18px;width:100%;min-width:0;max-width:100%;padding:18px 20px 20px;display:grid}.panel__title{font-family:var(--font-display);letter-spacing:.04em;margin:0;font-size:17px;font-weight:600}.panel__group{border:0;gap:11px;margin:0;padding:0;display:grid}.panel__legend{letter-spacing:.13em;text-transform:uppercase;color:var(--teal-300);padding:0;font-size:11.5px;font-weight:700}.radio{cursor:pointer;border-radius:var(--radius-md);background:#05171d8c;border:1px solid #0000;grid-template-columns:auto 1fr;align-items:start;gap:11px;min-width:0;padding:11px 13px;transition:border-color .2s,background .2s;display:grid}.radio:hover{border-color:#5fd6c84d}.radio:has(input:checked){background:#13525a66;border-color:#5fd6c873}.radio:has(input[value=semantic]:checked){background:#d9704c29;border-color:#e98f6b80}.radio input{width:17px;height:17px;accent-color:var(--teal-400);margin-top:2px}.radio strong{font-size:14px;font-weight:600;display:block}.radio em{color:var(--ink-faint);overflow-wrap:anywhere;margin-top:3px;font-size:12.5px;font-style:normal;line-height:1.45;display:block}.panel__buttons{flex-wrap:wrap;gap:8px;display:flex}.panel__note{color:var(--ink-faint);margin:0;font-size:12px}.chip{font:inherit;color:var(--ink-dim);cursor:pointer;background:#05171db3;border:1px solid #5fd6c838;border-radius:999px;padding:8px 14px;font-size:13px;transition:all .2s}.chip:hover:not(:disabled){color:var(--ink);border-color:var(--teal-300)}.chip:disabled{opacity:.42;cursor:not-allowed}.chip--on{color:var(--petrol-950);background:var(--teal-300);border-color:var(--teal-300);font-weight:600}.transcript{border-radius:var(--radius-lg);background:#0820279e;border:1px solid #5fd6c81f;flex-direction:column;flex:1;min-height:0;padding:6px;display:flex}.transcript__list{scrollbar-width:thin;scrollbar-color:var(--petrol-600) transparent;flex-direction:column;flex:1;gap:14px;min-height:0;margin:0;padding:16px;list-style:none;display:flex;overflow-y:auto}.transcript__empty{width:min(100%,520px);color:var(--ink-dim);text-align:center;justify-items:center;gap:10px;margin:auto;padding:28px 18px;font-size:14.5px;line-height:1.6;display:grid}.transcript__empty-kicker{color:var(--teal-300);letter-spacing:.14em;text-transform:uppercase;font-size:11px;font-weight:700}.transcript__empty h3,.transcript__empty p{margin:0}.transcript__empty h3{font-family:var(--font-display);color:var(--ink);font-size:clamp(26px,4vw,38px);font-weight:500}.starter-list{flex-wrap:wrap;justify-content:center;gap:8px;margin-top:10px;display:flex}.starter{font:inherit;color:var(--ink-dim);cursor:pointer;background:#05171dad;border:1px solid #5fd6c83d;border-radius:999px;padding:8px 12px;font-size:12.5px;transition:color .2s,border-color .2s,transform .2s}.starter:hover{color:var(--ink);border-color:var(--teal-300);transform:translateY(-1px)}.bubble{border-radius:18px;gap:5px;max-width:82%;padding:12px 16px;animation:.32s cubic-bezier(.22,1,.36,1) rise;display:grid}@keyframes rise{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.bubble--user{color:#10262c;background:linear-gradient(135deg, var(--sand-100), var(--sand-200));border-bottom-right-radius:6px;align-self:flex-end}.bubble--weba{background:linear-gradient(140deg,#13525ae0,#0b2a33eb);border:1px solid #5fd6c833;border-bottom-left-radius:6px;align-self:flex-start}.bubble__author{letter-spacing:.1em;text-transform:uppercase;opacity:.72;font-size:11px;font-weight:700}.bubble__emotion{text-transform:none;letter-spacing:.02em;font-weight:500}.bubble__text{white-space:pre-wrap;overflow-wrap:anywhere;margin:0;font-size:15px;line-height:1.62}.caret{vertical-align:text-bottom;background:var(--teal-300);border-radius:2px;width:8px;height:16px;margin-left:3px;animation:1s steps(2,start) infinite blink;display:inline-block}@keyframes blink{50%{opacity:0}}.transcript__error{color:#ffd9c9;border-radius:var(--radius-md);background:#d9704c33;border:1px solid #e98f6b73;margin:0 16px 12px;padding:10px 14px;font-size:13.5px}.composer{border-radius:var(--radius-lg);background:#082027c7;border:1px solid #5fd6c829;gap:11px;padding:14px;display:grid}.composer__input{width:100%;font:inherit;color:var(--ink);resize:vertical;border-radius:var(--radius-md);background:#05171db8;border:1px solid #5fd6c833;padding:13px 15px;font-size:15px;line-height:1.55;transition:border-color .2s}.composer__input::placeholder{color:var(--ink-faint)}.composer__input:focus{border-color:var(--teal-300)}.composer__row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.composer__hint{color:var(--ink-faint);margin:0;font-size:12px}.composer__actions{gap:8px;margin-left:auto;display:flex}.btn{font:inherit;cursor:pointer;border:1px solid #0000;border-radius:999px;padding:10px 22px;font-size:14px;font-weight:600;transition:all .2s}.btn--primary{color:var(--petrol-950);background:linear-gradient(135deg, var(--teal-300), var(--sand-200));box-shadow:0 10px 26px -14px var(--teal-300)}.btn--primary:hover:not(:disabled){box-shadow:0 14px 30px -12px var(--teal-300);transform:translateY(-1px)}.btn--primary:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}.btn--ghost{color:var(--ink-dim);background:0 0;border-color:#e98f6b8c}.btn--ghost:hover{color:var(--ink);background:#e98f6b29}.app__footer{color:var(--ink-faint);text-align:center;margin:0;font-size:12px}.app__footer p{margin:0}@media (width<=960px){body{background-attachment:scroll}.app__main{flex-direction:column;width:100%;display:flex}.app__right{height:auto;min-height:0}.transcript__list{max-height:52vh}.stage__frame{aspect-ratio:1;max-height:38vh}.brand__name{font-size:25px}}@media (width<=560px){.app{gap:16px;padding:16px 13px 22px}.bubble{max-width:92%}.stage,.panel,.transcript,.composer{width:100%;max-width:100%}.stage{padding:14px}.panel{padding-inline:14px}.transcript__empty{padding-inline:8px}.starter-list{flex-direction:column;width:100%}.starter{width:100%}.composer__hint{order:2;width:100%}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}.app[data-reduced-motion] *,.app[data-reduced-motion] :before,.app[data-reduced-motion] :after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}