/* [c1] */

:root {
    --st-amb-opacity: .5;
    --st-amb-wash: color-mix(in srgb, var(--ss-paper) 52%, transparent);
    --st-rail-w: 392px;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --st-amb-opacity: .55; --st-amb-wash: color-mix(in srgb, var(--ss-paper) 44%, transparent); }
}
:root[data-theme="dark"] { --st-amb-opacity: .55; --st-amb-wash: color-mix(in srgb, var(--ss-paper) 44%, transparent); }

.ss-ico { width: 20px; height: 20px; flex: none; }
.ss-glyph { width: 20px; height: 20px; flex: none; }

/* [c2] */
.ss-brush--purple.ss-brush--purple { --brush: var(--ss-brush-purple); }
.ss-brush--blue.ss-brush--blue { --brush: var(--ss-brush-blue); }
.ss-brush--yellow.ss-brush--yellow { --brush: var(--ss-brush-yellow); }
.ss-brush--green.ss-brush--green { --brush: var(--ss-brush-green); }
.ss-brush--orange.ss-brush--orange { --brush: var(--ss-brush-orange); }

/* [c3] */
.ss-app { position: relative; }
.ss-step[hidden] { display: none !important; }
.ss-studio-back { margin-right: 4px; }
html.ss-studio-on .ss-topbar--guest { grid-template-columns: var(--ss-tap) auto 1fr; }
html.ss-studio-on .ss-topbar--guest .ss-topbar__slot { visibility: visible; }

