.page{width:100%;padding:clamp(1.5rem,5vw,3.5rem) clamp(1rem,3vw,3rem) 4rem}.site-header{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:1rem;display:flex}.title{flex:18rem;align-items:flex-end;gap:.375rem;min-width:0;max-width:40rem;display:flex}.title-sub{font-family:var(--font-caprasimo), serif;vertical-align:baseline;color:var(--wafer);font-size:clamp(.875rem,2.6vw,1.375rem);font-weight:400;line-height:1}.community-button{background:var(--copper-sulfate);min-height:2.875rem;color:var(--cacao);white-space:nowrap;border-radius:6px;align-items:center;padding-inline:1.25rem;font-weight:700;text-decoration:none;display:inline-flex}.community-button:hover{background:var(--white-chocolate)}.bar{background:var(--dark-chocolate);border-radius:12px;flex:1;grid-template-columns:repeat(6,1fr);gap:3px;min-width:0;max-width:36rem;padding:6px;display:grid}.bar-square{aspect-ratio:1;background:var(--milk-chocolate);box-shadow:var(--bevel);font-family:var(--font-caprasimo), serif;border-radius:6px;place-items:center;font-size:clamp(1.25rem,6.5vw,2.75rem);font-weight:400;line-height:1;display:grid;position:relative}.bar-number{font-family:var(--font-figtree), sans-serif;color:var(--wafer);font-size:clamp(.625rem,1.8vw,.8125rem);font-weight:600;position:absolute;top:10%;left:12%}.tagline{max-width:44rem;color:var(--wafer);margin-top:1.25rem;font-size:1.125rem;line-height:1.5}.filters{flex-wrap:wrap;align-items:flex-end;gap:1rem;margin-top:2.5rem;display:flex}.field{flex:12rem;gap:.375rem;max-width:18rem;display:grid}.field label{font-weight:600}.field select,.field input{border:1px solid var(--milk-chocolate);background:var(--dark-chocolate);min-height:2.875rem;color:var(--white-chocolate);border-radius:6px;padding-inline:.75rem;font-size:1rem}.find-button{background:var(--copper-sulfate);min-height:2.875rem;color:var(--cacao);cursor:pointer;border-radius:6px;padding-inline:1.5rem;font-size:1rem;font-weight:700}.find-button:hover:enabled{background:var(--white-chocolate)}.find-button:disabled{opacity:.6;cursor:progress}.loader{color:var(--wafer);flex-basis:100%;margin-top:2.5rem}.filters .loader{margin-top:1.5rem}.loader-squares{background:var(--dark-chocolate);border-radius:7px;grid-template-columns:repeat(6,1.75rem);gap:2px;margin-bottom:.5rem;padding:3px;display:inline-grid}.loader-square{aspect-ratio:1;background:var(--milk-chocolate);box-shadow:var(--bevel);border-radius:3px}.filters:has(.loader)~.browse{display:none}.note{max-width:60ch;color:var(--wafer);margin-top:2.5rem}.browse{grid-template-columns:minmax(0,1fr) 19rem;align-items:start;gap:2rem;margin-top:3rem;display:grid}.browse>.note{margin-top:0}.results h2{font-family:var(--font-caprasimo), serif;font-size:1.75rem;font-weight:400;line-height:1.2}.facts{flex-wrap:wrap;gap:.5rem;margin-block:.625rem;display:flex}.facts li{background:var(--milk-chocolate);box-shadow:var(--bevel);border-radius:5px;padding:.25rem .75rem;font-weight:600}.picked-note{color:var(--wafer)}.sheet-controls{flex-wrap:wrap;align-items:center;gap:.75rem;margin-top:.5rem;display:flex}.zoom{background:var(--dark-chocolate);border-radius:6px;display:inline-flex;overflow:hidden}.zoom button{min-width:2.5rem;color:var(--white-chocolate);font-variant-numeric:tabular-nums;cursor:pointer;padding:.5rem .75rem;font-weight:700}.zoom button:hover:enabled{background:var(--milk-chocolate)}.zoom button:disabled{opacity:.4;cursor:default}.zoom{align-items:center}.zoom-slider{width:clamp(6rem,18vw,12rem);accent-color:var(--copper-sulfate);cursor:pointer;margin-inline:.25rem}.zoom-level{color:var(--white-chocolate);align-items:center;padding-inline:.5rem .75rem;font-weight:700;display:inline-flex}.zoom-level input{background:var(--cacao);width:3.25rem;color:inherit;font:inherit;font-variant-numeric:tabular-nums;text-align:right;border-radius:4px;padding:.25rem .375rem}.sheets-viewport{margin-top:1rem;overflow:auto}.sheets-viewport.zoomed{border-radius:6px;max-height:calc(100dvh - 2rem)}.sheets{width:calc(100% * var(--zoom,1));gap:1rem;margin-inline:auto;display:grid}.sheet{background:var(--paper);border-radius:6px;width:100%;height:auto;padding:.75rem}.view-toggle{background:var(--copper-sulfate);color:var(--cacao);cursor:pointer;border-radius:6px;padding:.5rem 1rem;font-weight:700}.view-toggle:hover{background:var(--white-chocolate)}.menu{background:var(--dark-chocolate);border-radius:6px;grid-template-rows:auto minmax(0,1fr);gap:.75rem;max-height:calc(100dvh - 2rem);padding:.75rem;display:grid;position:sticky;top:1rem}.menu-filters{gap:.5rem;display:grid}.menu-filter{flex-wrap:wrap;align-items:center;gap:.25rem;font-size:.875rem;display:flex}.menu-filter span{color:var(--wafer);flex-basis:100%}.menu-filter a,.menu-list a{border-radius:4px}.menu-filter a{padding:.125rem .5rem;font-weight:600}.menu-list{overflow-y:auto}.menu-list a{padding:.375rem .5rem;display:block}.menu-filter a:hover,.menu-list a:hover{background:var(--milk-chocolate)}.menu-filter a[aria-current],.menu-list a[aria-current]{background:var(--copper-sulfate);color:var(--cacao)}.menu-empty{color:var(--wafer)}@media (max-width:52rem){.browse{grid-template-columns:minmax(0,1fr)}.menu{order:-1;max-height:24rem;position:static}}@media (prefers-reduced-motion:no-preference){.bar-square{animation:.42s cubic-bezier(.2,.8,.2,1) backwards set}.bar-square:nth-child(2){animation-delay:50ms}.bar-square:nth-child(3){animation-delay:.1s}.bar-square:nth-child(4){animation-delay:.15s}.bar-square:nth-child(5){animation-delay:.2s}.bar-square:nth-child(6){animation-delay:.25s}.loader-square{animation:1.2s linear infinite react}.loader-square:nth-child(2){animation-delay:.15s}.loader-square:nth-child(3){animation-delay:.3s}.loader-square:nth-child(4){animation-delay:.45s}.loader-square:nth-child(5){animation-delay:.6s}.loader-square:nth-child(6){animation-delay:.75s}@keyframes react{0%,30%,to{background:var(--milk-chocolate)}12%{background:var(--copper-sulfate)}}@keyframes set{0%{opacity:0;transform:translateY(-.5rem)}}}