/* ---------------------------------------------------------------------------
   Tool studios (.tl), intro tools (.it) and the Apps pages (.ap) reached from
   the mega menu.
   --------------------------------------------------------------------------- */
.tl, .it, .ap {
  --tl-bg: #0b0d0e;
  --tl-panel: #141618;
  --tl-card: #1a1d1f;
  --tl-line: #ffffff14;
  --tl-line-2: #ffffff26;
  --tl-muted: #9a9c9f;
  --tl-lime: #d1fe17;
  background: var(--tl-bg); color: #fff;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
}
.tl *, .it *, .ap *, .tl *::before, .it *::before, .ap *::before { box-sizing: border-box; }
.tl p, .it p, .ap p, .tl h1, .it h1, .ap h1, .ap h2, .tl ol, .ap ol, .it figure, .ap figure { margin: 0; }
.tl a, .it a, .ap a { color: inherit; text-decoration: none; }
.tl :where(button), .it :where(button), .ap :where(button) { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
.tl :where(textarea), .tl :where(input) { font: inherit; color: inherit; background: none; border: 0; outline: none; resize: none; }
.tl svg, .it svg, .ap svg { width: 1.125rem; height: 1.125rem; flex: none; }

/* ---- tool studio ---- */
.tl { display: grid; grid-template-columns: 21.5rem minmax(0, 1fr); gap: 0.75rem; height: calc(100dvh - var(--header-height, 56px)); padding: 0.75rem; overflow: hidden; }
.tl-panel { display: flex; flex-direction: column; gap: 0.625rem; padding: 1rem; border: 1px solid var(--tl-line); border-radius: 1.25rem; background: var(--tl-panel); overflow-y: auto; }
.tl-panel-title { font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; font-size: 0.9375rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--tl-lime); }
.tl-panel-tabs { display: flex; gap: 1rem; border-bottom: 1px solid var(--tl-line); }
.tl-panel-tabs button { padding-bottom: 0.625rem; color: var(--tl-muted); font-size: 0.875rem; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tl .tl-panel-tabs button[data-active] { color: #fff; border-bottom-color: #fff; }

.tl-preview { position: relative; border-radius: 0.875rem; overflow: hidden; background: #0f1113; aspect-ratio: 4 / 3; }
.tl-preview img, .tl-preview video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tl-change { position: absolute; top: 0.625rem; right: 0.625rem; display: inline-flex; align-items: center; gap: 0.375rem; height: 1.875rem; padding: 0 0.75rem; border-radius: 0.5rem; background: #000000a6; backdrop-filter: blur(6px); font-size: 0.8125rem; }
.tl-change svg { width: 0.875rem; height: 0.875rem; }
.tl-preview-name { position: absolute; left: 0.75rem; bottom: 0.625rem; font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; text-shadow: 0 1px 6px #000; }

.tl-upload { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 1.5rem 1rem; border: 1px dashed var(--tl-line-2); border-radius: 0.875rem; color: #e6e6e8; font-size: 0.875rem; }
.tl-upload:hover { border-color: #ffffff4d; }
.tl-upload small { color: var(--tl-muted); font-size: 0.75rem; }
.tl-upload-ico { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; margin-bottom: 0.25rem; border-radius: 0.625rem; background: #ffffff14; }

.tl-prompt textarea { width: 100%; padding: 0.75rem; border-radius: 0.75rem; background: var(--tl-card); font-size: 0.875rem; line-height: 1.5; }
.tl-prompt textarea::placeholder { color: var(--tl-muted); }

.tl-rows { display: flex; flex-direction: column; gap: 0.375rem; }
.tl-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; min-height: 2.875rem; padding: 0.375rem 0.875rem; border-radius: 0.75rem; background: var(--tl-card); text-align: left; }
.tl-row > span:first-child { display: flex; flex-direction: column; gap: 0.0625rem; min-width: 0; }
.tl-row small { font-size: 0.6875rem; color: var(--tl-muted); }
.tl-row b { font-weight: 500; font-size: 0.875rem; }
.tl .tl-chev { width: 0.875rem; height: 0.875rem; color: var(--tl-muted); }
.tl-row-toggle { font-size: 0.875rem; }
.tl-switch { position: relative; width: 2.25rem; height: 1.25rem; border-radius: 999px; background: #ffffff24; transition: background 0.15s; }
.tl-switch i { position: absolute; top: 0.125rem; left: 0.125rem; width: 1rem; height: 1rem; border-radius: 999px; background: #fff; transition: transform 0.15s; }
.tl-switch[data-on] { background: var(--tl-lime); }
.tl-switch[data-on] i { transform: translateX(1rem); }

.tl .tl-generate { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; height: 3rem; margin-top: auto; border-radius: 0.875rem; background: var(--tl-lime); color: #000; font-weight: 600; font-size: 1rem; }
.tl-calc { text-align: center; font-size: 0.75rem; color: var(--tl-muted); text-decoration: underline; }
.tl-calc span { display: inline-grid; place-items: center; width: 0.875rem; height: 0.875rem; border-radius: 999px; border: 1px solid currentColor; text-decoration: none; font-size: 0.5625rem; }

.tl-gallery { display: flex; flex-direction: column; gap: 0.875rem; min-height: 0; padding: 1rem; border: 1px solid var(--tl-line); border-radius: 1.25rem; background: var(--tl-panel); }
.tl-gallery-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.tl-tabs { display: flex; gap: 0.25rem; }
.tl-tabs button { display: inline-flex; align-items: center; gap: 0.375rem; height: 2.25rem; padding: 0 0.875rem; border-radius: 0.625rem; color: var(--tl-muted); font-size: 0.875rem; }
.tl-tabs button svg { width: 1rem; height: 1rem; }
.tl .tl-tabs button[data-active] { background: #ffffff14; color: #fff; }
.tl-search { display: flex; align-items: center; gap: 0.5rem; width: min(13rem, 40vw); height: 2.25rem; padding: 0 0.75rem; border-radius: 0.625rem; background: var(--tl-card); color: var(--tl-muted); }
.tl-search input { flex: 1; min-width: 0; color: #fff; font-size: 0.875rem; }
.tl-search input::placeholder { color: var(--tl-muted); }

.tl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: 0.75rem; overflow-y: auto; min-height: 0; padding-right: 0.25rem; }
.tl-tile { position: relative; aspect-ratio: 3 / 4; border-radius: 0.875rem; overflow: hidden; background: var(--tl-card); }
.tl-tile img, .tl-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tl-tile[data-picked] { outline: 2px solid var(--tl-lime); outline-offset: -2px; }
.tl-tile-name { position: absolute; left: 0.625rem; right: 0.625rem; bottom: 0.5rem; font-size: 0.8125rem; font-weight: 500; text-align: left; text-shadow: 0 1px 6px #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-tile-check { position: absolute; top: 0.5rem; left: 0.5rem; display: grid; place-items: center; width: 1.375rem; height: 1.375rem; border-radius: 999px; background: var(--tl-lime); color: #000; }
.tl-tile-check svg { width: 0.875rem; height: 0.875rem; }
.tl-none { padding: 2rem 0; color: var(--tl-muted); }
.tl-steps { display: flex; flex-direction: column; gap: 0.75rem; padding: 0; list-style: none; }
.tl-steps li { display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem; border-radius: 0.875rem; background: var(--tl-card); color: var(--tl-muted); font-size: 0.875rem; }
.tl-steps b { color: #fff; font-weight: 600; }

@media (max-width: 900px) {
  .tl { grid-template-columns: 1fr; height: auto; overflow: visible; }
  .tl-panel, .tl-gallery { overflow: visible; }
  .tl-grid { overflow: visible; }
}

/* ---- intro tools ---- */
.it { min-height: 70vh; padding: 0 1rem 4rem; }
.it-hero { max-width: 46rem; margin: 0 auto; padding: 3rem 0 3.5rem; text-align: center; }
.it-collage { display: flex; justify-content: center; align-items: center; margin-bottom: 2rem; }
.it-collage img { width: 8.5rem; height: 10.5rem; object-fit: cover; border-radius: 0.75rem; box-shadow: 0 12px 32px #000000a6; }
.it-collage img[data-i="0"] { transform: rotate(-6deg) translateX(1.25rem); }
.it-collage img[data-i="1"] { transform: rotate(2deg); z-index: 1; }
.it-collage img[data-i="2"] { border-radius: 999px; width: 9.5rem; height: 9.5rem; margin-inline: -0.75rem; z-index: 2; }
.it-collage img[data-i="3"] { transform: rotate(5deg) translateX(-1rem); }
.it h1 { font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; font-size: clamp(1.875rem, 4.4vw, 3.25rem); font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.05; }
.it-hero p { margin-top: 0.875rem; color: var(--tl-muted); line-height: 1.6; }
.it .it-cta { display: inline-flex; align-items: center; gap: 0.5rem; height: 3rem; margin-top: 1.75rem; padding: 0 1.75rem; border-radius: 0.75rem; background: var(--tl-lime); color: #000; font-weight: 600; font-size: 1rem; }
.it-gallery { max-width: 82rem; margin: 0 auto; }
.it-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 0.75rem; }
.it-tile { position: relative; aspect-ratio: 3 / 4; border-radius: 0.875rem; overflow: hidden; background: var(--tl-card); }
.it-tile img, .it-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.it-tile[data-picked] { outline: 2px solid var(--tl-lime); outline-offset: -2px; }
.it-tile-name { position: absolute; left: 0.875rem; bottom: 0.75rem; font-size: 0.875rem; font-weight: 500; text-shadow: 0 1px 6px #000; }
.it-tile-go { position: absolute; top: 0.625rem; right: 0.625rem; display: inline-flex; align-items: center; gap: 0.25rem; height: 1.75rem; padding: 0 0.625rem; border-radius: 999px; background: #000000b3; font-size: 0.75rem; font-weight: 500; opacity: 0; transition: opacity 0.15s; }
.it-tile-go svg { width: 0.8125rem; height: 0.8125rem; }
.it-tile:hover .it-tile-go { opacity: 1; }

/* ---- apps pages ---- */
.ap { max-width: 82rem; margin: 0 auto; padding: 1.5rem 1rem 5rem; }
.ap-crumb { font-size: 0.875rem; color: var(--tl-muted); }
.ap-crumb span { color: #fff; }
.ap-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1.5rem; align-items: start; margin-top: 1.5rem; padding: 1.75rem; border: 1px solid var(--tl-line); border-radius: 1.25rem; background: var(--tl-panel); }
.ap h1 { font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; font-size: clamp(1.75rem, 3.4vw, 2.5rem); font-weight: 700; text-transform: uppercase; line-height: 1.08; }
.ap-sub { margin-top: 0.75rem; color: var(--tl-muted); }
.ap-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: 0.75rem; margin-top: 1.5rem; }
.ap-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; min-height: 14rem; padding: 1.25rem; border: 1px solid var(--tl-line-2); border-radius: 0.875rem; text-align: center; }
.ap-slot:hover { border-color: #ffffff4d; }
.ap-slot-ico { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; margin-bottom: 0.5rem; border-radius: 0.625rem; background: #ffffff14; }
.ap-slot b { font-size: 0.875rem; font-weight: 500; }
.ap-slot small { font-size: 0.75rem; color: var(--tl-muted); line-height: 1.4; }
.ap-type { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; font-size: 0.875rem; color: var(--tl-muted); }
.ap-type-switch { display: inline-flex; gap: 0.125rem; padding: 0.1875rem; border-radius: 0.625rem; background: var(--tl-card); }
.ap-type-switch button { display: grid; place-items: center; width: 2.25rem; height: 1.875rem; border-radius: 0.5rem; color: var(--tl-muted); }
.ap .ap-type-switch button[data-active] { background: #fff; color: #000; }
.ap .ap-action { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; height: 3.25rem; margin-top: 1.25rem; border-radius: 0.875rem; background: var(--tl-lime); color: #000; font-weight: 600; font-size: 1.0625rem; }
.ap-art { border-radius: 1rem; overflow: hidden; background: var(--tl-card); aspect-ratio: 1; }
.ap-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-steps { margin-top: 3.5rem; }
.ap-steps h2 { font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; font-size: clamp(1.25rem, 2.6vw, 1.875rem); font-weight: 700; text-transform: uppercase; }
.ap-steps ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; margin-top: 1.5rem; padding: 0; list-style: none; }
.ap-steps li { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.5rem; border: 1px solid var(--tl-line); border-radius: 1rem; background: var(--tl-panel); color: #d5d6d8; }
.ap-step-n { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 999px; background: var(--tl-lime); color: #000; font-weight: 700; }