:root{--bg: #0b0b0f;--fg: #e8e8ef;--muted: #8a8a99;--accent: #6cf}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;-webkit-font-smoothing:antialiased;line-height:1.6}.top{display:flex;align-items:baseline;gap:1.5rem;padding:1.5rem clamp(1.5rem,6vw,5rem)}.brand{font-size:.8rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--accent)}.top .hint{font-size:.8rem;color:var(--muted)}main{display:flex;flex-direction:column;gap:clamp(5rem,14vh,11rem);padding:clamp(3rem,10vh,7rem) clamp(1.5rem,6vw,5rem) 14rem}.card{display:grid;grid-template-columns:minmax(0,600px) 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}.fx{position:relative;margin:0;width:100%;aspect-ratio:3 / 2;border-radius:10px;overflow:hidden;background:#111;box-shadow:0 20px 60px #00000073}.fx canvas{display:block;width:100%;height:100%}.upload-bar{position:absolute;left:.6rem;bottom:.6rem;display:flex;gap:.4rem;opacity:0;transition:opacity .25s ease}.uploadable:hover .upload-bar{opacity:1}.upload-btn{font-size:.7rem;color:var(--fg);background:#0b0b0fa8;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:.3rem .7rem;cursor:pointer;transition:border-color .2s,background .2s;-webkit-user-select:none;user-select:none}.upload-btn:hover{border-color:var(--accent);color:var(--accent)}.upload-btn input{display:none}.fx.drag{outline:2px dashed var(--accent);outline-offset:-2px}.fx.drag:after{content:"drop image";position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-size:.9rem;letter-spacing:.1em;color:var(--accent);background:#0b0b0f8c;pointer-events:none}.info{max-width:34ch;opacity:0;transform:translate(-10px);transition:opacity .45s ease,transform .45s ease;pointer-events:none;margin-left:-2.5rem;padding-left:2.5rem}.fx:hover+.info,.info:hover{opacity:1;transform:none;pointer-events:auto}.info h2{font-size:clamp(1.3rem,2.4vw,1.9rem);margin:0 0 .6rem}.info p{color:var(--muted);margin:0 0 1rem}.info a{color:var(--accent);text-decoration:none;border-bottom:1px solid currentColor}.info code{font-size:.75rem;color:var(--fg);opacity:.55}@media (max-width: 720px){.card{grid-template-columns:1fr}.info{opacity:1;transform:none;pointer-events:auto;max-width:none}}