:root{
    --bg:#10151c;
    --panel:#1a222b;
    --panel-hover:#212b36;
    --border:#2a3542;
    --text:#e7ebef;
    --text-dim:#94a3b0;
    --accent:#e2a03f;
    --accent-soft:rgba(226,160,63,0.14);
    --done:#4fa98f;
    --done-soft:rgba(79,169,143,0.14);
    --relay-inactive:#2a3542;
    --danger:#e2604a;
    --font-display:'Space Grotesk',sans-serif;
    --font-body:'Inter',sans-serif;
    --font-mono:'JetBrains Mono',monospace;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:var(--font-body);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  a{color:var(--accent);}
  ::selection{background:var(--accent-soft);}

  /* Top bar */
  .topbar{
    position:sticky;
    top:0;
    z-index:10;
    background:rgba(16,21,28,0.92);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--border);
    padding:14px 24px;
  }
  .topbar-inner{
    max-width:820px;
    margin:0 auto;
  }
  .topbar-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
  }
  .topbar-title{
    font-family:var(--font-display);
    font-size:15px;
    font-weight:600;
    letter-spacing:0.01em;
  }
  .topbar-count{
    font-family:var(--font-mono);
    font-size:13px;
    color:var(--text-dim);
    white-space:nowrap;
  }
  .save-status{
    margin-left:10px;
    font-size:11px;
    opacity:0;
    transition:opacity 0.3s;
  }
  .save-status.show{opacity:1;}
  .progress-track{
    height:6px;
    background:var(--relay-inactive);
    border-radius:3px;
    margin-top:10px;
    overflow:hidden;
  }
  .progress-fill{
    height:100%;
    background:var(--accent);
    border-radius:3px;
    width:0%;
    transition:width 0.4s ease;
  }
  .nav-pills{
    display:flex;
    gap:6px;
    margin-top:10px;
    overflow-x:auto;
    padding-bottom:2px;
  }
  .nav-pill{
    flex:0 0 auto;
    font-family:var(--font-mono);
    font-size:11px;
    color:var(--text-dim);
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:20px;
    padding:4px 10px;
    text-decoration:none;
    white-space:nowrap;
    transition:color 0.15s, border-color 0.15s;
  }
  .nav-pill:hover{color:var(--text); border-color:var(--accent);}

  /* Header */
  header.hero{
    max-width:820px;
    margin:0 auto;
    padding:40px 24px 8px;
  }
  header.hero h1{
    font-family:var(--font-display);
    font-size:clamp(26px,4vw,34px);
    font-weight:700;
    margin:0 0 10px;
    letter-spacing:-0.01em;
  }
  header.hero p{
    color:var(--text-dim);
    font-size:15px;
    max-width:60ch;
    margin:0;
  }
  .domain-tags{
    display:flex;
    gap:8px;
    margin-top:16px;
    flex-wrap:wrap;
  }
  .domain-tag{
    font-family:var(--font-mono);
    font-size:12px;
    padding:4px 10px;
    border-radius:6px;
    border:1px solid var(--border);
    color:var(--text-dim);
  }
  .domain-tag.primary{border-color:var(--accent); color:var(--accent);}

  main{
    max-width:820px;
    margin:0 auto;
    padding:8px 24px 80px;
  }

  /* Phase section */
  .phase{
    display:flex;
    gap:16px;
    margin-top:36px;
  }
  .phase-rail{
    flex:0 0 36px;
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .phase-badge{
    width:36px;
    height:36px;
    border-radius:50%;
    border:2px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:var(--font-mono);
    font-size:13px;
    font-weight:500;
    color:var(--text-dim);
    background:var(--bg);
    flex-shrink:0;
    transition:border-color 0.3s, color 0.3s;
  }
  .phase-badge.complete{
    border-color:var(--done);
    color:var(--done);
  }
  .phase-line{
    width:2px;
    flex:1;
    background:var(--relay-inactive);
    margin-top:4px;
    transition:background 0.4s;
  }
  .phase-line.complete{background:var(--done);}
  .phase-body{flex:1; min-width:0; padding-bottom:8px;}

  .phase-header{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:12px;
    margin-bottom:14px;
  }
  .phase-header h2{
    font-family:var(--font-display);
    font-size:19px;
    font-weight:600;
    margin:0;
    scroll-margin-top:100px;
  }
  .phase-counter{
    font-family:var(--font-mono);
    font-size:12px;
    color:var(--text-dim);
    white-space:nowrap;
  }

  /* Step row */
  .step{
    border:1px solid var(--border);
    border-radius:10px;
    margin-bottom:8px;
    background:var(--panel);
    overflow:hidden;
    transition:border-color 0.15s;
  }
  .step:hover{border-color:#37424f;}
  .step-row{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:12px 14px;
    cursor:pointer;
  }
  .step-check{
    flex:0 0 20px;
    width:20px;
    height:20px;
    border-radius:5px;
    border:2px solid var(--text-dim);
    margin-top:1px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:border-color 0.15s, background 0.15s;
    flex-shrink:0;
  }
  .step-check svg{
    width:12px;
    height:12px;
    opacity:0;
    transition:opacity 0.1s;
  }
  .step.done .step-check{background:var(--done); border-color:var(--done);}
  .step.done .step-check svg{opacity:1;}
  .step.done .step-title{color:var(--text-dim); text-decoration:line-through; text-decoration-color:var(--border);}

  .step-title{
    flex:1;
    font-size:14.5px;
    padding-top:1px;
  }
  .step-chevron{
    flex:0 0 16px;
    color:var(--text-dim);
    transition:transform 0.2s;
    margin-top:3px;
  }
  .step.open .step-chevron{transform:rotate(90deg);}

  .step-detail{
    max-height:0;
    overflow:hidden;
    transition:max-height 0.25s ease;
  }
  .step.open .step-detail{max-height:2400px;}
  .step-detail-inner{
    padding:0 14px 14px 46px;
    font-size:13.5px;
    color:var(--text-dim);
    border-top:1px dashed var(--border);
    margin-top:0;
    padding-top:12px;
  }
  .step-detail-inner code{
    font-family:var(--font-mono);
    font-size:12.5px;
    background:var(--bg);
    padding:1px 5px;
    border-radius:4px;
    color:var(--accent);
  }
  .note-wrap{margin-top:12px;}
  .note-label{
    font-family:var(--font-mono);
    font-size:10.5px;
    text-transform:uppercase;
    letter-spacing:0.05em;
    color:var(--text-dim);
    margin-bottom:6px;
  }
  .notes-list{display:flex; flex-direction:column; gap:6px;}
  .note-card{
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:7px;
    padding:8px 10px;
  }
  .note-card-top{display:flex; justify-content:space-between; align-items:flex-start; gap:8px;}
  .note-card-text{flex:1; font-size:13px; color:var(--text); white-space:pre-wrap; word-break:break-word;}
  .note-card-meta{font-family:var(--font-mono); font-size:10px; color:var(--text-dim); margin-top:6px;}
  .note-actions{display:flex; gap:4px; flex-shrink:0;}
  .note-btn{
    background:none; border:none; color:var(--text-dim); cursor:pointer;
    padding:3px; border-radius:4px; display:flex; align-items:center;
  }
  .note-btn:hover{color:var(--text); background:var(--panel-hover);}
  .note-btn.delete:hover{color:var(--danger);}
  .note-edit-textarea{
    width:100%;
    background:var(--panel-hover);
    border:1px solid var(--accent);
    border-radius:6px;
    color:var(--text);
    font-family:var(--font-body);
    font-size:13px;
    padding:7px 9px;
    resize:vertical;
    min-height:50px;
  }
  .note-edit-actions{display:flex; gap:6px; margin-top:7px;}
  .note-edit-actions button{
    font-family:var(--font-mono);
    font-size:11px;
    padding:4px 11px;
    border-radius:5px;
    border:1px solid var(--border);
    background:var(--panel);
    color:var(--text);
    cursor:pointer;
  }
  .note-edit-actions button.save{border-color:var(--accent); color:var(--accent);}
  .note-edit-actions button.save:hover{background:var(--accent-soft);}
  .note-add-row{display:flex; gap:6px; margin-top:10px; align-items:flex-start;}
  .note-add-input{
    flex:1;
    width:100%;
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:6px;
    color:var(--text);
    font-family:var(--font-body);
    font-size:13px;
    padding:8px 10px;
    resize:vertical;
    min-height:36px;
    line-height:1.4;
  }
  .note-add-input::placeholder{color:var(--text-dim); opacity:0.6;}
  .note-add-input:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent);}
  .note-add-btn{
    font-family:var(--font-mono);
    font-size:12px;
    padding:8px 13px;
    border-radius:6px;
    border:1px solid var(--accent);
    background:var(--accent-soft);
    color:var(--accent);
    cursor:pointer;
    white-space:nowrap;
    flex-shrink:0;
  }
  .note-add-btn:hover{background:var(--accent); color:#1a1206;}
  .config-banner{
    background:#3a2418;
    color:var(--accent);
    border-bottom:1px solid #5a3a1f;
    padding:10px 24px;
    font-family:var(--font-mono);
    font-size:12.5px;
    text-align:center;
  }
  .config-banner a{color:var(--accent); text-decoration:underline;}

  /* Callout */
  .callout{
    background:var(--accent-soft);
    border:1px solid rgba(226,160,63,0.35);
    border-radius:10px;
    padding:16px 18px;
    margin:14px 0 8px;
  }
  .callout h3{
    font-family:var(--font-display);
    font-size:14px;
    margin:0 0 8px;
    color:var(--accent);
  }
  .callout p, .callout ul{
    font-size:13.5px;
    color:var(--text);
    margin:0 0 8px;
  }
  .callout ul{padding-left:18px; margin-bottom:10px;}
  .callout li{margin-bottom:4px;}
  .callout p:last-child, .callout ul:last-child{margin-bottom:0;}

  /* Reference table */
  .ref-section{
    margin-top:48px;
    padding-top:28px;
    border-top:1px solid var(--border);
  }
  .ref-section h2{
    font-family:var(--font-display);
    font-size:17px;
    margin:0 0 14px;
  }
  table{
    width:100%;
    border-collapse:collapse;
    font-size:13px;
  }
  th,td{
    text-align:left;
    padding:9px 12px;
    border-bottom:1px solid var(--border);
  }
  th{color:var(--text-dim); font-weight:500; font-family:var(--font-mono); font-size:11.5px; text-transform:uppercase; letter-spacing:0.04em;}
  td code, td{font-family:var(--font-mono); font-size:12.5px;}
  .ref-note{
    margin-top:16px;
    font-size:13.5px;
    color:var(--text-dim);
  }

  footer{
    max-width:820px;
    margin:0 auto;
    padding:24px 24px 40px;
    color:var(--text-dim);
    font-size:12.5px;
    border-top:1px solid var(--border);
    margin-top:20px;
  }

  @media (max-width:560px){
    header.hero{padding:28px 18px 4px;}
    main{padding:8px 18px 60px;}
    .topbar{padding:12px 18px;}
    .phase{gap:10px;}
    .phase-rail{flex-basis:28px;}
    .phase-badge{width:28px; height:28px; font-size:11px;}
    .step-detail-inner{padding-left:14px;}
  }

  @media (prefers-reduced-motion:reduce){
    *{transition:none !important;}
  }

  :focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
  }