:root {
  color-scheme: light;
  --bg: #f4f5f8;
  --surface: #ffffff;
  --surface-soft: #eceef4;
  --ink: #17181d;
  --muted: #6e7280;
  --line: #dfe1e8;
  --primary: #6757f7;
  --primary-2: #8b5cf6;
  --accent: #b8f34a;
  --danger: #e5484d;
  --success: #168866;
  --shadow: 0 18px 50px rgba(24, 25, 35, .09);
  --radius-lg: 30px;
  --radius-md: 20px;
  --radius-sm: 13px;
  --max: 1240px;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111217;
  --surface: #1a1b22;
  --surface-soft: #24262f;
  --ink: #f6f6f8;
  --muted: #a5a8b3;
  --line: #30323d;
  --primary: #8c7fff;
  --primary-2: #ad7cff;
  --accent: #b8f34a;
  --shadow: 0 20px 60px rgba(0, 0, 0, .32);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--bg); color: var(--ink); font-family: Pretendard, "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: -.02em; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }

.site-header { height: 76px; padding: 0 max(24px, calc((100vw - var(--max)) / 2)); display: flex; align-items: center; gap: 42px; background: color-mix(in srgb, var(--surface) 88%, transparent); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px); position: sticky; top: 0; z-index: 50; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 19px; font-weight: 900; letter-spacing: -.06em; white-space: nowrap; }
.brand em { color: var(--primary); font-style: normal; }
.brand-mark { width: 31px; height: 31px; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 3px; transform: rotate(4deg); }
.brand-mark i { display: block; border-radius: 4px; background: var(--ink); }
.brand-mark i:first-child { background: var(--primary); }
.brand-mark i:last-child { grid-column: 1 / 3; background: var(--accent); }
.top-nav { display: flex; gap: 28px; font-size: 14px; font-weight: 700; color: var(--muted); }
.top-nav a:hover { color: var(--ink); }
.header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.language-picker { min-width: 132px; height: 42px; padding: 0 12px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); position: relative; }
.site-header > .language-picker { margin-left: auto; }
.language-icon { color: var(--primary); font-size: 15px; font-weight: 900; line-height: 1; }
.language-picker select { width: 100%; min-width: 0; padding: 0 17px 0 0; border: 0; outline: 0; appearance: none; background: transparent; color: inherit; cursor: pointer; font-size: 12px; font-weight: 800; }
.language-chevron { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; position: absolute; right: 13px; transform: translateY(-2px) rotate(45deg); pointer-events: none; }
.sr-only { width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; position: absolute; }
.language-picker-standalone { position: fixed; top: 16px; right: 16px; z-index: 50; }
html[dir="rtl"] body { letter-spacing: 0; }
html[dir="rtl"] .header-actions { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .site-header > .language-picker { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .language-picker select { padding: 0 0 0 17px; }
html[dir="rtl"] .language-chevron { right: auto; left: 13px; }
.icon-button { width: 42px; height: 42px; border: 1px solid var(--line); background: var(--surface); border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.theme-icon { width: 16px; height: 16px; border: 2px solid var(--ink); border-radius: 50%; box-shadow: -5px -3px 0 -3px var(--surface), -6px -3px 0 -3px var(--ink); }
.header-cta { display: inline-flex; align-items: center; gap: 16px; padding: 12px 18px; background: var(--ink); color: var(--surface); border-radius: 999px; font-size: 13px; font-weight: 800; }
.header-cta span { color: var(--accent); }

.hero { max-width: var(--max); min-height: 560px; margin: 0 auto; padding: 90px 24px 70px; display: grid; grid-template-columns: minmax(0, 760px); justify-content: center; align-items: center; }
.eyebrow, .section-kicker { font-size: 11px; font-weight: 900; letter-spacing: .16em; color: var(--primary); }
.eyebrow { display: flex; align-items: center; gap: 10px; }
.eyebrow span { width: 25px; height: 2px; background: var(--primary); }
.hero h1 { margin: 24px 0; font-size: clamp(52px, 5.2vw, 78px); line-height: 1.04; letter-spacing: -.075em; }
.hero h1 strong { color: var(--primary); font-weight: 900; }
.hero-description { max-width: 580px; color: var(--muted); font-size: 17px; line-height: 1.8; word-break: keep-all; }
.hero-search-wrap { max-width: 590px; margin-top: 36px; padding: 8px 10px 8px 18px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); box-shadow: var(--shadow); }
.hero-search-wrap:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 14%, transparent), var(--shadow); }
.hero-search-wrap svg { width: 21px; fill: none; stroke: var(--muted); stroke-width: 2; }
.hero-search-wrap input { width: 100%; padding: 10px 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 15px; }
kbd { padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); color: var(--muted); font-size: 12px; box-shadow: inset 0 -1px 0 var(--line); }
.quick-links { margin-top: 15px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.quick-links span { margin-right: 4px; font-weight: 800; }
.quick-links button { border: 0; padding: 5px 9px; border-radius: 7px; background: var(--surface-soft); cursor: pointer; font-size: 11px; }
.quick-links button:hover { color: var(--primary); }

.hero-visual { min-height: 430px; position: relative; display: grid; place-items: center; }
.orb { position: absolute; border-radius: 50%; filter: blur(1px); }
.orb-one { width: 330px; height: 330px; background: var(--primary); opacity: .15; }
.orb-two { width: 240px; height: 240px; margin: 180px 0 0 210px; background: var(--accent); opacity: .23; }
.visual-card { border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); background: color-mix(in srgb, var(--surface) 88%, transparent); box-shadow: 0 30px 90px rgba(60, 48, 145, .18); backdrop-filter: blur(20px); }
.main-card { width: min(100%, 420px); padding: 22px; border-radius: 28px; position: relative; transform: rotate(2deg); z-index: 2; }
.visual-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 19px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.visual-dots { display: flex; gap: 5px; }.visual-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }.visual-dots i:first-child { background: var(--primary); }
.visual-content { padding: 42px 10px 32px; display: flex; gap: 17px; align-items: center; }
.visual-content strong { font-size: 20px; }.visual-content p { margin: 7px 0 0; color: var(--muted); line-height: 1.55; font-size: 13px; }
.shield-icon { width: 56px; height: 56px; border-radius: 17px; display: grid; place-items: center; background: color-mix(in srgb, var(--primary) 13%, var(--surface)); }
.shield-icon svg { width: 30px; fill: none; stroke: var(--primary); stroke-width: 1.8; }
.local-meter { height: 8px; padding: 2px; background: var(--surface-soft); border-radius: 10px; }.local-meter span { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--accent)); }
.visual-footer { padding-top: 18px; display: flex; justify-content: space-between; color: var(--muted); font-size: 9px; letter-spacing: .1em; }.visual-footer b { color: var(--success); }
.floating-card { position: absolute; z-index: 4; border-radius: 16px; }
.card-a { left: 0; bottom: 45px; padding: 14px 20px; transform: rotate(-5deg); }.card-a span { display: block; font-size: 27px; font-weight: 900; color: var(--primary); }.card-a small { font-size: 8px; font-weight: 900; color: var(--muted); letter-spacing: .1em; }
.card-b { right: -5px; top: 58px; padding: 13px 16px; display: flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 900; letter-spacing: .08em; }.card-b i { width: 8px; height: 8px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent); }

