:root {
    --tool-ink: #1f2835;
    --tool-muted: #6d7784;
    --tool-cream: #fffaf2;
    --tool-paper: #fffefd;
    --tool-line: #e8e0d5;
    --tool-orange: #ef8056;
    --tool-orange-dark: #be5838;
    --tool-blue: #78b8d5;
    --tool-shadow: 0 24px 70px rgba(82, 60, 38, .13);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--tool-ink);
    background: var(--tool-cream);
    font-family: 'DM Sans', system-ui, sans-serif;
    line-height: 1.6;
}
a { color: inherit; }
button, textarea { font: inherit; }
.tool-nav {
    position: sticky;
    top: 18px;
    z-index: 10;
    width: min(1090px, calc(100% - 40px));
    margin: 18px auto 0;
    border: 1px solid rgba(31, 40, 53, .1);
    border-radius: 18px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 8px 24px rgba(57, 47, 35, .1);
    backdrop-filter: blur(14px);
}
.tool-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 13px 18px;
}
.tool-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 800 19px Manrope, sans-serif; }
.tool-brand img { width: 30px; height: 30px; border-radius: 9px; }
.tool-menu { display: flex; align-items: center; gap: 20px; color: var(--tool-muted); font-size: 14px; }
.tool-menu a { text-decoration: none; }
.tool-menu .tool-nav-cta { padding: 8px 14px; border-radius: 10px; color: #fff; background: var(--tool-ink); }
.tool-hero {
    position: relative;
    min-height: 690px;
    overflow: hidden;
    padding: 105px 20px 70px;
    text-align: center;
    background:
        radial-gradient(circle at 50% 44%, rgba(255, 255, 255, .96), rgba(255, 250, 242, .2) 54%),
        linear-gradient(rgba(237, 226, 210, .27) 1px, transparent 1px),
        linear-gradient(90deg, rgba(237, 226, 210, .27) 1px, transparent 1px);
    background-size: auto, 42px 42px, 42px 42px;
}
.tool-hero::before {
    position: absolute;
    inset: 40px 8% auto;
    height: 480px;
    border: 2px dashed rgba(213, 203, 191, .45);
    border-radius: 50%;
    content: '';
    transform: rotate(-7deg);
}
.tool-hero-copy { position: relative; z-index: 1; max-width: 780px; margin: 0 auto; }
.tool-kicker, .tool-overline { margin: 0 0 18px; color: var(--tool-orange-dark); font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.tool-kicker span { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--tool-orange); }
.tool-hero h1, .tool-section h2 { margin: 0; font-family: Manrope, sans-serif; letter-spacing: -.055em; line-height: 1.02; }
.tool-hero h1 { font-size: clamp(52px, 8vw, 94px); }
.tool-hero h1 em, .tool-section h2 em { color: var(--tool-orange); font-style: normal; }
.tool-hero-lead { max-width: 590px; margin: 26px auto 0; color: var(--tool-muted); font-size: 19px; }
.tool-hero-art { position: relative; z-index: 1; width: min(660px, 92vw); height: 260px; margin: 48px auto 0; }
.tool-file-card, .tool-map-card { position: absolute; border: 1px solid rgba(31, 40, 53, .12); border-radius: 20px; background: rgba(255, 255, 255, .87); box-shadow: 0 18px 50px rgba(70, 54, 36, .11); }
.tool-file-card { top: 30px; left: 3%; width: 162px; padding: 18px; transform: rotate(-9deg); }
.tool-file-icon { display: grid; place-items: center; width: 70px; height: 82px; margin: 0 auto 10px; border-radius: 12px; color: #fff; background: linear-gradient(145deg, #8fcae1, #5799be); font: 800 25px Manrope, sans-serif; }
.tool-file-card strong, .tool-file-card small { display: block; }
.tool-file-card strong { font-size: 14px; }
.tool-file-card small { color: var(--tool-muted); font-size: 12px; }
.tool-map-card { top: 0; right: 0; width: 360px; height: 215px; overflow: hidden; padding: 18px; transform: rotate(5deg); }
.tool-map-card::before { position: absolute; inset: 0; background: linear-gradient(130deg, transparent 49.7%, rgba(120, 184, 213, .4) 50%, transparent 50.5%), linear-gradient(40deg, transparent 49.7%, rgba(239, 128, 86, .4) 50%, transparent 50.5%); content: ''; }
.tool-map-root, .tool-map-node { position: absolute; z-index: 1; padding: 8px 13px; border: 1px solid rgba(31, 40, 53, .12); border-radius: 10px; background: #fff; box-shadow: 0 5px 12px rgba(50, 50, 50, .08); font-size: 12px; font-weight: 700; }
.tool-map-root { top: 84px; left: 133px; color: #fff; background: var(--tool-ink); }
.tool-map-node:nth-of-type(2) { top: 28px; left: 45px; }
.tool-map-node:nth-of-type(3) { top: 155px; left: 35px; }
.tool-map-node:nth-of-type(4) { top: 45px; right: 35px; }
.tool-map-node:nth-of-type(5) { right: 20px; bottom: 22px; }
.tool-hero-note { position: absolute; z-index: 2; right: 8%; bottom: 0; padding: 11px 15px; border-radius: 12px; color: #fff; background: var(--tool-orange); font-size: 12px; font-weight: 700; transform: rotate(-5deg); }
.tool-section { padding: 105px 20px; }
.tool-section-inner { width: min(1280px, 100%); margin: 0 auto; }
.tool-section-heading { max-width: 610px; margin-bottom: 38px; }
.tool-section h2 { font-size: clamp(38px, 5vw, 64px); }
.tool-section-intro { max-width: 610px; margin: 22px 0 0; color: var(--tool-muted); font-size: 18px; }
.tool-converter { display: grid; grid-template-columns: minmax(360px, .86fr) minmax(520px, 1.4fr); gap: 18px; padding: 18px; border: 1px solid var(--tool-line); border-radius: 28px; background: rgba(255, 255, 255, .72); box-shadow: var(--tool-shadow); }
.tool-input-panel, .tool-preview-panel { min-width: 0; border-radius: 20px; background: var(--tool-paper); }
.tool-input-panel { display: flex; flex-direction: column; padding: 24px; }
.tool-input-title { margin: 0; font: 800 22px Manrope, sans-serif; }
.tool-input-copy { margin: 8px 0 18px; color: var(--tool-muted); font-size: 14px; }
.tool-dropzone { display: block; padding: 20px; border: 1px dashed #d4c2af; border-radius: 16px; color: var(--tool-muted); background: #fffaf4; text-align: center; cursor: pointer; }
.tool-dropzone.is-over { border-color: var(--tool-orange); background: #fff0e8; }
.tool-dropzone strong { display: block; color: var(--tool-ink); font-size: 15px; }
.tool-dropzone span { display: block; margin-top: 4px; font-size: 13px; }
.tool-dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.tool-textarea { width: 100%; min-height: 235px; margin-top: 16px; padding: 15px; resize: vertical; border: 1px solid var(--tool-line); border-radius: 14px; outline: none; color: var(--tool-ink); background: #fff; font: 14px/1.65 'SFMono-Regular', Consolas, monospace; }
.tool-textarea:focus { border-color: var(--tool-orange); box-shadow: 0 0 0 3px rgba(239, 128, 86, .14); }
.tool-input-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.tool-status { min-height: 20px; color: var(--tool-muted); font-size: 12px; }
.tool-button { border: 0; border-radius: 12px; padding: 12px 18px; color: #fff; background: var(--tool-ink); cursor: pointer; font-weight: 700; }
.tool-button:hover { background: #354252; }
.tool-preview-panel { min-height: 620px; overflow: hidden; background: #242536; }
.tool-preview-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; color: #e8e8f0; background: #1d1e2b; font-size: 12px; }
.tool-preview-dots { display: flex; gap: 5px; }
.tool-preview-dots i { display: block; width: 7px; height: 7px; border-radius: 50%; background: #f18466; }
.tool-preview-dots i:nth-child(2) { background: #edc469; }
.tool-preview-dots i:nth-child(3) { background: #8bc58d; }
.tool-preview-open { color: #b8c8ff; text-decoration: none; }
.tool-preview-frame { display: block; width: 100%; height: 570px; border: 0; background: #242536; }
.tool-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 64px; }
.tool-step { padding: 26px; border-top: 2px solid var(--tool-ink); }
.tool-step-number { color: var(--tool-orange); font: 800 15px Manrope, sans-serif; }
.tool-step h3 { margin: 12px 0 8px; font: 800 22px Manrope, sans-serif; }
.tool-step p { margin: 0; color: var(--tool-muted); font-size: 15px; }
.tool-faq-section { padding-top: 45px; background: #fff; }
.tool-faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; }
.tool-faq-list details { padding: 18px 0; border-bottom: 1px solid var(--tool-line); }
.tool-faq-list summary { cursor: pointer; font-weight: 700; }
.tool-faq-list p { margin: 12px 0 0; color: var(--tool-muted); }
.tool-footer { padding: 35px 20px 48px; color: var(--tool-muted); background: #fff; font-size: 13px; }
.tool-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: min(1090px, 100%); margin: 0 auto; }
.tool-footer a { text-decoration: none; }
@media (max-width: 800px) {
    .tool-menu a:not(.tool-nav-cta) { display: none; }
    .tool-hero { min-height: 620px; padding-top: 75px; }
    .tool-hero-art { height: 220px; transform: scale(.86); transform-origin: top center; }
    .tool-map-card { right: -7%; }
    .tool-file-card { left: -2%; }
    .tool-converter, .tool-faq-grid { grid-template-columns: 1fr; }
    .tool-preview-panel { min-height: 430px; }
    .tool-preview-frame { height: 380px; }
    .tool-steps { grid-template-columns: 1fr; gap: 8px; }
    .tool-footer-inner { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 520px) {
    .tool-nav { top: 10px; width: calc(100% - 20px); margin-top: 10px; }
    .tool-nav-inner { padding: 10px 12px; }
    .tool-hero { min-height: 560px; padding: 65px 16px 30px; }
    .tool-hero h1 { font-size: 52px; }
    .tool-hero-lead { font-size: 16px; }
    .tool-hero-art { width: 560px; margin-top: 36px; transform: translateX(-10%) scale(.7); }
    .tool-hero-note { right: 2%; }
    .tool-section { padding: 70px 16px; }
    .tool-input-panel { padding: 18px; }
}