:root{
  --bg:#08090d;
  --bg-soft:#101218;
  --card:#12151d;
  --text:#f4f5f7;
  --muted:#9ca3b4;
  --line:rgba(255,255,255,.10);
  --cyan:#46e7ff;
  --violet:#8f6cff;
  --lime:#d9ff57;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at 20% 0%,rgba(72,231,255,.08),transparent 28%),
    radial-gradient(circle at 85% 15%,rgba(143,108,255,.10),transparent 25%),
    var(--bg);
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.noise{
  position:fixed;inset:0;pointer-events:none;opacity:.045;z-index:50;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}
.cursor-glow{
  position:fixed;width:360px;height:360px;border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(circle,rgba(70,231,255,.10),transparent 68%);
  transform:translate(-50%,-50%);transition:opacity .2s;
}
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px clamp(20px,4vw,64px);
  border-bottom:1px solid transparent;
  transition:.3s ease;
}
.site-header.scrolled{
  background:rgba(8,9,13,.72);backdrop-filter:blur(18px);
  border-bottom-color:var(--line);
}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:.12em;font-size:12px}
.brand-mark{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--cyan),var(--violet));color:#061014;
  font-weight:1000;box-shadow:0 0 28px rgba(70,231,255,.18)
}
.nav{display:flex;align-items:center;gap:28px;font-size:14px;color:#c5cad5}
.nav a{transition:.2s}
.nav a:hover{color:white}
.nav-cta{padding:10px 15px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.03)}
.hero{
  position:relative;min-height:100vh;padding:150px clamp(20px,6vw,92px) 80px;
  display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:40px;overflow:hidden;
}
.hero-grid{
  position:absolute;inset:0;opacity:.28;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(to bottom,black,transparent 90%);
}
.hero-copy{position:relative;z-index:2;max-width:820px}
.eyebrow{display:flex;align-items:center;gap:12px;color:#b8bfd0;font-size:12px;font-weight:700;letter-spacing:.16em}
.eyebrow span{width:34px;height:1px;background:linear-gradient(90deg,var(--cyan),var(--violet))}
h1{font-size:clamp(58px,7.3vw,118px);line-height:.88;letter-spacing:-.065em;margin:28px 0 30px;max-width:1000px}
.gradient-text{
  display:block;background:linear-gradient(90deg,var(--cyan),#8ef2c2 45%,var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-lead{max-width:680px;color:#b5bdcb;font-size:clamp(18px,2vw,23px);line-height:1.6}
.hero-lead strong{color:white}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;padding:15px 21px;border-radius:12px;
  font-weight:800;font-size:14px;border:1px solid transparent;transition:.25s ease;
}
.btn-primary{background:linear-gradient(135deg,var(--cyan),#8cf0bc);color:#071014;box-shadow:0 18px 45px rgba(70,231,255,.18)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 22px 60px rgba(70,231,255,.28)}
.btn-ghost{border-color:var(--line);background:rgba(255,255,255,.03)}
.btn-ghost:hover{background:rgba(255,255,255,.08)}
.hero-meta{display:flex;gap:42px;margin-top:52px}
.hero-meta div{display:flex;flex-direction:column;gap:6px}
.hero-meta strong{font-size:14px;letter-spacing:.14em}
.hero-meta span{font-size:12px;color:var(--muted)}
.hero-visual{position:relative;min-height:600px}
.orb{position:absolute;border-radius:50%;filter:blur(10px)}
.orb-a{width:390px;height:390px;right:6%;top:10%;background:radial-gradient(circle,var(--violet),transparent 68%);opacity:.22}
.orb-b{width:330px;height:330px;left:3%;bottom:5%;background:radial-gradient(circle,var(--cyan),transparent 68%);opacity:.18}
.monitor{
  position:absolute;background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.16);box-shadow:0 30px 100px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.12);
  backdrop-filter:blur(18px)
}
.monitor-main{width:min(92%,580px);height:360px;right:0;top:95px;border-radius:28px;padding:12px;transform:rotate(2deg)}
.monitor-top{height:40px;display:flex;align-items:center;gap:9px;padding:0 10px;font-size:11px;letter-spacing:.15em;color:#cbd1dc}
.monitor-top small{margin-left:auto;color:var(--lime)}
.live-dot{width:8px;height:8px;border-radius:50%;background:#ff4d60;box-shadow:0 0 18px #ff4d60}
.screen{position:relative;height:calc(100% - 40px);border-radius:20px;overflow:hidden;background:
  radial-gradient(circle at 60% 35%,rgba(70,231,255,.22),transparent 30%),
  linear-gradient(135deg,#0a1220,#1b1030 62%,#0b0c13)}
.screen:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.09) 45%,transparent 60%);transform:translateX(-100%);animation:sheen 5s infinite}
.screen-title{position:absolute;left:34px;bottom:45px;font-size:62px;line-height:.76;font-weight:1000;letter-spacing:-.08em}
.screen-title span{color:var(--cyan)}
.timecode{position:absolute;right:24px;bottom:18px;font-family:monospace;font-size:12px;color:#aeb7c8}
.scanline{position:absolute;left:0;right:0;height:2px;background:rgba(70,231,255,.55);box-shadow:0 0 18px var(--cyan);animation:scan 4s linear infinite}
.monitor-side{width:250px;height:210px;left:0;bottom:35px;border-radius:24px;padding:18px;transform:rotate(-5deg)}
.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;height:110px}
.mini-grid span{border-radius:8px;background:linear-gradient(135deg,#18202c,#20243e)}
.mini-grid span:nth-child(2){background:linear-gradient(135deg,#1b1630,#302050)}
.mini-grid span:nth-child(3){background:linear-gradient(135deg,#11252a,#153a42)}
.levels{height:48px;display:flex;align-items:end;gap:10px;padding:8px 4px 0}
.levels i{display:block;width:12px;height:var(--h);border-radius:3px;background:linear-gradient(to top,var(--lime),var(--cyan))}
.floating-tag{
  position:absolute;padding:10px 13px;border:1px solid var(--line);border-radius:10px;
  background:rgba(8,9,13,.72);backdrop-filter:blur(10px);font:700 11px/1 monospace;letter-spacing:.08em
}
.tag-one{right:7%;bottom:75px;color:var(--lime)}
.tag-two{left:16%;top:55px;color:var(--cyan)}
.ticker{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#0d0f14}
.ticker-track{display:flex;gap:28px;width:max-content;padding:16px 0;animation:ticker 26s linear infinite;font-size:12px;font-weight:800;letter-spacing:.16em;color:#cbd1db}
.ticker b{color:var(--cyan)}
.section{padding:120px clamp(20px,6vw,92px)}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:52px}
.section-heading h2{margin:0;font-size:clamp(42px,5vw,76px);line-height:1;letter-spacing:-.05em}
.project-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:20px}
.project-card{background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.025));border:1px solid var(--line);border-radius:26px;overflow:hidden;transition:.35s}
.project-card:hover{transform:translateY(-7px);border-color:rgba(70,231,255,.3)}
.project-featured{grid-row:span 2}
.project-visual{height:280px;position:relative;overflow:hidden}
.project-featured .project-visual{height:520px}
.pv-1{background:radial-gradient(circle at 30% 25%,rgba(70,231,255,.26),transparent 30%),linear-gradient(135deg,#101a28,#1f1238 62%,#101219)}
.project-screen{position:absolute;inset:44px;border:1px solid rgba(255,255,255,.18);border-radius:20px;background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.02));box-shadow:0 24px 50px rgba(0,0,0,.4)}
.chip{position:absolute;top:18px;left:18px;background:#ff4d60;padding:7px 10px;border-radius:7px;font-size:10px;font-weight:900}
.fake-lower-third{position:absolute;left:28px;right:28px;bottom:28px;height:60px;background:linear-gradient(90deg,var(--cyan) 0 22%,rgba(255,255,255,.16) 22%);border-radius:8px}
.studio-lines{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 55px,rgba(255,255,255,.035) 56px)}
.pv-2{display:grid;place-items:center;background:linear-gradient(145deg,#12151c,#201831)}
.switcher{width:76%;height:65%;border:1px solid var(--line);border-radius:18px;background:#0d1016;padding:25px;position:relative;box-shadow:0 25px 50px rgba(0,0,0,.45)}
.switcher-row{display:flex;gap:11px;margin-bottom:19px}.switcher-row i{flex:1;height:20px;border-radius:5px;background:#24303b;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.switcher-row i:nth-child(3),.switcher-row.warm i:nth-child(5){background:var(--cyan);box-shadow:0 0 18px rgba(70,231,255,.5)}
.switcher-row.warm i{background:#2a2233}.switcher-row.warm i:nth-child(5){background:var(--violet)}
.t-bar{position:absolute;width:10px;height:72px;border-radius:8px;background:#dfe5ee;right:30px;bottom:20px;transform:rotate(24deg);transform-origin:bottom}
.pv-3{display:grid;place-items:center;background:radial-gradient(circle,#1f2141,#0e1118 65%)}
.rings{width:190px;height:190px;border:1px solid rgba(70,231,255,.28);border-radius:50%;box-shadow:0 0 0 24px rgba(143,108,255,.06),0 0 0 48px rgba(70,231,255,.035);animation:spin 12s linear infinite}
.play{position:absolute;width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--cyan),var(--violet));color:#081014;padding-left:5px;font-size:24px}
.project-info{padding:24px 26px 30px}
.project-info p{font-size:11px;letter-spacing:.15em;color:var(--cyan);font-weight:800}
.project-info h3{margin:8px 0 12px;font-size:26px;letter-spacing:-.03em}
.project-info span{color:var(--muted);line-height:1.6}
.expertise{background:linear-gradient(180deg,transparent,rgba(255,255,255,.025),transparent)}
.expertise-list{border-top:1px solid var(--line)}
.expertise-item{display:grid;grid-template-columns:80px 1fr 1.25fr;align-items:center;gap:30px;padding:32px 0;border-bottom:1px solid var(--line)}
.expertise-item span{font-family:monospace;color:var(--cyan)}
.expertise-item h3{margin:0;font-size:30px;letter-spacing:-.03em}
.expertise-item p{margin:0;color:var(--muted);line-height:1.7}
.about-card{position:relative;overflow:hidden;display:grid;grid-template-columns:.75fr 1.25fr;gap:60px;padding:70px;border:1px solid var(--line);border-radius:32px;background:
  radial-gradient(circle at 15% 20%,rgba(70,231,255,.12),transparent 28%),
  radial-gradient(circle at 85% 80%,rgba(143,108,255,.12),transparent 26%),
  rgba(255,255,255,.025)}
.about-monogram{display:grid;place-items:center;min-height:370px;border-radius:24px;background:linear-gradient(145deg,#121a22,#171329);font-size:clamp(100px,14vw,210px);font-weight:1000;letter-spacing:-.1em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.32)}
.about-copy h2{font-size:clamp(42px,5vw,72px);line-height:1;letter-spacing:-.05em;margin:24px 0}
.about-copy>p{color:#b4bcc9;line-height:1.8;font-size:18px}
.persian{direction:rtl;text-align:left;color:white!important;font-weight:700}
.text-link{display:inline-flex;gap:10px;margin-top:18px;color:var(--cyan);font-weight:800}
.contact{text-align:center;padding:100px 20px 150px}
.contact .eyebrow{justify-content:center}
.contact h2{font-size:clamp(48px,7vw,100px);line-height:.95;letter-spacing:-.06em;max-width:1000px;margin:30px auto 40px}
.btn-large{padding:19px 27px;font-size:16px}
footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:28px clamp(20px,4vw,64px);border-top:1px solid var(--line);color:var(--muted);font-size:12px}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
.reveal.visible{opacity:1;transform:none}
.delay-1{transition-delay:.12s}.delay-2{transition-delay:.24s}
@keyframes ticker{to{transform:translateX(-50%)}}
@keyframes scan{from{top:0}to{top:100%}}
@keyframes sheen{50%,100%{transform:translateX(100%)}}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:980px){
  .nav a:not(.nav-cta){display:none}
  .hero{grid-template-columns:1fr;padding-top:130px}
  .hero-visual{min-height:520px}
  .project-grid{grid-template-columns:1fr}
  .project-featured{grid-row:auto}
  .project-featured .project-visual{height:380px}
  .section-heading{display:block}.section-heading .eyebrow{margin-bottom:22px}
  .about-card{grid-template-columns:1fr;padding:30px}.about-monogram{min-height:260px}
}
@media(max-width:680px){
  h1{font-size:58px}
  .hero{padding-left:20px;padding-right:20px}
  .hero-meta{gap:20px;justify-content:space-between}
  .hero-visual{min-height:440px}
  .monitor-main{height:290px;top:55px}
  .monitor-side{width:190px;height:160px}
  .screen-title{font-size:46px}
  .section{padding:90px 20px}
  .section-heading h2{font-size:46px}
  .expertise-item{grid-template-columns:50px 1fr;padding:25px 0}
  .expertise-item p{grid-column:2}
  .about-card{border-radius:24px}
  footer{flex-direction:column;text-align:center}
}

/* Cinematic control-room hero */
.hero.hero-photo{
  position:relative;
  display:block;
  min-height:100svh;
  padding:0;
  overflow:hidden;
  isolation:isolate;
  background:#030406;
}
.hero-photo-stage{
  position:absolute;
  inset:-4%;
  transform:translate3d(0,0,0) scale(1.055);
  transition:transform .18s ease-out;
  will-change:transform;
}
.hero-photo-image{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center center;
  animation:heroBreath 12s ease-in-out infinite alternate;
  filter:saturate(1.06) contrast(1.04);
}
.hero-photo-vignette{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(0,0,0,.22),transparent 18%,transparent 72%,rgba(0,0,0,.72)),
    radial-gradient(ellipse at center,transparent 42%,rgba(0,0,0,.62) 100%);
  pointer-events:none;
}
.hero-photo-light{position:absolute;border-radius:50%;filter:blur(70px);mix-blend-mode:screen;opacity:.18;pointer-events:none}
.hero-photo-light.light-one{width:28vw;height:28vw;left:32%;top:18%;background:#27d6ff;animation:lightDriftOne 9s ease-in-out infinite alternate}
.hero-photo-light.light-two{width:24vw;height:24vw;right:4%;bottom:7%;background:#ff284f;animation:lightDriftTwo 11s ease-in-out infinite alternate}
.hero-photo-scan{
  position:absolute;left:0;right:0;height:2px;top:-5%;
  background:linear-gradient(90deg,transparent,rgba(73,225,255,.78),transparent);
  box-shadow:0 0 18px rgba(73,225,255,.6);
  opacity:.34;animation:heroScan 6.5s linear infinite;pointer-events:none
}
.hero-photo-grain{
  position:absolute;inset:0;opacity:.07;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  animation:grainShift .22s steps(2) infinite
}
.hero-live-badge{
  position:absolute;z-index:4;left:clamp(20px,4vw,72px);bottom:clamp(72px,8vw,116px);
  display:flex;align-items:center;gap:9px;padding:11px 14px;border-radius:999px;
  border:1px solid rgba(255,255,255,.16);background:rgba(5,7,10,.52);backdrop-filter:blur(14px);
  font:800 10px/1 monospace;letter-spacing:.16em;color:#e8edf4;box-shadow:0 16px 45px rgba(0,0,0,.4)
}
.hero-live-badge i{width:8px;height:8px;border-radius:50%;background:#ff3e4f;box-shadow:0 0 0 0 rgba(255,62,79,.65);animation:livePulse 1.6s infinite}
.hero-enter{
  position:absolute;z-index:4;right:clamp(20px,4vw,72px);bottom:clamp(55px,7vw,95px);
  display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:14px;
  border:1px solid rgba(255,215,0,.45);background:rgba(5,7,10,.45);backdrop-filter:blur(14px);
  color:#ffd400;font-size:11px;font-weight:900;letter-spacing:.14em;transition:.3s
}
.hero-enter b{font-size:20px;animation:arrowBounce 1.5s ease-in-out infinite}
.hero-enter:hover{transform:translateY(-5px);background:rgba(255,212,0,.12);box-shadow:0 18px 50px rgba(0,0,0,.4),0 0 35px rgba(255,212,0,.12)}
.hero-hotspot{position:absolute;z-index:3;left:4%;top:57%;width:15%;height:10%;border-radius:14px}
.site-header{z-index:20}
@keyframes heroBreath{from{transform:scale(1.01)}to{transform:scale(1.045)}}
@keyframes heroScan{to{top:105%}}
@keyframes lightDriftOne{to{transform:translate(10vw,5vh) scale(1.15)}}
@keyframes lightDriftTwo{to{transform:translate(-8vw,-6vh) scale(.9)}}
@keyframes grainShift{0%{transform:translate(0)}25%{transform:translate(-2%,1%)}50%{transform:translate(1%,-2%)}75%{transform:translate(2%,2%)}100%{transform:translate(-1%,-1%)}}
@keyframes livePulse{70%{box-shadow:0 0 0 10px rgba(255,62,79,0)}100%{box-shadow:0 0 0 0 rgba(255,62,79,0)}}
@keyframes arrowBounce{50%{transform:translateY(5px)}}
@media(max-width:900px){
  .hero.hero-photo{min-height:78svh}
  .hero-photo-stage{inset:-2% -14%}
  .hero-photo-image{object-position:62% center}
  .hero-hotspot{display:none}
  .hero-live-badge{bottom:70px}
  .hero-enter{bottom:20px;right:20px}
}
@media(prefers-reduced-motion:reduce){
  .hero-photo-image,.hero-photo-light,.hero-photo-scan,.hero-photo-grain,.hero-live-badge i,.hero-enter b{animation:none!important}
  .hero-photo-stage{transition:none}
}

/* Boot sequence */
body.is-loading{overflow:hidden}
.boot-loader{position:fixed;inset:0;z-index:999;background:#030406;display:grid;place-items:center;transition:opacity .7s ease,visibility .7s ease}
.boot-loader.done{opacity:0;visibility:hidden}
.boot-grid{position:absolute;inset:0;opacity:.14;background-image:linear-gradient(rgba(70,231,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(70,231,255,.12) 1px,transparent 1px);background-size:52px 52px;mask-image:radial-gradient(circle at center,#000 0,transparent 72%);animation:gridPulse 2s ease-in-out infinite}
.boot-panel{width:min(520px,86vw);position:relative}
.boot-logo{width:82px;height:82px;border-radius:22px;display:grid;place-items:center;margin:0 auto 36px;background:linear-gradient(135deg,var(--cyan),var(--violet));color:#051015;font-size:28px;font-weight:1000;box-shadow:0 0 60px rgba(70,231,255,.24);animation:bootLogo 1.2s ease-in-out infinite alternate}
.boot-status{text-align:center;font:800 13px/1.4 monospace;letter-spacing:.12em;color:#eef4fa;min-height:20px}
.boot-progress{height:3px;background:rgba(255,255,255,.09);overflow:hidden;margin-top:24px}.boot-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--violet));box-shadow:0 0 18px var(--cyan);transition:width .35s ease}
.boot-meta{display:flex;justify-content:space-between;margin-top:12px;color:#6e7888;font:700 10px monospace;letter-spacing:.12em}
@keyframes gridPulse{50%{opacity:.28;transform:scale(1.03)}}
@keyframes bootLogo{to{transform:translateY(-4px);box-shadow:0 0 90px rgba(143,108,255,.32)}}

/* Skills */
.skills{position:relative}
.skills-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.skill-card{padding:32px 26px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));transition:.35s ease}
.skill-card:hover{transform:translateY(-7px);border-color:rgba(70,231,255,.3)}
.skill-ring{--p:0;width:132px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;margin-bottom:28px;background:conic-gradient(var(--cyan) calc(var(--p)*1%),rgba(255,255,255,.08) 0);position:relative}
.skill-ring:before{content:"";position:absolute;inset:8px;border-radius:50%;background:#0d1016;border:1px solid rgba(255,255,255,.06)}
.skill-ring span{position:relative;z-index:1;font:900 24px monospace}
.skill-card h3{font-size:22px;margin:0 0 12px}.skill-card p{margin:0;color:var(--muted);line-height:1.65;font-size:14px}
@media(max-width:980px){.skills-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:580px){.skills-grid{grid-template-columns:1fr}.boot-logo{width:70px;height:70px}.boot-status{font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}.boot-loader{display:none}body.is-loading{overflow:auto}}

/* V4 — stronger, always-visible hero motion (especially on phones) */
.hero-photo-stage::after{
  content:"";
  position:absolute;
  inset:-20%;
  pointer-events:none;
  background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.03) 43%,rgba(70,231,255,.18) 49%,rgba(255,255,255,.05) 54%,transparent 64%);
  transform:translateX(-75%) rotate(2deg);
  animation:heroLightSweep 5.5s ease-in-out infinite;
  mix-blend-mode:screen;
}
.hero-photo-light.light-one{opacity:.32;filter:blur(55px)}
.hero-photo-light.light-two{opacity:.28;filter:blur(58px)}
.hero-photo-scan{height:3px;opacity:.62;box-shadow:0 0 30px rgba(73,225,255,.9)}
.hero-photo-image{animation-duration:7s;filter:saturate(1.13) contrast(1.08) brightness(1.02)}
@keyframes heroLightSweep{
  0%,14%{transform:translateX(-78%) rotate(2deg);opacity:0}
  24%{opacity:1}
  52%{transform:translateX(78%) rotate(2deg);opacity:.85}
  64%,100%{transform:translateX(78%) rotate(2deg);opacity:0}
}
@keyframes mobileHeroFloat{
  0%{transform:translate3d(-1.5%,0,0) scale(1.075)}
  50%{transform:translate3d(1.5%,-.8%,0) scale(1.10)}
  100%{transform:translate3d(-1.5%,0,0) scale(1.075)}
}
@media(max-width:900px){
  .hero-photo-stage{
    inset:-4% -18%;
    animation:mobileHeroFloat 9s ease-in-out infinite;
  }
  .hero-photo-image{animation:heroBreath 6s ease-in-out infinite alternate}
  .hero-photo-light.light-one{width:58vw;height:58vw;left:20%;top:12%;opacity:.38}
  .hero-photo-light.light-two{width:52vw;height:52vw;right:-6%;bottom:8%;opacity:.34}
  .hero-photo-scan{animation-duration:4.2s}
}
/* Keep lightweight light/scan effects visible even when the device requests reduced motion. */
@media(prefers-reduced-motion:reduce){
  .hero-photo-stage::after,.hero-photo-light,.hero-photo-scan,.hero-live-badge i{animation-play-state:running!important}
}

/* V7 — editorial hero layout: preserve Sam and move readable copy toward the portrait */
.hero-photo-vignette{
  background:
    linear-gradient(90deg,rgba(1,3,6,.95) 0%,rgba(1,3,6,.82) 22%,rgba(1,3,6,.28) 48%,transparent 68%),
    linear-gradient(180deg,rgba(0,0,0,.22),transparent 18%,transparent 72%,rgba(0,0,0,.78)),
    radial-gradient(ellipse at center,transparent 38%,rgba(0,0,0,.55) 100%);
}
.hero-copy-overlay{
  position:absolute;z-index:5;
  left:clamp(28px,8.5vw,165px);
  top:50%;transform:translateY(-50%);
  width:min(560px,36vw);
  padding:clamp(24px,3vw,44px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:28px;
  background:linear-gradient(135deg,rgba(5,8,13,.78),rgba(5,8,13,.38));
  backdrop-filter:blur(13px) saturate(1.2);
  box-shadow:0 30px 90px rgba(0,0,0,.46),inset 0 1px rgba(255,255,255,.08);
}
.hero-kicker{display:flex;align-items:center;gap:10px;margin:0 0 20px;color:#dbe5ef;font:800 10px/1.2 monospace;letter-spacing:.16em}
.hero-kicker span{width:34px;height:2px;background:#ffd400;box-shadow:0 0 14px rgba(255,212,0,.6)}
.hero-copy-overlay h1{margin:0;line-height:.82;letter-spacing:-.06em;text-transform:uppercase}
.hero-copy-overlay h1 small,.hero-copy-overlay h1 strong{display:block}
.hero-copy-overlay h1 small{font-size:clamp(48px,5.3vw,92px);font-weight:950;color:#fff}
.hero-copy-overlay h1 strong{font-size:clamp(56px,6.4vw,112px);font-weight:1000;color:#ffc400;text-shadow:0 8px 30px rgba(255,181,0,.16)}
.hero-role{margin:25px 0 0;color:#fff;font-size:clamp(12px,1.05vw,16px);font-weight:900;letter-spacing:.07em}
.hero-description{margin:24px 0 0;max-width:500px;color:#c5ced9;font-size:clamp(14px,1.12vw,18px);line-height:1.7}
.hero-work-button{display:inline-flex;align-items:center;gap:24px;margin-top:30px;padding:14px 18px;border:1px solid rgba(255,196,0,.7);border-radius:12px;color:#ffd400;font-size:11px;font-weight:950;letter-spacing:.12em;background:rgba(255,196,0,.04);transition:.28s}
.hero-work-button:hover{transform:translateY(-4px);background:rgba(255,196,0,.12);box-shadow:0 12px 38px rgba(255,185,0,.14)}
.hero-work-button b{font-size:20px}

.broadcast-hud{position:absolute;z-index:5;left:47.8%;top:14.5%;width:25%;height:20%;pointer-events:none;font:900 9px/1 monospace;letter-spacing:.12em;color:#d9f8ff;opacity:.86}
.hud-program,.hud-preview{position:absolute;padding:7px 9px;border:1px solid rgba(74,231,255,.34);background:rgba(1,8,14,.52);backdrop-filter:blur(5px);box-shadow:0 0 24px rgba(47,219,255,.11)}
.hud-program{left:0;top:0}.hud-preview{right:0;top:21%}
.hud-program span,.hud-preview span{display:block;color:#66e7ff;font-size:7px;margin-bottom:5px}
.hud-program b,.hud-preview b{color:#fff;font-size:9px}
.hud-audio{position:absolute;left:42%;bottom:0;height:50px;display:flex;align-items:end;gap:4px}
.hud-audio i{display:block;width:4px;height:30%;background:linear-gradient(#ff475f 0 20%,#ffd400 20% 45%,#23e58f 45%);animation:hudMeter .55s ease-in-out infinite alternate;box-shadow:0 0 7px rgba(35,229,143,.45)}
.hud-audio i:nth-child(2){animation-delay:.12s}.hud-audio i:nth-child(3){animation-delay:.28s}.hud-audio i:nth-child(4){animation-delay:.05s}.hud-audio i:nth-child(5){animation-delay:.34s}.hud-audio i:nth-child(6){animation-delay:.18s}.hud-audio i:nth-child(7){animation-delay:.42s}
.hud-clock{position:absolute;left:46%;top:-35%;color:#ff4058;font-size:13px;text-shadow:0 0 12px rgba(255,64,88,.7)}
@keyframes hudMeter{from{height:18%}to{height:92%}}

@media(max-width:1100px){
  .hero-copy-overlay{left:4vw;width:min(520px,43vw);padding:28px}
  .broadcast-hud{display:none}
}
@media(max-width:900px){
  .hero.hero-photo{min-height:100svh}
  .hero-photo-stage{inset:-2% -29% -2% -10%}
  .hero-photo-image{object-position:69% center}
  .hero-photo-vignette{background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.12) 42%,rgba(2,4,8,.94) 76%),radial-gradient(ellipse at center,transparent 38%,rgba(0,0,0,.5) 100%)}
  .hero-copy-overlay{left:20px;right:20px;top:auto;bottom:86px;transform:none;width:auto;padding:22px;border-radius:22px;background:linear-gradient(135deg,rgba(5,8,13,.86),rgba(5,8,13,.58))}
  .hero-copy-overlay h1 small{font-size:42px}.hero-copy-overlay h1 strong{font-size:56px}
  .hero-role{margin-top:16px;font-size:11px}.hero-description{display:none}.hero-work-button{margin-top:18px;padding:12px 15px}
  .hero-live-badge{left:20px;bottom:28px}.hero-enter{display:none}
}
@media(max-width:520px){
  .hero-photo-stage{inset:-1% -40% -1% -10%}
  .hero-photo-image{object-position:72% center}
  .hero-copy-overlay{bottom:82px}
  .hero-kicker{margin-bottom:13px}.hero-copy-overlay h1 small{font-size:34px}.hero-copy-overlay h1 strong{font-size:46px}
}

/* V8 — interactive control-room challenge */
.control-game{position:relative;overflow:hidden;background:radial-gradient(circle at 50% 5%,rgba(70,231,255,.08),transparent 38%)}
.game-intro{max-width:680px;color:var(--muted);line-height:1.75;margin-top:18px}
.game-shell{position:relative;border:1px solid rgba(255,255,255,.11);border-radius:28px;overflow:hidden;background:linear-gradient(180deg,#101722,#06090e 70%);box-shadow:0 35px 100px rgba(0,0,0,.45)}
.game-topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:16px 22px;border-bottom:1px solid rgba(255,255,255,.08);font:800 11px monospace;letter-spacing:.12em}
.game-status{display:flex;align-items:center;gap:9px}.game-status i{width:9px;height:9px;border-radius:50%;background:#ffb000;box-shadow:0 0 16px currentColor}.game-shell.playing .game-status i{background:#ff4058;animation:gamePulse .7s infinite}.game-shell.won .game-status i{background:#25e58f}.game-progress-label{color:#8d98a8}.game-progress-label b{color:#fff}.game-timer{justify-self:end;display:flex;align-items:baseline;gap:6px;color:#fff}.game-timer span{font-size:30px;color:#ffd400}.game-timer small{color:#7d8796}
.monitor-wall{display:grid;grid-template-columns:1fr 2.2fr 1fr;grid-template-rows:150px 150px;gap:12px;padding:24px;background:linear-gradient(180deg,rgba(255,255,255,.025),transparent)}
.mini-monitor,.program-monitor{position:relative;border:5px solid #202a38;border-radius:11px;overflow:hidden;background:#020508;box-shadow:inset 0 0 40px rgba(70,231,255,.06),0 12px 30px rgba(0,0,0,.35)}
.mini-monitor>span,.monitor-label{position:absolute;left:8px;top:7px;z-index:2;color:#56e6ff;font:800 8px monospace;letter-spacing:.12em}.program-monitor{grid-row:1/3;grid-column:2;display:grid;place-items:center;text-align:center;padding:32px}.program-monitor:after,.mini-monitor:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.025) 4px);pointer-events:none}.program-message{font:900 clamp(22px,3.2vw,48px)/1.05 monospace;color:#fff;text-shadow:0 0 26px rgba(70,231,255,.22)}.program-sub{position:absolute;left:24px;right:24px;bottom:24px;color:#7f8b9a;font-size:12px;line-height:1.5}.monitor-figure{position:absolute;inset:30px 24px 12px;background:radial-gradient(circle at 50% 35%,#263b4d 0 16%,transparent 17%),linear-gradient(90deg,transparent 30%,#152331 31% 69%,transparent 70%);filter:blur(.4px)}.monitor-grid{position:absolute;inset:24px 14px 12px;background:linear-gradient(90deg,transparent 49%,rgba(70,231,255,.25) 50%,transparent 51%),linear-gradient(transparent 49%,rgba(70,231,255,.25) 50%,transparent 51%);background-size:28px 28px}.monitor-avatar{display:grid;place-items:center;height:100%;color:#7ceaff;font:900 12px monospace}.monitor-bars{position:absolute;inset:36px 18px 18px;background:linear-gradient(90deg,#d23848 0 16%,#d8a900 16% 33%,#27b971 33% 50%,#2d85c9 50% 67%,#7140c0 67% 84%,#ddd 84%)}
.console-panel{padding:22px 24px 28px;border-top:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,#111722,#080b10)}.console-lights{display:grid;grid-template-columns:repeat(8,1fr);gap:10px;margin-bottom:18px}.console-lights i{height:5px;border-radius:8px;background:#182230;box-shadow:inset 0 0 3px #000}.game-shell.playing .console-lights i:nth-child(odd){background:#2acbde;box-shadow:0 0 12px rgba(42,203,222,.45)}.game-shell.won .console-lights i{background:#25e58f;box-shadow:0 0 15px rgba(37,229,143,.55)}
.game-controls{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.game-button,.game-start,.game-result button{appearance:none;border:0;cursor:pointer;font:900 11px monospace;letter-spacing:.08em}.game-button{min-height:76px;border-radius:13px;border:1px solid rgba(255,255,255,.12);color:#c7d0dc;background:linear-gradient(#222c3a,#101722);box-shadow:inset 0 1px rgba(255,255,255,.08),0 7px 0 #05070a;transition:.12s}.game-button span{display:block;margin-bottom:7px;font-size:18px}.game-button:not(:disabled):hover{transform:translateY(-2px);border-color:#46e7ff}.game-button:not(:disabled):active,.game-button.hit{transform:translateY(5px);box-shadow:inset 0 1px rgba(255,255,255,.08),0 2px 0 #05070a}.game-button:disabled{opacity:.43;cursor:not-allowed}.game-button.live{color:#ff687a}.game-button.correct{border-color:#25e58f;box-shadow:0 0 22px rgba(37,229,143,.25)}.game-button.wrong{border-color:#ff4058;animation:gameShake .28s}.game-start{display:block;margin:22px auto 0;padding:15px 24px;border-radius:12px;color:#071015;background:#ffd400;box-shadow:0 12px 28px rgba(255,212,0,.15)}.game-start:hover{transform:translateY(-2px)}
.game-result{position:absolute;inset:0;z-index:10;display:grid;place-items:center;padding:24px;background:rgba(1,4,8,.83);backdrop-filter:blur(12px);opacity:0;pointer-events:none;transition:.35s}.game-result.show{opacity:1;pointer-events:auto}.result-card{width:min(560px,100%);padding:38px;border:1px solid rgba(37,229,143,.35);border-radius:24px;text-align:center;background:linear-gradient(145deg,#101b1a,#07100f);box-shadow:0 0 80px rgba(37,229,143,.16)}.result-kicker{color:#25e58f;font:900 10px monospace;letter-spacing:.18em}.result-card h3{margin:10px 0 16px;font-size:clamp(32px,5vw,60px)}.result-card p{color:#c7d1da;line-height:1.6}.result-fa{font-size:19px;color:#fff!important}.game-result button{margin-top:16px;padding:13px 20px;border-radius:10px;background:#25e58f;color:#06110d}
.game-shell.failed .program-message{color:#ff4058}.game-shell.won .program-message{color:#25e58f}.about-fa{margin-top:28px;padding-top:24px;border-top:1px solid rgba(255,255,255,.09)}.about-fa h3{margin:0 0 12px;font-size:24px}.about-fa p{font-family:Tahoma,Arial,sans-serif;line-height:2}
@keyframes gamePulse{50%{opacity:.35}}@keyframes gameShake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@media(max-width:760px){.monitor-wall{grid-template-columns:1fr 1fr;grid-template-rows:110px 230px 110px}.program-monitor{grid-column:1/3;grid-row:2}.game-controls{grid-template-columns:repeat(2,1fr)}.game-button.live{grid-column:1/3}.game-topbar{padding:13px}.game-progress-label{display:none}.program-message{font-size:26px}}

/* V9 photo, contact and interactive game upgrades */
.about-photo{position:relative;min-height:430px;border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:#070b10;box-shadow:0 28px 70px rgba(0,0,0,.35)}
.about-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(3,7,11,.55));pointer-events:none}
.about-photo img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;filter:saturate(.9) contrast(1.04)}
.about-links{display:flex;flex-wrap:wrap;gap:18px 30px;margin-top:26px}
.contact-email{margin:18px 0 0;color:#8793a3;font-family:monospace;letter-spacing:.06em}
.source-monitor{appearance:none;text-align:left;cursor:pointer;padding:0;color:inherit}
.source-monitor img,.program-feed{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.72) brightness(.62) contrast(1.08);transition:.35s}
.source-monitor:hover:not(:disabled) img{filter:saturate(1) brightness(.82)}
.source-monitor.recommended{border-color:#4de7ff;box-shadow:inset 0 0 0 2px rgba(77,231,255,.25),0 0 24px rgba(77,231,255,.18)}
.source-monitor:disabled{cursor:default}
.program-monitor{overflow:hidden;--audio-level:30%}
.program-feed{filter:saturate(.88) brightness(.72) contrast(1.12);transform:scale(1.02)}
.program-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.16),rgba(2,7,12,.38) 55%,rgba(2,7,12,.86));z-index:1}
.program-message,.program-sub,.monitor-label{z-index:3}
.program-message{position:relative;padding:12px 18px;border-radius:12px;background:rgba(2,7,12,.42);backdrop-filter:blur(7px)}
.live-bug{position:absolute;right:14px;top:12px;z-index:4;padding:7px 9px;border-radius:7px;background:#e4263f;color:#fff;font:900 9px monospace;letter-spacing:.12em;opacity:0;transform:translateY(-7px);transition:.25s;box-shadow:0 0 22px rgba(228,38,63,.45)}
.live-bug.show{opacity:1;transform:none}
.program-monitor.feed-flash:before{content:"";position:absolute;inset:0;z-index:5;background:#fff;animation:feedFlash .3s ease-out forwards;pointer-events:none}
.game-task{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,1.15fr);gap:24px;align-items:center;padding:20px 24px;border-top:1px solid rgba(255,255,255,.08);background:linear-gradient(90deg,rgba(72,222,255,.045),transparent)}
.task-copy small{display:block;margin-bottom:7px;color:#4de7ff;font:800 9px monospace;letter-spacing:.14em}.task-copy strong{display:block;font-size:20px}.task-copy p{margin:8px 0 0;color:#8e99a9;line-height:1.55;font-size:13px}
.task-action{min-height:74px;display:grid;place-items:center;padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:15px;background:rgba(0,0,0,.2)}
.standby-mark,.task-hint,.operation-ok{font:900 10px monospace;letter-spacing:.14em;color:#6f7c8d}.task-hint{color:#4de7ff;animation:gamePulse 1s infinite}.operation-ok{color:#25e58f}
.event-log{display:flex;gap:18px;overflow:auto;padding:10px 24px 13px;border-top:1px solid rgba(255,255,255,.055);color:#667384;font:700 9px monospace;white-space:nowrap}.event-log span:first-child{color:#a9b5c5}
.audio-task{width:100%;display:grid;grid-template-columns:1fr 44px auto;gap:12px;align-items:center}.audio-task input{accent-color:#25e58f}.audio-task output{font:900 13px monospace;color:#fff}.audio-task button,.connect-guest,.live-confirm button{border:1px solid rgba(255,255,255,.14);border-radius:9px;padding:11px 13px;background:#111b27;color:#dce6ef;font:900 9px monospace;letter-spacing:.08em;cursor:pointer}.audio-task button:hover,.connect-guest:hover,.live-confirm button:hover:not(:disabled){border-color:#4de7ff}.sync-state{margin-top:8px;color:#4de7ff;font:900 9px monospace;letter-spacing:.12em}.connect-guest:disabled{opacity:.55}
.preview-choices{width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.preview-choices button{position:relative;overflow:hidden;min-height:64px;padding:0;border:1px solid rgba(255,255,255,.12);border-radius:9px;background:#06090d;color:#fff;cursor:pointer}.preview-choices img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.55)}.preview-choices span{position:relative;z-index:2;font:900 8px monospace;letter-spacing:.08em}.preview-choices button:hover{border-color:#4de7ff}.preview-choices button:hover img{filter:brightness(.8)}
.live-confirm{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}.live-confirm button:last-child{background:#b3182e;color:#fff}.live-confirm button:disabled{opacity:.35;cursor:not-allowed}.live-confirm .armed{border-color:#ff4058;color:#ff7181;box-shadow:0 0 18px rgba(255,64,88,.14)}
.game-shell.urgent .game-timer span{color:#ff4058;animation:gamePulse .55s infinite}.game-shell.mistake{animation:gameShake .3s}.game-shell.mistake .game-task{background:rgba(255,64,88,.05)}
@keyframes feedFlash{0%{opacity:.72}100%{opacity:0}} 
@media(max-width:900px){.game-task{grid-template-columns:1fr}.about-photo{min-height:380px}}
@media(max-width:760px){.preview-choices{grid-template-columns:repeat(2,1fr)}.audio-task{grid-template-columns:1fr 40px}.audio-task button{grid-column:1/3}.game-task{padding:16px}.about-photo{min-height:330px}.about-links{flex-direction:column;gap:12px}}

/* V9.1 generated broadcast visuals */
.operation-visual{width:100%;display:grid;grid-template-columns:minmax(150px,260px) 1fr;gap:14px;align-items:center}.operation-visual img,.operation-image{width:100%;height:110px;object-fit:cover;border-radius:11px;border:1px solid rgba(77,231,255,.28);filter:saturate(.9) contrast(1.08);box-shadow:0 10px 28px rgba(0,0,0,.35)}.operation-visual div{display:grid;gap:7px}.operation-visual b{color:#55eaff;font:900 12px monospace;letter-spacing:.12em}.operation-visual span{color:#99a7b8;font-size:12px;line-height:1.5}.operation-split{width:100%;display:grid;grid-template-columns:minmax(150px,260px) 1fr;gap:14px;align-items:center}.remote-actions{display:grid;gap:10px}.source-monitor img,.program-feed{opacity:1!important}.source-monitor:not(:disabled):hover img{filter:saturate(1) brightness(.9) contrast(1.12);transform:scale(1.035)}
@media(max-width:760px){.operation-visual,.operation-split{grid-template-columns:1fr}.operation-visual img,.operation-image{height:120px}}


/* V9.3 interactive seven-note sound pad */
.sound-pad{position:relative;overflow:hidden}.sound-pad:before{content:"";position:absolute;inset:10% -20% auto;height:420px;background:radial-gradient(circle,rgba(77,231,255,.07),transparent 62%);pointer-events:none}.sound-pad-shell{position:relative;max-width:1120px;margin:0 auto;border:1px solid rgba(255,255,255,.11);border-radius:26px;overflow:hidden;background:linear-gradient(145deg,#111722,#070a0f 64%);box-shadow:0 30px 80px rgba(0,0,0,.36)}
.sound-pad-topbar{display:flex;justify-content:space-between;gap:16px;padding:15px 20px;border-bottom:1px solid rgba(255,255,255,.08);color:#758294;font:800 9px monospace;letter-spacing:.14em}.sound-pad-topbar b{color:#4de7ff}.sound-pad-display{display:grid;place-items:center;min-height:150px;padding:24px;background:radial-gradient(circle at center,rgba(77,231,255,.08),transparent 58%);text-align:center}.sound-pad-display span{font:900 clamp(50px,8vw,96px) monospace;line-height:1;color:#f5f8fb;text-shadow:0 0 28px rgba(77,231,255,.22);transition:.16s}.sound-pad-display small{margin-top:12px;color:#687486;font:800 9px monospace;letter-spacing:.18em}.sound-pad-display.playing span{transform:scale(1.08);color:var(--pad-color,#fff);text-shadow:0 0 34px var(--pad-glow,rgba(255,255,255,.25))}
.sound-pad-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:12px;padding:22px}.note-pad{--pad:#4de7ff;--pad-dark:#12343a;appearance:none;position:relative;min-height:148px;border:1px solid rgba(255,255,255,.12);border-radius:18px;overflow:hidden;color:#eaf1f7;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018));box-shadow:inset 0 1px rgba(255,255,255,.08),0 9px 0 #030507;cursor:pointer;transition:transform .1s,border-color .15s,box-shadow .15s,background .15s}.note-pad:before{content:"";position:absolute;inset:auto 0 0;height:7px;background:var(--pad);box-shadow:0 0 18px var(--pad)}.note-pad span,.note-pad small,.note-pad kbd{position:relative;z-index:1;display:block}.note-pad span{font:900 21px monospace;letter-spacing:.08em}.note-pad small{margin-top:8px;color:#8e9bab;font:700 14px Tahoma,Arial,sans-serif}.note-pad kbd{position:absolute;right:12px;top:11px;color:#657183;font:800 9px monospace}.note-pad:hover{transform:translateY(-3px);border-color:var(--pad);box-shadow:inset 0 1px rgba(255,255,255,.1),0 12px 0 #030507,0 0 24px color-mix(in srgb,var(--pad) 25%,transparent)}.note-pad:active,.note-pad.active{transform:translateY(7px);border-color:var(--pad);color:#fff;background:linear-gradient(180deg,color-mix(in srgb,var(--pad) 30%,#151a22),var(--pad-dark));box-shadow:inset 0 0 28px color-mix(in srgb,var(--pad) 38%,transparent),0 2px 0 #030507,0 0 30px color-mix(in srgb,var(--pad) 40%,transparent)}
.note-do{--pad:#ff4d6d;--pad-dark:#37121a}.note-re{--pad:#ff9f43;--pad-dark:#392512}.note-mi{--pad:#ffd93d;--pad-dark:#383012}.note-fa{--pad:#38d996;--pad-dark:#103628}.note-sol{--pad:#36c5f0;--pad-dark:#10313a}.note-la{--pad:#7d7cff;--pad-dark:#1b1b3b}.note-si{--pad:#d96cff;--pad-dark:#32163b}.sound-pad-help{margin:0;padding:0 22px 22px;text-align:center;color:#697586;font:700 10px monospace;letter-spacing:.08em}
@media(max-width:900px){.sound-pad-grid{grid-template-columns:repeat(4,1fr)}.note-pad:last-child{grid-column:2/4}}@media(max-width:620px){.sound-pad-grid{grid-template-columns:repeat(2,1fr);gap:10px;padding:14px}.note-pad{min-height:112px}.note-pad:last-child{grid-column:1/3}.sound-pad-display{min-height:115px}.sound-pad-topbar{font-size:8px}}

/* V9.5 simple cinematic ten-photo reel */
.vmix-lab{position:relative;overflow:hidden}.vmix-lab:before{content:"";position:absolute;inset:8% -20% auto;height:580px;background:radial-gradient(circle,rgba(77,231,255,.07),transparent 65%);pointer-events:none}.vmix-console{max-width:1120px;margin:0 auto;border:1px solid rgba(255,255,255,.12);border-radius:22px;background:linear-gradient(180deg,#171b21,#090c10);box-shadow:0 30px 90px rgba(0,0,0,.45);overflow:hidden}.vmix-toolbar{min-height:58px;padding:10px 14px;display:flex;align-items:center;gap:12px;border-bottom:1px solid rgba(255,255,255,.09);background:#20252c}.vmix-brand{display:flex;align-items:center;gap:10px;margin-right:auto}.vmix-brand b{padding:6px 9px;border-radius:5px;background:#168f4c;color:#fff;font:900 14px Arial}.vmix-brand span{color:#8995a4;font:800 9px monospace;letter-spacing:.16em}.record-control{display:flex;align-items:center;gap:8px;border:1px solid #71343b;border-radius:7px;background:#2a1519;color:#ff9aa4;padding:10px 13px;font:900 10px monospace;letter-spacing:.08em;cursor:pointer;transition:.2s}.record-control i{width:9px;height:9px;border-radius:50%;background:#ff4658}.record-control.recording{background:#8c1f2d;border-color:#ff6473;color:#fff}.record-control.recording i{animation:recPulse 1s infinite}.record-time{min-width:58px;text-align:center;color:#dfe7ef;font:800 11px monospace}@keyframes recPulse{50%{opacity:.25}}.vmix-screens{display:grid;grid-template-columns:minmax(0,1fr) 82px minmax(0,1fr);gap:14px;align-items:center;padding:18px}.vmix-screen{min-width:0;border:2px solid #d49a27;border-radius:7px;background:#020304;overflow:hidden}.program-screen{border-color:#25b760}.screen-header{height:34px;padding:0 10px;display:flex;align-items:center;justify-content:space-between;background:#13171c;color:#dbe3ec;font:900 10px monospace;letter-spacing:.08em}.preview-screen .screen-header span{color:#ffc44f}.program-screen .screen-header span{color:#4ae184}.screen-picture{position:relative;aspect-ratio:16/9;overflow:hidden;background:#030507}.screen-picture img{width:100%;height:100%;display:block;object-fit:cover;filter:saturate(.9) contrast(1.04) brightness(.82);transition:opacity .24s,transform .45s}.program-screen.transitioning .screen-picture img{opacity:.05;transform:scale(1.04)}.live-bug{position:absolute;display:none}.program-screen{position:relative}.program-screen.on-air .live-bug{display:flex;right:10px;bottom:10px;align-items:center;gap:5px;padding:5px 7px;border-radius:4px;background:#b71828;color:#fff;font:900 9px monospace}.live-bug i{width:6px;height:6px;border-radius:50%;background:#fff;animation:recPulse 1s infinite}.merge-control{height:88px;border:1px solid #46505d;border-radius:10px;background:linear-gradient(180deg,#313943,#151a20);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font:900 10px monospace;letter-spacing:.1em;cursor:pointer;transition:.2s}.merge-control b{font-size:24px;color:#4de7ff}.merge-control:hover{border-color:#4de7ff;box-shadow:0 0 22px rgba(77,231,255,.14)}.merge-control:active{transform:scale(.97)}.vmix-inputs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:0 18px 18px}.vmix-input{position:relative;min-width:0;padding:4px;border:1px solid #343c46;border-radius:8px;background:#11151a;color:#dce5ee;cursor:pointer;overflow:hidden;transition:.2s;text-align:left}.vmix-input img{width:100%;aspect-ratio:16/8.6;display:block;object-fit:cover;filter:brightness(.68) saturate(.75)}.vmix-input span{position:absolute;z-index:2;top:8px;left:8px;width:22px;height:22px;border-radius:4px;background:rgba(0,0,0,.78);display:grid;place-items:center;font:900 10px monospace}.vmix-input b{display:block;padding:8px 6px 5px;font:900 10px monospace;letter-spacing:.08em}.vmix-input:hover,.vmix-input.active{border-color:#e3aa35;box-shadow:inset 0 0 0 1px rgba(227,170,53,.35)}.vmix-input.active img{filter:brightness(.88) saturate(.95)}.vmix-statusbar{height:48px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(255,255,255,.08);background:#080b0e;color:#768494;font:800 10px monospace;letter-spacing:.1em}.vmix-statusbar button{border:1px solid #343c46;border-radius:5px;background:#171c22;color:#aeb9c5;padding:7px 11px;font:800 9px monospace;cursor:pointer}.vmix-success{display:none;padding:13px 18px;background:rgba(26,154,82,.14);border-top:1px solid rgba(74,225,132,.25);color:#b6f5cb;align-items:center;justify-content:space-between;gap:12px;font:700 12px Arial}.vmix-success.show{display:flex}.vmix-success span{color:#88aa95;font:700 10px monospace}@media(max-width:760px){.vmix-screens{grid-template-columns:1fr;gap:10px}.merge-control{height:54px;flex-direction:row}.merge-control b{transform:rotate(90deg)}.vmix-inputs{grid-template-columns:repeat(2,minmax(0,1fr))}.vmix-toolbar{flex-wrap:wrap}.vmix-brand{width:100%}.vmix-success{align-items:flex-start;flex-direction:column}}@media(max-width:480px){.vmix-console{border-radius:15px}.vmix-screens,.vmix-inputs{padding-left:10px;padding-right:10px}.vmix-toolbar{padding:10px}.vmix-brand span{display:none}.record-control{flex:1;justify-content:center}.screen-header{height:30px}.vmix-statusbar{padding:0 10px}.vmix-input b{font-size:9px}}.reel-prev{left:10px}.reel-next{right:10px}.reel-slide{aspect-ratio:4/3}.reel-footer{padding-inline:2px}.reel-dot{width:16px}.reel-dot.active{width:28px}}

/* V9.7 local photo/video input */
.screen-picture video{width:100%;height:100%;display:block;object-fit:cover;filter:saturate(.9) contrast(1.04) brightness(.82);transition:opacity .24s,transform .45s}
.screen-picture [hidden]{display:none!important}
.program-screen.transitioning .screen-picture video{opacity:.05;transform:scale(1.04)}
.vmix-inputs{grid-template-columns:repeat(5,minmax(0,1fr))}
.vmix-upload{min-height:0;position:relative;border:1px dashed #465260;border-radius:8px;background:#10151b;color:#c9d5df;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center;transition:.2s;aspect-ratio:16/11.6}
.vmix-upload:hover{border-color:#4de7ff;background:#141d24;box-shadow:inset 0 0 0 1px rgba(77,231,255,.18)}
.vmix-upload input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.vmix-upload span{font:300 29px/1 Arial;color:#4de7ff}
.vmix-upload b{font:900 10px monospace;letter-spacing:.08em}
.vmix-upload small{font:800 8px monospace;color:#718090;letter-spacing:.09em}
@media(max-width:900px){.vmix-inputs{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.vmix-inputs{grid-template-columns:repeat(2,minmax(0,1fr))}.vmix-upload{aspect-ratio:16/10.5}}

/* V9.8 video input thumbnails */
.screen-picture video{width:100%;height:100%;display:block;object-fit:cover;filter:saturate(.95) contrast(1.04) brightness(.88);transition:opacity .24s,transform .45s}
.program-screen.transitioning .screen-picture video{opacity:.05;transform:scale(1.04)}
.vmix-input video{width:100%;aspect-ratio:16/8.6;display:block;object-fit:cover;filter:brightness(.72) saturate(.9);pointer-events:none}
.vmix-input:hover video,.vmix-input.active video{filter:brightness(.92) saturate(1.05)}

/* V9.9 rebuilt compact vMix game */
.vmix-step{margin-left:auto;padding:7px 10px;border:1px solid rgba(77,231,255,.22);border-radius:6px;background:rgba(77,231,255,.06);color:#7deeff;font:800 9px monospace;letter-spacing:.09em}
.vmix-toolbar .vmix-brand{margin-right:0}
.vmix-toolbar .record-control{margin-left:0}
.record-control:disabled,.merge-control:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.65);box-shadow:none}
.screen-picture{isolation:isolate}
.screen-picture img,.screen-picture video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;filter:saturate(.92) contrast(1.06) brightness(.84);transition:opacity .3s,transform .52s}
.screen-picture.empty{background:radial-gradient(circle at 50% 45%,#19202a,#05070a 66%)}
.screen-placeholder{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:8px;color:#758292;background:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:32px 32px}
.screen-placeholder[hidden]{display:none}
.screen-placeholder b{font:900 14px monospace;letter-spacing:.18em;color:#aeb9c5}.screen-placeholder span{font:700 9px monospace;letter-spacing:.08em}.program-placeholder b{color:#72df9e}
.program-screen.transitioning .screen-picture img,.program-screen.transitioning .screen-picture video{opacity:.08;transform:scale(1.065);filter:blur(5px)}
.vmix-workflow{display:flex;align-items:center;justify-content:center;gap:9px;padding:0 18px 14px;color:#586574;font:900 9px monospace;letter-spacing:.09em}.vmix-workflow span{padding:7px 10px;border:1px solid #29313a;border-radius:999px;background:#0d1116;transition:.2s}.vmix-workflow span.active{border-color:#4de7ff;color:#8df2ff;background:rgba(77,231,255,.08)}.vmix-workflow i{font-style:normal;color:#394550;font-size:16px}
.vmix-inputs{grid-template-columns:repeat(3,minmax(0,1fr));max-width:820px;margin:0 auto;width:100%}
.vmix-input small{display:block;padding:0 6px 7px;color:#6f7d8c;font:800 8px monospace;letter-spacing:.12em}.vmix-input.active{border-color:#e3aa35;background:#1b1710}.vmix-input.active:after{content:'PREVIEW';position:absolute;right:7px;top:7px;padding:4px 5px;border-radius:4px;background:#d59b28;color:#090b0d;font:900 7px monospace;letter-spacing:.08em}
.vmix-upload{aspect-ratio:auto;min-height:126px}
.merge-control small{font:800 7px monospace;color:#758391;letter-spacing:.09em}
@media(max-width:760px){.vmix-step{order:3;width:100%;text-align:center}.vmix-toolbar .record-control{flex:1}.vmix-workflow{gap:5px}.vmix-workflow span{padding:6px 7px;font-size:8px}.vmix-inputs{grid-template-columns:1fr 1fr}.vmix-upload{grid-column:1/3;min-height:92px}.merge-control small{display:none}}

/* V10 live director challenge */
.vmix-v10 .challenge-topbar{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.12);background:#0b1018}.challenge-topbar>div:first-child{display:flex;flex-direction:column}.challenge-topbar span{font-size:.72rem;color:#8e9aab;letter-spacing:.12em}.challenge-start,.load-preview{border:0;border-radius:8px;background:#25c66f;color:#06130c;font-weight:800;padding:11px 16px;cursor:pointer}.challenge-start:disabled{opacity:.45}.challenge-clock{font:800 1.7rem/1 monospace;color:#dce8f7;min-width:84px;text-align:right}.vmix-v10.danger .challenge-clock{color:#ff4d5a;animation:vmixPulse .65s infinite}.vmix-v10.failed{outline:2px solid #ff4d5a}.director-workflow{display:grid;grid-template-columns:1.35fr .65fr;gap:18px;padding:18px}.workflow-block{border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:14px;background:rgba(6,10,16,.72)}.workflow-block h3{font-size:.82rem;letter-spacing:.1em;margin:0 0 12px;color:#b8c6d8}.compact-inputs{grid-template-columns:repeat(3,1fr)!important}.vmix-upload input{position:absolute;opacity:0;width:1px;height:1px}.vmix-upload:has(input:focus-visible){outline:2px solid #fff;outline-offset:2px}.frame-options{display:grid;gap:8px}.frame-options button{border:1px solid rgba(255,255,255,.14);background:#111925;color:#dbe6f4;border-radius:8px;padding:10px;cursor:pointer;text-align:left}.frame-options button.active{border-color:#25c66f;background:rgba(37,198,111,.12)}.load-preview{width:100%;margin-top:12px;background:#36a3ff;color:#03101b}.load-preview:disabled{opacity:.35;cursor:not-allowed}.media-host{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;background:#04070b}.media-host video,.media-host img{width:100%;height:100%;object-fit:cover}.screen-empty{color:#657184;font-size:.8rem;letter-spacing:.18em}.frame-overlay{display:none;position:absolute;left:0;right:0;bottom:0;padding:9px 14px;background:linear-gradient(90deg,rgba(196,15,38,.95),rgba(80,4,15,.82));z-index:2}.frame-overlay b,.frame-overlay small{display:block}.frame-overlay small{font-size:.62rem;letter-spacing:.14em}.frame-breaking .frame-overlay{display:block}.frame-gaming .frame-overlay{display:block;left:12px;right:auto;bottom:12px;border-left:4px solid #25c66f;background:rgba(5,9,15,.82);border-radius:5px;padding:8px 12px}.frame-gaming .frame-overlay b{color:#25c66f}.vmix-v10 .record-control:disabled,.vmix-v10 .merge-control:disabled{opacity:.3;cursor:not-allowed}.vmix-v10 .record-control.recording{background:#b51425;color:white}.vmix-v10 .program-screen.transitioning{animation:vmixTake .55s ease}.vmix-v10 .vmix-success.show{display:flex}.vmix-v10 .vmix-success{display:none}.vmix-v10 .vmix-input:disabled,.vmix-v10 .vmix-upload:has(input:disabled){opacity:.35;pointer-events:none}
@keyframes vmixPulse{50%{transform:scale(1.07)}}@keyframes vmixTake{0%{filter:brightness(3);transform:scale(.98)}100%{filter:none;transform:none}}
@media(max-width:760px){.vmix-v10 .challenge-topbar{grid-template-columns:1fr auto}.challenge-start{grid-row:2;grid-column:1/-1}.director-workflow{grid-template-columns:1fr}.compact-inputs{grid-template-columns:repeat(2,1fr)!important}.vmix-v10 .vmix-screens{grid-template-columns:1fr}.vmix-v10 .merge-control{transform:rotate(90deg);margin:auto}}

/* V11 transition desk + large countdown */
.vmix-v10 .challenge-topbar{grid-template-columns:1fr auto;position:relative;padding-top:92px}
.vmix-v10 .challenge-clock{position:absolute;left:50%;top:14px;transform:translateX(-50%);min-width:240px;text-align:center;font:900 clamp(3.4rem,8vw,6rem)/1 monospace;letter-spacing:-.08em;color:#f4f8ff;text-shadow:0 0 28px rgba(77,231,255,.28)}
.vmix-v10.danger .challenge-clock{text-shadow:0 0 34px rgba(255,77,90,.5)}
.vmix-v10 .vmix-screens{grid-template-columns:minmax(0,1fr) 112px minmax(0,1fr)}
.transition-controls{display:grid;gap:8px}
.transition-control{min-height:64px;border:1px solid #46505d;border-radius:9px;background:linear-gradient(180deg,#313943,#151a20);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font:900 10px monospace;letter-spacing:.1em;cursor:pointer;transition:.2s}
.transition-control small{font:800 7px monospace;color:#8491a0;letter-spacing:.08em}
.transition-control.cut span{color:#ffcf4a}.transition-control.fade span{color:#64c8ff}.transition-control.merge span{color:#64f0a2}
.transition-control:hover:not(:disabled){transform:translateY(-1px);border-color:#86dfff}.transition-control:active:not(:disabled){transform:scale(.97)}
.transition-control:disabled{opacity:.3;cursor:not-allowed;filter:grayscale(.6)}
.program-screen.transition-cut .screen-picture{animation:v11Cut .12s steps(1)}
.program-screen.transition-fade .screen-picture{animation:v11Fade .75s ease}
.program-screen.transition-merge .screen-picture{animation:v11Merge .95s cubic-bezier(.2,.8,.2,1)}
@keyframes v11Cut{0%{filter:brightness(2)}100%{filter:none}}
@keyframes v11Fade{0%{opacity:.05}55%{opacity:.05}100%{opacity:1}}
@keyframes v11Merge{0%{opacity:.08;transform:scale(.86) rotateY(-12deg)}100%{opacity:1;transform:none}}
@media(max-width:760px){.vmix-v10 .challenge-topbar{padding-top:78px}.vmix-v10 .challenge-clock{font-size:3.7rem;top:12px}.vmix-v10 .vmix-screens{grid-template-columns:1fr}.transition-controls{grid-template-columns:repeat(3,1fr);width:100%;transform:none!important}.transition-control{min-height:52px}.challenge-start{grid-row:auto;grid-column:auto}}

/* V11.1 clean transition stack + exact media output */
.vmix-v10 .vmix-screens{grid-template-columns:minmax(0,1fr) 88px minmax(0,1fr);align-items:stretch}
.transition-controls{display:flex;flex-direction:column;justify-content:center;gap:14px;background:transparent;padding:0}
.transition-control{min-height:0;height:auto;border:0;border-radius:0;background:transparent!important;box-shadow:none!important;padding:10px 4px;color:#d9e2ec;font:900 16px/1 monospace;letter-spacing:.12em;cursor:pointer;opacity:1;filter:none;transition:color .18s,transform .18s}
.transition-control:hover:not(:disabled){transform:translateX(2px);border:0;color:#fff}
.transition-control:active:not(:disabled){transform:scale(.96)}
.transition-control.cut{color:#ffd04f}.transition-control.fade{color:#65caff}.transition-control.merge{color:#5cf0a0}
.transition-control:disabled{opacity:.22;cursor:not-allowed;filter:none}
.screen-picture img,.screen-picture video,.media-host img,.media-host video{width:100%;height:100%;display:block;object-fit:contain;background:#000;filter:none!important;transform:none}
.screen-picture .frame-overlay{display:none!important}
.exact-output-note{margin:0 0 16px;color:#8f9baa;font:700 11px/1.6 monospace}
@media(max-width:760px){
  .vmix-v10 .vmix-screens{grid-template-columns:1fr}
  .transition-controls{display:flex;flex-direction:column;gap:2px;align-items:center;width:100%;padding:4px 0}
  .transition-control{width:100%;padding:8px 0;font-size:15px}
}

/* V12 reusable inputs + manual shot designer */
.director-workflow-v12{grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);align-items:start}
.workflow-help{margin:.2rem 0 1rem;color:#8fa0b2;font-size:.78rem;line-height:1.5}
.media-library-block .compact-inputs{grid-template-columns:repeat(3,minmax(0,1fr))}
.vmix-upload{padding:0!important;overflow:hidden;display:grid!important;grid-template-rows:1fr auto auto;min-height:142px}
.vmix-upload .upload-preview{min-height:90px;display:grid;place-items:center;background:#090f16;overflow:hidden}
.vmix-upload .upload-preview>span{font-size:2rem;color:#25cde7}
.vmix-upload .upload-preview img,.vmix-upload .upload-preview video{width:100%;height:100%;object-fit:cover;display:block}
.vmix-upload>b,.vmix-upload>small{padding:0 .75rem}.vmix-upload>b{padding-top:.55rem}.vmix-upload>small{padding-bottom:.65rem}
.vmix-upload.active{border-color:#f4b000;box-shadow:inset 0 0 0 1px #f4b000}
.template-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem;margin-bottom:1rem}
.template-btn{border:1px solid #344353;background:#111a25;color:#c9d4df;border-radius:8px;padding:.7rem .35rem;font:700 .68rem/1 var(--mono,monospace);letter-spacing:.04em;cursor:pointer}
.template-btn:hover,.template-btn.active{border-color:#1de879;background:#0b2c20;color:#66f6a9}
.designer-controls{display:grid;grid-template-columns:1fr 1fr;gap:.7rem .8rem}
.designer-controls label{display:grid;gap:.35rem;color:#aebccc;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.designer-controls select,.designer-controls input[type="text"]{width:100%;border:1px solid #344353;background:#0d151f;color:#eef6ff;border-radius:7px;padding:.62rem .7rem}
.designer-controls input[type="range"]{width:100%;accent-color:#1de879}
.designer-controls output{float:right;color:#1de879}
.designer-controls .title-control,.designer-controls .form-check{grid-column:1/-1}
.designer-controls .form-check{display:flex;align-items:center;gap:.6rem;text-transform:none;letter-spacing:0}
.reset-shot{margin-top:.9rem;width:100%;border:1px solid #44515e;background:transparent;color:#b7c4d0;border-radius:7px;padding:.65rem;cursor:pointer;font-weight:800}
.screen-picture .frame-overlay{display:none!important}
.media-host,.shot-stage{width:100%;height:100%;overflow:hidden;position:relative;background:#05080c}
.shot-stage .shot-media{width:100%;height:100%;display:block;transform-origin:center center;transition:transform .12s ease}
.custom-gfx{position:absolute;inset:0;pointer-events:none;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:5%;color:white;text-shadow:0 2px 8px #000}
.custom-gfx b{font-size:clamp(1rem,2.2vw,2rem);line-height:1}.custom-gfx small{font:.65rem/1.5 monospace;letter-spacing:.12em;margin-top:.4rem}
.gfx-lower-third:before,.gfx-news:before,.gfx-gaming:before,.gfx-interview:before{content:"";position:absolute;left:3%;right:3%;bottom:3%;height:23%;background:rgba(5,12,20,.82);border-left:5px solid #1de879;z-index:-1}
.gfx-news:before{background:rgba(155,0,20,.88);border-left-color:#fff}
.gfx-gaming:before{background:linear-gradient(90deg,rgba(62,0,140,.9),rgba(0,95,145,.86));border-left-color:#26eaff}
.gfx-interview:before{height:18%;background:rgba(0,0,0,.72);border-left-color:#f4b000}
.gfx-cinema{justify-content:center;align-items:center;text-align:center;padding:10%;background:linear-gradient(to bottom,rgba(0,0,0,.35),transparent 30%,transparent 70%,rgba(0,0,0,.5))}
.gfx-cinema b{font-size:clamp(1.5rem,4vw,3.5rem);letter-spacing:.12em}.gfx-clean{display:none}
@media(max-width:800px){.director-workflow-v12{grid-template-columns:1fr}.designer-controls{grid-template-columns:1fr}.designer-controls .title-control,.designer-controls .form-check{grid-column:auto}.media-library-block .compact-inputs{grid-template-columns:repeat(2,minmax(0,1fr))}.vmix-upload{grid-column:1/-1}}

/* ---------- Bilingual language controls ---------- */
.language-switcher{display:flex;align-items:center;gap:8px;margin-left:auto;margin-right:16px;direction:ltr;position:relative;z-index:10}
.language-button{width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(7,10,15,.76);display:grid;place-items:center;padding:3px;cursor:pointer;position:relative;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;overflow:visible}
.language-button img{width:38px;height:38px;border-radius:50%;object-fit:cover;display:block;box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.language-button span{position:absolute;top:54px;left:50%;transform:translateX(-50%);font-size:10px;line-height:1;color:#fff;background:#101722;border:1px solid rgba(255,255,255,.14);padding:4px 7px;border-radius:999px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s ease}
.language-button:hover{transform:translateY(-2px);border-color:#38e896}.language-button:hover span{opacity:1}
.language-button.active{border-color:#38e896;box-shadow:0 0 0 3px rgba(56,232,150,.16),0 0 22px rgba(56,232,150,.18)}
html[dir="rtl"] body{font-family:Tahoma,"Segoe UI",Arial,sans-serif}
html[dir="rtl"] .site-header,html[dir="rtl"] .hero-copy-overlay,html[dir="rtl"] .section-heading,html[dir="rtl"] .about-copy,html[dir="rtl"] .contact{text-align:right}
html[dir="rtl"] .site-header{direction:rtl}
html[dir="rtl"] .language-switcher{margin-left:16px;margin-right:auto;direction:ltr}
html[dir="rtl"] .nav{direction:rtl}
html[dir="rtl"] .hero-kicker,html[dir="rtl"] .eyebrow{justify-content:flex-start}
html[dir="rtl"] .hero-work-button b,html[dir="rtl"] .text-link span{display:inline-block;transform:scaleX(-1)}
html[dir="rtl"] .expertise-item,html[dir="rtl"] .skill-card,html[dir="rtl"] .workflow-block,html[dir="rtl"] .game-task{text-align:right}
html[dir="rtl"] .designer-controls label,html[dir="rtl"] .workflow-help{direction:rtl;text-align:right}
html[dir="rtl"] .vmix-statusbar,html[dir="rtl"] .challenge-topbar,html[dir="rtl"] .vmix-toolbar{direction:rtl}
html[dir="rtl"] .transition-controls,html[dir="rtl"] .language-switcher{direction:ltr}
html[dir="rtl"] input[type="text"]{text-align:right}
.about-fa{display:block!important}
.site-credit{width:100%;margin:14px 0 0;text-align:center;font-size:12px;color:rgba(255,255,255,.58);letter-spacing:.02em}
.site-credit a{color:#7bf0b5;text-decoration:none}.site-credit a:hover{text-decoration:underline}
@media(max-width:900px){.language-switcher{order:3;margin-left:8px;margin-right:0}.language-button{width:42px;height:42px}.language-button img{width:33px;height:33px}.site-header{flex-wrap:wrap}.nav{width:100%;order:4}.language-button span{display:none}}
@media(max-width:560px){.language-switcher{gap:5px}.language-button{width:38px;height:38px}.language-button img{width:29px;height:29px}}

/* V11.7 keyboard safety control */
.sound-keyboard-toggle{display:inline-flex;align-items:center;gap:8px;margin-left:auto;padding:8px 11px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(0,0,0,.28);color:#aebbc2;font:800 10px/1 monospace;letter-spacing:.08em;cursor:pointer;transition:.2s ease}
.sound-keyboard-toggle:hover{border-color:rgba(93,255,226,.45);color:#fff}.sound-keyboard-toggle.active{color:#061014;background:#5dffe2;border-color:#5dffe2;box-shadow:0 0 22px rgba(93,255,226,.3)}
.sound-keyboard-dot{width:8px;height:8px;border-radius:50%;background:#65727a;box-shadow:none}.sound-keyboard-toggle.active .sound-keyboard-dot{background:#071317;box-shadow:0 0 0 3px rgba(0,0,0,.12)}
@media(max-width:650px){.sound-pad-topbar{flex-wrap:wrap}.sound-keyboard-toggle{width:100%;justify-content:center;margin:8px 0 0}}


/* V19 — About social links + X quick-contact button */
.sk-contact-btn.x-social{background:#050505;border-color:rgba(255,255,255,.22)}
.sk-contact-btn.x-social:hover{border-color:rgba(255,255,255,.7);box-shadow:0 0 24px rgba(255,255,255,.15)}
.sk-contact-btn.x-social svg{fill:#fff}


/* V20 — SK brand integration */
.brand-mark-logo{display:grid;place-items:center;overflow:visible;background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}
.brand-mark-logo img{display:block;width:100%;height:100%;object-fit:contain}
.about-card>*:not(.about-logo-watermark){position:relative;z-index:1}
.about-logo-watermark{position:absolute;inset:50% auto auto 50%;width:min(62vw,680px);aspect-ratio:1;transform:translate(-50%,-50%);opacity:.045;filter:blur(2px);pointer-events:none;z-index:0}
.about-logo-watermark img{width:100%;height:100%;object-fit:contain}
@media(max-width:760px){.about-logo-watermark{width:min(105vw,560px);opacity:.035;filter:blur(1.5px)}}

/* V21 — correct Lion & Sun language icon */
.language-button[data-lang="fa"] img{
  object-fit:contain;
  background:transparent;
  border-radius:50%;
}


/* V23 — Sam identity, live presence and Control Room easter egg */
.site-live-counter{position:fixed;left:22px;bottom:22px;z-index:190;display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(5,8,12,.78);backdrop-filter:blur(14px);box-shadow:0 14px 40px rgba(0,0,0,.28);font:800 9px/1.1 monospace;letter-spacing:.1em;color:#aebbc2;pointer-events:none}
.site-live-counter i{width:7px;height:7px;border-radius:50%;background:#5dffe2;box-shadow:0 0 12px rgba(93,255,226,.9);animation:skLivePulse 1.7s ease-in-out infinite}.site-live-counter b{color:#fff;font-size:11px}
@keyframes skLivePulse{50%{opacity:.45;transform:scale(.75)}}
.control-room-easter{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:rgba(0,3,6,.96);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s ease,visibility .28s ease;overflow:hidden}
.control-room-easter.active{opacity:1;visibility:visible}.cr-scanlines{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 4px);animation:crScan 7s linear infinite}.cr-grid{position:absolute;inset:-20%;background-image:linear-gradient(rgba(93,255,226,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(93,255,226,.06) 1px,transparent 1px);background-size:46px 46px;transform:perspective(600px) rotateX(58deg) translateY(35%);transform-origin:center bottom;animation:crGrid 2.8s ease-out both}
.cr-console{position:relative;width:min(780px,88vw);text-align:center;padding:42px;border:1px solid rgba(93,255,226,.28);background:rgba(4,10,14,.78);box-shadow:0 0 100px rgba(93,255,226,.1),inset 0 0 60px rgba(93,255,226,.035);clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);transform:scale(.88);opacity:0}.control-room-easter.active .cr-console{animation:crConsole .55s .08s cubic-bezier(.2,.8,.2,1) forwards}
.cr-on-air{display:inline-flex;align-items:center;gap:9px;margin-bottom:26px;padding:8px 13px;border:1px solid rgba(255,55,55,.5);color:#ff5b5b;font:900 11px/1 monospace;letter-spacing:.18em}.cr-on-air i{width:9px;height:9px;border-radius:50%;background:#ff3535;box-shadow:0 0 18px #ff3535;animation:crBlink .75s steps(1) infinite}
.cr-monitors{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:0 auto 28px}.cr-monitors span{height:74px;display:grid;place-items:end start;padding:9px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(135deg,rgba(93,255,226,.12),rgba(143,108,255,.08));color:#8da0aa;font:800 8px/1 monospace;letter-spacing:.12em}.cr-monitors span:nth-child(3){border-color:rgba(255,55,55,.55);box-shadow:inset 0 0 22px rgba(255,55,55,.08)}
.cr-console strong{display:block;font-size:clamp(24px,5vw,58px);line-height:.95;letter-spacing:.05em;color:#fff}.cr-console small{display:block;margin-top:15px;color:#5dffe2;font:800 10px/1.2 monospace;letter-spacing:.16em}
@keyframes crConsole{to{opacity:1;transform:scale(1)}}@keyframes crBlink{50%{opacity:.25}}@keyframes crScan{to{transform:translateY(20px)}}@keyframes crGrid{from{opacity:0;transform:perspective(600px) rotateX(58deg) translateY(50%)}to{opacity:1;transform:perspective(600px) rotateX(58deg) translateY(35%)}}
@media(max-width:650px){.site-live-counter{left:12px;bottom:12px}.site-live-counter span{display:none}.cr-console{padding:28px 18px}.cr-monitors{grid-template-columns:repeat(2,1fr)}.cr-monitors span{height:58px}}
@media(prefers-reduced-motion:reduce){.control-room-easter *,.site-live-counter i{animation:none!important}}

/* V26 Pro — polished Sam identity + cinematic Control Room */
.control-room-easter[hidden]{display:none!important}
.control-room-easter{background:radial-gradient(circle at 50% 40%,rgba(10,32,39,.68),rgba(0,2,5,.985) 68%)!important}
.cr-noise{position:absolute;inset:-50%;opacity:.12;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.52'/%3E%3C/svg%3E");animation:crNoise .18s steps(2) infinite}
.cr-sweep{position:absolute;inset:-20% 0 auto;height:35%;background:linear-gradient(180deg,transparent,rgba(93,255,226,.08),transparent);filter:blur(8px);animation:crSweep 2.4s ease-in-out infinite}
.cr-hud{position:relative;width:min(920px,91vw);padding:clamp(18px,4vw,42px);border:1px solid rgba(113,255,232,.27);background:linear-gradient(145deg,rgba(3,10,14,.91),rgba(4,15,20,.75));box-shadow:0 0 0 1px rgba(255,255,255,.025),0 28px 100px rgba(0,0,0,.65),inset 0 0 80px rgba(93,255,226,.025);clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);opacity:0;transform:translateY(18px) scale(.97)}
.control-room-easter.active .cr-hud{animation:crHudIn .55s .08s cubic-bezier(.2,.8,.2,1) forwards}
.cr-topline{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.1);font:800 9px/1 monospace;letter-spacing:.15em;color:#8ea3ab}.cr-topline span{display:flex;align-items:center;gap:8px;color:#ff6464}.cr-topline i{width:8px;height:8px;border-radius:50%;background:#ff3434;box-shadow:0 0 18px #ff3434;animation:crBlink .75s steps(1) infinite}.cr-topline b{font:inherit;color:#69ffe4}
.cr-monitor-wall{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0 28px}.cr-monitor-wall>div{position:relative;min-height:112px;padding:12px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid rgba(255,255,255,.12);background:linear-gradient(145deg,rgba(93,255,226,.07),rgba(91,94,255,.035));overflow:hidden}.cr-monitor-wall>div:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.08),transparent 65%);transform:translateX(-130%);animation:crMonitorGlint 2.3s .4s ease infinite}.cr-monitor-wall em{font:800 8px/1 monospace;letter-spacing:.15em;color:#82969e}.cr-monitor-wall strong{font:900 clamp(10px,1.5vw,14px)/1 monospace;letter-spacing:.08em;color:#dce8eb}.cr-monitor-wall .program{border-color:rgba(255,55,55,.5);box-shadow:inset 0 0 30px rgba(255,45,45,.09)}.cr-monitor-wall .program strong{color:#ff5c5c}
.cr-title{text-align:center}.cr-title small{display:block;color:#65ffe3;font:900 9px/1 monospace;letter-spacing:.24em;opacity:0}.cr-title strong{display:block;margin:12px 0 10px;font-size:clamp(25px,5vw,58px);line-height:.94;letter-spacing:.025em;color:#fff;text-shadow:0 0 30px rgba(93,255,226,.15);opacity:0}.cr-title span{display:block;color:#91a4ab;font:800 9px/1.2 monospace;letter-spacing:.18em;opacity:0}.control-room-easter.active .cr-title small{animation:crReveal .35s .45s forwards}.control-room-easter.active .cr-title strong{animation:crReveal .5s .68s forwards}.control-room-easter.active .cr-title span{animation:crReveal .35s .98s forwards}
.cr-meter{height:20px;margin-top:28px;display:flex;align-items:end;justify-content:center;gap:5px}.cr-meter i{display:block;width:4px;height:4px;background:#5dffe2;box-shadow:0 0 8px rgba(93,255,226,.55);animation:crMeter .7s ease-in-out infinite alternate}.cr-meter i:nth-child(3n){animation-delay:.12s}.cr-meter i:nth-child(4n){animation-delay:.24s}.cr-meter i:nth-child(5n){animation-delay:.36s}
@keyframes crHudIn{to{opacity:1;transform:translateY(0) scale(1)}}@keyframes crReveal{to{opacity:1;transform:translateY(0)}from{opacity:0;transform:translateY(8px)}}@keyframes crSweep{from{transform:translateY(-40vh)}to{transform:translateY(140vh)}}@keyframes crNoise{0%{transform:translate(0)}25%{transform:translate(2%,-1%)}50%{transform:translate(-1%,2%)}75%{transform:translate(1%,1%)}}@keyframes crMonitorGlint{55%,100%{transform:translateX(130%)}}@keyframes crMeter{to{height:18px}}
.sk-msg-meta b{letter-spacing:.02em}.sk-ai-studio-btn{text-transform:none!important}.sk-ai-label{text-transform:none!important}
@media(max-width:650px){.cr-monitor-wall{grid-template-columns:repeat(2,1fr)}.cr-monitor-wall>div{min-height:78px}.cr-hud{padding:22px 15px}.cr-title strong{font-size:clamp(24px,9vw,38px)}}