.section-shell { max-width: var(--max); margin: 0 auto; padding: 88px 24px; }
.tools-section { border-top: 1px solid var(--line); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 38px; }
.section-heading h2 { margin: 9px 0 8px; font-size: clamp(31px, 3vw, 44px); letter-spacing: -.06em; }
.section-heading p:not(.section-kicker) { margin: 0; color: var(--muted); font-size: 14px; }
.section-heading.compact h2 { font-size: 26px; }
.section-heading.compact { margin-bottom: 20px; }
.tool-count { display: flex; align-items: center; gap: 10px; }.tool-count strong { font-size: 48px; color: var(--primary); letter-spacing: -.06em; }.tool-count span { color: var(--muted); font-size: 9px; font-weight: 900; line-height: 1.35; letter-spacing: .08em; }
.filter-row { margin-bottom: 26px; padding: 14px; display: flex; flex-wrap: wrap; gap: 8px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-soft); }
.filter-button { padding: 8px 10px 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; cursor: pointer; }
.filter-button b { min-width: 22px; padding: 3px 6px; border-radius: 999px; background: var(--surface-soft); color: inherit; font-size: 9px; text-align: center; }
.filter-button:hover, .filter-button.active { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.filter-button.active b { background: color-mix(in srgb,var(--surface) 18%,transparent); }
.category-page { padding-top: 62px; padding-bottom: 90px; }
.category-page .section-heading h1 { margin: 0; font-size: clamp(36px,5vw,58px); letter-spacing: -.05em; }
.category-page-links { margin: 0 0 28px; padding: 12px; display: flex; flex-wrap: wrap; gap: 7px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-soft); }
.category-page-links a { padding: 7px 11px; border-radius: 999px; color: var(--muted); font-size: 12px; font-weight: 800; }
.category-page-links a:hover,.category-page-links a.active { background: var(--ink); color: var(--surface); }
.home-category-links { margin-top: -14px; }
.seo-fallback .tool-heading { margin-bottom: 24px; }
.tools-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.tool-card { min-height: 220px; padding: 24px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); position: relative; overflow: hidden; transition: transform .22s, box-shadow .22s, border-color .22s; }
.tool-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--primary) 50%, var(--line)); }
.tool-card-top { display: flex; align-items: start; justify-content: space-between; }
.tool-icon { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--surface-soft); color: var(--primary); }
.tool-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.favorite-button { width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; font-size: 21px; }.favorite-button:hover, .favorite-button.active { color: var(--primary); background: var(--surface-soft); }
.tool-card h2, .tool-card h3 { margin: 26px 0 8px; font-size: 18px; }.tool-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.tool-card-bottom { margin-top: auto; padding-top: 20px; display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.tool-card-bottom b { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--surface); font-size: 14px; transition: transform .2s; }.tool-card:hover .tool-card-bottom b { transform: rotate(-45deg); }
.empty-state { padding: 80px 20px; text-align: center; border: 1px dashed var(--line); border-radius: var(--radius-md); }.empty-state strong { font-size: 20px; }.empty-state p { color: var(--muted); }

.recent-section { padding-top: 35px; padding-bottom: 35px; }.recent-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }.recent-item { padding: 15px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); font-size: 13px; font-weight: 800; }.recent-item .tool-icon { width: 35px; height: 35px; border-radius: 10px; }.recent-item .tool-icon svg { width: 18px; }.text-button { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }

