:root{--paper:#f3f2eb;--panel:#fcfcf8;--ink:#222823;--muted:#697168;--line:#d8dcd1;--lime:#d8f37c;--error:#8b3328;--radius:3px}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Trebuchet MS","PingFang SC","Microsoft YaHei",sans-serif;font-size:14px;line-height:1.6}button,input,select{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #a0bc50;outline-offset:3px}a{color:inherit;text-decoration:none}[hidden]{display:none!important}.workspace{display:grid;grid-template-columns:280px minmax(0,1fr);max-width:1440px;min-height:100vh;margin:auto}
.sidebar{position:sticky;top:0;align-self:start;display:flex;flex-direction:column;height:100vh;min-height:700px;padding:34px 30px;background:linear-gradient(145deg,#e5e9dc,#eef0e6 62%,#dee5cf);border-right:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:1.8px;font-weight:700}.brand-mark{display:grid;place-items:center;width:28px;height:34px;border:1px solid var(--ink);font-family:Georgia,serif;font-size:23px;letter-spacing:0}.sidebar-title{margin-top:70px}.eyebrow{display:block;font-family:"Courier New",monospace;font-size:10px;letter-spacing:1.5px;color:var(--muted);font-weight:700}.sidebar h1{font-size:27px;line-height:1.55;letter-spacing:-.8px;margin:16px 0}.sidebar p{font-size:12px;color:#5d685b}.steps{list-style:none;padding:0;counter-reset:step;margin:42px 0}.steps li{position:relative;counter-increment:step;padding:0 0 28px 32px;font-weight:700;font-size:13px}.steps li:before{content:"0" counter(step);position:absolute;left:0;top:2px;color:#7d8877;font-family:"Courier New",monospace;font-size:11px}.steps li span{display:block;color:#76816f;font-size:11px;font-weight:400;margin-top:4px}.sidebar-foot{margin-top:auto;padding-top:20px;border-top:1px solid #cbd2c0;font-size:11px}.sidebar-foot p{font-size:10px}.connection-dot{display:inline-block;width:6px;height:6px;margin-right:5px;background:#788958;border-radius:50%}
main{padding:42px 58px 30px;min-width:0}.page-heading{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:30px}.page-heading h2{font-size:29px;letter-spacing:-.8px;margin:7px 0 0}.badge{padding:6px 11px;border:1px solid var(--line);font-size:11px;color:var(--muted);white-space:nowrap}.badge.connected{background:var(--lime);color:#33451e;border-color:#b4cf69}.device-panel{display:flex;align-items:center;gap:32px;padding:26px 32px;background:var(--panel);border:1px solid var(--line);background-image:radial-gradient(#dfe4d6 .65px,transparent .65px);background-size:10px 10px}.device-art{width:85px;height:126px;flex-shrink:0;border:1px solid #83907c;background:#dce3d3;padding:10px;transform:rotate(-5deg);box-shadow:5px 7px 0 #dfe3d8}.device-screen{height:84px;padding:6px;border:1px solid #84927a;background:#293a2d;color:#d8f37c;font-family:"Courier New",monospace}.device-screen span{font-size:25px;line-height:1.15}.device-screen i{display:block;height:1px;background:#6c8653;margin:8px 0}.device-screen b{font-size:6px;letter-spacing:1.2px}.device-keys{display:flex;justify-content:space-around;margin-top:10px}.device-keys i{width:8px;height:4px;background:#839274;border:1px solid #65765c}.device-copy h3{font-size:19px;margin:5px 0 7px}.device-copy p{font-size:12px;color:var(--muted);margin:0 0 14px}.device-actions{display:flex;gap:10px;align-items:center}.button{border:1px solid var(--line);padding:10px 16px;background:transparent;color:var(--ink);border-radius:var(--radius);font-size:12px;white-space:nowrap;transition:background .15s}.button.primary{background:var(--ink);color:var(--lime);border-color:var(--ink);font-weight:700}.button.primary:hover:not(:disabled){background:#3b4937}.button.primary span{margin-left:20px}.button.subtle:hover:not(:disabled){background:#e7ebdf}.notice{border-left:2px solid #a9b99b;background:#e9ede2;color:#52604a;padding:11px 14px;font-size:12px;margin:16px 0 25px;overflow-wrap:anywhere}.notice.warning,.notice.error{border-color:#b97558;color:var(--error);background:#f3e7dd}.notice.success{border-color:#83a648;background:#e4edce;color:#3b541e}
fieldset{padding:0;border:0;margin:0;min-width:0}fieldset:disabled{opacity:.58}.settings-section{margin:27px 0 32px}.section-heading{display:flex;gap:12px;align-items:flex-start;margin:0 0 20px}.section-number{width:25px;height:25px;display:grid;place-items:center;margin-top:1px;background:#e2e7d7;font-family:"Courier New",monospace;font-size:10px}.section-heading h3{font-size:16px;margin:0 0 3px}.section-heading p{font-size:11px;color:var(--muted);margin:0}.section-heading .button{margin-left:auto;padding:7px 11px;font-size:11px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.field{margin-bottom:16px;min-width:0}.field>label{display:block;font-size:12px;font-weight:700;margin-bottom:7px}.field input:not([type=checkbox]),.field select{width:100%;height:42px;border:1px solid #cdd3c5;background:var(--panel);border-radius:var(--radius);padding:9px 12px;color:var(--ink);font-size:13px}.field input::placeholder{color:#9ba394;font-size:12px}.field small{display:block;color:var(--muted);font-size:10px;margin-top:7px;line-height:1.7}.field-meta{color:#758663;font-size:10px;font-weight:400;margin-left:6px}.field .checkbox{display:flex;align-items:center;gap:7px;margin-top:8px;font-size:10px;color:var(--muted);font-weight:400}.checkbox input{accent-color:#586f39;margin:0}.token-field{margin-top:20px}.save-bar{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;border-top:1px solid var(--line)}.save-bar strong{font-size:13px}.save-bar p{font-size:10px;color:var(--muted);margin:5px 0 0}.connection-status{display:flex;gap:35px;align-items:center;margin-top:14px;background:#e8ebdf;border:1px solid #dce1d1;padding:17px 20px}.connection-status strong{display:block;font-family:"Courier New","PingFang SC",monospace;font-size:12px;margin-top:6px}.connection-status .button{margin-left:auto;font-size:10px;padding:6px 10px}.footnote{font-size:10px;color:var(--muted);margin:10px 0}.device-panel{animation:arrive .45s ease-out both}@keyframes arrive{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
@media(min-width:1250px){main{padding-right:90px;padding-left:75px}}@media(max-width:1000px){.workspace{grid-template-columns:220px minmax(0,1fr)}.sidebar{padding:26px 22px}.sidebar h1{font-size:23px}main{padding:32px}.form-grid{grid-template-columns:1fr;gap:0}.device-panel{padding:22px;gap:22px}.connection-status{gap:20px}}@media(max-width:680px){.workspace{display:block}.sidebar{height:auto;min-height:0;position:static;padding:18px 22px;border-right:0;border-bottom:1px solid var(--line)}.sidebar-title,.steps,.sidebar-foot{display:none}main{padding:25px 20px}.page-heading{margin-bottom:22px}.page-heading h2{font-size:25px}.badge{font-size:10px;padding:5px 8px}.device-panel{gap:22px;padding:22px 18px}.device-art{width:68px;height:104px;padding:8px}.device-screen{height:68px}.device-screen span{font-size:21px}.device-screen b{font-size:5px}.device-keys{margin-top:7px}.device-copy h3{font-size:16px}.device-copy p{font-size:11px}.device-copy .eyebrow{font-size:8px}.device-actions{gap:7px;flex-wrap:wrap}.button{padding:9px 12px}.button.primary span{margin-left:10px}.section-heading{gap:9px}.section-heading p{max-width:200px}.section-heading .button{font-size:10px;padding:6px 8px}.section-number{width:22px;flex-shrink:0}.save-bar{align-items:flex-start}.save-bar p{max-width:200px}.connection-status{gap:15px;flex-wrap:wrap;padding:15px}.connection-status .button{margin-left:0}.connection-status .eyebrow{font-size:9px}.footnote{line-height:1.8}}
.field select+input{margin-top:8px}.field small.error,.section-status.error{color:var(--error)}.section-status{display:block;color:var(--muted);font-size:10px;line-height:1.7}