*{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#FAFAFA;
  --surface:#FFFFFF;
  --fg:#111;
  --fg2:#3F434A;
  --fg3:#666D77;
  --bd:#E8E8E8;
  --page-theme:#111111;
  --page-tint:#F3F4F6;
  --page-accent:rgba(17,17,17,0.06);
  --theme-line:rgba(17,17,17,0.12);
  --status-default:#111111;
  --status-default-soft:#F1F1F1;
  --status-need-visit:#2166E5;
  --status-need-visit-soft:#EAF1FF;
  --status-learning:#B88600;
  --status-learning-soft:#FFF4CC;
  --status-done:#118553;
  --status-done-soft:#E7F7EF;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --mono:"SF Mono","Cascadia Code","Fira Code","Consolas",monospace;
}

html{scroll-behavior:smooth}

body{
  font-family:var(--font);
  min-height:100vh;
  background:
    radial-gradient(circle at top left, var(--page-accent) 0%, rgba(250,250,250,0) 38%),
    linear-gradient(180deg, var(--page-tint) 0%, rgba(250,250,250,0) 260px),
    var(--bg);
  color:var(--fg);
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none}

.s{width:100%;max-width:none;margin:0 auto;padding:36px 40px 48px}

/* Header layout: title on left, legend on right */
.header-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:32px;
  margin-bottom:24px;
}

.page-title{
  font-size:48px;
  line-height:1.1;
  font-weight:500;
  letter-spacing:-0.03em;
  margin:0 0 18px;
}

.s-meta{
  font-size:13px;
  color:var(--fg3);
  letter-spacing:0.4px;
  margin-bottom:24px;
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

.s-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--fg3);display:inline-block}

.status-legend{
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:flex-end;
  padding:0;
  border:none;
  border-radius:0;
  background:transparent;
  backdrop-filter:none;
  flex-shrink:0;
  min-width:200px;
}

.status-note{
  display:none;
}

.status-items{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
}

.status-item,
.status-choice{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:34px;
  padding:7px 11px;
  border-radius:999px;
  border:1px solid transparent;
  background:var(--surface);
  color:var(--fg2);
}

.status-item[data-status="default"],
.status-choice[data-status="default"]{background:var(--status-default-soft);color:var(--status-default);border-color:rgba(17,17,17,0.08)}
.status-item[data-status="need-visit"],
.status-choice[data-status="need-visit"]{background:var(--status-need-visit-soft);color:var(--status-need-visit);border-color:rgba(33,102,229,0.12)}
.status-item[data-status="learning"],
.status-choice[data-status="learning"]{background:var(--status-learning-soft);color:var(--status-learning);border-color:rgba(184,134,0,0.14)}
.status-item[data-status="done"],
.status-choice[data-status="done"]{background:var(--status-done-soft);color:var(--status-done);border-color:rgba(17,133,83,0.14)}

.status-swatch{
  width:10px;
  height:10px;
  border-radius:50%;
  background:currentColor;
  flex-shrink:0;
}

.status-label{font-size:12px;font-weight:500}
.status-count{font-family:var(--mono);font-size:11px;opacity:0.9}

.s-search{
  width:100%;
  background:none;
  border:none;
  border-bottom:1.5px solid var(--bd);
  padding:12px 0;
  font-size:16px;
  color:var(--fg);
  font-family:var(--font);
  outline:none;
  transition:border-color 0.2s;
  margin-bottom:32px;
}

.s-search:focus{border-bottom-color:var(--fg)}
.s-search::placeholder{color:var(--fg3);font-weight:300}

.s-export,
.back-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,0.72);
  border:1px solid var(--theme-line);
  color:var(--fg2);
  font-size:12px;
  font-family:var(--font);
  padding:6px 14px;
  border-radius:4px;
  cursor:pointer;
  transition:all 0.15s;
  letter-spacing:0.3px;
}

.s-export:hover,
.back-link:hover,
.s-collapse:hover{color:var(--fg);border-color:var(--fg)}

.s-collapse{
  position:fixed;
  bottom:28px;
  right:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:auto;
  height:38px;
  padding:6px 14px;
  font-size:12px;
  font-family:var(--font);
  background:rgba(255,255,255,0.82);
  backdrop-filter:blur(10px);
  border:1px solid var(--theme-line);
  border-radius:4px;
  color:var(--fg2);
  cursor:pointer;
  transition:all 0.15s;
  letter-spacing:0.3px;
  z-index:100;
  box-shadow:0 4px 16px rgba(17,17,17,0.06);
}

