.header{background:var(--background-color);border-bottom:1px solid var(--border-color);position:sticky;top:0;z-index:var(--z-sticky);box-shadow:var(--shadow-sm)}.header-container{max-width:1200px;margin:0 auto;padding:0 1rem;display:flex;align-items:center;justify-content:space-between;height:70px}.logo{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--text-color);font-weight:700;font-size:1.5rem;transition:color var(--transition-fast)}.logo:hover{color:var(--secondary-color)}.logo-icon{font-size:2rem;color:var(--text-color)}.logo-text{font-size:1.5rem;font-weight:700;color:var(--text-color)}.nav{display:flex;align-items:center}.nav-menu{display:flex;list-style:none;gap:2rem;margin:0;padding:0}.nav-item{position:relative;list-style:none}.nav-link{text-decoration:none;color:var(--text-color);font-weight:500;padding:.5rem 0;transition:color var(--transition-fast);position:relative;display:block}.nav-link:hover{color:var(--secondary-color)}.nav-link.active{color:var(--primary-color)}.nav-link.active:after{content:"";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:var(--primary-color);border-radius:1px}@media (max-width: 768px){.header-container{height:60px}.logo-text{font-size:1.25rem}.logo-icon{font-size:1.75rem}.nav-menu{gap:1.5rem}.nav-link{font-size:.95rem}}@media (max-width: 480px){.header-container{height:55px;padding:0 .75rem}.logo-text{font-size:1.1rem}.logo-icon{font-size:1.5rem}.nav-menu{gap:1rem}.nav-link{font-size:.9rem}}.footer{background:#fff;border-top:1px solid var(--border-light);padding:2rem 0;margin-top:auto}.footer-container{max-width:1200px;margin:0 auto;padding:0 1rem}.footer-content{display:flex;flex-direction:column;gap:1.5rem}.footer-logo{display:flex;align-items:center;gap:.75rem}.logo-icon{font-size:1.5rem;color:var(--text-color)}.logo-text{font-size:1.25rem;font-weight:600;color:var(--text-secondary);font-family:var(--font-family)}.footer-copyright{color:var(--text-light);font-size:.9rem;font-family:var(--font-family)}.footer-copyright p{margin:0}@media (max-width: 768px){.footer{padding:1.5rem 0}.footer-content{gap:1rem}.logo-text{font-size:1.1rem}.footer-copyright{font-size:.85rem}}@media (max-width: 480px){.footer{padding:1rem 0}.logo-text{font-size:1rem}.footer-copyright{font-size:.8rem}}.home-container{max-width:1200px;margin:0 auto;padding:0 1rem}.hero-section{background:linear-gradient(135deg,var(--background-secondary) 0%,var(--background-color) 100%);color:var(--text-color);padding:4rem 2rem;border-radius:20px;margin:2rem 0 3rem;text-align:center;position:relative;overflow:hidden}.hero-section:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(0,0,0,0.03)"/><circle cx="75" cy="75" r="1" fill="rgba(0,0,0,0.03)"/><circle cx="50" cy="10" r="0.5" fill="rgba(0,0,0,0.03)"/><circle cx="10" cy="60" r="0.5" fill="rgba(0,0,0,0.03)"/><circle cx="90" cy="40" r="0.5" fill="rgba(0,0,0,0.03)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');opacity:.6}.hero-title{font-size:3rem;font-weight:800;margin-bottom:1rem;color:var(--text-color);display:flex;flex-direction:column;gap:.5rem}.hero-subtitle{font-size:1.5rem;font-weight:400;color:var(--text-secondary)}.hero-description{font-size:1.2rem;max-width:700px;margin:0 auto 2rem;line-height:1.6;color:var(--text-secondary)}.skills-section{background:var(--background-secondary);padding:4rem 2rem;border-radius:20px;margin-bottom:3rem;position:relative;overflow:hidden}.skills-section:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="rgba(0,0,0,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>');opacity:.4}.skills-header{text-align:center;margin-bottom:3rem;position:relative;z-index:1}.skills-title{font-size:2.5rem;color:var(--text-color);margin-bottom:1rem;font-weight:700}.skills-description{font-size:1.1rem;color:var(--text-secondary);max-width:600px;margin:0 auto;line-height:1.6}.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;position:relative;z-index:1}.skill-card{background:#fff;padding:.875rem 1.25rem;border-radius:12px;box-shadow:0 2px 8px #00000014;border:1px solid rgba(0,0,0,.05);display:inline-flex;align-items:center;justify-content:center;gap:.75rem;transition:all .3s ease;text-align:center;width:fit-content;height:fit-content}.skill-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px #0000001f}.skill-icon{font-size:1.25rem;flex-shrink:0;line-height:1}.skill-content h3{color:var(--text-color);margin:0;font-size:.95rem;font-weight:600;white-space:nowrap;line-height:1}.portfolio-sections{margin-bottom:3rem}.portfolio-section{display:grid;grid-template-columns:1fr auto;gap:3rem;align-items:center;background:#fff;padding:3rem 2rem;border-radius:16px;box-shadow:0 4px 20px #00000014;border:1px solid rgba(0,0,0,.05);margin-bottom:2rem}.portfolio-section.reverse{grid-template-columns:auto 1fr}.portfolio-section.reverse .section-content{order:2}.portfolio-section.reverse .section-visual{order:1}.section-content h2{font-size:2rem;color:var(--text-color);margin-bottom:1rem;font-weight:700}.section-description{color:var(--text-secondary);line-height:1.6;margin-bottom:1.5rem;font-size:1.1rem}.section-link{color:var(--primary-color);text-decoration:none;font-weight:600;font-size:1.1rem;transition:all .3s ease;display:inline-block}.section-link:hover{color:var(--secondary-color);transform:translate(5px)}.section-visual{display:flex;align-items:center;justify-content:center}.visual-icon{font-size:6rem;opacity:.8}@media (max-width: 768px){.home-container{padding:0 .5rem}.hero-section{padding:3rem 1rem;margin:1rem 0 2rem}.hero-title{font-size:2.5rem}.hero-subtitle{font-size:1.25rem}.hero-description{font-size:1.1rem}.skills-section{padding:3rem 1rem}.skills-title{font-size:2rem}.skills-description{font-size:1rem}.skills-grid{grid-template-columns:1fr;gap:1.5rem}.skill-card{padding:1.5rem;flex-direction:column;text-align:center}.skill-icon{margin-top:0;margin-bottom:1rem}.portfolio-section{grid-template-columns:1fr;gap:2rem;text-align:center;padding:2rem 1rem}.portfolio-section.reverse{grid-template-columns:1fr}.portfolio-section.reverse .section-content,.portfolio-section.reverse .section-visual{order:unset}.section-content h2{font-size:1.75rem}.visual-icon{font-size:4rem}}@media (max-width: 480px){.hero-title{font-size:2rem}.hero-subtitle{font-size:1.1rem}.hero-description{font-size:1rem}.skills-section{padding:2rem 1rem}.skills-title{font-size:1.75rem}.skills-description{font-size:1rem}.skill-card{padding:1.25rem}.portfolio-section{padding:1.5rem 1rem}.section-content h2{font-size:1.5rem}}.tool-card{background:var(--background-color);border:1px solid var(--border-color);border-radius:16px;padding:1.5rem;text-decoration:none;color:inherit;transition:all .3s ease;display:block;height:100%;position:relative;overflow:hidden}.tool-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--primary-color),var(--secondary-color));transform:scaleX(0);transition:transform .3s ease}.tool-card:hover:before{transform:scaleX(1)}.tool-card:hover{transform:translateY(-8px);box-shadow:0 12px 40px #00000026;border-color:var(--primary-color)}.tool-header{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}.tool-icon{font-size:2.5rem;flex-shrink:0}.tool-name{font-size:1.25rem;font-weight:600;color:var(--text-color);margin:0;line-height:1.2}.tool-description{color:var(--text-secondary);line-height:1.6;margin-bottom:1.5rem;margin-top:0}.tool-tags{display:flex;flex-wrap:wrap;gap:.5rem}.tool-tag{background:var(--background-secondary);color:var(--text-secondary);padding:.25rem .75rem;border-radius:20px;font-size:.875rem;font-weight:500;border:1px solid var(--border-light);transition:all .3s ease}.tool-card:hover .tool-tag{background:var(--background-tertiary);border-color:var(--border-color);color:var(--text-color)}@media (max-width: 768px){.tool-card{padding:1.25rem}.tool-icon{font-size:2rem}.tool-name{font-size:1.1rem}.tool-description{font-size:.95rem}}@media (max-width: 480px){.tool-card{padding:1rem}.tool-header{gap:.75rem}.tool-icon{font-size:1.75rem}.tool-name{font-size:1rem}.tool-description{font-size:.9rem}.tool-tag{font-size:.8rem;padding:.2rem .6rem}}.search-filter-container{margin-bottom:2rem}.search-container{margin-bottom:1.5rem}.search-input-wrapper{position:relative;max-width:500px;margin:0 auto}.search-input{width:100%;padding:.875rem 1rem .875rem 3rem;border:2px solid var(--border-color);border-radius:12px;font-size:1rem;transition:all .3s ease;background:var(--background-color)}.category-filters{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}.filter-btn{background:none;border:none;padding:.75rem 1.5rem;font-size:1rem;font-weight:500;color:var(--text-secondary);cursor:pointer;transition:all .3s ease;border-radius:8px;position:relative;font-family:inherit}.filter-btn:hover{color:var(--text-color);background:var(--background-secondary)}.filter-btn.active{color:var(--primary-color);font-weight:600}.filter-btn.active:after{content:"";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:var(--primary-color);border-radius:1px}@media (max-width: 768px){.search-filter-container{margin-bottom:1.5rem}.search-container{margin-bottom:1rem}.search-input{padding:.75rem 1rem .75rem 2.75rem;font-size:.95rem}.search-icon{font-size:1rem;left:.875rem}.category-filters{gap:.75rem}.filter-btn{padding:.625rem 1.25rem;font-size:.95rem}}@media (max-width: 480px){.search-input{padding:.625rem .875rem .625rem 2.5rem;font-size:.9rem}.search-icon{font-size:.9rem;left:.75rem}.category-filters{gap:.5rem}.filter-btn{padding:.5rem 1rem;font-size:.9rem}}.tools-container{max-width:1200px;margin:0 auto;padding:0 1rem}.hero-section{background:linear-gradient(135deg,var(--background-secondary) 0%,var(--background-color) 100%);padding:4rem 0;margin-bottom:4rem;border-radius:24px;position:relative;overflow:hidden}.hero-section:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(0,0,0,0.03)"/><circle cx="75" cy="75" r="1" fill="rgba(0,0,0,0.03)"/><circle cx="50" cy="10" r="0.5" fill="rgba(0,0,0,0.03)"/><circle cx="10" cy="60" r="0.5" fill="rgba(0,0,0,0.03)"/><circle cx="90" cy="40" r="0.5" fill="rgba(0,0,0,0.03)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');opacity:.6}.hero-content{text-align:center;max-width:800px;margin:0 auto;position:relative;z-index:1}.hero-title{font-size:3.5rem;font-weight:800;margin-bottom:1.5rem;color:var(--text-color);line-height:1.1}.brand-highlight{background:linear-gradient(135deg,var(--primary-color) 0%,var(--secondary-color) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;position:relative}.hero-subtitle{font-size:1.25rem;color:var(--text-secondary);margin-bottom:2.5rem;line-height:1.6;max-width:600px;margin-left:auto;margin-right:auto}.tools-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:2rem;margin-bottom:3rem}.summary-section{background:#fff;padding:3rem 2rem;border-radius:16px;box-shadow:0 4px 20px #00000014;border:1px solid rgba(0,0,0,.05);text-align:center}.summary-section h2{color:var(--text-color);margin-bottom:1rem;font-size:2rem;font-weight:700}.summary-section p{color:var(--text-secondary);font-size:1.1rem;line-height:1.6;max-width:600px;margin:0 auto}@media (max-width: 1024px){.tools-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}}@media (max-width: 768px){.tools-container{padding:0 .5rem}.hero-section{padding:3rem 0;margin-bottom:3rem}.hero-title{font-size:2.5rem}.hero-subtitle{font-size:1.1rem;margin-bottom:2rem}.tools-grid{grid-template-columns:1fr;gap:1.5rem}.summary-section{padding:2rem 1rem}.summary-section h2{font-size:1.75rem}}@media (max-width: 480px){.hero-title{font-size:2rem}.hero-subtitle{font-size:1rem}.summary-section{padding:1.5rem 1rem}.summary-section h2{font-size:1.5rem}}.about-container{max-width:1200px;margin:0 auto;padding:2rem 1rem}.about-header{text-align:center;margin-bottom:4rem;padding:4rem 0;background:linear-gradient(135deg,var(--background-secondary) 0%,var(--background-color) 100%);border-radius:24px;position:relative;overflow:hidden}.about-header:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(0,0,0,0.03)"/><circle cx="75" cy="75" r="1" fill="rgba(0,0,0,0.03)"/><circle cx="50" cy="10" r="0.5" fill="rgba(0,0,0,0.03)"/><circle cx="10" cy="60" r="0.5" fill="rgba(0,0,0,0.03)"/><circle cx="90" cy="40" r="0.5" fill="rgba(0,0,0,0.03)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');opacity:.6}.about-header h1{font-size:3.5rem;font-weight:800;margin-bottom:1.5rem;color:var(--text-color);line-height:1.1;position:relative;z-index:1}.about-subtitle{font-size:1.25rem;color:var(--text-secondary);max-width:600px;margin:0 auto;position:relative;z-index:1;line-height:1.6}.about-content{display:grid;gap:3rem}.about-section{background:#fff;padding:2.5rem;border-radius:16px;box-shadow:0 4px 20px #00000014;border:1px solid rgba(0,0,0,.05);transition:transform .3s ease,box-shadow .3s ease}.about-section:hover{transform:translateY(-4px);box-shadow:0 8px 30px #0000001f}.about-section h2{font-size:2rem;color:var(--primary-color);margin-bottom:1.5rem;position:relative;padding-bottom:.75rem}.about-section h2:after{content:"";position:absolute;bottom:0;left:0;width:60px;height:4px;background:linear-gradient(90deg,var(--primary-color),var(--secondary-color));border-radius:2px}.about-section p{font-size:1.1rem;line-height:1.7;color:#000;margin-bottom:1.5rem;font-weight:500}.about-section p:last-child{margin-bottom:0}.expertise-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin-top:2rem}.expertise-item{background:linear-gradient(135deg,var(--background-secondary) 0%,var(--background-tertiary) 100%);padding:1.5rem;border-radius:12px;border-left:4px solid var(--primary-color);transition:all .3s ease}.expertise-item:hover{transform:translate(8px);background:linear-gradient(135deg,var(--background-tertiary) 0%,var(--border-color) 100%)}.expertise-icon{font-size:2.5rem;display:block;margin-bottom:1rem}.expertise-item h3{font-size:1.25rem;color:var(--primary-color);margin-bottom:.75rem;font-weight:600}.expertise-item p{font-size:1rem;line-height:1.6;color:#000;margin:0;font-weight:500}.philosophy-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin-top:2rem}.philosophy-item{background:#fff;padding:1.5rem;border-radius:12px;border:2px solid transparent;transition:all .3s ease;position:relative;overflow:hidden}.philosophy-item:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--primary-color),var(--secondary-color));transform:scaleX(0);transition:transform .3s ease}.philosophy-item:hover:before{transform:scaleX(1)}.philosophy-item:hover{border-color:var(--primary-color);transform:translateY(-4px);box-shadow:0 8px 25px #0000001a}.philosophy-item h3{font-size:1.25rem;color:var(--primary-color);margin-bottom:.75rem;font-weight:600}.philosophy-item p{font-size:1rem;line-height:1.6;color:#000;margin:0;font-weight:500}.cta-buttons{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin-top:2rem}.cta-buttons .btn{min-width:160px}@media (max-width: 768px){.about-container{padding:1rem}.about-header{padding:3rem 1rem;margin-bottom:2rem;border-radius:16px}.about-header h1{font-size:2.5rem}.about-subtitle{font-size:1.1rem}.about-section{padding:1.5rem}.about-section h2{font-size:1.75rem}.expertise-grid,.philosophy-list{grid-template-columns:1fr}.cta-buttons{flex-direction:column;align-items:center}.cta-buttons .btn{width:100%;max-width:300px}}@media (max-width: 480px){.about-header{padding:2rem 1rem}.about-header h1{font-size:2rem}.about-subtitle{font-size:1rem}.about-section{padding:1rem}.about-section h2{font-size:1.5rem}}.games-container{max-width:1200px;margin:0 auto;padding:0 1rem}.games-hero{background:linear-gradient(135deg,var(--background-secondary) 0%,var(--background-color) 100%);color:var(--text-color);padding:4rem 2rem;border-radius:20px;margin:2rem 0 3rem;text-align:center;position:relative;overflow:hidden}.games-hero:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(0,0,0,0.03)"/><circle cx="75" cy="75" r="1" fill="rgba(0,0,0,0.03)"/><circle cx="50" cy="10" r="0.5" fill="rgba(0,0,0,0.03)"/><circle cx="10" cy="60" r="0.5" fill="rgba(0,0,0,0.03)"/><circle cx="90" cy="40" r="0.5" fill="rgba(0,0,0,0.03)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');opacity:.6}.hero-content{position:relative;z-index:1}.hero-title{font-size:3rem;font-weight:700;margin-bottom:1rem;color:var(--text-color)}.hero-description{font-size:1.2rem;max-width:700px;margin:0 auto;line-height:1.6;color:var(--text-secondary)}.search-section{margin-bottom:3rem;text-align:center}.search-container{position:relative;max-width:500px;margin:0 auto}.search-input{width:100%;padding:.875rem 1rem .875rem 3rem;border:2px solid var(--border-color);border-radius:12px;font-size:1rem;transition:all .3s ease;background:var(--background-color);color:var(--text-color)}.search-input:hover{border-color:var(--border-light)}.search-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #0000001a}.search-input::placeholder{color:var(--text-light)}.search-icon{position:absolute;left:1rem;top:50%;transform:translateY(-50%);font-size:1.1rem;color:var(--text-secondary);pointer-events:none}.games-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:2rem;margin-bottom:3rem}.game-card{background:#fff;border-radius:16px;padding:2rem;box-shadow:0 4px 20px #00000014;border:1px solid rgba(0,0,0,.05);transition:all .3s ease;text-decoration:none;color:inherit;display:block;cursor:pointer}.game-card:hover{transform:translateY(-8px);box-shadow:0 12px 40px #00000026;border-color:var(--primary-color)}.game-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.5rem}.game-icon{font-size:3rem;margin-right:1rem}.game-meta{display:flex;flex-direction:column;gap:.5rem;align-items:flex-end}.game-difficulty,.game-category{padding:.5rem 1rem;border-radius:20px;font-size:.875rem;font-weight:600;text-transform:uppercase;color:#fff}.game-difficulty{background:var(--primary-color)}.game-category{background:var(--secondary-color)}.game-content{text-align:left}.game-title{font-size:1rem;font-weight:700;color:var(--text-color);margin-bottom:1rem;line-height:1.3}.game-description{color:var(--text-secondary);line-height:1.6;margin-bottom:1.5rem;font-size:1rem}.game-features{display:flex;flex-wrap:wrap;gap:.5rem}.game-feature{background:var(--background-secondary);color:var(--text-secondary);padding:.5rem 1rem;border-radius:20px;font-size:.875rem;font-weight:500;border:1px solid var(--border-light)}.no-results{text-align:center;padding:3rem 2rem;background:#fff;border-radius:16px;box-shadow:0 4px 20px #00000014;border:1px solid rgba(0,0,0,.05)}.no-results h3{color:var(--text-color);margin-bottom:1rem;font-size:1.5rem;font-weight:600}.no-results p{color:var(--text-secondary);font-size:1.1rem}@media (max-width: 1024px){.games-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}}@media (max-width: 768px){.games-container{padding:0 .5rem}.games-hero{padding:3rem 1rem;margin:1rem 0 2rem}.hero-title{font-size:2.5rem}.hero-description{font-size:1.1rem}.games-grid{grid-template-columns:1fr;gap:1.5rem}.game-card{padding:1.5rem}.search-section{margin-bottom:2rem}}@media (max-width: 480px){.games-hero{padding:2rem 1rem}.hero-title{font-size:2rem}.hero-description{font-size:1rem}.game-card{padding:1.25rem}.game-title{font-size:1.25rem}.game-description{font-size:.9rem}.game-features{gap:.25rem}.game-feature{padding:.375rem .75rem;font-size:.8rem}}.tool-container{max-width:800px;margin:0 auto;padding:var(--spacing-8) var(--spacing-4)}.tool-header{text-align:center;margin-bottom:var(--spacing-8)}.tool-icon{font-size:var(--font-size-5xl);margin-bottom:var(--spacing-4)}.tool-title{font-size:var(--font-size-4xl);margin-bottom:var(--spacing-4);color:var(--gray-900)}.tool-description{font-size:var(--font-size-lg);color:var(--gray-600);max-width:600px;margin:0 auto}.tool-interface{background-color:var(--white);border-radius:var(--radius-xl);padding:var(--spacing-8);box-shadow:var(--shadow-lg);margin-bottom:var(--spacing-8)}.input-section{margin-bottom:var(--spacing-8)}.input-label{display:block;margin-bottom:var(--spacing-3);font-weight:600;color:var(--gray-700)}.text-input{width:100%;min-height:120px;padding:var(--spacing-4);border:2px solid var(--gray-200);border-radius:var(--radius-lg);font-size:var(--font-size-base);font-family:Monaco,Menlo,Ubuntu Mono,monospace;resize:vertical;transition:all var(--transition-fast);font-family:inherit}.case-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--spacing-4);margin-bottom:var(--spacing-6)}.case-option{display:flex;align-items:center;gap:var(--spacing-3);padding:var(--spacing-3);border:2px solid var(--gray-200);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);background-color:var(--white)}.case-option:hover{border-color:var(--primary-color);background-color:var(--gray-50)}.case-option input[type=radio]{margin:0}.case-option label{cursor:pointer;font-weight:500;flex:1}.action-buttons{display:flex;gap:var(--spacing-4);margin-bottom:var(--spacing-6);flex-wrap:wrap}.output-section{margin-top:var(--spacing-8)}.output-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-4)}.output-label{font-weight:600;color:var(--gray-700)}.copy-button{background-color:var(--gray-100);color:var(--gray-700);border:none;padding:var(--spacing-2) var(--spacing-4);border-radius:var(--radius-md);cursor:pointer;font-size:var(--font-size-sm);transition:all var(--transition-fast);font-family:inherit}.copy-button:hover{background-color:var(--gray-200)}.copy-button.copied{background-color:var(--success-color);color:var(--white)}.text-output{background-color:var(--gray-50);border:2px solid var(--gray-200);border-radius:var(--radius-lg);padding:var(--spacing-4);min-height:120px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;white-space:pre-wrap;word-wrap:break-word;color:var(--gray-800)}.examples-section{background-color:var(--gray-50);border-radius:var(--radius-xl);padding:var(--spacing-6);margin-bottom:var(--spacing-8)}.examples-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--spacing-4);margin-top:var(--spacing-4)}.example-item{background-color:var(--white);padding:var(--spacing-4);border-radius:var(--radius-md);border:1px solid var(--gray-200);cursor:pointer;transition:all var(--transition-fast)}.example-item:hover{border-color:var(--primary-color);box-shadow:var(--shadow-md)}.example-title{font-weight:600;margin-bottom:var(--spacing-2);color:var(--gray-800)}.example-text{font-size:var(--font-size-sm);color:var(--gray-600);font-family:Monaco,Menlo,Ubuntu Mono,monospace}.back-link{display:inline-flex;align-items:center;gap:var(--spacing-2);color:var(--primary-color);text-decoration:none;font-weight:500;margin-bottom:var(--spacing-6);transition:color var(--transition-fast)}.back-link:hover{color:var(--primary-hover)}.stats{display:flex;gap:var(--spacing-6);margin-bottom:var(--spacing-6);flex-wrap:wrap}.stat-item{text-align:center;padding:var(--spacing-3);background-color:var(--gray-100);border-radius:var(--radius-md);min-width:80px}.stat-number{display:block;font-size:var(--font-size-xl);font-weight:700;color:var(--primary-color)}.stat-label{font-size:var(--font-size-sm);color:var(--gray-600);text-transform:uppercase;letter-spacing:.05em}@media (max-width: 768px){.tool-container{padding:var(--spacing-4) var(--spacing-3)}.tool-title{font-size:var(--font-size-3xl)}.case-options{grid-template-columns:1fr}.action-buttons{flex-direction:column}.btn-large{width:100%}.stats{justify-content:center}}@media (max-width: 480px){.tool-title{font-size:var(--font-size-2xl)}.stats{flex-direction:column;gap:var(--spacing-3)}}.input-controls{display:flex;align-items:center;gap:var(--spacing-4)}.indent-controls{display:flex;align-items:center;gap:var(--spacing-2)}.indent-controls span{font-size:var(--font-size-sm);color:var(--gray-600);font-weight:500}.indent-btn{padding:var(--spacing-1) var(--spacing-3);border:2px solid var(--gray-200);border-radius:var(--radius-sm);background-color:var(--white);color:var(--gray-600);font-weight:500;cursor:pointer;transition:all var(--transition-fast);font-family:inherit;font-size:var(--font-size-sm);min-width:32px}.indent-btn:hover{border-color:var(--primary-color);color:var(--primary-color)}.indent-btn.active{background-color:var(--primary-color);border-color:var(--primary-color);color:var(--white)}.json-input{width:100%;min-height:200px;padding:var(--spacing-4);border:2px solid var(--gray-200);border-radius:var(--radius-lg);font-size:var(--font-size-base);font-family:Monaco,Menlo,Ubuntu Mono,monospace;resize:vertical;transition:all var(--transition-fast);background-color:var(--white);line-height:1.5}.json-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #2563eb1a}.json-input.error{border-color:var(--error-color);background-color:#fef2f2}.json-output{background-color:var(--gray-50);border:2px solid var(--gray-200);border-radius:var(--radius-lg);padding:var(--spacing-4);min-height:200px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;white-space:pre-wrap;word-wrap:break-word;color:var(--gray-800);line-height:1.5;overflow-x:auto;max-height:500px;overflow-y:auto}.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--spacing-4);margin-bottom:var(--spacing-6)}.stat-item{text-align:center;padding:var(--spacing-4);background-color:var(--gray-100);border-radius:var(--radius-md);border:1px solid var(--gray-200)}.stat-number{display:block;font-size:var(--font-size-2xl);font-weight:700;color:var(--primary-color);margin-bottom:var(--spacing-1)}@media (max-width: 768px){.input-header{flex-direction:column;align-items:flex-start;gap:var(--spacing-3)}.input-controls{width:100%;justify-content:space-between}.features-grid{grid-template-columns:1fr;gap:var(--spacing-4)}.stats{grid-template-columns:repeat(2,1fr);gap:var(--spacing-3)}.json-input,.json-output{min-height:150px}}@media (max-width: 480px){.stats{grid-template-columns:1fr}.indent-controls{flex-wrap:wrap;gap:var(--spacing-2)}.indent-btn{padding:var(--spacing-2) var(--spacing-4);font-size:var(--font-size-base)}}.color-display{margin-bottom:var(--spacing-8)}.color-preview{width:100%;height:200px;border-radius:var(--radius-xl);position:relative;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lg);border:3px solid var(--white);overflow:hidden}.color-info{background-color:#fffffff2;padding:var(--spacing-6);border-radius:var(--radius-lg);text-align:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--shadow-md)}.color-info h3{margin:0 0 var(--spacing-2) 0;color:var(--gray-800);font-size:var(--font-size-xl)}.hex-value{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:var(--font-size-lg);font-weight:700;color:var(--gray-700);margin:0 0 var(--spacing-1) 0}.contrast-ratio{font-size:var(--font-size-sm);color:var(--gray-600);margin:0}.conversion-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--spacing-6);margin-bottom:var(--spacing-6)}.color-input-section{background-color:var(--white);padding:var(--spacing-6);border-radius:var(--radius-lg);border:2px solid var(--gray-200);box-shadow:var(--shadow-sm)}.input-label{display:block;font-weight:600;color:var(--gray-700);margin-bottom:var(--spacing-3);font-size:var(--font-size-lg)}.input-group{display:flex;gap:var(--spacing-3);margin-bottom:var(--spacing-3)}.color-input{flex:1;padding:var(--spacing-3);border:2px solid var(--gray-200);border-radius:var(--radius-md);font-size:var(--font-size-base);font-family:inherit;transition:all var(--transition-fast);background-color:var(--white)}.color-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #2563eb1a}.hex-input{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-weight:600;text-transform:uppercase}.rgb-inputs,.hsl-inputs,.cmyk-inputs{display:grid;gap:var(--spacing-2);margin-bottom:var(--spacing-3)}.rgb-inputs,.hsl-inputs{grid-template-columns:repeat(3,1fr)}.cmyk-inputs{grid-template-columns:repeat(4,1fr)}.rgb-input,.hsl-input,.cmyk-input{text-align:center;font-weight:500}.copy-btn{padding:var(--spacing-2) var(--spacing-4);background-color:var(--gray-100);border:2px solid var(--gray-200);border-radius:var(--radius-md);color:var(--gray-700);font-weight:500;cursor:pointer;transition:all var(--transition-fast);font-size:var(--font-size-sm);min-width:80px}.copy-btn:hover{background-color:var(--gray-200);border-color:var(--gray-300)}.palette-section{background-color:var(--gray-50);border-radius:var(--radius-xl);padding:var(--spacing-6);margin-bottom:var(--spacing-6)}.palette-section h3{text-align:center;margin-bottom:var(--spacing-6);color:var(--gray-800)}.palette-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--spacing-4);max-width:600px;margin:0 auto}.palette-color{aspect-ratio:1;border-radius:var(--radius-lg);cursor:pointer;position:relative;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);border:3px solid var(--white);transition:all var(--transition-fast);overflow:hidden}.palette-color:hover{transform:scale(1.05);box-shadow:var(--shadow-lg)}.palette-color:focus{outline:none;box-shadow:0 0 0 3px var(--primary-color)}.palette-hex{background-color:#ffffffe6;color:var(--gray-800);padding:var(--spacing-2) var(--spacing-3);border-radius:var(--radius-md);font-size:var(--font-size-xs);font-weight:600;font-family:Monaco,Menlo,Ubuntu Mono,monospace;text-transform:uppercase;opacity:0;transition:opacity var(--transition-fast)}.palette-color:hover .palette-hex,.palette-color:focus .palette-hex{opacity:1}@media (max-width: 768px){.conversion-grid{grid-template-columns:1fr;gap:var(--spacing-4)}.color-preview{height:150px}.color-info{padding:var(--spacing-4)}.color-info h3{font-size:var(--font-size-lg)}.hex-value{font-size:var(--font-size-base)}.rgb-inputs,.hsl-inputs,.cmyk-inputs{grid-template-columns:repeat(auto-fit,minmax(80px,1fr))}.palette-grid{grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:var(--spacing-3)}.action-buttons{flex-direction:column;align-items:center}.btn-large{width:100%;max-width:300px}}@media (max-width: 480px){.color-preview{height:120px}.color-info{padding:var(--spacing-3)}.color-info h3{font-size:var(--font-size-base)}.hex-value{font-size:var(--font-size-sm)}.palette-grid{grid-template-columns:repeat(2,1fr);gap:var(--spacing-2)}.palette-color{aspect-ratio:1}.palette-hex{font-size:var(--font-size-xs);padding:var(--spacing-1) var(--spacing-2)}}.multiple-passwords-section{background-color:var(--white);border-radius:var(--radius-xl);padding:var(--spacing-6);margin-bottom:var(--spacing-6);border:2px solid var(--gray-200);box-shadow:var(--shadow-md)}.close-multiple-btn{background:none;border:none;font-size:var(--font-size-xl);color:var(--gray-500);cursor:pointer;padding:var(--spacing-2);border-radius:var(--radius-full);transition:all var(--transition-fast);width:32px;height:32px;display:flex;align-items:center;justify-content:center}.close-multiple-btn:hover{background-color:var(--gray-100);color:var(--gray-700)}.multiple-passwords-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--spacing-4)}.multiple-password-item{background-color:var(--gray-50);border-radius:var(--radius-lg);padding:var(--spacing-4);border:1px solid var(--gray-200)}.multiple-password-display{display:flex;gap:var(--spacing-3);margin-bottom:var(--spacing-3)}.multiple-password-input{flex:1;padding:var(--spacing-3);border:1px solid var(--gray-200);border-radius:var(--radius-md);font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:var(--font-size-sm);background-color:var(--white);color:var(--gray-700);text-align:center;letter-spacing:1px}.copy-multiple-btn{padding:var(--spacing-2) var(--spacing-4);background-color:var(--primary-color);border:none;border-radius:var(--radius-md);color:var(--white);font-weight:500;cursor:pointer;transition:all var(--transition-fast);font-size:var(--font-size-sm);min-width:60px}.copy-multiple-btn:hover{background-color:var(--primary-hover);transform:translateY(-1px)}.copy-multiple-btn.copied{background-color:var(--success-color)}.multiple-password-strength{display:flex;justify-content:space-between;align-items:center;font-size:var(--font-size-xs)}.strength-label{color:var(--gray-600);font-weight:500}.strength-value{font-weight:600;text-transform:uppercase;letter-spacing:.05em}.password-display{background-color:var(--white);border-radius:var(--radius-xl);padding:var(--spacing-6);margin-bottom:var(--spacing-6);border:2px solid var(--gray-200);box-shadow:var(--shadow-md)}.password-container{display:flex;gap:var(--spacing-4);margin-bottom:var(--spacing-6)}.password-output{flex:1;padding:var(--spacing-4);border:2px solid var(--gray-200);border-radius:var(--radius-lg);font-size:var(--font-size-lg);font-family:Monaco,Menlo,Ubuntu Mono,monospace;background-color:var(--gray-50);color:var(--gray-800);text-align:center;letter-spacing:2px;font-weight:600}.password-output:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #2563eb1a}.copy-password-btn{padding:var(--spacing-4) var(--spacing-6);background-color:var(--primary-color);border:none;border-radius:var(--radius-lg);color:var(--white);font-weight:600;cursor:pointer;transition:all var(--transition-fast);min-width:100px}.copy-password-btn:hover:not(:disabled){background-color:var(--primary-hover);transform:translateY(-1px)}.copy-password-btn:disabled{background-color:var(--gray-300);cursor:not-allowed;transform:none}.copy-password-btn.copied{background-color:var(--success-color)}.strength-indicator{text-align:center}.strength-header{display:flex;align-items:center;justify-content:center;gap:var(--spacing-2);margin-bottom:var(--spacing-3)}.strength-icon{font-size:var(--font-size-xl)}.strength-text{font-size:var(--font-size-lg);font-weight:600;color:var(--gray-800)}.strength-bar{width:100%;height:8px;background-color:var(--gray-200);border-radius:var(--radius-full);overflow:hidden;margin-bottom:var(--spacing-3)}.strength-fill{height:100%;transition:all var(--transition-fast);border-radius:var(--radius-full)}.strength-description{font-size:var(--font-size-sm);color:var(--gray-600);margin:0}.options-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--spacing-6);margin-bottom:var(--spacing-6)}.option-section{background-color:var(--white);padding:var(--spacing-6);border-radius:var(--radius-lg);border:2px solid var(--gray-200);box-shadow:var(--shadow-sm)}.option-section h3{margin:0 0 var(--spacing-4) 0;color:var(--gray-800);font-size:var(--font-size-lg)}.length-control{display:flex;flex-direction:column;gap:var(--spacing-3)}.length-slider{width:100%;height:6px;border-radius:var(--radius-full);background:var(--gray-200);outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.length-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--primary-color);cursor:pointer;border:2px solid var(--white);box-shadow:var(--shadow-md)}.length-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--primary-color);cursor:pointer;border:2px solid var(--white);box-shadow:var(--shadow-md)}.length-value{text-align:center;font-weight:600;color:var(--primary-color);font-size:var(--font-size-lg)}.checkbox-grid{display:flex;flex-direction:column;gap:var(--spacing-3)}.checkbox-item{display:flex;align-items:center;gap:var(--spacing-3);cursor:pointer;padding:var(--spacing-2);border-radius:var(--radius-md);transition:background-color var(--transition-fast)}.checkbox-item:hover{background-color:var(--gray-50)}.checkbox-item input[type=checkbox]{display:none}.checkmark{width:20px;height:20px;border:2px solid var(--gray-300);border-radius:var(--radius-sm);position:relative;transition:all var(--transition-fast);flex-shrink:0}.checkbox-item input[type=checkbox]:checked+.checkmark{background-color:var(--primary-color);border-color:var(--primary-color)}.checkbox-item input[type=checkbox]:checked+.checkmark:after{content:"✓";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--white);font-size:var(--font-size-sm);font-weight:700}.checkbox-item:hover .checkmark{border-color:var(--primary-color)}.password-history{display:flex;flex-direction:column;gap:var(--spacing-4)}.history-password{display:flex;gap:var(--spacing-3);margin-bottom:var(--spacing-3)}.history-password-input{flex:1;padding:var(--spacing-3);border:1px solid var(--gray-200);border-radius:var(--radius-md);font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:var(--font-size-sm);background-color:var(--gray-50);color:var(--gray-700)}.copy-history-btn{padding:var(--spacing-2) var(--spacing-4);background-color:var(--gray-100);border:1px solid var(--gray-200);border-radius:var(--radius-md);color:var(--gray-700);font-weight:500;cursor:pointer;transition:all var(--transition-fast);font-size:var(--font-size-sm)}.copy-history-btn:hover{background-color:var(--gray-200)}.copy-history-btn.copied{background-color:var(--success-color);border-color:var(--success-color);color:var(--white)}.history-meta{display:flex;justify-content:space-between;align-items:center;font-size:var(--font-size-xs);color:var(--gray-500)}.history-strength{font-weight:600;text-transform:uppercase;letter-spacing:.05em}@media (max-width: 768px){.options-grid{grid-template-columns:1fr;gap:var(--spacing-4)}.password-container{flex-direction:column}.copy-password-btn{width:100%}.action-buttons{flex-direction:column;align-items:center}.btn-large{width:100%;max-width:300px}.history-header{flex-direction:column;gap:var(--spacing-3);align-items:flex-start}.clear-history-btn{align-self:flex-end}.multiple-passwords-grid{grid-template-columns:1fr}.section-header{flex-direction:column;gap:var(--spacing-3);align-items:flex-start}.close-multiple-btn{align-self:flex-end}}@media (max-width: 480px){.password-display{padding:var(--spacing-4)}.password-output{font-size:var(--font-size-base);letter-spacing:1px}.strength-header{flex-direction:column;gap:var(--spacing-1)}.history-password{flex-direction:column}.copy-history-btn{width:100%}.history-meta{flex-direction:column;gap:var(--spacing-1);align-items:flex-start}.multiple-password-display{flex-direction:column}.copy-multiple-btn{width:100%}}.input-type-selector{display:flex;gap:var(--spacing-4)}.type-option{display:flex;align-items:center;gap:var(--spacing-2);cursor:pointer;padding:var(--spacing-2) var(--spacing-3);border-radius:var(--radius-md);transition:background-color var(--transition-fast)}.type-option:hover{background-color:var(--gray-50)}.type-option input[type=radio]{display:none}.type-option input[type=radio]:checked+.radio-custom{border-color:var(--primary-color)}.type-option input[type=radio]:checked+.radio-custom:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;background-color:var(--primary-color);border-radius:50%}.base64-input{width:100%;padding:var(--spacing-4);border:2px solid var(--gray-200);border-radius:var(--radius-lg);font-size:var(--font-size-base);font-family:Monaco,Menlo,Ubuntu Mono,monospace;resize:vertical;transition:all var(--transition-fast);background-color:var(--white);line-height:1.5}.base64-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #2563eb1a}.base64-input.error{border-color:var(--error-color);background-color:#fef2f2}.file-upload-area{border:2px dashed var(--gray-300);border-radius:var(--radius-lg);padding:var(--spacing-8);text-align:center;transition:all var(--transition-fast);background-color:var(--gray-50)}.file-upload-area:hover{border-color:var(--primary-color);background-color:var(--gray-100)}.file-input{display:none}.file-upload-label{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-3);cursor:pointer}.upload-icon{font-size:var(--font-size-3xl);color:var(--gray-500)}.upload-text{font-size:var(--font-size-lg);font-weight:600;color:var(--gray-700)}.upload-hint{font-size:var(--font-size-sm);color:var(--gray-500)}.file-info{display:flex;justify-content:center;gap:var(--spacing-4);margin-top:var(--spacing-4);flex-wrap:wrap}.file-name,.file-size{display:flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3);background-color:var(--white);border-radius:var(--radius-md);font-size:var(--font-size-sm);color:var(--gray-700);border:1px solid var(--gray-200)}.output-actions{display:flex;gap:var(--spacing-3)}.copy-btn,.download-btn{padding:var(--spacing-2) var(--spacing-4);border:2px solid var(--gray-200);border-radius:var(--radius-md);background-color:var(--white);color:var(--gray-700);font-weight:500;cursor:pointer;transition:all var(--transition-fast);font-size:var(--font-size-sm);min-width:80px}.copy-btn:hover,.download-btn:hover{border-color:var(--primary-color);color:var(--primary-color)}.download-btn{background-color:var(--primary-color);border-color:var(--primary-color);color:var(--white)}.download-btn:hover{background-color:var(--primary-hover);border-color:var(--primary-hover);color:var(--white)}.base64-output{width:100%;padding:var(--spacing-4);border:2px solid var(--gray-200);border-radius:var(--radius-lg);font-size:var(--font-size-base);font-family:Monaco,Menlo,Ubuntu Mono,monospace;resize:vertical;background-color:var(--gray-50);color:var(--gray-800);line-height:1.5;min-height:120px}.examples-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--spacing-4)}.history-file{font-weight:500}@media (max-width: 768px){.mode-selector{flex-direction:column;align-items:center}.mode-btn{width:100%;max-width:300px}.input-header{flex-direction:column;align-items:flex-start;gap:var(--spacing-3)}.input-type-selector{width:100%;justify-content:space-between}.history-content{grid-template-columns:1fr;gap:var(--spacing-3)}.examples-grid{grid-template-columns:1fr}.action-buttons{flex-direction:column;align-items:center}.btn-large{width:100%;max-width:300px}.output-header{flex-direction:column;align-items:flex-start;gap:var(--spacing-3)}.output-actions{width:100%;justify-content:space-between}}@media (max-width: 480px){.file-upload-area{padding:var(--spacing-4)}.upload-text{font-size:var(--font-size-base)}.upload-hint{font-size:var(--font-size-xs)}.file-info{flex-direction:column;gap:var(--spacing-2)}.history-meta{flex-direction:column;align-items:flex-start;gap:var(--spacing-1)}.output-stats{grid-template-columns:1fr}}.mode-selector{display:flex;gap:var(--spacing-4);margin-bottom:var(--spacing-6);justify-content:center}.mode-btn{padding:var(--spacing-4) var(--spacing-6);border:2px solid var(--gray-200);border-radius:var(--radius-lg);background-color:var(--white);color:var(--gray-600);font-weight:600;cursor:pointer;transition:all var(--transition-fast);font-size:var(--font-size-lg);min-width:200px}.mode-btn:hover{border-color:var(--primary-color);color:var(--primary-color);transform:translateY(-1px)}.mode-btn.active{background-color:var(--primary-color);border-color:var(--primary-color);color:var(--white);box-shadow:var(--shadow-md)}.input-section{background-color:var(--white);border-radius:var(--radius-xl);padding:var(--spacing-6);margin-bottom:var(--spacing-6);border:2px solid var(--gray-200);box-shadow:var(--shadow-md)}.input-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-4);flex-wrap:wrap;gap:var(--spacing-4)}.input-header h3{margin:0;color:var(--gray-800);font-size:var(--font-size-xl)}.encoding-options{display:flex;gap:var(--spacing-4)}.encoding-option{display:flex;align-items:center;gap:var(--spacing-2);cursor:pointer;padding:var(--spacing-2) var(--spacing-3);border-radius:var(--radius-md);transition:background-color var(--transition-fast)}.encoding-option:hover{background-color:var(--gray-50)}.encoding-option input[type=radio]{display:none}.encoding-option input[type=radio]:checked+.radio-custom{border-color:var(--primary-color)}.encoding-option input[type=radio]:checked+.radio-custom:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;background-color:var(--primary-color);border-radius:50%}.mode-description,.encoding-description{display:flex;align-items:center;gap:var(--spacing-2);margin-bottom:var(--spacing-3);padding:var(--spacing-3);background-color:var(--gray-50);border-radius:var(--radius-md);border-left:4px solid var(--primary-color)}.mode-description span:last-child,.encoding-description span:last-child{color:var(--gray-700);font-size:var(--font-size-sm)}.url-input{width:100%;padding:var(--spacing-4);border:2px solid var(--gray-200);border-radius:var(--radius-lg);font-size:var(--font-size-base);font-family:Monaco,Menlo,Ubuntu Mono,monospace;resize:vertical;transition:all var(--transition-fast);background-color:var(--white);line-height:1.5}.url-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #2563eb1a}.error-message{display:flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-3);background-color:#fef2f2;border:1px solid var(--error-color);border-radius:var(--radius-md);color:var(--error-color);font-size:var(--font-size-sm);margin-top:var(--spacing-3)}.error-icon{font-size:var(--font-size-lg)}.output-section{background-color:var(--white);border-radius:var(--radius-xl);padding:var(--spacing-6);margin-bottom:var(--spacing-6);border:2px solid var(--gray-200);box-shadow:var(--shadow-md)}.output-container{display:flex;flex-direction:column;gap:var(--spacing-4)}.url-output{width:100%;padding:var(--spacing-4);border:2px solid var(--gray-200);border-radius:var(--radius-lg);font-size:var(--font-size-base);font-family:Monaco,Menlo,Ubuntu Mono,monospace;resize:vertical;background-color:var(--gray-50);color:var(--gray-800);line-height:1.5;min-height:100px}.output-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--spacing-4)}.stat-item{text-align:center;padding:var(--spacing-3);background-color:var(--gray-100);border-radius:var(--radius-md);border:1px solid var(--gray-200)}.stat-number{display:block;font-size:var(--font-size-lg);font-weight:700;color:var(--primary-color);margin-bottom:var(--spacing-1)}.stat-label{font-size:var(--font-size-xs);color:var(--gray-600);text-transform:uppercase;letter-spacing:.05em;font-weight:500}.url-analysis-section{background-color:var(--white);border-radius:var(--radius-xl);padding:var(--spacing-6);margin-bottom:var(--spacing-6);border:2px solid var(--gray-200);box-shadow:var(--shadow-md)}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-6)}.section-header h3{margin:0;color:var(--gray-800);font-size:var(--font-size-xl)}.toggle-advanced-btn{padding:var(--spacing-2) var(--spacing-4);background-color:var(--gray-100);border:1px solid var(--gray-200);border-radius:var(--radius-md);color:var(--gray-700);font-weight:500;cursor:pointer;transition:all var(--transition-fast);font-size:var(--font-size-sm)}.toggle-advanced-btn:hover{background-color:var(--gray-200);border-color:var(--gray-300)}.url-info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--spacing-4);margin-bottom:var(--spacing-4)}.info-item{display:flex;flex-direction:column;gap:var(--spacing-2)}.info-item label{font-size:var(--font-size-xs);font-weight:600;color:var(--gray-600);text-transform:uppercase;letter-spacing:.05em}.info-value{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:var(--font-size-sm);color:var(--gray-800);background-color:var(--gray-50);padding:var(--spacing-2);border-radius:var(--radius-sm);border:1px solid var(--gray-200);word-break:break-all;line-height:1.3}.advanced-info{border-top:1px solid var(--gray-200);padding-top:var(--spacing-4);display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--spacing-4)}.example-text{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:var(--font-size-xs);color:var(--gray-600);word-break:break-all;line-height:1.4}.conversion-history{display:flex;flex-direction:column;gap:var(--spacing-4)}.history-input,.history-output{display:flex;flex-direction:column;gap:var(--spacing-2)}.history-input label,.history-output label{font-size:var(--font-size-xs);font-weight:600;color:var(--gray-600);text-transform:uppercase;letter-spacing:.05em}.history-type{font-weight:500;text-transform:uppercase;letter-spacing:.05em}@media (max-width: 768px){.mode-selector{flex-direction:column;align-items:center}.mode-btn{width:100%;max-width:300px}.input-header{flex-direction:column;align-items:flex-start;gap:var(--spacing-3)}.encoding-options{width:100%;justify-content:space-between}.history-content{grid-template-columns:1fr;gap:var(--spacing-3)}.examples-grid{grid-template-columns:1fr}.action-buttons{flex-direction:column;align-items:center}.btn-large{width:100%;max-width:300px}.output-header{flex-direction:column;align-items:flex-start;gap:var(--spacing-3)}.url-info-grid,.advanced-info{grid-template-columns:1fr}.section-header{flex-direction:column;gap:var(--spacing-3);align-items:flex-start}}@media (max-width: 480px){.encoding-options{flex-direction:column;gap:var(--spacing-2)}.encoding-option{justify-content:flex-start}.history-meta{flex-direction:column;align-items:flex-start;gap:var(--spacing-1)}.output-stats{grid-template-columns:1fr}.mode-description,.encoding-description{flex-direction:column;text-align:center;gap:var(--spacing-2)}}.diff-options{background-color:var(--white);border-radius:var(--radius-xl);padding:var(--spacing-6);margin-bottom:var(--spacing-6);border:2px solid var(--gray-200);box-shadow:var(--shadow-md)}.option-group{margin-bottom:var(--spacing-6)}.option-group:last-child{margin-bottom:0}.option-label{display:block;font-weight:600;color:var(--gray-800);margin-bottom:var(--spacing-3);font-size:var(--font-size-lg)}.radio-group{display:flex;gap:var(--spacing-4);flex-wrap:wrap}.radio-option{display:flex;align-items:center;gap:var(--spacing-2);cursor:pointer;padding:var(--spacing-3) var(--spacing-4);border-radius:var(--radius-md);transition:background-color var(--transition-fast);border:1px solid var(--gray-200);min-width:150px}.radio-option:hover{background-color:var(--gray-50);border-color:var(--primary-color)}.radio-option input[type=radio]{display:none}.radio-custom{width:18px;height:18px;border:2px solid var(--gray-300);border-radius:50%;position:relative;transition:all var(--transition-fast);flex-shrink:0}.radio-option input[type=radio]:checked+.radio-custom{border-color:var(--primary-color)}.radio-option input[type=radio]:checked+.radio-custom:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;background-color:var(--primary-color);border-radius:50%}.checkbox-group{display:flex;gap:var(--spacing-4);flex-wrap:wrap}.checkbox-option{display:flex;align-items:center;gap:var(--spacing-2);cursor:pointer;padding:var(--spacing-2) var(--spacing-3);border-radius:var(--radius-md);transition:background-color var(--transition-fast)}.checkbox-option:hover{background-color:var(--gray-50)}.checkbox-option input[type=checkbox]{display:none}.checkbox-custom{width:18px;height:18px;border:2px solid var(--gray-300);border-radius:var(--radius-sm);position:relative;transition:all var(--transition-fast);flex-shrink:0}.checkbox-option input[type=checkbox]:checked+.checkbox-custom{border-color:var(--primary-color);background-color:var(--primary-color)}.checkbox-option input[type=checkbox]:checked+.checkbox-custom:after{content:"✓";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--white);font-size:12px;font-weight:700}.mode-description{display:flex;align-items:center;gap:var(--spacing-2);margin-bottom:var(--spacing-6);padding:var(--spacing-3);background-color:var(--gray-50);border-radius:var(--radius-md);border-left:4px solid var(--primary-color)}.description-icon{font-size:var(--font-size-lg);color:var(--primary-color)}.mode-description span:last-child{color:var(--gray-700);font-size:var(--font-size-sm)}.text-inputs{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-6);margin-bottom:var(--spacing-6)}.input-section{background-color:var(--white);border-radius:var(--radius-xl);padding:var(--spacing-6);border:2px solid var(--gray-200);box-shadow:var(--shadow-md)}.input-section h3{margin:0 0 var(--spacing-4) 0;color:var(--gray-800);font-size:var(--font-size-xl)}.text-input{width:100%;padding:var(--spacing-4);border:2px solid var(--gray-200);border-radius:var(--radius-lg);font-size:var(--font-size-base);font-family:Monaco,Menlo,Ubuntu Mono,monospace;resize:vertical;transition:all var(--transition-fast);background-color:var(--white);line-height:1.5;min-height:200px}.text-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #2563eb1a}.stats-section{background-color:var(--white);border-radius:var(--radius-xl);padding:var(--spacing-6);margin-bottom:var(--spacing-6);border:2px solid var(--gray-200);box-shadow:var(--shadow-md)}.stats-section h3{margin:0 0 var(--spacing-4) 0;color:var(--gray-800);font-size:var(--font-size-xl)}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--spacing-4)}.stat-item{display:flex;flex-direction:column;gap:var(--spacing-2)}.stat-item label{font-size:var(--font-size-xs);font-weight:600;color:var(--gray-600);text-transform:uppercase;letter-spacing:.05em}.stat-values{display:flex;flex-direction:column;gap:var(--spacing-1)}.stat-values span{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:var(--font-size-sm);color:var(--gray-800);background-color:var(--gray-50);padding:var(--spacing-2);border-radius:var(--radius-sm);border:1px solid var(--gray-200);text-align:center}.diff-output-section{background-color:var(--white);border-radius:var(--radius-xl);padding:var(--spacing-6);margin-bottom:var(--spacing-6);border:2px solid var(--gray-200);box-shadow:var(--shadow-md)}.output-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-4);flex-wrap:wrap;gap:var(--spacing-4)}.output-header h3{margin:0;color:var(--gray-800);font-size:var(--font-size-xl)}.copy-btn{padding:var(--spacing-2) var(--spacing-4);border:2px solid var(--gray-200);border-radius:var(--radius-md);background-color:var(--white);color:var(--gray-700);font-weight:500;cursor:pointer;transition:all var(--transition-fast);font-size:var(--font-size-sm);min-width:80px}.diff-output-container{background-color:var(--gray-900);border-radius:var(--radius-lg);padding:var(--spacing-4);border:1px solid var(--gray-700);overflow-x:auto}.diff-output{margin:0;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:var(--font-size-sm);line-height:1.6;color:var(--gray-100);white-space:pre-wrap;word-wrap:break-word}.diff-output{color:var(--gray-400)}.diff-output:has(+),.diff-output:contains("+"){color:var(--success-color)}.diff-output:has(-),.diff-output:contains("-"){color:var(--error-color)}.diff-output:contains("[-"){color:var(--error-color)}.diff-output:contains("[+"){color:var(--success-color)}.examples-section{background-color:var(--gray-50);border-radius:var(--radius-xl);padding:var(--spacing-6);margin-bottom:var(--spacing-6)}.examples-section h3{text-align:center;margin-bottom:var(--spacing-4);color:var(--gray-800)}.examples-section p{text-align:center;margin-bottom:var(--spacing-6);color:var(--gray-600)}.examples-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--spacing-4)}.example-item{background-color:var(--white);padding:var(--spacing-4);border-radius:var(--radius-lg);border:1px solid var(--gray-200);cursor:pointer;transition:all var(--transition-fast);box-shadow:var(--shadow-sm)}.example-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--primary-color)}.example-title{font-weight:600;color:var(--gray-800);margin-bottom:var(--spacing-2);font-size:var(--font-size-sm)}.example-mode{font-size:var(--font-size-xs);color:var(--primary-color);font-weight:500;text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--spacing-3)}.example-preview{display:flex;flex-direction:column;gap:var(--spacing-2)}.preview-text1,.preview-text2{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:var(--font-size-xs);color:var(--gray-600);background-color:var(--gray-50);padding:var(--spacing-2);border-radius:var(--radius-sm);border:1px solid var(--gray-200);word-break:break-all;line-height:1.3}.preview-text1:before{content:"Text 1: ";font-weight:600;color:var(--gray-700)}.preview-text2:before{content:"Text 2: ";font-weight:600;color:var(--gray-700)}.diff-history{display:flex;flex-direction:column;gap:var(--spacing-4)}.history-texts{display:flex;flex-direction:column;gap:var(--spacing-3)}.history-text1,.history-text2,.history-result{display:flex;flex-direction:column;gap:var(--spacing-2)}.history-text1 label,.history-text2 label,.history-result label{font-size:var(--font-size-xs);font-weight:600;color:var(--gray-600);text-transform:uppercase;letter-spacing:.05em}.history-text{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:var(--font-size-xs);color:var(--gray-700);background-color:var(--gray-50);padding:var(--spacing-2);border-radius:var(--radius-sm);border:1px solid var(--gray-200);word-break:break-all;line-height:1.3}.history-mode{font-weight:600;text-transform:uppercase;letter-spacing:.05em}.history-stats{font-weight:500;text-transform:uppercase;letter-spacing:.05em}@media (max-width: 768px){.text-inputs{grid-template-columns:1fr;gap:var(--spacing-4)}.radio-group{flex-direction:column;gap:var(--spacing-2)}.radio-option{width:100%;justify-content:flex-start}.checkbox-group{flex-direction:column;gap:var(--spacing-2)}.checkbox-option{justify-content:flex-start}.history-content{grid-template-columns:1fr;gap:var(--spacing-3)}.examples-grid{grid-template-columns:1fr}.action-buttons{flex-direction:column;align-items:center}.btn-large{width:100%;max-width:300px}.output-header{flex-direction:column;align-items:flex-start;gap:var(--spacing-3)}.stats-grid{grid-template-columns:1fr}.history-header{flex-direction:column;gap:var(--spacing-3);align-items:flex-start}}@media (max-width: 480px){.diff-options{padding:var(--spacing-4)}.option-group{margin-bottom:var(--spacing-4)}.radio-option{padding:var(--spacing-2) var(--spacing-3);min-width:auto}.history-meta{flex-direction:column;align-items:flex-start;gap:var(--spacing-1)}.mode-description{flex-direction:column;text-align:center;gap:var(--spacing-2)}.example-preview{gap:var(--spacing-1)}.preview-text1,.preview-text2{font-size:10px;padding:var(--spacing-1)}}.calculator-container{background-color:var(--white);border-radius:var(--radius-xl);padding:var(--spacing-6);margin-bottom:var(--spacing-6);border:2px solid var(--gray-200);box-shadow:var(--shadow-md);max-width:600px;margin-left:auto;margin-right:auto}.calculator-display{background-color:var(--gray-900);border-radius:var(--radius-lg);padding:var(--spacing-4);margin-bottom:var(--spacing-6);border:1px solid var(--gray-700);color:var(--white);font-family:Monaco,Menlo,Ubuntu Mono,monospace}.display-expression{min-height:24px;margin-bottom:var(--spacing-2);font-size:var(--font-size-sm);color:var(--gray-400)}.expression-text{color:var(--primary-color)}.display-result{font-size:var(--font-size-2xl);font-weight:700;text-align:right;margin-bottom:var(--spacing-2);word-break:break-all;line-height:1.2}.display-info{display:flex;justify-content:space-between;align-items:center;font-size:var(--font-size-xs);color:var(--gray-400)}.angle-mode{background-color:var(--primary-color);color:var(--white);padding:var(--spacing-1) var(--spacing-2);border-radius:var(--radius-sm);font-weight:600;text-transform:uppercase;letter-spacing:.05em}.last-result{color:var(--gray-300)}.calculator-controls{display:flex;flex-direction:column;gap:var(--spacing-2)}.control-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--spacing-2)}.control-row:last-child{grid-template-columns:1fr}.calc-btn{padding:var(--spacing-3) var(--spacing-2);border:2px solid var(--gray-200);border-radius:var(--radius-md);font-weight:600;cursor:pointer;transition:all var(--transition-fast);font-size:var(--font-size-sm);min-height:50px;display:flex;align-items:center;justify-content:center;text-align:center}.calc-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}.calc-btn:active{transform:translateY(0)}.number-btn{background-color:var(--white);color:var(--gray-800);font-size:var(--font-size-lg)}.number-btn:hover{background-color:var(--gray-50);border-color:var(--primary-color)}.operator-btn{background-color:var(--primary-color);color:var(--white);border-color:var(--primary-color);font-size:var(--font-size-lg)}.operator-btn:hover{background-color:#2563eb;border-color:#2563eb}.function-btn{background-color:var(--gray-100);color:var(--gray-700);font-size:var(--font-size-xs);font-weight:500}.function-btn:hover{background-color:var(--gray-200);border-color:var(--primary-color);color:var(--primary-color)}.clear-btn{background-color:var(--error-color);color:var(--white);border-color:var(--error-color)}.clear-btn:hover{background-color:#dc2626;border-color:#dc2626}.equals-btn{background-color:var(--success-color);color:var(--white);border-color:var(--success-color);font-size:var(--font-size-xl);font-weight:700;min-height:60px}.equals-btn:hover{background-color:#16a34a;border-color:#16a34a}.memory-btn{background-color:var(--gray-200);color:var(--gray-700);font-size:var(--font-size-xs);font-weight:500}.memory-btn:hover{background-color:var(--gray-300);border-color:var(--primary-color);color:var(--primary-color)}.memory-display{display:flex;justify-content:space-between;align-items:center;background-color:var(--gray-50);border-radius:var(--radius-lg);padding:var(--spacing-3);border:1px solid var(--gray-200);margin-top:var(--spacing-4)}.memory-label{font-weight:600;color:var(--gray-700);font-size:var(--font-size-sm)}.memory-value{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-weight:600;color:var(--primary-color);font-size:var(--font-size-sm)}.memory-clear-btn{padding:var(--spacing-1) var(--spacing-2);background-color:var(--error-color);border:none;border-radius:var(--radius-sm);color:var(--white);font-weight:500;cursor:pointer;transition:all var(--transition-fast);font-size:var(--font-size-xs)}.memory-clear-btn:hover{background-color:#dc2626;transform:translateY(-1px)}.advanced-info-section{background-color:var(--white);border-radius:var(--radius-xl);padding:var(--spacing-6);margin-bottom:var(--spacing-6);border:2px solid var(--gray-200);box-shadow:var(--shadow-md)}.advanced-info-section h3{margin:0 0 var(--spacing-6) 0;color:var(--gray-800);font-size:var(--font-size-xl);text-align:center}.advanced-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--spacing-4)}.advanced-item{background-color:var(--gray-50);padding:var(--spacing-4);border-radius:var(--radius-lg);border:1px solid var(--gray-200);text-align:center}.advanced-item h4{margin:0 0 var(--spacing-2) 0;color:var(--gray-800);font-size:var(--font-size-lg)}.advanced-item p{color:var(--gray-600);margin:0;font-size:var(--font-size-sm);line-height:1.4}.history-section{background-color:var(--gray-50);border-radius:var(--radius-xl);padding:var(--spacing-6);margin-bottom:var(--spacing-6)}.history-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-6)}.history-header h3{margin:0;color:var(--gray-800)}.clear-history-btn{padding:var(--spacing-2) var(--spacing-4);background-color:var(--error-color);border:none;border-radius:var(--radius-md);color:var(--white);font-weight:500;cursor:pointer;transition:all var(--transition-fast)}.clear-history-btn:hover{background-color:#dc2626;transform:translateY(-1px)}.calculation-history{display:flex;flex-direction:column;gap:var(--spacing-4)}.history-item{background-color:var(--white);border-radius:var(--radius-lg);padding:var(--spacing-4);border:1px solid var(--gray-200);box-shadow:var(--shadow-sm)}.history-content{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-4);margin-bottom:var(--spacing-3)}.history-expression,.history-result{display:flex;flex-direction:column;gap:var(--spacing-2)}.history-expression label,.history-result label{font-size:var(--font-size-xs);font-weight:600;color:var(--gray-600);text-transform:uppercase;letter-spacing:.05em}.history-text{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:var(--font-size-sm);color:var(--gray-700);background-color:var(--gray-50);padding:var(--spacing-2);border-radius:var(--radius-sm);border:1px solid var(--gray-200);word-break:break-all;line-height:1.3}.history-meta{display:flex;justify-content:space-between;align-items:center;font-size:var(--font-size-xs);color:var(--gray-500);flex-wrap:wrap;gap:var(--spacing-2)}.history-time{font-weight:500}.load-result-btn{padding:var(--spacing-1) var(--spacing-3);background-color:var(--primary-color);border:none;border-radius:var(--radius-sm);color:var(--white);font-weight:500;cursor:pointer;transition:all var(--transition-fast);font-size:var(--font-size-xs)}.load-result-btn:hover{background-color:#2563eb;transform:translateY(-1px)}.copy-btn{padding:var(--spacing-1) var(--spacing-3);border:2px solid var(--gray-200);border-radius:var(--radius-sm);background-color:var(--white);color:var(--gray-700);font-weight:500;cursor:pointer;transition:all var(--transition-fast);font-size:var(--font-size-xs);min-width:60px}.copy-btn:hover{border-color:var(--primary-color);color:var(--primary-color)}.copy-btn.copied{background-color:var(--success-color);border-color:var(--success-color);color:var(--white)}.action-buttons{display:flex;gap:var(--spacing-4);justify-content:center;margin-bottom:var(--spacing-6);flex-wrap:wrap}.btn-large{padding:var(--spacing-4) var(--spacing-6);font-size:var(--font-size-lg);font-weight:600}.features-section{background-color:var(--gray-50);border-radius:var(--radius-xl);padding:var(--spacing-6);margin-bottom:var(--spacing-8)}.features-section h2{text-align:center;margin-bottom:var(--spacing-6)}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--spacing-6)}.feature-item{background-color:var(--white);padding:var(--spacing-6);border-radius:var(--radius-lg);border:1px solid var(--gray-200);text-align:center;box-shadow:var(--shadow-sm);transition:all var(--transition-fast)}.feature-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.feature-icon{font-size:var(--font-size-3xl);margin-bottom:var(--spacing-3);display:block}.feature-item h3{margin-bottom:var(--spacing-3);color:var(--gray-800)}.feature-item p{color:var(--gray-600);margin-bottom:0;font-size:var(--font-size-sm)}@media (max-width: 768px){.calculator-container{padding:var(--spacing-4);margin:0 var(--spacing-4) var(--spacing-6) var(--spacing-4)}.control-row{gap:var(--spacing-1)}.calc-btn{padding:var(--spacing-2) var(--spacing-1);min-height:45px;font-size:var(--font-size-xs)}.display-result{font-size:var(--font-size-xl)}.history-content{grid-template-columns:1fr;gap:var(--spacing-3)}.action-buttons{flex-direction:column;align-items:center}.btn-large{width:100%;max-width:300px}.advanced-grid{grid-template-columns:1fr}.history-header{flex-direction:column;gap:var(--spacing-3);align-items:flex-start}.memory-display{flex-direction:column;gap:var(--spacing-2);text-align:center}}@media (max-width: 480px){.calculator-container{padding:var(--spacing-3);margin:0 var(--spacing-2) var(--spacing-6) var(--spacing-2)}.calc-btn{min-height:40px;font-size:10px}.display-result{font-size:var(--font-size-lg)}.history-meta{flex-direction:column;align-items:flex-start;gap:var(--spacing-1)}.advanced-item{padding:var(--spacing-3)}.advanced-item h4{font-size:var(--font-size-base)}.advanced-item p{font-size:12px}}.calc-btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.calc-btn:focus{outline:none;box-shadow:0 0 0 3px #2563eb4d}@keyframes buttonPress{0%{transform:scale(1)}50%{transform:scale(.95)}to{transform:scale(1)}}.calc-btn:active{animation:buttonPress .1s ease-in-out}.calc-btn:contains("π"),.calc-btn:contains("e"),.calc-btn:contains("√"),.calc-btn:contains("x²"),.calc-btn:contains("x³"),.calc-btn:contains("eˣ"),.calc-btn:contains("xʸ"){font-weight:700}.memory-btn:contains("MS"){background-color:var(--success-color);color:var(--white);border-color:var(--success-color)}.memory-btn:contains("MR"){background-color:var(--primary-color);color:var(--white);border-color:var(--primary-color)}.memory-btn:contains("M+"){background-color:var(--success-color);color:var(--white);border-color:var(--success-color)}.memory-btn:contains("M-"){background-color:var(--warning-color);color:var(--white);border-color:var(--warning-color)}.youtube-converter-container{max-width:1200px;margin:0 auto;padding:2rem 1rem}.tool-header{text-align:center;margin-bottom:3rem}.tool-icon{font-size:4rem;margin-bottom:1rem}.tool-title{font-size:2.5rem;color:var(--text-color);margin-bottom:1rem;font-weight:700}.tool-description{font-size:1.1rem;color:var(--text-secondary);max-width:700px;margin:0 auto;line-height:1.6}.converter-main{display:grid;gap:3rem;margin-bottom:3rem}.input-section{background:#fff;padding:2.5rem;border-radius:16px;box-shadow:0 4px 20px #00000014;border:1px solid rgba(0,0,0,.05)}.url-input-group{margin-bottom:2rem}.url-input-group label{display:block;font-weight:600;color:var(--text-color);margin-bottom:.75rem;font-size:1.1rem}.url-input-wrapper{display:flex;gap:1rem;align-items:center}.url-input{flex:1;padding:1rem;border:2px solid var(--border-color);border-radius:8px;font-size:1rem;transition:all .3s ease;background:#fff}.url-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #0000001a}.url-input:hover{border-color:var(--border-light)}.load-example-btn{padding:1rem 1.5rem;background:var(--background-secondary);border:1px solid var(--border-color);border-radius:8px;color:var(--text-secondary);font-weight:500;cursor:pointer;transition:all .3s ease;white-space:nowrap}.load-example-btn:hover{background:var(--background-tertiary);color:var(--text-color)}.format-options{display:grid;grid-template-columns:1fr auto;gap:2rem;margin-bottom:2rem}.format-group label,.quality-group label{display:block;font-weight:600;color:var(--text-color);margin-bottom:.75rem;font-size:1rem}.format-buttons{display:flex;gap:.5rem;flex-wrap:wrap}.format-btn{padding:.75rem 1.5rem;background:var(--background-secondary);border:2px solid transparent;border-radius:8px;color:var(--text-secondary);font-weight:500;cursor:pointer;transition:all .3s ease;font-size:.95rem}.format-btn:hover{background:var(--background-tertiary);color:var(--text-color)}.format-btn.active{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.quality-select{padding:.75rem 1rem;border:2px solid var(--border-color);border-radius:8px;font-size:1rem;background:#fff;color:var(--text-color);cursor:pointer;transition:all .3s ease}.quality-select:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #0000001a}.format-info{background:var(--background-secondary);padding:1.5rem;border-radius:12px;margin-bottom:2rem;border:1px solid var(--border-light)}.format-info h4{color:var(--text-color);margin-bottom:.75rem;font-size:1.1rem}.format-info p{color:var(--text-secondary);margin-bottom:.5rem;font-size:.95rem}.format-info p:last-child{margin-bottom:0}.convert-btn{width:100%;padding:1.25rem;background:var(--primary-color);color:#fff;border:none;border-radius:12px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:.75rem}.convert-btn:hover:not(:disabled){background:var(--secondary-color);transform:translateY(-2px);box-shadow:0 8px 25px #00000026}.convert-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.spinner{width:20px;height:20px;border:2px solid rgba(255,255,255,.3);border-top:2px solid white;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error-message{display:flex;align-items:center;gap:.75rem;background:#fef2f2;color:#dc2626;padding:1rem;border-radius:8px;margin-top:1rem;border:1px solid #fecaca}.error-icon{font-size:1.25rem}.download-success{display:flex;align-items:flex-start;gap:1rem;background:#f0fdf4;color:#166534;padding:1.5rem;border-radius:12px;margin-top:1.5rem;border:1px solid #bbf7d0;animation:slideIn .3s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.download-icon{font-size:2rem;flex-shrink:0}.download-content h4{margin:0 0 .5rem;font-size:1.25rem;color:#166534}.download-content p{margin:0 0 1rem;color:#166534;font-size:1rem}.download-details{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}.download-details span{font-size:.95rem;color:#166534}.download-again-btn{padding:.75rem 1.5rem;background:#16a34a;color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:.95rem}.download-again-btn:hover{background:#15803d;transform:translateY(-2px);box-shadow:0 4px 12px #16a34a4d}.features-section{background:#fff;padding:2.5rem;border-radius:16px;box-shadow:0 4px 20px #00000014;border:1px solid rgba(0,0,0,.05)}.features-section h3{color:var(--text-color);margin-bottom:2rem;font-size:1.75rem;text-align:center}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem}.feature-item{text-align:center;padding:1.5rem;background:var(--background-secondary);border-radius:12px;border:1px solid var(--border-light);transition:all .3s ease}.feature-item:hover{transform:translateY(-4px);box-shadow:0 8px 25px #0000001a}.feature-icon{font-size:2.5rem;display:block;margin-bottom:1rem}.feature-item h4{color:var(--text-color);margin-bottom:.75rem;font-size:1.1rem}.feature-item p{color:var(--text-secondary);font-size:.95rem;line-height:1.5;margin:0}.history-section{background:#fff;padding:2.5rem;border-radius:16px;box-shadow:0 4px 20px #00000014;border:1px solid rgba(0,0,0,.05);margin-bottom:3rem}.history-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;flex-wrap:wrap;gap:1rem}.history-header h3{color:var(--text-color);font-size:1.75rem;margin:0}.history-actions{display:flex;gap:1rem}.toggle-history-btn,.clear-history-btn{padding:.75rem 1.5rem;border:2px solid var(--border-color);border-radius:8px;background:#fff;color:var(--text-color);font-weight:500;cursor:pointer;transition:all .3s ease}.toggle-history-btn:hover,.clear-history-btn:hover{border-color:var(--primary-color);color:var(--primary-color)}.clear-history-btn{color:#dc2626;border-color:#fecaca}.clear-history-btn:hover{background:#fef2f2;border-color:#dc2626}.history-list{display:grid;gap:1rem}.history-item{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center;padding:1rem;background:var(--background-secondary);border-radius:12px;border:1px solid var(--border-light)}.history-thumbnail img{width:120px;height:68px;object-fit:cover;border-radius:8px}.history-details{display:flex;flex-direction:column;gap:.5rem}.history-url{font-weight:500;color:var(--text-color);word-break:break-all}.history-meta{display:flex;gap:1rem;flex-wrap:wrap}.history-format,.history-quality,.history-status{padding:.25rem .75rem;border-radius:20px;font-size:.875rem;font-weight:500}.history-format{background:var(--primary-color);color:#fff}.history-quality{background:var(--background-tertiary);color:var(--text-secondary)}.history-status.success{background:#dcfce7;color:#166534}.history-timestamp{font-size:.875rem;color:var(--text-light)}.history-filename{font-size:.875rem;color:var(--text-secondary);background:var(--background-tertiary);padding:.25rem .5rem;border-radius:6px;display:inline-block}.history-actions{display:flex;flex-direction:column;gap:.5rem}.copy-url-btn,.download-again-btn{padding:.5rem 1rem;background:var(--background-tertiary);border:1px solid var(--border-color);border-radius:6px;color:var(--text-secondary);font-size:.875rem;cursor:pointer;transition:all .3s ease;white-space:nowrap}.copy-url-btn:hover{background:var(--border-color);color:var(--text-color)}.download-again-btn{background:#16a34a;color:#fff;border-color:#16a34a}.download-again-btn:hover{background:#15803d;border-color:#15803d}.empty-history{text-align:center;padding:3rem 1rem;color:var(--text-secondary)}.empty-icon{font-size:3rem;display:block;margin-bottom:1rem;opacity:.5}.info-section{background:#fff;padding:2.5rem;border-radius:16px;box-shadow:0 4px 20px #00000014;border:1px solid rgba(0,0,0,.05)}.info-section h3{color:var(--text-color);margin-bottom:2rem;font-size:1.75rem;text-align:center}.steps-list{display:grid;gap:2rem}.step-item{display:flex;gap:1.5rem;align-items:flex-start}.step-number{width:40px;height:40px;background:var(--primary-color);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.1rem;flex-shrink:0}.step-content h4{color:var(--text-color);margin-bottom:.5rem;font-size:1.1rem}.step-content p{color:var(--text-secondary);margin:0;line-height:1.6}@media (max-width: 768px){.youtube-converter-container{padding:1rem}.tool-title{font-size:2rem}.input-section,.features-section,.history-section,.info-section{padding:1.5rem}.format-options{grid-template-columns:1fr;gap:1.5rem}.url-input-wrapper{flex-direction:column;align-items:stretch}.load-example-btn{align-self:stretch}.history-item{grid-template-columns:1fr;text-align:center}.history-thumbnail img{width:100%;max-width:200px;height:auto}.history-meta{justify-content:center}.history-actions{flex-direction:row;justify-content:center}.step-item{flex-direction:column;text-align:center;gap:1rem}.download-success{flex-direction:column;text-align:center}.download-details{align-items:center}}@media (max-width: 480px){.tool-title{font-size:1.75rem}.tool-description{font-size:1rem}.input-section,.features-section,.history-section,.info-section{padding:1rem}.format-buttons{flex-direction:column}.format-btn{width:100%}.features-grid{grid-template-columns:1fr}.download-success{padding:1rem}.history-actions{flex-direction:column;width:100%}.copy-url-btn,.download-again-btn{width:100%}}.wordle-finder{max-width:900px;margin:0 auto;padding:2rem;background:#fff;border-radius:16px;box-shadow:0 4px 20px #00000014;border:1px solid rgba(0,0,0,.05)}.wordle-finder .tool-header{text-align:center;margin-bottom:2rem}.wordle-finder .tool-icon{font-size:3rem;margin-bottom:1rem}.wordle-finder .tool-title{font-size:2.5rem;font-weight:800;color:var(--text-color);margin-bottom:1rem;letter-spacing:.08em}.wordle-finder .tool-description{font-size:1.1rem;color:var(--text-secondary);line-height:1.6;max-width:600px;margin:0 auto}.finder-container{display:flex;flex-direction:column;gap:2rem}.section{background:var(--background-secondary);padding:1.5rem;border-radius:12px;border:1px solid var(--border-light)}.section h3{font-size:1.25rem;font-weight:700;color:var(--text-color);margin-bottom:.5rem}.section-description{color:var(--text-light);margin-bottom:1rem;font-size:.9rem}.known-letters,.included-letters{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}.letter-input{width:60px;height:60px;border:2px solid var(--border-color);border-radius:8px;text-align:center;font-size:1.5rem;font-weight:700;text-transform:uppercase;background:#fff;color:var(--text-color);transition:all .2s ease}.letter-input.included{border-color:#f59e0b;background:#fef3c7}.letter-input.included:focus{border-color:#f59e0b;box-shadow:0 0 0 3px #f59e0b1a}.letter-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #0000001a}.letter-input::placeholder{color:var(--text-light);font-weight:400}.text-input{width:100%;padding:.75rem 1rem;border:2px solid var(--border-color);border-radius:8px;font-size:1rem;background:#fff;color:var(--text-color);transition:all .2s ease}.text-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #0000001a}.text-input::placeholder{color:var(--text-light)}.controls{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.clear-btn,.advanced-btn{padding:.75rem 1.5rem;border:2px solid var(--border-color);background:#fff;color:var(--text-color);border-radius:8px;cursor:pointer;font-weight:600;font-size:.9rem;transition:all .2s ease}.clear-btn:hover,.advanced-btn:hover{background:var(--background-secondary);border-color:var(--primary-color);transform:translateY(-1px)}.clear-btn{background:#f8f9fa;border-color:#dee2e6}.clear-btn:hover{background:#e9ecef;border-color:#adb5bd}.results-section{background:var(--background-secondary);padding:1.5rem;border-radius:12px;border:1px solid var(--border-light)}.results-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;flex-wrap:wrap;gap:1rem}.results-header h3{margin:0;color:var(--text-color)}.copy-btn{padding:.5rem 1rem;border:2px solid var(--primary-color);background:var(--primary-color);color:#fff;border-radius:6px;cursor:pointer;font-weight:600;font-size:.9rem;transition:all .2s ease}.copy-btn:hover{background:var(--primary-color-dark);border-color:var(--primary-color-dark);transform:translateY(-1px)}.results-container{max-height:400px;overflow-y:auto}.results-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.5rem;margin-bottom:1rem}.result-word{background:#fff;padding:.5rem;border:1px solid var(--border-light);border-radius:6px;text-align:center;font-weight:600;color:var(--text-color);font-size:.9rem;transition:all .2s ease}.result-word:hover{background:var(--background-tertiary);transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}.results-note{text-align:center;color:var(--text-light);font-size:.9rem;font-style:italic;margin:0}.no-results{text-align:center;color:var(--text-light);padding:2rem}.no-results p{margin:.5rem 0}.advanced-section{background:var(--background-secondary);padding:1.5rem;border-radius:12px;border:1px solid var(--border-light)}.letter-frequency{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:.5rem;margin-top:1rem}.frequency-item{background:#fff;padding:.75rem;border:1px solid var(--border-light);border-radius:6px;text-align:center;display:flex;flex-direction:column;gap:.25rem}.frequency-item .letter{font-weight:700;font-size:1.1rem;color:var(--text-color)}.frequency-item .count{font-size:.8rem;color:var(--text-light);background:var(--background-tertiary);padding:.25rem .5rem;border-radius:4px}@media (max-width: 768px){.wordle-finder{padding:1rem}.known-letters{gap:.25rem}.letter-input{width:50px;height:50px;font-size:1.25rem}.results-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}.letter-frequency{grid-template-columns:repeat(auto-fill,minmax(70px,1fr))}.controls{flex-direction:column;align-items:center}.results-header{flex-direction:column;align-items:stretch;text-align:center}}.sudoku-solver-grid{display:inline-block;margin:0 auto var(--spacing-6);background:#fff;padding:2rem;border-radius:16px;box-shadow:0 4px 20px #00000014;border:1px solid rgba(0,0,0,.05);border:3px solid var(--text-color)}.solver-row{display:flex}.solver-cell{width:50px;height:50px;text-align:center;font-size:1.25rem;border:1px solid var(--border-color);background:#fff;box-sizing:border-box;outline:none;border-radius:0}.solver-cell:focus{border-color:var(--primary-color);box-shadow:0 0 0 2px #0000001a}.solver-row:nth-child(3n) .solver-cell{border-bottom:3px solid var(--text-color)}.solver-row:last-child .solver-cell{border-bottom:none}.solver-cell:nth-child(3n){border-right:3px solid var(--text-color)}.solver-row .solver-cell:last-child{border-right:none}.solver-controls{display:flex;gap:var(--spacing-3);flex-wrap:wrap;justify-content:center;margin:var(--spacing-4) 0}.paste-section{margin-top:var(--spacing-4)}.solver-message{margin-top:var(--spacing-4);text-align:center;color:var(--text-secondary)}.solver-message.success{font-weight:600}@media (max-width: 480px){.solver-cell{width:40px;height:40px}}.tic-tac-toe{max-width:1200px;margin:0 auto;padding:2rem;font-family:var(--font-family)}.game-header{text-align:center;margin-bottom:3rem}.game-title{font-size:3rem;color:var(--text-color);margin-bottom:1rem;font-weight:700}.game-description{font-size:1.2rem;color:var(--text-secondary);max-width:600px;margin:0 auto;line-height:1.6}.game-container{display:grid;grid-template-columns:1fr 350px;gap:3rem;margin-bottom:3rem}.game-board{display:flex;flex-direction:column;align-items:center;gap:2rem}.status-message{font-size:1.5rem;font-weight:600;color:var(--text-color);text-align:center;padding:1rem 2rem;background:#fff;border-radius:12px;box-shadow:0 4px 20px #00000014;border:1px solid rgba(0,0,0,.05);min-width:300px}.board{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;background:var(--border-color);padding:8px;border-radius:16px;box-shadow:0 8px 32px #0000001a}.square{width:100px;height:100px;background:#fff;border:none;border-radius:12px;font-size:3rem;font-weight:700;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;color:var(--text-color)}.square:hover:not(:disabled){background:var(--background-secondary);transform:scale(1.05);box-shadow:0 4px 16px #00000026}.square:disabled{cursor:default}.x-square{color:var(--primary-color)}.o-square{color:var(--secondary-color)}.game-controls{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}.control-btn{padding:.875rem 1.5rem;border:none;border-radius:8px;font-weight:600;font-size:1rem;cursor:pointer;transition:all .3s ease;min-width:120px}.control-btn.primary{background:var(--primary-color);color:#fff}.control-btn.primary:hover{background:var(--secondary-color);transform:translateY(-2px);box-shadow:0 4px 16px #0003}.control-btn.secondary{background:transparent;color:var(--primary-color);border:2px solid var(--primary-color)}.control-btn.secondary:hover{background:var(--primary-color);color:#fff;transform:translateY(-2px)}.game-sidebar{display:flex;flex-direction:column;gap:2rem}.game-info{background:#fff;padding:1.5rem;border-radius:12px;box-shadow:0 4px 20px #00000014;border:1px solid rgba(0,0,0,.05)}.game-info h3{color:var(--text-color);margin-bottom:1.5rem;font-size:1.25rem;font-weight:600}.info-item{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0;border-bottom:1px solid var(--border-light)}.info-item:last-child{border-bottom:none}.info-label{color:var(--text-secondary);font-weight:500}.info-value{font-weight:600;color:var(--text-color)}.x-player{color:var(--primary-color)}.o-player{color:var(--secondary-color)}.game-over{color:var(--text-secondary)}.game-active{color:var(--primary-color)}.game-history{background:#fff;padding:1.5rem;border-radius:12px;box-shadow:0 4px 20px #00000014;border:1px solid rgba(0,0,0,.05)}.history-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.history-header h3{color:var(--text-color);font-size:1.25rem;font-weight:600;margin:0}.clear-history-btn{background:transparent;color:var(--text-light);border:1px solid var(--border-light);padding:.5rem 1rem;border-radius:6px;font-size:.875rem;cursor:pointer;transition:all .3s ease}.clear-history-btn:hover{background:var(--background-secondary);color:var(--text-color);border-color:var(--border-color)}.no-history{color:var(--text-light);text-align:center;font-style:italic;margin:2rem 0}.history-list{max-height:300px;overflow-y:auto}.history-item{padding:1rem;border:1px solid var(--border-light);border-radius:8px;margin-bottom:.75rem;background:var(--background-secondary)}.history-item:last-child{margin-bottom:0}.history-result{margin-bottom:.5rem}.result-badge{display:inline-block;padding:.25rem .75rem;border-radius:20px;font-size:.875rem;font-weight:600;text-transform:uppercase}.result-badge.win{background:var(--primary-color);color:#fff}.result-badge.draw{background:var(--text-light);color:#fff}.history-details{display:flex;justify-content:space-between;font-size:.875rem;color:var(--text-secondary)}.game-instructions{background:#fff;padding:2rem;border-radius:12px;box-shadow:0 4px 20px #00000014;border:1px solid rgba(0,0,0,.05)}.game-settings{display:flex;gap:2rem;margin-bottom:2rem;justify-content:center;flex-wrap:wrap}.setting-group{display:flex;flex-direction:column;gap:.5rem;align-items:center}.setting-group label{font-weight:600;color:var(--text-color);font-size:.9rem}.setting-group select{padding:.5rem 1rem;border:2px solid var(--border-color);border-radius:8px;background:#fff;color:var(--text-color);font-size:.9rem;cursor:pointer;transition:all .3s ease}.setting-group select:hover{border-color:var(--border-light)}.setting-group select:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #0000001a}.setting-group select:disabled{opacity:.6;cursor:not-allowed}.square.selected{background:var(--background-secondary);border:3px solid var(--primary-color);transform:scale(1.05);box-shadow:0 4px 16px #00000026}.square.selected:hover{transform:scale(1.05)}.board:focus{outline:none}.board:focus-visible{box-shadow:0 0 0 3px var(--primary-color)}.keyboard-instructions{background:var(--background-secondary);padding:1rem 1.5rem;border-radius:8px;text-align:center;margin-top:1rem}.keyboard-instructions h4{color:var(--text-color);margin:0 0 .5rem;font-size:1rem;font-weight:600}.keyboard-instructions p{color:var(--text-secondary);margin:0;font-size:.9rem;line-height:1.4}.keyboard-instructions strong{color:var(--text-color);font-weight:600}.history-mode{background:var(--primary-color);color:#fff;padding:.25rem .5rem;border-radius:4px;font-size:.75rem;font-weight:600;text-transform:uppercase}.status-message:has(+.board){position:relative}.status-message:has(+.board):after{content:"";position:absolute;bottom:-5px;left:50%;transform:translate(-50%);width:20px;height:3px;background:var(--primary-color);border-radius:2px;animation:thinking 1.5s infinite}@keyframes thinking{0%,to{opacity:.3}50%{opacity:1}}@media (max-width: 1024px){.game-container{grid-template-columns:1fr;gap:2rem}.game-sidebar{order:-1}}@media (max-width: 768px){.tic-tac-toe{padding:1rem}.game-title{font-size:2.5rem}.game-description{font-size:1.1rem}.square{width:80px;height:80px;font-size:2.5rem}.status-message{font-size:1.25rem;min-width:250px}.game-controls{flex-direction:column;align-items:center}.control-btn{width:100%;max-width:200px}.game-settings{flex-direction:column;gap:1rem;align-items:center}.setting-group{flex-direction:row;gap:1rem;align-items:center}.setting-group label{font-size:.875rem;min-width:80px}.setting-group select{min-width:120px}.keyboard-instructions{padding:.75rem 1rem}.keyboard-instructions h4{font-size:.9rem}.keyboard-instructions p{font-size:.8rem}}@media (max-width: 480px){.tic-tac-toe{padding:1rem}.game-title{font-size:2rem}.game-description{font-size:1rem}.square{width:70px;height:70px;font-size:2rem}.status-message{font-size:1.1rem;min-width:200px;padding:.75rem 1rem}.game-info,.game-history,.game-instructions{padding:1rem}.history-details{flex-direction:column;gap:.25rem}.game-settings{margin-bottom:1.5rem}.setting-group{flex-direction:column;gap:.5rem;align-items:center}.setting-group select{min-width:100px;font-size:.8rem}.keyboard-instructions{padding:.5rem .75rem}}.sudoku-game{max-width:1200px;margin:0 auto;padding:2rem 1rem;font-family:var(--font-family)}.game-header{text-align:center;margin-bottom:2rem;background:#fff;padding:2rem;border-radius:16px;box-shadow:0 4px 20px #00000014;border:1px solid rgba(0,0,0,.05)}.game-header h1{font-size:2.5rem;font-weight:700;color:var(--text-color);margin-bottom:1.5rem}.game-controls{display:flex;gap:1rem;justify-content:center;margin-bottom:1.5rem;flex-wrap:wrap}.new-game-btn,.reset-btn{padding:.75rem 1.5rem;border:none;border-radius:8px;font-weight:600;font-size:1rem;cursor:pointer;transition:all .3s ease;font-family:inherit}.new-game-btn{background:var(--primary-color);color:#fff}.new-game-btn:hover:not(:disabled){background:var(--secondary-color);transform:translateY(-2px);box-shadow:0 4px 16px #00000026}.new-game-btn:disabled{background:var(--text-light);cursor:not-allowed;opacity:.6}.reset-btn{background:transparent;color:var(--primary-color);border:2px solid var(--primary-color)}.reset-btn:hover:not(:disabled){background:var(--primary-color);color:#fff;transform:translateY(-2px)}.reset-btn:disabled{border-color:var(--text-light);color:var(--text-light);cursor:not-allowed;opacity:.6}.game-info{display:flex;justify-content:center;gap:2rem;flex-wrap:wrap}.timer,.difficulty,.puzzle-number{background:var(--background-secondary);padding:.5rem 1rem;border-radius:20px;font-weight:600;color:var(--text-color);border:1px solid var(--border-light)}.start-screen{text-align:center;background:#fff;padding:3rem 2rem;border-radius:16px;box-shadow:0 4px 20px #00000014;border:1px solid rgba(0,0,0,.05);margin-bottom:2rem}.start-screen h2{font-size:2rem;color:var(--text-color);margin-bottom:1rem}.start-screen p{color:var(--text-secondary);font-size:1.1rem;margin-bottom:2rem}.difficulty-selector{display:flex;flex-direction:column;align-items:center;gap:.5rem}.difficulty-selector label{font-weight:600;color:var(--text-color)}.difficulty-selector select{padding:.5rem 1rem;border:2px solid var(--border-color);border-radius:8px;font-size:1rem;background:#fff;color:var(--text-color);cursor:pointer;transition:border-color .3s ease}.difficulty-selector select:focus{outline:none;border-color:var(--primary-color)}.game-container{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:start;margin-bottom:2rem;justify-items:center}.sudoku-board{background:#fff;padding:2rem;border-radius:16px;box-shadow:0 4px 20px #00000014;border:1px solid rgba(0,0,0,.05);display:inline-block;border:3px solid var(--text-color);margin:0 auto}.board-row{display:flex}.board-row:nth-child(3n){border-bottom:3px solid var(--text-color)}.board-row:last-child{border-bottom:none}.board-cell{width:50px;height:50px;border:1px solid var(--border-color);display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:600;cursor:pointer;transition:all .2s ease;position:relative;background:#fff;pointer-events:auto;margin:0;padding:0}.board-cell:nth-child(3n){border-right:3px solid var(--text-color)}.board-cell:last-child{border-right:none}.board-cell:hover{background:var(--background-secondary);transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}.board-cell.selected{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.board-cell.highlighted:not(.selected){background:#0000000d}.game-sidebar{display:flex;flex-direction:column;gap:1.5rem;min-width:200px}.number-controls{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem}.control-row{display:flex;gap:.5rem}.number-btn{width:50px;height:50px;border:2px solid var(--border-color);background:#fff;color:var(--text-color);font-size:1.25rem;font-weight:600;border-radius:8px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.number-btn:hover{background:var(--background-secondary);border-color:var(--primary-color);transform:translateY(-2px)}.number-btn:active{transform:translateY(0)}.number-btn.clear-btn{background:#ffebee;color:#d32f2f;border-color:#f44336}.number-btn.clear-btn:hover{background:#ffcdd2}.number-btn.backspace-btn{background:#fff3e0;color:#f57c00;border-color:#ff9800;font-size:1.1rem}.number-btn.backspace-btn:hover{background:#ffe0b2}.game-status{background:#fff;padding:1.5rem;border-radius:16px;box-shadow:0 4px 20px #00000014;border:1px solid rgba(0,0,0,.05)}.win-message{text-align:center;color:var(--primary-color)}.win-message h3{font-size:1.25rem;margin-bottom:.5rem}.win-message p{color:var(--text-secondary);font-size:1rem}.game-instructions{background:#fff;padding:2rem;border-radius:16px;box-shadow:0 4px 20px #00000014;border:1px solid rgba(0,0,0,.05)}.game-instructions h3{color:var(--text-color);margin-bottom:1rem;font-size:1.25rem;font-weight:600}.game-instructions ul{color:var(--text-secondary);line-height:1.6;padding-left:1.5rem}.game-instructions li{margin-bottom:.5rem}@media (max-width: 1024px){.game-container{grid-template-columns:1fr;gap:1.5rem}.game-sidebar{flex-direction:row;justify-content:center;min-width:auto}.number-pad{grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(2,1fr)}.clear-btn{grid-column:span 5}}@media (max-width: 768px){.sudoku-game{padding:1rem .5rem}.game-header{padding:1.5rem 1rem}.game-header h1{font-size:2rem}.game-controls{flex-direction:column;align-items:center}.new-game-btn,.reset-btn{width:100%;max-width:200px}.game-info{flex-direction:column;gap:1rem}.start-screen{padding:2rem 1rem}.start-screen h2{font-size:1.75rem}.sudoku-board{padding:1rem}.board-cell{width:40px;height:40px;font-size:1rem}.number-pad{padding:1rem;gap:.5rem}.number-btn{width:40px;height:40px;font-size:1rem}.game-sidebar{flex-direction:column;align-items:center}}@media (max-width: 480px){.board-cell,.number-btn{width:35px;height:35px;font-size:.9rem}.game-header h1{font-size:1.75rem}.start-screen h2{font-size:1.5rem}}.wordle-game{max-width:800px;margin:0 auto;padding:2rem;background:#fff;border-radius:16px;box-shadow:0 4px 20px #00000014;border:1px solid rgba(0,0,0,.05)}.wordle-game .game-header{text-align:center;margin-bottom:2rem}.wordle-game .game-header h1{font-size:2.5rem;font-weight:800;color:var(--text-color);margin-bottom:1rem;letter-spacing:.08em}.wordle-game .game-controls{display:flex;justify-content:center;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}.wordle-game .game-controls button{padding:.75rem 1.5rem;border:2px solid var(--border-color);background:#fff;color:var(--text-color);border-radius:10px;cursor:pointer;font-weight:600;font-size:.9rem;transition:all .2s ease}.wordle-game .game-controls button:hover:not(:disabled){background:var(--background-secondary);border-color:var(--primary-color);transform:translateY(-2px)}.wordle-game .game-controls button:disabled{opacity:.5;cursor:not-allowed;transform:none}.wordle-game .game-controls .share-btn{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.wordle-game .game-controls .share-btn:hover:not(:disabled){background:var(--primary-color-dark);border-color:var(--primary-color-dark)}.wordle-game .game-options{display:flex;justify-content:center;gap:2rem;flex-wrap:wrap}.wordle-game .option-toggle{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.9rem;color:var(--text-secondary)}.wordle-game .option-toggle input[type=checkbox]{accent-color:var(--primary-color);transform:scale(1.2)}.wordle-game .game-container{display:flex;flex-direction:column;align-items:center;gap:2rem}.wordle-game .wordle-board{display:grid;grid-template-rows:repeat(6,1fr);gap:8px;aspect-ratio:5/6;max-width:400px;width:100%;border:none!important;outline:none!important}.wordle-game .board-row{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;border:none!important;outline:none!important}.wordle-game .board-row:nth-child(3n){border-bottom:none!important}.wordle-game .board-row:last-child{border-bottom:none!important}.wordle-game .board-tile{display:flex;align-items:center;justify-content:center;border:2px solid var(--border-color);background:#fff;font-weight:800;font-size:2rem;text-transform:uppercase;border-radius:10px;-webkit-user-select:none;user-select:none;aspect-ratio:1;transition:all .2s ease;border-right:2px solid var(--border-color)!important;border-bottom:2px solid var(--border-color)!important}.wordle-game .board-tile:nth-child(3n){border-right:2px solid var(--border-color)!important}.wordle-game .board-tile:last-child{border-right:2px solid var(--border-color)!important}.wordle-game .board-tile.filled{border-color:var(--text-secondary)}.wordle-game .board-tile.absent{background:var(--text-light);border-color:var(--text-light);color:#fff}.wordle-game .board-tile.present{background:#f59e0b;border-color:#f59e0b;color:#fff}.wordle-game .board-tile.correct{background:#22c55e;border-color:#22c55e;color:#fff}.wordle-game.high-contrast .board-tile.present{background:#f97316;border-color:#f97316}.wordle-game.high-contrast .board-tile.correct{background:#0ea5e9;border-color:#0ea5e9}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.08)}to{transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.wordle-game .board-tile.filled{animation:pop .12s ease-out}.wordle-game .board-row.shake{animation:shake .3s ease-in-out}.wordle-game .board-tile.flip{transform-style:preserve-3d;transition:transform .5s}.wordle-game .board-tile.flip.revealed{transform:rotateX(180deg)}.wordle-game .wordle-keyboard{display:grid;gap:8px;max-width:500px;width:100%}.wordle-game .kb-row{display:flex;gap:6px;justify-content:center}.wordle-game .key{background:var(--background-secondary);border:1px solid var(--border-color);border-bottom-width:3px;padding:12px 8px;border-radius:8px;min-width:34px;text-align:center;font-weight:700;-webkit-user-select:none;user-select:none;cursor:pointer;font-size:.9rem;transition:all .2s ease;color:var(--text-color)}.wordle-game .key:hover{background:var(--border-color);transform:translateY(-1px)}.wordle-game .key.wide{min-width:64px}.wordle-game .key.absent{background:var(--text-light);color:#fff;border-color:var(--text-light)}.wordle-game .key.present{background:#f59e0b;color:#fff;border-color:#f59e0b}.wordle-game .key.correct{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.wordle-game.high-contrast .key.present{background:#f97316;border-color:#f97316}.wordle-game.high-contrast .key.correct{background:#0ea5e9;border-color:#0ea5e9}.wordle-game .stats-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem}.wordle-game .stats-content{background:#fff;border:1px solid var(--border-color);border-radius:16px;padding:2rem;max-width:520px;width:100%;max-height:80vh;overflow-y:auto}.wordle-game .stats-content h3{margin:0 0 1rem;color:var(--text-color);font-size:1.5rem;font-weight:600}.wordle-game .stats-summary{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-bottom:1.5rem;padding:1rem;background:var(--background-secondary);border-radius:8px}.wordle-game .stats-summary div{color:var(--text-secondary);font-size:.9rem}.wordle-game .stats-summary strong{color:var(--text-color)}.wordle-game .stats-distribution h4{margin:0 0 1rem;color:var(--text-color);font-size:1.1rem;font-weight:600}.wordle-game .dist-bars{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:1.5rem}.wordle-game .dist-bar{text-align:center}.wordle-game .dist-label{display:block;font-size:.8rem;color:var(--text-secondary);margin-bottom:.5rem}.wordle-game .dist-progress{height:14px;background:var(--background-secondary);border-radius:6px;overflow:hidden;margin-bottom:.5rem}.wordle-game .dist-fill{height:100%;background:var(--primary-color);transition:width .3s ease}.wordle-game .dist-count{font-size:.8rem;color:var(--text-secondary)}.wordle-game .close-btn{width:100%;padding:.75rem;border:2px solid var(--border-color);background:#fff;color:var(--text-color);border-radius:8px;cursor:pointer;font-weight:600;transition:all .2s ease}.wordle-game .close-btn:hover{background:var(--background-secondary);border-color:var(--primary-color)}.wordle-toast{position:fixed;left:50%;top:18px;transform:translate(-50%);background:var(--text-color);border:1px solid var(--border-color);color:#fff;padding:10px 14px;border-radius:12px;opacity:0;pointer-events:none;transition:opacity .15s;font-weight:600;z-index:1001;font-size:.9rem}.wordle-toast.show{opacity:1}@media (max-width: 768px){.wordle-game{padding:1rem}.wordle-game .game-header h1{font-size:2rem}.wordle-game .game-controls{flex-direction:column;align-items:center}.wordle-game .game-controls button{width:200px}.wordle-game .game-options{flex-direction:column;align-items:center;gap:1rem}.wordle-game .board-tile{font-size:1.5rem}.wordle-game .key{padding:10px 6px;font-size:.8rem;min-width:28px}.wordle-game .key.wide{min-width:56px}.wordle-game .stats-content{padding:1.5rem;margin:1rem}.wordle-game .stats-summary{grid-template-columns:1fr}.wordle-game .dist-bars{grid-template-columns:repeat(3,1fr);gap:1rem}}@media (max-width: 480px){.wordle-game .wordle-board{max-width:300px}.wordle-game .board-tile{font-size:1.25rem}.wordle-game .key{padding:8px 4px;font-size:.7rem;min-width:24px}.wordle-game .key.wide{min-width:48px}}.App{min-height:100vh;display:flex;flex-direction:column}main{flex:1}:root{--primary-color: #000000;--primary-color-dark: #000000;--secondary-color: #333333;--text-color: #000000;--text-secondary: #333333;--text-light: #666666;--background-color: #ffffff;--background-secondary: #f8f9fa;--background-tertiary: #e9ecef;--border-color: #dee2e6;--border-light: #e9ecef;--shadow-color: rgba(0, 0, 0, .1);--shadow-color-light: rgba(0, 0, 0, .05);--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;--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: 1.875rem;--font-size-4xl: 2.25rem;--font-size-5xl: 3rem;--spacing-1: .25rem;--spacing-2: .5rem;--spacing-3: .75rem;--spacing-4: 1rem;--spacing-5: 1.25rem;--spacing-6: 1.5rem;--spacing-8: 2rem;--spacing-10: 2.5rem;--spacing-12: 3rem;--spacing-16: 4rem;--spacing-20: 5rem;--radius-sm: .25rem;--radius-md: .375rem;--radius-lg: .5rem;--radius-xl: .75rem;--radius-2xl: 1rem;--radius-3xl: 1.5rem;--shadow-sm: 0 1px 2px 0 var(--shadow-color-light);--shadow-md: 0 4px 6px -1px var(--shadow-color);--shadow-lg: 0 10px 15px -3px var(--shadow-color);--transition-fast: .15s ease-in-out;--z-sticky: 1020}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:var(--font-family);font-size:var(--font-size-base);line-height:1.6;color:var(--text-color);background-color:var(--background-color);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.2;margin-bottom:var(--spacing-4);color:var(--text-color)}h1{font-size:var(--font-size-4xl)}h2{font-size:var(--font-size-3xl)}h3{font-size:var(--font-size-2xl)}h4{font-size:var(--font-size-xl)}h5{font-size:var(--font-size-lg)}h6{font-size:var(--font-size-base)}p{margin-bottom:var(--spacing-4);color:var(--text-secondary)}a{color:var(--primary-color);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--secondary-color)}.btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--spacing-3) var(--spacing-6);font-size:var(--font-size-base);font-weight:500;line-height:1.5;text-align:center;text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;user-select:none;border:2px solid transparent;border-radius:var(--radius-lg);transition:all var(--transition-fast);background-color:transparent;color:var(--text-color)}.btn:hover{text-decoration:none;transform:translateY(-1px)}.btn:focus{outline:none;box-shadow:0 0 0 3px #0000001a}.btn-primary{background-color:var(--primary-color);color:var(--background-color);border-color:var(--primary-color)}.btn-primary:hover{background-color:var(--secondary-color);border-color:var(--secondary-color);color:var(--background-color)}.btn-secondary{background-color:var(--background-color);color:var(--primary-color);border-color:var(--primary-color)}.btn-secondary:hover{background-color:var(--primary-color);color:var(--background-color)}.btn-large{padding:var(--spacing-4) var(--spacing-8);font-size:var(--font-size-lg);border-radius:var(--radius-xl)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.mb-0{margin-bottom:0}.mb-1{margin-bottom:var(--spacing-1)}.mb-2{margin-bottom:var(--spacing-2)}.mb-3{margin-bottom:var(--spacing-3)}.mb-4{margin-bottom:var(--spacing-4)}.mb-5{margin-bottom:var(--spacing-5)}.mb-6{margin-bottom:var(--spacing-6)}.mb-8{margin-bottom:var(--spacing-8)}.mb-10{margin-bottom:var(--spacing-10)}.mb-12{margin-bottom:var(--spacing-12)}.mb-16{margin-bottom:var(--spacing-16)}.mb-20{margin-bottom:var(--spacing-20)}.mt-0{margin-top:0}.mt-1{margin-top:var(--spacing-1)}.mt-2{margin-top:var(--spacing-2)}.mt-3{margin-top:var(--spacing-3)}.mt-4{margin-top:var(--spacing-4)}.mt-5{margin-top:var(--spacing-5)}.mt-6{margin-top:var(--spacing-6)}.mt-8{margin-top:var(--spacing-8)}.mt-10{margin-top:var(--spacing-10)}.mt-12{margin-top:var(--spacing-12)}.mt-16{margin-top:var(--spacing-16)}.mt-20{margin-top:var(--spacing-20)}.p-0{padding:0}.p-1{padding:var(--spacing-1)}.p-2{padding:var(--spacing-2)}.p-3{padding:var(--spacing-3)}.p-4{padding:var(--spacing-4)}.p-5{padding:var(--spacing-5)}.p-6{padding:var(--spacing-6)}.p-8{padding:var(--spacing-8)}.p-10{padding:var(--spacing-10)}.p-12{padding:var(--spacing-12)}.p-16{padding:var(--spacing-16)}.p-20{padding:var(--spacing-20)}@media (max-width: 768px){h1{font-size:var(--font-size-3xl)}h2{font-size:var(--font-size-2xl)}h3{font-size:var(--font-size-xl)}.btn-large{padding:var(--spacing-3) var(--spacing-6);font-size:var(--font-size-base)}}@media (max-width: 480px){h1{font-size:var(--font-size-2xl)}h2{font-size:var(--font-size-xl)}h3{font-size:var(--font-size-lg)}}