.chroma-studio{--cs-brand: var(--brand);--cs-brand-2: #A78BFA;--cs-accent: #F472B6;--cs-ink: var(--ink);--cs-muted: var(--ink-muted);--cs-surface: var(--surface);--cs-surface-2: var(--surface-2);--cs-surface-3: var(--surface-3);--cs-border: var(--border);--cs-border-2: var(--border-strong);--cs-grad: linear-gradient(120deg, #7C3AED 0%, var(--cs-brand) 45%, var(--cs-accent) 100%);--cs-grad-soft: linear-gradient(120deg, rgba(124,58,237,.14), rgba(244,114,182,.12));--cs-glow: 0 12px 40px rgba(124, 58, 237, .28);--cs-ease: cubic-bezier(.16, 1, .3, 1);--cs-font-head: "Plus Jakarta Sans", sans-serif;--cs-font-body: "DM Sans", sans-serif;--cs-font-mono: "JetBrains Mono", monospace;position:relative;font-family:var(--cs-font-body);color:var(--cs-ink)}[data-theme=dark] .chroma-studio{--cs-grad-soft: linear-gradient(120deg, rgba(124,58,237,.22), rgba(244,114,182,.16));--cs-glow: 0 14px 46px rgba(124, 58, 237, .4)}.cs-ambient{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;border-radius:inherit}.cs-orb{position:absolute;border-radius:50%;filter:blur(70px);will-change:transform;animation:csFloat 14s var(--cs-ease) infinite alternate}.cs-orb--a{width:480px;height:480px;top:-180px;right:-120px;background:radial-gradient(circle at 35% 35%,#7c3aed57,#7c3aed00 70%)}.cs-orb--b{width:420px;height:420px;bottom:-160px;left:-140px;background:radial-gradient(circle at 60% 40%,#f472b642,#f472b600 70%);animation-delay:-6s;animation-duration:18s}.cs-noise{position:absolute;inset:0;opacity:.035;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.cs-spotlight{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .5s ease;background:radial-gradient(560px circle at var(--mx, 50%) var(--my, 40%),rgba(127,119,221,.1),transparent 65%)}.chroma-studio:hover .cs-spotlight{opacity:1}.cs-stagger>*{animation:csRise .7s var(--cs-ease) backwards;animation-delay:calc(var(--d, 0) * 90ms)}.cs-rise{animation:csRise .7s var(--cs-ease) backwards;animation-delay:calc(var(--d, 0) * 90ms)}.cs-pop-in{animation:csPop .45s var(--cs-ease) both}@keyframes csRise{0%{opacity:0;transform:translateY(18px);filter:blur(4px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}@keyframes csFloat{0%{transform:translateZ(0) scale(1)}to{transform:translate3d(30px,24px,0) scale(1.08)}}.cs-commandbar{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:1.25rem;flex-wrap:wrap;padding:1rem 1.25rem;margin-bottom:1.75rem;border-radius:22px;border:1px solid var(--cs-border);background:var(--cs-grad-soft),color-mix(in srgb,var(--cs-surface) 88%,transparent);background-color:var(--cs-surface);box-shadow:0 10px 34px #1a1b260f;overflow:hidden}.cs-commandbar:before{content:"";position:absolute;inset:0 0 auto;height:2px;background:var(--cs-grad);opacity:.8}.cs-commandbar__lead{display:flex;gap:.9rem;align-items:center;flex:1 1 320px}.cs-commandbar__icon{width:46px;height:46px;flex-shrink:0;border-radius:14px;background:var(--cs-grad);color:#fff;display:grid;place-items:center;font-size:1.25rem;box-shadow:var(--cs-glow);position:relative;overflow:hidden}.cs-commandbar h4{margin:0;font-family:var(--cs-font-head);font-size:.9rem;font-weight:800;letter-spacing:-.01em;color:var(--cs-ink);display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.cs-commandbar p{margin:.15rem 0 0;font-size:.76rem;color:var(--cs-muted);line-height:1.5}.cs-commandbar__chips{display:flex;gap:.5rem;flex-wrap:wrap;flex-shrink:0}.cs-kbd-chip{display:inline-flex;align-items:center;gap:.4rem;padding:.32rem .7rem;border-radius:12px;background:var(--cs-surface);border:1px solid var(--cs-border);box-shadow:0 2px 6px #1a1b260d;font-size:.66rem;font-weight:700;color:var(--cs-ink);transition:transform .25s var(--cs-ease),border-color .25s,box-shadow .25s}.cs-kbd-chip:hover{transform:translateY(-2px);border-color:var(--cs-brand);box-shadow:0 6px 16px #7c3aed29}.cs-kbd-chip kbd{font-family:var(--cs-font-mono);font-size:.62rem;padding:1px 5px;border-radius:5px;background:var(--cs-surface-3);border:1px solid var(--cs-border);box-shadow:0 1px 2px #1a1b2614;color:var(--cs-muted);line-height:1.5}.cs-badge{display:inline-flex;align-items:center;gap:.3rem;font-size:.64rem;font-weight:700;padding:.18rem .6rem;border-radius:99px;background:var(--cs-grad);color:#fff;letter-spacing:.02em;box-shadow:0 3px 10px #7c3aed4d}.cs-panel{position:relative;z-index:1;padding:1.15rem 1.2rem;margin-bottom:1.1rem;border-radius:22px;border:1px solid var(--cs-border);background:var(--cs-surface);box-shadow:0 8px 28px #1a1b260d;transition:border-color .3s,box-shadow .3s}.cs-panel:hover{border-color:var(--cs-border-2)}.cs-panel__head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.7rem}.cs-panel__title{display:flex;align-items:center;gap:.45rem;font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--cs-muted)}.cs-panel__title svg{color:var(--cs-brand)}.cs-panel__hint{font-size:.64rem;color:var(--cs-muted);font-weight:600}.cs-seed-badge{display:inline-flex;align-items:center;gap:.3rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:.18rem .55rem;border-radius:99px;border:1px solid var(--cs-border);background:var(--cs-grad-soft);color:var(--cs-brand);font-weight:800;cursor:help}.cs-moods{display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem}.cs-mood{position:relative;display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.65rem .3rem;border-radius:15px;border:1.5px solid var(--cs-border);background:var(--cs-surface-2);cursor:pointer;font-family:var(--cs-font-body);transition:transform .3s var(--cs-ease),border-color .25s,box-shadow .25s,background .25s;overflow:hidden}.cs-mood:before{content:"";position:absolute;inset:0;background:var(--cs-grad);opacity:0;transition:opacity .3s}.cs-mood:hover{transform:translateY(-3px);border-color:var(--cs-brand);box-shadow:0 10px 24px #7c3aed24}.cs-mood--active{border-color:transparent;background:var(--cs-grad);box-shadow:var(--cs-glow);transform:translateY(-3px)}.cs-mood--active:before{opacity:0}.cs-mood__icon{position:relative;width:20px;height:20px;display:grid;place-items:center;transition:transform .3s var(--cs-ease)}.cs-mood__icon svg{width:17px;height:17px}.cs-mood:hover .cs-mood__icon{transform:scale(1.18) rotate(-6deg)}.cs-mood__label{position:relative;font-size:.68rem;font-weight:700;color:var(--cs-ink);transition:color .25s}.cs-mood--active .cs-mood__label{color:#fff}.cs-mood__dot{position:absolute;top:.4rem;right:.45rem;width:7px;height:7px;border-radius:50%;background:#fff;opacity:0;transform:scale(0);transition:all .3s var(--cs-ease);box-shadow:0 0 8px #fffc}.cs-mood--active .cs-mood__dot{opacity:1;transform:scale(1)}.cs-harmonies{display:flex;gap:.4rem;flex-wrap:wrap}.cs-harmony{position:relative;padding:.32rem .8rem;border-radius:99px;border:1.5px solid var(--cs-border);background:var(--cs-surface-2);color:var(--cs-muted);font-family:var(--cs-font-body);font-size:.68rem;font-weight:700;cursor:pointer;transition:all .25s var(--cs-ease);overflow:hidden}.cs-harmony:after{content:"";position:absolute;inset:0;background:var(--cs-grad);opacity:0;transition:opacity .25s;z-index:0}.cs-harmony:hover{transform:translateY(-1px);border-color:var(--cs-brand);color:var(--cs-ink)}.cs-harmony--active{border-color:transparent;color:#fff;box-shadow:0 6px 18px #7c3aed4d}.cs-harmony--active:after{opacity:1}.cs-harmony>span{position:relative;z-index:1}.cs-canvas{position:relative;display:flex;gap:0;margin-bottom:.9rem;aspect-ratio:16 / 9;max-width:760px;border-radius:16px;overflow:hidden;border:1px solid rgba(0,0,0,.06);box-shadow:0 12px 32px #1a1b2629}.cs-swatch{position:relative;flex:1;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:.7rem .4rem;transition:flex .35s ease-out;transform:scaleX(1.02);transform-origin:left center;will-change:flex}.cs-swatch:hover{flex:1.5}.cs-swatch--locked{box-shadow:inset 0 0 0 2px var(--cs-brand)}.cs-swatch__actions{position:absolute;top:.55rem;right:.55rem;display:flex;gap:.35rem;z-index:3;opacity:0;pointer-events:none;transform:translateY(-4px);transition:opacity .2s,transform .2s var(--cs-ease)}.cs-swatch__action{width:27px;height:27px;border-radius:9px;border:1px solid rgba(255,255,255,.35);background:#0c0c16c7;color:#fff;display:grid;place-items:center;cursor:pointer;transition:transform .25s var(--cs-ease),background .2s}.cs-swatch__action:hover{transform:scale(1.15) translateY(-1px);background:#000000eb}.cs-swatch__action--on{background:var(--cs-brand);border-color:var(--cs-brand)}.cs-swatch:hover .cs-swatch__actions,.cs-swatch:focus-within .cs-swatch__actions{opacity:1;pointer-events:auto;transform:translateY(0)}.cs-swatch__lockbadge{position:absolute;top:.55rem;left:.55rem;z-index:3;width:22px;height:22px;border-radius:8px;background:var(--cs-brand);color:#fff;display:grid;place-items:center;box-shadow:0 4px 12px #7c3aed73;animation:csPop .4s var(--cs-ease)}@keyframes csPop{0%{transform:scale(0)}to{transform:scale(1)}}.cs-swatch__meta{position:relative;z-index:2;text-align:center;transition:transform .3s var(--cs-ease)}.cs-swatch:hover .cs-swatch__meta{transform:translateY(-2px)}.cs-swatch__hex{font-family:var(--cs-font-mono);font-size:.82rem;font-weight:700;letter-spacing:.06em;line-height:1.2;transition:transform .25s var(--cs-ease)}.cs-swatch__role{font-size:.5rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;opacity:.72;margin-top:.15rem}.cs-swatch__copy{position:absolute;bottom:.6rem;left:50%;transform:translate(-50%,8px);z-index:3;font-size:.58rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:.22rem .65rem;border-radius:99px;background:#ffffffeb;color:#1a1b26;opacity:0;transition:opacity .25s,transform .25s var(--cs-ease);pointer-events:none;white-space:nowrap}.cs-swatch:hover .cs-swatch__copy,.cs-swatch__copy--show{opacity:1;transform:translate(-50%)}.cs-canvas{transform:translateZ(0)}.cs-patterns-pending{width:100%;height:100%}.cs-rollchip{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:0 0 .9rem;padding:.45rem .6rem .45rem .85rem;border-radius:12px;background:var(--cs-surface);border:1px solid var(--cs-border-2);box-shadow:0 4px 14px #1a1b2614;font-size:.78rem;color:#8a8fa3}.cs-rollchip__label b{color:var(--cs-ink);font-weight:700}.cs-rollchip__adopt{margin-left:auto;padding:.3rem .75rem;border-radius:99px;border:none;background:var(--cs-brand);color:#fff;font-size:.72rem;font-weight:700;cursor:pointer;transition:filter .15s,transform .15s}.cs-rollchip__adopt:hover{filter:brightness(1.1);transform:translateY(-1px)}.cs-rollchip__x{width:22px;height:22px;border-radius:50%;border:none;background:transparent;color:#8a8fa3;font-size:.85rem;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .15s,color .15s}.cs-rollchip__x:hover{background:var(--cs-border-2);color:var(--cs-ink)}.cs-picker{position:absolute;top:2.4rem;left:.45rem;z-index:30;padding:.6rem;border-radius:14px;background:var(--cs-surface);border:1px solid var(--cs-border-2);box-shadow:0 18px 48px #1a1b2638;display:flex;flex-direction:column;gap:.45rem;align-items:center;animation:csPop .3s var(--cs-ease)}.cs-picker input[type=color]{width:54px;height:40px;border:none;border-radius:10px;cursor:pointer;background:none;padding:0}.cs-picker input[type=text]{width:84px;font-family:var(--cs-font-mono);font-size:.64rem;padding:.25rem .35rem;border:1px solid var(--cs-border);border-radius:7px;background:var(--cs-surface-2);color:var(--cs-ink);text-align:center;outline:none}.cs-picker input[type=text]:focus{border-color:var(--cs-brand)}.cs-picker__done{font-size:.62rem;font-weight:700;color:var(--cs-brand);background:none;border:none;cursor:pointer;padding:.15rem .5rem;border-radius:6px;transition:background .2s}.cs-picker__done:hover{background:var(--cs-surface-3)}.cs-canvas--busy .cs-swatch{animation:csBusy .5s ease infinite alternate}@keyframes csBusy{0%{filter:brightness(1)}to{filter:brightness(1.22)}}.cs-slotbar{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;padding:.5rem .65rem;margin-bottom:.85rem;border-radius:14px;background:var(--cs-surface-2);border:1px solid var(--cs-border)}.cs-slotbar__label{display:flex;align-items:center;gap:.55rem;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--cs-muted)}.cs-pips{display:flex;gap:.28rem}.cs-pip{width:9px;height:9px;border-radius:50%;background:var(--cs-surface-3);border:1px solid var(--cs-border);transition:all .3s var(--cs-ease)}.cs-pip--on{background:var(--cs-grad);border-color:transparent;box-shadow:0 0 8px #7c3aed80;transform:scale(1.15)}.cs-slotbar__btns{display:flex;gap:.4rem}.cs-mini-btn{display:inline-flex;align-items:center;gap:.3rem;padding:.28rem .65rem;border-radius:9px;border:1px solid var(--cs-border-2);background:var(--cs-surface);color:var(--cs-ink);font-family:var(--cs-font-body);font-size:.7rem;font-weight:700;cursor:pointer;transition:all .22s var(--cs-ease)}.cs-mini-btn:hover:not(:disabled){border-color:var(--cs-brand);color:var(--cs-brand);transform:translateY(-1px);box-shadow:0 5px 14px #7c3aed29}.cs-mini-btn:disabled{opacity:.45;cursor:not-allowed}.cs-actions{display:flex;flex-direction:column;gap:.55rem;margin-bottom:.85rem}.cs-actions__row{display:flex;gap:.55rem;flex-wrap:wrap}.cs-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;padding:.72rem 1rem;border-radius:15px;font-family:var(--cs-font-body);font-size:.8rem;font-weight:800;cursor:pointer;transition:transform .3s var(--cs-ease),box-shadow .3s,border-color .25s,background .25s,color .25s;overflow:hidden;-webkit-tap-highlight-color:transparent}.cs-btn:disabled{opacity:.55;cursor:not-allowed}.cs-btn--primary{flex:1.4;min-width:120px;border:none;color:#fff;background:var(--cs-grad);background-size:160% 160%;box-shadow:var(--cs-glow)}.cs-btn--primary:hover:not(:disabled){transform:translateY(-2px) scale(1.01);box-shadow:0 16px 44px #7c3aed66;background-position:100% 0}.cs-btn--glass{flex:1;min-width:110px;border:1.5px solid var(--cs-border-2);background:var(--cs-surface);color:var(--cs-ink)}.cs-btn--glass svg{color:var(--cs-brand)}.cs-btn--glass:hover:not(:disabled){border-color:var(--cs-brand);transform:translateY(-2px);box-shadow:0 10px 26px #7c3aed29;color:var(--cs-brand)}.cs-btn--glass:hover:not(:disabled) svg{color:var(--cs-brand)}.cs-btn kbd{font-family:var(--cs-font-mono);font-size:.56rem;font-weight:500;padding:1px 5px;border-radius:5px;background:#fff3;color:#ffffffe6;line-height:1.5}.cs-btn--glass kbd{background:var(--cs-surface-3);color:var(--cs-muted);border:1px solid var(--cs-border)}.cs-ripple{position:absolute;border-radius:50%;background:#ffffff80;transform:scale(0);animation:csRipple .6s ease-out forwards;pointer-events:none}.cs-btn--glass .cs-ripple{background:#7c3aed4d}@keyframes csRipple{to{transform:scale(3);opacity:0}}.cs-util{display:flex;align-items:center;justify-content:space-between;gap:.55rem;flex-wrap:wrap}.cs-cluster{display:flex;align-items:center;border:1.5px solid var(--cs-border-2);border-radius:14px;background:var(--cs-surface);overflow:hidden;box-shadow:0 3px 10px #1a1b260d}.cs-cluster__btn{display:grid;place-items:center;width:42px;height:40px;background:transparent;border:none;color:var(--cs-ink);cursor:pointer;transition:background .2s,color .2s}.cs-cluster__btn:hover:not(:disabled){background:var(--cs-surface-3);color:var(--cs-brand)}.cs-cluster__btn:disabled{color:var(--cs-muted);opacity:.4;cursor:not-allowed}.cs-cluster__divider{width:1.5px;height:22px;background:var(--cs-border)}.cs-badge-lock{display:inline-flex;align-items:center;gap:.3rem;font-size:.7rem;font-weight:800;color:var(--cs-brand);padding:.32rem .7rem;border-radius:12px;background:var(--cs-grad-soft);border:1px solid var(--cs-border)}.cs-fav{width:100%;padding:.68rem;border-radius:15px;border:1.5px dashed var(--cs-border-2);background:transparent;color:var(--cs-ink);font-family:var(--cs-font-body);font-size:.78rem;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.45rem;transition:all .3s var(--cs-ease)}.cs-fav:hover:not(:disabled){border-color:var(--cs-brand);border-style:solid;color:var(--cs-brand);background:var(--cs-grad-soft);transform:translateY(-1px);box-shadow:0 8px 22px #7c3aed24}.cs-fav--saved{border-style:solid;border-color:var(--cs-brand);background:var(--cs-grad-soft);color:var(--cs-brand);cursor:default}.cs-pills{display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem;margin-bottom:1.1rem}.cs-pill{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:.55rem .3rem;border-radius:14px;border:1.5px solid var(--cs-border);background:var(--cs-surface-2);cursor:pointer;font-family:var(--cs-font-body);transition:all .25s var(--cs-ease)}.cs-pill:hover{transform:translateY(-3px);border-color:var(--cs-brand);box-shadow:0 8px 20px #7c3aed24}.cs-pill__dot{width:26px;height:26px;border-radius:8px;border:2px solid var(--cs-surface);box-shadow:0 2px 8px #1a1b262e;transition:transform .3s var(--cs-ease)}.cs-pill:hover .cs-pill__dot{transform:scale(1.12) rotate(-6deg)}.cs-pill__hex{font-family:var(--cs-font-mono);font-size:.6rem;color:var(--cs-muted);transition:color .2s}.cs-pill--copied .cs-pill__hex,.cs-pill:hover .cs-pill__hex{color:var(--cs-brand)}.cs-prompt{position:relative;z-index:1;border-radius:22px;border:1px solid var(--cs-border-2);background:var(--cs-surface-2);overflow:hidden;box-shadow:0 10px 32px #1a1b260f}.cs-prompt__head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;padding:.8rem 1rem;border-bottom:1px solid var(--cs-border);background:var(--cs-surface)}.cs-prompt__title{display:flex;align-items:center;gap:.45rem;font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--cs-ink)}.cs-prompt__icon{width:24px;height:24px;border-radius:8px;background:var(--cs-grad);color:#fff;display:grid;place-items:center;box-shadow:0 4px 12px #7c3aed59}.cs-prompt__tools{display:flex;gap:.3rem}.cs-prompt__tool{position:relative;font-size:.58rem;font-weight:800;padding:.24rem .6rem;border-radius:99px;border:1px solid var(--cs-border);background:var(--cs-surface);color:var(--cs-muted);cursor:pointer;font-family:var(--cs-font-body);text-transform:capitalize;transition:all .22s var(--cs-ease);overflow:hidden}.cs-prompt__tool:after{content:"";position:absolute;inset:0;background:var(--cs-grad);opacity:0;transition:opacity .25s}.cs-prompt__tool:hover{color:var(--cs-brand);border-color:var(--cs-brand)}.cs-prompt__tool--active{border-color:transparent;color:#fff;box-shadow:0 4px 12px #7c3aed52}.cs-prompt__tool--active:after{opacity:1}.cs-prompt__tool>span{position:relative;z-index:1}.cs-prompt__body{padding:1rem 1rem .9rem;font-family:var(--cs-font-mono);font-size:.66rem;line-height:1.8;color:var(--cs-ink);white-space:pre-wrap;word-break:break-word;max-height:220px;overflow-y:auto;scrollbar-width:thin}.cs-prompt__foot{padding:0 1rem 1rem;display:flex;flex-direction:column;gap:.5rem}.cs-prompt__copy{position:relative;width:100%;padding:.62rem;border-radius:13px;border:1.5px solid var(--cs-brand);background:transparent;color:var(--cs-brand);font-family:var(--cs-font-body);font-size:.76rem;font-weight:800;cursor:pointer;transition:all .3s var(--cs-ease);overflow:hidden}.cs-prompt__copy:hover{background:var(--cs-grad);color:#fff;border-color:transparent;box-shadow:0 8px 22px #7c3aed4d;transform:translateY(-1px)}.cs-prompt__copy--done{background:var(--cs-grad);border-color:transparent;color:#fff}.cs-prompt__copilot{display:flex;align-items:center;justify-content:center;gap:.4rem;width:100%;padding:.62rem;border-radius:13px;background:var(--cs-grad-soft);border:1.5px solid var(--cs-border);color:var(--cs-ink);font-family:var(--cs-font-body);font-size:.76rem;font-weight:800;text-decoration:none;transition:all .3s var(--cs-ease)}.cs-prompt__copilot:hover{border-color:var(--cs-brand);color:var(--cs-brand);transform:translateY(-1px);box-shadow:0 8px 22px #7c3aed24}.cs-contrast{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-top:1rem}.cs-contrast__card{padding:.7rem .5rem;border-radius:16px;background:var(--cs-surface-2);border:1px solid var(--cs-border);text-align:center;transition:transform .3s var(--cs-ease),border-color .25s,box-shadow .25s}.cs-contrast__card:hover{transform:translateY(-3px);border-color:var(--cs-brand);box-shadow:0 10px 24px #7c3aed1f}.cs-contrast__pair{display:flex;gap:4px;justify-content:center;margin-bottom:.45rem}.cs-contrast__dot{width:15px;height:15px;border-radius:5px;border:2px solid var(--cs-surface);box-shadow:0 1px 4px #1a1b2633;transition:transform .3s var(--cs-ease)}.cs-contrast__card:hover .cs-contrast__dot{transform:translateY(-2px)}.cs-contrast__grade{font-family:var(--cs-font-head);font-weight:800;font-size:.9rem;line-height:1.1}.cs-contrast__ratio{font-family:var(--cs-font-mono);font-size:.56rem;color:var(--cs-muted);margin-top:.1rem}.cs-contrast__label{font-size:.56rem;color:var(--cs-muted);margin-top:.2rem;font-weight:600}.cs-meter{height:4px;margin-top:.4rem;border-radius:99px;background:var(--cs-surface-3);overflow:hidden}.cs-meter__fill{height:100%;border-radius:99px;transform-origin:left;animation:csMeter .9s var(--cs-ease) both}@keyframes csMeter{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.cs-counter{display:flex;align-items:center;justify-content:center;gap:.45rem;margin-top:.85rem;font-size:.66rem;color:var(--cs-muted);font-weight:600}.cs-counter__num{display:inline-block;min-width:2ch;font-family:var(--cs-font-mono);font-weight:700;color:var(--cs-brand);animation:csPop .35s var(--cs-ease)}.cs-adjust{display:flex;flex-direction:column;gap:.5rem}.cs-adjust__row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.cs-adjust__label{flex:1;min-width:90px;font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--cs-muted)}.cs-adjust__ctrl{display:flex;gap:.35rem}.cs-mini-icon-btn{width:27px;height:27px;border-radius:9px;border:1.5px solid var(--cs-border-2);background:var(--cs-surface);color:var(--cs-ink);font-family:var(--cs-font-body);font-size:.9rem;font-weight:800;line-height:1;display:grid;place-items:center;cursor:pointer;transition:all .22s var(--cs-ease)}.cs-mini-icon-btn:hover{border-color:var(--cs-brand);color:var(--cs-brand);transform:translateY(-1px);box-shadow:0 5px 12px #7c3aed29}.cs-history__rail{display:flex;gap:.45rem;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}.cs-history__rail::-webkit-scrollbar{display:none}.cs-hist{flex-shrink:0;padding:3px;border-radius:11px;border:1.5px solid var(--cs-border);background:var(--cs-surface-2);cursor:pointer;transition:all .25s var(--cs-ease)}.cs-hist:hover{transform:translateY(-2px);border-color:var(--cs-brand);box-shadow:0 6px 14px #7c3aed24}.cs-hist--active{border-color:var(--cs-brand);box-shadow:0 0 0 2px var(--cs-brand),0 6px 16px #7c3aed33}.cs-hist__strip{display:flex;overflow:hidden;border-radius:8px;height:32px;width:88px}.cs-hist__sw{flex:1;height:100%}.cs-export{display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem}.cs-export__btn{position:relative;display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:.6rem .3rem;border-radius:13px;border:1.5px solid var(--cs-border);background:var(--cs-surface-2);color:var(--cs-muted);cursor:pointer;font-family:var(--cs-font-body);font-size:.62rem;font-weight:800;letter-spacing:.02em;overflow:hidden;transition:all .25s var(--cs-ease)}.cs-export__btn svg{width:15px;height:15px;color:var(--cs-brand)}.cs-export__btn:hover{border-color:var(--cs-brand);color:var(--cs-brand);transform:translateY(-2px);box-shadow:0 8px 18px #7c3aed24}.cs-export__btn--done{border-color:transparent;background:var(--cs-grad);color:#fff;box-shadow:var(--cs-glow)}.cs-export__btn--done svg{color:#fff}.cs-library-link{display:flex;align-items:center;justify-content:center;gap:.45rem;margin-top:.85rem;padding:.55rem .9rem;border-radius:13px;border:1.5px dashed var(--cs-border-2);background:var(--cs-surface-2);color:var(--cs-muted);font-family:var(--cs-font-body);font-size:.72rem;font-weight:800;text-decoration:none;transition:all .25s var(--cs-ease)}.cs-library-link svg{color:var(--cs-brand);flex-shrink:0}.cs-library-link:hover{border-color:var(--cs-brand);border-style:solid;color:var(--cs-brand);background:var(--cs-grad-soft);transform:translateY(-1px);box-shadow:0 8px 20px #7c3aed24}.cs-swatch__hex{animation:csPop .35s var(--cs-ease)}.cs-preview-col{position:sticky;top:84px}.cs-preview__panel{z-index:1;border-radius:24px;border:1px solid var(--cs-border);background:var(--cs-surface);box-shadow:0 14px 44px #1a1b2614;overflow:hidden;padding:1.15rem 1.2rem}.cs-preview__panel .cs-ambient{border-radius:24px}.cs-about{position:relative;z-index:1;margin-top:1.25rem;padding:1.1rem 1.2rem;border-radius:20px;border:1px solid var(--cs-border);background:var(--cs-surface);box-shadow:0 8px 28px #1a1b260d}.cs-about__head{display:flex;align-items:center;gap:.5rem;font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--cs-muted);margin-bottom:.5rem}.cs-about__head .cs-mood-mini{font-size:.9rem}.cs-about p{margin:0;font-size:.76rem;color:var(--cs-muted);line-height:1.65}.pw-root{width:100%;margin:0 auto;font-family:var(--cs-font-body);min-width:0}.pw-bar{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.65rem}.pw-tpl-label{display:inline-flex;align-items:center;gap:.45rem;font-size:.78rem;font-weight:800;color:var(--cs-ink);letter-spacing:-.01em}.pw-tpl-icon{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:var(--cs-grad);color:#fff;box-shadow:0 4px 12px #7c3aed52}.pw-tpl-cat{font-size:.56rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--cs-muted);background:var(--cs-surface-2);border:1px solid var(--cs-border);padding:.12rem .5rem;border-radius:99px}.pw-bar__actions{display:flex;gap:.5rem;flex-shrink:0}.pw-btn{display:inline-flex;align-items:center;gap:.35rem;padding:.42rem .85rem;border-radius:12px;border:1.5px solid var(--cs-border);background:var(--cs-surface-2);color:var(--cs-ink);font-family:var(--cs-font-body);font-size:.7rem;font-weight:800;cursor:pointer;white-space:nowrap;transition:all .25s var(--cs-ease)}.pw-btn:hover{border-color:var(--cs-brand);color:var(--cs-brand);transform:translateY(-1px);box-shadow:0 6px 16px #7c3aed24}.pw-frame{position:relative;border-radius:20px;padding:1.5px;background:linear-gradient(160deg,var(--cs-border-2),transparent 30%,transparent 70%,var(--cs-border-2));box-shadow:0 18px 48px #1a1b261f}.pw-frame__inner{border-radius:19px;overflow:hidden;background:var(--cs-surface-2)}.pw-chrome{display:flex;align-items:center;gap:.6rem;padding:.55rem .8rem;background:var(--cs-surface);border-bottom:1px solid var(--cs-border)}.pw-chrome__lights{display:flex;gap:5px;flex-shrink:0}.pw-chrome__lights i{width:9px;height:9px;border-radius:50%;display:block}.pw-chrome__lights i:nth-child(1){background:#ff5f57}.pw-chrome__lights i:nth-child(2){background:#febc2e}.pw-chrome__lights i:nth-child(3){background:#28c840}.pw-addr{flex:1;min-width:0;background:var(--cs-surface-2);border:1px solid var(--cs-border);border-radius:8px;padding:.22rem .7rem;font-family:var(--cs-font-mono);font-size:.6rem;color:var(--cs-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pw-full{display:inline-flex;align-items:center;gap:.3rem;background:none;border:none;color:var(--cs-muted);font-family:var(--cs-font-body);font-size:.6rem;font-weight:800;cursor:pointer;padding:.25rem .5rem;border-radius:7px;flex-shrink:0;transition:all .2s}.pw-full:hover{color:var(--cs-brand);background:var(--cs-surface-3)}.pw-carousel{position:relative;display:flex;align-items:stretch;gap:.5rem;min-width:0}.pw-carousel .pw-frame{flex:1;min-width:0}.pw-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:34px;height:34px;border-radius:50%;border:1px solid var(--cs-border-2);background:var(--cs-surface);color:var(--cs-ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 18px #1a1b2629;transition:transform .25s var(--cs-ease),background .2s,color .2s,box-shadow .25s;will-change:transform}.pw-arrow:hover{background:var(--cs-grad);color:#fff;border-color:transparent;transform:translateY(-50%) scale(1.08);box-shadow:0 8px 22px #7c3aed5c}.pw-arrow--prev{left:10px}.pw-arrow--next{right:10px}.pw-track{display:flex;width:100%;height:100%;transition:transform .6s var(--cs-ease);will-change:transform}.pw-slide{flex:0 0 100%;width:100%;height:100%;position:relative;overflow:hidden}.pw-viewport{position:relative;height:360px;overflow:hidden}.pw-dots{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:.7rem}.pw-dot{width:7px;height:7px;padding:0;border-radius:50%;border:1px solid var(--cs-border-2);background:var(--cs-surface-3);cursor:pointer;transition:all .3s var(--cs-ease)}.pw-dot:hover{transform:scale(1.25);border-color:var(--cs-brand)}.pw-dot--active{width:22px;border-radius:99px;background:var(--cs-grad);border-color:transparent;box-shadow:0 2px 8px #7c3aed66}.pw-dots__sep{width:1px;height:14px;background:var(--cs-border);margin:0 4px}.pw-autoplay{width:24px;height:24px;border-radius:8px;border:1px solid var(--cs-border);background:var(--cs-surface-2);color:var(--cs-muted);display:grid;place-items:center;cursor:pointer;transition:all .2s}.pw-autoplay:hover{color:var(--cs-brand);border-color:var(--cs-brand)}.pw-root--bare{display:none}.pw-fs{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:clamp(.75rem,3vw,2.5rem);background:#07080f9e;font-family:var(--cs-font-body);animation:csFadeIn .25s ease-out}@keyframes csFadeIn{0%{opacity:0}to{opacity:1}}.pw-fs-card{width:100%;max-width:1200px;height:min(88vh,960px);border-radius:30px;padding:1.5px;background:linear-gradient(160deg,rgba(124,58,237,.55),transparent 30%,transparent 70%,rgba(244,114,182,.4));box-shadow:0 44px 130px #04050a99;animation:csFsCardIn .5s var(--cs-ease)}@keyframes csFsCardIn{0%{opacity:0;transform:translateY(30px) scale(.955)}to{opacity:1;transform:translateY(0) scale(1)}}.pw-fs-card__inner{flex:1;min-height:0;height:100%;display:flex;flex-direction:column;border-radius:29px;background:var(--cs-surface);overflow:hidden}.pw-fs-card__bar{display:flex;align-items:center;gap:.8rem;padding:.8rem 1.1rem;background:var(--cs-surface-2);border-bottom:1px solid var(--cs-border);flex-shrink:0}.pw-fs-card__addr{flex:1;min-width:0;text-align:center}.pw-fs__actions{display:flex;gap:.5rem;flex-shrink:0}.pw-fs-kbd{font-size:9px;padding:1px 5px;border-radius:4px;background:var(--cs-surface);border:1px solid var(--cs-border-2);font-family:var(--cs-font-mono)}.pw-fs-card__body{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center}.pw-fs-stage{flex:1;align-self:stretch;min-width:0;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:clamp(.75rem,2vw,1.75rem) clamp(1rem,3vw,2.75rem)}.pw-fs-stage__zoom{width:640px;height:360px;flex-shrink:0;border-radius:14px;overflow:hidden;box-shadow:0 26px 80px #04050a73,0 0 0 1px #ffffff0f;background:#fff}.pw-fs-stage__slide{width:100%;height:100%;position:relative;animation:csFsSlideIn .45s var(--cs-ease)}.pw-fs-monitor{width:100%;height:100%;display:flex;flex-direction:column;background:#fff;overflow:hidden}.pw-fs-monitor__chrome{display:flex;align-items:center;gap:10px;padding:7px 12px;background:linear-gradient(180deg,#f8f8fb,#eceef3);border-bottom:1px solid rgba(0,0,0,.08);flex-shrink:0}.pw-fs-monitor__lights{display:flex;gap:5px;flex-shrink:0}.pw-fs-monitor__lights i{width:9px;height:9px;border-radius:50%;display:block}.pw-fs-monitor__lights i:nth-child(1){background:#ff5f57}.pw-fs-monitor__lights i:nth-child(2){background:#febc2e}.pw-fs-monitor__lights i:nth-child(3){background:#28c840}.pw-fs-monitor__tab{flex:0 1 auto;max-width:220px;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:6px;padding:3px 12px;font-size:10px;font-weight:700;color:#2b2b33;font-family:var(--cs-font-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pw-fs-monitor__url{flex:1;min-width:0;background:#e8eaef;border-radius:6px;padding:3px 10px;font-size:9px;font-family:var(--cs-font-mono);color:#6b6b76;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pw-fs-monitor__lock{color:#9a9aa6;display:grid;place-items:center;flex-shrink:0}.pw-fs-monitor__screen{flex:1;min-height:0;position:relative;overflow:hidden;background:#fff}@keyframes csFsSlideIn{0%{opacity:0;transform:scale(.982)}to{opacity:1;transform:scale(1)}}.pw-fs-card__foot{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.6rem 1rem;border-top:1px solid var(--cs-border);background:var(--cs-surface-2);flex-shrink:0}.pw-fs-card__foot .pw-arrow{position:static;transform:none;width:38px;height:38px;flex-shrink:0}.pw-fs-card__dots{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;flex-wrap:wrap}.pw-fs-card__count{font-family:var(--cs-font-mono);font-size:.62rem;letter-spacing:.1em;color:var(--cs-muted);margin-left:.8rem;white-space:nowrap}@media (max-width: 640px){.pw-fs-card{height:94vh;border-radius:22px}.pw-fs-card__inner{border-radius:21px}.pw-fs-card__addr{display:none}.pw-fs-card__bar .pw-btn{padding:.38rem .6rem}.pw-fs-card__bar .pw-btn svg{display:none}}.cs-modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:1.5rem;background:#0a0a128c;animation:csFadeIn .25s ease-out}.cs-modal__panel{width:100%;max-width:340px;padding:1.4rem;border-radius:24px;border:1px solid var(--cs-border-2);background:var(--cs-surface);box-shadow:0 30px 80px #0a0a1259;animation:csModalIn .4s var(--cs-ease)}@keyframes csModalIn{0%{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.cs-modal__strip{display:flex;border-radius:12px;overflow:hidden;height:44px;margin-bottom:1.1rem;border:1px solid var(--cs-border)}.cs-modal__strip div{flex:1;transition:flex .4s var(--cs-ease)}.cs-modal__panel:hover .cs-modal__strip div{flex:1.12}.cs-modal__label{font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--cs-muted);margin-bottom:.45rem}.cs-modal__input{width:100%;padding:.65rem .8rem;border:1.5px solid var(--cs-border-2);border-radius:12px;font-family:var(--cs-font-body);font-size:.9rem;color:var(--cs-ink);background:var(--cs-surface-2);margin-bottom:.9rem;outline:none;box-sizing:border-box;transition:border-color .2s,box-shadow .2s}.cs-modal__input:focus{border-color:var(--cs-brand);box-shadow:0 0 0 4px #7c3aed24}.cs-modal__actions{display:flex;gap:.5rem}.cs-magnetic{will-change:transform}.cs-grid{position:relative;z-index:1}.cs-grid>*{min-width:0}.cs-preview__panel{overflow:hidden}@media (max-width: 900px){.cs-grid{grid-template-columns:1fr!important;gap:1.5rem!important}.cs-preview-col{position:static}.cs-moods{grid-template-columns:repeat(4,1fr)}}@media (max-width: 640px){.cs-moods,.cs-pills{grid-template-columns:repeat(2,1fr)}.cs-contrast{grid-template-columns:1fr}.cs-export{grid-template-columns:repeat(2,1fr)}.cs-swatch{height:150px}.cs-swatch__actions{opacity:1}.pw-viewport{height:340px}}@media (prefers-reduced-motion: reduce){.chroma-studio *,.pw-root *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.cs-orb{animation:none}.cs-spotlight{display:none}}html.live-theme,html.live-theme body{background:var(--surface)}html.live-theme *,html.live-theme *:before,html.live-theme *:after{transition:background-color .22s ease,color .22s ease,border-color .22s ease,fill .22s ease,stroke .22s ease,box-shadow .22s ease}html.live-theme .chroma-studio{--cs-accent: var(--cs-live-secondary);--cs-brand-2: var(--cs-live-secondary);--cs-grad: linear-gradient(120deg, var(--cs-live-primary) 0%, var(--cs-live-secondary) 55%, var(--cs-live-primary) 100%);--cs-grad-soft: linear-gradient(120deg, var(--cs-live-soft-1), var(--cs-live-soft-2));--cs-glow: 0 12px 40px var(--cs-live-glow)}html.live-theme .cs-panel:hover{border-color:color-mix(in srgb,var(--cs-live-primary) 40%,var(--cs-border))}.cs-wash{position:fixed;inset:0;z-index:70;pointer-events:none;overflow:hidden;background:linear-gradient(100deg,transparent 38%,var(--cs-live-primary) 50%,var(--cs-live-secondary) 56%,transparent 66%);opacity:0;will-change:transform,opacity;animation:csWash .75s var(--cs-ease) forwards}@keyframes csWash{0%{transform:translate3d(-110%,0,0) skew(-10deg);opacity:0}10%{opacity:.3}50%{opacity:.16}to{transform:translate3d(110%,0,0) skew(-10deg);opacity:0}}.cs-themeframe{position:fixed;top:0;left:0;right:0;height:3px;z-index:85;pointer-events:none;background:linear-gradient(90deg,var(--cs-live-primary),var(--cs-live-secondary),var(--cs-live-primary));box-shadow:0 2px 18px var(--cs-live-glow)}.cs-themeframe:after{content:"";position:absolute;top:3px;left:0;right:0;height:12px;background:linear-gradient(180deg,var(--cs-live-soft-1),transparent)}.cs-livechip{position:fixed;right:1.25rem;bottom:1.25rem;z-index:80;display:inline-flex;align-items:center;gap:.6rem;padding:.45rem .7rem .45rem .5rem;border:1px solid var(--cs-border);border-radius:999px;background:var(--surface);box-shadow:0 10px 30px #00000040;color:var(--ink);font-family:var(--cs-font-body);cursor:pointer;-webkit-tap-highlight-color:transparent;animation:csChipIn .5s var(--cs-ease) backwards;transition:transform .2s var(--cs-ease),border-color .2s ease}.cs-livechip:hover{transform:translateY(-3px);border-color:var(--cs-live-primary)}.cs-livechip__dots{display:inline-flex;overflow:hidden;border-radius:999px;border:1px solid var(--cs-border-2)}.cs-livechip__dots i{width:14px;height:18px;display:block}.cs-livechip__label{display:flex;flex-direction:column;line-height:1.15;text-align:left}.cs-livechip__label em{font-style:normal;font-size:.56rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted)}.cs-livechip__label b{font-size:.78rem;font-weight:700;color:var(--ink);max-width:14rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cs-livechip__off{color:var(--ink-muted);font-size:.75rem;font-weight:700;width:1.4rem;height:1.4rem;display:grid;place-items:center;border-radius:50%;transition:color .2s ease,background .2s ease}.cs-livechip:hover .cs-livechip__off{color:var(--ink);background:var(--border-strong)}@keyframes csChipIn{0%{transform:translateY(12px) scale(.95);opacity:0}}.cs-livetheme{display:inline-flex;align-items:center;gap:.45rem;margin-left:auto;padding:.32rem .6rem;border:1px solid var(--cs-border);border-radius:999px;background:var(--cs-surface-2);color:var(--ink-muted);font-size:.72rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .25s ease,border-color .25s ease,color .25s ease}.cs-livetheme:hover{border-color:var(--cs-brand);color:var(--ink)}.cs-livetheme--on{border-color:var(--cs-brand);background:var(--brand-light);color:var(--brand-dark)}.cs-livetheme__switch{width:26px;height:15px;border-radius:999px;background:var(--border-strong);position:relative;transition:background .3s ease}.cs-livetheme--on .cs-livetheme__switch{background:var(--cs-brand)}.cs-livetheme__knob{position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;background:#fff;transition:transform .3s cubic-bezier(.2,2,.35,1)}.cs-livetheme--on .cs-livetheme__knob{transform:translate(11px)}.cs-aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}.cs-aurora__blob{position:absolute;border-radius:50%;filter:blur(96px);opacity:.32;will-change:transform;animation:csAuroraDrift 24s ease-in-out infinite alternate}.cs-aurora__blob--1{width:44vw;height:44vw;top:-14vw;left:-10vw;background:color-mix(in srgb,var(--cs-brand, var(--brand)) 11%,transparent)}.cs-aurora__blob--2{width:38vw;height:38vw;top:34vh;right:-12vw;background:color-mix(in srgb,var(--cs-accent) 10%,transparent);animation-delay:-8s;animation-duration:28s}.cs-aurora__blob--3{width:32vw;height:32vw;bottom:-14vw;left:24vw;background:color-mix(in srgb,var(--cs-brand-2, var(--cs-accent)) 8%,transparent);animation-delay:-16s;animation-duration:32s}@keyframes csAuroraDrift{0%{transform:translateZ(0) scale(1)}50%{transform:translate3d(7vw,5vh,0) scale(1.14)}to{transform:translate3d(-5vw,-6vh,0) scale(.92)}}@media (prefers-reduced-motion: reduce){html.live-theme *,html.live-theme *:before,html.live-theme *:after{transition-duration:.01ms!important}.cs-aurora,.cs-wash{display:none}}.cs-splash{position:absolute;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1rem;background:var(--cs-surface);transition:opacity .5s var(--cs-ease),visibility .5s}.cs-splash--done{opacity:0;visibility:hidden;pointer-events:none}.cs-splash-word{font-family:var(--cs-font-head);font-weight:800;font-size:1.35rem;letter-spacing:-.02em;color:var(--cs-ink)}.cs-splash-bars{display:flex;gap:5px}.cs-splash-bars span{width:6px;height:26px;border-radius:3px;background:var(--c, var(--cs-brand));animation:csSplashBar .9s var(--cs-ease) infinite alternate;animation-delay:calc(var(--i, 0) * .08s)}@keyframes csSplashBar{0%{transform:scaleY(.35);opacity:.5}to{transform:scaleY(1);opacity:1}}.cs-studio-header{position:relative;background:var(--cs-surface);border-bottom:1px solid var(--cs-border);box-shadow:0 10px 30px #1a1b260d}.cs-studio-header>.cs-noise{opacity:.03;z-index:0}.cs-brandmark{display:flex;align-items:center;gap:.55rem;font-family:var(--cs-font-head);font-weight:800;font-size:.9rem;letter-spacing:-.01em;color:var(--cs-ink);padding-right:.9rem;border-right:1px solid var(--cs-border)}.cs-brandmark-swatch{width:16px;height:16px;border-radius:5px;background:var(--cs-grad);box-shadow:0 0 0 3px #7c3aed1f}.cs-live-dot{animation:csLivePulse 1.8s ease-in-out infinite}@keyframes csLivePulse{0%,to{box-shadow:0 0 #7f77dd73}50%{box-shadow:0 0 0 5px #7f77dd00}}.cs-col-in{animation:csColIn .55s var(--cs-ease) backwards}@keyframes csColIn{0%{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}.cs-col--locked{box-shadow:inset 0 3px 0 0 var(--cs-brand),inset 0 0 0 1px #7f77dd47}.cs-wcag{display:inline-flex;align-items:center;gap:.4rem;font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:.42rem .75rem;border-radius:99px;border:1px solid var(--cs-border-2);background:var(--cs-surface);color:var(--cs-muted);white-space:nowrap}.cs-wcag-dot{width:7px;height:7px;border-radius:50%}.cs-wcag--aaa .cs-wcag-dot{background:#10b981}.cs-wcag--aaa strong{color:#10b981}.cs-wcag--aa .cs-wcag-dot{background:#f59e0b}.cs-wcag--aa strong{color:#d97706}.cs-wcag--fail .cs-wcag-dot{background:#ef4444}.cs-wcag--fail strong{color:#dc2626}.cs-wcag-ratio{font-family:var(--cs-font-mono);font-weight:500;letter-spacing:0}.cs-toast{animation:csToastIn .45s var(--cs-ease) both}@keyframes csToastIn{0%{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.cs-modal-in{animation:csModalIn .4s var(--cs-ease) both}@media (max-width: 900px){.cs-wcag,.cs-brandmark{display:none}}@media (max-width: 640px){.cs-splash-word{font-size:1.1rem}}.cs-toolbar{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;padding:.55rem 1rem}.cs-toolbar--secondary{border-top:1px solid var(--cs-border);background:color-mix(in srgb,var(--cs-surface-2) 55%,transparent)}.cs-toolbar-spacer{flex:1 1 auto;min-width:.5rem}.cs-tool-btn{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .8rem;border-radius:12px;background:var(--cs-surface);border:1px solid var(--cs-border);font-size:.75rem;font-weight:600;color:var(--cs-ink);cursor:pointer;white-space:nowrap;transition:border-color .2s var(--cs-ease),transform .2s var(--cs-ease),background .2s}.cs-tool-btn:hover{border-color:var(--cs-brand);transform:translateY(-1px)}.cs-tool-btn--accent{border-color:color-mix(in srgb,var(--cs-brand) 45%,transparent);color:var(--cs-brand);background:color-mix(in srgb,var(--cs-brand) 8%,var(--cs-surface))}.cs-tool-btn--accent:hover{background:color-mix(in srgb,var(--cs-brand) 16%,var(--cs-surface))}.cs-tool-btn--primary{background:var(--cs-brand);border-color:var(--cs-brand);color:#fff}.cs-tool-btn--primary:hover{filter:brightness(1.06);border-color:var(--cs-brand)}.cs-wcag--clickable{cursor:pointer;transition:transform .2s var(--cs-ease),border-color .2s}.cs-wcag--clickable:hover{transform:translateY(-1px);border-color:var(--cs-brand)}.cs-matrix{border-collapse:collapse;width:100%;font-size:.7rem}.cs-matrix th,.cs-matrix td{padding:.3rem;text-align:center;border:1px solid var(--cs-border);min-width:66px}.cs-matrix th{background:var(--cs-surface-2);font-weight:600;color:var(--cs-muted);white-space:nowrap}.cs-matrix-corner{font-size:.6rem;text-transform:uppercase;letter-spacing:.08em}.cs-matrix-swatch{display:inline-block;width:14px;height:14px;border-radius:4px;border:1px solid var(--cs-border-2);vertical-align:middle;margin-right:.3rem}.cs-matrix-hex{font-family:var(--cs-font-mono);font-size:.62rem;color:var(--cs-muted)}.cs-matrix-empty{color:var(--cs-muted)}.cs-matrix-cell{display:flex;flex-direction:column;align-items:center;gap:.1rem;width:100%;padding:.35rem .4rem;border-radius:8px;border:1px solid transparent;cursor:pointer;background:transparent;transition:transform .15s var(--cs-ease),border-color .15s}.cs-matrix-cell:hover{transform:scale(1.1);border-color:var(--cs-border-2)}.cs-matrix-cell strong{font-family:var(--cs-font-mono);font-size:.74rem;line-height:1}.cs-matrix-cell span{font-size:.56rem;font-weight:800;letter-spacing:.08em;line-height:1}.cs-matrix-cell--aaa{color:#10b981;background:color-mix(in srgb,#10B981 9%,transparent)}.cs-matrix-cell--aa{color:#d97706;background:color-mix(in srgb,#F59E0B 9%,transparent)}.cs-matrix-cell--fail{color:#dc2626;background:color-mix(in srgb,#EF4444 7%,transparent)}.cs-legend{display:inline-block;width:9px;height:9px;border-radius:3px}.cs-legend--aaa{background:#10b981}.cs-legend--aa{background:#f59e0b}.cs-legend--fail{background:#ef4444}