html{scroll-behavior:smooth}.nav-page-container{background:var(--bg-primary);min-height:100vh;padding:var(--space-8) 0}.nav-page-wrapper{max-width:100%;margin:0;padding:0}.nav-page-hero{position:relative;text-align:center;padding:var(--space-20) 0 var(--space-16) 0;margin-bottom:var(--spacing-section);overflow:hidden}.nav-page-hero-background{position:absolute;top:0;left:0;right:0;bottom:0;z-index:1}.hero-gradient-orb{position:absolute;border-radius:50%;filter:blur(40px);opacity:.6;animation:float 6s ease-in-out infinite}.hero-gradient-orb-1{width:200px;height:200px;background:linear-gradient(135deg,var(--primary-brand) 0%,#3b82f6 100%);top:10%;left:15%;animation-delay:0s}.hero-gradient-orb-2{width:150px;height:150px;background:linear-gradient(135deg,#10b981 0%,var(--success-green) 100%);top:60%;right:20%;animation-delay:2s}.hero-gradient-orb-3{width:120px;height:120px;background:linear-gradient(135deg,#f59e0b 0%,#ef4444 100%);top:30%;right:10%;animation-delay:4s}@keyframes float{0%,100%{transform:translateY(0px)}50%{transform:translateY(-20px)}}.nav-page-hero-content{position:relative;z-index:2;max-width:800px;margin:0 auto}.nav-page-hero-badge{display:inline-flex;align-items:center;gap:var(--space-2);background:var(--bg-secondary);border:1px solid var(--border-light);border-radius:var(--radius-full);padding:var(--space-2) var(--space-4);margin-bottom:var(--space-6);font-size:var(--text-sm);font-weight:500;color:var(--text-secondary);box-shadow:var(--shadow-sm)}.hero-badge-icon{font-size:var(--text-base)}.nav-page-hero-title{font-size:clamp(2.5rem,5vw,4rem);font-weight:800;line-height:1.1;color:var(--text-primary);margin-bottom:var(--space-6);letter-spacing:-.02em}.hero-title-highlight{background:linear-gradient(135deg,var(--primary-brand) 0%,#3b82f6 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;position:relative}.nav-page-hero-description{font-size:var(--text-xl);line-height:1.6;color:var(--text-secondary);margin-bottom:var(--space-10);max-width:600px;margin-left:auto;margin-right:auto}.nav-page-hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-4);margin-bottom:var(--space-12)}.hero-btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-4) var(--space-6);border-radius:var(--radius-lg);font-weight:600;font-size:var(--text-base);text-decoration:none;transition:all var(--transition-fast);border:2px solid transparent;position:relative;overflow:hidden}.hero-btn-primary{background:var(--primary-brand);color:#fff;box-shadow:var(--shadow-lg)}.hero-btn-primary:hover{background:var(--primary-brand-dark);transform:translateY(-2px);box-shadow:var(--shadow-xl);text-decoration:none}.hero-btn-secondary{background:0 0;color:var(--text-primary);border-color:var(--border-medium)}.hero-btn-secondary:hover{background:var(--bg-secondary);border-color:var(--primary-brand);color:var(--primary-brand);transform:translateY(-2px);text-decoration:none}.hero-btn-icon{transition:transform var(--transition-fast)}.hero-btn:hover .hero-btn-icon{transform:translateX(2px)}.nav-page-hero-notice{display:flex;align-items:center;justify-content:center;gap:var(--space-3);margin-top:var(--space-8);padding:var(--space-4) var(--space-6);background:linear-gradient(135deg,#fff7ed 0%,#ffefd5 100%);border:1px solid var(--warning-orange);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);max-width:600px;margin-left:auto;margin-right:auto}.hero-notice-icon{font-size:var(--text-lg);flex-shrink:0}.hero-notice-text{font-size:var(--text-sm);color:var(--text-secondary);font-weight:500;text-align:center;line-height:1.5}.nav-page-content{display:flex;flex-direction:column;gap:var(--space-12);margin-top:var(--spacing-content)}.nav-page-section{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-2xl);padding:var(--space-10);box-shadow:var(--shadow-card);transition:all var(--transition-normal);position:relative;overflow:hidden}.nav-page-section:before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--primary-brand) 0%,var(--accent-cta) 100%)}.nav-page-section:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover);border-color:var(--primary-brand)}.nav-page-section-title{font-size:var(--text-2xl);font-weight:600;line-height:1.4;color:var(--text-primary);margin-bottom:var(--space-8);padding-bottom:var(--space-4);border-bottom:2px solid var(--bg-secondary);position:relative}.nav-page-section-title:after{content:'';position:absolute;bottom:-2px;left:0;width:60px;height:2px;background:var(--primary-brand)}.nav-page-category-label{display:inline-block;font-size:var(--text-sm);font-weight:600;color:var(--primary-brand);background:var(--bg-secondary);padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);margin:var(--space-6) 0 var(--space-4) 0;border:1px solid var(--border-light);letter-spacing:.025em}.nav-page-list{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:flex-start}.nav-page-list-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);background:var(--bg-primary);border:1px solid var(--border-light);border-radius:var(--radius-lg);transition:all var(--transition-fast);position:relative;flex-shrink:0}.nav-page-list-item:before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:0 0;border-radius:var(--radius-sm) 0 0 var(--radius-sm);transition:background var(--transition-fast)}.nav-page-list-item:hover{background:var(--bg-secondary);border-color:var(--primary-brand);transform:translateX(4px)}.nav-page-list-item:hover:before{background:var(--primary-brand)}.nav-page-link{font-size:var(--text-base);font-weight:500;color:var(--text-secondary);text-decoration:none;line-height:1.5;transition:color var(--transition-fast);flex:1}.nav-page-link:hover{color:var(--primary-brand);text-decoration:none}.nav-page-tutorial-link{font-size:var(--text-sm);color:var(--accent-cta);text-decoration:none;font-weight:500;padding:var(--space-1) var(--space-3);background:rgba(255,107,107,.1);border-radius:var(--radius-sm);transition:all var(--transition-fast);white-space:nowrap;flex-shrink:0}.nav-page-tutorial-link:hover{background:var(--accent-cta);color:#fff;text-decoration:none;transform:scale(1.05)}@media (max-width:1024px){.nav-page-content{gap:var(--space-8)}.nav-page-section{padding:var(--space-8)}.nav-page-wrapper{padding:0 var(--space-6)}.nav-page-hero{padding:var(--space-16) 0 var(--space-12) 0}.hero-gradient-orb-1{width:150px;height:150px}.hero-gradient-orb-2{width:120px;height:120px}.hero-gradient-orb-3{width:100px;height:100px}.nav-page-hero-description{font-size:var(--text-lg)}.nav-page-hero-notice{padding:var(--space-4) var(--space-5)}}@media (max-width:768px){.nav-page-container{padding:var(--space-6) 0}.nav-page-wrapper{padding:0 var(--space-4)}.nav-page-hero{padding:var(--space-12) 0 var(--space-10) 0}.hero-gradient-orb{display:none}.nav-page-hero-description{font-size:var(--text-base);margin-bottom:var(--space-8)}.nav-page-hero-actions{flex-direction:column;align-items:center;gap:var(--space-3);margin-bottom:var(--space-10)}.hero-btn{width:100%;max-width:280px;justify-content:center}.nav-page-hero-notice{margin-top:var(--space-6);padding:var(--space-3) var(--space-4);gap:var(--space-2)}.hero-notice-text{font-size:var(--text-xs)}.nav-page-content{gap:var(--space-6)}.nav-page-section{padding:var(--space-6)}.nav-page-section-title{font-size:var(--text-xl);margin-bottom:var(--space-6)}.nav-page-notice{padding:var(--space-5) var(--space-6);gap:var(--space-3)}.nav-page-notice-text{font-size:var(--text-sm)}.nav-page-list-item{padding:var(--space-3) var(--space-4);flex-direction:row;align-items:center;gap:var(--space-2)}.nav-page-link{font-size:var(--text-sm)}}@media (max-width:480px){.nav-page-section{padding:var(--space-5)}.nav-page-section-title{font-size:var(--text-lg)}.nav-page-hero-badge{padding:var(--space-1) var(--space-3);font-size:var(--text-xs)}.nav-page-hero-description{font-size:var(--text-sm)}.hero-btn{padding:var(--space-3) var(--space-5);font-size:var(--text-sm)}.nav-page-comments{margin-top:var(--space-12);padding-top:var(--space-8)}.nav-page-comments-title{font-size:var(--text-xl)}}.nav-page-link:focus,.nav-page-tutorial-link:focus{outline:2px solid var(--primary-brand);outline-offset:2px;border-radius:var(--radius-sm)}@media (prefers-reduced-motion:reduce){.nav-page-section,.nav-page-list-item,.nav-page-link,.nav-page-tutorial-link,.nav-page-subtitle a{transition:none}.nav-page-section:hover,.nav-page-list-item:hover{transform:none}}@media (prefers-contrast:high){.nav-page-section{border-width:2px}.nav-page-list-item{border-width:2px}.nav-page-link{font-weight:600}}@media print{.nav-page-container{background:#fff;padding:0}.nav-page-section{box-shadow:none;border:1px solid #ccc;break-inside:avoid;margin-bottom:var(--space-8)}.nav-page-section:hover{transform:none}.nav-page-notice{background:#f5f5f5;border:1px solid #999}.nav-page-link,.nav-page-tutorial-link{color:#000 !important;text-decoration:underline}}html{scroll-behavior:smooth}#comments{scroll-margin-top:100px}#nav-content{scroll-margin-top:100px}@media (max-width:768px){#comments,#nav-content{scroll-margin-top:80px}}.comments-section{background:var(--bg-secondary);padding:var(--space-16) 0;border-top:1px solid var(--border-light)}.comments-section .comments-wrapper{background:var(--bg-card);border-radius:var(--radius-xl);padding:var(--space-12);box-shadow:var(--shadow-card);border:1px solid var(--border-light)}.nav-page-comments{margin-top:var(--space-16);padding:var(--space-12);background:var(--bg-secondary);border-radius:var(--radius-xl);border:1px solid var(--border-light)}.nav-page-comments-wrapper{max-width:800px;margin:0 auto}.nav-page-comments-title{font-size:var(--text-2xl);font-weight:600;color:var(--text-primary);margin-bottom:var(--space-6);text-align:center}.nav-page-comments-description{margin-bottom:var(--space-8);text-align:center}.nav-page-comments-description p{color:var(--text-secondary);font-size:var(--text-base);line-height:1.6;margin:0}.nav-page-comments-closed{text-align:center;padding:var(--space-8);background:var(--bg-primary);border-radius:var(--radius-lg);border:1px dashed var(--border-medium)}.nav-page-comments-closed p{color:var(--text-tertiary);font-style:italic;margin:0}