body{margin:0;background:#f6f7fb;color:#111827;font-family:Inter,system-ui,Arial}.wrap{max-width:850px;margin:auto;padding:50px 20px}.tool{background:#fff;border:1px solid #e4e6ed;border-radius:20px;padding:35px;margin-top:20px}.back{font-weight:900;text-decoration:none;color:#111827}.eyebrow{font-size:11px;letter-spacing:2px;color:#6d5dfc;font-weight:900}h1{font-size:42px;letter-spacing:-2px}label{display:block;font-weight:800;margin:17px 0}input,textarea,select{width:100%;padding:13px;margin-top:7px;border:1px solid #dfe2e9;border-radius:10px;font:inherit;box-sizing:border-box}button{padding:12px 18px;background:#111827;color:#fff;border:0;border-radius:10px;font-weight:800;cursor:pointer}.result{margin-top:18px;padding:18px;border-radius:12px;background:#efedff;font-weight:800}.hint{color:#667085}
.back{display:inline-flex;align-items:center;gap:8px;font-weight:900;text-decoration:none;color:#fff;background:#0c1730;border:1px solid #28436c;border-radius:10px;padding:10px 14px;margin-bottom:8px}.back:hover{border-color:#19e6ff}

/* Marvion accessibility: readable content on dark interactive surfaces */
:where(.tab,.card,.box,.notice,.summary,.empty)[style*="background:#09"],
:where(.tab,.card,.box,.notice,.summary,.empty){--dark-surface-text:#f8fafc;}
.tab,.card,.box,.notice,.summary,.empty{color:#f8fafc;}
.tab h1,.tab h2,.tab h3,.tab strong,.tab span,.card h1,.card h2,.card h3,.card p,.box h1,.box h2,.box h3,.box p,.box label,.box small,.notice,.notice b,.notice strong,.summary,.empty h1,.empty h2,.empty h3,.empty p{color:inherit;}
.tab .muted,.card .muted,.box .muted,.empty .muted{color:#cbd5e1;opacity:1;}
.box input,.box textarea,.box select,.toolbar input,.toolbar select,.field input,.field textarea,.field select{color:#f8fafc;}
.box input::placeholder,.box textarea::placeholder,.toolbar input::placeholder,.field input::placeholder,.field textarea::placeholder{color:#94a3b8;opacity:1;}
.box select option,.toolbar select option,.field select option{background:#071126;color:#f8fafc;}
/* Hide optional hosting preview/branding overlays when injected into page markup. */
[data-netlify-badge], .netlify-badge, #netlify-badge, a[aria-label*="Netlify" i][style*="fixed"]{display:none!important}

/* Production contrast fix: dark cards/panels must never inherit the light-page text color. */
.tab,.card,.box,.notice,.summary,.empty{
  color:#f8fafc !important;
}
.tab *, .card *, .box *, .notice *, .summary *, .empty *{
  color:inherit;
}
.tab strong,.tab span,.card h1,.card h2,.card h3,.card p,.card b,.card strong,
.box h1,.box h2,.box h3,.box p,.box label,.box small,.box b,.box strong,
.notice,.notice b,.notice strong,.summary,.empty h1,.empty h2,.empty h3,.empty p{
  color:#f8fafc !important;
}
.tab span,.card .muted,.box .muted,.box small,.empty .muted{
  color:#cbd5e1 !important;
  opacity:1 !important;
}
.tab.active{color:#fff !important;}
.badge{color:#e2e8f0 !important;}
.box input,.box textarea,.box select,.toolbar input,.toolbar select,.field input,.field textarea,.field select{
  color:#f8fafc !important;
  background:#071126 !important;
}
.box input::placeholder,.box textarea::placeholder,.toolbar input::placeholder,.field input::placeholder,.field textarea::placeholder{
  color:#94a3b8 !important;
  opacity:1 !important;
}
.box select option,.toolbar select option,.field select option{background:#071126 !important;color:#f8fafc !important;}