/* Guitar Lefty's shared colour and navigation layer. Diagram artwork retains its original colours. */
:root {
    --ink: #203e38;
    --sea: #1b6255;
    --mist: #e4eee7;
    --gold: #f3cd83;
    --line: #d8ded2;
    --paper: #f4f1e8;
    --forest: #163f38;
    --mint: #e1eee4;
    --lavender: #eae7f3;
    --sand: #f5e6ca;
    --peach: #f3e2d8;
    --link: #0756a3;
    --link-hover: #00396f;
}
html { scroll-behavior: smooth; scroll-padding-top: 158px; }
body.site-shell { background: var(--paper); color: var(--ink); }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 1200; padding: 12px 20px; background: var(--gold); color: var(--forest); border-radius: 8px; }
.skip-link:focus { top: 10px; }
#main-content:focus { outline: none; }
#cookieConsent { background: #eee3cb; border: 0; border-radius: 0; color: #334a3e; padding: 10px 24px; }
#cookieConsent a { color: var(--link); text-decoration: underline; text-underline-offset: 4px; font-weight: 600; }
#cookieConsent a:hover { color: var(--link-hover); text-decoration-thickness: 2px; }
.site-nav { position: sticky; top: 0; z-index: 100; background: var(--forest); padding: 15px 0; border-bottom: 1px solid #ffffff20 !important; }
.site-nav .navbar-brand { font-size: 1.1rem; letter-spacing: .09em; color: #fff8e9; }
.site-nav .navbar-brand i { color: var(--gold); margin-left: 8px; }
.site-nav .navbar-brand { padding: 0; }
.brand-logo { display: block; width: 200px; height: 53px; }
.cookie-consent-status:not(:empty) { display: block; margin-top: 8px; }
.site-nav .nav-link { color: #e6eee7; white-space: nowrap; border-radius: 7px; padding: 9px 13px !important; font-size: .88rem; }
.site-nav .nav-link:hover, .site-nav .nav-link:focus-visible { color: white; background: #ffffff12; }
.site-nav .nav-link.active { color: var(--gold); background: #ffffff0d; }
.site-nav .navbar-nav .nav-practice { margin-left: 14px; background: var(--gold); color: #193e35; font-weight: 650; }
.site-nav .navbar-nav .nav-practice:hover, .site-nav .navbar-nav .nav-practice:focus-visible, .site-nav .navbar-nav .nav-practice.active { background: #ffe0a2; color: #193e35; }
.site-nav .nav-practice span { margin-left: 10px; }
.site-nav .navbar-toggler { border: 1px solid #a9c1b6; padding: 8px; }
.site-nav .scale-menu { min-width: 450px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #fffcf4; box-shadow: 0 16px 36px #102d3226; }
.site-nav .scale-menu.show { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.scale-menu .dropdown-item { padding: 10px 12px; color: var(--ink); border-radius: 6px; font-size: .88rem; }
.scale-menu .dropdown-item:hover, .scale-menu .dropdown-item:focus { color: var(--forest); background: var(--mint); }
.scale-menu .scale-menu-all { grid-column: 1 / -1; border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 5px; font-weight: 700; }
.site-hero { position: relative; overflow: hidden; color: #fffcf2; background: linear-gradient(100deg, #123e37f7 8%, #173e3adb 45%, #173e3a38 100%), url('/media/general/guitarist.jpg') center 48% / cover; border-bottom: 5px solid var(--gold); }
.hero-content { position: relative; padding-top: 65px; padding-bottom: 69px; }
.hero-eyebrow { display: block; color: #f4d99f; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; margin-bottom: 20px; }
.site-hero h1 { max-width: 790px; color: #fffcf2; font-size: clamp(2rem, 4.5vw, 3.65rem); font-weight: 600; line-height: 1.12; letter-spacing: -.035em; margin: 0; }
.hero-description { color: #e1ebe0; max-width: 630px; font-size: 1.12rem; line-height: 1.7; margin: 22px 0 0; }
.page-inner .hero-content { padding-top: 39px; padding-bottom: 43px; }
.page-inner .site-hero h1 { font-size: clamp(1.9rem, 3.5vw, 2.8rem); }
.page-inner .hero-eyebrow { margin-bottom: 12px; }
.page-inner .hero-description { margin-top: 14px; }
.learning-page { padding-top: 36px; padding-bottom: 56px; }
.learning-page h2, .learning-page h3 { color: var(--ink); font-weight: 650; letter-spacing: -.025em; }
.learning-page p, .learning-page li { line-height: 1.7; }
.learning-page a:not(.btn):not(.learning-card):not(.article-card-image) { color: var(--link); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-skip-ink: auto; }
.learning-page a:not(.btn):not(.learning-card):not(.article-card-image):is(:hover,:focus-visible) { color: var(--link-hover); text-decoration-thickness: 2px; }
.site-shell .content-block a { color: var(--link); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.site-shell .content-block a:is(:hover,:focus-visible) { color: var(--link-hover); text-decoration-thickness: 2px; }
.site-shell .content-block a:focus-visible { outline: 3px solid var(--link); outline-offset: 4px; }
.learning-page > nav:not(.lesson-nav) { color: #5e6e61; padding: 10px 0; margin-bottom: 20px; }
.learning-card, .learning-panel { border-radius: 15px; border-color: #d8ded2; box-shadow: none; }
.learning-panel { background: #fcfaf3; padding: 30px; margin-bottom: 26px; }
.learning-grid { gap: 22px; margin-bottom: 26px; }
.learning-grid > *, .pattern-grid > * { min-width: 0; }
.article-columns { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:36px; align-items:start; }
.article-body { min-width:0; padding:30px; border:1px solid var(--line); border-radius:14px; background:#fcfaf3; }
.article-body p, .article-body li { font-size:1.03rem; line-height:1.85; }
.article-body h2 { margin-top:36px; }
.article-body section:first-of-type h2 { margin-top:12px; }
.article-body figure { margin:28px 0; padding:14px; border-radius:10px; border:1px solid var(--line); background:white; }
.article-body figcaption { font-size:.8rem; color:#60725d; margin-top:12px; }
.article-intro { font-size:1.16rem!important; color:#355240; }
.article-meta { color:#65735f; font-size:.85rem; }
.article-contents { display:flex; flex-direction:column; gap:12px; background:var(--sand); padding:22px; border-radius:10px; margin:26px 0; }
.article-contents strong { text-transform:uppercase; letter-spacing:.08em; font-size:.75rem; }
@media(min-width:1100px) { .article-contents { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 24px; } .article-contents strong { grid-column:1/-1; } }
.article-sidebar { min-width:0; position:sticky; top:110px; }
.article-sidebar .learning-panel { padding:24px; }
.article-sidebar h2 { font-size:1.3rem; }
.article-resource-links { display:flex; flex-direction:column; gap:14px; font-size:.85rem; }
.article-sidebar .ad-placement { margin-top:0; }
.article-topic-links { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.article-topic-links a { padding:8px 14px; border:1px solid #b6c8b9; border-radius:30px; background:#fcfaf3; font-size:.85rem; }
.article-topic-section { margin:48px 0; }
.article-card { display:flex; flex-direction:column; }
.site-hero.site-hero--article { background:var(--forest); }
.article-hero-content { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:38px; align-items:center; }
.article-hero-image { display:block; width:100%; height:auto; border-radius:12px; border:1px solid #ffffff30; }
.page-inner .site-hero--article h1 { font-size:clamp(1.8rem,2.8vw,2.6rem); }
.article-hero-content .hero-description { font-size:1rem; }
.learning-grid .article-card { padding:0 0 26px; overflow:hidden; }
.article-card-image { display:block; margin:0 0 24px; }
.article-card-image img { display:block; width:100%; height:auto; }
.article-card > :not(.article-card-image) { margin-left:26px; margin-right:26px; }
.article-card .article-card-link { padding-top:16px; }
.affiliate-section { padding-top:0; padding-bottom:0; }
.affiliate-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:22px; margin-top:24px; }
.affiliate-item { padding:22px; background:#fcfaf3; border:1px solid #dfd2b8; border-radius:10px; }
.affiliate-item h3 { font-size:1.1rem; line-height:1.45; }
.affiliate-item p { font-size:.9rem; }
.affiliate-item a { font-weight:600; text-decoration:underline; }
.affiliate-item a span { font-size:.75rem; font-weight:400; }
.affiliate-disclosure { font-size:.85rem; color:#4d5949; padding-top:12px; border-top:1px solid #dfd2b8; }
@media(max-width:799px) { .article-hero-content { grid-template-columns:1fr; gap:26px; } .article-hero-image { max-width:640px; } }
.article-card h3 { font-size:1.3rem; line-height:1.45; margin:16px 0; }
.article-card h3 a { color:var(--link); }
.article-card-link { margin-top:auto; padding-top:16px; font-weight:600; }
.article-table-wrap { max-width:100%; overflow-x:auto; margin:24px 0; }
.article-body table { width:100%; border-collapse:collapse; font-size:.9rem; line-height:1.6; }
.article-body th,.article-body td { padding:12px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; }
.article-body th { background:var(--mint); color:#294d3c; }
.article-body tr:nth-child(even) td { background:#f3f0e6; }
.article-body pre { max-width:100%; overflow-x:auto; white-space:pre; background:#e9eee6; padding:18px; color:#244a3b; border-radius:8px; line-height:1.7; font-size:.86rem; }
.article-body img { display:block; width:100%; height:auto; }
.article-body h2 { scroll-margin-top:0; }
.article-body h3 { font-size:1.25rem; margin:30px 0 14px; }
.article-body a { text-underline-offset:3px; }
.article-body p a,.article-body li a { text-decoration:underline; }
.article-related { margin-top:36px; padding-top:12px; border-top:1px solid var(--line); }
.article-editorial-note { font-size:.8rem!important; color:#65735f; margin-top:30px; }
.article-chord-example { max-width:250px; margin:24px auto; text-align:center; }
.article-chord-example svg { width:220px; max-width:100%; height:auto; }
@media(hover:none),(pointer:coarse),(max-height:650px) { .article-sidebar { position:static; } }
@media print { .article-columns { display:block; } .article-sidebar,.article-contents,.article-topic-links { display:none; } .article-body { padding:0; border:0; } .article-body h2,.article-body figure { break-inside:avoid; } }
@media print { .affiliate-section { display:none; } }
@media(max-width:1099px) { .article-columns { grid-template-columns:minmax(0,1fr); } .article-sidebar { max-width:100%; position:static; } }
@media(max-width:640px) { .article-body { padding:22px; } }
.learning-grid > .learning-card, .learning-grid > .learning-panel { --card-accent: #39765c; background: var(--mint); border-color: #c3d9c9; border-top: 4px solid var(--card-accent); }
.learning-grid > .learning-card:nth-child(3n+2), .learning-grid > .learning-panel:nth-child(3n+2) { --card-accent: #75648d; background: var(--lavender); border-color: #d1c9e0; }
.learning-grid > .learning-card:nth-child(3n), .learning-grid > .learning-panel:nth-child(3n) { --card-accent: #aa6548; background: var(--peach); border-color: #e1c9bb; }
.learning-grid > .learning-panel { margin-bottom: 0; }
.learning-card { position: relative; padding: 28px; }
a.learning-card { padding-top: 44px; }
a.learning-card::after { content: '↗'; position: absolute; top: 14px; right: 18px; color: var(--card-accent); font-size: 1.25rem; }
.learning-card p { color: #45594f; }
.learning-card:hover { box-shadow: 0 10px 25px #23453810; color: #164b3e; }
.learning-card h2 { font-size: 1.38rem; }
.eyebrow { color: #356649; font-size: .7rem; letter-spacing: .14em; }
.learning-card .eyebrow { color: var(--card-accent); }
.learning-panel.tone-mint { background: var(--mint); border-color: #c4d8c9; }
.learning-panel.tone-sand { background: var(--sand); border-color: #e2cfaa; }
.learning-panel.tone-lavender { background: var(--lavender); border-color: #d3cce1; }
.home-start { position: relative; background: linear-gradient(120deg, #f7e2b9, #f8edda); border: 1px solid #dfcba6; border-left: 6px solid #bb8140; padding: 34px 38px; }
.home-start h2 { max-width: 670px; font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.15; }
.home-start .eyebrow { color: #78532b; }
.home-start .intro { max-width: 810px; font-size: 1.05rem; }
.site-shell .btn { border-radius: 7px; font-weight: 600; font-size: .9rem; padding: 11px 18px; }
.site-shell .btn-primary { background: #1d6554; border-color: #1d6554; color: white; }
.site-shell .btn-primary:hover, .site-shell .btn-primary:focus { background: #124b3e; border-color: #124b3e; }
.site-shell .btn-outline-primary { border-color: #406e5c; color: #1e5845; background: transparent; }
.site-shell .btn-outline-primary:hover, .site-shell .btn-outline-primary:focus { background: #1d6554; border-color: #1d6554; color: white; }
.site-shell .btn-gold, .lesson-summary .btn-primary { background: var(--gold); border-color: var(--gold); color: #203f34; }
.site-shell .btn-gold:hover, .lesson-summary .btn-primary:hover { background: #ffe0a2; border-color: #ffe0a2; color: #203f34; }
.tool-controls { background: #dce7db; border: 1px solid #c9d9c9; border-radius: 10px; padding: 18px; margin-top: 22px; gap: 15px; }
.tool-controls label { color: #2b4f3c; font-size: .82rem; }
.tool-controls select, .tool-controls input { border-color: #97ad99; background: #fffef9; color: #213f36; border-radius: 7px; }
.tool-controls select { min-width: 125px; }
.tool-controls input[type=checkbox], .tool-controls input[type=range] { accent-color: #1d6554; }
.tool-controls input[type=range] { padding: 4px; background: transparent; border: none; }
.tool-controls .btn { align-self: end; }
.tool-status:not(:empty) { background: #dce8da; color: #2e563f; padding: 12px 16px; border-radius: 8px; margin-top: 14px; border-left: 3px solid #648d62; }
.fret-scroll { background: #fffcf5; border: 1px solid #d5ddd3; border-radius: 12px; padding: 10px 6px; }
.fret-svg { border-radius: 9px; }
.lesson-summary { padding: 32px; background: var(--forest); color: #e5eee3; border: 1px solid #123b33; gap: 38px; }
.lesson-summary h2 { color: #fff9e9; font-size: 1.9rem; }
.lesson-summary .eyebrow { color: var(--gold); }
.lesson-summary p:last-child { margin-bottom: 0; color: #d5e1d4; }
.note-line { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 16px; }
.scale-note { display: inline-grid; place-items: center; min-width: 43px; height: 43px; padding: 0 10px; border-radius: 8px; background: #ffffff12; border: 1px solid #ffffff35; color: #fff7e6; font-size: 1rem; font-weight: 600; }
.scale-note:first-child { color: #243e2d; background: var(--gold); border-color: var(--gold); }
.lesson-summary .btn-outline-primary { color: #fff4db; border-color: #a6bd9e; }
.lesson-summary .btn-outline-primary:hover { background: #ffffff13; color: #fff4db; }
.lesson-summary .lesson-actions a:not(.btn) { color: #f4dba7; }
.lesson-summary .lesson-actions a:not(.btn):is(:hover,:focus-visible) { color: #fff1cd; }
.lesson-nav { position: sticky; top: 79px; z-index: 12; display: flex; align-items: center; gap: 6px; overflow-x: auto; white-space: nowrap; padding: 10px 12px; margin: 0 0 26px !important; border: 1px solid #d1d8c9; border-radius: 9px; background: #f9f7edf5; box-shadow: 0 5px 15px #1c3c3110; }
.lesson-nav span { font-size: .72rem; text-transform: uppercase; font-weight: 700; letter-spacing: .05em; padding: 0 12px 0 4px; color: #586651; }
.lesson-nav a { font-size: .8rem; padding: 8px 13px; border-radius: 6px; }
.lesson-nav a:hover, .lesson-nav a:focus { background: var(--mint); }
.pattern-grid { gap: 20px; }
.pattern-grid figure { background: #fffdf7; border: 1px solid #d8cebb; border-radius: 12px; padding: 15px; }
.pattern-grid figcaption { margin: 0 0 14px; font-size: .88rem; color: #5d523b; }
.zoom-trigger { margin-top: 14px; }
.chord-tile { background: #f9f7ed; border: 1px solid #d8d1e2; padding: 18px 12px; }
.chord-tile h3 { color: #3a4b3e; }
.chord-tile p { font-size: .85rem; }
.chord-tile .chord-svg, .learning-card .chord-svg { border: 1px solid #d9e0d6; border-radius: 12px; }
.learning-page .chord-svg--horizontal { width: 100%; max-width: 330px; height: auto; }
.chord-level-section { margin: 38px 0; }
.chord-level-label { display: block; color: #405a4e; font-size: .75rem; font-weight: 600; margin-bottom: 18px; }
.chord-library-card h3 { font-size: 1.4rem; }
.chord-library-controls .tool-controls { margin-top: 0; }
.chord-library-controls input[type=search] { width: min(100%, 260px); }
.chord-library-controls p:last-child { margin-bottom: 0; font-size: .9rem; }
.chord-library-card[hidden], .chord-level-section[hidden], [data-chord-empty][hidden] { display: none; }
.chord-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 24px; align-items: baseline; }
.chord-facts dt { color: #405a4e; }
.chord-facts dd { margin: 0; overflow-wrap: anywhere; }
.download-links { gap: 10px; }
.download-links a { display: flex; align-items: center; padding: 13px 16px; min-height: 48px; border: 1px solid #d0d9c9; border-radius: 8px; background: #fffdf4; font-size: .9rem; font-weight: 600; }
.download-links a:hover { background: var(--mint); }
.learning-page > details.learning-panel:nth-of-type(3n+1) { background: var(--sand); }
.learning-page > details.learning-panel:nth-of-type(3n+2) { background: var(--mint); }
.learning-page > details.learning-panel:nth-of-type(3n) { background: var(--lavender); }
.learning-panel details { border-top: 1px solid #d3d9ca; }
.learning-panel details summary { padding: 18px 0; color: #2b5141; }
.learning-panel details summary::marker, details.learning-panel summary::marker { color: #517654; }
.practice-clock { display: inline-block; margin: 8px 0; padding: 10px 22px; border-radius: 10px; color: var(--forest); background: var(--sand); font-size: 2.8rem; line-height: 1.3; letter-spacing: -.04em; }
.practice-stage { padding: 24px; background: #204f43; color: #e9f0e0; border-left: 5px solid var(--gold); }
.practice-stage h3 { margin-top: 0; color: #fff4d6; }
.practice-stage p { margin-bottom: 0; }
.progress-track { background: #d5ddcd; height: 10px; }
.progress-fill { background: #4f835b; }
.scale-tab { background: #213f38; color: #f9f2df; padding: 22px; border-left: 4px solid var(--gold); }
[data-side] { padding: 22px; border: 1px solid #c8d9c8; border-radius: 12px; background: var(--mint); min-width: 0; }
[data-side="1"] { background: var(--lavender); border-color: #d2cae0; }
[data-side] .tool-controls { padding: 0; border: 0; background: transparent; margin-top: 0; }
.note-pill { background: #f7f6ee; color: #3b5548; border: 1px solid #d2dbc9; font-size: .85rem; }
.note-pill.shared { background: var(--gold); border-color: #d9b46a; color: #4b3916; }
.learning-page .intro { color: #425947; }
.site-footer { background: #163b34; color: #d6e5d3; border-top: 5px solid #688662; }
.site-footer .footer-nudge { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding-bottom: 36px; margin-bottom: 34px; border-bottom: 1px solid #ffffff25; }
.footer-nudge .eyebrow { color: var(--gold); }
.footer-nudge h2 { color: #fff4df; font-size: 1.9rem; letter-spacing: -.025em; }
.footer-nudge p { margin-bottom: 0; color: #c4d5c1; }
.footer-nudge .btn { flex-shrink: 0; }
.site-footer .text-info { color: #edd49f !important; }
.site-footer .text-muted { color: #adc4ad !important; }
.site-footer .text-white { color: #e3eddc !important; }
.site-footer a:not(.btn):not(.navbar-brand) { color: var(--gold) !important; text-decoration: underline; text-underline-offset: 4px; }
.site-footer a:hover { color: #ffe1a6 !important; }
.site-footer a:not(.btn):is(:hover,:focus-visible) { text-decoration-thickness: 2px; }
.site-footer a.btn-gold:hover { color: #203f34 !important; }
.fret-shell:fullscreen, .fret-shell.expanded, .zoom-dialog { background: var(--paper); }
.fret-shell:fullscreen, .fret-shell.expanded { color: var(--ink); }
.zoom-modal { background: #102f28eb; }
.learning-page :is(a, button, select, input):focus-visible, .site-nav a:focus-visible { outline: 3px solid #a65b19; outline-offset: 4px; }
.site-nav a:focus-visible { outline-color: var(--gold); }
.site-footer a:focus-visible, #cookieConsent a:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
#cookieConsent a:focus-visible { outline-color: var(--link); }
@media (max-width: 1199px) and (min-width: 992px) {
    .site-nav .nav-link { padding: 9px 9px !important; font-size: .83rem; }
    .site-nav .navbar-brand { font-size: .98rem; }
    .site-nav .navbar-nav .nav-practice { margin-left: 8px; }
}
@media (max-width: 991px) {
    .site-nav { padding: 12px 0; }
    .site-nav .navbar-brand { margin-right: 0; }
    .site-nav .navbar-collapse { background: #1b4940; max-height: min(65dvh, 640px); overflow-y: auto; margin-top: 14px; }
    .site-nav .navbar-nav { align-items: stretch !important; }
    .site-nav .nav-link { padding: 12px 16px !important; font-size: .95rem; }
    .site-nav .navbar-nav .nav-practice { margin: 10px 0 0; text-align: center; }
    .site-nav .scale-menu { min-width: 0; width: 100%; box-shadow: none; }
    .site-hero h1 { max-width: 650px; }
    .lesson-nav { top: 74px; }
    .footer-nudge h2 { font-size: 1.6rem; }
}
@media (max-width: 640px) {
    html { scroll-padding-top: 145px; }
    #cookieConsent { padding: 10px 14px; font-size: .75rem; }
    .site-nav .navbar-brand { font-size: .94rem; }
    .brand-logo { width: 180px; height: 47px; }
    .site-nav .scale-menu.show { grid-template-columns: 1fr; }
    .hero-content { padding-top: 38px; padding-bottom: 42px; }
    .page-inner .hero-content { padding-top: 30px; padding-bottom: 32px; }
    .site-hero { background-position: center, 61% center; }
    .site-hero h1 { font-size: 2.25rem; max-width: 360px; }
    .page-inner .site-hero h1 { font-size: 2rem; }
    .hero-eyebrow { font-size: .63rem; letter-spacing: .13em; }
    .hero-description { font-size: .95rem; margin-top: 16px; }
    .learning-page { padding-top: 24px; }
    .learning-panel, .learning-card, .lesson-summary { padding: 22px; }
    a.learning-card { padding-top: 40px; }
    .home-start { padding: 25px; border-left-width: 4px; }
    .home-start h2 { font-size: 1.85rem; }
    .home-start .tool-buttons { flex-direction: column; }
    .lesson-summary { gap: 25px; }
    .lesson-summary h2 { font-size: 1.6rem; }
    .lesson-nav { top: 71px; margin-left: -6px !important; margin-right: -6px !important; }
    .lesson-nav span { display: none; }
    .lesson-nav a { padding: 8px 11px; font-size: .75rem; }
    .tool-controls { padding: 14px; }
    .tool-controls label { min-width: 0; }
    .tool-controls select { min-width: 0; }
    .tool-buttons .btn { flex-grow: 1; }
    .pattern-grid figure { padding: 12px; }
    [data-side] { padding: 16px; }
    .site-footer .footer-nudge { align-items: stretch; flex-direction: column; padding-left: 25px; padding-right: 25px; }
    .site-footer .footer-nudge .btn { text-align: center; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print {
    body.site-shell, .learning-panel, .learning-card, .lesson-summary, .pattern-grid figure, .home-start { background: white !important; color: black !important; }
    .site-nav, .site-hero, .site-footer, .skip-link, .lesson-nav { display: none !important; }
    .learning-page h2, .learning-page h3, .lesson-summary p, .lesson-summary p:last-child { color: black !important; }
    .scale-note { color: black; border-color: #888; background: white; }
    .learning-card, .learning-panel, .lesson-summary { box-shadow: none; }
}