:root { color-scheme: light; background: #c0c0c0; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; overflow-y: auto; background: #c0c0c0; }
button { font: inherit; }
.faya-intro { position: relative; width: 100%; height: 100svh; overflow: hidden; background: #c0c0c0; isolation: isolate; }
.faya-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.faya-annotation { position: absolute; display: block; opacity: 0; pointer-events: none; will-change: opacity; }
.faya-cursor { position: absolute; left: 0; top: 0; width: 30px; height: 30px; border: 2px solid #fff; border-radius: 50%; pointer-events: none; z-index: 5; opacity: 0; transition: width .18s, height .18s, border-width .18s, opacity .12s; transform: translate(-50%, -50%); }
.faya-cursor.is-over-letter { width: 42px; height: 42px; }
.faya-cursor.is-pressed { width: 22px; height: 22px; border-width: 4px; }
.faya-controls { position: absolute; bottom: 24px; left: 24px; display: flex; gap: 8px; align-items: center; z-index: 6; opacity: .45; transition: opacity .2s; }
.faya-controls:hover, .faya-controls:focus-within { opacity: 1; }
.faya-controls[hidden], .faya-error[hidden] { display: none; }
.faya-controls button { width: 38px; height: 38px; border: 1px solid rgb(0 0 0 / 30%); border-radius: 50%; background: rgb(192 192 192 / 75%); color: #161616; cursor: pointer; font-size: 22px; line-height: 1; backdrop-filter: blur(8px); }
.faya-controls button:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.faya-progress { width: 68px; height: 2px; background: rgb(0 0 0 / 15%); margin-left: 5px; }
.faya-progress span { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; background: #161616; }
.faya-accessibility { position: absolute; inset: 0; pointer-events: none; }
.faya-accessibility button { position: absolute; background: none; border: none; color: transparent; pointer-events: none; }
.faya-accessibility button:focus-visible { outline: 2px solid #fff; outline-offset: -14px; border-radius: 30%; }
.faya-error { position: absolute; inset: auto 24px 24px; font: 14px/1.5 sans-serif; }
@media (pointer: fine) {
  .faya-intro.has-custom-cursor, .faya-intro.has-custom-cursor button { cursor: none; }
}
@media (pointer: coarse) { .faya-cursor { display: none; } }

.faya-footer { background: #f0e8e8; }
.faya-navigation { position: absolute; right: 24px; bottom: 24px; z-index: 6; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgb(0 0 0 / 30%); border-radius: 50%; color: #161616; text-decoration: none; font: 20px/1 sans-serif; background: rgb(192 192 192 / 40%); }
.faya-navigation:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }