:root {
  color-scheme: light;
  --ink: #13264a;
  --muted: #4e6581;
  --blue: #075db6;
  --blue-strong: #0d69c4;
  --line: #d5e3f2;
  --field-line: #b5cce6;
  --pale: #e8f3ff;
  --panel: #f7faff;
  --green: #096146;
  --radius: 12px;
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; margin: 0; color: var(--ink); background: #fff; }
a { color: var(--blue); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .58; }
:focus-visible { outline: 3px solid #1674cc; outline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.25; }
h1 { font-size: clamp(1.55rem, 2.45vw, 2.3rem); letter-spacing: -.025em; }
h2 { font-size: clamp(1.2rem, 1.8vw, 1.45rem); }
h3 { font-size: 1.05rem; }
svg { width: 1.2em; height: 1.2em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.visually-hidden, .skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link:focus { position: fixed; z-index: 10; top: 12px; left: 12px; padding: 8px 14px; color: #fff; background: var(--blue); border-radius: 6px; }

.shell { width: min(100%, 1590px); margin-inline: auto; padding-inline: clamp(16px, 2.45vw, 39px); }
.layout { display: grid; flex: 1 0 auto; grid-template-columns: clamp(188px, 15.4vw, 236px) minmax(0, 1fr); gap: clamp(19px, 2.15vw, 34px); align-items: start; padding-top: clamp(12px, 1.35vw, 22px); }
.sidebar { position: sticky; top: 16px; display: flex; flex-direction: column; min-height: 575px; padding: 18px 10px 16px; border: 1px solid #cfe2f7; border-radius: var(--radius); background: linear-gradient(155deg, #f0f7ff, #e7f2ff); }
.brand { display: grid; justify-items: center; padding-bottom: 14px; margin: 0 7px 16px; border-bottom: 1px solid #c9def3; }
.brand img { display: block; width: min(100%, 184px); height: auto; }
.menu { display: grid; gap: 6px; }
.menu a, .article-menu { position: relative; display: flex; align-items: center; gap: 11px; min-height: 46px; padding: 8px 10px 8px 14px; border-radius: 8px; color: var(--ink); font-size: .91rem; font-weight: 520; line-height: 1.25; text-decoration: none; }
.menu a:hover { background: #deefff; }
.menu a[aria-current] { color: #075aa9; background: #d7ebff; font-weight: 710; }
.menu a[aria-current]::before { content: ""; position: absolute; inset: 7px auto 7px 0; width: 3px; border-radius: 3px; background: #147ad9; }
.menu svg { width: 19px; height: 19px; }
.menu-bottom { margin: auto 7px 0; padding-top: 10px; border-top: 1px solid #c9def3; }
.article-menu { isolation: isolate; padding-right: 26px; color: #075aa9; font-weight: 680; }
.article-menu::before { content: ""; position: absolute; z-index: -1; inset: 0; background: #d7ebff; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%); }
.article-menu:hover::before, .article-menu[aria-current]::before { background: #cbe3fa; }
.main { min-width: 0; }
.page-heading { padding: 12px 16px 14px; border: 1px solid #d1e4f9; border-radius: var(--radius); text-align: center; background: var(--pale); margin-bottom: 23px; }
.work-grid { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(245px, .95fr); gap: 20px clamp(16px, 1.85vw, 27px); align-items: start; }
.work-grid > .tool-form { grid-column: 1; grid-row: 1; }
.work-grid > .result { grid-column: 2; grid-row: 1; }
.panel { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(15px, 1.6vw, 24px); background: #fff; }
.tool-form { margin: 0; }
.form-heading { margin-bottom: 15px; }
.tabs { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; margin-bottom: 19px; padding-bottom: 11px; border-bottom: 1px solid var(--line); }
.tabs button { flex: 1 1 auto; border: 1px solid transparent; border-radius: 7px; padding: 7px 10px; min-height: 42px; color: var(--ink); background: transparent; font-size: .92rem; }
.tabs button:hover { background: #f0f7ff; }
.tabs button[aria-pressed="true"] { color: #075aa9; background: #d8ebff; font-weight: 700; }
.fields { display: grid; gap: 12px; align-items: end; }
.converter-fields { grid-template-columns: minmax(0, .9fr) minmax(0, 1.08fr) auto minmax(0, 1.14fr); }
.number-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field { display: grid; gap: 5px; min-width: 0; font-size: .92rem; }
.field input, .field select, .field textarea { display: block; min-width: 0; width: 100%; min-height: 43px; padding: 8px 10px; border: 1px solid var(--field-line); border-radius: 7px; color: var(--ink); background: #fff; font-size: 1rem; line-height: 1.3; }
.field select { padding-right: 6px; }
.field textarea { min-height: 90px; resize: vertical; }
@supports (field-sizing: content) {
  .field textarea { field-sizing: content; resize: none; }
}
.field :is(input, select, textarea):focus { border-color: var(--blue-strong); }
.short-field { max-width: 195px; }
.symbol-fields { display: grid; gap: 14px; }
.field-hint { color: var(--muted); font-size: .85rem; }
.choices { display: flex; flex-wrap: wrap; gap: 9px 21px; margin: 17px 0 0; }
fieldset.choices { padding: 0; border: 0; }
.choices legend { padding: 0; margin-bottom: 7px; font-size: .9rem; font-weight: 650; }
.check { display: inline-flex; gap: 8px; align-items: center; min-height: 27px; font-size: .91rem; cursor: pointer; }
.check input { width: 17px; height: 17px; margin: 0; accent-color: var(--blue-strong); flex: 0 0 auto; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 19px; }
.converter-actions { justify-content: flex-end; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 43px; padding: 7px 14px; border: 1px solid var(--blue); border-radius: 7px; color: var(--blue); background: #fff; font-size: .91rem; font-weight: 650; line-height: 1.2; text-decoration: none; }
.button:hover { background: #edf6ff; }
.button-primary { color: #fff; border-color: var(--blue-strong); background: var(--blue-strong); }
.button-primary:hover { color: #fff; background: #095bac; }
.button-quiet { border-color: transparent; color: var(--muted); background: transparent; padding-inline: 8px; }
.button-swap { width: 43px; padding: 0; background: #f3f8ff; }
.expression-field { margin-bottom: 14px; }
.keypad { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; max-width: 490px; }
.keypad button { min-width: 0; padding-inline: 3px; background: #f2f8ff; }
.keypad button:hover { background: #e2f0ff; }
.keypad .button-primary { background: var(--blue-strong); }
.keypad .button-primary:hover { background: #095bac; }
.keypad-equals { grid-column: 1 / -1; }
.extra-field { margin-top: 13px; }
.fraction-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(85px, .62fr) minmax(0, 1fr); gap: 10px; align-items: center; }
.fraction-input { display: grid; gap: 7px; min-width: 0; margin: 0; padding: 0; border: 0; }
.fraction-input legend { margin-bottom: 7px; font-weight: 650; }
.fraction-input .field + .field { border-top: 1px solid var(--field-line); padding-top: 6px; }
.pair-fields, .spoon-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qr-preview { display: block; width: min(100%, 235px); height: auto; margin: 0 auto 12px; border: 1px solid var(--line); background: #fff; image-rendering: pixelated; }
.laps-panel { margin-top: 20px; }
.laps-list { margin: 10px 0 0; padding-left: 32px; font-variant-numeric: tabular-nums; }
.laps-list li { padding-block: 5px; overflow-wrap: anywhere; }
.laps-list li + li { border-top: 1px solid var(--line); }
.spoon-table { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: .9rem; }
.spoon-table :is(th, td) { padding: 6px 5px; border-bottom: 1px solid var(--line); text-align: left; }
.spoon-table td { font-variant-numeric: tabular-nums; }
.message { margin-top: 11px; font-size: .87rem; color: #a12222; }
.result { background: #eff8f7; }
.result h2 { margin-bottom: 14px; }
.result-value { display: block; min-height: 64px; padding: 11px 13px; border-radius: 8px; background: #d4f2e7; color: var(--green); font-size: clamp(1.38rem, 2.8vw, 2.55rem); font-weight: 760; font-variant-numeric: tabular-nums; line-height: 1.2; overflow-wrap: anywhere; white-space: pre-wrap; }
.result[data-kind="generated"] .result-value { font-family: ui-monospace, Consolas, monospace; font-size: clamp(1.12rem, 2.1vw, 1.75rem); }
.result[data-kind="generated"] .result-value[data-wide] { font-size: clamp(1rem, 1.45vw, 1.28rem); line-height: 1.35; }
.result-detail { margin: 12px 0; color: #243c52; overflow-wrap: anywhere; }
.copy-status { display: block; min-height: 1.4em; margin-top: 7px; color: #225048; font-size: .84rem; }
.copy-status:empty { display: none; }

.article-section { margin-top: 28px; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 14px; }
.section-heading a { font-size: .88rem; white-space: nowrap; }
.article-categories { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.article-categories a { display: inline-flex; align-items: center; min-height: 38px; padding: 4px 11px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); font-size: .9rem; }
.article-section[id] { scroll-margin-top: 15px; }
.article-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.article-card { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; min-height: 188px; background: #f8fbfe; }
.article-card .category { color: var(--muted); font-size: .77rem; }
.article-card p { color: var(--muted); font-size: .89rem; }
.article-card a { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 3px; font-size: .87rem; font-weight: 650; }
.home-intro { max-width: 70ch; margin: 0 auto 24px; color: var(--muted); text-align: center; }
.tool-catalog { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.tool-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 15px; background: #f8fbfe; color: var(--ink); text-decoration: none; }
.tool-card:hover { border-color: var(--field-line); background: var(--panel); text-decoration: none; }
.tool-card > svg { width: 42px; height: 42px; padding: 10px; border: 1px solid #d1e4f9; border-radius: 10px; background: var(--pale); color: var(--blue); }
.tool-card h3 { font-size: clamp(1rem, 1.5vw, 1.2rem); }
.tool-card p { margin-top: 6px; color: var(--muted); font-size: .89rem; }
.tool-card .tool-card-action { display: block; margin-top: 10px; color: var(--blue); font-size: .87rem; font-weight: 650; }
.tool-card:hover .tool-card-action { text-decoration: underline; }
.intro { margin: 18px 0 20px; color: var(--muted); max-width: 78ch; }
.tool-help { max-width: 79ch; margin-top: 27px; }
.tool-help > h2 { margin-bottom: 12px; }
.hint { min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.hint + .hint { margin-top: 8px; }
.hint > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; padding: 10px 15px; border-radius: 7px; background: var(--pale); color: #24496d; font-size: .9rem; font-weight: 680; list-style: none; cursor: pointer; }
.hint > summary::-webkit-details-marker { display: none; }
.hint > summary:hover { background: #dcecff; }
.hint > summary::after { content: ''; flex: 0 0 12px; height: 12px; background: linear-gradient(#4373a0, #4373a0) center / 12px 1px no-repeat, linear-gradient(#4373a0, #4373a0) center / 1px 12px no-repeat; }
.hint[open] > summary { border-radius: 7px 7px 0 0; }
.hint[open] > summary::after { background-size: 12px 1px, 0 0; }
.hint-body { padding: 12px 15px; overflow-wrap: anywhere; }
.hint-body > :first-child { margin-top: 0; }
.reading { max-width: 76ch; }
.reading h2:not(:first-child) { margin-top: 24px; }
.reading h3 { margin-top: 16px; }
.reading p, .reading ul, .reading ol { margin-top: 8px; }
.reading ul, .reading ol { padding-left: 22px; }
.reading li + li { margin-top: 5px; }
.document-layout > .reading { max-width: none; overflow-wrap: anywhere; }
.site-document > section:not(:first-child) { margin-top: 24px; }
.site-document > .article-lead, .article-reading > p:first-child { padding: 12px 15px; border-inline-start: 3px solid #a8cdef; border-radius: 6px; background: #f1f7ff; }
.site-document > .document-updated { margin-top: 24px; color: var(--muted); font-size: .88rem; }
.site-document > .about-contact { margin-top: 24px; padding-inline-start: 12px; border-inline-start: 3px solid var(--blue); color: var(--muted); line-height: 1.6; }
.about-contact a { color: inherit; font-weight: 700; }
.article-reading { line-height: 1.65; }
.article-reading > p:first-child { margin-top: 0; }
.article-reading > h2 { margin-top: 26px; }
.article-reading > h3 { margin-top: 17px; }
.article-reading > p + p { margin-top: 12px; }
.article-reading > :is(ul, ol) { margin-bottom: 12px; }
.article-reading code { overflow-wrap: anywhere; }
.breadcrumbs { margin-bottom: 8px; font-size: .86rem; }
.cta { margin-top: 20px; }
.footer { margin-top: 35px; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; border-top: 1px solid var(--line); padding: 15px clamp(12px, 2vw, 27px); background: #f1f7fd; color: var(--muted); font-size: .81rem; }
.footer-links, .notice-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 13px; }
.footer-links a, .notice-links a { color: #365776; }
.footer-links a + a { border-left: 1px solid #c4d8ed; padding-left: 12px; }
.notice { position: fixed; z-index: 5; inset: auto 15px max(12px, env(safe-area-inset-bottom)) 15px; width: auto; max-width: 1150px; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 24px; padding: 15px 19px; border: 1px solid #bbd7f5; border-radius: 12px; box-shadow: 0 9px 30px #1e4c7524; background: #eef6ff; }
.notice h2 { font-size: 1rem; }
.notice p { margin-top: 5px; color: #3c5677; font-size: .83rem; }
.notice-links { margin-top: 7px; font-size: .8rem; }
.notice .button { min-width: 107px; }

@media (min-width: 1280px) {
  .document-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); column-gap: clamp(16px, 1.85vw, 27px); align-items: start; }
  .document-layout > .page-heading { grid-column: 1 / -1; }
  .document-layout > :is(.breadcrumbs, .reading) { grid-column: 1; }
}

@media (max-width: 1180px) {
  .work-grid { grid-template-columns: minmax(0, 1fr) minmax(211px, .53fr); }
  .converter-fields { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .value-field { grid-column: 1 / -1; }
}

@media (max-width: 1020px) {
  .layout { grid-template-columns: minmax(0, 1fr); gap: 15px; }
  .sidebar { position: static; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; min-height: 0; padding: 8px 10px; }
  .brand { justify-self: start; width: min(100%, 112px); padding: 0; margin: 0; border-bottom: 0; }
  .menu { grid-row: 2; grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .menu a, .article-menu { min-height: 40px; padding: 6px 8px; gap: 5px; font-size: .83rem; }
  .menu svg { width: 16px; height: 16px; }
  .menu-bottom { grid-row: 1; grid-column: 2; margin: 0; padding: 0; border: 0; }
  .article-menu { padding-inline: 9px 19px; }
  .article-menu::before { clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%); }
}

@media (min-width: 761px) {
  .work-grid:has(.result-value[data-wide]) { grid-template-columns: minmax(275px, 1fr) minmax(0, 1.45fr); }
  .article-grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1021px) and (max-height: 830px) {
  .sidebar { position: static; }
}

@media (max-width: 760px) {
  .sidebar { display: grid; grid-template-columns: 1fr auto; padding: 8px; }
  .menu { grid-row: 2; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menu a, .article-menu { min-height: 42px; }
  .menu-bottom { grid-row: 1; grid-column: 2; }
  .work-grid { grid-template-columns: minmax(0, 1fr); }
  .work-grid > :is(.tool-form, .result) { grid-column: auto; grid-row: auto; }
  .converter-fields { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) auto minmax(0, 1fr); }
  .value-field { grid-column: auto; }
  .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-heading { margin-bottom: 14px; }
  .article-section { margin-top: 21px; }
}

@media (max-width: 500px) {
  .shell { padding-inline: 12px; }
  .page-heading { padding: 10px; }
  .tabs { gap: 3px; margin-bottom: 13px; }
  .tabs button { flex: 1 1 auto; padding-inline: 6px; }
  .fields { gap: 8px; }
  .converter-fields { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .value-field { grid-column: 1 / -1; }
  .fraction-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fraction-operation { grid-column: 1 / -1; grid-row: 1; }
  .pair-fields { grid-template-columns: minmax(0, 1fr); }
  .article-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .article-card { min-height: 0; }
  .tool-catalog { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .notice { grid-template-columns: minmax(0, 1fr); gap: 8px; inset-inline: 10px; padding: 11px 13px; }
  .notice .button { justify-self: end; min-height: 38px; }
  .footer-links a + a { border: 0; padding-left: 0; }
}

@media (max-height: 460px) {
  .notice { gap: 6px 12px; padding: 8px 12px; }
}