/* ====================================================================
   Warstwa "chrome" samego DEMA (kursor animowany, pasek sterowania,
   etykieta trybu pokazowego). Te reguły NIE występują w prawdziwej
   aplikacji — celowo są trzymane w osobnym pliku, aby odtworzony
   interfejs (style.css) pozostał nietknięty i identyczny z oryginałem.
   ==================================================================== */
html, body{ background:#0b0b0c; }

#demo-cursor{
  position:fixed; left:0; top:0; width:34px; height:34px; z-index:9999;
  pointer-events:none; transform:translate(-6px,-4px);
  transition:left .55s cubic-bezier(.65,0,.35,1), top .55s cubic-bezier(.65,0,.35,1), opacity .25s ease;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.45));
  opacity:0;
}
#demo-cursor.visible{ opacity:1; }
#demo-cursor svg{ width:100%; height:100%; display:block; }
#demo-cursor .demo-click-ring{
  position:absolute; left:2px; top:0; width:26px; height:26px; border-radius:50%;
  border:2px solid #a47864; opacity:0; transform:scale(.4);
}
#demo-cursor.clicking .demo-click-ring{
  animation:demo-click-pulse .5s ease-out;
}
@keyframes demo-click-pulse{
  0%{ opacity:.9; transform:scale(.3); }
  100%{ opacity:0; transform:scale(1.9); }
}

.demo-target-flash{ position:relative }
.demo-target-flash::after{
  content:''; position:absolute; inset:-3px; border-radius:inherit;
  box-shadow:0 0 0 3px rgba(164,120,100,.55);
  animation:demo-target-fade .55s ease-out forwards;
  pointer-events:none;
}
@keyframes demo-target-fade{
  0%{ box-shadow:0 0 0 3px rgba(164,120,100,.65); }
  100%{ box-shadow:0 0 0 3px rgba(164,120,100,0); }
}

.demo-caret{
  display:inline-block; width:2px; height:1em; background:var(--brand,#a47864);
  vertical-align:text-bottom; margin-left:1px; animation:demo-caret-blink 1s step-end infinite;
}
@keyframes demo-caret-blink{ 50%{ opacity:0 } }

.demo-scene-fade-out{ animation:demo-fade-out .35s ease forwards; }
.demo-scene-fade-in{ animation:demo-fade-in .4s ease both; }
@keyframes demo-fade-out{ to{ opacity:0; transform:translateY(-6px); } }
@keyframes demo-fade-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }

.demo-badge{
  position:fixed; top:14px; left:50%; transform:translateX(-50%);
  z-index:9998; display:flex; align-items:center; gap:.5rem;
  background:rgba(20,18,17,.82); color:#f2e7e1; font-family:'JetBrains Mono',monospace;
  font-size:.72rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  padding:.4rem .85rem; border-radius:999px; border:1px solid rgba(164,120,100,.45);
  backdrop-filter:blur(6px); pointer-events:none;
}
.demo-badge .dot{ width:7px; height:7px; border-radius:50%; background:#e0503f; animation:demo-rec-blink 1.4s ease-in-out infinite; }
@keyframes demo-rec-blink{ 0%,100%{ opacity:1 } 50%{ opacity:.25 } }

.demo-caption{
  position:fixed; bottom:74px; left:50%; transform:translateX(-50%);
  z-index:9997; max-width:min(620px,calc(100vw - 32px));
  background:rgba(24,46,52,.94); color:#eaf7f4;
  border:1px solid rgba(112,196,182,.45); border-radius:14px;
  padding:.55rem 1.05rem; font-size:.8rem; line-height:1.4; text-align:center;
  font-family:'JetBrains Mono','Cascadia Code',Consolas,monospace;
  backdrop-filter:blur(6px); box-shadow:0 8px 20px rgba(0,0,0,.35);
  pointer-events:none; opacity:0; transition:opacity .35s ease;
}
.demo-caption.visible{ opacity:1; }

.demo-controls{
  position:fixed; bottom:16px; left:50%; transform:translateX(-50%);
  z-index:9998; display:flex; align-items:center; gap:.5rem;
  background:rgba(20,18,17,.86); padding:.4rem .6rem; border-radius:999px;
  border:1px solid rgba(164,120,100,.45); backdrop-filter:blur(8px);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  font-family:'JetBrains Mono','Cascadia Code',Consolas,monospace;
  max-width:calc(100vw - 24px);
}
.demo-ctrl-group{ display:flex; align-items:center; gap:.25rem; }
.demo-ctrl-btn{
  width:32px; height:32px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,.08); color:#f2e7e1; font-size:.82rem;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s ease,color .15s ease,transform .1s ease;
  flex-shrink:0;
}
.demo-ctrl-btn:hover{ background:rgba(255,255,255,.18); }
.demo-ctrl-btn:active{ transform:scale(.92); }
.demo-ctrl-btn.on{ background:#a47864; color:#fff; }
#demo-start-btn.on{ background:#3f8f5e; }
#demo-stop-btn.on{ background:#a3271e; }

.demo-speed-btn{
  width:auto; min-width:40px; border-radius:999px; padding:0 .65rem;
  font-weight:700; font-size:.74rem; letter-spacing:.02em;
}

.demo-ctrl-sep{ width:1px; height:20px; background:rgba(255,255,255,.18); flex-shrink:0; }

.demo-controls .demo-progress-dots{ display:flex; gap:5px; padding:0 .15rem; flex-shrink:0; }
.demo-controls .demo-progress-dots span{
  width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.25); transition:background .2s ease,transform .2s ease;
}
.demo-controls .demo-progress-dots span.on{ background:#a47864; transform:scale(1.3); }

.demo-scene-label{
  color:rgba(242,231,225,.75); font-size:.66rem; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:150px;
}

@media (max-width:640px){
  .demo-badge{ font-size:.62rem; padding:.32rem .65rem; top:8px; }
  .demo-controls{ bottom:64px; gap:.35rem; padding:.35rem .5rem; }
  .demo-scene-label{ display:none; }
  .demo-caption{
    bottom:auto; top:44px; font-size:.7rem; padding:.5rem .8rem;
    max-width:calc(100vw - 20px); line-height:1.35;
  }
}