@import"https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap";.auth-container{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#141414;padding:20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;height:100vh;box-sizing:border-box;gap:32px}.auth-logo{width:64px;height:auto;margin-bottom:24px}.auth-card{display:flex;flex-direction:column;gap:16px;background:#181818;border:1px solid #1E1F21;border-radius:24px;width:100%;max-width:420px;padding:40px}.auth-header{text-align:center;margin-bottom:12px}.auth-header h1{margin:0;font-size:24px;font-weight:700;color:#fff}.auth-header p{margin-top:0;margin-bottom:16px;font-size:16px;color:gray;line-height:1.5}.auth-form{display:flex;flex-direction:column;gap:24px}.form-group{display:flex;flex-direction:column;gap:16px}.form-group label{font-size:14px;font-weight:500;color:#fff;display:block}.form-group input{padding:16px 20px;border:1px solid #323232;border-radius:8px;font-size:14px;transition:all .2s;font-family:inherit;background:#141414;color:#fff}.form-group input:focus{outline:none;border-color:#fff}.form-group input:disabled{background-color:#141414;color:#707070;cursor:not-allowed}.form-group small{font-size:12px;color:#707070}.google-auth-button{display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 16px;background:#242424;color:#fff;border:1px solid #323232;border-radius:8px;font-size:16px;font-weight:400;cursor:pointer;transition:all .1s;width:100%;font-family:inherit}.google-auth-button:hover:not(:disabled){background:#323232;border-color:#505050}.google-auth-button:disabled{opacity:.7;cursor:not-allowed}.google-icon{flex-shrink:0}.email-auth-button{display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 16px;background:#1a1a1a;color:#fff;border:1px solid #242424;border-radius:8px;font-size:16px;font-weight:400;cursor:pointer;transition:all .1s;width:100%;font-family:inherit}.email-auth-button:hover:not(:disabled){background:#323232;border-color:#505050}.email-auth-button:disabled{opacity:.7;cursor:not-allowed}.email-toggle-button{padding:12px 16px;border:none;background:transparent;color:#707070;border-radius:6px;font-size:14px;font-weight:400;cursor:pointer;text-align:center;width:100%;transition:all .2s}.email-toggle-button:hover:not(:disabled){background:#1f1f1f;color:#a3a3a3}.email-toggle-button:disabled{opacity:.6;cursor:not-allowed}.auth-divider{display:flex;align-items:center;text-align:center;color:#707070;font-size:14px}.auth-divider:before,.auth-divider:after{content:"";flex:1;border-bottom:1px solid #323232}.auth-divider span{padding:0 16px}.auth-error{background-color:#2a1a1a;color:#ff6b6b;padding:12px 16px;border-radius:4px;border-left:4px solid #dc2626;font-size:14px;margin-bottom:20px}.auth-success{background-color:#1a2a1a;color:#4ade80;padding:12px 16px;border-radius:4px;border-left:4px solid #22c55e;font-size:14px;margin-bottom:20px}.auth-footer{text-align:center;padding:24px;border-radius:8px;border:1px solid #242424;margin-top:24px}.auth-footer p{margin:0;font-size:14px;color:#707070}.auth-footer a{color:#fff;text-decoration:none;font-weight:500;margin-left:8px}.auth-footer a:hover{color:#fff;text-decoration:underline}.account-page-content{flex:1;display:flex;flex-direction:column;gap:32px;max-width:800px;margin:0 auto;padding:128px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.account-container{max-width:800px;margin:0 auto;padding:40px 20px;background:#0a0a0a;min-height:100vh;height:100vh;box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;overflow-y:auto}.account-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;color:#fff}.account-header h1{margin:0;font-size:32px;font-weight:700;color:#fff}.logout-button,.logout-button:hover{padding:12px 16px;border:none;background:#1f1f1f;border-radius:6px;cursor:pointer;font-size:15px;font-weight:400;color:#a3a3a3;text-align:left;width:fit-content;position:relative;text-decoration:none}.account-card{background:#141414;border:1px solid #1E1F21;border-radius:12px;padding:24px}.account-card h2{margin:0 0 32px;font-size:20px;font-weight:700;color:#fff}.plan-switcher{display:flex;flex-direction:column;gap:12px}.plan-switcher label{font-size:14px;font-weight:500;color:#707070}.plan-select{padding:12px 16px;border:1px solid #323232;border-radius:8px;font-size:14px;font-weight:400;background:#141414;color:#fff;cursor:pointer;font-family:inherit;transition:all .2s;width:100%;max-width:300px}.plan-select:focus{outline:none;border-color:#fff}.plan-select:disabled{opacity:.6;cursor:not-allowed}.plan-loading{font-size:14px;color:#707070;font-style:italic}.profile-info{display:flex;flex-direction:column;gap:20px}.info-item{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding-bottom:20px;border-bottom:1px solid #1E1F21}.info-item label{font-weight:500;color:gray;font-size:14px}.info-item p{margin:0;color:#fff;font-size:14px}.edit-button{padding:12px 16px;border:none;background:#1f1f1f;border-radius:6px;cursor:pointer;font-size:15px;font-weight:400;color:#a3a3a3;text-align:left;width:fit-content;position:relative;text-decoration:none}.edit-button:hover:not(:disabled){padding:12px 16px;border:none;background:#323232;border-radius:6px;cursor:pointer;font-size:15px;font-weight:400;color:#a3a3a3;text-align:left;width:fit-content;position:relative;text-decoration:none}.edit-button:disabled{opacity:.5;cursor:not-allowed}.link-google-button{padding:12px 16px;border:none;background:#1f1f1f;border-radius:6px;cursor:pointer;font-size:15px;font-weight:400;color:#a3a3a3;text-align:left;width:fit-content;position:relative;text-decoration:none}.link-google-button:hover:not(:disabled){padding:12px 16px;border:none;background:#323232;border-radius:6px;cursor:pointer;font-size:15px;font-weight:400;color:#a3a3a3;text-align:left;width:fit-content;position:relative;text-decoration:none}.link-google-button:disabled{padding:12px 16px;border:none;background:#1f1f1f;border-radius:6px;cursor:pointer;font-size:15px;font-weight:400;color:#a3a3a3;text-align:left;width:fit-content;position:relative;text-decoration:none;opacity:.6;cursor:not-allowed}.edit-form{display:flex;flex-direction:column;gap:20px}.form-actions{display:flex;gap:12px;margin-top:8px}.cancel-button{padding:12px 16px;border:none;background:#1f1f1f;border-radius:6px;cursor:pointer;font-size:15px;font-weight:400;color:#a3a3a3;text-align:left;width:fit-content;position:relative;text-decoration:none}.cancel-button:hover:not(:disabled){padding:12px 16px;border:none;background:#323232;border-radius:6px;cursor:pointer;font-size:15px;font-weight:400;color:#a3a3a3;text-align:left;width:fit-content;position:relative;text-decoration:none}.plan-display{border-radius:8px;padding:24px;display:flex;flex-direction:column;gap:20px;background:#0596681a}.plan-badge{display:inline-block;width:fit-content;padding:8px 12px;color:#fff;border-radius:6px;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.5px}.plan-status{display:flex;align-items:center;gap:8px}.status-text{margin:0;font-size:16px;font-weight:600;color:#fff}.plan-features{display:flex;flex-direction:column;gap:12px}.plan-features h3{margin:0;font-size:14px;font-weight:600;color:#707070}.plan-features ul{margin:0;padding-left:20px;list-style:none}.plan-features li{padding:6px 0;color:#fff;font-size:14px}.upgrade-button{align-self:flex-start;padding:12px 24px;background:#667eea;color:#fff;border:none;border-radius:4px;font-size:16px;font-weight:500;cursor:pointer;transition:all .3s;margin-top:8px}.settings-group{display:flex;flex-direction:column;gap:12px}.settings-button{padding:12px 16px;border:none;background:#1f1f1f;border-radius:6px;cursor:pointer;font-size:15px;font-weight:400;color:#a3a3a3;text-align:left;width:fit-content;position:relative;text-decoration:none}.settings-button:hover:not(:disabled){padding:12px 16px;border:none;background:#323232;border-radius:6px;cursor:pointer;font-size:15px;font-weight:400;color:#a3a3a3;text-align:left;width:fit-content;position:relative;text-decoration:none}.settings-button:disabled{opacity:.5;cursor:not-allowed}.settings-button.danger{color:#dc2626}.settings-button.danger:hover:not(:disabled){background-color:#2a1a1a;color:#ff6b6b}.dialog-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;opacity:0;animation:fadeIn .2s ease-out forwards}.dialog-overlay.dialog-closing{animation:fadeOut .2s ease-out forwards;pointer-events:none}.dialog-content{background:#1a1a1a;border:1px solid #1E1F21;border-radius:8px;width:100%;max-width:420px;padding:40px;box-shadow:0 4px 6px #0000004d;transform:scale(.95);opacity:0;animation:zoomIn .2s ease-out forwards}.dialog-content.dialog-closing{animation:zoomOut .2s ease-out forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes zoomIn{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}@keyframes zoomOut{0%{transform:scale(1);opacity:1}to{transform:scale(.95);opacity:0}}.dialog-title{margin:0 0 24px;font-size:28px;font-weight:700;color:#fff}.dialog-form{display:flex;flex-direction:column;gap:20px}.dialog-actions{display:flex;flex-direction:row;gap:12px;justify-content:flex-end;margin-top:8px;width:fit-content}.dialog-actions .auth-button,.dialog-actions .cancel-button,.dialog-actions .settings-button{padding:12px 16px;border:none;background:#1f1f1f;border-radius:6px;cursor:pointer;font-size:15px;font-weight:400;color:#a3a3a3;text-align:left;width:fit-content;position:relative;text-decoration:none;margin-top:0;white-space:nowrap}.dialog-actions .auth-button:hover:not(:disabled),.dialog-actions .cancel-button:hover:not(:disabled),.dialog-actions .settings-button:hover:not(:disabled){padding:12px 16px;border:none;background:#323232;border-radius:6px;cursor:pointer;font-size:15px;font-weight:400;color:#a3a3a3;text-align:left;width:fit-content;position:relative;text-decoration:none}.dialog-actions .auth-button:disabled,.dialog-actions .cancel-button:disabled,.dialog-actions .settings-button:disabled{opacity:.6;cursor:not-allowed}.dialog-actions .settings-button.danger{color:#dc2626}.dialog-actions .settings-button.danger:hover:not(:disabled){background-color:#2a1a1a;color:#ff6b6b}@font-face{font-family:Seriously Nostalgic Italic;src:url(../plugins/situ-design/assets/fonts/seriouslynostalgicital-reg-webfont.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}body{margin:0;background:#141414}.app{height:100vh;color:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.6;isolation:isolate;contain:layout style}.app *,.app *:before,.app *:after{box-sizing:border-box}.app [data-inspector-container=true],.app [data-situ-design-plugin=true],.app .situ-design-plugin,.app .situ-design-inspector-container{all:revert;isolation:auto!important;contain:none!important}.app-header{margin-right:56px;margin-left:56px}.header-content{padding-left:32px;height:56px;display:flex;justify-content:space-between;align-items:center;max-width:1328px;margin:0 auto;border-left:1px solid #1E1F21;border-right:1px solid #1E1F21}.header-left{display:flex;align-items:center;gap:1rem}.logo{color:#fff;display:flex;align-items:center}.version-badge{background:#141414;color:#a3a3a3;padding:4px 8px;border-radius:.25rem;font-size:10px;font-weight:500}.header-right{display:flex;align-items:center;gap:.75rem}.auth-buttons{display:flex;align-items:center;gap:1px}.auth-button{display:flex;align-items:center;justify-content:center;padding:4px 12px;border:none;background:transparent;border-radius:0;cursor:pointer;font-size:15px;font-weight:400;color:#707070;text-decoration:none;transition:all .2s;position:relative}.auth-button:hover{background:#141414;color:#fff;display:flex;align-items:center;justify-content:center;padding:2px 8px;border:none;background:transparent;border-radius:0;cursor:pointer;font-size:15px;font-weight:400;text-decoration:none;position:relative}.register-button{background:transparent;color:#fff;display:flex;align-items:center;justify-content:center;height:56px;padding:2px 32px;border-radius:0;cursor:pointer;font-size:15px;font-weight:400;text-decoration:none;position:relative}.register-button:hover{background:#141414}.vs-code-icon{width:22px;margin-right:12px;opacity:1}.logout-button{color:#dc2626}.logout-button:hover{background:#2a1a1a;color:#ff6b6b}.get-extension-text{background:linear-gradient(90deg,gray,gray,#fff,gray,gray);background-size:200% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradient-shift 2s linear infinite}@keyframes gradient-shift{0%,to{background-position-x:-100%}0%{background-position-x:50%}to{background-position-x:-150%}}.app-body{display:flex;justify-content:center;height:calc(100vh - 49px);border-top:1px solid #1E1F21}.content-container{display:flex;position:relative;max-width:1328px;width:100%;margin-right:56px;margin-left:56px;border-left:1px solid #1E1F21;border-right:1px solid #1E1F21;padding-left:32px}.section-nav{width:230px;position:absolute;top:32px;right:32px;z-index:1200;pointer-events:auto}.section-nav .navbar-nav{gap:1px}.content-container>.section-nav{margin-left:0}.section-nav-item{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border:none;background:transparent;border-radius:6px;cursor:pointer;font-size:15px;font-weight:400;color:#606060;text-align:left;width:100%;position:relative;text-decoration:none;transition:all .2s}.section-nav-item:hover{background:#191919;color:#fff}.section-nav-item.active{background:transparent;color:#fff}.navbar{display:flex;flex-direction:column;width:220px;padding:32px 0 256px;overflow-y:auto;gap:12px}.navbar{scrollbar-width:none;-ms-overflow-style:none}.navbar::-webkit-scrollbar{display:none}.navbar-section{margin-bottom:0}.navbar-section-title{color:#707070;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-left:10px}.navbar-nav{display:flex;flex-direction:column;gap:1px}.navbar-item{display:flex;align-items:center;justify-content:space-between;padding:4px 8px 4px 12px;border:none;background:transparent;border-radius:6px;cursor:pointer;font-size:15px;font-weight:400;color:#a3a3a3;text-align:left;width:100%;position:relative;text-decoration:none}.navbar-item:hover{background:#191919;color:#fff}.navbar-item.active{background:#202020;color:#fff}.badge{background:#202020;color:gray;padding:1px 6px;border-radius:4px;font-size:10px;font-weight:400;margin-left:8px}.badge-warning{background:#f59e0b24;color:#f59e0b}.badge-beta{background:#05966832;color:#059669;opacity:0}.navbar-item:hover .badge-beta,.navbar-item.active .badge-beta{opacity:1}.main-content{flex:1;padding:0 48px}.scroll-area{height:100%;width:100%;border-radius:0;padding-right:256px}@media (max-width: 1440px){.content-container:has(~[data-situ-sidebar-open=true]) .section-nav{display:none}body:has(.situ-design-sidebar:not(.situ-design-hidden)) .section-nav{display:none}body:has(.situ-design-sidebar:not(.situ-design-hidden)) .scroll-area{padding-right:0}}@media (max-width: 1320px){.section-nav{display:none}.scroll-area{padding-right:0}}.scroll-viewport{height:100%;width:100%}.scroll-content{padding:0}.scroll-scrollbar{width:8px;background:transparent;border-radius:0}.scroll-scrollbar:hover{background:#ffffff0d}.scroll-scrollbar[data-orientation=vertical]{right:-48px!important;top:0;bottom:0}.scroll-scrollbar[data-orientation=horizontal]{height:8px;bottom:0;left:0;right:0}.scroll-thumb{background:#141414;border-radius:0}.scroll-thumb:hover{background:#262626}.scroll-thumb[data-orientation=vertical]{width:100%;min-height:20px}.scroll-thumb[data-orientation=horizontal]{height:100%;min-width:20px}.scroll-corner{background:transparent}.content-section{display:flex;flex-direction:column;max-width:none;gap:64px;padding-top:64px;padding-bottom:256px}.content-header{display:flex;flex:1;flex-direction:column;align-items:flex-start;gap:24px}.content-header h1{font-size:32px;font-weight:600;margin:0;color:#fff;line-height:1}.content-header h2{font-size:24px;font-weight:600;color:#fff;margin:0}.content-section .content-header h3{font-size:22px;font-weight:600;color:#fff;margin:0;line-height:1}.content-header h4{font-size:16px;font-weight:600;color:#fff;margin:0}.content-header h5{font-size:1rem;font-weight:600;color:#fff;margin:0}.content-header h6{font-size:.875rem;font-weight:600;color:#fff;margin:0}.brand-text{font-family:Seriously Nostalgic Italic,cursive;line-height:1}.content-header p{font-size:17px;color:#a3a3a3}.content-body{display:flex;flex-direction:column;gap:12px}.content-body h3{font-size:17px!important;font-weight:600!important;color:#a3a3a3}.content-body p{color:#fff!important;font-size:17px}.column{display:flex;flex-direction:column}.features-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin:32px 0}.feature-item{display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px;background:#1a1a1a;border:1px solid #404040;border-radius:12px;transition:all .2s ease}.feature-item:hover{background:#2a2a2a;border-color:#3b82f6}.feature-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;background:#3b82f6;border-radius:8px;color:#fff}.feature-text{font-size:16px;font-weight:500;color:#fff;text-align:center}.markdown-toggle{display:flex;align-items:center;gap:.5rem;background:transparent;border:1px solid #404040;border-radius:.375rem;padding:.5rem .75rem;color:#a3a3a3;font-size:.875rem;cursor:pointer;transition:all .2s}.markdown-toggle:hover{border-color:#666;color:#fff}.content-section h1{font-size:2rem;font-weight:600;color:#fff;margin:0}.content-section h2{font-size:1.875rem;font-weight:600;color:#fff;margin:0}.content-section h3{font-size:1.5rem;font-weight:600;color:#fff;margin:0}.content-section h4{font-size:1.125rem;font-weight:600;color:#fff;margin:0}.content-section h5{font-size:1rem;font-weight:600;color:#fff;margin:0}.content-section h6{font-size:.875rem;font-weight:600;color:#fff;margin:0}.content-section p{color:#a3a3a3;margin:0;line-height:1.7}.content-section code{background:#1a1a1a;color:#fff;padding:.125rem .375rem;border-radius:.25rem;font-family:Space Mono,Monaco,Menlo,Ubuntu Mono,monospace;font-size:.875em}.code-tabs{margin:1.5rem 0}.tab-buttons{display:flex;gap:.5rem;margin-bottom:1rem;border-bottom:1px solid #404040}.tab-button{background:transparent;border:none;border-bottom:2px solid transparent;padding:.5rem 1rem;color:#a3a3a3;font-size:.875rem;cursor:pointer;transition:all .2s}.tab-button:hover{color:#fff}.tab-button.active{color:#fff;border-bottom-color:#3b82f6}.tab-extra{display:flex;align-items:center;gap:1rem;margin-left:auto}.copy-button{background:transparent;border:1px solid #404040;border-radius:.25rem;padding:.25rem .5rem;color:#a3a3a3;font-size:.75rem;cursor:pointer;transition:all .2s}.copy-button:hover{border-color:#666;color:#fff}.code-block{background:#1a1a1a;color:#fff;border-radius:.5rem;padding:1.5rem;font-family:Space Mono,Monaco,Menlo,Ubuntu Mono,monospace;font-size:.875rem;overflow-x:auto;border:1px solid #404040}.code-block pre{margin:0;white-space:pre}.code-block code{background:transparent;padding:0}.show-code-button{background:transparent;border:1px solid #404040;border-radius:.375rem;padding:.75rem 1.5rem;color:#a3a3a3;font-size:.875rem;cursor:pointer;transition:all .2s;margin-top:1rem}.show-code-button:hover{border-color:#666;color:#fff}.json-card{background:#141414;border:1px solid #1E1F21;border-radius:8px;overflow:hidden;margin:1rem 0;position:relative}.json-card-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#141414;border-bottom:1px solid #1E1F21}.json-card-header h4{margin:0;color:#fff;font-size:.875rem;font-weight:600}.copy-button{background:transparent;border:1px solid #404040;border-radius:4px;padding:4px 12px;color:#a3a3a3;font-size:.75rem;cursor:pointer;transition:all .2s}.copy-button:hover{border-color:#666;color:#fff;background:#262626}.json-card-copy-button{position:absolute;top:16px;right:16px;background:#1a1a1a;color:#888;border:none;padding:8px 12px;font-size:12px;font-weight:400;cursor:pointer;border-radius:6px;z-index:10}.json-card-copy-button:hover{background:#202020;color:#aaa}.json-content{margin:0;overflow-x:auto;font-family:Space Mono,monospace;font-size:.813rem;line-height:1.6;color:#a3a3a3}.json-content code{background:transparent;padding:0}.demo-card{background:#141414;background-image:radial-gradient(circle,#333 1px,transparent 1px);background-size:20px 20px;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;border:1px solid #1E1F21;padding:64px;text-align:center;gap:32px;position:relative;border-radius:12px 12px 0 0/12px 12px 0px 0px}.demo-card-instructions{background:#141414;display:flex;flex-direction:column;border-left:1px solid #1E1F21;border-right:1px solid #1E1F21;padding:16px;text-align:center;gap:32px}.demo-card-instructions p{font-size:15px}.demo-card h3{color:#fff;margin:0 0 1rem}.hero-text-card{background:#141414;background-image:radial-gradient(circle,#333 1px,transparent 1px);background-size:20px 20px;display:flex;flex-direction:column;justify-content:center;align-items:center;border:1px solid #1E1F21;padding:64px;text-align:center;position:relative;border-radius:12px}.hero-text-card h3{color:#fff;margin:0 0 1rem}.demo-button{background:#3b82f6;color:#fff;border:none;border-radius:.375rem;padding:.75rem 1.5rem;font-size:.875rem;font-weight:500;cursor:pointer;transition:background-color .2s;margin:1rem 0}.demo-button:hover{background:#2563eb}.layout-examples,.example-section{margin:2rem 0}.example-section h4{color:#fff;margin:0 0 1rem}.flex-demo,.grid-demo{display:flex;gap:1rem;padding:1rem;background:#262626;align-items:flex-start;border-radius:12px;min-height:120px}.grid-demo{display:grid;grid-template-columns:repeat(3,1fr)}.grid-demo-1x2,.grid-demo-2x2{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;padding:1rem;background:#262626;align-items:flex-start;border-radius:12px;min-height:120px}.spacing-demo-column{display:flex;flex-direction:column;gap:1rem;background:#262626;padding:16px;border-radius:12px;min-height:120px}.spacing-demo-row{display:flex;flex-direction:row;gap:1rem;background:#262626;padding:16px;border-radius:12px;min-height:120px}.flex-item,.grid-item,.flex-item-full-width,.grid-item-full-width{display:flex;align-items:center;justify-content:center;height:100%;background:#8a5cf6;color:#fff;padding:1rem;text-align:center;font-size:.875rem;border-radius:6px}.flexbox-showcase{display:flex;flex-direction:column;gap:2rem}.flexbox-example{border:1px solid #404040;padding:1.5rem;background:#0f0f0f}.flexbox-example h4{margin:0 0 1rem;color:#fff;font-size:1rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}.flex-demo.row{display:flex;flex-direction:row;justify-content:flex-start;align-items:flex-start}.flex-demo.column{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start}.flex-demo.space-between{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.flex-demo.center{display:flex;flex-direction:row;justify-content:center;align-items:center;height:100px}.flex-demo.wrap{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:flex-start;height:auto;min-height:120px}.flex-demo.nested{display:flex;flex-direction:row;justify-content:flex-start;align-items:flex-start;gap:1rem}.flex-item.grow{flex-grow:1;background:#f07}.flex-item.nested-parent{background:#8b5cf6;display:flex;flex-direction:column;gap:.5rem;padding:1rem;width:200px}.nested-flex{display:flex;gap:.5rem}.nested-item{background:#f59e0b;color:#1f2937;padding:.5rem;text-align:center;font-size:.875rem}.text-demo{background:#1a1a1a;border:1px solid #404040;padding:2rem;margin:2rem 0}.text-demo h4{color:#fff;margin:1rem 0 .5rem}kbd{background:#262626;border-radius:4px;padding:3px 6px;margin:0 2px;font-size:.75rem;font-weight:500;color:#fff;font-family:Space Mono,monospace}@media (max-width: 768px){.app-body{flex-direction:column}.navbar{width:100%;padding:1rem 0}.navbar-nav{flex-direction:row;overflow-x:auto;padding:0 1rem}.navbar-item{white-space:nowrap;min-width:fit-content;border-right:none;border-bottom:2px solid transparent}.navbar-item.active{border-right:none;border-bottom-color:#3b82f6}.header-content{flex-direction:column;gap:1rem;text-align:center}.main-content{padding:1.5rem}.content-header{flex-direction:column;gap:1rem;align-items:flex-start}}.element-demo{display:flex;flex-direction:column;gap:1rem;margin-top:1rem}.form-elements{display:flex;flex-direction:column;gap:.75rem;padding:1rem;background:#1a1a1a;border-radius:8px;border:1px solid #262626}.form-elements input,.form-elements select,.form-elements textarea{padding:.75rem;background:#0a0a0a;border:1px solid #404040;border-radius:6px;color:#fff;font-size:.875rem;transition:border-color .2s ease}.form-elements input:focus,.form-elements select:focus,.form-elements textarea:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.form-elements input::placeholder,.form-elements textarea::placeholder{color:#6b7280}.form-elements textarea{min-height:80px;resize:vertical}.form-elements select{cursor:pointer}.form-elements select option{background:#0a0a0a;color:#fff}.hero-card{background:#0a0a0a;border:1px solid #202020;border-radius:0;padding:32px}.hero-content{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}.hero-text h3{color:#fff;font-size:1.5rem;font-weight:600}.hero-text p{color:#d1d5db;font-size:1rem;line-height:1.6}.hero-text h4{color:#fff;font-size:1.125rem;font-weight:600}.hero-text ul{margin:0;padding-left:1.5rem;color:#d1d5db}.hero-text li{line-height:1.5}.hero-text strong{color:#fff;font-weight:600}.hero-image,.image-placeholder{display:flex;justify-content:center;align-items:center}.instruction-blocks{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-top:1rem}.instruction-block{padding:1.5rem;background:#1a1a1a;border:1px solid #262626;border-radius:8px;text-align:center}.instruction-block h4{margin:0 0 .5rem;color:#fff;font-size:1rem;font-weight:600}.instruction-block p{margin:0;color:#d1d5db;font-size:.875rem}.color-blocks{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:32px}.color-block{height:120px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:.875rem;text-shadow:0 1px 2px rgba(0,0,0,.5);border-radius:12px}.color-block.primary{background:#ef9108}.gradient-blocks{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin-top:1rem}.gradient-block{height:120px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:.875rem;text-shadow:0 1px 2px rgba(0,0,0,.5);border-radius:12px}.gradient-block.linear-1{background:linear-gradient(45deg,#5a00ea,#ff00d4)}.gradient-block.radial-1{background:radial-gradient(circle,#5508ef,#00ff9d)}.gradient-block.conic{background:conic-gradient(from 0deg,#ef089e,#04d76a,#ef9308,#7808ef,#ef089e)}.shadow-blocks{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem;margin-top:1rem}.shadow-block{height:80px;background:#1a1a1a;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:.875rem}.shadow-block.small{box-shadow:0 1px 3px #0000004d}.shadow-block.medium{box-shadow:0 4px 6px #0000004d}.shadow-block.large{box-shadow:0 10px 15px #0000004d}.shadow-block.colored{box-shadow:0 4px 6px #3b82f64d}.shadow-block.multiple{box-shadow:0 1px 3px #0000004d,0 4px 6px #0003}.shadow-block.inset{box-shadow:inset 0 2px 4px #0000004d}.border-blocks{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem}.border-block{height:120px;background:#1a1a1a;border-radius:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:.875rem}.border-block.solid{border:2px solid #ef9108}.border-block.dashed{border:2px dashed #ef9108}.border-block.dotted{border:2px dotted #ef9108}.border-block.double{border:4px double #ef9108}.border-block.thick{border:6px solid #ef9108}.border-block.rounded{border:2px solid #ef9108;border-radius:20px}.typography-blocks{display:flex;flex-direction:column;gap:1rem;margin-top:1rem}.typography-block{padding:1rem;background:#1a1a1a;border-radius:8px;border:1px solid #262626;color:#fff}.typography-block.heading-1{font-size:32px;font-weight:700;line-height:1.2}.typography-block.body{font-size:1rem;font-weight:400;line-height:1.5}.text-examples h1{margin:0;color:#fff}.text-examples h1{font-size:2rem}.text-examples p{margin:0;color:#d1d5db;line-height:1.6}.text-examples strong{color:#fff;font-weight:600}.text-examples em{color:#fbbf24;font-style:italic}.text-examples span{color:#60a5fa}.text-examples blockquote{margin:0;padding:1rem;background:#1a1a1a;border-left:4px solid #3b82f6;border-radius:0 6px 6px 0;color:#d1d5db;font-style:italic}.text-examples code{background:#1a1a1a;color:#fbbf24;padding:.25rem .5rem;border-radius:4px;font-family:Space Mono,Monaco,Menlo,Ubuntu Mono,monospace;font-size:.875rem}.text-examples pre{margin:0;padding:1rem;background:#0a0a0a;border-radius:6px;border:1px solid #262626;overflow-x:auto}.text-examples pre code{background:transparent;padding:0;color:#d1d5db}.text-examples ul,.text-examples ol{margin:0;padding-left:1.5rem;color:#d1d5db}.text-examples li{margin:.25rem 0}.text-examples dl{margin:0}.text-examples dt{color:#fff;font-weight:600;margin-top:.5rem}.text-examples dd{color:#d1d5db;margin-left:1rem;margin-bottom:.5rem}.media-examples{display:flex;flex-direction:column;gap:2rem;margin-top:1rem}.media-group{display:flex;flex-direction:column;gap:1rem}.media-group h4{margin:0;color:#fff;font-size:1rem;font-weight:600}.image-gallery{display:flex;gap:1rem;flex-wrap:wrap}.image-gallery img{border-radius:6px;border:1px solid #262626}.media-group video,.media-group audio{border-radius:6px;border:1px solid #262626}.card-layout{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}.card{background:#1a1a1a;border:1px solid #262626;border-radius:8px;padding:1.5rem;display:flex;flex-direction:column;gap:1rem}.card h5{margin:0;color:#fff;font-size:1.125rem;font-weight:600}.card p{margin:0;color:#d1d5db;flex:1}.card-button{padding:.5rem 1rem;background:#3b82f6;color:#fff;border:none;border-radius:4px;font-size:.875rem;cursor:pointer;transition:background .2s ease;align-self:flex-start}.card-button:hover{background:#2563eb}.semantic-examples{display:flex;flex-direction:column;gap:1.5rem;margin-top:1rem}.semantic-examples article{background:#1a1a1a;border:1px solid #262626;border-radius:8px;padding:1.5rem}.semantic-examples article header{border-bottom:1px solid #262626;padding-bottom:1rem;margin-bottom:1rem}.semantic-examples article header h4{margin:0;color:#fff;font-size:1.125rem;font-weight:600}.semantic-examples article header time{color:#9ca3af;font-size:.875rem}.semantic-examples article section p{margin:0;color:#d1d5db}.semantic-examples article footer{margin-top:1rem;padding-top:1rem;border-top:1px solid #262626}.semantic-examples article footer small{color:#9ca3af;font-size:.75rem}.semantic-examples aside{background:#1a1a1a;border:1px solid #262626;border-radius:8px;padding:1.5rem}.semantic-examples aside h4{margin:0 0 .5rem;color:#fff;font-size:1rem;font-weight:600}.semantic-examples aside p{margin:0;color:#d1d5db}.semantic-examples details{background:#1a1a1a;border:1px solid #262626;border-radius:8px;padding:1rem}.semantic-examples summary{color:#fff;font-weight:600;cursor:pointer;list-style:none}.semantic-examples summary::-webkit-details-marker{display:none}.semantic-examples details[open] summary{margin-bottom:1rem}.semantic-examples details p{margin:0;color:#d1d5db}.pro-tip{display:flex;align-items:flex-start;padding:24px;background:#202020;border-radius:12px;position:relative;overflow:hidden}.pro-tip-content{display:flex;flex-direction:column;gap:12px}.pro-tip-content h4{color:gray;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin:0}.pro-tip-content p,.pro-tip-text{margin:0;color:#a3a3a3;font-size:15px;line-height:1.7}.beta-section{display:flex;align-items:flex-start;padding:24px;background:#0596681a;border-radius:12px;position:relative;overflow:hidden}.beta-section-content{display:flex;flex-direction:column;gap:12px}.beta-section-content h4{color:#059669;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin:0}.beta-section-text{margin:0;color:#059669;font-size:15px;line-height:1.7}.warning-section{display:flex;align-items:flex-start;padding:24px;background:#f59e0b16;border-radius:12px;position:relative;overflow:hidden}.warning-section-content{display:flex;flex-direction:column;gap:12px}.warning-section-content h4{color:#f59e0b;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}.warning-section-text{margin:0;color:#f59e0b;font-size:15px;line-height:1.7}.flex-list{display:flex;flex-direction:column;width:100%;gap:24px;padding-left:20px;margin:0;list-style:none;counter-reset:flex-counter}.flex-list-item{display:flex;align-items:flex-start;gap:12px;color:#a3a3a3;line-height:1.5;word-wrap:normal;flex-wrap:wrap}.flex-list-item:before{min-width:24px;height:24px;background:#1a1a1a;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:12px;color:gray;font-weight:600;counter-increment:flex-counter;content:counter(flex-counter)}.json-display{margin-top:0}.json-container{overflow:auto}.json-content{margin:0;font-family:Space Mono,Monaco,Menlo,Ubuntu Mono,monospace;font-size:13px;line-height:1.5;color:#e0e0e0;white-space:pre-wrap;word-break:break-all;text-align:left}.json-content .string{color:#ff73da}.json-content .number{color:#ffb36b}.json-content .boolean{color:#6eda43}.json-content .null{color:#c678dd}.json-content .key{color:#83a0ff}.json-content .json-diff-line{display:block;padding:2px 4px;margin:0;border-radius:0;white-space:pre-wrap}.json-content .json-diff-unchanged{background:#0000}.json-content .json-diff-removed{background:#ef448e26}.json-content .json-diff-added{background:#10b98126}.json-card{background:#0a0a0a;display:flex;width:100%;flex-direction:column;border:1px solid #1E1F21;padding:32px;gap:16px;position:relative}.mcp-card{background:#0a0a0a;display:flex;flex-direction:column;border:1px solid #1E1F21;padding:32px;gap:16px;position:relative}.mcp-card .content-header{margin-bottom:16px}.mcp-card .content-header h3{color:#fff;margin:0;font-size:16px;font-weight:600}.edit-viewer-container{background:#141414;display:flex;flex-direction:column;border:1px solid #1E1F21;padding:32px;gap:16px;position:relative;border-radius:0 0 12px 12px/0px 0px 12px 12px}.edit-viewer-switcher{background:#0a0a0a;display:flex;flex-direction:column;position:relative}.edit-viewer-tabs{position:absolute;top:24px;right:24px;display:flex;gap:6px;z-index:1}.edit-tab{background:transparent;color:#888;border:none;padding:8px 12px;font-size:12px;font-weight:400;cursor:pointer;border-radius:6px}.edit-tab:hover{background:#1a1a1a;color:#aaa}.edit-tab.active{background:#262626;color:#fff;border-color:#404040}.edit-viewer-content{margin-top:0}.style-badge{position:absolute;top:24px;right:24px;background:#202020;padding:6px 10px;border-radius:6px;font-size:11px;font-weight:400;border:none;z-index:1}.style-badge:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#323232;margin-right:8px;color:#323232}.style-badge.updated:before{background:#ff4b00;color:#fff}.json-content:empty:before{content:"No inspector edits to display yet. Try editing the solid color block above!";color:#666;font-style:italic}.back-link{color:#a3a3a3;text-decoration:none;font-size:15px;margin-bottom:24px;display:inline-block;transition:color .2s}.back-link:hover{color:#fff}