/* ═══════════════════════════════════════════════════════════════════════════
   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 ka rang */
  --ink:         #f2f2f5;   /* aam likhaayi */
  --muted:       #a6a6b0;   /* halki likhaayi */
  --faint:       #6d6d78;   /* aur bhi halki */

  --red:         #e8483c;   /* asal laal — unwaan, chaukhat, chaalu button */
  --red-dim:     #c1372c;   /* laal ka gehra rukh (gradient ke liye) */
  --red-deep:    #4d1a17;   /* Layers ke bare khanon ka rang */
  --red-deep-2:  #63201c;

  /* Narangi — SIRF 3D model par chune hue system ki chaukhat ke liye.
     Panel mein kahin istemal nahin hota; wahan har jagah wahi laal chalta hai
     jo daayen panel ka hai, taake do alag rang aapas mein na larein. */
  --orange:      #ff8a2b;

  --btn:         #22222c;   /* buttons ka gehra rang (daayen panel jaisa) */
  --btn-2:       #191921;
  --btn-txt:     #c9c9d4;

  --panel:       rgba(19,19,26,.72);   /* dabbon ka rang */
  --panel-2:     rgba(24,24,33,.86);   /* andar wali lakeeron ka rang */
  --row:         #1b1b23;              /* Layers ki chhoti line */
  --row-hover:   #23232d;
  --line:        rgba(255,255,255,.075);  /* baal jaisi lakeer */
  --line-2:      rgba(255,255,255,.13);


  /* ── naap ── */
  --left-w:      302px;     /* baayen panel ki chaurai */
  --right-w:     336px;     /* daayen panel ki chaurai */
  --pad:         26px;      /* kinaron se faasla */
  --r-card:      15px;      /* dabbon ke gol koney */
  --r-btn:       11px;      /* buttons ke gol koney */
  --r-row:       6px;       /* Layers ki line ke gol koney */

  --ease:        cubic-bezier(.22,1,.36,1);
  --ease-boot:   cubic-bezier(.62,.02,.18,1);  /* shuruaati manzar ki harkat */

  /* Century Gothic Windows par pehle se maujood hai aur mock ki likhaayi
     bilkul yahi hai. Na mile to agla naam khud chun liya jayega. */
  --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; }
body[data-hover="1"] #scene{ cursor:pointer; }

.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");
}

/* ═══════════ BAAYAN PANEL ═══════════ */
/* Sutoon poori unchai leta hai (top se bottom tak), sirf apne content jitna
   nahin. Isi wajah se neeche wali "developed by" wali patti hamesha ek hi
   jagah — sab se neeche — baithi rehti hai. Pehle sutoon ki unchai content se
   banti thi, to screen jitni lambi hoti, patti utni hi upar reh jati; full
   screen mein ye foran nazar aata tha.
   Bachhon ko sikuRne nahin diya jata: kam unchi screen ka intezaam neeche
   wali height wali qaidon mein hai, sikuR kar nahin. */
.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:0;
  pointer-events:none;
}
.left > *{ pointer-events:auto; flex-shrink:0; }

.eyebrow{
  margin:52px 0 12px 12px; color:var(--red);
  font-size:15px; letter-spacing:.055em; font-weight:400;
}
.title{
  margin:0 0 16px 10px; font-size:48px; line-height:1.02;
  font-weight:400; letter-spacing:-.005em;
}
.lede{
  margin:0 0 26px 12px; max-width:270px;
  color:#d5d5dc; font-size:14px; line-height:1.5;
}

.card{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-card); padding:18px 16px 20px;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.card-title,.block-title{
  margin:0 0 12px; font-size:15px; font-weight:400; color:var(--ink);
}
.block-title{ margin-top:24px; }

/* ── system buttons ── */
.sys-list{ display:flex; flex-direction:column; gap:9px; }
/* Buttons ab gehre hain, halke nahin — halke safaid buttons kaale page par
   aankh kheench lete the aur model se dhyan hata dete the. */
.sys{
  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; letter-spacing:.005em;
  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);
}
.sys:hover{ filter:brightness(1.35); color:#fff; }
.sys:active{ transform:translateY(1px); }
/* Chuna hua system: wahi laal jo daayen panel mein hai. Usi button par dobara
   click karne se chunao hat jata hai (phir kuch bhi peechhe nahin jata, aur
   model par se chaukhat bhi hat jati hai). */
.sys[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);
}
.sys[aria-pressed="true"]:hover{ filter:brightness(1.16); }

