/* Critical CSS - Above the fold styles for instant rendering */

/* Reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* Base */
html{height:100%;-webkit-text-size-adjust:100%}
body{height:100%;font-family:'Courier New',monospace;background:#000;color:#fff;overflow:hidden}

/* Skip link */
.skip-link{position:absolute;top:-40px;left:6px;background:#00ffff;color:#000;padding:8px;text-decoration:none;z-index:1000;transition:top 0.3s}
.skip-link:focus{top:6px}

/* Loading overlay */
.loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999;transition:opacity 0.5s ease-out}
.loading-overlay.hidden{opacity:0;pointer-events:none}

/* Loading spinner */
.loading-spinner{width:40px;height:40px;border:3px solid rgba(0,255,255,0.3);border-top:3px solid #00ffff;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:20px}
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

.loading-text{color:#00ffff;font-size:14px;text-align:center}

/* Workshop container */
.workshop-container{position:relative;width:100%;height:100vh}

/* Background layer */
.background-layer{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;background-repeat:no-repeat;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;transition:opacity 0.3s ease-out}

/* Fallback background */
.background-fallback{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(45deg,#001122 0%,#003366 50%,#001122 100%);z-index:-1}

/* Screen reader only */
.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}