@charset "utf-8";
/* CSS Document */
.tl-main {
  --tl-bg: #05070a;
  --tl-surface: #101319;
  --tl-surface-deep: #0c0e13;
  --tl-editor: #090c11;
  --tl-text: #eaf0f7;
  --tl-muted: #98a3b3;
  --tl-cyan: #6ee7ff;
  --tl-lime: #a8ff53;
  --tl-border: rgba(255,255,255,.08);
  --tl-border-strong: rgba(110,231,255,.42);
  position: relative;
  isolation: isolate;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  color: #ffffff;
  background: var(--tl-bg);
  font-family: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  line-height: 1.6;
}
.tl-main::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background: radial-gradient(circle at 86% 7%, rgba(168,255,83,.12), transparent 27%), radial-gradient(circle at 12% 28%, rgba(110,231,255,.06), transparent 25%), var(--tl-bg);
}
.tl-main .tl-grid {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, #000 0, rgba(0,0,0,.5) 42%, transparent 82%);
}
.tl-main *, .tl-main *::before, .tl-main *::after { box-sizing: border-box; }
.tl-main .tl-wrap { width: min(1200px, 100%); margin: 0 auto; padding-inline: 18px; }
.tl-main .tl-hero { padding: 48px 0 20px; }
.tl-main .tl-kicker { margin: 0 0 12px; color: var(--tl-cyan); font: 700 12px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; }
.tl-main h1, .tl-main h2, .tl-main h3, .tl-main p, .tl-main ul { margin-top: 0; }
.tl-main h1, .tl-main h2, .tl-main h3, .tl-main button, .tl-main summary { font-family: "Space Grotesk", "Segoe UI", system-ui, sans-serif; color:#ffffff;}
.tl-main h1 { max-width: 820px; margin-bottom: 14px; font-size: clamp(2.25rem, 4.1vw, 2.92rem); line-height: 1.14; letter-spacing: -.035em; color:#ffffff;}
.tl-main h1 span { color: #ffffff; background: linear-gradient(135deg, var(--tl-cyan), var(--tl-lime)); -webkit-background-clip: text; background-clip: text; }
.tl-main .tl-lead { max-width: 690px; margin-bottom: 18px; color: var(--tl-muted); font-size: 16px; }
.tl-main .tl-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 0; padding: 0; list-style: none; }
.tl-main .tl-pills li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--tl-border); border-radius: 999px; background: rgba(255,255,255,.025); color: #c9d2dd; font-size: 12px; }
.tl-main .tl-pills li span { width: 6px; height: 6px; border-radius: 50%; background: var(--tl-lime); box-shadow: 0 0 10px rgba(168,255,83,.65); }
.tl-main .tl-tool-section { padding: 28px 0 56px; }
.tl-main .tl-workbench { position: relative; overflow: hidden; border: 1px solid var(--tl-border); border-radius: 14px; background: linear-gradient(180deg, var(--tl-surface), var(--tl-surface-deep)); box-shadow: 0 30px 80px rgba(0,0,0,.32); }
.tl-main .tl-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; border-bottom: 1px solid var(--tl-border); background: rgba(255,255,255,.018); }
.tl-main .tl-toolbar-group { display: flex; flex-wrap: wrap; gap: 8px; }
.tl-main .tl-button { min-height: 40px; padding: 9px 14px; border: 1px solid var(--tl-border); border-radius: 9px; cursor: pointer; color: var(--tl-text); background: #11151c; font-size: 13px; font-weight: 700; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.tl-main .tl-button:hover { transform: translateY(-1px); border-color: var(--tl-border-strong); }
.tl-main .tl-button-primary { border-color: transparent; color: #061014; background: linear-gradient(135deg, var(--tl-cyan), var(--tl-lime)); }
.tl-main .tl-button:focus-visible, .tl-main .tl-tab:focus-visible, .tl-main summary:focus-visible, .tl-main a:focus-visible, .tl-main input:focus-visible, .tl-main textarea:focus-visible { outline: 3px solid rgba(110,231,255,.32); outline-offset: 2px; }
.tl-main .tl-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 470px; }
.tl-main .tl-pane { min-width: 0; display: grid; grid-template-rows: 50px minmax(0, 1fr) 35px; background: var(--tl-editor); }
.tl-main .tl-pane + .tl-pane { border-left: 1px solid var(--tl-border); }
.tl-main .tl-pane-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px; border-bottom: 1px solid var(--tl-border); }
.tl-main .tl-pane-head > div:first-child { display: flex; align-items: center; gap: 9px; }
.tl-main .tl-pane-head h3 { margin: 0; font-size: 14px; letter-spacing: .01em; }
.tl-main .tl-dot { width: 7px; height: 7px; border-radius: 50%; }
.tl-main .tl-dot-cyan { background: var(--tl-cyan); box-shadow: 0 0 10px rgba(110,231,255,.5); }
.tl-main .tl-dot-lime { background: var(--tl-lime); box-shadow: 0 0 10px rgba(168,255,83,.5); }
.tl-main .tl-pane-note { color: var(--tl-muted); font: 600 11px/1 ui-monospace, SFMono-Regular, Consolas, monospace; text-transform: uppercase; letter-spacing: .1em; }
.tl-main .tl-editor { width: 100%; height: 100%; min-height: 385px; resize: none; border: 0; border-radius: 0; outline: 0; padding: 20px; color: #dbe6f2; background: transparent; caret-color: var(--tl-lime); font: 14px/1.62 ui-monospace, SFMono-Regular, Consolas, monospace; tab-size: 2; }
.tl-main .tl-editor:focus { box-shadow: inset 0 0 0 1px rgba(110,231,255,.28); }
.tl-main .tl-statusbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 14px; border-top: 1px solid var(--tl-border); color: #788493; background: rgba(255,255,255,.012); font: 500 11px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.tl-main .tl-tabs { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--tl-border); border-radius: 8px; }
.tl-main .tl-tab { padding: 5px 9px; border: 0; border-radius: 5px; cursor: pointer; color: var(--tl-muted); background: transparent; font-size: 11px; font-weight: 700; }
.tl-main .tl-tab.is-active { color: #061014; background: var(--tl-cyan); }
.tl-main .tl-output-panel { min-height: 385px; overflow: auto; padding: 20px; }
.tl-main .tl-code { margin: 0; color: #b9efc0; background: transparent; white-space: pre-wrap; overflow-wrap: anywhere; font: 13px/1.62 ui-monospace, SFMono-Regular, Consolas, monospace; }
.tl-main .tl-preview { color: #cdd6e1; font-size: 15px; }
.tl-main .tl-preview > :first-child { margin-top: 0; }
.tl-main .tl-preview > :last-child { margin-bottom: 0; }
.tl-main .tl-preview h1, .tl-main .tl-preview h2, .tl-main .tl-preview h3, .tl-main .tl-preview h4 { margin: 1.1em 0 .45em; color: #f3f7fb; letter-spacing: -.02em; }
.tl-main .tl-preview h1 { font-size: 2em; }
.tl-main .tl-preview h2 { font-size: 1.55em; }
.tl-main .tl-preview h3 { font-size: 1.25em; }
.tl-main .tl-preview p, .tl-main .tl-preview ul, .tl-main .tl-preview ol { margin-bottom: .9em; }
.tl-main .tl-preview a { color: var(--tl-cyan); text-underline-offset: 3px; }
.tl-main .tl-preview blockquote { margin: 1em 0; padding: .2em 0 .2em 1em; border-left: 3px solid var(--tl-lime); color: #aeb9c7; }
.tl-main .tl-preview code { padding: .15em .38em; border: 1px solid var(--tl-border); border-radius: 4px; color: #b9efc0; background: #080b0f; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.tl-main .tl-preview pre { overflow: auto; padding: 16px; border: 1px solid var(--tl-border); border-radius: 9px; background: #07090d; }
.tl-main .tl-preview pre code { padding: 0; border: 0; background: transparent; }
.tl-main .tl-preview table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: .92em; }
.tl-main .tl-preview th, .tl-main .tl-preview td { padding: 8px 10px; border: 1px solid var(--tl-border); text-align: left; }
.tl-main .tl-preview th { color: var(--tl-text); background: rgba(110,231,255,.06); }
.tl-main .tl-preview hr { border: 0; border-top: 1px solid var(--tl-border); margin: 1.5em 0; }
.tl-main .tl-preview .tl-task { list-style: none; margin-left: -1.2em; }
.tl-main .tl-preview .tl-empty { display: grid; place-items: center; min-height: 320px; color: #657180; text-align: center; }
.tl-main .tl-options { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 24px; padding: 13px 14px; border-top: 1px solid var(--tl-border); }
.tl-main .tl-options label { display: inline-flex; align-items: center; gap: 8px; color: #b8c2ce; font-size: 12px; cursor: pointer; }
.tl-main .tl-options input { width: 15px; height: 15px; accent-color: var(--tl-lime); }
.tl-main .tl-options p { margin: 0 0 0 auto; color: #788493; font-size: 12px; }
.tl-main .tl-toast { position: absolute; right: 16px; bottom: 54px; z-index: 3; margin: 0; padding: 9px 12px; border: 1px solid rgba(168,255,83,.35); border-radius: 8px; color: #ddffc0; background: #111a12; font-size: 12px; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.tl-main .tl-toast.is-visible { opacity: 1; transform: translateY(0); }
.tl-main .tl-privacy-note { margin: 13px 0 0; color: #7f8b99; font-size: 12px; text-align: center; }
.tl-main .tl-privacy-note strong { color: #b9c4d0; }
.tl-main .tl-section { padding: 56px 0; border-top: 1px solid rgba(255,255,255,.045); }
.tl-main .tl-section-soft { background: rgba(255,255,255,.012); }
.tl-main .tl-section-head { max-width: 700px; margin-bottom: 26px; }
.tl-main .tl-section-head h2 { margin-bottom: 9px; font-size: clamp(1.75rem, 3vw, 2rem); line-height: 1.18; letter-spacing: -.025em; }
.tl-main .tl-section-head > p:last-child { margin-bottom: 0; color: var(--tl-muted); }
.tl-main .tl-card-grid { display: grid; gap: 16px; }
.tl-main .tl-card-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tl-main .tl-card-grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tl-main .tl-card { min-width: 0; padding: 24px; border: 1px solid var(--tl-border); border-radius: 14px; color: inherit; background: linear-gradient(180deg, rgba(16,19,25,.94), rgba(12,14,19,.94)); text-decoration: none; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.tl-main .tl-card:hover { transform: translateY(-3px); border-color: rgba(110,231,255,.27); box-shadow: 0 16px 30px rgba(0,0,0,.2); }
.tl-main .tl-card h3 { margin-bottom: 8px; font-size: 18px; }
.tl-main .tl-card p { margin-bottom: 0; color: var(--tl-muted); font-size: 14px; }
.tl-main .tl-card code { color: #c8f7d0; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.tl-main .tl-step-number { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-bottom: 28px; border: 1px solid rgba(110,231,255,.26); border-radius: 10px; color: var(--tl-cyan); font: 700 12px/1 ui-monospace, SFMono-Regular, Consolas, monospace; background: rgba(110,231,255,.05); }
.tl-main .tl-syntax-bench { overflow: hidden; border: 1px solid var(--tl-border); border-radius: 14px; background: linear-gradient(180deg, var(--tl-surface), var(--tl-surface-deep)); }
.tl-main .tl-syntax-row { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.tl-main .tl-syntax-row + .tl-syntax-row { border-top: 1px solid var(--tl-border); }
.tl-main .tl-syntax-row > * { min-width: 0; padding: 13px 16px; }
.tl-main .tl-syntax-row > * + * { border-left: 1px solid var(--tl-border); }
.tl-main .tl-syntax-row code { color: #c7f2ce; background: rgba(0,0,0,.16); font: 13px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; }
.tl-main .tl-syntax-row span { color: #aab5c2; font-size: 14px; }
.tl-main .tl-syntax-heading { color: var(--tl-cyan); background: rgba(110,231,255,.045); font: 700 11px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .1em; text-transform: uppercase; }
.tl-main .tl-card-label { margin-bottom: 10px !important; color: var(--tl-cyan) !important; font: 700 11px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .1em; text-transform: uppercase; }
.tl-main .tl-list-card ul { margin: 16px 0 0; padding: 0; list-style: none; }
.tl-main .tl-list-card li { position: relative; padding: 7px 0 7px 23px; color: #b5c0cd; font-size: 14px; }
.tl-main .tl-list-card li::before { content: ""; position: absolute; left: 0; top: 15px; width: 7px; height: 7px; border: 1px solid var(--tl-lime); border-radius: 2px; transform: rotate(45deg); }
.tl-main .tl-callout { display: flex; gap: 16px; align-items: flex-start; margin-top: 16px; padding: 20px 22px; border: 1px solid rgba(168,255,83,.2); border-radius: 14px; background: rgba(168,255,83,.035); }
.tl-main .tl-callout-mark { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; color: var(--tl-lime); background: rgba(168,255,83,.08); font: 700 14px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.tl-main .tl-callout h3 { margin-bottom: 4px; font-size: 16px; }
.tl-main .tl-callout p { margin-bottom: 0; color: var(--tl-muted); font-size: 14px; }
.tl-main .tl-use-card > span { display: inline-block; margin-bottom: 32px; color: var(--tl-lime); font: 700 11px/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .14em; }
.tl-main .tl-faq-list { display: grid; gap: 10px; }
.tl-main .tl-faq-item { overflow: hidden; border: 1px solid var(--tl-border); border-radius: 12px; background: linear-gradient(180deg, var(--tl-surface), var(--tl-surface-deep)); }
.tl-main .tl-faq-item summary { position: relative; min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 52px 16px 18px; cursor: pointer; color: var(--tl-text); font-size: 15px; font-weight: 700; list-style: none; }
.tl-main .tl-faq-item summary::-webkit-details-marker { display: none; }
.tl-main .tl-faq-item summary span::before, .tl-main .tl-faq-item summary span::after { content: ""; position: absolute; right: 20px; top: 50%; width: 14px; height: 2px; background: var(--tl-cyan); transition: transform .2s ease; }
.tl-main .tl-faq-item summary span::after { transform: rotate(90deg); }
.tl-main .tl-faq-item[open] summary span::after { transform: rotate(0); }
.tl-main .tl-faq-item p { margin: -2px 52px 18px 18px; color: var(--tl-muted); font-size: 14px; }
.tl-main .tl-faq-item code { color: #c8f7d0; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.tl-main .tl-related { padding-bottom: 84px; }
.tl-main .tl-tool-card strong { display: inline-block; margin-top: 22px; color: var(--tl-lime); font-size: 13px; }
.tl-main .tl-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.tl-main [hidden] { display: none !important; }
@media (max-width: 1024px) {
  .tl-main .tl-toolbar { align-items: flex-start; }
  .tl-main .tl-card-grid-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tl-main .tl-card-grid-three > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .tl-main .tl-hero { padding-top: 40px; }
  .tl-main h1 { font-size: clamp(1.71rem, 8vw, 2.15rem); }
  .tl-main .tl-toolbar { flex-direction: column; }
  .tl-main .tl-toolbar-group { width: 100%; }
  .tl-main .tl-toolbar-group:last-child { justify-content: flex-end; }
  .tl-main .tl-workspace { grid-template-columns: 1fr; }
  .tl-main .tl-pane + .tl-pane { border-top: 1px solid var(--tl-border); border-left: 0; }
  .tl-main .tl-editor, .tl-main .tl-output-panel { min-height: 300px; }
  .tl-main .tl-options { align-items: flex-start; flex-direction: column; gap: 10px; }
  .tl-main .tl-options p { margin-left: 0; }
  .tl-main .tl-card-grid-three, .tl-main .tl-card-grid-two { grid-template-columns: 1fr; }
  .tl-main .tl-card-grid-three > :last-child { grid-column: auto; }
  .tl-main .tl-section { padding: 48px 0; }
  .tl-main .tl-syntax-heading { display: none; }
  .tl-main .tl-syntax-row { grid-template-columns: 1fr; padding: 12px 14px; }
  .tl-main .tl-syntax-row > * { padding: 2px 0; }
  .tl-main .tl-syntax-row > * + * { border-left: 0; }
  .tl-main .tl-syntax-row span::before { content: "Result: "; color: #6f7b89; }
}
@media (max-width: 420px) {
  .tl-main .tl-workbench { border-radius: 12px; }
  .tl-main .tl-toolbar { padding: 12px; }
  .tl-main .tl-button { min-height: 42px; flex: 1 1 auto; }
  .tl-main .tl-editor, .tl-main .tl-output-panel { padding: 15px; }
  .tl-main .tl-card { padding: 20px; }
  .tl-main .tl-callout { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .tl-main .tl-button, .tl-main .tl-card, .tl-main .tl-toast, .tl-main .tl-faq-item summary span::after { transition: none; }
  .tl-main .tl-button:hover, .tl-main .tl-card:hover { transform: none; }
}