:root{
  --ink:#17263d;
  --muted:#64748b;
  --glass:rgba(255,255,255,.36);
  --line:rgba(255,255,255,.58);
  --accent:#173d68;
  --teal:#239b82;
  font-family:"Segoe UI",Inter,system-ui,sans-serif;
  color:var(--ink);
}
*{box-sizing:border-box}
html,body{min-height:100%; margin:0}
body{
  overflow:hidden;
  background:
    linear-gradient(rgba(255,255,255,.04), rgba(255,255,255,.04)),
    url("assets/backgrounds/worldcloud9-glass-bg.jpg") center/cover no-repeat fixed,
    linear-gradient(135deg,#f6b35f,#df73d4 35%,#8e22e0 66%,#3500a4);
}
button{font:700 14px inherit; cursor:pointer}
.demo-shell{
  width:min(96vw,1500px);
  height:96dvh;
  margin:2dvh auto;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  gap:10px;
}
.demo-header{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  min-height:46px;
  padding:6px 10px 6px 14px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.22);
  backdrop-filter:blur(26px) saturate(1.45);
  -webkit-backdrop-filter:blur(26px) saturate(1.45);
  box-shadow:0 18px 54px rgba(20,43,69,.16), inset 0 1px 0 rgba(255,255,255,.8);
}
.demo-kicker{margin:0; font-size:11px; font-weight:900; letter-spacing:.18em; text-transform:uppercase; color:#0d6680}
.demo-header h1{display:none}
.demo-header p:last-child{display:none}
.demo-tabs{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.demo-tabs button{
  border:1px solid rgba(255,255,255,.5);
  border-radius:999px;
  padding:9px 14px;
  color:#173d68;
  background:rgba(255,255,255,.42);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.demo-tabs button.active{background:rgba(23,61,104,.92); color:#fff; border-color:rgba(23,61,104,.72)}
.demo-stage{
  min-height:0;
  border:1px solid var(--line);
  border-radius:26px;
  padding:12px;
  background:rgba(255,255,255,.20);
  backdrop-filter:blur(28px) saturate(1.45);
  -webkit-backdrop-filter:blur(28px) saturate(1.45);
  box-shadow:0 22px 70px rgba(20,43,69,.20), inset 0 1px 0 rgba(255,255,255,.78);
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  gap:10px;
  overflow:hidden;
}
.device-label{display:flex; align-items:center; justify-content:space-between; gap:12px; color:#f8fbff; text-shadow:0 1px 14px rgba(24,35,60,.26)}
.device-label strong{font-size:18px}
.device-label span{font-size:13px; opacity:.88}
.preview-wrap,.site-preview{min-height:0; display:none}
.desktop-mode .preview-wrap,.mobile-mode .preview-wrap,.popup-mode .site-preview{display:block}
.preview-wrap{
  margin:auto;
  overflow:hidden;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.65);
  background:rgba(18,31,54,.28);
  box-shadow:0 28px 80px rgba(13,23,42,.26), inset 0 1px 0 rgba(255,255,255,.44);
}
.preview-wrap iframe,.widget-panel iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
  background:transparent;
}
.desktop-mode .preview-wrap{width:100%; height:100%}
.mobile-mode .preview-wrap{width:min(410px,100%); height:100%; max-height:780px; border-radius:34px; padding:10px; background:#111827}
.mobile-mode .preview-wrap iframe{border-radius:24px; overflow:hidden}
.site-preview{height:100%; min-height:0}
.mock-site{
  position:relative;
  height:100%;
  overflow:hidden;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.6);
  background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(239,246,255,.72));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.78);
}
.mock-nav{display:flex; align-items:center; gap:20px; padding:22px 28px; color:#263b58}
.mock-nav strong{margin-right:auto; font-size:20px}
.hero{max-width:760px; padding:64px 28px 24px}
.hero .eyebrow{margin:0 0 8px; color:var(--teal); font-weight:900; letter-spacing:.18em; text-transform:uppercase; font-size:12px}
.hero h2{margin:0; font-size:clamp(38px,7vw,82px); line-height:.95; letter-spacing:-.07em; color:#13233b}
.hero p:last-child{font-size:18px; line-height:1.55; color:var(--muted); max-width:650px}
.cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; padding:10px 28px}
.cards article{padding:20px; border-radius:20px; background:rgba(255,255,255,.62); border:1px solid rgba(23,61,104,.08); box-shadow:0 14px 36px rgba(30,64,100,.10)}
.cards h3{margin:0 0 6px}.cards p{margin:0;color:var(--muted)}
.widget-toggle{
  position:absolute;
  right:26px;
  bottom:24px;
  z-index:3;
  display:flex;
  align-items:center;
  gap:10px;
  border:0;
  border-radius:999px;
  padding:12px 16px 12px 12px;
  color:#fff;
  background:linear-gradient(135deg,#173d68,#239b82);
  box-shadow:0 18px 42px rgba(23,61,104,.32);
}
.avatar-dot{display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.4)}
.widget-panel{
  position:absolute;
  right:26px;
  bottom:86px;
  z-index:4;
  width:min(420px,calc(100% - 52px));
  height:min(680px,calc(100% - 118px));
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.68);
  background:rgba(255,255,255,.35);
  box-shadow:0 26px 78px rgba(13,23,42,.35);
}
.widget-panel.closed{display:none}
.widget-bar{height:46px; display:flex; align-items:center; justify-content:space-between; padding:0 14px 0 16px; color:#fff; background:linear-gradient(135deg,rgba(23,61,104,.96),rgba(35,155,130,.92))}
.widget-bar button{width:30px; height:30px; border:0; border-radius:50%; color:#fff; background:rgba(255,255,255,.15); font-size:20px; line-height:1}
.widget-panel iframe{height:calc(100% - 46px)}
@media (max-width:760px){
  body{overflow:auto}
  .demo-shell{height:100dvh; margin:0; width:100%; padding:8px; gap:8px}
  .demo-header{border-radius:16px; min-height:46px; padding:6px; gap:6px}
  .demo-kicker{display:none}
  .demo-tabs{flex:1; justify-content:stretch; gap:6px}.demo-tabs button{flex:1; padding:9px 6px; font-size:12px}
  .demo-stage{height:auto; border-radius:20px; padding:8px; gap:8px}
  .device-label{align-items:flex-start; flex-direction:column; gap:2px}
  .device-label strong{font-size:14px}.device-label span{font-size:11px}
  .cards{display:none}.hero{padding:38px 20px}.mock-nav span{display:none}
  .widget-panel{right:12px; bottom:76px; width:calc(100% - 24px); height:min(620px,calc(100% - 96px))}
  .widget-toggle{right:12px; bottom:18px}
}


.desktop-only-message{display:none}
@media (max-width:760px){
  body{overflow:hidden}
  .demo-shell{display:none}
  .desktop-only-message{
    min-height:100dvh;
    display:grid;
    place-items:center;
    padding:22px;
    color:#fff;
    text-align:center;
    background:rgba(12,24,44,.24);
  }
  .desktop-only-message div{
    max-width:420px;
    padding:24px;
    border:1px solid rgba(255,255,255,.55);
    border-radius:24px;
    background:rgba(255,255,255,.22);
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
    box-shadow:0 24px 70px rgba(13,23,42,.22);
  }
  .desktop-only-message h1{margin:0 0 8px; font-size:26px; letter-spacing:-.04em}
  .desktop-only-message p{margin:0; line-height:1.5; opacity:.9}
}

/* Prevent intrinsic iframe/label widths from expanding the preview grid. */
.demo-shell{width:calc(100% - 24px);max-width:1800px;min-width:0}
.demo-stage,.preview-wrap,.device-label{min-width:0}
.device-label span{min-width:0;text-align:right}
.demo-tabs button{font-family:inherit;font-size:13px}