:root{color-scheme:dark;--pink:#ff98d0;--ink:#fff7ed;--bg:#201a24;--cyan:#a0e4e4}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg)}body{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink)}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid var(--cyan);outline-offset:4px}.experience{width:100%;max-width:1536px;margin:auto}.stage{position:relative;width:100%;height:calc(100svh - 76px);min-height:350px;max-height:1024px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#201a24}.room{position:relative;width:min(100%,calc((100svh - 76px)*1.5));aspect-ratio:3/2;flex-shrink:0;isolation:isolate;user-select:none;touch-action:manipulation}.room>img,.room>canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;pointer-events:none}.hotspots{position:absolute;inset:0;pointer-events:none}.hotspot{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);min-height:48px;padding:10px 18px;display:flex;align-items:center;gap:9px;white-space:nowrap;font-weight:750;font-size:17px;letter-spacing:.1px;background:#241a2ceb;color:#fff4f0;border:1px solid #dcc2c995;border-radius:9px;box-shadow:0 3px 0 #110d18a0,0 7px 17px #160b1f38;pointer-events:auto;transition:background .15s,box-shadow .15s}.hotspot>span{font-size:21px;color:#f7afd4}.hotspot:hover{background:#51324c}.hotspot[aria-pressed=true]{background:#efacd4;color:#2c1e2b;border-color:#ffe3f3;box-shadow:0 3px 0 #694555,0 0 0 4px #f3a0ce22}.hotspot[aria-pressed=true]>span{color:#5e3152}.pause{position:absolute;right:14px;top:14px;z-index:10;width:44px;height:44px;border:1px solid #eed8eb66;border-radius:8px;background:#211828cc;color:#ffe8f4;font-size:20px;box-shadow:0 3px 10px #10051d22}.pause:hover{background:#473347}.stations{display:flex;justify-content:center;gap:10px;padding:12px 16px 14px;background:#201a24}.stations button{font-size:16px;font-weight:650;padding:11px 27px;min-height:48px;min-width:130px;border:1px solid #6d536b;border-radius:8px;background:#2c222f;color:#e9dce8}.stations button:hover{background:#433047}.stations button[aria-pressed=true]{background:#edacd0;color:#2a1c29;border-color:#ffd4ec}.speech{position:absolute;display:flex;gap:8px;align-items:flex-start;width:max-content;max-width:280px;padding:11px 14px;background:#fff5e5;color:#372a31;border:2px solid #71565b;border-radius:10px 10px 10px 2px;font-size:15px;line-height:1.4;font-weight:650;box-shadow:3px 4px 0 #21112636;pointer-events:none;transform:translate(-50%,-100%);opacity:0;transition:opacity .16s;z-index:8}.speech.visible{opacity:1}.speech-icon{font-size:20px;line-height:1.15;flex-shrink:0}.emotions{position:absolute;inset:0;pointer-events:none;overflow:visible}.emotion{position:absolute;display:grid;place-items:center;width:31px;height:31px;border-radius:8px;background:#fff3e8ed;border:1px solid #976877;color:#42273b;font-size:20px;line-height:1;box-shadow:2px 3px 0 #36203244;will-change:transform,opacity;z-index:5}.load-state{position:absolute;inset:0;z-index:20;background:var(--bg);display:grid;place-items:center;color:#dac5d5}.load-state[hidden]{display:none}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}noscript{display:block;padding:20px;font-size:16px}
@media(max-width:700px){.stage{height:min(calc(100vw * 1.3),calc(100svh - 76px));min-height:320px;align-items:center}.room{width:200%;max-width:none;transition:transform .7s ease;transform:translate(20%,4%)}.stage[data-zone=reflection] .room{transform:translate(-23%,7%)}.stage[data-zone=cards] .room{transform:translate(5%,-14%)}.hotspot{font-size:15px;min-height:44px;padding:8px 12px;gap:6px}.hotspot>span{font-size:19px}.speech{font-size:14px;max-width:240px;padding:9px 11px}.speech-icon{font-size:18px}.stations{gap:7px;padding:12px 10px}.stations button{font-size:15px;min-width:0;flex:1;padding:12px 5px}.pause{right:9px;top:9px;width:40px;height:40px}.emotion{font-size:18px;width:28px;height:28px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.speech[data-moderator=true]{border-color:#9a5b82;background:#fff0f8}

@media(max-width:700px){.hotspot{display:none}}