:root{font-family:Inter,Segoe UI,Arial,sans-serif;color:#172c36;background:#f4f7f8;font-synthesis:none;--teal:#007c76;--border:#dce5e8;--muted:#6e818a}*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit}button{min-height:44px;padding:10px 16px;border:1px solid var(--border);border-radius:8px;background:white;color:#27434f;cursor:pointer;font-weight:600}button:hover{background:#edf7f5;border-color:#9bbeba}button:disabled{opacity:.45;cursor:not-allowed}input,select,textarea{min-height:48px;width:100%;padding:12px;border:1px solid #c9d6dc;border-radius:8px;background:white;color:#213d49}input:focus,select:focus,textarea:focus,button:focus-visible{outline:3px solid #9bddd4;outline-offset:2px}label{font-size:14px;font-weight:600}button.primary,.primary{background:var(--teal);color:white;border-color:var(--teal)}.topbar{height:78px;padding:0 4%;background:white;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:16px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#60777f;font-size:10px;letter-spacing:2px}.brand b{display:block;color:#17353e;font-size:18px;letter-spacing:-.5px;margin-top:3px}.brand-icon{background:#093b43;color:#bff5d6;border-radius:11px;padding:8px 13px;font-size:28px}.connection{display:flex;align-items:center;gap:9px;font-size:12px}.dot{height:7px;width:7px;border-radius:50%;background:#a1aeb2}.dot.online{background:#15977f;box-shadow:0 0 0 4px #e8f5ee}.badge{padding:6px 8px;background:#f0f4f5;border-radius:4px;font-size:10px;letter-spacing:1px;margin-left:12px}.quiet{border:0;background:transparent;font-size:12px}main{max-width:1680px;margin:auto;padding:32px 4% 16px}.page-intro{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.6px;color:#73898e;margin:0 0 9px}h1{font-size:29px;font-weight:600;letter-spacing:-1px;margin:0 0 10px}h2{font-size:19px;letter-spacing:-.4px;margin:8px 0 0}h3{font-size:18px}.subtle{color:var(--muted);font-size:13px;line-height:1.6;margin:0}.boundary{border:1px solid #cce5de;background:#edf7f2;color:#48736b;border-radius:6px;padding:10px 13px;font-size:12px;white-space:nowrap}.connect-card{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--border);padding:16px;border-radius:10px;margin-bottom:14px}.connect-card label{white-space:nowrap}.connect-card input{max-width:380px}.connect-card button{white-space:nowrap}#notice{font-size:12px;color:#59727a;margin:0 0 17px;min-height:18px}#notice.error{color:#a34230}.workspace{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start;gap:24px}.panel{border:1px solid var(--border);border-radius:13px;background:white;overflow:hidden;box-shadow:0 4px 20px #1e475005}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:24px}.live-label{font-size:9px;letter-spacing:1px;margin-left:7px;padding:4px 6px;background:#eef3f4;color:#75878c;border-radius:4px;vertical-align:middle}.live-label.online{background:#e7f5ed;color:#2d876b}.icon-button{font-size:22px;background:#f8fafb;min-width:44px}.remote-tools{display:flex;align-items:center;gap:12px;padding:12px 24px;border-top:1px solid #edf1f2;background:#fcfdfd}.remote-tools label{font-size:11px;color:#73898e}.remote-tools select{font-size:12px;min-height:38px;padding:7px;max-width:65%}#process{margin-left:auto;font-size:10px}.viewport{position:relative;display:flex;align-items:center;justify-content:center;min-height:380px;height:440px;overflow:auto;background-color:#e9eff1;background-image:radial-gradient(#cedadd .75px,transparent .75px);background-size:14px 14px;padding:24px}#imageWrap{position:relative;flex-shrink:0;max-width:100%}#frame{display:block;width:100%;height:auto;box-shadow:0 9px 30px #16343f26}#frame[hidden]{display:none}#focusOverlay{position:absolute;border:2px solid #00b498;background:#00b49812;pointer-events:none}#empty{text-align:center;color:#6a828a;font-size:13px;line-height:1.8}.empty-icon{display:inline-flex;border:1px solid #bbcccf;border-radius:16px;font-size:35px;width:80px;height:80px;align-items:center;justify-content:center;background:#f7fbfb}.view-footer{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-bottom:1px solid #edf1f2;font-size:11px;color:#708790}.view-footer button{border:0;min-width:40px;font-size:12px;padding:6px}.context-note{display:flex;gap:12px;padding:10px 24px;color:#6e858b;font-size:12px;line-height:1.8}.context-note>span{font-size:25px}.context-note b{font-weight:500;color:#425e68}.touch-badge{font-size:9px;letter-spacing:1px;color:#68857d;background:#eef7f2;padding:7px;border-radius:4px;white-space:nowrap}.tabs{display:flex;padding:0 24px;gap:20px;border-bottom:1px solid var(--border)}.tabs button{border:0;border-bottom:2px solid transparent;border-radius:0;padding:12px 0;font-size:12px;font-weight:500;color:#7c8b91;white-space:nowrap}.tabs button.active{border-bottom-color:var(--teal);color:var(--teal);font-weight:700}.control-body{padding:22px 24px 26px;min-height:350px}#controlHint{font-size:12px;margin-bottom:20px}#controls{display:grid;grid-template-columns:1fr 1fr;gap:18px 14px}.field{grid-column:1/-1;position:relative}.field label{display:block;margin-bottom:9px}.field.focused label:after{content:' • ACTIVE IN APP';font-size:8px;letter-spacing:1px;color:var(--teal);margin-left:8px}.field input[type=checkbox],.field input[type=radio]{width:24px;min-height:24px}.field.protected{color:#99704e}.controls-empty{grid-column:1/-1;text-align:center;padding:45px 10px;color:#789097;font-size:13px}.action-button{min-height:48px}.helper-toolbar{border-top:1px solid var(--border);padding:20px 24px;background:#f9fbfb}.helper-toolbar>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}.helper-toolbar .eyebrow{margin:0}#selectedHint{font-size:10px;color:#64827e}#keys{display:flex;flex-wrap:wrap;gap:7px}#keys button{font-size:11px;min-width:48px;min-height:44px;padding:8px 12px;background:white}.helpers-extra{margin-top:24px;border-top:1px solid #e7edef;padding-top:16px}summary{cursor:pointer;font-size:12px;color:#5f7b82;min-height:44px;padding:9px 0}details label{display:block;margin:12px 0 8px}.button-row{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}.button-row button{font-size:12px}.button-row input{flex:1;min-width:150px;width:auto}.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:16px 0;max-width:260px}#tree{max-height:430px;overflow:auto;font-size:11px;background:#f2f6f7;padding:14px;border-radius:8px;line-height:1.7}footer{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px;color:#8b9ca2;padding:25px 0}footer span{letter-spacing:.3px}[hidden]{display:none!important}
@media(orientation:portrait){.workspace{grid-template-columns:1fr}.page-intro{display:block}.boundary{display:inline-block;margin-top:14px}.viewport{height:34vh;min-height:220px}.helper-toolbar{position:static}.controls-panel{overflow:visible}.connect-card{flex-wrap:wrap}.connect-card input{max-width:none;flex:1;min-width:180px}.connect-card .subtle{width:100%}.page-intro h1{font-size:25px}.topbar{height:70px}.badge{display:none}main{padding-top:23px}.panel-heading{padding:20px}.control-body{padding:20px}.connection{gap:6px}.quiet{padding:8px}.tabs{gap:18px;padding:0 20px}footer{gap:20px;line-height:1.6}.remote-tools{padding:10px 16px}#process{display:none}}
@media(prefers-reduced-motion:no-preference){button{transition:background .12s,border-color .12s}}
.machine-status{margin:0 0 16px;padding:11px 14px;border:1px solid #c8e5dc;border-radius:8px;background:#eaf7f0;color:#236956;font-size:12px;line-height:1.6}.machine-status.offline{background:#fff4e7;border-color:#efdbbd;color:#8a5823}
.field textarea{min-height:190px;resize:vertical;line-height:1.6}
@media(orientation:portrait) and (max-width:600px){main{padding-top:14px}.page-intro{margin-bottom:12px}.page-intro .eyebrow,.page-intro .subtle,.boundary{display:none}.page-intro h1{font-size:20px;letter-spacing:-.5px;margin:0}#notice{font-size:11px;margin-bottom:12px}.viewport{height:25vh;min-height:170px;padding:14px}.remote-panel .panel-heading{padding:14px 18px}.remote-panel .panel-heading h2{font-size:17px}.remote-panel .eyebrow{display:none}.context-note{display:none}.view-footer{padding:5px 14px}.workspace{gap:16px}.controls-panel .panel-heading{padding:17px}.control-body{min-height:260px}.touch-badge{display:none}}
@media(orientation:landscape) and (max-width:850px){main{padding:16px 2%}.workspace{gap:12px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.page-intro .boundary,.page-intro .subtle{display:none}.panel-heading,.control-body,.helper-toolbar{padding:16px}.tabs{gap:12px;padding:0 12px}.tabs button{font-size:11px}.touch-badge,#process{display:none}.viewport{height:300px;min-height:200px;padding:12px}.context-note{padding:8px 14px}.remote-tools{padding:10px}.page-intro h1{font-size:22px}}