.episode-example{height:calc(100svh - 110px);min-height:520px;display:flex;flex-direction:column;padding-block:20px;scroll-margin-top:0}
#examples{height:calc(100svh + 160px);min-height:900px}
#examples .section-heading{position:relative;padding-right:160px}
.episode-expand,.episode-close{font:inherit;font-size:16px;font-weight:600;border:1px solid #ccc9bc;background:#f7dd6b;color:#242421;padding:10px 16px;cursor:pointer}
.episode-expand{position:absolute;right:0;bottom:0}
.episode-dialog{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:20px 32px;border:0;background:#fbfaf6;color:#242421;box-sizing:border-box;overflow:hidden}
.episode-dialog[open]{display:flex;flex-direction:column;gap:14px}
.episode-dialog::backdrop{background:rgba(36,36,33,.55)}
.episode-dialog-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-shrink:0}
.episode-dialog-toolbar h2{font-size:24px;margin:0}
.episode-dialog .episode-tabs{margin:0}
.episode-dialog .episode-transcript{padding-inline:max(24px,calc((100% - 1000px)/2))}
@media(max-width:680px){#examples{min-height:900px}#examples .section-heading{padding-right:0}.episode-expand{position:static;margin-top:14px}.episode-dialog{padding:12px}.episode-dialog-toolbar h2{font-size:19px}.episode-close{padding:8px 12px;white-space:nowrap}.episode-dialog .episode-transcript{padding-inline:16px}}
.episode-example .section-heading{margin-bottom:18px;flex-shrink:0}
.episode-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:14px;flex-shrink:0}
.episode-tabs button{padding:17px 20px;border:1px solid #ccc9bc;background:transparent;text-align:left;color:#242421;font-family:inherit;font-size:18px;font-weight:600;line-height:1.3;cursor:pointer}
.episode-tabs button[aria-selected=true]{background:#f7dd6b;border-color:#d3b64a}
.episode-tabs button span{display:block;font-size:12px;font-weight:400;color:#626052;margin-bottom:5px}
.episode-shell{border:1px solid #ccc9bc;background:#fffefa;display:flex;flex-direction:column;flex:1;min-height:0}
.episode-header,.episode-controls,.episode-view-note{flex-shrink:0}
.episode-header{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 24px}
.episode-header h3{font-size:19px;margin:0 0 6px}
.episode-header p{font-size:14px;color:#666357;margin:0}
.episode-outcome{font-size:14px;font-weight:650;padding:7px 12px;white-space:nowrap}
.episode-outcome.won{background:#e4eee3;color:#305d37}.episode-outcome.lost{background:#fae5df;color:#8d3f31}
.episode-controls{padding:0 24px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;border-bottom:1px solid #dedbce}
.episode-controls button{font:inherit;font-size:14px;padding:7px 11px;border:1px solid #d3d0c4;background:transparent;cursor:pointer;color:#47463d}
.episode-controls button[aria-pressed=true]{background:#292c25;border-color:#292c25;color:white}
.episode-controls a{margin-left:auto;font-size:14px;text-decoration:underline;text-underline-offset:3px}
.episode-view-note{font-size:13px;color:#656256;margin:0;padding:13px 24px;background:#f6f4eb}
.episode-transcript{padding:0 24px 24px;flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;scroll-behavior:auto}
.episode-round{font-size:13px;letter-spacing:.07em;text-transform:uppercase;padding:16px 0 10px;margin:0;color:#76715e;border-bottom:1px solid #e6e2d5}
.episode-turn{padding:16px 0;border-bottom:1px solid #eeeadd}
.episode-speaker{font-size:17px;margin:0 0 12px;font-weight:650}
.episode-message{margin:10px 0 0;padding-left:16px;border-left:3px solid #d8be62}
.episode-channel{font-size:12px;color:#686456;font-weight:600}
.episode-message p{font-size:16px;line-height:1.65;margin:4px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.gesture-message p{font-size:23px;letter-spacing:3px;line-height:1.7}
.episode-observation{background:#f5f3e9;padding:12px 14px;margin:12px 0}
.episode-observation summary{font-size:13px;cursor:pointer;color:#595547}
.episode-observation pre{white-space:pre-wrap;overflow-wrap:anywhere;font:13px/1.65 ui-monospace,monospace;margin:12px 0 0}
.episode-end{font-size:16px;font-weight:600;margin:20px 0 0}
.episode-example button:focus-visible,.episode-transcript:focus-visible{outline:3px solid #4676b8;outline-offset:3px}
@media(max-width:1000px){.episode-tabs{grid-template-columns:repeat(5,minmax(160px,1fr));overflow-x:auto}}
@media(max-width:680px){.episode-tabs{gap:7px}.episode-tabs button{padding:12px;font-size:16px}.episode-tabs button span{font-size:11px}.episode-header{padding:16px;align-items:flex-start}.episode-header h3{font-size:16px}.episode-header p{font-size:12px}.episode-controls{padding:0 16px 14px}.episode-controls a{width:100%;margin:5px 0 0}.episode-view-note{padding:12px 16px}.episode-transcript{padding:0 16px 20px}.episode-message p{font-size:16px}.gesture-message p{font-size:23px}}
.episode-example,#examples{height:auto;min-height:0}
#examples .section-heading{padding-right:0}
.episode-shell{flex:none;height:780px}
.episode-controls .episode-expand{position:static;margin:0 0 0 auto;background:#f7dd6b;font-weight:650;font-size:16px;padding:9px 15px}
.episode-perspectives-label{font-size:16px;font-weight:600}
.episode-transcript{padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;overflow:clip;overscroll-behavior:auto;scrollbar-gutter:auto}
.perspective-column{min-width:0;min-height:0;display:flex;flex-direction:column;border-right:1px solid #dedbce;background:#fbfaf6}
.perspective-column:last-child{border-right:0}
.perspective-heading{font-size:23px;margin:0;padding:18px 22px;border-bottom:1px solid #dedbce;background:#f5f1e3;flex-shrink:0}
.perspective-history{padding:0 18px 28px;min-height:0;flex:1;overflow:hidden;overscroll-behavior:auto;position:relative;scrollbar-gutter:stable}
.perspective-history.scroll-active{overflow:auto;overscroll-behavior:contain;outline:2px solid #b5a255;outline-offset:-2px}
.perspective-turn{padding-bottom:14px}
.episode-round{font-size:13px;text-align:center;border:0;padding:18px 0 10px}
.episode-observation{margin:0 0 12px;background:#eeeade;border-radius:10px}
.episode-observation summary{font-size:14px}
.chat-bubble{padding:14px 16px;border-radius:17px;margin:12px 0;max-width:95%;box-sizing:border-box;border:1px solid #e0ddcf}
.chat-bubble.incoming{background:white;border-bottom-left-radius:4px;margin-right:auto}
.chat-bubble.outgoing{margin-left:auto;border-bottom-right-radius:4px}
.chat-bubble.outgoing.deaf{background:#fff0b6;border-color:#e6d79f}
.chat-bubble.outgoing.mute{background:#e4eddf;border-color:#cbdac3}
.chat-bubble.outgoing.blind{background:#e2eaf4;border-color:#c7d4e6}
.episode-channel{font-size:14px;font-weight:650;color:#454438}
.chat-bubble p{font-size:16px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;margin:8px 0 0}
.chat-bubble.gesture-message p{font-size:26px;letter-spacing:2px}
.episode-view-note{font-size:14px}
.episode-dialog .episode-shell{height:auto;flex:1;min-height:0}
.episode-dialog .episode-transcript{padding:0}
.episode-dialog .perspective-history{overflow:auto;overscroll-behavior:contain}
.episode-dialog .episode-expand{display:none}
.perspective-history:focus-visible{outline:3px solid #4676b8;outline-offset:-3px}
@media(max-width:680px){.episode-example,#examples{min-height:0}.episode-shell{height:860px}.episode-transcript{grid-template-columns:repeat(3,minmax(0,1fr))}.perspective-heading{font-size:15px;padding:14px 5px;text-align:center}.perspective-history{padding:0 5px 20px}.chat-bubble{padding:10px 8px;max-width:100%;border-radius:12px}.chat-bubble p{font-size:14px;line-height:1.5}.episode-channel{font-size:12px}.episode-observation{padding:8px 5px}.episode-observation summary{font-size:12px}.episode-observation pre{font-size:11px}.episode-dialog .episode-transcript{padding:0}.episode-controls .episode-expand{width:auto}.episode-perspectives-label{font-size:14px}}