/* ==========================================================================
   3u3u jili — palette responsive stylesheet
   Mobile-first canvas: 320-430px phone frame, centered on wide screens.
   Design voice: dark arena floor, gold brand heat, mint signal accents,
   square game tiles with round action buttons, scenario-branch copy rhythm.
   Class + variable prefix: viewac910-
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  --viewac910-ink: #1A1A1A;            /* base floor */
  --viewac910-ink-deep: #131313;       /* recessed panels */
  --viewac910-ink-panel: #222222;      /* raised cards */
  --viewac910-ink-line: #2E2E2E;       /* hairlines */
  --viewac910-gold: #CD853F;           /* brand heat */
  --viewac910-gold-soft: #E2A85F;      /* readable gold */
  --viewac910-mint: #00FF7F;           /* live signal */
  --viewac910-mint-deep: #12D97B;      /* mint that survives dark bg */
  --viewac910-ivory: #FAF0E6;          /* primary text */
  --viewac910-ivory-dim: rgba(250, 240, 230, 0.66);
  --viewac910-ivory-faint: rgba(250, 240, 230, 0.42);
  --viewac910-lagoon: #20B2AA;         /* secondary accent */
  --viewac910-font-display: 'Arial Black', 'Avenir Next', 'Segoe UI Black', 'Trebuchet MS', system-ui, sans-serif;
  --viewac910-font-body: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --viewac910-radius-card: 10px;       /* cards stay square-ish */
  --viewac910-radius-pill: 999px;      /* buttons stay round */
  --viewac910-canvas: 430px;           /* max phone canvas width */
  --viewac910-head-h: 100px;           /* two header rows + border */
  --viewac910-bnav-h: 62px;            /* bottom function bar */
}

/* --------------------------------------------------------------------------
   2. Base reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  background: #0B0B0B;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0 auto;
  max-width: var(--viewac910-canvas);
  min-height: 100vh;
  background: var(--viewac910-ink);
  color: var(--viewac910-ivory);
  font-family: var(--viewac910-font-body);
  font-size: 14px;
  line-height: 1.6;
  overflow-x: hidden;
  box-shadow: 0 0 46px rgba(0, 0, 0, 0.6);
}

img { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

ul,
ol { margin: 0; padding: 0; }

:focus-visible {
  outline: 2px solid var(--viewac910-mint);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--viewac910-gold); color: #141414; }

.viewac910-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.viewac910-noscroll { overflow: hidden; }

/* --------------------------------------------------------------------------
   3. Fixed top bar — brand row above action row
   -------------------------------------------------------------------------- */
.viewac910-topbar {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--viewac910-canvas);
  z-index: 60;
  background: linear-gradient(180deg, #212121 0%, #1A1A1A 100%);
  border-bottom: 1px solid var(--viewac910-ink-line);
}

.viewac910-brandrow {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 7px 14px 6px;
  border-bottom: 1px solid rgba(205, 133, 63, 0.24);
}

.viewac910-brandlink {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
}

.viewac910-logo {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid rgba(205, 133, 63, 0.5);
  background: #0F0F0F;
  object-fit: cover;
}

.viewac910-wordmark {
  font-family: var(--viewac910-font-display);
  font-size: 19px;
  line-height: 1;
  letter-spacing: 0.4px;
  color: var(--viewac910-ivory);
}

.viewac910-wordmark b { color: var(--viewac910-gold); font-weight: 900; }

.viewac910-actionrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 50px;
  padding: 7px 14px;
}

/* Compact dual CTA group — round, tight, gold vs mint outline */
.viewac910-duo { display: flex; gap: 8px; }

.viewac910-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 17px;
  border-radius: var(--viewac910-radius-pill);
  font-family: var(--viewac910-font-display);
  font-size: 12px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  transition: transform 0.12s ease, filter 0.12s ease;
}

.viewac910-btn:active { transform: scale(0.93); filter: brightness(1.15); }

