123.stk-shell {4 flex: 1;5 min-height: 0;6 position: relative;7 overflow: hidden;8 padding: 10px 12px 28px;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}6364.stk-card {65 position: absolute;66 left: 0;67 right: 0;68 border-radius: var(--stack-card-radius);69 padding: 18px 18px 16px;70 overflow: hidden;71 cursor: pointer;72 transition:73 transform 380ms var(--stack-spring),74 height 380ms var(--stack-spring),75 box-shadow 280ms ease,76 opacity 220ms ease;77 box-shadow:78 0 1px 0 color-mix(in srgb, var(--peach-t0) 5%, transparent) inset,79 0 8px 20px rgba(0, 0, 0, 0.25);80 border: 1px solid color-mix(in srgb, var(--peach-t0) 6%, transparent);81 will-change: transform;82}8384.stk-card::after {85 content: "";86 position: absolute;87 inset: 0;88 border-radius: inherit;89 pointer-events: none;90 background:91 radial-gradient(92 120% 80% at 0% 0%,93 color-mix(in srgb, #fff 12%, transparent),94 transparent 50%95 );96}9798.stk-card.is-active {99 box-shadow:100 0 1px 0 color-mix(in srgb, var(--peach-t0) 8%, transparent) inset,101 0 18px 36px rgba(0, 0, 0, 0.42);102 cursor: default;103}104105.stk-card.is-focused {106 cursor: default;107}108109.stk-card.is-tab:hover {110 transform: translateY(calc(var(--stk-card-top) - 7px));111 box-shadow:112 0 1px 0 color-mix(in srgb, var(--peach-t0) 7%, transparent) inset,113 0 16px 32px rgba(0, 0, 0, 0.42),114 0 0 28px color-mix(in srgb, currentColor 28%, transparent);115 transition:116 transform 90ms ease-out,117 box-shadow 90ms ease-out;118}119120.stk-card.is-concealed {121 opacity: 0;122 pointer-events: none;123}124125.stk-card-top {126 display: flex;127 justify-content: space-between;128 align-items: center;129 margin-bottom: 12px;130 position: relative;131 z-index: 1;132}133134.stk-card-num {135 font-family: var(--font-mono);136 font-size: 8.5px;137 letter-spacing: 0.26em;138 text-transform: uppercase;139 opacity: 0.7;140}141142.stk-card-icon {143 opacity: 0.85;144}145146.stk-card-title {147 position: relative;148 z-index: 1;149 margin: 6px 0 0;150 font-family: var(--font-display);151 font-style: italic;152 font-weight: 400;153 font-size: 26px;154 line-height: 1.2;155}156157.stk-card-lede {158 position: relative;159 z-index: 1;160 margin: 4px 0 0;161 font-family: var(--font-display);162 font-style: italic;163 font-size: 12.5px;164 line-height: 1.4;165 opacity: 0.72;166}167168.stk-card-body {169 position: relative;170 z-index: 1;171 height: calc(100% - 76px);172 margin-top: 14px;173 overflow-y: auto;174 overflow-x: hidden;175 opacity: 0;176 scrollbar-width: thin;177 scrollbar-color: color-mix(in srgb, currentColor 28%, transparent) transparent;178 transition: opacity 200ms 100ms ease;179}180181.stk-card.is-active .stk-card-body {182 opacity: 1;183}184185.stk-card.is-tab .stk-card-top {186 display: none;187}188189.stk-card.is-tab {190 padding: 10px 16px 8px;191}192193.stk-card.is-tab .stk-card-title {194 font-size: 19px;195 line-height: 1;196 white-space: nowrap;197 overflow: hidden;198 text-overflow: ellipsis;199}200201.stk-card.is-tab .stk-card-lede,202.stk-card.is-tab .stk-card-body {203 display: none;204}205206.stk-card *:focus-visible {207 outline: 1px solid currentColor;208 outline-offset: 2px;209}210211.stk-tray-handle {212 position: absolute;213 left: 50%;214 bottom: 8px;215 z-index: 120;216 transform: translateX(-50%);217 height: 30px;218 min-width: 112px;219 display: inline-flex;220 align-items: center;221 justify-content: center;222 border: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);223 border-radius: 999px;224 background:225 linear-gradient(180deg, color-mix(in srgb, var(--peach-bg) 88%, transparent), color-mix(in srgb, var(--peach-bg) 72%, transparent)),226 color-mix(in srgb, var(--peach-accent) 10%, transparent);227 color: var(--peach-t1);228 font-family: var(--font-mono);229 font-size: 9px;230 letter-spacing: 0.2em;231 text-transform: uppercase;232 box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);233 cursor: pointer;234}235236.stk-tray-handle::before {237 content: "";238 position: absolute;239 top: 5px;240 width: 26px;241 height: 2px;242 border-radius: 999px;243 background: color-mix(in srgb, currentColor 45%, transparent);244}245246.stk-tray-handle span {247 transform: translateY(4px);248}249250.stk-row {251 display: flex;252 align-items: center;253 justify-content: space-between;254 gap: 12px;255 padding: 10px 0;256 border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);257}258259.stk-row:last-child {260 border-bottom: none;261}262263.stk-row-name {264 font-size: 13px;265}266267.stk-row-sub {268 margin-top: 2px;269 font-family: var(--font-display);270 font-style: italic;271 font-size: 11px;272 opacity: 0.7;273}274275.stk-pill {276 display: inline-flex;277 align-items: center;278 justify-content: center;279 min-height: 24px;280 padding: 3px 10px;281 font-family: var(--font-mono);282 font-size: 10px;283 letter-spacing: 0.08em;284 text-transform: lowercase;285 background: transparent;286 color: currentColor;287 border: 1px solid color-mix(in srgb, currentColor 35%, transparent);288 border-radius: 999px;289 cursor: pointer;290 transition: background 140ms ease, border-color 140ms ease;291}292293.stk-pill:hover,294.stk-pill.is-accent {295 background: color-mix(in srgb, currentColor 18%, transparent);296 border-color: color-mix(in srgb, currentColor 55%, transparent);297}298299.stk-pip {300 display: inline-block;301 width: 18px;302 height: 18px;303 border-radius: 50%;304 background: rgba(0, 0, 0, 0.18);305 border: 1px solid color-mix(in srgb, currentColor 24%, transparent);306}307308.stk-pip.is-on {309 background: var(--peach-health-ok);310 box-shadow: 0 0 6px color-mix(in srgb, var(--peach-health-ok) 55%, transparent);311}312313.stk-sync-actions,314.stk-fb-chips,315.stk-inline-actions {316 display: flex;317 flex-wrap: wrap;318 gap: 6px;319}320321.stk-key {322 font-family: var(--font-mono);323 font-size: 10px;324 letter-spacing: 0.06em;325 padding: 2px 7px;326 border: 1px solid color-mix(in srgb, currentColor 32%, transparent);327 border-radius: 4px;328 background: color-mix(in srgb, currentColor 6%, transparent);329}330331.stk-pro-headline {332 padding: 6px 0 14px;333 border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent);334}335336.stk-pro-title,337.stk-pro-price {338 font-family: var(--font-display);339 font-style: italic;340 line-height: 1;341}342343.stk-pro-title {344 font-size: 22px;345}346347.stk-pro-price {348 font-size: 28px;349}350351.stk-pro-meta {352 margin-top: 4px;353 font-family: var(--font-mono);354 font-size: 9.5px;355 letter-spacing: 0.18em;356 text-transform: uppercase;357 opacity: 0.7;358}359360.stk-card .peach-settings-body {361 display: block;362 flex: none;363 min-height: 0;364 overflow: visible;365 padding: 0;366 background: transparent;367}368369.stk-card .peach-settings-group {370 margin: 0;371 padding: 0;372 border: 0;373 border-radius: 0;374 background: transparent;375 box-shadow: none;376 backdrop-filter: none;377 -webkit-backdrop-filter: none;378}379380.stk-card .peach-settings-group + .peach-settings-group {381 margin-top: 0;382}383384.stk-card .peach-settings-sub-label,385.stk-card .peach-settings-label {386 margin: 12px 0 4px;387 color: color-mix(in srgb, currentColor 58%, transparent);388}389390.stk-card .peach-settings-sub-label:first-child,391.stk-card .peach-settings-label:first-child {392 margin-top: 0;393}394395.stk-card .peach-settings-row,396.stk-card .peach-shortcut-row,397.stk-card .peach-history-row {398 border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);399 color: currentColor;400}401402.stk-card .peach-settings-row--meta,403.stk-card .peach-settings-value,404.stk-card .peach-hint,405.stk-card .peach-settings-hint,406.stk-card .peach-feedback-meta,407.stk-card .peach-feedback-anon,408.stk-card .peach-feedback-intro,409.stk-card .peach-history-sub,410.stk-card .peach-history-footer,411.stk-card .peach-danger-card-copy {412 color: color-mix(in srgb, currentColor 70%, transparent);413}414415.stk-card .peach-toggle {416 --peach-accent: currentColor;417 border-color: color-mix(in srgb, currentColor 32%, transparent);418 background: color-mix(in srgb, currentColor 8%, transparent);419}420421.stk-card .peach-toggle.is-on {422 background: color-mix(in srgb, currentColor 28%, transparent);423 border-color: color-mix(in srgb, currentColor 50%, transparent);424}425426.stk-card .peach-toggle-knob {427 background: color-mix(in srgb, currentColor 58%, transparent);428}429430.stk-card .peach-toggle.is-on .peach-toggle-knob {431 background: currentColor;432}433434.stk-card .peach-btn--subtle,435.stk-card .peach-btn--ghost,436.stk-card .peach-btn--accent,437.stk-card .peach-shortcut-chip,438.stk-card .peach-shortcut-reset,439.stk-card .peach-feedback-chip,440.stk-card .peach-settings-license-copy,441.stk-card .peach-settings-license-toggle {442 color: currentColor;443 border-color: color-mix(in srgb, currentColor 28%, transparent);444 background: color-mix(in srgb, currentColor 8%, transparent);445}446447.stk-card .peach-btn--subtle:hover,448.stk-card .peach-btn--ghost:hover,449.stk-card .peach-btn--accent:hover,450.stk-card .peach-shortcut-chip:hover,451.stk-card .peach-feedback-chip:hover,452.stk-card .peach-feedback-chip.is-active {453 background: color-mix(in srgb, currentColor 16%, transparent);454}455456.stk-card .peach-settings-input,457.stk-card .peach-settings-select,458.stk-card .peach-pro-key-inline-input,459.stk-card .peach-feedback-textarea {460 color: currentColor;461 border-color: color-mix(in srgb, currentColor 22%, transparent);462 background: rgba(0, 0, 0, 0.18);463}464465.stk-card .peach-settings-input::placeholder,466.stk-card .peach-pro-key-inline-input::placeholder,467.stk-card .peach-feedback-textarea::placeholder {468 color: color-mix(in srgb, currentColor 42%, transparent);469}470471.stk-card .peach-accent-picker {472 justify-content: flex-end;473 max-width: 160px;474}475476.stk-card .peach-accent-swatch {477 width: 20px;478 height: 20px;479}480481.stk-card .peach-accent-swatch.is-active {482 border-color: currentColor;483}484485.stk-card .peach-history-list {486 border-color: color-mix(in srgb, currentColor 18%, transparent);487}488489.stk-card .peach-danger-card {490 background: rgba(0, 0, 0, 0.18);491 border-color: color-mix(in srgb, currentColor 20%, transparent);492}493494.stk-card .peach-pro-upgrade,495.stk-card .peach-pro-active,496.stk-card .peach-pro-active-hero,497.stk-card .peach-pro-grid-item {498 background: transparent;499 border-color: color-mix(in srgb, currentColor 14%, transparent);500 box-shadow: none;501}502503.stk-card .peach-pro-grid {504 gap: 6px;505}506507.stk-card .peach-pro-grid-item {508 padding: 7px 0;509}510511.stk-card .peach-pro-headline,512.stk-card .peach-pro-active-title {513 color: currentColor;514}515516.stk-card .peach-feedback-textarea {517 min-height: 116px;518}519520.light .stk-shell,521[data-theme="light"] .stk-shell {522 background: var(--peach-bg);523}524525.light .stk-card,526[data-theme="light"] .stk-card {527 box-shadow:528 0 1px 0 color-mix(in srgb, var(--peach-t0) 5%, transparent) inset,529 0 8px 20px rgba(78, 56, 36, 0.18);530}531532.light .stk-card.is-active,533[data-theme="light"] .stk-card.is-active {534 box-shadow:535 0 1px 0 color-mix(in srgb, var(--peach-t0) 8%, transparent) inset,536 0 18px 36px rgba(78, 56, 36, 0.35);537}538539:root[data-native="true"] {540 --stack-tab-h: 64px;541 --stack-tab-overlap: 16px;542}543544:root[data-native="true"] .stk-deck {545 height: calc(100dvh - 126px);546 min-height: 520px;547}548549[data-motion="reduce"] .stk-card,550[data-motion="reduce"] .stk-card-body {551 transition: none !important;552}