123.stk-shell {4 flex: 1;5 min-height: 0;6 position: relative;7 overflow: hidden;8 padding: 10px 12px 10px;9}1011.stk-mast {12 display: flex;13 align-items: center;14 justify-content: space-between;15 gap: 10px;16 padding: 0 0 8px;17}1819.stk-back {20 width: 28px;21 height: 28px;22 display: inline-flex;23 align-items: center;24 justify-content: center;25 flex: 0 0 auto;26 border: 1px solid var(--peach-border);27 border-radius: 999px;28 background: color-mix(in srgb, var(--peach-t0) 4%, transparent);29 color: var(--peach-t1);30 cursor: pointer;31}3233.stk-back:hover {34 color: var(--peach-t0);35 border-color: color-mix(in srgb, var(--peach-accent) 34%, transparent);36 background: color-mix(in srgb, var(--peach-accent) 10%, transparent);37}3839.stk-mast-title {40 flex: 1;41 font-family: var(--font-display);42 font-style: italic;43 font-weight: 400;44 font-size: 22px;45 line-height: 1;46 color: var(--peach-t0);47}4849.stk-mast-meta {50 font-family: var(--font-mono);51 font-size: 9px;52 letter-spacing: 0.22em;53 text-transform: uppercase;54 color: var(--peach-t2);55}5657.stk-deck {58 position: relative;59 height: min(462px, calc(100% - 36px));60 min-height: 462px;61 margin-top: 0;62 overflow: hidden;63}6465.stk-deck.is-focused {66 overflow: visible;67}6869.stk-card {70 position: absolute;71 left: 0;72 right: 0;73 border-radius: var(--stack-card-radius);74 padding: 18px 18px 16px;75 overflow: hidden;76 cursor: pointer;77 transition:78 transform 380ms var(--stack-spring),79 height 380ms var(--stack-spring),80 box-shadow 280ms ease,81 opacity 220ms ease;82 box-shadow:83 0 1px 0 color-mix(in srgb, var(--peach-t0) 5%, transparent) inset,84 0 8px 20px rgba(0, 0, 0, 0.25);85 border: 1px solid color-mix(in srgb, var(--peach-t0) 6%, transparent);86 will-change: transform;87}8889.stk-card::after {90 content: "";91 position: absolute;92 inset: 0;93 border-radius: inherit;94 pointer-events: none;95 background:96 radial-gradient(97 120% 80% at 0% 0%,98 color-mix(in srgb, #fff 12%, transparent),99 transparent 50%100 );101}102103.stk-card.is-active {104 box-shadow:105 0 1px 0 color-mix(in srgb, var(--peach-t0) 8%, transparent) inset,106 0 18px 36px rgba(0, 0, 0, 0.42);107 cursor: default;108}109110.stk-card.is-focused {111 cursor: default;112}113114.stk-card.is-tab:hover {115 transform: translateY(calc(var(--stk-card-top) - 7px));116 box-shadow:117 0 1px 0 color-mix(in srgb, var(--peach-t0) 7%, transparent) inset,118 0 16px 32px rgba(0, 0, 0, 0.42),119 0 0 28px color-mix(in srgb, currentColor 28%, transparent);120 transition:121 transform 90ms ease-out,122 box-shadow 90ms ease-out;123}124125.stk-card.is-concealed {126 opacity: 0;127 pointer-events: none;128}129130.stk-card-top {131 display: flex;132 justify-content: space-between;133 align-items: center;134 margin-bottom: 12px;135 position: relative;136 z-index: 1;137}138139.stk-card-num {140 font-family: var(--font-mono);141 font-size: 8.5px;142 letter-spacing: 0.26em;143 text-transform: uppercase;144 opacity: 0.7;145}146147.stk-card-icon {148 opacity: 0.85;149}150151.stk-card-title {152 position: relative;153 z-index: 1;154 margin: 6px 0 0;155 font-family: var(--font-display);156 font-style: italic;157 font-weight: 400;158 font-size: 26px;159 line-height: 1.2;160}161162.stk-card-lede {163 position: relative;164 z-index: 1;165 margin: 4px 0 0;166 font-family: var(--font-display);167 font-style: italic;168 font-size: 12.5px;169 line-height: 1.4;170 opacity: 0.72;171}172173.stk-card-body {174 position: relative;175 z-index: 1;176 height: calc(100% - 76px);177 margin-top: 14px;178 overflow-y: auto;179 overflow-x: hidden;180 opacity: 0;181 scrollbar-width: thin;182 scrollbar-color: color-mix(in srgb, currentColor 28%, transparent) transparent;183 transition: opacity 200ms 100ms ease;184}185186.stk-card.is-active .stk-card-body {187 opacity: 1;188}189190.stk-card.is-tab .stk-card-top {191 display: none;192}193194.stk-card.is-tab {195 padding: 10px 16px 8px;196}197198.stk-card.is-tab .stk-card-title {199 font-size: 19px;200 line-height: 1;201 white-space: nowrap;202 overflow: hidden;203 text-overflow: ellipsis;204}205206.stk-card.is-tab .stk-card-lede,207.stk-card.is-tab .stk-card-body {208 display: none;209}210211.stk-card *:focus-visible {212 outline: 1px solid currentColor;213 outline-offset: 2px;214}215216.stk-tray-handle {217 position: absolute;218 left: 50%;219 bottom: 8px;220 z-index: 120;221 transform: translateX(-50%);222 height: 30px;223 min-width: 112px;224 display: inline-flex;225 align-items: center;226 justify-content: center;227 border: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);228 border-radius: 999px;229 background:230 linear-gradient(180deg, color-mix(in srgb, var(--peach-bg) 88%, transparent), color-mix(in srgb, var(--peach-bg) 72%, transparent)),231 color-mix(in srgb, var(--peach-accent) 10%, transparent);232 color: var(--peach-t1);233 font-family: var(--font-mono);234 font-size: 9px;235 letter-spacing: 0.2em;236 text-transform: uppercase;237 box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);238 cursor: pointer;239}240241.stk-tray-handle::before {242 content: "";243 position: absolute;244 top: 5px;245 width: 26px;246 height: 2px;247 border-radius: 999px;248 background: color-mix(in srgb, currentColor 45%, transparent);249}250251.stk-tray-handle span {252 transform: translateY(4px);253}254255.stk-row {256 display: flex;257 align-items: center;258 justify-content: space-between;259 gap: 12px;260 padding: 10px 0;261 border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);262}263264.stk-row:last-child {265 border-bottom: none;266}267268.stk-row-name {269 font-size: 13px;270}271272.stk-row-sub {273 margin-top: 2px;274 font-family: var(--font-display);275 font-style: italic;276 font-size: 11px;277 opacity: 0.7;278}279280.stk-pill {281 display: inline-flex;282 align-items: center;283 justify-content: center;284 min-height: 24px;285 padding: 3px 10px;286 font-family: var(--font-mono);287 font-size: 10px;288 letter-spacing: 0.08em;289 text-transform: lowercase;290 background: transparent;291 color: currentColor;292 border: 1px solid color-mix(in srgb, currentColor 35%, transparent);293 border-radius: 999px;294 cursor: pointer;295 transition: background 140ms ease, border-color 140ms ease;296}297298.stk-pill:hover,299.stk-pill.is-accent {300 background: color-mix(in srgb, currentColor 18%, transparent);301 border-color: color-mix(in srgb, currentColor 55%, transparent);302}303304.stk-pip {305 display: inline-block;306 width: 18px;307 height: 18px;308 border-radius: 50%;309 background: rgba(0, 0, 0, 0.18);310 border: 1px solid color-mix(in srgb, currentColor 24%, transparent);311}312313.stk-pip.is-on {314 background: var(--peach-health-ok);315 box-shadow: 0 0 6px color-mix(in srgb, var(--peach-health-ok) 55%, transparent);316}317318.stk-sync-actions,319.stk-fb-chips,320.stk-inline-actions {321 display: flex;322 flex-wrap: wrap;323 gap: 6px;324}325326.stk-key {327 font-family: var(--font-mono);328 font-size: 10px;329 letter-spacing: 0.06em;330 padding: 2px 7px;331 border: 1px solid color-mix(in srgb, currentColor 32%, transparent);332 border-radius: 4px;333 background: color-mix(in srgb, currentColor 6%, transparent);334}335336.stk-pro-headline {337 padding: 6px 0 14px;338 border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent);339}340341.stk-pro-title,342.stk-pro-price {343 font-family: var(--font-display);344 font-style: italic;345 line-height: 1;346}347348.stk-pro-title {349 font-size: 22px;350}351352.stk-pro-price {353 font-size: 28px;354}355356.stk-pro-meta {357 margin-top: 4px;358 font-family: var(--font-mono);359 font-size: 9.5px;360 letter-spacing: 0.18em;361 text-transform: uppercase;362 opacity: 0.7;363}364365.stk-card .peach-settings-body {366 display: block;367 flex: none;368 min-height: 0;369 overflow: visible;370 padding: 0;371 background: transparent;372}373374.stk-card .peach-settings-group {375 margin: 0;376 padding: 0;377 border: 0;378 border-radius: 0;379 background: transparent;380 box-shadow: none;381 backdrop-filter: none;382 -webkit-backdrop-filter: none;383}384385.stk-card .peach-settings-group + .peach-settings-group {386 margin-top: 0;387}388389.stk-card .peach-settings-sub-label,390.stk-card .peach-settings-label {391 margin: 12px 0 4px;392 color: color-mix(in srgb, currentColor 58%, transparent);393}394395.stk-card .peach-settings-sub-label:first-child,396.stk-card .peach-settings-label:first-child {397 margin-top: 0;398}399400.stk-card .peach-settings-row,401.stk-card .peach-shortcut-row,402.stk-card .peach-history-row {403 border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);404 color: currentColor;405}406407.stk-card .peach-settings-row--meta,408.stk-card .peach-settings-value,409.stk-card .peach-hint,410.stk-card .peach-settings-hint,411.stk-card .peach-feedback-meta,412.stk-card .peach-feedback-anon,413.stk-card .peach-feedback-intro,414.stk-card .peach-history-sub,415.stk-card .peach-history-footer,416.stk-card .peach-danger-card-copy {417 color: color-mix(in srgb, currentColor 70%, transparent);418}419420.stk-card .peach-toggle {421 --peach-accent: currentColor;422 border-color: color-mix(in srgb, currentColor 32%, transparent);423 background: color-mix(in srgb, currentColor 8%, transparent);424}425426.stk-card .peach-toggle.is-on {427 background: color-mix(in srgb, currentColor 28%, transparent);428 border-color: color-mix(in srgb, currentColor 50%, transparent);429}430431.stk-card .peach-toggle-knob {432 background: color-mix(in srgb, currentColor 58%, transparent);433}434435.stk-card .peach-toggle.is-on .peach-toggle-knob {436 background: currentColor;437}438439.stk-card .peach-btn--subtle,440.stk-card .peach-btn--ghost,441.stk-card .peach-btn--accent,442.stk-card .peach-shortcut-chip,443.stk-card .peach-shortcut-reset,444.stk-card .peach-feedback-chip,445.stk-card .peach-settings-license-copy,446.stk-card .peach-settings-license-toggle {447 color: currentColor;448 border-color: color-mix(in srgb, currentColor 28%, transparent);449 background: color-mix(in srgb, currentColor 8%, transparent);450}451452.stk-card .peach-btn--subtle:hover,453.stk-card .peach-btn--ghost:hover,454.stk-card .peach-btn--accent:hover,455.stk-card .peach-shortcut-chip:hover,456.stk-card .peach-feedback-chip:hover,457.stk-card .peach-feedback-chip.is-active {458 background: color-mix(in srgb, currentColor 16%, transparent);459}460461.stk-card .peach-settings-input,462.stk-card .peach-settings-select,463.stk-card .peach-pro-key-inline-input,464.stk-card .peach-feedback-textarea {465 color: currentColor;466 border-color: color-mix(in srgb, currentColor 22%, transparent);467 background: rgba(0, 0, 0, 0.18);468}469470.stk-card .peach-settings-input::placeholder,471.stk-card .peach-pro-key-inline-input::placeholder,472.stk-card .peach-feedback-textarea::placeholder {473 color: color-mix(in srgb, currentColor 42%, transparent);474}475476.stk-card .peach-accent-picker {477 justify-content: flex-end;478 max-width: 160px;479}480481.stk-card .peach-accent-swatch {482 width: 20px;483 height: 20px;484}485486.stk-card .peach-accent-swatch.is-active {487 border-color: currentColor;488}489490.stk-card .peach-history-list {491 border-color: color-mix(in srgb, currentColor 18%, transparent);492}493494.stk-card .peach-danger-card {495 background: rgba(0, 0, 0, 0.18);496 border-color: color-mix(in srgb, currentColor 20%, transparent);497}498499.stk-card .peach-pro-upgrade,500.stk-card .peach-pro-active,501.stk-card .peach-pro-active-hero,502.stk-card .peach-pro-grid-item {503 background: transparent;504 border-color: color-mix(in srgb, currentColor 14%, transparent);505 box-shadow: none;506}507508.stk-card .peach-pro-grid {509 gap: 6px;510}511512.stk-card .peach-pro-grid-item {513 padding: 7px 0;514}515516.stk-card .peach-pro-headline,517.stk-card .peach-pro-active-title {518 color: currentColor;519}520521.stk-card .peach-feedback-textarea {522 min-height: 116px;523}524525.light .stk-shell,526[data-theme="light"] .stk-shell {527 background: var(--peach-bg);528}529530.light .stk-card,531[data-theme="light"] .stk-card {532 box-shadow:533 0 1px 0 color-mix(in srgb, var(--peach-t0) 5%, transparent) inset,534 0 8px 20px rgba(78, 56, 36, 0.18);535}536537.light .stk-card.is-active,538[data-theme="light"] .stk-card.is-active {539 box-shadow:540 0 1px 0 color-mix(in srgb, var(--peach-t0) 8%, transparent) inset,541 0 18px 36px rgba(78, 56, 36, 0.35);542}543544:root[data-native="true"] {545 --stack-tab-h: 64px;546 --stack-tab-overlap: 16px;547}548549:root[data-native="true"] .stk-deck {550 height: calc(100dvh - 126px);551 min-height: 520px;552}553554[data-motion="reduce"] .stk-card,555[data-motion="reduce"] .stk-card-body {556 transition: none !important;557}