.color-studio{--gallery-ease:cubic-bezier(.22,.8,.24,1)}
.color-studio .cs-hero h1{font-family:'Noto Serif SC','Songti SC',SimSun,serif;font-weight:600;letter-spacing:1px}
.color-studio .cs-gallery-controls{margin:0 2px 14px}
.color-studio .cs-view-switch{position:relative;isolation:isolate;display:flex;border:1px solid #e5dfd8;padding:5px;border-radius:16px;background:#ece9e4;max-width:360px;width:100%}
.color-studio .cs-view-switch button{position:relative;z-index:1;flex:1;min-height:44px;border:0;border-radius:12px;background:transparent;color:#89838c;font-size:14px;cursor:pointer;transition:color .3s}
.color-studio .cs-view-switch button span{font-size:19px;vertical-align:-1px;margin-right:7px}
.color-studio .cs-view-switch button[aria-pressed=true]{color:#554969;font-weight:600}
.color-studio .cs-view-slider{position:absolute;top:5px;bottom:5px;left:5px;width:calc((100% - 10px)/2);border-radius:11px;background:#fffefa;box-shadow:0 2px 8px #41353212;transition:transform .55s var(--gallery-ease)}
.color-studio[data-gallery-mode=gem] .cs-view-slider{transform:translateX(100%)}
.color-studio #cs-view-hint{font-size:11px;color:#918778;line-height:1.7;margin:9px 3px 0;letter-spacing:.3px}
.color-studio .cs-status{font-size:11px}
.color-studio .cs-grid{gap:14px}
.color-studio .cs-exhibit{position:relative;min-width:0}
.color-studio .cs-exhibit .cs-card{height:100%;border-color:#e8e3db;border-radius:17px;box-shadow:0 5px 18px #4e403006;animation:none}
.color-studio .cs-exhibit .cs-swatch{height:clamp(150px,38vw,240px);background:#f1efea;isolation:isolate;overflow:hidden}
.color-studio .cs-exhibit .cs-swatch::before{content:'';position:absolute;inset:0;background:var(--swatch);transform-origin:center bottom;transition:transform .7s var(--gallery-ease);z-index:2}
.color-studio .cs-exhibit .cs-number{z-index:4;top:10px;left:10px;font-size:8px;letter-spacing:1.2px;background:#fffc;backdrop-filter:blur(8px);border:1px solid #fff8;color:#625b52;padding:3px 7px}
.color-studio .cs-gem-image{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;background:#fff;opacity:0;transform:translateY(18%) scale(.75);transition:transform .8s var(--gallery-ease),opacity .45s;z-index:1}
.color-studio .cs-gem-loading{display:none;position:absolute;inset:45% 8px auto;text-align:center;z-index:3;font-size:10px;color:#948877;letter-spacing:1px}
.color-studio[data-gallery-mode=gem] .is-loading .cs-gem-loading{display:block}
.color-studio[data-gallery-mode=gem] .is-loading .cs-gem-image{opacity:0}
.color-studio .cs-gem-label{position:absolute;left:11px;bottom:20px;z-index:3;max-width:calc(100% - 22px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px;color:#5f5547;background:#ffffffe8;padding:4px 7px;border-radius:6px;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .5s var(--gallery-ease)}
.color-studio[data-gallery-mode=gem] .cs-exhibit.has-gem .cs-swatch::before{transform:scaleY(.055)}
.color-studio[data-gallery-mode=gem] .cs-gem-image{opacity:1;transform:translateY(0) scale(1)}
.color-studio[data-gallery-mode=gem] .cs-gem-label{opacity:1;transform:translateY(0)}
.color-studio .cs-exhibit .cs-card-body{padding:13px 12px 11px}
.color-studio .cs-exhibit h3{font-family:'Noto Serif SC','Songti SC',SimSun,serif;font-weight:600;letter-spacing:.5px}
.color-studio .cs-exhibit .cs-meta{margin:8px 0 10px;font-size:9px;letter-spacing:.3px}
.color-studio .cs-exhibit .cs-samples{transition:opacity .4s;min-height:44px}
.color-studio[data-gallery-mode=gem] .cs-exhibit.has-gem .cs-samples{opacity:.6}
.color-studio .cs-gem-nav{display:flex;gap:4px;align-items:center;position:absolute;right:9px;bottom:12px;z-index:5;padding:3px;border-radius:20px;background:#fff;box-shadow:0 1px 7px #41353212;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .35s,transform .4s var(--gallery-ease),visibility .35s}
.color-studio[data-gallery-mode=gem] .cs-gem-nav{opacity:1;visibility:visible;transform:translateY(0)}
.color-studio .cs-gem-nav button{width:32px;height:32px;border:0;border-radius:50%;background:#f3f0f6;color:#70617e;font-size:20px;line-height:1;cursor:pointer}
.color-studio .cs-gem-count{font-size:10px;color:#8c8091;min-width:27px;text-align:center;font-variant-numeric:tabular-nums}
.color-studio .cs-exhibit.has-gallery .cs-samples{padding-right:0}
.color-studio[data-gallery-mode=gem] .cs-exhibit.has-gallery .cs-samples img{visibility:hidden}
.color-studio[data-gallery-mode=gem] .cs-exhibit.has-gallery .cs-arrow{visibility:hidden}
.color-studio .cs-no-photo{position:absolute;bottom:12px;left:10px;right:10px;z-index:3;font-size:10px;line-height:1.6;color:#51495c;background:#fffdf7eb;border-radius:7px;padding:6px 8px;display:none}
.color-studio[data-gallery-mode=gem] .cs-exhibit:not(.has-gem) .cs-no-photo{display:block}
.color-studio .cs-exhibit.is-revealing{animation:cs-gallery-reveal .65s var(--gallery-ease) both}
@keyframes cs-gallery-reveal{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@media(hover:hover){.color-studio .cs-exhibit .cs-card:hover{transform:translateY(-3px);box-shadow:0 14px 26px #4e403013}.color-studio[data-gallery-mode=gem] .cs-card:hover .cs-gem-image{transform:scale(1.035)}}
@media(max-width:360px){.color-studio .cs-grid{gap:10px}.color-studio .cs-exhibit .cs-card-body{padding:11px 9px}.color-studio .cs-gem-nav{right:6px;gap:2px}.color-studio .cs-gem-nav button{width:30px;height:32px}}
@media(prefers-reduced-motion:reduce){.color-studio .cs-exhibit,.color-studio .cs-exhibit *,.color-studio .cs-exhibit .cs-swatch::before,.color-studio .cs-view-slider{animation:none!important;transition:none!important}}