/* ==========================================================================
   Konstellation: interface pieces
   engraved header, framed panels, covers, fan art, dialogs
   ========================================================================== */

.ico { display: inline-block; flex: none; width: 1em; height: 1em; line-height: 0; }
.ico svg { display: block; width: 100%; height: 100%; overflow: visible; }

.shell { position: relative; z-index: 10; min-height: 100vh; min-height: 100dvh; }

/* Silver lettering, engraved rather than printed. */
.metal {
  background: var(--metal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ------------------------------------------------------- engraved header */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--topbar-h);
  background: linear-gradient(180deg, rgba(0, 0, 0, .97) 0%, rgba(2, 2, 2, .9) 75%, rgba(2, 2, 2, .78) 100%);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

:root[data-theme="light"] .topbar { background: linear-gradient(180deg, rgba(240, 240, 240, .97), rgba(230, 230, 230, .86)); }

.topbar-inner {
  position: relative;
  height: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left));
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.brand {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand-name {
  padding-bottom: 2px;
  font: 600 34px/1 var(--font-gothic);
  letter-spacing: .02em;
  background: var(--metal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.topbar-actions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 2px; }

/* Donate: a small engraved button; on a phone, the cup alone. */
.donate-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  margin-right: 6px;
  padding: 0 14px 0 11px;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--frame-mid);
  box-shadow: inset 0 0 0 2px var(--panel-2), inset 0 0 0 3px var(--frame-lo);
  background: linear-gradient(180deg, var(--panel-3), var(--panel));
  font: 600 11px/1 var(--font-label);
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: border-color .3s, box-shadow .35s;
}

.donate-btn .ico { width: 20px; height: 20px; }
.donate-label { padding-left: .18em; }
.donate-btn:hover,
.donate-btn:focus-visible { border-color: var(--frame-hi); box-shadow: inset 0 0 0 2px var(--panel-2), inset 0 0 0 3px var(--frame-mid), 0 0 18px rgba(var(--glow), .12); outline: none; }

@media (max-width: 560px) {
  .donate-btn { width: 38px; height: 38px; margin-right: 2px; padding: 0; justify-content: center; }
  .donate-label { display: none; }
}

/* The engraved rule under the header, with a gem at its centre. */
.topbar-rule {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--frame-lo) 12%, var(--frame-mid) 38%, var(--frame-hi) 50%, var(--frame-mid) 62%, var(--frame-lo) 88%, transparent);
}

.topbar-rule .ico {
  position: absolute;
  left: 50%;
  top: 0;
  width: 12px;
  height: 18px;
  margin: -9px 0 0 -6px;
  color: var(--frame-hi);
  filter: drop-shadow(0 0 4px rgba(var(--glow), .35));
}

@media (max-width: 560px) {
  .brand-name { font-size: 28px; }
}

/* ------------------------------------------------------------- tab bar */

.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  padding: 22px max(var(--gutter), env(safe-area-inset-right)) calc(23px + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
  background: linear-gradient(to top, var(--bg) 56%, transparent);
  pointer-events: none;
}

.tabbar-inner {
  max-width: 840px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  pointer-events: auto;
}

.tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 62px;
  padding: 0 2px;
  color: var(--ink-3);
  text-decoration: none;
  background: linear-gradient(180deg, var(--panel-3), var(--panel));
  border: 10px solid transparent;
  border-image: var(--frame-art) 20 / 10px stretch;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .55);
  font: 600 10.5px/1 var(--font-label);
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .3s, box-shadow .4s;
}

.tab .ico { width: 21px; height: 21px; }
.tab-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: .2em; }
.tab:hover { color: var(--ink-2); }

.tab[aria-current="page"] {
  color: var(--ink);
  border-image-source: var(--frame-art-lit);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .55), 0 0 22px rgba(var(--glow), .1);
}

.tab[aria-current="page"] > .ico { filter: drop-shadow(0 0 5px rgba(var(--glow), .45)); }

.tab-fly {
  position: absolute;
  top: -24px;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  color: var(--ink);
  filter: drop-shadow(0 0 5px rgba(var(--glow), .95));
  opacity: 0;
  transition: opacity .4s;
}

.tab[aria-current="page"] .tab-fly { opacity: 1; animation: hover-fly 3.6s ease-in-out infinite; }

@keyframes hover-fly {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-3px) rotate(5deg); }
}

/* Five tabs: on narrower screens their names are set closer together, and on the smallest phones
   the icons stand alone (each tab still gives its name to screen readers). */
@media (max-width: 760px) {
  .tab { letter-spacing: .1em; }
  .tab-label { padding-left: .1em; }
}

