@font-face{font-family:"Fraunces";src:url(/assets/fonts/fraunces-roman.woff2)format("woff2");font-weight:300 500;font-style:normal;font-display:swap}@font-face{font-family:"Fraunces";src:url(/assets/fonts/fraunces-italic.woff2)format("woff2");font-weight:300 500;font-style:italic;font-display:swap}@font-face{font-family:"Manrope";src:url(/assets/fonts/manrope.woff2)format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
:root{
  color-scheme:dark;
  --bg:#17130f; --bg2:#1e1913; --panel:#241e17; --line:#3a3226; --rule:#4a4033;
  --ink:#ece4d2; --body:#c9bfae; --muted:#93886f;
  --gold:#d2a445; --green:#a3bf63; --orange:#d47f55; --blue:#8fb0c9;
  --glow:rgba(210,164,69,.16); --stage1:#2b241b; --stage2:#17130f; --pin-ink:#17130f;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Manrope',system-ui,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    color-scheme:light;
    --bg:#f3ecdd; --bg2:#ebe2cf; --panel:#fbf6ea; --line:#d6c9ae; --rule:#bfae8c;
    --ink:#221b12; --body:#4a3f30; --muted:#746751;
    --gold:#7a560f; --green:#4f6b1c; --orange:#a44a22; --blue:#2f5d7c;
    --glow:rgba(140,100,20,.12); --stage1:#fbf6ea; --stage2:#e4d8c0; --pin-ink:#fbf6ea;
  }
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f3ecdd; --bg2:#ebe2cf; --panel:#fbf6ea; --line:#d6c9ae; --rule:#bfae8c;
  --ink:#221b12; --body:#4a3f30; --muted:#746751;
  --gold:#7a560f; --green:#4f6b1c; --orange:#a44a22; --blue:#2f5d7c;
  --glow:rgba(140,100,20,.12); --stage1:#fbf6ea; --stage2:#e4d8c0; --pin-ink:#fbf6ea;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--body);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,h4,p,ul,ol,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit}
em{font-style:italic}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-999px}
.skip:focus{left:16px;top:12px;z-index:50;background:var(--panel);padding:8px 12px}
main,.top,.foot{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.eyebrow{font:500 11px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}

/* top bar */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:20px;height:52px;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.mark{font:600 15px/1 var(--serif);color:var(--ink);text-decoration:none;white-space:nowrap}
.top nav{display:flex;gap:18px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.top nav a{font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--muted);white-space:nowrap;padding:8px 0}
.top nav a:hover{color:var(--ink)}
#theme{font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;background:none;color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:7px 12px;cursor:pointer}
#theme:hover{color:var(--ink);border-color:var(--rule)}

/* hero */
#hero{grid-column:1;grid-row:1;position:relative;z-index:6;pointer-events:none;padding:clamp(40px,7vw,96px) 0 clamp(28px,4vw,56px)}
#hero>*{pointer-events:auto}
#hero h1{font:300 clamp(44px,7.4vw,118px)/.95 var(--serif);letter-spacing:-.035em;color:var(--ink);margin:18px 0 0;font-variation-settings:'opsz' 144;white-space:nowrap;width:max-content;pointer-events:none;text-shadow:0 2px 30px var(--bg)}
#hero h1 em{color:var(--gold);font-weight:300}
.hero-foot{display:grid;gap:26px;margin-top:clamp(28px,5vw,64px);padding-top:22px;border-top:1px solid var(--line)}
.lede{font:400 clamp(17px,1.6vw,21px)/1.5 var(--serif);color:var(--body);max-width:36em}
.facts{display:flex;gap:clamp(16px,3vw,40px);flex-wrap:wrap}
.facts li{font:500 11px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.facts b{display:block;font:300 clamp(30px,3.4vw,46px)/1 var(--serif);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.how{margin-top:28px;font:500 11px/1.8 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.how span{color:var(--ink)}
.how i{width:18px;height:1px;background:var(--rule)}

/* workbench */
#bench{max-width:1320px;margin:0 auto;display:grid;grid-template-rows:auto 1fr;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,4vw,64px);border-top:1px solid var(--line)}
#plates{grid-column:1;grid-row:2}
#pane{grid-column:2;grid-row:1 / span 2;position:sticky;top:52px;height:calc(100vh - 52px);height:calc(100svh - 52px);overflow:hidden;
  background:radial-gradient(120% 90% at 50% 38%,var(--stage1),var(--stage2) 72%);border-left:1px solid var(--line);touch-action:pan-y;user-select:none}
#pane::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 45% at 50% 46%,var(--glow),transparent 70%)}
#stage{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;z-index:1}
#pane.grab #stage{cursor:grabbing}
#pinlayer{position:absolute;inset:0;z-index:2;pointer-events:none}
.pin{position:absolute;left:0;top:0;width:0;height:0;border:0;padding:0;background:none;cursor:pointer;pointer-events:auto;will-change:transform}
.pin .dot{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 30%,transparent)}
.pin .lead{position:absolute;left:0;top:0;width:30px;height:1px;background:var(--gold);transform-origin:0 0;transform:rotate(-38deg);opacity:.85}
.pin b{position:absolute;left:22px;top:-30px;width:22px;height:22px;border-radius:50%;background:var(--gold);color:var(--pin-ink);font:600 11px/22px var(--mono);text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.45);transition:transform .2s,background .2s}
.pin b::before{content:'';position:absolute;inset:-9px}
.pin:hover b,.pin.on b,.pin:focus-visible b{background:var(--ink);transform:scale(1.25)}
.pin:focus-visible{outline:none}
#pinlayer.off .pin{pointer-events:none}
#tip{position:absolute;left:0;top:0;z-index:3;width:240px;background:var(--panel);border:1px solid var(--rule);border-left:2px solid var(--gold);padding:10px 12px;font-size:13px;line-height:1.45;color:var(--body);pointer-events:none;box-shadow:0 10px 30px rgba(0,0,0,.35)}
#tip b{display:block;font:600 15px/1.2 var(--serif);color:var(--ink);margin-bottom:3px}
.hud{position:absolute;left:18px;right:18px;bottom:14px;z-index:2;display:flex;justify-content:space-between;gap:12px;font:500 11px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);pointer-events:none}
.hud #stage-name{color:var(--ink);margin-right:auto}
#toggle{pointer-events:auto;font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--pin-ink);background:var(--gold);border:0;border-radius:99px;padding:8px 14px;cursor:pointer;margin:-6px 0}
#toggle:hover{background:var(--ink)}
.hud{align-items:center}
.meter{position:absolute;right:10px;top:18px;bottom:44px;width:2px;background:var(--line);z-index:2}
.meter i{position:absolute;inset:0;background:var(--gold);transform-origin:top;transform:scaleY(0)}
.fallback{display:none}
#pane.nogl{height:auto;position:static;padding:20px}
#pane.nogl .fallback{display:block;position:relative;z-index:2}
#pane.nogl canvas,#pane.nogl .hud,#pane.nogl .meter{display:none}

