:root{--primary-color: #646cff;--primary-hover: #535bf2;--bg-primary: #1a1a2e;--bg-secondary: #16213e;--bg-card: #0f0f23;--text-primary: #ffffff;--text-secondary: #a0a0a0;--border-color: #2a2a4a;--success-color: #4ade80;--error-color: #f87171;--warning-color: #fbbf24;--sidebar-width: 240px}*{box-sizing:border-box}body{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg-primary);color:var(--text-primary);line-height:1.6}.app-layout{display:flex;min-height:100vh}.sidebar{width:var(--sidebar-width);background:var(--bg-secondary);border-right:1px solid var(--border-color);position:fixed;top:0;left:0;bottom:0;overflow-y:auto;z-index:100}.sidebar-header{padding:20px;border-bottom:1px solid var(--border-color)}.logo{font-size:1.25rem;font-weight:700;color:var(--text-primary);text-decoration:none}.nav-list{list-style:none;padding:10px 0;margin:0}.nav-list li a{display:block;padding:10px 20px;color:var(--text-secondary);text-decoration:none;font-size:.9rem;transition:all .2s}.nav-list li a:hover{background:#646cff1a;color:var(--primary-color)}.nav-list li a.active{background:#646cff33;color:var(--primary-color);border-left:3px solid var(--primary-color)}.main-content{margin-left:var(--sidebar-width);flex:1;padding:30px 40px;min-height:100vh}.nav-group{margin-bottom:10px}.nav-group-title{padding:12px 20px 6px;font-size:.85rem;font-weight:700;color:var(--primary-color);letter-spacing:.02em;border-bottom:1px solid var(--border-color);margin-bottom:4px}.nav-subgroup{margin-bottom:2px}.nav-subgroup-title{display:flex;align-items:center;gap:6px;width:100%;padding:8px 20px;font-size:.82rem;font-weight:500;color:var(--text-secondary);background:transparent;border:none;cursor:pointer;text-align:left;transition:all .2s}.nav-subgroup-title:hover{background:#646cff1a;color:var(--text-primary)}.nav-subgroup-title.has-active{color:var(--primary-color)}.collapse-icon{font-size:.6rem;transition:transform .2s ease;opacity:.6}.collapse-icon.expanded{transform:rotate(90deg)}.nav-subgroup .nav-list{padding:0 0 4px}.nav-subgroup .nav-list li a{padding:8px 20px 8px 32px;font-size:.85rem}.question-page{max-width:900px;margin:0 auto}.question-header{margin-bottom:30px}.question-header .question-id{display:inline-block;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:6px 14px;border-radius:20px;font-size:.85rem;font-weight:600}.question-header h1{font-size:1.8rem;margin:0;color:var(--text-primary);line-height:1.4}.key-points{background:#646cff1a;border:1px solid rgba(100,108,255,.3);border-radius:12px;padding:20px;margin-bottom:30px}.key-points h3{margin:0 0 15px;font-size:1.1rem;color:var(--primary-color)}.key-points ul{margin:0;padding-left:20px}.key-points li{margin:10px 0;color:var(--text-secondary)}.key-points li strong{color:var(--text-primary)}.key-points code{background:#646cff33;padding:2px 8px;border-radius:4px;color:var(--primary-color);font-size:.9em}.home-page{max-width:1200px;margin:0 auto}.hero{text-align:center;padding:60px 0}.hero h1{font-size:3rem;margin-bottom:16px;background:linear-gradient(135deg,#646cff,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.tagline{font-size:1.25rem;color:var(--text-secondary);margin-bottom:24px}.version-badges{display:flex;gap:12px;justify-content:center}.badge{background:#646cff33;color:var(--primary-color);padding:6px 16px;border-radius:20px;font-size:.85rem;font-weight:500}.categories-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}.category-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;padding:24px}.category-card h2{font-size:1.25rem;margin:0 0 8px;color:var(--primary-color)}.category-desc{color:var(--text-secondary);font-size:.9rem;margin-bottom:16px}.hooks-list{list-style:none;padding:0;margin:0}.hook-link{display:flex;flex-direction:column;padding:12px;margin:-4px -12px;border-radius:8px;text-decoration:none;transition:all .2s}.hook-link:hover{background:#646cff1a}.hook-name{font-weight:600;color:var(--text-primary);display:flex;align-items:center;gap:8px}.hook-desc{font-size:.85rem;color:var(--text-secondary);margin-top:4px}.new-badge{background:var(--success-color);color:#000;font-size:.7rem;padding:2px 6px;border-radius:4px;font-weight:700}.version-badge{background:#ffffff1a;font-size:.7rem;padding:2px 6px;border-radius:4px}.home-footer{text-align:center;padding:40px 0;color:var(--text-secondary)}.home-footer a{color:var(--primary-color)}.hook-page{max-width:900px;margin:0 auto}.hook-header{margin-bottom:40px}.hook-header h1{font-size:2.5rem;margin-bottom:16px;color:var(--primary-color)}.hook-description{font-size:1.1rem;color:var(--text-secondary);line-height:1.8}.hook-description code{background:#646cff33;padding:2px 8px;border-radius:4px;color:var(--primary-color)}.hook-syntax{background:var(--bg-card);border:1px solid var(--border-color);border-radius:8px;padding:16px 20px;margin-top:20px}.hook-syntax h4{margin:0 0 8px;color:var(--text-secondary);font-size:.85rem}.hook-syntax pre{margin:0;font-family:Fira Code,monospace;color:var(--primary-color)}.demos-container{display:flex;flex-direction:column;gap:32px}.demo-container{background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;padding:24px}.demo-container h3{margin:0 0 20px;font-size:1.25rem;color:var(--text-primary);padding-bottom:12px;border-bottom:1px solid var(--border-color)}.demo-section{margin-bottom:20px}.demo-section h4{margin:0 0 12px;font-size:1rem;color:var(--text-secondary)}button{background:var(--primary-color);color:#fff;border:none;padding:10px 20px;border-radius:8px;cursor:pointer;font-size:.95rem;font-weight:500;transition:all .2s}button:hover{background:var(--primary-hover);transform:translateY(-1px)}button:disabled{opacity:.5;cursor:not-allowed;transform:none}button.active{background:var(--primary-hover);box-shadow:0 0 0 2px #646cff66}.button-group{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}.wrong-btn{background:var(--error-color)}.correct-btn{background:var(--success-color);color:#000}.reset-btn{background:#ffffff1a}.delete-btn{background:var(--error-color);padding:4px 12px;font-size:.85rem}input,textarea{background:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-primary);padding:10px 14px;border-radius:8px;font-size:.95rem;width:100%;max-width:300px}input:focus,textarea:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #646cff33}textarea{max-width:none;min-height:150px;resize:vertical;font-family:Fira Code,monospace}.input-group{display:flex;gap:10px;align-items:center;margin:12px 0}.code-explain{background:#646cff0d;border:1px solid rgba(100,108,255,.2);border-radius:8px;padding:16px 20px;margin-top:20px}.code-explain h4{margin:0 0 12px;color:var(--primary-color)}.code-explain ul{margin:0;padding-left:20px}.code-explain li{margin:8px 0;color:var(--text-secondary)}.code-explain code{background:#646cff33;padding:2px 6px;border-radius:4px;color:var(--primary-color);font-size:.9em}.code-block{background:var(--bg-secondary);border-radius:8px;padding:16px;overflow-x:auto;font-family:Fira Code,monospace;font-size:.85rem;line-height:1.6;color:#e0e0e0}.compare-group{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0}.compare-item{padding:16px;border-radius:8px;border:1px solid var(--border-color)}.compare-item.wrong{border-color:var(--error-color);background:#f871711a}.compare-item.correct{border-color:var(--success-color);background:#4ade801a}.compare-item h5{margin:0 0 12px;font-size:.9rem}.compare-item .explain{font-size:.85rem;color:var(--text-secondary);margin-top:8px}.compare-table{width:100%;border-collapse:collapse;margin:16px 0}.compare-table th,.compare-table td{padding:12px;text-align:left;border-bottom:1px solid var(--border-color)}.compare-table th{background:var(--bg-secondary);color:var(--text-secondary);font-weight:500}.compare-table td code{background:#646cff33;padding:2px 6px;border-radius:4px}.todo-list,.item-list{list-style:none;padding:0;margin:16px 0}.todo-list li{display:flex;align-items:center;justify-content:space-between;padding:12px;background:var(--bg-secondary);border-radius:8px;margin-bottom:8px}.todo-list li.done span{text-decoration:line-through;opacity:.5}.item-list .item{padding:8px 12px;background:var(--bg-secondary);border-radius:4px;margin-bottom:4px}.log-container{background:var(--bg-secondary);border-radius:8px;padding:16px;max-height:200px;overflow-y:auto}.log-item{font-family:Fira Code,monospace;font-size:.85rem;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.05)}.status-indicator{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:20px;font-weight:500}.status-indicator.online{background:#4ade8033;color:var(--success-color)}.status-indicator.offline{background:#f8717133;color:var(--error-color)}.status-dot{width:10px;height:10px;border-radius:50%;background:currentColor}.loading{text-align:center;padding:40px;color:var(--text-secondary)}.pending{opacity:.6;transition:opacity .2s}.loading-overlay{position:absolute;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;border-radius:8px}.demo-form{display:flex;flex-direction:column;gap:16px}.form-field{display:flex;flex-direction:column;gap:6px}.form-field label{font-size:.9rem;color:var(--text-secondary)}.form-field input{max-width:none}.form-field .error{color:var(--error-color);font-size:.85rem}.warning{background:#fbbf241a;border:1px solid var(--warning-color);border-radius:8px;padding:12px 16px;margin-top:16px;color:var(--warning-color)}.large-number{font-size:2rem;font-weight:700;color:var(--primary-color)}.hint{font-size:.85rem;color:var(--text-secondary);font-style:italic}.highlight{background:#646cff33;padding:8px 16px;border-radius:8px;margin-top:8px}.user-card{background:var(--bg-secondary);border-radius:8px;padding:16px;margin:12px 0}.user-card p{margin:8px 0}.counters-row{display:flex;gap:16px}.counter-box{flex:1;background:var(--bg-secondary);border-radius:8px;padding:16px;text-align:center}.counter-box h5{margin:0 0 8px;color:var(--text-secondary)}.counter-box p{font-size:1.5rem;font-weight:700;color:var(--primary-color);margin:8px 0}.editor-preview{display:grid;grid-template-columns:1fr 1fr;gap:16px}.editor-pane,.preview-pane{background:var(--bg-secondary);border-radius:8px;padding:16px}.editor-pane h4,.preview-pane h4{margin:0 0 12px;color:var(--text-secondary);font-size:.9rem}.preview-pane.stale{opacity:.7}.preview-content h1{font-size:1.5rem;margin:0 0 12px}.preview-content h2{font-size:1.25rem;margin:0 0 8px}.preview-content p{margin:8px 0}.message-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}.message{background:var(--bg-secondary);padding:10px 14px;border-radius:8px;display:flex;justify-content:space-between;align-items:center}.message.sending{opacity:.6;border:1px dashed var(--border-color)}.sending-indicator{font-size:.8rem;color:var(--text-secondary)}.message-form{display:flex;gap:8px}.message-form input{flex:1;max-width:none}.result{padding:12px 16px;border-radius:8px;margin-top:16px}.result.success{background:#4ade8033;color:var(--success-color)}.result.error{background:#f8717133;color:var(--error-color)}.accessible-input .description{color:var(--text-secondary);font-size:.85rem}.accessible-input .error{color:var(--error-color);font-size:.85rem}.accordion{display:flex;flex-direction:column;gap:8px}.accordion-item{background:var(--bg-secondary);border-radius:8px;overflow:hidden}.accordion-item h4{margin:0}.accordion-item button{width:100%;text-align:left;background:transparent;border-radius:0;padding:14px 16px}.accordion-item>div{padding:0 16px 14px;color:var(--text-secondary)}.tabs{display:flex;gap:8px;margin-bottom:16px}.tabs button{background:var(--bg-secondary)}.tabs button.active{background:var(--primary-color)}.tab-content{max-height:200px;overflow-y:auto}.tab-item{padding:8px 12px;border-bottom:1px solid var(--border-color)}.content-area{position:relative;min-height:200px}.search-input{max-width:none;margin-bottom:16px}.filter-controls{margin-bottom:16px}.category-buttons{display:flex;gap:8px;margin-top:12px}.category-buttons button{background:var(--bg-secondary);padding:6px 14px}.category-buttons button.active{background:var(--primary-color)}.effect-timing .timeline{display:flex;align-items:center;gap:8px;padding:16px 0;overflow-x:auto}.timeline .step{background:var(--bg-secondary);padding:8px 14px;border-radius:6px;font-size:.85rem;white-space:nowrap}.timeline .step.highlight{background:var(--primary-color);color:#fff}.timeline .arrow{color:var(--text-secondary)}.value-compare{display:flex;gap:16px;margin:16px 0}.value-box{flex:1;background:var(--bg-secondary);padding:16px;border-radius:8px}.value-box h5{margin:0 0 8px;color:var(--text-secondary);font-size:.85rem}.value-box p{margin:0;font-family:Fira Code,monospace;word-break:break-all}.value-box.stale{border:1px dashed var(--warning-color)}.post-card{background:var(--bg-secondary);padding:20px;border-radius:8px}.post-card h4{margin:0 0 12px;color:var(--primary-color)}.post-card p{margin:0;color:var(--text-secondary)}.post-selector{display:flex;gap:8px;margin-bottom:16px}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--primary-color)}@media(max-width:768px){.sidebar{display:none}.main-content{margin-left:0;padding:20px}.compare-group,.editor-preview{grid-template-columns:1fr}.hero h1{font-size:2rem}}.question-page .priority-box,.question-page .compare-box,.question-page .result-box,.question-page .child-box,.question-page .list-preview,.question-page .slow-list{background:var(--bg-secondary)!important;color:var(--text-primary);border:1px solid var(--border-color)}.question-page .result-list li,.question-page .list-preview li,.question-page .slow-item{background:var(--bg-card)!important;color:var(--text-primary)}.question-page .state-display span:not(.render-badge){background:var(--bg-secondary)!important;color:var(--text-primary)}.question-page .compare-table th,.question-page .compare-table td{color:var(--text-primary);background:var(--bg-card);border:1px solid var(--border-color)}.question-page .compare-table th{background:var(--bg-secondary);color:var(--text-secondary)}.question-page input,.question-page textarea,.question-page select{background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-color)}.question-page .child-box.no-memo,.question-page .result-box.no-memo{background:#f8717126!important;border-color:var(--error-color)}.question-page .child-box.with-memo,.question-page .result-box.with-memo{background:#4ade8026!important;border-color:var(--success-color)}