.tools-directory-groups,.tool-related{display:grid;gap:30px;margin-top:30px}.tools-directory-section,.tools-directory-cta,.tool-mini-canvas,.tool-related{border:1px solid rgba(203,213,225,.76);border-radius:10px;background:#ffffffe6;box-shadow:var(--soft-shadow)}.tools-directory-section,.tool-related{padding:20px}.tools-directory-head h2,.tool-home-hero h1,.tool-mini-head h2{margin:0;color:#0f172a;font-weight:900;letter-spacing:0}.tools-directory-head p,.tool-mini-head p{margin:8px 0 0;color:#475569;line-height:1.65}.tools-directory-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:18px}.tools-directory-card,.related-tool-card{min-height:210px;display:grid;align-content:start;gap:12px;padding:16px;border:1px solid rgba(203,213,225,.78);border-radius:9px;background:#fff;color:#1e293b;text-align:left}.tools-directory-card h3,.related-tool-card strong{margin:0;color:#0f172a;font-size:18px;line-height:1.25}.tools-directory-card p,.related-tool-card small{margin:0;color:#475569;line-height:1.6}.tools-directory-card .btn{width:fit-content;margin-top:auto}.tool-live-link{width:fit-content;min-height:30px;display:inline-flex;align-items:center;gap:6px;padding:0 9px;border:1px solid rgba(15,118,110,.18);border-radius:8px;color:#0f766e;background:#f0fdfa;font-size:12px;font-weight:850;text-decoration:none}.tool-card-topline,.related-tool-card span{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#0f766e;font-size:12px;font-weight:850;text-transform:uppercase;letter-spacing:.08em}.tools-directory-cta{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:32px;padding:22px;color:#fff;background:#0f172a}.tools-directory-cta h2{margin:0;font-size:24px}.tools-directory-cta p{max-width:760px;margin:8px 0 0;color:#cbd5e1;line-height:1.65}.tools-directory-cta .btn{flex:0 0 auto;color:#0f172a;background:#fff}.tool-home-hero{display:grid;gap:12px;padding-top:4px}.tool-home-hero h1{max-width:900px;font-size:clamp(34px,5vw,62px);line-height:1}.tool-home-hero p{max-width:800px;margin:0;color:#334155;font-size:18px;line-height:1.75}.tool-back-button{width:fit-content;min-height:36px;display:inline-flex;align-items:center;gap:8px;padding:0 12px;border:1px solid rgba(203,213,225,.8);border-radius:9px;color:#334155;background:#fff;cursor:pointer;font-weight:800;text-decoration:none}.tool-privacy-note{width:fit-content;padding:8px 12px;border:1px solid rgba(15,118,110,.18);border-radius:9px;color:#0f766e;background:#f0fdfae0;font-size:13px;font-weight:800}.tool-hero-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.tool-live-pill{width:fit-content;min-height:35px;display:inline-flex;align-items:center;gap:7px;padding:0 12px;border:1px solid rgba(37,99,235,.2);border-radius:9px;color:#1d4ed8;background:#eff6ff;font-size:13px;font-weight:850;text-decoration:none}.tool-mini-canvas{margin-top:28px;padding:18px}.tool-mini-head,.tool-mini-toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.tool-mini-badges,.tool-mini-actions,.tool-node-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.tool-mini-badges span{min-height:30px;display:inline-flex;align-items:center;padding:0 10px;border:1px solid rgba(37,99,235,.18);border-radius:999px;color:#1d4ed8;background:#eff6ff;font-size:12px;font-weight:850}.tool-mini-surface{margin-top:18px;padding:14px;border:1px solid rgba(148,163,184,.34);border-radius:10px;background:linear-gradient(rgba(148,163,184,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.12) 1px,transparent 1px),#f8fafc;background-size:28px 28px}.tool-mini-toolbar{align-items:center;padding:12px;border:1px solid rgba(203,213,225,.78);border-radius:9px;background:#fffffff0}.tool-mini-toolbar strong,.tool-mini-toolbar span{display:block}.tool-mini-toolbar strong{color:#0f172a}.tool-mini-toolbar span{margin-top:3px;color:#64748b;font-size:13px}.tool-canvas-grid{display:grid;grid-template-columns:minmax(280px,.95fr) minmax(320px,1.15fr);grid-template-areas:"source result" "readout result" "lesson next";gap:14px;margin-top:14px}.tool-canvas-node{min-width:0;display:grid;gap:12px;padding:14px;border:1px solid rgba(203,213,225,.82);border-radius:9px;background:#fffffff5;box-shadow:0 12px 28px #0f172a12}.tool-canvas-node--source{grid-area:source}.tool-canvas-node--result{grid-area:result}.tool-canvas-node--readout{grid-area:readout}.tool-canvas-node--lesson{grid-area:lesson}.tool-canvas-node--next{grid-area:next}.tool-node-title{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.tool-node-title span{color:#0f766e;font-size:11px;font-weight:850;text-transform:uppercase;letter-spacing:.08em}.tool-node-title h3{margin:4px 0 0;color:#0f172a;font-size:18px;line-height:1.25}.tool-canvas-node textarea,.tool-rendered-preview,.clipboard-tool textarea{width:100%;min-height:250px;padding:14px;border:1px solid rgba(203,213,225,.92);border-radius:8px;color:#1e293b;background:#fff;resize:vertical}.tool-file-open{min-height:38px;width:fit-content;max-width:100%;display:inline-flex;align-items:center;gap:8px;padding:0 12px;border:1px solid rgba(59,130,246,.24);border-radius:8px;color:#1d4ed8;background:#eff6ff;font-size:13px;font-weight:850;cursor:pointer}.tool-file-open input{display:none}.tool-file-open span{overflow-wrap:anywhere}.tool-file-status{min-height:28px;display:inline-flex;align-items:center;width:fit-content;max-width:100%;padding:0 10px;border-radius:999px;color:#334155;background:#f1f5f9;font-size:12px;font-weight:750}.tool-canvas-node--result textarea,.tool-rendered-preview{min-height:460px}.tool-canvas-node ul{margin:0;padding-left:19px;color:#334155;line-height:1.65}.tool-canvas-node p{margin:0;color:#475569;line-height:1.65}.tool-rendered-preview{overflow:auto}.tool-rendered-preview h2,.tool-rendered-preview h3,.tool-rendered-preview h4,.tool-rendered-preview p{margin:0 0 12px}.tool-rendered-preview h2{font-size:28px;line-height:1.15}.tool-rendered-preview h3{font-size:21px}.tool-copy-feedback{min-height:30px;display:inline-flex;align-items:center;width:fit-content;padding:0 10px;border-radius:999px;color:#166534;background:#dcfce7;font-size:12px;font-weight:850}.spin-icon{animation:spinIcon .8s linear infinite}@keyframes spinIcon{to{transform:rotate(360deg)}}@media(max-width:960px){.tool-canvas-grid{grid-template-columns:1fr;grid-template-areas:"source" "result" "readout" "lesson" "next"}.tool-mini-head,.tool-mini-toolbar,.tools-directory-cta{align-items:stretch;flex-direction:column}}