.interactive-widget{--reveal:50%;margin:30px 0;padding:26px;border:1px solid #c9d9ef;border-radius:18px;background:linear-gradient(145deg,#fff,#f5f8fe);box-shadow:0 8px 28px #1b457108;min-width:0;overflow-wrap:anywhere}
.interactive-widget [hidden]{display:none!important}.widget-kicker{font-size:13px;color:#6b82a8;letter-spacing:2px}.interactive-widget h4{font-size:24px;line-height:1.5;margin:9px 0 12px;color:#142848}.interactive-widget .widget-intro{font-size:16px;line-height:1.8;color:#586e90;margin:0 0 20px}.interactive-widget .widget-footnote{font-size:13px;line-height:1.85;color:#657995;margin:16px 0 0}.widget-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:16px 0}.widget-hint{font-size:14px;color:#647897}.widget-button{min-height:44px;padding:9px 16px;border:1px solid #c5d5eb;border-radius:9px;color:#28446e;background:#fff;cursor:pointer;font-size:14px;line-height:1.6}.widget-button:hover{background:#edf4ff;border-color:#8daee2}.widget-button.primary{color:#fff;background:#3978df;border-color:#3978df}.widget-button.primary:hover{background:#2d65c0}.goal-options{border:0;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.goal-options legend{font-size:15px;margin-bottom:10px;color:#49618a}.goal-options label{display:flex;align-items:center;gap:9px;min-height:52px;padding:10px 12px;border:1px solid #ccd9ed;background:#fff;border-radius:10px;cursor:pointer;font-size:15px}.goal-options label:has(input:checked){background:#eaf2ff;border-color:#7fa8ee;color:#195cb9}.interactive-widget input[type=checkbox]{accent-color:#3978df;width:18px;height:18px;flex-shrink:0}.interactive-widget .widget-empty{font-size:15px;color:#6b7e9b;margin:18px 0}.goal-result{background:#fff;padding:15px 18px;border:1px solid #dce5f3;border-radius:10px;margin:10px 0}.goal-result summary{font-size:17px;color:#254571}.goal-result>strong{display:block;margin-top:14px;font-size:15px}.goal-result p,.goal-result li{font-size:15px!important;margin:8px 0!important}.goal-result ul{padding-left:22px}.reading-route{padding:16px 18px;margin-top:16px;background:#edf3fd;border-radius:10px}.reading-route>strong{font-size:16px}.reading-route li{font-size:14px!important;margin:8px 0!important}.reading-route .text-link{font-size:14px}.component-design{font-size:14px;padding:4px 0 15px;border-bottom:0}.component-design>summary{font-size:14px;color:#7a8eae;font-weight:400}.component-design .component-brief{margin:10px 0 0}
.comparison-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;margin-bottom:12px}.emotion-key{color:#a65d27}.evidence-key{color:#2d6ba8}.comparison-stage{position:relative;min-height:345px;border:1px solid #d7e1ef;border-radius:12px;overflow:hidden;isolation:isolate;background:#fff}.comparison-pane{position:absolute;inset:0;padding:24px;background:#fff}.comparison-emotion{background:#fffbf6}.comparison-evidence{background:#f5faff;clip-path:inset(0 calc(100% - var(--reveal)) 0 0);pointer-events:none}.comparison-evidence .annotation{pointer-events:auto}.comparison-emotion{clip-path:inset(0 0 0 var(--reveal))}.comparison-pane h5{font-size:21px;line-height:1.6;margin:14px 0;color:#233956}.comparison-pane p{font-size:17px!important;line-height:1.9;margin:15px 0!important}.narrative-label{font-size:13px;color:#7b7f87;border:1px solid #d5d9e1;padding:5px 9px;border-radius:20px}.comparison-pane .narrative-note{font-size:14px!important;color:#6f7d92}.comparison-divider{position:absolute;inset:0 auto 0 var(--reveal);width:2px;background:#88a9da;pointer-events:none}.comparison-divider span{position:absolute;top:47%;left:-15px;width:32px;height:32px;border-radius:50%;background:#fff;border:1px solid #b5c8e3;text-align:center;line-height:29px;font-family:sans-serif;color:#58729c}.comparison-stage:has(.comparison-pane[inert]) .comparison-divider{display:none}.range-label{display:block;margin:17px 0 5px;font-size:14px;color:#486187}.widget-range{width:100%;min-height:36px;accent-color:#3978df;cursor:ew-resize}.annotation-toggle{display:flex;align-items:center;gap:8px;font-size:14px;color:#496181}.annotation{position:relative;cursor:help;border-bottom:1px dotted #a2b3cc;border-radius:3px}.annotation:hover,.annotation:focus,.annotation-open,.show-annotations .annotation{background:#e5efff}.annotation.emotion:hover,.annotation.emotion:focus,.show-annotations .annotation.emotion,.annotation.emotion.annotation-open{background:#ffe5c5}.annotation:after{content:attr(data-note);position:absolute;z-index:3;left:0;top:100%;width:220px;max-width:65vw;padding:10px 13px;border-radius:9px;background:#253d60;color:#fff;font-size:13px;line-height:1.6;box-shadow:0 5px 16px #182d4b2b;opacity:0;visibility:hidden;pointer-events:none}.annotation:hover:after,.annotation:focus:after,.annotation-open:after{opacity:1;visibility:visible}.comparison-controls{gap:8px}.comparison-controls .widget-button[aria-pressed=true]{border-color:#7c9fd6;background:#eaf2ff;color:#195cb9}
.boundary-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:18px 0}.boundary-steps button{min-height:44px;border:1px solid #d2deee;border-radius:9px;background:#fff;color:#526b8f;font:inherit;font-size:14px;cursor:pointer}.boundary-steps button[aria-pressed=true]{background:#eaf2ff;border-color:#7fa8ed;color:#1b62bc}.network-flow{display:grid;grid-template-columns:1fr 45px 1fr 45px 1fr;align-items:center;gap:5px;padding:20px 0}.flow-node{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:125px;border:1px solid #cfddf0;background:#fff;border-radius:12px;gap:6px;text-align:center;padding:10px}.flow-symbol{font-size:28px;font-family:system-ui,sans-serif;color:#6989b5}.flow-node strong{font-size:16px}.flow-node small{font-size:12px;color:#657da1}.proxy-node{opacity:.4;border-style:dashed}.network-flow[data-phase="1"] .proxy-node,.network-flow[data-phase="2"] .proxy-node,.network-flow[data-phase="3"] .proxy-node{opacity:1;border-style:solid;background:#edf4ff}.flow-arrow{position:relative;text-align:center;font-family:system-ui,sans-serif;color:#87a1c5;font-size:24px}.flow-arrow span{display:none;position:absolute;top:45%;left:0;width:7px;height:7px;background:#4f87e4;border-radius:50%}.network-flow.playing .flow-arrow span{display:block;animation:data-travel 1.25s linear infinite}.network-flow[data-phase="2"] .flow-node,.network-flow[data-phase="3"] .flow-node{border-color:#83b5ac}.network-flow[data-phase="2"] .flow-arrow,.network-flow[data-phase="3"] .flow-arrow{color:#3d9486}.identity-link{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px dashed #c75a65;border-radius:9px;color:#a44351;background:#fff5f6;padding:12px 16px;font-size:14px}.identity-link strong{color:#a44351}.boundary-explanation{padding:16px 18px;background:#edf3fc;border-radius:10px;margin-top:15px;min-height:115px}.boundary-explanation strong{font-size:17px}.boundary-explanation p{font-size:15px!important;line-height:1.85;margin:8px 0 0!important}@keyframes data-travel{from{transform:translateX(0)}to{transform:translateX(32px)}}
.mock-panel{padding:18px;border:1px solid #d5e0ef;border-radius:12px;background:#fff;margin:12px 0}.mock-caption{display:block;font-size:14px;color:#587093;margin-bottom:12px}.mock-url{font-family:ui-monospace,Consolas,monospace;font-size:14px;line-height:2.6;overflow-wrap:anywhere}.mask-field{font-family:inherit;font-size:inherit;max-width:100%;padding:6px 8px;min-height:40px;border:1px dashed #bacbe3;border-radius:6px;background:#f6f9fe;color:#2b4b75;cursor:pointer;overflow-wrap:anywhere;word-break:break-word;text-align:left;vertical-align:middle}.mask-field:hover{background:#eaf2ff}.mask-field[aria-pressed=true]{background:#263d5a;color:#fff;border-color:#263d5a;letter-spacing:2px}.mock-account{margin:0}.mock-account>div{display:grid;grid-template-columns:82px minmax(0,1fr);align-items:center;gap:12px;margin:10px 0}.mock-account dt{font-size:14px;color:#5c7396;margin:0}.mock-account dd{margin:0;font-family:ui-monospace,Consolas,monospace;font-size:14px}.redaction-feedback{padding:16px 18px;border:1px solid #dfc48f;background:#fffbf2;border-radius:10px}.redaction-feedback[data-complete=true]{border-color:#a3cbbd;background:#f0faf5}.redaction-feedback strong{font-size:18px}.redaction-feedback p{font-size:15px!important;line-height:1.85;margin:9px 0 0!important}
@media(max-width:640px){.interactive-widget{padding:18px 15px;border-radius:14px}.interactive-widget h4{font-size:21px}.interactive-widget .widget-intro{font-size:14px}.goal-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.goal-options label{padding:9px;font-size:13px}.widget-button{padding:9px 12px;font-size:13px}.comparison-pane{padding:18px 15px}.comparison-stage{min-height:425px}.comparison-pane h5{font-size:19px}.comparison-pane p{font-size:15px!important}.comparison-pane .narrative-note{font-size:12px!important}.comparison-controls{display:grid;grid-template-columns:1fr 1fr 1fr}.comparison-controls .widget-button{font-size:12px;padding:8px 5px}.boundary-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.network-flow{grid-template-columns:1fr 1fr 1fr;gap:7px;padding:15px 0}.flow-arrow{display:none}.flow-node{min-height:125px;padding:8px 4px;gap:5px}.flow-node strong{font-size:13px}.flow-node small{font-size:10px}.flow-symbol{font-size:24px}.identity-link{flex-direction:column;align-items:flex-start;font-size:13px;padding:12px}.boundary-explanation{padding:13px}.boundary-explanation strong{font-size:15px}.boundary-explanation p{font-size:14px!important}.mock-panel{padding:13px}.mock-account>div{grid-template-columns:64px minmax(0,1fr);gap:6px}.mock-account dd,.mock-url{font-size:12px}.mask-field{min-height:44px}.interactive-widget .widget-footnote{font-size:12px}.annotation:after{width:180px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.network-flow.playing .flow-arrow span{animation:none}.interactive-widget *{transition:none!important}}
.comparison-stage{display:grid}
.comparison-pane{position:relative;inset:auto;grid-area:1/1;min-width:0}
.annotation-explanation{padding:12px 15px;background:#edf3fc;border-radius:9px;font-size:14px!important;line-height:1.85}
.annotation:after{display:none}