/* An upright, architectural line drawing around the real product preview. */
.phone-shell{position:relative;isolation:isolate;width:100%;max-width:272px;margin:0 auto;padding:10px;border:1.5px solid #333;border-radius:36px;background:#fcfcfc;color:#171717}
.phone-shell::before{content:'';position:absolute;inset:6px;border:1px solid #b8b8b8;border-radius:29px;pointer-events:none;z-index:6}
.phone-shell::after{content:'';position:absolute;right:-5px;top:151px;width:3px;height:45px;border:1px solid #555;border-left:0;border-radius:0 2px 2px 0;background:#f7f7f7}
.phone-hardware{height:70px;position:relative}
.phone-hardware::before,.phone-hardware::after{content:'';position:absolute;left:-15px;width:3px;height:30px;border:1px solid #555;border-right:0;border-radius:2px 0 0 2px;background:#f7f7f7}
.phone-hardware::before{top:83px}.phone-hardware::after{top:124px}
.phone-speaker{position:absolute;left:50%;top:9px;transform:translateX(-50%);width:42px;height:5px;border:1px solid #888;border-radius:9px}
.phone-camera{position:absolute;top:9px;left:calc(50% + 29px);width:5px;height:5px;border:1px solid #666;border-radius:50%}
.phone-status{position:absolute;left:22px;right:22px;top:34px;display:flex;justify-content:space-between;align-items:center;font:10px/1 var(--mono);letter-spacing:-.2px;color:#555}
.phone-indicators{display:flex;align-items:flex-end;gap:2px;height:10px}
.phone-indicators i{display:block;width:2px;background:#666;height:4px}.phone-indicators i:nth-child(2){height:6px}.phone-indicators i:nth-child(3){height:8px}
.phone-indicators b{position:relative;width:17px;height:8px;border:1px solid #666;border-radius:2px;margin:0 2px 0 5px;align-self:center}
.phone-indicators b::after{content:'';position:absolute;right:-3px;top:2px;width:1px;height:2px;background:#666}
.phone-screen{position:relative;background:#fcfcfc;min-width:0}
.phone-home{position:relative;height:34px}.phone-home::after{content:'';position:absolute;width:86px;height:4px;border:1px solid #888;border-radius:6px;bottom:10px;left:50%;transform:translateX(-50%)}
.phone-live .phone-screen{height:430px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ccc transparent}
.phone-live #quick-input{padding:9px 4px 15px}
.preview-examples{max-width:272px;margin:0 auto 20px}
.preview-examples .qi-examples{gap:5px;margin:0}
.preview-examples .qi-example{font-size:11px;padding:8px 12px;border-radius:2px}
.preview-examples .qi-example:focus-visible{outline:2px solid #171717;outline-offset:3px}
.phone-live .qi-card{border:0;box-shadow:none;border-radius:0;padding:12px 20px 0;background:transparent}
.phone-live .qi-header{margin-bottom:24px}.phone-live .qi-title{font-size:21px;font-weight:500;letter-spacing:-.7px}.phone-live .qi-edit{font-size:10px;gap:4px}
.phone-live .qi-fields{min-height:128px}.phone-live .qi-label{font-size:10px}.phone-live .qi-textarea{font-size:17px;min-height:110px}
.phone-live .qi-bottom{align-items:stretch;flex-direction:column;gap:14px;margin-top:15px;padding-top:15px}
.phone-live .qi-destination{font-size:9px}.phone-live .qi-save{border-radius:2px;min-height:40px}
.phone-live .qi-status{font-size:10px;margin-top:12px}
.phone-live .qi-choice{font-size:10px;padding:8px;border-radius:2px}.phone-live .qi-rating span{border-radius:2px}
.input-console{max-width:390px;width:100%;margin-inline:auto}.console-tag{max-width:272px;margin:0 auto 24px;padding:0 0 10px;border-bottom:1px solid #ccc;position:relative;justify-content:center;font-size:8px;letter-spacing:1px;color:#777}
.console-tag::before,.console-tag::after{content:'';position:absolute;bottom:-4px;width:1px;height:7px;background:#aaa}.console-tag::before{left:0}.console-tag::after{right:0}
.lab-body{padding-top:38px;padding-bottom:32px;gap:62px;grid-template-columns:1fr minmax(300px,390px) 1fr;background-size:32px 32px;background-image:linear-gradient(#00000006 1px,transparent 1px),linear-gradient(90deg,#00000006 1px,transparent 1px)}
.lab-body::before{display:none}.input-map,.destination-map{padding-bottom:90px}.input-tile{box-shadow:none;border-color:#ccc;background:#fafafa;border-radius:2px}.input-tile:hover{border-color:#777}.destination{background:transparent;border-color:#ccc;border-radius:2px}.destination-icon{background:transparent;color:#555}.map-label{padding-bottom:12px;border-bottom:1px solid #ccc}.flow-path{top:44%;background:#bdbdbd}.flow-in{left:calc(50% - 290px);width:115px}.flow-out{right:calc(50% - 290px);width:115px}.flow-path span{animation-duration:5s}
.edit-diagram{box-shadow:none;transform:none}
.edit-diagram .field-types>span{flex-direction:column;gap:4px;min-height:68px;padding:9px 4px;text-align:center;line-height:1.3}
.field-types svg{width:18px;height:18px;flex-shrink:0;color:#616161}
.field-types small{font:7px/1.2 var(--mono);padding:2px 4px;border:1px solid #ddd;border-radius:2px;background:#eee;color:#666}
@media(max-width:1150px){.lab-body{gap:40px;padding-inline:30px;grid-template-columns:1fr minmax(300px,365px) 1fr}.flow-in{left:calc(50% - 255px);width:82px}.flow-out{right:calc(50% - 255px);width:82px}}
@media(max-width:900px){.lab-body{grid-template-columns:150px minmax(0,365px);gap:45px}.flow-in{left:26%;width:70px}.input-map{padding-bottom:80px}}
@media(max-width:680px){.lab-body{display:block;padding:26px 18px 24px}.input-console{max-width:272px}.console-tag{margin-bottom:21px;font-size:7px}.phone-shell{border-radius:36px}.phone-shell::before{border-radius:29px}.phone-status{left:18px;right:18px}.phone-live .qi-card{padding-inline:16px}.phone-live .qi-title{font-size:20px}}
@media(max-width:380px){.lab-body{padding-inline:14px}.phone-shell{padding:8px}.phone-hardware{height:64px}.phone-live .qi-card{padding-inline:13px}.phone-status{font-size:9px}.phone-live .qi-title{font-size:18px}.phone-hardware::before,.phone-hardware::after{left:-13px}}
@media(prefers-reduced-motion:reduce){.preview-examples .qi-example{transition:none}}

/* Keep the moving connectors inside the measured gaps beside the phone. */
.lab-body .flow-path{left:var(--connector-left,0px);right:auto;top:var(--connector-top,44%);width:var(--connector-width,0px);visibility:hidden}
.lab-body .flow-path.has-position{visibility:visible}
.lab-body .flow-path span{animation-name:packet-contained}
@keyframes packet-contained{0%{left:0;transform:none;opacity:0}15%{opacity:.7}75%{opacity:.7}100%{left:calc(100% - 5px);transform:none;opacity:0}}

.preview-records{max-width:272px;margin:12px auto 0;text-align:center}.preview-records .qi-records-link{font-size:10px}