/* JKT Jitra Command Hub — Harley + Mustang + ED + Netflix + HUD */

:root {
  --red: #e10600;
  --red-hot: #ff2a14;
  --orange: #ff6a00;
  --gold: #d4af37;
  --gold-2: #f0d78c;
  --navy: #141c33;
  --ems: #2b3990;
  --chrome: #c9d0da;
  --bg: #050506;
  --bg-2: #0a0b0e;
  --panel: rgba(12, 12, 16, .78);
  --panel-2: rgba(22, 22, 28, .92);
  --line: rgba(212, 175, 55, .28);
  --line-2: rgba(255, 255, 255, .08);
  --text: #f5f1e8;
  --muted: #9c9588;
  --dim: #6b665c;
  --ok: #3ee0a0;
  --warn: #ffb020;
  --bad: #ff4d4d;
  --shadow: 0 24px 60px -18px rgba(0, 0, 0, .85);
  --radius: 22px;
  --font: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Segoe UI Variable Display", Bahnschrift, "Arial Narrow", "Segoe UI", sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

*, *::before, *::after { box-sizing: border-box }
html, body { height: 100% }
html { background: var(--bg); color-scheme: dark }

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(900px 520px at 8% -10%, rgba(225, 6, 0, .18), transparent 55%),
    radial-gradient(800px 480px at 92% 0%, rgba(43, 57, 144, .22), transparent 50%),
    radial-gradient(700px 400px at 50% 110%, rgba(212, 175, 55, .08), transparent 55%),
    linear-gradient(180deg, #0c0d12 0%, var(--bg) 42%, #030304 100%);
  background-attachment: fixed;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

img { max-width: 100%; display: block }
button, input, select, textarea { font: inherit; color: inherit }
button, a, input { touch-action: manipulation }
a { color: inherit }

.ambient { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden }
.stripe-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 8px;
  background:
    linear-gradient(90deg, var(--gold) 0 6px, transparent 6px 14px, var(--red) 14px 20px, transparent 20px 28px),
    linear-gradient(90deg, var(--red), var(--orange) 40%, var(--gold) 70%, var(--ems));
  background-size: 28px 8px, 100% 8px;
  box-shadow: 0 0 24px rgba(225, 6, 0, .45);
}
.grid-fx {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 20%, #000 20%, transparent 75%);
  opacity: .45;
}
.glow {
  position: absolute; width: 42vw; height: 42vw; border-radius: 50%;
  filter: blur(40px); opacity: .22;
}
.glow-a { left: -12vw; top: 18vh; background: #e10600 }
.glow-b { right: -10vw; top: 8vh; background: #2b3990 }

.hud-frame {
  position: fixed; inset: 10px;
  inset: calc(10px + var(--safe-t)) calc(10px + var(--safe-r)) calc(10px + var(--safe-b)) calc(10px + var(--safe-l));
  pointer-events: none; z-index: 1;
  border: 1px solid rgba(212, 175, 55, .12);
  border-radius: 18px;
}
.hud-frame::before, .hud-frame::after {
  content: ""; position: absolute; width: 28px; height: 28px;
  border: 2px solid var(--gold);
}
.hud-frame::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-top-left-radius: 16px }
.hud-frame::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-bottom-right-radius: 16px }

.app-root { position: relative; z-index: 2; min-height: 100dvh }

[hidden] { display: none !important }

/* ---------- boot ---------- */
.boot {
  min-height: 100dvh;
  display: grid; place-items: center;
  padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);
  text-align: center;
}
.boot-logo {
  width: min(42vw, 168px); height: auto;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,.7));
  animation: pulse 1.6s ease-in-out infinite;
}
.boot p { margin: 16px 0 0; color: var(--muted); letter-spacing: .28em; text-transform: uppercase; font-size: .72rem; font-weight: 700 }
@keyframes pulse { 50% { transform: scale(1.04); filter: drop-shadow(0 12px 36px rgba(225,6,0,.35)) } }

/* ---------- auth ---------- */
.auth-shell {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: stretch;
}
.auth-hero {
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(56px + var(--safe-t)) 48px calc(48px + var(--safe-b)) calc(48px + var(--safe-l));
  position: relative;
}
.auth-hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 10%, rgba(5,5,6,.55) 58%, rgba(5,5,6,.94) 100%),
    linear-gradient(90deg, rgba(5,5,6,.2), transparent 40%);
}
.brand-lockup { position: relative; max-width: 560px }
.brand-lockup img {
  width: 108px; height: 108px; object-fit: contain;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.6));
  margin-bottom: 22px;
}
.kicker {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: .72rem; font-weight: 700; letter-spacing: .34em;
  text-transform: uppercase; color: var(--gold-2);
}
.brand-lockup h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2rem, 4.4vw, 3.35rem);
  font-weight: 800; letter-spacing: -.03em; line-height: 1.05;
  text-wrap: balance;
}
.brand-lockup .sub {
  margin: 14px 0 0; color: var(--muted); font-size: 1.02rem; max-width: 36em;
}
.hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line-2);
  font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--chrome);
}

