/* STL Cloud Capture - portal styles
   -------------------------------------------------------------------------
   Lifted out of the page block so the markup is workable in PageFly's editor
   and so the browser can cache this between visits.

   Two things to know before editing:

   Almost every rule is scoped under #tt-capture or #tt-gate. That is
   deliberate: the storefront theme and PageFly both put their own styles on
   the page, and unscoped rules here would leak into them.

   The exceptions are the .tt-dlg dialogs and the #tt-toasts layer, which are
   appended to document.body rather than into the portal - so their rules have
   to be global to reach them. Do not "tidy" those under #tt-capture; the
   dialogs would lose their styling entirely. Their tt- prefix is what keeps
   them from colliding with anything else on the page.

   Version the filename rather than overwriting. The page points at one exact
   URL, so a new upload under a new name is the only way to be sure people are
   not served a cached copy of the old one.
*/

@font-face {
        font-family: 'SF Pro';
        src: url('https://cdn.shopify.com/s/files/1/1958/7295/files/blinkmacsystemfont-regular.woff2?v=1776780716') format('woff2');
        font-weight: 400;
        font-style: normal;
        font-display: swap
    }

    @font-face {
        font-family: 'SF Pro';
        src: url('https://cdn.shopify.com/s/files/1/1958/7295/files/BlinkMacSystemFont-Semibold.woff2?v=1779123415') format('woff2');
        font-weight: 600;
        font-style: normal;
        font-display: swap
    }

    @font-face {
        font-family: 'SF Pro';
        src: url('https://cdn.shopify.com/s/files/1/1958/7295/files/blinkmacsystemfont-bold.woff2?v=1776780464') format('woff2');
        font-weight: 700;
        font-style: normal;
        font-display: swap
    }

    #tt-capture {
        --tt-bg: #000;
        --tt-card: #0e0e0e;
        --tt-card2: #1a1a1a;
        --tt-line: rgba(255, 255, 255, .06);
        --tt-line2: rgba(255, 255, 255, .1);
        --tt-ink: #fff;
        --tt-muted: rgba(255, 255, 255, .6);
        --tt-faint: rgba(255, 255, 255, .35);
        --tt-green: #0bfb2d;
        --tt-amber: #ffc200;
        --tt-amber2: #ff9500;
        --tt-red: #ff4d4f;
        --tt-font: 'SF Pro', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
        max-width: 1540px;
        margin: 0 auto;
        padding: 156px 40px 100px;
        background: var(--tt-bg);
        color: var(--tt-ink);
        font-family: var(--tt-font);
        font-size: 17px;
        line-height: 1.5;
        -webkit-font-smoothing: antialiased;
        text-align: left
    }

    #tt-capture * {
        box-sizing: border-box
    }

    #tt-gate {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px 40px;
        background: var(--tt-card2);
        color: #fff;
        font-family: 'SF Pro', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
        text-align: center
    }

    #tt-gate p {
        color: rgba(255, 255, 255, .6);
        margin: 0 0 28px;
        font-size: 17px;
        line-height: 1.5
    }

    #tt-gate .tt-loginform {
        text-align: left;
        margin-top: 4px
    }

    #tt-gate .tt-lgdot {
        margin: 0 8px
    }

    #tt-capture .tt-topbar {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin: -60px 0 28px
    }

    #tt-capture .tt-user {
        position: relative
    }

    #tt-capture .tt-user-btn {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        background: rgba(255, 255, 255, .05);
        border: 1px solid var(--tt-line2);
        border-radius: 999px;
        padding: 5px 14px 5px 5px;
        cursor: pointer;
        font-family: var(--tt-font);
        color: rgba(255, 255, 255, .75);
        font-size: 14px;
        font-weight: 600;
        letter-spacing: -.01em;
        transition: background .15s, color .15s, border-color .15s
    }

    #tt-capture .tt-user-btn:hover {
        background: rgba(255, 255, 255, .08);
        background-image: none;
        border-color: rgba(255, 255, 255, .16);
        color: rgba(255, 255, 255, .75)
    }

    #tt-capture .tt-user-av {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        flex-shrink: 0;
        overflow: hidden;
        background: var(--tt-card2);
        box-shadow: 0 0 0 1px rgba(255, 255, 255, .2);
        display: flex;
        align-items: center;
        justify-content: center
    }

    #tt-capture .tt-user-av img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block
    }

    #tt-capture .tt-user-av.tt-user-av-txt {
        color: #fff;
        font-size: 14px;
        font-weight: 700
    }

    #tt-capture .tt-user-av-lg {
        width: 44px;
        height: 44px
    }

    #tt-capture .tt-user-av-lg.tt-user-av-txt {
        font-size: 19px
    }

    #tt-capture .tt-user-cv {
        width: 14px;
        height: 14px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        opacity: .6;
        transition: transform .15s
    }

    #tt-capture .tt-user-open .tt-user-cv {
        transform: rotate(180deg)
    }

    #tt-capture .tt-user-menu {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        min-width: 240px;
        background: var(--tt-card);
        border: 1px solid var(--tt-line2);
        border-radius: 14px;
        padding: 6px;
        z-index: 40;
        box-shadow: 0 18px 40px rgba(0, 0, 0, .6);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-4px);
        transition: opacity .15s, transform .15s, visibility .15s
    }

    #tt-capture .tt-user-open .tt-user-menu {
        opacity: 1;
        visibility: visible;
        transform: none
    }

    #tt-capture .tt-user-card {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 12px 14px;
        border-bottom: 1px solid var(--tt-line);
        margin-bottom: 6px
    }

    #tt-capture .tt-user-card-t {
        min-width: 0
    }

    #tt-capture .tt-user-card-nm {
        font-size: 15px;
        font-weight: 700;
        color: #fff;
        letter-spacing: -.02em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    #tt-capture .tt-user-card-em {
        font-size: 13px;
        color: var(--tt-faint);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    #tt-capture .tt-user-mi {
        display: block;
        padding: 9px 12px;
        border-radius: 9px;
        font-size: 14px;
        font-weight: 500;
        color: var(--tt-muted);
        text-decoration: none;
        transition: background .12s, color .12s
    }

    #tt-capture .tt-user-mi:hover {
        background: var(--tt-card2);
        color: rgba(255, 255, 255, .85)
    }

    #tt-capture button.tt-user-mi-btn {
        width: 100%;
        text-align: left;
        border: none;
        background: none;
        font-family: var(--tt-font);
        cursor: pointer
    }

    #tt-capture button.tt-user-mi-btn:hover {
        background: var(--tt-card2);
        background-image: none;
        color: #fff
    }

    #tt-capture .tt-user-mi-out {
        color: var(--tt-faint)
    }

    @media (max-width:640px) {
        #tt-capture .tt-topbar {
            margin: -44px 0 18px
        }

        #tt-capture .tt-user-btn {
            padding: 5px 12px 5px 5px;
            gap: 8px
        }

        #tt-capture .tt-user-menu {
            min-width: 220px
        }
    }

    #tt-capture .tt-head {
        display: flex;
        align-items: center;
        gap: 14px;
        margin: 0 0 10px
    }

    #tt-capture h1 {
        font-size: 34px;
        font-weight: 700;
        letter-spacing: -.03em;
        margin: 0;
        color: #fff;
        text-transform: none
    }

    #tt-capture .tt-lede {
        color: var(--tt-muted);
        margin: 0 0 10px;
        max-width: 92ch;
        font-size: 17px
    }

    #tt-capture .tt-lede-how {
        color: rgba(255, 255, 255, .75);
        margin: 0 0 34px
    }

    #tt-capture .tt-link {
        color: #fff;
        font-weight: 600;
        text-decoration: none;
        border-bottom: 1px solid rgba(255, 255, 255, .35);
        transition: color .15s, border-color .15s;
        letter-spacing: -.02em
    }

    #tt-capture .tt-link:hover {
        color: #fff;
        border-bottom-color: #fff
    }

    #tt-capture .tt-link:focus-visible {
        outline: 2px solid var(--tt-amber);
        outline-offset: 3px
    }

    #tt-capture .tt-cardhead .tt-instructions-line {
        margin: 0;
        flex: none
    }

    @media (max-width:640px) {
        #tt-capture #tt-recordcard .tt-cardhead {
            flex-wrap: wrap;
            gap: 8px
        }

        #tt-capture #tt-recordcard .tt-cardhead h2 {
            flex: 1 0 100%
        }
    }

    #tt-capture .tt-instructions-line {
        margin: 0 0 22px
    }

    #tt-capture .tt-instructions-link {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        color: var(--tt-muted);
        font-size: 15px;
        font-weight: 400;
        text-decoration: none;
        border-bottom: none;
        transition: color .15s
    }

    #tt-capture .tt-instructions-link:hover {
        color: #fff
    }

    #tt-capture .tt-instructions-link svg {
        width: 17px;
        height: 17px;
        flex: none;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.4;
        stroke-linecap: round
    }

    #tt-capture .tt-instructions-link svg .tt-dot-fill {
        fill: currentColor;
        stroke: none
    }

    #tt-capture .tt-modal {
        position: fixed;
        inset: 0;
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px
    }

    #tt-capture .tt-modal-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, .75)
    }

    #tt-capture .tt-modal-panel {
        position: relative;
        background: var(--tt-card);
        border: 1px solid var(--tt-line2);
        border-radius: 20px;
        max-width: 720px;
        width: 100%;
        max-height: 86vh;
        display: flex;
        flex-direction: column;
        overflow: hidden
    }

    #tt-capture .tt-modal-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 22px 26px;
        border-bottom: 1px solid var(--tt-line)
    }

    #tt-capture .tt-modal-title {
        font-size: 22px;
        font-weight: 700;
        letter-spacing: -.02em;
        margin: 0;
        color: #fff;
        text-transform: none
    }

    #tt-capture .tt-modal-close {
        background: transparent;
        border: none;
        color: var(--tt-faint);
        font-size: 26px;
        line-height: 1;
        padding: 0 4px;
        cursor: pointer;
        width: auto
    }

    #tt-capture .tt-modal-close:hover:not(:disabled) {
        background: transparent;
        color: #fff
    }

    #tt-capture .tt-modal-body {
        padding: 22px 26px 28px;
        overflow-y: auto
    }

    #tt-capture .tt-modal-intro {
        color: var(--tt-muted);
        font-size: 17px;
        margin: 0 0 20px
    }

    #tt-capture .tt-modal-tabs {
        display: inline-flex;
        gap: 4px;
        padding: 4px;
        background: var(--tt-card2);
        border-radius: 999px;
        margin-bottom: 18px
    }

    #tt-capture .tt-mtab {
        background: transparent;
        color: var(--tt-muted);
        border-radius: 999px;
        padding: 7px 16px;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: -.01em
    }

    #tt-capture .tt-mtab.tt-mtab-on {
        background: #fff;
        background-image: none;
        color: #000
    }

    #tt-capture .tt-mtab:hover:not(.tt-mtab-on) {
        background: rgba(255, 255, 255, .06);
        background-image: none;
        color: #fff
    }

    #tt-capture .tt-modal-note {
        color: var(--tt-muted);
        font-size: 15px;
        margin: 0 0 22px
    }

    #tt-capture .tt-step {
        display: flex;
        gap: 16px;
        margin-bottom: 20px
    }

    #tt-capture .tt-step-n {
        flex: none;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: var(--tt-card2);
        border: 1px solid var(--tt-line2);
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        letter-spacing: -.01em
    }

    #tt-capture .tt-step-b h4 {
        margin: 2px 0 5px;
        font-size: 17px;
        font-weight: 700;
        letter-spacing: -.01em;
        color: #fff;
        text-transform: none
    }

    #tt-capture .tt-step-b p {
        margin: 0;
        font-size: 15px;
        color: var(--tt-muted);
        line-height: 1.55
    }

    @media (max-width:640px) {
        #tt-capture .tt-modal-panel {
            max-height: 92vh
        }

        #tt-capture .tt-modal-head,
        #tt-capture .tt-modal-body {
            padding-left: 18px;
            padding-right: 18px
        }
    }

    #tt-capture .tt-card {
        background: var(--tt-card);
        border: 1px solid var(--tt-line);
        border-radius: 20px;
        padding: 24px;
        margin: 0 0 16px
    }

    #tt-capture .tt-card h2 {
        font-size: 19px;
        font-weight: 700;
        letter-spacing: -.02em;
        text-transform: none;
        color: #fff;
        margin: 0 0 18px
    }

    #tt-capture .tt-modes {
        display: inline-flex;
        gap: 4px;
        padding: 4px;
        background: var(--tt-card2);
        border-radius: 999px;
        margin-bottom: 12px
    }

    #tt-capture .tt-mode {
        background: transparent;
        color: var(--tt-muted);
        border-radius: 999px;
        padding: 8px 18px;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: -.01em
    }

    #tt-capture .tt-mode:hover:not(.tt-mode-on) {
        background: rgba(255, 255, 255, .06);
        color: #fff
    }

    #tt-capture .tt-mode.tt-mode-on {
        background: var(--tt-green);
        color: #000
    }

    #tt-capture .tt-capnote {
        margin: 0 0 18px;
        font-size: 14px;
        line-height: 1.5;
        color: var(--tt-faint);
        max-width: 78ch
    }

    @media (min-width:1100px) {
        #tt-capture .tt-capnote {
            max-width: none;
            white-space: nowrap
        }
    }

    #tt-capture .tt-modenote {
        margin: 0 0 12px;
        font-size: 14px;
        color: var(--tt-faint)
    }

    #tt-capture .tt-pairgrid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px
    }

    #tt-capture .tt-zonelabel {
        font-size: 13px;
        font-weight: 600;
        color: var(--tt-faint);
        text-transform: uppercase;
        letter-spacing: .05em;
        margin-bottom: 8px
    }

    #tt-capture .tt-filelist {
        margin-top: 14px;
        display: flex;
        flex-direction: column;
        gap: 10px
    }

    #tt-capture .tt-fileitem {
        background: var(--tt-card2);
        border: 1px solid var(--tt-line2);
        border-radius: 12px;
        padding: 14px 16px
    }

    #tt-capture .tt-filehead {
        display: flex;
        align-items: center;
        gap: 14px
    }

    #tt-capture .tt-fileitem.tt-fileitem-bad {
        border-color: rgba(255, 77, 79, .4)
    }

    #tt-capture .tt-fileitem canvas {
        width: 120px;
        height: 40px;
        flex: none;
        border-radius: 6px;
        background: #000
    }

    #tt-capture .tt-fileinfo {
        flex: 1;
        min-width: 0
    }

    #tt-capture .tt-filestat {
        font-size: 13px;
        color: var(--tt-faint);
        margin-top: 3px
    }

    #tt-capture .tt-filestat.tt-bad {
        color: var(--tt-red)
    }

    #tt-capture .tt-upline {
        font-size: 12px;
        margin-top: 8px;
        letter-spacing: -.01em
    }

    #tt-capture .tt-upline[data-state="busy"] {
        color: rgba(255, 255, 255, .55)
    }

    #tt-capture .tt-upline[data-state="done"] {
        color: var(--tt-green)
    }

    #tt-capture .tt-upline[data-state="bad"] {
        color: var(--tt-amber)
    }

    #tt-capture .tt-fileitem .tt-filedrop {
        background: transparent;
        border: 1px solid rgba(255, 255, 255, .18);
        color: var(--tt-muted);
        padding: 5px 12px;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: -.01em;
        border-radius: 999px;
        flex: none
    }

    #tt-capture .tt-fileitem .tt-filedrop:hover:not(:disabled) {
        background: rgba(255, 77, 79, .12);
        background-image: none;
        border-color: rgba(255, 77, 79, .5);
        color: var(--tt-red)
    }

    #tt-capture .tt-fileinfo .tt-lbl {
        display: block;
        margin-bottom: 5px
    }

    #tt-capture .tt-filename-input {
        background: #000;
        border: 1px solid var(--tt-line2);
        color: #fff;
        border-radius: 6px;
        padding: 7px 10px;
        font-family: var(--tt-font);
        font-size: 15px;
        font-weight: 600;
        letter-spacing: -.01em;
        width: 100%;
        margin-bottom: 4px
    }

    #tt-capture .tt-filename-input:focus {
        outline: 2px solid var(--tt-amber);
        outline-offset: 1px;
        border-color: transparent
    }

    #tt-capture .tt-details-btn {
        background: transparent;
        border: 1px solid rgba(255, 255, 255, .18);
        color: var(--tt-muted);
        padding: 5px 12px;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: -.01em;
        border-radius: 999px;
        flex: none
    }

    #tt-capture .tt-details-btn:hover:not(:disabled) {
        background: rgba(255, 255, 255, .06);
        background-image: none;
        color: #fff
    }

    #tt-capture .tt-details-btn.tt-details-need {
        border-color: var(--tt-amber);
        color: var(--tt-amber)
    }

    #tt-capture .tt-details-btn.tt-details-set {
        border-color: rgba(255, 255, 255, .45);
        color: #fff
    }

    #tt-capture .tt-details {
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid var(--tt-line);
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px
    }

    #tt-capture .tt-details .tt-field {
        gap: 5px
    }

    #tt-capture .tt-details input,
    #tt-capture .tt-details select {
        background: #000;
        font-size: 14px;
        padding: 8px 10px
    }

    #tt-capture .tt-details-note {
        grid-column: 1 / -1;
        font-size: 13px;
        color: var(--tt-faint)
    }

    @media (max-width:700px) {
        #tt-capture .tt-details {
            grid-template-columns: 1fr
        }
    }

    #tt-capture .tt-batchbar {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 14px
    }

    #tt-capture .tt-batchcount {
        flex: 1;
        font-size: 14px;
        color: var(--tt-faint)
    }

    @media (max-width:640px) {
        #tt-capture .tt-fileitem canvas {
            display: none
        }
    }

    #tt-capture .tt-drop-sm {
        padding: 26px 16px
    }

    #tt-capture .tt-drop-sm.tt-has {
        padding: 14px
    }

    #tt-capture .tt-drop-sm canvas {
        height: 64px
    }

    #tt-capture .tt-drop-sm .tt-big {
        font-size: 15px
    }

    #tt-capture #tt-paircheck {
        margin-top: 16px
    }

    @media (max-width:640px) {
        #tt-capture .tt-pairgrid {
            grid-template-columns: 1fr
        }
    }

    #tt-capture .tt-drop {
        border: 1px dashed var(--tt-line2);
        border-radius: 16px;
        padding: 40px 20px;
        text-align: center;
        cursor: pointer;
        background: var(--tt-card2);
        transition: border-color .15s, background .15s
    }

    #tt-capture .tt-drop:hover,
    #tt-capture .tt-drop.tt-over {
        border-color: rgba(255, 255, 255, .35);
        background: #141414
    }

    #tt-capture .tt-drop:focus-visible {
        outline: 2px solid var(--tt-amber);
        outline-offset: 3px
    }

    #tt-capture .tt-drop.tt-has {
        padding: 18px;
        text-align: left;
        cursor: default
    }

    #tt-capture .tt-big {
        font-size: 19px;
        font-weight: 600;
        letter-spacing: -.02em;
        margin-bottom: 6px
    }

    #tt-capture .tt-specs {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        margin-top: 14px
    }

    #tt-capture .tt-spec {
        font-size: 13px;
        font-weight: 600;
        letter-spacing: -.01em;
        color: var(--tt-muted);
        background: rgba(255, 255, 255, .07);
        border: 0;
        border-radius: 999px;
        padding: 5px 13px;
        white-space: nowrap
    }

    #tt-capture .tt-drop-sm .tt-specs {
        gap: 6px;
        margin-top: 12px
    }

    #tt-capture .tt-drop-sm .tt-spec {
        font-size: 12px;
        padding: 3px 10px
    }

    #tt-capture canvas {
        display: block;
        width: 100%;
        height: 84px;
        border-radius: 12px;
        background: #000
    }

    #tt-capture .tt-replace {
        margin-top: 14px
    }

    #tt-capture .tt-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 24px;
        margin-top: 14px;
        font-size: 14px;
        color: var(--tt-faint)
    }

    #tt-capture .tt-meta b {
        color: #fff;
        font-weight: 600;
        letter-spacing: -.02em
    }

    #tt-capture .tt-checks {
        margin-top: 14px;
        display: flex;
        flex-direction: column;
        gap: 6px
    }

    #tt-capture .tt-chk {
        font-size: 14px;
        display: flex;
        gap: 9px;
        align-items: flex-start;
        color: var(--tt-muted)
    }

    #tt-capture .tt-chk.ok .tt-mark {
        color: var(--tt-green)
    }

    #tt-capture .tt-chk.warn {
        color: var(--tt-amber)
    }

    #tt-capture .tt-chk.bad {
        color: var(--tt-red)
    }

    #tt-capture .tt-mark {
        width: 12px;
        flex: none;
        font-weight: 700;
        letter-spacing: -.02em
    }

    #tt-capture .tt-stepbar {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 0 0 16px
    }

    #tt-capture .tt-back-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: rgba(255, 255, 255, .07);
        border: 1px solid transparent;
        color: rgba(255, 255, 255, .8);
        font-family: inherit;
        font-size: 14px;
        font-weight: 600;
        padding: 6px 14px 6px 10px;
        border-radius: 999px;
        cursor: pointer;
        letter-spacing: -.01em;
        transition: background .15s, color .15s;
        white-space: nowrap;
        flex-shrink: 0;
        width: auto
    }

    #tt-capture .tt-back-btn:hover {
        background: rgba(255, 255, 255, .12);
        background-image: none;
        color: #fff
    }

    #tt-capture .tt-back-btn svg {
        width: 14px;
        height: 14px;
        flex-shrink: 0
    }

    #tt-capture .tt-stepnote {
        font-size: 14px;
        color: var(--tt-faint);
        letter-spacing: -.01em
    }

    #tt-capture .tt-types {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 12px
    }

    #tt-capture .tt-type {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        text-align: center;
        background: var(--tt-card2);
        border: 1px solid var(--tt-line2);
        border-radius: 16px;
        padding: 22px 12px 24px;
        min-height: 210px;
        justify-content: center;
        cursor: pointer;
        transition: border-color .15s, background .15s;
        font-family: var(--tt-font);
        color: var(--tt-ink);
        width: auto
    }

    #tt-capture .tt-type,
    #tt-capture .tt-type:hover,
    #tt-capture .tt-type:focus,
    #tt-capture .tt-type:active {
        background-image: none !important;
        color: var(--tt-ink) !important;
        box-shadow: none !important
    }

    #tt-capture .tt-type:hover:not(.tt-type-on) {
        border-color: rgba(255, 255, 255, .18) !important;
        background: #212121 !important;
        background-color: #212121 !important
    }

    #tt-capture .tt-type.tt-type-on,
    #tt-capture .tt-type.tt-type-on:hover,
    #tt-capture .tt-type.tt-type-on:focus,
    #tt-capture .tt-type.tt-type-on:active {
        border-color: var(--tt-green);
        background: rgba(11, 251, 45, .06) !important;
        background-color: rgba(11, 251, 45, .06) !important
    }

    #tt-capture .tt-type:focus-visible {
        outline: 1px solid rgba(255, 255, 255, .4);
        outline-offset: 2px
    }

    #tt-capture .tt-type svg {
        width: 124px;
        height: 124px;
        color: #fff;
        display: block;
        margin: -10px 0 -6px
    }

    #tt-capture .tt-type.tt-type-on svg {
        color: var(--tt-green)
    }

    #tt-capture .tt-type-name {
        font-size: 17px;
        font-weight: 700;
        letter-spacing: -.02em
    }

    #tt-capture .tt-type-desc {
        font-size: 13px;
        color: var(--tt-faint);
        line-height: 1.4;
        font-weight: 400
    }

    @media (max-width:820px) {
        #tt-capture .tt-types {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    #tt-capture .tt-row {
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
        align-items: flex-end
    }

    #tt-capture .tt-field {
        display: flex;
        flex-direction: column;
        gap: 7px
    }

    #tt-capture .tt-lbl {
        font-size: 13px;
        font-weight: 600;
        color: var(--tt-faint);
        text-transform: uppercase;
        letter-spacing: .05em;
        margin: 0;
        display: block
    }

    #tt-capture input[type=text],
    #tt-capture input[type=number],
    #tt-capture select {
        background: var(--tt-card2);
        border: 1px solid var(--tt-line2);
        color: #fff;
        border-radius: 6px;
        padding: 10px 12px;
        font-family: var(--tt-font);
        font-size: 15px;
        height: auto;
        margin: 0;
        width: 100%;
        box-shadow: none
    }

    #tt-capture input[type=number] {
        width: 96px
    }

    #tt-capture input:focus,
    #tt-capture select:focus {
        outline: 2px solid var(--tt-amber);
        outline-offset: 1px;
        border-color: transparent
    }

    #tt-capture .tt-grow {
        flex: 1;
        min-width: 190px
    }

    #tt-capture .tt-metagrid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
        margin-top: 18px
    }

    #tt-capture .tt-notesfield {
        margin-top: 14px;
        max-width: 900px
    }

    #tt-capture .tt-optional {
        text-transform: none;
        letter-spacing: 0;
        font-weight: 400;
        color: rgba(255, 255, 255, .25);
        margin-left: 6px
    }

    #tt-capture .tt-reqnote {
        margin: 14px 0 0;
        font-size: 14px;
        color: var(--tt-amber);
        min-height: 1px
    }

    #tt-capture .tt-inspired {
        margin-top: 18px;
        max-width: 900px
    }

    #tt-capture .tt-inspiredgrid {
        margin-top: 7px
    }

    #tt-capture textarea {
        background: var(--tt-card2);
        border: 1px solid var(--tt-line2);
        color: var(--tt-ink);
        border-radius: 6px;
        padding: 10px 12px;
        font-family: var(--tt-font);
        font-size: 15px;
        width: 100%;
        resize: vertical;
        line-height: 1.5
    }

    #tt-capture textarea:focus {
        outline: 2px solid var(--tt-amber);
        outline-offset: 1px;
        border-color: transparent
    }

    @media (max-width:700px) {
        #tt-capture .tt-metagrid {
            grid-template-columns: 1fr
        }
    }

    #tt-capture button {
        font-family: var(--tt-font);
        font-size: 15px;
        font-weight: 700;
        letter-spacing: -.01em;
        border: none;
        border-radius: 999px;
        padding: 12px 26px;
        cursor: pointer;
        background: #fff;
        color: #000;
        transition: background .15s;
        width: auto;
        text-transform: none;
        line-height: 1.5
    }

    #tt-capture button:hover:not(:disabled):not(.tt-ghost):not(.tt-cancel):not(.tt-rowcancel):not(.tt-filedrop):not(.tt-mode):not(.tt-mtab):not(.tt-details-btn):not(.tt-user-btn):not(.tt-back-btn):not(.tt-edit):not(.tt-act):not(.tt-more):not(.tt-mi):not(.tt-type):not(.tt-mine-img):not(.tt-user-mi-btn) {
        background: #dcdcdc;
        background-image: none;
        color: #000
    }

    #tt-capture button:disabled {
        background: var(--tt-card2);
        color: var(--tt-faint);
        cursor: not-allowed
    }

    #tt-capture button:focus-visible {
        outline: 2px solid var(--tt-amber);
        outline-offset: 3px
    }

    #tt-capture .tt-ghost {
        background: transparent;
        border: 1px solid var(--tt-line2);
        color: #fff;
        padding: 8px 16px;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: -.01em
    }

    #tt-capture .tt-ghost:hover:not(:disabled) {
        background: var(--tt-card2);
        background-image: none;
        color: #fff
    }

    #tt-capture .tt-uploadnote {
        font-size: 15px;
        color: var(--tt-muted);
        margin: -6px 0 12px
    }

    #tt-capture .tt-bar {
        height: 3px;
        background: var(--tt-card2);
        border-radius: 999px;
        overflow: hidden;
        margin-top: 16px
    }

    #tt-capture .tt-bar i {
        display: block;
        height: 100%;
        background: var(--tt-green);
        width: 0;
        transition: width .25s
    }

    #tt-capture .tt-live {
        margin-top: 18px;
        padding: 24px 26px;
        background: var(--tt-card2);
        border: 1px solid var(--tt-line2);
        border-radius: 16px
    }

    #tt-capture .tt-live-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 20px;
        margin-bottom: 18px
    }

    #tt-capture .tt-live-heading {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 0
    }

    #tt-capture .tt-live-label {
        font-size: 19px;
        font-weight: 700;
        letter-spacing: -.02em;
        color: #fff
    }

    #tt-capture .tt-live-name {
        font-size: 17px;
        font-weight: 400;
        letter-spacing: -.01em;
        color: #fff
    }

    #tt-capture .tt-live-namelbl {
        font-weight: 700
    }

    #tt-capture .tt-live-right {
        display: flex;
        align-items: center;
        gap: 12px
    }

    #tt-capture .tt-cancel {
        background: transparent;
        border: 1px solid rgba(255, 255, 255, .18);
        color: var(--tt-muted);
        padding: 5px 13px;
        font-size: 13px;
        font-weight: 600;
        border-radius: 999px;
        letter-spacing: -.01em
    }

    #tt-capture .tt-cancel:hover:not(:disabled) {
        background: rgba(255, 77, 79, .12);
        border-color: rgba(255, 77, 79, .5);
        color: var(--tt-red)
    }

    #tt-capture .tt-cancel:disabled {
        opacity: .5;
        cursor: not-allowed
    }

    #tt-capture .tt-rowcancel {
        background: transparent;
        border: 1px solid rgba(255, 255, 255, .18);
        color: var(--tt-muted);
        padding: 6px 16px;
        font-size: 14px;
        font-weight: 700;
        border-radius: 999px;
        letter-spacing: -.01em;
        min-width: 108px;
        text-align: center;
        white-space: nowrap
    }

    #tt-capture .tt-rowcancel:hover:not(:disabled) {
        background: rgba(255, 77, 79, .12);
        border-color: rgba(255, 77, 79, .5);
        color: var(--tt-red)
    }

    #tt-capture .tt-rowcancel:disabled {
        opacity: .5;
        cursor: not-allowed
    }

    #tt-capture .tt-track {
        height: 4px;
        background: rgba(255, 255, 255, .08);
        border-radius: 999px;
        overflow: hidden;
        position: relative
    }

    #tt-capture .tt-track i {
        display: block;
        height: 100%;
        background: var(--tt-green);
        border-radius: 999px;
        width: 0;
        position: absolute;
        left: 0;
        transition: width .9s linear
    }

    #tt-capture .tt-live-note {
        margin-top: 11px;
        font-size: 13px;
        color: var(--tt-faint);
        line-height: 1.45
    }

    #tt-capture .tt-err {
        color: var(--tt-red);
        font-size: 14px;
        margin-top: 14px;
        background: rgba(255, 77, 79, .08);
        border: 1px solid rgba(255, 77, 79, .25);
        border-radius: 8px;
        padding: 10px 13px
    }

    #tt-capture .tt-cardhead {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        margin: 0 0 10px
    }

    #tt-capture .tt-cardhead h2 {
        margin: 0
    }

    #tt-capture .tt-edit {
        background: rgba(255, 255, 255, .07);
        border: none;
        padding: 7px 16px;
        margin: 0;
        border-radius: 999px;
        font-family: var(--tt-font);
        font-size: 15px;
        font-weight: 600;
        color: var(--tt-muted);
        cursor: pointer;
        letter-spacing: -.01em;
        width: auto;
        transition: background .15s, color .15s
    }

    #tt-capture .tt-edit:hover {
        background: rgba(255, 255, 255, .13);
        background-image: none;
        color: #fff
    }

    #tt-capture .tt-edit.tt-edit-on {
        background: #fff;
        color: #000
    }

    #tt-capture .tt-checkcol {
        width: 0;
        padding: 0;
        overflow: hidden
    }

    #tt-capture .tt-checkcol * {
        display: none
    }

    #tt-capture .tt-selmode .tt-checkcol {
        width: 38px;
        padding-right: 12px;
        overflow: visible
    }

    #tt-capture .tt-selmode .tt-checkcol * {
        display: inline-block
    }

    #tt-capture .tt-selmode .tt-checkcol input[type=checkbox] {
        -webkit-appearance: none;
        appearance: none;
        width: 22px;
        height: 22px;
        margin: 0;
        border-radius: 999px;
        border: 1.5px solid rgba(255, 255, 255, .3);
        background: transparent;
        cursor: pointer;
        position: relative;
        transition: background .12s, border-color .12s
    }

    #tt-capture .tt-selmode .tt-checkcol input[type=checkbox]:hover {
        border-color: rgba(255, 255, 255, .55)
    }

    #tt-capture .tt-selmode .tt-checkcol input[type=checkbox]:checked {
        background: #fff;
        border-color: #fff
    }

    #tt-capture .tt-selmode .tt-checkcol input[type=checkbox]:checked::after {
        content: "";
        position: absolute;
        left: 7px;
        top: 3px;
        width: 5px;
        height: 10px;
        border: solid #000;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg)
    }

    #tt-capture .tt-lrow.tt-picked::before {
        background: rgba(255, 255, 255, .06)
    }

    #tt-capture input[type=checkbox] {
        -webkit-appearance: none;
        appearance: none;
        width: 21px;
        height: 21px;
        border-radius: 50%;
        border: 1.5px solid rgba(255, 255, 255, .3);
        background: transparent;
        cursor: pointer;
        margin: 0;
        padding: 0;
        position: relative;
        flex-shrink: 0;
        vertical-align: middle;
        transition: background .15s, border-color .15s
    }

    #tt-capture input[type=checkbox]:hover {
        border-color: rgba(255, 255, 255, .55)
    }

    #tt-capture input[type=checkbox]:checked {
        background: #fff;
        border-color: #fff
    }

    #tt-capture input[type=checkbox]:checked::after {
        content: "";
        position: absolute;
        left: 7px;
        top: 3.5px;
        width: 5px;
        height: 10px;
        border: solid #000;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg)
    }

    #tt-capture input[type=checkbox]:focus-visible {
        outline: 2px solid rgba(255, 255, 255, .6);
        outline-offset: 2px
    }

    #tt-capture .tt-count {
        color: var(--tt-faint);
        font-weight: 400;
        font-size: 14px;
        margin-left: 6px
    }

    #tt-capture .tt-headtools {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: none
    }

    @media (max-width:720px) {
        #tt-capture .tt-cardhead {
            flex-wrap: wrap
        }

        #tt-capture .tt-headtools {
            flex-wrap: wrap;
            width: 100%;
            gap: 8px
        }

        #tt-capture .tt-searchrow {
            order: 3;
            width: 100%;
            margin-top: 2px
        }

        #tt-capture .tt-searchrow input,
        #tt-capture .tt-searchrow input:focus {
            width: 100%;
            flex: 1 1 auto
        }

        #tt-capture .tt-sortwrap {
            margin-left: auto
        }
    }

    #tt-capture .tt-tool-on {
        background: rgba(255, 255, 255, .12);
        color: #fff
    }

    #tt-capture .tt-picker {
        position: relative;
        display: inline-flex;
        align-items: center
    }

    #tt-capture .tt-pickbtn {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        background: rgba(255, 255, 255, .07);
        background-image: none;
        border: 0;
        color: var(--tt-muted);
        font-family: var(--tt-font);
        font-size: 15px;
        font-weight: 600;
        letter-spacing: -.01em;
        padding: 7px 12px 7px 14px;
        border-radius: 999px;
        cursor: pointer;
        white-space: nowrap;
        transition: background .15s, color .15s
    }

    #tt-capture .tt-pickbtn:hover {
        background: rgba(255, 255, 255, .12);
        background-image: none;
        color: #fff
    }

    #tt-capture .tt-pickchev {
        width: 14px;
        height: 14px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round;
        flex: none
    }

    #tt-capture .tt-menu-pick {
        min-width: 172px;
        left: auto;
        right: 0
    }

    #tt-capture .tt-mi-current {
        background: rgba(255, 255, 255, .08)
    }

    #tt-capture .tt-pickbtn-on {
        background: rgba(255, 255, 255, .14);
        color: #fff
    }

    #tt-capture .tt-mi-current span {
        color: #fff
    }

    #tt-capture .tt-searchrow {
        position: relative;
        display: flex;
        align-items: center;
        margin: 0
    }

    #tt-capture .tt-searchrow input {
        width: 190px;
        box-sizing: border-box;
        background: rgba(255, 255, 255, .07);
        border: 0 !important;
        outline: 0 !important;
        -webkit-appearance: none;
        appearance: none;
        color: #fff;
        font-family: var(--tt-font);
        font-size: 14px;
        padding: 8px 34px 8px 15px;
        border-radius: 999px;
        transition: background .15s, width .18s
    }

    #tt-capture .tt-searchrow input:hover {
        background: rgba(255, 255, 255, .12)
    }

    #tt-capture .tt-searchrow input:focus {
        background: rgba(255, 255, 255, .12);
        width: 240px
    }

    #tt-capture .tt-searchrow input::placeholder {
        color: var(--tt-faint)
    }

    #tt-capture .tt-searchrow input:-webkit-autofill,
    #tt-capture .tt-searchrow input:-webkit-autofill:hover,
    #tt-capture .tt-searchrow input:-webkit-autofill:focus {
        -webkit-box-shadow: 0 0 0 1000px #1c1c1e inset !important;
        box-shadow: 0 0 0 1000px #1c1c1e inset !important;
        -webkit-text-fill-color: #fff !important;
        caret-color: #fff;
        transition: background-color 9999s ease-in-out 0s
    }

    #tt-capture .tt-searchrow input::-webkit-search-cancel-button {
        -webkit-appearance: none;
        appearance: none
    }

    #tt-capture .tt-searchicon {
        position: absolute;
        right: 13px;
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        color: var(--tt-faint);
        pointer-events: none
    }

    #tt-capture .tt-searchrow input:focus~.tt-searchicon {
        color: var(--tt-muted)
    }

    #tt-capture .tt-selleft {
        display: flex;
        align-items: baseline;
        gap: 12px
    }

    #tt-capture .tt-selall {
        border: 0;
        background: transparent;
        background-image: none;
        color: #fff;
        font-family: var(--tt-font);
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        padding: 6px 12px;
        margin: -6px -12px;
        border-radius: 999px;
        text-decoration: underline;
        text-underline-offset: 3px;
        transition: background .12s
    }

    #tt-capture .tt-selall:hover {
        background: rgba(255, 255, 255, .1);
        background-image: none;
        color: #fff
    }

    #tt-capture .tt-act {
        display: inline-flex;
        align-items: center;
        gap: 8px
    }

    #tt-capture .tt-act svg {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
        flex: none
    }

    #tt-capture .tt-actionbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        flex-wrap: wrap;
        margin: 0 0 16px;
        padding: 12px 14px;
        border-radius: 14px;
        background: rgba(255, 255, 255, .04)
    }

    #tt-capture .tt-selcount {
        font-size: 14px;
        font-weight: 600;
        color: var(--tt-muted);
        letter-spacing: -.01em
    }

    #tt-capture .tt-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap
    }

    #tt-capture .tt-act {
        height: 38px;
        padding: 0 18px;
        font-size: 14px;
        font-weight: 600;
        font-family: var(--tt-font);
        border: 1px solid var(--tt-line2);
        border-radius: 999px;
        background: transparent;
        color: rgba(255, 255, 255, .8);
        cursor: pointer;
        width: auto;
        transition: background .15s, color .15s
    }

    #tt-capture .tt-act:hover {
        background: rgba(255, 255, 255, .08);
        background-image: none;
        color: #fff
    }

    #tt-capture .tt-act-danger {
        color: #ff453a;
        border-color: rgba(255, 69, 58, .35)
    }

    #tt-capture .tt-act-danger:hover {
        background: rgba(255, 69, 58, .14);
        background-image: none;
        border-color: rgba(255, 69, 58, .6);
        color: #ff453a
    }

    #tt-capture .tt-act-danger:disabled {
        opacity: .5;
        cursor: not-allowed
    }

    #tt-capture .tt-act-primary {
        background: #fff;
        border-color: #fff;
        color: #000;
        font-weight: 700
    }

    #tt-capture .tt-act-primary:hover {
        background: #e4e4e4;
        background-image: none;
        color: #000
    }

    #tt-capture .tt-actions select {
        height: 38px;
        padding: 0 14px;
        font-size: 14px;
        width: auto;
        border-radius: 999px
    }

    #tt-capture .tt-packs {
        margin: 30px 0 0
    }

    #tt-capture .tt-packstitle {
        font-size: 19px;
        font-weight: 700;
        letter-spacing: -.02em;
        text-transform: none;
        color: #fff;
        margin: 0 0 14px
    }

    #tt-capture .tt-packcard {
        margin: 0 0 10px
    }

    #tt-capture .tt-packhead {
        display: flex;
        align-items: center;
        gap: 14px;
        background: var(--tt-card2);
        border: 1px solid var(--tt-line2);
        border-radius: 14px;
        padding: 12px 16px;
        min-height: 92px;
        cursor: pointer;
        transition: background .15s, border-color .15s
    }

    #tt-capture .tt-packhead:hover {
        background: #212121;
        border-color: rgba(255, 255, 255, .16)
    }

    #tt-capture .tt-packname,
    #tt-capture .tt-packacts,
    #tt-capture .tt-packhead input[type=checkbox] {
        position: relative;
        z-index: 1
    }

    #tt-capture .tt-packchev {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
        stroke: var(--tt-faint);
        fill: none;
        stroke-width: 2.4;
        stroke-linecap: round;
        stroke-linejoin: round;
        cursor: pointer;
        transition: transform .18s, stroke .15s
    }

    #tt-capture .tt-packcard:hover .tt-packchev {
        stroke: #fff
    }

    #tt-capture .tt-packchev-open {
        transform: rotate(90deg)
    }

    #tt-capture .tt-packthumb {
        width: 68px;
        height: 68px;
        border-radius: 12px;
        overflow: hidden;
        flex-shrink: 0;
        background: var(--tt-card)
    }

    #tt-capture .tt-packthumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block
    }

    #tt-capture .tt-packthumb-empty {
        background: #000;
        border: 1px solid var(--tt-line);
        display: flex;
        align-items: center;
        justify-content: center
    }

    #tt-capture .tt-packthumb-empty .tt-glyph {
        width: 52%;
        height: 52%;
        stroke-width: 1.4
    }

    #tt-capture .tt-packinfo {
        flex: 1;
        min-width: 0
    }

    #tt-capture .tt-packnameline {
        display: flex;
        align-items: center;
        gap: 8px
    }

    #tt-capture .tt-packname {
        font-size: 19px;
        font-weight: 700;
        color: #fff;
        letter-spacing: -.02em;
        line-height: 1.25;
        cursor: text;
        padding: 2px 7px;
        margin: -2px -7px;
        border-radius: 7px;
        border: 1px solid transparent;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: background .12s, border-color .12s
    }

    #tt-capture .tt-packname:hover {
        border-color: var(--tt-line2);
        background: rgba(255, 255, 255, .05)
    }

    #tt-capture input.tt-packname-edit {
        font-size: 19px;
        font-weight: 700;
        color: #fff;
        letter-spacing: -.02em;
        background: rgba(255, 255, 255, .08);
        border: 1px solid rgba(255, 255, 255, .28);
        border-radius: 8px;
        padding: 3px 9px;
        font-family: var(--tt-font);
        width: 300px;
        max-width: 100%;
        height: auto;
        outline: none
    }

    #tt-capture input.tt-packname-edit:focus {
        border-color: rgba(255, 255, 255, .6);
        background: rgba(255, 255, 255, .12)
    }

    #tt-capture .tt-packsub {
        font-size: 14px;
        color: rgba(255, 255, 255, .45);
        margin-top: 4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    #tt-capture .tt-packacts {
        margin-left: auto;
        display: flex;
        gap: 8px;
        flex-shrink: 0;
        position: relative
    }

    #tt-capture .tt-rowacts {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        position: relative
    }

    #tt-capture .tt-rowacts .tt-menu {
        top: calc(100% + 6px)
    }

    #tt-capture .tt-more {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: none;
        padding: 0;
        background: rgba(255, 255, 255, .07);
        color: rgba(255, 255, 255, .75);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--tt-font);
        transition: background .15s, color .15s
    }

    #tt-capture .tt-more:hover,
    #tt-capture .tt-more-on {
        background: rgba(255, 255, 255, .16);
        background-image: none;
        color: #fff
    }

    #tt-capture .tt-more svg {
        width: 16px;
        height: 16px;
        fill: currentColor
    }

    #tt-capture .tt-abovefold {
        position: relative;
        z-index: 40
    }

    #tt-capture .tt-compare {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        border: 1px solid rgba(255, 255, 255, .18);
        background: transparent;
        color: var(--tt-muted);
        font-family: var(--tt-font);
        font-size: 14px;
        font-weight: 700;
        letter-spacing: -.01em;
        padding: 6px 14px;
        border-radius: 999px;
        cursor: pointer;
        white-space: nowrap;
        transition: background .15s, color .15s, border-color .15s
    }

    #tt-capture .tt-compare svg {
        width: 15px;
        height: 15px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round
    }

    #tt-capture .tt-compare:hover {
        background: rgba(255, 255, 255, .07);
        background-image: none;
        color: #fff;
        border-color: rgba(255, 255, 255, .32)
    }

    #tt-capture .tt-compare-on {
        background: #fff;
        background-image: none;
        border-color: #fff;
        color: #000
    }

    #tt-capture .tt-cmp {
        grid-column: 1 / -1;
        padding: 4px 0 18px
    }

    #tt-capture .tt-cmp-card {
        background: var(--tt-card2);
        border: 1px solid var(--tt-line2);
        border-radius: 18px;
        padding: 18px
    }

    #tt-capture .tt-cmp-top {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 18px
    }

    #tt-capture .tt-seg {
        display: inline-flex;
        background: rgba(255, 255, 255, .06);
        border-radius: 999px;
        padding: 4px;
        gap: 4px
    }

    #tt-capture .tt-segbtn {
        border: 0;
        background: transparent;
        background-image: none;
        color: var(--tt-muted);
        font-family: var(--tt-font);
        font-size: 15px;
        font-weight: 600;
        letter-spacing: -.01em;
        padding: 7px 22px;
        border-radius: 999px;
        cursor: pointer;
        transition: background .12s, color .12s
    }

    #tt-capture .tt-segbtn-on {
        background: #fff;
        color: #000
    }

    #tt-capture .tt-cmp-close {
        margin-left: auto;
        border: 0;
        background: transparent;
        background-image: none;
        color: var(--tt-faint);
        cursor: pointer;
        padding: 6px;
        border-radius: 999px;
        display: inline-flex;
        transition: color .12s, background .12s
    }

    #tt-capture .tt-cmp-close svg {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round
    }

    #tt-capture .tt-cmp-close:hover {
        background: rgba(255, 255, 255, .08);
        background-image: none;
        color: #fff
    }

    #tt-capture .tt-wave {
        position: relative;
        height: 96px;
        cursor: pointer
    }

    #tt-capture .tt-wave-canvas {
        display: block;
        width: 100%;
        height: 100%
    }

    #tt-capture .tt-wave-skeleton {
        background: linear-gradient(90deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .07), rgba(255, 255, 255, .03));
        border-radius: 10px;
        animation: tt-shimmer 1.4s linear infinite;
        background-size: 200% 100%
    }

    @keyframes tt-shimmer {
        0% {
            background-position: 100% 0
        }

        100% {
            background-position: -100% 0
        }
    }

    #tt-capture .tt-wave-head {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 2px;
        background: #fff;
        pointer-events: none;
        transition: left .06s linear
    }

    @media (prefers-reduced-motion:reduce) {
        #tt-capture .tt-wave-head {
            transition: none
        }

        #tt-capture .tt-wave-skeleton {
            animation: none
        }
    }

    #tt-capture .tt-wave-marks {
        position: relative;
        height: 20px;
        margin-top: 6px
    }

    #tt-capture .tt-wave-mark {
        position: absolute;
        transform: translateX(-50%);
        font-size: 13px;
        color: var(--tt-faint);
        white-space: nowrap
    }

    #tt-capture .tt-cmp-bar {
        display: flex;
        align-items: center;
        gap: 16px;
        margin: 14px 0 16px
    }

    #tt-capture .tt-play {
        height: 44px;
        padding: 0 20px;
        gap: 8px;
        border-radius: 999px;
        border: 0;
        background: #fff;
        background-image: none;
        color: #000;
        font-family: var(--tt-font);
        font-size: 15px;
        font-weight: 700;
        letter-spacing: -.01em;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none
    }

    #tt-capture .tt-play-word {
        pointer-events: none;
        min-width: 34px;
        text-align: left
    }

    #tt-capture .tt-play svg {
        pointer-events: none;
        width: 17px;
        height: 17px;
        flex: none;
        fill: currentColor;
        stroke: none
    }

    #tt-capture .tt-play:disabled {
        opacity: .4;
        cursor: not-allowed
    }

    #tt-capture .tt-cmp-clock {
        font-variant-numeric: tabular-nums;
        font-size: 14px;
        color: var(--tt-muted);
        letter-spacing: .02em
    }

    #tt-capture .tt-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 9px
    }

    #tt-capture .tt-chip {
        border: 0;
        background: rgba(255, 255, 255, .07);
        background-image: none;
        color: var(--tt-muted);
        font-family: var(--tt-font);
        font-size: 14px;
        font-weight: 600;
        letter-spacing: -.01em;
        padding: 8px 16px;
        border-radius: 999px;
        cursor: pointer;
        transition: background .12s, color .12s
    }

    #tt-capture .tt-chip:hover {
        background: rgba(255, 255, 255, .12);
        color: #fff
    }

    #tt-capture .tt-chip-on {
        background: #fff;
        color: #000
    }

    #tt-capture .tt-cmp-foot {
        display: flex;
        align-items: center;
        margin-top: 16px;
        padding-top: 14px;
        border-top: 1px solid var(--tt-line)
    }

    #tt-capture .tt-cmp-hint {
        font-size: 14px;
        color: var(--tt-faint)
    }

    #tt-capture .tt-cmp-hint kbd {
        font-family: var(--tt-font);
        font-weight: 700;
        color: var(--tt-muted);
        background: rgba(255, 255, 255, .08);
        border-radius: 5px;
        padding: 1px 6px;
        font-size: 13px
    }

    #tt-capture .tt-cmp-waiting {
        text-align: center;
        padding: 30px 18px 34px
    }

    #tt-capture .tt-cmp-spin {
        width: 28px;
        height: 28px;
        display: block;
        margin: 22px auto 0
    }

    #tt-capture .tt-cmp-spin rect {
        fill: #fff;
        animation: tt-spin-fade 1s linear infinite
    }

    @media (prefers-reduced-motion:reduce) {
        #tt-capture .tt-cmp-spin rect {
            animation: none;
            opacity: .45
        }
    }

    #tt-capture .tt-cmp-prep {
        font-size: 17px;
        font-weight: 600;
        letter-spacing: -.01em;
        color: #fff;
        margin-bottom: 6px
    }

    #tt-capture .tt-cmp-status {
        margin-top: 12px;
        font-size: 14px;
        color: var(--tt-faint)
    }

    #tt-capture .tt-cmp-status-bad {
        color: var(--tt-amber)
    }

    #tt-capture .tt-cmp-retry {
        border: 0;
        background: transparent;
        background-image: none;
        color: #fff;
        text-decoration: underline;
        cursor: pointer;
        font-family: var(--tt-font);
        font-size: 14px;
        padding: 0
    }

    @media (max-width:640px) {
        #tt-capture .tt-cmp-top {
            flex-wrap: nowrap;
            gap: 10px;
            margin-bottom: 14px
        }

        #tt-capture .tt-menu-pick {
            left: 0;
            right: auto;
            min-width: 160px
        }

        #tt-capture .tt-segbtn {
            padding: 7px 16px;
            font-size: 14px
        }

        #tt-capture .tt-wave-marks {
            display: none
        }

        #tt-capture .tt-cmp-bar {
            gap: 12px;
            margin: 12px 0 14px
        }

        #tt-capture .tt-chips {
            gap: 7px
        }

        #tt-capture .tt-chip {
            font-size: 13px;
            padding: 7px 13px
        }

        #tt-capture .tt-wave {
            height: 76px
        }

        #tt-capture .tt-cmp-foot {
            flex-direction: column;
            align-items: flex-start;
            gap: 8px
        }

        #tt-capture .tt-cmp-card {
            padding: 14px
        }
    }

    #tt-capture .tt-menu {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        min-width: 268px;
        background: #1c1c1e;
        border: 1px solid rgba(255, 255, 255, .12);
        border-radius: 13px;
        padding: 5px;
        z-index: 60;
        box-shadow: 0 16px 38px rgba(0, 0, 0, .65);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-4px) scale(.97);
        transform-origin: top right;
        transition: opacity .13s, transform .13s, visibility .13s
    }

    #tt-capture .tt-menu-open {
        opacity: 1;
        visibility: visible;
        transform: none
    }

    #tt-capture .tt-mi {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        width: 100%;
        border: none;
        background: none;
        padding: 10px 12px;
        border-radius: 9px;
        font-family: var(--tt-font);
        font-size: 15px;
        font-weight: 500;
        color: #fff;
        text-align: left;
        cursor: pointer;
        letter-spacing: -.01em;
        transition: background .12s
    }

    #tt-capture .tt-mi:hover {
        background: rgba(255, 255, 255, .1);
        background-image: none;
        color: #fff
    }

    #tt-capture .tt-mi span {
        white-space: nowrap
    }

    #tt-capture .tt-mi svg.tt-mi-solid {
        fill: currentColor;
        stroke: none
    }

    #tt-capture .tt-mi svg {
        width: 15px;
        height: 15px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
        flex-shrink: 0;
        opacity: .75
    }

    #tt-capture .tt-mi-danger {
        color: #ff453a
    }

    #tt-capture .tt-mi-danger:hover {
        background: rgba(255, 69, 58, .14);
        color: #ff453a
    }

    #tt-capture .tt-mi-pane-off {
        display: none
    }

    #tt-capture .tt-mi-back span {
        color: var(--tt-muted)
    }

    #tt-capture .tt-mi-back svg {
        order: -1;
        margin-right: -4px
    }

    #tt-capture .tt-mi-back {
        justify-content: flex-start;
        gap: 10px
    }

    #tt-capture .tt-mi-sep {
        height: 1px;
        background: rgba(255, 255, 255, .1);
        margin: 5px 7px
    }

    #tt-capture .tt-packbody {
        display: none;
        padding: 2px 0 6px
    }

    #tt-capture .tt-packs,
    #tt-capture .tt-packcard,
    #tt-capture .tt-packbody {
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0
    }

    #tt-capture .tt-packbody-open {
        display: block
    }

    #tt-capture .tt-status {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        font-size: 13px;
        font-weight: 600;
        padding: 3px 11px;
        border-radius: 999px;
        background: var(--tt-card2);
        color: var(--tt-muted);
        white-space: nowrap;
        letter-spacing: -.01em;
        min-width: 104px;
        box-sizing: border-box
    }

    #tt-capture .tt-badgespin,
    #tt-capture .tt-badgetick {
        width: 11px;
        height: 11px;
        flex: none;
        display: block
    }

    #tt-capture .tt-badgetick path {
        fill: none;
        stroke: currentColor;
        stroke-width: 13;
        stroke-linecap: round;
        stroke-linejoin: round
    }

    #tt-capture .tt-badgespin rect {
        fill: currentColor;
        animation: tt-spin-fade 1s linear infinite
    }

    @media (prefers-reduced-motion:reduce) {
        #tt-capture .tt-badgespin rect {
            animation: none;
            opacity: .5
        }
    }

    #tt-capture .tt-status.run {
        color: var(--tt-amber);
        background: rgba(255, 194, 0, .1)
    }

    #tt-capture .tt-status.ok {
        color: var(--tt-green);
        background: rgba(11, 251, 45, .1)
    }

    #tt-capture .tt-status.bad {
        color: var(--tt-red);
        background: rgba(255, 77, 79, .1)
    }

    #tt-capture .tt-scorewrap {
        position: relative;
        display: inline-block;
        cursor: default
    }

    #tt-capture .tt-status~.tt-tip,
    #tt-capture .tt-scorewrap .tt-status+.tt-tip {
        white-space: normal;
        width: 260px;
        text-align: left;
        line-height: 1.45
    }

    #tt-capture .tt-tip {
        position: absolute;
        bottom: calc(100% + 9px);
        left: 50%;
        transform: translateX(-50%) translateY(3px);
        background: rgba(38, 38, 40, .96);
        backdrop-filter: saturate(180%) blur(20px);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        color: #fff;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: -.01em;
        line-height: 1.35;
        padding: 7px 11px;
        border-radius: 8px;
        white-space: nowrap;
        box-shadow: 0 6px 22px rgba(0, 0, 0, .55);
        border: 1px solid rgba(255, 255, 255, .09);
        opacity: 0;
        visibility: hidden;
        transition: opacity .16s ease, transform .16s ease, visibility .16s;
        pointer-events: none;
        z-index: 50
    }

    #tt-capture .tt-tip::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 5px solid transparent;
        border-top-color: rgba(38, 38, 40, .96)
    }

    #tt-capture .tt-scorewrap:hover .tt-tip,
    #tt-capture .tt-scorewrap:focus-visible .tt-tip {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0)
    }

    #tt-capture .tt-scorewrap:focus-visible {
        outline: 2px solid var(--tt-amber);
        outline-offset: 3px;
        border-radius: 4px
    }

    @media (max-width:640px) {
        #tt-capture .tt-tip {
            white-space: normal;
            width: 180px
        }
    }

    #tt-capture .tt-qlty {
        font-weight: 700;
        letter-spacing: -.02em
    }

    #tt-capture .tt-qlty-live {
        color: var(--tt-muted);
        font-weight: 600
    }

    #tt-capture .tt-livemark {
        font-size: 12px;
        color: var(--tt-faint);
        margin-left: 6px;
        letter-spacing: -.01em
    }

    #tt-capture .tt-sub.tt-sub-warn {
        color: var(--tt-amber)
    }

    #tt-capture .tt-lrow>.tt-draghint {
        position: absolute;
        left: 44px;
        top: -6px;
        z-index: 20;
        background: rgba(38, 38, 40, .96);
        backdrop-filter: saturate(180%) blur(20px);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        border: 1px solid rgba(255, 255, 255, .09);
        box-shadow: 0 6px 22px rgba(0, 0, 0, .55);
        color: #fff;
        font-size: 12px;
        font-weight: 500;
        letter-spacing: -.01em;
        padding: 5px 11px;
        border-radius: 8px;
        white-space: nowrap;
        text-align: center;
        pointer-events: none;
        opacity: 0;
        transform: translateY(3px);
        transition: opacity .16s ease, transform .16s ease
    }

    #tt-capture .tt-lrow>.tt-draghint-on {
        opacity: 1;
        transform: none
    }

    #tt-capture .tt-sub {
        font-size: 13px;
        color: var(--tt-faint);
        display: block;
        margin-top: 1px
    }

    #tt-capture .tt-empty {
        color: var(--tt-faint);
        font-size: 15px;
        padding: 26px 0;
        text-align: center
    }

    #tt-capture .tt-dl {
        display: inline-block;
        border: none;
        cursor: pointer;
        font-family: var(--tt-font);
        background: #fff;
        color: #000;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: -.01em;
        text-decoration: none;
        padding: 7px 16px;
        border-radius: 999px;
        white-space: nowrap;
        min-width: 108px;
        text-align: center;
        transition: background .15s
    }

    #tt-capture .tt-dl:hover {
        background: #dcdcdc;
        background-image: none;
        color: #000
    }

    #tt-capture .tt-live-note .tt-dl {
        margin-left: 2px
    }

    @media (max-width:640px) {
        #tt-capture {
            padding: 110px 20px 72px
        }

        #tt-capture h1 {
            font-size: 27px
        }

        #tt-capture .tt-card {
            padding: 18px;
            border-radius: 16px
        }

        #tt-capture .tt-lrow>*:nth-child(4),
        #tt-capture .tt-lrow>*:nth-child(5) {
            display: none
        }
    }

    #tt-capture .tt-mine-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        align-items: stretch
    }

    #tt-capture .tt-mine-grid>* {
        min-width: 0
    }

    #tt-capture .tt-mine-cell {
        display: flex;
        flex-direction: column
    }

    #tt-capture .tt-mine-cell-open {
        grid-column: 1 / -1
    }

    #tt-capture .tt-mine-cell>.tt-mine-row {
        flex: 1 1 auto
    }

    #tt-capture .tt-mine-row {
        background: var(--tt-card2);
        border: 1px solid var(--tt-line2);
        border-radius: 14px;
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 12px 16px;
        min-height: 96px;
        cursor: pointer;
        transition: background .2s
    }

    #tt-capture .tt-mine-row:hover {
        background: #212121
    }

    #tt-capture .tt-mine-row-static {
        cursor: default
    }

    #tt-capture .tt-mine-row-static:hover {
        background: var(--tt-card)
    }

    #tt-capture .tt-mine-chev {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
        transition: transform .2s
    }

    #tt-capture .tt-mine-chev-open {
        transform: rotate(90deg)
    }

    #tt-capture .tt-mine-thumb {
        width: 68px;
        height: 68px;
        border-radius: 10px;
        overflow: hidden;
        flex-shrink: 0;
        background: var(--tt-card2)
    }

    #tt-capture .tt-mine-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block
    }

    #tt-capture .tt-mine-thumb-empty {
        background: #000;
        border: 1px solid var(--tt-line)
    }

    #tt-capture .tt-mine-info {
        flex: 1;
        min-width: 0
    }

    #tt-capture .tt-mine-name {
        font-size: 19px;
        font-weight: 700;
        letter-spacing: -.02em;
        color: #fff;
        line-height: 1.25;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    #tt-capture .tt-mine-editable {
        cursor: text;
        padding: 2px 7px;
        margin: -2px -7px;
        border-radius: 7px;
        border: 1px solid transparent;
        transition: background .12s, border-color .12s
    }

    #tt-capture .tt-mine-editable:hover {
        border-color: var(--tt-line2);
        background: rgba(255, 255, 255, .05)
    }

    #tt-capture .tt-mine-kid-name.tt-mine-editable {
        padding: 1px 6px;
        margin: -1px -6px
    }

    #tt-capture input.tt-mine-name-edit {
        font-size: 19px;
        font-weight: 700;
        color: #fff;
        letter-spacing: -.02em;
        background: rgba(255, 255, 255, .08);
        border: 1px solid rgba(255, 255, 255, .28);
        border-radius: 8px;
        padding: 3px 9px;
        font-family: var(--tt-font);
        width: 100%;
        max-width: 100%;
        height: auto;
        outline: none
    }

    #tt-capture input.tt-mine-name-edit:focus {
        border-color: rgba(255, 255, 255, .6);
        background: rgba(255, 255, 255, .12)
    }

    #tt-capture input.tt-mine-name-edit-sm {
        font-size: 17px;
        font-weight: 600
    }

    #tt-capture .tt-mine-sub {
        font-size: 14px;
        color: rgba(255, 255, 255, .4);
        margin-top: 3px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    #tt-capture .tt-mine-count {
        font-size: 13px;
        color: #EDF11E;
        margin-top: 3px
    }

    #tt-capture .tt-mine-actions {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
        position: relative
    }

    #tt-capture .tt-mine-actions .tt-menu {
        top: calc(100% + 6px);
        min-width: 220px
    }

    #tt-capture .tt-mine-img {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: none;
        padding: 0;
        background: rgba(255, 255, 255, .08);
        color: rgba(255, 255, 255, .75);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        opacity: 0;
        transition: opacity .15s, background .15s, color .15s
    }

    #tt-capture .tt-mine-row:hover .tt-mine-img,
    #tt-capture .tt-mine-img:focus-visible {
        opacity: 1
    }

    #tt-capture .tt-mine-img:hover {
        background: rgba(255, 255, 255, .16);
        background-image: none;
        color: #fff
    }

    #tt-capture .tt-mine-img svg {
        width: 15px;
        height: 15px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round
    }

    #tt-capture .tt-mine-dls {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 14px;
        font-weight: 600;
        color: rgba(255, 255, 255, .45);
        min-width: 40px;
        justify-content: flex-end
    }

    #tt-capture .tt-mine-dlicon {
        width: 14px;
        height: 14px;
        flex: none;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round
    }

    #tt-capture .tt-mine-kids {
        display: none;
        flex-direction: column;
        gap: 4px;
        margin: 4px 0
    }

    #tt-capture .tt-mine-kids-open {
        display: flex
    }

    #tt-capture .tt-mine-kid {
        background: var(--tt-card);
        border: 1px solid var(--tt-line);
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 14px;
        min-height: 56px;
        cursor: default
    }

    #tt-capture .tt-mine-kid .tt-mine-thumb {
        width: 38px;
        height: 38px;
        border-radius: 8px
    }

    #tt-capture .tt-mine-kid-name {
        font-size: 17px;
        font-weight: 600;
        color: #ccc;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    #tt-capture .tt-mine-kid-sub {
        font-size: 14px;
        color: rgba(255, 255, 255, .3);
        margin-top: 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    #tt-capture .tt-mine-empty {
        color: var(--tt-faint);
        font-size: 15px;
        padding: 26px 0;
        text-align: center
    }

    #tt-capture .tt-mine-empty-sub {
        font-size: 14px;
        margin-top: 6px;
        color: rgba(255, 255, 255, .25)
    }

    @media (max-width:1000px) {
        #tt-capture .tt-mine-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr))
        }
    }

    @media (max-width:640px) {
        #tt-capture .tt-mine-grid {
            grid-template-columns: minmax(0, 1fr)
        }

        #tt-capture .tt-mine-row {
            min-height: 84px;
            padding: 12px
        }

        #tt-capture .tt-mine-thumb {
            width: 56px;
            height: 56px
        }

        #tt-capture .tt-mine-name {
            font-size: 17px
        }
    }

    @media (prefers-reduced-motion:reduce) {
        #tt-capture * {
            transition: none !important
        }
    }

    #tt-capture .tt-table {
        --tt-cols: 0px minmax(0, 30fr) minmax(0, 14fr) minmax(0, 11fr) minmax(0, 11fr) minmax(0, 13fr) minmax(0, 21fr);
        display: block;
        width: 100%;
        font-size: 15px
    }

    #tt-capture .tt-table.tt-selmode {
        --tt-cols: 38px minmax(0, 30fr) minmax(0, 14fr) minmax(0, 11fr) minmax(0, 11fr) minmax(0, 13fr) minmax(0, 21fr)
    }

    #tt-capture .tt-lrow {
        display: grid;
        grid-template-columns: var(--tt-cols);
        align-items: center;
        border-top: 1px solid var(--tt-line);
        position: relative
    }

    #tt-capture .tt-lrow>* {
        padding: 13px 12px 13px 0;
        min-width: 0;
        overflow-wrap: anywhere
    }

    #tt-capture .tt-lhead {
        border-top: none;
        border-bottom: 1px solid var(--tt-line)
    }

    #tt-capture .tt-lhead>* {
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--tt-faint);
        font-weight: 600;
        padding-bottom: 10px
    }

    #tt-capture .tt-lrow>*:last-child {
        padding-right: 0;
        text-align: right
    }

    #tt-capture .tt-capnamewrap {
        display: flex;
        align-items: center;
        gap: 11px;
        min-width: 0
    }

    #tt-capture .tt-capthumb {
        width: 34px;
        height: 34px;
        border-radius: 8px;
        overflow: hidden;
        flex-shrink: 0;
        background: var(--tt-card2)
    }

    #tt-capture .tt-capthumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block
    }

    #tt-capture .tt-capthumb-empty {
        background: #000;
        border: 1px solid var(--tt-line);
        display: flex;
        align-items: center;
        justify-content: center
    }

    #tt-capture .tt-glyph {
        width: 58%;
        height: 58%;
        fill: none;
        stroke: rgba(255, 255, 255, .45);
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
        display: block
    }

    #tt-capture .tt-capnametext {
        min-width: 0;
        overflow-wrap: anywhere
    }

    #tt-capture input.tt-capname-edit {
        width: 100%;
        font-size: 15px;
        font-family: var(--tt-font);
        color: #fff;
        background: rgba(255, 255, 255, .08);
        border: 1px solid rgba(255, 255, 255, .28);
        border-radius: 8px;
        padding: 4px 9px;
        margin: -4px 0;
        height: auto;
        outline: none
    }

    #tt-capture input.tt-capname-edit:focus {
        border-color: rgba(255, 255, 255, .6);
        background: rgba(255, 255, 255, .12)
    }

    #tt-capture .tt-lrow::before {
        content: "";
        position: absolute;
        top: 1px;
        bottom: 0;
        left: -12px;
        right: -12px;
        border-radius: 14px;
        background: transparent;
        transition: background .12s ease;
        pointer-events: none;
        z-index: 0
    }

    #tt-capture .tt-lrow>* {
        position: relative;
        z-index: 1
    }

    @media (hover:hover) {

        #tt-capture .tt-rows-drag .tt-lrow:hover::before,
        #tt-capture .tt-packbody .tt-lrow:hover::before {
            background: rgba(255, 255, 255, .035)
        }

        #tt-capture .tt-lrow.tt-picked:hover::before {
            background: rgba(255, 255, 255, .07)
        }
    }

    #tt-capture .tt-rows-drag .tt-lrow,
    #tt-capture .tt-packbody .tt-lrow {
        touch-action: pan-y
    }

    #tt-capture .tt-lrow.tt-dragrow {
        border-top-color: transparent;
        z-index: 5;
        cursor: grabbing;
        scale: 1.012;
        transition: scale .16s ease
    }

    #tt-capture .tt-lrow.tt-dragrow::before {
        background: #1c1c1e;
        box-shadow: 0 16px 34px rgba(0, 0, 0, .6)
    }

    #tt-capture .tt-capnamewrap {
        cursor: grab
    }

    body.tt-dragging,
    body.tt-dragging * {
        -webkit-user-select: none;
        user-select: none;
        cursor: grabbing !important
    }

    #tt-capture .tt-lrow.tt-picked::before {
        background: rgba(255, 255, 255, .045)
    }

    #tt-capture .tt-lrow>.tt-empty {
        grid-column: 1 / -1
    }

    #tt-capture .tt-packbody .tt-lrow>*:nth-child(2) {
        padding-left: 22px
    }

    #tt-gate {
        position: fixed;
        inset: 0;
        z-index: 200;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        background: rgba(0, 0, 0, .72);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        font-family: var(--tt-font);
        color: var(--tt-ink)
    }

    #tt-gate .tt-gate-card {
        position: relative;
        width: 100%;
        max-width: 440px;
        background: #141414;
        border: 1px solid #141414;
        border-radius: 40px;
        padding: 40px 28px 40px;
        text-align: center;
        box-shadow: 0 8px 32px rgba(0, 0, 0, .4);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px)
    }

    #tt-gate h2 {
        font-size: 34px;
        line-height: 1.18;
        font-weight: 700;
        letter-spacing: -.02em;
        color: #fff;
        margin: 0 0 14px;
        text-transform: none
    }

    #tt-gate .tt-gate-sub {
        font-size: 14px;
        color: #bfbebf;
        margin: 0 0 20px;
        line-height: 1.5
    }

    #tt-gate .tt-gate-x {
        position: absolute;
        top: 18px;
        right: 18px;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: none;
        background: rgba(255, 255, 255, .07);
        color: rgba(255, 255, 255, .7);
        font-size: 20px;
        line-height: 1;
        cursor: pointer;
        font-family: var(--tt-font)
    }

    #tt-gate .tt-gate-x:hover {
        background: rgba(255, 255, 255, .14);
        background-image: none;
        color: #fff
    }

    #tt-gate .tt-gate-cta {
        display: block;
        text-align: center;
        background: #fff;
        color: #000;
        font-weight: 700;
        font-size: 15px;
        padding: 14px 20px;
        border-radius: 999px;
        text-decoration: none;
        letter-spacing: -.01em
    }

    #tt-gate .tt-gate-cta:hover {
        background: #e4e4e4
    }

    #tt-gate button.tt-gate-cta-btn {
        border: 0;
        width: 100%;
        cursor: pointer;
        font-family: inherit
    }

    #tt-gate .tt-setup {
        text-align: left;
        margin: 0 0 26px
    }

    #tt-gate .tt-setup-step {
        display: flex;
        gap: 14px;
        margin-bottom: 16px
    }

    #tt-gate .tt-setup-n {
        flex: none;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .07);
        border: 1px solid rgba(255, 255, 255, .12);
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        letter-spacing: -.01em
    }

    #tt-gate .tt-setup-t {
        font-size: 14px;
        color: rgba(255, 255, 255, .75);
        line-height: 1.5
    }

    #tt-gate .tt-setup-t b {
        color: #fff;
        font-weight: 600
    }

    @media (max-width:480px) {
        #tt-gate .tt-gate-card {
            padding: 26px 20px 20px
        }
    }

    #tt-gate .tt-spinner {
        display: block;
        width: 32px;
        height: 32px;
        margin: 34px auto 8px
    }

    #tt-gate .tt-spinner svg {
        width: 100%;
        height: 100%;
        display: block
    }

    #tt-gate .tt-spinner rect {
        fill: #fff;
        animation: tt-spin-fade 1s linear infinite
    }

    @keyframes tt-spin-fade {
        0% {
            opacity: 1
        }

        100% {
            opacity: .15
        }
    }

    @media (prefers-reduced-motion:reduce) {
        #tt-gate .tt-spinner rect {
            animation: none;
            opacity: .45
        }
    }

    #tt-gate .tt-lgfield {
        margin-bottom: 15px
    }

    #tt-gate .tt-lglbl {
        display: none
    }

    #tt-gate input {
        width: 100%;
        padding: 18px 22px;
        font-size: 16px;
        font-family: var(--tt-font);
        border: 0 !important;
        outline: 0 !important;
        -webkit-appearance: none;
        appearance: none;
        border-radius: 12px;
        background-color: #272727 !important;
        background-clip: padding-box;
        color: #fff;
        box-sizing: border-box;
        transition: background-color .2s ease
    }

    #tt-gate input::placeholder {
        color: rgba(255, 255, 255, .45);
        -webkit-text-fill-color: rgba(255, 255, 255, .45);
        opacity: 1
    }

    #tt-gate input:placeholder-shown {
        background-color: #272727 !important;
        color: rgba(255, 255, 255, .45) !important;
        -webkit-text-fill-color: rgba(255, 255, 255, .45) !important;
        box-shadow: none !important;
        -webkit-box-shadow: none !important
    }

    #tt-gate input:not(:placeholder-shown) {
        background-color: #272727 !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
        box-shadow: none !important;
        -webkit-box-shadow: none !important
    }

    #tt-gate input:focus {
        border: 0 !important;
        outline: 0 !important;
        background-color: #303030 !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
        box-shadow: none !important;
        -webkit-box-shadow: none !important
    }

    #tt-gate input:-webkit-autofill,
    #tt-gate input:-webkit-autofill:hover,
    #tt-gate input:-webkit-autofill:focus,
    #tt-gate input:-webkit-autofill:active {
        background-color: transparent !important;
        background-image: none !important;
        border: 0 !important;
        outline: 0 !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        -webkit-box-shadow: 0 0 0 1000px #272727 inset !important;
        box-shadow: 0 0 0 1000px #272727 inset !important;
        -webkit-text-fill-color: #fff !important;
        caret-color: #fff;
        transition: background-color 9999s ease-in-out 0s
    }

    #tt-gate input:-webkit-autofill:focus {
        -webkit-box-shadow: 0 0 0 1000px #303030 inset !important;
        box-shadow: 0 0 0 1000px #303030 inset !important
    }

    #tt-gate input:autofill,
    #tt-gate input:autofill:hover,
    #tt-gate input:autofill:focus {
        background-color: transparent !important;
        border: 0 !important;
        -webkit-box-shadow: 0 0 0 1000px #272727 inset !important;
        box-shadow: 0 0 0 1000px #272727 inset !important;
        -webkit-text-fill-color: #fff !important
    }

    #tt-gate .tt-signin-btn {
        width: 100%;
        background: #fff;
        color: #000;
        border: none;
        padding: 16px;
        font-size: 17px;
        font-weight: 700;
        font-family: var(--tt-font);
        border-radius: 50px;
        cursor: pointer;
        margin-top: 8px;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px
    }

    #tt-gate .tt-signin-btn:hover:not(:disabled) {
        background: #efefef;
        background-image: none;
        color: #000
    }

    #tt-gate .tt-signin-btn:disabled {
        background: rgba(255, 255, 255, .15);
        color: rgba(255, 255, 255, .4);
        cursor: not-allowed
    }

    #tt-gate .tt-lgerr {
        color: #e42c2c;
        background-color: rgba(0, 0, 0, .5);
        border: 1px solid #ffdddd;
        padding: 10px;
        border-radius: 10px;
        margin-top: 14px;
        text-align: left;
        font-size: 14px;
        box-sizing: border-box
    }

    #tt-gate .tt-lgalt {
        display: flex;
        justify-content: space-between;
        margin: 20px 0 0;
        font-size: 14px;
        color: #bfbebf
    }

    #tt-gate .tt-lgalt a {
        color: #bfbebf;
        text-decoration: none;
        border: none;
        transition: color .3s ease-in-out
    }

    #tt-gate .tt-lgalt a:hover {
        color: #fff
    }

    #tt-gate .tt-lgdot {
        display: none
    }

    @media (max-width:640px) {

        #tt-capture .tt-lhead,
        #tt-capture .tt-lrow.tt-lhead {
            display: none !important
        }

        #tt-capture .tt-lrow {
            display: flex !important;
            flex-wrap: wrap !important;
            align-items: center;
            row-gap: 9px;
            column-gap: 10px;
            padding: 14px 0;
            grid-template-columns: none !important
        }

        #tt-capture .tt-lrow>* {
            padding: 0;
            min-width: 0;
            grid-area: auto !important
        }

        #tt-capture .tt-lrow>*:nth-child(1) {
            flex: 0 0 auto;
            order: 1
        }

        #tt-capture .tt-lrow>*:nth-child(2) {
            flex: 1 1 auto;
            order: 2;
            min-width: 0
        }

        #tt-capture .tt-lrow>*:nth-child(3) {
            flex: 0 0 auto;
            order: 3
        }

        #tt-capture .tt-lrow>*:nth-child(6) {
            flex: 0 0 auto;
            order: 4;
            color: var(--tt-faint)
        }

        #tt-capture .tt-lrow>*:nth-child(7) {
            flex: 1 0 100%;
            order: 5
        }

        #tt-capture .tt-rowacts {
            justify-content: flex-start !important;
            flex-wrap: wrap !important;
            gap: 8px;
            min-width: 0
        }

        #tt-capture .tt-lrow>*:nth-child(2) {
            flex-basis: calc(100% - 46px)
        }

        #tt-capture .tt-lrow .tt-status,
        #tt-capture .tt-lrow .tt-dl {
            max-width: 100%
        }

        #tt-capture .tt-lrow>.tt-cmp {
            flex: 1 0 100%;
            order: 6
        }

        #tt-capture .tt-packbody .tt-lrow>*:nth-child(2) {
            padding-left: 0
        }

        #tt-capture .tt-table {
            font-size: 14px
        }

        #tt-capture .tt-capnamewrap {
            gap: 9px
        }

        #tt-capture .tt-capthumb {
            width: 30px;
            height: 30px;
            border-radius: 7px
        }

        #tt-capture .tt-empty {
            padding: 18px 0
        }
    }
    /* ============================================================
       Dialogs and toasts
       ------------------
       Everything that used to be a browser alert or confirm is drawn
       here instead, so a question about deleting something looks like
       it came from this page rather than from Chrome.

       Both layers sit on document.body rather than inside #tt-capture:
       a fixed overlay inside a transformed PageFly wrapper positions
       itself against that wrapper instead of the window, which is how a
       centred dialog ends up half off the screen. So these rules are
       deliberately unscoped and repeat the font stack rather than
       inheriting it, and they overrule the theme's own button styling
       the same way the rest of this block does.
       ============================================================ */

    #tt-toasts {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 28px;
        z-index: 10050;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 0 16px;
        pointer-events: none;
        font-family: 'SF Pro', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif
    }

    .tt-toast {
        pointer-events: auto;
        display: inline-flex;
        align-items: center;
        gap: 11px;
        max-width: 440px;
        background: rgba(38, 38, 40, .94);
        backdrop-filter: saturate(180%) blur(22px);
        -webkit-backdrop-filter: saturate(180%) blur(22px);
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: 999px;
        padding: 12px 22px 12px 16px;
        color: #fff;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: -.01em;
        line-height: 1.35;
        text-align: left;
        box-shadow: 0 16px 44px rgba(0, 0, 0, .55);
        cursor: default;
        opacity: 0;
        transform: translateY(12px) scale(.96);
        transition: opacity .22s ease, transform .22s cubic-bezier(.2, .9, .3, 1)
    }

    .tt-toast-in {
        opacity: 1;
        transform: none
    }

    .tt-toast-out {
        opacity: 0;
        transform: translateY(6px) scale(.97)
    }

    .tt-toast-ic {
        width: 20px;
        height: 20px;
        flex: none;
        display: block;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round
    }

    .tt-toast-ok .tt-toast-ic {
        color: #0bfb2d
    }

    .tt-toast-error .tt-toast-ic {
        color: #ff453a
    }

    .tt-toast-info .tt-toast-ic {
        color: rgba(255, 255, 255, .6)
    }

    .tt-toast-busy .tt-toast-ic {
        color: rgba(255, 255, 255, .85);
        stroke: none
    }

    .tt-toast-busy .tt-toast-ic rect {
        fill: currentColor;
        animation: tt-spin-fade 1s linear infinite
    }

    .tt-toast-msg {
        min-width: 0
    }

    .tt-toast-long {
        align-items: flex-start;
        border-radius: 18px;
        max-width: 480px;
        font-weight: 500;
        line-height: 1.45
    }

    .tt-toast-long .tt-toast-ic {
        margin-top: 1px
    }

    @media (max-width:640px) {
        #tt-toasts {
            bottom: 16px
        }

        .tt-toast {
            font-size: 14px;
            padding: 11px 18px 11px 14px
        }
    }

    .tt-dlg-wrap {
        position: fixed;
        inset: 0;
        z-index: 10000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        font-family: 'SF Pro', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif
    }

    .tt-dlg-back {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, .68);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        opacity: 0;
        transition: opacity .2s ease
    }

    .tt-dlg-wrap-in .tt-dlg-back {
        opacity: 1
    }

    .tt-dlg {
        position: relative;
        width: 100%;
        max-width: 430px;
        background: #141414;
        border: 1px solid rgba(255, 255, 255, .07);
        border-radius: 28px;
        padding: 32px 28px 24px;
        text-align: center;
        color: #fff;
        box-shadow: 0 30px 80px rgba(0, 0, 0, .7);
        opacity: 0;
        transform: translateY(10px) scale(.95);
        transition: opacity .2s ease, transform .2s cubic-bezier(.2, .9, .3, 1)
    }

    .tt-dlg-wrap-in .tt-dlg {
        opacity: 1;
        transform: none
    }

    .tt-dlg-icon {
        width: 54px;
        height: 54px;
        border-radius: 50%;
        margin: 0 auto 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, .07)
    }

    .tt-dlg-icon svg {
        width: 25px;
        height: 25px;
        fill: none;
        stroke: #fff;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round
    }

    .tt-dlg-danger .tt-dlg-icon {
        background: rgba(255, 69, 58, .14)
    }

    .tt-dlg-danger .tt-dlg-icon svg {
        stroke: #ff453a
    }

    .tt-dlg-title {
        font-size: 22px;
        font-weight: 700;
        letter-spacing: -.02em;
        line-height: 1.25;
        margin: 0 0 10px;
        text-transform: none;
        color: #fff
    }

    .tt-dlg-body {
        font-size: 15px;
        font-weight: 400;
        line-height: 1.5;
        color: rgba(255, 255, 255, .6);
        margin: 0 0 9px
    }

    .tt-dlg-body:last-child {
        margin-bottom: 0
    }

    .tt-dlg-acts {
        display: flex;
        gap: 10px;
        margin-top: 24px
    }

    .tt-dlg-btn {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        height: auto;
        margin: 0;
        border: 0;
        border-radius: 999px;
        padding: 14px 18px;
        font-family: 'SF Pro', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: -.01em;
        line-height: 1.2;
        text-transform: none;
        background-image: none;
        box-shadow: none;
        cursor: pointer;
        transition: background .15s, color .15s
    }

    .tt-dlg-cancel {
        background: rgba(255, 255, 255, .09);
        color: #fff
    }

    .tt-dlg-cancel:hover {
        background: rgba(255, 255, 255, .15);
        background-image: none;
        color: #fff
    }

    .tt-dlg-go {
        background: #fff;
        color: #000
    }

    .tt-dlg-go:hover {
        background: #e4e4e4;
        background-image: none;
        color: #000
    }

    .tt-dlg-go-danger {
        background: #ff453a;
        color: #fff
    }

    .tt-dlg-go-danger:hover {
        background: #ff5f55;
        background-image: none;
        color: #fff
    }

    .tt-dlg-btn:focus-visible {
        outline: 2px solid rgba(255, 255, 255, .65);
        outline-offset: 3px
    }

    /* The profile editor is the one sheet with a form in it, so it is wider
       and reads left to right rather than being centred like a question. */
    .tt-dlg-wide {
        max-width: 520px;
        text-align: left
    }

    .tt-dlg-wide .tt-dlg-title {
        margin-bottom: 7px
    }

    .tt-dlg-wide .tt-dlg-body {
        margin-bottom: 24px
    }

    .tt-prof-head {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 22px
    }

    .tt-prof-av {
        width: 64px;
        height: 64px;
        flex: none;
        border-radius: 50%;
        overflow: hidden;
        background: #1a1a1a;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, .2);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        font-weight: 700;
        color: #fff
    }

    .tt-prof-av img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block
    }

    .tt-prof-who {
        min-width: 0
    }

    .tt-prof-nm {
        font-size: 17px;
        font-weight: 700;
        letter-spacing: -.02em;
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .tt-prof-em {
        font-size: 13px;
        color: rgba(255, 255, 255, .35);
        margin-bottom: 9px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .tt-prof-photo {
        border: 1px solid rgba(255, 255, 255, .18);
        background: transparent;
        background-image: none;
        color: rgba(255, 255, 255, .8);
        font-family: 'SF Pro', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: -.01em;
        text-transform: none;
        padding: 6px 14px;
        margin: 0;
        width: auto;
        height: auto;
        border-radius: 999px;
        box-shadow: none;
        cursor: pointer
    }

    .tt-prof-photo:hover {
        background: rgba(255, 255, 255, .08);
        background-image: none;
        color: #fff
    }

    .tt-prof-lbl {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: rgba(255, 255, 255, .35);
        text-transform: uppercase;
        letter-spacing: .05em;
        margin: 0 0 8px
    }

    .tt-prof-input {
        width: 100%;
        box-sizing: border-box;
        margin: 0;
        background: #1a1a1a;
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: 10px;
        color: #fff;
        font-family: 'SF Pro', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
        font-size: 15px;
        line-height: 1.5;
        padding: 12px 14px;
        resize: vertical
    }

    .tt-prof-input::placeholder {
        color: rgba(255, 255, 255, .3)
    }

    .tt-prof-input:focus {
        outline: 2px solid rgba(235, 235, 235, .55);
        outline-offset: 1px;
        border-color: transparent
    }

    .tt-how {
        display: flex;
        flex-direction: column;
        gap: 18px;
        margin: 4px 0 4px
    }

    .tt-how-step {
        display: flex;
        gap: 14px;
        align-items: flex-start
    }

    .tt-how-n {
        flex: none;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .07);
        border: 1px solid rgba(255, 255, 255, .1);
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: -.01em;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .tt-how-b {
        min-width: 0
    }

    .tt-how-h {
        font-size: 16px;
        font-weight: 700;
        letter-spacing: -.01em;
        color: #fff;
        margin-bottom: 3px
    }

    .tt-how-p {
        font-size: 14px;
        line-height: 1.5;
        color: rgba(255, 255, 255, .55)
    }

    .tt-prof-count {
        font-size: 12px;
        color: rgba(255, 255, 255, .3);
        text-align: right;
        margin-top: 7px;
        font-variant-numeric: tabular-nums
    }


    @media (max-width:480px) {
        .tt-dlg {
            border-radius: 24px;
            padding: 26px 20px 20px
        }

        /* The action being confirmed goes on top on a narrow screen, the way
           an iOS alert stacks it - reversed so the markup order stays
           cancel-then-confirm for anything reading it in order. */
        .tt-dlg-acts {
            flex-direction: column-reverse
        }
    }

    @media (prefers-reduced-motion:reduce) {

        .tt-toast,
        .tt-dlg,
        .tt-dlg-back {
            transition: none
        }
    }