/* =========================================================
   TASY AIR — ADAPTIVE GUIDANCE
   Visual layer only.
   No camera / CV / acceptance logic lives here.
   ========================================================= */

:root{
  --tasy-ivory: #F8F4EF;
  --tasy-milk: #FBF8F4;
  --tasy-beige: #E8D9C5;

  --tasy-terracotta: #C97B5C;
  --tasy-terracotta-soft: #D89A82;

  --tasy-deep: #5A2E20;
  --tasy-text: #4F382F;
  --tasy-muted: #8E7468;

  --tasy-sage: #829A82;
  --tasy-sage-soft: #BFD0BE;

  --tasy-error: #B97069;

  --tasy-glass:
    rgba(250,247,243,.76);

  --tasy-glass-strong:
    rgba(250,247,243,.90);

  --tasy-glass-border:
    rgba(255,255,255,.56);

  --tasy-shadow:
    0 18px 50px rgba(58,31,21,.13);

  --tasy-radius-xl: 28px;
  --tasy-radius-lg: 22px;
}


/* =========================================================
   MVP 1.2 CAPTURE UI — approved distance-readable direction
   Geometry is driven by static-geometry.js via guideLayer CSS vars.
   ========================================================= */

.scanner-screen{
  background:#0f0c0a;
}

.scanner-topbar{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:30;
  background:linear-gradient(180deg,rgba(12,9,7,.72),rgba(12,9,7,0));
  grid-template-columns:44px 1fr 44px 44px;
}

.camera-stage{
  grid-row:1 / -1;
  min-height:100dvh;
}

#video{
  object-fit:contain;
}

.guide-layer{
  --tasy-safe-left:7%;
  --tasy-safe-right:7%;
  --tasy-safe-top:7%;
  --tasy-safe-bottom:5.5%;
  --tasy-cocoon-width:58%;
  --tasy-depth-width:48%;
}

.cocoon-halo{
  stroke-width:18px;
  stroke:rgba(255,255,255,.18);
}

.cocoon-glow{
  stroke-width:10px;
  stroke:rgba(255,255,255,.22);
}

.cocoon-line{
  stroke-width:4.6px;
  stroke:rgba(255,244,231,.92);
}

.scanner-screen[data-guidance="guidance"] .cocoon-halo,
.scanner-screen[data-level="bad"] .cocoon-halo,
.scanner-screen[data-level="warn"] .cocoon-halo{
  stroke:rgba(255,73,55,.22);
}

.scanner-screen[data-guidance="guidance"] .cocoon-glow,
.scanner-screen[data-level="bad"] .cocoon-glow,
.scanner-screen[data-level="warn"] .cocoon-glow{
  stroke:rgba(255,87,64,.42);
}

.scanner-screen[data-guidance="guidance"] .cocoon-line,
.scanner-screen[data-level="bad"] .cocoon-line,
.scanner-screen[data-level="warn"] .cocoon-line{
  stroke:rgba(255,112,86,.98);
}

.scanner-screen[data-guidance="ready"] .cocoon-halo,
.scanner-screen[data-level="ready"] .cocoon-halo{
  stroke:rgba(29,231,129,.22);
}

.scanner-screen[data-guidance="ready"] .cocoon-glow,
.scanner-screen[data-level="ready"] .cocoon-glow{
  stroke:rgba(41,255,148,.52);
}

.scanner-screen[data-guidance="ready"] .cocoon-line,
.scanner-screen[data-level="ready"] .cocoon-line{
  stroke:rgba(124,255,179,.98);
}

.command-card{
  position:absolute;
  z-index:32;
  left:18px;
  right:18px;
  bottom:calc(18px + env(safe-area-inset-bottom));
  margin:0;
  min-height:88px;
  display:grid;
  grid-template-columns:1fr;
  place-items:center;
  padding:14px 18px 16px;
  border-radius:28px;
  background:linear-gradient(180deg,rgba(235,74,55,.94),rgba(170,31,27,.96));
  border:1px solid rgba(255,176,148,.55);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.16) inset,
    0 18px 44px rgba(151,30,22,.38),
    0 0 38px rgba(255,80,55,.28);
}

.scanner-screen[data-guidance="ready"] .command-card,
.scanner-screen[data-level="ready"] .command-card{
  background:linear-gradient(180deg,rgba(24,186,96,.95),rgba(5,112,61,.97));
  border-color:rgba(142,255,190,.70);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.18) inset,
    0 18px 44px rgba(5,112,61,.38),
    0 0 42px rgba(41,255,148,.36);
}

.command-icon{
  display:none;
}

.command-copy{
  width:100%;
}

.command-title{
  text-align:center;
  color:#fff;
  font-size:clamp(42px,15vw,86px);
  line-height:.88;
  font-weight:950;
  letter-spacing:0;
  text-transform:uppercase;
  text-shadow:0 4px 18px rgba(0,0,0,.28);
  overflow-wrap:anywhere;
}

.command-sub{
  display:none;
}

.direction-arrow{
  z-index:31;
  top:55%;
  font-size:clamp(112px,34vw,190px);
  font-weight:950;
  color:#fff;
  text-shadow:
    0 5px 28px rgba(0,0,0,.38),
    0 0 32px rgba(255,88,63,.65);
}

.scanner-screen[data-guidance="ready"] .direction-arrow,
.scanner-screen[data-level="ready"] .direction-arrow{
  text-shadow:
    0 5px 28px rgba(0,0,0,.38),
    0 0 34px rgba(31,235,130,.72);
}

.countdown{
  z-index:34;
  width:clamp(154px,46vw,236px);
  height:clamp(154px,46vw,236px);
  border:8px solid rgba(255,244,231,.78);
  background:rgba(92,54,35,.38);
  color:#fff;
  font-size:clamp(92px,28vw,150px);
  font-weight:950;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.18) inset,
    0 14px 56px rgba(0,0,0,.42);
}

.tasy-cue-depth{
  width:var(--tasy-depth-width);
  max-width:340px;
}

.tasy-depth-frame{
  border-width:3px;
  border-color:rgba(255,104,77,.92);
  box-shadow:0 0 32px rgba(255,81,56,.30);
}

.tasy-safe-crown{
  left:var(--tasy-safe-left);
  right:var(--tasy-safe-right);
  top:var(--tasy-safe-top);
  height:clamp(46px,8vh,76px);
}

.tasy-safe-feet{
  left:var(--tasy-safe-left);
  right:var(--tasy-safe-right);
  bottom:var(--tasy-safe-bottom);
  height:clamp(42px,7vh,68px);
}

.tasy-safe-left,
.tasy-safe-right{
  top:var(--tasy-safe-top);
  bottom:var(--tasy-safe-bottom);
  width:clamp(24px,7vw,42px);
}

.tasy-safe-left{
  left:var(--tasy-safe-left);
}

.tasy-safe-right{
  right:var(--tasy-safe-right);
}

.scanner-screen[data-visual-cue="ready"] .tasy-cue-ready,
.scanner-screen[data-visual-cue="accepted"] .tasy-cue-ready,
.scanner-screen[data-visual-cue="success"] .tasy-cue-ready{
  opacity:1;
}

.tasy-cue-ready{
  left:50%;
  top:58%;
  width:clamp(112px,34vw,172px);
  height:clamp(112px,34vw,172px);
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  border-radius:50%;
  background:radial-gradient(circle at 50% 42%,rgba(32,221,122,.98),rgba(5,129,67,.96));
  box-shadow:
    0 0 0 6px rgba(195,255,216,.58),
    0 0 48px rgba(31,236,132,.70),
    0 24px 58px rgba(0,0,0,.32);
}

.tasy-ready-check{
  width:48%;
  height:28%;
  border-left:10px solid #fff;
  border-bottom:10px solid #fff;
  transform:translateY(-8%) rotate(-45deg);
}

.scanner-screen[data-visual-cue="turn-right"] .camera-stage::after,
.scanner-screen[data-visual-cue="turn-left"] .camera-stage::after,
.scanner-screen[data-visual-cue="turn-back"] .camera-stage::after,
.scanner-screen[data-visual-cue="turn-front"] .camera-stage::after,
.scanner-screen[data-visual-cue="complete"] .camera-stage::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:6;
  background:rgba(0,0,0,.56);
  pointer-events:none;
}

.scanner-screen[data-visual-cue="turn-right"] .command-card,
.scanner-screen[data-visual-cue="turn-left"] .command-card,
.scanner-screen[data-visual-cue="turn-back"] .command-card,
.scanner-screen[data-visual-cue="turn-front"] .command-card{
  background:transparent;
  border-color:transparent;
  box-shadow:none;
  bottom:calc(54px + env(safe-area-inset-bottom));
}

.scanner-screen[data-visual-cue="turn-right"] .command-title,
.scanner-screen[data-visual-cue="turn-left"] .command-title,
.scanner-screen[data-visual-cue="turn-back"] .command-title,
.scanner-screen[data-visual-cue="turn-front"] .command-title{
  font-size:clamp(28px,9vw,54px);
  line-height:1.05;
}

.scanner-screen[data-angle="right_profile"] .cocoon-line,
.scanner-screen[data-angle="left_profile"] .cocoon-line,
.guide-layer[data-angle="right_profile"] .cocoon-line,
.guide-layer[data-angle="left_profile"] .cocoon-line{
  stroke-width:4.2px;
}

.foot-zone{
  left:var(--tasy-safe-left);
  right:var(--tasy-safe-right);
  bottom:var(--tasy-safe-bottom);
  height:7%;
}

.tasy-welcome{
  min-height:100dvh;
  background:
    linear-gradient(90deg,rgba(54,33,22,.72),rgba(54,33,22,.22) 48%,rgba(54,33,22,.08)),
    url('/static/assets/preparation-approved/source.png') center / cover no-repeat;
  color:#fff;
}

.tasy-welcome-shell{
  min-height:100dvh;
  justify-content:end;
}

.tasy-welcome-copy h1,
.tasy-welcome-copy p,
.tasy-brand-name,
.tasy-brand-product,
.tasy-welcome-rule,
.tasy-welcome-camera-note{
  color:#fff;
}

.tasy-welcome-visual{
  opacity:.92;
}

.tasy-welcome-start{
  background:linear-gradient(180deg,#d77559,#b84a37);
  color:#fff;
}

@media(max-width:430px){
  .command-card{
    left:14px;
    right:14px;
    min-height:82px;
    border-radius:24px;
  }

  .command-title{
    font-size:clamp(38px,16vw,72px);
  }
}


/* ---------- GLOBAL ---------- */

html,
body{
  background:var(--tasy-ivory);
  color:var(--tasy-deep);
  font-family:
    "Manrope",
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

button{
  font-family:inherit;
}


/* ---------- LIVE CAMERA ---------- */

.scanner-screen{
  background:
    linear-gradient(
      180deg,
      rgba(248,244,239,.05) 0%,
      rgba(58,46,39,.02) 55%,
      rgba(58,31,21,.08) 100%
    );
}

/*
 Camera remains the hero.
 No dark technical framing around it.
*/
.camera-stage,
.scanner-stage{
  background:#181614;
}


/* ---------- TOP BAR ---------- */

.scanner-topbar{
  padding:
    calc(10px + env(safe-area-inset-top))
    14px
    6px;
}

.step-label{
  color:rgba(255,255,255,.92);
  font-weight:650;
  letter-spacing:.01em;
  text-shadow:
    0 2px 16px rgba(41,26,18,.28);
}


/* =========================================================
   COCOON
   Neutral Ivory → Guidance Terracotta → Ready Sage
   ========================================================= */


/* NEUTRAL */

.cocoon-halo{
  stroke:rgba(248,241,232,.13);
  stroke-width:15px;
}

.cocoon-glow{
  stroke:rgba(248,241,232,.18);
  stroke-width:7px;
}

.cocoon-line{
  stroke:rgba(255,248,240,.88);
  stroke-width:3px;
}

.center-guide{
  stroke:rgba(255,248,240,.13);
  stroke-width:1.15;
}


/* GUIDANCE */

.scanner-screen[data-level="bad"] .cocoon-halo,
.scanner-screen[data-level="warn"] .cocoon-halo,
.scanner-screen[data-guidance="guidance"] .cocoon-halo{
  stroke:rgba(201,123,92,.16);
}

.scanner-screen[data-level="bad"] .cocoon-glow,
.scanner-screen[data-level="warn"] .cocoon-glow,
.scanner-screen[data-guidance="guidance"] .cocoon-glow{
  stroke:rgba(201,123,92,.26);
}

.scanner-screen[data-level="bad"] .cocoon-line,
.scanner-screen[data-level="warn"] .cocoon-line,
.scanner-screen[data-guidance="guidance"] .cocoon-line{
  stroke:rgba(216,154,130,.95);
}


/* READY */

.scanner-screen[data-guidance="ready"] .cocoon-halo,
.scanner-screen[data-level="ready"] .cocoon-halo{
  stroke:rgba(130,154,130,.16);
}

.scanner-screen[data-guidance="ready"] .cocoon-glow,
.scanner-screen[data-level="ready"] .cocoon-glow{
  stroke:rgba(130,154,130,.26);
}

.scanner-screen[data-guidance="ready"] .cocoon-line,
.scanner-screen[data-level="ready"] .cocoon-line{
  stroke:rgba(191,208,190,.98);
}


/* BLOCKING ERROR ONLY */

.scanner-screen[data-guidance="error"] .cocoon-glow{
  stroke:rgba(185,112,105,.25);
}

.scanner-screen[data-guidance="error"] .cocoon-line{
  stroke:rgba(185,112,105,.92);
}


/* ---------- FLOOR / FEET SAFE ZONE ---------- */

.foot-zone{
  border-color:rgba(255,248,240,.42);
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.015),
      rgba(248,244,239,.10)
    );
}

.foot-zone[data-feet="complete"]{
  border-color:rgba(191,208,190,.82);
}

.foot-zone[data-feet="missing"]{
  border-color:rgba(201,123,92,.88);
  background:rgba(201,123,92,.08);
}

.foot-zone > span{
  color:rgba(255,255,255,.82);
}


/* ---------- VISUAL CUE ---------- */

.direction-arrow{
  color:rgba(216,154,130,.96);
  text-shadow:
    0 4px 28px rgba(90,46,32,.24);

  font-weight:500;
  opacity:.94;
}


/* ---------- GUIDANCE GLASS CARD ---------- */

.command-card{
  position:relative;
  z-index:20;

  margin:-70px 14px 12px;
  padding:14px 16px;

  min-height:72px;

  display:grid;
  grid-template-columns:38px 1fr;
  gap:11px;
  align-items:center;

  border-radius:var(--tasy-radius-lg);

  background:var(--tasy-glass);
  border:1px solid var(--tasy-glass-border);

  color:var(--tasy-deep);

  box-shadow:var(--tasy-shadow);

  -webkit-backdrop-filter:
    blur(14px) saturate(118%);
  backdrop-filter:
    blur(14px) saturate(118%);
}


/* fallback for devices where blur is expensive / unavailable */

@supports not (
  (backdrop-filter:blur(1px)) or
  (-webkit-backdrop-filter:blur(1px))
){
  .command-card{
    background:rgba(250,247,243,.92);
  }
}


.command-icon{
  width:36px;
  height:36px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:
    rgba(201,123,92,.09);

  color:var(--tasy-terracotta);

  font-size:19px;
  font-weight:650;
}


.command-title{
  color:var(--tasy-deep);

  font-size:clamp(26px,7vw,34px);
  line-height:1.02;
  letter-spacing:-.025em;
  font-weight:650;
}


.command-sub{
  margin-top:5px;

  color:var(--tasy-muted);

  font-size:14px;
  line-height:1.3;
  font-weight:450;
}


/* Guidance card states */

.scanner-screen[data-level="bad"] .command-card,
.scanner-screen[data-level="warn"] .command-card{
  background:
    rgba(250,247,243,.82);

  border-color:
    rgba(216,154,130,.30);
}


.scanner-screen[data-level="ready"] .command-card,
.scanner-screen[data-guidance="ready"] .command-card{
  background:
    rgba(245,249,244,.83);

  border-color:
    rgba(130,154,130,.28);
}


.scanner-screen[data-level="ready"] .command-icon,
.scanner-screen[data-guidance="ready"] .command-icon{
  background:
    rgba(130,154,130,.12);

  color:var(--tasy-sage);
}


/* ---------- COUNTDOWN ---------- */

.countdown{
  min-width:112px;
  height:112px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:
    rgba(250,247,243,.72);

  border:
    1px solid rgba(255,255,255,.60);

  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);

  color:var(--tasy-deep);

  font-size:68px;
  font-weight:650;
  letter-spacing:-.04em;

  box-shadow:
    0 18px 54px rgba(58,31,21,.14);
}


/* ---------- CAPTURE FLASH ---------- */

.flash{
  background:
    rgba(255,252,248,.96);
}


/* ---------- BUTTONS ---------- */

.primary,
#start,
.scanner-actions .primary{
  min-height:54px;

  padding:0 24px;

  border:0;
  border-radius:18px;

  background:
    linear-gradient(
      135deg,
      var(--tasy-terracotta-soft),
      var(--tasy-terracotta)
    );

  color:#fffaf6;

  font-size:17px;
  font-weight:650;

  box-shadow:
    0 12px 30px rgba(201,123,92,.24);
}


.secondary,
.scanner-actions .secondary{
  min-height:50px;

  border-radius:17px;

  background:
    rgba(250,247,243,.76);

  border:
    1px solid rgba(255,255,255,.48);

  color:var(--tasy-deep);
}


/* ---------- SOUND / ICON BUTTONS ---------- */

.icon-btn,
.sound-btn{
  background:
    rgba(250,247,243,.67);

  color:var(--tasy-deep);

  border:
    1px solid rgba(255,255,255,.40);

  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}


/* ---------- ORIENTATION ---------- */

.orientation-guard{
  background:
    rgba(248,244,239,.96);

  color:var(--tasy-deep);
}

.orientation-guard span{
  color:var(--tasy-muted);
}


/* ---------- COMPLETE ---------- */

.review-screen{
  background:
    radial-gradient(
      circle at 50% 0%,
      #fffdf9 0%,
      var(--tasy-ivory) 62%,
      #f2e9df 100%
    );
}

.complete-card{
  background:
    rgba(255,252,248,.72);

  border:
    1px solid rgba(255,255,255,.55);

  border-radius:30px;

  color:var(--tasy-deep);

  box-shadow:
    0 24px 70px rgba(58,31,21,.09);
}

.complete-mark{
  background:
    rgba(130,154,130,.11);

  border:
    1px solid rgba(130,154,130,.25);

  color:var(--tasy-sage);
}

.review-status{
  color:var(--tasy-muted);
}


/* ---------- DEBUG SHOULD NEVER COMPETE WITH UI ---------- */

.tech-code,
.debug-wrap{
  opacity:.55;
}


/* ---------- SMALL MOBILE ---------- */

@media(max-height:680px){

  .command-card{
    margin-top:-64px;
    min-height:68px;
    padding:11px 13px;
  }

  .command-title{
    font-size:28px;
  }

  .command-sub{
    font-size:12px;
  }

  .countdown{
    width:96px;
    min-width:96px;
    height:96px;
    font-size:58px;
  }
}


/* ---------- REDUCED MOTION ---------- */

@media(prefers-reduced-motion:reduce){

  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}


/* =========================================================
   TASY AIR — ADAPTIVE VISUAL COMMANDS
   One command → one visual signal.
   ========================================================= */


.command-card{
  grid-template-columns:1fr;
  text-align:center;
}

.command-icon{
  display:none;
}

.command-sub:empty{
  display:none;
}


/* ---------- VISUAL LAYER ---------- */

.tasy-air-visual-layer{
  position:absolute;
  inset:0;

  z-index:8;

  pointer-events:none;

  overflow:hidden;
}


/*
 All visual cues are invisible by default.
 Only the semantic state selected by TASY Guidance is shown.
*/

.tasy-cue,
.tasy-safe-zone{
  position:absolute;
  opacity:0;

  transition:
    opacity .28s ease,
    transform .34s ease;
}


/* =========================================================
   LEFT / RIGHT
   ========================================================= */

.tasy-cue-direction{
  top:50%;

  width:72px;
  height:72px;

  transform:
    translateY(-50%);
}


.tasy-arrow-shaft{
  position:absolute;

  top:34px;
  left:12px;

  width:44px;
  height:2px;

  border-radius:99px;

  background:
    rgba(216,154,130,.94);

  box-shadow:
    0 0 20px rgba(201,123,92,.25);
}


.tasy-arrow-head{
  position:absolute;

  top:27px;
  right:12px;

  width:15px;
  height:15px;

  border-top:
    2px solid rgba(216,154,130,.96);

  border-right:
    2px solid rgba(216,154,130,.96);

  transform:
    rotate(45deg);
}


.scanner-screen[data-visual-cue="move-right"]
.tasy-cue-direction{
  right:7%;
  opacity:1;

  animation:
    tasyMoveRight
    1.45s
    ease-in-out
    infinite;
}


.scanner-screen[data-visual-cue="move-left"]
.tasy-cue-direction{
  left:7%;
  opacity:1;

  transform:
    translateY(-50%)
    scaleX(-1);

  animation:
    tasyMoveLeft
    1.45s
    ease-in-out
    infinite;
}


@keyframes tasyMoveRight{
  0%,100%{
    translate:-8px 0;
    opacity:.54;
  }

  50%{
    translate:8px 0;
    opacity:1;
  }
}


@keyframes tasyMoveLeft{
  0%,100%{
    translate:8px 0;
    opacity:.54;
  }

  50%{
    translate:-8px 0;
    opacity:1;
  }
}


/* =========================================================
   DEPTH — CLOSER / FARTHER
   Not a left/right arrow.
   User sees the body-space become larger/smaller.
   ========================================================= */

.tasy-cue-depth{
  left:50%;
  top:47%;

  width:48%;
  max-width:260px;

  aspect-ratio:.56;

  transform:
    translate(-50%,-50%);
}


.tasy-depth-frame{
  position:absolute;
  inset:12% 18%;

  border:
    1.8px solid rgba(216,154,130,.74);

  border-radius:
    48% 48% 42% 42% / 22% 22% 12% 12%;

  box-shadow:
    0 0 22px rgba(201,123,92,.10);
}


.depth-b{
  inset:4% 10%;

  opacity:.38;
}


.scanner-screen[data-visual-cue="depth-in"]
.tasy-cue-depth,
.scanner-screen[data-visual-cue="depth-in-soft"]
.tasy-cue-depth{
  opacity:1;
}


.scanner-screen[data-visual-cue="depth-in"]
.depth-a{
  animation:
    tasyDepthCloserA
    1.55s
    ease-in-out
    infinite;
}


.scanner-screen[data-visual-cue="depth-in"]
.depth-b{
  animation:
    tasyDepthCloserB
    1.55s
    ease-in-out
    infinite;
}


.scanner-screen[data-visual-cue="depth-in-soft"]
.depth-a,
.scanner-screen[data-visual-cue="depth-in-soft"]
.depth-b{
  animation:
    tasyDepthCloserA
    1.9s
    ease-in-out
    infinite;
}


@keyframes tasyDepthCloserA{
  0%,100%{
    transform:scale(.90);
    opacity:.35;
  }

  50%{
    transform:scale(1.05);
    opacity:.92;
  }
}


@keyframes tasyDepthCloserB{
  0%,100%{
    transform:scale(.84);
    opacity:.16;
  }

  50%{
    transform:scale(1.12);
    opacity:.48;
  }
}


.scanner-screen[data-visual-cue="depth-out"]
.tasy-cue-depth{
  opacity:1;
}


.scanner-screen[data-visual-cue="depth-out"]
.depth-a{
  animation:
    tasyDepthFartherA
    1.55s
    ease-in-out
    infinite;
}


.scanner-screen[data-visual-cue="depth-out"]
.depth-b{
  animation:
    tasyDepthFartherB
    1.55s
    ease-in-out
    infinite;
}


@keyframes tasyDepthFartherA{
  0%,100%{
    transform:scale(1.08);
    opacity:.86;
  }

  50%{
    transform:scale(.90);
    opacity:.34;
  }
}


@keyframes tasyDepthFartherB{
  0%,100%{
    transform:scale(1.15);
    opacity:.42;
  }

  50%{
    transform:scale(.84);
    opacity:.14;
  }
}


/* =========================================================
   SAFE ZONES
   ========================================================= */


.tasy-safe-zone{
  background:
    rgba(201,123,92,.08);

  border-color:
    rgba(216,154,130,.84);

  box-shadow:
    0 0 28px rgba(201,123,92,.12);
}


/* crown */

.tasy-safe-crown{
  left:26%;
  right:26%;

  top:
    calc(env(safe-area-inset-top) + 76px);

  height:62px;

  border-top:
    2px solid rgba(216,154,130,.90);

  border-radius:
    50% 50% 0 0;
}


.scanner-screen[data-visual-cue="crown-safe"]
.tasy-safe-crown{
  opacity:1;

  animation:
    tasySafePulse
    1.35s
    ease-in-out
    infinite;
}


/* feet */

.tasy-safe-feet{
  left:26%;
  right:26%;

  bottom:19%;

  height:54px;

  border-bottom:
    2px solid rgba(216,154,130,.90);

  border-radius:
    0 0 50% 50%;
}


.scanner-screen[data-visual-cue="feet-safe"]
.tasy-safe-feet,
.scanner-screen[data-visual-cue="feet-zone"]
.tasy-safe-feet{
  opacity:1;

  animation:
    tasySafePulse
    1.35s
    ease-in-out
    infinite;
}


/* lateral */

.tasy-safe-left,
.tasy-safe-right{
  top:24%;
  bottom:23%;

  width:32px;
}


.tasy-safe-left{
  left:11%;

  border-left:
    2px solid rgba(216,154,130,.90);

  border-radius:
    50% 0 0 50%;
}


.tasy-safe-right{
  right:11%;

  border-right:
    2px solid rgba(216,154,130,.90);

  border-radius:
    0 50% 50% 0;
}


.scanner-screen[data-visual-cue="lateral-safe"]
.tasy-safe-left,
.scanner-screen[data-visual-cue="lateral-safe"]
.tasy-safe-right{
  opacity:1;

  animation:
    tasySafePulse
    1.35s
    ease-in-out
    infinite;
}


@keyframes tasySafePulse{
  0%,100%{
    opacity:.28;
    filter:blur(.1px);
  }

  50%{
    opacity:1;
    filter:blur(0);
  }
}


/* =========================================================
   TURN CUE
   ========================================================= */

.tasy-cue-turn{
  left:50%;
  top:42%;

  width:118px;
  height:118px;

  transform:
    translate(-50%,-50%);
}


.tasy-turn-arc{
  position:absolute;

  inset:7px;

  border:
    2px solid transparent;

  border-top-color:
    rgba(216,154,130,.86);

  border-right-color:
    rgba(216,154,130,.86);

  border-radius:50%;
}


.tasy-turn-head{
  position:absolute;

  right:2px;
  top:47px;

  width:12px;
  height:12px;

  border-top:
    2px solid rgba(216,154,130,.94);

  border-right:
    2px solid rgba(216,154,130,.94);

  transform:rotate(78deg);
}


.tasy-turn-person{
  position:absolute;

  left:50%;
  top:50%;

  width:25px;
  height:52px;

  transform:
    translate(-50%,-50%);

  border:
    1.8px solid rgba(216,154,130,.76);

  border-radius:
    45% 45% 38% 38% / 24% 24% 10% 10%;
}


.scanner-screen[data-visual-cue="turn-right"]
.tasy-cue-turn,
.scanner-screen[data-visual-cue="turn-left"]
.tasy-cue-turn,
.scanner-screen[data-visual-cue="turn-back"]
.tasy-cue-turn,
.scanner-screen[data-visual-cue="turn-front"]
.tasy-cue-turn{
  opacity:1;
}


.scanner-screen[data-visual-cue="turn-right"]
.tasy-cue-turn{
  animation:
    tasyTurnRight
    1.65s
    ease-in-out
    infinite;
}


.scanner-screen[data-visual-cue="turn-left"]
.tasy-cue-turn{
  transform:
    translate(-50%,-50%)
    scaleX(-1);

  animation:
    tasyTurnLeft
    1.65s
    ease-in-out
    infinite;
}


.scanner-screen[data-visual-cue="turn-back"]
.tasy-cue-turn{
  animation:
    tasyTurnBack
    1.9s
    ease-in-out
    infinite;
}


@keyframes tasyTurnRight{
  0%,100%{
    rotate:-7deg;
    opacity:.38;
  }

  50%{
    rotate:10deg;
    opacity:1;
  }
}


@keyframes tasyTurnLeft{
  0%,100%{
    rotate:7deg;
    opacity:.38;
  }

  50%{
    rotate:-10deg;
    opacity:1;
  }
}


@keyframes tasyTurnBack{
  0%,100%{
    rotate:-18deg;
    opacity:.34;
  }

  50%{
    rotate:18deg;
    opacity:1;
  }
}


/* =========================================================
   FACE ZONE
   ========================================================= */

.tasy-cue-face{
  left:50%;
  top:25%;

  width:88px;
  height:88px;

  transform:
    translate(-50%,-50%);
}


.tasy-cue-face span{
  position:absolute;
  inset:8px;

  border:
    2px solid rgba(216,154,130,.82);

  border-radius:50%;

  box-shadow:
    0 0 28px rgba(201,123,92,.12);
}


.scanner-screen[data-visual-cue="face-zone"]
.tasy-cue-face{
  opacity:1;

  animation:
    tasyFacePulse
    1.45s
    ease-in-out
    infinite;
}


@keyframes tasyFacePulse{
  0%,100%{
    transform:
      translate(-50%,-50%)
      scale(.92);

    opacity:.32;
  }

  50%{
    transform:
      translate(-50%,-50%)
      scale(1.06);

    opacity:.92;
  }
}


/* =========================================================
   READY
   ========================================================= */

.tasy-cue-ready{
  left:50%;
  top:43%;

  width:74px;
  height:74px;

  transform:
    translate(-50%,-50%);

  border-radius:50%;

  background:
    rgba(245,249,244,.78);

  border:
    1px solid rgba(191,208,190,.72);

  box-shadow:
    0 12px 40px rgba(79,103,79,.13);

  -webkit-backdrop-filter:
    blur(10px);

  backdrop-filter:
    blur(10px);
}


.tasy-ready-check{
  position:absolute;

  left:22px;
  top:19px;

  width:27px;
  height:15px;

  border-left:
    3px solid var(--tasy-sage);

  border-bottom:
    3px solid var(--tasy-sage);

  transform:
    rotate(-45deg);
}


.scanner-screen[data-visual-cue="ready"]
.tasy-cue-ready{
  opacity:1;

  animation:
    tasyReadyIn
    .42s
    cubic-bezier(.2,.8,.2,1)
    both;
}


@keyframes tasyReadyIn{
  from{
    opacity:0;
    transform:
      translate(-50%,-50%)
      scale(.78);
  }

  to{
    opacity:1;
    transform:
      translate(-50%,-50%)
      scale(1);
  }
}


/* =========================================================
   FULL BODY / HOLD
   ========================================================= */

.scanner-screen[data-visual-cue="full-body"]
.cocoon-line{
  animation:
    tasyCocoonBreathe
    1.65s
    ease-in-out
    infinite;
}


.scanner-screen[data-visual-cue="hold"]
.cocoon-line,
.scanner-screen[data-visual-cue="back-hold"]
.cocoon-line,
.scanner-screen[data-visual-cue="profile-hold"]
.cocoon-line{
  animation:
    tasyHold
    1.8s
    ease-in-out
    infinite;
}


@keyframes tasyCocoonBreathe{
  0%,100%{
    opacity:.52;
  }

  50%{
    opacity:1;
  }
}


@keyframes tasyHold{
  0%,100%{
    opacity:.72;
  }

  50%{
    opacity:.94;
  }
}


/* ---------- PERFORMANCE ---------- */

@media(max-width:430px){

  .tasy-cue-depth{
    width:54%;
  }

  .tasy-safe-left{
    left:8%;
  }

  .tasy-safe-right{
    right:8%;
  }
}


@media(prefers-reduced-motion:reduce){

  .tasy-air-visual-layer *,
  .tasy-air-visual-layer *::before,
  .tasy-air-visual-layer *::after{
    animation:none !important;
  }
}


/* =========================================================
   TASY AIR — LANGUAGE CONTROL
   ========================================================= */

.language-toggle{
  min-width:78px;
  height:38px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  padding:0 12px;

  border:
    1px solid rgba(255,255,255,.42);

  border-radius:999px;

  background:
    rgba(250,247,243,.68);

  color:
    rgba(90,46,32,.48);

  -webkit-backdrop-filter:
    blur(10px);

  backdrop-filter:
    blur(10px);

  box-shadow:
    0 8px 28px rgba(58,31,21,.08);

  font-size:12px;
  font-weight:650;
  letter-spacing:.05em;
}

.language-toggle span[data-lang]{
  transition:
    color .22s ease,
    opacity .22s ease;
}

.language-toggle span[data-lang].active{
  color:var(--tasy-deep);
  opacity:1;
}

.language-divider{
  width:1px;
  height:14px;

  background:
    rgba(90,46,32,.18);
}


/* =========================================================
   TASY AIR — WELCOME
   ========================================================= */

.tasy-welcome{
  min-height:100dvh;

  overflow:auto;

  background:
    radial-gradient(
      circle at 76% 18%,
      rgba(232,217,197,.58) 0%,
      rgba(232,217,197,0) 34%
    ),
    radial-gradient(
      circle at 8% 74%,
      rgba(216,154,130,.10) 0%,
      rgba(216,154,130,0) 34%
    ),
    linear-gradient(
      180deg,
      #fcfaf7 0%,
      #f7f1ea 100%
    );

  color:var(--tasy-deep);
}


.tasy-welcome-shell{
  position:relative;

  width:min(100%,520px);
  min-height:100dvh;

  margin:0 auto;

  padding:
    calc(22px + env(safe-area-inset-top))
    22px
    calc(24px + env(safe-area-inset-bottom));

  display:flex;
  flex-direction:column;

  overflow:hidden;
}


.tasy-welcome-top{
  position:relative;
  z-index:5;

  display:flex;
  align-items:center;
  justify-content:space-between;

  min-height:46px;
}


.tasy-brand-lockup{
  display:flex;
  flex-direction:column;
  gap:3px;
}


.tasy-brand-name{
  color:var(--tasy-deep);

  font-size:25px;
  line-height:1;

  font-weight:450;

  letter-spacing:.24em;
}


.tasy-brand-product{
  color:var(--tasy-muted);

  font-size:8px;
  font-weight:650;

  letter-spacing:.28em;
}


.tasy-welcome-copy{
  position:relative;
  z-index:4;

  margin-top:38px;
}


.tasy-welcome-copy h1{
  max-width:420px;

  margin:0;

  color:var(--tasy-deep);

  font-size:
    clamp(38px,10vw,54px);

  line-height:.98;

  letter-spacing:-.045em;

  font-weight:520;
}


.tasy-welcome-copy p{
  max-width:410px;

  margin:
    18px
    0
    0;

  color:var(--tasy-muted);

  font-size:
    clamp(17px,4.4vw,20px);

  line-height:1.42;

  font-weight:430;
}


/* ---------- ABSTRACT PHONE / COCOON ---------- */

.tasy-welcome-visual{
  position:relative;

  width:100%;
  height:280px;

  flex:0 0 auto;

  margin:12px 0 4px;

  display:grid;
  place-items:center;

  isolation:isolate;
}


.tasy-welcome-aura{
  position:absolute;

  width:260px;
  height:260px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(232,217,197,.48) 0%,
      rgba(232,217,197,.18) 48%,
      rgba(232,217,197,0) 72%
    );

  filter:blur(5px);
}


.tasy-phone{
  position:relative;
  z-index:3;

  width:116px;
  height:222px;

  padding:7px;

  border-radius:30px;

  background:
    rgba(255,253,250,.64);

  border:
    1px solid rgba(90,46,32,.20);

  box-shadow:
    0 26px 70px rgba(58,31,21,.13);

  transform:
    rotate(2deg);

  -webkit-backdrop-filter:
    blur(12px);

  backdrop-filter:
    blur(12px);
}


.tasy-phone-camera{
  position:absolute;

  z-index:5;

  left:50%;
  top:8px;

  width:34px;
  height:7px;

  transform:translateX(-50%);

  border-radius:999px;

  background:
    rgba(90,46,32,.76);
}


.tasy-phone-screen{
  position:relative;

  width:100%;
  height:100%;

  overflow:hidden;

  border-radius:24px;

  background:
    linear-gradient(
      180deg,
      rgba(248,244,239,.66),
      rgba(232,217,197,.38)
    );
}


.tasy-phone-cocoon{
  position:absolute;

  left:50%;
  top:52%;

  width:59%;
  height:72%;

  transform:
    translate(-50%,-50%);

  border:
    1.6px solid
    rgba(201,123,92,.64);

  border-radius:
    48% 48% 42% 42% /
    22% 22% 12% 12%;

  box-shadow:
    0 0 24px rgba(201,123,92,.10);
}


.tasy-phone-cocoon::before{
  content:"";

  position:absolute;

  inset:-11px -9px;

  border:
    1px solid
    rgba(201,123,92,.16);

  border-radius:
    inherit;
}


.tasy-phone-axis{
  position:absolute;

  left:50%;
  top:12%;
  bottom:11%;

  width:1px;

  transform:translateX(-50%);

  background:
    linear-gradient(
      180deg,
      rgba(201,123,92,0),
      rgba(201,123,92,.26),
      rgba(201,123,92,0)
    );
}


.tasy-phone-floor{
  position:absolute;

  left:17%;
  right:17%;
  bottom:9%;

  height:12px;

  border:
    1px solid
    rgba(201,123,92,.40);

  border-radius:50%;
}


.tasy-scan-orbit{
  position:absolute;

  z-index:2;

  left:50%;
  top:50%;

  border:
    1px solid
    rgba(201,123,92,.18);

  border-radius:50%;
}


.orbit-a{
  width:220px;
  height:74px;

  transform:
    translate(-50%,-50%)
    rotate(-9deg);
}


.orbit-b{
  width:176px;
  height:55px;

  transform:
    translate(-50%,-50%)
    rotate(17deg);

  opacity:.68;
}


/* ---------- TWO ESSENTIAL RULES ---------- */

.tasy-welcome-rules{
  position:relative;
  z-index:4;

  display:grid;
  gap:10px;

  margin-top:2px;
}


.tasy-welcome-rule{
  display:grid;

  grid-template-columns:
    38px
    1fr;

  gap:12px;

  align-items:center;

  min-height:59px;

  padding:9px 12px;

  border:
    1px solid
    rgba(255,255,255,.64);

  border-radius:18px;

  background:
    rgba(255,252,248,.56);

  color:var(--tasy-text);

  font-size:16px;
  line-height:1.28;
  font-weight:480;

  -webkit-backdrop-filter:
    blur(9px);

  backdrop-filter:
    blur(9px);
}


.tasy-rule-number{
  width:36px;
  height:36px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:
    rgba(201,123,92,.08);

  color:var(--tasy-terracotta);

  font-size:11px;
  font-weight:700;

  letter-spacing:.08em;
}


/* ---------- START ---------- */

.tasy-welcome-start{
  position:relative;
  z-index:4;

  width:100%;

  margin-top:18px;

  min-height:58px;

  border-radius:20px;

  font-size:18px;
}


.tasy-welcome-camera-note{
  position:relative;
  z-index:4;

  max-width:330px;

  margin:
    12px
    auto
    0;

  color:
    rgba(90,46,32,.48);

  text-align:center;

  font-size:12px;
  line-height:1.35;
}


/* ---------- WELCOME LANGUAGE ---------- */

.tasy-welcome
.language-toggle{
  flex:0 0 auto;

  background:
    rgba(255,252,248,.60);

  border-color:
    rgba(90,46,32,.08);
}


/* ---------- SHORT SCREENS ---------- */

@media(max-height:720px){

  .tasy-welcome-shell{
    padding-top:
      calc(
        14px +
        env(safe-area-inset-top)
      );
  }

  .tasy-welcome-copy{
    margin-top:20px;
  }

  .tasy-welcome-copy h1{
    font-size:36px;
  }

  .tasy-welcome-copy p{
    margin-top:11px;
    font-size:16px;
  }

  .tasy-welcome-visual{
    height:212px;
  }

  .tasy-phone{
    width:92px;
    height:176px;
    border-radius:24px;
  }

  .tasy-phone-screen{
    border-radius:19px;
  }

  .tasy-welcome-rule{
    min-height:52px;
    font-size:14px;
  }

  .tasy-welcome-start{
    min-height:52px;
  }
}


/* =========================================================
   TASY AIR — PLACE PHONE
   ========================================================= */

.tasy-place-phone{
  min-height:100dvh;

  overflow:auto;

  background:
    radial-gradient(
      circle at 72% 26%,
      rgba(232,217,197,.58),
      rgba(232,217,197,0) 36%
    ),
    linear-gradient(
      180deg,
      #fcfaf7 0%,
      #f6efe7 100%
    );

  color:var(--tasy-deep);
}


.tasy-place-shell{
  position:relative;

  width:min(100%,520px);
  min-height:100dvh;

  margin:0 auto;

  padding:
    calc(22px + env(safe-area-inset-top))
    22px
    calc(24px + env(safe-area-inset-bottom));

  display:flex;
  flex-direction:column;
}


.tasy-place-top{
  display:flex;
  align-items:center;
  justify-content:space-between;

  min-height:46px;
}


.tasy-place-copy{
  margin-top:48px;
}


.tasy-place-eyebrow{
  margin-bottom:12px;

  color:var(--tasy-terracotta);

  font-size:11px;
  font-weight:700;

  letter-spacing:.16em;
  text-transform:uppercase;
}


.tasy-place-copy h1{
  margin:0;

  max-width:420px;

  color:var(--tasy-deep);

  font-size:
    clamp(40px,10vw,54px);

  line-height:.98;

  letter-spacing:-.045em;

  font-weight:520;
}


.tasy-place-copy p{
  max-width:420px;

  margin:18px 0 0;

  color:var(--tasy-muted);

  font-size:
    clamp(17px,4.4vw,20px);

  line-height:1.42;
}


/* ---------- PHONE VISUAL ---------- */

.tasy-place-visual{
  position:relative;

  height:310px;

  margin:12px 0 4px;

  display:grid;
  place-items:center;

  isolation:isolate;
}


.tasy-place-aura{
  position:absolute;

  width:280px;
  height:280px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(232,217,197,.52),
      rgba(232,217,197,.14) 54%,
      transparent 73%
    );
}


.tasy-place-device{
  position:relative;
  z-index:4;

  width:118px;
  height:226px;

  padding:7px;

  border-radius:30px;

  background:
    rgba(255,253,250,.72);

  border:
    1px solid rgba(90,46,32,.18);

  box-shadow:
    0 28px 72px rgba(58,31,21,.13);

  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}


.tasy-place-speaker{
  position:absolute;

  left:50%;
  top:8px;

  width:34px;
  height:7px;

  transform:translateX(-50%);

  border-radius:999px;

  background:
    rgba(90,46,32,.72);
}


.tasy-place-screen{
  position:relative;

  width:100%;
  height:100%;

  overflow:hidden;

  border-radius:24px;

  background:
    linear-gradient(
      180deg,
      rgba(250,247,243,.74),
      rgba(232,217,197,.32)
    );
}


.tasy-place-cocoon{
  position:absolute;

  left:50%;
  top:52%;

  width:58%;
  height:71%;

  transform:translate(-50%,-50%);

  border:
    1.5px solid rgba(201,123,92,.52);

  border-radius:
    48% 48% 42% 42% /
    22% 22% 12% 12%;
}


.tasy-place-axis{
  position:absolute;

  left:50%;
  top:18%;
  bottom:13%;

  width:1px;

  transform:translateX(-50%);

  background:
    linear-gradient(
      rgba(201,123,92,0),
      rgba(201,123,92,.24),
      rgba(201,123,92,0)
    );
}


/* support — generic surface, not a tripod */

.tasy-place-support{
  position:absolute;

  z-index:3;

  left:50%;
  bottom:29px;

  width:212px;

  transform:translateX(-50%);
}


.tasy-place-support-top{
  width:100%;
  height:9px;

  border-radius:999px;

  background:
    linear-gradient(
      90deg,
      rgba(90,46,32,.10),
      rgba(90,46,32,.20),
      rgba(90,46,32,.10)
    );
}


.tasy-place-support-base{
  width:126px;
  height:42px;

  margin:0 auto;

  background:
    linear-gradient(
      180deg,
      rgba(232,217,197,.46),
      rgba(232,217,197,.08)
    );

  clip-path:
    polygon(
      16% 0,
      84% 0,
      100% 100%,
      0 100%
    );
}


/* calm stability signal */

.tasy-place-stability{
  position:absolute;

  z-index:2;

  left:50%;
  bottom:7px;

  display:flex;
  gap:7px;

  transform:translateX(-50%);
}


.tasy-place-stability span{
  width:5px;
  height:5px;

  border-radius:50%;

  background:
    rgba(130,154,130,.58);
}


/* ---------- HINT ---------- */

.tasy-place-hint{
  max-width:430px;

  margin:2px auto 0;

  padding:14px 16px;

  border:
    1px solid rgba(255,255,255,.64);

  border-radius:19px;

  background:
    rgba(255,252,248,.56);

  color:var(--tasy-text);

  font-size:15px;
  line-height:1.35;

  text-align:center;

  -webkit-backdrop-filter:blur(9px);
  backdrop-filter:blur(9px);
}


.tasy-place-continue{
  width:100%;

  margin-top:18px;

  min-height:58px;

  border-radius:20px;

  font-size:18px;
}


/* ---------- COMPACT ---------- */

@media(max-height:720px){

  .tasy-place-shell{
    padding-top:
      calc(
        14px +
        env(safe-area-inset-top)
      );
  }

  .tasy-place-copy{
    margin-top:22px;
  }

  .tasy-place-copy h1{
    font-size:37px;
  }

  .tasy-place-copy p{
    margin-top:11px;
    font-size:16px;
  }

  .tasy-place-visual{
    height:230px;
  }

  .tasy-place-device{
    width:94px;
    height:180px;
    border-radius:24px;
  }

  .tasy-place-screen{
    border-radius:19px;
  }

  .tasy-place-support{
    width:174px;
    bottom:19px;
  }

  .tasy-place-hint{
    font-size:13px;
    padding:11px 13px;
  }

  .tasy-place-continue{
    min-height:52px;
  }
}


/* =========================================================
   TASY AIR — CAMERA PERMISSION
   ========================================================= */

.tasy-camera-permission{
  min-height:100dvh;

  overflow:auto;

  background:
    radial-gradient(
      circle at 50% 43%,
      rgba(232,217,197,.54),
      rgba(232,217,197,0) 37%
    ),
    linear-gradient(
      180deg,
      #fcfaf7 0%,
      #f6efe7 100%
    );

  color:var(--tasy-deep);
}


.tasy-permission-shell{
  width:min(100%,520px);
  min-height:100dvh;

  margin:0 auto;

  padding:
    calc(22px + env(safe-area-inset-top))
    22px
    calc(24px + env(safe-area-inset-bottom));

  display:flex;
  flex-direction:column;
}


.tasy-permission-top{
  display:grid;

  grid-template-columns:
    42px
    1fr
    auto;

  gap:10px;

  align-items:center;

  min-height:46px;
}


.tasy-brand-centered{
  justify-self:center;
  align-items:center;
}


.tasy-back-button{
  width:40px;
  height:40px;

  display:grid;
  place-items:center;

  padding:0;

  border:1px solid rgba(90,46,32,.08);
  border-radius:50%;

  background:rgba(255,252,248,.58);

  -webkit-backdrop-filter:blur(9px);
  backdrop-filter:blur(9px);
}


.tasy-back-button span{
  width:10px;
  height:10px;

  border-left:
    1.8px solid var(--tasy-deep);

  border-bottom:
    1.8px solid var(--tasy-deep);

  transform:
    translateX(2px)
    rotate(45deg);
}


.tasy-permission-copy{
  margin-top:48px;

  text-align:center;
}


.tasy-permission-copy h1{
  max-width:440px;

  margin:0 auto;

  color:var(--tasy-deep);

  font-size:
    clamp(40px,10vw,54px);

  line-height:.98;

  letter-spacing:-.045em;

  font-weight:520;
}


.tasy-permission-copy p{
  max-width:420px;

  margin:
    18px
    auto
    0;

  color:var(--tasy-muted);

  font-size:
    clamp(17px,4.4vw,20px);

  line-height:1.42;
}


/* ---------- CAMERA SYMBOL ---------- */

.tasy-camera-visual{
  position:relative;

  height:310px;

  margin:8px 0 2px;

  display:grid;
  place-items:center;

  isolation:isolate;
}


.tasy-camera-aura{
  position:absolute;

  width:285px;
  height:285px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(232,217,197,.56) 0%,
      rgba(232,217,197,.15) 52%,
      transparent 73%
    );
}


.tasy-camera-symbol{
  position:relative;

  z-index:3;

  width:184px;
  height:150px;

  display:grid;
  place-items:center;
}


.tasy-camera-body{
  position:relative;

  z-index:3;

  width:142px;
  height:104px;

  display:grid;
  place-items:center;

  border:
    1.5px solid rgba(201,123,92,.52);

  border-radius:28px;

  background:
    rgba(255,252,248,.48);

  box-shadow:
    0 24px 65px rgba(58,31,21,.10);

  -webkit-backdrop-filter:blur(11px);
  backdrop-filter:blur(11px);
}


.tasy-camera-top{
  position:absolute;

  z-index:2;

  top:13px;

  width:54px;
  height:24px;

  border:
    1.5px solid rgba(201,123,92,.42);

  border-bottom:0;

  border-radius:
    14px 14px 0 0;
}


.tasy-camera-lens{
  width:66px;
  height:66px;

  display:grid;
  place-items:center;

  border-radius:50%;

  border:
    1.5px solid rgba(201,123,92,.68);

  box-shadow:
    0 0 0 10px rgba(201,123,92,.05);
}


.tasy-camera-lens-core{
  width:31px;
  height:31px;

  border-radius:50%;

  background:
    radial-gradient(
      circle at 35% 32%,
      rgba(255,255,255,.84),
      rgba(201,123,92,.36) 32%,
      rgba(90,46,32,.64) 100%
    );
}


.tasy-camera-orbit{
  position:absolute;

  left:50%;
  top:50%;

  border:
    1px solid rgba(201,123,92,.18);

  border-radius:50%;
}


.orbit-camera-a{
  width:182px;
  height:57px;

  transform:
    translate(-50%,-50%)
    rotate(-10deg);
}


.orbit-camera-b{
  width:150px;
  height:44px;

  transform:
    translate(-50%,-50%)
    rotate(17deg);
}


/* ---------- PRIVACY NOTE ---------- */

.tasy-permission-note{
  display:grid;

  grid-template-columns:
    42px
    1fr;

  gap:12px;

  align-items:center;

  max-width:430px;

  margin:0 auto;

  padding:13px 14px;

  border:
    1px solid rgba(255,255,255,.64);

  border-radius:19px;

  background:
    rgba(255,252,248,.56);

  color:var(--tasy-text);

  font-size:15px;
  line-height:1.35;

  -webkit-backdrop-filter:blur(9px);
  backdrop-filter:blur(9px);
}


.tasy-permission-shield{
  position:relative;

  width:40px;
  height:40px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:
    rgba(130,154,130,.10);
}


.tasy-permission-shield::before{
  content:"";

  width:16px;
  height:19px;

  border:
    1.8px solid var(--tasy-sage);

  border-radius:
    9px 9px 11px 11px;

  clip-path:
    polygon(
      50% 0,
      100% 16%,
      88% 76%,
      50% 100%,
      12% 76%,
      0 16%
    );
}


.tasy-permission-actions{
  margin-top:auto;

  padding-top:20px;

  display:grid;
  gap:8px;
}


.tasy-permission-continue{
  width:100%;

  min-height:58px;

  border-radius:20px;

  font-size:18px;
}


.tasy-text-button{
  min-height:44px;

  padding:0 18px;

  border:0;

  background:transparent;

  color:var(--tasy-muted);

  font-size:14px;
  font-weight:550;
}


/* ---------- COMPACT ---------- */

@media(max-height:720px){

  .tasy-permission-shell{
    padding-top:
      calc(
        14px +
        env(safe-area-inset-top)
      );
  }

  .tasy-permission-copy{
    margin-top:22px;
  }

  .tasy-permission-copy h1{
    font-size:37px;
  }

  .tasy-permission-copy p{
    margin-top:11px;
    font-size:16px;
  }

  .tasy-camera-visual{
    height:225px;
  }

  .tasy-camera-symbol{
    transform:scale(.82);
  }

  .tasy-permission-note{
    font-size:13px;
    padding:10px 12px;
  }

  .tasy-permission-continue{
    min-height:52px;
  }
}


/* =========================================================
   TASY AIR — ONBOARDING COMPOSITION V2
   One viewport. More precision, less empty vertical space.
   ========================================================= */

.tasy-welcome,
.tasy-place-phone,
.tasy-camera-permission{
  min-height:100dvh;
  height:100dvh;
  overflow:hidden;
}


.tasy-welcome-shell,
.tasy-place-shell,
.tasy-permission-shell{
  box-sizing:border-box;

  min-height:100%;
  height:100%;

  padding-top:
    calc(16px + env(safe-area-inset-top));

  padding-bottom:
    calc(16px + env(safe-area-inset-bottom));
}


/* ---------- COMMON BRAND ---------- */

.tasy-welcome-top,
.tasy-place-top,
.tasy-permission-top{
  min-height:42px;
}


.tasy-brand-name{
  font-size:23px;
}


.language-toggle{
  height:36px;
  min-width:74px;
}


/* =========================================================
   WELCOME V2
   ========================================================= */

.tasy-welcome-copy{
  margin-top:
    clamp(20px,4.2vh,34px);
}


.tasy-welcome-copy h1{
  font-size:
    clamp(34px,8.5vw,46px);

  line-height:1;

  max-width:390px;
}


.tasy-welcome-copy p{
  margin-top:
    clamp(10px,1.8vh,15px);

  font-size:
    clamp(16px,4vw,18px);

  line-height:1.38;
}


.tasy-welcome-visual{
  height:
    clamp(170px,26vh,225px);

  margin:
    clamp(3px,1vh,8px)
    0
    0;
}


.tasy-phone{
  width:92px;
  height:176px;

  border-radius:25px;

  box-shadow:
    0 19px 48px rgba(58,31,21,.095);
}


.tasy-phone-screen{
  border-radius:19px;
}


.tasy-welcome-aura{
  width:220px;
  height:220px;

  opacity:.74;
}


.orbit-a{
  width:184px;
  height:58px;

  opacity:.50;
}


.orbit-b{
  width:146px;
  height:44px;

  opacity:.38;
}


/*
 Rules should read like quiet instructions,
 not like form cards.
*/

.tasy-welcome-rules{
  gap:0;

  border-top:
    1px solid rgba(90,46,32,.07);

  border-bottom:
    1px solid rgba(90,46,32,.07);
}


.tasy-welcome-rule{
  min-height:50px;

  padding:8px 4px;

  grid-template-columns:
    34px 1fr;

  border:0;
  border-radius:0;

  background:transparent;

  -webkit-backdrop-filter:none;
  backdrop-filter:none;

  font-size:14px;
  line-height:1.3;
}


.tasy-welcome-rule + .tasy-welcome-rule{
  border-top:
    1px solid rgba(90,46,32,.06);
}


.tasy-rule-number{
  width:30px;
  height:30px;

  background:
    rgba(201,123,92,.07);

  font-size:10px;
}


.tasy-welcome-start{
  min-height:54px;

  margin-top:
    clamp(12px,1.8vh,16px);

  border-radius:18px;

  box-shadow:
    0 10px 24px rgba(201,123,92,.18);
}


.tasy-welcome-camera-note{
  margin-top:8px;

  font-size:11px;

  /*
   Privacy is explained properly on the next
   permission screen, so this is deliberately quiet.
  */
  opacity:.72;
}


/* =========================================================
   PLACE PHONE V2
   ========================================================= */

