:root{--background-color:#0a0a1a;--text-color:#e0e0e0;--primary-accent:#0ff;--secondary-accent:#f0f;--tertiary-accent:#ff0;--pink-accent:#f92672;--purple-accent:#9f70fd;--color:var(--text-color);--header-height:80px}*{box-sizing:border-box;margin:0;padding:0}body{color:var(--color);background-color:var(--background-color);width:100vw;height:100vh;font-family:sans-serif;overflow:hidden}#root{width:100%;height:100%}main{height:calc(100% - var(--header-height));padding:10px}main:has(.export-container){overflow:auto}@media (width<=768px){:root{--header-height:50px}}::-webkit-scrollbar{width:15px}::-webkit-scrollbar-track{background:var(--background-color);border-radius:500px}::-webkit-scrollbar-thumb{background:var(--purple-accent);border-radius:500px}::-webkit-scrollbar-thumb:hover{background:var(--pink-accent)}header{height:var(--header-height);justify-content:space-between;align-items:center;padding:0 2rem;display:flex;position:relative}header .logo{font-size:1.5rem;font-weight:700}header .logo span{color:var(--pink-accent);display:inline-block;position:relative;transform:translateY(-10px)translate(-2px)rotate(-15deg)}header .burger-icon{color:var(--primary-accent);cursor:pointer;background:0 0;border:none;font-size:2rem;display:none}header nav{z-index:95;gap:1rem;display:flex}header nav button{color:var(--text-color);cursor:pointer;background-color:#0000;border:none;padding:.5rem 1rem;transition:all .3s}header nav button.active{border:1px solid var(--primary-accent)}header nav button:hover{background-color:var(--primary-accent);color:var(--background-color)}@media (width>=769px){header nav button{border-bottom:1px solid var(--primary-accent)}}@media (width<=768px){header .logo{margin-top:10px}header .burger-icon{z-index:100;display:block}header nav{background-color:var(--background-color);flex-direction:column;width:300px;height:100vh;padding-top:5rem;transition:right .3s ease-in-out;position:absolute;top:0;right:-300px}header nav.open{right:0}header nav button{text-align:center;border-left:1px solid var(--primary-accent);width:250px;margin:5px auto;padding:1rem}}.modal-overlay{z-index:1000;background-color:#00000080;justify-content:center;align-items:center;width:100%;height:100%;display:none;position:fixed;top:0;left:0}.modal-overlay.open{display:flex}.modal-content{background-color:var(--background-color);border-radius:var(--border-radius);border:1px solid var(--primary-accent);width:90%;max-width:600px;padding:20px;position:relative}.close-button{color:var(--text-color);cursor:pointer;background:0 0;border:none;font-size:1.5rem;position:absolute;top:10px;right:10px}.modal-header{text-align:center;margin-bottom:2em}.about-info{text-align:center;display:block}.footer-links{text-align:center;flex-direction:column;gap:10px;margin-bottom:20px;display:flex}.footer-links a{color:var(--secondary-accent);text-decoration:none}.footer-links a:hover{text-decoration:underline}.footer-info{margin:2em 0 1em}.footer-info p{text-align:center;margin:0;font-size:.9em}.modal-body .heart{color:var(--pink-accent)}.export-container{background-color:var(--background-color);border:1px solid var(--primary-accent);box-shadow:0 0 15px var(--primary-accent);border-radius:8px;max-width:800px;margin:0 auto;padding:2rem}@media (width<=850px){.export-container{margin:0 auto;padding:1rem}}.export-container h2,.export-container h3{color:var(--secondary-accent);text-shadow:0 0 5px var(--secondary-accent);text-align:center;margin-bottom:1rem}.export-controls{justify-content:center;align-items:center;gap:1rem;margin-bottom:2rem;display:flex}.export-controls label{color:var(--text-color);margin:0;font-size:1.1rem}.export-controls select,.export-controls button{border:1px solid var(--primary-accent);background-color:var(--background-color);color:var(--primary-accent);cursor:pointer;text-transform:uppercase;letter-spacing:1px;border-radius:4px;padding:.75rem 1.5rem;font-size:1rem;transition:all .3s}.export-controls select:hover,.export-controls button:hover{background-color:var(--primary-accent);color:var(--background-color);box-shadow:0 0 10px var(--primary-accent)}.code-block-container{border:1px solid var(--purple-accent);box-shadow:0 0 10px var(--purple-accent);background-color:#1a1a2e;border-radius:8px;margin-bottom:1rem;padding:1rem .5rem;position:relative}.code-block-container h3{color:var(--tertiary-accent);text-shadow:0 0 5px var(--tertiary-accent);text-align:left;margin:1rem 0 0}.code-block-container pre{border:1px dashed var(--pink-accent);background-color:#0d0d1a;border-radius:4px;padding:1rem;overflow-x:auto}.code-block-container code{color:var(--text-color);font-family:Fira Code,Cascadia Code,monospace;font-size:.9rem;display:block}.code-div{position:relative}.code-div button{background-color:var(--secondary-accent);color:var(--background-color);cursor:pointer;text-transform:uppercase;border:none;border-radius:4px;padding:.5rem 1rem;font-size:.8rem;transition:background-color .3s;position:absolute;bottom:0;right:0}.code-block-container button:hover{background-color:var(--pink-accent);box-shadow:0 0 8px var(--pink-accent)}@media (width<=768px){.export-controls{flex-direction:column;display:flex}}.matrix-canvas-holder{width:100%;height:100%;position:relative}.matrix-preview,#preview-container{justify-content:center;align-items:center;width:100%;height:100%;display:flex}.main-container{flex-direction:column;height:100%;display:flex}@media (width>=768px){.main-container{flex-direction:row}}.controls-panel{background-color:var(--background-color);border-right:1px solid var(--primary-accent);height:100%;padding:20px;overflow-y:auto}@media (width>=768px){.controls-panel{flex:1;max-width:350px}}@media (width<=767px){.controls-panel{order:2;height:60%;overflow-y:auto}}.preview-panel{background-color:var(--background-color);flex-direction:column;flex:1;justify-content:center;align-items:center;padding:20px;font-size:5em;display:flex;position:relative;overflow:hidden}@media (width>=768px){.preview-panel{flex:3;height:100%}}@media (width<=767px){.preview-panel{border:red;order:1;height:40%}}.test-color{color:#000}.color-picker-container{align-items:center;display:flex;position:absolute;top:10px;right:10px}.color-picker-container label{color:var(--text-color);margin-right:10px}.color-picker-container input[type=color]{-webkit-appearance:none;cursor:pointer;background:0 0;border:none;border-radius:50%;width:40px;height:40px}.color-picker-container input[type=color]::-webkit-color-swatch-wrapper{padding:0}.color-picker-container input[type=color]::-webkit-color-swatch{border:1px solid var(--primary-accent);border-radius:50%}.control-group{margin-bottom:15px}.control-group label{color:var(--primary-accent);margin-bottom:5px;font-weight:700;display:block}.control-group select{border:1px solid var(--secondary-accent);background-color:var(--background-color);width:100%;color:var(--text-color);appearance:none;cursor:pointer;background-image:url("data:image/svg+xml;utf8,<svg fill=\"%2300ffff\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 10l5 5 5-5z\"/><path d=\"M0 0h24v24H0z\" fill=\"none\"/></svg>");background-position:right 8px center;background-repeat:no-repeat;background-size:20px;border-radius:4px;padding:8px}.control-group select:focus{border-color:var(--tertiary-accent);box-shadow:0 0 5px var(--tertiary-accent);outline:none}.control-group option{background-color:var(--background-color);color:var(--text-color)}@media (width<=768px){.preview-panel{font-size:4em}}.welcome-content{color:var(--purple-accent);border-radius:8px;margin:20px 0;font-size:.5em}.welcome-content h2{margin-bottom:15px}.welcome-content ol{color:#e1e0e0;padding:0 0 0 .5em;font-size:.8em;list-style-position:inside}.welcome-content ol li{border-radius:5px;margin-bottom:10px;box-shadow:0 2px 4px #0000001a}@media (width<=768px){.welcome-content{font-size:.3em}}#dynamic-inputs{background-color:var(--background-color);border:1px solid var(--primary-accent);box-shadow:0 0 15px var(--primary-accent-alpha);border-radius:8px;flex-direction:column;gap:1.5rem;padding:1.5rem;display:flex}.input-wrapper{flex-direction:column;font-family:Share Tech Mono,monospace;display:flex}label{color:var(--primary-accent);text-transform:uppercase;letter-spacing:1.5px;text-shadow:0 0 5px var(--primary-accent-alpha);margin-bottom:.5rem;font-size:.9rem}input,select{border:1px solid var(--secondary-accent);color:var(--text-color);background-color:#1a1a3a;border-radius:4px;padding:.75rem;font-family:Orbitron,sans-serif;transition:all .3s}input:focus,select:focus{border-color:var(--tertiary-accent);box-shadow:0 0 10px var(--tertiary-accent-alpha);outline:none}input[type=checkbox],input[type=radio]{appearance:none;border:2px solid var(--secondary-accent);cursor:pointer;border-radius:4px;width:20px;height:20px;position:relative;top:5px}input[type=checkbox]:checked,input[type=radio]:checked{background-color:var(--primary-accent);border-color:var(--primary-accent);box-shadow:0 0 10px var(--primary-accent-alpha)}input[type=range]{appearance:none;border:1px solid var(--secondary-accent);background:#1a1a3a;border-radius:5px;outline:none;width:100%;height:10px}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--primary-accent);cursor:pointer;width:20px;height:20px;box-shadow:0 0 10px var(--primary-accent-alpha);border-radius:50%}input[type=range]::-moz-range-thumb{background:var(--primary-accent);cursor:pointer;width:20px;height:20px;box-shadow:0 0 10px var(--primary-accent-alpha);border-radius:50%}input[type=color]{appearance:none;cursor:pointer;background-color:#0000;border:none;border-radius:50%;width:50px;height:50px;padding:0}input[type=color]::-webkit-color-swatch-wrapper{border-radius:50%;padding:0}input[type=color]::-webkit-color-swatch{border:2px solid var(--secondary-accent);border-radius:50%}
/*# sourceMappingURL=letterpopper.483128b6.css.map */