/* TEMERALDS — Website demos v2: living wall hero, auto-scrolling showcase, device studio */
/* Layout: dark emerald stage for motion (hero, showcase, process), cream paper for the gallery. */
.tdx,.tds{
  --deep:#07170F;--em:#0F2A1D;--em2:#14432F;--em3:#1D5A40;
  --g:#B8862C;--g2:#C9922F;--g3:#E2B862;--dg:#8A6418;
  --cr:#F6EFE3;--pa:#FFFDF8;--ink:#3A5546;--mut:rgba(246,239,227,.74);
  --line:rgba(184,134,44,.3);--gl:rgba(226,184,98,.32);
  --f-d:var(--tem-display,"Cairo",system-ui,sans-serif);
  --f-b:var(--tem-body,"Tajawal","Cairo",system-ui,sans-serif);
  --f-l:"Marcellus",Georgia,serif;
  --f-u:"Jost",system-ui,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
}
.tdx{color:var(--em);font-family:var(--f-b)}
.tdx *,.tds *{box-sizing:border-box}
.tdx img{max-width:100%}
.tdx h1,.tdx h2,.tdx h3,.tds h2{font-family:var(--f-d);text-wrap:balance;margin:0}
[dir=ltr].tdx h1,[dir=ltr].tdx h2,[dir=ltr].tdx h3,[dir=ltr].tds h2{font-weight:400;letter-spacing:-.01em}
.tdx-in{max-width:1280px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.tdx-eye{display:flex;align-items:center;gap:14px;font-weight:700;font-size:15px;color:var(--g3);margin:0 0 18px}
.tdx-eye:before{content:"";width:46px;height:2px;background:var(--g2);flex:none}
.tdx-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;padding:15px 26px;font:inherit;font-weight:700;font-size:16px;cursor:pointer;text-decoration:none;border:1.5px solid transparent;transition:background .25s,border-color .25s,transform .25s,color .25s;white-space:nowrap}
.tdx-btn:active{transform:scale(.98)}
.tdx-btn svg{width:18px;height:18px;flex:none}
.tdx-btn--gold{background:var(--g2);color:var(--deep)}.tdx-btn--gold:hover{background:var(--g3)}
.tdx-btn--line{border-color:var(--gl);color:var(--cr);background:rgba(246,239,227,.04)}.tdx-btn--line:hover{border-color:var(--g3)}
.tdx-btn--em{background:var(--em2);color:var(--cr)}.tdx-btn--em:hover{background:var(--em)}
.tdx-btn--ghost{border-color:var(--line);color:var(--em);background:transparent}.tdx-btn--ghost:hover{border-color:var(--g2)}
.tdx :focus-visible,.tds :focus-visible{outline:2px solid var(--g3);outline-offset:3px}

/* ---------- 1. hero: the living wall ---------- */
.tdx-hero{position:relative;overflow:hidden;background:var(--deep);color:var(--cr);isolation:isolate}
.tdx-wall{position:absolute;top:-28%;bottom:-28%;inset-inline-end:-6%;width:78%;display:flex;gap:24px;z-index:-2;
  transform:perspective(1600px) rotateX(24deg) rotateY(var(--ry,16deg)) rotateZ(var(--rz,-8deg));transform-origin:center;opacity:.92}
[dir=ltr].tdx .tdx-wall{--ry:-16deg;--rz:8deg}
.tdx-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:24px;animation:tdx-up 90s linear infinite;will-change:transform}
.tdx-col:nth-child(even){animation-name:tdx-down;animation-duration:110s}
.tdx-col:nth-child(3n){animation-duration:75s}
.tdx-col img{display:block;width:100%;height:auto;border-radius:12px;box-shadow:0 30px 60px rgba(0,0,0,.55),0 0 0 1px rgba(226,184,98,.25)}
@keyframes tdx-up{to{transform:translateY(-50%)}}
@keyframes tdx-down{from{transform:translateY(-50%)}to{transform:translateY(0)}}
.tdx-hero:before{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(var(--hg,270deg),var(--deep) 0%,var(--deep) 34%,rgba(7,23,15,.82) 52%,rgba(7,23,15,.25) 78%,rgba(7,23,15,.1) 100%),
  linear-gradient(0deg,var(--deep) 0%,rgba(7,23,15,0) 22%,rgba(7,23,15,0) 82%,var(--deep) 100%)}
