:root {
  --ink: #171a22;
  --muted: #6f7480;
  --line: #e8e9ed;
  --paper: #fffdf8;
  --mint: #c7f6df;
  --blue: #4567ec;
  --coral: #fa876a;
  --yellow: #ffd655;
  --lavender: #ddd7ff;
  --shadow: 0 18px 45px rgba(24, 29, 40, 0.08);
  --roulette-green: #0f6849;
  --roulette-green-hover: #0b5a3f;
  --roulette-wheel-label: #172019;
  --roulette-hub: #0f6849;
  font-family: Inter, Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--paper); }
body { margin: 0; min-height: 100vh; background: var(--paper); }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(15, 104, 73, .28);
  outline-offset: 3px;
}

.site-header {
  width: min(1180px, calc(100% - 48px));
  height: 84px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 17px; letter-spacing: -0.7px; }
.brand-mark { color: var(--blue); font-size: 28px; line-height: .7; }
.site-header nav { display: flex; gap: 8px; }
.site-header nav a { padding: 9px 12px; color: #555b68; font-size: 14px; font-weight: 700; border-radius: 99px; }
.site-header nav a:hover, .site-header nav a[aria-current="page"] { color: var(--ink); background: #f0f1f3; }
.language-selector { max-width: 76px; padding: 7px 4px; color: #555b68; border: 0; border-radius: 8px; background: transparent; font-size: 12px; font-weight: 700; outline: none; }
.language-selector:hover, .language-selector:focus { background: #f0f1f3; }
.theme-toggle { display: grid; flex: 0 0 auto; place-items: center; width: 36px; height: 36px; padding: 0; color: #555b68; border: 0; border-radius: 9px; background: transparent; transition: color .18s ease, background-color .18s ease, transform .18s ease; }
.theme-toggle:hover { color: var(--ink); background: #f0f1f3; }
.theme-toggle:active { transform: scale(.95); }
.theme-toggle:focus-visible { outline: 3px solid rgba(69,103,236,.24); outline-offset: 2px; }
.theme-icon { grid-area: 1 / 1; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-icon-sun { display: none; }
[data-theme="dark"] .theme-icon-moon { display: none; }
[data-theme="dark"] .theme-icon-sun { display: block; }

.eyebrow { margin: 0 0 13px; color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: 1.7px; }
.home-hero { width: min(1024px, calc(100% - 48px)); margin: 70px auto 66px; text-align: center; }
.home-hero h1 { margin: 0; font-size: clamp(42px, 6vw, 72px); line-height: 1.12; letter-spacing: -4px; }
.home-hero h1 em { position: relative; color: var(--blue); font-style: normal; }
.home-hero h1 em::after { content: ""; position: absolute; height: 9px; background: var(--mint); left: 0; right: 0; bottom: 3px; z-index: -1; transform: rotate(-1deg); }
.home-intro { max-width: 435px; margin: 22px auto 38px; color: var(--muted); line-height: 1.7; font-size: 16px; word-break: keep-all; }
.tool-cards { display: grid; max-width: 700px; margin: 0 auto; grid-template-columns: repeat(2, 1fr); gap: 14px; text-align: left; }
.tool-card { position: relative; min-height: 253px; padding: 24px; overflow: hidden; border-radius: 18px; transition: transform .2s ease, box-shadow .2s ease; }
.tool-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.ladder-card { background: var(--mint); }
.roulette-card { background: var(--lavender); }
.tool-card-number { display: block; color: rgba(23, 26, 34, .45); font-size: 11px; font-weight: 800; }
.tool-icon { position: absolute; top: 30px; right: 25px; display: grid; place-items: center; width: 57px; height: 57px; border: 2px solid var(--ink); border-radius: 50%; font-size: 33px; font-weight: 400; }
.ladder-card .tool-icon { border-radius: 11px; }
.tool-preview { position: absolute; top: 25px; right: 25px; width: 120px; height: 94px; pointer-events: none; }
.ladder-preview { overflow: hidden; border-radius: 11px; background: rgba(255,255,255,.42); }
.ladder-preview i { position: absolute; top: 13px; bottom: 10px; width: 2px; background: #4c7967; opacity: .9; }
.ladder-preview i:nth-of-type(1) { left: 17px; }
.ladder-preview i:nth-of-type(2) { left: 48px; }
.ladder-preview i:nth-of-type(3) { left: 79px; }
.ladder-preview i:nth-of-type(4) { left: 109px; }
.ladder-preview b { position: absolute; height: 2px; background: #4c7967; }
.ladder-preview .rung-one { top: 27px; left: 17px; width: 31px; }
.ladder-preview .rung-two { top: 45px; left: 48px; width: 31px; }
.ladder-preview .rung-three { top: 66px; left: 17px; width: 31px; }
.ladder-preview .rung-four { top: 75px; left: 79px; width: 30px; }
.roulette-preview { display: grid; place-items: center; border-radius: 50%; background: conic-gradient(from -10deg, #fa876a 0 16.6%, #ffd655 16.6% 33.2%, #5d84ed 33.2% 49.8%, #54b993 49.8% 66.4%, #ad80df 66.4% 83%, #f58b70 83% 100%); box-shadow: inset 0 0 0 5px rgba(255,255,255,.7); }
.roulette-preview::before { content: ""; position: absolute; top: -7px; left: 50%; width: 0; height: 0; transform: translateX(-50%); border-right: 9px solid transparent; border-left: 9px solid transparent; border-top: 20px solid var(--ink); }
.roulette-preview i { width: 28px; height: 28px; border-radius: 50%; background: #fffdf8; }
.tool-card strong { display: block; margin-top: 52px; font-size: 25px; letter-spacing: -1.4px; }
.tool-card > span:not(.tool-card-number):not(.tool-icon) { display: block; margin-top: 8px; color: rgba(23,26,34,.68); font-size: 13px; line-height: 1.55; }
.tool-card b { position: absolute; bottom: 24px; left: 24px; font-size: 13px; }
.tool-card i { padding-left: 5px; font-style: normal; }

.ad-slot { display: block; min-height: 90px; background: transparent; }
.ad-home { width: min(728px, calc(100% - 48px)); min-height: 90px; margin: 150px auto 52px; }
.feature-row { width: min(880px, calc(100% - 48px)); margin: 0 auto 55px; padding: 23px 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.feature-row p { margin: 0; text-align: center; color: #5f6570; font-size: 13px; }
.feature-row strong { margin-right: 8px; color: var(--blue); font-size: 11px; }
.site-footer { width: min(1180px, calc(100% - 48px)); margin: auto; padding: 25px 0 33px; display: flex; justify-content: space-between; color: #9297a1; font-size: 12px; }
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 18px; }
.site-footer a:hover, .text-link:hover { text-decoration: underline; }

.policy-page { background: #fff; }
.policy-content { width: min(680px, calc(100% - 48px)); margin: 74px auto 100px; }
.policy-content h1 { margin: 0 0 32px; font-size: clamp(30px, 5vw, 44px); letter-spacing: -2px; }
.policy-content h2 { margin: 43px 0 11px; font-size: 18px; letter-spacing: -1px; }
.policy-content p { color: #555b66; line-height: 1.8; word-break: keep-all; }
.policy-content .policy-date { margin: -17px 0 30px; color: #7c838e; font-size: 13px; }
.policy-content .policy-date strong { color: #3f4652; }
.text-link { display: inline-block; margin-top: 36px; color: var(--blue); font-size: 14px; font-weight: 700; }

/* Shared game layout */
.game-page { background: #f7f7f5; }
.game-page .site-header { background: #f7f7f5; }
.game-main { width: min(1360px, calc(100% - 48px)); margin: 34px auto 66px; }
.game-heading { margin-bottom: 25px; }
.game-heading h1 { margin: 0; font-size: clamp(28px, 4vw, 40px); letter-spacing: -2px; }
.game-heading p { margin: 9px 0 0; color: var(--muted); font-size: 14px; word-break: keep-all; }
.game-layout { display: grid; grid-template-columns: minmax(0, 1fr) 282px 150px 160px; column-gap: 16px; align-items: start; }
.ladder-layout { grid-template-columns: minmax(0, 1fr) 150px 160px; }
.roulette-layout { grid-template-columns: minmax(0, 1fr) 150px 160px; row-gap: 16px; }
.panel, .game-stage, .result-panel { background: #fff; border: 1px solid #eaebe9; border-radius: 16px; }
.panel { padding: 20px; }
.game-setup-panel { grid-column: 2; }
.setup-guide { margin: -6px 0 15px; color: var(--muted); font-size: 12px; line-height: 1.55; word-break: keep-all; }
.count-stepper { display: grid; grid-template-columns: 39px minmax(0, 1fr) 39px; align-items: stretch; gap: 8px; }
.count-entry { min-width: 0; padding: 10px 11px; display: flex; align-items: center; justify-content: space-between; gap: 7px; color: #454b57; border: 1px solid #e0e3e7; border-radius: 10px; background: #fff; font-size: 12px; font-weight: 800; }
.count-entry .count-box { gap: 4px; }
.count-entry .count-box input { width: 38px; color: var(--blue); font-size: 17px; }
.step-button { display: grid; place-items: center; padding: 0; color: #596170; border: 1px solid #dce0e5; border-radius: 10px; background: #f6f7f8; font-size: 25px; font-weight: 500; line-height: 1; }
.step-button:hover { color: var(--blue); border-color: #b8c4f5; background: #edf0ff; }
.step-button:disabled { color: #b9bec5; cursor: not-allowed; background: #f4f5f6; }
.count-help { margin: 8px 0 14px; color: #9298a2; font-size: 10px; line-height: 1.45; }
.panel-heading { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; }
.panel-heading h2 { margin: 0; font-size: 16px; letter-spacing: -1px; }
.panel-heading span { color: var(--muted); font-size: 11px; }
.people-control { padding: 14px; border-radius: 12px; background: #f4f5f4; }
.people-control label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 13px; font-weight: 700; }
.count-box { display: flex; align-items: center; gap: 8px; }
.count-box input { width: 42px; padding: 0; border: 0; background: transparent; font-size: 16px; font-weight: 800; text-align: right; outline: 0; }
.count-box input::-webkit-inner-spin-button, .count-box input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="range"] { width: 100%; height: 4px; accent-color: var(--blue); }
.setup-list { margin-top: 19px; max-height: 385px; overflow: auto; padding-right: 3px; }
.setup-row { display: grid; grid-template-columns: 22px 1fr 1fr; align-items: center; gap: 6px; margin-bottom: 8px; }
.setup-row-single { grid-template-columns: 22px 1fr; }
.setup-row .index { display: grid; place-items: center; width: 20px; height: 20px; color: #fff; border-radius: 50%; font-size: 10px; font-weight: 800; }
.setup-row input { min-width: 0; height: 32px; padding: 0 8px; color: var(--ink); border: 1px solid #e3e5e8; border-radius: 7px; outline: none; font-size: 12px; }
.setup-row input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(69,103,236,.1); }
.setup-row input::placeholder { color: #b4b8c0; }
.input-labels { display: grid; grid-template-columns: 22px 1fr 1fr; gap: 6px; margin-bottom: 7px; color: #969ba4; font-size: 10px; }
.input-labels.single { grid-template-columns: 22px 1fr; }
.action-row { display: flex; gap: 8px; margin-top: 17px; }
.button { min-height: 42px; padding: 0 14px; border: 0; border-radius: 9px; font-size: 13px; font-weight: 800; transition: filter .2s ease, transform .2s ease; }
.button:hover { filter: brightness(.96); }
.button:active { transform: translateY(1px); }
.button.primary { flex: 1; color: #fff; background: var(--blue); }
.button.secondary { color: #4f5560; background: #eceeec; }
.button:disabled { cursor: not-allowed; opacity: .55; }
.ad-rail { grid-column: 4; min-height: 600px; position: sticky; top: 20px; }
.ladder-layout .ad-rail { grid-column: 3; }
.roulette-layout .game-stage { grid-column: 1; grid-row: 1; }
.roulette-layout .game-setup-panel { grid-column: 1; grid-row: 2; }
.roulette-layout .ad-rail { grid-column: 3; grid-row: 1 / span 2; }
.game-stage { grid-column: 1; min-height: 572px; overflow: hidden; }
.stage-topbar { min-height: 78px; padding: 20px 22px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #eef0ef; }
.stage-topbar h2 { margin: 0; font-size: 15px; letter-spacing: -.8px; }
.stage-topbar p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.stage-actions { display: flex; align-items: center; gap: 10px; }
.ladder-count-control { display: flex; align-items: center; overflow: hidden; height: 32px; border: 1px solid #dce0e5; border-radius: 8px; background: #fff; }
.ladder-count-control button { width: 30px; height: 100%; padding: 0; color: #69717e; border: 0; background: #f4f5f6; font-size: 19px; line-height: 1; }
.ladder-count-control button:hover { color: var(--blue); background: #edf0ff; }
.ladder-count-control button:disabled { cursor: not-allowed; color: #c7cbd1; }
.ladder-count-control input { width: 33px; padding: 0; color: var(--ink); border: 0; background: #fff; font-size: 13px; font-weight: 800; text-align: center; outline: none; }
.ladder-count-control input::-webkit-inner-spin-button, .ladder-count-control input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.stage-edit-link { padding: 7px 9px; color: #626976; border-radius: 7px; background: #f2f3f5; font-size: 11px; font-weight: 800; white-space: nowrap; }
.stage-edit-link:hover { color: var(--blue); background: #ebeefe; }
.stage-edit-button { padding: 7px 9px; color: #626976; border: 0; border-radius: 7px; background: #f2f3f5; font-size: 11px; font-weight: 800; white-space: nowrap; }
.stage-edit-button:hover { color: var(--blue); background: #ebeefe; }
.stage-message { color: #707680; font-size: 12px; font-weight: 700; }
.stage-message.is-active { color: var(--blue); }
.game-result { width: calc(100% - 342px); margin-top: 20px; }
.ad-mobile { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Ladder */
.ladder-stage { display: flex; flex-direction: column; }
.ladder-scroll { flex: 1; overflow-x: auto; padding: 22px 16px 14px; }
.ladder-canvas { position: relative; min-width: 520px; min-height: 410px; }
.ladder-canvas svg { display: block; width: 100%; min-height: 410px; overflow: visible; }
.ladder-canvas.is-locked { opacity: .62; filter: grayscale(.22); }
.ladder-canvas.is-locked svg { pointer-events: none; }
.ladder-board-inputs { position: absolute; inset: 0; pointer-events: none; }
.ladder-board-input { position: absolute; z-index: 2; width: 76px; height: 34px; padding: 0 6px; transform: translateX(-50%); color: var(--ink); border: 1px solid #dce1e7; border-top: 3px solid var(--node-color); border-radius: 9px; background: rgba(255,255,255,.97); box-shadow: 0 2px 7px rgba(29,35,46,.07); font-size: 11px; font-weight: 700; text-align: center; outline: none; pointer-events: auto; }
.ladder-board-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(69,103,236,.13); }
.ladder-board-input::placeholder { color: #9ea4ad; font-weight: 600; }
.ladder-board-outcome { top: 370px; height: 30px; border-radius: 8px; font-size: 10px; }
.ladder-board-input.is-playable { cursor: pointer; border-color: transparent; background: transparent; box-shadow: none; }
.ladder-board-input.is-playable:focus { box-shadow: 0 0 0 3px rgba(69,103,236,.16); }
.ladder-line { stroke: #bec5ce; stroke-width: 2.2; }
.ladder-rung { stroke: #7d8795; stroke-width: 2.2; stroke-linecap: round; }
.ladder-mask-panel { fill: #f3f5f5; stroke: #e2e6e7; stroke-width: 1.5; stroke-dasharray: 5 6; }
.ladder-mask-title { fill: #626a75; font-size: 14px; font-weight: 800; text-anchor: middle; }
.ladder-mask-hint { fill: #969da5; font-size: 11px; text-anchor: middle; }
.ladder-path { fill: none; stroke: var(--coral); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 2px rgba(250,135,106,.22)); }
.ladder-node { cursor: pointer; transition: filter .2s ease; }
.ladder-node:hover { filter: brightness(.93); }
.ladder-node-text { fill: var(--ink); text-anchor: middle; font-size: 12px; font-weight: 800; pointer-events: none; }
.ladder-node-subtext { fill: #767d89; text-anchor: middle; font-size: 10px; pointer-events: none; }
.ladder-bottom .ladder-node-text { font-size: 11px; }
.ladder-help { padding: 0 22px 20px; color: #828791; font-size: 11px; text-align: center; }
.ladder-result { min-height: 81px; margin: 0; padding: 15px; display: flex; align-items: center; justify-content: center; text-align: center; background: #fff6e9; border-radius: 12px; border: 1px solid #ffe8c5; }
.ladder-result p { margin: 0; color: #6e5c42; font-size: 13px; line-height: 1.6; }
.ladder-result strong { color: #e66242; }
.result-modal[hidden] { display: none; }
.result-modal { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 24px; }
.result-modal-backdrop { position: absolute; inset: 0; background: rgba(20, 25, 33, .42); backdrop-filter: blur(3px); }
.result-modal-card { position: relative; width: min(480px, 100%); max-height: min(680px, calc(100vh - 48px)); padding: 25px; overflow: auto; border: 1px solid #e5e7eb; border-radius: 18px; background: #fffdf9; box-shadow: 0 20px 70px rgba(18, 24, 34, .27); }
.result-modal-header { display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid #eceef0; }
.result-modal-header .eyebrow { margin-bottom: 7px; }
.result-modal-header h2 { margin: 0; font-size: 23px; letter-spacing: -1.3px; }
.modal-close { display: grid; place-items: center; width: 33px; height: 33px; padding: 0; color: #69717c; border: 0; border-radius: 50%; background: #f1f2f4; font-size: 23px; line-height: 1; }
.modal-close:hover { color: var(--ink); background: #e7e9ed; }
.all-results-list { margin: 13px 0 18px; padding: 0; list-style: none; }
.all-results-list li { display: grid; grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 48px; padding: 6px 5px; border-bottom: 1px solid #eef0f1; }
.all-results-list li:last-child { border-bottom: 0; }
.all-result-name, .all-result-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 800; }
.all-result-name { color: #333944; text-align: right; }.all-result-value { color: #e46545; }
.all-result-arrow { color: #8b929c; font-size: 18px; text-align: center; }
.restart-button { width: 100%; min-height: 46px; color: #4d5664; border: 1px solid #dce0e5; border-radius: 10px; background: #fff; font-size: 13px; font-weight: 800; }
.restart-button:hover { color: var(--blue); border-color: #b7c3f6; background: #f4f6ff; }
.ladder-guide { width: calc(100% - 342px); margin-top: 64px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ladder-guide article, .ladder-faq { padding: 23px; border: 1px solid #e6e9e8; border-radius: 14px; background: #fff; }
.ladder-guide .eyebrow, .ladder-faq .eyebrow { margin-bottom: 8px; }
.ladder-guide h2, .ladder-faq h2 { margin: 0 0 12px; font-size: 18px; letter-spacing: -1px; }
.ladder-guide p:not(.eyebrow), .ladder-guide li, .ladder-faq p { margin: 0; color: #676e79; font-size: 13px; line-height: 1.7; word-break: keep-all; }
.ladder-guide ol { margin: 0; padding-left: 20px; }
.ladder-guide li + li { margin-top: 5px; }
.ladder-faq { width: calc(100% - 342px); margin-top: 16px; }
.ladder-faq details { padding: 14px 0; border-top: 1px solid #edf0ef; }
.ladder-faq summary { cursor: pointer; color: #373e49; font-size: 14px; font-weight: 800; }
.ladder-faq details p { margin: 9px 0 0; }
.mapping-list { margin: 0; padding: 0; list-style: none; }
.mapping-list li { padding: 9px 0; border-bottom: 1px solid #eff0f1; color: #686e78; font-size: 12px; line-height: 1.3; }
.mapping-list li:last-child { border-bottom: 0; }
.mapping-list b { color: var(--ink); }
.mapping-list .mapping-arrow { color: var(--coral); margin: 0 5px; }
.result-panel { padding: 17px 16px; }
.result-panel h2 { margin: 0 0 11px; font-size: 14px; letter-spacing: -.8px; }
.result-empty { margin: 0; color: #a0a5ae; font-size: 12px; line-height: 1.5; }

/* Roulette */
.roulette-stage { display: flex; flex-direction: column; justify-content: space-between; }
.roulette-board { position: relative; display: grid; place-items: center; flex: 1; min-height: 440px; padding: 31px 18px 17px; }
.wheel-wrap { position: relative; width: min(390px, 78vw); aspect-ratio: 1; }
.wheel-wrap.is-locked { opacity: .78; filter: saturate(.68); }
#roulette-wheel { display: block; width: 100%; height: 100%; border: 7px solid #fff; border-radius: 50%; box-shadow: 0 10px 26px rgba(22,27,37,.14), inset 0 0 0 1px rgba(0,0,0,.1); will-change: transform; }
.roulette-pointer { position: absolute; z-index: 2; top: -8px; left: 50%; width: 0; height: 0; transform: translateX(-50%); border-left: 16px solid transparent; border-right: 16px solid transparent; border-top: 37px solid var(--ink); filter: drop-shadow(0 2px 1px rgba(0,0,0,.16)); }
.roulette-center { position: absolute; top: 50%; left: 50%; z-index: 1; display: grid; place-items: center; width: 61px; height: 61px; transform: translate(-50%, -50%); color: #fff; border: 5px solid #fff; border-radius: 50%; background: var(--ink); font-size: 11px; font-weight: 900; letter-spacing: .3px; pointer-events: none; }
.roulette-action { margin: 0 21px 22px; }
.roulette-action .button { width: 100%; color: #fff; background: var(--ink); }
.roulette-result { min-height: 104px; margin: 0; padding: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #e3dfff; border-radius: 12px; background: #f3f1ff; text-align: center; }
.roulette-result .tiny { margin: 0 0 4px; color: #85809d; font-size: 11px; }
.roulette-result strong { color: #4e4772; font-size: 22px; letter-spacing: -1px; }
.roulette-result strong.is-placeholder { color: #8e8b9b; font-size: 14px; font-weight: 600; }

/* Dark theme */
:root[data-theme="dark"] {
  --ink: #eef1f7;
  --muted: #a8afbc;
  --line: #343944;
  --paper: #14171c;
  --mint: #1d4939;
  --lavender: #353159;
  --shadow: 0 18px 45px rgba(0, 0, 0, .28);
  --roulette-green: #78bea0;
  --roulette-green-hover: #8bcdae;
  --roulette-wheel-label: #172019;
  --roulette-hub: #337d60;
  color-scheme: dark;
}

[data-theme="dark"],
[data-theme="dark"] body,
[data-theme="dark"] .policy-page,
[data-theme="dark"] .game-page,
[data-theme="dark"] .game-page .site-header { background: var(--paper); }
[data-theme="dark"] .site-header nav a,
[data-theme="dark"] .language-selector,
[data-theme="dark"] .theme-toggle { color: #b9c0cc; }
[data-theme="dark"] .site-header nav a:hover,
[data-theme="dark"] .site-header nav a[aria-current="page"],
[data-theme="dark"] .language-selector:hover,
[data-theme="dark"] .language-selector:focus,
[data-theme="dark"] .theme-toggle:hover { color: var(--ink); background: #262a32; }
[data-theme="dark"] .language-selector option { color: var(--ink); background: #20242b; }
[data-theme="dark"] .tool-card-number { color: rgba(238, 241, 247, .55); }
[data-theme="dark"] .tool-card > span:not(.tool-card-number):not(.tool-icon) { color: rgba(238, 241, 247, .72); }
[data-theme="dark"] .ladder-card { background: #1c4938; }
[data-theme="dark"] .roulette-card { background: #37325d; }
[data-theme="dark"] .ladder-preview { background: rgba(255, 255, 255, .08); }
[data-theme="dark"] .ladder-preview i,
[data-theme="dark"] .ladder-preview b { background: #8ecbb0; }
[data-theme="dark"] .roulette-preview { box-shadow: inset 0 0 0 5px rgba(20, 23, 28, .5); }
[data-theme="dark"] .roulette-preview i { background: #1b1f26; }
[data-theme="dark"] .feature-row p,
[data-theme="dark"] .policy-content p { color: #b2b9c5; }
[data-theme="dark"] .policy-content .policy-date { color: #929aa8; }
[data-theme="dark"] .policy-content .policy-date strong { color: #cbd1db; }

[data-theme="dark"] .panel,
[data-theme="dark"] .game-stage,
[data-theme="dark"] .result-panel,
[data-theme="dark"] .ladder-guide article,
[data-theme="dark"] .ladder-faq,
[data-theme="dark"] .faq-section details { color: var(--ink); border-color: #343943; background: #1d2128; }
[data-theme="dark"] .stage-topbar,
[data-theme="dark"] .result-modal-header,
[data-theme="dark"] .all-results-list li,
[data-theme="dark"] .ladder-faq details,
[data-theme="dark"] .mapping-list li { border-color: #343943; }
[data-theme="dark"] .count-entry,
[data-theme="dark"] .ladder-count-control,
[data-theme="dark"] .ladder-count-control input,
[data-theme="dark"] .setup-row input,
[data-theme="dark"] .ladder-board-input,
[data-theme="dark"] .restart-button { color: var(--ink); border-color: #414754; background: #242830; }
[data-theme="dark"] .count-entry { color: #c8ced8; }
[data-theme="dark"] .step-button,
[data-theme="dark"] .ladder-count-control button,
[data-theme="dark"] .stage-edit-link,
[data-theme="dark"] .stage-edit-button,
[data-theme="dark"] .button.secondary,
[data-theme="dark"] .modal-close { color: #c2c8d2; border-color: #414754; background: #2a2f38; }
[data-theme="dark"] .step-button:hover,
[data-theme="dark"] .ladder-count-control button:hover,
[data-theme="dark"] .stage-edit-link:hover,
[data-theme="dark"] .stage-edit-button:hover,
[data-theme="dark"] .restart-button:hover,
[data-theme="dark"] .modal-close:hover { color: #9db0ff; border-color: #596dbb; background: #30384d; }
[data-theme="dark"] .step-button:disabled,
[data-theme="dark"] .ladder-count-control button:disabled { color: #6d7480; background: #22262d; }
[data-theme="dark"] .setup-row input::placeholder,
[data-theme="dark"] .ladder-board-input::placeholder { color: #747c89; }
[data-theme="dark"] .setup-row input:focus,
[data-theme="dark"] .ladder-board-input:focus { border-color: #7890ff; box-shadow: 0 0 0 3px rgba(93, 121, 240, .2); }
[data-theme="dark"] .stage-message,
[data-theme="dark"] .ladder-help,
[data-theme="dark"] .result-empty,
[data-theme="dark"] .mapping-list li { color: #9da5b2; }

[data-theme="dark"] .ladder-mask-panel { fill: #242930; stroke: #444b57; }
[data-theme="dark"] .ladder-mask-title { fill: #c5cbd4; }
[data-theme="dark"] .ladder-mask-hint { fill: #8f98a6; }
[data-theme="dark"] .ladder-line { stroke: #58616e; }
[data-theme="dark"] .ladder-rung { stroke: #87919f; }
[data-theme="dark"] .ladder-node-subtext { fill: #a6aeba; }
[data-theme="dark"] .ladder-result { border-color: #5a422f; background: #2a211b; }
[data-theme="dark"] .ladder-result p { color: #d7b994; }
[data-theme="dark"] .ladder-result strong,
[data-theme="dark"] .all-result-value,
[data-theme="dark"] .mapping-list .mapping-arrow { color: #ff997c; }
[data-theme="dark"] .ladder-guide p:not(.eyebrow),
[data-theme="dark"] .ladder-guide li,
[data-theme="dark"] .ladder-faq p,
[data-theme="dark"] .faq-section p { color: #aeb5c0; }
[data-theme="dark"] .ladder-faq summary,
[data-theme="dark"] .faq-section summary,
[data-theme="dark"] .all-result-name { color: #e3e6ec; }
[data-theme="dark"] .result-modal-card { color: var(--ink); border-color: #3a404a; background: #1d2128; box-shadow: 0 20px 70px rgba(0, 0, 0, .55); }

[data-theme="dark"] #roulette-wheel { border-color: #242830; box-shadow: 0 10px 28px rgba(0, 0, 0, .38), inset 0 0 0 1px rgba(255, 255, 255, .12); }
[data-theme="dark"] .roulette-center { color: #fff; border-color: #242830; background: #11151b; }
[data-theme="dark"] .roulette-action .button { color: #fff; background: var(--blue); }
[data-theme="dark"] .roulette-result { border-color: #494469; background: #29263d; }
[data-theme="dark"] .roulette-result .tiny { color: #aaa5c4; }
[data-theme="dark"] .roulette-result strong { color: #e7e3ff; }
[data-theme="dark"] .roulette-result strong.is-placeholder { color: #aaa6b8; }
[data-theme="dark"] .site-footer { color: #858d9a; }

@media (prefers-reduced-motion: reduce) {
  .theme-toggle { transition: none; }
}

@media (max-width: 980px) {
  .game-layout { grid-template-columns: minmax(0, 1fr) 260px; }
  .ladder-layout { grid-template-columns: minmax(0, 1fr); }
  .roulette-layout { grid-template-columns: minmax(0, 1fr); }
  .roulette-layout .game-stage, .roulette-layout .game-setup-panel { grid-column: 1; }
  .game-result { width: 100%; }
  .ladder-guide, .ladder-faq { width: 100%; }
  .ad-rail { display: none; }
  .ad-mobile { display: block; width: min(728px, 100%); min-height: 90px; margin: 150px auto 0; }
}

@media (max-width: 700px) {
  .site-header { width: min(100% - 32px, 1180px); height: 68px; }
  .brand { font-size: 15px; }
  .site-header nav a { padding: 8px 7px; font-size: 12px; }
  .language-selector { max-width: 42px; padding: 7px 0; font-size: 11px; }
  .theme-toggle { width: 34px; height: 34px; border-radius: 8px; }
  .home-hero { width: min(100% - 32px, 1024px); margin: 48px auto 45px; }
  .home-hero h1 { letter-spacing: -2.5px; }
  .tool-cards { grid-template-columns: 1fr; max-width: 390px; }
  .tool-card { min-height: 205px; }
  .tool-card strong { margin-top: 32px; }
  .ad-home, .feature-row { width: min(100% - 32px, 880px); }
  .feature-row { gap: 9px; }
  .feature-row p { font-size: 11px; }
  .feature-row strong { display: block; margin: 0 0 5px; }
  .site-footer { width: min(100% - 32px, 1180px); }
  .game-main { width: min(100% - 32px, 1180px); margin: 24px auto 44px; }
  .game-heading { margin-bottom: 17px; }
  .game-heading h1 { font-size: 30px; }
  .game-layout { grid-template-columns: 1fr; gap: 14px; }
  .game-stage, .game-setup-panel { grid-column: 1; }
  .game-stage { grid-row: 1; }
  .game-setup-panel { grid-row: 2; }
  .panel { padding: 17px; }
  .setup-list { max-height: 230px; }
  .game-stage { min-height: 500px; }
  .ladder-canvas { min-height: 380px; }
  .ladder-canvas svg { min-height: 380px; }
  .roulette-board { min-height: 355px; padding: 22px 12px 14px; }
  .wheel-wrap { width: min(360px, calc(100vw - 72px)); }
  .stage-topbar { min-height: 72px; padding: 16px; }
  .ladder-stage .stage-topbar { align-items: flex-start; flex-direction: column; gap: 10px; }
  .ladder-stage .stage-actions { flex-wrap: wrap; }
  .stage-actions { gap: 6px; }
  .ladder-count-control { height: 30px; }
  .ladder-count-control button { width: 27px; }
  .stage-edit-link { padding: 6px 7px; }
  .stage-message { font-size: 11px; }
  .game-result { margin-top: 14px; }
  .ladder-guide { grid-template-columns: 1fr; margin-top: 46px; }
  .result-modal { padding: 16px; }
  .result-modal-card { padding: 20px; }
}

@media (max-width: 420px) {
  .site-header nav { gap: 2px; }
  .site-header nav a { padding-inline: 4px; font-size: 11px; }
  .brand { gap: 5px; font-size: 13px; }
  .brand-mark { font-size: 23px; }
  .theme-toggle { width: 32px; height: 32px; }
  .theme-icon { width: 18px; height: 18px; }
}

/* Roulette · quiet utility */
.roulette-page {
  background: #f6f7f5;
}

.roulette-page .site-header {
  width: 100%;
  height: 68px;
  padding: 0 max(24px, calc((100% - 1500px) / 2));
  border-bottom: 1px solid #dfe3e0;
  background: #fff;
}

.header-primary,
.header-tools {
  display: flex;
  align-items: center;
}

.roulette-page .header-primary {
  gap: 46px;
}

.roulette-page .brand {
  color: #151b18;
  font-size: 23px;
  letter-spacing: -1.3px;
}

.roulette-page .game-nav {
  align-self: stretch;
  gap: 24px;
}

.roulette-page .game-nav a {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0 2px;
  color: #3e4742;
  border-radius: 0;
  background: transparent;
  font-size: 15px;
  font-weight: 650;
}

.roulette-page .game-nav a:hover,
.roulette-page .game-nav a[aria-current="page"] {
  color: var(--roulette-green);
  background: transparent;
}

.roulette-page .game-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--roulette-green);
}

.roulette-page .header-tools {
  gap: 10px;
}

.roulette-page .language-selector {
  width: 108px;
  max-width: none;
  height: 38px;
  padding: 0 12px;
  color: #36403b;
  border: 1px solid #d8ddda;
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
}

.roulette-page .language-selector:hover,
.roulette-page .language-selector:focus {
  border-color: #aeb8b2;
  background: #fff;
}

.roulette-page .theme-toggle {
  color: #29312d;
  border-radius: 6px;
}

.roulette-main {
  width: min(1500px, calc(100% - 40px));
  margin: 24px auto 56px;
}

.roulette-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  column-gap: 168px;
  align-items: start;
}

.roulette-content {
  overflow: hidden;
  border: 1px solid #d9ddda;
  border-radius: 8px;
  background: #fff;
}

.roulette-page .roulette-stage {
  min-height: 490px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.roulette-page .roulette-board {
  min-height: 490px;
  padding: 35px 24px 19px;
}

.roulette-page .wheel-wrap {
  width: min(440px, calc(100vw - 420px));
}

.roulette-page .wheel-wrap.is-locked {
  opacity: 1;
  filter: saturate(.72);
}

.roulette-page #roulette-wheel {
  border: 4px solid #f7f9f7;
  box-shadow: 0 2px 7px rgba(24, 42, 33, .1), inset 0 0 0 1px rgba(25, 43, 34, .16);
}

.roulette-page .roulette-pointer {
  top: 10px;
  width: 40px;
  height: 53px;
  border: 0;
  background: var(--roulette-green);
  clip-path: polygon(14% 0, 86% 0, 61% 100%, 39% 100%);
  filter: drop-shadow(0 2px 1px rgba(16, 52, 36, .24));
}

.roulette-page .roulette-center {
  width: 38px;
  height: 38px;
  color: transparent;
  border: 9px solid #fff;
  background: var(--roulette-hub);
  box-shadow: 0 0 0 4px var(--roulette-green);
}

.roulette-page .game-setup-panel {
  padding: 18px 27px 22px;
  border: 0;
  border-top: 1px solid #dfe3e0;
  border-radius: 0;
  background: transparent;
}

.roulette-setup-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 13px;
}

.roulette-setup-header h2 {
  margin: 0;
  color: #172019;
  font-size: 18px;
  letter-spacing: -.8px;
}

.roulette-setup-header p {
  margin: 3px 0 0;
  color: #737c77;
  font-size: 12px;
}

.roulette-page .count-stepper {
  display: flex;
  flex: 0 0 auto;
  gap: 0;
  height: 42px;
  overflow: hidden;
  border: 1px solid #d3d8d5;
  border-radius: 6px;
  background: #fff;
}

.roulette-page .count-entry {
  min-width: 72px;
  padding: 0 9px 0 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.roulette-page .count-entry .count-box {
  gap: 3px;
}

.roulette-page .count-entry .count-box input {
  width: 40px;
  color: #172019;
  font-size: 16px;
}

.roulette-page .step-button {
  width: 44px;
  padding: 0;
  color: #3e4742;
  border: 0;
  border-left: 1px solid #d3d8d5;
  border-radius: 0;
  background: #fff;
  font-size: 21px;
}

.roulette-page .step-button:hover {
  color: var(--roulette-green);
  border-color: #d3d8d5;
  background: #f1f5f2;
}

.roulette-page .step-button:disabled {
  color: #aab1ad;
  background: #f5f6f5;
}

.roulette-page .setup-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 16px;
  max-height: 280px;
  margin: 0;
  padding: 1px 3px 1px 1px;
  scrollbar-color: #c8ceca transparent;
  scrollbar-width: thin;
}

.roulette-page .setup-row,
.roulette-page .setup-row-single {
  display: block;
  margin: 0;
}

.roulette-page .setup-row .index {
  display: none;
}

.roulette-page .setup-row input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  color: #172019;
  border-color: #d5dad7;
  border-radius: 6px;
  background: #fff;
  font-size: 14px;
}

.roulette-page .setup-row input:focus {
  border-color: var(--roulette-green);
  box-shadow: 0 0 0 3px rgba(15, 104, 73, .12);
}

.roulette-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  gap: 9px;
  margin-top: 16px;
}

.roulette-page .roulette-actions .button {
  min-height: 54px;
  border-radius: 6px;
  font-size: 15px;
}

.roulette-page .roulette-actions .button.primary {
  color: #fff;
  background: var(--roulette-green);
}

.roulette-page .roulette-actions .button.primary:hover {
  background: var(--roulette-green-hover);
  filter: none;
}

.roulette-page .roulette-actions .button.secondary {
  color: #46504b;
  border: 1px solid #d7dcda;
  background: #f1f3f2;
}

.roulette-page .roulette-result {
  width: 100%;
  min-height: 56px;
  margin-top: 10px;
  padding: 10px 16px;
  border-color: #d5dad7;
  border-radius: 6px;
  background: #fff;
}

.roulette-page .roulette-result .tiny {
  display: none;
}

.roulette-page .roulette-result strong,
.roulette-page .roulette-result strong.is-placeholder {
  color: #333c37;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -.25px;
}

.roulette-help {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 13px 0 0;
  color: #737c77;
  font-size: 12px;
  line-height: 1.5;
}

.roulette-help > span:first-child {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 19px;
  height: 19px;
  color: #2d70a9;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 800;
}

.roulette-page .ad-rail {
  grid-column: 2;
  min-height: 740px;
  border: 1px dashed #d7dcd9;
  border-radius: 8px;
}

.roulette-page .site-footer {
  width: min(1500px, calc(100% - 40px));
}

[data-theme="dark"] .roulette-page {
  background: #141916;
}

[data-theme="dark"] .roulette-page .site-header {
  border-color: #333b36;
  background: #181e1a;
}

[data-theme="dark"] .roulette-page .brand,
[data-theme="dark"] .roulette-setup-header h2 {
  color: #eef3f0;
}

[data-theme="dark"] .roulette-page .game-nav a {
  color: #b9c1bc;
}

[data-theme="dark"] .roulette-page .game-nav a:hover,
[data-theme="dark"] .roulette-page .game-nav a[aria-current="page"] {
  color: var(--roulette-green);
  background: transparent;
}

[data-theme="dark"] .roulette-page .language-selector {
  color: #d7ddd9;
  border-color: #414a44;
  background: #202722;
}

[data-theme="dark"] .roulette-page .language-selector:hover,
[data-theme="dark"] .roulette-page .language-selector:focus {
  border-color: #5f6a63;
  background: #242d27;
}

[data-theme="dark"] .roulette-content {
  border-color: #333c36;
  background: #1c231f;
}

[data-theme="dark"] .roulette-page .roulette-stage,
[data-theme="dark"] .roulette-page .game-setup-panel {
  border-color: #343d37;
  background: transparent;
}

[data-theme="dark"] .roulette-page #roulette-wheel {
  border-color: #29322c;
  box-shadow: 0 2px 9px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(255, 255, 255, .13);
}

[data-theme="dark"] .roulette-page .roulette-center {
  border-color: #1c231f;
}

[data-theme="dark"] .roulette-setup-header p,
[data-theme="dark"] .roulette-help {
  color: #9da69f;
}

[data-theme="dark"] .roulette-page .count-stepper,
[data-theme="dark"] .roulette-page .count-entry,
[data-theme="dark"] .roulette-page .step-button,
[data-theme="dark"] .roulette-page .setup-row input,
[data-theme="dark"] .roulette-page .roulette-result {
  color: #edf2ef;
  border-color: #414a44;
  background: #232b26;
}

[data-theme="dark"] .roulette-page .count-entry .count-box input,
[data-theme="dark"] .roulette-page .setup-row input,
[data-theme="dark"] .roulette-page .roulette-result strong,
[data-theme="dark"] .roulette-page .roulette-result strong.is-placeholder {
  color: #edf2ef;
}

[data-theme="dark"] .roulette-page .step-button:hover {
  color: var(--roulette-green);
  border-color: #414a44;
  background: #2b352f;
}

[data-theme="dark"] .roulette-page .step-button:disabled {
  color: #707a73;
  background: #202722;
}

[data-theme="dark"] .roulette-page .setup-row input:focus {
  border-color: var(--roulette-green);
  box-shadow: 0 0 0 3px rgba(120, 190, 160, .18);
}

[data-theme="dark"] .roulette-page .roulette-actions .button.primary {
  color: #10241a;
  background: var(--roulette-green);
}

[data-theme="dark"] .roulette-page .roulette-actions .button.secondary {
  color: #c6cec9;
  border-color: #414a44;
  background: #2a332e;
}

[data-theme="dark"] .roulette-page .ad-rail {
  border-color: #38413b;
}

@media (max-width: 1180px) {
  .roulette-main {
    width: min(100% - 32px, 1500px);
  }

  .roulette-workspace {
    column-gap: 150px;
  }

  .roulette-page .wheel-wrap {
    width: min(420px, calc(100vw - 475px));
  }
}

@media (max-width: 980px) {
  .roulette-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .roulette-page .ad-rail {
    display: none;
  }

  .roulette-page .wheel-wrap {
    width: min(440px, calc(100vw - 88px));
  }
}

@media (max-width: 700px) {
  .roulette-page .site-header {
    width: 100%;
    height: 62px;
    padding: 0 16px;
  }

  .roulette-page .header-primary {
    gap: 16px;
  }

  .roulette-page .brand {
    font-size: 16px;
    letter-spacing: -.8px;
  }

  .roulette-page .game-nav {
    gap: 10px;
  }

  .roulette-page .game-nav a {
    padding: 0 1px;
    font-size: 12px;
  }

  .roulette-page .header-tools {
    gap: 4px;
  }

  .roulette-page .language-selector {
    width: 46px;
    height: 34px;
    padding: 0 4px;
    font-size: 11px;
  }

  .roulette-main {
    width: min(100% - 24px, 1500px);
    margin: 12px auto 38px;
  }

  .roulette-page .roulette-stage,
  .roulette-page .roulette-board {
    min-height: 400px;
  }

  .roulette-page .roulette-board {
    padding: 31px 12px 15px;
  }

  .roulette-page .wheel-wrap {
    width: min(360px, calc(100vw - 60px));
  }

  .roulette-page .roulette-pointer {
    top: 7px;
    width: 34px;
    height: 46px;
  }

  .roulette-page .game-setup-panel {
    padding: 16px;
  }

  .roulette-page .setup-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 320px;
    gap: 9px;
  }

  .roulette-page .setup-row input {
    height: 44px;
  }

  .roulette-page .site-footer {
    width: min(100% - 32px, 1500px);
  }
}

@media (max-width: 520px) {
  .roulette-page .brand {
    max-width: 78px;
    line-height: 1.1;
  }

  .roulette-page .header-primary {
    gap: 11px;
  }

  .roulette-page .game-nav {
    gap: 7px;
  }

  .roulette-page .theme-toggle {
    width: 31px;
    height: 31px;
  }

  .roulette-page .roulette-stage,
  .roulette-page .roulette-board {
    min-height: 345px;
  }

  .roulette-page .wheel-wrap {
    width: min(310px, calc(100vw - 56px));
  }

  .roulette-setup-header {
    align-items: flex-start;
  }

  .roulette-page .count-stepper {
    height: 38px;
  }

  .roulette-page .count-entry {
    min-width: 59px;
    padding-inline: 8px;
  }

  .roulette-page .step-button {
    width: 37px;
  }

  .roulette-page .setup-list {
    grid-template-columns: 1fr;
    max-height: 300px;
  }

  .roulette-actions {
    grid-template-columns: minmax(0, 1fr) 76px;
  }

  .roulette-page .roulette-actions .button {
    min-height: 50px;
    padding-inline: 10px;
    font-size: 14px;
  }
}

/* Group choice platform */
[hidden] { display: none !important; }

.platform-page,
.ladder-page {
  background: #f6f7f5;
}

.platform-page .site-header,
.ladder-page .site-header {
  width: 100%;
  height: 68px;
  padding: 0 max(24px, calc((100% - 1500px) / 2));
  border-bottom: 1px solid #dfe3e0;
  background: #fff;
}

.platform-page .header-primary,
.ladder-page .header-primary {
  gap: 46px;
}

.platform-page .brand,
.ladder-page .brand {
  color: #151b18;
  font-size: 23px;
  letter-spacing: -1.3px;
}

.platform-page .game-nav,
.ladder-page .game-nav {
  align-self: stretch;
  gap: 24px;
}

.platform-page .game-nav a,
.ladder-page .game-nav a {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0 2px;
  color: #3e4742;
  border-radius: 0;
  background: transparent;
  font-size: 15px;
  font-weight: 650;
}

.platform-page .game-nav a:hover,
.ladder-page .game-nav a:hover,
.ladder-page .game-nav a[aria-current="page"] {
  color: var(--roulette-green);
  background: transparent;
}

.ladder-page .game-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--roulette-green);
}

.platform-page .header-tools,
.ladder-page .header-tools {
  gap: 10px;
}

.platform-page .language-selector,
.ladder-page .language-selector {
  width: 108px;
  max-width: none;
  height: 38px;
  padding: 0 12px;
  color: #36403b;
  border: 1px solid #d8ddda;
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
}

.platform-page .theme-toggle,
.ladder-page .theme-toggle {
  color: #29312d;
  border-radius: 6px;
}

.quick-start {
  display: flex;
  align-items: center;
  gap: 22px;
}

.quick-start-heading {
  flex: 0 0 auto;
  min-width: 118px;
}

.quick-start-heading > span {
  display: block;
  margin-bottom: 3px;
  color: #738079;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
}

.quick-start-heading > strong {
  color: #1d2621;
  font-size: 14px;
  letter-spacing: -.5px;
}

.template-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.template-list::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.template-list::-webkit-scrollbar-track {
  background: transparent;
}

.template-list::-webkit-scrollbar-thumb {
  border-radius: 99px;
  background: #b6bfba;
}

.template-chip {
  min-height: 36px;
  padding: 0 12px 0 9px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #38423d;
  border: 1px solid #d8ddda;
  border-radius: 6px;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}

.template-chip:hover {
  color: #0d5f43;
  border-color: #9db7aa;
  background: #f2f7f4;
}

.template-chip[aria-pressed="true"] {
  color: #0c5b40;
  border-color: #86ad9b;
  background: #e8f2ed;
}

.template-chip:focus-visible,
.share-button:focus-visible {
  outline: 3px solid rgba(15, 104, 73, .18);
  outline-offset: 2px;
}

.template-chip-icon {
  font-size: 16px;
  line-height: 1;
}

.roulette-page .quick-start {
  margin: 0 0 14px;
  padding: 12px 0;
  border-top: 1px solid #edf0ee;
  border-bottom: 1px solid #edf0ee;
}

.game-template-bar {
  width: calc(100% - 342px);
  min-height: 68px;
  margin-bottom: 14px;
  padding: 14px 18px;
  border: 1px solid #d9ddda;
  border-radius: 8px;
  background: #fff;
}

.share-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.share-button {
  min-height: 38px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #285c47;
  border: 1px solid #b8ccc2;
  border-radius: 6px;
  background: #f4f8f6;
  font-size: 12px;
  font-weight: 800;
}

.share-button:hover {
  border-color: #82a893;
  background: #e9f2ed;
}

.share-button:disabled {
  cursor: wait;
  opacity: .58;
}

.share-status {
  color: #68736d;
  font-size: 11px;
}

.ladder-share-actions {
  width: calc(100% - 342px);
}

.modal-share-actions {
  margin: 12px 0;
  padding-top: 14px;
  border-top: 1px solid #edf0ee;
}

/* Home */
.platform-page .home-hero {
  width: min(1060px, calc(100% - 48px));
  margin: 76px auto 64px;
  text-align: left;
}

.platform-page .home-hero > .eyebrow {
  color: #0f6849;
}

.platform-page .home-hero h1 {
  max-width: 760px;
  font-size: clamp(44px, 6vw, 68px);
  line-height: 1.08;
  letter-spacing: -4px;
}

.platform-page .home-hero h1 em {
  color: #0f6849;
}

.platform-page .home-hero h1 em::after {
  display: none;
}

.platform-page .home-intro {
  max-width: 560px;
  margin: 20px 0 38px;
  color: #626c66;
  font-size: 16px;
}

.platform-page .tool-cards {
  max-width: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.platform-page .tool-card {
  min-height: 310px;
  padding: 28px;
  color: #1a221e;
  border: 1px solid #d8ddda;
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
}

.platform-page .tool-card:hover {
  transform: translateY(-2px);
  border-color: #aeb9b2;
  box-shadow: 0 10px 26px rgba(27, 44, 35, .07);
}

.platform-page .ladder-card {
  border-top: 5px solid #2e6f57;
}

.platform-page .roulette-card {
  border-top: 5px solid #7894b2;
}

.platform-page .tool-card-number {
  color: #737c77;
  letter-spacing: .7px;
}

.platform-page .tool-card strong {
  margin-top: 52px;
  font-size: 28px;
}

.platform-page .tool-card > span:not(.tool-card-number):not(.tool-icon):not(.tool-template-examples) {
  color: #66706a;
}

.platform-page .tool-template-examples {
  display: block;
  margin-top: 16px;
  color: #46504b;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
}

.platform-page .tool-card b {
  color: #0f6849;
}

.platform-page .tool-icon {
  border-color: #506058;
}

.platform-page .ad-home {
  margin-top: 150px;
}

.platform-page .feature-row {
  width: min(1060px, calc(100% - 48px));
}

/* Ladder */
.ladder-main {
  width: min(1500px, calc(100% - 40px));
  margin: 34px auto 66px;
}

.platform-game-heading {
  margin-bottom: 21px;
}

.platform-game-heading .eyebrow {
  margin-bottom: 8px;
  color: #0f6849;
}

.platform-game-heading h1 {
  margin: 0;
  color: #172019;
  font-size: clamp(31px, 4vw, 42px);
  letter-spacing: -2px;
}

.platform-game-heading > p:last-child {
  margin: 8px 0 0;
  color: #68726c;
  font-size: 14px;
}

.ladder-page .ladder-layout {
  column-gap: 16px;
}

.ladder-page .game-stage {
  border-color: #d9ddda;
  border-radius: 8px;
}

.ladder-page .ladder-canvas {
  margin-inline: auto;
}

.ladder-page .stage-topbar {
  border-color: #e5e9e6;
}

.ladder-page .ladder-result {
  width: calc(100% - 342px);
  border-color: #d8e3dd;
  border-radius: 8px;
  background: #eef5f1;
}

.ladder-page .ladder-result p {
  color: #42584d;
}

.ladder-page .ladder-result strong {
  color: #0f6849;
}

.ladder-page .ladder-guide article,
.ladder-page .faq-section {
  border-color: #d9ddda;
  border-radius: 8px;
}

.faq-section {
  width: calc(100% - 342px);
  margin-top: 16px;
  padding: 23px;
  border: 1px solid #e6e9e8;
  background: #fff;
}

.faq-section h2 {
  margin: 0 0 12px;
  font-size: 18px;
  letter-spacing: -1px;
}

.faq-section details {
  padding: 14px 0;
  border-top: 1px solid #edf0ef;
}

.faq-section summary {
  cursor: pointer;
  color: #373e49;
  font-size: 14px;
  font-weight: 800;
}

.faq-section p {
  margin: 9px 0 0;
  color: #676e79;
  font-size: 13px;
  line-height: 1.7;
}

/* Platform dark mode */
[data-theme="dark"] .platform-page,
[data-theme="dark"] .ladder-page {
  background: #141916;
}

[data-theme="dark"] .platform-page .site-header,
[data-theme="dark"] .ladder-page .site-header {
  border-color: #333b36;
  background: #181e1a;
}

[data-theme="dark"] .platform-page .brand,
[data-theme="dark"] .ladder-page .brand,
[data-theme="dark"] .platform-game-heading h1,
[data-theme="dark"] .quick-start-heading > strong {
  color: #eef3f0;
}

[data-theme="dark"] .platform-page .game-nav a,
[data-theme="dark"] .ladder-page .game-nav a {
  color: #b9c1bc;
}

[data-theme="dark"] .platform-page .game-nav a:hover,
[data-theme="dark"] .ladder-page .game-nav a:hover,
[data-theme="dark"] .ladder-page .game-nav a[aria-current="page"] {
  color: var(--roulette-green);
  background: transparent;
}

[data-theme="dark"] .platform-page .language-selector,
[data-theme="dark"] .ladder-page .language-selector {
  color: #d7ddd9;
  border-color: #414a44;
  background: #202722;
}

[data-theme="dark"] .platform-page .tool-card,
[data-theme="dark"] .game-template-bar,
[data-theme="dark"] .faq-section {
  color: #edf2ef;
  border-color: #343d37;
  background: #1c231f;
}

[data-theme="dark"] .platform-page .home-intro,
[data-theme="dark"] .platform-game-heading > p:last-child,
[data-theme="dark"] .quick-start-heading > span,
[data-theme="dark"] .share-status {
  color: #9da69f;
}

[data-theme="dark"] .platform-page .tool-card > span:not(.tool-card-number):not(.tool-icon):not(.tool-template-examples),
[data-theme="dark"] .platform-page .tool-template-examples {
  color: #b8c1bb;
}

[data-theme="dark"] .template-chip,
[data-theme="dark"] .share-button {
  color: #d6ddd9;
  border-color: #414a44;
  background: #252e28;
}

[data-theme="dark"] .template-chip:hover,
[data-theme="dark"] .template-chip[aria-pressed="true"],
[data-theme="dark"] .share-button:hover {
  color: #b9e1ce;
  border-color: #668977;
  background: #2b3a32;
}

[data-theme="dark"] .roulette-page .quick-start,
[data-theme="dark"] .modal-share-actions,
[data-theme="dark"] .faq-section details {
  border-color: #343d37;
}

[data-theme="dark"] .ladder-page .ladder-result {
  border-color: #3c574a;
  background: #21342b;
}

[data-theme="dark"] .ladder-page .ladder-result p {
  color: #b8d3c6;
}

@media (max-width: 980px) {
  .game-template-bar,
  .ladder-share-actions,
  .ladder-page .ladder-result,
  .faq-section {
    width: 100%;
  }
}

@media (max-width: 700px) {
  .platform-page .site-header,
  .ladder-page .site-header {
    width: 100%;
    height: 62px;
    padding: 0 16px;
  }

  .platform-page .header-primary,
  .ladder-page .header-primary {
    gap: 16px;
  }

  .platform-page .brand,
  .ladder-page .brand {
    font-size: 16px;
    letter-spacing: -.8px;
  }

  .platform-page .game-nav,
  .ladder-page .game-nav {
    gap: 10px;
  }

  .platform-page .game-nav a,
  .ladder-page .game-nav a {
    padding: 0 1px;
    font-size: 12px;
  }

  .platform-page .header-tools,
  .ladder-page .header-tools {
    gap: 4px;
  }

  .platform-page .language-selector,
  .ladder-page .language-selector {
    width: 46px;
    height: 34px;
    padding: 0 4px;
    font-size: 11px;
  }

  .platform-page .home-hero {
    width: min(100% - 32px, 1060px);
    margin: 48px auto 45px;
  }

  .platform-page .home-hero h1 {
    font-size: clamp(39px, 12vw, 54px);
    letter-spacing: -2.5px;
  }

  .platform-page .tool-cards {
    grid-template-columns: 1fr;
  }

  .platform-page .tool-card {
    min-height: 280px;
  }

  .ladder-main {
    width: min(100% - 24px, 1500px);
    margin: 22px auto 44px;
  }

  .quick-start,
  .game-template-bar {
    align-items: flex-start;
    flex-direction: column;
    gap: 11px;
  }

  .quick-start-heading {
    min-width: 0;
  }

  .template-list {
    flex-wrap: nowrap;
    width: 100%;
    padding-bottom: 3px;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .template-chip {
    flex: 0 0 auto;
  }

  .ladder-page .ladder-guide,
  .faq-section {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .platform-page .brand,
  .ladder-page .brand {
    max-width: 78px;
    line-height: 1.1;
  }

  .platform-page .header-primary,
  .ladder-page .header-primary {
    gap: 11px;
  }

  .platform-page .game-nav,
  .ladder-page .game-nav {
    gap: 7px;
  }

  .share-actions {
    align-items: stretch;
  }

  .share-button {
    justify-content: center;
    flex: 1 1 130px;
  }

  .share-status {
    flex-basis: 100%;
  }
}

/* Header control legibility */
.language-selector,
.roulette-page .language-selector,
.platform-page .language-selector,
.ladder-page .language-selector {
  width: 108px;
  max-width: none;
  padding-right: 34px;
  padding-left: 12px;
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #526059 50%),
    linear-gradient(135deg, #526059 50%, transparent 50%);
  background-position:
    calc(100% - 16px) calc(50% - 2px),
    calc(100% - 11px) calc(50% - 2px);
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px;
}

[data-theme="dark"] .language-selector,
[data-theme="dark"] .roulette-page .language-selector,
[data-theme="dark"] .platform-page .language-selector,
[data-theme="dark"] .ladder-page .language-selector {
  background-image:
    linear-gradient(45deg, transparent 50%, #f4f7f5 50%),
    linear-gradient(135deg, #f4f7f5 50%, transparent 50%);
  background-position:
    calc(100% - 16px) calc(50% - 2px),
    calc(100% - 11px) calc(50% - 2px);
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px;
}

[data-theme="dark"] .roulette-page .theme-toggle,
[data-theme="dark"] .platform-page .theme-toggle,
[data-theme="dark"] .ladder-page .theme-toggle {
  color: #f7faf8;
  border: 1px solid #47524b;
  background-color: transparent;
}

[data-theme="dark"] .roulette-page .theme-toggle:hover,
[data-theme="dark"] .platform-page .theme-toggle:hover,
[data-theme="dark"] .ladder-page .theme-toggle:hover {
  color: #fff;
  border-color: #68766d;
  background-color: #29322d;
}

@media (max-width: 700px) {
  .language-selector,
  .roulette-page .language-selector,
  .platform-page .language-selector,
  .ladder-page .language-selector {
    width: 88px;
    height: 34px;
    padding-right: 30px;
    padding-left: 10px;
    background-position:
      calc(100% - 14px) calc(50% - 2px),
      calc(100% - 9px) calc(50% - 2px);
  }
}

/* Production content, advertising safety and information pages */
html:not(.ads-enabled) [data-ad-slot] {
  display: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

.roulette-workspace,
.ladder-page .ladder-layout {
  grid-template-columns: minmax(0, 1fr);
  column-gap: 0;
}

.ladder-page .ladder-result,
.ladder-page .ladder-guide,
.ladder-page .faq-section {
  width: 100%;
}

html.ads-enabled .roulette-workspace {
  grid-template-columns: minmax(0, 1fr) 160px;
  column-gap: 168px;
}

html.ads-enabled .ladder-page .ladder-layout {
  grid-template-columns: minmax(0, 1fr) 160px;
  column-gap: 150px;
}

html.ads-enabled .ladder-page .ad-rail {
  grid-column: 2;
}

html.ads-enabled .ladder-page .ladder-result,
html.ads-enabled .ladder-page .ladder-guide,
html.ads-enabled .ladder-page .faq-section {
  width: calc(100% - 310px);
}

html.ads-enabled .ad-rail {
  display: block;
  min-width: 160px;
  min-height: 600px;
}

html.ads-enabled .roulette-page .ad-rail {
  min-height: 740px;
}

html.ads-enabled .ad-home {
  display: block;
  min-height: 90px;
}

html.ads-enabled .ad-mobile {
  display: none;
}

.bulk-entry {
  margin: 0 0 16px;
  border: 1px solid #dbe0dd;
  border-radius: 7px;
  background: #f8faf8;
}

.bulk-entry summary {
  padding: 12px 14px;
  cursor: pointer;
  color: #35413b;
  font-size: 13px;
  font-weight: 750;
}

.bulk-entry-body {
  padding: 0 14px 14px;
}

.bulk-entry-body label {
  display: block;
  margin-bottom: 7px;
  color: #3f4a44;
  font-size: 12px;
  font-weight: 700;
}

.bulk-entry-body textarea {
  width: 100%;
  min-height: 116px;
  padding: 10px 12px;
  resize: vertical;
  color: #172019;
  border: 1px solid #d5dad7;
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  line-height: 1.55;
  outline: none;
}

.bulk-entry-body textarea:focus {
  border-color: var(--roulette-green);
  box-shadow: 0 0 0 3px rgba(15, 104, 73, .12);
}

.bulk-entry-body p {
  margin: 7px 0 10px;
  color: #737c77;
  font-size: 11px;
  line-height: 1.55;
}

.bulk-entry-body .button {
  min-height: 38px;
}

.bulk-entry-status {
  display: inline-block;
  margin-left: 9px;
  color: #486057;
  font-size: 11px;
}

.roulette-guide {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.roulette-guide article {
  padding: 23px;
  border: 1px solid #d9ddda;
  border-radius: 8px;
  background: #fff;
}

.roulette-guide h2 {
  margin: 0 0 12px;
  color: #172019;
  font-size: 18px;
  letter-spacing: -1px;
}

.roulette-guide p,
.roulette-guide li {
  color: #676e79;
  font-size: 13px;
  line-height: 1.7;
  word-break: keep-all;
}

.roulette-guide p,
.roulette-guide ol,
.roulette-guide ul {
  margin-top: 0;
  margin-bottom: 0;
}

.roulette-guide ol {
  padding-left: 20px;
}

.use-case-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 16px;
  padding: 0;
  list-style: none;
}

.roulette-page .faq-section {
  width: 100%;
}

.info-page {
  color: #172019;
  background: #f6f7f5;
}

.info-page .site-header {
  width: 100%;
  height: 68px;
  padding: 0 max(24px, calc((100% - 1180px) / 2));
  border-bottom: 1px solid #dfe3e0;
  background: #fff;
}

.info-page .header-primary {
  display: flex;
  align-items: center;
  gap: 34px;
}

.info-page .header-tools {
  display: flex;
  align-items: center;
}

.info-main {
  width: min(900px, calc(100% - 48px));
  margin: 70px auto 92px;
}

.info-hero {
  margin-bottom: 32px;
}

.info-hero h1 {
  margin: 0;
  font-size: clamp(34px, 6vw, 52px);
  line-height: 1.12;
  letter-spacing: -2.7px;
}

.info-hero > p:not(.eyebrow) {
  max-width: 680px;
  margin: 16px 0 0;
  color: #66706a;
  font-size: 16px;
  line-height: 1.75;
  word-break: keep-all;
}

.info-hero .policy-date {
  font-size: 12px !important;
}

.info-card,
.info-grid article,
.contact-card {
  padding: 28px;
  border: 1px solid #d9ddda;
  border-radius: 10px;
  background: #fff;
}

.info-card + .info-card,
.info-grid + .info-card,
.contact-card + .info-card {
  margin-top: 16px;
}

.info-card h2,
.info-grid h2,
.contact-card h2 {
  margin: 0 0 12px;
  font-size: 19px;
  letter-spacing: -.8px;
}

.info-card p,
.info-grid p,
.contact-card p,
.contact-card li {
  margin: 0;
  color: #59635d;
  font-size: 14px;
  line-height: 1.8;
  word-break: keep-all;
}

.info-card a,
.contact-card a {
  color: #0f6849;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 16px 0;
}

.contact-email {
  display: inline-block;
  margin-bottom: 17px;
  font-size: clamp(20px, 4vw, 28px);
}

.contact-card ul {
  margin: 14px 0 0;
  padding-left: 20px;
}

.policy-main .info-card + .info-card {
  margin-top: 14px;
}

.policy-main .info-card p + p {
  margin-top: 10px;
}

[data-theme="dark"] .bulk-entry {
  border-color: #414a44;
  background: #202722;
}

[data-theme="dark"] .bulk-entry summary,
[data-theme="dark"] .bulk-entry-body label {
  color: #dce3df;
}

[data-theme="dark"] .bulk-entry-body textarea {
  color: #edf2ef;
  border-color: #414a44;
  background: #232b26;
}

[data-theme="dark"] .bulk-entry-body p,
[data-theme="dark"] .bulk-entry-status {
  color: #9da69f;
}

[data-theme="dark"] .roulette-guide article,
[data-theme="dark"] .info-card,
[data-theme="dark"] .info-grid article,
[data-theme="dark"] .contact-card {
  border-color: #343d37;
  background: #1d2420;
}

[data-theme="dark"] .roulette-guide h2,
[data-theme="dark"] .info-card h2,
[data-theme="dark"] .info-grid h2,
[data-theme="dark"] .contact-card h2 {
  color: #eef3f0;
}

[data-theme="dark"] .roulette-guide p,
[data-theme="dark"] .roulette-guide li,
[data-theme="dark"] .info-card p,
[data-theme="dark"] .info-grid p,
[data-theme="dark"] .contact-card p,
[data-theme="dark"] .contact-card li {
  color: #aeb7b1;
}

[data-theme="dark"] .info-page {
  color: #eef3f0;
  background: #141916;
}

[data-theme="dark"] .info-page .site-header {
  border-color: #333b36;
  background: #181e1a;
}

[data-theme="dark"] .info-page .brand {
  color: #eef3f0;
}

[data-theme="dark"] .info-page .theme-toggle {
  color: #f7faf8;
  border: 1px solid #47524b;
  background-color: transparent;
}

[data-theme="dark"] .info-page .theme-toggle:hover {
  color: #fff;
  border-color: #68766d;
  background-color: #29322d;
}

[data-theme="dark"] .info-hero > p:not(.eyebrow) {
  color: #aeb7b1;
}

@media (max-width: 980px) {
  html.ads-enabled .roulette-workspace,
  html.ads-enabled .ladder-page .ladder-layout {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
  }

  html.ads-enabled .ladder-page .ladder-result,
  html.ads-enabled .ladder-page .ladder-guide,
  html.ads-enabled .ladder-page .faq-section {
    width: 100%;
  }

  html.ads-enabled .ad-rail {
    display: none;
  }

  html.ads-enabled .ad-mobile {
    display: block;
    width: min(728px, 100%);
    min-height: 90px;
    margin: 150px auto 0;
  }
}

@media (max-width: 700px) {
  .roulette-guide,
  .info-grid {
    grid-template-columns: 1fr;
  }

  .roulette-guide {
    margin-top: 46px;
  }

  .use-case-list {
    grid-template-columns: 1fr;
  }

  .info-page .site-header {
    height: auto;
    min-height: 68px;
    padding: 10px 16px;
  }

  .info-page .header-primary {
    gap: 12px;
  }

  .info-page .site-header nav {
    gap: 2px;
  }

  .info-page .site-header nav a {
    padding-inline: 7px;
    font-size: 12px;
  }

  .info-main {
    width: min(100% - 32px, 900px);
    margin: 44px auto 64px;
  }

  .info-card,
  .info-grid article,
  .contact-card {
    padding: 22px 19px;
  }

  .site-footer {
    align-items: flex-start;
    gap: 14px;
    flex-direction: column;
  }

  .site-footer nav {
    justify-content: flex-start;
  }
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(15, 104, 73, .28);
  outline-offset: 3px;
}