@font-face{font-family:Inter;src:url(./studio.woff2);font-display:swap}

  :root{
    --bg:#0c110f;
    --ink:#e9efe9;
    --c-strategy:#d6ff5c;
    --c-intel:#5fd0f5;
    --c-tech:#a594ff;
    --c-creative:#ff9d6e;
    --c-delivery:#cfe9db;
  }
  *{box-sizing:border-box}
  html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif}
  .stage{position:relative;width:100%;height:100vh;min-height:360px;overflow:hidden;
    background:radial-gradient(60% 55% at 50% 50%, #17201b 0%, var(--bg) 70%)}
  canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
  .tag{position:absolute;top:28px;right:32px;font-size:13px;font-weight:600;letter-spacing:.14em;color:#9aa69f}
  .tag b{color:#c9d1cb;font-weight:600;margin-left:14px}
  .label{position:absolute;display:flex;align-items:center;gap:12px;padding:13px 18px;border-radius:4px;
    background:rgba(13,19,16,.88);border:1px solid var(--lc-b);font-size:15px;font-weight:500;color:var(--lc);
    text-decoration:none;white-space:nowrap;transform:translate(-50%,-50%);pointer-events:auto}
  .label small{font-size:11px;color:var(--lc);opacity:.6;font-weight:500;letter-spacing:.04em}
  .label i{width:7px;height:7px;border-radius:50%;background:var(--lc);box-shadow:0 0 0 0 var(--lc);transition:box-shadow .5s ease, transform .5s ease}
  .label.ping i{box-shadow:0 0 12px 3px var(--lc);transform:scale(1.35)}
  .pause{position:absolute;right:32px;bottom:28px;background:transparent;border:1px solid rgba(255,255,255,.22);
    color:#c9d1cb;font:600 12px Inter,sans-serif;letter-spacing:.14em;padding:14px 20px;cursor:pointer}
  .pause:focus-visible{outline:2px solid var(--c-intel);outline-offset:3px}

.label:hover,.label:focus-visible{background:#1b2920;border-color:var(--lc);outline:2px solid var(--lc);outline-offset:4px}
.label{transition:background .25s,border-color .25s}
.embedded,.embedded .stage{background:transparent}.embedded .tag{display:none}
.pause{letter-spacing:.07em;font-size:10px;padding:11px 14px;min-height:44px;right:18px;bottom:14px;z-index:3}
@media(max-width:700px){.label{font-size:11px;padding:10px 12px;gap:8px;min-height:44px}.label small{font-size:8px}.label i{width:5px;height:5px}.tag{font-size:9px;right:18px;top:18px}}
@media(max-width:400px){.label{font-size:10px;padding:8px 9px;gap:6px}.label small{font-size:7px}}
@media(prefers-reduced-motion:reduce){.label,.label i{transition:none}}

/* Transparent over any host surface; links retain their own readable treatment. */
html,body,.stage,.embedded,.embedded .stage{background:transparent!important}