:root{--color-black:#333;--color-white:#fff;--color-gray-100:#f5f5f5;--color-gray-300:#e0e0e0;--color-gray-600:#7c7c7c;--color-gray-800:#4d4d4d;--color-blue:#001933;--color-point:#25e2cc;--color-error:#ff0000;--spacing-xxs:4px;--spacing-xs:8px;--spacing-sm:12px;--spacing-base:16px;--spacing-md:20px;--spacing-lg:24px;--spacing-xl:32px;--font-size-xsmall:12px;--font-size-small:14px;--font-size-base:16px;--font-size-heading1:36px;--font-size-heading2:28px;--font-size-heading3:24px;--font-size-heading4:20px;--font-size-heading5:18px;--line-height-xsmall:1.334;--line-height-small:1.429;--line-height-base:1.5;--line-height-heading1:1.334;--line-height-heading2:1.358;--line-height-heading3:1.334;--line-height-heading4:1.334;--line-height-heading5:1.334;--border-radius-xs:4px;--border-radius-sm:8px;--border-radius-md:12px;--border-radius-lg:16px}.playground{padding:var(--spacing-base) 0}.playground--home ol li,.playground--home ul li{margin-top:0}.playground *+h2{margin-top:var(--spacing-xl)}.playground *+h3{margin-top:var(--spacing-base)}.playground ol.playground__inner-list li,.playground ul.playground__inner-list li{margin-top:var(--spacing-base);margin-bottom:var(--spacing-sm)}.playground ol.playground__inner-list li .size__default,.playground ul.playground__inner-list li .size__default{margin-bottom:var(--spacing-sm)}.playground ol.playground__inner-list li .button__group,.playground ul.playground__inner-list li .button__group{width:auto;display:inline-flex;gap:var(--spacing-xxs)}.playground__inner{padding:var(--spacing-md) var(--spacing-sm)}.playground__inner h3{margin-bottom:var(--spacing-base)}.playground__inner-box{padding:var(--spacing-md) var(--spacing-md);margin:var(--spacing-md) 0;border:1px solid var(--color-gray-300);border-radius:var(--border-radius-md)}.playground .color-swatch{display:flex;flex-direction:column;align-items:center;width:100px}.playground .color-swatch .color-box{width:100%;height:50px;border-radius:4px;margin-bottom:8px;border:1px solid var(--color-gray-300)}.playground .color-swatch .color-info{text-align:center}.playground .color-swatch .color-info .color-name{font-weight:700}.playground .color-swatch .color-info .color-value{font-size:var(--font-size-xsmall);line-height:var(--line-height-xsmall);font-weight:400;color:#666}.playground .flex{border:1px solid var(--color-gray-300)}.playground .flex.flex--align-center,.playground .flex.flex--align-end,.playground .flex.flex--align-start{height:100px}.playground .flex .box{padding:var(--spacing-sm) var(--spacing-md);background:var(--color-gray-600);color:var(--color-white)}