/* Self contained on purpose. The site stylesheet sets color:#1a1a1a!important on
   body, which would make every heading here invisible on the dark background,
   and its 88px body padding is for the main site chrome. We only ever wanted
   its fonts, so those are declared directly. */
@font-face{font-family:"Raleway";src:url("/media/fonts/Raleway-Regular.ttf");font-display:swap}
@font-face{font-family:"Poppins Light";src:url("/media/fonts/Poppins-Light.ttf");font-display:swap}
@font-face{font-family:"Poppins Semibold";src:url("/media/fonts/Poppins-SemiBold.ttf");font-display:swap}
@font-face{font-family:"Baskerville";src:url("fonts/Baskerville.ttc");font-display:swap}

/* Floor preview tool. Dark, out of the way, brand orange for the one action
   that matters. Deliberately not the main site chrome - this is a focused tool. */

html{height:100%}
body.fgt{background:#141317;color:#f2f2f2;--fg-ink:#f2f2f2;font-family:"Raleway",Helvetica,sans-serif;
  margin:0;padding:0;line-height:1.5;min-height:100dvh;
  display:flex;flex-direction:column;-webkit-text-size-adjust:100%}
@supports not (min-height:100dvh){body.fgt{min-height:100vh}}

/* The landing page is a page: it scrolls. The capture and placement steps are
   an app: they are pinned to the viewport so nothing important sits below the
   fold and the browser chrome is accounted for. dvh tracks that chrome as it
   collapses; vh does not. */