[dir=ltr].tdx .tdx-hero{--hg:90deg}
.tdx-hero:after{content:"";position:absolute;inset:18px;border:1px solid var(--gl);pointer-events:none}
.tdx-hero__in{position:relative;padding-block:110px 120px}
.tdx-hero__txt{max-width:600px}
.tdx-crumbs{font-size:14px;color:var(--mut);margin:0 0 28px}.tdx-crumbs a{color:inherit;text-decoration:none}.tdx-crumbs span{margin:0 8px}
.tdx-hero h1{font-size:clamp(42px,6vw,82px);line-height:1.04;font-weight:800}
.tdx-hero h1 em{font-style:normal;color:var(--g3);display:block}
.tdx-lead{font-size:clamp(17px,1.5vw,20px);line-height:1.85;color:var(--mut);margin:26px 0 0;max-width:34em}
.tdx-acts{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px}
.tdx-facts{display:flex;gap:40px;flex-wrap:wrap;list-style:none;margin:46px 0 0;padding:24px 0 0;border-top:1px solid var(--gl)}
.tdx-facts b{display:block;font-family:var(--f-l);font-weight:400;font-size:40px;line-height:1;color:var(--g3);direction:ltr;text-align:start}
.tdx-facts span{font-size:14px;color:var(--mut)}

