:root{font-family:-apple-system,BlinkMacSystemFont,'Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;color:#302f29;background:#fff}*{box-sizing:border-box}body{margin:0}header,footer{max-width:1440px;margin:auto;padding:20px 5%;display:flex;justify-content:space-between;align-items:center}header{border-bottom:1px solid #e9ece3}header img{width:135px;height:40px}button{font:inherit;cursor:pointer;border:1px solid #dde3d4;background:#fff;border-radius:8px;color:#454c3c;font-size:14px;padding:13px 18px;min-height:46px}button:focus-visible,summary:focus-visible{outline:3px solid #bf8200;outline-offset:4px}button:hover{background:#f3f6ec}button:disabled{cursor:not-allowed;background:#eef0e9;color:#71776a}main{max-width:1440px;margin:auto;display:grid;grid-template-columns:1.06fr 1fr;gap:7%;padding:32px 5%;min-height:720px}.portrait-panel{position:relative;min-width:0;border-radius:22px;overflow:hidden;background:#fafbf8;border:1px solid #e9ece3;align-self:stretch}.portrait{position:absolute;inset:0;background-image:url('avatar.png');background-repeat:no-repeat;background-size:200% auto;background-position:left center;mask-image:linear-gradient(#000 84%,transparent 99%)}.identity{position:absolute;left:24px;right:24px;bottom:54px;display:flex;align-items:center;gap:9px;font-size:16px}.dot{width:8px;height:8px;background:#aabc6b;border-radius:50%}.tag{margin-left:auto;border:1px solid #dce2d4;border-radius:4px;padding:4px 7px;font-size:11px;color:#69735a;background:#ffffffc9}.voice{position:absolute;bottom:24px;left:24px;height:17px;display:flex;align-items:center;gap:4px}.voice i{display:block;width:3px;height:4px;background:#b6c57e;border-radius:3px}.voice i:nth-child(3n){background:#edb845}.talk{padding:30px 0 10px;align-self:center}.eyebrow{font-size:14px;color:#6c765b;margin:0 0 17px}h1{font-size:clamp(28px,3.3vw,46px);line-height:1.48;font-weight:600;letter-spacing:-.035em;margin:0}.lead{font-size:15px;line-height:1.9;color:#6a7061;margin:23px 0 28px}.status{border-top:1px solid #e0e6d7;padding:22px 0 18px;min-height:116px}#state{font-size:20px;font-weight:600}#hint{font-size:13px;line-height:1.8;color:#6b735f;margin:10px 0 0}.controls{display:flex;gap:9px;flex-wrap:wrap}#start{min-width:230px;display:flex;justify-content:space-between;flex:1;background:#e6edcf;border-color:#cedcaf;font-weight:600;padding:18px 22px}#start:disabled{background:#eef0e9;border-color:#e0e3d8}#start[hidden],button[hidden]{display:none}.timer{font-size:12px;color:#6c745f;margin:12px 0 27px}.questions p{font-size:12px;color:#6c745f}.questions ul{padding:0;list-style:none;font-size:14px;line-height:2.2;margin:8px 0 20px}.notice{font-size:12px;line-height:1.8;color:#777e6e;margin-bottom:0}footer{border-top:1px solid #e9ece3;color:#747b6a;font-size:12px;align-items:flex-start}details{text-align:right;max-width:400px}summary{cursor:pointer;padding:3px}details p{line-height:1.7}details button{margin-top:12px;font-size:12px}.speaking .portrait{animation:speak 0.65s steps(1,end) infinite}.speaking .voice i{animation:wave .45s infinite alternate}.speaking .voice i:nth-child(2n){animation-delay:-.26s}.speaking .voice i:nth-child(3n){animation-delay:-.13s}@keyframes speak{0%,38%,76%{background-position:right center}24%,62%,92%{background-position:left center}}@keyframes wave{to{height:20px}}.previewing .portrait-panel:after{content:'表情確認モード・音声未送信';position:absolute;top:18px;left:18px;background:#fff;padding:8px 10px;border:1px solid #e0e5d8;border-radius:6px;font-size:12px}@media(max-width:1024px){main{gap:4%;padding:25px 3%}.talk{padding:15px 0}.identity{left:16px;right:16px;font-size:14px}.tag{font-size:10px}.portrait{background-size:200% auto;background-position:left center}.speaking .portrait{background-size:200% auto}}@media(max-width:768px){main{grid-template-columns:1fr;max-width:620px;padding:20px 5%;gap:25px}.portrait-panel{height:450px}.portrait{background-size:200% auto;background-position:left top;mask-image:linear-gradient(#000 74%,transparent 96%)}.speaking .portrait{animation-name:speak-mobile}.talk{padding:0}h1{font-size:32px}.lead{margin:18px 0 20px}.identity{bottom:42px}.voice{bottom:17px}.status{min-height:110px}footer{gap:15px}header{padding:15px 5%}header img{width:115px}header button{font-size:12px;padding:10px 12px}}@media(max-width:440px){.portrait-panel{height:360px}.portrait{background-position:left top}h1{font-size:29px}.questions ul{font-size:12px}.identity{font-size:14px}.lead{font-size:14px}#state{font-size:18px}}@keyframes speak-mobile{0%,38%,76%{background-position:right top}24%,62%,92%{background-position:left top}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.speaking .portrait{background-position:right center}}
@media(max-width:768px){.portrait-panel{background:#fff}.portrait{left:50%;right:auto;width:337.5px;transform:translateX(-50%);mask-image:linear-gradient(#000 82%,transparent 100%)}}@media(max-width:440px){.portrait{width:270px}}

/* Audio-driven continuous renderer replaces the two-pose CSS loop. */
.portrait,.speaking .portrait{animation:none!important;background-position:left center!important}
.portrait canvas{position:absolute;width:100%;height:auto;aspect-ratio:3/4;left:0;top:50%;transform:translateY(-50%);opacity:0}
.portrait.smooth-ready{background-image:none}.portrait.smooth-ready canvas{opacity:1}
@media(max-width:768px){.portrait canvas{top:0;transform:none}.portrait,.speaking .portrait{background-position:left top!important}}