:root{font-family:"PingFang SC","Hiragino Sans GB",sans-serif;color:#304960;background:#f7f9fb;--muted:#7c8d9b;--line:#dfe6ed}*{box-sizing:border-box}body{margin:0;-webkit-font-smoothing:antialiased}button,input{font:inherit}button{border:0;cursor:pointer;color:inherit;background:transparent}button:focus-visible,input:focus-visible,#character:focus-visible{outline:3px solid #84b5ef;outline-offset:4px}header,main,footer{max-width:1400px;margin:auto}header{display:flex;justify-content:space-between;align-items:center;padding:28px 44px}.brand{font-size:20px;font-weight:650;letter-spacing:.06em}.brand span{font-size:10px;font-weight:400;color:var(--muted);margin-left:17px}header p{font-size:11px;color:var(--muted);margin:0}main{padding:5px 44px 30px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:38px}.workbench{min-width:0}.stage{height:610px;position:relative;overflow:hidden;border-radius:28px;background:radial-gradient(ellipse at 15% 70%,#fff6dd,transparent 50%),radial-gradient(ellipse at 85% 5%,#b7dbff,transparent 70%),#eaf4ff;isolation:isolate}.stage[data-background=paper]{background:#faf8f1}.stage[data-background=dark]{background:radial-gradient(ellipse at 50% 40%,#375476,#1e314e)}.stage[data-background=grid]{background-color:#fff;background-image:conic-gradient(#eaf0f4 25%,transparent 0 50%,#eaf0f4 0 75%,transparent 0);background-size:24px 24px}.stage-toolbar{position:absolute;top:22px;left:26px;right:26px;display:flex;align-items:center;justify-content:space-between;z-index:2;font-size:10px;color:#6789a7;letter-spacing:.08em}.stage-toolbar button{color:inherit;padding:8px;font-size:10px}.stage[data-background=dark] .stage-toolbar,.stage[data-background=dark] .stage-hint{color:#acc4df}#character{width:550px;height:550px;position:absolute;left:50%;top:48%;transform:translate(-50%,-50%) scale(var(--size,1));max-width:100%;outline-offset:-24px;touch-action:pan-y;cursor:pointer}#character svg{display:block;width:100%;height:100%;overflow:visible}.speech{position:absolute;bottom:52px;left:50%;transform:translateX(-50%);padding:13px 21px;margin:0;white-space:nowrap;background:#ffffffed;border-radius:20px 20px 20px 6px;font-size:13px;color:#527396;box-shadow:0 6px 30px #497fad0a}.stage-hint{position:absolute;bottom:22px;left:0;right:0;text-align:center;font-size:10px;color:#809bb5}.moods{display:flex;flex-wrap:wrap;gap:8px;margin-top:19px}.moods button{padding:10px 18px;border-radius:24px;background:#eaf0f6;color:#7790a5;font-size:12px}.moods button[aria-pressed=true]{background:#397add;color:#fff}.moods button:hover{background:#d7e7f6}.moods button[aria-pressed=true]:hover{background:#286bd1}.preview-tools{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:21px 2px}.backgrounds,.exports{display:flex;align-items:center;gap:12px}.backgrounds>span{font-size:10px;color:var(--muted);margin-right:5px}.backgrounds button{width:20px;height:20px;border-radius:50%;position:relative;box-shadow:inset 0 0 0 1px #b9cadb}.backgrounds button[aria-pressed=true]:after{content:"";position:absolute;inset:-4px;border:1px solid #7398c0;border-radius:50%}.backgrounds button[data-background=sky]{background:#bbdbfc}.backgrounds button[data-background=paper]{background:#faf8f1}.backgrounds button[data-background=dark]{background:#294569}.backgrounds button[data-background=grid]{background:conic-gradient(#e1e8f0 25%,#fff 0 50%,#e1e8f0 0 75%,#fff 0);background-size:9px 9px}.exports{gap:18px}.exports button{padding:8px 0;font-size:11px;color:#4d79a3}.small-previews{display:flex;align-items:center;gap:17px;border-top:1px solid var(--line);padding-top:17px;min-height:84px}.small-previews>span{font-size:10px;line-height:1.7;color:var(--muted)}.small-previews svg{display:block;width:72px;height:72px}.small-previews #sampleSmall svg{width:47px;height:47px}.small-previews p{font-size:10px;color:#8b9cad;margin:0}.status{font-size:10px;color:#8b9cad;min-height:18px;margin:14px 0 0}.section-title{display:flex;justify-content:space-between;align-items:center;margin:5px 0 14px}.section-title h1,.section-title h2{font-size:12px;font-weight:500;margin:0}.section-title>span,.section-title>button{font-size:10px;color:#96a6b3;padding:0}.reference img{display:block;width:100%;border-radius:16px}.reference p{font-size:11px;color:var(--muted);line-height:1.9;margin:13px 0 0}.adjust{border-top:1px solid var(--line);padding-top:20px;margin-top:25px}.adjust label,.explode-label{display:flex;justify-content:space-between;font-size:11px;color:#72889e;margin:19px 0 9px}output{font-variant-numeric:tabular-nums;color:#5480aa}input[type=range]{width:100%;margin:0;accent-color:#659cde;height:18px}.layers-section{border-top:1px solid var(--line);padding-top:20px;margin-top:24px}.layers-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;font-size:12px;padding:0;text-align:left}.layers-toggle>span:last-child{font-size:19px;font-weight:300;color:#859bb1}.layer-summary,.direction-note,.layer-hint{font-size:10px;line-height:1.9;color:#8b9cad}.layer-summary{margin:9px 0 0}.layer-actions{display:flex;gap:15px;margin:15px 0 8px}.layer-actions button{padding:5px 0;font-size:10px;color:#5382ae}.layer-row{display:flex;align-items:center;gap:8px;border-bottom:1px solid #e8edf3;min-height:35px}.layer-row input{accent-color:#6294cf;width:13px;height:13px;margin:0}.layer-row button{flex:1;display:flex;align-items:center;justify-content:space-between;text-align:left;font-size:11px;padding:8px 2px}.layer-row small{font-size:9px;color:#9babb9;font-family:monospace}.layer-row button[aria-pressed=true]{color:#2b73cc;font-weight:600}.layer-hint{margin-bottom:0}.direction-note{border-top:1px solid var(--line);padding-top:20px;margin-top:24px}footer{padding:20px 44px 28px;display:flex;justify-content:space-between;font-size:9px;color:#91a3b2}svg [data-layer]{transition:opacity .2s}svg.is-inspecting [data-layer]{opacity:.16}svg.is-inspecting [data-layer].is-selected{opacity:1}svg [data-layer].is-hidden{display:none}
@media(max-width:1050px){header{padding-inline:24px}main{padding-inline:24px;gap:25px;grid-template-columns:minmax(0,1fr) 270px}.stage{height:565px}#character{width:500px;height:500px}.moods button{padding:9px 14px}.preview-tools{gap:8px}.exports{gap:12px}.backgrounds{gap:10px}}
@media(max-width:760px){header{padding:24px 20px}header p{display:none}.brand{font-size:18px}main{padding:0 16px 24px;display:flex;flex-direction:column;gap:25px}.stage{height:500px;border-radius:22px}#character{width:460px;height:460px;top:47%}.stage-toolbar{left:19px;right:19px;top:18px}.moods{gap:6px;margin-top:14px}.moods button{padding:9px 12px;font-size:11px}.speech{font-size:12px;bottom:50px;padding:12px 17px}.preview-tools{padding-block:16px}.backgrounds{gap:9px}.backgrounds>span{margin-right:0}.exports{gap:12px}.exports button{font-size:10px}.small-previews{gap:12px}.small-previews p,.small-previews>span{font-size:9px}aside{display:grid;grid-template-columns:1fr 1fr;gap:22px 20px}.reference p{font-size:10px}.adjust{border:0;padding:0;margin:0}.layers-section,.direction-note{grid-column:1/-1;margin-top:0}.section-title h1,.section-title h2{font-size:11px}.section-title>span{display:none}footer{padding-inline:20px;gap:15px;font-size:8px}}
@media(max-width:360px){.stage{height:460px}#character{height:420px}.exports{gap:8px}.backgrounds button{width:17px;height:17px}.moods button{padding:8px 11px}}@media(prefers-reduced-motion:reduce){*,*:before{transition:none!important}}
/* Emotion lab: quiet controls leave the character as the focal point. */
.stage{height:590px}#character{width:550px;height:540px;top:46%}.speech{max-width:85%;white-space:normal;text-align:center;line-height:1.65;overflow-wrap:anywhere;max-height:105px;overflow:auto}.action-bar{display:flex;align-items:center;flex-wrap:wrap;gap:7px;padding:15px 2px;border-bottom:1px solid var(--line)}.action-bar>span{font-size:10px;color:var(--muted);margin-right:6px}.action-bar button{font-size:11px;padding:8px 12px;background:#edf2f8;border-radius:8px}.action-bar button:hover{background:#dbe9f8}.library-heading{display:flex;align-items:center;justify-content:space-between;padding-top:24px;gap:15px}.library-heading h2{font-size:15px;margin:0;font-weight:550}.library-heading p{font-size:10px;color:var(--muted);margin:8px 0 0}.library-heading button{font-size:11px;color:#4d7cae;padding:9px 12px;border:1px solid #cdddeb;border-radius:20px;white-space:nowrap}.library-heading button[aria-pressed=true]{background:#dfebfa}.group-tabs{display:flex;gap:20px;border-bottom:1px solid var(--line);margin-top:17px}.group-tabs button{padding:12px 0;font-size:12px;color:var(--muted);border-bottom:2px solid transparent}.group-tabs small{font-size:9px;margin-left:3px;opacity:.65}.group-tabs button[aria-pressed=true]{color:#3777c7;border-color:#6495d6}.moods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:15px}.moods button{padding:13px 12px;border-radius:10px;display:flex;align-items:center;gap:10px;text-align:left;background:#eef2f7;color:#536e87}.moods small{font-size:9px;opacity:.55;font-variant-numeric:tabular-nums}.moods span{font-size:11px}.current-state{font-size:10px;color:#8199b0;margin:13px 0 0}.story-section{border-top:1px solid var(--line);margin-top:22px;padding-top:19px}#scenes{display:grid;gap:8px}#scenes button{display:flex;flex-direction:column;gap:5px;text-align:left;background:#eaf0f7;padding:12px 14px;border:1px solid transparent;border-radius:10px}#scenes button span{font-size:11px}#scenes button small{font-size:9px;color:#8199af}#scenes button[aria-pressed=true]{border-color:#8fb8e5;background:#dfedfc}#flowStatus{font-size:10px;line-height:1.8;color:#7e95aa;min-height:36px;margin-bottom:0}.protocol{border-top:1px solid var(--line);padding-top:18px;font-size:11px;color:#7590a9}.protocol summary{cursor:pointer}.protocol p{font-size:10px;line-height:1.8}.protocol textarea{resize:vertical;width:100%;border:1px solid #ccdaea;border-radius:8px;padding:10px;background:#fff;color:#527396;font:11px/1.7 monospace}.protocol button{background:#e0ebf8;border-radius:7px;padding:8px 12px;margin-top:8px;font-size:11px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:1050px){.moods{grid-template-columns:repeat(3,minmax(0,1fr))}.group-tabs{gap:13px}.group-tabs button{font-size:11px}#character{width:490px;height:490px}.stage{height:540px}.action-bar{gap:5px}.action-bar button{padding:8px 10px}}
@media(max-width:760px){.stage{height:490px}#character{width:440px;height:440px;top:44%}.action-bar>span{display:none}.action-bar{gap:5px}.action-bar button{font-size:10px;padding:8px 9px}.library-heading h2{font-size:14px}.group-tabs{justify-content:space-between;gap:6px}.group-tabs button{font-size:11px}.moods{grid-template-columns:repeat(3,minmax(0,1fr))}.moods button{padding:12px 10px;gap:7px}.story-section,.protocol{grid-column:1/-1;margin-top:0}.story-section{grid-row:2}.adjust{grid-column:2;grid-row:1}.layers-section{grid-row:3}.direction-note{margin:0}.speech{bottom:46px}header .brand span{margin-left:12px}.preview-tools{flex-wrap:wrap}}

@media(max-width:760px){.action-bar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.action-bar button{padding:10px 4px}}
.stage-playback{display:flex;gap:10px;align-items:center}.stage-playback [hidden]{display:none}.stage[data-entering=true] .speech{opacity:0;pointer-events:none}.speech{transition:opacity .2s ease-out}.action-bar .entrance-trigger{background:#dceaff;color:#316daf}.action-bar .entrance-trigger[aria-pressed=true]{background:#c7dcfa}.facing-control{padding:0;margin:18px 0 20px;border:0;min-width:0}.facing-control legend{font-size:11px;color:#72889e;margin-bottom:10px}.facing-control #facing{display:flex;background:#eaf0f7;border-radius:9px;padding:3px;gap:3px}.facing-control button{flex:1;font-size:11px;padding:8px;border-radius:7px}.facing-control button[aria-pressed=true]{background:#fff;color:#3576c5;box-shadow:0 1px 4px #446b9610}.facing-control p{font-size:10px;line-height:1.8;color:#8199af;margin:9px 0 0}@media(max-width:760px){.facing-control p{font-size:9px}.facing-control button{padding:7px}.stage-playback{gap:2px}.stage-toolbar{letter-spacing:0}}