/* ============================================================
   PWC SHELL — shared chrome for every page.
   PWCStyles (global CSS) + PageHero + Shell (render-prop wrapper
   that wires tweaks, theme/accent, header, footer, sticky bar,
   and the Tweaks panel). Each page renders <Shell>{(t)=> ...}</Shell>.
   ============================================================ */

function PWCStyles() {
  return <style dangerouslySetInnerHTML={{ __html: `
/* ---------- C-CALL primitive ---------- */
.call-btn{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display);
  font-weight:800; letter-spacing:-.01em; text-decoration:none; color:var(--ember-ink);
  background:var(--ember); border:none; border-radius:var(--r); cursor:pointer; white-space:nowrap;
  box-shadow:0 8px 24px -10px rgba(242,132,43,.65), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .15s var(--ease), background .15s var(--ease), box-shadow .15s var(--ease); }
.call-btn:hover{ background:var(--ember-bright); transform:translateY(-1px);
  box-shadow:0 12px 30px -10px rgba(242,132,43,.8), inset 0 1px 0 rgba(255,255,255,.3); }
.call-btn:active{ transform:translateY(0); }
.call-ico{ display:inline-flex; }
.call-num{ font-weight:800; }
.call-xl{ padding:18px 28px; font-size:clamp(1.08rem,1.35vw,1.32rem); min-height:62px; }
.call-md{ padding:10px 16px; font-size:1rem; min-height:46px; border-radius:var(--r); }
.call-block{ padding:16px 24px; font-size:1.12rem; min-height:56px; width:100%; justify-content:center; }
.call-sticky{ padding:15px; font-size:1.08rem; min-height:54px; flex:1 1 auto; justify-content:center; }

/* ---------- Save (subordinate to call everywhere) ---------- */
.btn-ghost{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-display); font-weight:700; font-size:1rem; color:var(--text);
  background:transparent; border:1.5px solid var(--line-strong); border-radius:var(--r);
  padding:15px 22px; min-height:54px; cursor:pointer; transition:border-color .15s, color .15s, background .15s; }
.btn-ghost:hover{ border-color:var(--ember); color:var(--ember); }
.btn-ghost-solid{ background:var(--bg-3); }
.btn-link{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-display); font-weight:700;
  font-size:1rem; text-decoration:none; color:var(--text); transition:gap .15s, color .15s; }
.btn-link:hover{ gap:11px; color:var(--ember); }

/* ---------- C-SAFETY ---------- */
.safety{ display:flex; gap:9px; align-items:flex-start; font-family:var(--font-body);
  font-size:.86rem; line-height:1.45; color:var(--text-2); }
.safety strong{ color:var(--text); font-weight:600; }
.safety-ico{ color:var(--steel); flex:none; margin-top:2px; }
.safety a{ color:var(--text); text-decoration:underline; text-underline-offset:2px; font-weight:600; }
.safety-911{ color:var(--ember) !important; }
.safety-hero{ max-width:560px; }
.safety-hero strong{ color:#fff; }
.safety-hero{ color:rgba(255,255,255,.82); }
.safety-hero a{ color:#fff; }
.safety-menu{ margin-top:14px; }

/* ---------- HEADER ---------- */
.hdr{ position:sticky; top:0; z-index:100; transition:background .25s, border-color .25s, backdrop-filter .25s;
  background:transparent; border-bottom:1px solid transparent; }
.hdr-solid{ background:color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter:blur(12px) saturate(1.1);
  border-bottom:1px solid var(--line); }
.hdr-in{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:72px; }
.brand{ display:inline-flex; align-items:center; gap:11px; text-decoration:none; color:var(--text); }
.brand-word{ display:flex; flex-direction:column; line-height:1; }
.brand-line1{ font-family:var(--font-display); font-weight:800; font-size:1.04rem; letter-spacing:.02em; color:var(--text); }
.brand-line2{ font-family:var(--font-display); font-weight:600; font-size:.72rem; letter-spacing:.22em; color:var(--text-2); margin-top:3px; }
.hdr.over-dark:not(.hdr-solid) .brand-line1{ color:#fff; }
.hdr.over-dark:not(.hdr-solid) .brand-line2{ color:rgba(255,255,255,.7); }
.nav-desk{ display:flex; gap:30px; margin-left:auto; }
.nav-desk a{ font-family:var(--font-body); font-weight:600; font-size:.98rem; color:var(--text-2); text-decoration:none;
  padding:6px 2px; transition:color .15s; }
.nav-desk a:hover, .nav-desk a.active{ color:var(--text); }
.nav-desk a.active{ border-bottom:2px solid var(--ember); }
.hdr.over-dark:not(.hdr-solid) .nav-desk a{ color:rgba(255,255,255,.78); }
.hdr.over-dark:not(.hdr-solid) .nav-desk a:hover, .hdr.over-dark:not(.hdr-solid) .nav-desk a.active{ color:#fff; }
.hdr-right{ display:flex; align-items:center; gap:12px; }
.hamburger{ display:none; flex-direction:column; gap:5px; width:44px; height:44px; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--line-strong); border-radius:var(--r); cursor:pointer; }
.hamburger span{ width:20px; height:2px; background:var(--text); border-radius:2px; }
.hdr.over-dark:not(.hdr-solid) .hamburger span{ background:#fff; }
.hdr.over-dark:not(.hdr-solid) .hamburger{ border-color:rgba(255,255,255,.3); }
.mobile-menu{ background:var(--bg-2); border-bottom:1px solid var(--line); padding:14px clamp(20px,5vw,48px) 22px; }
.mobile-menu nav{ display:flex; flex-direction:column; }
.mobile-menu nav a{ font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:var(--text);
  text-decoration:none; padding:13px 0; border-bottom:1px solid var(--line); }
.mobile-menu-cta{ margin-top:16px; }

/* ---------- HOME HERO ---------- */
.hero{ position:relative; isolation:isolate; min-height:clamp(580px,88vh,860px); display:flex; flex-direction:column;
  justify-content:flex-end; overflow:hidden; background:#0c1115; }
.hero-bg{ position:absolute; inset:0; width:100%; height:100%; z-index:-3; }
.hero-scrim{ position:absolute; inset:0; z-index:-2;
  background:linear-gradient(180deg, rgba(10,14,18,.55) 0%, rgba(10,14,18,.35) 35%, rgba(9,12,16,.86) 100%),
             linear-gradient(75deg, rgba(9,12,16,.92) 0%, rgba(9,12,16,.5) 48%, rgba(9,12,16,.15) 100%); }
.hero-topo{ position:absolute; top:-8%; right:-12%; width:min(70vw,720px); height:auto; z-index:-1; pointer-events:none; }
.hero-in{ padding-block:clamp(40px,8vh,90px); }
.hero-content{ max-width:780px; }
.hero-eyebrow{ display:flex; align-items:center; gap:9px; color:#FFB571; }
.loc-dot{ width:8px; height:8px; border-radius:50%; background:var(--ember); box-shadow:0 0 0 4px rgba(242,132,43,.22); }
.hero-h1{ color:#fff; font-size:clamp(2.5rem,6.4vw,4.7rem); font-weight:900; line-height:1.0; letter-spacing:-.025em;
  margin-top:18px; text-wrap:balance; }
.hero-sub{ color:rgba(255,255,255,.86); font-size:clamp(1.08rem,1.55vw,1.32rem); line-height:1.55; max-width:640px; margin-top:22px; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
.hero .safety-hero{ margin-top:22px; }
.hero-triage{ position:relative; z-index:1; color:rgba(255,255,255,.6); font-size:.82rem; line-height:1.5;
  max-width:760px; padding-block:18px 26px; border-top:1px solid rgba(255,255,255,.1); margin-top:24px; }

/* ---------- PAGE HERO (subpages) ---------- */
.page-hero{ position:relative; isolation:isolate; overflow:hidden; background:#0c1115;
  padding-block:clamp(48px,11vh,104px) clamp(36px,6vh,60px); border-bottom:1px solid var(--line); }
.page-hero-in{ position:relative; z-index:1; max-width:880px; }
.page-eyebrow{ display:flex; align-items:center; gap:9px; color:#FFB571; }
.page-h1{ color:#fff; font-size:clamp(2.1rem,5vw,3.7rem); font-weight:900; letter-spacing:-.025em; line-height:1.03;
  margin-top:16px; text-wrap:balance; }
.page-sub{ color:rgba(255,255,255,.82); font-size:clamp(1.05rem,1.5vw,1.24rem); line-height:1.55; max-width:62ch; margin-top:18px; }
.page-hero-cta{ display:flex; flex-wrap:wrap; gap:14px 18px; margin-top:26px; align-items:center; }
.page-hero-cta .btn-link{ color:#fff; }
.page-hero .safety-hero{ margin-top:22px; }

/* ---------- shared section heads ---------- */
.alt{ background:var(--bg-2); }
.section{ padding-block:var(--section-y); }
.sec-head{ max-width:680px; margin-bottom:clamp(34px,5vw,52px); }
.sec-h{ font-size:clamp(1.7rem,3.6vw,2.65rem); font-weight:800; line-height:1.08; margin-top:14px; text-wrap:balance; }
.sec-sub{ color:var(--text-2); font-size:clamp(1.02rem,1.4vw,1.18rem); line-height:1.5; margin-top:16px; max-width:52ch; }

/* ---------- STAKES ---------- */
.stakes-in{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(30px,5vw,64px); align-items:start; }
.stakes-h{ font-size:clamp(1.7rem,3.4vw,2.5rem); font-weight:800; line-height:1.1; margin-top:14px; text-wrap:balance; }
.stakes-hook{ color:var(--text-2); font-size:1.08rem; margin-bottom:20px; }
.stakes-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
.stakes-list li{ display:flex; gap:14px; align-items:flex-start; font-size:1.06rem; line-height:1.5;
  padding-bottom:16px; border-bottom:1px solid var(--line); }
.stakes-list li:last-child{ border-bottom:none; }
.stake-mark{ flex:none; margin-top:3px; color:var(--ember); }

/* ---------- VALUE PROPS ---------- */
.vp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,22px); }
.vp-card{ background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(22px,2.5vw,30px);
  box-shadow:var(--card-shadow); }
[data-theme="light"] .vp-card{ background:var(--bg-2); }
.vp-ico{ display:inline-flex; padding:11px; border:1px solid var(--line-strong); border-radius:var(--r); color:var(--text); margin-bottom:18px; }
.vp-h{ font-size:1.28rem; font-weight:800; line-height:1.12; }
.vp-b{ color:var(--text-2); font-size:1.02rem; line-height:1.55; margin-top:10px; }

/* ---------- GUIDE ---------- */
.guide-in{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(32px,5vw,68px); align-items:center; }
.guide-lead{ color:var(--text-2); font-size:1.08rem; line-height:1.6; margin-top:18px; max-width:54ch; }
.auth-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; margin-top:30px; }
.auth-cell{ background:var(--bg); padding:20px 22px; }
[data-theme="light"] .auth-cell{ background:var(--bg-2); }
.auth-stat{ font-family:var(--font-display); font-weight:800; font-size:1.7rem; color:var(--text); line-height:1; }
.auth-label{ color:var(--text-2); font-size:.92rem; margin-top:7px; line-height:1.3; }
.guide-media{ position:relative; }
.founder-slot{ display:block; width:100%; aspect-ratio:4/5; border:1px solid var(--line); border-radius:var(--r-lg); }
.founder-cap{ display:flex; flex-direction:column; gap:2px; margin-top:14px; }
.founder-name{ font-family:var(--font-display); font-weight:800; font-size:1.12rem; }
.founder-role{ color:var(--text-2); font-size:.92rem; }

/* ---------- PLAN ---------- */
.plan-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,30px); }
.plan-step{ position:relative; padding-top:18px; border-top:2px solid var(--line-strong); }
.plan-n{ font-family:var(--font-display); font-weight:800; font-size:2.4rem; color:var(--steel); line-height:1; }
.plan-t{ font-size:1.24rem; font-weight:800; line-height:1.15; margin-top:12px; }
.plan-b{ color:var(--text-2); font-size:1.02rem; line-height:1.55; margin-top:10px; }
.plan-cta{ display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; margin-top:clamp(40px,6vw,64px); }
.wait-line{ color:var(--text-2); font-size:.98rem; font-style:italic; max-width:46ch; }

/* ---------- PROSE ---------- */
.prose-col{ max-width:var(--measure); margin:0 auto; }
.prose-p{ font-size:clamp(1.1rem,1.5vw,1.28rem); line-height:1.7; color:var(--text); margin-bottom:1.2em; }
.prose-p:first-child{ border-left:3px solid var(--ember); padding-left:20px; }

/* ---------- SAVE ---------- */
.save-card{ display:grid; grid-template-columns:1.3fr .7fr; gap:clamp(26px,4vw,52px); align-items:center;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(28px,4vw,48px); }
[data-theme="light"] .save-card{ background:var(--bg-2); }
.save-b{ color:var(--text-2); font-size:1.06rem; line-height:1.6; margin-top:14px; max-width:52ch; }
.save-actions{ display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.save-actions .btn-ghost{ width:100%; }
.save-vcard{ font-size:.95rem; color:var(--text-2); text-decoration:none; }
.save-vcard:hover{ color:var(--text); }
.save-confirm{ display:flex; gap:8px; align-items:center; color:var(--steel); font-size:.95rem; font-weight:600; }

/* ---------- FAQ ---------- */
.faq-in{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(28px,5vw,64px); align-items:start; }
.faq-list{ border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q-wrap{ margin:0; }
.faq-q{ width:100%; display:flex; gap:18px; align-items:center; justify-content:space-between; text-align:left;
  background:transparent; border:none; cursor:pointer; padding:22px 4px; font-family:var(--font-display);
  font-weight:700; font-size:clamp(1.05rem,1.5vw,1.22rem); color:var(--text); line-height:1.25; }
.faq-chev{ flex:none; color:var(--text-2); }
.faq-item.open .faq-chev{ color:var(--ember); }
.faq-a{ padding:0 4px 24px; max-width:62ch; }
.faq-a p{ color:var(--text-2); font-size:1.05rem; line-height:1.6; }

/* ---------- FOOTER ---------- */
.footer{ background:var(--bg-3); border-top:1px solid var(--line); padding-block:clamp(46px,6vw,72px) 30px; }
.footer-top{ display:grid; grid-template-columns:1.3fr .9fr; gap:clamp(30px,5vw,60px); align-items:start;
  padding-bottom:34px; border-bottom:1px solid var(--line); }
.brand-foot .brand-line1{ font-size:1.2rem; }
.footer-tag{ font-family:var(--font-display); font-weight:800; font-size:1.4rem; margin-top:20px; letter-spacing:-.02em; }
.footer-sub{ color:var(--ember); font-weight:600; margin-top:6px; font-size:1rem; }
.footer-cta{ display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.footer-cta .call-btn{ width:100%; }
.footer-area{ color:var(--text-2); font-size:.98rem; }
.footer-contact{ color:var(--text-2); font-size:.95rem; line-height:1.6; }
.footer-contact a{ color:var(--text); }
.footer-nav{ display:flex; flex-wrap:wrap; gap:18px; margin-top:18px; }
.footer-nav a{ color:var(--text-2); font-size:.95rem; text-decoration:none; font-weight:600; }
.footer-nav a:hover{ color:var(--text); }
.footer-safety{ padding-block:24px; }
.footer-bottom{ display:flex; flex-direction:column; gap:18px; padding-top:6px; }
.footer-disc{ color:var(--text-3); font-size:.82rem; line-height:1.55; max-width:90ch; }
.footer-meta{ display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; }
.footer-legal{ display:flex; gap:22px; }
.footer-legal a{ color:var(--text-2); font-size:.9rem; text-decoration:none; }
.footer-legal a:hover{ color:var(--text); }
.footer-copy{ color:var(--text-3); font-size:.85rem; }

/* ---------- STICKY MOBILE CALL BAR ---------- */
.sticky-bar{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:120; gap:10px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(12px); border-top:1px solid var(--line); }
.sticky-save{ flex:0 0 auto; min-height:54px; padding:15px 16px; }

/* ---------- TWEAK FAB (lets a shared/standalone viewer open the Tweaks panel) ---------- */
.tweak-fab{ position:fixed; left:18px; bottom:18px; z-index:90; display:inline-flex; align-items:center; gap:9px;
  background:color-mix(in srgb,var(--bg-2) 92%,transparent); color:var(--text); border:1px solid var(--line-strong);
  border-radius:999px; padding:11px 16px 11px 14px; font-family:var(--font-display); font-weight:700; font-size:.9rem;
  cursor:pointer; box-shadow:var(--shadow); backdrop-filter:blur(8px); transition:border-color .15s, color .15s; }
.tweak-fab:hover{ border-color:var(--ember); color:var(--ember); }
.tweak-fab .fab-dot{ width:9px; height:9px; border-radius:50%; background:var(--ember); flex:none; }
@media (max-width:860px){ .tweak-fab{ display:none; } }

/* ============================ RESPONSIVE ============================ */
@media (max-width:960px){
  .stakes-in{ grid-template-columns:1fr; gap:26px; }
  .guide-in{ grid-template-columns:1fr; gap:34px; }
  .guide-media{ max-width:420px; }
  .save-card{ grid-template-columns:1fr; }
  .faq-in{ grid-template-columns:1fr; gap:18px; }
  .vp-grid{ grid-template-columns:1fr; max-width:520px; }
  .plan-grid{ grid-template-columns:1fr; gap:8px; }
  .plan-step{ border-top:none; border-left:2px solid var(--line-strong); padding:4px 0 24px 22px; }
  .footer-top{ grid-template-columns:1fr; }
}
@media (max-width:860px){
  .nav-desk{ display:none; }
  .hamburger{ display:flex; }
  .hdr-call .call-txt{ display:none; }
  .hdr-call{ padding:10px 13px; }
  .sticky-bar{ display:flex; }
  body{ padding-bottom:80px; }
  .hero-cta{ flex-direction:column; align-items:stretch; }
  .hero-cta .call-btn, .hero-cta .btn-ghost{ width:100%; justify-content:center; }
  .page-hero-cta .call-btn, .page-hero-cta .btn-ghost{ width:100%; justify-content:center; }
}
@media (max-width:420px){ .brand-word{ display:none; } }
` }} />;
}