.tasy-place-copy{
  margin-top:
    clamp(20px,4vh,34px);
}


.tasy-place-eyebrow{
  margin-bottom:9px;
}


.tasy-place-copy h1{
  font-size:
    clamp(35px,8.7vw,47px);
}


.tasy-place-copy p{
  margin-top:12px;

  font-size:
    clamp(16px,4vw,18px);

  line-height:1.38;
}


.tasy-place-visual{
  height:
    clamp(180px,29vh,245px);

  margin:4px 0 0;
}


.tasy-place-device{
  width:94px;
  height:180px;

  border-radius:24px;

  box-shadow:
    0 20px 50px rgba(58,31,21,.10);
}


.tasy-place-screen{
  border-radius:19px;
}


.tasy-place-aura{
  width:230px;
  height:230px;

  opacity:.76;
}


.tasy-place-support{
  width:170px;

  bottom:20px;
}


.tasy-place-hint{
  margin-top:0;

  padding:10px 14px;

  border-radius:17px;

  font-size:14px;
  line-height:1.3;
}


.tasy-place-continue{
  margin-top:12px;

  min-height:54px;

  border-radius:18px;

  box-shadow:
    0 10px 24px rgba(201,123,92,.18);
}


/* =========================================================
   CAMERA PERMISSION V2
   ========================================================= */

.tasy-permission-copy{
  margin-top:
    clamp(22px,4.2vh,36px);
}


.tasy-permission-copy h1{
  font-size:
    clamp(35px,8.7vw,47px);
}


.tasy-permission-copy p{
  margin-top:12px;

  font-size:
    clamp(16px,4vw,18px);

  line-height:1.38;
}


.tasy-camera-visual{
  height:
    clamp(190px,29vh,245px);

  margin:3px 0 0;
}


.tasy-camera-symbol{
  transform:scale(.84);
}


.tasy-camera-aura{
  width:235px;
  height:235px;

  opacity:.72;
}


.tasy-camera-body{
  box-shadow:
    0 18px 48px rgba(58,31,21,.09);

  background:
    rgba(255,252,248,.38);
}


.tasy-camera-orbit{
  opacity:.52;
}


.tasy-permission-note{
  padding:10px 13px;

  border-radius:17px;

  font-size:14px;

  line-height:1.3;
}


.tasy-permission-actions{
  margin-top:auto;

  padding-top:
    clamp(10px,1.8vh,16px);

  gap:3px;
}


.tasy-permission-continue{
  min-height:54px;

  border-radius:18px;

  box-shadow:
    0 10px 24px rgba(201,123,92,.18);
}


.tasy-text-button{
  min-height:38px;
}


/* =========================================================
   VERY SHORT PHONES
   Honor / older Android / compact Safari
   ========================================================= */

@media(max-height:700px){

  .tasy-welcome-copy,
  .tasy-place-copy,
  .tasy-permission-copy{
    margin-top:14px;
  }


  .tasy-welcome-copy h1,
  .tasy-place-copy h1,
  .tasy-permission-copy h1{
    font-size:32px;
  }


  .tasy-welcome-copy p,
  .tasy-place-copy p,
  .tasy-permission-copy p{
    font-size:15px;
  }


  .tasy-welcome-visual{
    height:145px;
  }


  .tasy-welcome-visual .tasy-phone{
    transform:
      rotate(2deg)
      scale(.76);
  }


  .tasy-place-visual{
    height:155px;
  }


  .tasy-place-device{
    transform:scale(.76);
  }


  .tasy-place-support{
    transform:
      translateX(-50%)
      scale(.78);
  }


  .tasy-camera-visual{
    height:155px;
  }


  .tasy-camera-symbol{
    transform:scale(.70);
  }


  .tasy-welcome-rule{
    min-height:44px;

    font-size:13px;
  }


  .tasy-place-hint,
  .tasy-permission-note{
    font-size:13px;
  }


  .tasy-welcome-start,
  .tasy-place-continue,
  .tasy-permission-continue{
    min-height:50px;
  }


  .tasy-welcome-camera-note{
    display:none;
  }
}


/* =========================================================
   TASY AIR — PREPARATION FLOW
   4 visual steps before camera
   ========================================================= */

.tasy-prep-screen{
  min-height:100dvh;
  height:100dvh;

  overflow:hidden;

  background:
    radial-gradient(
      circle at 72% 18%,
      rgba(232,217,197,.46),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      #fcfaf7 0%,
      #f7f1ea 100%
    );

  color:var(--tasy-deep);
}


.tasy-prep-shell{
  box-sizing:border-box;

  width:min(100%,520px);
  height:100%;

  margin:0 auto;

  padding:
    calc(14px + env(safe-area-inset-top))
    18px
    calc(14px + env(safe-area-inset-bottom));

  display:flex;
  flex-direction:column;
}


/* ---------- HEADER ---------- */

.tasy-prep-top{
  display:grid;

  grid-template-columns:
    42px
    1fr
    auto;

  gap:8px;

  align-items:center;

  min-height:42px;
}


.tasy-prep-top .tasy-brand-lockup{
  justify-self:center;
  align-items:center;
}


.tasy-prep-top .tasy-brand-name{
  font-size:22px;
}


.tasy-prep-top .tasy-brand-product{
  font-size:7px;
}


/* ---------- COPY ---------- */

.tasy-prep-copy{
  margin-top:
    clamp(12px,2.2vh,22px);

  text-align:center;
}


.tasy-prep-eyebrow{
  margin-bottom:7px;

  color:var(--tasy-terracotta);

  font-size:10px;
  font-weight:700;

  letter-spacing:.14em;

  text-transform:uppercase;
}


.tasy-prep-copy h1{
  margin:0;

  color:var(--tasy-deep);

  font-size:
    clamp(31px,8vw,43px);

  line-height:1;

  letter-spacing:-.04em;

  font-weight:540;
}


.tasy-prep-copy p{
  max-width:440px;

  margin:
    10px
    auto
    0;

  color:var(--tasy-muted);

  font-size:
    clamp(14px,3.8vw,17px);

  line-height:1.36;
}


/* =========================================================
   STEP 1 — LIGHT + PHONE
   ========================================================= */

.tasy-prep-hero{
  position:relative;

  flex:1 1 auto;

  min-height:155px;
  max-height:250px;

  margin:7px 0 4px;

  overflow:hidden;

  border-radius:26px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.42),
      rgba(232,217,197,.18)
    );

  border:
    1px solid rgba(255,255,255,.62);
}


.prep-window{
  position:absolute;

  right:7%;
  top:8%;

  width:36%;
  height:72%;

  display:grid;
  grid-template-columns:1fr 1fr;

  gap:4px;

  opacity:.72;
}


.prep-window span{
  border:
    1px solid rgba(201,123,92,.18);

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.66),
      rgba(245,230,202,.30)
    );
}


.prep-window::after{
  content:"";

  position:absolute;

  inset:-35% -35% -35% -70%;

  background:
    linear-gradient(
      120deg,
      rgba(255,241,202,.32),
      transparent 58%
    );

  transform:rotate(-6deg);
}


.prep-person{
  position:absolute;

  left:19%;
  bottom:12%;

  width:46px;
  height:112px;

  border:
    2px solid rgba(201,123,92,.46);

  border-radius:
    45% 45% 38% 38% /
    20% 20% 10% 10%;
}


.prep-person::before{
  content:"";

  position:absolute;

  left:50%;
  top:-30px;

  width:30px;
  height:30px;

  transform:translateX(-50%);

  border:
    2px solid rgba(201,123,92,.46);

  border-radius:50%;
}


.prep-phone{
  position:absolute;

  right:27%;
  bottom:17%;

  width:38px;
  height:72px;

  padding:3px;

  border:
    1.7px solid rgba(90,46,32,.42);

  border-radius:10px;

  background:
    rgba(255,252,248,.72);

  box-shadow:
    0 12px 30px rgba(58,31,21,.10);
}


.prep-phone-screen{
  width:100%;
  height:100%;

  border-radius:7px;

  border:
    1px solid rgba(201,123,92,.30);
}


.prep-support{
  position:absolute;

  right:18%;
  bottom:12%;

  width:105px;
  height:5px;

  border-radius:999px;

  background:
    rgba(90,46,32,.12);
}


/* =========================================================
   COMMON VISUAL CARDS
   ========================================================= */

.tasy-prep-cards{
  display:grid;

  gap:8px;

  margin-top:3px;
}


.tasy-prep-cards.three{
  grid-template-columns:
    repeat(3,1fr);
}


.tasy-prep-cards.two{
  grid-template-columns:
    repeat(2,1fr);
}


.tasy-prep-card{
  min-height:70px;

  padding:10px 8px;

  display:flex;
  flex-direction:column;

  align-items:center;
  justify-content:center;

  gap:6px;

  text-align:center;

  border:
    1px solid rgba(255,255,255,.70);

  border-radius:18px;

  background:
    rgba(255,252,248,.57);

  -webkit-backdrop-filter:
    blur(8px);

  backdrop-filter:
    blur(8px);

  box-shadow:
    0 8px 28px rgba(58,31,21,.035);
}


.tasy-prep-card strong{
  color:var(--tasy-text);

  font-size:12px;
  line-height:1.2;

  font-weight:520;
}


.prep-icon{
  width:30px;
  height:30px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:
    rgba(201,123,92,.08);

  color:var(--tasy-terracotta);

  font-size:20px;
  font-weight:450;
}


.tasy-prep-hint{
  margin-top:8px;

  padding:9px 12px;

  border:
    1px solid rgba(255,255,255,.62);

  border-radius:16px;

  background:
    rgba(255,252,248,.52);

  color:var(--tasy-muted);

  text-align:center;

  font-size:12px;
  line-height:1.28;
}


.tasy-prep-next{
  flex:0 0 auto;

  width:100%;

  min-height:52px;

  margin-top:10px;

  border-radius:18px;

  font-size:17px;

  box-shadow:
    0 10px 26px rgba(201,123,92,.17);
}


/* =========================================================
   STEP 2 — APPEARANCE
   ========================================================= */

.tasy-prep-body-visual{
  position:relative;

  flex:1 1 auto;

  min-height:185px;
  max-height:260px;

  width:100%;

  margin:5px auto 3px;
}


.prep-head{
  position:absolute;

  left:50%;
  top:7%;

  width:38px;
  height:45px;

  transform:translateX(-50%);

  border:
    2px solid rgba(201,123,92,.56);

  border-radius:48%;
}


.prep-head::after{
  content:"";

  position:absolute;

  left:4px;
  right:4px;
  top:-8px;

  height:18px;

  border-top:
    3px solid rgba(90,46,32,.46);

  border-radius:50%;
}


.prep-neck{
  position:absolute;

  left:50%;
  top:25%;

  width:14px;
  height:18px;

  transform:translateX(-50%);

  border-left:
    1.5px solid rgba(201,123,92,.44);

  border-right:
    1.5px solid rgba(201,123,92,.44);
}


.prep-torso{
  position:absolute;

  left:50%;
  top:30%;

  width:74px;
  height:90px;

  transform:translateX(-50%);

  border:
    2px solid rgba(201,123,92,.54);

  border-radius:
    45% 45% 28% 28% /
    20% 20% 12% 12%;
}


.prep-torso::after{
  content:"";

  position:absolute;

  left:11px;
  right:11px;
  top:42%;

  height:1px;

  background:
    rgba(201,123,92,.26);
}


