/* ═══════════════════════════════════════════════════════════════════════════
   style.css — SAARE RANG AUR NAAP YAHIN HAIN

   Sab se upar ka khana (:root) hi badalna parta hai — rang, gol koney, panel
   ki chaurai, sab wahin likha hai. Neeche ka hissa sirf un rangon ko istemal
   karta hai.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── rang ── */
  --void:        #07070c;   /* poore page ka peechhe wala rang */
  --void-2:      #0d0d15;   /* model ke peechhe halki chamak */
  --ink:         #f2f2f5;
  --muted:       #a6a6b0;
  --faint:       #6d6d78;

  --red:         #e8483c;
  --red-dim:     #c1372c;
  --red-deep:    #4d1a17;
  --red-deep-2:  #63201c;

  --gold:        #ffd54a;   /* haddiyon ke naam ka gol daayera */
  --green:       #4ad07a;   /* haath mil gaya */

  --btn:         #22222c;
  --btn-2:       #191921;
  --btn-txt:     #c9c9d4;

  --panel:       rgba(19,19,26,.72);
  --row:         #1b1b23;
  --row-hover:   #23232d;
  --line:        rgba(255,255,255,.075);
  --line-2:      rgba(255,255,255,.13);

  /* ── naap ── */
  --left-w:      302px;
  --right-w:     300px;
  --pad:         26px;
  --r-card:      15px;
  --r-btn:       11px;
  --r-row:       6px;

  --ease:        cubic-bezier(.22,1,.36,1);
  --ease-boot:   cubic-bezier(.62,.02,.18,1);

  --font: 'Century Gothic','Questrial','Futura','Avenir Next','Trebuchet MS',
          'Segoe UI',system-ui,sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--void); color:var(--ink);
  font:400 14px/1.55 var(--font);
  -webkit-font-smoothing:antialiased;
  overflow:hidden; overscroll-behavior:none;
}
button{ font:inherit; color:inherit; }

/* ── 3D ka canvas aur peechhe ki chamak ─────────────────────────────────── */
#scene{ position:fixed; inset:0; z-index:1; display:block; touch-action:none; cursor:grab; }
#scene:active{ cursor:grabbing; }

.glow{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse 62% 58% at 50% 44%, var(--void-2) 0%, transparent 72%);
}
/* Bohat gehre gradient screen par chhalley bana dete hain — halka sa daana
   daal dene se woh chhalley toot jate hain. */
.grain{
  position:fixed; inset:0; z-index:3; pointer-events:none; opacity:.03;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.fps{
  position:fixed; z-index:7; left:50%; bottom:calc(var(--pad) + 82px);
  transform:translateX(-50%);
  font-size:11px; letter-spacing:.08em; color:var(--faint);
  font-variant-numeric:tabular-nums; pointer-events:none;
}


/* ═══════════ BAAYAN PANEL ═══════════ */
/* Panel poori unchai leta hai. Agar andar ka saman screen se lamba ho jaye
   (jaise chhoti screen par chaar sliders) to ye KHUD scroll hota hai — warna
   neeche wali cheezein screen se bahar nikal kar ghayab ho jati hain aur
   sirf full screen mein nazar aati hain. */
.left{
  position:fixed; z-index:6; left:var(--pad); top:var(--pad); bottom:var(--pad);
  width:var(--left-w);
  display:flex; flex-direction:column; gap:12px;
  pointer-events:none;
  overflow-y:auto; overflow-x:hidden;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.18) transparent;
  overscroll-behavior:contain;
}
.left::-webkit-scrollbar{ width:6px; }
.left::-webkit-scrollbar-track{ background:transparent; }
.left::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.16); border-radius:3px; }
.left:hover::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.28); }
.left > *{ pointer-events:auto; flex-shrink:0; }

