/*! Pickr 1.9.1 MIT | https://github.com/Simonwep/pickr */
.pickr{position:relative;overflow:visible;transform:translateY(0)}.pickr *{box-sizing:border-box;outline:none;border:none;-webkit-appearance:none}.pickr .pcr-button{position:relative;height:2em;width:2em;padding:.5em;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue",Arial,sans-serif;border-radius:.15em;background:url("data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\" stroke=\"%2342445A\" stroke-width=\"5px\" stroke-linecap=\"round\"><path d=\"M45,45L5,5\"></path><path d=\"M45,5L5,45\"></path></svg>") no-repeat center;background-size:0;transition:all .3s}.pickr .pcr-button::before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url("data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2 2\"><path fill=\"white\" d=\"M1,0H2V1H1V0ZM0,1H1V2H0V1Z\"/><path fill=\"gray\" d=\"M0,0H1V1H0V0ZM1,1H2V2H1V1Z\"/></svg>");background-size:.5em;border-radius:.15em;z-index:-1}.pickr .pcr-button::before{z-index:initial}.pickr .pcr-button::after{position:absolute;content:"";top:0;left:0;height:100%;width:100%;transition:background .3s;background:var(--pcr-color);border-radius:.15em}.pickr .pcr-button.clear{background-size:70%}.pickr .pcr-button.clear::before{opacity:0}.pickr .pcr-button.clear:focus{box-shadow:0 0 0 1px rgba(255,255,255,.85),0 0 0 3px var(--pcr-color)}.pickr .pcr-button.disabled{cursor:not-allowed}.pickr *,.pcr-app *{box-sizing:border-box;outline:none;border:none;-webkit-appearance:none}.pickr input:focus,.pickr input.pcr-active,.pickr button:focus,.pickr button.pcr-active,.pcr-app input:focus,.pcr-app input.pcr-active,.pcr-app button:focus,.pcr-app button.pcr-active{box-shadow:0 0 0 1px rgba(255,255,255,.85),0 0 0 3px var(--pcr-color)}.pickr .pcr-palette,.pickr .pcr-slider,.pcr-app .pcr-palette,.pcr-app .pcr-slider{transition:box-shadow .3s}.pickr .pcr-palette:focus,.pickr .pcr-slider:focus,.pcr-app .pcr-palette:focus,.pcr-app .pcr-slider:focus{box-shadow:0 0 0 1px rgba(255,255,255,.85),0 0 0 3px rgba(0,0,0,.25)}.pcr-app{position:fixed;display:flex;flex-direction:column;z-index:10000;border-radius:.1em;background:#fff;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue",Arial,sans-serif;box-shadow:0 .15em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.03);left:0;top:0}.pcr-app.visible{transition:opacity .3s;visibility:visible;opacity:1}.pcr-app .pcr-swatches{display:flex;flex-wrap:wrap;margin-top:.75em}.pcr-app .pcr-swatches.pcr-last{margin:0}@supports(display: grid){.pcr-app .pcr-swatches{display:grid;align-items:center;grid-template-columns:repeat(auto-fit, 1.75em)}}.pcr-app .pcr-swatches>button{font-size:1em;position:relative;width:calc(1.75em - 5px);height:calc(1.75em - 5px);border-radius:.15em;cursor:pointer;margin:2.5px;flex-shrink:0;justify-self:center;transition:all .15s;overflow:hidden;background:rgba(0,0,0,0);z-index:1}.pcr-app .pcr-swatches>button::before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url("data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2 2\"><path fill=\"white\" d=\"M1,0H2V1H1V0ZM0,1H1V2H0V1Z\"/><path fill=\"gray\" d=\"M0,0H1V1H0V0ZM1,1H2V2H1V1Z\"/></svg>");background-size:6px;border-radius:.15em;z-index:-1}.pcr-app .pcr-swatches>button::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:var(--pcr-color);border:1px solid rgba(0,0,0,.05);border-radius:.15em;box-sizing:border-box}.pcr-app .pcr-swatches>button:hover{filter:brightness(1.05)}.pcr-app .pcr-swatches>button:not(.pcr-active){box-shadow:none}.pcr-app .pcr-interaction{display:flex;flex-wrap:wrap;align-items:center;margin:0 -0.2em 0 -0.2em}.pcr-app .pcr-interaction>*{margin:0 .2em}.pcr-app .pcr-interaction input{letter-spacing:.07em;font-size:.75em;text-align:center;cursor:pointer;color:#75797e;background:#f1f3f4;border-radius:.15em;transition:all .15s;padding:.45em .5em;margin-top:.75em}.pcr-app .pcr-interaction input:hover{filter:brightness(0.975)}.pcr-app .pcr-interaction input:focus{box-shadow:0 0 0 1px rgba(255,255,255,.85),0 0 0 3px rgba(66,133,244,.75)}.pcr-app .pcr-interaction .pcr-result{color:#75797e;text-align:left;flex:1 1 8em;min-width:8em;transition:all .2s;border-radius:.15em;background:#f1f3f4;cursor:text}.pcr-app .pcr-interaction .pcr-result::-moz-selection{background:#4285f4;color:#fff}.pcr-app .pcr-interaction .pcr-result::selection{background:#4285f4;color:#fff}.pcr-app .pcr-interaction .pcr-type.active{color:#fff;background:#4285f4}.pcr-app .pcr-interaction .pcr-save,.pcr-app .pcr-interaction .pcr-cancel,.pcr-app .pcr-interaction .pcr-clear{color:#fff;width:auto}.pcr-app .pcr-interaction .pcr-save,.pcr-app .pcr-interaction .pcr-cancel,.pcr-app .pcr-interaction .pcr-clear{color:#fff}.pcr-app .pcr-interaction .pcr-save:hover,.pcr-app .pcr-interaction .pcr-cancel:hover,.pcr-app .pcr-interaction .pcr-clear:hover{filter:brightness(0.925)}.pcr-app .pcr-interaction .pcr-save{background:#4285f4}.pcr-app .pcr-interaction .pcr-clear,.pcr-app .pcr-interaction .pcr-cancel{background:#f44250}.pcr-app .pcr-interaction .pcr-clear:focus,.pcr-app .pcr-interaction .pcr-cancel:focus{box-shadow:0 0 0 1px rgba(255,255,255,.85),0 0 0 3px rgba(244,66,80,.75)}.pcr-app .pcr-selection .pcr-picker{position:absolute;height:18px;width:18px;border:2px solid #fff;border-radius:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none}.pcr-app .pcr-selection .pcr-color-palette,.pcr-app .pcr-selection .pcr-color-chooser,.pcr-app .pcr-selection .pcr-color-opacity{position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;display:flex;flex-direction:column;cursor:grab;cursor:-webkit-grab}.pcr-app .pcr-selection .pcr-color-palette:active,.pcr-app .pcr-selection .pcr-color-chooser:active,.pcr-app .pcr-selection .pcr-color-opacity:active{cursor:grabbing;cursor:-webkit-grabbing}.pcr-app[data-theme=nano]{width:14.25em;max-width:95vw}.pcr-app[data-theme=nano] .pcr-swatches{margin-top:.6em;padding:0 .6em}.pcr-app[data-theme=nano] .pcr-interaction{padding:0 .6em .6em .6em}.pcr-app[data-theme=nano] .pcr-selection{display:grid;grid-gap:.6em;grid-template-columns:1fr 4fr;grid-template-rows:5fr auto auto;align-items:center;height:10.5em;width:100%;align-self:flex-start}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview{grid-area:2/1/4/1;height:100%;width:100%;display:flex;flex-direction:row;justify-content:center;margin-left:.6em}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview .pcr-last-color{display:none}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview .pcr-current-color{position:relative;background:var(--pcr-color);width:2em;height:2em;border-radius:50em;overflow:hidden}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview .pcr-current-color::before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url("data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2 2\"><path fill=\"white\" d=\"M1,0H2V1H1V0ZM0,1H1V2H0V1Z\"/><path fill=\"gray\" d=\"M0,0H1V1H0V0ZM1,1H2V2H1V1Z\"/></svg>");background-size:.5em;border-radius:.15em;z-index:-1}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-palette{grid-area:1/1/2/3;width:100%;height:100%;z-index:1}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-palette .pcr-palette{border-radius:.15em;width:100%;height:100%}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-palette .pcr-palette::before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url("data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2 2\"><path fill=\"white\" d=\"M1,0H2V1H1V0ZM0,1H1V2H0V1Z\"/><path fill=\"gray\" d=\"M0,0H1V1H0V0ZM1,1H2V2H1V1Z\"/></svg>");background-size:.5em;border-radius:.15em;z-index:-1}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser{grid-area:2/2/2/2}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity{grid-area:3/2/3/2}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser,.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity{height:.5em;margin:0 .6em}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser .pcr-picker,.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity .pcr-picker{top:50%;transform:translateY(-50%)}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser .pcr-slider,.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity .pcr-slider{flex-grow:1;border-radius:50em}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser .pcr-slider{background:linear-gradient(to right, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(0, 100%, 50%))}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity .pcr-slider{background:linear-gradient(to right, transparent, black),url("data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2 2\"><path fill=\"white\" d=\"M1,0H2V1H1V0ZM0,1H1V2H0V1Z\"/><path fill=\"gray\" d=\"M0,0H1V1H0V0ZM1,1H2V2H1V1Z\"/></svg>");background-size:100%,.25em}

:root {
  --text: #333;
  --focus: black;
  --bg: #fafaf5;
  --border: #ccc;
  --link: #55258c;
  --purple: #505;
}
@media (prefers-color-scheme: dark) {
  :root {
    --text: #b3b5be;
    --focus: white;
    --border: #22343c;
    --bg: #1b2a32;
    --link: #2f81f7;
    --purple: #505;
  }
  .invertable {
    filter: invert(1);
    mix-blend-mode: screen;
  }
}
body,
html {
  margin: 0;
  padding: 0;
}
body {
  background-color: var(--bg);
  color: var(--text);
  font-family: system-ui, 'helvetica neue', sans-serif;
  font-size: 0.85rem;
}
body * {
  font-family: inherit;
  font-size: inherit;
}
@media only screen and (max-width: 800px) {
  body {
    font-size: 1rem;
  }
}
a {
  color: var(--link);
}
a:hover {
  text-decoration: underline;
  color: var(--link) !important;
}
a:visited {
  color: var(--visited);
}
@media only screen and (min-width: 800px) {
  h1 {
    font-size: 4rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-top: 5rem;
    line-height: 5rem;
    margin-bottom: 1rem;
  }
}
@media only screen and (max-width: 800px) {
  h1 {
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 1rem 0;
  }
}
main {
  flex: 1;
  display: flex;
}
@media only screen and (max-width: 800px) {
  main {
    flex-direction: column;
  }
  main section {
    padding: 0 1rem;
    min-height: 50vh;
    background: var(--bg);
  }
}
@media only screen and (min-width: 800px) {
  main {
    flex-direction: row;
    gap: 2rem;
    margin: 0 auto;
    max-width: calc(min(90%, 1600px));
    padding: 1em;
  }
}
main section {
  flex: 1;
}
main section h1 {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  min-width: 0;
  /* allow it to shrink inside the flex item   */
  flex: 0 1 auto;
  /* don’t grow, do allow shrink              */
}
header input {
  background: var(--text);
  color: var(--bg);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 1rem;
  cursor: pointer;
  outline: none;
}
@media only screen and (max-width: 800px) {
  header {
    background: var(--purple);
    color: #fff;
    padding: 0.5rem;
    box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.1);
  }
  header input {
    width: calc(100vw - 10rem);
  }
  header button {
    background: none;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    margin: 0 1rem 0 0;
    font-size: 2.5rem;
    color: #fff;
    text-shadow: 1px 1px 1px black;
  }
}
header nav ul {
  margin: 0;
  padding: 0;
  border-top: 1px solid #fff2;
}
header nav li {
  margin: 0;
  list-style: none;
  border-bottom: 1px solid #fff2;
  padding: 0.4em 0;
}
header nav li a {
  display: block;
}
header nav li:last-child {
  border-bottom: none;
}
@media only screen and (max-width: 800px) {
  header {
    background: linear-gradient(to bottom, var(--bg) 0px, var(--purple) 4rem, var(--purple) 100%);
    border-bottom: 1px solid #939;
  }
  .header-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
  }
  header nav {
    height: 20rem;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
  }
  .collapsed nav {
    height: 0;
    transition: all 0.3s ease-in-out;
  }
  .logo {
    width: 2.2rem;
    padding-left: 1rem;
  }
}
@media only screen and (min-width: 800px) {
  header {
    margin-top: 2.2rem;
  }
  nav {
    margin-top: 3rem;
  }
  .header-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    gap: 1rem;
  }
  .hamburger {
    display: none;
  }
}
.radar {
  position: absolute;
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
}
.radar li {
  list-style: none;
}
.radar li a {
  width: 1rem;
  height: 1rem;
  line-height: 1rem;
  text-align: center;
  display: block;
  border: 1px solid var(--text);
  padding: 0.5rem;
  color: var(--text);
  text-decoration: none;
  border-radius: 4rem;
}
.radar li a:hover {
  background: var(--text);
  color: var(--bg) !important;
}
@media only screen and (min-width: 800px) {
  .radar {
    top: 3rem;
    width: calc(min(90%, 1600px));
    margin: 0 auto;
    padding: 0 0 0 13.5rem;
  }
}
@media only screen and (max-width: 800px) {
  .radar {
    right: 1.8rem;
    left: unset;
    top: 3.5rem;
    padding: 0;
  }
  .radar li a {
    padding: 0.3rem;
    background: var(--bg);
  }
}
footer {
  border-top: 1px solid var(--border);
  padding: 1em 0;
  text-align: center;
}
footer ul {
  display: flex;
  flex-direction: row;
  gap: 1em;
  justify-content: center;
}
footer ul li {
  border-top: none;
  list-style: none;
}
section {
  /* Unordered lists */
}
section canvas,
section iframe {
  border: none;
  border-radius: 2px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  width: 100%;
}
@media only screen and (max-width: 800px) {
  section canvas,
  section iframe {
    aspect-ratio: 1 / 1.1;
  }
}
@media only screen and (min-width: 800px) {
  section canvas,
  section iframe {
    aspect-ratio: 16 / 9;
  }
}
section table {
  width: 100%;
  border-collapse: collapse;
}
section table th,
section table td {
  border-bottom: 1px solid var(--border);
  padding: 0.2em 0;
  text-align: left;
}
section table th {
  padding-bottom: 1em;
}
section aside form div.f {
  display: block;
  margin-bottom: 1rem;
}
section aside form div.f label {
  display: block;
  margin-bottom: 0.5rem;
}
section aside form div.f input,
section aside form div.f select,
section aside form div.f textarea {
  max-width: 15rem;
}
section aside form div.f textarea {
  width: 15rem;
}
section article form,
section .postscript form {
  max-width: 40rem;
}
section article form div.f,
section .postscript form div.f {
  position: relative;
  padding-left: 9rem;
  margin-bottom: 1rem;
}
section article form div.f > label,
section .postscript form div.f > label {
  position: absolute;
  left: 0;
  top: 0;
  text-align: right;
  width: 8rem;
  line-height: 2rem;
}
section ol li {
  margin-bottom: 1rem;
}
section dl {
  display: grid;
  grid-template-columns: min-content 1fr;
  gap: 0.5em 1em;
}
section dl dt {
  font-size: 0.9em;
  text-decoration: underline dotted;
  text-align: right;
  white-space: nowrap;
}
section dl dd {
  margin: 0;
}
section svg {
  max-width: 4rem;
}
section img[src*='load'] {
  mix-blend-mode: screen;
  filter: invert(1);
}
section button,
section input,
section textarea {
  background: var(--text);
  color: var(--bg);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  outline: none;
}
section button:focus,
section input:focus,
section textarea:focus {
  background: var(--focus);
}
section textarea {
  border-radius: 0.5rem;
  padding: 1rem;
}
section button {
  cursor: pointer;
}
section button:hover {
  background: var(--focus);
}
section input[type='file'] {
  background: unset;
  border: unset;
  border-radius: unset;
  padding: unset;
}
section ul:not([class]),
section ul[class=''] {
  margin: 0;
  padding: 0;
}
section ul:not([class]) li,
section ul[class=''] li {
  margin: 0;
  list-style: none;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}