.prep-leg{
  position:absolute;

  top:66%;

  width:18px;
  height:72px;

  border:
    2px solid rgba(201,123,92,.48);

  border-radius:
    10px 10px 7px 7px;
}


.prep-leg-left{
  left:calc(50% - 22px);
}


.prep-leg-right{
  right:calc(50% - 22px);
}


.body-callout{
  position:absolute;

  width:36px;
  height:36px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:
    rgba(255,252,248,.76);

  border:
    1px solid rgba(201,123,92,.22);

  color:var(--tasy-terracotta);

  font-size:20px;

  box-shadow:
    0 8px 22px rgba(58,31,21,.06);
}


.callout-hair{
  left:22%;
  top:8%;
}


.callout-face{
  right:22%;
  top:17%;
}


.callout-clothes{
  left:17%;
  top:48%;
}


.callout-feet{
  right:18%;
  bottom:4%;
}


/* =========================================================
   STEP 3 — NATURAL STANCE
   ========================================================= */

.tasy-natural-visual{
  position:relative;

  flex:1 1 auto;

  min-height:180px;
  max-height:250px;

  margin:5px auto 3px;

  width:100%;
}


.natural-cocoon{
  position:absolute;

  left:50%;
  top:50%;

  width:145px;
  height:205px;

  transform:
    translate(-50%,-50%);

  border:
    1.6px solid rgba(201,123,92,.32);

  border-radius:
    48% 48% 42% 42% /
    22% 22% 12% 12%;

  box-shadow:
    0 0 0 11px rgba(201,123,92,.035);
}


.natural-person{
  position:absolute;

  left:50%;
  top:50%;

  width:80px;
  height:185px;

  transform:
    translate(-50%,-50%);
}


.natural-head{
  position:absolute;

  left:50%;
  top:1px;

  width:34px;
  height:40px;

  transform:translateX(-50%);

  border:
    2px solid rgba(90,46,32,.48);

  border-radius:50%;
}


.natural-body{
  position:absolute;

  left:50%;
  top:42px;

  width:58px;
  height:83px;

  transform:
    translateX(-50%);

  border:
    2px solid rgba(90,46,32,.46);

  border-radius:
    42% 42% 28% 28% /
    18% 18% 10% 10%;
}


.natural-leg{
  position:absolute;

  top:122px;

  width:16px;
  height:62px;

  border:
    2px solid rgba(90,46,32,.42);

  border-radius:10px;
}


.natural-leg.left{
  left:21px;
}


.natural-leg.right{
  right:21px;
}


/* =========================================================
   STEP 4 — CHECKLIST
   ========================================================= */

.tasy-ready-shell{
  overflow:hidden;
}


.tasy-ready-copy{
  margin-bottom:8px;
}


.tasy-ready-list{
  display:grid;

  gap:7px;

  flex:1 1 auto;

  min-height:0;

  align-content:center;
}


.tasy-ready-item{
  position:relative;

  min-height:52px;

  padding:9px 11px;

  display:grid;

  grid-template-columns:
    34px
    1fr;

  gap:10px;

  align-items:center;

  border:
    1px solid rgba(255,255,255,.70);

  border-radius:17px;

  background:
    rgba(255,252,248,.60);

  color:var(--tasy-text);

  font-size:13px;
  line-height:1.28;

  cursor:pointer;

  user-select:none;

  transition:
    background .2s ease,
    border-color .2s ease,
    transform .12s ease;
}


.tasy-ready-item:active{
  transform:scale(.985);
}


.tasy-ready-item input{
  position:absolute;

  opacity:0;

  pointer-events:none;
}


.tasy-ready-box{
  position:relative;

  width:32px;
  height:32px;

  border-radius:50%;

  border:
    1.5px solid rgba(201,123,92,.46);

  background:
    rgba(201,123,92,.04);

  transition:
    background .2s ease,
    border-color .2s ease;
}


.tasy-ready-item input:checked
+ .tasy-ready-box{
  background:
    linear-gradient(
      135deg,
      #d89a82,
      #c97b5c
    );

  border-color:
    rgba(201,123,92,.75);
}


.tasy-ready-item input:checked
+ .tasy-ready-box::after{
  content:"";

  position:absolute;

  left:9px;
  top:7px;

  width:11px;
  height:6px;

  border-left:
    2px solid white;

  border-bottom:
    2px solid white;

  transform:rotate(-45deg);
}


.tasy-ready-item:has(input:checked){
  background:
    rgba(249,248,244,.74);

  border-color:
    rgba(130,154,130,.24);
}


#prepReadyContinue:disabled{
  opacity:.38;

  box-shadow:none;

  cursor:not-allowed;

  filter:saturate(.45);
}


#prepReadyContinue:not(:disabled){
  opacity:1;
}


/* =========================================================
   MOBILE 390 × 844
   ========================================================= */

@media(max-width:430px){

  .tasy-prep-shell{
    padding-left:16px;
    padding-right:16px;
  }


  .tasy-prep-cards.three{
    gap:6px;
  }


  .tasy-prep-card{
    min-height:65px;

    padding:8px 5px;
  }


  .tasy-prep-card strong{
    font-size:11px;
  }


  .prep-icon{
    width:28px;
    height:28px;

    font-size:18px;
  }


  .tasy-ready-item{
    min-height:49px;

    font-size:12.5px;
  }
}


/* =========================================================
   SHORT DEVICES
   ========================================================= */

@media(max-height:760px){

  .tasy-prep-copy{
    margin-top:8px;
  }


  .tasy-prep-copy h1{
    font-size:29px;
  }


  .tasy-prep-copy p{
    margin-top:6px;

    font-size:13px;
  }


  .tasy-prep-hero{
    min-height:130px;
  }


  .tasy-prep-body-visual,
  .tasy-natural-visual{
    min-height:145px;
  }


  .natural-cocoon{
    transform:
      translate(-50%,-50%)
      scale(.78);
  }


  .natural-person{
    transform:
      translate(-50%,-50%)
      scale(.78);
  }


  .tasy-prep-card{
    min-height:58px;
  }


  .tasy-prep-hint{
    margin-top:5px;

    padding:7px 10px;

    font-size:11px;
  }


  .tasy-prep-next{
    min-height:48px;

    margin-top:7px;
  }


  .tasy-ready-list{
    gap:5px;
  }


  .tasy-ready-item{
    min-height:44px;

    padding:6px 9px;

    font-size:11.5px;
  }


  .tasy-ready-box{
    width:28px;
    height:28px;
  }
}


/* =========================================================
   TASY AIR — PREPARATION ILLUSTRATIONS V2
   Semantic vector scenes
   ========================================================= */

.tasy-prep-svg{
  width:100%;
  height:100%;

  display:block;

  overflow:visible;
}


/* ---------- GENERIC BODY ---------- */

.tasy-body-fill{
  fill:rgba(255,250,246,.72);

  stroke:rgba(90,46,32,.48);
  stroke-width:1.7;

  vector-effect:non-scaling-stroke;
}


.tasy-body-shape{
  fill:rgba(255,250,246,.52);

  stroke:rgba(201,123,92,.62);
  stroke-width:1.8;

  vector-effect:non-scaling-stroke;
}


.tasy-body-line,
.tasy-body-soft-line,
.tasy-foot-line,
.tasy-face-line{
  fill:none;

  stroke:rgba(90,46,32,.48);
  stroke-width:1.55;

  stroke-linecap:round;
  stroke-linejoin:round;

  vector-effect:non-scaling-stroke;
}


.tasy-body-soft-line{
  stroke:rgba(201,123,92,.45);
}


.tasy-leg-line{
  stroke-width:1.7;
}


.tasy-hair-fill{
  fill:rgba(90,46,32,.21);

  stroke:rgba(90,46,32,.52);
  stroke-width:1.4;

  vector-effect:non-scaling-stroke;
}


.tasy-hair-line{
  fill:none;

  stroke:rgba(90,46,32,.53);
  stroke-width:2;

  stroke-linecap:round;

  vector-effect:non-scaling-stroke;
}


.tasy-garment{
  fill:rgba(216,154,130,.13);

  stroke:rgba(201,123,92,.62);
  stroke-width:1.4;

  vector-effect:non-scaling-stroke;
}


/* ---------- CALLOUT SYSTEM ---------- */

.tasy-callout-line{
  fill:none;

  stroke:rgba(201,123,92,.55);
  stroke-width:1.4;

  stroke-dasharray:3 4;

  stroke-linecap:round;

  vector-effect:non-scaling-stroke;
}


.tasy-callout-circle{
  fill:rgba(255,252,248,.84);

  stroke:rgba(201,123,92,.31);
  stroke-width:1.2;

  vector-effect:non-scaling-stroke;

  filter:
    drop-shadow(
      0 7px 10px
      rgba(58,31,21,.05)
    );
}


.tasy-callout-icon{
  fill:none;

  stroke:rgba(201,123,92,.88);
  stroke-width:1.65;

  stroke-linecap:round;
  stroke-linejoin:round;

  vector-effect:non-scaling-stroke;
}


.tasy-callout-slash{
  stroke:rgba(185,112,105,.72);
  stroke-width:1.5;

  stroke-linecap:round;

  vector-effect:non-scaling-stroke;
}


/* =========================================================
   STEP 1
   ========================================================= */

.tasy-prep-light{
  background:
    radial-gradient(
      circle at 78% 34%,
      rgba(245,230,168,.18),
      transparent 42%
    ),
    rgba(255,252,248,.34);
}


.tasy-window-frame{
  stroke:rgba(201,123,92,.21);
  stroke-width:1.2;

  vector-effect:non-scaling-stroke;
}


.tasy-window-line{
  stroke:rgba(201,123,92,.18);
  stroke-width:1;

  vector-effect:non-scaling-stroke;
}


.tasy-ray{
  stroke:rgba(245,210,143,.38);
  stroke-width:1.4;

  stroke-linecap:round;

  vector-effect:non-scaling-stroke;
}


.tasy-sun-core{
  fill:rgba(245,230,168,.43);

  stroke:rgba(201,123,92,.47);
  stroke-width:1.2;

  vector-effect:non-scaling-stroke;
}


.tasy-sun-rays line{
  stroke:rgba(201,123,92,.55);
  stroke-width:1.2;

  stroke-linecap:round;

  vector-effect:non-scaling-stroke;
}


.tasy-phone-body{
  fill:rgba(255,252,248,.90);

  stroke:rgba(90,46,32,.47);
  stroke-width:1.5;

  vector-effect:non-scaling-stroke;
}


.tasy-phone-screen{
  fill:rgba(232,217,197,.18);

  stroke:rgba(201,123,92,.35);
  stroke-width:1;

  vector-effect:non-scaling-stroke;
}


.tasy-phone-speaker{
  fill:rgba(90,46,32,.55);
}


.tasy-support-line{
  stroke:rgba(90,46,32,.22);
  stroke-width:2;

  stroke-linecap:round;

  vector-effect:non-scaling-stroke;
}


.tasy-support-shadow{
  stroke:rgba(90,46,32,.08);
  stroke-width:4;

  stroke-linecap:round;

  vector-effect:non-scaling-stroke;
}


.tasy-light-direction path{
  fill:none;

  stroke:rgba(201,123,92,.62);
  stroke-width:1.5;

  stroke-linecap:round;
  stroke-linejoin:round;

  vector-effect:non-scaling-stroke;
}


/* gentle light movement */

.tasy-ray{
  animation:
    tasyLightBreathe
    3.2s
    ease-in-out
    infinite;
}


