: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; }
.site-bg { position:fixed; inset:0; z-index:-2; pointer-events:none; overflow:hidden; background:radial-gradient(1000px 680px at 78% 0%,rgba(38,104,255,.25),transparent 62%),radial-gradient(720px 560px at 4% 82%,rgba(126,63,255,.16),transparent 64%),linear-gradient(180deg,#071531,#020817 70%); }
.nebula { position:absolute; border-radius:50%; filter:blur(110px); opacity:.34; }
.nebula-a { width:460px;height:460px;right:2%;top:-8%;background:#1268ff; }
.nebula-b { width:520px;height:520px;left:-16%;bottom:-18%;background:#7a2cff;opacity:.22; }
.aurora { position:absolute;width:125%;height:180px;left:-12%;top:56%;border-radius:50%;filter:blur(12px);opacity:.45;transform:rotate(-5deg);background:radial-gradient(ellipse at center,transparent 0 22%,rgba(51,207,255,.32) 30%,rgba(77,104,255,.28) 39%,rgba(140,70,255,.34) 49%,transparent 66%);animation:drift 11s ease-in-out infinite alternate; }
.stars { position:absolute;inset:0;opacity:.22;background-image:radial-gradient(circle,rgba(166,201,255,.7) 0 1px,transparent 1.2px),radial-gradient(circle,rgba(139,92,255,.7) 0 1px,transparent 1.3px);background-size:150px 150px,220px 220px;background-position:20px 40px,90px 120px; }
@keyframes drift { to { transform:translateY(22px) rotate(-2deg) scaleX(1.03); } }

.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; }
.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:24px;height:24px;border:0;border-radius:7px;background:transparent;padding:0;cursor:pointer; }
.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;text-transform:uppercase; }
.radius-control input { width:100%; }
.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,.32);backdrop-filter:blur(18px);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; }
.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,.72);color:#c6d5ef;font-size:19px;line-height:1;cursor:pointer;backdrop-filter:blur(8px); }
.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){.aurora{animation:none}.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; }
  .builder-intro p { font-size:11px; line-height:1.38; }
  .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:4px 0; }
  .builder-intro p { font-size:10px; }
  .builder-controls { gap:6px; }
  .control-block { padding:7px 8px; }
  .control-label-row { margin-bottom:5px; }
  .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:32px; padding:5px 7px; margin-bottom:5px; font-size:7.5px; }
  .copy-main { min-height:32px; 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}