.tt-tool{max-width:68rem;color:var(--color-base-content);margin:0 auto}.tt-card{--tt-action-width:min(256px, calc(100cqi - 34px));border:1px solid var(--color-base-300);border-top:4px solid var(--color-primary);border-radius:var(--radius-box);background:var(--color-base-100);box-shadow:none;margin-top:1.5rem;padding:24px;container-type:inline-size}.tt-heading{grid-template-rows:auto auto;grid-template-columns:minmax(0,1fr) 128px;align-items:flex-start;gap:12px;display:grid}.tt-heading>div:first-child{grid-area:2/1;min-width:0}.tt-heading h2{margin:0;font-size:1.25rem;font-weight:600;line-height:1.75rem}.tt-heading p{margin:.35rem 0 0;line-height:1.55}.tt-privacy{color:color-mix(in oklab, var(--color-base-content) 68%, transparent);text-align:end;white-space:nowrap;font-size:12px;font-weight:400;line-height:18px}.tt-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:1.25rem;display:grid}.tt-field{gap:8px;min-width:0;font-size:14px;font-weight:600;line-height:20px;display:grid}.tt-field input,.tt-field select{border-radius:var(--radius-field);width:100%;height:44px;min-height:44px;font-family:inherit;font-size:16px;font-weight:400;line-height:24px}.tt-fields-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;display:grid}.tt-result{border:1px solid color-mix(in oklab, var(--color-primary) 40%, var(--color-base-300));border-top:4px solid var(--color-primary);border-radius:var(--radius-box);background:color-mix(in oklab, var(--color-primary) 10%, var(--color-base-100));box-shadow:none;margin-top:24px;padding:24px}.tt-result-head{justify-content:space-between;align-items:center;gap:12px;display:flex}.tt-result h3{margin:0;font-size:1.25rem;font-weight:600;line-height:1.75rem}.tt-result output{border:1px solid color-mix(in oklab, var(--color-primary) 40%, var(--color-base-300));border-radius:var(--radius-box);background:color-mix(in oklab, var(--color-primary) 16%, var(--color-base-100));font-variant-numeric:tabular-nums;overflow-wrap:anywhere;margin-top:20px;padding:16px;font-size:2rem;font-weight:600;line-height:2.5rem;display:block}.tt-result p{min-height:20px;margin:8px 0 0;font-size:14px;line-height:20px}.tt-error{color:var(--color-error);margin:12px 0 0;font-size:14px;font-weight:400;line-height:20px}.tt-guide{border-top:1px solid var(--color-base-300);text-align:start;width:100%;max-width:48rem;margin:3.5rem auto 0;padding-top:1.5rem}.tt-guide h2{margin:2rem 0 .75rem;font-size:1.5rem;font-weight:600}.tt-guide h2:first-child{margin-top:0}.tt-guide h3{margin:0 0 .5rem;font-size:1.125rem}.tt-guide p,.tt-guide li{line-height:1.75}.tt-guide ol,.tt-guide ul{padding-left:1.4rem}.tt-example{border:1px solid var(--color-base-300);background:var(--color-base-200);border-radius:.5rem;margin:.75rem 0;padding:1rem}.tt-faq+.tt-faq{margin-top:1.5rem}.tt-hidden{display:none!important}@media (width<=42rem){.tt-card,.tt-result{padding:16px}.tt-grid{grid-template-columns:1fr}}@media (width<=32rem){.tt-fields-3{grid-template-columns:1fr}}.tt-heading-actions{display:contents}.tt-heading-actions .tt-privacy{grid-area:1/1/auto/-1;justify-self:end;margin:0}.tt-heading-actions .btn{box-sizing:border-box;border:1px solid var(--color-base-300);border-radius:var(--radius-field);background:var(--color-base-100);width:128px;min-width:128px;max-width:128px;height:44px;min-height:44px;color:var(--color-base-content);box-shadow:none;grid-area:2/2;justify-self:end}.tt-actions{justify-content:center;width:100%;margin-top:20px;display:flex}.tt-actions .btn,.tt-result-copy .btn{box-sizing:border-box;width:var(--tt-action-width);border-radius:var(--radius-field);background:var(--color-primary);min-width:0;max-width:256px;height:44px;min-height:44px;color:var(--color-primary-content);box-shadow:none;white-space:normal;padding-inline:16px;font-size:14px;font-weight:600;line-height:20px}.tt-result-head{display:block}.tt-result-copy{justify-content:center;margin-top:20px;display:flex}.tt-result-copy .btn{flex:none}.tt-result p{text-align:center}.tt-card :is(button,input,select):focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
