:root{--bg-color: #0d0f12;--bg-color-rgb: 13, 15, 18;--surface-color: #15191e;--surface-hover: #1e242a;--primary-color: #8ab4f8;--primary-gradient: linear-gradient(135deg, #8ab4f8 0%, #a55def 100%);--primary-glow: rgba(138, 180, 248, .25);--text-main: #f3f4f6;--text-muted: #9ca3af;--title-color: #f3f4f6;--subtitle-color: #9ca3af;--accent-color: #8ab4f8;--label-color: #8ab4f8;--config-bg: #101317;--transition-smooth: all .35s cubic-bezier(.25, .8, .25, 1);--font-stack: "Outfit", -apple-system, BlinkMacSystemFont, sans-serif;--shadow-premium: 0 8px 30px rgba(0, 0, 0, .2);--shadow-glow: 0 0 15px var(--primary-glow);--border-color: rgba(255, 255, 255, .08);--divider-color: rgba(255, 255, 255, .05)}.light-mode{--bg-color: #f8fafc;--bg-color-rgb: 248, 250, 252;--surface-color: #ffffff;--surface-hover: #f1f5f9;--primary-color: #1a73e8;--primary-gradient: linear-gradient(135deg, #1a73e8 0%, #7c3aed 100%);--primary-glow: rgba(26, 115, 232, .15);--text-main: #0f172a;--text-muted: #64748b;--title-color: #0f172a;--subtitle-color: #5f6368;--accent-color: #1a73e8;--label-color: #1a73e8;--config-bg: #f1f5f9;--shadow-premium: 0 8px 30px rgba(0, 0, 0, .04);--border-color: rgba(0, 0, 0, .06);--divider-color: rgba(0, 0, 0, .04)}*{margin:0;padding:0;box-sizing:border-box}body{background-color:var(--bg-color);color:var(--text-main);font-family:var(--font-stack);transition:var(--transition-smooth);min-height:100vh;display:flex;overflow-x:hidden}.app-container{display:flex;width:100%;min-height:100vh}.sidebar{width:280px;background-color:var(--surface-color);border-right:1px solid var(--border-color);padding:24px;display:flex;flex-direction:column;justify-content:space-between;z-index:1000;position:fixed;left:0;top:0;bottom:0;height:100vh;transform:translate(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);box-shadow:4px 0 24px #00000026}.brand{display:flex;align-items:center;gap:12px;margin-bottom:40px}.brand-dot{width:12px;height:12px;border-radius:50%;background:var(--primary-gradient);box-shadow:var(--shadow-glow)}.brand h1{font-size:20px;font-weight:700;letter-spacing:-.5px;background:var(--primary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.nav-links{display:flex;flex-direction:column;gap:8px;flex-grow:1}.nav-btn{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;background:transparent;border:none;border-radius:12px;color:var(--text-muted);font-family:var(--font-stack);font-size:15px;font-weight:500;text-align:left;cursor:pointer;transition:var(--transition-smooth)}.nav-btn:hover{color:var(--text-main);background-color:var(--surface-hover)}.nav-btn.active{color:#fff;background:var(--primary-gradient);box-shadow:var(--shadow-glow)}.nav-btn .icon{font-size:18px}.sidebar-footer{padding-top:20px;border-top:1px solid var(--border-color)}.theme-toggle-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px;background-color:var(--surface-hover);border:1px solid var(--border-color);border-radius:12px;color:var(--text-main);font-family:var(--font-stack);font-size:14px;font-weight:500;cursor:pointer;transition:var(--transition-smooth)}.theme-toggle-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-premium)}.header-theme-toggle{padding:8px 10px;border-radius:50%;min-width:36px;height:36px;background-color:var(--surface-color);display:flex;align-items:center;justify-content:center;box-sizing:border-box}.header-theme-toggle:hover{background-color:var(--surface-hover)}.header-theme-toggle .theme-text{display:none}#theme-toggle{display:none!important}#sidebar-theme-toggle{display:flex!important}.content-area{flex-grow:1;padding:0 16px 24px;display:flex;flex-direction:column;gap:24px;max-width:1200px;margin:0 auto;width:100%;overflow-x:hidden}.main-header{display:flex;justify-content:space-between;align-items:center;padding:16px 0 12px;border-bottom:1px solid var(--border-color);position:sticky;top:0;background-color:rgba(var(--bg-color-rgb),.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:9;width:100%}.main-header h2{font-size:20px;font-weight:600;letter-spacing:-.5px;color:var(--title-color)}.platform-badge{display:none;background-color:#1a73e81a;color:var(--primary-color);font-size:13px;font-weight:600;padding:6px 14px;border-radius:20px;border:1px solid rgba(26,115,232,.15)}@media (min-width: 861px){.sidebar{position:sticky;top:0;transform:translate(0);box-shadow:none;z-index:10}#theme-toggle{display:flex!important}#sidebar-theme-toggle{display:none!important}.header-theme-toggle{padding:0 16px;border-radius:20px;min-width:auto;height:36px;font-size:13px;display:flex;align-items:center;gap:8px}.header-theme-toggle .theme-text{display:inline}.content-area{padding:0 40px 40px;gap:40px}.main-header{padding:24px 0 16px}.main-header h2{font-size:24px}.platform-badge{display:block}}.grid-container{display:flex;flex-direction:column;gap:0;width:100%}.tab-content{display:block!important;margin-bottom:64px;scroll-margin-top:100px}.parallax-banner{position:relative;height:200px;border-radius:24px;overflow:hidden;margin-bottom:24px;display:flex;align-items:center;padding:0 40px;background-attachment:fixed;background-size:cover;background-position:center;border:1px solid var(--border-color);box-shadow:var(--shadow-premium)}#banner-core{background-image:linear-gradient(135deg,#1a73e81a,#a55def1a)}#banner-inputs{background-image:linear-gradient(135deg,#0d94881a,#1a73e81a)}#banner-indicators{background-image:linear-gradient(135deg,#6d28d91a,#5d5fef1a)}#banner-layouts{background-image:linear-gradient(135deg,#be184a1a,#7c3aed1a)}#banner-complex{background-image:linear-gradient(135deg,#d977061a,#1a73e81a)}.banner-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 75% 20%,var(--primary-glow),transparent 60%);pointer-events:none}.banner-content{position:relative;z-index:2;max-width:680px}.banner-eyebrow{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--primary-color);margin-bottom:6px;display:block}.banner-content h2{font-size:28px;font-weight:700;color:var(--title-color);margin-bottom:6px;letter-spacing:-.5px}.banner-subtitle{font-size:14px;line-height:1.5;color:var(--subtitle-color)}.showcase-card{background-color:transparent;border:none;border-bottom:1px solid var(--border-color);border-radius:0;padding:40px 0;box-shadow:none;display:flex;flex-direction:column;gap:16px;width:100%}.showcase-card:last-child{border-bottom:none}.showcase-card h3{font-size:20px;font-weight:600;color:var(--title-color);letter-spacing:-.3px}.card-desc{color:var(--subtitle-color);font-size:14px;line-height:1.5}.corner-playground{display:flex;flex-direction:column;gap:24px;margin-top:10px}.playground-boxes{display:flex;gap:32px;justify-content:center;padding:20px 0}.preview-box-container{display:flex;flex-direction:column;align-items:center;gap:12px}.preview-box-container .label{font-size:12px;color:var(--text-muted);font-weight:500}.preview-box{width:140px;height:140px;transition:var(--transition-smooth)}.preview-box.rounded-corners{background-color:#5d5fef1a;border:2px dashed rgba(93,95,239,.3)}.preview-box.squircle-corners{background:var(--primary-gradient);clip-path:url(#squircle-clip);box-shadow:var(--shadow-glow)}.control-panel{display:flex;flex-direction:column;gap:16px}.control-group{display:flex;flex-direction:column;gap:8px}.control-group label{font-size:14px;font-weight:500;display:flex;justify-content:space-between}.control-group input[type=range]{width:100%;accent-color:var(--primary-color);height:6px;background:var(--divider-color);border-radius:3px;border:none;outline:none}.accordion-playground{display:flex;flex-direction:column;gap:16px}.accordion-item{background-color:var(--bg-color);border:1px solid var(--border-color);border-radius:16px;overflow:hidden;transition:var(--transition-smooth)}.accordion-header{padding:16px 20px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}.accordion-header:hover{background-color:var(--surface-hover)}.title-group{display:flex;flex-direction:column;gap:4px}.acc-title{font-size:15px;font-weight:600}.acc-subtitle{font-size:12px;color:var(--text-muted)}.chevron{font-size:12px;color:var(--text-muted);transition:transform .3s cubic-bezier(.25,.8,.25,1)}.accordion-item.expanded .chevron{transform:rotate(180deg)}.accordion-body{max-height:0;overflow:hidden;transition:max-height .3s cubic-bezier(.25,.8,.25,1)}.accordion-content{padding:20px;border-top:1px solid var(--border-color);font-size:14px;line-height:1.6;color:var(--text-muted)}.btn{font-family:var(--font-stack);font-size:14px;font-weight:600;padding:10px 20px;border:none;cursor:pointer;transition:var(--transition-smooth)}.btn-primary{background:var(--primary-gradient);color:#fff}.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-glow)}.btn-outline{background:transparent;border:1.5px solid var(--border-color);color:var(--text-main)}.btn-outline:hover{background-color:var(--surface-hover)}.btn-smooth{border-radius:8px}.btn-tonal{background-color:#8ab4f826;color:var(--primary-color)}.light-mode .btn-tonal{background-color:#1a73e81a}.btn-tonal:hover{background-color:#8ab4f840}.light-mode .btn-tonal:hover{background-color:#1a73e82e}.btn-ios{border-radius:10px;font-weight:500;transition:opacity .2s ease,background-color .2s ease;clip-path:none!important}.btn-ios:hover{transform:none!important;box-shadow:none!important}.btn-ios:active{opacity:.45}.btn-ios-filled{background-color:#0a84ff;color:#fff}.light-mode .btn-ios-filled{background-color:#007aff}.btn-ios-tinted{background-color:#0a84ff26;color:#0a84ff}.light-mode .btn-ios-tinted{background-color:#007aff1f;color:#007aff}.btn-ios-gray{background-color:#ffffff14;color:#0a84ff}.light-mode .btn-ios-gray{background-color:#0000000f;color:#007aff}.btn-ios-plain{background-color:transparent;color:#0a84ff;padding-left:8px;padding-right:8px}.light-mode .btn-ios-plain{color:#007aff}.stepper-playground{display:flex;flex-direction:column;gap:32px;padding:10px 0}.stepper-container{display:flex;justify-content:space-between;align-items:center;position:relative;width:100%;padding:0 40px}.stepper-progress-bg{position:absolute;top:24px;left:80px;right:80px;height:4px;background-color:var(--divider-color);z-index:1}.stepper-progress-fill{height:100%;width:50%;background:var(--primary-gradient);transition:width .4s cubic-bezier(.25,.8,.25,1)}.step-node{display:flex;flex-direction:column;align-items:center;gap:12px;position:relative;z-index:2;width:80px}.node-circle{width:52px;height:52px;border-radius:50%;background-color:var(--bg-color);border:2px solid var(--border-color);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:16px;color:var(--text-muted);transition:var(--transition-smooth)}.node-label{font-size:13px;font-weight:500;color:var(--text-muted);text-align:center;transition:var(--transition-smooth);white-space:nowrap}.step-node.completed .node-circle{background-color:#10b981;border-color:#10b981;color:#fff}.step-node.completed .node-label{color:#10b981}.step-node.active .node-circle{border-color:var(--primary-color);color:var(--primary-color);box-shadow:var(--shadow-glow);animation:pulseCircle 2s infinite}.step-node.active .node-label{color:var(--primary-color);font-weight:600}.stepper-controls{display:flex;justify-content:space-between;align-items:center}.step-indicator{font-size:14px;font-weight:500;color:var(--text-muted)}.slider-playground{display:flex;flex-direction:column;gap:30px}.slider-wrapper,.progress-wrapper{display:flex;flex-direction:column;gap:12px}.slider-wrapper .label,.progress-wrapper .label{font-size:13px;font-weight:500;color:var(--text-muted)}.apps-slider-container{position:relative;width:100%;height:36px;display:flex;align-items:center}.apps-slider-track{width:100%;height:4px;background-color:var(--divider-color);border-radius:2px;position:relative;pointer-events:none}.apps-slider-fill{height:100%;width:50%;background:var(--primary-gradient);border-radius:2px}.slider-tooltip{position:absolute;top:-24px;left:calc(50% - 24px);width:48px;height:26px;background-color:var(--primary-color);color:#fff;font-size:12px;font-weight:600;border-radius:6px;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s ease-in-out;pointer-events:none}.apps-slider-container:hover .slider-tooltip,.apps-slider-container.active .slider-tooltip{opacity:1}#real-slider{position:absolute;width:100%;height:100%;opacity:0;cursor:pointer;z-index:5}.slider-thumb-glow{position:absolute;left:calc(50% - 16px);width:32px;height:32px;border-radius:50%;background-color:var(--primary-glow);display:flex;align-items:center;justify-content:center;pointer-events:none;transition:transform .15s ease-in-out}.apps-slider-container.active .slider-thumb-glow{transform:scale(1.25)}.slider-thumb{width:16px;height:16px;border-radius:50%;background-color:var(--primary-color)}.apps-progress-bar{width:100%;height:16px;display:flex;align-items:center}.apps-progress-fill{height:4px;width:50%;background:var(--primary-gradient);border-radius:2px;transition:width .3s ease-out}.slider-value-display{text-align:center;font-size:14px;font-weight:500}.android-playground{padding:20px 0;display:flex;flex-direction:column;align-items:center;gap:20px}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#0009;display:flex;align-items:center;justify-content:center;z-index:100;opacity:0;pointer-events:none;transition:var(--transition-smooth)}.modal-overlay.open{opacity:1;pointer-events:auto}.dialog-card{background-color:var(--surface-color);border:1px solid var(--border-color);padding:30px;max-width:440px;width:90%;box-shadow:0 20px 50px #0006;display:flex;flex-direction:column;gap:16px;transform:translateY(20px);transition:var(--transition-smooth);clip-path:url(#squircle-clip-dialog);border-radius:12px}.modal-overlay.open .dialog-card{transform:translateY(0)}.dialog-card h4{font-size:18px;font-weight:600}.dialog-card p{color:var(--text-muted);font-size:14px;line-height:1.6}.dialog-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:10px}.dialog-actions .btn{border-radius:8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes pulseCircle{0%{box-shadow:0 0 #5d5fef66}70%{box-shadow:0 0 0 10px #5d5fef00}to{box-shadow:0 0 #5d5fef00}}.apps-pull-refresh-container{position:relative;overflow:hidden;width:100%}.info-banner{background-color:#5d5fef1a;border:1px solid rgba(93,95,239,.2);border-radius:12px;padding:12px 16px;display:flex;align-items:center;gap:8px;font-size:13px;margin-bottom:20px;color:var(--text-main)}.pull-refresh-playground{width:100%;margin-top:10px}.pull-refresh-box{background-color:var(--bg-color);border:1px solid var(--border-color);border-radius:16px;height:180px;overflow:hidden;position:relative;cursor:grab;-webkit-user-select:none;user-select:none}.pull-refresh-box:active{cursor:grabbing}.pull-refresh-indicator{position:absolute;top:-48px;left:50%;transform:translate(-50%);background-color:var(--surface-color);border:1px solid var(--border-color);padding:8px 16px;border-radius:20px;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;box-shadow:var(--shadow-premium);transition:top .2s cubic-bezier(.25,.8,.25,1),opacity .2s;z-index:5;opacity:0}.pull-refresh-indicator.pulling{opacity:1}.pull-refresh-indicator.refreshing{top:16px;opacity:1}.refresh-spinner{width:16px;height:16px;border:2px solid var(--border-color);border-top:2px solid var(--primary-color);border-radius:50%;animation:spin .8s linear infinite;display:inline-block}.refresh-feed{padding:20px;display:flex;flex-direction:column;gap:12px;height:100%;justify-content:center;transition:transform .2s ease}.feed-item{background-color:var(--surface-color);border:1px solid var(--border-color);padding:12px 16px;border-radius:12px;font-size:13px;text-align:center}.button-controls-group{display:flex;justify-content:flex-end;margin-bottom:8px}.toggle-container{display:flex;align-items:center;gap:10px}.switch-label{position:relative;display:inline-block;width:44px;height:24px}.switch-label input{opacity:0;width:0;height:0}.switch-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--divider-color);transition:.3s;border-radius:24px;border:1px solid var(--border-color)}.switch-slider:before{position:absolute;content:"";height:16px;width:16px;left:3px;bottom:3px;background-color:var(--text-muted);transition:.3s;border-radius:50%}.switch-label input:checked+.switch-slider{background-color:var(--primary-color)}.switch-label input:checked+.switch-slider:before{transform:translate(20px);background-color:#fff}.buttons-grid{display:flex;flex-direction:column;gap:20px;margin-top:10px}.button-section{display:flex;flex-direction:column;gap:10px}.button-section .label{font-size:12px;color:var(--text-muted);font-weight:500;text-transform:uppercase;letter-spacing:.5px}.btn-group{display:flex;flex-wrap:wrap;gap:12px}.btn-group.align-center{align-items:center}.btn-text{background:transparent;color:var(--primary-color);padding:10px 16px;border:none;border-radius:8px;font-family:var(--font-stack);font-weight:600;cursor:pointer;transition:var(--transition-smooth)}.btn-text:hover:not(:disabled){background-color:#5d5fef14}.btn-link{color:var(--primary-color);text-decoration:underline;font-size:14px;font-weight:600;cursor:pointer;background:transparent;border:none;padding:4px;font-family:var(--font-stack);transition:var(--transition-smooth)}.btn-link:hover:not(:disabled){opacity:.8}.btn-circular{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0;font-size:16px}.icon-text-btn{display:inline-flex;align-items:center;gap:8px}.btn-demo:disabled:not(.btn-ios),.btn-link:disabled{background-color:#ffffff1f!important;background-image:none!important;color:#ffffff61!important;border-color:transparent!important;transform:none!important;box-shadow:none!important;cursor:not-allowed;opacity:1!important}.btn-outline.btn-demo:disabled{background-color:transparent!important;border:1.5px solid rgba(255,255,255,.12)!important}.btn-text.btn-demo:disabled,.btn-link.btn-demo:disabled{background-color:transparent!important}.light-mode .btn-demo:disabled:not(.btn-ios),.light-mode .btn-link:disabled{background-color:#0000001f!important;background-image:none!important;color:#00000061!important}.light-mode .btn-outline.btn-demo:disabled{border-color:#0000001f!important}.btn-ios:disabled{opacity:.38;cursor:not-allowed}.progress-indicators-playground{display:flex;flex-direction:column;gap:24px;padding:10px 0}.progress-indicator-row{display:flex;align-items:center;gap:16px;font-size:14px}.progress-indicator-row.linear-row{flex-direction:column;align-items:flex-start;gap:8px}.apps-circular-progress{width:32px;height:32px;border:3.5px solid var(--divider-color);border-top:3.5px solid var(--primary-color);border-radius:50%;animation:spin 1s cubic-bezier(.4,0,.2,1) infinite}.apps-linear-progress-indeterminate{width:100%;height:4px;background-color:var(--divider-color);border-radius:2px;position:relative;overflow:hidden}.apps-linear-progress-indeterminate .bar{position:absolute;height:100%;background:var(--primary-gradient);border-radius:2px;animation:linearIndeterminate 1.5s cubic-bezier(.4,0,.2,1) infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes linearIndeterminate{0%{left:-35%;width:35%}50%{left:100%;width:25%}to{left:100%;width:0%}}.avatar-playground{display:flex;gap:24px;align-items:center;padding:10px 0}.avatar-item{display:flex;flex-direction:column;align-items:center;gap:8px}.avatar-item .label{font-size:12px;color:var(--text-muted)}.apps-avatar{width:56px;height:56px;border-radius:50%;background-color:#7b1fa2;color:#fff;font-size:18px;font-weight:600;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-premium)}.circle-icon-box{width:56px;height:56px;border-radius:50%;background-color:#5d5fef26;color:var(--primary-color);font-size:22px;display:flex;align-items:center;justify-content:center}.async-state-playground{display:flex;flex-direction:column;gap:20px}.async-controls{display:flex;gap:8px;flex-wrap:wrap}.async-controls .btn{flex:1;min-width:80px;border-radius:8px;padding:8px 12px}.async-controls .btn.active{background:var(--primary-gradient);color:#fff;border-color:transparent;box-shadow:var(--shadow-glow)}.async-box-viewport{background-color:var(--bg-color);border:1px solid var(--border-color);border-radius:16px;padding:24px;min-height:120px;display:flex;align-items:center;justify-content:center;position:relative}.async-state-content{display:none;flex-direction:column;align-items:center;gap:8px;text-align:center;animation:fadeIn .3s ease-in-out}.async-state-content.active{display:flex}.async-state-content .state-label{font-size:14px;font-weight:600;color:var(--text-muted)}.async-state-content .state-desc{font-size:13px;color:var(--text-muted)}.async-state-content .success-icon{font-size:24px;color:#10b981}.async-state-content .error-icon{font-size:24px;color:#ef4444}.async-state-content .error-text{color:#ef4444!important}.titled-card-header-slot{display:flex;align-items:center;gap:10px;background-color:#ffffff08;margin:-30px -30px 10px;padding:16px 30px;border-bottom:1px solid var(--border-color);border-top-left-radius:24px;border-top-right-radius:24px}.light-mode .titled-card-header-slot{background-color:#00000005}.slot-icon{font-size:18px}.bottom-sheet-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#0009;display:flex;align-items:flex-end;justify-content:center;z-index:100;opacity:0;pointer-events:none;transition:var(--transition-smooth)}.bottom-sheet-overlay.open{opacity:1;pointer-events:auto}.bottom-sheet-card{background-color:var(--surface-color);border-top:1px solid var(--border-color);border-top-left-radius:24px;border-top-right-radius:24px;width:100%;max-width:600px;padding:24px 30px 40px;box-shadow:0 -10px 40px #0000004d;transform:translateY(100%);transition:transform .35s cubic-bezier(.25,.8,.25,1);display:flex;flex-direction:column;gap:20px}.bottom-sheet-overlay.open .bottom-sheet-card{transform:translateY(0)}.drag-handle{width:40px;height:4px;background-color:var(--border-color);border-radius:2px;align-self:center}.sheet-header{display:flex;justify-content:space-between;align-items:center}.sheet-header h4{font-size:18px;font-weight:600}.close-sheet-cross{background:transparent;border:none;color:var(--text-muted);font-size:24px;cursor:pointer;line-height:1}.close-sheet-cross:hover{color:var(--text-main)}.sheet-body{display:flex;flex-direction:column;gap:16px}.sheet-body p{color:var(--text-muted);font-size:14px;line-height:1.6}.sheet-body .btn{align-self:flex-end;border-radius:8px}.toast-container{position:fixed;top:30px;left:50%;transform:translate(-50%) translateY(-20px);z-index:200;opacity:0;pointer-events:none;transition:transform .3s cubic-bezier(.25,.8,.25,1),opacity .3s}.toast-container.show{opacity:1;transform:translate(-50%) translateY(0)}.apps-toast{background-color:#15191ef2;border:1px solid var(--border-color);color:#fff;padding:10px 20px;border-radius:24px;font-size:13px;font-weight:500;box-shadow:var(--shadow-premium);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.light-mode .apps-toast{background-color:#fffffff2;color:#000}.snackbar-container{position:fixed;bottom:30px;right:30px;z-index:150;transform:translateY(100px);opacity:0;pointer-events:none;transition:transform .3s cubic-bezier(.25,.8,.25,1),opacity .3s}.snackbar-container.show{transform:translateY(0);opacity:1;pointer-events:auto}.apps-snackbar{background-color:#1e242a;border:1px solid var(--border-color);padding:14px 20px;border-radius:12px;display:flex;align-items:center;justify-content:space-between;gap:24px;box-shadow:var(--shadow-premium);min-width:320px}.light-mode .apps-snackbar{background-color:#fff}.snackbar-text{font-size:13px;color:var(--text-main)}.snackbar-action{background:transparent;border:none;color:var(--primary-color);font-size:13px;font-weight:600;cursor:pointer;font-family:var(--font-stack)}.snackbar-action:hover{opacity:.8}.apps-banner{display:flex;align-items:flex-start;gap:16px;padding:20px 24px;border-radius:16px;border:1px solid transparent}.apps-banner.info{background-color:#5d5fef26;border-color:#5d5fef33}.apps-banner.info .banner-icon{color:var(--primary-color)}.banner-icon{font-size:20px;line-height:1.2}.banner-body{flex-grow:1;display:flex;flex-direction:column;gap:4px}.banner-body h5{font-size:14px;font-weight:600;margin:0}.banner-body p{font-size:13px;color:var(--text-muted);margin:0;line-height:1.5}.btn-banner-action{background:var(--surface-color);border:1px solid var(--border-color);color:var(--text-main);font-family:var(--font-stack);font-size:12px;font-weight:600;padding:8px 14px;border-radius:8px;cursor:pointer;transition:var(--transition-smooth);white-space:nowrap}.btn-banner-action:hover{background-color:var(--surface-hover)}.empty-state-showcase{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:30px 10px}.empty-state-icon{font-size:32px}.empty-state-showcase h4{font-size:16px;font-weight:600}.empty-state-showcase p{font-size:13px;color:var(--text-muted);max-width:280px;line-height:1.5}.empty-state-showcase .btn{border-radius:8px}.divider-showcase{display:flex;flex-direction:column;gap:24px;margin-top:16px}.showcase-section{display:flex;flex-direction:column;gap:12px}.showcase-section .label{font-size:12px;color:var(--text-muted);font-weight:500;text-transform:uppercase;letter-spacing:.5px}.divider-container{background-color:var(--bg-color);border:1px solid var(--border-color);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:12px}.divider-container.row-layout{flex-direction:row;align-items:center;justify-content:center}.apps-divider.horizontal{width:100%;height:var(--divider-thickness, 1px);background-color:var(--divider-color-val, var(--border-color));transition:height .2s,background-color .2s}.apps-divider.vertical{width:var(--divider-thickness, 1px);height:40px;background-color:var(--divider-color-val, var(--border-color));transition:width .2s,background-color .2s}.spacer-visual{background-color:#5d5fef0d;border:1px dashed var(--primary-color);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--primary-color);font-weight:600;transition:var(--transition-smooth)}.horizontal-spacer{width:var(--spacer-size-val, 16px);height:36px}.vertical-spacer{width:100%;height:var(--spacer-size-val, 16px)}.status-tags-playground{display:flex;flex-direction:column;gap:20px;margin-top:10px}.tag-row{display:flex;flex-wrap:wrap;gap:12px}.status-tag{display:inline-flex;align-items:center;justify-content:center;padding:6px 14px;border-radius:100px;font-size:13px;font-weight:600;line-height:1;border:1px solid transparent;transition:var(--transition-smooth);cursor:pointer;-webkit-user-select:none;user-select:none}.status-tag:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.status-tag:active{transform:translateY(0)}.tag-success{background-color:#10b9811f;color:#10b981;border-color:#10b98133}.tag-success:hover{background-color:#10b98133}.tag-warning{background-color:#f59e0b1f;color:#f59e0b;border-color:#f59e0b33}.tag-warning:hover{background-color:#f59e0b33}.tag-error{background-color:#ef44441f;color:#ef4444;border-color:#ef444433}.tag-error:hover{background-color:#ef444433}.tag-info{background-color:#3b82f61f;color:#3b82f6;border-color:#3b82f633}.tag-info:hover{background-color:#3b82f633}.tag-primary{background-color:#5d5fef26;color:var(--primary-color);border-color:#5d5fef40}.tag-primary:hover{background-color:#5d5fef40}.tag-neutral{background-color:#9ca3af1f;color:var(--text-muted);border-color:#9ca3af33}.tag-neutral:hover{background-color:#9ca3af33}.badge-tooltip-playground{display:flex;flex-wrap:wrap;gap:30px;align-items:center;margin-top:10px}.badge-showcase,.tooltip-showcase{flex:1;min-width:120px;display:flex;justify-content:center;align-items:center}.apps-badge-container{position:relative;display:inline-block}.badge-pill{position:absolute;top:-8px;right:-8px;background-color:#ef4444;color:#fff;font-size:11px;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 5px;border:2px solid var(--surface-color);box-shadow:0 2px 8px #0003;transition:transform .2s cubic-bezier(.175,.885,.32,1.275),opacity .2s;transform-origin:top right}.badge-pill.hidden{transform:scale(0);opacity:0}.badge-base-icon{background-color:var(--surface-hover);border:1px solid var(--border-color);padding:10px 20px;border-radius:12px;font-size:14px;font-weight:500;display:flex;align-items:center;gap:8px}.apps-tooltip-trigger{position:relative;display:inline-block;cursor:pointer;background-color:var(--surface-hover);border:1px dashed var(--primary-color);padding:10px 20px;border-radius:12px;font-size:14px;font-weight:500;-webkit-user-select:none;user-select:none;transition:var(--transition-smooth)}.apps-tooltip-trigger:hover{border-style:solid;background-color:#5d5fef0d}.apps-tooltip-bubble{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%) translateY(4px);background-color:#1f2937;border:1px solid var(--border-color);color:#fff;padding:8px 12px;border-radius:8px;font-size:12px;white-space:nowrap;opacity:0;pointer-events:none;transition:transform .2s cubic-bezier(.25,.8,.25,1),opacity .2s;box-shadow:var(--shadow-premium);z-index:10}.apps-tooltip-bubble:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border-width:6px;border-style:solid;border-color:#1f2937 transparent transparent transparent}.light-mode .apps-tooltip-bubble{background-color:#fff;color:#1f2937}.light-mode .apps-tooltip-bubble:after{border-color:#ffffff transparent transparent transparent}.apps-tooltip-trigger.tooltip-bottom .apps-tooltip-bubble{bottom:auto;top:calc(100% + 10px);transform:translate(-50%) translateY(-4px)}.apps-tooltip-trigger.tooltip-bottom .apps-tooltip-bubble:after{top:auto;bottom:100%;border-color:transparent transparent #1f2937 transparent}.light-mode .apps-tooltip-trigger.tooltip-bottom .apps-tooltip-bubble:after{border-color:transparent transparent #ffffff transparent}.apps-tooltip-trigger.tooltip-left .apps-tooltip-bubble{bottom:auto;top:50%;right:calc(100% + 10px);left:auto;transform:translateY(-50%) translate(4px)}.apps-tooltip-trigger.tooltip-left .apps-tooltip-bubble:after{top:50%;left:100%;transform:translateY(-50%);border-color:transparent transparent transparent #1f2937}.light-mode .apps-tooltip-trigger.tooltip-left .apps-tooltip-bubble:after{border-color:transparent transparent transparent #ffffff}.apps-tooltip-trigger.tooltip-right .apps-tooltip-bubble{bottom:auto;top:50%;left:calc(100% + 10px);transform:translateY(-50%) translate(-4px)}.apps-tooltip-trigger.tooltip-right .apps-tooltip-bubble:after{top:50%;right:100%;left:auto;transform:translateY(-50%);border-color:transparent #1f2937 transparent transparent}.light-mode .apps-tooltip-trigger.tooltip-right .apps-tooltip-bubble:after{border-color:transparent #ffffff transparent transparent}.apps-tooltip-trigger:hover .apps-tooltip-bubble,.apps-tooltip-trigger:focus .apps-tooltip-bubble,.apps-tooltip-trigger.active .apps-tooltip-bubble{opacity:1}.apps-tooltip-trigger:hover .apps-tooltip-bubble,.apps-tooltip-trigger.tooltip-bottom:hover .apps-tooltip-bubble{transform:translate(-50%) translateY(0)}.apps-tooltip-trigger.tooltip-left:hover .apps-tooltip-bubble,.apps-tooltip-trigger.tooltip-right:hover .apps-tooltip-bubble{transform:translateY(-50%) translate(0)}.apps-tooltip-trigger.active .apps-tooltip-bubble,.apps-tooltip-trigger.tooltip-bottom.active .apps-tooltip-bubble{transform:translate(-50%) translateY(0)}.apps-tooltip-trigger.tooltip-left.active .apps-tooltip-bubble,.apps-tooltip-trigger.tooltip-right.active .apps-tooltip-bubble{transform:translateY(-50%) translate(0)}.apps-rating-bar{display:flex;gap:8px;font-size:24px;color:var(--text-muted)}.apps-rating-bar .star{cursor:default;transition:var(--transition-smooth)}.apps-rating-bar:not(.read-only){touch-action:none}.apps-rating-bar:not(.read-only) .star{cursor:pointer}.apps-rating-bar:not(.read-only) .star:hover{transform:scale(1.2)}.apps-rating-bar .star.filled{color:#ffb800}.apps-rating-bar .star.half{background:linear-gradient(90deg,#ffb800 50%,var(--text-muted) 50%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.dropdown-container{position:relative;display:inline-block}.dropdown-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px}.btn-pill{border-radius:9999px;padding:10px 20px}.dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;background-color:var(--surface-color);border:1px solid var(--border-color);border-radius:8px;box-shadow:var(--shadow-premium);z-index:100;min-width:160px;display:none;flex-direction:column;overflow:hidden}.dropdown-menu.open{display:flex}.dropdown-item{padding:10px 16px;font-size:14px;cursor:pointer;transition:var(--transition-smooth);color:var(--text-main)}.dropdown-item:hover{background-color:var(--surface-hover)}.apps-input-floating{position:relative;width:100%}.apps-input-floating .floating-input{cursor:text;width:100%}.apps-input-floating .floating-input-wrapper{cursor:text}.apps-input-floating:focus-within .floating-input-wrapper{border-color:var(--primary-color);box-shadow:0 0 0 2px var(--primary-glow)}.apps-input-floating .floating-input:focus~.floating-label,.apps-input-floating .floating-input:not(:placeholder-shown)~.floating-label{top:0;font-size:12px;color:var(--primary-color);background-color:var(--surface-color);padding:0 4px;transform:translateY(-50%) scale(.9)}.apps-dropdown-floating{position:relative;width:100%}.floating-input-wrapper{position:relative;border:1px solid var(--border-color);border-radius:12px;background-color:var(--surface-color);padding:16px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:var(--transition-smooth)}.apps-dropdown-floating.focused .floating-input-wrapper{border-color:var(--primary-color);box-shadow:0 0 0 2px var(--primary-glow)}.floating-input{border:none;background:transparent;outline:none;color:var(--text-main);font-family:var(--font-stack);font-size:15px;width:90%;cursor:pointer}.floating-label{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:15px;pointer-events:none;transition:all .2s ease}.floating-input:focus~.floating-label,.floating-input:not(:placeholder-shown)~.floating-label,.apps-dropdown-floating.focused .floating-label,.apps-dropdown-floating.has-value .floating-label{top:0;font-size:12px;color:var(--primary-color);background-color:var(--surface-color);padding:0 4px;transform:translateY(-50%) scale(.9)}.floating-chevron{color:var(--text-muted);font-size:12px}.copyable-text-container{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px dashed var(--border-color);border-radius:8px;cursor:pointer;background-color:var(--surface-color);transition:var(--transition-smooth)}.copyable-text-container:hover{border-style:solid;border-color:var(--primary-color);background-color:var(--surface-hover)}.copyable-text-container.copied{border-color:#10b981;color:#10b981;background-color:#10b9810d}.copyable-text-container.copied .text-content{color:#10b981}.expandable-text-container{display:flex;flex-direction:column;gap:4px}.expandable-text-container .text-body{font-size:14px;line-height:1.5;color:var(--text-main);transition:var(--transition-smooth);margin:0!important}.expandable-text-container .text-body.collapsed{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.expandable-text-container .toggle-btn{align-self:flex-start;color:var(--primary-color);font-size:13px;font-weight:600;cursor:pointer}.expandable-text-container .toggle-btn:hover{text-decoration:underline}.layout-preview{display:flex;flex-direction:column;border:1px solid var(--border-color);border-radius:12px;overflow:hidden;height:200px;width:100%}.layout-preview .header-bar{background-color:var(--surface-hover);height:44px;border-bottom:1px solid var(--border-color);display:flex;align-items:center;padding:0 16px;font-weight:600;font-size:14px}.layout-preview .content-wrapper{display:flex;flex-grow:1}.layout-preview .drawer-sidebar{width:60px;background-color:var(--surface-color);border-right:1px solid var(--border-color);display:flex;flex-direction:column;padding:12px 0;align-items:center;gap:16px}.layout-preview .main-view{flex-grow:1;background-color:var(--bg-color);padding:16px;font-size:13px;color:var(--text-muted)}.input-group{display:flex;flex-direction:column;gap:6px;width:100%}.themed-input{width:100%;padding:12px 16px;border-radius:10px;border:1px solid var(--border-color);background-color:var(--surface-color);color:var(--text-main);font-family:var(--font-stack);font-size:14px;outline:none;transition:var(--transition-smooth);box-sizing:border-box}.themed-input:focus{border-color:var(--primary-color);box-shadow:0 0 0 3px var(--primary-glow)}.themed-input::placeholder{color:var(--text-muted);opacity:.7}.input-with-action{position:relative;display:flex;align-items:center;width:100%}.input-with-action .themed-input{padding-right:44px}.input-action-btn{position:absolute;right:12px;background:transparent;border:none;color:var(--text-muted);font-size:16px;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;transition:var(--transition-smooth)}.input-action-btn:hover{color:var(--text-main)}.search-layout{display:flex;align-items:center}.search-layout .search-lead-icon{position:absolute;left:12px;color:var(--text-muted);font-size:14px;pointer-events:none}.search-layout .search-input{padding-left:36px}.search-layout .clear-btn{font-size:18px}.search-layout .clear-btn.hidden{display:none}.themed-input.valid{border-color:#10b981}.themed-input.valid:focus{box-shadow:0 0 0 3px #10b98126}.themed-input.invalid{border-color:#ef4444}.themed-input.invalid:focus{box-shadow:0 0 0 3px #ef444426}.validation-feedback{font-size:12px;font-weight:500;margin-top:2px;transition:var(--transition-smooth);min-height:18px;display:block}.validation-feedback.valid-feedback{color:#10b981}.validation-feedback.invalid-feedback{color:#ef4444}.component-group-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:32px;width:100%;margin-top:16px}.component-item-group{display:flex;flex-direction:column;gap:12px;width:100%;padding-bottom:0;border-bottom:none}.component-heading{display:flex;flex-direction:column;gap:4px}.component-name{font-size:15px;font-weight:600;color:var(--title-color);margin:0}.component-desc{font-size:12px;font-weight:400;color:var(--subtitle-color);line-height:1.4}.component-demo-wrapper{width:100%;margin-top:8px;background-color:var(--surface-color);border:1px solid var(--border-color);border-radius:16px;padding:24px;display:flex;align-items:center;justify-content:center;min-height:120px;box-shadow:var(--shadow-premium);transition:var(--transition-smooth)}.component-demo-wrapper:hover{transform:translateY(-2px);border-color:var(--primary-glow);box-shadow:0 12px 30px #0000001f}.component-item-group .label{font-weight:600;font-size:12px;color:var(--label-color)}.theme-green{--primary-color: #4ade80;--primary-gradient: linear-gradient(135deg, #16a34a 0%, #4ade80 100%);--primary-glow: rgba(74, 222, 128, .35);--accent-color: #4ade80;--label-color: #4ade80}.theme-green.light-mode{--primary-color: #16a34a;--primary-gradient: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);--primary-glow: rgba(22, 163, 74, .2);--accent-color: #16a34a;--label-color: #16a34a}.theme-purple{--primary-color: #a78bfa;--primary-gradient: linear-gradient(135deg, #7c3aed 0%, #c084fc 100%);--primary-glow: rgba(167, 139, 250, .35);--accent-color: #a78bfa;--label-color: #a78bfa}.theme-purple.light-mode{--primary-color: #7c3aed;--primary-gradient: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);--primary-glow: rgba(124, 58, 237, .2);--accent-color: #7c3aed;--label-color: #7c3aed}.theme-orange{--primary-color: #fbbf24;--primary-gradient: linear-gradient(135deg, #ea580c 0%, #f59e0b 100%);--primary-glow: rgba(251, 191, 36, .35);--accent-color: #fbbf24;--label-color: #fbbf24}.theme-orange.light-mode{--primary-color: #ea580c;--primary-gradient: linear-gradient(135deg, #ea580c 0%, #f97316 100%);--primary-glow: rgba(234, 88, 12, .2);--accent-color: #ea580c;--label-color: #ea580c}.theme-rose{--primary-color: #fb7185;--primary-gradient: linear-gradient(135deg, #e11d48 0%, #fda4af 100%);--primary-glow: rgba(251, 113, 133, .35);--accent-color: #fb7185;--label-color: #fb7185}.theme-rose.light-mode{--primary-color: #e11d48;--primary-gradient: linear-gradient(135deg, #e11d48 0%, #f43f5e 100%);--primary-glow: rgba(225, 29, 72, .2);--accent-color: #e11d48;--label-color: #e11d48}.theme-graphite{--primary-color: #a1a1aa;--primary-gradient: linear-gradient(135deg, #52525b 0%, #71717a 100%);--primary-glow: rgba(161, 161, 170, .35);--accent-color: #a1a1aa;--label-color: #a1a1aa}.theme-graphite.light-mode{--primary-color: #52525b;--primary-gradient: linear-gradient(135deg, #27272a 0%, #3f3f46 100%);--primary-glow: rgba(82, 82, 91, .2);--accent-color: #52525b;--label-color: #52525b}#color-scheme-menu{right:0;left:auto}.shimmer-playground{width:100%;padding:24px;background-color:var(--surface-color);border-radius:12px;border:1px solid var(--border-color)}.shimmer-item{display:flex;gap:16px;align-items:center;width:100%}.shimmer-avatar{width:48px;height:48px;border-radius:50%;background:#20252b}.light-mode .shimmer-avatar{background:#e2e8f0}.shimmer-lines{flex:1;display:flex;flex-direction:column;gap:10px}.shimmer-line{height:14px;border-radius:6px;background:#20252b}.light-mode .shimmer-line{background:#e2e8f0}.line-long{width:70%}.line-short{width:45%}.shimmer-anim{position:relative;overflow:hidden}.shimmer-anim:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;transform:translate(-100%);background:linear-gradient(90deg,#fff0,#ffffff0d 20%,#ffffff1f 60%,#fff0 1000%);animation:shimmer-swipe 1.6s infinite}.light-mode .shimmer-anim:after{background:linear-gradient(90deg,#fff0,#fff6 20%,#fff9,#fff0)}@keyframes shimmer-swipe{to{transform:translate(100%)}}.playground-container{position:relative;width:100%;margin-top:36px;display:flex;flex-direction:column}.config-tab-btn{position:absolute;top:0;right:24px;transform:translateY(-100%);background-color:var(--config-bg);border:1px solid var(--border-color);border-bottom:none;border-radius:8px 8px 0 0;padding:6px 16px;font-family:var(--font-stack);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;gap:6px;z-index:3;transition:var(--transition-smooth);box-shadow:0 -4px 10px #0000000d}.config-tab-btn:hover{color:var(--primary-color);background-color:var(--surface-hover)}.config-tab-btn .tab-icon{font-size:12px;display:inline-block;transition:transform .3s ease}.playground-container.config-expanded .config-tab-btn{color:var(--primary-color);background-color:var(--config-bg);box-shadow:none}.playground-container.config-expanded .config-tab-btn .tab-icon{transform:rotate(45deg)}.demo-card-front{position:relative;z-index:2;background-color:var(--surface-color);border:1px solid var(--border-color);border-radius:12px;padding:32px;width:100%;box-sizing:border-box;box-shadow:var(--shadow-premium);transition:border-radius .35s cubic-bezier(.25,.8,.25,1)}.config-card-back{position:relative;z-index:1;background-color:var(--config-bg);border:1px solid var(--border-color);border-radius:0 0 12px 12px;margin-top:-16px;max-height:28px;overflow:hidden;transition:max-height .4s cubic-bezier(.25,.8,.25,1),margin-top .4s cubic-bezier(.25,.8,.25,1),box-shadow .4s ease;box-shadow:0 4px 20px #00000026;box-sizing:border-box}.playground-container.config-expanded .config-card-back{max-height:800px;margin-top:-4px;box-shadow:var(--shadow-premium)}.config-card-content{padding:28px 24px 24px;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;display:flex;flex-direction:column;gap:20px;width:100%;box-sizing:border-box}.playground-container.config-expanded .config-card-content{opacity:1;visibility:visible;transition:opacity .3s ease .1s,visibility .3s ease .1s}.config-title{font-size:13px;font-weight:700;color:var(--primary-color);text-transform:uppercase;letter-spacing:.8px;margin-bottom:4px;border-bottom:1px solid var(--divider-color);padding-bottom:8px}.config-option{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%}.config-option .label-text{font-size:14px;font-weight:600;color:var(--text-main)}body.embed-mode .sidebar,body.embed-mode .main-header,body.embed-mode .parallax-banner{display:none!important}body.embed-mode .content-area{margin:0;padding:0}body.embed-mode .grid-container{padding:16px}body.embed-mode .showcase-card{box-shadow:none}.showcase-card.highlight-target{animation:demo-embed-highlight 2.2s ease-out}@keyframes demo-embed-highlight{0%{box-shadow:0 0 0 3px var(--primary-color)}to{box-shadow:none}}@media (max-width: 860px){.sidebar-backdrop{display:block!important;opacity:0;pointer-events:none;transition:opacity .3s ease}body.sidebar-open .sidebar-backdrop{pointer-events:auto;opacity:1!important}.sidebar-toggle-btn{display:flex!important;align-items:center;justify-content:center}.playground-container{margin-top:40px!important}.demo-card-front{padding:16px!important}.config-card-content{padding:20px 16px 16px!important}.control-row{flex-direction:column!important;align-items:stretch!important;gap:12px!important}}.appspiriment-text-wrapper{position:relative;border:1px solid transparent;transition:all .3s cubic-bezier(.25,.8,.25,1)}.appspiriment-text-wrapper.highlighted-selectable{background-color:#3b82f60d!important;border-color:#3b82f64d!important;box-shadow:0 0 12px #3b82f626}.appspiriment-text-wrapper.highlighted-selectable:after{content:"selectable = true";position:absolute;top:-8px;right:8px;background-color:var(--primary-color);color:#fff;font-size:10px;font-weight:700;padding:2px 6px;border-radius:4px;box-shadow:0 2px 4px #0000001a;pointer-events:none;font-family:var(--font-stack);animation:bounceIn .3s cubic-bezier(.175,.885,.32,1.275)}@keyframes bounceIn{0%{transform:scale(.3);opacity:0}50%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}.appspiriment-style-textMedium{font-size:14px!important;font-weight:500!important}.appspiriment-style-titleLarge{font-size:20px!important;font-weight:700!important;letter-spacing:-.5px}.appspiriment-style-bodySmall{font-size:12px!important;font-weight:400!important;color:var(--text-muted)!important}.appspiriment-color-default{color:var(--text-main)!important}.appspiriment-color-primary{color:var(--primary-color)!important}.appspiriment-color-success{color:#10b981!important}.appspiriment-color-error{color:#ef4444!important}