:root{--ink: #152028;--ink-soft: #3a4a56;--muted: #6b7c88;--paper: #eef3f6;--paper-2: #e2eaf0;--surface: #f7fafc;--line: #c5d2db;--accent: #0d7a7a;--accent-2: #0a5f5f;--accent-soft: #d5efef;--warn: #b86a12;--warn-soft: #f6e6cf;--danger: #b32645;--danger-soft: #f6d7de;--ok: #1f7a4d;--ok-soft: #d5efe3;--info: #1f5f8a;--info-soft: #d7e8f4;--mono: "IBM Plex Mono", ui-monospace, monospace;--sans: "IBM Plex Sans", "Segoe UI", sans-serif;--display: "IBM Plex Sans", "Segoe UI", sans-serif;--radius: 10px;--max: 1080px}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}body{font-family:var(--sans);color:var(--ink);background:radial-gradient(1200px 600px at 10% -10%,#d9ecec 0%,transparent 55%),radial-gradient(900px 500px at 100% 0%,#dfe8f2 0%,transparent 50%),linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%);line-height:1.45}.app{max-width:var(--max);margin:0 auto;padding:28px 18px 64px}.brand{display:flex;flex-direction:column;gap:8px;margin-bottom:22px}.brand-mark{font-family:var(--display);font-size:clamp(1.8rem,3vw,2.35rem);font-weight:700;letter-spacing:-.03em;color:var(--ink);margin:0}.brand p{margin:0;max-width:62ch;color:var(--ink-soft);font-size:1.02rem}.meta-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--line);border-radius:999px;background:#ffffff8c;color:var(--ink-soft);font-size:.78rem;font-family:var(--mono)}.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 22px}.tab{border:1px solid var(--line);background:#ffffff80;color:var(--ink-soft);border-radius:999px;padding:8px 14px;font:inherit;font-size:.92rem;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease}.tab:hover{border-color:var(--accent);color:var(--accent-2)}.tab.active{background:var(--accent);border-color:var(--accent);color:#fff}.section{display:flex;flex-direction:column;gap:16px}h2{margin:8px 0 0;font-size:1.28rem;letter-spacing:-.02em}h3{margin:0;font-size:1.02rem}.lede{margin:0;color:var(--ink-soft)}.callout{border-radius:var(--radius);padding:14px 16px;border:1px solid var(--line);background:#ffffffa6}.callout.info{border-color:#9fc0d8;background:var(--info-soft)}.callout.warn{border-color:#e0c08a;background:var(--warn-soft)}.callout.ok{border-color:#8fc9aa;background:var(--ok-soft)}.callout.danger{border-color:#e0a0b0;background:var(--danger-soft)}.callout strong{display:block;margin-bottom:4px}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.stat{background:#ffffffb8;border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px}.stat .v{font-size:1.35rem;font-weight:700;letter-spacing:-.02em;font-family:var(--mono)}.stat .l{margin-top:2px;font-size:.78rem;color:var(--muted)}.stat.ok .v{color:var(--ok)}.stat.warn .v{color:var(--warn)}.stat.bad .v{color:var(--danger)}.stat.info .v{color:var(--info)}.controls{display:flex;flex-wrap:wrap;gap:12px}.field{display:flex;flex-direction:column;gap:4px;min-width:160px;flex:1}.field label{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}select,textarea,input[type=file]{font:inherit}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--line);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7c88' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center;border-radius:8px;padding:9px 34px 9px 12px;color:var(--ink)}textarea{width:100%;border:1px solid var(--line);border-radius:var(--radius);padding:12px;background:#fff;font-family:var(--mono);font-size:.82rem;line-height:1.4;resize:vertical;min-height:220px}.grid-2{display:grid;grid-template-columns:1.2fr 1fr;gap:16px}.panel{background:#ffffffb8;border:1px solid var(--line);border-radius:var(--radius);padding:14px;display:flex;flex-direction:column;gap:10px}.panel-title{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}.bar-track{display:flex;height:14px;border-radius:999px;overflow:hidden;background:var(--paper-2);border:1px solid var(--line)}.bar-seg{height:100%}.bar-meta{display:flex;justify-content:space-between;gap:8px;font-size:.78rem;color:var(--muted);font-family:var(--mono)}.suits{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.suit{display:inline-flex;align-items:center;gap:6px;font-size:.88rem}.swatch{width:14px;height:14px;border-radius:4px;border:1px solid rgba(0,0,0,.12)}table{width:100%;border-collapse:collapse;font-size:.86rem;background:#ffffffb3;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}th{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:#ffffffd9;position:sticky;top:0}tr:last-child td{border-bottom:none}tr.row-ok td:first-child{box-shadow:inset 3px 0 0 var(--ok)}tr.row-warn td:first-child{box-shadow:inset 3px 0 0 var(--warn)}tr.row-bad td:first-child{box-shadow:inset 3px 0 0 var(--danger)}tr.row-info td:first-child{box-shadow:inset 3px 0 0 var(--info)}.table-wrap{overflow:auto;max-height:420px;border-radius:var(--radius)}.chart{width:100%;height:220px;background:#ffffffa6;border:1px solid var(--line);border-radius:var(--radius);padding:8px 8px 4px}.chart svg{width:100%;height:100%;display:block}.caption{font-size:.75rem;color:var(--muted);margin:0}.btn-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}button.ghost,button.primary{border-radius:8px;padding:8px 12px;font:inherit;font-size:.88rem;cursor:pointer}button.ghost{border:1px solid var(--line);background:#fff;color:var(--ink-soft)}button.primary{border:1px solid var(--accent);background:var(--accent);color:#fff}button.ghost.active{border-color:var(--accent);color:var(--accent-2);background:var(--accent-soft)}code,.mono{font-family:var(--mono);font-size:.86em}.file-box{border:1px dashed var(--line);border-radius:var(--radius);padding:14px;background:#ffffff8c;display:flex;flex-direction:column;gap:8px}.text-input{border:1px solid var(--line);border-radius:8px;padding:9px 12px;background:#fff;color:var(--ink);width:100%}.live-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:16px}.live-frame{position:relative;background:#101820;border-radius:8px;overflow:hidden;aspect-ratio:16 / 10;display:grid;place-items:center}.live-media{width:100%;height:100%;object-fit:contain;display:block;background:#101820}.live-placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;color:#9db0bd;font-size:.92rem;pointer-events:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.suggest-list{display:flex;flex-direction:column;gap:10px}.code-block{margin:0;white-space:pre-wrap;font-family:var(--mono);font-size:.78rem;line-height:1.45;color:var(--ink-soft)}.footer{margin-top:28px;padding-top:14px;border-top:1px solid var(--line);font-size:.78rem;color:var(--muted)}@media (max-width: 860px){.live-grid{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-2{grid-template-columns:1fr}}@media (max-width: 520px){.stats{grid-template-columns:1fr}.app{padding:18px 12px 48px}}