/* Editorial blue-violet language shared with Chase's local static site.
   Self-contained here so this handbook does not depend on the other repo. */
:root {
  --bg:#f6f8fc;--paper:#fff;--ink:#202e50;--muted:#5a6881;
  --line:#e1e7f2;--navy:#202e50;--blue:#4f46e5;--blue2:#edf1ff;
  --teal:#4f46e5;--teal2:#eff1ff;--purple:#6366f1;--purple2:#f1efff;
  --amber:#9b6206;--amber2:#fff4dc;--red:#a23e54;--red2:#fff0f2;
  --shadow:0 8px 24px #233f7010;--shadow-hover:0 13px 32px #233f701c;
  --serif:'Noto Serif SC','Songti SC','STSong',serif;
  --sans:'Noto Sans SC','Microsoft YaHei',system-ui,sans-serif;
  --gradient:linear-gradient(135deg,#3b82f6,#6366f1 75%,#8b5cf6);
}
html { scroll-padding-top:92px }
body { background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.85;-webkit-font-smoothing:antialiased }
button,input { font-family:var(--sans) }
a,button,summary { touch-action:manipulation }
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible { outline:3px solid #6366f1;outline-offset:3px }
::selection { background:#dce7ff }
.wrap { max-width:1280px;padding-inline:32px }
.skip-link { position:fixed;top:-100px;left:16px;background:white;padding:12px;z-index:100 }
.skip-link:focus { top:12px }
.reading-progress { background:var(--gradient);height:3px }
.sticky { top:0;background:rgba(255,255,255,.95);border-color:var(--line);box-shadow:none;backdrop-filter:blur(12px);z-index:50 }
.nav { display:flex;align-items:center;gap:28px;min-height:76px;padding-block:0;overflow:visible }
.nav:before,.nav:after { content:none!important;display:none!important }
.nav .top-link { display:inline-flex;align-items:center;gap:10px;flex:none;white-space:nowrap;padding:0!important;background:none!important;color:var(--ink)!important;font-size:19px;font-weight:800;letter-spacing:-.035em }
.nav .top-link:before { content:'学';display:grid;place-items:center;width:33px;height:33px;border-radius:50%;background:var(--gradient);color:#fff;font-size:15px;letter-spacing:0 }
.nav .top-link span { color:var(--accent,#4f46e5);font-size:16px;transition:transform .18s }
.nav .top-link:hover span { transform:translate(2px,-2px) }
.chase-guide .chase-return { flex:none;padding:5px 0!important;color:#5a6881;font-size:12px;font-weight:700 }
.chase-guide .chase-return:hover { color:#4f46e5;background:none }
.chase-guide .nav { gap:18px }
.chase-guide .nav-links .chase-return-mobile { display:none }
.nav-links { display:flex;align-items:center;gap:3px;margin-left:auto }
.nav-links a { font-size:13px;font-weight:650;padding:9px 14px;border-radius:30px;white-space:nowrap;text-decoration:none;color:var(--ink) }
.nav-links a:hover,.nav-links a[aria-current=page] { background:#edf1ff;color:#4f46e5 }
.menu-toggle { display:none;background:#fff;border:1px solid var(--line);border-radius:10px;padding:7px 13px;color:var(--ink);font-weight:700 }

.chapter-hero { position:relative;overflow:hidden;background:linear-gradient(115deg,#eff3ff,#eceeff 65%,#ede9ff);border-bottom:1px solid var(--line);padding:0;color:var(--ink) }
.hero-layout { display:grid;grid-template-columns:minmax(0,1.05fr) minmax(330px,.95fr);gap:46px;align-items:center;min-height:410px }
.hero-copy { min-width:0;padding:62px 0 }
.chapter-hero .eyebrow { display:inline-block;margin:0;padding:6px 16px;border-radius:100px;background:#4f46e5;color:white;font-size:11px;font-weight:700;letter-spacing:.04em;line-height:1.7 }
.chapter-hero h1 { margin:21px 0 0;max-width:none;font-family:var(--sans);font-size:clamp(34px,3.8vw,48px);font-weight:800;letter-spacing:-.03em;line-height:1.4;color:var(--ink) }
.chapter-hero p { margin:18px 0 0;max-width:570px;font-size:16px;line-height:1.95;color:#394b6c;text-wrap:pretty }
.chapter-index { gap:9px;margin-top:28px }
.chapter-index a { border:1px solid #d6def6;background:#ffffffb8;color:#4a5b7e;border-radius:100px;padding:7px 13px;font-size:12px;line-height:1.5;max-width:330px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
.chapter-index a:hover { color:#4f46e5;background:white;border-color:#aebcf4 }
.hero-visual { position:relative;min-height:300px;isolation:isolate }
.visual-halo { position:absolute;inset:20px 9% 12px 12%;border-radius:48%;background:radial-gradient(circle at 48% 45%,#fff 0,#d7ddff 43%,#bfcafa 64%,transparent 71%);filter:blur(12px);opacity:.86 }
.visual-card { position:absolute;z-index:1;width:215px;min-height:132px;padding:19px 23px;border:1px solid #dce2f7;border-radius:17px;background:#ffffffed;box-shadow:0 18px 42px #283b7929;transform:rotate(-4deg) }
.visual-card span { display:block;color:#6366f1;font-size:11px;font-weight:800;letter-spacing:.11em }
.visual-card strong { display:block;margin-top:12px;font-family:var(--serif);font-size:22px;line-height:1.45;color:var(--ink) }
.visual-card-one { left:4%;top:12px;transform:rotate(-7deg) }
.visual-card-two { right:2%;top:56px;transform:rotate(6deg);background:linear-gradient(145deg,#fff,#f5f2ff) }
.visual-card-three { left:24%;bottom:0;transform:rotate(-2deg);background:linear-gradient(145deg,#fff,#eef4ff) }

.wrap.journey { padding:49px 32px 28px }
.journey .chapter-kicker,.section-kicker { color:#4f46e5;font-size:11px;letter-spacing:.17em;font-weight:800 }
.journey h2 { font-family:var(--serif);font-size:clamp(25px,3vw,33px);letter-spacing:-.025em;line-height:1.45 }
.journey p { color:var(--muted);margin-bottom:23px }
.journey-grid { gap:17px }
.journey-card { min-height:185px;padding:23px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:none;transition:transform .2s,box-shadow .2s }
.journey-card .number { color:#6366f1;font-family:var(--sans);font-size:11px;letter-spacing:.1em }
.journey-card b { font-family:var(--serif);font-size:19px;line-height:1.45 }
.journey-card small { font-size:12px;line-height:1.7 }
.journey-card .go { color:#4f46e5;font-size:12px }
.journey-card[aria-current=step] { background:linear-gradient(140deg,#f0f5ff,#f0edff);border-color:#d7dffa }
.journey-card:hover { box-shadow:0 12px 30px #233f7015 }
.learning-note { margin:16px 0 22px;padding:24px 28px;border:1px solid #dce2fb;border-radius:16px;background:linear-gradient(135deg,#f7f9ff,#f1efff);color:var(--ink);font-size:15px;line-height:1.85 }
.learning-note strong { font-family:var(--serif);font-size:20px }
.learning-note p { margin:7px 0 0;color:#4e5d77 }
.learning-note a { color:#4f46e5;text-decoration:underline;text-underline-offset:3px }
.learning-note .section-kicker { display:block;margin-bottom:6px }

main>section { padding:64px 0;border-bottom:1px solid var(--line) }
main>section:nth-child(even) { background:#fff }
.section-head h2 { font-family:var(--serif);font-size:clamp(26px,3vw,34px);font-weight:800;line-height:1.4;letter-spacing:-.025em }
.section-head p { font-size:13px;line-height:1.85 }
.section-head .eyebrow { color:#4f46e5!important;letter-spacing:.13em }
.wrap>h3 { border-color:#6366f1;font-family:var(--serif);font-size:21px;letter-spacing:-.02em }
.card,.decision,.prompt-fold,.term,.skill,.module-card,.doc-node,.recovery-step { border-color:var(--line);box-shadow:none }
.card:hover { box-shadow:0 10px 26px #233f7010 }
.notice { background:#f5f6ff;border-left-color:#6366f1;color:#3d4d70 }
.quick-rule { background:linear-gradient(130deg,#edf3ff,#eeedff);border-color:#d9e0f5;color:var(--ink) }
.quick-rule b { color:#4f46e5 }
.route-panel { background:linear-gradient(145deg,#f3f6ff,#eeecff);color:var(--ink);border:1px solid #dce3f9 }
.route-panel .why,.route-steps small { color:#5b6880 }
.route-steps .n { color:white;background:var(--gradient) }
.route-steps li:not(:last-child):after { border-color:#b9c6f1 }
.route-skill-links a { border-color:#cbd4f2;background:#fff;color:#4f46e5 }
.route-skill-links a:hover { background:#e8edff }
.decision:hover,.decision.active { background:#edf1ff;border-color:#8c9ff0 }
.scenario { border-top:3px solid #a5b4fc }
.scenario .tag,.skill .tag { background:#edf1ff;color:#4f46e5 }
.filter.active { background:#4f46e5;border-color:#4f46e5;color:white }
.skill summary:hover,.term summary:hover { background:#f7f8ff }
.skill-summary-top code { color:#4a45ba;background:#eef0ff }
.example { background:#f6f7ff;color:#394b6c }
.prompt { background:#202e50;color:#f0f3ff }
.matrix th,.turn-table th { background:#edf1ff;color:#303f60 }
.matrix td,.turn-table td { border-color:var(--line) }
.map-shell { border:1px solid #d8dff3;background:linear-gradient(150deg,#fcfdff,#f2f2ff);box-shadow:none;color:var(--ink) }
.map-stage-title strong,.map-stage-kicker,.map-stage-hint,.map-caption { color:var(--ink) }
.map-scroll { background:#fff }
.stage-button,.seg-btn { background:#fff;color:#394b6c;border-color:#d9e0f1 }
.stage-button:hover,.stage-button.active,.seg-btn:hover,.seg-btn.active { color:#fff;background:#4f46e5;border-color:#4f46e5 }
.chapter-next { border-color:var(--line);background:#edf2ff }
.chapter-next .wrap { min-height:85px }
.chapter-next a { background:var(--gradient);border-radius:100px;padding:12px 22px }
footer { background:#fff;border-top:1px solid var(--line);padding:36px 0 }
.footer-content { display:flex;align-items:center;gap:30px }
.footer-content strong { flex:none;font-size:21px;letter-spacing:-.035em }
.footer-content .brand-dot { color:#4f46e5 }
.footer-content p { flex:1;font-size:12px;line-height:1.8;color:#68758d }
.footer-content a { color:#4f46e5;font-size:12px;font-weight:700 }
.footer-content a:hover { text-decoration:underline }

@media(max-width:1050px) {
  .nav { gap:14px }
  .nav-links a { padding:8px 9px }
  .hero-layout { gap:15px }
  .visual-card { width:185px;min-height:117px;padding:16px 18px }
  .visual-card strong { font-size:19px }
}
@media(max-width:900px) {
  .nav { min-height:66px }
  .menu-toggle { display:block;margin-left:auto }
  .nav-links { display:none;position:absolute;top:65px;left:0;right:0;z-index:60;margin:0;padding:15px 24px;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 13px 22px #233f7019 }
  .nav-links.open { display:flex;flex-direction:column;align-items:stretch }
  .nav-links a { padding:11px 16px }
  .chase-guide .chase-return { display:none!important }
  .chase-guide .nav-links.open .chase-return-mobile { display:block }
  .chase-guide .menu-toggle { flex:none;white-space:nowrap;min-width:58px }
  .chase-guide .nav .top-link { font-size:16px }
  .hero-layout { grid-template-columns:minmax(0,1fr) 275px;min-height:350px }
  .visual-card { width:165px }
  .visual-card-three { left:13% }
}
@media(max-width:680px) {
  .wrap { padding-inline:21px }
  .chapter-hero .hero-layout { grid-template-columns:1fr;gap:0 }
  .hero-copy { padding:34px 0 29px }
  .chapter-hero h1 { font-size:clamp(30px,7.6vw,38px) }
  .chapter-hero p { font-size:14px }
  .chapter-index { margin-top:20px }
  .hero-visual { display:none }
  .wrap.journey { padding:36px 21px 20px }
  .journey-grid { grid-template-columns:1fr;gap:12px }
  .journey-card { min-height:0 }
  main>section { padding:42px 0 }
  .section-head h2 { font-size:27px }
  .learning-note { padding:20px }
  .map-stage-head .map-view-seg { display:grid!important;grid-template-columns:1fr;width:100% }
  .map-stage-head .seg-label { display:block!important;width:auto;white-space:nowrap;margin-bottom:7px }
  .map-stage-head .seg-track { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100% }
  .map-stage-head .seg-btn { white-space:nowrap;font-size:11px;padding:8px 3px }
  .map-stage-sub .ctl-group { display:flex;flex-wrap:wrap;align-items:center;gap:8px }
  .map-stage-sub .ctl-group-label { width:auto;white-space:nowrap }
  .footer-content { display:block }
  .footer-content p { margin:12px 0 }
}
@media print {
  .sticky,.chapter-next,.reading-progress,.hero-visual { display:none!important }
  .chapter-hero { background:white;color:#202e50 }
  .chapter-hero p { color:#394b6c }
}

/* A teaching page in Chase colours: content comes into view without a repeated cover layout. */
.chapter-hero .hero-layout { display:block;min-height:0 }
.chapter-hero-compact .hero-copy { padding:27px 0 24px }
.chapter-hero-home .hero-copy { padding:39px 0 17px }
.chapter-hero-compact h1 { margin-top:9px;font-size:clamp(28px,3vw,38px);line-height:1.28 }
.chapter-hero-home h1 { margin-top:13px }
.chapter-hero-compact p { margin-top:6px;max-width:800px;font-size:14px }
.chapter-hero .eyebrow { background:none;border:0;color:#4f46e5;padding:0;letter-spacing:.1em }
.chapter-index { margin-top:14px }
.chapter-index a { max-width:none }
.hero-path { display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:0 0 32px;color:#4f46e5;font-size:12px;font-weight:750 }
.hero-path span { background:#fff;border:1px solid #d6def6;border-radius:999px;padding:6px 13px }
.hero-path i { font-style:normal;color:#8595c3 }
.wrap.journey { padding-top:32px }
main>section:first-child { padding-top:39px }

/* The selected task has a durable, readable result beside the graph. */
.map-shell { overflow:visible }
.map-stage-bar { margin-bottom:9px }
.map-stage-sub { order:0 }
.map-view-status { margin:5px 0 0;font-size:12px;color:#5a6881 }
.map-route-guide { display:grid;grid-template-columns:minmax(240px,.72fr) minmax(0,1.28fr);gap:18px;margin:16px 0;padding:19px 21px;background:#f5f7ff;border:1px solid #d9e0f5;border-radius:14px }
.map-route-kicker { color:#4f46e5;font-size:11px;font-weight:800;letter-spacing:.11em }
.map-route-guide h3 { margin:3px 0 6px;color:#202e50;font-size:20px;line-height:1.35 }
.map-route-guide p { margin:0;color:#475873;font-size:13px;line-height:1.65 }
.map-route-guide .map-route-note { margin-top:12px;padding-top:9px;border-top:1px solid #dce3f4;font-size:11px;color:#66748d }
.map-route-steps { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none }
.map-route-steps li { position:relative;min-width:0;padding:8px 8px 8px 39px;background:#fff;border:1px solid #e0e6f4;border-radius:9px;line-height:1.38 }
.map-route-steps .n { position:absolute;left:9px;top:9px;display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:#e9eaff;color:#4f46e5;font-size:11px;font-weight:800 }
.map-route-steps b { display:block;font-size:12px;color:#243457 }
.map-route-steps small { display:block;margin-top:3px;color:#5b6881;font-size:11px }
.map-route-steps .route-skill-links { margin-top:5px }
.map-route-steps .route-skill-links a { font-size:10px;padding:2px 5px }
.map-shell[data-route] .node.route-faded { opacity:.19!important }
.map-shell[data-route] .node.route-current { opacity:1!important;filter:drop-shadow(0 3px 7px rgba(79,70,229,.22)) }
.map-shell[data-route] .node.route-current rect { stroke:#4f46e5!important;stroke-width:3.2!important }
.map-shell[data-route] .edge:not(.active) { opacity:.16!important }
.map-shell[data-route] .edge.active { opacity:1!important;stroke:#4f46e5!important;stroke-width:4!important }
.map-shell .node.is-focus { opacity:1!important }
.map-shell .stage-button.ctl-main.active { background:#4f46e5!important;border-color:#4f46e5!important;color:#fff!important }
.map-stage-title strong { font-size:16px }

/* Skill cards start with the exact deliverable and its repository location. */
.artifact-primer { display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:25px;margin:0 0 24px;padding:24px;background:linear-gradient(130deg,#eff4ff,#f1efff);border:1px solid #dbe2f5;border-radius:16px }
.artifact-primer h3 { margin:3px 0 8px;font:800 20px/1.4 var(--serif);color:#202e50 }
.artifact-primer p { margin:0;color:#4b5b76;font-size:13px;line-height:1.8 }
.artifact-primer ol { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:0;padding:0;list-style:none }
.artifact-primer li { display:flex;flex-direction:column;gap:2px;min-width:0;padding:8px 10px;background:#ffffffc7;border:1px solid #e2e7f3;border-radius:9px;font-size:11px;color:#5a6881;line-height:1.55 }
.artifact-primer li b { font-size:12px;color:#202e50 }
.artifact-primer code,.artifact-contract code { word-break:break-word }
.skills-grid { grid-template-columns:minmax(0,1fr);max-width:1000px }
.skill summary { padding:16px 20px }
.skill-body { padding:0 20px 20px }
.artifact-contract { display:grid;grid-template-columns:180px minmax(0,1fr);gap:17px;margin:18px 0;padding:16px;background:#f3f6ff;border:1px solid #d9e1f5;border-left:4px solid #6366f1;border-radius:11px }
.artifact-contract-head span { display:block;color:#4f46e5;font-size:10px;font-weight:800;letter-spacing:.1em }
.artifact-contract-head strong { display:block;margin-top:3px;font-size:16px;line-height:1.35;color:#202e50 }
.artifact-contract dl { display:grid;grid-template-columns:minmax(0,1fr);gap:9px;margin:0 }
.artifact-contract dl>div { display:grid;grid-template-columns:67px minmax(0,1fr);gap:8px }
.artifact-contract dt { font-weight:800;color:#303f60 }
.artifact-contract dd { margin:0;color:#394b6c;line-height:1.65 }
.teaching-fields { margin-top:0!important }

@media(max-width:760px) {
  .map-route-guide,.artifact-primer,.artifact-contract { grid-template-columns:1fr }
  .map-route-guide { padding:15px }
  .map-route-steps { grid-template-columns:1fr }
  .artifact-primer { padding:17px }
  .artifact-primer ol { grid-template-columns:1fr 1fr }
  .artifact-contract { gap:10px }
  .chapter-hero-home .hero-copy { padding-bottom:12px }
}
@media(max-width:480px) {
  .artifact-primer ol { grid-template-columns:1fr }
  .artifact-contract dl>div { grid-template-columns:1fr;gap:1px }
  .hero-path { gap:6px }
  .hero-path span { padding:5px 9px }
}