:root { color-scheme:light; --bg:#fff; --card:#fff; --text:#342d2a; --muted:#77685e; --line:#eedccc; --cyan:#c43e35; --cyan-dark:#fff0dc; --amber:#ffd451; --red:#df493e; font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif; }
body { background:#fff; }
body::before { opacity:.35; background-image:radial-gradient(#f4dca9 1px,transparent 1px); background-size:24px 24px; }
.shell { width:min(1440px,calc(100% - 56px)); padding:28px 0 48px; }
header { margin-bottom:22px; }
.brand-mark { width:62px;height:62px;background:#ffdc64;border:2px solid #473931;border-radius:22px;box-shadow:3px 4px 0 #473931;font-size:37px;transform:rotate(-5deg); }
h1,h2 { font-weight:900; }
.eyebrow,.kicker { color:#bb3d34;letter-spacing:.12em; }
.connection { background:#fff5de;padding:10px 16px;border:1px solid #f0dfb8;border-radius:30px; }
.connection.online { color:#84602d; }
.connection.online span { background:#eaa623;box-shadow:0 0 0 4px #ffe6a0; }
.card { background:#fff;border:2px solid #ead7c4;border-radius:24px;box-shadow:0 5px 0 #f4e9da;backdrop-filter:none; }
.hero { background:#fff2bf;border:2px solid #ecc660;position:relative;overflow:hidden;padding:26px 30px; }
.hero h2 { color:#aa352c; }
.hero p:last-child { line-height:1.7; }
button { background:#ffd451;color:#49352a;border:2px solid #dca93f;border-radius:15px;box-shadow:0 3px 0 #e5b647;min-height:46px; }
button:hover { filter:brightness(1.02); }
button:active { transform:translateY(2px);box-shadow:none; }
button:disabled { cursor:not-allowed;opacity:.48; }
button.outline { background:#fff;color:#9e3932;border-color:#efc3b6;box-shadow:0 3px 0 #f8e2d7; }
button.stop { background:#df493e;border-color:#b9362f;box-shadow:0 4px 0 #b9362f; }
.status-grid { gap:16px;margin:22px 0; }
.metric { position:relative;border-top:5px solid #ffd451;padding:15px 20px; }
.metric:nth-child(even) { border-top-color:#e65a4e; }
.metric strong { color:#46362d;font-size:19px; }
.workspace { grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start; }
.controls,.telemetry { padding:24px;min-width:0; }
.telemetry { position:sticky;top:20px;display:flex;flex-direction:column; }
.duck-conversation { order:-5;margin-bottom:0; }
#textCommand { order:-4;margin-top:20px; }
#remoteVoice { order:-3;margin-top:14px;background:#dd493e;color:#fff;border-color:#b9362f;box-shadow:0 4px 0 #b9362f;font-size:17px; }
#remoteVoiceStatus { order:-2;margin-bottom:28px;padding-bottom:18px;border-bottom:2px dashed #efd7b6; }
.duck-avatar { font-size:38px;background:#fff0b8;border-radius:18px;padding:6px; }
.reply-bubble { position:relative;background:#fff5d5;border:2px solid #f1d481;border-radius:20px 20px 20px 5px;padding:20px;line-height:1.8;font-weight:700;overflow-wrap:anywhere; }
.reply-bubble.is-speaking { animation:duck-bob .6s ease-in-out infinite alternate; }
@keyframes duck-bob { to { transform:translateY(-3px); } }
.dual-controls { gap:20px;margin-top:24px; }
.dual-controls>div { background:#fffcf5;border:1px solid #f1e1cb;border-radius:20px;padding:16px; }
.dual-controls .section-title.split { margin-top:0; }
.dual-controls h2 { font-size:19px; }
.joystick { border:3px solid #edc676;background:radial-gradient(circle,#fffdf4 35%,#fff0bf 100%);box-shadow:inset 0 0 0 10px #fff9e9,0 5px 0 #f4e4c2; }
.joystick-thumb { background:#e45143;color:#fff;border:3px solid #b93730;box-shadow:0 5px 0 #c83d33;font-size:28px; }
.joystick[aria-disabled="true"] { opacity:.55; }
.joystick-value { margin-top:10px;font-weight:700; }
.joy-label { color:#866e50;font-weight:700; }
.joy-cross { border-color:#e6c982; }
.speed-settings { gap:7px; }
input,select,dialog { color:#342d2a;background:#fffcf6;border:2px solid #edddc9; }
input:focus,select:focus { border-color:#d94d3f;box-shadow:0 0 0 3px #ffe4dc; }
input[type="range"] { accent-color:#d64b3e;padding:0;min-height:30px; }
input[type="file"] { font-size:12px;padding:8px; }
input::file-selector-button { background:#fff0bb;border:0;border-radius:8px;padding:9px;color:#5b422d; }
.velocity { gap:6px; }
.velocity div { background:#fff9ed;border:1px solid #ecdac0;padding:12px 8px;text-align:center; }
.velocity strong { font-size:22px;color:#c84135; }
.event-log { max-height:310px; }
.event-log li { grid-template-columns:58px minmax(0,1fr);line-height:1.6;overflow-wrap:anywhere; }
.control-hint { font-size:12px;line-height:1.8; }
#modelControls { background:#fff9e7;border-radius:16px;padding:14px;margin-top:16px; }
#modelControls>label { display:block;padding:8px 0;font-size:13px; }
#modelTranslationStick { display:grid;place-items:center;color:#8d6e47;font-weight:bold;margin:16px auto; }
#toast { background:#ffe08a;color:#513723;border:2px solid #dbae4a;box-shadow:0 4px 12px #58412722; }
#toast.bad { background:#c84236;color:#fff;border-color:#a33229; }
dialog { box-shadow:0 8px 0 #ebd7bb;border-radius:24px; }
dialog::backdrop { background:#49342866; }
@media(max-width:1190px) { .workspace { grid-template-columns:1fr; }.telemetry { position:static; }.shell { width:calc(100% - 36px); } }
@media(max-width:640px) { .shell { width:calc(100% - 24px);padding-top:18px; }.controls,.telemetry { padding:18px; }.dual-controls { grid-template-columns:1fr; }.hero { padding:22px; }.hero h2 { font-size:25px; }header { flex-wrap:wrap; }.connection { position:static;margin-left:0; }.brand-mark { width:52px;height:52px;font-size:30px; }.velocity { grid-template-columns:repeat(3,minmax(0,1fr)); }.status-grid { gap:12px; }.metric { padding:14px; }.metric strong { font-size:16px; } }
@media(prefers-reduced-motion:reduce) { .reply-bubble.is-speaking { animation:none; } }