:root {
  --stc-bg: #f7f1e8;
  --stc-paper: #fffaf4;
  --stc-panel: #ffffff;
  --stc-ink: #2d2926;
  --stc-muted: #6c625b;
  --stc-orange: #ff884d;
  --stc-orange-deep: #d95d39;
  --stc-green: #008b5d;
  --stc-green-deep: #176b57;
  --stc-blue: #4a90e2;
  --stc-yellow: #ffd194;
  --stc-red: #f04e4e;
  --stc-border: #ded4c9;
  --stc-focus: #155eef;
  --stc-radius: 1rem;
  --stc-shadow: 0 8px 24px rgba(71, 49, 35, .12);
  --stc-content: 1200px;
  --stc-reading: 760px;
}

* { box-sizing: border-box; }
html { font-size: 112.5%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--stc-bg);
  color: var(--stc-ink);
  font-family: "Source Sans Pro", "Segoe UI", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
}
body.stc-dark {
  --stc-bg: #1e1e1e;
  --stc-paper: #2c2c2c;
  --stc-panel: #252525;
  --stc-ink: #f5eee6;
  --stc-muted: #c8bcb0;
  --stc-border: #554b44;
  --stc-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}

a { color: var(--stc-green-deep); }
a:hover, a:focus { color: var(--stc-orange-deep); }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { min-height: 44px; }
:focus-visible { outline: 3px solid var(--stc-focus); outline-offset: 3px; }

