:root { --ink:#0f172a; --muted:#526079; --surface:#fff; --canvas:#f7f8fc; --line:#e3e8f0; --accent:#dc2626; --accent-dark:#b91c1c; --radius:14px; }
* { box-sizing:border-box; }
body { margin:0; background:var(--canvas); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.6; }
a { color:inherit; text-decoration:none; } a:hover { color:var(--accent-dark); }
.site-shell { width:min(1120px,calc(100% - 2rem)); margin:0 auto; }
.site-header { background:rgba(255,255,255,.94); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10; backdrop-filter:blur(10px); }
.nav-wrap { display:flex; min-height:66px; align-items:center; gap:2rem; }.brand { display:inline-flex; align-items:center; flex-shrink:0; }.brand img { display:block; height:auto; }.primary-nav { display:flex; gap:1.4rem; font-size:.9rem; font-weight:650; }.primary-nav a { color:#334155; }.language-link { margin-left:auto; color:#334155; font-size:.85rem; font-weight:700; border:1px solid var(--line); padding:.35rem .6rem; border-radius:7px; }
.hero { padding:5.75rem 0 3.5rem; text-align:center; background:linear-gradient(180deg,#fff 0%,var(--canvas) 100%); }.eyebrow { display:inline-flex; align-items:center; gap:.45rem; color:#991b1b; background:#fef2f2; padding:.35rem .65rem; border-radius:999px; font-size:.78rem; font-weight:750; letter-spacing:.03em; text-transform:uppercase; }.hero h1 { max-width:780px; margin:1.05rem auto .85rem; font-size:clamp(2.25rem,6vw,4.25rem); line-height:1.05; letter-spacing:-.045em; font-weight:800; }.hero p { max-width:680px; margin:0 auto; color:var(--muted); font-size:1.12rem; }.tool-search { position:relative; max-width:680px; margin:2.1rem auto 0; }.tool-search input { width:100%; border:1px solid #cbd5e1; border-radius:12px; font:inherit; font-size:1rem; padding:1rem 1rem 1rem 3rem; box-shadow:0 10px 24px rgba(15,23,42,.08); outline:none; }.tool-search input:focus { border-color:var(--accent); box-shadow:0 0 0 4px #fee2e2; }.tool-search svg { position:absolute; left:1rem; top:1.15rem; color:#64748b; }
.section { padding:3.5rem 0; }.section-heading { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:1.25rem; }.section-heading h2,.content-section h2 { font-size:1.45rem; letter-spacing:-.025em; margin:0; }.section-heading p { margin:0; color:var(--muted); }.tool-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }.tool-card { min-height:176px; display:flex; flex-direction:column; padding:1.35rem; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:0 1px 2px rgba(15,23,42,.03); transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease; }.tool-card:hover { color:var(--ink); transform:translateY(-3px); border-color:#fecaca; box-shadow:0 12px 25px rgba(15,23,42,.08); }.tool-icon { color:var(--accent); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-weight:800; }.tool-card h3 { font-size:1.05rem; margin:.65rem 0 .35rem; }.tool-card p { color:var(--muted); font-size:.9rem; margin:0; }.tool-card span:last-child { margin-top:auto; padding-top:1rem; color:#b91c1c; font-size:.88rem; font-weight:700; }.tool-card[hidden],.tool-category[hidden] { display:none; }
.page { width:min(920px,calc(100% - 2rem)); margin:0 auto; padding:1.6rem 0 4.5rem; }.breadcrumbs { display:flex; flex-wrap:wrap; gap:.5rem; color:#64748b; font-size:.85rem; margin:0 0 1.25rem; }.breadcrumbs a { color:#64748b; }.page-intro h1 { font-size:clamp(2rem,5vw,3rem); line-height:1.12; letter-spacing:-.04em; margin:0 0 .75rem; }.page-intro > p { color:var(--muted); font-size:1.06rem; max-width:720px; }.privacy-note { display:inline-flex; gap:.45rem; align-items:center; color:#166534; background:#f0fdf4; border:1px solid #bbf7d0; padding:.42rem .7rem; border-radius:8px; font-size:.85rem; font-weight:600; }.tool-panel { margin:1.65rem 0 2.75rem; padding:1.25rem; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 8px 22px rgba(15,23,42,.04); }.tool-panel h2 { margin:0 0 1rem; font-size:1rem; }.tool-fields { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }.field-label { display:block; font-size:.86rem; font-weight:700; margin-bottom:.45rem; }.tool-panel textarea,.tool-panel input,.tool-panel select { width:100%; min-height:46px; border:1px solid #cbd5e1; border-radius:8px; padding:.72rem; font:inherit; color:var(--ink); background:#fff; outline:none; }.tool-panel textarea { min-height:180px; resize:vertical; }.tool-panel textarea:focus,.tool-panel input:focus,.tool-panel select:focus { border-color:var(--accent); box-shadow:0 0 0 3px #fee2e2; }.tool-actions { display:flex; flex-wrap:wrap; gap:.65rem; margin-top:1rem; }.button { display:inline-flex; justify-content:center; align-items:center; min-height:42px; border:0; border-radius:8px; padding:.65rem .9rem; background:var(--accent); color:#fff; font:inherit; font-size:.9rem; font-weight:700; cursor:pointer; }.button:hover { color:#fff; background:var(--accent-dark); }.button-secondary { background:#fff; border:1px solid #cbd5e1; color:#334155; }.button-secondary:hover { color:#0f172a; background:#f8fafc; }.result-code { display:block; overflow:auto; overflow-wrap:anywhere; min-height:50px; margin:0; padding:.8rem; border-radius:8px; background:#f8fafc; border:1px solid var(--line); font: .88rem/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; }.metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; margin-top:1rem; }.metric { padding:.8rem; background:#f8fafc; border:1px solid var(--line); border-radius:8px; }.metric strong { display:block; font-size:1.35rem; }.metric span { color:var(--muted); font-size:.8rem; }.content-section { margin-top:2.5rem; }.content-section h2 { margin-bottom:.7rem; }.content-section h3 { margin:1.4rem 0 .3rem; font-size:1rem; }.content-section p,.content-section li { color:#3d4b63; }.content-section code { padding:.12rem .3rem; background:#eef2f7; border-radius:4px; color:#9f1239; }.content-section pre { overflow:auto; padding:1rem; border-radius:8px; background:#0f172a; color:#e2e8f0; font-size:.86rem; }.related-tools { display:flex; flex-wrap:wrap; gap:.65rem; }.related-tools a { border:1px solid var(--line); border-radius:999px; padding:.45rem .7rem; color:#334155; font-size:.86rem; background:#fff; }.site-footer { border-top:1px solid var(--line); background:#fff; padding:2.5rem 0; }.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:2rem; }.site-footer p,.site-footer a { color:var(--muted); font-size:.87rem; }.site-footer nav { display:flex; flex-direction:column; gap:.4rem; }.site-footer h2 { margin:0 0 .3rem; font-size:.9rem; }
@media (max-width:720px) { .primary-nav { display:none; }.tool-grid { grid-template-columns:1fr; }.tool-fields { grid-template-columns:1fr; }.metrics { grid-template-columns:repeat(2,1fr); }.footer-grid { grid-template-columns:1fr; }.hero { padding-top:4rem; }.page { padding-top:1.25rem; } }
@media (prefers-color-scheme:dark) { body { background:#0b1120; color:#e5e7eb; }.site-header,.site-footer,.tool-card,.tool-panel,.tool-panel textarea,.tool-panel input,.tool-panel select,.button-secondary,.related-tools a { background:#111827; color:#e5e7eb; border-color:#263246; }.hero { background:linear-gradient(180deg,#111827 0%,#0b1120 100%); }.primary-nav a,.language-link,.tool-card p,.section-heading p,.page-intro > p,.content-section p,.content-section li,.site-footer p,.site-footer a { color:#aeb9ca; }.tool-search input { background:#111827; color:#e5e7eb; border-color:#334155; }.result-code,.metric { background:#0b1120; border-color:#263246; }.button-secondary { color:#e5e7eb; }.breadcrumbs,.breadcrumbs a { color:#94a3b8; } }
.tool-message { min-height:1.3rem; margin:.75rem 0 0; color:#166534; font-size:.86rem; font-weight:650; }.tool-message.tool-error { color:#b91c1c; }.tool-panel textarea[readonly] { background:#f8fafc; }.tool-panel .inline-select { width:auto; min-width:130px; }
@media (prefers-color-scheme:dark) { .tool-panel textarea[readonly] { background:#0b1120; } }