.viewac910-btn--gold {
  background: linear-gradient(135deg, var(--viewac910-gold) 0%, #B06F30 100%);
  color: #141414;
  box-shadow: 0 3px 12px rgba(205, 133, 63, 0.35);
}

.viewac910-btn--ghost {
  border: 1.5px solid var(--viewac910-mint-deep);
  color: var(--viewac910-mint);
}

.viewac910-btn--wide { width: 100%; min-height: 44px; }

.viewac910-menubtn {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  width: 44px;
  height: 44px;
  padding: 10px 9px;
  border-radius: 12px;
  border: 1px solid var(--viewac910-ink-line);
  background: #232323;
}

.viewac910-menubtnbar {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--viewac910-ivory);
}

.viewac910-menubtnbar:nth-child(2) { width: 14px; }

.viewac910-menubtn:active .viewac910-menubtnbar { background: var(--viewac910-gold); }

/* --------------------------------------------------------------------------
   4. Full-height sheet menu
   -------------------------------------------------------------------------- */
.viewac910-scrim {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(8, 8, 8, 0.68);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.viewac910-scrim--show { opacity: 1; visibility: visible; }

.viewac910-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  width: min(84%, 330px);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding-bottom: 26px;
  background: #161616;
  border-left: 1px solid var(--viewac910-ink-line);
  transform: translateX(103%);
  transition: transform 0.28s ease;
}

.viewac910-menu--open { transform: translateX(0); }

.viewac910-menuhead {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 15px 14px;
  border-bottom: 1px solid var(--viewac910-ink-line);
}

.viewac910-logo--menu { width: 28px; height: 28px; border-radius: 7px; }

.viewac910-menutitle {
  flex: 1;
  font-family: var(--viewac910-font-display);
  font-size: 15px;
  color: var(--viewac910-ivory);
}

.viewac910-menuclose {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  font-size: 22px;
  line-height: 1;
  color: var(--viewac910-ivory-dim);
}

.viewac910-menuclose:active { color: var(--viewac910-mint); }

.viewac910-menugroup { padding: 13px 16px 5px; }

.viewac910-menugrouplabel {
  margin: 0 0 5px;
  font-family: var(--viewac910-font-display);
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--viewac910-gold);
}

.viewac910-menulink {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  border-bottom: 1px solid rgba(46, 46, 46, 0.6);
  color: var(--viewac910-ivory);
  font-size: 14.5px;
}

.viewac910-menulink:active { color: var(--viewac910-mint); }

.viewac910-menucta {
  margin-top: auto;
  padding: 18px 16px 6px;
}

/* --------------------------------------------------------------------------
   5. Main canvas spacing
   -------------------------------------------------------------------------- */
.viewac910-main {
  padding: calc(var(--viewac910-head-h) + 12px) 12px calc(var(--viewac910-bnav-h) + 56px);
}

.viewac910-deck { scroll-margin-top: calc(var(--viewac910-head-h) + 8px); }

/* --------------------------------------------------------------------------
   6. Hero heading block
   -------------------------------------------------------------------------- */
.viewac910-hero { padding: 2px 2px 0; }

.viewac910-h1 {
  margin: 0;
  font-family: var(--viewac910-font-display);
  font-size: 21px;
  line-height: 1.28;
  letter-spacing: 0.2px;
  color: var(--viewac910-ivory);
}

.viewac910-h1accent { color: var(--viewac910-gold); }

.viewac910-herosub {
  margin: 9px 0 0;
  font-size: 13px;
  color: var(--viewac910-ivory-dim);
}

/* --------------------------------------------------------------------------
   7. Campaign carousel
   -------------------------------------------------------------------------- */
.viewac910-carousel { position: relative; margin-top: 14px; }

.viewac910-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border: 1px solid var(--viewac910-ink-line);
  border-radius: 14px;
  background: var(--viewac910-ink-deep);
}

.viewac910-track::-webkit-scrollbar { display: none; }

.viewac910-slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
}

