.live-demo{padding:100px 24px 120px;background-color:#1c1c1f}.live-demo.section{max-width:100%;margin:0}.live-demo__motion{position:relative;max-width:1075px;margin:0 auto}.live-demo .subtitle{color:#5266eb}.live-demo .title{margin-bottom:16px;font-family:"Instrument Sans",sans-serif;font-size:56px;line-height:1.1;font-weight:500;letter-spacing:-0.5px;color:#fff}.live-demo .text.center{max-width:760px;margin:0 auto;font-size:18px;line-height:28px;color:#8a8f98}.live-demo__window{display:grid;grid-template-columns:176px minmax(0, 1fr) 340px;height:clamp(600px,100vh - 110px,720px);max-width:1258px;margin:56px auto 0;overflow:hidden;border:1px solid rgba(240,245,254,.14);border-radius:16px;background-color:#1c1c1f;box-shadow:0 24px 60px rgba(0,0,0,.45)}.live-demo__forms{display:flex;flex-direction:column;gap:8px;min-height:0;padding:12px;overflow-y:auto;background-color:rgba(19,19,22,.85);border-right:1px solid hsla(0,0%,100%,.07)}.live-demo__card{display:flex;flex-direction:column;flex-shrink:0;width:100%;padding:6px;border:none;border-radius:10px;background:rgba(0,0,0,0);color:inherit;font:inherit;text-align:left;text-decoration:none;cursor:pointer;transition:background-color .18s ease}.live-demo__card:hover{background-color:hsla(0,0%,100%,.04)}.live-demo__card.is-active{background:#26262b;box-shadow:inset 0 0 0 1px hsla(0,0%,100%,.07)}.live-demo__card.is-active .live-demo__thumb{box-shadow:0 0 0 2px #1652ee}.live-demo__card:focus-visible{outline:2px solid #5266eb;outline-offset:2px}.live-demo__thumb{display:flex;align-items:center;justify-content:center;height:104px;margin-bottom:6px;overflow:hidden;border-radius:6px;background-color:#fff}.live-demo__thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}.live-demo__thumb--upload{background-color:rgba(0,0,0,0);border:1.5px dashed hsla(0,0%,100%,.25);transition:border-color .18s ease}.live-demo__card--upload:hover .live-demo__thumb--upload{border-color:hsla(0,0%,100%,.5)}.live-demo__plus{width:24px;height:24px;background-image:url("/img/panel/plus_icon.svg")}.live-demo__card-title,.live-demo__card-sub{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.live-demo__card-title{font-size:13px;line-height:17px;font-weight:600;color:#fff}.live-demo__card-sub{font-size:11.5px;line-height:15px;color:#8a8f98}.live-demo__editor{--bg: #ffffff;--surface: #ffffff;--fg: #0a0a0a;--muted: #f5f5f5;--muted-fg: #737373;--line: #e5e5e5;--sidebar-bg: #ffffff;--ring-strong: rgba(10, 10, 10, 0.1);--ring-soft: rgba(10, 10, 10, 0.05);--shadow-2xs: 0 1px 2px rgba(0, 0, 0, 0.05);--card-ground: rgba(245, 245, 245, 0.4);--header-ground: rgba(255, 255, 255, 0.4);--input-bg: #ffffff;--placeholder: #a3a3a3;--dash: #d4d4d4;--nav-active: rgba(22, 82, 238, 0.1);--btn-disabled: #a9bcf2;--danger: #b42318;--danger-bg: #fef3f2;--danger-line: #fee4e2;--note-bg: #f0f4ff;--blue: #1652ee;--blue-hover: #1c5bff;--auth-ground: #f7fafc;--auth-glow-1: #e3ecff;--auth-glow-2: #eae4ff;--auth-card: #ffffff;--auth-text: #3c4257;--auth-text-2: #697386;--auth-line: #e3e8ee;--auth-input: #eef1f8;--auth-input-focus: #ffffff;--auth-placeholder: #8792a2;--auth-secondary: #ffffff;--auth-secondary-hover: #f7fafc;--auth-error: #cd3d64;color-scheme:light;min-width:0;min-height:0;container-type:inline-size;background-color:var(--bg)}.live-demo__editor-box{height:100%}.live-demo__page{display:block;width:100%;height:100%;border:0}.live-demo__loading{display:flex;align-items:center;justify-content:center;gap:10px;height:100%;padding:24px;font-size:14px;text-align:center;color:var(--muted-fg)}.live-demo__panel{min-width:0;min-height:0}.live-demo__note{max-width:760px;margin:20px auto 0;font-size:13px;line-height:20px;text-align:center;color:#8a8f98}@container (max-width: 720px){.live-demo__editor .editor-toolbar__hint{display:none}}.fw-panel{display:flex;flex-flow:column;height:100%;padding:4px 6px 6px 6px;background-color:#1c1a1d;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;text-align:left;-webkit-font-smoothing:antialiased}.fw-panel .usage{position:relative;display:flex;flex-shrink:0;justify-content:space-between;height:44px;margin-top:4px;margin-bottom:6px;padding:10px 52px 10px 10px;z-index:2}.fw-panel .usage__text{display:inline-block;font-size:14px;line-height:24px;color:#fff}.fw-panel .popup{position:absolute;top:6px;right:6px;width:32px;height:32px}.fw-panel .popup__icon{width:32px;height:32px;border-radius:10px;background-image:url("/img/panel/settings_icon.svg")}.fw-panel .wrap{display:flex;flex-flow:column;flex:1 1 auto;min-height:0}.fw-panel .settings_wrap{flex-shrink:0;margin-bottom:6px;padding:0 10px;border-radius:10px;background:linear-gradient(180deg, #363638 0%, #343434 100%)}.fw-panel .settings_title{height:36px;font-size:14px;line-height:36px;color:#b0b0b0}.fw-panel .settings_item{position:relative;height:40px;font-size:14px;line-height:40px;color:#fff}.fw-panel .settings_item.add_template:before{content:"";position:absolute;top:0;bottom:0;right:0;width:24px;height:24px;margin:auto;background-image:url("/img/panel/plus_icon.svg")}.fw-panel .random_wrap{height:39px;line-height:39px;border-bottom:1px solid #313131;box-shadow:0 1px 0 #3d3d3d}.fw-panel .toggler{position:relative}.fw-panel .toggler:before{content:"";position:absolute;right:0;top:0;bottom:0;width:40px;height:22px;margin:auto;border-radius:24px;background-color:#6a6a6c}.fw-panel .toggler:after{content:"";position:absolute;right:20px;top:0;bottom:0;width:18px;height:18px;margin:auto;border-radius:18px;background-color:#fff;box-shadow:0 2px 4px rgba(39,39,39,.1)}.fw-panel .response{position:relative;padding:12px 0 12px 34px;font-size:14px;line-height:24px;letter-spacing:1px;color:#b0b0b0}.fw-panel .response:before{content:"";position:absolute;top:12px;left:0;width:24px;height:24px}.fw-panel .response.default{padding-left:0}.fw-panel .icon_success:before{background-image:url("/img/panel/icon_success.svg")}.fw-panel .icon_error:before{background-image:url("/img/panel/icon_error.svg")}.fw-panel .response_sphere{display:flex;align-items:center;gap:10px;padding-left:0}.fw-panel .page_range{flex-shrink:0;margin-bottom:10px;padding:12px;border-radius:10px;background-color:#fff}.fw-panel .page_range__label{display:block;margin-bottom:8px;font-size:14px;line-height:20px;color:#55555e}.fw-panel .page_range__input{display:block;width:100%;height:34px;padding:0 10px;font-size:14px;font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;color:#000;background-color:#f3f3f3;border:1px solid rgba(0,0,0,0);border-radius:6px;outline:0}.fw-panel .page_range__input::placeholder{color:#b0b0b0}.fw-panel .textarea_wrap{position:relative;display:flex;flex-flow:column;flex:1 1 auto;min-height:0;margin:0;padding:0 12px 72px;border-radius:10px;background-color:#fff}.fw-panel .textarea{flex:1 1 auto;width:100%;margin:0;padding:18px 0;font-size:14px;line-height:20px;font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;color:#000;background-color:#fff;border:none;border-bottom:1px solid #f3f3f3;outline:0;resize:none}.fw-panel .upload_btn{position:absolute;left:12px;bottom:12px;width:48px;height:48px;background-image:url("/img/panel/upload_btn.svg");cursor:pointer}.fw-panel .blue_btn{display:inline-block;height:48px;padding:12px 60px;font-size:14px;line-height:24px;font-weight:700;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;letter-spacing:3px;text-transform:uppercase;color:#fff;border:none;border-radius:32px;outline:none;background-color:#1652ee;cursor:pointer}.fw-panel .blue_btn:hover{background-color:#1c5bff}.fw-panel .submit{position:absolute;right:12px;bottom:12px;padding:12px 28px;border-radius:10px}.fw-panel .submit.disabled{background-color:#bababa;cursor:default}.fw-panel .submit.disabled:hover{background-color:#bababa}@media screen and (max-width: 1100px){.live-demo__window{grid-template-columns:minmax(0, 1fr) 320px;grid-template-rows:auto 660px;height:auto}.live-demo__forms{grid-column:1/-1;flex-direction:row;overflow-x:auto;overflow-y:hidden;border-right:none;border-bottom:1px solid hsla(0,0%,100%,.07)}.live-demo__card{flex:0 0 128px;width:auto}}@media screen and (max-width: 760px){.live-demo{padding:60px 16px 70px}.live-demo .title{font-size:32px;line-height:1.15}.live-demo .text.center{font-size:14px;line-height:20px}.live-demo__window{grid-template-columns:minmax(0, 1fr);grid-template-rows:auto 600px 480px;margin-top:32px}.live-demo__card{flex-basis:104px}.live-demo__card-sub{display:none}.live-demo__panel{order:1}.live-demo__editor{order:2}}.demo-embed{width:min(1258px,100vw - 32px);margin:48px 0 48px calc((100% - min(1258px, 100vw - 32px))/2);font-size:16px;line-height:1.5}.demo-embed .live-demo__window{margin-top:0;box-shadow:0 16px 40px rgba(16,24,40,.16)}.demo-embed:empty{min-height:calc(clamp(600px,100vh - 110px,720px) + 60px)}@media screen and (max-width: 1100px){.demo-embed:empty{min-height:900px}}@media screen and (max-width: 760px){.demo-embed:empty{min-height:1320px}}