.tl {
    --tl-bg: #fff;
    --tl-muted: #f1f5f9;
    --tl-soft: #f8fafc;
    --tl-line: #cbd5e1;
    --tl-ink: #0f172a;
    --tl-sub: #475569;
    --tl-accent: #1d4ed8;
    --tl-rank-font: 28px;
    --tl-label-width: 129.6px;
    --tl-row-height: 100px;
    --tl-tile-height: 80px;
    --tl-tile-width: 80px;
    color: var(--tl-ink);
    background: var(--tl-bg);
    border: 1px solid var(--tl-line);
    border-radius: 12px;
    padding: 20px;
    position: relative;
}
[data-theme=dark] .tl {
    --tl-bg: #0f172a;
    --tl-muted: #1e293b;
    --tl-soft: #172033;
    --tl-line: #475569;
    --tl-ink: #f1f5f9;
    --tl-sub: #cbd5e1;
    --tl-accent: #93c5fd;
}
.tl [hidden] { display: none !important; }
.tl-toolbar, .tl-actions, .tl-meta, .tl-editbar, .tl-bank-heading { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tl-toolbar, .tl-editbar, .tl-bank-heading, .tl-meta { justify-content: space-between; }
.tl-title-label { flex: 1; min-width: 160px; font-size: 12px; color: var(--tl-sub); }
.tl-title-label input { display: block; width: 100%; padding: 6px 0; font-size: 24px; font-weight: 650; border: 0; background: transparent; color: var(--tl-ink); }
.tl-button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 12px; border: 1px solid var(--tl-line); border-radius: 8px; background: var(--tl-bg); color: var(--tl-ink); font-size: 14px; cursor: pointer; text-decoration: none; line-height: 1.25; }
.tl-button:hover { background: var(--tl-muted); }
.tl button:disabled, .tl input:disabled, .tl select:disabled { opacity: .45; cursor: not-allowed; }
.tl-primary { background: #1d4ed8; color: #fff; border-color: #1d4ed8; }
.tl-primary:hover { background: #1e40af; }
.tl-danger { color: #b91c1c; }
[data-theme=dark] .tl-danger { color: #fca5a5; }
.tl :is(button,input,select,summary,a,[tabindex]):focus-visible { outline: 3px solid var(--tl-accent); outline-offset: 3px; }
.tl-meta { font-size: 12px; color: var(--tl-sub); margin: 10px 0 18px; min-height: 18px; }
.tl-meta:empty { display: none; }
.tl-status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tl-message { padding: 12px; background: var(--tl-muted); border: 1px solid var(--tl-line); border-radius: 8px; margin-bottom: 16px; }
.tl-room-panel { background: var(--tl-muted); padding: 20px; margin-bottom: 20px; border-radius: 8px; }
.tl-room-panel h2 { font-size: 18px; font-weight: 650; margin-bottom: 6px; }
.tl-room-panel p { font-size: 14px; color: var(--tl-sub); max-width: 70ch; margin: 8px 0 14px; }
.tl-room-panel label { display: block; font-size: 13px; margin: 12px 0 8px; }
.tl-input { padding: 8px; border: 1px solid var(--tl-line); border-radius: 6px; background: var(--tl-bg); color: var(--tl-ink); max-width: 100%; min-height: 38px; }
.tl-room-panel input { display: block; width: 100%; margin-top: 6px; }
.tl-participants li { display: flex; gap: 12px; align-items: center; margin: 8px 0; }
.tl-editbar { padding-top: 16px; border-top: 1px solid var(--tl-line); }
.tl-displaybar { display: flex; align-items: center; gap: 16px 22px; flex-wrap: wrap; background: var(--tl-soft); padding: 12px 14px; border-radius: 8px; margin-top: 16px; font-size: 13px; }
.tl-toggle, .tl-crop-label, .tl-size-control { display: inline-flex; align-items: center; gap: 8px; }
.tl-toggle { cursor: pointer; }
.tl-toggle input { width: 16px; height: 16px; accent-color: var(--tl-accent); border-color: var(--tl-line); border-radius: 4px; }
.tl-crop-label select { font-size: 12px; padding: 6px 30px 6px 8px; }
.tl-size-control { margin-left: auto; }
.tl-size-control input { width: 90px; accent-color: var(--tl-accent); cursor: pointer; }
.tl-size-control output { min-width: 36px; font-size: 12px; font-variant-numeric: tabular-nums; }
.tl-size-control button { font-size: 18px; width: 30px; height: 32px; border-radius: 6px; }
.tl-size-control button:hover { background: var(--tl-muted); }

.tl-hint { font-size: 12px; line-height: 1.6; color: var(--tl-sub); margin: 8px 0 16px; max-width: 85ch; }
.tl-board { border: 1px solid var(--tl-line); border-radius: 8px; }
.tl-row { display: grid; grid-template-columns: min(var(--tl-label-width), 45%) minmax(0,1fr) 38px; min-height: var(--tl-row-height); position: relative; }
.tl-row + .tl-row { border-top: 1px solid var(--tl-line); }
.tl-rank { position: relative; display: flex; align-items: center; justify-content: center; padding: 8px; color: #0f172a; }
.tl-row:first-child .tl-rank { border-top-left-radius: 7px; }
.tl-row:last-child .tl-rank { border-bottom-left-radius: 7px; }
.tl-rank textarea { position: absolute; top: 50%; left: 8px; transform: translateY(-50%); width: calc(100% - 16px); min-width: 0; box-sizing: border-box; resize: none; overflow: hidden; white-space: pre-wrap; overflow-wrap: normal; word-break: normal; hyphens: none; border: 0; background: transparent; font-size: var(--tl-rank-font); line-height: 1.2; text-align: center; font-weight: 700; color: #0f172a; padding: 0; }
.tl-order { background: var(--tl-soft); display: flex; flex-direction: column; justify-content: center; gap: 2px; align-items: center; padding: 5px 0; }
.tl-row:first-child .tl-order { border-top-right-radius: 7px; }
.tl-row:last-child .tl-order { border-bottom-right-radius: 7px; }
.tl-small, .tl-row-settings summary { display: grid; place-items: center; min-width: 30px; min-height: 30px; border-radius: 5px; font-size: 17px; color: var(--tl-sub); border: 0; cursor: pointer; background: transparent; line-height: 1; }
.tl-small:hover, .tl-row-settings summary:hover, .tl-row-settings[open] summary { background: var(--tl-muted); color: var(--tl-ink); }
.tl-row-settings summary { list-style: none; font-size: 22px; }
.tl-row-settings summary::-webkit-details-marker { display: none; }
.tl-row-menu { position: absolute; right: 38px; top: 8px; width: 180px; padding: 14px; border: 1px solid var(--tl-line); background: var(--tl-bg); border-radius: 10px; z-index: 6; }
.tl-row-menu strong { display: block; font-size: 13px; margin-bottom: 12px; }
.tl-row-menu label { display: flex; justify-content: space-between; align-items: center; font-size: 12px; margin-bottom: 12px; }
.tl-row-menu input[type=color] { width: 32px; height: 32px; padding: 2px; border: 1px solid var(--tl-line); background: var(--tl-bg); border-radius: 6px; cursor: pointer; }
.tl-row-menu .tl-button + .tl-button { margin-top: 6px; }
.tl-row-menu .tl-button { width: 100%; min-height: 34px; font-size: 12px; }
.tl-zone, .tl-bank { display: flex; align-content: flex-start; align-items: flex-start; gap: 4px; flex-wrap: wrap; padding: 10px; min-height: var(--tl-row-height); }
.tl-zone { cursor: pointer; padding: 3px; gap: 3px; position: relative; }
.tl-active-row .tl-zone::after { content: attr(data-paste-hint); position: absolute; right: 8px; bottom: 5px; padding: 2px 6px; border-radius: 4px; background: var(--tl-soft); color: var(--tl-sub); font-size: 11px; line-height: 1.4; pointer-events: none; }
.tl-active-row .tl-zone:has(.tl-zone-empty)::after { inset: 50% auto auto 50%; transform: translate(-50%, -50%); white-space: nowrap; }
.tl-active-row .tl-zone-empty { visibility: hidden; }
.tl-active-row .tl-zone { background: var(--tl-soft); outline: 2px solid var(--tl-accent); outline-offset: -2px; }
.tl-zone.dragover, .tl-bank.dragover { background: var(--tl-muted); outline: 2px dashed var(--tl-accent); outline-offset: -3px; }
.tl-zone-empty { font-size: 12px; color: var(--tl-sub); margin: auto; pointer-events: none; }
.tl-tile { width: var(--tl-tile-width); max-width: 100%; flex: 0 0 var(--tl-tile-width); padding: 0; border: 0; border-radius: 3px; overflow: visible; background: transparent; cursor: grab; position: relative; text-align: center; color: var(--tl-ink); }
.tl-tile img { width: 100%; height: var(--tl-tile-height); border-radius: 3px; object-fit: contain; display: block; pointer-events: none; }
.tl-cropped .tl-tile img { object-fit: cover; }
.tl-caption { display: none; font-size: 11px; line-height: 1.3; padding: 4px 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-show-labels .tl-caption { display: block; }
.tl-tile.locked { opacity: .5; cursor: wait; }
.tl-tile.dragging { opacity: .35; }
.tl-bank-heading { margin: 24px 0 10px; }
.tl-bank-heading h2 { font-size: 15px; font-weight: 600; }
.tl-bank-heading span { font-size: 12px; color: var(--tl-sub); }
.tl-bank-heading h2 span { margin-left: 6px; }
.tl-bank { border: 1px dashed var(--tl-line); border-radius: 8px; min-height: calc(var(--tl-tile-height) + 24px); }
.tl-active-bank { border-color: var(--tl-accent); }
.tl-bank-empty { margin: auto; text-align: center; color: var(--tl-sub); padding: 18px; font-size: 13px; }
.tl:fullscreen, .tl.tl-expanded { padding: 8px 24px 24px; width: 100%; height: 100%; overflow: auto; border: 0; border-radius: 0; background: var(--tl-bg); }
.tl.tl-expanded { position: fixed; inset: 0; z-index: 10000; }
.tl .tl-toolbar { position: static; padding: 0; gap: 8px; }
.tl-focus-mode .tl-header { position: sticky; top: 0; z-index: 7; background: var(--tl-bg); padding: 4px 0 8px; }
.tl:not(.tl-focus-mode) .tl-header { position: sticky; top: var(--tl-site-header-height, 56px); z-index: 7; background: var(--tl-bg); padding: 4px 0 8px; }
.tl.tl-has-docked-bank:not(.tl-focus-mode) .tl-bank-tray { left: var(--tl-tray-left); right: auto; width: var(--tl-tray-width); }
.tl-focus-mode { scroll-padding-top: calc(var(--tl-header-height, 120px) + 12px); }
.tl-header .tl-editbar { margin-top: 10px; }
.tl .tl-title-label input { font-size: 22px; padding: 2px 0; }
.tl .tl-toolbar .tl-button, .tl .tl-editbar .tl-button { min-height: 32px; padding: 6px 10px; font-size: 13px; }
.tl .tl-meta { margin: 4px 0 8px; }
.tl .tl-editbar { padding-top: 8px; }
.tl .tl-hint { display: none; }
.tl.tl-has-docked-bank { padding-bottom: calc(var(--tl-bank-tray-height, 150px) + 24px); scroll-padding-bottom: calc(var(--tl-bank-tray-height, 150px) + 24px); }
.tl.tl-fit-viewport.tl-has-docked-bank { padding-bottom: calc(var(--tl-bank-tray-height, 150px) + 8px); }
.tl-has-docked-bank .tl-bank-tray { position: fixed; inset: auto 0 0; z-index: 5; padding: 10px 24px max(6px, env(safe-area-inset-bottom)); border-top: 1px solid var(--tl-line); background: var(--tl-bg); box-shadow: 0 -4px 16px rgb(0 0 0 / .08); }
.tl-has-docked-bank .tl-bank-heading { margin: 0 0 6px; }
.tl-has-docked-bank .tl-bank { --tl-tile-height: var(--tl-bank-tile-height, 88px); --tl-tile-width: var(--tl-bank-tile-width, 88px); flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; min-height: 0; max-height: 144px; padding: 3px; border: 0; border-radius: 0; gap: 3px; }
.tl-has-docked-bank:not(.tl-bank-preview-paused):not(.tl-drag-active) .tl-bank:focus-within { --tl-tile-height: var(--tl-bank-preview-height, 88px); --tl-tile-width: var(--tl-bank-preview-width, 88px); }
.tl-has-docked-bank .tl-bank .tl-caption { display: none; }
.tl-fit-viewport .tl-order { padding: 0; }
.tl-fit-viewport .tl-row-settings summary { min-height: min(30px, var(--tl-row-height)); }
.tl-has-docked-bank.tl-bank-preview:not(.tl-drag-active) .tl-bank { --tl-tile-height: var(--tl-bank-preview-height, 88px); --tl-tile-width: var(--tl-bank-preview-width, 88px); }
.tl-has-docked-bank.tl-bank-preview.tl-show-labels:not(.tl-drag-active) .tl-bank .tl-caption { display: block; }
.tl-has-docked-bank.tl-drag-active .tl-bank .tl-tile, .tl-has-docked-bank.tl-drag-active .tl-bank .tl-tile img { transition: none; }
.tl-bank-add { flex: 0 0 var(--tl-tile-width); width: var(--tl-tile-width); height: var(--tl-tile-height); display: grid; place-items: center; border: 1px dashed var(--tl-line); border-radius: 5px; background: var(--tl-soft); color: var(--tl-sub); font-size: 24px; line-height: 1; cursor: pointer; }
.tl-bank-add:hover { border-color: var(--tl-accent); color: var(--tl-accent); background: var(--tl-muted); }
.tl.tl-bank-is-empty .tl-bank-tray { display: flex; align-items: center; gap: 12px; padding-top: 6px; padding-bottom: max(6px, env(safe-area-inset-bottom)); }
.tl.tl-bank-is-empty .tl-bank-heading { margin: 0; }
.tl.tl-bank-is-empty .tl-bank-heading h2 { font-size: 13px; }
.tl.tl-bank-is-empty #tl-bank { --tl-tile-height: 26px; --tl-tile-width: 26px; padding: 0; overflow: visible; }
.tl.tl-bank-is-empty .tl-bank-add { font-size: 20px; }
.tl .tl-presence-chip { display: inline-block; margin-left: 6px; padding: 3px 7px; background: var(--tl-muted); border-radius: 4px; }
@media(max-width: 640px) {
    .tl { padding: 12px; }
    .tl-toolbar { align-items: flex-start; }
    .tl-toolbar > .tl-actions { width: 100%; }
    .tl-toolbar > .tl-actions .tl-button { flex: 1; font-size: 12px; padding: 8px; }
    .tl-row { grid-template-columns: min(var(--tl-label-width), 45%) minmax(0,1fr) 32px; }
    .tl-rank { padding: 5px; }
    .tl { --tl-rank-font: 22px; --tl-label-width: 104.4px; }
    .tl-zone, .tl-bank { padding: 8px; }
    .tl-zone { padding: 3px; }
    .tl-editbar { gap: 10px; }
    .tl-editbar .tl-button { font-size: 12px; padding: 8px; }
    .tl-title-label input { font-size: 21px; }
    .tl-room-panel { padding: 12px; }
    .tl-bank-heading { align-items: flex-start; gap: 4px; }
    .tl:fullscreen, .tl.tl-expanded { padding: 8px 12px 12px; }
    .tl.tl-has-docked-bank { padding-bottom: calc(var(--tl-bank-tray-height, 150px) + 12px); }
    .tl:fullscreen .tl-toolbar, .tl-expanded .tl-toolbar { top: -12px; }
    .tl-has-docked-bank .tl-bank-tray { padding: 10px 12px max(6px, env(safe-area-inset-bottom)); }
    .tl-has-docked-bank .tl-bank-heading > span { display: none; }
    .tl-meta { align-items: flex-start; }
    .tl-displaybar { gap: 12px; padding: 12px; }
    .tl-toggle { width: 100%; }
    .tl-size-control { margin-left: 0; }
    .tl-row-menu { right: 32px; }
}
@media(prefers-reduced-motion: no-preference) {
    .tl:not(.tl-expanded):not(:fullscreen) #tl-expand:not(:disabled) { position: relative; animation: tl-expand-pulse 2s ease-in-out infinite; }
    .tl:not(.tl-expanded):not(:fullscreen) #tl-expand:not(:disabled)::after { content: ''; position: absolute; inset: -1px; border: 1px solid var(--tl-accent); border-radius: inherit; pointer-events: none; opacity: 0; animation: tl-expand-ripple 2s cubic-bezier(.16, 1, .3, 1) infinite; }
    .tl:not(.tl-expanded):not(:fullscreen) #tl-expand:is(:hover, :focus-visible),
    .tl:not(.tl-expanded):not(:fullscreen) #tl-expand:is(:hover, :focus-visible)::after { animation: none; }
    @keyframes tl-expand-pulse {
        0%, 55%, 100% { transform: translateY(0); border-color: var(--tl-line); background-color: var(--tl-bg); }
        16% { transform: translateY(-1px); border-color: var(--tl-accent); background-color: color-mix(in srgb, var(--tl-accent) 9%, var(--tl-bg)); }
    }
    @keyframes tl-expand-ripple {
        0%, 55%, 100% { transform: scale(1); opacity: 0; }
        12% { transform: scale(1); opacity: .4; }
        45% { transform: scale(1.14, 1.35); opacity: 0; }
    }
    .tl-tile { transition: outline-color .15s ease, opacity .15s ease, transform .16s ease; }
    .tl-has-docked-bank .tl-bank .tl-tile { transition: width .18s ease, flex-basis .18s ease, outline-color .15s ease, opacity .15s ease; }
    .tl-has-docked-bank .tl-bank .tl-tile img { transition: height .18s ease; }
    .tl-bank-add { transition: width .18s ease, height .18s ease, flex-basis .18s ease; }
    .tl-zone, .tl-bank { transition: background-color .15s ease; }
}
.tl-zone .tl-tile-preview, .tl-zone .tl-tile:focus-visible { transform: scale(1.6); z-index: 4; }

.tl-settings { width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); margin: auto; padding: 24px; border: 1px solid var(--tl-line); border-radius: 14px; background: var(--tl-bg); color: var(--tl-ink); overflow-y: auto; }
.tl-settings::backdrop { background: rgb(15 23 42 / .55); }
.tl-settings-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.tl-settings h2 { margin: 0; font-size: 20px; font-weight: 650; }
.tl-settings h3 { margin: 0 0 12px; color: var(--tl-sub); font-size: 13px; font-weight: 600; }
.tl-settings-header .tl-button { min-width: 36px; min-height: 36px; padding: 4px; font-size: 23px; }
.tl-settings .tl-displaybar { margin: 0; display: grid; gap: 22px; padding: 18px; }
.tl-settings .tl-crop-label { justify-content: space-between; }
.tl-settings .tl-size-control { margin-left: 0; display: grid; grid-template-columns: minmax(0, 1fr) 48px 30px; gap: 10px; }
.tl-settings .tl-size-control label { grid-column: 1 / -1; }
.tl-settings .tl-size-control input { width: 100%; }
.tl-settings-footer { display: flex; justify-content: flex-end; margin-top: 24px; }
.tl-library { width: min(560px, calc(100vw - 32px)); }
.tl-library-note, .tl-library-create p { color: var(--tl-sub); font-size: 13px; line-height: 1.6; }
.tl-library-list { margin: 20px 0; }
.tl-library-row { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--tl-line); }
.tl-library-row:first-child { border-top: 1px solid var(--tl-line); }
.tl-library-row > div { flex: 1; min-width: 0; }
.tl-library-row strong { display: block; overflow-wrap: anywhere; font-size: 15px; }
.tl-library-row span { display: block; font-size: 12px; color: var(--tl-sub); margin-top: 4px; }
.tl-library-create { display: flex; align-items: center; gap: 20px; justify-content: space-between; }
.tl-library-create p { margin: 0; }
.tl-library-create .tl-button { flex-shrink: 0; }
@media(max-width: 640px) {
    .tl-toolbar > .tl-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tl-toolbar > .tl-actions > .tl-button { width: 100%; font-size: 12px; padding: 8px; }
    .tl-library { padding: 20px; }
    .tl-library-create { align-items: flex-start; flex-direction: column; gap: 12px; }
}

.tl-library-files { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--tl-line); }
.tl-library-files .tl-actions { gap: 8px; }

.tl-caption { width: 100%; height: 23px; border: 0; border-radius: 0; color: var(--tl-ink); background: var(--tl-soft); text-align: center; cursor: text; }
.tl-tile-remove { position: absolute; top: calc(100% + 4px); left: 50%; transform: translate(-50%, -3px) scale(.94); display: grid; place-items: center; width: 32px; height: 24px; padding: 0; border: 1px solid var(--tl-line); border-radius: 8px; background: var(--tl-bg); color: var(--tl-sub); line-height: 1; cursor: pointer; opacity: 0; pointer-events: none; }
.tl-tile-remove::before { content: ''; position: absolute; inset: -5px -3px; }
.tl-tile-remove svg { width: 15px; height: 15px; }
.tl-tile-remove:hover, .tl-tile-remove:focus-visible { color: #be123c; background: #fff1f2; border-color: #fda4af; }
[data-theme=dark] .tl-tile-remove:hover, [data-theme=dark] .tl-tile-remove:focus-visible { color: #fda4af; background: #3b1826; border-color: #9f3654; }
.tl-tile:hover, .tl-tile:focus-within { z-index: 4; }
.tl-tile:hover .tl-tile-remove, .tl-tile:focus-within .tl-tile-remove { opacity: 1; pointer-events: auto; transform: translate(-50%, 0) scale(1); }
.tl-bank .tl-tile { padding-bottom: 28px; }
.tl-bank .tl-tile-remove { top: auto; bottom: 0; }
.tl-has-docked-bank .tl-bank .tl-tile { padding-bottom: 0; }
.tl-has-docked-bank .tl-bank .tl-tile-remove { visibility: hidden; }
.tl-has-docked-bank.tl-bank-preview:not(.tl-drag-active) .tl-bank .tl-tile,
.tl-has-docked-bank:not(.tl-bank-preview-paused):not(.tl-drag-active) .tl-bank:focus-within .tl-tile { padding-bottom: 28px; }
.tl-has-docked-bank.tl-bank-preview:not(.tl-drag-active) .tl-bank .tl-tile-remove,
.tl-has-docked-bank:not(.tl-bank-preview-paused):not(.tl-drag-active) .tl-bank:focus-within .tl-tile-remove { visibility: visible; }
.tl-tile-remove:disabled { display: none; }
@media(prefers-reduced-motion: no-preference) {
    .tl-tile-remove { transition: opacity .14s ease, transform .14s ease, background-color .14s ease, color .14s ease, border-color .14s ease; }
}