:root{font-family:Noto Sans TC,sans-serif;color:#344b3d;background:#f7f7ef;font-synthesis:none;font-weight:400;--forest:#2f5d3a;--muted:#7a8577;--border:#e1e4d8;--cream:#f3ecd9}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible,a:focus-visible{outline:2px solid #63835b;outline-offset:4px}button{transition:background .18s,transform .18s,border-color .18s}button:hover{transform:translateY(-1px)}button:active{transform:translateY(0)}a{color:inherit;text-decoration:none}.topbar{height:90px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid var(--border);background:#fafbf5}.brand{display:flex;align-items:center;gap:13px;font-size:19px;font-weight:600;letter-spacing:2px}.brand-mark{display:grid;place-items:center;width:43px;height:43px;border:1px solid #c9d2bc;border-radius:13px;color:var(--forest);background:#eff2e6}.brand small{display:block;font-size:9px;letter-spacing:3px;color:#87927d;margin-top:4px;font-weight:500}.header-center{font-size:12px;letter-spacing:2px;color:#7d8975;display:flex;align-items:center;gap:10px}.tiny-dot{width:5px;height:5px;border-radius:50%;background:#779465;display:inline-block}.demo-badge{display:flex;align-items:center;gap:8px;font-size:11px;border:1px solid #d9dfca;padding:8px 13px;border-radius:30px;background:#f0f3e6;color:#667a4f;letter-spacing:.4px}.demo-badge>span{height:6px;width:6px;background:#89a365;border-radius:50%}.workspace{display:grid;grid-template-columns:277px minmax(0,1fr);min-height:calc(100dvh - 90px)}.sidebar{padding:33px 23px 18px;background:#fafbf5;border-right:1px solid var(--border);display:flex;flex-direction:column}.eyebrow{font-size:9px;letter-spacing:2.4px;color:#7c896f;font-weight:600}.sidebar-intro h1{font-family:"Noto Serif TC",serif;font-weight:600;font-size:23px;margin:11px 0 10px;letter-spacing:1.5px}.sidebar-intro p{font-size:11px;color:#85907d;line-height:1.9;margin:0 0 32px}.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.section-heading h2{font-size:12px;font-weight:600;letter-spacing:1px;margin:0}.section-heading>span{font-family:monospace;font-size:10px;color:#929c88}.agent-list{list-style:none;padding:0;margin:0}.agent-list li+li{margin-top:10px}.agent-card{width:100%;display:flex;align-items:center;text-align:left;padding:14px 11px;background:#f3f5eb;border:1px solid #e7eadc;border-radius:8px;gap:11px}.agent-card:hover{background:#eaf0e0}.agent-card.selected{border-color:#80976a;background:#eaf0e0}.avatar{width:43px;height:45px;flex-shrink:0;background:#ebe4ce;position:relative;border-radius:10px;overflow:hidden}.avatar-face{position:absolute;width:18px;height:21px;border-radius:40% 40% 45% 45%;background:#eac2a0;top:10px;left:13px}.avatar-hair{position:absolute;z-index:1;width:23px;height:13px;top:7px;left:10px;background:#70452e;clip-path:polygon(0 36%,25% 0,84% 7%,100% 35%,95% 100%,67% 66%,0 100%)}.avatar-shirt{position:absolute;width:33px;height:23px;border-radius:40% 40% 0 0;bottom:-7px;left:5px;background:#d4a26b}.avatar-1{background:#e1e9db}.avatar-1 .avatar-hair{background:#303c33}.avatar-1 .avatar-shirt{background:#71927f}.agent-card-content{display:flex;flex-direction:column;gap:7px}.agent-card strong{font-size:12px;font-weight:500}.agent-state{display:flex;gap:5px;align-items:center;font-size:10px;color:#7e8975}.agent-state i,.status-pill i{width:5px;height:5px;border-radius:50%;display:inline-block}.card-arrow{margin-left:auto;font-size:15px;color:#8e9c7e}.demo-controls{margin-top:34px;padding-top:25px;border-top:1px solid var(--border)}.demo-controls .section-heading{margin-bottom:9px}.demo-controls>p{font-size:10px;color:#8b9580;margin:0 0 18px}.event-button{width:100%;padding:12px 8px;border:1px solid #dce2d1;background:transparent;border-radius:6px;font-size:10px;letter-spacing:.1px;text-align:left;margin-bottom:9px;white-space:nowrap}.event-button>span{font-size:16px;vertical-align:-1px;margin:0 5px}.event-button.primary{background:#355b3c;color:#f5f5e5;border-color:#355b3c}.event-button.primary:hover{background:#456b49}.event-button:hover{background:#eaf0e1}.button-pair{display:grid;grid-template-columns:1fr 1fr;gap:9px}.button-pair button{background:transparent;border:1px solid #dce2d1;border-radius:6px;padding:10px 4px;font-size:10px}.button-pair button:hover{background:#eaf0e1}.sidebar-note{display:flex;align-items:flex-start;gap:9px;color:#8b977f;margin:29px 0 35px}.sidebar-note svg{flex-shrink:0;margin-top:3px}.sidebar-note p{font-size:10px;line-height:1.9;margin:0}.sidebar-footer{margin-top:auto;display:flex;justify-content:space-between;font-size:8px;letter-spacing:1.8px;color:#9aa38e}.main-content{padding:21px 25px 0;min-width:0;background:#f6f7ef;display:flex;flex-direction:column}.scene-stage{position:relative;background:#eeeddf;border:1px solid #e2e3d2;border-radius:12px;overflow:hidden;height:calc(100dvh - 299px);min-height:480px;flex:1}.scene-stage>div:has(>canvas){position:absolute!important;inset:0}.scene-heading{position:absolute;left:29px;top:26px;z-index:2;pointer-events:none}.scene-heading h2{font-family:"Noto Serif TC",serif;letter-spacing:1.7px;font-size:24px;font-weight:600;margin:10px 0 9px}.scene-heading p{font-size:10px;letter-spacing:1px;color:#8a917e;margin:0}.scene-location{position:absolute;top:29px;right:28px;z-index:2;font-size:10px;color:#647658;letter-spacing:1px;pointer-events:none}.scene-location .tiny-dot{margin-right:7px}.location-sub{display:block;font-size:8px;color:#929a86;letter-spacing:1px;padding-top:9px;text-align:right}.scene-caption{position:absolute;bottom:23px;left:25px;display:flex;gap:9px;align-items:center;font-size:10px;color:#7b886e;pointer-events:none;letter-spacing:.6px}.caption-icon{font-size:21px}.view-controls{display:flex;align-items:center;gap:12px;position:absolute;right:23px;bottom:19px;font-size:9px;color:#818b74}.view-controls button{height:30px;width:32px;background:#f8f8edc9;border:1px solid #daddc9;border-radius:6px;font-size:19px}.name-tag{background:#fafbefed;border:1px solid #d8dfc9;border-radius:20px;padding:5px 10px;color:#53664d;font-size:10px;display:flex;align-items:center;gap:5px;box-shadow:0 3px 10px #4b513815;white-space:nowrap}.name-tag i{width:5px;height:5px;border-radius:50%}.name-tag.is-selected{border-color:#789365}.event-log{margin-top:17px;border:1px solid var(--border);border-radius:9px;background:#fafbf5;padding:17px 21px;height:135px;flex-shrink:0;overflow:hidden}.log-heading{display:flex;align-items:center;gap:10px}.log-heading h2{margin:0;font-size:11px;font-weight:500;letter-spacing:.8px}.log-icon{font-size:18px;color:#7c8f68;line-height:1}.log-live{margin-left:auto;color:#88987c;font-size:9px;display:flex;align-items:center;gap:5px}.log-live i{width:4px;height:4px;background:#8ca175;border-radius:50%}.event-log ol{list-style:none;padding:0;margin:15px 0 0;height:67px;overflow:auto}.event-log li{display:flex;align-items:flex-start;gap:11px;font-size:10px;color:#788570;margin-bottom:9px;line-height:1.6}.log-time{font-family:monospace;color:#a0aa94;font-size:9px;margin-top:1px}.log-dot{height:4px;width:4px;border-radius:50%;background:#a9b692;margin-top:6px;flex-shrink:0}.log-label{color:#8e9a82;margin-right:10px;font-size:9px}.main-footer{display:flex;justify-content:space-between;padding:14px 2px;font-size:9px;letter-spacing:.7px;color:#939c87}.footer-leaf{margin-left:10px;color:#8a9d74}.info-panel{position:absolute;z-index:10;right:20px;top:105px;width:266px;background:#fafbf5f5;border:1px solid #d7deca;padding:22px;border-radius:10px;box-shadow:0 10px 40px #45573712}.info-panel.is-closed{visibility:hidden;pointer-events:none}.panel-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.panel-top button{border:0;background:transparent;font-size:22px;color:#89937c;padding:0 3px;line-height:1}.profile-monogram{display:grid;place-items:center;color:#fff8e8;width:48px;height:48px;border-radius:14px;font-family:serif;font-size:27px}.info-panel h2{font-size:19px;font-family:"Noto Serif TC",serif;margin:15px 0 7px;font-weight:600}.agent-role{font-size:10px;color:#8b9580;margin:0 0 15px}.status-pill{font-size:10px;background:#edf1e4;border:1px solid #dde4d1;border-radius:20px;padding:5px 9px;display:inline-flex;align-items:center;gap:6px}.task-block{border-top:1px solid var(--border);margin-top:22px;padding-top:18px}.task-block>span{font-size:9px;color:#929b87;letter-spacing:1px}.task-block p{font-size:12px;line-height:1.9;margin:8px 0 19px}.panel-note{font-size:9px;line-height:1.9;color:#8e9981;border-top:1px solid var(--border);padding-top:13px}.loading,.scene-error{position:absolute;inset:0;display:grid;place-items:center;background:#eeeddf;color:#738268;font-size:13px;z-index:12}.startup-message{min-height:100dvh;display:grid;align-content:center;justify-content:center;gap:16px;padding:32px}.startup-message h1{font-size:22px}.startup-message button{background:#355b3c;color:#fff;border:0;border-radius:5px;padding:12px}@media(min-width:1600px){.sidebar{padding-top:45px}.scene-heading{top:35px;left:37px}.scene-stage{min-height:600px}.scene-heading h2{font-size:28px}}@media(max-width:1100px){.workspace{grid-template-columns:242px minmax(0,1fr)}.sidebar{padding:27px 16px 18px}.topbar{padding:0 25px}.main-content{padding:18px 17px 0}.scene-heading{left:22px}.scene-heading h2{font-size:21px}.header-center{font-size:10px}.scene-location{display:none}.view-controls>span{display:none}.main-footer>span:last-child{display:none}.event-button{font-size:9px}.info-panel{width:235px;right:12px;padding:18px}}@media(max-width:760px){.topbar{height:74px;padding:0 18px}.brand{font-size:16px;gap:10px}.brand-mark{width:36px;height:36px}.brand small{font-size:7px}.header-center{display:none}.demo-badge{font-size:9px;padding:7px 9px}.workspace{display:flex;flex-direction:column;min-height:calc(100dvh - 74px)}.sidebar{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:18px;border-right:0;border-bottom:1px solid var(--border)}.sidebar-intro{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between}.sidebar-intro .eyebrow,.sidebar-intro p,.sidebar>.section-heading,.sidebar-note,.sidebar-footer{display:none}.sidebar-intro h1{font-size:18px;margin:0 0 3px}.agent-list{grid-column:1/-1;display:flex;gap:12px}.agent-list li{flex:1}.agent-list li+li{margin:0}.agent-card{padding:9px;gap:8px}.agent-card strong{font-size:11px}.avatar{width:37px;height:39px}.agent-state{font-size:9px}.demo-controls{grid-column:1/-1;margin:0;padding:0;border:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}.demo-controls .section-heading{grid-column:1/-1;margin:2px 0 0}.demo-controls .section-heading h2{font-size:10px;color:#7b896c}.demo-controls>p{display:none}.event-button{margin:0;padding:9px 5px;font-size:8px;text-align:center}.event-button>span{font-size:12px;margin:0 2px}.button-pair{grid-column:1/-1}.button-pair button{padding:7px}.main-content{padding:12px 12px 0}.scene-stage{height:470px;min-height:470px;flex:none}.scene-heading{left:19px;top:20px}.scene-heading h2{font-size:20px}.scene-caption{left:17px;bottom:20px;font-size:9px}.event-log{height:140px;padding:15px;margin-top:12px}.main-footer{font-size:8px;padding:14px 2px}.info-panel{top:107px;width:min(255px,calc(100% - 24px));padding:18px}.info-panel h2{font-size:17px}.profile-monogram{width:35px;height:35px;font-size:22px}.task-block{margin-top:15px;padding-top:12px}.task-block p{margin-bottom:12px}.panel-note{font-size:8px}.event-log li{font-size:9px}.log-label{font-size:8px;margin-right:7px}}.button-pair small{display:block;font-size:8px;opacity:.7;margin-bottom:4px;letter-spacing:.3px}@media(max-width:760px){.demo-controls{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.event-button{min-width:0;white-space:normal;line-height:1.7}}@media(prefers-reduced-motion:reduce){button{transition:none}}.asset-badge{position:absolute;left:28px;bottom:52px;z-index:6;padding:4px 8px;border:1px solid #cbd4bd;border-radius:4px;background:#f6f7ebd9;color:#65775b;font-size:9px;letter-spacing:.5px;pointer-events:none}@media(max-width:760px){.asset-badge{left:17px;bottom:48px}}.scene-stage-typing .scene-heading,.scene-stage-typing .scene-location{background:#f3ecd9d1;border-radius:8px;padding:12px 14px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}@media(min-width:761px){.agent-list{max-height:clamp(190px,31vh,330px);overflow-y:auto;padding-right:3px}.agent-list li+li{margin-top:6px}.agent-card{padding:8px;gap:8px}.avatar{width:36px;height:38px}.agent-card-content{gap:4px}.demo-controls{margin-top:18px;padding-top:16px}.sidebar-note{margin:16px 0 20px}}@media(max-width:760px){.agent-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;max-height:none;overflow:visible}.agent-list li{min-width:0}.agent-list li+li{margin:0}.agent-card{min-width:0;padding:6px;gap:6px}.avatar{width:29px;height:32px}.avatar-face{transform:scale(.8);transform-origin:top left;left:9px;top:8px}.avatar-hair{transform:scale(.8);transform-origin:top left;left:7px;top:5px}.avatar-shirt{transform:scale(.8);transform-origin:bottom left;left:3px}.agent-card-content{min-width:0;gap:4px}.agent-card strong{font-size:10px;white-space:nowrap}.agent-state{font-size:8px;white-space:nowrap}.card-arrow{font-size:12px}}.demo-controls select{width:100%;margin:0 0 10px;padding:8px;border:1px solid var(--border);border-radius:6px;background:#fafbf5;color:#53664d;font:inherit;font-size:10px}.replay-speed{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px;font-size:9px;color:#71806a}.replay-speed input{width:55%}.source-replay{background:#edf0e4;color:#536b49}.source-live{background:#e7eef0;color:#446476}.task-meta{margin-top:-10px}.trace-ids{font-family:monospace;font-size:9px;line-height:1.6;color:#7d8973;overflow-wrap:anywhere}.activity-block{border-top:1px solid var(--border);margin-top:12px;padding-top:10px}.activity-block h3{margin:0 0 6px;font-size:10px;font-weight:600;color:#71806a}.activity-list{max-height:140px;overflow:auto;overscroll-behavior:contain;padding:0 4px 0 0;margin:0;list-style:none}.activity-list li{font-size:9px;line-height:1.6;color:#7b8675;border-bottom:1px solid #edf0e8;padding:3px 0}.activity-list a{color:#527e65;text-decoration:underline}.info-panel{max-height:calc(100% - 125px);overflow:auto}.event-log ol{height:67px}.info-panel{top:82px;max-height:calc(100% - 100px)}@media(max-width:760px){.info-panel{position:fixed;top:82px;right:12px;bottom:12px;width:min(255px,calc(100% - 24px));max-height:none;overflow:auto}}.agent-task{max-width:145px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:8px;color:#8b9580}.demo-controls button:disabled{opacity:.45;cursor:not-allowed}.name-tag,.agent-card strong,.agent-name{letter-spacing:0;word-spacing:.14em;white-space:pre}@media(max-width:760px){.name-tag{font-size:8px;padding:2px 5px;line-height:1.25}.name-tag:not(.is-selected){display:none}}