:root{
  --base:#0A1128;
  --ice:#F5F7FA;
  --cyan:#00B4D8;
  --cyan-soft:rgba(0,180,216,.12);
  --cyan-line:rgba(0,180,216,.32);
  --surface:#111a33;
  --surface-raised:#17213c;
  --line:rgba(245,247,250,.13);
  --muted:rgba(245,247,250,.67);
  --font:"Space Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:"Segoe UI Variable Text","Segoe UI",Inter,Roboto,Arial,sans-serif;
}

html{color-scheme:dark;background:var(--base)}
body{
  background:
    radial-gradient(circle at 10% 8%,rgba(0,180,216,.105),transparent 31rem),
    radial-gradient(circle at 92% 88%,rgba(0,102,200,.12),transparent 28rem),
    var(--base);
  color:var(--ice);
  font-family:var(--sans);
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button,input,textarea,select{font-family:var(--sans)}

.stage{width:min(1080px,calc(100% - 36px));margin:30px auto 48px}
.topline{
  min-height:48px;padding:0 18px;
  color:var(--muted);background:rgba(17,26,51,.82);
  border:1px solid var(--line);border-radius:8px 8px 0 0;
  backdrop-filter:blur(14px);font:700 12px/1.3 var(--font)
}
.topline .live{color:var(--base);background:var(--cyan);border-radius:4px;box-shadow:0 0 20px rgba(0,180,216,.25)}
.topline a{color:var(--cyan);text-underline-offset:3px}

.window{
  color:var(--ice);background:#111a33;
  border:1px solid var(--line);border-top:0;border-radius:0 0 10px 10px;
  box-shadow:0 28px 80px rgba(0,0,0,.32);backdrop-filter:blur(18px);
}
.window>header{border-color:var(--line);background:rgba(10,17,40,.72)}
.window>header strong{color:var(--muted);font-family:var(--font)}
.intro h1{color:var(--ice);font-family:var(--sans);font-weight:750;letter-spacing:-.04em}
.intro p,.step>p{color:#c7ccd7;font-size:16px;line-height:1.65}

.checklist button{
  color:var(--ice);background:transparent;border-color:var(--line);border-radius:7px;
  transition:background-color .2s ease,border-color .2s ease,transform .2s ease;
}
.checklist button:hover:not(:disabled){background:var(--cyan-soft);transform:translateX(3px)}
.checklist button b{color:var(--muted);border-color:rgba(245,247,250,.25)}
.checklist button span{color:var(--ice);font-family:var(--sans);font-size:16px}
.checklist button small{color:#b6bdca;font-family:var(--sans);font-size:13px;line-height:1.45}
.checklist button em{color:var(--base);background:var(--cyan);border-radius:4px}
.checklist button.active{background:var(--cyan-soft);box-shadow:inset 3px 0 0 var(--cyan);border-color:var(--cyan-line)}
.checklist button.active b{color:var(--base);background:var(--cyan);border-color:var(--cyan)}
.checklist button.done b{color:var(--base);background:var(--cyan);border-color:var(--cyan)}
.checklist button.done em{color:var(--cyan);background:transparent;border:1px solid var(--cyan-line)}
.checklist button:disabled{opacity:.42}

.work{background:#0d1630;border-color:rgba(245,247,250,.2);border-radius:8px;box-shadow:none}
.stephead{color:var(--cyan);font-family:var(--font)}
.step h2{color:var(--ice);font-family:var(--sans);font-weight:750;letter-spacing:-.035em}
.step label{color:var(--ice);font-family:var(--sans);font-size:14px}
.step code{color:var(--cyan)}
.step input,.step textarea,.step select{
  color:var(--ice);background:var(--surface);border-color:var(--line);border-radius:5px;
  font-family:var(--sans);font-size:15px;line-height:1.55;caret-color:var(--cyan);
  transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease;
}
.step input::placeholder,.step textarea::placeholder{color:rgba(245,247,250,.38)}
.step input:focus,.step textarea:focus,.step select:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,180,216,.13);background:var(--surface-raised)}
.primary,.action{border-radius:6px;font-family:var(--sans);font-size:14px;font-weight:700;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,color .18s ease}
.primary{color:var(--base);background:var(--cyan)}
.action{color:var(--cyan);background:transparent;border-color:var(--cyan)}
.primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 9px 25px rgba(0,180,216,.2)}
.action:hover:not(:disabled){color:var(--base);background:var(--cyan);transform:translateY(-2px)}
.primary:focus-visible,.action:focus-visible,.checklist button:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.status{color:var(--ice);background:var(--surface);border-color:var(--cyan);font-family:var(--font)}
.status.error{border-color:#ff6b65}
.didbox{color:var(--ice);background:#060b1b;border:1px solid var(--cyan-line);border-radius:6px}
.didbox small,.didbox button,.didbox code{color:var(--cyan)}
.didbox button{border-color:var(--cyan);cursor:pointer}
.count,.warning{color:var(--muted)}
.share{color:var(--ice);background:#060b1b;border:1px solid var(--cyan-line);border-radius:6px;font-family:var(--font)}
details{color:var(--ice);background:rgba(17,26,51,.78);border-color:var(--line);border-radius:6px}
summary,details a{color:var(--cyan)}
.confirm{color:var(--muted)!important}
.confirm input{accent-color:var(--cyan)}
.recovery{margin-top:12px;padding:11px;background:#060b1b;border:1px solid var(--cyan-line);border-radius:6px}.recovery code{display:block;color:var(--cyan);font-size:12px;overflow-wrap:anywhere}.import-box{margin-top:12px}.key-cached label:has(+ #introPassword),.key-cached label:has(+ #recordPassword),.key-cached #introPassword,.key-cached #recordPassword{display:none}

aside{color:var(--ice);background:rgba(10,17,40,.92);border-color:var(--line)}
aside>span,aside dt{color:var(--cyan)}
aside dd{color:var(--muted)}
aside button{color:var(--muted);border-color:var(--muted)}
aside button:hover:not(:disabled){color:var(--cyan);border-color:var(--cyan)}

@media(max-width:700px){
  .stage{width:min(100% - 20px,580px);margin:10px auto 26px}
  .intro h1{font-size:27px}
  .intro p{font-size:14px}
  .checklist button:hover:not(:disabled){transform:none}
}

@media(prefers-reduced-motion:no-preference){
  .topline{animation:rise .5s cubic-bezier(.22,1,.36,1) both}
  .window{animation:rise .58s .08s cubic-bezier(.22,1,.36,1) both}
  .intro>*{animation:rise .48s cubic-bezier(.22,1,.36,1) both}
  .intro>p{animation-delay:.08s}
  .checklist button{animation:rise .42s cubic-bezier(.22,1,.36,1) both}
  .checklist button:nth-child(1){animation-delay:.10s}.checklist button:nth-child(2){animation-delay:.14s}
  .checklist button:nth-child(3){animation-delay:.18s}.checklist button:nth-child(4){animation-delay:.22s}
  .checklist button:nth-child(5){animation-delay:.26s}.checklist button:nth-child(6){animation-delay:.30s}
  .step.active{animation:panel-in .32s cubic-bezier(.22,1,.36,1) both}
  .checklist button.done b:after{animation:tick-in .28s cubic-bezier(.22,1,.36,1) both}
  .live{animation:live-pulse 2.8s ease-in-out infinite}
  @keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  @keyframes panel-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  @keyframes tick-in{from{opacity:0;transform:scale(.5) rotate(-15deg)}to{opacity:1;transform:none}}
  @keyframes live-pulse{0%,100%{box-shadow:0 0 0 0 rgba(0,180,216,.22)}50%{box-shadow:0 0 0 7px rgba(0,180,216,0)}}
}

/* Compact single-column onboarding card. */
.stage{width:min(520px,calc(100% - 28px));margin:28px auto 48px}
.topline{min-height:68px;display:grid;grid-template-columns:auto auto 1fr;gap:8px 12px;padding:12px 14px}
.topline>span:nth-child(3){color:var(--muted);font-size:11px}
.topline>a{grid-column:1/-1;justify-self:end;font-size:11px;text-decoration:none}
.window{display:block!important;padding-bottom:0!important}
.window>header{height:42px}
.intro{padding:17px 17px 10px}
.intro h1{font-size:19px;line-height:1.25;margin-bottom:7px;letter-spacing:-.025em}
.intro p{font-size:12px;line-height:1.55}
.checklist{padding:4px 16px 14px}
.checklist button{
  min-height:60px;height:auto;grid-template-columns:24px 1fr 96px;gap:9px;
  padding:9px 5px;margin:0;border-radius:0;border-bottom:1px solid var(--line);
}
.checklist button:hover:not(:disabled){transform:none;background:rgba(0,180,216,.055)}
.checklist button.active{border-color:var(--line);box-shadow:inset 2px 0 0 var(--cyan)}
.checklist button b{width:18px;height:18px;font-size:9px;background:transparent}
.checklist button span{font-size:13px;line-height:1.25}
.checklist button small{font-size:10px;line-height:1.35;margin-top:2px}
.checklist button em{width:96px;padding:7px 5px;font-size:10px;text-align:center;border-radius:999px}
.work{margin:0 16px 16px;min-height:0!important;border-radius:7px}
.step{padding:17px}
.step h2{font-size:21px;margin:7px 0 8px}
.step>p{font-size:13px;line-height:1.55;margin-bottom:12px}
.step label{font-size:12px;margin:12px 0 5px}
.step input,.step textarea,.step select{min-height:40px;padding:9px 10px;font-size:13px}
.primary,.action{min-height:38px;padding:9px 13px;font-size:12px}
.didbox{padding:11px;margin:10px 0}.didbox code{font-size:10px}
.status{font-size:10px;padding:9px 10px}
aside{display:none!important}

@media(max-width:430px){
  .stage{width:calc(100% - 16px);margin:8px auto 22px}
  .topline{border-radius:7px 7px 0 0}
  .checklist{padding-left:10px;padding-right:10px}
  .checklist button{grid-template-columns:20px 1fr 76px;gap:7px}
  .checklist button em{width:76px;font-size:9px}
  .checklist button span{font-size:12px}
  .checklist button small{font-size:9px}
  .work{margin-left:10px;margin-right:10px}
}

/* Actions live inside their checklist row; there is no separate active-step card. */
.work{display:none!important}
.checklist>.step{margin:0 0 7px 32px;padding:14px;background:#0d1630;border:1px solid var(--cyan-line);border-top:0;border-radius:0 0 7px 7px}
.checklist>.step h2{font-size:17px;margin:4px 0 6px}.checklist>.step>p{font-size:12px;margin-bottom:9px}
.checklist>.step button,.checklist>.step .action{display:inline-flex;width:auto;min-height:36px;height:auto;grid-template-columns:none;padding:8px 12px;margin-top:9px;border-radius:5px;text-align:center}
.checklist>.step .pair{display:flex}.checklist>.step .pair>*{flex:1}
.checklist>.step input,.checklist>.step textarea,.checklist>.step select{min-height:38px;font-size:12px;padding:8px}
.checklist>.step .didbox button{display:inline-block;min-height:0;padding:2px 0;border-radius:0}
.checklist>.step details{padding:9px}.checklist>.step .status{font-size:10px}
.checklist>button.active{border-bottom-color:var(--cyan-line);border-radius:7px 7px 0 0}
@media(max-width:430px){.checklist>.step{margin-left:20px;padding:11px}.checklist>.step .pair{flex-direction:column}}

.checklist .task-row{min-height:64px;display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:9px;padding:9px 5px;border-bottom:1px solid var(--line)}
.task-row>b{width:18px;height:18px;display:grid;place-items:center;border:1px solid rgba(245,247,250,.25);border-radius:50%;color:var(--muted);font:700 9px var(--font)}
.task-row>span{font-size:13px;font-weight:700;line-height:1.25}.task-row small{display:block;margin-top:2px;color:var(--muted);font-size:10px;font-weight:400;line-height:1.35}
.row-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px}
.checklist .row-actions button{
  appearance:none;display:inline-flex;align-items:center;justify-content:center;
  width:auto;height:32px;min-height:32px;min-width:82px;margin:0;padding:0 14px;
  border:1px solid transparent;border-radius:999px;
  background:linear-gradient(180deg,#19c2e3 0%,var(--cyan) 100%);color:var(--base);
  box-shadow:0 5px 14px rgba(0,180,216,.14),inset 0 1px 0 rgba(255,255,255,.3);
  font:700 10px/1 var(--font);letter-spacing:0;text-align:center;white-space:nowrap;
  cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease,border-color .16s ease;
}
.checklist .row-actions button+button{background:rgba(0,180,216,.06);color:var(--cyan);border-color:var(--cyan-line);box-shadow:none}
.checklist .row-actions button:not(:disabled){cursor:pointer}
.checklist .row-actions button:hover:not(:disabled){background:linear-gradient(180deg,#45d5ef 0%,#16c2df 100%);color:#071022;border-color:transparent;transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,180,216,.25),inset 0 1px 0 rgba(255,255,255,.4);filter:brightness(1.05)}
.checklist .row-actions button+button:hover:not(:disabled){background:rgba(0,180,216,.18);color:#55dcf3;border-color:rgba(0,180,216,.6);box-shadow:0 5px 16px rgba(0,180,216,.12);filter:none}
.checklist .row-actions button:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 7px rgba(0,180,216,.14)}
.checklist .row-actions button:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.checklist .row-actions button:disabled{opacity:.32;filter:saturate(.45);box-shadow:none;cursor:not-allowed}.task-row.locked{opacity:.52}.task-row.done{opacity:1}.task-row.done>b{font-size:0;background:var(--cyan);border-color:var(--cyan);color:var(--base)}.task-row.done>b:after{content:"✓";font-size:10px}.task-row.done .row-actions button{background:transparent;color:var(--cyan);border:1px solid var(--cyan-line);box-shadow:none}
.checklist .task-row.done .row-actions button:hover:not(:disabled){background:rgba(0,180,216,.18);color:#55dcf3;border-color:rgba(0,180,216,.65);box-shadow:0 5px 16px rgba(0,180,216,.12)}
@media(max-width:430px){.checklist .task-row{grid-template-columns:20px minmax(0,1fr);padding:10px 3px}.row-actions{grid-column:2;justify-content:flex-start}.checklist .row-actions button{height:30px;min-height:30px;min-width:76px;padding:0 11px;font-size:9px}}

.modal[hidden]{display:none}.modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:18px;background:rgba(3,7,18,.72);backdrop-filter:blur(7px)}.modal-card{width:min(430px,100%);padding:24px;background:#111a33;border:1px solid var(--cyan-line);border-radius:12px;box-shadow:0 26px 80px rgba(0,0,0,.55)}.modal-kicker{color:var(--cyan);font:700 10px/1 var(--font);letter-spacing:.12em}.modal-card h2{margin:10px 0 8px;color:var(--ice);font:750 23px/1.2 var(--sans);letter-spacing:-.03em}.modal-card p{margin:0;color:#c7ccd7;font:14px/1.6 var(--sans)}.modal-card code{display:block;margin-top:14px;padding:10px;color:var(--cyan);background:#060b1b;border-radius:6px;font:10px/1.5 var(--font);overflow-wrap:anywhere}.modal-input{display:block;width:100%;height:44px;margin-top:16px;padding:0 12px;border:1px solid var(--cyan-line);border-radius:6px;background:#060b1b;color:var(--ice);font:14px/1 var(--sans);outline:none}.modal-input[hidden],.modal-actions button[hidden]{display:none}.modal-input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,180,216,.13)}.modal-input::placeholder{color:rgba(245,247,250,.4)}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.modal-actions button{min-width:105px;height:38px;border-radius:6px;border:1px solid var(--cyan-line);background:transparent;color:var(--cyan);font:700 12px/1 var(--sans);cursor:pointer}.modal-actions #modalConfirm{border-color:var(--cyan);background:var(--cyan);color:var(--base)}.modal-actions button:hover{transform:translateY(-1px)}.modal-actions button:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}@media(prefers-reduced-motion:no-preference){.modal-card{animation:modal-in .22s cubic-bezier(.22,1,.36,1) both}@keyframes modal-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}}
.modal-actions button:disabled{opacity:.35;cursor:not-allowed;transform:none}#modalRecoveryLabel[hidden]{display:none!important}