:root{--bg:#f4f8fb;--surface:#fff;--surface-2:#edf5f7;--text:#14222b;--muted:#5d6d75;--line:#d8e4e8;--brand:#006f7b;--brand-2:#00a6a6;--accent:#a6db3f;--success:#18794e;--warning:#b46300;--danger:#bf2f2f;--shadow:0 18px 55px rgba(18,53,61,.11);--radius:20px;--max:1180px}html[data-theme=dark]{--bg:#0e171b;--surface:#152126;--surface-2:#1c2c32;--text:#eef7f7;--muted:#a8b9be;--line:#31444a;--brand:#43c4c8;--brand-2:#6fe0de;--accent:#b7e95d;--success:#5bd69b;--warning:#ffbd68;--danger:#ff8585;--shadow:0 18px 55px rgba(0,0,0,.25)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.58}a{color:var(--brand);text-decoration:none}a:hover{text-decoration:underline}img,svg,canvas{max-width:100%}button,input,select,textarea{font:inherit}button{cursor:pointer}.container{width:min(var(--max),calc(100% - 32px));margin-inline:auto}.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.header-inner{min-height:72px;display:flex;align-items:center;gap:22px}.brand{display:flex;align-items:center;gap:10px;color:var(--text);font-weight:900;font-size:1.23rem;white-space:nowrap}.brand:hover{text-decoration:none}.brand-mark{width:42px;height:42px;border-radius:13px;background:linear-gradient(145deg,var(--brand),var(--brand-2));display:grid;grid-template-columns:repeat(3,7px);grid-template-rows:repeat(3,7px);gap:3px;place-content:center;box-shadow:0 7px 22px #006f7b40}.brand-mark i{display:block;background:#fff;border-radius:2px}.brand-mark i:nth-child(5),.brand-mark i:nth-child(6),.brand-mark i:nth-child(8){background:var(--accent)}.main-nav{display:flex;gap:18px;align-items:center;margin-left:auto}.main-nav a{color:var(--text);font-size:.93rem;font-weight:650}.header-actions{display:flex;align-items:center;gap:8px}.icon-btn,.menu-btn{border:1px solid var(--line);background:var(--surface);color:var(--text);width:42px;height:42px;border-radius:12px;display:grid;place-items:center}.menu-btn{display:none}.hero{padding:76px 0 48px}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:color-mix(in srgb,var(--brand) 10%,var(--surface));color:var(--brand);font-weight:800;font-size:.82rem}.hero h1,.tool-hero h1{font-size:clamp(2.3rem,5vw,4.8rem);line-height:1.03;letter-spacing:-.045em;margin:18px 0}.hero p,.tool-hero p{font-size:1.12rem;color:var(--muted);max-width:680px}.hero-actions,.button-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}.btn{border:0;border-radius:13px;padding:13px 19px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:9px;transition:.18s transform,.18s box-shadow}.btn:hover{text-decoration:none;transform:translateY(-1px)}.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;box-shadow:0 10px 25px #006f7b40}.btn-secondary{background:var(--surface);border:1px solid var(--line);color:var(--text)}.btn-ghost{background:transparent;color:var(--brand);border:1px dashed var(--line)}.btn-danger{background:color-mix(in srgb,var(--danger) 12%,var(--surface));color:var(--danger);border:1px solid color-mix(in srgb,var(--danger) 32%,var(--line))}.hero-card{background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:22px;box-shadow:var(--shadow);position:relative;overflow:hidden}.hero-card:before{content:"";position:absolute;width:200px;height:200px;border-radius:50%;background:color-mix(in srgb,var(--accent) 25%,transparent);right:-80px;top:-100px}.quick-grid{display:grid;grid-template-columns:1fr 280px;gap:20px;position:relative}.quick-preview{display:grid;place-items:center;background:#fff;border:1px solid #d7e0e2;border-radius:18px;min-height:280px;padding:18px}.section{padding:44px 0}.section-title{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:22px}.section-title h2{font-size:clamp(1.6rem,3vw,2.35rem);line-height:1.12;margin:0;letter-spacing:-.03em}.section-title p{color:var(--muted);max-width:640px;margin:6px 0 0}.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.tool-card{display:block;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px;color:var(--text);min-height:165px;transition:.18s transform,.18s box-shadow,.18s border}.tool-card:hover{text-decoration:none;transform:translateY(-3px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--brand) 45%,var(--line))}.tool-icon{width:45px;height:45px;border-radius:13px;display:grid;place-items:center;background:color-mix(in srgb,var(--brand) 11%,var(--surface));color:var(--brand);font-size:1.25rem;font-weight:900}.tool-card h3{margin:14px 0 5px;font-size:1.07rem}.tool-card p{color:var(--muted);font-size:.91rem;margin:0}.category-block{margin:38px 0}.category-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.category-head h2{font-size:1.45rem;margin:0}.search-wrap{position:relative;max-width:640px;margin:0 auto 28px}.search-wrap input{width:100%;padding:16px 20px 16px 48px;border-radius:16px;border:1px solid var(--line);background:var(--surface);color:var(--text);box-shadow:0 7px 28px #12353d0f}.search-wrap span{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--muted)}.privacy-strip{background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 12%,var(--surface)),color-mix(in srgb,var(--accent) 11%,var(--surface)));border:1px solid var(--line);border-radius:22px;padding:24px;display:flex;gap:16px;align-items:flex-start}.privacy-strip strong{display:block;font-size:1.08rem}.privacy-strip p{margin:3px 0;color:var(--muted)}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.step{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px}.step b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--brand);color:#fff;margin-bottom:12px}.faq{display:grid;gap:10px}.faq details{background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:16px 18px}.faq summary{cursor:pointer;font-weight:800}.faq p{color:var(--muted)}.site-footer{margin-top:62px;border-top:1px solid var(--line);padding:38px 0 24px;background:var(--surface)}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px}.footer-links{display:grid;gap:8px}.footer-links a{color:var(--muted)}.footer-bottom{border-top:1px solid var(--line);padding-top:18px;margin-top:28px;color:var(--muted);font-size:.88rem}.tool-hero{padding:52px 0 24px}.tool-hero h1{font-size:clamp(2rem,4.7vw,3.8rem)}.breadcrumbs{font-size:.88rem;color:var(--muted);margin-bottom:12px}.app-shell{display:grid;grid-template-columns:minmax(0,1fr) 410px;gap:22px;align-items:start}.panel{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:0 10px 35px #12353d0d}.panel h2,.panel h3{margin-top:0}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}.field{display:grid;gap:7px}.field.full{grid-column:1/-1}.field label{font-size:.88rem;font-weight:800}.field small{color:var(--muted);font-size:.78rem}.input,textarea,select{width:100%;border:1px solid var(--line);background:var(--bg);color:var(--text);border-radius:12px;padding:12px 13px;outline:none}.input:focus,textarea:focus,select:focus{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 15%,transparent)}textarea{min-height:118px;resize:vertical}.checkbox-row{display:flex;align-items:center;gap:9px}.checkbox-row input{width:18px;height:18px}.subpanel{background:var(--surface-2);border:1px solid var(--line);padding:15px;border-radius:15px;margin-top:15px}.preview-panel{position:sticky;top:94px}.code-stage{background:#fff;border:1px solid #d9e1e3;border-radius:18px;min-height:350px;padding:22px;display:grid;place-items:center;overflow:auto}.code-stage canvas{image-rendering:auto}.score-box{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;margin-top:16px;padding:15px;border-radius:15px;background:var(--surface-2);border:1px solid var(--line)}.score-ring{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--success) var(--score,80%),var(--line) 0);position:relative;font-weight:900}.score-ring:before{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--surface)}.score-ring span{position:relative}.status-list{display:grid;gap:7px;margin:14px 0 0;padding:0;list-style:none;font-size:.88rem}.status-list li{display:flex;gap:8px}.status-ok{color:var(--success)}.status-warn{color:var(--warning)}.status-bad{color:var(--danger)}.download-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:15px}.download-grid .btn{padding:11px 8px;font-size:.87rem}.notice{border-left:4px solid var(--brand);background:color-mix(in srgb,var(--brand) 8%,var(--surface));padding:13px 15px;border-radius:0 12px 12px 0;color:var(--muted);font-size:.9rem}.notice.warning{border-color:var(--warning);background:color-mix(in srgb,var(--warning) 9%,var(--surface))}.result-box{border:1px solid var(--line);background:var(--surface-2);padding:16px;border-radius:15px;overflow-wrap:anywhere}.result-value{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;font-size:.9rem}.dropzone{border:2px dashed color-mix(in srgb,var(--brand) 45%,var(--line));background:color-mix(in srgb,var(--brand) 5%,var(--surface));border-radius:18px;padding:34px 20px;text-align:center}.dropzone.drag{background:color-mix(in srgb,var(--brand) 12%,var(--surface));border-color:var(--brand)}.camera-wrap{background:#000;border-radius:17px;overflow:hidden;aspect-ratio:4/3;display:grid;place-items:center}.camera-wrap video{width:100%;height:100%;object-fit:cover}.progress{height:10px;border-radius:999px;background:var(--line);overflow:hidden}.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--accent));width:0}.batch-list{display:grid;gap:9px;margin-top:16px}.batch-item{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:11px 13px;border:1px solid var(--line);border-radius:12px}.table-wrap{overflow:auto}.data-table{width:100%;border-collapse:collapse;font-size:.9rem}.data-table th,.data-table td{padding:10px;border-bottom:1px solid var(--line);text-align:left}.ad-slot{min-height:90px;margin:30px 0;border-radius:12px}.article-content{max-width:900px}.article-content h2{margin-top:34px}.article-content p,.article-content li{color:var(--muted)}.article-content code{background:var(--surface-2);padding:2px 6px;border-radius:6px}.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.empty-state{text-align:center;color:var(--muted);padding:30px}.toast{position:fixed;right:20px;bottom:20px;background:var(--text);color:var(--bg);padding:12px 16px;border-radius:12px;box-shadow:var(--shadow);z-index:100;opacity:0;transform:translateY(15px);pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translateY(0)}.hidden{display:none!important}@media(max-width:980px){.main-nav{display:none;position:absolute;left:16px;right:16px;top:66px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:15px;box-shadow:var(--shadow);flex-direction:column;align-items:flex-start}.main-nav.open{display:flex}.menu-btn{display:grid}.hero-grid,.app-shell{grid-template-columns:1fr}.preview-panel{position:static}.tool-grid{grid-template-columns:repeat(2,1fr)}.quick-grid{grid-template-columns:1fr}.steps{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1fr 1fr}.hero{padding-top:52px}}@media(max-width:640px){.container{width:min(100% - 22px,var(--max))}.hero{padding:38px 0 30px}.hero h1{font-size:2.45rem}.tool-grid,.related-grid,.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.steps,.footer-grid{grid-template-columns:1fr}.download-grid{grid-template-columns:1fr 1fr}.panel{padding:16px;border-radius:17px}.code-stage{min-height:290px;padding:14px}.header-inner{gap:10px}.brand{font-size:1.05rem}.brand-mark{width:38px;height:38px}.batch-item{grid-template-columns:1fr}.section-title{align-items:start;flex-direction:column}.hero-actions .btn{flex:1}.quick-preview{min-height:240px}}@media print{.site-header,.site-footer,.ad-slot,.button-row,.download-grid,.breadcrumbs,.privacy-strip{display:none!important}body{background:#fff;color:#000}.panel{box-shadow:none;border:0}.app-shell{display:block}.preview-panel{position:static}.code-stage{border:0}}