.tl-hero{padding-bottom: clamp(48px,6vw,80px);}.tl-hero .cmp-pair a{text-decoration: none;}.tl-hero .cmp-pair a:hover{text-decoration: underline;}.tl-hero-tool{margin-top: clamp(28px,3.4vw,44px);}.tl-page .cmp-jumps{margin-top: 0;}.tl-app{position: relative;padding: clamp(20px,3vw,36px);border: 1px solid var(--hairline-soft);border-radius: var(--radius-card);background: var(--surface-white);box-shadow: var(--cmp-card-shadow),0 30px 70px rgba(23,25,26,.12);text-align: left;}.tl-app-head{display: flex;flex-wrap: wrap;align-items: baseline;justify-content: space-between;gap: 6px 24px;margin-bottom: 22px;}.tl-app-head h2{margin: 0;font-size: clamp(19px,1.8vw,22px);line-height: 1.2;}.tl-app-head p{margin: 0;color: var(--text-3);font-size: 14px;}.tl-empty{display: grid;grid-template-columns: minmax(0,1.05fr) minmax(0,1fr);align-items: stretch;gap: clamp(20px,3vw,40px);}.tl-empty[hidden],.tl-work[hidden],.tl-results[hidden],.tl-error[hidden],.tl-quality[hidden],.tl-seg[hidden]{display: none;}.tl-drop{position: relative;display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 8px;min-height: 300px;padding: 32px 24px;border: 2px dashed var(--hairline-strong);border-radius: 20px;background: var(--mio-muted);text-align: center;cursor: pointer;transition: border-color .15s ease,background .15s ease;}.tl-drop:hover,.tl-drop.is-over{border-color: var(--gavana-orange);background: color-mix(in srgb,var(--gavana-orange) 7%,#fff);}.tl-drop:focus-within{outline: 3px solid #d85c00;outline-offset: 4px;}.tl-drop input{position: absolute;width: 1px;height: 1px;opacity: 0;pointer-events: none;}.tl-drop-icon{display: grid;place-items: center;width: 56px;height: 56px;margin-bottom: 4px;border-radius: 18px;background: #fff;box-shadow: 0 0 0 1px var(--hairline-soft),0 8px 20px rgba(23,25,26,.08);color: var(--text-1);}.tl-drop-icon svg{width: 26px;height: 26px;fill: none;stroke: currentColor;stroke-width: 1.7;stroke-linecap: round;stroke-linejoin: round;}.tl-drop-title{font: 700 clamp(22px,2.2vw,28px)/1.15 var(--font-display);letter-spacing: -.02em;}.tl-drop-sub{max-width: 26em;margin-bottom: 8px;color: var(--text-2);font-size: 16px;line-height: 1.45;}.tl-shapes{display: flex;align-items: flex-end;align-content: center;justify-content: center;flex-wrap: wrap;gap: 18px 16px;margin: 0;padding: 0;list-style: none;}.tl-shape{display: grid;justify-items: center;gap: 10px;--ring: var(--gavana-orange);}.tl-shape--pink{--ring: var(--gavana-pink);}.tl-shape--blue{--ring: var(--gavana-blue);}.tl-shape-frame{display: grid;place-items: center;height: clamp(72px,7vw,96px);aspect-ratio: var(--ar);border: 5px solid var(--ring);border-radius: 16px;background: linear-gradient(135deg,color-mix(in srgb,var(--ring) 22%,#fff),color-mix(in srgb,var(--ring) 5%,#fff));box-shadow: 0 10px 24px rgba(23,25,26,.08);}.tl-shape-frame b{padding: 3px 9px;border-radius: 999px;background: #fff;color: var(--text-1);font-size: 12.5px;font-weight: 700;box-shadow: 0 1px 3px rgba(23,25,26,.14);}.tl-shape-cap{max-width: 9em;color: var(--text-2);font-size: 13.5px;line-height: 1.3;text-align: center;}.tl-shape-cap strong{display: none;}.tl-error{margin: 14px 0 0;color: #b42318;font-size: 15px;}.tl-work{display: grid;grid-template-columns: minmax(0,5fr) minmax(0,7fr);gap: clamp(24px,3.4vw,44px);}.tl-src{position: relative;display: block;width: fit-content;max-width: 100%;margin: 0 auto;line-height: 0;border-radius: 16px;overflow: hidden;touch-action: none;cursor: crosshair;background: var(--surface-2);box-shadow: 0 0 0 1px var(--hairline-soft),0 12px 30px rgba(23,25,26,.1);}.tl-src:focus-visible{outline: 3px solid #d85c00;outline-offset: 4px;}.tl-src canvas{display: block;max-width: 100%;max-height: 380px;width: auto;height: auto;}.tl-pin{position: absolute;width: 24px;height: 24px;margin: -12px 0 0 -12px;border: 3px solid #fff;border-radius: 50%;box-shadow: 0 0 0 2px rgba(23,25,26,.6),0 3px 10px rgba(23,25,26,.4);pointer-events: none;}.tl-meta{margin: 14px 0 0;color: var(--text-1);font-size: 14px;font-weight: 600;text-align: center;overflow-wrap: anywhere;}.tl-hint{margin: 6px 0 0;color: var(--text-3);font-size: 14px;line-height: 1.45;}.tl-src-col .tl-hint{text-align: center;}.tl-replace{display: flex;width: fit-content;margin: 16px auto 0;cursor: pointer;}.tl-controls{display: grid;grid-template-columns: minmax(0,1fr);align-content: start;gap: 24px;}.tl-app h3{margin: 0 0 10px;color: var(--text-3);font-family: var(--font-mio);font-size: 12px;font-weight: 700;letter-spacing: .1em;line-height: 1.2;text-transform: uppercase;}.tl-tabs{display: flex;flex-wrap: wrap;gap: 6px;margin: 0 -2px 14px;padding: 2px;}.tl-tab{display: inline-flex;flex: none;align-items: center;gap: 8px;height: 38px;padding: 0 15px;border: 1px solid var(--hairline);border-radius: 999px;background: #fff;color: var(--text-2);font: 600 14px/1 var(--font-mio);white-space: nowrap;cursor: pointer;transition: background .15s,color .15s,border-color .15s;}.tl-tab:hover{border-color: var(--hairline-strong);color: var(--text-1);background: var(--wash);}.tl-tab[aria-pressed="true"]{border-color: var(--text-1);background: var(--text-1);color: var(--on-invert);}.tl-tab:focus-visible{outline: 3px solid #d85c00;outline-offset: 2px;}.tl-tab-n{display: inline-grid;place-items: center;min-width: 18px;height: 18px;padding: 0 5px;border-radius: 999px;background: var(--gavana-orange);color: #fff;font-size: 11px;font-style: normal;font-weight: 700;line-height: 1;}.tl-tab-n[hidden]{display: none;}.tl-pills{display: flex;flex-wrap: wrap;gap: 8px;max-height: 232px;overflow-y: auto;padding: 2px;}.tl-pill,.tl-toggle{position: relative;display: inline-flex;cursor: pointer;}.tl-pill input,.tl-toggle input{position: absolute;inset: 0;width: 100%;height: 100%;margin: 0;opacity: 0;cursor: pointer;}.tl-pill > span,.tl-toggle > span{display: inline-flex;align-items: baseline;gap: 8px;padding: 9px 14px;border: 1px solid var(--hairline-strong);border-radius: 999px;background: #fff;color: var(--text-2);font: 500 14px/1.2 var(--font-mio);transition: background .15s,color .15s,border-color .15s;}.tl-pill b{color: var(--text-1);font-weight: 700;font-variant-numeric: tabular-nums;}.tl-pill:hover > span,.tl-toggle:hover > span{border-color: var(--text-1);}.tl-pill input:checked + span,.tl-toggle input:checked + span{border-color: var(--text-1);background: var(--text-1);color: rgba(244,240,232,.8);}.tl-pill input:checked + span b,.tl-toggle input:checked + span{color: var(--on-invert);}.tl-pill input:focus-visible + span,.tl-toggle input:focus-visible + span{outline: 3px solid #d85c00;outline-offset: 2px;}.tl-selected{display: flex;flex-wrap: wrap;align-items: center;gap: 4px 14px;margin: 12px 0 0;color: var(--text-2);font-size: 14px;}.tl-link{padding: 0;border: 0;background: none;color: var(--text-1);font: inherit;font-weight: 600;text-decoration: underline;text-underline-offset: 3px;cursor: pointer;}.tl-options{display: flex;flex-wrap: wrap;gap: 20px 36px;}.tl-opt{min-width: 0;}.tl-seg{display: inline-flex;flex-wrap: nowrap;align-items: center;gap: 2px;padding: 3px;border-radius: 999px;background: var(--wash);}.tl-seg label{position: relative;display: inline-flex;cursor: pointer;}.tl-seg label input{position: absolute;inset: 0;width: 100%;height: 100%;margin: 0;opacity: 0;cursor: pointer;}.tl-seg label span{display: inline-flex;padding: 8px 14px;border-radius: 999px;color: var(--text-2);font: 600 14px/1.1 var(--font-mio);white-space: nowrap;transition: background .15s,color .15s;}.tl-seg label input:checked + span{background: var(--text-1);color: var(--on-invert);}.tl-seg label input:focus-visible + span{outline: 3px solid #d85c00;outline-offset: 2px;}.tl-seg--sub{margin-top: 8px;}.tl-seg input[type="color"]{width: 32px;height: 28px;margin-left: 4px;padding: 0;border: 1px solid var(--hairline-strong);border-radius: 8px;background: none;cursor: pointer;}.tl-quality{display: flex;align-items: center;gap: 8px;margin-top: 10px;color: var(--text-2);font-size: 14px;}.tl-toggle > span{padding-block: 8px;font-weight: 600;}.tl-opt .tl-hint{max-width: 17em;}.tl-results{margin-top: clamp(24px,3vw,36px);padding-top: clamp(22px,2.6vw,32px);border-top: 1px solid var(--hairline-soft);}.tl-results-head{display: flex;flex-wrap: wrap;align-items: center;gap: 10px 20px;margin-bottom: 18px;}.tl-results-head h3{margin: 0;}.tl-status{flex: 1;min-width: 0;margin: 0;color: var(--text-2);font-size: 14px;}.tl-grid{display: grid;grid-template-columns: repeat(auto-fill,minmax(min(100%,220px),1fr));align-items: start;gap: 16px;}.tl-grid:empty::before{content: attr(data-empty);color: var(--text-3);font-size: 15px;}.tl-tile{display: flex;flex-direction: column;gap: 12px;margin: 0;padding: 12px;border: 1px solid var(--hairline-soft);border-radius: 20px;background: var(--surface-white);box-shadow: var(--cmp-card-shadow);}.tl-frame{display: flex;align-items: center;justify-content: center;min-height: 120px;padding: 10px;border-radius: 12px;background: repeating-conic-gradient(#ececea 0 25%,#f7f7f5 0 50%) 50% / 16px 16px;}.tl-frame canvas{display: block;max-width: 100%;max-height: 260px;width: auto;height: auto;border-radius: 6px;box-shadow: 0 6px 18px rgba(23,25,26,.16);}.tl-tile figcaption{display: flex;flex-direction: column;gap: 4px;padding: 0 4px 4px;}.tl-tile-top{display: flex;align-items: center;justify-content: space-between;gap: 8px;}.tl-tile .tl-px{font: 700 18px/1.2 var(--font-display);letter-spacing: -.02em;}.tl-tile-name{color: var(--text-2);font-size: 14px;line-height: 1.35;}.tl-tile-note{color: var(--text-3);font-size: 13px;line-height: 1.4;}.tl-tile-note:empty{display: none;}.tl-dl{background: #fff;align-self: flex-start;min-height: 40px;margin-top: 8px;padding: 0 16px;}.tl-ratio{display: inline-flex;align-items: center;width: fit-content;padding: 3px 10px;border-radius: 999px;background: var(--wash);color: var(--text-1);font-size: 12.5px;font-weight: 700;line-height: 1.4;font-variant-numeric: tabular-nums;white-space: nowrap;}.tl-px{font-variant-numeric: tabular-nums;white-space: nowrap;}.tl-table{table-layout: auto;}.tl-table thead th{color: var(--text-3);font-family: var(--font-mio);font-size: 12px;letter-spacing: .1em;text-transform: uppercase;}.tl-table thead th:nth-child(2){background: none;box-shadow: none;}.tl-table td:nth-child(2){background: none;color: var(--text-2);}.tl-table thead th:first-child,.tl-table tbody th[scope="row"]{width: 26%;}.tl-cols-2 thead th:first-child,.tl-cols-2 tbody th[scope="row"]{width: 38%;}.tl-table td .tl-px{color: var(--text-1);font-weight: 600;}.tl-table .cmp-cell-label::before{display: none;}.tl-notes{display: grid;gap: 8px;margin: 22px 4px 0;padding-left: 20px;color: var(--text-2);font-size: 15px;line-height: 1.55;}.tl-source{margin: 16px 4px 0;color: var(--text-3);font-size: 13.5px;line-height: 1.55;}.tl-source a{color: var(--text-2);}.tl-cards{display: grid;grid-template-columns: repeat(auto-fill,minmax(min(100%,340px),1fr));gap: 16px;margin: 0;padding: 0;list-style: none;}.tl-card{display: flex;flex-direction: column;align-items: flex-start;gap: 10px;padding: clamp(22px,2.6vw,32px);border: 1px solid var(--hairline-soft);border-radius: var(--radius-card);background: var(--surface-white);box-shadow: var(--cmp-card-shadow);}.tl-card h3{margin: 0;}.tl-card h3 a{color: inherit;text-decoration: none;}.tl-card h3 a:hover{text-decoration: underline;}.tl-card p{margin: 0 0 8px;color: var(--text-2);}.tl-card-shapes{display: flex;align-items: flex-end;gap: 10px;margin: 0 0 8px;padding: 0;list-style: none;}.tl-card-shapes li{height: 76px;aspect-ratio: var(--ar);border: 4px solid var(--gavana-orange);border-radius: 12px;background: color-mix(in srgb,var(--gavana-orange) 10%,#fff);}.tl-card-shapes li:nth-child(2){height: 100px;border-color: var(--gavana-pink);background: color-mix(in srgb,var(--gavana-pink) 10%,#fff);}.tl-card-shapes li:nth-child(3){height: 50px;border-color: var(--gavana-blue);background: color-mix(in srgb,var(--gavana-blue) 10%,#fff);}@media (max-width: 960px){.tl-empty{grid-template-columns: 1fr;}.tl-drop{min-height: 240px;}.tl-work{grid-template-columns: 1fr;}}@media (max-width: 640px){.tl-app{padding: 18px 14px 20px;border-radius: 22px;}.tl-shapes{gap: 14px;}.tl-shape-frame{height: 96px;}.tl-tabs{flex-wrap: nowrap;overflow-x: auto;scrollbar-width: none;}.tl-tabs::-webkit-scrollbar{display: none;}.tl-results-head .button{width: 100%;}.tl-grid{grid-template-columns: repeat(2,minmax(0,1fr));gap: 10px;}.tl-tile{padding: 8px;border-radius: 16px;}.tl-tile-top{flex-wrap: wrap;}.tl-pills{max-height: none;}}