:root{--bg: #f4f4f2;--surface: #ffffff;--surface-sunken: #ebebe7;--border: #dcdcd6;--border-strong: #c2c2b8;--text: #1c1c1a;--text-muted: #6b6b64;--accent: #1c1c1a;--accent-text: #ffffff;--danger: #8c2f22;--danger-bg: #fbeae7;--danger-border: #f0cec7;--radius: 14px;--shadow: 0 1px 2px rgb(0 0 0 / 6%), 0 8px 24px -12px rgb(0 0 0 / 18%);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:16px;line-height:1.55;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}@media(prefers-color-scheme:dark){:root{--bg: #131315;--surface: #1c1c1f;--surface-sunken: #242428;--border: #33333a;--border-strong: #4a4a54;--text: #f2f2ef;--text-muted: #9a9a94;--accent: #f2f2ef;--accent-text: #131315;--danger: #f0a89c;--danger-bg: #3a1f1b;--danger-border: #5c332c;--shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px -12px rgb(0 0 0 / 60%)}}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--bg);color:var(--text)}h1,h2{margin:0;font-weight:600;letter-spacing:-.02em}a{color:inherit}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.app{display:flex;flex-direction:column;min-height:100vh}.app-header{display:flex;align-items:baseline;gap:10px;padding:20px 28px;border-bottom:1px solid var(--border)}.brand{font-weight:600;letter-spacing:-.02em}.brand-note{color:var(--text-muted);font-size:.875rem}.app-main{flex:1;width:100%;max-width:1080px;margin:0 auto;padding:40px 24px 56px}.app-footer{padding:24px;border-top:1px solid var(--border);color:var(--text-muted);font-size:.8125rem;text-align:center}.app-footer p{margin:2px 0}.dropzone{display:flex;flex-direction:column;align-items:center;gap:14px;padding:64px 32px;text-align:center;background:var(--surface);border:2px dashed var(--border-strong);border-radius:var(--radius);transition:border-color .15s ease,background-color .15s ease}.dropzone:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.dropzone.is-active{border-color:var(--accent);background:var(--surface-sunken)}.dropzone-title{font-size:1.5rem;max-width:30ch;text-wrap:balance}.dropzone-text{margin:0;max-width:56ch;color:var(--text-muted)}.dropzone-formats{margin:0;font-size:.8125rem;color:var(--text-muted)}.button{display:inline-block;padding:10px 20px;font:inherit;font-weight:500;color:var(--accent-text);background:var(--accent);border:1px solid var(--accent);border-radius:999px;cursor:pointer}.button:hover{opacity:.86}.button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.button-quiet{color:var(--text);background:transparent;border-color:var(--border-strong)}.field{display:flex;align-items:center;gap:8px}.field-label{font-size:.8125rem;color:var(--text-muted);white-space:nowrap}.field-input{width:14ch;padding:9px 12px;font:inherit;font-size:.9375rem;color:var(--text);background:var(--surface);border:1px solid var(--border-strong);border-radius:999px}.field-input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.button:disabled{opacity:.5;cursor:default}.notice{margin-top:20px;padding:14px 18px;background:var(--surface-sunken);border:1px solid var(--border);border-radius:10px;font-size:.9375rem}.notice-danger{color:var(--danger);background:var(--danger-bg);border-color:var(--danger-border)}.help{margin-top:28px;padding:16px 18px;background:var(--surface);border:1px solid var(--border);border-radius:10px;font-size:.9375rem}.help summary{cursor:pointer;font-weight:500}.help p{margin:12px 0;color:var(--text-muted);max-width:68ch}.help pre{margin:0;padding:12px 14px;overflow-x:auto;background:var(--surface-sunken);border-radius:8px;font-size:.8125rem}.stage,.demo-stage{width:100%;aspect-ratio:3 / 2;max-height:60vh;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}.viewer-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:20px}.viewer-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.hint,.demo-status{margin:0;color:var(--text-muted);font-size:.9375rem}#demo{padding:40px 24px;max-width:1080px;margin:0 auto}.demo-stage{max-width:1000px;margin:0 auto}.demo-status{margin:16px auto 0;max-width:1000px;text-align:center}@media(max-width:600px){.dropzone{padding:44px 20px}.dropzone-title{font-size:1.25rem}.app-main{padding:28px 16px 40px}}