*{box-sizing:border-box}body{color:#233d4b;background:#f2f6f8;margin:0;font:15px/1.5 system-ui,sans-serif}main{max-width:860px;margin:auto;padding:38px 24px}header{text-align:center}.eyebrow{letter-spacing:.2em;color:#637d8b;font-size:11px}h1{letter-spacing:-.04em;margin:10px 0;font-size:34px;font-weight:450}header p{color:#647986;margin:0 0 28px}h2{margin:0 0 8px;font-size:17px;font-weight:550}.experience{background:radial-gradient(at 50% 40%,#fff 35%,#f6fafc);border:1px solid #dae5ea;border-radius:28px;overflow:hidden}.stage{justify-content:center;align-items:center;max-width:540px;height:470px;margin:auto;display:flex;position:relative}#renderer{width:384px;height:384px;transition:width .7s,height .7s}#renderer canvas{width:100%;height:100%;display:block}#renderer.small{width:128px;height:128px}button,select,textarea{font:inherit;color:inherit}button{cursor:pointer;background:#fff;border:1px solid #c9d9e1;border-radius:24px;min-height:44px;padding:10px 17px;transition:background .2s,border-color .2s}button:hover{background:#edf7fb;border-color:#6fa4bc}button:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline-offset:4px;outline:3px solid #386e93}#activate,#close{background:#e8f2f7;position:absolute;bottom:14px}button span{margin-left:10px}#menu{pointer-events:none;position:absolute;inset:0}#menu button{pointer-events:auto;min-width:122px;padding:9px 12px;font-size:12px;position:absolute;box-shadow:0 6px 20px #244a6110}#menu button:first-child{top:12px;left:calc(50% - 61px)}#menu button:nth-child(2){top:124px;right:12px}#menu button:nth-child(3){bottom:100px;right:22px}#menu button:nth-child(4){border-color:#dac596;bottom:100px;left:22px}#menu button:nth-child(5){border-color:#e6bbb3;top:124px;left:12px}#menu button[aria-pressed=true]{background:#e3edf3;border-color:#57758a}.state-line{justify-content:center;align-items:center;gap:9px;padding:4px 16px 22px;font-size:13px;display:flex}#dot{background:#a9d9ed;border-radius:50%;width:8px;height:8px}#panel{border-top:1px solid #dce7ec;margin:0 22px 22px;padding-top:20px}#panel p{color:#607783;font-size:13px}#panel label{margin-bottom:6px;font-size:12px;display:block}textarea{resize:vertical;background:#ffffffc0;border:1px solid #c9d9e1;border-radius:12px;width:100%;padding:12px}.review{background:#ffffffa0;border:1px solid #dae5ea;border-radius:20px;margin-top:24px;padding:24px}.states{flex-wrap:wrap;gap:8px;margin:15px 0 22px;display:flex}.states button[aria-pressed=true]{color:#fff;background:#233d4b}.tools{flex-wrap:wrap;align-items:center;gap:15px;font-size:12px;display:flex}.tools label{align-items:center;gap:6px;min-height:32px;display:flex}.tools select{background:#fff;border:1px solid #c9d9e1;border-radius:8px;padding:5px}.fine{color:#70828c;margin:6px 0;font-size:12px}.tools input{accent-color:#426a84}details{color:#607783;margin:24px 4px;font-size:13px}summary{cursor:pointer;color:#233d4b}details p{max-width:740px}a{color:#426a84}footer{text-align:center;color:#7d909a;padding:8px;font-size:11px}[hidden]{display:none!important}@media (width<=520px){main{padding:24px 12px}h1{font-size:29px}.stage{height:408px}#renderer{width:320px;height:320px}#menu button{min-width:108px;font-size:11px}#menu button:nth-child(2),#menu button:nth-child(5){top:103px}#menu button:nth-child(2){right:4px}#menu button:nth-child(5){left:4px}#menu button:nth-child(3){bottom:84px;right:8px}#menu button:nth-child(4){bottom:84px;left:8px}.review{padding:18px}.states button{padding:9px 14px}}@media (prefers-reduced-motion:reduce){*{transition:none!important}}main{max-width:1180px}.layout-controls{flex-wrap:wrap;justify-content:center;gap:10px;margin:0 0 24px;display:flex}.layout-controls button{font-size:12px}.layout-controls button[aria-pressed=true]{background:#e0eef4;border-color:#79a5b9}#workspace{grid-template-columns:minmax(0,1.35fr) minmax(280px,1fr);align-items:start;gap:24px;display:grid}#workspace[data-side=right]{grid-template-columns:minmax(280px,1fr) minmax(0,1.35fr)}#workspace[data-side=right] .experience{grid-area:1/2}#workspace[data-side=right] #chat{grid-area:1/1}#chat{background:#ffffffa0;border:1px solid #dae5ea;border-radius:24px;margin-top:32px;padding:28px}#chat h2{margin-top:12px;font-size:21px}.chat-bubble{color:#536e7e;background:#e8f1f6;border-radius:16px 16px 16px 4px;padding:16px;font-size:13px}.chat-bubble.owner{background:#fff;border:1px solid #e0e7eb;border-radius:16px 16px 4px;margin-left:25px}#chat label{margin:24px 0 8px;font-size:12px;display:block}.stage{max-width:540px}#status{text-transform:none}#menu button[data-item="0"]{border-color:#9ccdd5}#menu button[data-item="1"]{border-color:#c4b2df}#menu button[data-item="2"]{border-color:#a7d3b8}@media (width<=800px){#workspace,#workspace[data-side=right]{flex-direction:column;gap:12px;display:flex}#workspace .experience,#chat{width:100%}#chat{margin:0;padding:22px}.stage{max-width:540px}.layout-controls button{font-size:11px}}@media (width>=801px) and (width<=1000px){main{padding:24px 16px}#workspace,#workspace[data-side=right]{gap:14px}.stage{height:440px}#renderer{width:340px;height:340px}#chat{padding:20px}#menu button{min-width:100px;padding:9px;font-size:11px}#menu button:nth-child(2){right:3px}#menu button:nth-child(5){left:3px}}