/* Visual refinement — local-first product system */
:root {
  --atlas-violet: #625ff0;
  --atlas-violet-deep: #3d3fae;
  --atlas-cyan: #50c7da;
  --atlas-mint: #58c995;
  --atlas-amber: #f3b84f;
  --atlas-coral: #f57f91;
  --atlas-night: #151b31;
  --atlas-soft-line: rgba(45, 53, 91, .1);
  --atlas-focus: 0 0 0 4px rgba(98, 95, 240, .12);
  --atlas-ease: cubic-bezier(.22, .78, .22, 1);
}

html {
  scroll-behavior: auto;
  scroll-padding-top: 112px;
}

body {
  padding-top: 90px;
  background:
    radial-gradient(circle at 12% 5%, rgba(190, 181, 255, .36), transparent 25%),
    radial-gradient(circle at 93% 13%, rgba(98, 215, 239, .22), transparent 22%),
    radial-gradient(circle at 54% 30%, rgba(255, 218, 142, .12), transparent 20%),
    linear-gradient(180deg, #fbfbff 0%, #f4f5fc 42%, #fbfbfe 100%);
}

.noise {
  contain: strict;
  transform: translateZ(0);
  will-change: transform;
}

.proof-strip,
.workspace-wrap,
.dictionary-section,
.explain,
.coverage,
.scenario-section,
.privacy-section {
  contain: layout style;
}

main {
  overflow: clip;
}

.site-header {
  position: fixed;
  top: 18px;
  left: 50%;
  z-index: 1000;
  isolation: isolate;
  margin: 0;
  transform: translateX(-50%);
  border-color: rgba(48, 55, 91, .08);
  contain: paint;
  background: linear-gradient(108deg, rgba(255,255,255,.98), rgba(244,246,255,.97) 52%, rgba(250,253,255,.98));
  box-shadow: 0 16px 48px rgba(39, 46, 82, .09), inset 0 1px 0 rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  will-change: transform;
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(105deg, rgba(255,255,255,.58), rgba(232,235,255,.32), rgba(255,255,255,.72));
}

.site-header::after {
  content: "";
  position: absolute;
  right: 8%;
  bottom: -1px;
  left: 8%;
  z-index: -1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(112, 112, 236, .34), rgba(79, 188, 202, .22), transparent);
  box-shadow: 0 10px 28px rgba(83, 82, 200, .15);
  pointer-events: none;
}

.brand-mark {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, #7d78fa, #4d51d2 66%, #4148ad);
  box-shadow: 0 9px 24px rgba(70, 72, 191, .3), inset 0 1px 0 rgba(255,255,255,.42);
}

.brand-mark::after {
  content: "";
  position: absolute;
  inset: -55% 35% 30% -35%;
  background: rgba(255,255,255,.28);
  transform: rotate(24deg);
}

.hero {
  min-height: 720px;
  padding-top: 88px;
}

.hero-copy {
  position: relative;
  z-index: 2;
}

.hero-copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 250px;
  height: 250px;
  left: -120px;
  top: 80px;
  border-radius: 50%;
  background: rgba(138, 121, 246, .1);
  filter: blur(42px);
}

.hero h1 {
  text-wrap: balance;
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
}

.hero h1 em {
  background-image: linear-gradient(105deg, #4d50cd 0%, #8269ec 48%, #3e91c7 100%);
  text-shadow: none;
  -webkit-text-fill-color: transparent;
}

.hero-lead {
  max-width: 570px;
}

.hero-signal-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.hero-signal-row span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border: 1px solid rgba(52, 60, 100, .08);
  border-radius: 999px;
  background: rgba(255,255,255,.66);
  color: #687086;
  box-shadow: 0 7px 20px rgba(51, 58, 96, .05), inset 0 1px 0 rgba(255,255,255,.9);
  font-size: 9px;
  font-weight: 750;
  backdrop-filter: blur(12px);
}

.hero-signal-row i {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 7px;
  background: #ebeaff;
  color: #5b5dd4;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 8px;
  font-style: normal;
}

.hero-signal-row span:nth-child(2) i { background: #e2f8ec; color: #318360; }
.hero-signal-row span:nth-child(3) i { background: #fff0ce; color: #9b6d20; }

.hero-actions {
  margin-top: 28px;
}

.primary-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, #696af0, #4c4ecb 75%);
}

.primary-cta::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(105deg, transparent 25%, rgba(255,255,255,.25) 44%, transparent 62%);
  transform: translateX(-110%);
  transition: transform .55s var(--atlas-ease);
}

.primary-cta:hover::before { transform: translateX(110%); }

.hero-visual {
  height: 525px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 44px;
  background:
    linear-gradient(rgba(91, 95, 172, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91, 95, 172, .055) 1px, transparent 1px),
    radial-gradient(circle at 27% 23%, rgba(113, 224, 245, .32), transparent 29%),
    radial-gradient(circle at 79% 77%, rgba(255, 198, 111, .26), transparent 31%),
    linear-gradient(145deg, rgba(244,244,255,.74), rgba(255,255,255,.28));
  background-size: 28px 28px, 28px 28px, auto, auto, auto;
  box-shadow: 0 34px 80px rgba(56, 58, 121, .16), inset 0 1px 0 rgba(255,255,255,.88);
  filter: none;
  backdrop-filter: blur(18px);
}

.hero-visual::after {
  inset: 8% 2% 2% 4%;
  filter: blur(40px);
}

.hero-art {
  inset: -3% -2% -1%;
  width: 104%;
  height: 105%;
  animation: atlas-float 7s var(--atlas-ease) infinite alternate;
}

.formula-ticket {
  border-color: rgba(67, 72, 118, .11);
  box-shadow: 0 22px 50px rgba(41, 44, 87, .19), inset 0 1px 0 rgba(255,255,255,.92);
  animation: ticket-drift 5.5s var(--atlas-ease) infinite alternate;
}

.ticket-target { animation-delay: -2.1s; }

.hero-node {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(42, 49, 93, .16), inset 0 1px 0 rgba(255,255,255,.65);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 850;
  backdrop-filter: blur(12px);
  animation: node-pulse 4.8s ease-in-out infinite;
}

body[data-hero-motion="paused"] .hero-art,
body[data-hero-motion="paused"] .formula-ticket,
body[data-hero-motion="paused"] .hero-node {
  animation-play-state: paused;
}

.node-fx {
  top: 17%;
  right: 7%;
  width: 48px;
  height: 48px;
  background: rgba(118, 114, 242, .92);
  color: white;
  transform: rotate(8deg);
}

.node-array {
  left: 8%;
  bottom: 24%;
  width: 44px;
  height: 44px;
  background: rgba(255, 216, 125, .94);
  color: #7c5719;
  transform: rotate(-7deg);
  animation-delay: -1.6s;
}

.node-check {
  right: 19%;
  bottom: 7%;
  width: 40px;
  height: 40px;
  background: rgba(104, 218, 171, .92);
  color: #225f49;
  animation-delay: -3s;
}

.hero-radar-caption {
  position: absolute;
  z-index: 5;
  top: 24px;
  left: 26px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(55, 62, 104, .08);
  border-radius: 999px;
  background: rgba(255,255,255,.68);
  color: #717991;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .12em;
  box-shadow: 0 8px 20px rgba(48,55,93,.08);
  backdrop-filter: blur(14px);
}

.hero-radar-caption i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #58c995;
  box-shadow: 0 0 0 5px rgba(88,201,149,.13);
}

.hero-radar-caption b {
  padding-left: 7px;
  border-left: 1px solid rgba(53,60,97,.1);
  color: #5457cc;
}

.proof-strip {
  position: relative;
  margin-top: -10px;
  overflow: hidden;
  box-shadow: 0 22px 58px rgba(43, 50, 87, .09), inset 0 1px 0 white;
}

.proof-strip::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, var(--atlas-violet), var(--atlas-cyan), var(--atlas-amber));
}

.proof-icon {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), 0 8px 20px rgba(45,52,88,.06);
}

.workspace-wrap {
  background:
    radial-gradient(circle at 10% 8%, rgba(130, 115, 246, .31), transparent 29%),
    radial-gradient(circle at 90% 11%, rgba(255, 156, 185, .21), transparent 26%),
    radial-gradient(circle at 89% 83%, rgba(71, 199, 217, .22), transparent 28%),
    linear-gradient(150deg, #e9ebff 0%, #f8f7ff 45%, #e8f6f8 100%);
}

.workspace-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 18px 42px;
}

.workspace-head p {
  margin: 0 0 5px;
}

.workspace-pipeline {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(36px, 1fr) auto minmax(36px, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  border: 1px solid rgba(49, 57, 98, .08);
  border-radius: 16px;
  background: rgba(255,255,255,.58);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
  backdrop-filter: blur(12px);
}

.workspace-pipeline span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #697188;
  font-size: 9px;
  font-weight: 750;
  white-space: nowrap;
}

.workspace-pipeline b {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 8px;
  background: #e5e3ff;
  color: #595bcf;
  font-size: 8px;
}

