*,*:before,*:after{box-sizing:border-box}*{margin:0}html{interpolate-size:allow-keywords}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p{overflow-wrap:break-word;text-wrap:pretty}h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;text-wrap:balance}#root,#app{isolation:isolate}:root{font-family:Helvetica Neue,Helvetica,Arial,sans-serif;color-scheme:dark;--vm-bg: #000;--vm-fg: #fff;--vm-dim: rgba(255, 255, 255, .6);--vm-line: rgba(255, 255, 255, .28);--vm-danger: #fff}body{min-height:100dvh;background-color:var(--vm-bg);color:var(--vm-fg);text-transform:lowercase}.page{max-width:80ch;margin-inline:auto;padding:2rem}.visualizer{position:relative;min-height:100dvh;overflow:hidden;background:var(--vm-bg)}.matrix-canvas{position:absolute;inset:0;touch-action:none}.matrix-canvas canvas{display:block}.visualizer__settings-toggle{position:absolute;z-index:3;left:50%;bottom:1.25rem;transform:translate(-50%);appearance:none;cursor:pointer;padding:0;border:none;background:transparent;color:var(--vm-dim);font-size:.85rem;font-weight:600;transition:color .2s ease}.visualizer__settings-toggle:hover{color:var(--vm-fg)}.visualizer__settings-toggle:focus-visible{outline:2px solid var(--vm-fg);outline-offset:3px}.visualizer__controls{position:absolute;z-index:2;left:50%;bottom:4.5rem;transform:translate(-50%);width:min(30rem,calc(100vw - 2rem));max-height:min(60vh,30rem);overflow-y:auto;padding:1.25rem 1.25rem 1.5rem;border:1px solid var(--vm-line);border-radius:14px;background:#000000d1}.visualizer__overlay{position:relative;z-index:1;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.5rem;padding:2rem;text-align:center}.visualizer__intro{max-width:32ch;display:flex;flex-direction:column;gap:.9rem}.visualizer__title{margin:0;font-size:clamp(2.4rem,8vw,4rem);font-weight:700;letter-spacing:.02em;color:var(--vm-fg)}.visualizer__subtitle{margin:0;font-size:1.05rem;line-height:1.5;color:var(--vm-dim)}.visualizer__panel{display:flex;flex-direction:column;align-items:center;gap:1rem}.visualizer__start{appearance:none;cursor:pointer;border:none;padding:0;background:transparent;color:var(--vm-fg);font-size:1.2rem;font-weight:600;letter-spacing:.02em;transition:opacity .2s ease,transform .1s ease}.visualizer__start:hover:not(:disabled){text-decoration:underline;text-underline-offset:4px}.visualizer__start:active:not(:disabled){transform:translateY(1px)}.visualizer__start:disabled{cursor:progress;opacity:.6}.visualizer__start:focus-visible{outline:2px solid var(--vm-fg);outline-offset:3px}.visualizer__error{display:flex;flex-direction:column;align-items:center;gap:1rem;max-width:36ch;padding:1.25rem 1.5rem;border:1px solid var(--vm-line);border-radius:14px;background:transparent;color:var(--vm-fg);line-height:1.5}.visualizer__error p{margin:0}.settings{max-width:40rem;margin-inline:auto;padding:2.5rem 1.5rem 4rem;display:flex;flex-direction:column;gap:2rem}.settings__head{display:flex;flex-direction:column;gap:.5rem}.settings__title{margin:0;font-size:clamp(2rem,6vw,2.75rem);font-weight:700;letter-spacing:.02em}.settings__subtitle{margin:0;color:var(--vm-dim);line-height:1.5}.settings__actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}.settings__back:focus-visible{outline:2px solid var(--vm-fg);outline-offset:3px}.grid-controls{display:flex;flex-direction:column;gap:1.75rem}.grid-controls__mode{margin:0;padding:0;border:none;display:flex;flex-direction:column;gap:.6rem}.grid-controls__mode-legend{padding:0;font-size:.95rem}.grid-controls__mode-options{display:flex;gap:1.5rem}.grid-controls__mode-option{appearance:none;cursor:pointer;padding:0;border:none;background:transparent;color:var(--vm-dim);font-size:1rem;font-weight:600;transition:color .2s ease}.grid-controls__mode-option:hover{color:var(--vm-fg)}.grid-controls__mode-option[aria-pressed=true]{color:var(--vm-fg);text-decoration:underline;text-underline-offset:4px}.grid-controls__mode-option:focus-visible{outline:2px solid var(--vm-fg);outline-offset:3px}.grid-controls__mode-hint{margin:0;font-size:.85rem;line-height:1.4;color:var(--vm-dim)}.grid-controls__fields{display:flex;flex-direction:column;gap:1.5rem}.grid-controls__field{display:flex;flex-direction:column;gap:.6rem}.grid-controls__label{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;font-size:.95rem}.grid-controls__value{font-variant-numeric:tabular-nums;color:var(--vm-dim)}.grid-controls__field input[type=range]{width:100%;accent-color:var(--vm-fg);cursor:pointer}.grid-controls__color{appearance:none;-webkit-appearance:none;width:2.25rem;height:1.5rem;padding:0;border:1px solid var(--vm-line);border-radius:6px;background:none;cursor:pointer}.grid-controls__color::-webkit-color-swatch-wrapper{padding:0}.grid-controls__color::-webkit-color-swatch{border:none;border-radius:5px}.grid-controls__color::-moz-color-swatch{border:none;border-radius:5px}.grid-controls__color:focus-visible{outline:2px solid var(--vm-fg);outline-offset:3px}.grid-controls__reset{align-self:flex-start;appearance:none;cursor:pointer;border:none;padding:0;background:transparent;color:var(--vm-fg);font-size:.95rem;font-weight:600;transition:opacity .2s ease}.grid-controls__reset:hover{text-decoration:underline;text-underline-offset:4px}.grid-controls__reset:focus-visible{outline:2px solid var(--vm-fg);outline-offset:3px}.settings__back{color:var(--vm-fg);text-decoration:underline;text-underline-offset:3px}