.privacy-section { max-width: var(--max); margin: 30px auto 100px; padding: 70px; border-radius: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; background: #191a20; color: #fff; overflow: hidden; position: relative; }
.privacy-section::after { content: ""; width: 440px; height: 440px; position: absolute; left: -220px; bottom: -310px; border-radius: 50%; background: var(--primary); filter: blur(5px); opacity: .6; }
.section-kicker.light { color: var(--accent); }.privacy-copy { position: relative; z-index: 1; }.privacy-copy h2 { margin: 17px 0 24px; font-size: clamp(38px, 4vw, 58px); line-height: 1.08; letter-spacing: -.065em; }.privacy-copy > p:last-child { max-width: 460px; color: #aeb0ba; font-size: 14px; line-height: 1.8; word-break: keep-all; }
.privacy-points { display: grid; gap: 0; position: relative; z-index: 1; }.privacy-points article { padding: 23px 0; display: flex; gap: 20px; border-bottom: 1px solid #30323a; }.privacy-points article:first-child { padding-top: 0; }.privacy-points article:last-child { border: 0; }.privacy-points span { color: var(--accent); font-size: 11px; font-weight: 900; }.privacy-points strong { font-size: 17px; }.privacy-points p { margin: 7px 0 0; color: #9699a4; font-size: 13px; line-height: 1.6; }
.site-footer { max-width: var(--max); min-height: 120px; margin: 0 auto; padding: 32px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px 30px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }.footer-brand { color: var(--ink); }.copyright { margin-left: auto; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 100; padding: 12px 18px; border-radius: 12px; background: var(--ink); color: var(--surface); box-shadow: var(--shadow); font-size: 13px; font-weight: 700; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: .25s; }.toast.show { transform: translate(-50%, 0); opacity: 1; }

/* Persistent tool navigation */
.sidebar-ready > main { margin-left: 250px; }
.sidebar-ready > .site-footer { margin-left: max(250px, calc((100vw - var(--max)) / 2 + 250px)); margin-right: auto; }
.tool-sidebar { width: 250px; position: fixed; left: 0; top: 76px; bottom: 0; z-index: 42; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--surface); }
.sidebar-head { height: 55px; padding: 0 17px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); font-size: 13px; }
.sidebar-head strong { font-weight: 900; }.sidebar-head span { min-width: 26px; padding: 4px 7px; border-radius: 999px; background: var(--surface-soft); color: var(--muted); text-align: center; font-size: 10px; font-weight: 900; }
.sidebar-search { margin: 13px 13px 7px; padding: 0 10px; height: 39px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.sidebar-search:focus-within { border-color: var(--primary); }.sidebar-search svg { width: 16px; fill: none; stroke: var(--muted); stroke-width: 2; }.sidebar-search input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 11px; }
.tool-sidebar nav { padding: 2px 8px 25px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.sidebar-group { margin: 5px 0; border: 1px solid transparent; border-radius: 10px; }
.sidebar-group[open] { border-color: var(--line); background: var(--bg); }
.sidebar-group summary { min-height: 36px; padding: 7px 9px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-radius: 9px; color: var(--muted); cursor: pointer; list-style: none; font-size: 11px; font-weight: 900; letter-spacing: .04em; }
.sidebar-group summary::-webkit-details-marker { display: none; }
.sidebar-group summary::after { content: "⌄"; margin-left: 2px; transition: transform .18s; }
.sidebar-group[open] summary::after { transform: rotate(180deg); }
.sidebar-group summary > span { flex: 1; }
.sidebar-group > div { padding: 0 4px 5px; }
.sidebar-link { min-height: 38px; padding: 6px 9px; display: flex; align-items: center; gap: 9px; border-radius: 9px; color: var(--muted); font-size: 11px; font-weight: 750; transition: background .15s, color .15s; }
.sidebar-link:hover { background: var(--surface-soft); color: var(--ink); }.sidebar-link.active { background: color-mix(in srgb, var(--primary) 12%, var(--surface)); color: var(--primary); font-weight: 900; }.sidebar-link i { width: 6px; height: 6px; margin-left: auto; border-radius: 50%; background: var(--primary); }
.sidebar-tool-icon { width: 24px; height: 24px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 7px; background: var(--surface-soft); color: currentColor; }.sidebar-tool-icon svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sidebar-foot { margin-top: auto; padding: 13px 15px; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; line-height: 1.5; }.sidebar-foot p { margin: 0 0 8px; }.sidebar-foot p span { width: 6px; height: 6px; display: inline-block; margin-right: 4px; border-radius: 50%; background: var(--success); }.sidebar-foot a { display: block; color: var(--ink); font-weight: 800; }.sidebar-foot a:hover { color: var(--primary); }.sidebar-foot a b { display: block; margin-top: 2px; color: var(--primary); font-size: .92em; }
.eduhub-link { color: var(--ink); font-weight: 850; }.eduhub-link span { margin-left: 5px; color: var(--primary); }.eduhub-link:hover { color: var(--primary); }
.sidebar-toggle { display: none; gap: 3px; align-content: center; }.sidebar-toggle i { width: 16px; height: 1.5px; display: block; background: currentColor; border-radius: 2px; }
.sidebar-overlay { display: none; }

/* Additional tool surfaces */
.code-input { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.match-output { min-height: 120px; margin: 10px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; line-height: 1.7; }
.match-output mark { padding: 2px 1px; border-radius: 3px; background: color-mix(in srgb, var(--accent) 75%, var(--surface)); color: #17181d; }
.gradient-preview { height: 220px; margin-bottom: 22px; border: 1px solid var(--line); border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.color-input { min-height: 60px; padding: 5px; cursor: pointer; }
.number-output { min-height: 100px; margin-top: 20px; padding: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); }
.number-output b { min-width: 50px; height: 50px; padding: 0 10px; display: grid; place-items: center; border-radius: 50%; background: var(--primary); color: #fff; box-shadow: 0 7px 18px color-mix(in srgb, var(--primary) 25%, transparent); font-size: 17px; }
.pdf-drop { min-height: 190px; margin-bottom: 18px; }.pdf-drop-icon { width: 54px; height: 54px; margin: 0 auto; display: grid; place-items: center; border-radius: 15px; background: #f04444; color: #fff; font-size: 13px; font-weight: 950; letter-spacing: -.03em; box-shadow: 0 10px 24px rgba(240,68,68,.2); }
.pdf-file-info { margin-bottom: 18px; padding: 15px 17px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--bg); }.pdf-file-info strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }.pdf-file-info span { flex: 0 0 auto; color: var(--muted); font-size: 11px; }
.pdf-list { display: grid; gap: 8px; }.pdf-list-item { min-width: 0; padding: 10px 11px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }.pdf-list-item > div:first-child { min-width: 0; display: flex; align-items: center; gap: 10px; }.pdf-list-item > div:first-child > span { width: 27px; height: 27px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 8px; background: color-mix(in srgb, #f04444 12%, var(--surface)); color: #d93636; font-size: 10px; font-weight: 900; }.pdf-list-item strong,.pdf-list-item small { display: block; }.pdf-list-item strong { max-width: 430px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }.pdf-list-item small { margin-top: 3px; color: var(--muted); font-size: 9px; }.pdf-list-item > div:last-child { display: flex; gap: 4px; }.pdf-list-item button { width: 29px; height: 29px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; }.pdf-list-item button:hover { border-color: var(--primary); color: var(--primary); }

/* Tool page */
.tool-main { min-width: 0; min-height: calc(100vh - 196px); }
.tool-shell { width: 100%; max-width: var(--max); min-width: 0; margin: 0 auto; padding: 46px 24px 90px; }
.breadcrumb { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 12px; font-weight: 700; }.breadcrumb a:hover { color: var(--primary); }
.tool-heading { margin: 40px 0 32px; display: flex; align-items: center; gap: 18px; }.tool-heading .tool-icon { width: 64px; height: 64px; border-radius: 19px; }.tool-heading .tool-icon svg { width: 30px; height: 30px; }.tool-heading h1 { margin: 0 0 7px; font-size: clamp(31px, 4vw, 48px); letter-spacing: -.065em; word-break: keep-all; }.tool-heading p { margin: 0; color: var(--muted); line-height: 1.6; }.tool-heading .favorite-button { margin-left: auto; border: 1px solid var(--line); background: var(--surface); }
.tool-layout { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; align-items: start; }
.workbench { min-width: 0; max-width: 100%; padding: 26px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); box-shadow: 0 16px 45px rgba(25, 26, 35, .05); }
.workbench-bar { margin: -4px 0 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }.workbench-bar strong { font-size: 12px; letter-spacing: .08em; }.local-badge { padding: 6px 9px; border-radius: 999px; background: color-mix(in srgb, var(--success) 12%, var(--surface)); color: var(--success); font-size: 10px; font-weight: 900; white-space: nowrap; }
.tool-aside { display: grid; gap: 14px; }.aside-card { padding: 20px; border: 1px solid var(--line); border-radius: 19px; background: var(--surface); }.aside-card h2 { margin: 0 0 10px; font-size: 14px; }.aside-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }.aside-card.privacy { background: #191a20; color: #fff; border-color: #191a20; }.aside-card.privacy p { color: #aeb0ba; }.aside-card.privacy h2::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 0 4px rgba(184,243,74,.12); }
.related-list { display: grid; gap: 5px; }.related-link { padding: 9px 0; display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 800; }.related-link:last-child { border: 0; }.related-link span { color: var(--primary); }
.tool-guide { max-width: 900px; margin-top: 24px; padding: 30px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); }.tool-guide h2 { margin: 0 0 14px; font-size: 21px; }.tool-guide p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.8; }
.tool-guide h2:not(:first-child) { margin-top: 26px; }.about-link { color: var(--ink); font-weight: 750; }.about-link:hover { color: var(--primary); }.about-page { max-width: 900px; }.about-page .tool-guide { max-width: none; }.about-page ul { color: var(--muted); line-height: 1.9; }
.eduhub-services-link { flex: 0 0 100%; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); text-align: center; line-height: 1.6; }.eduhub-services-link a { color: var(--ink); font-weight: 800; }.eduhub-services-link a:hover { color: var(--primary); }

.field { margin-bottom: 18px; }.field:last-child { margin-bottom: 0; }.field label, .field-label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 900; }.field-hint { color: var(--muted); font-size: 11px; font-weight: 500; }
.input, .textarea, .select { width: 100%; border: 1px solid var(--line); border-radius: 12px; outline: none; background: var(--bg); color: var(--ink); transition: border .15s, box-shadow .15s; }.input, .select { height: 46px; padding: 0 13px; }.textarea { min-height: 250px; padding: 14px; resize: vertical; line-height: 1.6; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px; }.input:focus, .textarea:focus, .select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 13%, transparent); }
.split-editor { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }.action-row { max-width: 100%; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }.button { min-height: 43px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--ink); font-size: 12px; font-weight: 900; cursor: pointer; }.button:hover { border-color: var(--primary); color: var(--primary); }.button.primary { border-color: var(--primary); background: var(--primary); color: #fff; }.button.danger { color: var(--danger); }.button:disabled { opacity: .45; cursor: not-allowed; }
.result-box { padding: 18px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); }.result-box strong.big { display: block; font-size: 30px; color: var(--primary); }.result-box p { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.swiss-section { margin-top: 24px; }.swiss-section h3 { margin: 0 0 10px; font-size: 15px; }.swiss-pairings { display: grid; gap: 8px; }.swiss-match { display: grid; grid-template-columns: 32px minmax(0,1fr) 74px minmax(0,1fr); gap: 7px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }.swiss-match > button { min-width: 0; min-height: 44px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--text); cursor: pointer; overflow: hidden; text-overflow: ellipsis; }.swiss-match > button small { display: block; color: var(--muted); font-size: 9px; }.swiss-match > button:hover,.swiss-match > button.active { border-color: var(--primary); background: color-mix(in srgb,var(--primary) 12%,var(--surface)); color: var(--primary); }.swiss-match > button.draw { font-size: 11px; }.swiss-board { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; background: color-mix(in srgb,var(--primary) 12%,var(--surface)); color: var(--primary); font-size: 10px; font-weight: 900; }.swiss-match > strong { grid-column: 2/4; }.swiss-match > em { color: var(--success); font-size: 11px; font-style: normal; }.table-scroll { overflow-x: auto; }.swiss-table { width: 100%; border-collapse: collapse; font-size: 12px; }.swiss-table th,.swiss-table td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }.swiss-table th:nth-child(2),.swiss-table td:nth-child(2) { text-align: left; }.swiss-table th { color: var(--muted); font-size: 10px; }.empty-inline { color: var(--muted); font-size: 12px; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }.form-grid.three { grid-template-columns: repeat(3, 1fr); }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }.stat-box { padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }.stat-box strong { display: block; font-size: 22px; }.stat-box span { color: var(--muted); font-size: 10px; font-weight: 800; }
.option-row { display: flex; flex-wrap: wrap; gap: 10px 18px; }.check { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 700; }.check input { accent-color: var(--primary); }
.range-row { display: grid; grid-template-columns: 1fr 64px; gap: 12px; align-items: center; }.range { width: 100%; accent-color: var(--primary); }
.password-output { padding: 16px; display: flex; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 13px; background: var(--bg); }.password-output code { min-width: 0; flex: 1; overflow-wrap: anywhere; font-size: 16px; color: var(--primary); }.strength { height: 6px; margin-top: 10px; overflow: hidden; border-radius: 6px; background: var(--surface-soft); }.strength i { display: block; width: 0; height: 100%; background: var(--success); transition: width .2s; }
.drop-zone { min-height: 240px; padding: 30px; display: grid; place-items: center; text-align: center; border: 1px dashed color-mix(in srgb, var(--primary) 55%, var(--line)); border-radius: 18px; background: color-mix(in srgb, var(--primary) 4%, var(--surface)); cursor: pointer; }.drop-zone.drag { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--surface)); }.drop-zone svg { width: 46px; fill: none; stroke: var(--primary); stroke-width: 1.5; }.drop-zone strong { display: block; margin: 12px 0 6px; }.drop-zone p { margin: 0; color: var(--muted); font-size: 12px; }.image-preview { max-width: 100%; max-height: 350px; border-radius: 14px; display: block; margin: 0 auto 18px; }.color-preview { height: 90px; border-radius: 14px; border: 1px solid var(--line); }
.status { margin-top: 12px; font-size: 12px; color: var(--muted); }.status.error { color: var(--danger); }.status.success { color: var(--success); }

