/* KlipToc v321 · estilos de /estudio/ y /creador/ */
:root{--kh-bg:#0b1020;--kh-pn:#121a33;--kh-cd:#17213f;--kh-ln:rgba(148,163,184,.22);--kh-ink:#e2e8f0;--kh-mu:#94a3b8;--kh-ac:#8b5cf6;--kh-ac2:#ec4899}
@media (prefers-color-scheme:light){:root{--kh-bg:#f1f5f9;--kh-pn:#fff;--kh-cd:#f8fafc;--kh-ln:rgba(100,116,139,.28);--kh-ink:#0f172a;--kh-mu:#475569}}
html,body.kh{height:100%}
body.kh{margin:0;background:var(--kh-bg);color:var(--kh-ink);font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow:hidden}
body.kh *{box-sizing:border-box}body.kh a{color:inherit;text-decoration:none}
#kh-root{display:flex;flex-direction:column;height:100%;height:100dvh}
.kh-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.kh :focus-visible{outline:2px solid var(--kh-ac);outline-offset:2px}
.kh-top{display:flex;align-items:center;gap:10px;padding:8px 12px;padding-top:max(8px,env(safe-area-inset-top));background:var(--kh-pn);border-bottom:1px solid var(--kh-ln);flex:0 0 auto}
.kh-back{font-weight:700;font-size:.88rem;color:var(--kh-mu);white-space:nowrap}.kh-back:hover{color:var(--kh-ink)}
.kh-sp{display:flex;gap:4px;background:var(--kh-cd);padding:3px;border-radius:12px}
.kh-sp a{display:flex;gap:6px;align-items:center;padding:6px 14px;border-radius:9px;font-weight:700;color:var(--kh-mu)}
.kh-sp a.on{background:linear-gradient(135deg,var(--kh-ac),var(--kh-ac2));color:#fff}
.kh-q{margin-left:auto;flex:0 1 280px;min-width:0}.kh-q input{width:100%;padding:8px 12px;border-radius:10px;border:1px solid var(--kh-ln);background:var(--kh-cd);color:inherit;font:inherit}
.kh-mb{display:none;border:1px solid var(--kh-ln);background:var(--kh-cd);color:inherit;border-radius:10px;padding:8px 12px;font:700 .85rem system-ui;cursor:pointer;white-space:nowrap}
.kh-body{display:flex;flex:1;min-height:0}
.kh-side{width:260px;flex:0 0 260px;overflow:auto;padding:10px;background:var(--kh-pn);border-right:1px solid var(--kh-ln)}
.kh-it{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;color:var(--kh-ink)}
.kh-it i{font-style:normal;width:22px;text-align:center;font-size:1.1rem}.kh-it span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kh-it:hover{background:var(--kh-cd)}.kh-it.on{background:linear-gradient(135deg,rgba(139,92,246,.28),rgba(236,72,153,.2));font-weight:700}
.kh-home{margin-bottom:6px}
.kh-g{margin-top:6px}.kh-gh{display:flex;width:100%;align-items:center;gap:6px;background:none;border:0;color:var(--kh-mu);font:700 .72rem system-ui;text-transform:uppercase;letter-spacing:.05em;padding:8px 10px 4px;cursor:pointer;text-align:left}
.kh-gh em{font-style:normal;opacity:.7}.kh-gh b{margin-left:auto;transition:transform .15s}.kh-g.shut .kh-gh b{transform:rotate(-90deg)}.kh-g.shut .kh-gl{display:none}
div.kh-gh{cursor:default}.kh-xs{display:block;margin:-4px 0 4px 42px;color:var(--kh-mu);font-size:.72rem}.kh-none{color:var(--kh-mu);padding:8px 10px}
.kh-main{flex:1;min-width:0;display:flex;flex-direction:column;overflow:auto}
.kh-tb{display:flex;align-items:center;gap:10px;padding:6px 14px;background:var(--kh-pn);border-bottom:1px solid var(--kh-ln);flex:0 0 auto}
.kh-tb i{font-style:normal}.kh-tb span{color:var(--kh-mu);font-size:.8rem}.kh-tb a{margin-left:auto;width:30px;height:30px;display:grid;place-items:center;border-radius:8px;background:var(--kh-cd)}
.kh-fw{position:relative;flex:1;min-height:0}.kh-fw iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--kh-bg);z-index:1}
.kh-ld{position:absolute;inset:0;margin:0;display:grid;place-items:center;color:var(--kh-mu);text-align:center;padding:20px;z-index:0}.kh-ld[hidden]{display:none}.kh-ld a{color:var(--kh-ac);font-weight:700}
.kh-hm{padding:20px 22px 40px;max-width:1100px;width:100%;margin:0 auto}
.kh-hm h1{margin:0 0 4px;font-size:1.6rem}.kh-lead{margin:0 0 8px;color:var(--kh-mu)}.kh-hm h2{margin:22px 0 10px;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--kh-mu)}
.kh-note{background:rgba(244,63,94,.12);border:1px solid rgba(244,63,94,.4);padding:10px 14px;border-radius:12px}
.kh-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.kh-card{display:grid;gap:4px;padding:14px;border-radius:14px;background:var(--kh-pn);border:1px solid var(--kh-ln);transition:transform .15s,border-color .15s}
.kh-card:hover{transform:translateY(-2px);border-color:var(--kh-ac)}.kh-card i{font-style:normal;font-size:1.7rem}.kh-card span{color:var(--kh-mu);font-size:.82rem}
@media (max-width:820px){
  .kh-back{display:none}.kh-mb{display:block}.kh-q{flex:1}.kh-sp a{padding:6px 10px}.kh-sp a b{font-size:.85rem}
  .kh-side{position:fixed;z-index:20;top:0;bottom:0;left:0;width:min(86vw,320px);transform:translateX(-102%);transition:transform .2s;box-shadow:0 0 40px rgba(0,0,0,.4);padding-top:max(10px,env(safe-area-inset-top))}
  .kh-side.open{transform:none}
  .kh-top{flex-wrap:wrap}.kh-q{order:3;flex:1 0 100%}
  .kh-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}