:root{--color-black:#111;--color-grid:#ffffff08;--color-gray-100:#d8d8d8;--color-gray-400:#9a9a9a;--color-gray-500:#777;--color-gray-800:#4a4a4a;--color-gray-950:#242424}*{box-sizing:border-box;margin:0}html,body{background:var(--color-black);min-height:100%}body{color:var(--color-gray-100);background:linear-gradient(var(--color-grid) 1px, transparent 1px), linear-gradient(90deg, var(--color-grid) 1px, transparent 1px), var(--color-black);font-synthesis:none;text-rendering:optimizelegibility;background-size:4px 4px;font-family:Helvetica,Arial,sans-serif}.app{min-height:100vh;padding:100px 24px 24px}.app__header{z-index:8;border-bottom:1px solid var(--color-gray-950);background:linear-gradient(var(--color-grid) 1px, transparent 1px), linear-gradient(90deg, var(--color-grid) 1px, transparent 1px), var(--color-black);background-size:4px 4px;justify-content:space-between;height:fit-content;padding:16px 24px;display:flex;position:fixed;top:0;left:0;right:0}.app__title{letter-spacing:-.07em;max-width:680px;color:var(--color-gray-100);font-size:16px;font-weight:400;line-height:.88}.app__intro{max-width:620px;color:var(--color-gray-400);font-size:13px;line-height:1.45}.pipeline{align-items:flex-start;gap:12px;display:flex}.input-zone,.data-zone{border:1px solid var(--color-gray-950);background:var(--color-black);align-content:flex-start;gap:10px;height:fit-content;padding:12px;display:grid}.input-zone{border-color:var(--color-gray-800);width:34vw;min-width:320px;position:sticky;top:100px}.data-zone{flex:1;min-width:0}.pipeline-label{color:var(--color-gray-500);padding-bottom:10px;font-size:11px}.pipeline-label span:first-child{color:var(--color-gray-100)}.pipeline-arrow{flex:0 0 42px;place-items:center;width:42px;display:grid;position:sticky;top:calc(76px + 22rem)}.pipeline-arrow span{background:var(--color-gray-100);width:100%;height:1px;position:relative}.pipeline-arrow span:after{content:"";border-top:1px solid var(--color-gray-100);border-right:1px solid var(--color-gray-100);width:7px;height:7px;position:absolute;top:50%;right:0;transform:translateY(-50%)rotate(45deg)}.data-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.panel{border:1px solid var(--color-gray-950);background:var(--color-black);min-height:220px;padding:14px}.panel--input{min-height:100%}.panel--wide{grid-column:1/-1}.panel__head{align-items:baseline;margin-bottom:22px;padding-bottom:10px}.panel__index,.dropzone__meta{color:var(--color-gray-500);font-size:11px}.panel__title{letter-spacing:.08em;color:var(--color-gray-100);font-size:12px;font-weight:400}.panel__data{scrollbar-width:none;-ms-overflow-style:none;height:400px;overflow-y:scroll}.panel__data::-webkit-scrollbar{display:none}.dropzone{border:1px dashed var(--color-gray-800);background:var(--color-black);text-align:center;cursor:pointer;place-content:center;min-height:calc(100vh - 330px);display:grid;position:relative;overflow:hidden}.dropzone__input{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}.dropzone__content{place-items:center;display:grid}.dropzone__text{color:var(--color-gray-100);margin-bottom:8px;font-size:16px}.dropzone__canvas{object-fit:contain;max-width:100%;max-height:calc(100vh - 380px);display:block}.dropzone__replace{z-index:2;border:1px solid var(--color-gray-800);background:var(--color-black);letter-spacing:.12em;text-transform:uppercase;color:var(--color-gray-100);pointer-events:none;padding:6px 8px;font-size:11px;line-height:1;position:absolute;top:12px;right:12px}.structure-preview{border:1px solid var(--color-gray-950);width:100%;image-rendering:pixelated;margin-bottom:16px;display:block}.json-view{color:var(--color-gray-400);white-space:pre-wrap;font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:12px;line-height:1.55}@media (width<=1100px){.pipeline{grid-template-columns:1fr;display:grid}.input-zone,.pipeline-arrow{width:auto;min-width:0;position:static}.data-grid{grid-template-columns:1fr}.pipeline-arrow{height:42px;min-height:42px}.pipeline-arrow span{width:1px;height:100%}.pipeline-arrow span:after{top:auto;bottom:0;right:50%;transform:translate(50%)rotate(135deg)}.panel--wide{grid-column:auto}.dropzone{min-height:280px}}.u-uppercase{letter-spacing:.12em;text-transform:uppercase;line-height:1}.o-section-head{border-bottom:1px solid var(--color-gray-950);justify-content:space-between;gap:16px;display:flex}.is-hidden{display:none}::selection{color:#000;background-color:#ff0}.device-lock{display:none}.device-lock__panel{border:1px solid var(--color-gray-950);background:var(--color-black);max-width:420px;padding:24px}.device-lock__eyebrow{color:var(--color-gray-500);margin-bottom:18px;font-size:11px}.device-lock__title{letter-spacing:-.07em;color:var(--color-gray-100);margin-bottom:18px;font-size:24px;font-weight:400;line-height:.88}.device-lock__text{color:var(--color-gray-400);font-size:13px;line-height:1.45}@media (width<=1024px),(hover:none) and (pointer:coarse){.app{display:none}.device-lock{background:linear-gradient(var(--color-grid) 1px, transparent 1px), linear-gradient(90deg, var(--color-grid) 1px, transparent 1px), var(--color-black);background-size:4px 4px;place-items:center;min-height:100vh;padding:24px;display:grid}}