@media (max-width: 960px) {
  .sidebar-ready > main, .sidebar-ready > .site-footer { margin-left: 0; }
  .tool-sidebar { width: min(310px, 86vw); top: 66px; z-index: 70; box-shadow: 25px 0 70px rgba(0,0,0,.2); transform: translateX(-105%); transition: transform .24s ease; }
  .sidebar-open .tool-sidebar { transform: translateX(0); }.sidebar-toggle { display: grid; }.sidebar-overlay { display: block; position: fixed; inset: 66px 0 0; z-index: 65; border: 0; background: rgba(10,11,16,.45); opacity: 0; pointer-events: none; transition: opacity .2s; }.sidebar-open .sidebar-overlay { opacity: 1; pointer-events: auto; }.sidebar-open { overflow: hidden; }
  .hero { grid-template-columns: 1fr; padding-top: 65px; }.hero-copy { text-align: center; }.eyebrow, .quick-links { justify-content: center; }.hero-description, .hero-search-wrap { margin-left: auto; margin-right: auto; }.hero-visual { min-height: 400px; width: min(100%, 560px); margin: 0 auto; }
  .tools-grid { grid-template-columns: repeat(2, 1fr); }.privacy-section { margin-left: 20px; margin-right: 20px; padding: 50px; gap: 40px; }.tool-layout { grid-template-columns: 1fr; }.tool-aside { grid-template-columns: 1fr 1fr; }.recent-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .site-header { height: 66px; padding: 0 16px; }.top-nav, .header-cta { display: none; }.brand { font-size: 17px; }.brand-mark { width: 27px; height: 27px; }.theme-toggle { order: 1; }.sidebar-toggle { order: 2; }
  .language-picker { width: 42px; min-width: 42px; justify-content: center; padding: 0; }
  .language-picker select { position: absolute; inset: 0; padding: 0; opacity: 0; }
  .language-chevron { display: none; }
  .hero { min-height: auto; padding: 58px 18px 36px; gap: 36px; }.hero h1 { font-size: 43px; }.hero-description { font-size: 14px; }.quick-links span { width: 100%; }.hero-visual { min-height: 330px; }.main-card { width: calc(100% - 22px); }.card-a { left: -4px; bottom: 20px; }.card-b { right: -2px; top: 25px; }
  .section-shell { padding: 64px 16px; }.section-heading { align-items: start; }.section-heading > div:first-child { max-width: 77%; }.section-heading p:not(.section-kicker) { display: none; }.tool-count strong { font-size: 36px; }.tools-grid { grid-template-columns: 1fr; }.tool-card { min-height: 190px; }.recent-grid { grid-template-columns: 1fr; }
  .privacy-section { margin: 10px 12px 70px; padding: 42px 25px; border-radius: 27px; grid-template-columns: 1fr; gap: 38px; }.privacy-copy h2 { font-size: 39px; }.site-footer { padding: 26px 17px; flex-wrap: wrap; gap: 12px; }.site-footer > p:not(.copyright) { width: 100%; order: 3; }.copyright { margin-left: auto; }
  .tool-shell { padding: 28px 14px 60px; }.tool-heading { margin: 28px 0 22px; align-items: flex-start; }.tool-heading .tool-icon { width: 50px; height: 50px; flex: 0 0 auto; }.tool-heading h1 { font-size: 30px; }.tool-heading p { font-size: 13px; }.workbench { padding: 18px; border-radius: 19px; }.tool-aside { grid-template-columns: 1fr; }.split-editor, .form-grid, .form-grid.three { grid-template-columns: 1fr; }.stat-grid { grid-template-columns: repeat(2, 1fr); }.textarea { min-height: 190px; }.tool-guide { padding: 22px; }.toast { width: calc(100% - 30px); text-align: center; }
  .tool-heading > div { min-width: 0; }.tool-heading .favorite-button { flex: 0 0 auto; }.local-badge { padding: 5px 7px; font-size: 8px; }.workbench-bar { align-items: flex-start; }
  .pdf-file-info { align-items: flex-start; flex-direction: column; }.pdf-list-item strong { max-width: 155px; }.pdf-list-item button { width: 27px; }.pdf-list-item > div:last-child { flex: 0 0 auto; }.swiss-match { grid-template-columns: 28px minmax(0,1fr) 58px minmax(0,1fr); gap: 4px; padding: 6px; }.swiss-match > button { padding: 6px 4px; font-size: 11px; }
}

