.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem}@media(max-width:1024px){.tool-grid{grid-template-columns:1fr}}.tool-panel{background:#18181b99;border:1px solid rgba(255,255,255,.06);border-radius:1rem;padding:1.5rem 2rem}@media(max-width:640px){.tool-panel{padding:1.25rem}}.tool-panel__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem}.tool-panel__title{font-family:var(--font-display);font-size:1.125rem;font-weight:700;color:var(--color-white);display:flex;align-items:center;gap:.625rem}.tool-panel__title-icon{color:var(--color-blue-400)}.tool-field{display:flex;flex-direction:column;gap:.375rem}.tool-fields{display:flex;flex-direction:column;gap:1.25rem}.tool-label{font-family:var(--font-mono);font-size:.625rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--color-zinc-500)}.tool-input,.tool-textarea,.tool-select{width:100%;background:#00000080;border:1px solid rgba(255,255,255,.08);border-radius:.75rem;padding:.75rem 1rem;font-family:var(--font-mono);font-size:.875rem;color:var(--color-white);outline:none;transition:border-color .2s}.tool-input::placeholder,.tool-textarea::placeholder{color:var(--color-zinc-700)}.tool-input:focus,.tool-textarea:focus,.tool-select:focus{border-color:var(--color-blue-400)}.tool-textarea{resize:none;min-height:5rem;line-height:1.6}.tool-select{appearance:none;cursor:pointer;padding-right:2.5rem}.tool-select-wrap{position:relative}.tool-select-chevron{position:absolute;right:1rem;top:50%;transform:translateY(-50%);color:var(--color-zinc-500);pointer-events:none}.tool-color-row{display:flex;gap:.5rem;align-items:center}.tool-color-swatch{width:2.5rem;height:2.5rem;border-radius:.5rem;border:1px solid rgba(255,255,255,.08);cursor:pointer;background:transparent;padding:0}.tool-counter{font-family:var(--font-mono);font-size:.625rem;transition:color .2s}.tool-counter--ok{color:var(--color-zinc-400)}.tool-counter--warn{color:#fbbf24}.tool-counter--over{color:#ef4444}.tool-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--font-mono);font-size:.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;border:none;border-radius:.75rem;padding:.75rem 1.25rem;transition:background .18s,color .18s,border-color .18s,box-shadow .18s}.tool-btn--primary{background:var(--color-blue-600, #2563eb);color:#fff}.tool-btn--primary:hover{background:var(--color-blue-500, #3b82f6);box-shadow:0 0 24px #2563eb4d}.tool-btn--copy{background:#ffffff0a;border:1px solid rgba(255,255,255,.08);color:var(--color-zinc-300);padding:.625rem 1rem}.tool-btn--copy:hover{background:var(--color-blue-600, #2563eb);border-color:var(--color-blue-500, #3b82f6);color:#fff}.tool-btn--copied{background:#059669!important;border-color:#10b981!important;color:#fff!important}.tool-btn--reset{background:transparent;border:1px solid transparent;color:var(--color-zinc-500);padding:.375rem .75rem;font-size:.625rem}.tool-btn--reset:hover{color:#ef4444;background:#ef444414;border-color:#ef444426}.tool-btn--full{width:100%}.tool-btn--download{flex:1;background:var(--color-blue-600, #2563eb);color:#fff;padding:.875rem 1rem}.tool-btn--download:hover{background:var(--color-blue-500, #3b82f6)}.tool-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.25rem}.tool-tab{flex:1;min-width:30%;padding:.625rem 1rem;border-radius:.5rem;font-family:var(--font-mono);font-size:.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-align:center;cursor:pointer;border:none;background:#ffffff0a;color:var(--color-zinc-400);transition:background .18s,color .18s}.tool-tab:hover{color:var(--color-white)}.tool-tab--active{background:var(--color-blue-600, #2563eb);color:#fff}.tool-code{background:#00000080;border-radius:.75rem;padding:1rem;overflow-x:auto;font-family:var(--font-mono);font-size:.75rem;line-height:1.7;color:#34d399;max-height:18rem;overflow-y:auto;white-space:pre-wrap;word-break:break-all}.tool-cta{background:linear-gradient(135deg,#2563eb0f,#06b6d40f);border:1px solid rgba(37,99,235,.12);border-radius:1rem;padding:1.5rem;text-align:center}.tool-cta__text{font-size:.875rem;color:var(--color-zinc-400);margin:0 0 1rem}.tool-cta__link{display:inline-flex;align-items:center;gap:.5rem;padding:.875rem 2rem;background:var(--color-blue-600, #2563eb);color:#fff;font-family:var(--font-mono);font-weight:800;font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border-radius:100px;transition:background .18s,box-shadow .18s}.tool-cta__link:hover{background:var(--color-blue-500, #3b82f6);box-shadow:0 0 30px #2563eb4d}.tool-btn-row{display:flex;gap:.5rem;margin-top:1rem}.tool-type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.tool-type-btn{padding:.5rem;border-radius:.75rem;font-family:var(--font-mono);font-size:.6875rem;text-align:center;cursor:pointer;border:1px solid rgba(255,255,255,.06);background:#ffffff05;color:var(--color-zinc-500);transition:all .18s}.tool-type-btn--active{background:#2563eb1f;border-color:var(--color-blue-400);color:var(--color-blue-400)}.tool-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.tool-flex-between{display:flex;justify-content:space-between;align-items:center}.tool-range{width:100%;height:.5rem;background:#ffffff0f;border-radius:.25rem;appearance:none;cursor:pointer;accent-color:var(--color-blue-400)}.tool-preview{background:#fff;border-radius:.75rem;overflow:hidden}.tool-preview--padded{padding:2rem;display:flex;align-items:center;justify-content:center}.tool-preview__placeholder{color:var(--color-zinc-400);font-family:var(--font-mono);font-size:.75rem}.tool-stats{display:flex;flex-wrap:wrap;gap:.5rem}.tool-stat{font-family:var(--font-mono);font-size:.625rem;color:var(--color-zinc-500);background:#ffffff08;border:1px solid rgba(255,255,255,.05);padding:.25rem .625rem;border-radius:.375rem}.tool-stat__val{color:var(--color-blue-400);font-weight:700}.tool-range-val{font-family:var(--font-mono);font-size:.625rem;color:var(--color-blue-400)}.tl-page{padding:10rem 0 6rem;background:#020209;min-height:100vh}.tl-page__back{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.6875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-zinc-500);text-decoration:none;margin-bottom:2.5rem;transition:color .2s}.tl-page__back:hover{color:var(--color-blue-400)}.tl-page__header{margin-bottom:3rem}.tl-page__badge{font-family:var(--font-mono);font-size:.5625rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--color-blue-400);margin-bottom:.5rem}.tl-page__title{font-family:var(--font-display);font-size:clamp(1.875rem,4vw,2.75rem);font-weight:800;letter-spacing:-.03em;color:var(--color-white);margin:0 0 .75rem;line-height:1.1}.tl-page__desc{font-size:.9375rem;color:var(--color-zinc-400);line-height:1.7;max-width:640px;margin:0}.tl-page__body{margin-bottom:4rem}.tl-page__faq{margin-bottom:4rem;max-width:720px}.tl-page__section-title{font-family:var(--font-display);font-size:1.5rem;font-weight:800;color:var(--color-white);margin:0 0 1.5rem}.tl-faq{background:#18181b4d;border:1px solid rgba(255,255,255,.06);border-radius:1rem;overflow:hidden}.tl-faq__item{border-bottom:1px solid rgba(255,255,255,.04)}.tl-faq__item:last-child{border-bottom:none}.tl-faq__question{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;font-size:.875rem;font-weight:600;color:var(--color-white);cursor:pointer;list-style:none;transition:color .2s}.tl-faq__question::-webkit-details-marker{display:none}.tl-faq__question:after{content:"+";font-family:var(--font-mono);font-size:1rem;color:var(--color-zinc-500);flex-shrink:0;transition:transform .2s}.tl-faq__item[open] .tl-faq__question:after{content:"−";color:var(--color-blue-400)}.tl-faq__question:hover{color:var(--color-blue-400)}.tl-faq__answer{padding:0 1.5rem 1rem;font-size:.875rem;color:var(--color-zinc-400);line-height:1.7;margin:0}.tl-page__related{padding-bottom:4rem}.tl-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}@media(max-width:768px){.tl-related-grid{grid-template-columns:1fr}}.tl-related-card{background:#18181b66;border:1px solid rgba(255,255,255,.06);border-radius:1rem;padding:1.5rem;text-decoration:none;display:flex;flex-direction:column;gap:.5rem;transition:border-color .3s,background .3s}.tl-related-card:hover{border-color:#2563eb4d;background:#2563eb08}.tl-related-card__name{font-family:var(--font-display);font-size:.9375rem;font-weight:700;color:var(--color-white);margin:0;transition:color .2s}.tl-related-card:hover .tl-related-card__name{color:var(--color-blue-400)}.tl-related-card__desc{font-size:.75rem;color:var(--color-zinc-500);line-height:1.6;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:1}.tl-related-card__link{font-family:var(--font-mono);font-size:.625rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-blue-400);opacity:0;transition:opacity .2s}.tl-related-card:hover .tl-related-card__link{opacity:1}