: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}.histogram-group{padding:0!important}#histogram{display:block;width:100%;height:80px;border-radius:4px;border:1px solid #2e2e34;background:#0d0d10}.compare-btn{display:block;width:100%;padding:.45rem .6rem;margin-bottom:.75rem;border:1px solid #555;background:#2c2c2c;border-radius:4px;color:#ddd;font:inherit;text-align:center;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none;transition:background 80ms ease,border-color 80ms ease}.compare-btn:hover{background:#3a3a3a}.compare-btn.active{background:#9ad;border-color:#9ad;color:#111}.split-tone .wheel-wrap{display:flex;justify-content:center;margin:.5rem 0 .6rem}.split-tone #splitWheel{display:block;width:100%;max-width:240px;aspect-ratio:1 / 1;touch-action:none;cursor:crosshair;background:transparent;border-radius:50%}.split-tone .zone-section{margin:.15rem 0 .35rem}.split-tone .zone-section>summary{cursor:pointer;list-style:none;font-size:.78rem;color:#bbb;padding:.2rem 0;-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:.35rem}.split-tone .zone-section>summary::-webkit-details-marker{display:none}.split-tone .zone-section>summary:before{content:"▸";display:inline-block;color:#888;font-size:.7rem;transition:transform 90ms ease}.split-tone .zone-section[open]>summary{color:#ddd}.split-tone .zone-section[open]>summary:before{transform:rotate(90deg)}.split-tone .zone-rows{display:flex;flex-direction:column;gap:.3rem;margin:.25rem 0 .4rem}.split-tone .zone-row{display:grid;grid-template-columns:5.5em 1fr 3em;align-items:center;gap:.4rem;font-size:.78rem}.split-tone .zone-row input[type=range]{width:100%}.split-tone .zone-val{color:#aaa;font-variant-numeric:tabular-nums;text-align:right}.split-tone .zone-label{color:#ccc;display:inline-flex;align-items:center;gap:.35rem}.split-tone .zone-label:before{content:"";width:8px;height:8px;border-radius:50%;background:#888;border:1px solid #fff}.split-tone .zone-label[data-zone=shadow]:before{background:#4a78a8}.split-tone .zone-label[data-zone=midtone]:before{background:#888}.split-tone .zone-label[data-zone=highlight]:before{background:#d4a060}