.viewac910-slide img {
  width: 100%;
  aspect-ratio: 43 / 20;
  object-fit: cover;
}

.viewac910-slidecap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 26px 12px 10px;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0) 0%, rgba(10, 10, 10, 0.88) 76%);
}

.viewac910-slidetag {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: var(--viewac910-radius-pill);
  background: var(--viewac910-mint);
  color: #141414;
  font-family: var(--viewac910-font-display);
  font-size: 9.5px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.viewac910-slidetext {
  font-family: var(--viewac910-font-display);
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--viewac910-ivory);
}

.viewac910-dots {
  display: flex;
  justify-content: center;
  gap: 2px;
  padding-top: 6px;
}

.viewac910-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 26px;
}

.viewac910-dot::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--viewac910-ivory-faint);
  transition: width 0.2s ease, background 0.2s ease;
}

.viewac910-dot--on::before {
  width: 18px;
  border-radius: var(--viewac910-radius-pill);
  background: var(--viewac910-mint);
}

/* --------------------------------------------------------------------------
   8. Live signal ticker
   -------------------------------------------------------------------------- */
.viewac910-ticker {
  display: flex;
  align-items: stretch;
  height: 38px;
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid var(--viewac910-ink-line);
  border-radius: var(--viewac910-radius-card);
  background: var(--viewac910-ink-deep);
}

.viewac910-tickerlabel {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 0 10px;
  border-right: 1px solid var(--viewac910-ink-line);
  background: rgba(0, 255, 127, 0.08);
  font-family: var(--viewac910-font-display);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--viewac910-mint);
}

.viewac910-tickerlabel::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--viewac910-mint);
}

.viewac910-tickerclip {
  display: flex;
  align-items: center;
  flex: 1;
  overflow: hidden;
}

.viewac910-tickertrack {
  display: flex;
  white-space: nowrap;
  animation: viewac910-tick 26s linear infinite;
}

.viewac910-tickerseq {
  display: flex;
  gap: 28px;
  padding-right: 28px;
  font-size: 12px;
  color: var(--viewac910-ivory-dim);
}

.viewac910-tickerseq b { font-weight: 700; color: var(--viewac910-gold-soft); }

@keyframes viewac910-tick {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   9. Lane shortcut chips
   -------------------------------------------------------------------------- */
.viewac910-jumpstrip {
  display: flex;
  gap: 8px;
  margin: 12px 0 2px;
  overflow-x: auto;
  scrollbar-width: none;
}

.viewac910-jumpstrip::-webkit-scrollbar { display: none; }

.viewac910-jumpstrip a {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid var(--viewac910-ink-line);
  border-radius: var(--viewac910-radius-pill);
  background: var(--viewac910-ink-panel);
  color: var(--viewac910-ivory);
  font-size: 12.5px;
  font-weight: 600;
}

.viewac910-jumpstrip a:nth-child(1) { border-left: 3px solid var(--viewac910-gold); }
.viewac910-jumpstrip a:nth-child(2) { border-left: 3px solid var(--viewac910-mint-deep); }
.viewac910-jumpstrip a:nth-child(3) { border-left: 3px solid #E4574A; }
.viewac910-jumpstrip a:nth-child(4) { border-left: 3px solid var(--viewac910-lagoon); }
.viewac910-jumpstrip a:nth-child(5) { border-left: 3px solid var(--viewac910-ivory-dim); }

.viewac910-jumpstrip a:active { color: var(--viewac910-mint); }

/* --------------------------------------------------------------------------
   10. Game decks — five lanes, square tiles, one lead tile per lane
   -------------------------------------------------------------------------- */
.viewac910-deck { margin-top: 26px; }

.viewac910-deckhead { padding: 0 2px 10px; }

.viewac910-deckchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
  padding: 3px 10px;
  border: 1px solid rgba(0, 255, 127, 0.28);
  border-radius: var(--viewac910-radius-pill);
  background: rgba(0, 255, 127, 0.09);
  font-family: var(--viewac910-font-display);
  font-size: 9.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--viewac910-mint);
}