.stc-site-header { background: var(--stc-panel); border-bottom: 1px solid var(--stc-border); }
.stc-header-inner, .stc-footer-inner, .stc-main-inner {
  width: min(calc(100% - 3rem), var(--stc-content));
  margin-inline: auto;
}
.stc-header-inner { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.stc-site-branding { display: flex; align-items: center; gap: .8rem; text-decoration: none; color: var(--stc-ink); }
.stc-brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--stc-orange); color: #fff; font-weight: 800; font-size: 1.35rem; }
.stc-site-title { font-family: Montserrat, "Segoe UI", sans-serif; font-size: 1.45rem; font-weight: 700; letter-spacing: -.02em; }
.stc-nav-list { display: flex; align-items: center; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.stc-nav-list a, .stc-nav-list button { display: inline-flex; align-items: center; padding: .55rem .8rem; border: 0; background: transparent; color: var(--stc-ink); text-decoration: none; border-radius: .5rem; cursor: pointer; }
.stc-nav-list a:hover, .stc-nav-list a:focus, .stc-nav-list button:hover, .stc-nav-list button:focus { background: #fff0e6; color: var(--stc-orange-deep); }
.stc-menu-toggle { display: none; border: 1px solid var(--stc-border); border-radius: .5rem; background: var(--stc-panel); color: var(--stc-ink); padding: .45rem .7rem; }

.stc-main-inner { padding-block: 2.4rem 3.2rem; }
.stc-hero { max-width: var(--stc-reading); margin-bottom: 1.35rem; }
.stc-eyebrow { color: var(--stc-orange-deep); font-size: .8rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
h1, h2, h3 { font-family: Montserrat, "Segoe UI", sans-serif; line-height: 1.2; }
h1 { margin: .35rem 0 .8rem; font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { margin-top: 0; font-size: clamp(1.35rem, 3vw, 2rem); }
.stc-hero p { color: var(--stc-muted); font-size: 1.08rem; }
.stc-shell-card, .stc-tool-card, .stc-help, .stc-result, .stc-ad-slot { background: var(--stc-paper); border: 1px solid var(--stc-border); border-radius: var(--stc-radius); box-shadow: var(--stc-shadow); }
.stc-shell-card { padding: clamp(1.25rem, 3vw, 2rem); }
.stc-tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.stc-tool-card { padding: 1.35rem; display: flex; flex-direction: column; min-height: 220px; }
.stc-tool-card h3 { margin: .4rem 0 .5rem; }
.stc-tool-card p { color: var(--stc-muted); margin-top: 0; }
.stc-card-link { margin-top: auto; font-weight: 700; }
.stc-planned { opacity: .72; }
.stc-category { margin: 2.4rem 0 .85rem; color: var(--stc-green-deep); }

.stc-converter { width: min(100%, 760px); margin-inline: auto; padding: clamp(1.2rem, 4vw, 2rem); background: var(--stc-paper); border-radius: var(--stc-radius); box-shadow: var(--stc-shadow); }
.stc-converter-header { text-align: center; }
.stc-converter-header h2 { color: var(--stc-orange-deep); }
.stc-mode-tabs, .stc-button-row, .stc-region-row { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; }
.stc-mode-tabs { justify-content: center; margin-bottom: 1.25rem; }
.stc-tab, .stc-button { border: 1px solid transparent; border-radius: .6rem; cursor: pointer; padding: .65rem .9rem; color: #fff; font-weight: 700; }
.stc-tab { background: var(--stc-blue); }
.stc-tab[aria-selected="true"] { background: var(--stc-orange); }
.stc-button-primary { background: var(--stc-blue); }
.stc-button-secondary { background: var(--stc-orange); }
.stc-button-success { background: #4caf50; }
.stc-button-danger { background: var(--stc-red); }
.stc-button-quiet { background: transparent; border-color: var(--stc-border); color: var(--stc-ink); }
.stc-button:hover { filter: brightness(.94); }
.stc-field { margin: 1rem 0; }
.stc-field label { display: block; margin-bottom: .35rem; font-weight: 700; }
.stc-field input, .stc-field select, .stc-field textarea { width: 100%; padding: .7rem .75rem; border: 1px solid var(--stc-border); border-radius: .6rem; background: var(--stc-panel); color: var(--stc-ink); }
.stc-unit-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: .75rem; align-items: end; }
.stc-swap { width: 48px; padding-inline: .45rem; }
.stc-result { margin-top: 1.25rem; padding: 1.1rem; color: var(--stc-green); font-size: 1.2rem; font-weight: 800; text-align: center; min-height: 72px; display: grid; place-items: center; }
.stc-status { min-height: 1.8rem; margin: .45rem 0; color: var(--stc-red); font-weight: 600; }
.stc-status[data-kind="success"] { color: var(--stc-green); }
.stc-advanced { margin-top: 1.25rem; border-top: 1px solid var(--stc-border); padding-top: 1rem; }
.stc-advanced summary { cursor: pointer; font-weight: 700; }
.stc-batch { margin-top: 1rem; }
.stc-dropzone { border: 2px dashed var(--stc-border); border-radius: .6rem; padding: .8rem; text-align: center; color: var(--stc-muted); }
.stc-ad-slot { margin: 1.35rem auto; width: min(100%, 728px); min-height: 120px; padding: 1rem; display: grid; place-items: center; color: var(--stc-muted); background: color-mix(in srgb, var(--stc-paper) 88%, var(--stc-yellow)); }
.stc-ad-label { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
.stc-help { margin-top: 1.4rem; padding: 1.25rem; box-shadow: none; }
.stc-footer { border-top: 1px solid var(--stc-border); background: var(--stc-panel); }
.stc-footer-inner { padding-block: 1.35rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: var(--stc-muted); }
.stc-footer-links { display: flex; flex-wrap: wrap; gap: 1rem; }
.stc-noscript { margin: 1rem auto; width: min(calc(100% - 3rem), var(--stc-content)); padding: 1rem; background: #fff0e6; border-left: 4px solid var(--stc-orange); }

@media (max-width: 760px) {
  .stc-header-inner, .stc-footer-inner, .stc-main-inner { width: min(calc(100% - 2rem), var(--stc-content)); }
  .stc-header-inner { min-height: 72px; }
  .stc-site-title { font-size: 1.18rem; }
  .stc-brand-mark { width: 36px; height: 36px; font-size: 1.1rem; }
  .stc-site-branding { gap: .5rem; }
  .stc-menu-toggle { display: inline-flex; }
  .stc-nav { display: none; width: 100%; }
  .stc-nav.is-open { display: block; }
  .stc-nav-list { flex-direction: column; align-items: stretch; padding: .5rem 0 1rem; }
  .stc-nav-list a, .stc-nav-list button { justify-content: flex-start; }
  .stc-header-inner { flex-wrap: wrap; }
  .stc-header-inner .stc-nav { order: 3; }
  .stc-tool-grid { grid-template-columns: 1fr; }
  .stc-unit-row { grid-template-columns: 1fr; }
  .stc-swap { width: 100%; }
  .stc-field { margin: .7rem 0; }
  .stc-button-row { display: grid; grid-template-columns: 1fr; }
  .stc-main-inner { padding-block: 1.5rem 2.25rem; }
}
@media (max-width: 480px) {
  .stc-converter { padding: 1rem; }
  .stc-mode-tabs { margin-bottom: .85rem; }
  .stc-help { margin-top: 1rem; padding: 1rem; }
  .stc-ad-slot { margin-block: 1rem; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }