.u-mono,.app__brand,.panel__title,.panel__step,.segmented__option,.btn,.control__value,.readout{font-variation-settings:var(--axis-mono)}.app{height:100vh;display:grid;grid-template-columns:1fr 320px;background:var(--surface)}.app__stage{display:flex;flex-direction:column;min-width:0;padding:var(--space-md) var(--space-lg);gap:var(--space-md)}.app__brand{font-size:20px;font-weight:var(--wght-bold);line-height:1.2;text-transform:uppercase;letter-spacing:.08em;color:var(--ink)}.app__panels{border-left:1px solid var(--rule);overflow-y:auto;padding:var(--space-md);display:flex;flex-direction:column;gap:var(--space-sm)}.stage{position:relative;flex:1;min-height:0}.stage__canvas,.p5-canvas{position:absolute;top:0;right:0;bottom:0;left:0}.stage__canvas canvas{display:block}.stage__view{position:absolute;top:0;right:0;z-index:2}.stage__zoom{position:absolute;right:0;bottom:0;z-index:2}.stage__readout{position:absolute;left:0;bottom:0;max-width:22rem;pointer-events:none}.p5-canvas{outline:0}.p5-canvas:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.p5-canvas canvas{touch-action:none}.p5-canvas[data-can-pan=true] canvas{cursor:grab}.p5-canvas--dragging canvas{cursor:grabbing}.zoom-controls{display:inline-flex;height:34px;overflow:hidden;border:1px solid var(--ink);border-radius:var(--radius-sm);background:var(--surface);font-variation-settings:var(--axis-mono);font-variant-numeric:tabular-nums}.zoom-controls__button,.zoom-controls__value{width:34px;height:32px;display:grid;place-items:center;flex:none;border:0;border-right:1px solid var(--ink);background:var(--surface);color:var(--ink)}.zoom-controls__button{padding:0;cursor:pointer}.zoom-controls__button:hover:not(:disabled){background:var(--rule)}.zoom-controls__button:disabled{color:var(--ink-faint);cursor:not-allowed}.zoom-controls__button:last-child{border-right:0}.zoom-controls__button svg{width:17px;height:17px;stroke-width:1.5}.zoom-controls__value{width:52px;margin:0;font:inherit;font-size:12px;font-weight:var(--wght-medium)}.readout{display:flex;flex-direction:column;gap:var(--space-2xs);font-size:13px;line-height:1.4;font-variant-numeric:tabular-nums}.readout__row{display:flex;align-items:baseline;gap:var(--space-xs);flex-wrap:wrap}.readout__label{min-width:6.5rem;color:var(--ink-muted)}.readout__value{color:var(--ink);font-weight:var(--wght-medium)}.panel{border:1px solid var(--rule);border-radius:var(--radius-md);background:var(--surface);padding:var(--space-md)}.panel__title{display:flex;align-items:center;gap:var(--space-xs);margin:0 0 var(--space-sm);font-size:12px;font-weight:var(--wght-bold);line-height:1.33;text-transform:uppercase;letter-spacing:.1em;color:var(--ink)}.panel__step{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:var(--radius-full);background:var(--ink);color:var(--surface);font-size:10px;font-weight:var(--wght-bold);letter-spacing:.12em;text-indent:.12em}.panel__body{display:flex;flex-direction:column;gap:var(--space-sm)}.dropzone{border:1px dashed var(--ink);border-radius:var(--radius-sm);min-height:96px;display:grid;place-items:center;cursor:pointer;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);overflow:hidden}.dropzone:hover{border-color:var(--ink-muted);background:var(--rule)}.dropzone--over,.dropzone--over:hover{border-color:var(--accent);background:var(--accent-wash)}.dropzone__hint{margin:0;text-align:center;color:var(--ink-muted);font-size:14px}.dropzone__browse{color:var(--accent);text-decoration:underline}.dropzone__thumb{max-width:100%;max-height:160px;display:block}.source-example{display:flex;flex-direction:column;gap:var(--space-xs)}.source-example__label{margin:0;color:var(--ink-muted);font-variation-settings:var(--axis-mono);font-size:10px;font-weight:var(--wght-bold);line-height:1.2;letter-spacing:.1em;text-transform:uppercase}.source-example__action{width:100%;min-height:54px;display:grid;grid-template-columns:52px minmax(0,1fr);align-items:stretch;padding:0;border:1px solid var(--ink);border-radius:var(--radius-sm);overflow:hidden;background:var(--surface);color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}.source-example__action:hover{border-color:var(--ink-muted);background:var(--rule)}.source-example__thumb{width:52px;height:52px;display:block;object-fit:cover;border-right:1px solid var(--ink)}.source-example__copy{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:var(--space-xs);padding:var(--space-xs)}.source-example__name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.source-example__command{flex:none;color:var(--accent);font-variation-settings:var(--axis-mono);font-size:11px;font-weight:var(--wght-medium)}.source__meta{margin:var(--space-sm) 0 0;font-size:12px;line-height:1.33;color:var(--ink-muted);word-break:break-all}.algorithm__desc{margin:0;font-size:12px;line-height:1.33;color:var(--ink-muted)}.control{display:flex;align-items:center;gap:var(--space-sm);font-size:14px}.control--slider{display:grid;grid-template-columns:6rem 1fr 3.75rem;align-items:center}.control__label{color:var(--ink-muted)}.control__value{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink)}.control__unit{color:var(--ink-muted)}.control--slider input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:20px;background:transparent;cursor:pointer}.control--slider input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--ink);border-radius:var(--radius-full)}.control--slider input[type=range]::-moz-range-track{height:2px;background:var(--ink);border-radius:var(--radius-full)}.control--slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;margin-top:-5px;border:0;border-radius:var(--radius-full);background:var(--ink);cursor:pointer}.control--slider input[type=range]::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:var(--radius-full);background:var(--ink);cursor:pointer}.control--toggle{justify-content:space-between;cursor:pointer}.control--toggle input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.control__switch{flex:none;width:34px;height:20px;border-radius:var(--radius-full);background:var(--rule);border:1px solid var(--ink);position:relative;transition:background var(--dur-switch) var(--ease)}.control__switch:after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:var(--radius-full);background:var(--ink);transition:transform var(--dur-switch) var(--ease),background var(--dur-switch) var(--ease)}.control--toggle input:checked+.control__switch{background:var(--ink)}.control--toggle input:checked+.control__switch:after{background:var(--surface);transform:translate(14px)}.control--toggle input:focus-visible+.control__switch{outline:2px solid var(--accent);outline-offset:2px}.control--select select{flex:1;min-width:0;height:40px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--surface);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23000000' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--space-sm) center;color:var(--ink);border:1px solid var(--ink);border-radius:var(--radius-sm);padding:var(--space-xs) var(--space-sm);padding-right:calc(var(--space-sm) + 10px + var(--space-xs));font:inherit;font-size:14px;cursor:pointer;transition:border-color var(--dur) var(--ease)}.control--select select:hover{border-color:var(--ink-muted)}.penrow{display:grid;grid-template-columns:1rem 1fr 24px;align-items:center;gap:var(--space-xs);font-size:14px}.penrow--nochannel{grid-template-columns:1fr 24px}.penrow__channel{font-variation-settings:var(--axis-mono);font-size:12px;font-weight:var(--wght-bold);letter-spacing:.1em;color:var(--ink);text-align:center}.penrow__field{display:flex;align-items:stretch;height:32px;min-width:0;border:1px solid var(--ink);border-radius:var(--radius-sm);overflow:hidden;background:var(--surface);transition:border-color var(--dur) var(--ease)}.penrow__field:focus-within{border-color:var(--accent)}.penrow__picker{flex:none;width:30px;height:100%;display:block;padding:0;border:0;border-right:1px solid var(--ink);border-radius:0;background:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.penrow__picker::-webkit-color-swatch-wrapper{width:100%;height:100%;padding:0}.penrow__picker::-webkit-color-swatch{width:100%;height:100%;border:0}.penrow__picker::-moz-color-swatch{width:100%;height:100%;border:0}.penrow__hex{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);padding:0 var(--space-xs);font:inherit;font-variation-settings:var(--axis-mono);font-size:12px;letter-spacing:.04em}.penrow__hex:focus{outline:0}.penrow__eye{display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--ink);cursor:pointer}.penrow__eye:hover{background:var(--rule)}.eye{width:18px;height:18px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}.eye__iris{fill:currentColor;stroke:none}.eye__open,.eye__closed{transition:opacity var(--dur-switch) var(--ease),transform var(--dur-switch) var(--ease)}.eye__open{opacity:1;transform:translateY(0)}.eye__closed{opacity:0;transform:translateY(-2px)}.penrow__eye--off{color:var(--ink-muted)}.penrow__eye--off .eye__open{opacity:0;transform:translateY(2px)}.penrow__eye--off .eye__closed{opacity:1;transform:translateY(0)}.penrow--disabled .penrow__field{border-color:var(--rule)}.penrow--disabled .penrow__channel,.penrow--disabled .penrow__hex{color:var(--ink-faint)}.penrow__picker--none{border-right-color:var(--rule);background-color:var(--surface);background-image:linear-gradient(to bottom right,transparent calc(50% - .75px),var(--error) calc(50% - .75px),var(--error) calc(50% + .75px),transparent calc(50% + .75px))}.penrow__hex--static{display:flex;align-items:center}.segmented{position:relative;display:inline-block;border:1px solid var(--ink);border-radius:var(--radius-sm);overflow:hidden;background:var(--surface)}.segmented__row{display:flex}.segmented__option{flex:1;display:grid;place-items:center;border:0;border-right:1px solid var(--ink);background:transparent;color:var(--ink);padding:var(--space-xs) var(--space-sm);font:inherit;font-size:12px;font-weight:var(--wght-bold);text-transform:uppercase;letter-spacing:.1em;white-space:nowrap;cursor:pointer;transition:border-color var(--dur-switch) var(--ease)}.segmented__option:last-child{border-right:0}.segmented__option--nodiv{border-right-color:transparent}.segmented__fill{position:absolute;top:0;bottom:0;left:calc(var(--seg-index) * 100% / var(--seg-count));width:calc(100% / var(--seg-count));background:var(--ink);overflow:hidden;pointer-events:none;transition:left var(--dur-switch) var(--ease)}.segmented__row--knockout{position:absolute;top:0;left:calc(var(--seg-index) * -100%);width:calc(var(--seg-count) * 100%);color:var(--surface);transition:left var(--dur-switch) var(--ease)}.segmented__row--knockout .segmented__option{color:var(--surface);border-right-color:transparent}.segmented__option:hover{background:var(--rule)}.segmented__row--knockout .segmented__option:hover{background:transparent}.export__actions{display:flex;flex-direction:column;gap:var(--space-xs)}.btn{height:40px;border:1px solid var(--ink);background:var(--surface);color:var(--ink);border-radius:var(--radius-sm);padding:var(--space-xs) var(--space-md);font:inherit;font-size:14px;font-weight:var(--wght-medium);cursor:pointer;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease)}.btn:hover:not(:disabled){border-color:var(--ink-muted);color:var(--ink-muted)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn--primary{background:var(--ink);border-color:var(--ink);color:var(--surface)}.btn--primary:hover:not(:disabled){background:var(--ink-muted);border-color:var(--ink-muted);color:var(--surface)}.export__note{margin:0;font-size:12px;line-height:1.33;color:var(--ink-muted)}@font-face{font-family:Bakemono;src:url(/nib/assets/Bakemono-Variable-C-zb2Kh_.ttf) format("truetype");font-weight:100 800;font-display:swap}:root{--ink: #000000;--ink-muted: #4b4b4b;--ink-faint: #9e9e9e;--accent: #0066cc;--accent-wash: rgba(0, 102, 204, .08);--surface: #ffffff;--error: #d92d20;--rule: #e5e7eb;--font: "Bakemono", ui-monospace, system-ui, sans-serif;--axis-text: "mono" 0;--axis-mono: "mono" 1000;--wght-regular: 450;--wght-medium: 560;--wght-bold: 670;--space-hair: 2px;--space-2xs: 4px;--space-xs: 8px;--space-sm: 12px;--space-md: 16px;--space-lg: 24px;--space-xl: 48px;--radius-none: 0px;--radius-sm: 4px;--radius-md: 8px;--radius-full: 9999px;--dur: .12s;--dur-switch: .2s;--ease: cubic-bezier(.2, 0, .2, 1);font-family:var(--font);font-variation-settings:var(--axis-text);font-weight:var(--wght-regular);font-size:14px;line-height:1.43;letter-spacing:.1px;color:var(--ink);background:var(--surface);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-height:100vh}h1,h2{margin:0;font-size:inherit;font-weight:inherit}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}