/* v17 · calculator sliders */
.c17-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; max-width: 920px; margin: 0 auto 16px; padding: 20px 24px;
    background: #fff; border: 1px solid #E5E7EB; border-radius: 16px; }
.c17-ctl { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 12px; cursor: pointer; }
.c17-name { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6B7280; }
.c17-val { font-size: 22px; font-weight: 900; color: #E31837; white-space: nowrap; }
.c17-ctl input[type=range] { grid-column: 1 / -1; -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 4px 0 0; background: transparent; cursor: pointer; }
.c17-ctl input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: linear-gradient(90deg, #E31837 var(--p, 50%), #E5E7EB var(--p, 50%)); }
.c17-ctl input[type=range]::-moz-range-track { height: 8px; border-radius: 4px; background: linear-gradient(90deg, #E31837 var(--p, 50%), #E5E7EB var(--p, 50%)); }
.c17-ctl input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -10px; border-radius: 50%; background: #fff; border: 3px solid #E31837; box-shadow: 0 4px 12px -4px rgba(227, 24, 55, .6); }
.c17-ctl input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid #E31837; box-shadow: 0 4px 12px -4px rgba(227, 24, 55, .6); }
.c17-ctl input[type=range]:focus-visible { outline: 2px solid #E31837; outline-offset: 4px; border-radius: 8px; }
.c17-hint { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: #9CA3AF; }
.c17-hint span:nth-child(2):not(:last-child) { color: #6B7280; text-align: center; }
/* the ring follows the sliders smoothly */
#calc15.is-in .c15-seg { transition: stroke-dasharray .45s ease, stroke-dashoffset .45s ease; transition-delay: 0s; }
@media (max-width: 900px) {
    .c17-controls { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 18px 20px; margin-bottom: 16px; }
}

/* ---------- v17 · jobs: the four painted workplaces (cards like «Почему Канада») ---------- */
.j17 { --font-display: 'Unbounded', system-ui, sans-serif; margin-bottom: 24px; }
.j17-title { margin-top: 12px; font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 3.2vw, 48px); line-height: 1.05; letter-spacing: -.04em; }
.j17-text { font-size: 17px; }
.j17-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 14px 22px; border-radius: 999px; max-width: 100%; background: #E31837; color: #fff; font-weight: 700; font-size: 15px; text-decoration: none; box-shadow: 0 12px 28px -12px rgba(227, 24, 55, .7); transition: background .2s; }
.w12--red .j17-cta { background: #fff; color: #E31837; box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .35); }
.j17-cta:hover { background: #B71430; color: #fff; }
.j17-cta svg { flex: none; width: 18px; height: 18px; }
.j17-viz { width: 100%; }
.j17-pic { width: 100%; max-width: 560px; aspect-ratio: 3 / 2; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 50px -30px rgba(0, 0, 0, .55), 0 0 0 5px rgba(255, 255, 255, .5); }
.j17-pic img { width: 100%; height: 100%; object-fit: cover; display: block; transform-origin: 50% 60%; }
.is-on .j17-pic img { animation: j17Pan 12s ease-in-out infinite alternate; }
@keyframes j17Pan { from { transform: scale(1.02) translateX(1%); } to { transform: scale(1.12) translateX(-2%); } }
@media (max-width: 900px) {
    .j17 .w12-viz { height: auto; }
    .j17-pic { border-radius: 16px; }
    .j17-title { font-size: 30px; }
    .j17-cta { width: 100%; justify-content: center; }
}

/* ---------- v17 · conditions: the v4 tiles (their pictures loop on their own) ---------- */
.j17-conds { --ink: #0F1923; --red: #E31837; --pine: #2F5D50; --font-display: 'Unbounded', system-ui, sans-serif; padding: 24px; border-radius: 16px; background: #F5C451; }
.j17-conds__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -.03em; color: #0F1923; margin-bottom: 16px; }
.j17-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: start; }
.j17-cond { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 18px; border-radius: 16px; background: #fff; box-shadow: 0 18px 40px -28px rgba(60, 40, 20, .5); }
.j17-cond small { font-size: 13px; font-weight: 600; color: #4A5560; }
.j17-cond b { font-family: var(--font-display); font-weight: 700; font-size: clamp(16px, 1.35vw, 20px); line-height: 1.15; letter-spacing: -.03em; color: #0F1923; overflow-wrap: break-word; }
.j17-cond .cd-art { display: block; width: 100%; height: 76px; max-width: 160px; margin: -4px 0 6px -6px; overflow: visible; }
.j17-more { align-self: flex-start; margin-top: 8px; padding: 6px 12px; border: 1.5px solid #E5E7EB; border-radius: 999px; background: #fff; font-size: 13px; font-weight: 700; color: #0F1923; cursor: pointer; transition: border-color .2s, color .2s; }
.j17-more:hover { border-color: #E31837; color: #E31837; }
.j17-more__close { display: none; }
.j17-cond.is-open .j17-more__open { display: none; }
.j17-cond.is-open .j17-more__close { display: inline; }
.j17-note { margin-top: 8px; font-size: 14px; line-height: 1.5; color: #374151; }
/* the v4 drawings */
.j17-conds .cd-loop path { stroke: var(--red); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.j17-conds .cd-loop .cd-tip { fill: none; }
.j17-conds .cd-loop { transform-box: view-box; transform-origin: 80px 55px; animation: cdSpin 6s linear infinite; }
.j17-conds .cd-calbody { fill: #fff; stroke: var(--ink); stroke-width: 3; }
.j17-conds .cd-calhead { fill: var(--red); }
.j17-conds .cd-ring { fill: var(--ink); }
.j17-conds .cd-num { font-family: var(--font-display); font-weight: 700; font-size: 26px; text-anchor: middle; fill: var(--ink); }
.j17-conds .cd-page { fill: #fff; stroke: var(--ink); stroke-width: 2; transform-box: fill-box; transform-origin: 50% 0; animation: cdPage 2.4s ease-in infinite; }
.j17-conds .cd-col { fill: rgba(22, 15, 10, .1); }
.j17-conds .cd-bar { fill: var(--red); transform-box: fill-box; transform-origin: 50% 100%; animation: cdBar 3.2s cubic-bezier(.3, .8, .3, 1) infinite; animation-delay: calc(var(--k) * .14s); }
.j17-conds .cd-sun { fill: #FFD34E; stroke: var(--ink); stroke-width: 2; }
.j17-conds .cd-h40 { font-family: var(--font-display); font-weight: 700; font-size: 18px; text-anchor: start; fill: var(--ink); }
.j17-conds .cd-face { fill: #fff; stroke: var(--ink); stroke-width: 3; }
.j17-conds .cd-hand { stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; }
.j17-conds .cd-hand--m { transform-box: fill-box; transform-origin: 0% 50%; animation: cdSpin 2.4s linear infinite; }
.j17-conds .cd-coin { fill: #FFD34E; stroke: var(--ink); stroke-width: 2.5; }
.j17-conds .cd-stack--x .cd-coin { animation: cdCoin 3.2s ease-out infinite; animation-delay: calc(var(--k) * .12s); }
.j17-conds .cd-x { font-family: var(--font-display); font-weight: 700; font-size: 18px; text-anchor: middle; fill: var(--red); }
.j17-conds .cd-roof { fill: none; stroke: var(--red); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.j17-conds .cd-house { fill: #fff; stroke: var(--ink); stroke-width: 3; }
.j17-conds .cd-door { fill: var(--pine); stroke: var(--ink); stroke-width: 2.5; }
.j17-conds .cd-win { fill: #FFD34E; stroke: var(--ink); stroke-width: 2; animation: cdWin 3.2s ease-in-out infinite; }
.j17-conds .cd-keyhead { fill: #FFD34E; stroke: var(--ink); stroke-width: 2.5; }
.j17-conds .cd-keyshaft { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; fill: none; }
.j17-conds .cd-key { transform-box: fill-box; transform-origin: 50% 0%; animation: cdKey 3.2s ease-in-out infinite; }
.j17-conds .cd-hook { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
@keyframes cdSpin { to { rotate: 360deg; } }
@keyframes cdPage { 0%, 55% { scale: 1 1; opacity: 1; } 85% { scale: 1 0; opacity: 1; } 86%, 100% { scale: 1 0; opacity: 0; } }
@keyframes cdBar { 0% { scale: 1 0; } 30%, 80% { scale: 1 1; } 100% { scale: 1 0; } }
@keyframes cdCoin { 0% { opacity: 0; translate: 0 -14px; } 20%, 85% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }
@keyframes cdWin { 0%, 45% { fill: #cfd8d3; } 60%, 100% { fill: #FFD34E; } }
@keyframes cdKey { 0%, 100% { rotate: -14deg; } 50% { rotate: 14deg; } }
@media (max-width: 900px) {
    .j17-conds { padding: 16px; }
    .j17-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .j17-cond { padding: 14px; }
    .j17-cond .cd-art { height: 64px; }
}
@media (prefers-reduced-motion: reduce) { .j17-conds *, .j17-pic img { animation: none !important; } }
/* tiles: the same height in a row, the «Подробнее» button on one line at the bottom; on phones a narrower face so words never break */
.j17-grid { align-items: stretch; }
.j17-more { margin-top: auto; }
.j17-cond b { margin-bottom: 10px; }
@media (max-width: 900px) {
    .j17-cond b { font-family: 'Onest', system-ui, sans-serif; font-weight: 700; font-size: 16px; letter-spacing: -.01em; hyphens: none; -webkit-hyphens: none; overflow-wrap: normal; word-break: normal; }
}

/* ---------- v17 · «Канада — это не только работа»: painted scenes with our hero ---------- */
.l17 { --font-display: 'Unbounded', system-ui, sans-serif; }
.l17--morning { background: linear-gradient(180deg, #FFE1B8 0%, #F8C9A0 100%); color: #0F1923; }
.l17--lake { background: linear-gradient(180deg, #CFE8F2 0%, #A9D3E6 100%); color: #0F1923; }
.l17--autumn { background: #E9813A; color: #fff; }
.l17--night { background: radial-gradient(120% 90% at 70% 20%, #1D3550 0%, #0B1626 70%); color: #FBF6EE; }
.l17-k { margin-top: 10px; font-family: 'Caveat', cursive; font-size: 24px; font-weight: 600; opacity: .85; }
.l17-v { display: block; margin-top: 4px; font-family: var(--font-display); font-weight: 700; font-size: clamp(64px, 7.6vw, 120px); line-height: .9; letter-spacing: -.06em; }
.l17-l { font-size: 18px; }

/* ---------- v17 · «Вы не будете одни»: the v4 motion pictures, looping while their card is on ---------- */
.n17 { --ink: #0F1923; --cream: #FBF6EE; --red: #E31837; --amber: #F5C451; --pine: #2F5D50; --paper: #FFFDF8; --font-display: 'Unbounded', system-ui, sans-serif; --font-text: 'Onest', system-ui, sans-serif; }
.n17 .w12--night { background: radial-gradient(120% 90% at 70% 20%, #1D3550 0%, #0B1626 70%); color: #FBF6EE; }
.n17 .l17-k { font-family: 'Caveat', cursive; }
.n17-v { display: block; margin-top: 10px; font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 3.2vw, 48px); line-height: 1.05; letter-spacing: -.04em; }
.n17 svg text { font-family: var(--font-display); }
.n17 .w12-viz > svg { max-width: 520px; }
/* the map: our cities light up, the routes from home draw again and again */
.n17 .dm-city { transform-box: fill-box; transform-origin: center; }
.is-on .n17-viz--dmap .dm-city { animation: n17Pop 5s cubic-bezier(.3, 1.6, .5, 1) infinite; animation-delay: calc(var(--i) * .12s); }
.is-on .n17-viz--dmap .dm-arc { stroke-dasharray: 1; animation: n17Draw 5s ease-in-out infinite; animation-delay: calc(var(--i) * .12s); }
/* groceries: the bag fills */
.n17 .dg-it { transform-box: fill-box; transform-origin: 50% 100%; }
.is-on .n17-viz--dgroc .dg-it { animation: n17Rise 4.6s cubic-bezier(.3, 1.4, .5, 1) infinite; animation-delay: calc(var(--i) * .15s); }
/* café: the plate breathes, the skewer and the tea come to the table */
.n17 .dc-plov, .n17 .dc-skewer, .n17 .dc-tea, .n17 .dc-bread { transform-box: fill-box; transform-origin: 50% 100%; }
.is-on .n17-viz--dcafe .dc-plov { animation: n17Breath 3s ease-in-out infinite; }
.is-on .n17-viz--dcafe .dc-skewer { animation: n17Bob 3.4s ease-in-out infinite; }
.is-on .n17-viz--dcafe .dc-tea { animation: n17Bob 3.4s ease-in-out -1.2s infinite; }
/* chats: messages arrive one by one */
.n17 .dch-b { transform-box: fill-box; transform-origin: center; }
.is-on .n17-viz--dchat .dch-b { animation: n17Msg 6s cubic-bezier(.3, 1.5, .5, 1) infinite; animation-delay: calc(var(--i) * .45s); }
/* prayer: the clock runs, the door opens and closes */
.n17 .dp-hand { transform-box: fill-box; transform-origin: 50% 100%; }
.is-on .n17-viz--dpray .dp-hand--m { animation: n17Spin 6s linear infinite; }
.is-on .n17-viz--dpray .dp-hand--h { animation: n17Spin 72s linear infinite; }
.n17 .dp-door { transform-box: fill-box; transform-origin: 0% 50%; }
.is-on .n17-viz--dpray .dp-door { animation: n17Door 6s ease-in-out infinite; }
.is-on .n17-viz--dpray .dp-arc { stroke-dasharray: 1; animation: n17Draw 6s ease-in-out infinite; }
/* services in Russian: «Привет!» and the four helpers around it */
.n17 .ds-hi, .n17 .ds-badge { transform-box: fill-box; transform-origin: center; }
.is-on .n17-viz--dserv .ds-hi { animation: n17Breath 2.6s ease-in-out infinite; }
.is-on .n17-viz--dserv .ds-badge { animation: n17Pop 5s cubic-bezier(.3, 1.6, .5, 1) infinite; animation-delay: calc(var(--i) * .2s + .3s); }
.is-on .n17-viz--dserv .ds-link { stroke-dasharray: 1; animation: n17Draw 5s ease-in-out infinite; animation-delay: calc(var(--i) * .2s); }
/* multicultural: the circle of people turns slowly around our leaf */
.n17 .dm-p, .n17 .dm-core { transform-box: fill-box; transform-origin: 50% 100%; }
.is-on .n17-viz--dmulti .dm-p { animation: n17Bob 3s ease-in-out infinite; animation-delay: calc(var(--i) * -.3s); }
.is-on .n17-viz--dmulti .dm-core { transform-origin: center; animation: n17Breath 2.4s ease-in-out infinite; }

@keyframes n17Pop { 0%, 4% { scale: 0; } 14%, 88% { scale: 1; } 98%, 100% { scale: 0; } }
@keyframes n17Draw { 0%, 10% { stroke-dashoffset: 1; } 40%, 88% { stroke-dashoffset: 0; } 98%, 100% { stroke-dashoffset: 1; } }
@keyframes n17Rise { 0%, 4% { translate: 0 40px; opacity: 0; } 16%, 88% { translate: 0 0; opacity: 1; } 98%, 100% { translate: 0 0; opacity: 0; } }
@keyframes n17Breath { 50% { scale: 1.05; } }
@keyframes n17Bob { 50% { translate: 0 -6px; } }
@keyframes n17Msg { 0%, 3% { scale: .3; opacity: 0; } 9%, 90% { scale: 1; opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes n17Spin { to { rotate: 360deg; } }
@keyframes n17Door { 0%, 20% { scale: 1 1; } 45%, 75% { scale: .62 1; } 95%, 100% { scale: 1 1; } }
@media (max-width: 900px) {
    .l17-v { font-size: 60px; }
    .n17-v { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) { .n17 *, .l17 * { animation: none !important; } }

/* the v4 drawing styles, as they were */
.n17 .d-shadow { fill: rgba(15, 25, 35, .14); }
.n17 .d-table, .n17 .d-floor { stroke: currentColor; stroke-width: 4; stroke-linecap: round; opacity: .25; }
.n17 .dm-dot { fill: #fff; opacity: .32; }
.n17 .dm-arc { fill: none; stroke: #FFE7A0; stroke-width: 2.4; stroke-dasharray: 1 1; stroke-dashoffset: var(--o, 0); stroke-linecap: round; }
.n17 .dm-c { fill: #fff; stroke: var(--ink); stroke-width: 2.5; }
.n17 .dm-ping { fill: #fff; opacity: .5; animation: dmPing 2.4s ease-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
.n17 .dm-city:nth-child(2n) .dm-ping { animation-delay: -1.2s; }
.n17 .dm-t { font-family: Onest, sans-serif; font-weight: 700; font-size: 13px; fill: #fff; }
.n17 .dg-bag { fill: #C9A06A; stroke: var(--ink); stroke-width: 4; stroke-linejoin: round; }
.n17 .dg-fold { stroke: rgba(15, 25, 35, .25); stroke-width: 3; }
.n17 .dg-handle { fill: none; stroke: var(--ink); stroke-width: 7; stroke-linecap: round; }
.n17 .dg-leaf { color: #fff; }
.n17 .dg-bread { fill: #E3A857; stroke: var(--ink); stroke-width: 3.5; }
.n17 .dg-cut { stroke: #A8692A; stroke-width: 3.5; stroke-linecap: round; }
.n17 .dg-milk { fill: #fff; stroke: var(--ink); stroke-width: 3.5; stroke-linejoin: round; }
.n17 .dg-milklab { fill: #3B82C4; }
.n17 .dg-drop { fill: #fff; }
.n17 .dg-jar { fill: #F7D7C9; stroke: var(--ink); stroke-width: 3.5; }
.n17 .dg-lid { fill: var(--red); stroke: var(--ink); stroke-width: 3; }
.n17 .dg-berry { fill: var(--red); }
.n17 .dg-apple { fill: #E31837; stroke: var(--ink); stroke-width: 3.5; }
.n17 .dg-stem { fill: none; stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; }
.n17 .dc-plateb { fill: #fff; stroke: var(--ink); stroke-width: 4; }
.n17 .dc-platei { fill: none; stroke: rgba(15, 25, 35, .15); stroke-width: 3; }
.n17 .dc-plov { fill: #E9A23B; stroke: var(--ink); stroke-width: 3.5; stroke-linejoin: round; }
.n17 .dc-rice { fill: #FFF3D6; }
.n17 .dc-carrot { stroke: #D9531E; stroke-width: 5; stroke-linecap: round; }
.n17 .dc-steam path { fill: none; stroke: rgba(255, 255, 255, .85); stroke-width: 5; stroke-linecap: round; animation: dcSteam 2.6s ease-in-out infinite; }
.n17 .dc-steam path:nth-child(2) { animation-delay: -.9s; }
.n17 .dc-steam path:nth-child(3) { animation-delay: -1.7s; }
.n17 .dc-stick { stroke: #7A4B2F; stroke-width: 6; stroke-linecap: round; }
.n17 .dc-meat { fill: #8C3B1E; stroke: var(--ink); stroke-width: 3; }
.n17 .dc-onion { fill: none; stroke: #fff; stroke-width: 4; }
.n17 .dc-glass { fill: rgba(255, 255, 255, .55); stroke: var(--ink); stroke-width: 3.5; stroke-linejoin: round; }
.n17 .dc-teaw { fill: #B4471E; }
.n17 .dc-saucer { fill: #fff; stroke: var(--ink); stroke-width: 3; }
.n17 .dch-body { fill: var(--ink); stroke: #fff; stroke-width: 3; }
.n17 .dch-screen { fill: #FBF6EE; }
.n17 .dch-top { fill: var(--red); }
.n17 .dch-av { color: var(--red); }
.n17 .dch-name { fill: #fff; }
.n17 .dch-name--s { opacity: .6; }
.n17 .dch-in { fill: #fff; stroke: rgba(15, 25, 35, .15); stroke-width: 2; }
.n17 .dch-out { fill: var(--red); }
.n17 .dch-l { fill: rgba(15, 25, 35, .22); }
.n17 .dch-l--w { fill: rgba(255, 255, 255, .7); }
.n17 .dch-typing circle { fill: rgba(15, 25, 35, .5); animation: dchDot 1.2s ease-in-out infinite; transform-box: fill-box; }
.n17 .dch-typing circle:nth-of-type(2) { animation-delay: .15s; }
.n17 .dch-typing circle:nth-of-type(3) { animation-delay: .3s; }
.n17 .dch-badge { fill: #3B82C4; stroke: #fff; stroke-width: 3; }
.n17 .dch-pl { fill: #fff; stroke: #fff; stroke-width: 2; stroke-linejoin: round; }
.n17 .dch-heart path { fill: var(--red); stroke: #fff; stroke-width: 2.5; }
.n17 .dch-fly, .n17 .dch-heart { animation: dchFloat 3.4s ease-in-out infinite; }
.n17 .dch-heart { animation-delay: -1.6s; }
.n17 .dp-face { fill: #fff; stroke: var(--ink); stroke-width: 5; }
.n17 .dp-tick { stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
.n17 .dp-arc { fill: none; stroke: var(--amber); stroke-width: 12; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: var(--o, 0); }
.n17 .dp-hand { stroke: var(--ink); stroke-width: 7; stroke-linecap: round; }
.n17 .dp-hand--m { stroke-width: 5; }
.n17 .dp-pin { fill: var(--red); }
.n17 .dp-frame { fill: #1F3F36; stroke: #fff; stroke-width: 4; }
.n17 .dp-light { fill: #FFE7A0; }
.n17 .dp-leaf { fill: #FBF6EE; stroke: var(--ink); stroke-width: 4; }
.n17 .dp-knob { fill: var(--amber); stroke: var(--ink); stroke-width: 2.5; }
.n17 .dp-sign { fill: #fff; stroke: var(--ink); stroke-width: 3; }
.n17 .dp-rug { fill: var(--red); }
.n17 .dp-fringe { stroke: var(--red); stroke-width: 2.5; stroke-linecap: round; }
.n17 .fslide--pine .d-floor { color: #fff; }
.n17 .ds-link { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: 3; stroke-dasharray: 1 1; stroke-dashoffset: var(--o, 0); }
.n17 .ds-disc { fill: #fff; stroke: var(--amber); stroke-width: 4; }
.n17 .ds-badge { fill: var(--red); }
.n17 .ds-stroke { fill: none; stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.n17 .ds-aa { font-family: var(--font-display); font-weight: 700; font-size: 22px; fill: var(--ink); }
.n17 .ds-bubble { fill: var(--red); stroke: #fff; stroke-width: 4; stroke-linejoin: round; }
.n17 .ds-txt { font-family: var(--font-display); font-weight: 700; font-size: 40px; fill: #fff; letter-spacing: -.03em; }
.n17 .ds-badge { animation: dchFloat 3.6s ease-in-out infinite; }
.n17 .dm-orbit { fill: none; stroke: rgba(15, 25, 35, .2); stroke-width: 3; stroke-dasharray: .012 .01; }
.n17 .dm-sh, .n17 .dm-hd { stroke: var(--ink); stroke-width: 3; }
.n17 .dm-coreb { fill: var(--red); }
.n17 .dm-leaf { color: #fff; }
.n17 .dm-p { animation: dchFloat 3s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
    .n17 .dm-ping, .n17 .dc-steam path, .n17 .dch-typing circle, .n17 .dch-fly, .n17 .dch-heart, .n17 .ds-badge, .n17 .dm-p { animation: none; }
}
.n17 .dc-lamb { fill: #8C3B1E; stroke: var(--ink); stroke-width: 3; }
@media (max-width: 899px) {
    .n17 .dm-t { font-size: 18px; }
    .n17 .dm-c { stroke-width: 3; }
}
.n17 .dc-breadb { fill: #E3A857; stroke: var(--ink); stroke-width: 3.5; }
.n17 .dc-breadin { fill: #F2C27C; stroke: rgba(15, 25, 35, .25); stroke-width: 2.5; }
.n17 .dc-seed { fill: #7A4B2F; }
.n17 .dc-ring { fill: none; stroke: #7A4B2F; stroke-width: 4; }
.n17 .dch-hbadge { fill: #fff; stroke: #fff; stroke-width: 3; }
.n17 .dch-heart path { fill: var(--red); stroke: none; }
.n17 .dg-appleleaf { fill: #4C8A3F; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
@keyframes dchDot { 50% { translate: 0 -4px; opacity: 1; } }
@keyframes dchFloat { 50% { translate: 0 -10px; } }
@keyframes dmPing { from { scale: 1; opacity: .55; } to { scale: 3.2; opacity: 0; } }
@keyframes dcSteam { 0% { opacity: 0; translate: 0 14px; } 40% { opacity: .9; } 100% { opacity: 0; translate: 0 -16px; } }.n17 svg text { text-anchor: middle; font-weight: 700; }