.s-collapse.with-scroll-top{
  right:72px;
}

.s-collapse:hover{color:var(--fg);border-color:var(--fg)}

.scroll-top{
  position:fixed;
  bottom:28px;
  right:28px;
  width:38px;
  height:38px;
  border-radius:50%;
  border:1px solid var(--theme-line);
  background:rgba(255,255,255,0.82);
  backdrop-filter:blur(10px);
  color:var(--fg2);
  font-size:16px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.25s,transform 0.25s,color 0.15s,border-color 0.15s;
  transform:translateY(8px);
  z-index:100;
  box-shadow:0 4px 16px rgba(17,17,17,0.06);
}

.scroll-top.visible{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}

.scroll-top:hover{color:var(--fg);border-color:var(--fg)}

.topic-page .status-legend{display:none}

.resource-tools{
  margin:8px 0 18px 33px;
  padding-top:6px;
}

.resource-tools-label,
.resource-field-label{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--fg3);
}

.resource-form{
  display:grid;
  grid-template-columns:minmax(0,0.85fr) minmax(0,1.35fr) auto;
  gap:10px;
  align-items:end;
  margin-top:10px;
}

.resource-form .s-collapse{
  position:static;
  box-shadow:none;
}

.resource-field{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}

.resource-input{
  width:100%;
  background:none;
  border:none;
  border-bottom:1px solid var(--bd);
  padding:10px 0;
  font-size:14px;
  color:var(--fg);
  font-family:var(--font);
  outline:none;
  transition:border-color 0.2s;
}

.resource-input:focus{border-bottom-color:var(--fg)}
.resource-input::placeholder{color:var(--fg3)}

.resource-saved-note{
  margin-top:12px;
  font-size:12px;
  color:var(--fg2);
}

.resource-saved-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}

.resource-saved-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:30px;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid var(--theme-line);
  background:rgba(255,255,255,0.64);
}

.resource-saved-link{
  font-size:12px;
  color:var(--fg2);
}

.resource-saved-link:hover{color:var(--fg)}

.resource-remove{
  border:none;
  background:none;
  padding:0;
  font-size:12px;
  font-family:var(--font);
  color:var(--fg2);
  cursor:pointer;
}

.resource-remove:hover{color:var(--fg)}

.resource-empty{
  font-size:13px;
  color:var(--fg2);
}

.page-topbar{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  margin-bottom:18px;
}

.topic-page .back-link{
  min-height:36px;
  padding:8px 14px;
}

.hero{
  padding:4px 0 28px;
  margin-bottom:24px;
  border-bottom:1px solid var(--theme-line);
}

.crumbs{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:14px;
  font-size:12px;
  color:var(--fg3);
}

.crumb-link{transition:color 0.15s}
.crumb-link:hover{color:var(--fg)}
.crumb-sep{color:var(--bd)}

.hero-k{font-family:var(--mono);font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--fg2);margin-bottom:10px}
.hero-title{font-size:34px;line-height:1.08;letter-spacing:-0.03em;font-weight:550;max-width:1100px}
.hero-summary{margin-top:14px;max-width:1100px;font-size:15px;line-height:1.7;color:var(--fg2)}

.topic-brief{
  margin-top:18px;
  max-width:1100px;
  display:grid;
  gap:10px;
}

.topic-brief-line{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:12px 14px;
  border:1px solid var(--theme-line);
  border-radius:12px;
  background:rgba(255,255,255,0.68);
  box-shadow:0 12px 30px rgba(17,17,17,0.03);
}

.topic-brief-label{
  min-width:110px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--page-theme);
  padding-top:3px;
  flex-shrink:0;
}

.topic-brief-text{
  font-size:14px;
  line-height:1.72;
  color:var(--fg2);
}

.hero-grid{
  margin-top:20px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px;
}

.hero-card{
  border:1px solid var(--theme-line);
  border-radius:12px;
  padding:14px 16px;
  background:rgba(255,255,255,0.78);
  box-shadow:0 14px 34px rgba(17,17,17,0.03);
}

