:root{--bg-page:#f6f3e9;--bg-surface:#fefcf8;--text-primary:#333a33;--text-secondary:#767d71;--border-soft:#dfdfd0;--accent-active:#436448;--radius-control:14px;--radius-card:16px;--radius-panel:20px;--shadow-hard:0 8px 0 #33333306;color:var(--text-primary);font-family:Inter,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:var(--bg-page);height:100dvh;min-height:600px;display:flex;flex-direction:column;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;border:0;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #b5c28c;outline-offset:4px}button:disabled{cursor:wait;opacity:.6}button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}[hidden]{display:none!important}.topbar{height:82px;flex-shrink:0;padding:0 42px;display:flex;align-items:center;position:relative;z-index:3}.wordmark{display:flex;align-items:center;gap:9px;color:var(--text-primary);text-decoration:none;font-size:26px;font-weight:700;letter-spacing:-1.3px}.wordmark svg{width:30px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}.study-label{margin-left:22px;padding:5px 12px;border-left:1px solid var(--border-soft);font-size:11px;color:var(--text-secondary);letter-spacing:.04em}.top-actions{margin-left:auto;display:flex;gap:7px;align-items:center}.icon-button{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-control);background:transparent;transition:background .18s}.icon-button:hover,.icon-button[aria-pressed=true]{background:#e7e9db}.language-button{background:transparent;font-size:11px;font-weight:600;height:44px;width:44px}#stage{position:relative;flex:1;min-height:0}#canvas-mount{position:absolute;inset:0;touch-action:none;overflow:hidden}canvas{display:block;width:100%;height:100%;outline:none}.intro{pointer-events:none;position:absolute;top:27px;left:7%;max-width:260px;z-index:1}.eyebrow,.panel-eyebrow{font-size:10px;letter-spacing:.18em;color:var(--text-secondary);font-weight:600}.intro h1{font-weight:500;letter-spacing:-1.4px;font-size:36px;line-height:1.45;margin:12px 0 10px;white-space:pre-line}.intro p{font-size:12px;line-height:1.9;color:var(--text-secondary);margin:0;max-width:230px}.scene-tools{position:absolute;right:40px;top:20px;display:flex;gap:4px;z-index:2}.state-badge{position:absolute;left:50%;top:13px;transform:translateX(-50%);display:flex;align-items:center;gap:7px;font-size:11px;color:#66705e;pointer-events:none;z-index:1}.status-dot{width:5px;height:5px;background:#82a272;border-radius:100%}.orbit-hint{position:absolute;bottom:5px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:10px;color:#989d8c;pointer-events:none}.controls{position:relative;z-index:2;height:155px;flex-shrink:0;display:flex;align-items:center;flex-direction:column;padding-top:7px;background:linear-gradient(transparent,var(--bg-page) 20%)}.action-strip{display:flex;gap:3px;margin-bottom:13px;background:#eaece029;padding:4px;border-radius:30px;border:1px solid #dddfd060}.action-strip button{background:transparent;border-radius:24px;padding:10px 18px;font-size:12px;color:var(--text-secondary);min-height:40px;transition:all .2s}.action-strip button:hover{background:#e5e8d7}.action-strip button[aria-pressed=true]{background:#e2e7d5;color:#3d5335}.main-actions{display:flex;gap:10px}.primary-button,.secondary-button{height:47px;padding:0 24px;border-radius:var(--radius-control);display:inline-flex;align-items:center;justify-content:center;gap:9px;font-size:12px;font-weight:500;transition:transform .2s,background .2s}.primary-button{background:var(--accent-active);color:#f6faec;box-shadow:0 3px 0 #324c37}.primary-button:hover{background:#35563c;transform:translateY(-1px)}.secondary-button{background:#fefcf880;border:1px solid var(--border-soft);min-width:113px}.secondary-button:hover{background:var(--bg-surface)}.prototype-note{font-size:9px;color:#9a9f92;margin-top:14px;letter-spacing:.04em}.speech{position:absolute;top:42%;left:calc(50% + 178px);width:218px;border-radius:20px 20px 20px 4px;padding:17px 19px;background:#fffdf9e8;border:1px solid #e4e6d699;box-shadow:0 10px 30px #4a543707;transition:opacity .3s,transform .3s;z-index:1;pointer-events:none}.speech p{font-size:13px;line-height:1.85;margin:0}.speech>span{font-size:9px;color:#909784;display:block;margin-top:8px}.speech-progress{height:2px;background:#e9eddf;border-radius:5px;margin-top:11px;overflow:hidden}.speech-progress i{display:block;height:100%;background:#a8bb86;width:0}.speech.quiet{opacity:0;transform:translateY(5px)}.loading,.error{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;background:var(--bg-page);font-size:13px;z-index:10}.loader{height:25px;width:25px;border:2px solid #dbe0d0;border-top-color:#76976d;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error button{padding:12px 20px;background:#dfe7d3;border-radius:14px}.diagnostics{position:absolute;right:44px;top:77px;z-index:5;padding:18px;width:278px;border:1px solid var(--border-soft);background:#fefcf8f5;backdrop-filter:blur(12px);border-radius:var(--radius-card);box-shadow:0 20px 80px #354d2210}.diagnostics .panel-eyebrow{margin:0 0 16px;letter-spacing:.06em}.metrics{display:flex;justify-content:space-between}.metrics span{display:flex;flex-direction:column;gap:5px}.metrics strong{font-size:22px;font-weight:500;font-variant-numeric:tabular-nums}.metrics small{font-size:9px;color:var(--text-secondary)}.mono{font:10px ui-monospace,monospace;color:var(--text-secondary);margin:18px 0 12px}.segment{display:flex;gap:4px}.segment button{height:35px;flex:1;border-radius:8px;background:#edf0e5;font-size:10px}.segment button[aria-pressed=true]{background:#496844;color:white}.small-note{font-size:10px;line-height:1.7;color:var(--text-secondary);margin:14px 0}.weight-list{font:9px ui-monospace,monospace;line-height:1.8;color:#89917e}.wardrobe{position:fixed;inset:94px 26px 26px auto;width:324px;max-height:calc(100dvh - 120px);margin:0;padding:25px;border:1px solid var(--border-soft);border-radius:var(--radius-panel);background:#fefcf8f5;backdrop-filter:blur(16px);box-shadow:0 22px 90px #45512b15;color:var(--text-primary);z-index:9;overflow:auto}.wardrobe::backdrop{background:transparent}.drawer-header{display:flex;align-items:center;justify-content:space-between;gap:10px}.drawer-header .icon-button{margin-right:-9px}.drawer-header h2{font-weight:500;font-size:23px;letter-spacing:-.8px;margin:8px 0 0}fieldset{border:0;margin:28px 0 0;padding:0}legend{font-size:11px;color:var(--text-secondary);padding:0;margin-bottom:14px}.swatches{display:flex;gap:13px}.swatches button{width:48px;height:48px;border-radius:100%;background:var(--swatch);position:relative;border:5px solid var(--bg-surface);outline:1px solid transparent;box-shadow:inset 0 -5px 8px #0000000c;transition:outline-color .2s}.swatches button[aria-pressed=true]{outline-color:#5c7351}.swatches button[aria-pressed=true]::after{content:'';position:absolute;left:14px;top:11px;width:8px;height:11px;transform:rotate(45deg);border-bottom:2px solid white;border-right:2px solid white}#palette-label{font-size:10px;color:#7d8770;margin:12px 0 0}.outfits{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.outfits button{display:flex;align-items:center;flex-direction:column;padding:5px 5px 12px;background:#f5f4eb;border:1px solid #e5e5d9;border-radius:13px;font-size:11px}.outfits button[aria-pressed=true]{border-color:#98ac85;background:#edf1e2}.outfits small{font-size:8px;color:#8b927f;margin-top:4px}.outfit-preview{height:74px;width:65px;display:grid;place-items:center}.outfit-preview i{width:36px;height:36px;clip-path:polygon(25% 0,40% 6%,60% 6%,75% 0,100% 22%,91% 42%,80% 37%,80% 100%,20% 100%,20% 37%,9% 42%,0 22%);display:block;position:relative}.sailor i{background:repeating-linear-gradient(0deg,#f7f5ee 0px,#f7f5ee 5px,#3e4b62 5px,#3e4b62 8px)}.explorer i{background:#cc9257}.explorer i::after{content:'';position:absolute;top:17px;left:19px;width:10px;height:12px;background:#9b6a3a;border-radius:2px}.cosy i{background:#c47b68;transform:scale(1.12,1.06)}.drawer-bottom{margin-top:32px}.drawer-bottom p{font-size:10px;line-height:1.8;color:var(--text-secondary);margin:0 0 17px}.drawer-bottom button{width:100%}
@media(min-width:1600px){.intro{left:12%;top:60px}.intro h1{font-size:42px}.speech{left:calc(50% + 220px);width:236px}}
@media(max-width:900px){.topbar{padding:0 24px;height:68px}.intro{left:30px;top:22px}.intro h1{font-size:28px;letter-spacing:-1px}.intro p{max-width:165px;font-size:11px}.eyebrow{font-size:8px}.speech{left:auto;right:23px;width:180px;top:55%}.scene-tools{right:20px;top:13px}.diagnostics{right:24px}.state-badge{top:16px}.wardrobe{right:14px;top:80px;bottom:16px}}
@media(max-width:600px){body{min-height:580px}.topbar{height:60px;padding:0 18px}.wordmark{font-size:23px}.wordmark svg{width:26px}.study-label{font-size:8px;margin-left:10px;padding-left:10px;padding-right:0;max-width:89px;line-height:1.6}.top-actions{gap:0}.top-actions .icon-button,.language-button{width:35px;height:40px}.intro{left:24px;top:17px}.intro h1{font-size:24px;margin:8px 0 0;letter-spacing:-.8px}.intro p{display:none}.intro .eyebrow{letter-spacing:.13em;font-size:7px}.scene-tools{top:8px;right:14px}.scene-tools .icon-button{width:36px}.state-badge{top:auto;bottom:35px;font-size:10px}.speech{top:unset;bottom:70px;right:20px;width:164px;padding:12px 14px;border-radius:15px 15px 4px 15px}.speech p{font-size:11px;line-height:1.7}.speech>span{font-size:8px;margin-top:4px}.speech-progress{margin-top:6px}.controls{height:163px;padding-top:3px}.action-strip{gap:0;padding:3px;margin-bottom:14px;max-width:calc(100% - 24px)}.action-strip button{padding:10px 12px;font-size:11px;min-height:40px}.main-actions{gap:9px}.primary-button,.secondary-button{height:46px;padding:0 24px}.orbit-hint{font-size:8px;bottom:15px}.prototype-note{font-size:8px;margin-top:12px}.diagnostics{top:57px;right:15px;width:246px;padding:15px}.wardrobe{top:auto;left:12px;right:12px;bottom:12px;width:auto;max-height:75dvh;padding:21px}.drawer-header h2{font-size:21px}fieldset{margin-top:21px}.outfit-preview{height:60px}.drawer-bottom{margin-top:23px}.drawer-bottom p{margin-bottom:14px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.loader{animation:none}button,.speech{transition:none}}
@media(max-height:600px){body{height:auto;min-height:650px;overflow-y:auto}#stage{height:430px;flex:none}.controls{height:155px}.wardrobe{top:12px;bottom:12px;max-height:calc(100dvh - 24px)}}

.action-strip button{white-space:nowrap}#walk-toggle[aria-pressed=true]{background:#e2e7d5;border-color:#aabb98}.main-actions button{white-space:nowrap}@media(max-width:600px){.main-actions{gap:8px}.main-actions .secondary-button{min-width:82px;padding:0 14px}.main-actions .primary-button{padding:0 17px}.main-actions button svg{width:18px;height:18px}.orbit-hint{font-size:8px}}
.character-bar{height:53px;flex-shrink:0;display:flex;justify-content:center;align-items:center;gap:16px;position:relative;z-index:3}.character-picker{display:flex;gap:4px;border:1px solid var(--border-soft);padding:4px;border-radius:var(--radius-control)}.character-picker button{display:flex;align-items:center;gap:8px;padding:9px 17px;min-height:36px;border-radius:10px;background:transparent;color:var(--text-secondary);font-size:12px;white-space:nowrap}.character-picker button[aria-pressed=true]{background:var(--bg-surface);color:var(--text-primary);box-shadow:0 1px 3px #3333330d}.character-dot{width:9px;height:9px;border-radius:50%;display:block}.alien-dot{background:#61bfb0}.human-dot{background:#79454b}.sheep-dot{background:#d9c6a0}.mian-dot{background:#8d9b7e}.reference-toggle{background:transparent;color:var(--text-secondary);font-size:10px;padding:12px 0;border-bottom:1px solid var(--border-soft);white-space:nowrap}.custom-options{display:flex;gap:7px}.custom-options button{flex:1;min-height:38px;padding:8px;border:1px solid var(--border-soft);border-radius:var(--radius-control);background:var(--bg-page);font-size:11px}.custom-options button[aria-pressed=true]{border-color:#98ac85;background:#edf1e2}.wardrobe[data-character=human] .sailor i{background:#6b3840}.wardrobe[data-character=human] .sailor i::after{content:'';position:absolute;left:17px;top:2px;width:2px;height:34px;background:#46292e}.reference-panel{position:fixed;inset:155px auto auto 24px;margin:0;padding:18px;width:260px;max-height:calc(100dvh - 190px);overflow:auto;border:1px solid var(--border-soft);border-radius:var(--radius-panel);background:var(--bg-surface);box-shadow:var(--shadow-hard);z-index:8;color:var(--text-primary)}.reference-panel h2{font-size:17px;font-weight:500;margin:0}.reference-panel img{display:block;width:100%;height:260px;object-fit:contain;border-radius:10px;background:#fff;margin-top:10px}.reference-panel p{font-size:11px;color:var(--text-secondary);line-height:1.8;margin:14px 0 0}
@media(max-width:600px){.character-bar{height:52px;gap:11px}.character-picker{gap:2px;padding:3px}.character-picker button{font-size:10px;padding:8px 10px;gap:6px}.character-dot{width:7px;height:7px}.reference-toggle{font-size:9px}.reference-panel{inset:auto 12px 12px 12px;width:auto;max-height:70dvh;padding:18px}.reference-panel img{height:240px}.reference-panel p{font-size:10px}.wardrobe fieldset{margin-top:18px}.wardrobe .drawer-bottom{margin-top:22px}}
@media(max-width:600px){.wardrobe[data-character=human]{max-height:54dvh;padding:16px}.wardrobe[data-character=human] .outfit-preview{height:40px}.wardrobe[data-character=human] .swatches button{width:36px;height:36px}.wardrobe[data-character=human] .swatches button[aria-pressed=true]::after{left:8px;top:5px}.wardrobe[data-character=human] fieldset{margin-top:13px}.wardrobe[data-character=human] legend{margin-bottom:8px}.wardrobe[data-character=human] #human-customization{display:grid;grid-template-columns:1.2fr 1fr;gap:12px}.wardrobe[data-character=human] .custom-options{gap:4px}.wardrobe[data-character=human] .custom-options button{font-size:10px;padding:5px 2px;min-height:34px}.wardrobe[data-character=human] .drawer-bottom p{display:none}.wardrobe[data-character=human] .drawer-bottom{margin-top:16px}.wardrobe[data-character=human] #palette-label{margin:7px 0 0}}
.character-feedback{position:absolute;top:calc(100% + 38px);left:50%;transform:translateX(-50%);width:min(350px,calc(100vw - 32px));padding:12px 15px;border:1px solid var(--border-soft);border-radius:var(--radius-control);background:var(--bg-surface);box-shadow:var(--shadow-hard);font-size:11px;line-height:1.7;color:var(--text-secondary)}.character-feedback>div{display:flex;gap:14px;margin-top:7px}.character-feedback button{padding:3px 0;background:transparent;border-bottom:1px solid var(--border-soft);font-size:11px;color:var(--text-primary)}.character-picker button[aria-busy=true]{opacity:.65}.model-diagnostics{display:grid;grid-template-columns:1fr 1.4fr;gap:6px;margin:12px 0;font-size:10px}.model-diagnostics dt{color:var(--text-secondary)}.model-diagnostics dd{margin:0;text-align:right}.diagnostics details{font-size:10px}.model-stats{max-height:180px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font-size:9px;line-height:1.5}.wardrobe[data-character=blenderSheep] .sailor i{background:#809175}.wardrobe[data-character=blenderSheep] .explorer i{background:#d5ac77}.wardrobe[data-character=blenderSheep] .cosy i{background:#b6a5c4}
@media(max-width:600px){.character-bar{gap:8px;padding:0 10px}.character-picker{min-width:0}.character-picker button{padding:8px 7px;gap:5px}.character-feedback{top:calc(100% + 8px)}}

/* Humation art-direction study; existing studio tokens and controls. */
.stylized-tools{position:absolute;right:7%;top:26%;width:250px;z-index:2}.stylized-tools fieldset{margin:0 0 24px}.stylized-tools legend{margin-bottom:10px}.stylized-tools .custom-options button{background:var(--bg-surface);font-size:11px}.stylized-tools button[aria-pressed=true]{border-color:var(--accent-active);color:var(--accent-active);background:var(--bg-surface)}.stylized-outfits{display:flex;flex-direction:column;gap:8px}.stylized-outfits button{padding:12px 15px;text-align:left;border:1px solid var(--border-soft);border-radius:var(--radius-control);background:var(--bg-surface);font-size:12px}.stylized-2d-link{font-size:11px;color:var(--text-secondary);text-underline-offset:5px}.wardrobe[data-character=stylizedHuman] .sailor i,.wardrobe[data-character=stylizedHuman] .explorer i,.wardrobe[data-character=stylizedHuman] .cosy i{background:#843c43}#stage[data-character=stylizedHuman] .intro p{white-space:pre-line}#stage[data-character=stylizedHuman] .speech{left:6%;top:64%;width:230px}
@media(max-width:1100px){.stylized-tools{right:4%;width:210px}.character-picker button{padding-left:11px;padding-right:11px}}
@media(max-width:760px){.character-bar{overflow-x:auto;justify-content:flex-start;padding:0 16px}.character-picker{flex-shrink:0}.character-picker button{font-size:10px}.reference-toggle{margin-right:10px}.stylized-tools{right:16px;top:28%;width:154px}.stylized-tools .custom-options{flex-wrap:wrap}.stylized-tools .custom-options button{font-size:10px;padding:7px 5px}.stylized-tools fieldset{margin-bottom:14px}.stylized-tools legend{font-size:10px}.stylized-outfits button{font-size:10px;padding:10px}#stage[data-character=stylizedHuman] .intro{top:14px;left:22px}#stage[data-character=stylizedHuman] .intro h1{font-size:24px}#stage[data-character=stylizedHuman] .speech{display:none}}
@media(max-width:520px){#stage[data-character=stylizedHuman]{min-height:640px}.stylized-tools{inset:auto 20px 35px;width:auto;display:grid;grid-template-columns:1fr 1fr;gap:12px}.stylized-tools fieldset{margin:0}.stylized-tools fieldset:nth-child(3){grid-column:1/-1}.stylized-outfits{flex-direction:row}.stylized-outfits button{flex:1;text-align:center}.stylized-2d-link{grid-column:1/-1}#stage[data-character=stylizedHuman] .state-badge{bottom:230px}#stage[data-character=stylizedHuman] .orbit-hint{bottom:215px}}

@media(max-width:520px){#stage[data-character=stylizedHuman] #canvas-mount{inset:70px 0 220px}#stage[data-character=stylizedHuman] .state-badge{bottom:222px}#stage[data-character=stylizedHuman] .orbit-hint{display:none}}
