@charset "UTF-8";:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;min-width:320px;min-height:100vh}#root{width:100%;min-height:100vh}html,body{height:auto;overflow:visible}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}:root{--color-primary: #0066cc;--color-primary-hover: #0052a3;--color-secondary: #6c757d;--color-secondary-hover: #5a6268;--color-success: #28a745;--color-danger: #dc3545;--color-warning: #ffc107;--color-info: #17a2b8;--bg-primary: #ffffff;--bg-secondary: #f8f9fa;--bg-tertiary: #e9ecef;--bg-inverse: #212529;--text-primary: #212529;--text-secondary: #6c757d;--text-muted: #adb5bd;--text-inverse: #ffffff;--border-color: #dee2e6;--border-width: 1px;--border-radius: 4px;--border-radius-lg: 8px;--border-radius-sm: 2px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .1);--shadow-xl: 0 20px 25px rgba(0, 0, 0, .1);--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-family-mono: "Fira Code", "Monaco", "Consolas", monospace;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 2rem;--font-weight-light: 300;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.5rem;--space-6: 2rem;--space-8: 3rem;--border-radius: 0px;--border-radius-sm: 0px;--border-radius-lg: 0px;--navbar-height: 56px;--sidebar-width: 240px;--gutter-size: 8px;--transition-fast: .15s ease-in-out;--transition-base: .25s ease-in-out;--transition-slow: .35s ease-in-out;--z-dropdown: 1000;--z-sticky: 1020;--z-fixed: 1030;--z-modal-backdrop: 1040;--z-modal: 1050;--z-tooltip: 1070}*{box-sizing:border-box}body{margin:0;font-family:var(--font-family);font-size:var(--font-size-base);color:var(--text-primary);background-color:var(--bg-primary);line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:var(--font-family-mono)}.theme-default{--color-primary: #47cf73;--color-primary-hover: #36b863;--color-secondary: #5a5a5a;--color-success: #47cf73;--color-danger: #fc6d5c;--bg-primary: #1e1f26;--bg-secondary: #2b2d3a;--bg-tertiary: #343746;--bg-inverse: #ffffff;--text-primary: #ffffff;--text-secondary: #999999;--text-muted: #666666;--text-inverse: #1e1f26;--border-color: #404553;--border-radius: 0px;--border-radius-sm: 0px;--border-radius-lg: 0px;--editor-bg-html: #2b2d3a;--editor-bg-css: #2b2d3a;--editor-bg-js: #2b2d3a;--pane-header-html: #1e1f26;--pane-header-css: #1e1f26;--pane-header-js: #1e1f26}.theme-dark{--color-primary: #4dabf7;--color-primary-hover: #339af0;--color-secondary: #868e96;--color-success: #51cf66;--color-danger: #ff6b6b;--bg-primary: #1a1b1e;--bg-secondary: #25262b;--bg-tertiary: #2c2e33;--bg-inverse: #f8f9fa;--text-primary: #c1c2c5;--text-secondary: #909296;--text-muted: #5c5f66;--text-inverse: #1a1b1e;--border-color: #373a40;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .5);--shadow-md: 0 4px 6px rgba(0, 0, 0, .5);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .5);--editor-bg-html: #25262b;--editor-bg-css: #2c2e33;--editor-bg-js: #25262b}.theme-brutalism{--color-primary: #ffff00;--color-primary-hover: #ffeb3b;--color-secondary: #ff00ff;--color-success: #00ff00;--color-danger: #ff0000;--bg-primary: #000000;--bg-secondary: #1a1a1a;--bg-tertiary: #333333;--bg-inverse: #ffffff;--text-primary: #ffffff;--text-secondary: #ffff00;--text-muted: #999999;--text-inverse: #000000;--border-color: #ffffff;--border-width: 3px;--border-radius: 0px;--border-radius-sm: 0px;--border-radius-lg: 0px;--shadow-sm: 4px 4px 0px #ffffff;--shadow-md: 6px 6px 0px #ffffff;--shadow-lg: 8px 8px 0px #ffffff;--shadow-xl: 12px 12px 0px #ffffff;--font-weight-normal: 500;--font-weight-bold: 900;--editor-bg-html: #ff0000;--editor-bg-css: #0000ff;--editor-bg-js: #ffff00;--pane-header-html: #ff0000;--pane-header-css: #0000ff;--pane-header-js: #ffff00}.theme-minimal{--color-primary: #000000;--color-primary-hover: #333333;--color-secondary: #666666;--color-success: #000000;--color-danger: #000000;--bg-primary: #ffffff;--bg-secondary: #fafafa;--bg-tertiary: #f5f5f5;--bg-inverse: #000000;--text-primary: #000000;--text-secondary: #666666;--text-muted: #999999;--text-inverse: #ffffff;--border-color: #e0e0e0;--border-width: 1px;--border-radius: 0px;--border-radius-sm: 0px;--border-radius-lg: 0px;--shadow-sm: none;--shadow-md: none;--shadow-lg: none;--shadow-xl: none;--editor-bg-html: #ffffff;--editor-bg-css: #ffffff;--editor-bg-js: #ffffff;--pane-header-html: #000000;--pane-header-css: #333333;--pane-header-js: #666666}*{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary: #1e1f26;--bg-secondary: #2b2d3a;--bg-tertiary: #343746;--bg-editor: #2b2d3a;--border-color: #404553;--text-primary: #ffffff;--text-secondary: #999999;--text-tertiary: #666666;--accent-primary: #47cf73;--accent-hover: #36b863;--accent-danger: #fc6d5c;--accent-danger-hover: #e55a4a;--accent-success: #47cf73;--console-warn: #ffcd1f;--console-error: #fc6d5c;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: "JetBrains Mono", "Consolas", "Monaco", monospace}body{font-family:var(--font-sans);background-color:var(--bg-primary);color:var(--text-primary);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{height:100vh;width:100vw;overflow:hidden}.App{height:100vh;width:100vw;display:flex;flex-direction:column}.main-container{flex:1;display:flex;overflow:hidden}.navbar{height:56px;background-color:var(--bg-secondary);border-bottom:1px solid var(--border-color);border-radius:var(--border-radius-sm);display:flex;align-items:center;justify-content:space-between;padding:0 16px;gap:16px;z-index:100}.navbar__brand{display:flex;align-items:center;gap:12px}.navbar__title{margin:0;font-size:20px;font-weight:600}.navbar__actions{display:flex;align-items:center;gap:8px;flex:1;justify-content:flex-end}.navbar__actions>*{display:flex;align-items:center}.navbar__actions .theme-switcher--icon .btn{height:32px;width:32px;padding:0;display:flex;align-items:center;justify-content:center}:root{--logo-color: #ffffff}.navbar__brand img{filter:brightness(0) invert(1)}.navbar__brand .buildbento-icon-logo{height:50px;width:auto;transform:rotate(-8deg);transition:transform .2s ease}.navbar__brand .buildbento-icon-logo:hover{transform:rotate(0) scale(1.1) translateY(-2px)}.buildbento-text-logo{height:45px;width:auto;padding:5px 0;transition:opacity .3s ease}.buildbento-text-logo:hover{opacity:.8}.buildbento-logo-animated{filter:hue-rotate(0deg) saturate(1.5) brightness(3) drop-shadow(0 0 8px rgba(255,0,255,.3));animation:rainbow-glow 3s ease-in-out infinite;transition:transform .3s ease;border-radius:var(--border-radius)}.theme-default .buildbento-logo-animated{filter:hue-rotate(0deg) saturate(1.5) brightness(3) invert(1) drop-shadow(0 0 8px rgba(30,136,229,.3))}.theme-dark .buildbento-logo-animated{filter:hue-rotate(0deg) saturate(1.8) brightness(4) invert(1) drop-shadow(0 0 8px rgba(77,171,247,.4))}.theme-brutalism .buildbento-logo-animated{filter:hue-rotate(0deg) saturate(2) brightness(5) invert(1) drop-shadow(4px 4px 0px rgba(255,255,0,.8));border-radius:0}.theme-minimal .buildbento-logo-animated{filter:brightness(0) drop-shadow(none);border-radius:0}.buildbento-logo-animated:hover{transform:scale(1.1) rotate(5deg);animation-duration:1s}@keyframes rainbow-glow{0%{filter:hue-rotate(0deg) saturate(1.5) brightness(3) invert(1) drop-shadow(0 0 8px rgba(255,0,100,.4))}16.666%{filter:hue-rotate(60deg) saturate(1.5) brightness(3) invert(1) drop-shadow(0 0 8px rgba(255,100,0,.4))}33.333%{filter:hue-rotate(120deg) saturate(1.5) brightness(3) invert(1) drop-shadow(0 0 8px rgba(100,255,0,.4))}50%{filter:hue-rotate(180deg) saturate(1.5) brightness(3) invert(1) drop-shadow(0 0 8px rgba(0,255,100,.4))}66.666%{filter:hue-rotate(240deg) saturate(1.5) brightness(3) invert(1) drop-shadow(0 0 8px rgba(0,100,255,.4))}83.333%{filter:hue-rotate(300deg) saturate(1.5) brightness(3) invert(1) drop-shadow(0 0 8px rgba(100,0,255,.4))}to{filter:hue-rotate(360deg) saturate(1.5) brightness(3) invert(1) drop-shadow(0 0 8px rgba(255,0,100,.4))}}.toolbar{height:56px;background-color:#1e1f26;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid #2a2b35;box-shadow:0 1px 3px #0000001f}.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;color:#fff;text-decoration:none}.logo svg{color:#47cf73}.toolbar-actions{display:flex;gap:12px;align-items:center}.btn{background-color:#2a2b35;color:#fff;border:1px solid #3a3b45;padding:8px 16px;border-radius:4px;cursor:pointer;font-size:13px;font-weight:500;display:flex;align-items:center;gap:8px;transition:all .3s cubic-bezier(.4,0,.2,1);font-family:var(--font-sans)}.btn:hover{background-color:#34353f;border-color:#4a4b55;transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn svg{width:16px;height:16px}.btn-primary{background-color:#47cf73;border-color:#47cf73;color:#1e1f26;font-weight:600}.btn-primary:hover{background-color:#5dd87a;border-color:#5dd87a;transform:translateY(-1px)}.btn-secondary{background-color:transparent;border-color:var(--border-color);color:var(--text-secondary)}.btn-secondary:hover{color:var(--text-primary);border-color:#404040}.btn-active{background-color:var(--accent-primary);border-color:var(--accent-primary);color:#fff}.btn-small,.clear-all-btn,.chip-remove,.file-tab-close{height:28px;min-width:28px;padding:0 8px;font-size:11px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:6px;background-color:transparent;border:1px solid var(--border-color);color:var(--text-secondary);border-radius:4px;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);font-family:var(--font-sans);white-space:nowrap;text-transform:none;letter-spacing:normal}.btn-small:hover,.clear-all-btn:hover,.chip-remove:hover,.file-tab-close:hover{color:var(--text-primary);border-color:var(--accent-primary);background-color:var(--bg-secondary)}.btn-small svg,.clear-all-btn svg,.chip-remove svg,.file-tab-close svg{width:14px;height:14px;flex-shrink:0}.clear-all-btn:hover,.console-clear-btn:hover{border-color:var(--accent-danger);color:var(--accent-danger)}.chip-remove{background:none;border:none;color:#fff;opacity:.8;padding:2px;height:auto;min-width:auto}.chip-remove:hover{opacity:1;background-color:#ffffff1a;border:none;color:#fff}.grid{flex:1;display:grid;grid-template-columns:1fr 6px 1fr 6px 1fr;grid-template-rows:1fr 6px 1fr;grid-template-areas:"html-editor gutter-col-1 css-editor gutter-col-2 js-editor" "gutter-row gutter-row gutter-row gutter-row gutter-row" "preview preview preview preview preview";background-color:var(--bg-primary);gap:0}.grid.buildbento-layout{grid-template-columns:1fr 6px 1fr 6px 1fr;grid-template-rows:1fr 6px 2fr;grid-template-areas:"html-pane gutter-col-1 css-pane gutter-col-2 js-pane" "gutter-row gutter-row gutter-row gutter-row gutter-row" "preview preview preview preview preview"}.grid.buildbento-layout.with-console{grid-template-rows:1fr 6px 2fr 6px 1fr;grid-template-areas:"html-pane gutter-col-1 css-pane gutter-col-2 js-pane" "gutter-row gutter-row gutter-row gutter-row gutter-row" "preview preview preview preview preview" "gutter-console gutter-console gutter-console gutter-console gutter-console" "console console console console console"}.editor-pane{display:flex;flex-direction:column;background-color:var(--bg-editor);border-radius:1px;margin:8px 4px 4px;border:1px solid var(--border-color);overflow:hidden}.editor .cm-editor,.editor .cm-editor.cm-focused,.editor .cm-scroller{background-color:#1e1e1e!important}.html-pane{grid-area:html-pane;margin-left:4px}.css-pane{grid-area:css-pane}.js-pane{grid-area:js-pane;margin-right:8px}.pane-header{background-color:var(--bg-tertiary);color:var(--text-primary);padding:12px 16px;font-size:13px;font-weight:600;border-bottom:1px solid var(--border-color);border-radius:0;display:flex;justify-content:space-between;align-items:center;min-height:44px}.pane-title{display:flex;align-items:center;gap:8px;color:var(--text-primary)}.pane-title svg{color:var(--accent-primary)}.pane-actions{display:flex;gap:4px}.pane-action{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:4px;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:all .3s cubic-bezier(.4,0,.2,1)}.pane-action:hover{background-color:var(--bg-primary);color:var(--text-primary)}.pane-content{flex:1;overflow:hidden;position:relative}.pane-editor{height:100%;width:100%}.grid.fullscreen-preview{grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:"preview"}.fullscreen-preview .html-pane,.fullscreen-preview .css-pane,.fullscreen-preview .js-pane,.fullscreen-preview .gutter-col-1,.fullscreen-preview .gutter-col-2,.fullscreen-preview .gutter-row-1{display:none}.fullscreen-preview .preview{margin:0;border-radius:0;border:none;height:100%;transform:scale(1);transition:all .4s cubic-bezier(.4,0,.2,1)}.fullscreen-html .html-pane,.fullscreen-css .css-pane,.fullscreen-js .js-pane{box-shadow:0 0 0 1px var(--accent-primary),0 0 20px #47cf7326,0 4px 20px #0000001a}.fullscreen-preview .preview{box-shadow:0 0 30px #47cf7333,0 8px 40px #00000026}.grid.fullscreen-html{grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:"html-pane";height:100vh;width:100vw;position:fixed;top:0;left:0;z-index:1000}.fullscreen-html .editor-pane:not(.html-pane),.fullscreen-html .gutter,.fullscreen-html .preview{display:none}.fullscreen-html .html-pane{margin:0;border-radius:0;transform:scale(1);box-shadow:0 0 0 1px var(--accent-primary);transition:all .4s cubic-bezier(.4,0,.2,1);width:100%;height:100%}.grid.fullscreen-css{grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:"css-pane";height:100vh;width:100vw;position:fixed;top:0;left:0;z-index:1000}.fullscreen-css .editor-pane:not(.css-pane),.fullscreen-css .gutter,.fullscreen-css .preview{display:none}.fullscreen-css .css-pane{margin:0;border-radius:0;transform:scale(1);box-shadow:0 0 0 1px var(--accent-primary);transition:all .4s cubic-bezier(.4,0,.2,1);width:100%;height:100%}.grid.fullscreen-js{grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:"js-pane";height:100vh;width:100vw;position:fixed;top:0;left:0;z-index:1000}.fullscreen-js .editor-pane:not(.js-pane),.fullscreen-js .gutter,.fullscreen-js .preview{display:none}.fullscreen-js .js-pane{margin:0;border-radius:0;transform:scale(1);box-shadow:0 0 0 1px var(--accent-primary);transition:all .4s cubic-bezier(.4,0,.2,1);width:100%;height:100%}.grid.fullscreen-console{display:none}.console-panel[data-fullscreen=true]{position:fixed!important;top:56px!important;left:0!important;width:100vw!important;height:calc(100vh - 56px)!important;z-index:1000!important;margin:0!important;border-radius:0!important;border:none!important;box-shadow:0 -4px 20px #0000004d!important}.editor{display:flex;flex-direction:column;height:100%;overflow:auto;background-color:#1e1e1e;border-radius:0;margin:0;border:none}.html-editor{grid-area:html-editor;margin-left:8px}.css-editor{grid-area:css-editor}.js-editor{grid-area:js-editor;margin-right:8px}.preview{grid-area:preview;background-color:var(--bg-secondary);display:flex;flex-direction:column;position:relative;margin:4px 8px 8px 4px;border-radius:1px;border:1px solid var(--border-color);overflow:hidden;min-height:0}.grid.with-console .preview{margin:4px 8px 4px 4px}.preview-header{background-color:var(--bg-tertiary);color:var(--text-primary);padding:var(--space-2) var(--space-3);font-size:13px;font-weight:600;border-bottom:1px solid var(--border-color);border-radius:1px 1px 0 0;position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center}.preview-actions{display:flex;align-items:center;gap:var(--space-1)}.preview-actions .btn{width:32px;height:32px;padding:0;display:flex;align-items:center;justify-content:center}.editor-title{background-color:var(--bg-tertiary);color:var(--text-primary);padding:10px 16px;font-size:13px;font-weight:600;border-bottom:1px solid var(--border-color);border-radius:8px 8px 0 0}.preview-container{height:100%;display:flex;flex-direction:column}.preview-error{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;text-align:center;gap:16px;min-height:200px}.preview-iframe{flex:1;border:0;background-color:#fff;width:100%;height:100%;overflow:hidden}.gutter{background-color:transparent;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1)}.gutter:after{content:"";position:absolute;background-color:var(--border-color);transition:background-color .15s ease}.gutter:hover:after{background-color:var(--accent-primary)}.gutter-col-1,.gutter-col-2{cursor:col-resize}.gutter-col-1:after,.gutter-col-2:after{width:1px;height:100%;left:50%;transform:translate(-50%)}.gutter-row-1{cursor:row-resize;grid-area:gutter-row}.gutter-row-1:after{height:1px;width:100%;top:50%;transform:translateY(-50%)}.gutter-console{cursor:row-resize;grid-area:gutter-console}.gutter-console:after{height:1px;width:100%;top:50%;transform:translateY(-50%)}.console-panel{grid-area:console;background-color:var(--bg-editor);border-top:1px solid var(--border-color);display:flex;flex-direction:column;border-radius:1px;margin:4px 8px 8px;border:1px solid var(--border-color);overflow:hidden;will-change:height;backface-visibility:hidden;transition:height .1s ease-out}.grid.buildbento-layout.with-console .console-drag-handle{grid-area:gutter-console!important;position:relative;z-index:10;display:flex;align-items:center;justify-content:center}.console-header{background-color:var(--bg-tertiary);padding:8px 16px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border-color);border-radius:0}.console-title-section{display:flex;align-items:center;gap:8px}.console-title-icon{color:var(--accent-primary)}.console-header span{font-size:13px;font-weight:600;color:var(--text-primary)}.console-actions{display:flex;align-items:center;gap:8px}.console-title-section{position:relative}.console-title-section:after{content:"";position:absolute;top:50%;right:-12px;transform:translateY(-50%);width:8px;height:8px;border-radius:50%;background-color:transparent;transition:all .2s ease;border:1px solid transparent}.console-panel[data-debug-mode=true] .console-title-section:after{background-color:var(--accent-primary);border-color:var(--accent-primary)}.console-panel[data-debug-mode=true][data-debug-paused=true] .console-title-section:after{background-color:var(--console-warn);border-color:var(--console-warn);animation:pulse 1.5s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.console-output{flex:1;overflow-y:auto;padding:12px 16px;font-family:var(--font-mono);font-size:12px;line-height:1.6}.console-output::-webkit-scrollbar{width:8px}.console-output::-webkit-scrollbar-track{background:var(--bg-primary)}.console-output::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}.console-output::-webkit-scrollbar-thumb:hover{background:#404040}.console-empty{color:var(--text-tertiary);font-style:italic}.console-line{padding:6px 0;border-bottom:1px solid rgba(255,255,255,.05);display:flex;gap:12px}.console-time{color:var(--text-tertiary);font-size:11px;flex-shrink:0;font-family:var(--font-mono)}.debug-level-select{background:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-secondary);border-radius:4px;padding:2px 6px;font-size:11px;margin:0 4px;cursor:pointer}.debug-level-select:hover{border-color:var(--accent-color)}.debug-level-select:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 2px var(--accent-color-alpha)}.console-content{flex:1;white-space:pre-wrap;word-break:break-all;font-family:var(--font-mono)}.console-log{color:var(--text-primary)}.console-error{color:var(--console-error);background-color:#ef44441a;padding:4px 8px;border-radius:4px}.console-warn{color:var(--console-warn);background-color:#f59e0b1a;padding:4px 8px;border-radius:4px}.console-debug{position:relative;border-left:3px solid var(--accent-primary);padding-left:12px;background-color:#47cf730d}.console-debug:before{content:"🐛";position:absolute;left:-12px;top:50%;transform:translateY(-50%);font-size:10px;opacity:.7}.editor::-webkit-scrollbar,.editor-wrapper::-webkit-scrollbar,.preview::-webkit-scrollbar{width:8px;height:8px}.editor::-webkit-scrollbar-track,.editor-wrapper::-webkit-scrollbar-track,.preview::-webkit-scrollbar-track{background:var(--bg-primary);border-radius:4px}.editor::-webkit-scrollbar-thumb,.editor-wrapper::-webkit-scrollbar-thumb,.preview::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}.editor::-webkit-scrollbar-thumb:hover,.editor-wrapper::-webkit-scrollbar-thumb:hover,.preview::-webkit-scrollbar-thumb:hover{background:#404040}.cm-editor{height:100%!important;font-family:var(--font-mono)!important;font-size:13px!important;line-height:1.6!important;overflow:auto!important}.cm-content{padding:16px!important;min-height:100%!important}.cm-line{padding:0!important}.cm-scroller{overflow:auto!important}@keyframes slideIn{0%{transform:translateY(100%)}to{transform:translateY(0)}}.libraries-panel{position:absolute;top:56px;right:0;width:480px;height:calc(100% - 56px);background-color:var(--bg-secondary);border-left:1px solid var(--border-color);display:flex;flex-direction:column;z-index:20;animation:slideInRight .3s cubic-bezier(.4,0,.2,1);box-shadow:-4px 0 24px #00000080}.libraries-panel.closing{animation:slideOutRight .3s cubic-bezier(.4,0,.2,1)}.libraries-header{background-color:var(--bg-tertiary);padding:16px 20px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border-color)}.libraries-header span{font-size:16px;font-weight:600;color:var(--text-primary);letter-spacing:-.01em}.libraries-content{flex:1;overflow-y:auto;padding:20px}.libraries-content::-webkit-scrollbar{width:8px}.libraries-content::-webkit-scrollbar-track{background:transparent}.libraries-content::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}.library-search{position:relative;margin-bottom:24px}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-tertiary);pointer-events:none}.library-search input{width:100%;padding:12px 16px 12px 44px;background-color:var(--bg-primary);border:1px solid var(--border-color);border-radius:4px;color:var(--text-primary);font-size:14px;font-family:var(--font-sans);transition:all .2s ease}.library-search input:focus{outline:none;border-color:var(--accent-primary);background-color:var(--bg-editor);box-shadow:0 0 0 3px #3b82f61a}.library-search input::placeholder{color:var(--text-tertiary)}.category-filters{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 24px;padding:0 2px}.category-filter-btn{padding:6px 12px;background-color:var(--bg-primary);border:1px solid var(--border-color);border-radius:16px;color:var(--text-secondary);font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease;text-transform:capitalize;white-space:nowrap}.category-filter-btn:hover{background-color:var(--bg-secondary);border-color:var(--accent-primary);color:var(--text-primary)}.category-filter-btn.active{background-color:var(--accent-primary);border-color:var(--accent-primary);color:#fff;font-weight:600}.category-filter-btn:active{transform:scale(.95);transition:all .15s cubic-bezier(.4,0,.2,1)}.active-libraries{margin-bottom:32px}.active-libraries-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.active-libraries h4,.popular-libraries h4{font-size:11px;font-weight:600;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.08em;margin:0}.btn-danger{background-color:var(--accent-danger);color:#fff;border:1px solid var(--accent-danger)}.btn-danger:hover{background-color:var(--accent-danger-hover);border-color:var(--accent-danger-hover)}.btn-danger:active{transform:scale(.95);transition:all .15s cubic-bezier(.4,0,.2,1)}.active-libraries-list{display:flex;flex-wrap:wrap;gap:8px}.active-library-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px 6px 12px;background-color:var(--accent-primary);color:#fff;border-radius:20px;font-size:13px;font-weight:500}.chip-remove{background:none;border:none;color:#fff;opacity:.8;cursor:pointer;padding:0;display:flex;align-items:center;transition:opacity .15s ease}.chip-remove:hover{opacity:1}.chip-remove:active{transform:scale(.9);transition:all .15s cubic-bezier(.4,0,.2,1)}.libraries-grid{display:grid;grid-template-columns:1fr;gap:12px}.library-card{background-color:var(--bg-primary);border:1px solid var(--border-color);border-radius:4px;padding:16px;cursor:pointer;transition:all .2s ease;position:relative;overflow:hidden}.library-card:hover{border-color:#404040;transform:translateY(-2px);box-shadow:0 4px 12px #0000004d}.library-card-active{border-color:var(--accent-primary);background-color:#3b82f60d}.library-card-header{display:flex;align-items:flex-start;gap:12px;margin-bottom:8px}.library-icon-wrapper{width:40px;height:40px;border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.library-info{flex:1}.library-info h5{font-size:15px;font-weight:600;color:var(--text-primary);margin:0 0 2px;letter-spacing:-.01em}.library-version{font-size:12px;color:var(--text-tertiary)}.check-icon{color:var(--accent-primary)}.library-description{font-size:13px;color:var(--text-secondary);line-height:1.5;margin:0 0 12px}.library-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:12px}.library-badges{display:flex;gap:8px}.library-type-badge{font-size:11px;font-weight:500;color:var(--text-tertiary);background-color:var(--bg-tertiary);padding:4px 10px;border-radius:6px;text-transform:uppercase;letter-spacing:.03em}.library-category-badge{font-size:11px;font-weight:500;color:var(--text-tertiary);background-color:var(--bg-secondary);padding:4px 8px;border-radius:4px;text-transform:capitalize}.library-docs-link{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;background-color:transparent;color:var(--text-secondary);text-decoration:none;border-radius:6px;font-size:11px;font-weight:500;transition:all .2s ease;border:1px solid var(--border-color)}.library-docs-link:hover{background-color:var(--accent-primary);color:var(--bg-primary);border-color:var(--accent-primary);transform:translateY(-1px);box-shadow:0 2px 8px #47cf7340}.library-docs-link:active{transform:translateY(0)}.library-docs-link svg{width:12px;height:12px;transition:transform .2s ease}.library-docs-link:hover svg{transform:scale(1.1)}.library-error{background-color:#ef44441a;border:1px solid var(--accent-danger);color:var(--accent-danger);padding:8px 12px;border-radius:6px;margin-bottom:16px;font-size:13px}.console-badge{background-color:var(--accent-primary);color:#fff;font-size:11px;padding:2px 6px;border-radius:10px;margin-left:4px;font-weight:600}.console-icon{display:flex;align-items:center;flex-shrink:0}.editor-language{font-size:11px;color:var(--text-tertiary);font-weight:400;margin-left:4px}.editor-wrapper{flex:1;overflow:auto;min-height:0}.preview-error{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:20px;text-align:center;background-color:var(--bg-tertiary);color:var(--text-secondary)}.preview-error h3{color:var(--accent-danger);margin:0 0 8px;font-size:16px}.preview-error p{margin:0 0 16px;font-size:14px}.error-boundary{position:fixed;top:0;left:0;right:0;bottom:0;background-color:var(--bg-primary);display:flex;align-items:center;justify-content:center;z-index:9999}.error-boundary-content{text-align:center;max-width:600px;padding:40px;background-color:var(--bg-secondary);border-radius:12px;border:1px solid var(--border-color)}.error-icon{margin-bottom:20px}.error-boundary h2{color:var(--text-primary);margin:0 0 8px;font-size:24px;font-weight:600}.error-boundary p{color:var(--text-secondary);margin:0 0 24px;line-height:1.5}.error-actions{display:flex;gap:12px;justify-content:center;margin-bottom:24px}.error-details{text-align:left;margin-top:24px}.error-details summary{color:var(--text-secondary);cursor:pointer;padding:8px 0;font-weight:500}.error-details summary:hover{color:var(--text-primary)}.error-stack{margin-top:16px}.error-stack h4{color:var(--text-primary);margin:16px 0 8px;font-size:14px}.error-stack pre{background-color:var(--bg-primary);padding:12px;border-radius:6px;overflow-x:auto;font-size:12px;color:var(--text-secondary);line-height:1.4;white-space:pre-wrap;word-break:break-word}@media (max-width: 1024px){.libraries-panel{width:100%;right:0;left:0}.grid{grid-template-columns:1fr!important;grid-template-rows:1fr 1fr 1fr 1fr!important;grid-template-areas:"html-editor" "css-editor" "js-editor" "preview"!important}.html-editor,.css-editor,.js-editor{margin:4px 8px}.gutter-col-1,.gutter-col-2{display:none}.gutter-row-1{grid-area:unset;display:none}}@media (max-width: 768px){.toolbar{padding:0 12px;height:56px}.toolbar-actions{gap:6px}.btn span{display:none}.btn{padding:8px;min-width:40px;justify-content:center}.logo span{display:none}.grid{height:calc(100vh - 56px)}.console-panel{height:200px}.error-boundary-content{margin:20px;padding:24px}}@media (max-width: 480px){.editor-title,.preview-header{padding:8px 12px;font-size:12px}.console-header{padding:6px 12px}.libraries-header{padding:12px 16px}}.dropdown{position:relative}.dropdown-menu{position:absolute;top:100%;right:0;margin-top:4px;background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:4px;box-shadow:0 4px 12px #0000004d;z-index:100;min-width:160px;animation:slideInDown .15s ease}.dropdown-item{display:flex;align-items:center;gap:8px;width:100%;padding:10px 16px;background:none;border:none;color:var(--text-primary);font-size:13px;font-weight:500;cursor:pointer;transition:background-color .15s ease;font-family:var(--font-sans)}.dropdown-item:hover{background-color:var(--bg-tertiary)}.dropdown-item:first-child{border-radius:8px 8px 0 0}.dropdown-item:last-child{border-radius:0 0 8px 8px}.dropdown-item.active{color:var(--accent-primary)}@keyframes slideInDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.btn,.btn-small,.btn-primary,.btn-secondary,.btn-user,.dropdown-item,.pane-action{transition:all .3s cubic-bezier(.4,0,.2,1)}.btn:active,.btn-small:active,.btn-primary:active,.btn-secondary:active,.btn-user:active,.dropdown-item:active,.pane-action:active,.clear-all-btn:active,.file-tab-close:active{transform:scale(.95);transition:all .15s cubic-bezier(.4,0,.2,1)}.toolbar-actions .btn:active,.toolbar-actions .btn-active:active{transform:translateY(1px) scale(.98);transition:all .15s cubic-bezier(.4,0,.2,1)}.save-status{display:flex;align-items:center;gap:6px;font-size:12px;padding:4px 8px;border-radius:4px;transition:all .2s ease}.save-status-text{font-weight:500}.save-status-saving{color:var(--console-warn);background-color:#f59e0b1a}.save-status-saved{color:var(--accent-success);background-color:#10b9811a}.save-status-error{color:var(--accent-danger);background-color:#ef44441a}.status-icon{flex-shrink:0}.status-icon.saving{color:var(--console-warn)}.status-icon.saved{color:var(--accent-success)}.status-icon.error{color:var(--accent-danger)}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes slideOutRight{0%{transform:translate(0)}to{transform:translate(100%)}}.import-panel{position:absolute;top:56px;left:0;width:480px;height:calc(100% - 56px);background-color:var(--bg-secondary);border-right:1px solid var(--border-color);display:flex;flex-direction:column;z-index:20;animation:slideInLeft .3s cubic-bezier(.4,0,.2,1);box-shadow:4px 0 24px #00000080}.import-panel.closing{animation:slideOutLeft .3s cubic-bezier(.4,0,.2,1)}.import-header{background-color:var(--bg-tertiary);padding:16px 20px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border-color)}.import-header span{font-size:16px;font-weight:600;color:var(--text-primary);letter-spacing:-.01em}.import-content{flex:1;overflow-y:auto;padding:24px 20px}.import-content::-webkit-scrollbar{width:8px}.import-content::-webkit-scrollbar-track{background:transparent}.import-content::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}.import-message{margin-bottom:20px;padding:12px 16px;border-radius:4px;font-size:14px;font-weight:500}.import-message-success{background-color:#10b9811a;color:var(--accent-success);border:1px solid var(--accent-success)}.import-message-error{background-color:#ef44441a;color:var(--accent-danger);border:1px solid var(--accent-danger)}.import-section{margin-bottom:32px}.import-section h4{font-size:16px;font-weight:600;color:var(--text-primary);margin:0 0 8px}.import-section p{font-size:14px;color:var(--text-secondary);margin:0 0 16px;line-height:1.5}.import-url-section{display:flex;gap:12px;margin-bottom:16px}.import-input{flex:1;padding:12px 16px;background-color:var(--bg-primary);border:1px solid var(--border-color);border-radius:4px;color:var(--text-primary);font-size:14px;font-family:var(--font-sans);transition:all .2s ease}.import-input:focus{outline:none;border-color:var(--accent-primary);background-color:var(--bg-editor);box-shadow:0 0 0 3px #3b82f61a}.import-input::placeholder{color:var(--text-tertiary)}.import-examples{background-color:var(--bg-primary);padding:12px 16px;border-radius:4px;border:1px solid var(--border-color)}.import-examples small{color:var(--text-tertiary);font-weight:600;text-transform:uppercase;font-size:11px;letter-spacing:.05em}.import-examples ul{margin:8px 0 0;padding:0;list-style:none}.import-examples li{font-size:13px;color:var(--text-secondary);font-family:var(--font-mono);margin-bottom:4px}.import-divider{text-align:center;margin:24px 0;position:relative}.import-divider:before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background-color:var(--border-color)}.import-divider span{background-color:var(--bg-secondary);padding:0 16px;color:var(--text-tertiary);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}.file-upload-area{position:relative}.file-input{position:absolute;opacity:0;pointer-events:none}.file-upload-label{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 20px;border:2px dashed var(--border-color);border-radius:12px;cursor:pointer;transition:all .2s ease;background-color:var(--bg-primary)}.file-upload-label:hover{border-color:var(--accent-primary);background-color:#3b82f60d}.file-upload-label svg{margin-bottom:12px;color:var(--text-tertiary)}.file-upload-label span{font-size:14px;font-weight:500;color:var(--text-primary);margin-bottom:4px}.file-upload-label small{font-size:12px;color:var(--text-tertiary)}@keyframes slideInLeft{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideOutLeft{0%{transform:translate(0)}to{transform:translate(-100%)}}@media (max-width: 1024px){.import-panel{width:100%;left:0;right:0}}.file-explorer{width:280px;background-color:var(--bg-editor);border:1px solid var(--border-color);border-radius:1px;margin:8px 4px;display:flex;flex-direction:column;overflow:hidden;min-width:200px;max-width:600px;position:relative}.file-explorer-resize-handle{position:absolute;top:0;right:-7px;width:14px;height:100%;cursor:col-resize;z-index:10;background-color:transparent}.file-explorer-gutter{width:6px;background-color:transparent;cursor:col-resize;position:relative;-webkit-user-select:none;user-select:none}.file-explorer-gutter:after{content:"";position:absolute;width:1px;height:100%;top:0;left:50%;transform:translate(-50%);background-color:var(--border-color);transition:background-color .15s ease}.file-explorer-gutter:hover:after,.file-explorer-gutter.active:after{background-color:var(--accent-primary)}.file-explorer-header{background-color:var(--bg-tertiary);color:var(--text-primary);padding:var(--space-2) var(--space-3);font-size:13px;font-weight:600;border-bottom:1px solid var(--border-color);border-radius:1px 1px 0 0;display:flex;justify-content:space-between;align-items:center;min-height:auto}.file-explorer-header .pane-title{display:flex;align-items:center;gap:8px;color:var(--text-primary)}.file-explorer-header .pane-title .pane-header__icon{color:var(--accent-primary)}.file-explorer-header .pane-actions{display:flex;gap:var(--space-1)}.file-explorer-header .pane-actions .btn{width:32px;height:32px;padding:0;display:flex;align-items:center;justify-content:center}.file-explorer-content{flex:1;overflow-y:auto;padding:8px 0}.file-explorer-footer{background-color:var(--bg-secondary);color:var(--text-secondary);padding:6px 12px;border-top:1px solid var(--border-color);border-radius:0 0 1px 1px;display:flex;justify-content:flex-end;align-items:center;min-height:32px;position:relative}.file-explorer-content::-webkit-scrollbar{width:6px}.file-explorer-content::-webkit-scrollbar-track{background:transparent}.file-explorer-content::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px}.file-item{position:relative}.file-item-header{display:flex;align-items:center;gap:6px;padding:6px 8px;cursor:pointer;transition:all .15s ease;color:var(--text-secondary);font-size:13px;position:relative}.file-item-header:hover{background-color:var(--bg-tertiary);color:var(--text-primary)}.file-item-header.active{background-color:var(--accent-primary);color:#fff}.expand-button{background:none;border:none;color:inherit;cursor:pointer;padding:2px;display:flex;align-items:center;justify-content:center;transition:transform .2s ease;opacity:.7}.expand-button:hover{opacity:1}.expand-button:active{transform:scale(.9);transition:all .15s cubic-bezier(.4,0,.2,1)}.file-name{flex:1;font-family:var(--font-mono);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.delete-button{background:none;border:none;color:var(--text-tertiary);cursor:pointer;padding:2px;opacity:0;transition:all .15s ease;display:flex;align-items:center;justify-content:center}.file-item-header:hover .delete-button{opacity:1}.delete-button:hover{color:var(--accent-danger)}.delete-button:active{transform:scale(.9);transition:all .15s cubic-bezier(.4,0,.2,1)}.context-menu{position:absolute;top:100%;left:0;right:0;background-color:var(--bg-primary);border:1px solid var(--border-color);border-radius:6px;box-shadow:0 4px 12px #0000004d;z-index:100;padding:4px;margin:2px 8px}.context-menu button{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;background:none;border:none;color:var(--text-primary);font-size:12px;cursor:pointer;border-radius:4px;transition:background-color .15s ease;font-family:var(--font-sans)}.context-menu button:hover{background-color:var(--bg-tertiary)}.context-menu button:active{transform:scale(.95);transition:all .15s cubic-bezier(.4,0,.2,1)}.context-menu button.delete-action{color:var(--accent-danger)}.context-menu button.delete-action:hover{background-color:#ef44441a}.context-menu-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:99}.create-item-form{padding:4px 8px}.create-item-form input{width:100%;padding:4px 8px;background-color:var(--bg-primary);border:1px solid var(--accent-primary);border-radius:4px;color:var(--text-primary);font-size:12px;font-family:var(--font-mono);outline:none}.create-item-form input::placeholder{color:var(--text-tertiary)}.file-explorer-footer .file-settings-menu{position:absolute;bottom:100%;right:0;background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:6px;box-shadow:0 4px 12px #0000004d;padding:6px 0;min-width:150px;z-index:100;margin-bottom:4px}.settings-menu-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;background:none;border:none;color:var(--text-primary);font-size:13px;cursor:pointer;transition:background-color .15s ease;font-family:var(--font-sans)}.settings-menu-item:hover{background-color:var(--bg-tertiary)}.settings-menu-divider{height:1px;background-color:var(--border-color);margin:6px 0}.settings-menu-info{padding:6px 12px;font-size:11px;color:var(--text-tertiary);font-family:var(--font-mono)}.settings-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:99}.file-tabs{display:flex;background-color:var(--bg-tertiary);border-bottom:1px solid var(--border-color);overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.file-tabs::-webkit-scrollbar{display:none}.file-tab{display:flex;align-items:center;gap:6px;padding:8px 12px;background:none;border:none;color:var(--text-secondary);font-size:12px;cursor:pointer;white-space:nowrap;border-right:1px solid var(--border-color);transition:all .15s ease;font-family:var(--font-mono)}.file-tab:hover{background-color:var(--bg-secondary);color:var(--text-primary)}.file-tab.active{background-color:var(--bg-editor);color:var(--text-primary);border-bottom:2px solid var(--accent-primary)}.file-tab-close{background:none;border:none;color:var(--text-tertiary);cursor:pointer;padding:2px;opacity:0;transition:all .15s ease;display:flex;align-items:center;justify-content:center}.file-tab:hover .file-tab-close{opacity:1}.file-tab-close:hover{color:var(--accent-danger)}.file-tab-close:active{transform:scale(.9);transition:all .15s cubic-bezier(.4,0,.2,1)}.editor-with-tabs{display:flex;flex-direction:column;height:100%}.editor-content{flex:1;overflow:hidden}@media (max-width: 1024px){.file-explorer{width:100%;z-index:25}.file-explorer-resize-handle{display:none}.grid.with-file-explorer{margin-left:0;width:100vw}}.component-gallery{position:absolute;top:0;right:0;width:600px;height:100%;background-color:var(--bg-secondary);border-left:1px solid var(--border-color);display:flex;flex-direction:column;z-index:20;animation:slideInRight .3s cubic-bezier(.4,0,.2,1);box-shadow:-4px 0 24px #00000080}.gallery-header{background-color:var(--bg-tertiary);padding:16px 20px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border-color)}.gallery-header span{font-size:16px;font-weight:600;color:var(--text-primary);letter-spacing:-.01em}.gallery-content{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:20px}.gallery-content::-webkit-scrollbar{width:8px}.gallery-content::-webkit-scrollbar-track{background:transparent}.gallery-content::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}.gallery-search,.search-input{position:relative}.search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-tertiary);pointer-events:none}.gallery-search input{width:100%;padding:12px 16px 12px 44px;background-color:var(--bg-primary);border:1px solid var(--border-color);border-radius:4px;color:var(--text-primary);font-size:14px;font-family:var(--font-sans);transition:all .2s ease}.gallery-search input:focus{outline:none;border-color:var(--accent-primary);background-color:var(--bg-editor);box-shadow:0 0 0 3px #3b82f61a}.gallery-search input::placeholder{color:var(--text-tertiary)}.gallery-tags{display:flex;flex-direction:column;gap:12px}.tags-header{display:flex;justify-content:space-between;align-items:center}.tags-header span{font-size:13px;font-weight:500;color:var(--text-secondary)}.clear-tags{background:none;border:none;color:var(--accent-primary);font-size:12px;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .15s ease}.clear-tags:hover{background-color:#3b82f61a}.clear-tags:active,.tag-filter:active,.category-tab:active{transform:scale(.95);transition:all .15s cubic-bezier(.4,0,.2,1)}.tags-list{display:flex;flex-wrap:wrap;gap:6px}.tag-filter{background:none;border:1px solid var(--border-color);color:var(--text-secondary);padding:4px 10px;border-radius:12px;font-size:11px;cursor:pointer;transition:all .15s ease;font-family:var(--font-mono)}.tag-filter:hover{border-color:var(--accent-primary);color:var(--text-primary)}.tag-filter.active{background-color:var(--accent-primary);border-color:var(--accent-primary);color:#fff}.gallery-categories{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;-ms-overflow-style:none}.gallery-categories::-webkit-scrollbar{display:none}.category-tab{background:none;border:1px solid var(--border-color);color:var(--text-secondary);padding:8px 16px;border-radius:6px;font-size:13px;cursor:pointer;white-space:nowrap;transition:all .15s ease;font-family:var(--font-sans);font-weight:500}.category-tab:hover{border-color:var(--accent-primary);color:var(--text-primary)}.category-tab.active{background-color:var(--accent-primary);border-color:var(--accent-primary);color:#fff}.gallery-results{flex:1}.results-header{margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border-color)}.results-header span{font-size:14px;color:var(--text-secondary);font-weight:500}.components-grid{display:grid;grid-template-columns:1fr;gap:16px}.component-card{background-color:var(--bg-primary);border:1px solid var(--border-color);border-radius:4px;padding:16px;transition:all .2s ease;position:relative}.component-card[data-category=arcade],.component-card[data-category=puzzle],.component-card[data-category=simple]{background:linear-gradient(135deg,var(--bg-primary) 0%,#1a1d29 100%);border-color:#404553}.component-card[data-category=arcade]:hover{border-color:#10b981;box-shadow:0 4px 20px #10b98133}.component-card[data-category=puzzle]:hover{border-color:#8b5cf6;box-shadow:0 4px 20px #8b5cf633}.component-card[data-category=simple]:hover{border-color:#3b82f6;box-shadow:0 4px 20px #3b82f633}.component-card:hover{border-color:#404040;transform:translateY(-2px);box-shadow:0 4px 12px #0000004d}.component-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}.component-header h4{font-size:16px;font-weight:600;color:var(--text-primary);margin:0;letter-spacing:-.01em}.component-tags{display:flex;gap:4px;flex-wrap:wrap}.tag{font-size:10px;color:var(--text-tertiary);background-color:var(--bg-tertiary);padding:2px 6px;border-radius:4px;font-family:var(--font-mono)}.component-description{font-size:13px;color:var(--text-secondary);line-height:1.5;margin:0 0 12px}.component-files{margin-bottom:16px}.component-files small{font-size:11px;color:var(--text-tertiary);font-weight:500;text-transform:uppercase;letter-spacing:.05em}.file-list{margin-top:6px;display:flex;flex-wrap:wrap;gap:4px}.file-name{font-size:10px;color:var(--text-secondary);background-color:var(--bg-secondary);padding:2px 6px;border-radius:3px;font-family:var(--font-mono)}.no-results{text-align:center;padding:40px 20px;color:var(--text-tertiary)}.no-results svg{margin-bottom:16px;opacity:.5}.no-results h3{font-size:18px;color:var(--text-secondary);margin:0 0 8px}.no-results p{font-size:14px;margin:0}@media (max-width: 1024px){.component-gallery{width:100%;right:0;left:0}}.placeholder-pane{display:flex;flex-direction:column;height:100%;background-color:var(--bg-editor);border-radius:4px;margin:8px 4px 4px;border:1px solid var(--border-color)}.pane-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;padding:40px 20px;color:var(--text-tertiary)}.pane-placeholder h3{font-size:18px;color:var(--text-secondary);margin:0 0 8px;font-weight:600}.pane-placeholder p{font-size:14px;margin:0;line-height:1.5}.no-file-selected{display:flex;align-items:center;justify-content:center;height:100%;color:var(--text-tertiary);font-style:italic}.auth-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease}.auth-modal{background-color:var(--bg-secondary);border-radius:1px;border:1px solid var(--border-color);width:90%;max-width:400px;max-height:90vh;overflow-y:auto;animation:slideInScale .3s cubic-bezier(.4,0,.2,1)}.auth-modal-header{padding:24px 24px 0;display:flex;justify-content:space-between;align-items:flex-start}.auth-modal-header h2{font-size:24px;font-weight:600;color:var(--text-primary);margin:0;line-height:1.3}.auth-modal-content{padding:24px}.auth-error{background-color:#ef44441a;border:1px solid var(--accent-danger);color:var(--accent-danger);padding:12px 16px;border-radius:4px;margin-bottom:20px;font-size:14px}.auth-form{display:flex;flex-direction:column;gap:16px;margin-bottom:24px}.form-group{display:flex;flex-direction:column;gap:6px}.form-group label{font-size:14px;font-weight:500;color:var(--text-primary)}.form-group input{padding:12px 16px;background-color:var(--bg-primary);border:1px solid var(--border-color);border-radius:4px;color:var(--text-primary);font-size:16px;font-family:var(--font-sans);transition:all .2s ease}.form-group input:focus{outline:none;border-color:var(--accent-primary);background-color:var(--bg-editor);box-shadow:0 0 0 3px #3b82f61a}.form-group input::placeholder{color:var(--text-tertiary)}.auth-submit{width:100%;padding:12px;font-size:16px;font-weight:600;margin-top:8px}.auth-divider{text-align:center;margin:24px 0;position:relative}.auth-divider:before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background-color:var(--border-color)}.auth-divider span{background-color:var(--bg-secondary);padding:0 16px;color:var(--text-tertiary);font-size:14px;font-weight:500}.auth-oauth{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}.auth-oauth-btn{width:100%;padding:12px 16px;font-size:14px;font-weight:500;background-color:var(--bg-primary);border:1px solid var(--border-color);color:var(--text-primary);justify-content:center;gap:12px;transition:all .2s ease}.auth-oauth-btn:hover{background-color:var(--bg-tertiary);border-color:#404040}.auth-switch{text-align:center;border-top:1px solid var(--border-color);padding-top:20px}.auth-switch p{color:var(--text-secondary);font-size:14px;margin:0}.auth-switch-btn{background:none;border:none;color:var(--accent-primary);font-size:14px;font-weight:500;cursor:pointer;padding:4px 8px;margin-left:4px;border-radius:4px;transition:background-color .15s ease}.auth-switch-btn:hover{background-color:#3b82f61a}@keyframes slideInScale{0%{opacity:0;transform:scale(.95) translateY(-10px)}to{opacity:1;transform:scale(1) translateY(0)}}.user-menu{position:relative}.btn-user{display:flex;align-items:center;gap:8px;padding:6px 12px;background-color:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:6px;color:var(--text-primary);cursor:pointer;transition:all .15s ease}.btn-user:hover{background-color:#262626;border-color:#404040}.user-avatar{width:20px;height:20px;border-radius:50%;overflow:hidden;background-color:var(--bg-primary);display:flex;align-items:center;justify-content:center}.user-avatar img{width:100%;height:100%;object-fit:cover}.user-name{font-size:13px;font-weight:500;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-dropdown{min-width:220px;padding:8px 0}.user-info{padding:8px 16px;border-bottom:1px solid var(--border-color);margin-bottom:8px}.user-email{font-size:12px;color:var(--text-secondary);margin-bottom:4px}.current-project{font-size:11px;color:var(--accent-primary);font-weight:500}.dropdown-divider{height:1px;background-color:var(--border-color);margin:8px 0}.settings-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease}.settings-modal{background-color:var(--bg-secondary);border-radius:1px;border:1px solid var(--border-color);width:90%;max-width:600px;max-height:80vh;overflow:hidden;animation:slideInScale .2s ease;box-shadow:0 20px 40px #0000004d}.settings-header{background-color:var(--bg-tertiary);padding:20px 24px;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center}.settings-header h2{margin:0;font-size:20px;font-weight:600;color:var(--text-primary)}.settings-tabs{display:flex;background-color:var(--bg-tertiary);border-bottom:1px solid var(--border-color);border-radius:1px 1px 0 0}.settings-tab{flex:1;padding:16px 20px;background:none;border:none;color:var(--text-secondary);font-size:14px;font-weight:500;cursor:pointer;transition:all .15s ease;border-bottom:3px solid transparent;border-radius:4px 4px 0 0}.settings-tab:hover{color:var(--text-primary);background-color:#ffffff0d}.settings-tab.active{color:var(--accent-primary);border-bottom-color:var(--accent-primary);background-color:#3b82f61a}.settings-content{padding:24px;max-height:60vh;overflow-y:auto}.settings-section{margin-bottom:32px}.settings-section:last-child{margin-bottom:0}.settings-section h3{margin:0 0 16px;font-size:16px;font-weight:600;color:var(--text-primary)}.radio-group{display:flex;flex-direction:column;gap:12px}.radio-option{display:flex;align-items:flex-start;gap:12px;padding:16px;border:1px solid var(--border-color);border-radius:4px;cursor:pointer;transition:all .15s ease}.radio-option:hover{border-color:var(--accent-primary);background-color:#3b82f60d}.radio-option input[type=radio]{margin:0;accent-color:var(--accent-primary)}.radio-option input[type=radio]:checked+span{color:var(--accent-primary);font-weight:600}.radio-option span{font-size:14px;font-weight:500;color:var(--text-primary)}.radio-option small{display:block;font-size:12px;color:var(--text-secondary);margin-top:4px}.checkbox-group{display:flex;flex-direction:column;gap:16px}.checkbox-option{display:flex;align-items:flex-start;gap:12px;cursor:pointer}.checkbox-option input[type=checkbox]{margin:2px 0 0;accent-color:var(--accent-primary)}.checkbox-option span{font-size:14px;font-weight:500;color:var(--text-primary)}.checkbox-option small{display:block;font-size:12px;color:var(--text-secondary);margin-top:4px}.setting-group{display:flex;align-items:center;gap:16px;margin-bottom:20px}.setting-group label{min-width:100px;font-size:14px;font-weight:500;color:var(--text-primary)}.setting-group input[type=range]{flex:1;accent-color:var(--accent-primary)}.setting-group select{flex:1;padding:8px 12px;background-color:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:4px;color:var(--text-primary);font-size:14px}.setting-group select:focus{outline:none;border-color:var(--accent-primary)}.setting-value{min-width:40px;font-size:14px;color:var(--text-secondary);text-align:right}/*!
* animate.css - https://animate.style/
* Version - 4.1.1
* Licensed under the MIT license - http://opensource.org/licenses/MIT
*
* Copyright (c) 2020 Animate.css
*/:root{--animate-duration: 1s;--animate-delay: 1s;--animate-repeat: 1}.animate__animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-duration:var(--animate-duration);animation-duration:var(--animate-duration);-webkit-animation-fill-mode:both;animation-fill-mode:both}.animate__animated.animate__infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animate__animated.animate__repeat-1{-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-iteration-count:var(--animate-repeat);animation-iteration-count:var(--animate-repeat)}.animate__animated.animate__repeat-2{-webkit-animation-iteration-count:2;animation-iteration-count:2;-webkit-animation-iteration-count:calc(var(--animate-repeat) * 2);animation-iteration-count:calc(var(--animate-repeat) * 2)}.animate__animated.animate__repeat-3{-webkit-animation-iteration-count:3;animation-iteration-count:3;-webkit-animation-iteration-count:calc(var(--animate-repeat) * 3);animation-iteration-count:calc(var(--animate-repeat) * 3)}.animate__animated.animate__delay-1s{-webkit-animation-delay:1s;animation-delay:1s;-webkit-animation-delay:var(--animate-delay);animation-delay:var(--animate-delay)}.animate__animated.animate__delay-2s{-webkit-animation-delay:2s;animation-delay:2s;-webkit-animation-delay:calc(var(--animate-delay) * 2);animation-delay:calc(var(--animate-delay) * 2)}.animate__animated.animate__delay-3s{-webkit-animation-delay:3s;animation-delay:3s;-webkit-animation-delay:calc(var(--animate-delay) * 3);animation-delay:calc(var(--animate-delay) * 3)}.animate__animated.animate__delay-4s{-webkit-animation-delay:4s;animation-delay:4s;-webkit-animation-delay:calc(var(--animate-delay) * 4);animation-delay:calc(var(--animate-delay) * 4)}.animate__animated.animate__delay-5s{-webkit-animation-delay:5s;animation-delay:5s;-webkit-animation-delay:calc(var(--animate-delay) * 5);animation-delay:calc(var(--animate-delay) * 5)}.animate__animated.animate__faster{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-duration:calc(var(--animate-duration) / 2);animation-duration:calc(var(--animate-duration) / 2)}.animate__animated.animate__fast{-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-duration:calc(var(--animate-duration) * .8);animation-duration:calc(var(--animate-duration) * .8)}.animate__animated.animate__slow{-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-duration:calc(var(--animate-duration) * 2);animation-duration:calc(var(--animate-duration) * 2)}.animate__animated.animate__slower{-webkit-animation-duration:3s;animation-duration:3s;-webkit-animation-duration:calc(var(--animate-duration) * 3);animation-duration:calc(var(--animate-duration) * 3)}@media print,(prefers-reduced-motion: reduce){.animate__animated{-webkit-animation-duration:1ms!important;animation-duration:1ms!important;-webkit-transition-duration:1ms!important;transition-duration:1ms!important;-webkit-animation-iteration-count:1!important;animation-iteration-count:1!important}.animate__animated[class*=Out]{opacity:0}}@-webkit-keyframes bounce{0%,20%,53%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-30px,0) scaleY(1.1);transform:translate3d(0,-30px,0) scaleY(1.1)}70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-15px,0) scaleY(1.05);transform:translate3d(0,-15px,0) scaleY(1.05)}80%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translate3d(0,0,0) scaleY(.95);transform:translateZ(0) scaleY(.95)}90%{-webkit-transform:translate3d(0,-4px,0) scaleY(1.02);transform:translate3d(0,-4px,0) scaleY(1.02)}}@keyframes bounce{0%,20%,53%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-30px,0) scaleY(1.1);transform:translate3d(0,-30px,0) scaleY(1.1)}70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-15px,0) scaleY(1.05);transform:translate3d(0,-15px,0) scaleY(1.05)}80%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translate3d(0,0,0) scaleY(.95);transform:translateZ(0) scaleY(.95)}90%{-webkit-transform:translate3d(0,-4px,0) scaleY(1.02);transform:translate3d(0,-4px,0) scaleY(1.02)}}.animate__bounce{-webkit-animation-name:bounce;animation-name:bounce;-webkit-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.animate__flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-transform:scale3d(1,1,1);transform:scaleZ(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scale3d(1,1,1);transform:scaleZ(1)}}@keyframes pulse{0%{-webkit-transform:scale3d(1,1,1);transform:scaleZ(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scale3d(1,1,1);transform:scaleZ(1)}}.animate__pulse{-webkit-animation-name:pulse;animation-name:pulse;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}@-webkit-keyframes rubberBand{0%{-webkit-transform:scale3d(1,1,1);transform:scaleZ(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scale3d(1,1,1);transform:scaleZ(1)}}@keyframes rubberBand{0%{-webkit-transform:scale3d(1,1,1);transform:scaleZ(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scale3d(1,1,1);transform:scaleZ(1)}}.animate__rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shakeX{0%,to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}@keyframes shakeX{0%,to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}.animate__shakeX{-webkit-animation-name:shakeX;animation-name:shakeX}@-webkit-keyframes shakeY{0%,to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}20%,40%,60%,80%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}}@keyframes shakeY{0%,to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}20%,40%,60%,80%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}}.animate__shakeY{-webkit-animation-name:shakeY;animation-name:shakeY}@-webkit-keyframes headShake{0%{-webkit-transform:translateX(0);transform:translate(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translate(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translate(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translate(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translate(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translate(0)}}@keyframes headShake{0%{-webkit-transform:translateX(0);transform:translate(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translate(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translate(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translate(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translate(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translate(0)}}.animate__headShake{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-name:headShake;animation-name:headShake}@-webkit-keyframes swing{20%{-webkit-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}40%{-webkit-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}60%{-webkit-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}80%{-webkit-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}to{-webkit-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0)}}@keyframes swing{20%{-webkit-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}40%{-webkit-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}60%{-webkit-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}80%{-webkit-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}to{-webkit-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0)}}.animate__swing{-webkit-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}@-webkit-keyframes tada{0%{-webkit-transform:scale3d(1,1,1);transform:scaleZ(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}to{-webkit-transform:scale3d(1,1,1);transform:scaleZ(1)}}@keyframes tada{0%{-webkit-transform:scale3d(1,1,1);transform:scaleZ(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}to{-webkit-transform:scale3d(1,1,1);transform:scaleZ(1)}}.animate__tada{-webkit-animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{0%{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}15%{-webkit-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}@keyframes wobble{0%{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}15%{-webkit-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}.animate__wobble{-webkit-animation-name:wobble;animation-name:wobble}@-webkit-keyframes jello{0%,11.1%,to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skew(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skew(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skew(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skew(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skew(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.390625deg) skewY(.390625deg);transform:skew(.390625deg) skewY(.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skew(-.1953125deg) skewY(-.1953125deg)}}@keyframes jello{0%,11.1%,to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skew(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skew(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skew(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skew(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skew(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.390625deg) skewY(.390625deg);transform:skew(.390625deg) skewY(.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skew(-.1953125deg) skewY(-.1953125deg)}}.animate__jello{-webkit-animation-name:jello;animation-name:jello;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes heartBeat{0%{-webkit-transform:scale(1);transform:scale(1)}14%{-webkit-transform:scale(1.3);transform:scale(1.3)}28%{-webkit-transform:scale(1);transform:scale(1)}42%{-webkit-transform:scale(1.3);transform:scale(1.3)}70%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes heartBeat{0%{-webkit-transform:scale(1);transform:scale(1)}14%{-webkit-transform:scale(1.3);transform:scale(1.3)}28%{-webkit-transform:scale(1);transform:scale(1)}42%{-webkit-transform:scale(1.3);transform:scale(1.3)}70%{-webkit-transform:scale(1);transform:scale(1)}}.animate__heartBeat{-webkit-animation-name:heartBeat;animation-name:heartBeat;-webkit-animation-duration:1.3s;animation-duration:1.3s;-webkit-animation-duration:calc(var(--animate-duration) * 1.3);animation-duration:calc(var(--animate-duration) * 1.3);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}@-webkit-keyframes backInDown{0%{-webkit-transform:translateY(-1200px) scale(.7);transform:translateY(-1200px) scale(.7);opacity:.7}80%{-webkit-transform:translateY(0px) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes backInDown{0%{-webkit-transform:translateY(-1200px) scale(.7);transform:translateY(-1200px) scale(.7);opacity:.7}80%{-webkit-transform:translateY(0px) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.animate__backInDown{-webkit-animation-name:backInDown;animation-name:backInDown}@-webkit-keyframes backInLeft{0%{-webkit-transform:translateX(-2000px) scale(.7);transform:translate(-2000px) scale(.7);opacity:.7}80%{-webkit-transform:translateX(0px) scale(.7);transform:translate(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes backInLeft{0%{-webkit-transform:translateX(-2000px) scale(.7);transform:translate(-2000px) scale(.7);opacity:.7}80%{-webkit-transform:translateX(0px) scale(.7);transform:translate(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.animate__backInLeft{-webkit-animation-name:backInLeft;animation-name:backInLeft}@-webkit-keyframes backInRight{0%{-webkit-transform:translateX(2000px) scale(.7);transform:translate(2000px) scale(.7);opacity:.7}80%{-webkit-transform:translateX(0px) scale(.7);transform:translate(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes backInRight{0%{-webkit-transform:translateX(2000px) scale(.7);transform:translate(2000px) scale(.7);opacity:.7}80%{-webkit-transform:translateX(0px) scale(.7);transform:translate(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.animate__backInRight{-webkit-animation-name:backInRight;animation-name:backInRight}@-webkit-keyframes backInUp{0%{-webkit-transform:translateY(1200px) scale(.7);transform:translateY(1200px) scale(.7);opacity:.7}80%{-webkit-transform:translateY(0px) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes backInUp{0%{-webkit-transform:translateY(1200px) scale(.7);transform:translateY(1200px) scale(.7);opacity:.7}80%{-webkit-transform:translateY(0px) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.animate__backInUp{-webkit-animation-name:backInUp;animation-name:backInUp}@-webkit-keyframes backOutDown{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateY(0px) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:translateY(700px) scale(.7);transform:translateY(700px) scale(.7);opacity:.7}}@keyframes backOutDown{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateY(0px) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:translateY(700px) scale(.7);transform:translateY(700px) scale(.7);opacity:.7}}.animate__backOutDown{-webkit-animation-name:backOutDown;animation-name:backOutDown}@-webkit-keyframes backOutLeft{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateX(0px) scale(.7);transform:translate(0) scale(.7);opacity:.7}to{-webkit-transform:translateX(-2000px) scale(.7);transform:translate(-2000px) scale(.7);opacity:.7}}@keyframes backOutLeft{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateX(0px) scale(.7);transform:translate(0) scale(.7);opacity:.7}to{-webkit-transform:translateX(-2000px) scale(.7);transform:translate(-2000px) scale(.7);opacity:.7}}.animate__backOutLeft{-webkit-animation-name:backOutLeft;animation-name:backOutLeft}@-webkit-keyframes backOutRight{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateX(0px) scale(.7);transform:translate(0) scale(.7);opacity:.7}to{-webkit-transform:translateX(2000px) scale(.7);transform:translate(2000px) scale(.7);opacity:.7}}@keyframes backOutRight{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateX(0px) scale(.7);transform:translate(0) scale(.7);opacity:.7}to{-webkit-transform:translateX(2000px) scale(.7);transform:translate(2000px) scale(.7);opacity:.7}}.animate__backOutRight{-webkit-animation-name:backOutRight;animation-name:backOutRight}@-webkit-keyframes backOutUp{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateY(0px) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:translateY(-700px) scale(.7);transform:translateY(-700px) scale(.7);opacity:.7}}@keyframes backOutUp{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateY(0px) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:translateY(-700px) scale(.7);transform:translateY(-700px) scale(.7);opacity:.7}}.animate__backOutUp{-webkit-animation-name:backOutUp;animation-name:backOutUp}@-webkit-keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scaleZ(1)}}@keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scaleZ(1)}}.animate__bounceIn{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-duration:calc(var(--animate-duration) * .75);animation-duration:calc(var(--animate-duration) * .75);-webkit-animation-name:bounceIn;animation-name:bounceIn}@-webkit-keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0) scaleY(3);transform:translate3d(0,-3000px,0) scaleY(3)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0) scaleY(.9);transform:translate3d(0,25px,0) scaleY(.9)}75%{-webkit-transform:translate3d(0,-10px,0) scaleY(.95);transform:translate3d(0,-10px,0) scaleY(.95)}90%{-webkit-transform:translate3d(0,5px,0) scaleY(.985);transform:translate3d(0,5px,0) scaleY(.985)}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}@keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0) scaleY(3);transform:translate3d(0,-3000px,0) scaleY(3)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0) scaleY(.9);transform:translate3d(0,25px,0) scaleY(.9)}75%{-webkit-transform:translate3d(0,-10px,0) scaleY(.95);transform:translate3d(0,-10px,0) scaleY(.95)}90%{-webkit-transform:translate3d(0,5px,0) scaleY(.985);transform:translate3d(0,5px,0) scaleY(.985)}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}.animate__bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0) scaleX(3);transform:translate3d(-3000px,0,0) scaleX(3)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0) scaleX(1);transform:translate3d(25px,0,0) scaleX(1)}75%{-webkit-transform:translate3d(-10px,0,0) scaleX(.98);transform:translate3d(-10px,0,0) scaleX(.98)}90%{-webkit-transform:translate3d(5px,0,0) scaleX(.995);transform:translate3d(5px,0,0) scaleX(.995)}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}@keyframes bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0) scaleX(3);transform:translate3d(-3000px,0,0) scaleX(3)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0) scaleX(1);transform:translate3d(25px,0,0) scaleX(1)}75%{-webkit-transform:translate3d(-10px,0,0) scaleX(.98);transform:translate3d(-10px,0,0) scaleX(.98)}90%{-webkit-transform:translate3d(5px,0,0) scaleX(.995);transform:translate3d(5px,0,0) scaleX(.995)}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}.animate__bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0) scaleX(3);transform:translate3d(3000px,0,0) scaleX(3)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0) scaleX(1);transform:translate3d(-25px,0,0) scaleX(1)}75%{-webkit-transform:translate3d(10px,0,0) scaleX(.98);transform:translate3d(10px,0,0) scaleX(.98)}90%{-webkit-transform:translate3d(-5px,0,0) scaleX(.995);transform:translate3d(-5px,0,0) scaleX(.995)}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}@keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0) scaleX(3);transform:translate3d(3000px,0,0) scaleX(3)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0) scaleX(1);transform:translate3d(-25px,0,0) scaleX(1)}75%{-webkit-transform:translate3d(10px,0,0) scaleX(.98);transform:translate3d(10px,0,0) scaleX(.98)}90%{-webkit-transform:translate3d(-5px,0,0) scaleX(.995);transform:translate3d(-5px,0,0) scaleX(.995)}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}.animate__bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0) scaleY(5);transform:translate3d(0,3000px,0) scaleY(5)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0) scaleY(.9);transform:translate3d(0,-20px,0) scaleY(.9)}75%{-webkit-transform:translate3d(0,10px,0) scaleY(.95);transform:translate3d(0,10px,0) scaleY(.95)}90%{-webkit-transform:translate3d(0,-5px,0) scaleY(.985);transform:translate3d(0,-5px,0) scaleY(.985)}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}@keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0) scaleY(5);transform:translate3d(0,3000px,0) scaleY(5)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0) scaleY(.9);transform:translate3d(0,-20px,0) scaleY(.9)}75%{-webkit-transform:translate3d(0,10px,0) scaleY(.95);transform:translate3d(0,10px,0) scaleY(.95)}90%{-webkit-transform:translate3d(0,-5px,0) scaleY(.985);transform:translate3d(0,-5px,0) scaleY(.985)}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}.animate__bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}@-webkit-keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}.animate__bounceOut{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-duration:calc(var(--animate-duration) * .75);animation-duration:calc(var(--animate-duration) * .75);-webkit-animation-name:bounceOut;animation-name:bounceOut}@-webkit-keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0) scaleY(.985);transform:translate3d(0,10px,0) scaleY(.985)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0) scaleY(.9);transform:translate3d(0,-20px,0) scaleY(.9)}to{opacity:0;-webkit-transform:translate3d(0,2000px,0) scaleY(3);transform:translate3d(0,2000px,0) scaleY(3)}}@keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0) scaleY(.985);transform:translate3d(0,10px,0) scaleY(.985)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0) scaleY(.9);transform:translate3d(0,-20px,0) scaleY(.9)}to{opacity:0;-webkit-transform:translate3d(0,2000px,0) scaleY(3);transform:translate3d(0,2000px,0) scaleY(3)}}.animate__bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0) scaleX(.9);transform:translate3d(20px,0,0) scaleX(.9)}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0) scaleX(2);transform:translate3d(-2000px,0,0) scaleX(2)}}@keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0) scaleX(.9);transform:translate3d(20px,0,0) scaleX(.9)}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0) scaleX(2);transform:translate3d(-2000px,0,0) scaleX(2)}}.animate__bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0) scaleX(.9);transform:translate3d(-20px,0,0) scaleX(.9)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0) scaleX(2);transform:translate3d(2000px,0,0) scaleX(2)}}@keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0) scaleX(.9);transform:translate3d(-20px,0,0) scaleX(.9)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0) scaleX(2);transform:translate3d(2000px,0,0) scaleX(2)}}.animate__bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0) scaleY(.985);transform:translate3d(0,-10px,0) scaleY(.985)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0) scaleY(.9);transform:translate3d(0,20px,0) scaleY(.9)}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0) scaleY(3);transform:translate3d(0,-2000px,0) scaleY(3)}}@keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0) scaleY(.985);transform:translate3d(0,-10px,0) scaleY(.985)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0) scaleY(.9);transform:translate3d(0,20px,0) scaleY(.9)}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0) scaleY(3);transform:translate3d(0,-2000px,0) scaleY(3)}}.animate__bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.animate__fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}.animate__fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}@keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}.animate__fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}.animate__fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}@keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}.animate__fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}.animate__fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}@keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}.animate__fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}.animate__fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}.animate__fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeInTopLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,-100%,0);transform:translate3d(-100%,-100%,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}@keyframes fadeInTopLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,-100%,0);transform:translate3d(-100%,-100%,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}.animate__fadeInTopLeft{-webkit-animation-name:fadeInTopLeft;animation-name:fadeInTopLeft}@-webkit-keyframes fadeInTopRight{0%{opacity:0;-webkit-transform:translate3d(100%,-100%,0);transform:translate3d(100%,-100%,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}@keyframes fadeInTopRight{0%{opacity:0;-webkit-transform:translate3d(100%,-100%,0);transform:translate3d(100%,-100%,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}.animate__fadeInTopRight{-webkit-animation-name:fadeInTopRight;animation-name:fadeInTopRight}@-webkit-keyframes fadeInBottomLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,100%,0);transform:translate3d(-100%,100%,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}@keyframes fadeInBottomLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,100%,0);transform:translate3d(-100%,100%,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}.animate__fadeInBottomLeft{-webkit-animation-name:fadeInBottomLeft;animation-name:fadeInBottomLeft}@-webkit-keyframes fadeInBottomRight{0%{opacity:0;-webkit-transform:translate3d(100%,100%,0);transform:translate3d(100%,100%,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}@keyframes fadeInBottomRight{0%{opacity:0;-webkit-transform:translate3d(100%,100%,0);transform:translate3d(100%,100%,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}.animate__fadeInBottomRight{-webkit-animation-name:fadeInBottomRight;animation-name:fadeInBottomRight}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}.animate__fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutDown{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes fadeOutDown{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.animate__fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.animate__fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}@-webkit-keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.animate__fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.animate__fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-keyframes fadeOutRight{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes fadeOutRight{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.animate__fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.animate__fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}@-webkit-keyframes fadeOutUp{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes fadeOutUp{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.animate__fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.animate__fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes fadeOutTopLeft{0%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(-100%,-100%,0);transform:translate3d(-100%,-100%,0)}}@keyframes fadeOutTopLeft{0%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(-100%,-100%,0);transform:translate3d(-100%,-100%,0)}}.animate__fadeOutTopLeft{-webkit-animation-name:fadeOutTopLeft;animation-name:fadeOutTopLeft}@-webkit-keyframes fadeOutTopRight{0%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(100%,-100%,0);transform:translate3d(100%,-100%,0)}}@keyframes fadeOutTopRight{0%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(100%,-100%,0);transform:translate3d(100%,-100%,0)}}.animate__fadeOutTopRight{-webkit-animation-name:fadeOutTopRight;animation-name:fadeOutTopRight}@-webkit-keyframes fadeOutBottomRight{0%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(100%,100%,0);transform:translate3d(100%,100%,0)}}@keyframes fadeOutBottomRight{0%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(100%,100%,0);transform:translate3d(100%,100%,0)}}.animate__fadeOutBottomRight{-webkit-animation-name:fadeOutBottomRight;animation-name:fadeOutBottomRight}@-webkit-keyframes fadeOutBottomLeft{0%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(-100%,100%,0);transform:translate3d(-100%,100%,0)}}@keyframes fadeOutBottomLeft{0%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(-100%,100%,0);transform:translate3d(-100%,100%,0)}}.animate__fadeOutBottomLeft{-webkit-animation-name:fadeOutBottomLeft;animation-name:fadeOutBottomLeft}@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) scale3d(1,1,1) translate3d(0,0,0) rotate3d(0,1,0,-360deg);transform:perspective(400px) scaleZ(1) translateZ(0) rotateY(-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) scale3d(1,1,1) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) scaleZ(1) translateZ(150px) rotateY(-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) scale3d(1,1,1) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) scaleZ(1) translateZ(150px) rotateY(-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95) translate3d(0,0,0) rotate3d(0,1,0,0deg);transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{-webkit-transform:perspective(400px) scale3d(1,1,1) translate3d(0,0,0) rotate3d(0,1,0,0deg);transform:perspective(400px) scaleZ(1) translateZ(0) rotateY(0);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes flip{0%{-webkit-transform:perspective(400px) scale3d(1,1,1) translate3d(0,0,0) rotate3d(0,1,0,-360deg);transform:perspective(400px) scaleZ(1) translateZ(0) rotateY(-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) scale3d(1,1,1) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) scaleZ(1) translateZ(150px) rotateY(-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) scale3d(1,1,1) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) scaleZ(1) translateZ(150px) rotateY(-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95) translate3d(0,0,0) rotate3d(0,1,0,0deg);transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{-webkit-transform:perspective(400px) scale3d(1,1,1) translate3d(0,0,0) rotate3d(0,1,0,0deg);transform:perspective(400px) scaleZ(1) translateZ(0) rotateY(0);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}.animate__animated.animate__flip{-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip}@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotateX(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotateX(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotateX(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotateX(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotateX(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotateX(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.animate__flipInX{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX}@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotateY(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg);transform:perspective(400px) rotateY(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(0,1,0,10deg);transform:perspective(400px) rotateY(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInY{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotateY(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg);transform:perspective(400px) rotateY(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(0,1,0,10deg);transform:perspective(400px) rotateY(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.animate__flipInY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY}@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotateX(-20deg);opacity:1}to{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotateX(90deg);opacity:0}}@keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotateX(-20deg);opacity:1}to{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotateX(90deg);opacity:0}}.animate__flipOutX{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-duration:calc(var(--animate-duration) * .75);animation-duration:calc(var(--animate-duration) * .75);-webkit-animation-name:flipOutX;animation-name:flipOutX;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-15deg);transform:perspective(400px) rotateY(-15deg);opacity:1}to{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}@keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-15deg);transform:perspective(400px) rotateY(-15deg);opacity:1}to{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}.animate__flipOutY{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-duration:calc(var(--animate-duration) * .75);animation-duration:calc(var(--animate-duration) * .75);-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY}@-webkit-keyframes lightSpeedInRight{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skew(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skew(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skew(-5deg)}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}@keyframes lightSpeedInRight{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skew(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skew(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skew(-5deg)}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}.animate__lightSpeedInRight{-webkit-animation-name:lightSpeedInRight;animation-name:lightSpeedInRight;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedInLeft{0%{-webkit-transform:translate3d(-100%,0,0) skewX(30deg);transform:translate3d(-100%,0,0) skew(30deg);opacity:0}60%{-webkit-transform:skewX(-20deg);transform:skew(-20deg);opacity:1}80%{-webkit-transform:skewX(5deg);transform:skew(5deg)}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}@keyframes lightSpeedInLeft{0%{-webkit-transform:translate3d(-100%,0,0) skewX(30deg);transform:translate3d(-100%,0,0) skew(30deg);opacity:0}60%{-webkit-transform:skewX(-20deg);transform:skew(-20deg);opacity:1}80%{-webkit-transform:skewX(5deg);transform:skew(5deg)}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}.animate__lightSpeedInLeft{-webkit-animation-name:lightSpeedInLeft;animation-name:lightSpeedInLeft;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedOutRight{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skew(30deg);opacity:0}}@keyframes lightSpeedOutRight{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skew(30deg);opacity:0}}.animate__lightSpeedOutRight{-webkit-animation-name:lightSpeedOutRight;animation-name:lightSpeedOutRight;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes lightSpeedOutLeft{0%{opacity:1}to{-webkit-transform:translate3d(-100%,0,0) skewX(-30deg);transform:translate3d(-100%,0,0) skew(-30deg);opacity:0}}@keyframes lightSpeedOutLeft{0%{opacity:1}to{-webkit-transform:translate3d(-100%,0,0) skewX(-30deg);transform:translate3d(-100%,0,0) skew(-30deg);opacity:0}}.animate__lightSpeedOutLeft{-webkit-animation-name:lightSpeedOutLeft;animation-name:lightSpeedOutLeft;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes rotateIn{0%{-webkit-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0);opacity:1}}@keyframes rotateIn{0%{-webkit-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0);opacity:1}}.animate__rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes rotateInDownLeft{0%{-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0);opacity:1}}@keyframes rotateInDownLeft{0%{-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0);opacity:1}}.animate__rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft;-webkit-transform-origin:left bottom;transform-origin:left bottom}@-webkit-keyframes rotateInDownRight{0%{-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0);opacity:1}}@keyframes rotateInDownRight{0%{-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0);opacity:1}}.animate__rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight;-webkit-transform-origin:right bottom;transform-origin:right bottom}@-webkit-keyframes rotateInUpLeft{0%{-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0);opacity:1}}@keyframes rotateInUpLeft{0%{-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0);opacity:1}}.animate__rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft;-webkit-transform-origin:left bottom;transform-origin:left bottom}@-webkit-keyframes rotateInUpRight{0%{-webkit-transform:rotate3d(0,0,1,-90deg);transform:rotate3d(0,0,1,-90deg);opacity:0}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0);opacity:1}}@keyframes rotateInUpRight{0%{-webkit-transform:rotate3d(0,0,1,-90deg);transform:rotate3d(0,0,1,-90deg);opacity:0}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0);opacity:1}}.animate__rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight;-webkit-transform-origin:right bottom;transform-origin:right bottom}@-webkit-keyframes rotateOut{0%{opacity:1}to{-webkit-transform:rotate3d(0,0,1,200deg);transform:rotate3d(0,0,1,200deg);opacity:0}}@keyframes rotateOut{0%{opacity:1}to{-webkit-transform:rotate3d(0,0,1,200deg);transform:rotate3d(0,0,1,200deg);opacity:0}}.animate__rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes rotateOutDownLeft{0%{opacity:1}to{-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}}@keyframes rotateOutDownLeft{0%{opacity:1}to{-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}}.animate__rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft;-webkit-transform-origin:left bottom;transform-origin:left bottom}@-webkit-keyframes rotateOutDownRight{0%{opacity:1}to{-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}@keyframes rotateOutDownRight{0%{opacity:1}to{-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}.animate__rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight;-webkit-transform-origin:right bottom;transform-origin:right bottom}@-webkit-keyframes rotateOutUpLeft{0%{opacity:1}to{-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}@keyframes rotateOutUpLeft{0%{opacity:1}to{-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}.animate__rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft;-webkit-transform-origin:left bottom;transform-origin:left bottom}@-webkit-keyframes rotateOutUpRight{0%{opacity:1}to{-webkit-transform:rotate3d(0,0,1,90deg);transform:rotate3d(0,0,1,90deg);opacity:0}}@keyframes rotateOutUpRight{0%{opacity:1}to{-webkit-transform:rotate3d(0,0,1,90deg);transform:rotate3d(0,0,1,90deg);opacity:0}}.animate__rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight;-webkit-transform-origin:right bottom;transform-origin:right bottom}@-webkit-keyframes hinge{0%{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate3d(0,0,1,80deg);transform:rotate3d(0,0,1,80deg);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate3d(0,0,1,60deg);transform:rotate3d(0,0,1,60deg);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}to{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}@keyframes hinge{0%{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate3d(0,0,1,80deg);transform:rotate3d(0,0,1,80deg);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate3d(0,0,1,60deg);transform:rotate3d(0,0,1,60deg);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}to{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}.animate__hinge{-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-duration:calc(var(--animate-duration) * 2);animation-duration:calc(var(--animate-duration) * 2);-webkit-animation-name:hinge;animation-name:hinge;-webkit-transform-origin:top left;transform-origin:top left}@-webkit-keyframes jackInTheBox{0%{opacity:0;-webkit-transform:scale(.1) rotate(30deg);transform:scale(.1) rotate(30deg);-webkit-transform-origin:center bottom;transform-origin:center bottom}50%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}70%{-webkit-transform:rotate(3deg);transform:rotate(3deg)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes jackInTheBox{0%{opacity:0;-webkit-transform:scale(.1) rotate(30deg);transform:scale(.1) rotate(30deg);-webkit-transform-origin:center bottom;transform-origin:center bottom}50%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}70%{-webkit-transform:rotate(3deg);transform:rotate(3deg)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}.animate__jackInTheBox{-webkit-animation-name:jackInTheBox;animation-name:jackInTheBox}@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}@keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}.animate__rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg)}}@keyframes rollOut{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg)}}.animate__rollOut{-webkit-animation-name:rollOut;animation-name:rollOut}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}.animate__zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}@-webkit-keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.animate__zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}@-webkit-keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.animate__zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}@-webkit-keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.animate__zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight}@-webkit-keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.animate__zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}.animate__zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}@-webkit-keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.animate__zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown;-webkit-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0)}}@keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0)}}.animate__zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft;-webkit-transform-origin:left center;transform-origin:left center}@-webkit-keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0)}}@keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0)}}.animate__zoomOutRight{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight;-webkit-transform-origin:right center;transform-origin:right center}@-webkit-keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.animate__zoomOutUp{-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp;-webkit-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}@keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}.animate__slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown}@-webkit-keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}@keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}.animate__slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft}@-webkit-keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}@keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}.animate__slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight}@-webkit-keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}@keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}.animate__slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp}@-webkit-keyframes slideOutDown{0%{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes slideOutDown{0%{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.animate__slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown}@-webkit-keyframes slideOutLeft{0%{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes slideOutLeft{0%{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.animate__slideOutLeft{-webkit-animation-name:slideOutLeft;animation-name:slideOutLeft}@-webkit-keyframes slideOutRight{0%{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes slideOutRight{0%{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.animate__slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight}@-webkit-keyframes slideOutUp{0%{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes slideOutUp{0%{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.animate__slideOutUp{-webkit-animation-name:slideOutUp;animation-name:slideOutUp}.btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-2) var(--space-4);font-family:inherit;font-size:var(--font-size-base);font-weight:var(--font-weight-medium);line-height:1.5;text-decoration:none;white-space:nowrap;cursor:pointer;border:var(--border-width) solid transparent;border-radius:var(--border-radius);transition:all var(--transition-fast);-webkit-user-select:none;user-select:none;gap:var(--space-2)}.btn--primary{background-color:var(--color-primary);color:var(--text-inverse);border-color:var(--color-primary)}.btn--primary:hover:not(.btn--disabled){background-color:var(--color-primary-hover);border-color:var(--color-primary-hover)}.btn--secondary{background-color:var(--color-secondary);color:var(--text-inverse);border-color:var(--color-secondary)}.btn--secondary:hover:not(.btn--disabled){background-color:var(--color-secondary-hover);border-color:var(--color-secondary-hover)}.btn--ghost{background-color:transparent;color:var(--text-primary);border-color:var(--border-color)}.btn--ghost:hover:not(.btn--disabled){background-color:var(--bg-secondary)}.btn--danger{background-color:var(--color-danger);color:var(--text-inverse);border-color:var(--color-danger)}.btn--success{background-color:var(--color-success);color:var(--text-inverse);border-color:var(--color-success)}.btn--small{padding:var(--space-1) var(--space-2);font-size:var(--font-size-sm)}.btn--medium{padding:var(--space-2) var(--space-4);font-size:var(--font-size-base)}.btn--large{padding:var(--space-3) var(--space-5);font-size:var(--font-size-lg)}.btn--disabled{opacity:.5;cursor:not-allowed}.btn--full-width{width:100%}.theme-brutalism .btn{border-width:var(--border-width);border-radius:0;font-weight:var(--font-weight-bold);text-transform:uppercase;box-shadow:var(--shadow-md)}.theme-brutalism .btn:hover:not(.btn--disabled){transform:translate(-2px,-2px);box-shadow:var(--shadow-lg)}.theme-brutalism .btn:active:not(.btn--disabled){transform:translate(0);box-shadow:var(--shadow-sm)}.theme-minimal .btn{border-radius:0;box-shadow:none;font-weight:var(--font-weight-normal)}.typography{margin:0;font-family:var(--font-family);line-height:1.5}.typography--h1{font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);line-height:1.2;margin-bottom:var(--space-4)}.typography--h2{font-size:var(--font-size-2xl);font-weight:var(--font-weight-semibold);line-height:1.3;margin-bottom:var(--space-3)}.typography--h3{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);line-height:1.4;margin-bottom:0}.typography--h4{font-size:var(--font-size-lg);font-weight:var(--font-weight-medium);margin-bottom:var(--space-2)}.typography--h5{font-size:var(--font-size-base);font-weight:var(--font-weight-medium);margin-bottom:var(--space-2)}.typography--h6{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);margin-bottom:var(--space-2)}.typography--subtitle{font-size:var(--font-size-lg);font-weight:var(--font-weight-normal);line-height:1.5}.typography--body{font-size:var(--font-size-base);font-weight:var(--font-weight-normal)}.typography--caption{font-size:var(--font-size-sm);font-weight:var(--font-weight-normal)}.typography--overline{font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.1em}.typography--color-primary{color:var(--text-primary)}.typography--color-secondary{color:var(--text-secondary)}.typography--color-muted{color:var(--text-muted)}.typography--color-inverse{color:var(--text-inverse)}.typography--color-danger{color:var(--color-danger)}.typography--color-success{color:var(--color-success)}.typography--align-left{text-align:left}.typography--align-center{text-align:center}.typography--align-right{text-align:right}.typography--weight-light{font-weight:var(--font-weight-light)}.typography--weight-normal{font-weight:var(--font-weight-normal)}.typography--weight-medium{font-weight:var(--font-weight-medium)}.typography--weight-semibold{font-weight:var(--font-weight-semibold)}.typography--weight-bold{font-weight:var(--font-weight-bold)}.theme-brutalism .typography--h1,.theme-brutalism .typography--h2,.theme-brutalism .typography--h3{font-weight:var(--font-weight-bold);text-transform:uppercase;letter-spacing:-.02em}.theme-minimal .typography{font-weight:var(--font-weight-light)}.icon{display:inline-block;vertical-align:middle;flex-shrink:0;transition:all var(--transition-fast)}.icon:hover{transform:scale(1.1) rotate(0)}.theme-brutalism .icon{stroke-width:2}.theme-minimal .icon{opacity:.8}.input{display:inline-block;padding:var(--space-2) var(--space-3);font-family:inherit;font-size:var(--font-size-base);line-height:1.5;color:var(--text-primary);background-color:var(--bg-primary);border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius);transition:all var(--transition-fast);outline:none}.input:focus{border-color:var(--color-primary);box-shadow:0 0 0 2px rgba(var(--color-primary),.2)}.input--small{padding:var(--space-1) var(--space-2);font-size:var(--font-size-sm)}.input--medium{padding:var(--space-2) var(--space-3);font-size:var(--font-size-base)}.input--large{padding:var(--space-3) var(--space-4);font-size:var(--font-size-lg)}.input--error{border-color:var(--color-danger)}.input--error:focus{box-shadow:0 0 0 2px rgba(var(--color-danger),.2)}.input--disabled{opacity:.5;cursor:not-allowed;background-color:var(--bg-secondary)}.input--full-width{width:100%}.theme-brutalism .input{border-width:var(--border-width);border-radius:0;font-weight:var(--font-weight-medium);box-shadow:var(--shadow-sm)}.theme-brutalism .input:focus{transform:translate(-2px,-2px);box-shadow:var(--shadow-md)}.theme-minimal .input{border-radius:0;border-color:var(--border-color);background-color:transparent}.theme-minimal .input:focus{border-color:var(--text-primary);box-shadow:none}.badge{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-1) var(--space-2);font-family:inherit;font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);line-height:1;text-decoration:none;white-space:nowrap;border-radius:var(--border-radius-sm);-webkit-user-select:none;user-select:none;gap:var(--space-1)}.badge--default{background-color:var(--bg-secondary);color:var(--text-secondary)}.badge--primary{background-color:var(--color-primary);color:var(--text-inverse)}.badge--secondary{background-color:var(--color-secondary);color:var(--text-inverse)}.badge--success{background-color:var(--color-success);color:var(--text-inverse)}.badge--warning{background-color:var(--color-warning);color:var(--text-primary)}.badge--danger{background-color:var(--color-danger);color:var(--text-inverse)}.badge--info{background-color:var(--color-info);color:var(--text-inverse)}.badge--outline{background-color:transparent;color:var(--text-primary);border:var(--border-width) solid var(--border-color)}.badge--small{padding:calc(var(--space-1) / 2) var(--space-1);font-size:var(--font-size-xs)}.badge--medium{padding:var(--space-1) var(--space-2);font-size:var(--font-size-sm)}.badge--large{padding:var(--space-2) var(--space-3);font-size:var(--font-size-base)}.badge--rounded{border-radius:50px}.theme-brutalism .badge{border-radius:0;font-weight:var(--font-weight-bold);text-transform:uppercase;border:var(--border-width) solid currentColor}.theme-minimal .badge{border-radius:0;font-weight:var(--font-weight-normal)}.badge--dot{width:8px;height:8px;padding:0;border-radius:50%;font-size:0}.badge--notification{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;font-size:10px;border-radius:8px}.card{display:flex;flex-direction:column;background-color:var(--bg-primary);border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius);overflow:hidden;transition:all var(--transition-fast);position:relative}.card--default{background-color:var(--bg-primary);border-color:var(--border-color)}.card--elevated{background-color:var(--bg-primary);border-color:var(--border-color);box-shadow:var(--shadow-md)}.card--outlined{background-color:transparent;border-color:var(--border-color-strong);border-width:calc(var(--border-width) * 2)}.card--filled{background-color:var(--bg-secondary);border-color:var(--bg-secondary)}.card--primary{background-color:var(--color-primary-light);border-color:var(--color-primary)}.card--secondary{background-color:var(--color-secondary-light);border-color:var(--color-secondary)}.card--success{background-color:var(--color-success-light);border-color:var(--color-success)}.card--warning{background-color:var(--color-warning-light);border-color:var(--color-warning)}.card--danger{background-color:var(--color-danger-light);border-color:var(--color-danger)}.card--none{padding:0}.card--small{padding:var(--space-2)}.card--medium{padding:var(--space-4)}.card--large{padding:var(--space-6)}.card--hover:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.card--clickable{cursor:pointer;-webkit-user-select:none;user-select:none;border:none;text-align:left;font:inherit}.card--clickable:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}.card--clickable:active{transform:translateY(0);box-shadow:var(--shadow-sm)}.card--clickable:focus{outline:2px solid var(--color-primary);outline-offset:2px}.card__header{padding:var(--space-4);border-bottom:var(--border-width) solid var(--border-color);background-color:var(--bg-secondary)}.card__body{padding:var(--space-4);flex:1}.card__footer{padding:var(--space-4);border-top:var(--border-width) solid var(--border-color);background-color:var(--bg-secondary);margin-top:auto}.card__image{width:100%;height:auto;display:block}.card--none .card__header,.card--none .card__body,.card--none .card__footer{padding:0}.theme-brutalism .card{border-radius:0;border-width:calc(var(--border-width) * 2);box-shadow:var(--shadow-brutal)}.theme-brutalism .card--hover:hover,.theme-brutalism .card--clickable:hover{transform:translate(-4px,-4px);box-shadow:8px 8px 0 var(--color-primary)}.theme-brutalism .card--clickable:active{transform:translate(0);box-shadow:2px 2px 0 var(--color-primary)}.theme-brutalism .card__header,.theme-brutalism .card__footer{border-width:calc(var(--border-width) * 2)}.theme-minimal .card{border-radius:0;box-shadow:none}.theme-minimal .card--elevated{box-shadow:none;border-color:var(--border-color-strong)}.theme-minimal .card--hover:hover,.theme-minimal .card--clickable:hover{transform:none;box-shadow:none;border-color:var(--color-primary)}@media (max-width: 768px){.card--large{padding:var(--space-4)}.card__header,.card__body,.card__footer{padding:var(--space-3)}}.icon-button{display:inline-flex;align-items:center;gap:var(--space-2)}.icon-button__text{display:inline-block}.icon-button:not(:has(.icon-button__text)){padding:var(--space-2);aspect-ratio:1}.icon-button--small:not(:has(.icon-button__text)){padding:var(--space-1)}.icon-button--large:not(:has(.icon-button__text)){padding:var(--space-3)}.pane-header{background-color:var(--bg-secondary);border-bottom:var(--border-width) solid var(--border-color);padding:var(--space-2) var(--space-3)}.pane-header__content{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);width:100%}.pane-header__title-section{display:flex;align-items:center;gap:var(--space-2);flex:1;min-width:0}.pane-header__icon{flex-shrink:0}.pane-header__text{display:flex;flex-direction:column;min-width:0}.pane-header__title,.pane-header__subtitle{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pane-header__actions{display:flex;align-items:center;gap:var(--space-1);flex-shrink:0;margin-left:auto}.pane-header__actions .btn{width:32px;height:32px;padding:0;display:flex;align-items:center;justify-content:center}.pane-header__settings{margin-right:var(--space-2);opacity:.8}.pane-header__settings:hover{opacity:1}.pane-header__google-fonts{margin-right:var(--space-1)}.pane-header--html{background-color:var(--bg-tertiary);color:var(--text-primary);border-radius:0}.pane-header--html .pane-header__icon{color:#e34c26}.pane-header--css{background-color:var(--bg-tertiary);color:var(--text-primary);border-radius:0}.pane-header--css .pane-header__icon{color:#1572b6}.pane-header--javascript{background-color:var(--bg-tertiary);color:var(--text-primary);border-radius:0}.pane-header--javascript .pane-header__icon{color:#f7df1e}.theme-brutalism .pane-header{border-width:var(--border-width);text-transform:uppercase;font-weight:var(--font-weight-bold)}.theme-minimal .pane-header{background-color:transparent;border-bottom:var(--border-width) solid var(--border-color);padding:var(--space-2)}.google-fonts-search{position:relative;display:inline-block}.google-fonts-search__trigger{background:none;border:none;cursor:pointer;padding:6px;border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;transition:background-color .2s ease;color:var(--text-secondary)}.google-fonts-search__trigger:hover{background-color:var(--bg-hover);color:var(--text-primary)}.google-fonts-search__dropdown{position:absolute;top:100%;right:0;background:var(--bg-primary);border:1px solid var(--border-primary);border-radius:var(--border-radius);box-shadow:var(--shadow-lg);z-index:10000;min-width:320px;max-height:400px;overflow:hidden;margin-top:4px;animation:dropdownEnter .2s ease-out}@keyframes dropdownEnter{0%{opacity:0;transform:translateY(-8px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.google-fonts-search__header{position:relative;padding:12px;border-bottom:1px solid var(--border-primary)}.google-fonts-search__input{width:100%;padding:8px 12px;border:1px solid var(--border-primary);border-radius:var(--border-radius);background:var(--bg-secondary);color:var(--text-primary);font-size:14px;outline:none;transition:border-color .2s ease}.google-fonts-search__input:focus{border-color:var(--accent-primary)}.google-fonts-search__loading{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--text-secondary)}.google-fonts-search__results{max-height:320px;overflow-y:auto}.google-fonts-search__result{width:100%;padding:12px 16px;border:none;background:none;text-align:left;cursor:pointer;color:var(--text-primary);transition:background-color .2s ease;border-bottom:1px solid var(--border-secondary)}.google-fonts-search__font-name{font-size:16px;font-weight:400;display:block}.google-fonts-search__result:last-child{border-bottom:none}.google-fonts-search__result:hover{background-color:var(--bg-hover)}.google-fonts-search__no-results{padding:16px;text-align:center;color:var(--text-secondary);font-size:14px}.google-fonts-search__no-results small{display:block;font-size:12px;margin-top:4px;opacity:.8}[data-theme=dark] .google-fonts-search__dropdown{box-shadow:0 4px 12px #0000004d}.google-fonts-search__results::-webkit-scrollbar{width:6px}.google-fonts-search__results::-webkit-scrollbar-track{background:var(--bg-secondary)}.google-fonts-search__results::-webkit-scrollbar-thumb{background:var(--border-primary);border-radius:3px}.google-fonts-search__results::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}.theme-switcher{display:block}.theme-switcher--icon{position:relative;display:inline-block}.theme-switcher__dropdown{position:absolute;top:100%;right:0;background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--border-radius);box-shadow:var(--shadow-lg);min-width:150px;z-index:1000;margin-top:4px}.theme-switcher__option{display:flex;align-items:center;gap:var(--space-2);width:100%;padding:var(--space-2) var(--space-3);border:none;background:none;color:var(--text-primary);cursor:pointer;font-size:var(--font-size-sm);transition:background-color var(--transition-fast)}.theme-switcher__option:hover{background-color:var(--bg-tertiary)}.theme-switcher__option--active{background-color:var(--color-primary);color:var(--text-inverse)}.theme-switcher__option--active:hover{background-color:var(--color-primary-hover)}.theme-switcher--dropdown{display:inline-block}.theme-switcher__label{display:flex;flex-direction:column;gap:var(--space-1)}.theme-switcher__select{padding:var(--space-2) var(--space-3);font-family:inherit;font-size:var(--font-size-base);color:var(--text-primary);background-color:var(--bg-primary);border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius);cursor:pointer;transition:all var(--transition-fast)}.theme-switcher__select:hover{border-color:var(--color-primary)}.theme-switcher__select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px rgba(var(--color-primary),.2)}.theme-switcher--grid{width:100%}.theme-switcher__title{margin-bottom:var(--space-4)}.theme-switcher__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--space-3)}.theme-switcher__item{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:var(--space-4);background-color:var(--bg-secondary);border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius);cursor:pointer;transition:all var(--transition-fast);text-align:center}.theme-switcher__item:hover{background-color:var(--bg-tertiary);transform:translateY(-2px);box-shadow:var(--shadow-md)}.theme-switcher__item--active{background-color:var(--color-primary);color:var(--text-inverse);border-color:var(--color-primary)}.theme-switcher__item--active .typography,.theme-switcher__item--active .icon{color:var(--text-inverse)}.theme-switcher__item-icon{margin-bottom:var(--space-2)}.theme-brutalism .theme-switcher__select,.theme-brutalism .theme-switcher__item{border-width:var(--border-width);border-radius:0}.theme-brutalism .theme-switcher__item:hover{transform:translate(-4px,-4px);box-shadow:var(--shadow-lg)}.theme-minimal .theme-switcher__select,.theme-minimal .theme-switcher__item{border-radius:0;box-shadow:none}.theme-minimal .theme-switcher__item:hover{transform:none;box-shadow:none;border-color:var(--text-primary)}.auto-import-suggestions{background:var(--background-secondary);border:1px solid var(--border-color);border-radius:4px;box-shadow:0 4px 12px #00000026;min-width:300px;max-width:500px;max-height:300px;overflow:hidden;font-family:var(--font-mono);font-size:13px}.suggestions-header{padding:8px 12px;background:var(--background-tertiary);border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center}.suggestions-title{font-weight:600;color:var(--text-primary)}.suggestions-hint{font-size:11px;color:var(--text-secondary)}.suggestions-list{list-style:none;margin:0;padding:0;max-height:250px;overflow-y:auto}.suggestion-item{padding:8px 12px;cursor:pointer;border-bottom:1px solid var(--border-color-light);transition:background-color .1s ease}.suggestion-item:hover,.suggestion-item.selected{background:var(--background-accent)}.suggestion-item:last-child{border-bottom:none}.suggestion-main{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.suggestion-label{font-weight:500;color:var(--text-primary)}.suggestion-kind{font-size:11px;color:var(--text-secondary);background:var(--background-tertiary);padding:2px 6px;border-radius:3px;text-transform:uppercase}.suggestion-detail{font-size:12px;color:var(--text-secondary);margin-bottom:4px}.suggestion-preview{font-size:11px;color:var(--text-accent)}.suggestion-preview code{background:var(--background-tertiary);padding:2px 4px;border-radius:2px;font-family:inherit}[data-theme=dark] .auto-import-suggestions{box-shadow:0 4px 12px #0006}.suggestions-list::-webkit-scrollbar{width:6px}.suggestions-list::-webkit-scrollbar-track{background:var(--background-tertiary)}.suggestions-list::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px}.suggestions-list::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}.missing-import-warnings{position:absolute;top:10px;right:10px;max-width:400px;background:var(--background-warning);border:1px solid var(--border-warning);border-radius:6px;box-shadow:0 2px 8px #0000001a;z-index:100;font-family:var(--font-mono);font-size:13px}.warnings-header{padding:8px 12px;background:var(--background-warning-dark);border-bottom:1px solid var(--border-warning);border-radius:5px 5px 0 0}.warnings-title{font-weight:600;color:var(--text-warning);font-size:12px}.warnings-list{padding:0}.warning-item{border-bottom:1px solid var(--border-warning-light)}.warning-item:last-child{border-bottom:none}.warning-summary{display:flex;align-items:center;justify-content:space-between;padding:8px 12px}.warning-toggle{background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:8px;flex:1;text-align:left;padding:0;color:var(--text-primary)}.toggle-icon{transition:transform .2s ease;font-size:10px;color:var(--text-secondary)}.toggle-icon.expanded{transform:rotate(90deg)}.warning-text{font-size:13px}.warning-text code{background:var(--background-tertiary);padding:1px 4px;border-radius:2px;font-family:var(--font-mono);color:var(--text-accent)}.warning-details{padding:0 12px 12px;border-top:1px solid var(--border-warning-light);background:var(--background-secondary)}.suggestions-header{font-size:11px;color:var(--text-secondary);margin:8px 0 6px;text-transform:uppercase;font-weight:600}.suggestions-grid{display:flex;flex-direction:column;gap:4px}.suggestion-option{background:var(--background-primary);border:1px solid var(--border-color);border-radius:4px;padding:8px;cursor:pointer;text-align:left;transition:all .1s ease}.suggestion-option:hover{background:var(--background-accent);border-color:var(--border-accent)}.suggestion-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.suggestion-name{font-weight:500;color:var(--text-primary)}.suggestion-source{font-size:11px;color:var(--text-secondary)}.suggestion-code{font-size:11px}.suggestion-code code{background:var(--background-tertiary);padding:2px 4px;border-radius:2px;font-family:var(--font-mono);color:var(--text-accent)}:root{--background-warning: #fef3cd;--background-warning-dark: #fce5a6;--border-warning: #f9c74f;--border-warning-light: #fae5a7;--text-warning: #8a6914}[data-theme=dark]{--background-warning: #2d2a1f;--background-warning-dark: #3d3426;--border-warning: #5a4f2d;--border-warning-light: #444026;--text-warning: #f9c74f}.dev-auth-helper{background:var(--bg-warning, rgba(245, 158, 11, .1));border:1px solid var(--warning-color, #f59e0b);border-radius:8px;padding:16px;margin-bottom:16px;display:flex;flex-direction:column;gap:12px}.dev-helper-header{display:flex;flex-direction:column;gap:4px}.dev-header-title{display:flex;align-items:center;gap:8px}.dev-icon{color:var(--warning-color, #f59e0b);flex-shrink:0}.dev-helper-form{display:flex;flex-direction:column;gap:12px}.profile-select{width:100%;padding:8px 12px;border:1px solid var(--border-color);border-radius:6px;background:var(--bg-primary);color:var(--text-primary);font-size:14px;transition:border-color .2s ease}.profile-select:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 2px #6366f11a}.profile-select:disabled{opacity:.6;cursor:not-allowed}.quick-login-btn{align-self:flex-start;display:flex;align-items:center;gap:6px}.dev-helper-info{padding-top:8px;border-top:1px solid var(--border-color)}@media (max-width: 480px){.dev-auth-helper{padding:12px}.dev-helper-form{gap:10px}.profile-select{font-size:16px}}.user-status-indicator{display:flex;align-items:center;gap:12px;position:relative;height:32px;max-height:32px}.user-status-indicator.compact{gap:6px}.user-status-indicator.loading{opacity:.7}.status-spinner{display:flex;align-items:center;justify-content:center;color:var(--text-secondary)}.user-status-indicator.signed-out{align-items:center}.sign-in-button{position:relative;overflow:hidden}.sign-in-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s ease}.sign-in-button:hover:before{left:100%}.user-status-indicator.signed-in{position:relative}.welcome-message{position:absolute;top:-38px;right:0;background:var(--accent-color);color:#fff;padding:6px 12px;border-radius:var(--border-radius-lg);white-space:nowrap;z-index:1000;font-size:11px;font-weight:500;box-shadow:0 4px 12px #0003;animation:slideInDown .3s ease,fadeOut .3s ease 2.7s forwards;max-width:200px;overflow:hidden;text-overflow:ellipsis}@keyframes slideInDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.user-profile-button{display:flex;align-items:center;gap:8px;padding:4px 8px;background:transparent;border:none;border-radius:var(--border-radius);cursor:pointer;transition:all .2s ease;height:32px;min-height:32px;max-height:32px}.user-profile-button:hover{background:#ffffff0d}.user-profile-button:active{transform:translateY(0)}.user-status-indicator.compact .user-profile-button{padding:2px 6px;height:28px;min-height:28px;max-height:28px;border-radius:var(--border-radius);background:transparent;border:none}.user-avatar{position:relative;width:28px;height:28px;flex-shrink:0}.user-status-indicator.compact .user-avatar{width:24px;height:24px}.avatar-image{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid var(--border-color)}.avatar-initials{width:100%;height:100%;border-radius:50%;background:var(--accent-color);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:#fff;border:2px solid var(--border-color)}.user-status-indicator.compact .avatar-initials{font-size:10px}.online-indicator{position:absolute;bottom:-1px;right:-1px;width:10px;height:10px;background:var(--success-color, #22c55e);border:2px solid var(--bg-primary);border-radius:50%;animation:pulse-online 2s infinite}.user-status-indicator.compact .online-indicator{width:8px;height:8px}@keyframes pulse-online{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.1)}}.user-info{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;max-width:none}.user-name{font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.user-status{font-size:11px;line-height:1}.dropdown-icon{color:var(--text-tertiary);transition:transform .2s ease;flex-shrink:0}.user-profile-button:hover .dropdown-icon{color:var(--text-secondary)}.user-quick-actions{display:flex;align-items:center;gap:4px}.save-status-button{position:relative;pointer-events:none}.save-indicator{position:absolute;top:2px;right:2px;width:6px;height:6px;border-radius:50%;background:var(--success-color, #22c55e)}.save-indicator.saved{animation:pulse-success 1s ease}.save-indicator.saving{background:var(--warning-color, #f59e0b);animation:pulse-warning 1s infinite}.save-indicator.error{background:var(--danger-color, #ef4444);animation:pulse-error 1s infinite}@keyframes pulse-success{0%{opacity:0;transform:scale(0)}50%{opacity:1;transform:scale(1.2)}to{opacity:1;transform:scale(1)}}@keyframes pulse-warning{0%,to{opacity:1}50%{opacity:.5}}@keyframes pulse-error{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.1)}}@media (max-width: 768px){.user-status-indicator{gap:6px;height:28px;max-height:28px}.user-profile-button{padding:2px 6px;gap:6px;height:28px;min-height:28px;max-height:28px;background:transparent;border:none}.user-name{font-size:12px;max-width:140px}.user-status{font-size:10px}.welcome-message{top:-32px;font-size:10px;padding:4px 8px;max-width:150px}}@media (max-width: 480px){.user-status-indicator:not(.compact) .user-info{display:none}.user-status-indicator:not(.compact) .dropdown-icon{display:none}.user-profile-button{padding:4px;border-radius:50%;height:28px;min-height:28px;max-height:28px;width:28px;background:transparent;border:none}}@media (prefers-contrast: high){.user-profile-button{border:1px solid var(--border-color);background:var(--bg-secondary)}.avatar-image,.avatar-initials,.online-indicator{border-width:2px}}@media (prefers-reduced-motion: reduce){.user-profile-button,.online-indicator,.save-indicator,.welcome-message,.dropdown-icon,.sign-in-button:before{animation:none;transition:none}.user-profile-button:hover{transform:none}}.user-profile-button:focus,.sign-in-button:focus{outline:2px solid var(--accent-color);outline-offset:2px;background:#ffffff1a}.cloud-sync-status{position:fixed;bottom:80px;right:20px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:8px;padding:8px 12px;box-shadow:0 4px 12px #00000026;z-index:50;min-width:200px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:all .3s ease;animation:slideInUp .3s ease}.cloud-sync-status.compact{min-width:150px;padding:6px 10px;bottom:70px;right:16px}@keyframes slideInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.cloud-sync-status.success{border-color:var(--success-color, #22c55e);background:var(--bg-success, rgba(34, 197, 94, .1))}.cloud-sync-status.warning{border-color:var(--warning-color, #f59e0b);background:var(--bg-warning, rgba(245, 158, 11, .1))}.cloud-sync-status.info{border-color:var(--info-color, #3b82f6);background:var(--bg-info, rgba(59, 130, 246, .1))}.status-content{display:flex;align-items:center;gap:8px}.status-icon{flex-shrink:0;color:var(--text-secondary)}.status-icon.saving{color:var(--info-color, #3b82f6)}.status-icon.unsaved{color:var(--warning-color, #f59e0b)}.status-icon.saved{color:var(--success-color, #22c55e)}.status-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.status-message{font-weight:500;color:var(--text-primary);line-height:1.2}.last-saved{font-size:11px;line-height:1}.project-name{font-size:11px;max-width:80px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0}.sync-progress{position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--border-color);border-radius:0 0 8px 8px;overflow:hidden}.progress-bar{height:100%;background:var(--info-color, #3b82f6);width:0%;animation:progressLoad 2s ease-in-out infinite}@keyframes progressLoad{0%{width:0%;margin-left:0%}50%{width:50%;margin-left:25%}to{width:0%;margin-left:100%}}@media (max-width: 768px){.cloud-sync-status{bottom:90px;right:16px;left:16px;min-width:0;max-width:calc(100vw - 32px)}.cloud-sync-status.compact{bottom:80px;padding:8px 12px}.status-content{gap:6px}.project-name{max-width:60px}}@media (max-width: 480px){.cloud-sync-status{bottom:80px}.cloud-sync-status.compact{bottom:70px}.status-text{gap:1px}.status-message{font-size:12px}.last-saved,.project-name{font-size:10px}}@media (prefers-contrast: high){.cloud-sync-status{border-width:2px;-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--bg-primary)}.cloud-sync-status.success,.cloud-sync-status.warning,.cloud-sync-status.info{background:var(--bg-primary)}}@media (prefers-reduced-motion: reduce){.cloud-sync-status{animation:none;transition:none}.progress-bar{animation:none;width:100%}.status-icon.saving circle,.status-icon.unsaved circle{animation:none}}@media (min-width: 1024px){.cloud-sync-status:not(.compact){bottom:20px;right:20px;min-width:240px}}@media (max-width: 320px){.cloud-sync-status .project-name,.cloud-sync-status .last-saved{display:none}}.console-drag-handle{position:relative;height:6px;background-color:transparent;cursor:row-resize;z-index:11;transition:all .2s ease;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none}.console-drag-handle:after{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background-color:var(--border-color);transform:translateY(-50%);transition:all .2s ease}.console-drag-handle:hover:after{background-color:var(--accent-color);height:2px;box-shadow:0 0 4px #6366f14d}.console-drag-handle.resizing:after{background-color:var(--accent-color);height:3px;box-shadow:0 0 8px #6366f166}.console-drag-handle:hover{background-color:#6366f10d}.console-drag-handle.resizing{background-color:#6366f114}@media (pointer: coarse){.console-drag-handle{height:20px;margin-top:-8px;margin-bottom:-8px}.drag-handle-indicator{padding:6px 12px}.drag-dots span{width:4px;height:4px}}@media (prefers-reduced-motion: reduce){.console-drag-handle,.drag-handle-indicator,.drag-dots span{transition:none}}@media (prefers-contrast: high){.console-drag-handle:hover{background-color:#47cf7333}.drag-dots span{background-color:var(--text-primary);border:1px solid var(--border-color)}.console-drag-handle:before{border:2px solid var(--border-color)}}.console-mini-handle{position:fixed;bottom:0;left:0;right:0;height:2px;background:var(--border-color);cursor:pointer;z-index:20;transition:all .2s ease;display:flex;align-items:center;justify-content:center;opacity:.7}.console-mini-handle:hover{height:4px;background:var(--accent-color);opacity:1}.mini-handle-indicator{position:relative;width:60px;height:100%;display:flex;align-items:center;justify-content:center}.mini-handle-line{width:20px;height:1px;background:var(--text-tertiary);border-radius:.5px;transition:all .2s ease;opacity:.6}.console-mini-handle:hover .mini-handle-line{width:30px;height:2px;background:var(--accent-color);opacity:1}.mini-handle-tooltip{position:absolute;bottom:12px;left:50%;transform:translate(-50%);background:var(--bg-tooltip, rgba(0, 0, 0, .9));color:var(--text-tooltip, white);padding:4px 8px;border-radius:4px;font-size:11px;font-weight:500;white-space:nowrap;z-index:100;animation:fadeInUp .2s ease}@keyframes fadeInUp{0%{opacity:0;transform:translate(-50%) translateY(4px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.console-mini-handle:focus{outline:2px solid var(--accent-color);outline-offset:2px}@media (prefers-contrast: high){.console-mini-handle{border-top:2px solid var(--border-color)}.mini-handle-line{background:var(--text-primary);border:1px solid var(--border-color)}}@media (prefers-reduced-motion: reduce){.console-mini-handle,.mini-handle-line,.mini-handle-tooltip{transition:none;animation:none}}.clear-storage-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.clear-storage-modal{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:12px;box-shadow:0 20px 40px #00000026;max-width:500px;width:100%;display:flex;flex-direction:column}.clear-storage-header{padding:20px 24px;border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between}.header-content{display:flex;align-items:center;gap:12px}.warning-icon{color:var(--warning-color, #f59e0b);flex-shrink:0}.clear-storage-content{padding:24px;display:flex;flex-direction:column;gap:16px}.warning-message{display:flex;flex-direction:column;gap:12px}.data-list{list-style:none;margin:0;background:var(--bg-secondary);border-radius:8px;padding:16px}.data-list li{font-size:14px;color:var(--text-secondary);position:relative;padding:4px 0 4px 16px}.data-list li:before{content:"•";position:absolute;left:0;color:var(--warning-color, #f59e0b)}.storage-info{background:var(--bg-secondary);border-radius:8px;padding:16px}.storage-summary{display:flex;align-items:center;justify-content:space-between;gap:12px}.details-toggle{background:none;border:none;color:var(--accent-color);cursor:pointer;font-size:12px;text-decoration:underline;padding:0}.details-toggle:hover{color:var(--accent-hover)}.storage-details{margin-top:12px;border-top:1px solid var(--border-color);padding-top:12px;max-height:150px;overflow-y:auto}.storage-item{display:flex;align-items:center;justify-content:space-between;padding:4px 0;font-size:12px}.item-key{color:var(--text-secondary);font-family:var(--font-mono, monospace);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;margin-right:12px}.item-size{color:var(--text-tertiary);flex-shrink:0}.backup-section{display:flex;flex-direction:column;gap:8px;padding:16px;background:var(--bg-info, rgba(59, 130, 246, .1));border-radius:8px}.backup-button{align-self:flex-start;display:flex;align-items:center;gap:6px}.confirmation-section{display:flex;flex-direction:column;gap:8px}.confirmation-input{width:100%;padding:10px 12px;border:2px solid var(--border-color);border-radius:6px;background:var(--bg-primary);color:var(--text-primary);font-size:14px;font-family:var(--font-mono, monospace);transition:border-color .2s ease}.confirmation-input:focus{outline:none;border-color:var(--accent-color)}.confirmation-input::placeholder{color:var(--text-tertiary);font-style:italic}.clear-storage-actions{padding:20px 24px;border-top:1px solid var(--border-color);display:flex;align-items:center;justify-content:flex-end;gap:12px}.clear-button{display:flex;align-items:center;gap:6px}@media (max-width: 480px){.clear-storage-modal-overlay{padding:12px}.clear-storage-modal{max-height:90vh}.clear-storage-header{padding:16px 20px}.clear-storage-content{padding:20px;gap:16px}.clear-storage-actions{padding:16px 20px}.storage-summary{flex-direction:column;align-items:flex-start;gap:8px}}@media (prefers-contrast: high){.clear-storage-modal,.confirmation-input{border-width:2px}.data-list li:before{font-weight:700}}.success-section{display:flex;flex-direction:column;gap:16px;padding:20px;background:var(--bg-success, rgba(16, 185, 129, .1));border:1px solid var(--success-color, #10b981);border-radius:8px}.success-header{display:flex;align-items:center;gap:12px}.success-icon{flex-shrink:0}.error-details{margin-top:12px;cursor:pointer}.error-details summary{color:var(--warning-color, #f59e0b);font-size:12px;font-weight:500;margin-bottom:8px}.failed-list{list-style:none;margin:0;background:var(--bg-secondary);border-radius:6px;padding:12px;max-height:100px;overflow-y:auto}.failed-list li{padding:4px 0;font-size:12px;color:var(--text-secondary);word-break:break-all}.failed-list code{color:var(--warning-color, #f59e0b);font-family:var(--font-mono, monospace);background:var(--bg-primary);padding:2px 4px;border-radius:3px;margin-right:8px}@media (prefers-reduced-motion: reduce){.clear-storage-modal-overlay,.confirmation-input{transition:none}}.mobile-nav-bar{position:fixed;bottom:0;left:0;right:0;background:var(--bg-primary);border-top:1px solid var(--border-color);padding:8px 16px;display:flex;align-items:center;gap:12px;z-index:100;min-height:60px;box-shadow:0 -2px 12px #0000001a}@supports (padding: max(0px)){.mobile-nav-bar{padding-bottom:max(8px,env(safe-area-inset-bottom))}}.nav-project-info{flex-shrink:0;max-width:120px;overflow:hidden}.project-name{color:var(--text-secondary);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:4px}.unsaved-indicator{color:var(--accent-color);font-size:20px;line-height:1;animation:pulse 2s infinite}@keyframes pulse{0%,50%,to{opacity:1}25%,75%{opacity:.5}}.nav-pane-tabs{display:flex;gap:4px;flex:1;justify-content:center;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.nav-pane-tabs::-webkit-scrollbar{display:none}.pane-tab{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 12px;background:none;border:none;border-radius:8px;cursor:pointer;transition:all .2s ease;min-width:60px;flex-shrink:0;position:relative}.pane-tab:hover{background:var(--bg-secondary)}.pane-tab.active{background:var(--accent-color);color:#fff}.pane-tab.active:hover{background:var(--accent-hover)}.pane-tab.collapsed{opacity:.5}.tab-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;color:currentColor}.tab-label{font-size:11px;font-weight:500;color:currentColor;text-align:center;line-height:1}.nav-primary-action{flex-shrink:0;margin:0 8px}.run-button{width:44px;height:44px;border-radius:22px;background:var(--accent-color);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;transition:all .2s ease;box-shadow:0 2px 8px #0003}.run-button:hover{background:var(--accent-hover);transform:scale(1.05)}.run-button:active{transform:scale(.95)}.run-button.running{background:var(--text-secondary);cursor:not-allowed}.run-button.running:hover{transform:none}.run-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px}.nav-quick-actions{display:flex;gap:4px;flex-shrink:0}.quick-action{padding:8px;min-width:36px;min-height:36px}.preview-toggle{position:absolute;top:-40px;right:16px;width:32px;height:32px;border-radius:16px;background:var(--bg-primary);border:1px solid var(--border-color);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:all .2s ease;box-shadow:0 2px 8px #0000001a}.preview-toggle:hover{background:var(--bg-secondary);color:var(--text-primary);transform:translateY(-2px)}.preview-toggle svg{transition:transform .2s ease}.preview-toggle svg.rotate-180{transform:rotate(180deg)}@media (hover: none) and (pointer: coarse){.mobile-nav-bar{padding:12px 16px;min-height:70px}.pane-tab{padding:12px 16px;min-width:70px}.tab-icon{width:24px;height:24px}.tab-label{font-size:12px}.run-button{width:50px;height:50px;border-radius:25px}.quick-action{padding:12px;min-width:44px;min-height:44px}.preview-toggle{width:40px;height:40px;border-radius:20px;top:-50px}}@media (orientation: landscape) and (max-height: 500px){.mobile-nav-bar{padding:6px 12px;min-height:50px}.pane-tab{padding:6px 10px;min-width:50px}.tab-icon{width:18px;height:18px}.tab-label{font-size:10px}.run-button{width:36px;height:36px;border-radius:18px}.run-icon{width:18px;height:18px}.quick-action{padding:6px;min-width:32px;min-height:32px}.preview-toggle{width:28px;height:28px;border-radius:14px;top:-35px}}@media (prefers-contrast: high){.mobile-nav-bar{border-top:2px solid var(--text-primary)}.pane-tab.active,.run-button{border:2px solid var(--accent-color)}}@media (prefers-reduced-motion: reduce){.pane-tab,.run-button,.quick-action,.preview-toggle,.tab-icon,.unsaved-indicator{transition:none;animation:none}.run-button:hover,.preview-toggle:hover{transform:none}}.pane-tab:focus,.run-button:focus,.preview-toggle:focus{outline:2px solid var(--accent-color);outline-offset:2px}.pane-tab:active{transform:scale(.95)}.quick-action:active,.preview-toggle:active{transform:scale(.9)}.bottom-sheet-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background:#0000004d;z-index:1000;display:flex;align-items:flex-end;transition:opacity .3s ease}.bottom-sheet{width:100%;max-height:70vh;background:var(--bg-primary);border-radius:16px 16px 0 0;border:1px solid var(--border-color);border-bottom:none;box-shadow:0 -8px 32px #0003;transform:translateY(0);transition:transform .3s ease-out;display:flex;flex-direction:column;overflow:hidden}.bottom-sheet-handle{padding:12px;display:flex;justify-content:center;cursor:grab;user-select:none;-webkit-user-select:none}.bottom-sheet-handle:active{cursor:grabbing}.handle-bar{width:40px;height:4px;background:var(--text-tertiary);border-radius:2px;opacity:.5;transition:opacity .2s ease}.bottom-sheet-handle:hover .handle-bar,.bottom-sheet-handle:active .handle-bar{opacity:.8}.bottom-sheet-header{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;border-bottom:1px solid var(--border-color);background:var(--bg-secondary)}.sheet-tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.sheet-tabs::-webkit-scrollbar{display:none}.sheet-tab{padding:8px 16px;background:none;border:none;border-radius:6px;font-size:14px;font-weight:500;color:var(--text-secondary);cursor:pointer;transition:all .2s ease;white-space:nowrap;min-width:0;flex-shrink:0}.sheet-tab:hover{background:var(--bg-tertiary);color:var(--text-primary)}.sheet-tab.active{background:var(--accent-color);color:#fff}.sheet-tab.active:hover{background:var(--accent-hover)}.bottom-sheet-content{flex:1;overflow-y:auto;padding:16px;-webkit-overflow-scrolling:touch}.bottom-sheet--console .bottom-sheet-content{padding:0}.bottom-sheet--files .bottom-sheet-content{padding:8px}.bottom-sheet--libraries .bottom-sheet-content{padding:12px}.bottom-sheet-settings{display:flex;flex-direction:column;gap:20px}.settings-section{display:flex;flex-direction:column;gap:12px}.setting-item{display:flex;justify-content:space-between;align-items:center;padding:8px 0}.setting-item select{padding:6px 12px;border:1px solid var(--border-color);border-radius:4px;background:var(--bg-primary);color:var(--text-primary);font-size:14px;min-width:100px}.setting-item select:focus{outline:none;border-color:var(--accent-color)}.bottom-sheet-backdrop.entering{opacity:0}.bottom-sheet-backdrop.entered{opacity:1}.bottom-sheet-backdrop.exiting{opacity:0}.bottom-sheet.entering{transform:translateY(100%)}.bottom-sheet.entered{transform:translateY(0)}.bottom-sheet.exiting{transform:translateY(100%)}@media (hover: none) and (pointer: coarse){.sheet-tab{padding:12px 20px;font-size:16px}.bottom-sheet-handle{padding:16px}.handle-bar{width:50px;height:5px}.bottom-sheet-content{padding:20px}}@supports (padding: max(0px)){.bottom-sheet{padding-bottom:max(16px,env(safe-area-inset-bottom))}}@media (orientation: landscape) and (max-height: 500px){.bottom-sheet{max-height:50vh}.bottom-sheet-content{padding:12px}.sheet-tab{padding:6px 12px;font-size:13px}}@media (prefers-contrast: high){.bottom-sheet{border:2px solid var(--text-primary)}.sheet-tab.active{border:2px solid var(--accent-color)}}@media (prefers-reduced-motion: reduce){.bottom-sheet,.bottom-sheet-backdrop,.sheet-tab,.handle-bar{transition:none}}.mobile-touch-keyboard{background:var(--bg-primary);border-top:1px solid var(--border-color);padding:8px;display:flex;flex-direction:column;gap:8px;user-select:none;-webkit-user-select:none}.keyboard-tabs{display:flex;gap:4px;padding:0 4px}.keyboard-tab{flex:1;padding:8px 12px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:6px;font-size:12px;font-weight:500;color:var(--text-secondary);cursor:pointer;transition:all .2s ease;min-height:36px}.keyboard-tab:hover{background:var(--bg-tertiary);color:var(--text-primary)}.keyboard-tab.active{background:var(--accent-color);color:#fff;border-color:var(--accent-color)}.keyboard-keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(40px,1fr));gap:6px;padding:4px;max-height:120px;overflow-y:auto;-webkit-overflow-scrolling:touch}.keyboard-key{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:6px;padding:8px 4px;font-size:13px;font-weight:500;font-family:JetBrains Mono,monospace;color:var(--text-primary);cursor:pointer;transition:all .1s ease;min-height:36px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.keyboard-key:hover{background:var(--bg-tertiary);border-color:var(--border-hover);transform:translateY(-1px)}.keyboard-key:active,.keyboard-key.pressed{background:var(--accent-color);color:#fff;border-color:var(--accent-color);transform:translateY(0);box-shadow:inset 0 2px 4px #0003}.keyboard-key:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;background:#ffffff4d;border-radius:50%;transform:translate(-50%,-50%);transition:width .3s ease,height .3s ease;pointer-events:none}.keyboard-key:active:before,.keyboard-key.pressed:before{width:100%;height:100%}.keyboard-actions{display:flex;gap:8px;padding:4px}.keyboard-action{flex:1;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:6px;padding:10px 12px;font-size:12px;font-weight:600;color:var(--text-primary);cursor:pointer;transition:all .2s ease;min-height:40px;display:flex;align-items:center;justify-content:center}.keyboard-action:hover{background:var(--accent-color);color:#fff;border-color:var(--accent-color);transform:translateY(-1px)}.keyboard-action:active{transform:translateY(0);box-shadow:inset 0 2px 4px #0003}@media (max-width: 480px){.keyboard-keys{grid-template-columns:repeat(7,1fr);gap:4px}.keyboard-key{padding:6px 2px;font-size:11px;min-height:32px}.keyboard-tab{padding:6px 8px;font-size:11px;min-height:32px}.keyboard-action{padding:8px 10px;font-size:11px;min-height:36px}}@media (orientation: landscape) and (max-height: 500px){.mobile-touch-keyboard{padding:4px;gap:4px}.keyboard-keys{max-height:80px;grid-template-columns:repeat(auto-fit,minmax(32px,1fr));gap:3px}.keyboard-key{padding:4px 2px;font-size:10px;min-height:28px}.keyboard-tab{padding:4px 6px;font-size:10px;min-height:28px}.keyboard-actions{gap:4px}.keyboard-action{padding:6px 8px;font-size:10px;min-height:32px}}@media (prefers-contrast: high){.keyboard-key,.keyboard-tab,.keyboard-action{border-width:2px}.keyboard-key.active,.keyboard-tab.active{border:3px solid var(--accent-color)}}@media (prefers-reduced-motion: reduce){.keyboard-key,.keyboard-tab,.keyboard-action,.keyboard-key:before{transition:none;animation:none}.keyboard-key:hover,.keyboard-action:hover{transform:none}}.keyboard-key:focus,.keyboard-tab:focus,.keyboard-action:focus{outline:2px solid var(--accent-color);outline-offset:2px}@media (hover: none) and (pointer: coarse){.keyboard-key,.keyboard-tab,.keyboard-action{min-height:44px}.keyboard-keys{gap:8px}.keyboard-key{font-size:14px;padding:10px 6px}.keyboard-tab,.keyboard-action{padding:12px 16px;font-size:13px}}@media (max-width: 767px){.buildbento-layout.layout-mobile-portrait{display:flex;flex-direction:column;height:100vh;overflow:hidden}.buildbento-layout.layout-mobile-portrait .grid.buildbento-layout{display:none}.mobile-container{display:flex;flex-direction:column;height:100%;overflow:hidden}.layout-mobile-portrait .navbar{padding:8px 16px;min-height:50px;border-bottom:1px solid var(--border-color)}.layout-mobile-portrait .navbar__brand{gap:8px}.layout-mobile-portrait .buildbento-icon-logo{height:32px}.layout-mobile-portrait .buildbento-text-logo{height:28px}.layout-mobile-portrait .navbar__actions{gap:4px}.layout-mobile-portrait .navbar__actions>*:not(.user-button){display:none}.mobile-main-content{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative}.mobile-preview-section{height:var(--preview-height, 45%);background:var(--bg-secondary);border-bottom:1px solid var(--border-color);overflow:hidden;transition:height .3s ease;position:relative}.mobile-preview-section.collapsed{height:40px}.mobile-preview-header{display:flex;align-items:center;justify-content:between;padding:8px 16px;background:var(--bg-primary);border-bottom:1px solid var(--border-color);min-height:40px}.mobile-preview-content{height:calc(100% - 40px);overflow:hidden}.mobile-preview-content.collapsed{display:none}.mobile-editor-section{height:var(--editor-height, 55%);display:flex;flex-direction:column;overflow:hidden;position:relative}.mobile-editor-tabs{display:none}.mobile-editor-content{flex:1;overflow:hidden;position:relative}.mobile-editor-pane{position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;visibility:hidden;transition:opacity .2s ease}.mobile-editor-pane.active{opacity:1;visibility:visible;z-index:1}.mobile-nav-space{height:70px;flex-shrink:0}.layout-mobile-portrait.keyboard-visible .mobile-editor-section{height:60%}.layout-mobile-portrait.keyboard-visible .mobile-preview-section{height:40%}.layout-mobile-portrait.bottom-sheet-open .mobile-main-content{height:calc(100% - var(--bottom-sheet-height, 300px))}}@media (max-width: 767px) and (orientation: landscape){.buildbento-layout.layout-mobile-landscape{display:flex;height:100vh;overflow:hidden}.buildbento-layout.layout-mobile-landscape .grid.buildbento-layout,.layout-mobile-landscape .navbar{display:none}.mobile-landscape-container{display:flex;width:100%;height:100%}.mobile-landscape-preview{width:50%;display:flex;flex-direction:column;border-right:1px solid var(--border-color)}.mobile-landscape-editor{width:50%;display:flex;flex-direction:column}.mobile-landscape-tabs{display:flex;background:var(--bg-secondary);border-bottom:1px solid var(--border-color);padding:4px;gap:2px}.mobile-landscape-tab{flex:1;padding:6px 8px;background:none;border:none;border-radius:4px;font-size:12px;font-weight:500;color:var(--text-secondary);cursor:pointer;transition:all .2s ease}.mobile-landscape-tab.active{background:var(--accent-color);color:#fff}.mobile-landscape-editor-content{flex:1;position:relative;overflow:hidden}}@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait){.buildbento-layout.layout-tablet-portrait{display:grid;grid-template-rows:auto 1fr auto;height:100vh;overflow:hidden}.buildbento-layout.layout-tablet-portrait .grid.buildbento-layout{display:none}.tablet-portrait-main{display:grid;grid-template-columns:1fr;grid-template-rows:1fr 1fr;gap:1px;overflow:hidden}.tablet-portrait-editors{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--border-color)}.tablet-portrait-preview{background:var(--bg-secondary)}}@media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape){.buildbento-layout.layout-tablet-landscape{display:grid;grid-template-rows:auto 1fr;grid-template-columns:1fr 1fr;height:100vh;overflow:hidden}.buildbento-layout.layout-tablet-landscape .grid.buildbento-layout{display:none}.tablet-landscape-editors{display:grid;grid-template-rows:1fr 1fr 1fr;gap:1px;background:var(--border-color)}.tablet-landscape-preview{background:var(--bg-secondary)}}.mobile-editor{width:100%;height:100%;border:none;background:var(--bg-primary)}.mobile-editor .cm-editor{height:100%;font-size:16px}.mobile-editor .cm-content{padding:16px;line-height:1.6}.mobile-editor .cm-cursor{border-left-width:2px}.mobile-preview iframe{width:100%;height:100%;border:none;background:#fff}@media (hover: none) and (pointer: coarse){.mobile-editor-content{-webkit-overflow-scrolling:touch;scrollbar-width:thin}.mobile-preview-content{-webkit-overflow-scrolling:touch}}.gesture-area{touch-action:pan-y}.swipe-indicator{position:absolute;top:50%;transform:translateY(-50%);width:4px;height:40px;background:var(--accent-color);border-radius:2px;opacity:0;transition:opacity .2s ease}.swipe-indicator.left{left:8px}.swipe-indicator.right{right:8px}.gesture-area.swiping .swipe-indicator{opacity:.5}@media (prefers-reduced-motion: reduce){.mobile-preview-section,.mobile-editor-pane,.mobile-landscape-tab{transition:none}}@media (prefers-contrast: high){.mobile-preview-header,.mobile-landscape-tabs{border-bottom:2px solid var(--text-primary)}}.mobile-editor-pane,.mobile-preview-section{transform:translateZ(0);will-change:transform}@supports (padding: max(0px)){.layout-mobile-portrait .navbar{padding-top:max(8px,env(safe-area-inset-top));padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}.mobile-nav-space{height:max(70px,calc(70px + env(safe-area-inset-bottom)))}.mobile-landscape-container{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}}.profile-page{min-height:100vh;background:var(--bg-primary);display:flex;flex-direction:column}.profile-navbar{height:56px;background-color:var(--bg-secondary);border-bottom:1px solid var(--border-color);border-radius:var(--border-radius-sm);display:flex;align-items:center;justify-content:space-between;padding:0 16px;gap:16px;z-index:100}.profile-navbar .navbar__brand{display:flex;align-items:center;gap:12px}.profile-navbar .navbar__actions{display:flex;align-items:center;gap:8px}.profile-navbar .navbar__brand img{filter:brightness(0) invert(1)}.profile-navbar .buildbento-icon-logo{height:40px;width:auto;transform:rotate(-8deg);transition:transform .2s ease}.profile-navbar .buildbento-icon-logo:hover{transform:rotate(0) scale(1.1) translateY(-2px)}.profile-navbar .buildbento-text-logo{height:35px;width:auto;padding:5px 0;transition:opacity .3s ease}.profile-main{flex:1;display:flex;justify-content:center;padding:24px}.profile-container{width:100%;max-width:1200px;display:flex;flex-direction:column;gap:24px}.profile-header{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--border-radius-lg);padding:32px;display:flex;justify-content:space-between;align-items:flex-start;gap:24px}.profile-avatar-section{display:flex;align-items:center;gap:24px}.profile-avatar-large{width:80px;height:80px;border-radius:50%;overflow:hidden;border:3px solid var(--border-color);background:var(--bg-tertiary)}.profile-avatar-large .avatar-image{width:100%;height:100%;object-fit:cover}.profile-avatar-large .avatar-initials{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--accent-color);color:#fff;font-size:28px;font-weight:600}.profile-info{display:flex;flex-direction:column;gap:4px}.profile-name{margin:0;color:var(--text-primary)}.profile-email,.profile-joined{margin:0}.profile-actions{display:flex;gap:12px;align-items:flex-start}.sign-out-button{color:var(--danger-color)}.sign-out-button:hover{background:var(--danger-bg);border-color:var(--danger-color)}.profile-content{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--border-radius-lg);overflow:hidden}.profile-tabs{display:flex;background-color:var(--bg-tertiary);border-bottom:1px solid var(--border-color);border-radius:1px 1px 0 0}.tab-button{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:16px 20px;background:none;border:none;color:var(--text-secondary);font-size:14px;font-weight:500;cursor:pointer;transition:all .15s ease;border-bottom:3px solid transparent;border-radius:4px 4px 0 0}.tab-button:hover{color:var(--text-primary);background-color:#ffffff0d}.tab-button.active{color:var(--accent-color);border-bottom-color:var(--accent-color);background-color:#3b82f61a}.tab-content{padding:24px;max-height:60vh;overflow-y:auto}.overview-tab{display:flex;flex-direction:column;gap:32px}.edit-form{display:flex;flex-direction:column;gap:24px;max-width:600px}.form-group{display:flex;flex-direction:column;gap:8px}.form-group label{color:var(--text-primary);font-weight:500;font-size:14px}.form-group input,.form-group textarea{padding:12px 16px;border:1px solid var(--border-color);border-radius:var(--border-radius-lg);background:var(--bg-primary);color:var(--text-primary);font-size:14px;transition:border-color .2s ease}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--accent-color)}.form-group textarea{resize:vertical;min-height:100px}.profile-details{display:flex;flex-direction:column;gap:32px;max-width:600px}.detail-section{display:flex;flex-direction:column;gap:12px}.detail-section h4{margin:0;color:var(--text-primary)}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:24px;margin-top:16px}.stat-item{display:flex;flex-direction:column;align-items:center;padding:20px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--border-radius-lg);text-align:center}.stat-item h3{margin:0 0 4px}.stat-item .typography--small{margin:0}.projects-tab{min-height:400px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:64px 24px;text-align:center;gap:16px}.empty-state h4,.empty-state .typography--body{margin:0}.projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}.project-card{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--border-radius-lg);overflow:hidden;transition:all .2s ease}.project-card:hover{border-color:var(--border-hover);transform:translateY(-2px);box-shadow:0 8px 24px #0000001a}.project-preview{height:160px;background:var(--bg-tertiary);display:flex;align-items:center;justify-content:center;overflow:hidden}.project-preview img{width:100%;height:100%;object-fit:cover}.project-placeholder{color:var(--text-tertiary)}.project-info{padding:16px;display:flex;flex-direction:column;gap:8px}.project-name{margin:0;color:var(--text-primary)}.project-date{margin:0}.project-actions{display:flex;gap:8px;margin-top:8px}.project-actions .btn.danger{color:var(--danger-color)}.project-actions .btn.danger:hover{background:var(--danger-bg);border-color:var(--danger-color)}.settings-tab{display:flex;flex-direction:column;gap:32px;max-width:600px}.settings-section{display:flex;flex-direction:column;gap:24px}.settings-section h4{margin:0;color:var(--text-primary)}.settings-section.danger-zone{padding-top:32px;border-top:1px solid var(--border-color)}.settings-section.danger-zone h4{color:var(--danger-color)}.setting-item{display:flex;justify-content:space-between;align-items:center;padding:16px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--border-radius-lg)}.setting-item.danger{border-color:var(--danger-color);background:var(--danger-bg)}.setting-info{display:flex;flex-direction:column;gap:4px}.setting-info .typography--body{margin:0;color:var(--text-primary)}.setting-info .typography--small{margin:0}.mono{font-family:Courier New,monospace;font-size:12px}.profile-error{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:64px 24px;text-align:center;gap:16px;height:calc(100vh - 56px)}.profile-error h3,.profile-error .typography--body{margin:0}@media (max-width: 768px){.profile-main{padding:16px}.profile-header{flex-direction:column;align-items:flex-start;gap:24px;padding:24px}.profile-avatar-section{flex-direction:column;align-items:center;text-align:center;gap:16px}.profile-actions{width:100%;justify-content:center}.tab-content{padding:24px 16px}.projects-grid{grid-template-columns:1fr}.profile-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch}.tab-button{white-space:nowrap;padding:16px 20px;min-width:100px}.stats-grid{grid-template-columns:repeat(3,1fr);gap:16px}.stat-item{padding:16px 12px}}@media (max-width: 480px){.profile-header{padding:16px}.profile-avatar-large{width:60px;height:60px}.profile-avatar-large .avatar-initials,.profile-name{font-size:20px}.tab-content{padding:16px 12px}.stats-grid{grid-template-columns:1fr}.setting-item{flex-direction:column;align-items:flex-start;gap:12px}}.tab-button:focus,.form-group input:focus,.form-group textarea:focus{outline:2px solid var(--accent-color);outline-offset:2px}@media (prefers-reduced-motion: reduce){.project-card,.tab-button,.form-group input,.form-group textarea,.buildbento-icon-logo{transition:none}.project-card:hover{transform:none}.buildbento-icon-logo:hover{transform:rotate(-8deg)}}body:has(.tutorials-page){overflow:auto!important;height:auto!important}html:has(.tutorials-page){overflow:visible!important;height:auto!important}#root:has(.tutorials-page){height:auto!important;min-height:100vh;overflow:visible!important}.tutorials-page{width:100%;min-height:100vh;background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-sans, system-ui, sans-serif)}.tutorials-header{background:var(--bg-secondary);border-bottom:1px solid var(--border-color);padding:0;position:sticky;top:0;z-index:100;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 3px #0000001a}.tutorials-nav{display:flex;align-items:center;justify-content:space-between;height:64px;max-width:1400px;margin:0 auto;padding:0 2rem}.logo-link{display:flex;align-items:center;text-decoration:none;transition:transform .2s ease}.logo-link:hover{transform:scale(1.05)}.logo-link img{filter:brightness(0) saturate(100%) invert(20%) sepia(15%) saturate(500%) hue-rotate(180deg) brightness(90%) contrast(85%);transition:filter .2s ease}.tutorials-navigation{display:flex;gap:1rem}.tutorials-navigation a{color:var(--text-secondary);text-decoration:none;font-weight:600;padding:.75rem 1.5rem;border-radius:12px;transition:all .2s ease;position:relative;overflow:hidden}.tutorials-navigation a:hover,.tutorials-navigation a.active{color:var(--text-primary);background:linear-gradient(135deg,var(--accent-color),var(--accent-secondary, #3b82f6));color:#fff;transform:translateY(-1px);box-shadow:0 4px 12px #00000026}.tutorials-main{max-width:1400px;margin:0 auto;padding:0 2rem 4rem;width:100%}.tutorial-home{width:100%}.tutorial-hero{text-align:center;padding:4rem 0 6rem;background:linear-gradient(135deg,var(--bg-secondary, #f8fafc) 0%,var(--bg-tertiary, #e2e8f0) 100%);margin:-2rem -2rem 4rem;position:relative;overflow:hidden}.tutorial-hero:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23cbd5e1' fill-opacity='0.1'%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;opacity:.5}.hero-content{position:relative;z-index:1;max-width:800px;margin:0 auto}.tutorial-hero h1{font-size:4rem;font-weight:800;margin:0 0 1.5rem;background:linear-gradient(135deg,var(--accent-color),var(--accent-secondary, #3b82f6),#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.1}.tutorial-hero p{font-size:1.5rem;color:var(--text-secondary);margin-bottom:3rem;line-height:1.6;max-width:600px;margin-left:auto;margin-right:auto}.tutorial-stats{display:flex;justify-content:center;gap:3rem;flex-wrap:wrap;margin-top:3rem}.stat-item{display:flex;flex-direction:column;align-items:center;text-align:center}.stat-number{font-size:3rem;font-weight:800;color:var(--accent-color);display:block;line-height:1}.stat-label{font-size:1rem;color:var(--text-tertiary);margin-top:.5rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}.featured-section{margin-bottom:4rem}.featured-section h2{font-size:2.5rem;font-weight:700;text-align:center;margin-bottom:3rem;color:var(--text-primary)}.featured-tutorials{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:2rem;margin-bottom:2rem}.featured-tutorial-card{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:20px;padding:2rem;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden;box-shadow:0 4px 20px #00000014}.featured-tutorial-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--accent-color),var(--accent-secondary, #3b82f6));transition:height .3s ease}.featured-tutorial-card:hover{transform:translateY(-8px);box-shadow:0 12px 40px #00000026;border-color:var(--accent-color)}.featured-tutorial-card:hover:before{height:6px}.featured-tutorial-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.5rem}.featured-category-icon{font-size:2.5rem;padding:.75rem;background:linear-gradient(135deg,var(--accent-color),var(--accent-secondary, #3b82f6));border-radius:16px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #0000001a}.featured-tutorial-meta{display:flex;flex-direction:column;align-items:flex-end;gap:.5rem}.featured-tutorial-card h3{font-size:1.5rem;font-weight:700;margin-bottom:1rem;color:var(--text-primary);line-height:1.3}.featured-tutorial-card p{color:var(--text-secondary);line-height:1.6;margin-bottom:1.5rem}.featured-tutorial-footer{display:flex;justify-content:space-between;align-items:center}.category-tag{background:var(--bg-tertiary);color:var(--text-secondary);padding:.5rem 1rem;border-radius:20px;font-size:.875rem;font-weight:600}.tutorial-arrow{font-size:1.5rem;color:var(--accent-color);font-weight:700;transition:transform .2s ease}.featured-tutorial-card:hover .tutorial-arrow{transform:translate(4px)}.tutorial-filters{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:20px;padding:2rem;margin-bottom:3rem;box-shadow:0 4px 20px #00000014}.search-section{margin-bottom:2rem}.search-input-wrapper{position:relative;max-width:500px;margin:0 auto}.search-input{width:100%;padding:1rem 1rem 1rem 3rem;border:2px solid var(--border-color);border-radius:16px;font-size:1.1rem;background:var(--bg-primary);color:var(--text-primary);transition:all .2s ease}.search-input:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 3px #3b82f61a}.search-icon{position:absolute;left:1rem;top:50%;transform:translateY(-50%);font-size:1.25rem;color:var(--text-tertiary)}.filter-section{display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap;justify-content:center}.filter-group{display:flex;flex-direction:column;align-items:center;gap:.5rem}.filter-group label{font-weight:600;color:var(--text-secondary);font-size:.875rem;text-transform:uppercase;letter-spacing:.05em}.filter-select{padding:.75rem 1rem;border:2px solid var(--border-color);border-radius:12px;background:var(--bg-primary);color:var(--text-primary);font-weight:500;cursor:pointer;transition:all .2s ease;min-width:150px}.filter-select:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 3px #3b82f61a}.clear-filters-btn{background:var(--danger-color, #ef4444);color:#fff;border:none;padding:.75rem 1.5rem;border-radius:12px;font-weight:600;cursor:pointer;transition:all .2s ease}.clear-filters-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #ef44444d}.no-results{text-align:center;padding:4rem 2rem;color:var(--text-secondary)}.no-results-icon{font-size:4rem;margin-bottom:1rem;opacity:.5}.no-results h3{font-size:1.5rem;margin-bottom:.5rem;color:var(--text-primary)}.tutorial-categories{display:grid;gap:2rem;margin-bottom:4rem}.tutorial-category-card{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:20px;overflow:hidden;transition:all .3s ease;box-shadow:0 4px 20px #00000014}.tutorial-category-card:hover{border-color:var(--accent-color);box-shadow:0 8px 32px #0000001f;transform:translateY(-2px)}.category-header{display:flex;align-items:center;gap:2rem;padding:2.5rem 2rem 2rem;background:linear-gradient(135deg,var(--bg-secondary, #f8fafc) 0%,var(--bg-tertiary, #e2e8f0) 100%);position:relative}.category-icon-wrapper{display:flex;align-items:center;justify-content:center;width:80px;height:80px;background:linear-gradient(135deg,var(--accent-color),var(--accent-secondary, #3b82f6));border-radius:20px;box-shadow:0 8px 24px #00000026;flex-shrink:0}.category-icon{font-size:2.5rem;color:#fff}.category-info{flex:1}.category-header h3{margin:0 0 .75rem;font-size:2rem;font-weight:700;color:var(--text-primary)}.category-header p{margin:0 0 1rem;color:var(--text-secondary);line-height:1.6;font-size:1.1rem}.category-stats{display:flex;align-items:center;gap:1rem}.tutorial-count{font-weight:600;color:var(--accent-color);font-size:.9rem}.level-distribution{display:flex;gap:.5rem;align-items:center}.level-dot{width:12px;height:12px;border-radius:50%}.level-dot.beginner{background:var(--success-color, #22c55e)}.level-dot.intermediate{background:var(--warning-color, #f59e0b)}.level-dot.advanced{background:var(--danger-color, #ef4444)}.tutorial-list{padding:0 2rem 2rem;display:grid;gap:1rem}.tutorial-item{display:flex;align-items:center;justify-content:space-between;padding:1.5rem;background:var(--bg-primary);border:2px solid transparent;border-radius:16px;cursor:pointer;transition:all .2s ease;position:relative;overflow:hidden}.tutorial-item:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent-color);transform:scaleY(0);transition:transform .2s ease}.tutorial-item:hover{background:var(--bg-secondary);border-color:var(--accent-color);transform:translate(4px);box-shadow:0 4px 16px #0000001a}.tutorial-item:hover:before{transform:scaleY(1)}.tutorial-info h4{margin:0 0 .5rem;font-size:1.25rem;font-weight:700;color:var(--text-primary)}.tutorial-info p{margin:0;font-size:1rem;color:var(--text-secondary);line-height:1.5}.tutorial-meta{display:flex;align-items:center;gap:1rem;flex-shrink:0}.level-badge{padding:.5rem 1rem;border-radius:20px;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;box-shadow:0 2px 8px #0000001a}.level-badge.beginner{background:var(--success-color, #22c55e);color:#fff}.level-badge.intermediate{background:var(--warning-color, #f59e0b);color:#fff}.level-badge.advanced{background:var(--danger-color, #ef4444);color:#fff}.duration{font-size:.9rem;color:var(--text-tertiary);font-weight:600}.learning-path-section{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:4rem 2rem;border-radius:24px;margin:4rem 0;text-align:center}.learning-path-section h2{font-size:2.5rem;font-weight:700;margin-bottom:3rem;color:#fff}.learning-path{display:flex;justify-content:center;align-items:center;gap:2rem;flex-wrap:wrap;max-width:1000px;margin:0 auto}.path-step{display:flex;flex-direction:column;align-items:center;text-align:center;background:#ffffff1a;padding:2rem 1.5rem;border-radius:20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);min-width:200px;transition:all .3s ease}.path-step:hover{background:#fff3;transform:translateY(-4px)}.step-number{display:flex;align-items:center;justify-content:center;width:50px;height:50px;background:#fff;color:var(--accent-color);font-size:1.5rem;font-weight:800;border-radius:50%;margin-bottom:1rem;box-shadow:0 4px 12px #0003}.step-content h4{font-size:1.25rem;font-weight:700;margin-bottom:.5rem;color:#fff}.step-content p{font-size:1rem;opacity:.9;line-height:1.4}.path-arrow{font-size:2rem;font-weight:700;color:#fff9}.tutorial-content{max-width:900px;margin:0 auto;line-height:1.8;padding-bottom:4rem}.tutorial-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem;padding:1.5rem 0;border-bottom:2px solid var(--border-color)}.back-link{color:var(--accent-color);text-decoration:none;font-weight:600;padding:.75rem 1.5rem;border-radius:12px;background:var(--bg-secondary);transition:all .2s ease;display:flex;align-items:center;gap:.5rem}.back-link:hover{background:var(--accent-color);color:#fff;transform:translateY(-1px)}.tutorial-content h1{font-size:3rem;font-weight:800;margin:0 0 1rem;color:var(--text-primary);line-height:1.2}.tutorial-description{font-size:1.3rem;color:var(--text-secondary);margin-bottom:2rem;line-height:1.6}.tutorial-body{margin-top:3rem}.tutorial-section{margin-bottom:3rem}.tutorial-section h2{font-size:2rem;font-weight:700;margin:0 0 1.5rem;color:var(--text-primary)}.tutorial-section h3{font-size:1.5rem;font-weight:600;margin:2rem 0 1rem;color:var(--text-primary)}.tutorial-markdown{margin-bottom:2rem;font-size:1.1rem}.tutorial-markdown h2{font-size:2rem;font-weight:700;margin:3rem 0 1.5rem;color:var(--text-primary);border-bottom:2px solid var(--border-color);padding-bottom:.5rem}.tutorial-markdown h3{font-size:1.6rem;font-weight:600;margin:2rem 0 1rem;color:var(--text-primary)}.tutorial-markdown h4{font-size:1.3rem;font-weight:600;margin:1.5rem 0 .75rem;color:var(--text-primary)}.tutorial-markdown p{margin-bottom:1.5rem;line-height:1.8;color:var(--text-secondary)}.tutorial-markdown ul{padding-left:2rem;margin:1.5rem 0}.tutorial-markdown li{margin-bottom:.75rem;color:var(--text-secondary);line-height:1.6}.code-example{margin:2rem 0;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:16px;overflow:hidden;box-shadow:0 4px 20px #00000014}.code-example h3{background:var(--bg-tertiary);margin:0;padding:1.5rem 2rem;border-bottom:1px solid var(--border-color);font-size:1.1rem;font-weight:700;color:var(--text-primary)}.code-example pre{margin:0;padding:2rem;overflow-x:auto;max-height:600px;overflow-y:auto;background:#1e1e1e;color:#d4d4d4}.code-example code{font-family:var(--font-mono, "Fira Code", "Monaco", monospace);font-size:.9rem;line-height:1.6;white-space:pre}.try-it-section{background:linear-gradient(135deg,var(--accent-color),var(--accent-secondary, #3b82f6));border-radius:20px;padding:3rem;margin:3rem 0;color:#fff;text-align:center;box-shadow:0 8px 32px #00000026}.try-it-section h3{margin:0 0 1rem;color:#fff;font-size:1.75rem;font-weight:700}.try-it-section p{margin:0 0 2rem;opacity:.95;font-size:1.1rem;line-height:1.6}.try-button{display:inline-flex;align-items:center;justify-content:center;gap:.75rem;background:#fff!important;color:#2c3e50!important;text-decoration:none;font-weight:700;padding:1rem 2rem;border-radius:16px;transition:all .3s ease;cursor:pointer;border:3px solid white!important;font-size:1.1rem;font-family:inherit;min-height:56px;text-align:center;box-shadow:0 4px 16px #0003}.try-button:hover{background:transparent!important;color:#fff!important;transform:translateY(-2px);box-shadow:0 8px 24px #0000004d}.tutorial-not-found{text-align:center;padding:6rem 2rem}.tutorial-not-found h2{font-size:2.5rem;margin:0 0 1rem;color:var(--text-primary)}.tutorial-not-found p{color:var(--text-secondary);margin-bottom:2rem;font-size:1.1rem}.tutorials-footer{background:var(--bg-secondary);border-top:1px solid var(--border-color);padding:2rem;text-align:center;margin-top:4rem}.tutorials-footer p{margin:0;color:var(--text-tertiary);font-size:.9rem}@media (max-width: 1200px){.tutorials-nav{padding:0 1.5rem}.tutorials-main{padding:0 1.5rem 4rem}}@media (max-width: 1024px){.tutorial-hero{padding:3rem 0 4rem;margin:-1.5rem -1.5rem 3rem}.tutorial-hero h1{font-size:3rem}.tutorial-stats{gap:2rem}.featured-tutorials{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.learning-path{flex-direction:column;gap:1rem}.path-arrow{transform:rotate(90deg)}.tutorial-content h1{font-size:2.5rem}}@media (max-width: 768px){.tutorials-nav{padding:0 1rem;height:auto;flex-direction:column;gap:1rem;padding:1rem}.tutorials-navigation{gap:.5rem}.tutorials-navigation a{padding:.5rem 1rem;font-size:.9rem}.tutorials-main{padding:0 1rem 3rem}.tutorial-hero{padding:2rem 0 3rem;margin:-1rem -1rem 2rem}.tutorial-hero h1{font-size:2.5rem}.tutorial-hero p{font-size:1.25rem}.tutorial-stats{gap:1.5rem}.stat-number{font-size:2.5rem}.featured-section h2{font-size:2rem}.featured-tutorials{grid-template-columns:1fr;gap:1.5rem}.tutorial-filters{padding:1.5rem}.filter-section{flex-direction:column;gap:1rem;align-items:stretch}.filter-group{align-items:stretch}.filter-select{min-width:auto}.category-header{flex-direction:column;text-align:center;gap:1.5rem;padding:2rem 1.5rem 1.5rem}.category-header h3{font-size:1.75rem}.tutorial-list{padding:0 1.5rem 1.5rem}.tutorial-item{flex-direction:column;align-items:flex-start;gap:1rem;padding:1.25rem}.tutorial-meta{width:100%;justify-content:space-between}.learning-path-section{padding:3rem 1.5rem}.learning-path-section h2{font-size:2rem}.path-step{min-width:auto;width:100%;max-width:300px}.tutorial-header{flex-direction:column;align-items:flex-start;gap:1rem}.tutorial-content h1{font-size:2rem}.code-example pre{padding:1.5rem;font-size:.85rem}.try-it-section{padding:2rem 1.5rem}}@media (max-width: 480px){.tutorial-hero h1{font-size:2rem}.tutorial-hero p{font-size:1.1rem}.tutorial-stats{gap:1rem}.stat-number{font-size:2rem}.stat-label{font-size:.85rem}.featured-tutorial-card{padding:1.5rem}.featured-category-icon{font-size:2rem;padding:.5rem}.featured-tutorial-header{flex-direction:column;align-items:center;text-align:center;gap:1rem}.featured-tutorial-meta{flex-direction:row;align-items:center;gap:1rem}.category-icon-wrapper{width:60px;height:60px}.category-icon{font-size:2rem}.category-header h3{font-size:1.5rem}.tutorial-content h1{font-size:1.75rem}.tutorial-description{font-size:1.1rem}.try-button{padding:.875rem 1.5rem;font-size:1rem}}.syntax-visual{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin:2rem 0;background:#fff;border-radius:16px;padding:2rem;box-shadow:0 4px 20px #00000014;border:2px solid #e2e8f0}.code-example h4{color:#2d3748;margin-bottom:1rem;font-size:1.2rem}.visual-demo{display:flex;flex-direction:column;justify-content:center}.grid-visual{border:2px solid #4299e1;border-radius:12px;padding:1rem;background:#f8fafc}.parent-grid{border-bottom:2px dashed #cbd5e0;padding-bottom:1rem;margin-bottom:1rem}.grid-label{font-weight:700;color:#4299e1;margin-bottom:.5rem;font-size:.9rem;text-transform:uppercase;letter-spacing:.05em}.grid-tracks,.inherited-tracks{display:flex;flex-direction:column;gap:.5rem}.track{padding:.75rem;border-radius:8px;font-size:.85rem;font-weight:500;text-align:center}.row-track{background:linear-gradient(135deg,#e0e7ff,#c7d2fe);border:1px solid #6366f1;color:#3730a3}.inherited{background:linear-gradient(135deg,#dcfce7,#bbf7d0);border:1px solid #10b981;color:#065f46;position:relative}.inherited:before{content:"✓";position:absolute;left:.5rem;top:50%;transform:translateY(-50%);color:#10b981;font-weight:700}.problem-visual{margin:2rem 0;background:#fff;border-radius:16px;padding:2rem;box-shadow:0 4px 20px #00000014;border:2px solid #fecaca}.problem-visual h4{color:#dc2626;margin-bottom:1.5rem;display:flex;align-items:center;gap:.5rem}.cards-visual{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;position:relative;margin-bottom:2rem}.card-visual{border:2px solid #e5e7eb;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 2px 8px #0000001a}.card-section{padding:1rem;border-bottom:1px solid #f3f4f6}.card-section:last-child{border-bottom:none}.card-section.header{background:#f8fafc;font-weight:600;font-size:.9rem;color:#374151}.card-section.content{font-size:.8rem;color:#6b7280;line-height:1.4}.card-section.button{background:#3b82f6;color:#fff;text-align:center;font-weight:600;font-size:.8rem}.card-visual.short .card-section.content{min-height:2rem}.card-visual.medium .card-section.content{min-height:3rem}.card-visual.long .card-section.content{min-height:5rem}.alignment-lines{position:absolute;left:-2rem;right:-2rem;top:0;bottom:0;pointer-events:none}.line{position:absolute;left:0;right:0;height:2px;background:#ef4444;opacity:.7}.line.misaligned{background:repeating-linear-gradient(90deg,#ef4444,#ef4444 10px,transparent 10px,transparent 20px)}.line:after{content:attr(data-label);position:absolute;right:0;top:-1.5rem;background:#ef4444;color:#fff;padding:.25rem .5rem;border-radius:4px;font-size:.7rem;font-weight:600;white-space:nowrap}.demo-controls{display:flex;gap:1rem;margin-bottom:2rem;flex-wrap:wrap;justify-content:center}.demo-btn,.method-btn,.test-btn,.pitfall-btn,.span-btn,.mode-btn{padding:.75rem 1.5rem;border:2px solid #3498db;background:#fff;color:#3498db;border-radius:8px;cursor:pointer;transition:all .3s ease;font-weight:600;font-family:inherit;font-size:.9rem}.demo-btn:hover,.method-btn:hover,.test-btn:hover,.pitfall-btn:hover,.span-btn:hover,.mode-btn:hover{background:#3498db;color:#fff;transform:translateY(-2px)}.demo-btn.active,.method-btn.active,.test-btn.active,.pitfall-btn.active,.span-btn.active,.mode-btn.active{background:#3498db;color:#fff;box-shadow:0 4px 16px #3498db4d}.cards-demo{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-bottom:2rem;transition:all .5s ease}.method-problem .tutorial-card{background:#fff;border:2px solid #e2e8f0;border-radius:12px;overflow:hidden;box-shadow:0 2px 8px #0000001a;transition:all .3s ease}.method-subgrid{grid-template-rows:auto 120px 1fr auto}.method-subgrid .tutorial-card{background:#fff;border:2px solid #e2e8f0;border-radius:12px;overflow:hidden;box-shadow:0 2px 8px #0000001a;transition:all .3s ease;display:grid;grid-template-rows:subgrid;grid-row:span 4}.method-subgrid .tutorial-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px #00000026;border-color:#4299e1}.multidimensional-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto 1fr auto;gap:1.5rem;margin-bottom:2rem}.section{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid;grid-row:span 4;position:relative;margin-bottom:1rem}.section:before{content:attr(class);position:absolute;top:-1.5rem;left:0;font-size:.8rem;font-weight:600;padding:.25rem .75rem;border-radius:12px;color:#fff}.header-section:before{content:"Header Section";background:#10b981}.content-section:before{content:"Content Section";background:#4299e1}.footer-section:before{content:"Footer Section";background:#f59e0b}.card.mini{background:#fff;border:2px solid #e2e8f0;border-radius:12px;padding:1rem;text-align:center;transition:all .3s ease;display:grid;grid-template-rows:subgrid;grid-row:span 4}.card.mini:hover{transform:translateY(-2px);box-shadow:0 8px 24px #0000001f;border-color:#4299e1}.card-icon{font-size:2rem;margin-bottom:.5rem}.card-title{font-weight:700;color:#2d3748;margin-bottom:.5rem;font-size:1.1rem;line-height:1.3}.card-description{color:#64748b;font-size:.9rem;line-height:1.4;margin-bottom:1rem}.card-action button{padding:.5rem 1rem;border:2px solid #4299e1;background:transparent;color:#4299e1;border-radius:6px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:.85rem;font-family:inherit}.card-action button:hover{background:#4299e1;color:#fff}@media (max-width: 768px){.syntax-visual{grid-template-columns:1fr;gap:1.5rem}.cards-visual,.multidimensional-grid{grid-template-columns:1fr}.demo-controls{flex-direction:column;align-items:center}.demo-btn,.method-btn,.test-btn,.pitfall-btn,.span-btn,.mode-btn{width:200px}}:root{--primary: #3b82f6;--secondary: #10b981;--accent: #f59e0b;--danger: #ef4444;--bg-dark: #0a0a0a;--bg-light: #1a1a1a;--text-primary: #e5e5e5;--text-secondary: #a3a3a3;--border: #333}body.architecture-page-body,html.architecture-page-body{overflow:auto!important;height:auto!important}.architecture-page{min-height:100vh;background:var(--bg-dark);color:var(--text-primary);padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.6}.nav-container{position:fixed;top:2rem;left:2rem;display:flex;gap:1rem;z-index:100}.nav-link{background:var(--bg-light);border:1px solid var(--border);padding:.75rem 1.5rem;border-radius:8px;color:var(--text-primary);text-decoration:none;transition:all .3s ease;font-size:.9rem}.nav-link:hover{background:var(--primary);color:#fff;transform:translateY(-2px)}.architecture-container{max-width:1200px;margin:0 auto;padding:6rem 2rem 2rem}.architecture-header{text-align:center;padding:4rem 0;background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:3rem}.architecture-header h1{font-size:3.5rem;font-weight:800;margin-bottom:1rem}.architecture-header .subtitle{font-size:1.5rem;color:var(--text-secondary);-webkit-text-fill-color:var(--text-secondary);margin:0}.architecture-content{padding:0}.architecture-note{background:var(--bg-light);border-left:4px solid var(--primary);padding:1.5rem;margin:1.5rem 0;border-radius:0 8px 8px 0}.architecture-note h3{color:var(--primary);margin-top:0;margin-bottom:1rem}.architecture-note ul{margin:0;padding-left:1.5rem}.architecture-note li{margin-bottom:.5rem;color:var(--text-primary)}.architecture-note p{color:var(--text-secondary);margin:0}.architecture-section{margin-bottom:4rem;background:var(--bg-light);border:1px solid var(--border);border-radius:12px;padding:2rem}.architecture-section h2{font-size:2rem;color:var(--primary);margin-bottom:1.5rem;display:flex;align-items:center;gap:15px}.architecture-section p{font-size:1.1rem;line-height:1.8;color:var(--text-secondary);margin-bottom:2rem}.mermaid-container{background:var(--bg-dark);border-radius:12px;padding:2rem;margin:2rem 0;border:1px solid var(--border);overflow-x:auto;max-width:100%}.mermaid-container pre.mermaid{background:transparent;border:none;padding:0;margin:0;font-family:Consolas,Monaco,Courier New,monospace;font-size:.9rem;white-space:pre;overflow-x:auto}.tech-stack{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin-top:2rem}.tech-category{background:var(--bg-dark);border-radius:12px;padding:1.5rem;border:1px solid var(--border);transition:transform .3s ease,border-color .3s ease}.tech-category:hover{transform:translateY(-2px);border-color:var(--primary)}.tech-category h3{font-size:1.3rem;color:var(--secondary);margin-bottom:1rem;font-weight:600}.tech-items{display:flex;flex-wrap:wrap;gap:.75rem}.tech-item{background:var(--bg-light);color:var(--primary);padding:.5rem 1rem;border-radius:20px;font-size:.875rem;font-weight:500;white-space:nowrap;border:1px solid var(--primary);transition:all .3s ease}.tech-item:hover{background:var(--primary);color:#fff;transform:translateY(-1px)}.decisions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.5rem;margin-top:2rem}.decision-card{background:var(--bg-dark);border-radius:12px;padding:2rem;border:1px solid var(--border);transition:all .3s ease;position:relative;overflow:hidden}.decision-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--primary),var(--secondary));transform:translate(-100%);transition:transform .3s ease}.decision-card:hover:before{transform:translate(0)}.decision-card:hover{transform:translateY(-4px);border-color:var(--primary)}.decision-card h4{font-size:1.2rem;color:var(--primary);margin-bottom:1rem;font-weight:600;display:flex;align-items:center;gap:10px}.decision-card p{font-size:1rem;line-height:1.7;color:var(--text-secondary);margin:0}@media (max-width: 768px){.nav-container{position:static;margin-bottom:2rem;justify-content:center;padding:1rem}.architecture-container{padding:1rem}.architecture-header{padding:3rem 0}.architecture-header h1{font-size:2.5rem}.architecture-header .subtitle{font-size:1.2rem}.architecture-section{padding:1.5rem;margin-bottom:2rem}.architecture-section h2{font-size:1.8rem}.mermaid-container{padding:1rem;margin:1rem 0}.tech-stack,.decisions-grid{grid-template-columns:1fr;gap:1rem}.decision-card{padding:1.5rem}}@media (max-width: 480px){.architecture-header h1{font-size:2rem}.architecture-section h2{font-size:1.8rem;flex-direction:column;text-align:center;gap:10px}.mermaid-container{padding:15px}.tech-category{padding:20px}.decision-card{padding:15px}}.mermaid-container .mermaid svg{max-width:100%;height:auto}@media print{.architecture-page{background:#fff;padding:0}.architecture-container{box-shadow:none;border-radius:0}.architecture-header{background:#f8f9fa;color:#2c3e50}.mermaid-container{border:1px solid #ddd;page-break-inside:avoid}.decision-card{page-break-inside:avoid}}