.tool-hero{background:var(--grad-hero);border-bottom:1px solid var(--border);padding-block:var(--s-8) var(--s-10)}.tool-hero .head{display:flex;gap:var(--s-5);align-items:flex-start}.tool-hero .tool-ico{width:64px;height:64px;border-radius:18px}.tool-hero .tool-ico svg{width:32px;height:32px}.tool-hero h1{font-size:var(--fs-800);margin:.1em 0 .3em}.tool-hero .lead{max-width:62ch}.tool-meta{display:flex;gap:.5em;flex-wrap:wrap;margin-top:var(--s-4)}.tool-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--s-10);align-items:start}.tool-main{min-width:0}.tool-side{position:sticky;top:calc(var(--header-h) + 16px);display:grid;gap:var(--s-6)}.side-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s-5);box-shadow:var(--sh-xs)}.side-card h4{font-size:var(--fs-300);text-transform:uppercase;letter-spacing:.06em;color:var(--text-mute);margin-bottom:var(--s-3)}.tool-app{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--sh-md);padding:var(--s-6);margin-bottom:var(--s-4)}.dropzone{border:2px dashed var(--border-strong);border-radius:var(--r-lg);padding:var(--s-12) var(--s-6);text-align:center;background:var(--surface-2);transition:all var(--t);cursor:pointer}.dropzone:hover,.dropzone.drag{border-color:var(--brand-500);background:rgba(37,99,235,.05)}.dropzone .dz-ico{width:64px;height:64px;margin:0 auto var(--s-4);border-radius:50%;display:grid;place-items:center;background:rgba(37,99,235,.1);color:var(--brand-600)}.dropzone .dz-ico svg{width:30px;height:30px}.dropzone h3{margin:0 0 .3em}.dropzone p{color:var(--text-mute);margin:0}.dropzone input[type=file]{display:none}.field{display:grid;gap:.4em;margin-bottom:var(--s-4)}.field label{font-weight:650;font-size:var(--fs-300);color:var(--text-soft)}.field input[type=text],.field input[type=number],.field input[type=password],.field select,.field textarea,.input,textarea.input,select.input{width:100%;padding:.7em .9em;border:1px solid var(--border-strong);border-radius:var(--r-md);background:var(--surface);color:var(--text);transition:border var(--t-fast),box-shadow var(--t-fast)}.field input:focus,.field select:focus,.field textarea:focus,.input:focus{border-color:var(--brand-500);box-shadow:var(--ring)}textarea.input{min-height:160px;font-family:var(--font-mono);font-size:var(--fs-300);resize:vertical;line-height:1.6}.row{display:flex;gap:var(--s-3);flex-wrap:wrap}.row .field{flex:1;min-width:140px}.controls{display:flex;gap:var(--s-3);flex-wrap:wrap;align-items:center;margin-top:var(--s-2)}.range{width:100%}.toolbar{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-bottom:var(--s-3)}.result{margin-top:var(--s-5)}.result-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--s-3);margin-top:var(--s-4)}.stat-box{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s-4);text-align:center}.stat-box b{display:block;font-size:var(--fs-600);color:var(--brand-600);line-height:1.1}.stat-box span{font-size:var(--fs-300);color:var(--text-mute)}.preview-img{max-height:420px;margin-inline:auto;border-radius:var(--r-md);box-shadow:var(--sh-sm);background:conic-gradient(var(--surface-2) 25%,transparent 0 50%,var(--surface-2) 0 75%,transparent 0) 0 0/20px 20px}.swatch{width:100%;height:90px;border-radius:var(--r-md);border:1px solid var(--border)}.chip-out{font-family:var(--font-mono);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);padding:.5em .7em;display:inline-flex;align-items:center;gap:.5em}.notice{padding:.8em 1em;border-radius:var(--r-md);font-size:var(--fs-300);margin-top:var(--s-3)}.notice.err{background:rgba(239,68,68,.1);color:#B91C1C;border:1px solid rgba(239,68,68,.25)}.notice.ok{background:rgba(16,185,129,.1);color:#047857;border:1px solid rgba(16,185,129,.25)}.coming-soon{text-align:center;padding:var(--s-10) var(--s-4)}.coming-soon .dz-ico{margin-inline:auto}.toc{display:grid;gap:.3em}.toc a{font-size:var(--fs-300);color:var(--text-mute);padding:.3em 0;display:block;border-left:2px solid transparent;padding-left:.7em}.toc a:hover,.toc a.active{color:var(--brand-600);border-color:var(--brand-500)}.keytakeaways{list-style:none;padding:0;display:grid;gap:.55em}.keytakeaways li{display:flex;gap:.55em;align-items:flex-start;color:var(--text-soft)}.keytakeaways li::before{content:"▸";color:var(--brand-600);font-weight:800;flex-shrink:0}.qa-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}.qa-grid .qa h4{margin-bottom:.3em;color:var(--brand-600);font-size:var(--fs-400)}.qa-grid .qa p{color:var(--text-soft);margin:0}@media (max-width:1024px){.tool-layout{grid-template-columns:1fr}.tool-side{position:static;grid-template-columns:1fr 1fr;display:grid}.tool-side .side-card.full{grid-column:1/-1}}@media (max-width:560px){.tool-side{grid-template-columns:1fr}.qa-grid{grid-template-columns:1fr}.tool-hero .head{flex-direction:column;gap:var(--s-3)}}.coming-soon .cs-icon{width:72px;height:72px;border-radius:20px;display:grid;place-items:center;color:#fff;margin:0 auto;box-shadow:var(--sh-sm)}.coming-soon .cs-icon svg{width:34px;height:34px}.coming-soon .dz-ico svg{width:30px;height:30px}.coming-soon h3{margin:.7em 0 .3em;font-size:var(--fs-600)}.coming-soon p{color:var(--text-mute);max-width:48ch;margin:0 auto var(--s-4)}