/* ---------- 2. showcase ---------- */
.tdx-show{position:relative;background:radial-gradient(ellipse at 30% 40%,#17462F 0%,var(--em) 45%,var(--deep) 100%);color:var(--cr);overflow:hidden}
.tdx-show__in{padding-block:110px;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:64px;align-items:center}
.tdx-show__stage{position:relative;padding-bottom:6%}
.tdx-lap{position:relative;width:92%;margin-inline-start:8%}
.tdx-lap__lid{position:relative;background:#0A130E;border-radius:20px 20px 6px 6px;padding:16px 16px 22px;border:1px solid var(--gl);box-shadow:0 60px 120px rgba(0,0,0,.55)}
.tdx-lap__lid:before{content:"";position:absolute;top:6px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#1F3328}
.tdx-lap__base{position:relative;height:18px;margin:0 -7%;border-radius:2px 2px 22px 22px;background:linear-gradient(180deg,#24382D,#0C1611 70%);box-shadow:0 30px 40px rgba(0,0,0,.45)}
.tdx-lap__base:before{content:"";position:absolute;top:0;left:50%;width:16%;height:7px;margin-left:-8%;border-radius:0 0 10px 10px;background:#0A130E}
.tdx-scr{position:relative;aspect-ratio:16/10;border-radius:6px;overflow:hidden;background:#0B1712}
.tdx-ph{position:absolute;inset-inline-start:0;bottom:0;width:23%;aspect-ratio:9/19.5;border-radius:30px;padding:7px;background:#0A130E;border:1px solid rgba(226,184,98,.55);box-shadow:0 40px 80px rgba(0,0,0,.6);z-index:2}
.tdx-ph .tdx-scr{aspect-ratio:auto;height:100%;border-radius:24px}
.tdx-ph:before{content:"";position:absolute;top:13px;left:50%;width:34%;height:12px;margin-left:-17%;border-radius:8px;background:#0A130E;z-index:3}
.tdx-shot{position:absolute;inset:0;background-size:100% auto;background-repeat:no-repeat;background-position:50% 0;opacity:0;transition:opacity .8s var(--ease)}
.tdx-shot.is-on{opacity:1;animation:tdx-pan 7s cubic-bezier(.45,0,.55,1) .5s both}
@keyframes tdx-pan{0%{background-position:50% 0}100%{background-position:50% 100%}}
.tdx-show__cap{position:absolute;inset-inline-end:0;bottom:-2%;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--mut)}
.tdx-show__cap i{width:8px;height:8px;border-radius:50%;background:var(--g3);box-shadow:0 0 0 0 rgba(226,184,98,.6);animation:tdx-ping 1.8s infinite}
@keyframes tdx-ping{70%{box-shadow:0 0 0 10px rgba(226,184,98,0)}100%{box-shadow:0 0 0 0 rgba(226,184,98,0)}}
.tdx-show h2{font-size:clamp(32px,3.6vw,50px);line-height:1.12}
.tdx-show h2 em{font-style:normal;color:var(--g3)}
.tdx-show__p{color:var(--mut);line-height:1.85;margin:18px 0 0;font-size:17px}
.tdx-feat{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:4px}
.tdx-feat button{position:relative;width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;text-align:start;background:none;border:0;border-bottom:1px solid rgba(226,184,98,.18);color:var(--cr);padding:16px 4px;font:inherit;cursor:pointer;opacity:.6;transition:opacity .3s}
.tdx-feat button:hover,.tdx-feat button[aria-selected=true]{opacity:1}
.tdx-feat__n{font-family:var(--f-l);font-size:15px;color:var(--g3);direction:ltr}
.tdx-feat b{display:block;font-family:var(--f-d);font-size:20px;font-weight:700}
[dir=ltr].tdx .tdx-feat b{font-weight:400}
.tdx-feat small{display:block;font-size:13px;color:var(--mut);margin-top:2px}
.tdx-feat__go{font-size:13px;font-weight:700;color:var(--g3);opacity:0;transition:opacity .3s}
.tdx-feat button[aria-selected=true] .tdx-feat__go{opacity:1}
.tdx-feat button:after{content:"";position:absolute;bottom:-1px;inset-inline-start:0;height:2px;width:0;background:var(--g3)}
.tdx-feat button[aria-selected=true]:after{animation:tdx-bar var(--dur,7.5s) linear both}
.tdx-show.is-paused .tdx-feat button:after{animation-play-state:paused}
@keyframes tdx-bar{to{width:100%}}

/* ---------- 3. gallery ---------- */
.tdx-gal{background:var(--cr);color:var(--em)}
.tdx-gal__head{padding-block:96px 0;display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap}
.tdx-gal__head .tdx-eye{color:var(--dg)}
.tdx-gal__head h2{font-size:clamp(30px,3.4vw,46px);line-height:1.15}
.tdx-gal__head p{margin:12px 0 0;color:var(--ink);line-height:1.8;max-width:36em}
.tdx-chips{display:flex;gap:10px;flex-wrap:wrap}
.tdx-chip{border:1.5px solid var(--line);background:var(--pa);color:var(--em);border-radius:999px;padding:10px 18px;font:inherit;font-weight:700;font-size:15px;cursor:pointer;transition:.25s}
.tdx-chip small{opacity:.55;font-weight:500;margin-inline-start:6px;font-family:var(--f-u)}
.tdx-chip:hover{border-color:var(--g2)}
.tdx-chip[aria-pressed=true]{background:var(--em2);border-color:var(--em2);color:var(--cr)}
.tdx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 34px;padding-block:44px 100px}
.tdx-card{display:flex;flex-direction:column;gap:16px;min-width:0}
.tdx-card__stage{position:relative;display:block;width:100%;border:1px solid var(--line);border-radius:14px;padding:0;cursor:pointer;overflow:hidden;background:var(--pa);box-shadow:0 18px 40px rgba(15,42,29,.08);transition:transform .45s var(--ease),box-shadow .45s,border-color .45s;text-align:start}
.tdx-card__bar{display:flex;align-items:center;gap:6px;height:26px;padding:0 12px;border-bottom:1px solid var(--line)}
.tdx-card__bar i{width:7px;height:7px;border-radius:50%;background:#E5D8BE}
.tdx-card__s{display:block;width:100%;aspect-ratio:16/10.5;background-size:100% auto;background-repeat:no-repeat;background-position:50% 0;transition:background-position 1.4s var(--ease)}
.tdx-card:hover .tdx-card__stage,.tdx-card.is-auto .tdx-card__stage{transform:translateY(-6px);box-shadow:0 30px 60px rgba(15,42,29,.16);border-color:var(--g2)}
.tdx-card:hover .tdx-card__s,.tdx-card.is-auto .tdx-card__s{background-position:50% 100%;transition:background-position 9s linear}
.tdx-card__t{display:flex;justify-content:space-between;align-items:flex-end;gap:14px}
.tdx-card__meta{display:flex;gap:8px;align-items:center;font-size:13.5px;font-weight:700;color:var(--dg)}
.tdx-card__meta i{font-style:normal;color:#b9a98a}
.tdx-card h3{font-size:22px;line-height:1.3;margin-top:2px}
.tdx-card__go{flex:none;display:inline-flex;align-items:center;gap:8px;background:none;border:0;border-bottom:1.5px solid var(--g2);padding:0 0 3px;font:inherit;font-weight:700;font-size:15px;color:var(--em);cursor:pointer;transition:color .25s,gap .25s}
.tdx-card__go svg{width:16px;height:16px}
.tdx-card:hover .tdx-card__go{gap:12px;color:var(--g)}
.tdx-card[hidden]{display:none}

/* ---------- 4. process ---------- */
.tdx-proc{background:var(--em);color:var(--cr)}
.tdx-proc__in{padding-block:96px}
.tdx-proc h2{font-size:clamp(30px,3.4vw,46px);line-height:1.15;max-width:18em}
.tdx-steps{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;position:relative}
.tdx-steps:before{content:"";position:absolute;top:27px;inset-inline:28px;height:1px;background:linear-gradient(90deg,var(--g2),rgba(201,146,47,.2))}
.tdx-steps li{position:relative}
.tdx-steps b{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:var(--deep);border:1.5px solid var(--g2);font-family:var(--f-l);font-weight:400;font-size:22px;color:var(--g3);position:relative}
.tdx-steps h3{font-size:21px;margin-top:20px}
.tdx-steps p{margin:8px 0 0;color:var(--mut);line-height:1.75;font-size:15.5px}

/* ---------- 5. close ---------- */
.tdx-end{background:var(--cr)}
.tdx-end__in{padding-block:90px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:48px;align-items:center}
.tdx-end h2{font-size:clamp(32px,3.8vw,52px);line-height:1.1}
.tdx-end h2 em{font-style:normal;color:var(--g)}
.tdx-end p{color:var(--ink);line-height:1.85;margin:16px 0 0}
.tdx-end .tdx-acts{margin-top:28px}
.tdx-end .tdx-btn--line{color:var(--em);border-color:var(--line)}
.tdx-end__note{border:1px solid var(--line);border-radius:22px;padding:26px 28px;background:var(--pa)}
.tdx-end__note h3{font-size:20px}
.tdx-end__note p{font-size:15px;margin-top:8px}

/* ================= STUDIO ================= */
.tds{position:fixed;inset:0;z-index:99999;background:var(--deep);color:var(--cr);display:grid;grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);font-family:var(--f-b);
  opacity:0;visibility:hidden;transform:scale(1.02);transition:opacity .4s var(--ease),transform .5s var(--ease),visibility 0s .5s;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.tds.is-open{opacity:1;visibility:visible;transform:none;transition:opacity .4s var(--ease),transform .5s var(--ease)}
.tds-amb{position:absolute;inset:-10%;z-index:0;pointer-events:none;overflow:hidden}
.tds-amb i{position:absolute;inset:0;background-size:cover;background-position:50% 10%;filter:blur(70px) saturate(1.2);opacity:0;transform:scale(1.15);transition:opacity 1s}
.tds-amb i.on{opacity:.34}
.tds-amb:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,rgba(7,23,15,.2),rgba(7,23,15,.85) 75%)}
.tds>*:not(.tds-amb){position:relative;z-index:1}
.tds-top{min-width:0;display:flex;align-items:center;gap:14px;padding:14px max(20px,env(safe-area-inset-right,0px)) 14px max(20px,env(safe-area-inset-left,0px));border-bottom:1px solid rgba(226,184,98,.2);background:rgba(7,23,15,.55);backdrop-filter:blur(12px)}
.tds-brand{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.tds-logo{flex:none;width:38px;height:38px;border-radius:10px;background:var(--em2);border:1px solid rgba(226,184,98,.5);display:flex;align-items:center;justify-content:center}
.tds-title{min-width:0}
.tds-title b{display:block;font-family:var(--f-d);font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tds-title span{font-size:12.5px;color:var(--g3)}
.tds-seg{position:relative;display:flex;background:rgba(246,239,227,.06);border:1px solid rgba(226,184,98,.3);border-radius:999px;padding:4px}
.tds-seg__ink{position:absolute;top:4px;bottom:4px;left:0;border-radius:999px;background:var(--g2);transition:transform .5s var(--ease),width .5s var(--ease)}
.tds-seg button{position:relative;z-index:1;display:flex;align-items:center;gap:8px;background:none;border:0;color:var(--cr);font:inherit;font-weight:700;font-size:14px;padding:9px 15px;border-radius:999px;cursor:pointer;transition:color .3s}
.tds-seg button[aria-pressed=true]{color:var(--deep)}
.tds-seg svg{width:18px;height:18px;flex:none}
.tds-ic{flex:none;width:42px;height:42px;border-radius:50%;border:1px solid rgba(226,184,98,.35);background:rgba(7,23,15,.4);color:var(--cr);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.25s;text-decoration:none}
.tds-ic:hover{border-color:var(--g3);color:var(--g3)}
.tds-ic[disabled]{opacity:.3;cursor:default}
.tds-ic svg{width:18px;height:18px}
.tds-body{display:grid;grid-template-columns:minmax(0,1fr) 340px;min-height:0}
.tds.is-all .tds-body{grid-template-columns:minmax(0,1fr)}
.tds.is-all .tds-side{display:none}
.tds-stage{position:relative;min-height:0;overflow:hidden}
.tds-dev{position:absolute;left:50%;top:50%;transform-origin:center;background:#0A130E;
  box-shadow:0 70px 140px rgba(0,0,0,.6),0 0 0 1px rgba(226,184,98,.45),inset 0 0 0 2px #16241C;
  transition:transform .65s var(--ease),width .65s var(--ease),height .65s var(--ease),border-radius .65s var(--ease),padding .65s var(--ease),opacity .4s}
.tds-scr{position:relative;width:100%;height:100%;overflow:hidden;background:#fff;transition:border-radius .65s var(--ease)}
.tds-scr iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#fff}
.tds-bar{display:none;direction:ltr;height:40px;align-items:center;gap:14px;padding:0 16px;background:#13231A;border-bottom:1px solid rgba(226,184,98,.22)}
.tds-bar i{width:10px;height:10px;border-radius:50%;background:#E2B862;opacity:.85;box-shadow:16px 0 0 rgba(226,184,98,.6),32px 0 0 rgba(226,184,98,.35);margin-right:36px;flex:none}
.tds-url{flex:1;max-width:520px;margin:0 auto;height:26px;border-radius:13px;background:rgba(246,239,227,.08);display:flex;align-items:center;justify-content:center;gap:8px;font:12.5px var(--f-u);color:rgba(246,239,227,.75);overflow:hidden;white-space:nowrap}
.tds-dev[data-d=desktop]{border-radius:16px;padding:0}
.tds-dev[data-d=desktop] .tds-bar{display:flex}
.tds-dev[data-d=desktop] .tds-scr{height:calc(100% - 40px);border-radius:0 0 15px 15px}
.tds-dev[data-d=tablet]{border-radius:48px;padding:22px}
.tds-dev[data-d=tablet] .tds-scr{border-radius:26px}
.tds-dev[data-d=phone]{border-radius:62px;padding:14px}
.tds-dev[data-d=phone] .tds-scr{border-radius:48px}
.tds-isl{display:none;position:absolute;top:24px;left:50%;width:120px;height:34px;margin-left:-60px;border-radius:20px;background:#0A130E;z-index:3}
.tds-dev[data-d=phone]:not(.is-land) .tds-isl{display:block}
.tds-dev[data-d=phone].is-land .tds-isl{display:block;top:50%;left:24px;width:34px;height:120px;margin:-60px 0 0}
.tds-dev.is-off{opacity:0;pointer-events:none}
.tds-tag{position:absolute;left:50%;bottom:-46px;transform:translateX(-50%);white-space:nowrap;font-size:26px;font-weight:700;color:var(--g3);display:none}
.tds.is-all .tds-tag{display:block}
.tds-load{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:linear-gradient(110deg,#F6EFE3 30%,#FFFDF8 50%,#F6EFE3 70%) 0 0/300% 100%;animation:tds-sh 1.4s linear infinite;transition:opacity .45s}
.tds-load.is-done{opacity:0;pointer-events:none}
.tds-load span{font-size:15px;font-weight:700;color:var(--dg)}
@keyframes tds-sh{to{background-position:-150% 0}}
.tds-load svg{animation:tds-p 1.2s ease-in-out infinite}
@keyframes tds-p{50%{transform:scale(.86);opacity:.6}}
.tds-sync{position:absolute;top:16px;left:50%;transform:translateX(-50%);display:none;align-items:center;gap:10px;background:rgba(7,23,15,.75);border:1px solid var(--gl);border-radius:999px;padding:8px 16px;font-size:13.5px;color:var(--cr);z-index:6;white-space:nowrap}
.tds-sync i{width:8px;height:8px;border-radius:50%;background:var(--g3);animation:tdx-ping 1.8s infinite}
.tds.is-all .tds-sync{display:flex}
.tds-nav{position:absolute;top:50%;margin-top:-24px;width:48px;height:48px;z-index:5}
.tds-nav--prev{inset-inline-start:18px}.tds-nav--next{inset-inline-end:18px}
.tds-side{border-inline-start:1px solid rgba(226,184,98,.2);padding:30px 28px;overflow:auto;display:flex;flex-direction:column;gap:18px;background:rgba(7,23,15,.45);backdrop-filter:blur(10px)}
.tds-side h2{font-size:28px;line-height:1.2}
.tds-side p{margin:0;color:var(--mut);line-height:1.8;font-size:15.5px}
.tds-hl{list-style:none;margin:0;padding:16px 0 0;border-top:1px solid rgba(226,184,98,.25);display:grid;gap:12px}
.tds-hl li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.5}
.tds-hl li:before{content:"";flex:none;width:20px;height:20px;margin-top:1px;border-radius:50%;background:#C9922F url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%2307170F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.tds-pitch{background:rgba(246,239,227,.06);border:1px solid rgba(226,184,98,.25);border-radius:16px;padding:16px 18px;font-size:14.5px !important;color:rgba(246,239,227,.86) !important}
.tds-side .tdx-btn{width:100%;padding:14px 20px}
.tds-fine{font-size:12.5px !important;color:rgba(246,239,227,.55) !important;margin-top:auto !important}
.tds-foot{min-width:0;display:flex;align-items:center;gap:16px;padding:12px max(20px,env(safe-area-inset-right,0px)) 14px max(20px,env(safe-area-inset-left,0px));border-top:1px solid rgba(226,184,98,.16);background:rgba(7,23,15,.55);backdrop-filter:blur(12px)}
.tds-count{flex:none;font:13px var(--f-u);color:var(--mut);direction:ltr;min-width:44px}
.tds-film{flex:1;min-width:0;display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:4px 2px}
.tds-film::-webkit-scrollbar{display:none}
.tds-film button{flex:none;width:92px;aspect-ratio:16/10;border-radius:8px;border:1.5px solid transparent;padding:0;cursor:pointer;background:#0A130E center top/cover no-repeat;opacity:.5;transition:opacity .3s,border-color .3s,transform .3s}
.tds-film button:hover{opacity:.85}
.tds-film button[aria-current=true]{opacity:1;border-color:var(--g3);transform:translateY(-2px)}
.tds-kbd{flex:none;display:inline-flex;gap:6px;align-items:center;font-size:12.5px;color:var(--mut)}
.tds-kbd kbd{font:11px var(--f-u);border:1px solid rgba(226,184,98,.4);border-radius:5px;padding:1px 6px;direction:ltr}
.tds-cta{display:none}
html.tds-lock,html.tds-lock body{overflow:hidden}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .tdx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tdx-show__in{grid-template-columns:minmax(0,1fr);gap:48px}
  .tdx-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}
  .tdx-steps:before{display:none}
  .tds-body{grid-template-columns:minmax(0,1fr)}
  .tds-side{display:none}
  .tds-cta{display:inline-flex;flex:none;padding:10px 18px;font-size:14px}
  .tds-kbd{display:none}
}
@media (max-width:820px){
  .tdx-hero__in{padding-block:84px 70px}
  .tdx-wall{width:150%;inset-inline-end:-40%;opacity:.5}
  .tdx-hero:before{background:linear-gradient(0deg,var(--deep) 8%,rgba(7,23,15,.75) 45%,rgba(7,23,15,.55) 100%)}
  .tdx-end__in{grid-template-columns:minmax(0,1fr)}
  .tds-seg button span{display:none}
  .tds-seg button{padding:9px 13px}
  .tds-nav{display:none}
  .tds-seg button[data-d=all]{display:none}
}
@media (max-width:640px){
  .tdx-grid{grid-template-columns:minmax(0,1fr);gap:22px}
  .tdx-facts{gap:26px}
  .tdx-facts b{font-size:32px}
  .tdx-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-20px;padding-inline:20px}
  .tdx-chips::-webkit-scrollbar{display:none}
  .tdx-chip{flex:none}
  .tdx-steps{grid-template-columns:minmax(0,1fr)}
  .tds-top{padding-inline:12px;gap:8px}
  .tds-title span,.tds-rot,.tds-ext{display:none}
  .tds-film button{width:70px}
  .tds-count{display:none}
}
@media (prefers-reduced-motion:reduce){
  .tdx-col,.tdx-shot.is-on,.tdx-feat button:after,.tds-load,.tds-load svg,.tdx-show__cap i,.tds-sync i{animation:none !important}
  .tdx-card .tdx-card__s{transition:none !important}
  .tds,.tds-dev,.tds-seg__ink{transition:none}
}