.blind-form-root{--bg:#050505;--fg:#f5f5f5;min-height:76svh;background:var(--bg);color:var(--fg);display:flex;align-items:center;justify-content:center;text-align:center;font-family:Arial,Helvetica,sans-serif;padding:34px 14px;box-sizing:border-box;width:100%;overflow:hidden}
.blind-form-root *{box-sizing:border-box}.bf-screen{width:min(720px,100%)}.bf-start{min-height:54svh;display:flex;flex-direction:column;align-items:center;justify-content:center}.bf-mantra{font-size:clamp(20px,5vw,34px);letter-spacing:.18em;margin:0}.bf-kicker{font-size:11px;letter-spacing:.24em;opacity:.52;margin-bottom:28px}.blind-form-root h2{font-size:clamp(38px,9vw,80px);line-height:.94;letter-spacing:-.045em;margin:0 0 22px}.bf-small{font-size:11px;letter-spacing:.14em;opacity:.55}.bf-button{margin-top:30px;border:1px solid #eee;background:transparent;color:#fff;padding:15px 28px;letter-spacing:.18em;cursor:pointer;touch-action:manipulation}.bf-choices{display:flex;gap:62px;justify-content:center;margin-top:58px}.bf-shape{width:96px;height:96px;background:transparent;border:2px solid #fff;cursor:pointer}.bf-shape.angular{transform:rotate(45deg)}.bf-shape.round{border-radius:50%}.bf-track{height:2px;background:#3b3b3b;position:relative;margin:92px 5% 32px}.bf-track span{position:absolute;width:17px;height:17px;border-radius:50%;background:#fff;top:50%;left:0;transform:translate(-50%,-50%)}.bf-points{display:flex;justify-content:space-around;margin:90px auto;max-width:500px}.bf-points button{width:22px;height:22px;border:0;border-radius:50%;background:#fff;cursor:pointer}.bf-follow{height:260px;max-width:560px;margin:35px auto;position:relative;border:1px solid #222}.bf-follow button{position:absolute;width:34px;height:34px;border:0;border-radius:50%;background:#fff;cursor:pointer}.bf-hold{width:120px;height:120px;border-radius:50%;border:2px solid #fff;background:transparent;margin-top:55px;transition:.15s;touch-action:none}.bf-hold.holding{background:#fff;transform:scale(.82)}.bf-grid{display:grid;grid-template-columns:repeat(3,58px);gap:22px;justify-content:center;margin:65px auto}.bf-cell{width:58px;height:58px;border:1px solid #fff;background:transparent}.bf-cell.odd{border-radius:50%;transform:rotate(8deg)}.bf-camera{width:min(520px,92vw);aspect-ratio:3/4;margin:20px auto 0;overflow:hidden;background:#111}.bf-camera video{width:100%;height:100%;object-fit:cover;display:block;transform:scaleX(-1);filter:grayscale(1) contrast(1.35) invert(1) brightness(.862745)}.bf-result-canvas{width:min(520px,92vw);height:auto;aspect-ratio:3/4;object-fit:contain;display:block;margin:0 auto;background:#050505}.bf-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.bf-actions .bf-button{margin-top:20px}.bf-processing{min-height:54svh;display:flex;align-items:center;justify-content:center;letter-spacing:.22em;font-size:12px}.bf-flash{position:fixed;inset:0;background:white;z-index:999999;pointer-events:none;animation:flash .22s forwards}@keyframes flash{to{opacity:0}}
@media(max-width:600px){.blind-form-root{min-height:78svh;padding:22px 10px}.bf-choices{gap:42px}.bf-shape{width:76px;height:76px}.bf-follow{height:230px}.bf-grid{grid-template-columns:repeat(3,52px);gap:18px}.bf-cell{width:52px;height:52px}.bf-button{padding:14px 20px;font-size:12px}}

/* v1.7.7 — third FIRST IMPULSE choice */
.bf-shape.triangle{
  width:0;height:0;border-left:48px solid transparent;border-right:48px solid transparent;
  border-bottom:92px solid #fff;border-top:0;background:transparent;
}
@media(max-width:600px){
  .bf-shape.triangle{width:0;height:0;border-left-width:38px;border-right-width:38px;border-bottom-width:74px}
  .bf-choices{gap:34px}
}


/* v1.7.9 — BLIND mobile fit + seamless black page */

/* Force the page/background around the app to black as well. */
html, body,
#blind-form,
#blind-form-root,
.elementor,
.elementor-page,
.elementor-section-wrap,
.elementor-widget-wrap,
.elementor-widget-container {
  background:#000 !important;
}

/* Third impulse shape: outline only, matching the other two. */
.bf-shape.triangle{
  width:92px !important;
  height:82px !important;
  background:transparent !important;
  border:0 !important;
  position:relative;
  box-sizing:border-box;
}
.bf-shape.triangle::before,
.bf-shape.triangle::after{
  content:"";
  position:absolute;
  left:50%;
  top:7px;
  width:3px;
  height:78px;
  background:#fff;
  transform-origin:50% 100%;
}
.bf-shape.triangle::before{transform:translateX(-50%) rotate(30deg);}
.bf-shape.triangle::after{transform:translateX(-50%) rotate(-30deg);}
.bf-shape.triangle{
  border-bottom:3px solid #fff !important;
}

/* Phone: keep camera/result + controls in the first viewport. */
@media (max-width:600px){
  html,body{background:#000 !important;}

  #blind-form,
  #blind-form-root{
    min-height:100dvh;
    background:#000 !important;
  }

  /* 9:16 remains unchanged; only its displayed size is reduced. */
  .bf-camera,
  .bf-result,
  .bf-photo,
  .bf-preview,
  #blind-form video,
  #blind-form canvas,
  #blind-form-root video,
  #blind-form-root canvas{
    max-height:68dvh !important;
    max-width:min(86vw, 383px) !important;
    width:auto !important;
    height:auto !important;
    object-fit:cover;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  /* Keep action controls visible and compact. */
  .bf-actions,
  .bf-buttons{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    justify-content:center !important;
    align-items:center !important;
    gap:7px !important;
    width:100% !important;
    margin-top:10px !important;
  }

  .bf-actions button,
  .bf-buttons button{
    width:auto !important;
    min-width:0 !important;
    flex:1 1 0 !important;
    padding:11px 8px !important;
    font-size:12px !important;
    white-space:nowrap !important;
  }

  .bf-shape.triangle{
    width:76px !important;
    height:68px !important;
    border-bottom-width:3px !important;
  }
  .bf-shape.triangle::before,
  .bf-shape.triangle::after{
    height:65px;
  }
}


/* v1.7.10 — precise triangle + uncropped mobile camera */

/* Proper outlined equilateral triangle. */
.bf-shape.triangle{
  width:96px !important;
  height:84px !important;
  border:0 !important;
  background:transparent !important;
  position:relative !important;
  overflow:visible !important;
}
.bf-shape.triangle::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  width:96px !important;
  height:84px !important;
  background:#fff !important;
  clip-path:polygon(50% 0,100% 100%,0 100%) !important;
  transform:none !important;
}
.bf-shape.triangle::after{
  content:"" !important;
  position:absolute !important;
  left:5px !important;
  top:7px !important;
  width:86px !important;
  height:72px !important;
  background:#000 !important;
  clip-path:polygon(50% 0,100% 100%,0 100%) !important;
  transform:none !important;
}

/* On phones the live preview must show the complete 9:16 frame, not crop it. */
@media (max-width:600px){
  .bf-shape.triangle{
    width:78px !important;
    height:68px !important;
  }
  .bf-shape.triangle::before{
    width:78px !important;
    height:68px !important;
  }
  .bf-shape.triangle::after{
    left:4px !important;
    top:6px !important;
    width:70px !important;
    height:58px !important;
  }

  #blind-form video,
  #blind-form-root video,
  .bf-camera video,
  .bf-preview video{
    width:auto !important;
    height:auto !important;
    max-width:min(86vw,383px) !important;
    max-height:68dvh !important;
    aspect-ratio:3/4 !important;
    object-fit:contain !important;
    background:#111 !important;
  }
}


/* v1.7.11 — live camera is the exact same visible 9:16 frame as final result */
@media (max-width:600px){
  #blind-form video,
  #blind-form-root video,
  .bf-camera video,
  .bf-preview video{
    display:block !important;
    width:auto !important;
    height:68dvh !important;
    max-height:68dvh !important;
    max-width:86vw !important;
    aspect-ratio:3/4 !important;
    object-fit:cover !important;
    object-position:center center !important;
    margin-left:auto !important;
    margin-right:auto !important;
    background:#000 !important;
  }
}


/* v1.7.12 — desktop fit only. Mobile v1.7.11 remains untouched. */
@media (min-width:601px){
  /* Keep both live camera and final result comfortably inside desktop viewport. */
  .bf-camera,
  .bf-result,
  .bf-photo,
  .bf-preview,
  #blind-form video,
  #blind-form canvas,
  #blind-form-root video,
  #blind-form-root canvas{
    display:block !important;
    width:auto !important;
    height:auto !important;
    max-height:68vh !important;
    max-width:38vw !important;
    aspect-ratio:3/4 !important;
    object-fit:cover !important;
    object-position:center center !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  /* Final controls: one horizontal row on desktop too. */
  .bf-actions,
  .bf-buttons{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    justify-content:center !important;
    align-items:center !important;
    gap:12px !important;
    width:min(520px,90vw) !important;
    margin:14px auto 0 !important;
  }

  .bf-actions button,
  .bf-buttons button{
    width:auto !important;
    min-width:0 !important;
    flex:1 1 0 !important;
    padding:12px 16px !important;
    font-size:13px !important;
    white-space:nowrap !important;
  }
}


/* v1.7.13 — triangle outline weight matched to the other impulse shapes */
.bf-shape.triangle::after{
  left:3px !important;
  top:4px !important;
  width:90px !important;
  height:77px !important;
}
@media(max-width:600px){
  .bf-shape.triangle::after{
    left:3px !important;
    top:4px !important;
    width:72px !important;
    height:62px !important;
  }
}


/* v1.7.14 — triangle optical size matched to circle/square */
.bf-shape.triangle{
  transform:scale(1.16) !important;
}


/* v1.7.15 — optical balance of FIRST IMPULSE shapes */
.bf-shape.angular{
  transform:rotate(45deg) scale(.93) !important;
}

/* v1.7.26 — 3:4 camera/card framing + softer negative whites */
.bf-camera,
.bf-result-canvas { aspect-ratio:3 / 4 !important; }
.bf-camera video {
  aspect-ratio:3 / 4 !important;
  object-fit:cover !important;
  filter:grayscale(1) contrast(1.35) invert(1) brightness(.862745) !important;
}
@media (max-width:600px){
  #blind-form video,#blind-form-root video,.bf-camera video,.bf-preview video,
  #blind-form canvas,#blind-form-root canvas{
    aspect-ratio:3 / 4 !important;
  }
}
@media (min-width:601px){
  .bf-camera,.bf-result,.bf-photo,.bf-preview,
  #blind-form video,#blind-form canvas,#blind-form-root video,#blind-form-root canvas{
    aspect-ratio:3 / 4 !important;
  }
}