.title{ margin:34px 0 12px 10px; font-size:46px; line-height:1.02; font-weight:400; }
.lede{ margin:0 0 16px 12px; max-width:272px; color:#d5d5dc; font-size:13.5px; line-height:1.5; }

.card{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-card); padding:16px 16px 18px;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.card-title,.block-title{ margin:0 0 11px; font-size:15px; font-weight:400; color:var(--ink); }
/* Unwaan ke sath daayen kinare par ek chhota button (jaise Layers mein hai) */
.card-head{ display:flex; align-items:center; justify-content:space-between;
            gap:10px; margin:0 0 11px; }
.card-head .card-title{ margin:0; }
.block-title{ margin-top:18px; }

/* ── camera ka chhota parda ── */
.cam-box{
  position:relative; width:100%; aspect-ratio:4/3; overflow:hidden;
  border-radius:10px; border:1px solid var(--line-2);
  background:#0b0b11; display:grid; place-items:center;
}
.cam-box video,.cam-box canvas{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scaleX(-1);          /* aaine ki tarah — jo aap karte hain wahi dikhe */
}
.cam-box canvas{ object-fit:fill; }
body[data-cam="0"] .cam-box video,
body[data-cam="0"] .cam-box canvas{ opacity:0; }
.cam-off{ font-size:12px; color:var(--faint); letter-spacing:.05em; }
body[data-cam="1"] .cam-off{ display:none; }

.status{
  margin:10px 0 12px; font-size:12.5px; color:var(--muted);
  display:flex; align-items:center; gap:8px; min-height:1.3em;
}
.status::before{
  content:''; width:7px; height:7px; border-radius:50%;
  background:var(--faint); flex:none;
  transition:background .2s var(--ease), box-shadow .2s var(--ease);
}
.status[data-k="search"]::before{ background:var(--red); box-shadow:0 0 8px rgba(232,72,60,.7); }
.status[data-k="tracking"]::before{ background:var(--green); box-shadow:0 0 9px rgba(74,208,122,.75); }
.status[data-k="demo"]::before{ background:var(--gold); box-shadow:0 0 9px rgba(255,213,74,.7); }

.big{
  width:100%; height:42px; border:none; border-radius:var(--r-btn); cursor:pointer;
  background:linear-gradient(180deg,var(--btn),var(--btn-2));
  color:var(--btn-txt); font-size:15px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07), 0 1px 3px rgba(0,0,0,.45);
  transition:transform .16s var(--ease), filter .16s var(--ease), color .16s var(--ease);
}
.big + .big{ margin-top:8px; }
.big:hover{ filter:brightness(1.35); color:#fff; }
.big:active{ transform:translateY(1px); }
.big:disabled{ opacity:.55; cursor:default; }
.big[aria-pressed="true"]{
  background:linear-gradient(180deg,rgba(232,72,60,.26),rgba(232,72,60,.13));
  color:#ffd2cd;
  box-shadow:inset 0 0 0 1.6px var(--red), 0 0 16px rgba(232,72,60,.20);
}
.big.ghost{ height:36px; font-size:13.5px; background:rgba(255,255,255,.04);
            box-shadow:inset 0 0 0 1px var(--line-2); }
.big.ghost[aria-pressed="true"]{
  background:linear-gradient(180deg,rgba(255,213,74,.20),rgba(255,213,74,.08));
  color:#ffe9a8; box-shadow:inset 0 0 0 1.4px rgba(255,213,74,.75);
}

.note{ margin:10px 0 0; font-size:12px; line-height:1.45; color:var(--red); }
.note[data-calm="1"]{ color:var(--muted); }   /* sirf hidayat, ghalti nahin */

/* ── teen ka switch ── */
.seg{ display:flex; gap:6px; }
.hand-btn{
  flex:1; height:32px; border:none; border-radius:8px; cursor:pointer;
  background:var(--row); color:var(--btn-txt); font-size:12.5px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  transition:filter .16s var(--ease), color .16s var(--ease);
}
.hand-btn:hover{ filter:brightness(1.35); }
.hand-btn[aria-pressed="true"]{
  background:linear-gradient(180deg,rgba(232,72,60,.26),rgba(232,72,60,.12));
  color:#ffd2cd; box-shadow:inset 0 0 0 1.4px var(--red);
}

/* ── sliders ── */
.slide{ display:flex; align-items:center; gap:11px; margin:0 0 11px; }
.slide:last-child{ margin-bottom:0; }
.slide label{ font-size:12.5px; color:var(--muted); width:112px; flex:none; }
.sv{ font-size:12px; color:var(--faint); width:40px; text-align:right;
     font-variant-numeric:tabular-nums; }

input[type=range]{ -webkit-appearance:none; appearance:none; flex:1; height:16px;
                   background:none; cursor:pointer; min-width:0; }
input[type=range]::-webkit-slider-runnable-track{
  height:1.5px; background:rgba(255,255,255,.32); border-radius:2px; }
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; margin-top:-5.5px;
  width:12.5px; height:12.5px; border-radius:50%; background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.5); }
