:root{--bg: #060607;--panel: #101013;--panel-elevated: #17171b;--border: #262629;--border-strong: #37373c;--accent: #3b82f6;--accent-hover: #60a5fa;--accent-dim: rgba(59, 130, 246, .16);--text: #f4f4f6;--text-dim: #8d8d96;--danger: #ff5a5a;--radius: 10px;--font-display: "Inter", system-ui, sans-serif;--font-mono: "JetBrains Mono", ui-monospace, monospace}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-display);background:var(--bg);color:var(--text);line-height:1.5;min-height:100vh}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:999;pointer-events:none;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}.shell{display:grid;grid-template-columns:360px 1fr;min-height:100vh}.sidebar{background:var(--panel);border-right:1px solid var(--border);padding:2rem 1.75rem;display:flex;flex-direction:column;gap:1.5rem;position:sticky;top:0;height:100vh;overflow-y:auto}.brand{display:flex;align-items:center;gap:.9rem}.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:conic-gradient(from 220deg,var(--accent),#0a1f3c 55%,var(--accent));color:#06120a;font-size:1.1rem;flex-shrink:0}.brand-text h1{font-size:1.35rem;font-weight:700;letter-spacing:-.02em}.brand-text h1 span{color:var(--accent)}.brand-text p{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.14em;font-size:.65rem;color:var(--text-dim);margin-top:.15rem}.tab-radio{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.tab-nav{display:flex;gap:.4rem;border-bottom:1px solid var(--border);padding-bottom:1rem}.tab-nav label{flex:1;text-align:center;padding:.55rem .5rem;border-radius:7px;font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);cursor:pointer;transition:background .2s ease,color .2s ease}.tab-nav label:hover{color:var(--text)}#tabBasico:checked~.tab-nav label[for=tabBasico],#tabEstilo:checked~.tab-nav label[for=tabEstilo],#tabAvancado:checked~.tab-nav label[for=tabAvancado]{background:var(--accent-dim);color:var(--accent)}#tabBasico:focus-visible~.tab-nav label[for=tabBasico],#tabEstilo:focus-visible~.tab-nav label[for=tabEstilo],#tabAvancado:focus-visible~.tab-nav label[for=tabAvancado]{outline:2px solid var(--accent);outline-offset:2px}.panels .tab-panel{display:none;flex-direction:column;gap:1.1rem;animation:tabIn .2s ease}@keyframes tabIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}#tabBasico:checked~.panels #panelBasico,#tabEstilo:checked~.panels #panelEstilo,#tabAvancado:checked~.panels #panelAvancado{display:flex}.input-group label{display:block;margin-bottom:.4rem;font-size:.78rem;color:var(--text-dim)}.input-group input,.input-group select,.input-group textarea{width:100%;padding:.65rem .75rem;border:1px solid var(--border-strong);border-radius:7px;background:var(--bg);color:var(--text);font-family:var(--font-display);font-size:.9rem;transition:border-color .2s ease,box-shadow .2s ease;resize:vertical}.input-group input[type=range]{padding:.4rem 0;accent-color:var(--accent)}.input-group input[type=color]{padding:.3rem;height:2.6rem;cursor:pointer}.input-group input[type=file]{padding:.5rem;cursor:pointer}.input-group input:focus,.input-group select:focus,.input-group textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}.input-group input.is-valid{border-color:var(--accent)}.input-group input.is-invalid{border-color:var(--danger);box-shadow:0 0 0 3px #ff5a5a26}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.help-text{display:block;margin-top:.35rem;color:var(--text-dim);font-size:.75rem}.btn{background:var(--accent);color:#06101f;border:none;padding:.85rem 1.5rem;border-radius:7px;font-family:var(--font-mono);font-size:.85rem;font-weight:700;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease;text-transform:uppercase;letter-spacing:.06em;width:100%}.btn:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 8px 22px #3b82f659}.btn:disabled{background:var(--border-strong);color:var(--text-dim);cursor:not-allowed;transform:none;box-shadow:none}.btn-secondary{background:transparent;color:var(--text);border:1px solid var(--border-strong)}.btn-secondary:hover{border-color:var(--accent);color:var(--accent);background:transparent;box-shadow:none}.error{background:#ff5a5a1a;border:1px solid var(--danger);color:var(--danger);padding:.85rem 1rem;border-radius:var(--radius);font-size:.85rem;display:none}.error.show{display:block}.loading{display:none;text-align:center;color:var(--text-dim);font-family:var(--font-mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.06em}.loading.show{display:block}.spinner{border:2px solid var(--border-strong);border-top:2px solid var(--accent);border-radius:50%;width:18px;height:18px;animation:spin .9s linear infinite;margin:0 auto .5rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.how-it-works{border-top:1px solid var(--border);padding-top:1rem;color:var(--text-dim);font-size:.85rem}.how-it-works summary{cursor:pointer;color:var(--accent);font-family:var(--font-mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.06em}.how-it-works ol{padding-left:1.25rem;margin-top:.75rem}.how-it-works li{margin-bottom:.4rem}.stage{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 2rem;position:relative;overflow:hidden}.stage:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at 50% 30%,var(--accent-dim),transparent 60%);pointer-events:none}.canvas-frame{position:relative;display:inline-flex;z-index:1}.canvas-frame:before{content:"";position:absolute;top:-40px;right:-40px;bottom:-40px;left:-40px;background:radial-gradient(circle,rgba(59,130,246,.25),transparent 65%);filter:blur(30px);z-index:-1}#canvas{max-width:100%;max-height:78vh;width:auto;height:auto;border:1px solid var(--border-strong);border-radius:14px;background:#000;box-shadow:0 30px 60px -20px #000000b3}.meta-row{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:1.75rem;z-index:1}.meta-chip{background:var(--panel-elevated);border:1px solid var(--border);border-radius:8px;padding:.5rem .85rem;display:flex;flex-direction:column;gap:.15rem;min-width:90px}.meta-chip span{font-family:var(--font-mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim)}.meta-chip strong{font-size:.85rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}.download-btn{margin-top:1.5rem;width:min(320px,100%);z-index:1}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}@media (max-width: 900px){.shell{grid-template-columns:1fr}.stage{order:-1;padding:2rem 1rem 1rem}.sidebar{position:static;height:auto;border-right:none;border-top:1px solid var(--border)}}