/* v1.7.28 — camera optional: photo or generated signal, all visible on one phone screen */
.bf-image-choice{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:54svh;
  gap:0;
}
.bf-image-note{
  margin:0 0 10px;
  font-size:10px;
  line-height:1.35;
  letter-spacing:.17em;
  opacity:.62;
  text-transform:uppercase;
}
.bf-image-choice h2{margin:0 0 24px!important;}
.bf-image-section{display:flex;flex-direction:column;align-items:center;width:100%;}
.bf-choice-title,
.bf-or{
  font-size:10px;
  letter-spacing:.20em;
  opacity:.58;
  text-transform:uppercase;
}
.bf-camera-button{margin-top:10px!important;min-width:190px;}
.bf-or{margin:22px 0 12px;}
.bf-signal-row{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;width:min(430px,100%);}
.bf-signal{
  min-height:48px;
  border:1px solid #eee;
  background:transparent;
  color:#fff;
  font:inherit;
  font-size:11px;
  letter-spacing:.16em;
  cursor:pointer;
  touch-action:manipulation;
}
.bf-signal:active,.bf-signal:focus-visible,.bf-camera-button:focus-visible{background:#fff;color:#000;outline:none;}

@media(max-width:600px){
  .blind-form-root{min-height:100dvh!important;padding:10px 12px!important;}
  .bf-image-choice{min-height:calc(100dvh - 20px);justify-content:center;}
  .bf-image-note{font-size:9px;max-width:310px;margin-bottom:8px;}
  .bf-image-choice h2{font-size:clamp(38px,13vw,58px)!important;margin-bottom:18px!important;}
  .bf-camera-button{margin-top:8px!important;min-width:170px!important;padding:12px 18px!important;}
  .bf-or{margin:18px 0 10px;}
  .bf-signal-row{gap:7px;width:min(360px,94vw);}
  .bf-signal{min-height:44px;font-size:10px;padding:0 6px;}
}


/* v1.7.31 — prevent accidental carry-over taps on the image-choice screen */
.bf-camera-button:disabled,
.bf-signal:disabled{
  pointer-events:none!important;
  cursor:default!important;
  opacity:1!important;
}