:root{font-family:Inter,system-ui,sans-serif;color:#17231b;background:#f3f7f4}*{box-sizing:border-box}body{margin:0}main{max-width:1500px;margin:auto;padding:24px 18px}header{display:flex;gap:15px;align-items:center;margin-bottom:22px}.brand{width:52px;height:52px;border-radius:15px;background:#137a45;color:white;display:grid;place-items:center;font-weight:800}h1,h2,p{margin:0}header p,.muted{color:#66736b}.card{background:#fff;border:1px solid #dce6df;border-radius:18px;padding:18px;margin:14px 0;box-shadow:0 8px 24px #173d2510}.hidden{display:none!important}form{display:flex;gap:14px;align-items:end}label{display:grid;gap:7px;font-weight:650;flex:1}input,button{font:inherit;border-radius:11px;padding:12px 14px;border:1px solid #cbd8cf}button{background:#137a45;color:white;border:0;font-weight:750;cursor:pointer}button:disabled{opacity:.6}.error{color:#b42318}.secondary{background:#e8f1eb;color:#185d39}.lab-head{display:flex;justify-content:space-between;align-items:center;margin:20px 0 12px}.screen-nav{display:none;align-items:center;justify-content:space-between;gap:10px;margin:10px 0}.screen-nav button{padding:9px 12px}.phones{display:flex;gap:20px;overflow-x:auto;padding:8px 4px 28px;align-items:start;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}.phone{flex:0 0 330px;background:#111;border:9px solid #111;border-radius:34px;box-shadow:0 12px 35px #1114;overflow:hidden;scroll-snap-align:center}.phone.active{outline:4px solid #27b46e}.phone-top{height:42px;background:#111;color:white;display:flex;align-items:center;justify-content:space-between;padding:0 12px;font-size:13px}.phone-controls,.typing-controls{background:#222;padding:7px;display:flex;gap:6px}.phone-controls input,.typing-controls input{width:100%;min-width:0;padding:9px;font-size:12px}.phone-controls button,.typing-controls button{padding:7px 10px;border-radius:7px;background:#3a3a3a}.typing-controls{padding-top:0}.typing-controls button.send{background:#137a45}.key-row{background:#222;display:flex;gap:5px;padding:0 7px 7px}.key-row button{flex:1;padding:6px 4px;background:#444;font-size:11px}.viewport{position:relative;width:312px;height:675px;background:white;overflow:hidden;touch-action:none}.viewport img{display:block;width:312px;height:675px;object-fit:fill;user-select:none;-webkit-user-drag:none}.phone-status{position:absolute;inset:auto 8px 8px;background:#111c;color:white;padding:5px 8px;border-radius:8px;font-size:11px;pointer-events:none}.loading{height:675px;display:grid;place-items:center;color:#fff;background:#243029}@media(max-width:650px){main{padding:16px 10px}form{display:grid}.lab-head{align-items:start;gap:12px}.screen-nav{display:flex}.phones{margin:0 -10px;padding:8px calc((100vw - min(94vw,390px))/2) 28px;gap:16px}.phone{flex-basis:min(94vw,390px)}.viewport,.viewport img{width:calc(min(94vw,390px) - 18px)}}