@import"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500&family=Space+Grotesk:wght@300;400;500&display=swap";:root{--bg: #08080e;--bg-surface: #0d0d18;--accent: #3b82f6;--accent-dim: rgba(59, 130, 246, .15);--accent-glow: rgba(59, 130, 246, .08);--text: rgba(200, 215, 240, .85);--text-dim: rgba(120, 140, 180, .5);--border: rgba(59, 130, 246, .14);--dot: rgba(30, 60, 120, .6);font-family:JetBrains Mono,monospace;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*,*:before,*:after{box-sizing:border-box}body{margin:0;width:100vw;height:100vh;overflow:hidden}.WFC_App{width:100%;height:100%;display:flex;place-items:center;justify-content:center;position:relative;background-color:var(--bg);background-image:radial-gradient(var(--dot) .5px,transparent .5px);background-size:22px 22px}.WFC_App:before{content:"WAVESET";position:absolute;top:22px;left:28px;font-size:.65rem;letter-spacing:.25em;color:var(--text-dim);font-weight:500;z-index:10}footer{display:none}.generate-bar{position:absolute;bottom:3vh;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:0;z-index:1000;user-select:none}.bar-inner{display:flex;align-items:center;gap:2px;background:rgba(8,8,12,.92);border:1px solid rgba(0,180,255,.18);border-radius:3px;padding:3px;backdrop-filter:blur(16px);box-shadow:0 0 30px #008cff14,0 8px 32px #0009}.bar-btn{display:flex;align-items:center;gap:6px;padding:8px 18px;background:transparent;color:#b4c8e6bf;border:none;border-radius:2px;font-family:JetBrains Mono,Fira Code,Cascadia Code,monospace;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background .15s,color .15s;white-space:nowrap}.bar-btn:hover{background:rgba(0,150,255,.12);color:#7dd4fc}.bar-btn.generate{background:rgba(0,120,255,.15);color:#93c5fd;border-left:1px solid rgba(0,150,255,.2);border-right:1px solid rgba(0,150,255,.2)}.bar-btn.generate:hover{background:rgba(0,140,255,.28);color:#bae6fd}.btn-icon{font-size:.9rem;opacity:.7}.panel{background:rgba(8,8,14,.96);border:1px solid rgba(0,180,255,.15);border-radius:3px;backdrop-filter:blur(20px);box-shadow:0 -4px 40px #0064ff0f,0 8px 32px #000000b3;margin-bottom:4px;transform-origin:bottom center;transition:opacity .2s ease,transform .2s ease}.panel[data-show=false]{opacity:0;pointer-events:none;transform:translateY(6px) scale(.98)}.panel[data-show=true]{opacity:1;transform:translateY(0) scale(1)}.panel-label{margin:0;padding:10px 14px 6px;font-family:JetBrains Mono,monospace;font-size:.6rem;letter-spacing:.15em;color:#00b4ff80}.tile-panel{width:min(80vw,360px)}.tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:6px;padding:8px 14px 14px}.tile-option{aspect-ratio:1;border:1px solid rgba(0,150,255,.12);border-radius:2px;overflow:hidden;background:rgba(255,255,255,.03);cursor:pointer;padding:0;transition:border-color .15s,transform .15s}.tile-option:hover{border-color:#00b4ff80;transform:scale(1.04)}.tile-option img{width:100%;height:100%;object-fit:cover;display:block}.dim-panel{width:min(80vw,360px);padding-bottom:14px}.dim-slider{display:block;width:calc(100% - 28px);margin:4px 14px 2px;accent-color:#3b82f6;cursor:pointer}.dim-extremes{display:flex;justify-content:space-between;padding:0 14px;font-family:JetBrains Mono,monospace;font-size:.6rem;color:#6482b473}.stats-strip{margin-top:4px;font-family:JetBrains Mono,monospace;font-size:.58rem;letter-spacing:.1em;color:#00b4ff59;display:flex;gap:6px}.stats-sep{opacity:.4}.canvas{position:relative;display:flex;align-items:center;justify-content:center;width:min(68vmin,540px);height:min(68vmin,540px);border-radius:2px;filter:drop-shadow(0 0 40px rgba(30,80,200,.18))}.canvas>div{position:relative;width:100%;height:100%;border-radius:2px;overflow:hidden;border:1px solid rgba(59,130,246,.2)}.canvas>div:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:5;background:linear-gradient(to right,rgba(59,130,246,.5) 20px,transparent 20px) 0 0 / 100% 1px no-repeat,linear-gradient(to bottom,rgba(59,130,246,.5) 20px,transparent 20px) 0 0 / 1px 100% no-repeat,linear-gradient(to left,rgba(59,130,246,.5) 20px,transparent 20px) 100% 100% / 100% 1px no-repeat,linear-gradient(to top,rgba(59,130,246,.5) 20px,transparent 20px) 100% 100% / 1px 100% no-repeat}.canvas canvas{display:block;width:100%!important;height:100%!important}