.hero-card-label{font-family:var(--mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--fg2);margin-bottom:8px}
.hero-card-value{font-size:15px;line-height:1.45;color:var(--fg)}

.not-found{
  margin-top:24px;
  border:1px solid var(--bd);
  border-radius:12px;
  padding:24px;
  background:var(--surface);
}

.not-found h1{font-size:24px;margin-bottom:10px}
.not-found p{font-size:15px;line-height:1.7;color:var(--fg2);max-width:700px}

.startup-error{
  margin:0 0 24px;
  border:1px solid rgba(226,75,74,0.22);
  border-radius:14px;
  padding:18px 20px;
  background:rgba(255,255,255,0.9);
  box-shadow:0 16px 34px rgba(17,17,17,0.04);
}

.startup-error-k{
  margin-bottom:8px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#B42318;
}

.startup-error-title{
  font-size:22px;
  line-height:1.2;
  letter-spacing:-0.02em;
  margin-bottom:10px;
}

.startup-error-list{
  margin:0 0 12px 18px;
  display:grid;
  gap:6px;
  color:var(--fg2);
  font-size:14px;
  line-height:1.55;
}

.startup-error-note{
  font-size:13px;
  line-height:1.6;
  color:var(--fg3);
}

.l{position:relative;margin-bottom:12px;border-radius:18px}
.l+.l{border-top:1px solid var(--bd)}

.l-h{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  padding:16px 12px;
  border:none;
  appearance:none;
  text-align:left;
  font:inherit;
  color:inherit;
  cursor:pointer;
  user-select:none;
  transition:opacity 0.15s;
  border-radius:16px;
  background:linear-gradient(90deg,var(--layer-bg,#FFFFFF) 0%, rgba(255,255,255,0) 78%);
}

.l-h:hover{opacity:0.84}
.l-h:focus-visible,
.sec-h:focus-visible{outline:2px solid var(--page-theme);outline-offset:4px}
.l-accent{width:3px;height:22px;border-radius:1.5px;flex-shrink:0;transition:height 0.2s}
.l.open .l-accent{height:28px}
.l.open .l-h{box-shadow:0 14px 28px var(--layer-shadow)}
.l-n{font-family:var(--mono);font-size:12px;color:var(--fg2);min-width:18px;letter-spacing:0.5px}
.l-copy{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.l-t{font-size:18px;font-weight:500;flex:1;letter-spacing:-0.015em}
.l-s{font-size:13px;color:var(--fg2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.l-meta{font-size:12px;color:var(--fg2);font-family:var(--mono)}
.l-arrow{font-size:11px;color:var(--fg2);transition:transform 0.25s ease;display:inline-block}
.l.open .l-arrow{transform:rotate(90deg)}

.l-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows 0.3s ease}
.l.open .l-b{grid-template-rows:1fr}
.l-inner{overflow:hidden;padding-right:12px}

.sec{padding-left:33px}

.sec-h{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  padding:9px 0;
  border:none;
  appearance:none;
  text-align:left;
  font:inherit;
  color:inherit;
  background:none;
  cursor:pointer;
  user-select:none;
  transition:opacity 0.15s;
}

.sec-h:hover{opacity:0.84}
.sec-arrow{font-size:10px;color:var(--fg2);transition:transform 0.2s ease;display:inline-block;width:12px}
.sec.open .sec-arrow{transform:rotate(90deg)}
.sec-t{font-size:15px;color:var(--fg2);flex:1;font-weight:400}
.sec-c{font-family:var(--mono);font-size:11px;color:var(--fg2)}

.sec-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows 0.25s ease}
.sec.open .sec-b{grid-template-rows:1fr}
.sec-inner{overflow:hidden}

.topics{
  padding:8px 0 18px 18px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:2px 18px;
}

.meta-table{
  width:calc(100% - 18px);
  margin:10px 0 8px 18px;
  border-collapse:collapse;
  table-layout:fixed;
}

.meta-row{
  transition:opacity 0.2s;
}

.meta-table th,
.meta-table td{
  padding:7px 0;
  vertical-align:top;
  border-bottom:1px solid rgba(17,17,17,0.06);
}

.meta-table th{
  width:170px;
  padding-right:16px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--fg2);
  font-weight:400;
  text-align:left;
}

.meta-table td{
  font-size:14px;
  line-height:1.45;
  color:var(--fg);
}

.topic-token{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:6px;
  min-height:0;
  padding:8px 6px 10px;
  border:none;
  border-bottom:1px solid rgba(17,17,17,0.12);
  border-radius:0;
  --topic-bottom-glow:rgba(17,17,17,0.06);
  --topic-side-glow:rgba(17,17,17,0.008);
  background-color:transparent;
  background-image:
    linear-gradient(to top, var(--topic-bottom-glow) 0%, rgba(255,255,255,0) 54%),
    linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 18%, var(--topic-side-glow) 34%, var(--topic-side-glow) 66%, rgba(255,255,255,0) 82%, rgba(255,255,255,0) 100%);
  background-repeat:no-repeat;
  background-size:100% 100%;
  box-shadow:none;
  transition:border-bottom-color 0.15s;
}

.topic-token:hover{border-bottom-color:rgba(17,17,17,0.16)}
.topic-token:not(.prompt-token)[data-status="default"]{--topic-bottom-glow:rgba(17,17,17,0.06);--topic-side-glow:rgba(17,17,17,0.008)}
.topic-token:not(.prompt-token)[data-status="need-visit"]{--topic-bottom-glow:rgba(33,102,229,0.1);--topic-side-glow:rgba(33,102,229,0.018)}
.topic-token:not(.prompt-token)[data-status="learning"]{--topic-bottom-glow:rgba(184,134,0,0.105);--topic-side-glow:rgba(184,134,0,0.019)}
.topic-token:not(.prompt-token)[data-status="done"]{--topic-bottom-glow:rgba(17,133,83,0.1);--topic-side-glow:rgba(17,133,83,0.018)}

.prompt-token{
  grid-column:1/-1;
  margin-top:4px;
  padding:16px 18px 18px;
  border:1px solid var(--theme-line);
  border-radius:14px;
  background:rgba(255,255,255,0.82);
  box-shadow:0 18px 38px rgba(17,17,17,0.05);
}

.prompt-token:hover{border-color:rgba(17,17,17,0.16)}

.prompt-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}

