.story-track{height:190svh!important}
.palette-showcase{min-height:clamp(700px,110svh,920px)!important}
.label-flow{min-height:clamp(760px,125svh,1100px)!important}
.tier-hint{display:block;margin-top:14px;color:#aeb1ba;font-size:11px;line-height:1.5}
.feature:not(.feature-wide) .tier-hint{color:#74727e}
.ratio-demo{display:flex;height:195px;max-width:650px;margin-top:24px;overflow:hidden;border-radius:16px;box-shadow:0 16px 35px #0002}
.ratio-demo>div{position:relative;min-width:0;animation:ratioReveal .65s both}
.ratio-demo>div:nth-child(1){width:60%}
.ratio-demo>div:nth-child(2){width:30%;animation-delay:.12s}
.ratio-demo>div:nth-child(3){width:10%;animation-delay:.24s}
.ratio-demo span{position:absolute;left:50%;top:50%;writing-mode:horizontal-tb;transform:translate(-50%,-50%) rotate(-90deg);font-size:clamp(11px,1.05vw,13px);font-weight:800;line-height:1;white-space:nowrap}
.ratio-demo>div:nth-child(3) span{font-size:clamp(9px,.85vw,11px)}
.feature-plan-link,.showcase-plan-link{display:inline-block;margin-top:14px;color:#7c63ff;font-size:12px;font-weight:800;text-decoration:none}
.feature-wide .feature-plan-link{color:#d5cbff}
.feature-plan-link:hover,.showcase-plan-link:hover{text-decoration:underline}
.palette-tabs button{font:inherit;text-align:left;cursor:pointer}
.palette-showcase h2{font-size:clamp(38px,4.2vw,58px)}
.palette-labels{grid-template-columns:minmax(0,6fr) minmax(0,3fr) minmax(0,1.6fr)}
.palette-labels span:last-child{overflow:visible}
.palette-labels span:last-child b,.palette-labels span:last-child em{font-size:9px}
.cmf-mini p{overflow-wrap:anywhere}
.label-origin div,.label-color{background:#95686b}
.batch-mini{display:flex;gap:8px;margin-top:28px}
.batch-mini i{width:25%;max-width:46px;aspect-ratio:1;border-radius:9px;background:#95686b}
.batch-mini i:nth-child(2){background:#60786f}.batch-mini i:nth-child(3){background:#c7b38b}.batch-mini i:nth-child(4){background:#7a90a0}
.favorite-preview i{background:#95686b}
.top-five-preview{display:grid;gap:5px;margin-top:20px}
.top-five-preview>div{display:flex;align-items:center;gap:8px;min-height:31px;padding:5px 9px;border:1px solid #55515b;border-radius:8px;background:#343139;color:#f7f4fa;font-size:11px}
.top-five-preview>div:first-child{border-color:#807395;background:#453e52}
.top-five-preview i{width:19px;height:19px;flex:none;border-radius:5px}
.top-five-preview b{font-weight:800}.top-five-preview em{margin-left:auto;color:#d1cbd7;font-size:10px;font-style:normal}.top-five-preview span{color:#b5a2ff;font-size:16px}
.feature:nth-child(4) .tier-hint{margin-top:9px}
.panel-label{display:flex;justify-content:space-between;align-items:center;gap:8px}
.panel-label span{color:#b9abff;font-size:9px;letter-spacing:.03em;white-space:nowrap}
.panel-match-note{margin:8px 0 0;color:#aaa6b1;font-size:9px;line-height:1.4}
.match-panel .panel-match{min-height:31px;margin-top:5px;padding:5px 7px}
.match-panel .panel-match>i{width:21px;height:21px}
.feature-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.feature-wide{grid-column:span 1}
.feature{min-height:340px}
.feature:first-child,.feature:first-child.feature-wide{background:#ffffffed;color:#17171b;border:1px solid #ffffffa8}
.feature:first-child p{color:#7c7b82}
.feature:first-child .num{color:#7c63ff}
.feature:nth-child(n+4){background:#242329ed;color:#fff;border-color:#242329}
.feature:nth-child(n+4) p{color:#d1ced6}
.feature:nth-child(n+4) .tier-hint{color:#bab6c2}
.feature:nth-child(n+4) .num{color:#b6aaff}
.feature:nth-child(n+4) .feature-plan-link{color:#d5cbff}
.feature-match-example{display:flex;align-items:center;gap:10px;min-height:68px;margin-top:10px;padding:9px;border:1px solid #e3e1e8;border-radius:10px;background:#f7f6fb}
.feature-match-example i{width:42px;height:42px;flex:none;border-radius:8px;background:#6e58c7}
.feature-match-example span{min-width:0}.feature-match-example strong,.feature-match-example small{display:block}.feature-match-example strong{font-size:13px}.feature-match-example small{color:#77747d;font-size:10px}
.feature-match-example em{margin-left:auto;color:#716684;font-size:10px;font-style:normal;white-space:nowrap}
.feature-search-query{display:flex;align-items:center;justify-content:space-between}
.feature-search-query b{float:none}
.feature-search-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:10px}
.feature-search-results span{display:flex;align-items:center;justify-content:space-between;gap:4px;min-width:0;padding:11px 9px;border:1px solid #e3e1e8;border-radius:8px;background:#f7f6fb;color:#393741;font-size:12px;font-weight:800;white-space:nowrap}
.feature-search-results b{color:#7c63ff}
.site-header{position:sticky;top:0;z-index:30;max-width:none;background:#faf9f4d9;border-bottom:1px solid #ffffffa9;backdrop-filter:blur(17px) saturate(1.25);-webkit-backdrop-filter:blur(17px) saturate(1.25)}
.feature,.tier-card,.panel-window,.match-panel{box-shadow:0 18px 44px #29243a12}
.feature,.tier-card{background:#ffffffed;border-color:#ffffffa8;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.feature-wide{background:#242329ed}
.tier-card-ultra{background:#242329;color:#fff;border-color:#242329}
.tier-card-ultra .tier-name span,.tier-card-ultra .tier-subtitle{color:#d5d1dc}
.tier-card-ultra li{color:#f0edf4}
.tier-card-ultra .tier-state-pending{background:#514b5c;color:#fff}
.tier-card{min-height:520px}
.feature,.tier-card{transition:transform .35s ease,box-shadow .35s ease}
.feature:hover,.tier-card:hover{transform:translateY(-4px);box-shadow:0 24px 50px #29243a1b}
.favorite-toggle:disabled{opacity:.6;cursor:not-allowed}
@keyframes ratioReveal{from{opacity:0;transform:scaleX(.82);transform-origin:left}to{opacity:1;transform:scaleX(1)}}
@media(max-width:900px){.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:800px){.feature,.tier-card{backdrop-filter:none;-webkit-backdrop-filter:none}.ratio-demo{height:190px}.story-track{height:auto!important}.palette-showcase{min-height:auto!important}.label-flow{min-height:auto}.palette-copy,.palette-art{position:relative;top:auto}}
@media(max-width:650px){.feature-grid{grid-template-columns:1fr}.feature{min-height:0}}
@media(max-width:560px){.ratio-legend{grid-template-columns:1fr 1fr 1fr;font-size:10px}.tier-card{min-height:0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.feature,.tier-card,.ratio-demo>div{animation:none!important;transition:none!important}.story-stage.frame-enter *{animation:none!important}}