@keyframes spin{to { transform: rotate(360deg); }}@keyframes checkPop{0% { opacity: 0; transform: translateY(6px) scale(.96); } 65% { transform: translateY(-2px) scale(1.02); } 100% { opacity: 1; transform: translateY(0) scale(1); }}.problem-header{margin-bottom:24px;width:100%}.back-link{display:inline-flex;align-items:center;gap:6px;padding:6px 8px;margin-bottom:18px;color:var(--text-muted);font-size:.88rem;font-weight:600;border-radius:8px;transition:color 150ms ease,background-color 150ms ease}.back-link svg{width:16px;height:16px}.back-link:hover{color:var(--accent-mint);background:var(--bg-elevated)}.problem-header__tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.problem-meta-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;color:var(--text-muted);font-size:.86rem}.problem-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;width:100%;align-items:start}.problem-layout>*{min-width:0}.playground-panel{width:100%;max-width:100%;min-width:0;overflow:hidden;border:1px solid var(--border);border-radius:14px;background:var(--bg-surface);box-shadow:var(--shadow-sm);transition:border-color 180ms ease,box-shadow 180ms ease}.playground-panel:focus-within{border-color:rgba(94,224,207,.28);box-shadow:var(--shadow-md),var(--ring)}.playground-panel__header{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;padding:10px 16px;border-bottom:1px solid var(--border);background:var(--bg-elevated);color:var(--text-muted);font-family:var(--font-mono);font-size:.80rem;flex-wrap:nowrap}.playground-panel__header .dots{display:flex;gap:6px;flex:0 0 auto}.playground-panel__header .dots span{display:inline-block;width:10px;height:10px;border-radius:50%}.dots span:nth-child(1){background:var(--accent-red)}.dots span:nth-child(2){background:var(--accent-amber)}.dots span:nth-child(3){background:var(--accent-green)}.status-with-spinner{display:flex;align-items:center;gap:8px;height:20px;overflow:hidden;min-width:0}.spinner{display:inline-block;width:14px;height:14px;border:2px solid var(--border);border-top-color:var(--accent-mint);border-radius:50%;animation:spin .7s linear infinite;flex:0 0 auto}#playground-status{flex:1 1 auto;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:opacity .25s ease}#playground-status.tip-fade{opacity:0}#code-editor{width:100%;max-width:100%;min-width:0;min-height:clamp(320px,45vh,560px);overflow:hidden;background:#282a36}#code-editor .CodeMirror{width:100%;max-width:100%;min-width:0;height:clamp(300px,45vh,560px);min-height:320px;max-height:560px;font:.92rem/1.55 var(--font-mono)}#code-editor .CodeMirror-scroll{max-width:100%;overflow-x:auto !important;overflow-y:auto !important;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;overscroll-behavior:contain;overscroll-behavior-x:contain;overscroll-behavior-y:auto}#code-editor .cm-s-dracula .CodeMirror-linenumber{color:#8aa3a1}#code-editor .cm-s-dracula span.cm-comment{color:#8296d8}:root[data-theme='light'] .file-row--active{color:#096a62}#code-editor .code-editor-loading{min-height:clamp(320px,45vh,560px);padding:18px;margin:0;background:#282a36;color:var(--text-muted);font:.88rem/1.55 var(--font-mono)}#code-editor .code-editor-fallback{display:block;width:100%;max-width:100%;min-width:0;height:clamp(300px,45vh,560px);min-height:320px;max-height:560px;overflow-x:auto;overflow-y:auto;padding:16px 18px;resize:vertical;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;overscroll-behavior-x:contain;overscroll-behavior-y:auto;border:0;outline:0;background:#282a36;color:#f8f8f2;font:.92rem/1.55 var(--font-mono);tab-size:4}:root[data-theme='light'] #code-editor .code-editor-fallback{background:#f9fbfd;color:#1d2b3d}.playground-toolbar{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0;flex-wrap:nowrap;justify-content:flex-end}.playground-copy-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;font-size:.78rem;font-weight:600;color:var(--text-muted);background:var(--bg-surface);border:1px solid var(--border);border-radius:8px;cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease,transform .1s ease;white-space:nowrap}.playground-copy-btn:hover{background:var(--bg-elevated);color:var(--text);border-color:rgba(94,224,207,.24)}.playground-copy-btn:active{transform:scale(.96)}.playground-copy-btn.copied{background:rgba(94,224,207,.12);color:var(--accent-mint);border-color:rgba(94,224,207,.28)}.run-modal{position:fixed;z-index:1100;inset:0;display:flex;flex-direction:column;background:var(--bg);transform:translateY(100%);transition:transform 260ms cubic-bezier(.2,.8,.2,1)}.run-modal.open{transform:translateY(0)}.run-modal__header{display:flex;align-items:center;gap:12px;flex-shrink:0;padding:18px 20px;border-bottom:1px solid var(--border);background:var(--bg-surface)}.run-modal__header .title{font:700 1.05rem var(--font-display)}.run-modal__status{font-size:1.15rem;line-height:1}.run-modal__status.success{color:var(--accent-green)}.run-modal__status.error,#code-output.has-error{color:var(--accent-red)}.run-modal__close{padding:4px 8px;margin-left:auto;border:0;border-radius:8px;background:transparent;color:var(--text-muted);cursor:pointer;font-size:1.4rem;line-height:1;display:inline-grid;place-items:center;min-width:36px;min-height:36px;transition:background-color 150ms ease,color 150ms ease}.run-modal__close:hover{background:var(--bg-elevated);color:var(--text)}.run-modal__body{flex:1;padding:22px 20px;overflow-y:auto}.run-modal__body h4{margin-bottom:12px;color:var(--text-muted);font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;font-weight:700}#code-output{color:var(--text);font:.92rem/1.7 var(--font-mono);white-space:pre-wrap;word-break:break-word}#code-output:empty::before{color:var(--text-muted);font-style:italic;content:'(no output)'}.side-panel .section-card{margin-bottom:16px;width:100%}#hints-section{min-height:100px}#answer-section textarea{margin-top:8px;line-height:1.6;min-height:110px;resize:vertical}.hint-text{margin-bottom:10px;color:var(--text-muted);font-size:.86rem;line-height:1.6}.hint-power{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:.90rem}.hint-power__icon{font-size:1.15rem}.hint-power__icon--half{opacity:.65}.hint-power__icon--empty{filter:grayscale(1);opacity:.3}.hint-power__label{color:var(--text);font-weight:700}.result{padding:12px 14px;margin-top:14px;border:1px solid;border-radius:10px;font-size:.90rem;line-height:1.5}.result--success{border-color:rgba(109,221,138,.35);background:rgba(109,221,138,.10);color:var(--accent-green);animation:checkPop 320ms cubic-bezier(.2,.8,.2,1)both}.result--fail{border-color:rgba(251,116,128,.35);background:rgba(251,116,128,.08);color:var(--accent-red)}.locked-message{padding:56px 20px;border:1px solid var(--border);border-radius:20px;background:var(--bg-surface);box-shadow:var(--shadow-sm);text-align:center;width:100%}.ad-slot{min-height:90px;margin:20px 0;text-align:center}.files-drawer-overlay{position:fixed;z-index:1050;inset:0;background:rgba(0,0,0,.52);opacity:0;pointer-events:none;transition:opacity 200ms ease}.files-drawer-overlay.open{opacity:1;pointer-events:auto}.files-drawer{position:fixed;z-index:1051;top:0;left:0;display:flex;width:300px;max-width:86vw;height:100vh;height:100dvh;flex-direction:column;padding:20px 16px;border-right:1px solid var(--border);background:var(--bg-surface);box-shadow:var(--shadow-lg);transform:translateX(-100%);transition:transform 240ms cubic-bezier(.2,.8,.2,1)}.files-drawer.open{transform:translateX(0)}.files-drawer__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.files-drawer__header h3{margin:0;font-size:1.05rem;font-weight:700}.files-drawer__close{border:0;border-radius:8px;background:transparent;color:var(--text-muted);cursor:pointer;display:grid;place-items:center;width:36px;height:36px;transition:background-color 150ms ease,color 150ms ease}.files-drawer__close:hover,.file-row:hover,.icon-btn:hover{background:var(--bg-elevated);color:var(--text)}.file-count-label{display:block;margin-bottom:12px;color:var(--text-muted);font-size:.78rem}.file-list{flex:1;padding:0;margin:0 0 14px;overflow-y:auto;list-style:none;display:flex;flex-direction:column;gap:2px}.file-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-radius:10px;font:.88rem var(--font-mono);cursor:pointer;border:1px solid transparent;transition:background-color 150ms ease,border-color 150ms ease,color 150ms ease}.file-row--active{background:rgba(94,224,207,.10);color:var(--accent-mint);border-color:rgba(94,224,207,.16)}.file-row__name{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}.file-row__actions{display:flex;gap:8px;flex-shrink:0}.icon-btn{display:inline-flex;align-items:center;justify-content:center;padding:6px 8px;border:0;border-radius:8px;background:transparent;color:var(--text-muted);cursor:pointer;min-width:32px;min-height:32px;transition:background-color 150ms ease,color 150ms ease}.icon-btn svg{width:15px;height:15px}.icon-btn--danger:hover{color:var(--accent-red);background:rgba(251,116,128,.10)}.editing-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;color:var(--text-muted);font:.84rem var(--font-mono);width:100%;max-width:100%}#current-file-label::before{content:'📄 '}.challenge-actions{display:flex;gap:10px;margin-top:18px;width:100%}.challenge-actions .btn{flex:1}.daily-streak-badge{padding:6px 14px;border-radius:999px;background:rgba(241,198,106,.12);color:var(--accent-amber);font-size:.84rem;font-weight:800;border:1px solid rgba(241,198,106,.18)}.solve-celebrate{position:relative;border-left-width:4px;overflow:hidden}.solve-celebrate__message{display:block;margin:0 0 10px;font-size:1.06rem;font-weight:800;letter-spacing:.01em;animation:solveMessagePop 280ms cubic-bezier(.2,.8,.2,1)both}.solve-celebrate__rewards{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}.solve-xp-chip{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:74px;padding:5px 12px;border-radius:999px;border:1px solid rgba(109,221,138,.28);background:rgba(109,221,138,.12);color:var(--accent-green);font-size:.88rem;font-weight:800;opacity:0;transform:translateY(8px)scale(.92)}.solve-xp-chip--streak{border-color:rgba(241,198,106,.28);background:rgba(241,198,106,.12);color:var(--accent-amber)}.solve-xp-chip--level{border-color:rgba(241,198,106,.32);background:rgba(241,198,106,.14);color:var(--accent-amber)}.solve-celebrate--active .solve-xp-chip{animation:solveChipPop 500ms cubic-bezier(.2,.8,.2,1)80ms both}.solve-celebrate__nudge{display:block;margin-top:12px;padding:10px 12px;border-radius:10px;border:1px solid rgba(241,198,106,.22);background:rgba(241,198,106,.08);color:var(--accent-amber);font-size:.84rem;font-weight:700;line-height:1.45}.solve-celebrate__note{display:block;margin-top:12px;padding-top:12px;border-top:1px solid var(--border);color:var(--text);font-size:.84rem;line-height:1.5}.solve-celebrate__note a{color:var(--accent-mint);font-weight:700;text-decoration:underline}@keyframes solveMessagePop{0% { opacity: 0; transform: translateY(6px) scale(.97); } 100% { opacity: 1; transform: translateY(0) scale(1); }}@keyframes solveChipPop{0% { opacity: 0; transform: translateY(8px) scale(.9); } 50% { opacity: 1; } 70% { transform: translateY(-1px) scale(1.04); } 100% { opacity: 1; transform: translateY(0) scale(1); }}.playground-panel__header{position:relative;min-height:44px}.status-with-spinner{height:20px;overflow:hidden}.pdg-preload,.pdg-preload *,.pdg-preload *::before,.pdg-preload *::after{transition:none !important}@media (max-width: 1100px){.problem-layout{grid-template-columns:1fr;gap:20px}}@media (max-width: 640px){.problem-meta-row{gap:10px;flex-wrap:wrap}.run-modal__header{padding:16px}.run-modal__body{padding:18px 16px}#code-editor .CodeMirror{min-height:300px}.playground-copy-btn .copy-label{display:none}.playground-copy-btn{padding:7px 10px}.challenge-actions{flex-direction:column}.challenge-actions .btn{width:100%}.editing-bar{flex-wrap:wrap}}@media (prefers-reduced-motion: reduce){.result--success,.solve-celebrate__message,.solve-xp-chip{animation:none;opacity:1;transform:none}.spinner{animation:none}}