:root {
  --bg: #06112d;
  --bg-deep: #020817;
  --panel: rgba(8, 24, 58, .84);
  --line: rgba(135, 171, 255, .18);
  --line-strong: rgba(135, 171, 255, .34);
  --text: #f7f9ff;
  --muted: #9aabd0;
  --blue: #2e83ff;
  --cyan: #2ecfff;
  --violet: #7750ff;
  --green: #43dfa9;
  --shell: 1540px;
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
body { margin:0; min-width: 320px; color:var(--text); background:var(--bg-deep); font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
button,input,select { font:inherit; }
button,a { -webkit-tap-highlight-color: transparent; }
a { color:inherit; }
img { display:block; max-width:100%; }
pre,code { font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace; }
.shell { width:min(var(--shell),calc(100% - 36px)); margin-inline:auto; position:relative; }
/* The atmospheric background (.hz-bg) is shared across pages via site-theme.css. */

.site-header { position:relative; z-index:50; border-bottom:1px solid rgba(255,255,255,.055); background:rgba(4,12,31,.62); backdrop-filter:blur(24px) saturate(135%); }
.studio-header { height:68px; }
.nav-shell { min-height:68px; height:100%; display:flex; align-items:center; gap:24px; }
.brand { display:inline-flex;align-items:center;gap:9px;text-decoration:none;flex:0 0 auto; }
.brand-mark { width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 9px 18px rgba(56,107,255,.32)); }
.brand-name { font-size:21px;font-weight:880;letter-spacing:-.045em;white-space:nowrap; }
.brand-name span { background:linear-gradient(95deg,#fff 0 18%,#86a8ff 48%,#38cbff 100%);-webkit-background-clip:text;background-clip:text;color:transparent; }
.simple-promise { margin:auto;display:flex;align-items:center;gap:11px;color:#a9b9d8;font-size:11px;font-weight:800;letter-spacing:.03em; }
.simple-promise i { width:4px;height:4px;border-radius:50%;background:#357dff;box-shadow:0 0 12px #357dff; }
.nav-actions { display:flex;align-items:center;gap:10px; }
.nav-link-button { color:#dfe7fb;text-decoration:none;font-weight:780;font-size:13px;padding:10px; }
.button { border:1px solid transparent;min-height:46px;border-radius:14px;padding:0 20px;display:inline-flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;font-size:13px;font-weight:850;cursor:pointer;transition:transform .16s ease,box-shadow .18s ease,border-color .18s ease; }
.button:hover { transform:translateY(-2px); }
.button-primary { color:#fff;background:linear-gradient(112deg,#7750ff 0%,#2a75ff 52%,#2bcdf7 100%);box-shadow:0 12px 34px rgba(48,113,255,.31),inset 0 1px rgba(255,255,255,.3); }
.button-primary:hover { box-shadow:0 16px 42px rgba(48,113,255,.42),inset 0 1px rgba(255,255,255,.34); }
.button-small { min-height:40px;border-radius:12px;padding:0 16px;font-size:12px; }
.kicker { color:#7aa9ff;letter-spacing:.2em;font-size:10px;font-weight:900;text-transform:uppercase; }

.studio-body { height:100dvh; overflow:hidden; }
.studio-shell { height:calc(100dvh - 68px); padding:16px 0 18px; display:grid; grid-template-columns:minmax(330px,380px) minmax(0,1fr); gap:16px; }
.builder-card,.preview-card { min-height:0;border:1px solid var(--line);border-radius:24px;background:linear-gradient(160deg,rgba(10,30,70,.88),rgba(5,15,39,.94));box-shadow:0 30px 80px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.055);overflow:hidden; }
.builder-card { padding:22px;display:flex;flex-direction:column;gap:15px; }
.builder-intro h1 { margin:10px 0 9px;font-size:clamp(31px,2.65vw,43px);line-height:.97;letter-spacing:-.06em;font-weight:920; }
.builder-intro h1 span { color:transparent;background:linear-gradient(100deg,#56cfff,#5a79ff 45%,#a65cff);-webkit-background-clip:text;background-clip:text; }
.builder-intro p { margin:0;color:#aebddd;font-size:13px;line-height:1.55; }
.builder-controls { display:grid;gap:10px;min-height:0; }
/* Flex children default to shrink:1, so whenever the card ran tight the
   control blocks collapsed under their own content and .embed-ready painted
   OVER them (every laptop-class viewport). Controls keep natural height;
   the card scrolls instead. */
.builder-intro,.builder-controls,.embed-ready { flex-shrink:0; }
/* Intro paragraph is flavor — dropping it on desktop keeps the whole builder
   (and the Ready block) inside laptop-class viewports with no scroll. */
@media (min-width:901px){ .builder-intro p { display:none; } }
.control-block { border:1px solid rgba(119,157,236,.15);border-radius:18px;padding:13px;background:rgba(255,255,255,.025); }
.compact-block { padding:12px 13px; }
.control-label-row { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px; }
.control-label-row strong { font-size:13px; }
.control-label-row small { color:#7f92ba;font-size:10px; }
.preset-row { display:grid;grid-template-columns:repeat(3,1fr);gap:7px; }
.preset { height:36px;border:1px solid rgba(119,157,236,.17);border-radius:11px;background:rgba(255,255,255,.025);color:#dbe6fb;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;transition:.16s ease; }
.preset:hover,.preset.is-active { border-color:rgba(87,142,255,.55);background:rgba(49,104,225,.14);box-shadow:0 7px 20px rgba(0,0,0,.13); }
.preset-dot { width:10px;height:10px;border-radius:50%;box-shadow:0 0 11px currentColor; }
.nebula-dot { background:#6f66ff;color:#6f66ff; }.aurora-dot { background:#37d8bd;color:#37d8bd; }.midnight-dot { background:#4288ff;color:#4288ff; }
.color-row { display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:8px; }
.color-row label { height:40px;border:1px solid rgba(119,157,236,.13);border-radius:11px;background:rgba(3,14,34,.55);padding:5px 7px;display:flex;align-items:center;justify-content:space-between;gap:6px;color:#8fa2ca;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.05em; }
.color-row input[type="color"] { width:26px;height:24px;border:1px solid rgba(255,255,255,.22);border-radius:7px;background:transparent;padding:0;cursor:pointer;overflow:hidden; }
.color-row input[type="color"]::-webkit-color-swatch-wrapper { padding:0; }
.color-row input[type="color"]::-webkit-color-swatch { border:0;border-radius:5px; }
.direction-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:7px; }
.direction-grid button { height:35px;border:1px solid rgba(119,157,236,.15);border-radius:10px;background:rgba(255,255,255,.025);color:#b9c8e6;font-size:10px;font-weight:800;cursor:pointer;transition:.16s ease; }
.direction-grid button:hover,.direction-grid button.is-active { color:#fff;border-color:rgba(74,135,255,.52);background:linear-gradient(115deg,rgba(119,80,255,.28),rgba(42,117,255,.22));box-shadow:0 8px 22px rgba(27,78,190,.15); }
.pill-settings { display:grid;grid-template-columns:1fr 116px;gap:8px; }
.pill-settings>input { width:100%;height:38px;border:1px solid rgba(119,157,236,.16);border-radius:11px;background:#071a3a;color:#eef4ff;padding:0 10px;outline:none;font-size:11px; }
.pill-settings>input:focus { border-color:#3b86ff;box-shadow:0 0 0 3px rgba(52,122,255,.1); }
.radius-control { height:38px;border:1px solid rgba(119,157,236,.14);border-radius:11px;background:rgba(3,14,34,.55);padding:0 9px;display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:center;color:#8fa2ca;font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase; }
.radius-control input { width:100%; }
/* Pill label/round only apply to the pill launcher — hidden in side-tab mode
   (the default), which reclaims a whole row of vertical space. */
.control-block:has([data-launcher-choice="tab"].is-active) .pill-settings { display:none; }
.control-block:has([data-launcher-choice="tab"].is-active) .launcher-options { margin-bottom:0; }

/* Premium: use your own logo ------------------------------------------------ */
.premium-toggle { width:100%;min-height:38px;border:1px solid rgba(122,169,255,.38);border-radius:11px;background:linear-gradient(115deg,rgba(119,80,255,.24),rgba(42,117,255,.2) 55%,rgba(42,117,255,.1));color:#dbe9ff;font-size:11px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 12px;box-shadow:inset 0 1px rgba(255,255,255,.08);transition:.16s ease; }
.premium-toggle:hover { border-color:rgba(122,169,255,.7);box-shadow:0 8px 22px rgba(27,78,190,.2); }
.premium-toggle span { color:#8fb6ff; }
.premium-toggle[aria-expanded="true"] { border-style:solid; }
.premium-toggle[aria-expanded="true"] span { transform:rotate(90deg);transition:.16s ease; }
.premium-panel { margin-top:9px;display:grid;gap:8px; }
.premium-panel[hidden] { display:none; }
.pf { display:grid;gap:5px; }
.pf>span { color:#8fa2ca;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.05em; }
.pf>input { width:100%;height:36px;border:1px solid rgba(119,157,236,.16);border-radius:11px;background:#071a3a;color:#eef4ff;padding:0 10px;outline:none;font-size:11px; }
.pf>input:focus { border-color:#3b86ff;box-shadow:0 0 0 3px rgba(52,122,255,.1); }
.pf>small { color:#7186ae;font-size:9.5px;line-height:1.4; }
.logo-coins { display:grid;grid-template-columns:repeat(4,1fr);gap:7px; }
.logo-coins button { height:34px;border:1px solid rgba(119,157,236,.15);border-radius:10px;background:rgba(255,255,255,.025);color:#b9c8e6;font-size:10px;font-weight:800;cursor:pointer;transition:.16s ease; }
.logo-coins button:hover,.logo-coins button.is-active { color:#fff;border-color:rgba(74,135,255,.52);background:linear-gradient(115deg,rgba(119,80,255,.28),rgba(42,117,255,.22)); }
.logo-meta { margin:0;color:#8ea3cc;font-size:10px;line-height:1.5; }
.premium-buy { width:100%;min-height:40px;font-size:11px; }
.premium-buy:disabled { opacity:.55;cursor:wait; }
.logo-error { margin:0;color:#ff8fa3;font-size:10.5px;line-height:1.45; }
.logo-error[hidden] { display:none; }
.logo-payment { border-top:1px solid rgba(119,157,236,.14);padding-top:9px; }
.lp-row { display:flex;align-items:center;justify-content:space-between;gap:10px; }
.lp-row strong { font-size:12px;letter-spacing:.04em; }
.lp-status { font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:#ffd479; }
.lp-status[data-state="confirming"] { color:#8fd8ff; }
.lp-status[data-state="paid"] { color:#7dffcc; }
.lp-status[data-state="expired"],.lp-status[data-state="quote_expired"] { color:#ff9aa8; }
.lp-amount { display:grid;gap:1px;text-align:left; }
.lp-amount strong { font-size:16px;color:#fff;word-break:break-all; }
.lp-amount small { color:#8ea3cc;font-size:10px; }
.lp-main { display:grid;grid-template-columns:86px 1fr;gap:9px;align-items:center; }
.lp-qr { width:86px;height:86px;border-radius:11px;background:#fff;padding:5px;display:flex;align-items:center;justify-content:center;overflow:hidden; }
.lp-qr svg { width:100%;height:100%;display:block; }
.lp-qr small { color:#5a6b8c;font-size:8px;text-align:center;padding:4px; }
.lp-addr { display:grid;gap:6px;min-width:0; }
.lp-addr code { display:block;overflow-wrap:anywhere;font-size:10px;line-height:1.45;color:#a9c5ff;background:#040f25;border:1px solid rgba(119,157,236,.13);border-radius:9px;padding:7px 8px; }
.lp-addr button,.lp-actions button { height:30px;border:1px solid rgba(119,157,236,.2);border-radius:9px;background:rgba(255,255,255,.04);color:#cfe0ff;font-size:10px;font-weight:800;cursor:pointer;transition:.16s ease; }
.lp-addr button:hover,.lp-actions button:hover { border-color:rgba(74,135,255,.55);color:#fff; }
.lp-progress { margin:0;color:#ffd479;font-size:10.5px;font-weight:700;line-height:1.45; }
.lp-progress[data-state="paid"] { color:#7dffcc; }
.lp-progress[data-state="expired"],.lp-progress[data-state="quote_expired"] { color:#ff9aa8; }
.lp-note { margin:0;color:#7186ae;font-size:9.5px;line-height:1.5;min-height:1em; }
.lp-actions { display:grid;grid-template-columns:1fr 1fr;gap:7px; }
.logo-done { text-align:center;justify-items:center;border-top:1px solid rgba(119,157,236,.14);padding-top:11px; }
.lp-done-img { width:54px;height:54px;border-radius:14px;background:#040f25;border:1px solid rgba(122,169,255,.35);display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 10px 26px rgba(67,223,169,.18); }
.lp-done-img img { max-width:82%;max-height:82%;object-fit:contain; }
.logo-done strong { font-size:13px;color:#7dffcc; }
.logo-done p { margin:0;color:#8ea3cc;font-size:10.5px;line-height:1.5; }
.logo-done p span { color:#cfe0ff;overflow-wrap:anywhere; }
.embed-ready { margin-top:auto;border:1px solid rgba(100,150,255,.2);border-radius:18px;padding:13px;background:linear-gradient(145deg,rgba(13,38,89,.88),rgba(5,16,42,.9));box-shadow:inset 0 1px rgba(255,255,255,.04); }
.embed-ready-head { display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px; }
.embed-ready-head>div { display:grid;gap:1px; }.embed-ready-head strong { font-size:12px; }.embed-ready-head small { color:#7f92ba;font-size:9px; }
.ready-dot { display:inline-flex;align-items:center;gap:5px;color:#7dffcc;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.1em; }.ready-dot::before { content:"";width:6px;height:6px;border-radius:50%;background:#43dfa9;box-shadow:0 0 12px #43dfa9; }
.embed-ready pre { max-height:56px;overflow:hidden;margin:0 0 9px;padding:9px 10px;border-radius:11px;background:#040f25;border:1px solid rgba(119,157,236,.13);color:#a9c5ff;font-size:8.5px;line-height:1.45;white-space:pre-wrap; }
.copy-main { width:100%;min-height:43px;font-size:11px; }

.preview-card { display:grid;grid-template-rows:44px 1fr; }
.preview-head { display:grid;grid-template-columns:90px 1fr 120px;align-items:center;padding:0 14px;border-bottom:1px solid rgba(255,255,255,.055);background:rgba(255,255,255,.025); }
.browser-dots { display:flex;gap:6px; }.browser-dots span { width:9px;height:9px;border-radius:50%;background:#ff6e76; }.browser-dots span:nth-child(2){background:#ffc652}.browser-dots span:nth-child(3){background:#38d38b}
.preview-url { justify-self:center;min-width:250px;max-width:440px;width:50%;height:27px;border-radius:999px;background:rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;gap:7px;color:#8093bb;font-size:9px; }
.preview-status { justify-self:end;color:#8ba1ca;font-size:9px;font-weight:800;display:flex;align-items:center;gap:6px; }.preview-status i { width:6px;height:6px;border-radius:50%;background:#43dfa9;box-shadow:0 0 10px #43dfa9; }
.host-site { position:relative;min-height:0;overflow:hidden;background:radial-gradient(580px 350px at 90% 12%,rgba(52,129,255,.17),transparent 66%),radial-gradient(480px 300px at 8% 90%,rgba(136,67,255,.15),transparent 70%),linear-gradient(140deg,#e8f0ff 0%,#d7e6ff 42%,#cbdcff 100%);color:#122347; }
.host-nav { height:68px;padding:0 24px;display:flex;align-items:center;gap:22px;border-bottom:1px solid rgba(25,54,111,.08);background:rgba(249,252,255,.56);backdrop-filter:blur(10px);position:relative;z-index:12; }
.host-brand { display:flex;align-items:center;gap:8px;margin-right:auto; }.host-mark { width:27px;height:27px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(135deg,#2c77ff,#8058ff);color:#fff;box-shadow:0 6px 18px rgba(50,94,190,.2); }.host-brand strong { font-size:14px; }
.host-links { display:flex;gap:22px;color:#53678f;font-size:9px;font-weight:800; }
.preview-pill { --preview-accent:#2ecfff;--preview-accent-deep:#7750ff;--preview-radius:18px;min-height:42px;padding:0 14px 0 8px;border:1px solid rgba(255,255,255,.66);border-radius:var(--preview-radius);color:#fff;background:linear-gradient(115deg,var(--preview-accent-deep),color-mix(in srgb,var(--preview-accent-deep) 44%,var(--preview-accent) 56%) 52%,var(--preview-accent));display:inline-flex;align-items:center;gap:8px;cursor:pointer;box-shadow:0 10px 24px rgba(41,94,207,.25),inset 0 1px rgba(255,255,255,.32);transition:.17s ease; }
.preview-pill:hover { transform:translateY(-2px);box-shadow:0 14px 30px rgba(41,94,207,.32),inset 0 1px rgba(255,255,255,.36); }.preview-pill img { width:28px;height:28px;border-radius:8px; }.preview-pill strong { font-size:10px; }
.host-content { position:absolute;inset:68px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;padding:clamp(32px,5vw,74px); }
.host-copy { max-width:580px;position:relative;z-index:2; }.host-kicker { color:#4e6fa9;font-size:10px;font-weight:900;letter-spacing:.18em; }.host-copy h2 { margin:14px 0 14px;font-size:clamp(44px,5vw,78px);line-height:.93;letter-spacing:-.065em;color:#10234b; }.host-copy h2 span { color:transparent;background:linear-gradient(100deg,#1b6cff,#6847ee 58%,#9b57ef);-webkit-background-clip:text;background-clip:text; }.host-copy p { margin:0;max-width:500px;color:#5b6f98;font-size:14px;line-height:1.65; }.host-badges { display:flex;flex-wrap:wrap;gap:8px;margin-top:20px; }.host-badges span { padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.5);border:1px solid rgba(38,75,144,.09);font-size:9px;font-weight:850;color:#3c5687;box-shadow:0 6px 18px rgba(53,84,144,.06); }
.host-visual { position:relative;height:100%;min-height:380px; }.orb { position:absolute;border-radius:50%;filter:blur(2px);box-shadow:0 26px 70px rgba(49,79,154,.15); }.orb-a { width:290px;height:290px;right:7%;top:10%;background:radial-gradient(circle at 35% 30%,#eafaff 0 8%,#66b9ff 28%,#6172f6 58%,#8050e7 83%,#5935a5 100%);opacity:.8; }.orb-b { width:180px;height:180px;left:7%;bottom:5%;background:linear-gradient(145deg,#70e2ff,#7866ff 54%,#b064ff);opacity:.55; }.glass-card { position:absolute;right:9%;bottom:13%;width:260px;height:140px;padding:20px;border-radius:24px;border:1px solid rgba(255,255,255,.54);background:rgba(255,255,255,.45);box-shadow:0 26px 70px rgba(35,61,118,.14);display:flex;flex-direction:column;justify-content:flex-end; }.glass-card span { color:#6078a5;font-size:9px;font-weight:900;letter-spacing:.18em; }.glass-card strong { color:#1c376d;font-size:27px;letter-spacing:-.04em; }

.preview-wallet-panel { --wallet-panel-bg:#07112b;position:absolute;z-index:30;width:min(405px,42%);height:min(610px,calc(100% - 96px));min-width:350px;min-height:480px;border:1px solid rgba(85,132,230,.24);border-radius:22px;overflow:hidden;background:var(--wallet-panel-bg);box-shadow:0 28px 80px rgba(13,28,65,.34),0 0 50px rgba(58,108,255,.16);opacity:0;pointer-events:none;transition:transform .34s cubic-bezier(.2,.9,.22,1),opacity .22s ease;will-change:transform,opacity; }
.preview-wallet-panel iframe { width:100%;height:100%;border:0;background:var(--wallet-panel-bg);display:block; }
.preview-wallet-close { position:absolute;z-index:4;right:10px;top:10px;width:30px;height:30px;border:1px solid rgba(255,255,255,.09);border-radius:10px;background:rgba(5,15,38,.9);color:#c6d5ef;font-size:19px;line-height:1;cursor:pointer; }
.preview-wallet-panel[data-direction="right"] { right:18px;top:84px;transform:translateX(calc(100% + 32px)); }
.preview-wallet-panel[data-direction="left"] { left:18px;top:84px;transform:translateX(calc(-100% - 32px)); }
.preview-wallet-panel[data-direction="top"] { left:calc(50% - 202px);top:84px;transform:translateY(calc(-100% - 32px)); }
.preview-wallet-panel[data-direction="bottom"] { left:calc(50% - 202px);bottom:18px;transform:translateY(calc(100% + 32px)); }
.preview-wallet-panel.is-open { transform:none;opacity:1;pointer-events:auto; }
.preview-hint { position:absolute;left:24px;bottom:18px;z-index:10;padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.58);border:1px solid rgba(42,77,143,.09);color:#49638f;font-size:9px;font-weight:800;box-shadow:0 8px 24px rgba(45,73,130,.08);backdrop-filter:blur(10px); }
.copy-toast { position:fixed;left:50%;bottom:20px;z-index:100;transform:translate(-50%,18px);opacity:0;pointer-events:none;border:1px solid rgba(122,166,255,.29);border-radius:999px;padding:10px 16px;background:rgba(7,23,56,.95);box-shadow:0 16px 40px rgba(0,0,0,.35);font-size:10px;font-weight:850;transition:.22s ease; }.copy-toast.is-visible { opacity:1;transform:translate(-50%,0); }

/* shared styles used by docs.html */
.site-nav { display:flex;align-items:center;gap:25px;margin-left:auto; }.site-nav a { color:#c9d3eb;text-decoration:none;font-size:12px;font-weight:750; }.site-nav a:hover { color:#fff; }
.footer { border-top:1px solid rgba(255,255,255,.055);background:#020714; }.footer-top { min-height:130px;display:flex;align-items:center;gap:28px; }.footer-top p { color:#7588b0;font-size:12px;margin-right:auto; }.footer-top nav { display:flex;gap:24px; }.footer-top nav a { color:#91a2c6;text-decoration:none;font-size:11px;font-weight:700; }
.studio-footer { padding:22px 0 26px; }.studio-footer .footer-inner { display:flex;align-items:center;gap:20px;flex-wrap:wrap; }.studio-footer .footer-inner .brand { display:flex;align-items:center;gap:10px;text-decoration:none; }.studio-footer .brand-mark { width:30px;height:30px; }.studio-footer .brand-name { color:#eaf0ff;font-size:15px;font-weight:900;letter-spacing:.01em; }.studio-footer .brand-name span { color:#7fc2ff; }.studio-footer-note { color:#7588b0;font-size:12px;margin:0 auto 0 0;flex:1 1 auto;min-width:180px; }.studio-footer-right { display:flex;align-items:center;gap:16px; }.studio-footer-right a { color:#91a2c6;text-decoration:none;font-size:11px;font-weight:750;letter-spacing:.06em;text-transform:uppercase; }.studio-footer-right a:hover { color:#fff; }.studio-footer-llc { color:#5f7099;font-size:11px;letter-spacing:.05em; }
@media (max-width:560px) { .studio-footer .footer-inner { flex-direction:column;align-items:flex-start;gap:10px; } .studio-footer-note { order:3;flex-basis:100%;margin:0; } .studio-footer-right { gap:14px; } }

@media (max-width:1180px) {
  .studio-shell { grid-template-columns:320px minmax(0,1fr); }.builder-card{padding:17px}.builder-intro h1{font-size:31px}.host-links{display:none}.preview-wallet-panel{width:min(380px,48%);min-width:320px}.host-copy h2{font-size:48px}.host-visual{min-height:320px}.orb-a{width:230px;height:230px}.glass-card{width:220px}.simple-promise{display:none}
}
@media (max-width:900px) {
  .studio-body { overflow:auto;height:auto; }.studio-shell { height:auto;min-height:calc(100dvh - 68px);grid-template-columns:1fr;padding-bottom:16px; }.builder-card{min-height:auto}.preview-card{min-height:680px}.embed-ready{margin-top:0}.studio-header{position:sticky;top:0}.host-content{padding:42px}.preview-wallet-panel{width:min(390px,60%)}
}
@media (max-width:640px) {
  .shell{width:min(var(--shell),calc(100% - 20px))}.nav-actions .nav-link-button{display:none}.nav-actions .button{font-size:10px;padding:0 12px}.brand-name{font-size:18px}.brand-mark{width:36px;height:36px}.studio-shell{gap:10px;padding-top:10px}.builder-card,.preview-card{border-radius:20px}.preview-card{min-height:620px}.host-nav{padding:0 12px}.host-content{padding:28px;grid-template-columns:1fr}.host-visual{display:none}.host-copy h2{font-size:42px}.preview-wallet-panel{width:calc(100% - 24px);min-width:0;height:520px;max-height:calc(100% - 90px)}.preview-wallet-panel[data-direction="right"]{right:12px}.preview-wallet-panel[data-direction="left"]{left:12px}.preview-wallet-panel[data-direction="top"],.preview-wallet-panel[data-direction="bottom"]{left:12px}.direction-grid{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){.preview-wallet-panel,.button,.preset,.direction-grid button,.preview-pill{transition:none}}

/* Viewport-aware studio refinements -------------------------------------- */
:root {
  --studio-header-h: 68px;
  --studio-gap: clamp(10px, 1vw, 16px);
  --studio-pad-y: clamp(10px, 1.4vh, 16px);
}

.mobile-workspace-switch { display:none; }

.studio-body {
  min-height:100svh;
  height:var(--app-vh, 100dvh);
  overflow:hidden;
}

.studio-shell {
  height:calc(var(--app-vh, 100dvh) - var(--studio-header-h));
  min-height:0;
  padding:var(--studio-pad-y) 0 max(var(--studio-pad-y), env(safe-area-inset-bottom));
  gap:var(--studio-gap);
}

.builder-card,
.preview-card { height:100%; min-height:0; }

.builder-card {
  padding:clamp(14px, 1.35vw, 22px);
  gap:clamp(9px, 1.4vh, 15px);
}

.builder-intro h1 {
  font-size:clamp(29px, min(2.65vw, 5.2vh), 43px);
  margin:clamp(7px, 1vh, 10px) 0 clamp(6px, .9vh, 9px);
}
.builder-intro p { font-size:clamp(11px, 1.55vh, 13px); line-height:1.45; }
.builder-controls { gap:clamp(7px, 1vh, 10px); }
.control-block { padding:clamp(9px, 1.25vh, 13px); }
.compact-block { padding:clamp(9px, 1.1vh, 12px) clamp(10px, 1vw, 13px); }
.control-label-row { margin-bottom:clamp(7px, 1vh, 10px); }
.preset { height:clamp(31px, 4.6vh, 36px); }
.color-row label { height:clamp(35px, 5.1vh, 40px); }
.direction-grid button { height:clamp(31px, 4.6vh, 35px); }
.pill-settings>input,
.radius-control { height:clamp(34px, 5vh, 38px); }
.embed-ready { padding:clamp(10px, 1.25vh, 13px); }
.embed-ready pre { max-height:clamp(44px, 7.2vh, 56px); margin-bottom:clamp(7px, 1vh, 9px); }
.copy-main { min-height:clamp(38px, 5.5vh, 43px); }

.preview-card { grid-template-rows:clamp(38px, 5.8vh, 44px) 1fr; }
.preview-head { padding-inline:clamp(10px, 1vw, 14px); }
.host-nav { height:clamp(56px, 8.8vh, 68px); padding-inline:clamp(14px, 1.8vw, 24px); }
.host-content { inset:clamp(56px, 8.8vh, 68px) 0 0; padding:clamp(24px, min(4vw, 5vh), 74px); }
.host-copy h2 { font-size:clamp(38px, min(5vw, 8vh), 78px); }
.host-copy p { font-size:clamp(12px, 1.8vh, 14px); }
.host-badges { margin-top:clamp(12px, 2.4vh, 20px); }
.host-visual { min-height:clamp(250px, 48vh, 380px); }

.preview-wallet-panel {
  width:clamp(320px, 36vw, 405px);
  min-width:0;
  height:min(610px, calc(100% - clamp(78px, 12vh, 96px)));
  min-height:clamp(390px, 60vh, 480px);
}
.preview-wallet-panel[data-direction="right"],
.preview-wallet-panel[data-direction="left"] { top:clamp(68px, 10.5vh, 84px); }
.preview-wallet-panel[data-direction="top"] { top:clamp(68px, 10.5vh, 84px); left:50%; translate:-50% 0; }
.preview-wallet-panel[data-direction="bottom"] { left:50%; translate:-50% 0; bottom:clamp(12px, 2vh, 18px); }
.preview-wallet-panel[data-direction="top"].is-open,
.preview-wallet-panel[data-direction="bottom"].is-open { transform:none; }

/* Compact laptop heights: keep the whole builder in one viewport. */
@media (min-width:901px) and (max-height:800px) {
  :root { --studio-header-h: 62px; --studio-pad-y: 9px; --studio-gap: 11px; }
  .studio-header { height:62px; }
  .nav-shell { min-height:62px; }
  .brand-mark { width:36px; height:36px; }
  .brand-name { font-size:19px; }
  .button-small { min-height:36px; }
  .builder-card { padding:13px; gap:8px; }
  .builder-intro h1 { font-size:30px; margin:6px 0; }
  .kicker { font-size:9px; }
  .control-block { padding:8px 10px; border-radius:15px; }
  .control-label-row { margin-bottom:6px; }
  .preset { height:29px; }
  .color-row { margin-top:6px; }
  .color-row label { height:31px; }
  .direction-grid button { height:29px; }
  .pill-settings>input, .radius-control { height:31px; }
  .embed-ready { padding:9px 10px; }
  .embed-ready-head { margin-bottom:5px; }
  .embed-ready pre { max-height:38px; padding:6px 8px; margin-bottom:6px; }
  .copy-main { min-height:35px; }
  .preview-card { grid-template-rows:38px 1fr; }
  .host-nav { height:56px; }
  .host-content { inset:56px 0 0; padding:28px 34px; }
  .host-copy h2 { font-size:44px; margin:9px 0; }
  .host-copy p { font-size:12px; line-height:1.5; }
  .host-badges { margin-top:12px; }
  .host-visual { min-height:250px; }
  .orb-a { width:220px; height:220px; }
  .orb-b { width:135px; height:135px; }
  .glass-card { width:205px; height:112px; padding:15px; }
  .glass-card strong { font-size:22px; }
  .preview-wallet-panel { height:min(540px, calc(100% - 72px)); min-height:390px; }
  .preview-wallet-panel[data-direction="right"], .preview-wallet-panel[data-direction="left"], .preview-wallet-panel[data-direction="top"] { top:64px; }
}

@media (min-width:901px) and (max-height:700px) {
  :root { --studio-header-h: 56px; --studio-pad-y: 7px; --studio-gap: 8px; }
  .studio-header { height:56px; }
  .nav-shell { min-height:56px; }
  .brand-mark { width:32px; height:32px; }
  .brand-name { font-size:18px; }
  .nav-link-button { font-size:11px; }
  .button-small { min-height:33px; font-size:10px; }
  .studio-shell { grid-template-columns:minmax(292px, 330px) minmax(0,1fr); }
  .builder-card { padding:10px; gap:6px; }
  .builder-intro h1 { font-size:27px; margin:2px 0; }
  .kicker { display:none; }
  .builder-controls { gap:6px; }
  .control-block { padding:7px 8px; }
  .control-label-row { margin-bottom:4px; }
  .preset { height:27px; }
  .color-row label { height:29px; }
  .direction-grid button { height:27px; }
  .pill-settings>input, .radius-control { height:29px; }
  .embed-ready { padding:7px 8px; }
  .embed-ready-head { margin-bottom:4px; }
  .embed-ready pre { max-height:24px; padding:5px 7px; margin-bottom:5px; font-size:7.5px; }
  .copy-main { min-height:29px; font-size:10px; }
  .preview-card { grid-template-rows:34px 1fr; }
  .preview-head { padding:0 9px; }
  .host-nav { height:50px; }
  .preview-pill { min-height:36px; padding-right:11px; }
  .preview-pill img { width:24px; height:24px; }
  .host-content { inset:50px 0 0; padding:22px 28px; }
  .host-copy h2 { font-size:39px; margin:7px 0; }
  .host-copy p { font-size:11px; }
  .host-badges { margin-top:9px; }
  .host-badges span { padding:6px 9px; }
  .host-visual { min-height:210px; }
  .orb-a { width:190px; height:190px; }
  .orb-b { width:110px; height:110px; }
  .glass-card { width:175px; height:95px; padding:12px; }
  .glass-card strong { font-size:19px; }
  .preview-wallet-panel { width:clamp(300px, 33vw, 365px); height:min(475px, calc(100% - 62px)); min-height:350px; }
  .preview-wallet-panel[data-direction="right"], .preview-wallet-panel[data-direction="left"], .preview-wallet-panel[data-direction="top"] { top:56px; }
  .preview-hint { bottom:10px; left:14px; padding:6px 9px; }
}

/* Tablet/mobile: keep the PAGE locked to the viewport and switch panes. */
@media (max-width:900px) {
  :root { --studio-header-h: 62px; }
  .studio-body { overflow:hidden; height:var(--app-vh, 100dvh); }
  .studio-header { height:62px; position:relative; }
  .nav-shell { min-height:62px; }
  .simple-promise { display:none; }
  .mobile-workspace-switch {
    display:grid; grid-template-columns:1fr 1fr; gap:4px;
    height:42px; padding:6px; margin-top:8px; border:1px solid var(--line); border-radius:15px;
    background:rgba(7,21,51,.88); box-shadow:inset 0 1px rgba(255,255,255,.04);
  }
  .mobile-workspace-switch button {
    border:0; border-radius:10px; background:transparent; color:#93a6cd; font-size:11px; font-weight:850; cursor:pointer;
  }
  .mobile-workspace-switch button.is-active { color:#fff; background:linear-gradient(112deg,rgba(119,80,255,.72),rgba(42,117,255,.72)); box-shadow:0 8px 20px rgba(34,83,186,.2); }
  .studio-shell {
    height:calc(var(--app-vh, 100dvh) - var(--studio-header-h) - 58px);
    min-height:0; grid-template-columns:1fr; padding:8px 0 max(8px, env(safe-area-inset-bottom));
  }
  .studio-shell[data-mobile-view="builder"] .preview-card,
  .studio-shell[data-mobile-view="preview"] .builder-card { display:none; }
  .builder-card, .preview-card { height:100%; min-height:0; }
  .builder-card { overflow:auto; overscroll-behavior:contain; padding-bottom:max(14px, env(safe-area-inset-bottom)); }
  .preview-card { min-height:0; }
  .host-content { padding:clamp(22px,5vw,42px); }
  .preview-wallet-panel { width:min(390px, 58%); }
}

@media (max-width:640px) {
  .shell { width:min(var(--shell), calc(100% - 16px)); }
  .nav-actions .nav-link-button { display:none; }
  .nav-actions .button { font-size:9px; padding:0 10px; min-height:34px; }
  .brand-name { font-size:17px; }
  .brand-mark { width:34px; height:34px; }
  .studio-shell { gap:8px; }
  .builder-card, .preview-card { border-radius:18px; }
  .builder-card { padding:13px; }
  .builder-intro h1 { font-size:30px; }
  .host-nav { height:54px; padding:0 10px; }
  .host-links { display:none; }
  .host-content { inset:54px 0 0; padding:24px; grid-template-columns:1fr; }
  .host-visual { display:none; }
  .host-copy h2 { font-size:clamp(36px, 11vw, 48px); }
  .preview-wallet-panel {
    width:min(340px, calc(100% - 22px)); height:min(500px, calc(100% - 74px)); min-height:0;
  }
  .preview-wallet-panel[data-direction="right"] { right:11px; top:64px; }
  .preview-wallet-panel[data-direction="left"] { left:11px; top:64px; }
  .preview-wallet-panel[data-direction="top"] { left:50%; top:64px; }
  .preview-wallet-panel[data-direction="bottom"] { left:50%; bottom:11px; }
  .direction-grid { grid-template-columns:repeat(2,1fr); }
  .preview-hint { left:12px; bottom:10px; max-width:calc(100% - 24px); white-space:normal; }
}

@media (max-width:430px) {
  .brand-name { display:none; }
  .nav-actions .button span { display:none; }
  .nav-actions .button { padding-inline:9px; }
  .mobile-workspace-switch { margin-top:6px; }
  .studio-shell { height:calc(var(--app-vh, 100dvh) - var(--studio-header-h) - 54px); }
  .builder-intro h1 { font-size:28px; }
  .color-row { grid-template-columns:1fr; }
  .color-row label { height:36px; }
  .pill-settings { grid-template-columns:1fr; }
  .preview-pill { min-height:38px; padding:0 10px 0 6px; }
  .preview-pill img { width:24px; height:24px; }
  .host-brand strong { display:none; }
  .host-copy h2 { font-size:36px; }
  .host-copy p { font-size:11px; }
  .host-badges span:nth-child(3) { display:none; }
  .preview-wallet-panel { width:calc(100% - 16px); }
  .preview-wallet-panel[data-direction="right"] { right:8px; }
  .preview-wallet-panel[data-direction="left"] { left:8px; }
}

@media (orientation:landscape) and (max-width:900px) and (max-height:520px) {
  :root { --studio-header-h: 50px; }
  .studio-header { height:50px; }
  .nav-shell { min-height:50px; }
  .brand-mark { width:30px; height:30px; }
  .mobile-workspace-switch { height:36px; margin-top:5px; padding:4px; }
  .studio-shell { height:calc(var(--app-vh, 100dvh) - var(--studio-header-h) - 45px); padding-top:5px; }
  .builder-card { padding:10px; }
  .builder-intro h1 { font-size:24px; }
  .builder-intro p { font-size:10px; }
  .preview-card { grid-template-rows:32px 1fr; }
  .host-nav { height:46px; }
  .host-content { inset:46px 0 0; padding:18px 24px; }
  .host-copy h2 { font-size:34px; }
  .preview-wallet-panel { height:calc(100% - 54px); width:min(330px, 48%); }
  .preview-wallet-panel[data-direction="right"], .preview-wallet-panel[data-direction="left"], .preview-wallet-panel[data-direction="top"] { top:49px; }
}

/* Wallet preview must always stay inside the visible preview canvas. */
.preview-wallet-panel{
  min-height:0 !important;
  max-height:calc(100% - 76px);
}
.preview-wallet-panel[data-direction="right"],
.preview-wallet-panel[data-direction="left"],
.preview-wallet-panel[data-direction="top"]{
  height:min(590px,calc(100% - 76px));
}
.preview-wallet-panel[data-direction="bottom"]{
  height:min(590px,calc(100% - 30px));
  max-height:calc(100% - 30px);
}
@media (min-width:901px) and (max-height:800px){
  .preview-wallet-panel[data-direction="right"],
  .preview-wallet-panel[data-direction="left"],
  .preview-wallet-panel[data-direction="top"]{height:calc(100% - 72px);max-height:calc(100% - 72px)}
  .preview-wallet-panel[data-direction="bottom"]{height:calc(100% - 24px);max-height:calc(100% - 24px)}
}
@media (min-width:901px) and (max-height:700px){
  .preview-wallet-panel[data-direction="right"],
  .preview-wallet-panel[data-direction="left"],
  .preview-wallet-panel[data-direction="top"]{height:calc(100% - 64px);max-height:calc(100% - 64px)}
}
@media (max-width:900px){
  .preview-wallet-panel{min-height:0!important;max-height:calc(100% - 68px)}
}

/* Widget studio navigation + expanded visual themes --------------------- */
.studio-nav{display:flex;align-items:center;gap:6px;margin-left:auto}
.studio-nav a{height:36px;padding:0 11px;display:grid;place-items:center;border-radius:10px;color:#94a9d0;text-decoration:none;font-size:11.5px;font-weight:780;transition:.16s ease}
.studio-nav a:hover,.studio-nav a.is-active{color:#fff;background:rgba(255,255,255,.055)}
.studio-nav a.is-active{box-shadow:inset 0 -2px #347fff}
.preset-row--themes{grid-template-columns:repeat(3,1fr)}
.solar-dot{background:#ffb13b;color:#ffb13b}.rose-dot{background:#f45cb4;color:#f45cb4}.emerald-dot{background:#36dfa0;color:#36dfa0}
@media(max-width:1180px){.studio-nav{display:none}}
@media(max-width:640px){.preset-row--themes{grid-template-columns:repeat(2,1fr)}}


/* Final responsive + theme polish ---------------------------------------- */
@supports (padding:max(0px)){
  .studio-header .nav-shell{padding-left:max(0px,env(safe-area-inset-left));padding-right:max(0px,env(safe-area-inset-right))}
  .studio-shell{padding-left:max(0px,env(safe-area-inset-left));padding-right:max(0px,env(safe-area-inset-right))}
}
.preset-row--themes .preset{position:relative;overflow:hidden;isolation:isolate;border-color:rgba(138,171,244,.14)}
.preset-row--themes .preset:before{content:"";position:absolute;inset:0;z-index:-1;opacity:.18;transition:opacity .16s ease}
.preset-row--themes .preset:hover:before,.preset-row--themes .preset.is-active:before{opacity:.38}
.preset-row--themes .preset.is-active{border-color:rgba(126,165,255,.42);box-shadow:0 8px 20px rgba(35,78,170,.16),inset 0 1px rgba(255,255,255,.05)}
.preset-row--themes [data-preset="nebula"]:before{background:linear-gradient(120deg,#7750ff,#2ecfff)}
.preset-row--themes [data-preset="aurora"]:before{background:linear-gradient(120deg,#356dff,#3be5c3)}
.preset-row--themes [data-preset="midnight"]:before{background:linear-gradient(120deg,#202563,#6bb8ff)}
.preset-row--themes [data-preset="solar"]:before{background:linear-gradient(120deg,#f07a2a,#ffc44f)}
.preset-row--themes [data-preset="rose"]:before{background:linear-gradient(120deg,#8f4dff,#ff74c8)}
.preset-row--themes [data-preset="emerald"]:before{background:linear-gradient(120deg,#168d78,#45e7ad)}
@media(max-width:430px){
  .studio-header .nav-shell{padding-left:max(4px,env(safe-area-inset-left));padding-right:max(4px,env(safe-area-inset-right))}
  .builder-card{padding-bottom:max(14px,env(safe-area-inset-bottom))}
}
.preview-url span{display:grid;place-items:center}.preview-url svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.host-mark svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}


/* ==========================================================================
   Round 6 — studio atmosphere polish (matches the shared Haze design system)
   ========================================================================== */

/* Card tops catch a subtle gradient hairline; shadows deepen */
.builder-card,.preview-card{position:relative;box-shadow:0 34px 90px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.06)}
.builder-card:before,.preview-card:before{
  content:"";position:absolute;top:0;left:18px;right:18px;height:1px;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(120,170,255,.4),transparent);
}
.builder-intro h1 span{filter:drop-shadow(0 0 20px rgba(84,125,255,.3))}

/* Presets: lift + glow on hover, clearer active ring */
.preset{transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease}
.preset:hover{transform:translateY(-1px)}
.preset-row--themes .preset.is-active{box-shadow:0 10px 24px rgba(35,78,170,.22),0 0 18px rgba(80,130,255,.14),inset 0 1px rgba(255,255,255,.06)}
.direction-grid button{transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease}
.direction-grid button:hover{transform:translateY(-1px)}

/* Ready block: ambient glow + pulsing live dot + sheen on the main copy CTA */
.embed-ready{box-shadow:inset 0 1px rgba(255,255,255,.05),0 0 38px rgba(50,110,255,.12)}
.ready-dot:before{animation:hzPulseDot 2.4s ease-in-out infinite}
.copy-main{position:relative;overflow:hidden}
.copy-main:after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:45%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28) 50%,transparent);
  transform:translateX(-140%) skewX(-12deg);transition:transform .55s ease;
}
.copy-main:hover:after{transform:translateX(240%) skewX(-12deg)}

/* Browser chrome: glassier head, glowing status */
.preview-head{background:rgba(255,255,255,.035);box-shadow:inset 0 -1px rgba(255,255,255,.04)}
.preview-url{box-shadow:inset 0 1px 2px rgba(0,0,0,.14),inset 0 0 0 1px rgba(255,255,255,.03)}
.preview-status i{animation:hzPulseDot 2.6s ease-in-out infinite}

/* Host mock: gentle drift so the preview feels alive */
.host-visual .orb{animation:hostOrb 13s ease-in-out infinite alternate}
.host-visual .orb-b{animation-duration:17s;animation-direction:alternate-reverse}
.host-visual .glass-card{animation:hostGlass 11s ease-in-out infinite alternate}
@keyframes hostOrb{from{transform:translate3d(0,0,0)}to{transform:translate3d(14px,-18px,0)}}
@keyframes hostGlass{from{transform:translate3d(0,0,0)}to{transform:translate3d(-10px,-12px,0)}}
.preview-pill{transition:transform .17s ease,box-shadow .17s ease}

/* Mobile workspace switch: match the card language */
.mobile-workspace-switch button{transition:color .16s ease,background .16s ease,box-shadow .16s ease}
.mobile-workspace-switch button.is-active{box-shadow:0 8px 20px rgba(34,83,186,.28),inset 0 1px rgba(255,255,255,.2)}

@media (prefers-reduced-motion:reduce){
  .host-visual .orb,.host-visual .glass-card,.ready-dot:before,.preview-status i{animation:none!important}
  .copy-main:after{display:none}
}

.launcher-options{grid-template-columns:1fr 1fr;margin-bottom:9px}
.host-site .preview-pill[data-launcher="tab"]{position:absolute;top:50%;right:0;left:auto;z-index:4;transform:translateY(-50%);writing-mode:vertical-rl;height:auto;min-height:148px;max-width:54px;padding:14px 10px;border-radius:16px 0 0 16px;gap:10px}
.host-site .preview-pill[data-launcher="tab"][data-side="left"]{left:0;right:auto;border-radius:0 16px 16px 0}
.preview-wallet-panel{width:min(420px,calc(100% - 24px))!important}
.host-site{background:#091522 url('assets/haze-mountains-dawn.webp') center/cover no-repeat}
.preview-hint{max-width:90%;line-height:1.4}

.preview-wallet-panel{min-width:0!important}
.builder-card{overflow-y:auto}

/* Photographic mock website, matching the approved mountain reference. */
.host-site{background:#879bce url('assets/haze-mountains-dawn.webp') center/cover no-repeat}
.host-site:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(211,220,255,.48),rgba(174,191,246,.12) 45%,rgba(9,24,62,.45))}
.host-nav{background:rgba(227,233,255,.9);border-bottom:1px solid #b7c9f1}
.host-copy{max-width:440px}
.host-copy h2{color:#07132f;font-size:clamp(38px,4.4vw,70px);text-shadow:0 1px 20px rgba(218,225,255,.3)}
.host-copy p{color:#213c69;text-shadow:0 1px 12px #dce6ff;line-height:1.65}
.host-kicker{color:#284f8c;background:rgba(223,234,255,.65);display:inline-block;padding:9px 12px;border-radius:20px}
.host-visual{display:none}
.host-content{grid-template-columns:1fr;padding:40px;align-items:center}
.host-badges span{color:#1b365f;background:rgba(223,234,255,.72)}
.preview-hint{color:#c0d4fa;background:rgba(7,20,47,.85);border-color:rgba(110,160,245,.24)}
.preview-wallet-panel{border:1px solid #506be9;box-shadow:0 25px 80px #05113088,0 0 25px #277aff33;border-radius:26px;width:min(440px,calc(100% - 70px))!important;max-height:calc(100% - 95px)}
.preview-wallet-panel[data-direction="right"]{right:56px}
.preview-wallet-panel[data-direction="left"]{left:56px}
.host-site .preview-pill[data-launcher="tab"]{z-index:40;min-height:170px;border:1px solid #4693ff;background:linear-gradient(160deg,#07162f,#142755);box-shadow:0 0 22px #2878ff44;border-radius:16px 0 0 16px;color:#fff}
.host-site .preview-pill[data-launcher="tab"] img{width:30px;height:30px}
@media(max-width:1180px){.host-copy{max-width:300px}.host-copy h2{font-size:44px}.host-content{padding:28px}}
@media(max-width:900px){.preview-wallet-panel{width:calc(100% - 62px)!important}.preview-wallet-panel[data-direction="right"]{right:50px}.preview-wallet-panel[data-direction="left"]{left:50px}.host-content{padding:24px}.host-copy h2{font-size:38px}.preview-hint{font-size:8px;left:8px;bottom:8px;max-width:calc(100% - 16px)}}
.host-site .preview-pill[data-launcher="tab"]{border-color:color-mix(in srgb,var(--preview-accent) 70%,#467fff);background:linear-gradient(160deg,#07162f,color-mix(in srgb,var(--preview-accent-deep) 25%,#102340));box-shadow:0 0 22px color-mix(in srgb,var(--preview-accent) 25%,transparent)}

/* Free branding studio */
.pf{display:grid;gap:6px;margin:10px 0}
.pf input:not([type=range]){width:100%;min-height:42px;padding:10px 12px;border:1px solid #ffffff20;border-radius:10px;background:#ffffff06;color:inherit;font:inherit;font-size:13px}
.pf input[type=file]{font-size:12px}
.brand-note{font-size:12px;line-height:1.6;opacity:.78;margin:8px 0 2px}
.pf output{float:right}
.pf input[aria-invalid=true]{border-color:#ff879e}
.name-input{width:100%;min-height:42px;padding:10px 12px;border:1px solid #ffffff20;border-radius:10px;background:#ffffff06;color:inherit;font:inherit;font-size:13px}
.name-input:focus{border-color:#3b86ff;box-shadow:0 0 0 3px rgba(52,122,255,.1)}
.control-options{border:1px solid rgba(119,157,236,.15);border-radius:14px;background:rgba(255,255,255,.025);margin-top:2px}
.control-options>summary{list-style:none;cursor:pointer;user-select:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 13px;font-size:11px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:#9db2d6;position:relative}
.control-options>summary::-webkit-details-marker{display:none}
.control-options>summary::before{content:"";width:7px;height:7px;border-right:1.5px solid #8fa2ca;border-bottom:1.5px solid #8fa2ca;transform:rotate(-45deg);margin-right:2px;transition:transform .18s ease}
.control-options[open]>summary::before{transform:rotate(45deg)}
.control-options>summary small{margin-left:auto;font-size:9px;text-transform:none;letter-spacing:.04em;color:#7186ae;font-weight:700;text-transform:uppercase}
.control-options>summary:hover{color:#fff}
.control-options[open]>summary{color:#fff}
.control-options>.color-row{margin:0 0 8px;padding:0 12px 4px}
.brand-detail summary small{color:#77efc3}
#embed-code{max-height:160px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;display:block}