:root{--bg:#fff9fc;--panel:#fff;--panel-2:#f7f9ff;--border:#e5e8f3;--border-soft:#eef0f7;--text:#18233d;--text-dim:#68738d;--text-faint:#99a1b5;--accent:#ec5fa7;--accent-dim:#c94b8d;--blue:#4d7df3;--danger:#df4e67;--danger-dim:#efb2bd;--radius:14px}
*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:radial-gradient(900px 450px at 10% -5%,#ffe9f4 0,transparent 60%),radial-gradient(800px 460px at 105% 8%,#eaf2ff 0,transparent 58%),var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif;min-height:100vh;-webkit-font-smoothing:antialiased}
.wrap{max-width:1180px;margin:0 auto;padding:34px 20px 80px}.tooltop{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:24px}.back{text-decoration:none;color:var(--text-dim);font-size:13px;font-weight:700}.toolbrand{display:flex;align-items:center;gap:12px}.brand-mark{width:40px;height:40px;border-radius:13px;background:linear-gradient(135deg,var(--accent),var(--blue));display:grid;place-items:center;box-shadow:0 12px 28px rgba(95,91,197,.22)}.brand-mark svg{width:20px}.toolbrand h1{font:700 22px "Space Grotesk";margin:0}.tagline{color:var(--text-dim);font-size:13px;margin-top:3px}.badge{font:500 11px "JetBrains Mono";color:#7b6682;border:1px solid #ead9e8;background:#fff;padding:6px 10px;border-radius:999px}
.tool-intro{margin-bottom:20px;padding:18px 20px;border:1px solid #eadff0;border-radius:16px;background:linear-gradient(110deg,#fff4fa,#f4f8ff);box-shadow:0 14px 40px rgba(56,67,115,.08)}.tool-intro b{font-family:"Space Grotesk"}.tool-intro span{display:block;color:var(--text-dim);font-size:13px;line-height:1.6;margin-top:4px}
.dropzone{border:1.5px dashed #d9b8d0;border-radius:18px;padding:66px 24px;text-align:center;background:rgba(255,255,255,.9);cursor:pointer;transition:.15s;box-shadow:0 18px 50px rgba(56,67,115,.09)}.dropzone:hover,.dropzone.drag{border-color:var(--accent);background:#fff5fa}.dropzone svg{width:38px;height:38px;color:var(--blue);margin-bottom:14px}.dz-title{font-size:16px;font-weight:700}.dz-sub{color:var(--text-dim);font-size:13px;margin-top:7px}input[type=file]{display:none}
.panel{background:rgba(255,255,255,.94);border:1px solid var(--border);border-radius:18px;padding:19px;margin-bottom:16px;box-shadow:0 14px 42px rgba(56,67,115,.08)}.panel-title{font:700 13px "Space Grotesk";letter-spacing:.4px;text-transform:uppercase;color:#5f6880;margin:0 0 14px;display:flex;align-items:center;gap:8px}.panel-title .num{font:600 11px "JetBrains Mono";color:#fff;background:linear-gradient(135deg,var(--accent),var(--blue));border-radius:6px;padding:2px 7px}
.stage{position:relative;width:100%;border-radius:12px;overflow:hidden;background:#10131c;line-height:0;display:flex;justify-content:center;align-items:center;max-height:74vh;box-shadow:inset 0 0 0 1px var(--border)}.stage video{display:block;max-width:100%;max-height:74vh;width:auto;height:auto;margin:0 auto}.stage canvas.overlay{position:absolute}.stage.drawing canvas.overlay{cursor:crosshair}.coord-readout{position:absolute;bottom:8px;left:8px;font:11px "JetBrains Mono";background:rgba(24,35,61,.8);color:#fff;padding:4px 8px;border-radius:6px;pointer-events:none;opacity:0}
.stage-controls{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}.scrub{flex:1;min-width:180px;accent-color:var(--accent)}.time-lbl{font:12px "JetBrains Mono";color:var(--text-dim)}
button{font:600 13px Inter;border-radius:9px;border:1px solid var(--border);background:var(--panel-2);color:var(--text);padding:10px 14px;cursor:pointer;transition:.12s;display:inline-flex;align-items:center;gap:7px}button:hover{border-color:#cdd4e7;background:#f1f5ff}button:active{transform:translateY(1px)}button:disabled{opacity:.4;cursor:not-allowed}button.primary{background:linear-gradient(135deg,var(--accent),var(--blue));border-color:transparent;color:#fff;font-weight:700;box-shadow:0 10px 24px rgba(95,91,197,.18)}button.ghost{background:transparent}button.danger-ghost{background:transparent;border-color:var(--danger-dim);color:#c7445a}button.small{padding:7px 10px;font-size:12px}button svg{width:14px;height:14px}.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.toolbar .spacer{flex:1}.hint{color:var(--text-faint);font-size:12px}
.area-row{display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--border-soft);border-radius:10px;background:var(--panel-2);margin-bottom:8px}.swatch{width:10px;height:10px;border-radius:3px;background:linear-gradient(135deg,var(--accent),var(--blue))}.meta{flex:1;min-width:0}.meta .label{font-size:13px;font-weight:700}.meta .dims{font:11px "JetBrains Mono";color:var(--text-faint);margin-top:2px}.range{display:flex;align-items:center;gap:6px}.area-row input[type=number]{width:56px;background:#fff;border:1px solid var(--border);color:var(--text);border-radius:6px;padding:5px;font:11px "JetBrains Mono"}.toggle-lbl{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-dim)}.empty-state{color:var(--text-faint);font-size:13px;text-align:center;padding:20px}
.method-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.method-card{border:1px solid var(--border-soft);border-radius:12px;padding:14px;cursor:pointer;background:var(--panel-2)}.method-card.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset;background:#fff6fb}.m-title{font-size:13px;font-weight:700;display:flex;justify-content:space-between}.m-desc{font-size:11.5px;color:var(--text-dim);margin-top:4px;line-height:1.45}.dot{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--border)}.method-card.active .dot{background:var(--accent);border-color:var(--accent)}
.progress-wrap{display:none}.progress-wrap.show{display:block}.bar-track{height:7px;background:#eef2fb;border-radius:5px;overflow:hidden}.bar-fill{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--blue))}.progress-lbl{display:flex;justify-content:space-between;font:12px "JetBrains Mono";color:var(--text-dim);margin-top:8px}.result-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}.note{font-size:12px;color:var(--text-faint);line-height:1.6;margin-top:14px;border-top:1px solid var(--border-soft);padding-top:12px}.note b{color:var(--text-dim)}
.guide{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}.guide-step{background:#fff;border:1px solid var(--border-soft);border-radius:15px;padding:15px;box-shadow:0 10px 30px rgba(56,67,115,.06)}.g-num{font:600 11px "JetBrains Mono";color:#fff;background:linear-gradient(135deg,var(--accent),var(--blue));border-radius:6px;padding:2px 7px;display:inline-block;margin-bottom:8px}.g-title{font-size:13px;font-weight:700}.g-desc{font-size:12px;color:var(--text-dim);line-height:1.5;margin-top:4px}.banner{display:none;align-items:flex-start;gap:10px;background:#fff1f4;border:1px solid var(--danger-dim);color:#c7445a;font-size:12.5px;line-height:1.5;border-radius:10px;padding:11px 13px;margin-bottom:14px}.banner.show{display:flex}.banner.warn{background:#fff9e8;border-color:#efd18c;color:#936f1f}.banner svg{width:15px}section.hidden,#resultBlock.hidden{display:none}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-thumb{background:#d8ddeb;border-radius:6px}
@media(max-width:780px){.guide{grid-template-columns:1fr 1fr}.method-grid{grid-template-columns:1fr}.area-row{align-items:flex-start;flex-wrap:wrap}}

.seo-engine-content{max-width:980px;margin:55px auto 0;padding:0 20px 80px;color:var(--text)}
.seo-engine-content section{margin-top:42px}.seo-engine-content h2{font:700 clamp(25px,4vw,34px)/1.15 "Space Grotesk";letter-spacing:-.7px;margin:0 0 13px}.seo-engine-content h3{font:700 18px "Space Grotesk";margin:0 0 7px}
.seo-engine-content p,.seo-engine-content li{color:var(--text-dim);font-size:14px;line-height:1.8}.seo-engine-content strong{color:var(--text)}
.seo-kicker{display:inline-flex;padding:7px 10px;border-radius:999px;background:#fff0f7;border:1px solid #f3c7dc;color:#b43d7c;font-size:11px;font-weight:800;margin-bottom:12px}
.seo-step-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.seo-step-grid article,.seo-compare article{background:#fff;border:1px solid var(--border);border-radius:14px;padding:16px;box-shadow:0 10px 28px rgba(56,67,115,.06)}.seo-step-grid b{display:block;font-size:13px;margin-bottom:5px}.seo-step-grid span{color:var(--text-dim);font-size:12px;line-height:1.55}.seo-compare{display:grid;grid-template-columns:1fr 1fr;gap:14px}.seo-compare p{margin:0}.seo-faq details{padding:15px 0;border-bottom:1px solid var(--border)}.seo-faq summary{cursor:pointer;font-weight:700}.seo-faq p{margin:8px 0 0}
@media(max-width:800px){.seo-step-grid{grid-template-columns:1fr 1fr}.seo-compare{grid-template-columns:1fr}}@media(max-width:520px){.seo-step-grid{grid-template-columns:1fr}}