.lcdi.svelte-1yggu1b{max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:24px}.lcdi-device.svelte-1yggu1b{position:relative;width:100%;max-width:900px;margin:0 auto}.lcdi-frame.svelte-1yggu1b{position:relative;display:block;width:100%;height:auto;z-index:2;pointer-events:none}.lcdi-screen.svelte-1yggu1b{position:absolute;left:1.3%;top:3.6%;width:97.4%;height:90.5%;z-index:1}.lcdi-hint-tip.svelte-1yggu1b{position:absolute;left:26%;top:7%;z-index:3;pointer-events:none;display:flex;flex-direction:column;align-items:center;animation:svelte-1yggu1b-lcdi-hint-bounce 2s ease-in-out infinite,svelte-1yggu1b-lcdi-hint-fadein .5s ease-out}.lcdi-hint-box.svelte-1yggu1b{position:relative;border:1px solid #ffd000;border-radius:4px;background:rgba(35,30,5,.95);color:#ffd000;font-family:Red Hat Display,system-ui,sans-serif;font-weight:400;font-size:11px;padding:2px 8px;white-space:nowrap;box-shadow:0 2px 8px #00000073}.lcdi-hint-box.svelte-1yggu1b:after{content:"";position:absolute;bottom:-4px;left:50%;transform:translate(-50%) rotate(45deg);width:7px;height:7px;background:rgba(35,30,5,.95);border-right:1px solid #ffd000;border-bottom:1px solid #ffd000}@keyframes svelte-1yggu1b-lcdi-hint-bounce{0%,to{transform:translate(-50%,calc(-100% - 12px))}50%{transform:translate(-50%,calc(-100% - 18px))}}@keyframes svelte-1yggu1b-lcdi-hint-fadein{0%{opacity:0}to{opacity:1}}.lcdi-controls.svelte-1yggu1b{display:flex;flex-direction:column;align-items:center;gap:10px}.lcdi-label.svelte-1yggu1b{font-family:Red Hat Display,system-ui,sans-serif;font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#7d8ce0}.lcd-panel{position:relative;width:100%;aspect-ratio:16 / 10;background:#06080f;border:1px solid #283660;border-radius:16px;overflow:hidden;touch-action:none;user-select:none}.lcd-panel--locked{touch-action:auto}.lcd-panel--locked .lcd-face{cursor:default}.lcd-panel--round{aspect-ratio:1 / 1;border-radius:50%;max-width:460px;margin:0 auto}.lcdi-screen .lcd-panel{position:absolute;inset:0;width:100%;aspect-ratio:auto;border:0;border-radius:1.6%/5%;max-width:none;margin:0}.lcd-bg{position:absolute;inset:0;opacity:0;transition:opacity .5s ease;background-size:cover;background-position:center}.lcd-bg.is-active{opacity:1}.lcd-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.lcd-bg iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;pointer-events:none}.lcd-grid{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .2s ease;background-image:linear-gradient(to right,rgba(125,140,224,.25) 1px,transparent 1px),linear-gradient(to bottom,rgba(125,140,224,.25) 1px,transparent 1px);background-size:calc(100% / var(--lcd-cols, 12)) calc(100% / var(--lcd-rows, 12))}.lcd-panel.is-dragging .lcd-grid{opacity:1}.lcd-faces{position:absolute;inset:0}.lcd-face{position:absolute;box-sizing:border-box;cursor:grab;border-radius:var(--face-radius, 8px);transition:box-shadow .15s ease}.lcd-face:after{content:"";position:absolute;inset:0;border:var(--face-line, 2px) solid var(--face-stroke, transparent);border-radius:inherit;pointer-events:none;z-index:1}.lcd-face.is-selected{box-shadow:0 0 0 2px #5664b1,0 6px 20px #00000073}.lcd-face.is-dragging{cursor:grabbing;box-shadow:0 0 0 2px #7d8ce0,0 6px 20px #00000073}.lcd-face__body{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none}.lcd-face__body iframe{width:100%;height:100%;border:0;display:block;background:transparent}.lcd-face__body img{width:100%;height:100%;object-fit:contain;display:block}.lcd-handle{position:absolute;width:14px;height:14px;background:#5664b1;border:1px solid #cdd6ff;border-radius:3px;opacity:0;pointer-events:none;z-index:2}.lcd-face.is-selected .lcd-handle{opacity:1;pointer-events:auto}.lcd-handle--nw{left:3px;top:3px;cursor:nwse-resize}.lcd-handle--ne{right:3px;top:3px;cursor:nesw-resize}.lcd-handle--se{right:3px;bottom:3px;cursor:nwse-resize}.lcd-handle--sw{left:3px;bottom:3px;cursor:nesw-resize}.lcdi-pills{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.lcdi-pills .lcd-pill{font-family:Red Hat Display,system-ui,sans-serif;font-size:.9em;font-weight:600;color:#ccd6ff;background:#0d1323;border:1px solid #283660;border-radius:999px;padding:8px 16px;cursor:pointer;transition:border-color .2s ease,background-color .2s ease,color .2s ease}.lcdi-pills .lcd-pill:hover{border-color:#5664b1;color:#f8f8ff}.lcdi-pills .lcd-pill.is-active{border-color:#5664b1;background:#10182b;color:#f8f8ff}
