.sl {
    --sl-paper: #f8f6f1; --sl-card: #fffefb; --sl-ink: #302d38; --sl-muted: #807b87;
    --sl-line: #e7e1da; --sl-accent: #77658d; --sl-soft: #ebe4ef; --sl-wallpaper: none;
    color: var(--sl-ink); font: 14px/1.55 'Segoe UI', sans-serif; color-scheme: light;
    box-sizing: border-box; text-align: left;
}
.sl[data-theme="sakura"] { --sl-paper:#faf0f0;--sl-card:#fffafa;--sl-line:#e8d8dc;--sl-accent:#9e617c;--sl-soft:#f5dde8; --sl-ink:#33222a; --sl-muted:#886b76; color-scheme:light; }
.sl[data-theme="night"] { --sl-paper:#22232c;--sl-card:#2b2d38;--sl-ink:#f1eaf3;--sl-muted:#b0a6b6;--sl-line:#42404c;--sl-accent:#c5aedc;--sl-soft:#41394e;color-scheme:dark; }
.sl *, .sl *::before, .sl *::after { box-sizing: border-box; }
.sl h1,.sl h2,.sl p { margin:0; padding:0; color:inherit; }
.sl button,.sl input,.sl textarea,.sl select { font:inherit; }
.sl button { cursor:pointer; border:0; letter-spacing:0; text-transform:none; }
.sl button:disabled { opacity:.55; cursor:wait; }
.sl [hidden] { display:none !important; }
.sl button:focus-visible,.sl input:focus-visible,.sl textarea:focus-visible,.sl select:focus-visible,.sl-stream:focus-visible {
    outline:3px solid var(--sl-accent);outline-offset:3px;
}
.sl button { -webkit-tap-highlight-color:transparent; }
.sl-shell { position:fixed;inset:0;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--sl-paper);overflow:hidden; }
.sl-shell[open] { display:flex;flex-direction:column;animation:sl-arrive .4s cubic-bezier(.22,.7,.15,1); }
.sl-shell::before { content:'';position:absolute;inset:0;pointer-events:none;background-image:var(--sl-wallpaper);background-size:cover;background-position:center;opacity:.075; }
.sl-shell::backdrop { background:#25212c66; }
.sl-header { position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;flex:none;height:87px;padding:0 4.5vw;border-bottom:1px solid var(--sl-line); }
.sl-brand { display:flex;align-items:center;gap:11px; position:relative; }
.sl-brand strong { font-size:25px;font-weight:650;letter-spacing:-1px; }
.sl-brand-mark { color:var(--sl-accent);width:29px;height:29px;line-height:1;transform:rotate(-9deg); }
.sl-brand-sub { position:absolute;left:100%;top:50%;transform:translateY(-50%);padding-left:13px;white-space:nowrap;color:var(--sl-muted);font-size:12px;letter-spacing:.03em; }
.sl-icon { display:inline-flex;width:22px;height:22px;flex-shrink:0;vertical-align:middle; }
.sl-icon svg { width:100%;height:100%; }
.sl-back,.sl-icon-btn { display:inline-flex;align-items:center;justify-content:center;gap:9px;background:none;color:var(--sl-muted);min-height:44px;padding:9px;position:relative; }
.sl-back:hover,.sl-icon-btn:hover { color:var(--sl-accent); }
.sl-layout { min-height:0;flex:1;display:grid;grid-template-columns: minmax(210px,1fr) minmax(330px,570px) minmax(100px,.7fr);gap:4vw;max-width:1440px;width:100%;padding:0 4.5vw;margin:auto;position:relative; }
.sl-rail { padding-top:66px;display:flex;flex-direction:column;min-width:0; }
.sl-eyebrow { font-size:9px;letter-spacing:.19em;font-weight:650;color:var(--sl-muted); }
.sl-intro h1 { font-size:clamp(23px,2.2vw,34px);line-height:1.28;font-weight:500;letter-spacing:-1.2px;margin:19px 0;white-space:pre-line; }
.sl-intro p { white-space:pre-line;font-size:12px;color:var(--sl-muted);line-height:1.8; }
.sl-rail-nav { display:grid;gap:9px;margin:38px 0;max-width:215px; }
.sl-btn { display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:45px;padding:11px 19px;border:1px solid var(--sl-line) !important;border-radius:13px;color:var(--sl-ink);background:var(--sl-card);font-weight:550;transition:background .2s,transform .2s; }
.sl-btn:hover { background:var(--sl-soft);transform:translateY(-1px); }
.sl-primary { background:var(--sl-ink);color:var(--sl-paper);border-color:var(--sl-ink) !important; }
.sl-primary:hover { background:var(--sl-accent);color:var(--sl-card); }
.sl-quiet { background:transparent; }
.sl-text-btn { background:none;color:var(--sl-muted);padding:8px 4px;font-size:12px;min-height:40px; }
.sl-text-btn:hover { color:var(--sl-accent);text-decoration:underline; }
.sl-margin-note { margin-top:auto;margin-bottom:65px;position:relative;border-left:1px solid var(--sl-line);padding-left:19px; }
.sl-margin-note>span:first-child { letter-spacing:.18em;color:var(--sl-accent);font-size:18px; }
.sl-margin-note p { font-size:11px;white-space:pre-line;color:var(--sl-muted);margin-top:10px; }
.sl-note-star { position:absolute;font-size:40px;right:15px;top:0;color:var(--sl-accent); }
.sl-center { display:flex;flex-direction:column;min-height:0;min-width:0;border-left:1px solid var(--sl-line);border-right:1px solid var(--sl-line); }
.sl-feed-top { padding:22px 23px 15px;display:flex;align-items:center;justify-content:space-between;flex:none; }
.sl-tabs { display:flex;gap:22px; }
.sl-tab { color:var(--sl-muted);background:none;padding:9px 0 10px;border-radius:0;position:relative; }
.sl-tab[aria-selected="true"] { color:var(--sl-ink);font-weight:650; }
.sl-tab[aria-selected="true"]::after { content:'';height:2px;background:var(--sl-accent);position:absolute;bottom:0;left:0;right:0;border-radius:5px; }
.sl-refresh { display:flex;align-items:center;gap:6px;font-size:10px;color:var(--sl-muted);background:none;min-height:42px; }
.sl-refresh .sl-icon { width:17px;height:17px; }
.sl-stream { flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scroll-snap-type:y proximity;scrollbar-width:thin;scrollbar-color:var(--sl-line) transparent;padding:0 20px 50px;touch-action:pan-y; }
.sl-post { scroll-snap-align:start;margin:0 0 30px;min-width:0; }
.sl-post-head { display:flex;align-items:center;justify-content:space-between;min-height:61px;gap:10px; }
.sl-author { display:inline-flex;align-items:center;gap:10px;color:var(--sl-ink);font-size:13px;font-weight:600;background:none;padding:0;text-align:left;min-width:0; }
.sl-author>span:last-child { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:240px; }
.sl-avatar { width:34px;height:34px;object-fit:cover;border-radius:50%;flex-shrink:0;display:inline-flex; }
.sl-avatar-fallback { align-items:center;justify-content:center;background:var(--sl-soft);color:var(--sl-accent);font-size:16px;border:1px solid var(--sl-line); }
.sl-date { font-size:10px;color:var(--sl-muted);white-space:nowrap; }
.sl-frame { position:relative;height:clamp(250px,49dvh,620px);border-radius:5px 5px 27px 5px;overflow:hidden;background:var(--sl-soft);isolation:isolate; }
.sl-media { display:block;width:100%;height:100%;object-fit:contain;background:#181821; }
.sl-frame img.sl-media { background:var(--sl-soft);object-fit:cover; }
.sl-frame-stamp { position:absolute;top:16px;left:14px;padding:5px 8px;border:1px solid #ffffff80;color:white;background:#25222d36;backdrop-filter:blur(6px);font-size:8px;letter-spacing:.14em;pointer-events:none; }
.sl-sound { position:absolute;z-index:2;right:12px;top:12px;display:flex;align-items:center;gap:6px;padding:9px;border-radius:20px;background:#24212c88;color:white;font-size:10px; }
.sl-sound .sl-icon { width:16px;height:16px; }
.sl-caption { margin-top:17px; }
.sl-caption h2 { font-size:20px;font-weight:550;line-height:1.3;letter-spacing:-.4px;overflow-wrap:anywhere; }
.sl-caption p { margin-top:7px;font-size:12px;line-height:1.7;color:var(--sl-muted);white-space:pre-wrap;overflow-wrap:anywhere;max-height:120px;overflow:auto; }
.sl-actions { display:flex;align-items:center;gap:23px;height:64px;border-bottom:1px solid var(--sl-line); }
.sl-like { display:flex;align-items:center;position:relative;gap:0;background:none;color:var(--sl-ink);min-height:50px;padding:0 3px 0 0; }
.sl-cat { width:65px;height:64px;object-fit:contain;transform:rotate(-6deg);transition:transform .3s cubic-bezier(.175,.885,.32,1.6),filter .3s;filter:grayscale(.8);margin-left:-12px;margin-right:-5px; }
.sl-like[aria-pressed="true"] .sl-cat { filter:none;transform:rotate(5deg) scale(1.13); }
.sl-count { font-size:12px; }
.sl-comment-btn { display:flex;align-items:center;gap:9px;background:none;padding:10px 0;color:var(--sl-ink);font-size:12px; }
.sl-comment-btn .sl-icon { width:26px;height:26px; }
.sl-views { display:flex;gap:7px;align-items:center;color:var(--sl-muted);font-size:11px;margin-left:auto; }
.sl-views .sl-icon { width:17px;height:17px; }
.sl-margin { padding-top:73px;position:relative; }
.sl-manga-flower { margin-top:55px;color:var(--sl-line);font-size:135px;font-weight:200;line-height:1;transform:rotate(-13deg); }
.sl-vertical-note { writing-mode:vertical-rl;font-size:11px;letter-spacing:.18em;color:var(--sl-muted);margin:40px auto !important; }
.sl-margin-copy { white-space:pre-line;font-size:11px;line-height:2 !important;color:var(--sl-muted) !important;margin-top:55px !important; }
.sl-bottom { display:none; }
.sl-empty { min-height:500px;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px 16px 60px; }
.sl-empty-art { width:210px;height:190px;position:relative;margin-bottom:24px; }
.sl-paper-picture { display:flex;position:absolute;inset:25px 39px;align-items:center;justify-content:center;font:70px/1 serif;border:1px solid var(--sl-ink);background:var(--sl-card);color:var(--sl-accent);transform:rotate(-9deg);box-shadow:8px 9px 0 var(--sl-soft);border-radius:2px; }
.sl-paper-picture::after { content:'';position:absolute;inset:11px;border:1px solid var(--sl-line); }
.sl-orbit { position:absolute;top:0;right:4px;font-size:46px;color:var(--sl-accent); }
.sl-small-cloud { position:absolute;bottom:0;right:3px;border:1px solid var(--sl-ink);border-radius:50%;padding:1px 19px;font-size:30px;background:var(--sl-card); }
.sl-empty h2 { margin-top:17px;font-size:25px;font-weight:500;line-height:1.25;letter-spacing:-.6px; }
.sl-empty p { color:var(--sl-muted);font-size:13px;max-width:300px;margin:14px auto 25px;line-height:1.8; }
.sl-loading { color:var(--sl-muted);text-align:center;padding:24px;font-size:12px; }
.sl-media-error { position:absolute;inset:40% 15px auto;padding:15px;background:var(--sl-card);color:var(--sl-ink);text-align:center;border-radius:12px; }
.sl-sheet { position:fixed;inset:0;margin:auto;width:min(520px,94vw);max-width:94vw;max-height:88dvh;border:1px solid var(--sl-line);border-radius:24px;padding:0;background:var(--sl-paper);box-shadow:0 24px 100px #19112433;overflow:hidden; }
.sl-sheet[open] { display:flex;flex-direction:column;animation:sl-sheet-in .25s ease; }
.sl-sheet-wide { width:min(650px,94vw); }
.sl-page { width:100vw !important; max-width:100vw !important; height:100dvh !important; max-height:100dvh !important; border-radius:0 !important; border:none !important; box-shadow:none !important; inset:0 !important; margin:0 !important; }
.sl-page::backdrop { background:var(--sl-paper) !important; backdrop-filter:none !important; }
.sl-page .sl-sheet-head { justify-content:flex-start; gap:12px; }
.sl-sheet::backdrop { background:#1f1c2c77;backdrop-filter:blur(5px); }
.sl-sheet-head { display:flex;justify-content:space-between;align-items:center;padding:17px 22px;border-bottom:1px solid var(--sl-line);flex-shrink:0;gap:8px; }
.sl-sheet-head h2 { font-size:19px;font-weight:600;line-height:1.3; }
.sl-sheet-head .sl-icon-btn>span:last-child { display:none; }
.sl-sheet-body { padding:24px;overflow-y:auto;overscroll-behavior:contain; }
.sl-copy { margin:0 0 20px !important;color:var(--sl-muted) !important;font-size:13px;line-height:1.8 !important; }
.sl-muted { color:var(--sl-muted) !important;font-size:12px;line-height:1.7 !important; }
.sl-editor { display:flex;flex-direction:column;gap:17px; }
.sl-field { display:flex;flex-direction:column;gap:8px;font-size:12px;font-weight:600; }
.sl-field input,.sl-field textarea,.sl-field select,.sl-comment-form textarea { width:100%;border:1px solid var(--sl-line);padding:12px 14px;border-radius:11px;background:var(--sl-card);color:var(--sl-ink);font-size:14px;outline:none;box-shadow:none; }
.sl textarea { resize:vertical;min-height:72px; }
.sl input::placeholder,.sl textarea::placeholder { color:var(--sl-muted);opacity:.85; }
.sl-inline { display:flex;gap:9px;flex-wrap:wrap;align-items:center; }
.sl-profile-visual { display:flex;justify-content:center; }
.sl-profile-visual>.sl-avatar { width:110px;height:110px;font-size:40px; }
.sl-cover-preview { width:100%;height:90px;object-fit:cover;border-radius:12px; }
.sl-dropzone { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;background:var(--sl-soft);color:var(--sl-accent);border:1px dashed var(--sl-accent) !important;border-radius:18px;min-height:160px;padding:25px; }
.sl-dropzone .sl-icon { width:35px;height:35px; }
.sl-compose-preview:empty { display:none; }
.sl-compose-preview>img,.sl-compose-preview>video { display:block;max-height:250px;max-width:100%;margin:auto;border-radius:12px; }
.sl-compose-preview>p { overflow-wrap:anywhere;text-align:center;margin-top:8px; }
.sl-full-photo { display:block;width:100%;height:auto;object-fit:contain; }
.sl-profile-hero { position:relative;text-align:center;isolation:isolate;padding:20px 10px 25px; }
.sl-profile-cover { position:absolute;inset:0;width:100%;height:170px;object-fit:cover;z-index:-1;border-radius:15px;opacity:.35;mask-image:linear-gradient(#000,transparent); }
.sl-profile-hero>.sl-avatar { width:115px;height:115px;border:4px solid var(--sl-card);box-shadow:0 2px 20px #20162b15;font-size:38px;margin:15px auto; }
.sl-profile-hero>.sl-eyebrow { display:block; }
.sl-profile-hero h2 { font-size:28px;font-weight:500;overflow-wrap:anywhere;margin:7px 0; }
.sl-profile-hero>p { font-size:13px;color:var(--sl-muted);white-space:pre-wrap;overflow-wrap:anywhere; }
.sl-profile-hero>.sl-inline { justify-content:center;margin-top:22px; }
.sl-profile-posts { display:grid;grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));gap:20px;border-top:1px solid var(--sl-line);margin-top:10px;padding-top:15px; }
.sl-profile-posts .sl-post { margin:0;width:100%;max-width:none; }
.sl-post-compact .sl-frame { max-height:400px; }
.sl-request { border:1px solid var(--sl-line);background:var(--sl-card);padding:18px;border-radius:16px;margin:14px 0; }
.sl-request>p { margin:9px 0 15px; }
.sl-request>.sl-btn { margin-right:7px;margin-bottom:3px; }
.sl-comments-sheet { padding-bottom: 0; overflow: hidden; display: flex; flex-direction: column; }
.sl-comments-sheet .sl-sheet-body { flex: 1; min-height: 0; padding-bottom: 80px; overflow-y: auto; }
.sl-comments { display: flex; flex-direction: column; gap: 20px; margin: 15px 0 30px; padding: 0 4px; }

.sl-comment { display: flex; gap: 12px; }
.sl-comment .sl-avatar { width: 34px; height: 34px; font-size: 14px; flex-shrink: 0; cursor: pointer; margin-top: 2px; }
.sl-comment-content { flex: 1; min-width: 0; }
.sl-comment-header { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.sl-comment-author { font-size: 13px; font-weight: 600; color: var(--sl-ink); cursor: pointer; opacity: 0.9; }
.sl-comment-time { font-size: 12px; color: var(--sl-muted); }
.sl-comment-dot { font-size: 10px; color: var(--sl-muted); }
.sl-comment-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.45; margin: 0 0 8px; color: var(--sl-ink); }

.sl-comment-actions { display: flex; align-items: center; gap: 16px; }
.sl-comment-action-btn { display: flex; align-items: center; background: none; border: none; padding: 4px 0; color: var(--sl-muted); cursor: pointer; opacity: 0.8; font-size: 12px; font-weight: 500; transition: color 0.1s; }
.sl-comment-action-btn:hover { opacity: 1; color: var(--sl-ink); }
.sl-comment-action-btn svg { width: 15px; height: 15px; margin-right: 4px; }
.sl-comment-del { color: #ff3b30; opacity: 0.7; margin-left: auto; }
.sl-comment-del:hover { color: #ff3b30; opacity: 1; }

.sl-comment-form { position: absolute; bottom: 0; left: 0; right: 0; padding: 12px 20px; background: var(--sl-paper); border-top: 1px solid var(--sl-line); display: flex; align-items: flex-end; gap: 12px; z-index: 10; }
.sl-comment-form .sl-avatar { width: 34px; height: 34px; font-size: 14px; flex-shrink: 0; margin-bottom: 3px; }
.sl-comment-input-wrap { flex: 1; display: flex; align-items: center; background: var(--sl-soft); border-radius: 20px; padding: 2px 6px 2px 16px; min-height: 40px; border: 1px solid var(--sl-line); transition: border-color 0.2s; }
.sl-comment-input-wrap:focus-within { border-color: var(--sl-ink); }
.sl-comment-form textarea { flex: 1; min-height: 20px; max-height: 100px; border: none !important; background: transparent !important; padding: 8px 0 !important; resize: none; font-size: 14px; line-height: 1.4; color: var(--sl-ink) !important; margin: 0; outline: none !important; }
.sl-comment-form textarea::placeholder { color: var(--sl-muted); }
.sl-comment-send-btn { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--sl-ink); color: var(--sl-paper); border: none; cursor: pointer; flex-shrink: 0; margin-bottom: 4px; transition: transform 0.1s, opacity 0.2s; margin-left: 6px; }
.sl-comment-send-btn:active { transform: scale(0.9); }
.sl-comment-send-btn:disabled { opacity: 0.5; cursor: default; }
.sl-toast { position:fixed;bottom:max(25px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:max-content;max-width:90%;padding:13px 20px;background:var(--sl-ink);color:var(--sl-paper);border-radius:14px;box-shadow:0 5px 25px #0002;font-size:13px;z-index:10;pointer-events:none; }
.sl-entry { display:inline-flex;align-items:center;justify-content:center;gap:5px;background:#ece4f3;color:#69577d;border:1px solid #c3b4cf;border-radius:13px;min-height:38px;padding:7px 11px;font:600 12px/1.3 'Segoe UI',sans-serif;cursor:pointer;flex-shrink:0;position:relative; }
.sl-entry .sl-icon { width:18px;height:18px;display:inline-flex; }
.sl-entry .sl-icon svg { width:100%;height:100%; }
.sl-badge { display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;border-radius:10px;background:#9674ad;color:white;font:10px/1 sans-serif;padding:2px 5px; }
.sl-rail-nav .sl-current { background:var(--sl-soft);border-color:var(--sl-accent) !important;color:var(--sl-accent); }
.sl-profile-stats { display:flex;justify-content:center;gap:10px;border-top:1px solid var(--sl-line);border-bottom:1px solid var(--sl-line);padding:19px 0;margin:22px 0 5px; }
.sl-stat { display:flex;flex:1;flex-direction:column;align-items:center;gap:4px;min-width:0;padding:4px 0;background:none;color:var(--sl-ink); }
.sl-stat strong { font-size:22px;font-weight:600;line-height:1.2; }.sl-stat>span { font-size:10px;color:var(--sl-muted); }
.sl-follow { background:var(--sl-soft);color:var(--sl-accent);border-color:var(--sl-accent) !important; }
.sl-subscribed { background:transparent; }
.sl-profile-tabs { padding-top:16px;justify-content:center; }.sl-profile-tabs .sl-tab[aria-selected="true"] { color:var(--sl-accent); }
.sl-person-row { display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid var(--sl-line); }
.sl-shell[data-mode="slice"] .sl-stream { padding:0;scroll-snap-type:y mandatory;scrollbar-width:none; align-items: center; }
.sl-shell[data-mode="slice"] .sl-post { height:100%;margin:0 auto;scroll-snap-stop:always;scroll-snap-align:start; aspect-ratio:9/16; max-width:100%; flex-shrink:0; }
.sl-short { position:relative;border-radius:17px;overflow:hidden;background:#15131b;color:#fff;isolation:isolate; }
.sl-short .sl-frame { position:absolute;inset:0;height:100%;border-radius:0;z-index:0; }
.sl-short .sl-frame::after { content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(#1110186b,transparent 22%,transparent 53%,#111018b0);z-index:1; }
.sl-short .sl-frame-stamp { display:none; }
.sl-short .sl-media { background:#15131b;object-fit:contain; }
.sl-short .sl-post-head { position:absolute;z-index:3;top:12px;left:17px;right:60px;min-height:45px; }
.sl-short .sl-date { display:none; }.sl-short .sl-author { color:#fff;text-shadow:0 1px 5px #0004; }
.sl-short .sl-avatar { border:1px solid #ffffffa0; }.sl-short .sl-avatar-fallback { background:#ffffffd9;color:#5c4c72; }
.sl-short .sl-sound { top:20px;right:12px;z-index:4;border:1px solid #ffffff30;background:#18131f88;min-width:36px;min-height:36px; }
.sl-short .sl-sound>span:last-child { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%); }
.sl-short .sl-caption { position:absolute;z-index:3;bottom:30px;left:22px;right:85px;text-shadow:0 1px 8px #0005; }
.sl-short .sl-caption h2 { font-size:23px;line-height:1.3;color:white; }
.sl-short .sl-caption p { color:#fffdf6d9;font-size:12px;max-height:90px; }
.sl-short .sl-actions { position:absolute;z-index:3;bottom:25px;right:10px;width:60px;height:auto;flex-direction:column;gap:18px;border:0; }
.sl-short .sl-actions button { color:#fff;text-shadow:0 1px 5px #0005; }
.sl-short .sl-like { flex-direction:column;gap:3px;padding:0; }.sl-short .sl-cat { width:75px;height:80px;margin:-16px -10px -14px;filter:brightness(1.4) drop-shadow(0 1px 3px #0005); }
.sl-short .sl-like[aria-pressed="true"] .sl-cat { filter:brightness(1.9) sepia(.4) drop-shadow(0 0 8px #d7b5ff); }
.sl-short .sl-comment-btn { flex-direction:column;gap:5px;padding:0; }.sl-short .sl-comment-btn .sl-icon { width:30px;height:30px; }
.sl-short .sl-views { flex-direction:column;gap:6px;margin:0;color:#fffdf6bf; }.sl-short .sl-views .sl-icon { width:21px;height:21px; }
.sl-short .sl-text-btn { min-height:25px;padding:0;font-size:9px; }
.sl-video-loader-wrap { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:3;background:rgba(0,0,0,0.15);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .3s; }
.sl-video-loader-wrap.sl-is-loading { opacity:1; }
.sl-video-loader { width:48px;height:24px;display:inline-block;position:relative;border:1px solid rgba(255,255,255,0.7);border-radius:4px;background:rgba(255,255,255,0.1);backdrop-filter:blur(8px);box-shadow:0 2px 10px rgba(0,0,0,0.2); }
.sl-video-loader::after { content:'';box-sizing:border-box;position:absolute;left:100%;top:50%;transform:translateY(-50%);border:1px solid rgba(255,255,255,0.7);border-radius:0 3px 3px 0;width:5px;height:12px;background:rgba(255,255,255,0.1); }
.sl-video-loader::before { content:'';position:absolute;left:-8px;top:50%;transform:translateY(-50%);height:80%;width:6px;box-sizing:border-box;animation:sl-animloader 1.5s linear infinite; }
@keyframes sl-animloader {
  0% { box-shadow:11px 0 rgba(255,255,255,0),22px 0 rgba(255,255,255,0),33px 0 rgba(255,255,255,0),44px 0 rgba(255,255,255,0); }
  25% { box-shadow:11px 0 rgba(255,255,255,0.95),22px 0 rgba(255,255,255,0),33px 0 rgba(255,255,255,0),44px 0 rgba(255,255,255,0); }
  50% { box-shadow:11px 0 rgba(255,255,255,0.95),22px 0 rgba(255,255,255,0.95),33px 0 rgba(255,255,255,0),44px 0 rgba(255,255,255,0); }
  75% { box-shadow:11px 0 rgba(255,255,255,0.95),22px 0 rgba(255,255,255,0.95),33px 0 rgba(255,255,255,0.95),44px 0 rgba(255,255,255,0); }
  100% { box-shadow:11px 0 rgba(255,255,255,0.95),22px 0 rgba(255,255,255,0.95),33px 0 rgba(255,255,255,0.95),44px 0 rgba(255,255,255,0.95); }
}
.sl-short-play { display:flex;align-items:center;justify-content:center;position:absolute;inset:0;z-index:2;color:#fff;background:none; }
.sl-short-play .sl-icon { width:64px;height:64px;padding:15px;border-radius:50%;background:#1c142e70;backdrop-filter:blur(5px);opacity:0;transition:opacity .2s; }
.sl-short-play.sl-is-paused .sl-icon { opacity:1; }.sl-short-play>span:last-child { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%); }
.sl-shell[data-mode="slice"] .sl-center { padding-bottom:22px; }
@keyframes sl-arrive { from { transform:translateX(35%);opacity:0; } to { transform:translateX(0);opacity:1; } }
@keyframes sl-sheet-in { from { transform:translateY(25px);opacity:0; } to { transform:translateY(0);opacity:1; } }
@media(max-width:1050px) {
    .sl-layout { grid-template-columns:200px minmax(320px,570px);gap:25px;padding:0 25px;justify-content:center; }
    .sl-margin { display:none; }.sl-brand-sub { display:none; }.sl-intro h1 { font-size:27px; }
}
@media(max-width:700px) {
    .sl-header { height:67px;padding:env(safe-area-inset-top) 17px 0;min-height:67px; }
    .sl-brand { gap:7px; }.sl-brand strong { font-size:23px; }.sl-brand-mark { font-size:25px; }
    .sl-back>span:last-child,.sl-header>.sl-icon-btn>span:nth-child(2) { display:none; }
    .sl-back,.sl-header>.sl-icon-btn { min-width:40px;padding:7px;color:var(--sl-ink); }
    .sl-layout { display:flex;padding:0;gap:0; }.sl-rail { display:none; }
    .sl-center { border:0;width:100%; }.sl-feed-top { padding:8px 23px 9px; }
    .sl-stream { padding:0 18px 20px; }.sl-post { margin-bottom:23px; }.sl-post-head { min-height:53px; }
    .sl-frame { height:clamp(240px,46dvh,640px);border-radius:4px 4px 23px 4px; }
    .sl-caption { margin-top:13px; }.sl-caption h2 { font-size:20px; }.sl-caption p { margin-top:5px;max-height:65px; }
    .sl-actions { gap:21px;height:59px; }.sl-cat { height:62px;width:64px; }
    .sl-bottom { position:relative;display:flex;align-items:center;justify-content:space-evenly;gap:6px;height:calc(68px + env(safe-area-inset-bottom));padding:5px 10px calc(5px + env(safe-area-inset-bottom));background:var(--sl-paper);border-top:1px solid var(--sl-line);flex-shrink:0; }
    .sl-bottom-btn { display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--sl-muted);background:none;font-size:9px;min-width:70px;min-height:50px;justify-content:center; }
    .sl-bottom-btn.sl-current { color:var(--sl-accent); }
    .sl-bottom-create { display:flex;justify-content:center;align-items:center;gap:5px;background:var(--sl-ink);color:var(--sl-paper);padding:13px 18px;border-radius:16px;min-height:44px;font-size:12px; }
    .sl-bottom-create>span:last-child { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%); }
    .sl-bottom-create { width:49px;height:45px;padding:10px; }.sl-bottom-btn { min-width:60px; }
    .sl-refresh>span:last-child { display:none; }.sl-profile-stats { gap:5px; }.sl-stat strong { font-size:20px; }.sl-stat>span { font-size:9px; }
    .sl-shell[data-mode="slice"] .sl-stream { padding:0; }.sl-shell[data-mode="slice"] .sl-center { padding-bottom:0; }.sl-short { border-radius:0; }
    .sl-short .sl-caption { left:20px;bottom:28px;right:78px; }.sl-short .sl-actions { right:7px; }
    .sl-sheet { inset:auto 0 0;margin:0 auto;max-width:100%;width:100%;max-height:92dvh;border-radius:24px 24px 0 0;padding-bottom:env(safe-area-inset-bottom); }
    .sl-sheet-body { padding:21px; }.sl-sheet-head { padding:13px 20px; }.sl-sheet-head h2 { font-size:18px; }
    .sl-empty { min-height:400px;padding:10px 10px 25px; }.sl-empty-art { transform:scale(.9);margin-bottom:5px; }.sl-empty h2 { font-size:24px; }
    .sl-empty .sl-eyebrow { font-size:8px; }.sl-empty p { font-size:12px;margin-bottom:20px; }
    .sl input,.sl select,.sl textarea { font-size:16px; }.sl-toast { bottom:85px; }
    .sl-entry { padding:7px;font-size:11px;border-radius:10px; }.sl-entry>span:nth-child(2) { display:none; }
}
@media(prefers-reduced-motion:reduce) {
    .sl,.sl * { animation:none !important;transition:none !important;scroll-behavior:auto !important; }
}

/* Fullscreen Slices Mode */
.sl-slice-back-btn { display:none; position:fixed; top:calc(env(safe-area-inset-top, 20px) + 15px); left:10px; z-index:100; color:#ffffffcc; background:none; border:none; padding:10px; width:auto; height:auto; filter:drop-shadow(0 1px 4px rgba(0,0,0,0.6)); cursor:pointer; }
.sl-slice-back-btn .sl-icon { width:28px; height:28px; }
.sl-slice-back-btn span:last-child { display:none; }
.sl-shell[data-mode="slice"] .sl-slice-back-btn { display:flex; }
.sl-shell[data-mode="slice"] .sl-header, .sl-shell[data-mode="slice"] .sl-bottom, .sl-shell[data-mode="slice"] .sl-rail, .sl-shell[data-mode="slice"] .sl-margin, .sl-shell[data-mode="slice"] .sl-feed-top { display:none !important; }
.sl-shell[data-mode="slice"] .sl-layout { padding:0 !important; margin:0 !important; max-width:100% !important; width:100% !important; height:100dvh !important; background:#000; display:flex !important; justify-content:center !important; }
.sl-shell[data-mode="slice"] .sl-center { padding:0 !important; max-width:100% !important; width:100%; border:0; }
.sl-shell[data-mode="slice"] .sl-stream { padding:0 !important; height:100dvh !important; scroll-snap-type:y mandatory; background:#000; width:100%; align-items:center; }
.sl-shell[data-mode="slice"] .sl-empty { height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; }
.sl-shell[data-mode="slice"] .sl-empty h2 { color:#fff; }
.sl-shell[data-mode="slice"] .sl-empty p { color:#ffffffb3; }
.sl-shell[data-mode="slice"] .sl-empty-art { color:#fff; }

/* Compose Wizard UI */
.sl-compose-wizard { position: absolute; inset:0; background: #0f0f12; color: #fff; z-index: 10; display: flex; flex-direction: column; width: 100vw; height: 100dvh; }
.sl-compose-intro { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; }
.sl-compose-intro .sl-icon { width: 60px; height: 60px; margin-bottom: 20px; opacity: 0.8; }
.sl-compose-intro h2 { font-size: 24px; margin-bottom: 10px; font-weight: 600; }
.sl-compose-intro p { font-size: 15px; color: #ffffffb3; margin-bottom: 40px; max-width: 300px; line-height: 1.4; }
.sl-compose-btn-white { background: #fff !important; color: #0f0f12 !important; font-weight: 600; border-radius: 30px !important; min-height: 54px; width: 100%; max-width: 320px; margin-bottom: 10px; border: none; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.sl-compose-btn-dark { background: #2c2c2e !important; color: #fff !important; font-weight: 600; border-radius: 30px !important; min-height: 54px; width: 100%; max-width: 320px; border: none; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.sl-compose-preview-state { flex: 1; display: flex; flex-direction: column; background: #000; position: relative; }
/* Compose Wizard UI */
.sl-compose-wizard { position: absolute; inset:0; background: #0f0f12; color: #fff; z-index: 10; display: flex; flex-direction: column; width: 100vw; height: 100dvh; }
.sl-compose-intro { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; }
.sl-compose-intro .sl-icon { width: 60px; height: 60px; margin-bottom: 20px; opacity: 0.8; }
.sl-compose-intro h2 { font-size: 24px; margin-bottom: 10px; font-weight: 600; }
.sl-compose-intro p { font-size: 15px; color: #ffffffb3; margin-bottom: 40px; max-width: 300px; line-height: 1.4; }
.sl-compose-btn-white { background: #fff !important; color: #0f0f12 !important; font-weight: 600; border-radius: 30px !important; min-height: 54px; width: 100%; max-width: 320px; margin-bottom: 10px; border: none; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.sl-compose-btn-dark { background: #2c2c2e !important; color: #fff !important; font-weight: 600; border-radius: 30px !important; min-height: 54px; width: 100%; max-width: 320px; border: none; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.sl-compose-preview-state { flex: 1; display: flex; flex-direction: column; background: #000; position: relative; }
.sl-compose-preview-state video, .sl-compose-preview-state img { width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0; z-index: 0; }
.sl-compose-topbar { position: relative; z-index: 2; display: flex; align-items: center; padding: 15px 20px; gap: 20px; background: linear-gradient(#000000a0, transparent); pointer-events: none; }
.sl-compose-topbar h2 { font-size: 19px; margin: 0; flex: 1; font-weight: 500; pointer-events: auto; }
.sl-compose-topbar-btn { background: #00000080; border: none; color: #fff; padding: 10px; border-radius: 50%; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(10px); cursor: pointer; width:44px; height:44px; pointer-events: auto; }
.sl-compose-topbar-btn .sl-icon { width: 22px; height: 22px; }
.sl-compose-topbar-btn span:last-child { display: none; }

.sl-compose-bottombar { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; padding: 25px 20px; display: flex; justify-content: space-between; background: linear-gradient(transparent, #000000d0); pointer-events: none; }
.sl-compose-bottom-btn { background: #333333b3; color: #fff; border: none; padding: 12px 24px; border-radius: 24px; font-weight: 600; font-size: 15px; backdrop-filter: blur(10px); cursor: pointer; pointer-events: auto; transition: opacity 0.2s; }
.sl-compose-bottom-btn-primary { background: #fff; color: #000; }

.sl-compose-details-state { flex: 1; display: flex; flex-direction: column; background: #0f0f12; overflow-y: auto; }
.sl-compose-details-state .sl-compose-topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; padding: 15px 20px; gap: 20px; background: #0f0f12; border-bottom: 1px solid #2c2c2e; }
.sl-compose-details-state .sl-compose-topbar h2 { font-size: 19px; margin: 0; flex: 1; font-weight: 500; }
.sl-compose-details-state .sl-compose-topbar-btn { background: transparent; padding: 5px; width: auto; height: auto; border-radius: 0; backdrop-filter: none; }

.sl-compose-details-header { display: flex; gap: 15px; padding: 20px; background: #0f0f12; border-bottom: 1px solid #2c2c2e; align-items: flex-start; }
.sl-compose-details-thumb-container { position: relative; width: 90px; height: 130px; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: #222; }
.sl-compose-details-thumb { width: 100%; height: 100%; object-fit: cover; }
.sl-compose-edit-cover { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,0.6); color: #fff; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); cursor: pointer; }
.sl-compose-edit-cover svg { width: 16px; height: 16px; }

.sl-compose-details-title-wrap { flex: 1; display: flex; flex-direction: column; }
.sl-compose-details-title-wrap input { background: transparent; border: none !important; color: #fff; font-size: 16px; width: 100%; padding: 5px 0; outline: none !important; font-family: inherit; box-shadow: none !important; }
.sl-compose-details-title-wrap input:focus { outline: none !important; box-shadow: none !important; border: none !important; }

.sl-compose-details-form { padding: 20px; display: flex; flex-direction: column; gap: 25px; flex: 1; max-width: 600px; width: 100%; margin: 0 auto; }
.sl-compose-details-form .sl-tabs { display: flex; background: rgba(28,28,30,0.5); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 4px; gap: 4px; backdrop-filter: blur(15px); }
.sl-compose-details-form .sl-tab { flex: 1; border-radius: 12px; padding: 10px; font-weight: 600; color: #888; transition: all 0.2s; border: none; }
.sl-compose-details-form .sl-tab[aria-selected="true"] { background: #fff; color: #000; box-shadow: 0 2px 10px rgba(0,0,0,0.2); }
.sl-compose-details-form .sl-tab[aria-selected="true"]::after { display: none; }

.sl-compose-details-form textarea { background: transparent; border: none !important; border-bottom: 1px solid #333 !important; color: #fff; padding: 10px 0; font-size: 16px; font-family: inherit; resize: none; min-height: 80px; box-shadow: none !important; }
.sl-compose-details-form textarea:focus { border-bottom-color: #fff !important; outline: none !important; box-shadow: none !important; }
.sl-compose-details-form .sl-muted { text-align: left; font-size: 13px; opacity: 0.6; }

.sl-compose-btn-sticky-container { position: sticky; bottom: 20px; display: flex; justify-content: center; z-index: 10; margin-top: auto; padding-top: 20px; }
.sl-compose-details-form .sl-compose-btn-white { margin: 0; width: 100%; box-shadow: 0 4px 20px rgba(255,255,255,0.1); }

/* Editor State */
.sl-compose-editor-state { position: absolute; inset: 0; background: #0f0f12; z-index: 30; display: flex; flex-direction: column; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.sl-compose-editor-state.open { opacity: 1; pointer-events: auto; }
.sl-compose-editor-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; position: absolute; top: 0; left: 0; right: 0; z-index: 100; background: linear-gradient(rgba(0,0,0,0.7), transparent); }
.sl-compose-editor-done { background: transparent; color: #fff; border: none; padding: 6px 12px; font-weight: 600; font-size: 16px; cursor: pointer; text-shadow: 0 1px 5px rgba(0,0,0,0.5); }
.sl-compose-editor-video-container { flex: 1; position: relative; display: flex; justify-content: center; align-items: center; overflow: hidden; background: #000; }
.sl-compose-editor-video-container video { width: 100%; height: 100%; object-fit: contain; }
.sl-compose-editor-overlays { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.sl-compose-editor-tools { display: flex; justify-content: center; gap: 15px; padding: 30px 20px; position: absolute; bottom: 0; left: 0; right: 0; z-index: 10; background: linear-gradient(transparent, rgba(0,0,0,0.8)); }
.sl-compose-editor-tool-btn { background: rgba(30,30,32,0.8); color: #fff; border: 1px solid rgba(255,255,255,0.1); padding: 12px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; cursor: pointer; backdrop-filter: blur(15px); min-width: 80px; transition: background 0.2s; }
.sl-compose-editor-tool-btn:active { background: rgba(255,255,255,0.2); }
.sl-compose-editor-tool-btn svg { width: 22px; height: 22px; }

/* Text Editor Overlay */
.sl-compose-text-editor { position: absolute; inset: 0; background: rgba(0,0,0,0.6); z-index: 200; display: flex; flex-direction: column; opacity: 0; pointer-events: none; transition: opacity 0.2s; backdrop-filter: blur(5px); }
.sl-compose-text-editor.open { opacity: 1; pointer-events: auto; }
.sl-compose-text-header { display: flex; justify-content: space-between; padding: 20px; align-items: center; }
.sl-compose-text-input-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 20px; position: relative; }
.sl-compose-text-input { background: transparent; border: none !important; color: #fff; font-size: 38px; font-weight: 800; text-align: center; width: 100%; outline: none !important; word-wrap: break-word; resize: none; overflow: hidden; caret-color: rgba(255,255,255,0.7); text-shadow: 0 4px 20px rgba(0,0,0,0.5); box-shadow: none !important; }
.sl-compose-text-input:focus { outline: none !important; box-shadow: none !important; border: none !important; }
.sl-compose-text-slider-wrap { position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 250px; width: 40px; display: flex; align-items: center; justify-content: center; z-index: 50; }
.sl-compose-text-slider-wrap input[type=range] { -webkit-appearance: none; width: 250px; height: 4px; background: rgba(255,255,255,0.5); transform: rotate(-90deg); outline: none !important; border: none !important; box-shadow: none !important; border-radius: 2px; }
.sl-compose-text-slider-wrap input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: #fff; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.5); border: 2px solid #ddd; }
.sl-compose-text-bottom { display: flex; align-items: center; padding: 10px 15px 20px; gap: 15px; }
.sl-compose-text-colors { display: flex; flex: 1; gap: 14px; overflow-x: auto; padding: 10px 5px; scrollbar-width: none; }
.sl-compose-color-swatch { width: 32px; height: 32px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,0.3); flex-shrink: 0; transition: transform 0.2s, border-color 0.2s; }
.sl-compose-color-swatch.active { transform: scale(1.15); border-color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,0.5), 0 4px 15px rgba(0,0,0,0.5); }

/* Sticker Inventory Sheet Overlay */
.sl-compose-sticker-sheet { position: absolute; bottom: 0; left: 0; right: 0; background: #1c1c1e; border-top-left-radius: 24px; border-top-right-radius: 24px; padding: 20px; z-index: 200; transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); max-height: 70%; overflow-y: auto; box-shadow: 0 -10px 40px rgba(0,0,0,0.5); }
.sl-compose-sticker-sheet.open { transform: translateY(0); }
.sl-compose-sticker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 15px; margin-top: 15px; }
.sl-compose-sticker-item { width: 100%; aspect-ratio: 1; border-radius: 12px; cursor: pointer; object-fit: contain; background: rgba(255,255,255,0.05); padding: 5px; transition: transform 0.2s; }
.sl-compose-sticker-item:active { transform: scale(0.9); }
.sl-compose-sticker-overlay-item { position: relative; pointer-events: auto; user-select: none; cursor: move; width: 120px; height: 120px; object-fit: contain; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3)); }

/* Compose Player UI */
.sl-compose-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 70px; height: 70px; background: #00000080; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 0.2s; backdrop-filter: blur(5px); }
.sl-compose-play-btn .sl-icon { width: 32px; height: 32px; color: #fff; margin-left: 4px; }
.sl-compose-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: rgba(255,255,255,0.2); z-index: 3; pointer-events: none; }
.sl-compose-progress-bar { height: 100%; background: #fff; width: 0%; transition: width 0.1s linear; }

/* Cover editor: closed panels leave both the hit-testing and focus trees. */
.sl-compose-editor-state:not(.open), .sl-compose-text-editor:not(.open), .sl-compose-sticker-sheet:not(.open) { visibility: hidden; }
.sl-compose-details-thumb-container .sl-compose-edit-cover { border: 1px solid #ffffff35; padding: 6px; }
.sl-cover-editor { display: grid; grid-template-rows: auto minmax(0,1fr) auto auto auto auto; z-index: 40; background: #080809; color: #fff; color-scheme: dark; isolation: isolate; }
.sl-cover-editor .sl-compose-editor-header { position: relative; z-index: 5; padding: max(14px,env(safe-area-inset-top)) 18px 12px; background: #080809; pointer-events: auto; }
.sl-cover-title { font-size: 15px; font-weight: 500; color: #d4d4d8; letter-spacing: .01em; }
.sl-cover-editor .sl-cover-round { width: 46px; height: 46px; padding: 11px; border-radius: 50%; background: #242426; color: white; display: inline-flex; align-items: center; justify-content: center; pointer-events: auto; touch-action: manipulation; }
.sl-cover-round > span:last-child { display: none; }
.sl-cover-editor .sl-cover-done { background: #fff; color: #111; text-shadow: none; }
.sl-cover-round .sl-icon { width: 27px; height: 27px; }
.sl-cover-workspace { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; overflow: hidden; container-type: size; padding: 0 12px; }
.sl-cover-stage { position: relative; aspect-ratio: 9/16; height: 100%; max-width: 100%; max-height: 100%; width: auto; background: #18181c; overflow: hidden; touch-action: none; user-select: none; }
@supports (width: 1cqh) { .sl-cover-stage { width: min(100cqw,56.25cqh); height: min(177.777cqw,100cqh); } }
.sl-cover-canvas { display: block; width: 100%; height: 100%; }
.sl .sl-cover-hint { color: #939398; font-size: 12px; text-align: center; padding: 9px 12px 0; }
.sl .sl-cover-feedback { text-align: center; color: #ded5ba; font-size: 12px; padding: 3px 18px; }
.sl-cover-feedback:empty { display: none; }
.sl-cover-zoom { display: flex; align-items: center; gap: 14px; max-width: 440px; width: 100%; margin: auto; padding: 10px 24px 4px; font-size: 12px; color: #a9a9b0; }
.sl-cover-panel { z-index: 4; position: relative; background: #141416; border-top: 1px solid #ffffff12; padding: 14px 18px max(18px,env(safe-area-inset-bottom)); max-height: 44dvh; overflow-y: auto; border-radius: 20px 20px 0 0; }
.sl-cover-panel[hidden] { display: none!important; pointer-events: none!important; }
.sl-cover-source-tabs { display: flex; gap: 8px; margin-bottom: 18px; }
.sl-cover-source-tab { display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: 1; border: 1px solid #ffffff20!important; background: #222225; color: #d9d9df; padding: 9px 10px; border-radius: 12px; min-height: 44px; font-size: 13px!important; }
.sl-cover-source-tab[aria-pressed=true] { border-color: #fff!important; color: #fff; background: #313134; }
.sl-cover-source-tab .sl-icon { width: 18px; height: 18px; }
.sl-cover-timeline { position: relative; height: 64px; margin: 0 3px; border-radius: 7px; background: #242426; touch-action: none; }
.sl-cover-frames { display: flex; width: 100%; height: 100%; overflow: hidden; border-radius: 7px; }
.sl-cover-frames canvas { width: 12.5%; height: 100%; object-fit: cover; }
.sl-cover-frame-cursor { position: absolute; top: -4px; bottom: -4px; width: 12.5%; min-width: 24px; border: 3px solid white; box-shadow: 0 0 0 1px #0006; border-radius: 7px; pointer-events: none; }
.sl input[type=range].sl-cover-scrub { -webkit-appearance: none; appearance: none; position: absolute; inset: 0; width: 100%; height: 100%; background: transparent !important; margin: 0; padding: 0; outline: none !important; border: none !important; box-shadow: none !important; cursor: ew-resize; z-index: 10; opacity: 1; touch-action: none; }
.sl input[type=range].sl-cover-scrub::-webkit-slider-runnable-track { -webkit-appearance: none; appearance: none; background: transparent !important; border: none !important; }
.sl input[type=range].sl-cover-scrub::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 40px; height: 64px; background: transparent !important; border: none !important; box-shadow: none !important; cursor: ew-resize; }
.sl-cover-timeline:focus-within { outline: 2px solid #c7b3e5; outline-offset: 7px; }
.sl-cover-time { display: block; text-align: center; color: #a5a5ae; font-variant-numeric: tabular-nums; font-size: 12px; margin-top: 12px; }
@media (min-width: 700px) { .sl-cover-editor .sl-compose-editor-header { padding-inline: max(24px,calc((100vw - 600px)/2)); }.sl-cover-panel { width: min(100%,600px); margin: 0 auto; } }
@media (prefers-reduced-motion: reduce) { .sl-cover-editor,.sl-cover-editor * { animation: none!important; transition: none!important; } }
.sl-cover-zoom input[type=range] { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 4px; padding: 0; background: rgba(255,255,255,0.2) !important; border: 0 !important; box-shadow: none !important; border-radius: 2px; outline: none !important; margin: 0 10px; }
.sl-cover-zoom input[type=range]::-webkit-slider-runnable-track { -webkit-appearance: none; appearance: none; background: transparent !important; border: none !important; }
.sl-cover-zoom input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff !important; cursor: pointer; border: none !important; box-shadow: 0 2px 8px rgba(0,0,0,0.5) !important; margin-top: -7px; }
.sl-cover-picker .sl-cover-source-panel { border-radius: 0; border: 0; background: #080809; }
.sl-cover-picker .sl-cover-timeline[hidden] { display: none; }
.sl-compose-editor-header, .sl-compose-editor-header button { pointer-events: auto; }
.sl-compose-details-thumb-container .sl-compose-edit-cover { padding: 6px; }
.sl-compose-editor-tool-btn .sl-icon { display: flex; width: 22px; height: 22px; }
@media (prefers-reduced-motion: reduce) { .sl-compose-editor-state, .sl-compose-text-editor, .sl-compose-sticker-sheet { transition: none; } }