.playground_wrapper__Zyh40{display:flex;align-items:flex-start;gap:24px;background:#000;border:1px solid var(--doc-border);border-radius:12px;padding:32px;margin-bottom:40px}.playground_cardPreview__B0tYO{flex:1 1;display:flex;align-items:center;justify-content:center}.playground_mockCard__kfBse{display:flex;align-items:center;gap:12px;background:hsla(0,0%,100%,.1);border-radius:16px;padding:12px;width:100%;max-width:380px}.playground_mockIconWrap__3QdVY{width:62px;height:62px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center}.playground_mockContent__20OaR{flex:1 1;min-width:0;display:flex;flex-direction:column;gap:8px}.playground_mockHeader__oWBuM{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.playground_mockTitle__i3ofr{font-size:16px;font-weight:600;color:#fff;flex:1 1}.playground_mockTime__6uHA1{font-size:12px;font-weight:500;color:hsla(0,0%,100%,.5);white-space:nowrap}.playground_mockBody__HZRs8{font-size:14px;font-weight:500;color:#fff;line-height:20px}.playground_controls__Gu9mm{width:160px;flex-shrink:0;background:var(--doc-surface);border:1px solid var(--doc-border);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:16px}.playground_controlTitle__XeP3_{font-size:13px;font-weight:600;color:var(--doc-text);padding-bottom:12px;border-bottom:1px solid var(--doc-border)}.playground_controlCol__AEVQn{display:flex;flex-direction:column;gap:8px}.playground_controlLabel__GqAjA{font-size:13px;color:var(--doc-text-muted)}.playground_segmentedCol__Auhsq{display:flex;flex-direction:column;border-radius:6px;overflow:hidden;border:1px solid var(--doc-border-2)}.playground_seg__ueeaB{width:100%;padding:7px 8px;font-size:12px;font-weight:500;color:var(--doc-text-muted);background:transparent;border:none;cursor:pointer;text-align:left}.playground_seg__ueeaB+.playground_seg__ueeaB{border-top:1px solid var(--doc-border-2)}.playground_segActive__bqcVn{background:rgba(68,148,252,.2);color:#4494fc;font-weight:600}.page_subtitle__RxFMo{font-size:18px;color:var(--doc-text-muted);margin-bottom:48px;line-height:1.5}.page_colorList__MKW_o{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}.page_colorItem__ApvjJ{display:flex;align-items:center;gap:12px;padding:8px 12px;background:var(--doc-surface);border:1px solid var(--doc-border);border-radius:6px}.page_colorDot__rjxuy{width:24px;height:24px;border-radius:4px;border:1px solid var(--doc-border-2);flex-shrink:0}.page_colorName__hDd24{font-size:14px;font-weight:600;color:var(--doc-text);min-width:120px}.page_colorValue__Q5k3V{font-size:12px;color:var(--doc-text-subtle);font-family:var(--font-mono)}.page_moleculeSection__uMdRQ{margin-bottom:24px;border:1px solid var(--doc-border);border-radius:12px;overflow:hidden}.page_moleculeHeader__9q_R7{display:flex;flex-direction:column;gap:2px;padding:14px 16px 12px;border-bottom:1px solid var(--doc-border);background:var(--doc-surface)}.page_moleculePath__vsBSe{font-size:13px;font-weight:600;color:var(--doc-text)}.page_moleculeDesc__AFul9{font-size:12px;color:var(--doc-text-subtle)}.page_moleculePreview__s1ZJv{padding:24px 20px;background:var(--doc-surface)}.page_molVariantRow__rng2V{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start}.page_molVariantItem__4bKQt{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.page_molVariantLabel__WXl_l{font-size:11px;color:var(--doc-text-subtle);text-transform:uppercase;letter-spacing:.5px}.page_molIconBox__IQjw4{width:62px;height:62px;border-radius:12px;display:flex;align-items:center;justify-content:center}.page_molIconInner__ciYGw{font-size:28px!important;color:#fff;-webkit-user-select:none;-moz-user-select:none;user-select:none}.page_molCardHeader__1x_jl{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;max-width:380px}.page_molCardTitle__fRmz8{font-size:16px;font-weight:600;color:#fff;flex:1 1}.page_molCardTime__JQlFt{font-size:12px;font-weight:500;color:hsla(0,0%,100%,.5);white-space:nowrap}.page_molCard__KcqMS{display:flex;align-items:center;gap:12px;background:hsla(0,0%,100%,.1);border-radius:16px;padding:12px;max-width:420px}.page_molCardContent__ajxvl{flex:1 1;min-width:0;display:flex;flex-direction:column;gap:8px}.page_molCardBody__4CQkd{font-size:14px;font-weight:500;color:#fff;line-height:20px}