@import"https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&display=swap";:root{font-family:Manrope,system-ui,sans-serif;color:#1f2522;background:#f3efe8;font-synthesis:none;--ink: #1f2522;--muted: #6c756f;--line: #d8d6ce;--paper: #fffcf7;--copper: #c45f28;--soft: #f5e1d3;--green: #2d7a59;--red: #b34a3e}*{box-sizing:border-box}body{margin:0}.shell{max-width:1240px;margin:auto;padding:28px 32px 56px}.topbar{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:20px}.brand,.device-state,.panel-heading,.serial-caption,.block-row,.write-zone,.live-label{display:flex;align-items:center}.brand{gap:12px}.brand-mark{background:var(--ink);color:#fff;border-radius:3px;padding:8px 7px;font:500 14px DM Mono,monospace}.brand strong,.brand span{display:block}.brand strong{font-size:15px}.brand div span{color:var(--muted);font-size:11px;margin-top:3px}.device-state{gap:10px;color:var(--muted);font-size:12px}.dot,.log-dot{width:7px;height:7px;border-radius:99px;background:#a8aaa4;display:inline-block}.dot.live,.log-dot.success{background:var(--green)}.button{font:600 12px Manrope,sans-serif;border:1px solid var(--line);border-radius:4px;padding:10px 14px;cursor:pointer;transition:.16s ease}.button:hover:not(:disabled){transform:translateY(-1px)}.button:disabled{opacity:.45;cursor:not-allowed}.secondary{background:transparent;color:var(--ink)}.primary,.write{background:var(--copper);border-color:var(--copper);color:#fff}.tertiary{background:var(--soft);border-color:transparent;color:var(--copper);padding:8px 10px}.intro{display:flex;justify-content:space-between;gap:32px;padding:48px 0 36px}.eyebrow{font:500 10px DM Mono,monospace;letter-spacing:.08em;color:var(--copper);margin:0 0 10px}.intro h1{font-size:34px;letter-spacing:-.02em;margin:0 0 12px;line-height:1.18}.lede{max-width:600px;color:var(--muted);font-size:14px;line-height:1.7;margin:0}.protocol-note{width:270px;border-left:2px solid var(--copper);padding:4px 0 4px 16px}.protocol-note span,.protocol-note strong,.protocol-note small{display:block}.protocol-note span{font-size:11px;color:var(--muted)}.protocol-note strong{font:500 12px DM Mono,monospace;margin:8px 0}.protocol-note small{font-size:11px;color:var(--muted);line-height:1.5}.workspace{display:grid;grid-template-columns:350px minmax(0,1fr);gap:20px;align-items:start}.panel{background:var(--paper);border:1px solid var(--line);border-radius:6px;box-shadow:0 8px 24px #1f25220f}.inputs{padding:22px}.panel-heading{gap:11px;margin-bottom:22px}.panel-heading>div{flex:1}.panel-heading h2{font-size:15px;margin:0}.panel-heading p{font-size:11px;color:var(--muted);margin:4px 0 0}.step{font:500 11px DM Mono,monospace;color:var(--copper);border:1px solid #e4baa2;padding:5px 6px;border-radius:2px}.field{display:block;margin:18px 0}.field>span{display:flex;justify-content:space-between;font-size:12px;font-weight:600;margin-bottom:8px}.field em{color:var(--muted);font-size:10px;font-style:normal;font-weight:400}.field input{width:100%;background:#fff;border:1px solid var(--line);border-radius:4px;padding:11px 12px;color:var(--ink);font:500 15px DM Mono,monospace;outline:none}.field input:focus{border-color:var(--copper);box-shadow:0 0 0 3px var(--soft)}.check{display:flex;gap:9px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line);margin-top:24px}.check input{accent-color:var(--copper);margin-top:3px}.check strong,.check small{display:block}.check strong{font-size:12px}.check small{color:var(--muted);font-size:11px;line-height:1.5;margin-top:3px}.inputs .primary{width:100%;margin-top:8px;display:flex;justify-content:space-between}.mini-facts{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);margin-top:22px;padding-top:16px;gap:8px}.mini-facts span,.mini-facts b{display:block}.mini-facts span{font-size:10px;color:var(--muted)}.mini-facts b{font:500 11px DM Mono,monospace;margin-top:5px}.results{display:grid;gap:16px}.card-result,.blocks,.activity{padding:22px}.icon-button{background:transparent;border:0;color:var(--copper);font-size:11px;cursor:pointer}.code-display{background:var(--ink);border-radius:4px;color:#fff;padding:20px 22px}.code-display span{font:500 10px DM Mono,monospace;color:#a5aaa4}.code-display strong{display:block;font:500 clamp(20px,3vw,30px) "DM Mono",monospace;letter-spacing:.08em;margin-top:10px;overflow-wrap:anywhere}.serial-caption{gap:10px;margin-top:14px;color:var(--muted);font-size:11px}.serial-caption b{font:500 12px DM Mono,monospace;color:var(--ink)}.arrow{color:var(--copper)}.block-list{border-top:1px solid var(--line)}.block-row{gap:14px;padding:13px 0;border-bottom:1px solid var(--line)}.block-label{width:132px;font:500 11px DM Mono,monospace}.block-label small{display:block;color:var(--muted);font:10px Manrope,sans-serif;margin-top:3px}.block-row code{flex:1;font:500 12px DM Mono,monospace;overflow-wrap:anywhere;line-height:1.5}.write-zone{justify-content:space-between;gap:20px;background:#2f3934;color:#fff;border-radius:6px;padding:22px}.write-zone h2{font-size:16px;margin:0 0 6px}.write-zone p:not(.eyebrow){font-size:11px;color:#c0c9c1;margin:0}.write{white-space:nowrap}.activity .panel-heading{margin-bottom:14px}.live-label{gap:6px;font:500 10px DM Mono,monospace;color:var(--green)}.log-list{border-top:1px solid var(--line)}.log-row{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding:10px 0;font-size:11px}.log-row time{width:46px;color:var(--muted);font:10px DM Mono,monospace}.log-dot.error{background:var(--red)}.log-row span{color:var(--muted)}button:focus-visible,input:focus-visible{outline:2px solid var(--copper);outline-offset:2px}@media(max-width:840px){.shell{padding:20px 16px 40px}.intro{display:block;padding:32px 0 24px}.protocol-note{width:auto;margin-top:22px}.workspace{grid-template-columns:1fr}.intro h1{font-size:28px}.block-row{align-items:flex-start}.block-label{width:112px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}.write-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;row-gap:8px}.write-actions .button{min-width:132px}@media(max-width:840px){.write-actions{width:100%;justify-content:stretch}.write-actions .button{flex:1 1 180px}}
