/* coinop.css — round 6. Loads after arcade.css.
   submit.html  -> "the coin door"        (body.submit)
   buy.html     -> "the instruction card" (body.buy)
   Every rule is scoped under one of those two body classes, so nothing leaks. */

/* ══════════════════════════════════════════════════════════════════════
   SUBMIT — THE COIN DOOR
   ══════════════════════════════════════════════════════════════════════ */
body.submit .co-stage { display: grid; gap: 0 var(--s-6); align-items: start; }
body.submit .co-stage > .marquee { padding-bottom: 0; }
body.submit .co-rule { margin: var(--s-4) 0 0; border: 0; border-top: 2px dashed rgba(233,222,195,.28); }
@media (min-width: 900px) {
  body.submit .co-stage { grid-template-columns: minmax(0, 1fr) 400px; align-items: center; }
  body.submit .co-stage > .co-doorwrap { padding-top: clamp(28px, 4vw, 52px); }
}
body.submit .co-doorwrap { padding-top: var(--s-4); }

body.submit .co-door {
  --coin: 120px;
  position: relative; width: 100%; max-width: 400px; margin-inline: auto;
}
@media (min-width: 900px) { body.submit .co-door { margin: 0; } }

/* the brushed-steel plate */
body.submit .co-plate {
  position: relative; z-index: 1; padding: 26px 26px 26px; border-radius: 12px;
  display: grid; gap: 18px; justify-items: center;
  background:
    radial-gradient(120% 70% at 50% -8%, rgba(255,196,110,.34), transparent 62%),
    linear-gradient(105deg, transparent 20%, rgba(255,255,255,.22) 38%, transparent 55%),
    repeating-linear-gradient(180deg, rgba(255,255,255,.08) 0 1px, rgba(0,0,0,.06) 1px 2px, transparent 2px 4px),
    linear-gradient(180deg, #b7bdc1 0%, #9fa5aa 46%, #868c91 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.6),
    inset 0 -3px 0 rgba(0,0,0,.38),
    inset 0 0 0 1px rgba(0,0,0,.55),
    0 30px 54px -20px rgba(0,0,0,.95),
    0 0 100px -24px rgba(242,169,59,.34);
}
body.submit .co-screw {
  position: absolute; width: 15px; height: 15px; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #f1f3f4, #8b9196 52%, #464b4f);
  box-shadow: 0 1px 0 rgba(255,255,255,.45), 0 1px 3px rgba(0,0,0,.65);
}
body.submit .co-screw::after {
  content: ""; position: absolute; left: 2px; right: 2px; top: 50%; height: 2px; margin-top: -1px;
  background: #23262a; transform: rotate(var(--r, 30deg));
}
body.submit .co-screw.s1 { top: 9px; left: 9px; }
body.submit .co-screw.s2 { top: 9px; right: 9px; --r: 72deg; }
body.submit .co-screw.s3 { bottom: 9px; left: 9px; --r: 118deg; }
body.submit .co-screw.s4 { bottom: 9px; right: 9px; --r: 14deg; }

/* engraved black name plates: cream on near-black, always legible */
body.submit .co-plaque {
  display: inline-block; padding: 8px 12px 7px; border-radius: 3px;
  background: #101214; color: var(--cream);
  font: 800 14px/1 var(--type); letter-spacing: .18em; text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 1px 0 rgba(255,255,255,.4), 0 0 0 1px rgba(0,0,0,.6);
}

/* the credit readout: two seven-segment digits behind glass */
body.submit .co-top { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 12px; padding: 0 6px; }
body.submit .co-readout {
  display: flex; gap: 9px; padding: 10px 14px; border-radius: 6px; background: #100807;
  box-shadow: inset 0 3px 9px rgba(0,0,0,.95), 0 0 0 3px #202428, 0 0 0 4px rgba(255,255,255,.2), 0 1px 0 4px rgba(0,0,0,.4);
}
body.submit .co-dig { display: block; width: 32px; height: 56px; overflow: visible; }
body.submit .co-dig polygon { fill: #2f110c; }
body.submit .co-dig polygon.on { fill: #ff4a2a; filter: drop-shadow(0 0 4px rgba(255,64,30,.95)); }

/* the INSERT COIN lamp: a red lens, lit from behind */
body.submit .co-lamp {
  display: grid; place-items: center; width: 100%; height: 48px; border-radius: 8px;
  background: #c8321c; color: #fff;
  font: 900 17px/1 var(--display); letter-spacing: .22em; text-transform: uppercase; text-indent: .22em;
  text-shadow: 0 0 10px rgba(255,214,196,.55);
  box-shadow: inset 0 2px 5px rgba(255,255,255,.3), inset 0 -3px 8px rgba(0,0,0,.4),
    0 0 0 3px #17191b, 0 0 0 4px rgba(255,255,255,.18), 0 0 26px rgba(255,70,40,.6);
  animation: co-blink 2.6s ease-in-out infinite;
}
@keyframes co-blink {
  0%, 56% { background-color: #c8321c; box-shadow: inset 0 2px 5px rgba(255,255,255,.3), inset 0 -3px 8px rgba(0,0,0,.4), 0 0 0 3px #17191b, 0 0 0 4px rgba(255,255,255,.18), 0 0 26px rgba(255,70,40,.6); }
  64%, 92% { background-color: #6e2012; box-shadow: inset 0 2px 5px rgba(255,255,255,.1), inset 0 -3px 8px rgba(0,0,0,.5), 0 0 0 3px #17191b, 0 0 0 4px rgba(255,255,255,.18), 0 0 0 rgba(255,70,40,0); }
  100% { background-color: #c8321c; box-shadow: inset 0 2px 5px rgba(255,255,255,.3), inset 0 -3px 8px rgba(0,0,0,.4), 0 0 0 3px #17191b, 0 0 0 4px rgba(255,255,255,.18), 0 0 26px rgba(255,70,40,.6); }
}
body.submit .co-door[data-state="flying"] .co-lamp { animation: none; }                 /* solid for the beat */
body.submit .co-door[data-state="credited"] .co-lamp {                                  /* then it calms down */
  background-color: #6e2012; box-shadow: inset 0 2px 5px rgba(255,255,255,.1), inset 0 -3px 8px rgba(0,0,0,.5), 0 0 0 3px #17191b, 0 0 0 4px rgba(255,255,255,.18);
  animation: co-settle 1.6s ease .5s both;
}
@keyframes co-settle { 0% { background-color: #c8321c; box-shadow: 0 0 0 3px #17191b, 0 0 26px rgba(255,70,40,.6); } 100% { background-color: #6e2012; box-shadow: 0 0 0 3px #17191b, 0 0 0 rgba(255,70,40,0); } }
body.submit .co-door.co-paused .co-lamp { animation-play-state: paused; }

/* the coin mech: a brass bezel round a lit vertical slit */
body.submit .co-bezel {
  position: relative; width: 128px; height: 168px; border-radius: 22px;
  background-color: #c99a35;
  background-image: linear-gradient(140deg, #f7de92 0%, #cf9f3a 30%, #8a6212 52%, #dcb457 74%, #f4d883 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.6), inset 0 -3px 0 rgba(70,44,4,.5), 0 3px 0 rgba(0,0,0,.45), 0 16px 26px -10px rgba(0,0,0,.75);
}
body.submit .co-bezel::before {
  content: ""; position: absolute; inset: 12px; border-radius: 14px; background: #0a0908;
  box-shadow: inset 0 4px 12px rgba(0,0,0,.95), 0 0 0 2px rgba(60,38,4,.6), 0 1px 0 2px rgba(255,236,170,.4);
}
body.submit .co-slit {
  position: absolute; left: 50%; top: 50%; width: 15px; height: 118px; margin: -59px 0 0 -7.5px; border-radius: 8px;
  background: linear-gradient(90deg, #ff9426, #fff0c2 50%, #ff9426);
  box-shadow: 0 0 0 3px #180f04, 0 0 24px 5px rgba(255,150,40,.6), inset 0 0 6px rgba(120,50,0,.55);
}
@keyframes co-flash {
  0% { box-shadow: 0 0 0 3px #180f04, 0 0 60px 20px rgba(255,190,90,.95), inset 0 0 6px rgba(120,50,0,.55); }
  100% { box-shadow: 0 0 0 3px #180f04, 0 0 24px 5px rgba(255,150,40,.6), inset 0 0 6px rgba(120,50,0,.55); }
}
@keyframes co-clunk { 0% { transform: translateY(0); } 30% { transform: translateY(3px); } 65% { transform: translateY(-1px); } 100% { transform: translateY(0); } }
@keyframes co-flick { 0%, 100% { opacity: 1; } 15% { opacity: .2; } 30% { opacity: 1; } 45% { opacity: .35; } 60% { opacity: 1; } }
body.submit .co-clunk .co-plate { animation: co-clunk .3s ease-out; }
body.submit .co-clunk .co-slit { animation: co-flash .7s ease-out; }
body.submit .co-readout.co-flick { animation: co-flick .55s steps(1); }

/* the rubber coin-return button */
body.submit .co-retrow { display: flex; align-items: center; justify-content: center; gap: 16px; }
body.submit .co-rbtn {
  width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle at 38% 28%, #55585c, #1d1e20 62%, #0b0b0c);
  box-shadow: inset 0 2px 3px rgba(255,255,255,.2), 0 5px 0 #050505, 0 0 0 4px #2a2e32, 0 0 0 5px rgba(255,255,255,.22), 0 9px 12px 3px rgba(0,0,0,.4);
  transition: transform .1s ease, box-shadow .1s ease;
}
body.submit .co-rbtn:disabled { cursor: default; }
body.submit .co-rbtn:not(:disabled):hover { box-shadow: inset 0 2px 3px rgba(255,255,255,.26), 0 5px 0 #050505, 0 0 0 4px #7a5316, 0 0 0 5px rgba(242,169,59,.7), 0 9px 12px 3px rgba(0,0,0,.4); }
body.submit .co-rbtn:not(:disabled):active { transform: translateY(4px); box-shadow: inset 0 2px 3px rgba(255,255,255,.2), 0 1px 0 #050505, 0 0 0 4px #2a2e32, 0 0 0 5px rgba(255,255,255,.22); }

/* the coin tray under the door, and the coin standing in it */
body.submit .co-tray {
  position: relative; z-index: 3; width: 300px; max-width: 88%; height: 146px; margin: 14px auto 0; border-radius: 4px 4px 22px 22px;
  background: linear-gradient(180deg, #030404 0%, #101215 62%, #171a1e 100%);
  box-shadow: inset 0 14px 22px rgba(0,0,0,.95), inset 0 0 0 2px #050606, 0 0 0 3px #7d8388, 0 0 0 4px rgba(255,255,255,.24), 0 24px 36px -14px rgba(0,0,0,.95);
}
body.submit .co-lip {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 24px; border-radius: 0 0 22px 22px; pointer-events: none;
  background: linear-gradient(180deg, #30353a, #15181b);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 0 0 3px #7d8388;
}
body.submit .co-spot, body.submit .co-coin {
  position: absolute; left: 50%; bottom: 20px; width: var(--coin); height: var(--coin); margin-left: calc(var(--coin) / -2);
}
body.submit .co-spot { visibility: hidden; pointer-events: none; }
body.submit .co-coin {
  z-index: 1; padding: 0; border: 0; border-radius: 50%; background: none; cursor: grab;
  perspective: 640px; touch-action: none; -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
}
body.submit .co-coin.is-flying, body.submit .co-coin.is-dragging { z-index: 5; }
body.submit .co-coin.is-dragging { cursor: grabbing; }
body.submit .co-coin.is-gone { visibility: hidden; pointer-events: none; }
body.submit .co-coin:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; box-shadow: none; z-index: 5; }   /* lifts over the tray lip so the whole ring shows */
body.submit .co-body { position: absolute; inset: 0; transform-style: preserve-3d; display: block; }
body.submit .co-coin:hover:not(.is-flying) .co-face { filter: brightness(1.1); }
body.submit .co-face, body.submit .co-rim { position: absolute; inset: 0; display: block; border-radius: 50%; }
body.submit .co-face {
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  background-color: #b58a2e;
  background-image: repeating-conic-gradient(from 0deg, #7a5711 0 3deg, #f4d47e 3deg 6deg);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.4), 0 6px 0 -2px rgba(0,0,0,.25);
}
body.submit .co-front { transform: translateZ(3px); }
body.submit .co-back { transform: rotateY(180deg) translateZ(3px); visibility: hidden; }   /* only ever seen mid-flip */
body.submit .co-coin.is-flying .co-back { visibility: visible; }
body.submit .co-rim { background-color: #a97f28; background-image: repeating-conic-gradient(from 0deg, #664a0d 0 3deg, #c39c40 3deg 6deg); }
body.submit .co-rim:nth-child(1) { transform: translateZ(-3px); }
body.submit .co-rim:nth-child(2) { transform: translateZ(-1.8px); }
body.submit .co-rim:nth-child(3) { transform: translateZ(-.6px); }
body.submit .co-rim:nth-child(4) { transform: translateZ(.6px); }
body.submit .co-rim:nth-child(5) { transform: translateZ(1.8px); }
body.submit .co-field {
  position: absolute; inset: 9px; border-radius: 50%; display: grid; place-items: center; align-content: center;
  background-color: #d5a744;
  background-image: radial-gradient(circle at 34% 26%, #f9e4a0 0%, #e2b755 38%, #bb8c2b 74%, #8c6518 100%);
  box-shadow: inset 0 0 0 2px rgba(110,74,10,.55), inset 0 2px 3px rgba(255,255,255,.45), inset 0 -3px 6px rgba(70,44,4,.45);
}
body.submit .co-portrait {
  position: absolute; inset: 7px; overflow: hidden; border-radius: 50%; display: block;
  background: radial-gradient(circle at 50% 38%, #2b4431, #0e1611);
  box-shadow: inset 0 0 0 2px rgba(60,40,6,.75), 0 0 0 1px rgba(255,236,170,.45);
}
body.submit .co-portrait img {
  position: absolute; display: block; width: 176%; height: auto; max-width: none; left: -39.5%; top: -1%;
  pointer-events: none; -webkit-user-drag: none; user-select: none;
}
body.submit .co-back .co-field { color: #241804; text-shadow: 0 1px 0 rgba(255,238,180,.5); gap: 3px; }
body.submit .co-big { display: block; font: 900 34px/1 var(--display); letter-spacing: -.03em; }
body.submit .co-small { display: block; font: 800 14px/1 var(--type); letter-spacing: 0; white-space: nowrap; }

/* under the door: the hint before, the line after. Both share one box, so nothing shifts. */
body.submit .co-under { display: grid; margin-top: var(--s-4); text-align: center; }
body.submit .co-hint, body.submit .co-done { grid-area: 1 / 1; margin: 0; }
body.submit .co-hint { font-size: 17px; line-height: 1.55; color: #e9e4d8; align-self: start; }
body.submit .co-done { display: grid; justify-items: center; align-content: start; gap: var(--s-2); }
body.submit .co-line { margin: 0; font-size: 18px; line-height: 1.55; color: #f4efe2; max-width: 34ch; text-wrap: balance; }
body.submit .co-line a { color: var(--amber); }
body.submit .co-door:not([data-state="idle"]) .co-hint { visibility: hidden; }
body.submit .co-door:not([data-state="credited"]) .co-done { visibility: hidden; }
body.submit .co-again { cursor: pointer; }
body.submit .co-again:focus-visible, body.submit .co-rbtn:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; box-shadow: none; }

/* the two existing cabinets keep their copy; a small brass coin joins their heads */
body.submit .cab .cab-head { display: flex; align-items: center; gap: 10px; }
body.submit .cab .cab-head::before {
  content: ""; flex: none; width: 15px; height: 15px; border-radius: 50%; margin-left: -2px;
  background: repeating-conic-gradient(#7a5711 0 12deg, #f4d47e 12deg 24deg);
  box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 0 10px rgba(242,169,59,.5);
}

@media (max-width: 720px) {
  body.submit .co-plate { padding: 24px 20px 22px; gap: 16px; }
  body.submit .co-tray { width: 280px; }
}
@media (max-width: 360px) {
  body.submit .co-door { --coin: 112px; }
  body.submit .co-plate { padding: 22px 16px 20px; }
  body.submit .co-lamp { font-size: 15px; letter-spacing: .14em; text-indent: .14em; }
  body.submit .co-top { padding: 0 2px; }
}
@media (prefers-reduced-motion: reduce) {
  body.submit .co-lamp, body.submit .co-clunk .co-plate, body.submit .co-clunk .co-slit, body.submit .co-readout.co-flick { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   BUY — THE INSTRUCTION CARD
   ══════════════════════════════════════════════════════════════════════ */
body.buy .ic { margin-top: var(--s-5); padding: 6px 0 4px; }
body.buy .ic, body.buy .ic * { text-shadow: none; }
body.buy .ic-card {
  position: relative; border: 2px solid #0c0c0c; border-radius: 6px; overflow: hidden;
  background-color: #e9dec3;
  background-image: radial-gradient(150% 120% at 50% 36%, #eee5cc 0%, #e9dec3 56%, #ddd0ae 100%);
  color: #1d1a12;
  box-shadow: 0 1px 0 rgba(255,255,255,.18), 0 30px 50px -20px rgba(0,0,0,.95), 0 0 70px -20px rgba(242,169,59,.28);
}
@media (min-width: 721px) { body.buy .ic { transform: rotate(-1deg); transform-origin: 50% 60%; } }
body.buy .ic-band {
  position: relative; margin: 0; padding: 13px 56px 12px; text-align: center;
  background: #c93a22; color: #fff; border-bottom: 2px solid #0c0c0c;
  font: 900 clamp(22px, 3.2vw, 34px)/1.05 var(--display); letter-spacing: .16em; text-indent: .16em; text-transform: uppercase;
}
body.buy .ic-rivet {
  position: absolute; width: 13px; height: 13px; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fffdf4, #bfb393 52%, #6c6349);
  box-shadow: 0 1px 1px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.25);
}
body.buy .ic-rivet.r1 { top: 9px; left: 10px; } body.buy .ic-rivet.r2 { top: 9px; right: 10px; }
body.buy .ic-rivet.r3 { bottom: 9px; left: 10px; } body.buy .ic-rivet.r4 { bottom: 9px; right: 10px; }
body.buy .ic-band .ic-rivet { top: 50%; margin-top: -6.5px; }
body.buy .ic-band .ic-rivet.r1 { left: 16px; } body.buy .ic-band .ic-rivet.r2 { right: 16px; }
body.buy .ic-strip {
  list-style: none; margin: 0; padding: clamp(20px, 3vw, 30px) clamp(26px, 4vw, 44px) clamp(26px, 3.4vw, 34px);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 2vw, 22px);
}
body.buy .ic-cell { display: grid; grid-template-rows: 1fr auto; justify-items: center; gap: 14px; }
body.buy .ic-tile {
  position: relative; width: 100%; display: grid; justify-items: center; align-content: start; gap: 10px;
  padding: 26px 12px 18px; border: 2px solid #1d1a12; border-radius: 4px; background: #f4ecd6; text-align: center;
  box-shadow: inset 0 0 0 3px #f4ecd6, inset 0 0 0 4px rgba(29,26,18,.28);
}
body.buy .ic-n {
  position: absolute; top: 7px; left: 9px; display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 5px;
  border-radius: 3px; background: #1d1a12; color: #f4ecd6; font: 800 15px/1 var(--type);
}
body.buy .ic-glyph { display: block; width: clamp(60px, 7.4vw, 100px); height: auto; }
body.buy .ic-cap { display: block; font: 800 clamp(15px, 1.5vw, 18px)/1.25 var(--type); color: #1d1a12; text-wrap: balance; max-width: 15ch; }
body.buy .ic-lamp {
  display: block; width: 18px; height: 18px; border-radius: 50%;
  background: #5b4a33; border: 2px solid #0c0c0c;
  box-shadow: inset 0 2px 2px rgba(0,0,0,.55), 0 0 0 3px rgba(29,26,18,.14);
  transition: background-color .25s ease, box-shadow .25s ease;
}
body.buy .ic-lamp.is-lit {
  background: #ffb431;
  box-shadow: inset 0 -2px 3px rgba(150,70,0,.45), inset 0 2px 2px rgba(255,240,190,.9), 0 0 0 3px rgba(242,169,59,.4), 0 0 16px 4px rgba(255,160,30,.75);
}
body.buy .ic-lamp.is-now { background: #ffd46b; }

@media (max-width: 720px) {
  body.buy .ic-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 18px 16px 24px; gap: 16px 12px; }
  body.buy .ic-band { padding-left: 40px; padding-right: 40px; letter-spacing: .1em; text-indent: .1em; }
  body.buy .ic-tile { padding: 28px 8px 16px; }
}

/* the rest of the page borrows the card's rivets and paper */
body.buy .ca-box::before, body.buy .ca-box::after {
  content: ""; position: absolute; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fffdf4, #bfb393 52%, #6c6349);
  box-shadow: 0 1px 1px rgba(0,0,0,.5);
}
body.buy .ca-box::before { left: 5px; } body.buy .ca-box::after { right: 5px; }
body.buy .ca-box { padding-left: 26px; padding-right: 26px; }
body.buy .cab .cab-head { display: flex; align-items: center; gap: 10px; }
body.buy .cab .cab-head::before {
  content: ""; flex: none; width: 13px; height: 13px; border-radius: 50%; margin-left: -2px;
  background: #ffb431; box-shadow: 0 0 0 2px rgba(0,0,0,.55), 0 0 12px 2px rgba(255,160,30,.7);
}

/* the slim rail: the same four lamps, riding under the top bar while the real list is scrolled */
body.buy .ic-rail, body.buy .ic-rail * { text-shadow: none; }
body.buy .ic-rail {
  position: sticky; top: 84px; z-index: 7; width: max-content; max-width: 100%; margin: var(--s-3) 0 0;
  display: flex; align-items: center; gap: 14px; padding: 7px 16px 7px 8px;
  background: #e9dec3; color: #1d1a12; border: 2px solid #0c0c0c; border-radius: 5px;
  box-shadow: 0 12px 24px -8px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.08);
}
body.buy .ic-rail-t {
  padding: 7px 10px 6px; border-radius: 3px; background: #c93a22; color: #fff;
  font: 900 15px/1 var(--display); letter-spacing: .14em; text-transform: uppercase;
}
body.buy .ic-rail ol { display: flex; gap: 16px; margin: 0; padding: 0; list-style: none; }
body.buy .ic-rail li { display: flex; align-items: center; gap: 7px; font: 800 16px/1 var(--type); color: #1d1a12; }
@media (max-width: 720px) { body.buy .ic-rail { top: 76px; gap: 10px; padding-right: 12px; } body.buy .ic-rail ol { gap: 12px; } }
@media (max-width: 360px) { body.buy .ic-rail-t { letter-spacing: .08em; padding-inline: 8px; } body.buy .ic-rail { gap: 8px; } body.buy .ic-rail ol { gap: 9px; } }

/* the walkthrough's own <b> inside a sentence: site.css makes every ol.steps b a block heading, which broke
   "on the solana network." onto three lines. Only the step title (a direct child of li) stays a block. */
body.buy ol.steps p b { display: inline; font: inherit; font-weight: 800; color: #f6eed6; }