/* Distinction comes from hierarchy and composition, not a rainbow of colors. */
.chapter{position:relative;border-top:1px solid #cbd8e2;padding-top:35px;padding-bottom:35px}.chapter .story-heading{display:flex;align-items:center;gap:18px;margin:0 0 28px;padding:0 0 24px;border-bottom:0}.chapter-emblem{display:grid;place-items:center;flex-shrink:0;width:53px;height:56px;color:#4d7189;background:#e4edf3;border:1px solid #c0d2df;border-radius:12px}.chapter-symbol{width:25px;height:27px}.chapter-index-label{display:block;font-size:9px;letter-spacing:1.5px;line-height:1;color:#7892a4;margin-bottom:11px}.chapter .story-heading h2{font-size:33px;letter-spacing:-1px;line-height:1.1;font-weight:500;color:#294a61}.chapter .ux-board>h3.reason-label{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:16px;font-weight:500;line-height:1.3;letter-spacing:-.2px;color:#355971;margin:0 0 24px;padding:0}.reason-label>span{font-size:10px;font-weight:400;letter-spacing:0;line-height:1.3}.story-shot .image-title{font-size:15px;font-weight:500;letter-spacing:-.2px;color:#355871;line-height:1.4;margin-bottom:18px}.source-indicator{font-size:9px;font-weight:400;letter-spacing:.4px;padding:5px 8px;background:#fff9;border:1px solid #cbdbe7;border-radius:4px;color:#69879b;white-space:nowrap}.source-dot{display:none}.story-nav{border-bottom:1px solid #bbcdda;box-shadow:0 4px 15px #35567004}.story-nav a{border-radius:5px;padding:10px 13px;color:#647f92}.story-nav a[aria-current]{background:#dce8f1;color:#244e6b;box-shadow:inset 0 -2px #6e96b2}
/* 01: research notes on a paper-like background. */
.chapter#research{background:#f5f5f1;border-top-color:#d8dcd5}.chapter#research .story-heading{border-color:#d5dcd6}.chapter#research .chapter-emblem{background:#e9ede6;border-color:#cbd5c9;color:#6b8171;border-radius:50%}.chapter#research .chapter-index-label{color:#809180}.chapter#research .reason-pair{gap:24px}.chapter#research .reason-pair>.ux-board{border-color:#d6dfd6;box-shadow:0 6px 18px #3b57420a;background:#fff;border-radius:5px;padding:25px}.chapter#research .reason-label>span{background:#f1f3eb;border-color:#e0e4d6;color:#78856b}.chapter#research #persona{border-top:3px solid #a5b8af}.chapter#research #empathy{border-top:3px solid #bfc8b5}.chapter#research .quiet-empathy{gap:12px}.chapter#research .quiet-empathy>div{background:#f0f3f1;border-top-color:#c4d1c8;border-radius:4px}.chapter#research .quiet-empathy>div:nth-child(2),.chapter#research .quiet-empathy>div:nth-child(3){background:#eaf0ed;border-top-color:#9db6aa}.chapter#research #journey{background:transparent;border:0;border-top:1px solid #ccd8ce;border-radius:0;box-shadow:none;padding:23px 0 0;margin-bottom:0}.chapter#research #journey .reason-label{font-size:14px}.compact-journey li{border-color:#b8cbbc}.compact-journey li:before{background:#91ad9d}
/* 02: one connected architecture canvas. */
.chapter#structure{background:#edf3f7}.chapter#structure .chapter-emblem{border-radius:5px;background:#dce9f2;color:#587f9b}.chapter#structure #sitemap{background:none;border:0;border-radius:0;box-shadow:none;padding:0;margin:0}.chapter#structure .sitemap-board{background-color:#f8fbfd;background-image:radial-gradient(#bcd0de 1px,transparent 1px);background-size:16px 16px;border:1px solid #c5d7e4;border-radius:8px;padding:26px}.chapter#structure .tree-home{background:#4c728d;color:white;border:1px solid #456a83;box-shadow:0 4px 10px #41637a0d}.chapter#structure .page-tree>li>b{background:#e6eff6;color:#436e8a;border-color:#bdd3e4;border-radius:4px}.chapter#structure .page-tree ul li{background:#fbfdfe}
/* 03: source image first; the flow and sketch read as a workbench. */
.chapter#search{background:#fff}.chapter#search .chapter-emblem{background:#eef3f7;border-radius:13px}.chapter#search>.story-shot{background:#eef4f8;border-color:#c7dbe9;border-radius:9px}.chapter#search .compact-design-row{gap:0;border:1px solid #c9dce9;border-radius:9px;overflow:hidden;background:#f7fafc}.chapter#search #task-flow{background:#f0f5f9;border:0;border-right:1px solid #cfdfeb;border-radius:0;padding:24px;height:100%}.chapter#search #wireframe{background:#fff;border:0;border-radius:0;box-shadow:none;padding:24px}.chapter#search .compact-task li{background:white;border-color:#bfd4e3;box-shadow:0 3px 7px #36597005}.chapter#search .skeleton-screen{border-style:dashed;background:#fcfcfc;border-color:#bfcbd3}
/* 04: a framed result with its decision map below. */
.chapter#results{background:#eaf1f6}.chapter#results .chapter-emblem{background:#fff;border-color:#b8ccdc;color:#5e84a0;border-radius:4px}.chapter#results #ia{border:1px solid #bcd3e3;border-left:4px solid #83a8c1;background:white;border-radius:7px;padding:25px}.chapter#results .architecture-image{box-shadow:none}.chapter#results #user-flow{border:0;border-radius:0;background:none;box-shadow:none;padding:5px 0 0;margin-bottom:0}.chapter#results #user-flow .reason-label{font-size:14px}.chapter#results .compact-flow-origin{background:#fcfdfe;border-color:#b7cedf}.chapter#results .compact-flow-branches>div{background:#f8fbfd;border-color:#c6dbe9}
/* 05: a sequence of figure spreads rather than repeated artifact cards. */
.chapter#workspace{background:#e0e8ef}.chapter#workspace .story-heading{border-color:#bccfdd}.chapter#workspace .chapter-emblem{background:#cbdce9;color:#446c89;border-color:#b1c9dc;border-radius:10px}.chapter#workspace>.story-shot{background:none;border:0;border-radius:0;box-shadow:none;padding:0 0 24px;margin-top:26px;border-bottom:1px solid #bdcfdd}.chapter#workspace>.story-shot .image-title{font-size:17px;color:#315976}.chapter#workspace>.story-shot .image-wrap>img{border-color:#aabfd0;box-shadow:0 9px 23px #3659700e}.chapter#workspace .source-indicator{background:#f4f8fb;border-color:#bdd1e1}.chapter#workspace #blueprint{background:#f7fafc;border:1px solid #b7cede;border-radius:8px;padding:25px}.chapter#workspace .service-captions{color:#587d97}.chapter#workspace .service-interface{background:white;border-color:#bcd3e3}
/* 06: finished screens, a thin token strip, and an observation checklist. */
.chapter#validate{background:#fbfcfd}.chapter#validate .chapter-emblem{background:#e6eef5;color:#446e8b;border-radius:50%}.chapter#validate #prototype{border:0;border-radius:0;background:none;box-shadow:none;padding:0;margin:0 0 25px}.chapter#validate #prototype .screen-studies{padding:20px;background:#eaf1f7;border:1px solid #cbddea;border-radius:10px}.chapter#validate #design-system{border:0;border-top:1px solid #cedeea;border-bottom:1px solid #cedeea;border-radius:0;background:none;box-shadow:none;padding:21px 0;margin-block:25px}.chapter#validate #design-system .reason-label{font-size:14px}.chapter#validate .quiet-system>div{background:#f0f5f8;border:0;border-radius:5px;padding:17px}.chapter#validate #testing{border:0;border-radius:0;padding:0;background:none;box-shadow:none}.chapter#validate .visual-test-targets>div{background:#fff;border:1px solid #cddfeb;border-top:3px solid #a1bdd0;border-radius:5px;box-shadow:none}.chapter#validate .visual-test-targets .board-glyph{background:#f2f7fa;box-shadow:none}.chapter#validate .study-strip{background:#f1f5f8;padding:16px 20px;border:0;border-radius:5px;margin-top:18px}.story-resources{margin-top:24px}
@media(max-width:760px){.chapter .story-heading{gap:13px;padding-bottom:20px;margin-bottom:23px}.chapter-emblem{width:40px;height:44px;border-radius:9px}.chapter-symbol{width:21px;height:23px}.chapter-index-label{font-size:8px;letter-spacing:1.1px;margin-bottom:8px}.chapter .story-heading h2{font-size:26px;letter-spacing:-.7px}.chapter .ux-board>h3.reason-label{font-size:15px;gap:8px;margin-bottom:20px}.reason-label>span{font-size:9px}.story-shot .image-title,.chapter#workspace>.story-shot .image-title{font-size:13px;gap:10px;letter-spacing:-.1px}.source-indicator{font-size:8px;padding:4px 6px}.story-nav a{font-size:10px;padding:8px 4px}.chapter#research .reason-pair>.ux-board{padding:20px}.chapter#research .reason-pair{gap:19px}.chapter#research #journey{padding-top:21px}.chapter#structure .sitemap-board{padding:18px 14px}.chapter#search #task-flow,.chapter#search #wireframe{padding:20px}.chapter#search .compact-design-row{gap:0}.chapter#search #task-flow{border-right:0;border-bottom:1px solid #cfdfeb}.chapter#results #ia{padding:18px;border-left-width:3px}.chapter#results #user-flow{padding-top:3px}.chapter#workspace>.story-shot{padding-bottom:21px;margin-top:24px}.chapter#workspace #blueprint{padding:19px}.chapter#validate #prototype .screen-studies{padding:13px;gap:22px}.chapter#validate #design-system{padding:20px 0}.chapter#validate .quiet-system>div{padding:15px}.chapter#validate .study-strip{padding:16px}.chapter#validate #testing{margin-top:20px}}