.advanced-reader-visual {
  margin: 1.35rem 0;
  padding: clamp(1rem, 2.5vw, 1.55rem);
  border: 1px solid rgba(89, 193, 199, .44);
  border-radius: 1.1rem;
  background: radial-gradient(circle at 92% 0%, rgba(46, 154, 176, .2), transparent 38%),
    linear-gradient(145deg, #082430, #0a1a29 70%);
  color: #eef8f8;
  box-shadow: 0 16px 38px rgba(2, 17, 28, .22);
  min-width: 0;
}
.advanced-reader-visual-title { color: #e7f6f4; font-size: clamp(1.2rem, 2.5vw, 1.55rem); font-weight: 800; line-height: 1.2; }
.advanced-reader-visual-job { margin: .7rem 0 .4rem; color: #e3f4f5; line-height: 1.5; }
.advanced-reader-visual-active-moment { color: #f5ca8a; font-weight: 800; }
.advanced-reader-visual-source, .advanced-reader-visual-scope { color: #a8cbd1; font-size: .87rem; line-height: 1.45; }
.advanced-reader-visual-picks, .advanced-reader-visual-lane-picks { display: flex; gap: .48rem; overflow-x: auto; padding: .6rem 0 .75rem; scrollbar-width: thin; }
.advanced-reader-visual-pick-cue { margin: -.2rem 0 .55rem; color: #a8cbd1; font-size: .78rem; }
.advanced-reader-visual button { appearance: none; border: 1px solid #6ca8b4; border-radius: .65rem; background: #133a4a; color: #f2fbfb; padding: .55rem .76rem; font: inherit; font-size: .88rem; font-weight: 700; line-height: 1.25; cursor: pointer; white-space: nowrap; }
.advanced-reader-visual button[aria-pressed="true"] { border-color: #f2be76; background: #815420; color: #fff8e9; }
.advanced-reader-visual button:hover { background: #19516a; }
.advanced-reader-visual button:focus-visible, .advanced-reader-visual summary:focus-visible { outline: 3px solid #f6c67f; outline-offset: 3px; }
.advanced-reader-visual-canvas { min-width: 0; }
.advanced-reader-visual-rails { display: grid; gap: .5rem; margin: .3rem 0 .8rem; }
.advanced-reader-visual-rail { display: grid; grid-template-columns: minmax(6.2rem, .7fr) minmax(0, 1.5fr) auto minmax(0, 1.5fr); align-items: center; gap: .6rem; min-width: 0; border: 1px solid #396779; border-left: 5px solid #58c8c6; border-radius: .65rem; padding: .6rem .75rem; background: #102f3d; transition: opacity .2s ease, transform .2s ease; }
.advanced-reader-visual-rail.is-muted { opacity: .48; }
.advanced-reader-visual-rail-label { color: #98e4df; font-weight: 800; }
.advanced-reader-visual-earlier { color: #bcd0d4; font-size: .88rem; }
.advanced-reader-visual-arrow { color: #f4c07b; font-size: 1.2rem; font-weight: 800; }
.advanced-reader-visual-current { grid-column: 4; color: #fff; font-size: .95rem; overflow-wrap: anywhere; }
.advanced-reader-visual-rail:not(:has(.advanced-reader-visual-earlier)) .advanced-reader-visual-current { grid-column: 2 / 5; }
.advanced-reader-visual-chain { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; margin: .55rem 0; }
.advanced-reader-visual-chain-node { position: relative; min-width: 0; min-height: 9.5rem; display: flex; flex-direction: column; gap: .65rem; padding: 1rem; border: 1px solid #67aeb7; border-radius: .9rem; background: #14394b; overflow-wrap: anywhere; }
.advanced-reader-visual-chain-node::after { content: "→"; position: absolute; right: -.6rem; top: 45%; color: #f4c07b; font-size: 1.5rem; font-weight: 800; z-index: 1; }
.advanced-reader-visual-chain-node:last-child::after { display: none; }
.advanced-reader-visual-chain-node.is-covered { border-style: dashed; background: #102937; }
.advanced-reader-visual-chain-label { color: #9be1dd; font-size: .84rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.advanced-reader-visual-chain-node strong { font-size: .94rem; line-height: 1.4; }
.advanced-reader-visual-reveal { margin: .45rem 0 .7rem; max-width: 100%; white-space: normal !important; overflow-wrap: anywhere; }
.advanced-reader-visual-quality { display: grid; gap: .45rem; padding: 1rem; border-radius: .9rem; border: 1px solid #65b3b5; background: #163f4b; }
.advanced-reader-visual-quality.is-limited { border-color: #e1ab65; background: #4a3728; }
.advanced-reader-visual-quality strong { font-size: 1.3rem; }
.advanced-reader-visual-quality p { margin: 0; }
.advanced-reader-visual-display { color: #fff2d7; font-weight: 800; }
.advanced-reader-visual-view { display: grid; grid-template-columns: minmax(7rem, .7fr) repeat(3, minmax(0, 1fr)); gap: .55rem; margin-top: .5rem; }
.advanced-reader-visual-view-aperture { display: grid; place-items: center; min-height: 8rem; padding: .8rem; text-align: center; white-space: pre-line; border: 6px solid #448b98; border-radius: 50%; background: radial-gradient(circle, #22536a, #102936); color: #fff; font-weight: 800; }
.advanced-reader-visual-view-part { display: flex; flex-direction: column; gap: .65rem; padding: .8rem; border: 1px solid #517e8c; border-radius: .85rem; background: #123342; }
.advanced-reader-visual-view-part span { color: #9ce1de; font-size: .82rem; font-weight: 800; text-transform: uppercase; }
.advanced-reader-visual-view-part strong { overflow-wrap: anywhere; }
.advanced-reader-visual-lead-context { display: flex; flex-wrap: wrap; gap: .5rem 1.3rem; }
.advanced-reader-visual-lead-context p { margin: .2rem 0; }
.advanced-reader-visual-leads { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .45rem; margin: .6rem 0; }
.advanced-reader-visual-lead { display: flex; flex-direction: column; gap: .32rem; padding: .62rem; min-height: 7rem; border: 1px solid #446f82; border-radius: .6rem; background: #142f40; font-size: .78rem; overflow-wrap: anywhere; }
.advanced-reader-visual-lead.is-flagged { border-color: #efba70; background: #4c3928; }
.advanced-reader-visual-lead strong { font-size: 1.15rem; color: #fff; }
.advanced-reader-visual-lead small { color: #b5d7db; }
.advanced-reader-visual-clock-now { color: #f5ca8a; font-size: 1.05rem; font-weight: 800; }
.advanced-reader-visual-clocks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.advanced-reader-visual-clock-lane { position: relative; padding: .7rem; border: 1px solid #4d8795; border-radius: .8rem; background: #123443; min-width: 0; }
.advanced-reader-visual-clock-lane h5 { margin: 0 0 .7rem; color: #a2e5e0; font-size: .92rem; }
.advanced-reader-visual-clock-event { margin: .55rem 0; padding: .55rem; border-left: 4px solid #70d3c8; border-radius: .35rem; background: #1c4a57; }
.advanced-reader-visual-clock-event.is-pending { border-left-color: #f6c67f; background: #493a29; }
.advanced-reader-visual-clock-event.is-unavailable { border-left-color: #9fadb8; background: #2d3c45; }
.advanced-reader-visual-clock-event summary { cursor: pointer; font-size: .84rem; font-weight: 800; line-height: 1.4; }
.advanced-reader-visual-clock-event p { margin: .5rem 0 0; font-size: .82rem; line-height: 1.45; }
@media (max-width: 720px) {
  .advanced-reader-visual-rail { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
  .advanced-reader-visual-earlier, .advanced-reader-visual-current, .advanced-reader-visual-rail:not(:has(.advanced-reader-visual-earlier)) .advanced-reader-visual-current { grid-column: 1; }
  .advanced-reader-visual-arrow { transform: rotate(90deg); width: 1rem; line-height: 1; }
  .advanced-reader-visual-chain, .advanced-reader-visual-view, .advanced-reader-visual-clocks { grid-template-columns: 1fr; }
  .advanced-reader-visual-chain-node { min-height: 0; }
  .advanced-reader-visual-chain-node::after { right: auto; top: auto; bottom: -.95rem; left: 50%; transform: rotate(90deg); }
  .advanced-reader-visual-view-aperture { width: 8rem; justify-self: center; }
  .advanced-reader-visual-leads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}