/**/

.exm-main { max-width: 1000px; margin: 0 auto; padding: 104px 40px 0; }
.exm-main [hidden] { display: none !important; }
.exm-main a { text-decoration: none; }
.exm-main svg { flex: 0 0 auto; }

/**/
.exm-hero { margin: 0 0 28px; }
.exm-hero .crumbs { justify-content: flex-start; margin-bottom: 10px; }
.exm-hero h1 {
  margin: 0 0 12px; font-family: var(--disp), sans-serif; font-weight: 700; color: var(--ink);
  font-size: clamp(1.9rem, 3.6vw, 2.7rem); line-height: 1.08; letter-spacing: -.03em; text-wrap: balance;
}
.exm-lede { margin: 0; max-width: 64ch; font-size: 1.04rem; line-height: 1.6; color: var(--ink); }
/**/
.exm-meta { margin: 10px 0 0; font-size: .86rem; line-height: 1.5; color: var(--gray-700); font-variant-numeric: tabular-nums; }

.exm-find > h2, .exm-sec > h2 {
  margin: 0 0 6px; font-family: var(--disp), sans-serif; font-weight: 700; color: var(--ink);
  font-size: 1.35rem; line-height: 1.2; letter-spacing: -.02em; text-wrap: balance;
}
.exm-find > h2 { margin-bottom: 12px; }
.exm-sec { margin-top: 40px; }
.exm-sec-p { margin: 0 0 12px; max-width: 70ch; font-size: .94rem; line-height: 1.6; color: var(--gray-700); }

/**/
.exm-l {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) 14px; column-gap: 10px; align-items: center;
  min-height: 48px; padding: 7px 12px; border-radius: 14px; border: 1px solid var(--glass-border);
  background-color: var(--glass-bg-2); box-shadow: var(--glass-sm); color: var(--ink);
  transition: border-color var(--mo-base) var(--ease-out), transform .12s var(--spring);
}
.exm-l:hover { border-color: var(--violet-tint); }
.exm-l:active { transform: translateY(1px); }
.exm-l::before, .exm-l::after { content: ''; grid-row: 1 / span 2; background-color: currentColor; }
.exm-l::before {
  grid-column: 1; width: 20px; height: 20px; color: var(--violet-ink);
  -webkit-mask: var(--exm-doc) center / contain no-repeat; mask: var(--exm-doc) center / contain no-repeat;
}
.exm-l::after {
  grid-column: 3; width: 14px; height: 14px; color: var(--muted);
  -webkit-mask: var(--exm-out) center / contain no-repeat; mask: var(--exm-out) center / contain no-repeat;
}
.exm-l--zip::before { -webkit-mask-image: var(--exm-zip); mask-image: var(--exm-zip); }
.exm-l--web::before { -webkit-mask-image: var(--exm-web); mask-image: var(--exm-web); }
.exm-l b { grid-column: 2; font-family: var(--disp), sans-serif; font-weight: 600; font-size: .92rem; letter-spacing: -.01em; line-height: 1.25; }
.exm-l small { grid-column: 2; margin-top: 1px; font-size: .76rem; font-weight: 600; line-height: 1.3; color: var(--muted); overflow-wrap: anywhere; }
.exm-page {
  --exm-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h4'/%3E%3C/svg%3E");
  --exm-zip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7l2-3h12l2 3v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1z'/%3E%3Cpath d='M4 7h16M12 11v6m-2-2l2 2 2-2'/%3E%3C/svg%3E");
  --exm-web: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E");
  --exm-out: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E");
  --exm-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --exm-go: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
}

