:root{color:#202126;background:#f6f4f0}
body{background:#f6f4f0}
.header{border-bottom-color:#e4ded5}
.brand-mark{background:#ff8000;color:#17191d}
.header-link{border:0;background:transparent;cursor:pointer;color:#b75300}
.header-link:hover,.header nav a:hover{color:#ff8000}
.eyebrow,.kicker,.step-no,.scene-grid article>span{color:#bb5900}
.eyebrow-line{background:#ff8000}
.hero h1 em{color:#ed7400}
.button.primary{border:0;background:#ff8000;color:#17191d;cursor:pointer;box-shadow:0 10px 25px #ff80002e}
.button.primary:hover{background:#ea7200}
.button.text{color:#a84f00}
.hero-art{background:radial-gradient(circle at 70% 18%,#ffbe78 0,transparent 37%),linear-gradient(145deg,#fff0d9,#f9d6ad 55%,#e6e0d6)}
.reply-card,.principle{background:#17191d;color:#fff}
.reply-top,.reply-card small,.principle-name{color:#ffd1a2}
.quote-mark{color:#ff8000}
.scene-section{background:#f4ede4}
.scene-example{color:#a84f00}
footer{background:#17191d}
.footer-bottom{border-color:#48494b}
.login-dialog{width:min(440px,calc(100vw - 32px));max-height:calc(100vh - 32px);padding:0;border:1px solid #f2c08c;border-radius:20px;color:#202126;background:#fff;box-shadow:0 30px 90px #0007;overflow:auto}
.login-dialog::backdrop{background:#111318b8;backdrop-filter:blur(5px)}
.login-shell{position:relative;padding:30px}
.login-shell>.kicker{margin:0 0 6px}
.login-card{padding:0;border:0;border-radius:0;box-shadow:none;background:transparent;gap:10px}
.login-card h2{font-size:31px;line-height:1.2;margin:0;color:#202126}
.login-card>p:not(.login-error){margin:0 0 14px;color:#6b6762;font-size:14px}
.login-card label{color:#353431}
.login-card input{border-color:#d8d1c8;background:#fff}
.login-card input:focus{outline-color:#ff8000}
.login-card button{width:100%;margin-top:12px}
.login-close{position:absolute;right:18px;top:15px;min-width:38px;min-height:38px;border:0;background:#f4eee7;border-radius:50%;font-size:25px;line-height:1;cursor:pointer;color:#3f3e3c}
.login-close:hover{background:#ffe1bf}

.agent-mark{--agent-light:#89d8fa;display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:13px;background:radial-gradient(circle at 50% 40%,#21394d,#101923 72%);color:var(--agent-light);box-shadow:inset 0 1px 1px #ffffff22,0 5px 14px #10233230}
.agent-mark svg{display:block;width:32px;height:32px;overflow:visible;filter:drop-shadow(0 0 4px currentColor)}
.agent-rotor{transform-origin:20px 20px;transform:rotate(-90deg);animation:agent-sway 7.2s infinite}
.agent-inner{fill:none;stroke:currentColor;stroke-width:.7;opacity:.22}
.agent-ring{fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round}
.agent-point{fill:currentColor}
.agent-ring,.agent-point{animation:agent-light-pulse 6.4s ease-in-out infinite}
.agent-mark-inline{width:31px;height:31px;border-radius:10px}
.agent-mark-inline svg{width:25px;height:25px}
body[data-agent-state="listening"] .agent-mark{--agent-light:#f7c65c}
body[data-agent-state="thinking"] .agent-mark{--agent-light:#ff737c}
body[data-agent-state="output"] .agent-mark{--agent-light:#6cc9ff}
body[data-agent-state="listening"] .agent-rotor,body[data-agent-state="thinking"] .agent-rotor,body[data-agent-state="output"] .agent-rotor{animation-duration:4.8s}
body[data-agent-state="thinking"] .agent-mark{box-shadow:inset 0 1px 1px #ffffff22,0 0 17px #ff737c42}
body[data-agent-state="output"] .agent-mark{box-shadow:inset 0 1px 1px #ffffff22,0 0 17px #6cc9ff4a}
@keyframes agent-sway{0%,100%{transform:rotate(-90deg);animation-timing-function:cubic-bezier(.42,0,.14,1)}28%{transform:rotate(-42deg);animation-timing-function:cubic-bezier(.36,0,.19,1)}55%{transform:rotate(-78deg);animation-timing-function:cubic-bezier(.38,0,.16,1)}78%{transform:rotate(-132deg);animation-timing-function:cubic-bezier(.32,0,.22,1)}}
@keyframes agent-light-pulse{0%,17%,53%,100%{opacity:1}24%{opacity:.28}31%{opacity:1}39%{opacity:.38}46%{opacity:1}}
@media(prefers-reduced-motion:reduce){.agent-rotor,.agent-ring,.agent-point{animation:none}}
@media(max-width:480px){.login-shell{padding:26px 22px}.login-dialog{margin:auto}}
/* Papaya orange is the brand accent; cool neutral surfaces keep it legible. */
:root{color:#17232d;background:#e4e9ec}
body{background:radial-gradient(circle at 3% 12%,#ffd7ae88,transparent 24%),radial-gradient(circle at 97% 58%,#cadbe555,transparent 29%),#e4e9ec}
.header{border-bottom-color:#cad3d9}
.header-link,.kicker,.eyebrow,.step-no,.scene-grid article>span{color:#b44b00}
.eyebrow-line{background:#ff8000}
.hero h1,.section-intro h2,.scene-heading h2,.status-section h2,.faq h2{color:#17232d}
.hero h1 em{color:#e86800}
.hero-lead,.hero-note,.section-intro>p,.steps p,.scene-grid p,.faq p{color:#3d515d}
.button.primary{background:#ff8000;color:#17232d}
.button.primary:hover{background:#ff9b32}
.button.text{color:#a74400}
.hero-art{background:radial-gradient(circle at 80% 18%,#ffb268,transparent 34%),linear-gradient(140deg,#e9edf0,#f3e6d9 58%,#ffd1a1)}
.art-label,.bubble.other span,.art-foot{color:#314956}
.bubble.other{background:#f9fbfc;color:#17232d}
.bubble.pause{background:#dce7ed;color:#263d4a}
.reply-card{background:#17232d;color:#fff;box-shadow:0 20px 42px #17232d3a}
.reply-top,.reply-card small{color:#ffbf7a}
.sample-tag{border-color:#aa7350;color:#fff}
.line-section,.scene-section,.status-section,.faq{background:#f4f7f8}
.scene-section{background:#e7edf0}
.steps article,.scene-grid article{background:#f9fbfc;border-color:#cbd6dc;color:#17232d}
.scene-example{color:#995000}
.principle{background:#17232d;color:#fff}
.principle-name{color:#ffbd78}
.quote-mark{color:#ff8000}
.login-dialog{border-color:#d6dfe4}
.login-card input{border-color:#bccbd3;color:#17232d}
.header .agent-mark,.footer-main .agent-mark{background:transparent;border-radius:0;box-shadow:none}
.header .agent-mark{--agent-light:#89d8fa}
.header .agent-mark svg{filter:drop-shadow(0 0 1px #20516c) drop-shadow(0 0 3px #89d8fa66)}