.radar-model-transition {
    --transition-blue: #0a7ca8;
    --transition-ink: #12304a;
    display: grid;
    gap: 1rem;
}
.radar-model-transition.is-compact { padding: 1.2rem; }
.radar-transition-heading {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(190px, 245px);
    align-items: stretch;
    gap: clamp(1rem, 2.5vw, 2rem);
    padding: clamp(1.1rem, 2.5vw, 1.75rem);
    overflow: hidden;
    background: radial-gradient(circle at 82% 12%, rgba(255,255,255,.92) 0 5%, transparent 26%), linear-gradient(132deg, rgba(255,255,255,.91), rgba(226,244,252,.86));
    border: 1px solid rgba(151, 198, 220, .72);
    border-radius: 24px;
    box-shadow: 0 16px 42px rgba(31, 92, 125, .12), inset 0 1px rgba(255,255,255,.9);
}
.radar-transition-heading::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 7px; background: linear-gradient(180deg, #12a6cc, #0b668e); }
.radar-transition-heading-copy { position: relative; z-index: 1; display: grid; align-content: center; max-width: 980px; }
.radar-transition-kicker-row { display: flex; align-items: center; gap: .65rem; }
.radar-transition-kicker { display: block; color: #087fa8; font-size: .72rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.radar-transition-help-trigger { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; color: #fff; background: #0b789f; border: 2px solid rgba(255,255,255,.9); border-radius: 50%; box-shadow: 0 5px 14px rgba(8,82,116,.22); cursor: pointer; font-family: Georgia,serif; font-size: 1.15rem; font-weight: 900; line-height: 1; }
.radar-transition-help-trigger:hover,.radar-transition-help-trigger:focus-visible { color: #0b5679; background: #fff; outline: 3px solid rgba(22,137,180,.2); }
.radar-transition-heading h2 { max-width: 980px; margin: .32rem 0 .5rem; color: var(--transition-ink); font-size: clamp(1.55rem,3vw,2.45rem); line-height: 1.08; }
.radar-transition-heading-copy>p { max-width: 890px; margin: 0; color: #536f83; font-size: clamp(.9rem,1.4vw,1.02rem); line-height: 1.55; }
.radar-transition-horizon-card { position: relative; z-index: 1; display: grid; align-content: center; gap: .45rem; padding: 1rem; background: rgba(255,255,255,.82); border: 1px solid rgba(168,205,222,.78); border-radius: 18px; box-shadow: 0 8px 24px rgba(31,92,125,.1); }
.radar-transition-horizon-card>span { color: #087fa8; font-size: .66rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.radar-transition-horizon-card label { display: grid; gap: .35rem; color: #45677e; font-size: .72rem; font-weight: 900; }
.radar-transition-horizon-card select { width: 100%; min-height: 48px; padding: .6rem .8rem; color: #153c59; background: #fff; border: 1px solid #aacddd; border-radius: 13px; font-weight: 850; }
.radar-transition-horizon-card small { color: #718899; line-height: 1.35; }
.radar-transition-help-dialog { width: min(620px,calc(100vw - 32px)); }
.radar-transition-help-dialog .context-help-dialog-inner>strong { font-size: 1.08rem; }
.radar-transition-help-dialog .context-help-dialog-inner>p { font-size: .82rem; }
.radar-transition-state { display: grid; place-items: center; min-height: 112px; padding: 1rem; color: #5c768a; text-align: center; background: #f3f9fc; border: 1px dashed #a9cadb; border-radius: 18px; }
.radar-transition-state strong { color: #173c57; font-size: 1.05rem; }
.radar-transition-state.is-error { color: #94443f; background: #fff1f0; border-color: #e0a8a5; }
.radar-model-transition [hidden] { display: none!important; }
.radar-transition-facts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .8rem; margin-bottom: 1rem; }
.radar-transition-facts article { display: grid; gap: .22rem; padding: .9rem 1rem; background: #f8fbfd; border: 1px solid #d1e3ec; border-radius: 15px; }
.radar-transition-facts span { color: #688094; font-size: .66rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.radar-transition-facts strong { color: #12304a; font-size: 1.15rem; }
.radar-transition-facts small { color: #688094; }
.radar-transition-chart-shell { padding: 1rem; background: #fff; border: 1px solid #c8dfe9; border-radius: 20px; }
.radar-transition-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .65rem; }
.radar-transition-chart-head>div { display: grid; gap: .15rem; }
.radar-transition-chart-head strong { color: #153c59; font-size: 1.05rem; }
.radar-transition-chart-head small { color: #687f91; }
.radar-transition-chart-head button { padding: .65rem .85rem; color: #fff; background: #1689b4; border: 0; border-radius: 12px; cursor: pointer; font-weight: 900; }
.radar-transition-chart { min-height: 320px; overflow: hidden; background: #f7fbfd; border-radius: 14px; }
.radar-transition-chart svg { display: block; width: 100%; height: auto; min-height: 300px; }
.radar-transition-grid { stroke: #d8e7ee; stroke-width: 1; }
.radar-transition-axis { fill: #60798d; font-size: 12px; font-weight: 700; }
.radar-transition-observed { fill: none; stroke: #087fa8; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.radar-transition-observed-point { fill: #fff; stroke: #087fa8; stroke-width: 3; }
.radar-transition-band { fill: rgba(244,176,51,.18); stroke: none; }
.radar-transition-mean { fill: none; stroke: #173c57; stroke-width: 3.5; stroke-dasharray: 9 6; }
.radar-transition-model { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.radar-transition-handover { stroke: #d96826; stroke-width: 3; stroke-dasharray: 5 5; }
.radar-transition-handover-label { fill: #b14d16; font-size: 12px; font-weight: 900; }
.radar-transition-legend { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .75rem; }
.radar-transition-legend button,.radar-transition-legend span { display: inline-flex; align-items: center; gap: .4rem; padding: .42rem .62rem; color: #294b63; background: #fff; border: 1px solid #d0e1e9; border-radius: 999px; font-size: .72rem; font-weight: 850; }
.radar-transition-legend button { cursor: pointer; }
.radar-transition-legend button.is-muted { opacity: .4; }
.radar-transition-legend i { width: .65rem; height: .65rem; border-radius: 50%; }
.radar-transition-note { margin: .75rem 0 0; color: #677e90; font-size: .72rem; line-height: 1.45; }
.radar-transition-note a { color: #087fa8; font-weight: 900; }
.radar-transition-chart-shell:fullscreen,.radar-transition-chart-shell.is-fullscreen-fallback { z-index: 9999; inset: 0; padding: 1.2rem; background: #edf7fb; }
.radar-transition-chart-shell.is-fullscreen-fallback { position: fixed; overflow: auto; }
.radar-transition-chart-shell:fullscreen .radar-transition-chart,.radar-transition-chart-shell.is-fullscreen-fallback .radar-transition-chart { min-height: calc(100vh - 150px); }
.radar-transition-chart-shell:fullscreen svg,.radar-transition-chart-shell.is-fullscreen-fallback svg { height: calc(100vh - 165px); }
.radar-model-transition.is-compact .radar-transition-heading { grid-template-columns: minmax(0,1fr) minmax(170px,210px); padding: 1rem; border-radius: 18px; }
.radar-model-transition.is-compact .radar-transition-heading h2 { font-size: 1.5rem; }
.radar-model-transition.is-compact .radar-transition-heading-copy>p { font-size: .84rem; }
.radar-model-transition.is-compact .radar-transition-chart { min-height: 270px; }
.radar-model-transition.is-compact .radar-transition-chart-head button { display: none; }
@media(max-width:760px){.radar-transition-heading,.radar-model-transition.is-compact .radar-transition-heading{grid-template-columns:1fr}.radar-transition-facts{grid-template-columns:1fr}.radar-transition-chart-head{align-items:flex-start;flex-direction:column}.radar-transition-chart{overflow-x:auto}.radar-transition-chart svg{min-width:760px}}
@media(max-width:480px){.radar-transition-heading{padding:1rem .9rem 1rem 1.05rem;border-radius:18px}.radar-transition-kicker-row{align-items:flex-start;justify-content:space-between}.radar-transition-heading h2{font-size:1.48rem}}