@import "https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css";
:root{--bg-deep:#080c12;--bg-base:#0b1018;--bg-surface:#131b27;--bg-elevated:#1a2435;--bg-overlay:#243044;--border-subtle:#1e2a3a;--border-default:#2a3a4e;--border-glow:#2dd4bf4d;--text-primary:#e2e8f0;--text-secondary:#94a3b8;--text-muted:#64748b;--text-inverse:#0b1018;--accent-teal:#2dd4bf;--accent-glow:#14b8a6;--accent-subtle:#2dd4bf14;--accent-purple:#a78bfa;--fw-html:#e34f26;--fw-react:#61dafb;--fw-vue:#42b883;--fw-ts:#3178c6;--status-success:#34d399;--status-warning:#fbbf24;--status-error:#f87171;--tier-bronze:#cd7f32;--tier-silver:silver;--tier-gold:gold;--tier-platinum:#4ecdc4;--tier-diamond:#b9f2ff;--diff-1:#34d399;--diff-2:#2dd4bf;--diff-3:#fbbf24;--diff-4:#f87171;--diff-5:#a78bfa;--editor-bg:#0d1117;--editor-surface:#161b22;--editor-border:#21262d;--editor-text:#e6edf3;--editor-tab:#1c2128;--editor-tab-active:#0d1117;--font-sans:"Pretendard Variable","Pretendard","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--font-mono:"JetBrains Mono","Fira Code","Consolas",monospace;--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:2rem;--text-4xl:2.5rem;--weight-normal:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:20px;--shadow-sm:0 1px 3px #0000004d;--shadow-md:0 4px 12px #0006;--shadow-lg:0 8px 30px #00000080;--shadow-glow:0 0 20px #2dd4bf26;--ease-out:cubic-bezier(.25,.46,.45,.94);--ease-spring:cubic-bezier(.34,1.56,.64,1);--duration-fast:.15s;--duration-normal:.25s;--duration-slow:.4s}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;background:var(--bg-deep);color:var(--text-primary)}body{font-family:var(--font-sans);font-size:var(--text-base);letter-spacing:-.011em;background:var(--bg-deep);color:var(--text-primary);min-height:100vh;line-height:1.6}a{color:inherit;text-decoration:none}button{cursor:pointer;background:0 0;border:none;font-family:inherit}.container{max-width:1200px;padding:0 var(--space-6);margin:0 auto}.container--narrow{max-width:720px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.animate-fadeInUp{animation:fadeInUp var(--duration-slow)var(--ease-out)forwards}.animate-fadeIn{animation:fadeIn var(--duration-normal)var(--ease-out)forwards}.animate-scaleIn{animation:scaleIn var(--duration-normal)var(--ease-spring)forwards}.delay-1{animation-delay:50ms}.delay-2{animation-delay:.1s}.delay-3{animation-delay:.15s}.delay-4{animation-delay:.2s}.delay-5{animation-delay:.25s}.header{z-index:1000;-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border-subtle);background:#080c12cc;position:sticky;top:0}.header__inner{justify-content:space-between;align-items:center;height:56px;display:flex}.header__logo{align-items:center;gap:var(--space-2);font-size:var(--text-base);font-weight:var(--weight-semibold);letter-spacing:-.02em;color:var(--text-primary);display:flex}.header__logo-icon{background:var(--accent-teal);border-radius:var(--radius-sm);color:#fff;width:24px;height:24px;font-size:var(--text-xs);font-weight:var(--weight-bold);justify-content:center;align-items:center;display:flex}.header__nav{align-items:center;gap:var(--space-1);display:flex}.header__link{padding:var(--space-2)var(--space-3);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-secondary);border-radius:var(--radius-sm);transition:all var(--duration-fast)var(--ease-out)}.header__link:hover{color:var(--text-primary);background:var(--bg-elevated)}.header__link--active{color:var(--text-primary)}.dashboard{min-height:100vh}.dash-welcome{padding:var(--space-10)0 var(--space-8);background:linear-gradient(135deg,#0b1220 0%,var(--bg-deep)40%,#120b1e 100%);border-bottom:1px solid var(--border-subtle)}.dash-welcome__inner{gap:var(--space-6);animation:fadeInUp var(--duration-slow)var(--ease-out)both;flex-direction:column;display:flex}.dash-welcome__top{justify-content:space-between;align-items:center;display:flex}.dash-welcome__profile{align-items:center;gap:var(--space-4);display:flex}.dash-avatar{background:linear-gradient(135deg,var(--accent-teal),var(--accent-purple));width:52px;height:52px;color:var(--text-inverse);font-size:var(--text-xl);font-weight:var(--weight-bold);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:flex;box-shadow:0 4px 12px #2dd4bf40}.dash-welcome__greeting{flex-direction:column;gap:2px;display:flex}.dash-welcome__title{font-size:var(--text-2xl);font-weight:var(--weight-bold);letter-spacing:-.03em;color:var(--text-primary);line-height:1.3}.dash-welcome__subtitle{font-size:var(--text-sm);color:var(--text-secondary);line-height:1.5}.dash-stats{gap:var(--space-3);grid-template-columns:repeat(4,1fr);display:grid}.dash-stat-card{align-items:center;gap:var(--space-3);padding:var(--space-4);background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);transition:all var(--duration-normal)var(--ease-out);display:flex}.dash-stat-card:hover{box-shadow:var(--shadow-sm);border-color:var(--border-default)}.dash-stat-card__icon{border-radius:var(--radius-md);flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;display:flex}.dash-stat-card__icon--total{color:var(--accent-teal);background:#2dd4bf1f}.dash-stat-card__icon--clear{color:var(--status-success);background:#34d3991f}.dash-stat-card__icon--streak{color:#ea580c;background:#ea580c1f}.dash-stat-card__icon--avg{color:#ca8a04;background:#ca8a041f}.dash-stat-card__content{flex-direction:column;gap:0;display:flex}.dash-stat-card__value{font-size:var(--text-xl);font-weight:var(--weight-bold);color:var(--text-primary);font-family:var(--font-mono);line-height:1.2}.dash-stat-card__unit{font-size:var(--text-sm);font-weight:var(--weight-medium)}.dash-stat-card__label{font-size:var(--text-xs);color:var(--text-muted);font-weight:var(--weight-medium)}.dash-progress{gap:var(--space-2);flex-direction:column;display:flex}.dash-progress__header{justify-content:space-between;align-items:center;display:flex}.dash-progress__label{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--text-secondary)}.dash-progress__value{font-size:var(--text-xs);color:var(--text-muted);font-family:var(--font-mono)}.dash-progress__bar{background:var(--border-subtle);border-radius:4px;height:8px;overflow:hidden}.dash-progress__fill{background:linear-gradient(90deg,var(--accent-teal),var(--accent-purple));height:100%;transition:width .8s var(--ease-out);border-radius:4px;min-width:0}.dash-welcome__actions{align-items:center;gap:var(--space-3);display:flex}.dash-continue{padding:var(--space-8)0}.dash-section-header{align-items:center;gap:var(--space-2);margin-bottom:var(--space-4);display:flex}.dash-section-title{font-size:var(--text-lg);font-weight:var(--weight-bold);color:var(--text-primary);letter-spacing:-.02em}.dash-section-badge{font-size:11px;font-weight:var(--weight-bold);color:var(--accent-teal);background:var(--accent-subtle);border-radius:100px;padding:2px 8px}.dash-continue__grid{gap:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(280px,1fr));display:grid}.dash-continue__card{gap:var(--space-3);padding:var(--space-3);background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);transition:all var(--duration-normal)var(--ease-out);color:inherit;text-decoration:none;display:flex}.dash-continue__card:hover{border-color:var(--border-subtle);box-shadow:var(--shadow-md);transform:translateY(-2px)}.dash-continue__thumb{border-radius:var(--radius-md);flex-shrink:0;width:100px;height:80px;overflow:hidden}.dash-continue__thumb .card-thumb{border-radius:var(--radius-md);border-bottom:none;height:100%}.dash-continue__info{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}.dash-continue__meta{align-items:center;gap:var(--space-2);display:flex}.dash-continue__diff{font-size:10px;font-weight:var(--weight-semibold);border-radius:100px;padding:1px 6px}.dash-continue__num{font-family:var(--font-mono);color:var(--text-muted);font-size:11px}.dash-continue__title{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;line-height:1.3;overflow:hidden}.dash-continue__cta{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--accent-teal);margin-top:auto}.dash-challenges{padding:var(--space-6)0 var(--space-16);border-top:1px solid var(--border-subtle)}.dash-controls{gap:var(--space-4);margin-bottom:var(--space-6);flex-direction:column;display:flex}.dash-controls__search{position:relative}.dash-controls__search-icon{color:var(--text-muted);position:absolute;top:50%;left:14px;transform:translateY(-50%)}.dash-controls__search-input{width:100%;font-size:var(--text-sm);font-family:var(--font-sans);border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--bg-surface);color:var(--text-primary);transition:border-color var(--duration-fast)var(--ease-out);outline:none;padding:10px 16px 10px 40px}.dash-controls__search-input:focus{border-color:var(--accent-teal);box-shadow:0 0 0 3px #2dd4bf1f}.dash-controls__search-input::placeholder{color:var(--text-muted)}.dash-controls__filters{align-items:flex-start;gap:var(--space-3);flex-wrap:wrap;display:flex}.dash-filter-group{align-items:center;gap:var(--space-2);display:flex}.dash-filter-group--sort{margin-left:auto}.dash-filter-label{font-size:11px;font-weight:var(--weight-semibold);color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}.steps-row{justify-content:center;align-items:center;gap:var(--space-4);display:flex}.step{align-items:center;gap:var(--space-3);padding:var(--space-4)var(--space-5);background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);transition:all var(--duration-normal)var(--ease-out);display:flex}.step:hover{border-color:var(--border-default);box-shadow:var(--shadow-sm)}.step__number{border-radius:var(--radius-sm);background:var(--bg-deep);border:1px solid var(--border-subtle);width:32px;height:32px;font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-secondary);flex-shrink:0;justify-content:center;align-items:center;display:flex}.step__content{text-align:left}.step__title{font-size:var(--text-sm);font-weight:var(--weight-semibold);letter-spacing:-.01em;margin-bottom:2px}.step__desc{font-size:var(--text-xs);color:var(--text-muted)}.step__arrow{color:var(--text-muted);font-size:var(--text-lg)}.challenges-section{padding-bottom:var(--space-20)}.challenges-section__header{align-items:baseline;gap:var(--space-3);margin-bottom:var(--space-6);display:flex}.challenges-section__title{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em}.challenges-section__count{font-size:var(--text-xs);color:var(--text-muted)}.btn{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-3)var(--space-5);font-size:var(--text-sm);font-weight:var(--weight-medium);border-radius:var(--radius-md);transition:all var(--duration-fast)var(--ease-out);white-space:nowrap;display:inline-flex}.btn:active{transform:scale(.97)}.btn--primary{background:var(--accent-teal);color:var(--text-inverse)}.btn--primary:hover{background:var(--accent-glow);box-shadow:var(--shadow-glow)}.btn--secondary{background:var(--bg-surface);color:var(--text-primary);border:1px solid var(--border-subtle)}.btn--secondary:hover{background:var(--bg-elevated);border-color:var(--border-default)}.btn--accent{background:linear-gradient(135deg,var(--accent-teal),var(--accent-glow));color:var(--text-inverse);font-weight:var(--weight-semibold)}.btn--accent:hover{background:linear-gradient(135deg,var(--accent-glow),var(--accent-teal));box-shadow:0 0 20px #2dd4bf40,var(--shadow-md)}.btn--large{padding:var(--space-4)var(--space-8);font-size:var(--text-base);border-radius:var(--radius-lg)}.btn--icon{padding:var(--space-2);border-radius:var(--radius-sm)}.search-bar{margin-bottom:var(--space-5);position:relative}.search-bar__icon{font-size:16px;position:absolute;top:50%;left:18px;transform:translateY(-50%)}.search-bar__input{width:100%;font-size:var(--text-sm);font-family:var(--font-sans);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);background:var(--bg-surface);transition:border-color var(--duration-fast)var(--ease-out);outline:none;padding:14px 16px 14px 48px}.search-bar__input:focus{border-color:var(--accent-teal)}.search-bar__input::placeholder{color:var(--text-muted)}.filters{gap:var(--space-3);margin-bottom:var(--space-6);flex-direction:column;display:flex}.filter-group{align-items:center;gap:var(--space-3);display:flex}.filter-label{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--text-muted);min-width:52px}.filter-pills{gap:var(--space-2);flex-wrap:wrap;display:flex}.filter-pill{font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--text-secondary);background:var(--bg-surface);border:1px solid var(--border-subtle);cursor:pointer;transition:all var(--duration-fast)var(--ease-out);font-family:var(--font-sans);border-radius:100px;align-items:center;gap:4px;padding:5px 14px;display:inline-flex}.filter-pill:hover{border-color:var(--border-default)}.filter-pill.active{background:var(--text-primary);color:#fff;border-color:#0000}.filter-pill__count{opacity:.6;font-size:10px}.challenge-list-section{padding-bottom:var(--space-20)}.list-header{margin-bottom:var(--space-4);padding-bottom:var(--space-3);border-bottom:1px solid var(--border-subtle);justify-content:space-between;align-items:center;display:flex}.list-header__count{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-primary)}.challenge-grid{gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(260px,1fr));display:grid}.challenge-card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);transition:all var(--duration-normal)var(--ease-out);color:inherit;cursor:pointer;text-decoration:none;overflow:hidden}.challenge-card:hover{border-color:var(--border-subtle);box-shadow:var(--shadow-md);transform:translateY(-2px)}.challenge-card--completed{border-color:#22c55e33}.challenge-card--completed:hover{border-color:#22c55e66}.card-thumb{background:linear-gradient(45deg,var(--bg-elevated)25%,transparent 25%),linear-gradient(-45deg,var(--bg-elevated)25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--bg-elevated)75%),linear-gradient(-45deg,transparent 75%,var(--bg-elevated)75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;background-color:var(--bg-surface);border-bottom:1px solid var(--border-subtle);justify-content:center;align-items:center;width:100%;height:180px;display:flex;position:relative;overflow:hidden}.card-thumb:before{content:"";pointer-events:none;z-index:1;position:absolute;inset:0;box-shadow:inset 0 -1px 3px #0000000a,inset 0 1px 3px #00000005}.card-thumb__iframe{pointer-events:none;transform-origin:0 0;background:#fff;border:none;width:200%;height:200%;position:absolute;top:0;left:0;transform:scale(.5)}.card-thumb__placeholder{background:linear-gradient(135deg,var(--bg-surface)25%,var(--bg-elevated)50%,var(--bg-surface)75%);background-size:200% 200%;width:100%;height:100%;animation:1.5s ease-in-out infinite shimmer}.challenge-card__body{padding:var(--space-3)var(--space-4)var(--space-4)}.challenge-card__top{align-items:center;gap:var(--space-2);margin-bottom:var(--space-2);display:flex}.challenge-card__diff{font-size:11px;font-weight:var(--weight-semibold);white-space:nowrap;border-radius:100px;padding:2px 8px}.challenge-card__completed{font-size:11px;font-weight:var(--weight-semibold);color:var(--status-success);background:#34d3991f;border-radius:100px;margin-left:auto;padding:2px 8px}.challenge-card__score{font-size:11px;font-weight:var(--weight-semibold);color:var(--text-muted);font-family:var(--font-mono);margin-left:auto}.challenge-card__score--done{color:var(--status-success)}.challenge-card__title{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-primary);margin-bottom:var(--space-2);line-height:1.4}.challenge-card__num{font-family:var(--font-mono);color:var(--text-muted);font-weight:var(--weight-medium);margin-right:6px;font-size:12px}.challenge-card__tags{gap:var(--space-1);flex-wrap:wrap;display:flex}.challenge-card__tag{color:var(--text-muted);background:var(--bg-deep);border-radius:4px;padding:2px 6px;font-size:11px}.challenge-grid__empty{padding:var(--space-12);text-align:center;color:var(--text-muted);font-size:var(--text-sm);align-items:center;gap:var(--space-4);flex-direction:column;grid-column:1/-1;display:flex}.card-status{z-index:5;letter-spacing:.05em;font-size:10px;font-weight:800;font-family:var(--font-sans);border-radius:4px 0 0 4px;padding:4px 12px 4px 10px;position:absolute;top:12px;right:-6px}.card-status:after{content:"";border:3px solid #0000;position:absolute;top:100%;right:0}.card-status--clear{color:#fff;background:#059669}.card-status--clear:after{border-top-color:#047857;border-right-color:#047857}.card-status--perfect{color:#fff;background:linear-gradient(135deg,#f59e0b,#f97316);animation:2s ease-in-out infinite perfectPulse}.card-status--perfect:after{border-top-color:#d97706;border-right-color:#d97706}@keyframes perfectPulse{0%,to{box-shadow:0 2px 8px #f59e0b4d}50%{box-shadow:0 2px 16px #f59e0b99}}.challenge-card--completed .card-thumb{position:relative}.challenge-card--completed .card-thumb:after{content:"";pointer-events:none;background:#0596690d;position:absolute;inset:0}.challenge-card--perfect{border-color:#f59e0b40}.challenge-card--perfect:hover{border-color:#f59e0b80;box-shadow:0 4px 20px #f59e0b26}.challenge-card{position:relative}.score-bar{margin-top:var(--space-2);align-items:center;gap:8px;display:flex}.score-bar__track{background:var(--border-subtle);border-radius:2px;flex:1;height:4px;overflow:hidden}.score-bar__fill{height:100%;transition:width .6s var(--ease-out);border-radius:2px}.score-bar__label{font-size:11px;font-weight:var(--weight-bold);font-family:var(--font-mono);text-align:right;min-width:32px}.challenge-card__cta{margin-top:var(--space-3);padding-top:var(--space-2);border-top:1px solid var(--border-subtle)}.challenge-card__cta-text{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--accent-teal)}.challenge-card__cta-text--done{color:var(--status-success)}.challenge-card__cta-text--retry{color:#f59e0b}.challenge-card{animation:cardEnter .4s var(--ease-out)both}@keyframes cardEnter{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.progress-overview{align-items:center;gap:var(--space-3);margin-top:var(--space-3);display:flex}.progress-overview__bar{background:var(--border-subtle);border-radius:4px;flex:1;height:8px;overflow:hidden}.progress-overview__fill{height:100%;transition:width .8s var(--ease-out);background:linear-gradient(90deg,#22c55e,#06b6d4);border-radius:4px}.progress-overview__text{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--text-secondary);white-space:nowrap}.challenge-controls{margin-bottom:var(--space-6)}.filters-inline{align-items:center;gap:var(--space-3);margin-top:var(--space-3);flex-wrap:wrap;display:flex}.celebration-canvas{pointer-events:none;z-index:10001;width:100%;height:100%;position:fixed;top:0;left:0}.score-modal--animated{animation:.5s cubic-bezier(.34,1.56,.64,1) both scoreModalBounce}@keyframes scoreModalBounce{0%{opacity:0;transform:scale(.6)translateY(30px)}to{opacity:1;transform:scale(1)translateY(0)}}.sort-select{font-size:var(--text-xs);font-family:var(--font-sans);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:var(--bg-surface);color:var(--text-secondary);cursor:pointer;outline:none;padding:5px 12px}.sort-select:focus{border-color:var(--accent-teal)}.challenge-nav{align-items:center;gap:2px;display:flex}.challenge-nav__btn{border-radius:var(--radius-sm);border:1px solid var(--border-subtle);background:var(--bg-surface);width:28px;height:28px;color:var(--text-secondary);cursor:pointer;transition:all var(--duration-fast)var(--ease-out);font-size:16px;font-family:var(--font-sans);justify-content:center;align-items:center;display:flex}.challenge-nav__btn:hover:not(:disabled){background:var(--bg-elevated);color:var(--text-primary)}.challenge-nav__btn:disabled{opacity:.3;cursor:not-allowed}.challenge-nav__current{font-size:var(--text-xs);color:var(--text-muted);font-family:var(--font-mono);padding:0 6px}.challenge-toolbar__best{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--status-warning);background:#fbbf241f;border-radius:100px;padding:3px 10px}.btn--learn{font-size:13px;font-weight:var(--weight-semibold);color:var(--accent-teal);border-radius:var(--radius-sm);transition:all var(--duration-fast)var(--ease-out);font-family:var(--font-sans);background:#2dd4bf0f;border:1px solid #2dd4bf26;padding:5px 14px;text-decoration:none}.btn--learn:hover{background:#2dd4bf1f;border-color:#2dd4bf4d}.badge{font-size:var(--text-xs);font-weight:var(--weight-semibold);border-radius:100px;align-items:center;gap:4px;padding:3px 10px;display:inline-flex}.challenge-page{flex-direction:column;height:100vh;display:flex}.challenge-toolbar{padding:var(--space-2)var(--space-4);border-bottom:1px solid var(--border-subtle);background:var(--bg-base);justify-content:space-between;align-items:center;min-height:48px;display:flex}.challenge-toolbar__left{align-items:center;gap:var(--space-3);display:flex}.challenge-toolbar__back{align-items:center;gap:var(--space-1);font-size:var(--text-sm);color:var(--text-secondary);padding:var(--space-1)var(--space-2);border-radius:var(--radius-sm);transition:all var(--duration-fast)var(--ease-out);display:flex}.challenge-toolbar__back:hover{color:var(--text-primary);background:var(--bg-elevated)}.challenge-toolbar__divider{background:var(--border-subtle);width:1px;height:20px}.challenge-toolbar__title{font-size:var(--text-sm);font-weight:var(--weight-semibold)}.challenge-toolbar__right{align-items:center;gap:var(--space-2);display:flex}.workspace{flex:1;display:flex;overflow:hidden}.workspace--horizontal{flex-direction:row}.workspace--vertical{flex-direction:column}.workspace__left{background:var(--bg-surface);flex-direction:column;display:flex;overflow:hidden}.workspace--horizontal .workspace__left{border-right:1px solid var(--border-subtle);width:40%;min-width:300px}.workspace--vertical .workspace__left{border-bottom:1px solid var(--border-subtle);height:45%}.workspace__right{background:var(--editor-bg);flex-direction:column;flex:1;display:flex;overflow:hidden}.workspace--swapped.workspace--horizontal{flex-direction:row-reverse}.workspace--swapped.workspace--horizontal .workspace__left{border-right:none;border-left:1px solid var(--border-subtle)}.workspace--swapped.workspace--vertical{flex-direction:column-reverse}.workspace--swapped.workspace--vertical .workspace__left{border-bottom:none;border-top:1px solid var(--border-subtle)}.workspace__resizer{background:var(--border-subtle);transition:background var(--duration-fast);flex-shrink:0}.workspace__resizer:hover{background:var(--accent-teal)}.workspace__resizer--v{cursor:col-resize;width:4px}.workspace__resizer--h{cursor:row-resize;height:4px}.preview-section{flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}.preview-section__header{background:var(--bg-surface);border-bottom:1px solid var(--border-subtle);justify-content:space-between;align-items:center;min-height:32px;padding:6px 12px;display:flex}.preview-section__label{font-size:11px;font-weight:var(--weight-semibold);color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;align-items:center;gap:6px;display:flex}.preview-section__content{background:var(--bg-deep);flex:1;position:relative;overflow:hidden}.preview-divider{background:var(--border-subtle);flex-shrink:0;height:1px}.preview-live-dot{font-size:9px;font-weight:var(--weight-bold);color:var(--status-success);letter-spacing:.05em;background:#34d3991a;border-radius:100px;padding:1px 5px;animation:2s ease-in-out infinite pulse}.btn-compare{border-radius:var(--radius-sm);border:1px solid var(--border-subtle);background:var(--bg-surface);color:var(--text-muted);cursor:pointer;font-size:11px;font-family:var(--font-sans);transition:all var(--duration-fast);padding:3px 8px}.btn-compare:hover{border-color:var(--accent-purple);color:var(--accent-purple)}.btn-compare--active{background:var(--accent-purple);color:var(--text-inverse);border-color:var(--accent-purple)}.overlay-ghost{z-index:3;pointer-events:none;position:absolute;inset:0}.panel-hints__attempts{font-size:var(--text-xs);color:var(--text-muted);margin-left:auto}.overlay-slider{z-index:5;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#000000b3;border-radius:20px;align-items:center;gap:8px;padding:6px 14px;display:flex;position:absolute;bottom:12px;left:50%;transform:translate(-50%)}.overlay-slider__input{width:120px;accent-color:var(--accent-purple)}.overlay-slider__label{color:#fff;font-size:11px;font-family:var(--font-mono);min-width:32px}.panel-info{background:var(--bg-surface);border-top:1px solid var(--border-subtle);padding:var(--space-3)var(--space-4);gap:var(--space-2);font-size:var(--text-xs);flex-direction:column;display:flex}.color-palette{align-items:center;gap:var(--space-2);display:flex}.color-palette__label{font-weight:var(--weight-semibold);color:var(--text-muted);white-space:nowrap}.color-palette__colors{flex-wrap:wrap;gap:4px;display:flex}.color-swatch{border:2px solid var(--border-default);cursor:pointer;width:24px;height:24px;transition:transform var(--duration-fast),border-color var(--duration-fast);border-radius:4px;position:relative}.color-swatch:hover{border-color:var(--text-secondary);transform:scale(1.15)}.color-swatch__tooltip{background:var(--bg-overlay);color:var(--text-primary);font-size:10px;font-family:var(--font-mono);white-space:nowrap;border-radius:4px;padding:3px 6px;display:none;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%)}.color-swatch:hover .color-swatch__tooltip{display:block}.panel-hints{align-items:center;gap:var(--space-2);display:flex}.panel-hints__label{font-weight:var(--weight-semibold);color:var(--text-muted);white-space:nowrap}.panel-hints__tags{flex-wrap:wrap;gap:4px;display:flex}.panel-stats{gap:var(--space-4);color:var(--text-muted);display:flex}.panel-learn-link{color:var(--accent-teal);font-size:var(--text-xs);font-weight:var(--weight-semibold);text-decoration:none}.panel-learn-link:hover{text-decoration:underline}.layout-toggle{border:1px solid var(--border-subtle);border-radius:var(--radius-sm);display:flex;overflow:hidden}.layout-toggle__btn{background:var(--bg-surface);width:32px;height:28px;color:var(--text-muted);cursor:pointer;transition:all var(--duration-fast);border:none;justify-content:center;align-items:center;display:flex}.layout-toggle__btn:hover{background:var(--bg-elevated);color:var(--text-secondary)}.layout-toggle__btn--active{background:var(--accent-teal);color:var(--text-inverse)}.layout-toggle__btn+.layout-toggle__btn{border-left:1px solid var(--border-subtle)}.preview-frame{background:#fff;border:none;width:100%;height:100%}.editor-tabs{background:var(--editor-surface);border-bottom:1px solid var(--editor-border);display:flex}.editor-tab{padding:var(--space-2)var(--space-4);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-muted);font-family:var(--font-mono);transition:all var(--duration-fast)var(--ease-out);border-bottom:2px solid #0000}.editor-tab:hover{color:var(--text-secondary)}.editor-tab--active{color:var(--editor-text);background:var(--editor-tab-active);border-bottom-color:var(--accent-teal)}.editor-container{flex:1;overflow:hidden}.sr-overlay{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);z-index:200;opacity:0;background:#04060ab3;justify-content:center;align-items:center;transition:opacity .4s;display:flex;position:fixed;inset:0}.sr-overlay--visible{opacity:1}.sr-particles{pointer-events:none;position:absolute;inset:0}.sr-modal{gap:var(--space-8);background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-xl);padding:var(--space-8);width:92%;max-width:640px;max-height:85vh;box-shadow:0 0 60px #2dd4bf14,var(--shadow-lg);opacity:0;transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .4s;display:flex;position:relative;overflow-y:auto;transform:translateY(24px)scale(.96)}.sr-modal--visible{opacity:1;transform:translateY(0)scale(1)}.sr-modal::-webkit-scrollbar{width:4px}.sr-modal::-webkit-scrollbar-track{background:0 0}.sr-modal::-webkit-scrollbar-thumb{background:var(--border-subtle);border-radius:2px}.sr-left{align-items:center;gap:var(--space-3);min-width:180px;padding-top:var(--space-2);flex-direction:column;flex-shrink:0;display:flex}.sr-ring-wrap{justify-content:center;align-items:center;display:flex;position:relative}.sr-score-value{font-size:36px;font-weight:var(--weight-bold);font-family:var(--font-sans);letter-spacing:-.02em;position:absolute}.sr-stars{gap:3px;display:flex}.sr-star{color:var(--text-muted);transition:color .3s}.sr-star--full,.sr-star--half{color:#fbbf24}.sr-star--empty{color:var(--border-subtle)}.sr-message{font-size:var(--text-sm);color:var(--text-secondary);font-weight:var(--weight-semibold);text-align:center;margin:0}.sr-stats{gap:var(--space-3);display:flex}.sr-stat{color:var(--text-muted);font-size:11px;font-weight:var(--weight-medium)}.sr-xp{flex-direction:column;align-items:center;gap:6px;width:100%;display:flex}.sr-xp-gained{color:var(--accent-teal);font-size:1rem;font-weight:700;font-family:var(--font-mono)}.sr-tier{width:100%}.sr-tier-labels{color:var(--text-muted);justify-content:space-between;margin-bottom:3px;font-size:.65rem;display:flex}.sr-tier-bar{background:var(--bg-deep);border-radius:2px;width:100%;height:4px;overflow:hidden}.sr-tier-fill{background:linear-gradient(90deg,var(--accent-teal),var(--accent-purple));border-radius:2px;height:100%;transition:width .8s cubic-bezier(.16,1,.3,1)}.sr-right{gap:var(--space-4);flex-direction:column;flex:1;justify-content:center;min-width:0;display:flex}.sr-badges{border-radius:var(--radius-md);background:#2dd4bf0f;border:1px solid #2dd4bf26;flex-direction:column;gap:6px;padding:10px 12px;display:flex}.sr-badges-title{color:var(--accent-teal);font-size:.72rem;font-weight:600}.sr-badges-list{gap:8px;display:flex}.sr-badge{flex-direction:column;align-items:center;gap:2px;display:flex}.sr-badge-emoji{font-size:22px}.sr-badge-name{color:var(--text-secondary);font-size:.6rem;font-weight:500}.sr-feedback{background:var(--bg-deep);border-radius:var(--radius-md);padding:var(--space-4)}.sr-feedback-title{font-size:var(--text-sm);font-weight:var(--weight-semibold);margin-bottom:var(--space-2);color:var(--text-primary)}.sr-feedback-text{color:var(--text-secondary);white-space:pre-line;margin:0;font-size:.82rem;line-height:1.65}.sr-actions{gap:var(--space-3);margin-top:auto;display:flex}.sr-btn{border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:var(--weight-semibold);cursor:pointer;border:none;flex:1;justify-content:center;align-items:center;gap:6px;padding:10px 16px;transition:all .2s;display:flex}.sr-btn--retry{background:var(--accent-teal);color:#000}.sr-btn--retry:hover{background:var(--accent-glow);box-shadow:0 0 20px #2dd4bf4d}.sr-btn--exit{background:var(--bg-elevated);color:var(--text-secondary);border:1px solid var(--border-subtle)}.sr-btn--exit:hover{background:var(--bg-deep);color:var(--text-primary)}.sr-loader-overlay{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:200;background:#04060ab3;justify-content:center;align-items:center;animation:.3s fadeIn;display:flex;position:fixed;inset:0}.sr-loader-card{align-items:center;gap:var(--space-4);flex-direction:column;display:flex}.sr-loader-ring{position:relative}.sr-loader-spin{transform-origin:40px 40px;animation:1.2s linear infinite loaderSpin}@keyframes loaderSpin{to{transform:rotate(360deg)}}.sr-loader-text{font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--text-primary);margin:0}.sr-loader-sub{font-size:var(--text-sm);color:var(--text-muted);margin:0}@media (max-width:580px){.sr-modal{align-items:center;gap:var(--space-5);padding:var(--space-6);flex-direction:column;max-height:90vh}.sr-left{min-width:unset}.sr-right{width:100%}}.loading-dots{padding:var(--space-8);justify-content:center;gap:6px;display:flex}.loading-dots span{background:var(--text-muted);border-radius:50%;width:8px;height:8px;animation:1.4s ease-in-out infinite pulse}.loading-dots span:nth-child(2){animation-delay:.2s}.loading-dots span:nth-child(3){animation-delay:.4s}.hints{gap:var(--space-2);padding:var(--space-3)var(--space-4);border-top:1px solid var(--editor-border);background:var(--editor-surface);flex-wrap:wrap;display:flex}.hints__label{font-size:var(--text-xs);color:var(--text-muted);font-weight:var(--weight-medium);margin-right:var(--space-1);line-height:24px}.hint-tag{font-size:var(--text-xs);font-family:var(--font-mono);color:var(--accent-teal);border-radius:var(--radius-sm);background:#2dd4bf1a;padding:2px 8px}.api-key-section{padding:var(--space-4);border-top:1px solid var(--border-subtle);background:var(--bg-surface)}.api-key-input{width:100%;padding:var(--space-2)var(--space-3);font-size:var(--text-sm);font-family:var(--font-mono);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:var(--bg-deep);color:var(--text-primary);transition:border-color var(--duration-fast)var(--ease-out);outline:none}.api-key-input:focus{border-color:var(--accent-teal)}.api-key-input::placeholder{color:var(--text-muted)}.main-layout{gap:var(--space-8);align-items:flex-start;display:flex}.main-layout__content{flex:1;min-width:0}.sidebar-profile{gap:var(--space-4);flex-direction:column;flex-shrink:0;width:280px;display:flex;position:sticky;top:72px}.profile-card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-6);text-align:center}.profile-card__avatar{background:var(--bg-deep);border:1px solid var(--border-subtle);width:64px;height:64px;margin:0 auto var(--space-3);border-radius:50%;justify-content:center;align-items:center;display:flex}.profile-card__avatar-emoji{font-size:28px}.profile-card__name{font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--text-primary);margin-bottom:2px}.profile-card__email{font-size:var(--text-xs);color:var(--text-muted);margin-bottom:var(--space-4)}.profile-card__login{width:100%;padding:var(--space-3);font-size:var(--text-sm)}.sidebar-stats{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);grid-template-columns:repeat(3,1fr);display:grid;overflow:hidden}.sidebar-stat{padding:var(--space-4)var(--space-2);text-align:center;flex-direction:column;gap:2px;display:flex}.sidebar-stat+.sidebar-stat{border-left:1px solid var(--border-subtle)}.sidebar-stat__value{font-size:var(--text-lg);font-weight:var(--weight-bold);color:var(--text-primary);letter-spacing:-.02em}.sidebar-stat__label{color:var(--text-muted);font-size:11px;font-weight:var(--weight-medium)}.sidebar-box{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-5)}.sidebar-box__title{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--text-secondary);margin-bottom:var(--space-4)}.sidebar-progress{align-items:center;gap:var(--space-3);display:flex}.sidebar-progress__track{background:var(--bg-deep);border-radius:9999px;flex:1;height:8px;overflow:hidden}.sidebar-progress__bar{background:linear-gradient(90deg,var(--accent-teal),var(--accent-purple));height:100%;transition:width .5s var(--ease-out);border-radius:9999px}.sidebar-progress__text{font-size:var(--text-xs);color:var(--text-muted);font-weight:var(--weight-medium);white-space:nowrap}.sidebar-categories{gap:var(--space-3);flex-direction:column;display:flex}.sidebar-category-row{align-items:center;gap:var(--space-2);grid-template-columns:70px 1fr 40px;display:grid}.sidebar-category-row__label{font-size:var(--text-xs);color:var(--text-secondary);font-weight:var(--weight-medium)}.sidebar-category-row__bar{background:var(--bg-deep);border-radius:9999px;height:6px;overflow:hidden}.sidebar-category-row__fill{background:var(--accent-teal);height:100%;transition:width .5s var(--ease-out);border-radius:9999px}.sidebar-category-row__count{color:var(--text-muted);text-align:right;font-size:11px;font-family:var(--font-mono)}.hints{align-items:center;gap:var(--space-2);padding:var(--space-2)var(--space-4);background:var(--bg-surface);border-top:1px solid var(--border-subtle);flex-wrap:wrap;display:flex}.hints__label{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--text-secondary);margin-right:var(--space-1)}.hint-tag{background:var(--bg-deep);color:var(--text-muted);border-radius:4px;padding:2px 8px;font-size:11px}.hints__learn-link{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--accent-teal);border-radius:var(--radius-sm);transition:background var(--duration-fast)var(--ease-out);margin-left:auto;padding:3px 10px;text-decoration:none}.hints__learn-link:hover{background:#2dd4bf0f}.learn-hero{padding:var(--space-16)0 var(--space-10);text-align:center}.learn-hero__title{font-size:var(--text-4xl);font-weight:var(--weight-bold);letter-spacing:-.035em;color:var(--text-primary);margin-bottom:var(--space-5);animation:fadeInUp var(--duration-slow)var(--ease-out)both;line-height:1.2}.learn-hero__subtitle{font-size:var(--text-lg);color:var(--text-secondary);animation:fadeInUp var(--duration-slow)var(--ease-out).1s both;line-height:1.7}.learn-grid-section{padding-bottom:var(--space-20)}.learn-grid{gap:var(--space-5);grid-template-columns:repeat(auto-fill,minmax(320px,1fr));display:grid}.learn-card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-6);color:inherit;transition:all var(--duration-normal)var(--ease-out);gap:var(--space-3);flex-direction:column;text-decoration:none;display:flex}.learn-card:hover{border-color:var(--border-default);box-shadow:var(--shadow-md);transform:translateY(-2px)}.learn-card__emoji{font-size:36px}.learn-card__title{font-size:var(--text-lg);font-weight:var(--weight-semibold);letter-spacing:-.01em}.learn-card__desc{font-size:var(--text-sm);color:var(--text-secondary);flex:1;line-height:1.6}.learn-card__meta{gap:var(--space-2);flex-wrap:wrap;display:flex}.learn-card__tag{font-size:var(--text-xs);font-weight:var(--weight-semibold);background:var(--bg-deep);color:var(--text-secondary);border-radius:100px;padding:3px 10px}.learn-card__time,.learn-card__count{font-size:var(--text-xs);color:var(--text-muted)}.lesson{padding-bottom:var(--space-16)}.lesson__breadcrumb{align-items:center;gap:var(--space-2);padding:var(--space-6)0;font-size:var(--text-sm);color:var(--text-muted);display:flex}.lesson__breadcrumb a{color:var(--text-secondary);text-decoration:none}.lesson__breadcrumb a:hover{color:var(--text-primary)}.lesson__header{padding-bottom:var(--space-8);border-bottom:1px solid var(--border-subtle);margin-bottom:var(--space-8)}.lesson__emoji{margin-bottom:var(--space-4);font-size:48px;display:block}.lesson__title{font-size:var(--text-3xl);font-weight:var(--weight-bold);letter-spacing:-.03em;margin-bottom:var(--space-3)}.lesson__desc{font-size:var(--text-base);color:var(--text-secondary);margin-bottom:var(--space-4);line-height:1.7}.lesson__meta{gap:var(--space-3);display:flex}.lesson__tag{font-size:var(--text-xs);font-weight:var(--weight-semibold);background:var(--bg-deep);border-radius:100px;padding:4px 12px}.lesson__time,.lesson__sections-count{font-size:var(--text-xs);color:var(--text-muted);align-items:center;display:flex}.lesson__toc{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-6);margin-bottom:var(--space-10)}.lesson__toc-title{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-secondary);margin-bottom:var(--space-3)}.lesson__toc-list{gap:var(--space-2);flex-direction:column;margin:0;padding-left:20px;display:flex}.lesson__toc-link{font-size:var(--text-sm);color:var(--accent-teal);text-decoration:none}.lesson__toc-link:hover{text-decoration:underline}.lesson__section{margin-bottom:var(--space-12);padding-bottom:var(--space-10);border-bottom:1px solid var(--border-subtle)}.lesson__section:last-of-type{border-bottom:none}.lesson__section-title{font-size:var(--text-xl);font-weight:var(--weight-bold);letter-spacing:-.02em;margin-bottom:var(--space-4);align-items:center;gap:var(--space-3);display:flex}.lesson__section-num{background:var(--text-primary);color:#fff;width:32px;height:32px;font-size:var(--text-sm);font-weight:var(--weight-bold);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.lesson__section-content{font-size:var(--text-base);color:var(--text-secondary);margin-bottom:var(--space-6);line-height:1.8}.lesson__code-block{border:1px solid var(--border-subtle);border-radius:var(--radius-lg);margin-bottom:var(--space-4);overflow:hidden}.lesson__code-tabs{background:var(--bg-surface);border-bottom:1px solid var(--border-subtle);padding:0 var(--space-2);gap:0;display:flex}.lesson__code-tab{padding:var(--space-2)var(--space-4);font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--text-muted);cursor:pointer}.lesson__code-tab--active{color:var(--text-primary);border-bottom:2px solid var(--accent-teal)}.lesson__preview{background:#fafafa;min-height:120px}.lesson__code-source{gap:var(--space-3);margin-bottom:var(--space-4);grid-template-columns:1fr 1fr;display:grid}.lesson__code-file{border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden}.lesson__code-file-header{padding:var(--space-2)var(--space-3);font-size:11px;font-weight:var(--weight-semibold);color:var(--text-muted);background:var(--bg-surface);border-bottom:1px solid var(--border-subtle);font-family:var(--font-mono)}.lesson__pre{padding:var(--space-4);font-size:13px;font-family:var(--font-mono);background:var(--editor-bg);color:var(--editor-text);margin:0;line-height:1.6;overflow-x:auto}.lesson__tip{align-items:flex-start;gap:var(--space-3);padding:var(--space-4)var(--space-5);border-radius:var(--radius-md);background:#fbbf2414;border:1px solid #fbbf2433;display:flex}.lesson__tip-icon{flex-shrink:0;font-size:18px}.lesson__tip-text{font-size:var(--text-sm);color:var(--status-warning);line-height:1.6}.lesson__related{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-8);margin-top:var(--space-10)}.lesson__related-title{font-size:var(--text-lg);font-weight:var(--weight-bold);margin-bottom:var(--space-2)}.lesson__related-desc{font-size:var(--text-sm);color:var(--text-secondary);margin-bottom:var(--space-6)}.lesson__related-grid{gap:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(180px,1fr));display:grid}.lesson__related-card{border:1px solid var(--border-subtle);border-radius:var(--radius-md);color:inherit;transition:all var(--duration-fast)var(--ease-out);text-decoration:none;overflow:hidden}.lesson__related-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.lesson__related-preview{border-bottom:1px solid var(--border-subtle);background:#fafafa;height:80px}.lesson__related-info{padding:var(--space-2)var(--space-3);align-items:center;gap:var(--space-2);display:flex}.lesson__related-num{color:var(--text-muted);font-size:11px;font-family:var(--font-mono)}.lesson__related-name{font-size:var(--text-xs);font-weight:var(--weight-semibold);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.lesson__nav{margin-top:var(--space-10);padding-top:var(--space-8);border-top:1px solid var(--border-subtle);justify-content:space-between;display:flex}.mini-thumb{border-radius:4px;flex-direction:column;justify-content:center;align-items:center;gap:3px;width:100%;height:100%;padding:6px;display:flex;overflow:hidden}.mini-thumb__bar{opacity:.6;border-radius:2px;width:60%;height:3px}.mini-thumb__box{opacity:.7;border:1px solid;border-radius:3px;justify-content:center;align-items:center;width:50%;height:50%;display:flex}.mini-thumb__dot{opacity:.5;border-radius:50%;width:6px;height:6px}.challenge-toolbar__timer{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--text-muted);background:var(--bg-deep);font-family:var(--font-mono);letter-spacing:.03em;border-radius:100px;padding:4px 10px}.btn--help{font-size:13px;font-weight:var(--weight-semibold);color:var(--status-warning);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--duration-fast)var(--ease-out);font-family:var(--font-sans);background:#fbbf240f;border:1px solid #fbbf2426;padding:5px 14px}.btn--help:hover{background:#fbbf241f;border-color:#fbbf244d}.help-notification{color:#fff;cursor:pointer;z-index:9000;animation:slideUpBounce .5s var(--ease-spring)both;background:linear-gradient(135deg,#1e293b,#334155);border-radius:14px;align-items:center;gap:12px;max-width:480px;padding:14px 24px;display:flex;position:fixed;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 8px 30px #0003}@keyframes slideUpBounce{0%{opacity:0;transform:translate(-50%)translateY(60px)}to{opacity:1;transform:translate(-50%)translateY(0)}}.help-notification__pulse{background:#f97316;border-radius:50%;flex-shrink:0;width:10px;height:10px;animation:2s ease-in-out infinite helpPulse}@keyframes helpPulse{0%,to{box-shadow:0 0 #f9731680}50%{box-shadow:0 0 0 8px #f9731600}}.help-notification__icon{flex-shrink:0;font-size:20px}.help-notification__text{font-size:var(--text-sm);font-weight:var(--weight-medium);flex:1}.help-notification__action{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:#f97316;white-space:nowrap}.help-notification__close{color:#fff9;cursor:pointer;width:24px;height:24px;transition:background var(--duration-fast)var(--ease-out);background:#ffffff1a;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:12px;display:flex}.help-notification__close:hover{background:#fff3}.help-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9500;animation:fadeIn var(--duration-fast)var(--ease-out)both;background:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.help-modal{background:var(--bg-surface);border-radius:var(--radius-xl);width:90%;max-width:520px;max-height:80vh;animation:scaleIn var(--duration-normal)var(--ease-spring)both;box-shadow:var(--shadow-lg);overflow-y:auto}.help-modal__header{padding:var(--space-5)var(--space-6);border-bottom:1px solid var(--border-subtle);justify-content:space-between;align-items:center;display:flex}.help-modal__title{font-size:var(--text-lg);font-weight:var(--weight-bold)}.help-modal__close{border-radius:var(--radius-sm);background:var(--bg-deep);width:32px;height:32px;color:var(--text-secondary);cursor:pointer;border:none;justify-content:center;align-items:center;font-size:14px;display:flex}.help-modal__body{padding:var(--space-5)var(--space-6);gap:var(--space-4);flex-direction:column;display:flex}.help-step{border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden}.help-step--locked{opacity:.7}.help-step__header{align-items:center;gap:var(--space-3);padding:var(--space-3)var(--space-4);background:var(--bg-deep);display:flex}.help-step__num{background:var(--text-primary);color:#fff;width:24px;height:24px;font-size:var(--text-xs);font-weight:var(--weight-bold);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:flex}.help-step__title{font-size:var(--text-sm);font-weight:var(--weight-semibold);flex:1}.help-step__badge{font-size:11px;font-weight:var(--weight-semibold);border-radius:100px;padding:2px 8px}.help-step__badge--free{color:var(--status-success);background:#34d3991f}.help-step__badge--used{color:#3b82f6;background:#3b82f61f}.help-step__badge--penalty{color:#ef4444;background:#ef44441f}.help-step__unlock{font-size:12px;font-weight:var(--weight-semibold);border-radius:var(--radius-sm);border:1px solid var(--border-subtle);background:var(--bg-surface);color:var(--text-primary);cursor:pointer;transition:all var(--duration-fast)var(--ease-out);padding:4px 12px}.help-step__unlock:hover{background:var(--bg-elevated)}.help-step__unlock--danger{color:#ef4444;border-color:#ef44444d}.help-step__unlock--danger:hover{background:#ef44441f}.help-step__content{padding:var(--space-3)var(--space-4)}.help-step__tags{gap:var(--space-2);flex-wrap:wrap;display:flex}.help-step__tag{font-size:var(--text-xs);background:var(--bg-deep);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-secondary);font-family:var(--font-mono);padding:4px 10px}.help-step__code{font-size:12px;font-family:var(--font-mono);background:var(--editor-bg);color:var(--editor-text);padding:var(--space-3);border-radius:var(--radius-sm);white-space:pre;line-height:1.5;overflow-x:auto}.help-step__code-group{margin-bottom:var(--space-3)}.help-step__code-label{font-size:11px;font-weight:var(--weight-semibold);color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}.help-step__apply{width:100%;margin-top:var(--space-2)}.toast-container{z-index:10000;flex-direction:column;gap:8px;max-width:360px;display:flex;position:fixed;top:60px;right:16px}.toast{border-radius:var(--radius-md);background:var(--bg-surface);border:1px solid var(--border-subtle);box-shadow:var(--shadow-md);animation:toastIn .3s var(--ease-spring)both;font-size:var(--text-sm);font-weight:var(--weight-medium);align-items:center;gap:10px;padding:12px 18px;display:flex}.toast--leaving{animation:toastOut .3s var(--ease-out)both}@keyframes toastIn{0%{opacity:0;transform:translate(40px)}to{opacity:1;transform:translate(0)}}@keyframes toastOut{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(40px)}}.toast__icon{font-size:16px;font-weight:var(--weight-bold);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:22px;height:22px;display:flex}.toast--success .toast__icon{color:var(--status-success);background:#34d3991f}.toast--error .toast__icon{color:#ef4444;background:#ef44441f}.toast--info .toast__icon{color:#3b82f6;background:#3b82f61f}.toast--warning .toast__icon{color:#d97706;background:#d977061f}.toast__message{color:var(--text-primary);line-height:1.4}.hints__attempts{color:var(--text-muted);background:var(--bg-deep);border-radius:var(--radius-sm);margin-left:auto;padding:2px 8px;font-size:11px}.sidebar-links{flex-direction:column;gap:2px;display:flex}.sidebar-link{align-items:center;gap:var(--space-2);border-radius:var(--radius-sm);font-size:var(--text-sm);color:var(--text-secondary);transition:all var(--duration-fast)var(--ease-out);padding:8px 12px;text-decoration:none;display:flex}.sidebar-link:hover{background:var(--bg-elevated);color:var(--text-primary)}.footer{padding:var(--space-8)0;border-top:1px solid var(--border-subtle);text-align:center}.footer__text{font-size:var(--text-sm);color:var(--text-muted)}.btn--overlay{font-size:13px;font-weight:var(--weight-semibold);color:var(--text-secondary);background:var(--bg-deep);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--duration-fast)var(--ease-out);font-family:var(--font-sans);padding:5px 14px}.btn--overlay:hover{border-color:var(--text-muted)}.btn--overlay--active{color:#8b5cf6;background:#8b5cf614;border-color:#8b5cf64d}.btn--overlay--active:hover{background:#8b5cf626}.workspace-v2__panel--overlay{flex:1}.panel-body--overlay{position:relative;overflow:hidden}.overlay-layer{position:absolute;inset:0}.overlay-layer--target{z-index:1}.overlay-layer--result{z-index:2;transition:opacity .15s}.overlay-layer iframe,.overlay-layer .preview-frame{border:none;width:100%;height:100%}.overlay-labels{z-index:3;pointer-events:none;gap:8px;display:flex;position:absolute;bottom:8px;left:50%;transform:translate(-50%)}.overlay-labels__item{font-size:11px;font-weight:var(--weight-semibold);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:100px;padding:3px 10px}.overlay-labels__item--target{color:var(--text-primary);background:#131b27d9}.overlay-labels__item--result{color:#fff;background:#8b5cf6d9}.overlay-controls{align-items:center;gap:8px;margin-left:auto;display:flex}.overlay-controls__label{color:var(--text-muted);font-size:11px}.overlay-controls__slider{appearance:none;background:var(--border-subtle);cursor:pointer;border-radius:2px;outline:none;width:100px;height:4px}.overlay-controls__slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#8b5cf6;border-radius:50%;width:14px;height:14px;box-shadow:0 1px 4px #8b5cf64d}.overlay-controls__value{font-size:11px;font-family:var(--font-mono);color:var(--text-muted);text-align:right;min-width:32px}.editor-tab__dot{background:#f59e0b;border-radius:50%;flex-shrink:0;width:6px;height:6px;margin-right:4px;display:inline-block}.editor-tabs__actions{align-items:center;gap:var(--space-2);margin-left:auto;padding-right:8px;display:flex}.editor-action-btn{font-size:11px;font-weight:var(--weight-semibold);color:var(--text-muted);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--duration-fast)var(--ease-out);font-family:var(--font-sans);background:0 0;padding:3px 10px}.editor-action-btn:hover{color:var(--text-primary);border-color:var(--text-muted)}.editor-shortcut-hint{color:var(--text-muted);opacity:.6;font-size:10px;font-family:var(--font-mono);white-space:nowrap}.header__theme-toggle{border-radius:var(--radius-sm);border:1px solid var(--border-subtle);background:var(--bg-surface);cursor:pointer;width:34px;height:34px;transition:all var(--duration-fast)var(--ease-out);justify-content:center;align-items:center;font-size:16px;display:flex}.header__theme-toggle:hover{background:var(--bg-elevated);border-color:var(--text-muted)}@media (max-width:1024px){.sidebar-profile{display:none}.challenge-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}.dash-stats{grid-template-columns:repeat(2,1fr)}.dash-continue__grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}}@media (max-width:768px){.dash-welcome__title{font-size:var(--text-xl)}.dash-stats{gap:var(--space-2);grid-template-columns:repeat(2,1fr)}.dash-stat-card{padding:var(--space-3)}.dash-stat-card__icon{width:34px;height:34px}.challenge-grid{grid-template-columns:1fr}.dash-controls__filters{flex-direction:column;align-items:stretch}.dash-filter-group--sort{margin-left:0}.dash-continue__grid{grid-template-columns:1fr}.dash-welcome__actions{flex-direction:column}.dash-welcome__actions .btn{width:100%}.steps-row{flex-direction:column}.step__arrow{transform:rotate(90deg)}}@media (max-width:480px){.dash-welcome{padding:var(--space-6)0}.dash-avatar{width:42px;height:42px;font-size:var(--text-base)}.dash-welcome__title{font-size:var(--text-lg)}.dash-stat-card__value{font-size:var(--text-base)}}.ob-overlay{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);z-index:9999;background:#04060ad9;justify-content:center;align-items:center;transition:opacity .4s;display:flex;position:fixed;inset:0}.ob-card{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-xl);text-align:center;width:90%;max-width:420px;box-shadow:0 0 60px #2dd4bf14,var(--shadow-lg);padding:2.5rem 2rem 2rem;position:relative}.ob-card--in{animation:.35s cubic-bezier(.16,1,.3,1) both obSlideIn}.ob-card--out{animation:.2s both obSlideOut}@keyframes obSlideIn{0%{opacity:0;transform:translate(30px)scale(.97)}to{opacity:1;transform:translate(0)scale(1)}}@keyframes obSlideOut{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-30px)}}.ob-skip{color:var(--text-muted);cursor:pointer;font-size:.75rem;font-family:var(--font-sans);background:0 0;border:none;transition:color .15s;position:absolute;top:12px;right:16px}.ob-skip:hover{color:var(--text-primary)}.ob-emoji{margin-bottom:.75rem;font-size:3rem}.ob-title{font-size:var(--text-xl);font-weight:var(--weight-bold);color:var(--text-primary);letter-spacing:-.02em;margin-bottom:.5rem}.ob-desc{font-size:var(--text-sm);color:var(--text-secondary);white-space:pre-line;margin-bottom:1.5rem;line-height:1.65}.ob-btn{border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:var(--weight-semibold);cursor:pointer;font-family:var(--font-sans);border:none;justify-content:center;align-items:center;gap:6px;padding:10px 24px;transition:all .2s;display:inline-flex}.ob-btn--primary{background:var(--accent-teal);color:#000}.ob-btn--primary:hover{background:var(--accent-glow);box-shadow:0 0 20px #2dd4bf4d}.ob-btn--secondary{background:var(--bg-elevated);color:var(--text-secondary);border:1px solid var(--border-subtle)}.ob-btn--secondary:hover{background:var(--bg-deep);color:var(--text-primary)}.ob-final-actions{flex-direction:column;gap:8px;display:flex}.ob-dots{justify-content:center;gap:6px;margin-top:1.25rem;display:flex}.ob-dot{background:var(--border-subtle);border-radius:50%;width:6px;height:6px;transition:all .3s}.ob-dot--active{background:var(--accent-teal);border-radius:3px;width:18px}.pf-container{flex-direction:column;gap:1.5rem;max-width:960px;margin:0 auto;padding:2.5rem 1.5rem 4rem;display:flex}.pf-login-banner{text-align:center;border-radius:var(--radius-md);color:var(--text-secondary);background:#2dd4bf0f;border:1px solid #2dd4bf26;padding:10px 16px;font-size:.9rem}.pf-tier-card{align-items:center;gap:var(--space-6);background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);padding:1.75rem;display:flex;box-shadow:0 0 40px #2dd4bf0a}.pf-tier-left{flex-shrink:0;align-items:center;gap:12px;display:flex}.pf-tier-emoji{font-size:2.5rem}.pf-tier-name{font-size:1.3rem;font-weight:var(--weight-bold);color:var(--text-primary)}.pf-tier-rank{color:var(--tier-color,var(--text-secondary));font-size:1rem;font-weight:var(--weight-semibold)}.pf-tier-right{flex:1;min-width:0}.pf-tier-bar-wrap{width:100%}.pf-tier-bar{background:var(--bg-deep);border-radius:4px;width:100%;height:8px;margin-bottom:6px;overflow:hidden}.pf-tier-fill{background:linear-gradient(90deg,var(--accent-teal),var(--accent-purple));border-radius:4px;height:100%;transition:width .8s cubic-bezier(.16,1,.3,1)}.pf-tier-labels{color:var(--text-muted);justify-content:space-between;font-size:.75rem;display:flex}.pf-stats{grid-template-columns:repeat(4,1fr);gap:.75rem;display:grid}.pf-stat-card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);flex-direction:column;align-items:center;gap:6px;padding:1.25rem;display:flex}.pf-stat-value{font-size:1.75rem;font-weight:var(--weight-bold);color:var(--text-primary);font-family:var(--font-mono)}.pf-stat-label{color:var(--text-muted);font-size:.85rem;font-weight:var(--weight-medium)}.pf-main{grid-template-columns:1fr 280px;gap:1.25rem;display:grid}.pf-section{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:1.5rem}.pf-section-title{font-size:1.15rem;font-weight:var(--weight-bold);color:var(--text-primary);align-items:center;gap:8px;margin-bottom:1rem;display:flex}.pf-section-sub{font-size:.85rem;font-weight:var(--weight-medium);color:var(--text-muted);font-family:var(--font-mono)}.pf-heatmap{grid-template-columns:repeat(auto-fill,minmax(18px,1fr));gap:3px;margin-bottom:10px;display:grid}.pf-heatmap-cell{aspect-ratio:1;cursor:pointer;border-radius:3px;transition:transform .15s,box-shadow .15s}.pf-heatmap-cell:hover{z-index:1;transform:scale(1.3);box-shadow:0 0 8px #2dd4bf4d}.pf-heatmap-legend{justify-content:flex-end;gap:12px;display:flex}.pf-legend-item{color:var(--text-muted);align-items:center;gap:4px;font-size:.75rem;display:flex}.pf-legend-dot{border-radius:2px;width:10px;height:10px;display:inline-block}.pf-badges{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.pf-badge{border-radius:var(--radius-md);background:var(--bg-deep);opacity:.35;filter:grayscale();flex-direction:column;align-items:center;gap:4px;padding:10px 6px;transition:all .3s;display:flex}.pf-badge--earned{opacity:1;filter:none;background:#2dd4bf0f;border:1px solid #2dd4bf26}.pf-badge-emoji{font-size:1.75rem}.pf-badge-name{color:var(--text-secondary);font-size:.75rem;font-weight:var(--weight-medium);text-align:center}.pf-recent{grid-column:1/-1}.pf-activity-list{flex-direction:column;gap:4px;display:flex}.pf-activity-item{border-radius:var(--radius-sm);color:inherit;align-items:center;gap:12px;padding:10px 14px;text-decoration:none;transition:background .15s;display:flex}.pf-activity-item:hover{background:var(--bg-deep)}.pf-activity-id{font-size:.85rem;font-family:var(--font-mono);color:var(--text-muted);min-width:40px}.pf-activity-title{font-size:.95rem;font-weight:var(--weight-medium);color:var(--text-primary);flex:1}.pf-activity-xp{color:var(--accent-teal);font-size:.9rem;font-weight:600;font-family:var(--font-mono)}.pf-activity-date{color:var(--text-muted);text-align:right;min-width:55px;font-size:.8rem}@media (max-width:768px){.pf-tier-card{text-align:center;flex-direction:column}.pf-tier-left{flex-direction:column}.pf-stats{grid-template-columns:repeat(2,1fr)}.pf-main{grid-template-columns:1fr}.pf-badges{grid-template-columns:repeat(4,1fr)}}.rk-container{max-width:800px;margin:0 auto;padding:2.5rem 1.5rem 4rem}.rk-header{text-align:center;margin-bottom:2rem}.rk-title{color:var(--text-primary);letter-spacing:-.03em;margin-bottom:.25rem;font-size:1.75rem;font-weight:800}.rk-subtitle{color:var(--text-muted);font-size:.95rem}.rk-loading{flex-direction:column;gap:12px;padding:2rem 0;display:flex}.rk-loading-bar{background:linear-gradient(90deg,var(--bg-surface)25%,var(--bg-elevated)50%,var(--bg-surface)75%);border-radius:var(--radius-md);background-size:200% 100%;height:48px;animation:1.5s infinite shimmer}.rk-empty{text-align:center;color:var(--text-muted);padding:4rem 1rem}.rk-empty-icon{margin-bottom:1rem;font-size:3rem;display:block}.rk-empty p{color:var(--text-secondary);margin-bottom:.25rem;font-size:1.05rem}.rk-empty-sub{color:var(--text-muted)!important;font-size:.9rem!important}.rk-podium{grid-template-columns:1fr 1.2fr 1fr;align-items:end;gap:12px;margin-bottom:2rem;display:grid}.rk-podium-item{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);flex-direction:column;align-items:center;gap:6px;padding:1.5rem 1rem;transition:border-color .2s;display:flex}.rk-podium-1{border-color:#ffd7004d;padding:2rem 1rem;box-shadow:0 0 30px #ffd7000f}.rk-podium-2{border-color:#c0c0c033}.rk-podium-3{border-color:#cd7f3233}.rk-podium--me{box-shadow:0 0 20px #2dd4bf1a;border-color:var(--border-glow)!important}.rk-podium-medal{font-size:2rem}.rk-podium-tier{font-size:1.75rem}.rk-podium-name{color:var(--text-primary);font-size:1.05rem;font-weight:700}.rk-podium-xp{font-size:1.1rem;font-weight:800;font-family:var(--font-mono)}.rk-podium-stats{color:var(--text-muted);font-size:.8rem}.rk-list{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden}.rk-list-header{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border-subtle);background:var(--bg-deep);grid-template-columns:56px 1fr 100px 70px 60px 50px;padding:10px 16px;font-size:.75rem;font-weight:600;display:grid}.rk-row{border-bottom:1px solid var(--border-subtle);grid-template-columns:56px 1fr 100px 70px 60px 50px;align-items:center;padding:12px 16px;transition:background .15s;display:grid}.rk-row:last-child{border-bottom:none}.rk-row:hover{background:#2dd4bf08}.rk-row--me{border-left:3px solid var(--accent-teal);background:#2dd4bf0f}.rk-col-rank{font-size:.95rem;font-weight:700;font-family:var(--font-mono);color:var(--text-secondary)}.rk-col-name{align-items:center;gap:8px;min-width:0;display:flex}.rk-row-tier{flex-shrink:0;font-size:1.1rem}.rk-row-name{color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;font-size:.95rem;font-weight:600;overflow:hidden}.rk-me-tag{color:var(--accent-teal);background:#2dd4bf1f;border-radius:4px;flex-shrink:0;padding:1px 6px;font-size:.65rem;font-weight:700}.rk-col-xp{font-size:.9rem;font-weight:700;font-family:var(--font-mono);text-align:right}.rk-col-solved{color:var(--text-secondary);font-size:.85rem;font-family:var(--font-mono);text-align:center}.rk-col-streak{color:var(--text-muted);text-align:center;font-size:.8rem}.rk-col-badges{color:var(--text-muted);font-size:.8rem;font-family:var(--font-mono);text-align:center}.rk-my-rank{border-radius:var(--radius-md);color:var(--text-secondary);background:#2dd4bf0f;border:1px solid #2dd4bf26;justify-content:center;align-items:center;gap:12px;margin-top:1.5rem;padding:12px 20px;font-size:.95rem;font-weight:600;display:flex}.rk-my-rank-hint{color:var(--text-muted);font-size:.85rem;font-weight:400}@media (max-width:768px){.rk-podium{grid-template-columns:1fr;gap:8px}.rk-podium-item{flex-direction:row;gap:10px;padding:12px 16px}.rk-podium-1{padding:14px 16px}.rk-list-header,.rk-row{grid-template-columns:42px 1fr 80px 50px}.rk-col-streak,.rk-col-badges{display:none}.rk-my-rank{flex-direction:column;gap:4px}}.legal-page{min-height:100vh;padding:6rem 1.5rem 4rem}.legal-container{max-width:720px;margin:0 auto}.legal-title{color:var(--text-primary);letter-spacing:-.02em;margin-bottom:.5rem;font-size:2rem;font-weight:700}.legal-updated{color:var(--text-muted);margin-bottom:2.5rem;font-size:.9rem}.legal-section{margin-bottom:2rem}.legal-section h2{color:var(--accent-teal);margin-bottom:.75rem;font-size:1.15rem;font-weight:600}.legal-section p{color:var(--text-secondary);margin-bottom:.5rem;font-size:.95rem;line-height:1.7}.legal-section ul{flex-direction:column;gap:.5rem;padding:0;list-style:none;display:flex}.legal-section li{color:var(--text-secondary);padding-left:1.25rem;font-size:.95rem;line-height:1.6;position:relative}.legal-section li:before{content:"";background:var(--accent-teal);opacity:.5;border-radius:50%;width:6px;height:6px;position:absolute;top:.6em;left:0}.legal-section ol{flex-direction:column;gap:.5rem;padding-left:1.5rem;display:flex}.legal-section ol li{padding-left:.25rem}.legal-section ol li:before{display:none}.legal-section h3{color:var(--text-primary);margin:1rem 0 .5rem;font-size:1rem;font-weight:600}.legal-table{border-collapse:collapse;width:100%;margin:1rem 0;font-size:.85rem}.legal-table th,.legal-table td{text-align:left;border:1px solid var(--border-subtle);color:var(--text-secondary);padding:.75rem 1rem}.legal-table th{background:var(--bg-elevated);color:var(--text-primary);font-size:.8rem;font-weight:600}.legal-table tr:hover td{background:#2dd4bf08}.legal-link{color:var(--accent-teal);text-underline-offset:3px;text-decoration:underline}.legal-link:hover{text-decoration-thickness:2px}.contact-form{flex-direction:column;gap:1.25rem;display:flex}.contact-field{flex-direction:column;gap:.4rem;display:flex}.contact-field label{color:var(--text-secondary);font-size:.9rem;font-weight:500}.contact-field input,.contact-field textarea{width:100%;font-size:.95rem;font-family:var(--font-sans);background:var(--bg-deep);color:var(--text-primary);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);outline:none;padding:12px 14px;transition:border-color .2s,box-shadow .2s}.contact-field input:focus,.contact-field textarea:focus{border-color:var(--accent-teal);box-shadow:0 0 0 3px #2dd4bf1a}.contact-field textarea{resize:vertical;min-height:120px}.contact-submit-btn{color:var(--text-inverse);background:linear-gradient(135deg,var(--accent-teal),var(--accent-glow));border-radius:var(--radius-lg);cursor:pointer;border:none;padding:14px;font-size:1rem;font-weight:600;transition:transform .2s,box-shadow .2s}.contact-submit-btn:hover{transform:translateY(-1px);box-shadow:0 0 20px #2dd4bf40}.contact-success{text-align:center;background:var(--bg-surface);border-radius:var(--radius-xl);border:1px solid var(--border-subtle);padding:3rem 1.5rem}.contact-success-icon{color:var(--status-success);margin-bottom:1rem;font-size:2.5rem;display:block}.contact-success p{color:var(--text-secondary);margin-bottom:1.5rem;font-size:1rem}.contact-reset-btn{color:var(--accent-teal);border:1px solid var(--accent-teal);border-radius:var(--radius-md);cursor:pointer;background:0 0;padding:8px 20px;font-size:.9rem;font-weight:500;transition:background .2s}.contact-reset-btn:hover{background:#2dd4bf14}.site-footer{border-top:1px solid var(--border-subtle);margin-top:4rem;padding:2.5rem 1.5rem}.footer-inner{flex-direction:column;gap:1.5rem;max-width:960px;margin:0 auto;display:flex}.footer-top{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:2rem;display:flex}.footer-brand{color:var(--text-primary);letter-spacing:-.02em;font-size:1.1rem;font-weight:700}.footer-brand span{color:var(--accent-teal)}.footer-links{flex-wrap:wrap;gap:1.5rem;display:flex}.footer-links a{color:var(--text-muted);font-size:.85rem;transition:color .15s}.footer-links a:hover{color:var(--text-secondary)}.footer-business{color:var(--text-muted);border-top:1px solid #94a3b81a;margin-top:1.2rem;padding-top:1.2rem;font-size:.75rem;line-height:1.8}.footer-bottom{color:var(--text-muted);font-size:.8rem}@media (max-width:600px){.footer-top{flex-direction:column;gap:1rem}.footer-links{gap:1rem}}.sc-page{background:var(--bg-deep);min-height:100vh;padding:5rem 1.5rem 4rem}.sc-container{max-width:1100px;margin:0 auto}.sc-hero{text-align:center;margin-bottom:2.5rem}.sc-hero-title{color:var(--text-primary);margin-bottom:.5rem;font-size:2.2rem;font-weight:800}.sc-hero-sub{color:var(--text-secondary);margin-bottom:1.5rem;font-size:1rem}.sc-submit-btn{background:linear-gradient(135deg,var(--accent-teal),var(--accent-glow));color:var(--bg-deep);border-radius:var(--radius-md);cursor:pointer;border:none;padding:.7rem 1.8rem;font-size:.9rem;font-weight:700;text-decoration:none;transition:box-shadow .2s,transform .2s;display:inline-block}.sc-submit-btn:hover{transform:translateY(-1px);box-shadow:0 0 20px #2dd4bf4d}.sc-submit-btn-sm{padding:.6rem 1.4rem;font-size:.85rem}.sc-filters{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:2rem;display:flex}.sc-category-tabs{flex-wrap:wrap;gap:.4rem;display:flex}.sc-category-tab{border:1px solid var(--border-subtle);color:var(--text-muted);cursor:pointer;background:0 0;border-radius:20px;padding:.4rem .9rem;font-size:.8rem;font-weight:500;transition:all .2s}.sc-category-tab:hover{border-color:var(--border-default);color:var(--text-secondary)}.sc-category-tab-active{background:var(--accent-teal);border-color:var(--accent-teal);color:var(--bg-deep);font-weight:600}.sc-sort-group{gap:.3rem;display:flex}.sc-sort-btn{border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer;background:0 0;padding:.35rem .75rem;font-size:.78rem;transition:all .2s}.sc-sort-btn:hover{color:var(--text-secondary)}.sc-sort-btn-active{background:var(--bg-elevated);border-color:var(--border-default);color:var(--text-primary)}.sc-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.5rem;margin-bottom:2rem;display:grid}.sc-card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);flex-direction:column;text-decoration:none;transition:border-color .3s,box-shadow .3s,transform .3s;display:flex;overflow:hidden}.sc-card:hover{border-color:var(--border-default);box-shadow:var(--shadow-md);transform:translateY(-3px)}.sc-card-preview{background:var(--bg-elevated);width:100%;height:200px;position:relative;overflow:hidden}.sc-card-iframe{transform-origin:0 0;pointer-events:none;border:none;width:200%;height:200%;transform:scale(.5)}.sc-card-overlay{background:linear-gradient(#0000 60%,#080c1299 100%);position:absolute;inset:0}.sc-card-code-badge{width:100%;height:100%;font-family:var(--font-mono);color:var(--accent-teal);letter-spacing:.1em;justify-content:center;align-items:center;font-size:1.2rem;font-weight:700;display:flex}.sc-card-body{flex-direction:column;flex:1;gap:.5rem;padding:1rem 1.2rem 1.2rem;display:flex}.sc-card-title{color:var(--text-primary);font-size:1rem;font-weight:700;line-height:1.3}.sc-card-desc{color:var(--text-muted);font-size:.8rem;line-height:1.5}.sc-card-tags{flex-wrap:wrap;gap:.35rem;display:flex}.sc-tag{background:var(--bg-elevated);color:var(--text-muted);border:1px solid var(--border-subtle);border-radius:10px;padding:2px 8px;font-size:.7rem}.sc-tag-category{color:var(--accent-teal);background:#2dd4bf1a;border-color:#2dd4bf33;font-weight:600}.sc-card-footer{justify-content:space-between;align-items:center;margin-top:auto;display:flex}.sc-card-author{color:var(--text-secondary);font-size:.78rem;font-weight:500}.sc-card-stats{color:var(--text-muted);gap:.6rem;font-size:.72rem;display:flex}.sc-card-time{color:var(--text-muted);font-size:.7rem}.sc-loading{color:var(--text-muted);flex-direction:column;align-items:center;gap:1rem;padding:4rem 0;display:flex}.sc-spinner{border:3px solid var(--border-subtle);border-top-color:var(--accent-teal);border-radius:50%;width:32px;height:32px;animation:.8s linear infinite sc-spin}@keyframes sc-spin{to{transform:rotate(360deg)}}.sc-empty{text-align:center;color:var(--text-muted);padding:4rem 0}.sc-empty-icon{margin-bottom:1rem;font-size:3rem}.sc-empty h3{color:var(--text-primary);margin-bottom:.5rem;font-size:1.2rem}.sc-pagination{justify-content:center;align-items:center;gap:1rem;padding:1rem 0;display:flex}.sc-page-btn{border:1px solid var(--border-default);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;background:0 0;padding:.5rem 1.2rem;font-size:.85rem;transition:all .2s}.sc-page-btn:hover:not(:disabled){background:var(--bg-elevated);color:var(--text-primary)}.sc-page-btn:disabled{opacity:.3;cursor:not-allowed}.sc-page-info{color:var(--text-muted);font-size:.85rem}.sc-detail-container{max-width:900px;margin:0 auto}.sc-detail-back{margin-bottom:1.5rem}.sc-back-link{color:var(--text-muted);font-size:.85rem;transition:color .2s}.sc-back-link:hover{color:var(--accent-teal)}.sc-detail-header{margin-bottom:2rem}.sc-detail-meta{flex-wrap:wrap;gap:.4rem;margin-bottom:.75rem;display:flex}.sc-detail-title{color:var(--text-primary);margin-bottom:.75rem;font-size:1.8rem;font-weight:800}.sc-detail-info{color:var(--text-muted);gap:1rem;font-size:.85rem;display:flex}.sc-detail-author{color:var(--text-secondary);font-weight:600}.sc-preview{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);margin-bottom:2rem;overflow:hidden}.sc-preview-bar{background:var(--bg-elevated);border-bottom:1px solid var(--border-subtle);align-items:center;gap:.75rem;padding:.6rem 1rem;display:flex}.sc-preview-dots{gap:5px;display:flex}.sc-preview-dots span{background:var(--border-default);border-radius:50%;width:10px;height:10px}.sc-preview-url{font-family:var(--font-mono);color:var(--text-muted);text-overflow:ellipsis;white-space:nowrap;font-size:.72rem;overflow:hidden}.sc-preview-iframe{background:#fff;border:none;width:100%;height:500px}.sc-preview-empty{text-align:center;color:var(--text-muted);padding:3rem}.sc-detail-desc{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);margin-bottom:1.5rem;padding:1.5rem}.sc-detail-desc h3{color:var(--text-secondary);margin-bottom:.75rem;font-size:.9rem;font-weight:600}.sc-detail-desc p{color:var(--text-primary);white-space:pre-wrap;font-size:.9rem;line-height:1.7}.sc-detail-link{margin-bottom:1.5rem}.sc-external-link{background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:var(--radius-md);color:var(--accent-teal);padding:.6rem 1.4rem;font-size:.85rem;font-weight:600;transition:all .2s;display:inline-flex}.sc-external-link:hover{border-color:var(--accent-teal);background:#2dd4bf1a}.sc-detail-actions{gap:.75rem;margin-bottom:2.5rem;display:flex}.sc-like-btn{border:1px solid var(--border-default);border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;background:0 0;align-items:center;gap:.4rem;padding:.6rem 1.4rem;font-size:.85rem;font-weight:600;transition:all .2s;display:inline-flex}.sc-like-btn:hover{color:#f87171;border-color:#f87171}.sc-like-btn-active{color:#f87171;background:#f871711a;border-color:#f87171}.sc-delete-btn{border:1px solid var(--border-default);border-radius:var(--radius-md);color:var(--text-muted);cursor:pointer;background:0 0;padding:.6rem 1.4rem;font-size:.85rem;transition:all .2s}.sc-delete-btn:hover{border-color:var(--status-error);color:var(--status-error)}.sc-comments{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:1.5rem}.sc-comments-title{color:var(--text-primary);margin-bottom:1rem;font-size:1rem;font-weight:700}.sc-comment-form{flex-direction:column;gap:.75rem;margin-bottom:1.5rem;display:flex}.sc-comment-input{background:var(--bg-deep);border:1px solid var(--border-subtle);border-radius:var(--radius-md);width:100%;color:var(--text-primary);resize:vertical;padding:.75rem;font-family:inherit;font-size:.85rem;transition:border-color .2s}.sc-comment-input:focus{border-color:var(--accent-teal);outline:none}.sc-comment-submit{background:var(--accent-teal);border-radius:var(--radius-sm);color:var(--bg-deep);cursor:pointer;border:none;align-self:flex-end;padding:.5rem 1.2rem;font-size:.8rem;font-weight:600;transition:opacity .2s}.sc-comment-submit:disabled{opacity:.4;cursor:not-allowed}.sc-comments-login,.sc-comments-loading,.sc-comments-empty{color:var(--text-muted);padding:1rem 0;font-size:.85rem}.sc-comment-list{flex-direction:column;gap:1rem;display:flex}.sc-comment-item{background:var(--bg-deep);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:1rem}.sc-comment-header{align-items:center;gap:.75rem;margin-bottom:.5rem;display:flex}.sc-comment-author{color:var(--text-secondary);font-size:.82rem;font-weight:600}.sc-comment-date{color:var(--text-muted);font-size:.72rem}.sc-comment-delete{color:var(--text-muted);cursor:pointer;background:0 0;border:none;margin-left:auto;font-size:.72rem}.sc-comment-delete:hover{color:var(--status-error)}.sc-comment-content{color:var(--text-primary);white-space:pre-wrap;font-size:.85rem;line-height:1.6}.sc-submit-container{max-width:800px;margin:0 auto}.sc-submit-title{color:var(--text-primary);margin-bottom:.4rem;font-size:1.8rem;font-weight:800}.sc-submit-subtitle{color:var(--text-muted);margin-bottom:2rem;font-size:.95rem}.sc-form{flex-direction:column;gap:1.5rem;display:flex}.sc-form-error{border-radius:var(--radius-md);color:var(--status-error);background:#f871711a;border:1px solid #f871714d;padding:.75rem 1rem;font-size:.85rem}.sc-form-group{flex-direction:column;gap:.5rem;display:flex}.sc-form-label{color:var(--text-secondary);font-size:.85rem;font-weight:600}.sc-form-input{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);color:var(--text-primary);padding:.75rem 1rem;font-family:inherit;font-size:.9rem;transition:border-color .2s}.sc-form-input:focus{border-color:var(--accent-teal);outline:none}.sc-form-textarea{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);color:var(--text-primary);resize:vertical;padding:.75rem 1rem;font-family:inherit;font-size:.9rem;transition:border-color .2s}.sc-form-textarea:focus{border-color:var(--accent-teal);outline:none}.sc-form-categories{flex-wrap:wrap;gap:.4rem;display:flex}.sc-form-cat-btn{border:1px solid var(--border-subtle);color:var(--text-muted);cursor:pointer;background:0 0;border-radius:20px;padding:.4rem .9rem;font-size:.8rem;transition:all .2s}.sc-form-cat-btn:hover{border-color:var(--border-default);color:var(--text-secondary)}.sc-form-cat-btn-active{background:var(--accent-teal);border-color:var(--accent-teal);color:var(--bg-deep)}.sc-form-tags{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);flex-wrap:wrap;align-items:center;gap:.4rem;min-height:42px;padding:.5rem .75rem;display:flex}.sc-form-tag{background:var(--bg-elevated);border:1px solid var(--border-default);color:var(--text-secondary);border-radius:10px;align-items:center;gap:.3rem;padding:2px 8px;font-size:.78rem;display:inline-flex}.sc-form-tag-remove{color:var(--text-muted);cursor:pointer;background:0 0;border:none;padding:0;font-size:.9rem;line-height:1}.sc-form-tag-remove:hover{color:var(--status-error)}.sc-form-tag-input{min-width:80px;color:var(--text-primary);background:0 0;border:none;outline:none;flex:1;font-family:inherit;font-size:.85rem}.sc-form-type-tabs{gap:.5rem;display:flex}.sc-form-type-tab{border:1px solid var(--border-subtle);border-radius:var(--radius-md);color:var(--text-muted);cursor:pointer;text-align:center;background:0 0;flex:1;padding:.7rem;font-size:.85rem;font-weight:500;transition:all .2s}.sc-form-type-tab:hover{border-color:var(--border-default);color:var(--text-secondary)}.sc-form-type-tab-active{background:var(--bg-elevated);border-color:var(--accent-teal);color:var(--accent-teal);font-weight:600}.sc-form-code-editor{border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden}.sc-code-tabs{background:var(--bg-elevated);border-bottom:1px solid var(--border-subtle);display:flex}.sc-code-tab{font-family:var(--font-mono);color:var(--text-muted);cursor:pointer;background:0 0;border:none;padding:.6rem 1.2rem;font-size:.78rem;font-weight:600;transition:color .2s}.sc-code-tab-active{color:var(--accent-teal);background:var(--bg-surface)}.sc-code-panels{grid-template-columns:1fr 1fr;min-height:350px;display:grid}.sc-code-textarea{background:var(--editor-bg);border:none;border-right:1px solid var(--border-subtle);width:100%;height:100%;min-height:350px;color:var(--editor-text);font-family:var(--font-mono);resize:none;outline:none;padding:1rem;font-size:.82rem;line-height:1.6}.sc-code-preview{background:#fff;position:relative}.sc-code-preview-label{color:var(--text-muted);background:var(--bg-elevated);z-index:1;border-radius:4px;padding:2px 6px;font-size:.65rem;font-weight:600;position:absolute;top:.4rem;right:.6rem}.sc-code-preview-frame{border:none;width:100%;height:100%;min-height:350px}.sc-form-submit{background:linear-gradient(135deg,var(--accent-teal),var(--accent-glow));border-radius:var(--radius-md);color:var(--bg-deep);cursor:pointer;border:none;padding:.85rem;font-size:.95rem;font-weight:700;transition:box-shadow .2s,transform .2s}.sc-form-submit:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 0 20px #2dd4bf4d}.sc-form-submit:disabled{opacity:.5;cursor:not-allowed}@media (max-width:640px){.sc-page{padding:4.5rem 1rem 3rem}.sc-hero-title{font-size:1.6rem}.sc-grid{grid-template-columns:1fr}.sc-filters{flex-direction:column;align-items:flex-start}.sc-detail-title{font-size:1.4rem}.sc-preview-iframe{height:300px}.sc-code-panels{grid-template-columns:1fr}.sc-code-textarea{border-right:none;border-bottom:1px solid var(--border-subtle);min-height:200px}.sc-code-preview-frame{min-height:200px}}.cd-page{max-width:1100px;min-height:100vh;margin:0 auto;padding:24px 20px 60px}.cd-empty{height:100vh;color:var(--text-secondary);flex-direction:column;justify-content:center;align-items:center;gap:16px;display:flex}.cd-topbar{justify-content:space-between;align-items:center;margin-bottom:28px;display:flex}.cd-topbar__back{color:var(--text-secondary);font-size:14px;font-weight:500;text-decoration:none;transition:color .15s}.cd-topbar__back:hover{color:var(--accent-teal)}.cd-topbar__nav{align-items:center;gap:8px;display:flex}.cd-topbar__arrow{border:1px solid var(--border-subtle);background:var(--bg-surface);width:32px;height:32px;color:var(--text-secondary);cursor:pointer;border-radius:8px;justify-content:center;align-items:center;font-size:18px;transition:all .15s;display:flex}.cd-topbar__arrow:hover:not(:disabled){border-color:var(--accent-teal);color:var(--accent-teal)}.cd-topbar__arrow:disabled{opacity:.3;cursor:not-allowed}.cd-topbar__pos{color:var(--text-muted);text-align:center;min-width:60px;font-size:13px}.cd-header{margin-bottom:32px}.cd-header__meta{align-items:center;gap:8px;margin-bottom:12px;display:flex}.cd-header__category{color:var(--accent-teal);letter-spacing:-.01em;background:#2dd4bf1a;border-radius:20px;padding:4px 12px;font-size:13px;font-weight:600}.cd-header__mode{border-radius:20px;padding:4px 10px;font-size:12px;font-weight:500}.cd-header__title{color:var(--text-primary);letter-spacing:-.02em;margin-bottom:12px;font-size:28px;font-weight:700}.cd-header__info{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.cd-header__diff{font-size:13px;font-weight:600}.cd-header__attempts,.cd-header__best{color:var(--text-secondary);background:var(--bg-elevated);border-radius:6px;padding:4px 10px;font-size:13px}.cd-stars{gap:2px;display:flex}.cd-star{color:var(--text-muted);opacity:.3;font-size:16px}.cd-star--filled{color:#fbbf24;opacity:1}.cd-content{grid-template-columns:1fr 1fr;gap:28px;margin-bottom:48px;display:grid}.cd-preview{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:16px;overflow:hidden}.cd-preview__label{color:var(--text-secondary);border-bottom:1px solid var(--border-subtle);padding:14px 18px;font-size:14px;font-weight:600}.cd-preview__frame{background:#fafafa;height:360px}.cd-preview__frame iframe{border:none;width:100%;height:100%}.cd-info{flex-direction:column;gap:20px;display:flex}.cd-section{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:12px;padding:18px 20px}.cd-section__title{color:var(--text-primary);margin-bottom:10px;font-size:15px;font-weight:600}.cd-section__text{color:var(--text-secondary);font-size:15px;line-height:1.7}.cd-tags{flex-wrap:wrap;gap:8px;display:flex}.cd-tag{color:var(--accent-teal);background:#2dd4bf14;border:1px solid #2dd4bf33;border-radius:6px;padding:4px 12px;font-family:JetBrains Mono,monospace;font-size:13px}.cd-hints{flex-wrap:wrap;gap:8px;display:flex}.cd-hint{color:var(--text-primary);background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:8px;padding:6px 14px;font-family:JetBrains Mono,monospace;font-size:13px}.cd-colors{flex-wrap:wrap;gap:10px;display:flex}.cd-color{border:2px solid var(--border-subtle);cursor:pointer;border-radius:10px;width:40px;height:40px;transition:transform .15s,border-color .15s;position:relative}.cd-color:hover{border-color:var(--accent-teal);transform:scale(1.15)}.cd-color__label{color:var(--text-muted);white-space:nowrap;opacity:0;pointer-events:none;font-family:JetBrains Mono,monospace;font-size:10px;transition:opacity .15s;position:absolute;bottom:-22px;left:50%;transform:translate(-50%)}.cd-color:hover .cd-color__label{opacity:1}.cd-cta{width:100%;color:var(--bg-deep);background:linear-gradient(135deg,var(--accent-teal),var(--accent-glow));cursor:pointer;letter-spacing:-.01em;border:none;border-radius:14px;justify-content:center;align-items:center;gap:8px;margin-top:4px;padding:16px 32px;font-size:17px;font-weight:700;text-decoration:none;transition:all .2s;display:flex}.cd-cta:hover{transform:translateY(-2px);box-shadow:0 8px 24px #2dd4bf4d}.cd-related{margin-top:16px}.cd-related__title{color:var(--text-primary);margin-bottom:16px;font-size:18px;font-weight:700}.cd-related__grid{grid-template-columns:repeat(3,1fr);gap:16px;display:grid}.cd-related-card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:12px;text-decoration:none;transition:all .2s;overflow:hidden}.cd-related-card:hover{border-color:var(--accent-teal);transform:translateY(-4px);box-shadow:0 8px 20px #0003}.cd-related-card__preview{background:#fafafa;height:140px;overflow:hidden}.cd-related-card__preview iframe{pointer-events:none;border:none;width:100%;height:100%}.cd-related-card__info{padding:12px 14px}.cd-related-card__title{color:var(--text-primary);margin-bottom:6px;font-size:14px;font-weight:600;display:block}.cd-related-card__meta{color:var(--text-muted);align-items:center;gap:8px;font-size:12px;display:flex}@media (max-width:768px){.cd-header__title{font-size:22px}.cd-content{grid-template-columns:1fr}.cd-preview__frame{height:280px}.cd-related__grid{grid-template-columns:repeat(2,1fr)}.cd-cta{padding:14px 24px;font-size:15px}}@media (max-width:480px){.cd-related__grid{grid-template-columns:1fr}}.playground-page{background:var(--bg-deep);flex-direction:column;height:100vh;display:flex}.playground-toolbar{background:var(--bg-surface);border-bottom:1px solid var(--border-subtle);flex-shrink:0;justify-content:space-between;align-items:center;gap:12px;height:52px;padding:0 16px;display:flex}.playground-toolbar__left{align-items:center;gap:12px;display:flex}.playground-toolbar__back{color:var(--text-secondary);font-size:13px;font-weight:500;text-decoration:none;transition:color .2s}.playground-toolbar__back:hover{color:var(--accent-teal)}.playground-toolbar__title{color:var(--text-primary);letter-spacing:-.01em;font-size:15px;font-weight:700}.playground-toolbar__subtitle{color:var(--text-muted);background:var(--bg-overlay);border-radius:4px;padding:2px 8px;font-size:12px}.playground-toolbar__center{background:var(--bg-elevated);border-radius:var(--radius-md);align-items:center;gap:4px;padding:3px;display:flex}.playground-fw-btn{border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;white-space:nowrap;background:0 0;border:none;align-items:center;gap:6px;padding:6px 14px;font-size:13px;font-weight:500;transition:all .2s;display:flex}.playground-fw-btn:hover{color:var(--text-primary);background:var(--bg-overlay)}.playground-fw-btn--active{background:var(--bg-surface);color:var(--fw-accent,var(--accent-teal));box-shadow:0 1px 3px #0000004d}.playground-fw-btn__icon{font-size:14px;line-height:1}.playground-toolbar__right{align-items:center;gap:8px;display:flex}@media (max-width:768px){.playground-toolbar{flex-wrap:wrap;gap:8px;height:auto;padding:8px 12px}.playground-toolbar__center{order:3;justify-content:center;width:100%}.playground-fw-btn{flex:1;justify-content:center;padding:6px 8px;font-size:12px}.playground-fw-btn__icon{display:none}}html,body{overflow-x:hidden}@media (max-width:768px){.container{padding:0 var(--space-4)}.learn-hero{padding:var(--space-10)0 var(--space-6)}.learn-hero__title{font-size:var(--text-2xl)}.learn-hero__subtitle{font-size:var(--text-base)}.learn-grid{gap:var(--space-3);grid-template-columns:1fr}.learn-card{padding:var(--space-4)}.lesson__breadcrumb{font-size:var(--text-sm);flex-wrap:wrap}.guide-grid{grid-template-columns:1fr}.guide-hero__title{font-size:var(--text-2xl)}.security-grid{grid-template-columns:1fr}.security-hero__title,.about-hero__title,.contact-hero__title{font-size:var(--text-2xl)}.about-hero__subtitle,.contact-hero__subtitle{font-size:var(--text-base)}.ranking-table{font-size:var(--text-sm)}.ranking-table th,.ranking-table td{padding:var(--space-2)var(--space-3)}.showcase-grid{grid-template-columns:1fr}.cd-page .container{padding:0 var(--space-3)}.cd-hero__title{font-size:var(--text-xl)}.cd-info-grid{grid-template-columns:1fr}.cd-tabs{gap:var(--space-2);flex-wrap:wrap}.footer__inner{gap:var(--space-4);text-align:center;flex-direction:column}.footer__links{flex-wrap:wrap;justify-content:center}.pricing-grid{grid-template-columns:1fr;max-width:400px;margin:0 auto}.pricing-hero__title{font-size:var(--text-2xl)}.challenge-page,.playground-page{min-height:0}}@media (max-width:480px){.learn-hero__title,.guide-hero__title,.security-hero__title{font-size:var(--text-xl)}.learn-card__emoji{font-size:28px}.learn-card__title{font-size:var(--text-base)}}