/* ── rotation dial ── */
.dial-wrap{ display:flex; justify-content:center; padding:2px 0 4px; }
.dial{
  position:relative; width:132px; height:132px; cursor:grab;
  display:grid; place-items:center;
}
.dial:active{ cursor:grabbing; }
.dial-svg{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.dial-track{ fill:none; stroke:rgba(255,255,255,.14); stroke-width:3; }
.dial-arc{
  fill:none; stroke:var(--red); stroke-width:5; stroke-linecap:round;
  stroke-dasharray:326.7; stroke-dashoffset:326.7;
  transition:stroke-dashoffset .08s linear;
}
.dial-cube{ position:absolute; top:27%; width:23%; height:23%; color:#e9e9ee; }
.dial-cube svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.1;
                stroke-linejoin:round; stroke-linecap:round; }
.dial-num{ position:absolute; top:57%; font-size:19px; color:var(--ink); }

/* ── movement pad ── */
.dpad{
  position:relative; width:150px; height:104px; 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), filter .18s var(--ease);
}
.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 (teer poore
   page par kahin aur ja kar baith jata hai). Is liye data-move se pehchante hain. */
.arrow[data-move="up"]   { top:0;    left:50%; transform:translateX(-50%); width:44px; height:28px; }
.arrow[data-move="down"] { bottom:0; left:50%; transform:translateX(-50%); width:44px; height:28px; }
.arrow[data-move="left"] { left:6px;  top:50%; transform:translateY(-50%); width:28px; height:44px; }
.arrow[data-move="right"]{ right:6px; top:50%; transform:translateY(-50%); width:28px; height:44px; }
.arrow[data-move="up"][aria-pressed="true"]   { transform:translateX(-50%) translateY(-2px); }
.arrow[data-move="down"][aria-pressed="true"] { transform:translateX(-50%) translateY(2px); }
.arrow[data-move="left"][aria-pressed="true"] { transform:translateY(-50%) translateX(-2px); }
.arrow[data-move="right"][aria-pressed="true"]{ transform:translateY(-50%) translateX(2px); }

/* beech wala gol button — pose wapas aaram ki halat 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.8; stroke-linecap:round; stroke-linejoin:round; }
.rebtn:hover{ color:#fff; background:rgba(255,255,255,.11); border-color:rgba(255,255,255,.3); }
.rebtn:active{ transform:translate(-50%,-50%) scale(.92); }

.move-note{
  margin:8px 0 0; text-align:center; font-size:12px; color:var(--faint);
  letter-spacing:.02em; min-height:1.2em;
}

/* ── neeche wala chhota panel: banane wale ka naam ─────────────────────── */
/* margin-top:auto — bachi hui saari jagah upar chali jati hai, is liye ye
   patti hamesha sutoon ke sab se neeche baithti hai, us ke upar kitna bhi
   kuch ho ya na ho. Us ka neeche wala kinara Quick Views wali patti ke
   barabar aata hai. */
.byline{ margin-top:auto; padding:13px 16px 12px; }
.credit{ display:flex; flex-direction:column; gap:1px; text-decoration:none; }
.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; }

/* ═══════════ TEEN PANEL BAND / KHOL DENE WALE BUTTON ═══════════ */
/* Panel khud transform se bahar khisak jata hai; button apni jagah fixed hai,
   is liye band hone ke baad bhi us par click kar ke wapas khola ja sakta hai. */
.fold{
  position:fixed; z-index:8; padding:0; cursor:pointer;
  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), bottom .34s var(--ease),
             color .18s var(--ease), border-color .18s var(--ease);
}
.fold svg{ 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,#foldRight{ top:50%; width:17px; height:52px; border-radius:6px; margin-top:-26px; }
#foldLeft svg,#foldRight svg{ width:11px; height:18px; }
#foldLeft { left:calc(var(--pad) + var(--left-w) + 7px); }
#foldRight{ right:calc(var(--pad) + var(--right-w) + 7px); }
#foldBottom{
  left:50%; margin-left:-26px; width:52px; height:17px; border-radius:6px;
  bottom:calc(var(--pad) + 100px);
}
#foldBottom svg{ width:18px; height:11px; }

