/*!
 * Phone hardware frames, vendored + namespaced (`lmf-*`) from:
 * - react-mockframe 1.1.0 dist/styles (Mohammed Banani — MIT License),
 *   itself adapted from Marvel devices.css (Marvelapp — MIT License).
 * Only two devices are included: iPhone 17 + Pixel 10 (obsidian).
 *
 * Screens use REAL device logical resolutions so the embedded app lays out
 * exactly like it would on hardware:
 * - iPhone 17: 402x874pt screen, 11px titanium rail  -> 424x896 outer
 * - Pixel 10:  412x915dp screen, 10px aluminum rail -> 432x935 outer
 *
 * `.lumi-screen` is the live-iframe viewport inside the glass.
 * `.lumi-statusbar` + `.lumi-homebar` are OS chrome overlays — the embedded
 * app draws none of its own and receives matching safe-area insets
 * ({top:47,bottom:34} iOS / {top:30,bottom:20} Android via ?device=).
 */.lmf{transition:transform .5s cubic-bezier(.075,.82,.165,1);display:inline-block;position:relative;box-sizing:content-box!important}.lmf *,.lmf *:after,.lmf *:before{box-sizing:border-box;display:block}.lmf .lmf-screen{z-index:3;background:#08090a;width:100%;height:100%;position:relative;overflow:hidden}.lumi-device .lumi-screen,.lmf .lumi-screen{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;background:#08090a}.preview-frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:transparent;opacity:0;transition:opacity .3s}.preview-frame[data-loaded="1"]{opacity:1}.preview-offline{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;color:var(--text-muted, #6b7280);font-size:.8rem;text-align:center}.lmf .preview-offline{display:flex}.lumi-statusbar{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;justify-content:space-between;pointer-events:none;color:#f7f8f8}.lumi-statusbar .sb-icons{display:flex;align-items:center}.lumi-statusbar svg{display:block}.lumi-statusbar.ios{height:47px;padding:0 34px 0 38px;font-family:-apple-system,SF Pro Text,Instrument Sans,system-ui,sans-serif;font-size:15px;font-weight:600;letter-spacing:.01em}.lumi-statusbar.ios .sb-icons{gap:7px}.lumi-statusbar.android{height:30px;padding:3px 20px 0 22px;font-family:Roboto,Segoe UI,Instrument Sans,system-ui,sans-serif;font-size:12.5px;font-weight:500}.lumi-statusbar.android .sb-icons{gap:5px;opacity:.92}.lumi-statusbar.light{color:#101014}.lumi-statusbar.light .sb-icons{opacity:1}.lumi-homebar{position:absolute;left:50%;transform:translate(-50%);z-index:5;pointer-events:none;border-radius:9999px;background:#f7f8f8e6}.lumi-homebar.ios{bottom:9px;width:134px;height:5px}.lumi-homebar.android{bottom:11px;width:108px;height:4px}.lumi-homebar.light{background:#101014}.pflat{position:relative;width:100%;height:100%;overflow:hidden;background:var(--stage, #fff);transition:background-color .25s}.pflat .preview-offline{display:flex}.lmf-ip17{background:linear-gradient(145deg,#cfcfd6,#a9a9b2 12%,#75757f,#a9a9b2 88%,#cfcfd6);border-radius:64px;width:424px;height:896px;padding:11px;position:relative;box-shadow:inset 0 0 0 1px #ffffff80,inset 0 0 6px #00000059,0 30px 60px -15px #00000080,0 0 0 1px #0006}.lmf-ip17:before{content:"";z-index:1;background:linear-gradient(145deg,#1a1a1e,#0c0c0f);border-radius:59px;position:absolute;inset:4px}.lmf-ip17:after{content:"";z-index:2;background:#000;border-radius:53px;position:absolute;inset:9px}.lmf-ip17 .lmf-antenna{z-index:5;background:linear-gradient(90deg,transparent 0%,#8a8a94 15%,#d5d5dc 50%,#8a8a94 85%,transparent 100%);border-radius:1px;width:12px;height:3px;position:absolute}.lmf-ip17 .lmf-antenna.top-left{top:90px;left:0}.lmf-ip17 .lmf-antenna.top-right{top:90px;right:0}.lmf-ip17 .lmf-antenna.bottom-left{bottom:90px;left:0}.lmf-ip17 .lmf-antenna.bottom-right{bottom:90px;right:0}.lmf-ip17 .lmf-corner{z-index:1;pointer-events:none;width:64px;height:64px;position:absolute}.lmf-ip17 .lmf-corner.tl{background:radial-gradient(at 100% 100%,rgba(255,255,255,.22) 0%,rgba(255,255,255,.08) 30%,transparent 60%);border-radius:58px 0 0;top:6px;left:6px}.lmf-ip17 .lmf-corner.tr{background:radial-gradient(at 0 100%,rgba(255,255,255,.22) 0%,rgba(255,255,255,.08) 30%,transparent 60%);border-radius:0 58px 0 0;top:6px;right:6px}.lmf-ip17 .lmf-corner.bl{background:radial-gradient(at 100% 0%,rgba(255,255,255,.16) 0%,rgba(255,255,255,.06) 30%,transparent 60%);border-radius:0 0 0 58px;bottom:6px;left:6px}.lmf-ip17 .lmf-corner.br{background:radial-gradient(at 0 0%,rgba(255,255,255,.16) 0%,rgba(255,255,255,.06) 30%,transparent 60%);border-radius:0 0 58px;bottom:6px;right:6px}.lmf-ip17 .lmf-edge{z-index:1;pointer-events:none;border:1px solid rgba(120,120,132,.5);border-radius:54px;position:absolute;inset:10px}.lmf-ip17 .lmf-screen{border-radius:50px;box-shadow:0 0 0 2px #000}.lmf-ip17 .lmf-island{z-index:10;box-sizing:border-box;background:#000;border-radius:19px;justify-content:flex-end;align-items:center;gap:7px;width:124px;height:36px;padding-right:12px;display:flex;position:absolute;top:22px;left:50%;transform:translate(-50%)}.lmf-ip17 .lmf-island .lmf-indicator{background:#22c55e;border-radius:50%;width:6px;height:6px;box-shadow:0 0 5px #22c55e,0 0 8px #22c55e80}.lmf-ip17 .lmf-island .lmf-cam{background:radial-gradient(circle at 40% 40%,#3a3a4a,#252530 40%,#15151a,#0a0a0f);border-radius:50%;width:12px;height:12px;position:relative;box-shadow:inset 0 1px 2px #000c,0 0 0 1px #3c3c504d}.lmf-ip17 .lmf-island .lmf-cam:before{content:"";background:radial-gradient(rgba(100,100,150,.4) 0%,transparent 100%);border-radius:50%;width:3px;height:2px;position:absolute;top:2px;left:2px}.lmf-ip17 .lmf-sleep,.lmf-ip17 .lmf-action,.lmf-ip17 .lmf-volume,.lmf-ip17 .lmf-camctl{z-index:4;background:linear-gradient(#a5a5ae,#8b8b95 8%,#6f6f79 20%,#5f5f69,#6f6f79 80%,#8b8b95 92%,#a5a5ae);position:absolute;box-shadow:1px 0 2px #0000004d}.lmf-ip17 .lmf-sleep{border-radius:0 2px 2px 0;width:3px;height:92px;top:182px;right:-3px}.lmf-ip17 .lmf-action{border-radius:2px 0 0 2px;width:3px;height:36px;top:180px;left:-3px;box-shadow:-1px 0 2px #0000004d}.lmf-ip17 .lmf-volume{border-radius:2px 0 0 2px;width:3px;height:62px;top:236px;left:-3px;box-shadow:-1px 0 2px #0000004d}.lmf-ip17 .lmf-volume:before{content:"";background:linear-gradient(#a5a5ae,#8b8b95 8%,#6f6f79 20%,#5f5f69,#6f6f79 80%,#8b8b95 92%,#a5a5ae);border-radius:2px 0 0 2px;width:3px;height:62px;position:absolute;top:76px;left:0}.lmf-ip17 .lmf-camctl{border-radius:0 2px 2px 0;width:3px;height:46px;top:420px;right:-3px}.lmf-px10{background:linear-gradient(160deg,#3a3a40,#26262b 30%,#1c1c20,#26262b 80%,#3a3a40);border-radius:46px;width:432px;height:935px;padding:10px;position:relative;box-shadow:inset 0 0 0 1px #ffffff29,0 30px 60px -15px #00000080,0 0 0 1px #0006}.lmf-px10:before{content:"";z-index:1;background:#0b0b0d;border-radius:42px;width:calc(100% - 6px);height:calc(100% - 6px);display:block;position:absolute;top:3px;left:3px}.lmf-px10:after{content:"";z-index:2;pointer-events:none;border-radius:33px;width:calc(100% - 14px);height:calc(100% - 14px);display:block;position:absolute;top:7px;left:7px;box-shadow:inset 0 0 8px #ffffff0d}.lmf-px10 .lmf-screen{border-radius:30px;box-shadow:none}.lmf-px10 .lmf-pcam{z-index:5;background:#0c0c0e;border-radius:100%;width:14px;height:14px;margin-left:-7px;position:absolute;top:19px;left:50%;box-shadow:inset 0 0 4px #000c,0 0 0 1px #ffffff0d}.lmf-px10 .lmf-pcam:before{content:"";background:radial-gradient(circle at 30% 30%,#2a2a3a,#0a0a10);border-radius:100%;width:7px;height:7px;position:absolute;top:3.5px;left:3.5px}.lmf-px10 .lmf-sleep{background:linear-gradient(#43434a,#2e2e33,#43434a);border-radius:0 2px 2px 0;width:3px;height:78px;position:absolute;top:200px;right:-3px}.lmf-px10 .lmf-volume{background:linear-gradient(#43434a,#2e2e33,#43434a);border-radius:0 2px 2px 0;width:3px;height:108px;position:absolute;top:292px;right:-3px}