/* ============================ PAGE HERO ============================ */
function PageHero({ eyebrow, h1, sub, slotId, slotPlaceholder, showSave, secondary, children }) {
  return (
    <section className="page-hero">
      {slotId && <image-slot id={slotId} class="hero-bg" shape="rect" placeholder={slotPlaceholder || "Drop a field photo"}></image-slot>}
      <div className="hero-scrim" />
      <ContourField />
      <div className="wrap page-hero-in">
        {eyebrow && <p className="eyebrow page-eyebrow">{eyebrow}</p>}
        <h1 className="page-h1">{h1}</h1>
        {sub && <p className="page-sub">{sub}</p>}
        <div className="page-hero-cta">
          <CallButton size="xl" />
          {showSave && <SaveButton tone="ghost" />}
          {secondary && <a className="btn-link" href={secondary.href}>{secondary.label}<IconArrow size={16} /></a>}
        </div>
        {children}
        <SafetyLine variant="hero" />
      </div>
    </section>
  );
}

/* ============================ TWEAKS / THEME ============================ */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "flavor": "rightcall",
  "tone": "we",
  "theme": "dark",
  "accent": "#F2842B",
  "logo": "reticle"
}/*EDITMODE-END*/;

const FLAVOR_OPTS = window.PWC.order.map((id) => ({ value: id, label: window.PWC.FLAVORS[id].label }));

