.quiz-page{background-color:var(--bg-main);grid-template:"navbar navbar"8vh"sidebar main"1fr"sidebar footer"clamp(140px,2vh,220px)/240px auto;min-height:100vh;transition:grid-template-columns .2s;display:grid}.quiz-page nav{background-color:var(--primary-color);grid-area:navbar;width:100%}.quiz-page main{background-color:var(--bg-main);flex-direction:column;grid-area:main;align-items:center;gap:32px;width:100%;padding:48px 0;display:flex;position:relative}.quiz-page .quiz-header{flex-direction:column;gap:20px;width:100%;max-width:1080px;height:auto;display:flex}.quiz-page .quiz-header>.quiz-navigation{width:100%;color:var(--text-main);align-items:center;gap:16px;display:flex}.quiz-page .quiz-header>.quiz-navigation>.heart-container{margin-left:auto;padding-left:12px;display:flex}.quiz-page .quiz-header>.quiz-navigation>.heart-container>svg{color:var(--text-inverse);margin-left:-12px}.progress-container{gap:12px;width:100%;display:flex}.progress-container>div{background-color:var(--border-main);border-radius:4px;width:100%;height:12px}.progress-container>.active{background-color:var(--primary-color)}.quiz-page .quiz-container{flex-direction:column;flex:1;gap:24px;width:100%;min-width:1080px;display:flex}.quiz-page .quiz-container h1{padding:8px 0}.options-container#multiple-choice{flex-direction:column;flex:1;gap:12px;display:flex}.quiz-page label{width:100%;height:100%;max-height:96px}.quiz-page label input[type=radio]{display:none}.quiz-page label input[type=radio]:checked+.options{background-color:var(--selected-background-color);border-color:var(--selected-color)}.quiz-page label input[type=radio]:checked+.options>p{color:var(--selected-color)}.quiz-page label input[type=radio]:checked+.options>div{background-color:var(--selected-color);border-color:var(--selected-color);color:var(--text-inverse)}.quiz-page label input[type=radio]:not(:disabled):hover+.options{transform:translateY(-2px)}.quiz-page label input[type=radio]:not(:disabled):active+.options{border-bottom-width:3px;transform:translateY(2px)}.quiz-page label input[type=radio]:not(:disabled):active+.options div{color:var(--primary-color)}.quiz-page .options{background-color:var(--bg-card);border:3px solid var(--border-main);border-bottom:5px solid var(--border-main);cursor:pointer;-webkit-user-select:none;user-select:none;width:100%;height:100%;min-height:40px;max-height:96px;color:var(--text-muted);border-radius:16px;align-items:center;gap:20px;padding:0 24px;font-family:Poppins,sans-serif;font-weight:600;transition:transform .15s,border-color .2s,background-color .2s,box-shadow .2s;display:flex}.quiz-page .options>svg,.quiz-page .options p{pointer-events:none}.quiz-page .options:hover{transform:translateY(-2px)}.quiz-page .options:active{border-color:var(--selected-color);background-color:var(--selected-background-color);border-bottom-width:3px;padding-bottom:2px;transform:translateY(2px)}.quiz-page .options:active p,.quiz-page .options:active svg{color:var(--selected-color)}.quiz-page .options:active>div{border-color:var(--selected-color)}.quiz-page .options.dragging{background-color:var(--selected-background-color);border-color:var(--selected-color);color:var(--selected-color)}.quiz-page .options.dragging>div{background-color:var(--selected-color);color:var(--text-inverse);border:none}.quiz-page .options>div{aspect-ratio:1;border:3px solid var(--border-main);color:#afafaf;border-radius:8px;justify-content:center;align-items:center;width:auto;height:clamp(36px,4vh,44px);font-size:clamp(1rem,1.25vw,1.25rem);font-weight:600;transition:background .35s;display:flex}.options-container#order{flex:1;align-items:flex-start}.order-number,.order-options{justify-content:flex-start}.order-number{height:100%}.order-number>div{flex:1;min-height:0;max-height:96px}.order-number>div>h2{padding:0 20px}.order-options{flex:1;height:100%}.order-options>.options{border-radius:16px}.draggable-item{will-change:transform, opacity;cursor:grab!important}.draggable-item:active{cursor:grabbing!important}.draggable-item.is-dragging{border-style:dashed;border-color:var(--selected-color);transform:scale(.98)}.draggable-item.is-over{border-color:var(--selected-color);background-color:var(--selected-background-color);box-shadow:0 8px 20px #00000026}.draggable-item.is-over>svg,.draggable-item.is-over p{color:var(--selected-color)}.draggable-item.swap-animation-start{transition:none}.draggable-item.swap-animation-settle{transition:transform .22s ease-in-out;transform:translateY(0)}.draggable-item.swap-animation-start.swap-moved-down{transform:translateY(calc((100% + 12px) * var(--swap-distance) * -1))}.draggable-item.swap-animation-start.swap-moved-up{transform:translateY(calc((100% + 12px) * var(--swap-distance)))}.draggable-item.swap-animation-start.swap-shifted-down{transform:translateY(calc(100% + 12px))}.draggable-item.swap-animation-start.swap-shifted-up{transform:translateY(calc(-100% - 12px))}.options-container#pair{flex:1;align-items:flex-start;gap:36px}.pair-left-column,.pair-right-column{flex:1;justify-content:flex-start;height:100%}:is(.pair-left-column,.pair-right-column)>label{width:100%;height:100%;max-height:96px}:is(.pair-left-column,.pair-right-column)>label>.options p{text-align:center;width:100%}.pair-left-column input[type=radio],.pair-right-column input[type=radio]{display:none}.pair-left-column input[type=radio]:checked+.options,.pair-right-column input[type=radio]:checked+.options{background-color:var(--selected-background-color);border-color:var(--selected-color);color:var(--selected-color)}.pair-option-disabled{pointer-events:none;cursor:default}.pair-option-disabled .options{cursor:default}.pair-option-disabled .options p{color:inherit}.pair-option-matched{color:#16a34a!important;cursor:default!important;background-color:#22c55e26!important;border-color:#22c55e!important}.pair-option-matched>p{color:#16a34a!important}.pair-option-incorrect{color:#dc2626!important;background-color:#ef444426!important;border-color:#ef4444!important}.pair-option-incorrect>p{color:#dc2626!important}.pair-option-settled{color:#e0e0e0!important;cursor:default!important}.options-container#ftb{flex:1;align-items:flex-start}.answer-box{border:2px solid var(--border-main);resize:none;height:100%;max-height:320px;color:var(--text-main);border-radius:12px;flex:1;padding:24px 16px;font-family:Montserrat,sans-serif;font-size:clamp(1rem,2vw,1.5rem);font-weight:500}.answer-box:focus{outline:none}.code-problem-layout{grid-template-columns:1fr 2fr 1.5fr;width:100%;height:100%;display:grid}.code-problem-layout>div{border:2px solid var(--border-main);flex-direction:column;display:flex}.code-problem-layout>div+div{border-left:none}.header{display:flex}.header>div{border-bottom:2px solid var(--border-main);flex:1;align-items:center;gap:8px;padding:12px;display:flex;position:relative}.header>div>svg{width:24px;height:auto;color:var(--text-main)}.header>div>h2{-webkit-user-select:none;user-select:none;font-size:clamp(.75rem,2vw,1.25rem)}.header>div.active:before{content:"";background-color:var(--selected-color);width:100%;height:4px;position:absolute;bottom:0;left:0}#tab .header>div+div{border-left:2px solid var(--border-main)}.file-tab{color:#111827;cursor:pointer;text-align:left;background:#f3f4f6;border:none;border-bottom:4px solid #0000;align-items:center;gap:8px;width:100%;padding:12px 18px;transition:all .2s;display:flex}.file-tab>svg{width:22px;height:22px;color:inherit}.file-tab>h2{margin:0;font-size:clamp(.8rem,1.4vw,1.2rem);font-weight:600}.file-tab.active{background:#fff;border-bottom-color:#7c3aed;box-shadow:inset 0 -1px #fff}.file-tab:not(.active){color:#1f2937}.instruction-container{padding:12px}.instruction{border:1px solid var(--border-main);border-radius:20px;gap:8px;padding:12px;display:flex}.instruction>.check-circle{border:1px solid var(--border-main);border-radius:50%;min-width:28px;height:28px}.instruction>.check-circle svg{color:#fff}.instruction>p{font-size:14px}.instruction.correct{background-color:#ecfdf550;border-color:#d1fae5}.instruction.correct>.check-circle{background-color:#10b981;border:none}.instruction.disabled{border-color:var(--border-main);-webkit-user-select:none;user-select:none;background-color:#f0f0f0}.instruction.disabled>.check-circle{background-color:#999;border:none}.code-editor-container>.line-number{text-align:right;background-color:#f0f0f0;flex-direction:column;height:100%;padding:16px 12px;display:flex}.code-editor-container>.line-number>p{-webkit-user-select:none;user-select:none;font-family:var(--font-jetbrains-mono);color:#999;font-size:clamp(.5rem,1.5vw,1rem);line-height:1.5}.code-editor-container>.code-editor{line-height:1.5;font-family:var(--font-jetbrains-mono);resize:none;background-color:#0000;border:none;outline:none;width:100%;height:100%;padding:16px 12px;font-size:clamp(.5rem,1.5vw,1rem);font-weight:500}.monaco-editor-shell{border-left:1px solid var(--border-main);background-color:#f3f4f6;overflow:hidden}.monaco-code-editor,.monaco-code-editor>.monaco-editor,.monaco-code-editor>.monaco-editor>.overflow-guard{width:100%!important;height:100%!important}.monaco-code-editor .monaco-editor,.monaco-code-editor .monaco-editor-background,.monaco-code-editor .margin{background-color:#f3f4f6!important}.monaco-code-editor .monaco-editor .view-overlays .current-line,.monaco-code-editor .monaco-editor .view-overlays .current-line~.line-numbers{background:#4f46e514!important}.canvas-container,.code-editor-container{flex:1;justify-content:flex-start;gap:0;height:100%}.toggle-device-container{justify-content:flex-end;gap:12px!important}.toggle-device-container svg{width:20px;height:20px;transition:all .35s;color:#a1a1aa!important}.toggle-device{-webkit-user-select:none;user-select:none;background-color:var(--border-main);border-radius:999px;position:relative;width:54px!important}.toggle-device>input[type=checkbox]{display:none}.toggle-device>input[type=checkbox]:checked+.toggle-slider:before{transform:translate(22px)}.toggle-device>.toggle-slider{cursor:pointer;position:absolute;inset:0}.toggle-device>.toggle-slider:before{content:"";background-color:#fff;border-radius:50%;width:24px;height:24px;transition:all .35s;position:absolute;bottom:3px;left:4px;box-shadow:0 1px 3px #00000040}.toggle-device-container:has(.toggle-device input[type=checkbox]:not(:checked)) #desktop-toggle{color:var(--selected-color)!important}.toggle-device-container:has(.toggle-device input[type=checkbox]:checked) #mobile-toggle{color:var(--selected-color)!important}.canvas-container>.preview-frame{background:#fff;border:0;flex:1;width:100%;min-height:0}.canvas-container>.console{border-top:2px solid var(--border-main);width:100%}.canvas-container>.console>.header>div{border:none}.canvas-container>.console>.header>div>.console-maximize{color:inherit;cursor:pointer;background:0 0;border:0;justify-content:flex-end;margin-left:auto;padding:0}.canvas-container>.console>.header>div>.console-maximize svg{width:32px;height:auto}.canvas-container>.console .console-output{border-top-color:#0000;min-height:0;max-height:0;padding-top:0;padding-bottom:0;transition:max-height .25s,min-height .25s,padding .25s,border-top-color .25s;overflow:hidden}.canvas-container>.console.console-open .console-output{border-top:1px solid var(--border-main);min-height:180px;max-height:240px;padding-top:16px;padding-bottom:16px;overflow:auto}.canvas-container>.console.console-open .console-maximize svg{transform:rotate(180deg)}.console-output{color:#e5e7eb;min-height:180px;font-family:var(--font-jetbrains-mono);background:#111827;padding:16px 20px;overflow:auto}.console-empty{color:#9ca3af;margin:0}.console-line{white-space:pre-wrap;overflow-wrap:anywhere;gap:12px;padding:6px 0;display:flex}.console-line code{font:inherit}.console-level{color:#93c5fd;text-transform:uppercase;min-width:44px;font-size:.75rem}.console-warn .console-level{color:#fcd34d}.console-error .console-level{color:#fca5a5}#code-problem{grid-template-areas:"navbar navbar""sidebar main""sidebar main"}#code-problem>main{padding:48px}.quiz-page footer{background-color:var(--bg-card);border-top:2px solid var(--border-main);grid-area:footer;justify-content:center;padding:36px clamp(24px,10vw,200px);display:flex}.quiz-page footer>div>.answer-message{display:none}.quiz-page footer>div>button.options{justify-content:center;width:320px;min-height:clamp(56px,6vh,80px);font-size:clamp(1rem,1vw,2rem);transition:all .2s}.quiz-page footer>div>button.options#submit{background-color:var(--selected-color);color:var(--text-inverse);border:none;border-bottom:6px solid #6b36da;flex-shrink:0;position:relative}.quiz-page footer>div>button#submit:disabled{pointer-events:none;background-color:#afafaf;border:none}.quiz-page footer>div>button.options#submit:after{content:"";background-color:#fff0;width:100%;height:100%;transition:all .2s;position:absolute;top:0;bottom:0}.quiz-page footer>div>button.options#submit:not(:disabled):hover:after{background-color:#ffffff1a}.quiz-page footer>div>button.options#skip{color:#afafaf;background-color:var(--bg-card)}.quiz-page footer>div>button.options#skip:hover{filter:brightness(.9);border-color:var(--border-main)}.quiz-page footer>div>button.options#skip:active{border-bottom-width:3px}.quiz-page footer>div>button.options#submit:active{border-bottom-width:0}footer.correct,footer.incorrect{border:none}:is(footer.correct,footer.incorrect)>div>.answer-message{justify-content:flex-start;gap:16px;display:flex}:is(footer.correct,footer.incorrect)>div>.answer-message>#answer-message-text{line-height:1.5}:is(footer.correct,footer.incorrect)>div>.answer-message>#answer-message-text p{font-size:clamp(.5rem,1.5vw,1rem)}:is(footer.correct,footer.incorrect)>div>.answer-message>.answer-message-icon{aspect-ratio:1;border-radius:50%;width:auto;height:100%}:is(footer.correct,footer.incorrect)>div>.answer-message>.answer-message-icon>svg{color:#fff}:is(footer.correct,footer.incorrect)>div>button.options#skip{display:none}footer.correct{background-color:#22c55e26}footer.correct>div>.answer-message>div h2,footer.correct>div>.answer-message div p{color:#16a34a}footer.correct>div>.answer-message>.answer-message-icon{background-color:#22c55e}footer.correct>div>.answer-message>.answer-message-icon>#correct{display:flex}footer.correct>div>.answer-message>.answer-message-icon>#wrong{display:none}footer.correct>div>button.options#submit{background-color:#22c55e;border-color:#1fb255}footer.incorrect{background-color:#ef444426}footer.incorrect>div>.answer-message>div h2,footer.incorrect>div>.answer-message div p{color:#dc2626}footer.incorrect>div>.answer-message>.answer-message-icon{background-color:#ef4444}footer.incorrect>div>.answer-message>.answer-message-icon>#correct{display:none}footer.incorrect>div>.answer-message>.answer-message-icon>#wrong{display:flex}footer.incorrect>div>button.options#submit{background-color:#ef4444;border-color:#d83d3d}