.prompt-info{
  display:grid;
  gap:6px;
  min-width:0;
}

.prompt-label{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--fg2);
}

.prompt-description{
  max-width:900px;
  font-size:14px;
  line-height:1.65;
  color:var(--fg2);
}

.prompt-copy-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:112px;
  min-height:36px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid var(--theme-line);
  background:rgba(17,17,17,0.03);
  color:var(--fg);
  font:inherit;
  font-size:12px;
  cursor:pointer;
  transition:transform 0.15s,border-color 0.15s,background-color 0.15s,color 0.15s;
  flex-shrink:0;
}

.prompt-copy-button:hover{transform:translateY(-1px);border-color:rgba(17,17,17,0.18);background:rgba(17,17,17,0.05)}
.prompt-copy-button[data-state="copied"]{background:var(--status-done-soft);color:var(--status-done);border-color:rgba(17,133,83,0.18)}
.prompt-copy-button[data-state="error"]{background:var(--status-need-visit-soft);color:var(--status-need-visit);border-color:rgba(33,102,229,0.18)}

.prompt-body{
  margin:0;
  padding:16px;
  border-radius:12px;
  border:1px solid rgba(17,17,17,0.08);
  background:linear-gradient(180deg, rgba(17,17,17,0.03) 0%, rgba(17,17,17,0.018) 100%);
  font-family:var(--mono);
  font-size:12px;
  line-height:1.7;
  color:var(--fg);
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  overflow-x:auto;
}

.topic-head{
  display:flex;
  align-items:flex-start;
  gap:10px;
  min-width:0;
}

.t,
.t-new,
.t-link{
  display:inline-flex;
  align-items:center;
  flex:0 1 auto;
  min-width:0;
  line-height:1.35;
  white-space:normal;
  word-break:normal;
  overflow-wrap:anywhere;
}

.t,
.t-link{font-size:14px;color:inherit}

.t-new{
  font-size:14px;
  color:inherit;
  border-bottom:1px dotted var(--fg3);
}

.t-link{
  border-bottom:1px solid transparent;
  transition:color 0.15s,border-color 0.15s,background-color 0.15s;
}

