/* Data-flow stepper and pace check on the cohort project page. Uses the tokens from project.css. */
:root{
  --cd-be:#9A6700; --cd-be-wash:#FFF5DB; --cd-on:#1A7F4B; --cd-on-wash:#E6F4EC; --cd-ah:#0A5A62; --cd-ah-wash:#E4F1F1;
}
:root:not([data-theme="light"]){ @media (prefers-color-scheme:dark){
  --cd-be:#F2C14E; --cd-be-wash:#33280C; --cd-on:#5FD39A; --cd-on-wash:#0F2E20; --cd-ah:#5BD8D1; --cd-ah-wash:#0F2A2C;
}}
:root[data-theme="dark"]{
  --cd-be:#F2C14E; --cd-be-wash:#33280C; --cd-on:#5FD39A; --cd-on-wash:#0F2E20; --cd-ah:#5BD8D1; --cd-ah-wash:#0F2A2C;
}
.cd{min-width:0}
.cd-box{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px; margin-top:16px; box-shadow:var(--shadow-sm)}
.cd-legend{display:flex; flex-wrap:wrap; gap:8px 18px; font-size:13px; color:var(--muted); margin-bottom:18px}
.cd-legend span{display:inline-flex; align-items:center; gap:7px}
.cd-legend i{width:12px; height:12px; border-radius:50%; border:2px solid var(--line-strong); background:var(--surface)}
.cd-legend i.mine{border-color:var(--accent); background:var(--accent-wash)}

