/* Expression, movement and the transparent Jev readout. */
.scene-art{height:310px;isolation:isolate;scroll-margin-top:16px}
.difficulty{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px;color:#8e694f;font-size:10px;letter-spacing:.1em}
#difficulty-dots{letter-spacing:.3em;font-size:9px}
.scene-art svg{transition:background .6s}
#character{transform-box:fill-box;transform-origin:50% 85%;transition:transform .7s}
#eyes,#brows,.smile{stroke-width:3}
.blush{transition:opacity .5s}
.art-caption{bottom:12px}
.scene-art[data-mood="delighted"] #character{transform:translateY(-3px) rotate(-3deg)}
.scene-art[data-mood="warm"] #character{transform:rotate(-2deg)}
.scene-art[data-mood="curious"] #character{transform:rotate(5deg)}
.scene-art[data-mood="disappointed"] #character{transform:translateY(12px) rotate(4deg)}
.scene-art[data-mood="uncertain"] #character{transform:rotate(-5deg)}
.scene-art[data-mood="awkward"] #character{transform:translateY(5px) rotate(2deg)}
.scene-art[data-mood="delighted"] .blush{opacity:.95}
.scene-art[data-mood="disappointed"] .blush,.scene-art[data-mood="uncertain"] .blush{opacity:.08}
.scene-art[data-mood="delighted"] .mood-marks{opacity:1}
.scene-art.perform[data-mood="delighted"] #character{animation:happy-bounce 1s ease both}
.scene-art.perform[data-mood="warm"] #character{animation:gentle-nod 1.2s ease both}
.scene-art.perform[data-mood="disappointed"] #character{animation:shoulders-drop 1.3s ease both}
.scene-art.perform[data-mood="curious"] #character,.scene-art.perform[data-mood="uncertain"] #character{animation:head-tilt 1.2s ease both}
.scene-art.perform[data-mood="awkward"] #character{animation:awkward-pause 1.3s ease both}
.emotion-banner{position:absolute;left:16px;right:16px;bottom:14px;display:flex;align-items:center;gap:12px;background:#fffdf5f2;border:1px solid #ffffff;border-radius:12px;padding:11px 14px;box-shadow:0 6px 20px #55531516;backdrop-filter:blur(8px)}
.emotion-banner small{display:block;font-size:9px;color:#7d7668;letter-spacing:.08em}
.emotion-banner strong{display:block;font-family:var(--serif);font-size:21px;line-height:1.5}
#emotion-symbol{font-size:25px;color:#b77146}
#replay{margin-left:auto;flex-shrink:0;border:1px solid #d4d5c6;border-radius:50%;width:34px;height:34px;background:transparent;font-size:21px;line-height:1}
.scene-art[data-mood="disappointed"] .emotion-banner,.scene-art[data-mood="awkward"] .emotion-banner{background:#f6f9fafa}
.scene-art[data-mood="disappointed"] #emotion-symbol{color:#6b8998}
.emotion-flourish{position:absolute;inset:0;pointer-events:none}
.emotion-flourish span{position:absolute;left:var(--x);top:var(--y);font-family:Georgia,serif;font-size:var(--size);color:var(--accent);text-shadow:0 2px 10px #ffffffa0}
.perform .emotion-flourish span{animation:float-in 1.5s both;animation-delay:var(--delay)}
.listening{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:9px 16px;background:#fffdf5ed;border-radius:30px;font-size:12px}
.listening span{display:inline-block;animation:listening 1.5s ease-in-out infinite}
#request-error{color:#984731;background:#fff0e8;border-left:3px solid #c3684f;padding:10px 12px;font-size:12px}
.jev-panel{margin-top:24px;border:1px solid #d3dbd2;border-radius:12px;background:#f4f7f0;overflow:hidden}
.jev-panel>summary{list-style:none;cursor:pointer;padding:18px;display:flex;justify-content:space-between;gap:10px;align-items:center}
.jev-panel>summary::-webkit-details-marker{display:none}
.jev-panel>summary small{display:block;font-size:9px;letter-spacing:.2em;color:#4c785e;font-weight:700}
.jev-panel>summary strong{display:block;font-size:15px;margin-top:3px}
.panel-toggle{font-size:22px;color:#66806c}
.jev-panel[open] .panel-toggle{transform:rotate(45deg)}
.jev-body{padding:0 17px 18px}
.jev-note{font-size:10px;color:#667263;line-height:1.9;margin:0 0 12px}
.jev-meta{display:flex;flex-wrap:wrap;gap:6px;font-size:9px;margin-bottom:17px}
.jev-meta span{background:#e7ede2;border-radius:5px;padding:3px 7px;overflow-wrap:anywhere}
.axis-card{background:#fffef9;border:1px solid #dee3d7;border-radius:8px;padding:15px;margin-bottom:10px}
.axis-heading{display:flex;justify-content:space-between;align-items:center;gap:10px}
.axis-heading h3{margin:0;font-size:13px}
.axis-heading small{font:9px monospace;color:#7c8475;background:#f0f2ea;padding:2px 5px;border-radius:3px}
.axis-question{font-size:11px;color:#777c70;margin:5px 0 12px}
.probability-row{margin:9px 0}
.probability-caption{display:flex;justify-content:space-between;gap:10px;align-items:baseline;font-size:11px}
.probability-caption strong{font:600 14px var(--sans);white-space:nowrap;font-variant-numeric:tabular-nums}
.probability-track{height:7px;background:#eff0e9;border-radius:5px;margin-top:5px;overflow:hidden}
.probability-fill{height:100%;width:var(--probability);background:#7c987f;border-radius:5px;animation:bar-grow .8s ease both;transform-origin:left}
.probability-row[data-level="0"] .probability-fill{background:#9caab2}
.probability-row[data-level="1"] .probability-fill{background:#cdb489}
.probability-row[data-level="2"] .probability-fill{background:#cd8764}
.score-stats{display:flex;gap:10px;margin-top:15px;padding-top:12px;border-top:1px solid #e9e9df}
.score-stats>div{flex:1;font-size:10px;color:#73786a}
.score-stats strong{display:block;font-size:20px;font-variant-numeric:tabular-nums;color:var(--ink)}
.axis-detail{margin-top:12px;font-size:10px;color:#6a7466}
.axis-detail summary{cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.axis-detail p{margin:8px 0 0}
.decision-card{border-left:3px solid #b78763;background:#eee8dc;margin-top:16px;padding:14px;border-radius:0 7px 7px 0}
.decision-card>small{font-size:9px;letter-spacing:.08em;color:#8b6445}
.decision-card h3{font-size:16px;margin:4px 0 6px}
.decision-card>p{font-size:11px}
.decision-card code{font:10px/1.8 var(--sans);display:block;background:#fff8ef;padding:8px;border-radius:4px;margin:10px 0}
.policy{padding-left:18px;font-size:9px;color:#766f61;line-height:1.9}
.raw-panel{margin-top:15px;font-size:10px}
.raw-panel summary{cursor:pointer}
.raw-panel pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:10px;line-height:1.8;max-height:320px;overflow:auto;background:#e8ede2;padding:12px;border-radius:6px}
@keyframes happy-bounce{0%{transform:translateY(0)}30%{transform:translateY(-12px) rotate(-5deg)}55%{transform:translateY(0) rotate(2deg)}78%{transform:translateY(-6px) rotate(-3deg)}100%{transform:translateY(-3px) rotate(-3deg)}}
@keyframes gentle-nod{0%{transform:rotate(0)}45%{transform:translateY(5px) rotate(-3deg)}100%{transform:rotate(-2deg)}}
@keyframes shoulders-drop{0%{transform:translateY(0)}30%{transform:translateY(2px)}100%{transform:translateY(12px) rotate(4deg)}}
@keyframes head-tilt{0%{transform:rotate(0)}100%{transform:rotate(var(--tilt,5deg))}}
@keyframes awkward-pause{0%,45%{transform:translateY(0)}100%{transform:translateY(5px) rotate(2deg)}}
@keyframes float-in{0%{opacity:0;transform:translateY(12px) scale(.7)}50%{opacity:1}100%{opacity:.9;transform:translateY(-5px) scale(1)}}
@keyframes bar-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes listening{50%{opacity:.3;transform:translateY(-2px)}}
@media(max-width:700px){.scene-art{height:290px}.emotion-banner strong{font-size:19px}.jev-body{padding:0 12px 14px}.axis-card{padding:13px}.jev-panel>summary{padding:15px}.scene-location{font-size:9px}.scene-tab{padding:9px 5px;gap:4px}.scene-number{font-size:12px}.scene-title{font-size:9px}.demo-tag{display:none}}
@media(max-width:700px){.scene-menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.scene-tab{padding:10px 9px;gap:8px}.scene-tab:last-child{grid-column:1/-1}.scene-title{font-size:11px}.scene-number{font-size:16px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}