section ul:not([class]) li:last-child,
section ul[class=''] li:last-child {
  border-bottom: none;
}
section nav {
  display: flex;
  flex-direction: row;
  gap: 1em;
  margin: 2rem 0;
}
section nav a {
  display: block;
}
section.columns {
  display: grid;
  grid-template-areas: 'header' 'main' 'side' 'post';
  gap: 1rem;
}
section.columns h1,
section.columns .header {
  grid-area: header;
}
section.columns article {
  grid-area: main;
}
section.columns .postscript {
  grid-area: post;
}
section.columns aside {
  grid-area: side;
}
@media only screen and (min-width: 800px) {
  /* 🖥️ Desktop styles */
  section.columns {
    grid-template-columns: 2fr 1fr;
    grid-template-areas: 'header  header' 'main    side' 'post    side';
    align-items: start;
  }
}
/* Page specific styles */
section .costumer {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  gap: 1em;
}
section img.womp {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 2px;
}
section div.womps,
section div.search,
section div.assets,
section div.wearables {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 1em;
}
section div.womps > div,
section div.search > div,
section div.assets > div,
section div.wearables > div {
  width: 10rem;
  margin-bottom: 1rem;
}
section div.womps > div img,
section div.search > div img,
section div.assets > div img,
section div.wearables > div img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 2px;
}
section div.womps > div p,
section div.search > div p,
section div.assets > div p,
section div.wearables > div p {
  margin: 0;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  display: block;
}
section div.womps > div time,
section div.search > div time,
section div.assets > div time,
section div.wearables > div time {
  font-size: 0.8em;
  opacity: 0.5;
}
section .search img,
section .search code {
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
}
section .search code {
  width: 100%;
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--border);
  text-align: center;
  line-height: 10rem;
  border-radius: 2px;
  text-decoration: none !important;
  color: var(--text);
}
section .search address {
  display: none;
}
section figure {
  margin: 0;
  position: relative;
}
section figure iframe,
section figure canvas,
section figure img {
  max-width: calc(100vw - 2rem);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 2px;
}
section figure figcaption {
  display: flex;
  flex-direction: row;
  gap: 5px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #000a;
  height: 3rem;
}
section figure figcaption > * {
  line-height: 3rem;
}
section figure figcaption button,
section figure figcaption a {
  display: block;
  padding: 0 1rem;
  background: none;
  border-right: 1px solid #fff5;
  border-radius: 0;
  color: white;
  font-size: 1.2rem;
  font-weight: 600;
  text-decoration: none;
}
section figure figcaption button:hover,
section figure figcaption a:hover {
  text-decoration: underline;
  color: var(--link);
}
section figure figcaption ul,
section figure figcaption li {
  margin: 0;
  padding: 0;
}
section figure figcaption ul {
  display: flex;
  flex-direction: row;
  gap: 1em;
}
section figure figcaption ul li {
  list-style: none;
}
section figure figcaption .emoji-scores {
  position: relative;
}
section figure figcaption .emoji-scores ul.add-emoji {
  position: absolute;
  background: var(--bg);
  border-radius: 2px;
  padding: 2rem;
  top: -2rem;
  left: -0.5rem;
  width: 20rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(2rem, 1fr));
  gap: 1em;
}
section figure figcaption .emoji-scores ul.add-emoji li {
  line-height: 2rem;
  margin: 0;
  list-style: none;
  padding: 0;
  cursor: pointer;
  text-align: center;
}
section figure figcaption .emoji-scores ul.add-emoji li:hover {
  background: var(--text);
  border-radius: 2px;
}
section.login button {
  padding: 0.5rem 2rem;
  font-weight: bold;
}
section.login img {
  width: 1.8rem;
  vertical-align: middle;
  margin-right: 0.5rem;
}
section span.editable:hover {
  background: var(--link);
  color: var(--bg);
  cursor: pointer;
}
section h1.editable input {
  font: inherit;
}
section pre code {
  display: block;
  background: #ccc1;
  padding: 1rem;
  border-radius: 2px;
  font-family: monospace;
  max-width: 30vw;
  overflow: auto;
  max-height: 50vh;
}
section a:has(img.render) {
  display: block;
  position: relative;
}
section a:has(img.render)::after {
  content: '';
  position: absolute;
  inset: 0;
  /* stretch full size */
  pointer-events: none;
  /* clicks pass through */
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, /* inner clear zone */ rgba(0, 0, 0, 0.2) 110% /* fade to 35 % black at edges */);
  width: 100%;
  height: 100%;
}
section .events {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.3rem;
}
section .events > div {
  margin-bottom: 1.5rem;
  display: grid;
  grid-template-areas: 'card title' 'main main';
  gap: 0.1rem;
}
section .events > div .timecard {
  grid-area: card;
  flex-direction: row;
  gap: 0.1rem;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  text-align: center;
}
section .events > div .timecard h3 {
  margin: 0;
  padding: 0;
  flex: 1;
  line-height: 2rem;
}
section .events > div .timecard sub {
  background: var(--border);
  color: var(--text);
  padding: 0.4rem 0;
  display: block;
}
section .events > div p {
  grid-area: title;
  width: 8rem;
  margin: 0;
  padding: 0;
}
section .events > div p a,
section .events > div p span {
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  min-width: 0;
}
section .events > div .description {
  grid-area: main;
  padding-top: 1rem;
}
section.worldmap aside {
  height: 80vh;
  overflow: auto;
}
div.map {
  height: 80vh;
  aspect-ratio: 1 / 1;
  background: var(--border);
  border-radius: 2px;
}