@import"https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap";*{margin:0;padding:0;box-sizing:border-box}body{background-color:#111;color:#eee;font-family:Space Mono,monospace;overflow:hidden;width:100vw;height:100vh;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:40px 40px}canvas{display:block;width:100%;height:100%}#ui{position:absolute;top:20px;left:20px;pointer-events:none;display:flex;flex-direction:column;gap:20px;mix-blend-mode:difference;width:250px}.header h1{font-size:1.2rem;font-weight:700;letter-spacing:-1px;margin-top:10px;border-bottom:2px solid #eee;padding-bottom:5px;margin-bottom:10px}.back-link{color:#eee;text-decoration:none;font-size:.8rem;pointer-events:auto;opacity:.7;text-transform:uppercase}.back-link:hover{opacity:1;text-decoration:underline}.controls{font-size:.8rem;line-height:1.5;background:#00000080;padding:15px;border:1px solid #333;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);pointer-events:auto}.status{margin-bottom:15px;font-weight:700;display:flex;justify-content:space-between;font-size:.9rem}.slider-group{margin-bottom:15px}input[type=range]{width:100%;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:10px 0}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-runnable-track{width:100%;height:2px;cursor:pointer;background:#555}input[type=range]::-webkit-slider-thumb{height:12px;width:12px;background:#fff;cursor:pointer;-webkit-appearance:none;margin-top:-5px;border-radius:0}.presets{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:15px}.btn{background:transparent;border:1px solid #555;color:#eee;padding:5px 10px;font-family:Space Mono,monospace;font-size:.7rem;cursor:pointer;transition:all .2s;text-align:center}.btn:hover{background:#eee;color:#111;border-color:#eee}.controls-extra{margin-bottom:15px;padding-top:15px;border-top:1px dashed #333}.controls-extra label{display:block;font-size:.7rem;font-weight:700;color:#888;margin-bottom:5px;text-transform:uppercase}.instructions{opacity:.6;font-size:.7rem;border-top:1px solid #333;padding-top:10px}.instructions p{margin-bottom:4px}@media (max-width: 600px){#ui{top:10px;left:10px;width:calc(100% - 20px)}.header h1{font-size:1rem}}