.interactive-stage { min-height: 240px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-soft); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; cursor: pointer; user-select: none; position: relative; overflow: hidden; }
.interactive-stage.ready { background: #22c55e; color: #071b0d; }
.interactive-stage small { color: var(--muted); }
.aim-stage { min-height: 360px; }
.aim-target { position: absolute; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 10px color-mix(in srgb,var(--accent) 20%,transparent); transform: translate(-50%,-50%); cursor: crosshair; }
.level-stage { height: 300px; max-width: 300px; margin: 0 auto 20px; border: 1px solid var(--line); border-radius: 50%; position: relative; background: var(--surface-soft); overflow: hidden; }
.level-bubble { width: 44px; height: 44px; border-radius: 50%; background: var(--accent); position: absolute; left: calc(50% - 22px); top: calc(50% - 22px); transition: transform .1s; }
.level-cross { position: absolute; background: var(--line); left: 10%; right: 10%; top: 50%; height: 1px; }
.level-cross.y { top: 10%; bottom: 10%; left: 50%; width: 1px; height: auto; }
.seat-grid { margin-top: 18px; display: grid; gap: 10px; overflow-x: auto; }
.seat-grid > div { min-width: 82px; padding: 14px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); text-align: center; }
.seat-grid small,.seat-grid strong { display: block; }
.seat-grid small { margin-bottom: 5px; color: var(--muted); font-size: 10px; }

