/* KOBOTNICA inside a host page (website integration). Scoped to .kb; uses the site's own tokens
   (--paper, --ink, --ink-2, --gold, --line, --ease-out from site2027.css). No page-level rules. */
.kb{position:relative;display:block;color:var(--ink)}
.kb-stage,.kb-view{position:absolute;inset:0}
.kb-gl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;outline:none;opacity:0;transition:opacity .6s var(--ease-out)}
.kb--live .kb-gl{opacity:1}
.kb-gl:focus-visible{box-shadow:inset 0 0 0 2px var(--gold)}
.kb-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:opacity .6s var(--ease-out);pointer-events:none}
.kb--live .kb-poster{opacity:0}
.kb--flat .kb-gl,.kb--poster .kb-gl{display:none}.kb--flat .kb-poster,.kb--poster .kb-poster{opacity:1}
.kb--poster .kb-play,.kb--poster .kb-reset{display:none}
.kb-title,.kb-list{display:none}
.kb-note{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);margin:0;max-width:min(46ch,92%);text-align:center;font-size:15px;line-height:1.5;color:var(--ink-2);min-height:1.5em;pointer-events:none}
.kbA-ctl .kb-note,.kb-bar~.kb-note{position:static;transform:none;text-align:left;margin:12px 0 0;max-width:42ch}
.kb-bar{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center}
.kb-chips{display:flex;flex-wrap:wrap;gap:8px;min-width:0;max-width:100%}
.kb-chip,.kb-btn{font:inherit;font-size:15px;line-height:1;color:var(--ink);background:transparent;border:1px solid var(--line-2,rgba(20,19,16,.18));border-radius:999px;padding:12px 16px;min-height:44px;cursor:pointer;transition:background-color .18s var(--ease-out),border-color .18s var(--ease-out),transform .14s var(--ease-out)}
.kb-chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--paper-2,#fbfaf8)}
.kb-chip[aria-pressed=true]::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--gold);margin-right:9px;vertical-align:1px}
.kb-btn{border-color:transparent;color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line-2,rgba(20,19,16,.18));text-underline-offset:4px;padding-inline:10px}
.kb-btn.kb-play{border-color:var(--ink);text-decoration:none;color:var(--ink)}
.kb-ctl{display:flex;flex-wrap:wrap;gap:4px}
.kb-ctl .kb-flat{display:none}
@media (hover:hover) and (pointer:fine){.kb-chip:hover{border-color:var(--ink)}.kb-btn:hover{color:var(--ink)}}
.kb-chip:active,.kb-btn:active{transform:scale(.97)}
.kb-chip:focus-visible,.kb-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* minimal: only the demonstration button, over the stage */
.kb--minimal .kb-chips,.kb--minimal .kb-reset,.kb-bar.kb--minimal .kb-chips,.kb-bar.kb--minimal .kb-reset{display:none}
@media (max-width:560px){
  .kb-chips{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:2px}
  .kb-chips::-webkit-scrollbar{display:none}
  .kb-chip{scroll-snap-align:start;white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){.kb-gl,.kb-poster,.kb-chip,.kb-btn{transition:none}}
.kb-note .kb-more{pointer-events:auto;color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px;white-space:nowrap}
.kb-note .kb-more:focus-visible{outline:2px solid var(--gold);outline-offset:2px}