/* TikTok lab: black glitch look with cyan/red split, vertical video mock. Loaded only on the TikTok page. */
.ttt{--cy:#25F4EE;--rd:#FE2C55;--bk:#050507;--bk2:#0C0C11;--ln:#23232D;--okc:#5EE6B0;--bdc:#FF6B86;--wn:#F2C14E;margin:0 0 28px;color:var(--ink)}
.ttt__grid{position:relative;display:grid;grid-template-columns:1.25fr 1fr;gap:28px;padding:26px;border-radius:14px;background:linear-gradient(180deg,var(--bk2),var(--bk));border:1px solid var(--ln);
  box-shadow:-4px -4px 0 -1px rgba(37,244,238,.55),4px 4px 0 -1px rgba(254,44,85,.55),0 30px 50px -30px #000}
.ttt__eyebrow{position:relative;display:inline-block;margin:0 0 18px;font:700 1rem/1 var(--display);letter-spacing:.14em;color:#fff;font-size:1.25rem}
.ttt__eyebrow::before,.ttt__eyebrow::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;pointer-events:none}
.ttt__eyebrow::before{color:var(--cy);transform:translate(-2px,-1px);mix-blend-mode:screen;opacity:.8}
.ttt__eyebrow::after{color:var(--rd);transform:translate(2px,1px);mix-blend-mode:screen;opacity:.8}
.ttt__f{margin:0 0 16px}
.ttt__f label,.ttt__lbl{display:block;margin:0 0 7px;font:700 .82rem/1.2 var(--body);letter-spacing:.12em;text-transform:uppercase;color:#A9A9B8}
.ttt__f input{width:100%;height:54px;padding:0 16px;border-radius:10px;border:2px solid var(--ln);background:#000;color:#fff;font:500 1.2rem/1 var(--name);outline:none;transition:border-color .2s,box-shadow .2s}
.ttt__f input:focus{border-color:#fff;box-shadow:-3px 0 0 var(--cy),3px 0 0 var(--rd)}
.ttt__vibes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ttt__v{height:44px;border:2px solid var(--ln);border-radius:10px;background:#000;color:#C9C9D6;font:700 .95rem/1 var(--body);cursor:pointer;transition:all .15s}
.ttt__v:hover{border-color:#44444F}
.ttt__v.is-on{color:#fff;border-color:#fff;box-shadow:-3px -3px 0 var(--cy),3px 3px 0 var(--rd)}
.ttt__at{position:relative}
.ttt__at span{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--cy);font:700 1.2rem/1 var(--body)}
.ttt__at input{padding-left:36px}
.ttt__rules{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:5px;font-size:.92rem;color:var(--dim)}
.ttt__rules li{padding-left:22px;position:relative}
.ttt__rules li::before{content:"";position:absolute;left:4px;top:.45em;width:9px;height:9px;border-radius:2px;background:#33333D}
.ttt__rules .is-ok{color:#D6F7EC}.ttt__rules .is-ok::before{background:var(--okc)}
.ttt__rules .is-bad{color:#FFC7D2}.ttt__rules .is-bad::before{background:var(--rd)}

/* vertical video mock */
.ttt__mock{display:flex;flex-direction:column;align-items:center}
.ttt__screen{position:relative;width:100%;max-width:280px;aspect-ratio:9/15;border-radius:22px;overflow:hidden;border:6px solid #15151C;
  background:radial-gradient(80% 50% at 30% 30%,rgba(37,244,238,.28),transparent 60%),radial-gradient(70% 50% at 80% 70%,rgba(254,44,85,.3),transparent 60%),linear-gradient(180deg,#14141C,#060608);box-shadow:0 24px 50px -24px #000}
.ttt__mono{position:absolute;top:12px;left:12px;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:rgba(0,0,0,.45);color:#fff;font:700 .75rem/1 var(--body)}
.ttt__side{position:absolute;right:10px;bottom:90px;display:grid;gap:14px}
.ttt__side i{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.14)}
.ttt__side i:first-child{background:linear-gradient(135deg,var(--cy),var(--rd));border:2px solid #fff}
.ttt__cap{position:absolute;left:12px;right:56px;bottom:22px}
.ttt__handle{display:block;font:700 .95rem/1.25 var(--body);color:#fff;word-break:break-all}
.ttt__name{display:block;margin:4px 0;font:600 1.15rem/1.3 var(--name);color:#fff;word-break:break-word;text-shadow:-1px 0 var(--cy),1px 0 var(--rd)}
.ttt__bio{margin:0 0 6px;font:400 .85rem/1.35 var(--name);color:#E2E2EA;word-break:break-word}
.ttt__sound{display:block;font:500 .78rem/1 var(--body);color:#BDBDC8}
.ttt__sound::before{content:"♪ "}
.ttt__prog{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.15)}
.ttt__prog b{display:block;height:100%;width:35%;background:#fff}
.ttt__label{margin:10px 0 0;font-size:.82rem;color:var(--dim)}
.ttt__count{margin:6px 0 0;font:600 .9rem/1 var(--body);color:var(--muted)}
.ttt__count .is-bad{color:var(--bdc)}
.ttt__acts{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:300px;margin:12px 0 0}
.ttt__btn{height:48px;border-radius:10px;border:2px solid #fff;background:transparent;color:#fff;font:700 1rem/1 var(--body);cursor:pointer;transition:box-shadow .15s}
.ttt__btn:hover{box-shadow:-3px -3px 0 var(--cy),3px 3px 0 var(--rd)}
.ttt__btn--hot{background:var(--rd);border-color:var(--rd)}

/* results */
.ttt__res{margin:18px 0 0;padding:18px;border-radius:14px;border:1px solid var(--ln);background:#07070A}
.ttt__tabs{display:flex;gap:8px;margin:0 0 12px}
.ttt__tab{border:2px solid var(--ln);border-radius:999px;background:transparent;color:#C9C9D6;padding:10px 18px;font:700 .95rem/1 var(--body);cursor:pointer}
.ttt__tab.is-on{background:#fff;border-color:#fff;color:#000;box-shadow:-3px 0 0 var(--cy),3px 0 0 var(--rd)}
.ttt__note{margin:0 0 12px;color:var(--dim);font-size:.98rem}
.ttt__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.ttt__it{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;padding:12px 12px 12px 16px;border-radius:10px;background:#0E0E14;border:1px solid #1B1B24;transition:transform .15s,box-shadow .15s}
.ttt__it:hover{transform:translate(-1px,-1px);box-shadow:-3px -3px 0 rgba(37,244,238,.5),3px 3px 0 rgba(254,44,85,.5)}
.ttt__nm{grid-column:1;font:600 1.12rem/1.3 var(--name);color:#fff;word-break:break-word;cursor:pointer}
.ttt__nm s{text-decoration:none;color:var(--cy)}
.ttt__meta{grid-column:1;font:500 .82rem/1.3 var(--body);color:var(--dim)}
.ttt__meta i{font-style:normal;font-weight:700;margin-left:4px}
.ttt__meta .is-ok{color:var(--okc)}.ttt__meta .is-warn{color:var(--wn)}.ttt__meta .is-bad{color:var(--bdc)}
.ttt__b{grid-column:2;grid-row:1/3;display:flex;flex-direction:column;gap:6px}
.ttt__b button{min-width:62px;height:32px;border-radius:8px;border:1px solid #2A2A35;background:#16161E;color:#fff;font:700 .85rem/1 var(--body);cursor:pointer}
.ttt__b button:hover{background:#fff;color:#000}

@keyframes tttGlitch{0%,92%,100%{transform:translate(-2px,-1px);clip-path:inset(0 0 0 0)}93%{transform:translate(-5px,1px);clip-path:inset(20% 0 50% 0)}95%{transform:translate(3px,-2px);clip-path:inset(60% 0 10% 0)}97%{transform:translate(-3px,0);clip-path:inset(10% 0 70% 0)}}
@keyframes tttProg{from{width:0}to{width:100%}}
@keyframes tttPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@media (prefers-reduced-motion:no-preference){
  .ttt__eyebrow::before{animation:tttGlitch 4s steps(1) infinite}
  .ttt__eyebrow::after{animation:tttGlitch 4s .2s steps(1) infinite reverse}
  .ttt__prog b{animation:tttProg 9s linear infinite}
  .ttt__side i:first-child{animation:tttPulse 2.4s ease-in-out infinite}
}
@media (max-width:860px){.ttt__grid{grid-template-columns:1fr;padding:20px 14px}.ttt__screen{max-width:240px}}
@media (max-width:480px){.ttt__list{grid-template-columns:1fr}.ttt__tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.ttt__tab{padding:10px 4px;font-size:.84rem;line-height:1.15}}