*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif;background:#f9fafb;color:#1f2937}.navbar{background:#fff;box-shadow:0 1px 3px 0 rgba(0,0,0,.1);position:-webkit-sticky;position:sticky;top:0;z-index:10}.nav-container{max-width:1200px;margin:0 auto;padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center}.logo{font-size:1.5rem;font-weight:700;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;background-clip:text;color:transparent;text-decoration:none}.nav-links{display:flex;gap:2rem}.nav-link{color:#4b5563;text-decoration:none;font-weight:500;transition:color .2s}.nav-link:hover{color:#667eea}.container{max-width:1200px;margin:0 auto;padding:2rem}.hero{text-align:center;margin-bottom:3rem}.hero h1{font-size:2.5rem;margin-bottom:1rem;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;background-clip:text;color:transparent}.hero p{font-size:1.2rem;color:#6b7280}.message-board{background:#fff;border-radius:1rem;box-shadow:0 4px 6px -1px rgba(0,0,0,.1);padding:2rem;max-width:800px;margin:0 auto}.message-board h2{font-size:1.5rem;margin-bottom:1.5rem;color:#374151}.messages{margin-bottom:2rem;max-height:400px;overflow-y:auto}.message-card{background:#f9fafb;border-radius:.5rem;padding:1rem;margin-bottom:1rem;border-left:4px solid #667eea;transition:transform .2s}.message-card:hover{transform:translateX(4px)}.message-text{font-size:1rem;margin-bottom:.5rem;color:#1f2937}.message-time{font-size:.75rem;color:#9ca3af}.empty-messages{text-align:center;padding:2rem;color:#9ca3af}.message-form{display:flex;gap:.75rem;margin-top:1rem}.message-input{flex:1 1;padding:.75rem;border:1px solid #e5e7eb;border-radius:.5rem;font-size:1rem;transition:border-color .2s}.message-input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px rgba(102,126,234,.1)}.submit-btn{padding:.75rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:.5rem;font-size:1rem;font-weight:500;cursor:pointer;transition:opacity .2s}.submit-btn:hover{opacity:.9}.submit-btn:disabled{opacity:.5;cursor:not-allowed}.loading{text-align:center;padding:2rem;color:#9ca3af}.error{background:#fee2e2;color:#dc2626;padding:.75rem;border-radius:.5rem;margin-bottom:1rem}.about-card{background:#fff;border-radius:1rem;box-shadow:0 4px 6px -1px rgba(0,0,0,.1);padding:2rem;max-width:800px;margin:0 auto}.about-card h1{font-size:2rem;margin-bottom:1.5rem;color:#1f2937}.about-card h2{font-size:1.25rem;margin:1.5rem 0 1rem;color:#374151}.about-card ul{margin-left:1.5rem;margin-bottom:1rem}.about-card li{margin:.5rem 0;color:#4b5563}.code-block{background:#1f2937;color:#e5e7eb;padding:1rem;border-radius:.5rem;overflow-x:auto;font-family:monospace;font-size:.875rem;margin:1rem 0}.error-container{text-align:center;padding:3rem 2rem;background:#fff;border-radius:1rem;box-shadow:0 4px 6px -1px rgba(0,0,0,.1);max-width:500px;margin:2rem auto}.error-container h2{color:#dc2626;margin-bottom:1rem}.error-container p{color:#6b7280;margin-bottom:1.5rem}.error-container button{padding:.75rem 1.5rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:.5rem;font-size:1rem;cursor:pointer;transition:opacity .2s}.error-container button:hover{opacity:.9}.loading-container{text-align:center;padding:3rem 2rem;background:#fff;border-radius:1rem;box-shadow:0 4px 6px -1px rgba(0,0,0,.1);max-width:500px;margin:2rem auto}.loading-spinner{width:40px;height:40px;border:4px solid #e5e7eb;border-top-color:#667eea;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 1rem}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}