/**/
.exm-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.exm-chip, .exm-more > summary {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: var(--radius-full);
  border: 1px solid var(--glass-border); background-color: var(--glass-bg-2); box-shadow: var(--glass-sm); color: var(--ink);
  font: 700 .86rem var(--ui), sans-serif; cursor: pointer; list-style: none;
  transition: border-color var(--mo-base) var(--ease-out), transform .12s var(--spring);
}
.exm-chip:hover, .exm-more > summary:hover { border-color: var(--violet-tint); }
.exm-chip:active, .exm-more > summary:active { transform: translateY(1px); }
.exm-more { flex: 0 0 auto; }
.exm-more[open] { flex-basis: 100%; }
/**/
.exm-whole { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 0; }
.exm-whole-l { margin-right: 4px; font: 700 .88rem var(--ui), sans-serif; color: var(--ink); }
.exm-chip--x { min-height: 40px; padding: 0 12px; font-size: .8rem; font-variant-numeric: tabular-nums; }
/**/
@media (max-width: 640px) {
  .exm-whole { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding: 2px 16px 6px; scrollbar-width: none; }
  .exm-whole::-webkit-scrollbar { display: none; }
  .exm-whole .exm-chip { flex: 0 0 auto; white-space: nowrap; }
}
.exm-more > summary { width: fit-content; }
.exm-more > summary::-webkit-details-marker { display: none; }
.exm-more > summary::after {
  content: ''; width: 14px; height: 14px; background-color: var(--muted);
  -webkit-mask: var(--exm-chev) center / contain no-repeat; mask: var(--exm-chev) center / contain no-repeat;
  transition: transform var(--mo-base) var(--ease-out);
}
.exm-more[open] > summary::after { transform: rotate(180deg); }
.exm-n { font-variant-numeric: tabular-nums; color: var(--muted); }
.exm-jump-r { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/**/
.exm-fold { border-bottom: 1px solid var(--glass-edge); scroll-margin-top: 84px; }
.exm-fold > summary {
  display: flex; align-items: center; gap: 12px; min-height: 56px; cursor: pointer; list-style: none;
  font-family: var(--disp), sans-serif; font-weight: 600; font-size: 1.0625rem; letter-spacing: -.01em; color: var(--ink);
}
.exm-fold > summary::-webkit-details-marker { display: none; }
.exm-fold > summary:focus-visible { border-radius: 8px; }
.exm-sub { margin-left: auto; white-space: nowrap; font: 600 .84rem var(--ui), sans-serif; color: var(--muted); font-variant-numeric: tabular-nums; }
.exm-fold > summary::after {
  content: ''; flex: 0 0 18px; height: 18px; background-color: var(--muted);
  -webkit-mask: var(--exm-chev) center / contain no-repeat; mask: var(--exm-chev) center / contain no-repeat;
  transition: transform var(--mo-base) var(--ease-out);
}
.exm-fold[open] > summary::after { transform: rotate(180deg); background-color: var(--violet-ink); }
.exm-h3 { margin: 14px 0 0; font: 700 .98rem var(--disp), sans-serif; letter-spacing: -.01em; color: var(--ink); scroll-margin-top: 84px; }
.exm-years { list-style: none; margin: 0 0 14px; padding: 0; }
/**/
.exm-lib {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; width: fit-content; max-width: 100%; margin: 0 0 8px; padding: 4px 16px;
  border-radius: var(--radius-lg); border: 1px solid var(--violet-tint); background-color: var(--glass-bg-2);
  background-image: linear-gradient(var(--violet-tint), var(--violet-tint)); box-shadow: var(--glass-sm);
  font: 600 .86rem/1.35 var(--ui), sans-serif; color: var(--ink);
}
.exm-lib a { display: inline-flex; align-items: center; min-height: 36px; font-family: var(--disp), sans-serif; font-weight: 600; color: var(--violet-ink); text-decoration: none; }
.exm-lib a::after { content: '\00a0→'; }
.exm-lib a:hover { text-decoration: underline; text-underline-offset: 3px; }
.exm-y { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 0; border-top: 1px solid var(--glass-edge); }
.exm-y:first-child { border-top: 0; }
.exm-yn { font-family: var(--disp), sans-serif; font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; color: var(--ink); }
.exm-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 10px; align-items: start; }
.exm-c { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.exm-cl { font: 700 .78rem var(--ui), sans-serif; color: var(--muted); }

/**/
.exm-mod {
  padding: 18px; border-radius: var(--radius-xl); border: 1px solid var(--violet-tint);
  background-color: var(--glass-bg); background-image: linear-gradient(var(--violet-tint), var(--violet-tint)); box-shadow: var(--glass-up);
}
.exm-mod h2 { margin: 0 0 4px; font-family: var(--disp), sans-serif; font-weight: 700; font-size: 1.2rem; letter-spacing: -.02em; color: var(--ink); }
.exm-mod p { margin: 0 0 12px; max-width: 70ch; font-size: .92rem; line-height: 1.55; color: var(--ink); }
.exm-mod-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.exm-mod-g .exm-l { min-height: 52px; background-color: var(--card); }

/**/
.exm-web { list-style: none; margin: 0; padding: 0; }
.exm-web li { border-top: 1px solid var(--glass-edge); }
.exm-web li:first-child { border-top: 0; }
.exm-web a { display: grid; grid-template-columns: minmax(0, 1fr) 18px; align-items: center; gap: 2px 12px; min-height: 56px; padding: 10px 2px; color: var(--ink); }
.exm-web a::after {
  content: ''; grid-row: 1 / span 2; grid-column: 2; width: 18px; height: 18px; background-color: var(--violet-ink);
  -webkit-mask: var(--exm-out) center / contain no-repeat; mask: var(--exm-out) center / contain no-repeat;
}
.exm-web b { font: 600 .98rem var(--disp), sans-serif; letter-spacing: -.01em; line-height: 1.25; }
.exm-web small { grid-column: 1; font-size: .84rem; line-height: 1.45; color: var(--muted); }
.exm-web a:hover b { text-decoration: underline; text-decoration-color: var(--violet-tint); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/**/
.exm-attrib {
  margin: 28px 0 0; padding: 14px 16px; border-radius: var(--radius-lg); background-color: var(--soft); box-shadow: var(--glass-in);
  color: var(--ink); font-size: .88rem; line-height: 1.6;
}
.exm-attrib b { font-family: var(--ui), sans-serif; font-weight: 800; }

/**/
.exm-cta {
  position: relative; overflow: hidden; margin: 36px 0 56px; padding: 30px 22px; border-radius: var(--radius-2xl); text-align: center;
  background: var(--grad-cta); box-shadow: var(--glass-cta);
}
.exm-cta::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 80% 60% at 20% 50%, rgba(255,255,255,.16), transparent 55%); }
.exm-cta h2 { position: relative; margin: 0 0 16px; color: #fff; font-family: var(--disp), sans-serif; font-weight: 700; font-size: 1.35rem; line-height: 1.2; letter-spacing: -.02em; text-wrap: balance; }
.exm-cta .btn { position: relative; }
.exm-cta-2 {
  position: relative; display: flex; align-items: center; justify-content: center; margin: 12px auto 0; width: fit-content; min-height: 44px;
  color: #fff; font: 700 .92rem var(--ui), sans-serif; text-decoration: underline !important; text-underline-offset: 3px;
}
.exm-faq { margin-bottom: 80px; }
.exm-faq > h2 { text-align: left; }
.tools-page .exm-faq { max-width: none; }

/**/
.exm-search { position: relative; }
.exm-search::before {
  content: ''; position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; margin-top: -10px; background-color: var(--muted); pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.exm-in {
  width: 100%; min-height: 52px; padding: 0 16px 0 46px; border: 0; border-radius: 16px; background-color: var(--soft); box-shadow: var(--glass-in);
  font: 600 1rem var(--ui), sans-serif; color: var(--ink);
}
.exm-in::placeholder { color: var(--muted); }
.exm-ix { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.exm-ix-c {
  display: grid; grid-template-columns: minmax(0, 1fr) 18px; align-items: center; gap: 2px 12px; min-height: 64px; padding: 10px 14px 10px 18px;
  border-radius: var(--radius-xl); border: 1px solid var(--glass-border); background-color: var(--glass-bg-2); box-shadow: var(--glass-sm); color: var(--ink);
  transition: border-color var(--mo-base) var(--ease-out), transform .12s var(--spring);
}
.exm-ix-c:hover { border-color: var(--violet-tint); }
.exm-ix-c:active { transform: translateY(1px); }
.exm-ix-c::after {
  content: ''; grid-row: 1 / span 3; grid-column: 2; width: 18px; height: 18px; background-color: var(--muted);
  -webkit-mask: var(--exm-go) center / contain no-repeat; mask: var(--exm-go) center / contain no-repeat;
}
.exm-ix-c b { font: 600 1.05rem var(--disp), sans-serif; letter-spacing: -.01em; line-height: 1.2; }
.exm-ix-c small { grid-column: 1; font-size: .82rem; line-height: 1.4; color: var(--muted); }
.exm-st {
  grid-column: 1; display: inline-flex; align-items: center; gap: 6px; margin-top: 3px; width: fit-content; padding: 2px 9px; border-radius: var(--radius-full);
  font: 700 .72rem var(--ui), sans-serif; background-color: var(--glass-bg-2); background-image: linear-gradient(var(--green-tint), var(--green-tint)); color: var(--ink);
}
.exm-st::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.exm-st--web { background-image: linear-gradient(var(--gold-tint), var(--gold-tint)); }
.exm-st--web::before { background: var(--gold); }
.exm-st--solved { background-image: linear-gradient(var(--violet-tint), var(--violet-tint)); }
.exm-st--solved::before { background: var(--violet); }
.exm-st--soon { background-image: none; }
.exm-st--soon::before { background: var(--faint); }
.exm-none { margin: 16px 0; font-size: .95rem; color: var(--muted); }
.exm-ixcalc {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-top: 28px; padding: 18px 20px;
  border-radius: var(--radius-xl); border: 1px solid var(--glass-border); background: var(--glass-bg); box-shadow: var(--glass-up);
}
.exm-ixcalc p { margin: 0; max-width: 50ch; font-size: .96rem; line-height: 1.5; color: var(--ink); }
.exm-page .exm-ixcalc + .tool-sec { margin-top: 48px; }

@media (min-width: 720px) {
  .exm-y { grid-template-columns: 84px minmax(0, 1fr); align-items: start; gap: 14px; }
  .exm-yn { padding-top: 12px; }
  .exm-mod { padding: 22px 26px; }
  .exm-mod-g { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .exm-ix { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .exm-ix-c { min-height: 108px; align-content: start; }
  .exm-cta { padding: 40px; }
  .exm-cta h2 { font-size: 1.8rem; }
}
@media (max-width: 900px) { .exm-main { padding: 96px 24px 0; } }
@media (max-width: 768px) { .exm-main { padding: 84px 16px 0; } .exm-sec { margin-top: 32px; } }
@media (prefers-reduced-motion: reduce) {
  .exm-l, .exm-chip, .exm-more > summary, .exm-ix-c, .exm-fold > summary::after, .exm-more > summary::after { transition: none; }
}