.auth-panel {
  display: flex; align-items: center; justify-content: center;
  padding: calc(28px + var(--safe-t)) calc(28px + var(--safe-r)) calc(28px + var(--safe-b)) 28px;
}
.auth-card {
  width: min(100%, 460px);
  background: linear-gradient(180deg, rgba(28,28,34,.88), rgba(10,10,14,.92));
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.08);
  padding: 26px 24px 22px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  padding: 5px; background: rgba(0,0,0,.35);
  border-radius: 16px; margin-bottom: 22px;
}
.tabs button {
  border: 0; background: transparent; color: var(--muted);
  padding: 11px 10px; border-radius: 12px; font-weight: 700; letter-spacing: .04em;
  min-height: 44px;
}
.tabs button.active {
  background: linear-gradient(180deg, #2a2a32, #16161c);
  color: var(--text);
  box-shadow: 0 6px 16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
}

.form { display: grid; gap: 12px }
.form.two { grid-template-columns: 1fr 1fr }
.field { display: grid; gap: 6px }
.field.span2 { grid-column: 1 / -1 }
.field label {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.field input {
  width: 100%;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 13px 14px;
  font-size: 16px;
  outline: none;
  min-height: 48px;
}
.field input:focus {
  border-color: color-mix(in srgb, var(--gold) 70%, white);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, .18);
}
.check {
  display: flex; align-items: center; gap: 10px;
  font-size: .88rem; color: var(--muted);
  user-select: none;
}
.check input { width: 18px; height: 18px; accent-color: var(--red) }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 14px;
  min-height: 48px; padding: 12px 18px;
  font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.btn:active { transform: translateY(1px) scale(.99) }
.btn-primary {
  background: linear-gradient(180deg, #ff3b2e, var(--red) 55%, #9a0400);
  color: #fff;
  box-shadow: 0 10px 24px rgba(225, 6, 0, .35), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-primary:hover { filter: brightness(1.08) }
.btn-ghost {
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line-2);
  color: var(--text);
}
.btn-ok {
  background: linear-gradient(180deg, #46f0b0, #0f8f62);
  color: #04150e;
}
.btn-bad {
  background: linear-gradient(180deg, #ff6b6b, #b01010);
  color: #fff;
}
.btn[disabled] { opacity: .55; pointer-events: none }
.form-msg {
  min-height: 1.2em; margin: 0;
  font-size: .88rem; color: var(--bad);
}
.fine { margin: 14px 0 0; text-align: center; color: var(--dim); font-size: .78rem }

/* ---------- wait / reject ---------- */
.center-card {
  min-height: 100dvh;
  display: grid; place-items: center;
  padding: calc(24px + var(--safe-t)) calc(20px + var(--safe-r)) calc(24px + var(--safe-b)) calc(20px + var(--safe-l));
}
.notice {
  width: min(100%, 480px); text-align: center;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 28px; padding: 32px 26px;
  box-shadow: var(--shadow);
}
.notice img { width: 88px; height: 88px; margin: 0 auto 16px; filter: drop-shadow(0 10px 20px rgba(0,0,0,.5)) }
.notice h2 { margin: 0 0 8px; font-family: var(--display); letter-spacing: -.02em }
.notice p { margin: 0; color: var(--muted) }
.notice .actions { display: flex; gap: 10px; justify-content: center; margin-top: 22px; flex-wrap: wrap }

/* ---------- app chrome ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  padding: calc(12px + var(--safe-t)) calc(18px + var(--safe-r)) 12px calc(18px + var(--safe-l));
  background: linear-gradient(180deg, rgba(8,8,10,.92), rgba(8,8,10,.72) 70%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.topbar .crest {
  width: 46px; height: 46px; object-fit: contain; flex: none;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.55));
}
.logo-refresh {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.logo-refresh:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  border-radius: 50%;
}
.logo-refresh:hover { filter: drop-shadow(0 8px 16px rgba(225, 6, 0, .35)) brightness(1.08) }
@keyframes crest-spin { to { transform: rotate(360deg) } }
body.is-hard-refreshing .logo-refresh {
  animation: crest-spin .7s linear infinite;
  pointer-events: none;
}
.top-id { min-width: 0; flex: 1 }
.top-id .dept {
  margin: 0; font-family: var(--display); font-weight: 800;
  font-size: clamp(.92rem, 2.4vw, 1.15rem); letter-spacing: -.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.top-id .hosp { margin: 2px 0 0; color: var(--muted); font-size: .75rem }
.top-actions { display: flex; align-items: center; gap: 8px; flex: none }
.icon-btn {
  width: 44px; height: 44px; border-radius: 14px;
  border: 1px solid var(--line-2);
  background: rgba(255,255,255,.05);
  display: grid; place-items: center; color: var(--text); position: relative;
}
.icon-btn svg { width: 20px; height: 20px }
.badge {
  position: absolute; top: -5px; right: -5px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--red);
  font-size: .65rem; font-weight: 800; display: grid; place-items: center;
}
.user-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px 6px 6px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgba(255,255,255,.04);
  max-width: 220px;
}
.avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(145deg, var(--gold), var(--red));
  color: #1a1208; font-weight: 800; font-size: .78rem;
}
.user-chip .who { min-width: 0 }
.user-chip strong, .user-chip span {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-chip span { color: var(--muted); font-size: .7rem }

.wrap {
  width: min(1180px, calc(100% - 28px - var(--safe-l) - var(--safe-r)));
  margin: 0 auto;
  padding: 8px 0 calc(48px + var(--safe-b));
}

.hello { margin: 8px 0 4px }
.hello h2 {
  margin: 0; font-family: var(--display);
  font-size: clamp(1.6rem, 4vw, 2.5rem); letter-spacing: -.03em;
}
.hello p { margin: 6px 0 0; color: var(--muted) }

.row-title {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 28px 0 12px;
}
.row-title h3 {
  margin: 0; font-family: var(--display); font-size: .78rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--gold-2);
}

.rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.poster {
  position: relative;
  display: flex; flex-direction: column;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.poster-3d {
  position: relative;
  aspect-ratio: 1;
  border-radius: 22px;
  transform: perspective(900px) rotateX(7deg) rotateY(-9deg);
  transform-style: preserve-3d;
  box-shadow:
    0 22px 28px -12px rgba(0,0,0,.85),
    0 0 0 1px rgba(255,255,255,.08),
    0 0 24px color-mix(in srgb, var(--accent, var(--red)) 22%, transparent);
  overflow: hidden;
  background: #111;
  transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease;
}
.poster-3d img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.04);
}
.poster-shine {
  position: absolute; inset: 0;
  background: linear-gradient(125deg, rgba(255,255,255,.28) 0%, transparent 36%, transparent 60%, rgba(212,175,55,.12) 100%);
  mix-blend-mode: screen; pointer-events: none;
}
.poster-3d::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -18px 24px rgba(0,0,0,.35);
}
.poster:hover .poster-3d, .poster:focus-visible .poster-3d {
  transform: perspective(900px) rotateX(0deg) rotateY(0deg) translateY(-8px) scale(1.03);
  box-shadow:
    0 28px 40px -14px rgba(0,0,0,.9),
    0 0 0 1px rgba(255,255,255,.16),
    0 0 36px color-mix(in srgb, var(--accent, var(--red)) 40%, transparent);
}
.poster:focus-visible { outline: none }
.poster-meta { padding: 12px 4px 0 }
.poster-meta h3 {
  margin: 0; font-size: 1.02rem; font-weight: 800; letter-spacing: -.02em;
}
.poster-meta .role {
  margin: 3px 0 0;
  color: var(--accent, var(--gold));
  font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.poster-meta .blurb {
  margin: 8px 0 0; color: var(--muted); font-size: .84rem;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.install-banner {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0 6px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(225, 6, 0, .12);
  border: 1px solid rgba(225, 6, 0, .28);
}
.install-banner p { margin: 0; flex: 1; font-size: .9rem }
.install-banner[hidden] { display: none !important }

/* profile / admin */
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 8px 0 18px;
}
.panel-head h2 { margin: 0; font-family: var(--display); letter-spacing: -.02em }
.panel-head-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end }
.card {
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-radius: 22px;
  padding: 20px;
}
.staff-list { display: grid; gap: 12px }
.staff {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 16px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line-2);
}
.staff h3 { margin: 0; font-size: 1.02rem }
.staff .meta { margin: 4px 0 0; color: var(--muted); font-size: .84rem }
.pill {
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 999px;
  font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.pill-pending { background: rgba(255,176,32,.15); color: var(--warn) }
.pill-approved { background: rgba(62,224,160,.12); color: var(--ok) }
.staff-actions { display: flex; gap: 8px; align-items: start; flex-wrap: wrap }
.filters { display: flex; gap: 8px; flex-wrap: wrap }
.filters .btn.active {
  border-color: var(--gold);
  color: var(--gold-2);
  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, .35);
}
.span2 { grid-column: 1 / -1 }

.toast {
  position: fixed; left: 50%; bottom: calc(18px + var(--safe-b));
  transform: translateX(-50%) translateY(120%);
  z-index: 50;
  background: #16161c; color: var(--text);
  border: 1px solid var(--gold);
  padding: 12px 16px; border-radius: 14px;
  box-shadow: var(--shadow);
  transition: transform .28s ease;
  max-width: min(92vw, 420px);
}
.toast.show { transform: translateX(-50%) translateY(0) }

.modal-back {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(0,0,0,.62);
  display: grid; place-items: center;
  padding: 20px;
}
.modal {
  width: min(100%, 420px);
  background: #141418;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 20px;
}
.modal h3 { margin: 0 0 10px }
.modal textarea {
  width: 100%; min-height: 88px; resize: vertical;
  background: #000; border: 1px solid var(--line-2);
  border-radius: 12px; padding: 10px; font-size: 16px;
}
.modal-gates { width: min(100%, 540px); max-height: min(86vh, 760px); overflow: auto }
.modal-lead {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.45;
}
.modal-lead code {
  font-size: .82em;
  color: var(--gold-2);
  background: rgba(212, 175, 55, .12);
  padding: 1px 6px;
  border-radius: 6px;
}
.gates-list { display: grid; gap: 0 }
.gate-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-2);
}
.gate-row:last-child { border-bottom: 0 }
.gate-row h4 { margin: 0; font-size: .98rem }
.gate-row .meta { margin: 3px 0 0; color: var(--muted); font-size: .78rem }
.gate-row .gate-state {
  margin: 5px 0 0;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.gate-row .gate-state.on { color: var(--ok) }
.gate-row .gate-state.off { color: var(--warn) }
.gate-toggles { display: grid; gap: 10px; flex: none }
.toggle-field {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-width: 132px;
}
.toggle-field > span:first-child {
  font-size: .68rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
@media (max-width: 560px) {
  .gate-row { align-items: flex-start; flex-direction: column }
  .gate-toggles { width: 100%; grid-template-columns: 1fr 1fr }
}
.toggle {
  position: relative;
  width: 52px;
  height: 30px;
  flex: none;
}
.toggle input {
  position: absolute; inset: 0; opacity: 0; margin: 0;
  width: 100%; height: 100%; cursor: pointer; z-index: 1;
}
.toggle-ui {
  position: absolute; inset: 0;
  border-radius: 999px;
  background: #3a3a44;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  transition: background .2s ease;
  pointer-events: none;
}
.toggle-ui::after {
  content: "";
  position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
  transition: transform .2s ease;
}
.toggle input:checked + .toggle-ui {
  background: linear-gradient(180deg, #46f0b0, #0f8f62);
}
.toggle input:checked + .toggle-ui::after { transform: translateX(22px) }
.toggle input:focus-visible + .toggle-ui {
  box-shadow: 0 0 0 3px rgba(212, 175, 55, .28);
}
.toggle input:disabled + .toggle-ui { opacity: .55 }

@media (max-width: 980px) {
  .auth-shell { grid-template-columns: 1fr }
  .auth-hero { padding: calc(36px + var(--safe-t)) 22px 8px }
  .brand-lockup img { width: 84px; height: 84px }
  .auth-panel { padding: 12px 16px calc(24px + var(--safe-b)) }
  .rail { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .user-chip .who { display: none }
}
@media (max-width: 720px) {
  .rail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
  .form.two { grid-template-columns: 1fr }
  .poster-meta .blurb { display: none }
  .top-id .dept { white-space: normal; line-height: 1.15 }
  .staff { grid-template-columns: 1fr }
  .auth-hero { padding-bottom: 4px }
}
@media (max-width: 400px) {
  .auth-card { padding: 18px 14px }
  .poster-3d { border-radius: 16px }
}
@media (min-width: 1100px) {
  .rail.ops { grid-template-columns: repeat(3, minmax(0, 1fr)) }
}
@media (pointer: coarse) {
  .poster:hover .poster-3d { transform: perspective(900px) rotateX(7deg) rotateY(-9deg) }
  .poster:active .poster-3d { transform: scale(.98) }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important }
  .poster-3d { transform: none }
}

@media (display-mode: standalone) {
  .stripe-bar { top: var(--safe-t) }
}