@media (max-width: 560px) {
  .tabbar { padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
  .tabbar-inner { gap: 5px; }
  .tab { border-width: 7px; border-image-width: 7px; letter-spacing: .02em; font-size: 9px; }
  .tab-label { padding-left: .02em; }
}

@media (max-width: 380px) {
  .tab { letter-spacing: 0; font-size: 8.5px; }
  .tab-label { padding-left: 0; }
}

@media (max-width: 340px) {
  .tab-label { display: none; }
  .tab .ico { width: 23px; height: 23px; }
}

.is-immersive .topbar,
.is-immersive .tabbar { display: none; }

/* ----------------------------------------------------------------- view */

.view {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 30px var(--gutter) calc(var(--tabbar-h) + 64px + env(safe-area-inset-bottom));
  outline: none;
}

@media (min-width: 720px) {
  .view { padding-left: 28px; padding-right: 28px; padding-top: 40px; }
}

.view.view--full {
  position: fixed;
  inset: 0;
  z-index: 20;
  max-width: none;
  padding: 0;
}

/* --------------------------------------------------------------- frames */

/* A panel in an engraved frame: double rule, sickle hooks, a gem on each corner. */
.frame {
  position: relative;
  background: linear-gradient(180deg, rgba(var(--glow), .022), rgba(var(--glow), 0) 45%), var(--panel);
  border: 15px solid transparent;
  border-image: var(--frame-art) 20 / 15px stretch;
  box-shadow: var(--shadow);
}

:root[data-theme="light"] .frame { background: var(--panel); }

/* The silver frame around a cover or a picture. */
.bevel {
  position: relative;
  padding: 5px;
  background: var(--metal-frame);
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(255, 255, 255, .5), 0 18px 40px rgba(0, 0, 0, .6);
}

.bevel::after {
  content: "";
  position: absolute;
  inset: 4px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .85), inset 0 0 16px rgba(0, 0, 0, .5);
  pointer-events: none;
}

/* Gems set into the four corners of a silver frame. */
.bevel::before {
  content: "";
  position: absolute;
  inset: -6px;
  z-index: 2;
  background:
    var(--gem-art) left top / 14px 14px no-repeat,
    var(--gem-art) right top / 14px 14px no-repeat,
    var(--gem-art) left bottom / 14px 14px no-repeat,
    var(--gem-art) right bottom / 14px 14px no-repeat;
  filter: drop-shadow(0 0 3px rgba(var(--glow), .25));
  pointer-events: none;
}

/* -------------------------------------------------------------- buttons */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px 24px;
  font: 600 12.5px/1.1 var(--font-label);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  text-align: center;
  background: linear-gradient(180deg, var(--panel-3), var(--panel-2));
  border: 1px solid var(--frame-mid);
  box-shadow: inset 0 0 0 2px var(--panel-2), inset 0 0 0 3px var(--frame-lo), 0 6px 14px rgba(0, 0, 0, .45);
  cursor: pointer;
  user-select: none;
  transition: transform .2s var(--ease-out), box-shadow .35s, border-color .3s, color .2s;
}

.btn .ico { width: 18px; height: 18px; }

.btn:hover {
  border-color: var(--frame-hi);
  box-shadow: inset 0 0 0 2px var(--panel-2), inset 0 0 0 3px var(--frame-mid), 0 6px 14px rgba(0, 0, 0, .45), 0 0 20px rgba(var(--glow), .08);
}

.btn:active { transform: translateY(1px); }

.btn[disabled],
.btn.is-disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* The one lit action on a screen, held between two gems. Still dark: there are no white boxes. */
.btn--paper {
  border-color: var(--frame-hi);
  box-shadow: inset 0 0 0 2px var(--panel-2), inset 0 0 0 3px var(--frame-mid), 0 6px 14px rgba(0, 0, 0, .45), 0 0 24px rgba(var(--glow), .1);
}

.btn--paper::before,
.btn--paper::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -5.5px;
  background: var(--gem-art) center / 100% 100% no-repeat;
  filter: drop-shadow(0 0 4px rgba(var(--glow), .35));
  pointer-events: none;
}

.btn--paper::before { left: -6px; }
.btn--paper::after { right: -6px; }

.btn--paper:hover { box-shadow: inset 0 0 0 2px var(--panel-2), inset 0 0 0 3px var(--frame-hi), 0 6px 14px rgba(0, 0, 0, .45), 0 0 32px rgba(var(--glow), .16); }

.btn--quiet { background: transparent; box-shadow: none; border-color: var(--frame-lo); }
.btn--quiet:hover { background: rgba(127, 127, 127, .08); box-shadow: none; border-color: var(--frame-mid); }

.btn--danger { border-style: dashed; }

.btn--small { min-height: 34px; padding: 6px 13px; font-size: 11px; letter-spacing: .14em; gap: 6px; }
.btn--small .ico { width: 15px; height: 15px; }
.btn--small.btn--paper::before,
.btn--small.btn--paper::after { width: 9px; height: 9px; margin-top: -4.5px; }

.btn--block { width: 100%; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
  transition: background-color .25s, box-shadow .3s, transform .15s;
}

.icon-btn .ico { width: 23px; height: 23px; }
.icon-btn:hover { background-color: rgba(127, 127, 127, .1); box-shadow: inset 0 0 0 1px var(--frame-lo); }
.icon-btn:active { transform: scale(.94); }
.icon-btn[aria-pressed="true"] { background-color: rgba(127, 127, 127, .14); box-shadow: inset 0 0 0 1px var(--frame-mid); }

/* A round seal of a button: listen, edit, remove. */
.badge-btn {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  color: var(--ink);
  background: radial-gradient(circle at 50% 35%, var(--panel-4), var(--panel-2) 70%);
  border: 1px solid var(--frame-hi);
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px var(--panel-2), inset 0 0 0 4px var(--frame-lo), 0 6px 14px rgba(0, 0, 0, .5);
  cursor: pointer;
  text-decoration: none;
  transition: box-shadow .35s, transform .15s;
}

.badge-btn .ico { width: 21px; height: 21px; }
.badge-btn:hover { box-shadow: inset 0 0 0 3px var(--panel-2), inset 0 0 0 4px var(--frame-mid), 0 6px 14px rgba(0, 0, 0, .5), 0 0 22px rgba(var(--glow), .14); }
.badge-btn:active { transform: translateY(1px); }
.badge-btn--quiet { border-color: var(--frame-mid); }

/* -------------------------------------------------------------- choices */

