@import "https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap";
:root{--color-bg:#0d1117;--color-bg-secondary:#161b22;--color-bg-tertiary:#1c2128;--color-border:#30363d;--color-border-hover:#484f58;--color-text-primary:#e6edf3;--color-text-secondary:#8b949e;--color-text-muted:#6e7681;--color-accent:#58a6ff;--color-accent-hover:#79c0ff;--color-accent-bg:#58a6ff1a;--color-accent-border:#58a6ff4d;--color-badge-bg:#1f2937;--color-badge-text:#93c5fd;--color-badge-border:#93c5fd33;--sidebar-width:260px;--header-height:60px;--content-max:1280px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-full:9999px;--shadow-sm:0 1px 3px #0006;--shadow-md:0 4px 12px #00000080;--shadow-card:0 2px 8px #0000004d;--transition:.15s ease}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background-color:var(--color-bg);color:var(--color-text-primary);-webkit-font-smoothing:antialiased;min-height:100vh;font-family:Noto Sans JP,Inter,sans-serif;line-height:1.6}a{color:var(--color-accent);transition:color var(--transition);text-decoration:none}a:hover{color:var(--color-accent-hover)}img{max-width:100%}.layout{flex-direction:column;min-height:100vh;display:flex}.header{height:var(--header-height);background:var(--color-bg-secondary);border-bottom:1px solid var(--color-border);padding:0 var(--space-6);z-index:100;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);align-items:center;display:flex;position:sticky;top:0}.header__logo{cursor:pointer;align-items:center;gap:12px;text-decoration:none;display:flex}.logo-emblem{-webkit-user-select:none;user-select:none;background:#0d111766;border:1px solid #38bdf84d;border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:38px;height:38px;transition:all .3s;display:flex;position:relative;overflow:hidden;box-shadow:0 4px 12px #0ea5e926,inset 0 0 10px #38bdf81a}.logo-svg{filter:drop-shadow(0 2px 4px #38bdf866);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}.header__logo:hover .logo-emblem{border-color:#38bdf899;transform:translateY(-1px);box-shadow:0 0 20px #38bdf866,inset 0 0 15px #38bdf833}.header__logo:hover .logo-svg{transform:scale(1.1)rotate(5deg)}.header__logo-text{letter-spacing:-.5px;background:linear-gradient(90deg,#f8f9fa,#ced4da);color:#0000;-webkit-background-clip:text;background-clip:text;font-size:22px;font-weight:800;transition:all .3s;display:inline-block}.header__logo-text span{background:linear-gradient(135deg,#38bdf8,#818cf8);color:#0000;-webkit-background-clip:text;background-clip:text;display:inline-block}.header__logo:hover .header__logo-text{text-shadow:0 0 15px #f8f9fa26}.sidebar-nav{flex-direction:column;gap:6px;display:flex}.sidebar-nav__item{color:#adb5bd;border-left:3px solid #0000;border-radius:8px;align-items:center;padding:10px 16px;font-size:14px;font-weight:500;text-decoration:none;transition:all .2s;display:flex}.sidebar-nav__item:hover{color:#f8f9fa;background:#ffffff0d;transform:translate(2px)}.sidebar-nav__item--active{border-color:#339af033;font-weight:700}.main{max-width:var(--content-max);width:100%;padding:var(--space-6);gap:var(--space-6);flex:1;margin:0 auto;display:flex}.sidebar{width:var(--sidebar-width);gap:var(--space-5);flex-direction:column;flex-shrink:0;display:flex}.sidebar__section{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5)}.sidebar__title{color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:var(--space-3);font-size:11px;font-weight:600}.search-input-wrapper{position:relative}.search-input-icon{left:var(--space-3);color:var(--color-text-muted);pointer-events:none;align-items:center;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.search-input{background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-md);width:100%;color:var(--color-text-primary);padding:var(--space-2) var(--space-3) var(--space-2) 36px;transition:border-color var(--transition), box-shadow var(--transition);outline:none;font-family:inherit;font-size:14px}.search-input::placeholder{color:var(--color-text-muted)}.search-input:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-bg)}.category-list{gap:var(--space-1);flex-direction:column;display:flex}.category-btn{width:100%;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);color:var(--color-text-secondary);cursor:pointer;text-align:left;transition:background var(--transition), color var(--transition), border-color var(--transition);background:0 0;border:1px solid #0000;justify-content:space-between;align-items:center;font-family:inherit;font-size:13px;font-weight:500;display:flex}.category-btn:hover{background:var(--color-bg-tertiary);color:var(--color-text-primary)}.category-btn.active{background:var(--color-accent-bg);border-color:var(--color-accent-border);color:var(--color-accent);font-weight:600}.category-btn__dot{border-radius:var(--radius-full);opacity:0;width:6px;height:6px;transition:opacity var(--transition);background:currentColor;flex-shrink:0}.category-btn.active .category-btn__dot{opacity:1}.content{flex:1;min-width:0}.content__header{margin-bottom:var(--space-5);padding-bottom:var(--space-4);border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;display:flex}.content__title{color:var(--color-text-primary);font-size:18px;font-weight:700}.content__count{color:var(--color-text-muted);background:var(--color-bg-secondary);border:1px solid var(--color-border);padding:2px var(--space-3);border-radius:var(--radius-full);font-size:13px}.tip-list{gap:var(--space-2);flex-direction:column;display:flex}.tip-card{align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-5);background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);transition:background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);min-width:0;text-decoration:none;display:flex}.tip-card:hover{background:var(--color-bg-tertiary);border-color:var(--color-border-hover);box-shadow:var(--shadow-card);color:var(--color-text-primary);transform:translateY(-1px)}.tip-card__body{align-items:center;gap:var(--space-3);flex:1;min-width:0;display:flex}.tip-card__title{color:var(--color-text-primary);white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0;font-size:14px;font-weight:500;overflow:hidden}.tip-card:hover .tip-card__title{color:var(--color-accent-hover)}.tip-card__badges{gap:var(--space-1);flex-shrink:0;display:flex}.tip-card__arrow{color:var(--color-text-muted);transition:color var(--transition), transform var(--transition);flex-shrink:0}.tip-card:hover .tip-card__arrow{color:var(--color-accent);transform:translate(2px)}.badge{padding:2px var(--space-2);border-radius:var(--radius-sm);background:var(--color-badge-bg);color:var(--color-badge-text);border:1px solid var(--color-badge-border);white-space:nowrap;letter-spacing:.3px;align-items:center;font-size:11px;font-weight:600;line-height:1.4;display:inline-flex}.empty-state{justify-content:center;align-items:center;gap:var(--space-3);padding:var(--space-12) var(--space-6);color:var(--color-text-muted);flex-direction:column;display:flex}.empty-state__icon{opacity:.5;font-size:48px}.empty-state__text{font-size:15px}.detail-layout{width:100%;min-width:0;max-width:860px;padding:var(--space-6);margin:0 auto}.detail-back{align-items:center;gap:var(--space-2);color:var(--color-text-secondary);margin-bottom:var(--space-6);transition:color var(--transition);font-size:14px;display:inline-flex}.detail-back:hover{color:var(--color-accent)}.detail-header{margin-bottom:var(--space-8)}.detail-badges{gap:var(--space-2);margin-bottom:var(--space-4);flex-wrap:wrap;display:flex}.detail-title{color:var(--color-text-primary);margin-bottom:var(--space-3);font-size:28px;font-weight:700;line-height:1.3}.detail-meta{color:var(--color-text-muted);font-size:13px}.detail-divider{background:linear-gradient(90deg, var(--color-border), transparent);height:1px;margin-bottom:var(--space-8)}.article-content{color:var(--color-text-primary);word-break:break-word;overflow-wrap:break-word;font-size:15px;line-height:1.8}.article-content h1,.article-content h2,.article-content h3,.article-content h4{color:var(--color-text-primary);margin:var(--space-8) 0 var(--space-3);font-weight:700;line-height:1.3}.article-content h1{font-size:24px}.article-content h2{padding-bottom:var(--space-2);border-bottom:1px solid var(--color-border);font-size:20px}.article-content h3{font-size:17px}.article-content h4{font-size:15px}.article-content p{margin-bottom:var(--space-4)}.article-content ul,.article-content ol{margin:var(--space-3) 0 var(--space-4) var(--space-6)}.article-content li{margin-bottom:var(--space-2)}.article-content blockquote{border-left:3px solid var(--color-accent);padding:var(--space-3) var(--space-5);margin:var(--space-4) 0;background:var(--color-accent-bg);border-radius:0 var(--radius-md) var(--radius-md) 0;color:var(--color-text-secondary)}.article-content code{background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:#e879f9;padding:1px 6px;font-family:JetBrains Mono,monospace;font-size:13px}.article-content pre{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-5);margin:var(--space-4) 0;font-family:JetBrains Mono,monospace;font-size:13px;line-height:1.7;overflow-x:auto}.article-content pre code{color:var(--color-text-primary);background:0 0;border:none;padding:0}.article-content a{color:var(--color-accent);text-underline-offset:3px;text-decoration:underline}.article-content strong{font-weight:700}.article-content em{font-style:italic}.code-block{margin:var(--space-4) 0;min-width:0;max-width:100%}.code-block__filename{background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-md) var(--radius-md) 0 0;padding:var(--space-2) var(--space-4);color:var(--color-text-secondary);border-bottom:none;font-family:JetBrains Mono,monospace;font-size:12px}.code-block__pre{border-radius:0 0 var(--radius-md) var(--radius-md)!important;margin:0!important}.footer{border-top:1px solid var(--color-border);padding:var(--space-5) var(--space-6);text-align:center;color:var(--color-text-muted);background:var(--color-bg-secondary);font-size:13px}.skeleton{background:linear-gradient(90deg, var(--color-bg-secondary) 25%, var(--color-bg-tertiary) 50%, var(--color-bg-secondary) 75%);border-radius:var(--radius-md);background-size:200% 100%;animation:1.5s infinite shimmer}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media (max-width:768px){.main{padding:var(--space-4);gap:var(--space-4);flex-direction:column}.sidebar{width:100%}.category-list{gap:var(--space-2);flex-flow:wrap}.category-btn{width:auto;padding:var(--space-1) var(--space-3);font-size:12px}.tip-card__badges{display:none}.detail-layout{padding:var(--space-4)}.detail-title{font-size:22px}}