body.fgt.is-app{height:100dvh;overflow:hidden}
@supports not (height:100dvh){body.fgt.is-app{height:100vh}}
body.fgt.is-app .fgt_wrap{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
body.fgt.is-app .fgt_step{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.fgt *{box-sizing:border-box}
/* an author display: value beats the hidden attribute, and .fgt_busy /
   .fgt_step both set one - without this the overlay shows on page load */
.fgt [hidden],.fgt[hidden]{display:none!important}

.fgt_top{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:.55rem 1rem;padding-top:calc(.55rem + env(safe-area-inset-top,0px));
  background:#1a1a1a;border-bottom:1px solid #2a2a2a}
.fgt_logo img{height:24px;width:auto;display:block}
.fgt_toplink{color:#cfcfcf!important;font-size:.9rem;text-decoration:none}
.fgt_toplink:hover{color:#fff!important}

.fgt_wrap{max-width:960px;width:100%;margin:0 auto;padding:0 1rem;flex:1 1 auto}
.fgt_step{gap:.5rem;padding-top:.9rem;padding-bottom:calc(.9rem + env(safe-area-inset-bottom,0px))}
.fgt_step > h1,.fgt_step > h2,.fgt_step > .fgt_lead{flex:0 0 auto}
.fgt_controls{flex:0 0 auto;margin-top:auto}
.fgt h1,.fgt h2,.fgt p,.fgt label,.fgt span{color:inherit}
.fgt h1{font-family:"Poppins Semibold",Helvetica,sans-serif;
  font-size:clamp(1.45rem,1.05rem+1.8vw,2.4rem);line-height:1.15;margin:.1rem 0 .4rem}
.fgt h1 em{color:#f97316;font-style:normal}
.fgt h2{font-family:"Poppins Semibold",Helvetica,sans-serif;
  font-size:clamp(1.15rem,.95rem+1vw,1.7rem);margin:.1rem 0 .3rem}
.fgt_lead{font-family:"Poppins Light",Helvetica,sans-serif;
  font-size:clamp(.9rem,.86rem+.2vw,1.05rem);color:#d8d8d8;max-width:60ch;margin:0 0 .3rem}
.fgt_hint{font-size:.78rem;color:#9a9a9a;margin:.45rem 0 0;max-width:62ch}
.fgt_fine{font-size:.78rem;color:#8a8a8a;margin:.6rem 0 1rem}
.fgt_fine a,.fgt_foot a{color:#9fd0e8}
.fgt_err{color:#ff8a7a;font-size:.9rem;margin-top:.7rem}

/* picker */
.fgt_picker{display:flex;flex-wrap:wrap;gap:.55rem;margin:.5rem 0 .55rem}
.fgt_card{background:#1e1d22;border:2px solid #2b2a30;border-radius:.7rem;
  padding:.5rem;width:170px;cursor:pointer;color:#eee;text-align:left;transition:border-color .15s}
.fgt_card:hover{border-color:#5a5a63}
.fgt_card.is-on{border-color:#f97316}
.fgt_card img{width:100%;height:72px;object-fit:cover;border-radius:.4rem;display:block}
.fgt_card_name{display:block;font-size:.9rem;margin-top:.45rem}
.fgt_card_size{display:block;font-size:.76rem;color:#9a9a9a}

/* buttons */
.fgt_btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:"Poppins Semibold",Helvetica,sans-serif;font-size:1rem;letter-spacing:.02em;
  padding:.85rem 1.6rem;border-radius:.45rem;border:0;cursor:pointer;text-decoration:none!important;
  min-height:48px}
.fgt_btn_primary{background:#f97316;color:#fff!important}
.fgt_btn_primary:hover{background:#ea580c;color:#fff!important}
.fgt_btn_ghost{background:transparent;color:#eee!important;border:1px solid #4a4a52}
.fgt_btn_ghost:hover{background:#22212a;color:#fff!important}
.fgt_btn_wide{width:100%;margin-top:.4rem}
.fgt_btn:disabled{opacity:.5;cursor:default}
.fgt_btn_link{background:none;border:0;color:#9fd0e8;font-size:.86rem;cursor:pointer;padding:.3rem}

/* stage */
.fgt_stage{position:relative;width:100%;background:#0d0d10;border-radius:.6rem;
  overflow:hidden;touch-action:none;user-select:none;
  flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center}
#fgt_viewport{flex:1 1 auto;min-height:0;display:flex;margin-bottom:.2rem}
#fgt_photo,#fgt_video{display:block;max-width:100%;max-height:100%;width:auto;height:auto;
  margin:0 auto}
#fgt_video{background:#000;object-fit:cover}
.fgt_btn.is-off{opacity:.55}
.fgt_lh{flex:1 1 auto;min-width:92px;background:#1e1d22;border:2px solid #2b2a30;border-radius:.5rem;
  padding:.5rem .6rem;color:#d8d8d8;cursor:pointer;font-size:.84rem;line-height:1.2;text-align:center;min-height:46px}
.fgt_lh em{display:block;font-style:normal;color:#8f8f97;font-size:.74rem}
.fgt_lh.is-on{border-color:#f97316;color:#fff}
.fgt_lh.is-on em{color:#f97316}
#fgt_graphic{position:absolute;left:0;top:0;pointer-events:none;transform-origin:0 0;
  will-change:transform;visibility:hidden}
#fgt_grid{position:absolute;left:0;top:0;pointer-events:none}
/* controls */
.fgt_controls{margin-top:1.1rem}
.fgt_auto{font-size:.86rem;color:#7fe3a8;background:rgba(0,200,120,.08);
  border-left:3px solid #34c77b;padding:.55rem .7rem;border-radius:.3rem;margin:.2rem 0 .9rem}
.fgt_posline{font-size:.95rem;color:#c7c7c7;margin:.2rem 0 .8rem}
.fgt_stage.is-dragging{cursor:grabbing}
#step-place .fgt_stage{cursor:grab}
.fgt_ctrl_row{display:grid;grid-template-columns:1fr;gap:.1rem;margin-bottom:.45rem}
.fgt_ctrl_row label{font-size:.86rem;color:#c7c7c7;display:flex;justify-content:space-between}
.fgt_val{color:#f97316;font-family:"Poppins Semibold",Helvetica,sans-serif}
.fgt_ctrl_row input[type=range]{width:100%;accent-color:#f97316;height:28px}
.fgt_ctrl_toggles{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;
  font-size:.8rem;color:#c7c7c7;margin:.3rem 0 .15rem}

/* camera height presets - the second half of "where was the camera" */
.fgt_hgroup{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.35rem}
.fgt_hbtn{flex:1 1 auto;min-width:110px;background:#1e1d22;border:2px solid #2b2a30;
  border-radius:.5rem;padding:.55rem .7rem;color:#d8d8d8;cursor:pointer;font-size:.86rem;
  line-height:1.25;text-align:center;min-height:48px}
.fgt_hbtn em{display:block;font-style:normal;color:#8f8f97;font-size:.76rem}
.fgt_hbtn:hover{border-color:#5a5a63}
.fgt_hbtn.is-on{border-color:#f97316;color:#fff}
.fgt_hbtn.is-on em{color:#f97316}

/* the stage is shared by the align and place steps */
#fgt_viewport{margin-bottom:.2rem}

/* forms */
.fgt_field{display:block;margin-bottom:1rem}
.fgt_field span{display:block;font-size:.88rem;color:#c7c7c7;margin-bottom:.3rem}
.fgt_field input,.fgt_field select{width:100%;padding:.8rem .9rem;font-size:1rem;
  background:#1e1d22;color:#f2f2f2;border:1px solid #3a3941;border-radius:.4rem}
.fgt_field input:focus,.fgt_field select:focus{outline:0;border-color:#f97316;
  box-shadow:0 0 0 3px rgba(249,115,22,.25)}
.fgt_check{display:flex;gap:.6rem;align-items:flex-start;font-size:.86rem;color:#c7c7c7;margin:.2rem 0 .6rem}
.fgt_check input{margin-top:.25rem;width:18px;height:18px;accent-color:#f97316}

/* result */
.fgt_result img{width:100%;height:auto;border-radius:.6rem;display:block}
.fgt_actions{display:flex;gap:.7rem;flex-wrap:wrap;margin:1.1rem 0 .4rem}

/* busy */
.fgt_busy{position:fixed;inset:0;background:rgba(10,10,12,.86);display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:1rem;z-index:50}
.fgt_spinner{width:44px;height:44px;border:4px solid rgba(255,255,255,.2);
  border-top-color:#f97316;border-radius:50%;animation:fgspin .9s linear infinite}
@keyframes fgspin{to{transform:rotate(360deg)}}

.fgt_foot{flex:0 0 auto;border-top:1px solid #2a2a2a;padding:.4rem 1rem;text-align:center;
  font-size:.7rem;color:#7a7a7a;padding-bottom:calc(.4rem + env(safe-area-inset-bottom,0px))}
.fgt_foot a{color:#7a7a7a}
/* the gate and result steps may legitimately need to scroll */
body.fgt.is-app #step-gate,body.fgt.is-app #step-done{overflow-y:auto}

@media (max-width:600px){
  .fgt_wrap{padding:0 .8rem}
  .fgt_card{width:calc(50% - .4rem)}
  .fgt_actions .fgt_btn{width:100%}
}
@media (prefers-reduced-motion:reduce){.fgt_spinner{animation-duration:3s}}


/* ---------- live capture coach ---------- */
.fgt_coach{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:space-between;pointer-events:none;z-index:3;
  padding:.7rem 0 1rem}
.fgt_coach_top{display:flex;flex-direction:column;align-items:center;gap:.15rem}
/* the shutter lives over the picture so the picture can have the screen */
.fgt_coach .fgt_shutter{pointer-events:auto}
.fgt_arrow{width:64px;height:40px;color:#fff;filter:drop-shadow(0 2px 8px rgba(0,0,0,.8));
  transition:color .18s ease,transform .18s ease}
.fgt_arrow.is-close{color:#ffd479}
.fgt_arrow.is-down{transform:rotate(180deg)}
@keyframes fgnudge{0%,100%{opacity:.55}50%{opacity:1}}
.fgt_arrow{animation:fgnudge 1.1s ease-in-out infinite}
.fgt_thumb{width:56px;height:56px;color:#7CFFA8;filter:drop-shadow(0 2px 8px rgba(0,0,0,.8))}
@keyframes fgpop{0%{transform:scale(.7);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
.fgt_thumb:not([hidden]){animation:fgpop .28s ease-out}
.fgt_angle_sub{font-size:.78rem;color:#fff;opacity:.85;text-shadow:0 1px 6px rgba(0,0,0,.8)}
.fgt_target{position:absolute;inset:0;pointer-events:none;z-index:2}
.fgt_shutter{width:62px;height:62px;border-radius:50%;border:4px solid rgba(255,255,255,.92);
  background:#f97316;margin:0 auto;display:block;cursor:pointer;padding:0;
  box-shadow:0 3px 14px rgba(0,0,0,.55);animation:fgpop .25s ease-out}
.fgt_shutter:active{transform:scale(.94)}
.fgt_livebar{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:.35rem}

/* the intro diagram */
.fgt_howto{display:flex;gap:.7rem;align-items:center;background:#1c1b20;border:1px solid #2b2a30;
  border-radius:.6rem;padding:.55rem .65rem;margin:.2rem 0 .45rem}
.fgt_howto svg{flex:0 0 auto}
.fgt_howto p{margin:0;font-size:.86rem;color:#d0d0d0}
.fgt_howto b{color:#7CFFA8}


/* ---------- landing page (scrolls) ---------- */
body.fgt:not(.is-app) .fgt_wrap{padding-bottom:2rem}
body.fgt:not(.is-app) .fgt h1{font-size:clamp(1.8rem,1.2rem+2.4vw,3rem);margin:.6rem 0 .8rem}
body.fgt:not(.is-app) .fgt_lead{font-size:clamp(1rem,.94rem+.3vw,1.2rem)}
body.fgt:not(.is-app) .fgt_picker{margin:1.4rem 0 1.4rem}
body.fgt:not(.is-app) .fgt_card img{height:104px}

/* ---------- how-to page (full screen, one job) ---------- */
#step-howto{align-items:center;text-align:center;justify-content:center}
.fgt_howto_art{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;width:100%}
.fgt_howto_art svg{width:min(78vw,320px);height:auto;max-height:100%}
.fgt_howto_list{list-style:none;padding:0;margin:.4rem 0 .2rem;max-width:34ch;text-align:left}
.fgt_howto_list li{display:flex;gap:.55rem;align-items:flex-start;font-size:.95rem;
  color:#d8d8d8;margin-bottom:.45rem}
.fgt_howto_list b{color:#7CFFA8;font-weight:600}
.fgt_howto_num{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:#2b2a30;
  color:#f97316;font-size:.78rem;line-height:22px;text-align:center;font-weight:700}


/* The footer is a landing-page thing. On the app screens it costs 40px that
   page 4 needs, and the privacy link the user actually has to see lives on the
   gate screen anyway. */
body.fgt.is-app .fgt_foot{display:none}

/* ---------- page 4: positioning gets the screen ---------- */
/* A hard min-height here pushed the controls out of the flex column. Let flex
   allocate instead and keep the surrounding chrome small enough that the stage
   lands above 80% on its own - that holds on other screen sizes too. */
body.fgt.is-app #step-place{padding-top:.2rem;padding-bottom:calc(.2rem + env(safe-area-inset-bottom,0px));gap:.25rem}
body.fgt.is-app #step-place #fgt_viewport{flex:1 1 auto;min-height:0;margin-bottom:0}
#step-place .fgt_posline{margin:.15rem 0 .25rem;font-size:.86rem}
#step-place .fgt_btn{min-height:46px;padding:.65rem 1.4rem;margin-top:0}
#step-place .fgt_ctrl_toggles{justify-content:center;margin:.2rem 0 0;font-size:.76rem}


/* ---------- landing: collapsible categories ---------- */
.fgt_cats{margin:1.1rem 0 1.3rem}
.fgt_cat{border:1px solid #2b2a30;border-radius:.6rem;background:#1a191e;margin-bottom:.55rem;
  overflow:hidden}
.fgt_cat > summary{list-style:none;cursor:pointer;padding:.75rem .9rem;display:flex;
  align-items:center;gap:.6rem;font-family:"Poppins Semibold",Helvetica,sans-serif;
  font-size:1rem;color:#f2f2f2;user-select:none;min-height:48px}
.fgt_cat > summary::-webkit-details-marker{display:none}
/* the disclosure triangle, drawn so it can rotate */
.fgt_cat > summary::before{content:"";width:0;height:0;flex:0 0 auto;
  border-left:7px solid #f97316;border-top:5px solid transparent;border-bottom:5px solid transparent;
  transition:transform .18s ease}
.fgt_cat[open] > summary::before{transform:rotate(90deg)}
.fgt_cat > summary:hover{background:#221f27}
.fgt_cat_name{flex:1 1 auto}
.fgt_cat_count{flex:0 0 auto;background:#2b2a30;color:#a9a9b2;border-radius:999px;
  padding:.08rem .5rem;font-size:.76rem;font-family:"Raleway",Helvetica,sans-serif}
.fgt_cat .fgt_picker{margin:0;padding:0 .6rem .7rem}


/* ---------- live step: the picture takes the screen ---------- */
body.fgt.is-app #step-live{padding-top:.2rem;gap:.2rem}
body.fgt.is-app #step-live #fgt_viewport{flex:1 1 auto;min-height:0;margin-bottom:0}
#step-live .fgt_livebar{margin-top:.3rem}

/* "hold it straight" — over the viewfinder, above the coach (z-index 3), because
   until the phone is level nothing the coach says is worth reading. A line of
   text underneath the picture goes unread while someone is aiming a camera. */
.fgt_level{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.55rem;text-align:center;
  background:rgba(10,10,14,.66);padding:1.2rem;pointer-events:none}
.fgt_level svg{width:3.2rem;height:3.2rem;fill:none;stroke:#ffd479;stroke-width:2.4;
  stroke-linecap:round;animation:fgt_upright 2s ease-in-out infinite}
.fgt_level b{color:#fff;font-size:1.05rem;font-weight:600}
.fgt_level span{color:#d8d8dc;font-size:.85rem;max-width:15rem;line-height:1.45}
/* the icon rights itself, which shows the gesture rather than describing it */
@keyframes fgt_upright{0%,100%{transform:rotate(-20deg)}50%,78%{transform:rotate(0)}}
@media (prefers-reduced-motion:reduce){.fgt_level svg{animation:none}}

/* ── the picker, as a shop ──────────────────────────────────────────────────
   Shelves that scroll horizontally, then search, category chips and a paged
   grid. A shelf signals "there is more of this" without spending the vertical
   space a second grid would cost. */
.fgt_shop{margin:1.2rem 0 1.4rem}
.fgt_shelf{margin-bottom:1.6rem}
.fgt_shelf_head{display:flex;align-items:center;gap:.8rem;margin:0 0 .6rem}
.fgt_shelf_head h2{font-size:1rem;font-weight:600;color:#e8e8ea;margin:0;flex:0 0 auto}
.fgt_shelf_nav{margin-left:auto;display:flex;gap:.3rem}
.fgt_arw{width:1.9rem;height:1.9rem;border-radius:50%;border:1px solid #33323a;background:#1e1d22;
  color:#c9c9cf;font-size:1.1rem;line-height:1;cursor:pointer;display:flex;align-items:center;
  justify-content:center;padding:0}
.fgt_arw:hover{border-color:#5a5a63;color:#fff}
.fgt_arw[disabled]{opacity:.35;cursor:default}
/* the rail: native scroll, so a trackpad and a touchscreen both work without
   any of our code running; the drag handler only adds mouse dragging */
.fgt_rail{display:flex;gap:.55rem;overflow-x:auto;scroll-behavior:smooth;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;padding-bottom:.3rem;
  scrollbar-width:none}
.fgt_rail::-webkit-scrollbar{display:none}
.fgt_rail .fgt_card{flex:0 0 46%;max-width:12rem;scroll-snap-align:start}
.fgt_rail.is-drag{scroll-behavior:auto;cursor:grabbing;scroll-snap-type:none}
.fgt_rail.is-drag .fgt_card{pointer-events:none}

.fgt_browse{margin-top:.4rem}
.fgt_search{margin-left:auto;display:flex;align-items:center;gap:.4rem;background:#1a191e;
  border:1px solid #33323a;border-radius:2rem;padding:.35rem .8rem;min-width:0;flex:0 1 14rem}
.fgt_search svg{width:1rem;height:1rem;color:#8a8a92;flex:0 0 auto}
.fgt_search input{background:none;border:0;color:#e8e8ea;font:inherit;font-size:.9rem;
  width:100%;min-width:0;outline:none}
.fgt_search input::placeholder{color:#7a7a82}
.fgt_search input::-webkit-search-cancel-button{filter:invert(.6)}

.fgt_chips{display:flex;gap:.4rem;flex-wrap:wrap;margin:0 0 .9rem}
.fgt_chip{background:#1a191e;border:1px solid #33323a;border-radius:2rem;color:#c9c9cf;
  font:inherit;font-size:.84rem;padding:.32rem .8rem;cursor:pointer;display:flex;align-items:center;
  gap:.35rem}
.fgt_chip span{font-size:.72rem;color:#8a8a92}
.fgt_chip:hover{border-color:#5a5a63;color:#fff}
.fgt_chip.is-on{background:#f97316;border-color:#f97316;color:#151316;font-weight:600}
.fgt_chip.is-on span{color:#151316;opacity:.75}

.fgt_card_img{position:relative;display:block}
.fgt_star{position:absolute;top:.3rem;right:.3rem;width:1.25rem;height:1.25rem;border-radius:50%;
  background:rgba(20,18,22,.78);color:#ffd479;font-size:.72rem;display:flex;align-items:center;
  justify-content:center;line-height:1}
.fgt_none{color:#9a9aa2;font-size:.92rem;margin:.6rem 0 1rem}
#fgt_more{margin-top:.4rem}

/* Animation styles are now in animations/halloween_2026/halloween_2026.css */
.fgt_guide{margin:1.4rem 0 1.8rem}
.fgt_guide_steps{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:1rem}
.fgt_guide_steps li{display:flex;align-items:flex-start;gap:.9rem}
.fgt_guide_num{display:flex;align-items:center;justify-content:center;
  flex:0 0 2.4rem;width:2.4rem;height:2.4rem;border-radius:50%;background:#f97316;
  color:#fff;font-weight:700;font-size:1rem;line-height:1}
.fgt_guide_text{flex:1;font-size:.95rem;color:#e8e8ea;line-height:1.5}
.fgt_guide_text strong{color:#fff;font-weight:600}

/* design browse step scrollable on mobile */
#step-browse{overflow-y:auto;-webkit-overflow-scrolling:touch}

@media (min-width:640px){
  .fgt_rail .fgt_card{flex:0 0 11rem}
}