:root{--primary-color: #000;--secondary-color: #fff;--border-width: 2px;--border-radius-sm: 8px;--border-radius-md: 12px;--border-radius-lg: 20px;--spacing-xs: .5rem;--spacing-sm: 1rem;--spacing-md: 1.5rem;--spacing-lg: 2rem;--transition-speed: .3s;--max-content-width: 900px}*{margin:0;box-sizing:border-box}html,body{height:100%;margin:0;padding:0;display:flex;flex-direction:column;overflow:hidden}header,footer{width:100%;border:var(--border-width) solid var(--primary-color);box-sizing:border-box;padding:var(--spacing-md);text-align:center;overflow:visible}main{flex:1;display:flex;justify-content:center;align-items:flex-start;padding:0}#intro{position:relative;overflow:hidden;border:var(--border-width) solid var(--primary-color);width:80%;max-width:var(--max-content-width);margin:0 auto;padding:var(--spacing-lg);box-sizing:border-box}nav{display:flex;justify-content:space-between;align-items:center;max-width:var(--max-content-width);margin:0 auto;overflow:visible}nav p{margin:0;font-weight:700;overflow:visible}nav ul{list-style:none;display:flex;gap:var(--spacing-md);padding:0;margin:0}nav li{padding:var(--spacing-xs) var(--spacing-sm);transition:all var(--transition-speed) ease;white-space:nowrap}nav li:hover{cursor:crosshair;background-color:var(--primary-color);color:transparent;border-radius:var(--border-radius-lg)}.overlay-img{position:absolute;display:inline;bottom:0;right:0;z-index:-2;width:100%;height:100%;overflow:hidden;object-fit:cover}.loading-container{display:flex;justify-content:center;align-items:center;width:100vw;height:100vh;position:fixed;top:0;left:0;z-index:-1}.signup-wrapper{position:relative;display:inline-block}.btn{background-color:var(--primary-color);color:var(--secondary-color);border:none;padding:10px 20px;text-align:center;text-decoration:none;display:inline-block;font-size:16px;margin:4px 2px;cursor:pointer;border-radius:var(--border-radius-md);transform:translateY(250px);position:relative;z-index:2;transition:all var(--transition-speed) ease;min-height:44px;min-width:44px}.btn:hover,.btn:focus{background-color:var(--secondary-color);color:var(--primary-color);border:var(--border-width) solid var(--primary-color);outline:none}.signup-form{position:absolute;top:100%;left:50%;transform:translate(-50%) translateY(-100%);background-color:var(--secondary-color);border:var(--border-width) solid var(--primary-color);border-radius:var(--border-radius-md);padding:20px;display:flex;flex-direction:column;gap:10px;max-height:0;overflow:hidden;opacity:0;transition:max-height .8s ease,opacity .8s ease,transform .8s ease;z-index:1;width:500px;max-width:90vw}.signup-form.open{max-height:300px;opacity:1;transform:translate(-50%) translateY(0)}.signup-form input{padding:10px;border:1px solid #ccc;border-radius:var(--border-radius-sm);font-size:14px;min-height:44px}.signup-form input:focus{outline:2px solid var(--primary-color);outline-offset:2px;border-color:var(--primary-color)}.signup-form button{background-color:var(--primary-color);color:var(--secondary-color);border:none;padding:10px;border-radius:var(--border-radius-sm);cursor:pointer;font-size:14px;transition:all var(--transition-speed) ease;min-height:44px}.signup-form button:hover,.signup-form button:focus{background-color:var(--secondary-color);color:var(--primary-color);border:var(--border-width) solid var(--primary-color);outline:none}.audio-player{cursor:pointer;padding:var(--spacing-xs);min-height:44px;min-width:50px;display:flex;align-items:center;justify-content:center}@media screen and (max-width:768px){:root{--spacing-md: 1rem;--spacing-lg: 1.5rem}header,footer{padding:var(--spacing-sm)}nav{flex-direction:column;gap:var(--spacing-sm);align-items:flex-start}nav ul{gap:var(--spacing-sm);width:100%;justify-content:flex-start;flex-wrap:wrap}#intro{width:95%;padding:var(--spacing-sm)}.btn{transform:translateY(150px);font-size:14px;padding:8px 16px}.signup-form{width:90vw;padding:15px}}@media screen and (max-width:480px){:root{--spacing-sm: .75rem;--spacing-md: .75rem;--spacing-lg: 1rem}header,footer{padding:var(--spacing-xs) var(--spacing-sm)}nav{gap:var(--spacing-xs)}nav ul{gap:var(--spacing-xs);font-size:14px}nav li{padding:var(--spacing-xs)}#intro{width:98%;padding:var(--spacing-sm)}.btn{transform:translateY(100px);font-size:13px;padding:8px 12px}.signup-form{padding:10px;gap:8px}.signup-form input,.signup-form button{font-size:13px;padding:8px}}