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-concealed {116 opacity: 0;117 pointer-events: none;118}119120.stk-card-top {121 display: flex;122 justify-content: space-between;123 align-items: center;124 margin-bottom: 12px;125 position: relative;126 z-index: 1;127}128129.stk-card-num {130 font-family: var(--font-mono);131 font-size: 8.5px;132 letter-spacing: 0.26em;133 text-transform: uppercase;134 opacity: 0.7;135}136137.stk-card-icon {138 opacity: 0.85;139}140141.stk-card-title {142 position: relative;143 z-index: 1;144 margin: 6px 0 0;145 font-family: var(--font-display);146 font-style: italic;147 font-weight: 400;148 font-size: 26px;149 line-height: 1.2;150}151152.stk-card-lede {153 position: relative;154 z-index: 1;155 margin: 4px 0 0;156 font-family: var(--font-display);157 font-style: italic;158 font-size: 12.5px;159 line-height: 1.4;160 opacity: 0.72;161}162163.stk-card-body {164 position: relative;165 z-index: 1;166 height: calc(100% - 76px);167 margin-top: 14px;168 overflow-y: auto;169 overflow-x: hidden;170 opacity: 0;171 scrollbar-width: thin;172 scrollbar-color: color-mix(in srgb, currentColor 28%, transparent) transparent;173 transition: opacity 200ms 100ms ease;174}175176.stk-card.is-active .stk-card-body {177 opacity: 1;178}179180.stk-card.is-tab .stk-card-top {181 display: none;182}183184.stk-card.is-tab {185 padding: 10px 16px 8px;186}187188.stk-card.is-tab .stk-card-title {189 font-size: 19px;190 line-height: 1;191 white-space: nowrap;192 overflow: hidden;193 text-overflow: ellipsis;194}195196.stk-card.is-tab .stk-card-lede,197.stk-card.is-tab .stk-card-body {198 display: none;199}200201.stk-card *:focus-visible {202 outline: 1px solid currentColor;203 outline-offset: 2px;204}205206.stk-tray-handle {207 position: absolute;208 left: 50%;209 bottom: 8px;210 z-index: 120;211 transform: translateX(-50%);212 height: 30px;213 min-width: 112px;214 display: inline-flex;215 align-items: center;216 justify-content: center;217 border: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);218 border-radius: 999px;219 background:220 linear-gradient(180deg, color-mix(in srgb, var(--peach-bg) 88%, transparent), color-mix(in srgb, var(--peach-bg) 72%, transparent)),221 color-mix(in srgb, var(--peach-accent) 10%, transparent);222 color: var(--peach-t1);223 font-family: var(--font-mono);224 font-size: 9px;225 letter-spacing: 0.2em;226 text-transform: uppercase;227 box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);228 cursor: pointer;229}230231.stk-tray-handle::before {232 content: "";233 position: absolute;234 top: 5px;235 width: 26px;236 height: 2px;237 border-radius: 999px;238 background: color-mix(in srgb, currentColor 45%, transparent);239}240241.stk-tray-handle span {242 transform: translateY(4px);243}244245.stk-row {246 display: flex;247 align-items: center;248 justify-content: space-between;249 gap: 12px;250 padding: 10px 0;251 border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);252}253254.stk-row:last-child {255 border-bottom: none;256}257258.stk-row-name {259 font-size: 13px;260}261262.stk-row-sub {263 margin-top: 2px;264 font-family: var(--font-display);265 font-style: italic;266 font-size: 11px;267 opacity: 0.7;268}269270.stk-pill {271 display: inline-flex;272 align-items: center;273 justify-content: center;274 min-height: 24px;275 padding: 3px 10px;276 font-family: var(--font-mono);277 font-size: 10px;278 letter-spacing: 0.08em;279 text-transform: lowercase;280 background: transparent;281 color: currentColor;282 border: 1px solid color-mix(in srgb, currentColor 35%, transparent);283 border-radius: 999px;284 cursor: pointer;285 transition: background 140ms ease, border-color 140ms ease;286}287288.stk-pill:hover,289.stk-pill.is-accent {290 background: color-mix(in srgb, currentColor 18%, transparent);291 border-color: color-mix(in srgb, currentColor 55%, transparent);292}293294.stk-pip {295 display: inline-block;296 width: 18px;297 height: 18px;298 border-radius: 50%;299 background: rgba(0, 0, 0, 0.18);300 border: 1px solid color-mix(in srgb, currentColor 24%, transparent);301}302303.stk-pip.is-on {304 background: var(--peach-health-ok);305 box-shadow: 0 0 6px color-mix(in srgb, var(--peach-health-ok) 55%, transparent);306}307308.stk-sync-actions,309.stk-fb-chips,310.stk-inline-actions {311 display: flex;312 flex-wrap: wrap;313 gap: 6px;314}315316.stk-key {317 font-family: var(--font-mono);318 font-size: 10px;319 letter-spacing: 0.06em;320 padding: 2px 7px;321 border: 1px solid color-mix(in srgb, currentColor 32%, transparent);322 border-radius: 4px;323 background: color-mix(in srgb, currentColor 6%, transparent);324}325326.stk-pro-headline {327 padding: 6px 0 14px;328 border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent);329}330331.stk-pro-title,332.stk-pro-price {333 font-family: var(--font-display);334 font-style: italic;335 line-height: 1;336}337338.stk-pro-title {339 font-size: 22px;340}341342.stk-pro-price {343 font-size: 28px;344}345346.stk-pro-meta {347 margin-top: 4px;348 font-family: var(--font-mono);349 font-size: 9.5px;350 letter-spacing: 0.18em;351 text-transform: uppercase;352 opacity: 0.7;353}354355.stk-card .peach-settings-body {356 display: block;357 flex: none;358 min-height: 0;359 overflow: visible;360 padding: 0;361 background: transparent;362}363364.stk-card .peach-settings-group {365 margin: 0;366 padding: 0;367 border: 0;368 border-radius: 0;369 background: transparent;370 box-shadow: none;371 backdrop-filter: none;372 -webkit-backdrop-filter: none;373}374375.stk-card .peach-settings-group + .peach-settings-group {376 margin-top: 0;377}378379.stk-card .peach-settings-sub-label,380.stk-card .peach-settings-label {381 margin: 12px 0 4px;382 color: color-mix(in srgb, currentColor 58%, transparent);383}384385.stk-card .peach-settings-sub-label:first-child,386.stk-card .peach-settings-label:first-child {387 margin-top: 0;388}389390.stk-card .peach-settings-row,391.stk-card .peach-shortcut-row,392.stk-card .peach-history-row {393 border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);394 color: currentColor;395}396397.stk-card .peach-settings-row--meta,398.stk-card .peach-settings-value,399.stk-card .peach-hint,400.stk-card .peach-settings-hint,401.stk-card .peach-feedback-meta,402.stk-card .peach-feedback-anon,403.stk-card .peach-feedback-intro,404.stk-card .peach-history-sub,405.stk-card .peach-history-footer,406.stk-card .peach-danger-card-copy {407 color: color-mix(in srgb, currentColor 70%, transparent);408}409410.stk-card .peach-toggle {411 --peach-accent: currentColor;412 border-color: color-mix(in srgb, currentColor 32%, transparent);413 background: color-mix(in srgb, currentColor 8%, transparent);414}415416.stk-card .peach-toggle.is-on {417 background: color-mix(in srgb, currentColor 28%, transparent);418 border-color: color-mix(in srgb, currentColor 50%, transparent);419}420421.stk-card .peach-toggle-knob {422 background: color-mix(in srgb, currentColor 58%, transparent);423}424425.stk-card .peach-toggle.is-on .peach-toggle-knob {426 background: currentColor;427}428429.stk-card .peach-btn--subtle,430.stk-card .peach-btn--ghost,431.stk-card .peach-btn--accent,432.stk-card .peach-shortcut-chip,433.stk-card .peach-shortcut-reset,434.stk-card .peach-feedback-chip,435.stk-card .peach-settings-license-copy,436.stk-card .peach-settings-license-toggle {437 color: currentColor;438 border-color: color-mix(in srgb, currentColor 28%, transparent);439 background: color-mix(in srgb, currentColor 8%, transparent);440}441442.stk-card .peach-btn--subtle:hover,443.stk-card .peach-btn--ghost:hover,444.stk-card .peach-btn--accent:hover,445.stk-card .peach-shortcut-chip:hover,446.stk-card .peach-feedback-chip:hover,447.stk-card .peach-feedback-chip.is-active {448 background: color-mix(in srgb, currentColor 16%, transparent);449}450451.stk-card .peach-settings-input,452.stk-card .peach-settings-select,453.stk-card .peach-pro-key-inline-input,454.stk-card .peach-feedback-textarea {455 color: currentColor;456 border-color: color-mix(in srgb, currentColor 22%, transparent);457 background: rgba(0, 0, 0, 0.18);458}459460.stk-card .peach-settings-input::placeholder,461.stk-card .peach-pro-key-inline-input::placeholder,462.stk-card .peach-feedback-textarea::placeholder {463 color: color-mix(in srgb, currentColor 42%, transparent);464}465466.stk-card .peach-accent-picker {467 justify-content: flex-end;468 max-width: 160px;469}470471.stk-card .peach-accent-swatch {472 width: 20px;473 height: 20px;474}475476.stk-card .peach-accent-swatch.is-active {477 border-color: currentColor;478}479480.stk-card .peach-history-list {481 border-color: color-mix(in srgb, currentColor 18%, transparent);482}483484.stk-card .peach-danger-card {485 background: rgba(0, 0, 0, 0.18);486 border-color: color-mix(in srgb, currentColor 20%, transparent);487}488489.stk-card .peach-pro-upgrade,490.stk-card .peach-pro-active,491.stk-card .peach-pro-active-hero,492.stk-card .peach-pro-grid-item {493 background: transparent;494 border-color: color-mix(in srgb, currentColor 14%, transparent);495 box-shadow: none;496}497498.stk-card .peach-pro-grid {499 gap: 6px;500}501502.stk-card .peach-pro-grid-item {503 padding: 7px 0;504}505506.stk-card .peach-pro-headline,507.stk-card .peach-pro-active-title {508 color: currentColor;509}510511.stk-card .peach-feedback-textarea {512 min-height: 116px;513}514515.light .stk-shell,516[data-theme="light"] .stk-shell {517 background: var(--peach-bg);518}519520.light .stk-card,521[data-theme="light"] .stk-card {522 box-shadow:523 0 1px 0 color-mix(in srgb, var(--peach-t0) 5%, transparent) inset,524 0 8px 20px rgba(78, 56, 36, 0.18);525}526527.light .stk-card.is-active,528[data-theme="light"] .stk-card.is-active {529 box-shadow:530 0 1px 0 color-mix(in srgb, var(--peach-t0) 8%, transparent) inset,531 0 18px 36px rgba(78, 56, 36, 0.35);532}533534:root[data-native="true"] {535 --stack-tab-h: 64px;536 --stack-tab-overlap: 16px;537}538539:root[data-native="true"] .stk-deck {540 height: calc(100dvh - 126px);541 min-height: 520px;542}543544[data-motion="reduce"] .stk-card,545[data-motion="reduce"] .stk-card-body {546 transition: none !important;547}