:root { color-scheme: light; font-family: Arial, sans-serif; color: #62647a; background: #e5d9ef; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; -webkit-tap-highlight-color: transparent; }
.background { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: linear-gradient(22deg, #f8c8dc 31%, #ccccff 66%); }
.pulse { width: 100%; height: 100%; fill: none; stroke-width: 2.3; stroke-linejoin: round; stroke-linecap: round; }
.pulse use { vector-effect: non-scaling-stroke; }
.wave-static { stroke: white; opacity: .055; }
.scene { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; overflow: hidden; padding: 28px; cursor: grab; touch-action: pinch-zoom; user-select: none; -webkit-user-select: none; }
.scene.is-dragging { cursor: grabbing; }
.perspective { width: min(680px, 100%); aspect-ratio: 1659 / 948; perspective: 1600px; }
.card { position: relative; width: 100%; height: 100%; border-radius: 8px; transform-style: preserve-3d; transform: rotate3d(0,1,0,0deg); will-change: transform; }
.face { position: absolute; inset: 0; display: block; border-radius: inherit; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 20px 42px -18px #66648638, 0 2px 7px #64617b0c; }
.face-front { transform: translateZ(.6px); }
.face-back { transform: rotateY(180deg) translateZ(.6px); }
.face img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }
.scene:focus { outline: none; }
.scene.keyboard-focus:focus-visible .perspective { outline: 2px solid #74748e; outline-offset: 12px; border-radius: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.no-script { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); color: inherit; }
@media (max-width: 600px) { .scene { padding: 30px; } .card { border-radius: 5px; } }
@media (max-height: 520px) and (orientation: landscape) { .perspective { width: min(560px, 100%, 115svh); } }
@media (prefers-reduced-motion: reduce) { .wave-moving { display: none; } .wave-static { opacity: .3; } }
@media (forced-colors: active) { .perspective { outline: 1px solid CanvasText; } }

.face img { pointer-events: none; }
.signature-art { display: block; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; }
.hotspot { position: absolute; display: block; z-index: 2; border-radius: 5px; cursor: pointer; touch-action: pinch-zoom; }
.hotspot:focus-visible, .homepage-link:focus-visible { outline: 2px solid #b284ad; outline-offset: 3px; }
.name-link { left: 11%; top: 22%; width: 36%; height: 21%; }
.x-link { left: 56%; top: 26%; width: 35%; height: 12%; }
.telegram-link { left: 56%; top: 43%; width: 35%; height: 12%; }
.email-link { left: 56%; top: 59%; width: 36%; height: 12%; }
.signature-link { left: 23%; top: 33%; width: 62%; height: 30%; }
.homepage-link { position: absolute; z-index: 2; left: 40%; top: 88%; width: 23%; height: 6%; display: grid; place-items: center; color: #8c8da0; background: #f9f8f8; text-decoration: none; font-family: Arial, sans-serif; font-size: clamp(7px, 1.63vw, 11.6px); letter-spacing: .10em; cursor: pointer; }
.homepage-link:hover { color: #6c627e; }