.site-preview{background:#f1e7da;border-radius:10px;position:relative;overflow:hidden;box-shadow:0 18px 40px #2b211c29;container-type:inline-size}.site-preview-chrome{color:#6b5c52;background:#f1e7da;border-bottom:1px solid #2b211c1f;align-items:center;gap:10px;height:28px;padding:0 10px;font-size:10px;font-weight:600;display:flex}.site-preview-dots{gap:4px;display:inline-flex}.site-preview-dots i{background:#c9b8a8;border-radius:50%;width:7px;height:7px}.site-preview-dots i:first-child{background:#e2643e}.site-preview-dots i:nth-child(2){background:#f3b23e}.site-preview-dots i:nth-child(3){background:#7e9b83}.site-preview-url{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.site-preview-viewport{pointer-events:none;overflow:hidden}.site-preview-scale{transform-origin:0 0}.site-preview-scale .creator-render{min-height:0}.template-preview-button .site-preview{box-shadow:none;border-radius:0}.warm-site .template-card.is-active .template-preview-button{outline-offset:4px;outline:2px solid #bd4a2566}.site-preview-card{aspect-ratio:16/11}.site-preview-card .site-preview-viewport{height:calc(100% - 28px)}.site-preview-card .site-preview-scale{width:960px;transform:scale(calc(100cqi / 960px))}.site-preview-flag{z-index:2;color:#fbf5ec;letter-spacing:.08em;text-transform:uppercase;background:#2b211c;border-radius:999px;padding:4px 8px;font-size:10px;font-weight:700;position:absolute;bottom:10px;left:10px}.site-preview-card .site-preview-flag{inset:4px 8px auto auto}.site-preview-card .site-preview-url{padding-right:150px}.site-preview-desktop{aspect-ratio:16/10;width:min(920px,100%);margin:0 auto}.site-preview-desktop .site-preview-viewport{height:calc(100% - 28px)}.site-preview-desktop .site-preview-scale{width:1280px;transform:scale(calc(100cqi / 1280px))}.site-preview-phone{width:100%;height:100%;box-shadow:none;background:0 0;border-radius:0}.site-preview-phone .site-preview-viewport{height:100%}.site-preview-phone .site-preview-scale{width:390px;transform:scale(calc(100cqi / 390px));transform-origin:0 0}.phone-screen-body .site-preview-phone{position:absolute;inset:0}.phone-screen-body .site-preview-live.site-preview-phone .site-preview-viewport{flex:1;height:auto;min-height:0}.site-preview-live{flex-direction:column;min-height:0;display:flex}.site-preview-live .site-preview-viewport{pointer-events:auto;flex:1;min-height:0;overflow:hidden;transform:translateZ(0);container-type:size}.site-preview-live .site-preview-scroll{overscroll-behavior:contain;scroll-behavior:smooth;height:100%;min-height:0;overflow:auto}.site-preview-live .site-preview-scale,.site-preview-live.site-preview-phone .site-preview-scale,.site-preview-live.site-preview-desktop .site-preview-scale{width:100%;transform:none}.site-preview-live.site-preview-desktop{aspect-ratio:auto;width:100%;height:100%;box-shadow:none;border-radius:0}.site-preview:not(.site-preview-phone) .cr-header{gap:12px 20px;padding:12px 4% 10px}.site-preview-live.site-preview-desktop .cr-header>.cr-button{gap:10px;min-height:40px;padding-inline:16px}.site-preview-live.site-preview-desktop .cr-header nav.cr-nav-index{flex-wrap:nowrap}.site-preview-live.site-preview-desktop .cr-header nav.cr-nav-index a{white-space:nowrap;align-items:center;min-height:0;padding:4px 10px}.site-preview-live.site-preview-desktop .cr-nav-index small{display:none}.site-preview-live.site-preview-desktop .creator-render .cr-hero .cr-section-inner{align-items:center;gap:28px;min-height:0;padding-block:28px}.site-preview-live.site-preview-desktop .creator-render .cr-hero h1{margin-bottom:12px;font-size:clamp(34px,4.4cqw,54px)}.site-preview-live.site-preview-desktop .creator-render .cr-hero .cr-intro{margin-bottom:16px}.site-preview-live.site-preview-desktop .creator-render:not(.cr-hero-banner,.cr-hero-frame,.cr-hero-aside) .cr-hero-photo{aspect-ratio:5/4;max-height:300px}.site-preview-live.site-preview-phone,.site-preview-live.site-preview-phone .site-preview-viewport{height:100%}.site-preview-chip{color:#fbf5ec;letter-spacing:.08em;text-transform:uppercase;background:#2b211c;border-radius:999px;flex:none;margin-left:auto;padding:2px 8px}.demo-step{align-items:center;gap:8px;min-width:0;display:inline-flex}.template-dialog .demo-step strong{letter-spacing:-.04em;font-family:Syne,Manrope,sans-serif;font-size:20px;line-height:1}.demo-step button{border:1px solid color-mix(in srgb, currentColor 22%, transparent);width:34px;height:34px;color:inherit;cursor:pointer;background:0 0;border-radius:999px;place-items:center;margin:0;padding:0;display:grid}.template-dialog .demo-devices button{border-radius:999px;align-items:center;gap:6px;width:auto;height:34px;padding:0 12px;font-size:13px;font-weight:700;display:inline-flex}.template-dialog .demo-devices button:last-child{justify-content:center;width:34px;padding:0}html:has(.template-dialog[open]){overflow:hidden}.template-dialog[open]{flex-direction:column;width:min(1120px,100vw - 32px);height:calc(100dvh - 32px);max-height:calc(100dvh - 32px);margin:auto;display:flex;overflow:hidden}.template-dialog .dialog-stage{flex-direction:row;flex:1;min-height:0;display:flex;overflow:hidden}.demo-chapter{border-bottom:1px solid color-mix(in srgb, currentColor 12%, transparent);background:linear-gradient(90deg,#e2643e14,#0000 46%);grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:12px 22px 14px;display:grid}.demo-chapter>em{letter-spacing:-.06em;color:#b4441f;font-family:Syne,Manrope,sans-serif;font-size:32px;font-style:normal;font-weight:700;line-height:1}.demo-chapter small{letter-spacing:.16em;text-transform:uppercase;opacity:.55;margin-bottom:2px;font-size:10px;font-weight:700;display:block}.demo-chapter strong{letter-spacing:-.04em;font-family:Syne,Manrope,sans-serif;font-size:20px;font-weight:700;line-height:1.05;display:block}.demo-chapter span{opacity:.72;margin-top:3px;font-size:13px;line-height:1.35;display:block}.demo-chapter-nav{gap:8px;display:flex}.demo-chapter-nav button{border:1px solid color-mix(in srgb, currentColor 22%, transparent);width:36px;height:36px;color:inherit;cursor:pointer;background:0 0;border-radius:999px;place-items:center;margin:0;padding:0;display:grid}.demo-chapter-nav button:disabled{opacity:.32;cursor:default}.demo-chapter-nav button:focus-visible{outline-offset:2px;outline:2px solid #bd4a2566}.demo-rail{border-right:1px solid color-mix(in srgb, currentColor 12%, transparent);flex:none;width:248px;padding:16px 12px 8px;overflow:auto}.demo-rail-head{justify-content:space-between;align-items:baseline;margin:0 8px 8px;display:flex}.demo-rail-head small,.demo-rail-kicker{letter-spacing:.16em;text-transform:uppercase;opacity:.55;font-size:10px;font-weight:700}.demo-rail-head b{font-variant-numeric:tabular-nums;font-size:12px}.demo-meter{background:color-mix(in srgb, currentColor 12%, transparent);border-radius:99px;height:3px;margin:0 8px 14px;overflow:hidden}.demo-meter i{border-radius:inherit;background:#bd4a25;height:100%;transition:width .35s cubic-bezier(.22,1,.36,1);display:block}.demo-rail-list{padding-bottom:16px;position:relative}.demo-rail-list:before{content:"";background:#bd4a2566;width:1px;position:absolute;top:20px;bottom:28px;left:21px}.demo-rail-kicker{margin:14px 8px 6px 46px;display:block}.demo-rail button{width:100%;color:inherit;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:12px;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:10px;margin:0 0 2px;padding:7px 8px;display:grid}.demo-rail button:hover{background:#bd4a2514}.demo-rail button em{z-index:1;letter-spacing:.04em;color:#b4441f;background:#fffdf9;border-radius:50%;place-items:center;width:28px;height:28px;font-size:10px;font-style:normal;font-weight:700;display:grid;position:relative;box-shadow:0 0 0 1px #bd4a2510}.demo-rail button strong{letter-spacing:-.03em;font-size:14px;font-weight:700;display:block}.demo-rail button small{opacity:.62;margin-top:2px;font-size:12px;font-weight:500;line-height:1.35;display:block}.demo-rail button[aria-current=true]{color:#fff;background:#bd4a25}.demo-rail button[aria-current=true]:hover{background:#bd4a25}.demo-rail button[aria-current=true] em{color:#b4441f;background:#2b211c;box-shadow:0 0 0 3px #2b211c2d}.demo-rail button[aria-current=true] small{color:#fff;opacity:.78}.demo-rail button:focus-visible,.demo-step button:focus-visible,.template-dialog .demo-devices button:focus-visible{outline-offset:2px;outline:2px solid #bd4a2566}.dialog-stage-view{flex:1;min-width:0;min-height:0;display:flex;position:relative}.dialog-stage-view:not(.is-phone){background:linear-gradient(#2b211c05 1px,#0000 1px) 0 0/28px 28px,linear-gradient(90deg,#2b211c05 1px,#0000 1px) 0 0/28px 28px,#fffdf9;padding:12px}.template-dialog:has(.dialog-stage-view:not(.is-phone)) .demo-chapter{padding-block:8px}.template-dialog:has(.dialog-stage-view:not(.is-phone)) .dialog-bottom{padding-block:12px}.dialog-stage-view:not(.is-phone) .dialog-preview{border-radius:16px;flex:1;width:100%;min-height:0;margin:0;display:flex;overflow:hidden;box-shadow:0 22px 50px #2b211c07}.dialog-stage-view.is-phone{background:radial-gradient(42% 24% at 50% 88%,#e2643e55,#0000 70%),radial-gradient(80% 50% at 50% 40%,#fbf5ec,#0000 70%),linear-gradient(#fbf5ec,#fbf5ec);justify-content:center;align-items:center;padding:10px 20px 6px;container-type:size}.template-dialog:has(.dialog-stage-view.is-phone) .demo-chapter{padding-block:8px}.template-dialog:has(.dialog-stage-view.is-phone) .demo-chapter>em{font-size:26px}.template-dialog:has(.dialog-stage-view.is-phone) .dialog-bottom{padding-block:12px}.template-dialog .dialog-stage-view.is-phone .phone-frame{aspect-ratio:9/16.1;filter:drop-shadow(0 30px 40px #2b211c37);width:min(400px,100cqw - 8px,56cqh);height:auto;max-height:100%;margin:0}.template-dialog .dialog-stage-view.is-phone .phone-bezel{box-sizing:border-box;height:100%;min-height:0;display:flex}.template-dialog .dialog-stage-view.is-phone .phone-screen{aspect-ratio:auto;flex-direction:column;flex:1;height:auto;min-height:0;display:flex}.template-dialog .dialog-stage-view.is-phone .phone-screen-body{flex:1;min-height:0;position:relative;inset:auto}.template-dialog .dialog-stage-view.is-phone .phone-screen-body .site-preview-live.site-preview-phone{width:auto;height:auto;position:absolute;inset:0}.template-dialog .dialog-stage-view.is-phone .site-preview-scroll{scrollbar-width:none}.template-dialog .dialog-stage-view.is-phone .site-preview-scroll::-webkit-scrollbar{width:0;height:0}.template-dialog .dialog-stage-view.is-phone .creator-render h1,.template-dialog .dialog-stage-view.is-phone .creator-render h2{letter-spacing:-.045em;text-wrap:balance;overflow-wrap:normal;word-break:keep-all;-webkit-hyphens:none;hyphens:none;max-width:none;font-size:clamp(28px,8.4cqw,36px);line-height:1.08}@media (max-width:760px){.warm-site .template-dialog[open]{border-radius:0;width:100%;max-width:100%;height:100%;max-height:none;margin:0}.template-dialog .dialog-bar{flex-wrap:wrap}.template-dialog .dialog-stage{flex-direction:column}.demo-rail{border-right:0;border-bottom:1px solid color-mix(in srgb, currentColor 12%, transparent);scrollbar-width:none;align-items:center;gap:6px;width:auto;padding:8px 10px;display:flex;overflow-x:auto}.demo-rail::-webkit-scrollbar{display:none}.demo-chapter{gap:10px;padding:10px 14px}.demo-chapter>em{font-size:22px}.demo-chapter strong{font-size:16px}.demo-chapter span,.demo-rail-head,.demo-meter,.demo-rail-kicker,.demo-rail button em,.demo-rail button small,.demo-rail-list:before{display:none}.demo-rail button{border:1px solid color-mix(in srgb, currentColor 18%, transparent);border-radius:999px;grid-template-columns:1fr;align-items:center;width:auto;margin:0;padding:6px 12px}.template-dialog .demo-devices button{padding-inline:8px}}@media (prefers-reduced-motion:reduce){.demo-meter i{transition:none}.site-preview-live .site-preview-scroll{scroll-behavior:auto}}@media (max-width:760px){.site-preview-card{aspect-ratio:9/16}.site-preview-card .site-preview-scale,.site-preview-desktop .site-preview-scale{width:100%;transform:none}.site-preview-card .site-preview-url{display:none}.site-preview-card .site-preview-flag{inset:4px 8px auto auto}.site-preview-card .site-preview-viewport{-webkit-mask-image:linear-gradient(#000 0 calc(100% - 36px),#0000);mask-image:linear-gradient(#000 0 calc(100% - 36px),#0000)}.site-preview-desktop{aspect-ratio:9/16;width:min(430px,100%)}}.site-preview.is-poster{background:#1c1e24;position:relative;overflow:hidden}.site-preview.is-poster img{object-fit:cover;opacity:.92;width:100%;height:100%;position:absolute;inset:0}
