:root{--bg-color: #050505;--panel-bg: #0b0b0b;--text-primary: #e0e0e0;--text-secondary: #00ff9d;--accent: #00ff9d;--accent-dim: rgba(0, 255, 157, .1);--danger: #ff4d4d;--border-color: #333;--font-mono: "SF Mono", "Fira Code", "Roboto Mono", monospace;--font-sans: "Inter", system-ui, sans-serif}body{margin:0;background-color:var(--bg-color);color:var(--text-primary);font-family:var(--font-sans);overflow-x:hidden}#root{min-height:100vh;display:flex;flex-direction:column}.container{max-width:1400px;margin:0 auto;padding:2rem;width:100%;box-sizing:border-box}header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border-color);padding-bottom:1rem;margin-bottom:2rem}h1{font-family:var(--font-mono);font-size:1.5rem;margin:0;letter-spacing:-1px}.version{font-size:.8rem;color:var(--text-secondary);vertical-align:super}.status{font-family:var(--font-mono);font-size:.8rem;color:var(--accent);display:flex;align-items:center;gap:.5rem}.status:before{content:"";display:block;width:8px;height:8px;background-color:var(--accent);border-radius:50%;box-shadow:0 0 10px var(--accent)}.grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;height:calc(100vh - 150px)}@media(max-width:900px){.grid{grid-template-columns:1fr;height:auto}}.panel{background:var(--panel-bg);border:1px solid var(--border-color);border-radius:4px;padding:1.5rem;display:flex;flex-direction:column;gap:1.5rem;position:relative;overflow:hidden}.panel:before{content:"";position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.5}h2{font-family:var(--font-mono);font-size:.9rem;color:#666;margin:0;text-transform:uppercase}.form-group{display:flex;flex-direction:column;gap:.5rem}.form-group.grow{flex-grow:1}label{font-family:var(--font-mono);font-size:.75rem;color:#888;text-transform:uppercase}.mono-input{background:#000;border:1px solid var(--border-color);color:var(--text-primary);padding:1rem;font-family:var(--font-mono);font-size:.9rem;border-radius:2px;transition:all .2s}textarea.mono-input{resize:none;height:100%;min-height:200px}.mono-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 15px var(--accent-dim)}.action-btn{background:var(--accent);color:#000;border:none;padding:1.25rem;font-family:var(--font-mono);font-weight:700;font-size:1rem;cursor:pointer;letter-spacing:1px;transition:all .2s;text-transform:uppercase;clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%)}.action-btn:hover:not(:disabled){background:#fff;transform:translateY(-2px);box-shadow:0 5px 20px var(--accent-dim)}.action-btn:disabled{background:#333;color:#666;cursor:not-allowed}.secondary-btn{background:transparent;border:1px solid var(--accent);color:var(--accent);padding:1rem;font-family:var(--font-mono);font-size:.8rem;cursor:pointer;text-transform:uppercase;transition:all .2s}.secondary-btn:hover:not(:disabled){background:var(--accent-dim)}.secondary-btn:disabled{border-color:#333;color:#333}.visualizer{flex-grow:1;background:#000;border:1px dashed var(--border-color);display:flex;align-items:center;justify-content:center;min-height:200px;position:relative;overflow:hidden}.placeholder{font-family:var(--font-mono);font-size:.8rem;color:#444;animation:pulse 2s infinite}@keyframes pulse{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}.cube-render{perspective:800px;display:flex;flex-direction:column;align-items:center;gap:2rem}.cube-3d{width:100px;height:100px;position:relative;transform-style:preserve-3d;animation:spin 8s infinite linear}.face{position:absolute;width:100px;height:100px;border:1px solid var(--accent);background:#00ff9d1a;box-sizing:border-box}.front{transform:rotateY(0) translateZ(50px)}.back{transform:rotateY(180deg) translateZ(50px)}.right{transform:rotateY(90deg) translateZ(50px)}.left{transform:rotateY(-90deg) translateZ(50px)}.top{transform:rotateX(90deg) translateZ(50px)}.bottom{transform:rotateX(-90deg) translateZ(50px)}@keyframes spin{0%{transform:rotateX(0) rotateY(0)}to{transform:rotateX(360deg) rotateY(360deg)}}.cube-meta{font-family:var(--font-mono);color:var(--accent);background:var(--accent-dim);padding:.25rem .5rem;border-radius:4px}.stats-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem}.stat-box{background:#000;border:1px solid var(--border-color);padding:1rem;text-align:center}.stat-box label{display:block;font-size:.6rem;margin-bottom:.5rem;color:var(--accent)}.stat-box .value{font-family:var(--font-mono);font-size:1.1rem;font-weight:700}.unit{font-size:.7rem;color:#666;font-weight:400}.code-display{display:flex;flex-direction:column;flex-grow:1;gap:.5rem;min-height:150px}.code-view{flex-grow:1;background:#000;border:1px solid var(--border-color);color:var(--text-secondary);font-family:var(--font-mono);font-size:.7rem;padding:1rem;resize:none}.code-view:focus{outline:none;border-color:var(--accent)}.error-message{color:var(--danger);font-family:var(--font-mono);font-size:.8rem;background:#ff4d4d1a;padding:.5rem;border-left:2px solid var(--danger)}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(prefers-reduced-motion:no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}