.viewac910-deck--live .viewac910-deckchip {
  border-color: rgba(205, 133, 63, 0.45);
  background: rgba(205, 133, 63, 0.12);
  color: var(--viewac910-gold-soft);
}

.viewac910-deck--hot .viewac910-deckchip {
  border-color: rgba(228, 87, 74, 0.45);
  background: rgba(228, 87, 74, 0.12);
  color: #F08578;
}

.viewac910-deck--fishing .viewac910-deckchip {
  border-color: rgba(32, 178, 170, 0.5);
  background: rgba(32, 178, 170, 0.12);
  color: #4FD0C8;
}

.viewac910-deck--cards .viewac910-deckchip {
  border-color: rgba(250, 240, 230, 0.3);
  background: rgba(250, 240, 230, 0.07);
  color: var(--viewac910-ivory);
}

.viewac910-decktitle {
  margin: 0;
  font-family: var(--viewac910-font-display);
  font-size: 17.5px;
  line-height: 1.3;
  color: var(--viewac910-ivory);
}

.viewac910-decksub {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--viewac910-ivory-dim);
}

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

.viewac910-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding: 5px;
  border: 1px solid var(--viewac910-ink-line);
  border-radius: var(--viewac910-radius-card);
  background: var(--viewac910-ink-panel);
}

.viewac910-cell:active {
  border-color: var(--viewac910-gold);
  filter: brightness(1.14);
}

.viewac910-cell img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 7px;
  background: #0E0E0E;
}

.viewac910-gname {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 27px;
  font-size: 10.5px;
  line-height: 1.3;
  text-align: center;
  color: var(--viewac910-ivory-dim);
}

/* Lead tile — double width, warmer frame */
.viewac910-cell--lead {
  grid-column: span 2;
  gap: 6px;
  padding: 6px;
  border-color: rgba(205, 133, 63, 0.55);
  background: linear-gradient(180deg, #272727 0%, #1E1E1E 100%);
}

.viewac910-cell--lead .viewac910-gname {
  min-height: 32px;
  font-size: 12px;
  color: var(--viewac910-ivory);
}

.viewac910-leadtag {
  position: absolute;
  top: 11px;
  left: 11px;
  z-index: 2;
  padding: 3px 8px;
  border-radius: var(--viewac910-radius-pill);
  background: var(--viewac910-gold);
  color: #141414;
  font-family: var(--viewac910-font-display);
  font-size: 8.5px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   11. Reading modules — scenario branches, steps, takeaways
   -------------------------------------------------------------------------- */
.viewac910-module {
  margin-top: 28px;
  padding: 16px 14px;
  border: 1px solid var(--viewac910-ink-line);
  border-left: 3px solid var(--viewac910-lagoon);
  border-radius: 12px;
  background: var(--viewac910-ink-deep);
}

.viewac910-module--gold { border-left-color: var(--viewac910-gold); }
.viewac910-module--mint { border-left-color: var(--viewac910-mint-deep); }
.viewac910-module--ivory { border-left-color: var(--viewac910-ivory-dim); }

.viewac910-module h2 {
  margin: 0 0 10px;
  font-family: var(--viewac910-font-display);
  font-size: 17.5px;
  line-height: 1.3;
  color: var(--viewac910-ivory);
}

.viewac910-module h3 {
  margin: 16px 0 6px;
  font-family: var(--viewac910-font-display);
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--viewac910-gold-soft);
}

.viewac910-module p {
  margin: 0 0 10px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--viewac910-ivory-dim);
}

.viewac910-module p:last-child { margin-bottom: 0; }

.viewac910-module a {
  color: var(--viewac910-mint-deep);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(0, 255, 127, 0.45);
  text-underline-offset: 3px;
}

