.tl-page{background:var(--canvas);min-height:100vh;padding:56px 0 96px}@media (max-width:640px){.tl-page{padding:36px 0 64px}}.tl-page .wrap{max-width:880px}.tl-back{color:var(--body-text);margin-bottom:var(--s-lg);align-items:center;gap:6px;font-size:14px;text-decoration:none;transition:color .15s;display:inline-flex}.tl-back:hover{color:var(--ink)}.tl-hero{margin:0 0 var(--s-2xl)}.tl-eyebrow{color:var(--body-text);text-transform:uppercase;letter-spacing:.08em;align-items:center;gap:8px;font-family:Geist Mono,monospace;font-size:12px;display:inline-flex}.tl-eyebrow:before{content:"";background:var(--brand);border-radius:1px;width:6px;height:6px}.tl-hero h1{margin:var(--s-md) 0 var(--s-md);letter-spacing:-.035em;color:var(--ink);text-wrap:balance;font-size:clamp(28px,4.6vw,46px);font-weight:600;line-height:1.08}.tl-intro{color:var(--body-text);text-wrap:pretty;margin:0;font-size:clamp(16px,2vw,19px);line-height:1.6}.tl-section{margin:clamp(40px,6vw,64px) 0 0}.tl-section h2{margin:0 0 var(--s-md);letter-spacing:-.03em;color:var(--ink);font-size:clamp(22px,3.2vw,30px);font-weight:600}.tl-section p{color:var(--body-text);text-wrap:pretty;margin:0;font-size:16px;line-height:1.7}.tl-builder{border:1px solid var(--hairline);border-radius:var(--r-xl,20px);background:var(--canvas);box-shadow:var(--shadow-3);padding:clamp(20px,4vw,32px)}.tl-fields{gap:var(--s-md);grid-template-columns:repeat(2,1fr);display:grid}@media (max-width:560px){.tl-fields{grid-template-columns:1fr}}.tl-field{flex-direction:column;gap:6px;display:flex}.tl-field>span{letter-spacing:.06em;text-transform:uppercase;color:var(--mute);font-family:Geist Mono,monospace;font-size:11px;font-weight:500}.tl-field select{box-sizing:border-box;width:100%;font:inherit;color:var(--ink);background:var(--canvas-soft,#f7f7f8);border:1px solid var(--hairline);cursor:pointer;border-radius:12px;padding:11px 14px;font-size:15px;transition:border-color .15s,box-shadow .15s}.tl-field select:focus{border-color:var(--link);box-shadow:0 0 0 3px color-mix(in srgb, var(--link) 16%, transparent);outline:none}.tl-result{margin-top:var(--s-lg);border:1px solid var(--hairline);border-radius:var(--r-lg,14px);background:var(--canvas-soft,#f7f7f8);padding:var(--s-lg)}.tl-result-label{text-transform:uppercase;letter-spacing:.06em;color:var(--mute);font-family:Geist Mono,monospace;font-size:11px}.tl-result-text{margin:var(--s-sm) 0 0;color:var(--ink);-webkit-user-select:text;user-select:text;word-break:break-word;font-family:Geist Mono,monospace;font-size:14px;line-height:1.6}.tl-actions{gap:var(--s-sm);margin-top:var(--s-md);flex-wrap:wrap;align-items:center;display:flex}.tl-btn{font:inherit;cursor:pointer;border:1px solid var(--hairline);background:var(--canvas);color:var(--ink);border-radius:999px;padding:9px 16px;font-size:14px;font-weight:600;transition:border-color .15s}.tl-btn:hover{border-color:var(--hairline-strong)}.tl-note{margin:var(--s-md) 0 0;color:var(--mute);font-size:13px;line-height:1.55}.tl-table-wrap{border:1px solid var(--hairline);border-radius:var(--r-lg,16px);overflow-x:auto}.tl-table{border-collapse:collapse;width:100%;min-width:520px;font-size:15px}.tl-table th,.tl-table td{text-align:left;border-bottom:1px solid var(--hairline);padding:12px 16px}.tl-table thead th{text-transform:uppercase;letter-spacing:.05em;color:var(--mute);font-family:Geist Mono,monospace;font-size:12px;font-weight:500}.tl-table tbody tr:last-child td{border-bottom:none}.tl-table td.tl-ratio{color:var(--ink);font-family:Geist Mono,monospace;font-weight:600}.tl-table td.tl-dims{color:var(--body-text);font-family:Geist Mono,monospace}.tl-swatch{align-items:center;gap:8px;display:inline-flex}.tl-swatch i{background:var(--ink);border-radius:2px;flex:none;display:inline-block}.tl-faq{margin-top:var(--s-lg)}.tl-faq details{border-bottom:1px solid var(--hairline);padding:var(--s-md) 0}.tl-faq summary{cursor:pointer;color:var(--ink);justify-content:space-between;align-items:center;gap:16px;font-size:17px;font-weight:500;list-style:none;display:flex}.tl-faq summary::-webkit-details-marker{display:none}.tl-faq summary .plus{color:var(--mute);font-size:22px;transition:transform .15s}.tl-faq details[open] summary .plus{transform:rotate(45deg)}.tl-faq .ans{margin:var(--s-sm) 0 0;color:var(--body-text);text-wrap:pretty;font-size:15px;line-height:1.65}
