/* STL Discover - page styles
   -------------------------------------------------------------------------
   Lifted out of the page block so the markup is workable in PageFly's editor,
   and so the browser caches it between visits. Byte-for-byte what was in the
   <style> tag, nothing renamed and nothing reordered.

   Versioning
   ----------
   The page points at one exact URL for this file, so a change goes up as a new
   filename and nothing serves a half-updated pair. Bump the version in the
   page block and here together.

   This file is stl-discover-0.1.7.css.
   ------------------------------------------------------------------------- */

@font-face { font-family: 'STL-SF'; src: url('https://cdn.shopify.com/s/files/1/1958/7295/files/blinkmacsystemfont-bold.woff2?v=1776780464') format('woff2'); font-weight: 700; font-display: swap; }
        @font-face { font-family: 'STL-SF'; src: url('https://cdn.shopify.com/s/files/1/1958/7295/files/BlinkMacSystemFont-Semibold.woff2?v=1779123415') format('woff2'); font-weight: 600; font-display: swap; }
        @font-face { font-family: 'STL-SF'; src: url('https://cdn.shopify.com/s/files/1/1958/7295/files/blinkmacsystemfont-regular.woff2?v=1776780716') format('woff2'); font-weight: 400; font-display: swap; }
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        html { scroll-behavior: smooth; }
        /* ── ROOT ─────────────────────────────────────── */
        #stl-discover {
            background: #000;
            color: #fff;
            font-family: 'STL-SF', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            min-height: 100vh;
            padding-top: 100px;
            /* Contain the horizontal profile slide-in. We deliberately use
            `overflow-x: hidden` (NOT `clip`): hidden makes the browser compute
            overflow-y as `auto`, which turns #stl-discover into a vertical scroll
            container. That container is what keeps a long, absolutely-positioned
            artist profile CLIPPED INSIDE the widget instead of overflowing down
            over the Shopify footer beneath it. The only downside was a stray light
            scrollbar on long profiles — so we keep the clipping and just hide that
            scrollbar (rules below). The area stays scrollable via wheel/trackpad/
            touch, and the page's own scrollbar is unaffected. */
            overflow-x: hidden;
            scrollbar-width: none;
            /* Firefox */
            -ms-overflow-style: none;
            /* old Edge / IE */
            position: relative;
        }
        #stl-discover::-webkit-scrollbar { width: 0; height: 0; display: none; }
        /* WebKit / Blink */
        /* ── STL ARTISTS LOADING OVERLAY ──────────────── */
        /* Branded loader shown over the Discover widget until the first data load
        completes. The backdrop is scoped to #stl-discover (absolute) so it covers
        the widget, not the surrounding Shopify header — while the wordmark + bar
        are pinned to the centre of the viewport (the widget can be far taller
        than one screen, so centring within the backdrop would sit too low). */
        #stl-d-loading { position: absolute; inset: 0; background: #000; z-index: 9999; transition: opacity 0.4s ease; }
        #stl-d-loading.stl-d-loading-hidden { opacity: 0; pointer-events: none; }
        .stl-d-loading-inner { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10000; display: flex; flex-direction: column; align-items: center; gap: 14px; }
        .stl-d-loading-wordmark { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
        .stl-d-loading-bar { width: 120px; height: 2px; background: #1a1a1a; border-radius: 999px; overflow: hidden; }
        .stl-d-loading-bar-fill { height: 100%; width: 40%; background: linear-gradient(90deg, #ffc200, #ff9500); border-radius: 999px; animation: stl-d-loadpulse 1.2s ease-in-out infinite; }
        @keyframes stl-d-loadpulse {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(350%); }
        }
        /* ── STICKY NAV BAR ───────────────────────────── */
        .stl-d-switcher-bar { position: relative; z-index: 200; background: rgba(0, 0, 0, 0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255, 255, 255, 0.07); height: 72px; }
        .stl-d-switcher-inner { max-width: 1540px; margin: 0 auto; padding: 0 40px; display: flex; align-items: center; gap: 20px; height: 100%; }
        /* Back button — hidden by default, shown when profile is open */
        .stl-d-back-btn { display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, 0.07); border: 1px solid transparent; color: rgba(255, 255, 255, 0.8); font-family: inherit; font-size: 13px; font-weight: 600; padding: 6px 14px 6px 10px; border-radius: 999px; cursor: pointer; letter-spacing: -0.01em; transition: background 0.15s, color 0.15s; white-space: nowrap; flex-shrink: 0; }
        .stl-d-back-btn:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
        .stl-d-back-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
        .stl-d-back-btn.visible { display: flex; }
        .stl-d-wordmark { font-size: 30px; font-weight: 700; letter-spacing: -0.035em; color: #fff; white-space: nowrap; flex-shrink: 0; text-decoration: none; cursor: pointer; }
        /* Search in nav bar */
        .stl-d-nav-search-wrap { flex: 1; max-width: 320px; position: relative; margin-left: auto; }
        /* Hide the inactive panel's search */
        .stl-d-nav-search-wrap.hidden { display: none; }
        /* Breadcrumb shown in nav when profile open */
        .stl-d-breadcrumb { display: none; align-items: center; gap: 6px; font-size: 13px; color: rgba(255, 255, 255, 0.4); overflow: hidden; }
        .stl-d-breadcrumb.visible { display: flex; }
        .stl-d-breadcrumb-sep { flex-shrink: 0; }
        .stl-d-breadcrumb-name { font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .stl-d-tabs { display: flex; gap: 2px; align-items: center; background: rgba(255, 255, 255, 0.06); border-radius: 999px; padding: 4px; }
        .stl-d-tab { display: flex; align-items: center; gap: 8px; background: transparent; border: 1px solid transparent; color: rgba(255, 255, 255, 0.55); font-family: inherit; font-size: 13px; font-weight: 600; padding: 9px 18px; border-radius: 999px; cursor: pointer; letter-spacing: -0.01em; transition: background 0.15s, color 0.15s; white-space: nowrap; }
        .stl-d-tab:hover { color: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.06); }
        .stl-d-tab.active { background: rgba(255, 255, 255, 0.12); border-color: transparent; color: #fff; }
        .stl-d-tab-icon { display: none; }
        /* ── DISCOVER PANELS ──────────────────────────── */
        .stl-d-discover-wrap {
            /* The discover panels live here; slides left when profile opens */
            transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease;
            will-change: transform, opacity;
        }
        .stl-d-discover-wrap.pushed { transform: translateX(-60px); opacity: 0; pointer-events: none; }
        .stl-d-panel { display: none; }
        .stl-d-panel.active { display: block; }
        .stl-d-inner { max-width: 1540px; margin: 0 auto; padding: 40px 40px 80px; }
        /* Panel header */
        .stl-d-panel-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; gap: 16px; }
        .stl-d-panel-header-text h2 { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; color: #fff; line-height: 1.1; margin: 0; }
        .stl-d-panel-header-text p { font-size: 13px; color: rgba(255, 255, 255, 0.45); margin: 3px 0 0; letter-spacing: -0.01em; }
        .stl-d-search-wrapper { flex: 1; min-width: 200px; max-width: 280px; position: relative; }
        .stl-d-search-input { width: 100%; background: #0e0e0e; color: #fff; border: 1px solid rgba(255, 255, 255, 0.08); padding: 10px 38px 10px 14px; border-radius: 999px; font-family: inherit; font-size: 13px; line-height: 1.4; transition: border-color 0.2s, background 0.2s; outline: none; }
        .stl-d-search-input:focus { border-color: rgba(255, 255, 255, 0.2); background: #111; }
        .stl-d-search-input::placeholder { color: rgba(255, 255, 255, 0.3); }
        .stl-d-search-icon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; pointer-events: none; color: rgba(255, 255, 255, 0.3); }
        .stl-d-search-icon::before { content: ''; position: absolute; width: 11px; height: 11px; border: 2px solid currentColor; border-radius: 50%; top: 0; left: 0; }
        .stl-d-search-icon::after { content: ''; position: absolute; width: 2px; height: 6px; background: currentColor; transform: rotate(-45deg); top: 9px; left: 9px; }
        .stl-d-search-clear { display: none; position: absolute; right: 36px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border: none; background: transparent; cursor: pointer; padding: 0; align-items: center; justify-content: center; }
        .stl-d-search-clear svg { width: 100%; height: 100%; display: block; }
        .stl-d-search-clear circle { transition: fill 0.15s; }
        .stl-d-search-clear:hover circle { fill: #4a4a4a; }
        /* Popular grid */
        .stl-d-popular-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px; margin-bottom: 40px; }
        /* Sections */
        .stl-d-sections { display: flex; flex-direction: column; gap: 48px; margin-top: 32px; }
        /* AmpHub has no Popular header above its sections, so drop the top margin to
        align its first section with where ToneHub/ControlHub content begins. */
        #ah-sections { margin-top: 0; }
        .stl-d-section { margin-bottom: 0; }
        .stl-d-section-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; gap: 12px; }
        .stl-d-section-header>div { flex: 1; min-width: 0; }
        .stl-d-section-title { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; color: #fff; line-height: 1.1; margin: 0; }
        .stl-d-section-sub { font-size: 13px; color: rgba(255, 255, 255, 0.45); margin: 3px 0 0; letter-spacing: -0.01em; }
        .stl-d-show-all { background: rgba(255, 255, 255, 0.07); border: none; color: rgba(255, 255, 255, 0.6); cursor: pointer; font-family: inherit; font-size: 11px; font-weight: 600; padding: 5px 12px; margin: 0; border-radius: 999px; white-space: nowrap; flex-shrink: 0; transition: background 0.15s, color 0.15s; }
        .stl-d-show-all:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
        /* ── CARDS ────────────────────────────────────── */
        .expansion-grid-card { background: #0e0e0e; border-radius: 14px; overflow: hidden; cursor: pointer; transition: background 0.2s, transform 0.2s, box-shadow 0.2s; position: relative; border: 1px solid rgba(255, 255, 255, 0.06); display: block; width: 100%; }
        .expansion-grid-card:hover { background: #111; transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35); }
        .expansion-card-image { width: calc(100% - 14px); aspect-ratio: 1/1; overflow: hidden; border-radius: 7px; margin: 7px; background: #1a1a1a; display: block; }
        .expansion-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .expansion-card-image img[src*="Account_Icon"] { object-fit: contain; padding: 30%; background: #000; }
        .expansion-card-content { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; min-height: 88px; }
        .expansion-card-title { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; color: #fff; line-height: 1.2; }
        .expansion-card-subtitle { font-size: 11px; color: rgba(255, 255, 255, 0.45); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); min-height: 28px; margin-bottom: 2px; }
        .expansion-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
        .expansion-card-presets { font-size: 10px; color: rgba(255, 255, 255, 0.35); }
        /* ── ARTIST SPOTLIGHT + SEARCH-RESULT CARDS ──
        These rows show artist bios, which are far longer than the short subtitles
        elsewhere. The shared subtitle rule puts padding-bottom + a border on the
        same element it clamps, which lets a partial extra line bleed into the
        padding before overflow clips it (the "cut off mid-word" look). For these
        rows we give the card more vertical room, allow 3 lines, and move the
        divider off the clamped box so the clamp clips cleanly. */
        #th-trending .expansion-card-content, #ch-trending .expansion-card-content, #ah-trending .expansion-card-content, .stl-d-search-results-section .expansion-card-content { min-height: 116px; }
        #th-trending .expansion-card-subtitle, #ch-trending .expansion-card-subtitle, #ah-trending .expansion-card-subtitle, .stl-d-search-results-section .expansion-card-subtitle { -webkit-line-clamp: 3; padding-bottom: 0; border-bottom: none; min-height: 0; margin-bottom: 10px; }
        .expansion-download-btn { width: 26px; height: 26px; background: rgba(255, 255, 255, 0.1); border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s; flex-shrink: 0; }
        .expansion-download-btn:hover { background: rgba(255, 255, 255, 0.2); }
        /* List items */
        .stl-d-list { display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px; margin-bottom: 0; }
        .stl-d-list-item { display: block; background: #0e0e0e; border-radius: 14px; cursor: pointer; transition: background 0.2s, transform 0.2s, box-shadow 0.2s; border: 1px solid rgba(255, 255, 255, 0.06); overflow: hidden; position: relative; }
        .stl-d-list-item:hover { background: #111; transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35); }
        .stl-d-list-avatar { width: calc(100% - 14px); aspect-ratio: 1/1; border-radius: 7px; object-fit: cover; margin: 7px; display: block; }
        .stl-d-list-info { padding: 4px 12px 12px; display: flex; flex-direction: column; gap: 4px; }
        .stl-d-list-name { font-size: 13px; font-weight: 700; letter-spacing: -0.02em; color: #fff; line-height: 1.2; }
        .stl-d-list-sub { font-size: 11px; color: rgba(255, 255, 255, 0.45); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); min-height: 28px; }
        .stl-d-list-count { font-size: 10px; color: rgba(255, 255, 255, 0.35); margin-top: 2px; }
        .stl-d-list-actions { display: none; }
        .stl-d-action-btn { display: none; }
        /* Trend items */
        .stl-d-trend-item { display: block; background: #0e0e0e; border-radius: 14px; cursor: pointer; transition: background 0.2s, transform 0.2s, box-shadow 0.2s; border: 1px solid rgba(255, 255, 255, 0.06); overflow: hidden; position: relative; }
        .stl-d-trend-item:hover { background: #111; transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35); }
        .stl-d-trend-icon { width: calc(100% - 14px); aspect-ratio: 1/1; border-radius: 7px; overflow: hidden; margin: 7px; background: #1a1a1a; display: block; }
        .stl-d-trend-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .stl-d-trend-icon img[src*="Account_Icon"] { object-fit: contain; padding: 12px; background: #000; }
        .stl-d-trend-info { padding: 4px 12px 12px; display: flex; flex-direction: column; gap: 4px; }
        .stl-d-trend-title { font-size: 13px; font-weight: 700; letter-spacing: -0.02em; color: #fff; line-height: 1.2; margin-bottom: 1px; }
        .stl-d-trend-creator { font-size: 11px; color: rgba(255, 255, 255, 0.45); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); cursor: pointer; transition: color 0.15s; }
        .stl-d-trend-creator:hover { color: #EDF11E; }
        .stl-d-trend-cat { font-size: 10px; color: rgba(255, 255, 255, 0.28); font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
        .stl-d-trend-actions { display: none; }
        /* Badges */
        .badge-new, .badge-coming-soon { position: absolute; top: 10px; right: 10px; padding: 3px 8px; border-radius: 10px; font-size: 9px; font-weight: 700; text-transform: uppercase; white-space: nowrap; z-index: 3; line-height: 1; }
        .badge-new { background: #EDF11E; color: #000; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); }
        .badge-coming-soon { background: #ffc200; color: #000; }
        /* Skeletons */
        .stl-d-skeleton { background: linear-gradient(90deg, #1a1a1a 25%, #252525 50%, #1a1a1a 75%); background-size: 200% 100%; animation: stl-shimmer 1.5s infinite; border-radius: 14px; aspect-ratio: 1/1; }
        .stl-d-skeleton-row { height: 200px; border-radius: 14px; margin-bottom: 0; background: linear-gradient(90deg, #1a1a1a 25%, #252525 50%, #1a1a1a 75%); background-size: 200% 100%; animation: stl-shimmer 1.5s infinite; }
        @keyframes stl-shimmer {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }
        /* Show-all full grid */
        .stl-d-full-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
        .stl-d-empty { text-align: center; padding: 40px 20px; color: rgba(255, 255, 255, 0.4); font-size: 13px; }
        /* ── ARTIST PROFILE PANEL ─────────────────────── */
        .stl-d-profile-panel { position: absolute; top: 0; left: 0; right: 0; min-height: 100%; background: #000; padding-top: 172px; transform: translateX(100%); transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; z-index: 10; }
        .stl-d-profile-panel.visible { transform: translateX(0); }
        /* Once the slide-in finishes, the panel "docks" into normal flow so the
        page has ONE continuous scroll (no hidden inner scroll area) and the
        footer sits right after the profile, however long it is. */
        .stl-d-profile-panel.docked { position: relative; transform: none; padding-top: 0 !important; min-height: 0; }
        /* Profile inner content */
        .stl-d-profile-backbar { max-width: 1540px; margin: 0 auto; padding: 24px 40px 0; }
        .stl-d-profile-inner { max-width: 1540px; margin: 0 auto; padding: 24px 40px 80px; }
        /* Profile header */
        .stl-d-profile-header { display: flex; align-items: flex-start; gap: 24px; padding: 0 0 28px; }
        .stl-d-profile-avatar { width: 180px; height: 180px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: #1a1a1a; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2); }
        /* No-avatar fallback: render the account glyph in white (full opacity),
        matching the Discover home-page cards. */
        .stl-d-profile-avatar.stl-d-profile-avatar-default { background: #000; display: flex; align-items: center; justify-content: center; overflow: hidden; }
        .stl-d-profile-avatar.stl-d-profile-avatar-default img {
            width: 42%;
            height: 42%;
            object-fit: contain;
            display: block;
            /* full opacity so the glyph reads white, like the home page */
        }
        .stl-d-profile-avatar-wrap { position: relative; width: 180px; height: 180px; flex-shrink: 0; }
        .stl-d-profile-avatar-wrap .stl-d-profile-avatar { width: 100%; height: 100%; }
        .stl-d-profile-meta { flex: 1; min-width: 0; }
        .stl-d-profile-name { font-size: 28px; font-weight: 700; letter-spacing: -0.03em; color: #fff; line-height: 1.1; margin-bottom: 8px; }
        .stl-d-profile-bio { font-size: 14px; color: rgba(255, 255, 255, 0.55); line-height: 1.55; letter-spacing: -0.01em; max-width: 600px; margin-bottom: 16px; }
        .stl-d-profile-bio a { color: rgba(255, 255, 255, 0.75); text-decoration: underline; text-underline-offset: 2px; }
        .stl-d-profile-stats { display: flex; align-items: center; }
        .stl-d-stat-pill { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.75); font-family: inherit; font-size: 13px; font-weight: 500; padding: 7px 18px; letter-spacing: -0.01em; white-space: nowrap; }
        .stl-d-stat-pill:first-child { border-radius: 999px 0 0 999px; border-right: none; }
        .stl-d-stat-pill:last-child { border-radius: 0 999px 999px 0; }
        .stl-d-stat-pill:only-child { border-radius: 999px; border-right: 1px solid rgba(255, 255, 255, 0.1); }
        .stl-d-stat-pill strong { color: #fff; font-weight: 700; }
        /* Filter tabs */
        .stl-d-filter-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 32px; margin-bottom: 20px; flex-wrap: wrap; }
        .stl-d-filter-tabs { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
        .stl-d-filter-tab { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.6); font-family: inherit; font-size: 12px; font-weight: 500; padding: 0 14px; height: 32px; line-height: 32px; border-radius: 999px; cursor: pointer; letter-spacing: -0.01em; transition: background 0.15s, color 0.15s, border-color 0.15s; white-space: nowrap; }
        .stl-d-filter-tab:hover { background: rgba(255, 255, 255, 0.09); color: #fff; }
        .stl-d-filter-tab.active { background: #fff; border-color: #fff; color: #000; font-weight: 700; }
        /* Preset grid (profile) */
        .stl-d-preset-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 32px; }
        .stl-d-preset-card { background: #0e0e0e; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 16px; display: flex; align-items: center; gap: 14px; padding: 16px; min-height: 96px; transition: background 0.2s, transform 0.2s, box-shadow 0.2s; cursor: pointer; }
        .stl-d-preset-card:hover { background: #111; transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); }
        .stl-d-preset-thumb { width: 68px; height: 68px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: #1a1a1a; }
        .stl-d-thumb-empty { display: flex; align-items: center; justify-content: center; background: #000 !important; object-fit: unset; }
        .stl-d-preset-thumb.stl-d-avatar-default { object-fit: contain; padding: 16px; background: #000; }
        .stl-d-preset-info { flex: 1; min-width: 0; }
        .stl-d-preset-name { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; margin-bottom: 4px; }
        .stl-d-preset-type { font-size: 12px; color: rgba(255, 255, 255, 0.4); letter-spacing: -0.01em; }
        .stl-d-preset-count { font-size: 12px; color: rgba(255, 255, 255, 0.3); letter-spacing: -0.01em; margin-top: 3px; }
        .stl-d-preset-actions { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; }
        .stl-d-preset-dl-btn { width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s; }
        .stl-d-preset-dl-btn:hover { background: rgba(255, 255, 255, 0.15); }
        .stl-d-preset-dl-btn svg { width: 16px; height: 16px; stroke: #fff; stroke-width: 2; }
        .stl-d-preset-dl-count { font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.4); text-align: center; min-width: 32px; }
        /* ── PRESET LIST (profile — 3-up grid; an expanded pack spans full width) ── */
        .stl-d-preset-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 32px; align-items: stretch; }
        /* Let cards shrink below their text's natural width so long names /
        equipment lines ellipsize instead of stretching their column. */
        .stl-d-preset-list>* { min-width: 0; }
        .stl-d-preset-pack.expanded { grid-column: 1 / -1; }
        /* The pack wrapper stretches with its grid cell; the visible card
        inside grows to fill it so pack and preset cards match heights. */
        .stl-d-preset-pack { display: flex; flex-direction: column; }
        .stl-d-preset-pack>.stl-d-preset-row { flex: 1 1 auto; }
        .stl-d-preset-row { background: #0e0e0e; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 14px; display: flex; align-items: center; gap: 14px; padding: 12px 16px; min-height: 96px; cursor: pointer; transition: background 0.2s; }
        .stl-d-preset-row:hover { background: #111; }
        .stl-d-preset-row-chevron { width: 14px; height: 14px; flex-shrink: 0; transition: transform 0.2s; }
        .stl-d-preset-row-chevron.open { transform: rotate(90deg); }
        .stl-d-preset-row-thumb { width: 68px; height: 68px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: #1a1a1a; }
        .stl-d-preset-row-thumb.stl-d-thumb-empty { display: flex; align-items: center; justify-content: center; background: #000; }
        .stl-d-preset-row-thumb.stl-d-thumb-empty img { width: 60%; height: 60%; object-fit: contain; display: block; }
        .stl-d-preset-type-icon { width: 42px; height: 42px; flex-shrink: 0; object-fit: contain; }
        .stl-d-preset-row-info { flex: 1; min-width: 0; }
        .stl-d-preset-row-name { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
        .stl-d-preset-row-sub { font-size: 13px; color: rgba(255, 255, 255, 0.4); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .stl-d-preset-row-count { font-size: 12px; color: #EDF11E; margin-top: 3px; }
        .stl-d-preset-row-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
        .stl-d-preset-row-dls { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.45); min-width: 40px; text-align: right; }
        /* Presets inside an expanded pack — full width, same column as the pack row */
        .stl-d-pack-children { display: none; flex-direction: column; gap: 4px; margin: 4px 0; }
        .stl-d-pack-children.open { display: flex; }
        .stl-d-pack-child { background: #101010; border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 10px; display: flex; align-items: center; gap: 12px; padding: 10px 14px; min-height: 56px; cursor: pointer; transition: background 0.15s; }
        .stl-d-pack-child:hover { background: #161616; }
        .stl-d-pack-child .stl-d-preset-type-icon { width: 38px; height: 38px; }
        .stl-d-pack-child-name { font-size: 15px; font-weight: 600; color: #ccc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
        .stl-d-pack-child-type { font-size: 13px; color: rgba(255, 255, 255, 0.3); margin-top: 2px; }
        /* Profile skeleton */
        .stl-d-profile-skeleton-header { display: flex; align-items: flex-start; gap: 24px; padding: 60px 0 28px; }
        .stl-d-profile-skel-avatar { width: 180px; height: 180px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(90deg, #1a1a1a 25%, #252525 50%, #1a1a1a 75%); background-size: 200% 100%; animation: stl-shimmer 1.5s infinite; }
        .stl-d-profile-skel-meta { flex: 1; display: flex; flex-direction: column; gap: 12px; padding-top: 16px; }
        .stl-d-profile-skel-line { border-radius: 6px; background: linear-gradient(90deg, #1a1a1a 25%, #252525 50%, #1a1a1a 75%); background-size: 200% 100%; animation: stl-shimmer 1.5s infinite; }
        /* ── UNLOCK MODAL ─────────────────────────────── */
        .stl-d-unlock-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100dvh; background: rgba(0, 0, 0, 0.75); z-index: 999999; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); overflow-y: auto; }
        .stl-d-unlock-overlay.active { display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
        .stl-d-unlock-box { background: #141414; color: #fff; width: 90%; max-width: 520px; border-radius: 28px; border: 1px solid rgba(255, 255, 255, 0.06); position: relative; padding: 40px 36px 36px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; margin: auto; }
        .stl-d-unlock-close { position: absolute; top: 14px; right: 14px; width: 46px; height: 46px; background: transparent; color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; padding: 0; }
        .stl-d-unlock-close svg { width: 100%; height: 100%; display: block; }
        .stl-d-unlock-close circle { transition: fill 0.15s; }
        .stl-d-unlock-close:hover circle { fill: #4a4a4a; }
        .stl-d-unlock-icon { width: 72px; height: 72px; border-radius: 18px; overflow: hidden; flex-shrink: 0; }
        .stl-d-unlock-icon img { width: 100%; height: 100%; object-fit: cover; }
        .stl-d-unlock-title { font-size: 28px; font-weight: 700; letter-spacing: -0.03em; color: #fff; line-height: 1.15; }
        .stl-d-unlock-sub { font-size: 15px; color: rgba(255, 255, 255, 0.55); line-height: 1.55; }
        .stl-d-unlock-btn { width: 100%; background: #fff; color: #000 !important; padding: 24px 24px; border-radius: 999px; font-family: inherit; font-size: 16px; font-weight: 700; border: none; cursor: pointer; transition: background 0.15s; text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 8px; line-height: 1; }
        .stl-d-unlock-btn:hover, .stl-d-unlock-btn:focus, .stl-d-unlock-btn:active, .stl-d-unlock-btn:hover span, .stl-d-unlock-btn span { color: #000 !important; }
        .stl-d-unlock-btn:hover { background: #f0f0f0; }
        .stl-d-unlock-info { width: 100%; background: rgba(255, 255, 255, 0.06); border-radius: 14px; padding: 16px; display: flex; align-items: center; justify-content: center; gap: 12px; text-align: center; }
        .stl-d-unlock-info-title { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 4px; }
        .stl-d-unlock-info-body { font-size: 13px; color: rgba(255, 255, 255, 0.5); line-height: 1.5; }
        @media(max-width:600px) {
            .stl-d-unlock-box { padding: 28px 20px 24px; border-radius: 22px; }
            .stl-d-unlock-title { font-size: 22px; }
        }
        /* ── RESPONSIVE ───────────────────────────────── */
        @media (max-width: 1200px) {
            .stl-d-popular-grid { grid-template-columns: repeat(4, 1fr); }
            .stl-d-list { grid-template-columns: repeat(4, 1fr); }
            .stl-d-preset-grid { grid-template-columns: repeat(2, 1fr); }
            .stl-d-preset-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }
        @media (max-width: 900px) {
            /* Pull the whole Discover widget up so its nav sits closer to the site
            header. The profile avatar is in an absolutely-positioned panel pinned
            to the top of #stl-discover, so it stays put — meaning the nav moving up
            also gives the avatar more breathing room. */
            #stl-discover { padding-top: 56px; }
            .stl-d-switcher-inner { padding: 0 16px; gap: 12px; }
            .stl-d-nav-search-wrap { max-width: 180px; }
            .stl-d-inner, .stl-d-profile-inner { padding: 24px 16px 60px; }
            .stl-d-popular-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 28px; }
            .stl-d-list { grid-template-columns: repeat(2, 1fr); }
            .stl-d-full-grid { grid-template-columns: repeat(2, 1fr); }
            .stl-d-profile-backbar { padding: 16px 16px 0; }
            .stl-d-profile-header { flex-direction: column; align-items: center; text-align: center; padding: 4px 0 24px; gap: 14px; overflow: visible; }
            .stl-d-profile-avatar { width: 140px; height: 140px; flex-shrink: 0; overflow: visible; }
            .stl-d-profile-avatar-wrap { width: 140px; height: 140px; }
            .stl-d-profile-meta { display: flex; flex-direction: column; align-items: center; width: 100%; }
            .stl-d-profile-bio { text-align: center; }
            .stl-d-profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; }
            .stl-d-stat-pill { border-radius: 999px !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; font-size: 13px; padding: 10px 6px; text-align: center; white-space: nowrap; }
            .stl-d-preset-grid { grid-template-columns: 1fr; gap: 8px; }
            .stl-d-preset-list { grid-template-columns: minmax(0, 1fr); gap: 8px; }
            .stl-d-preset-row { padding: 10px 12px; gap: 10px; min-height: 80px; }
            .stl-d-preset-row-thumb { width: 56px; height: 56px; }
            .stl-d-preset-type-icon { width: 36px; height: 36px; }
            .stl-d-profile-skel-avatar { width: 140px; height: 140px; }
            .stl-d-profile-panel { padding-top: 128px; }
            #profile-share-btn { width: 100%; justify-content: center; margin-left: 0; margin-top: 12px; font-size: 15px; padding: 15px 16px; }
        }
        @media (max-width: 600px) {
            .stl-d-wordmark { font-size: 28px; }
            .stl-d-panel-header { flex-direction: column; align-items: flex-start; }
            /* Taller search field on mobile; 16px font also stops iOS zoom-on-focus. */
            .stl-d-search-input { padding: 15px 46px 15px 18px; font-size: 16px; }
            .stl-d-search-wrapper { max-width: 100%; width: 100%; }
            .stl-d-popular-grid { grid-template-columns: repeat(2, 1fr); }
            .stl-d-filter-bar { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 14px; }
            .stl-d-filter-tab { font-size: 13px; height: 38px; line-height: 38px; padding: 0 16px; }
            /* Nav bar: two rows on mobile */
            .stl-d-switcher-bar { height: auto; }
            .stl-d-switcher-inner { flex-wrap: wrap; height: auto; padding: 12px 16px 0; gap: 12px; }
            /* Tabs row fills full width */
            .stl-d-tabs { order: 2; }
            .stl-d-wordmark { order: 1; }
            .stl-d-back-btn { order: 0; }
            .stl-d-breadcrumb { order: 2; }
            /* Search drops to its own full-width row. Use margin-bottom (not padding)
            for the row gap so the absolutely-positioned search icon/clear button
            center on the input's height rather than the padded wrapper. */
            .stl-d-nav-search-wrap { order: 3; max-width: 100%; width: 100%; margin-left: 0; margin-bottom: 12px; }
            .stl-d-nav-search-wrap.hidden { display: none; }
        }
        /* ── SHARE BUTTON & TOAST ── */
        .stl-d-share-btn { display: inline-flex; align-items: center; gap: 7px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.75); font-family: inherit; font-size: 13px; font-weight: 500; padding: 7px 16px; border-radius: 999px; cursor: pointer; letter-spacing: -0.01em; transition: background 0.15s, color 0.15s; margin-left: 10px; flex-shrink: 0; }
        .stl-d-share-btn:hover { background: rgba(255, 255, 255, 0.11); color: #fff; }
        .stl-d-share-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
        /* ── "Become an artist" CTA (artist profile footer) ── */
        .stl-d-artist-cta { margin: 80px 0 0; padding: 72px 40px; border-top: 1px solid rgba(255, 255, 255, 0.07); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; }
        .stl-d-artist-cta-label { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.35); margin: 0; }
        .stl-d-artist-cta-title { font-size: 80px; font-weight: 700; letter-spacing: -0.04em; color: #fff; line-height: 1.05; margin: 0; }
        .stl-d-artist-cta-btn { display: inline-block; background: #fff; color: #000; font-family: inherit; font-size: 16px; font-weight: 700; padding: 16px 36px; border-radius: 999px; text-decoration: none; transition: background 0.15s, transform 0.15s; margin: 8px 0 0; }
        .stl-d-artist-cta-btn:hover { background: #f0f0f0; color: #000; transform: translateY(-2px); }
        @media (max-width: 600px) {
            .stl-d-artist-cta { margin-top: 48px; padding: 48px 16px; }
            .stl-d-artist-cta-title { font-size: 40px; }
            .stl-d-artist-cta-btn { font-size: 15px; padding: 14px 28px; }
        }
        .stl-d-toast { position: fixed; z-index: 999999; background: #141414; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 20px; padding: 18px 42px 18px 18px; min-width: 260px; max-width: 320px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6); transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; display: flex; flex-direction: column; gap: 0; }
        .stl-d-toast.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
        .stl-d-toast-icon { width: 28px; height: 28px; border-radius: 50%; background: #22c55e; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
        .stl-d-toast-icon svg { width: 14px; height: 14px; stroke: #fff; stroke-width: 2.5; }
        .stl-d-toast-title { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 3px; }
        .stl-d-toast-msg { font-size: 12px; color: rgba(255, 255, 255, 0.5); line-height: 1.4; }
        .stl-d-toast-close { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; background: rgba(255, 255, 255, 0.1); border: none; border-radius: 50%; color: #fff; cursor: pointer; font-size: 14px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background 0.15s; }
        .stl-d-toast-close:hover { background: rgba(255, 255, 255, 0.18); }
        /* ── OWNER EDITING ────────────────────────────────
        Shown only to a signed-in artist looking at their OWN profile. Nothing
        in here renders for a visitor, and nothing in here is a permission:
        the exchange decides what a write is allowed to do, using the customer's
        Shopify session carried by the app proxy. These rules only decide
        whether the controls are on screen. */
        /* The "Edit profile" pill. Same shape as Share so the two read as a
        pair, in the accent so the owner-only action is the one that stands
        out among the stat pills. */
        .stl-d-owner-btn { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid #fff; color: #000; font-family: inherit; font-size: 13px; font-weight: 600; padding: 7px 16px; border-radius: 999px; cursor: pointer; letter-spacing: -0.01em; transition: background 0.15s, border-color 0.15s, transform 0.15s; margin-left: 10px; flex-shrink: 0; }
        /* Hover dims rather than brightens, since the resting state is already
        white and there is nowhere lighter to go. */
        .stl-d-owner-btn:hover { background: #dcdcdc; border-color: #dcdcdc; }
        .stl-d-owner-btn:active { transform: scale(0.98); }
        .stl-d-owner-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
        /* Change-photo overlay on the profile avatar. Hidden until hover or
        keyboard focus on the desktop; always faintly visible on touch, where
        there is no hover to discover it with (see the responsive block). */
        .stl-d-avatar-edit { position: absolute; inset: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: -0.01em; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; opacity: 0; transition: opacity 0.18s; padding: 0; }
        .stl-d-profile-avatar-wrap:hover .stl-d-avatar-edit, .stl-d-avatar-edit:focus-visible { opacity: 1; }
        .stl-d-avatar-edit:focus-visible { outline: 2px solid #EDF11E; outline-offset: 2px; }
        .stl-d-avatar-edit svg { width: 26px; height: 26px; }
        /* Pencil on a row of the owner's own catalogue. Sits in the row's
        action group beside the download button. */
        .stl-d-row-edit-btn { width: 34px; height: 34px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 50%; color: rgba(255, 255, 255, 0.75); cursor: pointer; transition: background 0.15s, color 0.15s; }
        .stl-d-row-edit-btn:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
        .stl-d-row-edit-btn svg { width: 15px; height: 15px; }
        /* ── EDIT DIALOG ──────────────────────────────────
        Appended to <body>, never inside #stl-discover: the profile panel
        carries a transform, which would make a position:fixed child of it
        scroll with the page instead of staying put. */
        .stl-d-dlg-wrap { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity 0.2s; font-family: 'STL-SF', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; }
        .stl-d-dlg-wrap.stl-d-dlg-in { opacity: 1; }
        .stl-d-dlg-back { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.78); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
        .stl-d-dlg { position: relative; width: 100%; max-width: 520px; max-height: calc(100vh - 40px); overflow-y: auto; background: #0d0d0d; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 20px; padding: 28px; color: #fff; transform: translateY(10px) scale(0.99); transition: transform 0.2s; }
        .stl-d-dlg-wrap.stl-d-dlg-in .stl-d-dlg { transform: none; }
        .stl-d-dlg-title { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 6px; }
        .stl-d-dlg-body { font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, 0.55); letter-spacing: -0.01em; margin-bottom: 22px; }
        .stl-d-dlg-head { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
        .stl-d-dlg-av { width: 84px; height: 84px; border-radius: 50%; flex-shrink: 0; background: #1a1a1a; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2); overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700; color: rgba(255, 255, 255, 0.4); }
        /* Square artwork rather than a round avatar, for the preset dialog. */
        .stl-d-dlg-av.stl-d-dlg-av-square { border-radius: 12px; }
        .stl-d-dlg-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .stl-d-dlg-who { min-width: 0; }
        .stl-d-dlg-nm { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .stl-d-dlg-em { font-size: 13px; color: rgba(255, 255, 255, 0.45); margin-bottom: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .stl-d-dlg-photo { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); color: #fff; font-family: inherit; font-size: 13px; font-weight: 500; padding: 7px 14px; border-radius: 999px; cursor: pointer; transition: background 0.15s; }
        .stl-d-dlg-photo:hover { background: rgba(255, 255, 255, 0.14); }
        .stl-d-dlg-field { margin-bottom: 20px; }
        .stl-d-dlg-lbl { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); margin-bottom: 8px; }
        .stl-d-dlg-input { width: 100%; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 12px; color: #fff; font-family: inherit; font-size: 15px; line-height: 1.5; padding: 12px 14px; resize: vertical; outline: none; transition: border-color 0.15s, background 0.15s; }
        .stl-d-dlg-input::placeholder { color: rgba(255, 255, 255, 0.3); }
        .stl-d-dlg-input:focus { border-color: rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.08); }
        .stl-d-dlg-count { font-size: 12px; color: rgba(255, 255, 255, 0.35); text-align: right; margin-top: 6px; }
        .stl-d-dlg-note { font-size: 12px; color: rgba(255, 255, 255, 0.35); line-height: 1.5; margin-top: 6px; }
        .stl-d-dlg-acts { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
        .stl-d-dlg-btn { font-family: inherit; font-size: 14px; font-weight: 600; padding: 11px 22px; border-radius: 999px; cursor: pointer; border: 1px solid transparent; transition: background 0.15s, opacity 0.15s; }
        .stl-d-dlg-cancel { background: transparent; border-color: rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.75); }
        .stl-d-dlg-cancel:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
        .stl-d-dlg-go { background: #fff; color: #000; }
        .stl-d-dlg-go:hover { background: #dcdcdc; }
        .stl-d-dlg-btn[disabled] { opacity: 0.5; cursor: default; }
        /* ── EDIT TOASTS ──────────────────────────────────
        Separate from the share toast, which is a fixed "Link copied!" card
        positioned against whatever was clicked. These stack, carry their own
        wording, and say plainly whether a save reached ToneHub. */
        .stl-d-etoast-host { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 100001; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; width: min(440px, calc(100vw - 32px)); }
        .stl-d-etoast { display: flex; align-items: flex-start; gap: 10px; background: #161616; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 14px; color: #fff; font-family: 'STL-SF', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; font-size: 14px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.45; padding: 12px 16px; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.6); pointer-events: auto; cursor: pointer; opacity: 0; transform: translateY(8px); transition: opacity 0.22s, transform 0.22s; max-width: 100%; }
        .stl-d-etoast-in { opacity: 1; transform: none; }
        .stl-d-etoast-out { opacity: 0; transform: translateY(8px); }
        .stl-d-etoast-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; background: rgba(255, 255, 255, 0.5); }
        .stl-d-etoast-ok .stl-d-etoast-dot { background: #EDF11E; }
        .stl-d-etoast-error .stl-d-etoast-dot { background: #ff5a5a; }
        @media (prefers-reduced-motion: reduce) {
            .stl-d-dlg-wrap, .stl-d-dlg, .stl-d-etoast, .stl-d-avatar-edit { transition: none; }
        }
        /* Touch has no hover to reveal the overlay with, so the camera badge
        sits on the avatar permanently instead — quiet enough not to spoil the
        photo, obvious enough to be found. */
        @media (hover: none) {
            .stl-d-avatar-edit { opacity: 1; background: transparent; align-items: flex-end; justify-content: flex-end; padding: 6px; }
            .stl-d-avatar-edit .stl-d-avatar-edit-label { display: none; }
            .stl-d-avatar-edit svg { width: 34px; height: 34px; padding: 8px; background: rgba(0, 0, 0, 0.75); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%; box-sizing: border-box; }
        }
        @media (max-width: 900px) {
            /* The owner button matches the full-width Share button below it. */
            #profile-edit-btn { width: 100%; justify-content: center; margin-left: 0; margin-top: 12px; font-size: 15px; padding: 15px 16px; }
            .stl-d-dlg { padding: 22px 18px; border-radius: 16px; }
            .stl-d-dlg-acts { flex-direction: column-reverse; }
            .stl-d-dlg-btn { width: 100%; padding: 14px 22px; }
            /* 16px stops iOS zooming the page when the field takes focus. */
            .stl-d-dlg-input { font-size: 16px; }
        }

/* ════════════════════════════════════════════════════════════════════════
   My Captures, on your own profile
   ════════════════════════════════════════════════════════════════════════

   The Cloud Capture portal is loaded on this page unmodified - the same files
   the capture page serves, not a fork - and everything that belongs to making
   a capture is hidden from here rather than from there.

   !important is doing real work, not shouting. The portal's applyStage sets
   style.display on these cards directly as it walks its flow, and an inline
   style beats an ordinary rule from a stylesheet. It does not beat an
   important one. So these hold whatever that function decides, without the
   portal needing to know this page exists.

   Scoped under #stl-discover so nothing here can reach the capture page even
   if both stylesheets ever load together.
   ════════════════════════════════════════════════════════════════════════ */

#stl-discover #tt-boot,
/* The portal's own page furniture. It is a page heading and a paragraph
   explaining how to make a capture, which is the right thing to say at the top
   of the capture page and the wrong thing halfway down somebody's profile. */
#stl-discover #tt-pagehead,
#stl-discover #tt-pagelede,
#stl-discover #tt-user,
/* The portal's own top bar. It holds the account chip and the page's Home
   link, neither of which belongs inside somebody's profile - and it was
   holding 65px of empty height once its contents were hidden. */
#stl-discover .tt-topbar,
#stl-discover #tt-recordcard,
#stl-discover #tt-livecap,
#stl-discover #tt-typecard,
#stl-discover #tt-settingscard,
#stl-discover #tt-livecard,
#stl-discover #tt-flowhead,
#stl-discover #tt-stepbar,
#stl-discover #tt-back,
#stl-discover #tt-flownext,
#stl-discover #tt-go,
#stl-discover #tt-metagrid,
#stl-discover #tt-notesfield,
#stl-discover #tt-inspired,
#stl-discover #tt-namefield {
    display: none !important;
}

/* The two that are the point of being here. Also important, because the same
   function hides them when it thinks there is no capture to show. */
#stl-discover #tt-capturescard,
#stl-discover #tt-minecard {
    display: block !important;
}

/* The portal's own outer padding assumes it is the whole page. Here it is a
   panel inside one. */
#stl-discover #tt-capture {
    padding: 0 !important;
    max-width: none !important;
    margin: 0 !important;
}

/* Clear of the filter tabs above it.
   
   The preset grid it replaces carries its own top margin, so removing the grid
   took the gap with it and left the tabs sitting on the first card. This puts
   it back on the slot, which is there whether the panel is mounted or not, so
   the spacing does not depend on what is inside it. */
#stl-discover #stl-d-captures-slot {
    margin: 0 0 8px;
}

#stl-discover #stl-d-captures-slot > #tt-capture {
    padding-top: 28px !important;
}