/* A three-tool front door. Existing tool controls and hero styles stay intact. */
.tool-home, .workspace-nav { grid-column: 1 / -1; min-width: 0; scroll-margin-top: 100px; }
.tool-home { padding-bottom: 38px; }
.tool-home-heading { text-align: center; margin: 0 auto 30px; }
.tool-home-kicker { display: block; color: var(--accent); font: 700 .7rem var(--font-mono); letter-spacing: .22em; text-transform: uppercase; margin-bottom: 12px; }
.tool-home-heading h2 { font: 650 clamp(1.65rem, 3vw, 2.4rem)/1.2 var(--font-display); letter-spacing: -.035em; margin: 0 0 12px; }
.tool-home-heading p { color: var(--text-muted); font-size: .95rem; margin: 0; }
.tool-launch-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.tool-launch-card {
  --tool-color: #ffc85a; --tool-rgb: 255, 200, 90; --tool-surface: #201d23; --tool-end: #121a25;
  appearance: none; position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: stretch; text-align: left;
  padding: 26px; min-width: 0; border: 1px solid transparent; border-radius: 25px;
  background: linear-gradient(145deg, var(--tool-surface), var(--tool-end)) padding-box,
    linear-gradient(145deg, rgba(var(--tool-rgb), .85), rgba(var(--tool-rgb), .14) 52%, rgba(var(--tool-rgb), .6)) border-box;
  color: var(--text); box-shadow: 0 16px 38px rgba(0, 0, 0, .17), 0 0 22px rgba(var(--tool-rgb), .035);
  font-family: var(--font-body); cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}
.tool-launch-card[data-open-tool="split"] { --tool-color: #7de5de; --tool-rgb: 125,229,222; --tool-surface: #13272d; --tool-end: #131c2c; }
.tool-launch-card[data-open-tool="merge"] { --tool-color: #bfa2ff; --tool-rgb: 191,162,255; --tool-surface: #292139; --tool-end: #171c2c; }
.tool-launch-card::before { content: ''; position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse at 90% 0%, rgba(var(--tool-rgb), .11), transparent 65%); pointer-events: none; }
.tool-launch-card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(0,0,0,.22), 0 0 28px rgba(var(--tool-rgb), .12); }
.tool-launch-card:active { transform: translateY(-1px); }
.tool-launch-card:focus-visible { outline: 3px solid var(--tool-color); outline-offset: 5px; }
.tool-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--tool-color); }
.tool-category { font: 600 .65rem var(--font-mono); text-transform: uppercase; letter-spacing: .14em; }
.tool-card-number { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(var(--tool-rgb),.24); border-radius: 50%; font: .68rem var(--font-mono); }
.tool-art { display: block; width: 100%; height: 142px; margin: 16px 0 14px; color: var(--tool-color); }
.tool-art .art-paper { fill: rgba(var(--tool-rgb), .06); stroke: currentColor; stroke-width: 1.2; }
.tool-art .art-faint { opacity: .38; }
.tool-art .art-line { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.tool-art .art-highlight { fill: rgba(var(--tool-rgb), .19); }
.tool-card-title { display: block; font: 700 clamp(1.6rem, 2.3vw, 2rem)/1.2 var(--font-display); letter-spacing: -.03em; margin-bottom: 13px; }
.tool-card-hook { display: block; font-size: .99rem; font-weight: 650; color: var(--tool-color); margin-bottom: 9px; }
.tool-card-description { display: block; font-size: .93rem; line-height: 1.75; color: var(--text-muted); margin-bottom: 26px; }
.tool-card-action { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid rgba(var(--tool-rgb), .16); padding-top: 19px; margin-top: auto; font-size: .86rem; font-weight: 700; color: var(--tool-color); }
.tool-action-arrow { display: grid; place-items: center; border-radius: 50%; width: 32px; height: 32px; background: rgba(var(--tool-rgb), .12); transition: transform .25s ease; font-size: 1.15rem; }
.tool-launch-card:hover .tool-action-arrow { transform: translateX(3px); }
.tool-home-note { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 24px 0 0; color: var(--text-faint); font-size: .8rem; text-align: center; }
.tool-home-note svg { flex-shrink: 0; color: var(--accent); }
.workspace-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding: 6px 0 14px; }
.back-to-tools { display: inline-flex; align-items: center; gap: 9px; padding: 10px 14px; background: var(--bg-card-2); color: var(--text-muted); border: 1px solid var(--border); border-radius: 12px; font: 600 .8rem var(--font-body); cursor: pointer; }
.back-to-tools:hover { color: var(--text); border-color: var(--accent); }
.workspace-title { margin: 0; font: 700 1.25rem var(--font-display); letter-spacing: -.02em; }
.workspace-title:focus { outline: none; }
.workspace-tools { display: flex; flex-wrap: wrap; gap: 5px; padding: 5px; margin-left: auto; background: var(--bg-card); border: 1px solid var(--border); border-radius: 15px; }
.workspace-tools button { background: none; color: var(--text-muted); border: 1px solid transparent; border-radius: 10px; padding: 10px 14px; font: 600 .78rem var(--font-body); cursor: pointer; }
.workspace-tools button:hover { color: var(--text); background: var(--bg-hover); }
.workspace-tools button[aria-current="page"] { background: var(--accent-soft); color: var(--accent); border-color: var(--border-strong); }
.app-container[data-active-tool="split"] .splitter-card .step-badge,
.app-container[data-active-tool="merge"] .merger-card .step-badge { display: none; }
[data-theme="light"] .tool-launch-card { --tool-color: #97540c; --tool-rgb: 180,107,21; --tool-surface: #fff6e6; --tool-end: #fffdf7; }
[data-theme="light"] .tool-launch-card[data-open-tool="split"] { --tool-color: #087c7b; --tool-rgb: 19,150,143; --tool-surface: #e9f8f4; --tool-end: #f9fffc; }
[data-theme="light"] .tool-launch-card[data-open-tool="merge"] { --tool-color: #7650b7; --tool-rgb: 134,88,196; --tool-surface: #f1eafa; --tool-end: #fdfaff; }
@media (max-width: 980px) {
  .tool-launch-grid { gap: 14px; }
  .tool-launch-card { padding: 20px; }
  .tool-category { font-size: .57rem; letter-spacing: .1em; }
  .workspace-title { font-size: 1.1rem; }
}
@media (max-width: 720px) {
  .tool-launch-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .tool-launch-card { padding: 24px; }
  .tool-card-title { font-size: 1.8rem; }
  .tool-art { height: 112px; margin: 6px 0 10px; }
  .tool-category { font-size: .65rem; }
  .tool-card-description { margin-bottom: 20px; }
  .tool-home-heading { margin-bottom: 24px; }
  .workspace-nav { gap: 14px; }
  .workspace-tools { margin-left: 0; width: 100%; flex-wrap: nowrap; }
  .workspace-tools button { flex: 1; padding: 10px 4px; font-size: .73rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tool-launch-card, .tool-action-arrow { transition: none; }
  .tool-launch-card:hover, .tool-launch-card:active, .tool-launch-card:hover .tool-action-arrow { transform: none; }
}