@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');
:root{--bg:#111614;--panel:#19201c;--line:#303830;--text:#e7e9df;--muted:#929c91;--mint:#bfda9c;--sand:#c7aa7d;font-family:'DM Sans','Microsoft YaHei',sans-serif;color-scheme:dark;background:var(--bg);color:var(--text)}*{box-sizing:border-box}body{margin:0}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:disabled{opacity:.4;cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--mint);outline-offset:5px}a{color:inherit;text-decoration:none}.topbar{height:86px;display:flex;align-items:center;justify-content:space-between;padding:0 38px;border-bottom:1px solid var(--line)}.brand{display:flex;gap:14px;align-items:center;font-size:20px;font-weight:600;letter-spacing:4px}.brand-mark{font:italic 49px Georgia;letter-spacing:-5px;color:var(--mint);width:42px}.brand small{font:8px 'IBM Plex Mono',monospace;letter-spacing:2.5px;display:block;color:var(--muted);margin-top:7px}.nav-label{font-size:12px;color:#c1c9bc;display:flex;gap:12px;align-items:center}.nav-divider{color:#53604f;margin:0 9px}.live-dot{display:inline-block;width:5px;height:5px;background:var(--mint);border-radius:50%;box-shadow:0 0 9px #badba333}.quiet-button{border:0;background:none;color:#a9b3a3;font-size:12px}.quiet-button span{margin-left:14px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 310px;margin:22px 28px 0;border:1px solid var(--line);border-radius:12px;overflow:hidden}.observation{position:relative;min-height:600px;height:calc(100vh - 325px);background:#141a17;overflow:hidden}#viewport{position:absolute;inset:0}#viewport>canvas{width:100%;height:100%;display:block;touch-action:none}.specimen-heading{position:absolute;left:30px;top:28px;pointer-events:none}.eyebrow{font:9px 'IBM Plex Mono',monospace;letter-spacing:2px;color:#98a48e}.specimen-heading h1{font-size:25px;font-weight:500;letter-spacing:2px;margin:13px 0}.specimen-heading h1 span{display:block;font:italic 14px Georgia;color:#a7afa1;letter-spacing:.4px;margin-top:9px}.specimen-tags{display:flex;gap:8px;font:8px 'IBM Plex Mono','Microsoft YaHei',monospace;color:#a3ae98}.specimen-tags span{border:1px solid #3a4336;border-radius:4px;padding:5px 7px;background:#141b1799}.view-status{position:absolute;right:24px;top:29px;display:flex;align-items:center;gap:8px;color:#b5c5a5;font-size:10px}.fps{font:9px 'IBM Plex Mono',monospace;color:#737e70;margin-left:8px}.camera-tools{position:absolute;left:25px;top:48%;display:flex;flex-direction:column;gap:6px;padding:6px;background:#182019d9;border:1px solid #3b4437;border-radius:8px;backdrop-filter:blur(12px)}.camera-tools button{border:0;border-radius:4px;background:transparent;width:33px;height:34px;font-size:20px;color:#9da996}.camera-tools button:hover,.camera-tools button.active{background:#bfda9c;color:#1e2a15}.camera-tools button#labels-button{font:13px Georgia}.camera-tools>span{height:1px;background:var(--line);margin:3px 4px}.scale-bar{position:absolute;left:30px;bottom:61px;text-align:center}.scale-bar>span{display:block;width:76px;height:6px;border:1px solid #8d9b80;border-top:0}.scale-bar small{font:9px 'IBM Plex Mono',monospace;display:block;color:#aab49f;margin-top:6px}.gesture-hint{position:absolute;bottom:63px;left:50%;transform:translateX(-50%);font-size:10px;white-space:nowrap;color:#809078;pointer-events:none}.gesture-hint b{font-weight:400;margin:0 10px;color:#52614c}.stage-caption{position:absolute;left:30px;bottom:20px;display:flex;gap:9px;align-items:center;font:8px 'IBM Plex Mono','Microsoft YaHei',monospace;letter-spacing:1px;color:#75846a}.stage-caption>span:last-child{margin-left:7px;color:#9a9e87}.tiny-cross{font-size:17px}.playback{position:absolute;right:21px;bottom:17px;display:flex;gap:14px;align-items:center;font:11px 'IBM Plex Mono',monospace}.playback button{border:0;background:none;font-size:14px;color:#cad6be;width:24px;padding:3px}.playback-rule{height:16px;width:1px;background:#3a4335}.inspector{background:var(--panel);border-left:1px solid var(--line);padding:28px 23px 20px}.section-title{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:500}.section-title small{font:8px 'IBM Plex Mono',monospace;letter-spacing:1.1px;color:#77856f}.panel-intro{font-size:20px;line-height:1.8;letter-spacing:1px;margin:23px 0 22px;color:#d0d8c5}.environment-row{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#9da994;margin-bottom:21px}.mode-chip{border:1px solid #46513a;border-radius:4px;padding:4px 7px;color:#b8c4a8;font-size:9px}.intensity label{font-size:11px;color:#aeb8a4;display:flex;justify-content:space-between}.intensity output{font:10px 'IBM Plex Mono',monospace;color:var(--mint)}input[type=range]{width:100%;accent-color:var(--mint);height:3px;margin:17px 0 23px;cursor:pointer}.stimulus-buttons{display:flex;flex-direction:column;gap:8px}.stimulus{border:1px solid #3b4536;background:#222a22;border-radius:6px;display:flex;align-items:center;text-align:left;width:100%;padding:13px 11px;gap:12px;transition:background .2s,border-color .2s}.stimulus:hover{background:#303c2c;border-color:#788c62}.stimulus.active{background:#34442b;border-color:#a4c182}.stimulus-icon{font-size:24px;color:var(--mint);width:24px;text-align:center}.stimulus strong{display:block;font-size:12px;font-weight:500;margin-bottom:5px}.stimulus small{display:block;font-size:9px;color:#9ba98f}.stimulus b{font:8px 'IBM Plex Mono',monospace;color:#7f8e74;margin-left:auto;white-space:nowrap}.behavior-card{margin:23px 0 24px;padding-bottom:17px;border-bottom:1px solid var(--line)}.behavior-card .eyebrow{font-size:8px;color:#7f8e73}.behavior-title{margin:10px 0 7px;display:flex;align-items:center;justify-content:space-between;font-size:17px}.behavior-dot{width:6px;height:6px;background:var(--mint);border-radius:50%}.behavior-card p{font-size:10px;line-height:1.8;color:#95a38b;margin:0;min-height:36px}.behavior-progress{height:2px;background:#303c2b;margin-top:13px}.behavior-progress span{display:block;height:100%;width:0;background:var(--mint);transition:width .15s}.readouts{display:grid;grid-template-columns:1fr 1fr;margin:20px 0}.readouts>div+div{border-left:1px solid #37402f;padding-left:19px}.readouts span{display:block;font-size:9px;color:#8e9d82;margin-bottom:8px}.readouts strong{font:18px 'IBM Plex Mono',monospace;font-weight:400;color:#cfdbc1}.readouts small{font:8px 'DM Sans','Microsoft YaHei',sans-serif;color:#7f8b75}.honesty-note{font-size:9px;line-height:1.9;color:#819075;display:flex;gap:9px;margin:18px 0}.honesty-note>span{border:1px solid #617155;border-radius:50%;width:12px;min-width:12px;height:12px;line-height:11px;text-align:center;margin-top:3px;font-size:8px}.export-button{width:100%;background:#bed49e;border:0;border-radius:5px;padding:12px 13px;color:#25311c;font-size:11px;display:flex;justify-content:space-between}.export-button:hover{background:#d3e8b8}.record-panel{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) 310px;border-top:1px solid var(--line);background:#161d18;min-height:176px}.trace-section{padding:21px 27px 13px;position:relative}.trace-legend{position:absolute;right:29px;top:44px;display:flex;gap:16px;font-size:8px;color:#95a488}.trace-legend span{display:flex;gap:6px;align-items:center}.trace-legend i{width:5px;height:5px;border-radius:50%}.mint{background:var(--mint)}.sand{background:var(--sand)}#trace{width:100%;height:80px;display:block;margin-top:21px}.trace-axis{display:flex;justify-content:space-between;font:8px 'IBM Plex Mono',monospace;color:#67765d}.events-section{padding:21px 23px;border-left:1px solid var(--line)}#events{margin-top:15px;max-height:115px;overflow:auto}.empty-events{font-size:10px;color:#77886c;line-height:1.8;padding-top:11px}.event{display:grid;grid-template-columns:46px 1fr;gap:7px;font-size:10px;line-height:1.6;padding:6px 0;border-bottom:1px solid #252f22}.event time{font:9px 'IBM Plex Mono',monospace;color:#839573;padding-top:3px}.event strong{font-weight:400;color:#b9c9aa}.event small{display:block;font-size:8px;color:#748868}footer{display:flex;align-items:center;justify-content:space-between;padding:20px 31px;color:#76866c;font:8px 'IBM Plex Mono','Microsoft YaHei',monospace;letter-spacing:1px}footer>span:first-child{display:flex;gap:8px;align-items:center}footer a{color:#a7b999}#loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:15px;background:#141a17;z-index:5}#loading strong{font-size:13px;font-weight:400}#loading small{font:10px 'IBM Plex Mono','Microsoft YaHei',monospace;color:var(--muted)}.loading-orbit{width:38px;height:38px;border:1px solid #44533b;border-top-color:var(--mint);border-radius:50%;animation:spin 1.4s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#toast{position:fixed;left:50%;bottom:35px;transform:translate(-50%,20px);padding:13px 21px;border:1px solid #607850;background:#263620;color:#d3e9bf;font-size:12px;border-radius:7px;z-index:20;opacity:0;transition:.2s;pointer-events:none;max-width:90vw}#toast.visible{opacity:1;transform:translate(-50%,0)}dialog{background:#1c261b;color:var(--text);border:1px solid #5a6e4c;border-radius:13px;max-width:530px;padding:38px;box-shadow:0 20px 80px #0009}dialog::backdrop{background:#0009;backdrop-filter:blur(5px)}dialog h2{font-size:24px;font-weight:400}dialog p{font-size:12px;color:#adbfa1;line-height:2}dialog a{font-size:12px;color:var(--mint)}#close-about{position:absolute;right:17px;top:10px;border:0;background:none;font-size:26px;color:#a6b399}#anatomy-labels{position:absolute;inset:0;pointer-events:none}#anatomy-labels>span{position:absolute;font-size:10px;color:#ddebcf;white-space:nowrap;padding:5px 10px 5px 24px;background:linear-gradient(90deg,#1a2918aa,#1a291800);border-left:1px solid #a9c98a}#anatomy-labels i{display:block;font:7px 'IBM Plex Mono',monospace;letter-spacing:1px;color:#8ba477;margin-top:4px}[hidden]{display:none!important}@media(min-width:1500px){.workspace{grid-template-columns:minmax(0,1fr) 340px}.record-panel{grid-template-columns:minmax(0,1fr) 340px}.inspector{padding:30px}.observation{min-height:680px}.panel-intro{margin:26px 0 29px}.stimulus{padding:17px 12px}.behavior-card{margin-top:30px}}@media(max-width:1050px){.workspace{margin:15px;grid-template-columns:minmax(0,1fr) 280px}.record-panel{grid-template-columns:minmax(0,1fr) 280px}.inspector{padding:24px 18px}.specimen-heading{left:23px}.specimen-heading h1{font-size:21px}.view-status{top:140px;left:24px;right:auto}.observation{min-height:670px}.gesture-hint{bottom:97px}.topbar{padding:0 24px}.stage-caption{font-size:7px;bottom:57px}.scale-bar{bottom:111px}.playback{bottom:20px;left:24px;right:auto}.camera-tools{left:20px}.trace-section{padding:20px}.events-section{padding:20px 18px}}@media(max-width:720px){.topbar{height:71px;padding:0 18px}.brand{font-size:17px;gap:8px}.brand small{font-size:6px;letter-spacing:1.4px}.brand-mark{font-size:42px;width:33px}.nav-label{display:none}.workspace{display:flex;flex-direction:column;margin:10px;border-radius:8px}.observation{height:64vh;min-height:440px}.specimen-heading{top:20px;left:20px}.specimen-heading h1{font-size:20px}.specimen-heading h1 span{font-size:12px}.specimen-tags{font-size:7px}.view-status{top:145px;left:20px;font-size:9px}.camera-tools{top:45%;left:15px}.camera-tools button{width:29px;height:29px}.scale-bar{left:20px;bottom:95px}.gesture-hint{left:auto;right:20px;transform:none;bottom:65px;font-size:8px}.stage-caption{left:20px;bottom:42px}.playback{left:auto;right:15px;bottom:12px}.inspector{border-left:0;border-top:1px solid var(--line);padding:23px}.panel-intro{font-size:18px;margin:15px 0;line-height:1.6}.panel-intro br{display:none}.environment-row{margin-bottom:20px}.stimulus-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.stimulus{flex-direction:column;align-items:flex-start;gap:9px;padding:12px}.stimulus b{display:none}.stimulus small{font-size:8px;line-height:1.6}.stimulus strong{font-size:11px}.behavior-card{margin:22px 0 20px}.behavior-card p{min-height:0}.readouts{margin:17px 0}.honesty-note{margin:13px 0}.record-panel{display:block}.events-section{border-left:0;border-top:1px solid var(--line);padding:20px 23px}.trace-section{padding:22px 23px}footer{padding:12px 16px 22px;gap:13px;flex-wrap:wrap;font-size:7px}footer>span:nth-child(2){order:3;width:100%}dialog{width:calc(100% - 30px);padding:28px}#anatomy-labels i{font-size:6px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}.loading-orbit{animation:none}}
@media(min-width:721px){.observation{height:100%;min-height:640px}.inspector{padding-top:23px;padding-bottom:18px}.panel-intro{font-size:18px;line-height:1.6;margin:16px 0}.environment-row{margin-bottom:15px}.stimulus{padding:11px}.behavior-card{margin:18px 0;padding-bottom:13px}.behavior-card p{min-height:30px}.readouts{margin:15px 0}.honesty-note{margin:12px 0}.intensity input{margin-bottom:18px}.record-panel{min-height:164px}}
.quick-stimuli{position:absolute;bottom:95px;left:50%;transform:translateX(-50%);text-align:center;z-index:2;white-space:nowrap}.quick-stimuli>small{display:block;margin-bottom:10px;font-size:10px;letter-spacing:.5px;color:#bacaab;text-shadow:0 1px 5px #111}.quick-stimuli>div{display:flex;gap:6px;padding:5px;background:#172015e8;border:1px solid #4b5b40;border-radius:9px;backdrop-filter:blur(12px)}.quick-stimuli button{background:#2a3824;border:1px solid #506143;border-radius:5px;padding:10px 14px;font-size:11px;color:#d4e4c3}.quick-stimuli button:hover,.quick-stimuli button.active{background:#bad596;color:#1d2a15}@media(max-width:720px){.quick-stimuli{bottom:101px}.quick-stimuli button{padding:9px 10px;font-size:10px}.quick-stimuli>small{font-size:9px}.scale-bar{bottom:174px}.camera-tools{top:35%}}
@media(min-width:721px){.observation{height:calc(100dvh - 128px);min-height:440px}.inspector{height:calc(100dvh - 128px);min-height:440px;overflow-y:auto}.camera-tools{top:36%}.gesture-hint{bottom:66px}.scale-bar{bottom:166px}.stage-caption{bottom:44px}.playback{bottom:13px}}