:root{color-scheme:light;font-family:Space Grotesk,Avenir Next,Segoe UI,sans-serif;line-height:1.5;font-weight:400;--paper: #f4f4f2;--ink: #171717;--muted: #666666;--panel: rgba(250, 250, 248, .96);--panel-strong: #ffffff;--border: rgba(23, 23, 23, .14);--accent: #2a2a2a;--accent-strong: #111111;--error: #8a1f1f;background:radial-gradient(circle at top,rgba(0,0,0,.04),transparent 42%),linear-gradient(180deg,#fbfbfa,#f0f0ed);color:var(--ink)}*{box-sizing:border-box}html,body,#app{min-height:100%}body{margin:0}button,input,select{font:inherit}img{display:block;max-width:100%}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.shell{display:grid;min-height:100vh;grid-template-columns:minmax(320px,420px) minmax(0,1fr);gap:18px;padding:18px;align-items:start}.compare-panel{background:var(--panel);border:1px solid var(--border);border-radius:28px;box-shadow:0 18px 48px #0000000f}.hero{display:flex;flex-direction:column;gap:14px;padding:10px 8px}.hero h1{margin:0;font-size:clamp(2.05rem,2.8vw,3.2rem);line-height:.96;letter-spacing:-.06em}.lede{margin:0;max-width:30rem;color:var(--muted)}.status-card{display:grid;gap:10px 20px;grid-template-columns:repeat(3,minmax(0,1fr));padding-block:10px 12px;border-block:1px solid var(--border)}.status-card>div:last-child{grid-column:1 / -1}.label{margin:0 0 4px;font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.value,.status-text{margin:0}.model-picker{display:grid;gap:8px;padding-block:4px 10px}.model-title{margin:0;font-size:1.05rem;font-weight:700;color:var(--ink)}.model-meta{color:var(--muted);font-size:.9rem}.dropzone{display:grid;place-items:center;gap:8px;min-height:180px;padding:20px;border:1.5px dashed rgba(23,23,23,.22);border-radius:24px;background:linear-gradient(180deg,#ffffffdb,#f5f5f3f5);text-align:center;cursor:pointer;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.dropzone-active{border-color:#17171761;box-shadow:0 14px 28px #00000012}.dropzone-title{margin:0;font-size:1.15rem;font-weight:700}.dropzone-copy{margin:0;color:var(--muted)}.helper-text{margin:-2px 0 0;color:var(--muted);font-size:.92rem}.actions{display:grid;gap:12px}.button{border:1px solid transparent;border-radius:999px;padding:14px 20px;font-weight:700;cursor:pointer;transition:transform .18s ease,opacity .18s ease,background .18s ease}.button:disabled{cursor:not-allowed;opacity:.5}.button:not(:disabled):hover{transform:translateY(-1px)}.button-primary{background:linear-gradient(180deg,#2a2a2a,#111);color:#fff;border-color:#0006}.button-secondary{background:#ffffffeb;border:1px solid rgba(23,23,23,.18);color:var(--ink)}.error-text{margin:0;color:var(--error)}.video-options{display:grid;gap:8px}.field{display:grid;gap:6px}.field-input{width:100%;border:1px solid rgba(23,23,23,.18);border-radius:16px;padding:12px 14px;background:#ffffffeb;color:var(--ink)}.field-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23606060' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:calc(100% - 18px) 50%;background-repeat:no-repeat;background-size:14px 9px;padding-right:44px}.field-range{width:100%;margin:0;accent-color:#202020}.color-row{display:flex;align-items:center;gap:12px;border:1px solid rgba(23,23,23,.18);border-radius:16px;padding:10px 12px;background:#ffffffeb}.color-swatch{width:42px;height:42px;padding:0;border:0;background:transparent;cursor:pointer}.color-value{font-family:IBM Plex Mono,SFMono-Regular,monospace;font-size:.92rem;color:var(--ink)}.field-hint{margin:0;color:var(--muted);font-size:.9rem}.workspace{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-self:start;position:sticky;top:18px}.stage{display:grid;flex:1;place-items:center;position:relative;overflow:hidden;min-height:360px;border-radius:20px;background:radial-gradient(circle at center,rgba(0,0,0,.035),transparent 56%),#ffffffd1}.checkerboard{background-color:#f7f7f7;background-image:linear-gradient(45deg,#e6e6e6 25%,transparent 25%),linear-gradient(-45deg,#e6e6e6 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e6e6e6 75%),linear-gradient(-45deg,transparent 75%,#e6e6e6 75%);background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px}.stage img,.stage video,.stage canvas{width:100%;height:100%;object-fit:contain}.compare-panel{display:flex;flex-direction:column;height:calc(100vh - 36px);gap:12px;padding:12px}.result-note{margin:0}.result-note{color:var(--muted);font-size:.92rem}.compare-stage{cursor:col-resize;flex:1;min-height:0;-webkit-user-select:none;user-select:none}.compare-image{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.compare-solid-fill,.compare-video{pointer-events:none}.compare-divider{position:absolute;inset-block:0;width:2px;background:linear-gradient(180deg,transparent,rgba(24,34,37,.8),transparent);box-shadow:0 0 0 1px #ffffff8c,0 0 18px #1822253d}.compare-handle{position:absolute;top:50%;left:50%;display:flex;gap:4px;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid rgba(23,23,23,.14);border-radius:999px;background:#fffffff5;box-shadow:0 10px 24px #0000001f;transform:translate(-50%,-50%)}.preview-control{position:absolute;left:50%;bottom:18px;z-index:4;transform:translate(-50%);border:1px solid rgba(23,23,23,.14);border-radius:999px;padding:10px 16px;background:#fffffff5;color:var(--ink);box-shadow:0 10px 24px #0000001f;opacity:0;pointer-events:none;transition:opacity .16s ease}.compare-stage:hover .preview-control,.compare-stage:focus-within .preview-control,.preview-control:focus-visible{opacity:1;pointer-events:auto}.compare-handle span{width:2px;height:14px;border-radius:999px;background:#182225b8}.stage-badge{position:absolute;top:16px;display:grid;gap:2px;padding:10px 12px;border:1px solid rgba(23,23,23,.12);border-radius:14px;background:#ffffffe6;box-shadow:0 8px 18px #0000000f;color:var(--muted);font-size:.88rem}.stage-badge-left{left:16px}.stage-badge-right{right:16px;text-align:right}.stage-badge-title{color:var(--ink);font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.empty{margin:0;max-width:16rem;text-align:center;color:var(--muted)}@media(max-width:1180px){.shell{grid-template-columns:1fr}.workspace{grid-template-columns:1fr;position:static}.compare-panel{height:auto}.stage{min-height:320px}.compare-stage{min-height:380px}}