.choice-group { display: grid; gap: 12px; }
.choice-group--row { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

.choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 54px;
  padding: 12px 30px 12px 14px;
  color: var(--ink-3);
  background: linear-gradient(180deg, var(--panel-3), var(--panel-2));
  border: 1px solid var(--frame-lo);
  box-shadow: inset 0 0 0 2px var(--panel-2), inset 0 0 0 3px var(--frame-lo);
  min-width: 0;
  font: 600 11.5px/1.25 var(--font-label);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
  transition: color .25s, border-color .25s, box-shadow .35s;
}

.choice > span:not(.ico):not(.choice-sample) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.choice .ico { width: 21px; height: 21px; }
.choice:hover { color: var(--ink-2); border-color: var(--frame-mid); }

.choice[aria-checked="true"] {
  color: var(--ink);
  border-color: var(--frame-hi);
  box-shadow: inset 0 0 0 2px var(--panel-2), inset 0 0 0 3px var(--frame-mid), 0 0 20px rgba(var(--glow), .1);
}

.choice .choice-mark {
  position: absolute;
  top: 50%;
  right: 11px;
  width: 11px;
  height: 11px;
  margin-top: -5.5px;
  opacity: 0;
  transition: opacity .3s;
  filter: drop-shadow(0 0 4px rgba(var(--glow), .5));
}

.choice[aria-checked="true"] .choice-mark { opacity: 1; }
.choice-sample { font-size: 23px; line-height: 1; text-transform: none; letter-spacing: 0; }

@media (max-width: 480px) {
  .choice-group--row { gap: 8px; }
  .choice { gap: 7px; min-height: 50px; padding: 10px 22px 10px 10px; font-size: 10px; letter-spacing: .03em; }
  .choice .ico { width: 18px; height: 18px; }
  .choice .choice-mark { right: 8px; width: 9px; height: 9px; margin-top: -4.5px; }
  .choice-sample { font-size: 20px; }
}

/* --------------------------------------------------------------- fields */

.form { display: grid; gap: 18px; }

.field { display: grid; gap: 8px; }

.field-label {
  font: 600 11px/1 var(--font-label);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.input {
  width: 100%;
  min-height: 46px;
  padding: 9px 14px;
  color: var(--ink);
  background: var(--panel-2);
  border: 1px solid var(--frame-mid);
  border-radius: 0;
  box-shadow: inset 0 0 0 2px var(--panel-2), inset 0 0 0 3px var(--frame-lo);
  font: 18px/1.3 var(--font-text);
}

.input:focus { outline: none; border-color: var(--frame-hi); box-shadow: inset 0 0 0 2px var(--panel-2), inset 0 0 0 3px var(--frame-mid), 0 0 18px rgba(var(--glow), .1); }
.input::placeholder { color: var(--ink-4); font-style: italic; }
textarea.input { min-height: 84px; resize: vertical; }

select.input {
  appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23999' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.input--compact { min-height: 38px; padding: 5px 10px; font-size: 16px; }
select.input--compact { padding-right: 34px; }

.range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 24px;
  background: transparent;
  cursor: pointer;
}

.range::-webkit-slider-runnable-track { height: 3px; background: var(--panel-4); border: 1px solid var(--frame-lo); }
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  margin-top: -7px;
  background: var(--gem-art) center / 100% 100% no-repeat;
  border: 0;
  filter: drop-shadow(0 0 5px rgba(var(--glow), .5));
}
.range::-moz-range-track { height: 3px; background: var(--panel-4); border: 1px solid var(--frame-lo); }
.range::-moz-range-thumb { width: 15px; height: 15px; background: var(--gem-art) center / 100% 100% no-repeat; border: 0; border-radius: 0; }

.check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font: 600 12px var(--font-label); letter-spacing: .1em; }
.check input {
  appearance: none;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1px solid var(--frame-mid);
  background: var(--panel-2);
  transform: rotate(45deg) scale(.86);
  cursor: pointer;
}
.check input:checked { background: var(--gem-art) center / 140% 140% no-repeat; border-color: var(--frame-hi); }

.form-error { min-height: 1.4em; font: italic 16px/1.4 var(--font-text); color: var(--ink); }

.tiny-link { justify-self: center; font: 600 11px var(--font-label); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); text-decoration: none; }
.tiny-link:hover { color: var(--ink); }

/* ------------------------------------------------------- section divider */

/* A rule from each side, ending in a gem, with the heading between them. */
.section-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 48px 0 26px;
}

.section-head::before,
.section-head::after {
  content: "";
  flex: 1;
  height: 11px;
  background:
    var(--gem-art) right center / 11px 11px no-repeat,
    linear-gradient(90deg, transparent, var(--frame-mid)) left center / calc(100% - 14px) 1px no-repeat;
}

.section-head::after { transform: scaleX(-1); }

.section-head h1,
.section-head h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  font: 600 19px/1 var(--font-display);
  letter-spacing: .22em;
  text-transform: uppercase;
  text-align: center;
}

.section-head .orn { width: 20px; height: 20px; color: var(--ink-2); }

@media (max-width: 560px) {
  .section-head { gap: 10px; }
  .section-head h1,
  .section-head h2 { font-size: 16px; letter-spacing: .14em; gap: 8px; flex-wrap: wrap; justify-content: center; }
}

/* ---------------------------------------------- the author's free notice */

.site-notice {
  max-width: 640px;
  margin: 6px auto 50px;
  text-align: center;
  animation: rise-in 1s var(--ease-out) both;
}

