:root{--bg-gradient:linear-gradient(135deg, #0f172a, #1e293b);--panel-bg:#414956;--panel-border:#ffffff14;--text-primary:#f8fafc;--text-secondary:#cbd5f5;--accent-primary:#6366f1;--accent-secondary:#8b5cf6;--accent-success:#22c55e;--radius-lg:18px;--radius-md:12px;--shadow-soft:0 10px 30px #00000059;--transition:all .25s ease}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-gradient);color:var(--text-primary);font-family:Inter,sans-serif}.app-header{text-align:center;margin-bottom:1.5rem}.app-title{background:linear-gradient(135deg,#6366f1,#22c55e);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:2rem;font-weight:700}.app-subtitle{color:#cbd5f5;margin-top:.4rem;font-size:.95rem}.tabs{flex-wrap:wrap;justify-content:center;gap:1rem;margin:1.5rem 0;display:flex}.tab{cursor:pointer;position:relative}.tab input{display:none}.tab span{color:#e2e8f0;background:#ffffff0d;border:1px solid #ffffff14;border-radius:999px;padding:.6rem 1.4rem;font-weight:500;transition:all .25s;display:inline-block}.tab span:hover{background:#ffffff1f}.tab.active span{color:#fff;background:linear-gradient(135deg,#6366f1,#8b5cf6);box-shadow:0 4px 15px #6366f166}@media (width<=768px){.app-title{font-size:1.6rem}.app-subtitle{font-size:.85rem}.tab span{padding:.5rem 1.1rem;font-size:.9rem}}@media (width<=480px){.tabs{flex-direction:column;align-items:stretch}.tab span{text-align:center;width:100%}}.container{height:100%;padding:2rem}.glass-panel{background:var(--panel-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:var(--radius-lg);border:1px solid var(--panel-border);box-shadow:var(--shadow-soft)}.layout{grid-template-columns:1fr 420px;align-items:start;gap:2rem;height:100%;display:grid}.controls-wrapper{height:100%;overflow:auto}.controls{flex-direction:column;gap:1rem;padding:0 1.8rem 2rem;display:flex}.controls header{background-color:var(--panel-bg);z-index:100;padding:1rem 0;position:sticky;top:0}.controls h2,.controls h3{color:var(--text-primary);margin-top:.5rem;margin-bottom:.3rem}.controls h3{opacity:.85;border-top:1px solid #ffffff1a;padding-top:.75rem;font-size:.95rem}.controls label{color:var(--text-secondary);flex-direction:column;gap:.35rem;font-size:.85rem;display:flex}.controls input,.controls select{color:#fff;background:#0f172a99;border:1px solid #ffffff1a;border-radius:8px;width:100%;padding:.45rem;font-size:.85rem}.controls input[type=range]{appearance:none;background:linear-gradient(90deg,#6366f1,#22c55e);border-radius:10px;height:6px;padding:0}.controls input[type=range]::-webkit-slider-thumb{appearance:none;border:2px solid var(--accent-primary);cursor:pointer;background:#fff;border-radius:50%;width:14px;height:14px;box-shadow:0 0 8px #6366f1cc}.controls input[type=checkbox]{width:auto;margin-right:.5rem}.controls button{cursor:pointer;transition:var(--transition);color:#fff;border:none;border-radius:10px;margin-top:.4rem;padding:.6rem;font-weight:600}.controls button:first-of-type{background:linear-gradient(135deg,#6366f1,#8b5cf6)}.controls button:nth-of-type(2){background:linear-gradient(135deg,#22c55e,#10b981)}.controls button:nth-of-type(3){background:linear-gradient(135deg,#0ea5e9,#06b6d4)}.controls button:hover{filter:brightness(1.1);transform:translateY(-2px)}.preview,.canvas-wrapper{justify-content:center;align-items:center;padding:2rem;display:flex}.preview canvas,.canvas-wrapper canvas{border-radius:var(--radius-md);max-width:100%;height:auto;transition:transform .3s}.preview canvas:hover,.canvas-wrapper canvas:hover{transform:scale(1.02)}h1{margin-bottom:1.5rem;font-size:1.8rem;font-weight:600}@media (width<=1024px){.layout{grid-template-columns:1fr}}@media (width<=600px){.container{padding:1.2rem}h1{font-size:1.4rem}.controls{padding:1.2rem}}.container h1[data-v-e469084e]{text-align:center;background:linear-gradient(135deg,#6366f1,#22c55e);-webkit-text-fill-color:transparent;-webkit-background-clip:text}.preview[data-v-e469084e]{background:radial-gradient(circle,#1e293b,#020617);border-radius:18px;box-shadow:inset 0 0 40px #0009,0 10px 30px #0006}.controls div label[data-v-e469084e]{flex-direction:row;align-items:center;gap:.25rem}.controls input[type=number][data-v-e469084e]{margin-top:.3rem}.controls select[data-v-e469084e]{cursor:pointer}.preview canvas[data-v-e469084e]{transition:transform .3s,box-shadow .3s}.preview canvas[data-v-e469084e]:hover{box-shadow:0 0 25px #6366f159}.app-container[data-v-42b8b03f]{background:linear-gradient(135deg,#0f172a,#1e293b);justify-content:center;align-items:center;min-height:100vh;padding:1rem;display:flex}.app-shell[data-v-42b8b03f]{border-radius:20px;flex-direction:column;width:100%;max-width:1400px;padding:2rem;display:flex}.tab-content[data-v-42b8b03f]{margin-top:1rem}.tab-content[data-v-42b8b03f]>*{animation:.35s fadeIn-42b8b03f}@keyframes fadeIn-42b8b03f{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media (width<=768px){.app-container[data-v-42b8b03f]{align-items:flex-start;padding:1rem}.app-shell[data-v-42b8b03f]{padding:1.5rem}}@media (width>=900px){.tab-content[data-v-42b8b03f]{max-height:calc(100vh - 4.5rem)}.app-shell[data-v-42b8b03f]{height:calc(100vh - 2rem);overflow:hidden}}