.lp .demo-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:1.5rem;display:grid}.lp .demo-card{border:1px solid var(--line);height:100%;box-shadow:var(--card-shadow);background:#fff;border-radius:.9rem;flex-direction:column;transition:border-color .15s,transform .15s;display:flex;overflow:hidden}.lp .demo-card:hover{border-color:#b8c4d4;transform:translateY(-2px)}.lp .demo-shot{aspect-ratio:800/538;background:var(--surface);border-bottom:1px solid var(--line);display:block;overflow:hidden}.lp .demo-shot img{object-fit:cover;object-position:top;width:100%;height:100%}.lp .demo-meta{flex-direction:column;gap:.15rem;padding:1rem 1.15rem 0;display:flex}.lp .demo-name{font-family:Poppins LP,Archivo LP,sans-serif;font-size:1.08rem;font-weight:600}.lp .demo-sub{color:var(--muted);font-size:15px}.lp .demo-open{color:var(--green);margin:auto 1.15rem 1.1rem;padding-top:.8rem;font-size:15px;font-weight:650}.lp .demo-card:hover .demo-open{text-underline-offset:3px;text-decoration:underline}.lp .demo-card:focus-visible{outline:3px solid color-mix(in srgb, var(--green) 55%, white);outline-offset:3px}.lp.demo-app{flex-direction:column;font-size:15px;display:flex;position:fixed;inset:0;overflow:hidden}.lp .demo-bar{border-bottom:1px solid var(--line);background:#fff;flex:none;align-items:center;gap:.75rem;height:60px;padding:0 1rem;display:flex}.lp .demo-bar .brand{flex:none}.lp .demo-bar .brand .demo-logo-icon{height:30px;display:none}@media (max-width:639px){.lp .demo-bar .brand .demo-logo-icon{display:block}.lp .demo-bar .brand .demo-logo-full{display:none}}.lp .demo-switch{flex:0 300px;min-width:0}.lp .demo-switch .field{min-height:2.4rem;padding-right:2rem;font-size:15px}.lp .demo-devices{border:1px solid var(--line);border-radius:.5rem;display:none;overflow:hidden}.lp .demo-devices button{color:var(--ink-2);padding:.45rem .8rem;font-size:14px}.lp .demo-devices button[aria-pressed=true]{background:var(--surface);color:var(--ink);font-weight:650}.lp .demo-cta{white-space:nowrap;margin-left:auto}@media (min-width:900px){.lp .demo-devices{display:inline-flex}}.lp .demo-body{flex:1;min-height:0;display:flex;position:relative}.lp .demo-stage{background:var(--surface);flex:1;justify-content:center;min-width:0;display:flex}.lp .demo-frame{background:#fff;border:0;width:100%;height:100%}.lp .demo-stage.phone{padding:1.25rem}.lp .demo-stage.phone .demo-frame{border:8px solid #0b1a33;border-radius:1.4rem;width:390px;max-width:100%;box-shadow:0 20px 50px -24px #0b1a3380}.lp .demo-panel{border-right:1px solid var(--line);background:#fff;flex:none;width:360px;position:relative;overflow-y:auto}.lp .demo-panel-toggle{display:none}.lp .demo-panel-inner{padding:1.25rem 1.25rem 2rem}.lp .demo-title{letter-spacing:-.02em;font-family:Poppins LP,Archivo LP,sans-serif;font-size:1.35rem;font-weight:700}.lp .demo-hint{color:var(--muted);margin-top:.2rem}.lp .demo-panel fieldset{border-top:1px solid var(--line);gap:.7rem;margin-top:1.1rem;padding-top:1rem;display:grid}.lp .demo-panel legend{float:left;width:100%;color:var(--ink);justify-content:space-between;align-items:baseline;margin-bottom:.2rem;font-weight:650;display:flex}.lp .demo-current{color:var(--muted);font-size:14px;font-weight:400}.lp .demo-field{gap:.25rem;display:grid}.lp .demo-field>span{color:var(--ink-2);font-size:13.5px}.lp .demo-field .field{min-height:2.5rem;padding:.5rem .7rem;font-size:15px}.lp .demo-field textarea.field{resize:vertical;line-height:1.4}.lp .demo-themes{grid-template-columns:repeat(3,1fr);gap:.45rem;display:grid}.lp .demo-themes button{border:1px solid var(--line);text-align:left;border-radius:.5rem;gap:.3rem;width:100%;padding:.35rem;transition:border-color .15s;display:grid}.lp .demo-themes button:hover{border-color:#b8c4d4}.lp .demo-themes button[aria-pressed=true]{border-color:var(--green);box-shadow:0 0 0 2px var(--green)}.lp .demo-themes .sw{border-radius:.3rem;height:26px;display:flex;overflow:hidden}.lp .demo-themes .sw i{flex:1}.lp .demo-themes .sw i:first-child{flex:2}.lp .demo-themes .nm{white-space:nowrap;text-overflow:ellipsis;font-size:12.5px;line-height:1.2;overflow:hidden}.lp .demo-palette{gap:.35rem;display:grid}.lp .demo-palette label{cursor:pointer;border-radius:.5rem;grid-template-columns:40px 1fr auto;align-items:center;gap:.7rem;padding:.3rem .4rem;display:grid}.lp .demo-palette label:hover{background:var(--surface)}.lp .demo-palette input[type=color]{border:1px solid var(--line);cursor:pointer;background:0 0;border-radius:.4rem;width:40px;height:32px;padding:0}.lp .demo-palette .pl{line-height:1.25;display:grid}.lp .demo-palette .pl span{font-size:14.5px;font-weight:600}.lp .demo-palette .pl small{color:var(--muted);font-size:12.5px}.lp .demo-palette code{color:var(--ink-2);font-family:ui-monospace,monospace;font-size:12.5px}.lp .demo-warn{color:#8a4b00;background:#fff6e5;border:1px solid #f3d9a8;border-radius:.5rem;padding:.55rem .7rem;font-size:13.5px;line-height:1.45}.lp .demo-color{align-items:center;gap:.7rem;display:flex}.lp .demo-color input[type=color]{border:1px solid var(--line);cursor:pointer;background:0 0;border-radius:.4rem;width:44px;height:36px;padding:0}.lp .demo-upload{min-height:2.6rem;color:var(--green);cursor:pointer;border:1px dashed #b8c4d4;border-radius:.55rem;justify-content:center;align-items:center;font-weight:650;display:flex;position:relative}.lp .demo-upload:hover{background:var(--surface)}.lp .demo-upload:focus-within{outline:3px solid color-mix(in srgb, var(--green) 55%, white);outline-offset:2px}.lp .demo-upload input{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;inset:0}.lp .demo-link{color:var(--green);text-underline-offset:3px;justify-self:start;font-size:14px;font-weight:600;text-decoration:underline}.lp .demo-error{color:#b4321f;font-size:14px}.lp .demo-fine{color:var(--muted);font-size:13px;line-height:1.45}.lp .demo-actions{gap:.75rem;margin:1.4rem 0 .8rem;display:grid}@media (max-width:899px){.lp .demo-cta{display:none}.lp .demo-panel{border-right:0;border-top:1px solid var(--line);z-index:5;border-radius:1rem 1rem 0 0;flex-direction:column;width:auto;max-height:72%;display:flex;position:absolute;inset:auto 0 0;overflow:hidden;box-shadow:0 -12px 32px -12px #0b1a334d}.lp .demo-panel:not(.open) .demo-panel-inner{display:none}.lp .demo-panel-inner{overflow-y:auto}.lp .demo-panel-toggle{width:100%;color:var(--green);border-bottom:1px solid var(--line);flex:none;padding:.85rem;font-weight:650;display:block}}