.notice-mark {
  display: block;
  width: 34px;
  height: 34px;
  margin: 0 auto 16px;
  color: var(--frame-hi);
  animation: breathe-glow 6s ease-in-out infinite;
}

/* The emblem from the back cover, small: the art file itself, scaled down by the browser. */
.notice-emblem {
  display: block;
  width: 46px;
  height: auto;
  margin: 0 auto 16px;
  opacity: 0;
}

/* It surfaces once drawn, then breathes like the rest. */
.notice-emblem.is-in { animation: emblem-in 1.2s ease-out forwards, breathe-glow 6s ease-in-out 1.2s infinite; }

@keyframes emblem-in {
  from { opacity: 0; filter: drop-shadow(0 0 3px rgba(var(--glow), .2)); }
  to { opacity: .82; filter: drop-shadow(0 0 3px rgba(var(--glow), .2)); }
}

/* A slow glow, like an ember: never a flash. */
@keyframes breathe-glow {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(var(--glow), .2)); opacity: .82; }
  50% { filter: drop-shadow(0 0 9px rgba(var(--glow), .45)); opacity: 1; }
}

.notice-text {
  margin: 0;
  font: italic 19px/1.65 var(--font-text);
  color: var(--ink-2);
  text-wrap: balance;
}

.notice-sign {
  margin: 12px 0 0;
  font: 500 27px/1 var(--font-gothic);
  background: var(--metal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.notice-rule {
  width: min(260px, 60%);
  height: 11px;
  margin: 20px auto 0;
  background:
    var(--gem-art) center / 11px 11px no-repeat,
    linear-gradient(90deg, transparent, var(--frame-mid) 40%, transparent 46% 54%, var(--frame-mid) 60%, transparent) center / 100% 1px no-repeat;
}

@media (max-width: 560px) {
  .notice-text { font-size: 17px; }
  .notice-sign { font-size: 24px; }
}

/* ------------------------------------------ the author's copyright line */

.site-copyright {
  position: absolute;
  left: max(12px, env(safe-area-inset-left));
  bottom: calc(4px + env(safe-area-inset-bottom));
  margin: 0;
  font: 400 10.5px/1.45 var(--font-text);
  letter-spacing: .02em;
  white-space: nowrap;
  color: var(--ink-3);
  pointer-events: auto;
}

/* -------------------------------------------------------------- donate */

.donate-head { position: relative; display: grid; place-items: center; max-width: 460px; min-height: 46px; margin: 0 auto 18px; }
.donate-head .section-title { margin: 0; color: var(--frame-hi); }
.donate-head .section-title .ico { width: 30px; height: 30px; }
.donate-back { position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.donate-back:active { transform: translateY(-50%) scale(.94); }

/* Ko-fi's own panel, in an engraved frame. */
.donate-frame { max-width: 460px; margin: 0 auto; padding: 0; overflow: hidden; }
.donate-panel { display: block; width: 100%; height: 640px; border: 0; background: #f9f9f9; }

.donate-elsewhere {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: max-content;
  margin: 18px auto 0;
  font: 600 11px/1 var(--font-label);
  letter-spacing: .14em;
  color: var(--ink-3);
  text-decoration: none;
}

.donate-elsewhere .ico { width: 15px; height: 15px; }
.donate-elsewhere:hover { color: var(--ink); }

/* ------------------------------------------------------------- feedback */

.feedback-form { display: grid; gap: 16px; max-width: 760px; margin: 0 auto; }
.feedback-text { min-height: 230px; font: 18px/1.55 var(--font-text); }
.feedback-form .actions { justify-content: flex-end; }

/* The letters, for the keepers of the site. */
.letters { max-width: 760px; margin: 0 auto; }
.letter { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 14px; }
.letter-from { display: flex; align-items: center; gap: 10px; min-width: 0; font: 600 12px/1.3 var(--font-label); letter-spacing: .12em; color: var(--ink-2); }
.letter-from .sigil { flex: none; width: 30px; height: 30px; padding-bottom: 2px; font-size: 17px; box-shadow: 0 0 0 1px #000, 0 0 0 2px #6a6a6a, 0 3px 8px rgba(0, 0, 0, .5); }
.letter-anon { width: 22px; height: 22px; color: var(--ink-3); }
.letter-when { margin-left: 4px; font-weight: 500; letter-spacing: .06em; color: var(--ink-3); }
.letter-text { grid-column: 1 / -1; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 18px/1.6 var(--font-text); color: var(--ink); }

/* -------------------------------------------------------------- library */

.shelf {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 3.6vw, 50px) clamp(16px, 2.8vw, 36px);
}

/* Less than a full row: the books stand together at the left, where a shelf begins. */
.shelf--few { grid-template-columns: repeat(var(--n), minmax(0, 260px)); justify-content: start; }

@media (max-width: 560px) {
  .shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shelf--few { grid-template-columns: repeat(var(--n-narrow), minmax(0, 230px)); }
}

.book-tile {
  appearance: none;
  display: grid;
  gap: 12px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  opacity: 0;
  animation: tile-in 1s var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 90ms + 120ms);
}

@keyframes tile-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.book-tile .bevel { aspect-ratio: 2 / 3; transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out); }

.book-tile:hover .bevel,
.book-tile:focus-visible .bevel {
  transform: translateY(-6px);
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(255, 255, 255, .5), 0 26px 44px rgba(0, 0, 0, .7), 0 0 40px rgba(var(--glow), .1);
}

.book-tile:focus-visible { outline: none; }

/* The book's name under its cover: the title in silver black letter, the subtitle beneath. */
.tile-caption { display: grid; gap: 7px; padding: 4px 2px 0; text-align: center; }

.tile-title {
  padding-bottom: 2px;
  font: 600 23px/1.1 var(--font-gothic);
  letter-spacing: .01em;
  text-wrap: balance;
  background: var(--metal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tile-sub { font: 600 12px/1.4 var(--font-label); letter-spacing: .12em; color: var(--ink-2); text-wrap: balance; }

@media (max-width: 560px) {
  .tile-caption { gap: 5px; }
  .tile-title { font-size: 19px; }
  .tile-sub { font-size: 10.5px; letter-spacing: .08em; }
}

/* How far you've read, drawn instead of written. */
.progress-line { position: relative; height: 3px; background: var(--panel-4); }
.progress-line > i { display: block; height: 100%; background: var(--metal); box-shadow: 0 0 8px rgba(var(--glow), .35); }

/* ---------------------------------------------------------------- cover */

.cover {
  position: relative;
  height: 100%;
  overflow: hidden;
  container-type: size;
  color: #e9e9e9;
  background: radial-gradient(120% 85% at 50% 32%, #1c1c1c 0%, #0b0b0b 55%, #030303 100%);
}

/* A typographic cover for a book without its own art: an engraved frame, an emblem, the title. */
.cover::before {
  content: "";
  position: absolute;
  inset: 4cqi;
  border: 4cqi solid transparent;
  border-image: var(--frame-art-lit) 20 / 4.5cqi stretch;
  pointer-events: none;
}

.cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  background-size: 160px;
  opacity: .1;
  mix-blend-mode: screen;
  pointer-events: none;
}

.cover.has-art::before,
.cover.has-art::after { display: none; }

.cover-numeral {
  position: absolute;
  top: 13cqi;
  left: 0;
  right: 0;
  padding-left: .3em;
  text-align: center;
  font: 600 7cqi/1 var(--font-display);
  letter-spacing: .3em;
  opacity: .72;
}

.cover-ornament {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 46cqi;
  height: 46cqi;
  transform: translate(-50%, -50%);
  color: #ececec;
  filter: drop-shadow(0 0 2.4cqi rgba(255, 255, 255, .25));
}

.cover-ornament svg { width: 100%; height: 100%; }

.cover-rule {
  position: absolute;
  left: 30cqi;
  right: 30cqi;
  bottom: 18cqi;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
}

.cover-title {
  position: absolute;
  left: 10cqi;
  right: 10cqi;
  bottom: 22cqi;
  text-align: center;
  font: 600 12cqi/1 var(--font-gothic);
  text-wrap: balance;
}

.cover-author {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 11cqi;
  padding-left: .28em;
  text-align: center;
  font: 600 4cqi/1 var(--font-label);
  letter-spacing: .28em;
  text-transform: uppercase;
  opacity: .62;
}

.cover-author.is-subtitle { padding-left: .14em; letter-spacing: .14em; }

.cover img { width: 100%; height: 100%; object-fit: cover; }
.cover--back { background: #000; }
.cover--back img { object-fit: contain; }

/* ------------------------------------------------------------ book page */

.book-hero {
  display: grid;
  grid-template-columns: minmax(200px, 320px) minmax(0, 1fr);
  gap: clamp(24px, 4.4vw, 60px);
  padding: clamp(8px, 2.2vw, 24px);
  align-items: start;
}

.book-hero-cover { display: grid; justify-items: center; gap: 24px; }
.book-hero-cover .bevel { width: 100%; aspect-ratio: 2 / 3; }
.book-hero-info { min-width: 0; padding-top: 8px; }
.book-hero-info > * { animation: rise-in .8s var(--ease-out) both; }
.book-hero-info > :nth-child(2) { animation-delay: 80ms; }
.book-hero-info > :nth-child(3) { animation-delay: 160ms; }
.book-hero-info > :nth-child(4) { animation-delay: 240ms; }
.book-hero-info > :nth-child(n + 5) { animation-delay: 320ms; }

@keyframes rise-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* The hardcover. Its depth and parts are sized to the book's width (cqi), in the proportions of
   the printed case; hardcover.js turns it and shades each side by how far it faces away. */
.hardcover {
  position: relative;
  width: 100%;
  container-type: inline-size;
  perspective: 1800px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

.hc-tilt,
.hc-body { position: absolute; inset: 0; transform-style: preserve-3d; }
.hc-tilt { transition: transform .8s var(--ease-out); }

/* With a mouse over it, the book turns a little toward you, showing the edge of its spine. */
@media (hover: hover) {
  .hardcover:hover .hc-tilt { transform: rotateY(10deg); }
}

.hc-face {
  position: absolute;
  top: 0;
  height: 100%;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.hc-shade { position: absolute; inset: 0; z-index: 3; background: #000; opacity: 0; pointer-events: none; }

/* The boards: the art, with the black hinge beside the spine. */
.hc-front,
.hc-back { left: 0; width: 100%; background: #000; }
.hc-front { padding-left: var(--hinge); transform: translateZ(calc(var(--depth) / 2)); }
.hc-back { padding-right: var(--hinge); transform: rotateY(180deg) translateZ(calc(var(--depth) / 2)); }

/* The groove where the board bends at the spine. */
.hc-front::before,
.hc-back::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: calc(var(--hinge) + 1px);
  background: linear-gradient(90deg, #060606, #1b1b1b 34%, #000 60%, #0e0e0e 84%, rgba(0, 0, 0, .6));
}

.hc-front::before { left: 0; }
.hc-back::before { right: 0; transform: scaleX(-1); }

/* The spine as printed (12 mm across, 235 mm tall): black, the emblem at the top, the title just
   above the middle and the pen name at the foot, each where and as large as on the printed case.
   The type is sized here, across the spine, and in em below it: sideways text can't measure the
   book's width itself. */
.hc-spine {
  left: calc(50% - var(--depth) / 2);
  width: var(--depth);
  transform: translateX(-50cqi) rotateY(-90deg);
  color: #e6e8eb;
  background: #000;
  font-size: calc(var(--depth) * .441);
}

.hc-spine-type { position: absolute; inset: 0; }
.hc-spine-mark { position: absolute; top: 2.98%; left: 10%; width: 80%; height: auto; }

.hc-spine-title,
.hc-spine-author { position: absolute; left: 50%; writing-mode: vertical-rl; white-space: nowrap; }

.hc-spine-title { top: 47.5%; transform: translate(-50%, -50%); font: 600 1em/1 var(--font-gothic); }
.hc-spine-author { bottom: 4.26%; transform: translateX(-50%); font: 400 .533em/1 "Marcellus SC", var(--font-label); letter-spacing: .22em; }

/* The edges of the pages, set in a little from the edges of the boards. */
.hc-pages {
  top: var(--square);
  height: calc(100% - 2 * var(--square));
  left: calc(50% - (var(--depth) - 2 * var(--board)) / 2);
  width: calc(var(--depth) - 2 * var(--board));
  transform: translateX(calc(50cqi - var(--square))) rotateY(90deg);
  background:
    repeating-linear-gradient(90deg, rgba(80, 70, 52, .2) 0 1px, transparent 1px 2.4px),
    linear-gradient(90deg, #b9b3a6, #e4dfd3 30% 70%, #b9b3a6);
}

.hc-edge { left: calc(50% - var(--board) / 2); width: var(--board); background: #0c0c0c; }
.hc-edge--front { transform: translateX(50cqi) translateZ(calc(var(--depth) / 2 - var(--board) / 2)) rotateY(90deg); }
.hc-edge--back { transform: translateX(50cqi) translateZ(calc(var(--board) / 2 - var(--depth) / 2)) rotateY(90deg); }

.hc-inner { left: calc(100% - var(--square)); width: var(--square); background: #121212; }
.hc-inner--front { transform: translateZ(calc(var(--depth) / 2 - var(--board))) rotateY(180deg); }
.hc-inner--back { transform: translateZ(calc(var(--board) - var(--depth) / 2)); }

/* The shadow it casts, which narrows as the book turns edge-on. */
.hc-shadow {
  position: absolute;
  inset: 5% 5% -2.5%;
  background: rgba(0, 0, 0, .72);
  filter: blur(20px);
}

:root[data-theme="light"] .hc-shadow { background: rgba(0, 0, 0, .3); }

.flip-btn { color: var(--ink-2); }
.flip-btn .ico { transition: transform .9s var(--ease-out); }
.flip-btn[aria-pressed="true"] .ico { transform: rotate(180deg); }

.book-title {
  margin: 0 0 12px;
  padding-bottom: 4px;
  font: 600 clamp(44px, 6vw, 72px)/1 var(--font-gothic);
  letter-spacing: .01em;
  background: var(--metal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.book-subtitle { font: 600 16px/1.5 var(--font-label); letter-spacing: .12em; color: var(--ink-2); }

.book-author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font: 600 12px var(--font-label);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.book-author::before {
  content: "";
  width: 34px;
  height: 9px;
  background:
    var(--gem-art) right center / 9px 9px no-repeat,
    linear-gradient(90deg, transparent, var(--frame-mid)) left center / calc(100% - 11px) 1px no-repeat;
}

.book-desc { max-width: 62ch; margin: 38px 0 0; font: 19px/1.65 var(--font-text); color: var(--ink-2); text-align: left; }
.book-desc p { margin: 0 0 .7em; }
.desc-epigraph { margin-bottom: 1.1em !important; font-style: italic; color: var(--ink); }

.desc-note {
  margin-top: 1.5em;
  padding-top: 1.2em;
  font-size: 17px;
  font-style: italic;
  color: var(--ink-3);
  border-top: 1px solid var(--frame-lo);
}

.desc-note p { margin-bottom: .45em; }
.actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.read-action { display: grid; gap: 10px; }
.book-hero-info > .actions { margin-top: 32px; }

@media (max-width: 680px) {
  .book-hero { grid-template-columns: 1fr; }
  .book-hero-cover { width: min(70%, 260px); margin: 0 auto; }
  .book-hero-info { text-align: center; }
  .book-author { justify-content: center; }
  .book-author::after {
    content: "";
    width: 34px;
    height: 9px;
    background:
      var(--gem-art) left center / 9px 9px no-repeat,
      linear-gradient(90deg, var(--frame-mid), transparent) right center / calc(100% - 11px) 1px no-repeat;
  }
  .actions { justify-content: center; }
  .book-desc { margin-left: auto; margin-right: auto; }
  .desc-epigraph,
  .desc-note { text-align: center; }
}

/* ---------------------------------------------------------------- cards */

.cards { display: grid; gap: 16px; }

.card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 2px 2px 2px 4px;
  animation: rise-in .7s var(--ease-out) both;
}

.card-body { min-width: 0; }
.card-title { display: flex; align-items: center; gap: 10px; font: 600 15px/1.3 var(--font-label); letter-spacing: .08em; overflow-wrap: anywhere; }
.card-title .ico { width: 15px; height: 15px; color: var(--ink-3); flex: none; }
.card-actions { display: flex; gap: 10px; align-items: center; }

.card--create {
  width: 100%;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
  opacity: .78;
  transition: opacity .3s, box-shadow .4s;
}

.card--create:hover { opacity: 1; border-image-source: var(--frame-art-lit); box-shadow: var(--shadow), 0 0 24px rgba(var(--glow), .08); }

/* A reader's seal: their initial, in black letter, inside a silver ring. */
.sigil {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  flex: none;
  padding-bottom: 3px;
  font: 600 29px/1 var(--font-gothic);
  color: #ececec;
  background: radial-gradient(circle at 50% 35%, #242424, #050505 72%);
  border-radius: 50%;
  box-shadow: 0 0 0 1px #000, 0 0 0 2px #8a8a8a, 0 0 0 4px #0a0a0a, 0 0 0 5px #3a3a3a, 0 6px 14px rgba(0, 0, 0, .6);
}

.sigil--plus { padding-bottom: 0; }
.sigil--plus .ico { width: 24px; height: 24px; }
.sigil--large { width: 78px; height: 78px; font-size: 42px; }

@media (max-width: 520px) {
  .card { grid-template-columns: auto minmax(0, 1fr); }
  .card-actions { grid-column: 1 / -1; justify-content: flex-end; }
}

/* ---------------------------------------------------------------- terms */

.terms { max-width: 780px; margin: 0 auto; }
.terms section + section { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.terms h2 { margin: 0 0 12px; font: 600 17px/1.3 var(--font-display); letter-spacing: .16em; text-transform: uppercase; }
.terms p { margin: 0 0 12px; font: 18px/1.65 var(--font-text); color: var(--ink-2); }
.terms p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- fan art */

.gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.8vw, 34px) clamp(16px, 2.6vw, 32px);
}

@media (max-width: 900px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.art-cell { position: relative; }

.art-tile {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: zoom-in;
  animation: tile-in .8s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}

.art-tile .bevel { aspect-ratio: 4 / 5; transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.art-tile:hover .bevel,
.art-tile:focus-visible .bevel { transform: translateY(-5px); box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(255, 255, 255, .5), 0 24px 40px rgba(0, 0, 0, .7), 0 0 34px rgba(var(--glow), .1); }
.art-tile:focus-visible { outline: none; }

.art-frame { position: relative; height: 100%; overflow: hidden; background: #050505; }
.art-frame img { width: 100%; height: 100%; object-fit: cover; }
.art-tile.is-pending .art-frame img { opacity: .5; filter: grayscale(1); }

.art-by {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 12px 10px;
  font: 600 11px/1.3 var(--font-label);
  letter-spacing: .12em;
  text-align: left;
  color: #eee;
  background: linear-gradient(transparent, rgba(0, 0, 0, .9));
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none;
}

.art-tile:hover .art-by,
.art-tile:focus-visible .art-by { opacity: 1; }

.art-flag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: #eee;
  background: rgba(0, 0, 0, .82);
  border: 1px solid var(--frame-mid);
  border-radius: 50%;
  pointer-events: none;
}

.art-flag .ico { width: 16px; height: 16px; }

.art-tools { position: absolute; top: 14px; right: 14px; z-index: 3; display: flex; gap: 6px; }

.art-tool {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: #eee;
  background: rgba(0, 0, 0, .82);
  border: 1px solid var(--frame-mid);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color .25s, box-shadow .3s;
}

.art-tool .ico { width: 16px; height: 16px; }
.art-tool:hover { border-color: var(--frame-hi); box-shadow: 0 0 14px rgba(var(--glow), .2); }

.art-add {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 5;
  padding: 0;
  color: var(--ink-3);
  background: var(--panel);
  border: 15px solid transparent;
  border-image: var(--frame-art) 20 / 15px stretch;
  cursor: pointer;
  transition: color .3s, box-shadow .4s;
  animation: tile-in .8s var(--ease-out) both;
}

.art-add .ico { width: 44px; height: 44px; }
.art-add:hover,
.art-add:focus-visible { color: var(--ink); border-image-source: var(--frame-art-lit); box-shadow: 0 0 28px rgba(var(--glow), .08); outline: none; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, .95);
  cursor: zoom-out;
  animation: fade-in .35s ease-out;
}

.lightbox figure { display: grid; gap: 16px; justify-items: center; max-width: min(1100px, 100%); margin: 0; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); object-fit: contain; box-shadow: 0 0 0 1px var(--frame-mid), 0 30px 80px rgba(0, 0, 0, .8); }
.lightbox figcaption { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 18px; font: 600 12px var(--font-label); letter-spacing: .14em; color: #b6b6b6; }
.lightbox figcaption .ico { width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; }
.lightbox .modal-close { position: fixed; top: 14px; right: 14px; color: #eee; }

.drop {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  color: var(--ink-3);
  background: var(--panel-2);
  border: 1px dashed var(--frame-mid);
  cursor: pointer;
  transition: color .25s, border-color .25s;
}

.drop .ico { width: 44px; height: 44px; }
.drop:hover,
.drop.is-over { color: var(--ink); border-color: var(--frame-hi); }
.drop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }

.upload-bar { height: 3px; background: var(--panel-4); }
.upload-bar > i { display: block; width: 0; height: 100%; background: var(--metal); transition: width .2s; }

/* ---------------------------------------------------------------- modal */

.layer-modal { position: relative; z-index: 60; }

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 16px;
  background: var(--backdrop);
  animation: fade-in .3s ease-out;
}

.modal-backdrop.is-leaving { animation: fade-out .25s ease-in forwards; }

/* A dialog is a panel in the lit frame. Never a white box. */
.modal {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 16px solid transparent;
  border-image: var(--frame-art-lit) 20 / 16px stretch;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .7);
  animation: modal-in .45s var(--ease-out);
}

.modal-inner {
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 14px clamp(10px, 3vw, 22px) 16px;
  color: var(--ink);
}

.modal-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 0 18px;
  padding: 0 34px;
  text-align: center;
  font: 600 20px/1.2 var(--font-display);
  letter-spacing: .2em;
  text-transform: uppercase;
}

.modal-title::before,
.modal-title::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  background: var(--gem-art) center / 100% 100% no-repeat;
}

.modal-close { position: absolute; top: 4px; right: 4px; z-index: 2; color: var(--ink); }
.modal-foot { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 22px; }
.modal-text { margin: 0; text-align: center; font: 18px/1.6 var(--font-text); color: var(--ink-2); }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { to { opacity: 0; } }

@keyframes modal-in {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to { opacity: 1; transform: none; }
}

.modal--settings { width: min(660px, 100%); }
.setting { display: grid; gap: 12px; padding: 16px 0; border-top: 1px solid var(--line); }
.setting:first-of-type { border-top: 0; padding-top: 4px; }
.setting-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }

.stepper { display: inline-flex; align-items: center; gap: 12px; }
.stepper output { min-width: 3.2ch; text-align: center; font: 600 17px var(--font-label); }
.size-sample { flex: 1 1 120px; text-align: center; line-height: 1; color: var(--ink); }

/* ---------------------------------------------------------------- toast */

.layer-toast {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--tabbar-h) + 34px + env(safe-area-inset-bottom));
  z-index: 90;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 0 16px;
  pointer-events: none;
}

.is-immersive .layer-toast { bottom: 96px; }

.toast {
  max-width: min(520px, 92vw);
  padding: 4px 10px;
  color: var(--ink);
  background: var(--panel-2);
  border: 11px solid transparent;
  border-image: var(--frame-art) 20 / 11px stretch;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .6);
  font: 17px/1.4 var(--font-text);
  text-align: center;
  pointer-events: auto;
  animation: toast-in .5s var(--ease-out);
}

.toast.is-leaving { animation: toast-out .4s ease-in forwards; }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes toast-out { to { opacity: 0; transform: translateY(6px); } }

/* ------------------------------------------------------------ fx layer */

.layer-fx { position: fixed; inset: 0; z-index: 80; pointer-events: none; overflow: hidden; }
.layer-fx.is-active { pointer-events: auto; }

.flyer {
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  color: #fff;
  filter: drop-shadow(0 0 7px rgba(255, 255, 255, .9)) drop-shadow(0 0 2px rgba(255, 255, 255, .7));
  pointer-events: none;
  will-change: transform, opacity;
}

:root[data-theme="light"] .flyer { color: #111; filter: drop-shadow(0 0 5px rgba(0, 0, 0, .3)); }

.flyer .ico { width: 100%; height: 100%; animation: flap .2s ease-in-out infinite alternate; }
.flyer--slow .ico { animation-duration: .38s; }

@keyframes flap {
  from { transform: scaleX(1); }
  to { transform: scaleX(.22); }
}

/* ------------------------------------------------------ misc. surfaces */

.empty {
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: 44px 10px;
  text-align: center;
  color: var(--ink-2);
}

.panel { padding: clamp(6px, 2vw, 16px); }
.stack { display: grid; gap: 14px; }
.muted { color: var(--ink-3); }
.mono { font-family: var(--font-mono); }

.profile-head { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.profile-name { font: 600 38px/1 var(--font-gothic); }
.profile-sub { margin-top: 6px; font: 600 11px var(--font-label); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.profile-head .btn { margin-left: auto; }

.auth-wrap { display: grid; gap: 26px; justify-items: center; max-width: 560px; margin: 0 auto; }
.auth-wrap .frame { width: 100%; }

.track-list { display: grid; gap: 8px; }

.track-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  background: var(--panel-2);
  border: 1px solid var(--frame-lo);
}

.track-row .icon-btn { width: 34px; height: 34px; }
.track-row .icon-btn .ico { width: 18px; height: 18px; }
.track-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 17px/1.25 var(--font-text); }
.track-meta { font: 600 10px/1.3 var(--font-label); letter-spacing: .12em; color: var(--ink-3); }
.track-uses { display: inline-flex; align-items: center; gap: 3px; margin-left: 10px; }
.track-uses .ico { width: 11px; height: 11px; }
.track-bar { height: 3px; margin-top: 5px; background: var(--panel-4); }
.track-bar > i { display: block; width: 0; height: 100%; background: var(--metal); transition: width .2s; }

.storage { display: grid; gap: 6px; font: 600 11px var(--font-label); letter-spacing: .12em; color: var(--ink-3); }
.storage-bar { height: 4px; background: var(--panel-4); border: 1px solid var(--frame-lo); }
.storage-bar > i { display: block; height: 100%; background: var(--metal); }

.notice { font: italic 16px/1.5 var(--font-text); color: var(--ink-3); }

/* Waiting: the serpent in its eight, breathing slowly. */
.loading {
  display: grid;
  place-items: center;
  min-height: 40vh;
  color: var(--ink-3);
}

.loading-mark { width: 52px; height: 52px; animation: breathe 3s ease-in-out infinite; }

@keyframes breathe {
  0%, 100% { opacity: .3; transform: scale(.97); }
  50% { opacity: .85; transform: none; }
}