/* Readability scale */
body { font-size: 16px; line-height: 1.55; }
.top-nav { font-size: 15px; }.header-cta { font-size: 14px; }
.eyebrow, .section-kicker { font-size: 12px; }.hero-search-wrap input { font-size: 16px; }.quick-links { font-size: 14px; }.quick-links button { font-size: 13px; }
.section-heading p:not(.section-kicker) { font-size: 16px; }.filter-button { padding: 10px 17px; font-size: 14px; }
.tool-card h2, .tool-card h3 { font-size: 20px; }.tool-card p { font-size: 15px; }.tool-card-bottom { font-size: 12px; }.recent-item { font-size: 15px; }.text-button { font-size: 14px; }
.privacy-copy > p:last-child { font-size: 16px; }.privacy-points span { font-size: 12px; }.privacy-points strong { font-size: 19px; }.privacy-points p { font-size: 15px; }.site-footer { font-size: 14px; }.toast { font-size: 14px; }
.sidebar-head { height: 59px; padding-inline: 18px; font-size: 15px; }.sidebar-head span { font-size: 12px; }.sidebar-search { height: 43px; }.sidebar-search input { font-size: 13px; }
.sidebar-group { padding-top: 18px; }.sidebar-group h2 { margin-bottom: 8px; font-size: 11px; }.sidebar-link { min-height: 43px; padding: 7px 10px; gap: 10px; font-size: 13px; line-height: 1.3; }.sidebar-tool-icon { width: 27px; height: 27px; }.sidebar-tool-icon svg { width: 15px; height: 15px; }.sidebar-foot { padding: 14px 16px; font-size: 11px; }
.breadcrumb { font-size: 14px; }.tool-heading p { font-size: 16px; }.workbench-bar strong { font-size: 13px; }.local-badge { font-size: 11px; }
.aside-card h2 { font-size: 16px; }.aside-card p { font-size: 14px; }.related-link { padding: 11px 0; font-size: 14px; }.tool-guide h2 { font-size: 23px; }.tool-guide p { font-size: 16px; }
.field label, .field-label { font-size: 14px; }.field-hint { font-size: 12px; }.input, .select { height: 49px; font-size: 15px; }.textarea { font-size: 15px; }.button { min-height: 46px; font-size: 14px; }
.result-box p { font-size: 14px; }.stat-box span { font-size: 12px; }.check { font-size: 14px; }.drop-zone strong { font-size: 16px; }.drop-zone p { font-size: 14px; }.status { font-size: 14px; }
.pdf-file-info strong { font-size: 15px; }.pdf-file-info span { font-size: 13px; }.pdf-list-item strong { font-size: 14px; }.pdf-list-item small { font-size: 11px; }

@media (min-width: 961px) {
  .sidebar-ready > main { margin-left: 272px; }
  .sidebar-ready > .site-footer { margin-left: max(272px, calc((100vw - var(--max)) / 2 + 272px)); }
  .tool-sidebar { width: 272px; }
}

@media (max-width: 640px) {
  .hero-description { font-size: 16px; }
  .tool-heading p { font-size: 15px; }
  .local-badge { font-size: 10px; }
  .sidebar-link { min-height: 45px; font-size: 14px; }
  .sidebar-group h2 { font-size: 12px; }
  .sidebar-search input { font-size: 14px; }
}

/* Larger content typography */
body { font-size: 18px; }
.hero-description { font-size: 19px; }
.section-heading p:not(.section-kicker) { font-size: 17px; }
.tool-card p { font-size: 16px; line-height: 1.7; }
.privacy-copy > p:last-child { font-size: 17px; }.privacy-points p { font-size: 16px; }
.breadcrumb { font-size: 15px; }.tool-heading p { font-size: 18px; }
.aside-card p { font-size: 15px; }.related-link { font-size: 15px; }
.tool-guide p { font-size: 18px; line-height: 1.85; }
.field label, .field-label { font-size: 15px; }.field-hint { font-size: 13px; }
.input, .select { font-size: 16px; }.textarea { font-size: 16px; }
.button { font-size: 15px; }.result-box p { font-size: 15px; }
.check { font-size: 15px; }.drop-zone p { font-size: 15px; }.status { font-size: 15px; }
.pdf-file-info strong { font-size: 16px; }.pdf-file-info span { font-size: 14px; }

@media (max-width: 640px) {
  body { font-size: 17px; }
  .hero-description, .tool-heading p, .tool-guide p { font-size: 17px; }
  .input, .select, .textarea { font-size: 16px; }
}

/* Large sidebar navigation */
.sidebar-head { height: 64px; font-size: 18px; }
.sidebar-head span { font-size: 14px; }
.sidebar-search { height: 48px; }
.sidebar-search input { font-size: 16px; }
.sidebar-group h2 { font-size: 14px; }
.sidebar-group summary { min-height: 51px; padding: 9px 11px; font-size: 18px; font-weight: 750; letter-spacing: 0; }
.sidebar-link { min-height: 51px; padding: 9px 11px; font-size: 18px; }
.sidebar-tool-icon { width: 32px; height: 32px; }
.sidebar-tool-icon svg { width: 18px; height: 18px; }
.sidebar-foot { font-size: 13px; }

@media (min-width: 961px) {
  .sidebar-ready > main { margin-left: 324px; }
  .sidebar-ready > .site-footer { margin-left: max(324px, calc((100vw - var(--max)) / 2 + 324px)); }
  .tool-sidebar { width: 324px; }
}

@media (max-width: 960px) {
  .tool-sidebar { width: min(340px, 90vw); }
  .sidebar-link { font-size: 18px; }
}

