/* CreatorTools dedicated tool pages — selected V5 white/ruby design language. */
:root{--soft-edge:#f2e7ec;--glow:rgba(240,26,75,.14)}
body{background:#fff}
.site-header{position:sticky;top:0}
.site-header .main-nav a.nav-active{color:#e81948}
.directory-hero{position:relative;isolation:isolate;overflow:hidden;text-align:center;padding:67px 0 44px;background:radial-gradient(ellipse 37% 68% at -7% 97%,rgba(255,57,105,.09),transparent 75%),radial-gradient(ellipse 37% 68% at 108% 90%,rgba(255,48,94,.095),transparent 76%),#fff}
.directory-hero::before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background:radial-gradient(ellipse 34% 34% at 51% -8%,rgba(255,98,139,.09),transparent 85%)}
.directory-hero .section-badge{margin-bottom:16px}
.directory-hero h1{font-size:clamp(35px,4.4vw,57px);line-height:1.12;letter-spacing:-1.8px;font-weight:900;max-width:820px;margin:0 auto 17px}
.directory-hero p{max-width:700px;margin:0 auto;color:#626e84;font-size:15px;line-height:1.75}
.directory-search{width:min(100%,690px);height:65px;display:flex;align-items:center;gap:13px;margin:28px auto 16px;padding:10px 17px;border:1px solid #f4d9e0;background:#fff;border-radius:18px;box-shadow:0 10px 35px rgba(229,40,89,.075),0 0 0 5px rgba(255,62,105,.022);transition:border-color .25s,box-shadow .25s}
.directory-search:focus-within{border-color:#f06a86;box-shadow:0 12px 42px rgba(229,40,89,.11),0 0 0 5px rgba(255,62,105,.075)}
.directory-search img{width:22px;height:22px}.directory-search input{border:0;outline:0;min-width:0;flex:1;font:500 15px Roboto,Arial,sans-serif;color:#222d41;background:transparent}.directory-search input::placeholder{color:#8993a4}.directory-search kbd{border:1px solid #ececf2;border-radius:7px;background:#f9fafc;color:#8792a4;font-size:12px;padding:3px 8px}
.directory-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:17px}.directory-filters button{border:1px solid #ebedf3;background:#fff;color:#59647a;padding:10px 17px;border-radius:100px;font:700 13px Roboto,Arial;cursor:pointer;transition:all .2s}.directory-filters button span{margin-left:4px;opacity:.7}.directory-filters button:hover{border-color:#ff9ab0;color:#ed1747;transform:translateY(-2px)}.directory-filters button.filter-active{background:var(--gradient);color:#fff;border-color:transparent;box-shadow:0 8px 19px rgba(234,21,66,.17)}.directory-hero .filter-status{font-size:12px;margin:15px auto 0;color:#9097a6}
.directory-section{padding:40px 0 20px}.directory-section-more{padding-top:45px;padding-bottom:75px}.directory-heading{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:23px}.directory-heading .section-badge{margin-bottom:10px}.directory-heading h2{font-size:clamp(26px,3vw,35px);letter-spacing:-1px;font-weight:900;margin:0 0 7px}.directory-heading p{margin:0;color:#69748b;font-size:14px;line-height:1.6}.section-count{font-size:12px;font-weight:800;color:#d91641;background:#fff0f4;padding:9px 13px;border-radius:100px;white-space:nowrap}
.directory-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px}
.directory-card{--rx:0deg;--ry:0deg;position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:207px;padding:23px 21px 20px;background:#fff;border:1px solid #e9eaf1;border-radius:17px;box-shadow:0 9px 30px rgba(34,42,71,.035);transform:perspective(850px) rotateX(var(--rx)) rotateY(var(--ry));transition:border-color .25s,box-shadow .3s,transform .3s;overflow:hidden}
.directory-card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse 75% 65% at var(--cx,50%) var(--cy,20%),rgba(255,70,110,.075),transparent);transition:opacity .3s;z-index:-1}.directory-card:hover{border-color:#ffc1cf;box-shadow:0 19px 38px rgba(223,27,75,.105);transform:translateY(-5px) perspective(850px) rotateX(var(--rx)) rotateY(var(--ry))}.directory-card:hover::before{opacity:1}
.directory-icon,.workspace-icon{display:grid;place-items:center;width:51px;height:51px;flex:none;border-radius:14px;background:linear-gradient(135deg,#fff2f5,#ffe5ec);box-shadow:inset 0 1px 0 #fff;border:1px solid #fff}.directory-icon img,.workspace-icon img{width:28px;height:28px;transition:transform .3s}.directory-card:hover .directory-icon img{transform:scale(1.13) rotate(-6deg)}
.directory-arrow{position:absolute;top:23px;right:21px;display:grid;place-items:center;width:32px;height:32px;border:1px solid #ffdae3;color:#ea214e;background:#fff;border-radius:50%;font-size:20px;transition:all .25s}.directory-card:hover .directory-arrow{background:var(--gradient);color:#fff;transform:rotate(45deg)}
.directory-card h3{font-size:16px;line-height:1.32;font-weight:900;letter-spacing:-.35px;margin:20px 0 8px}.directory-card p{font-size:13px;line-height:1.58;color:#657086;margin:0 0 19px;flex:1}.directory-link{font-size:12px;font-weight:900;color:#e81b46}.directory-link span{margin-left:4px;transition:margin .2s}.directory-card:hover .directory-link span{margin-left:10px}
.directory-card[hidden],.directory-section[hidden],.directory-empty[hidden]{display:none!important}.directory-empty{text-align:center;padding:40px 20px 60px}.directory-empty h2{font-size:24px}.directory-empty p{color:#657086}.directory-bottom{text-align:center;background:linear-gradient(110deg,#fff7f9,#fff,#fff5f8);padding:42px 0 50px;border-top:1px solid #f8e5ea}.directory-bottom h2{font-size:30px;letter-spacing:-1px;margin:0 0 8px}.directory-bottom p{font-size:14px;color:#69748b;margin:0 auto 20px;max-width:650px;line-height:1.7}
/* Tool detail pages */
.tool-page{padding-bottom:70px}.breadcrumbs{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:#8490a2;font-size:12px;margin-top:23px}.breadcrumbs a{color:#e91c48;font-weight:700}.breadcrumbs span:last-child{color:#47536a}
.tool-page-hero{position:relative;isolation:isolate;overflow:hidden;text-align:center;padding:37px 18px 33px}.tool-page-hero::before{content:"";z-index:-1;position:absolute;inset:0;background:radial-gradient(ellipse 40% 75% at 0% 95%,rgba(255,71,114,.08),transparent 80%),radial-gradient(ellipse 40% 75% at 100% 90%,rgba(255,71,114,.08),transparent 80%);pointer-events:none}.tool-page-hero .section-badge img{width:15px;height:15px}.tool-page-hero h1{font-size:clamp(34px,4vw,49px);line-height:1.15;letter-spacing:-1.5px;font-weight:900;margin:15px 0 10px}.tool-page-hero p{max-width:660px;font-size:15px;line-height:1.65;color:#657086;margin:0 auto 13px}.availability-badge{display:inline-flex;align-items:center;gap:7px;font-size:11px;color:#5d697e;background:#f8f9fb;border:1px solid #eceef3;border-radius:30px;padding:7px 12px;font-weight:700}.availability-dot{width:7px;height:7px;border-radius:50%;background:#f52d57;box-shadow:0 0 0 3px #ffe0e7}
.tool-workspace-layout{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(260px,.87fr);gap:22px;align-items:start}.tool-workspace{border:1px solid #e9ebf2;border-radius:21px;background:#fff;box-shadow:0 13px 44px rgba(42,45,75,.045);padding:29px;min-width:0}.workspace-head{display:flex;align-items:center;gap:15px;margin-bottom:27px}.workspace-icon{width:58px;height:58px}.workspace-icon img{width:30px;height:30px}.workspace-head h2{font-size:20px;letter-spacing:-.5px;font-weight:900;margin:0 0 6px}.workspace-head p{font-size:12px;color:#8290a4;margin:0}.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px 16px}.field{display:flex;flex-direction:column;gap:8px;min-width:0}.field-wide{grid-column:1/-1}.field>span{font-size:12px;color:#3d485c;font-weight:800}.field input,.field select,.field textarea{appearance:none;min-width:0;width:100%;min-height:48px;border:1px solid #e6e9f1;background:#fcfcfe;border-radius:11px;outline:0;padding:12px 14px;font:500 13px Roboto,Arial,sans-serif;color:#263146;transition:border-color .2s,box-shadow .2s}.field textarea{min-height:105px;resize:vertical;line-height:1.6}.field select{appearance:auto;cursor:pointer}.field input:focus,.field textarea:focus,.field select:focus{border-color:#f46b8b;box-shadow:0 0 0 4px rgba(242,44,92,.075);background:#fff}.field input::placeholder,.field textarea::placeholder{color:#a2aab9}.form-checks{display:flex;gap:12px;flex-wrap:wrap;margin-top:17px}.form-checks label{display:flex;align-items:center;gap:8px;color:#58677f;font-size:12px;font-weight:600}.form-checks input{accent-color:#e91d4b}.form-actions{display:flex;align-items:center;gap:11px;margin-top:25px;flex-wrap:wrap}.workspace-submit{font-weight:900;font-size:13px;min-height:49px;display:flex;align-items:center;gap:17px;box-shadow:0 10px 22px rgba(233,26,73,.17);background-size:200% 200%;animation:gradientShift 8s ease infinite}.workspace-submit:hover{box-shadow:0 14px 28px rgba(233,26,73,.25);transform:translateY(-2px)}.button-quiet{border:1px solid #e9eaf0;background:#fff;color:#66748c;padding:12px 17px;font-weight:800}.button-quiet:hover{background:#fff4f6;color:#db1b43}.workspace-tabs{display:flex;gap:8px;border-bottom:1px solid #f0e7ed;padding-bottom:15px;margin-bottom:24px}.workspace-tabs button{border:1px solid #f2e5ea;background:#fff7f9;color:#8c6170;border-radius:10px;padding:10px 16px;font:800 12px Roboto,Arial;cursor:pointer}.workspace-tabs button.tab-active{background:var(--gradient);border-color:transparent;color:white;box-shadow:0 7px 17px rgba(235,27,75,.14)}
.tool-result{border:1px solid #f2d9e2;background:linear-gradient(130deg,#fffafd,#fff);border-radius:16px;margin-top:25px;padding:22px;animation:resultEnter .32s ease}.tool-result[hidden]{display:none}.result-top{display:flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.05em;font-weight:900;color:#df1b47;text-transform:uppercase;margin-bottom:12px}.result-top img{width:19px;height:19px}.tool-result h3{font-size:20px;font-weight:900;letter-spacing:-.45px;margin:0 0 10px}.tool-result p{font-size:13px;line-height:1.65;color:#5b677b}.tool-result code{display:inline-block;max-width:100%;overflow-wrap:anywhere;border:1px solid #e9dfe5;border-radius:7px;background:#fff;padding:7px 10px;font-size:12px;color:#a80e34}.result-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin:15px 0}.result-metric{border:1px solid #f1e6eb;background:#fff;border-radius:12px;padding:16px;min-width:0}.result-metric small{display:block;font-size:11px;color:#778398;line-height:1.45;margin-bottom:7px}.result-metric strong{font-size:23px;line-height:1.15;font-weight:900;letter-spacing:-.5px;overflow-wrap:anywhere}.result-metric span{display:block;font-size:11px;color:#8792a5;margin-top:7px}.result-callout{background:#fff1f5;border:1px solid #ffe1e8;border-radius:11px;padding:13px 15px;font-size:12px;line-height:1.65;color:#6c5360;margin-top:15px}.result-list{list-style:none;padding:0;margin:12px 0}.result-list li{padding:10px 0;border-bottom:1px solid #f2e8ec;color:#46546c;font-size:13px;line-height:1.55;overflow-wrap:anywhere}.result-list li:last-child{border-bottom:0}.result-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}.result-actions button,.result-actions a{border:1px solid #ffd4de;border-radius:10px;background:#fff;color:#df1843;font:800 12px Roboto,Arial;padding:10px 13px;cursor:pointer}.result-actions a:hover,.result-actions button:hover{background:#fff0f4}.result-media{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.result-media img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid #f2e6ea;border-radius:10px;background:#f5f6fa}.result-media figcaption{font-size:11px;color:#67758c;margin-top:6px}.result-media figure{margin:0;min-width:0}.result-media a{font-size:11px;color:#d91c48;font-weight:800}.result-table{border-collapse:collapse;width:100%;font-size:12px;margin:13px 0}.result-table th,.result-table td{text-align:left;padding:11px 8px;border-bottom:1px solid #eee4ea}.result-table th{color:#8c7780;font-weight:700}.result-table td{font-weight:700}.result-bar{height:10px;background:#f5e5ea;border-radius:50px;overflow:hidden;margin:13px 0}.result-bar>span{height:100%;display:block;background:var(--gradient);border-radius:50px;transition:width .5s}
.tool-sidebar{display:grid;gap:16px}.sidebar-panel{border:1px solid #eaecf3;border-radius:18px;background:#fff;padding:22px;box-shadow:0 10px 25px rgba(35,42,72,.025)}.sidebar-kicker{font-size:10px;font-weight:900;letter-spacing:.12em;color:#eb2451}.sidebar-panel h3{font-size:18px;font-weight:900;letter-spacing:-.5px;margin:10px 0 18px}.step-list{list-style:none;margin:0;padding:0}.step-list li{display:flex;gap:11px;align-items:flex-start;position:relative;padding-bottom:19px}.step-list li:not(:last-child)::before{content:"";position:absolute;left:13px;top:26px;bottom:1px;border-left:1px dashed #ffbdcb}.step-list li>span{width:27px;height:27px;flex:none;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,#ff617d,#db0d40);color:white;font-size:11px;font-weight:900}.step-list li p{margin:3px 0 0;font-size:12px;line-height:1.65;color:#69748a}.sidebar-note{background:linear-gradient(140deg,#fff8fa,#fff)}.sidebar-note strong{display:block;margin:12px 0 7px;font-size:15px}.sidebar-note p{margin:0;font-size:12px;color:#6b7487;line-height:1.7}.sidebar-nav a{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#e51c4a;font-size:13px;font-weight:800;margin-top:12px}
.explain-section{display:grid;grid-template-columns:1fr 1fr;gap:27px;padding:70px 0 60px;align-items:start}.explain-copy h2{font-size:clamp(25px,3vw,35px);font-weight:900;letter-spacing:-.9px;line-height:1.25;margin:15px 0}.explain-copy p{font-size:14px;line-height:1.85;color:#667289;max-width:550px}.faq-box{border:1px solid #ebedf3;border-radius:18px;padding:25px;background:#fff;box-shadow:0 12px 32px rgba(32,42,71,.035)}.faq-box h3{font-size:20px;margin:0 0 10px;letter-spacing:-.5px}.faq-box details{border-bottom:1px solid #ececf2;padding:16px 0}.faq-box details:last-child{border:0;padding-bottom:0}.faq-box summary{cursor:pointer;font-size:13px;font-weight:800;line-height:1.5}.faq-box details p{font-size:12px;line-height:1.75;color:#6a778e;margin:12px 0 0}
.related-section{padding-bottom:20px}.related-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:22px}.related-heading h2{font-size:29px;letter-spacing:-.8px;margin:10px 0 0}.related-heading .button{font-size:12px;padding:12px 16px}.related-section .directory-card{min-height:195px}
.bpm-console{display:flex;gap:25px;align-items:center;flex-wrap:wrap;margin-top:20px;padding:17px;border:1px solid #f6d9e2;border-radius:16px;background:linear-gradient(135deg,#fff5f8,#fff)}.tap-button{width:158px;height:118px;border:0;border-radius:16px;background:var(--gradient);color:#fff;box-shadow:0 14px 24px rgba(235,25,75,.19);font:900 22px Roboto,Arial;cursor:pointer;transition:transform .1s,box-shadow .2s}.tap-button:active{transform:scale(.95);box-shadow:0 4px 12px rgba(235,25,75,.23)}.tap-button span{display:block;font-size:10px;font-weight:500;margin-top:7px}.bpm-value strong{display:block;font-size:47px;letter-spacing:-2px;font-weight:900}.bpm-value span{display:block;color:#69768a;font-size:12px}.text-button{background:none;border:0;color:#e61a46;font-weight:800;font-size:12px;padding:12px 0;cursor:pointer}
@keyframes resultEnter{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1150px){.directory-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.tool-workspace-layout{grid-template-columns:minmax(0,1.6fr) minmax(240px,.8fr)}}
@media(max-width:800px){.directory-hero{padding:50px 0 30px}.directory-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tool-workspace-layout{grid-template-columns:1fr}.tool-sidebar{grid-template-columns:repeat(2,minmax(0,1fr))}.sidebar-nav{grid-column:1/-1}.explain-section{grid-template-columns:1fr;gap:18px;padding:55px 0}.related-section .directory-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:530px){.directory-hero h1{font-size:36px;letter-spacing:-1.4px}.directory-hero p{font-size:13px}.directory-search{height:59px;padding:9px 12px}.directory-search input{font-size:12px}.directory-search kbd{display:none}.directory-filters button{padding:9px 12px;font-size:11px}.directory-section{padding-top:26px}.directory-heading{align-items:flex-start}.directory-heading h2{font-size:27px}.directory-heading p{font-size:12px}.section-count{font-size:10px}.directory-grid{gap:11px}.directory-card{min-height:206px;padding:15px 13px;border-radius:14px}.directory-icon{width:42px;height:42px;border-radius:12px}.directory-icon img{width:23px;height:23px}.directory-arrow{top:16px;right:12px;width:26px;height:26px;font-size:16px}.directory-card h3{font-size:13px;margin:15px 0 7px}.directory-card p{font-size:11px;line-height:1.48}.directory-link{font-size:11px}.tool-page{padding-bottom:40px}.tool-page-hero{padding:27px 0 25px}.tool-page-hero h1{font-size:33px}.tool-page-hero p{font-size:13px}.tool-workspace{padding:18px 15px;border-radius:16px}.workspace-head{gap:12px;margin-bottom:19px}.workspace-icon{width:48px;height:48px}.workspace-head h2{font-size:17px}.workspace-head p{font-size:11px}.field-grid{grid-template-columns:1fr;gap:13px}.field-wide{grid-column:auto}.field input,.field select,.field textarea{min-height:46px}.workspace-submit{width:100%;justify-content:center}.button-quiet{width:100%}.tool-sidebar{grid-template-columns:1fr}.sidebar-nav{grid-column:auto}.result-grid{gap:8px}.result-metric{padding:12px}.result-metric strong{font-size:19px}.result-media{grid-template-columns:1fr}.related-heading{align-items:flex-start;flex-direction:column}.related-section .directory-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.related-section .directory-card{min-height:200px}.bpm-console{gap:14px}.tap-button{width:145px;height:105px}}
@media(prefers-reduced-motion:reduce){.workspace-submit{animation:none}.tool-result{animation:none}.directory-card,.directory-card:hover{transform:none!important}}
/* Optional dark mode is secondary; light mode remains the default. */
body.dark .directory-hero,body.dark .directory-section,body.dark .directory-bottom,body.dark .tool-page-hero{background:#151822}body.dark .directory-card,body.dark .tool-workspace,body.dark .sidebar-panel,body.dark .faq-box,body.dark .tool-result,body.dark .result-metric{background:#202533;border-color:#3b4050;color:#f5f6f8}body.dark .directory-card p,body.dark .directory-heading p,body.dark .tool-page-hero p,body.dark .step-list li p,body.dark .explain-copy p,body.dark .faq-box details p{color:#adb6c8}body.dark .directory-search,body.dark .field input,body.dark .field textarea,body.dark .field select{background:#262c3a;color:#f5f6f8;border-color:#434b60}body.dark .directory-search input{color:#fff}body.dark .field>span{color:#d8deea}body.dark .sidebar-note{background:#292432}body.dark .directory-filters button:not(.filter-active){background:#202533;color:#d2d9e6;border-color:#434b60}body.dark .tool-result p,body.dark .result-list li{color:#b3bed1}

.field-help{display:block;color:#8a95a7;font-size:10px;line-height:1.5;margin-top:-2px}


/* FINAL REFINEMENT — full-bleed gradient hero and centered, single-column tool flow.
   All 45 tool pages share this layout; no content is placed in a sidebar. */
.tool-page{width:100%;overflow:clip;padding-bottom:74px}
.tool-page>.layout:first-child{position:relative;z-index:1}
.tool-page-hero{
  width:100%;
  min-height:262px;
  padding:42px max(20px,calc((100% - 1160px)/2)) 45px;
  margin:0 auto 26px;
  background:linear-gradient(180deg,#fff 0%,#fffafb 22%,#fff8fa 62%,#fff 100%);
  border:0;
  isolation:isolate;
}
.tool-page-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 36% 94% at -6% 62%,rgba(255,59,106,.14) 0%,rgba(255,96,135,.06) 44%,transparent 82%),
    radial-gradient(ellipse 36% 94% at 106% 62%,rgba(255,59,106,.14) 0%,rgba(255,96,135,.06) 44%,transparent 82%),
    radial-gradient(ellipse 25% 62% at 50% 18%,rgba(255,100,144,.04),transparent 88%);
  animation:heroAmbientBreath 13s ease-in-out infinite alternate;
}
@keyframes heroAmbientBreath{0%{opacity:.72;filter:saturate(.95)}100%{opacity:1;filter:saturate(1.13)}}
.tool-page-hero .section-badge{margin:0 auto}
.tool-page-hero h1{max-width:960px;margin:18px auto 12px;font-size:clamp(35px,4vw,50px)}
.tool-page-hero p{max-width:690px;margin:0 auto 14px}
.tool-page-content{position:relative}
.tool-workspace-layout{
  display:flex;flex-direction:column;align-items:center;gap:24px;
  width:100%;max-width:920px;margin:0 auto;
}
.tool-workspace{width:100%;max-width:none;padding:35px 39px;border-radius:23px;box-shadow:0 16px 45px rgba(35,41,69,.055)}
.tool-guides{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}
.guide-panel{border:1px solid #eaecf3;border-radius:18px;background:#fff;padding:24px 26px;box-shadow:0 9px 27px rgba(35,42,72,.032);min-width:0}
.guide-kicker{font-size:11px;font-weight:900;letter-spacing:.11em;color:#e92451}
.guide-panel h3{font-size:20px;font-weight:900;letter-spacing:-.55px;margin:10px 0 21px}
.tool-guides>.guide-panel:first-child{grid-column:1/-1;text-align:center;padding:29px 31px}
.step-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin:0;padding:0;list-style:none;text-align:left}
.step-list li{display:flex;align-items:flex-start;gap:12px;min-height:89px;padding:17px 15px;border:1px solid #f6e8ed;border-radius:13px;background:linear-gradient(145deg,#fffafd,#fff)}
.step-list li:not(:last-child)::before{display:none}
.step-list li>span{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,#ff617d,#db0d40);color:#fff;font-size:12px;font-weight:900;box-shadow:0 5px 12px rgba(231,31,73,.12)}
.step-list li p{margin:2px 0 0;color:#657087;font-size:12px;line-height:1.6}
.guide-note{background:linear-gradient(135deg,#fff8fa,#fff 73%)}
.guide-note strong{display:block;margin:12px 0 7px;font-size:16px}
.guide-note p{font-size:13px;line-height:1.7;color:#68748a;margin:0}
.guide-nav{display:flex;flex-direction:column;justify-content:center}
.guide-nav a{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#e51c4a;font-size:14px;font-weight:800;margin-top:16px}
.guide-nav a:hover{color:#ad0d35}
.explain-section{max-width:960px;margin:0 auto;padding:68px 0 58px}
.related-section{max-width:1140px;margin:0 auto}
body.dark .tool-page-hero{background:linear-gradient(180deg,#151822,#1b1b27 57%,#151822)}
body.dark .guide-panel{background:#202533;color:#f5f6f8;border-color:#3b4050}
body.dark .guide-note{background:linear-gradient(140deg,#292432,#202533)}
body.dark .step-list li{background:#252936;border-color:#3b4050}
body.dark .step-list li p,body.dark .guide-note p{color:#b2bdce}
@media(max-width:800px){
  .tool-page-hero{min-height:0;padding:37px 20px 42px;margin-bottom:17px}
  .tool-workspace-layout{max-width:100%}
  .tool-workspace{padding:26px}
  .tool-guides{grid-template-columns:1fr}
  .tool-guides>.guide-panel:first-child{grid-column:auto}
  .step-list{grid-template-columns:1fr}
  .step-list li{min-height:0}
  .explain-section{padding:54px 0}
}
@media(max-width:530px){
  .tool-page-hero{padding:32px 19px 37px}
  .tool-page-hero h1{font-size:34px;letter-spacing:-1.2px}
  .tool-workspace{padding:21px 17px;border-radius:18px}
  .guide-panel,.tool-guides>.guide-panel:first-child{padding:22px 19px;text-align:left}
  .guide-panel h3{font-size:18px;margin-bottom:16px}
  .step-list li{padding:14px}
}
@media(prefers-reduced-motion:reduce){.tool-page-hero::before{animation:none}}