*{box-sizing:border-box;margin:0;padding:0}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.6;color:#e0e6ed;background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460);min-height:100vh;padding:20px}app-root{display:block;max-width:1200px;margin:0 auto;background:#1e272ef2;border-radius:12px;box-shadow:0 20px 40px #0000004d;padding:30px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1)}h1{font-size:2.5rem;font-weight:700;color:#f8f9fa;margin-bottom:30px;text-align:center;cursor:pointer;padding:15px;border-radius:8px}h1 span{display:inline-block}app-state a{color:#fff}h3{font-size:1.4rem;font-weight:600;color:#e0e6ed;margin-bottom:12px;border-bottom:2px solid #4facfe;padding-bottom:8px}p{font-size:1rem;line-height:1.7;color:#b8c5d1;margin-bottom:15px;text-align:justify}nav{display:flex;gap:20px;margin-bottom:30px;background:#34495ecc;padding:15px 20px;border-radius:10px;box-shadow:0 4px 12px #0003;justify-content:center;flex-wrap:wrap;border:1px solid rgba(255,255,255,.1)}nav div{position:relative}nav a{text-decoration:none;color:#e0e6ed;font-weight:500;padding:12px 20px;border-radius:8px;display:block}nav a:hover{color:#4facfe}app-hydrated,app-unhydrated,app-deferred{display:block;padding:25px;border-radius:12px;margin:20px 0;background:#2c3e50cc;box-shadow:0 8px 25px #0000004d;border:none;transition:all .3s ease;border:1px solid rgba(255,255,255,.1)}app-hydrated:hover,app-unhydrated:hover,app-deferred:hover{transform:translateY(-5px);box-shadow:0 15px 35px #0006}app-hydrated,app-unhydrated{border-left:5px solid #2ecc71;background:linear-gradient(135deg,#2ecc7126,#27ae6026)}app-hydrated h3,app-unhydrated h3{color:#2ecc71;border-bottom-color:#2ecc71}app-deferred{border-left:5px solid #f39c12;background:linear-gradient(135deg,#f39c1226,#e67e2226)}app-deferred h3{color:#f39c12;border-bottom-color:#f39c12}button{background:linear-gradient(135deg,#4facfe,#00f2fe);color:#1a1a2e;border:none;padding:12px 24px;border-radius:8px;font-size:1rem;font-weight:500;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #4facfe4d}button:hover{transform:translateY(-2px);box-shadow:0 8px 20px #4facfe66}button:active{transform:translateY(0);box-shadow:0 2px 8px #4facfe4d}button:disabled{opacity:.6;cursor:not-allowed;transform:none}@media (max-width: 768px){body{padding:10px}app-root{padding:20px}h1{font-size:2rem}nav{flex-direction:column;gap:10px}nav a{text-align:center}app-hydrated,app-unhydrated,app-deferred{padding:20px;margin:15px 0}}