:root{--bg: #f7f3ea;--bg-soft: #f1e8d7;--accent: #2f5b4d;--accent-2: #d47f4a;--ink: #1f2328;--muted: #5b636a;--panel: rgba(255, 255, 255, .92);--border: rgba(18, 24, 31, .12);--shadow: rgba(27, 31, 36, .12)}*{box-sizing:border-box}body{margin:0;background:radial-gradient(900px 600px at 10% 10%,#fff6e1 0%,var(--bg) 55%),linear-gradient(120deg,#f6efe2,#efe4cf);color:var(--ink);font-family:Space Grotesk,system-ui,sans-serif}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(520px 360px at 85% 20%,rgba(47,91,77,.18),transparent 60%),radial-gradient(620px 420px at 20% 90%,rgba(212,127,74,.22),transparent 65%);pointer-events:none;z-index:-1}.app{padding:28px 28px 36px;max-width:1400px;margin:0 auto;animation:fadeIn .6s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}header{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-bottom:20px}.title{font-size:32px;font-weight:600;letter-spacing:.02em;margin:0}.subtitle{color:var(--muted);margin:4px 0 0;font-size:14px}.header-controls{margin-left:auto;display:flex;flex-wrap:wrap;gap:12px;align-items:center}.grid{display:grid;grid-template-columns:minmax(360px,1fr) minmax(360px,1fr);grid-template-areas:"input inspector" "output output";gap:18px}.panel.input{grid-area:input}.panel.output{grid-area:output}.panel.inspector{grid-area:inspector}.panel{background:var(--panel);border:1px solid var(--border);border-radius:16px;box-shadow:0 20px 40px var(--shadow);padding:16px;display:flex;flex-direction:column;gap:12px}.panel h2{font-size:18px;margin:0;display:flex;align-items:center;gap:8px}.panel h2 span{font-size:12px;color:var(--muted);font-weight:400}.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}label{font-size:12px;color:var(--muted)}select,input[type=number],button{background:#fff;color:var(--ink);border:1px solid var(--border);border-radius:10px;padding:8px 10px;font-family:Space Grotesk,system-ui,sans-serif;font-size:13px}button{cursor:pointer;background:linear-gradient(120deg,var(--accent),#3e7a66);color:#f9f6ef;border:none;font-weight:600;box-shadow:0 8px 20px #2f5b4d33}button.secondary{background:#fff;color:var(--ink);border:1px solid var(--border);box-shadow:none}.toggle{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:#2f5b4d14}.editor{border-radius:12px;border:1px solid var(--border);overflow:hidden;min-height:160px}#inputEdit{height:34vh}#protocolEdit{height:18vh}#resultEdit{height:68vh}.output .editor{min-height:420px}#fieldTable{width:100%;border-collapse:collapse;font-size:12px}#fieldTable th,#fieldTable td{padding:6px 8px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}#fieldTable th{color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:10px}#fieldTable tr.child td{color:var(--muted)}#fieldTable tr.child td:first-child{padding-left:22px}.length-bar{height:6px;border-radius:999px;background:#2f5b4d26;overflow:hidden}.length-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2))}.note{font-size:12px;color:var(--muted)}code{font-family:JetBrains Mono,ui-monospace,monospace;background:#2f5b4d14;padding:2px 6px;border-radius:6px;border:1px solid var(--border);white-space:pre-wrap;word-break:break-word;display:inline-block;max-width:100%}@media (max-width: 1024px){.grid{grid-template-columns:1fr;grid-template-areas:"input" "output" "inspector"}#resultEdit{height:42vh}}