/* track */
.cd-track{position:relative; display:flex; justify-content:space-between; gap:2px; margin:0; padding:0}
.cd-track::before,.cd-fill{content:""; position:absolute; top:17px; left:18px; right:18px; height:2px; background:var(--line-strong)}
.cd-fill{right:auto; width:0; background:var(--accent); transition:width .45s ease}
.cd-node{position:relative; z-index:1; flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:7px; padding:0; border:0; background:none; color:var(--muted); font:inherit; cursor:pointer}
.cd-node:first-child{align-items:flex-start} .cd-node:last-child{align-items:flex-end}
.cd-node:first-child .cd-lab{text-align:left} .cd-node:last-child .cd-lab{text-align:right}
.cd-dot{width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--surface); border:2px solid var(--line-strong); font-family:"IBM Plex Mono",monospace; font-size:13px; font-weight:600; transition:background .25s, border-color .25s, color .25s, transform .25s}
.cd-node.mine .cd-dot{border-color:var(--accent); background:var(--accent-wash); color:var(--accent-strong)}
.cd-node.done .cd-dot{border-color:var(--accent)}
.cd-node.on .cd-dot{background:var(--accent); border-color:var(--accent); color:#fff; transform:scale(1.12)}
:root[data-theme="dark"] .cd-node.on .cd-dot{color:#062224}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .cd-node.on .cd-dot{color:#062224} }
.cd-lab{font-size:12px; line-height:1.25; text-align:center; max-width:86px}
.cd-node.on .cd-lab{color:var(--ink); font-weight:600}
.cd-node:hover .cd-dot{border-color:var(--accent)}

/* panel */
.cd-panel{margin-top:18px; padding-top:18px; border-top:1px solid var(--line); min-height:232px; touch-action:pan-y}
.cd-meta{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin-bottom:10px}
.cd-own{font-size:12.5px; font-weight:600; padding:3px 10px; border-radius:999px; background:var(--surface-2); color:var(--ink-soft)}
.cd-own.mine{background:var(--accent-wash); color:var(--accent-strong)}
.cd-svc{font-family:"IBM Plex Mono",monospace; font-size:12.5px; color:var(--muted)}
.cd-panel h3{font-size:20px; margin-bottom:8px}
.cd-panel p{font-size:15.5px; color:var(--ink-soft); max-width:64ch}
.cd-side{margin-top:12px; font-size:14.5px; color:var(--ink-soft); padding:10px 13px; border-radius:10px; background:var(--surface-2); max-width:64ch}
.cd-side b{color:var(--ink)}
.cd-ctrl{display:flex; align-items:center; gap:10px; margin-top:16px}
.cd-btn{font:inherit; font-size:14.5px; font-weight:600; padding:9px 15px; border-radius:10px; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); cursor:pointer}
.cd-btn:hover:not(:disabled){border-color:var(--accent); color:var(--accent-strong)}
.cd-btn:disabled{opacity:.45; cursor:default}
.cd-btn.go{background:var(--accent); border-color:var(--accent); color:#fff}
.cd-btn.go:hover:not(:disabled){color:#fff; filter:brightness(1.08)}
:root[data-theme="dark"] .cd-btn.go, :root[data-theme="dark"] .cd-btn.go:hover:not(:disabled){color:#062224}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .cd-btn.go, :root:not([data-theme="light"]) .cd-btn.go:hover:not(:disabled){color:#062224} }
.cd-count{margin-left:auto; font-family:"IBM Plex Mono",monospace; font-size:12.5px; color:var(--muted)}
.cd-fade{animation:cdfade .3s ease}
@keyframes cdfade{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none}}

/* pace check */
.cd-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px 26px}
.cd-field label{display:flex; justify-content:space-between; gap:10px; font-size:14px; color:var(--ink-soft); font-weight:500}
.cd-field output{font-family:"IBM Plex Mono",monospace; font-size:13.5px; color:var(--ink)}
.cd-field input[type=range]{width:100%; margin:8px 0 0; accent-color:var(--accent); height:24px}
.cd-seg{display:inline-flex; margin-top:8px; border:1px solid var(--line-strong); border-radius:10px; overflow:hidden}
.cd-seg button{font:inherit; font-size:14px; padding:7px 13px; border:0; background:var(--surface); color:var(--ink-soft); cursor:pointer}
.cd-seg button[aria-pressed=true]{background:var(--accent-wash); color:var(--accent-strong); font-weight:600}
.cd-out{margin-top:20px; padding-top:18px; border-top:1px solid var(--line)}
.cd-status{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px}
.cd-badge{font-family:"Fraunces",serif; font-weight:600; font-size:22px; padding:5px 15px; border-radius:10px}
.cd-badge[data-s="Behind"]{background:var(--cd-be-wash); color:var(--cd-be)}
.cd-badge[data-s="On Track"]{background:var(--cd-on-wash); color:var(--cd-on)}
.cd-badge[data-s="Ahead"]{background:var(--cd-ah-wash); color:var(--cd-ah)}
.cd-why{font-size:15px; color:var(--ink-soft); flex:1 1 240px}
.cd-bar{position:relative; height:16px; margin:34px 0 26px; border-radius:8px; background:var(--surface-2)}
.cd-band{position:absolute; top:0; bottom:0; background:var(--cd-on-wash); border-left:2px solid var(--cd-on); border-right:2px solid var(--cd-on); min-width:3px}
.cd-mark{position:absolute; top:-7px; width:4px; height:30px; margin-left:-2px; border-radius:2px; background:var(--ink); transition:left .15s}
.cd-mark::after{content:attr(data-l); position:absolute; bottom:100%; left:50%; transform:translateX(-50%); white-space:nowrap; font-size:12px; font-weight:600; color:var(--ink); padding-bottom:3px}
.cd-mark.l::after{left:0; transform:none} .cd-mark.r::after{left:auto; right:0; transform:none}
.cd-axis{position:absolute; top:100%; left:0; right:0; display:flex; justify-content:space-between; font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--muted); padding-top:5px}
.cd-math{font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--muted); line-height:1.7}
.cd-note{margin-top:14px; font-size:13.5px; color:var(--muted); max-width:66ch}
.cd-note a{color:var(--accent-strong); font-weight:600}

