.navbar{background-color:#282c34;padding:1rem;box-shadow:0 2px 4px #0000001a;position:sticky;top:0;z-index:100}.nav-container{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:0 1rem}.nav-logo{color:#61dafb;font-size:clamp(1.2rem,3vw,1.5rem);font-weight:700;text-decoration:none;display:flex;align-items:center;gap:.5rem;white-space:nowrap;transition:color .3s ease}.nav-logo:hover,.nav-logo:focus{color:#4fa8c5;outline:none}.nav-menu{display:flex;list-style:none;gap:clamp(.5rem,2vw,2rem);flex-wrap:wrap;justify-content:flex-end}.nav-item{display:flex}.nav-link{color:#fff;text-decoration:none;padding:clamp(.4rem,1vw,.75rem) clamp(.5rem,2vw,1.25rem);border-radius:4px;transition:all .3s ease;white-space:nowrap;font-size:clamp(.85rem,2vw,1rem)}.nav-link:hover,.nav-link:focus{background-color:#61dafb;color:#282c34;outline:none}@media (max-width: 768px){.navbar{padding:.75rem}.nav-container{padding:0 .5rem}.nav-menu{gap:.75rem}.nav-link{padding:.4rem .75rem;font-size:.9rem}}@media (max-width: 480px){.navbar{padding:.5rem}.nav-container{padding:0 .25rem}.nav-logo{font-size:1.1rem;gap:.25rem}.nav-menu{gap:.25rem}.nav-link{padding:.35rem .5rem;font-size:.8rem}.nav-item{flex:1;min-width:0}.nav-link{width:100%;text-align:center;display:block}}.breadcrumb{padding:.5rem 1rem;background-color:#f8f9fa;border-bottom:1px solid #e9ecef}.breadcrumb ul{list-style:none;display:flex;flex-wrap:wrap;padding:0;max-width:1200px;margin:0 auto}.breadcrumb li{display:flex;align-items:center;font-size:.875rem}.breadcrumb li:not(:last-child):after{content:"/";margin:0 .5rem;color:#666}.breadcrumb a{color:#007bff;text-decoration:none;padding:.25rem 0}.breadcrumb a:hover{color:#0056b3;text-decoration:underline}.breadcrumb span{color:#666;font-weight:500}@media (max-width: 768px){.breadcrumb{padding:.5rem}.breadcrumb li{font-size:.8rem}}.home-container{padding:clamp(1rem,5vw,2rem);max-width:1200px;margin:0 auto;width:100%}.hero{text-align:center;margin-bottom:clamp(2rem,5vw,4rem);padding:clamp(1.5rem,4vw,3rem);background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:8px;box-shadow:0 4px 12px #0000001a}.hero h1{font-size:clamp(1.75rem,5vw,3rem);margin-bottom:clamp(.75rem,2vw,1rem);font-weight:700;line-height:1.2}.hero p{font-size:clamp(1rem,2vw,1.25rem);opacity:.95;line-height:1.5}.tools-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(clamp(250px,100%,300px),1fr));gap:clamp(1.5rem,3vw,2rem);width:100%}.tool-card{background:#fff;border-radius:8px;padding:clamp(1.5rem,3vw,2rem);box-shadow:0 4px 6px #0000001a;text-decoration:none;color:inherit;transition:all .3s ease;cursor:pointer;display:flex;flex-direction:column;height:100%;border:1px solid transparent}.tool-card:hover,.tool-card:focus{transform:translateY(-5px);box-shadow:0 8px 16px #00000026;border-color:#667eea;outline:none}.tool-card:active{transform:translateY(-2px)}.tool-icon{font-size:clamp(2.5rem,8vw,3.5rem);text-align:center;margin-bottom:clamp(.75rem,2vw,1.5rem);line-height:1}.tool-card h2{margin-bottom:clamp(.5rem,1vw,.75rem);color:#282c34;font-size:clamp(1.1rem,3vw,1.5rem);font-weight:600}.tool-card p{color:#666;line-height:1.6;font-size:clamp(.875rem,2vw,1rem);flex-grow:1}@media (max-width: 768px){.home-container{padding:1.5rem 1rem}.hero{margin-bottom:2rem;padding:1.5rem}.tools-grid{gap:1.5rem}.hero h1{margin-bottom:.75rem}.hero p{font-size:1.05rem}}@media (max-width: 480px){.home-container{padding:1rem}.hero{margin-bottom:1.5rem;padding:1rem}.hero h1{font-size:1.5rem;margin-bottom:.5rem}.hero p{font-size:.95rem}.tools-grid{grid-template-columns:1fr;gap:1rem}.tool-card{padding:1.25rem}.tool-icon{font-size:2.5rem;margin-bottom:.75rem}.tool-card h2{font-size:1.2rem;margin-bottom:.5rem}.tool-card p{font-size:.9rem}}.tool-container{max-width:1200px;margin:0 auto;padding:clamp(1rem,5vw,2rem);width:100%}.tool-header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:clamp(1.5rem,4vw,3rem) clamp(1rem,3vw,2rem);border-radius:8px;margin-bottom:clamp(1.5rem,3vw,2rem);text-align:center;box-shadow:0 4px 12px #0000001a;position:relative}.tool-header h1{font-size:clamp(1.75rem,5vw,2.5rem);margin-bottom:clamp(.5rem,1vw,.75rem);font-weight:700;line-height:1.2}.tool-header p{font-size:clamp(.95rem,2vw,1.1rem);opacity:.95;line-height:1.5}.tool-content{background:#fff;border-radius:8px;padding:clamp(1rem,3vw,2rem);box-shadow:0 4px 6px #0000001a}.tool-section{margin-bottom:clamp(1.5rem,3vw,2rem);padding-bottom:clamp(1.5rem,3vw,2rem);border-bottom:1px solid #eee}.tool-section:last-child{border-bottom:none;padding-bottom:0;margin-bottom:0}.tool-section h2{color:#282c34;margin-bottom:clamp(.75rem,2vw,1rem);font-size:clamp(1.2rem,4vw,1.5rem);font-weight:600}.tool-section ul{list-style:none;padding-left:0}.tool-section li{padding:clamp(.35rem,1vw,.5rem) 0;padding-left:clamp(1rem,2vw,1.5rem);position:relative;line-height:1.6;font-size:clamp(.9rem,2vw,1rem)}.tool-section li:before{content:"✓";position:absolute;left:0;color:#667eea;font-weight:700}.demo-box{background:#f9f9f9;border-left:4px solid #667eea;padding:clamp(1rem,2vw,1.5rem);border-radius:4px;text-align:center}.demo-box p{margin-bottom:clamp(.75rem,1vw,1rem);color:#666;font-size:clamp(.9rem,2vw,1rem)}.demo-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:clamp(.6rem,1vw,.75rem) clamp(1rem,2vw,1.5rem);border-radius:4px;font-size:clamp(.9rem,2vw,1rem);cursor:pointer;transition:all .3s ease;font-weight:500}.demo-button:hover,.demo-button:focus{transform:scale(1.05);box-shadow:0 4px 12px #667eea66;outline:none}.demo-button:active{transform:scale(.98)}.demo-button:disabled{opacity:.6;cursor:not-allowed;transform:none}input[type=file],input[type=range],select{width:100%;padding:clamp(.5rem,1vw,.75rem);border:1px solid #ddd;border-radius:4px;font-size:clamp(.9rem,2vw,1rem);transition:border-color .3s ease}input[type=file]:focus,input[type=range]:focus,select:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}label{display:block;margin-bottom:clamp(.4rem,1vw,.75rem);font-weight:600;font-size:clamp(.9rem,2vw,1rem);color:#282c34}@media (max-width: 768px){.tool-container{padding:1rem}.tool-header{padding:1.5rem 1rem;margin-bottom:1.5rem}.tool-header h1{font-size:1.6rem;margin-bottom:.5rem}.tool-header p{font-size:1rem}.tool-content{padding:1rem}.tool-section{margin-bottom:1.5rem;padding-bottom:1.5rem}}@media (max-width: 480px){.tool-container{padding:.75rem}.tool-header{padding:1rem;margin-bottom:1rem;border-radius:6px}.tool-header h1{font-size:1.4rem;margin-bottom:.4rem}.tool-header p{font-size:.9rem}.tool-content{padding:.75rem;border-radius:6px}.tool-section{margin-bottom:1rem;padding-bottom:1rem}.tool-section h2{font-size:1.2rem;margin-bottom:.75rem}.tool-section li{padding:.4rem 0 .4rem 1.25rem;font-size:.9rem}.demo-box{padding:1rem}.demo-box p{margin-bottom:.75rem;font-size:.9rem}input,select{padding:.6rem;font-size:1rem}label{margin-bottom:.5rem;font-size:.95rem}.demo-button{width:100%;padding:.7rem 1rem}}.app-container{display:flex;flex-direction:column;min-height:100vh;width:100%}main{flex:1;padding:clamp(1rem,5vw,2rem);max-width:1200px;margin:0 auto;width:100%}@media (max-width: 768px){main{padding:1rem}}@media (max-width: 480px){main{padding:.75rem}}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background-color:#f5f5f5;color:#333;line-height:1.6;font-size:16px}@media (max-width: 480px){body{font-size:14px}}#root{min-height:100vh;display:flex;flex-direction:column}h1{font-size:clamp(1.75rem,5vw,3rem);font-weight:700;line-height:1.2}h2{font-size:clamp(1.3rem,4vw,2rem);font-weight:600;line-height:1.3}h3{font-size:clamp(1.1rem,3vw,1.5rem);font-weight:600}p{line-height:1.6;color:#555}a{color:#667eea;text-decoration:none;transition:all .3s ease}a:hover,a:focus{outline:2px solid #667eea;outline-offset:2px}button{transition:all .3s ease;font-family:inherit}button:focus{outline:2px solid #667eea;outline-offset:2px}input,select,textarea{font-family:inherit}@media (max-width: 768px){body{padding-bottom:20px}}@media (max-width: 480px){h1{margin-bottom:.75rem}h2{margin-bottom:.5rem}}