/* [c4] */
.ss-up { padding: clamp(24px, 5vh, 56px) var(--ss-gutter) 64px; }
.ss-up__inner { max-width: 780px; margin: 0 auto; display: grid; gap: 40px; align-items: center; }
.ss-up.has-proof .ss-up__inner { max-width: var(--ss-maxw); grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; }
.ss-up__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ss-up:not(.has-proof) .ss-up__main { text-align: center; align-items: stretch; }
.ss-up__kicker { margin: 0; display: inline-flex; align-items: center; gap: 10px; }
.ss-up__kicker::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--ss-accent); }
.ss-up:not(.has-proof) .ss-up__kicker { justify-content: center; }
.ss-up__title {
    margin: 0;
    font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);
    font-stretch: var(--ss-stretch-display);
    font-weight: var(--ss-weight-display);
    line-height: var(--ss-lh-tight);
    letter-spacing: -0.01em;
    text-wrap: balance;
}
.ss-up__lead { margin: 0; color: var(--ss-text-soft); font-size: var(--ss-fs-md); line-height: var(--ss-lh); }
.ss-up__proof { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.ss-up__compare { --ar: 4 / 3; border-radius: 22px; box-shadow: var(--ss-shadow-lg); }
.ss-up__proof-cap { color: var(--ss-text-soft); font-size: var(--ss-fs-sm); }

.ss-drop {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 300px;
    padding: 32px 24px;
    border-radius: 22px;
    border: 1.5px dashed color-mix(in srgb, var(--ss-accent) 45%, var(--ss-border-strong));
    background: color-mix(in srgb, var(--ss-surface) 82%, transparent);
    box-shadow: 0 18px 60px var(--ss-accent-glow);
    cursor: pointer;
    text-align: center;
    transition: border-color var(--ss-dur-micro) var(--ss-ease), box-shadow var(--ss-dur-comp) var(--ss-ease), transform var(--ss-dur-micro) var(--ss-ease);
    animation: st-drop-breathe 3s var(--ss-ease) infinite;
    outline: none;
}
@keyframes st-drop-breathe {
    0%, 100% { box-shadow: 0 18px 60px var(--ss-accent-glow); }
    50% { box-shadow: 0 22px 76px var(--ss-accent-glow-strong); }
}
.ss-drop:focus-visible { box-shadow: var(--ss-ring); animation: none; }
@media (hover: hover) { .ss-drop:hover { border-color: var(--ss-accent); } }
.ss-drop:active { transform: scale(.99); }
.ss-drop.is-dragover { border-style: solid; border-color: var(--ss-accent); background: var(--ss-accent-soft); animation: none; box-shadow: 0 0 0 12px var(--ss-accent-soft), 0 24px 80px var(--ss-accent-glow-strong); }
.ss-drop.is-busy { animation: none; cursor: progress; }
.ss-drop__idle { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ss-drop__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--ss-surface-2); color: var(--ss-text); margin-bottom: 4px; }
.ss-drop__icon .ss-ico { width: 24px; height: 24px; }
.ss-drop__title { font-size: var(--ss-fs-lg); font-weight: 600; }
.ss-drop__hint { color: var(--ss-text-soft); font-size: var(--ss-fs-sm); }
.ss-drop__btn { margin-top: 10px; pointer-events: none; }
.ss-drop__busy { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; display: grid; place-items: end center; }
.ss-drop__busy img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.ss-drop__busy-copy { position: relative; margin-bottom: 18px; padding: 8px 14px; border-radius: var(--ss-r-pill); background: var(--ss-scrim); color: var(--ss-on-scrim); font-size: var(--ss-fs-sm); }
.ss-drop__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--ss-accent); transform-origin: left; animation: st-drop-bar 1.6s var(--ss-ease) both; }
@keyframes st-drop-bar { from { transform: scaleX(.05); } to { transform: scaleX(.92); } }
.ss-up__error { text-align: left; }
.ss-up:not(.has-proof) .ss-up__error { text-align: center; }
.ss-up__small { padding: 14px 16px; border-radius: 14px; background: var(--ss-warn-soft); display: flex; flex-direction: column; gap: 10px; text-align: left; }
.ss-up__small p { margin: 0; font-size: var(--ss-fs-sm); }
.ss-up__more { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.ss-up:not(.has-proof) .ss-up__more { align-items: center; }
.ss-up__recent { width: 100%; }
.ss-up__recent-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.ss-up__recent-head .ss-eyebrow { margin: 0; }
.ss-up__recent-row { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.ss-up__recent-row::-webkit-scrollbar { display: none; }
.ss-up__thumb { flex: none; display: flex; flex-direction: column; gap: 6px; align-items: center; padding: 0; border: 0; background: none; color: var(--ss-text-soft); font: inherit; font-size: var(--ss-fs-xs); cursor: pointer; }
.ss-up__thumb-img { position: relative; width: 112px; height: 84px; border-radius: 12px; overflow: hidden; background: var(--ss-surface-2); box-shadow: var(--ss-shadow-sm); transition: transform var(--ss-dur-micro) var(--ss-ease), box-shadow var(--ss-dur-micro); }
.ss-up__thumb-img img { width: 100%; height: 100%; object-fit: cover; }
.ss-up__thumb .ss-spinner, .ss-existing__tile .ss-spinner, .ss-sample .ss-spinner { position: absolute; inset: 0; margin: auto; display: none; }
.ss-up__thumb.is-busy .ss-spinner, .ss-existing__tile.is-busy .ss-spinner, .ss-sample.is-busy .ss-spinner { display: block; }
.ss-up__thumb.is-busy img, .ss-existing__tile.is-busy img, .ss-sample.is-busy img { opacity: .5; }
@media (hover: hover) { .ss-up__thumb:hover .ss-up__thumb-img { transform: translateY(-2px); box-shadow: var(--ss-shadow-hover); } }
.ss-up__thumb:focus-visible { outline: none; }
.ss-up__thumb:focus-visible .ss-up__thumb-img { box-shadow: var(--ss-ring); }
.ss-up__sample { align-self: flex-start; }
.ss-up:not(.has-proof) .ss-up__sample { align-self: center; }
.ss-up__bar { display: none; }

/* [c5] */
.ss-samples { padding: 28px var(--ss-gutter) 64px; }
.ss-samples__inner { max-width: var(--ss-maxw); margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.ss-samples__back { align-self: flex-start; margin-left: -8px; }
.ss-samples__title { margin: 6px 0 0; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem); font-stretch: var(--ss-stretch-display); font-weight: var(--ss-weight-display); line-height: var(--ss-lh-tight); }
.ss-samples__lead { margin: 0 0 14px; color: var(--ss-text-soft); }
.ss-samples__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 18px; }
.ss-sample { display: flex; flex-direction: column; gap: 4px; padding: 0; border: 0; background: none; color: var(--ss-text); text-align: left; font: inherit; cursor: pointer; }
.ss-sample__img { position: relative; aspect-ratio: 3 / 2; border-radius: 14px; overflow: hidden; background: var(--ss-surface-2); margin-bottom: 6px; box-shadow: var(--ss-shadow-sm); transition: transform var(--ss-dur-micro) var(--ss-ease), box-shadow var(--ss-dur-micro) var(--ss-ease); }
.ss-sample__img img { width: 100%; height: 100%; object-fit: cover; }
.ss-sample__title { font-weight: 600; font-size: var(--ss-fs-md); }
.ss-sample__sub { color: var(--ss-text-soft); font-size: var(--ss-fs-sm); }
@media (hover: hover) { .ss-sample:hover .ss-sample__img { transform: translateY(-2px); box-shadow: var(--ss-shadow-hover), 0 0 0 1.5px var(--ss-text); } }
.ss-sample:active .ss-sample__img { transform: scale(.97); }
.ss-sample:focus-visible { outline: none; }
.ss-sample:focus-visible .ss-sample__img, .ss-sample.is-selected .ss-sample__img { box-shadow: var(--ss-ring); }
.ss-samples__more { display: none; }

/* [c6] */
html.ss-studio-on, html.ss-studio-on body { overscroll-behavior: none; }
.ss-studio {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--st-rail-w);
    height: calc(100dvh - var(--ss-topbar-h));
    min-height: 560px;
}
.ss-studio__stage {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 24px 32px;
    background: var(--ss-surface-2);
}
.ss-studio__ambient {
    position: absolute;
    inset: -80px;
    width: calc(100% + 160px);
    height: calc(100% + 160px);
    object-fit: cover;
    filter: blur(60px) saturate(1.15);
    opacity: var(--st-amb-opacity);
    z-index: -2;
    pointer-events: none;
}
.ss-studio__stage::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(120% 90% at 50% 40%, transparent 30%, var(--st-amb-wash) 100%);
    pointer-events: none;
}
.ss-studio__ambient:not([src]) { display: none; }
.ss-studio__photo {
    position: relative;
    flex: none;
    width: 640px;
    height: 480px;
    max-width: 100%;
    border-radius: 16px;
    overflow: hidden;
    background: var(--ss-surface-3);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12), var(--ss-shadow-lg);
    animation: st-photo-settle var(--ss-dur-surface) var(--ss-ease) both;
}
@keyframes st-photo-settle { from { opacity: 0; transform: scale(1.02); } to { opacity: 1; transform: none; } }
.ss-studio__viewport { position: absolute; inset: 0; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.ss-canvas__stage { position: absolute; top: 0; left: 0; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none; }
.ss-canvas__stage img { display: block; max-width: none; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.ss-canvas__draw { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: .8; -webkit-user-drag: none; user-select: none; }
.ss-canvas__ring {
    position: absolute;
    z-index: 3;
    display: none;
    border: 1.5px solid rgba(255, 255, 255, .95);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(0, 0, 0, .45);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
/* [c23] */
.ss-studio__viewport .ss-canvas__ring.has-colour {
    border: 2px solid color-mix(in srgb, var(--ring) 80%, #fff);
    background: color-mix(in srgb, var(--ring) 35%, transparent);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 0 18px 4px color-mix(in srgb, var(--ring) 55%, transparent), inset 0 0 12px color-mix(in srgb, var(--ring) 45%, transparent);
}
.ss-studio__zoom { position: absolute; top: 12px; left: 12px; z-index: 4; min-width: 64px; }
/* [c24] */
.ss-studio__drawhint { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 16px; border-radius: inherit; background: color-mix(in srgb, #000 22%, transparent); opacity: 0; transition: opacity 220ms var(--ss-ease); pointer-events: none; }
.ss-studio__drawhint[hidden] { display: none; }
.ss-studio__drawhint.is-on { opacity: 1; }
.ss-studio__drawhint-pill { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 12px 18px; border-radius: var(--ss-r-pill); font-weight: 600; font-size: var(--ss-fs-md); line-height: 1.25; color: var(--ss-text); box-shadow: 0 0 0 2px var(--brush), 0 0 26px color-mix(in srgb, var(--brush) 55%, transparent), var(--ss-glass-shadow); transform: translateY(6px) scale(.98); transition: transform 260ms var(--ss-ease); }
.ss-studio__drawhint.is-on .ss-studio__drawhint-pill { transform: none; }
.ss-studio__drawhint-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--brush); box-shadow: 0 0 10px var(--brush); flex: none; }
.ss-studio__restore { position: absolute; inset: 0; z-index: 6; display: grid; place-content: center; justify-items: center; gap: 12px; background: color-mix(in srgb, var(--ss-paper) 70%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ss-studio__restore p { margin: 0; font-weight: 500; }
.ss-studio__context { display: none; }
.ss-studio__alert { display: none; }

/* [c7] */
.ss-studio__dock { flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 100%; animation: ss-rise-in 220ms var(--ss-ease) both; }
.ss-studio__brushes { display: none; }
.ss-studio__tools { gap: 4px; padding: 6px; max-width: 100%; }
.ss-tool.ss-glassbar__tool { width: auto; min-width: 58px; height: 54px; padding: 4px 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--ss-text); }
.ss-tool .ss-ico { width: 20px; height: 20px; }
.ss-tool__label { font-size: var(--ss-fs-xs); font-weight: 600; line-height: 1; letter-spacing: .01em; }
.ss-tool:disabled { opacity: .45; cursor: not-allowed; }
.ss-tool:disabled .ss-tool__label { color: var(--ss-text-soft); }
/* [c35] */
.ss-tool.ss-glassbar__tool[aria-pressed="true"] { color: var(--ss-accent-ink); }
.ss-studio__pill {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 54px;
    min-width: 0;
    max-width: 236px;
    padding: 4px 10px 4px 5px;
    border-radius: 14px;
    border: 1px solid var(--ss-glass-border);
    background: color-mix(in srgb, var(--ss-surface) 72%, transparent);
    color: var(--ss-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--ss-dur-micro), transform var(--ss-dur-micro);
}
.ss-studio__pill:active { transform: scale(.97); }
.ss-studio__pill:focus-visible { outline: none; box-shadow: var(--ss-ring); }
.ss-studio__pill-thumb { width: 42px; height: 42px; border-radius: 10px; flex: none; overflow: hidden; background: var(--ss-surface-2); box-shadow: 0 0 0 2.5px var(--brush, var(--ss-border-strong)); margin-left: 2px; }
.ss-studio__pill-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ss-studio__pill-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.ss-studio__pill-name { font-size: var(--ss-fs-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-studio__pill-use { font-size: var(--ss-fs-xs); color: var(--ss-text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-studio__pill-use:empty { display: none; }
.ss-studio__pill.is-solo .ss-studio__pill-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; }
.ss-studio__pill.is-empty .ss-studio__pill-thumb { box-shadow: none; border: 1.5px dashed var(--ss-border-strong); }
.ss-studio__pill.is-empty { flex: none; }
.ss-studio__pill.is-empty, .ss-studio__pill.is-empty + .ss-studio__sep--pill { display: none; }
.ss-studio__pill.is-single { padding-right: 8px; gap: 4px; }
.ss-studio__pill.is-single .ss-studio__pill-text { display: none; }
.ss-studio__pill.is-empty .ss-studio__pill-name { white-space: nowrap; }
.ss-studio__pill-caret { width: 16px; height: 16px; color: var(--ss-text-soft); }
.ss-studio__size { display: flex; align-items: center; gap: 2px; padding: 0 2px; }
.ss-studio__size-label { font-size: var(--ss-fs-xs); font-weight: 600; color: var(--ss-text-soft); margin-right: 4px; writing-mode: horizontal-tb; }
.ss-studio__dot { display: grid; place-items: center; width: 44px; height: 54px; border: 0; border-radius: 12px; background: transparent; color: var(--ss-text); cursor: pointer; transition: background-color var(--ss-dur-micro); }
.ss-studio__dot span { display: block; border-radius: 50%; background: currentColor; transition: transform var(--ss-dur-micro) var(--ss-ease); }
.ss-studio__dot[data-size="s"] span { width: 7px; height: 7px; }
.ss-studio__dot[data-size="m"] span { width: 12px; height: 12px; }
.ss-studio__dot[data-size="l"] span { width: 19px; height: 19px; }
.ss-studio__dot[aria-checked="true"] { background: var(--ss-surface); box-shadow: inset 0 0 0 2px var(--ss-text); }
@media (hover: hover) { .ss-studio__dot:hover { background: color-mix(in srgb, var(--ss-text) 7%, transparent); } }
.ss-studio__dot:focus-visible { outline: none; box-shadow: var(--ss-ring); }
.ss-studio__sizecycle { display: none !important; }
.ss-studio__cycle-dot { display: grid; place-items: center; width: 20px; height: 20px; }
.ss-studio__cycle-dot span { display: block; border-radius: 50%; background: currentColor; width: 12px; height: 12px; transition: width var(--ss-dur-micro), height var(--ss-dur-micro); }
.ss-studio__cycle-dot[data-size-now="s"] span { width: 7px; height: 7px; }
.ss-studio__cycle-dot[data-size-now="l"] span { width: 18px; height: 18px; }
.ss-studio__stage[data-tool="mark"] .ss-studio__viewport { cursor: crosshair; }

/* [c8] */
.ss-rail {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--ss-bg);
    border-left: 1px solid var(--ss-border);
    transition: opacity var(--ss-dur-comp) var(--ss-ease);
}
html.ss-picker-open .ss-rail { opacity: .45; }
.ss-rail__scroll { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 22px 22px 12px; display: flex; flex-direction: column; gap: 10px; }
.ss-rail__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.ss-rail__title { margin: 0; font-size: var(--ss-fs-xl); font-stretch: var(--ss-stretch-display); font-weight: var(--ss-weight-display); }
.ss-rail__empty { display: flex; gap: 14px; align-items: center; width: 100%; padding: 18px; border-radius: var(--ss-r-card); border: 1.5px dashed var(--ss-border-strong); background: none; color: var(--ss-text-soft); font: inherit; text-align: left; cursor: pointer; transition: border-color var(--ss-dur-micro), background-color var(--ss-dur-micro), transform var(--ss-dur-micro); }
.ss-rail__empty[hidden] { display: none; }
.ss-rail__empty:active { transform: scale(.985); }
.ss-rail__empty:focus-visible { outline: none; box-shadow: var(--ss-ring); }
@media (hover: hover) { .ss-rail__empty:hover { border-color: var(--ss-accent); background: var(--ss-surface-2); } }
.ss-rail__empty p { margin: 0; font-size: var(--ss-fs-sm); line-height: 1.45; }
.ss-rail__empty-text { display: flex; flex-direction: column; gap: 2px; font-size: var(--ss-fs-sm); line-height: 1.45; }
.ss-rail__empty strong { color: var(--ss-text); font-size: var(--ss-fs-md); }
.ss-rail__empty-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--ss-surface-2); color: var(--ss-text); flex: none; }
.ss-rail__list { display: flex; flex-direction: column; gap: 10px; }

/* [c9] */
.ss-pc {
    --brush: var(--ss-border-strong);
    position: relative;
    display: flex;
    align-items: stretch;
    border-radius: var(--ss-r-card);
    border: 1px solid var(--ss-border);
    background: var(--ss-surface);
    box-shadow: var(--ss-shadow-sm);
    overflow: hidden;
    transition: border-color var(--ss-dur-micro) var(--ss-ease), box-shadow var(--ss-dur-comp) var(--ss-ease);
}
.ss-pc::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--brush); }
.ss-pc.is-armed { border-color: var(--brush); box-shadow: 0 0 0 1px var(--brush), 0 8px 22px color-mix(in srgb, var(--brush) 22%, transparent); }
.ss-pc__main { flex: 1 1 auto; min-width: 0; display: flex; gap: 14px; align-items: center; padding: 12px 6px 12px 16px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: inherit; }
.ss-pc__main:focus-visible { outline: none; box-shadow: inset var(--ss-ring); }
@media (hover: hover) { .ss-pc:hover { border-color: var(--ss-border-strong); } .ss-pc.is-armed:hover { border-color: var(--brush); } }
.ss-pc__main:active { transform: scale(.985); }
.ss-pc__thumb { width: 56px; height: 56px; flex: none; border-radius: 12px; overflow: hidden; background: var(--ss-surface-2); box-shadow: 0 0 0 2.5px var(--ss-surface), 0 0 0 4.5px var(--brush); margin: 4px; }
.ss-pc__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ss-pc__text { display: flex; flex-direction: column; min-width: 0; gap: 2px; line-height: 1.25; }
.ss-pc__brand { font-size: var(--ss-fs-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ss-text-soft); }
.ss-pc__name { font-size: var(--ss-fs-md); font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ss-pc__meta { font-size: var(--ss-fs-sm); color: var(--ss-text-soft); }
.ss-pc.is-justdrawn .ss-pc__thumb { animation: st-drawn-thumb 520ms var(--ss-ease) both; }
@keyframes st-drawn-dot { 0% { transform: scale(1); } 40% { transform: scale(2.1); box-shadow: 0 0 0 6px color-mix(in srgb, var(--brush) 25%, transparent); } 100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; } }
@keyframes st-drawn-text { from { opacity: .3; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes st-drawn-thumb { 0% { transform: scale(1); } 45% { transform: scale(1.08); } 100% { transform: scale(1); } }
.ss-pc__more { align-self: center; margin-right: 6px; color: var(--ss-text-soft); }
.ss-rail__summary { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: var(--ss-r-card); border: 1px solid var(--ss-border); background: var(--ss-surface); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ss-rail__summary .ss-ico { margin-left: auto; color: var(--ss-text-soft); }
.ss-rail__summary-thumbs { display: flex; gap: 6px; }
.ss-rail__summary-thumb { width: 34px; height: 34px; border-radius: 9px; overflow: hidden; background: var(--ss-surface-2); box-shadow: 0 0 0 2px var(--brush, var(--ss-border-strong)); flex: none; }
.ss-rail__summary-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ss-rail__summary-text { display: flex; flex-direction: column; font-size: var(--ss-fs-sm); color: var(--ss-text-soft); line-height: 1.3; }
.ss-rail__summary-text strong { color: var(--ss-text); }
.ss-rail.is-folded .ss-rail__list, .ss-rail.is-folded .ss-rail__empty { display: none; }

/* [c10] */
.ss-opts { margin-top: 6px; border-top: 1px solid var(--ss-border); padding-top: 10px; }
.ss-opts__toggle { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 6px 4px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 12px; }
.ss-opts__toggle:focus-visible { outline: none; box-shadow: var(--ss-ring); }
@media (hover: hover) { .ss-opts__toggle:hover { background: var(--ss-surface-2); } }
.ss-opts__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--ss-border); flex: none; }
.ss-opts__text { display: flex; flex-direction: column; justify-content: center; min-width: 0; flex: 1; line-height: 1.3; }
.ss-opts__text strong { font-size: var(--ss-fs-md); font-weight: 600; }
.ss-opts__caret { color: var(--ss-text-soft); transition: transform var(--ss-dur-comp) var(--ss-ease); }
.ss-opts.is-open .ss-opts__caret { transform: rotate(180deg); }
.ss-opts__panel { display: flex; flex-direction: column; gap: 18px; padding: 10px 2px 6px; }
.ss-opts.is-open .ss-opts__panel { animation: ss-rise-in var(--ss-dur-comp) var(--ss-ease) both; }
.ss-opts__group { display: flex; flex-direction: column; gap: 8px; }
.ss-opts__group .ss-eyebrow { margin: 0; }
.ss-opts__optional { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ss-text-soft); margin-left: 6px; }
/* [c36] */
.ss-opts .ss-switch__hint { color: var(--ss-text-soft); }
.ss-opts__time .ss-seg__opt { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 3px; min-height: 58px; font-size: var(--ss-fs-xs); line-height: 1.15; padding-inline: 4px; }
.ss-opts__time .ss-ico { width: 18px; height: 18px; }
.ss-opts__engine { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding-top: 12px; border-top: 1px solid var(--ss-border); font-size: var(--ss-fs-sm); color: var(--ss-text-soft); }
.ss-opts__engine-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-opts__engine-link { flex: none; display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; padding: 0 6px; border-radius: 8px; color: var(--ss-text); font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; }
.ss-opts__engine-link:focus-visible { outline: none; box-shadow: var(--ss-ring); }
.ss-opts__switch { padding: 4px 0; }
.ss-opts .ss-textarea { min-height: 84px; }

/* [c11] */
.ss-rail__foot { flex: none; display: flex; flex-direction: column; gap: 12px; padding: 14px 22px 18px; border-top: 1px solid var(--ss-border); background: var(--ss-bg); }
.ss-visualize { position: relative; overflow: hidden; gap: 10px; }
.ss-visualize .ss-glyph { width: 22px; height: 22px; }
.ss-visualize.is-soft-disabled { opacity: .5; }
.ss-visualize__text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; min-width: 0; }
.ss-visualize__sub { font-size: 0.75rem; font-weight: 500; opacity: .82; white-space: nowrap; }
.ss-visualize__sub[hidden] { display: none; }
.ss-visualize__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 60%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .34), transparent); transform: translateX(-110%); opacity: 0; pointer-events: none; }
.ss-visualize.is-launching { opacity: 1 !important; cursor: progress; }
.ss-visualize.is-launching .ss-visualize__fill { opacity: 1; animation: st-launch 1.1s linear infinite; }
.ss-visualize.is-launching .ss-glyph { animation: st-launch-glyph 1.1s var(--ss-ease) infinite; }
@keyframes st-launch { from { transform: translateX(-110%); } to { transform: translateX(190%); } }
@keyframes st-launch-glyph { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
.ss-visualize__buy { display: none; width: 20px; height: 20px; flex: none; }
.ss-visualize.is-buy .ss-glyph { display: none; }
.ss-visualize.is-buy .ss-visualize__buy { display: block; }
.ss-rail__error { margin: 0; text-align: center; }
.ss-opts__panel .ss-textarea::placeholder { color: var(--ss-text-soft); opacity: 1; }
.ss-studio__captcha:empty { display: none; }
.ss-lowchip { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 12px; border-radius: 14px; background: var(--ss-accent-soft); }
.ss-lowchip[hidden] { display: none; }
.ss-lowchip__glyph { width: 20px; height: 20px; color: var(--ss-accent-text); flex: none; }
.ss-lowchip__text { flex: 1; font-size: var(--ss-fs-sm); color: var(--ss-text-soft); }
.ss-lowchip__text strong { color: var(--ss-text); }
.ss-lowchip__more { flex: none; }

/* [c12] */
.ss-studio__bar { display: none; }

/* [c13] */
.ss-pillmenu { position: fixed; z-index: var(--ss-z-sheet); min-width: 240px; padding: 6px; border-radius: 16px; display: flex; flex-direction: column; gap: 2px; animation: ss-rise-in 180ms var(--ss-ease) both; }
.ss-pillmenu__item { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 10px 6px 6px; border: 0; border-radius: 12px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ss-pillmenu__item span:last-child { display: flex; flex-direction: column; font-size: var(--ss-fs-xs); color: var(--ss-text-soft); }
.ss-pillmenu__item strong { font-size: var(--ss-fs-sm); color: var(--ss-text); }
.ss-pillmenu__item[aria-checked="true"] { background: var(--ss-surface-2); }
@media (hover: hover) { .ss-pillmenu__item:hover { background: var(--ss-surface-2); } }
.ss-pillmenu__thumb { width: 38px; height: 38px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: var(--ss-surface-2); box-shadow: 0 0 0 2px var(--brush, var(--ss-border-strong)); flex: none; font-size: 20px; }
.ss-pillmenu__thumb img { width: 100%; height: 100%; object-fit: cover; }

/* [c14] */
.ss-picker .ss-sheet__panel { width: min(100%, 560px); background: var(--ss-bg); }
.ss-picker { --pk-gutter: 24px; --pk-sw-ring: rgba(0, 0, 0, .15); --pk-plate: var(--ss-surface); --pk-plate-edge: var(--ss-border-strong); }
:root[data-theme="dark"] .ss-picker { --pk-sw-ring: rgba(255, 255, 255, .32); --pk-plate: #efebe4; --pk-plate-edge: transparent; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ss-picker { --pk-sw-ring: rgba(255, 255, 255, .32); --pk-plate: #efebe4; --pk-plate-edge: transparent; } }
@media (min-width: 641px) {
    html.ss-picker-open .ss-toasts { left: calc((100vw - var(--st-rail-w)) / 2); }
}
@media (min-width: 641px) {
    /* [c26] */
    .ss-picker { place-items: stretch end; padding: var(--ss-topbar-h) 0 0; }
    .ss-picker .ss-sheet__backdrop { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
    .ss-picker .ss-sheet__panel { width: var(--st-rail-w); max-height: none; height: 100%; border-radius: 0; border: 0; border-left: 1px solid var(--ss-border); box-shadow: none; animation: st-panel-in var(--ss-dur-surface) var(--ss-ease) both; }
    .ss-picker.is-closing .ss-sheet__panel { animation: st-panel-out var(--ss-dur-micro) var(--ss-ease-in) both; }
}
@keyframes st-panel-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes st-panel-out { to { opacity: 0; transform: translateX(16px); } }
.ss-picker__head { flex: none; gap: 6px; padding-left: 14px; }
.ss-picker__foot { flex: none; }
.ss-picker__back { flex: none; }
.ss-picker__title { display: flex; flex-direction: column; min-width: 0; font-stretch: var(--ss-stretch-display); font-weight: var(--ss-weight-display); font-size: var(--ss-fs-lg); }
.ss-picker__head .ss-picker__back[hidden] + .ss-picker__title { padding-left: 8px; }
.ss-picker__kicker { font-size: var(--ss-fs-2xs); font-stretch: var(--ss-stretch-ui); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ss-text-soft); }
.ss-picker__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-picker__body { padding-top: 4px; }
.ss-picker__level, .ss-picker__stack { display: flex; flex-direction: column; gap: 10px; }
.ss-picker__stack[hidden] { display: none; }
.ss-picker__level.is-in { animation: st-level-in var(--ss-dur-surface) var(--ss-ease) both; }
.ss-picker__level.is-in-back { animation: st-level-back var(--ss-dur-surface) var(--ss-ease) both; }
@keyframes st-level-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes st-level-back { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
.ss-picker__label { margin: 10px 0 2px; }
.ss-picker__search { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; margin: -4px calc(-1 * var(--pk-gutter)) 0; padding: 4px var(--pk-gutter) 6px; background: var(--ss-bg); }
.ss-picker__search > .ss-ico { position: absolute; left: calc(var(--pk-gutter) + 14px); color: var(--ss-text-soft); pointer-events: none; }
.ss-picker__search .ss-input { height: 48px; min-height: 48px; padding: 0 44px; line-height: 46px; }
.ss-picker__search .ss-input::-webkit-search-cancel-button { display: none; }
.ss-picker__search-clear { position: absolute; right: calc(var(--pk-gutter) + 2px); width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; color: var(--ss-text-soft); cursor: pointer; border-radius: 10px; }
.ss-picker__recent { display: flex; flex-wrap: wrap; gap: 8px; }
.ss-picker__recent .ss-chip { max-width: 100%; }
.ss-picker__cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ss-picker__skel { aspect-ratio: 16 / 10; border-radius: 14px; }
.ss-picker__cat { position: relative; aspect-ratio: 16 / 10; border: 0; padding: 0; border-radius: 14px; overflow: hidden; background: var(--ss-surface-3); color: #fff; font: inherit; cursor: pointer; text-align: left; transition: transform var(--ss-dur-micro) var(--ss-ease), box-shadow var(--ss-dur-micro); }
.ss-picker__cat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ss-picker__cat-cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; padding: 26px 12px 10px; background: var(--ss-caption-fade); font-weight: 600; font-size: var(--ss-fs-sm); line-height: 1.2; }
.ss-picker__cat-cap > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-picker__cat-n { position: absolute; top: 8px; right: 8px; min-width: 26px; padding: 3px 8px; border-radius: var(--ss-r-pill); background: var(--ss-scrim); color: var(--ss-on-scrim); font-weight: 600; font-size: var(--ss-fs-2xs); line-height: 1.3; text-align: center; font-variant-numeric: tabular-nums; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ss-picker__cat.is-plain { background: var(--ss-surface-2); color: var(--ss-text); }
.ss-picker__cat.is-plain .ss-picker__cat-cap { background: none; }
@media (hover: hover) { .ss-picker__cat:hover { transform: translateY(-2px); box-shadow: var(--ss-shadow-hover); } }
.ss-picker__cat:active { transform: scale(.97); }
.ss-picker__cat:focus-visible { outline: none; box-shadow: var(--ss-ring); }
.ss-picker__hits { display: flex; flex-direction: column; gap: 2px; }
.ss-picker__hit { display: flex; align-items: center; gap: 12px; min-height: 60px; margin-inline: -6px; padding: 6px; border: 0; border-radius: 12px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
@media (hover: hover) { .ss-picker__hit:hover { background: var(--ss-surface-2); } }
.ss-picker__hit:focus-visible { outline: none; box-shadow: var(--ss-ring); }
.ss-picker__hit-img { width: 48px; height: 48px; border-radius: 10px; overflow: hidden; background: var(--ss-surface-2); flex: none; }
.ss-picker__hit-img img { width: 100%; height: 100%; object-fit: cover; }
.ss-picker__hit-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ss-picker__hit-text strong { font-weight: 600; }
.ss-picker__hit-text span { font-size: var(--ss-fs-sm); color: var(--ss-text-soft); }
.ss-picker__hit-text .ss-picker__hit-why { font-size: var(--ss-fs-xs); font-weight: 600; color: var(--ss-text); }
.ss-picker__offline { padding: 24px 8px; align-items: center; text-align: center; gap: 12px; }
.ss-picker__none { align-items: center; text-align: center; padding: 22px 18px; }
.ss-picker__none-title { margin: 0; font-weight: 600; font-size: var(--ss-fs-md); }
.ss-picker__grid > .ss-picker__none { grid-column: 1 / -1; }
.ss-picker__near { display: flex; flex-direction: column; gap: 2px; width: 100%; margin-top: 10px; text-align: left; }
.ss-picker__near .ss-picker__label { margin: 4px 0; }
.ss-picker__request { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.ss-picker__request-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ss-picker__request-acts[hidden] { display: none; }
.ss-picker__request-acts > .ss-pro { flex-basis: 100%; text-align: left; }
.ss-picker__request-form { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.ss-picker__request-form[hidden] { display: none; }
.ss-picker__request-form .ss-picker__request-acts { justify-content: flex-end; }
.ss-picker__req { gap: 6px; text-align: left; }
.ss-picker__req-label { font-size: var(--ss-fs-sm); font-weight: 600; color: var(--ss-text); }
.ss-picker__req .ss-picker__req-text { min-height: 84px; padding: 12px 14px; font-size: var(--ss-fs-md); }
.ss-picker__req .ss-picker__req-text::placeholder { color: var(--ss-text-soft); opacity: 1; }
.ss-picker__req .ss-picker__req-hint { padding: 0; font-size: var(--ss-fs-sm); color: var(--ss-text-soft); }
.ss-picker__sent { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; animation: ss-fade-in var(--ss-dur-comp) var(--ss-ease) both; }
.ss-picker__sent-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ss-success); color: var(--ss-success-ink); }
.ss-picker__sent-title { margin: 0; font-weight: 600; font-size: var(--ss-fs-md); }
.ss-picker__sent .ss-empty__text { margin: 0; }
.ss-picker__brandtext { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* [c15] */
.ss-filterchips, .ss-usechips { display: flex; flex-wrap: wrap; gap: 8px; }
.ss-filterchip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    border-radius: var(--ss-r-pill);
    border: 1px solid var(--ss-border-strong);
    background: var(--ss-surface);
    color: var(--ss-text);
    font: inherit;
    font-size: var(--ss-fs-sm);
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    flex: none;
    scroll-snap-align: start;
    transition: background-color var(--ss-dur-micro), border-color var(--ss-dur-micro), color var(--ss-dur-micro), transform var(--ss-dur-micro);
}
.ss-filterchip:active { transform: scale(.97); }
.ss-filterchip:focus-visible { outline: none; box-shadow: var(--ss-ring); }
@media (hover: hover) { .ss-filterchip:hover { border-color: var(--ss-text-soft); } }
.ss-filterchip[aria-pressed="true"] { background: var(--ss-text); border-color: var(--ss-text); color: var(--ss-bg); }
/* [c25] */
.ss-famchips { display: flex; flex-wrap: wrap; gap: 10px; }
.ss-famchip { position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: none; cursor: pointer; }
.ss-famchip__sw { width: 36px; height: 36px; border-radius: 9px; background: var(--sw); box-shadow: inset 0 0 0 1px var(--pk-sw-ring, rgba(0, 0, 0, .15)); transition: box-shadow var(--ss-dur-micro) var(--ss-ease), transform var(--ss-dur-micro) var(--ss-ease); }
.ss-famchip__check { position: absolute; width: 18px; height: 18px; color: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); opacity: 0; transform: scale(.6); transition: opacity var(--ss-dur-micro), transform var(--ss-dur-micro); }
.ss-famchip[aria-pressed="true"] .ss-famchip__sw { box-shadow: inset 0 0 0 1px var(--pk-sw-ring, rgba(0, 0, 0, .15)), 0 0 0 2px var(--ss-bg), 0 0 0 4px var(--ss-text); }
.ss-famchip[aria-pressed="true"] .ss-famchip__check { opacity: 1; transform: none; }
.ss-famchip:focus-visible { outline: none; box-shadow: var(--ss-ring); }
.ss-famchip:active .ss-famchip__sw { transform: scale(.94); }
@media (hover: hover) { .ss-famchip:hover .ss-famchip__sw { box-shadow: inset 0 0 0 1px var(--pk-sw-ring, rgba(0, 0, 0, .15)), 0 0 0 2px var(--ss-border-strong); } .ss-famchip[aria-pressed="true"]:hover .ss-famchip__sw { box-shadow: inset 0 0 0 1px var(--pk-sw-ring, rgba(0, 0, 0, .15)), 0 0 0 2px var(--ss-bg), 0 0 0 4px var(--ss-text); } }
.ss-filterchip--logo { padding: 0 14px; }
.ss-filterchip__logo { display: block; width: auto; height: auto; max-height: 20px; max-width: 92px; object-fit: contain; }
.ss-filterchip--logo[aria-pressed="true"] { background: var(--ss-surface); color: var(--ss-text); border-color: var(--ss-text); box-shadow: inset 0 0 0 1.5px var(--ss-text); }
.ss-picker .ss-filterchip { position: relative; }
.ss-picker .ss-filterchip[aria-pressed="true"] { background: var(--ss-surface); color: var(--ss-text); border-color: var(--ss-text); font-weight: 600; box-shadow: 0 0 0 2px var(--ss-bg), 0 0 0 4px var(--ss-text); }
.ss-picker .ss-filterchip[aria-pressed="true"]::before { content: ""; position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border-radius: 50%; background: var(--ss-text); box-shadow: 0 0 0 2px var(--ss-bg); }
.ss-picker .ss-filterchip[aria-pressed="true"]::after { content: ""; position: absolute; top: -3px; right: 0; width: 6px; height: 10px; box-sizing: border-box; border: solid var(--ss-bg); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ss-picker .ss-filterchip[aria-pressed="true"]:focus-visible { box-shadow: 0 0 0 2px var(--ss-bg), 0 0 0 4px var(--ss-text), var(--ss-ring); }
.ss-brandgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 8px; }
.ss-brandgrid .ss-filterchip { justify-content: center; min-width: 0; padding: 0 10px; }
.ss-brandgrid .ss-filterchip > span { min-width: 0; white-space: normal; text-align: center; line-height: 1.15; overflow-wrap: anywhere; }
.ss-brandgrid .ss-filterchip--logo { min-height: 48px; background: var(--pk-plate); border-color: var(--pk-plate-edge); }
.ss-brandgrid .ss-filterchip__logo { max-height: 26px; max-width: 100%; }
.ss-brandgrid .ss-filterchip__logo[data-ink~="faint"] { filter: brightness(.4) contrast(1.8); }
.ss-brandgrid .ss-filterchip__logo[data-ink~="heavy"] { max-height: 20px; max-width: 72%; }
.ss-brandgrid .ss-filterchip--logo[aria-pressed="true"] { background: var(--pk-plate); border-color: var(--pk-plate); }
.ss-brandgrid .ss-filterchip--more { color: var(--ss-text-soft); font-weight: 600; }
.ss-picker__filterbar { display: none; }
.ss-picker__fgroup { display: flex; flex-direction: column; gap: 10px; }
.ss-filterchip--drop { gap: 6px; padding: 0 12px 0 16px; }
.ss-filterchip--drop .ss-filterchip__k { color: var(--ss-text-soft); }
.ss-filterchip--drop .ss-filterchip__v { min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.ss-filterchip--drop .ss-filterchip__caret { width: 18px; height: 18px; margin-left: auto; flex: none; color: var(--ss-text-soft); transition: transform var(--ss-dur-micro) var(--ss-ease); }
.ss-filterchip--drop.is-set .ss-filterchip__k { display: none; }
.ss-filterchip--drop[aria-expanded="true"] .ss-filterchip__caret { transform: rotate(180deg); }
.ss-filterchip--drop.is-set { border-color: var(--ss-text); box-shadow: inset 0 0 0 1px var(--ss-text); }
.ss-picker__countrow { margin-top: 8px; }
.ss-picker__countrow .ss-eyebrow { margin: 0; }
.ss-picker__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
.ss-pcard-pick { display: flex; flex-direction: column; gap: 3px; padding: 0 0 6px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 14px; }
.ss-pcard-pick__img { aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: var(--ss-surface-2); margin-bottom: 6px; transition: transform var(--ss-dur-micro) var(--ss-ease), box-shadow var(--ss-dur-micro); }
.ss-pcard-pick__img img { width: 100%; height: 100%; object-fit: cover; }
.ss-pcard-pick__brand { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--ss-fs-xs); font-weight: 600; letter-spacing: .06em; line-height: 18px; text-transform: uppercase; color: var(--ss-text-soft); }
.ss-pcard-pick__name { font-weight: 600; font-size: var(--ss-fs-md); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ss-pcard-pick__meta { font-size: var(--ss-fs-sm); color: var(--ss-text-soft); }
@media (hover: hover) { .ss-pcard-pick:hover .ss-pcard-pick__img { transform: translateY(-2px); box-shadow: var(--ss-shadow-hover); } }
.ss-pcard-pick:active .ss-pcard-pick__img { transform: scale(.97); }
.ss-pcard-pick:focus-visible { outline: none; }
.ss-pcard-pick:focus-visible .ss-pcard-pick__img { box-shadow: var(--ss-ring); }

/* [c16] */
.ss-picker__hero { position: relative; margin: 0; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: var(--ss-surface-2); }
.ss-picker__hero img { width: 100%; height: 100%; object-fit: cover; }
.ss-picker__hero img[hidden] { display: none; }
.ss-picker__hero img.is-swap { animation: ss-fade-in var(--ss-dur-comp) var(--ss-ease) both; }
.ss-picker__hero-cap { position: absolute; left: 10px; bottom: 10px; padding: 6px 12px; border-radius: var(--ss-r-pill); background: var(--ss-scrim); color: var(--ss-on-scrim); font-size: var(--ss-fs-sm); font-weight: 500; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ss-picker__hero-cap:empty { display: none; }
.ss-swatches { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px 4px; }
.ss-swatch { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--ss-text); font: inherit; font-size: var(--ss-fs-xs); text-align: center; line-height: 1.2; cursor: pointer; }
.ss-swatch__img { width: 56px; height: 56px; border-radius: 12px; overflow: hidden; background: var(--ss-surface-2); box-shadow: 0 0 0 1px var(--ss-border); transition: box-shadow var(--ss-dur-micro), transform var(--ss-dur-micro); }
.ss-swatch__img img { width: 100%; height: 100%; object-fit: cover; }
.ss-swatch[aria-checked="true"] .ss-swatch__img { box-shadow: 0 0 0 2px var(--ss-bg), 0 0 0 4px var(--ss-text); animation: pk-pick var(--ss-dur-comp) var(--ss-ease) both; }
@keyframes pk-pick { 0% { transform: scale(.9); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }
.ss-swatch[aria-checked="true"] { font-weight: 600; }
.ss-swatch:focus-visible { outline: none; }
.ss-swatch:focus-visible .ss-swatch__img { box-shadow: var(--ss-ring); }
.ss-swatch:active .ss-swatch__img { transform: scale(.95); }
.ss-patterns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ss-pattern { display: flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: 12px; border: 1px solid var(--ss-border); background: var(--ss-surface); color: var(--ss-text); font: inherit; font-size: var(--ss-fs-xs); text-align: center; line-height: 1.2; cursor: pointer; }
.ss-pattern__img { aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--ss-surface-2); }
.ss-pattern__img img { width: 100%; height: 100%; object-fit: cover; }
.ss-pattern { transition: border-color var(--ss-dur-micro), transform var(--ss-dur-micro); }
.ss-pattern:active { transform: scale(.97); }
.ss-pattern[aria-checked="true"] { border-color: var(--ss-text); box-shadow: inset 0 0 0 1px var(--ss-text); font-weight: 600; }
.ss-pattern[aria-checked="true"] .ss-pattern__img { animation: pk-pick var(--ss-dur-comp) var(--ss-ease) both; }
.ss-pattern:focus-visible { outline: none; box-shadow: var(--ss-ring); }
.ss-picker__foot { align-items: center; justify-content: space-between; }
.ss-picker__fly { position: fixed; z-index: 400; object-fit: cover; border-radius: 16px; pointer-events: none; transform-origin: center; box-shadow: var(--ss-shadow-lg); }
.ss-picker__draws { display: flex; align-items: center; gap: 10px; margin: 0; font-size: var(--ss-fs-sm); color: var(--ss-text-soft); line-height: 1.35; flex: 1 1 auto; min-width: 0; }
.ss-picker__draws strong { color: var(--ss-text); }
.ss-picker__dot { width: 16px; height: 16px; border-radius: 50%; background: var(--brush); flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brush) 25%, transparent); }
.ss-picker__foot .ss-btn { flex: none; }
.ss-picker__foot .ss-btn.is-success { transform: scale(.97); }

/* [c17] */
.ss-pmenu .ss-sheet__head { align-items: flex-start; }
.ss-pmenu__product { flex: 1; display: flex; gap: 14px; align-items: center; min-width: 0; }
.ss-pmenu__thumb { width: 56px; height: 56px; border-radius: 12px; overflow: hidden; background: var(--ss-surface-2); box-shadow: 0 0 0 2.5px var(--ss-surface), 0 0 0 4.5px var(--brush, var(--ss-border-strong)); flex: none; margin: 4px; }
.ss-pmenu__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ss-pmenu__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ss-pmenu__brand { font-size: var(--ss-fs-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ss-text-soft); }
.ss-pmenu__name { font-size: var(--ss-fs-lg); }
.ss-pmenu__sub { font-size: var(--ss-fs-sm); color: var(--ss-text-soft); }
.ss-pmenu__uses { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
.ss-picker__uses { display: flex; flex-direction: column; gap: 14px; }
.ss-picker__uses[hidden] { display: none; }
.ss-usegroup { display: flex; flex-direction: column; gap: 8px; }
.ss-usegroup .ss-picker__label { margin: 0; }
.ss-onchip { gap: 8px; padding-left: 6px; }
.ss-onchip__thumb { display: block; width: 30px; height: 30px; border-radius: 8px; overflow: hidden; background: var(--ss-surface-2); box-shadow: 0 0 0 2px var(--ss-surface), 0 0 0 3.5px var(--brush, var(--ss-border-strong)); flex: none; }
.ss-onchip__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ss-pmenu__uses[hidden] { display: none; }
.ss-pmenu__uses .ss-eyebrow { margin: 0; }
.ss-pmenu__actions { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--ss-glass-border); padding-top: 8px; }
.ss-pmenu__action { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 8px 10px; border: 0; border-radius: 12px; background: none; color: var(--ss-text); font: inherit; font-weight: 500; text-align: left; cursor: pointer; }
.ss-pmenu__action span { display: flex; flex-direction: column; }
.ss-pmenu__action small { font-size: var(--ss-fs-xs); font-weight: 400; color: var(--ss-text-soft); }
@media (hover: hover) { .ss-pmenu__action:hover { background: color-mix(in srgb, var(--ss-text) 6%, transparent); } }
.ss-pmenu__action:focus-visible { outline: none; box-shadow: var(--ss-ring); }
.ss-pmenu__action--danger { color: var(--ss-danger); }

/* [c18] */
.ss-existing__lead { margin: 0 0 14px; color: var(--ss-text-soft); font-size: var(--ss-fs-sm); }
.ss-existing__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.ss-existing__grid .ss-skel { aspect-ratio: 4 / 3; border-radius: 12px; }
.ss-existing__tile { display: flex; flex-direction: column; gap: 6px; padding: 0; border: 0; background: none; color: var(--ss-text-soft); font: inherit; font-size: var(--ss-fs-xs); cursor: pointer; text-align: left; }
.ss-existing__tile-img { position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--ss-surface-2); transition: transform var(--ss-dur-micro), box-shadow var(--ss-dur-micro); }
.ss-existing__tile-img img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) { .ss-existing__tile:hover .ss-existing__tile-img { transform: translateY(-2px); box-shadow: var(--ss-shadow-hover); } }
.ss-existing__tile:focus-visible { outline: none; }
.ss-existing__tile:focus-visible .ss-existing__tile-img { box-shadow: var(--ss-ring); }

/* [c19] */
.ss-details__preview { margin: 0 0 14px; display: flex; flex-direction: column; gap: 10px; }
.ss-details__photo { position: relative; display: block; border-radius: 16px; overflow: hidden; background: var(--ss-surface-2); max-height: 260px; }
.ss-details__tag { position: absolute; left: 10px; top: 10px; max-width: calc(100% - 20px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 4px 10px; border-radius: 999px; background: rgba(20, 18, 16, .62); color: #fff; font-size: var(--ss-fs-xs); font-weight: 600; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ss-details__photo img { width: 100%; height: 100%; max-height: 260px; object-fit: cover; display: block; }
.ss-details__photo.has-ar { aspect-ratio: var(--ar); width: min(100%, calc(260px * var(--ar))); max-height: none; margin-inline: auto; }
.ss-details__photo.has-ar img { max-height: none; object-fit: fill; }
.ss-details__layer { position: absolute; inset: 0; pointer-events: none; }
.ss-details__layer--tex { background-repeat: repeat; background-size: 36% auto; opacity: .94; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.ss-details__layer--marks { background-size: 100% 100%; background-repeat: no-repeat; }
.ss-details__tag[hidden] { display: none; }
.ss-details__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ss-details__chips .ss-chip { cursor: default; }
.ss-details__lead { margin: 0 0 14px; color: var(--ss-text-soft); }
.ss-details__form { display: flex; flex-direction: column; gap: 12px; }
.ss-details__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.ss-details__foot { flex-direction: column; align-items: stretch; gap: 10px; }
.ss-details__fine { margin: 0; text-align: center; font-size: var(--ss-fs-xs); color: var(--ss-text-soft); line-height: 1.6; }
.ss-details__alt { margin: 0; text-align: center; font-size: var(--ss-fs-sm); color: var(--ss-text-soft); }
.ss-details__tap { display: inline-block; padding: 15px 4px; margin: -15px -4px; }
.ss-details__alt .ss-details__tap { padding-block: 13px; margin-block: -13px; font-weight: 600; }

/* [c21] */
@media (max-width: 1100px) and (min-width: 641px) {
    :root { --st-rail-w: 340px; }
    .ss-studio__stage { padding: 20px; }
    .ss-tool.ss-glassbar__tool { min-width: 50px; padding-inline: 4px; }
    .ss-studio__pill { max-width: 170px; }
    .ss-studio__dot { width: 36px; }
}
@media (max-width: 900px) and (min-width: 641px) {
    .ss-studio__pill, .ss-studio__sep--pill { display: none; }
}
@media (max-width: 1023px) and (min-width: 641px) {
    .ss-up.has-proof .ss-up__inner { grid-template-columns: 1fr; }
    .ss-samples__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* [c22] */
@media (max-width: 640px) {
    .ss-up { padding: 16px var(--ss-gutter) calc(110px + env(safe-area-inset-bottom)); }
    .ss-up__inner, .ss-up.has-proof .ss-up__inner { grid-template-columns: 1fr; gap: 20px; }
    .ss-up.has-proof .ss-up__proof { margin: -16px calc(var(--ss-gutter) * -1) 0; }
    .ss-up.has-proof .ss-up__compare { --ar: 390 / 300; border-radius: 0; box-shadow: none; }
    .ss-up__proof-cap { padding: 0 var(--ss-gutter); font-size: var(--ss-fs-sm); }
    .ss-up__main, .ss-up:not(.has-proof) .ss-up__main { text-align: left; align-items: stretch; gap: 12px; }
    .ss-up:not(.has-proof) .ss-up__kicker { justify-content: flex-start; }
    .ss-up__title { font-size: 1.75rem; }
    .ss-up__lead { font-size: var(--ss-fs-sm); }
    .ss-drop { min-height: 220px; border-radius: 20px; padding: 24px 18px; }
    .ss-up.has-proof .ss-drop { min-height: 168px; }
    .ss-up__more, .ss-up:not(.has-proof) .ss-up__more { align-items: stretch; }
    .ss-up__sample, .ss-up:not(.has-proof) .ss-up__sample { align-self: center; }
    .ss-up__thumb-img { width: 76px; height: 76px; }
    .ss-up__bar { display: flex; }
    .ss-up__error, .ss-up:not(.has-proof) .ss-up__error { text-align: left; }

    .ss-samples { padding: 14px var(--ss-gutter) 40px; }
    .ss-samples__title { font-size: 1.75rem; margin-top: 0; }
    .ss-samples__lead { font-size: var(--ss-fs-sm); }
    .ss-samples__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
    .ss-sample__img { aspect-ratio: 1; }
    .ss-sample__title { font-size: var(--ss-fs-sm); }
    .ss-sample__sub { font-size: var(--ss-fs-xs); }
    .ss-samples__grid:not(.is-open) .ss-sample.is-extra { display: none; }
    .ss-samples__more { display: inline-flex; margin-top: 8px; }

    .ss-studio { display: block; height: auto; min-height: 0; max-width: 100vw; overflow-x: clip; }
    html.ss-studio-on .ss-topbar--guest { grid-template-columns: var(--ss-tap) minmax(0, 1fr) auto; padding-inline: 8px; }
    html.ss-studio-on .ss-topbar--guest .ss-topbar__brand { justify-self: center; min-width: 0; }
    html.ss-studio-on .ss-topbar--guest .ss-lockup--phone { --lk-icon: 22px; --lk-cap: 14px; }
    html.ss-studio-on .ss-topbar--guest .ss-theme-toggle { display: none; }
    html.ss-studio-on .ss-topbar--guest .ss-topbar__actions { min-width: 0; }
    .ss-rail { display: none; }
    .ss-studio__stage { padding: 0 0 calc(96px + env(safe-area-inset-bottom)); gap: 8px; justify-content: flex-start; min-height: calc(100dvh - var(--ss-topbar-h)); }
    .ss-studio__photo { flex: 1 1 auto; width: 100%; height: 300px; border-radius: 0; box-shadow: none; background: rgba(0, 0, 0, .05); }
    .ss-studio__context { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 0 var(--ss-gutter); min-height: 44px; }
    .ss-studio__context > span:last-child { display: flex; align-items: baseline; gap: 6px; min-width: 0; line-height: 1.25; white-space: nowrap; }
    .ss-studio__context strong { flex: none; font-size: var(--ss-fs-md); font-weight: 600; }
    .ss-studio__context strong + span { flex: 0 1 auto; min-width: 0; display: flex; gap: 6px; font-size: var(--ss-fs-sm); color: var(--ss-text-soft); }
    .ss-studio__context strong + span:not(:empty)::before { content: "·"; flex: none; }
    .ss-studio__ctx-who { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ss-text); font-weight: 600; }
    .ss-studio__ctx-who + .ss-studio__ctx-state:not(:empty)::before { content: "· "; }
    .ss-studio__ctx-state { flex: none; }
    .ss-studio__context.is-justdrawn .ss-studio__ctx-dot { animation: st-drawn-dot 520ms var(--ss-ease) both; }
    .ss-studio__context.is-justdrawn .ss-studio__ctx-state { animation: st-drawn-text 420ms var(--ss-ease) both; }
    .ss-studio__ctx-dot { width: 14px; height: 14px; border-radius: 50%; flex: none; background: var(--brush, var(--ss-stone-3)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brush, var(--ss-stone-3)) 22%, transparent); }
    .ss-studio__ctx-dot.is-empty { background: transparent; box-shadow: inset 0 0 0 2px var(--ss-stone-4); }
    .ss-studio__ctx-dot--erase { background: var(--ss-text-soft); }
    .ss-studio__dock { margin-top: 0; width: calc(100% - 16px); padding: 8px; gap: 8px; border-radius: 22px; background: var(--ss-glass-bg); -webkit-backdrop-filter: var(--ss-glass-blur); backdrop-filter: var(--ss-glass-blur); border: 1px solid var(--ss-glass-border); box-shadow: var(--ss-glass-highlight), var(--ss-glass-shadow); align-items: stretch; }
    .ss-studio__brushes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 2px; }
    .ss-studio__brushes:empty { display: none; }
    .ss-studio__brushes > .ss-dockchip:only-child { grid-column: 1 / -1; }
    .ss-studio__tools { border: 0; box-shadow: none; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; border-top: 1px solid var(--ss-glass-border); padding-top: 8px; border-radius: 0; justify-content: space-between; gap: 0; }
    .ss-studio__pill, .ss-studio__sep--pill, .ss-studio__size, .ss-studio__tools .ss-glassbar__sep { display: none; }
    .ss-studio__sizecycle { display: flex !important; }
    .ss-tool.ss-glassbar__tool { min-width: 0; flex: 1 1 0; height: 54px; padding: 4px 0; border-radius: 12px; }
    .ss-tool__label { font-size: 0.75rem; }
    .ss-dockchip { position: relative; min-width: 0; display: flex; flex-direction: row; align-items: center; gap: 10px; min-height: 52px; padding: 5px 10px 5px 6px; border: 0; border-radius: 14px; background: none; color: var(--ss-text); font: inherit; text-align: left; cursor: pointer; }
    .ss-dockchip__more { display: none; flex: none; margin-left: auto; width: 24px; height: 24px; border-radius: 8px; place-items: center; color: var(--ss-text-soft); }
    .ss-dockchip__more .ss-ico { width: 18px; height: 18px; }
    .ss-dockchip[aria-pressed="true"] .ss-dockchip__more { display: grid; }
    .ss-dockchip.is-justdrawn .ss-dockchip__thumb { animation: st-drawn-thumb 520ms var(--ss-ease) both; }
    .ss-dockchip__thumb { flex: none; width: 38px; height: 38px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: var(--ss-surface-2); box-shadow: 0 0 0 2.5px var(--ss-surface), 0 0 0 4.5px var(--brush, var(--ss-border-strong)); transition: transform var(--ss-dur-micro) var(--ss-ease), box-shadow var(--ss-dur-micro); }
    .ss-dockchip__thumb img { width: 100%; height: 100%; object-fit: cover; }
    .ss-dockchip__name { min-width: 0; font-size: 0.8125rem; font-weight: 600; line-height: 1.2; text-align: left; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
    .ss-dockchip[aria-pressed="true"] { background: color-mix(in srgb, var(--brush) 14%, transparent); }
    .ss-dockchip[aria-pressed="true"] .ss-dockchip__thumb { transform: scale(1.04); box-shadow: 0 0 0 2.5px var(--ss-surface), 0 0 0 5px var(--brush); }
    .ss-dockchip:active .ss-dockchip__thumb { transform: scale(.94); }
    .ss-dockchip:focus-visible { outline: none; box-shadow: var(--ss-ring); }
    .ss-dockchip--add .ss-dockchip__thumb { background: transparent; box-shadow: none; border: 1.5px dashed var(--ss-stone-4); color: var(--ss-text-soft); }
    .ss-dockchip--add .ss-dockchip__name { color: var(--ss-text-soft); }
    .ss-studio__bar { display: flex; gap: 6px; padding: 8px; }
    .ss-studio__baritem { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 76px; min-height: 52px; border: 0; border-radius: 14px; background: none; color: var(--ss-text); font: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer; }
    .ss-studio__baritem:active { transform: scale(.96); }
    .ss-studio__baritem:focus-visible { outline: none; box-shadow: var(--ss-ring); }
    .ss-studio__baricon { position: relative; display: grid; place-items: center; }
    .ss-studio__badge { position: absolute; top: -6px; right: -12px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ss-text); color: var(--ss-bg); font-size: 0.6875rem; font-weight: 700; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
    .ss-studio__bar .ss-visualize { flex: 1 1 auto; min-width: 0; }
    .ss-studio__zoom { top: 10px; left: 10px; }
    :root[data-theme="dark"] .ss-studio__photo { background: rgba(0, 0, 0, .3); }
    @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ss-studio__photo { background: rgba(0, 0, 0, .3); } }
    html.ss-studio-on:has(.ss-coach) .ss-studio__context { visibility: hidden; }
    html.ss-studio-on .ss-coach { background: var(--ss-glass-bg-solid); }

    .ss-picker__cats { gap: 8px; }
    .ss-pmenu .ss-usechips {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 20px;
        padding: 2px 20px;
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%);
    }
    .ss-pmenu .ss-usechips::-webkit-scrollbar { display: none; }
    .ss-pmenu .ss-usechips::after { content: ""; flex: none; width: 8px; }
    .ss-picker { --pk-gutter: 20px; }
    .ss-swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 4px; }
    .ss-picker__hero { aspect-ratio: 21 / 9; }
    .ss-brandgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ss-picker__filterbar { display: flex; gap: 8px; }
    .ss-picker__filterbar .ss-filterchip { flex: 1 1 0; min-width: 0; }
    .ss-picker__fgroup { display: none; }
    .ss-picker__fgroup.is-open { display: flex; animation: ss-fade-in var(--ss-dur-comp) var(--ss-ease) both; }
    .ss-picker__fgroup .ss-picker__label { margin-top: 4px; }
    .ss-pmenu .ss-sheet__body { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
    .ss-pmenu .ss-usechips { margin-inline: -20px; }
    .ss-picker__foot { flex-direction: column; align-items: stretch; gap: 10px; }
    .ss-picker__draws { justify-content: center; align-items: flex-start; gap: 8px; text-align: left; max-width: 100%; }
    .ss-picker__draws .ss-picker__dot { margin-top: 2px; }
    .ss-picker__foot .ss-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .ss-drop { animation: none; }
    .ss-swatch[aria-checked="true"] .ss-swatch__img, .ss-pattern[aria-checked="true"] .ss-pattern__img, .ss-picker__fgroup.is-open { animation: none; }
    .ss-studio__photo, .ss-studio__dock { animation: none; }
    .ss-studio__drawhint-pill { transition: none; transform: none; }
}
.ss-picker__search .ss-input::placeholder { opacity: 1; color: var(--ss-text-soft); }
@media (min-width: 641px) {
    html.ss-picker-open .ss-rail { visibility: hidden; opacity: 0; }
    .ss-studio__tools { flex-wrap: nowrap; min-width: 0; }
}

/* [c27] */
.ss-tool--guide svg { color: #e53935; }
.ss-tool--guide[aria-pressed="true"] svg { color: currentColor; }
.ss-studio__stage[data-tool="guide"] .ss-studio__size,
.ss-studio__stage[data-tool="guide"] .ss-studio__sizecycle { opacity: 0.35; pointer-events: none; }
.ss-studio__ctx-dot--guide { background: transparent; border: 2px dashed #e53935; }
.ss-studio__stage[data-tool="guide"] .ss-studio__viewport { cursor: crosshair; }
.ss-picker__brandsel .ss-select { width: 100%; min-height: 52px; padding: 0 44px 0 16px; font-size: var(--ss-fs-lg); font-weight: 600; line-height: 50px; background-position: calc(100% - 22px) 50%, calc(100% - 17px) 50%; }
/* [c28] */
.ss-pc__brand--logo, .ss-pcard-pick__brand--logo { display: flex; align-items: center; height: 18px; }
.ss-pc__logo, .ss-pcard-pick__logo { display: block; height: 16px; width: auto; max-width: 110px; object-fit: contain; object-position: left center; }
/* [c29] */
@media (min-width: 641px) {
    .ss-picker { pointer-events: none; }
    .ss-picker .ss-sheet__backdrop { pointer-events: none; }
    .ss-picker .ss-sheet__panel { pointer-events: auto; }
}
/* [c30] */
.ss-studio__viewport .ss-canvas__ring.has-colour.is-guide {
    border: 2px solid #fff;
    background: #e53935;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .45);
}
/* [c31] */
.ss-tool.is-locked { opacity: 0.4; }
.ss-tool.is-locked:hover { opacity: 0.6; }
.ss-studio__drawhint.is-note .ss-studio__drawhint-dot { background: var(--ss-accent); }
/* [c32] */
.ss-picker .ss-sheet__panel.is-attn { animation: st-panel-attn 1.2s var(--ss-ease) both; }
@keyframes st-panel-attn {
    0%, 100% { box-shadow: none; }
    20%, 60% { box-shadow: inset 0 0 0 3px var(--ss-accent), 0 0 32px var(--ss-accent-glow); }
    40% { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ss-accent) 40%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .ss-picker .ss-sheet__panel.is-attn { animation: none; box-shadow: inset 0 0 0 3px var(--ss-accent); } }

/* [c33] */
.ss-picker__foot .ss-btn.is-noicon > svg { display: none; }
.ss-picker__libtile .ss-picker__cat-cap { flex-direction: column; align-items: flex-start; gap: 2px; }
.ss-picker__libtile .ss-picker__cat-cap small { font-size: var(--ss-fs-xs); font-weight: 500; color: var(--ss-text-soft); }
.ss-picker__libtile:not(.is-plain) .ss-picker__cat-cap small { color: inherit; opacity: .85; }
.ss-picker__libtile-plus { position: absolute; top: 12px; left: 12px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ss-surface); color: var(--ss-text); box-shadow: 0 0 0 1px var(--ss-border); }
.ss-picker__libtile-plus .ss-ico { width: 20px; height: 20px; }
.ss-picker__libtile-pro { position: absolute; top: 8px; left: 8px; }
.ss-picker__libtile.is-plain .ss-picker__libtile-pro { left: auto; right: 8px; }
.ss-picker__libtile.is-plain .ss-picker__cat-n { background: var(--ss-surface-3); color: var(--ss-text); }
.ss-pcard-pick--add .ss-pcard-pick__img { display: grid; place-items: center; background: transparent; border: 1.5px dashed var(--ss-border-strong); color: var(--ss-text-soft); }
.ss-pcard-pick--add .ss-pcard-pick__img .ss-ico { width: 28px; height: 28px; }
@media (hover: hover) { .ss-pcard-pick--add:hover .ss-pcard-pick__img { border-color: var(--ss-text-soft); color: var(--ss-text); box-shadow: none; } }
.ss-pcard-pick.is-locked { cursor: default; }
.ss-pcard-pick.is-locked .ss-pcard-pick__img { filter: grayscale(1); opacity: .45; }
.ss-pcard-pick.is-locked .ss-pcard-pick__name, .ss-pcard-pick.is-locked .ss-pcard-pick__meta { opacity: .55; }
.ss-picker__hero--own { aspect-ratio: 4 / 3; }
.ss-picker__strip { display: flex; gap: 8px; margin-bottom: 10px; }
.ss-picker__stripimg { width: 56px; height: 56px; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: var(--ss-surface-2); box-shadow: 0 0 0 1px var(--ss-border); cursor: pointer; flex: none; transition: box-shadow var(--ss-dur-micro), transform var(--ss-dur-micro); }
.ss-picker__stripimg img { width: 100%; height: 100%; object-fit: cover; }
.ss-picker__stripimg[aria-checked="true"] { box-shadow: 0 0 0 2px var(--ss-bg), 0 0 0 4px var(--ss-text); }
.ss-picker__stripimg:active { transform: scale(.95); }
.ss-picker__stripimg:focus-visible { outline: none; box-shadow: var(--ss-ring); }
.ss-picker__used { margin: 2px 0 0; font-size: var(--ss-fs-sm); line-height: 1.45; color: var(--ss-text-soft); }
.ss-picker__edit { align-self: flex-start; margin-left: -12px; }
.ss-picker__level > .ss-pro { margin-top: 4px; }

/* [c34] */
.ss-libwiz { display: flex; flex-direction: column; gap: 10px; }
.ss-libwiz--details { gap: 16px; padding-top: 6px; }
.ss-libwiz--details .ss-usegroup .ss-picker__label { margin: 0; }
.ss-libcrop { position: relative; aspect-ratio: 1; width: 100%; max-width: 420px; border-radius: 16px; overflow: hidden; background: var(--ss-surface-2); touch-action: none; -webkit-user-select: none; user-select: none; }
.ss-libcrop.is-empty { background: transparent; border: 1.5px dashed var(--ss-border-strong); }
.ss-libcrop.is-movable { cursor: grab; }
.ss-libcrop.is-dragging { cursor: grabbing; }
.ss-libcrop:focus-visible { outline: none; box-shadow: var(--ss-ring); }
.ss-libcrop.is-loading { animation: ss-lib-wait 1.1s var(--ss-ease) infinite alternate; }
.ss-libcrop__img { position: absolute; left: 0; top: 0; max-width: none; pointer-events: none; will-change: transform; }
.ss-libcrop:not(.is-movable) .ss-libcrop__img { width: 100% !important; height: 100% !important; transform: none !important; object-fit: cover; }
.ss-libcrop__add { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border: 0; background: none; color: var(--ss-text-soft); font: inherit; font-size: var(--ss-fs-sm); font-weight: 600; cursor: pointer; }
.ss-libcrop__add .ss-ico { width: 32px; height: 32px; }
@media (hover: hover) { .ss-libcrop__add:hover { color: var(--ss-text); background: color-mix(in srgb, var(--ss-text) 4%, transparent); } }
.ss-libcrop__add:focus-visible { outline: none; box-shadow: inset var(--ss-ring); }
.ss-libcrop__swap { position: absolute; right: 10px; bottom: 10px; }
.ss-libslots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ss-libslots--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ss-libslots.is-loading { animation: ss-lib-wait 1.1s var(--ss-ease) infinite alternate; }
.ss-libslot { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--ss-surface-2); }
.ss-libslot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ss-libslot--add { display: grid; place-items: center; padding: 0; border: 1.5px dashed var(--ss-border-strong); background: transparent; color: var(--ss-text-soft); cursor: pointer; transition: border-color var(--ss-dur-micro), color var(--ss-dur-micro), transform var(--ss-dur-micro); }
.ss-libslot--add .ss-ico { width: 26px; height: 26px; }
@media (hover: hover) { .ss-libslot--add:hover { border-color: var(--ss-text-soft); color: var(--ss-text); } }
.ss-libslot--add:active { transform: scale(.97); }
.ss-libslot--add:focus-visible { outline: none; box-shadow: var(--ss-ring); }
.ss-libslot__remove { position: absolute; top: 4px; right: 4px; }
.ss-libwiz__types.is-invalid .ss-filterchip { border-color: var(--ss-danger); }
.ss-libwiz__used { align-items: center; }
.ss-libwiz__usedchip { gap: 8px; padding-right: 0; cursor: default; max-width: 100%; }
.ss-libwiz__usedname { min-width: 0; max-width: 18ch; overflow: hidden; text-overflow: ellipsis; }
.ss-libwiz__usedx { display: grid; place-items: center; width: 40px; height: 40px; margin-left: -4px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ss-text-soft); cursor: pointer; }
.ss-libwiz__usedx .ss-ico { width: 16px; height: 16px; }
@media (hover: hover) { .ss-libwiz__usedx:hover { color: var(--ss-text); background: var(--ss-surface-2); } }
.ss-libwiz__usedx:focus-visible { outline: none; box-shadow: var(--ss-ring); }
.ss-libwiz__add { gap: 6px; padding: 0 16px 0 12px; }
.ss-libwiz__add .ss-ico { width: 18px; height: 18px; }
.ss-libwiz__remove { align-self: flex-start; margin-top: 4px; }
@keyframes ss-lib-wait { from { opacity: 1; } to { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .ss-libcrop.is-loading, .ss-libslots.is-loading { animation: none; opacity: .6; } }
@media (pointer: fine) { .ss-libslot__remove { width: 34px; height: 34px; } .ss-libslot__remove .ss-ico { width: 16px; height: 16px; } }
.ss-picker .ss-pro { flex-wrap: wrap; align-items: flex-start; }
.ss-picker .ss-pro__text { flex-basis: calc(100% - 64px); }
.ss-picker .ss-pro__btn { flex: 1 1 100%; width: 100%; }
.ss-picker__none .ss-pro { width: 100%; text-align: left; }