:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:13px;accent-color:#9ad}*{box-sizing:border-box}html,body,#app{height:100%;margin:0}body{background:#1a1a1a;color:#ddd}#app{display:grid;grid-template-columns:minmax(0,1fr) 300px;height:100vh}main{position:relative;background:#111;min-width:0;min-height:0;overflow:hidden}#view{display:block;width:100%;height:100%;background:#111}#info{position:absolute;left:1rem;bottom:1rem;background:#0009;padding:.5rem .75rem;border-radius:4px;font-family:ui-monospace,Menlo,monospace;white-space:pre;pointer-events:none;max-width:calc(100% - 2rem)}#controls{background:#222;border-left:1px solid #333;padding:1rem 1rem 2rem;overflow-y:auto;overflow-x:hidden}#controls h1{margin:0 0 1rem;font-size:.95rem;letter-spacing:.18em;text-transform:uppercase;color:#9ad}.group{margin-top:1.25rem;padding-top:.75rem;border-top:1px solid #2f2f2f}.group h2{margin:0 0 .5rem;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:#888}.slider,.split-tone{margin-bottom:.75rem}.slider .head,.split-tone .head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.25rem;font-size:.85rem}.slider .head>span:last-child,.split-tone .head>span:last-child{color:#aaa;font-variant-numeric:tabular-nums;min-width:4ch;text-align:right}input[type=range]{width:100%;background:transparent;margin:0}.row{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.4rem;font-size:.85rem}.row>span{color:#ccc}.row>select{flex:1;min-width:0}select{background:#2c2c2c;color:#ddd;border:1px solid #444;border-radius:4px;padding:.3rem .4rem;font:inherit}.file-pick{display:block;cursor:pointer;margin-bottom:.5rem}.file-pick input{display:none}.file-pick>span{display:block;padding:.45rem .6rem;border:1px solid #555;background:#2c2c2c;border-radius:4px;color:#ddd;text-align:center;transition:background 80ms ease}.file-pick:hover>span{background:#3a3a3a}.file-pick.small>span{padding:.3rem .5rem;font-size:.8rem}.split-tone .swatches{display:flex;gap:.5rem;margin-bottom:.4rem}.split-tone .swatch{flex:1;display:flex;align-items:center;gap:.4rem;cursor:pointer;font-size:.8rem;color:#ccc}.split-tone .swatch input[type=color]{width:30px;height:24px;padding:0;background:#2c2c2c;border:1px solid #444;border-radius:4px;cursor:pointer}.split-tone .swap-btn{flex:0 0 auto;align-self:center;background:#2c2c2c;border:1px solid #444;border-radius:4px;color:#ccc;font-size:.95rem;line-height:1;padding:.25rem .45rem;cursor:pointer}.split-tone .swap-btn:hover{background:#3a3a3a}.split-tone .swap-btn:active{background:#222}