/* Extended tool components */
.media-picker-icon { margin: 0 auto; }.media-preview-wrap { min-height: 220px; margin-bottom: 22px; padding: 16px; display: grid; place-items: center; border-radius: 16px; background: var(--bg); }.media-preview-wrap .image-preview { margin: 0; }
.canvas-stage { min-height: 310px; padding: 18px; display: grid; place-items: center; overflow: auto; border: 1px solid var(--line); border-radius: 17px; background: repeating-conic-gradient(var(--surface-soft) 0 25%, var(--surface) 0 50%) 50% / 24px 24px; }.canvas-stage canvas { display: block; max-width: 100%; max-height: 440px; object-fit: contain; box-shadow: var(--shadow); }
.diff-output { margin-top: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 14px; }.diff-line { min-height: 34px; padding: 6px 10px; display: grid; grid-template-columns: 24px minmax(0,1fr); border-bottom: 1px solid color-mix(in srgb,var(--line) 65%,transparent); white-space: pre-wrap; overflow-wrap: anywhere; }.diff-line:last-child { border: 0; }.diff-line b { color: var(--muted); }.diff-line.add { background: color-mix(in srgb,#3dbb78 12%,var(--surface)); }.diff-line.add b { color: var(--success); }.diff-line.remove { background: color-mix(in srgb,var(--danger) 10%,var(--surface)); }.diff-line.remove b { color: var(--danger); }
.frequency-list { margin-top: 20px; display: grid; gap: 6px; }.frequency-row { min-height: 42px; padding: 7px 11px; display: grid; grid-template-columns: 30px minmax(90px,auto) minmax(80px,1fr) 55px; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); font-size: 14px; }.frequency-row > span { color: var(--muted); }.frequency-row i { height: 8px; border-radius: 10px; background: linear-gradient(90deg,var(--primary) var(--size),var(--surface-soft) var(--size)); }.frequency-row > b { text-align: right; color: var(--primary); }
.timer-panel { margin-bottom: 24px; padding: 40px 24px; text-align: center; border-radius: 20px; background: var(--bg); border: 1px solid var(--line); }.timer-panel > p { margin: 0; color: var(--primary); font-size: 15px; font-weight: 900; }.timer-panel > strong { display: block; margin: 10px 0 20px; font-size: clamp(58px,9vw,100px); line-height: 1; letter-spacing: -.07em; font-variant-numeric: tabular-nums; }.timer-progress { max-width: 520px; height: 9px; margin: 0 auto; overflow: hidden; border-radius: 10px; background: var(--surface-soft); }.timer-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--primary),var(--accent)); transition: width .25s linear; }.timer-actions { justify-content: center; }

@media (max-width: 640px) {
  .frequency-row { grid-template-columns: 24px minmax(70px,auto) 1fr 45px; gap: 7px; font-size: 13px; }
  .timer-panel { padding-inline: 12px; }
  .canvas-stage { min-height: 230px; }
}

.query-list { margin: 18px 0; display: grid; gap: 8px; }.query-row { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1fr) 44px; gap: 8px; }.query-row button { border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--danger); cursor: pointer; font-size: 20px; }
.loan-results .stat-box { min-width: 0; }.loan-results .stat-box strong { overflow-wrap: anywhere; font-size: 18px; }
.bmi-result { padding: 28px; display: flex; align-items: center; justify-content: center; gap: 24px; border: 1px solid var(--line); border-radius: 17px; background: var(--bg); }.bmi-result > strong { font-size: 60px; color: var(--primary); letter-spacing: -.06em; }.bmi-result b { font-size: 19px; }.bmi-result p { margin: 6px 0 0; color: var(--muted); font-size: 14px; }.bmi-scale { height: 12px; margin: 24px 8px 8px; display: grid; grid-template-columns: 14fr 26fr 20fr 40fr; position: relative; }.bmi-scale i:nth-child(1){background:#73a7ee}.bmi-scale i:nth-child(2){background:#4ecb8e}.bmi-scale i:nth-child(3){background:#f0b84d}.bmi-scale i:nth-child(4){background:#e66565}.bmi-scale i:first-child{border-radius:8px 0 0 8px}.bmi-scale i:nth-child(4){border-radius:0 8px 8px 0}.bmi-scale span { width: 3px; height: 22px; position: absolute; top: -5px; left: 30%; border-radius: 3px; background: var(--ink); box-shadow: 0 0 0 3px var(--surface); transition: left .2s; }
.contrast-preview { min-height: 190px; margin-bottom: 22px; padding: 28px; display: grid; place-content: center; text-align: center; border: 1px solid var(--line); border-radius: 18px; }.contrast-preview strong { font-size: 30px; }.contrast-preview p { margin: 6px 0 0; }.contrast-results { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 8px; }.contrast-results > * { min-height: 58px; padding: 10px; display: grid; place-items: center; text-align: center; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); font-size: 14px; }.contrast-results > strong { color: var(--primary); font-size: 24px; }.contrast-results .pass { color: var(--success); }.contrast-results .fail { color: var(--danger); }
.shadow-stage { min-height: 260px; margin-bottom: 26px; display: grid; place-items: center; border-radius: 18px; background: var(--surface-soft); }.shadow-stage div { width: 160px; height: 120px; border-radius: 22px; background: var(--surface); }
.lap-list { display: grid; gap: 7px; }.lap-list div { padding: 12px 16px; display: flex; justify-content: space-between; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); font-variant-numeric: tabular-nums; }.lap-list span { color: var(--muted); }.lap-list strong { color: var(--primary); }

@media (max-width: 640px) {
  .query-row { grid-template-columns: minmax(0,.7fr) minmax(0,1fr) 40px; }
  .contrast-results { grid-template-columns: 1fr 1fr; }.contrast-preview strong { font-size: 24px; }
  .bmi-result { padding: 20px 12px; gap: 15px; }.bmi-result > strong { font-size: 48px; }
}

