123.stk-shell {4 flex: 1;5 min-height: 0;6 position: relative;7 overflow: hidden;8 padding: 10px 12px 10px;9 background: var(--peach-bg);10}1112.stk-mast {13 display: flex;14 align-items: center;15 justify-content: space-between;16 gap: 10px;17 padding: 0 0 8px;18}1920.stk-back {21 width: 28px;22 height: 28px;23 display: inline-flex;24 align-items: center;25 justify-content: center;26 flex: 0 0 auto;27 border: 1px solid var(--peach-border);28 border-radius: 999px;29 background: color-mix(in srgb, var(--peach-t0) 4%, transparent);30 color: var(--peach-t1);31 cursor: pointer;32}3334.stk-back:hover {35 color: var(--peach-t0);36 border-color: color-mix(in srgb, var(--peach-accent) 34%, transparent);37 background: color-mix(in srgb, var(--peach-accent) 10%, transparent);38}3940.stk-mast-title {41 flex: 1;42 font-family: var(--font-display);43 font-style: italic;44 font-weight: 400;45 font-size: 22px;46 line-height: 1;47 color: var(--peach-t0);48}4950.stk-mast-meta {51 font-family: var(--font-mono);52 font-size: 9px;53 letter-spacing: 0.22em;54 text-transform: uppercase;55 color: var(--peach-t2);56}5758.stk-deck {59 position: relative;60 height: min(462px, calc(100% - 36px));61 min-height: 462px;62 margin-top: 0;63 overflow: hidden;64}6566.stk-deck.is-focused {67 overflow: visible;68}6970.stk-card {71 position: absolute;72 left: 0;73 right: 0;74 border-radius: var(--stack-card-radius);75 padding: 18px 18px 16px;76 overflow: hidden;77 cursor: pointer;78 transition:79 transform 380ms var(--stack-spring),80 height 380ms var(--stack-spring),81 box-shadow 280ms ease,82 opacity 220ms ease;83 box-shadow:84 0 1px 0 color-mix(in srgb, var(--peach-t0) 5%, transparent) inset,85 0 8px 20px rgba(0, 0, 0, 0.25);86 border: 1px solid color-mix(in srgb, var(--peach-t0) 6%, transparent);87 will-change: transform;88}8990.stk-card::after {91 content: "";92 position: absolute;93 inset: 0;94 border-radius: inherit;95 pointer-events: none;96 background:97 radial-gradient(98 120% 80% at 0% 0%,99 color-mix(in srgb, #fff 12%, transparent),100 transparent 50%101 );102}103104.stk-card.is-active {105 box-shadow:106 0 1px 0 color-mix(in srgb, var(--peach-t0) 8%, transparent) inset,107 0 18px 36px rgba(0, 0, 0, 0.42);108 cursor: default;109}110111.stk-card.is-focused {112 cursor: default;113}114115.stk-card.is-tab:hover {116 transform: translateY(calc(var(--stk-card-top) - 3px));117 box-shadow:118 0 1px 0 color-mix(in srgb, var(--peach-t0) 5%, transparent) inset,119 0 8px 20px rgba(0, 0, 0, 0.25),120 0 0 18px color-mix(in srgb, currentColor 12%, transparent);121}122123.stk-card.is-concealed {124 opacity: 0;125 pointer-events: none;126}127128.stk-card-top {129 display: flex;130 justify-content: space-between;131 align-items: center;132 margin-bottom: 12px;133 position: relative;134 z-index: 1;135}136137.stk-card-num {138 font-family: var(--font-mono);139 font-size: 8.5px;140 letter-spacing: 0.26em;141 text-transform: uppercase;142 opacity: 0.7;143}144145.stk-card-icon {146 opacity: 0.85;147}148149.stk-card-title {150 position: relative;151 z-index: 1;152 margin: 6px 0 0;153 font-family: var(--font-display);154 font-style: italic;155 font-weight: 400;156 font-size: 26px;157 line-height: 1.2;158}159160.stk-card-lede {161 position: relative;162 z-index: 1;163 margin: 4px 0 0;164 font-family: var(--font-display);165 font-style: italic;166 font-size: 12.5px;167 line-height: 1.4;168 opacity: 0.72;169}170171.stk-card-body {172 position: relative;173 z-index: 1;174 height: calc(100% - 76px);175 margin-top: 14px;176 overflow-y: auto;177 overflow-x: hidden;178 opacity: 0;179 scrollbar-width: thin;180 scrollbar-color: color-mix(in srgb, currentColor 28%, transparent) transparent;181 transition: opacity 200ms 100ms ease;182}183184.stk-card.is-active .stk-card-body {185 opacity: 1;186}187188.stk-card.is-tab .stk-card-top {189 display: none;190}191192.stk-card.is-tab {193 padding: 10px 16px 8px;194}195196.stk-card.is-tab .stk-card-title {197 font-size: 19px;198 line-height: 1;199 white-space: nowrap;200 overflow: hidden;201 text-overflow: ellipsis;202}203204.stk-card.is-tab .stk-card-lede,205.stk-card.is-tab .stk-card-body {206 display: none;207}208209.stk-card *:focus-visible {210 outline: 1px solid currentColor;211 outline-offset: 2px;212}213214.stk-tray-handle {215 position: absolute;216 left: 50%;217 bottom: 8px;218 z-index: 120;219 transform: translateX(-50%);220 height: 30px;221 min-width: 112px;222 display: inline-flex;223 align-items: center;224 justify-content: center;225 border: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);226 border-radius: 999px;227 background:228 linear-gradient(180deg, color-mix(in srgb, var(--peach-bg) 88%, transparent), color-mix(in srgb, var(--peach-bg) 72%, transparent)),229 color-mix(in srgb, var(--peach-accent) 10%, transparent);230 color: var(--peach-t1);231 font-family: var(--font-mono);232 font-size: 9px;233 letter-spacing: 0.2em;234 text-transform: uppercase;235 box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);236 cursor: pointer;237}238239.stk-tray-handle::before {240 content: "";241 position: absolute;242 top: 5px;243 width: 26px;244 height: 2px;245 border-radius: 999px;246 background: color-mix(in srgb, currentColor 45%, transparent);247}248249.stk-tray-handle span {250 transform: translateY(4px);251}252253.stk-row {254 display: flex;255 align-items: center;256 justify-content: space-between;257 gap: 12px;258 padding: 10px 0;259 border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);260}261262.stk-row:last-child {263 border-bottom: none;264}265266.stk-row-name {267 font-size: 13px;268}269270.stk-row-sub {271 margin-top: 2px;272 font-family: var(--font-display);273 font-style: italic;274 font-size: 11px;275 opacity: 0.7;276}277278.stk-pill {279 display: inline-flex;280 align-items: center;281 justify-content: center;282 min-height: 24px;283 padding: 3px 10px;284 font-family: var(--font-mono);285 font-size: 10px;286 letter-spacing: 0.08em;287 text-transform: lowercase;288 background: transparent;289 color: currentColor;290 border: 1px solid color-mix(in srgb, currentColor 35%, transparent);291 border-radius: 999px;292 cursor: pointer;293 transition: background 140ms ease, border-color 140ms ease;294}295296.stk-pill:hover,297.stk-pill.is-accent {298 background: color-mix(in srgb, currentColor 18%, transparent);299 border-color: color-mix(in srgb, currentColor 55%, transparent);300}301302.stk-pip {303 display: inline-block;304 width: 18px;305 height: 18px;306 border-radius: 50%;307 background: rgba(0, 0, 0, 0.18);308 border: 1px solid color-mix(in srgb, currentColor 24%, transparent);309}310311.stk-pip.is-on {312 background: var(--peach-health-ok);313 box-shadow: 0 0 6px color-mix(in srgb, var(--peach-health-ok) 55%, transparent);314}315316.stk-sync-actions,317.stk-fb-chips,318.stk-inline-actions {319 display: flex;320 flex-wrap: wrap;321 gap: 6px;322}323324.stk-key {325 font-family: var(--font-mono);326 font-size: 10px;327 letter-spacing: 0.06em;328 padding: 2px 7px;329 border: 1px solid color-mix(in srgb, currentColor 32%, transparent);330 border-radius: 4px;331 background: color-mix(in srgb, currentColor 6%, transparent);332}333334.stk-pro-headline {335 padding: 6px 0 14px;336 border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent);337}338339.stk-pro-title,340.stk-pro-price {341 font-family: var(--font-display);342 font-style: italic;343 line-height: 1;344}345346.stk-pro-title {347 font-size: 22px;348}349350.stk-pro-price {351 font-size: 28px;352}353354.stk-pro-meta {355 margin-top: 4px;356 font-family: var(--font-mono);357 font-size: 9.5px;358 letter-spacing: 0.18em;359 text-transform: uppercase;360 opacity: 0.7;361}362363.stk-card .peach-settings-body {364 display: block;365 flex: none;366 min-height: 0;367 overflow: visible;368 padding: 0;369 background: transparent;370}371372.stk-card .peach-settings-group {373 margin: 0;374 padding: 0;375 border: 0;376 border-radius: 0;377 background: transparent;378 box-shadow: none;379 backdrop-filter: none;380 -webkit-backdrop-filter: none;381}382383.stk-card .peach-settings-group + .peach-settings-group {384 margin-top: 0;385}386387.stk-card .peach-settings-sub-label,388.stk-card .peach-settings-label {389 margin: 12px 0 4px;390 color: color-mix(in srgb, currentColor 58%, transparent);391}392393.stk-card .peach-settings-sub-label:first-child,394.stk-card .peach-settings-label:first-child {395 margin-top: 0;396}397398.stk-card .peach-settings-row,399.stk-card .peach-shortcut-row,400.stk-card .peach-history-row {401 border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);402 color: currentColor;403}404405.stk-card .peach-settings-row--meta,406.stk-card .peach-settings-value,407.stk-card .peach-hint,408.stk-card .peach-settings-hint,409.stk-card .peach-feedback-meta,410.stk-card .peach-feedback-anon,411.stk-card .peach-feedback-intro,412.stk-card .peach-history-sub,413.stk-card .peach-history-footer,414.stk-card .peach-danger-card-copy {415 color: color-mix(in srgb, currentColor 70%, transparent);416}417418.stk-card .peach-toggle {419 --peach-accent: currentColor;420 border-color: color-mix(in srgb, currentColor 32%, transparent);421 background: color-mix(in srgb, currentColor 8%, transparent);422}423424.stk-card .peach-toggle.is-on {425 background: color-mix(in srgb, currentColor 28%, transparent);426 border-color: color-mix(in srgb, currentColor 50%, transparent);427}428429.stk-card .peach-toggle-knob {430 background: color-mix(in srgb, currentColor 58%, transparent);431}432433.stk-card .peach-toggle.is-on .peach-toggle-knob {434 background: currentColor;435}436437.stk-card .peach-btn--subtle,438.stk-card .peach-btn--ghost,439.stk-card .peach-btn--accent,440.stk-card .peach-shortcut-chip,441.stk-card .peach-shortcut-reset,442.stk-card .peach-feedback-chip,443.stk-card .peach-settings-license-copy,444.stk-card .peach-settings-license-toggle {445 color: currentColor;446 border-color: color-mix(in srgb, currentColor 28%, transparent);447 background: color-mix(in srgb, currentColor 8%, transparent);448}449450.stk-card .peach-btn--subtle:hover,451.stk-card .peach-btn--ghost:hover,452.stk-card .peach-btn--accent:hover,453.stk-card .peach-shortcut-chip:hover,454.stk-card .peach-feedback-chip:hover,455.stk-card .peach-feedback-chip.is-active {456 background: color-mix(in srgb, currentColor 16%, transparent);457}458459.stk-card .peach-settings-input,460.stk-card .peach-settings-select,461.stk-card .peach-pro-key-inline-input,462.stk-card .peach-feedback-textarea {463 color: currentColor;464 border-color: color-mix(in srgb, currentColor 22%, transparent);465 background: rgba(0, 0, 0, 0.18);466}467468.stk-card .peach-settings-input::placeholder,469.stk-card .peach-pro-key-inline-input::placeholder,470.stk-card .peach-feedback-textarea::placeholder {471 color: color-mix(in srgb, currentColor 42%, transparent);472}473474.stk-card .peach-accent-picker {475 justify-content: flex-end;476 max-width: 160px;477}478479.stk-card .peach-accent-swatch {480 width: 20px;481 height: 20px;482}483484.stk-card .peach-accent-swatch.is-active {485 border-color: currentColor;486}487488.stk-card .peach-history-list {489 border-color: color-mix(in srgb, currentColor 18%, transparent);490}491492.stk-card .peach-danger-card {493 background: rgba(0, 0, 0, 0.18);494 border-color: color-mix(in srgb, currentColor 20%, transparent);495}496497.stk-card .peach-pro-upgrade,498.stk-card .peach-pro-active,499.stk-card .peach-pro-active-hero,500.stk-card .peach-pro-grid-item {501 background: transparent;502 border-color: color-mix(in srgb, currentColor 14%, transparent);503 box-shadow: none;504}505506.stk-card .peach-pro-grid {507 gap: 6px;508}509510.stk-card .peach-pro-grid-item {511 padding: 7px 0;512}513514.stk-card .peach-pro-headline,515.stk-card .peach-pro-active-title {516 color: currentColor;517}518519.stk-card .peach-feedback-textarea {520 min-height: 116px;521}522523.light .stk-shell,524[data-theme="light"] .stk-shell {525 background: var(--peach-bg);526}527528.light .stk-card,529[data-theme="light"] .stk-card {530 box-shadow:531 0 1px 0 color-mix(in srgb, var(--peach-t0) 5%, transparent) inset,532 0 8px 20px rgba(78, 56, 36, 0.18);533}534535.light .stk-card.is-active,536[data-theme="light"] .stk-card.is-active {537 box-shadow:538 0 1px 0 color-mix(in srgb, var(--peach-t0) 8%, transparent) inset,539 0 18px 36px rgba(78, 56, 36, 0.35);540}541542:root[data-native="true"] {543 --stack-tab-h: 64px;544 --stack-tab-overlap: 16px;545}546547:root[data-native="true"] .stk-deck {548 height: calc(100dvh - 126px);549 min-height: 520px;550}551552[data-motion="reduce"] .stk-card,553[data-motion="reduce"] .stk-card-body {554 transition: none !important;555}