:root{--bg:#f7efe5;--bg-deep:#efe1d2;--surface:#fffaf3;--surface-2:#fff4e7;--ink:#2c211a;--ink-soft:#6f5c4e;--line:#e6d5c3;--fox:#e5803a;--fox-deep:#c65f1c;--accent:#2f7d63;--accent-soft:#dff0e8;--danger:#b4453a;--radius:18px;--shadow:0 18px 45px -28px #4e30188c}html{height:100%}body{background:radial-gradient(1200px 600px at 10% -10%, #fff7ec 0%, transparent 60%), radial-gradient(900px 500px at 100% 0%, #f4e3d2 0%, transparent 55%), var(--bg);min-height:100%;color:var(--ink);-webkit-font-smoothing:antialiased;font-family:ui-sans-serif,-apple-system,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;line-height:1.55}*{box-sizing:border-box;margin:0;padding:0}button,select{font:inherit;color:inherit}a{color:var(--accent)}ul{list-style:none}.muted{color:var(--ink-soft);font-size:12px}.app{flex-direction:column;gap:22px;max-width:1240px;margin:0 auto;padding:28px 24px 48px;display:flex}.app__head{justify-content:space-between;align-items:flex-start;gap:20px;display:flex}.eyebrow{letter-spacing:.16em;text-transform:uppercase;color:var(--fox-deep);font-size:11px;font-weight:700}.app__head h1{letter-spacing:-.01em;margin:6px 0 8px;font-size:clamp(24px,3vw,34px)}.app__sub{max-width:640px;color:var(--ink-soft);font-size:14px}.status-pill{background:var(--surface);border:1px solid var(--line);color:var(--ink-soft);white-space:nowrap;border-radius:999px;align-items:center;gap:8px;padding:8px 14px;font-size:13px;display:inline-flex}.status-pill.is-live{background:var(--accent-soft);color:#235f4b;border-color:#b9dccd}.dot{background:#c8b6a4;border-radius:50%;flex:none;width:8px;height:8px}.status-pill.is-live .dot,.mic--ready .dot{background:var(--accent);animation:1.8s ease-in-out infinite pulse}.dot--speaking{background:var(--fox);animation:.9s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}.app__grid{grid-template-columns:minmax(0,1.35fr) minmax(320px,.9fr);align-items:start;gap:22px;display:grid}.app__stage-col,.app__side-col{flex-direction:column;gap:18px;min-width:0;display:flex}.fox-stage{--stage-bg:linear-gradient(180deg, #ffe9cf 0%, #ffd9b8 45%, #f6c9a4 100%);--stage-accent:#c9a77f;aspect-ratio:4/3;border:2px solid var(--stage-accent);background:var(--stage-bg);box-shadow:var(--shadow);border-radius:26px;justify-content:center;align-items:center;transition:background .35s,border-color .35s;display:flex;position:relative;overflow:hidden}.fox-stage--idle{--stage-bg:linear-gradient(180deg, #f6eadb 0%, #efdcc8 100%);--stage-accent:#c9a77f}.fox-stage--listening{--stage-bg:linear-gradient(180deg, #e3f1fb 0%, #cfe4f5 100%);--stage-accent:#6aa6cf}.fox-stage--speaking_neutral{--stage-bg:linear-gradient(180deg, #ffe8d0 0%, #ffd6b2 100%);--stage-accent:#e5803a}.fox-stage--speaking_happy{--stage-bg:linear-gradient(180deg, #e7f5df 0%, #cfe9c4 100%);--stage-accent:#5b9e58}.fox-stage--speaking_clarify{--stage-bg:linear-gradient(180deg, #efe8fa 0%, #ddd2f1 100%);--stage-accent:#8b74bb}.fox-stage--idle .fox-stage__badge .dot{background:#c9a77f}.fox-stage--listening .fox-stage__badge{color:#1f567d;background:#eef7ff;border-color:#a9cee6}.fox-stage--listening .fox-stage__badge .dot{background:#2f86c4;animation:1.4s ease-in-out infinite pulse}.fox-stage--speaking_neutral .fox-stage__badge{color:#8a4a16;background:#fff3e4;border-color:#f0c9a3}.fox-stage--speaking_neutral .fox-stage__badge .dot{background:#e5803a}.fox-stage--speaking_happy .fox-stage__badge{color:#33662f;background:#f0faeb;border-color:#b9dcb0}.fox-stage--speaking_happy .fox-stage__badge .dot{background:#5b9e58}.fox-stage--speaking_clarify .fox-stage__badge{color:#574384;background:#f5f0ff;border-color:#cdc0ea}.fox-stage--speaking_clarify .fox-stage__badge .dot{background:#8b74bb}.fox-stage__sky{background:radial-gradient(65% 55% at 78% 18%,#ffffffe6 0%,#0000 60%),radial-gradient(40% 30% at 18% 8%,#ffffff8c 0%,#0000 70%);position:absolute;inset:0}.fox-stage__sky:after{content:"";background:linear-gradient(#0000,#503c2812);height:34%;position:absolute;inset:auto 0 0}.fox-stage__badge{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--ink);z-index:3;background:#fffaf3db;border:1px solid #e6d5c3cc;border-radius:999px;align-items:center;gap:8px;padding:6px 12px;font-size:12px;font-weight:600;display:inline-flex;position:absolute;top:16px;left:16px}.fox-stage__note{color:#fff8ef;letter-spacing:.02em;white-space:nowrap;z-index:3;background:#2c211a6b;border-radius:999px;padding:5px 12px;font-size:11px;position:absolute;bottom:14px;left:50%;transform:translate(-50%)}.fox-video-wrap,.fox-placeholder{width:100%;height:100%;position:relative}.fox-video{object-fit:cover;opacity:0;z-index:1;width:100%;height:100%;transition:opacity .32s;position:absolute;inset:0}.fox-video.is-visible{opacity:1;z-index:2}.fox-placeholder{justify-content:center;align-items:center;display:flex}.fox-svg{filter:drop-shadow(0 22px 30px #8c4e1e47);z-index:2;width:min(70%,360px);height:auto;position:relative}.fox-ground{z-index:1;background:radial-gradient(#965e344d,#0000 70%);border-radius:50%;width:46%;height:7%;position:absolute;bottom:12%}.fox-body,.fox-eyes,.fox-ears,.fox-mouth,.fox-joy,.fox-brow{transform-box:fill-box;transform-origin:50%}.fox-body{animation:4.6s ease-in-out infinite fox-breathe}.fox-eyes{animation:5.2s ease-in-out infinite fox-blink}.fox-joy,.fox-mouth__open{opacity:0}.fox-mouth__open{transform-box:fill-box;transform-origin:50%}.fox-brow--right{transform-origin:0;transition:transform .35s;transform:rotate(0)}@keyframes fox-breathe{0%,to{transform:scale(1)}50%{transform:scale(1.012)}}@keyframes fox-blink{0%,92%,to{transform:scaleY(1)}95%{transform:scaleY(.12)}}@keyframes fox-talk{0%{opacity:.75;transform:scaleY(.35)}to{opacity:1;transform:scaleY(1)}}@keyframes fox-nod{0%,to{transform:translateY(0)rotate(0)}35%{transform:translateY(3px)rotate(1.2deg)}70%{transform:translateY(-1px)rotate(-.6deg)}}@keyframes fox-sway{0%,to{transform:rotate(0)}35%{transform:rotate(1.6deg)}70%{transform:rotate(-1.2deg)}}@keyframes fox-tilt{0%,to{transform:rotate(-5deg)translateY(0)}50%{transform:rotate(-2deg)translateY(-3px)}}.fox-stage--listening .fox-body{animation:2.6s ease-in-out infinite fox-nod}.fox-stage--listening .fox-ears{transform:translateY(-6px)}.fox-stage--listening .fox-eyes{animation-duration:3.2s}.fox-stage--speaking_neutral .fox-body{animation:3.2s ease-in-out infinite fox-breathe}.fox-placeholder.is-speaking .fox-mouth__open{animation:.2s ease-in-out infinite alternate fox-talk}.fox-placeholder.is-speaking .fox-mouth__closed{opacity:.18}.fox-stage--speaking_happy .fox-body{animation:2.4s ease-in-out infinite fox-sway}.fox-stage--speaking_happy .fox-joy{opacity:1}.fox-stage--speaking_happy .fox-eyes{opacity:0}.fox-stage--speaking_happy .fox-brow{transform:translateY(-4px)}.fox-stage--speaking_clarify .fox-body{animation:2.8s ease-in-out infinite fox-tilt}.fox-stage--speaking_clarify .fox-brow--right{transform:rotate(-14deg)translateY(-5px)}.controls{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);flex-direction:column;gap:12px;padding:16px 18px;display:flex}.controls__row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.controls__row--meta{justify-content:space-between}.btn{cursor:pointer;border:1px solid #0000;border-radius:999px;padding:11px 22px;font-size:14px;font-weight:600;transition:transform .15s,background .2s,opacity .2s}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn--primary{background:var(--fox);color:#fff8ef;box-shadow:0 12px 24px -14px #c65f1ce6}.btn--primary:hover:not(:disabled){background:var(--fox-deep)}.btn--ghost{border-color:var(--line);color:var(--ink);background:0 0}.btn--ghost:hover:not(:disabled){background:var(--surface-2)}.btn--tiny{background:var(--surface-2);border-color:var(--line);padding:6px 12px;font-size:12px}.btn--tiny.is-active{background:var(--accent-soft);color:#235f4b;border-color:#b9dccd}.controls__timer{font-variant-numeric:tabular-nums;align-items:baseline;gap:8px;margin-left:auto;display:flex}.controls__timer strong{letter-spacing:.02em;font-size:20px}.select{color:var(--ink-soft);align-items:center;gap:8px;font-size:12px;display:inline-flex}.select select{border:1px solid var(--line);background:var(--surface-2);color:var(--ink);border-radius:10px;padding:7px 10px;font-size:12px}.input{border:1px solid var(--line);background:var(--surface-2);border-radius:10px;width:128px;padding:7px 10px;font-size:12px}.input:focus{outline-offset:1px;outline:2px solid #d7b79a}.check{color:var(--ink-soft);cursor:pointer;align-items:center;gap:6px;font-size:12px;display:inline-flex}.check input{width:14px;height:14px;accent-color:var(--fox)}.mic{color:var(--ink-soft);align-items:center;gap:8px;font-size:12px;display:inline-flex}.mic--ready{color:#235f4b}.mic--error{color:var(--danger)}.mic--error .dot{background:var(--danger)}.controls__hint{color:var(--ink-soft);font-size:12px}.controls__error{color:var(--danger);background:#fbeae4;border:1px solid #f0cec4;border-radius:10px;padding:8px 10px;font-size:13px}.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);flex-direction:column;gap:12px;padding:16px 18px;display:flex}.panel header{justify-content:space-between;align-items:baseline;gap:10px;display:flex}.panel h2{letter-spacing:.01em;font-size:14px}.classroom{grid-template-columns:168px minmax(0,1fr);align-items:stretch;gap:14px;display:grid}.classroom__fox{flex-direction:column;justify-content:center;display:flex}.classroom__fox .fox-stage{aspect-ratio:1;border-radius:22px}.classroom__fox .fox-svg{width:82%}.classroom__fox .fox-stage__badge{gap:5px;padding:4px 8px;font-size:10px;top:8px;left:8px}.classroom__fox .fox-stage__note{display:none}.visual-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);flex-direction:column;gap:10px;min-width:0;min-height:320px;padding:14px 16px;display:flex}.visual-panel__head{justify-content:space-between;align-items:baseline;display:flex}.visual-panel__head h2{font-size:14px}.visual-panel__empty,.visual-panel__loading{text-align:center;border:1px dashed var(--line);color:var(--ink-soft);border-radius:14px;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:8px;padding:22px 18px;font-size:13px;display:flex}.visual-panel__empty-art{gap:6px;margin-bottom:4px;display:flex}.visual-panel__empty-art span{background:linear-gradient(145deg,#ffd9b8,#f4bb90);border-radius:8px;width:26px;height:26px}.visual-panel__empty-art span:nth-child(2){background:linear-gradient(145deg,#d9e9df,#a9cfbc);transform:translateY(-6px)}.visual-panel__empty-art span:nth-child(3){background:linear-gradient(145deg,#ffe6c2,#f0c07a)}.skeleton{background:linear-gradient(90deg,#f3e5d5 25%,#fbf1e4 50%,#f3e5d5 75%) 0 0/200% 100%;border-radius:12px;width:70%;height:72px;animation:1.4s linear infinite shimmer}@keyframes shimmer{to{background-position:-200% 0}}.visual-panel__body{flex:1;gap:12px;min-width:0;min-height:0;display:flex}.visual-panel__rail{flex-direction:column;flex:none;gap:8px;width:74px;display:flex;overflow-y:auto}.visual-panel__rail button{cursor:pointer;background:#f4e7d8;border:2px solid #0000;border-radius:10px;width:100%;padding:0;transition:border-color .16s,transform .16s;display:block;overflow:hidden}.visual-panel__rail button:hover{border-color:#d9b99a;transform:translateY(-1px)}.visual-panel__rail img{object-fit:cover;width:100%;height:54px;display:block}.visual-panel__main{flex-direction:column;flex:1;gap:8px;min-width:0;display:flex}.visual-panel__stage{border:1px solid var(--line);background:radial-gradient(circle at 50% 40%,#fff8ee,#f3e3d2);border-radius:16px;flex:1;justify-content:center;align-items:center;min-height:260px;display:flex;position:relative;overflow:hidden}.visual-panel__stage img{object-fit:contain;width:100%;height:100%;display:block}.visual-panel__toast{color:#fff8ef;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#2c211ab8;border-radius:999px;padding:6px 12px;font-size:12px;position:absolute;bottom:12px;left:12px}.visual-panel__caption{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px;font-size:13px;display:flex}.visual-panel__caption figcaption{flex-wrap:wrap;align-items:baseline;gap:6px;min-width:0;display:flex}.visual-panel__caption strong{font-size:13px}.visual-panel__links{flex:none;gap:10px;font-size:12px;display:flex}.visual-panel__miss{color:var(--ink-soft);font-size:12px}.transcript ul{flex-direction:column;gap:10px;max-height:280px;display:flex;overflow-y:auto}.transcript li{background:var(--surface-2);border-radius:12px;padding:10px 12px;font-size:13px}.transcript__who{color:var(--fox-deep);margin-bottom:2px;font-size:11px;font-weight:700;display:inline-block}.transcript__time{color:var(--ink-soft);font-variant-numeric:tabular-nums;margin-left:.75rem;font-size:.75rem}.transcript__turn--silas{background:#eef5f1}.transcript__who--silas{color:var(--accent)}.event-log ul{flex-direction:column;gap:6px;max-height:240px;font-size:12px;display:flex;overflow-y:auto}.event-log li{color:var(--ink-soft);align-items:baseline;gap:8px;display:flex}.event-log time{color:#a08b79;font-variant-numeric:tabular-nums;flex:none}.event-log code{color:var(--ink);background:var(--surface-2);border-radius:6px;flex:none;padding:1px 6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px}.debug-panel__actions{flex-wrap:wrap;gap:8px;display:flex}.metrics{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;display:grid}.metrics dt{color:var(--ink-soft);font-size:11px}.metrics dd{font-variant-numeric:tabular-nums;overflow-wrap:anywhere;font-size:12px;font-weight:600}.app__foot{color:var(--ink-soft);border-top:1px solid var(--line);padding-top:14px;font-size:12px}@media (max-width:960px){.app{padding:18px 14px 36px}.app__grid{grid-template-columns:minmax(0,1fr)}.app__head{flex-direction:column}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.fox-stage{aspect-ratio:1;border-radius:20px}}@media (max-width:520px){.controls__row .btn{flex:1}.controls__timer{border-top:1px dashed var(--line);justify-content:space-between;width:100%;margin-left:0;padding-top:8px}.classroom{grid-template-columns:1fr}.classroom__fox .fox-stage{aspect-ratio:16/7;border-radius:16px}.classroom__fox .fox-svg{width:22%}.visual-panel,.visual-panel__stage{min-height:200px}}