:root{color-scheme:dark;--bg:#10110f;--panel:#1a1c18;--line:#363a31;--ink:#eeeae1;--muted:#b1b4a9;--accent:#d7ad77;--canvas:#000;font:15px/1.5 system-ui,sans-serif}
*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:var(--bg);color:var(--ink)}main{width:min(1480px,100%);margin:auto;padding:24px clamp(16px,3vw,40px) 32px}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}header{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:20px}h1{font-size:clamp(25px,3vw,36px);font-weight:550;letter-spacing:-.03em;margin:8px 0 0}header p{margin:0;color:var(--muted);font-size:13px;max-width:480px}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;background:var(--panel);padding:14px;border:1px solid var(--line)}.pickers{border-radius:12px 12px 0 0;gap:16px}.picker{display:flex;align-items:center;gap:10px;flex:1;min-width:240px}.picker select{flex:1;min-width:0}.letter{display:grid;place-items:center;border:1px solid #655440;background:#30291f;color:#edc896;width:30px;height:30px;border-radius:6px;font-weight:650}.adjust{border-top:0;gap:18px}.tools{display:flex;gap:6px;align-items:center;flex-wrap:wrap}button,select,input{font:inherit}button,select{color:var(--ink);background:#252a22;border:1px solid #49503f;border-radius:6px;padding:8px 11px}button{cursor:pointer}button:hover{background:#343b2e}button[aria-pressed=true]{background:#c9a574;border-color:#eac998;color:#18150f}button:disabled{opacity:.5;cursor:default}button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #f1c37f;outline-offset:3px}.blend{flex:1;min-width:240px;display:flex;align-items:center;gap:10px}.blend input{flex:1;min-width:80px;accent-color:var(--accent)}output{min-width:72px;text-align:right;font-variant-numeric:tabular-nums;color:#e5c496}.check{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:13px;white-space:nowrap}.check input{accent-color:var(--accent)}.small{font-size:13px;color:var(--muted)}
#viewport{height:min(72vh,950px);min-height:340px;overflow:auto;position:relative;border:1px solid var(--line);border-top:0;background:var(--canvas);touch-action:none;overscroll-behavior:contain;cursor:default}#stage{position:relative;margin:auto;width:1254px;height:1254px;overflow:hidden;visibility:hidden;isolation:isolate}.layer{position:absolute;inset:0;overflow:hidden;background:var(--canvas);pointer-events:none}.layer img{position:absolute;display:block;max-width:none;pointer-events:none;user-select:none;-webkit-user-drag:none;transform-origin:center}#layer-b{opacity:.5}#divider{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#f6d3a0;box-shadow:0 0 0 1px #0008;pointer-events:none}#wipe-handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;display:grid;place-items:center;border:1px solid #f6d3a0;border-radius:50%;background:#eac18d;color:#1b160f;font-size:22px;line-height:1;cursor:ew-resize;touch-action:none;user-select:none;z-index:3;box-shadow:0 2px 8px #0008}#wipe-handle:focus-visible{outline:3px solid white;outline-offset:3px}

.viewer-wrap{position:relative}#loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);pointer-events:none;background:#10110f}.status{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 18px;background:var(--panel);border:1px solid var(--line);border-top:0;border-radius:0 0 12px 12px;padding:10px 14px;font-size:12px;color:var(--muted)}#status{color:#e1d1b9}nav{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;font-size:13px}nav [aria-current=page]{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
@media(max-width:760px){header{display:block}header p{margin-top:10px}.pickers{gap:10px}.picker{min-width:calc(100% - 55px)}.adjust{gap:12px}.blend{flex-basis:100%}#viewport{height:60vh}.toolbar{padding:10px}button,select{padding:8px}.status{font-size:11px}}