.ds-showcase{--dp-ink: light-dark(#191a1b, #eee);--dp-muted: light-dark(#626567, #b8b9b9);--dp-line: light-dark(#dfdfdc, #414141);width:100%;container:ds-showcase / inline-size;font-family:var(--font-family-body);color:var(--dp-ink)}.ds-showcase *{box-sizing:border-box}.ds-showcase button,.ds-showcase input{font:inherit}.ds-showcase button{cursor:pointer;-webkit-tap-highlight-color:transparent}.ds-showcase [hidden]{display:none!important}.ds-showcase .dp-stage{position:relative;container-type:inline-size;background:#f1f3f6;color:#182330;border-radius:var(--radius-content);min-width:0}.ds-showcase .dp-stage-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);padding:var(--space-6) var(--space-8) 0;position:relative;z-index:2}.ds-showcase .dp-micro{font-family:var(--font-family-data);font-size:11px;font-weight:400;line-height:1.5;letter-spacing:.02em}.ds-showcase .dp-stage-title{font-family:var(--font-family-brand);font-size:42px;line-height:1.05;font-weight:700;letter-spacing:-.035em;margin:var(--space-2) 0 0}.ds-showcase .dp-dot-picker{display:flex;gap:0;padding-top:var(--space-5)}.ds-showcase .dp-dot-picker button{width:var(--tap-size);height:var(--tap-size);border:0;background:transparent;display:grid;place-items:center}.ds-showcase .dp-dot-picker span{display:block;width:18px;height:18px;border-radius:50%;background:var(--dot)}.ds-showcase .dp-dot-picker button[aria-pressed=true] span{box-shadow:0 0 0 4px var(--palette-paper, #edf1f6),0 0 0 5px #182330}.ds-showcase .dp-color{background:var(--palette-paper, #edf1f6);transition:background var(--duration-long) var(--ease)}.ds-showcase .dp-fan{height:350px;position:relative;isolation:isolate}.ds-showcase .dp-fan[aria-hidden=true]{pointer-events:none}.ds-showcase .dp-swatch{--card-angle: calc(var(--angle) * var(--fan-rotation-factor, 1));--card-lift: 0px;--face-angle: var(--card-angle);position:absolute;left:50%;top:54px;width:clamp(62px,15cqw,110px);height:clamp(184px,36cqw,250px);padding:0;border:0;border-radius:5px;background:transparent;color:#17212b;transform-origin:50% 94%;transform:translate(calc(-50% + var(--x) * var(--fan-spread-factor, 1))) translateY(var(--y)) rotate(var(--card-angle));z-index:var(--index)}.ds-showcase .dp-swatch-face{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:var(--swatch);box-shadow:0 1px 2px #15202f18,0 12px 20px -10px #15202f60;transform-origin:50% 94%;transform:rotate(calc(-1 * var(--card-angle))) translateY(var(--card-lift)) rotate(var(--face-angle));transition:transform var(--duration-long) var(--ease-emphasized),box-shadow var(--duration-medium) var(--ease-emphasized),background var(--motion-medium)}.ds-showcase .dp-swatch[data-selected=true]{--card-lift: -28px;--face-angle: 0deg;z-index:15}.ds-showcase .dp-swatch:focus-visible{--card-lift: -32px;z-index:20}.ds-showcase .dp-swatch[data-selected=true] .dp-swatch-face,.ds-showcase .dp-swatch:focus-visible .dp-swatch-face{box-shadow:0 4px 5px #15202f10,0 24px 28px -14px #15202f60}.ds-showcase .dp-swatch .dp-label{position:absolute;left:0;right:0;bottom:0;height:48px;background:#fff;border-radius:0 0 4px 4px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-3);font-size:11px}.ds-showcase .dp-swatch .dp-number{font-weight:700}.ds-showcase .dp-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-height:62px;padding:var(--space-4) var(--space-8) var(--space-6);color:#526071;font-size:12px}.ds-showcase .dp-foot strong{color:#182330;font-weight:500}.ds-showcase .dp-shade-picker{display:grid;grid-template-columns:repeat(auto-fit,minmax(44px,1fr));gap:var(--space-1);padding:0 var(--space-5)}.ds-showcase .dp-shade-picker button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:44px;min-height:44px;padding:4px;border:1px solid transparent;border-radius:var(--radius-action);background:transparent;color:#182330;font:10px/1.3 var(--font-family-data)}.ds-showcase .dp-shade-picker button[aria-pressed=true]{border-color:#182330;background:#ffffff80}.ds-showcase .dp-shade-dot{width:16px;height:16px;border-radius:50%;background:var(--swatch);box-shadow:inset 0 0 0 1px #18233030}.ds-showcase .dp-shade-picker button:focus-visible{outline:var(--focus-ring-width, 2px) solid #182330;outline-offset:var(--focus-ring-offset, 3px)}.ds-showcase .dp-type{background:#e9e8e2;color:#181b1b}.ds-showcase .dp-type .dp-stage-head{padding-bottom:0}.ds-showcase .dp-type-meta{text-align:right;padding-top:var(--space-1);color:#666a65}.ds-showcase .dp-glyph-button{border:0;padding:var(--space-4) var(--space-5) var(--space-2);background:transparent;color:#1b2522;width:100%;height:300px;font-family:var(--specimen-font, var(--font-family-brand))!important;font-size:clamp(112px,35cqw,246px)!important;line-height:1!important;letter-spacing:-.075em;font-weight:700!important;display:flex;justify-content:center;align-items:center}.ds-showcase .dp-glyphs{display:flex;justify-content:center;align-items:baseline;animation:dp-glyph-arrive var(--duration-long) var(--ease-emphasized) both}.ds-showcase .dp-letter{display:block;transition:transform var(--duration-long) var(--ease-emphasized)}@keyframes dp-glyph-arrive{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.ds-showcase .dp-type[data-outline=true] .dp-glyph-button{color:transparent;-webkit-text-stroke:1.5px #1b2522}.ds-showcase .dp-type[data-long=true] .dp-glyph-button{font-size:clamp(70px,22cqw,154px)!important}.ds-showcase .dp-alphabet{padding:0 var(--space-8) var(--space-6);display:grid;grid-template-columns:repeat(18,1fr);color:#5c665f;gap:var(--space-3) var(--space-2);text-align:center;font-family:var(--specimen-font, var(--font-family-brand));font-size:16px;line-height:1.2}.ds-showcase .dp-type-controls{display:flex;gap:var(--space-2)}.ds-showcase .dp-type-controls button{border:0;background:transparent;min-height:44px;padding:var(--space-2);color:#58615d;font-size:12px}.ds-showcase .dp-type-controls button[aria-pressed=true]{color:#1b2522;text-decoration:underline;text-underline-offset:5px}.ds-showcase .dp-type .dp-foot{padding-top:0;padding-bottom:var(--space-4);color:#58615d}.ds-showcase .dp-type .dp-foot strong{color:#1b2522}.ds-showcase .dp-wall{background:#eef1f4;color:#172d49}.ds-showcase .dp-wall .dp-stage-head{padding-bottom:var(--space-6)}.ds-showcase .dp-wall-top{display:flex;gap:var(--space-2)}.ds-showcase .dp-wall-top button{border:0;background:#fff9;color:#24466b;padding:0;height:44px;width:44px;border-radius:50%;display:grid;place-items:center}.ds-showcase .dp-wall-top button[aria-pressed=true]{background:#173f70;color:#fff}.ds-showcase .dp-wall-body{padding:var(--space-2) var(--space-8) var(--space-3);display:flex;flex-direction:column;gap:var(--space-5)}.ds-showcase .dp-line{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}.ds-showcase .dp-line>*{min-width:0}.ds-showcase .dp-piece{--turn: 0deg;transition:transform var(--duration-medium) var(--ease-emphasized),box-shadow var(--duration-medium) var(--ease-emphasized),background var(--motion);transform:rotate(var(--turn))}.ds-showcase .dp-wall[data-loose=true] .dp-piece{--turn: var(--tilt, 0deg)}.ds-showcase button.dp-piece:active{transform:translateY(-1px) scale(.96)}.ds-showcase .dp-action{border:0;background:#24598f;color:#fff;min-height:44px;padding:var(--space-3) var(--space-5);border-radius:999px;font-size:12px;white-space:nowrap;flex:1}.ds-showcase .dp-action.is-soft{color:#24598f;background:#dce5ef}.ds-showcase .dp-action.is-outline{color:#24598f;background:transparent;box-shadow:inset 0 0 0 1px #8cabc9}.ds-showcase .dp-action.is-quiet{color:#24598f;background:transparent}.ds-showcase .dp-action[aria-pressed=true]{background:#173f70;color:#fff}.ds-showcase .dp-icon{border:0;background:#fff;color:#325b83;border-radius:50%;display:grid;place-items:center;width:44px;height:44px;flex-shrink:0}.ds-showcase .dp-icon[aria-pressed=true]{background:#24598f;color:#fff}.ds-showcase .dp-chip{display:flex;align-items:center;gap:var(--space-2);border:0;color:#3c6086;background:#e0e8f1;border-radius:5px;padding:var(--space-2) var(--space-3);min-height:36px;font-size:11px;flex:1;justify-content:center}.ds-showcase .dp-chip:nth-child(3n){--chip-selected: #42614d;background:#e0e9e3;color:#42614d}.ds-showcase .dp-chip:nth-child(4n){--chip-selected: #72573b;background:#ede3d7;color:#72573b}.ds-showcase .dp-chip[aria-pressed=true]{background:var(--chip-selected, #24598f);color:#fff}.ds-showcase .dp-field{display:flex;align-items:center;gap:var(--space-3);background:#fff;border-radius:5px;padding:0 var(--space-4);min-height:48px;flex:1;color:#6d8199;transform:rotate(calc(var(--turn) * .5))}.ds-showcase .dp-field input{width:100%;min-width:0;padding:var(--space-3) 0;border:0;color:#254b75;background:transparent;font-size:13px}.ds-showcase .dp-field input::-moz-placeholder{color:#64778e}.ds-showcase .dp-field input::placeholder{color:#64778e}.ds-showcase .dp-field:focus-within{transform:none;outline:var(--focus-ring-width, 2px) solid #24598f;outline-offset:var(--focus-ring-offset, 3px)}.ds-showcase .dp-field input:focus-visible{outline:none}.ds-showcase .dp-switch{display:flex;align-items:center;justify-content:center;min-height:44px;flex:1;cursor:pointer}.ds-showcase .dp-switch input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:42px;height:24px;border-radius:999px;background:#c8d1db;margin:0;position:relative;cursor:pointer;transition:background var(--motion)}.ds-showcase .dp-switch input:after{content:"";position:absolute;width:18px;height:18px;background:#fff;border-radius:50%;left:3px;top:3px;box-shadow:0 1px 3px #20304426;transition:transform var(--duration-medium) var(--ease-emphasized)}.ds-showcase .dp-switch input:checked{background:#24598f}.ds-showcase .dp-switch input:checked:after{transform:translate(18px)}.ds-showcase .dp-check{display:flex;align-items:center;gap:var(--space-2);font-size:11px;min-height:44px;justify-content:center;flex:1;cursor:pointer}.ds-showcase .dp-check input{width:17px;height:17px;margin:0;accent-color:#24598f;cursor:pointer}.ds-showcase .dp-small-buttons{display:flex;gap:var(--space-2);align-items:center;padding:var(--space-1);background:#e0e7ee;border-radius:999px;flex:1}.ds-showcase .dp-small-buttons button{border:0;border-radius:999px;background:transparent;color:#617387;height:36px;padding:var(--space-1) var(--space-3);font-size:11px;flex:1}.ds-showcase .dp-small-buttons button[aria-pressed=true]{background:#fff;color:#244d78;box-shadow:0 1px 3px #1b355218}.ds-showcase .dp-progress{flex:1;height:8px;border-radius:4px;background:#d2deea;overflow:hidden;margin:18px 0}.ds-showcase .dp-progress span{display:block;height:100%;width:68%;background:#6489b1;border-radius:4px;transition:width var(--duration-long) var(--ease-emphasized)}.ds-showcase .dp-wall .dp-foot{padding-top:var(--space-5);color:#56718e}.ds-showcase .dp-wall .dp-foot strong{color:#274e78}.ds-showcase .dp-sr{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}@container ds-showcase (max-width:520px){.ds-showcase .dp-stage-head{padding:var(--space-6) var(--space-5) 0}.ds-showcase .dp-stage-title{font-size:34px}.ds-showcase .dp-dot-picker{padding-top:14px}.ds-showcase .dp-fan{height:292px}.ds-showcase .dp-swatch{top:52px}.ds-showcase .dp-swatch .dp-label{height:42px;padding:0 var(--space-2)}.ds-showcase .dp-card-tag{display:none}.ds-showcase .dp-swatch:not([data-selected=true]) .dp-number{visibility:hidden}.ds-showcase .dp-foot{padding:var(--space-3) var(--space-5) var(--space-5);flex-wrap:wrap;font-size:11px}.ds-showcase .dp-glyph-button{height:246px;padding:var(--space-3)}.ds-showcase .dp-alphabet{grid-template-columns:repeat(12,1fr);padding:0 var(--space-5) var(--space-6);font-size:14px;gap:var(--space-3) var(--space-1)}.ds-showcase .dp-type .dp-foot{padding-inline:var(--space-3)}.ds-showcase .dp-type-controls{gap:0}.ds-showcase .dp-wall-body{padding:var(--space-2) var(--space-5) var(--space-3);gap:var(--space-4)}.ds-showcase .dp-line{flex-wrap:wrap;gap:var(--space-3)}.ds-showcase .dp-action{flex-basis:calc(50% - 12px)}.ds-showcase .dp-icons{display:grid;grid-template-columns:repeat(4,1fr);justify-items:center}.ds-showcase .dp-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2)}.ds-showcase .dp-chip{min-height:44px;padding:var(--space-2)}.ds-showcase .dp-fields{flex-direction:column;gap:var(--space-4)}.ds-showcase .dp-field{width:100%}.ds-showcase .dp-field input{font-size:16px}.ds-showcase .dp-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.ds-showcase .dp-small-buttons button{padding-inline:var(--space-2)}}@media (hover: hover) and (pointer: fine){.ds-showcase .dp-swatch:hover{--card-lift: -32px;--face-angle: calc(var(--card-angle) * .4);z-index:20}.ds-showcase .dp-swatch[data-selected=true]:hover{--face-angle: 0deg}.ds-showcase .dp-swatch:hover .dp-swatch-face{box-shadow:0 4px 5px #15202f10,0 24px 28px -14px #15202f60}.ds-showcase .dp-glyph-button:hover .dp-letter:first-child{transform:translate(-7px,-5px) rotate(-5deg)}.ds-showcase .dp-glyph-button:hover .dp-letter:last-child{transform:translate(7px,5px) rotate(5deg)}.ds-showcase button.dp-piece:hover{transform:translateY(-3px) rotate(0)}.ds-showcase button.dp-piece:active{transform:translateY(-1px) scale(.96)}}@media (prefers-reduced-motion: reduce){.ds-showcase *,.ds-showcase *:after{transition:none!important;animation:none!important}}.ds-showcase .dp-stage{color-scheme:light}.ds-showcase .dp-stage-title{color:inherit}.ds-showcase .dp-swatch:focus-visible{outline:none}.ds-showcase .dp-swatch:focus-visible .dp-swatch-face{outline:var(--focus-ring-width, 2px) solid var(--swatch-focus, #182330);outline-offset:var(--focus-ring-offset, 3px)}.ds-showcase .dp-glyph-button:focus-visible{outline-offset:-8px}.ds-showcase .dp-type-controls button{font-weight:var(--font-weight-regular)}@container ds-showcase (max-width: 340px){.ds-showcase .dp-type-meta{display:none}}.ds-showcase .dp-card-controls{display:none}.ds-showcase .dp-switch input{flex-shrink:0}@container ds-showcase (max-width:520px){.ds-showcase .dp-color{--fan-spread-factor: .75;--fan-rotation-factor: .4}.ds-showcase .dp-card-controls{display:flex;gap:var(--space-1)}.ds-showcase .dp-card-controls button{display:grid;place-items:center;width:var(--tap-size);height:var(--tap-size);padding:0;border:0;border-radius:var(--radius-action);background:#fff9;color:#263a50}.ds-showcase .dp-color .dp-foot strong{flex-basis:100%}.ds-showcase .dp-switches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.ds-showcase .dp-footer-widgets{flex-direction:column;align-items:stretch;gap:var(--space-2)}.ds-showcase .dp-progress{flex:none}}@container ds-showcase (max-width:300px){.ds-showcase .dp-color .dp-stage-head{flex-wrap:wrap}.ds-showcase .dp-color .dp-dot-picker{padding-top:0}}