@font-face{font-family:Anybody;src:url("fonts/Anybody.ttf");font-weight:100 900;font-stretch:50% 150%}
@font-face{font-family:Cabinet;src:url("fonts/CabinetGrotesk.woff2");font-weight:100 900}
@font-face{font-family:Bricolage;src:url("fonts/Bricolage.ttf");font-weight:200 800;font-stretch:75% 100%}
@font-face{font-family:Gabarito;src:url("fonts/Gabarito.ttf");font-weight:400 900}
@font-face{font-family:Fraunces;src:url("fonts/Fraunces.ttf");font-weight:100 900}

:root{--paper:#f3eee4;--ink:#1f1c18;--muted:#968e82;--line:#ddd5c7}
body.inv{--paper:#1c1a17;--ink:#f1ebe0;--muted:#7d766c;--line:#3a352f}
html,body{height:100%;overflow:hidden}
body{margin:0;background:var(--paper);color:var(--ink);font:14px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;font-synthesis:none;transition:background .3s,color .3s}
button,select{font:inherit;color:inherit}

.slide{position:fixed;inset:0;visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;padding:0 16px}
.slide.cur{visibility:visible}

.meta{position:absolute;top:max(80px,11vh);left:16px;right:16px;text-align:center;color:var(--muted);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.meta .font{display:block;margin-top:6px;text-transform:none;letter-spacing:.01em;font-size:12px}
.meta .cred{display:block;margin-top:6px;text-transform:none;letter-spacing:.01em;font-size:12px;color:var(--ink)}
.tag{display:inline-block;margin-left:8px;padding:1px 7px;border:1px solid var(--line);border-radius:999px;letter-spacing:.04em;font-size:10px}

/* dot colour picker */
.swatches{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:12px;text-transform:none;letter-spacing:0}
.sw{appearance:none;width:18px;height:18px;border-radius:50%;border:0;padding:0;cursor:pointer;background:var(--c);box-shadow:0 0 0 2px var(--paper),0 0 0 3px transparent;transition:box-shadow .15s}
.sw[aria-pressed="true"]{box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--ink)}
.swname{min-width:8.5em;text-align:left;font-size:11px}

/* logotypes */
.mark{position:relative;display:inline-block;white-space:nowrap;line-height:1;color:var(--ink);font-kerning:normal}
.mark .ln{display:block;width:max-content;margin-inline:auto}
.cb{font-family:Cabinet}.an{font-family:Anybody}.br{font-family:Bricolage}.ga{font-family:Gabarito}.fr{font-family:Fraunces}
.dot,.hang{color:var(--dot)}
.hang{display:inline-block;width:0}
.ko{background:var(--ink);color:var(--paper);padding:.2em .3em .14em;border-radius:.03em}
.ko.round{border-radius:.16em}
.ko.key{padding:.26em .34em .2em;border:.05em solid var(--paper);box-shadow:0 0 0 .13em var(--ink)}
.frame{border:.07em solid currentColor;padding:.2em .32em .14em}
.mark .div{display:block;width:auto;height:.07em;background:currentColor;margin:.14em -.32em}
.band{display:block;background:var(--ink);color:var(--paper);margin:-.2em -.32em .14em;padding:.2em .32em .12em}

/* icon placeholder slots */
.row{display:flex;align-items:center;gap:.14em}
.col{display:block}
.col .ln{margin-inline:0}
.vr{align-self:stretch;width:.06em;background:currentColor;margin:0 .04em}
.slot{display:inline-block;overflow:hidden;box-sizing:border-box;flex:0 0 auto;width:.78em;height:.78em;padding:.1em;border:.025em dashed currentColor}
.slot.tall{width:1.5em;height:1.5em}
.slot.wide{width:1.1em}
.slot.solid{background:var(--ink);color:var(--paper);border-style:solid}
.ko .slot.solid{background:var(--paper);color:var(--ink)}
.slot.end{width:.675em;height:.675em;vertical-align:baseline;margin-left:.16em}
.slot.far{margin-left:.34em}
.slot svg{display:block;width:100%;height:100%;fill:currentColor}

/* rating */
.rate{position:absolute;bottom:max(64px,13vh);left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:10px}
.stars{display:flex;flex-direction:row-reverse;gap:2px}
.star{appearance:none;border:0;background:none;padding:5px;cursor:pointer;color:var(--line);border-radius:6px;transition:color .12s,transform .12s}
.star svg{width:24px;height:24px;display:block;fill:currentColor}
.star.on{color:var(--ink)}
.stars:hover .star{color:var(--line)}
.stars:hover .star:hover,.stars:hover .star:hover~.star{color:var(--muted)}
.star:hover{transform:scale(1.15)}
.star:focus-visible,.sw:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.score{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;height:1.4em}

/* chrome */
.bar{position:fixed;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;color:var(--muted);font-size:12px;flex-wrap:wrap}
.bar>div{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.btn,select{appearance:none;border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:6px 12px;cursor:pointer;color:var(--muted);font-size:12px}
.btn:hover,select:hover{color:var(--ink);border-color:var(--muted)}
.btn[aria-pressed="true"]{color:var(--ink);border-color:var(--ink)}
.btn.link{text-decoration:none;display:inline-block}
.copy{position:fixed;right:16px;bottom:16px;z-index:5}
.copy.big{position:static;font-size:15px;padding:12px 22px;color:var(--ink);border-color:var(--ink)}
.nav{position:fixed;top:50%;z-index:5;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;font-size:20px;padding:0}
.prev{left:14px}.next{right:14px}

.intro h1{font:600 22px/1.2 system-ui,sans-serif;margin:0 0 14px;text-align:center}
.intro p{margin:4px 0;color:var(--muted);text-align:center;max-width:38em}
.intro a{color:var(--ink)}
kbd{font:12px ui-monospace,monospace;border:1px solid var(--line);border-radius:4px;padding:1px 5px;color:var(--ink)}

@media (max-width:760px){
  .star{padding:3px}.star svg{width:21px;height:21px}
  .pos,.swname{display:none}
  .nav{top:auto;bottom:16px;transform:none}
  .prev{left:16px}.next{right:auto;left:72px}
  .meta{top:max(96px,14vh)}
}