.sv-public-tools-shell.sv-tools-directory { width:min(1240px,calc(100% - 40px)); padding-bottom:50px; }
.sv-tools-directory *, .sv-tools-directory *::before, .sv-tools-directory *::after { box-sizing:border-box; }
.sv-tools-showcase { position:relative; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr); gap:35px; align-items:center; padding:42px; border:1px solid #c5d9f4; border-radius:21px; background:radial-gradient(ellipse at 95% 15%,#d5e5ff,transparent 60%),linear-gradient(115deg,#f4f8ff,#e9f2ff); color:#142d51; overflow:hidden; box-shadow:0 12px 34px rgba(35,78,139,.08); }
.sv-tools-showcase-copy { position:relative; z-index:1; min-width:0; }
.sv-tools-showcase-eyebrow { display:inline-flex; align-items:center; gap:7px; padding:6px 10px; border:1px solid #cfddf1; border-radius:7px; background:#ffffffb5; color:#375f98; font-size:9px; font-weight:800; letter-spacing:.1em; }
.sv-tools-showcase-eyebrow .sv-icon { width:15px; height:15px; }
.sv-tools-showcase h1 { margin:20px 0 16px; color:#142d51; font-size:clamp(32px,3.8vw,49px); line-height:1.12; letter-spacing:-1.4px; font-weight:850; }
.sv-tools-showcase h1 em { color:#0769e7; font-style:normal; }
.sv-tools-showcase-copy > p { max-width:500px; margin:0 0 22px; color:#526d91; font-size:14px; line-height:1.75; }
.sv-tools-showcase-button { display:inline-flex; align-items:center; gap:12px; min-height:44px; padding:11px 17px; border:1px solid #0868f3; border-radius:9px; color:#fff; background:#0868f3; font-size:12px; font-weight:750; box-shadow:0 6px 16px #0868f32b; }
.sv-tools-showcase-button:hover { color:#fff; background:#075ace; }
.sv-tools-showcase-button .sv-icon { width:17px; height:17px; }
.sv-tools-showcase-facts { display:flex; flex-wrap:wrap; gap:14px 20px; align-items:center; margin-top:25px; color:#587395; font-size:11px; }
.sv-tools-showcase-facts > span { display:inline-flex; align-items:center; gap:5px; }
.sv-tools-showcase-facts strong { color:#233f68; font-size:14px; }
.sv-tools-showcase-facts .sv-icon { width:14px; height:14px; color:#27886a; }
.sv-tools-showcase-art { position:relative; min-width:0; display:grid; place-items:center; min-height:330px; }
.sv-tools-orbit { position:absolute; pointer-events:none; border:1px solid #9bbdec55; border-radius:50%; }
.sv-tools-orbit.orbit-one { width:340px; height:340px; transform:rotate(-20deg); }
.sv-tools-orbit.orbit-two { width:420px; height:230px; transform:rotate(-25deg); }
.sv-tools-mini-calculator { position:relative; width:min(315px,100%); padding:20px; border:1px solid #b7ccec; border-radius:16px; background:linear-gradient(145deg,#fff,#f5f9ff); box-shadow:0 20px 38px rgba(36,77,131,.14); transform:rotate(3deg); }
.sv-tools-mini-calculator > header { display:flex; align-items:center; gap:10px; padding-bottom:15px; margin-bottom:10px; border-bottom:1px solid #dce6f4; }
.sv-tools-mini-calculator > header > span:first-child { display:grid; place-items:center; flex:0 0 33px; height:33px; color:#0769e7; background:#e8f1ff; border-radius:9px; }
.sv-tools-mini-calculator .sv-icon { width:20px; height:20px; }
.sv-tools-mini-calculator header strong { display:block; color:#23436e; font-size:12px; }
.sv-tools-mini-calculator header small { display:block; margin-top:3px; color:#7d92ad; font-size:9px; }
.sv-tools-mini-dot { width:7px; height:7px; margin-left:auto; border-radius:50%; background:#54ad87; }
.sv-tools-mini-row { display:flex; justify-content:space-between; gap:15px; padding:7px 0; color:#6c82a0; font-size:11px; }
.sv-tools-mini-row b { color:#294c79; font-size:12px; }
.sv-tools-mini-total { margin-top:10px; padding:14px; border:1px solid #caddf7; border-radius:9px; background:#eaf2ff; text-align:right; }
.sv-tools-mini-total > span { display:block; color:#6583aa; font-size:9px; }
.sv-tools-mini-total strong { display:block; margin-top:5px; color:#1457b5; font-size:28px; letter-spacing:-.7px; }
.sv-tools-mini-total small { display:block; margin-top:5px; color:#6e87a7; font-size:9px; }
.sv-tools-mini-keys { display:grid; grid-template-columns:repeat(5,1fr); gap:7px; margin-top:15px; }
.sv-tools-mini-keys span { display:grid; place-items:center; min-height:30px; border:1px solid #d8e4f4; border-radius:5px; background:#f2f6fd; color:#7991b0; font-size:14px; }
.sv-tools-mini-keys span:last-child { border-color:#0868f3; background:#0868f3; color:#fff; }
.sv-tools-art-tag { position:absolute; display:flex; align-items:center; gap:8px; padding:9px 12px; border:1px solid #d1dff2; border-radius:9px; color:#355a8e; background:#fff; box-shadow:0 8px 18px rgba(37,77,127,.12); font-size:10px; font-weight:650; }
.sv-tools-art-tag .sv-icon { width:16px; height:16px; }
.sv-tools-art-tag.art-tag-music { left:0; bottom:36px; transform:rotate(-7deg); color:#7b46bd; }
.sv-tools-art-tag.art-tag-energy { right:-5px; top:22px; transform:rotate(6deg); color:#297c6a; }
.sv-tools-library { margin-top:36px; scroll-margin-top:20px; }
.sv-tools-library-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:20px; }
.sv-tools-section-eyebrow { color:var(--blue); font-size:9px; letter-spacing:.13em; font-weight:800; }
.sv-tools-library-heading h2 { margin:7px 0; color:var(--ink); font-size:26px; line-height:1.3; letter-spacing:-.5px; }
.sv-tools-library-heading p { margin:0; color:var(--muted); font-size:12px; }
.sv-tools-live-count { flex:0 0 auto; padding:7px 10px; border:1px solid var(--line); border-radius:7px; color:var(--muted); background:var(--surface); font-size:10px; }
.sv-tools-discovery-controls { display:grid; gap:15px; }
.sv-tools-discovery-controls[hidden],.sv-tools-directory-card[hidden],.sv-tools-search-empty[hidden],.sv-tools-search button[hidden] { display:none !important; }
.sv-tools-search { display:flex; align-items:center; gap:11px; min-height:52px; padding:0 15px; border:1px solid var(--line); border-radius:11px; background:var(--surface); box-shadow:0 3px 12px rgba(26,53,87,.025); }
.sv-tools-search > .sv-icon { width:20px; height:20px; flex:0 0 20px; color:var(--muted); }
.sv-tools-search input { flex:1; width:100%; min-width:0; min-height:50px; padding:10px 0; border:0; outline:0; color:var(--ink); background:transparent; font:14px/1.5 Inter,Arial,sans-serif; }
.sv-tools-search input::placeholder { color:var(--muted); opacity:.8; }
.sv-tools-search input::-webkit-search-cancel-button { -webkit-appearance:none; }
.sv-tools-search:focus-within { border-color:var(--blue); box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 10%,transparent); }
.sv-tools-search button { width:29px; height:29px; flex:0 0 29px; border:0; border-radius:6px; color:var(--muted); background:var(--soft); font-size:21px; cursor:pointer; }
.sv-tools-filters { display:flex; flex-wrap:wrap; gap:8px; }
.sv-tools-filters button { display:inline-flex; align-items:center; gap:7px; min-height:39px; padding:8px 11px; border:1px solid var(--line); border-radius:8px; color:var(--muted); background:var(--surface); font:650 11px/1.4 Inter,Arial,sans-serif; cursor:pointer; }
.sv-tools-filters .sv-icon { width:15px; height:15px; }
.sv-tools-filters button > span { display:inline-grid; place-items:center; min-width:20px; padding:2px 5px; border-radius:5px; color:inherit; background:var(--soft); font-size:9px; }
.sv-tools-filters button.is-active { border-color:#0868f3; color:#fff; background:#0868f3; box-shadow:0 3px 9px #0868f326; }
.sv-tools-filters button.is-active > span { background:#ffffff24; }
.sv-tools-directory .sv-tools-directory-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:17px; margin-top:22px; }
.sv-tools-directory-card { --tool-accent:#2c76d9; --tool-icon-bg:#e9f2ff; --tool-muted-accent:#466b9d; position:relative; min-height:304px; padding:22px; border-radius:13px; background:var(--surface); transition:transform .16s,border-color .16s,box-shadow .16s; overflow:hidden; }
.sv-tools-directory-card.tone-amber { --tool-accent:#b5781b; --tool-icon-bg:#fff2d8; --tool-muted-accent:#936820; }
.sv-tools-directory-card.tone-green { --tool-accent:#22876f; --tool-icon-bg:#e4f4ed; --tool-muted-accent:#367c68; }
.sv-tools-directory-card.tone-purple { --tool-accent:#8555c6; --tool-icon-bg:#f1e9fb; --tool-muted-accent:#7855a8; }
.sv-tools-directory-card::before { position:absolute; top:0; left:22px; right:22px; height:3px; border-radius:0 0 4px 4px; background:var(--tool-accent); opacity:.75; content:''; }
.sv-tools-directory-card:hover { border-color:color-mix(in srgb,var(--tool-accent) 45%,var(--line)); transform:translateY(-3px); box-shadow:0 11px 26px rgba(27,57,91,.1); }
.sv-tools-card-top { display:flex; justify-content:space-between; align-items:center; gap:9px; width:100%; }
.sv-tools-directory-card .sv-tools-tool-icon { flex:0 0 46px; width:46px; height:46px; border-radius:11px; color:var(--tool-accent); background:var(--tool-icon-bg); }
.sv-tools-directory-card .sv-tools-tool-icon .sv-icon { width:26px; height:26px; }
.sv-tools-card-group { padding:5px 8px; border:1px solid color-mix(in srgb,var(--tool-accent) 13%,var(--line)); border-radius:6px; color:var(--tool-muted-accent); background:color-mix(in srgb,var(--tool-icon-bg) 65%,var(--surface)); font-size:9px; font-weight:650; }
.sv-tools-directory-card h3 { margin:17px 0 10px; color:var(--ink); font-size:18px; line-height:1.35; font-weight:750; letter-spacing:-.25px; }
.sv-tools-directory-card > p { margin:0 0 17px; color:var(--muted); font-size:12px; line-height:1.7; }
.sv-tools-card-helper { display:flex; align-items:flex-start; gap:6px; margin-top:auto; margin-bottom:14px; color:var(--muted); font-size:10px; line-height:1.5; }
.sv-tools-card-helper .sv-icon { flex:0 0 13px; width:13px; height:13px; margin-top:1px; color:var(--tool-accent); }
.sv-tools-launch { display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%; min-height:38px; padding:9px 11px; border:1px solid color-mix(in srgb,var(--tool-accent) 18%,var(--line)); border-radius:7px; color:var(--tool-muted-accent); background:color-mix(in srgb,var(--tool-icon-bg) 65%,var(--surface)); font-size:11px; font-weight:750; }
.sv-tools-launch::after { position:absolute; inset:0; content:''; }
.sv-tools-launch .sv-icon { width:15px; height:15px; }
.sv-tools-launch:hover { color:var(--tool-muted-accent); }
.sv-tools-directory-card:focus-within { outline:2px solid var(--blue); outline-offset:3px; }
.sv-tools-search-empty { margin-top:22px; padding:35px 20px; border:1px dashed var(--line); border-radius:12px; text-align:center; background:var(--surface); }
.sv-tools-search-empty > span { display:grid; place-items:center; width:50px; height:50px; margin:0 auto 12px; border-radius:13px; color:var(--blue); background:var(--soft); }
.sv-tools-search-empty .sv-icon { width:25px; height:25px; }
.sv-tools-search-empty h3 { color:var(--ink); font-size:18px; }
.sv-tools-search-empty p { color:var(--muted); font-size:12px; }
.sv-tools-search-empty button { padding:10px 14px; border:1px solid var(--line); border-radius:7px; color:var(--blue); background:var(--soft); font:650 12px Inter,Arial,sans-serif; cursor:pointer; }
.sv-tools-how { display:grid; grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr); gap:30px; margin-top:32px; padding:26px; border:1px solid var(--line); border-radius:13px; background:var(--surface); }
.sv-tools-how h2 { margin:8px 0 0; color:var(--ink); font-size:24px; line-height:1.3; }
.sv-tools-how ol { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; padding:0; margin:0; list-style:none; }
.sv-tools-how li { display:flex; align-items:flex-start; gap:9px; }
.sv-tools-how li > b { color:var(--blue); font-size:11px; padding:6px; background:var(--soft); border-radius:6px; }
.sv-tools-how li strong { display:block; color:var(--ink); font-size:12px; }
.sv-tools-how li p { margin:5px 0 0; color:var(--muted); font-size:10px; line-height:1.6; }
[data-theme='dark'] .sv-tools-showcase { border-color:#304e74; background:radial-gradient(ellipse at 95% 10%,#193959,transparent 65%),linear-gradient(115deg,#14253b,#172b43); box-shadow:0 12px 34px rgba(0,0,0,.12); }
[data-theme='dark'] .sv-tools-showcase h1 { color:#e6efff; }
[data-theme='dark'] .sv-tools-showcase h1 em { color:#79b6ff; }
[data-theme='dark'] .sv-tools-showcase-copy > p,[data-theme='dark'] .sv-tools-showcase-facts { color:#abc0dc; }
[data-theme='dark'] .sv-tools-showcase-facts strong { color:#d6e6ff; }
[data-theme='dark'] .sv-tools-showcase-eyebrow { color:#a6c9f8; background:#223b59; border-color:#3a5576; }
[data-theme='dark'] .sv-tools-mini-calculator { border-color:#44618a; background:linear-gradient(145deg,#253d5b,#1b304a); }
[data-theme='dark'] .sv-tools-mini-calculator > header { border-color:#3b5272; }
[data-theme='dark'] .sv-tools-mini-calculator header strong,[data-theme='dark'] .sv-tools-mini-row b { color:#dceaff; }
[data-theme='dark'] .sv-tools-mini-calculator header small,[data-theme='dark'] .sv-tools-mini-row { color:#a6bad5; }
[data-theme='dark'] .sv-tools-mini-total { border-color:#45648b; background:#2b4565; }
[data-theme='dark'] .sv-tools-mini-total strong { color:#abd0ff; }
[data-theme='dark'] .sv-tools-mini-total > span,[data-theme='dark'] .sv-tools-mini-total small { color:#b3c7e0; }
[data-theme='dark'] .sv-tools-mini-keys span { border-color:#3c5576; background:#243c59; color:#aac0df; }
[data-theme='dark'] .sv-tools-mini-keys span:last-child { background:#0868f3; color:#fff; }
[data-theme='dark'] .sv-tools-art-tag { border-color:#496181; background:#253d59; color:#c4d9f7; }
[data-theme='dark'] .sv-tools-directory-card { --tool-accent:#82b5fa; --tool-icon-bg:#203754; --tool-muted-accent:#b0d0fa; }
[data-theme='dark'] .sv-tools-directory-card.tone-amber { --tool-accent:#e5bd72; --tool-icon-bg:#3a3225; --tool-muted-accent:#e5c68e; }
[data-theme='dark'] .sv-tools-directory-card.tone-green { --tool-accent:#85d3b8; --tool-icon-bg:#223c37; --tool-muted-accent:#9ad8c3; }
[data-theme='dark'] .sv-tools-directory-card.tone-purple { --tool-accent:#bf9ae8; --tool-icon-bg:#332a46; --tool-muted-accent:#ceb0f0; }
@media(max-width:1050px) {
  .sv-tools-showcase { gap:22px; padding:30px; }
  .sv-tools-directory .sv-tools-directory-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sv-tools-how { grid-template-columns:1fr; gap:20px; }
}
@media(max-width:720px) {
  .sv-public-tools-shell.sv-tools-directory { width:calc(100% - 24px); padding-bottom:30px; }
  .sv-tools-showcase { grid-template-columns:minmax(0,1fr); padding:24px 21px; gap:18px; border-radius:16px; }
  .sv-tools-showcase h1 { font-size:37px; letter-spacing:-.9px; }
  .sv-tools-showcase-copy > p { font-size:13px; }
  .sv-tools-showcase-art { min-height:205px; max-width:340px; width:100%; justify-self:center; }
  .sv-tools-mini-calculator { width:min(265px,calc(100% - 25px)); padding:16px; }
  .sv-tools-mini-row,.sv-tools-mini-keys { display:none; }
  .sv-tools-orbit.orbit-one { width:235px; height:205px; }
  .sv-tools-orbit.orbit-two { width:300px; height:165px; }
  .sv-tools-art-tag { font-size:9px; padding:7px 9px; }
  .sv-tools-art-tag.art-tag-music { left:-3px; bottom:15px; }
  .sv-tools-art-tag.art-tag-energy { right:0; top:8px; }
  .sv-tools-library-heading { align-items:flex-start; flex-direction:column; gap:12px; }
  .sv-tools-library-heading h2 { font-size:23px; }
  .sv-tools-filters { gap:7px; }
  .sv-tools-filters button { padding:8px 9px; min-height:41px; font-size:10px; }
  .sv-tools-directory .sv-tools-directory-grid { grid-template-columns:minmax(0,1fr); }
  .sv-tools-directory-card { min-height:0; padding:21px; }
  .sv-tools-directory-card h3 { font-size:19px; }
  .sv-tools-card-helper { margin-top:0; }
  .sv-tools-how { padding:21px; }
  .sv-tools-how ol { grid-template-columns:1fr; gap:18px; }
}
@media(prefers-reduced-motion:reduce) { .sv-tools-directory-card { transition:none; } .sv-tools-directory-card:hover { transform:none; } }