/* Branch rows: condition on top, action below */
.viewac910-branches {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.viewac910-branch {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 11px;
  border: 1px solid var(--viewac910-ink-line);
  border-radius: 9px;
  background: var(--viewac910-ink-panel);
}

.viewac910-branchif {
  font-family: var(--viewac910-font-display);
  font-size: 11.5px;
  letter-spacing: 0.3px;
  color: var(--viewac910-mint);
}

.viewac910-branchif::before { content: ">> "; color: var(--viewac910-gold); }

.viewac910-branchthen {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--viewac910-ivory-dim);
}

/* Numbered steps */
.viewac910-steps {
  margin-top: 12px;
  counter-reset: viewac910-step;
}

.viewac910-steps li {
  display: flex;
  gap: 11px;
  padding: 9px 2px;
  counter-increment: viewac910-step;
  border-bottom: 1px solid rgba(46, 46, 46, 0.55);
  font-size: 13px;
  line-height: 1.55;
  color: var(--viewac910-ivory-dim);
}

.viewac910-steps li:last-child { border-bottom: 0; }

.viewac910-steps li::before {
  content: counter(viewac910-step);
  flex: 0 0 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--viewac910-gold);
  border-radius: 50%;
  background: var(--viewac910-ink-panel);
  color: var(--viewac910-gold-soft);
  font-family: var(--viewac910-font-display);
  font-size: 12px;
}

.viewac910-steps b { color: var(--viewac910-ivory); }

/* Takeaway chips */
.viewac910-takeaways {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.viewac910-takeaways li {
  position: relative;
  padding: 9px 12px 9px 31px;
  border: 1px solid var(--viewac910-ink-line);
  border-radius: 9px;
  background: var(--viewac910-ink-panel);
  font-size: 12.8px;
  line-height: 1.55;
  color: var(--viewac910-ivory-dim);
}

.viewac910-takeaways li::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 12px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--viewac910-mint);
  transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   12. Extended footer — directory, brand, promo actions, fine print
   -------------------------------------------------------------------------- */
.viewac910-xf {
  margin-top: 30px;
  padding: 18px 12px 20px;
  border-top: 1px solid var(--viewac910-ink-line);
  background: #151515;
}

.viewac910-xftitle {
  margin: 0;
  font-family: var(--viewac910-font-display);
  font-size: 17.5px;
  line-height: 1.3;
  color: var(--viewac910-ivory);
}

.viewac910-xfblock {
  margin-top: 15px;
  padding-top: 14px;
  border-top: 1px dashed rgba(250, 240, 230, 0.14);
}

.viewac910-xfblock:first-of-type { margin-top: 13px; padding-top: 0; border-top: 0; }

.viewac910-xfblock h3 {
  margin: 0 0 9px;
  font-family: var(--viewac910-font-display);
  font-size: 12.5px;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--viewac910-lagoon);
}

.viewac910-xfdir {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px 9px;
}

.viewac910-xfdir a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 9px;
  border: 1px solid var(--viewac910-ink-line);
  border-radius: 9px;
  background: var(--viewac910-ink-panel);
  font-size: 11.8px;
  line-height: 1.35;
  color: var(--viewac910-ivory);
}

.viewac910-xfdir a b { color: var(--viewac910-gold-soft); font-weight: 700; }

.viewac910-xfdir a:active { border-color: var(--viewac910-lagoon); }

.viewac910-xfbrand {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--viewac910-ivory-dim);
}

.viewac910-xfpromos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.viewac910-xfpromos a {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 46px;
  padding: 8px 13px;
  border: 1px solid rgba(205, 133, 63, 0.45);
  border-radius: var(--viewac910-radius-pill);
  background: linear-gradient(135deg, rgba(205, 133, 63, 0.16) 0%, rgba(0, 255, 127, 0.07) 100%);
  color: var(--viewac910-ivory);
  font-size: 13px;
  font-weight: 600;
}

.viewac910-xfpromos a:active { filter: brightness(1.22); }

.viewac910-xfpromos svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--viewac910-gold-soft);
}

