/* Mila 3D: a cosy, chunky interface. Cream cards, a soft beige tray, big friendly type. */
:root {
  --amb: #2a3550; --amb2: #6c7f95;
  --cream: #fffaf0;
  --tray: rgba(226, 211, 180, 0.62);
  --ink: #5a463a; --soft: #9b8878;
  --coral: #f2765f; --coral-d: #dc5a44;
  --locked: #c9bfb2;
  --knock: #fff;
  --edge: 0 4px 0 rgba(90, 70, 58, .10), 0 12px 26px rgba(60, 40, 30, .18);
  --edge-p: 0 1px 0 rgba(90, 70, 58, .10), 0 4px 10px rgba(60, 40, 30, .14);
  --spring: cubic-bezier(.2, 1.35, .4, 1);
  --ease: cubic-bezier(.2, .9, .25, 1.15);
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  --display: "Fredoka", "Nunito", system-ui, sans-serif;
  --body: "Nunito", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; font-family: var(--body); font-weight: 700; color: var(--ink); -webkit-font-smoothing: antialiased; }
body { background: radial-gradient(120% 90% at 50% 20%, var(--amb2), var(--amb) 70%); transition: background 2s; }
[hidden] { display: none !important; }
button, a { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; text-decoration: none; }
button { border: 0; background: none; cursor: pointer; padding: 0; }
svg { display: block; fill: currentColor; }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; box-shadow: 0 0 0 6px rgba(255, 250, 240, .85); }

/* ---------- stage ---------- */
#app { height: 100dvh; display: grid; place-items: center; }
#stage { position: relative; width: 100vw; height: 100dvh; overflow: hidden; background: #9cc6ee; user-select: none; -webkit-user-select: none; }
@media (min-width: 620px) and (min-height: 560px) {
  #stage { height: min(100dvh - 44px, 980px); width: auto; aspect-ratio: 1000 / 1370; border-radius: 34px; box-shadow: 0 40px 90px rgba(10, 6, 20, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.14); }
}
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#gl.tool { cursor: copy; }
#gl.toy { cursor: none; }

/* ---------- buttons ---------- */
.btn { transition: transform .16s var(--ease), box-shadow .16s ease, background .18s, color .18s; }
.btn:active { transform: scale(.94); }
@media (hover: hover) { .btn:hover { filter: brightness(1.03); } }