.plate{min-height:190vh;padding:clamp(40px,7vw,96px) 0}
.plate-in{position:sticky;top:calc(52px + clamp(20px,5vh,64px))}
.plate h2{font:400 clamp(34px,4.6vw,64px)/1 var(--serif);letter-spacing:-.025em;color:var(--ink);margin:10px 0 14px}
.deck{font:400 17px/1.5 var(--serif);color:var(--body);max-width:34em}
.pins{margin-top:22px;border-top:1px solid var(--line)}
.pins li{display:grid;grid-template-columns:26px 1fr;gap:12px;padding:9px 8px 9px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.45;cursor:default;transition:background .2s,padding .2s}
.pins .n{width:22px;height:22px;border-radius:50%;border:1px solid var(--gold);color:var(--gold);font:500 11px/20px var(--mono);text-align:center;margin-top:1px;transition:background .2s,color .2s}
.pins b{font:600 16px/1.3 var(--serif);color:var(--ink);margin-right:6px}
.pins li:hover,.pins li.on,.pins li:focus-visible{background:var(--bg2);padding-left:8px}
.pins li.on .n,.pins li:hover .n{background:var(--gold);color:var(--pin-ink)}
.more{margin-top:14px}
.more summary{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);cursor:pointer;padding:8px 0}
.more summary:hover{color:var(--ink)}
.more div{columns:2;column-gap:24px;padding-top:6px}
.more p{font-size:13px;line-height:1.45;margin-bottom:8px;break-inside:avoid}
.more b{font:600 14px var(--serif);color:var(--ink)}

/* bands */
.band{max-width:1320px;margin:0 auto;padding:clamp(56px,8vw,112px) 0;border-top:1px solid var(--line)}
.sec-head{margin-bottom:clamp(24px,3vw,40px)}
.sec-head h2{font:400 clamp(30px,4.4vw,60px)/1.02 var(--serif);letter-spacing:-.025em;color:var(--ink);margin:10px 0 14px;max-width:18em}
.count{margin-top:14px;font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--green)}

