@import"https://fonts.googleapis.com/css2?family=Handjet:wght@400;500;600&display=swap";@font-face{font-family:Lacquer;src:url(/fonts/Lacquer/Lacquer-Regular.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Visitor TT2 Pro;src:url(/fonts/Visitor%20TT2%20Pro/visitor2.otf) format("opentype");font-weight:400;font-style:normal;font-display:swap}:root{color-scheme:dark;--bg: #050505;--surface: #0c0c0c;--surface-2: #121212;--ink: #ffffff;--muted: rgba(255, 255, 255, .65);--line: rgba(255, 255, 255, .18);--accent: #f7f7f7;--glow: rgba(255, 255, 255, .45);--shadow: 0 0 35px rgba(255, 255, 255, .18);--title-font: "Handjet", "Impact", sans-serif;--body-font: "Visitor TT2 Pro", "Share Tech Mono", monospace}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;overflow:hidden}body{font-family:var(--body-font);background:var(--bg);color:var(--ink)}button{font-family:inherit}.app{position:relative;height:100%;overflow:hidden;padding:120px 60px 80px;background:radial-gradient(circle at top,#111,#050505 55%,#000)}.grid-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:60px 60px;pointer-events:none;z-index:1;animation:gridPulse 8s ease-in-out infinite}.noise-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");opacity:.03;pointer-events:none;z-index:2;animation:noiseMove .5s steps(10) infinite}.glitch-line{position:absolute;width:100%;height:2px;background:linear-gradient(90deg,transparent,#ffffff,transparent);opacity:0;z-index:3;pointer-events:none}.glitch-line-1{top:18%;animation:glitchLine1 8s infinite}.glitch-line-2{top:52%;animation:glitchLine2 10s infinite 2s}.glitch-line-3{top:84%;animation:glitchLine3 12s infinite 4s}.scanline{position:absolute;width:100%;height:2px;background:linear-gradient(transparent,rgba(255,255,255,.12),transparent);z-index:10;pointer-events:none;animation:scanlineMove 6s linear infinite;box-shadow:0 0 12px #fff3}.app-header{position:fixed;top:30px;left:60px;right:60px;display:flex;justify-content:space-between;align-items:center;z-index:50;animation:fadeInDown .8s ease-out}.logo{font-family:Lacquer,cursive;font-size:22px;letter-spacing:3px;text-shadow:0 0 12px rgba(255,255,255,.5)}.logo-bracket{opacity:.6;animation:bracketBlink 2s infinite}.tagline{font-size:17px;text-transform:lowercase}.tagline-glitch{position:relative;display:inline-block;animation:textGlitch 9s infinite}.builder{position:relative;z-index:4;display:grid;grid-template-columns:minmax(380px,1fr) minmax(380px,1fr);gap:24px;max-width:100%;margin:0 auto;align-items:start;justify-content:center}.preview-panel{background:#000000b3;border:2px solid var(--line);padding:22px;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;flex-direction:column;gap:20px;position:sticky;top:-100px;height:fit-content;max-width:644px;justify-self:center;align-self:start}.panel-header{display:flex;justify-content:space-between;align-items:center;text-transform:uppercase;font-size:13px;letter-spacing:2px;color:var(--muted)}.panel-title{font-family:Lacquer,cursive;font-size:20px;color:var(--ink)}.lineage-button{background:transparent;border:1px solid rgba(255,255,255,.35);color:var(--muted);padding:8px 12px;text-transform:uppercase;letter-spacing:.16em;font-size:12px;font-family:var(--body-font);cursor:pointer;transition:all .3s ease}.lineage-button:hover{border-color:var(--ink);color:var(--ink)}.lineage-button.active{border-color:var(--ink);color:var(--ink);box-shadow:0 0 18px #fff3}.preview-frame{position:relative;border:2px solid rgba(255,255,255,.5);padding:4px;background:#000c;box-shadow:inset 0 0 30px #ffffff14;width:100%;margin:0 auto}.preview-stage{position:relative;width:100%;aspect-ratio:1 / 1;background:#040404;overflow:hidden}.preview-empty{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;text-transform:uppercase;letter-spacing:.2em;font-size:12px;color:#ffffff80;text-align:center;padding:20px}.preview-loading{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;text-transform:uppercase;letter-spacing:.2em;font-size:12px;color:#ffffff8c;background:#0009;z-index:4}.preview-layer{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain;image-rendering:pixelated}.panel-actions{display:flex;align-items:center;gap:16px}.cta-button{font-family:var(--body-font);font-size:15px;letter-spacing:.2em;color:var(--ink);background:transparent;border:3px solid var(--ink);padding:11px 24px;cursor:pointer;position:relative;overflow:hidden;box-shadow:0 0 30px #ffffff40;transition:all .3s ease}.cta-button:disabled,.ghost-button:disabled{opacity:.5;cursor:not-allowed}.button-inner{display:flex;align-items:center;gap:12px;position:relative;z-index:2}.button-arrow{opacity:0;transform:translate(-10px);transition:all .3s ease}.cta-button:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:#fff;transform:translate(-100%);transition:transform .4s ease;z-index:1}.cta-button:hover:before{transform:translate(0)}.cta-button:hover{color:#000;transform:translateY(-2px)}.cta-button:hover .button-arrow{opacity:1;transform:translate(0)}.ghost-button{background:transparent;border:2px solid rgba(255,255,255,.4);color:var(--muted);padding:12px 24px;text-transform:uppercase;letter-spacing:.18em;font-family:var(--body-font);font-size:12px;cursor:pointer;transition:all .3s ease}.action-button{font-size:15px;padding:11px 24px;letter-spacing:.2em}.ghost-button.action-button{border-width:3px}.ghost-button:hover{border-color:var(--ink);color:var(--ink)}.status-line{font-size:12px;text-transform:uppercase;letter-spacing:.2em;color:var(--muted);font-family:var(--body-font)}.controls{display:flex;flex-direction:column;gap:24px;height:calc(100vh - 140px);overflow:hidden;padding-right:0;padding-bottom:0;align-self:start;scrollbar-gutter:stable}.control-panel{flex:1;display:flex;flex-direction:column;gap:18px;border:2px solid rgba(255,255,255,.6);background:#000000d9;box-shadow:0 0 28px #ffffff2e;padding:22px 24px;overflow:hidden}.control-copy{display:flex;flex-direction:column;gap:8px}.traits-scroll{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:7px;padding-right:4px;padding-bottom:24px;min-height:180px;border-top:1px solid rgba(255,255,255,.12);padding-top:12px}.traits-scroll::-webkit-scrollbar{width:6px}.traits-scroll::-webkit-scrollbar-track{background:#ffffff14}.traits-scroll::-webkit-scrollbar-thumb{background:#ffffff59;border-radius:999px}.rules-title{font-family:var(--title-font);font-size:28px;line-height:1.3;letter-spacing:.05em}.rules-heading{margin-top:8px;text-transform:uppercase;letter-spacing:.2em;font-family:var(--title-font);font-size:14px;color:#ffffffb3}.rules-list{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;font-family:var(--title-font);font-size:18px;line-height:1.35;color:#ffffffd9}.lineage-switcher{display:grid;gap:10px;padding-top:8px;border-top:1px solid rgba(255,255,255,.15)}.lineage-label{font-family:var(--body-font);text-transform:uppercase;letter-spacing:.18em;font-size:12px;color:#fff9}.lineage-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.lineage-button{font-size:15px}.category{background:transparent;border:1px solid rgba(255,255,255,.12);padding:6px 10px;box-shadow:none;animation:panelIn .6s ease-out both}.trait-row{display:grid;grid-template-columns:22px minmax(0,1fr) 22px;align-items:center;gap:2px}.trait-row:focus-visible{outline:2px solid rgba(255,255,255,.4);outline-offset:6px}.trait-value{text-align:center;text-transform:uppercase;letter-spacing:.18em}.trait-category{font-family:var(--body-font);font-size:16px;color:#ffffff73}.trait-current{margin-top:4px;font-family:var(--body-font);font-size:20px;color:var(--ink);word-break:break-word}.arrow-button{background:transparent;border:1px solid rgba(255,255,255,.3);color:var(--ink);width:22px;height:22px;font-size:12px;cursor:pointer;transition:all .2s ease}.arrow-button:disabled{opacity:.4;cursor:not-allowed}.arrow-button:hover{border-color:var(--ink);box-shadow:0 0 12px #fff3}.arrow-button:focus-visible,.cta-button:focus-visible,.ghost-button:focus-visible,.lineage-button:focus-visible{outline:2px solid rgba(255,255,255,.6);outline-offset:3px}@keyframes gridPulse{0%,to{opacity:.5}50%{opacity:.9}}@keyframes noiseMove{0%{transform:translate(0)}to{transform:translate(-5%,-5%)}}@keyframes glitchLine1{0%,90%,to{opacity:0;transform:translate(-100%)}91%,92%{opacity:.5;transform:translate(0)}93%,94%{opacity:.3;transform:translate(5px)}95%{opacity:0;transform:translate(100%)}}@keyframes glitchLine2{0%,85%,to{opacity:0;transform:translate(100%)}86%,87%{opacity:.4;transform:translate(0)}88%,89%{opacity:.2;transform:translate(-5px)}90%{opacity:0;transform:translate(-100%)}}@keyframes glitchLine3{0%,92%,to{opacity:0;transform:translate(-100%)}93%,94%{opacity:.6;transform:translate(0)}95%{opacity:0;transform:translate(100%)}}@keyframes scanlineMove{0%{top:-2px}to{top:100%}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes bracketBlink{0%,49%,to{opacity:.6}50%,99%{opacity:1}}@keyframes textGlitch{0%,96%,to{transform:translate(0);text-shadow:none}97%{transform:translate(-2px);text-shadow:2px 0 #ffffff}98%{transform:translate(2px);text-shadow:-2px 0 #ffffff}99%{transform:translate(0);text-shadow:none}}@keyframes cursorBlink{0%,49%{opacity:.8}50%,to{opacity:.3}}@keyframes panelIn{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 1100px){.app{padding:120px 36px 70px}.builder{grid-template-columns:1fr}.controls{height:auto;max-height:none}.preview-panel{position:static}}@media (max-width: 768px){html,body,#root{height:auto;overflow:auto}.app{padding:140px 20px 60px;display:flex;flex-direction:column;min-height:100vh;height:auto}.builder{display:flex;flex-direction:column;gap:6px;flex:1;min-height:0;background:#000000bf;border:2px solid var(--line);box-shadow:var(--shadow);padding:16px;overflow:visible;margin-top:-35px}.app-header{position:fixed;top:0;left:0;right:0;flex-direction:column;gap:6px;text-align:center;display:flex;padding:14px 20px;background:#000000e6;border-bottom:1px solid rgba(255,255,255,.2);z-index:100}.panel-actions{flex-direction:column;align-items:stretch}.cta-button,.ghost-button{width:100%;text-align:center}.cta-button .button-inner{justify-content:center;gap:0}.cta-button .button-arrow{display:none}.preview-panel{padding:0;position:static;max-width:none;width:100%;margin:-14px auto 0;background:transparent;border:none;box-shadow:none;flex:0 0 auto;order:2}.preview-frame{padding:6px}.controls{height:auto;flex:1;min-height:0;overflow:hidden;border-left:none;order:1}.control-panel{border:none;background:transparent;box-shadow:none;padding:0;min-height:0;gap:6px}.traits-scroll{max-height:none;min-height:0;flex:1;gap:4px}}@media (min-width: 769px){.builder{background:#000000bf;border:2px solid var(--line);box-shadow:var(--shadow);padding:18px;gap:0}.preview-panel{background:transparent;border:none;box-shadow:none;padding:18px 18px 18px 0}.control-panel{background:transparent;border:none;box-shadow:none;padding:18px 0 18px 24px}.controls{border-left:1px solid rgba(255,255,255,.2);padding-left:0}}