.viewac910-xfnote {
  margin: 0;
  padding: 11px 12px;
  border: 1px dashed rgba(205, 133, 63, 0.4);
  border-radius: 9px;
  background: rgba(205, 133, 63, 0.08);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--viewac910-ivory-faint);
}

/* --------------------------------------------------------------------------
   13. Copyright bar
   -------------------------------------------------------------------------- */
.viewac910-foot { padding: 18px 14px 8px; text-align: center; }

.viewac910-copy {
  margin: 0;
  font-size: 11.5px;
  letter-spacing: 0.4px;
  color: var(--viewac910-ivory-faint);
}

/* --------------------------------------------------------------------------
   14. Bottom function bar — outlined, five roles, sliding indicator
   -------------------------------------------------------------------------- */
.viewac910-bnav {
  position: fixed;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 20px);
  max-width: calc(var(--viewac910-canvas) - 20px);
  z-index: 65;
  border: 1px solid rgba(250, 240, 230, 0.24);
  border-radius: 16px;
  background: rgba(22, 22, 22, 0.93);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.5);
}

.viewac910-bnavrow { position: relative; display: flex; }

.viewac910-bglide {
  position: absolute;
  top: 0;
  left: 0;
  width: 20%;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: var(--viewac910-mint);
  transition: transform 0.3s ease, width 0.3s ease;
}

.viewac910-bitem {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--viewac910-bnav-h);
  padding: 8px 2px 9px;
  color: var(--viewac910-ivory-dim);
}

.viewac910-bitem--on { color: var(--viewac910-mint); }

.viewac910-bitem:active { color: var(--viewac910-ivory); }

.viewac910-bico { width: 22px; height: 22px; color: currentColor; }

.viewac910-blabel {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* --------------------------------------------------------------------------
   15. Comfort refinements
   -------------------------------------------------------------------------- */
@media (min-width: 375px) {
  .viewac910-h1 { font-size: 22px; }
  .viewac910-decktitle { font-size: 18.5px; }
  .viewac910-gname { font-size: 11px; }
  .viewac910-grid { gap: 9px 8px; }
  .viewac910-main { padding-left: 14px; padding-right: 14px; }
}

@media (min-width: 400px) {
  .viewac910-gname { font-size: 11.5px; }
  .viewac910-cell { padding: 6px; }
  .viewac910-slidetext { font-size: 13px; }
}

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

/* --------------------------------------------------------------------------
   16. Help-page compositions — two different reading rhythms
   -------------------------------------------------------------------------- */
.viewac910-guidelead {
  position: relative;
  margin: 2px -2px 0;
  padding: 18px 14px 16px;
  border: 1px solid rgba(32, 178, 170, 0.45);
  border-radius: 18px 8px 18px 8px;
  background:
    linear-gradient(135deg, rgba(32, 178, 170, 0.18), transparent 52%),
    #171717;
}

.viewac910-guidelead::after {
  content: "";
  position: absolute;
  right: 13px;
  top: 13px;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(0, 255, 127, 0.38);
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(0, 255, 127, 0.05);
}

.viewac910-guidekicker {
  margin: 0 0 8px;
  color: var(--viewac910-mint);
  font-family: var(--viewac910-font-display);
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.viewac910-guidelead h1 {
  margin: 0;
  max-width: 92%;
  font-family: var(--viewac910-font-display);
  font-size: 21px;
  line-height: 1.25;
  color: var(--viewac910-ivory);
}

.viewac910-guidelead h1 strong { color: var(--viewac910-gold-soft); }

.viewac910-guidelead p:last-child {
  margin: 10px 0 0;
  color: var(--viewac910-ivory-dim);
  font-size: 13px;
  line-height: 1.65;
}

.viewac910-routebar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 12px;
}

.viewac910-route {
  min-height: 76px;
  padding: 10px 8px;
  border-top: 2px solid var(--viewac910-gold);
  border-radius: 7px 7px 11px 11px;
  background: var(--viewac910-ink-panel);
}

.viewac910-route:nth-child(2) { border-top-color: var(--viewac910-mint); }
.viewac910-route:nth-child(3) { border-top-color: var(--viewac910-lagoon); }

.viewac910-route b {
  display: block;
  margin-bottom: 3px;
  color: var(--viewac910-ivory);
  font-size: 12px;
}

.viewac910-route span {
  display: block;
  color: var(--viewac910-ivory-faint);
  font-size: 10.5px;
  line-height: 1.4;
}

.viewac910-deviceboard {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.viewac910-devicecard {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 11px 10px;
  border: 1px solid var(--viewac910-ink-line);
  border-radius: 6px 14px 6px 14px;
  background: linear-gradient(90deg, rgba(205, 133, 63, 0.1), transparent 66%), var(--viewac910-ink-panel);
}

.viewac910-devicebadge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(0, 255, 127, 0.4);
  border-radius: 50%;
  color: var(--viewac910-mint);
  font-family: var(--viewac910-font-display);
  font-size: 11px;
}

.viewac910-devicecard h3 {
  margin: 0 0 3px;
  color: var(--viewac910-gold-soft);
  font-family: var(--viewac910-font-display);
  font-size: 13px;
  line-height: 1.3;
}

.viewac910-devicecard p {
  margin: 0;
  color: var(--viewac910-ivory-dim);
  font-size: 12.5px;
  line-height: 1.55;
}

.viewac910-qa {
  margin-top: 10px;
  border-top: 1px solid var(--viewac910-ink-line);
}

.viewac910-qa details {
  padding: 11px 0 9px;
  border-bottom: 1px solid rgba(46, 46, 46, 0.8);
}

.viewac910-qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 28px;
  color: var(--viewac910-ivory);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  list-style: none;
}

