.cs-root{font-family:Pretendard,'Pretendard Variable','Ditto Adopted Pretendard',sans-serif;color:var(--cs-text-default);background:var(--cs-bg-default);padding:32px;border-radius:24px;line-height:1.6}
.cs-root *{box-sizing:border-box}.cs-root h2,.cs-root h3{color:var(--cs-text-strong);border:0}.cs-root h2{font-size:28px;margin:0 0 12px;letter-spacing:-.025em}.cs-root h3{font-size:18px;margin:24px 0 16px}.cs-root p{color:var(--cs-text-default)}.cs-root figure{margin:0;min-width:0}.cs-root figcaption{font-size:14px;margin-top:12px;font-weight:600;line-height:1.5}.cs-root small{display:block;font-size:11px;color:var(--cs-text-subtle);font-weight:400;margin-top:6px}.cs-root button{font-family:inherit;cursor:pointer}.cs-root button:disabled{cursor:not-allowed}.cs-intro{padding:20px 0 40px;max-width:700px}.cs-eyebrow{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--cs-text-brand)}.cs-intro h2{font-size:clamp(32px,4vw,48px);line-height:1.2;margin:16px 0 24px}.cs-intro p{font-size:18px}.cs-link{font-size:14px;color:var(--cs-text-brand)}.cs-section{margin:44px 0 0;padding-top:8px}.cs-lead{font-size:15px;max-width:760px;margin:0 0 24px}.cs-note,.cs-status{font-size:12px!important;color:var(--cs-text-subtle)!important;margin:18px 0 0}.cs-status{min-height:2em}.cs-ramp{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:8px;overflow-x:auto;padding-bottom:4px}.cs-ramp figure{min-width:58px}.cs-ramp figure>div{height:64px;border-radius:10px}.cs-ramp small{font-size:9px;white-space:nowrap}.cs-ramp figcaption{font-size:12px}.cs-mode{margin-bottom:20px}.cs-state-scroll{overflow-x:auto;padding:6px}.cs-state-table{width:100%;min-width:720px;border-collapse:separate!important;border-spacing:10px 16px!important;font-size:12px!important}.cs-state-table td,.cs-state-table th{border:0!important;padding:0!important;text-align:left!important}.cs-state-table th{font-weight:500;white-space:nowrap;color:var(--cs-text-subtle)}
.cs-action{--ab:var(--cs-action-primary-bg);--ah:var(--cs-action-primary-hover);--ap:var(--cs-action-primary-pressed);--af:var(--cs-action-primary-fg);display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;border:0;border-radius:12px;padding:12px 20px;background:var(--ab);color:var(--af);font-size:14px;font-weight:700;line-height:20px;white-space:nowrap;transition:transform 360ms cubic-bezier(.22,1,.36,1),background-color 110ms}
.cs-state-table .cs-action{width:100%;min-width:100px;padding:12px}
.cs-action[data-role=secondary]{--ab:var(--cs-action-secondary-bg);--ah:var(--cs-action-secondary-hover);--ap:var(--cs-action-secondary-pressed);--af:var(--cs-action-secondary-fg)}.cs-action[data-role=neutral]{--ab:var(--cs-action-neutral-bg);--ah:var(--cs-action-neutral-hover);--ap:var(--cs-action-neutral-pressed);--af:var(--cs-action-neutral-fg)}.cs-action[data-role=ghost]{--ab:var(--cs-action-ghost-bg);--ah:var(--cs-action-ghost-hover);--ap:var(--cs-action-ghost-pressed);--af:var(--cs-action-ghost-fg)}.cs-action[data-role=danger]{--ab:var(--cs-action-danger-bg);--ah:var(--cs-action-danger-hover);--ap:var(--cs-action-danger-pressed);--af:var(--cs-action-danger-fg)}
.cs-action:hover:not(:disabled),.cs-action[data-state=hover]{background:var(--ah)}.cs-action:active:not(:disabled),.cs-action[data-state=pressed]{background:var(--ap)}.cs-action:active:not(:disabled){transform:translateY(.8px) scale(1.006,.97);transition-duration:110ms}.cs-action:disabled{background:var(--cs-action-disabled-bg);color:var(--cs-action-disabled-fg)}
.cs-choice{min-height:44px;border:1px solid var(--cs-border-control);border-radius:12px;padding:10px 16px;background:var(--cs-unselected-bg);color:var(--cs-unselected-fg);font-size:14px;font-weight:600}.cs-choice[aria-pressed=true]{border:2px solid var(--cs-selection-border);padding:9px 15px;background:var(--cs-selection-bg);color:var(--cs-selection-fg)}.cs-root button:focus-visible,.cs-root .is-focus{outline:2px solid var(--cs-border-focus);outline-offset:2px}.cs-root button:focus:not(:focus-visible):not(.is-focus){outline:none}.cs-focus-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.cs-focus-grid>div{padding:24px;background:var(--cs-bg-subtle);border-radius:20px}.cs-focus-grid h3{margin:0 0 20px}.cs-focus-grid p{font-size:13px;margin-bottom:0}.cs-focus-grid .cs-choice{max-width:100%;white-space:normal}.cs-event-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:16px}.cs-event{aspect-ratio:390/844;border-radius:12px}.cs-event-grid figcaption{font-size:12px}
.cs-fluid{position:relative;overflow:hidden;isolation:isolate;aspect-ratio:1;border-radius:24%;background:#ebd5fc}
.cs-fluid svg,.cs-app-icon>svg{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.cs-fluid::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 18px #ffffff29}
.cs-fluid-demo{display:grid;grid-template-columns:2.2fr 1fr .73fr;gap:24px;align-items:stretch;margin:28px 0 24px}
.cs-fluid-demo .cs-fluid{aspect-ratio:auto;min-height:240px;width:100%;border-radius:36px}
.cs-fluid .cs-fluid-field{transform-box:fill-box;transform-origin:center;animation:cs-fluid-drift 18s ease-in-out infinite}
.cs-root.is-paused .cs-fluid-field{animation-play-state:paused}
@keyframes cs-fluid-drift{0%,100%{transform:translate(0,0) scale(1)}33.333%{transform:translate(var(--move-x-1),var(--move-y-1)) scale(var(--scale-x-1),var(--scale-y-1))}66.667%{transform:translate(var(--move-x-2),var(--move-y-2)) scale(var(--scale-x-2),var(--scale-y-2))}}
.cs-fluid-recipe{display:flex;flex-wrap:wrap;gap:6px 10px;margin-top:8px;font-size:10px;font-weight:400}
.cs-fluid-recipe>span{display:inline-flex;align-items:center;gap:4px}.cs-fluid-recipe i{width:12px;height:12px;border-radius:50%;display:block}
.cs-extension>summary{cursor:pointer;font-weight:600;padding:16px 0}.cs-extension[open]>summary{margin-bottom:24px}
.cs-palette-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 24px}.cs-icon-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}.cs-app-icon{position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:23%;overflow:hidden;background:#ebd5fc}.cs-mark{display:block;flex:none;width:27px;height:27px;background:currentColor;mask:url('./color-assets/ditto-mark.svg') center/contain no-repeat;-webkit-mask:url('./color-assets/ditto-mark.svg') center/contain no-repeat}.cs-app-icon .cs-mark{position:relative;z-index:1;width:var(--icon-logo-width,51.6667%);height:var(--icon-logo-height,50.2315%);background:#fff}.cs-app-icon.is-glass{box-shadow:none}.cs-app-icon.is-glass .cs-mark{background:linear-gradient(180deg,#fffffff2,#ffffffb8);filter:drop-shadow(0 1px 0 #fff) drop-shadow(0 2.3px 2.3px #42176326)}.cs-widget-palettes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:30px 20px}.cs-widget-graphic{aspect-ratio:1;border-radius:24px;padding:20px;display:flex;align-items:flex-end;box-shadow:inset 0 1px 4px #fff9}.cs-widget-graphic strong{font-size:clamp(15px,1.4vw,22px);line-height:1.25;color:#fff}.cs-key{display:flex;align-items:center;gap:8px;font-size:12px;margin-top:10px}.cs-key i{width:16px;height:16px;border-radius:4px}.cs-ditto-columns{display:grid;grid-template-columns:1fr 1fr;gap:32px}.cs-ditto-row{display:flex;align-items:center;gap:24px;margin:20px 0}.cs-ditto-row>span{width:64px;flex:none;font-size:13px}.cs-ditto{height:60px;min-height:60px;width:370px;max-width:100%;font-size:17px;line-height:24px}.cs-ditto .cs-mark{width:27px;height:26.25px}.cs-ditto span:not(.cs-mark){overflow:hidden;text-overflow:ellipsis}
@media(max-width:1100px){.cs-icon-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.cs-app-icon{max-width:180px}.cs-widget-palettes{grid-template-columns:repeat(3,minmax(0,1fr))}.cs-focus-grid{grid-template-columns:1fr}.cs-ditto-columns{grid-template-columns:1fr}.cs-fluid-demo .cs-fluid{min-height:180px}}
@media(max-width:650px){.cs-root{padding:24px 16px;border-radius:16px}.cs-root h2{font-size:24px}.cs-intro h2{font-size:36px}.cs-ramp{grid-template-columns:repeat(11,66px)}.cs-event-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 12px}.cs-palette-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}.cs-widget-palettes{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}.cs-widget-graphic{padding:16px;border-radius:20px}.cs-icon-grid{gap:16px}.cs-icon-grid figcaption{font-size:11px}.cs-fluid-demo{gap:12px;grid-template-columns:1.8fr 1fr}.cs-fluid-demo .is-tall{display:none}.cs-fluid-demo .cs-fluid{min-height:170px}.cs-ditto-row{gap:12px}.cs-ditto-row>span{width:50px}.cs-ditto{font-size:15px;padding:12px;gap:8px}}
@media(prefers-reduced-motion:reduce){.cs-fluid .cs-fluid-field{animation:none!important}.cs-action{transition:none}.cs-action:active:not(:disabled){transform:none}}
@media(prefers-reduced-transparency:reduce){.cs-app-icon.is-glass .cs-mark{background:#fff;filter:none}.cs-app-icon.is-glass{box-shadow:none}}

.cs-ditto{position:relative;isolation:isolate;--ditto-shadow:inset 0 0 7px #ffffff61,inset 0 .8px 1.4px #ffffff6b,inset 0 -.8px 2.4px #00000014}
.cs-ditto.is-original{--ditto-shadow:inset 0 -12px 32px rgb(206.31 160.48 232.85 / .25),inset 0 4px 4px #ffffff66}
.cs-ditto-surface{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;pointer-events:none;z-index:-2}
.cs-ditto:not(:disabled){background:#a25ad6;color:#fff}
.cs-ditto:not(:disabled)::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;box-shadow:var(--ditto-shadow)}
.cs-ditto:hover:not(:disabled)::after,.cs-ditto[data-state=hover]:not(:disabled)::after{background:rgb(0 0 0 / .006)}
.cs-ditto:active:not(:disabled)::after,.cs-ditto[data-state=pressed]:not(:disabled)::after{background:rgb(0 0 0 / .012);box-shadow:inset 0 3.2px 6px #00000014,inset 0 1px 1.8px #0000000a,inset 0 -.8px 2px #ffffff21}
.cs-button-palettes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.cs-button-pair{display:flex;gap:12px}.cs-button-pair .cs-ditto:not(.is-icon){width:auto;flex:1;font-size:16px;padding:12px}.cs-widget-graphic strong{text-shadow:0 1px 6px #25163580}.cs-app-icon.is-glass{box-shadow:none}@media(max-width:950px){.cs-button-palettes{grid-template-columns:1fr}}

/* Widget backgrounds · 25 distinct mixes of the existing brand colors. */
.cs-widget-palette-grid,.cs-widget-examples{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:32px 24px}
.cs-widget-tile{aspect-ratio:1;position:relative;overflow:hidden;border-radius:9.722%;container-type:inline-size;isolation:isolate}
.cs-widget-tile>svg{position:absolute;inset:0;display:block;width:100%;height:100%}
.cs-widget-tile::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 2.88px 6.48px #ffffff8c}
.cs-widget-tile .cs-widget-art{position:absolute;left:14.58333%;top:7.98611%;width:70.83333%;height:70.83333%;object-fit:contain;display:block}
.cs-widget-tile>strong{position:absolute;left:6.9444%;right:6.9444%;bottom:6.9444%;font-size:clamp(11px,8.3333cqw,24px);line-height:1.25;font-weight:700;text-align:center;color:var(--widget-title,#2D2435);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-widget-caption{display:block;margin-top:8px;font-size:13px;font-weight:400;color:var(--cs-text-subtle);line-height:1.6}
.cs-widget-stops{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:12px}
.cs-widget-stops i{display:block;height:6px;border-radius:4px}.cs-widget-stops small{font-size:9px;letter-spacing:-.03em;margin-top:6px}
.cs-widget-rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:32px}.cs-widget-rules>div{padding:24px;border-radius:16px;background:var(--cs-bg-subtle)}.cs-widget-rules h3{font-size:17px;margin:0 0 12px}.cs-widget-rules p{font-size:14px;margin:0}
@media(max-width:1100px){.cs-widget-palette-grid,.cs-widget-examples{grid-template-columns:repeat(3,minmax(0,1fr))}.cs-widget-rules{grid-template-columns:1fr}}
@media(max-width:650px){.cs-widget-palette-grid,.cs-widget-examples{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}.cs-widget-stops small{font-size:8px}.cs-widget-stops{gap:4px}}

/* Ditto actions always use a labeled long button. Badges never accept input. */
.cs-hold-control{max-width:100%;width:370px}.cs-hold-control .cs-ditto{width:100%}
.cs-hold-demo{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap}
.cs-hold-help{font-size:13px;line-height:1.6;margin:10px 0 0;color:var(--cs-text-subtle);min-height:21px}
.cs-ditto{overflow:hidden;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:pan-y;transition:transform 360ms cubic-bezier(.22,1,.36,1)}
.cs-ditto:not([data-state=disabled]){background:#a25ad6;color:#fff}
.cs-ditto[data-hold-state=holding],.cs-ditto:active:not(:disabled){transform:translateY(.7px) scaleY(.985);transition-duration:110ms}
.cs-ditto-depth,.cs-ditto-light{position:absolute;inset:0;pointer-events:none;z-index:-1;border-radius:inherit;transform-origin:center;transition:opacity 360ms cubic-bezier(.22,1,.36,1),transform 360ms cubic-bezier(.22,1,.36,1)}
.cs-ditto-depth{background:radial-gradient(ellipse at 50% 50%,rgb(var(--pressure-ink)/1) 0%,rgb(var(--pressure-ink)/.78) 40%,rgb(var(--pressure-ink)/.18) 75%,rgb(var(--pressure-ink)/0) 100%);opacity:var(--pressure,0);transform:translateY(calc(var(--pressure,0)*3px)) scale(calc(1 + var(--pressure,0)*.12),calc(1 - var(--pressure,0)*.16))}
.cs-ditto-light{background:linear-gradient(180deg,#fff9 0%,#ffffff14 22%,#ffffff00 48%,#ffffff00 66%,#ffffff47 100%);opacity:calc(var(--pressure,0)*.7)}
.cs-ditto[data-hold-state=holding] .cs-ditto-depth,.cs-ditto[data-hold-state=holding] .cs-ditto-light{transition-duration:110ms;transition-timing-function:linear}
.cs-ditto[data-hold-state=pending],.cs-ditto[data-hold-state=complete]{opacity:1;cursor:default}
.cs-hold-phases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.cs-hold-phases figure{margin:0}.cs-hold-phases .cs-ditto{width:100%;max-width:370px}
.cs-hold-phases figcaption{font-size:13px;margin-top:10px;color:var(--cs-text-subtle)}
.cs-ditto-badge{position:relative;isolation:isolate;overflow:hidden;display:inline-grid;place-items:center;width:var(--badge-size,32px);height:var(--badge-size,32px);border-radius:26%;flex:none;color:#fff;pointer-events:none;box-shadow:inset 0 1px 2px #ffffff80}
.cs-ditto-badge .cs-mark{width:60%;height:58.3%}
.cs-badge-guide{display:grid;grid-template-columns:200px minmax(0,1fr);gap:32px;align-items:center}
.cs-badge-widget{height:150px;position:relative;border-radius:20px;background:linear-gradient(150deg,#e6d1fa,#fccbef,#c5f1ee);display:flex;align-items:flex-end;padding:20px;color:#2d2435;font-size:15px;font-weight:600}
.cs-badge-widget>.cs-ditto-badge{position:absolute;right:8px;top:8px}
.cs-badge-palette{display:flex;gap:24px;flex-wrap:wrap}.cs-badge-palette figure{margin:0}.cs-badge-palette figcaption{font-size:11px;margin-top:8px}
.cs-ditto-confirm{border:0;border-radius:24px;max-width:420px;width:calc(100% - 32px);padding:28px;font-family:Pretendard,sans-serif;color:#2d2435;box-shadow:0 16px 64px #2d243533}
.cs-ditto-confirm::backdrop{background:#2d243566}.cs-ditto-confirm h2{font-size:22px;margin:0 0 12px}.cs-ditto-confirm p{line-height:1.6;font-size:15px}
.cs-ditto-confirm form{display:flex;gap:12px;margin-top:24px}.cs-ditto-confirm button{min-height:48px;flex:1;border:0;border-radius:12px;padding:12px;background:#f3f0f7;color:#443651;font:inherit;cursor:pointer}.cs-ditto-confirm button[value=confirm]{background:#862fc6;color:white}
@media(prefers-reduced-motion:reduce){.cs-ditto{transition:none!important;transform:none!important}.cs-ditto-depth,.cs-ditto-light{transition:none!important;transform:none!important;opacity:0}.cs-ditto[data-hold-state=holding] .cs-ditto-depth,.cs-ditto[data-hold-state=pending] .cs-ditto-depth{opacity:.18}.cs-ditto[data-hold-state=holding] .cs-ditto-light,.cs-ditto[data-hold-state=pending] .cs-ditto-light{opacity:.08}}
@media(max-width:650px){.cs-hold-phases,.cs-badge-guide{grid-template-columns:1fr}.cs-badge-widget{max-width:200px}.cs-hold-control{width:100%}}