@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Instrument+Sans:wght@400;500;600;700&display=swap');

:root { --ink: #10231a; --paper: #f2f1ea; --surface: #fffefa; --line: #d4d8cc; --muted: #677269; --accent: #d5f35c; --danger: #a64436; }
* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; color: var(--ink); background: repeating-linear-gradient(90deg, transparent 0 31px, rgba(16,35,26,.035) 32px), var(--paper); font-family: "Instrument Sans", sans-serif; }
button, input { font: inherit; }
button { cursor: pointer; }
.shell { width: min(800px, calc(100% - 40px)); margin: 0 auto; padding: 28px 0 44px; }
.topbar { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 25px; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: inherit; text-decoration: none; font: 700 18px "DM Mono", monospace; letter-spacing: .09em; }.brand-mark { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 6px; color: var(--accent); background: var(--ink); font-size: 17px; }
.protocol, .eyebrow { margin: 0; color: var(--muted); font: 500 10px "DM Mono", monospace; letter-spacing: .1em; }.protocol { display: flex; align-items: center; gap: 6px; }.protocol svg { width: 13px; }
.intro { max-width: 610px; padding: 65px 0 40px; }.intro h1 { max-width: 560px; margin: 12px 0; font-size: clamp(36px, 7vw, 62px); line-height: 1; letter-spacing: 0; }.intro > p:not(.eyebrow) { max-width: 505px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.6; }.intro code { padding: 2px 5px; border: 1px solid var(--line); border-radius: 3px; color: var(--ink); background: var(--surface); font: 12px "DM Mono", monospace; }
.workspace { border-top: 2px solid var(--ink); background: var(--surface); box-shadow: 0 20px 48px rgba(28,45,35,.10); }.mode-switch { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }.mode { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; border: 0; border-bottom: 3px solid transparent; color: var(--muted); background: transparent; font-size: 12px; font-weight: 700; }.mode svg { width: 15px; }.mode.active { border-bottom-color: var(--ink); color: var(--ink); background: #f6f8ed; }
.panel { padding: 26px; }.drop-zone { display: grid; min-height: 170px; place-content: center; gap: 9px; border: 1px dashed #9fa99a; color: var(--muted); background: #fafbf5; text-align: center; outline: none; transition: .16s ease; }.drop-zone svg { width: 27px; height: 27px; margin: 0 auto 3px; color: var(--ink); }.drop-zone strong { color: var(--ink); font-size: 14px; }.drop-zone span { max-width: 320px; font-size: 12px; line-height: 1.45; }.drop-zone:hover, .drop-zone:focus-visible, .drop-zone.dragging { border-color: var(--ink); background: #edf4d9; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 20px 0; }.fields label:last-child { grid-column: 1 / -1; }.fields-open { grid-template-columns: 1fr; }.fields-open label { grid-column: auto !important; }label { display: grid; gap: 7px; font-size: 12px; font-weight: 700; }.optional { color: var(--muted); font-weight: 400; }input { width: 100%; border: 1px solid var(--line); border-radius: 4px; padding: 10px; color: var(--ink); background: #fff; font: 12px "DM Mono", monospace; outline: none; }input:focus { border-color: #60784a; box-shadow: 0 0 0 3px rgba(213,243,92,.34); }
.primary-action { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 43px; width: 100%; border: 1px solid #aac846; border-radius: 4px; color: #253600; background: var(--accent); font-size: 12px; font-weight: 800; }.primary-action svg { width: 16px; }.primary-action:disabled { cursor: not-allowed; opacity: .45; }.primary-action:not(:disabled):hover { background: #c8eb41; }.status { min-height: 20px; margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }.status[data-type="success"] { color: #3d6a38; }.status[data-type="error"] { color: var(--danger); }
.limits { display: grid; grid-template-columns: 18px 1fr; gap: 10px; margin-top: 26px; padding: 15px 0; border-top: 1px solid var(--line); color: var(--muted); }.limits svg { width: 16px; margin-top: 2px; }.limits p { margin: 0; font-size: 11px; line-height: 1.55; }.limits strong { color: var(--ink); }
.legal-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:20px; padding-top:17px; border-top:1px solid var(--line); color:var(--muted); font:500 10px "DM Mono",monospace; }.legal-footer div{display:flex;flex-wrap:wrap;gap:13px}.legal-footer button{border:0;padding:0;background:transparent;color:inherit;font-size:10px}.legal-footer button:hover{color:var(--ink);text-decoration:underline}.legal-dialog{width:min(590px,calc(100% - 28px));max-height:min(760px,86vh);padding:22px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--ink);box-shadow:0 22px 65px rgba(16,35,26,.25)}.legal-dialog::backdrop{background:rgba(16,35,26,.42);backdrop-filter:blur(3px)}.legal-header{display:flex;align-items:center;justify-content:space-between}.dialog-close{display:grid;width:30px;height:30px;place-items:center;padding:0;border:1px solid var(--line);border-radius:4px;background:transparent;color:var(--muted);font-size:18px}.dialog-close:hover{border-color:var(--ink);color:var(--ink)}.legal-dialog h2{margin:18px 0 20px;font-size:28px}.legal-content h3{margin:18px 0 5px;font-size:12px}.legal-content p{margin:0;color:var(--muted);font-size:12px;line-height:1.65}.legal-content a{color:var(--ink);font-weight:700}.legal-content code{padding:1px 4px;border:1px solid var(--line);border-radius:3px;font:10px "DM Mono",monospace}
@media (max-width: 600px) { .shell { width: min(100% - 28px, 800px); padding-top: 18px; }.protocol { display: none; }.intro { padding: 43px 0 30px; }.panel { padding: 16px; }.fields { grid-template-columns: 1fr; }.fields label:last-child { grid-column: auto; }.drop-zone { min-height: 155px; } }