*,*:after,*:before{margin:0;padding:0;box-sizing:border-box}body,html,#root,.app-root{margin:0;padding:0;min-height:100vh;font-family:Inter,Segoe UI,Arial,sans-serif;background:#181c24;color:#e2e8f0;overflow-x:hidden}.app-root{min-height:100vh;background:linear-gradient(120deg,#181c24 60%,#23283a)}.main-2col-layout{display:flex;flex-direction:row;gap:48px;max-width:1280px;margin:48px auto 0;align-items:flex-start}.main-3col-layout{display:grid;grid-template-columns:1.1fr 1fr 1.2fr;gap:40px;max-width:1500px;margin:48px auto 0;align-items:flex-start}.left-stack{display:flex;flex-direction:column;gap:32px;flex:1 1 340px}.center-stack{display:flex;flex-direction:column;gap:32px}.action-card,.console-card,.code-card,.eventloop-card.flex-card{background:#23283a;color:#e2e8f0;border-radius:18px;box-shadow:0 4px 32px #0001,0 1.5px 8px #b6c3e633;padding:0;overflow:hidden;display:flex;flex-direction:column}.action-card{padding:0}.explanation-horizontal{padding:36px 36px 20px;background:linear-gradient(120deg,#23283a 80%,#23283a);color:#f6e05e;font-size:1.22em;line-height:1.8;font-weight:500;border-bottom:1.5px solid #e2e8f0;text-align:center}.controls-horizontal{display:flex;justify-content:center;gap:24px;margin-top:22px}.controls-horizontal button{border:none;border-radius:8px;padding:12px 32px;font-size:1.08em;font-weight:600;cursor:pointer;box-shadow:0 2px 8px #4f8cff22;transition:background .2s,color .2s,transform .2s}.controls-horizontal button:first-child{background:linear-gradient(90deg,#ffb347 60%,#ffe066);color:#23283a}.controls-horizontal button:last-child{background:linear-gradient(90deg,#4f8cff 60%,#6bc1ff);color:#fff}.controls-horizontal button:disabled{background:#3a4157!important;color:#888!important;cursor:not-allowed}.controls-horizontal button:not(:disabled):hover{filter:brightness(1.08);transform:translateY(-2px) scale(1.04)}.console-card{padding:0}.output-horizontal{background:#10131a;color:#ffe066;font-family:Fira Mono,Consolas,monospace;border-radius:0 0 18px 18px;padding:24px 32px;font-size:1.08em;min-height:80px;box-shadow:0 2px 8px #0002;margin:0}.output-horizontal strong{color:#4f8cff}.animated-console-output{display:flex;flex-direction:column;gap:14px;margin-top:10px}.console-line{opacity:0;transform:translateY(16px);animation:fadeInConsole .7s forwards;background:#23283a;color:#ffe066;border-radius:7px;padding:8px 14px;font-size:1.08em;font-family:Fira Mono,Consolas,monospace;box-shadow:0 1px 4px #0002}@keyframes fadeInConsole{to{opacity:1;transform:translateY(0)}}.code-card{flex:2 1 0;max-width:700px;padding:0 0 32px;margin-left:auto;margin-right:0;min-width:340px}.code-card h2{padding:36px 36px 0;margin-bottom:0;color:#4f8cff;font-size:1.18em;font-weight:700;letter-spacing:.01em}.code-block{background:#10131a;color:#e2e8f0;border-radius:10px;padding:20px 24px;font-size:1.08em;margin:18px 0 0;overflow-x:auto;font-family:Fira Mono,Consolas,monospace;box-shadow:0 2px 8px #0002}.code-block .highlight{background:#4f8cff;color:#ffe066;border-radius:4px;padding:0 4px;font-weight:700;transition:background .3s}.eventloop-row{width:100vw;max-width:100vw;margin:48px 0 0;display:flex;justify-content:center}.event-loop-card-container-full{background:#23283a;color:#e2e8f0;border-radius:18px;box-shadow:0 4px 32px #0001,0 1.5px 8px #b6c3e633;padding:40px 32px;margin:0 auto;min-width:0;width:100vw;max-width:100vw;display:flex;align-items:center;justify-content:center;overflow-x:auto;box-sizing:border-box;max-height:60vh;overflow-y:auto}.event-loop-card-container-vertical{background:#23283a;color:#e2e8f0;border-radius:18px;box-shadow:0 4px 32px #0001,0 1.5px 8px #b6c3e633;padding:32px 18px;margin:0 auto;min-width:0;width:100%;display:flex;align-items:center;justify-content:center;min-height:420px;max-height:70vh;overflow:auto}.diagram-container-horizontal{display:flex;flex-direction:row;align-items:flex-end;justify-content:center;gap:40px;width:100%;min-height:260px;flex-wrap:nowrap;min-width:900px;max-height:52vh;overflow-y:auto}.eventloop-diagram-vertical{display:flex;flex-direction:column;gap:32px;width:100%;max-width:520px}.eventloop-top-row,.eventloop-bottom-row{display:flex;flex-direction:row;gap:32px;width:100%}.eventloop-half{flex:1 1 0;display:flex;flex-direction:column}.section-horizontal{display:flex;flex-direction:column;align-items:center;min-width:220px;background:#eaf2fb;border-radius:14px;box-shadow:0 1px 8px #b6c3e622;padding:22px 18px 28px;margin:0;flex:1 1 0;min-height:220px}.section-horizontal h3{margin:0 0 14px;text-align:center;font-size:1.15em;color:#4f8cff;font-weight:700;letter-spacing:.01em}.section-vertical{background:#eaf2fb;border-radius:14px;box-shadow:0 1px 8px #b6c3e622;padding:18px 12px 22px;margin:0;min-height:120px;display:flex;flex-direction:column;align-items:center}.section-vertical h3{margin:0 0 10px;text-align:center;font-size:1.08em;color:#4f8cff;font-weight:700;letter-spacing:.01em}.stack-horizontal,.webapis-horizontal,.microtasks-horizontal,.queue-horizontal{display:flex;flex-direction:column-reverse;align-items:stretch;min-height:80px;min-width:180px;width:100%;gap:12px;justify-content:flex-end}.stack-vertical,.webapis-vertical,.microtasks-vertical,.queue-vertical{display:flex;flex-direction:column-reverse;align-items:stretch;min-height:40px;width:100%;gap:8px;justify-content:flex-end}.stack-item-horizontal,.webapi-item-horizontal,.microtask-item-horizontal,.queue-item-horizontal{background:linear-gradient(90deg,#4f8cff 60%,#6bc1ff);color:#fff;border-radius:12px;font-size:1.18em;min-height:56px;min-width:180px;padding:18px 32px;margin:10px 0;border:none;box-shadow:0 4px 16px #4f8cff22;word-break:break-word;display:flex;align-items:center;justify-content:center;font-weight:600;letter-spacing:.01em;transition:box-shadow .3s,background .3s}.stack-item-vertical,.webapi-item-vertical,.microtask-item-vertical,.queue-item-vertical{background:linear-gradient(90deg,#4f8cff 60%,#6bc1ff);color:#fff;border-radius:10px;font-size:1.08em;min-height:36px;min-width:120px;padding:10px 18px;margin:6px 0;border:none;box-shadow:0 2px 8px #4f8cff22;word-break:break-word;display:flex;align-items:center;justify-content:center;font-weight:600;letter-spacing:.01em;transition:box-shadow .3s,background .3s}.stack-item-horizontal,.stack-item-vertical{animation:stackSlideInH 1.7s cubic-bezier(.4,2,.6,1),popin 1.7s,highlightChange 2s}.webapi-item-horizontal,.webapi-item-vertical{animation:webapiSlideInH 1.7s cubic-bezier(.4,2,.6,1),popin 1.7s,highlightChange 2s}.microtask-item-horizontal,.microtask-item-vertical{animation:microtaskSlideInH 1.7s cubic-bezier(.4,2,.6,1),popin 1.7s,highlightChange 2s}.queue-item-horizontal,.queue-item-vertical{animation:queueSlideInH 1.7s cubic-bezier(.4,2,.6,1),popin 1.7s,highlightChange 2s}@keyframes stackSlideInH{0%{transform:translateY(40px) scale(.7);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes webapiSlideInH{0%{transform:translate(-60px) scale(.7);opacity:0}to{transform:translate(0) scale(1);opacity:1}}@keyframes microtaskSlideInH{0%{transform:translate(60px) scale(.7);opacity:0}to{transform:translate(0) scale(1);opacity:1}}@keyframes queueSlideInH{0%{transform:translateY(-40px) scale(.7);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes popin{0%{transform:scale(.7) translateY(30px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}@keyframes highlightChange{0%{box-shadow:0 0 #ffe066;background:#ffe066;color:#23272e}60%{box-shadow:0 0 0 12px #ffe06644;background:#ffe066;color:#23272e}to{box-shadow:0 1px 4px #0002;background:linear-gradient(90deg,#4f8cff 60%,#6bc1ff);color:#fff}}.tooltip-wrapper{cursor:help;outline:none;position:relative}.tooltip-wrapper:after{content:"ⓘ";color:#4f8cff;font-size:1.1em;position:absolute;right:-18px;top:50%;transform:translateY(-50%);pointer-events:none;opacity:.85;transition:opacity .2s}.tooltip-wrapper:focus:after,.tooltip-wrapper:hover:after{opacity:1;color:#ffe066}.tooltip-box{display:block;position:absolute;z-index:3000;left:110%;top:50%;transform:translateY(-50%);min-width:220px;max-width:320px;background:#23283a;color:#ffe066;border-radius:10px;box-shadow:0 4px 24px #0007;padding:16px 20px;font-size:1em;pointer-events:none;opacity:.98;border:2px solid #4f8cff;animation:tooltipPop .3s}@keyframes tooltipPop{0%{transform:scale(.85) translateY(-50%);opacity:0}to{transform:scale(1) translateY(-50%);opacity:1}}.tooltip-box.tooltip-below{left:50%;top:100%;transform:translate(-50%) translateY(12px);min-width:220px;max-width:320px;background:#23283a;color:#ffe066;border-radius:10px;box-shadow:0 4px 24px #0007;padding:16px 20px;font-size:1em;pointer-events:none;opacity:.98;border:2px solid #4f8cff;animation:tooltipPopBelow .3s;position:absolute;z-index:3000;white-space:normal}@keyframes tooltipPopBelow{0%{transform:translate(-50%) translateY(30px) scale(.85);opacity:0}to{transform:translate(-50%) translateY(12px) scale(1);opacity:1}}@media (max-width: 1200px){.main-3col-layout{grid-template-columns:1fr 1fr;gap:24px;max-width:98vw}.event-loop-card-container-vertical{max-width:98vw;padding:18px 4px}.eventloop-diagram-vertical{max-width:98vw}}@media (max-width: 1100px){.main-2col-layout{flex-direction:column;gap:32px;max-width:98vw}.event-loop-card-container-full{width:100vw;max-width:100vw;padding:18px 4px;max-height:48vh}.code-card h2,.explanation-horizontal{padding:18px 8px 0}.diagram-container-horizontal{min-width:700px;max-height:40vh}}@media (max-width: 900px){.main-3col-layout{display:flex;flex-direction:column;gap:18px;max-width:100vw}.event-loop-card-container-vertical{max-width:100vw;padding:8px 0}.eventloop-diagram-vertical{max-width:100vw}}@media (max-width: 700px){.main-2col-layout{flex-direction:column;gap:16px;max-width:100vw}.event-loop-card-container-full{width:100vw;max-width:100vw;padding:8px 0;max-height:38vh}.code-card,.action-card,.console-card{min-width:0;max-width:100vw;padding:0}.code-block{padding:12px 6px;font-size:.98em}.explanation-horizontal{padding:12px 6px 8px;font-size:1em}.diagram-container-horizontal{min-width:520px;gap:16px;max-height:32vh}}.diagram-container-stacked{display:flex;flex-direction:column;gap:24px;width:100%;align-items:stretch;justify-content:flex-start;min-width:0}.section-stacked{background:#23283a;color:#f6e05e;border-radius:14px;box-shadow:0 1px 8px #b6c3e622;padding:18px 12px 22px;margin:0;min-height:90px;display:flex;flex-direction:column;align-items:center;width:100%}.section-stacked h3{margin:0 0 10px;text-align:center;font-size:1.08em;color:#4f8cff;font-weight:700;letter-spacing:.01em}.stack-stacked,.webapis-stacked,.microtasks-stacked,.queue-stacked{display:flex;flex-direction:column-reverse;align-items:stretch;min-height:32px;width:100%;gap:8px;justify-content:flex-end}.stack-item-stacked,.webapi-item-stacked,.microtask-item-stacked,.queue-item-stacked{background:#23283a;color:#ffe066;border-radius:10px;font-size:1.08em;min-height:32px;min-width:100px;padding:10px 18px;margin:6px 0;border:none;box-shadow:0 2px 8px #4f8cff22;word-break:break-word;display:flex;align-items:center;justify-content:center;font-weight:600;letter-spacing:.01em;transition:box-shadow .3s,background .3s}.stack-stacked .stack-item-stacked:first-child,.webapis-stacked .webapi-item-stacked:first-child,.microtasks-stacked .microtask-item-stacked:first-child,.queue-stacked .queue-item-stacked:first-child{background:#4f8cff;color:#fff;box-shadow:0 2px 16px #4f8cff55}.stack-item-stacked{animation:stackSlideInH 1.7s cubic-bezier(.4,2,.6,1),popin 1.7s,highlightChange 2s}.webapi-item-stacked{animation:webapiSlideInH 1.7s cubic-bezier(.4,2,.6,1),popin 1.7s,highlightChange 2s}.microtask-item-stacked{animation:microtaskSlideInH 1.7s cubic-bezier(.4,2,.6,1),popin 1.7s,highlightChange 2s}.queue-item-stacked{animation:queueSlideInH 1.7s cubic-bezier(.4,2,.6,1),popin 1.7s,highlightChange 2s}.event-loop-arrow-stacked{text-align:center;margin:18px 0 0;font-size:1.1em;color:#2b6cb0;font-weight:700;letter-spacing:1px}@media (max-width: 700px){.diagram-container-stacked{gap:14px}.section-stacked{min-height:60px;padding:10px 6px 12px}}.eventloop-card.flex-card{background:#23283a;color:#e2e8f0;border-radius:18px;box-shadow:0 4px 32px #0001,0 1.5px 8px #b6c3e633;padding:32px 18px;margin:0 auto;min-width:0;width:100%;display:flex;align-items:center;justify-content:center;min-height:420px;max-width:520px}.footer-credit{width:100vw;display:flex;justify-content:center;align-items:center;padding:32px 0 24px;font-size:1.13em;color:#ffe066;background:transparent;letter-spacing:.01em;font-weight:500;margin-top:32px}.footer-link{color:#4f8cff;text-decoration:none;font-weight:700;margin-left:4px;border-bottom:2px solid #4f8cff;transition:color .2s,border-bottom .2s}.footer-link:hover{color:#ffe066;border-bottom:2px solid #ffe066}.modal-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#181c24d9;z-index:1000;display:flex;align-items:center;justify-content:center;animation:modalFadeIn .3s}@keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background:#23283a;color:#ffe066;border-radius:18px;box-shadow:0 8px 40px #000a,0 2px 12px #4f8cff33;padding:40px 36px 32px;min-width:320px;max-width:90vw;text-align:center;display:flex;flex-direction:column;align-items:center;animation:modalPop .3s}@keyframes modalPop{0%{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}.modal-content h2{color:#4f8cff;font-size:1.3em;margin-bottom:18px;font-weight:700}.modal-content p{color:#ffe066;font-size:1.13em;margin-bottom:32px;line-height:1.7}.modal-btn{background:linear-gradient(90deg,#4f8cff 60%,#6bc1ff);color:#23283a;border:none;border-radius:8px;padding:12px 38px;font-size:1.13em;font-weight:700;cursor:pointer;box-shadow:0 2px 8px #4f8cff22;transition:background .2s,color .2s,transform .2s}.modal-btn:hover{background:linear-gradient(90deg,#ffe066 60%,#ffe066);color:#23283a;transform:translateY(-2px) scale(1.04)}@media (max-width: 600px){.modal-content{min-width:0;padding:18px 8px}.modal-content h2{font-size:1.08em}.modal-content p{font-size:1em}.modal-btn{font-size:1em;padding:10px 18px}}