:root { color-scheme: light; font-family: Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; color:#171926; background:#fbfaf7; }
* { box-sizing:border-box; }
html,body { width:100%; max-width:100%; }
body { margin:0; overflow-x:clip; background:#fbfaf7; }
button,input { font:inherit; }
[hidden] { display:none!important; }
.tool { width:min(100%,1040px); margin:auto; padding:clamp(20px,4vw,40px); }
.tool__header,.section-heading,.result-heading,.result-heading>div,.section-heading>div,.code-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.tool__header { margin-bottom:24px; }
.eyebrow,.result-kicker { margin:0 0 8px; color:#4b47a8; font-size:.76rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
h2,h3,h4,p { margin-top:0; }
h2 { margin-bottom:10px; font-size:clamp(1.65rem,4vw,2.35rem); line-height:1.08; letter-spacing:-.035em; }
.lead,.section-heading p,.boundary { color:#626578; line-height:1.58; }
.privacy { flex:none; padding:7px 10px; border-radius:999px; color:#175d72; background:#e6f7fb; font-size:.78rem; font-weight:750; }
form { display:grid; gap:18px; }
.surface { padding:clamp(18px,3vw,28px); border:1px solid #dddde5; border-radius:18px; background:#fff; }
.section-heading { margin-bottom:20px; }
.section-heading>div,.result-heading>div { align-items:center; justify-content:flex-start; }
.section-heading h3,.result-heading h3 { margin:0; font-size:1.22rem; }
.section-heading p { max-width:480px; margin:0; }
.step { display:grid; place-items:center; flex:none; width:30px; height:30px; border-radius:50%; color:#fff; background:#403aa1; font-weight:850; }
label>span,legend { display:block; margin-bottom:7px; font-weight:750; }
.file-picker { display:block; min-width:0; padding:18px; overflow:hidden; border:1px dashed #9c99c9; border-radius:14px; background:#f8f7ff; }
input[type="file"],input:not([type="radio"]):not([type="color"]) { width:100%; min-width:0; max-width:100%; min-height:44px; padding:9px 12px; border:1px solid #babdca; border-radius:10px; color:inherit; background:#fff; }
.file-picker input { padding:8px; }
.facts,.evidence { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:16px 0 0; }
.facts>div,.evidence>div { min-width:0; padding:13px; border:1px solid #e5e5eb; border-radius:12px; background:#fafafd; }
dt,.evidence span { color:#686b7b; font-size:.78rem; }
dd,.evidence strong { display:block; margin:5px 0 0; overflow-wrap:anywhere; font-weight:800; }
.fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-bottom:18px; }
input[type="color"] { width:100%; min-height:44px; padding:4px; border:1px solid #babdca; border-radius:10px; background:#fff; }
fieldset { margin:0 0 18px; padding:0; border:0; }
.segmented { display:flex; flex-wrap:wrap; gap:8px; }
.segmented legend { width:100%; }
.segmented label { position:relative; }
.segmented input { position:absolute; opacity:0; }
.segmented span { margin:0; padding:9px 14px; border:1px solid #c8c7d2; border-radius:999px; cursor:pointer; }
.segmented input:checked+span { border-color:#403aa1; color:#302b80; background:#efeffb; }
button,.button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 20px; border:0; border-radius:10px; color:#fff; background:#403aa1; cursor:pointer; font-weight:800; text-decoration:none; }
button:hover,.button:hover { background:#302b80; }
.secondary { min-height:36px; padding:7px 12px; color:#302b80; background:#efeffb; }
button:focus-visible,.button:focus-visible,input:focus-visible { outline:3px solid rgb(77 70 180 / 28%); outline-offset:2px; }
.error { margin:16px 0 0; padding:12px 14px; border-left:3px solid #b42318; color:#7a271a; background:#fff3f2; }
.result { margin-top:18px; }
.result-heading { align-items:center; margin-bottom:20px; }
.result-kicker { margin-bottom:3px; }
.preview-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; }
.preview-card { display:grid; place-items:center; min-width:0; padding:12px 6px; border:1px solid #e1e1e8; border-radius:12px; background:#f6f6f8; }
.preview-card img { display:block; max-width:72px; max-height:72px; width:auto; height:auto; image-rendering:auto; box-shadow:0 4px 14px rgb(20 22 40 / 14%); }
.preview-card span { margin-top:8px; color:#686b7b; font-size:.75rem; font-weight:750; }
.file-list { display:grid; gap:8px; padding:0; list-style:none; }
.file-list li { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border:1px solid #e5e5eb; border-radius:10px; }
.file-list li>span { min-width:0; overflow-wrap:anywhere; }
.file-list a { color:#403aa1; font-weight:800; }
.code-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:20px; }
.code-grid section { min-width:0; padding:14px; border:1px solid #e5e5eb; border-radius:12px; }
.code-heading { align-items:center; }
.code-heading h4 { margin-bottom:10px; }
pre { max-height:320px; margin:0; padding:12px; overflow:auto; border-radius:9px; color:#e8e9f4; background:#171926; font:500 .78rem/1.55 ui-monospace,SFMono-Regular,Consolas,monospace; white-space:pre-wrap; overflow-wrap:anywhere; }
@media (max-width:760px) { .tool__header,.section-heading,.result-heading { display:grid; } .privacy { justify-self:start; } .fields,.facts,.evidence,.code-grid { grid-template-columns:1fr; } .preview-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .result-heading .button { width:100%; } .file-list li { align-items:flex-start; flex-direction:column; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; } }