@keyframes tasyLightBreathe{

  0%,100%{
    opacity:.28;
  }

  50%{
    opacity:.72;
  }
}


/* =========================================================
   STEP 2
   ========================================================= */

.tasy-prep-body-visual{
  border-radius:26px;

  overflow:hidden;
}


.tasy-appearance-svg{
  max-height:270px;
}


/* =========================================================
   STEP 3
   ========================================================= */

.tasy-natural-cocoon-line{
  fill:none;

  stroke:rgba(201,123,92,.44);
  stroke-width:1.55;

  vector-effect:non-scaling-stroke;
}


.tasy-natural-cocoon-soft{
  fill:none;

  stroke:rgba(216,154,130,.18);
  stroke-width:8;

  stroke-linecap:round;

  vector-effect:non-scaling-stroke;
}


.tasy-natural-svg{
  max-height:260px;
}


.tasy-natural-woman{
  transform-origin:center;
}


/*
 Tiny organic movement only in the cocoon halo.
 The woman herself stays still.
*/

.tasy-natural-cocoon-soft{
  animation:
    tasyCocoonSoftPulse
    3s
    ease-in-out
    infinite;
}


@keyframes tasyCocoonSoftPulse{

  0%,100%{
    opacity:.28;
  }

  50%{
    opacity:.62;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:430px){

  .tasy-prep-svg{
    max-width:100%;
  }


  .tasy-callout-circle{
    stroke-width:1;
  }
}


@media(prefers-reduced-motion:reduce){

  .tasy-ray,
  .tasy-natural-cocoon-soft{
    animation:none !important;
  }
}


/* === TASY APPROVED PREPARATION VISUALS === */

.tasy-approved-prep{
  width:min(760px,100%);
  margin:18px auto 18px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  align-items:start;
}

.tasy-approved-prep[data-count="1"]{
  grid-template-columns:minmax(0,340px);
  justify-content:center;
}

.tasy-approved-prep-card{
  min-width:0;
  border-radius:24px;
  overflow:hidden;
  background:rgba(255,255,255,.56);
  border:1px solid rgba(255,255,255,.78);
  box-shadow:
    0 18px 44px rgba(90,46,32,.055),
    inset 0 1px 0 rgba(255,255,255,.78);
}

.tasy-approved-prep-card img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}

@media(max-width:720px){
  .tasy-approved-prep:not([data-count="1"]){
    display:flex;
    width:auto;
    max-width:none;
    overflow-x:auto;
    gap:12px;
    margin:16px -18px 16px;
    padding:0 18px 8px;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }

  .tasy-approved-prep:not([data-count="1"])::-webkit-scrollbar{
    display:none;
  }

  .tasy-approved-prep:not([data-count="1"]) .tasy-approved-prep-card{
    flex:0 0 min(72vw,290px);
    scroll-snap-align:center;
  }

  .tasy-approved-prep[data-count="1"]{
    width:min(82vw,330px);
  }
}


/* === TASY FINAL PREP CARDS === */

.tasy-final-prep{
  width:min(900px,calc(100% - 32px));
  margin:22px auto 20px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.tasy-final-prep[data-count="1"]{
  width:min(390px,82vw);
  grid-template-columns:1fr;
}

.tasy-final-prep-card{
  min-width:0;
  background:transparent;
}

.tasy-final-prep-card img{
  width:100%;
  height:auto;
  display:block;
  border-radius:24px;
  object-fit:contain;
  box-shadow:0 18px 48px rgba(90,46,32,.07);
}

@media(max-width:720px){
  .tasy-final-prep{
    width:min(94%,560px);
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }

  .tasy-final-prep[data-count="3"] .tasy-final-prep-card:last-child{
    grid-column:1/-1;
    width:calc(50% - 6px);
    justify-self:center;
  }

  .tasy-final-prep[data-count="1"]{
    width:min(78vw,340px);
  }
}


/* === MVP 1.2 CAPTURE UI FINAL OVERRIDES === */

.scanner-screen{
  background:#0f0c0a;
}

.scanner-topbar{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:30;
  background:linear-gradient(180deg,rgba(12,9,7,.72),rgba(12,9,7,0));
  grid-template-columns:44px 1fr 44px 44px;
}

.camera-stage{
  grid-row:1 / -1;
  min-height:100dvh;
}

#video{
  object-fit:contain;
}

.guide-layer{
  --tasy-safe-left:7%;
  --tasy-safe-right:7%;
  --tasy-safe-top:7%;
  --tasy-safe-bottom:5.5%;
  --tasy-depth-width:48%;
}

.cocoon-line{
  stroke-width:4.6px;
  stroke:rgba(255,244,231,.92);
}

.scanner-screen[data-guidance="guidance"] .cocoon-line,
.scanner-screen[data-level="bad"] .cocoon-line,
.scanner-screen[data-level="warn"] .cocoon-line{
  stroke:rgba(255,112,86,.98);
}

.scanner-screen[data-guidance="ready"] .cocoon-line,
.scanner-screen[data-level="ready"] .cocoon-line{
  stroke:rgba(124,255,179,.98);
}

.scanner-screen[data-guidance="ready"] .cocoon-glow,
.scanner-screen[data-level="ready"] .cocoon-glow{
  stroke:rgba(41,255,148,.52);
}

.command-card{
  position:absolute;
  z-index:32;
  left:18px;
  right:18px;
  bottom:calc(18px + env(safe-area-inset-bottom));
  margin:0;
  min-height:88px;
  display:grid;
  grid-template-columns:1fr;
  place-items:center;
  padding:14px 18px 16px;
  border-radius:28px;
  background:linear-gradient(180deg,rgba(235,74,55,.94),rgba(170,31,27,.96));
  border:1px solid rgba(255,176,148,.55);
  box-shadow:0 18px 44px rgba(151,30,22,.38),0 0 38px rgba(255,80,55,.28);
}

.scanner-screen[data-guidance="ready"] .command-card,
.scanner-screen[data-level="ready"] .command-card{
  background:linear-gradient(180deg,rgba(24,186,96,.95),rgba(5,112,61,.97));
  border-color:rgba(142,255,190,.70);
  box-shadow:0 18px 44px rgba(5,112,61,.38),0 0 42px rgba(41,255,148,.36);
}

.command-icon,
.command-sub{
  display:none;
}

.command-copy{
  width:100%;
}

.command-title{
  text-align:center;
  color:#fff;
  font-size:clamp(42px,15vw,86px);
  line-height:.88;
  font-weight:950;
  letter-spacing:0;
  text-transform:uppercase;
  text-shadow:0 4px 18px rgba(0,0,0,.28);
  overflow-wrap:anywhere;
}

.direction-arrow{
  z-index:31;
  top:55%;
  font-size:clamp(112px,34vw,190px);
  font-weight:950;
  color:#fff;
  text-shadow:0 5px 28px rgba(0,0,0,.38),0 0 32px rgba(255,88,63,.65);
}

.countdown{
  z-index:34;
  width:clamp(154px,46vw,236px);
  height:clamp(154px,46vw,236px);
  border:8px solid rgba(255,244,231,.78);
  background:rgba(92,54,35,.38);
  color:#fff;
  font-size:clamp(92px,28vw,150px);
  font-weight:950;
}

.tasy-cue-depth{
  width:var(--tasy-depth-width);
  max-width:340px;
}

.tasy-safe-crown{
  left:var(--tasy-safe-left);
  right:var(--tasy-safe-right);
  top:var(--tasy-safe-top);
  height:clamp(46px,8vh,76px);
}

.tasy-safe-feet{
  left:var(--tasy-safe-left);
  right:var(--tasy-safe-right);
  bottom:var(--tasy-safe-bottom);
  height:clamp(42px,7vh,68px);
}

.tasy-safe-left,
.tasy-safe-right{
  top:var(--tasy-safe-top);
  bottom:var(--tasy-safe-bottom);
  width:clamp(24px,7vw,42px);
}

.tasy-safe-left{
  left:var(--tasy-safe-left);
}

.tasy-safe-right{
  right:var(--tasy-safe-right);
}

.foot-zone{
  left:var(--tasy-safe-left);
  right:var(--tasy-safe-right);
  bottom:var(--tasy-safe-bottom);
}

.scanner-screen[data-visual-cue="ready"] .tasy-cue-ready,
.scanner-screen[data-visual-cue="accepted"] .tasy-cue-ready,
.scanner-screen[data-visual-cue="success"] .tasy-cue-ready{
  opacity:1;
}

.tasy-cue-ready{
  left:50%;
  top:58%;
  width:clamp(112px,34vw,172px);
  height:clamp(112px,34vw,172px);
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  border-radius:50%;
  background:radial-gradient(circle at 50% 42%,rgba(32,221,122,.98),rgba(5,129,67,.96));
  box-shadow:0 0 0 6px rgba(195,255,216,.58),0 0 48px rgba(31,236,132,.70),0 24px 58px rgba(0,0,0,.32);
}

.tasy-ready-check{
  width:48%;
  height:28%;
  border-left:10px solid #fff;
  border-bottom:10px solid #fff;
  transform:translateY(-8%) rotate(-45deg);
}

.scanner-screen[data-visual-cue="turn-right"] .camera-stage::after,
.scanner-screen[data-visual-cue="turn-left"] .camera-stage::after,
.scanner-screen[data-visual-cue="turn-back"] .camera-stage::after,
.scanner-screen[data-visual-cue="turn-front"] .camera-stage::after,
.scanner-screen[data-visual-cue="complete"] .camera-stage::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:6;
  background:rgba(0,0,0,.56);
  pointer-events:none;
}

.scanner-screen[data-visual-cue="turn-right"] .command-card,
.scanner-screen[data-visual-cue="turn-left"] .command-card,
.scanner-screen[data-visual-cue="turn-back"] .command-card,
.scanner-screen[data-visual-cue="turn-front"] .command-card{
  background:transparent;
  border-color:transparent;
  box-shadow:none;
  bottom:calc(54px + env(safe-area-inset-bottom));
}

.scanner-screen[data-visual-cue="turn-right"] .command-title,
.scanner-screen[data-visual-cue="turn-left"] .command-title,
.scanner-screen[data-visual-cue="turn-back"] .command-title,
.scanner-screen[data-visual-cue="turn-front"] .command-title{
  font-size:clamp(28px,9vw,54px);
  line-height:1.05;
}

.guide-layer[data-angle="right_profile"] .cocoon-line,
.guide-layer[data-angle="left_profile"] .cocoon-line{
  stroke-width:4.2px;
}

.tasy-welcome{
  min-height:100dvh;
  background:linear-gradient(90deg,rgba(54,33,22,.72),rgba(54,33,22,.22) 48%,rgba(54,33,22,.08)),url('/static/assets/preparation-approved/source.png') center / cover no-repeat;
  color:#fff;
}

.tasy-welcome-shell{
  min-height:100dvh;
  justify-content:end;
}

.tasy-welcome-copy h1,
.tasy-welcome-copy p,
.tasy-brand-name,
.tasy-brand-product,
.tasy-welcome-rule,
.tasy-welcome-camera-note{
  color:#fff;
}

.tasy-welcome-start{
  background:linear-gradient(180deg,#d77559,#b84a37);
  color:#fff;
}

@media(max-width:430px){
  .command-card{
    left:14px;
    right:14px;
    min-height:82px;
    border-radius:24px;
  }

  .command-title{
    font-size:clamp(38px,16vw,72px);
  }
}