:root{--ink:#20374a;--muted:#627b8a;--paper:#eaf0f4;--white:#fcfdfd;--line:#ccd9e0;--teal:#387e7b;--ember:#ba7954;--violet:#70617f;--blush:#bd7282;--blue:#537b9a}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.5 'Segoe UI',sans-serif}header,footer{display:flex;justify-content:space-between;gap:20px;padding:21px 4vw;font-size:12px;border-bottom:1px solid var(--line)}a{color:inherit;text-decoration:none}.wordmark{font-weight:700;letter-spacing:.02em}.wordmark span{font-weight:400;color:var(--muted)}#connection{color:var(--teal)}main{max-width:1300px;margin:auto;padding:30px 32px}.intro{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:end;margin-bottom:28px}.intro>p{max-width:400px;color:var(--muted);margin-bottom:8px}.eyebrow{font:10px/1.5 Consolas,monospace;letter-spacing:.16em;color:var(--teal);margin:0 0 7px}h1{font:normal clamp(34px,4.2vw,52px)/1.06 'Palatino Linotype',Palatino,serif;margin:8px 0;letter-spacing:-.035em}h2{font:normal 26px/1.1 'Palatino Linotype',serif;margin:0}h3{margin:0;font-weight:600}.input-room{background:var(--white);border:1px solid var(--line);border-left:4px solid var(--teal);padding:18px 24px;border-radius:8px}.input-top,.input-bottom,.stage-heading{display:flex;justify-content:space-between;align-items:center;gap:15px}.input-top>label{font-weight:600}.toggle{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:7px;white-space:nowrap}input[type=checkbox]{accent-color:var(--teal)}textarea{width:100%;resize:vertical;min-height:60px;border:0;background:transparent;font:21px/1.4 'Palatino Linotype',Palatino,serif;color:var(--ink);margin:12px 0;padding:4px}textarea:focus{outline:2px solid var(--line);outline-offset:4px}#speaker{border:0;border-bottom:1px solid var(--line);font:inherit;background:transparent;color:var(--ink);width:100px;padding:4px}.input-bottom label{font-size:12px;color:var(--muted)}button{border:0;background:var(--ink);color:#fff;border-radius:5px;padding:11px 16px;font:600 12px 'Segoe UI',sans-serif;cursor:pointer}button:hover{background:var(--teal)}button:disabled{opacity:.5;cursor:wait}.secondary{background:#e6edf1;color:var(--ink);margin-right:6px}.secondary:hover{background:#d1e0e7}.text-button{padding:4px 0;background:none;color:var(--teal);border-bottom:1px solid #a4c5c2;border-radius:0}.text-button:hover{background:none;color:var(--ink)}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--ember);outline-offset:4px}#feedback{font-size:12px;color:var(--muted);margin:12px 0 0;min-height:18px}.stage-heading{margin:30px 0 18px}.stage-heading>span{font:11px Consolas,monospace;color:var(--muted)}.stage-tools{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding:13px 18px;border:1px solid var(--line);background:#f4f8fa;border-radius:6px}.gain-control{display:flex;align-items:center;gap:12px;font-size:12px}.gain-control input{width:130px}.gain-control output{font:12px Consolas,monospace;width:35px}.fine-print{font-size:11px;color:var(--muted);margin:8px 0 14px}.heard-caption{font:italic 16px 'Palatino Linotype',serif;min-height:18px;color:var(--muted)}.characters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.character{background:var(--white);border:1px solid var(--line);border-radius:9px;overflow:hidden;--actor:var(--blue)}.character:nth-child(2){--actor:var(--teal)}.character-heading{display:flex;justify-content:space-between;gap:16px;padding:20px 24px 8px;align-items:start}.character-heading h3{font:32px 'Palatino Linotype',serif}.character-role{font:10px Consolas,monospace;text-transform:uppercase;letter-spacing:.1em;color:var(--actor)}.emotion-name{text-transform:capitalize;font-size:14px;text-align:right;padding-top:6px}.emotion-name small{display:block;font:10px Consolas,monospace;color:var(--muted);margin-top:5px}.portrait-stage{position:relative;display:grid;grid-template-columns:1fr 90px;align-items:center;background:radial-gradient(ellipse at 48% 40%,#f4f8fa 0,#dee8ec 65%,#d3dfe6 100%);margin:8px 14px 0;border-radius:6px;min-height:300px;overflow:hidden}.character:nth-child(2) .portrait-stage{background:radial-gradient(ellipse at 48% 40%,#f4f8f5 0,#dfe8e1 65%,#d5dfd8 100%)}.portrait-host{min-width:0;width:100%;position:relative}.portrait{display:block;width:100%;height:320px;overflow:visible}.anatomy{opacity:0;transition:opacity .3s}.show-anatomy .anatomy{opacity:.85}.stage-readout{font:9px Consolas,monospace;color:#527380;display:flex;flex-direction:column;gap:23px;padding-right:14px}.stage-readout>div>strong{font-size:15px;font-weight:400;display:block;margin:4px 0;color:var(--ink)}.meter-mini{height:2px;width:50px;background:#bacfd4}.meter-mini i{display:block;height:100%;background:var(--actor)}.character-copy{padding:18px 24px 22px}.description{font-size:11px;color:var(--muted);margin:0 0 17px}.bars{display:grid;grid-template-columns:1fr 1fr;gap:11px 22px;margin-bottom:20px}.bar-label{display:flex;justify-content:space-between;font-size:10px;text-transform:capitalize;color:var(--muted)}.track{height:4px;background:var(--paper);margin-top:5px;border-radius:3px;overflow:hidden}.fill{height:100%;background:var(--actor);transition:width .45s;border-radius:3px}.behavior{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);padding-top:14px;gap:12px}.behavior small{font:9px Consolas,monospace;color:var(--muted);display:block;text-transform:uppercase;letter-spacing:.07em}.behavior span{font-size:12px}.trust{font-size:10px;color:var(--muted);margin-top:14px}.workshop{margin-top:40px;padding-top:1px;border-top:1px solid var(--line)}.workshop .stage-heading{margin-bottom:10px}.preview-badge{color:var(--violet)!important;padding:6px 10px;background:#e5e0eb;border-radius:4px}.workshop-intro{color:var(--muted);font-size:13px;max-width:750px;margin-bottom:22px}.workshop-grid{display:grid;grid-template-columns:1fr 1fr;background:var(--white);border:1px solid var(--line);border-radius:8px;overflow:hidden}.pose-stage{background:#e0e9eb;padding:22px 26px;display:flex;flex-direction:column;align-items:center}.pose-top{display:flex;justify-content:space-between;align-items:center;width:100%;font-size:11px}.pose-top label{display:flex;gap:10px;align-items:center}select{border:1px solid var(--line);border-radius:4px;background:#f6f9fa;padding:7px 10px;color:var(--ink);font:12px 'Segoe UI',sans-serif;max-width:100%}.lab-portrait{max-width:320px}.lab-portrait .portrait{height:350px}.pose-caption{text-align:center;min-height:62px;margin-top:10px}.pose-caption strong{display:block;font:24px 'Palatino Linotype',serif}.pose-caption span{display:block;font-size:11px;color:var(--muted);max-width:350px;margin:5px 0}.preset-buttons{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:15px}.preset-buttons button{font-size:10px;padding:7px 10px;background:#eff4f5;color:var(--ink);border:1px solid #c5d6db}.preset-buttons button.active{background:var(--ink);color:white;border-color:var(--ink)}.mixer{padding:26px 30px}.mixer-heading{display:flex;justify-content:space-between;align-items:center;font-size:13px;margin-bottom:18px}.mixer-heading span{font-size:10px;color:var(--muted)}.emotion-controls{display:grid;grid-template-columns:1fr 1fr;gap:15px 24px}.slider-label{display:flex;justify-content:space-between;gap:10px;font-size:12px}.slider-label output{font:11px Consolas,monospace;color:var(--muted)}input[type=range]{appearance:none;-webkit-appearance:none;height:4px;background:#ccdae0;border-radius:3px;cursor:pointer;margin:11px 0;accent-color:var(--teal);max-width:100%}input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:13px;height:13px;border:2px solid var(--white);border-radius:50%;background:var(--teal);box-shadow:0 0 0 1px #3f7775}input[type=range]::-moz-range-thumb{width:10px;height:10px;border:2px solid var(--white);border-radius:50%;background:var(--teal)}.emotion-controls input,.delivery-controls input,.channel-control input{width:100%}.emotion-control[data-emotion=joy] input::-webkit-slider-thumb{background:var(--ember);box-shadow:0 0 0 1px var(--ember)}.emotion-control[data-emotion=shame] input::-webkit-slider-thumb{background:var(--blush);box-shadow:0 0 0 1px var(--blush)}.emotion-control[data-emotion=sadness] input::-webkit-slider-thumb{background:var(--blue);box-shadow:0 0 0 1px var(--blue)}.delivery-controls{margin-top:23px;padding-top:18px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:13px 24px}.delivery-controls label{font-size:12px;display:block}.delivery-controls label:first-child{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center}.delivery-controls output{float:right;font:11px Consolas,monospace;color:var(--muted)}.lab-actions{margin-top:20px;display:flex;justify-content:space-between;gap:10px}.rig-inspector{margin-top:16px;padding:16px 20px;background:#f4f8fa;border:1px solid var(--line);border-radius:6px}.rig-inspector summary{font-size:13px;color:var(--ink)}.rig-inspector summary span{float:right;font:11px Consolas,monospace;color:var(--muted)}.channel-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 25px;margin-top:20px}.channel-group{padding-top:5px}.channel-group h4{font:10px Consolas,monospace;text-transform:uppercase;color:var(--teal);letter-spacing:.1em;margin:0 0 14px}.channel-control{margin-bottom:12px}.channel-control label{font-size:11px}.channel-control output{font:10px Consolas,monospace}.decisions{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.decision{background:#dde7ef;padding:18px;border-radius:5px;min-width:0}.decision h3{font-size:13px;margin:0 0 14px}.decision h3 span{font:11px Consolas,monospace;color:var(--blue);margin-right:10px}.answer{display:flex;justify-content:space-between;gap:10px;font-size:11px;border-top:1px solid var(--line);padding:6px 0}.answer small{color:var(--muted)}.answer strong{font-weight:500;text-align:right}.empty{font-size:13px;color:var(--muted)}details{margin-top:18px}summary{font-size:12px;cursor:pointer;color:var(--muted)}pre{font:10px/1.5 Consolas,monospace;max-height:350px;overflow:auto;background:#dfe7ed;padding:18px;border-radius:5px;white-space:pre-wrap;overflow-wrap:anywhere}footer{border-top:1px solid var(--line);border-bottom:0;color:var(--muted);font-size:10px;margin-top:25px}
@media(max-width:800px){main{padding:24px 18px}.intro{grid-template-columns:1fr;gap:5px}.intro>p{max-width:none}.characters,.workshop-grid{grid-template-columns:1fr}.portrait{height:360px}.portrait-stage{grid-template-columns:1fr 90px}.character-heading{padding:18px 22px 8px}.input-room{padding:18px}.input-top,.input-bottom{align-items:flex-start;flex-wrap:wrap}.input-bottom>div{display:flex;width:100%}.input-bottom button{flex:1}.decisions{grid-template-columns:1fr}.channel-controls{grid-template-columns:1fr 1fr}header{padding:18px}.wordmark span{display:none}footer{flex-direction:column}.stage-heading{align-items:flex-start}.stage-tools{gap:16px}.gain-control{width:100%}.gain-control input{flex:1}.mixer{padding:24px}.mixer-heading span{display:none}.lab-actions button{flex:1}.rig-inspector summary span{display:none}}
@media(max-width:420px){.portrait{height:300px}.channel-controls{grid-template-columns:1fr}.stage-heading>span{max-width:130px;font-size:10px}.emotion-controls{gap:14px 18px}.pose-stage{padding:18px}.lab-actions button{padding:10px;font-size:11px}}
.speech-room{border-bottom:1px solid var(--line);margin-bottom:18px;padding-bottom:16px}.speech-room[hidden]{display:none}.speech-controls{display:flex;justify-content:space-between;gap:16px;align-items:center}.speech-controls strong{font:22px 'Palatino Linotype',serif}.speech-actions{display:flex;gap:6px;flex-wrap:wrap}.speech-actions .secondary{margin:0}.speech-indicators{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--muted)}#mic-level{width:90px;height:12px}#speech-latency{font:10px Consolas,monospace}.speech-transcript{border-left:2px solid var(--line);padding-left:12px;margin-top:12px;font:17px/1.45 'Palatino Linotype',serif;overflow-wrap:anywhere}.speech-transcript p{margin:3px 0;min-height:1.3em}#speech-partial{color:var(--muted);font-style:italic}.speech-room[data-listening=true] #mic-start{background:var(--teal)}.speech-room[data-listening=true] .speech-transcript{border-color:var(--teal)}
@media(max-width:800px){.speech-controls{align-items:flex-start;flex-direction:column}.speech-actions{width:100%}.speech-actions button{flex:1;min-width:100px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
