/* The cycle stays readable, interactive, and synchronized at every width. */
.activate-button { position:relative; padding:10px 15px; border:1px solid #70538e; border-radius:7px; background:#251832; isolation:isolate; }
.activate-button::after { content:""; position:absolute; inset:-1px; border:1px solid var(--purple); border-radius:inherit; pointer-events:none; opacity:0; }
.activate-button[data-discovered=false]::after { animation:activate-pulse 2.4s ease-out infinite; }
.activate-button:hover { background:#342147; border-color:var(--purple); }
@keyframes activate-pulse { 0%{opacity:.8;transform:scale(1)} 75%,100%{opacity:0;transform:scale(1.1,1.38)} }
.timeline { padding-bottom:24px; }
.timeline-landscape { height:270px; margin-top:24px; isolation:isolate; }
.route-guide,.route-history { fill:none; vector-effect:non-scaling-stroke; }
.route-guide { stroke-width:1.5; opacity:.25; }
.studio-route { stroke:#b3a6c2; }
[data-active=true] .studio-route { stroke:var(--purple); }
.cheat-route { stroke:var(--coral); }
.route-history { stroke-width:2.5; }
.route-history.cheat-route { stroke-width:2; stroke-dasharray:4 5; }
[data-active=false] .route-history.studio-route { stroke-dasharray:5 6; }
#cycle-progress-mask { transition:width .48s var(--ease); }
.cycle-playhead { position:absolute; top:3%; bottom:9%; width:1px; left:19.444%; background:linear-gradient(transparent,#9f80c685,transparent); transition:left .48s var(--ease); pointer-events:none; }
.cycle-playhead>span { position:absolute; top:-14px; left:0; transform:translateX(-50%); font:9px var(--display); letter-spacing:.08em; color:#a991c3; white-space:nowrap; }
.plot-point { position:absolute; padding:0; width:44px; height:44px; transform:translate(-50%,-50%); background:none; border:0; border-radius:50%; z-index:3; transition:top .48s var(--ease); }
.plot-point>span { display:block; width:8px; height:8px; margin:auto; border-radius:50%; background:#4e405e; border:2px solid #746584; transition:background .3s,box-shadow .3s; }
.plot-point[data-seen=true]>span { background:#b5a3ca; border-color:#d9c7ed; }
[data-active=true] .plot-point[data-seen=true]>span { background:var(--acid); border-color:var(--acid); }
.plot-point:hover>span,.plot-point:focus-visible>span { box-shadow:0 0 0 7px #ae8aff35; }
.plot-point[aria-pressed=true]>span { width:11px; height:11px; box-shadow:0 0 0 6px #ae8aff20,0 0 18px #ae8aff65; }
.moving-marker { position:absolute; width:44px; height:44px; transform:translate(-50%,-50%); padding:0; border:0; border-radius:50%; background:none; transition:left .48s var(--ease),top .48s var(--ease); }
.studio-marker { z-index:2; pointer-events:none; }
.moving-marker>span { position:absolute; bottom:40px; left:16px; font:600 10px/1.3 var(--font); color:#e4d5f5; background:#1e1529f5; border:1px solid #654d7f; padding:7px 9px; border-radius:4px; white-space:nowrap; }
.moving-marker[data-edge=right]>span { left:auto; right:16px; }
.cheat-marker { z-index:3; }
.cheat-marker i { display:block; width:9px; height:9px; border-radius:50%; margin:auto; background:var(--coral); box-shadow:0 0 0 5px #ef9d9218; }
.cheat-marker>span { bottom:auto; top:37px; border-color:#754b49; color:#ffc1b7; background:#261919f5; }
.cheat-marker:hover i,.cheat-marker:focus-visible i { box-shadow:0 0 0 8px #ef9d9233; }
.timeline-tooltip { position:absolute; z-index:8; top:6px; width:min(330px,calc(100% - 12px)); transform:translateX(-50%); padding:17px 18px; background:#21172dfc; border:1px solid #82629f; border-radius:8px; box-shadow:0 14px 40px #0009; text-align:left; }
.tooltip-phase { display:block; font-size:10px; color:var(--acid); letter-spacing:.1em; margin-bottom:13px; }
.tooltip-side { display:block; color:var(--purple); font-size:9px; letter-spacing:.08em; margin-top:12px; }
.tooltip-side.cheat-color { color:var(--coral); }
.timeline-tooltip p { font-size:12px; line-height:1.65; color:#eee3f7; margin-top:5px; }
.tooltip-hint { display:block; margin-top:13px; padding-top:11px; border-top:1px solid #503b64; font-size:10px; line-height:1.5; color:#bca5cf; }
.timeline-legend { gap:10px 22px; flex-wrap:wrap; }
.cycle-stages { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; margin-top:22px; }
.cycle-stages button { min-width:0; min-height:54px; background:#17101f; border:1px solid #3c2d4b; border-radius:5px; padding:8px 12px; display:flex; align-items:center; gap:11px; text-align:left; font-size:12px; transition:background .2s,border-color .2s; }
.cycle-stages button>span { color:#9b80b5; font:10px var(--display); }
.cycle-stages button:hover { background:#291b38; border-color:#8964ad; }
.cycle-stages button[aria-pressed=true] { background:#34214a; border-color:var(--purple); color:#f2e7ff; }
.cycle-stages button[aria-pressed=true]>span { color:var(--acid); }
.cycle-disclaimer { margin-top:22px; font-size:10px; color:#9d8bad; }
.cycle-bottom { gap:40px; grid-template-columns:1.05fr 1fr; }
.cycle-bottom h3 { font-size:22px; }
.cycle-bottom p { font-size:13px; }
.cycle-playback { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px; }
#cycle-playback-status { font-size:8px; letter-spacing:.08em; color:var(--acid); }
#pause-cycle { background:#2a1d38; border:1px solid #60467c; border-radius:4px; padding:7px 10px; min-height:36px; display:flex; align-items:center; gap:9px; font-size:10px; }
#pause-cycle:disabled { cursor:default; opacity:.8; border-color:#45364f; }
.cycle-control label { font-size:13px; }
.cycle-control output { font:11px var(--display); white-space:nowrap; }
#cycle-stage { -webkit-appearance:none; appearance:none; display:block; height:42px; margin:8px 0 2px; background:transparent; cursor:ew-resize; --range-fill:0%; }
#cycle-stage::-webkit-slider-runnable-track { height:7px; border-radius:10px; border:1px solid #73558e; background:linear-gradient(to right,var(--purple) var(--range-fill),#392844 var(--range-fill)); }
#cycle-stage::-moz-range-track { height:7px; border-radius:10px; border:1px solid #73558e; background:#392844; }
#cycle-stage::-moz-range-progress { height:7px; background:var(--purple); }
#cycle-stage::-webkit-slider-thumb { -webkit-appearance:none; width:24px; height:24px; margin-top:-9px; background:var(--ink); border:5px solid var(--purple); border-radius:50%; box-shadow:0 0 0 6px #ae8aff20; }
#cycle-stage::-moz-range-thumb { width:16px; height:16px; background:var(--ink); border:5px solid var(--purple); border-radius:50%; box-shadow:0 0 0 6px #ae8aff20; }
#cycle-stage:hover::-webkit-slider-thumb { box-shadow:0 0 0 9px #ae8aff28; }
.cycle-bottom .cycle-help { font-size:10px; color:#c1a7d7; margin-top:12px; line-height:1.6; }
@media(max-width:850px) {
  .cycle-stages button { flex-direction:column; gap:3px; align-items:flex-start; padding:8px; font-size:11px; }
  .cycle-bottom { grid-template-columns:1fr; gap:24px; }
}
@media(max-width:620px) {
  .console-toolbar { gap:10px; padding:16px 14px; }
  .activate-button { padding:7px 9px; font-size:10px; }
  .timeline { padding:24px 14px 20px; }
  .timeline-landscape { height:240px; margin-top:28px; }
  .moving-marker>span { font-size:8px; padding:5px 6px; bottom:36px; }
  .cheat-marker>span { top:35px; bottom:auto; }
  .timeline-legend { font-size:8px; gap:7px 14px; margin-top:9px; }
  .timeline-legend>span:last-child { width:100%; margin:0; font-size:9px; }
  .cycle-stages { gap:4px; margin-top:17px; }
  .cycle-stages button { min-height:56px; font-size:9px; padding:6px; gap:5px; line-height:1.4; }
  .cycle-stages button>span { font-size:9px; }
  .cycle-disclaimer { font-size:9px; line-height:1.6; margin-top:18px; }
  .timeline-tooltip { padding:13px 14px; top:0; }
  .timeline-tooltip p { font-size:11px; }
  .tooltip-phase { margin-bottom:8px; }
  .tooltip-hint { font-size:9px; }
  .cycle-bottom { padding:23px 20px; gap:24px; }
  .cycle-bottom h3 { font-size:21px; }
  .cycle-control label { font-size:12px; }
  #cycle-playback-status { font-size:8px; letter-spacing:.02em; }
}
@media(prefers-reduced-motion:reduce) { .activate-button::after { animation:none; } }