function shade(hex, pct) {
  const h = hex.replace("#", "");
  const n = parseInt(h.length === 3 ? h.split("").map((c) => c + c).join("") : h, 16);
  let r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255;
  r = Math.round(r + (255 - r) * pct / 100);
  g = Math.round(g + (255 - g) * pct / 100);
  b = Math.round(b + (255 - b) * pct / 100);
  return "#" + [r, g, b].map((x) => x.toString(16).padStart(2, "0")).join("");
}

function LogoPreview({ value, onPick }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 6 }}>
      {window.LOGOS.map((l) => {
        const active = l.id === value;
        return (
          <button key={l.id} type="button" onClick={() => onPick(l.id)} title={l.label}
            style={{ display: "grid", placeItems: "center", padding: "10px 0", cursor: "pointer",
              background: active ? "rgba(242,132,43,.14)" : "rgba(255,255,255,.03)",
              border: active ? "1.5px solid var(--ember)" : "1px solid var(--line-strong)",
              borderRadius: 8, color: "var(--text)" }}>
            <PWCMark size={30} variant={l.id} steel="var(--text)" />
          </button>
        );
      })}
    </div>
  );
}

/* ============================ SHELL ============================ */
function Shell({ active, overDark = false, children }) {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(() => { document.documentElement.setAttribute("data-theme", t.theme); }, [t.theme]);
  React.useEffect(() => {
    const r = document.documentElement.style;
    r.setProperty("--ember", t.accent);
    r.setProperty("--ember-bright", shade(t.accent, 14));
    r.setProperty("--ember-ink", "#1B1106");
  }, [t.accent]);

  return (
    <React.Fragment>
      <PWCStyles />
      <Header flavor={t.flavor} logo={t.logo} active={active} overDark={overDark} />
      <main id="main">{typeof children === "function" ? children(t) : children}</main>
      <Footer flavor={t.flavor} logo={t.logo} />
      <StickyCallBar />
      <button className="tweak-fab" onClick={() => window.postMessage({ type: "__activate_edit_mode" }, "*")} aria-label="Tweak this page — change voice, logo, and theme">
        <span className="fab-dot" />Tweak this page
      </button>

      <TweaksPanel>
        <TweakSection label="Voice — site flavor" />
        <TweakSelect label="Framing" value={t.flavor} options={FLAVOR_OPTS} onChange={(v) => setTweak("flavor", v)} />
        <TweakRadio label="Tone" value={t.tone}
          options={[{ value: "we", label: "We" }, { value: "i", label: "I (Michael)" }]}
          onChange={(v) => setTweak("tone", v)} />
        <TweakSection label="Brand" />
        <TweakSelect label="Logomark" value={t.logo}
          options={window.LOGOS.map((l) => ({ value: l.id, label: l.label }))}
          onChange={(v) => setTweak("logo", v)} />
        <div style={{ padding: "4px 0 10px" }}><LogoPreview value={t.logo} onPick={(v) => setTweak("logo", v)} /></div>
        <TweakSection label="Theme" />
        <TweakRadio label="Surface" value={t.theme}
          options={[{ value: "dark", label: "Steel" }, { value: "light", label: "Daylight" }]}
          onChange={(v) => setTweak("theme", v)} />
        <TweakColor label="Act-color (call)" value={t.accent}
          options={["#F2842B", "#E8A13A", "#EC5E3A", "#F2C14E"]}
          onChange={(v) => setTweak("accent", v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

Object.assign(window, { PWCStyles, PageHero, Shell, TWEAK_DEFAULTS, FLAVOR_OPTS, shade, LogoPreview });