:root{
  --paper:#EDE7D9;
  --ink:#20241F;
  --ink-soft:#4A4E44;
  --blueprint:#0F1B2D;
  --blueprint-line:#1E3350;
}
*{box-sizing:border-box;}
body{
  margin:0;
  min-height:100vh;
  background:var(--blueprint);
  background-image:
    linear-gradient(var(--blueprint-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--blueprint-line) 1px, transparent 1px);
  background-size: 28px 28px;
  font-family:'IBM Plex Sans', sans-serif;
  color:var(--paper);
  animation:pageFadeIn .5s ease both;
}
a{color:inherit;}

/* =========================================================
   Motion — keyframes + reduced-motion guard
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

@keyframes pageFadeIn{
  from{opacity:0;}
  to{opacity:1;}
}
@keyframes fadeSlideUp{
  from{opacity:0; transform:translateY(22px);}
  to{opacity:1; transform:translateY(0);}
}
@keyframes popIn{
  from{opacity:0; transform:scale(.82);}
  to{opacity:1; transform:scale(1);}
}
@keyframes stampIn{
  from{opacity:0; transform:rotate(9deg) scale(.3);}
  to{opacity:.85; transform:rotate(9deg) scale(1);}
}
@keyframes ribbonIn{
  from{opacity:0; transform:translateX(-26px) rotate(-6deg);}
  to{opacity:1; transform:translateX(0) rotate(0);}
}
@keyframes chipPop{
  from{opacity:0; transform:translateY(6px) scale(.9);}
  to{opacity:1; transform:translateY(0) scale(1);}
}
@keyframes shrinkOut{
  to{opacity:0; transform:scale(.85) translateY(6px);}
}
@keyframes lockPulse{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,.45);box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent);}
  70%{box-shadow:0 0 0 22px rgba(255,255,255,0);box-shadow:0 0 0 22px color-mix(in srgb, var(--accent) 0%, transparent);}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0);box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent);}
}
@keyframes spin{
  to{transform:rotate(360deg);}
}
@keyframes wrapFade{
  to{opacity:0; transform:scale(.985);}
}

.page-leaving, .viewer-wrap.leaving{
  animation:wrapFade .32s ease forwards;
}

/* --- Topbar --- */
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 32px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.brand{text-decoration:none;display:flex;flex-direction:column;gap:2px;}
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:#8FB3D9;
}
.eyebrow.center{text-align:center;}
.brand-name{
  font-family:'Barlow Condensed', sans-serif;
  font-weight:800;
  font-size:20px;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:#F5F1E6;
}
.admin-link, .switch-link{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:.05em;
  text-decoration:none;
  color:#7C93AE;
  border:1px solid rgba(255,255,255,.2);
  padding:8px 14px;
  border-radius:3px;
}
.admin-link, .switch-link{transition:color .2s ease, border-color .2s ease, transform .15s ease;}
.admin-link:hover, .switch-link:hover{color:#F5F1E6;border-color:rgba(255,255,255,.5);}
.admin-link:active, .switch-link:active{transform:scale(.96);}

main{max-width:1180px;margin:0 auto;padding:48px 24px 96px;}

.page-title{
  font-family:'Barlow Condensed', sans-serif;
  font-weight:800;
  font-size:clamp(30px,5vw,46px);
  text-transform:uppercase;
  margin:6px 0 8px;
  color:#F5F1E6;
}
.page-title.center{text-align:center;}
.page-sub{
  font-family:'IBM Plex Mono', monospace;
  font-size:13px;
  color:#7C93AE;
  max-width:560px;
  line-height:1.6;
}
.page-sub.center{margin:0 auto;text-align:center;}

/* --- Branch select --- */
.select-wrap{max-width:900px;margin:24px auto 0;}
.branch-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:16px;
  margin-top:36px;
}
.branch-btn{
  --accent:#3B82C4;
  background:var(--paper);
  color:var(--ink);
  border:none;
  border-top:6px solid var(--accent);
  border-radius:6px;
  padding:20px 18px;
  text-align:left;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:6px;
  font-family:inherit;
  box-shadow:0 10px 24px -12px rgba(0,0,0,.5);
  transition:transform .18s ease, box-shadow .18s ease, opacity .3s ease;
  animation:fadeSlideUp .5s cubic-bezier(.16,.9,.42,1) both;
  animation-delay:calc(var(--i, 0) * 70ms + 60ms);
}
.branch-btn:hover{transform:translateY(-3px);box-shadow:0 14px 28px -10px rgba(0,0,0,.6);}
.branch-btn:active{transform:translateY(-1px) scale(.97);}
.branch-btn.is-chosen{
  transform:scale(1.04) translateY(-3px);
  box-shadow:0 18px 34px -10px rgba(0,0,0,.65);
}
.branch-btn.is-fading{
  opacity:.25;
  transform:scale(.94);
  pointer-events:none;
}
.branch-btn-code{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:.1em;
  color:var(--accent);
  font-weight:600;
}
.branch-btn-name{
  font-family:'Barlow Condensed', sans-serif;
  font-weight:700;
  font-size:21px;
  text-transform:uppercase;
}
.branch-btn-field{
  font-size:12px;
  color:var(--ink-soft);
}

