@property --ambient {
  syntax: '<color>';
  inherits: true;
  initial-value: #3d5a8a;
}

:root {
  color-scheme: dark;
  --bg: #0e1116;
  --bg-2: #131820;
  --surface: #1a1f28;
  --surface-2: #232a35;
  --surface-3: #2c3441;
  --line: #2b3340;
  --text: #e8ecf2;
  --text-2: #a7b0bf;
  --text-3: #768093;
  --accent: #8ab4f8;
  --accent-ink: #0a1a34;
  --focus: #ffffff;
  --focus-ink: #0e1116;
  --good: #81c995;
  --warn: #fdd663;
  --bad: #f28b82;
  --radius: 14px;
  --radius-lg: 22px;
  --font-display: 'Lexend', 'Be Vietnam Pro', system-ui, sans-serif;
  --font-body: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  
  --gutter: max(16px, 4.5vw);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ambient: #3d5a8a;
  transition: --ambient .7s var(--ease);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 15px; font-size: clamp(15px, 0.5vw + 10px, 21px);
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 400 1rem/1.55 var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}


body::before {
  content: '';
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(70rem 36rem at 8% -12%, color-mix(in srgb, var(--ambient) 34%, transparent), transparent 70%),
    radial-gradient(50rem 30rem at 100% 0%, rgba(138, 180, 248, .05), transparent 70%);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  body::before { background: radial-gradient(70rem 36rem at 8% -12%, rgba(61, 90, 138, .32), transparent 70%); }
}

img { max-width: 100%; display: block; }
a { color: var(--accent); }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

h1, h2, h3 { font-family: var(--font-display); line-height: 1.15; margin: 0; text-wrap: balance; }
h1 { font-size: 1.9rem; font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; font-weight: 500; }
h3 { font-size: 1rem; font-weight: 500; }
p { margin: 0; }

.boot { padding: 3rem var(--gutter); color: var(--text-2); font-size: 1.1rem; }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.eyebrow {
  font: 600 .74rem/1.2 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-2);
}
.mono { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: .85em; word-break: break-all; }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }


.topbar {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: 1rem var(--gutter) .4rem; padding: max(1rem, env(safe-area-inset-top, 0px)) var(--gutter) .4rem;
}
.brand { display: flex; align-items: center; gap: .6rem; color: var(--text); text-decoration: none; flex: none; }
.brand-mark { width: 2rem; height: 2rem; }
.brand-word { font: 700 1.2rem/1 var(--font-display); letter-spacing: -.01em; }
.brand-word span { color: var(--text-3); font-weight: 500; margin-left: .3rem; }
.tabs {
  display: flex;
  gap: .3rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding: .35rem;
  margin: -.35rem;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem 1.05rem;
  border-radius: 999px;
  color: var(--text-2);
  text-decoration: none;
  font: 500 .95rem/1.2 var(--font-display);
  white-space: nowrap;
  transition: background .15s, color .15s, transform .15s var(--ease);
}
.tab.is-current { color: var(--text); background: rgba(255, 255, 255, .08); }
.who { margin-left: auto; display: flex; align-items: center; gap: .6rem; color: var(--text-2); font-size: .9rem; min-width: 0; }
.who-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 12rem; }
.avatar {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--ambient);
  color: #fff;
  font: 700 .95rem/1 var(--font-display);
}


.page {
  display: grid;
  gap: 2.2rem;
  padding: 1.1rem var(--gutter) calc(4rem + env(safe-area-inset-bottom, 0px));
  max-width: 120rem;
  margin: 0 auto;
}
.page-head { display: grid; gap: .5rem; }
.narrow { max-width: 34rem; width: 100%; margin: 0 auto; }


