/* Lab: the prompt box (home screen of an app builder), rebuilt in HTML. Drawn at 1100 x 805 and scaled to its card by prompt-lab.js. */
.pp-wrap { position: absolute; inset: 0; overflow: hidden; container-type: size; background: #fafbfc; }
.pp { position: absolute; left: 0; top: 0; width: 1100px; height: 805px; transform-origin: 0 0; font-family: "Inter", system-ui, sans-serif; color: #2a2d32; -webkit-font-smoothing: antialiased; }
.pp * { box-sizing: border-box; }
.pp-sky { position: absolute; inset: 0; background: #fafbfc url("assets/lab-sky.webp?v=2") center top / 1746px auto no-repeat; }
.pp-h { position: absolute; left: 0; right: 0; top: 246px; text-align: center; font-size: 36px; line-height: 1.15; font-weight: 500; letter-spacing: -0.015em; color: #fff; }
.pp-tabs { position: absolute; left: 111px; top: 360px; width: 878px; height: 41px; display: flex; gap: 6.8px; padding-left: 26.3px; }
.pp-tab { position: relative; height: 41px; margin: 0; padding: 0 16px; border: 0; background: none; display: flex; align-items: center; justify-content: center; gap: 8px; font: 500 14px/1 "Inter", system-ui, sans-serif; color: #fff; cursor: pointer; width: 157.8px; transition: color .5s; }
.pp-tab + .pp-tab { width: 160px; }
.pp-tab::before { content: ""; position: absolute; inset: 0; border-radius: 8px 8px 0 0; background: #8ab8e5; z-index: 1; transition: background .25s; }
.pp-tab:first-child::before { border-top-left-radius: 12px; }
.pp-tab:last-child::before { border-top-right-radius: 12px; }
.pp-tab:not(.on):hover::before { background: #98c1ea; }
.pp-tab > svg, .pp-tab > span { position: relative; z-index: 6; }
.pp-tab svg { width: 22px; height: 22px; flex: none; }
.pp-tab.on { color: #00264d; font-weight: 600; }
/* the active shape is one SVG that slides between the tabs: rounded top, concave flares on both sides */
.pp-ind { position: absolute; left: 0; top: 0; height: 43.4px; width: 185px; z-index: 5; fill: #e6f0fa; pointer-events: none; overflow: visible; transition: left .5s cubic-bezier(.4, 0, .2, 1), width .5s cubic-bezier(.4, 0, .2, 1); }
.pp-frame { position: absolute; left: 111px; top: 401px; width: 878px; height: 160px; padding: 4px; border-radius: 20px; background: linear-gradient(#e6f0fa, #d2e6fa); z-index: 3; }
.pp-card { position: relative; width: 100%; height: 100%; border-radius: 16px; background: #fff; overflow: hidden; }
.pp-ta { display: block; width: 100%; height: 84px; padding: 16px; border: 0; outline: 0; resize: none; background: transparent; font: 400 15px/1.5 "Inter", system-ui, sans-serif; color: #2e3133; border-radius: 12px 12px 6px 6px; }
.pp-ta::placeholder { color: #9a9ea3; opacity: 1; }
.pp-row { position: absolute; left: 13px; right: 13px; bottom: 12px; display: flex; align-items: center; justify-content: space-between; }
.pp-ico { width: 37px; height: 37px; border: 0; border-radius: 30px; background: none; display: grid; place-items: center; color: #3c4045; cursor: pointer; transition: background .15s; }
.pp-ico:hover { background: #f2f4f6; }
.pp-ico svg { width: 20px; height: 20px; }
.pp-right { display: flex; align-items: center; gap: 2px; }
.pp-send { width: 55px; height: 37px; border: 0; border-radius: 110px; background: #efefef; color: #a6a6a6; display: grid; place-items: center; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.pp-send svg { width: 20px; height: 20px; }
.pp-send.on { background: linear-gradient(#3b3c3c, #232424); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 2px 6px rgba(0, 0, 0, .18); }
.pp-send.on:hover { background: linear-gradient(#454646, #2a2b2b); }
.pp-cursor { position: absolute; left: 0; top: 0; width: 22px; height: 22px; z-index: 9; pointer-events: none; opacity: 0; transition: opacity .25s; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.pp-cursor.on { opacity: 1; }
.pp-toast { position: absolute; left: 50%; top: 668px; transform: translateX(-50%) translateY(6px); padding: 9px 16px; border-radius: 20px; background: rgba(30, 32, 34, .92); color: #fff; font: 500 13px/1 "Inter", system-ui, sans-serif; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
.pp-toast.on { opacity: 1; transform: translateX(-50%); }
.pp-wrap.zoom .pp { transition: transform 1.2s cubic-bezier(.4, 0, .2, 1); }


.pp-tab:focus, .pp-tab:focus-visible, .pp-send:focus, .pp-ico:focus { outline: none; }