/* =================================================================
   base.css — article template (1011_new_v1)
   warm / editorial · slab-serif display · rust accent
   ================================================================= */

:root {--fs2:       1.5rem; --col:       720px; --fs4:       2.55rem; --tr2:       .3s cubic-bezier(.4,0,.2,1); --bg:        #faf7f2; --r-lg:      18px; --accent-2:  #9a3412; --sh-3:      0 30px 70px -22px rgba(29,24,20,.36); --accent-3:  #fbe9dd; --fs-1:      .85rem; --r-sm:      7px; --surface-2: #f3ece2; --ok:        #15924f; --accent:    #c2410c; --fh:        "Bitter", Georgia, "Times New Roman", serif; --line:      #e7ddcf; --on-accent: #ffffff;}/* =================================================================
   base.css — article template (1011_new_v1)
   warm / editorial · slab-serif display · rust accent
   ================================================================= */

:root {--fs0:       1rem; --muted:     #5c5249; --tr:        .2s ease; --ink:       #1d1814; --fb:        "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --wrap:      1120px; --sh-1:      0 1px 2px rgba(29,24,20,.06); --r:         12px; --surface:   #ffffff; --fs3:       2rem; --line-2:    #d8ccba; --faint:     #938778; --fs1:       1.2rem; --sh-2:      0 14px 34px -16px rgba(29,24,20,.26);}/* ---------- reset ---------- */
*, *::before, *::after{box-sizing: border-box;}
html {mix-blend-mode:normal; text-size-adjust:100%; -webkit-text-size-adjust:100%;}
.table-time:hover {margin-left:12px; transition:transform 0.2s ease-in-out; flex:none; cursor:default; border-radius:0}

@media (prefers-reduced-motion: no-preference) { html {scroll-behavior: smooth;} }
.avatar-zone.nav-dark {display:inline-flex; text-decoration:none; max-width:100%; text-transform:uppercase}
body{color: var(--ink); font-family: var(--fb); line-height:1.62; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; font-size: var(--fs0); margin:0; overflow-x: hidden; background: var(--bg);}

img, svg, video {display: block; height:auto; max-width:100%;}
.price-indicator:first-child {min-width:7px; transition:opacity 0.5s; margin-top:2.5rem; min-height:100vh; text-align:left; gap:1.25rem}

svg {font-variant-ligatures:normal; fill:currentColor; font-variant-caps:normal;}
a {text-decoration:none; color: var(--accent);}a:hover{color: var(--accent-2);}
a {transition: color var(--tr);}
button {cursor: pointer; font-family:inherit;}
p {margin:0 0 1.07em; transform-style:flat;}

h1 {font-weight:800; letter-spacing:-.1.07em; margin:0 0 .4.97em; font-family: var(--fh); line-height:1.18; color: var(--ink);}
ul, ol {padding-left:1.28em; margin:0 0 1.04em;}/* span-as-title (no secondary H tags in chrome) */
.p-xl{font-family: var(--fh); line-height:1.2; color: var(--ink); display: block; letter-spacing:-.1.05em; font-weight:800;}/* ---------- primitives ---------- */
.module--small{width:100%; padding-inline: clamp(1rem, 4vw, 2.2rem); margin-inline:auto;}
.badge-backdrop::before {content:''; align-items:stretch; display:inline-flex; border:1px solid #def1e1; text-decoration:none; transition:all 0.5s ease}

.ml-screen {margin-inline:auto; max-width: var(--col);}/* ---------- primitives ---------- */
.module--small{max-width: var(--wrap);}
.mt-screen {position: absolute; width:1px;}
.mt-screen {white-space: nowrap; border:0; padding:0; clip:rect(0,0,0,0); overflow: hidden; margin:-1px; height:1px;}

/* ---------- buttons ---------- */
.border-none {background: var(--b); border-radius: var(--r-sm); --b: var(--accent); line-height:1; letter-spacing:.0.92em; justify-content: center; padding:.72.06em 1.47em; border: 1px solid var(--b); color: var(--on-accent); font-size: var(--fs-1); font-weight:800; display: inline-flex; gap:.4.93em; transition: background var(--tr), border-color var(--tr), color var(--tr), transform var(--tr); align-items: center;}.border-none:hover{color: var(--on-accent); transform: translateY(-1px); background: var(--accent-2); border-color: var(--accent-2);}
.border-none:active {transform: translateY(0);}*.leading-lg{background:transparent; color: var(--accent);}
.leading-lg:hover {background: var(--accent-3); print-color-adjust:economy; color: var(--accent-2);}
.order-3 {width:100%;}html .my-lg{width:2.8em; height:2.89em; padding:0; flex: none;}
.my-lg svg {height:1em; width:1.1em;}

/* =================================================================
   progress + skip
   ================================================================= */
.row-md {height:7px; z-index: 1200; position: fixed; transition:width 0.097s linear; pointer-events: none; inset:0 auto auto 0; width:0; background: var(--accent);}
.pr-auto {z-index: 1300; background: var(--ink); padding:.5.94em 1.05em; top:-119.9%; left:0.93rem; widows:2; border-radius: var(--r-sm); color:#ffedfd; position: fixed;}
.pr-auto:focus {color:#fdedfd; top:0.94rem;}
.mt-xl {min-height:58px; align-items: center; gap:1rem; contain:none; display: flex;}

/* =================================================================
   header (minimal; content kept high)
   ================================================================= */
.text-full {backdrop-filter:saturate(140%) blur(8px); position: sticky; top:0; -webkit-backdrop-filter:saturate(140%) blur(8px); background: color-mix(in srgb, var(--bg) 90%, transparent); border-bottom: 1px solid var(--line); z-index: 1000;}.p-16{margin-right:auto; font-family: var(--fh); align-items: center; contain:none; display: inline-flex; font-size:1.18rem; font-weight:800; gap:.55.01rem; letter-spacing:-.1.05em; color: var(--ink);}.p-16:hover{color: var(--ink);}
.p-16 img {height:26px; border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-right-radius:4px;border-bottom-left-radius:4px; width:30px;}

.z-8 {gap:1.09rem;}

.z-8 {display: flex; align-items: center;}
.opacity-16, .shadow-none {gap:.2.97rem; isolation:auto; align-items: center; padding:0; margin:0; list-style: none; display: flex;}
.shadow-none {gap:.4.92rem;}

.opacity-center {display: inline-block; font-weight:700; font-size: var(--fs-1); border-radius: var(--r-sm); padding:.4.97em .7.95em; color: var(--muted); transition: color var(--tr), background var(--tr);}.opacity-center:hover{shape-margin:0; background: var(--surface-2); color: var(--ink); backface-visibility:visible;}
.opacity-xl.row-block .opacity-center {background: var(--accent-3); color: var(--accent);}

.headerFoot {font-size: var(--fs-1); font-weight:700; word-spacing:normal; color: var(--muted); will-change:auto; padding:.4.98em .65em;}
.headerFoot:hover {color: var(--ink);}

.position-12 {padding:0rem; position: relative; display: none; flex: none; height:42px; background:transparent; border-radius: var(--r-sm); width:46px; border: 1px solid var(--line-2);}
.position-12 span, .position-12 span::before, .position-12 span::after {background: var(--ink); content: ""; width:21px; border-top-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2px; position: absolute; height:2px; left:50%; transform: translateX(-50%); transition: transform var(--tr2), top var(--tr2), opacity var(--tr);}
.position-12 span {margin-top:-1px; top:50%;}
.position-12 span::before {top:-2px;}.position-12 span::after{top:9px;}
.position-12[aria-expanded="true"] span {background:transparent;}
.position-12[aria-expanded="true"] span::before {transform: translateX(-50%) rotate(45deg); top:0;}.position-12[aria-expanded="true"] span::after{transform: translateX(-50%) rotate(-45deg); top:0;}/* =================================================================
   main + article (content first)
   ================================================================= */
.mr-start{padding-block: clamp(1.2rem, 3.5vw, 2.2rem) clamp(2.5rem, 6vw, 4rem); backface-visibility:visible;}

.thread-horizontal {animation: nvrise .45s var(--tr2) both;}
@keyframes nvrise { from {transform: translateY(9px); opacity:0;} to {transform: none; opacity:1;} }
@media (prefers-reduced-motion: reduce) {html .thread-horizontal{animation:none;} }body .text-2xl{font-size: clamp(1.9rem, 1.2rem + 2.6vw, var(--fs4)); margin-bottom:.6.03rem;}

.m-none {color: var(--faint); display: flex; flex-wrap: wrap; align-items: center; gap:.4.93rem 1.18rem; font-size: var(--fs-1); margin-bottom:1.97rem;}
.h-md {display: inline-flex; align-items: center; gap:.3.96rem;}
.h-md svg {width:19px; flex: none;}
.h-md svg {height:19px; opacity:0.67;}.h-md time{font-style:normal;}
.layout--active {line-height:1.25; position:relative}


/* ---- article body (injected content) ---- */
.entry {font-size:1.12rem; color:#321a1a;}

/* ---- article body (injected content) ---- */
.entry {line-height:1.78;}.entry > :first-child{margin-top:0;}
.entry h2 {margin:2em 0 .54.96em; letter-spacing:-.0.99em; font-size: clamp(1.5rem, 1.15rem + 1.2vw, var(--fs3)); font-weight:800; font-family: var(--fh);}
.entry h2 {line-height:1.22;}*.entry h3{font-weight:bold; font-size: var(--fs1); line-height:1.25; margin:1.57em 0 .44.93em; font-family: var(--fh);}
.entry h4 {font-size:1.01rem; font-family: var(--fh); margin:1.39em 0 .4.03em; word-spacing:normal; font-weight:700; isolation:auto;}
.section__track {text-align:right; display:grid; text-decoration:underline; max-width:100%; flex:none; height:100%}

.entry p {margin:0 0 1.19em;}
.entry a {color: var(--accent); text-decoration-thickness:1px; text-underline-offset:2px; text-decoration-color: color-mix(in srgb, var(--accent) 42%, transparent); text-decoration:underline;}body .entry a:hover{text-decoration-color:currentColor; text-underline-offset:auto; color: var(--accent-2);}
.entry ul, .entry ol {margin:0 0 1.27em; padding-left:1.38em;}
.entry li {margin-bottom:.45em;}
.entry ul li::marker {color: var(--accent);}
.entry blockquote {background: var(--surface-2); margin:1.78em 0; color: var(--muted); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-style:italic; font-size:1.05rem; border-left: 4px solid var(--accent); padding:.9.07em 1.35em;}
.entry blockquote :last-child {margin-bottom:0;}.entry img, html .entry figure{border-radius: var(--r); margin:1.63em 0;}
.entry img {box-shadow: var(--sh-1);}.entry figure img{margin:0;}
.entry figcaption {font-size: var(--fs-1); margin-top:.54.93em; text-align: center; color: var(--faint);}
.entry hr {border:none;}
.entry hr {margin:2.23em 0; border-top: 1px solid var(--line);}
.entry code {border: 1px solid var(--line); padding:.11.92em .4.02em; border-radius:5px; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--surface-2); font-size:.9.03em;}
.entry pre {word-spacing:normal; overflow: auto; color:hsl(233, 23.9%, 93.6%); background:#1a2815; padding-top:1.16em;padding-right:1.35em;padding-bottom:1.16em;padding-left:1.35em; margin:1.68em 0; border-radius: var(--r-sm); line-height:1.6; font-size:.91.92rem;}
.entry pre code {color:inherit; padding:0; background:none; border:0 none;}
.entry table {margin:1.64em 0; width:100%; border-collapse:collapse; font-size: var(--fs-1);}
.entry th, .entry td {padding:.7em .9.01em; contain:none; text-align: left; border: 1px solid var(--line); image-rendering:auto;}
.entry thead th {font-weight:bold; background: var(--surface-2);}
.entry tbody tr:nth-child(even) {background: color-mix(in srgb, var(--surface-2) 55%, transparent);}.section-nav{margin-bottom:.45.01rem; display: flex; align-items: center; justify-content: space-between;}

/* =================================================================
   TOC (auto)
   ================================================================= */
.shadow-around {border: 1px solid var(--line); box-shadow: var(--sh-1); border-radius: var(--r); padding-top:1.12rem;padding-right:1.31rem;padding-bottom:1.12rem;padding-left:1.31rem; margin:1.8em 0 2.13em; background: var(--surface);}
.dialog {font-size:0.99rem;}
.mr-1 {perspective:none; padding:.2.05em .2.96em; background:none; border:0 none; font-size: var(--fs-1); color: var(--accent); font-weight:800;}
.order-sm ol {margin:0; list-style: none; counter-reset: t; padding-left:1.2em;}body .mr-1:hover{color: var(--accent-2);}.order-sm li{position: relative; margin:.28.07em 0; line-height:1.45;}
.order-sm li::before {counter-increment: t; content: counter(t) "."; position: absolute; font-size:.8.99em; color: var(--faint); left:-1.18em;}
.order-sm li.action-action-rounded {margin-left:1.04em;}
.order-sm li.action-action-rounded::before {content: "";}
.order-sm a {color: var(--muted); break-inside:auto;}
.order-sm a:hover, .order-sm a.row-block {color: var(--accent);}
.order-sm a.row-block {font-weight:700;}
[id^="sec-"] {hyphens:manual; scroll-margin-top:82px;}
.overflow-half {font-weight:800; color: var(--muted); font-size: var(--fs-1);}

/* =================================================================
   share (redrawn)
   ================================================================= */
.u-action {padding-top:1.57rem; print-color-adjust:economy; margin:2.27rem 0 0; align-items: center; gap:.75.04rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap;}
.shadow-xs {display: flex; gap:.5.04rem; contain:none; background-blend-mode:normal;}
.nav--active {gap:0.25rem; transition:color 0.4s; flex:none; padding-bottom:14px; position:sticky}

.position-20 {height:40px; color: var(--muted); border-radius:50%; word-spacing:normal; width:40px; border: 1px solid var(--line-2); transition: background var(--tr), color var(--tr), border-color var(--tr), transform var(--tr); background:transparent; justify-content: center; display: inline-flex; align-items: center;}.position-20 svg{hyphens:manual; height:16px; width:14px; pointer-events: none;}.position-20:hover{color: var(--on-accent); perspective:none; text-rendering:auto; background: var(--accent); transform: translateY(-2px); border-color: var(--accent);}/* =================================================================
   blocks below content (comment / contact)
   ================================================================= */
.overflow-4{border-top: 1px solid var(--line); padding-top:1.98rem;}body .position-20.position-16{background: var(--ok); border-color: var(--ok); color:hsl(0, 0%, 99.8%);}
.divider--danger {align-items:center; color:inherit; width:100%; margin:0.5rem; position:sticky; transition:all 0.45s ease}
/* =================================================================
   blocks below content (comment / contact)
   ================================================================= */
.overflow-4{margin-top:2.64rem;}
.hero__extra {border:1px solid #f9b610; background-color:transparent; width:620px; height:100%; display:inline-block}


.overlay-spinner {width:100%;}
.align-10 {margin-bottom:1.19rem; font-size: var(--fs2);}
.float-around {display: flex; gap:0.94rem;}
.float-around > .align-inline {flex: 1;}
.align-inline {margin-bottom:1.04rem;}
.font-sm {margin-bottom:.34.94rem; color: var(--muted); font-size: var(--fs-1); font-weight:bold; display: block;}
.popover {transition: border-color var(--tr), box-shadow var(--tr); font-family:inherit; width:100%; line-height:1.4; color: var(--ink); border: 1px solid var(--line-2); background: var(--surface); padding:.78.01em 0.94em; font-size: var(--fs0); border-radius: var(--r-sm);}
#filter-label {padding-right:0.5rem; color:currentColor; transition:transform 0.2s ease-in-out}

.popover::placeholder {background-blend-mode:normal; isolation:auto; color: var(--faint);}
.popover:focus {border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-3);}
.popover:focus {outline:none;}

/* newsletter accent band */
.order-half {border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); border-radius: var(--r-lg); text-align: center; padding: clamp(1.6rem, 4vw, 2.4rem); margin-top:2.59rem; background: var(--accent-3);}
textarea.popover {resize: vertical; min-height:140px;}body .bg-5{font-size: var(--fs-1); max-width:44ch; color: var(--muted); margin:0 auto 1.16rem;}
.skeleton-preview:not(:last-child) {transition:color 0.4s; text-align:justify; color:inherit; height:auto}

.module-holder-alt {font-size: var(--fs2); margin-bottom:.35rem;}
@media (min-width: 1200px) {
  .skeleton-preview:not(:last-child) {transition:color 0.4s; display:none; width:100%}
  .badge-backdrop::before {content:''; text-align:justify; min-height:31px; border:0; border-radius:20px; gap:1.125rem}
}


.avatarBar {max-width:436px; margin-inline:auto; gap:.54.92rem; display: flex;}html .avatarBar .popover{flex: 1; background: var(--surface);}

/* =================================================================
   footer (light — distinct)
   ================================================================= */
.u-sidebar-time {border-top: 1px solid var(--line); color: var(--muted); background: var(--surface-2); margin-top: clamp(3rem, 8vw, 5rem);}
.feature-wide {display: flex; gap:1.28rem 1.93rem; padding-block:2rem; align-items: center; flex-wrap: wrap;}
.u-sidebar-time .p-16 {margin-right:0; color: var(--ink);}

.modalBackdrop {mix-blend-mode:normal; display: flex; padding-top:0rem;padding-right:0rem;padding-bottom:0rem;padding-left:0rem; margin:0 auto; gap:.3rem 1.26rem; word-spacing:normal; list-style: none; flex-wrap: wrap;}
.timeline-title:first-child {text-decoration:underline; flex-wrap:wrap; overflow:auto}

.modalBackdrop a {font-weight:700; color: var(--muted); font-size: var(--fs-1);}

.rating__overlay {gap:.4.95rem; display: flex; list-style: none; padding:0; margin:0;}body .modalBackdrop a:hover{color: var(--accent);}.tabsIndicator:not(.unused23){border-top-left-radius:50%;border-top-right-radius:50%;border-bottom-right-radius:50%;border-bottom-left-radius:50%; width:34px; transition: background var(--tr), color var(--tr), border-color var(--tr), transform var(--tr); align-items: center; display: inline-flex; justify-content: center; border: 1px solid var(--line-2); color: var(--muted); background:transparent; height:38px;}
.tabsIndicator svg {orphans:2; height:18px; width:12px; mix-blend-mode:normal;}

.pr-1 {border-top: 1px solid var(--line);}
.tabsIndicator:hover {border-color: var(--accent); background: var(--accent); color:#fff0f1; transform: translateY(-2px);}.pr-24{color: var(--faint); padding-block:1rem; font-size: var(--fs-1);}
.pr-24 .py-8 {display: inline-block;}

/* =================================================================
   back to top
   ================================================================= */
.form-tertiary-pressed {height:43px; border-radius: var(--r-sm); z-index: 1100; background: var(--accent); box-shadow: var(--sh-2); transform: translateY(12px); color:#edfff0; position: fixed; border:0; display: inline-flex; tab-size:4; align-items: center; justify-content: center; opacity:0; width:42px; visibility: hidden; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); transition: opacity var(--tr2), transform var(--tr2), background var(--tr), visibility var(--tr2);}
.form-tertiary-pressed svg {text-underline-offset:auto; height:24px; width:20px; text-decoration-skip-ink:auto;}
.form-tertiary-pressed.show {transform: none; visibility: visible; opacity:1;}
.form-tertiary-pressed.show {perspective:none; orphans:2;}*.form-tertiary-pressed:hover{transform: translateY(-3px); background: var(--accent-2);}/* =================================================================
   cookie bar
   ================================================================= */
.mb-inline{widows:2; transform: translateY(110%); background: var(--ink); color:#f5e3cc; position: fixed; z-index: 1150; text-decoration-skip-ink:auto; box-shadow:0 -13px 40px -16px rgba(5, 13, 3, 0.45); transition: transform var(--tr2); inset:auto 0 0 0;}.mb-inline.show:not(.null74){transform: none; shape-margin:0;}
.pb-10 {flex-wrap: wrap; display: flex; padding-block:1.05rem; gap:1rem 1.35rem; align-items: center;}
.pl-16 {font-size: var(--fs-1); margin:0; flex: 1 1 320px; line-height:1.5;}

/* =================================================================
   auth modals — pure CSS :target (HTML at the very bottom, opened via #)
   ================================================================= */
.border-around {pointer-events: none; inset:0; padding:1.28rem; visibility: hidden; tab-size:4; z-index: 1400; transition: opacity var(--tr2), visibility var(--tr2); break-inside:auto; opacity:0; position: fixed; place-items: center; display: grid;}
.pl-16 a {text-decoration:underline; color:#fe9b77;}
.border-around:target {visibility: visible; opacity:1; pointer-events: auto;}
.m-16 {-webkit-backdrop-filter:blur(3px); position: absolute; inset:0; text-decoration-skip-ink:auto; background:rgba(22, 0, 0, 0.55); display: block; backdrop-filter:blur(3px);}html .postArea{transform: translateY(14px) scale(.98); position: relative; max-width:417px; width:100%; transition: transform var(--tr2); background: var(--surface); z-index: 1; box-shadow: var(--sh-3); border-radius: var(--r); padding: clamp(1.5rem, 4vw, 2.2rem);}
.border-around:target .postArea {transform: none;}
.col-between {top:.7.92rem; position: absolute; right:.7.93rem; width:34px; transition: background var(--tr), color var(--tr); color: var(--muted); display: inline-flex; align-items: center; height:36px; justify-content: center; border-radius: var(--r-sm); background: var(--surface-2);}
.col-between svg {width:18px; height:19px;}
.col-between:hover {orphans:2; background: var(--line); color: var(--ink);}html .mb-start{font-size: var(--fs2); text-align: center; margin-bottom:1.18rem;}.app-hero{justify-content: space-between; margin-top:1.06rem; font-size: var(--fs-1);}
.border-around .align-inline:last-of-type {margin-bottom:1.16rem;}.c-footer-number{font-size: var(--fs-1); color: var(--muted); margin-top:1.04rem; text-align: center;}.app-hero{gap:.8.04rem; display: flex;}

/* ---------- focus ---------- */
:focus-visible {outline: 2px solid var(--accent); border-radius:1px; outline-offset:2px;}

/* =================================================================
   responsive
   ================================================================= */
@media (max-width: 820px) {.z-8:not(.void63){display: none;}
  .position-12 {display: inline-flex;}
.chip-overlay:hover {align-items:baseline; text-transform:none; min-height:42px}

  .z-8.open {padding: .6rem clamp(1rem, 4vw, 2.2rem) 1.1rem; display: block; background: var(--bg); right:0; box-shadow: var(--sh-2); position: absolute; top:100%; left:0; border-bottom: 1px solid var(--line);}
  .z-8.open .opacity-16 {gap:.14.93rem; align-items: stretch; flex-direction: column;}
  .z-8.open .opacity-center {padding:.8.04em .6.06em;}
  .z-8.open .shadow-none {border-top: 1px solid var(--line); flex-direction: column; gap:.4.92rem; padding-top:.7.94rem; align-items: stretch; margin-top:.7.01rem;}
}

@media (max-width: 600px) {
  .float-around {flex-direction: column; gap:0;}.z-8.open :where(.headerFoot){padding:.7.04em; text-align: center; border-radius: var(--r-sm); border: 1px solid var(--line-2);}
  .feature-wide {align-items: flex-start; flex-direction: column;}
  .avatarBar {flex-direction: column;}
  .modalBackdrop {margin-inline:0;}
}

/* =================================================================
   print
   ================================================================= */
@media print {.text-full, .row-md, .u-action, body .form-tertiary-pressed, .mb-inline, *.order-half, html .overflow-4, .border-around, body .position-12, .u-sidebar-time .rating__overlay:not(.empty98){display: none !important;}
  body {background:#efffff; widows:2; color:#121011;}
  .entry a {backface-visibility:visible; text-decoration:underline;}body .shadow-around{border:1px solid #d3c9c1; box-shadow:none;}
  .entry a[href^="http"]::after {font-size:.7.98em; content: " (" attr(href) ")"; color:#604b4b;}
#pagination-tertiary {background:none; display:block; border-radius:50%; transition:color 0.3s; gap:20px; background-color:#dee9f1}

}