:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:#0f172a}a{color:inherit;text-decoration:none}img{max-width:100%}

:root { --ink: #0f172a; --muted: #64748b; --line: #dbe7f3; --soft: #eef6ff; --blue: #2563eb; --blue-dark: #123b8c; --sky: #38bdf8; --white: #ffffff; --bg: #f6f9ff; --shadow: 0 18px 45px rgba(37, 99, 235, .12); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
body { margin: 0px; color: var(--ink); background: var(--bg); }
body[data-page="preview"] { background: rgb(255, 255, 255); }
body[data-page="preview"] .site-frame { width: 100%; min-height: 100vh; margin: 0px; border: 0px; box-shadow: none; border-radius: 0px; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
.topnav { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0px 28px; background: rgba(255, 255, 255, 0.92); border-bottom: 1px solid var(--line); position: sticky; top: 0px; z-index: 10; backdrop-filter: blur(14px); }
.app-version { position: absolute; left: 10px; top: 6px; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; color: rgb(148, 163, 184); background: rgb(241, 245, 249); padding: 2px 8px; border-radius: 999px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; pointer-events: none; user-select: none; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 950; min-width: 0px; flex: 0 1 auto; max-width: 40%; overflow: hidden; white-space: nowrap; text-decoration: none; color: inherit; }
.brand > span:not(.brand-mark) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0px; }
.brand-mark { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; background: var(--blue); color: white; flex: 0 0 36px; }
.nav-actions { display: flex; align-items: center; flex-wrap: nowrap; gap: 10px; flex: 0 0 auto; min-width: 0px; }
.btn { min-height: 42px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0px 14px; font-weight: 850; }
.btn.primary { background: var(--blue); border-color: var(--blue); color: white; }
.btn.ghost { background: transparent; }
.btn.icon { width: 38px; padding: 0px; }
.page { min-height: calc(-68px + 100vh); }
.home-hero { min-height: calc(-68px + 100vh); display: grid; grid-template-columns: minmax(0px, 1fr) minmax(420px, 560px); align-items: center; gap: 48px; padding: 54px min(6vw, 72px); background: linear-gradient(135deg, rgb(255, 255, 255) 0%, rgb(239, 246, 255) 52%, rgb(219, 234, 254) 100%); }
.hero-copy { max-width: 980px; }
.eyebrow { color: var(--blue); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 950; margin: 0px 0px 14px; }
h1 { font-size: clamp(44px, 6vw, 82px); line-height: 0.98; letter-spacing: 0px; margin: 0px 0px 20px; }
h2 { font-size: clamp(28px, 4vw, 46px); line-height: 1.06; margin: 0px 0px 14px; }
p { color: var(--muted); line-height: 1.65; }
.hero-copy p { font-size: 18px; max-width: 620px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.product-shot { border: 1px solid var(--line); border-radius: 8px; background: white; box-shadow: var(--shadow); overflow: hidden; }
.shot-bar { height: 44px; display: flex; align-items: center; gap: 7px; padding: 0px 14px; border-bottom: 1px solid var(--line); }
.dot { width: 10px; height: 10px; border-radius: 50%; background: rgb(191, 219, 254); }
.shot-body { display: grid; grid-template-columns: 34% 66%; min-height: 390px; }
.shot-side { border-right: 1px solid var(--line); padding: 14px; background: rgb(248, 251, 255); }
.shot-main { padding: 22px; }
.mini-card { height: 42px; border: 1px solid var(--line); border-radius: 8px; background: white; margin-bottom: 10px; }
.mini-card.active { border-color: var(--blue); box-shadow: rgba(37, 99, 235, 0.12) 0px 0px 0px 3px; }
.mini-preview { height: 100%; min-height: 300px; border-radius: 8px; background: linear-gradient(rgba(18, 59, 140, 0.78), rgba(18, 59, 140, 0.5)), url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1000&q=80") center center / cover; }
.features { padding: 54px min(6vw, 72px); background: white; }
.feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 14px; margin-top: 22px; }
.feature { border: 1px solid var(--line); border-radius: 8px; padding: 18px; background: rgb(255, 255, 255); }
.feature strong { display: block; margin-bottom: 8px; }
.shell { display: grid; grid-template-columns: 270px minmax(0px, 1fr); min-height: calc(-68px + 100vh); }
.sidebar { background: white; border-right: 1px solid var(--line); padding: 20px; }
.sidebar-title { color: var(--muted); font-size: 12px; font-weight: 950; text-transform: uppercase; letter-spacing: 0.1em; margin: 20px 0px 10px; }
.main { padding: 26px; min-width: 0px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 22px; }
.page-head h1 { font-size: 34px; line-height: 1.1; margin: 0px 0px 8px; }
.project-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-bottom: 18px; }
.input, .textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; background: rgb(248, 251, 255); min-height: 42px; padding: 10px 12px; outline: none; }
.textarea { min-height: 96px; resize: vertical; }
.input:focus, .textarea:focus { background: white; border-color: var(--blue); box-shadow: rgba(37, 99, 235, 0.12) 0px 0px 0px 3px; }
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.project-card { border: 1px solid var(--line); border-radius: 8px; background: white; overflow: hidden; box-shadow: rgba(37, 99, 235, 0.06) 0px 10px 25px; }
.project-thumb { position: relative; height: 160px; overflow: hidden; background: rgb(241, 245, 249); }
.project-thumb iframe { position: absolute; top: 0px; left: 0px; width: 1280px; height: 900px; border: 0px; transform: scale(0.28); transform-origin: left top; pointer-events: none; background: rgb(255, 255, 255); }
.project-thumb-empty { position: absolute; inset: 0px; display: flex; align-items: center; justify-content: center; color: rgb(148, 163, 184); font-size: 13px; }
.project-thumb-empty img { width: 100%; height: 100%; object-fit: cover; display: block; }
.project-body { padding: 16px; }
.project-body h3 { margin: 0px 0px 8px; }
.project-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.editor-layout { position: relative; height: calc(-68px + 100vh); min-width: 0px; overflow: hidden; --left-panel-w: 260px; --right-panel-w: 400px; }
.preview-zone { position: absolute; inset: 0px; z-index: 1; }
.panel { position: absolute; top: 0px; bottom: 0px; z-index: 5; background: white; border-right: 1px solid var(--line); padding: 14px; overflow: auto; min-width: 0px; scrollbar-width: thin; scrollbar-color: rgb(200, 215, 234) transparent; box-shadow: rgba(15, 23, 42, 0.08) 0px 18px 50px; transition: transform 0.2s, width 0.2s; }
.panel::-webkit-scrollbar, .preview-zone::-webkit-scrollbar { width: 8px; height: 8px; }
.panel::-webkit-scrollbar-thumb, .preview-zone::-webkit-scrollbar-thumb { background: rgb(200, 215, 234); border-radius: 999px; }
.panel::-webkit-scrollbar-track, .preview-zone::-webkit-scrollbar-track { background: transparent; }
.left-panel { left: 0px; width: var(--left-panel-w); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 0px; }
.right-panel { right: 0px; width: var(--right-panel-w); border-right: 0px; border-left: 1px solid var(--line); }
.editor-layout.is-resizing .panel { transition: none; }
.editor-layout.is-resizing, .editor-layout.is-resizing * { user-select: none; cursor: col-resize !important; }
.panel-resizer { position: absolute; top: 0px; bottom: 0px; width: 28px; z-index: 11; cursor: col-resize; background: transparent; transition: background 0.15s, width 0.15s; touch-action: none; pointer-events: auto; }
.panel-resizer::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 4px; height: 32px; border-radius: 999px; background: rgba(148, 163, 184, 0.45); box-shadow: rgba(255, 255, 255, 0.7) 0px 0px 0px 2px; transition: background 0.15s, height 0.15s; }
.panel-resizer::after { content: ""; position: absolute; top: 0px; bottom: 0px; left: 50%; width: 2px; transform: translateX(-50%); background: transparent; border-radius: 2px; transition: background 0.15s; }
.panel-resizer:hover, .editor-layout.is-resizing .panel-resizer.is-active { background: rgba(37, 99, 235, 0.08); }
.panel-resizer:hover::before, .editor-layout.is-resizing .panel-resizer.is-active::before { background: var(--blue, #2563eb); height: 48px; }
.panel-resizer:hover::after, .editor-layout.is-resizing .panel-resizer.is-active::after { background: var(--blue, #2563eb); }
.panel-resizer-left { left: calc(var(--left-panel-w) - 14px); right: auto; }
.panel-resizer-right { right: calc(var(--right-panel-w) - 14px); left: auto; }
.editor-layout.left-collapsed .panel-resizer-left, .editor-layout.right-collapsed .panel-resizer-right { display: none; }
.editor-layout.left-collapsed .left-panel { transform: translateX(-100%); }
.editor-layout.right-collapsed .right-panel { transform: translateX(100%); }
.editor-layout.left-collapsed .left-panel, .editor-layout.right-collapsed .right-panel { padding: 0px; border: 0px; overflow: hidden; visibility: hidden; }
.panel-peek { position: absolute; top: 18px; z-index: 12; width: 24px; height: 48px; border: 1px solid var(--line); background: white; color: var(--blue); box-shadow: rgba(15, 23, 42, 0.08) 0px 8px 18px; font-size: 20px; font-weight: 900; line-height: 1; }
.panel-peek-left { left: calc(var(--left-panel-w) - 12px); border-radius: 0px 8px 8px 0px; }
.panel-peek-right { right: calc(var(--right-panel-w) - 12px); border-radius: 8px 0px 0px 8px; }
.editor-layout.left-collapsed .panel-peek-left { left: 0px; transform: rotate(180deg); }
.editor-layout.right-collapsed .panel-peek-right { right: 0px; transform: rotate(180deg); }
.component-list, .component-tools, .field-list { display: grid; gap: 8px; }
.component-area { display: flex; flex: 1 1 0%; flex-direction: column; min-height: 0px; }
.left-panel .component-list { flex: 1 1 0%; min-height: 0px; overflow: auto; padding: 0px 4px 14px 0px; scrollbar-width: thin; scrollbar-color: rgb(200, 215, 234) transparent; }
.component-tools .btn { justify-content: flex-start; min-height: 34px; font-size: 13px; padding: 0px 10px; }
.component-item { border: 1px solid var(--line); border-radius: 8px; background: white; padding: 10px; }
.component-item.active { border-color: var(--blue); background: rgb(248, 251, 255); box-shadow: rgba(37, 99, 235, 0.1) 0px 0px 0px 3px; }
.component-top { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.component-top strong { font-size: 14px; line-height: 1.25; }
.component-top span { color: var(--muted); font-size: 12px; }
.component-actions { display: flex; gap: 6px; justify-content: flex-end; margin-top: 10px; }
.component-actions .btn.icon { width: 30px; min-width: 30px; height: 30px; min-height: 30px; padding: 0px; font-size: 16px; line-height: 1; }
.left-panel .sidebar-title { margin: 14px 0px 8px; }
.left-panel > .sidebar-title:first-child { margin-top: 0px; }
.left-panel .input { min-height: 36px; }
.field { display: grid; gap: 6px; }
.field label { color: var(--muted); font-size: 12px; font-weight: 900; }
.preview-zone { overflow: auto; background: rgb(244, 246, 251); padding: 0px; min-width: 0px; scrollbar-width: thin; scrollbar-color: rgb(200, 215, 234) transparent; }
.link-popover { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1000; width: min(460px, -32px + 100vw); max-height: 85vh; overflow: auto; background: white; border: 1px solid var(--line); border-radius: 14px; box-shadow: rgba(15, 23, 42, 0.45) 0px 30px 80px -20px, rgba(15, 23, 42, 0.5) 0px 0px 0px 100vmax; padding: 22px 22px 18px; }
.link-popover[hidden] { display: none; }
.link-popover strong { display: block; margin: 0px 28px 12px 0px; font-size: 16px; }
.link-popover-label { display: block; font-size: 12px; color: rgb(100, 116, 139); margin: 6px 0px 4px; }
.link-popover .input { margin-bottom: 8px; }
.popover-close { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 999px; border: 0px; background: transparent; color: rgb(100, 116, 139); font-size: 22px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; }
.popover-close:hover { background: rgba(15, 23, 42, 0.08); color: rgb(15, 23, 42); }
.canvas-scale { width: 100%; max-width: none; margin: 0px; transform-origin: center top; container-type: inline-size; }
.preview-zone:not(.mobile-preview) .canvas-scale { width: 100%; max-width: none; min-width: 0px; transform: scale(0.9); transform-origin: center top; }
.site-frame { width: 100%; min-height: 0px; display: flex; flex-direction: column; background: rgb(255, 255, 255); overflow: hidden; box-shadow: rgba(15, 23, 42, 0.08) 0px 18px 50px; margin: 0px; --heading-scale: 1; --body-scale: 1; --site-pad-x-target: clamp(24px, 10cqw, 220px); --site-pad-x: max(16px, var(--site-pad-x-target)); --site-pad-y: 48px; --section-title-size: 46px; --split-width: 980px; --split-media-height: 520px; }
.site-body { display: flex; flex-direction: column; flex: 1 0 auto; }
.site-body > .site-footer:last-child { margin-top: auto; }
body[data-page="preview"] .site-frame { width: 100%; min-height: 0px; margin: 0px; border: 0px; box-shadow: none; }
.preview-zone.mobile-preview { background: rgb(238, 242, 247); padding: 18px 0px 32px; display: flex; align-items: flex-start; justify-content: center; overflow: auto; }
.preview-zone.mobile-preview .canvas-scale { width: 390px; position: relative; padding: 0px; background: transparent; border-radius: 0px; box-shadow: none; margin: 0px auto; transform: none !important; }
.preview-zone.mobile-preview .canvas-scale::before, .preview-zone.mobile-preview .canvas-scale::after { content: none !important; display: none !important; }
.preview-zone.mobile-preview .site-frame { width: 390px; min-height: 0px; border-radius: 0px; box-shadow: rgba(15, 23, 42, 0.08) 0px 18px 50px; --site-pad-x: 22px; --site-pad-y: 48px; --section-title-size: 28px; --split-width: 100%; --split-media-height: 240px; background: rgb(255, 255, 255); }
.preview-zone.mobile-preview .site-header { padding: 0px 24px; }
.preview-zone.mobile-preview .site-logo { max-width: 100%; }
.preview-zone.mobile-preview .site-logo-img { max-height: 56px; }
.preview-zone.mobile-preview .site-nav, .preview-zone.mobile-preview .site-header.tmpl-pill .site-nav, .preview-zone.mobile-preview .site-header.tmpl-centered .site-nav, .preview-zone.mobile-preview .site-header.tmpl-stacked .site-nav, .preview-zone.mobile-preview .site-header.tmpl-right .site-nav { background: transparent; padding: 0px; border-radius: 0px; display: none !important; }
.preview-zone.mobile-preview .sb-mnav-btn { display: inline-flex !important; }
.preview-zone.mobile-preview .site-header { position: relative; }
.preview-zone.mobile-preview .sb-mnav-toggle:checked ~ .site-nav { flex-direction: column; align-items: stretch; gap: 0px; position: absolute; top: 100%; left: 0px; right: 0px; background: rgb(255, 255, 255); padding: 8px 0px; border-width: 1px 0px 0px; border-style: solid none none; border-color: rgba(15, 23, 42, 0.06) currentcolor currentcolor; border-image: none; border-radius: 0px; box-shadow: rgba(15, 23, 42, 0.18) 0px 24px 48px -16px; z-index: 30; animation: 0.22s ease-out 0s 1 normal none running lvMnavIn; display: flex !important; }
.preview-zone.mobile-preview .sb-mnav-toggle:checked ~ .site-nav a { display: block; padding: 14px 16px; border-radius: 12px; font-size: 16px; font-weight: 600; color: rgb(15, 23, 42); background: transparent; box-shadow: none; }
.preview-zone.mobile-preview .sb-mnav-toggle:checked ~ .site-nav a:hover { background: rgb(241, 245, 251); }
@keyframes lvMnavIn { 
  0% { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 1; transform: none; }
}
.gallery-item.has-caption figcaption { padding: 10px 4px 0px; font-size: calc(14px * var(--body-scale)); color: var(--section-text-color,#334155); line-height: 1.5; outline: none; min-height: 1.4em; }
.sb-mnav-toggle { position: absolute; opacity: 0; pointer-events: none; width: 0px; height: 0px; }
.sb-mnav-btn { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: transparent; border: 0px; cursor: pointer; color: rgb(15, 23, 42); transition: background 0.2s; }
.sb-mnav-btn:hover { background: rgba(15, 23, 42, 0.06); }
.sb-mnav-btn .sb-mnav-close { display: none; }
.sb-mnav-toggle:checked ~ .sb-mnav-btn .sb-mnav-open { display: none; }
.sb-mnav-toggle:checked ~ .sb-mnav-btn .sb-mnav-close { display: block; }
.preview-zone.mobile-preview .site-hero { min-height: 720px; }
.preview-zone.mobile-preview .split { grid-template-columns: 1fr; max-width: 100%; gap: 34px; }
.preview-zone.mobile-preview .split.is-reversed .split-media, .preview-zone.mobile-preview .split.is-reversed .split-copy { order: initial; }
.preview-zone.mobile-preview .split-copy { padding: 0px; }
.preview-zone.mobile-preview .split-media { min-height: 0px; }
.preview-zone.mobile-preview .split-media::after { inset: 12px -12px -12px 12px; }
.preview-zone.mobile-preview .split-copy h2 { font-size: calc(38px * var(--heading-scale)); }
.preview-zone.mobile-preview .site-hero::after { display: none; }
.preview-zone.mobile-preview .hero-kicker { letter-spacing: 0.22em; }
.preview-zone.mobile-preview .blog-grid { grid-template-columns: 1fr; }
.preview-zone.mobile-preview .article-section h2 { font-size: calc(32px * var(--heading-scale)); }
.preview-zone.mobile-preview .hero-layout, .preview-zone.mobile-preview .contact-wrap { grid-template-columns: 1fr; gap: 24px; width: 100%; }
.preview-zone.mobile-preview .team-grid, .preview-zone.mobile-preview .gallery-grid, .preview-zone.mobile-preview .video-grid, .preview-zone.mobile-preview .social-grid, .preview-zone.mobile-preview .infocard-grid { grid-template-columns: repeat(var(--cols-mobile, 1), minmax(0, 1fr)); gap: var(--card-gap, 16px); }
.preview-zone.mobile-preview .team-grid, .preview-zone.mobile-preview .gallery-grid, .preview-zone.mobile-preview .video-grid, .preview-zone.mobile-preview .social-grid { grid-template-columns: repeat(var(--cols-mobile, 1), minmax(0, 1fr)); gap: 16px; }
.preview-zone.mobile-preview .site-hero { min-height: auto; }
.preview-zone.mobile-preview .site-footer { padding: 56px 22px; }
.preview-zone.mobile-preview .site-header { flex-wrap: wrap; min-height: 60px; padding: 12px 18px; gap: 10px; }
.preview-zone.mobile-preview .site-header.tmpl-pill .site-nav, .preview-zone.mobile-preview .site-header.tmpl-centered .site-nav { display: none; }
.site-header { min-height: 60px; display: grid; grid-template-columns: minmax(0px, auto) minmax(0px, 1fr); align-items: center; gap: 28px; padding: 4px var(--site-pad-x); border-bottom: 1px solid rgb(240, 242, 246); background: white; }
.site-logo { display: block; min-width: 0px; max-width: min(520px, 46vw); overflow: visible; }
.site-header strong { font-size: calc(16px * var(--heading-scale)); }
.site-nav { display: flex; justify-content: flex-end; min-width: 0px; gap: 34px; color: rgb(47, 53, 66); font-size: calc(var(--menu-font-size, 15px) * var(--body-scale)); font-weight: 700; }
.site-section { position: relative; padding: var(--site-pad-y-top, 16px) var(--site-pad-x) var(--site-pad-y); }
.site-section h2 { font-size: calc(var(--section-title-size) * var(--heading-scale)); }
.site-section p, .person p, .faq-item p, .contact-form input, .contact-form textarea { font-size: calc(var(--section-body-size, 18px) * var(--body-scale)); }
.person strong { font-size: calc(22px * var(--heading-scale)); }
.site-section.selected { outline: rgba(37, 99, 235, 0.26) solid 3px; outline-offset: -3px; }
.canvas-controls { position: absolute; top: 10px; left: 50%; right: auto; z-index: 8; display: inline-flex; gap: 3px; transform: translateX(-50%); padding: 4px; border: 1px solid rgb(219, 231, 243); border-radius: 999px; background: rgba(255, 255, 255, 0.94); box-shadow: rgba(15, 23, 42, 0.1) 0px 8px 18px; opacity: 0; pointer-events: none; transition: opacity 0.15s; }
.site-section:hover > .canvas-controls { opacity: 1; pointer-events: auto; }
.canvas-controls button, .item-controls button, .canvas-add-item { border: 1px solid rgb(219, 231, 243); background: rgb(255, 255, 255); color: rgb(29, 78, 216); font-weight: 950; }
.canvas-controls button { width: 24px; height: 24px; border-radius: 999px; }
.managed-item { position: relative; }
.item-controls { align-items: center; position: absolute; top: 8px; right: 8px; z-index: 5; display: inline-flex; gap: 4px; padding: 4px; border: 1px solid rgb(219, 231, 243); border-radius: 999px; background: rgba(255, 255, 255, 0.94); box-shadow: rgba(15, 23, 42, 0.1) 0px 8px 18px; opacity: 0; pointer-events: none; transition: opacity 0.15s; }
.managed-item:hover > .item-controls { opacity: 1; pointer-events: auto; }
.item-controls button { width: 26px; height: 26px; min-width: 26px; min-height: 26px; display: inline-grid; place-items: center; padding: 0px; border-radius: 999px; line-height: 1; }
.canvas-add-item { min-height: 120px; border-style: dashed; border-radius: 8px; background: rgb(248, 251, 255); font-size: 16px; opacity: 0.72; transition: opacity 0.15s, border-color 0.15s; }
.canvas-add-item:hover { opacity: 1; border-color: rgb(37, 99, 235); }
.section-custom-html { margin-top: 24px; }
.settings-card { border: 1px solid var(--line); border-radius: 8px; background: rgb(255, 255, 255); padding: 14px; display: grid; gap: 12px; }
.settings-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.settings-head strong { font-size: 15px; }
.settings-head span { color: var(--muted); font-size: 12px; }
.menu-editor { display: grid; gap: 8px; }
.menu-editor-row { display: grid; grid-template-columns: 1fr 34px; gap: 8px; }
.code-textarea { min-height: 190px; font-family: Consolas, SFMono-Regular, monospace; font-size: 12px; line-height: 1.5; }
.color-row { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; }
.color-input { min-height: 44px; padding: 5px; }
.is-dragging { opacity: 0.45; transform: scale(0.985); }
.is-drop-target { outline-offset: -3px; background-color: rgba(239, 246, 255, 0.55); outline: rgba(37, 99, 235, 0.45) solid 3px !important; }
.site-section.just-moved { animation: 0.65s ease 0s 1 normal none running movedPulse; }
@keyframes movedPulse { 
  0% { box-shadow: rgba(37, 99, 235, 0) 0px 0px 0px 0px inset; }
  35% { box-shadow: rgba(37, 99, 235, 0.18) 0px 0px 0px 8px inset; }
  100% { box-shadow: rgba(37, 99, 235, 0) 0px 0px 0px 0px inset; }
}
[data-edit-field], [data-edit-member-field] { border-radius: 6px; outline: transparent solid 2px; outline-offset: 3px; transition: outline-color 0.15s, background-color 0.15s; }
[data-edit-field]:hover, [data-edit-field]:focus, [data-edit-member-field]:hover, [data-edit-member-field]:focus { background: rgba(255, 255, 255, 0.18); outline-color: rgba(37, 99, 235, 0.45); }
.site-section:not(.site-hero) [data-edit-field]:hover, .site-section:not(.site-hero) [data-edit-field]:focus, .site-section:not(.site-hero) [data-edit-member-field]:hover, .site-section:not(.site-hero) [data-edit-member-field]:focus { background: rgb(239, 246, 255); }
.site-hero { min-height: 820px; display: grid; align-items: center; color: var(--ink); background-size: cover; background-position: center center; background-color: rgb(255, 255, 255); isolation: auto; }
.site-hero::before { display: none; }
.hero-inner { width: min(820px, 100%); }
.hero-kicker { color: rgb(91, 140, 255); letter-spacing: 0.42em; font-size: calc(14px * var(--body-scale)); font-weight: 800; text-transform: uppercase; margin: 0px 0px 22px; }
.site-hero h2 { max-width: 820px; color: rgb(5, 5, 5); font-size: calc(var(--section-title-size) * var(--heading-scale)); line-height: 0.98; font-weight: 950; letter-spacing: -0.02em; margin: 18px 0px 26px; }
.site-hero p { color: rgb(102, 112, 133); max-width: 620px; font-size: calc(var(--section-body-size, 20px) * var(--body-scale)); line-height: 1.7; }
.site-btn { min-height: 58px; border-radius: 999px; padding: 0px 28px; background: rgb(47, 128, 255); color: white; display: inline-flex; align-items: center; font-weight: 950; font-size: calc(16px * var(--body-scale)); margin: 24px 10px 0px 0px; }
.site-btn::after { content: "→"; margin-left: 10px; }
.site-btn.secondary { background: rgb(238, 244, 255); color: rgb(37, 99, 235); }
.site-hero::after { content: ""; position: absolute; right: var(--site-pad-x); bottom: 130px; width: 160px; height: 160px; border: 1px solid rgb(216, 228, 255); border-radius: 50%; background: radial-gradient(circle, rgba(47, 128, 255, 0.1), transparent 62%); }
@media (max-width: 760px) {
  .site-frame { --site-pad-x: 24px; --site-pad-y: 48px; --section-title-size: 34px; }
}
.split { display: grid; grid-template-columns: minmax(0px, 0.92fr) minmax(0px, 1.08fr); gap: 82px; align-items: center; max-width: 1060px; margin: 0px auto; background: transparent; border: 0px; box-shadow: none; padding: 0px; }
.split.is-reversed .split-media { order: 2; }
.split.is-reversed .split-copy { order: 1; }
.split-media { min-height: 0px; aspect-ratio: var(--image-ratio, 3 / 2); background-size: cover; background-position: center center; border-radius: 0px; position: relative; }
.split-media::after { content: none; }
.split-media-video { aspect-ratio: 16 / 9; background: rgb(15, 23, 42); overflow: hidden; border-radius: var(--image-radius, 8px); }
.split-media-video iframe { width: 100%; height: 100%; border: 0px; display: block; }
.split-copy { padding: 0px; align-self: center; }
.split-copy h2 { max-width: 500px; font-size: calc(58px * var(--heading-scale)); line-height: 1.02; letter-spacing: -0.015em; margin: 18px 0px 22px; }
.split-copy p { max-width: 470px; color: rgb(102, 112, 133); line-height: 1.8; }
.split-btn { margin-top: 26px; }
.section-kicker { color: var(--blue); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 950; }
.team, .contact { background: rgb(248, 251, 255); }
.team-grid, .gallery-grid, .video-grid { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 18px; margin-top: 28px; }
.video-card, .faq-item, .blog-card, .contact-form { border: 1px solid var(--line); border-radius: 8px; background: white; overflow: hidden; }
.team-grid { gap: 34px; align-items: start; }
.person { overflow: visible; background: transparent; border: 0px; }
.person img, .gallery-grid img, .gallery-item img, .blog-card img { width: 100%; aspect-ratio: var(--image-ratio, 3 / 2); object-fit: cover; display: block; }
.person img { aspect-ratio: var(--image-ratio, 3 / 2); border-radius: 2px; box-shadow: rgba(15, 23, 42, 0.1) 0px 22px 50px; }
.person > div:not(.item-controls), .video-card > div:not(.item-controls), .faq-item { padding: 14px; }
.person > div:not(.item-controls) { padding: 18px 0px 0px; }
.person strong { display: block; color: rgb(15, 23, 42); line-height: 1.15; }
.person p { margin: 8px 0px 0px; color: rgb(102, 112, 133); line-height: 1.65; }
.video { background: transparent; color: inherit; }
.video h2, .video p { color: inherit; }
.video-grid { gap: 24px; }
.video-card { background: transparent; border: 0px; border-radius: 0px; overflow: visible; box-shadow: none; transition: none; }
.video-card:hover { transform: none; box-shadow: none; }
.video-card iframe { width: 100%; aspect-ratio: 16 / 9; border: 0px; display: block; background: rgb(15, 23, 42); border-radius: var(--image-radius, 8px); }
.video-card-media { border-radius: var(--image-radius, 8px); overflow: hidden; }
.video-card > div:not(.item-controls) { padding: 10px 2px 0px; color: var(--section-title-color, #0f172a); font-weight: 600; font-size: calc(15px * var(--body-scale)); letter-spacing: 0.01em; }
.faq-list { display: grid; gap: 10px; margin-top: 22px; }
.article-section { max-width: none; margin: 0px; }
.article-inner { width: 100%; }
.article-section.align-center .article-inner { margin: 0px auto; text-align: center; }
.article-section.align-right .article-inner { margin-left: auto; text-align: right; }
.article-section.align-left .article-inner { margin-right: auto; text-align: left; }
.article-section h2 { max-width: none; font-size: calc(46px * var(--heading-scale)); line-height: 1.1; margin: 0px 0px 24px; }
.article-section p { color: rgb(71, 85, 105); max-width: none; font-size: calc(18px * var(--body-scale)); line-height: 1.9; }
.article-section.align-center h2, .article-section.align-center p { margin-left: auto; margin-right: auto; }
.article-section.align-right h2, .article-section.align-right p { margin-left: auto; }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 18px; margin-top: 28px; }
.blog-card > div:not(.item-controls) { padding: 16px; }
.html-section .section-custom-html, .custom-block { border: 1px dashed rgb(188, 211, 255); background: rgb(248, 251, 255); padding: 24px; }
.contact-wrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 24px; }
.contact-form { display: grid; gap: 10px; padding: 16px; }
.contact-info-list { display: grid; gap: 6px; margin-top: 12px; }
.contact-info-item { display: flex; align-items: center; gap: 10px; padding: 4px 0px; color: inherit; transition: transform 0.18s; text-decoration: none !important; }
.contact-info-item, .contact-info-item *, a.contact-info-item, a.contact-info-item * { text-decoration: none !important; border-bottom: 0px !important; }
a.contact-info-item:hover { transform: translateY(-2px); }
.contact-info-icon { flex: 0 0 auto; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.contact-info-icon svg { width: 16px; height: 16px; }
.contact-info-body { display: flex; flex-direction: column; min-width: 0px; line-height: 1.25; }
.contact-info-label { font-size: 11px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
.contact-info-value { font-size: 14px; font-weight: 600; word-break: break-word; }
.contact-info-value, .contact-info-value a, .contact-info-value a:hover, .contact-info-value a:visited { color: inherit !important; text-decoration: none !important; border-bottom: 0px !important; }
.empty { border: 1px dashed var(--line); border-radius: 8px; background: white; color: var(--muted); padding: 28px; text-align: center; }
@media (max-width: 1100px) {
  .home-hero, .shell, .editor-layout { grid-template-columns: 1fr; }
  .panel { max-height: none; }
}
.left-panel { padding: 14px; background: rgb(247, 251, 255); border-right-color: rgb(219, 231, 243); }
.left-panel > .sidebar-title:first-child { font-size: 12px; color: rgb(51, 65, 85); }
.left-panel > #renameProject { min-height: 40px; border-radius: 10px; border-color: rgb(219, 231, 243); box-shadow: none; font-size: 15px; }
.left-tabs { border-radius: 12px; background: rgb(237, 245, 255); box-shadow: none; }
.left-tab { min-height: 34px; font-size: 12px; }
.left-tab.active { box-shadow: none; }
.left-tab-panel .sidebar-title, .left-panel .compact-title { color: rgb(29, 78, 216); font-size: 10px; letter-spacing: 0.1em; }
.project-form.compact-form, .component-hub, .left-settings .seo-only-card, .left-tab-panel[data-left-tab-panel="pages"] .left-settings .left-site-card, .page-list { border-radius: 12px; border-color: rgb(220, 232, 246); background: rgb(255, 255, 255); box-shadow: none; }
.project-form.compact-form { grid-template-columns: minmax(0px, 1fr) 38px; padding: 7px; }
.project-form.compact-form .input { min-height: 36px; border-radius: 9px; font-size: 13px; }
.project-form.compact-form .btn { width: 38px; min-width: 38px; min-height: 36px; border-radius: 9px; font-size: 18px; }
.left-tab-panel[data-left-tab-panel="pages"] .page-list { max-height: 205px; gap: 6px; padding: 8px; overflow: auto; }
.left-panel .page-list .component-item { position: relative; min-height: 44px; padding: 10px 82px 10px 10px; border-radius: 10px; border-color: transparent; background: rgb(249, 252, 255); }
.left-panel .page-list .component-item:hover, .left-panel .page-list .component-item.active { border-color: rgb(207, 224, 246); background: rgb(255, 255, 255); }
.left-panel .page-list .component-item.active { box-shadow: rgb(37, 99, 235) 3px 0px 0px inset; }
.left-panel .page-list .component-top { display: block; }
.left-panel .page-list .component-top strong { display: block; max-width: 100%; font-size: 13px; }
.left-panel .page-list .component-top span { display: inline-block; margin-top: 4px; padding: 2px 7px; font-size: 10px; }
.left-panel .page-list .component-actions { position: absolute; top: 8px; right: 8px; display: flex; gap: 3px; margin: 0px; opacity: 0.45; transition: opacity 0.15s; }
.left-panel .page-list .component-item:hover .component-actions, .left-panel .page-list .component-item.active .component-actions { opacity: 1; }
.left-panel .page-list .component-actions .btn.icon { width: 22px; min-width: 22px; height: 22px; min-height: 22px; border: 0px; border-radius: 7px; background: transparent; color: rgb(36, 60, 90); font-size: 12px; }
.left-panel .page-list .component-actions .btn.icon:hover { background: rgb(238, 246, 255); color: rgb(29, 78, 216); }
.left-settings { padding: 0px; }
.left-settings .seo-only-card, .left-tab-panel[data-left-tab-panel="pages"] .left-settings .left-site-card { padding: 12px; }
.seo-only-card .settings-head { padding: 0px 0px 8px; }
.seo-only-card .settings-head strong { font-size: 14px; }
.seo-only-card .settings-head span { color: rgb(100, 116, 139); font-size: 11px; }
.seo-only-card .field, .left-site-card .field { padding: 0px; border: 0px; background: transparent; margin: 0px 0px 10px; }
.seo-only-card .field label { margin-bottom: 6px; color: rgb(36, 60, 90); font-size: 11px; }
.seo-only-card .input, .seo-only-card .textarea { min-height: 38px; border-radius: 9px; background: rgb(248, 251, 255); font-size: 13px; }
.seo-only-card .textarea { min-height: 92px; }
.seo-only-card .field-hint { display: block; margin: 2px 0px 0px; color: rgb(100, 116, 139); font-size: 11px; line-height: 1.55; }
.component-hub { padding: 9px; }
.component-tools.compact-add-tools .btn, .component-tools.compact-add-tools .component-add-card, .left-panel .component-list .component-item { border-radius: 10px; }
.left-tab-panel[data-left-tab-panel="pages"].active { gap: 8px; }
.left-tab-panel[data-left-tab-panel="pages"] .left-settings { flex: 0 0 auto; overflow: visible; }
.page-detail-panel { border-width: 1px 0px 0px; border-style: solid none none; border-color: rgb(219, 231, 243) currentcolor currentcolor; border-image: none; margin-top: 2px; padding-top: 10px; background: transparent; box-shadow: none; }
.page-detail-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; color: rgb(51, 65, 85); }
.page-detail-head strong { font-size: 12px; font-weight: 950; }
.page-detail-head span { border-radius: 999px; background: rgb(237, 246, 255); color: rgb(37, 99, 235); padding: 3px 8px; font-size: 10px; font-weight: 900; }
.page-detail-panel .compact-field { padding: 0px; border: 0px; background: transparent; margin: 0px 0px 8px; }
.page-detail-panel .compact-field label { display: block; margin: 0px 0px 5px; color: rgb(96, 116, 143); font-size: 10px; font-weight: 900; letter-spacing: 0.04em; }
.page-detail-panel .input, .page-detail-panel .textarea { min-height: 34px; border-radius: 9px; border-color: rgb(220, 232, 246); background: rgb(255, 255, 255); font-size: 12px; }
.page-detail-panel .textarea { min-height: 68px; resize: vertical; }
.topnav { min-height: 64px; padding: 0px 22px; background: rgba(250, 253, 255, 0.94); border-bottom: 1px solid rgb(220, 232, 246); box-shadow: rgba(15, 23, 42, 0.043) 0px 10px 30px; }
.brand { min-width: 0px; max-width: 32%; color: rgb(31, 42, 68); font-weight: 760; }
.brand-mark { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, rgb(37, 99, 235), rgb(56, 189, 248)); box-shadow: rgba(37, 99, 235, 0.22) 0px 10px 22px; font-weight: 760; }
.nav-actions { gap: 7px; padding: 6px; border: 1px solid rgb(224, 235, 248); border-radius: 16px; background: rgb(255, 255, 255); }
.nav-actions .btn { min-height: 34px; border: 0px; border-radius: 10px; background: transparent; color: rgb(67, 88, 117); padding: 0px 11px; font-size: 12px; font-weight: 650; }
.nav-actions .btn:hover { background: rgb(241, 247, 255); color: rgb(29, 78, 216); }
.nav-actions .btn.icon { width: 34px; min-width: 34px; color: rgb(29, 78, 216); }
.nav-actions .btn.primary { background: rgb(37, 99, 235); color: rgb(255, 255, 255); padding: 0px 14px; box-shadow: rgba(37, 99, 235, 0.18) 0px 8px 18px; }
.nav-actions .btn.primary:hover { background: rgb(29, 78, 216); color: rgb(255, 255, 255); }
.nav-actions .btn.active { background: rgb(234, 242, 255); color: rgb(29, 78, 216); box-shadow: rgb(207, 224, 255) 0px 0px 0px 1px inset; }
.right-panel { padding: 18px; background: linear-gradient(rgb(251, 253, 255) 0%, rgb(245, 249, 255) 100%); border-left: 1px solid rgb(220, 232, 246); }
.right-panel .page-head { height: auto; min-height: 0px; padding: 0px 2px 12px; border: 0px; background: transparent; }
.right-panel .page-head p { margin: 0px; color: rgb(100, 116, 139); font-size: 12px; font-weight: 500; }
.right-panel #selectedType { display: block; margin-top: 4px; color: rgb(23, 32, 51); font-size: 20px; font-weight: 680; letter-spacing: 0px; }
.field-list { gap: 12px; }
.right-panel .settings-card { border: 1px solid rgb(219, 231, 243); border-radius: 14px; background: rgba(255, 255, 255, 0.94); padding: 16px; gap: 14px; box-shadow: rgba(37, 99, 235, 0.055) 0px 12px 30px; }
.right-panel .settings-head { padding-bottom: 8px; border-bottom: 1px solid rgb(237, 243, 251); align-items: center; }
.right-panel .settings-head strong { color: rgb(20, 32, 51); font-size: 15px; font-weight: 680; }
.right-panel .settings-head span { border-radius: 999px; background: rgb(237, 246, 255); color: rgb(37, 99, 235); padding: 4px 9px; font-size: 11px; font-weight: 650; }
.right-panel .field { gap: 7px; }
.right-panel .field label { color: rgb(93, 112, 140); font-size: 12px; font-weight: 650; }
.right-panel .input, .right-panel .textarea { border-color: rgb(219, 231, 243); border-radius: 11px; background: rgb(248, 251, 255); color: rgb(15, 23, 42); font-size: 14px; }
.right-panel .input { min-height: 42px; }
.right-panel .textarea { min-height: 104px; resize: vertical; }
.right-panel input[type="file"].input { padding: 8px; background: rgb(255, 255, 255); font-size: 12px; }
.right-panel input[type="range"].input { min-height: 28px; padding: 0px; background: transparent; }
.right-panel .typography-card { background: linear-gradient(rgb(255, 255, 255), rgb(248, 251, 255)); }
.right-panel .project-actions { gap: 8px; }
.right-panel .btn { min-height: 36px; border-radius: 10px; font-size: 12px; font-weight: 650; }
.site-section h1, .site-section h2, .site-section h3, .person strong, .blog-card strong, .faq-item strong { font-weight: var(--section-title-weight, 680); }
.site-section .site-btn, .site-btn, .section-kicker, .hero-kicker, .site-header strong { font-weight: 680; }
.btn, .field label, .settings-head strong, .component-top strong, .left-panel .component-top strong { font-weight: 650; }
@media (max-width: 760px) {
  .topnav, .page-head { align-items: flex-start; flex-direction: column; height: auto; padding: 14px; }
  .home-hero, .main, .preview-zone { padding: 18px; }
  .feature-grid, .split, .contact-wrap { grid-template-columns: 1fr; }
  .team-grid, .gallery-grid, .video-grid { grid-template-columns: repeat(var(--cols-mobile, 1), minmax(0, 1fr)); }
}
[data-edit-faq-field], [data-edit-field], [data-edit-member-field] { outline: none; }
[data-edit-faq-field]:focus, [data-edit-field]:focus, [data-edit-member-field]:focus { box-shadow: rgba(37, 99, 235, 0.16) 0px 0px 0px 3px; background: rgba(255, 255, 255, 0.65); border-radius: 6px; }
.faq-item strong[contenteditable="true"], .faq-item p[contenteditable="true"] { display: block; min-height: 1.4em; }
.site-section { color: var(--section-text-color, var(--ink)); }
.site-section h1, .site-section h2, .site-section h3, .site-section strong, .blog-card strong, .faq-item strong, .person strong { color: var(--section-title-color, inherit); }
.site-section p, .person p, .faq-item p, .blog-card p, .split-copy p, .site-hero p, .article-section p { color: var(--section-text-color, #667085); }
.section-kicker, .hero-kicker { color: var(--section-kicker-color, var(--blue)); }
.site-hero h2 { color: var(--section-title-color, #050505); }
.site-hero .hero-kicker { color: var(--section-kicker-color, #5b8cff); }
.split { grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr); width: 100%; max-width: 100%; gap: clamp(34px, 5vw, 64px); }
.split-copy h2, .split-copy p { max-width: 100%; }
.faq-collapsible { padding: 0px; }
.faq-collapsible summary { list-style: none; display: grid; grid-template-columns: minmax(0px, 1fr) auto; align-items: center; gap: 12px; padding: 16px 18px; cursor: pointer; }
.faq-collapsible summary::-webkit-details-marker { display: none; }
.faq-collapsible .faq-toggle { color: var(--blue); font-weight: 950; transition: transform 0.18s; }
.faq-collapsible[open] .faq-toggle { transform: rotate(180deg); }
.faq-collapsible p { padding: 0px 18px 18px; margin: 0px; }
[data-edit-blog-field], [data-edit-faq-field], [data-edit-field], [data-edit-member-field] { border-radius: 6px; outline: transparent solid 2px; outline-offset: 3px; transition: outline-color 0.15s, background-color 0.15s; }
[data-edit-blog-field]:hover, [data-edit-blog-field]:focus, [data-edit-faq-field]:hover, [data-edit-faq-field]:focus, [data-edit-field]:hover, [data-edit-field]:focus, [data-edit-member-field]:hover, [data-edit-member-field]:focus { background: rgb(239, 246, 255); outline-color: rgba(37, 99, 235, 0.45); }
.blog-card strong[contenteditable="true"], .blog-card p[contenteditable="true"] { display: block; min-height: 1.4em; }
.field-hint { margin: 0px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.media-wrap, .single-media-box, .person, .blog-card, .gallery-item { position: relative; }
.image-replace-btn { position: absolute; top: 10px; left: 10px; z-index: 7; min-height: 32px; border: 1px solid rgba(219, 231, 243, 0.95); border-radius: 999px; background: rgba(255, 255, 255, 0.94); color: rgb(29, 78, 216); box-shadow: rgba(15, 23, 42, 0.14) 0px 8px 18px; padding: 0px 12px; font-size: 12px; font-weight: 950; opacity: 0; pointer-events: none; transition: opacity 0.15s, transform 0.15s; }
.media-wrap:hover > .image-replace-btn, .managed-item:hover > .image-replace-btn, .site-hero:hover .image-replace-btn, .site-section.selected .image-replace-btn { opacity: 1; pointer-events: auto; }
.image-replace-btn:hover { transform: translateY(-1px); }
.hero-inner { position: relative; }
.hero-inner > .image-replace-btn { top: -54px; left: 0px; }
.split-media > .image-replace-btn { top: 14px; left: 14px; }
.image-replace-url-btn { left: auto !important; right: 10px; }
.split-media > .image-replace-url-btn, .hero-side-media > .image-replace-url-btn { right: 14px; }
.infocard-media { position: relative; }
.infocard-media:hover > .image-replace-btn, .infocard-section .infocard:hover .infocard-media > .image-replace-btn, .site-section.selected .infocard-media > .image-replace-btn { opacity: 1; pointer-events: auto; }
.person > .image-replace-btn, .blog-card > .image-replace-btn, .gallery-item > .image-replace-btn { top: 12px; left: 12px; }
.media-section-inner { width: min(1060px, 100%); margin: 0px auto; }
.media-section-inner > h2 { max-width: 820px; margin: 0px 0px 16px; }
.media-section-inner > p { max-width: 760px; margin: 0px 0px 28px; }
.single-media-box { width: 100%; overflow: hidden; background: rgb(248, 251, 255); border: 1px solid var(--line); border-radius: 8px; }
.single-media-box img, .single-media-box video, .single-media-box iframe { width: 100%; aspect-ratio: var(--image-ratio, 16 / 9); display: block; object-fit: cover; border: 0px; }
.single-media-box video { background: rgb(0, 0, 0); }
.preview-zone.mobile-preview .media-section-inner { width: 100%; }
.site-section [contenteditable] { white-space: pre-line; }
.site-section a:not(.site-btn):not(.social-card) { color: rgb(37, 99, 235); text-decoration: underline; text-underline-offset: 3px; }
.site-section .social-card, .site-section .social-card * { text-decoration: none !important; }
.site-btn, .site-btn:visited, .site-btn:hover, .site-btn:focus { background: rgb(47, 128, 255); text-decoration: none; color: rgb(255, 255, 255) !important; }
.site-btn.secondary, .site-btn.secondary:visited, .site-btn.secondary:hover, .site-btn.secondary:focus { background: rgb(238, 244, 255); text-decoration: none; color: rgb(37, 99, 235) !important; }
.site-hero { overflow: hidden; }
.hero-layout { width: min(1120px, 100%); margin: 0px auto; display: grid; grid-template-columns: minmax(0px, 1fr); gap: clamp(34px, 5vw, 72px); align-items: center; }
.site-hero.has-side-image .hero-layout { grid-template-columns: minmax(0px, 1fr) minmax(320px, 520px); }
.site-hero.image-left .hero-layout { grid-template-columns: minmax(320px, 520px) minmax(0px, 1fr); }
.hero-copy-block { width: min(820px, 100%); }
.hero-side-media { width: 100%; border-radius: 8px; overflow: hidden; background: transparent; border: 0px; box-shadow: none; }
.hero-side-media img { width: 100%; aspect-ratio: var(--image-ratio, 3 / 2); object-fit: cover; display: block; }
.site-hero.hero-none { background-image: none !important; }
.site-hero.hero-none::after, .site-hero.has-side-image::after { display: none; }
.site-hero > .image-replace-btn { top: 22px; left: var(--site-pad-x); }
.hero-side-media > .image-replace-btn, .article-media > .image-replace-btn { top: 14px; left: 14px; }
.article-media { width: var(--media-size, 100%); max-width: 100%; margin: 0px 0px 28px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: rgb(248, 251, 255); }
.article-media img, .article-media video { width: 100%; aspect-ratio: var(--image-ratio, 16 / 9); object-fit: cover; display: block; }
.article-media iframe { width: 100%; aspect-ratio: 16 / 9; border: 0px; display: block; background: rgb(15, 23, 42); }
.article-add-image { width: 100%; margin: 0px 0px 28px; }
.article-media-size { position: absolute; top: 14px; right: 14px; display: flex; gap: 4px; background: rgba(15, 23, 42, 0.78); border-radius: 8px; padding: 4px; opacity: 0; transition: opacity 0.15s; z-index: 3; }
.article-media:hover .article-media-size { opacity: 1; }
.article-media-size button { border: 0px; background: transparent; color: rgb(255, 255, 255); font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 11px; padding: 3px 7px; border-radius: 5px; cursor: pointer; }
.article-media-size button.active, .article-media-size button:hover { background: rgb(37, 99, 235); }
.article-section.align-center .article-media, .article-section.align-center .article-add-image { margin-left: auto; margin-right: auto; }
.article-section.align-right .article-media, .article-section.align-right .article-add-image { margin-left: auto; }
@media (max-width: 760px) {
  .site-hero.has-side-image .hero-layout, .site-hero.image-left .hero-layout { grid-template-columns: 1fr; }
  .site-hero.image-left .hero-side-media { order: 2; }
}
.preview-zone.mobile-preview .site-hero.has-side-image .hero-layout, .preview-zone.mobile-preview .site-hero.image-left .hero-layout { grid-template-columns: 1fr; }
.preview-zone.mobile-preview .site-hero.image-left .hero-side-media { order: 2; }
.article-media-list { display: grid; gap: 18px; margin-top: 28px; }
.article-media-list .canvas-add-item { width: 100%; }
.article-section.align-center .article-media-list .article-media, .article-section.align-center .article-media-list .canvas-add-item { margin-left: auto; margin-right: auto; }
.article-section.align-right .article-media-list .article-media, .article-section.align-right .article-media-list .canvas-add-item { margin-left: auto; }
.article-media.managed-item { min-height: 0px; }
.article-media.managed-item:hover > .item-controls, .article-media.managed-item:hover > .image-replace-btn { opacity: 1; pointer-events: auto; }
.text-link-toolbar { position: fixed; z-index: 9999; display: flex; align-items: center; gap: 6px; transform: translateX(-50%); border: 1px solid rgba(203, 213, 225, 0.86); border-radius: 22px; background: rgba(255, 255, 255, 0.96); box-shadow: rgba(15, 23, 42, 0.22) 0px 18px 48px, rgba(255, 255, 255, 0.8) 0px 2px 0px inset; padding: 7px; backdrop-filter: blur(18px) saturate(1.2); }
.text-link-toolbar::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; transform: translateX(-50%) rotate(45deg); background: rgba(255, 255, 255, 0.96); border-right: 1px solid rgba(203, 213, 225, 0.86); border-bottom: 1px solid rgba(203, 213, 225, 0.86); }
.text-link-toolbar button, .text-link-toolbar label { position: relative; min-width: 42px; height: 38px; border-radius: 16px; border: 1px solid transparent; background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 850; color: rgb(15, 23, 42); padding: 0px 12px; z-index: 1; transition: background 0.16s, border-color 0.16s, transform 0.16s, color 0.16s; }
.text-link-toolbar .tt-bold, .text-link-toolbar .tt-link, .text-link-toolbar .tt-clear { width: 38px; min-width: 38px; padding: 0px; }
.text-link-toolbar .tt-color { gap: 7px; color: rgb(30, 58, 138); }
.text-link-toolbar .tt-color::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(135deg, rgb(239, 68, 68), rgb(245, 158, 11) 34%, rgb(34, 197, 94) 66%, rgb(37, 99, 235)); box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px, rgba(148, 163, 184, 0.55) 0px 0px 0px 3px; }
.text-link-toolbar button:hover, .text-link-toolbar label:hover { background: rgb(239, 246, 255); border-color: rgb(191, 219, 254); color: rgb(29, 78, 216); transform: translateY(-1px); }
.text-link-toolbar .tt-clear:hover { background: rgb(254, 242, 242); border-color: rgb(254, 202, 202); color: rgb(220, 38, 38); }
.text-link-toolbar label input { position: absolute; inset: 0px; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.text-link-toolbar[hidden] { display: none; }
.site-section [contenteditable] a { pointer-events: none; }
@media (max-width: 760px) {
  .site-hero.image-left .hero-side-media { order: initial; }
}
.preview-zone.mobile-preview .site-hero.image-left .hero-side-media { order: initial; }
.single-media-box img, .single-media-box video, .single-media-box iframe { aspect-ratio: var(--image-ratio, 3 / 2); }
.article-block-list { display: grid; gap: 24px; margin-top: 28px; }
.article-text-block { width: 100%; position: relative; padding: 2px 0px; }
.article-text-block > p { margin: 0px; color: var(--section-text-color,#334155); font-size: calc(18px * var(--body-scale)); line-height: 1.8; white-space: pre-line; }
.article-section.align-center .article-text-block, .article-section.align-center .article-media, .article-section.align-center .article-add-row { margin-left: auto; margin-right: auto; }
.article-section.align-right .article-text-block, .article-section.align-right .article-media, .article-section.align-right .article-add-row { margin-left: auto; }
.article-add-row { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 12px; }
.article-add-row .canvas-add-item { width: 100%; min-height: 84px; }
.article-text-block:hover > .item-controls { opacity: 1; pointer-events: auto; }
.article-text-block .item-controls { top: -18px; }
.managed-item.is-drop-target, .component-item.is-drop-target, .site-section.is-drop-target { outline: rgba(37, 99, 235, 0.25) solid 3px; outline-offset: 4px; }
.site-hero.hero-none { background: rgb(255, 255, 255) !important; }
@media (max-width: 760px) {
  .article-add-row { grid-template-columns: 1fr; }
}
.hero-layout, .media-section-inner { width: 100%; max-width: 100%; margin-left: 0px; margin-right: 0px; }
.site-hero.has-side-image .hero-layout, .site-hero.image-left .hero-layout { grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr); }
.hero-copy-block, .media-section-inner > h2, .media-section-inner > p { width: 100%; max-width: 100%; }
.single-media-box { width: 100%; max-width: 100%; }
.hero-side-media, .split-media, .single-media-box, .article-media, .gallery-item, .blog-card img, .person img, .gallery-item img, .article-media img, .single-media-box img, .single-media-box video, .single-media-box iframe { border-radius: var(--image-radius, 8px); }
.hero-side-media, .single-media-box, .article-media, .gallery-item { overflow: hidden; }
.hero-side-media img, .split-media, .gallery-item img, .blog-card img, .person img, .article-media img, .single-media-box img, .single-media-box video, .single-media-box iframe { overflow: hidden; }
@media (max-width: 760px) {
  .site-hero.has-side-image .hero-layout, .site-hero.image-left .hero-layout { grid-template-columns: 1fr; }
}
.preview-zone.mobile-preview .site-hero.has-side-image .hero-layout, .preview-zone.mobile-preview .site-hero.image-left .hero-layout { grid-template-columns: 1fr; }
.site-section { text-align: var(--section-text-align, left); font-style: var(--section-font-style, normal); }
.site-section p, .site-section span, .site-section li, .site-section a:not(.site-btn), .person p, .blog-card p, .faq-item p, .article-text-block > p { font-weight: var(--section-font-weight, 400); font-style: var(--section-font-style, normal); text-align: inherit; }
.site-section h1, .site-section h2, .site-section h3, .person strong, .blog-card strong, .faq-item strong { font-weight: var(--section-title-weight, 950); font-style: var(--section-font-style, normal); text-align: inherit; }
.site-section .site-btn { font-style: var(--section-font-style, normal); font-weight: 800; }
.site-hero h2 { font-size: calc(var(--section-title-size, 96px) * var(--heading-scale)); }
.canvas-controls, .item-controls, .canvas-add-item, .image-replace-btn, .contact-form, .contact-form input, .contact-form textarea, .contact-form button { text-align: initial; font-style: normal; }
.canvas-controls { max-width: min(60vw, 520px); flex-wrap: wrap; justify-content: flex-end; }
.canvas-controls button[data-style-action] { width: 24px; min-width: 24px; height: 24px; padding: 0px; font-size: 11px; }
.canvas-control-divider { width: 1px; min-height: 18px; margin: 3px 2px; background: rgb(219, 231, 243); }
.canvas-controls button[data-style-action="body-bold"] { font-weight: 950; }
.canvas-controls button[data-style-action="title-bold"] { width: auto; min-width: 42px; padding: 0px 6px; font-size: 10px; }
.site-section:not(.site-hero) .canvas-controls button[data-style-action^="hero-title"] { display: none; }
.site-section h1, .site-section h2, .site-section h3, .person strong, .blog-card strong, .faq-item strong { font-weight: var(--section-title-weight, 800); }
.site-logo-wrap { display: inline-flex; align-items: center; gap: 10px; line-height: 1; max-width: 100%; min-width: 0px; vertical-align: middle; }
.site-logo-wrap > span { min-width: 0px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-logo-img { width: var(--logo-size, 42px); height: auto; max-width: var(--logo-size, 42px); max-height: var(--logo-size, 42px); object-fit: contain; display: block; border-radius: 0px; flex: 0 0 auto; }
.site-header { min-height: 60px; }
.site-nav a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; }
.site-nav a:hover { color: var(--blue); }
@media (max-width: 760px) {
  .site-logo { max-width: 100%; }
  .site-logo-img { max-height: 56px; }
}
.page-create-form { grid-template-columns: 1fr auto; margin-bottom: 10px; }
.page-list { max-height: 220px; overflow: auto; padding-right: 4px; }
.page-item .component-actions .btn.icon { width: 28px; min-width: 28px; height: 28px; min-height: 28px; font-size: 13px; }
.menu-editor-row-advanced { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(120px, 1.2fr) minmax(130px, 1fr) auto auto auto; gap: 6px; align-items: center; }
.menu-editor-row-advanced .btn.icon { width: 32px; min-width: 32px; }
.blog-card { cursor: pointer; }
.blog-edit-btn { position: absolute; top: 10px; left: 10px; z-index: 7; width: 34px; height: 34px; border-radius: 999px; border: 1px solid rgb(219, 231, 243); background: rgba(255, 255, 255, 0.96); color: rgb(37, 99, 235); font-weight: 800; box-shadow: rgba(15, 23, 42, 0.12) 0px 8px 18px; opacity: 0; pointer-events: none; transition: opacity 0.15s; }
.blog-card:hover .blog-edit-btn { opacity: 1; pointer-events: auto; }
.blog-card[data-page-link]:not([draggable="true"]:hover) { cursor: pointer; }
@media (max-width: 980px) {
  .menu-editor-row-advanced { grid-template-columns: 1fr; }
}
.left-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0px 10px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: rgb(248, 251, 255); }
.left-tab { min-height: 36px; border: 0px; border-radius: 9px; background: transparent; color: var(--muted); font-weight: 900; }
.left-tab.active { background: var(--blue); color: rgb(255, 255, 255); box-shadow: rgba(37, 99, 235, 0.18) 0px 8px 18px; }
.left-tab-panel { display: none; min-height: 0px; }
.left-tab-panel.active { display: flex; flex-direction: column; gap: 0px; min-height: 0px; flex: 1 1 0%; }
.left-panel { overflow: auto; }
.left-panel .component-area, .left-tab-panel[data-left-tab-panel="components"] .component-area { min-height: 220px; }
.left-settings { display: grid; gap: 12px; padding-bottom: 18px; }
.left-site-card { padding: 12px; }
.compact-form { grid-template-columns: 1fr 42px; margin-bottom: 10px; }
.field-hint-inline { color: var(--muted); font-size: 11px; font-weight: 700; margin-left: 4px; }
.menu-editor-row-advanced { grid-template-columns: 28px minmax(90px, 1fr) minmax(110px, 1.2fr) minmax(118px, 1fr) auto; cursor: grab; }
.menu-editor-row-advanced:active { cursor: grabbing; }
.drag-handle { width: 28px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: rgb(248, 251, 255); color: var(--blue); font-weight: 950; user-select: none; }
.menu-editor-row.is-dragging, .component-item.is-dragging { opacity: 0.45; }
.menu-editor-row.is-drop-target, .page-item.is-drop-target, .component-item.is-drop-target { outline: 2px dashed var(--blue); outline-offset: 3px; }
.canvas-color-picker { width: auto; min-width: 34px; height: 24px; display: inline-grid; place-items: center; position: relative; border: 1px solid rgb(219, 231, 243); border-radius: 999px; background: rgb(255, 255, 255); color: rgb(29, 78, 216); font-size: 10px; font-weight: 950; overflow: hidden; padding: 0px 5px; }
.canvas-color-picker input { position: absolute; inset: 0px; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.canvas-controls button[data-style-action="clear-colors"] { width: auto; min-width: 38px; padding: 0px 5px; font-size: 10px; }
.blog-card > .image-replace-btn { left: 12px; top: 12px; }
.blog-edit-btn { left: 64px; top: 10px; }
@media (max-width: 980px) {
  .menu-editor-row-advanced { grid-template-columns: 28px 1fr; }
  .menu-editor-row-advanced .input, .menu-editor-row-advanced .btn.icon { grid-column: 2; }
  .drag-handle { grid-row: 1 / span 4; height: 100%; }
}
.editor-layout { grid-template-columns: 340px minmax(420px, 1fr) 400px; }
.editor-layout.left-collapsed { grid-template-columns: 12px minmax(420px, 1fr) 400px; }
.editor-layout.right-collapsed { grid-template-columns: 340px minmax(420px, 1fr) 12px; }
.panel-peek-left { left: calc(var(--left-panel-w) - 12px); }
.panel-peek-right { right: calc(var(--right-panel-w) - 12px); }
.left-panel { padding: 18px; gap: 12px; background: linear-gradient(rgb(255, 255, 255) 0%, rgb(248, 251, 255) 100%); }
.left-panel .sidebar-title { margin: 18px 0px 10px; font-size: 11px; color: rgb(37, 99, 235); letter-spacing: 0.12em; }
.left-tabs { gap: 6px; padding: 5px; margin: 14px 0px 16px; border-radius: 16px; background: rgb(238, 246, 255); }
.left-tab { min-height: 42px; border-radius: 12px; font-size: 13px; }
.left-tab-panel.active { gap: 12px; }
.left-tab-panel[data-left-tab-panel="pages"] > .sidebar-title, .left-tab-panel[data-left-tab-panel="components"] > .sidebar-title { margin-top: 4px; }
.compact-form, .page-list, .left-settings, .preset-list, .left-tab-panel[data-left-tab-panel="components"] .component-area { border: 1px solid rgb(219, 231, 243); border-radius: 16px; background: rgba(255, 255, 255, 0.86); box-shadow: rgba(37, 99, 235, 0.06) 0px 10px 24px; }
.compact-form { padding: 10px; gap: 8px; }
.page-list, .preset-list { padding: 10px; }
.left-tab-panel[data-left-tab-panel="components"] .component-area { padding: 0px 10px 10px; }
.left-settings { padding: 12px; gap: 14px; }
.left-site-card { border: 0px; box-shadow: none; padding: 0px; background: transparent; }
.left-site-card .settings-head { padding: 12px 12px 2px; }
.left-site-card .field { padding: 12px; border: 1px solid rgb(230, 238, 249); border-radius: 14px; background: rgb(255, 255, 255); margin-bottom: 10px; }
.left-site-card .field label { color: rgb(15, 63, 143); font-size: 12px; }
.left-site-card .field .btn:not(.icon) { width: 100%; justify-content: center; }
.menu-editor { gap: 10px; }
.menu-editor-row-advanced { grid-template-columns: 34px 1fr; gap: 8px; padding: 10px; border: 1px solid rgb(230, 238, 249); border-radius: 14px; background: rgb(248, 251, 255); align-items: start; }
.menu-editor-row-advanced .drag-handle { grid-row: 1 / span 4; height: 100%; min-height: 118px; border-radius: 12px; background: white; }
.menu-editor-row-advanced .input, .menu-editor-row-advanced .btn.icon { grid-column: 2; width: 100%; }
.menu-editor-row-advanced .btn.icon { min-width: 0px; height: 34px; }
.component-tools { grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 10px; }
.component-tools .btn, .component-tools .component-add-card { min-height: 68px; justify-content: center; align-items: center; flex-direction: column; gap: 5px; padding: 10px 8px; border-radius: 16px; background: rgb(255, 255, 255); box-shadow: rgba(37, 99, 235, 0.06) 0px 8px 18px; }
.component-tools .btn.primary { background: rgb(37, 99, 235); }
.component-add-card span { font-size: 20px; line-height: 1; }
.component-add-card b { font-size: 12px; line-height: 1.1; }
.component-list .component-item { border-radius: 14px; padding: 12px; }
.blog-card > .image-replace-btn { inset: 12px auto auto 12px; }
.blog-edit-btn { width: 40px; height: 40px; font-size: 18px; inset: auto 12px 12px auto !important; }
@media (max-width: 1100px) {
  .editor-layout, .editor-layout.right-collapsed { grid-template-columns: 1fr; }
  .panel-peek-left, .panel-peek-right { left: auto; right: auto; }
}
.left-tab-panel[data-left-tab-panel="pages"] .left-settings .left-site-card { padding: 12px; margin-bottom: 12px; }
.seo-only-card .field-hint { margin: 4px 0px 0px; color: rgb(100, 116, 139); font-size: 12px; line-height: 1.5; }
.component-hub { border: 1px solid rgb(230, 238, 249); border-radius: 16px; background: rgb(255, 255, 255); padding: 10px; margin-bottom: 10px; box-shadow: rgba(37, 99, 235, 0.043) 0px 8px 18px; }
.compact-title, .left-panel .compact-title { font-size: 11px; letter-spacing: 0.08em; color: rgb(37, 99, 235); margin: 0px 0px 8px !important; }
.compact-add-tools, .component-tools.compact-add-tools { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 6px; }
.component-tools.compact-add-tools .btn, .component-tools.compact-add-tools .component-add-card { min-height: 42px; height: 42px; padding: 5px 7px; border-radius: 11px; flex-direction: row; justify-content: flex-start; gap: 6px; box-shadow: none; }
.component-tools.compact-add-tools .component-add-card span { font-size: 15px; width: 18px; text-align: center; }
.component-tools.compact-add-tools .component-add-card b { font-size: 12px; white-space: nowrap; }
.component-hub-list { padding: 9px; }
.component-hub-list .component-list { gap: 6px; }
.component-hub-list .component-item, .component-list.compact-list .component-item, .left-panel .component-list .component-item { padding: 8px; border-radius: 12px; }
.component-hub-list .component-top strong, .left-panel .component-top strong { font-size: 13px; }
.component-hub-list .component-top span, .left-panel .component-top span { font-size: 11px; }
.component-hub-list .component-actions { gap: 4px; margin-top: 7px; }
.component-hub-list .component-actions .btn.icon, .left-panel .component-actions .btn.icon { width: 26px; min-width: 26px; height: 26px; min-height: 26px; font-size: 13px; }
.left-tab-panel[data-left-tab-panel="components"].active { gap: 0px; }
.left-tab-panel[data-left-tab-panel="components"] .component-area { min-height: 180px; flex: 1 1 0%; }
.left-tab-panel[data-left-tab-panel="components"] .component-area .component-list { overflow: auto; min-height: 120px; padding-right: 2px; }
.left-tab-panel[data-left-tab-panel="components"] .preset-list { max-height: 115px; overflow: auto; }
.right-menu-editor { display: grid; gap: 10px; }
.right-menu-row.menu-editor-row-advanced { grid-template-columns: 34px minmax(0px, 1fr); gap: 8px; padding: 10px; border: 1px solid rgb(230, 238, 249); border-radius: 14px; background: rgb(248, 251, 255); }
.right-menu-row.menu-editor-row-advanced .drag-handle { grid-row: 1 / span 4; min-height: 112px; height: 100%; }
.right-menu-row.menu-editor-row-advanced .input, .right-menu-row.menu-editor-row-advanced .btn.icon { grid-column: 2; width: 100%; }
.right-menu-row.menu-editor-row-advanced .btn.icon { height: 34px; }
.btn:disabled { opacity: 0.42; cursor: not-allowed; }
.left-panel { padding: 14px; gap: 10px; }
.left-panel .sidebar-title { margin: 12px 0px 8px; font-size: 11px; letter-spacing: 0.09em; }
.left-tabs { margin: 10px 0px 12px; }
.left-tab { min-height: 36px; font-size: 12px; }
.left-tab-panel[data-left-tab-panel="pages"].active, .left-tab-panel[data-left-tab-panel="components"].active { display: flex; flex-direction: column; gap: 10px; min-height: 0px; }
.project-form.compact-form { display: grid; grid-template-columns: minmax(0px, 1fr) 44px; gap: 8px; align-items: center; padding: 8px; margin: 0px; border-radius: 14px; box-shadow: rgba(37, 99, 235, 0.043) 0px 8px 18px; }
.project-form.compact-form .input { min-height: 40px; border-radius: 10px; font-size: 14px; }
.project-form.compact-form .btn { width: 44px; min-width: 44px; min-height: 40px; border-radius: 12px; font-size: 20px; padding: 0px; }
.page-list { display: grid; gap: 7px; max-height: 260px; overflow: auto; padding: 8px; border-radius: 14px; box-shadow: rgba(37, 99, 235, 0.043) 0px 8px 18px; }
.page-list .page-item, .left-panel .page-list .component-item { min-height: auto; padding: 8px 9px; border-radius: 12px; background: rgb(255, 255, 255); box-shadow: none; }
.page-list .page-item.active { box-shadow: rgba(37, 99, 235, 0.12) 0px 0px 0px 2px; }
.page-list .component-top { grid-template-columns: minmax(0px, 1fr) auto; gap: 8px; }
.page-list .component-top strong { font-size: 13px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-list .component-top span { font-size: 11px; }
.page-list .component-actions { margin-top: 7px; gap: 4px; justify-content: flex-start; }
.page-list .component-actions .btn.icon { width: 26px; min-width: 26px; height: 26px; min-height: 26px; font-size: 13px; }
.left-settings { padding: 0px; border: 0px; background: transparent; box-shadow: none; }
.left-settings .seo-only-card, .left-tab-panel[data-left-tab-panel="pages"] .left-settings .left-site-card { padding: 10px; border: 1px solid rgb(219, 231, 243); border-radius: 14px; background: rgba(255, 255, 255, 0.9); box-shadow: rgba(37, 99, 235, 0.043) 0px 8px 18px; }
.seo-only-card .settings-head { padding: 0px 0px 8px; }
.seo-only-card .settings-head strong { font-size: 14px; }
.seo-only-card .field, .left-site-card .field { padding: 9px; border-radius: 12px; margin-bottom: 8px; }
.seo-only-card .field label { font-size: 11px; }
.seo-only-card .input, .seo-only-card .textarea { min-height: 38px; font-size: 13px; border-radius: 10px; }
.seo-only-card .textarea { min-height: 76px; }
.seo-only-card .field-hint { display: none; }
.canvas-controls { max-width: min(60vw, 520px); }
.canvas-color-picker { width: auto; min-width: 34px; padding: 0px 5px; }
.canvas-color-picker span, .canvas-controls button[data-style-action="clear-colors"] { font-size: 10px; white-space: nowrap; }
.canvas-controls button[data-style-action="clear-colors"] { width: auto; min-width: 38px; padding: 0px 5px; }
.component-hub { padding: 8px; margin-bottom: 8px; }
.component-tools.compact-add-tools { gap: 5px; }
.component-tools.compact-add-tools .btn, .component-tools.compact-add-tools .component-add-card { min-height: 36px; height: 36px; border-radius: 10px; padding: 4px 6px; }
.component-tools.compact-add-tools .component-add-card span { font-size: 14px; }
.component-tools.compact-add-tools .component-add-card b { font-size: 11px; }
.editor-layout { grid-template-columns: 360px minmax(420px, 1fr) 400px; }
.editor-layout.left-collapsed { grid-template-columns: 12px minmax(420px, 1fr) 400px; }
.editor-layout.right-collapsed { grid-template-columns: 360px minmax(420px, 1fr) 12px; }
.panel-peek-left { left: 348px; }
.left-panel { padding: 16px; gap: 12px; overflow: hidden; background: linear-gradient(rgb(251, 253, 255) 0%, rgb(243, 248, 255) 100%); }
.left-panel > .sidebar-title:first-child { margin: 0px; padding: 0px 2px; color: rgb(15, 23, 42); font-size: 13px; font-weight: 900; letter-spacing: 0px; text-transform: none; }
.left-panel > #renameProject { min-height: 44px; border-radius: 12px; background: rgb(255, 255, 255); box-shadow: rgba(15, 23, 42, 0.043) 0px 8px 22px; }
.left-tabs { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 4px; margin: 0px; padding: 4px; border: 1px solid rgb(219, 234, 254); border-radius: 14px; background: rgb(237, 246, 255); }
.left-tab { min-height: 38px; border: 0px; border-radius: 10px; background: transparent; color: rgb(71, 96, 125); font-size: 12px; font-weight: 900; }
.left-tab.active { background: rgb(255, 255, 255); color: rgb(29, 78, 216); box-shadow: rgba(37, 99, 235, 0.12) 0px 8px 20px; }
.left-tab-panel[data-left-tab-panel="pages"].active, .left-tab-panel[data-left-tab-panel="components"].active { flex: 1 1 0%; min-height: 0px; overflow: hidden; gap: 10px; }
.left-tab-panel .sidebar-title, .left-panel .compact-title { color: rgb(37, 99, 235); font-size: 11px; font-weight: 950; letter-spacing: 0.11em; text-transform: uppercase; margin: 0px 0px 8px !important; }
.project-form.compact-form, .component-hub, .left-settings .seo-only-card, .left-tab-panel[data-left-tab-panel="pages"] .left-settings .left-site-card { border: 1px solid rgb(219, 234, 254); border-radius: 16px; background: rgba(255, 255, 255, 0.92); box-shadow: rgba(37, 99, 235, 0.055) 0px 10px 28px; }
.project-form.compact-form { padding: 8px; }
.left-tab-panel[data-left-tab-panel="pages"] .page-list { flex: 0 0 auto; max-height: 210px; }
.left-settings { flex: 1 1 0%; min-height: 0px; overflow: auto; }
.component-hub { padding: 10px; margin: 0px; }
.left-tab-panel[data-left-tab-panel="components"] .component-hub:first-child { flex: 0 0 auto; }
.component-tools.compact-add-tools { grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 7px; }
.component-tools.compact-add-tools .btn, .component-tools.compact-add-tools .component-add-card { min-height: 42px; height: 42px; border: 1px solid rgb(226, 236, 251); border-radius: 12px; background: rgb(255, 255, 255); color: rgb(15, 23, 42); justify-content: flex-start; padding: 7px 9px; box-shadow: none; }
.component-tools.compact-add-tools .btn.primary { border-color: rgb(37, 99, 235); background: rgb(37, 99, 235); color: rgb(255, 255, 255); }
.component-tools.compact-add-tools .component-add-card span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 8px; background: rgb(239, 246, 255); color: rgb(37, 99, 235); font-size: 13px; flex: 0 0 22px; }
.component-tools.compact-add-tools .btn.primary span { background: rgba(255, 255, 255, 0.18); color: rgb(255, 255, 255); }
.component-tools.compact-add-tools .component-add-card b { min-width: 0px; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.component-hub-list { display: flex; flex-direction: column; min-height: 0px; }
.left-tab-panel[data-left-tab-panel="components"] .preset-list { max-height: 104px; overflow: auto; }
.left-tab-panel[data-left-tab-panel="components"] .component-area { flex: 1 1 0%; min-height: 0px; padding: 10px; }
.left-tab-panel[data-left-tab-panel="components"] .component-area .component-list { flex: 1 1 0%; min-height: 0px; overflow: auto; }
.left-panel .component-list { gap: 7px; padding-right: 2px; }
.left-panel .component-list .component-item { min-height: 0px; padding: 9px; border: 1px solid rgb(225, 235, 248); border-radius: 13px; background: rgb(255, 255, 255); box-shadow: none; }
.left-panel .component-list .component-item.active { border-color: rgb(37, 99, 235); background: rgb(248, 251, 255); box-shadow: rgba(37, 99, 235, 0.1) 0px 0px 0px 3px; }
.left-panel .component-top { display: grid; grid-template-columns: minmax(0px, 1fr) auto; gap: 8px; align-items: center; }
.left-panel .component-top strong { min-width: 0px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgb(15, 23, 42); font-size: 13px; line-height: 1.25; }
.left-panel .component-top span { border-radius: 999px; background: rgb(239, 246, 255); color: rgb(37, 99, 235); padding: 4px 7px; font-size: 10px; font-weight: 900; }
.left-panel .component-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 8px; }
.left-panel .component-actions .btn.icon { width: auto; min-width: 0px; height: 30px; min-height: 30px; border-radius: 9px; background: rgb(248, 251, 255); color: rgb(15, 63, 143); font-size: 13px; }
.left-panel .component-actions .btn.icon:hover { border-color: rgb(37, 99, 235); color: rgb(29, 78, 216); }
.left-settings .seo-only-card, .left-tab-panel[data-left-tab-panel="pages"] .left-settings .left-site-card { padding: 12px; }
@media (max-width: 1100px) {
  .editor-layout, .editor-layout.left-collapsed, .editor-layout.right-collapsed { grid-template-columns: 1fr; }
  .panel-peek-left, .panel-peek-right { left: auto; right: 12px; }
}
.topnav { min-height: 64px; padding: 0px 22px; background: rgba(250, 253, 255, 0.94); border-bottom: 1px solid rgb(220, 232, 246); box-shadow: rgba(15, 23, 42, 0.043) 0px 10px 30px; }
.brand { min-width: 0px; max-width: 32%; color: rgb(31, 42, 68); font-weight: 700; }
.brand-mark { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, rgb(37, 99, 235), rgb(56, 189, 248)); box-shadow: rgba(37, 99, 235, 0.22) 0px 10px 22px; font-weight: 700; }
.nav-actions { gap: 7px; padding: 6px; border: 1px solid rgb(224, 235, 248); border-radius: 16px; background: rgb(255, 255, 255); }
.nav-actions .btn { min-height: 34px; border: 0px; border-radius: 10px; background: transparent; color: rgb(67, 88, 117); padding: 0px 11px; font-size: 12px; font-weight: 600; }
.nav-actions .btn:hover { background: rgb(241, 247, 255); color: rgb(29, 78, 216); }
.nav-actions .btn.icon { width: 34px; min-width: 34px; color: rgb(29, 78, 216); }
.nav-actions .btn.primary { background: rgb(37, 99, 235); color: rgb(255, 255, 255); padding: 0px 14px; box-shadow: rgba(37, 99, 235, 0.18) 0px 8px 18px; }
.nav-actions .btn.primary:hover { background: rgb(29, 78, 216); color: rgb(255, 255, 255); }
.right-panel { padding: 18px; background: linear-gradient(rgb(251, 253, 255) 0%, rgb(245, 249, 255) 100%); border-left: 1px solid rgb(220, 232, 246); }
.right-panel .page-head { height: auto; min-height: 0px; padding: 0px 2px 12px; border: 0px; background: transparent; }
.right-panel .page-head p { margin: 0px; color: rgb(100, 116, 139); font-size: 12px; font-weight: 500; }
.right-panel #selectedType { display: block; margin-top: 4px; color: rgb(23, 32, 51); font-size: 20px; font-weight: 650; }
.right-panel .field-list { gap: 12px; }
.right-panel .settings-card { border: 1px solid rgb(219, 231, 243); border-radius: 14px; background: rgba(255, 255, 255, 0.94); padding: 16px; gap: 14px; box-shadow: rgba(37, 99, 235, 0.055) 0px 12px 30px; }
.right-panel .settings-head { padding-bottom: 8px; border-bottom: 1px solid rgb(237, 243, 251); align-items: center; }
.right-panel .settings-head strong { color: rgb(20, 32, 51); font-size: 15px; font-weight: 650; }
.right-panel .settings-head span { border-radius: 999px; background: rgb(237, 246, 255); color: rgb(37, 99, 235); padding: 4px 9px; font-size: 11px; font-weight: 600; }
.right-panel .field { gap: 7px; }
.right-panel .field label { color: rgb(93, 112, 140); font-size: 12px; font-weight: 600; }
.right-panel .input, .right-panel .textarea { border-color: rgb(219, 231, 243); border-radius: 11px; background: rgb(248, 251, 255); color: rgb(15, 23, 42); font-size: 14px; }
.right-panel .input { min-height: 42px; }
.right-panel .textarea { min-height: 104px; resize: vertical; }
.right-panel input[type="file"].input { padding: 8px; background: rgb(255, 255, 255); font-size: 12px; }
.right-panel input[type="range"].input { min-height: 28px; padding: 0px; background: transparent; }
.right-panel .btn { min-height: 36px; border-radius: 10px; font-size: 12px; font-weight: 600; }
.site-section h1, .site-section h2, .site-section h3, .person strong, .blog-card strong, .faq-item strong { font-weight: var(--section-title-weight, 680); }
.site-section .site-btn, .site-btn, .section-kicker, .hero-kicker, .site-header strong, .btn, .field label, .component-top strong, .left-panel .component-top strong { font-weight: 600; }
.left-panel .page-list .component-item { padding: 10px 96px 10px 12px; }
.left-panel .page-list .component-top { display: flex; align-items: center; min-height: 26px; }
.left-panel .page-list .component-top span { display: none !important; }
.left-panel .page-list .component-actions { top: 50%; transform: translateY(-50%); }
.button-editor { gap: 8px; }
.button-row { display: grid; grid-template-columns: minmax(0px, 1fr) minmax(0px, 1.1fr) 36px auto auto 36px 36px; gap: 7px; align-items: center; }
.button-row .btn.icon { width: 36px; min-width: 36px; }
.color-swatch-label { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: rgb(71, 85, 105); }
.color-swatch-label input[type="color"] { width: 28px; height: 28px; border: 1px solid rgb(219, 231, 243); border-radius: 6px; padding: 0px; background: none; cursor: pointer; }
.ic-editor { gap: 10px; }
.ic-editor-list { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.ic-editor-card { border: 1px solid rgb(221, 227, 236); border-radius: 12px; background: rgb(249, 251, 253); padding: 12px 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.ic-editor-head { display: flex; align-items: center; justify-content: space-between; }
.ic-editor-badge { font-size: 11px; font-weight: 700; color: rgb(107, 122, 144); background: rgb(238, 242, 248); padding: 3px 8px; border-radius: 999px; }
.ic-editor-del { width: 28px; height: 28px; min-width: 28px; border-radius: 8px; color: rgb(176, 42, 55); }
.ic-editor-media { display: flex; gap: 10px; align-items: stretch; }
.ic-editor-thumb { width: 88px; height: 66px; border-radius: 8px; object-fit: cover; background: rgb(238, 242, 248); display: block; flex-shrink: 0; border: 1px solid rgb(221, 227, 236); }
.ic-editor-thumb-empty { display: grid; place-items: center; font-size: 11px; color: rgb(148, 163, 184); text-align: center; padding: 4px; }
.ic-editor-media-actions { display: flex; flex-direction: column; gap: 6px; flex: 1 1 0%; min-width: 0px; }
.ic-editor-icon-row { display: flex; gap: 8px; align-items: center; }
.ic-editor-icon-input { flex: 1 1 0%; }
.ic-editor-field { display: flex; flex-direction: column; gap: 4px; }
.ic-editor-field > label { font-size: 11px; font-weight: 600; color: rgb(107, 122, 144); }
.ic-editor-body { min-height: 60px; resize: vertical; }
.ic-editor-add { margin-top: 10px; width: 100%; border-style: dashed; }
.ic-editor-advanced { margin-top: 12px; border-top: 1px dashed rgb(221, 227, 236); padding-top: 10px; }
.ic-editor-advanced summary { cursor: pointer; font-size: 12px; color: rgb(107, 122, 144); padding: 4px 0px; }
.ic-editor-raw { min-height: 100px; margin-top: 8px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; }
.btn.small { padding: 4px 10px; font-size: 12px; border-radius: 8px; cursor: pointer; }
.site-footer { background: rgb(234, 244, 255); color: var(--section-text-color, #243c5a); padding-top: 90px; padding-bottom: 70px; }
.site-footer h2 { color: var(--section-title-color, #123b8c); margin-bottom: 14px; }
.site-footer p { color: var(--section-text-color, #243c5a); max-width: none; }
.site-footer > div { width: 100%; }
.footer-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0px 34px; }
.footer-links .site-btn { min-height: 42px; background: rgb(37, 99, 235); border: 1px solid rgba(37, 99, 235, 0.18); color: rgb(255, 255, 255); margin: 0px; }
.site-footer small { display: block; color: color-mix(in srgb, var(--section-text-color, #243c5a), transparent 28%); font-size: calc(14px * var(--body-scale)); }
.site-frame .site-section h1:not(.bsx *), .site-frame .site-section h2:not(.bsx *), .site-frame .site-section h3:not(.bsx *), .site-frame .site-hero h2, .site-frame .split-copy h2, .site-frame .article-section h2, .site-frame .media-section-inner > h2, .site-frame .site-footer h2 { font-size: calc(var(--section-title-size, 46px) * var(--heading-scale)) !important; }
.file-name-field { display: grid; grid-template-columns: minmax(0px, 1fr) auto; align-items: center; gap: 8px; }
.file-name-field span { color: rgb(100, 116, 139); font-size: 12px; font-weight: 700; }
.faq-section { background: var(--faq-bg, #ffffff); }
.faq-inner { width: min(940px, 100%); margin: 0px auto; }
.faq-list { display: grid; gap: 14px; margin-top: 30px; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); }
@media (max-width: 760px) {
  .faq-list { grid-template-columns: repeat(var(--cols-mobile, 1), minmax(0, 1fr)) !important; }
}
.preview-zone.mobile-preview .faq-list, .site-frame[data-preview-mode="mobile"] .faq-list { grid-template-columns: repeat(var(--cols-mobile, 1), minmax(0, 1fr)) !important; }
.faq-card.faq-no-num, .faq-collapsible.faq-no-num { grid-template-columns: minmax(0px, 1fr) !important; }
.faq-card.faq-no-num .faq-mark, .faq-collapsible.faq-no-num .faq-mark { display: none !important; }
.faq-collapsible.faq-no-num > summary { grid-template-columns: minmax(0px, 1fr) auto !important; }
.faq-collapsible.faq-no-num .faq-answer { padding-left: 18px !important; }
.faq-card, .faq-item, .faq-collapsible { display: grid; grid-template-columns: 42px minmax(0px, 1fr); gap: 16px; align-items: start; border: 1px solid rgb(226, 236, 248); border-radius: 10px; background: rgb(255, 255, 255); padding: 18px; box-shadow: rgba(15, 23, 42, 0.043) 0px 14px 34px; }
.faq-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 999px; background: rgb(239, 246, 255); color: rgb(37, 99, 235); font-size: 14px; font-weight: 760; }
.faq-copy { min-width: 0px; }
.faq-card strong, .faq-item strong { display: block; color: var(--section-title-color, #0f172a); font-size: calc(18px * var(--heading-scale)); font-weight: var(--section-title-weight, 680); line-height: 1.35; }
.faq-card p, .faq-item p { margin: 8px 0px 0px; color: var(--section-text-color,#334155); font-size: calc(15px * var(--body-scale)); line-height: 1.75; font-weight: var(--section-font-weight, 400); font-style: var(--section-font-style, normal); }
.faq-card[draggable="true"] { cursor: grab; }
@media (max-width: 760px) {
  .faq-card, .faq-item, .faq-collapsible { grid-template-columns: 34px minmax(0px, 1fr); gap: 12px; padding: 14px; }
  .faq-mark { width: 34px; height: 34px; font-size: 12px; }
}
.site-header.is-sticky { position: sticky; top: 0px; background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(180%) blur(14px); box-shadow: rgba(15, 23, 42, 0.28) 0px 10px 30px -22px; z-index: 20; }
@keyframes lvAnimFade { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes lvAnimFadeUp { 
  0% { opacity: 0; transform: translateY(28px); }
  100% { opacity: 1; transform: none; }
}
@keyframes lvAnimSlideLeft { 
  0% { opacity: 0; transform: translateX(40px); }
  100% { opacity: 1; transform: none; }
}
@keyframes lvAnimZoom { 
  0% { opacity: 0; transform: scale(0.96); }
  100% { opacity: 1; transform: none; }
}
@keyframes lvAnimBlur { 
  0% { opacity: 0; filter: blur(14px); }
  100% { opacity: 1; filter: none; }
}
[data-page-anim] .site-section { animation-duration: 0.85s; animation-fill-mode: both; animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); }
[data-page-anim="fade"] .site-section { animation-name: lvAnimFade; }
[data-page-anim="fade-up"] .site-section { animation-name: lvAnimFadeUp; }
[data-page-anim="slide-left"] .site-section { animation-name: lvAnimSlideLeft; }
[data-page-anim="zoom"] .site-section { animation-name: lvAnimZoom; }
[data-page-anim="blur"] .site-section { animation-name: lvAnimBlur; }
[data-page-anim] .site-section:nth-of-type(1) { animation-delay: 0.02s; }
[data-page-anim] .site-section:nth-of-type(2) { animation-delay: 0.12s; }
[data-page-anim] .site-section:nth-of-type(3) { animation-delay: 0.22s; }
[data-page-anim] .site-section:nth-of-type(4) { animation-delay: 0.32s; }
[data-page-anim] .site-section:nth-of-type(n+5) { animation-delay: 0.4s; }
.site-frame:has(.site-header.is-sticky) { overflow: visible; }
.anim-field .anim-grid, .menu-tpl-grid { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 8px; margin-top: 6px; }
.anim-tile, .menu-tpl-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border: 1px solid var(--line, #dbe7f3); border-radius: 10px; background: rgb(255, 255, 255); cursor: pointer; font-size: 12px; color: rgb(71, 85, 105); transition: 0.18s; }
.anim-tile:hover, .menu-tpl-tile:hover { border-color: rgb(147, 184, 247); transform: translateY(-1px); box-shadow: rgba(37, 99, 235, 0.35) 0px 6px 14px -10px; }
.anim-tile.active, .menu-tpl-tile.active { border-color: rgb(37, 99, 235); background: rgb(239, 246, 255); color: rgb(29, 78, 216); box-shadow: rgba(37, 99, 235, 0.12) 0px 0px 0px 2px; }
.anim-icon svg, .menu-tpl-icon svg { width: 28px; height: 22px; color: currentcolor; display: block; }
.menu-tpl-icon svg { width: 44px; height: 18px; }
.menu-tpl-tile { padding: 8px 6px; font-size: 11px; }
.anim-label, .menu-tpl-label { line-height: 1.2; text-align: center; }
.site-header.tmpl-centered, .site-header.tmpl-stacked, .site-header.tmpl-right, .site-header.tmpl-minimal, .site-header.tmpl-pill { display: flex; grid-template-columns: none; }
.site-header.tmpl-right { justify-content: space-between; }
.site-header.tmpl-pill { justify-content: space-between; }
.site-header.tmpl-minimal { justify-content: flex-start; }
.site-nav { font-size: calc(var(--menu-font-size, 15px) * var(--body-scale)); }
.site-header.tmpl-centered { flex-direction: column; align-items: center; gap: 10px; padding-top: 18px; padding-bottom: 14px; }
.site-header.tmpl-centered .site-nav { gap: 26px; }
.site-header.tmpl-stacked { flex-direction: column; align-items: center; gap: 14px; padding-top: 22px; padding-bottom: 18px; border-bottom: 1px solid rgb(237, 242, 247); }
.site-header.tmpl-stacked .site-logo { font-size: 1.2em; }
.site-header.tmpl-stacked .site-nav { gap: 34px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 13px; }
.site-header.tmpl-right .site-nav { margin-left: auto; }
.site-header.tmpl-right .site-logo { margin-right: auto; }
.site-header.tmpl-minimal .site-nav { display: none; }
.site-header.tmpl-pill .site-nav { background: rgb(241, 245, 251); padding: 8px 18px; border-radius: 999px; gap: 22px; }
.site-header.tmpl-pill .site-nav a { padding: 4px 10px; border-radius: 999px; transition: background 0.2s; }
.site-header.tmpl-pill .site-nav a:hover { background: rgb(255, 255, 255); box-shadow: rgba(15, 23, 42, 0.15) 0px 4px 12px -6px; }
#componentList { padding-right: 2px; gap: 6px !important; }
#componentList .component-item { display: flex; align-items: center; gap: 8px; background: rgb(255, 255, 255); border: 1px solid rgb(230, 238, 249); min-height: 38px; padding: 8px 10px !important; border-radius: 10px !important; box-shadow: none !important; }
#componentList .component-item.active { border-color: rgb(37, 99, 235); background: rgb(243, 248, 255); }
#componentList .component-top { align-items: center; gap: 8px; flex: 1 1 0%; min-width: 0px; margin: 0px; display: flex !important; }
#componentList .component-top strong { flex: 1 1 0%; min-width: 0px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; color: rgb(15, 23, 42); }
#componentList .component-top span { flex-shrink: 0; background: rgb(239, 246, 255); color: rgb(37, 99, 235); font-size: 10.5px; font-weight: 700; padding: 3px 7px; border-radius: 999px; }
#componentList .component-actions { flex-shrink: 0; display: flex !important; flex-direction: row !important; gap: 2px !important; margin: 0px !important; grid-template-columns: none !important; }
#componentList .component-actions .btn.icon { width: 24px !important; min-width: 24px !important; height: 24px !important; min-height: 24px !important; padding: 0px !important; font-size: 12px !important; border-radius: 6px !important; border: 1px solid transparent !important; background: transparent !important; color: rgb(100, 116, 139) !important; }
#componentList .component-actions .btn.icon:hover { background: rgb(238, 244, 255) !important; color: rgb(37, 99, 235) !important; border-color: rgb(203, 217, 238) !important; }
.faq-mark { font-variant-numeric: tabular-nums; }
.faq-collapsible { border: 1px solid rgb(226, 236, 248); border-radius: 10px; background: rgb(255, 255, 255); padding: 0px; }
.faq-collapsible summary { display: grid; grid-template-columns: 42px minmax(0px, 1fr) auto; gap: 16px; align-items: center; padding: 18px; cursor: pointer; list-style: none; }
.faq-collapsible summary::-webkit-details-marker { display: none; }
.faq-collapsible .faq-toggle { font-size: 22px; color: rgb(37, 99, 235); font-weight: 400; transition: transform 0.2s; }
.faq-collapsible[open] .faq-toggle { transform: rotate(45deg); }
.faq-collapsible .faq-answer { padding: 0px 18px 18px 76px; color: var(--section-text-color,#334155); }
.site-frame .team-grid, .site-frame .gallery-grid, .site-frame .video-grid { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
@media (max-width: 760px) {
  .site-frame .team-grid, .site-frame .gallery-grid, .site-frame .video-grid { grid-template-columns: repeat(var(--cols-mobile, 1), minmax(0, 1fr)) !important; }
}
.preview-zone.mobile-preview .site-frame .team-grid, .preview-zone.mobile-preview .site-frame .gallery-grid, .preview-zone.mobile-preview .site-frame .video-grid, .site-frame[data-preview-mode="mobile"] .team-grid, .site-frame[data-preview-mode="mobile"] .gallery-grid, .site-frame[data-preview-mode="mobile"] .video-grid { grid-template-columns: repeat(var(--cols-mobile, 1), minmax(0, 1fr)) !important; }
.faq-collapsible { display: block !important; grid-template-columns: none !important; padding: 0px !important; }
.faq-collapsible > summary { display: grid; grid-template-columns: 42px minmax(0px, 1fr) auto; gap: 16px; align-items: center; padding: 18px; cursor: pointer; list-style: none; }
.faq-collapsible > summary::-webkit-details-marker { display: none; }
.faq-collapsible .faq-toggle { font-size: 22px; color: rgb(37, 99, 235); font-weight: 400; transition: transform 0.2s; line-height: 1; }
.faq-collapsible[open] .faq-toggle { transform: rotate(45deg); }
.faq-collapsible .faq-answer { padding: 0px 18px 18px 76px; color: var(--section-text-color,#334155); }
.faq-collapsible .faq-answer p { color: inherit; font-size: calc(15px * var(--body-scale)); line-height: 1.75; padding: 0px !important; margin: 0px !important; }
@media (max-width: 760px) {
  .faq-collapsible > summary { grid-template-columns: 34px minmax(0px, 1fr) auto; gap: 12px; padding: 14px; }
  .faq-collapsible .faq-answer { padding: 0px 14px 14px 60px; }
}
.preview-zone.mobile-preview .site-header { display: flex !important; flex-flow: row !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; padding: 12px 18px !important; min-height: 56px !important; }
.preview-zone.mobile-preview .site-header .site-logo, .preview-zone.mobile-preview .site-header .site-logo-wrap { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 70% !important; font-size: 15px !important; }
.preview-zone.mobile-preview .site-nav, .preview-zone.mobile-preview .site-header.tmpl-pill .site-nav, .preview-zone.mobile-preview .site-header.tmpl-centered .site-nav, .preview-zone.mobile-preview .site-header.tmpl-stacked .site-nav { display: none !important; }
.preview-zone.mobile-preview .site-header::after { content: none !important; display: none !important; }
.preview-zone.mobile-preview .site-section, .preview-zone.mobile-preview .site-hero, .preview-zone.mobile-preview .site-footer { padding-left: 22px !important; padding-right: 22px !important; }
.preview-zone.mobile-preview .site-section { padding-top: 44px !important; padding-bottom: 44px !important; }
.preview-zone.mobile-preview .site-hero { min-height: 0px !important; padding-top: 40px !important; padding-bottom: 40px !important; }
.preview-zone.mobile-preview .site-section h2, .preview-zone.mobile-preview .site-hero h2, .preview-zone.mobile-preview .hero-copy-block h2, .preview-zone.mobile-preview .split-copy h2, .preview-zone.mobile-preview .article-section h2 { word-break: break-word; font-size: 28px !important; line-height: 1.18 !important; letter-spacing: 0px !important; margin: 0px 0px 14px !important; max-width: 100% !important; }
.preview-zone.mobile-preview .site-section p, .preview-zone.mobile-preview .hero-copy-block p, .preview-zone.mobile-preview .split-copy p, .preview-zone.mobile-preview .site-hero p { font-size: 15px !important; line-height: 1.65 !important; max-width: 100% !important; }
.preview-zone.mobile-preview .hero-kicker { font-size: 12px !important; letter-spacing: 0.2em !important; margin-bottom: 12px !important; }
.preview-zone.mobile-preview .site-btn { min-height: 44px !important; font-size: 14px !important; padding: 0px 18px !important; margin: 14px 8px 0px 0px !important; }
.preview-zone.mobile-preview .hero-layout, .preview-zone.mobile-preview .site-hero.has-side-image .hero-layout, .preview-zone.mobile-preview .site-hero.image-left .hero-layout, .preview-zone.mobile-preview .split, .preview-zone.mobile-preview .contact-wrap { display: flex !important; flex-direction: column !important; gap: 22px !important; width: 100% !important; max-width: 100% !important; }
.preview-zone.mobile-preview .split.is-reversed .split-media, .preview-zone.mobile-preview .split.is-reversed .split-copy, .preview-zone.mobile-preview .site-hero.image-left .hero-side-media { order: initial !important; }
.preview-zone.mobile-preview .hero-copy-block, .preview-zone.mobile-preview .split-copy { width: 100% !important; max-width: 100% !important; padding: 0px !important; }
.preview-zone.mobile-preview .split-media { background-size: cover; background-position: center center; width: 100% !important; min-height: 0px !important; aspect-ratio: 3 / 2 !important; }
.preview-zone.mobile-preview .split-media::after { display: none !important; }
.preview-zone.mobile-preview .hero-side-media { width: 100% !important; margin: 0px !important; }
.preview-zone.mobile-preview .hero-side-media img { aspect-ratio: 3 / 2 !important; width: 100% !important; }
.preview-zone.mobile-preview .team-grid, .preview-zone.mobile-preview .gallery-grid, .preview-zone.mobile-preview .video-grid, .preview-zone.mobile-preview .blog-grid, .preview-zone.mobile-preview .social-grid { grid-template-columns: repeat(var(--cols-mobile, 1), minmax(0, 1fr)) !important; gap: 14px !important; }
.preview-zone.mobile-preview .infocard-grid { grid-template-columns: repeat(var(--cols-mobile, 1), minmax(0, 1fr)) !important; gap: var(--card-gap, 14px) !important; }
.site-frame[data-site-width] { --site-pad-x-target: calc(var(--site-width-px, 220px)); }
.width-control { display: flex; align-items: center; gap: 6px; padding: 0px 10px; border-left: 1px solid rgb(226, 232, 240); margin-left: 4px; font-size: 11px; color: rgb(100, 116, 139); }
.width-control input[type="range"] { width: 90px; accent-color: rgb(37, 99, 235); }
.width-control span { font-weight: 600; color: rgb(37, 99, 235); min-width: 36px; text-align: right; }
.social-letter { font-weight: 800; font-size: 18px; }
.infocard-section .infocard-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--card-gap, 22px); margin-top: 32px; align-items: start; }
.infocard-section .infocard { position: relative; border: 1px solid var(--line); border-radius: 14px; background: rgb(255, 255, 255); padding: 26px 24px 22px; display: grid; gap: 10px; box-shadow: rgba(15, 23, 42, 0.28) 0px 14px 32px -24px; transition: transform 0.2s, box-shadow 0.2s; text-align: inherit; }
.infocard-section .infocard:hover { transform: translateY(-2px); box-shadow: rgba(15, 23, 42, 0.32) 0px 22px 44px -24px; }
.infocard-section .infocard-icon { position: relative; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 14px; background: transparent; color: rgb(15, 23, 42); margin-bottom: 6px; overflow: hidden; align-self: start; flex-shrink: 0; }
.infocard-section .infocard-icon svg { width: 60%; height: 60%; }
.infocard-section .infocard-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.infocard-section .infocard-icon-emoji { line-height: 1; display: inline-block; transition: transform 0.25s; transform-origin: center center; }
.infocard-section .infocard-icon:not(.infocard-icon-image) { overflow: visible; }
.infocard-section .infocard:hover .infocard-icon-emoji, .infocard-section .infocard-icon:hover .infocard-icon-emoji { transform: scale(1.15); }
.infocard-section .infocard-icon svg { transition: transform 0.25s; transform-origin: center center; }
.infocard-section .infocard:hover .infocard-icon svg { transform: scale(1.15); }
.infocard-section .infocard.card-image { padding: 0px; overflow: hidden; }
.infocard-section .infocard.card-image > strong, .infocard-section .infocard.card-image > p { padding-left: 20px; padding-right: 20px; }
.infocard-section .infocard.card-image > strong { padding-top: 16px; }
.infocard-section .infocard.card-image > p { padding-bottom: 20px; }
.infocard-section .infocard-media { position: relative; display: block; max-width: 100%; height: auto; border-radius: 0px; overflow: hidden; background: transparent; margin: 0px auto; align-self: start; flex-shrink: 0; }
.infocard-section .infocard.card-image.no-border { padding: 0px; }
.infocard-section .infocard.card-image.no-border .infocard-media { border-radius: 12px; }
.infocard-section .infocard.card-image.no-border > strong, .infocard-section .infocard.card-image.no-border > p { padding-left: 4px; padding-right: 4px; }
.infocard-section .infocard-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.infocard-section .infocard-media-placeholder { position: absolute; inset: 0px; display: grid; place-items: center; color: rgb(107, 122, 144); font-size: 13px; text-align: center; padding: 12px; }
.infocard-section .infocard.no-icon .infocard-icon { display: none; }
.infocard-section .infocard.no-border { border: 0px; background: transparent; box-shadow: none; padding: 8px 4px; }
.infocard-section .infocard.no-border:hover { transform: none; box-shadow: none; }
.infocard-section .infocard-icon.infocard-icon-image { border-radius: 0px; background: transparent; overflow: visible; }
.infocard-section .infocard-icon.infocard-icon-image img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: inherit; }
.infocard-section .infocard-icon-replace { position: absolute; inset: auto 0px 0px; background: rgba(15, 23, 42, 0.82); color: rgb(255, 255, 255); border: 0px; font-size: 11px; padding: 3px 0px; cursor: pointer; opacity: 0; transition: opacity 0.15s; }
.infocard-section .infocard:hover .infocard-icon-replace { opacity: 1; }
.infocard-section .infocard strong { display: block; color: var(--section-title-color, #0f172a); font-size: calc(18px * var(--heading-scale)); font-weight: 700; line-height: 1.35; }
.infocard-section .infocard p { margin: 4px 0px 0px; font-size: calc(15px * var(--body-scale)); line-height: 1.7; color: var(--section-text-color,#334155); }
.social-section.align-center .social-grid, .infocard-section.align-center .infocard-grid { justify-items: center; }
.social-section.align-center .social-card, .infocard-section.align-center .infocard { text-align: center; }
.infocard-section.align-center .infocard-icon { margin-left: auto; margin-right: auto; }
.social-section.align-right .social-card, .infocard-section.align-right .infocard { text-align: right; }
.infocard-section.align-right .infocard-icon { margin-left: auto; }
.preview-zone.mobile-preview .site-section { padding-left: var(--site-pad-x); padding-right: var(--site-pad-x); }
.preview-zone.mobile-preview .social-section .social-grid, .preview-zone.mobile-preview .infocard-section .infocard-grid { gap: 14px; grid-template-columns: 1fr !important; }
.preview-zone.mobile-preview .hero-copy-block h2, .preview-zone.mobile-preview .site-section h2 { word-break: break-word; }
.preview-zone.mobile-preview .site-header { flex-wrap: nowrap; justify-content: space-between; align-items: center; display: flex !important; }
.preview-zone.mobile-preview .site-header .site-logo, .preview-zone.mobile-preview .site-header .site-logo-wrap { font-size: 16px; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-zone.mobile-preview .hero-copy-block p, .preview-zone.mobile-preview .split-copy p { max-width: 100%; }
.preview-zone.mobile-preview .site-actions { justify-content: flex-start; }
.preview-zone.mobile-preview .site-btn { min-height: 42px; padding: 0px 16px; font-size: 14px; }
@media (max-width: 760px) {
  .social-section .social-grid, .infocard-section .infocard-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  body[data-page="editor"] .topnav { display: grid; grid-template-columns: minmax(0px, 1fr); align-items: stretch; gap: 10px; min-height: 0px; padding: 10px 14px; }
  body[data-page="editor"] .brand { max-width: 100%; min-width: 0px; }
  body[data-page="editor"] .nav-actions { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 6px; padding: 6px; overflow: visible; }
  body[data-page="editor"] .nav-actions .btn, body[data-page="editor"] .nav-actions .btn.icon { width: auto; min-width: 0px; padding: 0px 6px; font-size: 11px; white-space: nowrap; }
  body[data-page="editor"] .width-control { grid-column: span 2; min-width: 0px; margin: 0px; border-left: 0px; justify-content: center; padding: 0px 6px; }
  body[data-page="editor"] .width-control input[type="range"] { width: min(112px, 30vw); }
  body[data-page="editor"] .editor-layout { height: calc(100dvh - 122px); grid-template-rows: minmax(0px, 1fr); overflow: hidden; grid-template-columns: 1fr !important; }
  body[data-page="editor"] .editor-layout.mobile-preview-focus .left-panel, body[data-page="editor"] .editor-layout.mobile-preview-focus .right-panel, body[data-page="editor"] .editor-layout.mobile-preview-focus .panel-peek { display: none !important; }
  body[data-page="editor"] .editor-layout.mobile-preview-focus .preview-zone { min-height: 0px; height: 100%; grid-row: 1; display: flex !important; padding: 10px 0px 22px !important; }
  body[data-page="editor"] .preview-zone.mobile-preview .canvas-scale { width: min(-20px + 100vw, 410px); padding: 50px 8px 24px; border-radius: 38px; }
  body[data-page="editor"] .preview-zone.mobile-preview .site-frame { min-height: 0px; max-height: none; border-radius: 28px; width: min(-40px + 100vw, 390px) !important; }
  body[data-page="editor"] .preview-zone.mobile-preview .canvas-controls, body[data-page="editor"] .preview-zone.mobile-preview .canvas-add-item, body[data-page="editor"] .preview-zone.mobile-preview .image-replace-btn, body[data-page="editor"] .preview-zone.mobile-preview .item-controls { display: none !important; }
}
@media (max-width: 760px) {
  body[data-page="preview"] .site-frame, .site-frame[data-preview-mode="mobile"] { width: 100% !important; --site-pad-x: 22px !important; --site-pad-y: 48px !important; --section-title-size: 28px !important; --split-width: 100% !important; --split-media-height: 230px !important; }
  body[data-page="preview"] .site-header, .site-frame[data-preview-mode="mobile"] .site-header { display: flex !important; flex-flow: row !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; min-height: 56px !important; padding: 12px 18px !important; }
  body[data-page="preview"] .site-nav, body[data-page="preview"] .site-header.tmpl-pill .site-nav, body[data-page="preview"] .site-header.tmpl-centered .site-nav, body[data-page="preview"] .site-header.tmpl-stacked .site-nav, .site-frame[data-preview-mode="mobile"] .site-nav, .site-frame[data-preview-mode="mobile"] .site-header.tmpl-pill .site-nav, .site-frame[data-preview-mode="mobile"] .site-header.tmpl-centered .site-nav, .site-frame[data-preview-mode="mobile"] .site-header.tmpl-stacked .site-nav { display: none !important; }
  body[data-page="preview"] .site-header::after, .site-frame[data-preview-mode="mobile"] .site-header::after { content: none !important; display: none !important; }
  body[data-page="preview"] .site-section, body[data-page="preview"] .site-hero, body[data-page="preview"] .site-footer, .site-frame[data-preview-mode="mobile"] .site-section, .site-frame[data-preview-mode="mobile"] .site-hero, .site-frame[data-preview-mode="mobile"] .site-footer { padding-left: 22px !important; padding-right: 22px !important; }
  body[data-page="preview"] .site-section h2, body[data-page="preview"] .site-hero h2, body[data-page="preview"] .hero-copy-block h2, body[data-page="preview"] .split-copy h2, body[data-page="preview"] .article-section h2, .site-frame[data-preview-mode="mobile"] .site-section h2, .site-frame[data-preview-mode="mobile"] .site-hero h2, .site-frame[data-preview-mode="mobile"] .hero-copy-block h2, .site-frame[data-preview-mode="mobile"] .split-copy h2, .site-frame[data-preview-mode="mobile"] .article-section h2 { word-break: break-word; font-size: 28px !important; line-height: 1.18 !important; letter-spacing: 0px !important; max-width: 100% !important; }
  body[data-page="preview"] .hero-layout, body[data-page="preview"] .site-hero.has-side-image .hero-layout, body[data-page="preview"] .site-hero.image-left .hero-layout, body[data-page="preview"] .split, body[data-page="preview"] .contact-wrap, .site-frame[data-preview-mode="mobile"] .hero-layout, .site-frame[data-preview-mode="mobile"] .site-hero.has-side-image .hero-layout, .site-frame[data-preview-mode="mobile"] .site-hero.image-left .hero-layout, .site-frame[data-preview-mode="mobile"] .split, .site-frame[data-preview-mode="mobile"] .contact-wrap { display: flex !important; flex-direction: column !important; gap: 22px !important; width: 100% !important; max-width: 100% !important; }
  body[data-page="preview"] .split-media, .site-frame[data-preview-mode="mobile"] .split-media { width: 100% !important; min-height: 0px !important; aspect-ratio: var(--image-ratio, 3 / 2) !important; }
  body[data-page="preview"] .split-media.split-media-auto, .site-frame[data-preview-mode="mobile"] .split-media.split-media-auto { aspect-ratio: auto !important; }
  body[data-page="preview"] .team-grid, body[data-page="preview"] .gallery-grid, body[data-page="preview"] .video-grid, body[data-page="preview"] .blog-grid, body[data-page="preview"] .infocard-grid, .site-frame[data-preview-mode="mobile"] .team-grid, .site-frame[data-preview-mode="mobile"] .gallery-grid, .site-frame[data-preview-mode="mobile"] .video-grid, .site-frame[data-preview-mode="mobile"] .blog-grid, .site-frame[data-preview-mode="mobile"] .infocard-grid { grid-template-columns: repeat(var(--cols-mobile, 1), minmax(0, 1fr)) !important; gap: 14px !important; }
}
.video-card-media { position: relative; }
.video-card-media > .image-replace-btn { top: 10px; left: 10px; z-index: 3; }
.video-card-media > .video-link-btn { background: rgb(17, 24, 39); color: rgb(255, 255, 255); }
.video-rows { display: grid; gap: 10px; margin-bottom: 10px; }
.video-row { border: 1px solid var(--line, #dbe7f3); border-radius: 8px; padding: 10px; background: rgb(250, 251, 253); display: grid; gap: 6px; }
.video-row-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: rgb(100, 116, 139); font-weight: 600; }
.video-row .input { font-size: 13px; }
.is-drop-target { outline-offset: -3px; background-color: rgba(37, 99, 235, 0.08); outline: rgb(37, 99, 235) dashed 3px !important; }
.image-replace-btn.is-loading { opacity: 0.7; pointer-events: none; }
.image-replace-btn.is-loading::after { content: " …"; }
.split-media-auto { aspect-ratio: auto !important; min-height: 0px !important; background: none !important; }
.split-media-auto > img { width: 100%; height: auto; display: block; border-radius: var(--image-radius, 8px); object-fit: contain; }
.save-status { display: inline-flex; align-items: center; font-size: 13px; color: rgb(100, 116, 139); padding: 0px 10px; white-space: nowrap; min-width: 70px; }
.left-panel { overflow: hidden auto; }
.left-panel .component-list, .left-tab-panel[data-left-tab-panel="components"] .component-area .component-list, .left-tab-panel[data-left-tab-panel="components"] .preset-list { overflow: visible !important; max-height: none !important; min-height: 0px !important; flex: 0 0 auto !important; }
.left-tab-panel[data-left-tab-panel="components"] .component-area { flex: 0 0 auto !important; min-height: 0px !important; }
.left-tab-panel[data-left-tab-panel="components"].active, .left-tab-panel[data-left-tab-panel="pages"].active { flex: 0 0 auto !important; overflow: visible !important; }
.component-list .component-item { min-width: 0px; }
.component-top strong { min-width: 0px; overflow-wrap: anywhere; }
.left-panel { width: var(--left-panel-w); }
.panel-peek-left { left: calc(var(--left-panel-w) - 12px); }
.component-add-card { cursor: grab; }
.component-add-card:active { cursor: grabbing; }
.component-add-card.is-dragging { opacity: 0.5; }
.preview-zone.is-drop-target { outline: rgb(37, 99, 235) dashed 3px; outline-offset: -10px; background: rgba(37, 99, 235, 0.04); }
.site-frame.is-drop-target { outline: rgb(37, 99, 235) dashed 3px; outline-offset: -6px; }
@media (max-width: 760px) {
  body[data-page="preview"] .site-header { position: relative; }
  body[data-page="preview"] .site-nav { display: none !important; }
  body[data-page="preview"] .sb-mnav-btn { display: inline-flex; }
  body[data-page="preview"] .sb-mnav-toggle:checked ~ .site-nav { flex-direction: column; align-items: stretch; gap: 0px; position: absolute; top: 100%; left: 0px; right: 0px; width: 100%; margin: 0px; background: rgb(255, 255, 255); padding: 18px 24px; border-width: 1px 0px 0px; border-style: solid none none; border-color: rgb(237, 242, 247) currentcolor currentcolor; border-image: none; box-shadow: none; z-index: 30; overflow: visible; display: flex !important; border-radius: 0px !important; }
  body[data-page="preview"] .site-hero { min-height: auto; padding-top: 56px; padding-bottom: 56px; }
  body[data-page="preview"] .hero-copy-block h2, body[data-page="preview"] .site-hero h2 { font-size: calc(38px * var(--heading-scale)) !important; line-height: 1.05; }
  body[data-page="preview"] .hero-layout, body[data-page="preview"] .site-hero.has-side-image .hero-layout, body[data-page="preview"] .site-hero.image-left .hero-layout { gap: 28px; grid-template-columns: 1fr !important; }
}
.preview-zone.mobile-preview .sb-mnav-toggle:checked ~ .site-nav, .preview-zone.mobile-preview .site-header.tmpl-pill .sb-mnav-toggle:checked ~ .site-nav, .preview-zone.mobile-preview .site-header.tmpl-centered .sb-mnav-toggle:checked ~ .site-nav, .preview-zone.mobile-preview .site-header.tmpl-stacked .sb-mnav-toggle:checked ~ .site-nav, .preview-zone.mobile-preview .site-header.tmpl-right .sb-mnav-toggle:checked ~ .site-nav, body[data-page="preview"] .sb-mnav-toggle:checked ~ .site-nav, body[data-page="preview"] .site-header.tmpl-pill .sb-mnav-toggle:checked ~ .site-nav, body[data-page="preview"] .site-header.tmpl-centered .sb-mnav-toggle:checked ~ .site-nav, body[data-page="preview"] .site-header.tmpl-stacked .sb-mnav-toggle:checked ~ .site-nav, body[data-page="preview"] .site-header.tmpl-right .sb-mnav-toggle:checked ~ .site-nav { left: 0px !important; right: 0px !important; width: 100% !important; margin: 0px !important; padding: 18px 24px !important; background: rgb(255, 255, 255) !important; border-width: 1px 0px 0px !important; border-style: solid none none !important; border-color: rgb(237, 242, 247) currentcolor currentcolor !important; border-image: none !important; border-radius: 0px !important; box-shadow: none !important; overflow: visible !important; }
.site-section img, .site-section .site-btn, .site-section a:not(.site-btn), .site-nav a { transition: transform 0.25s, box-shadow 0.25s, opacity 0.2s, color 0.2s, background-color 0.2s, filter 0.25s; will-change: transform; }
.site-section img { transform-origin: center center; }
.site-section .media-wrap > img:hover, .site-section .article-media > img:hover, .site-section .blog-card img:hover, .site-section figure img:hover, .site-section img.site-img:hover { transform: scale(1.03); filter: brightness(1.03); }
.site-section .site-btn:hover { transform: translateY(-2px); box-shadow: none; }
.site-section .site-btn:active { transform: translateY(0px); }
.site-section a:not(.site-btn):hover { opacity: 0.8; transform: translateY(-1px); }
.site-nav a:hover { transform: translateY(-1px); }
body[data-page="preview"] .site-section img:hover { transform: scale(1.04); }
.site-section .split-media, .site-section .hero-side-media, .site-section .single-media, .site-section .gallery-item, .site-section .person, .site-section .blog-card, .site-section .video-card { transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.28s; will-change: transform; }
.site-section .split-media { overflow: hidden; transform-origin: left center; }
.site-section .split.is-reversed .split-media { transform-origin: right center; }
.site-section .hero-side-media { transform-origin: center center; }
.site-section .split-media:hover { transform: scale(1.035); filter: brightness(1.04); box-shadow: none; }
.site-section .hero-side-media { overflow: visible; }
.site-section .hero-side-media:hover img { transform: scale(1.035); filter: brightness(1.04); }
.site-section .person, .site-section .blog-card, .site-section .video-card, .site-section .gallery-item { transform-origin: center center; }
.site-section .person:hover, .site-section .blog-card:hover, .site-section .video-card:hover, .site-section .gallery-item:hover { transform: scale(1.04); box-shadow: none; }
.site-section .brand, body[data-page="preview"] .brand, .preview-frame .brand { transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.25s; transform-origin: center center; will-change: transform; }
.site-section .brand:hover, body[data-page="preview"] .brand:hover, .preview-frame .brand:hover { transform: scale(1.06); filter: brightness(1.05); }
.site-section .media-wrap > img:hover, .site-section .media-wrap:hover > img, .site-section .article-media > img:hover, .site-section .article-media:hover > img, .site-section .blog-card img:hover, .site-section .blog-card:hover img, .site-section figure img:hover, .site-section figure:hover img, .site-section img.site-img:hover, body[data-page="preview"] .site-section img:hover { transform: scale(1.08); filter: brightness(1.05); }
.site-section .site-btn:hover { transform: translateY(-3px) scale(1.03); box-shadow: none; filter: brightness(1.05); }
.site-section .faq-card, .site-section .faq-item, .site-section .faq-collapsible { transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.25s, background-color 0.25s; will-change: transform; }
.site-section .faq-card:hover, .site-section .faq-item:hover, .site-section .faq-collapsible:hover { transform: scale(1.035); box-shadow: none; border-color: rgba(37, 99, 235, 0.45); background-color: rgb(251, 253, 255); }
.site-section .faq-collapsible summary { transition: color 0.2s; }
.site-section .faq-collapsible[open] > summary, .site-section .faq-collapsible summary:hover { color: rgb(37, 99, 235); }
.site-section .gallery-grid > .gallery-item, .site-section figure.gallery-item { margin: 0px; }
.site-section .gallery-grid { gap: 24px; }
.site-section.social-section .social-grid { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 18px; margin-top: 24px; }
@media (max-width: 720px) {
  .site-section.social-section .social-grid { grid-template-columns: repeat(var(--cols-mobile, 2), minmax(0, 1fr)); }
}
.site-section .social-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: transparent; border: 0px; border-radius: 14px; text-decoration: none; color: rgb(15, 23, 42); transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.25s; position: relative; overflow: hidden; min-width: 0px; }
.site-section .social-card::before { content: ""; position: absolute; inset: 0px; background: var(--social-color, currentColor); opacity: 0; transition: opacity 0.25s; pointer-events: none; border-radius: inherit; }
.site-section .social-card:hover { transform: translateY(-2px); background: color-mix(in oklab, var(--social-color, #0f172a) 6%, white); }
.site-section .social-card-icon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in oklab, var(--social-color, #111827) 12%, white); color: var(--social-color, #111827); transition: transform 0.25s, background 0.25s; }
.site-section .social-card-icon svg { width: 26px; height: 26px; display: block; }
.site-section .social-card:hover .social-card-icon { transform: scale(1.08) rotate(-3deg); background: var(--social-color, #111827); color: rgb(255, 255, 255); }
.site-section .social-card-meta { display: flex; flex-direction: column; min-width: 0px; flex: 1 1 auto; }
.site-section .social-card-name { font-weight: 650; font-size: 15px; color: rgb(15, 23, 42); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-section .social-card-count { font-size: 13px; color: rgb(100, 116, 139); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 720px) {
  .site-section .social-card { padding: 12px; gap: 10px; }
  .site-section .social-card-icon { width: 38px; height: 38px; border-radius: 10px; }
  .site-section .social-card-icon svg { width: 22px; height: 22px; }
  .site-section .social-card-name { font-size: 14px; }
  .site-section .social-card-count { font-size: 12px; }
}
.site-section .social-card-icon { position: relative; }
.site-section .social-card-icon.is-custom { background: rgba(15, 23, 42, 0.04); }
.site-section .social-card-icon.is-custom img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.social-icon-replace { position: absolute; right: -6px; bottom: -6px; width: 22px; height: 22px; border-radius: 999px; background: rgb(255, 255, 255); color: rgb(37, 99, 235); border: 1px solid rgb(203, 213, 225); box-shadow: rgba(15, 23, 42, 0.18) 0px 2px 6px; font-size: 11px; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity 0.15s, transform 0.15s; z-index: 3; }
.site-section .social-card:hover .social-icon-replace { opacity: 1; }
.social-icon-replace:hover { transform: scale(1.1); color: rgb(255, 255, 255); background: rgb(37, 99, 235); border-color: rgb(37, 99, 235); }
.social-icon-picker { position: fixed; z-index: 1000; width: 320px; max-height: 420px; background: rgb(255, 255, 255); border: 1px solid rgb(226, 232, 240); border-radius: 14px; box-shadow: rgba(15, 23, 42, 0.18) 0px 18px 50px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.social-icon-picker-head { display: flex; align-items: center; justify-content: space-between; }
.social-icon-picker-head strong { font-size: 14px; color: rgb(15, 23, 42); }
.social-icon-picker-close { width: 24px; height: 24px; border: 0px; background: transparent; font-size: 20px; line-height: 1; cursor: pointer; color: rgb(100, 116, 139); }
.social-icon-picker-grid { display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 8px; overflow-y: auto; max-height: 300px; padding: 2px; }
.social-icon-picker-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border: 1px solid rgb(226, 232, 240); background: rgb(255, 255, 255); border-radius: 10px; cursor: pointer; font-size: 11px; color: rgb(71, 85, 105); transition: transform 0.15s, border-color 0.15s, background 0.15s; }
.social-icon-picker-item:hover { transform: translateY(-2px); border-color: var(--social-color, #2563eb); background: color-mix(in oklab, var(--social-color, #2563eb) 8%, white); }
.social-icon-picker-svg { width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--social-color, #111827); background: color-mix(in oklab, var(--social-color, #111827) 12%, white); }
.social-icon-picker-svg svg { width: 20px; height: 20px; }
.social-icon-picker-foot { display: flex; justify-content: flex-end; }
.social-section .social-grid { margin-top: 24px; display: grid !important; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)) !important; gap: 18px !important; }
@media (max-width: 720px) {
  .social-section .social-grid { grid-template-columns: repeat(var(--cols-mobile, 2), minmax(0, 1fr)) !important; }
}
.preview-zone.mobile-preview .social-section .social-grid, .site-frame[data-preview-mode="mobile"] .social-section .social-grid { grid-template-columns: repeat(var(--cols-mobile, 2), minmax(0, 1fr)) !important; }
.social-section .social-card { min-width: 0px; display: flex !important; align-items: center !important; gap: 14px !important; padding: 14px 16px !important; background: transparent !important; border: 0px !important; border-radius: 14px !important; text-decoration: none !important; color: rgb(15, 23, 42) !important; box-shadow: none !important; }
.social-section .social-card:hover { background: color-mix(in oklab, var(--social-color, #0f172a) 6%, white) !important; }
.social-section .social-card-icon { background: color-mix(in oklab, var(--social-color, #111827) 12%, white); color: var(--social-color, #111827); overflow: hidden; flex: 0 0 auto !important; width: 44px !important; height: 44px !important; border-radius: 12px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
.social-section .social-card-icon svg { display: block; width: 26px !important; height: 26px !important; }
.social-section .social-card-meta { min-width: 0px; flex: 1 1 auto; display: flex !important; flex-direction: column !important; }
.social-section .social-card-name { font-weight: 650; font-size: 15px; color: rgb(15, 23, 42); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.social-section .social-card-count { font-size: 13px; color: rgb(100, 116, 139); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.social-card-icon[data-platform="xiaohongshu"] { overflow: hidden; background: transparent !important; padding: 0px !important; }
.social-card-icon[data-platform="xiaohongshu"] svg { width: 100% !important; height: 100% !important; }
.social-card-icon[data-platform="xiaohongshu"] svg rect { fill: rgb(255, 36, 66) !important; }
.social-card-icon[data-platform="xiaohongshu"] svg text { fill: rgb(255, 255, 255) !important; }
.social-edit-list { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.social-edit-row { border: 1px solid rgb(226, 232, 240); border-radius: 12px; padding: 10px; background: rgb(248, 250, 252); display: flex; flex-direction: column; gap: 8px; }
.social-edit-head { display: flex; align-items: center; gap: 8px; }
.social-edit-icon { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in oklab, var(--social-color, #111827) 12%, white); color: var(--social-color, #111827); overflow: hidden; }
.social-edit-icon svg { width: 20px; height: 20px; }
.social-edit-icon[data-platform="xiaohongshu"] svg { width: 100%; height: 100%; }
.social-edit-platform { flex: 1 1 auto; min-width: 0px; }
.social-edit-del { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; color: rgb(148, 163, 184); font-size: 14px; line-height: 1; }
.social-edit-del:hover { color: rgb(220, 38, 38); border-color: rgb(254, 202, 202); background: rgb(254, 242, 242); }
.social-edit-grid { display: grid; gap: 6px; }
.social-edit-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
body[data-page="editor"] .topnav { padding-left: 10px !important; }
body[data-page="editor"] .topnav .brand { order: -2; margin-left: 0px !important; }
body[data-page="editor"] .app-version { left: auto; right: 10px; top: -2px; font-size: 9px; padding: 1px 6px; background: transparent; color: rgb(203, 213, 225); }
@media (max-width: 760px) {
  body[data-page="editor"] { padding-top: 138px; }
  body[data-page="editor"] .topnav { background: rgba(255, 255, 255, 0.98); box-shadow: rgba(15, 23, 42, 0.08) 0px 4px 18px; overscroll-behavior: contain; position: fixed !important; top: 0px !important; left: 0px !important; right: 0px !important; z-index: 1000 !important; display: grid !important; grid-template-columns: auto minmax(0px, 1fr) !important; align-items: center !important; gap: 8px !important; min-height: 0px !important; height: auto !important; max-height: 138px !important; padding: 8px 10px !important; overflow: hidden !important; }
  body[data-page="editor"] .topnav .back-to-projects { order: -3; min-height: 34px; padding: 0px 10px; font-size: 12px; white-space: nowrap; width: auto !important; }
  body[data-page="editor"] .topnav .brand { order: -2; max-width: none; min-width: 0px; }
  body[data-page="editor"] .topnav .brand-mark { width: 30px; height: 30px; flex-basis: 30px; }
  body[data-page="editor"] .topnav .brand > span:not(.brand-mark) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body[data-page="editor"] .topnav .nav-actions { grid-column: 1 / -1; width: 100%; display: grid !important; grid-template-columns: repeat(4, minmax(0px, 1fr)) !important; gap: 5px !important; padding: 5px !important; overflow: hidden !important; }
  body[data-page="editor"] .topnav .nav-actions .btn, body[data-page="editor"] .topnav .nav-actions .btn.icon { min-height: 30px; width: auto; min-width: 0px; padding: 0px 5px; font-size: 10px; white-space: nowrap; }
  body[data-page="editor"] .topnav .width-control { grid-column: span 2; min-height: 30px; min-width: 0px; margin: 0px; padding: 0px 5px; border-left: 0px; }
  body[data-page="editor"] .topnav .width-control input[type="range"] { width: min(88px, 24vw); }
  body[data-page="editor"] .editor-layout { height: calc(100dvh - 138px) !important; min-height: calc(100dvh - 138px) !important; padding-top: 0px !important; overflow: hidden !important; }
}
@media (max-width: 760px) {
  body[data-page="preview"] .site-frame { overflow: visible !important; }
  body[data-page="preview"] .site-header, body[data-page="preview"] .site-header.is-sticky { position: fixed !important; top: 0px !important; left: 0px !important; right: 0px !important; z-index: 1000 !important; width: 100% !important; background: rgba(255, 255, 255, 0.98) !important; box-shadow: rgba(15, 23, 42, 0.08) 0px 8px 24px !important; }
  body[data-page="preview"] .site-header, body[data-page="preview"] .site-header.tmpl-centered, body[data-page="preview"] .site-header.tmpl-stacked, body[data-page="preview"] .site-header.tmpl-pill, .preview-zone.mobile-preview .site-header, .preview-zone.mobile-preview .site-header.tmpl-centered, .preview-zone.mobile-preview .site-header.tmpl-stacked, .preview-zone.mobile-preview .site-header.tmpl-pill, .site-frame[data-preview-mode="mobile"] .site-header, .site-frame[data-preview-mode="mobile"] .site-header.tmpl-centered, .site-frame[data-preview-mode="mobile"] .site-header.tmpl-stacked, .site-frame[data-preview-mode="mobile"] .site-header.tmpl-pill { flex-direction: row !important; justify-content: flex-start !important; align-items: center !important; text-align: left !important; }
  body[data-page="preview"] .site-logo, body[data-page="preview"] .site-logo-wrap, .preview-zone.mobile-preview .site-logo, .preview-zone.mobile-preview .site-logo-wrap, .site-frame[data-preview-mode="mobile"] .site-logo, .site-frame[data-preview-mode="mobile"] .site-logo-wrap { margin-left: 0px !important; margin-right: auto !important; justify-content: flex-start !important; text-align: left !important; }
  body[data-page="preview"] .site-header + div { padding-top: 56px; }
}
.site-frame .site-section h1, .site-frame .site-section h2, .site-frame .site-section h3, .site-frame .site-section h4, .site-frame .site-section h5, .site-frame .site-section h6, .site-frame .site-section p, .site-frame .site-section li, .site-frame .site-section small, .site-frame .site-section blockquote, .site-frame .site-header .site-logo, .site-frame .site-header .site-logo-wrap, .site-frame .site-nav a { transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), color 0.25s, letter-spacing 0.35s, text-shadow 0.35s; transform-origin: center center; will-change: transform; }
.site-frame .site-section h1, .site-frame .site-section h2, .site-frame .site-section h3, .site-frame .site-section h4, .site-frame .site-section h5, .site-frame .site-section h6, .site-frame .site-section p, .site-frame .site-section li, .site-frame .site-section small, .site-frame .site-section blockquote { transform-origin: center center; }
.site-frame .site-section h1:hover, .site-frame .site-section h2:hover, .site-frame .site-section h3:hover, .site-frame .site-section h4:hover, .site-frame .site-section h5:hover, .site-frame .site-section h6:hover, .site-frame .site-section p:hover, .site-frame .site-section li:hover, .site-frame .site-section small:hover, .site-frame .site-section blockquote:hover { transform: scale(1.03); transform-origin: center center; text-shadow: rgba(15, 23, 42, 0.08) 0px 6px 18px; }
.site-frame .site-nav a { position: relative; }
.site-frame .site-nav a::after { content: ""; position: absolute; left: 0px; right: 0px; bottom: -4px; height: 2px; background: currentcolor; transform: scaleX(0); transform-origin: right center; transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); opacity: 0.7; }
.site-frame .site-nav a:hover { transform: translateY(-1px); }
.site-frame .site-nav a:hover::after { transform: scaleX(1); transform-origin: left center; }
.site-frame .site-header .site-logo:hover { transform: scale(1.03); transform-origin: left center; }
.site-frame .site-header .site-logo-wrap:hover { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .site-frame .site-section h1, .site-frame .site-section h2, .site-frame .site-section h3, .site-frame .site-section h4, .site-frame .site-section h5, .site-frame .site-section h6, .site-frame .site-section p, .site-frame .site-section li, .site-frame .site-section small, .site-frame .site-section blockquote, .site-frame .site-nav a, .site-frame .site-header .site-logo, .site-frame .site-header .site-logo-wrap { transition: none !important; transform: none !important; }
}
.article-size-list { display: flex; flex-direction: column; gap: 10px; }
.article-size-row { display: flex; gap: 10px; padding: 8px; border: 1px solid rgb(226, 232, 240); border-radius: 8px; background: rgb(255, 255, 255); align-items: center; }
.article-size-thumb { width: 56px; height: 42px; background: center center / cover no-repeat rgb(241, 245, 249); border-radius: 6px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: rgb(100, 116, 139); font-size: 14px; }
.article-size-thumb-video { background: rgb(15, 23, 42); color: rgb(255, 255, 255); }
.article-size-row-body { flex: 1 1 0%; min-width: 0px; display: flex; flex-direction: column; gap: 6px; }
.article-size-row-title { font-size: 12px; color: rgb(71, 85, 105); }
.article-size-btns { display: flex; gap: 4px; flex-wrap: wrap; }
.article-size-btns .btn { min-height: 28px; padding: 0px 10px; font-size: 12px; }
.image-replace-icon-btn { align-items: center; justify-content: center; width: 26px !important; height: 26px !important; min-height: 26px !important; padding: 0px !important; border-radius: 999px !important; display: inline-flex !important; font-size: 12px !important; line-height: 1 !important; font-weight: 500 !important; background: rgba(255, 255, 255, 0.96) !important; border: 1px solid rgba(203, 213, 225, 0.9) !important; box-shadow: rgba(15, 23, 42, 0.12) 0px 3px 8px !important; }
.image-replace-icon-btn:hover { background: rgb(255, 255, 255) !important; border-color: rgb(37, 99, 235) !important; transform: translateY(-1px) scale(1.06) !important; }
.image-replace-btn.image-replace-icon-btn { top: 8px; left: 8px; right: auto !important; }
.image-replace-btn.image-replace-icon-btn.image-replace-url-btn { left: 38px !important; right: auto !important; }
.split-media > .image-replace-icon-btn { top: 10px; left: 10px; }
.split-media > .image-replace-icon-btn.image-replace-url-btn { left: 40px !important; right: auto !important; }
.hero-side-media > .image-replace-icon-btn { top: 10px; left: 10px; }
.hero-side-media > .image-replace-icon-btn.image-replace-url-btn { left: 40px !important; right: auto !important; }
.person > .image-replace-icon-btn.image-replace-url-btn, .blog-card > .image-replace-icon-btn.image-replace-url-btn, .gallery-item > .image-replace-icon-btn.image-replace-url-btn, .infocard-media > .image-replace-icon-btn.image-replace-url-btn { left: 38px !important; right: auto !important; }
.hero-inner > .image-replace-icon-btn { top: -40px; left: 0px; }
.hero-inner > .image-replace-icon-btn.image-replace-url-btn { left: 34px !important; right: auto !important; }
.image-replace-btn.image-replace-icon-btn.image-link-btn { left: 38px !important; right: auto !important; }
.split-media > .image-replace-icon-btn.image-link-btn, .hero-side-media > .image-replace-icon-btn.image-link-btn { left: 40px !important; right: auto !important; }
.person > .image-replace-icon-btn.image-link-btn, .blog-card > .image-replace-icon-btn.image-link-btn, .gallery-item > .image-replace-icon-btn.image-link-btn, .infocard-media > .image-replace-icon-btn.image-link-btn { left: 38px !important; right: auto !important; }
.site-section h1, .site-section h2, .site-section h3, .site-section h4, .site-section h5, .site-section h6, .site-section p, .site-section li, .site-section blockquote, .site-section .infocard strong, .site-section .person strong, .site-section .blog-card strong, .site-section .video-card strong, .site-section .faq-card strong, .site-section figcaption { transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), text-shadow 0.25s !important; transform-origin: 50% 50% !important; }
.site-section h1, .site-section h2, .site-section h3, .site-section h4, .site-section h5, .site-section h6, .site-section p, .site-section li, .site-section blockquote, .site-section figcaption { width: fit-content; max-width: 100%; }
.site-section [style*="text-align: center"] > h1, .site-section [style*="text-align: center"] > h2, .site-section [style*="text-align: center"] > h3, .site-section [style*="text-align: center"] > h4, .site-section [style*="text-align: center"] > h5, .site-section [style*="text-align: center"] > h6, .site-section [style*="text-align: center"] > p, .site-section .text-center > h1, .site-section .text-center > h2, .site-section .text-center > h3, .site-section .text-center > p, .site-section.align-center h1, .site-section.align-center h2, .site-section.align-center h3, .site-section.align-center h4, .site-section.align-center h5, .site-section.align-center h6, .site-section.align-center p, .site-section.align-center li, .site-section.align-center blockquote, .site-section.align-center figcaption, .site-section.align-right h1, .site-section.align-right h2, .site-section.align-right h3, .site-section.align-right h4, .site-section.align-right h5, .site-section.align-right h6, .site-section.align-right p, .site-hero h1, .site-hero h2, .site-hero p { margin-left: auto; margin-right: auto; }
.site-section.align-right h1, .site-section.align-right h2, .site-section.align-right h3, .site-section.align-right h4, .site-section.align-right h5, .site-section.align-right h6, .site-section.align-right p, .site-section.align-right li { margin-left: auto; margin-right: 0px; }
.site-section h1:hover, .site-section h2:hover, .site-section h3:hover, .site-section h4:hover, .site-section h5:hover, .site-section h6:hover { transform: scale(1.02) !important; text-shadow: rgba(15, 23, 42, 0.1) 0px 6px 18px; }
.site-section p:hover, .site-section li:hover, .site-section blockquote:hover, .site-section .infocard strong:hover, .site-section .person strong:hover, .site-section .blog-card strong:hover, .site-section .video-card strong:hover, .site-section .faq-card strong:hover, .site-section figcaption:hover { transform: scale(1.015) !important; text-shadow: rgba(15, 23, 42, 0.08) 0px 4px 14px; }
.site-section p span, .site-section p a, .site-section p strong, .site-section p em { display: inline; }
.site-section .infocard-media { overflow: hidden; transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.28s; will-change: transform; transform-origin: center center; }
.site-section .infocard-media:hover { transform: scale(1.04); filter: brightness(1.03); }
.site-section .infocard-media img { transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); transform-origin: center center; }
.site-section .infocard-media:hover img { transform: scale(1.06); }
.site-section .article-media { transform-origin: center center; }
.site-section .article-media video, .site-section .article-media iframe { transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); transform-origin: center center; will-change: transform; }
.site-section .article-media:hover video, .site-section .article-media video:hover, .site-section .article-media:hover iframe, .site-section .article-media iframe:hover { transform: scale(1.04); filter: brightness(1.03); }
.site-logo-img { background: transparent !important; }
.link-dialog-backdrop { position: fixed; inset: 0px; z-index: 9999; background: rgba(15, 23, 42, 0.55); display: grid; place-items: center; padding: 24px; }
.link-dialog { background: rgb(255, 255, 255); border-radius: 14px; width: min(440px, 100%); box-shadow: rgba(0, 0, 0, 0.35) 0px 24px 60px -20px; overflow: hidden; }
.link-dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid rgb(238, 242, 247); }
.link-dialog-body { padding: 16px 18px 18px; display: grid; gap: 12px; }
.link-dialog-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.image-link-icon-btn { }
.preview-zone.mobile-preview .canvas-controls { top: 6px !important; left: auto !important; right: 6px !important; transform: none !important; max-width: calc(100% - 12px) !important; padding: 3px !important; gap: 2px !important; border-radius: 14px !important; justify-content: flex-end !important; flex-wrap: wrap !important; }
.preview-zone.mobile-preview .canvas-controls button { width: 22px !important; min-width: 22px !important; height: 22px !important; padding: 0px !important; font-size: 10px !important; border-radius: 7px !important; line-height: 1 !important; }
.preview-zone.mobile-preview .canvas-controls button[data-style-action="title-bold"], .preview-zone.mobile-preview .canvas-controls button[data-style-action="clear-colors"] { min-width: 30px !important; width: auto !important; padding: 0px 4px !important; font-size: 9px !important; }
.preview-zone.mobile-preview .canvas-controls .canvas-color-picker { min-width: 28px !important; width: auto !important; height: 22px !important; padding: 0px 4px !important; }
.preview-zone.mobile-preview .canvas-controls .canvas-color-picker span { font-size: 9px !important; }
.preview-zone.mobile-preview .canvas-control-divider { display: none !important; }
.preview-zone.mobile-preview .site-logo-img { width: var(--logo-size, 42px) !important; max-width: var(--logo-size, 42px) !important; max-height: var(--logo-size, 42px) !important; height: auto !important; }
.preview-zone.mobile-preview .site-header .site-logo, .preview-zone.mobile-preview .site-header .site-logo-wrap { max-width: none !important; overflow: visible !important; text-overflow: clip !important; white-space: normal !important; font-size: inherit !important; }
.preview-zone.mobile-preview .hero-copy-block h2, .preview-zone.mobile-preview .site-hero h2 { font-size: calc(38px * var(--heading-scale)) !important; line-height: 1.05 !important; margin: 0px 0px 14px !important; }
.preview-zone.mobile-preview .hero-side-media img { aspect-ratio: var(--image-ratio, 3 / 2) !important; height: auto !important; object-fit: cover !important; }
.preview-zone.mobile-preview .split-media { aspect-ratio: var(--image-ratio, 3 / 2) !important; }
.preview-zone.mobile-preview .split-media.split-media-auto { aspect-ratio: auto !important; }
.preview-zone.mobile-preview .canvas-scale, .preview-zone.mobile-preview .site-frame { width: 390px !important; max-width: 390px !important; }
.preview-zone.mobile-preview .site-section, .preview-zone.mobile-preview .site-hero, .preview-zone.mobile-preview .site-footer { padding-left: 22px !important; padding-right: 22px !important; }
body[data-page="editor"] .preview-zone.mobile-preview .canvas-scale, body[data-page="editor"] .preview-zone.mobile-preview .site-frame { width: 390px !important; max-width: 390px !important; }
body[data-page="editor"] .preview-zone.mobile-preview .canvas-scale { padding: 0px !important; border-radius: 0px !important; }
body[data-page="editor"] .preview-zone.mobile-preview .site-frame { border-radius: 0px !important; }
.pricing-section .pricing-list { display: flex; flex-direction: column; gap: 22px; margin-top: 32px; }
.pricing-section .pricing-group { position: relative; }
.pricing-section .pricing-group:hover > .item-controls { opacity: 1; pointer-events: auto; }
.pricing-section .pricing-group.is-dragging { opacity: 0.5; }
.pricing-section .pricing-group.is-drop-target { outline: rgb(37, 99, 235) dashed 2px; outline-offset: 4px; }
.pricing-section .pricing-card { background: rgb(255, 255, 255); border: 1px solid var(--line, #dbe7f3); border-radius: 18px; padding: 28px 32px; box-shadow: rgba(15, 23, 42, 0.22) 0px 12px 32px -24px; transition: box-shadow 0.25s, transform 0.25s; }
.pricing-section .pricing-card { transform-origin: center center; }
.pricing-section .pricing-card:hover { box-shadow: rgba(15, 23, 42, 0.28) 0px 18px 40px -22px; transform: scale(1.03); }
.pricing-section .pricing-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.pricing-section .pricing-num { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; background: color-mix(in srgb, var(--pricing-accent, #2563eb) 12%, #fff); color: var(--pricing-accent, #2563eb); font-weight: 700; font-size: 15px; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.pricing-section .pricing-group-title { margin: 0px; font-weight: 700; color: rgb(15, 23, 42); line-height: 1.2; font-size: calc(var(--section-body-size, 18px) * var(--body-scale, 1)) !important; }
.pricing-section .pricing-rows { display: flex; flex-direction: column; gap: 4px; }
.pricing-section .pricing-row { position: relative; display: grid; grid-template-columns: minmax(160px, 1.1fr) minmax(0px, 2fr) minmax(120px, auto); align-items: baseline; gap: 24px; padding: 12px 0px; border-top: 1px dashed color-mix(in srgb, var(--line, #dbe7f3) 80%, transparent); }
.pricing-section .pricing-rows .pricing-row:first-child { border-top: 0px; }
.pricing-section .pricing-name { font-weight: 600; color: rgb(15, 23, 42); font-size: calc(15px * var(--body-scale, 1)); letter-spacing: 0.01em; }
.pricing-section .pricing-desc { color: rgb(100, 116, 139); font-size: calc(15px * var(--body-scale, 1)); line-height: 1.55; }
.pricing-section .pricing-price { justify-self: end; text-align: right; color: var(--pricing-price, #1e3a8a); font-weight: 700; font-size: calc(16px * var(--body-scale, 1)); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pricing-section .pricing-row-del { position: absolute; top: 8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgb(229, 231, 235); background: rgb(255, 255, 255); color: rgb(148, 163, 184); cursor: pointer; font-size: 14px; line-height: 1; padding: 0px; opacity: 0; transition: opacity 0.15s; }
.pricing-section .pricing-row:hover .pricing-row-del { opacity: 1; }
.pricing-section .pricing-row { position: relative; }
.pricing-section .pricing-item-controls { position: absolute; top: -10px; right: 8px; opacity: 0; transition: opacity 0.15s; z-index: 3; }
.pricing-section .pricing-row:hover > .pricing-item-controls, .pricing-section .pricing-item-controls:hover { opacity: 1; pointer-events: auto; }
.pricing-section .pricing-add-inline { margin-top: 18px; display: flex; gap: 8px; justify-content: center; }
@media (max-width: 720px) {
  .pricing-section .pricing-card { padding: 22px 20px; }
  .pricing-section .pricing-head { gap: 12px; margin-bottom: 14px; }
  .pricing-section .pricing-num { width: 38px; height: 38px; font-size: 13px; }
  .pricing-section .pricing-group-title { font-size: calc(var(--section-body-size, 18px) * var(--body-scale, 1)) !important; }
  .pricing-section .pricing-row { grid-template-columns: 1fr auto; gap: 6px 16px; }
  .pricing-section .pricing-desc { grid-column: 1 / -1; order: 3; font-size: calc(13.5px * var(--body-scale, 1)); }
  .pricing-section .pricing-price { text-align: right; }
}
.canvas-controls { left: 50% !important; right: auto !important; transform: translateX(-50%) !important; justify-content: center !important; }
.site-hero:not(:hover) > .image-replace-btn, .site-hero:not(:hover) .hero-inner > .image-replace-btn, .site-hero .hero-side-media:not(:hover) > .image-replace-btn { opacity: 0 !important; pointer-events: none !important; }
.tip-section .tip-cta { display: flex; flex-direction: column; align-items: inherit; gap: 10px; margin-top: 18px; }
.tip-section .tip-btn { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; font-weight: 800; padding: 12px 26px; border-radius: 999px; text-decoration: none; }
.site-section.tip-section.align-center .tip-btn, .site-section.tip-section.align-center .tip-cta { align-self: center; }
.tip-section .tip-hint { font-size: 13px; color: rgb(180, 83, 9); }
.tip-section .tip-layout { display: flex; flex-direction: column; gap: 22px; width: min(900px, 100%); margin: 0px auto; }
.tip-section .tip-layout-split { flex-direction: row; align-items: stretch; gap: 32px; width: 100%; max-width: 1100px; }
.tip-section .tip-media { position: relative; flex: 0 0 42%; max-width: 460px; min-width: 0px; align-self: stretch; }
.tip-section .tip-media img { width: 100%; height: 100%; min-height: 260px; max-height: 480px; aspect-ratio: var(--image-ratio, 3 / 4); object-fit: cover; border-radius: var(--image-radius, 16px); display: block; }
.tip-section .tip-media-empty { width: 100%; height: 100%; min-height: 260px; border: 1px dashed rgb(203, 213, 225); border-radius: 16px; display: flex; align-items: center; justify-content: center; color: rgb(148, 163, 184); font-size: 13px; background: rgb(248, 250, 252); }
.tip-section .tip-copyboard { flex: 1 1 auto; min-width: 0px; display: flex; flex-direction: column; justify-content: center; }
.tip-section .tip-copyboard .tip-cta { margin-top: 18px; }
.tip-section .tip-leaderboard { width: 100%; margin-top: 22px; }
.tip-section .tip-total { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0px auto 56px; padding: 18px 36px; width: fit-content; min-width: 260px; border-radius: 16px; background: linear-gradient(rgb(239, 246, 255), rgb(224, 237, 255)); border: 1px solid rgb(199, 219, 255); box-shadow: rgba(30, 64, 175, 0.7) 0px 10px 26px -18px; text-align: center; }
.tip-section .tip-total-num { font-size: clamp(52px, 8vw, 86px); color: rgb(30, 58, 138); line-height: 1.05; font-variant-numeric: tabular-nums; display: inline-flex; align-items: baseline; gap: 0px; }
.tip-section .tip-total-cur { font-size: 0.38em; font-weight: 700; opacity: 0.9; }
.tip-section .tip-total-amt { font-family: Inter, Impact, "Arial Black", "Helvetica Neue", sans-serif; font-weight: 900; letter-spacing: -0.02em; }
.tip-section .tip-total-label { font-size: 22px; color: rgb(59, 94, 168); letter-spacing: 0.18em; text-transform: uppercase; font-weight: 800; }
.tip-section .tip-total-count { font-size: 15px; color: rgb(75, 108, 183); font-weight: 700; margin-top: 4px; }
.tip-section .tip-wall { margin: 0px auto; width: 100%; max-width: 980px; border: 1px solid rgb(226, 232, 240); border-radius: 12px; padding: 10px 12px; background: rgb(255, 255, 255); box-shadow: rgba(15, 23, 42, 0.6) 0px 12px 30px -26px; text-align: left; }
.tip-section .tip-layout-split .tip-wall { margin: 0px; max-width: none; width: 100%; }
.tip-section .tip-wall-title { font-size: 17px; letter-spacing: 0px; text-transform: none; color: rgb(15, 23, 42); margin-bottom: 10px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.tip-section .tip-wall-title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgb(37, 99, 235); }
.tip-section .tip-wall-title small { font-size: 12px; color: rgb(148, 163, 184); font-weight: 700; }
.tip-section .tip-list { list-style: none; margin: 0px; padding: 0px; width: 100%; }
.tip-section .tip-wall-title { width: 100%; margin-left: 0px; margin-right: 0px; }
.tip-section .tip-row { width: 100% !important; margin: 0px !important; max-width: none !important; }
.tip-section .tip-row > span { margin: 0px; max-width: none; }
.tip-section .tip-row .tip-row-no { height: 26px; flex: 0 0 auto; justify-self: start; width: 26px !important; }
.tip-section .tip-row.tip-head .tip-row-no { width: auto !important; height: auto; }
.tip-section .tip-row { display: grid; grid-template-columns: 56px 180px minmax(110px, 1fr) minmax(0px, 1.5fr) 150px; align-items: center; gap: 12px; padding: 10px 12px; border-bottom: 1px solid rgb(238, 242, 247); font-size: 14px; }
.tip-section .tip-wall-noamt .tip-row { grid-template-columns: 56px 180px minmax(110px, 1fr) minmax(0px, 1.5fr); }
.tip-section .tip-row:last-child { border-bottom: 0px; }
.tip-section .tip-row.tip-head { background: rgb(248, 250, 252); border-radius: 10px; border-bottom: 0px; font-size: 12.5px; color: rgb(148, 163, 184); font-weight: 700; }
.tip-section .tip-row.tip-head .tip-row-no { width: auto; height: auto; background: none; color: inherit; font-size: inherit; font-weight: 700; display: block; text-align: left; }
.tip-section .tip-row.tip-head .tip-row-name, .tip-section .tip-row.tip-head .tip-row-msg, .tip-section .tip-row.tip-head .tip-row-date, .tip-section .tip-row.tip-head .tip-row-amt { color: inherit; font-size: inherit; font-weight: 700; }
.tip-section .tip-row-no { width: 32px; height: 32px; border-radius: 50%; background: rgb(241, 245, 249); color: rgb(100, 116, 139); font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.tip-section .tip-rank-gold .tip-row-no { background: linear-gradient(rgb(253, 230, 138), rgb(251, 191, 36)); color: rgb(146, 64, 14); box-shadow: rgba(245, 158, 11, 0.35) 0px 4px 10px -2px; }
.tip-section .tip-rank-silver .tip-row-no { background: linear-gradient(rgb(226, 232, 240), rgb(203, 213, 225)); color: rgb(71, 85, 105); }
.tip-section .tip-rank-bronze .tip-row-no { background: linear-gradient(rgb(254, 215, 170), rgb(251, 146, 60)); color: rgb(154, 52, 18); }
.tip-section .tip-rank-gold .tip-row-name { font-weight: 800; color: rgb(180, 83, 9); }
.tip-section .tip-row-main { display: flex; flex-direction: column; gap: 0px; min-width: 0px; }
.tip-section .tip-row-name { font-weight: 700; color: rgb(15, 23, 42); line-height: 1.35; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tip-section .tip-top-badge { font-size: 10px; font-weight: 800; color: rgb(146, 64, 14); background: linear-gradient(rgb(253, 230, 138), rgb(251, 191, 36)); padding: 2px 8px; border-radius: 999px; letter-spacing: 0.02em; box-shadow: rgba(245, 158, 11, 0.25) 0px 2px 6px -1px; }
.tip-section .tip-row-msg { font-size: 13px; color: rgb(71, 85, 105); word-break: break-word; line-height: 1.35; }
.tip-section .tip-row-date { font-size: 12px; color: rgb(148, 163, 184); letter-spacing: 0.04em; line-height: 1.35; }
.tip-section .tip-date-short { display: none; }
.tip-section .tip-row-amt { font-variant-numeric: tabular-nums; color: rgb(29, 78, 216); font-weight: 800; white-space: nowrap; line-height: 1.35; text-align: right; }
.tip-section .tip-empty { display: block; color: rgb(148, 163, 184); text-align: center; padding: 8px 0px; }
@media (max-width: 768px) {
  .tip-section .tip-layout-split { flex-direction: column; gap: 22px; }
  .tip-section .tip-media { flex: 0 0 auto; max-width: 100%; width: 100%; }
  .tip-section .tip-media img { height: auto; min-height: 0px; max-height: 340px; aspect-ratio: var(--image-ratio, 3 / 2); }
  .tip-section .tip-media-empty { min-height: 180px; }
  .tip-section .tip-row { grid-template-columns: 28px 72px minmax(50px, 0.8fr) minmax(0px, 1.4fr) 68px; padding: 6px 0px; gap: 8px; font-size: 13px; }
  .tip-section .tip-wall-noamt .tip-row { grid-template-columns: 28px 72px minmax(50px, 0.8fr) minmax(0px, 1.4fr); }
  .tip-section .tip-date-long { display: none; }
  .tip-section .tip-date-short { display: inline; }
  .tip-section .tip-row-no { width: 22px; height: 22px; font-size: 10px; }
  .tip-section .tip-row-date { font-size: 11px; }
  .tip-section .tip-row-msg { font-size: 12px; word-break: break-word; }
  .tip-section .tip-wall { padding: 8px 10px; }
}
.tip-section .tip-name-btn { cursor: pointer; text-decoration: underline dotted rgba(0, 0, 0, 0.28); text-underline-offset: 3px; }
.tip-section .tip-head .tip-row-name { cursor: default; text-decoration: none; }
.tip-detail-overlay { position: fixed; inset: 0px; z-index: 99999; display: flex; align-items: center; justify-content: center; background: rgba(15, 23, 42, 0.5); padding: 20px; }
.tip-detail-box { width: min(420px, 100%); background: rgb(255, 255, 255); border-radius: 16px; padding: 20px 22px; box-shadow: rgba(15, 23, 42, 0.28) 0px 24px 60px; font-size: 14px; color: rgb(15, 23, 42); max-height: 80vh; overflow: auto; }
.tip-detail-box h4 { margin: 0px 0px 12px; font-size: 18px; }
.tip-detail-box p { margin: 0px 0px 12px; color: rgb(71, 85, 105); }
.tip-detail-row { display: flex; gap: 12px; justify-content: space-between; padding: 8px 0px; border-bottom: 1px solid rgb(238, 242, 247); }
.tip-detail-row span { color: rgb(100, 116, 139); white-space: nowrap; }
.tip-detail-row b { text-align: right; word-break: break-all; font-weight: 600; }
.tip-detail-close { margin-top: 16px; width: 100%; border: 0px; border-radius: 10px; padding: 10px 14px; background: rgb(15, 23, 42); color: rgb(255, 255, 255); font-size: 14px; cursor: pointer; }
@keyframes tipTotalFlash { 
  0%, 100% { opacity: 1; text-shadow: rgba(30, 58, 138, 0) 0px 0px 0px; }
  50% { opacity: 0.45; text-shadow: rgba(30, 58, 138, 0.45) 0px 0px 18px; }
}
.tip-section .tip-total-num.tip-total-flash { animation: 1.1s ease-in-out 0s infinite normal none running tipTotalFlash; }
@media (prefers-reduced-motion: reduce) {
  .tip-section .tip-total-num.tip-total-flash { animation: auto ease 0s 1 normal none running none; }
}
.tip-pass-input { width: 100%; box-sizing: border-box; border: 1px solid rgb(203, 213, 225); border-radius: 10px; padding: 10px 12px; font-size: 14px; margin-bottom: 12px; }
.tip-pass-err { color: rgb(220, 38, 38); font-size: 13px; margin-bottom: 8px; }
.tip-pass-ok { width: 100%; border: 0px; border-radius: 10px; padding: 10px 14px; background: rgb(29, 78, 216); color: rgb(255, 255, 255); font-size: 14px; cursor: pointer; }
.tip-detail-box .tip-pass-ok + .tip-detail-close { margin-top: 8px; background: rgb(100, 116, 139); }
.tip-locked { color: rgb(148, 163, 184); font-weight: 600; }
.tip-lock-ask { cursor: pointer; text-decoration: underline dotted; }
.tip-lock-ask:hover { color: rgb(71, 85, 105); }
:root { --ui-gap-1: 6px; --ui-gap-2: 10px; --ui-gap-3: 16px; --ui-radius: 8px; --ui-radius-card: 12px; --ui-control-h: 34px; --ui-icon-h: 28px; --ui-label: 12px; --ui-hint: 11px; --ui-title: 13px; --ui-border: #e2e8f0; --ui-surface: #ffffff; --ui-surface-2: #f8fafc; }
.panel .input, .panel .textarea, .panel select.input, .link-popover .input { border-radius: var(--ui-radius); border: 1px solid var(--ui-border); }
.panel .input:not([type="range"]):not([type="file"]):not(.color-input), .link-popover .input:not([type="file"]) { min-height: var(--ui-control-h); padding: 6px 10px; }
.panel .textarea { min-height: 84px; padding: 8px 10px; line-height: 1.6; }
.panel .btn, .link-popover .btn { min-height: var(--ui-control-h); border-radius: var(--ui-radius); padding: 0px 12px; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.panel .btn.icon, .link-popover .btn.icon { min-height: var(--ui-icon-h); height: var(--ui-icon-h); width: var(--ui-icon-h); padding: 0px; font-size: 13px; line-height: 1; }
.panel input[type="range"].input { min-height: 0px; padding: 0px; border: 0px; background: transparent; }
.panel input[type="file"].input { padding: 6px 8px; font-size: 12px; background: var(--ui-surface-2); }
.panel .color-input { padding: 2px; height: var(--ui-control-h); min-height: var(--ui-control-h); width: 100%; }
.panel .field { gap: var(--ui-gap-1); margin: 0px; }
.panel .field label { font-size: var(--ui-label); font-weight: 700; color: rgb(71, 85, 105); letter-spacing: 0.01em; }
.panel .field-hint, .panel .field-hint-inline { font-size: var(--ui-hint); line-height: 1.6; color: rgb(148, 163, 184); font-weight: 500; }
.panel .toggle-label { display: flex; align-items: center; gap: 8px; font-weight: 600; color: rgb(51, 65, 85); font-size: 12px; }
.panel .toggle-label input[type="checkbox"] { width: 15px; height: 15px; margin: 0px; accent-color: var(--blue); }
.panel-group { border: 1px solid var(--ui-border); border-radius: var(--ui-radius-card); background: var(--ui-surface); overflow: hidden; }
.panel-group + .panel-group { margin-top: var(--ui-gap-2); }
.panel-group-head { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; font-size: var(--ui-title); font-weight: 800; color: rgb(15, 23, 42); background: var(--ui-surface-2); user-select: none; }
.panel-group-head::-webkit-details-marker { display: none; }
.panel-group-head::before { content: "▸"; font-size: 10px; color: rgb(148, 163, 184); transition: transform 0.15s; margin-right: 2px; }
.panel-group[open] > .panel-group-head::before { transform: rotate(90deg); }
.panel-group-head > span { flex: 1 1 0%; }
.panel-group-head em { font-style: normal; font-size: 10px; font-weight: 700; color: rgb(148, 163, 184); background: rgb(238, 242, 247); border-radius: 999px; padding: 1px 7px; }
.panel-group-body { display: flex; flex-direction: column; gap: var(--ui-gap-2); padding: var(--ui-gap-3) 12px; }
.panel-group-body > .settings-card { margin: 0px; }
.panel .settings-card { border-radius: var(--ui-radius-card); border: 1px solid var(--ui-border); padding: var(--ui-gap-3); display: flex; flex-direction: column; gap: var(--ui-gap-2); background: var(--ui-surface); }
.panel .settings-card + .settings-card { margin-top: var(--ui-gap-2); }
.panel .settings-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0px; }
.panel .settings-head strong { font-size: var(--ui-title); font-weight: 800; }
.panel .settings-head span { font-size: var(--ui-hint); color: rgb(148, 163, 184); }
.panel .sidebar-title { font-size: var(--ui-title); font-weight: 800; color: rgb(15, 23, 42); letter-spacing: 0.01em; }
.left-panel, .right-panel { padding: var(--ui-gap-3) 12px; }
.field-list { display: flex; flex-direction: column; gap: var(--ui-gap-2); }
.topnav .btn { min-height: var(--ui-control-h); border-radius: var(--ui-radius); }
.topnav .btn:not(.primary):not(.icon) { background: transparent; border: 1px solid var(--ui-border); color: rgb(71, 85, 105); font-weight: 600; }
.topnav .btn:not(.primary):not(.icon):hover { background: var(--ui-surface-2); color: rgb(15, 23, 42); }
.topnav .btn.primary { font-weight: 800; }
.topnav .btn.icon { width: var(--ui-icon-h); height: var(--ui-icon-h); min-height: var(--ui-icon-h); padding: 0px; }
.nav-actions { gap: var(--ui-gap-2); }
.ui-mt-1 { margin-top: var(--ui-gap-1); }
.ui-row { display: flex; align-items: center; gap: var(--ui-gap-1); }
.ui-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ui-color-cell { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: rgb(100, 116, 139); }
.share-preview { margin-top: 8px; width: 100%; max-width: 260px; aspect-ratio: 1.91 / 1; background: center center / cover no-repeat rgb(241, 245, 249); border-radius: var(--ui-radius); border: 1px solid var(--ui-border); }
.favicon-preview { margin-top: 8px; display: flex; align-items: center; gap: 10px; }
.favicon-preview i { display: block; background: var(--ui-surface-2) center/contain no-repeat; border: 1px solid var(--ui-border); }
.favicon-preview i.s48 { width: 48px; height: 48px; border-radius: var(--ui-radius); }
.favicon-preview i.s24 { width: 24px; height: 24px; border-radius: 4px; }
.favicon-preview i.s16 { width: 16px; height: 16px; border-radius: 3px; }
.favicon-preview span { color: rgb(100, 116, 139); font-size: 12px; }
.panel .range-field > label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.panel .range-val { font-style: normal; font-size: 11px; font-weight: 800; color: rgb(29, 78, 216); background: rgb(238, 244, 255); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.panel .range-row { display: grid; grid-template-columns: minmax(0px, 1fr) 66px; align-items: center; gap: 8px; }
.panel .range-row input[type="range"] { width: 100%; }
.panel .range-num { min-height: var(--ui-control-h); padding: 4px 6px; text-align: center; font-size: 12px; font-weight: 700; }
.left-panel .sidebar-title, .left-panel .compact-title, .left-tab-panel .sidebar-title { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(148, 163, 184); line-height: 1.4; margin: 0px; }
.left-panel > .sidebar-title:first-child { font-size: var(--ui-title); letter-spacing: 0.01em; text-transform: none; color: rgb(15, 23, 42); }
.left-tabs { display: flex; gap: 4px; padding: 4px; border-radius: var(--ui-radius-card); background: var(--ui-surface-2); border: 1px solid var(--ui-border); box-shadow: none; }
.left-tab { flex: 1 1 0%; min-height: var(--ui-control-h); border: 0px; border-radius: var(--ui-radius); background: transparent; font-size: 12px; font-weight: 700; color: rgb(100, 116, 139); }
.left-tab:hover { color: rgb(15, 23, 42); }
.left-tab.active { background: var(--ui-surface); color: rgb(29, 78, 216); box-shadow: rgba(15, 23, 42, 0.08) 0px 1px 2px; }
.project-form.compact-form { display: grid; grid-template-columns: minmax(0, 1fr) var(--ui-control-h); gap: var(--ui-gap-1); align-items: center; padding: 0px; background: transparent; border: 0px; }
.project-form.compact-form .input { min-height: var(--ui-control-h); padding: 6px 10px; border-radius: var(--ui-radius); border: 1px solid var(--ui-border); }
.project-form.compact-form .btn { min-height: var(--ui-control-h); height: var(--ui-control-h); width: var(--ui-control-h); padding: 0px; border-radius: var(--ui-radius); font-size: 16px; }
.left-panel .component-hub { padding: var(--ui-gap-2); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-card); background: var(--ui-surface); display: flex; flex-direction: column; gap: var(--ui-gap-2); box-shadow: none; }
.left-panel .component-tools, .left-panel .component-tools.compact-add-tools { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: var(--ui-gap-1); }
.left-panel .component-tools .btn, .left-panel .component-tools .component-add-card { min-height: 60px; padding: 8px 4px; gap: 4px; border-radius: var(--ui-radius); border: 1px solid var(--ui-border); background: var(--ui-surface); color: rgb(51, 65, 85); box-shadow: none; transition: border-color 0.12s, background 0.12s; }
.left-panel .component-tools .btn:hover, .left-panel .component-tools .component-add-card:hover { border-color: rgb(191, 219, 254); background: rgb(245, 249, 255); color: rgb(29, 78, 216); }
.left-panel .component-tools .btn.primary, .left-panel .component-tools .component-add-card.primary { border-color: rgb(191, 219, 254); background: rgb(238, 244, 255); color: rgb(29, 78, 216); }
.left-panel .component-add-card span { font-size: 17px; line-height: 1; }
.left-panel .component-add-card b { font-size: 11px; font-weight: 700; line-height: 1.1; }
.left-panel .component-list { display: flex; flex-direction: column; gap: 4px; }
.left-panel .component-list .component-item, .left-panel .page-list .component-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; padding: 6px 8px; border-radius: var(--ui-radius); border: 1px solid transparent; background: var(--ui-surface-2); }
.left-panel .component-list .component-item:hover, .left-panel .page-list .component-item:hover { background: rgb(241, 245, 249); border-color: var(--ui-border); }
.left-panel .component-list .component-item.active, .left-panel .page-list .component-item.active { background: rgb(238, 244, 255); border-color: rgb(191, 219, 254); }
.left-panel .component-item .component-top { display: flex; align-items: baseline; gap: 6px; min-width: 0px; flex: 1 1 0%; }
.left-panel .component-item .component-top strong { font-size: 12px; font-weight: 700; color: rgb(15, 23, 42); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0px; }
.left-panel .component-item .component-top span { font-size: 10px; font-weight: 600; color: rgb(148, 163, 184); white-space: nowrap; flex: 0 0 auto; }
.left-panel .component-item .component-actions { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; opacity: 0; transition: opacity 0.12s; }
.left-panel .component-item:hover .component-actions, .left-panel .component-item.active .component-actions { opacity: 1; }
.left-panel .component-item .component-actions .btn.icon { width: 24px; height: 24px; min-height: 24px; padding: 0px; font-size: 11px; line-height: 1; border-radius: 6px; border: 1px solid var(--ui-border); background: var(--ui-surface); color: rgb(100, 116, 139); }
.left-panel .component-item .component-actions .btn.icon:hover { color: rgb(29, 78, 216); border-color: rgb(191, 219, 254); background: rgb(245, 249, 255); }
.left-panel .left-settings { display: flex; flex-direction: column; gap: var(--ui-gap-2); }
.left-panel .left-site-card, .left-panel .seo-only-card { border: 1px solid var(--ui-border); border-radius: var(--ui-radius-card); background: var(--ui-surface); padding: var(--ui-gap-2); box-shadow: none; }
.link-popover { border-radius: var(--ui-radius-card); border: 1px solid var(--ui-border); gap: var(--ui-gap-1); }
.link-popover > strong { font-size: var(--ui-title); font-weight: 800; }
.link-popover .link-popover-label { font-size: var(--ui-label); font-weight: 700; color: rgb(71, 85, 105); }
.link-popover .project-actions { display: flex; flex-wrap: wrap; gap: var(--ui-gap-1); margin-top: var(--ui-gap-1); }
.left-panel .component-tools .component-add-card b, .left-panel .component-tools.compact-add-tools .component-add-card b { white-space: normal; overflow: visible; text-overflow: clip; word-break: keep-all; overflow-wrap: normal; font-size: 10.5px; text-align: center; max-width: 100%; }
.left-panel .component-list .component-item, .left-panel .page-list .component-item { position: relative; padding-right: 8px; }
.left-panel .component-item .component-actions { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: linear-gradient(90deg, rgba(248,250,252,0) 0%, var(--ui-surface-2) 18%); padding-left: 14px; border-radius: var(--ui-radius); }
.left-panel .component-item:hover .component-actions { background: linear-gradient(90deg, rgba(241, 245, 249, 0) 0%, rgb(241, 245, 249) 18%); }
.left-panel .component-item.active .component-actions { background: linear-gradient(90deg, rgba(238, 244, 255, 0) 0%, rgb(238, 244, 255) 18%); }
.left-panel .component-item .component-top { flex: 1 1 auto; padding-right: 2px; }
.left-panel .component-item .component-top span { max-width: 40%; overflow: hidden; text-overflow: ellipsis; }
.right-panel .panel-stack { display: flex; flex-direction: column; gap: 10px; }
.right-panel .panel-group { border: 1px solid rgb(226, 232, 240); border-radius: 12px; background: rgb(255, 255, 255); overflow: hidden; }
.right-panel .panel-group-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; font-size: 13px; font-weight: 700; color: rgb(15, 23, 42); background: rgb(248, 250, 252); list-style: none; }
.right-panel .panel-group-head::-webkit-details-marker { display: none; }
.right-panel .panel-group-head::before { content: "▸"; font-size: 11px; color: rgb(148, 163, 184); transition: transform 0.15s; }
.right-panel .panel-group[open] > .panel-group-head::before { transform: rotate(90deg); }
.right-panel .panel-group-head > span:first-of-type { flex: 1 1 auto; }
.right-panel .panel-group-head em { font-style: normal; font-size: 11px; font-weight: 500; color: rgb(148, 163, 184); }
.right-panel .panel-group-body { padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.right-panel .panel-group-body > .field { margin: 0px; }
.right-panel .menu-add-btn { padding: 3px 10px; font-size: 12px; border-radius: 999px; }
.right-panel .brand-row { display: flex; gap: 12px; align-items: flex-start; }
.right-panel .brand-row-body { flex: 1 1 auto; min-width: 0px; }
.right-panel .brand-row-body .field { margin: 0px; }
.media-drop { position: relative; width: 96px; height: 96px; flex: 0 0 auto; border: 1px dashed rgb(203, 213, 225); border-radius: 12px; background-color: rgb(255, 255, 255); background-image: linear-gradient(45deg, rgb(238, 242, 247) 25%, transparent 25%), linear-gradient(-45deg, rgb(238, 242, 247) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgb(238, 242, 247) 75%), linear-gradient(-45deg, transparent 75%, rgb(238, 242, 247) 75%); background-size: 12px 12px; background-position: 0px 0px, 0px 6px, 6px -6px, -6px 0px; cursor: pointer; display: grid; place-items: center; transition: border-color 0.15s, box-shadow 0.15s; }
.media-drop:hover, .media-drop.is-drop { border-color: rgb(59, 130, 246); box-shadow: rgba(59, 130, 246, 0.14) 0px 0px 0px 3px; }
.media-drop-input { position: absolute; inset: 0px; opacity: 0; pointer-events: none; }
.media-drop-thumb { position: absolute; inset: 6px; background-size: contain; background-repeat: no-repeat; background-position: center center; }
.media-drop-empty { display: grid; place-items: center; gap: 2px; font-size: 18px; color: rgb(148, 163, 184); text-align: center; line-height: 1.2; }
.media-drop-empty b { font-size: 11px; font-weight: 600; }
.media-drop-tools { position: absolute; right: 4px; bottom: 4px; display: flex; gap: 4px; }
.media-drop-tools .btn.icon { width: 24px; height: 24px; min-width: 0px; padding: 0px; font-size: 12px; line-height: 1; border-radius: 8px; background: rgba(255, 255, 255, 0.94); border: 1px solid rgb(226, 232, 240); display: grid; place-items: center; }
.right-panel .panel-group-body > .media-drop { width: 120px; height: 84px; }
.switch-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.switch-cell { display: flex; align-items: flex-start; gap: 8px; padding: 9px 10px; border: 1px solid rgb(226, 232, 240); border-radius: 10px; cursor: pointer; }
.switch-cell:hover { border-color: rgb(203, 213, 225); background: rgb(248, 250, 252); }
.switch-cell input { margin-top: 2px; }
.switch-cell span { display: flex; flex-direction: column; gap: 1px; min-width: 0px; }
.switch-cell b { font-size: 12.5px; font-weight: 600; color: rgb(15, 23, 42); }
.switch-cell i { font-style: normal; font-size: 11px; color: rgb(148, 163, 184); }
.right-menu-editor { display: flex; flex-direction: column; gap: 8px; }
.menu-row-card { border: 1px solid rgb(226, 232, 240); border-radius: 10px; padding: 8px; background: rgb(255, 255, 255); }
.menu-row-card.is-dragging { opacity: 0.5; }
.menu-row-card.is-drop-target { border-color: rgb(59, 130, 246); box-shadow: rgba(59, 130, 246, 0.12) 0px 0px 0px 3px; }
.menu-row-main { display: grid; grid-template-columns: 18px minmax(0px, 1fr) minmax(0px, 1fr) 26px; align-items: center; gap: 6px; }
.menu-row-main .drag-handle { cursor: grab; color: rgb(148, 163, 184); font-size: 12px; text-align: center; }
.menu-row-main .input { height: 32px; min-width: 0px; font-size: 12.5px; }
.menu-row-main .btn.icon { width: 26px; height: 26px; min-width: 0px; padding: 0px; display: grid; place-items: center; }
.menu-row-url { display: none; margin-top: 6px; }
.menu-row-url.open { display: block; }
.menu-row-url .input { height: 32px; font-size: 12.5px; }
.site-search-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 34px; padding: 0px; border: 1px solid rgba(15, 23, 42, 0.12); border-radius: 50%; background: transparent; color: inherit; cursor: pointer; transition: background 0.16s, border-color 0.16s; }
.site-search-btn svg { width: 18px; height: 18px; display: block; }
.site-search-btn:hover { background: rgba(15, 23, 42, 0.06); }
.site-search-overlay { position: fixed; inset: 0px; z-index: 9999; background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(2px); display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; }
.site-search-overlay[hidden] { display: none; }
.site-search-card { width: min(640px, 100%); background: rgb(255, 255, 255); border-radius: 14px; box-shadow: rgba(15, 23, 42, 0.28) 0px 24px 60px; overflow: hidden; }
.site-search-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid rgba(15, 23, 42, 0.08); color: rgb(100, 116, 139); }
.site-search-row svg { flex: 0 0 20px; width: 20px; height: 20px; }
.site-search-input { flex: 1 1 0%; min-width: 0px; border: 0px; outline: none; font-size: 16px; color: rgb(15, 23, 42); background: transparent; }
.site-search-close { border: 0px; background: transparent; font-size: 22px; line-height: 1; color: rgb(100, 116, 139); cursor: pointer; padding: 0px 4px; }
.site-search-results { max-height: 52vh; overflow: auto; }
.site-search-empty { padding: 22px 16px; text-align: center; color: rgb(148, 163, 184); font-size: 14px; }
.site-search-hit { display: block; width: 100%; text-align: left; border-width: 0px 0px 1px; border-style: none none solid; border-color: currentcolor currentcolor rgba(15, 23, 42, 0.06); border-image: none; background: transparent; cursor: pointer; padding: 12px 16px; }
.site-search-hit:hover { background: rgba(37, 99, 235, 0.06); }
.site-search-hit strong { display: block; font-size: 14px; color: rgb(15, 23, 42); margin-bottom: 3px; }
.site-search-hit span { display: block; font-size: 13px; color: rgb(100, 116, 139); line-height: 1.5; }
.site-search-hit mark { background: rgba(250, 204, 21, 0.45); color: inherit; padding: 0px 1px; border-radius: 2px; }
body[data-page="home"] { --hm-bg: #fafbfc; --hm-line: #e8ecf1; --hm-mut: #64748b; --hm-ink: #0f172a; --hm-blue: #3b82f6; background: var(--hm-bg); font-family: "DM Sans", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; color: var(--hm-ink); }
body[data-page="home"] h1, body[data-page="home"] h2, body[data-page="home"] h3 { font-family: "Space Grotesk", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; letter-spacing: -0.01em; }
body[data-page="home"] .topnav.home-nav { position: sticky; top: 0px; z-index: 40; background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--hm-line); padding: 12px clamp(16px, 5vw, 56px); }
body[data-page="home"] .brand { font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 700; letter-spacing: 0.01em; }
body[data-page="home"] .brand-mark { background: var(--hm-blue); color: rgb(255, 255, 255); }
body[data-page="home"] .btn.ghost-link { background: transparent; border-color: transparent; color: var(--hm-mut); }
body[data-page="home"] .btn.ghost-link:hover { color: var(--hm-ink); }
body[data-page="home"] .btn.outline { background: rgb(255, 255, 255); border: 1px solid rgb(207, 220, 236); color: rgb(29, 78, 216); }
body[data-page="home"] .btn.lg { height: 46px; padding: 0px 22px; font-size: 15px; border-radius: 10px; }
body[data-page="home"] .home-page { max-width: 1180px; margin: 0px auto; padding: 0px clamp(16px, 5vw, 40px); }
body[data-page="home"] .home-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; padding: clamp(48px, 8vw, 96px) 0px clamp(40px, 6vw, 72px); position: relative; }
body[data-page="home"] .home-hero::before { content: ""; position: absolute; inset: -10% -30% auto -20%; height: 520px; z-index: 0; pointer-events: none; background: radial-gradient(60% 60% at 30% 40%, rgba(59, 130, 246, 0.16), transparent 70%), radial-gradient(50% 50% at 80% 20%, rgba(148, 163, 184, 0.18), transparent 70%); filter: blur(6px); }
body[data-page="home"] .home-hero > * { position: relative; z-index: 1; }
body[data-page="home"] .eyebrow { font-family: "Space Grotesk", system-ui, sans-serif; font-size: 12px; letter-spacing: 0.22em; color: var(--hm-blue); font-weight: 700; margin: 0px 0px 14px; }
body[data-page="home"] .home-hero h1 { font-size: clamp(34px, 5.2vw, 60px); line-height: 1.1; margin: 0px 0px 18px; font-weight: 700; }
body[data-page="home"] .hero-accent { color: var(--hm-blue); }
body[data-page="home"] .hero-sub { font-size: clamp(15px, 1.5vw, 17px); line-height: 1.75; color: var(--hm-mut); max-width: 32em; margin: 0px 0px 26px; }
body[data-page="home"] .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
body[data-page="home"] .hero-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 0px; margin: 0px; font-size: 13.5px; color: var(--hm-mut); }
body[data-page="home"] .hero-trust li { display: flex; align-items: center; gap: 7px; }
body[data-page="home"] .hero-trust li::before { content: "✓"; color: var(--hm-blue); font-weight: 700; }
body[data-page="home"] .product-shot { position: relative; background: rgb(255, 255, 255); border: 1px solid var(--hm-line); border-radius: 16px; box-shadow: rgba(15, 23, 42, 0.35) 0px 30px 70px -30px; overflow: hidden; animation: 7s ease-in-out 0s infinite normal none running hmFloat; }
@keyframes hmFloat { 
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}
body[data-page="home"] .shot-bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; border-bottom: 1px solid var(--hm-line); background: rgb(248, 250, 252); }
body[data-page="home"] .shot-bar .dot { width: 9px; height: 9px; border-radius: 50%; background: rgb(219, 227, 236); }
body[data-page="home"] .shot-url { margin-left: 10px; font-style: normal; font-size: 11.5px; color: rgb(148, 163, 184); background: rgb(255, 255, 255); border: 1px solid var(--hm-line); border-radius: 6px; padding: 2px 10px; }
body[data-page="home"] .shot-body { display: grid; grid-template-columns: 132px 1fr; min-height: 300px; }
body[data-page="home"] .shot-side { padding: 14px; display: grid; gap: 9px; align-content: start; border-right: 1px solid var(--hm-line); background: rgb(252, 253, 254); }
body[data-page="home"] .mini-card { height: 30px; border-radius: 8px; border: 1px solid var(--hm-line); background: rgb(255, 255, 255); }
body[data-page="home"] .mini-card.active { border-color: var(--hm-blue); box-shadow: rgba(59, 130, 246, 0.12) 0px 0px 0px 3px; }
body[data-page="home"] .shot-main { padding: 16px; }
body[data-page="home"] .mini-preview { display: grid; gap: 10px; }
body[data-page="home"] .mini-hero { height: 118px; border-radius: 10px; background: linear-gradient(135deg, rgb(219, 234, 254), rgb(239, 246, 255) 60%, rgb(226, 232, 240)); }
body[data-page="home"] .mini-line { height: 10px; border-radius: 6px; background: rgb(232, 236, 241); }
body[data-page="home"] .mini-line.w80 { width: 80%; }
body[data-page="home"] .mini-line.w60 { width: 58%; }
body[data-page="home"] .mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 4px; }
body[data-page="home"] .mini-grid span { height: 56px; border-radius: 9px; background: rgb(241, 245, 249); border: 1px solid var(--hm-line); }
body[data-page="home"] .shot-badge { position: absolute; right: 14px; bottom: 14px; background: var(--hm-blue); color: rgb(255, 255, 255); font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; box-shadow: rgba(59, 130, 246, 0.7) 0px 10px 24px -8px; }
body[data-page="home"] .home-section { padding: clamp(44px, 6vw, 76px) 0px; }
body[data-page="home"] .home-section-head { margin-bottom: clamp(22px, 3vw, 36px); }
body[data-page="home"] .home-section-head h2 { font-size: clamp(24px, 3.2vw, 34px); margin: 0px; font-weight: 700; }
body[data-page="home"] .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
body[data-page="home"] .feature-card, body[data-page="home"] .step-card, body[data-page="home"] .showcase-card { background: rgb(255, 255, 255); border: 1px solid var(--hm-line); border-radius: 14px; padding: 22px; box-shadow: rgba(15, 23, 42, 0.5) 0px 12px 30px -24px; transition: transform 0.16s, box-shadow 0.16s, border-color 0.16s; }
body[data-page="home"] .feature-card:hover, body[data-page="home"] .step-card:hover, body[data-page="home"] .showcase-card:hover { transform: translateY(-2px); border-color: rgb(207, 220, 236); box-shadow: rgba(15, 23, 42, 0.5) 0px 18px 40px -24px; }
body[data-page="home"] .feature-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: rgb(239, 246, 255); color: var(--hm-blue); font-size: 17px; margin-bottom: 14px; }
body[data-page="home"] .feature-card h3, body[data-page="home"] .step-card h3, body[data-page="home"] .showcase-card h3 { font-size: 16.5px; margin: 0px 0px 8px; font-weight: 700; }
body[data-page="home"] .feature-card p, body[data-page="home"] .step-card p, body[data-page="home"] .showcase-card p { margin: 0px; font-size: 14px; line-height: 1.7; color: var(--hm-mut); }
body[data-page="home"] .step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
body[data-page="home"] .step-num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--hm-blue); color: rgb(255, 255, 255); font-family: "Space Grotesk", sans-serif; font-weight: 700; margin-bottom: 14px; }
body[data-page="home"] .showcase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
body[data-page="home"] .showcase-card { padding: 14px 14px 20px; }
body[data-page="home"] .showcase-thumb { height: 150px; border-radius: 10px; padding: 14px; margin-bottom: 16px; display: grid; gap: 8px; align-content: start; overflow: hidden; }
body[data-page="home"] .showcase-thumb span { display: block; border-radius: 6px; background: rgba(255, 255, 255, 0.75); }
body[data-page="home"] .showcase-thumb span:nth-child(1) { height: 44px; }
body[data-page="home"] .showcase-thumb span:nth-child(2) { height: 12px; width: 70%; }
body[data-page="home"] .showcase-thumb span:nth-child(3) { height: 44px; }
body[data-page="home"] .thumb-a { background: linear-gradient(135deg, rgb(219, 234, 254), rgb(191, 219, 254)); }
body[data-page="home"] .thumb-b { background: linear-gradient(135deg, rgb(226, 232, 240), rgb(203, 213, 225)); }
body[data-page="home"] .thumb-c { background: linear-gradient(135deg, rgb(239, 246, 255), rgb(147, 197, 253)); }
body[data-page="home"] .home-cta { margin: clamp(24px, 4vw, 48px) 0px clamp(48px, 7vw, 80px); padding: clamp(36px, 5vw, 60px) 24px; text-align: center; border: 1px solid var(--hm-line); border-radius: 20px; background: radial-gradient(70% 120% at 50% 0%, rgba(59, 130, 246, 0.14), transparent 70%), rgb(255, 255, 255); }
body[data-page="home"] .home-cta h2 { font-size: clamp(23px, 3vw, 32px); margin: 0px 0px 10px; font-weight: 700; }
body[data-page="home"] .home-cta p { margin: 0px 0px 22px; color: var(--hm-mut); font-size: 15px; }
body[data-page="home"] .home-footer { border-top: 1px solid var(--hm-line); background: rgb(255, 255, 255); padding: 22px clamp(16px, 5vw, 56px); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
body[data-page="home"] .home-footer nav { display: flex; gap: 18px; }
body[data-page="home"] .home-footer nav a { color: var(--hm-mut); text-decoration: none; font-size: 14px; }
body[data-page="home"] .home-footer nav a:hover { color: var(--hm-blue); }
body[data-page="home"] .home-footer small { color: rgb(148, 163, 184); font-size: 12.5px; }
@media (max-width: 900px) {
  body[data-page="home"] .home-hero { grid-template-columns: 1fr; }
  body[data-page="home"] .feature-grid, body[data-page="home"] .step-grid, body[data-page="home"] .showcase-grid { grid-template-columns: 1fr; }
  body[data-page="home"] .product-shot { animation: auto ease 0s 1 normal none running none; }
  body[data-page="home"] .shot-body { grid-template-columns: 100px 1fr; min-height: 240px; }
  body[data-page="home"] .home-footer { flex-direction: column; align-items: flex-start; }
}
body[data-page="home"] .page.home-page { min-height: 0px; }
body[data-page="home"] .home-hero { min-height: 0px; background: none; padding-left: 0px; padding-right: 0px; }
body[data-page="home"] .hero-copy { max-width: none; }
body[data-page="home"] .hero-copy p { font-size: inherit; max-width: 32em; }
body[data-page="home"] .hero-actions { margin-top: 0px; }
body[data-page="home"] .mini-preview { height: auto; min-height: 0px; background: none; border-radius: 0px; }
body[data-page="home"] .shot-bar { height: auto; }
body[data-page="home"] .mini-card { margin-bottom: 0px; height: 30px; }
body[data-page="home"] .home-hero h1 { font-size: clamp(32px, 4.4vw, 52px); max-width: 14em; }
.font-sample { margin-top: 8px; padding: 12px 14px; border: 1px solid var(--ui-border,#e2e8f0); border-radius: 10px; background: var(--ui-surface,#f8fafc); display: grid; gap: 4px; }
.font-sample b { font-size: 17px; font-weight: 600; color: rgb(15, 23, 42); line-height: 1.5; }
.font-sample i { font-style: normal; font-size: 12px; color: rgb(100, 116, 139); }
.html-section:has(> .section-custom-html > .bsx) { padding: 0px !important; }
.html-section:has(> .section-custom-html > .bsx) > p:empty { display: none; }
.html-section .section-custom-html:has(> .bsx) { border: 0px; background: none; padding: 0px; }
.editor-layout:has(.bsx) .preview-zone { left: var(--left-panel-w); right: var(--right-panel-w); }
.editor-layout.left-collapsed:has(.bsx) .preview-zone { left: 0px; }
.editor-layout.right-collapsed:has(.bsx) .preview-zone { right: 0px; }
.editor-layout:has(.bsx) .preview-zone:not(.mobile-preview) .canvas-scale { transform: none; }
.site-frame:has(.bsx) { max-width: none; margin-inline: auto !important; }
.site-frame:has(.bsx) .html-section > .section-custom-html > .bsx { width: 100%; --pad: clamp(24px, 4.5vw, 72px); }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx > section, .site-frame:has(.bsx) .bsx.bsx.bsx.bsx > footer { width: min(100%, 1600px); margin-inline: auto; position: relative; isolation: isolate; }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx > section::before, .site-frame:has(.bsx) .bsx.bsx.bsx.bsx > footer::before { content: ""; position: absolute; inset-block: 0px; left: 50%; width: 100cqw; transform: translateX(-50%); background: inherit; z-index: -1; pointer-events: none; }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-work-section > .bs-photo-gallery, .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-work-section > .bs-video-gallery { grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 24px; align-items: start; }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-work-section .bs-photo-button { width: 100%; margin-top: 0px; aspect-ratio: 3 / 2; }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-work-section .bs-photo-button img { width: 100%; height: 100%; min-height: 0px; object-fit: cover; }
@media (min-width: 761px) and (max-width: 1100px) {
  .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-work-section > .bs-photo-gallery, .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-work-section > .bs-video-gallery { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
}
@media (max-width: 760px) {
  .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-work-section > .bs-photo-gallery, .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-work-section > .bs-video-gallery { grid-template-columns: minmax(0px, 1fr); }
}
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-home-hero { min-height: 610px; }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-hero-copy h1 { font-size: 76px; }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx h2, .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-section-head h2, .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-block-cta h2, .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-service-cta h2 { font-size: 52px; line-height: 1.2; }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-page-intro h1 { font-size: 72px; }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-service-entry h3 { font-size: 42px; }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-chapter-copy h2 { font-size: 40px; }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-editorial-copy, .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-home-about .bs-editorial-copy p, .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-page-intro-copy { font-size: 17px; line-height: 1.85; }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-section-label { font-size: 14px; }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-section-head > p { font-size: 17px; }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-hero-grid { min-height: 560px; }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-hero-character { max-width: 100%; }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-hero-topline, .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-hero-bottom { font-size: 13px; }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-service-action { font-size: 16px; }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-hero-studio { font-size: 16px; }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-service-entry .bs-section-label { font-size: 14px; }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-site-footer { padding: 56px var(--pad) 32px; position: relative; }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-footer-name { display: none; }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; margin: 0px; padding: 0px 120px 48px 0px; font-size: 12px; line-height: 1.6; text-transform: uppercase; color: rgb(80, 100, 125); }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-footer-links a { display: inline-flex; align-items: center; gap: 10px; width: auto; padding: 9px 18px; border: 1px solid rgb(218, 229, 241); border-radius: 999px; background: rgb(255, 255, 255); color: rgb(61, 84, 112); font-weight: 700; letter-spacing: 0.05em; transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s, color 0.18s; }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-footer-links a::before { content: ""; width: 18px; height: 18px; flex: 0 0 auto; background: center center / contain no-repeat; }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-footer-links a[href^="mailto:"] { padding: 12px 26px; border: 0px; background: linear-gradient(135deg, rgb(8, 119, 215), rgb(22, 136, 233)); color: rgb(255, 255, 255); font-size: 15px; letter-spacing: 0.02em; text-transform: none; box-shadow: rgba(8, 119, 215, 0.55) 0px 14px 30px -12px; }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-footer-links a[href^="mailto:"]::before { width: 20px; height: 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0%200%2024%2024' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22,7-10,6L2,7'/%3E%3C/svg%3E"); }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-footer-links a[href^="mailto:"]:hover { transform: translateY(-2px); box-shadow: rgba(8, 119, 215, 0.65) 0px 18px 34px -12px; color: rgb(255, 255, 255); }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-footer-links a[href*="wa.me"] { border-color: rgb(201, 236, 217); background: rgb(242, 251, 246); color: rgb(23, 114, 69); }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-footer-links a[href*="wa.me"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0%200%2024%2024' fill='%2325D366'%3E%3Cpath d='M17.472,14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94,1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198,0-.52.074-.792.372-.272.297-1.04,1.016-1.04,2.479,0,1.462,1.065,2.875,1.213,3.074.149.198,2.096,3.2,5.077,4.487.709.306,1.262.489,1.694.625.712.227,1.36.195,1.871.118.571-.085,1.758-.719,2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421,7.403h-.004a9.87,9.87,0,0,1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86,9.86,0,0,1-1.51-5.26c.001-5.45,4.436-9.884,9.888-9.884,2.64,0,5.122,1.03,6.988,2.898a9.825,9.825,0,0,1,2.893,6.994c-.003,5.45-4.437,9.884-9.885,9.884m8.413-18.297A11.815,11.815,0,0,0,12.05,0C5.495,0,.16,5.335.157,11.892c0,2.096.547,4.142,1.588,5.945L.057,24l6.305-1.654a11.882,11.882,0,0,0,5.683,1.448h.005c6.554,0,11.89-5.335,11.893-11.893a11.821,11.821,0,0,0-3.48-8.413z'/%3E%3C/svg%3E"); }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-footer-links a[href*="wa.me"]:hover { border-color: rgb(37, 211, 102); color: rgb(15, 107, 58); }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-footer-links a[href*="youtube.com"] { border-color: rgb(246, 213, 211); background: rgb(253, 244, 243); color: rgb(196, 48, 43); }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-footer-links a[href*="youtube.com"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0%200%2024%2024' fill='%23FF0000'%3E%3Cpath d='M23.498,6.186a3.016,3.016,0,0,0-2.122-2.136C19.505,3.545,12,3.545,12,3.545s-7.505,0-9.377.505A3.017,3.017,0,0,0,.502,6.186C0,8.07,0,12,0,12s0,3.93.502,5.814a3.016,3.016,0,0,0,2.122,2.136c1.871.505,9.376.505,9.376.505s7.505,0,9.377-.505a3.015,3.015,0,0,0,2.122-2.136C24,15.93,24,12,24,12s0-3.93-.502-5.814zM9.545,15.568V8.432L15.818,12l-6.273,3.568z'/%3E%3C/svg%3E"); }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-footer-links a[href*="youtube.com"]:hover { border-color: rgb(255, 0, 0); color: rgb(165, 39, 29); }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-footer-base a:hover { color: rgb(8, 119, 215); }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-footer-base { display: grid; grid-template-columns: minmax(0px, 1fr) auto; align-items: center; gap: 16px 28px; margin: 0px; padding: 28px 0px 0px; border-top: 1px solid rgb(218, 229, 241); font-size: 12px; line-height: 1.6; color: rgb(96, 117, 140); }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-footer-base span { width: auto; color: rgb(20, 43, 70); font-weight: 600; }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-footer-base a:last-child { position: absolute; top: 56px; right: var(--pad); color: rgb(96, 117, 140); }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-footer-base a:last-child::after { content: " ↑"; }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-price-nav { position: relative; top: auto; z-index: 1; }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-page-intro { box-sizing: border-box; min-height: 360px; }
.site-frame:has(.bsx) .site-body:has(.bs-price-nav) .bsx.bsx.bsx.bsx .bs-page-intro { padding-block: 50px; }
.site-frame:has(.bsx) .site-body:has(.bs-price-nav) .bsx.bsx.bsx.bsx .bs-page-intro-grid { margin-top: 16px; gap: 35px; }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-price-nav { box-sizing: border-box; width: 100%; padding-inline: max(var(--pad), calc((100% - 1600px) / 2 + var(--pad))); flex-wrap: wrap; }
.site-frame:has(.bsx) .html-section .section-custom-html > .bsx:has(> .bs-price-nav) { width: 100%; max-width: none; margin-inline: 0px; }
@media (max-width: 760px) {
  .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-page-intro { min-height: 0px; }
  .site-frame:has(.bsx) .site-body:has(.bs-price-nav) .bsx.bsx.bsx.bsx .bs-page-intro { padding-block: 40px; }
  .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-price-nav { gap: 12px 24px; }
}
body[data-page="preview"]:has(.bsx), body[data-page="editor"]:has(.bsx) .preview-zone:not(.mobile-preview) { overflow-x: clip; }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-home-hero { overflow: hidden; }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-hero-copy h1, .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-page-intro h1, .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-section-head h2 { letter-spacing: 0px; }
.site-frame:has(.bsx) .studio-header { --studio-header-content: 1456px; }
.site-frame:has(.bsx) .studio-header { width: 100%; min-height: 68px; padding: 9px max(24px, calc((100% - var(--studio-header-content))/2)); display: grid; grid-template-columns: minmax(0px, auto) minmax(0px, 1fr); gap: 24px; background: rgb(255, 255, 255); border-bottom: 1px solid rgb(218, 229, 241); box-shadow: none; }
.site-frame:has(.bsx) .studio-header .site-logo, .site-frame:has(.bsx) .studio-header .site-logo-link strong { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.site-frame:has(.bsx) .studio-header .site-logo-img { width: 30px; height: 30px; object-fit: contain; }
.site-frame:has(.bsx) .studio-logo-label { display: flex; flex-direction: column; white-space: nowrap; line-height: 1.15; }
.site-frame:has(.bsx) .studio-logo-label b { font-size: 16px; font-weight: 800; color: rgb(20, 43, 70); }
.site-frame:has(.bsx) .studio-logo-label small { margin-top: 4px; font-size: 10px; color: rgb(96, 117, 140); font-weight: 400; }
.site-frame:has(.bsx) .studio-header .site-nav { align-items: center; gap: 28px; font-size: 13px; font-weight: 500; }
.site-frame:has(.bsx) .studio-header .site-nav a { color: rgb(80, 100, 125); white-space: nowrap; padding: 10px 0px; }
.site-frame:has(.bsx) .studio-header .site-nav a.studio-current { color: rgb(8, 119, 215); }
.site-frame:has(.bsx) .studio-header .site-nav a.studio-current::after { transform: scaleX(1); height: 1px; bottom: 4px; }
.site-frame:has(.bsx) .studio-header .site-nav a.studio-contact { border: 1px solid rgb(139, 181, 215); padding: 10px 16px; color: rgb(8, 119, 215); margin-left: 6px; }
.site-frame:has(.bsx) .studio-header .site-nav a.studio-contact::after { display: none; }
@media (max-width: 1100px) {
  .site-frame:has(.bsx) .studio-header { padding-inline: 24px; }
  .site-frame:has(.bsx) .studio-header .site-nav { gap: 14px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-hero-copy h1 { font-size: 64px; }
}
@media (max-width: 760px) {
  .site-frame:has(.bsx) .studio-header { min-height: 64px; display: flex; justify-content: space-between; }
  .site-frame:has(.bsx) .studio-header .site-nav { align-items: stretch; }
  .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-home-hero { min-height: 0px; }
  .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-hero-copy h1 { font-size: 48px; }
  .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-page-intro h1 { font-size: 48px; }
  .site-frame:has(.bsx) .bsx.bsx.bsx.bsx h2, .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-section-head h2, .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-block-cta h2, .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-service-cta h2 { font-size: 32px !important; }
  .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-chapter-copy h2, .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-contact-grid h2 { font-size: 32px !important; }
  .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-service-entry h3 { font-size: 32px; }
  .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-site-footer { padding: 40px var(--pad) 28px; }
  .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-footer-links { padding: 0px 0px 60px; gap: 12px; }
  .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-footer-links a { flex: 1 1 100%; justify-content: center; }
  .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-footer-links a[href^="mailto:"] { justify-content: center; padding: 14px 22px; font-size: 15px; }
  .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-footer-base { grid-template-columns: 1fr; gap: 8px; padding-top: 22px; }
  .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-footer-base a:last-child { position: static; }
  .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-hero-grid { min-height: 0px; }
  .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-editorial-copy, .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-home-about .bs-editorial-copy p, .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-page-intro-copy { font-size: 16px; }
}
@media (max-width: 760px) {
  .site-frame:has(.bsx) .site-body:has(.bs-price-nav) .bsx.bsx.bsx.bsx .bs-page-intro { padding: 36px var(--pad) 38px; }
  .site-frame:has(.bsx) .site-body:has(.bs-price-nav) .bsx.bsx.bsx.bsx .bs-page-intro-grid { display: block; margin-top: 14px; }
  .site-frame:has(.bsx) .site-body:has(.bs-price-nav) .bsx.bsx.bsx.bsx .bs-page-intro h1 { font-size: 44px; line-height: 1.15; }
  .site-frame:has(.bsx) .site-body:has(.bs-price-nav) .bsx.bsx.bsx.bsx .bs-page-intro-copy { max-width: 34em; margin-top: 24px; font-size: 15px; line-height: 1.85; }
  .site-frame:has(.bsx) .site-body:has(.bs-price-nav) .bsx.bsx.bsx.bsx .bs-page-intro-copy p { margin: 0px; }
  .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-price-nav { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 0px; padding: 0 var(--pad); background: var(--surface); }
  .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-price-nav a { display: grid; place-items: center; min-height: 58px; min-width: 0px; padding: 8px 2px; border-bottom: 2px solid transparent; font-size: 14px; font-weight: 600; text-align: center; }
  .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-price-nav a:active, .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-price-nav a:focus-visible { color: var(--accent); border-bottom-color: var(--accent); }
  .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-pricing-section { padding: 52px var(--pad) 26px; scroll-margin-top: 72px; }
  .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-pricing-section .bs-section-head { margin-bottom: 30px; }
  .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-pricing-section .bs-section-head h2 { margin-top: 8px; font-size: 32px; }
  .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-pricing-groups { grid-template-columns: minmax(0px, 1fr); gap: 38px; }
  .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-price-group h3 { gap: 13px; margin-bottom: 13px; font-size: 22px; }
  .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-price-group h3 span { min-width: 24px; font-size: 12px; }
  .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-price-group table, .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-price-group tbody { display: block; width: 100%; }
  .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-price-group thead { position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-price-group tbody tr { display: grid; grid-template-columns: minmax(0px, 1fr) minmax(88px, 38%); gap: 2px 10px; align-items: start; padding: 14px 0px; border-top: 1px solid var(--line); }
  .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-price-group tbody tr:last-child { border-bottom: 1px solid var(--line); }
  .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-price-group tbody th, .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-price-group tbody td { display: block; width: auto; padding: 0px; border: 0px; line-height: 1.5; }
  .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-price-group tbody th:first-child { grid-area: 1 / 1; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
  .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-price-group tbody td:nth-child(2) { grid-area: 2 / 1 / auto / -1; font-size: 13px; color: var(--muted); }
  .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-price-group tbody td:nth-child(2):empty { display: none; }
  .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-price-group tbody td.bs-price { grid-area: 1 / 2; width: auto; font-size: 15px; font-weight: 700; text-align: right; overflow-wrap: anywhere; }
}
body[data-page="editor"] .bsx .studio-edit-text { cursor: text; outline: transparent dashed 1px; }
body[data-page="editor"] .bsx .studio-edit-text { color: inherit !important; font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; letter-spacing: inherit !important; margin: 0px !important; }
body[data-page="editor"] .bsx .studio-edit-text:hover, body[data-page="editor"] .bsx .studio-edit-text:focus { outline-color: rgb(8, 119, 215); background: rgba(8, 119, 215, 0.06); }
body[data-page="editor"] .bsx .studio-edit-media { cursor: pointer; }
body[data-page="editor"] .bsx .studio-edit-media:hover { outline: rgb(8, 119, 215) solid 2px; outline-offset: 2px; }
.studio-media-toolbar { position: fixed; z-index: 9999; display: flex; align-items: center; gap: 6px; width: min(340px, -16px + 100vw); padding: 6px; border: 1px solid rgb(218, 229, 241); background: white; box-shadow: rgba(20, 43, 70, 0.16) 0px 6px 20px; border-radius: 6px; }
.studio-media-toolbar input[type="url"] { min-width: 0px; flex: 1 1 0%; height: 30px; border: 1px solid rgb(218, 229, 241); padding: 4px 6px; font-size: 12px; }
.studio-media-toolbar button { flex: 0 0 auto; border: 0px; background: rgb(244, 248, 255); color: rgb(20, 43, 70); padding: 6px; cursor: pointer; font-size: 12px; }
.html-visual-editor { min-width: 0px; margin-top: 12px; border-top: 1px solid var(--line); padding-top: 14px; }
.html-visual-editor .settings-head { margin-bottom: 10px; }
.html-edit-list { max-height: 55vh; overflow: auto; display: grid; gap: 12px; }
.html-edit-row { display: grid; gap: 5px; min-width: 0px; font-size: 12px; font-weight: 600; color: var(--muted); }
.html-edit-row .textarea { width: 100%; min-height: 54px; resize: vertical; }
.html-edit-row .input { width: 100%; min-width: 0px; }
.html-media-row { padding-top: 10px; border-top: 1px solid var(--line); }
.html-raw-editor { margin-top: 14px; }
.html-raw-editor summary { cursor: pointer; font-weight: 600; }
.html-raw-editor textarea { margin-top: 10px; min-height: 190px; width: 100%; }
@keyframes bsxRise { 
  0% { opacity: 0; transform: translateY(34px); }
  100% { opacity: 1; transform: translateY(0px); }
}
@keyframes bsxSlideIn { 
  0% { opacity: 0; transform: translateX(60px) scale(0.96); }
  100% { opacity: 1; transform: translateX(0px) scale(1); }
}
@keyframes bsxFloat { 
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(-1.2deg); }
}
@keyframes bsxGlow { 
  0%, 100% { box-shadow: rgba(8, 119, 215, 0.45) 0px 10px 30px -12px; }
  50% { box-shadow: rgba(8, 119, 215, 0.65) 0px 14px 40px -10px; }
}
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-hero-topline { animation: 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0s 1 normal both running bsxRise; }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-hero-copy h1 { animation: 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.12s 1 normal both running bsxRise; }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-hero-copy h1 span { display: inline-block; animation: 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.28s 1 normal both running bsxRise; }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-hero-studio { animation: 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.42s 1 normal both running bsxRise; }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-hero-actions { animation: 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.54s 1 normal both running bsxRise; }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-hero-bottom { animation: 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.66s 1 normal both running bsxRise; }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-hero-visual { animation: 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.3s 1 normal both running bsxSlideIn; }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-hero-character { animation: 6s ease-in-out 1.2s infinite normal none running bsxFloat; transition: filter 0.35s; }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-hero-visual:hover .bs-hero-character { filter: drop-shadow(rgba(8, 119, 215, 0.28) 0px 24px 36px); }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-hero-actions .bs-button, .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-contact-form .bs-button { position: relative; overflow: hidden; transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s, background-color 0.25s, color 0.25s, border-color 0.25s; }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-hero-actions .bs-button::after, .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-contact-form .bs-button::after { content: ""; position: absolute; inset: 0px; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.45) 50%, transparent 65%); transform: translateX(-130%); transition: transform 0.6s; pointer-events: none; }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-hero-actions .bs-button:hover, .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-contact-form .bs-button:hover { transform: translateY(-4px) scale(1.03); }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-hero-actions .bs-button:hover::after, .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-contact-form .bs-button:hover::after { transform: translateX(130%); }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-hero-actions .bs-button-primary:hover { animation: 2.4s ease-in-out 0s infinite normal none running bsxGlow; box-shadow: rgba(8, 119, 215, 0.6) 0px 16px 36px -12px; }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-hero-actions .bs-button-outline:hover { background: rgb(8, 119, 215); border-color: rgb(8, 119, 215); color: rgb(255, 255, 255); box-shadow: rgba(8, 119, 215, 0.5) 0px 16px 36px -12px; }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .site-nav a { position: relative; transition: color 0.25s; }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .site-nav a::after { content: ""; position: absolute; left: 0px; bottom: -4px; width: 100%; height: 2px; border-radius: 2px; background: rgb(8, 119, 215); transform: scaleX(0); transform-origin: right center; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .site-nav a:hover::after { transform: scaleX(1); transform-origin: left center; }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-service-entry { transition: background-color 0.3s, padding-left 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s; }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-service-entry:hover { background: rgb(255, 255, 255); padding-left: calc(39px); box-shadow: rgb(8, 119, 215) 4px 0px 0px inset; }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-service-entry:hover h3 { color: rgb(8, 119, 215); transition: color 0.25s; }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-photo-button, .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-video-gallery article { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s; will-change: transform; }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-photo-button:hover, .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-video-gallery article:hover { transform: translateY(-8px); box-shadow: rgba(20, 43, 70, 0.35) 0px 24px 44px -18px; z-index: 2; }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-photo-button img, .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-video-gallery img { transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-photo-button:hover img, .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-video-gallery article:hover img { transform: scale(1.06); }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-photo-button, .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-video-gallery article { overflow: hidden; }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-hero-bottom a, .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-hero-topline a { position: relative; transition: color 0.25s, letter-spacing 0.25s; }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-hero-bottom a:hover, .site-frame:has(.bsx) .bsx.bsx.bsx.bsx .bs-hero-topline a:hover { letter-spacing: 0.18em; }
@media (prefers-reduced-motion: reduce) {
  .site-frame:has(.bsx) .bsx.bsx.bsx.bsx *, .site-frame:has(.bsx) .bsx.bsx.bsx.bsx ::after, .site-frame:has(.bsx) .bsx.bsx.bsx.bsx ::before { animation: auto ease 0s 1 normal none running none !important; transition: none !important; }
}
.site-frame img:not(.bs-hero-character) { transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), filter 0.42s; transform-origin: center center; }
.site-frame img:not(.bs-hero-character):hover { transform: translateY(-5px) scale(1.065); filter: brightness(1.09) saturate(1.08); }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx img:not(.bs-hero-character) { transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), filter 0.42s; }
.site-frame:has(.bsx) .bsx.bsx.bsx.bsx img:not(.bs-hero-character):hover { transform: translateY(-5px) scale(1.065); filter: brightness(1.09) saturate(1.08); }
@keyframes sitePageEnter { 
  0% { opacity: 0; transform: translateY(38px) scale(0.985); filter: blur(7px); }
  100% { opacity: 1; transform: translateY(0px) scale(1); filter: blur(0px); }
}
@keyframes sitePageLeave { 
  0% { opacity: 1; transform: translateY(0px) scale(1); filter: blur(0px); }
  100% { opacity: 0; transform: translateY(-24px) scale(0.99); filter: blur(5px); }
}
body[data-page="preview"] .site-frame > .site-body { animation: 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0s 1 normal both running sitePageEnter; }
.site-frame.is-page-entering > .site-body { animation: 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0s 1 normal both running sitePageEnter; }
body[data-page="preview"] .site-frame.is-page-leaving > .site-body, .site-frame.is-page-leaving > .site-body { animation: 0.28s ease-in 0s 1 normal both running sitePageLeave; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .site-frame img:not(.bs-hero-character), .site-frame:has(.bsx) .bsx.bsx.bsx.bsx img:not(.bs-hero-character) { transition: none; }
  .site-frame img:not(.bs-hero-character):hover, .site-frame:has(.bsx) .bsx.bsx.bsx.bsx img:not(.bs-hero-character):hover { transform: none; filter: none; }
  body[data-page="preview"] .site-frame > .site-body, .site-frame.is-page-entering > .site-body, .site-frame.is-page-leaving > .site-body { animation: auto ease 0s 1 normal none running none; }
}
.site-frame .bsx.bsx.bsx.bsx.bsx .bs-pricing-groups { gap: 34px 30px; }
.site-frame .bsx.bsx.bsx.bsx.bsx .bs-price-group { background: rgb(255, 255, 255); border-radius: 16px; padding: 28px 26px 12px; transform: none; border: 1px solid rgb(232, 238, 245) !important; box-shadow: rgba(20, 43, 70, 0.04) 0px 1px 2px !important; transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.4s, border-color 0.4s !important; }
.site-frame .bsx.bsx.bsx.bsx.bsx .bs-price-group:hover { transform: translateY(-2px) !important; border-color: rgb(221, 230, 240) !important; box-shadow: rgba(20, 43, 70, 0.2) 0px 14px 30px -16px !important; }
.site-frame .bsx.bsx.bsx.bsx.bsx .bs-price-group h3 { gap: 16px; margin-bottom: 18px; align-items: center; }
.site-frame .bsx.bsx.bsx.bsx.bsx .bs-price-group h3 span { background: none !important; box-shadow: none !important; border-radius: 0px !important; padding: 0px !important; min-width: 0px !important; height: auto !important; display: inline !important; transform: none !important; }
.site-frame .bsx.bsx.bsx.bsx.bsx .bs-price-group h3 > span:first-child { place-items: center; flex: 0 0 auto; font-size: 13px; font-weight: 600; line-height: 1; display: inline-grid !important; width: 34px !important; height: 34px !important; border-radius: 999px !important; background: rgba(8, 119, 215, 0.08) !important; color: var(--accent) !important; transition: background 0.35s !important; }
.site-frame .bsx.bsx.bsx.bsx.bsx .bs-price-group:hover h3 > span:first-child { background: rgba(8, 119, 215, 0.13) !important; color: var(--accent) !important; }
.site-frame .bsx.bsx.bsx.bsx.bsx .bs-price-group tbody tr { box-shadow: none !important; transition: background 0.3s !important; }
.site-frame .bsx.bsx.bsx.bsx.bsx .bs-price-group tbody tr:hover { background: rgb(248, 250, 252) !important; box-shadow: none !important; }
.site-frame .bsx.bsx.bsx.bsx.bsx .bs-price-group tbody th, .site-frame .bsx.bsx.bsx.bsx.bsx .bs-price-group tbody td, .site-frame .bsx.bsx.bsx.bsx.bsx .bs-price-group tbody tr:hover th, .site-frame .bsx.bsx.bsx.bsx.bsx .bs-price-group tbody tr:hover td, .site-frame .bsx.bsx.bsx.bsx.bsx .bs-price-group tbody tr:hover .bs-price { transform: none !important; }
.site-frame .bsx.bsx.bsx.bsx.bsx .bs-price-group tbody th:first-child { width: 40%; }
.site-frame .bsx.bsx.bsx.bsx.bsx .bs-price-group td:nth-child(2) { width: 31%; }
.site-frame .bsx.bsx.bsx.bsx.bsx .bs-price-group .bs-price, .site-frame .bsx.bsx.bsx.bsx.bsx .bs-price-group tbody tr:hover .bs-price { color: var(--accent) !important; font-weight: 600; }
.site-frame .bsx.bsx.bsx.bsx.bsx .bs-price-group tbody tr:last-child th, .site-frame .bsx.bsx.bsx.bsx.bsx .bs-price-group tbody tr:last-child td { border-bottom: 0px; }
@media (max-width: 760px) {
  .site-frame .bsx.bsx.bsx.bsx.bsx .bs-price-group { padding: 22px 20px 10px; border-radius: 14px; }
  .site-frame .bsx.bsx.bsx.bsx.bsx .bs-price-group:hover { transform: none !important; }
  .site-frame .bsx.bsx.bsx.bsx.bsx .bs-pricing-groups { gap: 16px; }
  .site-frame .bsx.bsx.bsx.bsx.bsx .bs-price-group { padding: 18px 16px 6px; }
  .site-frame .bsx.bsx.bsx.bsx.bsx .bs-price-group h3 { margin-bottom: 8px; gap: 12px; }
  .site-frame .bsx.bsx.bsx.bsx.bsx .bs-price-group tbody tr { grid-template-columns: minmax(0px, 1fr) auto !important; gap: 2px 12px !important; padding: 12px 4px !important; }
  .site-frame .bsx.bsx.bsx.bsx.bsx .bs-price-group tbody th:first-child, .site-frame .bsx.bsx.bsx.bsx.bsx .bs-price-group td:nth-child(2) { width: auto !important; min-width: 0px; }
  .site-frame .bsx.bsx.bsx.bsx.bsx .bs-price-group .bs-price { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .site-frame .bsx.bsx.bsx.bsx.bsx .bs-price-group, .site-frame .bsx.bsx.bsx.bsx.bsx .bs-price-group * { transition: none !important; }
  .site-frame .bsx.bsx.bsx.bsx.bsx .bs-price-group:hover { transform: none !important; }
}

.component-tools.compact-add-tools .component-add-card .component-icon { display: grid; place-items: center; flex: 0 0 32px; width: 32px !important; height: 32px !important; border-radius: 10px !important; background: rgb(238, 245, 255) !important; color: rgb(37, 99, 235) !important; border: 0px !important; box-shadow: none !important; font-size: 0px !important; line-height: 0 !important; transition: background 0.16s, color 0.16s, transform 0.16s !important; }
.component-tools.compact-add-tools .component-add-card .component-icon svg { display: block; overflow: visible; width: 19px !important; height: 19px !important; fill: none !important; stroke: currentcolor !important; stroke-width: 1.75 !important; stroke-linecap: round !important; stroke-linejoin: round !important; }
.component-tools.compact-add-tools .component-add-card .component-icon svg *, .component-tools.compact-add-tools .component-add-card .component-icon svg path, .component-tools.compact-add-tools .component-add-card .component-icon svg rect, .component-tools.compact-add-tools .component-add-card .component-icon svg circle, .component-tools.compact-add-tools .component-add-card .component-icon svg line, .component-tools.compact-add-tools .component-add-card .component-icon svg polyline, .component-tools.compact-add-tools .component-add-card .component-icon svg polygon { fill: none !important; stroke: currentcolor !important; stroke-width: 1.75 !important; stroke-linecap: round !important; stroke-linejoin: round !important; }
.component-tools.compact-add-tools .component-add-card:hover .component-icon { transform: translateY(-1px); background: rgb(225, 237, 255) !important; color: rgb(29, 78, 216) !important; }
.component-tools.compact-add-tools .component-add-card.primary .component-icon, .component-tools.compact-add-tools .btn.primary .component-icon { background: rgb(229, 239, 255) !important; color: rgb(29, 78, 216) !important; border: 0px !important; box-shadow: none !important; }
.component-tools.compact-add-tools .component-add-card:active .component-icon { transform: scale(0.96); }
.component-tools.compact-add-tools .component-add-card b { letter-spacing: -0.01em; }

.fluent-read-bilingual-content { display: block; word-break: break-word; color: inherit; background: transparent; box-sizing: border-box; overflow-wrap: break-word; margin: 8px 0px !important; }
@media print {
  .fluent-read-bilingual-content[data-fr-translation-owned="true"][data-fr-rendering-contained="true"] { content-visibility: visible !important; contain-intrinsic-block-size: none !important; }
}
.fluent-display-bold { font-weight: 700; }
.fluent-display-italic { font-style: italic; }
.fluent-display-text-shadow { text-shadow: rgba(0, 0, 0, 0.1) 1px 1px 2px; }
.fluent-display-elegant { font-family: Georgia, serif; color: inherit; line-height: 1.6; letter-spacing: 0.3px; }
.fluent-display-dimmed { opacity: 0.7; }
.fluent-display-transparent-mode { opacity: 0.85; }
.fluent-display-blur-reveal { filter: blur(0.3em); transition: filter 0.2s; }
.fluent-display-blur-reveal:hover { filter: none; }
@media (prefers-reduced-motion: reduce) {
  .fluent-display-blur-reveal { transition: none; }
}
.fluent-display-solid-underline { text-decoration-line: ; text-decoration-style: ; text-decoration-color: ; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.fluent-display-dot-underline { text-decoration-line: ; text-decoration-style: ; text-decoration-color: ; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.fluent-display-wavy { text-decoration: wavy underline var(--fluent-read-translation-line, #409eff); text-underline-offset: 4px; }
.fluent-display-double-underline { text-decoration: underline double var(--fluent-read-translation-line, #409eff); text-underline-offset: 3px; }
.fluent-display-dashed-underline { text-decoration-line: ; text-decoration-style: ; text-decoration-color: ; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.fluent-display-clean { text-decoration-line: ; text-decoration-style: ; text-decoration-color: ; text-decoration-thickness: 1px; text-underline-offset: 3px; padding-bottom: 2px; margin-bottom: 2px; }
.fluent-display-quote { border-left: 4px solid var(--fluent-read-translation-line, #409eff); padding-left: 8px; font-style: italic; }
.fluent-display-side-bar { border-left: 3px solid var(--fluent-read-translation-line, #409eff); padding-left: 10px; }
.fluent-display-border { border: 1px solid var(--fluent-read-translation-line, #409eff); border-radius: 4px; padding: 2px 6px; }
.fluent-display-dashed-border { border: 1px dashed var(--fluent-read-translation-line, #409eff); border-radius: 6px; padding: 3px 8px; }
.fluent-display-learning-mode { background: transparent; }
.fluent-display-learning-mode > .fluent-read-translation-text { background: linear-gradient(transparent 60%,var(--fluent-read-translation-fill-strong, rgba(255, 214, 75, .4)) 0); -webkit-box-decoration-break: clone; box-decoration-break: clone; display: inline !important; }
.fluent-display-marker { background: transparent; padding: 0px; line-height: 1.6; }
.fluent-display-marker > .fluent-read-translation-text { background: var(--fluent-read-translation-fill-strong, rgba(255, 214, 75, .4)); -webkit-box-decoration-break: clone; box-decoration-break: clone; display: inline !important; }
.fluent-display-highlight-fade { background: linear-gradient(104deg,rgba(64,158,255,0) .9%,var(--fluent-read-translation-fill-faint, rgba(64, 158, 255, .1)) 2.4%,var(--fluent-read-translation-fill-soft, rgba(64, 158, 255, .15)) 5.8%,var(--fluent-read-translation-fill-faint, rgba(64, 158, 255, .1)) 93%,var(--fluent-read-translation-fill-faint, rgba(64, 158, 255, .1)) 96%); padding: 0.5em 0.8em; border-radius: 4px; }
.fluent-display-focus { background: linear-gradient(to right,transparent,var(--fluent-read-translation-fill-faint, rgba(64, 158, 255, .1)) 4%,var(--fluent-read-translation-fill-faint, rgba(64, 158, 255, .1)) 96%,transparent); padding: 4px 12px; border-radius: 3px; }
.fluent-display-lightyellow { background-color: var(--fluent-read-translation-fill-soft, rgba(255, 235, 59, .2)); }
.fluent-display-lightblue { background-color: var(--fluent-read-translation-fill-faint, rgba(64, 158, 255, .1)); }
.fluent-display-lightgray { background-color: var(--fluent-read-translation-fill-faint, rgba(158, 158, 158, .1)); }
.fluent-display-card-mode { box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 4px; padding: 4px 8px; border-radius: 4px; background: var(--fluent-read-translation-fill-faint, rgba(64, 158, 255, .1)); }
.fluent-display-modern-card { background: linear-gradient(135deg,var(--fluent-read-translation-surface, #f5f7fa) 0%,var(--fluent-read-translation-surface-deep, #e4e7ed) 100%); border-radius: 8px; padding: 6px 12px; box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 12px; margin: 4px 0px; color: rgb(31, 35, 40); }
.fluent-display-paper { background-color: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px; border: 1px solid var(--fluent-read-translation-line, #eee); padding: 8px 12px; border-radius: 6px; color: rgb(31, 35, 40); }
.fluent-display-tech { font-family: Consolas, monospace; background: rgb(248, 249, 250); padding: 2px 6px; border-radius: 3px; border: 1px solid var(--fluent-read-translation-line, #eee); color: rgb(36, 41, 47); }
.fluent-display-muted-note { font-size: 0.92em; line-height: 1.6; opacity: 0.76; }
.fluent-display-kaiti { font-family: "Kaiti SC", STKaiti, KaiTi, "AR PL UKai CN", "Klee One", YuKyokasho, serif; line-height: 1.7; }
.fluent-display-kaiti[data-fr-translation-owned="true"] { font-family: "Kaiti SC", STKaiti, KaiTi, "AR PL UKai CN", "Klee One", YuKyokasho, serif !important; }
.fluent-display-airy { line-height: 1.9; letter-spacing: 0.03em; }
.fluent-display-indent { text-indent: 2em; }
.fluent-display-thick-underline { text-decoration-line: ; text-decoration-style: ; text-decoration-color: ; text-decoration-thickness: 0.36em; text-underline-offset: -0.16em; text-decoration-skip-ink: none; }
.fluent-display-top-divider { border-top: 1px dashed var(--fluent-read-translation-line, color-mix(in srgb, currentColor 30%, transparent)); padding-top: 6px; }
.fluent-display-arrow-guide { position: relative; padding-inline-start: 1.5em; }
.fluent-display-arrow-guide::before { content: "↳"; position: absolute; inset-inline-start: 0.15em; top: 0px; color: var(--fluent-read-translation-line, color-mix(in srgb, currentColor 50%, transparent)); font-style: normal; font-weight: 400; text-indent: 0px; }
.fluent-display-gradient-bar { border-style: solid; border-width: 0px 0px 0px 3px; border-image: linear-gradient(to bottom,var(--fluent-read-translation-line, #4f8cff),#a855f7 55%,#ec4899) 1; padding-left: 10px; }
.fluent-display-adaptive-tint { background: var(--fluent-read-translation-fill-faint, color-mix(in srgb, currentColor 7%, transparent)); padding: 4px 10px; border-radius: 8px; }
.fluent-display-line-pill { background: transparent; line-height: 1.8; }
.fluent-display-line-pill > .fluent-read-translation-text { padding: 0.12em 0.5em; border-radius: 0.5em; background: var(--fluent-read-translation-fill-soft, color-mix(in srgb, currentColor 10%, transparent)); -webkit-box-decoration-break: clone; box-decoration-break: clone; display: inline !important; }
.fluent-display-glass { background: var(--fluent-read-translation-fill-faint, color-mix(in srgb, currentColor 5%, transparent)); border: 1px solid color-mix(in srgb, currentcolor 14%, transparent 86%); border-radius: 12px; padding: 8px 14px; box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 2px; backdrop-filter: blur(8px) saturate(1.2); }
.fluent-display-sticky-note { background: var(--fluent-read-translation-surface-deep, #fff1a3); color: rgb(59, 51, 32); padding: 8px 12px 10px; border-radius: 2px 2px 16px / 2px 2px 5px; box-shadow: rgba(0, 0, 0, 0.08) 0px 1px 1px, rgba(0, 0, 0, 0.35) 0px 8px 10px -8px; }
.fluent-display-modern-card a, .fluent-display-paper a, .fluent-display-tech a, .fluent-display-sticky-note a { color: rgb(11, 87, 208); }
.fluent-display-chat-bubble { width: fit-content; max-width: 100%; background: var(--fluent-read-translation-fill-soft, color-mix(in srgb, currentColor 9%, transparent)); border-radius: 4px 16px 16px; padding: 6px 12px; }
.fluent-display-terminal { position: relative; font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: 0.94em; line-height: 1.6; background: rgb(16, 21, 28); color: rgb(166, 227, 180); border: 1px solid rgb(38, 50, 66); border-radius: 6px; padding: 6px 12px 6px 2em; }
.fluent-display-terminal::before { content: "❯"; position: absolute; left: 0.75em; top: 6px; color: var(--fluent-read-translation-line, #38bdf8); text-indent: 0px; }
.fluent-display-terminal a { color: rgb(125, 211, 252); }
@supports (color: color-mix(in srgb,red,blue)) and ((-webkit-background-clip: text) or (background-clip: text)) {
  .fluent-display-gradient-text { background: linear-gradient(90deg, color-mix(in srgb, rgb(59, 130, 246) 72%, currentcolor 28%), color-mix(in srgb, rgb(168, 85, 247) 72%, currentcolor 28%) 50%, color-mix(in srgb, rgb(236, 72, 153) 72%, currentcolor 28%)) text; -webkit-text-fill-color: transparent; }
}
.fluent-display-neon { text-shadow: rgba(236, 72, 153, 0.7) 0px 0px 0.3em, rgba(139, 92, 246, 0.65) 0px 0px 0.85em; }
.fluent-display-rainbow-marker { background: transparent; line-height: 1.6; }
.fluent-display-rainbow-marker > .fluent-read-translation-text { background: linear-gradient(90deg, rgba(244, 63, 94, 0.3), rgba(245, 158, 11, 0.3) 25%, rgba(34, 197, 94, 0.3), rgba(59, 130, 246, 0.3) 75%, rgba(168, 85, 247, 0.3)); -webkit-box-decoration-break: clone; box-decoration-break: clone; display: inline !important; }
.fluent-display-rainbow-underline { line-height: 1.7; }
.fluent-display-rainbow-underline > .fluent-read-translation-text { padding-bottom: 3px; background: linear-gradient(90deg, rgb(244, 63, 94), rgb(245, 158, 11) 25%, rgb(34, 197, 94), rgb(59, 130, 246) 75%, rgb(168, 85, 247)) 0px 100% / 100% 2px no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; display: inline !important; }
.fluent-display-hand-drawn { border: 1.5px solid var(--fluent-read-translation-line, color-mix(in srgb, currentColor 55%, transparent)); border-radius: 255px 15px 225px / 15px 225px 15px 255px; padding: 4px 14px; }
.fluent-display-spoiler > .fluent-read-translation-text { border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-color 0.2s; display: inline !important; }
.fluent-display-spoiler:not(:hover) > .fluent-read-translation-text { background-color: currentcolor; }
.fluent-display-spoiler:not(:hover) > .fluent-read-translation-text * { color: inherit !important; }
@media (prefers-reduced-motion: reduce) {
  .fluent-display-spoiler > .fluent-read-translation-text { transition: none; }
}
.fluent-read-bilingual-content[data-fr-personal-correction="true"]::after { content: "个人校订"; font: 400 11px / 1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: inherit; opacity: 0.65; margin-inline-start: 0.5em; white-space: nowrap; user-select: none; }
.fluent-read-retry-wrapper { display: inline-flex !important; max-width: 100% !important; margin-inline-start: 0.45em !important; align-items: center !important; flex-wrap: wrap !important; gap: 0.38em !important; color: inherit !important; font-style: inherit !important; font-variant: inherit !important; font-weight: inherit !important; font-stretch: inherit !important; font-size: inherit !important; font-family: inherit !important; font-optical-sizing: inherit !important; font-size-adjust: inherit !important; font-kerning: inherit !important; font-feature-settings: inherit !important; font-variation-settings: inherit !important; font-language-override: inherit !important; line-height: 1.2 !important; vertical-align: middle !important; white-space: normal !important; pointer-events: auto !important; }
.fluent-read-failure-action { box-sizing: border-box !important; display: inline-flex !important; min-height: 1.7em !important; margin: 0px !important; padding: 0.16em 0.46em !important; border: 1px solid rgba(66, 138, 223, 0.28) !important; align-items: center !important; gap: 0.26em !important; border-radius: 999px !important; color: rgb(47, 120, 201) !important; background: rgba(66, 138, 223, 0.08) !important; box-shadow: none !important; font-variant: inherit !important; font-stretch: inherit !important; font-family: inherit !important; font-optical-sizing: inherit !important; font-size-adjust: inherit !important; font-kerning: inherit !important; font-feature-settings: inherit !important; font-variation-settings: inherit !important; font-language-override: inherit !important; font-size: 0.88em !important; font-style: normal !important; font-weight: 600 !important; letter-spacing: normal !important; line-height: 1.2 !important; text-decoration: none !important; text-transform: none !important; white-space: nowrap !important; cursor: pointer !important; pointer-events: auto !important; user-select: none !important; }
.fluent-read-failure-action:hover, .fluent-read-failure-action:focus-visible { border-color: rgba(66, 138, 223, 0.48) !important; background: rgba(66, 138, 223, 0.14) !important; outline: none !important; box-shadow: rgba(66, 138, 223, 0.12) 0px 0px 0px 2px !important; }
.fluent-read-reason { border-color: rgba(180, 107, 0, 0.28) !important; color: rgb(154, 91, 18) !important; background: rgba(245, 158, 11, 0.08) !important; }
.fluent-read-reason:hover, .fluent-read-reason:focus-visible { border-color: rgba(180, 107, 0, 0.46) !important; background: rgba(245, 158, 11, 0.14) !important; box-shadow: rgba(245, 158, 11, 0.12) 0px 0px 0px 2px !important; }
.fluent-read-action-icon { display: inline-flex !important; width: 1em !important; height: 1em !important; flex: 0 0 1em !important; margin: 0px !important; padding: 0px !important; align-items: center !important; justify-content: center !important; color: inherit !important; line-height: 1 !important; pointer-events: none !important; }
.fluent-read-action-icon > svg { display: block !important; width: 100% !important; height: 100% !important; margin: 0px !important; pointer-events: none !important; }
.fluent-read-action-icon > svg path { fill: currentcolor !important; }
.fluent-read-action-label { color: inherit !important; font: inherit !important; pointer-events: none !important; }
.fluent-read-image-translation-overlay { position: fixed; z-index: 2147483646; pointer-events: none; overflow: hidden; }
.fluent-read-image-translation-canvas { position: absolute; inset: 0px; display: none; width: 100%; height: 100%; pointer-events: none; }
.fluent-read-image-translation-button { position: absolute; left: 8px; bottom: 8px; width: 26px; height: 26px; padding: 0px; border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 999px; background: rgba(20, 20, 20, 0.68); color: rgba(255, 255, 255, 0.95); box-shadow: rgba(0, 0, 0, 0.28) 0px 1px 5px; cursor: pointer; font-size: 14px; line-height: 24px; opacity: 0.78; pointer-events: auto; transition: opacity 0.15s, transform 0.15s, background 0.15s; z-index: 1; }
.fluent-read-image-translation-button:hover, .fluent-read-image-translation-button:focus-visible { background: rgba(20, 20, 20, 0.9); opacity: 1; outline: none; transform: scale(1.06); }
.fluent-read-image-translation-button[data-phase="loading"] { animation: 1.1s ease-in-out 0s infinite normal none running fluent-read-image-translation-pulse; }
.fluent-read-image-translation-button[data-phase="error"] { background: rgba(185, 28, 28, 0.88); }
@keyframes fluent-read-image-translation-pulse { 
  0%, 100% { opacity: 0.52; }
  50% { opacity: 1; }
}
@keyframes fluent-read-input-box-translating { 
  0% { box-shadow: rgba(59, 130, 246, 0.15) 0px 0px 0px 2px; }
  50% { box-shadow: rgba(59, 130, 246, 0.25) 0px 0px 0px 2px; }
  100% { box-shadow: rgba(59, 130, 246, 0.15) 0px 0px 0px 2px; }
}
@keyframes fluent-read-input-box-success { 
  0% { box-shadow: rgba(34, 197, 94, 0.4) 0px 0px 0px 2px; }
  50% { box-shadow: rgba(34, 197, 94, 0.3) 0px 0px 0px 3px; }
  100% { box-shadow: none; }
}
@keyframes fluent-read-input-box-error { 
  0% { box-shadow: rgba(239, 68, 68, 0.4) 0px 0px 0px 2px; transform: translate(0px); }
  25% { transform: translate(-1px); }
  75% { transform: translate(1px); }
  100% { box-shadow: none; transform: translate(0px); }
}
.fluent-input-translating { animation: 3s ease-in-out 0s infinite normal none running fluent-read-input-box-translating; transition: 0.3s; }
.fluent-input-success { animation: 1.5s ease-out 0s 1 normal none running fluent-read-input-box-success; }
.fluent-input-error { animation: 0.5s ease-out 0s 1 normal none running fluent-read-input-box-error; }
.fluent-input-tooltip { position: fixed; background: rgba(0, 0, 0, 0.75); color: rgb(255, 255, 255); padding: 8px 12px; border-radius: 6px; font-size: 12px; font-weight: 400; z-index: 10000; pointer-events: none; transition: 0.2s; backdrop-filter: blur(8px); box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 12px; transform: translateY(3px); }
.fluent-input-tooltip.show { opacity: 1; transform: translateY(0px); }
.fluent-input-tooltip.hide { opacity: 0; transform: translateY(-5px); }
.fluent-input-tooltip.translating { background: rgba(59, 130, 246, 0.85); }
.fluent-input-tooltip.success { background: rgba(34, 197, 94, 0.85); }
.fluent-input-tooltip.error { background: rgba(239, 68, 68, 0.85); }
.fluent-read-source-line[data-fr-translation-segment="true"] { display: inline-block; width: 100%; max-width: 100%; vertical-align: top; }
[data-listview-item-title-container="true"] > h3:has(.fluent-read-bilingual-content[data-fr-translation-owned="true"]) { display: inline-block; max-width: 100%; vertical-align: top; }
:is([role="tooltip"], .tooltip:has(> .tooltip-inner)):is([data-fr-tooltip-translation-active="true"], [data-fr-tooltip-translation-active="true"] *, :has([data-fr-tooltip-translation-active="true"]), :has(:is(.fluent-read-bilingual-content, .fluent-read-single-slot, .fluent-read-loading)[data-fr-translation-owned="true"])):not([tabindex], [contenteditable]:not([contenteditable="false"])):not(:has(a[href], button, input, select, textarea, summary, [tabindex], [contenteditable]:not([contenteditable="false"]), [role="button"], [role="link"], [role="dialog"])), :is([role="tooltip"], .tooltip:has(> .tooltip-inner)):is([data-fr-tooltip-translation-active="true"], [data-fr-tooltip-translation-active="true"] *, :has([data-fr-tooltip-translation-active="true"]), :has(:is(.fluent-read-bilingual-content, .fluent-read-single-slot, .fluent-read-loading)[data-fr-translation-owned="true"])):not([tabindex], [contenteditable]:not([contenteditable="false"])):not(:has(a[href], button, input, select, textarea, summary, [tabindex], [contenteditable]:not([contenteditable="false"]), [role="button"], [role="link"], [role="dialog"])) * { pointer-events: none !important; }
[data-fr-bilingual-sentence-highlight-style="rose"]::highlight(fluentread-bilingual-sentence), [data-fr-bilingual-sentence-highlight-style="rose"] ::highlight(fluentread-bilingual-sentence), .bilingual-highlight-preview[data-fr-bilingual-sentence-highlight-style="rose"] .is-sentence-highlighted { background-color: rgba(239, 71, 118, 0.2); text-decoration: underline 1px rgba(239, 71, 118, 0.72); }
[data-fr-bilingual-sentence-highlight-style="mint"]::highlight(fluentread-bilingual-sentence), [data-fr-bilingual-sentence-highlight-style="mint"] ::highlight(fluentread-bilingual-sentence), .bilingual-highlight-preview[data-fr-bilingual-sentence-highlight-style="mint"] .is-sentence-highlighted { background-color: rgba(45, 182, 153, 0.2); text-decoration: underline 1px rgba(35, 160, 135, 0.8); }
[data-fr-bilingual-sentence-highlight-style="sky"]::highlight(fluentread-bilingual-sentence), [data-fr-bilingual-sentence-highlight-style="sky"] ::highlight(fluentread-bilingual-sentence), .bilingual-highlight-preview[data-fr-bilingual-sentence-highlight-style="sky"] .is-sentence-highlighted { background-color: rgba(83, 151, 235, 0.22); text-decoration: underline 1px rgba(83, 151, 235, 0.85); }
[data-fr-bilingual-sentence-highlight-style="underline"]::highlight(fluentread-bilingual-sentence), [data-fr-bilingual-sentence-highlight-style="underline"] ::highlight(fluentread-bilingual-sentence), .bilingual-highlight-preview[data-fr-bilingual-sentence-highlight-style="underline"] .is-sentence-highlighted { background-color: transparent; text-decoration: underline 2px rgba(130, 116, 224, 0.9); }
[data-fr-bilingual-sentence-highlight-style="amber"]::highlight(fluentread-bilingual-sentence), [data-fr-bilingual-sentence-highlight-style="amber"] ::highlight(fluentread-bilingual-sentence), .bilingual-highlight-preview[data-fr-bilingual-sentence-highlight-style="amber"] .is-sentence-highlighted { background-color: rgba(245, 178, 65, 0.23); text-decoration: underline 1px rgba(202, 133, 26, 0.85); }
[data-fr-bilingual-sentence-highlight-style="lavender"]::highlight(fluentread-bilingual-sentence), [data-fr-bilingual-sentence-highlight-style="lavender"] ::highlight(fluentread-bilingual-sentence), .bilingual-highlight-preview[data-fr-bilingual-sentence-highlight-style="lavender"] .is-sentence-highlighted { background-color: rgba(167, 139, 250, 0.22); text-decoration: underline 1px rgba(139, 111, 219, 0.85); }
[data-fr-bilingual-sentence-highlight-style="slate"]::highlight(fluentread-bilingual-sentence), [data-fr-bilingual-sentence-highlight-style="slate"] ::highlight(fluentread-bilingual-sentence), .bilingual-highlight-preview[data-fr-bilingual-sentence-highlight-style="slate"] .is-sentence-highlighted { background-color: rgba(148, 163, 184, 0.18); text-decoration: underline 1px rgba(120, 138, 160, 0.85); }
[data-fr-bilingual-sentence-highlight-style="dotted"]::highlight(fluentread-bilingual-sentence), [data-fr-bilingual-sentence-highlight-style="dotted"] ::highlight(fluentread-bilingual-sentence), .bilingual-highlight-preview[data-fr-bilingual-sentence-highlight-style="dotted"] .is-sentence-highlighted { background-color: transparent; text-decoration: underline 2px dotted rgba(83, 151, 235, 0.9); }
::highlight(fluentread-vocabulary-reencounter) { text-decoration: underline 1px dotted rgb(197, 138, 55); text-underline-offset: 3px; }
@media (prefers-color-scheme: dark) {
  ::highlight(fluentread-vocabulary-reencounter) { text-decoration-color: rgb(233, 183, 102); }
}

.component-tools.compact-add-tools .component-add-card .component-icon { display: grid !important; place-items: center !important; width: 32px !important; height: 32px !important; flex: 0 0 32px !important; border-radius: 10px !important; background: rgb(238, 245, 255) !important; color: rgb(37, 99, 235) !important; border: 0px !important; box-shadow: none !important; font-size: 0px !important; line-height: 0 !important; transition: background 0.16s, color 0.16s, transform 0.16s !important; }
.component-tools.compact-add-tools .component-add-card .component-icon svg { display: block !important; width: 19px !important; height: 19px !important; fill: none !important; stroke: currentcolor !important; stroke-width: 1.75 !important; stroke-linecap: round !important; stroke-linejoin: round !important; overflow: visible !important; }
.component-tools.compact-add-tools .component-add-card .component-icon svg * { fill: none !important; stroke: currentcolor !important; stroke-width: 1.75 !important; stroke-linecap: round !important; stroke-linejoin: round !important; }
.component-tools.compact-add-tools .component-add-card:hover .component-icon { transform: translateY(-1px); background: rgb(225, 237, 255) !important; color: rgb(29, 78, 216) !important; }
.component-tools.compact-add-tools .component-add-card.primary .component-icon, .component-tools.compact-add-tools .btn.primary .component-icon { background: rgb(229, 239, 255) !important; color: rgb(29, 78, 216) !important; border: 0px !important; box-shadow: none !important; }
.component-tools.compact-add-tools .component-add-card:active .component-icon { transform: scale(0.96); }

.site-section.html-section:has(.bsx) { padding: 0px !important; animation: auto ease 0s 1 normal none running none !important; }
.site-section.html-section:has(.bsx) > p:empty { display: none; }
.section-custom-html:has(> .bsx) { border: 0px !important; background: none !important; padding: 0px !important; margin: 0px !important; }
div.bsx.bsx.bsx.bsx { font-size: 16px; line-height: 1.75; text-align: left; }
div.bsx.bsx.bsx.bsx :is(h1, h2, h3, p, a, span, small, strong, em) { font-size: inherit; line-height: inherit; color: inherit; font-weight: inherit; margin: 0px; letter-spacing: inherit; transform: none; opacity: 1; white-space: normal; text-decoration: none; }
div.bsx.bsx.bsx.bsx :is(h1, h2, h3, strong) { font-weight: 700; }
div.bsx.bsx.bsx.bsx :is(h1, h2, h3) { line-height: 1.2; }
div.bsx.bsx.bsx.bsx img { transform: none; }
div.bsx.bsx.bsx.bsx { --bg: #ffffff; --surface: #f4f8ff; --paper: #142b46; --accent: #0877d7; --blue: #1688e9; --muted: #60758c; --line: #dae5f1; --pad: clamp(22px,5.8vw,96px); --header: 92px; color-scheme: light; font-size: 16px; }
div.bsx.bsx.bsx.bsx * { box-sizing: border-box; }
div.bsx.bsx.bsx.bsx { scroll-behavior: smooth; scroll-padding-top: 110px; }
div.bsx.bsx.bsx.bsx { margin: 0px; color: var(--paper); background: var(--bg); font-family: Arial, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 1.75; -webkit-font-smoothing: antialiased; }
div.bsx.bsx.bsx.bsx a { color: inherit; text-decoration: none; }
div.bsx.bsx.bsx.bsx button, div.bsx.bsx.bsx.bsx input, div.bsx.bsx.bsx.bsx textarea { font: inherit; }
div.bsx.bsx.bsx.bsx button, div.bsx.bsx.bsx.bsx a, div.bsx.bsx.bsx.bsx input, div.bsx.bsx.bsx.bsx textarea { -webkit-tap-highlight-color: transparent; }
div.bsx.bsx.bsx.bsx button { cursor: pointer; }
div.bsx.bsx.bsx.bsx a:focus-visible, div.bsx.bsx.bsx.bsx button:focus-visible, div.bsx.bsx.bsx.bsx input:focus-visible, div.bsx.bsx.bsx.bsx textarea:focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; }
div.bsx.bsx.bsx.bsx button:disabled { cursor: default; }
div.bsx.bsx.bsx.bsx img { display: block; max-width: 100%; height: auto; }
div.bsx.bsx.bsx.bsx h1, div.bsx.bsx.bsx.bsx h2, div.bsx.bsx.bsx.bsx h3, div.bsx.bsx.bsx.bsx p, div.bsx.bsx.bsx.bsx figure { margin: 0px; }
div.bsx.bsx.bsx.bsx h1, div.bsx.bsx.bsx.bsx h2, div.bsx.bsx.bsx.bsx h3 { line-height: 1.2; }
div.bsx.bsx.bsx.bsx p { overflow-wrap: break-word; }
div.bsx.bsx.bsx.bsx h2 { font-size: clamp(32px, 4vw, 68px); font-weight: 700; letter-spacing: -0.045em; }
div.bsx.bsx.bsx.bsx h3 { font-size: 24.8px; font-weight: 600; }
div.bsx.bsx.bsx.bsx ::selection { background: var(--accent); color: rgb(255, 255, 255); }
div.bsx.bsx.bsx.bsx .bs-skip { position: fixed; top: -100px; z-index: 80; background: var(--accent); color: rgb(17, 17, 17); padding: 12px; }
div.bsx.bsx.bsx.bsx .bs-skip:focus { top: 10px; }
div.bsx.bsx.bsx.bsx .bs-site-header { height: var(--header); padding: 0 var(--pad); display: flex; align-items: center; justify-content: space-between; gap: 35px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, 0.96); position: sticky; top: 0px; z-index: 30; backdrop-filter: blur(16px); }
div.bsx.bsx.bsx.bsx .bs-wordmark { display: flex; gap: 13px; align-items: center; font-weight: 800; font-size: 21.6px; line-height: 1.06; letter-spacing: -0.025em; flex-shrink: 0; }
div.bsx.bsx.bsx.bsx .bs-wordmark img { width: 42px; height: 42px; object-fit: contain; background: white; border-radius: 50%; }
div.bsx.bsx.bsx.bsx .bs-studio-word { display: block; font-size: 12px; font-weight: 500; letter-spacing: 0.22em; margin-top: 5px; }
div.bsx.bsx.bsx.bsx .bs-site-header nav { display: flex; align-items: center; gap: clamp(18px, 2.5vw, 40px); font-size: 15px; }
div.bsx.bsx.bsx.bsx .bs-site-header nav a { position: relative; padding: 14px 0px; color: rgb(80, 100, 125); }
div.bsx.bsx.bsx.bsx .bs-site-header nav a:hover, div.bsx.bsx.bsx.bsx .bs-site-header nav a[aria-current] { color: var(--accent); }
div.bsx.bsx.bsx.bsx .bs-site-header nav a[aria-current]::after { content: ""; position: absolute; bottom: 4px; left: 0px; width: 20px; height: 2px; background: var(--accent); }
div.bsx.bsx.bsx.bsx .bs-site-header nav .bs-nav-contact { border: 1px solid var(--accent); color: var(--accent); padding: 11px 22px; margin-left: 8px; }
div.bsx.bsx.bsx.bsx .bs-site-header nav .bs-nav-contact:hover { background: var(--accent); color: var(--bg); }
div.bsx.bsx.bsx.bsx .bs-site-header nav .bs-nav-contact::after { display: none; }
div.bsx.bsx.bsx.bsx .bs-menu-toggle { display: none; }
div.bsx.bsx.bsx.bsx .bs-section-pad { padding: 100px var(--pad); }
div.bsx.bsx.bsx.bsx .bs-section-label { display: block; font-size: 14px; font-weight: 500; letter-spacing: 0.13em; color: var(--muted); line-height: 1.6; }
div.bsx.bsx.bsx.bsx .bs-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 52px; }
div.bsx.bsx.bsx.bsx .bs-section-head h2 { margin-top: 14px; }
div.bsx.bsx.bsx.bsx .bs-section-head > p { font-size: 16px; max-width: 400px; color: var(--muted); }
div.bsx.bsx.bsx.bsx .bs-editorial-copy { font-size: 17px; line-height: 2; color: rgb(80, 100, 125); }
div.bsx.bsx.bsx.bsx .bs-editorial-copy p + p { margin-top: 24px; }
div.bsx.bsx.bsx.bsx .bs-editorial-copy strong { color: var(--paper); font-weight: 600; }
div.bsx.bsx.bsx.bsx .bs-editorial-copy br + br { line-height: 2.4; }
div.bsx.bsx.bsx.bsx .bs-text-link { display: inline-block; border-bottom: 1px solid var(--accent); padding: 9px 0px; margin-top: 28px; font-weight: 500; color: var(--accent); font-size: 16px; }
div.bsx.bsx.bsx.bsx .bs-text-link:hover { color: rgb(0, 75, 145); }
div.bsx.bsx.bsx.bsx .bs-button { display: inline-flex; justify-content: center; align-items: center; padding: 15px 28px; min-height: 54px; font-size: 16px; font-weight: 600; border: 1px solid transparent; transition: background 0.2s, color 0.2s; }
div.bsx.bsx.bsx.bsx .bs-button-primary { background: var(--accent); color: rgb(255, 255, 255); }
div.bsx.bsx.bsx.bsx .bs-button-primary:hover { background: rgb(5, 102, 187); }
div.bsx.bsx.bsx.bsx .bs-button-outline { border-color: rgb(185, 205, 224); color: var(--paper); }
div.bsx.bsx.bsx.bsx .bs-button-outline:hover { border-color: var(--accent); color: var(--accent); }
div.bsx.bsx.bsx.bsx .bs-button-dark { background: var(--bg); color: var(--paper); }
div.bsx.bsx.bsx.bsx .bs-button-dark:hover { background: rgb(229, 241, 255); }
div.bsx.bsx.bsx.bsx .bs-button-dark-outline { border-color: var(--bg); color: var(--bg); }
div.bsx.bsx.bsx.bsx .bs-button-dark-outline:hover { background: var(--bg); color: var(--paper); }
div.bsx.bsx.bsx.bsx .bs-home-hero { position: relative; padding: 35px var(--pad) 24px; min-height: calc(100svh - var(--header)); display: flex; flex-direction: column; background: var(--bg); overflow: hidden; }
div.bsx.bsx.bsx.bsx .bs-hero-topline, div.bsx.bsx.bsx.bsx .bs-hero-bottom { display: flex; justify-content: space-between; gap: 20px; font-size: 14px; letter-spacing: 0.12em; color: var(--muted); }
div.bsx.bsx.bsx.bsx .bs-hero-topline { padding-bottom: 20px; }
div.bsx.bsx.bsx.bsx .bs-hero-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; align-items: center; flex: 1 1 0%; gap: 40px; min-height: 560px; }
div.bsx.bsx.bsx.bsx .bs-hero-copy { padding: 50px 0px; }
div.bsx.bsx.bsx.bsx .bs-hero-copy h1 { font-size: clamp(72px, 8.8vw, 144px); letter-spacing: -0.065em; font-weight: 800; line-height: 1.2; }
div.bsx.bsx.bsx.bsx .bs-hero-copy h1 span { color: var(--accent); }
div.bsx.bsx.bsx.bsx .bs-hero-studio { font-size: 16px; letter-spacing: 0.32em; color: var(--muted); margin-top: 26px; }
div.bsx.bsx.bsx.bsx .bs-hero-actions { display: flex; gap: 16px; margin-top: 43px; }
div.bsx.bsx.bsx.bsx .bs-hero-visual { position: relative; align-self: stretch; display: flex; align-items: center; justify-content: center; min-width: 0px; }
div.bsx.bsx.bsx.bsx .bs-hero-character { max-width: 92%; height: 520px; object-fit: contain; align-self: end; }
div.bsx.bsx.bsx.bsx .bs-hero-image-caption { position: absolute; right: 0px; bottom: 8px; font-size: 12px; color: var(--muted); letter-spacing: 0.13em; }
div.bsx.bsx.bsx.bsx .bs-hero-bottom { padding-top: 24px; border-top: 1px solid var(--line); }
div.bsx.bsx.bsx.bsx .bs-hero-bottom a { color: var(--accent); }
div.bsx.bsx.bsx.bsx .bs-home-about { border-top: 1px solid var(--line); }
div.bsx.bsx.bsx.bsx .bs-home-about-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 80px; align-items: center; }
div.bsx.bsx.bsx.bsx .bs-home-about .bs-editorial-copy p { font-size: 17px; line-height: 2.2; }
div.bsx.bsx.bsx.bsx .bs-services-section { background: var(--surface); }
div.bsx.bsx.bsx.bsx .bs-service-directory { border-top: 1px solid var(--line); }
div.bsx.bsx.bsx.bsx .bs-service-entry { display: grid; grid-template-columns: 80px 1fr 140px 130px; gap: 25px; align-items: center; border-bottom: 1px solid var(--line); padding: 35px 0px; transition: padding 0.2s; }
div.bsx.bsx.bsx.bsx .bs-service-entry:hover { padding-left: 15px; padding-right: 15px; background: rgb(232, 243, 255); }
div.bsx.bsx.bsx.bsx .bs-item-number { font-size: 14px; letter-spacing: 0.08em; color: var(--accent); }
div.bsx.bsx.bsx.bsx .bs-service-entry h3 { font-size: clamp(40px, 4.2vw, 68px); margin-top: 8px; letter-spacing: -0.06em; }
div.bsx.bsx.bsx.bsx .bs-service-entry img { width: 92px; height: 92px; object-fit: contain; justify-self: center; }
div.bsx.bsx.bsx.bsx .bs-service-action { font-size: 16px; color: var(--accent); justify-self: end; }
div.bsx.bsx.bsx.bsx .bs-page-intro { background: var(--accent); color: var(--bg); padding: 70px var(--pad) 78px; }
div.bsx.bsx.bsx.bsx .bs-page-intro .bs-section-label { color: rgb(90, 99, 51); }
div.bsx.bsx.bsx.bsx .bs-page-intro-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 90px; margin-top: 26px; }
div.bsx.bsx.bsx.bsx .bs-page-intro h1 { font-size: clamp(59.2px, 7.5vw, 120px); line-height: 1.22; font-weight: 800; letter-spacing: -0.06em; }
div.bsx.bsx.bsx.bsx .bs-page-intro-copy { max-width: 560px; font-size: 17px; line-height: 1.9; }
div.bsx.bsx.bsx.bsx .bs-page-intro-copy p { margin-bottom: 7px; }
div.bsx.bsx.bsx.bsx .bs-page-intro-copy strong { font-weight: 500; }
div.bsx.bsx.bsx.bsx .bs-about-story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
div.bsx.bsx.bsx.bsx .bs-about-story-grid .bs-media-player { position: sticky; top: 140px; }
div.bsx.bsx.bsx.bsx .bs-vision-section { background: var(--surface); }
div.bsx.bsx.bsx.bsx .bs-vision-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
div.bsx.bsx.bsx.bsx .bs-vision-grid article { border-top: 1px solid var(--line); padding-top: 25px; }
div.bsx.bsx.bsx.bsx .bs-vision-grid h3 { font-size: 32px; margin: 22px 0px 16px; }
div.bsx.bsx.bsx.bsx .bs-vision-grid p { font-size: 17px; color: var(--muted); }
div.bsx.bsx.bsx.bsx .bs-team-grid { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 65px 34px; }
div.bsx.bsx.bsx.bsx .bs-team-member img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 25px; }
div.bsx.bsx.bsx.bsx .bs-team-member .bs-section-label { font-size: 14px; margin-bottom: 10px; }
div.bsx.bsx.bsx.bsx .bs-team-member h3 { font-size: 28px; margin-bottom: 18px; }
div.bsx.bsx.bsx.bsx .bs-team-member p { font-size: 16px; color: var(--muted); line-height: 1.85; }
div.bsx.bsx.bsx.bsx .bs-team-member a { display: block; }
div.bsx.bsx.bsx.bsx .bs-service-chapters { padding-top: 20px; padding-bottom: 40px; }
div.bsx.bsx.bsx.bsx .bs-service-chapter { display: grid; grid-template-columns: 1fr 1.15fr; gap: 80px; padding: 85px 0px; align-items: center; border-bottom: 1px solid var(--line); }
div.bsx.bsx.bsx.bsx .bs-service-chapter:last-child { border-bottom: 0px; }
div.bsx.bsx.bsx.bsx .bs-service-chapter:nth-child(2n) { grid-template-columns: 1.15fr 1fr; }
div.bsx.bsx.bsx.bsx .bs-service-chapter:nth-child(2n) .bs-chapter-copy { order: 2; }
div.bsx.bsx.bsx.bsx .bs-chapter-label { display: flex; gap: 30px; justify-content: space-between; font-size: 13px; color: var(--muted); letter-spacing: 0.05em; border-top: 1px solid var(--line); padding-top: 20px; }
div.bsx.bsx.bsx.bsx .bs-chapter-label span:first-child { color: var(--accent); }
div.bsx.bsx.bsx.bsx .bs-chapter-copy h2 { font-size: clamp(32px, 3.3vw, 52px); margin: 28px 0px 24px; }
div.bsx.bsx.bsx.bsx .bs-service-chapter figure img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
div.bsx.bsx.bsx.bsx .bs-work-section { background: var(--surface); }
div.bsx.bsx.bsx.bsx .bs-video-gallery { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 35px; }
div.bsx.bsx.bsx.bsx .bs-work-index { font-size: 14px; margin-top: 17px; color: var(--muted); letter-spacing: 0.08em; }
div.bsx.bsx.bsx.bsx .bs-media-player { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: rgb(8, 9, 9); min-width: 0px; }
div.bsx.bsx.bsx.bsx .bs-video-launch { position: absolute; inset: 0px; width: 100%; height: 100%; padding: 0px; background: transparent; border: 0px; display: block; color: white; text-align: center; overflow: hidden; }
div.bsx.bsx.bsx.bsx .bs-video-launch img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s; }
div.bsx.bsx.bsx.bsx .bs-video-launch::after { content: ""; position: absolute; inset: 0px; background: linear-gradient(transparent 40%, rgba(0, 0, 0, 0.6)); pointer-events: none; }
div.bsx.bsx.bsx.bsx .bs-video-launch:hover img { transform: scale(1.04); }
div.bsx.bsx.bsx.bsx .bs-play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 62px; height: 62px; display: grid; place-content: center; padding-left: 4px; background: var(--accent); color: rgb(255, 255, 255); font-size: 17.6px; border-radius: 50%; z-index: 2; }
div.bsx.bsx.bsx.bsx .bs-play-caption { position: absolute; bottom: 21px; left: 25px; font-size: 16px; z-index: 2; }
div.bsx.bsx.bsx.bsx .bs-media-player iframe { position: absolute; inset: 0px; border: 0px; width: 100%; height: 100%; }
div.bsx.bsx.bsx.bsx .bs-photo-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
div.bsx.bsx.bsx.bsx .bs-photo-button { display: block; border: 0px; padding: 0px; background: none; color: white; position: relative; overflow: hidden; }
div.bsx.bsx.bsx.bsx .bs-photo-button img { width: 100%; height: auto; min-height: 190px; object-fit: cover; transition: transform 0.5s; }
div.bsx.bsx.bsx.bsx .bs-photo-button:hover img { transform: scale(1.025); }
div.bsx.bsx.bsx.bsx .bs-photo-button span { position: absolute; bottom: 12px; left: 16px; background: rgba(18, 19, 19, 0.667); padding: 4px 10px; font-size: 13px; }
div.bsx.bsx.bsx.bsx .bs-photo-button:nth-child(3n+2) { margin-top: 45px; }
div.bsx.bsx.bsx.bsx .bs-advantages { border-top: 1px solid var(--line); }
div.bsx.bsx.bsx.bsx .bs-advantage-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
div.bsx.bsx.bsx.bsx .bs-advantage-grid article { border-top: 1px solid var(--line); padding-top: 23px; }
div.bsx.bsx.bsx.bsx .bs-advantage-grid h3 { font-size: 26.4px; margin: 22px 0px 20px; }
div.bsx.bsx.bsx.bsx .bs-advantage-grid p { color: var(--muted); font-size: 16px; line-height: 1.9; }
div.bsx.bsx.bsx.bsx [data-page="music"] .bs-advantage-grid { grid-template-columns: repeat(3, 1fr); }
div.bsx.bsx.bsx.bsx .bs-service-cta { padding: 65px var(--pad); display: flex; justify-content: space-between; align-items: center; gap: 30px; background: var(--accent); color: var(--bg); }
div.bsx.bsx.bsx.bsx .bs-service-cta h2 { font-size: clamp(32px, 4vw, 64px); }
div.bsx.bsx.bsx.bsx .bs-service-cta > div { display: flex; gap: 15px; }
div.bsx.bsx.bsx.bsx .bs-price-nav { position: sticky; top: var(--header); z-index: 15; background: rgb(244, 248, 255); border-bottom: 1px solid var(--line); display: flex; gap: 45px; padding: 24px var(--pad); font-size: 16px; }
div.bsx.bsx.bsx.bsx .bs-price-nav a:hover { color: var(--accent); }
div.bsx.bsx.bsx.bsx .bs-pricing-section { scroll-margin-top: 170px; }
div.bsx.bsx.bsx.bsx .bs-pricing-section + .bs-pricing-section { padding-top: 25px; }
div.bsx.bsx.bsx.bsx .bs-pricing-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 55px 50px; align-items: start; }
div.bsx.bsx.bsx.bsx .bs-price-group { min-width: 0px; }
div.bsx.bsx.bsx.bsx .bs-price-group h3 { font-size: 27.2px; margin-bottom: 23px; display: flex; gap: 25px; align-items: center; }
div.bsx.bsx.bsx.bsx .bs-price-group h3 span { color: var(--accent); font-size: 14px; font-weight: 400; }
div.bsx.bsx.bsx.bsx .bs-price-group table { border-collapse: collapse; width: 100%; font-size: 16px; table-layout: fixed; }
div.bsx.bsx.bsx.bsx .bs-price-group thead { font-size: 13px; color: var(--muted); }
div.bsx.bsx.bsx.bsx .bs-price-group th, div.bsx.bsx.bsx.bsx .bs-price-group td { text-align: left; font-weight: 400; padding: 17px 10px 17px 0px; vertical-align: top; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
div.bsx.bsx.bsx.bsx .bs-price-group th:first-child { width: 35%; }
div.bsx.bsx.bsx.bsx .bs-price-group td:nth-child(2) { width: 37%; font-size: 15px; color: var(--muted); }
div.bsx.bsx.bsx.bsx .bs-price-group th:last-child, div.bsx.bsx.bsx.bsx .bs-price-group td:last-child { text-align: right; padding-right: 0px; width: 28%; }
div.bsx.bsx.bsx.bsx .bs-price-group td.bs-price { color: var(--accent); font-weight: 500; font-size: 17px; }
div.bsx.bsx.bsx.bsx .bs-price-group:last-child:nth-child(2n+1) { grid-column: 1 / -1; max-width: 100%; }
div.bsx.bsx.bsx.bsx [data-page="quotation"] .bs-page-intro-copy { font-size: 16px; }
div.bsx.bsx.bsx.bsx .bs-founder-section { display: grid; grid-template-columns: 0.6fr 1fr; gap: 100px; align-items: center; }
div.bsx.bsx.bsx.bsx .bs-founder-photo img { width: 100%; max-height: 540px; object-fit: contain; background: rgb(255, 255, 255); }
div.bsx.bsx.bsx.bsx .bs-founder-section .bs-editorial-copy p { font-size: 18px; line-height: 2.1; }
div.bsx.bsx.bsx.bsx .bs-inline-links { display: flex; gap: 40px; }
div.bsx.bsx.bsx.bsx .bs-brands-section { background: var(--surface); }
div.bsx.bsx.bsx.bsx .bs-brand-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; background: rgb(223, 223, 223); }
div.bsx.bsx.bsx.bsx .bs-brand-grid img { width: 100%; aspect-ratio: 1.2 / 1; object-fit: contain; background: white; padding: 25px; }
div.bsx.bsx.bsx.bsx .bs-process-list { list-style: none; padding: 0px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 35px; margin: 0px; }
div.bsx.bsx.bsx.bsx .bs-process-list li { padding-top: 24px; border-top: 1px solid var(--line); }
div.bsx.bsx.bsx.bsx .bs-process-list span { display: block; font-size: 43.2px; font-weight: 400; color: var(--accent); margin-bottom: 20px; }
div.bsx.bsx.bsx.bsx .bs-process-list h3 { font-size: 27.2px; }
div.bsx.bsx.bsx.bsx .bs-contact-section { background: var(--surface); border-top: 1px solid var(--line); }
div.bsx.bsx.bsx.bsx .bs-contact-section > .bs-section-label { margin-bottom: 28px; }
div.bsx.bsx.bsx.bsx .bs-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 110px; }
div.bsx.bsx.bsx.bsx .bs-contact-grid h2 { font-size: clamp(40px, 4.2vw, 72px); }
div.bsx.bsx.bsx.bsx .bs-contact-grid .bs-intro { font-size: 17px; margin-top: 24px; color: var(--muted); }
div.bsx.bsx.bsx.bsx .bs-contact-details { margin: 38px 0px 0px; }
div.bsx.bsx.bsx.bsx .bs-contact-details > div { display: grid; grid-template-columns: 100px 1fr; gap: 15px; border-bottom: 1px solid var(--line); padding: 16px 0px; align-items: baseline; }
div.bsx.bsx.bsx.bsx .bs-contact-details dt { font-size: 14px; color: var(--muted); }
div.bsx.bsx.bsx.bsx .bs-contact-details dd { margin: 0px; font-size: 17px; overflow-wrap: anywhere; }
div.bsx.bsx.bsx.bsx .bs-contact-details dd a:hover { color: var(--accent); }
div.bsx.bsx.bsx.bsx .bs-contact-details small { display: block; font-size: 14px; color: var(--muted); margin-top: 4px; }
div.bsx.bsx.bsx.bsx .bs-contact-form { display: flex; flex-direction: column; }
div.bsx.bsx.bsx.bsx .bs-contact-form label { font-size: 14px; color: rgb(70, 94, 118); margin-bottom: 7px; }
div.bsx.bsx.bsx.bsx .bs-contact-form input:not([type="hidden"]), div.bsx.bsx.bsx.bsx .bs-contact-form textarea { width: 100%; padding: 13px 0px; border-width: 0px 0px 1px; border-style: none none solid; border-color: currentcolor currentcolor rgb(170, 191, 213); border-image: none; background: transparent; color: var(--paper); border-radius: 0px; margin-bottom: 26px; font-size: 17px; outline-offset: 4px; }
div.bsx.bsx.bsx.bsx .bs-contact-form input::placeholder, div.bsx.bsx.bsx.bsx .bs-contact-form textarea::placeholder { color: rgb(112, 132, 154); }
div.bsx.bsx.bsx.bsx .bs-contact-form textarea { resize: vertical; min-height: 140px; }
div.bsx.bsx.bsx.bsx .bs-contact-form .bs-button { align-self: flex-start; min-width: 160px; margin-top: 2px; }
div.bsx.bsx.bsx.bsx .bs-site-footer { padding: 70px var(--pad) 28px; }
div.bsx.bsx.bsx.bsx .bs-footer-name { display: block; font-size: clamp(48px, 9.3vw, 144px); font-weight: 800; line-height: 1; letter-spacing: -0.065em; }
div.bsx.bsx.bsx.bsx .bs-footer-name span { margin-left: 25px; color: var(--accent); }
div.bsx.bsx.bsx.bsx .bs-footer-links { display: flex; gap: 45px; margin-top: 36px; font-size: 16px; color: var(--muted); }
div.bsx.bsx.bsx.bsx .bs-footer-links a:hover { color: var(--accent); }
div.bsx.bsx.bsx.bsx .bs-footer-base { display: flex; justify-content: space-between; gap: 25px; align-items: center; padding-top: 32px; border-top: 1px solid var(--line); margin-top: 60px; font-size: 13px; color: var(--muted); }
div.bsx.bsx.bsx.bsx dialog { border: 0px; padding: 40px; background: rgb(12, 13, 12); color: white; width: min(96vw, 1250px); max-height: 95dvh; overflow: auto; }
div.bsx.bsx.bsx.bsx dialog::backdrop { background: rgba(0, 0, 0, 0.867); backdrop-filter: blur(5px); }
div.bsx.bsx.bsx.bsx dialog img { max-width: 100%; max-height: 78vh; object-fit: contain; margin: auto; }
div.bsx.bsx.bsx.bsx dialog p { font-size: 16px; text-align: center; margin-top: 18px; color: var(--muted); }
div.bsx.bsx.bsx.bsx .bs-dialog-close { position: absolute; right: 10px; top: 4px; width: 40px; height: 40px; border: 0px; background: transparent; color: white; font-size: 32px; }
div.bsx.bsx.bsx.bsx .bs-sr-only { position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px; }
@media (min-width: 1800px) {
  div.bsx.bsx.bsx.bsx { max-width: 2100px; margin: auto; }
  div.bsx.bsx.bsx.bsx .bs-site-header { max-width: 2100px; }
  div.bsx.bsx.bsx.bsx .bs-hero-grid { min-height: 650px; }
  div.bsx.bsx.bsx.bsx .bs-hero-character { height: 650px; }
}
@media (max-width: 1100px) {
  div.bsx.bsx.bsx.bsx { --header: 82px; }
  div.bsx.bsx.bsx.bsx .bs-site-header nav { gap: 20px; }
  div.bsx.bsx.bsx.bsx .bs-wordmark { font-size: 17.6px; }
  div.bsx.bsx.bsx.bsx .bs-wordmark img { width: 36px; height: 36px; }
  div.bsx.bsx.bsx.bsx .bs-site-header nav .bs-nav-contact { padding: 9px 13px; }
  div.bsx.bsx.bsx.bsx .bs-hero-grid { min-height: 500px; }
  div.bsx.bsx.bsx.bsx .bs-hero-copy h1 { font-size: 7.8vw; }
  div.bsx.bsx.bsx.bsx .bs-hero-character { height: 440px; }
  div.bsx.bsx.bsx.bsx .bs-home-about-grid, div.bsx.bsx.bsx.bsx .bs-about-story-grid { gap: 40px; }
  div.bsx.bsx.bsx.bsx .bs-page-intro-grid { gap: 45px; }
  div.bsx.bsx.bsx.bsx .bs-service-chapter { gap: 45px; }
  div.bsx.bsx.bsx.bsx .bs-contact-grid { gap: 60px; }
  div.bsx.bsx.bsx.bsx .bs-brand-grid { grid-template-columns: repeat(4, 1fr); }
  div.bsx.bsx.bsx.bsx .bs-founder-section { gap: 60px; }
  div.bsx.bsx.bsx.bsx .bs-advantage-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
  div.bsx.bsx.bsx.bsx .bs-footer-name { font-size: 9vw; }
  div.bsx.bsx.bsx.bsx .bs-pricing-groups { gap: 40px 30px; }
}
@media (max-width: 850px) {
  div.bsx.bsx.bsx.bsx .bs-site-header nav { display: none; position: absolute; top: var(--header); left: 0px; right: 0px; background: var(--bg); padding: 25px var(--pad) 35px; border-bottom: 1px solid var(--line); align-items: stretch; gap: 0px; flex-direction: column; }
  div.bsx.bsx.bsx.bsx .bs-site-header nav.bs-open { display: flex; }
  div.bsx.bsx.bsx.bsx .bs-site-header nav a { padding: 14px 0px; font-size: 18px; border-bottom: 1px solid var(--line); }
  div.bsx.bsx.bsx.bsx .bs-site-header nav a[aria-current]::after { display: none; }
  div.bsx.bsx.bsx.bsx .bs-site-header nav .bs-nav-contact { margin: 20px 0px 0px; padding: 13px 22px; text-align: center; }
  div.bsx.bsx.bsx.bsx .bs-menu-toggle { display: flex; align-items: center; gap: 15px; padding: 10px 0px; border: 0px; background: none; color: var(--paper); font-size: 15px; }
  div.bsx.bsx.bsx.bsx .bs-menu-lines { display: block; width: 22px; height: 14px; border-top: 2px solid rgb(20, 43, 70); border-bottom: 2px solid rgb(20, 43, 70); }
  div.bsx.bsx.bsx.bsx .bs-menu-toggle[aria-expanded="true"] .bs-menu-lines { border-color: var(--accent); }
  div.bsx.bsx.bsx.bsx .bs-section-pad { padding: 70px var(--pad); }
  div.bsx.bsx.bsx.bsx .bs-hero-grid { grid-template-columns: 1.15fr 0.85fr; gap: 10px; min-height: 500px; }
  div.bsx.bsx.bsx.bsx .bs-hero-copy h1 { font-size: 8.9vw; }
  div.bsx.bsx.bsx.bsx .bs-hero-character { height: 380px; max-width: 100%; }
  div.bsx.bsx.bsx.bsx .bs-hero-image-caption { display: none; }
  div.bsx.bsx.bsx.bsx .bs-hero-actions { flex-wrap: wrap; margin-top: 30px; gap: 12px; }
  div.bsx.bsx.bsx.bsx .bs-hero-actions .bs-button { padding: 12px 18px; font-size: 15px; }
  div.bsx.bsx.bsx.bsx .bs-home-about-grid, div.bsx.bsx.bsx.bsx .bs-about-story-grid { grid-template-columns: 1fr; gap: 40px; }
  div.bsx.bsx.bsx.bsx .bs-about-story-grid .bs-media-player { position: relative; top: 0px; }
  div.bsx.bsx.bsx.bsx .bs-page-intro { padding: 55px var(--pad); }
  div.bsx.bsx.bsx.bsx .bs-page-intro-grid { grid-template-columns: 1fr; gap: 30px; }
  div.bsx.bsx.bsx.bsx .bs-page-intro h1 { font-size: 76.8px; }
  div.bsx.bsx.bsx.bsx .bs-page-intro-copy { max-width: 100%; }
  div.bsx.bsx.bsx.bsx .bs-team-grid { grid-template-columns: repeat(2, 1fr); gap: 45px 25px; }
  div.bsx.bsx.bsx.bsx .bs-service-chapter, div.bsx.bsx.bsx.bsx .bs-service-chapter:nth-child(2n) { grid-template-columns: 1fr 1fr; gap: 30px; }
  div.bsx.bsx.bsx.bsx .bs-chapter-label span:last-child { display: none; }
  div.bsx.bsx.bsx.bsx .bs-service-chapter .bs-editorial-copy { font-size: 16px; }
  div.bsx.bsx.bsx.bsx .bs-chapter-copy h2 { font-size: 32px; }
  div.bsx.bsx.bsx.bsx .bs-service-entry { grid-template-columns: 45px 1fr 95px 90px; gap: 15px; }
  div.bsx.bsx.bsx.bsx .bs-service-entry img { width: 70px; height: 70px; }
  div.bsx.bsx.bsx.bsx .bs-service-action { font-size: 14px; }
  div.bsx.bsx.bsx.bsx .bs-contact-grid { gap: 45px; }
  div.bsx.bsx.bsx.bsx .bs-pricing-groups { grid-template-columns: 1fr; gap: 50px; }
  div.bsx.bsx.bsx.bsx .bs-price-group:last-child:nth-child(2n+1) { grid-column: auto; }
  div.bsx.bsx.bsx.bsx .bs-price-group table { font-size: 16px; }
  div.bsx.bsx.bsx.bsx .bs-price-group th:first-child { width: 38%; }
  div.bsx.bsx.bsx.bsx .bs-price-group td:nth-child(2) { width: 35%; }
  div.bsx.bsx.bsx.bsx .bs-price-group td:last-child { width: 27%; }
  div.bsx.bsx.bsx.bsx .bs-vision-grid { gap: 25px; }
  div.bsx.bsx.bsx.bsx .bs-vision-grid h3 { font-size: 27.2px; }
  div.bsx.bsx.bsx.bsx .bs-founder-section { grid-template-columns: 0.7fr 1fr; gap: 45px; }
  div.bsx.bsx.bsx.bsx .bs-process-list { gap: 22px; }
  div.bsx.bsx.bsx.bsx .bs-process-list h3 { font-size: 21.6px; }
  div.bsx.bsx.bsx.bsx .bs-footer-links { gap: 30px; }
  div.bsx.bsx.bsx.bsx .bs-footer-base { flex-wrap: wrap; }
}
@media (max-width: 600px) {
  div.bsx.bsx.bsx.bsx { --header: 76px; }
  div.bsx.bsx.bsx.bsx .bs-section-head { display: block; margin-bottom: 35px; }
  div.bsx.bsx.bsx.bsx .bs-section-head > p { margin-top: 20px; }
  div.bsx.bsx.bsx.bsx .bs-section-label { font-size: 13px; letter-spacing: 0.09em; }
  div.bsx.bsx.bsx.bsx .bs-hero-topline { font-size: 12px; letter-spacing: 0.05em; }
  div.bsx.bsx.bsx.bsx .bs-home-hero { padding-top: 22px; min-height: auto; }
  div.bsx.bsx.bsx.bsx .bs-hero-grid { grid-template-columns: 1fr; min-height: 0px; gap: 0px; }
  div.bsx.bsx.bsx.bsx .bs-hero-copy { padding: 34px 0px 0px; }
  div.bsx.bsx.bsx.bsx .bs-hero-copy h1 { font-size: clamp(52px, 14vw, 84.8px); line-height: 1.2; letter-spacing: -0.05em; }
  div.bsx.bsx.bsx.bsx .bs-hero-studio { font-size: 13px; margin-top: 22px; letter-spacing: 0.23em; }
  div.bsx.bsx.bsx.bsx .bs-hero-actions { margin-top: 30px; }
  div.bsx.bsx.bsx.bsx .bs-hero-visual { height: 320px; justify-content: flex-end; }
  div.bsx.bsx.bsx.bsx .bs-hero-character { height: 320px; width: 80%; align-self: end; object-position: right bottom; }
  div.bsx.bsx.bsx.bsx .bs-hero-bottom { font-size: 12px; letter-spacing: 0px; padding: 20px 0px 0px; gap: 15px; }
  div.bsx.bsx.bsx.bsx .bs-hero-bottom span:nth-child(2) { display: none; }
  div.bsx.bsx.bsx.bsx .bs-section-pad { padding: 58px var(--pad); }
  div.bsx.bsx.bsx.bsx .bs-home-about .bs-editorial-copy p { font-size: 16px; line-height: 2; }
  div.bsx.bsx.bsx.bsx .bs-service-entry { grid-template-columns: 30px 1fr 65px; gap: 15px; padding: 25px 0px; }
  div.bsx.bsx.bsx.bsx .bs-service-entry h3 { font-size: 41.6px; }
  div.bsx.bsx.bsx.bsx .bs-service-entry img { width: 58px; height: 58px; }
  div.bsx.bsx.bsx.bsx .bs-service-entry .bs-section-label { font-size: 12px; letter-spacing: 0.035em; }
  div.bsx.bsx.bsx.bsx .bs-service-action { grid-column: 2; margin-top: -8px; justify-self: start; }
  div.bsx.bsx.bsx.bsx .bs-service-entry:hover { padding-left: 0px; padding-right: 0px; }
  div.bsx.bsx.bsx.bsx .bs-page-intro h1 { font-size: 54.4px; }
  div.bsx.bsx.bsx.bsx .bs-page-intro { padding: 40px var(--pad) 46px; }
  div.bsx.bsx.bsx.bsx .bs-page-intro-grid { gap: 23px; margin-top: 17px; }
  div.bsx.bsx.bsx.bsx .bs-page-intro-copy { font-size: 16px; }
  div.bsx.bsx.bsx.bsx .bs-team-grid { grid-template-columns: 1fr; gap: 45px; }
  div.bsx.bsx.bsx.bsx .bs-team-member img { aspect-ratio: 4 / 3; object-position: center center; }
  div.bsx.bsx.bsx.bsx .bs-team-member h3 { font-size: 26.4px; }
  div.bsx.bsx.bsx.bsx .bs-team-member .bs-section-label { font-size: 14px; }
  div.bsx.bsx.bsx.bsx .bs-vision-grid { grid-template-columns: 1fr; gap: 35px; }
  div.bsx.bsx.bsx.bsx .bs-vision-grid h3 { margin-top: 17px; }
  div.bsx.bsx.bsx.bsx .bs-service-chapters { padding-top: 0px; padding-bottom: 0px; }
  div.bsx.bsx.bsx.bsx .bs-service-chapter, div.bsx.bsx.bsx.bsx .bs-service-chapter:nth-child(2n) { grid-template-columns: 1fr; padding: 45px 0px; gap: 30px; }
  div.bsx.bsx.bsx.bsx .bs-service-chapter:nth-child(2n) .bs-chapter-copy { order: 0; }
  div.bsx.bsx.bsx.bsx .bs-service-chapter figure img { aspect-ratio: 16 / 10; }
  div.bsx.bsx.bsx.bsx .bs-chapter-copy h2 { font-size: 33.6px; margin: 23px 0px 20px; }
  div.bsx.bsx.bsx.bsx .bs-chapter-label span:last-child { display: block; font-size: 11px; }
  div.bsx.bsx.bsx.bsx .bs-video-gallery { grid-template-columns: 1fr; gap: 30px; }
  div.bsx.bsx.bsx.bsx .bs-photo-gallery { grid-template-columns: 1fr 1fr; gap: 14px; }
  div.bsx.bsx.bsx.bsx .bs-photo-button:nth-child(3n+2) { margin-top: 0px; }
  div.bsx.bsx.bsx.bsx .bs-photo-button:nth-child(2n) { margin-top: 25px; }
  div.bsx.bsx.bsx.bsx .bs-photo-button img { min-height: 0px; }
  div.bsx.bsx.bsx.bsx .bs-advantage-grid, div.bsx.bsx.bsx.bsx [data-page="music"] .bs-advantage-grid { grid-template-columns: 1fr; gap: 30px; }
  div.bsx.bsx.bsx.bsx .bs-advantage-grid article { display: grid; grid-template-columns: 30px 1fr; gap: 0px 15px; }
  div.bsx.bsx.bsx.bsx .bs-advantage-grid article .bs-item-number { padding-top: 5px; }
  div.bsx.bsx.bsx.bsx .bs-advantage-grid h3 { margin: 0px 0px 13px; font-size: 24.8px; }
  div.bsx.bsx.bsx.bsx .bs-advantage-grid p { grid-column: 2; }
  div.bsx.bsx.bsx.bsx .bs-service-cta { display: block; padding: 45px var(--pad); }
  div.bsx.bsx.bsx.bsx .bs-service-cta > div { margin-top: 27px; flex-wrap: wrap; gap: 12px; }
  div.bsx.bsx.bsx.bsx .bs-service-cta .bs-button { padding: 13px 20px; }
  div.bsx.bsx.bsx.bsx .bs-price-nav { gap: 30px; padding: 20px var(--pad); font-size: 15px; justify-content: space-between; }
  div.bsx.bsx.bsx.bsx .bs-pricing-section { scroll-margin-top: 145px; }
  div.bsx.bsx.bsx.bsx .bs-price-group h3 { font-size: 23.2px; gap: 20px; }
  div.bsx.bsx.bsx.bsx .bs-price-group th, div.bsx.bsx.bsx.bsx .bs-price-group td { padding-top: 17px; padding-bottom: 17px; font-size: 15px; }
  div.bsx.bsx.bsx.bsx .bs-price-group thead th { font-size: 12px; }
  div.bsx.bsx.bsx.bsx .bs-price-group td:nth-child(2) { font-size: 14px; }
  div.bsx.bsx.bsx.bsx .bs-price-group td.bs-price { font-size: 15px; }
  div.bsx.bsx.bsx.bsx .bs-founder-section { grid-template-columns: 1fr; gap: 35px; }
  div.bsx.bsx.bsx.bsx .bs-founder-photo { max-width: 280px; }
  div.bsx.bsx.bsx.bsx .bs-founder-photo img { max-height: 340px; }
  div.bsx.bsx.bsx.bsx .bs-founder-section .bs-editorial-copy p { font-size: 16px; }
  div.bsx.bsx.bsx.bsx .bs-brand-grid { grid-template-columns: repeat(3, 1fr); }
  div.bsx.bsx.bsx.bsx .bs-brand-grid img { padding: 15px; }
  div.bsx.bsx.bsx.bsx .bs-process-list { grid-template-columns: 1fr 1fr; gap: 35px 25px; }
  div.bsx.bsx.bsx.bsx .bs-process-list span { font-size: 35.2px; margin-bottom: 10px; }
  div.bsx.bsx.bsx.bsx .bs-contact-grid { grid-template-columns: 1fr; gap: 50px; }
  div.bsx.bsx.bsx.bsx .bs-contact-details > div { grid-template-columns: 82px 1fr; gap: 10px; }
  div.bsx.bsx.bsx.bsx .bs-contact-details dd { font-size: 16px; }
  div.bsx.bsx.bsx.bsx .bs-contact-grid h2 { font-size: 41.6px; }
  div.bsx.bsx.bsx.bsx .bs-contact-form .bs-button { width: 100%; }
  div.bsx.bsx.bsx.bsx .bs-site-footer { padding: 50px var(--pad) 25px; }
  div.bsx.bsx.bsx.bsx .bs-footer-name { font-size: clamp(32px, 8.8vw, 48px); letter-spacing: -0.055em; }
  div.bsx.bsx.bsx.bsx .bs-footer-name span { margin-left: 9px; }
  div.bsx.bsx.bsx.bsx .bs-footer-links { flex-wrap: wrap; gap: 12px 25px; font-size: 15px; margin-top: 28px; }
  div.bsx.bsx.bsx.bsx .bs-footer-links a:first-child { width: 100%; }
  div.bsx.bsx.bsx.bsx .bs-footer-base { font-size: 12px; gap: 14px 25px; margin-top: 35px; padding-top: 25px; }
  div.bsx.bsx.bsx.bsx .bs-footer-base span { width: 100%; }
  div.bsx.bsx.bsx.bsx dialog { padding: 35px 12px 16px; max-height: 90dvh; }
  div.bsx.bsx.bsx.bsx dialog p { font-size: 14px; }
  div.bsx.bsx.bsx.bsx .bs-play-icon { width: 52px; height: 52px; }
  div.bsx.bsx.bsx.bsx .bs-editorial-copy { font-size: 16px; }
  div.bsx.bsx.bsx.bsx .bs-inline-links { gap: 30px; }
  div.bsx.bsx.bsx.bsx .bs-button { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  div.bsx.bsx.bsx.bsx { scroll-behavior: auto; }
  div.bsx.bsx.bsx.bsx *, div.bsx.bsx.bsx.bsx ::before, div.bsx.bsx.bsx.bsx ::after { transition: none !important; animation: auto ease 0s 1 normal none running none !important; }
}
div.bsx.bsx.bsx.bsx .bs-video-intro-reel { padding-bottom: 0px; }
div.bsx.bsx.bsx.bsx .bs-video-intro-reel .bs-media-player { max-width: 1000px; margin: auto; }
div.bsx.bsx.bsx.bsx .bs-page-intro { background: rgb(237, 246, 255); color: var(--paper); }
div.bsx.bsx.bsx.bsx .bs-page-intro h1 { color: var(--accent); }
div.bsx.bsx.bsx.bsx .bs-page-intro .bs-section-label { color: rgb(79, 113, 147); }
div.bsx.bsx.bsx.bsx .bs-button-primary, div.bsx.bsx.bsx.bsx .bs-play-icon { color: rgb(255, 255, 255); }
div.bsx.bsx.bsx.bsx .bs-site-header nav .bs-nav-contact:hover { color: rgb(255, 255, 255); }
div.bsx.bsx.bsx.bsx .bs-button-outline:hover { background: rgb(237, 246, 255); }
div.bsx.bsx.bsx.bsx .bs-button-dark-outline:hover { color: var(--accent); }
div.bsx.bsx.bsx.bsx .bs-skip { color: rgb(255, 255, 255); }
div.bsx.bsx.bsx.bsx .bs-service-cta { color: rgb(255, 255, 255); }
div.bsx.bsx.bsx.bsx .bs-service-cta .bs-button-dark { background: rgb(255, 255, 255); color: var(--accent); }
div.bsx.bsx.bsx.bsx .bs-service-cta .bs-button-dark:hover { background: rgb(230, 242, 255); }
div.bsx.bsx.bsx.bsx .bs-service-cta .bs-button-dark-outline { border-color: rgb(255, 255, 255); color: rgb(255, 255, 255); }
div.bsx.bsx.bsx.bsx .bs-service-cta .bs-button-dark-outline:hover { background: rgb(255, 255, 255); color: var(--accent); }
div.bsx.bsx.bsx.bsx .bs-photo-button { color: rgb(255, 255, 255); }
div.bsx.bsx.bsx.bsx dialog { background: rgb(255, 255, 255); color: var(--paper); }
div.bsx.bsx.bsx.bsx .bs-dialog-close { color: var(--paper); }
div.bsx.bsx.bsx.bsx dialog::backdrop { background: rgba(14, 40, 67, 0.85); }
div.bsx.bsx.bsx.bsx .bs-wordmark { gap: 12px; }
div.bsx.bsx.bsx.bsx .bs-wordmark-label { display: block; }
div.bsx.bsx.bsx.bsx .bs-wordmark-title { display: block; white-space: nowrap; font-size: 20px; line-height: 1.2; letter-spacing: -0.025em; }
div.bsx.bsx.bsx.bsx .bs-wordmark-domain { display: block; margin-top: 5px; font-size: 12px; font-weight: 400; line-height: 1.3; letter-spacing: 0.06em; color: var(--muted); }
@media (max-width: 1100px) {
  div.bsx.bsx.bsx.bsx .bs-wordmark-title { font-size: 18px; }
  div.bsx.bsx.bsx.bsx .bs-wordmark { gap: 10px; }
  div.bsx.bsx.bsx.bsx .bs-site-header nav { gap: 18px; }
}
@media (max-width: 600px) {
  div.bsx.bsx.bsx.bsx .bs-site-header { gap: 12px; }
  div.bsx.bsx.bsx.bsx .bs-wordmark { gap: 9px; }
  div.bsx.bsx.bsx.bsx .bs-wordmark img { width: 30px; height: 30px; }
  div.bsx.bsx.bsx.bsx .bs-wordmark-title { font-size: 16px; }
  div.bsx.bsx.bsx.bsx .bs-wordmark-domain { font-size: 12px; letter-spacing: 0.03em; margin-top: 3px; }
}
.bs-custom-section { background: rgb(255, 255, 255); }
div.bsx.bsx.bsx.bsx .bs-block-copy p { font-size: 18px; line-height: 1.9; max-width: 760px; margin-top: 26px; }
div.bsx.bsx.bsx.bsx .bs-block-copy .bs-button { margin-top: 30px; }
div.bsx.bsx.bsx.bsx .bs-block-split, div.bsx.bsx.bsx.bsx .bs-block-hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 64px; }
div.bsx.bsx.bsx.bsx .bs-block-split.bs-reverse > .bs-block-copy { order: 2; }
div.bsx.bsx.bsx.bsx .bs-block-split img, div.bsx.bsx.bsx.bsx .bs-block-hero img { width: 100%; max-height: 650px; object-fit: var(--image-fit,cover); border-radius: 8px; }
div.bsx.bsx.bsx.bsx .bs-block-image-empty { min-height: 240px; background: rgb(238, 244, 251); border: 1px solid rgb(220, 230, 243); border-radius: 8px; }
div.bsx.bsx.bsx.bsx .bs-video-placeholder { aspect-ratio: 16 / 9; background: rgb(20, 43, 70); display: grid; place-items: center; color: rgb(255, 255, 255); }
div.bsx.bsx.bsx.bsx .bs-block-text { max-width: 860px; }
div.bsx.bsx.bsx.bsx .bs-block-cta { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
div.bsx.bsx.bsx.bsx .bs-block-cta p, div.bsx.bsx.bsx.bsx .bs-section-head p { margin-top: 22px; font-size: 18px; max-width: 750px; }
div.bsx.bsx.bsx.bsx .bs-block-quote blockquote { border-left: 5px solid rgb(8, 119, 215); padding-left: 38px; max-width: 1000px; }
div.bsx.bsx.bsx.bsx .bs-block-quote p { margin-top: 25px; color: rgb(96, 117, 140); }
div.bsx.bsx.bsx.bsx .bs-block-stats { display: grid; grid-template-columns: repeat(var(--block-columns,3),minmax(0,1fr)); gap: 30px; }
div.bsx.bsx.bsx.bsx .bs-block-stats strong { font-size: 64px; color: rgb(8, 119, 215); line-height: 1.2; }
div.bsx.bsx.bsx.bsx .bs-block-stats p { font-size: 18px; margin-top: 15px; }
div.bsx.bsx.bsx.bsx .bs-block-projects { display: grid; grid-template-columns: repeat(var(--block-columns,3),minmax(0,1fr)); gap: 30px; }
div.bsx.bsx.bsx.bsx .bs-block-project { overflow: hidden; border: 1px solid rgb(218, 229, 241); border-radius: 12px; background: white; }
div.bsx.bsx.bsx.bsx .bs-block-project > div:last-child { padding: 26px; }
div.bsx.bsx.bsx.bsx .bs-block-project p { margin-top: 15px; color: rgb(96, 117, 140); }
div.bsx.bsx.bsx.bsx .bs-block-project img { width: 100%; aspect-ratio: 4 / 3; object-fit: var(--image-fit,cover); }
div.bsx.bsx.bsx.bsx .bs-block-project h3 { margin-top: 10px; }
div.bsx.bsx.bsx.bsx .bs-inline-link { display: inline-block; margin-top: 20px; color: rgb(8, 119, 215); border-bottom: 1px solid; }
div.bsx.bsx.bsx.bsx .bs-block-photo-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: var(--image-fit,cover); }
div.bsx.bsx.bsx.bsx .bs-block-photo-item figcaption { margin-top: 15px; font-size: 17px; }
div.bsx.bsx.bsx.bsx .bs-block-photo-item figcaption p { margin-top: 6px; font-size: 15px; color: rgb(96, 117, 140); }
div.bsx.bsx.bsx.bsx .bs-block-photo-item .bs-photo-button { width: 100%; margin-top: 0px; }
div.bsx.bsx.bsx.bsx .bs-block-photo-item .bs-photo-button img { min-height: 0px; }
div.bsx.bsx.bsx.bsx .bs-block-item-title { font-size: 18px; line-height: 1.5; margin-top: 17px; }
div.bsx.bsx.bsx.bsx .bs-block-items .bs-team-member .bs-section-label { margin-top: 18px; }
div.bsx.bsx.bsx.bsx .bs-block-items:empty { min-height: 60px; }
div.bsx.bsx.bsx.bsx .bs-block-divider hr { border-width: 1px 0px 0px; border-style: solid none none; border-color: rgb(218, 229, 241) currentcolor currentcolor; border-image: none; }
div.bsx.bsx.bsx.bsx .bs-media-player video { width: 100%; height: 100%; object-fit: contain; }
div.bsx.bsx.bsx.bsx .bs-video-gallery img { aspect-ratio: 16 / 9; object-fit: cover; }
div.bsx.bsx.bsx.bsx .bs-block-items .bs-media-player { width: 100%; }
div.bsx.bsx.bsx.bsx [data-background="blue"] { background: rgb(241, 247, 255); }
div.bsx.bsx.bsx.bsx [data-background="navy"] { background: rgb(20, 43, 70); color: rgb(255, 255, 255); }
div.bsx.bsx.bsx.bsx [data-background="navy"] p, div.bsx.bsx.bsx.bsx [data-background="navy"] .bs-section-label { color: rgb(199, 215, 236); }
div.bsx.bsx.bsx.bsx [data-background="navy"] .bs-block-project { background: rgb(29, 58, 91); }
div.bsx.bsx.bsx.bsx [data-spacing="compact"] { padding-top: 48px; padding-bottom: 48px; }
div.bsx.bsx.bsx.bsx [data-spacing="spacious"] { padding-top: 140px; padding-bottom: 140px; }
div.bsx.bsx.bsx.bsx [data-align="center"] { text-align: center; }
div.bsx.bsx.bsx.bsx [data-align="center"] .bs-block-text, div.bsx.bsx.bsx.bsx [data-align="center"] .bs-block-copy p { margin-left: auto; margin-right: auto; }
div.bsx.bsx.bsx.bsx [data-fit="contain"] { --image-fit: contain; }
div.bsx.bsx.bsx.bsx [data-fit="contain"] .bs-block-photo-item img, div.bsx.bsx.bsx.bsx [data-fit="contain"] .bs-block-project img { background: rgb(243, 247, 252); object-fit: contain; }
div.bsx.bsx.bsx.bsx .bs-block-items.bs-video-gallery, div.bsx.bsx.bsx.bsx .bs-block-items.bs-photo-gallery, div.bsx.bsx.bsx.bsx .bs-block-items.bs-team-grid { grid-template-columns: repeat(var(--block-columns,3),minmax(0,1fr)); }
div.bsx.bsx.bsx.bsx .bs-block-items.bs-photo-gallery .bs-photo-button:nth-child(3n+2) { margin-top: 0px; }
div.bsx.bsx.bsx.bsx .bs-block-items .bs-team-member img { aspect-ratio: 4 / 5; object-fit: var(--image-fit,cover); }
@media (max-width: 850px) {
  div.bsx.bsx.bsx.bsx .bs-block-items.bs-video-gallery, div.bsx.bsx.bsx.bsx .bs-block-items.bs-photo-gallery, div.bsx.bsx.bsx.bsx .bs-block-items.bs-team-grid, div.bsx.bsx.bsx.bsx .bs-block-projects, div.bsx.bsx.bsx.bsx .bs-block-stats { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
  div.bsx.bsx.bsx.bsx .bs-block-split, div.bsx.bsx.bsx.bsx .bs-block-hero { gap: 28px; }
  div.bsx.bsx.bsx.bsx .bs-block-split.bs-reverse > .bs-block-copy { order: 0; }
}
@media (max-width: 600px) {
  div.bsx.bsx.bsx.bsx .bs-block-split, div.bsx.bsx.bsx.bsx .bs-block-hero { grid-template-columns: 1fr; }
  div.bsx.bsx.bsx.bsx .bs-block-cta { display: block; }
  div.bsx.bsx.bsx.bsx .bs-block-cta > .bs-button { margin-top: 25px; }
  div.bsx.bsx.bsx.bsx .bs-block-items.bs-video-gallery, div.bsx.bsx.bsx.bsx .bs-block-items.bs-team-grid, div.bsx.bsx.bsx.bsx .bs-block-projects { grid-template-columns: 1fr; }
  div.bsx.bsx.bsx.bsx .bs-block-stats strong { font-size: 42px; }
  div.bsx.bsx.bsx.bsx .bs-block-copy p { font-size: 16px; }
  div.bsx.bsx.bsx.bsx .bs-block-quote blockquote { padding-left: 24px; }
  div.bsx.bsx.bsx.bsx .bs-block-image-empty { min-height: 180px; }
  div.bsx.bsx.bsx.bsx [data-spacing="spacious"] { padding-top: 80px; padding-bottom: 80px; }
}