@media (max-width:640px){
  .cd-box{padding:16px 14px}
  .cd-lab{display:none}
  .cd-dot{width:30px; height:30px; font-size:12px}
  .cd-track::before,.cd-fill{top:14px; left:15px; right:15px}
  .cd-fill{right:auto}
  .cd-grid{grid-template-columns:1fr}
  .cd-panel{min-height:330px}
  .cd-btn{padding:9px 12px}
}
@media (prefers-reduced-motion:reduce){ .cd-fade{animation:none} .cd-fill,.cd-dot,.cd-mark{transition:none} }
.cd{scroll-margin-top:72px}
.cd-side a{color:var(--accent-strong); font-weight:600; text-decoration:underline; text-underline-offset:2px}
.cd-btn,.cd-count,.cd-field output{white-space:nowrap}
.cd-panel{min-height:204px}
@media (max-width:640px){ .cd-panel{min-height:330px} }
@media (max-width:360px){ .cd-btn{padding:9px 10px; font-size:14px} .cd-ctrl{gap:7px} }

/* architecture diagram (desktop and tablet); phones keep the numbered track */
.cd-diawrap{display:none}
@media (min-width:641px){
  .cd-diawrap{display:block; margin:2px 0 4px}
  .cd-diawrap + .cd-track{display:none}
}
.cd-dia{display:block; width:100%; height:auto; overflow:visible}
.cd-n{cursor:pointer; outline:none}
.cd-n rect{fill:var(--surface); stroke:var(--line-strong); stroke-width:1.5; transition:fill .25s, stroke .25s}
.cd-n.mine rect{fill:var(--accent-wash); stroke:var(--accent)}
.cd-n.group rect{fill:none; stroke-dasharray:5 4}
.cd-n.group.mine rect{fill:color-mix(in srgb, var(--accent-wash) 45%, transparent)}
.cd-n .t{font:600 13.5px "IBM Plex Sans",sans-serif; fill:var(--ink)}
.cd-n .s{font:12px "IBM Plex Sans",sans-serif; fill:var(--muted)}
.cd-n .gt{font:600 12.5px "IBM Plex Sans",sans-serif; fill:var(--accent-strong)}
.cd-n .nb{fill:var(--surface); stroke:var(--line-strong); stroke-width:1.5}
.cd-n.mine .nb{stroke:var(--accent)}
.cd-n .nt{font:600 10.5px "IBM Plex Mono",monospace; fill:var(--muted)}
.cd-n:hover rect,.cd-n:focus-visible rect{stroke:var(--accent); stroke-width:2.5}
.cd-n.on rect{fill:var(--accent); stroke:var(--accent); stroke-width:2.5}
.cd-n.on.group rect{fill:color-mix(in srgb, var(--accent-wash) 45%, transparent); stroke-dasharray:none}
.cd-n.on .nb{fill:var(--accent); stroke:var(--surface)}
.cd-n.on .t,.cd-n.on .s,.cd-n.on .nt{fill:#fff}
.cd-n.on.group .nt{fill:#fff}
:root[data-theme="dark"] .cd-n.on .t,:root[data-theme="dark"] .cd-n.on .s,:root[data-theme="dark"] .cd-n.on .nt{fill:#062224}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .cd-n.on .t,:root:not([data-theme="light"]) .cd-n.on .s,:root:not([data-theme="light"]) .cd-n.on .nt{fill:#062224} }
.cd-arr line{stroke:var(--line-strong); stroke-width:2; transition:stroke .25s}
.cd-arr polygon{fill:var(--line-strong); transition:fill .25s}
.cd-arr.dash line{stroke-dasharray:4 4}
.cd-arr.done line,.cd-arr.on line{stroke:var(--accent)}
.cd-arr.done polygon,.cd-arr.on polygon{fill:var(--accent)}
@media (prefers-reduced-motion:reduce){ .cd-n rect,.cd-arr line,.cd-arr polygon{transition:none} }
.cd-techl{font-size:13.5px !important; color:var(--muted) !important; margin:14px 0 8px !important}
.cd-techl:first-of-type{margin-top:0 !important}
@media (max-width:360px){ .cd-dot{width:27px; height:27px; font-size:11.5px} }

/* prototype / legacy switch */
.cd-tabs{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-bottom:16px}
.cd-tabs .cd-seg{margin-top:0}
.cd-tabs .cd-seg button{font-weight:500; padding:8px 14px}
.cd-tabcap{font-size:13.5px; color:var(--muted)}
.cd-legend i.plan{border-style:dashed}
.cd-n.plan rect{stroke-dasharray:5 4}
.cd-n.plan .t{fill:var(--muted)}
.cd-n.chip.on .s{fill:#fff}
.cd-n.chip.mine .s{fill:var(--accent-strong)}
.cd-n.chip.mine.on .s{fill:#fff}
:root[data-theme="dark"] .cd-n.chip.mine.on .s{fill:#062224}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .cd-n.chip.mine.on .s{fill:#062224} }
@media (min-width:641px){ .cd-dia{max-height:300px} }
.cd-tabs .cd-seg button{white-space:nowrap}
@media (max-width:360px){ .cd-tabs .cd-seg button{font-size:13px; padding:7px 9px} }
.cd-a{color:var(--accent-strong); font-weight:600; text-decoration:underline; text-underline-offset:2px}

/* interactive banner + version-history sandbox */
.cd-banner{display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin-top:16px; font-size:13.5px; color:var(--muted)}
.cd-banner + .cd-box{margin-top:10px}
.cd-live{display:inline-flex; align-items:center; gap:7px; font-weight:600; color:var(--accent-strong); background:var(--accent-wash); padding:4px 11px; border-radius:999px}
.cd-live i{width:7px; height:7px; border-radius:50%; background:var(--accent)}
.cd-sb{display:grid; grid-template-columns:1fr 1fr; gap:22px 30px}
.cd-sbcol{min-width:0}
.cd-sbh{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:12px}
.cd-sbh b{font-family:"Fraunces",serif; font-size:18px; font-weight:600}
.cd-sbh span{font-family:"IBM Plex Mono",monospace; font-size:12.5px; color:var(--muted)}
.cd-plan{display:flex; flex-wrap:wrap; align-items:center; gap:7px; min-height:76px; align-content:flex-start}
.cd-course{font-family:"IBM Plex Mono",monospace; font-size:13px; padding:5px 10px; border-radius:8px; background:var(--surface-2); color:var(--ink)}
.cd-empty{font-size:14px; color:var(--muted)}
.cd-vtag{font-family:"IBM Plex Mono",monospace; font-size:12.5px; font-weight:600; padding:4px 9px; border-radius:999px; background:var(--accent-wash); color:var(--accent-strong)}
.cd-req{margin-top:14px; font-size:13px; color:var(--muted); display:flex; flex-direction:column; gap:5px; min-height:52px}
.cd-req code{font-family:"IBM Plex Mono",monospace; font-size:12.5px; color:var(--ink-soft); background:var(--surface-2); padding:7px 10px; border-radius:8px; overflow-wrap:anywhere}
.cd-vers{list-style:none; margin:0; padding:0; max-height:316px; overflow-y:auto}
.cd-vers li{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; border:1px solid transparent}
.cd-vers li + li{margin-top:4px}
.cd-vers li.on{background:var(--accent-wash); border-color:var(--accent)}
.cd-vnote{flex:1; min-width:0; font-size:14.5px; color:var(--ink)}
.cd-vnote small{display:block; font-size:12.5px; color:var(--muted)}
.cd-vers .cd-btn{padding:6px 12px; font-size:13.5px}
.cd-now{font-size:12.5px; font-weight:600; color:var(--accent-strong); padding:6px 4px}
@media (max-width:640px){ .cd-sb{grid-template-columns:1fr} }
.cd-st{font-size:12px; font-weight:600; padding:3px 9px; border-radius:999px; background:var(--surface-2); color:var(--muted); white-space:nowrap}
.cd-st.ok{background:var(--cd-on-wash); color:var(--cd-on)}
.cd-ctrl.cd-wrap{flex-wrap:wrap; margin-top:12px}
.cd-plan + .cd-ctrl.cd-wrap{margin-top:16px}
.cd-cred{font-family:"IBM Plex Mono",monospace; font-size:12.5px; color:var(--muted)}
.cd-courses{display:flex; flex-wrap:wrap; gap:7px; flex-basis:100%; margin-top:4px}
.cd-course.el{background:var(--accent-wash); color:var(--accent-strong)}
.cd-pick{margin-top:14px; font-size:13px; color:var(--muted)}
.cd-elect{display:flex; flex-wrap:wrap; gap:7px; margin-top:7px}
.cd-el{font-family:"IBM Plex Mono",monospace; font-size:13px; padding:6px 10px; border-radius:8px; border:1px dashed var(--line-strong); background:var(--surface); color:var(--ink-soft); cursor:pointer}
.cd-el:hover{border-color:var(--accent); color:var(--accent-strong)}
.cd-el[aria-pressed=true]{border-style:solid; border-color:var(--accent); background:var(--accent-wash); color:var(--accent-strong)}
.cd-msg{margin-top:12px; font-size:14px; color:var(--ink); min-height:44px}
.cd-req{margin-top:4px}
.cd-plan{min-height:0}

/* Sam + course matching */
.cd-sam{display:flex; align-items:center; gap:12px; margin-bottom:4px}
.cd-face{flex:0 0 56px; width:56px; height:56px}
.cd-face svg{display:block; width:100%; height:100%}
.cd-face .f0{fill:var(--accent-wash); stroke:var(--accent); stroke-width:2}
.cd-face .f1{fill:var(--accent)}
.cd-face .f2{fill:var(--accent-strong)}
.cd-face .f3{fill:none; stroke:var(--accent-strong); stroke-width:2.6; stroke-linecap:round}
.cd-say{flex:1; font-size:15px !important; color:var(--ink) !important; background:var(--surface-2); padding:10px 13px; border-radius:4px 12px 12px 12px; min-height:62px; max-width:none !important}
.cd-say b{display:block; font-size:12px; font-family:"IBM Plex Mono",monospace; color:var(--muted) !important; font-weight:500}
.cd-mt{margin-top:18px; margin-bottom:8px}
.cd-match{list-style:none; margin:0; padding:0; min-height:150px}
.cd-match li{display:flex; align-items:center; gap:10px; padding:4px 0; font-size:14px; color:var(--ink-soft)}
.cd-match li b{color:var(--ink)}
.cd-match li.no{color:var(--cd-be)}
.cd-match li.no .cd-course{background:var(--cd-be-wash); color:var(--cd-be)}
.cd-match .cd-course{flex:0 0 auto}
.cd-msg{min-height:22px}
.cd-det{margin-top:4px}
.cd-det summary{cursor:pointer; font-weight:600; font-size:15.5px; color:var(--accent-strong); padding:10px 0}
.cd-det > p:first-of-type{margin-top:6px}
.cd-note b{color:var(--ink)}
.cd-mt b{font-size:16px; white-space:nowrap}
.cd-sbh span{text-align:right}
.cd-face .f4{fill:#5AA9E6}
.cd-face .f5{font:700 17px "Fraunces",serif; fill:var(--cd-be)}
.cd-face .f6{fill:var(--accent-strong); stroke:var(--accent-strong); stroke-width:1.5; stroke-linejoin:round}
.cd-face svg{overflow:visible}
.cd-face[data-mood=sad] .f0,.cd-face[data-mood=lost] .f0,.cd-face[data-mood=tough] .f0{fill:var(--cd-be-wash); stroke:var(--cd-be)}
.cd-face[data-mood=happy] .f0{fill:var(--cd-on-wash); stroke:var(--cd-on)}
.cd-face{transition:transform .2s}
.cd-face[data-mood=happy]{transform:rotate(-6deg) scale(1.06)}
.cd-face[data-mood=lost]{transform:rotate(7deg)}
.cd-match li.warn{color:var(--cd-be)}
.cd-match li.warn .cd-course{background:var(--cd-be-wash); color:var(--cd-be)}
.cd-match{min-height:190px}
@media (prefers-reduced-motion:reduce){ .cd-face{transition:none} }
.cd-brief{margin-bottom:14px; padding:10px 13px; border-radius:10px; border:1px solid var(--line); border-left:3px solid var(--accent); font-size:13.5px; color:var(--ink-soft); line-height:1.45}
.cd-brief b{display:block; font-family:"Fraunces",serif; font-size:17px; font-weight:600; color:var(--ink); margin-bottom:2px}
.cd-el{display:inline-flex; flex-direction:column; align-items:flex-start; gap:1px; text-align:left; line-height:1.25}
.cd-el b{font-weight:500; pointer-events:none}
.cd-el small{font-family:"IBM Plex Sans",sans-serif; font-size:11.5px; color:var(--muted); pointer-events:none}
.cd-el[aria-pressed=true] small{color:var(--accent-strong)}
.cd-match li{flex-wrap:wrap; row-gap:3px}
.cd-match li > span:last-child{flex:1 1 110px; min-width:0}
@media (max-width:640px){ .cd-mt{flex-direction:column; align-items:flex-start; gap:2px} .cd-mt span{text-align:left} }

/* The mini game is a full-width dark band, set apart from the writeup (same treatment as the phishing demo). */
.psec.cd-game, .cd-modal{
  --paper:#0B1620; --surface:#12212E; --surface-2:#1A2C3B; --ink:#EAF0F5; --ink-soft:#C6D0DA; --muted:#94A3B2;
  --line:#25394B; --line-strong:#38516A; --accent:#2DC6C0; --accent-strong:#5BD8D1; --accent-wash:#0F2A2C;
  --cd-be:#F2C14E; --cd-be-wash:#33280C; --cd-on:#5FD39A; --cd-on-wash:#0F2E20; --cd-ah:#5BD8D1; --cd-ah-wash:#0F2A2C;
  --cd-band:#0B1620;
  color:var(--ink); background:var(--cd-band); margin-top:40px; padding:38px 0 44px;
  box-shadow:0 0 0 100vmax var(--cd-band); clip-path:inset(0 -100vmax);
  border-top:3px solid var(--accent);
}
:root[data-theme="dark"] .psec.cd-game{--cd-band:#0D2226; --paper:#0A1A1D}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .psec.cd-game{--cd-band:#0D2226; --paper:#0A1A1D} }
.cd-gbanner{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px}
.cd-glive{display:inline-flex; align-items:center; gap:8px; font-family:"IBM Plex Mono",monospace; font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:5px 11px; border-radius:999px; background:var(--accent); color:#062224}
.cd-glive i{width:8px; height:8px; border-radius:50%; background:currentColor; animation:cdPulse 1.8s ease-in-out infinite}
@keyframes cdPulse{0%,100%{opacity:1} 50%{opacity:.35}}
.cd-gwhere{font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-strong)}
.psec.cd-game h2{display:block; font-size:clamp(28px,4.4vw,36px); color:var(--ink); margin:12px 0 10px}
.psec.cd-game .cd-glede{color:var(--ink-soft); font-size:16px; max-width:66ch}
.psec.cd-game .cd-gbox{padding:0 20px 20px; border:1.5px solid var(--accent); overflow:hidden; box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent), 0 24px 50px -24px rgba(0,0,0,.8)}
.cd-chrome{display:flex; align-items:center; gap:12px; margin:0 -20px 18px; padding:9px 14px; background:var(--surface-2); border-bottom:1px solid var(--line)}
.cd-dots{display:inline-flex; gap:6px; flex:none}
.cd-dots i{width:10px; height:10px; border-radius:50%; background:var(--line-strong)}
.cd-ctitle{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--muted); min-width:0; overflow-wrap:anywhere}
.psec.cd-game .cd-btn.go, .psec.cd-game .cd-btn.go:hover:not(:disabled){color:#062224}
.psec.cd-game .cd-note{color:var(--muted)}
.psec.cd-game .cd-note b{color:var(--ink)}
.psec.cd-game .cd-say b{color:var(--muted)}
@media (max-width:640px){ .psec.cd-game{padding:28px 0 32px} .psec.cd-game .cd-gbox{padding:0 14px 16px} .cd-chrome{margin:0 -14px 14px} }
@media (prefers-reduced-motion:reduce){ .cd-glive i{animation:none} }

/* phone: teaser card in the band, game opens as a full-screen sheet */
.cd-tease,.cd-close{display:none}
.cd-act{margin-top:12px}
.cd-act .cd-msg{margin-top:0}
.cd-act .cd-ctrl.cd-wrap{margin-top:8px}
.cd-modal{color:var(--ink); border-top:0; box-shadow:none; clip-path:none; margin:0; padding:0}
.cd-modal .cd-btn.go, .cd-modal .cd-btn.go:hover:not(:disabled){color:#062224}
.cd-modal .cd-say b{color:var(--muted)}
html.cd-lock, html.cd-lock body{overflow:hidden}
@media (max-width:640px){
  .psec.cd-game .cd-gbox{display:none}
  .cd-tease{display:flex; align-items:center; gap:12px; margin-top:16px; padding:14px; border-radius:14px; background:var(--surface); border:1.5px solid var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent)}
  .cd-tease > div{flex:1; min-width:0; font-size:13.5px; color:var(--ink-soft); line-height:1.35}
  .cd-tease b{display:block; font-family:"Fraunces",serif; font-size:17px; color:var(--ink)}
  .cd-tease .cd-btn{padding:11px 20px; font-size:15.5px}
  .cd-modal{position:fixed; inset:0; z-index:200; background:var(--paper); display:flex}
  .cd-modal .cd-gbox{display:flex; flex-direction:column; flex:1; min-width:0; margin:0; padding:0; border:0; border-radius:0; box-shadow:none; background:var(--surface); overflow:hidden}
  .cd-modal .cd-chrome{margin:0; padding:10px 12px 10px 14px; flex:none}
  .cd-modal .cd-ctitle{flex:1}
  .cd-modal .cd-close{display:inline-flex; font:inherit; font-size:14px; font-weight:600; padding:8px 14px; border-radius:9px; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); cursor:pointer}
  .cd-modal #cd-sandbox{flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain}
  .cd-modal .cd-sb{display:flex; flex-direction:column; gap:0; min-height:100%}
  .cd-modal .cd-sbcol{display:contents}
  .cd-modal .cd-brief{margin:14px 14px 0; font-size:13px}
  .cd-modal .cd-sam{position:sticky; top:0; z-index:3; margin:0; padding:10px 14px; background:var(--surface); border-bottom:1px solid var(--line)}
  .cd-modal .cd-brief + .cd-sam{margin-top:10px}
  .cd-modal .cd-face{flex-basis:48px; width:48px; height:48px}
  .cd-modal .cd-say{min-height:58px; font-size:14.5px !important}
  .cd-modal .cd-pick,.cd-modal .cd-match,.cd-modal .cd-vers{margin-left:14px; margin-right:14px}
  .cd-modal .cd-sbh{margin:18px 14px 8px}
  .cd-modal .cd-el{padding:9px 11px; font-size:13.5px}
  .cd-modal .cd-elect{gap:8px}
  .cd-modal .cd-match{min-height:0}
  .cd-modal .cd-vers{max-height:none; overflow:visible; margin-bottom:16px}
  .cd-modal .cd-act{order:10; position:sticky; bottom:0; z-index:3; margin-top:auto; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:var(--surface); border-top:1px solid var(--line); box-shadow:0 -10px 24px -18px rgba(0,0,0,.9)}
  .cd-modal .cd-msg{min-height:0; font-size:13.5px}
  .cd-modal .cd-msg:empty{display:none}
  .cd-modal .cd-act .cd-ctrl{flex-wrap:nowrap; gap:8px; margin-top:6px}
  .cd-modal .cd-act .cd-btn{flex:1 1 0; padding:11px 8px; font-size:13.5px; white-space:normal; line-height:1.2}
}
.cd-h3{font-size:19px; margin:26px 0 4px}
.rtable td:first-child{color:var(--ink); font-weight:600}
.rtable + .cd-note{margin-bottom:16px}
@media (max-width:520px){ .cd-h3 + .rtable table{min-width:440px} }

/* Page discipline (desktop): the mini game and the walkthrough each fit one screen */
@media (min-width:1100px){
  .psec.cd-game .cd-glede{max-width:none}
  .cd-gbox .cd-chrome{margin-bottom:14px}
  .cd-gbox .cd-sb{grid-template-columns:2fr 1fr; gap:0 28px}
  .cd-gbox .cd-sbh b{white-space:nowrap}
  .cd-gbox .cd-sbcol:first-child{display:block; column-count:2; column-gap:28px}
  .cd-gbox .cd-sbcol:first-child > *{break-inside:avoid}
  .cd-gbox .cd-mt{break-before:column; margin-top:0}
  .cd-gbox .cd-brief{margin-bottom:10px}
  .cd-gbox .cd-pick{margin-top:10px}
  .cd-gbox .cd-match{min-height:150px}
  .cd-gbox .cd-vers{max-height:330px}
}

/* The mini game lives in its own window at every size; the page only shows the teaser card */
.psec.cd-game .cd-gbox{display:none}
.cd-tease{display:flex; align-items:center; gap:14px; margin-top:16px; padding:16px 18px; border-radius:14px; background:var(--surface); border:1.5px solid var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent)}
.cd-tease > div{flex:1; min-width:0; font-size:14.5px; color:var(--ink-soft); line-height:1.4}
.cd-tease b{display:block; font-family:"Fraunces",serif; font-size:19px; color:var(--ink)}
.cd-tease .cd-btn{padding:12px 26px; font-size:16px}
.cd-lock{overflow:hidden}
@media (min-width:641px){
  .cd-tease{max-width:620px}
  .cd-modal{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:14px; background:rgba(4,9,14,.72); backdrop-filter:blur(3px)}
  .cd-modal .cd-gbox{display:block; width:min(1180px, 100%); max-height:100%; overflow:auto; margin:0; padding:0 20px 20px; background:var(--surface); border:1.5px solid var(--accent); border-radius:16px; box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent), 0 40px 90px -30px rgba(0,0,0,.9)}
  .cd-modal .cd-chrome{position:sticky; top:0; z-index:4}
  .cd-modal .cd-ctitle{flex:1}
  .cd-modal .cd-close{display:inline-flex; font:inherit; font-size:13.5px; font-weight:600; padding:7px 14px; border-radius:8px; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); cursor:pointer}
  .cd-modal .cd-close:hover{border-color:var(--accent); color:var(--accent-strong)}
}
@media (max-width:640px){ .cd-tease{padding:14px; gap:12px} .cd-tease > div{font-size:13.5px; line-height:1.35} .cd-tease b{font-size:17px} .cd-tease .cd-btn{padding:11px 20px; font-size:15.5px} }
@media (prefers-reduced-motion:no-preference){
  .cd-modal .cd-gbox{animation:cdWin .18s ease-out}
  @keyframes cdWin{from{opacity:0; transform:translateY(10px) scale(.985)} to{opacity:1; transform:none}}
}