*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-family-base);background:var(--color-primary);min-height:100vh}#app{min-height:100vh}.app-container{min-height:100vh;display:flex;flex-direction:column}.header{background:#fff;box-shadow:0 4px 16px #3b82f61f;padding:clamp(1.25rem,3%,2rem) clamp(1rem,3%,2rem);position:relative;overflow:hidden;border-bottom:1px solid rgba(226,232,240,.3)}.header:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(59,130,246,.08),transparent);animation:shimmer 4s infinite}@keyframes shimmer{0%{left:-100%}to{left:100%}}.header-content{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:2.5rem;position:relative}.header-logo{height:clamp(75px,8vw,100px);width:auto;object-fit:contain;position:relative;z-index:1;filter:drop-shadow(0 2px 6px rgba(59,130,246,.08))}.header-text{position:absolute;left:0;right:0;text-align:center}.title{font-size:clamp(1.4rem,5vw,2.5rem);margin-bottom:.5rem;font-weight:700;color:var(--color-primary-dark);line-height:1.3;letter-spacing:-.02em}.subtitle{font-size:var(--font-size-lg);color:var(--text-secondary);line-height:1.5;letter-spacing:.01em}.main-content{flex:1;padding:var(--spacing-xl) var(--spacing-md);max-width:1200px;width:100%;margin:0 auto}.footer{background:#2c5aa0;color:#fffffffa;text-align:center;padding:clamp(2rem,4%,2.5rem) clamp(1rem,3%,2rem);font-size:clamp(.8rem,2vw,.95rem);border-top:2px solid rgba(255,255,255,.15);letter-spacing:.005em;box-shadow:inset 0 1px #ffffff1a;transition:background .15s ease}.footer:active{background:#1e40af}.footer p{margin:.5rem 0;font-weight:500;letter-spacing:.01em}.footer p:first-child{font-size:1.05em;color:#fff;margin-bottom:.75rem}.welcome-section{animation:fadeIn .6s ease-in}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.welcome-hero{text-align:center;padding:clamp(1.5rem,5%,3rem) clamp(1.25rem,4%,2.5rem);background:#fff;border-radius:14px;margin-bottom:2.5rem;box-shadow:0 4px 16px #3b82f61f;border:1px solid rgba(226,232,240,.4)}.hero-title{font-size:clamp(1.75rem,5vw,2.5rem);font-weight:700;line-height:1.2;letter-spacing:-.02em;margin-bottom:1rem;color:#1e40af}.hero-description{font-size:clamp(.95rem,2.5vw,1.1rem);color:#475569;max-width:650px;margin:0 auto;line-height:1.8;letter-spacing:.005em;font-weight:500}.methods-showcase-card{margin-bottom:1.75rem;padding:1.25rem 1.75rem;background:#e3f2fd;border-radius:14px;box-shadow:0 3px 12px #3b82f614;border:1px solid rgba(59,130,246,.12)}.showcase-title{font-size:clamp(1.25rem,4vw,1.55rem);font-weight:700;letter-spacing:-.015em;color:#1e40af;text-align:center;margin-bottom:.4rem;line-height:1.3}.showcase-subtitle{font-size:clamp(.88rem,2.5vw,1rem);color:#334155;text-align:center;margin-bottom:0;line-height:1.6;letter-spacing:.005em;font-weight:500}.methods-grid-direct{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem;margin-bottom:0}.method-card-direct{background:#fff;border-radius:14px;padding:1.75rem;box-shadow:0 4px 12px #00000014;border:1px solid rgba(226,232,240,.5);transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;animation:cardSlideUp .5s cubic-bezier(.4,0,.2,1) both;cursor:pointer}.method-card-direct.stagger-1{animation-delay:.1s}.method-card-direct.stagger-2{animation-delay:.2s}.method-card-direct.stagger-3{animation-delay:.3s}@keyframes cardSlideUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.method-card-direct:hover{border-color:#3b82f6;box-shadow:0 16px 32px #00000026;transform:translateY(-8px)}.method-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem;padding-bottom:.875rem;border-bottom:2px solid #f1f5f9}.method-header h4{font-size:1.15rem;font-weight:700;letter-spacing:-.02em;color:#1e293b;margin:0;line-height:1.3}.method-info{flex:1;margin-bottom:1.5rem}.method-desc{color:#64748b;font-size:.95rem;margin-bottom:.875rem;line-height:1.65;letter-spacing:.005em;min-height:3em;font-weight:500}.method-specs{list-style:none;padding:0;margin:0}.method-specs li{padding:.4rem 0;font-size:.88rem;color:#475569;border-bottom:1px solid #f1f5f9;line-height:1.5}.method-specs li:last-child{border-bottom:none}.method-specs strong{color:#1e293b;font-weight:600}.btn-method{width:100%;padding:1rem 1.5rem;font-size:.98rem;font-weight:700;letter-spacing:.02em;border:none;border-radius:10px;cursor:pointer;transition:all .2s ease;text-align:center;position:relative;overflow:hidden;margin-top:auto;background:#0284c7;color:#fff;box-shadow:0 8px 20px #02304766;font-weight:600}.btn-method:hover{transform:translateY(-4px);box-shadow:0 12px 28px #02304780;letter-spacing:.03em}.btn-method:active{background:#0369a1;transform:translateY(-1px);box-shadow:0 4px 12px #02304799}.btn-method:focus-visible{outline:3px solid rgba(59,130,246,.5);outline-offset:2px}.compare-all-section{margin-top:2rem;margin-bottom:2.75rem}.compare-card{background:#e3f2fd;border:1px solid rgba(59,130,246,.12);border-radius:14px;padding:var(--card-padding);display:flex;align-items:center;justify-content:space-between;gap:2rem;box-shadow:0 4px 12px #00000014;transition:all .3s cubic-bezier(.4,0,.2,1);cursor:pointer}.compare-card:hover{border-color:#3b82f6;box-shadow:0 12px 28px #0000001f;transform:translateY(-4px)}.compare-content h4{font-size:1.2rem;font-weight:700;letter-spacing:-.02em;color:#1e40af;margin-bottom:.625rem;line-height:1.3}.compare-content p{color:#475569;font-size:1rem;margin:0;line-height:1.7;letter-spacing:.005em;font-weight:500}.btn-compare-all{background:#2563eb;color:#fff;border:none;padding:1.05rem 3rem;font-size:1.05rem;font-weight:700;letter-spacing:.02em;border-radius:10px;cursor:pointer;transition:all .2s ease;box-shadow:0 10px 25px #155efb80;white-space:nowrap;flex-shrink:0;position:relative;overflow:hidden}.btn-compare-all:hover{transform:translateY(-4px);box-shadow:0 14px 32px #155efb99;letter-spacing:.03em}.btn-compare-all:active{background:#1d4ed8;transform:translateY(-1px);box-shadow:0 6px 16px #155efbb3}.btn-compare-all:focus-visible{outline:3px solid rgba(59,130,246,.5);outline-offset:2px}.badge{display:inline-block;padding:.25rem .65rem;border-radius:12px;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em}.badge-blue{background:#3b82f6;color:#fff}.badge-pink,.badge-red{background:#60a5fa;color:#fff}.badge-green{background:#22c55e;color:#fff}.difficulty{display:inline-block;padding:.25rem .6rem;border-radius:6px;font-size:.8rem;font-weight:600}.difficulty.easy{background:#dbeafe;color:#1e40af}.difficulty.medium{background:#93c5fd;color:#1e3a8a}.difficulty.hard{background:#3b82f6;color:#fff}.method-view{animation:fadeIn .6s ease-in}.method-navigation{display:flex;align-items:center;gap:1.25rem;margin-bottom:2rem;padding:1rem 1.5rem;background:#fff;border-radius:14px;box-shadow:0 3px 12px #3b82f61a;flex-wrap:wrap;border:1px solid rgba(226,232,240,.4)}.nav-back-btn{background:#fff;border:2px solid #e2e8f0;color:#3b82f6;padding:.7rem 1.5rem;border-radius:10px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s ease;white-space:nowrap;box-shadow:0 2px 8px #0000000d}.nav-back-btn:hover{background:#f8fafc;border-color:#3b82f6;color:#2563eb;transform:translateY(-2px);box-shadow:0 6px 16px #0000001a}.method-tabs{display:flex;gap:.75rem;flex:1;flex-wrap:wrap}.method-tab{padding:.7rem 1.5rem;border:2px solid #e2e8f0;background:#fff;color:#64748b;border-radius:10px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s ease;white-space:nowrap}.method-tab:hover{border-color:#3b82f6;color:#3b82f6;background:#3b82f60a;transform:translateY(-2px)}.method-tab.active{background:#3b82f6;color:#fff;border-color:#2563eb;box-shadow:0 4px 14px #3b82f652}.method-tab-all.active{background:#1e40af;border-color:#1e40af;box-shadow:0 4px 14px #1e40af52}.method-content{animation:fadeIn .4s ease-in}.general-theory-section{margin-top:2.5rem;padding:2.5rem;background:#fff;border-radius:16px;box-shadow:0 4px 16px #3b82f61f;border:1px solid rgba(226,232,240,.3)}.theory-title{font-size:clamp(1.5rem,4vw,2rem);color:#1e40af;text-align:center;margin-bottom:.75rem;font-weight:700;letter-spacing:-.02em}.theory-intro{text-align:center;color:#475569;font-size:clamp(.95rem,2.5vw,1.15rem);margin-bottom:2.5rem;line-height:1.8;letter-spacing:.005em;font-weight:500}.theory-content{display:grid;grid-template-columns:repeat(2,1fr);gap:1.75rem;align-items:stretch}.theory-card{background:#f1f5f9;padding:1.75rem;border-radius:14px;border:1px solid rgba(59,130,246,.1);transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;box-shadow:0 2px 8px #0000000f;cursor:pointer}.theory-card:hover{transform:translateY(-6px);box-shadow:0 12px 24px #0000001f;border-color:#3b82f6;background:#fff}.theory-card h3{color:#1e40af;font-size:1.2rem;margin-bottom:1rem;font-weight:700;letter-spacing:-.015em}.theory-card p{color:#475569;line-height:1.8;margin-bottom:.75rem;flex:1;font-size:.95rem;font-weight:500}.theory-card ul{list-style:none;padding:0;margin:.75rem 0 0;flex:1}.theory-card ul li{padding:.625rem 0;color:#475569;line-height:1.7;font-size:.93rem;font-weight:500;border-bottom:1px solid #f1f5f9}.theory-card ul li:last-child{border-bottom:none}.theory-card ul li strong{color:#1e40af;font-weight:600}.hamburger-btn{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:42px;height:42px;background:#fff;border:2px solid #e2e8f0;border-radius:8px;cursor:pointer;padding:8px;transition:all .3s ease;flex-shrink:0}.hamburger-btn:hover{border-color:#3b82f6;background:#f8fafc}.hamburger-line{display:block;width:20px;height:2.5px;background:#3b82f6;border-radius:2px;transition:all .3s ease}.hamburger-btn.open .hamburger-line:nth-child(1){transform:rotate(45deg) translate(5px,5px)}.hamburger-btn.open .hamburger-line:nth-child(2){opacity:0}.hamburger-btn.open .hamburger-line:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}@keyframes cardSlideUp{0%{opacity:0;transform:translateY(30px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.method-card-direct.stagger-1{animation:cardSlideUp .5s ease-out .1s both}.method-card-direct.stagger-2{animation:cardSlideUp .5s ease-out .25s both}.method-card-direct.stagger-3{animation:cardSlideUp .5s ease-out .4s both}.btn-method,.btn-compare-all{position:relative;overflow:hidden}.ripple-effect{position:absolute;border-radius:50%;background:#fff6;transform:scale(0);animation:rippleAnim .6s ease-out;pointer-events:none}@keyframes rippleAnim{to{transform:scale(2.5);opacity:0}}.btn-method:active{transform:scale(.96);box-shadow:0 1px 4px #0ea5e933}.btn-compare-all:active{transform:scale(.97)}.nav-back-btn:active,.method-tab:active{transform:scale(.95)}.method-card-direct{position:relative}.method-card-direct:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#3b82f6,#60a5fa,#3b82f6);border-radius:12px 12px 0 0;transform:scaleX(0);transition:transform .4s ease;transform-origin:left}.method-card-direct:hover:before{transform:scaleX(1)}.method-card-direct:hover .badge{animation:badgePulse .5s ease}@keyframes badgePulse{0%{transform:scale(1)}50%{transform:scale(1.15)}to{transform:scale(1)}}.method-specs li{transition:padding-left .3s ease,color .3s ease}.method-card-direct:hover .method-specs li{padding-left:.5rem;color:#1e293b}.compare-card{position:relative;overflow:hidden}.compare-card:after{content:"";position:absolute;top:50%;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(59,130,246,.05),transparent);transform:translateY(-50%);transition:left .6s ease}.compare-card:hover:after{left:100%}.general-theory-section{opacity:0;transform:translateY(40px);transition:opacity .7s ease,transform .7s ease}.general-theory-section.reveal-visible{opacity:1;transform:translateY(0)}.theory-card{opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease,border-color .3s ease,box-shadow .3s ease}.reveal-visible .theory-stagger-1{animation:cardSlideUp .5s ease-out .15s both}.reveal-visible .theory-stagger-2{animation:cardSlideUp .5s ease-out .3s both}.reveal-visible .theory-stagger-3{animation:cardSlideUp .5s ease-out .45s both}.reveal-visible .theory-stagger-4{animation:cardSlideUp .5s ease-out .6s both}.header-logo{transition:transform .4s cubic-bezier(.4,0,.2,1)}.header-logo:hover{transform:scale(1.05) rotate(-2deg)}.hero-title{animation:fadeIn .6s ease-out .1s both}.hero-description{animation:fadeIn .6s ease-out .3s both}.methods-showcase-card{animation:fadeIn .5s ease-out .2s both}.btn-method:focus-visible,.btn-compare-all:focus-visible,.nav-back-btn:focus-visible,.method-tab:focus-visible,.hamburger-btn:focus-visible{outline:3px solid #60a5fa;outline-offset:2px}@media(max-width:768px){.header-content{gap:1rem}.header-logo{height:60px}.title{font-size:clamp(1.3rem,4vw,1.6rem)}.subtitle{font-size:clamp(.75rem,2vw,.9rem)}.main-content,.header{padding:1rem .75rem}.welcome-hero{padding:1.5rem 1rem;margin-bottom:1rem}.hero-title{font-size:clamp(1.5rem,4vw,2rem)}.methods-grid-direct{grid-template-columns:1fr;gap:1.25rem}.welcome-hero{margin-bottom:2rem}.method-desc{min-height:auto}.compare-card{flex-direction:column;text-align:center;gap:1rem;padding:1.25rem}.btn-compare-all{width:100%}.method-navigation{gap:.75rem;padding:.75rem}.theory-content{grid-template-columns:1fr}.general-theory-section{margin-top:1.5rem;padding:1.5rem}}@media(max-width:480px){.header-content{gap:.75rem}.header-logo{height:50px}.header-text{position:static;margin-left:.5rem}.title{font-size:1.3rem}.subtitle{font-size:.85rem}.welcome-hero{padding:1rem;margin-bottom:1.5rem}.hero-title{font-size:1.4rem}.methods-showcase-card{padding:.75rem 1rem}.method-card-direct{padding:1rem}.method-header{flex-direction:column;align-items:flex-start;gap:.5rem}.compare-card{padding:1rem}.badge{font-size:.65rem;padding:.2rem .5rem}.method-navigation{flex-direction:row;flex-wrap:wrap;align-items:center;gap:.5rem;padding:.6rem .75rem}.nav-back-btn{font-size:.85rem;padding:.5rem 1rem;flex:0 0 auto}.hamburger-btn{display:flex;margin-left:auto}.method-tabs{display:none;flex-direction:column;gap:.4rem;width:100%;padding-top:.5rem;border-top:1px solid #e2e8f0;margin-top:.25rem}.method-tabs.mobile-open{display:flex;animation:slideDown .25s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.method-tab{width:100%;text-align:center;padding:.6rem 1rem;font-size:.88rem}.theory-card,.general-theory-section{padding:1rem}}:root{--color-primary: #3b82f6;--color-primary-dark: #1e3a8a;--color-primary-light: #60a5fa;--color-secondary: #f0f0f0;--color-success: #4caf50;--color-success-light: #e8f5e9;--color-warning: #3b82f6;--color-warning-light: #dbeafe;--color-error: #f44336;--color-info: #2196f3;--bg-white: #ffffff;--bg-light: #f8f9fa;--bg-gray: #e9ecef;--bg-gradient-primary: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);--bg-gradient-light: linear-gradient(135deg, #f0f7ff 0%, #e3f2fd 100%);--text-primary: #333;--text-secondary: #666;--text-light: #999;--text-white: #ffffff;--border-color: #e0e0e0;--border-color-light: #f0f0f0;--border-radius-sm: 6px;--border-radius-md: 8px;--border-radius-lg: 12px;--border-radius-xl: 16px;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 2px 8px rgba(30, 64, 175, .12);--shadow-lg: 0 8px 16px rgba(30, 64, 175, .15);--shadow-xl: 0 12px 32px rgba(30, 64, 175, .2);--shadow-primary: 0 4px 12px rgba(30, 64, 175, .18);--shadow-primary-lg: 0 12px 28px rgba(30, 64, 175, .25);--shadow-hover: 0 8px 20px rgba(30, 64, 175, .22);--shadow-floating: 0 20px 40px rgba(30, 64, 175, .3);--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-base: .3s cubic-bezier(.4, 0, .2, 1);--transition-slow: .5s cubic-bezier(.4, 0, .2, 1);--transition-all: all .3s cubic-bezier(.4, 0, .2, 1);--transition-cubic: all .4s cubic-bezier(.4, 0, .2, 1);--font-family-base: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;--font-family-mono: "Courier New", 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-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--z-dropdown: 10;--z-sticky: 20;--z-modal: 100;--z-tooltip: 200}:root{--card-vertical-gap-desktop: 2rem;--card-vertical-gap-tablet: 1.5rem;--card-vertical-gap-mobile: 1.25rem;--card-padding-desktop: 1.5rem 1.75rem;--card-padding-tablet: 1.125rem 1.25rem;--card-padding-mobile: 1rem 1rem;--card-shadow: 0 4px 12px rgba(59, 130, 246, .1);--card-shadow-hover: 0 8px 20px rgba(59, 130, 246, .15);--card-border: 1px solid rgba(226, 232, 240, .6);--card-border-radius: 10px;--card-max-width: 720px;--card-vertical-gap: var(--card-vertical-gap-desktop);--card-padding: var(--card-padding-desktop)}@media(max-width:1024px){:root{--card-vertical-gap: var(--card-vertical-gap-tablet);--card-padding: var(--card-padding-tablet)}}@media(max-width:767px){:root{--card-vertical-gap: var(--card-vertical-gap-mobile);--card-padding: var(--card-padding-mobile);--card-max-width: 95%}}*{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-text-size-adjust:100%}body{width:100%;min-height:100vh;overflow-x:hidden}.scroll-container{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2%}.table-container{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.mobile-only{display:none}.desktop-only{display:block}@media(max-width:767px){.mobile-only{display:block}.desktop-only{display:none}}@media screen and (-webkit-min-device-pixel-ratio:0){select,textarea,input{font-size:16px!important}}