.playground-shell{height:100%;min-height:0;color:var(--site-text-primary);background:#eef1f5;flex-direction:column;display:flex}.playground-shell-header{border-bottom:1px solid var(--site-border);background:#fffffff0;flex:none;justify-content:space-between;align-items:center;gap:24px;min-height:58px;padding:0 24px;display:flex}.playground-shell-title{align-items:baseline;gap:10px;min-width:0;display:flex}.playground-shell-title strong{color:var(--site-text-primary);letter-spacing:-.02em;font-size:15px}.playground-shell-title span{color:var(--site-text-muted);font-size:12px}.playground-mode-tabs{align-self:stretch;gap:4px;display:inline-flex}.playground-mode-tab{min-width:118px;color:var(--site-text-secondary);cursor:pointer;font:inherit;background:0 0;border:0;padding:0 16px;font-size:13px;font-weight:700;position:relative}.playground-mode-tab:after{content:"";background:0 0;height:2px;position:absolute;bottom:-1px;left:16px;right:16px}.playground-mode-tab[aria-selected=true]{color:var(--site-accent)}.playground-mode-tab[aria-selected=true]:after{background:var(--site-accent)}.playground-mode-content{flex:1;min-height:0}.playground-workspace{--playground-panel-width:430px;grid-template-columns:var(--playground-panel-width) 9px minmax(0, 1fr);height:100%;min-height:0;display:grid}.playground-control-panel,.playground-preview-panel{min-width:0;min-height:0}.playground-control-panel{background:#fff;flex-direction:column;display:flex}.playground-panel-header{border-bottom:1px solid var(--site-border);flex:none;justify-content:space-between;align-items:flex-start;gap:16px;padding:20px;display:flex}.playground-panel-header>div{min-width:0}.playground-eyebrow{color:var(--site-accent);font-family:var(--site-font-mono);letter-spacing:.12em;text-transform:uppercase;margin-bottom:5px;font-size:10px;font-weight:800;display:block}.playground-panel-header h2{color:var(--site-text-primary);letter-spacing:-.025em;margin:0;font-size:18px}.playground-panel-header p{max-width:300px;color:var(--site-text-muted);word-break:keep-all;margin:6px 0 0;font-size:12px;line-height:1.55}.playground-panel-header .ant-btn{border-radius:8px;flex:none;min-height:34px;font-size:12px;font-weight:700}.playground-control-scroll{overscroll-behavior:contain;flex:1;min-height:0;padding:16px 18px 28px;overflow:hidden auto}.playground-divider{z-index:3;cursor:col-resize;touch-action:none;background:#e4e8ee;border:0;border-left:1px solid #cbd3de;border-right:1px solid #cbd3de;justify-content:center;align-items:center;display:flex;position:relative}.playground-divider:before{content:"";width:17px;position:absolute;top:0;bottom:0;left:-4px}.playground-divider span{background:#9aa6b5;border-radius:999px;width:3px;height:36px;box-shadow:0 -7px #9aa6b5,0 7px #9aa6b5}.playground-divider:hover,.playground-divider:focus-visible{outline:2px solid var(--site-focus-ring);outline-offset:-2px;background:#dbeafe}.playground-divider:hover span,.playground-divider:focus-visible span{background:var(--site-accent);box-shadow:0 -7px 0 var(--site-accent), 0 7px 0 var(--site-accent)}.playground-is-resizing,.playground-is-resizing *{cursor:col-resize!important;user-select:none!important}.playground-preview-panel{background-color:#eef1f5;background-image:linear-gradient(#5f718a0b 1px,#0000 1px),linear-gradient(90deg,#5f718a0b 1px,#0000 1px),none;background-position:0 0,0 0,0 0;background-repeat:repeat,repeat,repeat;background-size:24px 24px;background-attachment:scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box;flex-direction:column;padding:22px;display:flex;position:relative;overflow:hidden}.playground-preview-canvas{--playground-card-scrollbar-thumb:#c4ccd8;--playground-card-scrollbar-thumb-hover:#94a3b8;--playground-card-scrollbar-surface:#fff;scrollbar-color:var(--playground-card-scrollbar-thumb) transparent;scrollbar-width:thin;background:#fff;border:1px solid #d6dce5;border-radius:14px;flex:1;min-width:0;min-height:0;padding:24px;overflow:auto;box-shadow:0 18px 44px #1f293714}.playground-preview-canvas::-webkit-scrollbar{width:12px;height:12px}.playground-preview-canvas::-webkit-scrollbar-track{background:0 0;margin:10px}.playground-preview-canvas::-webkit-scrollbar-thumb{border:3px solid var(--playground-card-scrollbar-surface);background:var(--playground-card-scrollbar-thumb);background-clip:padding-box;border-radius:999px}.playground-preview-canvas::-webkit-scrollbar-thumb:hover{background:var(--playground-card-scrollbar-thumb-hover);background-clip:padding-box}.playground-preview-canvas::-webkit-scrollbar-corner{background:0 0}.playground-preview-grid{min-width:0}.playground-control-form .ant-collapse{background:0 0;border:0}.playground-control-form .ant-collapse>.ant-collapse-item{border:1px solid var(--site-border);background:#fff;border-radius:10px;margin-bottom:10px;overflow:hidden}.playground-control-form .ant-collapse>.ant-collapse-item>.ant-collapse-header{color:var(--site-text-primary);align-items:center;padding:12px 13px;font-size:12px;font-weight:800}.playground-control-form .ant-collapse-content{border-top:1px solid var(--site-border)}.playground-control-form .ant-collapse-content-box{padding:14px 13px 4px!important}.playground-control-form .ant-form-item{margin-bottom:13px}.playground-control-form .ant-form-item-label{padding-bottom:4px}.playground-control-form .ant-form-item-label>label{color:#475569;height:auto;font-size:11px;font-weight:700}.playground-control-form .ant-input-number,.playground-control-form .ant-select,.playground-control-form .ant-input{width:100%}.playground-control-form .ant-switch{min-width:36px}.playground-field-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px;display:grid}.playground-field-wide{grid-column:1/-1}.playground-toggle-row{justify-content:space-between;align-items:center;gap:10px;min-height:32px;display:flex}.playground-toggle-row span{color:#475569;font-size:11px;font-weight:700}.playground-event-log{color:#1e3a8a;font-family:var(--site-font-mono);overflow-wrap:anywhere;background:#eff6ff;border:1px solid #bfdbfe;border-radius:9px;margin-bottom:14px;padding:10px 11px;font-size:10px;line-height:1.5}.playground-event-log strong{color:#2563eb;font-family:var(--site-font-sans);letter-spacing:.06em;text-transform:uppercase;margin-bottom:2px;font-size:10px;display:block}.playground-source-modal .ant-modal-content{border-radius:14px;padding:0;overflow:hidden}.playground-source-modal .ant-modal-header{background:#111827;border-bottom:1px solid #263244;margin:0;padding:16px 20px}.playground-source-modal .ant-modal-title,.playground-source-modal .ant-modal-close{color:#e5e7eb}.playground-source-modal .ant-modal-body{background:#0b1120}.playground-source-modal .ant-modal-footer{background:#111827;border-top:1px solid #263244;margin:0;padding:12px 16px}.playground-source-code{color:#dbeafe;max-height:min(68vh,760px);font-family:var(--site-font-mono);tab-size:2;white-space:pre;background:#0b1120;margin:0;padding:22px;font-size:12px;line-height:1.7;overflow:auto}.theme-preset-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin-bottom:16px;display:grid}.theme-preset-card{border:1px solid var(--site-border-strong);color:#334155;cursor:pointer;min-width:0;font:inherit;background:#fff;border-radius:9px;flex-direction:column;align-items:stretch;gap:7px;padding:8px;font-size:9px;font-weight:800;display:flex}.theme-preset-card[aria-pressed=true]{border-color:var(--site-accent);outline:2px solid #2563eb26}.theme-preset-swatches{border-radius:5px;height:18px;display:flex;overflow:hidden}.theme-preset-swatches i{flex:1}.theme-color-list{gap:8px;display:grid}.theme-color-row{border-bottom:1px solid #edf0f4;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:4px 0 10px;display:grid}.theme-color-meta{min-width:0}.theme-color-meta strong,.theme-color-meta code{display:block}.theme-color-meta strong{color:#334155;font-size:11px}.theme-color-meta code{color:#94a3b8;font-family:var(--site-font-mono);text-overflow:ellipsis;white-space:nowrap;margin-top:2px;font-size:9px;overflow:hidden}.theme-color-row .ant-color-picker-trigger{border-radius:8px;justify-content:flex-start;min-width:104px}.theme-preview-wrap{min-width:0}.theme-preview-head{justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px;display:flex}.theme-preview-head h3{color:#334155;margin:0;font-size:17px}.theme-preview-head p{color:#94a3b8;margin:4px 0 0;font-size:11px}.theme-preview-badge{background:var(--axdg-body-active-bg,#dbeafe);color:var(--axdg-primary-color,#2563eb);border-radius:999px;padding:5px 9px;font-size:10px;font-weight:800}.props-preview-note{justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px;display:flex}.props-preview-note strong{color:#334155;font-size:13px}.props-preview-note span{color:#94a3b8;font-family:var(--site-font-mono);font-size:10px}.props-change-grid-custom .axdg-body-tr:nth-child(3n){background:#f0f9ff}.props-change-grid-custom .notice-tr{background:#fff7ed}.props-change-grid-custom .high-qty-tr{background:#fef2f2}@media (width<=1100px){.theme-preset-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (width<=900px){.playground-shell-header{flex-direction:column;align-items:flex-start;gap:6px;padding:13px 16px 0}.playground-shell-title span{display:none}.playground-mode-tabs{width:100%;min-height:42px}.playground-mode-tab{flex:1;min-width:0}.playground-workspace{overscroll-behavior:contain;flex-direction:column;height:100%;display:flex;overflow-y:auto}.playground-divider{display:none}.playground-control-panel{border-bottom:1px solid var(--site-border-strong);max-height:66vh}.playground-preview-panel{min-height:560px;padding:16px}}@media (width<=560px){.playground-panel-header{flex-direction:column;align-items:stretch;padding:16px}.playground-panel-header .ant-btn{width:100%}.playground-control-scroll{padding:12px}.playground-preview-panel{min-height:500px;padding:12px}.playground-preview-canvas{padding:14px}.playground-field-grid{grid-template-columns:minmax(0,1fr)}.playground-field-wide{grid-column:auto}.theme-preset-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (prefers-reduced-motion:reduce){.playground-mode-tab,.playground-divider,.theme-preset-card{transition:none}}