/* --- Branch header (viewer) --- */
.branch-head{
  display:flex;
  align-items:baseline;
  gap:16px;
  margin-bottom:22px;
  border-bottom:1px solid rgba(255,255,255,.18);
  padding-bottom:14px;
  animation:fadeSlideUp .5s ease both;
}
.branch-head .swatch{width:22px;height:22px;border-radius:4px;flex:none;box-shadow:0 0 0 3px rgba(255,255,255,.08);}
.branch-head h2{
  font-family:'Barlow Condensed', sans-serif;
  font-weight:800;
  font-size:32px;
  text-transform:uppercase;
  margin:0;
  color:#F5F1E6;
}
.branch-head .field{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  color:#7C93AE;
}

/* --- Stage tabs --- */
.stage-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px;}
.stage-tab{
  --accent:#3B82C4;
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:.05em;
  text-decoration:none;
  color:#CFE0F0;
  border:1px solid rgba(255,255,255,.25);
  padding:8px 14px;
  border-radius:20px;
  display:flex;
  align-items:center;
  gap:8px;
}
.stage-tab.active{
  background:var(--accent);
  border-color:var(--accent);
  color:#141414;
  font-weight:600;
}
.live-dot{width:6px;height:6px;border-radius:50%;background:#5FD87F;display:inline-block;}

/* --- Stage blocks (all shown at once, no tabs) ---
   Every card — challenge, each constraint option, failure — sits as
   a flat item in one horizontally-scrolling row. Stage groups and
   card rows drop out of the box model so there's a single scroll
   layer, on desktop and mobile alike. */
.stage-columns{
  display:flex;
  flex-wrap:nowrap;
  align-items:stretch;
  gap:14px;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  margin:0 -24px;
  padding:4px 24px 14px;
}
.stage-columns::-webkit-scrollbar{height:6px;}
.stage-columns::-webkit-scrollbar-track{background:transparent;}
.stage-columns::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25);border-radius:3px;}
.stage-columns .stage-block{display:contents;}
.stage-columns .row{display:contents;}
.stage-columns .stage-heading{display:none;}
.stage-columns .card{
  flex:0 0 320px;
  width:auto;
}
/* --- Cards --- */
.row{
  display:flex;
  gap:22px;
  flex-wrap:wrap;
  justify-content:center;
}
.card{
  --accent:#3B82C4;
  position:relative;
  flex:0 1 300px;
  width:100%;
  max-width:320px;
  min-height:400px;
  background:var(--paper);
  color:var(--ink);
  border-radius:6px;
  padding:22px 20px 26px;
  outline:2px dashed rgba(0,0,0,.18);
  outline-offset:-9px;
  box-shadow:0 14px 30px -12px rgba(0,0,0,.55);
  display:flex;
  flex-direction:column;
  animation:popIn .5s cubic-bezier(.18,.9,.32,1) both;
  transition:transform .3s ease, box-shadow .3s ease, opacity .35s ease;
}
.row .card:nth-child(1){animation-delay:.08s;}
.row .card:nth-child(2){animation-delay:.18s;}
.row .card:nth-child(3){animation-delay:.28s;}
.row .card:nth-child(4){animation-delay:.38s;}
.card:has(.choose-form):hover{
  transform:translateY(-5px);
  box-shadow:0 20px 38px -14px rgba(0,0,0,.65);
}
.card.card-remove{
  animation:shrinkOut .35s ease forwards;
  pointer-events:none;
}
.card.just-locked{
  animation:lockPulse 1.1s ease-out;
}
.card.is-locked{outline-color:rgba(0,0,0,.12);}