/* ---------- header ---------- */
header { position: absolute; left: 0; right: 0; top: 0; z-index: 2; padding: calc(var(--sat) + 14px) 14px 0; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; }
header > * { pointer-events: auto; }
.who { position: absolute; left: 50%; top: calc(var(--sat) + 10px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
h1 { margin: 0; display: flex; align-items: center; gap: 7px; font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1.1; color: #fff; letter-spacing: .01em; text-shadow: 0 2px 0 rgba(70, 40, 30, .28), 0 3px 14px rgba(30, 20, 40, .5); }
h1 .paw { width: 24px; height: 24px; filter: drop-shadow(0 2px 0 rgba(70, 40, 30, .28)) drop-shadow(0 3px 8px rgba(30, 20, 40, .4)); }
.pill { background: var(--cream); border-radius: 999px; box-shadow: var(--edge); }
.statusPill { margin: 0; padding: 4px 12px 4px 10px; display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 800; color: var(--soft); max-width: 100%; }
.who { max-width: 62%; }
.live { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #54c47a; box-shadow: 0 0 0 0 rgba(84, 196, 122, .6); animation: live 2.4s infinite; }
@keyframes live { 70% { box-shadow: 0 0 0 7px rgba(84, 196, 122, 0); } 100% { box-shadow: 0 0 0 0 rgba(84, 196, 122, 0); } }
/* the status line is kept for screen readers only */
.statusPill { position: absolute !important; width: 1px; height: 1px; padding: 0 !important; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; box-shadow: none !important; background: none !important; }
#status { display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#status.in { animation: statusIn .5s var(--ease); }
@keyframes statusIn { from { opacity: 0; transform: translateY(6px); } }

.chip { background: var(--cream); border-radius: 999px; box-shadow: var(--edge); height: 38px; padding: 0 14px 0 9px; max-width: calc(50% - 64px); display: flex; align-items: center; gap: 6px; font-family: var(--body); font-weight: 800; font-size: 13px; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
#chipText { overflow: hidden; text-overflow: ellipsis; }
#wxIcon { flex: none; width: 22px; height: 22px; display: block; }
#wxIcon svg { width: 100%; height: 100%; fill: initial; }

.round { width: 44px; height: 44px; border-radius: 50%; background: var(--cream); box-shadow: var(--edge); display: grid; place-items: center; }
.round:active { box-shadow: var(--edge-p); transform: translateY(2px) scale(.94); }
#mute svg { width: 24px; height: 24px; color: var(--ink); }
#mute .wave, #mute .cross { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
#mute .cross { display: none; stroke: var(--coral); }
#mute.off .wave { display: none; } #mute.off .cross { display: block; }

/* ---------- dock ---------- */
/* five glass circles, as drawn in the Figma file (Mila, node 14:37) */
#dock { position: absolute; z-index: 3; left: 0; right: 0; bottom: calc(var(--sab) + 18px); display: flex; justify-content: center; align-items: center; gap: 12px; }
.dk { flex: none; box-sizing: border-box; width: 56px; height: 56px; border-radius: 999px; background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .2); display: flex; align-items: center; justify-content: center; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .12s var(--ease), background .15s; }
.dk img { display: block; pointer-events: none; }
.dk:active { transform: scale(.92); background: rgba(255, 255, 255, .32); }
.dk.on { background: rgba(255, 255, 255, .42); border-color: rgba(255, 255, 255, .6); }
svg .knock { fill: var(--knock); }
svg .knock.stroke { fill: none; stroke: var(--knock); stroke-width: 1.8; stroke-linecap: round; }
svg .line { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
svg .star { stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; }


/* ---------- item tray ---------- */
#sheet { --tail: 50%; position: absolute; z-index: 3; left: 0; right: 0; margin: 0 auto; bottom: calc(var(--sab) + 96px); width: min(calc(100% - 24px), 420px); padding: 14px 0 0; border-radius: 26px; background: var(--tray); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--edge); transform-origin: var(--tail) calc(100% + 14px); transform: translateY(18px) scale(.6); opacity: 0; visibility: hidden; pointer-events: none; transition: transform .26s var(--spring), opacity .16s ease, visibility 0s .26s; }
#sheet.open { transform: none; opacity: 1; visibility: visible; pointer-events: auto; transition: transform .26s var(--spring), opacity .16s ease, visibility 0s; }
#sheet::after { content: ""; position: absolute; top: calc(100% - 1px); left: clamp(30px, var(--tail), calc(100% - 30px)); width: 26px; height: 13px; margin-left: -13px; background: rgba(226, 211, 180, .74); clip-path: polygon(0 0, 100% 0, 50% 100%); border-radius: 0 0 4px 4px; }
.trayHead { display: flex; align-items: center; justify-content: space-between; padding: 0 14px 0 18px; }
.trayHead h2 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 21px; color: var(--ink); line-height: 1.2; }
.trayClose { position: relative; width: 30px; height: 30px; border-radius: 50%; background: var(--cream); display: grid; place-items: center; box-shadow: 0 3px 0 rgba(90, 70, 58, .10), 0 6px 12px rgba(60, 40, 30, .12); }
.trayClose::after { content: ""; position: absolute; inset: -7px; }
.trayClose svg { width: 14px; height: 14px; fill: none; stroke: var(--ink); stroke-width: 3.2; stroke-linecap: round; }
.trayClose:active { transform: translateY(2px) scale(.92); box-shadow: 0 1px 0 rgba(90, 70, 58, .10); }
.trayHelp { margin: 2px 18px 0; font-family: var(--body); font-weight: 700; font-size: 12.5px; color: var(--soft); }

.cards { display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; padding: 10px 16px 16px; scroll-snap-type: x proximity; scroll-padding: 0 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.cards::-webkit-scrollbar { display: none; }
.card { position: relative; flex: none; width: 92px; padding: 6px 6px 8px; border-radius: 20px; background: #fff; color: var(--ink); display: flex; flex-direction: column; align-items: center; gap: 4px; scroll-snap-align: start; box-shadow: var(--edge); transition: transform .18s var(--ease), box-shadow .18s ease; }
.card:active { transform: scale(.94); box-shadow: var(--edge-p); }
.card .pic { width: 80px; height: 80px; border-radius: 15px; background: #fbf1df; display: grid; place-items: center; overflow: hidden; }
.card .pic img, .card .pic canvas { width: 100%; height: 100%; display: block; object-fit: cover; }
.card strong { max-width: 100%; font-family: var(--display); font-weight: 600; font-size: 13px; line-height: 1.2; min-height: 2.4em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-wrap: balance; }
.card .tag { min-height: 17px; padding: 0 8px; border-radius: 999px; display: inline-flex; align-items: center; font-family: var(--body); font-weight: 800; font-size: 10.5px; line-height: 17px; white-space: nowrap; background: #f3ebde; color: var(--soft); }
.card .tag:empty { visibility: hidden; padding: 0; }
.card.on { transform: translateY(-4px); box-shadow: 0 0 0 3px var(--coral), 0 8px 0 rgba(220, 90, 68, .18), 0 14px 24px rgba(220, 90, 68, .24); }
.card.on:active { transform: translateY(-2px) scale(.95); }
.card.on .tag { background: var(--coral); color: #fff; }
.card.locked { color: var(--locked); }
.card.locked .pic { filter: grayscale(1); opacity: .5; }
.card.locked .tag { background: var(--locked); color: #fff; }
.card .lock { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 50%; background: var(--locked); color: #fff; display: grid; place-items: center; box-shadow: 0 2px 0 rgba(90, 70, 58, .12); }
.card .lock svg { width: 12px; height: 12px; }

#sheet.open .card { animation: cardIn .34s var(--spring) both; animation-delay: calc(var(--i, 0) * 30ms + 70ms); }
#sheet.still .card { animation: none; }
@keyframes cardIn { from { opacity: 0; transform: translateY(16px) scale(.8); } }

/* ---------- hint toast ---------- */
#hint { position: absolute; z-index: 4; left: 0; right: 0; margin: 0 auto; width: max-content; max-width: calc(100% - 28px); bottom: calc(var(--sab) + 92px); display: flex; align-items: center; gap: 10px; background: var(--cream); color: var(--ink); font-family: var(--body); font-weight: 800; font-size: 13.5px; line-height: 1.3; padding: 7px 8px 7px 16px; border-radius: 999px; box-shadow: var(--edge); transform: translateY(14px) scale(.94); opacity: 0; pointer-events: none; transition: opacity .22s, transform .32s var(--spring), bottom .25s var(--ease); }
#hint.show { opacity: 1; transform: none; pointer-events: auto; }
#sheet.open ~ #hint { bottom: calc(var(--sab) + 298px); }
#hint span { padding: 4px 0; }
#hint button { position: relative; flex: none; background: var(--coral); color: #fff; font-family: var(--display); font-weight: 600; font-size: 14px; padding: 0 16px; height: 34px; border-radius: 999px; box-shadow: 0 3px 0 var(--coral-d); }
#hint button::after { content: ""; position: absolute; inset: -5px -4px; }
#hint button:active { transform: translateY(2px) scale(.94); box-shadow: 0 1px 0 var(--coral-d); }

/* ---------- flash, intro ---------- */
#flash { position: absolute; inset: 0; z-index: 6; background: #fff; opacity: 0; pointer-events: none; }
#flash.go { animation: flash .6s ease-out; }
@keyframes flash { 0% { opacity: 0; } 8% { opacity: 1; } 100% { opacity: 0; } }
#intro { position: absolute; inset: 0; z-index: 7; display: grid; place-items: center; text-align: center; background: var(--cream); color: var(--ink); transition: opacity .9s ease, visibility .9s; }
#intro.gone { opacity: 0; visibility: hidden; pointer-events: none; }
#intro .paw { width: 52px; height: 52px; margin: 0 auto 6px; color: var(--coral); animation: rise .8s var(--spring) both; }
#intro h2 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 64px; line-height: 1.05; letter-spacing: .01em; text-shadow: 0 4px 0 rgba(90, 70, 58, .10); animation: rise .9s .08s var(--spring) both; }
#intro p { margin: 6px 0 0; font-family: var(--body); font-weight: 700; font-size: 18px; color: var(--soft); animation: rise .9s .2s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.96); } }

/* ---------- fps readouts (only with ?fps=1) ---------- */
.fps, .info { display: none; position: absolute; z-index: 4; top: calc(var(--sat) + 96px); left: 14px; padding: 4px 9px; border-radius: 10px; background: rgba(255, 250, 240, .8); color: var(--ink); font: 700 11px ui-monospace, SFMono-Regular, Menlo, monospace; pointer-events: none; }
.info { top: calc(var(--sat) + 122px); max-width: 70%; }
.showfps .fps, .showfps .info { display: block; }

/* ---------- hearts and words floated up from Mila ---------- */
.heart3d { position: absolute; z-index: 3; width: 26px; height: 24px; margin: -12px 0 0 -13px; pointer-events: none; opacity: 0; animation: heartUp 1.4s ease-out forwards; }
.heart3d svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 3px rgba(60, 20, 30, .25)); }
@keyframes heartUp {
  0% { opacity: 0; transform: translate(0, 6px) scale(.5) rotate(var(--r, 0deg)); }
  15% { opacity: 1; transform: translate(calc(var(--dx, 0px) * .2), -10px) scale(1.1) rotate(var(--r, 0deg)); }
  100% { opacity: 0; transform: translate(var(--dx, 0px), -90px) scale(.9) rotate(var(--r, 0deg)); }
}
.bubble3d { position: absolute; z-index: 3; transform: translate(-50%, 0); pointer-events: none; font-family: var(--display); font-weight: 700; font-size: 24px; color: #fff; text-shadow: 0 2px 0 rgba(70, 40, 30, .28), 0 3px 12px rgba(30, 20, 40, .5); white-space: nowrap; animation: bubbleUp 2.2s ease-out forwards; }
.bubble3d.soft { font-size: 20px; opacity: .85; }
@keyframes bubbleUp { 0% { opacity: 0; transform: translate(-50%, 8px) scale(.7); } 15% { opacity: 1; transform: translate(-50%, -6px) scale(1); } 100% { opacity: 0; transform: translate(calc(-50% + 14px), -70px) scale(1); } }

/* stroking Mila: an open hand over her, a closed one while stroking */
#gl.overcat { cursor: grab; cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M11 15V7.5a2 2 0 0 1 4 0V14m0-7.5v-1a2 2 0 0 1 4 0V14m0-6.5a2 2 0 0 1 4 0V15m0-4a2 2 0 0 1 4 0v8c0 5.5-4 9-9 9h-1c-3.5 0-5.7-1.7-7.5-4.5L6 17.5c-1.3-2.2 1.3-4 3-2.2L11 18' fill='%23fffaf2' stroke='%232d2433' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") 14 6, grab; }
#gl.stroking { cursor: grabbing; }

/* ---------- photo modal ---------- */
#photoModal { position: fixed; inset: 0; z-index: 10; background: rgba(70, 48, 36, .62); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); display: grid; place-items: center; padding: 18px; overflow: auto; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
#photoModal.open { opacity: 1; visibility: visible; }
.photoWrap { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 420px; }
.cardBox { perspective: 900px; }
#card { --sx: 30%; --sy: 20%; position: relative; width: min(82vw, 360px, 50dvh); transform: rotate(-2deg); border-radius: 7px; overflow: hidden; box-shadow: 0 2px 3px rgba(0, 0, 0, .25), 0 26px 60px rgba(0, 0, 0, .5); transition: transform .25s ease-out; will-change: transform; }
#photoModal.open #card { animation: eject .75s var(--ease) both; }
@keyframes eject { from { transform: translateY(-70vh) rotate(8deg); } }
#card img { display: block; width: 100%; }
#develop { position: absolute; left: 6.94%; top: 6.98%; width: 86.11%; height: 72.09%; background: #e9e3d6; opacity: 0; pointer-events: none; mix-blend-mode: normal; }
#develop.go { animation: develop 3.6s .4s ease-in both; }
@keyframes develop { 0% { opacity: 1; } 30% { opacity: .94; } 100% { opacity: 0; } }
#sheen { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 45% at var(--sx) var(--sy), rgba(255, 255, 255, .34), rgba(255, 255, 255, 0) 70%); mix-blend-mode: screen; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
.pillBtn { min-height: 48px; padding: 0 22px 0 18px; border-radius: 999px; background: var(--cream); color: var(--ink); display: inline-flex; align-items: center; gap: 9px; font-family: var(--display); font-weight: 600; font-size: 16px; box-shadow: 0 4px 0 rgba(90, 70, 58, .16), 0 12px 24px rgba(30, 15, 8, .3); }
.pillBtn svg { width: 20px; height: 20px; flex: none; }
.pillBtn:active { transform: translateY(3px) scale(.94); box-shadow: 0 1px 0 rgba(90, 70, 58, .16), 0 4px 10px rgba(30, 15, 8, .25); }
.pillBtn.primary { background: var(--coral); color: #fff; box-shadow: 0 4px 0 var(--coral-d), 0 12px 24px rgba(220, 90, 68, .4); }
.pillBtn.primary:active { box-shadow: 0 1px 0 var(--coral-d), 0 4px 10px rgba(220, 90, 68, .3); }
#shareTip { margin: 0; text-align: center; font-family: var(--body); font-weight: 700; font-size: 13px; line-height: 1.4; color: rgba(255, 250, 240, .8); max-width: 320px; }
.ghost { min-height: 44px; padding: 0 18px; border-radius: 999px; font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--cream); }
.ghost:active { transform: scale(.94); }

/* ---------- small screens, motion ---------- */
@media (max-width: 340px) { #dock { gap: 8px; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .live { animation: none; }
  .heart3d { animation-duration: .01s !important; }
}

/* ---------- glass controls, matching the Figma dock ---------- */
:focus-visible { outline: 2px solid rgba(255, 255, 255, .9); outline-offset: 2px; box-shadow: none; }
.chip, .chip.pill, #mute.round { background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .2); box-shadow: none; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; box-sizing: border-box; }
.chip #chipText { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
#mute.round { width: 44px; height: 44px; }
#mute.round:active { box-shadow: none; transform: scale(.92); background: rgba(255, 255, 255, .32); }
#mute svg { color: #fff; } #mute .fill { fill: #fff; }
#mute .wave, #mute .cross { stroke: #fff; }
/* tray: no pointer, and corner radii that nest (outer 28 = 12 gap + card 16; card 16 = 6 gap + picture 10) */
#sheet { border-radius: 28px; }
#sheet::after { display: none; }
.cards { padding: 6px 12px 12px; scroll-padding: 0 12px; gap: 8px; }
.card { border-radius: 16px; padding: 6px 6px 8px; }
.card .pic { border-radius: 10px; }
.card .tag:empty { display: none; }
/* tighter tray: one 10px gutter on every side and between cards; cards share the width equally so the right edge always lines up */
#sheet { padding: 10px 0 0; border-radius: 26px; width: min(calc(100% - 24px), 400px); }
.trayHead { padding: 0 10px 0 16px; }
.trayHead h2 { font-size: 18px; }
.trayHelp { margin: 2px 16px 0; }
.cards { padding: 8px 10px 10px; scroll-padding: 0 10px; gap: 8px; }
.card { flex: 1 0 84px; width: auto; min-width: 0; padding: 6px 6px 8px; }
.card .pic { width: 100%; height: auto; aspect-ratio: 1; }
.card strong { min-height: 0; }
/* follow tray: one row per account */
.card.link { flex: 1 1 0; flex-direction: row; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; text-decoration: none; text-align: left; }
.card.link .pic { flex: none; width: 52px; height: 52px; aspect-ratio: auto; border-radius: 10px; }
.card.link .pic svg { width: 28px; height: 28px; }
.card.link.ig .pic { background: linear-gradient(45deg, #f9ce34, #ee2a7b 55%, #6228d7); }
.card.link.yt .pic { background: #e62117; }
.linkText { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.linkText strong { font-size: 14px; -webkit-line-clamp: 1; }
.linkText small { font-family: var(--body); font-weight: 700; font-size: 11.5px; color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card.link { gap: 8px; padding-right: 8px; }
.linkText small { font-size: 10.5px; letter-spacing: -.01em; }
/* every item card is a quarter of the row, however few there are; the logos sit on the plain picture tile */
.card { flex: 0 0 calc((100% - 24px) / 4); }
.card.link { flex: 1 1 0; }
.card.link.ig .pic, .card.link.yt .pic { background: #fbf1df; }
.card.link.ig .pic img { width: 30px; height: 30px; }
.card.link.yt .pic img { width: 34px; height: 24px; }
.card.link .pic img.flipY { transform: scaleY(-1); }   /* the Figma frame draws this file upside down and flips it */
/* the paw mark is the Figma shape (assets/ui/paw.svg), tinted by the text colour */
.paw { display: block; flex: none; background: currentColor; -webkit-mask: url(../assets/ui/paw.svg) center / contain no-repeat; mask: url(../assets/ui/paw.svg) center / contain no-repeat; }