/* Neutral application chrome lets each subject set its own colors. */
:root{
  --atlas-ink:#211915;--atlas-cherry:#a12831;--atlas-orange:#ff733c;
  --atlas-yellow:#ffdd27;--atlas-lime:#bde936;--atlas-coral:#ff5f55;--atlas-teal:#19dfbd;
  --page:#fffdfb;--surface:#fff;--ink:var(--atlas-ink);--muted:#504442;
  --line:#e4cdc5;--accent:var(--atlas-cherry);
}
body{background:var(--page)}
header{background:var(--page);border-color:var(--line)}
.top nav button{border-radius:5px}
main{padding-top:clamp(18px,4vw,42px)}
.controls{margin-top:0}
.today-feature:has(img){grid-template-columns:minmax(0,.9fr) minmax(0,1.28fr);align-items:stretch}
.today-feature img{display:block;max-height:440px}
.today-feature img[src*="editorial-"]{object-fit:cover}
@media(max-width:660px){
 .today-feature:has(img){grid-template-columns:minmax(0,1fr)}
 .today-feature img{grid-row:1;max-height:310px}
}
.brand{font:850 clamp(20px,3vw,32px)/1 system-ui,sans-serif;letter-spacing:-.07em}
.brand{display:flex;align-items:center;gap:9px}
.brand img{width:clamp(23px,3vw,34px);height:auto;flex:none}
button,input{border-radius:9px}
button:hover{background:#ffe9e1}
.primary,.primary:hover{background:#ff713f;color:#18201c;border-color:#ff713f;font-weight:800}
button[aria-pressed=true]{background:var(--atlas-cherry);border-color:var(--atlas-cherry);color:white}
#section,.collection>h3,.path-panel h3,.today-copy h3{font-family:system-ui,sans-serif;font-weight:820;letter-spacing:-.055em}
.card,.path-panel,.collection,.today-feature{border-radius:18px}
.card h4{font-family:system-ui,sans-serif;font-weight:780;letter-spacing:-.04em}
.collection{background:#ffffff;border-color:#d8e3df}
.collection[data-subject=Art],.path-panel[data-illustration=look],.path-panel[data-illustration=relief]{background:#e5f1fa;color:#162c37;border-color:#b6d0df}
.collection[data-subject=Music],.path-panel[data-illustration=strings],.today-feature[data-topic=Music]{background:#083b40;color:#f1fff8;border-color:#083b40}
.collection[data-subject=Tattooing]{background:#f6e6dc;border-color:#b75343}
.collection[data-subject=Tattooing] .card{border-color:#b75343}
.collection[data-subject=Philosophy]{background:#dbeef9}
.collection[data-subject=Creativity]{background:#e8fbbf}
.collection[data-subject=Creativity] .card{background:#f4ffde;border-color:#8ca84d}
.collection[data-subject="Public figures"]{background:#164e48}
.collection[data-subject=Food],.path-panel[data-illustration=bread]{background:#ffe3d2;color:#442a20;border-color:#e7aa89}
.collection[data-subject=Food] .card{background:#fff5e9;border-color:#d5906a}
.collection[data-subject=Survival]{background:#dcf6e6}
.path-panel,.today-feature{background:#edf4f1;border-color:#c4d8d1}
.path-panel[data-visual=profile]{background:#233e46}
.path-panel[data-visual=documents],.path-panel[data-visual=comparison]{background:#e8f0f6;border-color:#517487}
[data-visual=comparison] .estimate-figure{background:#234653;color:#fff}
[data-visual=comparison] .estimate-bar{background:#83e4d0}
.path-panel[data-illustration] .path-illustration img{background:#eff5ef;border-radius:12px;max-height:470px;padding:0}
.path-panel[data-illustration=strings] .path-illustration img{background:#0b3037}
.path-panel[data-illustration=strings] .path-illustration a{color:#cbfcea}
.path-illustration figcaption{padding-inline:4px}
.path-panel[data-illustration=strings] .path-illustration figcaption{color:#d4f4ec}
.path-panel[data-illustration=strings] .primary{background:#d3ff89;color:#083b40;border-color:#d3ff89}
.collection .card-image,.archive-tile img,.today-feature img{background:#e7efed}
.collection[data-subject="Public figures"] .card-image{background:#133f3b}
.archive-tile span,.path-gallery .archive-tile{background:#f4f8f3}
dialog{border-radius:18px}
dialog[data-topic=Tattooing]{background:#fef2eb;border-color:#aa6351}
dialog[data-topic=Food]{background:#fff0ec}
dialog[data-topic=Survival]{background:#eafaeb}
.harmonic-study{background:#083b40}
.path-panel:is([data-illustration=relief],[data-illustration=bread],[data-illustration=strings]) .path-illustration img{
 width:100%;aspect-ratio:1;object-fit:cover;max-height:none
}
.path-panel[data-illustration=look]{background:#e9f0f0}
.collection .card-image.editorial-image{aspect-ratio:1;object-fit:cover}
.today-feature[data-topic=Art] img,.today-feature[data-topic=Food] img{background:#f2eee1}
@media(max-width:640px){.path-panel:is([data-illustration=relief],[data-illustration=bread],[data-illustration=strings]) .path-illustration img{max-height:none}}
.path-activity{margin-top:14px;border-top:1px solid currentColor;padding-top:9px}
.path-activity summary{cursor:pointer;font-weight:800;margin-bottom:7px}
.relief-game{background:#fff1c1;color:#222519}
.relief-block{background:#ff9d8a}.relief-block span{background:#2a2921}.relief-block span+span{background:#ff9d8a}
.relief-paper{background:#fff7f4}
.relief-paper.has-ink::before{background:linear-gradient(90deg,#25261c 0 41%,transparent 41% 59%,#25261c 59%);animation:print-reveal .28s ease-out}
@keyframes print-reveal{from{opacity:0;transform:translateY(-5px)}}
.scoring-challenge{background:#fff0df;padding:12px;color:#442a20}
.loaf-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.loaf-options button{background:#fff9f3;border-color:#e0b296;color:#442a20}
.scoring-challenge p{margin:0 0 .65rem;color:#442a20!important}
@media(prefers-reduced-motion:reduce){.relief-paper.has-ink::before{animation:none}}

#section{font-size:clamp(32px,5vw,56px)}
.path-panel[data-illustration]{border-radius:8px}
.path-panel[data-illustration=look]{background:#232d32;color:#fbefdc;border-color:transparent}
.path-panel[data-illustration=look] .path-illustration img{background:#232d32}
.path-panel[data-illustration=look] :is(p,a,small){color:inherit}
.path-panel[data-illustration=look] li button{color:inherit;border-color:#8aabb1}
.path-panel[data-illustration=look] li button:hover{background:#3a5057}
.path-panel[data-illustration=relief]{background:#ffcf45;color:#20201d;border:0}
.path-panel[data-illustration=relief] .path-illustration img{object-fit:contain;aspect-ratio:35/23;background:transparent;border-radius:0}
.path-panel[data-illustration=relief] li button{border-color:#8f6a29}
.path-panel[data-illustration=relief] .primary{background:#20201d;color:#fff;border-color:#20201d}
.path-panel[data-illustration=bread]{
  grid-template-columns:minmax(0,1fr);
  background:#ffe0c5;color:#392e24;border:0;gap:8px;
}
.path-panel[data-illustration=bread] .path-illustration img{aspect-ratio:2.35;object-position:center 54%;border-radius:2px}
.path-panel[data-illustration=bread] .path-copy{padding:12px clamp(0px,2vw,24px)}
@media(min-width:761px){
  .path-panel[data-illustration=strings]{grid-template-columns:minmax(0,.92fr) minmax(0,1.22fr)}
  .path-panel[data-illustration=strings] .path-illustration{grid-column:2;grid-row:1}
  .path-panel[data-illustration=strings] .path-copy{grid-column:1;grid-row:1}
}
@media(max-width:640px){
  .path-panel[data-illustration=bread] .path-illustration img{aspect-ratio:1.5}
}

.page-masthead{position:relative}
body:has(#showcase:not([hidden])) header{
  position:absolute;inset:0 0 auto;z-index:2;
  color:#fff9ed;border-color:#fff9ed36;
  background:linear-gradient(#32100cbb,transparent);
}
body:has(#showcase:not([hidden])) .top{max-width:1440px}
body:has(#showcase:not([hidden])) .top nav button{border-color:transparent}
body:has(#showcase:not([hidden])) .top nav button:is(:hover,[aria-pressed=true]){
  color:#fff9ed;background:#341411;border-color:#fff9ed4d;
}
body:has(#showcase:not([hidden])) .top :focus-visible{outline-color:#fff9ed}
.sound-stage,.print-stage{position:relative;isolation:isolate;overflow:hidden}
.sound-stage{
  min-height:clamp(650px,79svh,920px);
  display:grid;align-items:center;justify-items:end;
  padding:100px clamp(28px,7vw,128px) 52px;
  background:#5b241b;color:#fffaf0;
}
.sound-art{
  position:absolute;z-index:-2;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:48% center;
}
.sound-stage::before{
  content:"";position:absolute;z-index:-1;inset:0;
  background:linear-gradient(90deg,transparent 46%,#32110b52 65%,#32110b85);
}
.sound-copy{width:min(44%,570px);position:relative}
.showcase-subject{font-size:.83rem;font-weight:800;letter-spacing:.095em;text-transform:uppercase}
.sound-copy h2,.print-copy h2{
  margin:15px 0 18px;font-weight:920;line-height:.84;letter-spacing:-.087em;
}
.sound-copy h2{font-size:clamp(50px,7.2vw,122px)}
.sound-copy > p:last-of-type,.print-copy > p:last-of-type{max-width:32ch;font-size:clamp(16px,1.65vw,20px)}
.showcase-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:26px}
#showcase button{font-weight:780;border-radius:3px;padding:11px 14px;border:1px solid transparent}
#showcase button span{margin-left:8px}
.sound-copy [data-feature-lesson]{background:#fff9e9;color:#32140f}
.sound-copy [data-feature-lesson]:hover{background:#ffe0b8}
#jump-to-today{color:inherit;background:transparent}
#jump-to-today:hover{border-color:#fff9ed6e}
.sound-stage button:focus-visible{outline-color:#fff9ed}
.print-stage{
  min-height:clamp(400px,46vw,705px);display:grid;align-items:center;
  padding:clamp(36px,6vw,100px) clamp(26px,7vw,128px);
  background:#ffcf45;color:#20201d;
}
.print-copy{width:43%;position:relative}
.print-copy h2{font-size:clamp(46px,5.3vw,96px)}
.print-copy button{background:#20201d;color:#fff9e9;margin-top:24px}
.print-copy button:hover{background:#3e3d2d}
.print-stage img{
  position:absolute;z-index:-1;right:0;bottom:0;width:66%;height:auto;
  object-fit:cover;object-position:left bottom;
}
#section{scroll-margin-top:24px}
@media(max-width:760px){
  body:has(#showcase:not([hidden])) .top{display:grid;gap:7px;padding-block:12px}
  body:has(#showcase:not([hidden])) .top nav{gap:3px}
  body:has(#showcase:not([hidden])) .top nav button{padding:5px 8px}
  .sound-stage{
    min-height:0;display:block;padding:clamp(335px,98vw,540px) 24px 44px;
    background:#4d2018;
  }
  .sound-art{
    height:clamp(375px,106vw,595px);object-position:28% center;
    mask-image:linear-gradient(#000 68%,transparent);
  }
  .sound-stage::before{background:linear-gradient(#32110b60,transparent 135px)}
  .sound-copy,.print-copy{width:100%}
  .sound-copy h2{font-size:clamp(48px,15.7vw,112px)}
  .showcase-actions{margin-top:18px}
  .print-stage{display:block;min-height:0;padding:42px 24px 0}
  .print-copy h2{font-size:clamp(49px,11vw,79px)}
  .print-stage img{position:static;width:calc(100% + 48px);max-width:none;margin:8px -24px 0;display:block}
}

.welcome-stage{
  position:relative;isolation:isolate;overflow:hidden;
  display:grid;align-items:center;min-height:clamp(580px,82svh,860px);
  padding:102px clamp(28px,7vw,128px) 64px;
  background:#5b241b;color:#fffaf0;
}
.welcome-art{
  position:absolute;z-index:-2;inset:0;isolation:isolate;
  background:linear-gradient(104deg,#a82e16 0%,#ef6b2c 58%,#bb341e 100%);
}
.welcome-art img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:58% center;
  mix-blend-mode:luminosity;filter:grayscale(1) brightness(.94) contrast(1.06);
}
.welcome-stage::before{
  content:"";position:absolute;z-index:-1;inset:0;
  background:linear-gradient(90deg,#39130bed 0%,#461810bf 37%,#521c0f2b 68%,transparent 85%);
}
.welcome-copy{max-width:min(53%,690px)}
.welcome-copy h1{
  margin:0 0 24px;font-size:clamp(54px,8vw,130px);font-weight:920;
  line-height:.84;letter-spacing:-.087em;
}
.welcome-copy h1:focus{outline:none}
.welcome-copy p{max-width:37ch;font-size:clamp(16px,1.7vw,21px)}
#explore-library{background:#fff9e9;color:#32140f}
#explore-library:hover{background:#ffe0b8}
.welcome-stage button:focus-visible{outline-color:#fff9ed}
@media(max-width:760px){
  .welcome-stage{display:block;min-height:0;padding:clamp(315px,87vw,470px) 24px 46px}
  .welcome-art{height:clamp(380px,105vw,590px);mask-image:linear-gradient(#000 65%,transparent)}
  .welcome-art img{object-position:61% center}
  .welcome-stage::before{background:linear-gradient(#32100c40,transparent 150px)}
  .welcome-copy{max-width:100%}
  .welcome-copy h1{font-size:clamp(54px,15vw,100px);margin-bottom:20px}
}

.subject-picker{display:none}

@media(max-width:680px){
  :root{--phone-nav-height:64px}
  html{scroll-padding-bottom:calc(var(--phone-nav-height) + env(safe-area-inset-bottom))}
  body{padding-bottom:calc(var(--phone-nav-height) + env(safe-area-inset-bottom))}
  body:has(dialog[open]){overflow:hidden}
  .top,body:has(#showcase:not([hidden])) .top{
    min-height:60px;display:flex;align-items:center;
    padding-top:calc(12px + env(safe-area-inset-top));
    padding-inline:max(20px,env(safe-area-inset-left)) max(20px,env(safe-area-inset-right));
  }
  .top .library-nav,body:has(#showcase:not([hidden])) .top .library-nav{
    position:fixed;z-index:3;inset:auto 0 0;
    display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
    align-items:center;gap:4px;
    min-height:calc(var(--phone-nav-height) + env(safe-area-inset-bottom));
    padding:7px max(8px,env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
    border-top:1px solid #865347;background:#2e1a14;color:#fff9ed;
  }
  .top .library-nav button,body:has(#showcase:not([hidden])) .top .library-nav button{
    min-width:0;min-height:46px;padding:6px 2px;
    border:1px solid transparent;border-radius:5px;
    font-size:clamp(.78rem,3.5vw,.94rem);font-weight:700;
  }
  .top .library-nav button:hover,body:has(#showcase:not([hidden])) .top .library-nav button:hover{
    background:#512d21;color:#fff9ed;
  }
  .top .library-nav button[aria-pressed=true],body:has(#showcase:not([hidden])) .top .library-nav button[aria-pressed=true]{
    background:#ffe3cd;color:#412118;border-color:#ffe3cd;
  }
  .library-nav button:focus-visible{outline-color:#fff9ed;outline-offset:1px}
  main{padding-inline:max(16px,env(safe-area-inset-left)) max(16px,env(safe-area-inset-right))}
  .grid{grid-template-columns:minmax(0,1fr)}
  .controls{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 10px;align-items:end}
  .controls .topics{display:none}
  .controls input{grid-column:1/-1;width:100%;margin:0}
  .controls input,.subject-picker select,#edit-interests{
    min-height:46px;font-size:1rem;border-radius:5px;
  }
  .subject-picker{display:grid;gap:4px;min-width:0;font-size:.85rem;font-weight:700}
  .subject-picker select{
    width:100%;min-width:0;border:1px solid var(--line);padding:8px;
    color:var(--ink);background:var(--surface);font-family:inherit;
  }
  #edit-interests{padding-inline:8px;font-size:.86rem}
  .card .actions button,.path-panel button,.path-activity summary,#showcase button,.today-feature button{min-height:44px}
  .path-panel li button{text-align:left}
  .path-activity summary{padding-block:10px}
  .welcome-stage{padding-top:clamp(265px,71vw,450px)}
  .welcome-art{height:clamp(320px,90vw,540px)}

  #lesson-reader{
    position:fixed;inset:0;
    width:100%;max-width:none;height:100%;max-height:none;height:100dvh;
    margin:0;border:0;border-radius:0;
    padding:0 max(20px,env(safe-area-inset-right)) calc(26px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));
    overflow:auto;overscroll-behavior:contain;
  }
  #lesson-reader .dialog-top{
    position:sticky;top:0;z-index:1;
    margin:0 calc(-1 * max(20px,env(safe-area-inset-right))) 20px calc(-1 * max(20px,env(safe-area-inset-left)));
    padding:calc(8px + env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) 8px max(20px,env(safe-area-inset-left));
    border-bottom:1px solid currentColor;background:inherit;
  }
  #lesson-reader button,#onboarding button{min-height:44px}
  #lesson-reader h2{font-size:clamp(32px,8.5vw,50px)}
  #lesson-reader :is(.summary,.explanation,.example){font-size:1.06rem;line-height:1.6}
  #lesson-reader .evidence{overflow-wrap:anywhere}
  #complete-lesson{width:100%;font-weight:750}
  #lesson-reader .guitar-tuner{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  #onboarding{max-height:calc(92dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:18px}
  #onboarding .choices label{min-height:44px}
  #onboarding .time-choice select{min-height:44px;font-size:1rem}
  #onboarding .onboarding-actions{
    position:sticky;bottom:-18px;z-index:1;justify-content:flex-end;
    margin:0 -18px -18px;padding:10px 18px 14px;
    background:var(--surface);border-top:1px solid var(--line);
  }
}

.preference-actions{display:flex;gap:8px;flex-wrap:wrap}
#reminder-settings{padding:16px;margin:16px 0;border:1px solid #d9b69e;border-radius:6px;background:#fff0df}
.notification-heading{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:5px 12px}
.notification-heading h3{font-size:clamp(1.13rem,4vw,1.4rem);letter-spacing:-.025em}
#reminder-settings p{margin:8px 0 12px}
.reminder-count{color:#604437;font-size:.9rem;font-weight:750}
.notification-actions{display:flex;flex-wrap:wrap;gap:8px}
#reminder-settings .notification-note{margin:12px 0 0;color:#604437;font-size:.83rem}
#learning-settings{border-top:1px solid var(--line);padding-top:8px;margin:0 0 16px}
#learning-settings>summary{padding-block:8px;cursor:pointer;font-weight:720}
#learning-settings[open]>summary{margin-bottom:8px}
.reminder-times{display:grid;gap:8px;margin-bottom:10px}
.reminder-time{display:flex;gap:8px}
.reminder-time input{min-width:0;width:min(100%,160px);min-height:44px}
@media(max-width:680px){
  .controls:has(.library-search[hidden]) .preference-actions{grid-column:1/-1;justify-self:end}
  .preference-actions button{min-height:46px;font-size:.86rem}
  #learning-settings>summary{min-height:44px}
}

.section-banner{
  height:clamp(190px,24vw,315px);isolation:isolate;
  background:var(--atlas-orange);mask-image:linear-gradient(#000 30%,transparent 100%);
}
.section-banner img{
  width:100%;height:100%;display:block;object-fit:cover;object-position:center 53%;
  mix-blend-mode:luminosity;filter:grayscale(1) brightness(.98);
}
.section-banner[data-view=continue]{background:var(--atlas-teal)}
.section-banner[data-view=saved]{background:var(--atlas-coral)}
.section-banner[data-view=browse][data-group="U.S. civic life"]{background:var(--atlas-orange)}
.section-banner[data-view=browse][data-group="Science & nature"]{background:var(--atlas-lime)}
.section-banner[data-view=browse][data-group="Focus & direction"]{background:#f68a24}
.section-banner[data-view=browse][data-group="Inner strength"]{background:#e74635}
.section-banner[data-view=browse][data-group="Relationships & communication"]{background:#f2c52c}
.section-banner[data-view=browse][data-group="A meaningful life"]{background:#ed7050}
.section-banner[data-view=browse][data-group="Growth & renewal"]{background:#accf50}
.section-banner[data-view=browse][data-group="Craft & handwork"]{background:#f47c32}
.section-banner[data-view=browse][data-group="The creative studio"]{background:#f5cd27}
.section-banner[data-view=browse][data-group="Expression & understanding"]{background:#f45d48}
.section-banner[data-view=browse][data-group="Everyday nature"]{background:#b6d93c}
.section-banner[data-view=browse][data-group="Practical making"]{background:#eba537}
.section-banner[data-subject="Skateboarding"]{background:#f36336}
.section-banner[data-subject="Snowboarding"]{background:#d7c93e}
.section-banner:not([hidden]) + main{position:relative;margin-top:clamp(-100px,-8vw,-62px);padding-top:0}
.library-index,.index-paths{grid-column:1/-1;min-width:0}
.library-index h3,.index-paths>h3{font-size:clamp(26px,4vw,40px);line-height:1.15;letter-spacing:-.045em;margin-bottom:12px}
.index-shortcuts{background:var(--atlas-cherry);color:#fff;padding:clamp(14px,3vw,25px);border-radius:7px;margin-bottom:16px}
.index-shortcuts h4{margin-bottom:10px;font-size:1.02rem}
.index-links{display:flex;flex-wrap:wrap;gap:8px}
.index-links button{background:#fff;color:var(--atlas-ink);border-color:transparent;border-radius:4px;text-align:left}
.index-links button:hover{background:var(--atlas-yellow)}
.index-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.index-group{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:0 14px}
.index-group summary{font-weight:780;font-size:1.04rem;padding:12px 0;cursor:pointer}
.subject-index-list{margin:0;padding:0;list-style:none}
.subject-index-list button{
  width:100%;border:0;border-top:1px solid var(--line);border-radius:0;
  display:flex;justify-content:space-between;align-items:center;gap:10px;text-align:left;padding-inline:5px;
}
.subject-total{color:var(--muted);font-variant-numeric:tabular-nums}
.index-paths .path-panel{margin-top:12px}
.path-panel:is([data-subject="U.S. Constitution"],[data-subject="Federalist Papers"],[data-subject="U.S. Government"],[data-subject="Elections"]){
  background:#ebf1f6;border-color:#829caf;color:#1c3446;
}
.path-panel[data-subject="Federalist Papers"]{background:#edf1e5;border-color:#91a076;color:#354724}
.collection:is([data-subject="Federalist Papers"],[data-subject="U.S. Constitution"],[data-subject="U.S. Government"],[data-subject="Elections"]){
  background:#eff5f7;border-color:#a4bbc6;
}
@media(max-width:680px){
  .section-banner{height:158px}
  .section-banner img{object-position:61% 52%}
  .section-banner:not([hidden]) + main{margin-top:-52px}
  .controls:has(#back-to-index:not([hidden])) :is(.preference-actions,.subject-picker){grid-column:1/-1}
  .index-groups{grid-template-columns:minmax(0,1fr)}
  .index-links button,.subject-index-list button,.index-group summary{min-height:44px}
}

.header-actions{display:flex;gap:6px}
.header-actions button{border-radius:5px;font-size:.88rem;font-weight:730}
.top .library-nav{margin-left:auto}
body:has(#showcase:not([hidden])) .header-actions button{border-color:#fff9ed68}
body:has(#showcase:not([hidden])) .header-actions button:hover{background:#341411;color:#fff9ed}
.library-search{display:flex;gap:6px;flex:1 1 285px;min-width:0}
.controls .library-search input{width:100%;min-width:0;margin:0}
.library-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.library-search button{flex:none;border-radius:5px;font-weight:700}
.preference-actions:not(:has(button:not([hidden]))){display:none}
.settings-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.settings-subject-group{border-bottom:1px solid var(--line)}
.settings-subject-group summary{font-weight:720;cursor:pointer;padding:10px 0}
.settings-subject-group .choice-group{border-bottom:0}
.index-heading{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:10px}
.index-heading h3{margin:0}
.index-order{display:flex;gap:5px}
.index-order button{border-radius:4px;padding:7px 9px}
.search-subjects{grid-column:1/-1;padding:12px 14px;border:1px solid var(--line);border-radius:6px;background:var(--surface)}
.search-subjects h3{margin-bottom:8px;font-size:1.08rem}
@media(max-width:680px){
  .top,body:has(#showcase:not([hidden])) .top{flex-wrap:nowrap;justify-content:space-between;gap:5px;padding-inline:max(14px,env(safe-area-inset-left)) max(14px,env(safe-area-inset-right))}
  .header-actions button{min-height:44px;padding:5px 7px;font-size:.81rem}
  .controls .library-search{grid-column:1/-1}
  .subject-picker{grid-column:1/-1}
  .settings-subject-group summary,.index-order button{min-height:44px}
}

.path-panel[data-illustration^="series-"]{background:#f4ede1;color:#24363a;border-color:#bfb9a6}
.path-panel[data-illustration^="series-"] .path-illustration img{border-radius:4px;background:transparent}
.path-panel[data-illustration=series-design]{background:#f8d644;color:#20272a;border-color:#d09c2a}
.path-panel[data-illustration=series-cooking]{background:#f9e0d0;color:#572820;border-color:#d78871}
.path-panel[data-illustration=series-navigation]{background:#e8edd4;color:#304a3e;border-color:#a7b99d}
.path-panel:is([data-illustration=series-photography],[data-illustration=series-astronomy]){
  background:#142a39;color:#fff3db;border-color:#142a39;
}
.path-panel:is([data-illustration=series-photography],[data-illustration=series-astronomy]) :is(figcaption,small){color:#e4eadf}
.path-panel:is([data-illustration=series-photography],[data-illustration=series-astronomy]) li button{border-color:#77939d}
.path-panel:is([data-illustration=series-photography],[data-illustration=series-astronomy]) li button:hover{background:#294958;color:#fff3db}
.kerning-lab{background:#f8d644;color:#1d2528;padding:14px}
.kerning-pair{font:700 clamp(60px,15vw,138px)/1.1 Georgia,serif;text-align:center;margin-bottom:12px}
.kerning-pair span{display:inline-block}
.kerning-lab label{display:block;font-weight:700}
.kerning-lab input{display:block;width:100%;padding:0;min-height:44px;accent-color:#83331e}

.section-banner[data-view=browse][data-group="Art & design"]{background:#e18d47}
.library-index>.index-group{margin-bottom:14px}
.path-panel[data-illustration=genre-disciplines]{background:#153543;color:#fff6e4;border-color:#2a6375}
.path-panel[data-illustration=genre-disciplines] :is(figcaption,small){color:#e1e9dd}
.path-panel[data-illustration=genre-disciplines] li button{border-color:#7a9da2}
.path-panel[data-illustration=genre-disciplines] li button:hover{background:#2f5360;color:#fff6e4}
.path-panel[data-illustration=genre-styles]{background:#efe5cd;color:#322c27;border-color:#c8a484}
.path-panel[data-illustration=genre-movements]{background:#e7ecd9;color:#283d35;border-color:#a5b2a1}
.path-panel[data-illustration=genre-media]{background:#e8e7df;color:#282927;border-color:#aba99b}
.path-panel[data-illustration^="genre-"] .path-illustration img{background:transparent;border-radius:3px}
.genre-exercise{padding:14px;background:#f6ecdd;color:#252c29;border-radius:4px}
.genre-exercise p{margin-block:8px}
.genre-options{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.genre-options button{min-height:44px;border-color:#998b71;background:#fff7e8;color:#252c29}
.genre-options button:hover{background:#ffe3ba}
.genre-options button[aria-pressed=true]{background:#1d4239;color:#fff}
.ink-matrix{
  display:grid;grid-template-columns:1fr .3fr 1fr;align-items:end;gap:0;
  height:102px;max-width:460px;margin:12px 0;background:#fff8e9;padding:18px 24px;
}
.ink-matrix span{height:56px;background:#daa977;border-top:7px solid #1f3438}
.ink-matrix span:nth-child(2){height:26px;border-top-color:transparent}
.ink-matrix[data-process=intaglio] span{border-top-color:transparent}
.ink-matrix[data-process=intaglio] span:nth-child(2){border-top-color:#1f3438}

.collection-items{align-items:start}
.collection .card:has(.editorial-image[src^="art/lesson/"]){background:#fffaf2;border-color:#d6c5b1}
.collection .card-image.editorial-image[src^="art/lesson/"]{
  aspect-ratio:8/5;object-fit:cover;width:100%;height:auto;
}
.collection[data-subject="Art movements"]{background:#e9ede1;border-color:#aab89e}
.collection[data-subject=Architecture]{background:#e4edf0;border-color:#a8b9be}
.collection[data-subject=Architecture] .card:has(.editorial-image){border-color:#a8b9be;background:#f5faf8}
.collection[data-subject="Design production"]{background:#e1eeed;border-color:#8ab8ba}
.collection[data-subject=Typography]{background:#f8e8ac;border-color:#dcb86c}
.collection[data-subject="American Founding"]{background:#e9eee0;border-color:#a7ad8d}
.path-index-list{border:1px solid var(--line);padding:0 12px;border-radius:6px;background:var(--surface)}
.path-index-list li:first-child button{border-top:0}
.path-index-list button{min-height:44px}
.path-index-list .subject-total{text-align:right;flex-shrink:0}
.path-panel[data-illustration^="atlas-"] .path-illustration img{border-radius:4px;background:transparent}
.path-panel:is([data-illustration=atlas-production],[data-illustration=atlas-sound],[data-illustration=atlas-photo]){
  background:#173039;color:#fff2d5;border-color:#234851;
}
.path-panel:is([data-illustration=atlas-production],[data-illustration=atlas-sound],[data-illustration=atlas-photo]) :is(figcaption,small){color:#e4eadf}
.path-panel:is([data-illustration=atlas-production],[data-illustration=atlas-sound],[data-illustration=atlas-photo]) li button:hover{background:#304d56;color:#fff2d5}
.path-panel[data-illustration=atlas-type]{background:#f6dfa1;border-color:#d2a754}
.path-panel[data-illustration=atlas-print]{background:#f4e1b9;border-color:#c3a570}
.path-panel[data-illustration=atlas-founding]{background:#e1e9d7;border-color:#9eae9b}
.path-panel[data-illustration=atlas-movement]{background:#e9ede1;border-color:#aab89e}
.path-panel[data-illustration=atlas-tattoo]{background:#f3ded1;border-color:#ca9073}

.collection:is([data-subject=Architecture],[data-subject="Art movements"]) .card-image{
  width:100%;height:auto;aspect-ratio:8/5;object-fit:contain;
}
.path-panel[data-subject=Philosophy]{background:#e9f1e7;border-color:#94a895;color:#263b31}

.type-specimen{
  margin:0;aspect-ratio:8/5;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;overflow:hidden;background:var(--atlas-ink);color:var(--atlas-ink);container-type:inline-size;
  border-bottom:1px solid var(--atlas-ink);
}
.type-sample{
  min-width:0;display:grid;grid-template-rows:auto 1fr;padding:13px 10px 10px;
  background:var(--atlas-orange);
}
.type-sample+ .type-sample{background:var(--atlas-orange)}
.type-sample-label{
  font:700 clamp(9px,3.4cqw,15px)/1.2 system-ui,sans-serif;
  letter-spacing:.03em;
}
.type-sample-copy{
  align-self:center;min-width:0;display:grid;
  font:700 clamp(12px,5.9cqw,27px)/1.15 Georgia,serif;
}
[data-specimen=kerning] .type-sample-copy{
  display:flex;justify-content:center;align-items:baseline;
  font-size:clamp(29px,16cqw,75px);
}
[data-specimen=kerning] .type-sample:first-child .type-sample-copy span+span{margin-left:.17em}
[data-specimen=kerning] .type-sample:last-child .type-sample-copy span+span{margin-left:-.13em}
[data-specimen=tracking]{background:var(--atlas-ink);color:var(--atlas-ink)}
[data-specimen=tracking] .type-sample{background:var(--atlas-lime)}
[data-specimen=tracking] .type-sample+.type-sample{background:var(--atlas-lime)}
[data-specimen=tracking] .type-sample-copy{font:790 clamp(12px,6cqw,29px)/1.2 system-ui,sans-serif;text-align:center}
[data-specimen=tracking] .type-sample:last-child .type-sample-copy{letter-spacing:.16em}
[data-specimen=leading] .type-sample{background:var(--atlas-cherry);color:#fff}
[data-specimen=leading] .type-sample+.type-sample{background:var(--atlas-cherry)}
[data-specimen=leading] .type-sample:first-child .type-sample-copy{line-height:.99}
[data-specimen=leading] .type-sample:last-child .type-sample-copy{line-height:1.7}
[data-specimen=proximity] .type-sample,[data-specimen=alignment] .type-sample{background:var(--atlas-yellow);color:var(--atlas-ink)}
[data-specimen=proximity] .type-sample+.type-sample,[data-specimen=alignment] .type-sample+.type-sample{background:var(--atlas-yellow)}
[data-specimen=proximity] .type-sample-copy{font:720 clamp(10px,4.4cqw,23px)/1.1 system-ui,sans-serif}
[data-specimen=proximity] .type-sample-copy span:nth-child(even){font-size:.78em;font-weight:550}
[data-specimen=proximity] .type-sample:first-child .type-sample-copy{gap:.32em}
[data-specimen=proximity] .type-sample:last-child .type-sample-copy span:nth-child(2){margin-bottom:.78em}
[data-specimen=alignment] .type-sample-copy{font-size:clamp(11px,5.2cqw,24px);gap:.36em}
[data-specimen=alignment] .type-sample:first-child .type-sample-copy span:nth-child(2){text-align:center}
[data-specimen=alignment] .type-sample:first-child .type-sample-copy span:nth-child(3){text-align:right}
[data-specimen=contrast]{background:var(--atlas-ink);color:var(--atlas-ink)}
[data-specimen=contrast] .type-sample{background:var(--atlas-yellow)}
[data-specimen=contrast] .type-sample:first-child .type-sample-copy{color:#ac9230}
[data-specimen=contrast] .type-sample:last-child .type-sample-copy{color:#19171a}
.today-feature:has(.type-specimen){grid-template-columns:minmax(0,.9fr) minmax(0,1fr)}
.lesson-interaction .type-specimen{border:0}
@media(max-width:660px){
  .today-feature:has(.type-specimen){grid-template-columns:1fr}
  .today-feature .type-specimen{grid-row:1}
}

/* Lit type specimens and physical materials. The artwork itself responds to the exercises. */
.collection.design-workshop{
  background:
    radial-gradient(ellipse at 12% 0%,#73231c 0%,transparent 38%),
    radial-gradient(ellipse at 95% 22%,#4e2018 0%,transparent 44%),
    #1a1412;
  color:#fff5eb;border:0;border-radius:12px;padding:clamp(16px,3vw,38px);
}
.design-workshop>h3{
  font-size:clamp(37px,7.6vw,92px);line-height:.94;margin:0;letter-spacing:-.075em
}
.design-workshop>.workshop-intro{margin:10px 0 22px;color:#ffe2d2;font-weight:600}
.design-workshop .collection-items{gap:clamp(16px,2.1vw,26px);align-items:stretch}
.card[data-technique]{min-width:0;border:0;border-radius:8px;color:var(--atlas-ink);background:#fff}
.design-workshop .card[data-technique]{box-shadow:0 16px 32px #0e060669,0 1px 0 #ffb18855}
.card[data-technique] :is(.read,.summary-source){color:var(--atlas-cherry)}
.card[data-technique] .read{border-color:var(--atlas-cherry);font-weight:750}
.card[data-technique] .actions button{min-height:44px}
.design-workshop .card-body{padding:clamp(15px,2.2vw,25px)}
.design-workshop .card h4{font-size:clamp(22px,3vw,32px);line-height:1.03}
.design-workshop .card[data-technique=kerning]{
  grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  align-items:stretch;
}
.design-workshop .card[data-technique=kerning] .card-body{align-self:center}
.design-workshop .card[data-technique=kerning] h4{font-size:clamp(27px,4vw,46px)}
.kerning-lab{
  container-type:inline-size;position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(15px,2.7vw,32px);color:#fff2d9;
  background:radial-gradient(ellipse at 31% 18%,#ff8c2f 0,transparent 57%),
    linear-gradient(135deg,#c3470a 8%,#953017 55%,#290c0b 100%);
}
.kerning-lab::before,.kerning-lab::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;border-radius:50%;aspect-ratio:1;
  background:radial-gradient(circle at 33% 27%,#ffe49a,#ff8a30 39%,#ad2e13 73%,#3c100c);
}
.kerning-lab::before{width:37%;top:-12%;right:-4%;filter:blur(7px);opacity:.8}
.kerning-lab::after{width:24%;bottom:0;left:-10%;filter:blur(12px)}
.kerning-pair{
  display:flex;justify-content:center;align-items:center;
  font:700 clamp(80px,38cqw,235px)/.99 Georgia,serif;letter-spacing:-.095em;
  margin:0;padding:12px 9% 23px 0;min-height:clamp(152px,42cqw,295px);
  filter:drop-shadow(10px 16px 12px #2d0808a8);
}
.kerning-pair span{
  position:relative;isolation:isolate;line-height:1;color:#ffe59b;
  background:linear-gradient(#fff3d2 15%,#ffc45f 47%,#ff9a26 90%);
  background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:1px #fff0a77a;
}
.kerning-pair span::before{
  content:attr(data-glyph);position:absolute;inset:0;z-index:-1;
  -webkit-text-fill-color:transparent;-webkit-text-stroke:0;
  text-shadow:2px 2px #ac450d,4px 4px #a7380c,6px 6px #a3320b,8px 8px #8f290b,10px 10px #82250a,12px 12px #6f200c,14px 14px #56180b,16px 16px #451410;
}
.kerning-lab label{
  position:relative;display:block;padding:7px 12px 2px;border-radius:5px;
  background:#321711eb;color:#fff2d9;font-weight:700;
}
.kerning-lab input{width:100%;display:block;padding:0;margin:0;min-height:44px;accent-color:#ffbe55}

.type-workbench{
  min-width:0;container-type:inline-size;overflow:hidden;color:#fff5e9;background:#251c17;
}
.type-stage{
  position:relative;isolation:isolate;display:grid;align-content:center;min-height:clamp(150px,57cqw,235px);
  padding:clamp(11px,5cqw,28px);overflow:hidden;
}
.type-stage button,.type-controls button{min-height:44px}
.type-controls{padding:10px clamp(10px,4cqw,20px);color:inherit}
.type-controls .type-feedback{font-size:.87rem;line-height:1.36;color:inherit;margin:7px 0 0;min-height:2.7em}

/* Tracking: separate, raised sorts on a recessed chase. */
[data-technique=tracking] .type-stage{
  background:radial-gradient(ellipse at 26% 10%,#c8ef56,#6c912c 53%,#202c0c 100%);
}
.type-rail:is(button,[aria-pressed=true]){
  display:grid;justify-items:center;gap:13px;width:100%;padding:24px 3% 10px;
  border:1px solid #182608;border-radius:6px;color:#edffbb;
  background:linear-gradient(164deg,#415319,#121e09 54%,#34421b);
  box-shadow:inset 0 7px 11px #0e150be0,0 2px 0 #a8c54c,0 14px 21px #1f300c91;
  transform:perspective(490px) rotateX(11deg);
}
.type-rail-letters{
  display:flex;justify-content:center;gap:.05em;width:100%;white-space:nowrap;
  font:900 clamp(19px,9cqw,59px)/1 system-ui,sans-serif;
  transition:gap .26s ease;
}
.type-rail[aria-pressed=true] .type-rail-letters{gap:.26em}
.type-rail-letters span{
  display:grid;place-items:center;width:1.13em;height:1.27em;border-radius:.10em;color:#20350a;
  background:linear-gradient(152deg,#f5ffa5,#b5dd41 51%,#7fa21e);
  border-top:1px solid #f7ffcb;box-shadow:0 .12em 0 #6a8a20,0 .23em 0 #485f13,0 .32em .22em #0d170d;
}
.type-rail-cue{font-size:.8rem;font-weight:750}

/* Leading: a printed proof on a stack of paper, with the baselines ruled in red. */
[data-technique=leading] .type-stage{
  background:radial-gradient(ellipse at 47% 0,#ff806c,#c42e34 55%,#641121 100%);
}
.type-proof{
  display:grid;align-content:center;min-height:clamp(124px,39cqw,186px);padding:14px 10%;
  transform:rotate(-3deg);border-radius:2px;color:#291615;
  background:linear-gradient(135deg,#fff9ec,#fff0db 72%,#e8c9ae);
  font:700 clamp(17px,8.2cqw,44px)/.94 Georgia,serif;
  box-shadow:2px 4px 0 #e8ba96,4px 8px 0 #f7d9b2,7px 13px 0 #c18869,9px 21px 21px #4e0a13a8;
}
.type-proof span{border-bottom:1px solid #b82d38;transition:margin .23s ease}
.type-proof[data-proof="1"] span:nth-child(2){margin-top:.28em}
.type-proof[data-proof="2"] span:nth-child(2){margin-top:.82em}
.type-proof-choices,.ink-palette{display:flex;flex-wrap:wrap;gap:6px}
.type-proof-choices button,.type-reset,.ink-palette button{
  background:#fff8ea;color:#2b1915;border:1px solid #fff8ea;
  border-radius:4px;font-weight:730;padding:6px 9px;
}
.type-proof-choices button[aria-pressed=true],.ink-palette button[aria-pressed=true]{
  background:#ffcf47;border-color:#ffcf47;color:#261805
}

/* Proximity: pick up a loose time ticket and place it beside its event. */
[data-technique=proximity] .type-stage{
  gap:14px;background:radial-gradient(ellipse at 15% 0,#ff9e46,#d14918 62%,#80260b);
}
.ticket-board,.ticket-pocket{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.type-stage .event-ticket{
  position:relative;text-align:left;padding:8px 6px;color:#28160a;border:1px solid #ffeaac;border-radius:3px;
  font-size:clamp(.72rem,5.3cqw,1.08rem);font-weight:800;
  background:linear-gradient(135deg,#fff4c5,#ffc966);
  box-shadow:0 3px 0 #ad6316,0 9px 9px #74210e8a;
}
.event-ticket:first-child{transform:rotate(-3deg)}
.event-ticket:nth-child(2){transform:rotate(3deg)}
.event-ticket span{
  display:block;min-height:26px;margin-top:4px;padding:3px;color:#502b0e;
  border:1px dashed #915723;font:680 .72rem/1.2 ui-monospace,monospace;
}
.event-ticket[data-matched=true] span{background:#ffefb1;border-style:solid;color:#291507}
.type-stage .time-ticket{
  color:#481c0e;border:1px solid #ffdea1;border-radius:3px;background:#fff0ce;
  font:750 .76rem/1.2 ui-monospace,monospace;padding:4px;box-shadow:0 3px 0 #ce8f52,0 8px 11px #661b0c82;
}
.type-stage .time-ticket[aria-pressed=true]{background:#ffcf47;border-color:#3d2510;transform:translateY(-3px)}
.ticket-pocket{min-height:44px}
.ticket-pocket [hidden]{display:none}

/* Alignment: independent strips snap against a registration guide. */
[data-technique=alignment] .type-stage{
  background:radial-gradient(ellipse at 90% 0%,#ffdb52,#e39412 60%,#865010 100%);
}
.alignment-poster{
  display:grid;position:relative;gap:6px;padding:8px 8px 8px 15px;background:#532e14;
  border:1px solid #8a4b1b;border-radius:4px;transform:rotate(-3deg);
  box-shadow:5px 8px 0 #683612,9px 16px 19px #4b220c83;
}
.alignment-poster::after{
  content:"";position:absolute;inset:0 auto 0 21px;pointer-events:none;border-left:1px dashed #a82429;
}
.alignment-poster .alignment-line{
  text-align:left;border-radius:2px;border:1px solid #fff6c8;color:#2f1709;
  background:linear-gradient(#fff4c6,#ffd982);
  font:700 clamp(.79rem,6cqw,1.16rem)/1.15 Georgia,serif;padding:5px;
  padding-left:min(20%,35px);transition:padding-left .21s ease;
  box-shadow:0 2px 0 #a46728;
}
.alignment-poster .alignment-line:nth-child(2){padding-left:min(13%,21px)}
.alignment-poster .alignment-line:nth-child(3){padding-left:min(24%,43px)}
.alignment-poster .alignment-line[data-snapped=true]{padding-left:5px}

/* Contrast: uniform yellow in the measurement field, lit edges around the enamel sign. */
[data-technique=contrast] .type-stage{
  background:radial-gradient(ellipse at 26% 8%,#fe8569,#af2936 59%,#5d1627 100%);
}
.contrast-sign{
  display:grid;place-items:center;position:relative;min-height:clamp(97px,42cqw,168px);
  transform:perspective(380px) rotateY(-9deg) rotate(-5deg);
  background:#ffdd27;color:var(--sign-ink,#ac9230);
  border:3px solid #ffe887;border-radius:12px;
  font:800 clamp(.97rem,8.4cqw,2.4rem)/1 system-ui,sans-serif;
  box-shadow:2px 2px #edb831,4px 4px #ca8d19,7px 7px #97591e,10px 16px 19px #520c1bba;
}
.ink-palette button::before{
  content:"";display:inline-block;vertical-align:middle;width:.87em;height:.87em;
  border-radius:50%;margin-right:4px;background:var(--swatch);outline:1px solid #3b281e;
}
.card[data-technique] :focus-visible,.type-workbench :focus-visible,.kerning-lab :focus-visible{
  outline:2px solid #25140d;outline-offset:2px;box-shadow:0 0 0 2px #fff
}
@media(min-width:850px){
  .design-workshop .collection-items{grid-template-columns:repeat(6,minmax(0,1fr))}
  .design-workshop .card[data-technique]{grid-column:span 2}
  .design-workshop .card[data-technique=kerning]{grid-column:1/-1}
  .design-workshop .card:is([data-technique=tracking],[data-technique=leading]){grid-column:span 3}
}
@media(661px <= width < 850px){
  .design-workshop .collection-items{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:660px){
  .design-workshop .collection-items,.design-workshop .card[data-technique=kerning]{
    grid-template-columns:minmax(0,1fr)
  }
  .design-workshop .card-body{padding:16px}
}
@media(prefers-reduced-motion:reduce){
  .type-rail-letters,.type-proof span,.alignment-poster .alignment-line{transition:none}
}

@media(max-width:680px){
  body:has(#showcase[hidden]) .top .library-nav{
    border-color:var(--atlas-cherry);background:var(--atlas-ink);color:#fff;
  }
  body:has(#showcase[hidden]) .top .library-nav button:hover{background:#623027;color:#fff}
  body:has(#showcase[hidden]) .top .library-nav button[aria-pressed=true]{
    background:var(--atlas-yellow);color:var(--atlas-ink);border-color:var(--atlas-yellow)
  }
}

/* The library uses art that carries information and a different visual vocabulary by subject. */
.study-exhibit{
  --study-ink:#fff5e5;--study-paper:#27221f;--study-accent:#ffd36b;
  --study-stage:#171c18;
  margin:0;min-width:0;background:var(--study-paper);color:var(--study-ink);
}
.study-scene{
  position:relative;isolation:isolate;overflow:hidden;
  background:
    repeating-linear-gradient(120deg,#ffffff05 0 1px,transparent 1px 5px),
    radial-gradient(ellipse at 30% 8%,#ffffff19,transparent 70%),
    var(--study-stage);
}
.study-canvas{display:block;width:100%;height:auto;aspect-ratio:2/1}
.study-legend{display:grid;gap:11px;padding:11px 14px 15px}
.study-current{display:grid;align-content:start;gap:2px;min-height:3.3rem;font-size:.85rem;line-height:1.32}
.study-current strong{font-size:1.02rem;color:var(--study-accent)}
.study-current span{color:var(--study-ink)}
.study-controls{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start}
.study-controls button{
  min-height:44px;border-radius:4px;border:1px solid var(--study-accent);
  padding:5px 9px;color:var(--study-ink);font-size:.81rem;font-weight:730;background:transparent;
}
.study-controls button:is([aria-pressed=true],:hover){background:var(--study-accent);color:#231e18}
.study-controls button:focus-visible{outline:2px solid var(--study-accent);outline-offset:2px}
[data-study=optics]{--study-stage:#182820;--study-paper:#212a22;--study-accent:#d4ed91}
[data-study=press]{--study-stage:#802e2e;--study-paper:#422520;--study-accent:#ffdc97}
[data-study=film]{--study-stage:#32302a;--study-paper:#262622;--study-accent:#f5ba81}
[data-study=fossil]{--study-stage:#5b422b;--study-paper:#332b23;--study-accent:#f0bd7b}
[data-study=wood]{--study-stage:#503c29;--study-paper:#32251e;--study-accent:#ffc278}
[data-study=maps]{--study-stage:#294f3d;--study-paper:#233b2c;--study-accent:#d7eaa6}
[data-study=photo]{--study-stage:#3b322a;--study-paper:#26241e;--study-accent:#ffcf7c}
[data-study=photo] .study-scene{background-color:#312b23}
[data-study=press] .study-legend{border-top:3px double #ae7c54}
[data-study=film] .study-legend{border-top:1px dashed #b68b5f}
[data-study=maps] .study-legend{border-top:1px solid #688065}
[data-study=fossil] .study-legend{border-top:1px solid #99704b}
.study-exhibit:where([data-study=press],[data-study=maps],[data-study=fossil],[data-study=optics]) .study-controls button{
  color:#201b15;background:var(--study-accent);
}
.study-exhibit:where([data-study=press],[data-study=maps],[data-study=fossil],[data-study=optics]) .study-controls button:hover{filter:brightness(.92)}
.path-panel[data-visual=lesson-study]{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(15px,3vw,30px);
  align-items:start;background:#fff7e8;color:#261c17;border-color:#d4ad88
}
.path-panel[data-visual=lesson-study] .study-exhibit,.lesson-interaction .study-exhibit{border-radius:7px;overflow:hidden}
.today-feature:has(.study-exhibit,.lesson-editorial,.type-workbench,.kerning-lab){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.lesson-interaction:has(.study-exhibit){border:0}
.card-example{margin:.25rem 0 .5rem;border-top:1px solid var(--line)}
.card-example summary{display:flex;align-items:center;min-height:44px;cursor:pointer;font-size:.91rem;font-weight:750;color:var(--accent)}
.card-example summary::before{content:"+";width:1.1em}
.card-example[open] summary::before{content:"−"}
.card .card-example p{font-size:.91rem;margin:0 0 10px}

/* Text-led covers accompany legacy lessons whose ideas have no assigned image. */
.lesson-editorial{
  --cover:#efba5d;--cover-ink:#2b1c18;--cover-edge:#8c421f;--cover-secondary:#f9e191;
  margin:0;min-width:0;position:relative;isolation:isolate;overflow:hidden;
  display:grid;align-content:space-between;gap:12px;padding:clamp(14px,2.5vw,28px);
  min-height:clamp(148px,21vw,230px);color:var(--cover-ink);
  background:
    radial-gradient(ellipse at 15% 10%,#ffffff34,transparent 62%),
    repeating-linear-gradient(118deg,#24201808 0 1px,transparent 1px 4px),var(--cover);
}
.lesson-editorial::before{
  content:"";position:absolute;z-index:-1;inset:13% -6% -24% 58%;
  border:1px solid var(--cover-secondary);
  background:repeating-linear-gradient(105deg,transparent 0 5px,#17181328 6px 7px),
    linear-gradient(120deg,var(--cover-secondary),transparent 85%);
  transform:rotate(-17deg);box-shadow:8px 8px var(--cover-edge);
}
.editorial-subject{
  font:750 .73rem/1.2 ui-monospace,monospace;text-transform:uppercase;letter-spacing:.08em;
}
.editorial-display{
  overflow-wrap:anywhere;max-width:18ch;
  font:700 clamp(23px,3.35vw,48px)/.99 Georgia,serif;letter-spacing:-.045em;text-transform:capitalize;
}
.lesson-editorial[data-editorial=archive]{
  --cover:#f1cf8e;--cover-ink:#41241a;--cover-edge:#7d3526;--cover-secondary:#f8e6b4
}
.lesson-editorial[data-editorial=archive]::before{inset:15% 12% -38% 60%;transform:rotate(19deg)}
.lesson-editorial[data-editorial=ink]{
  --cover:#fb784e;--cover-ink:#322016;--cover-edge:#893725;--cover-secondary:#ffb772
}
.lesson-editorial[data-editorial=ink]::before{border-radius:50%;inset:-39% -5% -16% 64%;transform:rotate(24deg)}
.lesson-editorial[data-editorial=flash]{
  --cover:#a23234;--cover-ink:#fff2ce;--cover-edge:#5e282a;--cover-secondary:#c65d42
}
.lesson-editorial[data-editorial=flash]::before{border-radius:50%;inset:-26% -8% -20% 53%;transform:rotate(21deg)}
.lesson-editorial[data-editorial=sound]{
  --cover:#303b22;--cover-ink:#e2f097;--cover-edge:#131e11;--cover-secondary:#839b42
}
.lesson-editorial[data-editorial=sound]::before{
  inset:-39% -2% -18% 60%;border-radius:50%;
  background:repeating-radial-gradient(circle at 48% 53%,#181e1350 0 2px,transparent 3px 7px),var(--cover-secondary)
}
.lesson-editorial[data-editorial=type]{--cover:#f4ad70;--cover-ink:#351f16;--cover-edge:#853c2a;--cover-secondary:#fbd092}
.lesson-editorial[data-editorial=type]::before{inset:44% -1% -55% 66%;transform:rotate(32deg)}
.lesson-editorial[data-editorial=poster]{
  --cover:#f9dc5c;--cover-ink:#2e2216;--cover-edge:#c04b37;--cover-secondary:#f78056
}
.lesson-editorial[data-editorial=poster] .editorial-display{font:900 clamp(23px,3.3vw,47px)/.95 system-ui,sans-serif}
.lesson-editorial[data-editorial=field]{
  --cover:#c9dc83;--cover-ink:#283719;--cover-edge:#52713a;--cover-secondary:#e1e8a2
}
.lesson-editorial[data-editorial=field]::before{inset:-21% -4% -14% 63%;border-radius:50%;transform:rotate(37deg)}
.lesson-editorial[data-editorial=kitchen]{
  --cover:#e65e44;--cover-ink:#2c1714;--cover-edge:#7d3028;--cover-secondary:#f3a265
}
.lesson-editorial[data-editorial=kitchen]::before{inset:3% -21% -13% 65%;border-radius:50%}
.lesson-editorial[data-editorial=sky]{
  --cover:#263526;--cover-ink:#e9f2be;--cover-edge:#0f2018;--cover-secondary:#718d57
}
.lesson-editorial[data-editorial=sky]::before{inset:4% -9% -17% 61%;border-radius:50%}
.collection:not(.design-workshop) .collection-items{align-items:stretch}
.collection:not(.design-workshop) .card{min-width:0}
.collection:not(.design-workshop) .card:has(.study-exhibit,.lesson-editorial){background:#fff}
.collection:not(.design-workshop) .card .card-body{flex:1}
.collection[data-subject=Music] .card:has(.lesson-editorial){color:var(--ink)}
.collection[data-subject=Music] .card:has(.lesson-editorial) :is(a,.read){color:var(--accent)}
.collection[data-subject=Music] .card:has(.lesson-editorial) p{color:var(--muted)}
.section-banner[data-subject="Color science"],.section-banner[data-subject=Cartography]{background:#88aa49}
.section-banner[data-subject="Printing history"],.section-banner[data-subject=Film]{background:#bd482f}
.section-banner[data-subject=Photography],.section-banner[data-subject=Paleontology]{background:#ce7e41}

/* Graphic design borrows the surfaces and marks of a working print studio. */
.collection.design-workshop{background:#2b211b}
.kerning-lab{
  background:repeating-linear-gradient(112deg,#1f150914 0 1px,transparent 1px 5px),#e29651;
  color:#241912;
}
.kerning-lab::before,.kerning-lab::after{display:none}
.kerning-pair{filter:none}
.kerning-pair span{
  background:none;color:#382922;-webkit-text-fill-color:#382922;-webkit-text-stroke:0;
  text-shadow:1px 1px #a45032,2px 2px #a45032,3px 3px #a45032,4px 4px #a45032,5px 5px #a45032;
}
.kerning-pair span::before{display:none}
.kerning-lab label{background:#fff0d2;color:#332119}
[data-technique=tracking] .type-stage{background:#a8ba67}
[data-technique=leading] .type-stage{background:#bc594b}
[data-technique=proximity] .type-stage{background:#d58850}
[data-technique=alignment] .type-stage{background:#c39654}
[data-technique=contrast] .type-stage{background:#ad5343}
@media(max-width:680px){
  .path-panel[data-visual=lesson-study],.today-feature:has(.study-exhibit,.lesson-editorial,.type-workbench,.kerning-lab){grid-template-columns:minmax(0,1fr)}
  .today-feature :is(.study-exhibit,.lesson-editorial,.type-workbench,.kerning-lab){grid-row:1}
}
.editorial-display{text-transform:none}
[data-study=kitchen]{--study-stage:#733526;--study-paper:#43291e;--study-accent:#ffce8b}
[data-study=sky]{--study-stage:#16281d;--study-paper:#252d22;--study-accent:#dce79b}
[data-study=workshop]{--study-stage:#6d4233;--study-paper:#33251e;--study-accent:#ffd18e}
.lesson-editorial[data-lesson=genre-bauhaus]{--cover:#f4d65d;--cover-ink:#26231f;--cover-edge:#d55338;--cover-secondary:#d55338}
.lesson-editorial[data-lesson=genre-bauhaus]::before{transform:none;border-radius:50%}
.lesson-editorial[data-lesson=genre-swiss]{
  --cover:#f6e9d1;--cover-ink:#a52829;--cover-edge:#a52829;--cover-secondary:#ead9b5;
  background:repeating-linear-gradient(90deg,#a5282930 0 1px,transparent 1px calc(100% / 8)),#f6e9d1
}
.lesson-editorial[data-lesson=genre-swiss]::before{content:none}
.lesson-editorial[data-lesson=genre-swiss] .editorial-display{font-family:system-ui,sans-serif;letter-spacing:-.075em}
.lesson-editorial[data-lesson=genre-constructivist]::before{transform:rotate(-36deg);inset:30% -15% -37% 49%;border-radius:0}
.lesson-editorial[data-lesson=genre-deco]::before{
  border-radius:0;transform:rotate(45deg);background:repeating-linear-gradient(90deg,#fadb83 0 1px,#633829 1px 9px)
}
.lesson-editorial[data-lesson=genre-nouveau]{
  --cover:#dec986;--cover-ink:#283826;--cover-edge:#3e5c3e;--cover-secondary:#93ab66;
}
.lesson-editorial[data-lesson=genre-nouveau]::before{transform:rotate(16deg);border-radius:48% 12% 38% 5%}
.index-studies{margin:0 0 19px}
.index-studies h4{font-size:1.15rem;margin:0 0 8px}
.index-study-tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.index-study-tiles .index-study-tile{
  display:grid;overflow:hidden;align-content:start;text-align:left;min-width:0;
  color:#fff6db;background:var(--study-stage);border:1px solid var(--study-stage);
  border-radius:5px;padding:0;
}
.index-study-tile span{padding:8px 9px;font-weight:770;line-height:1.15}
.index-study-tile canvas{transition:transform .18s ease}
.index-study-tile:hover canvas{transform:scale(1.035)}
@media(max-width:850px){.index-study-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:460px){.index-study-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.index-study-tile canvas{transition:none}}

/* Source imagery sets the visual character of each lesson. */
.authentic-media{margin:0;min-width:0;background:#171b17;color:#fff;overflow:hidden}
.media-image-button{display:block;position:relative;width:100%;padding:0;border:0;border-radius:0;overflow:hidden;background:#171b17;color:#fff}
.media-image-button img{display:block;width:100%;height:280px;object-fit:cover;transition:transform .35s ease}
.media-image-button:hover img{transform:scale(1.025)}
.media-image-button:focus-visible{outline:3px solid #ffdd27;outline-offset:-4px}
.media-inspect-label{position:absolute;right:10px;bottom:10px;background:#171b17dd;color:#fff;padding:5px 9px;border-radius:3px;font-size:11px;font-weight:700;letter-spacing:.035em}
.authentic-media[data-fit=contain] .media-image-button{background:#20231e;padding:18px}
.authentic-media[data-fit=contain] img{height:244px;object-fit:contain;filter:drop-shadow(0 8px 12px #0008)}
.media-caption{padding:12px 15px 14px;background:#171b17;color:#f5f5ef;line-height:1.4;font-size:12px}
.media-caption-title{display:block;font-weight:600;overflow-wrap:anywhere}
.media-credits{font-size:11px;line-height:1.45;margin-top:7px}
.media-credits summary{cursor:pointer;min-height:32px;display:list-item;align-content:center;overflow-wrap:anywhere}
.media-credits p{margin:8px 0;color:inherit!important;font-size:12px}
.media-credits a{color:inherit!important;text-decoration:underline;text-underline-offset:3px}
.media-credits small{display:block;font-size:10px;margin-top:8px;opacity:.85}
.card:has(.authentic-media,.photo-lab){padding:0;overflow:hidden;border:1px solid #1e211a25;background:#fff;color:#20211c;box-shadow:0 7px 22px #1f170c0d;gap:0}
.card:has(.authentic-media,.photo-lab) .card-body{padding:20px;gap:12px;color:#20211c;background:#fff}
.card:has(.authentic-media,.photo-lab) .card-body p{color:#444a40}
.card:has(.authentic-media,.photo-lab) .summary-source{color:#91311f}
.card:has(.authentic-media,.photo-lab) h4{font-size:25px;line-height:1.13}
.collection[data-subject] .collection-items .card:has(.authentic-media,.photo-lab){display:flex;flex-direction:column;grid-column:auto;grid-template-columns:none;background:#fff;border:1px solid #1e211a25;border-radius:14px}
.collection[data-subject] .collection-items .card:has(.authentic-media,.photo-lab) .card-body{display:flex;flex-direction:column;align-items:stretch;grid-template-columns:none}
.collection[data-subject] .card:has(.authentic-media,.photo-lab) .actions{grid-column:auto}
.collection[data-subject] .card:has(.authentic-media,.photo-lab) .card-body :is(a,.read){color:#91311f}
.collection[data-subject]:has(.authentic-media,.photo-lab) .collection-items{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
.collection:has(.authentic-media,.photo-lab){background:#fff;color:#20211c;border-color:#e4e6df}
.collection.design-workshop:has(.authentic-media){background:#fff4e6;color:#20211c}
.collection.design-workshop:has(.authentic-media)>.workshop-intro{color:#444a40}
.card-exercise{padding:0 16px;background:#f4f6ed;color:#20211c;border-top:1px solid #e4e6df;border-bottom:1px solid #e4e6df}
.card-exercise>summary{cursor:pointer;font-size:13px;font-weight:750;padding:13px 0;min-height:46px}
.card-exercise[open]{padding-bottom:16px}
.card-exercise :is(.study-exhibit,.type-workbench,.kerning-lab){margin:0;border-radius:6px;overflow:hidden}
.path-panel[data-visual=authentic]{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);padding:0;gap:26px;overflow:hidden;background:#fff;color:#20211c;border:1px solid #e4e6df}
.path-panel[data-visual=authentic] .path-copy{padding:24px 24px 24px 0}
.path-panel[data-visual=authentic] .authentic-media{height:100%}
.path-panel[data-visual=authentic] .media-image-button img{height:340px}
.path-panel[data-visual=authentic] .authentic-media[data-fit=contain] .media-image-button img{height:304px}
.index-study-tile img{width:100%;height:120px;object-fit:cover;display:block}
.index-study-tiles .index-study-tile{background:#171b17;color:white}
.index-board-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:24px}
.index-board-tiles .index-study-tile{display:grid;overflow:hidden;padding:0;border-radius:7px;text-align:left;background:#171b17;color:white}
.index-board-tiles .index-study-tile img{height:clamp(150px,23vw,270px)}
.index-board-tiles .index-study-tile span{padding:14px;font-size:clamp(18px,2.4vw,25px)}
.index-making{margin:28px 0;min-width:0}
.index-making h4{font-size:clamp(24px,4vw,34px);line-height:1.08;margin:0 0 8px;letter-spacing:-.035em}
.index-making-intro{font-size:15px;line-height:1.5;margin:0 0 18px}
.index-making-group{margin:10px 0;border:1px solid #20211c24;border-radius:8px;background:#fff;overflow:hidden}
.index-making-group>summary{display:flex;align-items:center;gap:12px;min-height:82px;padding:10px 14px 10px 10px;cursor:pointer;list-style:none;background:#171b17;color:#fff}
.index-making-group>summary::-webkit-details-marker{display:none}
.index-making-group>summary::after{content:'+';font-size:28px;line-height:1;flex:none;margin-left:auto;font-weight:500;color:#ffdd27}
.index-making-group[open]>summary::after{content:'−'}
.index-making-group>summary:focus-visible{outline:3px solid #ffdd27;outline-offset:-4px}
.index-making-group>summary>img{width:64px;height:64px;object-fit:cover;flex:none;border-radius:4px}
.index-making-label{display:grid;gap:4px;min-width:0}
.index-making-label strong{font-size:17px;line-height:1.15;overflow-wrap:anywhere}
.index-making-label small{font-size:12px;color:#e9eddf;line-height:1.25}
.index-making-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:12px}
.index-making-tiles .index-study-tile{display:grid;align-content:start;min-width:0;padding:0;overflow:hidden;border:0;border-radius:5px;background:#171b17;color:#fff;text-align:left}
.index-making-tiles .index-study-tile img{height:clamp(130px,18vw,200px)}
.index-making-tiles .index-study-tile span{min-height:52px;font-size:15px;overflow-wrap:anywhere}
.index-making-tiles .index-study-tile:focus-visible{outline:3px solid #b92d20;outline-offset:3px}
@media(max-width:680px){.index-making-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.index-making-tiles .index-study-tile img{height:150px}}
.today-feature .authentic-media{align-self:stretch}
.today-feature .authentic-media img{height:330px}
.lesson-interaction .authentic-media{border-radius:9px;margin:18px 0}
.lesson-interaction .authentic-media img{height:auto;max-height:65vh;object-fit:contain}
.media-viewer{width:min(1100px,96vw);max-height:94dvh;padding:16px;background:#171b17;color:#fff;border:0}
.media-viewer::backdrop{background:#000d}
.media-viewer-top{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.media-viewer-top strong{margin-right:auto}
.media-viewer button{min-height:44px;background:#fff;color:#181b16;border:0;padding:8px 14px;border-radius:5px}
.media-viewport{overflow:auto;max-height:66dvh;overscroll-behavior:contain;background:#111}
.media-viewport img{display:block;width:100%;height:auto;max-height:66dvh;object-fit:contain!important}
.media-viewport.enlarged img{width:180%;max-width:none;max-height:none}
.media-viewer>p{font-size:14px;color:#fff;margin:12px 0}
.photo-lab{margin:0;background:#171b17;color:#fff;overflow:hidden;min-width:0}
.photo-stage{position:relative;aspect-ratio:4/3;overflow:hidden;isolation:isolate;background:#171b17}
.photo-stage>img{width:100%;height:100%;object-fit:cover!important;display:block;transition:filter .25s ease,transform .35s ease}
.photo-state{position:absolute;left:10px;bottom:10px;right:10px;width:fit-content;max-width:calc(100% - 20px);font-size:11px;font-weight:750;padding:6px 9px;background:#171b17db;color:#fff;border-left:3px solid #ffdd27;z-index:3;line-height:1.4}
.photo-controls{padding:14px 15px 12px;color:#f3f5eb;background:#171b17}
.photo-choices{display:flex;flex-wrap:wrap;gap:6px}
.photo-choices button,.photo-inspect{min-height:44px;padding:8px 10px;border-radius:4px;font-size:12px;line-height:1.2;border:1px solid #fff5;background:#242922;color:#fff;font-weight:650;flex:1 1 auto}
.photo-choices button[aria-pressed=true]{background:#f0d82e;color:#171b17;border-color:#f0d82e}
.photo-choices button:hover,.photo-inspect:hover{background:#3a4233;color:#fff}
.card .photo-feedback,.photo-feedback{font-size:13px;line-height:1.5;color:#f2f4ea!important;margin:12px 0 8px;min-height:3em}
.photo-simulation{display:block;color:#c2c8bb;font-size:10px;line-height:1.45;margin-top:8px}
.photo-inspect{margin-top:12px;width:100%;background:transparent;border-color:#fff3;color:#e5e9da}
.photo-histogram{display:block;width:100%;height:auto;max-height:100px;margin-bottom:12px}
.photo-crop-guide{position:absolute;inset:17%;border:2px solid #ffdd27;box-shadow:0 0 0 200px #0008;z-index:2}
.photo-crop-guide[hidden]{display:none}
.photo-mask{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;pointer-events:none}
@media(max-width:680px){
 .collection[data-subject]:has(.authentic-media,.photo-lab) .collection-items{grid-template-columns:1fr}
 .path-panel[data-visual=authentic]{grid-template-columns:1fr;gap:0}
 .path-panel[data-visual=authentic] .path-copy{padding:20px}
 .path-panel[data-visual=authentic] .media-image-button img{height:240px}
 .path-panel[data-visual=authentic] .authentic-media[data-fit=contain] .media-image-button img{height:204px}
 .card .media-image-button img{height:280px}
 .card .authentic-media[data-fit=contain] img{height:244px}
 .photo-stage{aspect-ratio:4/3}
 .today-feature:has(.authentic-media,.photo-lab){grid-template-columns:1fr}
 .today-feature :is(.authentic-media,.photo-lab){grid-row:1}
 .photo-choices button{font-size:13px;min-height:46px}
 .media-viewer{padding:12px}
}
@media(min-width:681px) and (max-width:1000px){.collection[data-subject]:has(.authentic-media,.photo-lab) .collection-items{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.media-image-button img,.photo-stage>img{transition:none}}

.beta-notice{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 20px;background:#ffdf29;color:#211915;font-size:14px}.beta-notice strong{font-weight:800}.beta-family{max-width:1200px;margin:32px auto;padding:28px 24px;border-top:4px solid #ed6025;color:#211915}.beta-family h2{font-size:26px;margin:0 0 10px}.beta-family p{max-width:650px;line-height:1.6}.beta-family nav{display:flex;flex-wrap:wrap;gap:12px}.beta-family a{display:block;padding:14px 16px;background:#211915;color:white;border-radius:6px;line-height:1.4}.beta-family a:focus-visible{outline:3px solid #ed6025;outline-offset:4px}@media(max-width:600px){.beta-notice{justify-content:flex-start;gap:5px}.beta-family nav{display:grid}.beta-family{padding:24px 18px}}

#install-atlas:not([hidden]){
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  padding:6px 10px;border:1px solid #211915;border-radius:5px;
  color:#fffaf0;background:#211915;font-weight:750;white-space:nowrap
}
#install-atlas:hover{background:#412522}
#install-atlas img,#install-guide .install-heading img{border-radius:5px}
#install-guide{width:min(440px,calc(100% - 32px));padding:22px}
#install-guide .install-heading{display:flex;align-items:center;gap:12px}
#install-guide h2{font-size:clamp(21px,5vw,28px);line-height:1.08}
#install-guide ol{padding-inline-start:24px}
#install-guide li{margin-block:9px}
#install-guide form{display:flex;justify-content:flex-end;margin-top:16px}
#install-guide form button{min-height:44px}
@media(max-width:600px){
  .beta-notice{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 10px;padding:8px 14px}
  .beta-notice>span{grid-column:1/-1;grid-row:2}
  #install-atlas{grid-column:2;grid-row:1}
}

.top .library-nav>a{
  display:flex;align-items:center;justify-content:center;
  box-sizing:border-box;min-height:44px;padding:7px 12px;
  color:inherit;border:1px solid transparent;border-radius:5px;text-decoration:none;
}
.top .library-nav>a:hover{background:#412522;color:#fff9ed}
@media(max-width:680px){
  .top .library-nav>a,.top .library-nav>button{
    min-height:46px;padding-inline:2px;font-size:clamp(.72rem,3.4vw,.91rem);font-weight:700
  }
}

@media(max-width:360px){.brand{font-size:17px;gap:6px}}

/* Explore: always-open subject directory. Taxonomy also feeds interests. */
.controls .topics,main>.topics{display:block;flex-basis:100%;width:100%;order:4;grid-column:1/-1}
.controls .topics[hidden],main>.topics[hidden]{display:none}
.controls .library-search{order:0;flex:1 1 300px}
.controls .preference-actions{order:1}
.controls .subject-picker{display:none}
.directory-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:12px 0 22px}
.directory-toolbar h3{font-size:clamp(21px,3vw,28px);letter-spacing:-.04em;line-height:1.15}
.directory-toolbar>.directory-subject{width:auto;min-width:155px;border-radius:5px;padding:10px 14px}
.directory-groups{columns:3;column-gap:24px}
.directory-group{break-inside:avoid;display:block;margin:0 0 24px;padding:18px 18px 10px;background:#fff;border:1px solid #ecdcd5;border-top:4px solid var(--atlas-orange);border-radius:7px;box-shadow:0 5px 16px #642c1510}
.directory-group:nth-child(3n+2){border-top-color:var(--atlas-cherry)}
.directory-group:nth-child(3n){border-top-color:var(--atlas-lime)}
.directory-group-heading{display:flex;align-items:baseline;gap:9px;margin-bottom:13px}
.directory-group h4{font-size:20px;line-height:1.15;letter-spacing:-.035em}
.directory-number{font-size:12px;font-weight:800;color:#a12831;font-variant-numeric:tabular-nums}
.directory-list{list-style:none;padding:0;margin:0}
.directory-list li+li{border-top:1px solid #f0e6df}
.directory-subject{display:flex;width:100%;justify-content:space-between;align-items:center;gap:12px;min-height:46px;padding:10px 6px;border:0;border-radius:4px;text-align:left;font-size:15px;line-height:1.35;background:transparent;color:var(--atlas-ink)}
.directory-subject>span:first-child{min-width:0;overflow-wrap:anywhere}
.directory-count{flex:none;font-size:12px;font-variant-numeric:tabular-nums;color:#6a5751}
.directory-subject:hover{background:#fff0e8;color:#211915}
.directory-subject[aria-pressed=true]{background:var(--atlas-cherry);color:#fff}
.directory-subject[aria-pressed=true] .directory-count{color:#fff}
.directory-subject:focus-visible{outline:3px solid #bf4427;outline-offset:2px}
main>.grid{scroll-margin-top:110px}
@media(max-width:1000px){.directory-groups{columns:2}}
@media(max-width:600px){
  .directory-groups{columns:1}.directory-group{padding:16px 16px 8px;margin-bottom:16px}
  .directory-toolbar{align-items:flex-start;flex-direction:column;gap:12px}
  .directory-toolbar>.directory-subject{width:100%}
  .directory-subject{font-size:16px;min-height:48px}
  .controls .library-search{grid-column:1/-1}.directory-group h4{font-size:22px}
}

main>.topics{margin-top:32px}