:root{--bg-primary: #ffffff;--bg-secondary: #f2f2f2;--text-primary: #000000;--text-secondary: #333333;--border-color: #000000;--shadow-color: rgba(0, 0, 0, .9);--card-bg: #ffffff;--grid-color: rgba(0, 0, 0, .1)}[data-theme=dark]{--bg-primary: #1a1a1a;--bg-secondary: #2d2d2d;--text-primary: #ffffff;--text-secondary: #cccccc;--border-color: #ffffff;--shadow-color: rgba(255, 255, 255, .8);--card-bg: #2d2d2d;--grid-color: rgba(255, 255, 255, .1)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Arial,sans-serif;background:var(--bg-primary);color:var(--text-primary)}.app{display:flex;flex-direction:column;min-height:100vh;width:100%}.header{display:flex;justify-content:space-between;align-items:center;border-bottom:4px solid var(--border-color);width:100%;padding:1rem 10%;background:var(--bg-primary)}.header nav{display:flex;align-items:center;gap:2rem}.header nav a{text-decoration:none;font-weight:700;color:var(--text-primary)}.theme-toggle{background:var(--bg-secondary);border:3px solid var(--border-color);color:var(--text-primary);padding:.5rem 1rem;border-radius:8px;cursor:pointer;font-weight:700;transition:all .3s ease}.theme-toggle:hover{transform:translateY(-2px);box-shadow:3px 3px 0 var(--shadow-color)}.hero{border-bottom:4px solid var(--border-color);background:var(--bg-secondary);width:100%;padding:4rem 10%;display:flex;align-items:center;gap:4rem}.hero-content{flex:1}.hero-content h2{font-size:2.5rem;margin-bottom:1.5rem;line-height:1.2}.hero-content p{font-size:1.2rem;margin-bottom:2rem;line-height:1.6;color:var(--text-secondary)}.highlight{position:relative;display:inline-block}.highlight:after{content:"";position:absolute;left:0;bottom:2px;width:100%;height:15px;background-color:#9955f04d;z-index:0;transition:height .3s ease}.hero-image{flex:1;display:flex;justify-content:center;align-items:center}.placeholder-image{position:relative;width:100%;max-width:400px}.placeholder-image svg{width:100%;height:auto;filter:drop-shadow(5px 5px 0 var(--shadow-color))}.tool-icons{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:2rem;white-space:nowrap}.cta-button{background:var(--text-primary);color:var(--bg-primary);border:3px solid var(--border-color);padding:1rem 2rem;font-size:1.1rem;font-weight:700;border-radius:8px;cursor:pointer;transition:all .3s ease;margin-top:1rem}.cta-button:hover{transform:translateY(-2px);box-shadow:4px 4px 0 var(--shadow-color)}.content{display:flex;flex-direction:column;gap:4rem;padding:3rem 10%;flex:1;background-color:var(--bg-primary);background-image:linear-gradient(to right,var(--grid-color) 1px,transparent 1px),linear-gradient(to bottom,var(--grid-color) 1px,transparent 1px);background-size:30px 30px;background-position:center}.content-section{display:flex;flex-direction:column;gap:2rem}.section-title{font-size:1.8rem;font-weight:700;border-bottom:4px solid black;padding-bottom:.5rem}.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}.context-box{border:4px solid var(--border-color);border-radius:15px;padding:1.5rem;background:var(--card-bg);color:var(--text-primary);transition:all .3s ease;position:relative;box-shadow:8px 8px 0 var(--shadow-color)}.context-box:hover{transform:translate(-4px,-4px);box-shadow:12px 12px 0 var(--shadow-color)}.context-box[onclick]{transition:all .3s ease}.context-box[onclick]:hover{background:var(--bg-secondary)}.context-box h3{margin-bottom:1rem;font-size:1.2rem}.footer{border-top:4px solid black;width:100%;padding:1rem 10%;display:flex;justify-content:space-between;align-items:center}.footer h3{font-size:1.2rem}.footer nav a{margin-left:2rem;text-decoration:none;font-weight:700;color:#000}.text-tools-page{padding:2rem 10%;min-height:calc(100vh - 150px)}.tool-header{text-align:center;margin-bottom:4rem;position:relative}.tool-header:after{content:"";position:absolute;bottom:-1rem;left:50%;transform:translate(-50%);width:100px;height:4px;background:var(--border-color)}.tool-header h1{font-size:3rem;margin-bottom:1rem;color:var(--text-primary)}.tool-header p{color:var(--text-secondary);font-size:1.2rem}.tools-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2.5rem;padding:1rem 0}.tool-card{border:4px solid var(--border-color);border-radius:15px;padding:2rem;background:var(--bg-primary);cursor:pointer;transition:all .3s ease;text-align:center;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:1rem}.tool-card:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:var(--bg-secondary);transform:translateY(100%);transition:transform .3s ease;z-index:0}.tool-card:hover:before{transform:translateY(0)}.tool-card>*{position:relative;z-index:1}.tool-card:hover{transform:translateY(-5px);box-shadow:8px 8px 0 var(--shadow-color)}.tool-icon{font-size:3rem;margin-bottom:.5rem;background:var(--bg-secondary);width:80px;height:80px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:3px solid var(--border-color);transition:all .3s ease}.tool-card:hover .tool-icon{transform:scale(1.1) rotate(5deg);background:var(--bg-primary)}.tool-card h3{font-size:1.5rem;margin-bottom:.5rem;color:var(--text-primary)}.tool-card p{color:var(--text-secondary);line-height:1.4;font-size:1rem}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.tool-card{animation:fadeInUp .5s ease forwards;opacity:0}.tool-card:nth-child(1){animation-delay:.1s}.tool-card:nth-child(2){animation-delay:.2s}.tool-card:nth-child(3){animation-delay:.3s}.tool-card:nth-child(4){animation-delay:.4s}.tool-card:nth-child(5){animation-delay:.5s}.tool-card:nth-child(6){animation-delay:.6s}.text-manipulator{padding:2rem 10%;min-height:calc(100vh - 150px)}.text-manipulator .tool-container{background:var(--bg-secondary);border:4px solid var(--border-color);border-radius:15px;padding:2rem;box-shadow:8px 8px 0 var(--shadow-color)}.text-area-container{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-bottom:2rem}.input-section,.output-section{display:flex;flex-direction:column;gap:1rem}.text-area{width:100%;height:300px;padding:1rem;border:3px solid var(--border-color);border-radius:8px;background:var(--bg-primary);color:var(--text-primary);font-size:1rem;resize:vertical;font-family:inherit}.controls{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem}.transform-buttons,.action-buttons{display:flex;flex-wrap:wrap;gap:1rem}.controls button{padding:.8rem 1.5rem;border:3px solid var(--border-color);border-radius:8px;background:var(--bg-primary);color:var(--text-primary);font-weight:700;cursor:pointer;transition:all .2s ease}.controls button:hover{transform:translateY(-2px);box-shadow:4px 4px 0 var(--shadow-color)}.action-buttons button{background:var(--text-primary);color:var(--bg-primary)}.text-stats{display:flex;gap:2rem;padding:1rem;border:3px solid var(--border-color);border-radius:8px;background:var(--bg-primary)}.stat-item{display:flex;gap:.5rem}.stat-item span:first-child{color:var(--text-secondary)}@media (max-width: 768px){.text-area-container{grid-template-columns:1fr}.controls button{flex:1;min-width:150px}}.emoji-copy{padding:2rem 10%;min-height:calc(100vh - 150px)}.recent-emojis{background:var(--bg-secondary);border:4px solid var(--border-color);border-radius:15px;padding:1.5rem;margin-bottom:2rem}.recent-emoji{font-size:2rem;padding:.5rem;border:3px solid var(--border-color);border-radius:8px;background:var(--bg-primary);cursor:pointer;transition:all .2s ease}.recent-emoji:hover{transform:translateY(-2px);box-shadow:4px 4px 0 var(--shadow-color)}.emoji-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.5rem;padding:1rem 0}.emoji-card{border:3px solid var(--border-color);border-radius:12px;padding:1rem;background:var(--bg-primary);cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center}.emoji-card:hover{transform:translateY(-3px);box-shadow:6px 6px 0 var(--shadow-color)}.emoji{font-size:2.5rem;margin-bottom:.5rem}.emoji-name{font-size:.9rem;color:var(--text-secondary)}@media (max-width: 768px){.emoji-copy{padding:2rem 5%}.emoji-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem}.emoji{font-size:2rem}}.symbol-copy{padding:2rem 10%;min-height:calc(100vh - 150px)}.recent-symbols{background:var(--bg-secondary);border:4px solid var(--border-color);border-radius:15px;padding:1.5rem;margin-bottom:2rem}.recent-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.recent-header h3{color:var(--text-primary);margin:0}.clear-recent{padding:.5rem 1rem;border:3px solid var(--border-color);border-radius:8px;background:var(--bg-primary);color:var(--text-primary);cursor:pointer;font-weight:700;transition:all .2s ease}.clear-recent:hover{transform:translateY(-2px);box-shadow:4px 4px 0 var(--shadow-color)}.loading{grid-column:1 / -1;text-align:center;padding:2rem;color:var(--text-secondary);font-style:italic}.recent-grid{display:flex;gap:1rem;flex-wrap:wrap}.recent-symbol{font-size:2rem;padding:.5rem;border:3px solid var(--border-color);border-radius:8px;background:var(--bg-primary);cursor:pointer;transition:all .2s ease}.recent-symbol:hover{transform:translateY(-2px);box-shadow:4px 4px 0 var(--shadow-color)}.search-section{margin-bottom:2rem}.search-input{width:100%;padding:1rem;font-size:1.1rem;border:4px solid var(--border-color);border-radius:15px;background:var(--bg-primary);color:var(--text-primary)}.search-input:focus{outline:none;box-shadow:4px 4px 0 var(--shadow-color)}.symbol-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.5rem;padding:1rem 0}.symbol-card{border:3px solid var(--border-color);border-radius:12px;padding:1rem;background:var(--bg-primary);cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center}.symbol-card:hover{transform:translateY(-3px);box-shadow:6px 6px 0 var(--shadow-color)}.symbol{font-size:2.5rem;margin-bottom:.5rem}.symbol-name{font-size:.9rem;color:var(--text-secondary)}.copy-status{position:fixed;bottom:2rem;right:2rem;background:var(--bg-secondary);color:var(--text-primary);padding:1rem 2rem;border-radius:8px;border:3px solid var(--border-color);box-shadow:4px 4px 0 var(--shadow-color);animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.symbol-copy{padding:2rem 5%}.symbol-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem}.symbol{font-size:2rem}}.color-picker-container{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:50px;font-family:monospace;gap:40px}.color-preview{width:200px;height:200px;border:2px solid black;background-color:#fff;margin-right:2px}.satval-box{position:relative;width:300px;height:200px;cursor:crosshair;border:2px solid black}.color-controls{display:flex;flex-direction:column;align-items:center}.satval-white,.satval-black{position:absolute;inset:0}.satval-white{background:linear-gradient(to right,white,transparent)}.satval-black{background:linear-gradient(to top,black,transparent)}.satval-cursor{position:absolute;width:16px;height:16px;border:2px solid white;box-shadow:0 0 2px #000;border-radius:50%;pointer-events:none}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;border:2px solid #000;cursor:pointer;background-color:gray;position:relative;top:50%;transform:translateY(-2.5%)}.hue-slider::-webkit-slider-thumb{background-color:hsl(var(--hue),100%,50%)}.hue-slider::-moz-range-thumb{background-color:hsl(var(--hue),100%,50%)}.alpha-slider::-webkit-slider-thumb{background-color:rgba(var(--r),var(--g),var(--b),var(--alpha))}.alpha-slider::-moz-range-thumb{background-color:rgba(var(--r),var(--g),var(--b),var(--alpha))}.slider{-webkit-appearance:none;width:400px;height:25px;margin-bottom:10px;border:2px solid black;appearance:none;outline:none;border-radius:5px;cursor:pointer}.hue-slider{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.color-inputs{width:100%;margin-top:15px;color:#000}.input-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}.input-row input{flex:1;padding:8px;border:2px solid black;font-size:16px}.input-row button{padding:8px 12px;border:2px solid black;background:#fff;font-weight:700;cursor:pointer}.color-div{display:flex;align-items:center;transform:scale(1.2);transform-origin:bottom center}.copy-btn{padding:.5rem 1rem;border:3px solid var(--border-color);border-radius:8px;background:var(--bg-primary);color:var(--text-primary);cursor:pointer;font-weight:700;transition:all .2s ease}.copy-btn:hover{transform:translateY(-2px);background-color:#0000001a;box-shadow:4px 4px 0 var(--shadow-color)}.copy-btn:active{transform:scale(.97);box-shadow:3px 3px #0000004d}.color-input-field{border:2px solid black;appearance:none;outline:none;border-radius:5px;cursor:text}.type-label{font-size:1.2rem;font-weight:700}