body[data-fold-left="1"]   .left       { transform:translateX(calc(-100% - var(--pad) - 4px)); }
body[data-fold-right="1"]  .right      { transform:translateX(calc(100% + var(--pad) + 4px)); }
body[data-fold-bottom="1"] .quickviews { transform:translateY(calc(100% + var(--pad) + 8px)); }
.left,.right,.quickviews{ transition:transform .34s var(--ease); }

body[data-fold-left="1"]   #foldLeft  { left:7px; }
body[data-fold-right="1"]  #foldRight { right:7px; }
body[data-fold-bottom="1"] #foldBottom{ bottom:7px; }
body[data-fold-left="1"]   #foldLeft svg,
body[data-fold-right="1"]  #foldRight svg,
body[data-fold-bottom="1"] #foldBottom svg{ transform:rotate(180deg); }

/* baayan panel band ho to upar wale teen button bhi saath khisak jate hain */
body[data-fold-right="1"] .tools{ right:calc(var(--pad) + 7px + 24px); }

/* ═══════════ 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:26px;
  padding:14px 26px;
  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:15px; white-space:nowrap; }
.qv-list{ display:flex; gap:14px; flex:1; justify-content:space-between; }
.qv{
  display:flex; flex-direction:column; align-items:center; gap:7px;
  background:none; border:none; padding:0; cursor:pointer;
}
.qv-thumb{
  width:96px; height:64px; border-radius:9px;
  border:1px solid var(--line-2); background:rgba(255,255,255,.03);
  background-size:contain; background-repeat:no-repeat; background-position:center;
  transition:border-color .18s var(--ease), background-color .18s var(--ease);
}
.qv:hover .qv-thumb{ border-color:rgba(255,255,255,.3); background-color:rgba(255,255,255,.055); }
.qv-cap{ font-size:13px; color:var(--muted); white-space:nowrap; transition:color .18s var(--ease); }
.qv[aria-pressed="true"] .qv-thumb{ border-color:var(--red); box-shadow:0 0 0 1px rgba(232,72,60,.35); }
.qv[aria-pressed="true"] .qv-cap{ color:var(--red); }

/* ═══════════ 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);
  display:flex; flex-direction:column;
  padding:22px 18px 18px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-card);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  overflow:hidden;
}

.info-name{
  margin:0 0 2px; font-size:29px; font-weight:400; line-height:1.15;
  display:flex; align-items:center; gap:10px;
}
.info-name .sq{ width:9px; height:9px; background:var(--red); flex:none; }
.info-kind{ margin:0 0 12px 19px; color:var(--red); font-size:17px; }
.info-text{ margin:0 0 16px 19px; color:#d3d3da; font-size:13.5px; line-height:1.5; }
.info-head{ margin:0 0 9px 19px; font-size:14px; font-weight:700; color:var(--ink); }
.funcs{ margin:0 0 18px; padding:0 0 0 19px; list-style:none;
        display:flex; flex-direction:column; gap:7px; }
.funcs li{ position:relative; padding-left:16px; color:#d3d3da; font-size:13.5px; }
.funcs li::before{
  content:''; position:absolute; left:0; top:.5em;
  width:7px; height:7px; background:var(--red);
}

/* ── opacity ── */
.opacity-row{
  display:flex; align-items:center; gap:12px;
  padding:12px 0 14px; margin:0 0 4px 19px;
  border-top:1px solid var(--line);
}
.opacity-row label{ font-size:14px; color:var(--ink); }
.opacity-val{ font-size:13px; color:var(--muted); width:42px; text-align:right; }
input[type=range]{
  -webkit-appearance:none; appearance:none; flex:1; height:16px;
  background:none; cursor:pointer;
}
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; }

/* ── layers ── */
.layers{ display:flex; flex-direction:column; min-height:0; flex:1; margin-left:19px; }
.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); }

.tree{ 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;
       text-align:left; transition:background .16s var(--ease); }
