:root{font-family:Arial,Helvetica,sans-serif;color:#172236;background:#f4f6f9;font-size:14px;color-scheme:light;letter-spacing:0}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.4;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #a8c4ff;outline-offset:3px}header{min-height:88px;background:#fff;border-bottom:1px solid #dbe1ea;padding:20px 32px;display:flex;justify-content:space-between;align-items:center;gap:16px}.brand{display:flex;align-items:center;gap:12px}.brand-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:8px;background:#2458d3;color:white}.brand-icon svg{width:25px;height:25px}h1{font-size:22px;margin:0 0 4px}h2{font-size:14px;margin:0;font-weight:700}.sub{font-size:11px;color:#627088}.privacy{display:flex;align-items:center;gap:7px;color:#36705a;font-size:12px}svg{width:18px;height:18px;flex-shrink:0}main{display:grid;grid-template-columns:300px minmax(0,1fr);max-width:1200px;margin:0 auto;min-height:calc(100vh - 88px)}aside{padding:28px 24px;background:#fff;border-left:1px solid #e3e8ef;border-right:1px solid #e3e8ef}.section-heading{display:flex;align-items:center;gap:8px;margin-bottom:16px}.section-heading h2{margin-right:auto}.section-heading>span{font-size:12px;color:#66758b}.icon{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid transparent;border-radius:5px;color:#56647a;flex-shrink:0}.icon:hover:not(:disabled){background:#edf2fa;color:#2458d3}.source{border:1px solid #d9e0eb;border-radius:6px;margin-bottom:12px;overflow:hidden;background:#fff}.source.active{border-color:#2458d3;box-shadow:0 0 0 1px #2458d3}.source-top{display:flex;align-items:center;padding:8px 10px;background:#f8faff;gap:6px}.source-top strong{font-size:12px;margin-right:auto}.source-body{width:100%;height:115px;border:0;background:#fff;display:flex;align-items:center;justify-content:center;gap:8px;color:#69758a;overflow:hidden}.source-body img{max-width:100%;max-height:100%;object-fit:contain}.source-body span{font-size:12px}.source-actions{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;border-top:1px solid #edf0f5;gap:8px}.text-button{display:inline-flex;gap:6px;align-items:center;border:0;background:transparent;color:#2458d3;font-size:12px;padding:6px;border-radius:4px}.text-button:hover{background:#eef3ff}.settings{padding:20px 0 8px;margin-top:24px;border-top:1px solid #e1e6ef}.settings h2{margin-bottom:16px}.field{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:13px 0;font-size:12px}.field>span:last-child{color:#66758b}select{max-width:145px;border:1px solid #d5deea;background:#fff;border-radius:5px;padding:7px;color:#172236;font-size:13px}.segmented{display:flex;border:1px solid #d5deea;border-radius:5px;overflow:hidden}.segmented .icon{border-radius:0}.segmented .selected{background:#e8efff;color:#2458d3}.filename{display:block;font-size:12px;margin:18px 0}.filename>div{display:flex;align-items:center;margin-top:8px;border:1px solid #d5deea;border-radius:5px;padding-right:10px;overflow:hidden}.filename input{min-width:0;width:100%;border:0;padding:10px;outline-offset:-3px}.filename span{color:#7a8697}.primary{display:flex;justify-content:center;align-items:center;gap:9px;width:100%;padding:12px;border:0;border-radius:6px;background:#2458d3;color:#fff;font-weight:600}.primary:hover:not(:disabled){background:#1845b0}#status{font-size:12px;color:#53647c;line-height:1.5;min-height:36px}#status.error{color:#b42332}.preview{padding:28px 36px 40px;min-width:0}.preview-heading{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:#6d7b90;font-size:10px;margin-bottom:22px}.paper-wrap{display:flex;justify-content:center;align-items:flex-start}#paper{position:relative;width:100%;max-width:535px;aspect-ratio:210/297;background:#fff;box-shadow:0 3px 20px #1f385e16;flex-shrink:1}.paper-slot{position:absolute;padding:0;background:#f7f9fc;border:1px dashed #dce3ef;display:flex;align-items:center;justify-content:center;overflow:hidden;color:#a2afc0;font-size:28px}.paper-slot.filled{background:white;border:0}.paper-slot img{width:100%;height:100%;object-fit:contain;display:block}.paper-slot.selected:not(.filled){border-color:#2458d3;background:#f2f6ff}.source.dragging{outline:3px solid #2458d3}.paper-slot.dragging{outline:3px solid #2458d3}@media(max-width:720px){header{padding:16px 18px;min-height:78px}h1{font-size:20px}.privacy{font-size:11px;max-width:100px}main{display:flex;flex-direction:column}aside{padding:22px 18px;border:0}#sources{display:grid;grid-template-columns:1fr 1fr;gap:12px}.source{min-width:0;margin:0}.source-actions{flex-wrap:wrap;gap:2px}.source-top{padding:8px 5px}.source-top .icon{width:28px}.source-body{height:110px}.settings{margin-top:22px}.preview{padding:24px 18px 36px}.filename input,select{font-size:16px}.field select{font-size:16px;max-width:155px}.preview-heading{font-size:10px}}@media(prefers-reduced-motion:no-preference){button{transition:background .15s ease}}
:where(dialog){width:min(400px,calc(100vw - 32px));max-width:100%;padding:24px;border:1px solid #dbe1ea;border-radius:8px;color:#172236;box-shadow:0 12px 60px #17223630}dialog::backdrop{background:#17223670}dialog .filename input{font-size:16px}dialog .section-heading{margin-bottom:20px}
.brand .brand-icon{background:transparent}.brand-icon img{display:block;width:44px;height:44px}
:root {
  --accent: #d60970;
  --accent-hover: #af075b;
  --accent-soft: #fff0f7;
  --accent-focus: #f6a4cd;
  background: #f6f5f7;
}
button:focus-visible, input:focus-visible, select:focus-visible {
  outline-color: var(--accent-focus);
}
.icon:hover:not(:disabled), .text-button:hover {
  background: var(--accent-soft);
  color: var(--accent);
}
.source.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.source-top { background: #fff7fb; }
.text-button { color: var(--accent); }
.segmented .selected { background: #fce2ee; color: var(--accent); }
.primary { background: var(--accent); }
.primary:hover:not(:disabled) { background: var(--accent-hover); }
.paper-slot { background: #faf8fa; }
.paper-slot.filled { background: #fff; }
.paper-slot.selected:not(.filled) {
  border-color: var(--accent);
  background: #fff7fb;
}
.source.dragging, .paper-slot.dragging { outline-color: var(--accent); }