/* Debono (29. 10. 2026): vzhled prohlížeče podle tmavé případové studie Střední Čechy.
   Písmo General Sans z webu, zlatá #D4A519 a inkoust #16140A z css/case-sc.css. */
@font-face {
  /* General Sans (Fontshare, ITF Free Font License): oficiální soubor beze změny, neořezávat */
  font-family:"General Sans";
  src:url("../../../../fonts/GeneralSans-Variable.woff2") format("woff2-variations"), url("../../../../fonts/GeneralSans-Variable.woff2") format("woff2");
  font-weight:200 700; font-style:normal; font-display:swap;
}
:root{font-family:"General Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:#fff;background:#171717;color-scheme:dark;font-synthesis:none;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#171717}
.studio{width:100%;height:100%;min-height:240px;position:relative;isolation:isolate;background:#171717}
.viewport{position:absolute;inset:0 0 4.4rem;outline:0;cursor:grab}
.viewport:active{cursor:grabbing}
.viewport canvas{display:block;width:100%;height:100%;touch-action:pan-y}
.poster{position:absolute;inset:0 0 4.4rem;background:#171717;z-index:1;pointer-events:none;display:grid;place-items:center}
.poster img{width:100%;height:100%;object-fit:contain}
.poster.is-loaded{opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s linear .6s}
.loading{position:absolute;left:50%;top:1.25rem;transform:translateX(-50%);font-size:.8rem;font-weight:500;color:rgba(255,255,255,.78);padding:.5rem .9rem;background:rgba(255,255,255,.08);border-radius:9999px;z-index:3;white-space:nowrap;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.toolbar{position:absolute;left:50%;bottom:1.25rem;transform:translateX(-50%);display:flex;align-items:center;gap:.25rem;padding:.3rem;background:rgba(30,30,30,.72);border-radius:9999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);z-index:4;max-width:calc(100% - 1.5rem);white-space:nowrap;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.toolbar button{font:inherit;font-size:.86rem;font-weight:500;border:0;border-radius:9999px;height:2.5rem;padding:0 1rem;display:inline-flex;gap:.45rem;align-items:center;justify-content:center;color:#fff;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .25s ease,color .25s ease}
.toolbar button:hover{background:rgba(255,255,255,.1)}
.toolbar button:disabled{opacity:.4;cursor:wait}
.toolbar .primary{background:#D4A519;color:#16140A;min-width:7.4rem}
.toolbar .primary:hover{background:#e2b42a}
.toolbar .icon{width:2.5rem;padding:0}
.toolbar button[aria-pressed=true]:not(.primary){background:rgba(212,165,25,.2);color:#f1cf6a}
.toolbar svg{width:1.1rem;height:1.1rem;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.toolbar .play{fill:currentColor;stroke:none}
.hint{position:absolute;top:1.3rem;right:1.4rem;margin:0;font-size:.8rem;color:rgba(255,255,255,.55);line-height:1.2;pointer-events:none}
button:focus-visible,.viewport:focus-visible{outline:2px solid #D4A519;outline-offset:3px}
[hidden]{display:none!important}
.error{position:absolute;top:1.25rem;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 2.5rem);background:rgba(30,30,30,.9);border-radius:1rem;padding:.8rem 1.1rem;margin:0;z-index:5;font-size:.85rem;text-align:center;line-height:1.45;color:#fff}
.studio:fullscreen{height:100%;width:100%}
@media(max-width:520px){.viewport,.poster{bottom:3.6rem}.toolbar{gap:.1rem;bottom:.9rem}.toolbar button{padding:0 .75rem;font-size:.8rem;height:2.3rem}.toolbar .primary{min-width:6.6rem}.toolbar .icon{width:2.3rem}.hint{left:0;right:0;top:1rem;text-align:center}}
@media(max-height:360px){.toolbar{bottom:.6rem}.hint{display:none}}