/* Shared tool workspace: keep native controls and each tool's existing interactions. */
.tools-workspace .toolhead{position:relative;isolation:isolate;overflow:hidden;min-height:190px;padding:32px clamp(20px,4vw,48px);border:1px solid var(--border);border-radius:22px;background:linear-gradient(120deg,var(--surface,#f2f6fa),var(--bg,#fff));margin-bottom:24px;align-items:center}
.tools-workspace .toolhead:after{content:'{ }';z-index:-1;position:absolute;right:3%;top:0;font:bold 150px/1.2 monospace;letter-spacing:-.15em;color:#748cbe;opacity:.12;transform:rotate(-12deg)}
.tools-workspace .toolhead h1{font-size:clamp(1.8rem,4vw,2.6rem);letter-spacing:-.045em;margin-bottom:12px}.tools-workspace .toolhead p{max-width:740px;line-height:1.8}.tools-workspace select{appearance:none;background-color:var(--surface,#fff);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23657990' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;border:1px solid var(--border,#ccd4df);border-radius:10px;padding:10px 38px 10px 14px;min-height:44px;color:var(--text);font:inherit;max-width:100%}
.tools-workspace input:focus-visible,.tools-workspace select:focus-visible,.tools-workspace textarea:focus-visible{outline:3px solid #718fe0;outline-offset:3px}.tools-workspace .card{border-radius:16px}.tool-guide{margin-top:42px;border-top:1px solid var(--border);padding-top:28px}.tool-guide>.card{border-left:3px solid #7e94c3}.tool-guide h2{font-size:1.2rem}.tool-guide p{line-height:1.85;max-width:85ch}.tool-guide-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}.tool-guide-tabs a{padding:10px 17px;border:1px solid var(--border);border-radius:30px;color:var(--text);text-decoration:none;font-weight:700}.tool-guide details{padding:14px 0}.tool-guide summary{cursor:pointer;font-weight:650}.tool-guide [id]{scroll-margin-top:90px}
@media(max-width:600px){.tools-workspace .toolhead{display:block;padding:24px 20px}.tools-workspace .localbadge{display:inline-block;margin-top:12px}.tool-guide-tabs a{font-size:.82rem;padding:9px 12px}}
.tool-example-eyebrow{font-size:.65rem;letter-spacing:.18em;font-weight:800;color:#66859c}.tool-example-flow{display:grid;grid-template-columns:1fr 36px 1fr;align-items:stretch;gap:14px;margin:22px 0}.tool-example-flow>div{min-width:0;padding:22px;background:var(--surface,#eff4f7);border:1px solid var(--border);border-radius:12px}.tool-example-flow>span{align-self:center;text-align:center;font-size:1.6rem;color:#7696a8}.tool-example-flow h3{font-size:.72rem;margin:0 0 14px;color:var(--text-muted);letter-spacing:.05em}.tool-example-flow pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.92rem;margin:0}.tool-example-flow p{margin:0}.tool-example-note{padding:12px 16px;border-left:3px solid #d3ae6b;font-size:.84rem;background:var(--surface,#faf7ee)}@media(max-width:600px){.tool-example-flow{grid-template-columns:1fr}.tool-example-flow>span{transform:rotate(90deg)}}
.tools-hub-hero{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;padding:32px;border-radius:24px;background:#f4f0e8;color:#243c36;margin-bottom:30px;overflow:hidden}.tools-hub-hero h1{font-size:clamp(2rem,4vw,3.25rem);line-height:1.22;letter-spacing:-.055em}.experience-art{display:block;width:100%;height:auto;object-fit:cover;border-radius:14px}.experience-eyebrow{font-size:.65rem;letter-spacing:.13em;color:#6c8776}.tools-hub-hero .pagehead__desc{color:#54675e}.tools-workspace .toolcard{padding:20px;gap:16px;min-height:100px}.tools-workspace .toolcard__icon{width:50px;height:50px;border-radius:15px;background:#dce9e4;color:#35574c}.tools-workspace .toolcard__url{font-size:.7rem;opacity:.65}.tools-workspace .toolhead:after{content:'';width:210px;height:170px;top:10px;right:10px;transform:rotate(-6deg);background:url('../images/experience/it-workshop-v1.webp') center/cover;border-radius:24px;opacity:.16}
@media(max-width:650px){.tools-hub-hero{grid-template-columns:1fr;padding:24px}.tools-hub-hero .experience-art{max-height:250px;object-position:center 60%}}