input[type=range]::-moz-range-track{ height:1.5px; background:rgba(255,255,255,.32); }
input[type=range]::-moz-range-thumb{ width:12.5px; height:12.5px; border:none;
                                     border-radius:50%; background:#fff; }

/* ── neeche wali patti: banane wale ka naam ── */
.byline{ margin-top:auto; padding:10px 16px 9px; }   /* logo aa jane se 4px kasi */
/* Pehle logo (bilkul baayein), us ke baad likhaai — ek hi qatar mein. */
.credit{ display:flex; align-items:center; justify-content:flex-start;
         gap:28px; text-decoration:none; }   /* logo se dugna faasla */
.credit-txt{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.credit-logo{ flex:none; height:32px; width:auto; opacity:.9;
              transition:opacity .18s var(--ease); }
.credit:hover .credit-logo{ opacity:1; }
.credit .by{ font-size:12px; color:var(--muted); }
.credit .by b{ font-weight:400; color:var(--ink); letter-spacing:.03em; }
.credit .url{ font-size:11px; color:var(--red); }
.credit:hover .by b{ color:var(--red); }
.credit:hover .url{ text-decoration:underline; }


/* ═══════════ NEECHE KI PATTI ═══════════ */
.quickviews{
  position:fixed; z-index:6; bottom:var(--pad);
  left:calc(var(--pad) + var(--left-w) + 22px);
  right:calc(var(--pad) + var(--right-w) + 22px);
  display:flex; align-items:center; gap:22px;
  padding:12px 24px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-card);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.qv-title{ color:var(--ink); font-size:14px; white-space:nowrap; }
.qv-list{ display:flex; gap:10px; flex:1; justify-content:space-between; }
.qv{
  display:flex; align-items:center; gap:8px; padding:6px 12px;
  background:var(--row); border:none; border-radius:9px; cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  transition:filter .16s var(--ease); flex:1; justify-content:center;
}
.qv:hover{ filter:brightness(1.35); }
.qv-dot{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.28); flex:none;
         transition:background .16s var(--ease); }
.qv-cap{ font-size:13px; color:var(--muted); white-space:nowrap; }
.qv[aria-pressed="true"]{ box-shadow:inset 0 0 0 1.4px var(--red);
                          background:linear-gradient(180deg,rgba(232,72,60,.22),rgba(232,72,60,.10)); }
.qv[aria-pressed="true"] .qv-dot{ background:var(--red); }
.qv[aria-pressed="true"] .qv-cap{ color:#ffd2cd; }


/* ═══════════ DAAYAN PANEL ═══════════ */
.right{
  position:fixed; z-index:6; right:var(--pad); top:var(--pad);
  width:var(--right-w); max-height:calc(100vh - var(--pad)*2 - 74px);
  display:flex; flex-direction:column;
  padding:20px 18px 16px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-card);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  /* Lights ka khana barh jane ke baad panel chhota par sakta hai — is liye
     ab scroll ho jata hai, kaat kar chhupata nahin. */
  overflow-x:hidden; overflow-y:auto;
}
.right::-webkit-scrollbar{ width:6px; }
.right::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.13); border-radius:3px; }

/* ── baazu hilane ke buttons ─────────────────────────────────────────────
   Ye teer aur gol button wahi hain jo Shoulder wali app mein hain, taake
   dono ek jaisi lagen. Naap badalni ho to sirf .dpad ki chaurai/oonchai
   aur .arrow ke width/height badlein.                                     */
.move{ flex:none; padding-bottom:10px; margin-bottom:9px;
       border-bottom:1px solid var(--line); }

.dpad{ position:relative; width:146px; height:92px; margin:2px auto 0; }
.arrow{
  position:absolute; padding:0; border:none; background:none; cursor:pointer;
  color:rgba(255,255,255,.42);
  transition:color .18s var(--ease), transform .18s var(--ease);
  -webkit-tap-highlight-color:transparent; touch-action:none;
}
.arrow svg{ width:100%; height:100%; display:block; fill:none; stroke:currentColor;
            stroke-width:1.6; stroke-linejoin:round; }
.arrow:hover{ color:rgba(255,255,255,.8); }
.arrow[aria-pressed="true"]{ color:var(--red); }
.arrow[aria-pressed="true"] svg{ fill:var(--red); }
/* NOTE: in par "left"/"right" naam ki class NAHIN lag sakti — wohi naam
   donon bare panels ke hain aur CSS unhein aapas mein mila deta hai.
   Is liye data-move se pehchante hain. */