.stamp{animation:stampIn .5s cubic-bezier(.34,1.4,.64,1) both;animation-delay:.2s;}
.lock-ribbon{
  position:absolute;
  top:14px;left:-8px;
  background:var(--accent);
  color:#141414;
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:5px 12px 5px 16px;
  border-radius:0 3px 3px 0;
  box-shadow:2px 2px 6px rgba(0,0,0,.3);
  animation:ribbonIn .5s cubic-bezier(.22,1,.36,1) both;
}
.choose-form{margin-top:auto;padding-top:10px;}
.choose-btn{
  width:100%;
  font-family:'Barlow Condensed', sans-serif;
  font-weight:700;
  font-size:15px;
  letter-spacing:.03em;
  text-transform:uppercase;
  padding:11px 12px;
  border:1.5px solid var(--accent);
  border-radius:4px;
  background:transparent;
  color:var(--accent);
  cursor:pointer;
  transition:background .18s ease, color .18s ease, transform .12s ease, opacity .18s ease;
  position:relative;
}
.choose-btn:hover{background:var(--accent);color:#141414;}
.choose-btn:active{transform:scale(.96);}
.choose-btn.is-locking{
  pointer-events:none;
  color:transparent;
  background:var(--accent);
  opacity:.85;
}
.choose-btn.is-locking::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:16px;height:16px;
  margin:-8px 0 0 -8px;
  border:2px solid #141414;
  border-top-color:transparent;
  border-radius:50%;
  animation:spin .7s linear infinite;
}
.card-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px;}
.tag{
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:600;
  padding:4px 8px;
  border-radius:2px;
  color:#F5F1E6;
  background:var(--accent);
}
.code{font-family:'IBM Plex Mono', monospace;font-size:10.5px;color:var(--ink-soft);letter-spacing:.05em;}
.stamp{
  position:absolute;top:16px;right:16px;
  width:44px;height:44px;border-radius:50%;
  border:2px solid var(--accent);
  color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-family:'Barlow Condensed', sans-serif;
  font-weight:800;font-size:19px;
  transform:rotate(9deg);
  opacity:.85;
}
.card h3{
  font-family:'Barlow Condensed', sans-serif;
  font-weight:700;font-size:22px;line-height:1.05;
  margin:2px 0 10px;text-transform:uppercase;
  color:var(--ink);
}
.card .narrative{font-size:12.5px;line-height:1.5;color:var(--ink-soft);margin-bottom:12px;}
.card .prompt{
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;line-height:1.5;font-weight:600;
  padding:10px 11px;
  border-left:3px solid var(--accent);
  background:rgba(0,0,0,.035);
  margin-bottom:12px;
}
.chips{text-decoration:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:8px;}
.chip{
  text-decoration: none;
  font-size:10.5px;font-family:'IBM Plex Mono', monospace;
  padding:3px 8px;border-radius:20px;
  border:1px solid var(--accent);
  color:var(--ink-soft);
  background:rgba(255,255,255,.4);
  animation:chipPop .4s ease both;
  animation-delay:.42s;
}
.chip:nth-child(2){animation-delay:.48s;}
.chip:nth-child(3){animation-delay:.54s;}
.chip:nth-child(4){animation-delay:.6s;}
.chip:nth-child(5){animation-delay:.66s;}
.card-foot{
  margin-top:12px;padding-top:10px;
  border-top:1px dashed rgba(0,0,0,.2);
  display:flex;justify-content:space-between;align-items:center;
}
.card-foot .stage-label{
  font-family:'IBM Plex Mono', monospace;font-size:9.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
}
.card-foot .dept{font-family:'Barlow Condensed', sans-serif;font-weight:700;font-size:12px;color:var(--accent);}
.alt-block{margin-top:10px;padding-top:10px;border-top:1px dashed rgba(0,0,0,.2);}
.alt-block .alt-label{
  font-family:'IBM Plex Mono', monospace;font-size:10px;text-transform:uppercase;
  letter-spacing:.1em;font-weight:600;color:var(--ink-soft);margin-bottom:5px;display:block;
}
.alt-block .prompt{margin-bottom:0;}

