html{margin:0;padding:0;width:100%;height:100%}body{font-family:'Noto Sans TC',sans-serif;background:linear-gradient(135deg,#f7fafc 0%,#edf2f7 100%);min-height:100vh;padding:15px 0;margin:0;width:100%}.main-container{max-width:1400px;margin:0 auto;padding:0 20px}@keyframes fadeInDown{from{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}.seo-section{background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-radius:20px;box-shadow:0 8px 32px rgba(0,0,0,.1);padding:40px;margin-top:40px;border:1px solid rgba(255,255,255,.3)}.seo-section h2{font-family:'Poppins','Noto Sans TC',sans-serif;font-size:2rem;font-weight:700;color:#2d3748;margin-bottom:20px;padding-bottom:15px;border-bottom:3px solid #667eea}.seo-section h3{font-family:'Poppins','Noto Sans TC',sans-serif;font-size:1.5rem;font-weight:600;color:#4a5568;margin-top:30px;margin-bottom:15px}.seo-section h4{font-size:1.2rem;font-weight:600;color:#667eea;margin-top:20px;margin-bottom:10px}.seo-section p{font-size:1rem;line-height:1.8;color:#4a5568;margin-bottom:15px}.seo-section ul,.seo-section ol{margin-left:25px;margin-bottom:20px}.seo-section li{font-size:1rem;line-height:1.8;color:#4a5568;margin-bottom:10px}.seo-section strong{color:#667eea;font-weight:600}.seo-section a{color:#667eea;text-decoration:none;font-weight:500;transition:color .3s ease}.seo-section a:hover{color:#764ba2;text-decoration:underline}.category-container{max-width:900px;margin:0 auto;padding:2rem 1rem}.category-container h2{font-size:2rem;font-weight:700;color:#2d3748;margin-bottom:.5rem}.category-container .text-muted{color:#718096;font-size:1.1rem;margin-bottom:2rem}.category-card{cursor:pointer;transition:all .3s ease;margin-bottom:1.5rem;min-height:220px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2.5rem;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3);border-radius:20px;box-shadow:0 8px 32px rgba(0,0,0,.1)}.category-card:hover{transform:translateY(-5px);box-shadow:0 12px 40px rgba(102,126,234,.25);background:rgba(255,255,255,1)}.category-card:active{transform:translateY(-2px)}.category-icon{margin-bottom:1.5rem;transition:transform .3s ease}.category-icon i{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:4rem !important}.category-card:hover .category-icon{transform:scale(1.1)}.category-card h3{font-size:1.5rem;font-weight:600;margin-bottom:.75rem;color:#2d3748}.category-desc{color:#718096;font-size:1rem;margin-bottom:0;text-align:center;line-height:1.6}#testCanvas{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999;display:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;margin:0;padding:0;border:none;overflow:hidden}#testCanvas.active{display:block}.pattern-info-overlay{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.6);backdrop-filter:blur(10px);padding:12px 24px;border-radius:20px;color:#fff;font-size:.9rem;text-align:center;pointer-events:none;transition:opacity .3s ease;max-width:90%}.pattern-info-overlay.hidden{opacity:0}.pattern-name{font-size:1.1rem;font-weight:600;margin-bottom:4px}.pattern-hex{font-family:'Courier New',monospace;font-size:.85rem;color:#a0aec0}.pattern-page{font-size:.75rem;color:#cbd5e0;margin-top:4px}.nav-hints{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;transition:opacity .5s ease}.nav-hints.fade-out{opacity:0}.nav-hint{position:absolute;background:rgba(0,0,0,.4);color:#fff;padding:8px 16px;border-radius:8px;font-size:.8rem;backdrop-filter:blur(5px)}.nav-hint-top{top:20px;left:50%;transform:translateX(-50%)}.nav-hint-left{left:20px;top:50%;transform:translateY(-50%)}.nav-hint-right{right:20px;top:50%;transform:translateY(-50%)}.nav-hint i{margin-right:6px}.click-area{position:absolute;cursor:pointer;z-index:10}.click-area-top{top:0;left:0;right:0;height:15vh}.click-area-left{left:0;top:15vh;bottom:0;width:25%}.click-area-right{right:0;top:15vh;bottom:0;width:25%}.gradient-linear{background:linear-gradient(to bottom,var(--grad-from),var(--grad-to))}.gradient-stepped{background:linear-gradient(to bottom,#000 0%,#000 16.66%,#333 16.66%,#333 33.33%,#666 33.33%,#666 50%,#999 50%,#999 66.66%,#ccc 66.66%,#ccc 83.33%,#fff 83.33%,#fff 100%)}.gradient-rgb{background:linear-gradient(to bottom,#f00 0%,#ff0 25%,#0f0 50%,#0ff 75%,#00f 100%)}@media(max-width:991px){.page-header h1{font-size:2.2rem}.page-header .subtitle{font-size:1rem}.seo-section{padding:30px}.seo-section h2{font-size:1.6rem}.seo-section h3{font-size:1.3rem}}@media(max-width:768px){body{padding:10px 0}.main-container{padding:0 15px}.page-header{margin-bottom:25px}.page-header h1{font-size:1.8rem}.page-header .subtitle{font-size:.9rem}.category-container{padding:1rem .5rem}.category-card{min-height:150px;padding:1.5rem;margin-bottom:1rem}.category-icon i{font-size:2.5rem !important}.category-desc{font-size:.85rem}.seo-section{padding:20px;margin-top:30px}.seo-section h2{font-size:1.4rem}.seo-section h3{font-size:1.2rem;margin-top:20px}.seo-section h4{font-size:1.05rem}.seo-section p,.seo-section li{font-size:.95rem}.pattern-info-overlay{bottom:15px;padding:10px 20px;font-size:.85rem}.pattern-name{font-size:1rem}.nav-hint{font-size:.7rem;padding:6px 12px}}@media(max-width:480px){.category-card{min-height:130px;padding:1rem}.category-icon i{font-size:2rem !important}.pattern-info-overlay{bottom:10px;padding:8px 16px;font-size:.8rem}}@media(min-width:1024px){.category-container{padding:3rem 2rem}.category-card{min-height:200px}.click-area-left,.click-area-right{width:30%}}@media(prefers-contrast:high){.pattern-info-overlay{background:rgba(0,0,0,.9);border:2px solid #fff}.nav-hint{background:rgba(0,0,0,.8);border:1px solid #fff}}#testCanvas *{touch-action:none;-webkit-touch-callout:none}.category-card.loading{pointer-events:none;opacity:.6}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.category-card{animation:fadeIn .4s ease-out}.category-card:nth-child(1){animation-delay:.1s}.category-card:nth-child(2){animation-delay:.2s}.category-card:nth-child(3){animation-delay:.3s}