.replay{background:#f8faff;min-height:0}
.replay-header{display:flex;align-items:center;gap:18px;min-height:57px;padding:10px 24px;background:white;border-bottom:1px solid #e4ebf4;flex-shrink:0}
.replay-header h2{font-size:19px;letter-spacing:-.35px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.replay-header>select{margin-right:auto;max-width:40%;font-size:16px;padding:7px 10px}
.replay .dm-tl-segmented button{font-size:14px}
.replay-header .dm-tl-secondary{font-size:13px;padding:8px 11px}
.replay-pathbar{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:9px 24px;flex-shrink:0;border-bottom:1px solid #e8eef6;background:#ffffffa6}
.replay-pathbar select{font-size:14px;max-width:50%;padding:6px 28px 6px 9px;border-color:transparent;background-color:transparent;color:#37577c}
.replay-legend{display:flex;gap:18px;font-size:12px;color:#627895}
.replay-legend span:before{content:'';display:inline-block;width:24px;margin-right:7px;border-top:2px solid #7ea6dd;vertical-align:middle}
.replay-legend .alternative:before{border-top:2px dashed #42a99b}
.replay-viewport{position:relative;flex:1;min-height:235px;overflow:hidden;background-image:radial-gradient(#d4dfed .8px,transparent .8px);background-size:22px 22px;touch-action:none;cursor:grab}
.replay-world{position:absolute;transform-origin:0 0;will-change:transform}
.replay-wires{position:absolute;inset:0;overflow:visible;pointer-events:none}
.replay-wires>path{fill:none;stroke:#81a8df;stroke-width:2}
.replay-wires>path.alternative{stroke:#4da99b;stroke-dasharray:7 6}
.replay-card{position:absolute;width:232px;height:218px;padding:19px;border:1px solid #ccdef4;border-radius:15px;background:linear-gradient(140deg,#f7fbff,#edf4ff);box-shadow:0 4px 15px #35558008;display:flex;flex-direction:column;gap:10px;cursor:pointer;user-select:none}
.replay-card.kind-emotion,.replay-card.kind-reflection{background:linear-gradient(130deg,#faf8ff,#f0ebfc);border-color:#ded4f5}
.replay-card.kind-decision{background:linear-gradient(140deg,#fffdf3,#fff5d9);border-color:#ead9a9}
.replay-card.kind-outcome{background:#f2f7fe}
.replay-card.kind-context{background:linear-gradient(140deg,#f9fafc,#edf0f5);border-color:#d9dfe8}
.replay-card.current{outline:3px solid #3782ed;outline-offset:4px}
.replay-card.current:before{content:'NOW';position:absolute;left:14px;top:-26px;font-size:11px;letter-spacing:1.3px;font-weight:750;color:#1769ee;background:#f8faff;padding:2px 5px}
.replay-card-top{display:flex;align-items:center;justify-content:space-between;gap:6px}
.replay-card-label{display:flex;gap:7px;align-items:center;font-size:12px;font-weight:700;letter-spacing:.4px;color:#5879a1}
.replay-card.kind-decision .replay-card-label{color:#94711e}
.replay-card.kind-emotion .replay-card-label,.replay-card.kind-reflection .replay-card-label{color:#8064ae}
.replay-card h3{font-size:21px;line-height:1.3;letter-spacing:-.3px;font-weight:650;margin:6px 0 0;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.replay-card-body{font-size:15px;line-height:1.5;color:#58718e;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-wrap;margin:0}
.replay-time{font-size:12px;color:#6285b0;white-space:nowrap}
.replay-card-action{margin-top:auto;align-self:flex-start;font-size:13px;font-weight:650;padding:7px 0;color:#806321}
.replay-card-action:hover{text-decoration:underline}
.replay-card.concealed{background:#f6f8fc;border:1px dashed #cdd9e8;color:#8191a6;box-shadow:none}
.replay-card.concealed h3{font-size:19px;font-weight:500}.replay-card.concealed p{font-size:13px;line-height:1.5}
.replay-card.is-alternative{background:linear-gradient(140deg,#f2fcf8,#e7f7f0);border:1px dashed #6fb5a8}
.replay-card.is-alternative .replay-card-label,.replay-card.is-alternative .replay-card-action{color:#338779}
.replay-card.is-alternative.current{outline-color:#38a28d}
.replay-card.is-alternative.current:before{display:none}
.replay-inline-editor{font-size:20px;line-height:1.35;padding:5px;resize:none;min-height:80px;max-height:130px;background:#ffffffc9;border:1px solid #8fb8ee;color:#304c70;user-select:text}
.replay-branch-label{position:absolute;color:#388d7f;font-size:14px;font-weight:600}
.replay-branch-title{padding:0!important;margin:2px 0 0!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;font-size:20px!important;font-weight:600;line-height:1.35;resize:none;min-height:75px;color:#285f55;cursor:text;overflow:auto}
.replay-branch-title::placeholder{color:#7e9d96;font-weight:450}
.replay-unobserved{color:#5c8b7f;font-size:12px;font-weight:550}
.replay-card>.replay-icon{position:absolute;bottom:13px;right:12px;opacity:0;color:#6b988b}
.replay-card:hover>.replay-icon,.replay-card:focus-within>.replay-icon{opacity:1}
.replay-media{min-height:0;flex:1;overflow:hidden;border-radius:7px;max-height:128px}
.replay-media img,.replay-media video{width:100%;height:100%;object-fit:contain;background:#e8eef6}
.replay-media audio{width:100%;max-height:40px}
.replay-card:has(.replay-media) h3{font-size:17px;-webkit-line-clamp:1}.replay-card:has(.replay-media) .replay-card-body{display:none}
.replay-details{flex-shrink:0;background:#fff;border-top:1px solid #e0e7f2;padding:12px 24px;max-height:250px;overflow:auto}
.replay-detail-top{display:flex;gap:12px;align-items:center;margin-bottom:9px;min-height:28px;font-size:14px}
.replay-detail-top strong{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15px}
.replay-detail-top>select{padding:4px 24px 4px 9px;font-size:13px;max-width:150px;background:#f5f8fc}
.replay-perspectives{display:grid;grid-template-columns:1.2fr 1fr;gap:18px}
.replay-context>summary{cursor:pointer;font-size:13px;color:#607b9d;padding:3px 0}
.replay-context[open]>summary{margin-bottom:9px}
.replay-then{display:grid;grid-template-columns:1fr 1fr;gap:5px 12px;background:#f3f7fd;padding:11px 14px;border-radius:10px}
.replay-now{background:#f6f3fc;padding:11px 14px;border-radius:10px}
.replay-perspectives h3{font-size:14px;margin:0 0 4px;grid-column:1/-1;color:#35557a}
.replay-now h3{color:#72559a}
.replay-field{display:flex;flex-direction:column;gap:3px;min-width:0;font-size:11px;color:#74869c}
.replay-field textarea{font-size:14px;padding:5px 0;line-height:1.4;background:transparent;border:0;border-radius:0;box-shadow:none;resize:vertical;min-height:44px;color:#304c70}
.replay-field textarea:focus{background:#fff;border-radius:5px;box-shadow:0 0 0 2px #a8c8f5;padding:5px}
.replay-field textarea::placeholder{color:#8a9bb0}
.replay-edit-content{margin-top:8px;font-size:12px;color:#6d819a}
.replay-edit-content summary{cursor:pointer;display:inline-block}.replay-edit-content[open]{padding-bottom:8px}.replay-edit-content[open] .replay-field{margin-top:12px}
.replay-edit-content[open] .replay-field textarea{border:1px solid #e1e7ef;border-radius:7px;padding:7px}
.replay-alternative-hint{font-size:14px;color:#688879;margin:0;padding-bottom:4px;line-height:1.5}
.replay-player{display:flex;align-items:center;gap:20px;padding:13px 24px;background:white;border-top:1px solid #e4ebf4;flex-shrink:0}
.replay-controls{display:flex;gap:7px;align-items:center}
.replay-icon{width:30px;height:30px;padding:0;border-radius:6px;color:#7088a6}.replay-icon:hover{background:#eef4fd;color:#1769ee}
.replay-play{background:#1769ee;color:white;border-radius:9px;padding:12px 16px;min-width:100px;font-size:14px;font-weight:600}
.replay-position{display:flex;flex-direction:column;gap:5px;min-width:125px;font-size:13px;color:#354e70}.replay-position span{font-size:12px;color:#8593a8}
.replay-range{flex:1;min-width:70px;accent-color:#1769ee;padding:0;cursor:ew-resize;height:24px;border:0}
.replay-toggles{display:flex;flex-direction:column;gap:8px;font-size:12px;color:#7186a2}.replay-toggles label{display:flex;gap:8px;align-items:center;white-space:nowrap;cursor:pointer}.replay-toggles input{margin:0;accent-color:#1769ee}
.replay-zoom{position:absolute;bottom:13px;right:15px;display:flex;align-items:center;gap:5px;background:#fffffff0;border:1px solid #dfe7f3;border-radius:8px;padding:3px;font-size:11px;color:#8190a6;box-shadow:0 2px 9px #23456d0c}
.replay-text-button{font-size:12px;color:#527eae;padding:5px 9px;border-radius:5px;white-space:nowrap}.replay-text-button:hover{background:#edf4ff}
.replay-empty{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;flex:1;padding:35px;text-align:center;color:#6c8db5}.replay-empty h2{color:#2d4665;font-size:25px}.replay-empty p{color:#6b8099;font-size:16px;max-width:450px;line-height:1.6}
@media(max-height:850px){.replay-details{max-height:195px;padding-top:8px;padding-bottom:8px}.replay-field textarea{min-height:36px;height:38px}.replay-player{padding-top:10px;padding-bottom:10px}.replay-then,.replay-now{padding:8px 12px}}
@media(max-width:760px){.replay-header{flex-wrap:wrap;padding:10px 12px;gap:8px}.replay-header h2{flex-basis:100%;font-size:17px}.replay-header .dm-tl-segmented{margin-right:auto}.replay-pathbar{padding:7px 12px}.replay-legend{font-size:10px;gap:9px}.replay-pathbar select{font-size:12px}.replay-details{padding:8px 12px;max-height:180px}.replay-perspectives{grid-template-columns:1fr;gap:8px}.replay-player{flex-wrap:wrap;padding:10px 12px;gap:10px}.replay-toggles{flex-direction:row;width:100%;justify-content:center}.replay-position{min-width:100px}.replay-play{min-width:80px;padding:10px}.replay-detail-top strong{display:none}}