/* Critical period lesson. All rules scoped under .crp-* */
.crp-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.crp-note { font-size: 12.5px; color: var(--faint); text-align: center; }

/* the face and its eyes */
.crp-face { position: relative; height: 200px; max-width: 100%; }
.crp-face img { display: block; width: 100%; height: 100%; object-fit: contain; }
.crp-eye { position: absolute; width: var(--r); aspect-ratio: 1; min-width: 44px; min-height: 44px; transform: translate(-50%, -50%); padding: 0; border: 0; background: transparent; border-radius: 50%; cursor: pointer; }
.crp-eye:disabled { cursor: default; }
.crp-eye i { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; }
.crp-ring { width: 72%; height: 72%; border: 2.5px solid var(--gold); box-shadow: 0 0 8px rgba(245,192,78,.55); }
.crp-eye.v .crp-ring { border-color: var(--violet-bright); box-shadow: 0 0 10px rgba(169,155,255,.65); }
.crp-patch { width: 40px; height: 34px; background: radial-gradient(circle at 35% 30%, #4a4a58, #121218 70%); box-shadow: 0 3px 8px rgba(0,0,0,.6); opacity: 0; scale: 1.6; transition: opacity .3s, scale .35s cubic-bezier(.2,.9,.3,1.3); }
.crp-patch::after { content: ''; position: absolute; left: -26px; right: -26px; top: 6px; height: 4px; background: #121218; border-radius: 2px; z-index: -1; }
.crp-eye.patched .crp-patch { opacity: 1; scale: 1; }
.crp-blur { width: 62%; height: 62%; background: rgba(235,235,245,.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; }
.crp-tag { position: absolute; top: 100%; left: 50%; transform: translateX(-85%); margin-top: 2px; font: 800 12px var(--sans); color: #fff; background: rgba(10,14,26,.72); padding: 1px 6px; border-radius: 6px; white-space: nowrap; pointer-events: none; }
.crp-eye.blurry .crp-blur { opacity: 1; }
.crp-eye.v .crp-tag { transform: translateX(-15%); }
.crp-eye.crp-wrong .crp-ring { border-color: var(--red); box-shadow: 0 0 10px rgba(255,90,90,.6); }
.crp-live .crp-ring { animation: crpPulse 1.6s ease-in-out 3; }
@keyframes crpPulse { 50% { scale: 1.15; } }

/* the seeing part of the brain */
.crp-strip { width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: 5px; }
.crp-sl { font: 700 12.5px var(--sans); color: var(--dim); text-align: center; }
.crp-bands { display: block; width: 100%; height: 56px; border-radius: 12px; overflow: hidden; background: var(--surface); }
.crp-bands .g { fill: var(--gold); transition: opacity .5s; }
.crp-bands .v { fill: var(--violet-bright); transition: opacity .5s; }
.crp-bands.dimg .g, .crp-bands.dimv .v { opacity: .6; }
.crp-live .crp-bands rect { animation: crpGlow 1.6s ease-in-out 3; }
@keyframes crpGlow { 50% { opacity: .7; } }
.crp-faint-g .crp-bands .g, .crp-faint-v .crp-bands .v { animation: crpFaint 1.4s ease-in-out 2; }
@keyframes crpFaint { 50% { opacity: .35; } }

.crp-clock { display: flex; align-items: baseline; gap: 8px; font: 600 12.5px var(--sans); color: var(--dim); }
.crp-clock b { font: 800 20px var(--sans); color: var(--text); font-variant-numeric: tabular-nums; min-width: 26px; }

/* timelines */
.crp-life { width: 100%; max-width: 340px; display: block; }
.crp-axis { stroke: var(--line-strong); stroke-width: 3; stroke-linecap: round; }
.crp-win2 { fill: rgba(245,192,78,.32); }
.crp-tl { font: 600 13px var(--sans); fill: var(--dim); }
.crp-tl.m { text-anchor: middle; }
.crp-tl.e { text-anchor: end; }
.crp-wl { font: 800 13px var(--sans); fill: var(--gold); text-anchor: middle; }
.crp-dot { fill: var(--violet-bright); }

@media (max-height: 700px) {
  .crp-face { height: 172px; }
  .crp-bands { height: 46px; }
}