#tracker{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.day{position:relative;background:var(--bg);border:0;padding:12px 10px 14px;min-height:92px;text-align:left;color:var(--muted);font:500 10.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;display:flex;flex-direction:column;gap:2px;transition:background .2s}
.day b{font:400 22px/1 var(--serif);letter-spacing:-.01em;text-transform:none;color:var(--ink);margin-bottom:6px}
.day i{font-style:normal;color:var(--gold);margin-top:auto}
.day:hover{background:var(--bg2)}
.day[aria-pressed="true"]{background:var(--panel)}
.day[aria-pressed="true"] b{color:var(--green)}
.day[aria-pressed="true"]::after{content:'';position:absolute;right:10px;top:12px;width:11px;height:6px;border-left:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(-45deg)}

.notes-wrap{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:start}
#note-tabs{display:flex;flex-direction:column;position:sticky;top:72px;border-top:1px solid var(--line)}
#note-tabs button{display:flex;gap:12px;align-items:baseline;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:9px 6px;color:var(--muted);font:400 15px/1.25 var(--serif);cursor:pointer}
#note-tabs button span{font:500 10.5px var(--mono);letter-spacing:.08em;color:var(--muted)}
#note-tabs button:hover{color:var(--ink)}
#note-tabs button[aria-selected="true"]{color:var(--ink);background:var(--bg2);box-shadow:inset 2px 0 0 var(--gold)}
#note-tabs button[aria-selected="true"] span{color:var(--gold)}
#note-panel h3{font:400 clamp(28px,3.4vw,44px)/1.05 var(--serif);letter-spacing:-.02em;color:var(--ink);margin:8px 0 12px}
.note-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);margin-top:26px;align-items:start}
.rows h4,.box h4{font:500 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:22px 0 4px}
.rows h4:first-child{margin-top:0}
.row{display:grid;grid-template-columns:minmax(0,11.5em) minmax(0,1fr);gap:16px;padding:11px 0;border-top:1px solid var(--line)}
.row dt{font:600 16px/1.3 var(--serif);color:var(--ink)}
.row dd{font-size:14px;line-height:1.55}
.tag{display:block;font:500 10px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:2px}
.cG .tag{color:var(--green)} .cO .tag{color:var(--orange)} .cM .tag{color:var(--muted)} .cN .tag{color:var(--gold)}
.boxes{display:grid;gap:14px}
.box{background:var(--panel);border:1px solid var(--line);border-top:2px solid var(--gold);padding:16px 18px 6px}
.box.cG{border-top-color:var(--green)} .box.cO{border-top-color:var(--orange)}
.box h4{margin:0 0 10px;color:var(--gold)}
.box.cG h4{color:var(--green)} .box.cO h4{color:var(--orange)}
.box p{font-size:14px;line-height:1.5;margin-bottom:10px}
.box b{color:var(--ink);font-weight:600}

#drill-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(20px,3vw,48px);border-top:1px solid var(--line)}
.q{border-bottom:1px solid var(--line)}
.q summary{display:grid;grid-template-columns:34px 1fr 16px;gap:8px;align-items:baseline;list-style:none;padding:15px 0;font:400 19px/1.3 var(--serif);color:var(--ink);cursor:pointer}
.q summary::-webkit-details-marker{display:none}
.q summary::after{content:'+';font:400 18px/1 var(--mono);color:var(--gold)}
.q[open] summary::after{content:'\2212'}
.q .n{font:500 11px var(--mono);letter-spacing:.08em;color:var(--gold)}
.q p{padding:0 24px 16px 42px;font-size:15px;line-height:1.55}