.viewac910-qa summary::-webkit-details-marker { display: none; }
.viewac910-qa summary::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--viewac910-mint);
  font-family: var(--viewac910-font-display);
  font-size: 18px;
}
.viewac910-qa details[open] summary::after { content: "-"; }

.viewac910-qa details p {
  margin: 7px 0 0;
  color: var(--viewac910-ivory-dim);
  font-size: 12.8px;
  line-height: 1.6;
}

.viewac910-requirements {
  display: grid;
  gap: 7px;
  margin-top: 11px;
}

.viewac910-requirement {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 9px 10px;
  border-left: 2px solid var(--viewac910-lagoon);
  background: rgba(32, 178, 170, 0.08);
  color: var(--viewac910-ivory-dim);
  font-size: 12.5px;
  line-height: 1.5;
}

.viewac910-requirement::before {
  content: "OK";
  flex: 0 0 auto;
  color: var(--viewac910-mint);
  font-family: var(--viewac910-font-display);
  font-size: 10px;
  letter-spacing: 0.4px;
}

.viewac910-guide-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}

.viewac910-guide-actions a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 7px 8px;
  border: 1px solid rgba(205, 133, 63, 0.48);
  border-radius: 12px 4px 12px 4px;
  background: var(--viewac910-ink-panel);
  color: var(--viewac910-ivory);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.viewac910-guide-actions a:last-child {
  border-color: rgba(0, 255, 127, 0.42);
  color: var(--viewac910-mint);
}

/* Features page: a diagnostic route rather than the about-page field guide. */
.viewac910-featuremast {
  margin: 0 -2px;
  padding: 14px 13px 13px;
  border-right: 4px solid var(--viewac910-gold);
  border-bottom: 1px solid var(--viewac910-ink-line);
  background: #171717;
}

.viewac910-featuremast h1 {
  margin: 0;
  font-family: var(--viewac910-font-display);
  font-size: 21px;
  line-height: 1.28;
  color: var(--viewac910-ivory);
}

.viewac910-featuremast h1 span { color: var(--viewac910-mint); }

.viewac910-featuremast p {
  margin: 8px 0 0;
  color: var(--viewac910-ivory-dim);
  font-size: 13px;
  line-height: 1.62;
}

