:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh;width:100%}#root{width:100%;height:100%}.tip-header-flex{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem}.tip-header-flex h3{margin:0;font-size:1.1rem}.tips-grid-container{margin-top:3rem}.tip-item-idea .use-case-header h3,.tip-item-idea .tip-icon{color:#a855f7!important}.tip-item-error .use-case-header h3,.tip-item-error .tip-icon{color:#ef4444!important}.tip-item-good .use-case-header h3,.tip-item-good .tip-icon{color:#22c55e!important}.tip-item-pro .use-case-header h3,.tip-item-pro .tip-icon{color:#3b82f6!important}.tip-item-default .tip-icon{color:#eab308!important}.content-card{background-color:#ffffff08;padding:1.5rem;border-radius:12px;margin-bottom:1.5rem;border:1px solid rgba(255,255,255,.05)}.use-case-header.tip-header-flex{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem}.use-case-header.tip-header-flex h3{margin:0!important;font-size:1.15rem;line-height:1.2;padding-top:2px}::-webkit-scrollbar{width:12px!important}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background-color:#fff3!important;border-radius:20px;border:3px solid transparent;background-clip:content-box}::-webkit-scrollbar-thumb:hover{background-color:#ffffff4d!important}*{scrollbar-width:auto;scrollbar-color:rgba(255,255,255,.2) transparent}:root{--bg-color: #121212;--surface-color: #1e1e1e;--text-primary: #f8fafc;--text-secondary: #a1a1aa;--border-color: #2e2e2e;--accent-color: #61dafb;--accent-secondary: #0ea5e9;--js-color: #f7df1e;--react-color: #61dafb;--java-color: #f89820;--spring-color: #6db33f;--angular-color: #DD0031;--postgres-color: #336791;--mysql-color: #4479A1;--pseint-color: #3b82f6;--ts-color: #007ACC}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,system-ui,-apple-system,sans-serif;background-color:var(--bg-color);color:var(--text-primary);line-height:1.5}.landing-page{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;background-color:transparent;width:100%;position:relative;z-index:1}.landing-header{text-align:center;margin-bottom:60px;position:relative;z-index:10}.landing-header h1{font-size:3.5rem;font-weight:800;margin-bottom:16px;color:var(--text-primary)}.landing-header p{color:var(--text-secondary);font-size:1.25rem}.manuals-grid{display:flex;gap:32px;flex-wrap:wrap;justify-content:center;max-width:1400px;width:100%}.manual-card{background:#0d191ea6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:40px;width:300px;display:flex;flex-direction:column;align-items:center;text-align:center;transition:all .3s cubic-bezier(.4,0,.2,1);text-decoration:none;position:relative;overflow:hidden;cursor:pointer}.manual-card:hover{transform:translateY(-8px);box-shadow:0 20px 40px #0006;border-color:#ffffff1a}.manual-card.js:hover{border-color:var(--js-color)}.manual-card.react:hover{border-color:var(--react-color)}.manual-card.java:hover{border-color:var(--java-color)}.manual-card.springboot:hover{border-color:var(--spring-color)}.manual-card.angular:hover{border-color:var(--angular-color)}.manual-card.postgres:hover{border-color:var(--postgres-color)}.manual-card.mysql:hover{border-color:var(--mysql-color)}.manual-card.pseint:hover{border-color:var(--pseint-color)}.manual-card.ts:hover{border-color:var(--ts-color)}.card-icon{width:80px;height:80px;margin-bottom:24px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:2.5rem;font-weight:800;background:#ffffff0d;box-shadow:0 4px 12px #0003}.manual-card.js .card-icon{color:var(--js-color)}.manual-card.react .card-icon{color:var(--react-color)}.manual-card.java .card-icon{color:var(--java-color)}.manual-card.springboot .card-icon{color:var(--spring-color)}.manual-card.angular .card-icon{color:var(--angular-color)}.manual-card.postgres .card-icon{color:var(--postgres-color)}.manual-card.mysql .card-icon{color:var(--mysql-color)}.manual-card.pseint .card-icon{color:var(--pseint-color)}.manual-card.ts .card-icon{color:var(--ts-color)}.card-title{font-size:1.5rem;font-weight:700;color:var(--text-primary);margin-bottom:12px}.card-desc{color:var(--text-secondary);font-size:.95rem;line-height:1.6}.coming-soon{position:absolute;top:12px;right:12px;background:#ffffff1a;padding:4px 8px;border-radius:4px;font-size:.7rem;text-transform:uppercase;letter-spacing:1px;font-weight:600;color:var(--text-secondary)}.app-container{display:flex;height:100vh;width:100%;overflow:hidden;background-color:var(--bg-color);position:fixed;top:0;left:0;right:0;bottom:0}.sidebar{width:280px;background-color:var(--surface-color);border-right:1px solid var(--border-color);display:flex;flex-direction:column;height:100vh;transition:transform .3s cubic-bezier(.4,0,.2,1),left .3s ease;z-index:1000;flex-shrink:0}.sidebar-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:999}.sidebar-overlay.active{display:block}.sidebar-close-btn{display:none;background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:8px;border-radius:8px;transition:all .2s}.sidebar-close-btn:hover{background:#ffffff1a;color:var(--text-primary)}.main-content{flex:1;display:flex;flex-direction:column;height:100vh;overflow:hidden;position:relative}.sidebar-toggle-btn{position:absolute;top:20px;left:20px;z-index:100;background:var(--surface-color);border:1px solid var(--border-color);color:var(--text-primary);padding:10px;border-radius:8px;cursor:pointer;display:none;transition:all .2s;box-shadow:0 4px 12px #0000004d}.sidebar-toggle-btn:hover{background:var(--border-color);transform:translateY(-2px)}.sidebar-toggle-btn.floating{display:flex;align-items:center;justify-content:center}.sidebar-header{padding:24px;border-bottom:1px solid var(--border-color)}.logo-area{display:flex;align-items:center;gap:16px}.back-home-btn{color:var(--text-secondary);transition:color .2s;display:flex}.back-home-btn:hover{color:var(--text-primary)}.logo{display:flex;align-items:center;gap:12px}.sidebar h1{font-size:1.1rem;font-weight:600;letter-spacing:-.02em;color:#fff}.sidebar-nav{flex:1;overflow-y:auto;padding:16px;scrollbar-gutter:stable;overflow-x:hidden}.category-group{margin-bottom:24px}.category-header{width:100%;display:flex;align-items:center;justify-content:space-between;color:var(--text-secondary);font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;font-weight:600;padding:8px 0;transition:color .2s;background:none;border:none;cursor:pointer;text-align:left}.category-header:hover{color:var(--text-primary)}.topic-list{list-style:none;margin-top:8px}.topic-btn{width:100%;display:flex;align-items:center;gap:10px;padding:10px 12px;color:var(--text-secondary);font-size:.95rem;border-radius:6px;transition:all .2s ease;text-align:left;background:none;border:none;cursor:pointer}.topic-btn svg{flex-shrink:0;width:16px;height:16px}.topic-btn:hover{background-color:#ffffff0d;color:var(--text-primary)}.topic-btn.active{background-color:#ffffff1a;color:var(--text-primary);font-weight:500}.js-theme{--accent-color: var(--js-color)}.js-theme .topic-btn.active{color:var(--js-color);background:#f7df1e1a}.js-theme .explanation-icon{color:var(--js-color)}.js-theme .topic-explanation{border-left-color:var(--js-color)}.react-theme{--accent-color: var(--react-color)}.react-theme .topic-btn.active{color:var(--react-color);background:#61dafb1a}.react-theme .explanation-icon{color:var(--react-color)}.react-theme .topic-explanation{border-left-color:var(--react-color)}.java-theme{--accent-color: var(--java-color)}.java-theme .topic-btn.active{color:var(--java-color);background:#f898201a}.java-theme .explanation-icon{color:var(--java-color)}.java-theme .topic-explanation{border-left-color:var(--java-color)}.spring-theme{--accent-color: var(--spring-color)}.spring-theme .topic-btn.active{color:var(--spring-color);background:#6db33f1a}.spring-theme .explanation-icon{color:var(--spring-color)}.spring-theme .topic-explanation{border-left-color:var(--spring-color)}.angular-theme{--accent-color: var(--angular-color)}.angular-theme .topic-btn.active{color:var(--angular-color);background:#dd00311a}.angular-theme .explanation-icon{color:var(--angular-color)}.angular-theme .topic-explanation{border-left-color:var(--angular-color)}.postgres-theme{--accent-color: var(--postgres-color)}.postgres-theme .topic-btn.active{color:var(--postgres-color);background:#3367911a}.postgres-theme .explanation-icon{color:var(--postgres-color)}.postgres-theme .topic-explanation{border-left-color:var(--postgres-color)}.mysql-theme{--accent-color: var(--mysql-color)}.mysql-theme .topic-btn.active{color:var(--mysql-color);background:#4479a11a}.mysql-theme .explanation-icon{color:var(--mysql-color)}.mysql-theme .topic-explanation{border-left-color:var(--mysql-color)}.pseint-theme{--accent-color: var(--pseint-color)}.pseint-theme .topic-btn.active{color:var(--pseint-color);background:#3b82f61a}.pseint-theme .explanation-icon{color:var(--pseint-color)}.pseint-theme .topic-explanation{border-left-color:var(--pseint-color)}.ts-theme{--accent-color: var(--ts-color)}.ts-theme .topic-btn.active{color:var(--ts-color);background:#007acc1a}.ts-theme .explanation-icon{color:var(--ts-color)}.ts-theme .topic-explanation{border-left-color:var(--ts-color)}.topic-viewer{flex:1;overflow-y:auto;display:flex;flex-direction:column;width:100%;background-color:var(--bg-color)}.topic-content-wrapper{padding:3rem 4rem;max-width:1000px;margin:0 auto;width:100%}.topic-header{margin-bottom:32px;text-align:left}.topic-header h1{font-size:3rem;margin-bottom:0;color:var(--text-primary);font-weight:700;letter-spacing:-.03em}.topic-details p{font-size:1.15rem;line-height:1.8;color:var(--text-primary);opacity:.9;margin-bottom:16px}.topic-explanation{display:flex;gap:20px;margin-top:32px;padding:24px;background-color:#ffffff08;border-radius:12px;border-left:4px solid var(--accent-color)}.explanation-icon{flex-shrink:0;padding-top:4px}.syntax-tabs{display:flex;gap:8px;margin-bottom:0}.tab-btn{display:flex;align-items:center;gap:8px;padding:10px 20px;background-color:#ffffff0d;border:1px solid transparent;border-bottom:none;border-radius:8px 8px 0 0;color:var(--text-secondary);font-weight:500;transition:all .2s;cursor:pointer}.tab-btn:hover{background-color:#ffffff1a;color:var(--text-primary)}.tab-btn.active{background-color:#000;color:var(--text-primary);border-color:var(--border-color);border-bottom:1px solid #000;margin-bottom:-1px;z-index:2}.js-theme .tab-btn.active{color:var(--js-color)}.react-theme .tab-btn.active{color:var(--react-color)}.java-theme .tab-btn.active{color:var(--java-color)}.spring-theme .tab-btn.active{color:var(--spring-color)}.angular-theme .tab-btn.active{color:var(--angular-color)}.postgres-theme .tab-btn.active{color:var(--postgres-color)}.mysql-theme .tab-btn.active{color:var(--mysql-color)}.pseint-theme .tab-btn.active{color:var(--pseint-color)}.ts-theme .tab-btn.active{color:var(--ts-color)}.code-section{background-color:#000;border:1px solid var(--border-color);border-radius:0 8px 8px;box-shadow:0 4px 20px #00000080;margin-top:0;position:relative;z-index:1}.code-header{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background-color:var(--surface-color);border-bottom:1px solid var(--border-color)}.lang-tag{font-size:.8rem;color:var(--text-secondary);text-transform:uppercase;font-weight:600}.copy-btn{display:flex;align-items:center;gap:6px;color:var(--text-secondary);font-size:.85rem;transition:color .2s;background:none;border:none;cursor:pointer}.copy-btn:hover{color:var(--text-primary)}.shiki-container{padding:32px;overflow-x:auto;font-family:JetBrains Mono,Fira Code,monospace;font-size:1.1rem;line-height:1.6}.shiki{background-color:transparent!important;margin:0}.code-loading{padding:24px;color:var(--text-secondary)}.use-cases-section{margin-top:64px;border-top:1px solid var(--border-color);padding-top:48px}.use-cases-section h2{display:flex;align-items:center;gap:12px;font-size:1.8rem;margin-bottom:40px;color:var(--text-primary)}.section-icon{color:var(--accent-color)}.js-theme .section-icon{color:var(--js-color)}.react-theme .section-icon{color:var(--react-color)}.java-theme .section-icon{color:var(--java-color)}.spring-theme .section-icon{color:var(--spring-color)}.angular-theme .section-icon{color:var(--angular-color)}.postgres-theme .section-icon{color:var(--postgres-color)}.mysql-theme .section-icon{color:var(--mysql-color)}.pseint-theme .section-icon{color:var(--pseint-color)}.ts-theme .section-icon{color:var(--ts-color)}.use-cases-grid{display:flex;flex-direction:column;gap:60px}.use-case-header h3{font-size:1.5rem;margin-bottom:16px;font-weight:600;color:var(--accent-color)}.use-case-item p{font-size:1.1rem;line-height:1.7;color:var(--text-primary);margin-bottom:24px}.js-theme .use-case-header h3{color:var(--js-color)}.react-theme .use-case-header h3{color:var(--react-color)}.java-theme .use-case-header h3{color:var(--java-color)}.spring-theme .use-case-header h3{color:var(--spring-color)}.angular-theme .use-case-header h3{color:var(--angular-color)}.postgres-theme .use-case-header h3{color:var(--postgres-color)}.mysql-theme .use-case-header h3{color:var(--mysql-color)}.pseint-theme .use-case-header h3{color:var(--pseint-color)}.ts-theme .use-case-header h3{color:var(--ts-color)}.landing-footer{margin-top:80px;padding:40px 20px;text-align:center;color:var(--text-secondary);width:100%;z-index:10;position:relative;border-top:1px solid rgba(255,255,255,.05);background:#12121280;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.footer-content{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:12px;align-items:center}.footer-content p{font-size:.9rem;opacity:.8}.footer-info{display:flex;align-items:center;gap:12px;font-size:.95rem;font-weight:500;color:var(--text-primary)}.separator{color:var(--accent-color);opacity:.6}@media(max-width:1024px){.sidebar{position:fixed;left:0;top:0;width:280px;height:100vh;transform:translate(-100%);box-shadow:20px 0 50px #00000080;z-index:1001}.sidebar.open{transform:translate(0)}.sidebar-overlay{z-index:1000}.sidebar-close-btn{display:flex;align-items:center;justify-content:center}.sidebar-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px}.topic-content-wrapper{padding:6rem 1.5rem 3rem}.topic-header h1{font-size:2.2rem}.shiki-container{padding:16px;font-size:.95rem}.manuals-grid{gap:20px;padding:20px}.manual-card{width:100%;max-width:320px;padding:30px 20px}}@media(max-width:768px){.landing-header h1{font-size:2.5rem}.syntax-tabs{overflow-x:auto;padding-bottom:4px;scrollbar-width:none}.syntax-tabs::-webkit-scrollbar{display:none}.tab-btn{padding:8px 14px;font-size:.85rem;white-space:nowrap}.code-header{padding:8px 16px}.topic-explanation{flex-direction:column;gap:12px}.footer-info{flex-direction:column;gap:8px;text-align:center}.footer-info .separator{display:none}}@media(min-width:1025px){.sidebar-closed .sidebar{transform:translate(-100%);position:fixed}.sidebar-closed .main-content{margin-left:0}}