.spotlight {
  position: relative;
  display: grid;
  align-items: end;
  min-height: 46vh; min-height: clamp(15rem, 46vh, 27rem);
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
}
.spotlight > .art { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: -2; border-radius: 0; }
.spotlight::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(14, 17, 22, .94) 0%, rgba(14, 17, 22, .72) 42%, rgba(14, 17, 22, .05) 78%),
    linear-gradient(0deg, rgba(14, 17, 22, .6), transparent 45%);
}
.spotlight-body { display: grid; gap: .7rem; padding: 3vw; padding: clamp(1.4rem, 3vw, 2.6rem); max-width: 38rem; }
.spotlight h1 { font-size: 3.2vw; font-size: clamp(2rem, 3.2vw, 3.1rem); line-height: 1.02; }
.summary { color: var(--text-2); font-size: 1.05rem; max-width: 36rem; }
.meta { display: flex; flex-wrap: wrap; gap: .3rem .9rem; color: var(--text-2); font-size: .88rem; }
.meta > span + span::before { content: '·'; margin-right: .9rem; color: var(--text-3); }
.actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-top: .4rem; }


.art {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background-color: var(--app-color, #3d5a8a);
  background-image: repeating-radial-gradient(circle at 82% 18%, rgba(255, 255, 255, .07) 0 2px, transparent 2px 1.6rem),
    linear-gradient(140deg, rgba(255, 255, 255, .16), rgba(0, 0, 0, .42));
}
.art > img.cover { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.art-icon { width: 34%; max-width: 7rem; aspect-ratio: 1; border-radius: 22%; box-shadow: 0 10px 24px rgba(0, 0, 0, .35); object-fit: cover; }
.art-letter { font: 700 6vw/1 var(--font-display); font: 700 clamp(2.4rem, 6vw, 5rem)/1 var(--font-display); color: rgba(255, 255, 255, .92); text-shadow: 0 6px 24px rgba(0, 0, 0, .3); }
.spotlight .art-icon, .spotlight .art-letter { margin-left: 45%; }


.shelf { display: grid; gap: .7rem; min-width: 0; }
.shelf-head { display: flex; align-items: baseline; gap: .8rem; }
.shelf-track {
  display: flex;
  gap: 1.15rem;
  overflow-x: auto;
  scrollbar-width: none;
  
  padding: .9rem var(--gutter) 1rem;
  margin: -.9rem calc(-1 * var(--gutter)) -1rem;
  scroll-padding-inline: var(--gutter);
}
.shelf-track::-webkit-scrollbar { display: none; }
.card {
  flex: 0 0 auto;
  width: 21vw; width: clamp(12.5rem, 21vw, 19rem);
  display: grid;
  gap: .6rem;
  color: inherit;
  text-decoration: none;
  outline: none;
  scroll-margin: 1.5rem;
  border-radius: var(--radius);
}
.card .art, .card-art {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.card-title { font: 500 1rem/1.25 var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-sub { color: var(--text-2); font-size: .88rem; margin-top: -.35rem; }

.card.card-wide { width: 27vw; width: clamp(15rem, 27vw, 23rem); }
.card .art.card-note {
  aspect-ratio: auto;
  height: 100%;
  min-height: 8.5rem;
  display: grid;
  align-content: start;
  justify-items: start;
  place-items: initial;
  gap: .4rem;
  padding: 1.1rem 1.2rem;
  background: var(--surface);
}
.card-note .icon { width: 1.7rem; height: 1.7rem; color: var(--accent); }
.card-note strong { font: 500 1.05rem/1.25 var(--font-display); }
.card-note span { color: var(--text-2); font-size: .9rem; line-height: 1.45; }


.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 2.8rem;
  padding: .55rem 1.3rem;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  color: var(--text);
  font: 500 .95rem/1.2 var(--font-display);
  text-decoration: none;
  cursor: pointer;
  outline: none;
  transition: background .15s, color .15s, transform .15s var(--ease), box-shadow .15s;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-danger { background: rgba(242, 139, 130, .14); color: var(--bad); }
.btn-quiet { background: transparent; color: var(--text-2); }
.btn-small { min-height: 2.2rem; padding: .35rem .9rem; font-size: .85rem; }
.btn[disabled] { opacity: .45; cursor: default; pointer-events: none; }
.btn .icon { width: 1.15em; height: 1.15em; }


.tab:hover {
  background: var(--focus);
  color: var(--focus-ink);
  transform: scale(1.05);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
}
.kbd .tab:focus {
  background: var(--focus);
  color: var(--focus-ink);
  transform: scale(1.05);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
}
.kbd .tab.is-focus {
  background: var(--focus);
  color: var(--focus-ink);
  transform: scale(1.05);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
}
.btn:hover {
  background: var(--focus);
  color: var(--focus-ink);
  transform: scale(1.05);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
}
.kbd .btn:focus {
  background: var(--focus);
  color: var(--focus-ink);
  transform: scale(1.05);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
}
.kbd .btn.is-focus {
  background: var(--focus);
  color: var(--focus-ink);
  transform: scale(1.05);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
}
.btn-danger:hover { background: var(--bad); color: #2a0d0a; }
.kbd .btn-danger:focus { background: var(--bad); color: #2a0d0a; }
.kbd .btn-danger.is-focus { background: var(--bad); color: #2a0d0a; }
.card:hover .art {
  transform: scale(1.06);
  box-shadow: 0 0 0 3px var(--focus), 0 16px 34px rgba(0, 0, 0, .55);
}
.kbd .card:focus .art {
  transform: scale(1.06);
  box-shadow: 0 0 0 3px var(--focus), 0 16px 34px rgba(0, 0, 0, .55);
}
.kbd .card.is-focus .art {
  transform: scale(1.06);
  box-shadow: 0 0 0 3px var(--focus), 0 16px 34px rgba(0, 0, 0, .55);
}
.kbd .card:focus .card-title { color: #fff; }
.kbd .card.is-focus .card-title { color: #fff; }
.row-button:hover { background: var(--surface-3); box-shadow: inset 0 0 0 2px var(--focus); }
.kbd .row-button:focus { background: var(--surface-3); box-shadow: inset 0 0 0 2px var(--focus); }
.kbd .row-button.is-focus { background: var(--surface-3); box-shadow: inset 0 0 0 2px var(--focus); }
.kbd a.link-plain:focus { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.kbd a.link-plain.is-focus { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }


.panel { display: grid; gap: 1rem; align-content: start; padding: 2.2vw; padding: clamp(1.1rem, 2.2vw, 1.8rem); background: var(--surface); border-radius: var(--radius-lg); min-width: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .18rem .65rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: var(--text-2);
  font: 600 .76rem/1.4 var(--font-body);
  white-space: nowrap;
}
.chip .icon { width: 1em; height: 1em; }
.chip.good { background: rgba(129, 201, 149, .14); color: var(--good); }
.chip.warn { background: rgba(253, 214, 99, .14); color: var(--warn); }
.chip.bad { background: rgba(242, 139, 130, .14); color: var(--bad); }
.chip.info { background: rgba(138, 180, 248, .14); color: var(--accent); }

.form { display: grid; gap: 1rem; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; }
.field { display: grid; gap: .35rem; min-width: 0; }
.field > label, .label { color: var(--text-2); font-size: .85rem; font-weight: 500; }
.hint { color: var(--text-3); font-size: .8rem; }
input[type='text'], input[type='password'], input[type='search'], input:not([type]), select, textarea {
  width: 100%;
  min-height: 3rem;
  padding: .7rem 1rem;
  border: 2px solid transparent;
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 16px; font-size: max(16px, 1rem);
  outline: none;
  transition: border-color .15s, background .15s;
}
textarea { min-height: 7rem; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus, .kbd input.is-focus, .kbd select.is-focus, .kbd textarea.is-focus {
  border-color: var(--focus);
  background: var(--surface-3);
}
input[type='color'] { width: 4rem; height: 3rem; padding: .2rem; border-radius: 12px; border: 2px solid transparent; background: var(--surface-2); cursor: pointer; }
.kbd input[type='color']:focus { border-color: var(--focus); outline: none; }
.kbd input[type='color'].is-focus { border-color: var(--focus); outline: none; }
.check { display: inline-flex; align-items: center; gap: .65rem; cursor: pointer; font-size: .95rem; }
.check input { width: 1.35rem; height: 1.35rem; accent-color: var(--accent); margin: 0; }
.kbd .check input:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
.kbd .check input.is-focus { outline: 3px solid var(--focus); outline-offset: 2px; }
.form-error { color: var(--bad); font-size: .9rem; min-height: 1.4em; }
.form-error:empty { min-height: 0; }


.gate { display: grid; gap: 2rem; padding: 1.4rem var(--gutter) 3rem; max-width: 70rem; margin: 0 auto; }
.login { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 3vw; gap: clamp(1rem, 3vw, 2.4rem); align-items: start; }
.login-tv { grid-template-columns: auto minmax(13rem, 1fr); align-items: center; column-gap: 3vw; column-gap: clamp(1.2rem, 3vw, 2.4rem); }
.login-tv > .panel-intro { grid-column: 1 / -1; }
.qr-box { width: 19vw; width: clamp(10rem, 19vw, 15rem); aspect-ratio: 1; padding: .8rem; border-radius: 18px; background: #fff; display: grid; place-items: center; }
.qr-box svg { width: 100%; height: 100%; display: block; }
.qr-box.is-waiting { background: var(--surface-2); color: var(--text-3); font-size: .85rem; text-align: center; padding: 1rem; }
.user-code { font: 700 2.5vw/1 var(--font-display); font: 700 clamp(1.6rem, 2.5vw, 2.4rem)/1 var(--font-display); letter-spacing: .1em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: .8rem; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 1.9rem minmax(0, 1fr); gap: .8rem; align-items: start; }
.steps li::before {
  content: counter(step);
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(138, 180, 248, .16);
  color: var(--accent);
  font: 700 .9rem/1 var(--font-display);
}
.steps strong { display: block; font-family: var(--font-display); font-weight: 500; }
.steps span { color: var(--text-2); font-size: .92rem; }


.detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.5vw; gap: clamp(1.4rem, 3.5vw, 3rem); align-items: center; }
.detail > .art { aspect-ratio: 16 / 9; border-radius: var(--radius-lg); }
.detail-body { display: grid; gap: .9rem; }
.detail-body h1 { font-size: 3vw; font-size: clamp(2rem, 3vw, 2.9rem); }
.facts { display: flex; flex-wrap: wrap; gap: .8rem 2rem; margin: .3rem 0 0; padding: 0; list-style: none; }
.facts li { display: grid; gap: .1rem; }
.facts span { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); font-weight: 600; }
.facts b { font: 500 1.05rem/1.3 var(--font-display); font-variant-numeric: tabular-nums; }
.install-note { display: grid; gap: .5rem; padding: 1rem 1.2rem; border-radius: var(--radius); background: rgba(138, 180, 248, .1); border: 1px solid rgba(138, 180, 248, .25); }
.install-note strong { font-family: var(--font-display); font-weight: 500; }
.columns { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
.prose { color: var(--text-2); white-space: pre-line; max-width: 65ch; }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .55rem 1.2rem; margin: 0; }
.kv dt { color: var(--text-3); font-size: .85rem; }
.kv dd { margin: 0; min-width: 0; }
.versions { display: grid; gap: .5rem; }
.version-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .3rem 1rem;
  align-items: center;
  padding: .75rem 1rem;
  border-radius: var(--radius);
  background: var(--surface);
}
.version-row .notes { grid-column: 1 / -1; color: var(--text-2); font-size: .88rem; white-space: pre-line; }


.rows { display: grid; gap: .5rem; }
.row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .4rem 1rem;
  align-items: center;
  padding: .8rem 1rem;
  border-radius: var(--radius);
  background: var(--surface-2);
  color: inherit;
  text-decoration: none;
}
.row-button { cursor: pointer; outline: none; transition: background .15s, box-shadow .15s; }
.row-main { display: grid; gap: .15rem; min-width: 0; }
.row-title { font: 500 1rem/1.3 var(--font-display); display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.row-sub { color: var(--text-2); font-size: .84rem; overflow-wrap: anywhere; }
.row-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
.thumb { width: 5.6rem; aspect-ratio: 16 / 9; border-radius: 10px; }
.thumb .art-letter { font-size: 1.4rem; }
.thumb .art-icon { width: 46%; border-radius: 20%; }
.row-icon { width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .06); color: var(--text-2); }

.subtabs { display: flex; flex-wrap: wrap; gap: .4rem; }
.drop {
  display: grid;
  gap: .8rem;
  justify-items: start;
  padding: 1.4rem;
  border: 2px dashed var(--line);
  border-radius: var(--radius-lg);
  transition: border-color .15s, background .15s;
}
.drop.is-over { border-color: var(--accent); background: rgba(138, 180, 248, .06); }
.drop > .field, .drop > .progress { justify-self: stretch; max-width: 46rem; }
.drop textarea { min-height: 4.5rem; }
.progress { width: 100%; height: .55rem; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.progress > span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s linear; }
.link-box { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem; align-items: center; padding: .8rem 1rem; border-radius: var(--radius); background: var(--surface-2); }
.image-slot { display: grid; gap: .6rem; justify-items: start; }
.image-slot .preview { width: 11rem; aspect-ratio: 16 / 9; border-radius: 12px; }
.image-slot .preview.square { width: 5.5rem; aspect-ratio: 1; }

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th { text-align: left; font-size: .74rem; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); font-weight: 600; padding: .5rem .6rem; white-space: nowrap; }
.table td { padding: .65rem .6rem; border-top: 1px solid var(--line); vertical-align: top; }
.table td.nowrap { white-space: nowrap; }

.empty { display: grid; gap: .8rem; justify-items: start; padding: 2rem; border-radius: var(--radius-lg); background: var(--surface); }
.stat-line { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; color: var(--text-2); font-size: .88rem; list-style: none; margin: 0; padding: 0; }
ul.stat-line { gap: .5rem; }


.toasts {
  position: fixed;
  left: 50%;
  bottom: calc(1.4rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: grid;
  gap: .5rem;
  z-index: 60;
  width: 34rem; width: min(34rem, calc(100vw - 32px));
  pointer-events: none;
}
.toast {
  padding: .85rem 1.2rem;
  border-radius: 14px;
  background: #eef1f6;
  color: #111418;
  font-size: .95rem;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
  animation: toast-in .25s var(--ease);
}
.toast.bad { background: var(--bad); color: #2a0d0a; }
.toast.good { background: var(--good); color: #0c2413; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

.backdrop {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(5, 7, 10, .74);
}
.dialog {
  width: 100%; width: min(30rem, 100%);
  display: grid;
  gap: 1rem;
  padding: 1.6rem;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .65);
}


@media (max-width: 900px) {
  .detail, .columns { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .login { grid-template-columns: minmax(0, 1fr); }
  .login-tv { display: none; }
  .topbar { flex-wrap: wrap; gap: .8rem 1rem; }
  .tabs { order: 3; width: calc(100% + .7rem); }
  .who-name { display: none; }
  .spotlight { min-height: 0; }
  .spotlight > .art { position: relative; aspect-ratio: 16 / 9; }
  .spotlight::before { display: none; }
  .spotlight .art-icon, .spotlight .art-letter { margin-left: 0; }
  .row { grid-template-columns: minmax(0, 1fr); }
  .row > .thumb, .row > .row-icon { display: none; }
  .row-actions { justify-content: flex-start; }
  .link-box { grid-template-columns: minmax(0, 1fr); }
}


@supports not (aspect-ratio: 1 / 1) {
  
  :root { --gutter: 4.5vw; }
  .topbar { padding: 1rem 4.5vw .4rem; }
  .card .art, .card-art { height: 11.8vw; }
  .card .art.card-note { height: auto; }
  .detail > .art { height: 25vw; }
  .qr-box { height: 19vw; }
  .thumb { height: 3.15rem; }
  .image-slot .preview { height: 6.2rem; }
  .image-slot .preview.square { height: 5.5rem; }
  .art-icon { width: auto; height: 34%; }
  .topbar > * { margin-right: 1.4rem; }
  .brand > * + * { margin-left: .6rem; }
  .tabs > * { margin-right: .3rem; }
  .tab .icon, .btn .icon, .chip .icon { margin-right: .5rem; }
  .who > * + * { margin-left: .6rem; }
  .shelf-track > * { margin-right: 1.15rem; }
  .actions > *, .row-actions > *, .subtabs > *, .facts > li { margin: 0 .8rem .6rem 0; }
  .meta > span { margin-right: .9rem; }
  .row-title > * + * { margin-left: .5rem; }
  .stat-line > * { margin: 0 .6rem .4rem 0; }
  .shelf-head > * + *, .panel-head > * + * { margin-left: .8rem; }
  .check input { margin-right: .65rem; }
}
@media (max-width: 900px) {
  @supports not (aspect-ratio: 1 / 1) { .detail > .art { height: 50vw; } }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}