@font-face{font-family:Pelak;src:url('/public/fonts/Pelak-Regular.woff2') format('woff2');font-display:swap;font-weight:400}@font-face{font-family:Pelak;src:url('/public/fonts/Pelak-Bold.woff2') format('woff2');font-display:swap;font-weight:700}
*{box-sizing:border-box}body{margin:0;background:#f8fafc;color:#0b1c30;font:16px/1.9 Pelak,system-ui,sans-serif}a{color:inherit;text-decoration:none}button,input{font:inherit}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #2240a8;outline-offset:4px}header{border-bottom:1px solid #dce3ee;background:#fff}nav,main,footer{max-width:1240px;margin:auto;padding:24px 32px}header nav{display:flex;align-items:center;justify-content:space-between;gap:24px}nav div,footer{display:flex;gap:24px;flex-wrap:wrap}.brand{font-size:26px;font-weight:700}section{margin:32px 0 64px}.intro{max-width:780px;padding:32px 0}h1{font-size:clamp(32px,4vw,52px);line-height:1.4;margin:12px 0 24px}h2{font-size:24px;line-height:1.6}.eyebrow{color:#2240a8;font-weight:700}.tagline{font-size:20px}p{color:#475569}label{display:block;margin-top:28px}input{display:block;width:100%;margin-top:8px;padding:12px 20px;border:1px solid #cbd5e1;border-radius:9999px;background:#fff}.template-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}.template-card{background:#fff;border:1px solid #e4eaf2;border-radius:24px;padding:16px;display:flex;flex-direction:column}.template-card h2{font-size:20px;margin:16px 4px 8px}.template-card p{margin:0 4px 20px}.template-card img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:14px;background:#eff4ff}.template-card .actions{margin-top:auto}.actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}button,.primary,.secondary{border:1px solid #dce3ee;border-radius:9999px;padding:10px 20px;cursor:pointer;background:#fff;color:#0b1c30}.primary{background:#deff08;border-color:#deff08;font-weight:700}.secondary{font-size:14px}.detail{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:start}.cover{width:100%;height:auto;border-radius:24px;background:#eff4ff}.note{font-size:13px}.features{display:flex;gap:12px;flex-wrap:wrap;padding:0;list-style:none}.features li{padding:10px 18px;background:#eff4ff;border-radius:16px}.screenshots{display:flex;gap:24px;overflow:auto;padding:8px 0 20px}.screenshots figure{margin:0;flex:0 0 260px}.screenshots img{width:100%;height:500px;object-fit:cover;object-position:top;border-radius:18px;border:1px solid #dce3ee}.breadcrumbs{padding:8px 0;font-size:14px}.share-status{position:fixed;bottom:20px;inset-inline:20px;width:fit-content;max-width:calc(100% - 40px);margin:auto;background:#0b1c30;color:#fff;border-radius:12px;padding:10px 20px}.share-status:empty{display:none}footer{border-top:1px solid #dce3ee;font-size:14px}.skip{position:absolute;top:-100px}.skip:focus{top:8px;background:white;padding:8px;z-index:10}[hidden]{display:none!important}.summary-box{background:#eff4ff;border:1px solid #dce3ee;border-radius:18px;padding:16px 20px;margin:18px 0}.summary-box p{margin:0;color:#1e293b;font-size:15px;line-height:1.8}.summary-box strong{color:#0b1c30}.faq-section{margin-top:48px}.faq-list{display:flex;flex-direction:column;gap:12px;margin-top:20px}.faq-item{background:#fff;border:1px solid #e4eaf2;border-radius:18px;padding:16px 20px}.faq-item summary{font-weight:700;font-size:17px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary::after{content:'+';font-size:22px;color:#2240a8;font-weight:700;line-height:1}.faq-item[open] summary::after{content:'−'}.faq-item p{margin:14px 0 0;color:#475569;line-height:1.8}
@media(max-width:900px){.template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.detail{grid-template-columns:1fr;gap:24px}}@media(max-width:600px){nav,main,footer{padding:20px}header nav{align-items:flex-start}nav div{gap:12px;font-size:13px}.template-grid{grid-template-columns:1fr}.intro{padding-top:0}section{margin-bottom:40px}}

.live-preview{margin:0;display:flex;flex-direction:column;gap:12px}.live-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.live-badge{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:#0b1c30}.live-badge i{width:8px;height:8px;border-radius:9999px;background:#94a3b8}.is-live .live-badge i{background:#22c55e;box-shadow:0 0 0 4px #22c55e33;animation:live-pulse 2s ease-in-out infinite}.device-switch{display:inline-flex;gap:4px;padding:4px;border:1px solid #dce3ee;border-radius:9999px;background:#fff}.device-switch button{border:0;padding:6px 16px;font-size:13px;min-height:36px}.device-switch button[aria-pressed=true]{background:#0b1c30;color:#fff}.live-stage{display:flex;justify-content:center;background:#eff4ff;border:1px solid #dce3ee;border-radius:24px;padding:16px}.live-frame{position:relative;width:100%;aspect-ratio:16/10;border-radius:16px;overflow:hidden;background:#0b1c30;transition:width .3s ease,aspect-ratio .3s ease}[data-device=mobile] .live-frame{width:min(100%,360px);aspect-ratio:9/18;border-radius:28px;border:8px solid #0b1c30}.live-frame .cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:0}.live-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}.live-loading{position:absolute;inset-inline:16px;bottom:16px;width:fit-content;margin:auto;padding:8px 16px;border-radius:9999px;background:#0b1c30e6;color:#fff;font-size:13px}.live-preview figcaption{font-size:13px;color:#475569}.live-preview figcaption a{text-decoration:underline;text-underline-offset:4px;color:#0b1c30;margin-inline-start:6px}.door-note{margin:0 0 4px;padding:10px 16px;border-radius:14px;background:#f4ffc2;border:1px solid #deff08;color:#0b1c30;font-size:14px}@keyframes live-pulse{50%{box-shadow:0 0 0 7px #22c55e1a}}@media(prefers-reduced-motion:reduce){.is-live .live-badge i{animation:none}.live-frame{transition:none}}@media(max-width:600px){.live-stage{padding:10px;border-radius:18px}[data-device=mobile] .live-frame{width:min(100%,320px)}}