:where([data-profile-package]:not([data-profile-package=""])) { --pack-bg: #14181b; --pack-image: none; --pack-surface: #1c2226; --pack-border: #3d464c; --pack-text: #f3f5f5; --pack-muted: #b1bac1; --pack-accent: #c8d0d5; --pack-radius: 6px; --pack-film: none; --pack-card-line: 0px; --sa-profile-name-glow: var(--pack-accent); --sa-profile-name-glow-soft: transparent; }
[data-profile-package="noir"] { --pack-bg: #111214; --pack-surface: #1a1b1e; --pack-border: #5d5d62; --pack-text: #f1efeb; --pack-muted: #bdbbc0; --pack-accent: #e0ded8; --pack-radius: 0px; --pack-card-line: 3px; }
[data-profile-package="piece-one"] { --pack-bg: #111111; --pack-surface: #202020; --pack-border: #505050; --pack-text: #f2f2f2; --pack-muted: #bdbdbd; --pack-accent: #e8c67f; --pack-radius: 6px; --pack-card-line: 2px; }
:where([data-profile-package]:not([data-profile-package=""])) { --pack-poster-frame: none; --pack-header-rule: 0; }
[data-profile-package="piece-one"] {
    --pack-header-rule: 1px solid #68686875;
    --pack-poster-frame:
        linear-gradient(#c5ab72, #c5ab72) left top / 12px 1px no-repeat,
        linear-gradient(#c5ab72, #c5ab72) left top / 1px 12px no-repeat,
        linear-gradient(#c5ab72, #c5ab72) right top / 12px 1px no-repeat,
        linear-gradient(#c5ab72, #c5ab72) right top / 1px 12px no-repeat,
        linear-gradient(#c5ab72, #c5ab72) left bottom / 12px 1px no-repeat,
        linear-gradient(#c5ab72, #c5ab72) left bottom / 1px 12px no-repeat,
        linear-gradient(#c5ab72, #c5ab72) right bottom / 12px 1px no-repeat,
        linear-gradient(#c5ab72, #c5ab72) right bottom / 1px 12px no-repeat;
}
[data-profile-package="spider-man"] { --pack-bg: #111723; --pack-surface: #1b2431; --pack-border: #664752; --pack-text: #edf2f8; --pack-muted: #b8c4d3; --pack-accent: #ecb6bc; --pack-radius: 6px; --pack-card-line: 1px; }
[data-profile-package="sharingan"] { --pack-bg: #180f14; --pack-surface: #271b24; --pack-border: #795058; --pack-text: #f9eff1; --pack-muted: #d1b6bf; --pack-accent: #f0a5ad; --pack-radius: 2px; --pack-card-line: 3px; }
[data-profile-package="bat"] { --pack-bg: #101112; --pack-surface: #1c1e20; --pack-border: #575c60; --pack-text: #f0f0f1; --pack-muted: #b7bbbf; --pack-accent: #e1e3e5; --pack-radius: 4px; --pack-card-line: 2px; }
[data-profile-package="valyrian"] { --pack-bg: #111111; --pack-surface: #202020; --pack-border: #505050; --pack-text: #f2f2f2; --pack-muted: #bdbdbd; --pack-accent: #cfbf8b; --pack-radius: 3px; --pack-card-line: 2px; }
[data-profile-package="pink"] { --pack-bg: #171417; --pack-image: linear-gradient(#171417d1, #171417d1), url("../profile-packages/pink-background-v1.webp"); --pack-surface: #252025; --pack-border: #76586c; --pack-text: #fff0f7; --pack-muted: #d9bbce; --pack-accent: #f0a7cf; --pack-radius: 6px; --pack-card-line: 1px; }
[data-profile-package="halloween"] { --pack-bg: #171614; --pack-surface: #25221e; --pack-border: #796245; --pack-text: #fff4e6; --pack-muted: #d5c2a8; --pack-accent: #ffb34f; --pack-radius: 5px; --pack-card-line: 2px; }
:where([data-profile-package]:not([data-profile-package=""])) { --pack-name: var(--pack-text); --pack-avatar-filter: none; }
[data-profile-package="minimal"], [data-profile-package="noir"], [data-profile-package="spider-man"], [data-profile-package="sharingan"] { --pack-avatar-filter: grayscale(1); }
:is([data-profile-package="piece-one"], [data-profile-package="sharingan"], [data-profile-package="valyrian"], [data-profile-package="pink"], [data-profile-package="halloween"]) { --pack-name: var(--pack-accent); }
body[data-profile-package]:not([data-profile-package=""]) { --text: var(--pack-text); --muted: var(--pack-muted); --border: var(--pack-border); background: var(--pack-image) var(--pack-bg) fixed !important; color: var(--pack-text); }
[data-profile-package]:not([data-profile-package=""]) .sa-profile-name--glow::after { color: var(--pack-accent); -webkit-text-fill-color: var(--pack-accent); opacity: .18; }
[data-profile-package]:not([data-profile-package=""]) .sa-profile-avatar { border: 0 !important; box-shadow: none !important; }
[data-profile-package]:not([data-profile-package=""]) .sa-profile-avatar[data-profile-avatar-kind="fallback"] { filter: var(--pack-avatar-filter, none); }
[data-profile-package]:not([data-profile-package=""]) :is(.sa-archive-card, .sa-favorite-card) { background: var(--pack-surface) !important; border: 1px solid var(--pack-border) !important; border-bottom-width: calc(1px + var(--pack-card-line)) !important; border-radius: var(--pack-radius) !important; box-shadow: none !important; }
[data-profile-package]:not([data-profile-package=""]) :is(.sa-archive-poster-link, .sa-archive-poster) { border-radius: var(--pack-radius); border-color: var(--pack-border); box-shadow: none; }
[data-profile-package]:not([data-profile-package=""]) .sa-favorite-poster { position: relative; border-radius: var(--pack-radius); }
[data-profile-package]:not([data-profile-package=""]) .sa-archive-card::before { content: none; }
[data-profile-package]:not([data-profile-package=""]) :is(.sa-archive-poster-link, .sa-archive-poster, .sa-package-poster__image, .sa-favorite-poster) { position: relative; isolation: isolate; }
[data-profile-package]:not([data-profile-package=""]) :is(.sa-archive-poster-link, .sa-archive-poster, .sa-package-poster__image, .sa-favorite-poster)::before,
.sa-package-mini .sa-package-mini__posters .sa-archive-card::before { content: ""; position: absolute; inset: 1px; z-index: 2; border-radius: inherit; background: var(--pack-poster-frame, none); pointer-events: none; }
[data-profile-package]:not([data-profile-package=""]) .sa-card-meta > span:first-child { color: var(--pack-muted); }
[data-profile-package]:not([data-profile-package=""]) .sa-archive-card::after { content: none !important; animation: none !important; }
/* Themed bars retain their original artwork, track and fill colors. */
[data-profile-package]:not([data-profile-package=""]) .sa-level-strip[class*="sa-level-strip--"] { padding-inline: 12px; }
[data-profile-package]:not([data-profile-package=""]) .sa-level-strip:not([class*="sa-level-strip--"]) { border-color: var(--pack-border); border-radius: var(--pack-radius); background: transparent; box-shadow: none; --sa-level-gradient: var(--pack-accent); --sa-level-accent: var(--pack-accent); }
[data-profile-package]:not([data-profile-package=""]) .sa-level-strip:not([class*="sa-level-strip--"]) .sa-level-head span { color: var(--pack-muted) !important; }
[data-profile-package]:not([data-profile-package=""]) .sa-level-strip:not([class*="sa-level-strip--"]) .sa-level-bar > span { background: var(--pack-accent); box-shadow: none; }
/* One slim stage for every package; artwork keeps its natural proportions. */
:where([data-profile-package]:not([data-profile-package=""])) { --pack-level-art: 26px; --pack-level-head: 15px; --pack-level-font: 10px; --pack-level-padding: 6px 12px 3px; --pack-level-gap: 2px; --pack-level-border: var(--pack-border); }
[data-profile-package="valyrian"] { --pack-level-border: #383838; }
.sa-package-mini[data-profile-package] { --pack-level-head: 12px; --pack-level-font: 8px; --pack-level-padding: 6px 8px 3px; }
:is(body[data-profile-package]:not([data-profile-package=""]) .sa-profile-header, :is(.sa-package-preview, .sa-package-mini)[data-profile-package]:not([data-profile-package=""])) .sa-level-strip { box-sizing: border-box; display: grid !important; grid-template-rows: var(--pack-level-head) var(--pack-level-art); grid-auto-rows: auto; row-gap: var(--pack-level-gap); align-items: center; align-content: start; width: 100% !important; max-width: 260px; min-width: 0; padding: var(--pack-level-padding) !important; border: 1px solid var(--pack-level-border) !important; overflow: visible; }
:is(body[data-profile-package]:not([data-profile-package=""]) .sa-profile-header, :is(.sa-package-preview, .sa-package-mini)[data-profile-package]:not([data-profile-package=""])) .sa-level-head { grid-row: 1; min-width: 0; height: var(--pack-level-head); font-size: var(--pack-level-font) !important; line-height: var(--pack-level-head); }
:is(body[data-profile-package]:not([data-profile-package=""]) .sa-profile-header, :is(.sa-package-preview, .sa-package-mini)[data-profile-package]:not([data-profile-package=""])) .sa-level-bar { grid-row: 2; align-self: center; height: 8px; margin-block: 0; }
:is(body[data-profile-package]:not([data-profile-package=""]) .sa-profile-header, :is(.sa-package-preview, .sa-package-mini)[data-profile-package]:not([data-profile-package=""])) .sa-level-bar > span { min-width: 0; max-width: 100%; }
:is(body[data-profile-package]:not([data-profile-package=""]) .sa-profile-header, :is(.sa-package-preview, .sa-package-mini)[data-profile-package]:not([data-profile-package=""])) .sa-level-sword-hilt { height: var(--pack-level-art) !important; }
:is(body[data-profile-package]:not([data-profile-package=""]) .sa-profile-header, :is(.sa-package-preview, .sa-package-mini)[data-profile-package]:not([data-profile-package=""])) :is(.sa-level-strip--grand-line, .sa-level-strip--dark-grimoire, .sa-level-strip--sharingan) .sa-level-bar { margin-inline: 4px; }
:is(body[data-profile-package]:not([data-profile-package=""]) .sa-profile-header, :is(.sa-package-preview, .sa-package-mini)[data-profile-package]:not([data-profile-package=""])) .sa-level-footer { display: block !important; grid-row: 3; margin: 0 !important; font-size: 10px; line-height: 1.6; }
/* Package-local artwork surrounds a live classic fill without leaking into other previews. */
[data-profile-package="noir"] { --pack-meter-art: url("../profile-packages/slient-bar-v6.svg"); }
[data-profile-package="pink"] { --pack-meter-art: url("../profile-packages/pink-bar-v6.svg"); }
[data-profile-package="halloween"] { --pack-meter-art: url("../profile-packages/halloween-bar-v5.svg"); }
[data-profile-package="bat"] { --pack-meter-art: url("../profile-packages/bat-bar-v5.svg"); }
:is([data-profile-package="noir"], [data-profile-package="pink"], [data-profile-package="halloween"], [data-profile-package="bat"]) { --pack-meter-track: 196 / 8; --pack-meter-width: calc(100% * 196 / 240); --pack-meter-left: calc(-100% * 22 / 196); --pack-meter-right: calc(-100% * 22 / 196); --pack-meter-aspect: 240 / 26; --pack-meter-position: 50%; }
:is(body:is([data-profile-package="noir"], [data-profile-package="pink"], [data-profile-package="halloween"], [data-profile-package="bat"]) .sa-profile-header, :is(.sa-package-preview, .sa-package-mini):is([data-profile-package="noir"], [data-profile-package="pink"], [data-profile-package="halloween"], [data-profile-package="bat"])) .sa-level-bar { position: relative; isolation: isolate; height: auto !important; aspect-ratio: var(--pack-meter-track); width: var(--pack-meter-width); max-width: none; margin-inline: auto; margin-block: 0 !important; border: 0; border-radius: 0; background: #090a0c; overflow: visible; box-shadow: none; }
/* Scale the shared vector viewport and its live opening together. */
:is(body:is([data-profile-package="noir"], [data-profile-package="pink"], [data-profile-package="halloween"], [data-profile-package="bat"]) .sa-profile-header, :is(.sa-package-preview, .sa-package-mini):is([data-profile-package="noir"], [data-profile-package="pink"], [data-profile-package="halloween"], [data-profile-package="bat"])) .sa-level-bar::before { content: ""; position: absolute; left: var(--pack-meter-left); right: var(--pack-meter-right); top: 50%; height: auto; aspect-ratio: var(--pack-meter-aspect); transform: translateY(-50%); z-index: 2; background: var(--pack-meter-art) center var(--pack-meter-position) / 100% auto no-repeat; pointer-events: none; }
:is(body:is([data-profile-package="noir"], [data-profile-package="pink"], [data-profile-package="halloween"], [data-profile-package="bat"]) .sa-profile-header, :is(.sa-package-preview, .sa-package-mini):is([data-profile-package="noir"], [data-profile-package="pink"], [data-profile-package="halloween"], [data-profile-package="bat"])) .sa-level-bar > span { min-width: 0; max-width: 100%; border-radius: 0; }
[data-profile-package]:not([data-profile-package=""]) :is(.sa-level-bar, .sa-level-eye, .sa-level-straw-hat, .sa-level-sword-hilt), [data-profile-package]:not([data-profile-package=""]) .sa-level-bar::before { image-rendering: auto; }
[data-profile-package]:not([data-profile-package=""]) .sa-level-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; letter-spacing: 0; }
[data-profile-package]:not([data-profile-package=""]) .sa-particles { display: none !important; }
[data-profile-package]:not([data-profile-package=""]) :is(.sa-name-color, .sa-level-strip, .sa-level-strip *) { animation: none !important; }
[data-profile-package]:not([data-profile-package=""]) .sa-name-color--white { color: var(--pack-text) !important; }
body :is(.sa-package-mini, .sa-package-preview)[data-profile-package]:not([data-profile-package=""]) .sa-name-color,
body[data-profile-package]:not([data-profile-package=""]) .sa-profile-header .sa-name-color { background: none !important; color: var(--pack-name, var(--pack-text)) !important; -webkit-text-fill-color: var(--pack-name, var(--pack-text)) !important; }
body[data-profile-package]:not([data-profile-package=""]) :is(.sa-archive-card, .sa-favorite-card) :is(.text-white, .sa-archive-title) { color: var(--pack-text) !important; }
.sa-profile-header { border-bottom: var(--pack-header-rule, 0); }
.sa-profile-header__name > .sa-name-color { box-shadow: none; padding: 0; line-height: inherit; }
.sa-package-studio { margin-top: 40px; padding-block: 28px; border-block: 1px solid var(--border, #34414c); color: #edf2f6; }
.sa-package-studio * { box-sizing: border-box; letter-spacing: 0; }
.sa-package-heading { display: flex; justify-content: space-between; align-items: start; gap: 16px; margin-bottom: 24px; }
.sa-package-heading h2 { margin: 0; color: inherit; font-size: 24px; line-height: 1.3; font-weight: 800; }
.sa-package-heading p { margin: 10px 0 0; color: #aab9c4; font-size: 13px; line-height: 1.8; }
.sa-package-plus { flex: 0 0 auto; border: 1px solid #776d4c; border-radius: 4px; padding: 5px 8px; color: #eedb9d; font-size: 10px; font-weight: 800; }
.sa-package-workspace { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.sa-package-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 14px; border: 0; padding: 0; margin: 0; min-width: 0; }
.sa-package-choice { position: relative; display: block; min-width: 0; cursor: pointer; }
.sa-package-choice > input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sa-package-choice__body { display: block; height: 100%; min-width: 0; padding: 6px 6px 14px; border: 1px solid #3d4852; border-radius: 8px; background: #182025; transition: border-color .15s; }
.sa-package-choice:hover .sa-package-choice__body { border-color: #9baab4; }
.sa-package-choice > input:checked + .sa-package-choice__body { border-color: var(--sa-selection-border); box-shadow: 0 0 0 1px var(--sa-selection-border); }
.sa-package-choice > input:focus-visible + .sa-package-choice__body { outline: 2px solid var(--sa-selection-border); outline-offset: 4px; }
.sa-package-choice__title { display: flex; min-height: 24px; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px; margin: 12px 8px 4px; font-size: 14px; font-weight: 800; line-height: 1.5; color: #f1f5f8; }
.sa-package-choice__title > span { font-size: 10px; font-weight: 700; color: #ace2c6; }
.sa-package-choice__description { display: block; margin: 0 8px; font-size: 11px; line-height: 1.65; color: #b3c0cb; }
.sa-package-mini { position: relative; isolation: isolate; display: grid; grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: 28px auto 48px; gap: 8px; align-items: center; align-content: start; min-width: 0; padding: 12px; border-radius: 4px; background: var(--pack-image) var(--pack-bg) !important; overflow: hidden; pointer-events: none; }
.sa-package-mini .sa-profile-avatar { width: 28px !important; height: 28px !important; border-radius: 50% !important; object-fit: cover; }
.sa-package-mini__name { display: block; min-width: 0; max-width: 100%; overflow: hidden !important; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 700; line-height: 1.5; }
.sa-package-mini .sa-package-mini__level { display: block; grid-column: 1 / -1; width: 100%; margin: 0; padding: 8px 12px; border-radius: 4px; }
.sa-package-mini .sa-level-head { font-size: 8px; line-height: 1.5; letter-spacing: 0; }
.sa-package-mini .sa-level-strip--valyrian-sword .sa-level-bar { height: 8px; margin: 8px 0 4px 34px; }
.sa-package-mini .sa-level-strip--valyrian-sword .sa-level-sword-hilt { left: -34px; width: 42px; height: 22px; }
.sa-package-mini .sa-level-strip--valyrian-sword .sa-level-spine b:nth-child(even) { display: none; }
.sa-package-mini__posters { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); height: 48px; gap: 7px; }
.sa-package-mini__posters .sa-archive-card { display: block; height: 48px; min-width: 0; }
.sa-package-mini__posters img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.sa-package-preview-column { min-width: 0; position: sticky; top: 20px; }
.sa-package-preview-label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-bottom: 12px; color: #afbfcb; font-size: 12px; }
.sa-package-preview-label strong { color: #f0f4f6; }
.sa-package-preview { position: relative; isolation: isolate; overflow: hidden; min-width: 0; min-height: 435px; border: 1px solid var(--pack-border, #3d4852); border-radius: 8px; background: var(--pack-image, none) var(--pack-bg, #182025); color: var(--pack-text, #f0f4f6); }
body[data-profile-package="pink"]:not([data-profile-package=""]), :is(.sa-package-mini, .sa-package-preview)[data-profile-package="pink"] { background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; }
.sa-package-preview__cover { height: 100px; overflow: hidden; opacity: .85; mask-image: linear-gradient(#000 40%, transparent); }
.sa-package-preview__cover img { width: 100%; height: 100%; object-fit: cover; }
.sa-package-preview__person { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 0 20px; margin-top: -22px; }
.sa-package-preview .sa-profile-avatar-wrap { margin-bottom: 14px; }
.sa-package-preview .sa-profile-avatar { width: 58px !important; height: 58px !important; border-radius: 50% !important; object-fit: cover; }
.sa-package-preview .sa-profile-header__name { width: 100%; font-size: 20px; line-height: 1.5; }
.sa-package-preview .sa-profile-header__bio { margin: 8px 0 16px; font-size: 12px; line-height: 1.7; color: var(--pack-muted, #b2c1ce); }
.sa-package-preview .sa-level-strip { display: block; width: 100%; max-width: 260px; margin-top: 12px; }
.sa-package-preview .sa-level-head { font-size: 10px; letter-spacing: 0; }
.sa-package-preview__archive { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 22px 20px; gap: 10px; position: relative; z-index: 1; }
.sa-package-poster { min-width: 0; margin: 0; }
.sa-package-poster > div { aspect-ratio: 2 / 3; overflow: hidden; background: #22292d; }
.sa-package-poster img { width: 100%; height: 100%; object-fit: cover; }
.sa-package-poster p { margin: 0; padding: 8px 6px; font-size: 10px; line-height: 1.5; color: var(--pack-text, #edf2f6); overflow-wrap: anywhere; }
.sa-package-poster > div > span { display: flex; align-items: center; justify-content: center; height: 100%; padding: 6px; font-size: 11px; color: #c3cdd5; overflow-wrap: anywhere; }
.sa-package-empty { grid-column: 1 / -1; margin: 12px 0; padding-block: 20px; border-top: 1px solid var(--pack-border, #3d4852); font-size: 12px; color: var(--pack-muted, #b2c1ce); }
.sa-package-published { margin: 14px 0; color: #aabcc8; font-size: 12px; line-height: 1.5; }
.sa-package-commands { display: flex; flex-wrap: wrap; gap: 10px; }
.sa-package-commands button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid #495862; border-radius: 6px; padding: 10px 16px; font: inherit; font-size: 12px; font-weight: 800; color: #edf4f8; background: #222e35; cursor: pointer; }
.sa-package-commands button[type="submit"] { background: #2863d5; border-color: #427be5; color: #fff; }
.sa-package-commands button:disabled { opacity: .5; cursor: default; }
.sa-package-commands button:focus-visible, .sa-package-membership:focus-visible { outline: 2px solid #b7d7fb; outline-offset: 3px; }
.sa-package-status { min-height: 40px; margin: 14px 0 0; color: #c8dbec; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.sa-package-status[data-error="true"] { color: #ffb6b8; }
.sa-package-membership { display: inline-flex; padding-block: 14px; color: #c8ddfa; font-size: 12px; text-decoration: underline; }
.sa-package-studio [hidden] { display: none !important; }
body.sa-light-mode .sa-package-studio { color: #eef3f7; background: #141b20; padding: 20px; }
@media (max-width: 760px) { .sa-package-workspace { grid-template-columns: minmax(0, 1fr); gap: 26px; } .sa-package-preview-column { position: static; } .sa-package-preview { min-height: 400px; } .sa-package-heading h2 { font-size: 22px; } }
@media (max-width: 380px) { .sa-package-grid { gap: 10px; } .sa-package-mini { padding: 10px; } .sa-package-choice__title { font-size: 12px; margin-inline: 4px; } .sa-package-choice__description { margin-inline: 4px; } }
@media (prefers-reduced-motion: reduce) { .sa-package-studio *, [data-profile-package]:not([data-profile-package=""]) *, [data-profile-package]:not([data-profile-package=""]) *::before, [data-profile-package]:not([data-profile-package=""]) *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }