:root { --bar: #111527; --txt: #f5f6fb; --muted: #b9bfd3; --acc: #6366f1; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: #e6e8f0; }
.kss-skip { position: absolute; left: -9999px; } .kss-skip:focus { left: 8px; top: 8px; z-index: 10; background: #fff; padding: 8px 12px; }
.kss-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.kss-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 56px; padding: 8px 12px; background: var(--bar); color: var(--txt); }
.kss-bar a { color: var(--txt); text-decoration: none; font-weight: 600; }
.kss-bar a:focus-visible, .kss-bar button:focus-visible, .kss-bar select:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 2px; }
.kss-bar select { min-height: 40px; max-width: 320px; padding: 0 10px; border-radius: 8px; border: 1px solid #3b4263; background: #1c2240; color: var(--txt); font: inherit; }
.kss-bar__devices { display: inline-flex; gap: 4px; background: #1c2240; border-radius: 10px; padding: 3px; }
.kss-bar__devices button { min-height: 36px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; }
.kss-bar__devices button[aria-pressed="true"] { background: var(--acc); color: #fff; }
.kss-bar__size { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.kss-bar__open { margin-left: auto; min-height: 40px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 8px; background: var(--acc); }
.kss-bar__close { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid #3b4263; }
.kss-stage { height: calc(100% - 56px); display: flex; justify-content: center; overflow: auto; padding: 0; }
.kss-stage iframe { width: 100%; height: 100%; border: 0; background: #fff; transition: width 200ms ease; }
.kss-stage.is-framed { padding: 16px; } .kss-stage.is-framed iframe { box-shadow: 0 10px 40px rgba(17, 21, 39, .25); border-radius: 12px; }
@media (max-width: 760px) { .kss-bar__devices, .kss-bar__size { display: none; } .kss-bar__open { margin-left: 0; } .kss-stage { height: calc(100% - 104px); } }
@media (prefers-reduced-motion: reduce) { .kss-stage iframe { transition: none; } }