.guide-page{--guide-paper:#ebe8df;--guide-ink:#171916;--guide-blue:#0047ab;--guide-line:#494b44;background:#0c0d0b}.guide-page main{max-width:1440px;margin:auto}.guide-page h1{font-size:clamp(36px,4.5vw,66px);line-height:1.08;letter-spacing:-.045em}.guide-page h2{font-size:clamp(25px,2.4vw,36px);letter-spacing:-.035em;line-height:1.15}.guide-page h3{font-size:23px;line-height:1.2;letter-spacing:-.025em}.guide-kicker{font-size:11px;font-weight:bold;letter-spacing:.13em;text-transform:uppercase;margin-bottom:18px}.guide-hub-hero{display:grid;grid-template-columns:1.15fr 1fr;gap:50px;align-items:center;padding:80px 6%;background:var(--guide-paper);color:var(--guide-ink)}.guide-hub-hero h1{font-size:clamp(55px,7vw,102px);margin-bottom:28px}.guide-hub-hero p:not(.guide-kicker){font-size:23px;max-width:580px;margin-bottom:20px}.guide-hub-hero .guide-sub{font-size:16px!important;color:#5b5d52}.guide-hub-hero .guide-art{color:var(--guide-blue);width:100%;background:#deddd3;border:1px solid #c3c6b8;border-radius:100% 100% 0 0;padding:20px}.guide-page .button{background:var(--guide-blue);color:white;padding:15px 22px;display:inline-flex;align-items:center;gap:12px;border:1px solid transparent;min-height:48px;font-size:14px}.guide-page .button.secondary{background:transparent;color:inherit;border-color:currentColor}.guide-library,.guide-next{padding:64px 6%}.guide-browse-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:28px}.guide-search{font-size:12px;display:flex;flex-direction:column;gap:8px;min-width:280px}.guide-search input{padding:15px;border:1px solid #797d70;background:#1c1e19;color:#ebe8df;min-height:50px;border-radius:0}.guide-filters{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0}.guide-filters button{padding:9px 13px;background:#1c1e19;color:#e6e5db;border:1px solid #41463a;border-radius:3px;font-size:12px;min-height:40px}.guide-filters button[aria-pressed=true]{background:#ebe8df;color:#171916;border-color:#ebe8df}.guide-filters span{opacity:.6;margin-left:5px}.guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:25px 0}.guide-card{display:flex;flex-direction:column;gap:26px;padding:26px;border:1px solid #42463c;background:#191c16;min-height:240px;color:#ebe8df;transition:background .15s,border-color .15s}.guide-card:hover{background:#23281e;border-color:#9fb2ce}.guide-card[hidden]{display:none}.guide-card-top,.guide-card-bottom{display:flex;justify-content:space-between;gap:12px;font-size:11px;color:#b0b7a6}.guide-card h3{font-size:22px}.guide-card-bottom{margin-top:auto;color:#b6cefa}.guide-title{padding:50px 6% 64px;background:var(--guide-paper);color:var(--guide-ink);border-bottom:1px solid #bfc3b2}.guide-crumb{display:flex;gap:12px;font-size:12px;margin-bottom:36px}.guide-crumb a{text-decoration:underline;text-underline-offset:4px}.guide-title>.guide-kicker{color:#0047ab}.guide-title h1{max-width:1030px;margin:0 0 28px}.guide-lead{max-width:860px;font-size:19px;line-height:1.65;color:#3e4336}.guide-title-actions{display:flex;align-items:center;gap:20px;margin-top:28px;flex-wrap:wrap}.guide-save{border:0;border-bottom:1px solid #757c68;background:transparent;color:#171916;padding:12px 0;font-size:13px}.guide-save[aria-pressed=true]{color:#0047ab}.guide-reading-layout{display:grid;grid-template-columns:240px minmax(0,780px);justify-content:center;gap:70px;padding:64px 6%}.guide-toc{align-self:start;position:sticky;top:24px;font-size:13px;color:#abb29e}.guide-toc summary{font-size:12px;text-transform:uppercase;font-weight:bold;letter-spacing:.1em;margin-bottom:18px;cursor:pointer;color:#ebe8df}.guide-toc a{display:block;padding:9px 0;border-bottom:1px solid #30362a;line-height:1.4}.guide-toc a:hover{color:#b5cfff}.guide-body{min-width:0;font-size:17px;line-height:1.8;color:#d5d8cf}.guide-body>p{margin:0 0 22px}.guide-body>h2{color:#ebe8df;margin:50px 0 20px;scroll-margin-top:24px}.guide-body>h2:first-child{margin-top:0}.guide-body>h3{margin:32px 0 16px}.guide-body a:not(.button){color:#aac8ff;text-decoration:underline;text-underline-offset:4px}.guide-body ul,.guide-body ol{padding-left:24px;margin:20px 0}.guide-body li{padding-left:6px;margin-bottom:12px}.guide-body strong{color:#f0f0e8}.guide-table{overflow-x:auto;margin:26px 0;border:1px solid #4b5140}.guide-table table{width:100%;border-collapse:collapse;min-width:420px;font-size:14px}.guide-table td,.guide-table th{padding:14px 18px;text-align:left;border-bottom:1px solid #414738}.guide-table th{background:#282e22;color:#ebe8df}.guide-experiment{margin:40px 0;padding:30px;background:#ebe8df;color:#171916;border-top:4px solid #0047ab;scroll-margin-top:24px;border-radius:0 0 12px 12px}.experiment-heading h2{font-size:30px;margin:8px 0 14px;color:#171916}.experiment-heading p:not(.guide-kicker){font-size:15px;line-height:1.6;color:#4c5242}.experiment-heading .guide-kicker{color:#0047ab;margin:0}.experiment-status{font-size:12px!important;line-height:1.6;min-height:20px;margin:20px 0!important;color:#505842}.guide-experiment a.experiment-lab{font-size:13px;color:#0047ab;display:inline-block;border-top:1px solid #c0c7b3;padding-top:14px;width:100%}.experiment-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:24px 0}.experiment-controls label{display:flex;flex-direction:column;gap:8px;font-size:12px;font-weight:600;min-width:0}.experiment-controls input,.experiment-controls select{width:100%;min-width:0;accent-color:#0047ab}.experiment-controls select,.experiment-controls input[type=number]{min-height:44px;background:#fffef8!important;color:#171916;border:1px solid #9ba48b;padding:8px}.experiment-controls input[type=range]{min-height:32px;cursor:ew-resize}.experiment-controls output{font-variant-numeric:tabular-nums;color:#0047ab}.experiment-actions{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}.experiment-actions button{min-height:44px;padding:10px 16px;background:#0047ab;color:white;border:1px solid #0047ab;font-size:13px}.experiment-actions button[data-stop],.experiment-actions button[data-reset]{background:transparent;color:#171916;border-color:#7a846b}.experiment-actions button[aria-pressed=true]{background:#171916}.experiment-display{display:block;width:100%;height:auto;background:#171b14;color:#c3d5a6;margin:24px 0;border-radius:6px}.experiment-display text{font-family:Arial;font-size:13px;fill:#dbe2d0}.experiment-readout{padding:18px;background:#d9dfce;border-left:3px solid #0047ab;font-size:14px;line-height:1.6;margin:18px 0}.experiment-readout strong{color:#171916!important}.lesson-grid-scroll{overflow:auto;padding-bottom:8px;margin:24px 0}.lesson-grid{display:grid;grid-template-columns:66px repeat(16,minmax(23px,1fr));gap:3px;min-width:510px}.lesson-grid label{font-size:11px;display:flex;align-items:center}.lesson-grid button{padding:0;min-height:36px;background:#c9d0bb;border:1px solid #aab49b;cursor:pointer;color:#3b4930;border-radius:3px;font-size:10px}.lesson-grid button:nth-of-type(4n+1){border-left:2px solid #667457}.lesson-grid button[aria-pressed=true]{background:#0047ab;color:white;border-color:#0047ab}.lesson-grid button.is-playing{outline:2px solid #171916;outline-offset:1px}.guide-keys{display:flex;gap:3px;margin:24px 0;height:120px}.guide-keys button{flex:1;border:1px solid #aab49b;background:#fffef8;color:#171916;padding:4px;font-size:11px;display:flex;align-items:end;justify-content:center}.guide-keys button.black-key{background:#23281e;color:#fff;height:82px}.guide-keys button.is-note{background:#0047ab;color:white}.guide-plan{display:grid;gap:12px;margin:24px 0}.guide-plan label{display:flex;align-items:start;gap:12px;padding:14px;background:#dfe3d5;font-size:14px;line-height:1.5}.guide-plan input{width:20px;height:20px;accent-color:#0047ab;flex:none;margin-top:1px}.guide-session{border-top:1px solid #4c5540;margin-top:48px;padding-top:30px}.guide-session h2{margin:10px 0 20px}.guide-session p{font-size:15px}.guide-session label{display:block;font-size:13px;margin:24px 0 10px}.guide-session textarea{width:100%;padding:18px;background:#20251b;color:#ebe8df;border:1px solid #59634a;font-size:16px;line-height:1.6}.session-actions{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}.session-actions .button{font-size:12px;padding:12px}.guide-next{background:#151911;border-top:1px solid #4c5540}.guide-next .guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.guide-next>a{display:inline-block;margin-top:20px;text-decoration:underline}.order-list{display:grid;gap:8px;list-style:none!important;padding:0!important}.order-list li{display:flex;align-items:center;gap:10px;background:#d9dfce;padding:12px!important;margin:0!important;font-size:13px}.order-list li span{flex:1}.order-list button{min-width:36px;min-height:36px;background:#fffef8;color:#171916;border:1px solid #abb49e}.guide-page .site-header nav{gap:clamp(14px,2vw,34px)}@media(max-width:1000px){.guide-reading-layout{grid-template-columns:190px minmax(0,1fr);gap:30px}.guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.guide-hub-hero{gap:20px}.guide-browse-heading{align-items:stretch;flex-direction:column}}@media(max-width:760px){.guide-hub-hero{grid-template-columns:1fr;padding:45px 6%}.guide-art{max-height:180px;border-radius:0!important}.guide-title{padding-top:28px}.guide-reading-layout{display:block;padding-top:30px}.guide-toc{position:static;margin-bottom:35px}.guide-toc details{border:1px solid #4c5540;padding:18px}.guide-toc a{font-size:12px}.guide-body{font-size:16px}.guide-experiment{padding:22px 16px;margin:30px -8px}.guide-grid,.guide-next .guide-grid{grid-template-columns:1fr}.guide-card{min-height:190px}.guide-library,.guide-next{padding-top:40px}.guide-filters{max-height:190px;overflow:auto}.guide-search{min-width:0}.guide-lead{font-size:17px}.experiment-controls{gap:14px}.experiment-heading h2{font-size:26px}.guide-crumb{font-size:11px}.guide-title-actions{gap:15px}.guide-page .site-header nav{gap:16px}}@media(prefers-reduced-motion:reduce){.guide-card{transition:none}}

/* Original instructional artwork, shared by cards and their guide. */
.guide-card-image{display:block;width:calc(100% + 52px);max-width:none;height:auto;aspect-ratio:1200/630;object-fit:cover;margin:-26px -26px 0;border-bottom:1px solid #394332}.guide-card{overflow:hidden}.guide-cover{margin:40px 0 0;max-width:1000px}.guide-cover img{display:block;width:100%;height:auto;border-radius:4px}.guide-cover figcaption{font-size:13px;line-height:1.5;color:#50564b;margin-top:12px}.guide-title:has(.guide-cover){padding-bottom:40px}@media(max-width:600px){.guide-cover{margin-top:28px}.guide-card-image{width:calc(100% + 52px)}}

.guide-card[hidden]{display:none!important}.guide-pagination{display:flex;flex-wrap:wrap;gap:8px;margin:36px 0 0}.guide-pagination button{min-width:44px;min-height:44px;padding:10px 14px;border:1px solid #606657;background:#191c16;color:#ebe8df;cursor:pointer}.guide-pagination button[aria-current=page]{background:#ebe8df;color:#111;border-color:#ebe8df;font-weight:700}.guide-pagination button:disabled{opacity:.35;cursor:default}.guide-pagination button:focus-visible{outline:3px solid #709fea;outline-offset:3px}#browse-title{scroll-margin-top:120px}.guide-search{min-width:min(100%,320px)}

/* Warm off-white guide cards and covers. */
.guide-card{background:#ebe8df;color:#171c17;border-color:#c9c9bd}.guide-card:hover{background:#e4e1d7;border-color:#0047ab}.guide-card-top{color:#50584b}.guide-card-bottom{color:#0047ab}.guide-card-image{background:#ebe8df;border-bottom-color:#c9c9bd}

/* Supplied instructional diagrams sit immediately after their matching explanation. */
.guide-instruction-figure{margin:32px 0 40px;border:1px solid #c9c9bd;background:#ebe8df;color:#171c17;overflow:hidden}
.guide-instruction-figure .guide-figure-image{display:block;background:#f8fafc;line-height:0;border:0}
.guide-instruction-figure img{display:block;width:100%;height:auto;max-width:100%;margin:0;object-fit:contain}
.guide-instruction-figure figcaption{padding:18px 22px;font-size:14px;line-height:1.65;color:#444b40}
.guide-body .guide-instruction-figure figcaption a{display:inline-block;color:#0047ab;text-decoration:underline;text-underline-offset:3px;margin-top:8px}
.guide-instruction-figure a:focus-visible{outline:3px solid #0047ab;outline-offset:-3px}
@media(max-width:600px){.guide-instruction-figure{margin:24px 0 32px}.guide-instruction-figure figcaption{padding:14px 16px;font-size:13px}.guide-body .guide-instruction-figure figcaption a{display:block}}

/* Article hero: introduction at left, thumbnail at right. */
@media(min-width:900px){
 .guide-title:has(.guide-cover){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:48px;align-items:start;padding-bottom:56px}
 .guide-title>.guide-crumb{grid-column:1/-1;grid-row:1}
 .guide-title>.guide-kicker{grid-column:1;grid-row:2}
 .guide-title>h1{grid-column:1;grid-row:3;font-size:clamp(32px,3.3vw,48px);line-height:1.08;overflow-wrap:break-word;margin-bottom:22px}
 .guide-title>.guide-lead{grid-column:1;grid-row:4;font-size:17px;line-height:1.65}
 .guide-title>.guide-title-actions{grid-column:1;grid-row:5;margin-top:24px}
 .guide-title>.guide-cover{grid-column:2;grid-row:2/6;align-self:center;width:100%;min-width:0;max-width:none;margin:0}
}