.viewac910-featuremap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 13px;
}

.viewac910-featuretile {
  min-height: 96px;
  padding: 11px 10px 9px;
  border: 1px solid var(--viewac910-ink-line);
  background: var(--viewac910-ink-deep);
}

.viewac910-featuretile:nth-child(odd) { border-radius: 14px 4px 4px 4px; }
.viewac910-featuretile:nth-child(even) { border-radius: 4px 14px 4px 4px; }

.viewac910-featuremark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-bottom: 7px;
  border-radius: 6px;
  background: var(--viewac910-gold);
  color: #141414;
  font-family: var(--viewac910-font-display);
  font-size: 11px;
}

.viewac910-featuretile:nth-child(2) .viewac910-featuremark { background: var(--viewac910-mint); }
.viewac910-featuretile:nth-child(3) .viewac910-featuremark { background: var(--viewac910-lagoon); }
.viewac910-featuretile:nth-child(4) .viewac910-featuremark { background: var(--viewac910-ivory); }

.viewac910-featuretile h3 {
  margin: 0 0 3px;
  color: var(--viewac910-ivory);
  font-family: var(--viewac910-font-display);
  font-size: 12.5px;
  line-height: 1.25;
}

.viewac910-featuretile p {
  margin: 0;
  color: var(--viewac910-ivory-faint);
  font-size: 11.5px;
  line-height: 1.45;
}

.viewac910-faqstack {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.viewac910-faqitem {
  padding: 10px 11px;
  border-left: 3px solid var(--viewac910-mint-deep);
  background: var(--viewac910-ink-panel);
}

.viewac910-faqitem h3 {
  margin: 0 0 4px;
  color: var(--viewac910-gold-soft);
  font-family: var(--viewac910-font-display);
  font-size: 13px;
  line-height: 1.35;
}

.viewac910-faqitem p {
  margin: 0;
  color: var(--viewac910-ivory-dim);
  font-size: 12.6px;
  line-height: 1.58;
}

.viewac910-faultlist {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}

.viewac910-fault {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(228, 87, 74, 0.32);
  border-radius: 4px 12px 12px 4px;
  background: linear-gradient(90deg, rgba(228, 87, 74, 0.1), transparent 72%), var(--viewac910-ink-panel);
}

.viewac910-faultcode {
  align-self: start;
  padding: 5px 3px;
  border-radius: 5px;
  background: rgba(228, 87, 74, 0.18);
  color: #F08578;
  font-family: var(--viewac910-font-display);
  font-size: 10px;
  text-align: center;
}

.viewac910-fault h3 {
  margin: 0 0 3px;
  color: var(--viewac910-ivory);
  font-family: var(--viewac910-font-display);
  font-size: 12.5px;
  line-height: 1.3;
}

.viewac910-fault p {
  margin: 0;
  color: var(--viewac910-ivory-dim);
  font-size: 12.3px;
  line-height: 1.52;
}

.viewac910-fault p strong { color: var(--viewac910-mint); }

.viewac910-proscons {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.viewac910-proscons article {
  padding: 11px 12px;
  border-top: 2px solid var(--viewac910-mint);
  background: var(--viewac910-ink-panel);
}

.viewac910-proscons article:last-child { border-top-color: #E4574A; }

.viewac910-proscons h3 {
  margin: 0 0 5px;
  color: var(--viewac910-ivory);
  font-family: var(--viewac910-font-display);
  font-size: 13px;
}

.viewac910-proscons ul {
  margin: 0;
  padding-left: 17px;
  color: var(--viewac910-ivory-dim);
  font-size: 12.5px;
  line-height: 1.58;
}

.viewac910-proscons li + li { margin-top: 4px; }

@media (min-width: 375px) {
  .viewac910-guidelead h1,
  .viewac910-featuremast h1 { font-size: 22px; }
  .viewac910-devicecard p,
  .viewac910-fault p { font-size: 12.8px; }
}