*{margin:0;padding:0;box-sizing:border-box}:root{--primary-color: #2a2a2a;--accent-color: #6e44ff;--text-color: #ffffff;--background: #121212;--background-header: #0f0f0f}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;background-color:var(--background);color:var(--text-color);line-height:1.6;min-height:100vh}h1{font-size:32px;text-align:center}main{padding:1rem}.noise{position:fixed;top:0;left:0;width:100%;height:100%;opacity:.05;z-index:-1;pointer-events:none}.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:2rem;position:relative}.hero h1{font-size:4rem;margin-bottom:1rem;background:linear-gradient(135deg,var(--text-color),var(--accent-color));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.subtitle{font-size:1.5rem;opacity:.8;margin-bottom:2rem}.character-display{height:200px;display:flex;justify-content:center;align-items:center;margin:2rem 0}.floating{animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}.character-section{padding:4rem 2rem;background:#ffffff05}.character-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;max-width:1200px;margin:2rem auto}.character-card{background:#ffffff0d;padding:2rem;border-radius:10px;text-align:center;cursor:pointer;transition:transform .3s ease,background .3s ease}.character-card:hover{transform:translateY(-5px);background:#ffffff14}.tool-section{padding:8rem 0rem 4rem;max-width:1200px;margin:0 auto}.tool-container{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:2rem;background:#ffffff0d;padding:2rem;border-radius:10px}.tool-input,.tool-output{display:flex;flex-direction:column;gap:1rem}textarea{width:100%;height:200px;background:#0003;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:1rem;color:var(--text-color);font-family:monospace;resize:vertical}textarea:focus{outline:none;border-color:var(--accent-color)}.cta-button{background:var(--accent-color);color:#fff;border:none;padding:.8rem 1.5rem;border-radius:30px;cursor:pointer;transition:transform .3s ease,background .3s ease;font-size:1rem;text-decoration:none;display:inline-block}.cta-button:hover{transform:translateY(-2px);background:#8055ff}.character-buttons{display:flex;flex-wrap:wrap;gap:.5rem}.character-button{background:#ffffff1a;border:none;padding:.5rem 1rem;border-radius:4px;color:var(--text-color);cursor:pointer;transition:background .3s ease}.character-button:hover{background:#fff3}.detection-results{background:#0003;padding:1rem;border-radius:8px}.detection-item{margin:.5rem 0;padding:.5rem;background:#ffffff0d;border-radius:4px}.format-options{display:flex;gap:1rem;margin-bottom:1rem}.format-options label{display:flex;align-items:center;gap:.5rem;cursor:pointer;color:var(--text-color)}.tool-buttons{display:flex;gap:1rem;margin-top:2rem}.about-section{padding:4rem 2rem;max-width:800px;margin:0 auto;text-align:center}footer{text-align:center;padding:2rem;background:#0003;margin-top:4rem}@keyframes fadeInOut{0%{opacity:0;transform:translate(-50%,20px)}10%{opacity:1;transform:translate(-50%)}90%{opacity:1;transform:translate(-50%)}to{opacity:0;transform:translate(-50%,-20px)}}@media (max-width: 768px){.hero h1{font-size:2.5rem}.subtitle{font-size:1.2rem}.tool-container{grid-template-columns:1fr}}@media (max-width: 480px){.hero h1{font-size:2rem}.character-grid{grid-template-columns:1fr}.tool-buttons{flex-direction:column}}.intro-content-section{max-width:1200px;margin:2rem auto;padding:2rem;border-radius:10px;text-align:center}.content-section{max-width:1200px;margin:2rem auto;padding:2rem;background:#ffffff0d;border-radius:10px}.content-section h2{font-size:2rem;margin-bottom:1.5rem;color:var(--accent-color)}.content-section h3{font-size:1.5rem;margin:1.5rem 0 1rem;color:var(--text-color)}.content-section p{margin-bottom:1rem;line-height:1.8}.content-section ul,.content-section ol{margin-left:1.5rem;margin-bottom:1rem}.content-section li{margin-bottom:.5rem}.tool-description{text-align:center;max-width:800px;margin:1rem auto 2rem;color:#fffc}.unicode-table{overflow-x:auto;margin:1rem 0}.unicode-table table{width:100%;border-collapse:collapse;background:#0003}.unicode-table th,.unicode-table td{padding:1rem;text-align:left;border:1px solid rgba(255,255,255,.1)}.unicode-table th{background:#ffffff1a;font-weight:700}.faq-container{display:grid;gap:1.5rem}.faq-item{background:#0003;padding:1.5rem;border-radius:8px}.faq-item h3{font-size:1.2rem;margin-bottom:.5rem;color:var(--accent-color)}@media (max-width: 768px){.content-section{padding:1.5rem;margin:1rem}.content-section h2{font-size:1.75rem}.content-section h3{font-size:1.25rem}.unicode-table{font-size:.9rem}.unicode-table th,.unicode-table td{padding:.75rem}}.grid-container{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.grid-item{padding:16px;background-color:#333;border-radius:5px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.grid div{background-color:#333;padding:10px;border-radius:5px}.a873280q{color:#a187ff}.grid-p{color:#a0a0a0}header{background-color:var(--background-header);box-shadow:0 2px 5px #0000001a;position:relative}nav{max-width:1200px;margin:0 auto;padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center}.logo a{font-size:1.5rem;font-weight:700;color:var(--text-color);text-decoration:none;letter-spacing:-.5px}.logo a:hover{color:var(--accent-color)}ul{display:flex;list-style:none;gap:2rem}ul li a{text-decoration:none;color:var(--text-color);font-weight:500;transition:color .3s ease}ul li a:hover{color:var(--accent-color)}.hamburger{display:none;cursor:pointer;background:none;border:none;padding:.5rem}.hamburger span{display:block;width:25px;height:2px;background-color:#333;margin:5px 0;transition:all .3s ease}@media screen and (max-width: 768px){.hamburger{display:block}ul{display:none;position:absolute;top:100%;left:0;right:0;background-color:var(--background-header);flex-direction:column;padding:1rem;box-shadow:0 2px 5px #0000001a}ul.active{display:flex}ul li{padding:.5rem 0}}
