.hs-studio { --studio-accent:#e51e29; position:relative; min-width:0; padding:18px; border:1px solid #cabbdf; border-radius:24px; background:linear-gradient(135deg,#20162f,#312045 70%,#233343); box-shadow:0 30px 70px #49316d24,0 2px 5px #27163d10; color:#f7f2ff; }
.hs-studio button { font-family:inherit; cursor:pointer; }.hs-studio button:focus-visible,.hs-studio a:focus-visible { outline:2px solid #abf0d6; outline-offset:3px; }
.hs-studio-top { display:flex; align-items:center; justify-content:space-between; margin:0 2px 16px; gap:10px; font-size:9px; letter-spacing:1.4px; font-weight:700; }.hs-studio-top > span:first-child { display:flex; align-items:center; gap:9px; }.hs-studio-top i { display:grid; place-items:center; width:24px;height:24px; border-radius:7px; background:#b387ff26; color:#c9a5ff; font-style:normal; font-size:18px; }
.hs-studio-demo { font-size:8px; letter-spacing:.3px; font-weight:500; color:#8ee4c8; border:1px solid #8ee4c833; border-radius:20px; padding:5px 9px; }
.hs-studio-workspace { border-radius:12px; background:#f4f1f8; border:1px solid #ffffff25; box-shadow:0 15px 30px #0002; }
.hs-studio-address { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:11px 14px; color:#9891a5; border-bottom:1px solid #e5dfed; font-size:9px; }.hs-studio-address > span:first-child { font-size:7px; color:#c5a5d4; letter-spacing:3px; }.hs-studio-address > span:nth-child(2) { font-size:8px; letter-spacing:.4px; }
.hs-studio-canvas { position:relative; padding:16px 13px 13px 32px; border-radius:0 0 12px 12px; background-image:radial-gradient(#cfc3dc 1px,transparent 1px); background-size:12px 12px; }
.hs-studio-page { background:#fff; border:1px solid #e1dbe9; border-radius:5px; box-shadow:0 8px 20px #3d285b13; padding-bottom:8px; color:#151522; font-family:Inter,Arial,sans-serif; }
.hs-studio-masthead { display:flex; align-items:center; justify-content:space-between; padding:11px 15px; gap:10px; min-height:54px; border-radius:4px 4px 0 0; background:var(--studio-accent); color:#fff; transition:background .7s; }.hs-studio-masthead img { width:100px; height:32px; object-fit:contain; }.hs-studio-masthead > span { font-size:7px; font-weight:650; }.hs-studio-masthead > b { font-size:13px; }
.hs-studio-modules { display:flex; flex-direction:column; gap:9px; margin:9px; position:relative; }
.hs-studio-module { position:relative; border:1px solid transparent; border-radius:3px; min-width:0; transition:border-color .2s,box-shadow .2s; background:#fff; }
.hs-studio-module:hover,.hs-studio-module:focus-within,.hs-studio-module.is-demo-target { border-color:#9864ee; box-shadow:0 0 0 2px #925be512; z-index:2; }
.hs-studio-handle { position:absolute; top:50%; left:-31px; transform:translateY(-50%); display:flex; align-items:center; justify-content:center; height:28px; width:22px; padding:0; border:1px solid #d8c9ee; border-radius:5px; color:#9866d1; background:#f6f0ff; z-index:4; touch-action:none; cursor:grab!important; }
.hs-studio-handle > span:first-child { font-size:19px; line-height:1; }.hs-studio-handle > span:last-child { display:none; position:absolute; left:24px; top:-18px; background:#7c3aed; color:white; padding:4px 7px; border-radius:4px; white-space:nowrap; font-size:8px; }
.hs-studio-module:hover .hs-studio-handle > span:last-child,.hs-studio-module:focus-within .hs-studio-handle > span:last-child,.hs-studio-module.is-demo-target .hs-studio-handle > span:last-child { display:block; }
.hs-studio-module.is-dragging { z-index:8; opacity:.94; border-color:#8c55e5; box-shadow:0 14px 35px #48247640; pointer-events:none; }.hs-studio-module.is-dragging .hs-studio-handle { cursor:grabbing!important; }.hs-studio-module.is-drop-target { border-color:#26b392; box-shadow:0 -4px #79dec4; }
.hs-studio-breaking { display:flex; align-items:center; gap:10px; background:#fff4f4; min-height:31px; font-size:7px; }.hs-studio-breaking b { align-self:stretch; display:flex; align-items:center; flex-shrink:0; background:var(--studio-accent); padding:7px 9px; color:#fff; font-size:7px; transition:background .7s; }.hs-studio-breaking > span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.hs-studio-breaking i { margin-left:auto; margin-right:8px; font-size:12px; font-style:normal; }
.hs-studio-headlines { display:grid; grid-template-columns:1.8fr 1fr; gap:8px; }.hs-studio-lead { position:relative; min-width:0; overflow:hidden; background:#202232; aspect-ratio:1.62; }.hs-studio-lead > img { width:100%; height:100%; object-fit:cover; display:block; }.hs-studio-lead > div { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:10px; background:linear-gradient(transparent 30%,#080a17da); }.hs-studio-lead small { align-self:flex-start; font-size:6px; letter-spacing:.6px; padding:3px 5px; color:#fff; background:var(--studio-accent); margin-bottom:5px; }.hs-studio-lead h3 { color:#fff; font-size:clamp(11px,1vw,17px); line-height:1.12; margin:0; font-weight:800; letter-spacing:-.25px; }
.hs-studio-side { min-width:0; background:#f7f6f9; padding-bottom:5px; }.hs-studio-side > img { display:block; width:100%; height:auto; aspect-ratio:1.9; object-fit:cover; }.hs-studio-side > span { display:block; font-size:5px; letter-spacing:.5px; margin:7px 7px 4px; color:var(--studio-accent); font-weight:700; }.hs-studio-side h4 { font-size:10px; margin:0 7px; line-height:1.2; }.hs-studio-dots { font-size:5px; color:var(--studio-accent); margin:8px 7px 0; letter-spacing:3px; }
.hs-studio-news { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }.hs-studio-news > div { padding:9px 8px; background:#f6f6f8; border-bottom:2px solid var(--studio-accent); }.hs-studio-news small { display:block; font-size:5px; letter-spacing:.8px; color:var(--studio-accent); font-weight:700; }.hs-studio-news b { display:block; font-size:10px; line-height:1.3; margin:5px 0; }.hs-studio-news i { display:block; width:60%; height:3px; background:#dedee5; border-radius:4px; }
.hs-studio-advert { display:flex; align-items:center; justify-content:center; gap:10px; padding:10px; border:1px dashed #d7d0e0; background:repeating-linear-gradient(135deg,#faf9fc,#faf9fc 4px,#f4f1f8 4px,#f4f1f8 5px); color:#a397b4; font-size:6px; letter-spacing:1px; }.hs-studio-advert i { height:12px; width:1px; background:#d7d0e0; }.hs-studio-advert small { font-size:6px; letter-spacing:0; }
.hs-studio-page[data-studio-font="editorial"] h3,.hs-studio-page[data-studio-font="editorial"] h4,.hs-studio-page[data-studio-font="editorial"] .hs-studio-news b { font-family:Georgia,'Times New Roman',serif; font-weight:700; }
.hs-studio-cursor { position:absolute; left:0; top:0; z-index:12; pointer-events:none; opacity:0; transition:opacity .2s; }.hs-studio-cursor svg { width:24px; height:30px; filter:drop-shadow(0 2px 3px #40205b40); }.hs-studio-cursor > span { position:absolute; top:26px; left:16px; color:#fff; background:#7135ef; font-size:8px; font-weight:600; padding:5px 8px; border-radius:0 6px 6px; }
.hs-studio-tools { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:17px 2px 14px; }.hs-studio-tool-label { display:block; color:#ae9ac4; font-size:7px; letter-spacing:1px; margin-bottom:8px; font-weight:600; }.hs-studio-colors,.hs-studio-fonts { display:flex; align-items:center; gap:7px; }.hs-studio-colors button { border:2px solid transparent; background:var(--swatch); border-radius:50%; width:22px; height:22px; box-shadow:0 0 0 2px transparent; transition:box-shadow .2s,transform .2s; }.hs-studio-colors button[aria-pressed="true"] { border-color:#21182f; box-shadow:0 0 0 1px #ebdafa; transform:scale(1.05); }
.hs-studio-fonts button { padding:5px 8px; background:#ffffff06; border:1px solid #b49ec22e; color:#baa9cc; border-radius:6px; font-size:13px; line-height:1.2; }.hs-studio-fonts button[data-font="editorial"] { font-family:Georgia,serif; }.hs-studio-fonts button span { font-family:Inter,Arial,sans-serif; font-size:7px; margin-left:3px; }.hs-studio-fonts button[aria-pressed="true"] { background:#a375ef25; border-color:#b588f477; color:#efe0ff; }
.hs-studio-swap { background:#9b70e123; border:1px solid #b78aef42; border-radius:7px; color:#e0c9ff; padding:8px 10px; font-size:9px; align-self:flex-end; }.hs-studio-swap span { font-size:15px; margin-right:4px; }
.hs-studio-bottom { display:flex; align-items:center; gap:9px; border-top:1px solid #dac2ee1a; padding-top:12px; }.hs-studio-bottom p { display:flex; align-items:center; gap:9px; flex:1; margin:0; color:#d5c6e5; font-size:9px; line-height:1.4; }.hs-studio-step { border:1px solid #a986d942; background:#a477d918; padding:5px; color:#bc95f0; font-size:9px; border-radius:5px; }.hs-studio-play,.hs-studio-reset { background:transparent; border:0; color:#b9a5d1; font-size:9px; padding:7px 0; white-space:nowrap; }.hs-studio-reset { font-size:20px; padding-left:8px; }.hs-studio-play:hover,.hs-studio-reset:hover { color:white; }
.hs-studio-credit { display:flex; justify-content:space-between; gap:8px; margin-top:13px; color:#9682af; font-size:7px; }.hs-studio-credit a { color:#bda7d8; text-decoration:none; }.hs-studio-credit a:hover { color:#fff; }
.hs-studio-tool-label { font-size:8px; }.hs-studio-colors button { width:28px;height:28px; }.hs-studio-fonts button { min-height:32px;font-size:15px; }.hs-studio-fonts button span { font-size:9px; }.hs-studio-swap { font-size:10px;min-height:34px; }.hs-studio-bottom p { font-size:11px; }.hs-studio-play { font-size:10px; }.hs-studio-credit { font-size:8px; }
.hs-studio-sr { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.hs-studio-invite { display:flex; align-items:center; gap:18px; justify-content:space-between; padding:15px; margin-bottom:16px; border:1px solid #a6e4d037; background:linear-gradient(110deg,#80dec313,#b691ef12); border-radius:12px; }
.hs-studio-invite strong { color:#f0fff9; font-size:13px; font-weight:650; }.hs-studio-invite p { max-width:380px; margin:6px 0 0; color:#c4bbd2; font-size:11px; line-height:1.6; }
.hs-studio-manual { flex-shrink:0; min-height:40px; padding:11px 15px; background:#a0efd5; color:#16392d; border:1px solid #b2f7e1; border-radius:8px; box-shadow:0 5px 16px #80dfb91a; font-size:11px; font-weight:750; transition:background .2s; }.hs-studio-manual:hover { background:#c2ffe9; }.hs-studio-manual[aria-pressed="true"] { background:#183c33; border-color:#79cdb058; color:#a0efd5; }
.hs-studio[data-manual] .hs-studio-handle { border-color:#75bea7; background:#dff7ef; color:#14735a; }.hs-studio[data-manual] .hs-studio-module { border-color:#bcb1cd55; }.hs-studio[data-manual] .hs-studio-module:hover,.hs-studio[data-manual] .hs-studio-module:focus-within { border-color:#26b392; }
@media(max-width:600px) { .hs-studio-invite { flex-direction:column; align-items:stretch; gap:12px; padding:12px; margin-bottom:12px; }.hs-studio-invite strong { font-size:13px; }.hs-studio-invite p { font-size:11px; }.hs-studio-manual { width:100%;min-height:42px;font-size:12px; } }
@media(min-width:1101px) { .nova-builder-grid { grid-template-columns:.9fr 1.1fr; gap:60px; } }
@media(max-width:1100px) { .hs-studio { max-width:760px; width:100%; margin-inline:auto; }.hs-studio-lead h3 { font-size:22px; }.hs-studio-side h4 { font-size:15px; }.hs-studio-news b { font-size:13px; } }
@media(max-width:600px) { .hs-studio { padding:12px; border-radius:17px; }.hs-studio-top { font-size:8px; letter-spacing:.8px; margin-bottom:12px; }.hs-studio-demo { font-size:7px; }.hs-studio-canvas { padding:10px 7px 8px 25px; }.hs-studio-masthead { padding:8px 9px; min-height:42px; }.hs-studio-masthead img { width:85px;height:26px; }.hs-studio-masthead > span { display:none; }.hs-studio-modules { margin:7px; gap:7px; }.hs-studio-handle { left:-27px; width:21px; min-height:28px; }.hs-studio-breaking { min-height:26px; gap:5px; }.hs-studio-breaking b { font-size:5px; padding:5px; }.hs-studio-breaking > span { font-size:5px; }.hs-studio-lead h3 { font-size:11px; }.hs-studio-lead > div { padding:6px; }.hs-studio-lead small { font-size:4px; margin-bottom:3px; }.hs-studio-headlines { gap:5px; }.hs-studio-side h4 { font-size:8px; margin:0 4px; }.hs-studio-side > span { margin:5px 4px 3px; font-size:4px; }.hs-studio-dots { margin:5px 4px 0; font-size:4px; }.hs-studio-news > div { padding:7px 5px; }.hs-studio-news b { font-size:8px; }.hs-studio-news small { font-size:4px; }.hs-studio-advert { gap:6px; font-size:5px;padding:7px 4px; }.hs-studio-advert small { font-size:5px; }.hs-studio-tools { flex-wrap:wrap; gap:14px 8px; padding:14px 0; }.hs-studio-tool-label { font-size:6px; }.hs-studio-colors { gap:6px; }.hs-studio-colors button { width:24px;height:24px; }.hs-studio-fonts button { padding:6px; min-height:30px; }.hs-studio-fonts button span { font-size:6px; }.hs-studio-swap { width:100%; font-size:10px; padding:7px; }.hs-studio-bottom { flex-wrap:wrap; }.hs-studio-bottom p { min-width:160px; font-size:8px; }.hs-studio-credit { font-size:6px; }.hs-studio-address { padding:9px;font-size:7px; }.hs-studio-address > span:nth-child(2) { font-size:7px; } }
@media(prefers-reduced-motion:reduce) { .hs-studio * { transition:none!important; animation:none!important; } }