.workspace-pipeline span:nth-of-type(2) b { background: #fff0cc; color: #94681f; }
.workspace-pipeline span:nth-of-type(3) b { background: #dcf6e9; color: #357b5a; }

.workspace-pipeline i {
  height: 1px;
  background: linear-gradient(90deg, rgba(93,96,219,.18), rgba(79,194,208,.4), rgba(93,96,219,.18));
}

.workspace {
  gap: 18px;
}

.card {
  border-color: rgba(42, 50, 88, .09);
  box-shadow: 0 28px 64px rgba(42, 49, 84, .12), inset 0 1px 0 rgba(255,255,255,.92);
  transition: transform .28s var(--atlas-ease), box-shadow .28s var(--atlas-ease), border-color .28s ease;
}

.card:hover {
  border-color: rgba(85, 87, 190, .15);
  box-shadow: 0 34px 76px rgba(42, 49, 84, .15), inset 0 1px 0 rgba(255,255,255,.96);
}

.route-panel {
  background:
    radial-gradient(circle at 0 0, rgba(124, 116, 241, .1), transparent 25%),
    rgba(255,255,255,.8);
}

.select-wrap,
.locale-format-box,
.segment-control span,
.mode-toggle,
textarea,
.dictionary-search,
.dictionary-select,
.favorites-toggle {
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease;
}

.select-wrap:hover,
.locale-format-box:hover {
  border-color: rgba(98,95,240,.18);
  box-shadow: 0 9px 24px rgba(52,59,96,.07);
}

.swap-button b {
  box-shadow: 0 5px 14px rgba(77,79,192,.12);
}

textarea {
  padding: 22px;
  line-height: 1.75;
  background:
    linear-gradient(90deg, rgba(101,104,202,.055) 1px, transparent 1px),
    linear-gradient(rgba(101,104,202,.055) 1px, transparent 1px),
    #fafbfe;
  background-size: 24px 24px;
}

textarea:focus {
  background:
    linear-gradient(90deg, rgba(101,104,202,.04) 1px, transparent 1px),
    linear-gradient(rgba(101,104,202,.04) 1px, transparent 1px),
    #fff;
  background-size: 24px 24px;
  box-shadow: var(--atlas-focus), 0 14px 30px rgba(47,54,91,.07);
}

.translate-button {
  position: relative;
  overflow: hidden;
  min-height: 49px;
  background: linear-gradient(110deg, #696bf0, #5355d6 60%, #4e77d3);
}

.translate-button::before {
  content: "";
  position: absolute;
  top: -80%;
  bottom: -80%;
  left: -28%;
  width: 22%;
  background: rgba(255,255,255,.23);
  transform: rotate(18deg);
  transition: left .55s var(--atlas-ease);
}

.translate-button:hover:not(:disabled)::before { left: 112%; }

.result-panel {
  background:
    radial-gradient(circle at 100% 0, rgba(133, 124, 244, .13), transparent 28%),
    linear-gradient(155deg, rgba(253,252,255,.98), rgba(239,240,255,.97));
}

.result-panel[data-state="success"] {
  border-color: rgba(75, 175, 125, .18);
}

.result-panel[data-state="success"]::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 180px;
  height: 180px;
  right: -90px;
  top: -90px;
  border-radius: 50%;
  background: rgba(87, 207, 151, .11);
  animation: success-bloom .7s var(--atlas-ease) both;
  pointer-events: none;
}

.result-panel > * { position: relative; z-index: 1; }

.result-display {
  position: relative;
  overflow: auto;
  border: 1px solid rgba(153, 158, 220, .14);
  background:
    linear-gradient(rgba(132, 140, 202, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(132, 140, 202, .045) 1px, transparent 1px),
    radial-gradient(circle at 95% 0%, rgba(113, 100, 229, .3), transparent 37%),
    linear-gradient(145deg, #1d243b, #151a2d);
  background-size: 24px 24px, 24px 24px, auto, auto;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 38px rgba(28,34,57,.18);
}

.result-display:not(.empty)::before {
  content: "AST OUTPUT";
  position: absolute;
  top: 14px;
  right: 16px;
  color: rgba(219,222,255,.34);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .14em;
}

.result-panel[data-state="success"] .result-display code {
  animation: result-reveal .48s var(--atlas-ease) both;
}

.result-diff-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 11px 2px 2px;
  color: #858da1;
  font-size: 7px;
  font-weight: 700;
}

.result-diff-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.result-diff-legend i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(80,86,140,.05);
}

.legend-function { background: #8881ff; }
.legend-keyword { background: #58c995; }
.legend-error { background: #f57f91; }
.legend-number { background: #53d7bd; }
.legend-separator { background: #f3b84f; }

.diagnostics {
  gap: 9px;
}

.metric {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,.76);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.metric::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: #817cf0;
}

.metric:nth-child(2)::before { background: #f0b54d; }
.metric:nth-child(3)::before { background: #55c690; }

.dictionary-card {
  border-color: rgba(48,55,92,.09);
  background:
    radial-gradient(circle at 100% 0, rgba(113,108,239,.09), transparent 22%),
    rgba(255,255,255,.86);
  box-shadow: 0 30px 82px rgba(41,48,84,.13), inset 0 1px 0 white;
}

.dictionary-item {
  overflow: hidden;
}

.dictionary-item::after {
  content: "";
  position: absolute;
  width: 72px;
  height: 72px;
  right: -46px;
  bottom: -48px;
  border-radius: 50%;
  background: rgba(100,99,224,.08);
  transition: transform .28s var(--atlas-ease);
}

.dictionary-item:hover::after { transform: scale(1.8); }

.scenario-section {
  position: relative;
  padding-block: 122px 42px;
  overflow: hidden;
  isolation: isolate;
}

.scenario-section::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 520px;
  height: 520px;
  left: -260px;
  top: 40px;
  border-radius: 50%;
  background: rgba(120, 111, 241, .1);
  filter: blur(40px);
}

.scenario-inner {
  position: relative;
  z-index: 1;
}

.scenario-head {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  align-items: end;
  gap: 56px;
}

.scenario-head h2 {
  margin: 18px 0 0;
  color: #171d30;
  font-size: clamp(41px, 4.7vw, 62px);
  line-height: 1.08;
  letter-spacing: -.05em;
}

.scenario-head p {
  margin: 0 0 8px;
  color: #737b90;
  font-size: 12px;
  line-height: 1.85;
}

.scenario-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 50px;
}

.scenario-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(38, 46, 83, .09);
  border-radius: 26px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 20px 54px rgba(42,49,84,.09), inset 0 1px 0 rgba(255,255,255,.9);
  transition: transform .28s var(--atlas-ease), box-shadow .28s ease;
}

.scenario-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 30px 68px rgba(42,49,84,.14), inset 0 1px 0 rgba(255,255,255,.94);
}

.scenario-card figure {
  height: 236px;
  margin: 0;
  overflow: hidden;
  border-radius: 25px 25px 0 0;
  background: #eff0ff;
}

.scenario-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s var(--atlas-ease), filter .55s ease;
}

.scenario-card:hover img { transform: scale(1.035); filter: saturate(1.05); }

.scenario-copy {
  position: relative;
  padding: 25px 26px 28px;
}

.scenario-tag {
  color: #6569d5;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .14em;
}

.scenario-offline .scenario-tag { color: #4d9aac; }
.scenario-privacy .scenario-tag { color: #3a926a; }

.scenario-copy h3 {
  margin: 11px 0 9px;
  color: #262d43;
  font-size: 18px;
  letter-spacing: -.025em;
}

.scenario-copy p {
  margin: 0;
  color: #788094;
  font-size: 10px;
  line-height: 1.75;
}

.privacy-section {
  padding-top: 70px;
}

.privacy-card {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 0%, rgba(130,226,177,.34), transparent 32%),
    radial-gradient(circle at 94% 100%, rgba(96,112,218,.19), transparent 30%),
    linear-gradient(135deg, #18332c, #214b3c 70%, #243e48);
}

.privacy-card::after {
  content: "⌁";
  position: absolute;
  right: -12px;
  bottom: -58px;
  color: rgba(255,255,255,.04);
  font-size: 220px;
  line-height: 1;
  transform: rotate(-12deg);
}

.privacy-card > * { position: relative; z-index: 1; }

@keyframes atlas-float {
  from { transform: translate3d(0, -3px, 0) rotate(-.3deg); }
  to { transform: translate3d(0, 8px, 0) rotate(.5deg); }
}

@keyframes ticket-drift {
  from { translate: 0 -2px; }
  to { translate: 0 6px; }
}

@keyframes node-pulse {
  0%, 100% { scale: 1; box-shadow: 0 12px 30px rgba(42,49,93,.16), 0 0 0 0 rgba(104,105,230,.12); }
  50% { scale: 1.06; box-shadow: 0 17px 34px rgba(42,49,93,.19), 0 0 0 8px rgba(104,105,230,0); }
}

@keyframes success-bloom {
  from { opacity: 0; transform: scale(.3); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes result-reveal {
  from { opacity: 0; transform: translateY(8px); filter: blur(3px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@media (max-width: 1050px) {
  .scenario-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scenario-card:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
  .scenario-card:last-child figure { height: 100%; min-height: 250px; }
}

@media (max-width: 820px) {
  html { scroll-padding-top: 100px; }
  body { padding-top: 88px; }
  .site-header { top: 12px; }
  .hero { padding-top: 72px; }
  .hero-visual { width: min(620px, 100%); margin-inline: auto; }
  .workspace-head,
  .scenario-head { grid-template-columns: 1fr; align-items: start; gap: 20px; }
  .workspace-pipeline { margin-top: 5px; }
  .scenario-head p { max-width: 570px; }
}

@media (max-width: 560px) {
  html { scroll-padding-top: 92px; }
  body { padding-top: 82px; }
  .site-header { top: 10px; }
  .hero { padding-top: 56px; }
  .hero-signal-row { gap: 6px; margin-top: 20px; }
  .hero-signal-row span { padding: 7px 9px; font-size: 8px; }
  .hero-actions { margin-top: 24px; }
  .hero-visual { height: 410px; border-radius: 30px; }
  .hero-radar-caption { top: 16px; left: 16px; }
  .node-fx { right: 5%; width: 40px; height: 40px; }
  .node-array { left: 5%; width: 38px; height: 38px; }
  .node-check { width: 36px; height: 36px; }
  .workspace-pipeline { grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 9px; }
  .workspace-pipeline i { display: none; }
  .workspace-pipeline span { justify-content: center; gap: 5px; font-size: 7px; }
  .workspace-pipeline b { width: 22px; height: 22px; font-size: 7px; }
  .route-panel,
  .editor-panel,
  .result-panel { border-radius: 22px; }
  textarea { min-height: 245px; padding: 18px; }
  .result-display { min-height: 235px; }
  .result-diff-legend { gap: 7px 9px; }
  .scenario-section { width: 100%; padding-block: 78px 18px; }
  .scenario-head h2 { font-size: 36px; }
  .scenario-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 34px; }
  .scenario-card:last-child { grid-column: auto; display: block; }
  .scenario-card:last-child figure,
  .scenario-card figure { height: 210px; min-height: 0; }
  .scenario-copy { padding: 22px; }
  .privacy-section { padding-top: 58px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-art,
  .formula-ticket,
  .hero-node,
  .result-panel[data-state="success"]::after,
  .result-panel[data-state="success"] .result-display code {
    animation: none !important;
  }

  .primary-cta::before,
  .translate-button::before,
  .scenario-card img,
  .dictionary-item::after {
    transition: none !important;
  }
}

/* Advanced workspace — compare, editor, mobile actions and themes */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 35px;
  padding: 6px 10px 6px 7px;
  border: 1px solid rgba(54, 61, 100, .09);
  border-radius: 999px;
  background: rgba(246,247,253,.82);
  color: #646c82;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.theme-toggle:hover {
  border-color: rgba(92,93,211,.2);
  background: #eeedff;
  transform: translateY(-1px);
}

.theme-toggle > span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(145deg, #7475e9, #5557c8);
  color: #fff;
  font-size: 11px;
  box-shadow: 0 5px 12px rgba(76,78,190,.2);
}

.theme-toggle small {
  font-size: 8px;
  font-weight: 800;
}

.formula-editor-shell {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  min-height: 278px;
  overflow: hidden;
  border: 1px solid rgba(31,38,66,.1);
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(101,104,202,.055) 1px, transparent 1px),
    linear-gradient(rgba(101,104,202,.055) 1px, transparent 1px),
    #fafbfe;
  background-size: 24px 24px;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.formula-editor-shell:focus-within {
  border-color: rgba(91,92,226,.42);
  background-color: #fff;
  box-shadow: var(--atlas-focus), 0 14px 30px rgba(47,54,91,.07);
}

.formula-editor-shell[data-syntax="valid"] { border-color: rgba(67,174,119,.25); }
.formula-editor-shell[data-syntax="invalid"] { border-color: rgba(226,105,116,.36); }

.editor-line-numbers {
  min-height: 278px;
  max-height: 430px;
  margin: 0;
  padding: 22px 10px 22px 0;
  overflow: hidden;
  border-right: 1px solid rgba(55,63,103,.08);
  color: #adb2c2;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  line-height: 1.75;
  text-align: right;
  user-select: none;
}

.formula-editor-shell textarea {
  width: 100%;
  min-height: 278px;
  margin: 0;
  padding: 22px 20px;
  border: 0;
  border-radius: 0;
  outline: 0;
  resize: vertical;
  background: transparent;
  box-shadow: none;
}

.formula-editor-shell textarea:focus {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.editor-statusbar {
  display: flex;
  align-items: center;
  gap: 8px 14px;
  min-height: 32px;
  padding: 7px 3px 0;
  color: #9299aa;
  font-size: 7px;
  font-weight: 700;
}

.editor-statusbar > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.editor-statusbar kbd {
  margin-left: auto;
  padding: 4px 7px;
  border: 1px solid rgba(48,55,91,.09);
  border-radius: 6px;
  background: rgba(255,255,255,.7);
  color: #747b8f;
  font-family: inherit;
  font-size: 7px;
  box-shadow: 0 2px 0 rgba(46,53,88,.07);
}

.editor-syntax {
  min-width: 0;
  max-width: 46%;
  overflow: hidden;
  color: #737b90;
  text-overflow: ellipsis;
}

.editor-syntax i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #a9afbd;
  box-shadow: 0 0 0 3px rgba(120,128,150,.09);
}

.editor-syntax.valid { color: #3e805c; }
.editor-syntax.valid i { background: #52bf88; box-shadow: 0 0 0 3px rgba(82,191,136,.11); }
.editor-syntax.invalid,
#editorBracketStatus.invalid { color: #b2545b; }
.editor-syntax.invalid i { background: #e07078; box-shadow: 0 0 0 3px rgba(224,112,120,.12); }
#editorBracketStatus.paired { color: #5559ca; }

.compare-button {
  padding: 8px 10px;
  border: 1px solid rgba(88,90,208,.14);
  border-radius: 9px;
  background: linear-gradient(135deg, #eeedff, #e8f2ff);
  color: #5759c8;
  cursor: pointer;
  font-size: 9px;
  font-weight: 750;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.compare-button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(77,79,191,.12);
}

.compare-button:disabled { cursor: not-allowed; opacity: .42; }

.comparison-dialog {
  width: min(1180px, calc(100% - 42px));
  max-width: none;
  max-height: calc(100dvh - 42px);
  padding: 0;
  overflow: auto;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 30px;
  background: rgba(247,248,255,.96);
  color: #1d2439;
  box-shadow: 0 40px 120px rgba(20,25,55,.34), inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter: blur(26px);
}

.comparison-dialog::backdrop {
  background: rgba(17,21,42,.56);
  backdrop-filter: blur(12px) saturate(.8);
}

.comparison-dialog-inner { padding: 32px; }

.comparison-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
}

.comparison-header h2 {
  margin: 9px 0 7px;
  color: #1c2338;
  font-size: clamp(26px, 3vw, 38px);
  letter-spacing: -.04em;
}

.comparison-header p {
  margin: 0;
  color: #747d92;
  font-size: 10px;
}

.comparison-close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border: 1px solid rgba(44,52,89,.09);
  border-radius: 13px;
  background: #fff;
  color: #636b80;
  cursor: pointer;
  font-size: 22px;
  box-shadow: 0 8px 20px rgba(42,49,84,.07);
}

.comparison-route {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center;
  gap: 12px;
  margin: 28px 0 14px;
  color: #70788d;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .12em;
}

.comparison-route span,
.comparison-route b {
  padding: 7px 10px;
  border-radius: 999px;
  background: #e9e8ff;
  color: #5558c9;
}

.comparison-route b { background: #202741; color: #aeb1ff; }
.comparison-route i { height: 1px; background: linear-gradient(90deg, rgba(90,92,208,.16), rgba(79,194,207,.55)); }

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

.comparison-pane {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(47,55,93,.09);
  border-radius: 20px;
  background: rgba(255,255,255,.8);
  box-shadow: 0 18px 46px rgba(43,50,84,.09);
}

.comparison-pane > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(50,58,96,.08);
  color: #40485e;
  font-size: 10px;
  font-weight: 800;
}

.comparison-pane small {
  color: #858da1;
  font-size: 7px;
  letter-spacing: .12em;
}

.comparison-pane pre {
  min-height: 270px;
  max-height: 46vh;
  margin: 0;
  padding: 24px;
  overflow: auto;
  background:
    linear-gradient(rgba(123,130,190,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(123,130,190,.045) 1px, transparent 1px),
    #f9faff;
  background-size: 24px 24px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.target-pane pre {
  background:
    linear-gradient(rgba(128,137,203,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(128,137,203,.05) 1px, transparent 1px),
    radial-gradient(circle at 100% 0, rgba(111,101,225,.25), transparent 35%),
    #171d31;
  background-size: 24px 24px, 24px 24px, auto, auto;
}

.comparison-pane code {
  color: #313950;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  line-height: 1.85;
}

.target-pane code { color: #f0f2ff; }

.comparison-pane .diff-token {
  padding: .09em .22em;
  border-radius: .34em;
  background: rgba(125,117,244,.2);
  color: #3f42a9;
  font: inherit;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.target-pane .diff-function { background: rgba(139,129,255,.21); color: #d4d0ff; }
.target-pane .diff-keyword { background: rgba(76,199,142,.2); color: #9ce8c4; }
.target-pane .diff-error { background: rgba(245,127,145,.2); color: #ffb6c2; }
.target-pane .diff-number { background: rgba(83,215,189,.19); color: #96f0dc; }
.target-pane .diff-separator,
.target-pane .diff-array-separator { background: rgba(243,184,79,.19); color: #ffda86; }
.source-pane .source-change { text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: rgba(88,89,194,.55); }

.comparison-footer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 24px;
  margin-top: 16px;
  padding: 15px 17px;
  border: 1px solid rgba(48,56,94,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.62);
}

.comparison-footer .result-diff-legend { margin: 2px 0 0; }

.comparison-change-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.comparison-change-list li {
  padding: 5px 8px;
  border-radius: 7px;
  background: #efeffa;
  color: #676f85;
  font-size: 7px;
  font-weight: 700;
}

.mobile-action-bar { display: none; }

/* Light theme contrast pass — stronger hierarchy without losing the airy palette. */
html[data-theme="light"] {
  --light-canvas: #f7f8fd;
  --light-surface: rgba(255,255,255,.92);
  --light-surface-tint: #f4f5fb;
  --light-border: rgba(49,59,98,.15);
  --light-border-strong: rgba(49,59,98,.23);
  --light-text: #151b2d;
  --light-text-secondary: #4f5a72;
  --light-text-muted: #626e86;
  --light-violet: #5255d4;
  --light-green: #2f7650;
}

html[data-theme="light"] body {
  color: var(--light-text);
  background:
    radial-gradient(circle at 12% 5%, rgba(181,170,255,.4), transparent 27%),
    radial-gradient(circle at 93% 13%, rgba(85,203,232,.24), transparent 24%),
    radial-gradient(circle at 54% 30%, rgba(255,207,110,.14), transparent 22%),
    linear-gradient(180deg, #fbfbff 0%, #f1f3fa 44%, #fafbfe 100%);
}

html[data-theme="light"] .site-header {
  border-color: rgba(49,59,98,.14);
  background: linear-gradient(108deg, rgba(255,255,255,.98), rgba(244,246,255,.97) 52%, rgba(250,253,255,.98));
  box-shadow: 0 14px 46px rgba(36,44,82,.12), inset 0 1px 0 rgba(255,255,255,.96);
}
html[data-theme="light"] .brand strong { color: #151b2d; }
html[data-theme="light"] .brand small { color: #626d84; }
html[data-theme="light"] nav,
html[data-theme="light"] nav a { color: #39435a; }
html[data-theme="light"] nav a:hover { color: #4548bd; }
html[data-theme="light"] .theme-toggle {
  border-color: rgba(74,77,190,.18);
  background: #f0efff;
  color: #484bb7;
}
html[data-theme="light"] .theme-toggle:hover { border-color: rgba(74,77,190,.34); background: #e9e8ff; }
html[data-theme="light"] .privacy-pill {
  border-color: rgba(45,126,80,.19);
  background: #eaf7ef;
  color: #286942;
}

html[data-theme="light"] .eyebrow { color: #536078; }
html[data-theme="light"] .eyebrow span { border-color: rgba(76,79,196,.22); background: #ebeaff; color: #4649bd; }
html[data-theme="light"] .hero-lead { color: #4f5a71; }
html[data-theme="light"] .hero-signal-row span,
html[data-theme="light"] .hero-radar-caption {
  border-color: rgba(49,59,98,.15);
  background: rgba(255,255,255,.84);
  color: #4c5870;
  box-shadow: 0 10px 28px rgba(38,46,83,.1);
}
html[data-theme="light"] .trust-note { color: #5e697f; }
html[data-theme="light"] .trust-note strong { color: #293148; }
html[data-theme="light"] .hero-visual {
  border-color: rgba(49,59,98,.14);
  box-shadow: 0 32px 88px rgba(55,52,132,.2), inset 0 1px 0 rgba(255,255,255,.94);
}

html[data-theme="light"] .proof-strip,
html[data-theme="light"] .workspace-pipeline {
  border-color: rgba(49,59,98,.14);
  background: rgba(255,255,255,.86);
  box-shadow: 0 18px 50px rgba(40,48,86,.1), inset 0 1px 0 #fff;
}
html[data-theme="light"] .proof-item strong { color: #20283e; }
html[data-theme="light"] .proof-item small,
html[data-theme="light"] .workspace-pipeline span { color: #56627a; }
html[data-theme="light"] .proof-divider { background: rgba(49,59,98,.14); }

html[data-theme="light"] .workspace-head p,
html[data-theme="light"] .dictionary-head p,
html[data-theme="light"] .scenario-head p { color: #566178; }
html[data-theme="light"] .section-index,
html[data-theme="light"] .card-kicker { color: #5256c8; }
html[data-theme="light"] .card,
html[data-theme="light"] .route-panel,
html[data-theme="light"] .editor-panel,
html[data-theme="light"] .result-panel {
  border-color: rgba(61,72,113,.15);
  box-shadow: 0 24px 58px rgba(38,47,85,.14), inset 0 1px 0 rgba(255,255,255,.95);
}
html[data-theme="light"] .route-panel { background: rgba(255,255,255,.9); }
html[data-theme="light"] .result-panel { background: linear-gradient(155deg, rgba(252,251,255,.99), rgba(237,238,255,.98)); }
html[data-theme="light"] .field-label { color: #515d74; }
html[data-theme="light"] .version-note { color: #5f6b83; }

html[data-theme="light"] .select-wrap {
  border-color: rgba(55,65,104,.16);
  box-shadow: 0 6px 16px rgba(39,48,82,.07), inset 0 1px 0 rgba(255,255,255,.8);
}
html[data-theme="light"] .select-wrap:hover { border-color: rgba(76,79,196,.36); }
html[data-theme="light"] .select-wrap:focus-within { border-color: rgba(76,79,196,.58); box-shadow: 0 0 0 4px rgba(76,79,196,.12); }
html[data-theme="light"] .select-wrap select { color: #1f273c; }
html[data-theme="light"] .version-select { background: linear-gradient(135deg, #f0eeff, #e4e4ff); }
html[data-theme="light"] .target-select { background: linear-gradient(135deg, #fff4d2, #ffe5a2); }
html[data-theme="light"] .flag { background: #dddafe; color: #4144b2; box-shadow: inset 0 0 0 1px rgba(76,79,196,.11); }
html[data-theme="light"] .version-flag { background: linear-gradient(135deg, #6b6ee7, #5054c8); color: #fff; }
html[data-theme="light"] .swap-button { color: #5c687f; }
html[data-theme="light"] .swap-button b { color: #4d51c9; }

html[data-theme="light"] .locale-format-box {
  border-color: rgba(55,65,104,.14);
  background: linear-gradient(145deg, #f4f5fa, #e9ecf5);
}
html[data-theme="light"] .locale-format-title > span:last-child,
html[data-theme="light"] .locale-format-box > label > span,
html[data-theme="light"] .regional-advanced summary small,
html[data-theme="light"] .regional-custom-grid label span { color: #59657c; }
html[data-theme="light"] .locale-format-box select,
html[data-theme="light"] .regional-custom-grid fieldset { border-color: rgba(55,65,104,.14); background: rgba(255,255,255,.9); color: #2d354b; }
html[data-theme="light"] .regional-advanced { border-color: rgba(55,65,104,.13); }
html[data-theme="light"] .regional-advanced summary { color: #454f67; }
html[data-theme="light"] .regional-advanced summary small { color: #69748a; }
html[data-theme="light"] .regional-custom-grid legend { color: #4d51c1; }
html[data-theme="light"] .regional-hint { color: #8b5366; }
html[data-theme="light"] .separator-box { border-color: rgba(55,65,104,.17); }
html[data-theme="light"] .segment-control span { border-color: rgba(55,65,104,.15); background: #eef0f6; color: #505b72; }
html[data-theme="light"] .segment-control input:checked + span { border-color: #4e52cb; background: linear-gradient(135deg, #5d60df, #494dc3); color: #fff; box-shadow: 0 6px 14px rgba(65,69,180,.22); }
html[data-theme="light"] .local-note { border-color: rgba(45,126,80,.18); background: #e7f5ec; }
html[data-theme="light"] .local-note > span { color: #2f8053; }
html[data-theme="light"] .local-note strong { color: #285e3e; }
html[data-theme="light"] .local-note p { color: #406c52; }

html[data-theme="light"] .status-dot,
html[data-theme="light"] .result-badge { border: 1px solid rgba(55,65,104,.1); background: #e9ebf1; color: #566178; }
html[data-theme="light"] .result-badge { border-color: rgba(76,79,196,.12); background: #e3e3ff; color: #4649ae; }
html[data-theme="light"] .text-button { color: #5d687f; }
html[data-theme="light"] .mode-toggle,
html[data-theme="light"] .verify-button,
html[data-theme="light"] .download-button {
  border-color: rgba(55,65,104,.16);
  background: rgba(255,255,255,.92);
  color: #414c63;
}
html[data-theme="light"] .mode-toggle:hover,
html[data-theme="light"] .verify-button:hover:not(:disabled),
html[data-theme="light"] .download-button:hover:not(:disabled) { border-color: rgba(76,79,196,.34); background: #efefff; color: #4448b6; }
html[data-theme="light"] .mode-toggle.active { border-color: rgba(76,79,196,.17); background: linear-gradient(135deg, #e7e6ff, #e4f2fa); color: #4346b4; }
html[data-theme="light"] .copy-button { background: linear-gradient(135deg, #5559d8, #4549bb); color: #fff; box-shadow: 0 8px 18px rgba(59,63,172,.25); }
html[data-theme="light"] .import-workbook-button { border-color: rgba(45,126,80,.2); background: linear-gradient(135deg, #e7f7ed, #edf8fc); color: #276643; }

html[data-theme="light"] .formula-editor-shell {
  border-color: rgba(55,65,104,.19);
  background:
    linear-gradient(90deg, rgba(84,94,139,.065) 1px, transparent 1px),
    linear-gradient(rgba(84,94,139,.065) 1px, transparent 1px),
    #f5f7fb;
  background-size: 24px 24px;
  box-shadow: inset 0 1px 0 #fff;
}
html[data-theme="light"] .formula-editor-shell:focus-within { border-color: #6266dd; box-shadow: 0 0 0 4px rgba(82,86,205,.13), inset 0 1px 0 #fff; }
html[data-theme="light"] textarea { color: #1e263b; caret-color: #4d51c7; }
html[data-theme="light"] textarea::placeholder { color: #6e7990; opacity: 1; }
html[data-theme="light"] .editor-line-numbers { border-color: rgba(55,65,104,.14); color: #65718a; }
html[data-theme="light"] .editor-statusbar { color: #56627a; }
html[data-theme="light"] .editor-statusbar kbd { border-color: rgba(55,65,104,.15); background: #e9ebf2; color: #505b73; }
html[data-theme="light"] .editor-syntax.valid { color: #28734a; }
html[data-theme="light"] .editor-syntax.invalid { color: #a73f51; }
html[data-theme="light"] .examples > span { color: #5c687f; }
html[data-theme="light"] .examples button { border-color: rgba(55,65,104,.14); background: #eef0f5; color: #515c73; }
html[data-theme="light"] .examples button:hover { border-color: rgba(76,79,196,.3); background: #e7e6ff; color: #4145b4; }

html[data-theme="light"] .result-display.empty {
  border-color: rgba(76,79,196,.3);
  background: linear-gradient(145deg, rgba(249,250,255,.96), rgba(234,237,249,.96));
  color: #536078;
}
html[data-theme="light"] .empty-icon { border-color: #747dc0; color: #4e52c9; background: rgba(82,86,205,.07); }
html[data-theme="light"] .empty-state strong { color: #242c42; }
html[data-theme="light"] .empty-state p { color: #56627a; }
html[data-theme="light"] .result-diff-legend { color: #58647b; }
html[data-theme="light"] .metric { border-color: rgba(55,65,104,.14); background: rgba(255,255,255,.86); }
html[data-theme="light"] .metric span { color: #252d43; }
html[data-theme="light"] .metric small { color: #56627a; }
html[data-theme="light"] .conversion-report { border-color: rgba(55,65,104,.14); background: rgba(255,255,255,.78); }
html[data-theme="light"] .conversion-report summary { color: #414c63; }
html[data-theme="light"] .report-content { border-color: rgba(55,65,104,.13); }
html[data-theme="light"] .report-content li { border: 1px solid rgba(55,65,104,.08); background: rgba(255,255,255,.9); color: #525e75; }
html[data-theme="light"] .notice { border-color: rgba(55,65,104,.12); background: rgba(255,255,255,.52); color: #56627a; }
html[data-theme="light"] .notice.warning { color: #9b4050; }

html[data-theme="light"] .dictionary-card {
  border-color: rgba(49,59,98,.14);
  background: rgba(255,255,255,.94);
  box-shadow: 0 26px 70px rgba(38,47,85,.14), inset 0 1px 0 #fff;
}
html[data-theme="light"] .dictionary-search,
html[data-theme="light"] .dictionary-select,
html[data-theme="light"] .favorites-toggle { border-color: rgba(55,65,104,.15); background: #f0f2f7; color: #505b72; }
html[data-theme="light"] .dictionary-search:focus-within,
html[data-theme="light"] .dictionary-select:focus-within { border-color: rgba(76,79,196,.48); box-shadow: 0 0 0 4px rgba(76,79,196,.1); }
html[data-theme="light"] .dictionary-search input,
html[data-theme="light"] .dictionary-select select { color: #283047; }
html[data-theme="light"] .dictionary-search input::placeholder { color: #68748b; }
html[data-theme="light"] .dictionary-select span { color: #5f6b82; }
html[data-theme="light"] .dictionary-summary p { color: #4f5b72; }
html[data-theme="light"] .dictionary-legend,
html[data-theme="light"] .dictionary-status { color: #556178; }
html[data-theme="light"] .dictionary-item {
  border-color: rgba(55,65,104,.13);
  background: linear-gradient(145deg, #fff, #f4f5fb);
  box-shadow: inset 0 1px 0 #fff;
}
html[data-theme="light"] .dictionary-item:hover { border-color: rgba(76,79,196,.3); box-shadow: 0 12px 28px rgba(38,47,85,.11); }
html[data-theme="light"] .dictionary-item.is-fallback { background: linear-gradient(145deg, #fffdf7, #fff4d9); }
html[data-theme="light"] .dictionary-item code { color: #4649bd; }
html[data-theme="light"] .dictionary-item strong { color: #20283d; }
html[data-theme="light"] .dictionary-favorite { background: #e8eaf1; color: #68748b; }
html[data-theme="light"] .dictionary-copy { background: #e1e2fb; color: #4649b9; }
html[data-theme="light"] .dictionary-more { border-color: rgba(76,79,196,.22); background: #e8e7ff; color: #4447b8; }

html[data-theme="light"] .steps-grid article,
html[data-theme="light"] .scenario-card {
  border-color: rgba(49,59,98,.14);
  background: rgba(255,255,255,.9);
  box-shadow: 0 20px 52px rgba(38,47,85,.11), inset 0 1px 0 #fff;
}
html[data-theme="light"] .steps-grid article:hover,
html[data-theme="light"] .scenario-card:hover { border-color: rgba(76,79,196,.25); box-shadow: 0 26px 60px rgba(38,47,85,.15); }
html[data-theme="light"] .steps-grid article > span { border-color: rgba(49,59,98,.14); color: #46516a; }
html[data-theme="light"] .steps-grid p,
html[data-theme="light"] .scenario-copy p { color: #56627a; }
html[data-theme="light"] .scenario-copy { border-color: rgba(49,59,98,.12); }
html[data-theme="light"] .coverage p { color: #c3cbdd; }
html[data-theme="light"] .privacy-card p { color: #c8e0d3; }
html[data-theme="light"] footer { border-color: rgba(49,59,98,.13); background: rgba(255,255,255,.86); }
html[data-theme="light"] .footer-inner p { color: #56627a; }
html[data-theme="light"] .notice-link,
html[data-theme="light"] .footer-inner > a { color: #4649b8; }

html[data-theme="light"] .comparison-dialog { border-color: rgba(49,59,98,.16); background: rgba(248,249,255,.985); box-shadow: 0 40px 130px rgba(31,39,73,.28), inset 0 1px 0 #fff; }
html[data-theme="light"] .comparison-header p { color: #58647b; }
html[data-theme="light"] .comparison-close,
html[data-theme="light"] .comparison-pane,
html[data-theme="light"] .comparison-footer { border-color: rgba(49,59,98,.14); background: rgba(255,255,255,.82); }
html[data-theme="light"] .comparison-pane > div { border-color: rgba(49,59,98,.12); color: #3c465e; }
html[data-theme="light"] .comparison-change-list li { border: 1px solid rgba(49,59,98,.08); background: #e7e8f3; color: #4e5970; }

html[data-theme="dark"] { color-scheme: dark; }

html[data-theme="dark"] body {
  color: #edf0fb;
  background:
    radial-gradient(circle at 10% 4%, rgba(90,78,191,.26), transparent 25%),
    radial-gradient(circle at 92% 15%, rgba(42,134,163,.2), transparent 23%),
    linear-gradient(180deg, #111628 0%, #171c31 45%, #101524 100%);
}

html[data-theme="dark"] .noise { opacity: .018; mix-blend-mode: normal; }

html[data-theme="dark"] .site-header {
  border-color: rgba(187,193,235,.12);
  background: rgba(24,29,50,.79);
  box-shadow: 0 18px 55px rgba(4,7,20,.35), inset 0 1px 0 rgba(255,255,255,.06);
}

html[data-theme="dark"] .site-header::before { background: linear-gradient(105deg, rgba(255,255,255,.035), rgba(87,92,166,.08), rgba(255,255,255,.025)); }
html[data-theme="dark"] .brand strong,
html[data-theme="dark"] nav,
html[data-theme="dark"] .hero h1,
html[data-theme="dark"] .workspace-head h2,
html[data-theme="dark"] .dictionary-head h2,
html[data-theme="dark"] .explain h2,
html[data-theme="dark"] .scenario-head h2 { color: #f3f4fb; }
html[data-theme="dark"] .brand small,
html[data-theme="dark"] .hero-lead,
html[data-theme="dark"] .workspace-head p,
html[data-theme="dark"] .dictionary-head p,
html[data-theme="dark"] .scenario-head p { color: #a9b0c4; }
html[data-theme="dark"] nav a:hover { color: #b5b4ff; }

html[data-theme="dark"] .theme-toggle {
  border-color: rgba(190,196,232,.12);
  background: rgba(255,255,255,.055);
  color: #c1c6d8;
}

html[data-theme="dark"] .privacy-pill { border-color: rgba(91,201,144,.16); background: rgba(50,118,82,.2); color: #91d8af; }
html[data-theme="dark"] .hero-signal-row span,
html[data-theme="dark"] .hero-radar-caption {
  border-color: rgba(191,197,234,.11);
  background: rgba(27,33,57,.7);
  color: #b8bfd2;
  box-shadow: 0 9px 24px rgba(4,7,19,.22);
}

html[data-theme="dark"] .hero-visual {
  border-color: rgba(182,188,229,.12);
  background:
    linear-gradient(rgba(151,158,220,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(151,158,220,.06) 1px, transparent 1px),
    radial-gradient(circle at 27% 23%, rgba(54,170,194,.22), transparent 29%),
    radial-gradient(circle at 79% 77%, rgba(218,153,64,.18), transparent 31%),
    linear-gradient(145deg, rgba(30,36,65,.8), rgba(20,25,46,.55));
  background-size: 28px 28px, 28px 28px, auto, auto, auto;
  box-shadow: 0 34px 90px rgba(3,6,18,.38), inset 0 1px 0 rgba(255,255,255,.05);
}

html[data-theme="dark"] .proof-strip,
html[data-theme="dark"] .workspace-pipeline {
  border-color: rgba(184,190,227,.1);
  background: rgba(27,32,55,.72);
  box-shadow: 0 20px 55px rgba(3,6,18,.28), inset 0 1px 0 rgba(255,255,255,.045);
}
html[data-theme="dark"] .proof-item strong { color: #eef0f9; }
html[data-theme="dark"] .proof-item small,
html[data-theme="dark"] .workspace-pipeline span { color: #a1a8bc; }
html[data-theme="dark"] .proof-divider { background: rgba(208,212,240,.1); }

html[data-theme="dark"] .workspace-wrap {
  background:
    radial-gradient(circle at 9% 7%, rgba(93,75,195,.3), transparent 29%),
    radial-gradient(circle at 91% 10%, rgba(169,69,112,.18), transparent 25%),
    radial-gradient(circle at 90% 82%, rgba(37,139,158,.19), transparent 28%),
    linear-gradient(150deg, #171a35 0%, #1b1e36 48%, #13282f 100%);
}

html[data-theme="dark"] .workspace-wrap::before { background: rgba(93,88,170,.13); }
html[data-theme="dark"] .card,
html[data-theme="dark"] .route-panel,
html[data-theme="dark"] .editor-panel,
html[data-theme="dark"] .result-panel {
  border-color: rgba(190,196,232,.1);
  background: rgba(24,29,50,.88);
  box-shadow: 0 28px 70px rgba(3,6,18,.34), inset 0 1px 0 rgba(255,255,255,.045);
}

html[data-theme="dark"] .field-label,
html[data-theme="dark"] .version-note,
html[data-theme="dark"] .editor-statusbar,
html[data-theme="dark"] .result-diff-legend { color: #9ca4b9; }
html[data-theme="dark"] .select-wrap,
html[data-theme="dark"] .locale-format-box,
html[data-theme="dark"] .locale-format-box select,
html[data-theme="dark"] .regional-custom-grid fieldset,
html[data-theme="dark"] .segment-control span,
html[data-theme="dark"] .mode-toggle,
html[data-theme="dark"] .metric,
html[data-theme="dark"] .conversion-report,
html[data-theme="dark"] .report-content li,
html[data-theme="dark"] .notice {
  border-color: rgba(190,196,232,.1);
  background: rgba(255,255,255,.055);
  color: #c1c6d7;
}
html[data-theme="dark"] .version-select { background: linear-gradient(135deg, rgba(100,91,214,.2), rgba(65,69,136,.18)); }
html[data-theme="dark"] .target-select { background: linear-gradient(135deg, rgba(202,145,47,.17), rgba(144,106,43,.14)); }
html[data-theme="dark"] select,
html[data-theme="dark"] textarea { color: #e8eaf5; }
html[data-theme="dark"] .formula-editor-shell {
  border-color: rgba(190,196,232,.11);
  background:
    linear-gradient(90deg, rgba(151,158,220,.05) 1px, transparent 1px),
    linear-gradient(rgba(151,158,220,.05) 1px, transparent 1px),
    #171c30;
  background-size: 24px 24px;
}
html[data-theme="dark"] .editor-line-numbers { border-color: rgba(190,196,232,.08); color: #676f88; }
html[data-theme="dark"] .editor-statusbar kbd { border-color: rgba(190,196,232,.11); background: rgba(255,255,255,.05); color: #aab1c5; box-shadow: none; }
html[data-theme="dark"] .local-note { border-color: rgba(92,196,139,.14); background: rgba(51,124,83,.16); }
html[data-theme="dark"] .empty-state strong,
html[data-theme="dark"] .metric span,
html[data-theme="dark"] .conversion-report summary { color: #e5e8f3; }

html[data-theme="dark"] .dictionary-section,
html[data-theme="dark"] .explain,
html[data-theme="dark"] .scenario-section {
  background: radial-gradient(circle at 8% 20%, rgba(96,81,195,.18), transparent 25%), linear-gradient(180deg, #13182b, #171c30);
}
html[data-theme="dark"] .dictionary-card,
html[data-theme="dark"] .dictionary-item,
html[data-theme="dark"] .steps-grid article,
html[data-theme="dark"] .scenario-card {
  border-color: rgba(188,194,230,.1);
  background: rgba(27,32,54,.85);
  box-shadow: 0 24px 64px rgba(3,6,18,.28), inset 0 1px 0 rgba(255,255,255,.04);
}
html[data-theme="dark"] .dictionary-search,
html[data-theme="dark"] .dictionary-select,
html[data-theme="dark"] .favorites-toggle { border-color: rgba(190,196,232,.1); background: rgba(255,255,255,.05); }
html[data-theme="dark"] .dictionary-search input,
html[data-theme="dark"] .dictionary-select select,
html[data-theme="dark"] .dictionary-item strong,
html[data-theme="dark"] .steps-grid h3,
html[data-theme="dark"] .scenario-copy h3 { color: #e8eaf4; }
html[data-theme="dark"] .dictionary-summary p,
html[data-theme="dark"] .dictionary-legend,
html[data-theme="dark"] .dictionary-status,
html[data-theme="dark"] .steps-grid p,
html[data-theme="dark"] .scenario-copy p { color: #9ea6ba; }
html[data-theme="dark"] .scenario-copy { border-top: 1px solid rgba(190,196,232,.08); }
html[data-theme="dark"] footer { border-color: rgba(187,193,228,.09); background: #101524; }
html[data-theme="dark"] .footer-inner p { color: #8f97ad; }

html[data-theme="dark"] .comparison-dialog {
  border-color: rgba(192,198,232,.12);
  background: rgba(21,26,46,.97);
  color: #edf0fa;
  box-shadow: 0 40px 130px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.05);
}
html[data-theme="dark"] .comparison-header h2 { color: #f0f2fb; }
html[data-theme="dark"] .comparison-header p { color: #9da5ba; }
html[data-theme="dark"] .comparison-close,
html[data-theme="dark"] .comparison-pane,
html[data-theme="dark"] .comparison-footer {
  border-color: rgba(190,196,232,.1);
  background: rgba(255,255,255,.045);
  color: #dfe2ee;
  box-shadow: 0 18px 48px rgba(0,0,0,.24);
}
html[data-theme="dark"] .comparison-pane > div { border-color: rgba(190,196,232,.09); color: #dfe2ee; }
html[data-theme="dark"] .source-pane pre {
  background:
    linear-gradient(rgba(141,149,210,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(141,149,210,.05) 1px, transparent 1px),
    #181d31;
  background-size: 24px 24px;
}
html[data-theme="dark"] .source-pane code { color: #e5e8f4; }
html[data-theme="dark"] .comparison-change-list li { background: rgba(255,255,255,.06); color: #b9c0d2; }

/* Dark theme contrast pass — keep surfaces distinct and small text legible. */
html[data-theme="dark"] {
  --dark-canvas: #0b1020;
  --dark-section: #10182c;
  --dark-surface: #18213a;
  --dark-surface-raised: #1d2845;
  --dark-control: rgba(255,255,255,.085);
  --dark-border: rgba(190,202,244,.18);
  --dark-border-strong: rgba(195,207,250,.28);
  --dark-text: #f5f7ff;
  --dark-text-secondary: #c9d2e7;
  --dark-text-muted: #aab6d0;
  --dark-violet: #8d91ff;
  --dark-cyan: #72d9ec;
  --dark-mint: #76dfaa;
  --dark-amber: #ffd171;
  --dark-coral: #ff9eae;
}

html[data-theme="dark"] body {
  color: var(--dark-text);
  background:
    radial-gradient(circle at 10% 4%, rgba(103,89,220,.31), transparent 27%),
    radial-gradient(circle at 92% 15%, rgba(44,151,184,.23), transparent 25%),
    linear-gradient(180deg, #0b1020 0%, #111a30 45%, #090f1d 100%);
}

html[data-theme="dark"] .site-header {
  border-color: var(--dark-border);
  background: linear-gradient(108deg, rgba(17, 23, 44, .985), rgba(15, 24, 44, .975) 54%, rgba(13, 29, 45, .985));
  box-shadow:
    0 22px 68px rgba(0,3,14,.52),
    0 7px 22px rgba(55, 62, 153, .12),
    inset 0 1px 0 rgba(255,255,255,.09);
}

html[data-theme="dark"] .brand strong,
html[data-theme="dark"] nav a { color: var(--dark-text); }
html[data-theme="dark"] .brand small { color: #a9b5cf; }
html[data-theme="dark"] nav a:hover { color: #bfc1ff; }
html[data-theme="dark"] .theme-toggle {
  border-color: var(--dark-border);
  background: rgba(255,255,255,.085);
  color: #d6ddef;
}
html[data-theme="dark"] .theme-toggle:hover { border-color: rgba(151,156,255,.42); background: rgba(130,134,255,.14); }
html[data-theme="dark"] .privacy-pill {
  border-color: rgba(118,223,170,.27);
  background: rgba(52,139,91,.24);
  color: #a9ecc7;
}

html[data-theme="dark"] .eyebrow { color: #b8c3db; }
html[data-theme="dark"] .eyebrow span {
  border-color: rgba(143,147,255,.3);
  background: rgba(111,115,244,.18);
  color: #c5c7ff;
}
html[data-theme="dark"] .hero h1,
html[data-theme="dark"] .workspace-head h2,
html[data-theme="dark"] .dictionary-head h2,
html[data-theme="dark"] .explain h2,
html[data-theme="dark"] .scenario-head h2 { color: var(--dark-text); }
html[data-theme="dark"] h1 em,
html[data-theme="dark"] h2 em {
  background-image: linear-gradient(100deg, #8d91ff 0%, #a78cff 48%, #75b9ff 100%);
}
html[data-theme="dark"] .hero-lead,
html[data-theme="dark"] .workspace-head p,
html[data-theme="dark"] .dictionary-head p,
html[data-theme="dark"] .scenario-head p { color: #bdc8df; }
html[data-theme="dark"] .hero-signal-row span,
html[data-theme="dark"] .hero-radar-caption {
  border-color: var(--dark-border);
  background: rgba(24,33,57,.88);
  color: #d1d9eb;
}
html[data-theme="dark"] .trust-note { color: #aeb9d1; }
html[data-theme="dark"] .trust-note strong { color: #edf1fc; }
html[data-theme="dark"] .avatars i { border-color: #18213a; }

html[data-theme="dark"] .hero-visual {
  border-color: rgba(196,207,248,.2);
  box-shadow: 0 38px 100px rgba(0,3,14,.52), inset 0 1px 0 rgba(255,255,255,.085);
}
html[data-theme="dark"] .proof-strip,
html[data-theme="dark"] .workspace-pipeline {
  border-color: var(--dark-border);
  background: rgba(20,29,51,.9);
  box-shadow: 0 22px 62px rgba(0,3,14,.4), inset 0 1px 0 rgba(255,255,255,.075);
}
html[data-theme="dark"] .proof-item strong { color: var(--dark-text); }
html[data-theme="dark"] .proof-item small,
html[data-theme="dark"] .workspace-pipeline span { color: #b9c4dc; }
html[data-theme="dark"] .proof-divider { background: rgba(204,214,250,.17); }
html[data-theme="dark"] .proof-indigo { background: rgba(124,128,255,.2); color: #c6c8ff; }
html[data-theme="dark"] .proof-violet { background: rgba(164,113,233,.18); color: #ddbfff; }
html[data-theme="dark"] .proof-cyan { background: rgba(72,185,221,.18); color: #a4e8f5; }
html[data-theme="dark"] .proof-green { background: rgba(73,188,126,.18); color: #a4e7c1; }

html[data-theme="dark"] .workspace-wrap {
  background:
    radial-gradient(circle at 9% 7%, rgba(105,86,224,.35), transparent 31%),
    radial-gradient(circle at 91% 10%, rgba(194,72,121,.21), transparent 27%),
    radial-gradient(circle at 90% 82%, rgba(42,154,176,.23), transparent 30%),
    linear-gradient(150deg, #10152c 0%, #151b31 48%, #0d2228 100%);
}
html[data-theme="dark"] .workspace-wrap::after { border-color: rgba(141,145,255,.22); }
html[data-theme="dark"] .section-index,
html[data-theme="dark"] .card-kicker { color: #a7aaff; }
html[data-theme="dark"] .card,
html[data-theme="dark"] .route-panel,
html[data-theme="dark"] .editor-panel,
html[data-theme="dark"] .result-panel {
  border-color: var(--dark-border);
  background: rgba(24,33,58,.96);
  box-shadow: 0 30px 78px rgba(0,3,14,.45), inset 0 1px 0 rgba(255,255,255,.075);
}
html[data-theme="dark"] .result-panel { background: linear-gradient(155deg, rgba(27,36,63,.98), rgba(22,30,54,.98)); }
html[data-theme="dark"] .field-label { color: #c5cfe4; }
html[data-theme="dark"] .version-note { color: #aab6d0; }

html[data-theme="dark"] .select-wrap {
  border-color: var(--dark-border);
  background: var(--dark-control);
  box-shadow: 0 7px 20px rgba(0,3,14,.22), inset 0 1px 0 rgba(255,255,255,.045);
}
html[data-theme="dark"] .select-wrap:hover { border-color: rgba(147,151,255,.42); background: rgba(255,255,255,.11); }
html[data-theme="dark"] .select-wrap:focus-within { border-color: #8589ff; box-shadow: 0 0 0 4px rgba(126,130,255,.18); }
html[data-theme="dark"] .version-select { background: linear-gradient(135deg, rgba(118,108,245,.27), rgba(86,94,179,.22)); }
html[data-theme="dark"] .target-select { background: linear-gradient(135deg, rgba(226,165,61,.24), rgba(164,119,48,.19)); }
html[data-theme="dark"] .select-wrap select,
html[data-theme="dark"] .locale-format-box select,
html[data-theme="dark"] .regional-custom-grid select { color: #f0f3fd; }
html[data-theme="dark"] .flag { background: rgba(137,132,255,.2); color: #d4d2ff; box-shadow: inset 0 0 0 1px rgba(166,166,255,.12); }
html[data-theme="dark"] .version-flag { background: linear-gradient(135deg, #7a7df4, #5f64d8); color: #fff; }
html[data-theme="dark"] .swap-button { color: #b2bdd5; }
html[data-theme="dark"] .swap-button b { color: #999cff; }

html[data-theme="dark"] .locale-format-box {
  border-color: var(--dark-border);
  background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(130,139,210,.07));
}
html[data-theme="dark"] .locale-format-title > span:last-child,
html[data-theme="dark"] .locale-format-box > label > span,
html[data-theme="dark"] .regional-advanced summary small,
html[data-theme="dark"] .regional-custom-grid label span { color: #adb9d2; }
html[data-theme="dark"] .locale-format-box select,
html[data-theme="dark"] .regional-custom-grid fieldset {
  border-color: rgba(194,205,245,.15);
  background: rgba(7,12,26,.28);
}
html[data-theme="dark"] .regional-advanced { border-color: rgba(194,205,245,.14); }
html[data-theme="dark"] .regional-advanced summary { color: #d0d8ea; }
html[data-theme="dark"] .regional-advanced summary b { background: rgba(133,137,255,.19); color: #c5c7ff; }
html[data-theme="dark"] .regional-custom-grid legend { color: #aaaaff; }
html[data-theme="dark"] .regional-hint { color: #cf9faf; }
html[data-theme="dark"] .separator-box { border-color: rgba(194,205,245,.17); }
html[data-theme="dark"] .segment-control span {
  border-color: rgba(194,205,245,.15);
  background: rgba(255,255,255,.07);
  color: #c0cae0;
}
html[data-theme="dark"] .segment-control input:checked + span {
  border-color: #8589ff;
  background: linear-gradient(135deg, #7074ee, #5d62d6);
  color: #fff;
  box-shadow: 0 8px 18px rgba(67,72,190,.35);
}
html[data-theme="dark"] .local-note {
  border-color: rgba(118,223,170,.24);
  background: linear-gradient(135deg, rgba(54,146,94,.23), rgba(37,105,78,.18));
}
html[data-theme="dark"] .local-note > span { color: #82e1ae; }
html[data-theme="dark"] .local-note strong { color: #d9f7e6; }
html[data-theme="dark"] .local-note p { color: #abd5bd; }

html[data-theme="dark"] .status-dot,
html[data-theme="dark"] .result-badge {
  border: 1px solid rgba(195,206,245,.12);
  background: rgba(255,255,255,.08);
  color: #c2cce2;
}
html[data-theme="dark"] .result-badge { background: rgba(132,136,255,.17); color: #c7c9ff; }
html[data-theme="dark"] .text-button,
html[data-theme="dark"] .verify-button,
html[data-theme="dark"] .download-button { color: #c1cbe1; }
html[data-theme="dark"] .mode-toggle,
html[data-theme="dark"] .copy-button,
html[data-theme="dark"] .verify-button,
html[data-theme="dark"] .download-button {
  border-color: rgba(195,206,245,.16);
  background: rgba(255,255,255,.075);
  color: #d1d9eb;
}
html[data-theme="dark"] .mode-toggle:hover,
html[data-theme="dark"] .verify-button:hover:not(:disabled),
html[data-theme="dark"] .download-button:hover:not(:disabled) { border-color: rgba(151,156,255,.4); background: rgba(128,132,255,.13); color: #f3f5ff; }
html[data-theme="dark"] .mode-toggle.active { border-color: rgba(151,156,255,.3); background: linear-gradient(135deg, rgba(128,132,255,.22), rgba(76,170,205,.14)); color: #d9daff; }
html[data-theme="dark"] .copy-button { border-color: transparent; background: linear-gradient(135deg, #7478ee, #5c61d4); color: #fff; box-shadow: 0 9px 20px rgba(54,59,180,.34); }
html[data-theme="dark"] .import-workbook-button { border-color: rgba(118,223,170,.22); background: rgba(56,148,95,.17); color: #aeeac7; }
html[data-theme="dark"] .workbook-import { border-color: rgba(118,223,170,.2); background: linear-gradient(135deg, rgba(51,142,91,.2), rgba(54,132,167,.15)); }
html[data-theme="dark"] .workbook-import strong { color: #d7f4e3; }
html[data-theme="dark"] .workbook-import p { color: #a9cdb9; }
html[data-theme="dark"] .workbook-import > button { background: rgba(255,255,255,.08); color: #bed2c6; }
html[data-theme="dark"] .batch-progress { border-color: rgba(151,156,255,.22); background: rgba(116,120,238,.12); }
html[data-theme="dark"] .batch-progress > div { color: #c4cee2; }
html[data-theme="dark"] .batch-progress > div b { color: #adafff; }
html[data-theme="dark"] .batch-progress > button { background: rgba(255,255,255,.09); color: #c1cbe1; }

html[data-theme="dark"] .formula-editor-shell {
  border-color: var(--dark-border-strong);
  background:
    linear-gradient(90deg, rgba(169,179,236,.075) 1px, transparent 1px),
    linear-gradient(rgba(169,179,236,.075) 1px, transparent 1px),
    #11192d;
  background-size: 24px 24px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
html[data-theme="dark"] .formula-editor-shell:focus-within { border-color: #8589ff; box-shadow: 0 0 0 4px rgba(126,130,255,.17), inset 0 1px 0 rgba(255,255,255,.04); }
html[data-theme="dark"] textarea { color: #f4f6ff; caret-color: #a7aaff; }
html[data-theme="dark"] textarea::placeholder { color: #8391b0; opacity: 1; }
html[data-theme="dark"] .editor-line-numbers { border-color: rgba(195,206,245,.14); color: #8e9cbb; }
html[data-theme="dark"] .editor-statusbar { color: #aeb9d1; }
html[data-theme="dark"] .editor-statusbar kbd { border-color: rgba(195,206,245,.18); background: rgba(255,255,255,.08); color: #c4cee2; }
html[data-theme="dark"] .editor-syntax.valid { color: #8ce8b6; }
html[data-theme="dark"] .editor-syntax.invalid { color: #ffacba; }
html[data-theme="dark"] .examples > span { color: #aeb9d1; }
html[data-theme="dark"] .examples button { border-color: rgba(195,206,245,.15); background: rgba(255,255,255,.075); color: #c5cee1; }
html[data-theme="dark"] .examples button:hover { border-color: rgba(151,156,255,.4); background: rgba(132,136,255,.16); color: #dedfff; }
html[data-theme="dark"] .translate-button { background: linear-gradient(135deg, #7276f0, #5a60d2); box-shadow: 0 13px 28px rgba(49,54,173,.38), inset 0 1px 0 rgba(255,255,255,.18); }
html[data-theme="dark"] .translate-button:hover:not(:disabled) { background: linear-gradient(135deg, #8387ff, #666ce2); }
html[data-theme="dark"] .translate-button:disabled { opacity: .56; filter: saturate(.62); }

html[data-theme="dark"] .result-display {
  border: 1px solid rgba(195,206,245,.12);
  background: radial-gradient(circle at 95% 0%, rgba(132,118,255,.28), transparent 38%), linear-gradient(145deg, #111a2f, #0d1426);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 14px 30px rgba(0,3,14,.28);
}
html[data-theme="dark"] .result-display.empty {
  border: 1px dashed rgba(151,156,255,.34);
  background: linear-gradient(145deg, rgba(19,28,50,.94), rgba(15,22,41,.94));
  color: #aeb9d1;
}
html[data-theme="dark"] .empty-icon { border-color: #7e89ad; color: #a7aaff; background: rgba(133,137,255,.1); }
html[data-theme="dark"] .empty-state strong { color: #eaf0fc; }
html[data-theme="dark"] .empty-state p { color: #aeb9d1; }
html[data-theme="dark"] .result-diff-legend { color: #b0bbd3; }
html[data-theme="dark"] .metric {
  border-color: rgba(195,206,245,.16);
  background: rgba(255,255,255,.07);
  color: #cbd4e8;
}
html[data-theme="dark"] .metric span { color: #f1f4fd; }
html[data-theme="dark"] .metric small { color: #aeb9d1; }
html[data-theme="dark"] .conversion-report { border-color: rgba(195,206,245,.16); background: rgba(255,255,255,.065); }
html[data-theme="dark"] .conversion-report summary { color: #d8dfee; }
html[data-theme="dark"] .report-content { border-color: rgba(195,206,245,.14); }
html[data-theme="dark"] .report-content li { background: rgba(255,255,255,.07); color: #bdc7dc; }
html[data-theme="dark"] .report-content li.warning-row { background: rgba(255,126,147,.13); color: #ffb4c0; }
html[data-theme="dark"] .notice { color: #aab6d0; }
html[data-theme="dark"] .notice.warning { color: #ffb1bd; }
html[data-theme="dark"] .notice {
  border-color: rgba(195,206,245,.15);
  background: rgba(255,255,255,.065);
}

html[data-theme="dark"] .dictionary-section,
html[data-theme="dark"] .explain,
html[data-theme="dark"] .scenario-section {
  background: radial-gradient(circle at 8% 20%, rgba(105,88,220,.2), transparent 27%), radial-gradient(circle at 92% 78%, rgba(50,162,149,.1), transparent 27%), linear-gradient(180deg, #0d1426, #11192d);
}
html[data-theme="dark"] .dictionary-card {
  border-color: var(--dark-border);
  background: rgba(21,30,52,.94);
  box-shadow: 0 28px 72px rgba(0,3,14,.43), inset 0 1px 0 rgba(255,255,255,.07);
}
html[data-theme="dark"] .dictionary-search,
html[data-theme="dark"] .dictionary-select,
html[data-theme="dark"] .favorites-toggle {
  border-color: rgba(195,206,245,.17);
  background: rgba(255,255,255,.075);
  color: #c7d0e3;
}
html[data-theme="dark"] .dictionary-search:focus-within,
html[data-theme="dark"] .dictionary-select:focus-within { border-color: #8589ff; box-shadow: 0 0 0 4px rgba(126,130,255,.16); }
html[data-theme="dark"] .dictionary-search > span { color: #a7aaff; }
html[data-theme="dark"] .dictionary-search input,
html[data-theme="dark"] .dictionary-select select { color: #edf1fa; }
html[data-theme="dark"] .dictionary-search input::placeholder { color: #8e9bb9; }
html[data-theme="dark"] .dictionary-select span { color: #a6b2cb; }
html[data-theme="dark"] .favorites-toggle span { color: #ffd171; }
html[data-theme="dark"] .favorites-toggle[aria-pressed="true"] { border-color: rgba(255,209,113,.35); background: rgba(210,151,51,.16); color: #ffe0a0; }
html[data-theme="dark"] .dictionary-summary p,
html[data-theme="dark"] .dictionary-legend,
html[data-theme="dark"] .dictionary-status { color: #abb7d0; }
html[data-theme="dark"] .dictionary-item {
  border-color: rgba(195,206,245,.15);
  background: linear-gradient(145deg, rgba(30,40,68,.98), rgba(23,32,56,.98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}
html[data-theme="dark"] .dictionary-item:hover { border-color: rgba(151,156,255,.42); background: linear-gradient(145deg, rgba(36,47,79,.98), rgba(28,38,66,.98)); box-shadow: 0 14px 32px rgba(0,3,14,.28), inset 0 1px 0 rgba(255,255,255,.065); }
html[data-theme="dark"] .dictionary-item.is-fallback { background: linear-gradient(145deg, rgba(65,50,28,.92), rgba(42,37,31,.96)); }
html[data-theme="dark"] .dictionary-item code { color: #acaeff; }
html[data-theme="dark"] .dictionary-item strong { color: #f0f3fb; }
html[data-theme="dark"] .dictionary-favorite { background: rgba(255,255,255,.08); color: #9ca9c5; }
html[data-theme="dark"] .dictionary-favorite[aria-pressed="true"] { background: rgba(221,158,51,.2); color: #ffd171; }
html[data-theme="dark"] .dictionary-copy { background: rgba(131,135,255,.16); color: #c5c7ff; }
html[data-theme="dark"] .dictionary-copy:hover { background: rgba(131,135,255,.25); color: #fff; }
html[data-theme="dark"] .dictionary-more { border-color: rgba(151,156,255,.28); background: rgba(126,130,255,.15); color: #c9caff; }
html[data-theme="dark"] .dictionary-empty { color: #aab6d0; }
html[data-theme="dark"] .dictionary-empty strong { color: #e8edf8; }

html[data-theme="dark"] .steps-grid article,
html[data-theme="dark"] .scenario-card {
  border-color: var(--dark-border);
  background: linear-gradient(160deg, rgba(28,38,65,.98), rgba(20,29,51,.98));
  box-shadow: 0 26px 66px rgba(0,3,14,.37), inset 0 1px 0 rgba(255,255,255,.065);
}
html[data-theme="dark"] .steps-grid article:hover,
html[data-theme="dark"] .scenario-card:hover { border-color: rgba(151,156,255,.34); box-shadow: 0 32px 76px rgba(0,3,14,.44), inset 0 1px 0 rgba(255,255,255,.08); }
html[data-theme="dark"] .steps-grid article > span { border-color: rgba(195,206,245,.16); background: rgba(17,25,45,.82); color: #c4cee2; }
html[data-theme="dark"] .step-media { border-color: rgba(195,206,245,.14); background: #151e35; }
html[data-theme="dark"] .step-icon { outline-color: #18213a; }
html[data-theme="dark"] .steps-grid h3,
html[data-theme="dark"] .scenario-copy h3 { color: #f0f3fb; }
html[data-theme="dark"] .steps-grid p,
html[data-theme="dark"] .scenario-copy p { color: #b5c0d8; }
html[data-theme="dark"] .scenario-copy { border-color: rgba(195,206,245,.14); }

html[data-theme="dark"] .coverage p { color: #c0cadf; }
html[data-theme="dark"] .language-cloud span { border-color: rgba(205,215,250,.2); color: #f3f5ff; box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
html[data-theme="dark"] .privacy-card {
  isolation: isolate;
  border: 1px solid rgba(161, 169, 255, .2);
  background:
    radial-gradient(circle at 8% 4%, rgba(126, 112, 242, .24), transparent 32%),
    radial-gradient(circle at 82% 18%, rgba(62, 184, 174, .16), transparent 34%),
    radial-gradient(circle at 100% 100%, rgba(73, 105, 196, .18), transparent 30%),
    linear-gradient(128deg, #181d38 0%, #17213a 50%, #101a2e 100%);
  box-shadow:
    0 32px 82px rgba(0, 3, 18, .48),
    inset 0 1px 0 rgba(255,255,255,.075),
    inset 0 -1px 0 rgba(99, 203, 183, .06);
}

html[data-theme="dark"] .privacy-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .68;
  background:
    linear-gradient(rgba(158, 166, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(158, 166, 255, .045) 1px, transparent 1px),
    linear-gradient(110deg, transparent 18%, rgba(255,255,255,.028) 48%, transparent 72%);
  background-size: 34px 34px, 34px 34px, 100% 100%;
  mask-image: linear-gradient(90deg, rgba(0,0,0,.66), transparent 67%);
  pointer-events: none;
}

html[data-theme="dark"] .privacy-card::after { color: rgba(154, 165, 255, .055); }

html[data-theme="dark"] .privacy-symbol {
  border-color: rgba(170, 178, 255, .24);
  background:
    radial-gradient(circle at 34% 28%, rgba(143, 226, 203, .16), transparent 48%),
    rgba(126, 135, 222, .1);
  color: #9be3c7;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 18px 42px rgba(3, 7, 27, .24);
}

html[data-theme="dark"] .privacy-card .section-index { color: #aaaaff; }
html[data-theme="dark"] .privacy-card h2 { color: #f5f6ff; text-shadow: 0 2px 22px rgba(114, 118, 226, .12); }
html[data-theme="dark"] .privacy-card p { color: #bdc6db; }
html[data-theme="dark"] .privacy-card ul { color: #e4e9f5; }
html[data-theme="dark"] .privacy-card li span {
  background: #8ee0bc;
  color: #132e29;
  box-shadow: 0 0 0 4px rgba(105, 213, 174, .08);
}

html[data-theme="dark"] .privacy-policy-link {
  border-color: rgba(167, 175, 255, .22);
  background: rgba(131, 138, 231, .1);
  color: #e2e5ff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}

html[data-theme="dark"] .privacy-policy-link:hover,
html[data-theme="dark"] .privacy-policy-link:focus-visible {
  border-color: rgba(155, 227, 199, .42);
  background: rgba(114, 121, 218, .17);
}
html[data-theme="dark"] footer { border-color: rgba(195,206,245,.14); background: #090f1d; }
html[data-theme="dark"] .footer-inner p { color: #aab6d0; }
html[data-theme="dark"] .notice-link,
html[data-theme="dark"] .footer-inner > a { color: #b8baff; }

html[data-theme="dark"] .comparison-dialog {
  border-color: var(--dark-border);
  background: rgba(13,19,35,.985);
  box-shadow: 0 42px 140px rgba(0,0,0,.66), inset 0 1px 0 rgba(255,255,255,.075);
}
html[data-theme="dark"] .comparison-header p { color: #b4bfd7; }
html[data-theme="dark"] .comparison-close,
html[data-theme="dark"] .comparison-pane,
html[data-theme="dark"] .comparison-footer { border-color: rgba(195,206,245,.17); background: rgba(255,255,255,.065); color: #e4e9f5; }
html[data-theme="dark"] .comparison-close:hover { border-color: rgba(151,156,255,.42); background: rgba(132,136,255,.16); }
html[data-theme="dark"] .comparison-pane > div { border-color: rgba(195,206,245,.14); color: #d7deed; }
html[data-theme="dark"] .source-pane pre { background: linear-gradient(rgba(169,179,236,.065) 1px, transparent 1px), linear-gradient(90deg, rgba(169,179,236,.065) 1px, transparent 1px), #11192d; background-size: 24px 24px; }
html[data-theme="dark"] .comparison-change-list li { border: 1px solid rgba(195,206,245,.1); background: rgba(255,255,255,.085); color: #c6cfe2; }

/* Hero typography — editorial hierarchy paired with the atlas illustration. */
.hero-copy {
  max-width: 610px;
}

.hero .eyebrow {
  min-height: 32px;
  gap: 12px;
  color: #667086;
  font-size: 10px;
  font-weight: 680;
  letter-spacing: .045em;
}

.hero .eyebrow span {
  min-width: 46px;
  padding: 6px 10px;
  text-align: center;
  letter-spacing: .11em;
}

.hero h1 {
  max-width: 600px;
  margin: 30px 0 27px;
  font-size: clamp(52px, 4.65vw, 69px);
  line-height: .96;
  letter-spacing: -.055em;
  text-wrap: initial;
  text-shadow: none;
}

.hero-title-line {
  display: block;
}

.hero-title-top {
  color: #1a2035;
  font-size: .78em;
  font-weight: 720;
  letter-spacing: -.045em;
}

.hero-title-focus {
  margin-top: .18em;
  font-size: 1em;
  font-weight: 860;
  line-height: .94;
  letter-spacing: -.072em;
  background-image: linear-gradient(100deg, #5d61eb 0%, #9a7bf5 51%, #58a8e2 100%);
  filter: drop-shadow(0 10px 26px rgba(88, 82, 218, .13));
}

.hero-title-bottom {
  margin-top: .13em;
  color: #252d49;
  font-size: .87em;
  font-weight: 790;
  letter-spacing: -.06em;
}

.hero-lead {
  position: relative;
  max-width: 545px;
  padding-left: 19px;
  color: #5d687e;
  font-size: 14px;
  font-weight: 450;
  line-height: 1.86;
  letter-spacing: .006em;
  text-wrap: pretty;
}

.hero-lead::before {
  content: "";
  position: absolute;
  left: 0;
  top: .28em;
  bottom: .28em;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, #8588ff, #65c8d9);
  box-shadow: 0 0 18px rgba(109, 122, 241, .28);
}

.hero-signal-row {
  margin-top: 26px;
}

.hero-actions {
  margin-top: 30px;
}

html[data-theme="dark"] .hero-title-top {
  color: #f4f6fd;
}

html[data-theme="dark"] .hero-title-focus {
  background-image: linear-gradient(100deg, #9699ff 0%, #b391ff 50%, #7bc6ff 100%);
  filter: drop-shadow(0 12px 30px rgba(108, 99, 236, .18));
}

html[data-theme="dark"] .hero-title-bottom {
  color: #e7ebf7;
}

html[data-theme="dark"] .hero-lead {
  color: #bec9df;
}

@media (max-width: 820px) {
  .hero-copy {
    max-width: 650px;
  }

  .hero h1 {
    max-width: 620px;
    font-size: clamp(50px, 9vw, 66px);
  }

  .hero-lead {
    max-width: 590px;
  }
}

@media (max-width: 560px) {
  .hero .eyebrow {
    min-height: 29px;
    gap: 9px;
    font-size: 9px;
  }

  .hero .eyebrow span {
    min-width: 42px;
    padding: 5px 8px;
  }

  .hero h1 {
    margin: 24px 0 22px;
    font-size: clamp(39px, 12vw, 48px);
    line-height: .98;
  }

  .hero-title-top {
    font-size: .8em;
  }

  .hero-title-focus {
    margin-top: .2em;
    letter-spacing: -.065em;
  }

  .hero-title-bottom {
    margin-top: .15em;
    font-size: .88em;
  }

  .hero-lead {
    padding-left: 15px;
    font-size: 13px;
    line-height: 1.78;
  }

  .hero-actions {
    gap: 20px;
  }

  .trust-note {
    padding-left: 2px;
  }
}

/* Full-site spacing audit — keep labels readable and give rules a safe buffer. */
.route-panel,
.editor-panel,
.result-panel {
  padding-top: 28px;
}

/* Stable trailing controls for the three primary route selectors. */
.select-wrap {
  grid-template-columns: auto minmax(0, 1fr) 34px;
  column-gap: 10px;
  padding: 8px 7px 8px 12px;
}

.select-wrap > span:last-child {
  position: relative;
  z-index: 2;
  grid-column: 3;
  grid-row: 1;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: currentColor;
  font-size: 0;
  line-height: 1;
  pointer-events: none;
  transition: background .16s ease, color .16s ease;
}

.select-wrap > span:last-child::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 8px;
  width: 10px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform: translateY(-50%) rotate(45deg);
  transform-origin: center;
}

.select-wrap > span:last-child::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 8px;
  width: 10px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform: translateY(-50%) rotate(-45deg);
  transform-origin: center;
}

.select-wrap select {
  z-index: 1;
  grid-column: 2 / 4;
  grid-row: 1;
  height: 100%;
  padding-right: 44px;
  cursor: pointer;
}

.select-wrap:hover > span:last-child,
.select-wrap:focus-within > span:last-child {
  background: rgba(132, 136, 255, .12);
  color: #bfc2ff;
}

.card-kicker,
.status-dot,
.result-badge,
.editor-tools button,
.result-actions button,
.examples > span,
.examples button,
.conversion-report summary,
.dictionary-legend span,
.dictionary-status,
.scenario-tag,
.footer-inner > a {
  white-space: nowrap;
  word-break: keep-all;
}

.editor-toolbar,
.editor-toolbar > div,
.editor-tools,
.result-actions {
  min-width: 0;
}

.editor-toolbar {
  flex-wrap: wrap;
  gap: 12px 14px;
}

.editor-toolbar > div:first-child {
  flex: 0 0 auto;
  justify-content: flex-start;
}

.editor-tools,
.result-actions {
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.editor-tools button,
.result-actions button {
  flex: 0 0 auto;
  min-height: 34px;
  line-height: 1.2;
}

.editor-panel .editor-tools,
.result-panel .result-actions {
  margin-left: auto;
}

/* If the result header cannot hold both groups, move the whole action rail. */
.result-panel .editor-toolbar {
  align-items: center;
}

.result-panel .result-actions {
  max-width: 100%;
}

/* Reserve a dedicated header lane so long output never meets the AST label. */
.result-display:not(.empty) {
  padding: 44px 24px 24px;
}

.result-display:not(.empty)::before {
  top: 15px;
  right: 20px;
  pointer-events: none;
}

.result-display:not(.empty) code {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Keep the editor action rail visually separate from the editor border. */
.editor-panel .formula-editor-shell {
  margin-top: 14px;
}

.separator-box {
  margin-top: 24px;
  padding-top: 15px;
}

.regional-advanced {
  margin-top: 14px;
}

.regional-advanced summary {
  padding: 13px 2px 4px;
}

.regional-advanced[open] summary {
  padding-bottom: 11px;
}

.metric {
  padding: 11px 11px 11px 16px;
}

.conversion-report summary {
  min-height: 38px;
  padding: 10px 13px;
}

.report-content {
  padding: 13px 12px 12px;
}

.report-content > p {
  margin: 0 0 11px;
}

.report-content li {
  padding: 8px 10px;
}

.dictionary-summary {
  margin: 22px 2px 16px;
}

.dictionary-item {
  padding: 17px;
}

.dictionary-item strong {
  margin-block: 13px 15px;
}

.dictionary-item-footer {
  min-height: 36px;
}

.dictionary-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  line-height: 1;
  white-space: nowrap;
  transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.dictionary-copy:hover {
  border-color: rgba(128, 132, 255, .22);
  box-shadow: 0 7px 16px rgba(35, 42, 88, .14);
  transform: translateY(-1px);
}

.dictionary-copy:focus-visible {
  outline: 3px solid rgba(128, 132, 255, .28);
  outline-offset: 2px;
}

.step-copy {
  padding: 0 25px 26px;
}

.scenario-copy {
  padding: 27px 27px 30px;
}

.comparison-pane > div {
  padding: 15px 18px;
}

.comparison-footer {
  padding: 17px 19px;
}

/* Move to the spacious two-column composition before the three cards compress. */
@media (max-width: 1180px) {
  .workspace {
    grid-template-columns: minmax(235px, .72fr) minmax(0, 1.28fr);
  }

  .result-panel {
    grid-column: 1 / -1;
    min-height: 430px;
  }
}

@media (max-width: 820px) {
  .workspace {
    grid-template-columns: 1fr;
  }

  .result-panel {
    grid-column: auto;
  }
}

@media (max-width: 820px) {
  .comparison-dialog-inner { padding: 24px; }
  .comparison-grid { grid-template-columns: 1fr; }
  .comparison-pane pre { min-height: 190px; max-height: 30vh; }
  .comparison-footer { grid-template-columns: 1fr; gap: 12px; }
}

@media (max-width: 560px) {
  .route-panel,
  .editor-panel,
  .result-panel {
    padding-top: 22px;
  }

  .editor-panel .editor-toolbar,
  .result-panel .editor-toolbar {
    align-items: flex-start;
  }

  .editor-panel .editor-tools,
  .result-panel .result-actions {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }

  .result-panel .result-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .result-panel .result-actions button {
    width: 100%;
  }

  .separator-box {
    padding-top: 13px;
  }

  .metric {
    padding: 10px 8px 10px 14px;
  }

  .dictionary-item {
    padding: 16px;
  }

  .editor-panel .formula-editor-shell {
    margin-top: 12px;
  }

  .dictionary-copy {
    min-height: 38px;
  }

  .select-wrap {
    grid-template-columns: auto minmax(0, 1fr) 32px;
    padding-right: 6px;
  }

  .select-wrap > span:last-child {
    width: 32px;
    height: 32px;
  }

  .select-wrap > span:last-child::before {
    left: 7px;
  }

  .select-wrap > span:last-child::after {
    right: 7px;
  }

  .select-wrap select {
    padding-right: 42px;
  }

  .result-display:not(.empty) {
    padding: 41px 18px 20px;
  }

  .result-display:not(.empty)::before {
    top: 14px;
    right: 17px;
  }

  .step-copy {
    padding: 0 22px 24px;
  }

  .scenario-copy {
    padding: 24px 23px 27px;
  }

  body { padding-bottom: 78px; }
  .theme-toggle { min-height: 34px; padding: 5px 7px; }
  .theme-toggle small { display: none; }
  .theme-toggle > span { width: 23px; height: 23px; }
  .formula-editor-shell { grid-template-columns: 35px minmax(0, 1fr); min-height: 245px; }
  .editor-line-numbers { min-height: 245px; padding-top: 18px; padding-right: 8px; font-size: 10px; }
  .formula-editor-shell textarea { min-height: 245px; padding: 18px 15px; }
  .editor-statusbar { flex-wrap: wrap; gap: 6px 10px; }
  .editor-syntax { width: 100%; max-width: 100%; }
  .editor-statusbar kbd { display: none; }
  .compare-button { padding: 7px 8px; font-size: 8px; }
  .comparison-dialog { width: calc(100% - 16px); max-height: calc(100dvh - 16px); border-radius: 23px; }
  .comparison-dialog-inner { padding: 19px; }
  .comparison-header { gap: 12px; }
  .comparison-header h2 { font-size: 23px; }
  .comparison-header p { line-height: 1.6; }
  .comparison-close { width: 36px; height: 36px; }
  .comparison-route { gap: 7px; margin-block: 20px 12px; }
  .comparison-route span,
  .comparison-route b { padding: 6px 8px; font-size: 7px; }
  .comparison-pane pre { min-height: 155px; max-height: 25vh; padding: 18px; }
  .comparison-pane code { font-size: 11px; }

  .mobile-action-bar {
    position: fixed;
    z-index: 20;
    left: 10px;
    right: 10px;
    bottom: calc(9px + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: 1.25fr repeat(3, .75fr);
    gap: 6px;
    padding: 7px;
    border: 1px solid rgba(255,255,255,.66);
    border-radius: 18px;
    background: rgba(255,255,255,.88);
    box-shadow: 0 18px 46px rgba(31,37,70,.24), inset 0 1px 0 rgba(255,255,255,.9);
    contain: paint;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    will-change: transform, opacity;
    transform: translateY(calc(100% + 30px));
    opacity: 0;
    pointer-events: none;
    transition: transform .28s var(--atlas-ease), opacity .2s ease;
  }

  .mobile-action-bar.is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-action-bar button {
    display: grid;
    place-items: center;
    gap: 2px;
    min-height: 49px;
    padding: 5px;
    border: 0;
    border-radius: 12px;
    background: #f2f3f8;
    color: #687086;
    font-size: 7px;
    font-weight: 800;
  }

  .mobile-action-bar button span { font-size: 13px; }
  .mobile-action-bar .mobile-translate { background: linear-gradient(135deg, #6567e7, #4e51c9); color: white; }
  .mobile-action-bar button:disabled { opacity: .38; }

  html[data-theme="light"] .mobile-action-bar {
    border-color: rgba(49,59,98,.18);
    background: rgba(255,255,255,.95);
    box-shadow: 0 20px 50px rgba(35,43,80,.24), inset 0 1px 0 #fff;
  }
  html[data-theme="light"] .mobile-action-bar button {
    border: 1px solid rgba(55,65,104,.1);
    background: #e9ecf4;
    color: #4f5b72;
  }
  html[data-theme="light"] .mobile-action-bar button:not(:disabled):hover { border-color: rgba(76,79,196,.28); background: #e2e3fa; color: #4145b3; }
  html[data-theme="light"] .mobile-action-bar .mobile-translate {
    border-color: transparent;
    background: linear-gradient(135deg, #6266e4, #484dc2);
    color: #fff;
    box-shadow: 0 8px 18px rgba(58,63,174,.25), inset 0 1px 0 rgba(255,255,255,.2);
  }
  html[data-theme="light"] .mobile-action-bar .mobile-translate:not(:disabled):hover {
    border-color: transparent;
    background: linear-gradient(135deg, #6e72ec, #5358cc);
    color: #fff;
  }
  html[data-theme="light"] .mobile-action-bar button:disabled { color: #677289; opacity: .48; }

  html[data-theme="dark"] .mobile-action-bar {
    border-color: rgba(195,206,245,.24);
    background: rgba(13,20,37,.95);
    box-shadow: 0 20px 55px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.085);
  }
  html[data-theme="dark"] .mobile-action-bar button {
    border: 1px solid rgba(195,206,245,.1);
    background: rgba(255,255,255,.105);
    color: #d9e0ef;
  }
  html[data-theme="dark"] .mobile-action-bar button:not(:disabled):hover { border-color: rgba(151,156,255,.36); background: rgba(132,136,255,.17); }
  html[data-theme="dark"] .mobile-action-bar .mobile-translate {
    border-color: transparent;
    background: linear-gradient(135deg, #7d81f8, #5c62d9);
    color: #fff;
    box-shadow: 0 8px 18px rgba(53,59,190,.34), inset 0 1px 0 rgba(255,255,255,.16);
  }
  html[data-theme="dark"] .mobile-action-bar .mobile-translate:not(:disabled):hover {
    border-color: transparent;
    background: linear-gradient(135deg, #8d91ff, #686ee7);
  }
  html[data-theme="dark"] .mobile-action-bar button:disabled { color: #9aa6c0; opacity: .48; }
}

/* Hero type and verification seal — calmer editorial rhythm with a protected text safe area. */
.hero h1 {
  max-width: 570px;
  margin: 31px 0 28px;
  font-family: "SF Pro Display", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  font-size: clamp(50px, 4.25vw, 63px);
  font-weight: 500;
  line-height: 1.065;
  letter-spacing: -.025em;
  font-kerning: normal;
  text-rendering: geometricPrecision;
}

.hero-title-top,
.hero-title-bottom {
  font-family: inherit;
  font-weight: 500;
  letter-spacing: -.018em;
}

.hero-title-top {
  font-size: .87em;
}

.hero-title-focus {
  margin-top: .14em;
  font-family: "Songti SC", "STSong", "Noto Serif CJK SC", serif;
  font-size: 1em;
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: .005em;
  background-image: linear-gradient(102deg, #555bdc 0%, #8170e9 49%, #4b95ca 100%);
  filter: drop-shadow(0 8px 22px rgba(88, 82, 218, .1));
}

.hero-title-bottom {
  margin-top: .16em;
  font-size: .9em;
}

html[data-theme="dark"] .hero-title-focus {
  background-image: linear-gradient(102deg, #a9adff 0%, #c1a8ff 49%, #8bd2ff 100%);
  filter: drop-shadow(0 10px 24px rgba(113, 105, 235, .14));
}

.ticket-label,
.hero-radar-caption,
.passport-stamp {
  font-family: "Avenir Next", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
}

.ticket-label {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .17em;
}

.formula-ticket code {
  font-family: "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
  font-weight: 500;
  letter-spacing: -.018em;
}

.passport-stamp {
  box-sizing: border-box;
  display: grid;
  grid-template-rows: 12px 30px 12px;
  align-content: center;
  justify-items: center;
  gap: 3px;
  width: 104px;
  height: 104px;
  padding: 16px 13px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid #777bea;
  background:
    radial-gradient(circle at 34% 27%, rgba(255,255,255,.98), rgba(245,246,255,.98) 58%, rgba(228,231,252,.98) 100%);
  color: #4b50c7;
  box-shadow:
    0 16px 34px rgba(27,31,92,.22),
    inset 0 0 0 5px rgba(255,255,255,.78),
    inset 0 0 0 6px rgba(91,96,205,.18);
  backdrop-filter: none;
  transform: rotate(7deg);
}

.passport-stamp::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 8px;
  border: 1px solid rgba(75,80,199,.32);
  border-radius: 50%;
  pointer-events: none;
}

.passport-stamp::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 18px;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(116,121,239,.07), rgba(102,196,224,.045));
  pointer-events: none;
}

.passport-stamp span,
.passport-stamp small,
.passport-stamp strong {
  position: relative;
  z-index: 1;
  display: block;
  margin: 0;
  color: inherit;
  white-space: nowrap;
  text-align: center;
}

.passport-stamp span,
.passport-stamp small {
  align-self: center;
  font-size: 7px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .18em;
}

.passport-stamp strong {
  align-self: center;
  font-family: "SF Pro Rounded", "Avenir Next", system-ui, sans-serif;
  font-size: 24px;
  font-weight: 750;
  line-height: 1;
  filter: drop-shadow(0 4px 8px rgba(75,80,199,.18));
}

.passport-stamp small {
  font-size: 6px;
  letter-spacing: .14em;
}

html[data-theme="dark"] .passport-stamp {
  border-color: rgba(175,179,255,.9);
  background:
    radial-gradient(circle at 34% 27%, #fbfcff, #f0f2ff 58%, #dfe4fb 100%);
  color: #464bc2;
  box-shadow:
    0 18px 38px rgba(2,5,25,.34),
    inset 0 0 0 5px rgba(255,255,255,.82),
    inset 0 0 0 6px rgba(91,96,205,.2);
}

.privacy-policy-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  margin-top: 15px;
  padding: 8px 12px;
  border: 1px solid rgba(171, 233, 198, .2);
  border-radius: 10px;
  background: rgba(255,255,255,.07);
  color: #d9f5e5;
  font-size: 10px;
  font-weight: 700;
  transition: border-color .2s ease, background .2s ease, transform .2s var(--atlas-ease);
}

.privacy-policy-link:hover,
.privacy-policy-link:focus-visible {
  border-color: rgba(171, 233, 198, .38);
  background: rgba(255,255,255,.12);
  transform: translateY(-1px);
}

.privacy-policy-link:focus-visible {
  outline: 3px solid rgba(133, 229, 178, .18);
  outline-offset: 3px;
}

@media (max-width: 820px) {
  .hero h1 {
    max-width: 590px;
    font-size: clamp(48px, 8.2vw, 61px);
  }
}

@media (max-width: 560px) {
  .hero h1 {
    margin: 25px 0 23px;
    font-size: clamp(38px, 10.7vw, 44px);
    line-height: 1.08;
    letter-spacing: -.018em;
  }

  .hero-title-top { font-size: .88em; }
  .hero-title-focus {
    margin-top: .16em;
    letter-spacing: .008em;
  }
  .hero-title-bottom {
    margin-top: .17em;
    font-size: .91em;
  }

  .passport-stamp {
    grid-template-rows: 9px 22px 9px;
    gap: 2px;
    width: 80px;
    height: 80px;
    padding: 12px 10px;
    transform: rotate(6deg);
  }

  .passport-stamp::before { inset: 6px; }
  .passport-stamp::after { inset: 14px; }
  .passport-stamp span { font-size: 5.5px; }
  .passport-stamp strong { font-size: 19px; }
  .passport-stamp small { font-size: 4.75px; letter-spacing: .12em; }
}

/* Full navigation footer — product-specific, local-first and responsive. */
.site-footer {
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(187, 199, 239, .14);
  background:
    radial-gradient(circle at 14% 0%, rgba(92, 96, 219, .16), transparent 28%),
    radial-gradient(circle at 86% 12%, rgba(43, 168, 190, .09), transparent 25%),
    linear-gradient(155deg, #0c1323 0%, #080e1a 62%, #0a1220 100%);
  color: #edf2ff;
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .42;
  background-image:
    linear-gradient(rgba(163, 175, 223, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(163, 175, 223, .035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
}

.footer-shell {
  position: relative;
  z-index: 1;
  padding-top: 76px;
  padding-bottom: 30px;
}

.footer-main {
  display: grid;
  grid-template-columns: minmax(300px, 1.18fr) minmax(520px, 1.82fr);
  gap: clamp(64px, 8vw, 118px);
  align-items: start;
}

.footer-intro {
  max-width: 420px;
}

.footer-brand {
  display: inline-flex;
  color: #f7f9ff;
}

.footer-brand .brand-mark {
  width: 46px;
  height: 46px;
  border-color: rgba(201, 208, 255, .22);
  box-shadow: 0 12px 28px rgba(54, 58, 190, .28), inset 0 1px 0 rgba(255,255,255,.38);
}

.footer-brand strong {
  color: #f7f9ff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.015em;
}

.footer-brand small {
  margin-top: 5px;
  color: #98a6c3;
  font-size: 9px;
  font-weight: 650;
  letter-spacing: .17em;
}

.footer-intro > p {
  max-width: 400px;
  margin: 28px 0 0;
  color: #aab7cf;
  font-size: 13px;
  line-height: 1.9;
  text-wrap: pretty;
}

.footer-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 25px;
}

.footer-trust span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 6px 9px;
  border: 1px solid rgba(191, 204, 244, .12);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  color: #8f9db9;
  font-family: "Avenir Next", "SF Pro Display", system-ui, sans-serif;
  font-size: 7px;
  font-weight: 750;
  letter-spacing: .08em;
}

.footer-trust span:first-child {
  color: #a9eac6;
}

.footer-trust i {
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: #5fd29a;
  box-shadow: 0 0 0 4px rgba(95,210,154,.11), 0 0 14px rgba(95,210,154,.34);
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 66px);
  font-size: inherit;
}

.footer-nav-group h2 {
  margin: 0 0 25px;
  color: #f3f6ff;
  font-family: "Avenir Next", "SF Pro Display", "PingFang SC", system-ui, sans-serif;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .12em;
}

.footer-nav-group ul {
  display: grid;
  gap: 17px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-nav-group a {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  color: #9daac1;
  font-size: 12px;
  font-weight: 520;
  line-height: 1.5;
  transition: color .2s ease, transform .2s var(--atlas-ease);
}

.footer-nav-group a::after {
  display: none;
}

.footer-nav-group a::before {
  content: "";
  width: 0;
  height: 1px;
  margin-right: 0;
  background: #8d91ff;
  opacity: 0;
  transition: width .2s var(--atlas-ease), margin-right .2s var(--atlas-ease), opacity .2s ease;
}

.footer-nav-group a:hover,
.footer-nav-group a:focus-visible {
  color: #eef1ff;
  transform: translateX(2px);
}

.footer-nav-group a:hover::before,
.footer-nav-group a:focus-visible::before {
  width: 12px;
  margin-right: 7px;
  opacity: 1;
}

.footer-nav-group a:focus-visible {
  border-radius: 4px;
  outline: 3px solid rgba(141,145,255,.24);
  outline-offset: 4px;
}

.footer-meta {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  margin-top: 66px;
  padding-top: 24px;
  border-top: 1px solid rgba(189, 202, 240, .13);
  color: #7f8da8;
}

.footer-meta p {
  margin: 0;
  font-size: 9px;
  font-weight: 550;
  letter-spacing: .015em;
}

.footer-meta > p:last-child {
  text-align: right;
}

.footer-meta > div {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #71809e;
  font-family: "Avenir Next", "SF Pro Display", system-ui, sans-serif;
  font-size: 7px;
  font-weight: 750;
  letter-spacing: .1em;
}

.footer-meta > div i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #596885;
}

html[data-theme="light"] .site-footer,
html[data-theme="dark"] .site-footer {
  border-color: rgba(187, 199, 239, .14);
  background:
    radial-gradient(circle at 14% 0%, rgba(92, 96, 219, .16), transparent 28%),
    radial-gradient(circle at 86% 12%, rgba(43, 168, 190, .09), transparent 25%),
    linear-gradient(155deg, #0c1323 0%, #080e1a 62%, #0a1220 100%);
}

html[data-theme] .site-footer .footer-brand strong {
  color: #f7f9ff;
}

html[data-theme] .site-footer .footer-brand small {
  color: #98a6c3;
}

html[data-theme] .site-footer .footer-nav-group a {
  color: #9daac1;
}

html[data-theme] .site-footer .footer-nav-group a:hover,
html[data-theme] .site-footer .footer-nav-group a:focus-visible {
  color: #eef1ff;
}

@media (max-width: 920px) {
  .footer-main {
    grid-template-columns: 1fr;
    gap: 52px;
  }

  .footer-intro {
    max-width: 560px;
  }

  .footer-intro > p {
    max-width: 540px;
  }
}

@media (max-width: 620px) {
  body {
    padding-bottom: 0;
  }

  .footer-shell {
    width: min(100% - 34px, 1180px);
    padding-top: 58px;
    padding-bottom: 106px;
  }

  .footer-main {
    gap: 44px;
  }

  .footer-intro > p {
    margin-top: 23px;
    font-size: 12px;
    line-height: 1.82;
  }

  .footer-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 38px 26px;
  }

  .footer-nav-group:last-child {
    grid-column: 1 / -1;
  }

  .footer-nav-group h2 {
    margin-bottom: 20px;
  }

  .footer-nav-group ul {
    gap: 8px;
  }

  .footer-nav-group a {
    width: 100%;
    min-height: 38px;
    padding: 7px 0;
  }

  .footer-nav-group:last-child ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 20px;
  }

  .footer-meta {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 48px;
    padding-top: 21px;
  }

  .footer-meta > p:last-child {
    text-align: left;
  }

  .footer-meta > div {
    grid-row: 2;
  }
}

/* Stable top canvas — keep the opening background resident while the document scrolls. */
html[data-theme="light"] { background-color: #f5f6fc; }
html[data-theme="dark"] { background-color: #090f1d; }

html[data-theme] body {
  position: relative;
  isolation: isolate;
  background: transparent;
}

html[data-theme] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  contain: strict;
  pointer-events: none;
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
}

html[data-theme="light"] body::before {
  background:
    radial-gradient(circle at 12% 5%, rgba(181,170,255,.4), transparent 27%),
    radial-gradient(circle at 93% 13%, rgba(85,203,232,.24), transparent 24%),
    radial-gradient(circle at 54% 30%, rgba(255,207,110,.14), transparent 22%),
    linear-gradient(180deg, #fbfbff 0%, #f1f3fa 54%, #fafbfe 100%);
}

html[data-theme="dark"] body::before {
  background:
    radial-gradient(circle at 10% 4%, rgba(103,89,220,.31), transparent 27%),
    radial-gradient(circle at 92% 15%, rgba(44,151,184,.23), transparent 25%),
    linear-gradient(180deg, #0b1020 0%, #111a30 54%, #090f1d 100%);
}

.hero-visual {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform;
}

.hero-copy::before {
  width: 330px;
  height: 330px;
  left: -160px;
  top: 38px;
  background: radial-gradient(circle, rgba(138,121,246,.13), rgba(138,121,246,.045) 44%, transparent 72%);
  filter: none;
}

.hero-visual::after {
  inset: 4% 1% 1% 3%;
  background:
    radial-gradient(circle at 31% 28%, rgba(104,213,236,.25), transparent 34%),
    radial-gradient(circle at 72% 70%, rgba(239,177,87,.18), transparent 36%),
    radial-gradient(circle at 51% 52%, rgba(125,113,239,.14), transparent 65%);
  filter: none;
  opacity: .86;
  transform: translateZ(0);
}

.hero-art,
.formula-ticket,
.hero-node {
  animation: none;
}

.hero-art {
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
}

/* Hero hierarchy refinement — one type system, fewer competing surfaces. */
.hero-copy {
  max-width: 570px;
}

.hero .eyebrow {
  min-height: 28px;
  gap: 11px;
  color: #68738b;
  font-family: "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
  font-size: 9.5px;
  font-weight: 650;
  letter-spacing: .045em;
}

.hero .eyebrow span {
  min-width: 43px;
  padding: 5px 9px;
  border-color: rgba(89, 93, 209, .2);
  background: rgba(103, 105, 230, .09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42);
  color: #565bd1;
  font-size: 8px;
  letter-spacing: .12em;
}

.hero h1 {
  max-width: 555px;
  margin: 25px 0 22px;
  font-family: "SF Pro Display", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  font-size: clamp(46px, 3.8vw, 58px);
  font-weight: 650;
  line-height: 1.075;
  letter-spacing: -.035em;
  text-wrap: initial;
}

.hero-title-line,
.hero-title-top,
.hero-title-focus,
.hero-title-bottom {
  display: block;
  margin-top: 0;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

.hero-title-focus,
html[data-theme="dark"] .hero-title-focus {
  margin-top: .08em;
  background-image: linear-gradient(100deg, #777ced 0%, #9a83ed 48%, #70add7 100%);
  filter: none;
}

.hero-title-bottom {
  margin-top: .08em;
}

.hero-lead {
  max-width: 510px;
  padding-left: 16px;
  color: #58647b;
  font-size: 13px;
  font-weight: 450;
  line-height: 1.75;
  letter-spacing: .008em;
}

.hero-lead::before {
  top: .3em;
  bottom: .3em;
  width: 2px;
  box-shadow: none;
}

.hero-signal-row {
  gap: 7px;
  margin-top: 21px;
}

.hero-signal-row span {
  min-height: 32px;
  gap: 6px;
  padding: 5px 9px 5px 6px;
  border-color: rgba(68, 77, 120, .1);
  background: rgba(255,255,255,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
  color: #68738a;
  font-size: 8.5px;
  font-weight: 680;
  backdrop-filter: none;
}

.hero-signal-row i {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  font-size: 7px;
}

.hero-actions {
  display: grid;
  grid-template-columns: 174px minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  margin-top: 26px;
}

.primary-cta {
  box-sizing: border-box;
  width: 174px;
  min-width: 0;
  min-height: 52px;
  padding: 13px 16px;
  border-radius: 13px;
  font-size: 12px;
  box-shadow: 0 12px 26px rgba(77,79,206,.23), inset 0 1px 0 rgba(255,255,255,.22);
}

.primary-cta span {
  font-size: 17px;
}

.trust-note {
  min-width: 0;
  gap: 10px;
  color: #748097;
  font-size: 9.5px;
  line-height: 1.55;
  white-space: nowrap;
}

.trust-note strong {
  color: #30384f;
  font-size: 10.5px;
  font-weight: 730;
}

.avatars i {
  width: 27px;
  height: 27px;
  margin-left: -6px;
  font-size: 8px;
}

.avatars {
  flex: 0 0 auto;
}

html[data-theme="dark"] .hero .eyebrow {
  color: #aeb8cf;
}

html[data-theme="dark"] .hero .eyebrow span {
  border-color: rgba(153, 157, 255, .34);
  background: rgba(128, 130, 238, .14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  color: #c6c8ff;
}

html[data-theme="dark"] .hero-title-top,
html[data-theme="dark"] .hero-title-bottom {
  color: #f1f4fc;
}

html[data-theme="dark"] .hero-lead {
  color: #b7c2d8;
}

html[data-theme="dark"] .hero-signal-row span {
  border-color: rgba(183, 196, 231, .13);
  background: rgba(255,255,255,.045);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  color: #b8c3d9;
}

html[data-theme="dark"] .trust-note {
  color: #9eabc3;
}

html[data-theme="dark"] .trust-note strong {
  color: #edf1fb;
}

@media (max-width: 820px) {
  .hero-copy {
    max-width: 620px;
  }

  .hero h1 {
    max-width: 590px;
    font-size: clamp(44px, 7.8vw, 56px);
  }

  .hero-lead {
    max-width: 550px;
  }
}

@media (max-width: 560px) {
  .hero .eyebrow {
    gap: 8px;
    font-size: 8.5px;
  }

  .hero .eyebrow span {
    min-width: 39px;
    padding: 4px 7px;
    font-size: 7px;
  }

  .hero h1 {
    margin: 21px 0 20px;
    font-size: clamp(35px, 9.8vw, 41px);
    line-height: 1.09;
    letter-spacing: -.028em;
  }

  .hero-title-focus,
  .hero-title-bottom {
    margin-top: .07em;
  }

  .hero-lead {
    padding-left: 13px;
    font-size: 12px;
    line-height: 1.72;
  }

  .hero-signal-row {
    gap: 6px;
    margin-top: 18px;
  }

  .hero-signal-row span {
    min-height: 30px;
    padding: 4px 8px 4px 5px;
    font-size: 7.5px;
  }

  .hero-signal-row i {
    width: 19px;
    height: 19px;
  }

  .hero-actions {
    grid-template-columns: 156px minmax(0, 1fr);
    gap: 14px;
    margin-top: 22px;
  }

  .primary-cta {
    width: 156px;
    min-height: 48px;
    padding: 11px 14px;
    font-size: 11px;
  }

  .trust-note {
    gap: 7px;
    font-size: 8px;
  }

  .trust-note strong {
    font-size: 9px;
  }

  .avatars i {
    width: 23px;
    height: 23px;
    margin-left: -5px;
    border-width: 1px;
    font-size: 7px;
  }
}

@media (max-width: 390px) {
  .hero-actions {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .primary-cta {
    width: min(100%, 220px);
  }

  .trust-note {
    gap: 9px;
    padding-left: 5px;
    font-size: 9px;
  }

  .trust-note strong {
    font-size: 10px;
  }

  .avatars i {
    width: 25px;
    height: 25px;
    font-size: 7.5px;
  }
}

/* Scroll-raster stability — avoid disposable GPU layers on the opening canvas. */
.noise {
  display: none;
}

.site-header {
  will-change: auto;
}

html[data-theme] body::before {
  contain: none;
  transform: none;
  backface-visibility: visible;
  will-change: auto;
}

.hero {
  contain: layout paint;
}

.hero-visual,
.hero-visual::after,
.hero-art {
  transform: none;
  backface-visibility: visible;
  will-change: auto;
}

/* Keep one composited copy warm so a long-distance return never exposes an unrasterized first frame. */
.hero-retainer {
  position: fixed;
  top: var(--hero-retainer-top, 90px);
  right: 0;
  left: 0;
  z-index: 2;
  height: var(--hero-retainer-height, 720px);
  overflow: hidden;
  contain: strict;
  isolation: isolate;
  opacity: 1;
  pointer-events: none;
  will-change: transform;
}

.hero-retainer .hero {
  height: var(--hero-retainer-height, 720px);
  min-height: 0;
  margin-inline: auto;
}

@keyframes atlas-retainer-scroll {
  from { transform: translateY(0); }
  to { transform: translateY(calc(-1 * var(--hero-retainer-distance, 719px))); }
}

@supports (animation-timeline: scroll()) {
  .has-hero-retainer .hero-retainer {
    animation: atlas-retainer-scroll 1ms linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 var(--hero-retainer-distance, 719px);
  }

  .has-hero-retainer main > .hero {
    opacity: .001;
  }
}

/* English interface fit — preserve the editorial rhythm with naturally wider labels. */
html[lang="en"] .nav-links {
  gap: clamp(24px, 3.6vw, 48px);
}

html[lang="en"] .hero h1,
html[lang="en"] .workspace-head h2,
html[lang="en"] .dictionary-head h2,
html[lang="en"] .explain-title h2,
html[lang="en"] .coverage h2,
html[lang="en"] .scenario-head h2,
html[lang="en"] .privacy-card h2 {
  text-wrap: balance;
}

html[lang="en"] .primary-cta {
  width: 184px;
}

html[lang="en"] .workspace-head > div:first-child {
  max-width: 760px;
}

html[lang="en"] .locale-format-title {
  align-items: flex-start;
  gap: 10px;
}

html[lang="en"] .locale-format-title > span:last-child {
  max-width: 150px;
  line-height: 1.45;
  text-align: right;
  white-space: normal;
}

html[lang="en"] .regional-advanced summary {
  gap: 12px;
}

html[lang="en"] .regional-advanced summary > span {
  line-height: 1.35;
}

html[lang="en"] .regional-advanced summary small {
  max-width: 108px;
  line-height: 1.35;
  text-align: right;
}

html[lang="en"] .segment-control span {
  padding-inline: 8px;
}

html[lang="en"] .editor-tools button,
html[lang="en"] .result-actions button {
  padding-inline: 12px;
  white-space: nowrap;
}

html[lang="en"] .dictionary-controls {
  grid-template-columns: minmax(230px, 1.25fr) minmax(170px, .8fr) minmax(170px, .8fr) auto;
}

html[lang="en"] .dictionary-select {
  min-width: 0;
}

html[lang="en"] .footer-nav {
  gap: clamp(34px, 4.5vw, 70px);
}

@media (max-width: 1050px) {
  html[lang="en"] .dictionary-controls {
    grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(165px, .72fr));
  }

  html[lang="en"] .favorites-toggle {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

@media (max-width: 760px) {
  html[lang="en"] .dictionary-controls {
    grid-template-columns: 1fr 1fr;
  }

  html[lang="en"] .dictionary-search,
  html[lang="en"] .favorites-toggle {
    grid-column: 1 / -1;
  }

  html[lang="en"] .editor-tools button,
  html[lang="en"] .result-actions button {
    min-height: 40px;
  }
}

@media (max-width: 560px) {
  html[lang="en"] .hero h1 {
    max-width: 350px;
    letter-spacing: -.035em;
  }

  html[lang="en"] .primary-cta {
    width: 100%;
  }

  html[lang="en"] .dictionary-controls {
    grid-template-columns: 1fr;
  }

  html[lang="en"] .dictionary-search,
  html[lang="en"] .dictionary-select,
  html[lang="en"] .favorites-toggle {
    grid-column: 1;
    width: 100%;
  }

  html[lang="en"] .mobile-action-bar {
    grid-template-columns: 1.35fr repeat(3, .78fr);
  }

  html[lang="en"] .mobile-action-bar button {
    font-size: 7.5px;
  }
}

@media (max-width: 390px) {
  html[lang="en"] .hero-actions {
    margin-bottom: 22px;
  }

  html[lang="en"] .trust-note {
    min-height: 34px;
    align-items: flex-start;
    white-space: normal;
  }

  html[lang="en"] .trust-note > span:last-child {
    padding-top: 1px;
    line-height: 1.5;
  }

  html[lang="en"] .regional-advanced summary small {
    max-width: 90px;
    font-size: 6.5px;
  }

  html[lang="en"] .result-diff-legend {
    row-gap: 8px;
  }
}

/* Balanced display scale — keep section headlines prominent without overwhelming their content. */
html[lang="en"] .hero h1 {
  font-size: clamp(42px, 3.45vw, 52px);
}

html[lang="en"] .workspace-head h2 {
  font-size: clamp(34px, 3.1vw, 42px);
  line-height: 1.12;
}

html[lang="en"] .dictionary-head h2,
html[lang="en"] .explain-title h2,
html[lang="en"] .scenario-head h2 {
  font-size: clamp(38px, 3.6vw, 48px);
  line-height: 1.1;
  letter-spacing: -.035em;
}

html[lang="en"] .coverage h2 {
  font-size: clamp(36px, 3.25vw, 44px);
  line-height: 1.12;
  letter-spacing: -.032em;
}

html[lang="en"] .privacy-card h2 {
  font-size: clamp(30px, 2.65vw, 35px);
  line-height: 1.16;
}

@media (max-width: 820px) {
  html[lang="en"] .hero h1 {
    font-size: clamp(38px, 6.7vw, 48px);
  }

  html[lang="en"] .workspace-head h2,
  html[lang="en"] .dictionary-head h2,
  html[lang="en"] .explain-title h2,
  html[lang="en"] .coverage h2,
  html[lang="en"] .scenario-head h2 {
    font-size: clamp(34px, 5.6vw, 42px);
  }
}

@media (max-width: 560px) {
  html[lang="en"] .hero h1 {
    font-size: clamp(33px, 9.1vw, 38px);
    line-height: 1.1;
  }

  html[lang="en"] .workspace-head h2 {
    font-size: clamp(29px, 8.2vw, 33px);
  }

  html[lang="en"] .dictionary-head h2,
  html[lang="en"] .explain-title h2,
  html[lang="en"] .coverage h2,
  html[lang="en"] .scenario-head h2 {
    font-size: clamp(30px, 8.6vw, 35px);
    line-height: 1.13;
  }

  html[lang="en"] .privacy-card h2 {
    font-size: clamp(27px, 7.8vw, 31px);
  }
}

/* How-it-works composition — remove the oversized left void and tighten the title-to-card rhythm. */
html[lang="en"] .explain {
  padding-block: 104px;
}

html[lang="en"] .explain-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  gap: 18px;
}

html[lang="en"] .explain-title > .section-index {
  margin-top: 0;
}

html[lang="en"] .explain-title h2 {
  width: min(880px, 100%);
  margin: 0;
  font-size: clamp(36px, 3.15vw, 42px);
  line-height: 1.1;
  letter-spacing: -.034em;
}

html[lang="en"] .explain .steps-grid {
  margin-top: 48px;
}

@media (max-width: 820px) {
  html[lang="en"] .explain {
    padding-block: 76px;
  }

  html[lang="en"] .explain-title {
    gap: 14px;
  }

  html[lang="en"] .explain-title h2 {
    margin: 0;
    font-size: clamp(32px, 5vw, 38px);
  }

  html[lang="en"] .explain .steps-grid {
    margin-top: 36px;
  }
}

@media (max-width: 560px) {
  html[lang="en"] .explain {
    padding-block: 64px;
  }

  html[lang="en"] .explain-title h2 {
    font-size: clamp(29px, 8vw, 32px);
    line-height: 1.14;
  }

  html[lang="en"] .explain .steps-grid {
    margin-top: 28px;
  }
}

/* Footer navigation hierarchy — keep column labels clearly readable at every size. */
.site-footer .footer-nav-group h2 {
  margin-bottom: 24px;
  color: #f7f9ff;
  font-size: clamp(12.5px, 1.02vw, 14px);
  font-weight: 780;
  line-height: 1.3;
  letter-spacing: .085em;
  text-wrap: balance;
}

@media (max-width: 620px) {
  .site-footer .footer-nav-group h2 {
    margin-bottom: 16px;
    font-size: 12.5px;
    line-height: 1.35;
    letter-spacing: .07em;
  }
}

/* Keep the keyboard shortcut compact and prevent the final key from wrapping. */
.editor-statusbar kbd {
  flex: 0 0 auto;
  min-width: max-content;
  white-space: nowrap;
}

@media (min-width: 561px) and (max-width: 700px) {
  .editor-statusbar {
    flex-wrap: wrap;
    gap: 6px 8px;
  }

  .editor-statusbar .editor-syntax {
    width: 100%;
    max-width: 100%;
  }
}