/* Compact physical MODAM: thin charcoal shell, live LCD, stick and arcade keys. */
.preview{background:#eaf4ff;border-color:#b9d8f2;color:#245b8a}
.twin-panel{margin-top:22px}.twin-heading{display:flex;align-items:center;justify-content:space-between;gap:14px}.twin-heading h2{font-size:21px}.twin-heading .eyebrow{margin-bottom:4px}
.twin-device{
  --shell-front:#475a69;--shell-edge:#2e4353;--key-green:#15df49;--key-blue:#20adf1;
  position:relative;isolation:isolate;display:grid;
  grid-template-columns:minmax(80px,100px) minmax(150px,220px) minmax(120px,160px);
  align-items:center;justify-content:space-between;gap:28px;
  width:min(100%,680px);max-width:680px;min-width:0;min-height:0;aspect-ratio:auto;
  margin:20px auto 25px;padding:18px 28px;
  border:1px solid #718696;border-radius:70px;
  background:radial-gradient(ellipse at 30% 0%,#9eb7c44d,transparent 70%),linear-gradient(160deg,#5d7383,var(--shell-front) 55%,#394d5d);
  box-shadow:inset 0 1px 1px #dbeaf25c,inset 0 -2px 2px #233b4b70,0 3px 0 var(--shell-edge),0 7px 14px #35566c20;
}
.twin-device::before{content:"";position:absolute;inset:5px 7px 6px;border:1px solid #d5e8f212;border-radius:inherit;pointer-events:none;z-index:-1}
.twin-device::after{content:"";position:absolute;left:66%;top:17%;width:4px;height:4px;border-radius:50%;background:#223a48;box-shadow:0 1px #bed4df4d;pointer-events:none}
.twin-screen{position:relative;min-width:0;width:100%;padding:3px;background:#192c35;border:1px solid #203944;border-radius:3px;box-shadow:0 0 0 1px #91a6b330}
.twin-screen canvas{display:block;width:100%;height:auto;image-rendering:pixelated;background:#071117;border:0;outline-offset:5px}
.twin-screen>span{position:absolute;top:calc(100% + 5px);left:0;right:0;margin:0;color:#e1edf3;font:8px/1.2 monospace;text-align:center;letter-spacing:.5px}
.twin-pad{position:relative;display:block;width:100%;aspect-ratio:1;align-self:center;justify-self:center;touch-action:none}
.twin-stick-track{--stick-x:0%;--stick-y:0%;position:absolute;inset:12%;border-radius:50%;background:radial-gradient(circle at 38% 27%,#708491,#314856 65%,#223845);border:1px solid #294251;box-shadow:inset 1px 2px 3px #162e3c80,0 1px #a6bdca73}
.twin-pad .twin-stick{position:absolute;display:grid;place-items:center;inset:7%;width:86%;height:86%;min-height:0;padding:0;border:1px solid #667f8e;border-radius:50%;cursor:grab;touch-action:none;user-select:none;transform:translate(var(--stick-x),var(--stick-y));transition:transform 60ms linear;background:radial-gradient(circle at 35% 25%,#8296a2,#546c7b 65%,#3c5666);box-shadow:inset 0 1px 2px #d3e5ee5c,inset 0 -2px 3px #1c354780,1px 3px 3px #102a3b66}
.twin-pad .twin-stick:hover{filter:brightness(1.08);border-color:#adc8d5}.twin-pad .twin-stick:active{cursor:grabbing}
.twin-pad>button{position:absolute;display:grid;place-items:center;width:23%;height:23%;padding:0;min-height:0;background:transparent;border:0;border-radius:50%;color:#d8e7ee;font:13px/1 sans-serif;opacity:.7;box-shadow:none;touch-action:none;user-select:none}
#twinUp{top:-6%;left:38.5%;grid-area:auto}#twinDown{bottom:-6%;left:38.5%;grid-area:auto}#twinLeft{left:-6%;top:38.5%;grid-area:auto}#twinRight{right:-6%;top:38.5%;grid-area:auto}
.twin-pad>button:hover,.twin-pad>button:focus-visible,.twin-pad>button.pressed{opacity:1;background:#d6edff24;transform:none;filter:none}
.twin-buttons{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:12%;align-items:center;justify-content:initial;justify-self:stretch;max-width:none}
.twin-buttons>button{--key:var(--key-green);position:relative;isolation:isolate;width:100%;height:auto;aspect-ratio:1;min-height:0;margin:0!important;padding:0;border:1px solid #087b38;border-radius:50%;color:#07572a;font:700 14px/1.1 sans-serif;text-shadow:0 1px #f3fff266;touch-action:none;user-select:none;background:radial-gradient(ellipse at 35% 15%,#d5ffe0 0%,#70ff9c 5%,var(--key) 35%,#12bf40 85%);box-shadow:inset 0 1px 2px #edfff2bb,inset 0 -2px 2px #027a4270,0 2px 0 #126a3a,0 4px 4px #123a4b4d}
.twin-buttons>button::before{content:"";position:absolute;inset:11% 10% 10%;border:1px solid #90f7b76b;border-radius:50%;pointer-events:none;background:linear-gradient(145deg,#4df97b,#18d747 70%);box-shadow:inset 0 1px 2px #d0ffe580;z-index:-1}
.twin-buttons small{display:block;font-size:8px;line-height:1.2;opacity:.8;margin-top:2px}
.twin-buttons>button:nth-child(2){--key:var(--key-blue);color:#07466d;border-color:#086699;background:radial-gradient(ellipse at 35% 15%,#e0f8ff 0%,#80dcff 5%,var(--key) 35%,#148ece 85%);box-shadow:inset 0 1px 2px #effbffbb,inset 0 -2px 2px #07548370,0 2px 0 #175d84,0 4px 4px #123a4b4d}
.twin-buttons>button:nth-child(2)::before{border-color:#b5ecff73;background:linear-gradient(145deg,#62ccff,#20a8ec 70%)}
.twin-buttons>button.pressed{transform:translateY(2px);filter:brightness(.95);box-shadow:inset 0 2px 4px #1d45654d,0 1px 0 #244c63}
.twin-buttons>span{position:absolute;top:calc(100% + 8px);left:0;right:0;width:auto;white-space:nowrap;color:#e1edf3;font:8px/1.2 monospace;letter-spacing:.3px;text-align:center}
.twin-toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.twin-toolbar button{font-size:12px;padding:7px 12px;min-height:36px}.twin-toolbar>span{margin-left:auto;color:var(--muted);font-size:12px}
#twinStatus{font-size:13px;color:var(--green);font-weight:650;margin-bottom:5px}#twinStatus.error{color:#a53b2d}
.twin-captures{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}.twin-captures button{padding:4px;background:#f2f9ff;border-radius:6px}.twin-captures img{display:block;width:96px;height:72px;object-fit:contain;image-rendering:pixelated;background:#182e3a}
.twin-details{margin-top:15px;border-top:1px solid var(--line);padding-top:12px}.twin-inputs{display:grid;grid-template-columns:135px 1fr;gap:10px;align-items:center}.twin-inputs label{margin:12px 0;font-size:12px}#twinInputs{font-size:12px;color:var(--muted)}#twinSerial{min-height:85px}#twinSerialForm{display:flex;gap:8px}#twinSerialInput{flex:1;min-width:0;border:1px solid var(--line);border-radius:6px;padding:8px}
.twin-embedded{background:var(--bg,#f6fbff)}.twin-embedded>header,.twin-embedded .intro,.twin-embedded .layout,.twin-embedded .help,.twin-embedded footer{display:none}.twin-embedded main{padding:10px;max-width:none}.twin-embedded .twin-panel{margin:0;border:0;padding:12px}.twin-embedded .twin-device{width:min(100%,680px);max-width:680px}.twin-embedded .twin-heading h2{font-size:16px}
@media(max-width:740px){
  .twin-device{grid-template-columns:minmax(64px,84px) minmax(120px,200px) minmax(110px,144px);gap:20px;padding:17px 23px;border-radius:58px;margin:18px auto 23px}
  .twin-heading{align-items:flex-start}.twin-heading h2{font-size:17px}.twin-heading>button{font-size:12px;white-space:nowrap}
}
@media(max-width:540px){
  .twin-device{grid-template-columns:48px minmax(60px,1fr) 94px;gap:8px;padding:15px 12px;border-radius:40px;margin:17px auto 22px}
  .twin-screen{padding:2px}.twin-screen>span{font-size:6px;letter-spacing:0;top:calc(100% + 5px)}
  .twin-pad{width:48px}.twin-stick-track{inset:0}.twin-pad .twin-stick{inset:4%;width:92%;height:92%}
  .twin-pad>button{font-size:10px}#twinUp{top:-16%}#twinDown{bottom:-16%}#twinLeft{left:-16%}#twinRight{right:-16%}
  .twin-buttons{gap:6px}.twin-buttons>button{min-height:44px;font-size:11px}.twin-buttons small{font-size:7px;margin-top:0}.twin-buttons>span{font-size:6px;letter-spacing:0;top:calc(100% + 6px)}
  .twin-device::before{inset:3px 4px 4px}.twin-device::after{width:3px;height:3px;top:12%}
  .twin-heading{flex-direction:column}.twin-toolbar>span{margin:0}.twin-toolbar{gap:6px}.twin-toolbar button{font-size:11px;padding:6px 9px}.twin-inputs{grid-template-columns:110px 1fr}
}
@media(prefers-reduced-motion:reduce){.twin-pad .twin-stick{transition:none}}