/* Finance and tax calculators */
.official-badge { width: fit-content; margin-bottom: 20px; padding: 8px 12px; border-radius: 999px; background: color-mix(in srgb,var(--success) 12%,var(--surface)); color: var(--success); font-size: 13px; font-weight: 900; }
.salary-hero { margin: 8px 0 18px; padding: 28px; border-radius: 18px; background: linear-gradient(135deg,var(--primary),var(--primary-2)); color: #fff; }.salary-hero span { font-size: 14px; font-weight: 800; opacity: .82; }.salary-hero strong { display: block; margin-top: 6px; font-size: clamp(34px,5vw,54px); line-height: 1.15; letter-spacing: -.05em; }.salary-hero p { margin: 8px 0 0; font-size: 14px; opacity: .8; }
.breakdown-list { overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: var(--bg); }.breakdown-list > div { min-height: 51px; padding: 11px 15px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line); }.breakdown-list > div:last-child { border: 0; }.breakdown-list span { color: var(--muted); font-size: 15px; }.breakdown-list span small { margin-left: 6px; font-size: 12px; }.breakdown-list strong { text-align: right; font-size: 16px; }.breakdown-list .emphasis { background: color-mix(in srgb,var(--primary) 8%,var(--surface)); }.breakdown-list .emphasis span,.breakdown-list .emphasis strong { color: var(--primary); font-weight: 900; }
.three-stats { grid-template-columns: repeat(3,1fr); }.three-stats .stat-box { text-align: center; }.three-stats .stat-box strong { overflow-wrap: anywhere; font-size: 19px; }
.compound-chart { height: 180px; margin-top: 22px; padding: 18px 14px 25px; display: flex; align-items: end; gap: min(9px,1vw); overflow-x: auto; border: 1px solid var(--line); border-radius: 15px; background: var(--bg); }.compound-chart i { min-width: 18px; flex: 1; position: relative; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg,var(--accent),var(--primary)); }.compound-chart span { position: absolute; left: 50%; bottom: -21px; color: var(--muted); font-size: 9px; font-style: normal; transform: translateX(-50%); }
.reference-list { margin-top: 24px; padding-top: 20px; display: grid; gap: 7px; border-top: 1px solid var(--line); }.reference-list > strong { margin-bottom: 3px; font-size: 14px; }.reference-list a { padding: 9px 11px; display: flex; align-items: center; justify-content: space-between; border-radius: 9px; background: var(--bg); color: var(--primary); font-size: 14px; font-weight: 800; }.reference-list a:hover { background: var(--surface-soft); }.reference-list small { margin-top: 4px; color: var(--muted); font-size: 12px; }

@media (max-width: 640px) {
  .salary-hero { padding: 22px 18px; }.salary-hero strong { font-size: 34px; }
  .three-stats { grid-template-columns: 1fr; }.breakdown-list span { font-size: 14px; }.breakdown-list strong { font-size: 15px; }
}

/* Popular calculators */
.conversion-pair { display: grid; grid-template-columns: 1fr 42px 1fr; align-items: end; gap: 12px; }.conversion-pair > span { height: 49px; display: grid; place-items: center; color: var(--primary); font-size: 22px; }.preset-row { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 7px; }
.mini-schedule { margin-top: 18px; display: grid; grid-template-columns: repeat(auto-fit,minmax(130px,1fr)); gap: 7px; }.mini-schedule div { padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }.mini-schedule span,.mini-schedule strong { display: block; }.mini-schedule span { color: var(--muted); font-size: 12px; }.mini-schedule strong { margin-top: 4px; font-size: 14px; }
.sleep-results { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }.sleep-results div { padding: 20px 12px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); text-align: center; }.sleep-results span { color: var(--muted); font-size: 12px; }.sleep-results strong { margin: 8px 0; color: var(--primary); font-size: 30px; }.sleep-results small { padding: 4px 8px; border-radius: 999px; background: var(--surface-soft); color: var(--muted); }

@media (max-width: 640px) {
  .conversion-pair { grid-template-columns: 1fr; }.conversion-pair > span { height: 20px; }
  .sleep-results { grid-template-columns: 1fr; }.sleep-results div { grid-template-columns: 1fr 1fr auto; text-align: left; }.sleep-results strong { font-size: 26px; }
}

/* CSAT exam timer */
.csat-topline { margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }.csat-topline .official-badge { margin: 0; }.csat-topline > strong { color: var(--muted); font-size: 14px; }
.csat-panel { padding: 40px 28px 28px; border-radius: 22px; background: #17181d; color: #fff; text-align: center; }.csat-panel > p { margin: 0; color: var(--accent); font-size: 17px; font-weight: 900; }.csat-panel > strong { display: block; margin: 13px 0 25px; font-size: clamp(72px,10vw,126px); line-height: .9; letter-spacing: -.07em; font-variant-numeric: tabular-nums; }.csat-panel .timer-progress { background: #30323a; }.csat-meta { max-width: 520px; margin: 11px auto 0; display: flex; justify-content: space-between; color: #aeb0ba; font-size: 13px; }.csat-panel .button { border-color: #3b3d46; background: #25272e; color: #fff; }.csat-panel .button.primary { border-color: var(--accent); background: var(--accent); color: #17181d; }.csat-options { margin-top: 20px; justify-content: center; }.csat-options .check { color: #bfc1ca; }
.csat-panel:fullscreen { min-height: 100vh; padding: 8vh 7vw; display: grid; align-content: center; border-radius: 0; }.csat-panel:fullscreen > strong { font-size: min(26vw,240px); }.csat-panel:fullscreen > p { font-size: 30px; }
.csat-schedule { margin-top: 20px; overflow: hidden; border: 1px solid var(--line); border-radius: 17px; }.csat-schedule-head { padding: 16px; display: flex; align-items: center; justify-content: space-between; background: var(--bg); }.csat-schedule-head strong { font-size: 16px; }.csat-schedule-head span { color: var(--muted); font-size: 12px; }.csat-schedule > button { width: 100%; min-height: 56px; padding: 9px 14px; display: grid; grid-template-columns: 34px minmax(0,1fr) 50px; align-items: center; gap: 11px; border: 0; border-top: 1px solid var(--line); background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; }.csat-schedule > button:hover,.csat-schedule > button.active { background: color-mix(in srgb,var(--primary) 10%,var(--surface)); }.csat-schedule > button > i { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 8px; background: var(--surface-soft); color: var(--muted); font-size: 11px; font-style: normal; font-weight: 900; }.csat-schedule > button.active > i { background: var(--primary); color: #fff; }.csat-schedule > button > span strong,.csat-schedule > button > span small { display: block; }.csat-schedule > button > span strong { font-size: 14px; }.csat-schedule > button > span small { margin-top: 3px; color: var(--muted); font-size: 11px; }.csat-schedule > button > b { color: var(--primary); text-align: right; font-size: 13px; }.csat-schedule > button.break > b { color: var(--success); }.csat-schedule > button.transition > b { color: #d99020; }

@media (max-width: 640px) {
  .csat-panel { padding: 32px 14px 22px; }.csat-panel > strong { font-size: 72px; }.csat-options { align-items: flex-start; flex-direction: column; }.csat-schedule-head { align-items: flex-start; flex-direction: column; gap: 5px; }.csat-schedule > button { padding-inline: 10px; }.csat-topline { align-items: flex-start; flex-direction: column; }
}