:root{--bg-light: #E1F5FE;--bg-panel: rgba(255, 255, 255, .7);--neon-cyan: #00B0FF;--solar-orange: #FF6D00;--success-green: #00C853;--alert-red: #D50000;--text-main: #263238;--text-muted: #546E7A;--font-main: "Roboto", sans-serif;--font-mono: "Fira Code", monospace;--glass-border: 1px solid rgba(255, 255, 255, .8);--glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, .15)}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-light);color:var(--text-main);font-family:var(--font-main);overflow:hidden;height:100vh;width:100vw}.background-emojis{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;overflow:hidden;pointer-events:none}.emoji-float{position:absolute;font-size:2rem;opacity:.3;animation:floatUp linear infinite}@keyframes floatUp{0%{transform:translateY(110vh) rotate(0);opacity:0}10%{opacity:.4}90%{opacity:.4}to{transform:translateY(-10vh) rotate(360deg);opacity:0}}.logo{font-size:1.5rem;font-weight:700;color:var(--neon-cyan);margin-bottom:30px;text-transform:uppercase;letter-spacing:2px;text-shadow:0 0 2px rgba(0,176,255,.2)}#close-sidebar{display:none}.nav-item{padding:12px 15px;margin-bottom:8px;cursor:pointer;border-radius:8px;transition:all .3s ease;color:var(--text-muted);display:flex;align-items:center;gap:10px;font-size:.9rem;font-weight:500}.nav-item:hover,.nav-item.active{background:#00b0ff1a;color:var(--neon-cyan);box-shadow:0 2px 8px #00b0ff26}.nav-number{min-width:25px;display:inline-block;text-align:right;font-weight:700}.content-card{background:var(--bg-panel);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:var(--glass-border);border-radius:16px;padding:40px;box-shadow:var(--glass-shadow);max-width:1000px;margin:0 auto 40px;animation:fade-in .5s ease-out}@keyframes fade-in{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}h1,h2,h3{color:var(--neon-cyan);margin-bottom:1rem}h1{font-size:2.5rem;margin-bottom:2rem;border-bottom:2px solid rgba(0,176,255,.2);padding-bottom:10px;color:#01579b}h2{font-size:1.8rem;color:var(--text-main);margin-top:2rem}h3{font-size:1.3rem;color:var(--solar-orange);font-weight:700;margin-top:1.5rem}p{line-height:1.7;margin-bottom:1.5rem;font-size:1.1rem;color:#37474f}.tech-text{font-family:var(--font-mono);color:var(--success-green)}.example-box{background:#00b0ff1a;border-left:4px solid var(--neon-cyan);padding:15px;margin:20px 0;border-radius:0 8px 8px 0;font-size:1rem;color:#0277bd}.widget-container{background:#ffffff80;border:1px solid rgba(0,0,0,.05);border-radius:12px;padding:30px;margin:30px 0;min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;box-shadow:inset 0 0 20px #00000005}.widget-title{position:absolute;top:10px;left:15px;font-family:var(--font-mono);font-size:.8rem;color:var(--text-muted);opacity:.7;font-weight:700}.btn{background:#fff;border:2px solid var(--neon-cyan);color:var(--neon-cyan);padding:10px 25px;border-radius:6px;cursor:pointer;font-family:var(--font-mono);font-weight:700;transition:all .3s;text-transform:uppercase;letter-spacing:1px}.btn:hover{background:var(--neon-cyan);color:#fff;box-shadow:0 4px 15px #00b0ff4d}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#0000000d}::-webkit-scrollbar-thumb{background:#0003;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#0000004d}#menu-toggle{display:block;position:fixed;top:15px;left:15px;z-index:100;background:var(--neon-cyan);color:#fff;border:none;padding:10px 15px;border-radius:8px;font-size:1.5rem;cursor:pointer;box-shadow:0 4px 10px #0003;transition:all .3s ease}#menu-toggle:hover{background:#01579b;transform:scale(1.05)}#close-sidebar{display:flex!important;align-items:center;justify-content:center;position:absolute;top:15px;right:15px;background:#fff;border:1px solid var(--neon-cyan);border-radius:50%;width:28px;height:28px;font-size:1.2rem;line-height:1;color:var(--neon-cyan);box-shadow:0 2px 5px #0000001a;cursor:pointer;z-index:210;transition:all .2s ease}#close-sidebar:hover{background:var(--neon-cyan);color:#fff}#close-sidebar:active{transform:scale(.9)}#app{display:flex;height:100vh;width:100vw}#sidebar{width:300px;flex-shrink:0;background:#ffffffd9;border-right:var(--glass-border);padding:60px 20px 20px;display:flex;flex-direction:column;overflow-y:auto;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:200;box-shadow:2px 0 10px #0000000d;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative}#app.sidebar-collapsed #sidebar{width:0;padding-left:0;padding-right:0;opacity:0;pointer-events:none;border-right:none}#main-content{flex-grow:1;min-width:0;height:100%;overflow-y:auto;padding:40px;position:relative}.navigation-footer{margin-top:50px;padding-top:30px;border-top:1px solid rgba(0,0,0,.08);display:flex;flex-direction:column;gap:20px;width:100%}.next-hint{font-style:italic;color:var(--text-muted);text-align:center;font-size:.95rem;opacity:.8}.footer-buttons{display:flex;justify-content:space-between;align-items:stretch;gap:15px;width:100%}.footer-buttons>*{flex:1;max-width:48%}.prev-section-btn,.next-section-btn{display:flex;align-items:center;justify-content:center;min-height:50px;padding:12px 20px;border-radius:12px;font-weight:600;font-size:1rem;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);text-decoration:none;font-family:var(--font-main)}.prev-section-btn{background:#fff;border:2px solid var(--neon-cyan);color:var(--neon-cyan)}.prev-section-btn:hover{background:#00b0ff0d;box-shadow:0 4px 12px #00b0ff1a;transform:translateY(-2px)}.next-section-btn{background:var(--neon-cyan);border:2px solid var(--neon-cyan);color:#fff;box-shadow:0 4px 15px #00b0ff33}.next-section-btn:hover{background:#01579b;border-color:#01579b;box-shadow:0 6px 20px #00b0ff4d;transform:translateY(-2px)}.end-msg{color:var(--success-green);font-weight:800;font-style:italic;text-align:center;width:100%;font-size:1.8rem;margin-bottom:10px;animation:bounce-in .6s cubic-bezier(.175,.885,.32,1.275)}@keyframes bounce-in{0%{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}.celebration-balloon{position:fixed;bottom:-100px;font-size:2.5rem;z-index:9999;pointer-events:none;animation:float-up-sway 5s ease-in forwards}@keyframes float-up-sway{0%{transform:translateY(0) translate(0) rotate(0);opacity:1}50%{transform:translateY(-50vh) translate(50px) rotate(20deg)}to{transform:translateY(-120vh) translate(-30px) rotate(-20deg);opacity:0}}@media(max-width:600px){.footer-buttons{flex-direction:column-reverse;align-items:center}.footer-buttons>*{max-width:100%;width:100%}.prev-section-btn,.next-section-btn{min-height:55px}}@media(max-width:900px){body{overflow:auto;height:auto}#app{display:block;height:100vh;width:100vw;overflow-x:hidden}#menu-toggle{display:block;position:fixed;top:20px;left:20px;background:var(--neon-cyan);color:#fff;box-shadow:0 4px 15px #00b0ff66;z-index:100}#sidebar{position:fixed;top:0;left:-320px;height:100vh;width:300px;transition:left .3s ease;z-index:250;opacity:1;pointer-events:none;box-shadow:5px 0 15px #0000001a;overflow-y:hidden}#sidebar.open{left:0!important;pointer-events:auto;overflow-y:auto}#main-content{display:block;width:100%;height:100%;padding:80px 20px 20px;overflow-y:auto}.content-card{padding:20px;margin-bottom:20px}h1{font-size:1.8rem}.widget-container{padding:15px;min-height:250px;display:block;overflow-x:auto;text-align:center}}.authors-container{display:flex;flex-wrap:wrap;gap:30px;justify-content:center;margin-top:20px}.author-card{background:#fffc;border:1px solid rgba(255,255,255,.5);border-radius:16px;padding:30px;width:300px;text-align:center;box-shadow:0 8px 32px #1f26871a;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:transform .3s ease,box-shadow .3s ease}.author-card:hover{transform:translateY(-5px);box-shadow:0 12px 40px #00b0ff33;border-color:var(--neon-cyan)}.author-avatar{width:120px;height:120px;border-radius:50%;object-fit:cover;border:4px solid var(--neon-cyan);margin-bottom:20px;box-shadow:0 4px 15px #0000001a}.author-name{font-size:1.4rem;color:var(--text-main);margin-bottom:5px;font-weight:700}.author-role{font-size:.9rem;color:var(--text-muted);margin-bottom:20px;font-family:var(--font-mono);min-height:40px}.linkedin-btn{display:inline-flex;align-items:center;gap:8px;background:#0077b5;color:#fff;padding:10px 20px;border-radius:25px;text-decoration:none;font-weight:700;font-size:.9rem;transition:background .3s ease}.linkedin-btn:hover{background:#005582;box-shadow:0 4px 12px #0077b54d}