/* --- Auth --- */
.auth-wrap{display:flex;justify-content:center;padding-top:60px;}
.auth-card{
  background:var(--paper);color:var(--ink);
  border-radius:8px;padding:36px 34px;max-width:380px;width:100%;
  box-shadow:0 20px 40px -16px rgba(0,0,0,.6);
}
.auth-card .eyebrow{color:#A63D2E;}
.auth-card .page-title{color:var(--ink);}
.auth-card .page-sub{color:var(--ink-soft);}
.auth-form{display:flex;flex-direction:column;gap:12px;margin-top:20px;}
.auth-form input{
  font-family:'IBM Plex Mono', monospace;
  padding:12px 14px;border:1px solid rgba(0,0,0,.2);border-radius:4px;font-size:14px;
}
.auth-form button{
  font-family:'Barlow Condensed', sans-serif;font-weight:700;font-size:16px;
  letter-spacing:.04em;text-transform:uppercase;
  padding:12px 14px;border:none;border-radius:4px;
  background:var(--ink);color:var(--paper);cursor:pointer;
}
.auth-form button:hover{background:#3a4136;}
.form-error{
  font-family:'IBM Plex Mono', monospace;font-size:12.5px;
  color:#A63D2E;margin-top:12px;
}

/* --- Admin --- */
.admin-wrap{max-width:820px;}
.stage-picker{display:flex;gap:14px;margin:28px 0 40px;flex-wrap:wrap;}
.stage-btn{
  flex:1 1 160px;
  background:transparent;
  border:1px solid rgba(255,255,255,.25);
  border-radius:8px;
  padding:18px;
  color:#CFE0F0;
  font-family:inherit;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:4px;
  text-align:left;
}
.stage-btn .stage-num{
  font-family:'Barlow Condensed', sans-serif;font-weight:800;font-size:30px;color:#7C93AE;
}
.stage-btn .stage-name{
  font-family:'IBM Plex Mono', monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
}
.stage-btn.active{
  background:#F5F1E6;color:var(--ink);border-color:#F5F1E6;
}
.stage-btn.active .stage-num{color:#A63D2E;}
.branch-status-grid{display:flex;flex-direction:column;gap:8px;margin-top:14px;}
.branch-status{
  --accent:#3B82C4;
  display:flex;align-items:center;gap:14px;
  background:rgba(255,255,255,.04);
  border-left:4px solid var(--accent);
  border-radius:4px;
  padding:12px 16px;
}
.branch-status .swatch{width:10px;height:10px;border-radius:50%;background:var(--accent);flex:none;}
.branch-status-name{font-family:'Barlow Condensed', sans-serif;font-weight:700;font-size:16px;text-transform:uppercase;color:#F5F1E6;}
.branch-status-field{font-size:11.5px;color:#7C93AE;}
.branch-status .code{margin-left:12px;color:var(--accent);font-weight:600;}
.pick-badge{
  margin-left:auto;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:.05em;
  padding:4px 10px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.25);
  color:#7C93AE;
  white-space:nowrap;
}
.pick-badge.picked{
  color:#141414;
  background:var(--accent);
  border-color:var(--accent);
}
.reset-form{margin-top:20px;}
.branch-reset-form{margin-left:12px;}
.branch-reset-btn{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:.05em;
  padding:7px 12px;
  border:1px solid #A63D2E;
  border-radius:4px;
  background:transparent;
  color:#E08A78;
  cursor:pointer;
  white-space:nowrap;
}
.branch-reset-btn:hover{background:#A63D2E;color:#F5F1E6;}
.branch-reset-btn:disabled{
  opacity:.35;
  cursor:not-allowed;
  border-color:rgba(255,255,255,.2);
  color:#7C93AE;
}
.branch-reset-btn:disabled:hover{background:transparent;}

@media (max-width:980px){
  .stage-columns .card{
    flex:0 0 82vw;
    max-width:320px;
  }
}

/* --- Confirm modal --- */
.modal-overlay{
  display:none;
  position:fixed;inset:0;
  background:rgba(15,27,45,.72);
  backdrop-filter:blur(2px);
  align-items:center;justify-content:center;
  padding:20px;
  z-index:1000;
  opacity:0;
  transition:opacity .18s ease;
}
.modal-overlay.is-open{display:flex;opacity:1;}
.modal-card{
  --accent:#3B82C4;
  background:var(--paper);
  color:var(--ink);
  width:100%;max-width:380px;
  border-radius:8px;
  padding:26px 26px 22px;
  outline:2px dashed rgba(0,0,0,.18);
  outline-offset:-9px;
  box-shadow:0 24px 48px -16px rgba(0,0,0,.65);
  transform:scale(.92) translateY(10px);
  transition:transform .2s cubic-bezier(.18,.9,.32,1);
}
.modal-overlay.is-open .modal-card{transform:scale(1) translateY(0);}
.modal-eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:600;color:var(--accent);
  display:block;margin-bottom:8px;
}
.modal-title{
  font-family:'Barlow Condensed', sans-serif;
  font-weight:800;font-size:22px;line-height:1.15;
  text-transform:uppercase;margin:0 0 10px;color:var(--ink);
}
.modal-body{
  font-family:'IBM Plex Mono', monospace;
  font-size:12.5px;line-height:1.55;font-weight:600;
  color:var(--ink-soft);
  padding:10px 11px;
  border-left:3px solid var(--accent);
  background:rgba(0,0,0,.035);
  margin-bottom:20px;
}
.modal-actions{display:flex;gap:10px;}
.modal-btn{
  flex:1;
  font-family:'Barlow Condensed', sans-serif;
  font-weight:700;font-size:14px;letter-spacing:.03em;text-transform:uppercase;
  padding:11px 12px;border-radius:4px;cursor:pointer;
  transition:background .18s ease, color .18s ease, transform .12s ease;
}
.modal-btn:active{transform:scale(.96);}
.modal-btn-cancel{
  border:1.5px solid rgba(0,0,0,.25);
  background:transparent;color:var(--ink-soft);
}
.modal-btn-cancel:hover{border-color:rgba(0,0,0,.45);color:var(--ink);}
.modal-btn-confirm{
  border:1.5px solid var(--accent);
  background:var(--accent);color:#141414;
}
.modal-btn-confirm:hover{filter:brightness(1.08);}

@media (max-width:640px){
  main{padding:28px 14px 64px;}
  .topbar{padding:14px 16px;flex-wrap:wrap;gap:10px;}
  .branch-head{flex-wrap:wrap;row-gap:6px;}
  .branch-head h2{font-size:26px;}
  .row{gap:16px;}
  .stage-picker{flex-direction:column;}
  .branch-status{flex-wrap:wrap;}
  .branch-status .code{margin-left:0;}
  .pick-badge{margin-left:0;}
  .branch-reset-form{margin-left:0;width:100%;}
  .branch-reset-btn{width:100%;}
}