.node .eye{
  width:26px; flex:none; display:grid; place-items:center; align-self:stretch;
  border-right:1px solid rgba(0,0,0,.28);
}
.node .eye svg{ width:13px; height:13px; fill:none; stroke:currentColor;
                stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.node .nm{ flex:1; padding:5px 8px; font-size:12.5px; overflow:hidden;
           text-overflow:ellipsis; white-space:nowrap; }
/* chevron ab apna alag button hai — sirf khana kholta/band karta hai.
   Naam par click karne se poora khana CHUN liya jata hai. */
.node .chev{
  width:24px; flex:none; align-self:stretch; margin:3px 3px 3px 0;
  display:grid; place-items:center; border-radius:4px;
  background:rgba(0,0,0,.26); box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);
  transition:background .16s var(--ease);
}
.node .chev:hover{ background:rgba(0,0,0,.45); }
.node .chev svg{ width:9px; height:9px; fill:currentColor; transition:transform .18s var(--ease); }

.node.group{ background:linear-gradient(180deg,var(--red-deep-2),var(--red-deep));
             color:#f0cfca; margin-top:5px; }
.node.group:first-child{ margin-top:0; }
.node.group:hover{ filter:brightness(1.16); }
.node.group[data-open="false"] .chev svg{ transform:rotate(-90deg); }
/* poora khana chuna hua ho to us par bhi wahi laal chaukhat */
.node.group[data-sel="true"]{ box-shadow:inset 0 0 0 1px rgba(232,72,60,.75); color:#fff; }

.node.leaf{ background:var(--row); color:#c9c9d2; margin-left:20px;
            width:calc(100% - 20px); }
.node.leaf:hover{ background:var(--row-hover); }
.node.leaf[data-sel="true"]{ background:#33222a; color:#fff;
                             box-shadow:inset 0 0 0 1px rgba(232,72,60,.55); }
.node[data-on="false"] .nm{ opacity:.4; }
.node[data-on="false"] .eye{ opacity:.4; }
.group-body[hidden]{ display:none; }
.group-body{ display:flex; flex-direction:column; gap:3px; margin-top:3px; }

/* ═══════════ 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;
}
.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); }
.tool[data-busy="1"]{ color:var(--red); }

/* ═══════════ 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 (nazar hi nahin aati). */
.leaders{ position:fixed; inset:0; z-index:4; pointer-events:none;
          width:100%; height:100%; overflow:visible; }
.leaders line{ stroke:rgba(255,255,255,.75); stroke-width:1; }
.leaders rect{ fill:none; stroke:rgba(255,255,255,.85); stroke-width:1.2; }
.leaders .hot line{ stroke:var(--red); }
.leaders .hot rect{ stroke:var(--red); }

.labels{ position:fixed; inset:0; z-index:5; pointer-events:none; }

/* Jab model ya camera hil raha ho to naam chhup jate hain aur ruknay par
   wapas aa jate hain — warna lakeerein model ke peechhe ghisatti nazar aati
   hain. Band karne par (Hide labels) bhi yahi rasta istemal hota hai. */
.labels,.leaders{ transition:opacity .22s var(--ease); }
body[data-moving="1"] .labels,
body[data-moving="1"] .leaders,
body[data-labels="0"] .labels,
body[data-labels="0"] .leaders{ opacity:0; }
body[data-labels="0"] .lab{ pointer-events:none; }
.lab{
  position:absolute; white-space:nowrap; font-size:14.5px; color:#fff;
  transform:translateY(-50%); cursor:pointer; pointer-events:auto;
  text-shadow:0 1px 6px rgba(0,0,0,.85);
  transition:color .16s var(--ease);
}
.lab[data-side="left"]{ transform:translate(-100%,-50%); }
.lab[data-hot="true"]{ color:var(--red); }

/* pointer ke saath chalne wala chhota naam */
.tag{
  position:fixed; z-index:7; pointer-events:none; opacity:0;
  transform:translate(14px,-50%); font-size:12px; letter-spacing:.02em;
  padding:4px 9px; border-radius:6px; color:#fff;
  background:rgba(12,12,18,.9); border:1px solid var(--line-2);
  transition:opacity .14s var(--ease);
}
.tag[data-on="1"]{ opacity:1; }

/* ═══════════ SHURU HOTE WAQT ═══════════ */
/* Do saanson mein khulta hai. Pehle naam akela, beech mein — dhundla aur
   zyada khula hua — wahin apni jagah saaf hota hai. Phir apni seat par upar
   chala jata hai aur uske neeche pahiya aa kar baith jata hai.
   Naam LAYOUT se nahin hilta, sirf transform se: agar wo jagah badalta to
   neeche pahiya har frame par khisakta, aur yahi ek cheez poori harkat ko
   kharab kar deti hai. */
.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;
  /* neeche jitna kuch hai uska aadha — utna hi neeche se shuru hota hai */
  --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);
}
/* beech se bahar ki taraf khinchti hui baal jaisi ek lakeer */
.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; }