.t-link:hover{color:var(--fg);border-bottom-color:currentColor}
.t-link:focus-visible{outline:2px solid var(--fg);outline-offset:2px;border-radius:3px}

.t-current{color:var(--fg);font-weight:500}

.topic-status-control{
  width:12px;
  height:12px;
  margin-left:2px;
  border-radius:50%;
  border:none;
  padding:0;
  background:var(--status-default);
  cursor:pointer;
  box-shadow:0 0 0 1px rgba(255,255,255,0.92), 0 0 0 2px rgba(17,17,17,0.05);
  transition:transform 0.15s, box-shadow 0.15s, opacity 0.15s;
  flex-shrink:0;
  margin-top:3px;
}

.topic-status-control[data-status="default"]{background:var(--status-default)}
.topic-status-control[data-status="need-visit"]{background:var(--status-need-visit)}
.topic-status-control[data-status="learning"]{background:var(--status-learning)}
.topic-status-control[data-status="done"]{background:var(--status-done)}

.topic-status-control:hover{transform:scale(1.12);box-shadow:0 0 0 1px rgba(255,255,255,0.96), 0 0 0 3px rgba(17,17,17,0.08)}
.topic-status-control:focus-visible{outline:2px solid currentColor;outline-offset:3px}

.t-new-dot{display:inline-block;width:4px;height:4px;border-radius:50%;background:#1D9E75;margin-right:3px;vertical-align:middle;position:relative;top:-1px}

.topic-prereqs{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
  padding-left:0;
}

.topic-prereq-label{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--fg2);
  margin-right:2px;
}

.topic-prereq,
.topic-prereq-empty{
  display:inline-flex;
  align-items:center;
  min-height:20px;
  padding:2px 7px;
  border-radius:999px;
  background:rgba(17,17,17,0.05);
  color:var(--fg2);
  font-size:10px;
  line-height:1.25;
}

.topic-prereq-link{transition:background-color 0.15s,color 0.15s}
.topic-prereq-link:hover{background:rgba(17,17,17,0.08);color:var(--fg)}
.topic-prereq-empty{background:rgba(17,17,17,0.03);color:var(--fg3)}

.faded{opacity:0.08!important;pointer-events:none;transition:opacity 0.2s}

.status-picker-label{
  margin-top:18px;
  margin-bottom:10px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--fg2);
}

.status-picker{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:18px;
}

.status-choice{
  cursor:pointer;
  font:inherit;
  transition:transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.status-choice:hover{transform:translateY(-1px)}
.status-choice.is-active{box-shadow:0 0 0 2px currentColor inset, 0 10px 22px rgba(17,17,17,0.05)}

@media(max-width:900px){
  .hero-title{font-size:28px}
  .topic-brief-line{flex-direction:column;gap:6px}
  .topic-brief-label{min-width:0;padding-top:0}
  .resource-form{grid-template-columns:1fr}
  .prompt-head{flex-direction:column;align-items:stretch}
  .prompt-copy-button{width:100%}
}

@media(max-width:480px){
  .s{width:100%;padding:20px 14px 28px}
  .page-title{font-size:24px;margin-bottom:14px}
  .page-topbar{margin-bottom:14px}
  .status-legend{padding:12px 14px}
  .hero{padding-bottom:22px}
  .hero-title{font-size:24px}
  .hero-summary{font-size:14px}
  .sec{padding-left:24px}
  .resource-tools{margin-left:24px}
  .topics{padding-left:10px;grid-template-columns:1fr;gap:2px}
  .meta-table{width:calc(100% - 10px);margin-left:10px}
  .meta-table th,
  .meta-table td{display:block;padding:0;border:none}
  .meta-table tr{display:grid;gap:4px;padding:8px 0;border-bottom:1px solid rgba(17,17,17,0.06)}
  .meta-table th{width:auto;padding-right:0}
  .l-h{gap:10px;padding:14px 0}
  .l-t{font-size:16px}
  .l-s{white-space:normal}
  .sec-t{font-size:14px}
  .t,.t-new,.t-link{font-size:13px}
  .topic-token{padding:8px 0 10px 8px}
  .prompt-token{padding:14px}
  .prompt-body{padding:14px;font-size:11px}
}