/* Inner pages share the same fixed frame as the learning and workshop homes. */
html{scrollbar-gutter:stable;scrollbar-width:auto}
html{scroll-padding-top:clamp(110px,12vw,150px)}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:15px}
body{display:grid;grid-template-columns:minmax(0,1fr) clamp(170px,21vw,245px);column-gap:clamp(24px,4vw,60px);width:min(1520px,100%);max-width:none;margin:auto;padding:clamp(18px,3.6vw,58px);padding-top:calc(clamp(22px,3.6vw,58px) + 80px);padding-bottom:90px;background:#fff;color:#171717}
body::before{content:"";position:fixed;z-index:40;top:0;left:0;right:0;height:calc(clamp(22px,3.6vw,58px) + 80px);background:#fff;pointer-events:none}
.site-header{grid-column:1/-1;grid-row:1;display:flex;align-items:center;position:fixed;z-index:50;top:clamp(22px,3.6vw,58px);left:max(clamp(18px,3.6vw,58px),calc((100% - 1520px)/2 + 58px));right:max(clamp(18px,3.6vw,58px),calc((100% - 1520px)/2 + 58px));width:auto;max-width:none;min-height:80px;margin:0;padding:0 0 18px;border-bottom:1px solid #222;gap:24px;background:#fff}
.site-header::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:clamp(22px,3.6vw,58px);background:#fff}
.site-brand{display:flex;align-items:center;gap:18px;min-width:0}
.site-logo{display:block;width:112px;height:auto;max-height:61px;object-fit:contain}
.section-home-link{min-width:0;text-decoration:none}
#qaf-site-title{margin:0;white-space:nowrap}
.site-tagline,.utility-nav{display:none!important}
.qaf-login{position:static;flex:none;margin-left:auto;font:700 12px/1.4 Arial,sans-serif;letter-spacing:.12em;color:#171717;max-width:38vw;overflow:hidden;text-overflow:ellipsis}
#main{grid-column:1;grid-row:2;width:100%;max-width:none;min-width:0;min-height:calc(100dvh - 206px);margin:24px 0 28px;padding:0;overflow-wrap:anywhere}
#friend-main-nav{grid-column:2;grid-row:2;align-self:start;position:fixed;top:auto;right:max(clamp(18px,3.6vw,58px),calc((100% - 1520px)/2 + 58px));bottom:72px;display:flex;flex-direction:column;gap:0;width:clamp(170px,21vw,245px);max-width:none;min-width:0;height:auto;margin:0;padding:0;overflow:visible;white-space:normal;border:0;background:#fff;z-index:9}
#friend-main-nav a{display:flex;flex-direction:column;justify-content:center;flex:none;gap:3px;min-height:40px;margin:0;padding:4px 0 9px;border:0;border-top:1px solid #bcbcbc;color:#171717;text-decoration:none;white-space:normal}
#friend-main-nav a:first-child{border-top:0}
#friend-main-nav a[aria-current=page]{border-bottom:0;color:#171717}
#friend-main-nav a small{display:block;position:static;font:700 9px/1.2 Arial,"Microsoft JhengHei",sans-serif!important;letter-spacing:.01em;color:#171717!important}
#friend-main-nav a strong{display:block;position:static;font:700 clamp(15px,1.55vw,22px)/1 Arial,sans-serif;letter-spacing:-.05em;white-space:nowrap}
#friend-main-nav a:hover strong,#friend-main-nav a[aria-current=page] strong{text-decoration:none}
#friend-main-nav a[aria-current=page] strong::after{content:"■";display:inline-block;margin-left:.4em;font-size:.36em;vertical-align:.28em;letter-spacing:0}
#friend-nav-toggle{display:none}
.site-footer{grid-column:1/-1;grid-row:3;display:flex;align-items:center;justify-content:space-between;position:fixed;z-index:900;left:max(clamp(18px,3.6vw,58px),calc((100% - 1520px)/2 + 58px));right:max(clamp(18px,3.6vw,58px),calc((100% - 1520px)/2 + 58px));bottom:0;gap:12px 18px;width:auto;max-width:none;min-height:29px;margin:0;padding:10px 0 18px;border-top:1px solid #222;background:#fff;color:#171717;font:700 11px/1.35 Arial,"Microsoft JhengHei",sans-serif;letter-spacing:.1em;font-size:11px!important;line-height:1.35!important;font-weight:700!important}
footer.site-footer{margin:0;padding:4px 0 18px}
.site-footer .footer-tools{display:flex;align-items:center;justify-content:center;gap:8px 16px;flex-wrap:wrap;border:0;padding:0;margin:0;color:inherit;font:inherit;letter-spacing:inherit}
.site-footer .footer-tools span{font:inherit;white-space:nowrap}
.site-footer .friend-traffic[hidden]{display:none!important}
#back-to-top{left:22px;right:auto;bottom:100px}
.qaf-route-leaving #main,.qaf-route-leaving #friend-main-nav{opacity:0;clip-path:inset(0 0 0 100%);transition:opacity .17s ease,clip-path .17s ease}
.qaf-route-loading #friend-main-nav{opacity:0}
.qaf-route-arriving #main,.qaf-route-arriving #friend-main-nav a{animation:qaf-inner-arrive .46s ease both}
@keyframes qaf-inner-arrive{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@media (orientation:landscape) and (min-width:900px) and (max-width:1300px){body{padding:71px 26px 90px}.site-header{top:14px;left:26px;right:26px;min-height:57px;padding-bottom:8px}.site-logo{width:88px}#friend-main-nav{right:26px}.site-footer{left:26px;right:26px}}
@media (orientation:landscape) and (min-width:900px) and (max-width:1300px){.site-header::before{height:14px}}
@media (orientation:landscape) and (min-width:900px) and (max-width:1300px){body::before{height:71px}}
@media(min-width:1301px) and (min-height:1001px){#friend-main-nav{bottom:146px}}
@media(max-width:700px){body{display:flex;flex-direction:column;padding:97px 18px 120px}.site-header{top:18px;left:18px;right:18px;order:0;min-height:79px;padding-bottom:10px}.site-brand{gap:10px}.site-logo{width:92px}#qaf-site-title{font-size:clamp(18px,4vw,23px)!important;white-space:normal}.qaf-login{font-size:10px;max-width:36vw}#main{order:1;min-height:45vh;margin:20px 0 24px}.site-footer{left:18px;right:18px;order:3;flex-wrap:wrap;align-items:flex-start}.site-footer .footer-tools{order:3;width:100%;justify-content:flex-start}body.friend-layout-mobile #friend-nav-toggle{bottom:calc(102px + env(safe-area-inset-bottom))!important}}
@media(max-width:700px){.site-header::before{height:18px}}
@media(max-width:700px){body::before{height:109px}}
@media(max-width:700px){#main article h2{font-size:clamp(20px,5.6vw,25px);line-height:1.2;letter-spacing:-.03em;margin:0 0 10px}#main:has(#memory-chords) article{padding-top:16px;padding-bottom:16px;margin-top:18px;margin-bottom:18px}#main:has(#memory-chords) article p{line-height:1.55;margin-top:6px;margin-bottom:6px}}
@media(min-width:701px) and (max-width:1200px){#main .mindmap-scroll{overflow:visible}#main .learning-mindmap{width:100%;max-width:100%;min-width:0;height:auto}}
@media(min-width:701px) and (max-width:1150px){body{padding-bottom:55px}#main{min-height:0;margin-bottom:12px}}
@media(max-width:700px){#main{margin-top:12px;margin-bottom:20px}#main .design-projects{margin:8px 0 12px;gap:4px 16px}#main .design-entrances{margin:8px 0}#main .design-entrances>.design-entry,#main .design-entrances>article{min-height:110px;padding:14px 0;gap:6px 12px}#main .design-entrances h3{font-size:clamp(32px,9vw,38px);line-height:1}#main .design-entry:has(>span){grid-template-rows:13px auto auto}#main .design-entry>span{position:static;grid-column:2;grid-row:1;align-self:start;font-size:11px!important;line-height:1.1!important;letter-spacing:.02em}#main .design-entry:has(>span)::before,#main .design-entry:has(>span) h3,#main .design-entry:has(>span) strong{grid-row:2}#main .design-entry:has(>span) p{grid-row:3}}
body.friend-layout-mobile #friend-main-nav{position:fixed;z-index:801;top:0;left:0;right:0;bottom:auto;display:none;flex-direction:row;flex-wrap:wrap;gap:0 14px;width:100%;max-height:min(60svh,420px);padding:12px 20px;overflow-y:auto;border:0;box-shadow:0 6px 20px #0002}
body.friend-layout-mobile.friend-nav-open #friend-main-nav{display:flex!important}
body.friend-layout-mobile #friend-main-nav a{flex:0 0 calc(50% - 7px);min-height:52px;margin:0!important;padding:5px 0!important;border-top:1px solid #bcbcbc;white-space:normal}
body.friend-layout-mobile #friend-main-nav a:nth-child(-n+2){border-top:0}
body.friend-layout-mobile #friend-main-nav a strong{font-size:16px}
body.friend-layout-mobile #friend-nav-toggle{display:grid!important;place-items:center}
body.friend-layout-mobile #friend-nav-toggle::before{content:"";display:block;width:18px;height:14px;border:0;transform:none;background:linear-gradient(currentColor,currentColor) center top/18px 2px no-repeat,linear-gradient(currentColor,currentColor) center/18px 2px no-repeat,linear-gradient(currentColor,currentColor) center bottom/18px 2px no-repeat}
body.friend-layout-mobile.friend-nav-open #friend-nav-toggle::before{transform:none}
@media(max-width:430px){.site-footer{font-size:9px!important;letter-spacing:.06em}}
@media(max-width:520px){footer.site-footer{top:calc(100dvh - 100px);bottom:auto;box-sizing:border-box;height:100px;padding:7px 0 0;align-content:flex-start}}
@media(prefers-reduced-motion:reduce){.qaf-route-leaving #main,.qaf-route-leaving #friend-main-nav{transition:none}.qaf-route-arriving #main,.qaf-route-arriving #friend-main-nav{animation:none}}

/* Keep the frame compact while preserving the same page structure. */
@media(max-width:700px){body{padding-top:77px;padding-bottom:72px}body::before{height:75px}.site-header{top:10px;min-height:65px}.site-header::before{height:10px}#main{min-height:0;margin-bottom:12px}}
@media(orientation:landscape) and (max-width:899px) and (max-height:500px){body{padding-top:66px;padding-bottom:50px}body::before{height:58px}.site-header{top:6px;left:18px;right:18px;min-height:52px;padding-bottom:5px}.site-header::before{height:6px}}@media(max-width:700px){.site-logo{width:70px!important}#qaf-site-title{font-size:clamp(12px,3.5vw,16px)!important}footer.site-footer{top:calc(100dvh - 56px);height:56px;padding:6px 0 0}body.friend-layout-mobile #friend-nav-toggle{bottom:calc(68px + env(safe-area-inset-bottom))!important}}
@media(orientation:landscape) and (max-width:899px) and (max-height:500px){.site-logo{width:70px!important}#qaf-site-title{font-size:16px!important}.site-footer{top:auto!important;bottom:0!important;min-height:0;height:38px;padding:6px 0}body.friend-layout-mobile #friend-nav-toggle{bottom:48px!important}}
@media(orientation:landscape) and (min-width:701px) and (max-width:899px) and (max-height:500px){#friend-main-nav{bottom:45px}#friend-main-nav a{min-height:30px;gap:0;padding:1px 0 2px}#friend-main-nav a small{font-size:8px!important}#friend-main-nav a strong{font-size:14px}}

/* Guitar-design subnavigation sits directly beneath the fixed header. */
#main:has(> .design-projects){margin-top:0;padding-top:0}
#main > .design-projects{position:sticky;top:calc(clamp(22px,3.6vw,58px) + 80px);z-index:39;margin:0 0 12px!important;padding-top:0;background:#fff}
#main .design-entrances>.design-entry{min-height:96px}
#main .design-projects a[aria-current]{background:transparent!important;box-shadow:none!important;border:0!important;color:#171717}
#main .design-projects a[aria-current]::after{content:none!important}
@media(orientation:landscape) and (min-width:900px) and (max-width:1300px){#main > .design-projects{top:71px}}
@media(max-width:700px) and (orientation:portrait){#main > .design-projects{top:75px}}
@media(orientation:landscape) and (max-width:899px) and (max-height:500px){#main > .design-projects{top:58px}}
@media(max-width:700px) and (orientation:portrait){#main:has(> .design-projects){margin-top:-2px}}
@media(orientation:landscape) and (max-width:899px) and (max-height:500px){#main:has(> .design-projects){margin-top:-8px}}

/* Narrow landscape keeps content, side navigation, and footer on the header grid. */
@media(orientation:landscape) and (min-width:701px) and (max-width:899px) and (max-height:500px){
  body{padding-left:18px;padding-right:18px}
  #friend-main-nav{right:18px}
  #friend-main-nav a{min-height:35px;gap:3px;padding:2px 0 6px}
  .site-footer{left:18px;right:18px}
}
@media(max-width:360px){body.friend-layout-mobile #friend-main-nav a{min-width:0}body.friend-layout-mobile #friend-main-nav a strong{font-size:clamp(12px,4vw,14px);white-space:normal;overflow-wrap:anywhere}}

/* Short landscape screens cannot fit every signed-in learning label at once. */
@media(orientation:landscape) and (min-width:701px) and (max-width:899px) and (max-height:405px){
  #friend-main-nav{top:66px;bottom:45px;max-height:calc(100dvh - 111px);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
  #friend-main-nav a{flex-shrink:0}
}

/* QAF controls stay on white; selection is conveyed by type, not a filled tab. */
:is(#main,#friend-main-nav) :is(a,button,summary,[role="button"]):hover{background-color:#fff!important;color:#171717!important}
#main :is(.design-projects a,.mods-tabs a,[role="tab"],[aria-current="page"]){background:#fff!important;border:0!important;box-shadow:none!important}
#main :is(.design-projects a,.mods-tabs a,[role="tab"]):hover{background:#fff!important;border:0!important;box-shadow:none!important;color:#171717!important}
#main :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),textarea,select){background:#fff!important;border:0!important;border-bottom:1px solid #777!important;border-radius:0!important;box-shadow:none!important}
#main :is(input,textarea,select):focus{outline:none!important;border-bottom-color:#171717!important}
#main input[type="file"]::file-selector-button{border:0;background:#fff;color:#171717;box-shadow:none}
/* Existing floating circular controls keep their original outline. */
:is(#back-to-top,#friend-nav-toggle,.qaf-arrow,.carousel-arrow,.slider-arrow){background:#fff!important;color:#171717!important}
:is(#back-to-top,#friend-nav-toggle){border:1px solid #c8c8c8!important;border-radius:50%!important;box-shadow:0 2px 8px #0001!important}

/* News sources: let the artwork use each column instead of spending its width on padding. */
#main .news-logos{column-gap:7px;row-gap:12px;margin:12px 0 24px}
#main .news-logo{min-height:88px;padding:2px!important}
#main .news-logo img{display:block;width:100%;max-width:180px;height:84px;object-fit:contain}
@media(max-width:900px){#main .news-logos{column-gap:10px}}
@media(max-width:500px){#main .news-logos{column-gap:8px;row-gap:8px}#main .news-logo{min-height:70px}#main .news-logo img{height:66px}#main .news-logo:last-child:nth-child(3n+1){grid-column:2}}

/* Footer layout chooser follows the same single-rule control treatment. */
.site-footer select{background:#fff!important;border:0!important;border-bottom:1px solid #777!important;border-radius:0!important;box-shadow:none!important}
.site-footer select:focus{outline:none!important;border-bottom-color:#171717!important}
.site-footer select,#main select{padding-block:3px!important;line-height:1.25!important}

/* Remove the remaining pale-green fills in legacy learning and news sections. */
#main :is(.hub-video,.guide-hero,.guide-toc,.visual-toast,.news-prompt pre,.chord-flow span,.guide-table th,.signature-table th,.mods-article tr:first-child){background:#fff!important}
#qaf-workbook :is(.dropzone,.round-summary,dialog){background:#fff!important}

/* One unframed treatment for section tabs and menu choices across music pages. */
#main :is(.subnav a,.subnav button,.book-filters button,.fifths-mode-tabs button,.friend-model-tabs button,.friend-reader-tabs a,.column-tabs button,.mods-tabs a,[role="tab"]),
#main :is(.subnav a,.subnav button,.book-filters button,.fifths-mode-tabs button,.friend-model-tabs button,.friend-reader-tabs a,.column-tabs button,.mods-tabs a,[role="tab"]):hover{
  background:#fff!important;color:#171717!important;border:0!important;border-radius:0!important;box-shadow:none!important;text-decoration:none!important;
}
#main :is(.book-filters button,.fifths-mode-tabs button,.friend-model-tabs button,.column-tabs button,[role="tab"]):is([aria-pressed="true"],[aria-selected="true"]),
#main .friend-reader-tabs a[aria-current="page"]{font-weight:700!important}
#main :is(.subnav,.book-filters,.fifths-mode-tabs,.friend-model-tabs,.friend-reader-tabs,.column-tabs){background:#fff!important}

/* Daily-memory jump labels and footer utilities keep the white site canvas. */
#main .memory-jumps,.site-footer .footer-tools{background:#fff!important}

/* Daily-memory section tabs begin at the header rule, as on other inner pages. */
#main:has(> .memory-top-tabs){margin-top:0;padding-top:0}
#main>.memory-top-tabs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 25px;margin:0 0 16px;padding:7px 0 9px;border:0;border-bottom:1px solid #bcbcbc;background:#fff}
#main>.memory-top-tabs a,#main>.memory-top-tabs a:hover{display:inline-block;padding:1px 0;background:#fff!important;border:0!important;box-shadow:none!important;color:#171717!important;text-decoration:none!important;font-size:var(--qaf-body-size)!important;line-height:var(--qaf-body-leading)!important;white-space:nowrap}
#main:has(> .memory-top-tabs) :is(article,section)[id]{scroll-margin-top:0!important}
html:has(#main>.memory-top-tabs){scroll-padding-top:calc(clamp(22px,3.6vw,58px) + 92px)}
@media(orientation:landscape) and (min-width:900px) and (max-width:1300px){html:has(#main>.memory-top-tabs){scroll-padding-top:85px}}
@media(max-width:700px){html:has(#main>.memory-top-tabs){scroll-padding-top:90px}}
@media(orientation:landscape) and (max-width:899px) and (max-height:500px){html:has(#main>.memory-top-tabs){scroll-padding-top:72px}}
@media(max-width:700px){#main>.memory-top-tabs{gap:3px 17px;padding:6px 0 8px;margin-bottom:12px}}