:root { color-scheme:dark; font-family:Inter,ui-sans-serif,system-ui,sans-serif; background:#10151d; color:#e7edf5; }
* { box-sizing:border-box; } body { margin:0; } .shell { max-width:1160px; margin:auto; padding:42px 22px 56px; }
.hero { display:flex; align-items:flex-start; justify-content:space-between; gap:28px; margin-bottom:20px; } h1 { margin:0; font-size:2.25rem; letter-spacing:-.04em; } h1 span { font-size:.8rem; color:#8fa4bd; font-weight:600; letter-spacing:0; } .lead { font-size:1.23rem; color:#f0f5fa; margin:14px 0 6px; } .hero p:not(.lead) { max-width:670px; margin:0; color:#aebdcd; line-height:1.55; }
nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:14px; padding-top:8px; font-size:.9rem; } a { color:#91b8ff; text-decoration:underline; text-underline-offset:3px; } a:hover { color:#c3d8ff; } a:focus-visible, button:focus-visible, textarea:focus-visible { outline:3px solid #90b8ff; outline-offset:3px; }
.privacy { border:1px solid #2e725e; background:#112d27; color:#c5f4e1; border-radius:9px; padding:13px 15px; margin:0 0 25px; } .privacy strong { color:#e2fff2; }
.tool { border:1px solid #334558; border-radius:12px; padding:22px; background:#121a23; box-shadow:0 16px 40px #05080d33; } .inputs,.details,.info-grid { display:grid; gap:18px; } .inputs { grid-template-columns:2fr 1fr; } label { display:grid; gap:8px; color:#d4e0ec; font-size:.94rem; font-weight:650; } label small { color:#9eafc1; font-weight:400; line-height:1.45; } textarea,pre { width:100%; border:1px solid #3b5065; border-radius:8px; background:#171f29; color:#eaf2fb; font:.88rem/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; padding:13px; } textarea { min-height:270px; resize:vertical; } .inputs label:nth-child(2) textarea { min-height:142px; }
.actions { display:flex; flex-wrap:wrap; gap:10px; margin:18px 0; } button { cursor:pointer; border:1px solid transparent; border-radius:7px; background:#4d8dff; color:white; font-weight:700; padding:10px 15px; } button:hover { background:#6a9fff; } button.secondary { background:#28394a; color:#deebf8; border-color:#3c5064; } button.secondary:hover { background:#354b60; }
h2 { font-size:1rem; margin:0 0 10px; color:#eff5fb; } .output { margin-top:14px; } pre { min-height:180px; margin:0; white-space:pre-wrap; overflow-wrap:anywhere; } .details { grid-template-columns:1fr 1fr; margin-top:20px; } .details > div { border-top:1px solid #334558; padding-top:16px; } ul,ol { padding-left:20px; margin:0; color:#bdcad8; font:.84rem/1.55 ui-monospace,monospace; } .warning { color:#ffca78; }
.info-grid { grid-template-columns:1fr 1fr; margin:36px 0 18px; } .info-grid article,.note,footer,.pro-offer { border:1px solid #2e4052; border-radius:10px; background:#141d27; padding:20px; } .info-grid p,.note,footer p,.pro-copy p { color:#b6c4d2; line-height:1.55; font-size:.93rem; } .info-grid p:last-child,footer p,.pro-copy p:last-of-type { margin-bottom:0; } .info-grid ol { font-family:inherit; font-size:.94rem; margin-bottom:14px; } .note { color:#b6c4d2; } .note strong,footer strong { color:#eaf2fb; } .pro-offer { margin-top:18px; display:grid; grid-template-columns:1.05fr 1fr; gap:24px; } .pro-copy p { margin:5px 0 0; } .pro-cta { display:inline-block; margin-top:18px; border-radius:7px; background:#4d8dff; color:#fff; font-weight:700; padding:10px 15px; text-decoration:none; } .pro-cta:hover { background:#6a9fff; color:#fff; } .comparison { display:grid; grid-template-columns:1fr 1fr; gap:18px; } .comparison > div { border-left:1px solid #334558; padding-left:18px; } .comparison h3 { margin:0 0 8px; font-size:.92rem; color:#eff5fb; } .comparison ul { font-family:inherit; font-size:.86rem; }
footer { margin-top:18px; display:flex; justify-content:flex-end; align-items:center; gap:20px; } footer p { margin:5px 0 0; } footer a { max-width:310px; }
@media (max-width:760px) { .shell { padding:28px 15px 44px; } .hero,footer { display:block; } nav { justify-content:flex-start; padding-top:18px; } .inputs,.details,.info-grid,.pro-offer { grid-template-columns:1fr; } textarea { min-height:225px; } .tool { padding:16px; } .comparison { gap:12px; } .comparison > div { border-left:0; border-top:1px solid #334558; padding:14px 0 0; } footer a { display:inline-block; margin-top:18px; } }