/* dznir.com/{username}: the phone-sized page markup (themes.css .mini) scaled up as one piece, so the public page is
   exactly what the creator saw in the editor's phone. Full-bleed on phones, a centred column on bigger screens. */
.pub { --z: 1.28; margin: 0; min-height: 100dvh; background: #000; }
.pub__page { position: relative; min-height: 100dvh; }
.pub .pg-layer { position: relative; inset: auto; min-height: 100dvh; }
.pub .pg-layer > .mini { overflow: clip; /* clips like hidden, but lets the dznir.com badge stick to the screen */ zoom: var(--z); height: auto; min-height: calc(100dvh / var(--z)); padding: 56px max(16px, calc(50% - 210px)) 32px; }
.pub .blk-hook { display: block; width: 100%; color: inherit; text-decoration: none; }
a.blk-hook { cursor: pointer; transition: transform 0.15s; }
a.blk-hook:hover { transform: translateY(-1px); }
a.blk-hook:focus-visible { outline: 2px solid var(--hl, #FF4D1F); outline-offset: 3px; border-radius: 12px; }
.pub .mini__socials a { display: grid; place-items: center; color: inherit; }
.pub .mini__socials a:hover { opacity: 0.75; }
.pub .blk__row--ghost, .pub .blk__btn--ghost { display: none; } /* editor hints like "Add your first item" */
/* The theme's background (its art or video, or the creator's own photo or clip) stays still on the screen and the
   blocks scroll over it, at every size (owner, 27 Oct 2026). Fixed layers ignore the column's clip and keep z-index -1
   inside the page's own stacking context (.mini isolates), so they always sit behind the blocks. */
/* Smooth: each layer is its own compositor layer (translateZ), so scrolling only moves the blocks and never repaints the
   background; 100lvh (the tallest screen, address bar hidden) keeps it from jumping when a phone's bar slides away (÷ --z: the page is zoomed, which scales screen units too).
   z-index -1 keeps every layer under the blocks. */
.pub .pg-layer > .mini > :is(.bg, .bg-photo, .bg-scrim--own) { position: fixed; inset: 0 0 auto; height: calc(100vh / var(--z)); height: calc(100lvh / var(--z)); z-index: -1; transform: translateZ(0); backface-visibility: hidden; }
@media (min-width: 900px) { .pub { --z: 1.4; } }

/* HQ's review preview: a strip on top so nobody mistakes it for the live page */
.pub__review { position: sticky; top: 0; z-index: 50; margin: 0; padding: 8px 16px; background: #111110; color: #fff; font: 500 13px/1.4 'Instrument Sans', system-ui, sans-serif; text-align: center; }
.pub__review b { margin-right: 8px; padding: 0 8px; border-radius: 999px; background: #FF4D1F; font-weight: 600; }

/* Sensitive content (Settings): a warning over the page until the visitor continues (#continue:target, or page-taps.js) */
.pub-warn { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px 16px; overflow-y: auto; background: rgba(17, 17, 16, 0.72); -webkit-backdrop-filter: blur(28px) saturate(0.6); backdrop-filter: blur(28px) saturate(0.6); font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif; }
.pub-warn__mark:target ~ .pub-warn, .pub-warn[hidden] { display: none; }
.pub:has(.pub-warn:not([hidden])):not(:has(.pub-warn__mark:target)) { overflow: hidden; }
.pub-warn__card { display: grid; justify-items: center; gap: 8px; width: 100%; max-width: 400px; padding: 32px 24px 24px; border-radius: 24px; background: #FAF9F6; color: #111110; text-align: center; box-shadow: 0 24px 64px -24px rgba(0, 0, 0, 0.6); }
.pub-warn__icon { width: 40px; height: 40px; margin-bottom: 8px; padding: 8px; border-radius: 50%; background: #FFE9E2; fill: none; stroke: #C2300A; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pub-warn h2 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.pub-warn p { margin: 0 0 16px; color: #5E5A54; font-size: 15px; line-height: 1.5; }
.pub-warn__go { display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; border-radius: 999px; background: #111110; color: #FFFFFF; font-size: 16px; font-weight: 600; text-decoration: none; }
.pub-warn__go:hover { background: #2A2926; }
.pub-warn__back { padding: 8px 16px; color: #5E5A54; font-size: 14px; font-weight: 600; }
.pub-warn a:focus-visible { outline: 2px solid #FF4D1F; outline-offset: 3px; }
@media (prefers-color-scheme: dark) {
  .pub-warn__card { background: #1B1A18; color: #F3F1EC; }
  .pub-warn p, .pub-warn__back { color: #A39E95; }
  .pub-warn__icon { background: #3A1E14; stroke: #FF9B78; }
  .pub-warn__go { background: #F3F1EC; color: #111110; }
  .pub-warn__go:hover { background: #D4D0C8; }
}

/* Work with me (partials/collab-form): the brand form, a card over the page whatever the theme */
.collab { width: min(440px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 24px; background: #FAF9F6; color: #111110; font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif; box-shadow: 0 24px 64px -24px rgba(0, 0, 0, 0.6); }
.collab::backdrop { background: rgba(17, 17, 16, 0.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.collab__form { display: grid; gap: 16px; padding: 24px; }
.collab__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.collab h2 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.collab__x { width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: #5E5A54; font-size: 24px; cursor: pointer; }
.collab__x:hover { background: #EFECE6; }
.collab__sub { margin: -8px 0 0; color: #5E5A54; font-size: 15px; line-height: 1.5; }
.collab__fields { display: grid; gap: 16px; }
.collab label { display: grid; gap: 8px; font-size: 14px; font-weight: 600; }
.collab input, .collab select, .collab textarea { width: 100%; box-sizing: border-box; min-height: 48px; padding: 8px 16px; border: 1px solid #D8D3CA; border-radius: 16px; background: #FFFFFF; color: #111110; font-family: inherit; font-size: 16px; line-height: 1.4; }
.collab textarea { min-height: 96px; resize: vertical; }
.collab :is(input, select, textarea):focus-visible { outline: 2px solid #FF4D1F; outline-offset: 0; border-color: transparent; }
.collab__send { min-height: 48px; border: 0; border-radius: 999px; background: #111110; color: #FFFFFF; font-family: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
.collab__send:hover { background: #2A2926; }
.collab__send:disabled { opacity: 0.6; }
.collab__msg { margin: 0; font-size: 15px; font-weight: 600; text-align: center; }
.collab__msg:empty { display: none; }
.collab__msg.is-err { color: #C2300A; }
.collab__form.is-sent .collab__fields, .collab__form.is-sent .collab__sub { display: none; }
.collab .fm__hp { position: absolute; left: -9999px; }
@media (prefers-color-scheme: dark) {
  .collab { background: #1B1A18; color: #F3F1EC; }
  .collab__sub, .collab__x { color: #A39E95; }
  .collab__x:hover { background: #2A2926; }
  .collab input, .collab select, .collab textarea { border-color: #3A3833; background: #111110; color: #F3F1EC; }
  .collab__send { background: #F3F1EC; color: #111110; }
  .collab__send:hover { background: #D4D0C8; }
  .collab__msg.is-err { color: #FF9B78; }
}

/* Media kit block, floating style on laptops (partials/page .kf): the side space beside the page is wide enough for
   two cards (at 1200px+ it is over 200px each side at the page's zoom), so they replace the chips */
@media (min-width: 1200px) {
  .pub .kf { position: absolute; inset: 0; z-index: 4; display: block; pointer-events: none; }
  .pub .kf__chip { display: none; }
  .pub .kf__card { position: absolute; top: 120px; display: grid; gap: 2px; width: 156px; padding: 12px; border-radius: 16px; background: color-mix(in srgb, var(--bg, #FAF8F5) 70%, transparent); border: 1px solid color-mix(in srgb, var(--hl, var(--btn, #141311)) 45%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 12px 28px -16px rgba(0, 0, 0, 0.5); color: var(--fg, #141311); text-align: left; text-decoration: none; pointer-events: auto; animation: kf-bob 3.6s ease-in-out infinite; }
  .pub .kf__card--l { left: 24px; }
  .pub .kf__card--r { right: 24px; top: 200px; animation-delay: -1.8s; }
  .pub .kf__k { color: var(--mut, #6B665D); font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
  .pub .kf__big { font-size: 22px; font-weight: 800; line-height: 1.1; }
  .pub .kf__mid { font-size: 13px; font-weight: 700; }
  .pub .kf__card small { color: var(--mut, #6B665D); font-size: 10px; font-weight: 600; }
  .pub .kf__btn { margin-top: 8px; padding: 4px 8px; border-radius: 999px; background: var(--btn, #141311); color: var(--btnfg, #FFFFFF); font-size: 10.5px; font-weight: 700; text-align: center; }
  .pub .is-still .kf__card, .pub .is-paused .kf__card { animation: none; }
}

/* Pay or tip with UPI, app picker (public/js/upi-sheet.js, feature blocks.upi_apps): a sheet from the bottom on phones,
   a card in the middle on laptops. Outside the zoomed page, so sizes are real pixels; 48px controls, 4/8 spacing. */
@keyframes upis-up { from { transform: translateY(100%); } to { transform: none; } }
.upis { width: 100%; max-width: 480px; max-height: calc(100dvh - 32px); margin: auto auto 0; padding: 0; border: 0; border-radius: 24px 24px 0 0; background: #FAF9F6; color: #111110; font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif; box-shadow: 0 -16px 48px -24px rgba(0, 0, 0, 0.6); }
.upis[open] { animation: upis-up 0.25s ease-out; }
.upis::backdrop { background: rgba(17, 17, 16, 0.6); }
.upis__card { display: grid; gap: 16px; padding: 8px 16px max(16px, env(safe-area-inset-bottom)); }
.upis__grab { justify-self: center; width: 40px; height: 4px; border-radius: 999px; background: #D8D3CA; }
.upis__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.upis h2 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.upis__head p { margin: 4px 0 0; color: #5E5A54; font-size: 14px; line-height: 1.4; }
.upis__x { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: #5E5A54; font-size: 24px; cursor: pointer; }
.upis__x:hover { background: #EFECE6; }
.upis__apps { display: grid; gap: 8px; }
.upis__msg { display: grid; gap: 4px; font-size: 14px; font-weight: 600; }
.upis__msg small { color: #5E5A54; font-size: 12px; font-weight: 400; }
.upis__msg input { width: 100%; box-sizing: border-box; min-height: 48px; padding: 8px 16px; border: 1px solid #E2DDD4; border-radius: 16px; background: #FFFFFF; color: #111110; font-family: inherit; font-size: 16px; }
.upis__msg input:focus-visible { outline: 2px solid #FF4D1F; outline-offset: 0; border-color: transparent; }
.upis__app { position: relative; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 16px 0 12px; border: 1px solid #E2DDD4; border-radius: 16px; background: #FFFFFF; font-size: 16px; font-weight: 600; cursor: pointer; }
.upis__app:has(input:checked) { border-color: #111110; box-shadow: inset 0 0 0 1px #111110; }
.upis__app input { order: 3; flex: none; width: 20px; height: 20px; margin: 0 0 0 auto; border: 2px solid #B4AFA6; border-radius: 50%; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.upis__app input:checked { border: 6px solid #111110; }
.upis__app input:focus-visible { outline: 2px solid #FF4D1F; outline-offset: 4px; }
.upis__mark { flex: none; display: block; width: 32px; height: 32px; border-radius: 50%; box-shadow: 0 0 0 1px #E2DDD4; }
.upis__go { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 999px; background: #2E7D32; color: #FFFFFF; font-size: 16px; font-weight: 600; text-decoration: none; }
.upis__go:hover { background: #276A2B; }
.upis__go:focus-visible, .upis__id button:focus-visible, .upis__x:focus-visible { outline: 2px solid #FF4D1F; outline-offset: 2px; }
.upis__miss { margin: -8px 0 0; color: #9A5B00; font-size: 14px; text-align: center; }
.upis__id { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 0 4px 0 16px; border: 1.5px dashed #D8D3CA; border-radius: 16px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: clamp(12px, 3.6vw, 14px); }
.upis__id span { min-width: 0; overflow-wrap: anywhere; }
.upis__id button { flex: none; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: #EFECE6; color: #111110; font-family: 'Instrument Sans', system-ui, sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; }
@media (min-width: 600px) { .upis { margin: auto; border-radius: 24px; } .upis__card { padding-top: 16px; } .upis__grab { display: none; } }
@media (prefers-reduced-motion: reduce) { .upis[open] { animation: none; } }
@media (prefers-color-scheme: dark) {
  .upis { background: #1B1A18; color: #F3F1EC; }
  .upis__head p, .upis__x { color: #A39E95; }
  .upis__x:hover, .upis__id button { background: #2A2926; color: #F3F1EC; }
  .upis__grab { background: #3A3833; }
  .upis__mark { box-shadow: none; }
  .upis__app { border-color: #3A3833; background: #111110; }
  .upis__app:has(input:checked) { border-color: #F3F1EC; box-shadow: inset 0 0 0 1px #F3F1EC; }
  .upis__app input { border-color: #6B665D; }
  .upis__app input:checked { border-color: #F3F1EC; }
  .upis__id { border-color: #3A3833; }
  .upis__msg small { color: #A39E95; }
  .upis__msg input { border-color: #3A3833; background: #111110; color: #F3F1EC; }
  .upis__miss { color: #F5B455; }
}

/* The page badge (partials/page .mini__url--claim) and its "Want a page like this?" sheet (partials/claim-sheet):
   a bottom sheet on phones, a card in the middle on wider screens */
button.mini__url { font: inherit; font-size: 10.5px; font-weight: 600; cursor: pointer; }
button.mini__url:hover { border-color: color-mix(in srgb, var(--fg, #141311) 28%, transparent); }
button.mini__url:focus-visible { outline: 2px solid var(--hl, var(--btn, #141311)); outline-offset: 2px; }
@keyframes csheet-up { from { transform: translateY(100%); } to { transform: none; } }
.csheet { width: 100%; max-width: 440px; max-height: calc(100dvh - 32px); margin: auto auto 0; padding: 0; border: 0; border-radius: 24px 24px 0 0; background: #FAF9F6; color: #111110; font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif; box-shadow: 0 -16px 48px -24px rgba(0, 0, 0, 0.5); }
.csheet[open] { animation: csheet-up 0.25s ease-out; }
.csheet::backdrop { background: rgba(17, 17, 16, 0.55); }
.csheet__card { display: grid; gap: 16px; padding: 8px 24px calc(24px + env(safe-area-inset-bottom, 0px)); }
.csheet__grab { justify-self: center; width: 40px; height: 4px; border-radius: 4px; background: #D8D3CA; }
.csheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.csheet h2 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.csheet__sub { margin: 4px 0 0; color: #5E5A54; font-size: 15px; line-height: 1.5; }
.csheet__x { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: #5E5A54; font-size: 24px; cursor: pointer; }
.csheet__x:hover { background: #EFECE6; }
.csheet__field { display: flex; align-items: center; min-height: 48px; padding: 0 16px; border: 1px solid #D8D3CA; border-radius: 999px; background: #FFFFFF; color: #5E5A54; font-size: 16px; }
.csheet__field:focus-within { outline: 2px solid #FF4D1F; border-color: transparent; }
.csheet__field input { flex: 1; min-width: 0; min-height: 44px; padding: 0; border: 0; background: none; color: #111110; font-family: inherit; font-size: 16px; outline: none; box-shadow: none !important; } /* the field's own ring shows focus, not app.css's input ring */
.csheet__msg { margin: -8px 0 0; min-height: 20px; color: #5E5A54; font-size: 14px; }
.csheet__msg[data-state="ok"] { color: #1E7A46; }
.csheet__msg[data-state="err"] { color: #C2300A; }
.csheet__go { min-height: 48px; border: 0; border-radius: 999px; background: #D0340C; color: #FFFFFF; font-family: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
.csheet__go:hover { background: #B02A08; }
.csheet__alt { margin: 0; color: #5E5A54; font-size: 14px; text-align: center; }
.csheet__alt a { color: #111110; font-weight: 600; }
@media (min-width: 640px) {
  .csheet { margin: auto; border-radius: 24px; box-shadow: 0 24px 64px -24px rgba(0, 0, 0, 0.6); }
  .csheet[open] { animation: none; }
  .csheet__card { padding-top: 24px; }
  .csheet__grab { display: none; }
}
@media (prefers-color-scheme: dark) {
  .csheet { background: #1B1A18; color: #F3F1EC; }
  .csheet__sub, .csheet__x, .csheet__msg, .csheet__alt, .csheet__field { color: #A39E95; }
  .csheet__x:hover { background: #2A2926; }
  .csheet__grab { background: #3A3833; }
  .csheet__field { border-color: #3A3833; background: #111110; }
  .csheet__field input, .csheet__alt a { color: #F3F1EC; }
  .csheet__msg[data-state="ok"] { color: #5FD08F; }
  .csheet__msg[data-state="err"] { color: #FF9B78; }
}
@media (prefers-reduced-motion: reduce) { .csheet[open] { animation: none; } }

/* Top corners (partials/page .pg-corners, owner 30 Oct 2026): the dznir Z at the top left (hidden with the Pro "dznir
   branding" switch, like the badge) and Share at the top right. Inside the zoomed page, so they wear the theme's own
   colours in light and dark themes alike and line up with the column; 32px here is about 40px on screen. Fixed, so they
   stay at the top while the page scrolls, as the dznir.com/name badge stays at the bottom (owner, 31 Oct 2026). */
.pg-corners { position: fixed; top: 8px; left: max(8px, calc(50% - 214px)); right: max(8px, calc(50% - 214px)); z-index: 20; display: flex; justify-content: space-between; pointer-events: none; }
.pub:has(> .pub__review) .pg-corners { top: calc(8px + 34px / var(--z)); } /* below a demo link's sticky "Preview made for" strip */
.pg-corner { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid color-mix(in srgb, var(--fg) 16%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--bg) 72%, transparent); color: var(--fg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 4px 12px -6px rgba(0, 0, 0, 0.35); cursor: pointer; pointer-events: auto; text-decoration: none; transition: transform 0.15s, background 0.15s; }
.pg-corner:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--bg) 88%, var(--fg)); }
.pg-corner:focus-visible { outline: 2px solid var(--hl, #FF4D1F); outline-offset: 2px; }
.pg-corner--z { border-radius: 10px; border-color: color-mix(in srgb, var(--fg) 12%, transparent); background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
.pg-corner--z:hover { background: var(--bg); }
/* the dznir logo (dznir-tools/brand): two bars in the page's text colour, the chain link always dznir orange, on the
   page's background, so a dark theme shows the dark logo and a light theme the light one */
.pg-corner--z .wm__z { --zl: #FF4D1F; width: 15px; height: 16px; color: var(--fg); overflow: visible; }
.pg-corner--share { margin-left: auto; }
.pg-corner--share svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Share sheet (public/js/page-share.js): a sheet from the bottom on phones, a card in the middle on laptops; follows the
   visitor's light or dark setting. Outside the zoomed page, so real pixels; 48px controls, 4/8 spacing. */
.shs { width: 100%; max-width: 480px; max-height: calc(100dvh - 32px); margin: auto auto 0; padding: 0; border: 0; border-radius: 24px 24px 0 0; background: #FAF9F6; color: #111110; font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif; box-shadow: 0 -16px 48px -24px rgba(0, 0, 0, 0.6); }
.shs[open] { animation: upis-up 0.25s ease-out; }
.shs::backdrop { background: rgba(17, 17, 16, 0.6); }
.shs__card { display: grid; gap: 16px; padding: 8px 16px max(16px, env(safe-area-inset-bottom)); }
.shs__grab { justify-self: center; width: 40px; height: 4px; border-radius: 999px; background: #D8D3CA; }
.shs__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.shs h2 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.shs__head p { margin: 4px 0 0; color: #5E5A54; font-size: 14px; line-height: 1.4; }
.shs__x { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: #5E5A54; font-size: 24px; cursor: pointer; }
.shs__x:hover { background: #EFECE6; }
.shs__apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.shs__app { display: grid; justify-items: center; gap: 8px; padding: 8px 0; border-radius: 16px; color: inherit; font-size: 12px; font-weight: 600; text-decoration: none; }
.shs__app:hover { background: #EFECE6; }
.shs__mark { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #111110; color: #FFFFFF; }
.shs__mark svg { width: 24px; height: 24px; }
.shs__mark--whatsapp { background: #25D366; } .shs__mark--facebook { background: #1877F2; } .shs__mark--linkedin { background: #0A66C2; }
.shs__mark--telegram { background: #229ED9; } .shs__mark--mail { background: #5E5A54; }
.shs__link { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 0 4px 0 16px; border: 1.5px dashed #D8D3CA; border-radius: 16px; font-size: 14px; }
.shs__link span { min-width: 0; overflow-wrap: anywhere; }
.shs__link button, .shs__more { flex: none; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: #111110; color: #FFFFFF; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.shs__more { min-height: 48px; background: #EFECE6; color: #111110; }
.shs__app:focus-visible, .shs__x:focus-visible, .shs__link button:focus-visible, .shs__more:focus-visible { outline: 2px solid #FF4D1F; outline-offset: 2px; }
@media (min-width: 600px) { .shs { margin: auto; border-radius: 24px; } .shs__card { padding-top: 16px; } .shs__grab { display: none; } .shs__apps { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .shs[open] { animation: none; } }
@media (prefers-color-scheme: dark) {
  .shs { background: #1B1A18; color: #F3F1EC; }
  .shs__head p, .shs__x { color: #A39E95; }
  .shs__x:hover, .shs__app:hover, .shs__more { background: #2A2926; color: #F3F1EC; }
  .shs__grab, .shs__link { border-color: #3A3833; }
  .shs__grab { background: #3A3833; }
  .shs__mark--x { background: #F3F1EC; color: #111110; } /* the brand colours stay; only X and Email flip */
  .shs__mark--mail { background: #6B665D; color: #FFFFFF; }
  .shs__link button { background: #F3F1EC; color: #111110; }
}