.arrow[data-move="elbow+"]{ top:0;    left:50%; transform:translateX(-50%); width:40px; height:25px; }
.arrow[data-move="elbow-"]{ bottom:0; left:50%; transform:translateX(-50%); width:40px; height:25px; }
.arrow[data-move="twist-"]{ left:6px;  top:50%; transform:translateY(-50%); width:25px; height:40px; }
.arrow[data-move="twist+"]{ right:6px; top:50%; transform:translateY(-50%); width:25px; height:40px; }
.arrow[data-move="elbow+"][aria-pressed="true"]{ transform:translateX(-50%) translateY(-2px); }
.arrow[data-move="elbow-"][aria-pressed="true"]{ transform:translateX(-50%) translateY(2px); }
.arrow[data-move="twist-"][aria-pressed="true"]{ transform:translateY(-50%) translateX(-2px); }
.arrow[data-move="twist+"][aria-pressed="true"]{ transform:translateY(-50%) translateX(2px); }

/* beech wala gol button — sab kuch shuru wali pose par */
.rebtn{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:30px; height:30px; padding:0; border-radius:50%; cursor:pointer;
  border:1px solid var(--line-2); background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.55); display:grid; place-items:center;
  transition:color .18s var(--ease), background .18s var(--ease),
             border-color .18s var(--ease);
}
.rebtn svg{ width:15px; height:15px; fill:none; stroke:currentColor;
            stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.rebtn:hover{ color:#fff; background:rgba(232,72,60,.18); border-color:rgba(232,72,60,.5); }

.move-note{ margin:6px 0 0; text-align:center; font-size:11px; color:var(--faint); }

.jog{ margin-top:8px; display:flex; flex-direction:column; gap:2px; }
.jog-row{
  display:flex; align-items:center; gap:5px;
  background:var(--row); border-radius:var(--r-row); padding:2px 9px 2px 10px;
}
.jog-nm{ flex:1; font-size:12.5px; color:#c9c9d2; overflow:hidden;
         text-overflow:ellipsis; white-space:nowrap; }
/* Ab ye likha bhi ja sakta hai — Usman ne kaha "manual value dalne ka option
   do". Hadd se bahar ki qeemat khud hadd par aa jati hai. */
.jog-val{ width:48px; text-align:right; font-size:12px; color:var(--muted);
          font-variant-numeric:tabular-nums;
          background:none; border:none; padding:1px 0; margin:0;
          border-bottom:1px solid transparent; border-radius:0;
          font-family:inherit; -moz-appearance:textfield; }
.jog-val::-webkit-outer-spin-button,
.jog-val::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.jog-val:hover{ border-bottom-color:rgba(255,255,255,.18); }
.jog-val:focus{ outline:none; color:#fff; border-bottom-color:var(--red); }
.jog-b{
  width:22px; height:18px; padding:0; border:none; background:none; cursor:pointer;
  color:rgba(255,255,255,.42); flex:none;
  transition:color .16s var(--ease);
  -webkit-tap-highlight-color:transparent; touch-action:none;
}
.jog-b svg{ width:100%; height:100%; display:block; fill:none; stroke:currentColor;
            stroke-width:1.7; stroke-linejoin:round; }
.jog-b:hover{ color:rgba(255,255,255,.85); }

/* har qatar ka apna reset — sirf usi jorr ko aaram par le aata hai */
.jog-r{
  width:17px; height:17px; padding:0; border:none; background:none; cursor:pointer;
  color:rgba(255,255,255,.26); flex:none; margin-left:2px;
  transition:color .16s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.jog-r svg{ width:100%; height:100%; display:block; fill:none; stroke:currentColor;
            stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.jog-r:hover{ color:var(--red); }
.jog-b[aria-pressed="true"]{ color:var(--red); }
.jog-b[aria-pressed="true"] svg{ fill:var(--red); }

/* Layers ki qatar ab baaqi jagah leti hai aur khud scroll hoti hai — is se
   upar wale Movement ke buttons kabhi dab kar gayab nahin hote. */
/* Panel khud scroll karta hai (dekho .right), is liye har khana apne qad ka
   rehta hai — koi kisi ko dabata nahin. */
.layers{ display:flex; flex-direction:column; min-height:0; flex:none; }
.layers-head{ display:flex; align-items:center; justify-content:space-between; gap:10px;
              padding-bottom:9px; border-bottom:1px solid var(--line); margin-bottom:9px; }
.layers-head h3{ margin:0; font-size:19px; font-weight:400; }
.reset{
  border:none; border-radius:4px; cursor:pointer; padding:4px 9px;
  background:var(--red-dim); color:#fff; font-size:11px;
  transition:filter .16s var(--ease);
}
.reset:hover{ filter:brightness(1.15); }

/* Lights ka khana neeche aa jane se list bohat chhoti reh jati thi —
   is liye us ki kam se kam bulandi tay kar di. */
.tree{ height:200px; flex:none; overflow-y:auto; overflow-x:hidden; padding-right:4px;
       display:flex; flex-direction:column; gap:3px; }
.tree::-webkit-scrollbar{ width:6px; }
.tree::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.13); border-radius:3px; }

.node{
  display:flex; align-items:center; gap:0; width:100%;
  border:none; border-radius:var(--r-row); cursor:pointer; padding:0;
  background:var(--row); color:#c9c9d2;
  transition:background .16s var(--ease);
}
.node:hover{ background:var(--row-hover); }
.node .eye{ width:28px; flex:none; display:grid; place-items:center; align-self:stretch;
            border-right:1px solid rgba(0,0,0,.32); }
.node .eye svg{ width:13px; height:13px; fill:none; stroke:currentColor;
                stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.node .swatch{ width:9px; height:9px; border-radius:2px; margin:0 8px 0 9px; flex:none;
               box-shadow:0 0 0 1px rgba(0,0,0,.5); }
.node .nm{ flex:1; padding:7px 0; font-size:13px; overflow:hidden;
           text-overflow:ellipsis; white-space:nowrap; }
.node .cnt{ padding:0 10px 0 6px; font-size:11px; color:var(--faint);
            font-variant-numeric:tabular-nums; }
.caret{ width:16px; height:16px; flex:none; display:block; cursor:pointer;
        color:rgba(255,255,255,.38); transition:transform .15s var(--ease), color .15s var(--ease); }
.caret svg{ width:100%; height:100%; display:block; fill:none; stroke:currentColor;
            stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.caret:hover{ color:#fff; }
.caret[data-open="true"]{ transform:rotate(90deg); }
.caret-none{ cursor:default; }

/* band khane ki qataren — .node par display:flex laga hua hai, is liye sirf
   [hidden] kaafi nahin hota. */
.node[hidden]{ display:none !important; }

/* ── Lights ka khana ── */
/* .layers ka flex:1 is par nahin lagna chahiye — Lights ka khana apne
   qad ka hai, aur Layers wali list hi sikuRti/phailti hai. */
.lights-box{ flex:none !important; margin-top:10px; }
.lights-box .slide{ margin:0; }
.lights-box .slide{ padding:0 2px; }
/* Cinematic ka button Lights ki sar-patti mein hi rehta hai — neeche rakhne
   par panel se bahar nikal jata tha aur nazar hi nahin aata tha.           */
.lights-box .layers-head h3{ margin-right:auto; }
.lights-cine{ background:#2a2a34; }
.lights-cine[aria-pressed="true"]{ background:var(--red); color:#fff;
                                   box-shadow:0 0 0 1px rgba(232,72,60,.55); }
.lights-note{ margin:6px 2px 0; }

.node[data-sel="true"]{ background:#33222a; color:#fff;
                        box-shadow:inset 0 0 0 1px rgba(232,72,60,.55); }
.node[data-on="false"] .nm,
.node[data-on="false"] .eye,
.node[data-on="false"] .swatch{ opacity:.38; }

/* ── khane ke andar ke khane (Muscles ke neeche Bicep/Tricep/Forearm) ──
   Bas thora andar aur zara chhota — koi nayi cheez nahin, wohi .node.   */
.node[data-kid="true"]{ margin-left:16px; width:calc(100% - 16px); background:#17171e; }
.node[data-kid="true"]:hover{ background:#20202a; }
.node[data-kid="true"] .nm{ font-size:12.5px; padding:5px 0; }
.node[data-kid="true"] .eye{ width:25px; }
.node[data-kid="true"] .swatch{ width:7px; height:7px; }

/* teesri satah — ek ek muscle */
.node[data-kid="2"]{ margin-left:30px; width:calc(100% - 30px); background:#141419; }
.node[data-kid="2"]:hover{ background:#1d1d25; }
.node[data-kid="2"] .nm{ font-size:11.5px; padding:4px 0; color:#a9a9b4; }
.node[data-kid="2"] .eye{ width:23px; }
.node[data-kid="2"] .swatch{ width:6px; height:6px; }
.node[data-kid="2"] .cnt{ display:none; }
/* jab kuch bachche khule aur kuch band hon to maa-baap ki qatar aadhi
   roshan — poori tarah band nahin lagti */
.node[data-on="some"] .nm,
.node[data-on="some"] .eye,
.node[data-on="some"] .swatch{ opacity:.68; }

.opacity-row{
  display:flex; align-items:center; gap:11px;
  padding:13px 0 4px; margin:10px 0 0;
  border-top:1px solid var(--line);
}
.opacity-row label{ font-size:13px; color:var(--ink); flex:none; max-width:150px;
                    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.opacity-val{ font-size:12px; color:var(--muted); width:42px; text-align:right; }

.legend{ flex:none; margin-top:9px; padding-top:9px; border-top:1px solid var(--line); }
.legend p{ margin:0; font-size:11.5px; line-height:1.45; color:var(--faint); }


/* ═══════════ PANEL BAND / KHOL DENE WALE BUTTON ═══════════ */
.fold{
  position:fixed; z-index:8; padding:0; cursor:pointer;
  top:50%; width:17px; height:52px; border-radius:6px; margin-top:-26px;
  border:1px solid var(--line); background:var(--panel);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  color:rgba(255,255,255,.5); display:grid; place-items:center;
  transition:left .34s var(--ease), right .34s var(--ease),
             color .18s var(--ease), border-color .18s var(--ease);
}
.fold svg{ width:11px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7;
           stroke-linecap:round; stroke-linejoin:round;
           transition:transform .34s var(--ease); }
.fold:hover{ color:#fff; border-color:var(--line-2); }
#foldLeft { left:calc(var(--pad) + var(--left-w) + 7px); }
#foldRight{ right:calc(var(--pad) + var(--right-w) + 7px); }

body[data-fold-left="1"]  .left { transform:translateX(calc(-100% - var(--pad) - 6px)); }
body[data-fold-right="1"] .right{ transform:translateX(calc(100% + var(--pad) + 6px)); }
.left,.right{ transition:transform .34s var(--ease); }
body[data-fold-left="1"]  #foldLeft { left:7px; }
body[data-fold-right="1"] #foldRight{ right:7px; }
body[data-fold-left="1"]  #foldLeft svg,
body[data-fold-right="1"] #foldRight svg{ transform:rotate(180deg); }

body[data-fold-left="1"]  .quickviews{ left:calc(var(--pad) + 22px); }
body[data-fold-right="1"] .quickviews{ right:calc(var(--pad) + 22px); }
body[data-fold-right="1"] .tools{ right:calc(var(--pad) + 7px + 24px); }
.quickviews{ transition:left .34s var(--ease), right .34s var(--ease); }


/* ═══════════ VIEWPORT KE APNE TEEN BUTTON ═══════════ */
.tools{
  position:fixed; z-index:7; top:var(--pad);
  right:calc(var(--pad) + var(--right-w) + 20px);
  display:flex; gap:7px;
  transition:right .34s var(--ease);
}
.tool{
  width:34px; height:34px; padding:0; cursor:pointer; border-radius:9px;
  border:1px solid var(--line); background:var(--panel);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  color:rgba(255,255,255,.6); display:grid; place-items:center;
  transition:color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.tool svg{ width:17px; height:17px; fill:none; stroke:currentColor;
           stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.tool:hover{ color:#fff; border-color:var(--line-2); background:rgba(30,30,40,.85); }
.tool[aria-pressed="true"]{ color:var(--red); border-color:rgba(232,72,60,.5); }


/* ═══════════ MODEL PAR LAGE NAAM ═══════════ */
/* <svg> ko naap khud deni parti hai — sirf inset:0 se wo 300x150 par reh jata
   hai aur us se bahar ki har lakeer kat jati hai. */
.leaders{ position:fixed; inset:0; z-index:4; pointer-events:none;
          width:100%; height:100%; overflow:visible; }
.leaders .ring{ fill:none; stroke-width:1.3; }
.leaders .lead{ fill:none; stroke-width:1; }
.leaders .yellow{ stroke:rgba(255,213,74,.85); }
.leaders .red{ stroke:rgba(232,72,60,.9); stroke-width:1.6; }
.leaders .lead.yellow{ stroke:rgba(255,213,74,.42); }
.leaders .lead.red{ stroke:rgba(232,72,60,.5); stroke-width:1; }

.labels{ position:fixed; inset:0; z-index:5; pointer-events:none; }
.lab{
  position:absolute; top:0; left:0; white-space:nowrap;
  font-size:11.5px; letter-spacing:.01em; color:#e9e9ef;
  text-shadow:0 1px 6px rgba(0,0,0,.9);
  margin-top:-.62em;
}
.lab b{ font-weight:400; color:var(--faint); }
.lab[data-side="left"]{ text-align:right; }

.labels,.leaders{ transition:opacity .22s var(--ease); }
body[data-labels="0"] .labels,
body[data-labels="0"] .leaders{ opacity:0; }
body[data-boot="1"] .labels,
body[data-boot="1"] .leaders{ opacity:0; }


/* ═══════════ SHURU HOTE WAQT ═══════════ */
.boot{
  position:fixed; inset:0; z-index:20;
  display:grid; place-content:center; justify-items:center; gap:26px;
  background:
    radial-gradient(circle closest-side at 50% 46%,
      #15151f 0%, rgba(13,13,21,.6) 46%, rgba(7,7,12,0) 100%),
    var(--void);
  transition:opacity .7s var(--ease) .12s, visibility 0s linear .82s;
}
.boot[data-done="1"]{ opacity:0; visibility:hidden; }

.boot-mark{
  display:grid; justify-items:center; gap:14px;
  --lift:calc(.5 * (150px + 26px + 34px));
  transition:transform 1.15s var(--ease-boot), opacity .9s var(--ease),
             filter .9s var(--ease), letter-spacing 1.4s var(--ease-boot);
}
.boot-mark strong{
  font-weight:400; font-size:17px; letter-spacing:.2em; text-indent:.2em;
  color:var(--ink); white-space:nowrap;
  transition:letter-spacing 1.4s var(--ease-boot);
}
.boot-rule{
  width:132px; height:1px; opacity:.75; scale:1 1;
  background:linear-gradient(90deg,transparent,rgba(242,242,245,.5),transparent);
  transition:scale 1.1s var(--ease-boot) .32s, opacity .7s linear .32s;
}
.boot[data-phase="dark"] .boot-rule{ scale:0 1; opacity:0; transition-delay:0s; }

.boot[data-phase="dark"] .boot-mark,
.boot[data-phase="title"] .boot-mark{ transform:translateY(var(--lift)); }
.boot[data-phase="dark"] .boot-mark{ filter:blur(9px); opacity:0; letter-spacing:.34em; }
.boot[data-phase="dark"] .boot-mark strong{ letter-spacing:.44em; }

.boot[data-phase="dark"] .boot-dial, .boot[data-phase="title"] .boot-dial,
.boot[data-phase="dark"] .boot-copy, .boot[data-phase="title"] .boot-copy{
  opacity:0; transform:translateY(18px) scale(.96);
}
.boot-dial,.boot-copy{ transition:transform 1s var(--ease-boot), opacity .7s var(--ease); }

.boot[data-done="1"] .boot-mark{ transform:translateY(-14px); opacity:0; filter:blur(4px); }
.boot[data-done="1"] .boot-dial{ transform:scale(1.4); opacity:0; }
.boot[data-done="1"] .boot-copy{ transform:translateY(10px); opacity:0; }

.boot-dial{ position:relative; width:150px; height:150px; display:grid; place-items:center; }
.boot-dial svg{ position:absolute; inset:0; width:100%; height:100%;
                transform:rotate(-90deg); overflow:visible; }
.boot-track{ fill:none; stroke:rgba(255,255,255,.1); stroke-width:1; }
.boot-arc{
  fill:none; stroke:var(--red); stroke-width:1.5; stroke-linecap:round;
  stroke-dasharray:295.31; stroke-dashoffset:295.31;
  filter:drop-shadow(0 0 6px var(--red));
  transition:stroke-dashoffset .26s var(--ease);
}
.boot-pulse{
  position:absolute; inset:-14%; border-radius:50%;
  background:radial-gradient(circle closest-side,var(--red) 0%,transparent 100%);
  opacity:.1; animation:boot-breathe 2.8s ease-in-out infinite alternate;
}
@keyframes boot-breathe{
  from{ transform:scale(.86); opacity:.06; }
  to  { transform:scale(1.06); opacity:.16; }
}
.boot-pct{ position:relative; font-size:25px; letter-spacing:-.02em;
           font-variant-numeric:tabular-nums; color:var(--ink); }
.boot-pct sup{ font-size:.5em; top:-.85em; margin-left:.12em; color:var(--muted); }
.boot-copy{ display:grid; justify-items:center; gap:8px; text-align:center; }
.boot-copy span{ font-size:11px; letter-spacing:.14em; text-transform:uppercase;
                 color:var(--faint); }

@media (prefers-reduced-motion: reduce){
  .boot-pulse{ animation:none; opacity:.1; }
  .boot-arc{ transition:none; }
  .boot,.boot-dial,.boot-copy,.boot-mark,.boot-mark strong,.boot-rule{
    transition:opacity .2s linear; }
  .boot[data-phase="dark"] .boot-mark,
  .boot[data-phase="title"] .boot-mark{ transform:none; filter:none; letter-spacing:.2em; }
  .boot[data-phase="dark"] .boot-mark strong{ letter-spacing:.2em; }
  .boot[data-phase="dark"] .boot-dial,.boot[data-phase="title"] .boot-dial,
  .boot[data-phase="dark"] .boot-copy,.boot[data-phase="title"] .boot-copy{ transform:none; }
  .boot-rule{ scale:1 1; opacity:1; }
  .boot[data-done="1"] .boot-mark,
  .boot[data-done="1"] .boot-dial,
  .boot[data-done="1"] .boot-copy{ transform:none; filter:none; }
}

.fail{ position:fixed; inset:0; z-index:30; display:none; place-content:center;
       justify-items:center; text-align:center; gap:8px; padding:40px;
       background:var(--void); }
body[data-fail="1"] .fail{ display:grid; }
body[data-fail="1"] .boot{ opacity:0; visibility:hidden; }
.fail h2{ margin:0; font-size:22px; font-weight:400; color:var(--red); }
.fail p{ margin:0; max-width:52ch; color:var(--muted); font-size:13px; }


/* ═══════════ CHHOTI SCREEN ═══════════ */
@media (max-width:1500px){
  :root{ --left-w:270px; --right-w:272px; --pad:18px; }
  .title{ font-size:38px; margin-top:20px; }
  .slide label{ width:100px; font-size:12px; }
}
@media (max-width:1180px){
  .qv-title{ display:none; }
  .qv-cap{ font-size:12px; }
  .quickviews{ gap:12px; padding:10px 14px; }
}
@media (max-width:900px){
  .tools{ right:var(--pad); }
  .right{ display:none; }
  .quickviews{ left:var(--pad); right:var(--pad); }
  .leaders,.labels{ display:none; }
  #foldRight{ display:none; }
}

@media (max-height:1060px){
  .title{ font-size:34px; margin-top:8px; margin-bottom:8px; }
  .lede{ display:none; }
  .card{ padding:13px 14px 15px; }
  .cam-box{ aspect-ratio:16/10; }
  .slide{ margin-bottom:9px; }
  .card-title,.block-title{ margin-bottom:9px; }
  .block-title{ margin-top:14px; }
  .big{ height:38px; font-size:14px; }
  .big.ghost{ height:32px; font-size:13px; }
  .left{ gap:9px; }
  .status{ margin:8px 0 9px; }
  .byline{ padding:10px 14px 9px; }
}

/* Bohat kam unchi screen — camera ka parda aur chhota, taake teenon card
   aur chaaron slider bina scroll ke aa jayein. */
@media (max-height:880px){
  .cam-box{ aspect-ratio:16/9; }
  .title{ font-size:30px; margin-top:2px; margin-bottom:6px; }
  .card{ padding:11px 13px 13px; }
  .status{ margin:6px 0 7px; font-size:12px; }
  .slide{ margin-bottom:7px; }
  .slide label{ font-size:12px; }
  .byline{ padding:8px 13px 8px; }
  .credit .url{ display:none; }
}

/* Logo aa jane se baayen sutoon ko 4px ki kami par gayi. Sab se kam takleef
   wali jagah yahi thi — dabbon ke darmiyan ka faasla zara sa kam. Sirf choti
   screen par. (File ke AAKHIR mein hona lazmi hai, warna uper wale media
   query is ko daba dete hain.) */
@media (max-height:960px){
  .left{ gap:9px; }
  .byline{ padding:7px 14px 6px; }
}