/* Teen saans, ek hi lafz badal kar. "dark" wo haalat hai jis mein page
   parosa jata hai aur jo sirf ek frame ke liye nazar aati hai. */
.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); }

/* jate waqt pahiya sirf ghayab nahin hota — dekhne wale ke paas se guzarta hai */
.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);              /* sweep 12 baje se shuru ho */
  overflow:visible;
}
.boot-track{ fill:none; stroke:rgba(255,255,255,.1); stroke-width:1; }
.boot-arc{
  fill:none; stroke:var(--boot-hue,var(--red)); stroke-width:1.5; stroke-linecap:round;
  stroke-dasharray:295.31; stroke-dashoffset:295.31;
  filter:drop-shadow(0 0 6px var(--boot-hue,var(--red)));
  transition:stroke-dashoffset .26s var(--ease);
}
/* pahiya saans leta rehta hai — sust connection par bhi manzar zinda lagta hai */
.boot-pulse{
  position:absolute; inset:-14%; border-radius:50%;
  background:radial-gradient(circle closest-side,var(--boot-hue,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);
  font-variant-numeric:tabular-nums;
}

@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:44ch; color:var(--muted); font-size:13px; }

/* ═══════════ CHHOTI SCREEN ═══════════ */
@media (max-width:1500px){
  :root{ --left-w:266px; --right-w:300px; --pad:18px; }
  .title{ font-size:40px; }
  .eyebrow{ margin-top:26px; }
  .qv-thumb{ width:76px; height:54px; }
  .qv-cap{ font-size:12px; }
  .quickviews{ gap:16px; padding:11px 18px; }
}
@media (max-width:1180px){
  .qv-title{ display:none; }
  .qv-cap{ display:none; }
  .qv-thumb{ width:62px; height:46px; }
}
@media (max-width:1180px){
  .tools{ right:calc(var(--pad) + var(--right-w) + 12px); }
}
@media (max-width:900px){
  .tools{ right:var(--pad); }
  .left,.right{ position:absolute; }
  .left{ width:auto; right:var(--pad); }
  .right{ display:none; }
  .quickviews{ left:var(--pad); right:var(--pad); }
  .leaders,.labels{ display:none; }
}


/* ═══════════ KAM UNCHI SCREEN ═══════════
   Baayan sutoon poora khula hua 1050px maangta hai. Us se kam unchi screen par
   har cheez ko thoRa thoRa kas diya jata hai — kuch bhi hataya nahin jata.
   (Ye nap 1160 hai: khula hua layout khud 1050px maangta hai, is liye us se
   neeche har unchai par kasa hua layout hi mehfooz hai.)                    */
@media (max-height:1160px){
  .eyebrow{ margin-top:12px; margin-bottom:8px; font-size:14px; }
  .title{ font-size:42px; margin-bottom:12px; }
  .lede{ margin-bottom:18px; font-size:13.5px; }
  .card{ padding:16px 16px 18px; }
  .card-title,.block-title{ margin-bottom:10px; }
  .block-title{ margin-top:16px; }
  .sys{ height:38px; font-size:14px; }
  .sys-list{ gap:7px; }
  .dial{ width:104px; height:104px; }
  .dial-num{ font-size:16px; }
  .dpad{ width:132px; height:84px; }
  .move-note{ margin-top:5px; font-size:11.5px; }
  .byline{ padding:11px 14px 10px; }
}
@media (max-height:820px){
  .eyebrow{ margin-top:4px; }
  .title{ font-size:36px; }
  .lede{ margin-bottom:14px; }
  .sys{ height:34px; }
  .dial{ width:100px; height:100px; }
  .dpad{ width:128px; height:80px; }
  .arrow[data-move="up"],.arrow[data-move="down"]{ width:36px; height:22px; }
  .arrow[data-move="left"],.arrow[data-move="right"]{ width:22px; height:36px; }
  .dial{ width:92px; height:92px; }
  .byline{ padding:9px 14px 9px; }
  .qv-thumb{ width:70px; height:48px; }
  .tool{ width:30px; height:30px; }
}