.search{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-top:8px}
.search label{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.search input{flex:1 1 260px;max-width:420px;background:var(--panel);border:1px solid var(--rule);color:var(--ink);font:400 16px var(--sans);padding:11px 14px;border-radius:2px}
.search input::placeholder{color:var(--muted)}
#gloss-count{font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
#gloss-list{columns:3 280px;column-gap:clamp(20px,3vw,44px)}
#gloss-list p{break-inside:avoid;font-size:14px;line-height:1.5;padding:8px 0;border-top:1px solid var(--line)}
#gloss-list b{font:600 16px var(--serif);color:var(--ink);margin-right:5px}
#gloss-list .none{border:0;color:var(--muted)}

.foot{border-top:1px solid var(--line);padding-top:36px;padding-bottom:48px;text-align:center}
.foot p{font:500 11px/1.6 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.foot .small{max-width:60em;margin:12px auto 0;font:400 13px/1.5 var(--sans);letter-spacing:0;text-transform:none;color:var(--muted)}

@media (max-width:900px){
  .top nav{display:none}
  #theme{margin-left:auto}
  #hero h1{white-space:normal;width:auto}
  #bench{display:block;border-top:0}
  #pane{height:46vh;height:46svh;min-height:300px;margin:0 calc(-1 * max(16px,env(safe-area-inset-left,0px)));border-left:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);z-index:5}
  .plate{min-height:150vh;padding:28px 0}
  .plate-in{position:static}
  .pin b{width:19px;height:19px;font-size:10px;line-height:19px;left:18px;top:-25px}.pin .lead{width:24px}
  #tip{width:200px;font-size:12px}
  .hud .hint{display:none}
  .hud{left:12px;right:12px;bottom:10px}
  .hud #stage-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  #toggle{white-space:nowrap;flex:none;padding:7px 11px}
  .more div{columns:1}
  #tracker{grid-template-columns:repeat(5,minmax(0,1fr))}
  .day{min-height:78px;padding:9px 7px}
  .day b{font-size:18px}
  .notes-wrap{grid-template-columns:1fr}
  #note-tabs{position:static;flex-direction:row;overflow-x:auto;border-top:0;border-bottom:1px solid var(--line);scrollbar-width:none}
  #note-tabs button{white-space:nowrap;border-bottom:0;padding:10px 12px}
  #note-tabs button[aria-selected="true"]{box-shadow:inset 0 -2px 0 var(--gold)}
  .note-grid{grid-template-columns:1fr}
  .row{grid-template-columns:1fr;gap:4px}
  #drill-list{grid-template-columns:1fr}
}
@media (max-width:420px){ #tracker{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none!important} }

.see{font:500 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gold);background:none;border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);border-radius:99px;padding:4px 8px;margin-left:6px;cursor:pointer;white-space:nowrap;vertical-align:1px}
.see:hover{background:var(--gold);color:var(--pin-ink)}

.quiz{margin-top:clamp(28px,4vw,48px);background:var(--panel);border:1px solid var(--line);border-top:2px solid var(--gold);padding:clamp(18px,3vw,32px);max-width:860px}
.qdef{font:400 clamp(20px,2.4vw,28px)/1.35 var(--serif);color:var(--ink);margin:12px 0 20px;max-width:30em}
.qopts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.qopts button{font:500 16px/1.3 var(--serif);text-align:left;color:var(--ink);background:var(--bg);border:1px solid var(--rule);padding:13px 16px;cursor:pointer;border-radius:2px}
.qopts button:hover:not(:disabled){border-color:var(--gold)}
.qopts button:disabled{cursor:default;opacity:.6}
.qopts button.ok{opacity:1;border-color:var(--green);color:var(--green);box-shadow:inset 3px 0 0 var(--green)}
.qopts button.no{opacity:1;border-color:var(--orange);color:var(--orange);box-shadow:inset 3px 0 0 var(--orange)}
.qfoot{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px;font:500 11px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);min-height:30px}
.qfoot span{margin-right:auto}
.qnext{font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;background:var(--gold);color:var(--pin-ink);border:0;border-radius:99px;padding:8px 16px;cursor:pointer}
@media (max-width:520px){.qopts{grid-template-columns:1fr}}

.job{margin-top:14px;padding:10px 14px;border-left:2px solid var(--green);background:var(--bg2);font-size:14px;line-height:1.5;max-width:36em}
.job b{display:block;font:500 10.5px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-bottom:2px}

.amn-back{font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-decoration:none;margin-right:18px;white-space:nowrap}.amn-back:hover{color:var(--gold)}@media(max-width:700px){.amn-back span{display:none}}
.see{display:inline-block;padding:3px 0}

/* written-out versions shown until the live ones load */
.st-plate{max-width:70ch;margin:0 0 28px}.st-plate h3{font:400 28px/1.2 var(--serif);color:var(--ink);margin:0 0 8px}.st-plate dl,.st-gloss{display:grid;grid-template-columns:minmax(120px,max-content) 1fr;gap:6px 18px;margin:12px 0}.st-plate dt,.st-gloss dt{font-weight:600;color:var(--ink)}.st-plate dd,.st-gloss dd{margin:0}.st-drill li{margin:0 0 10px}
/* the English name beside a translated term, and the language link */
.ms-en{font-style:italic;font-weight:400;font-size:.88em;color:var(--muted)}.ms-en::before{content:"("}.ms-en::after{content:")"}
.ms-lang{font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--muted);white-space:nowrap;padding:14px 4px}.ms-lang:hover{color:var(--ink)}.ms-lang b{display:none;font-weight:500}
@media(max-width:900px){.ms-lang{margin-left:auto}.top #theme{margin-left:0}}
@media(max-width:700px){.top{gap:12px}.amn-back{margin-right:0;font-size:15px;padding:12px 4px}.ms-lang span{display:none}.ms-lang b{display:inline}}