:root{
    --ink:#0B0A08;
    --coal:#14110C;
    --amber:#F5A623;
    --ember:#E8590C;
    --gold:#FFD37A;
    --bone:#F2EBDD;
    --mute:#8A8070;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{height:100%;overflow:hidden;background:var(--ink);color:var(--bone);
    font-family:"Segoe UI",system-ui,-apple-system,sans-serif}
  #stage{position:fixed;inset:0;cursor:grab}
  #stage:active{cursor:grabbing}

  /* ---------- frame ---------- */
  .hud{position:fixed;inset:0;pointer-events:none;display:flex;flex-direction:column;
    justify-content:space-between;padding:clamp(20px,4vw,48px)}
  .hud>*{pointer-events:auto}

  header{display:flex;justify-content:space-between;align-items:flex-start}
  .brand{display:flex;align-items:center;gap:14px}
  .brand-mark{width:44px;height:44px;border:1.5px solid var(--amber);transform:rotate(45deg);
    display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .brand-mark span{transform:rotate(-45deg);color:var(--amber);font-weight:800;font-size:18px;letter-spacing:1px}
  .brand h1{font-size:clamp(18px,2.4vw,26px);font-weight:800;letter-spacing:.22em;text-transform:uppercase}
  .brand h1 em{font-style:normal;color:var(--amber)}
  .brand p{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--mute);margin-top:3px}

  .round-tag{border:1px solid rgba(245,166,35,.45);color:var(--gold);font-size:11px;
    letter-spacing:.28em;text-transform:uppercase;padding:9px 16px;background:rgba(20,17,12,.6);
    backdrop-filter:blur(6px)}

  /* ---------- product panel ---------- */
  .panel{position:fixed;right:clamp(20px,4vw,48px);top:50%;transform:translateY(-50%);
    width:min(300px,80vw);display:flex;flex-direction:column;gap:0;pointer-events:auto}
  .panel h2{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--mute);
    padding-bottom:14px;border-bottom:1px solid rgba(242,235,221,.14);margin-bottom:6px}
  .stat{padding:16px 0;border-bottom:1px solid rgba(242,235,221,.09)}
  .stat b{display:block;font-size:clamp(26px,3vw,34px);font-weight:800;color:var(--bone);
    font-variant-numeric:tabular-nums;line-height:1}
  .stat b i{font-style:normal;color:var(--amber);font-size:.6em;vertical-align:super}
  .stat span{display:block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);margin-top:7px}

  /* ---------- feature dots ---------- */
  .features{position:fixed;left:clamp(20px,4vw,48px);top:50%;transform:translateY(-50%);
    display:flex;flex-direction:column;gap:22px;max-width:250px}
  .feat{display:flex;gap:14px;align-items:flex-start;opacity:.45;transition:opacity .4s;cursor:pointer}
  .feat.on,.feat:hover{opacity:1}
  .feat .dot{width:8px;height:8px;background:var(--amber);transform:rotate(45deg);margin-top:5px;flex-shrink:0;
    box-shadow:0 0 12px rgba(245,166,35,.7)}
  .feat h3{font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
  .feat p{font-size:12px;color:var(--mute);line-height:1.55;margin-top:4px}

  footer{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
  .hint{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute)}
  .hint b{color:var(--amber);font-weight:700}
  .cta{background:linear-gradient(120deg,var(--amber),var(--ember));color:#1a1206;border:none;
    font-weight:800;font-size:13px;letter-spacing:.2em;text-transform:uppercase;padding:15px 28px;
    cursor:pointer;transition:transform .2s, box-shadow .2s;box-shadow:0 0 0 rgba(245,166,35,0)}
  .cta:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(245,166,35,.35)}
  .cta:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

  /* intro sweep */
  #veil{position:fixed;inset:0;background:var(--ink);z-index:10;display:flex;align-items:center;
    justify-content:center;transition:opacity 1s ease .3s;flex-direction:column;gap:16px}
  #veil.gone{opacity:0;pointer-events:none}
  #veil .brand-mark{width:64px;height:64px;animation:pulse 1.4s ease infinite}
  #veil .brand-mark span{font-size:26px}
  #veil p{letter-spacing:.4em;text-transform:uppercase;font-size:11px;color:var(--mute)}
  @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(245,166,35,.4)}50%{box-shadow:0 0 0 16px rgba(245,166,35,0)}}

  @media (max-width:900px){
    .features{display:none}
    .panel{position:fixed;right:0;left:0;top:auto;bottom:86px;transform:none;width:auto;
      flex-direction:row;padding:0 20px;gap:10px}
    .panel h2{display:none}
    .stat{flex:1;border-bottom:none;padding:8px 0}
    .stat b{font-size:20px}
    .stat span{font-size:9px;letter-spacing:.14em}
    .stat:nth-child(n+4){display:none}
  }
  @media (prefers-reduced-motion:reduce){
    #veil .brand-mark{animation:none}
  }

/* ==========================================================================
   House chrome — appended to every experience stylesheet by harden.py.
   Self-contained (no custom properties from the landing page).
   ========================================================================== */
.house-back{
  position:fixed;left:16px;bottom:16px;z-index:70;
  display:inline-flex;align-items:center;gap:10px;
  padding:11px 17px;border:1px solid rgba(184,146,58,.45);
  background:rgba(6,15,31,.80);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:#F5F1E6;text-decoration:none;
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI",system-ui,sans-serif;
  font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;
  transition:background .3s,border-color .3s;
}
.house-back:hover{background:rgba(184,146,58,.18);border-color:#B8923A}
.house-back:focus-visible{outline:2px solid #D9B562;outline-offset:3px}
@media (pointer:coarse){.house-back{bottom:auto;top:10px;left:10px;padding:9px 13px}}

.house-toast{
  position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(14px);
  z-index:80;opacity:0;pointer-events:none;max-width:min(440px,88vw);
  padding:15px 24px;background:#F5F1E6;color:#0B1A33;
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI",system-ui,sans-serif;
  font-size:13px;line-height:1.65;text-align:center;
  box-shadow:0 18px 50px rgba(0,0,0,.45);
  transition:opacity .4s,transform .4s;
}
.house-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

.house-missing{
  position:fixed;inset:0;z-index:95;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;padding:8vw;text-align:center;
  background:#060F1F;color:#F5F1E6;
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI",system-ui,sans-serif;
}
.house-missing h2{font-family:Georgia,serif;font-size:clamp(20px,3vw,30px);font-weight:500}
.house-missing p{max-width:56ch;font-size:13.5px;line-height:1.8;color:rgba(245,241,230,.6)}
.house-missing code{font-family:ui-monospace,Menlo,Consolas,monospace;color:#D9B562;font-size:12.5px}
.house-missing a{color:#D9B562;font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  border:1px solid rgba(184,146,58,.5);padding:13px 22px;text-decoration:none;margin-top:8px}