@import "https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap";.auth-modal{z-index:1000;background:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.auth-modal__card{border-radius:var(--radius-card,16px);background:#fff;width:100%;max-width:400px;padding:36px 32px 28px;position:relative;box-shadow:0 8px 40px #00000026}.auth-modal__close{color:var(--color-text-secondary,#636e72);background:0 0;font-size:1.5rem;line-height:1;position:absolute;top:14px;right:18px}.auth-modal__title{color:var(--color-text,#2d3436);margin-bottom:24px;font-size:1.4rem;font-weight:600}.auth-modal__form{flex-direction:column;gap:14px;display:flex}.auth-modal__input{border:1.5px solid var(--color-border,#f0ebe5);border-radius:var(--radius-btn,12px);width:100%;transition:border-color var(--transition-fast,.2s ease);background:#fafafa;padding:12px 14px;font-family:inherit;font-size:.95rem}.auth-modal__input:focus{border-color:#818cf8;outline:none}.auth-modal__forgot{color:var(--color-text-secondary,#636e72);cursor:default;font-size:.85rem}.auth-modal__error{color:var(--color-accent,#ff6b6b);font-size:.85rem}.auth-modal__success{color:#4ecdc4;margin-bottom:8px;padding:8px 0;font-size:.9rem}.auth-modal__submit{border-radius:var(--radius-btn,6px);color:#fff;cursor:pointer;background:#6366f1;border:none;justify-content:center;align-items:center;width:100%;min-height:44px;padding:12px 0;font-size:1rem;font-weight:600;transition:opacity .15s;display:flex}.auth-modal__submit:hover:not(:disabled){opacity:.9}.auth-modal__submit:disabled{opacity:.7;cursor:not-allowed}.auth-modal__loading{align-items:center;gap:8px;display:flex}.auth-modal__spinner{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:16px;height:16px;animation:.8s linear infinite auth-spin;display:inline-block}@keyframes auth-spin{to{transform:rotate(360deg)}}.auth-modal__switch{text-align:center;color:var(--color-text-secondary,#636e72);margin-top:20px;font-size:.9rem}.auth-modal__switch button{color:#6366f1;background:0 0;font-size:.9rem;font-weight:500}.navbar{z-index:100;-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--color-border);background:#faf5f0eb;position:fixed;top:0;left:0;right:0}.navbar__top{justify-content:space-between;align-items:center;gap:16px;max-width:1200px;margin:0 auto;padding:12px 24px;display:flex}.navbar__logo{color:var(--color-accent);white-space:nowrap;font-size:1.4rem;font-weight:900}.navbar__actions{align-items:center;gap:12px;display:flex}.navbar__login-btn{border:1.5px solid var(--color-accent);color:var(--color-accent);cursor:pointer;background:0 0;border-radius:6px;padding:6px 16px;font-size:.85rem;font-weight:600;transition:all .15s}.navbar__login-btn:hover{background:var(--color-accent);color:#fff}.navbar__user{align-items:center;gap:10px;display:flex}.navbar__user-email{color:var(--color-text-secondary);text-overflow:ellipsis;white-space:nowrap;max-width:160px;font-size:.82rem;overflow:hidden}.navbar__logout-btn{border:1px solid var(--color-border);color:var(--color-text-secondary);cursor:pointer;background:0 0;border-radius:6px;padding:4px 12px;font-size:.78rem;font-weight:600;transition:all .15s}.navbar__logout-btn:hover{color:var(--color-text);background:#0000000d}.navbar__search{background:#ffffffb3;border:1px solid #0000000f;border-radius:6px;align-items:center;gap:8px;width:100%;max-width:320px;padding:8px 16px;display:flex}.navbar__search-icon{flex-shrink:0;font-size:.9rem}.navbar__search-input{color:var(--color-text);width:100%;font-size:.9rem;font-family:var(--font-main);background:0 0;border:none;outline:none}.navbar__search-input::placeholder{color:#0000004d}.navbar__tabs{justify-content:center;gap:8px;max-width:1200px;margin:0 auto;padding:0 24px 12px;display:flex}.navbar__tab{color:var(--color-text-secondary);cursor:pointer;background:0 0;border:1.5px solid #0000001a;border-radius:6px;padding:6px 20px;font-size:.85rem;font-weight:600;transition:all .15s;display:inline-block}.navbar__tab:hover{color:var(--color-accent);background:#ff6b6b0a;border-color:#ff6b6b59}.navbar__tab--active{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}@media (width<=768px){.navbar__top{padding:10px 16px}.navbar__search{max-width:220px}.navbar__tabs{gap:6px;padding:0 16px 10px}.navbar__tab{padding:5px 14px;font-size:.8rem}}.layout{flex-direction:column;min-height:100vh;display:flex}.layout__main{flex:1;width:100%;max-width:1200px;margin:0 auto;padding:85px 24px 48px}.layout__footer{text-align:center;color:var(--color-text-secondary);border-top:1px solid var(--color-border);padding:24px;font-size:.85rem}@media (width<=768px){.layout__main{padding-top:75px;padding-left:16px;padding-right:16px}}.hero-card{border-radius:var(--radius-lg);margin-bottom:48px;position:relative;overflow:hidden}.hero-card__bg{background:var(--color-bg);text-align:center;padding:80px 20px 60px;position:relative;overflow:hidden}.hero-card__bg:before{content:"";pointer-events:none;background:radial-gradient(circle at 30% 30%,#ff6b6b14 0%,#0000 50%),radial-gradient(circle at 70% 70%,#4ecdc414 0%,#0000 50%);width:200%;height:200%;animation:20s ease-in-out infinite float;position:absolute;top:-50%;left:-50%}@keyframes float{0%,to{transform:translate(0)}50%{transform:translate(-20px,-20px)}}.hero-card__content{z-index:1;position:relative}.hero-card__title{background:linear-gradient(135deg, var(--color-accent), var(--color-python));-webkit-text-fill-color:transparent;letter-spacing:-.02em;-webkit-background-clip:text;background-clip:text;margin-bottom:16px;font-size:3rem;font-weight:800}.hero-card__subtitle{color:var(--color-text-secondary);max-width:600px;margin-bottom:50px;margin-left:auto;margin-right:auto;font-size:1.1rem}.hero-card__stats{flex-wrap:wrap;justify-content:center;gap:32px;display:flex}.stat-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;text-align:center;background:#ffffffb3;border:1px solid #fffc;border-radius:20px;min-width:160px;padding:32px 40px;transition:all .4s cubic-bezier(.175,.885,.32,1.275);position:relative;overflow:hidden;box-shadow:0 8px 32px #00000014}.stat-card:before{content:"";background:var(--gradient);opacity:0;height:4px;transition:opacity .3s;position:absolute;top:0;left:0;right:0}.stat-card:after{content:"";opacity:0;pointer-events:none;background:linear-gradient(135deg,#fff6 0%,#0000 100%);transition:opacity .3s;position:absolute;inset:0}.stat-card:hover{border-color:#fff;transform:translateY(-8px)rotateX(5deg);box-shadow:0 20px 60px #00000026}.stat-card:hover:before,.stat-card:hover:after{opacity:1}.stat-card__number{color:var(--color-accent);filter:drop-shadow(0 4px 8px #ff6b6b33);margin-bottom:8px;font-size:3rem;font-weight:800;line-height:1;display:block}.stat-card__label{color:var(--color-text-secondary);font-size:.9rem;font-weight:500}@media (width<=768px){.hero-card__bg{padding:60px 20px 50px}.hero-card__title{font-size:2.5rem}.hero-card__subtitle{margin-bottom:40px;font-size:1rem}.hero-card__stats{gap:16px}.stat-card{min-width:140px;padding:24px 28px}.stat-card__number{font-size:2.5rem}}.course-card{background:var(--color-card);border:1px solid var(--color-border);box-shadow:none;break-inside:avoid;cursor:pointer;border-radius:16px;margin-bottom:0;padding:28px 24px;text-decoration:none;transition:all .3s;display:block;position:relative;overflow:hidden}.course-card:before{content:"";-webkit-mask-composite:xor;background:linear-gradient(135deg,#0000,#0000);border-radius:16px;padding:2px;transition:background .3s;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.course-card:hover:before{background:var(--gradient);animation:3s linear infinite borderRotate}@keyframes borderRotate{0%{background:linear-gradient(0deg, var(--color-accent), var(--color-python), var(--color-thinking), var(--color-accent))}25%{background:linear-gradient(90deg, var(--color-accent), var(--color-python), var(--color-thinking), var(--color-accent))}50%{background:linear-gradient(180deg, var(--color-accent), var(--color-python), var(--color-thinking), var(--color-accent))}75%{background:linear-gradient(270deg, var(--color-accent), var(--color-python), var(--color-thinking), var(--color-accent))}to{background:linear-gradient(360deg, var(--color-accent), var(--color-python), var(--color-thinking), var(--color-accent))}}.course-card:hover{transform:translateY(-6px);box-shadow:0 16px 48px #00000014}.course-card__bar{display:none}.course-card__body{flex-direction:column;padding:0;display:flex}.course-card__header{align-items:center;gap:12px;margin-bottom:8px;display:flex}.course-card__icon-wrapper{flex-shrink:0;justify-content:center;align-items:center;display:flex}.course-card__emoji{font-size:2.2rem;display:block}.course-card__title{color:var(--color-text);margin:0;font-size:1.15rem;font-weight:700;line-height:1.2}.course-card__desc{color:var(--color-text-secondary);margin-top:0;margin-bottom:20px;font-size:.9rem;line-height:1.6}.course-card__footer{border-top:1px solid var(--color-border);justify-content:space-between;align-items:center;gap:8px;padding:16px 0 0;display:flex}.course-card__tag--sql{color:var(--color-accent);background:#ff6b6b1a;border-radius:10px;padding:4px 12px;font-size:.75rem;font-weight:600}.course-card__tag--python{color:var(--color-python);background:#4ecdc41a;border-radius:10px;padding:4px 12px;font-size:.75rem;font-weight:600}.course-card__tag--thinking{color:var(--color-thinking);background:#f59e0b1a;border-radius:10px;padding:4px 12px;font-size:.75rem;font-weight:600}.course-card__count{color:var(--color-text-secondary);align-items:center;gap:4px;font-size:.8rem;display:flex}.course-card__count:before{content:"📚";font-size:.9rem}.course-card--locked{opacity:.65;position:relative}.course-card--locked:hover{opacity:.85;transform:translateY(-4px);box-shadow:0 12px 32px #0000000f}.course-card--locked .course-card__title{color:var(--color-text-secondary)}.course-card--locked .course-card__desc{opacity:.7}.course-card__lock-badge{color:var(--color-accent);background:#ff6b6b1f;border-radius:12px;padding:6px 12px;font-size:.75rem;font-weight:600}.course-card--featured{background:linear-gradient(135deg,#ffffffe6,#ffffffb3);grid-column:span 2;padding:36px 32px}.course-card--featured .course-card__title{font-size:1.4rem}.course-card--featured .course-card__desc{font-size:1rem}@media (width<=900px){.course-card--featured{grid-column:span 1}}.home{flex-direction:column;gap:48px;display:flex}.home__section{width:100%;max-width:1400px;margin:0 auto}.home__section-title{color:var(--color-text);align-items:center;gap:12px;margin-bottom:40px;font-size:2rem;font-weight:700;display:flex}.home__section-subtitle{color:var(--color-text-secondary);background:var(--color-bg-secondary);border-radius:6px;margin-left:4px;padding:4px 12px;font-size:.85rem;font-weight:500}.home__section-badge{background:#ff6b6b1f;border-radius:12px;justify-content:center;align-items:center;width:40px;height:40px;font-size:1.2rem;display:flex}.home__section-badge--python{background:#4ecdc41f}.home__section-badge--thinking{background:#f59e0b1f}.home__section-badge--project{background:#a78bfa1f}.home__masonry,.home__masonry--thinking{grid-template-columns:repeat(4,1fr);gap:20px;display:grid}@media (width<=1200px){.home__masonry,.home__masonry--thinking{grid-template-columns:repeat(3,1fr)}}@media (width<=900px){.home__masonry,.home__masonry--thinking{grid-template-columns:repeat(2,1fr)}.home__projects-grid{grid-template-columns:1fr}}@media (width<=600px){.home__masonry,.home__masonry--thinking{grid-template-columns:1fr}}.home__roadmap{margin-bottom:0}.roadmap-scroll{scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:16px;padding:8px 0 16px;display:flex;overflow-x:auto}.roadmap-scroll::-webkit-scrollbar{height:6px}.roadmap-scroll::-webkit-scrollbar-track{background:#00000008;border-radius:3px}.roadmap-scroll::-webkit-scrollbar-thumb{background:#0000001f;border-radius:3px}.roadmap-card{text-align:center;scroll-snap-align:start;cursor:pointer;border-radius:10px;flex-direction:column;flex:0 0 180px;align-items:center;gap:6px;padding:24px 16px;text-decoration:none;transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s cubic-bezier(.22,1,.36,1);display:flex}.roadmap-card:hover{transform:translateY(-3px);box-shadow:0 4px 16px #0000001a}.roadmap-card__emoji{margin-bottom:4px;font-size:2rem;display:block}.roadmap-card__title{color:#fff;font-size:.9rem;font-weight:600}.roadmap-card__subtitle{color:#ffffffbf;font-size:.75rem}.home__projects-grid{grid-template-columns:repeat(2,1fr);gap:16px;display:grid}.home-project-card{background:var(--color-card);border:1px solid var(--color-border);color:inherit;border-radius:12px;flex-direction:column;text-decoration:none;transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s cubic-bezier(.22,1,.36,1);display:flex;overflow:hidden}.home-project-card:hover{transform:translateY(-3px);box-shadow:0 6px 24px #00000012}.home-project-card__cover{background:linear-gradient(135deg,#f8f6f3,#ede8e0);height:140px;position:relative;overflow:hidden}.home-project-card__cover img{object-fit:cover;width:100%;height:100%}.home-project-card__iframe{pointer-events:none;transform-origin:0 0;border:none;width:200%;height:200%;transform:scale(.5)}.home-project-card__diff{color:#fff;border-radius:50px;padding:2px 10px;font-size:.7rem;font-weight:600;position:absolute;top:10px;right:10px}.home-project-card__body{flex-direction:column;gap:6px;padding:14px 16px 16px;display:flex}.home-project-card__title{color:var(--color-text);align-items:center;gap:6px;font-size:.95rem;font-weight:700;display:flex}.home-project-card__desc{color:var(--color-text-secondary);-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:.8rem;line-height:1.5;display:-webkit-box;overflow:hidden}.home-project-card__tags{flex-wrap:wrap;gap:5px;margin-top:2px;display:flex}.home-project-card__tag{color:#7c3aed;background:#a78bfa1a;border-radius:50px;padding:2px 8px;font-size:.68rem;font-weight:500}.home__section-badge--project{color:#7c3aed;background:#a78bfa1f}.home__section-more{text-align:left;margin-top:12px}.home__section-more-link{background:linear-gradient(135deg, var(--color-accent), var(--color-python));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:.95rem;font-weight:600;text-decoration:none;transition:opacity .15s}.home__section-more-link:hover{opacity:.8}.home-project-card__lock{background:#0009;border-radius:6px;padding:4px 8px;font-size:1.1rem;position:absolute;top:10px;left:10px}@media (width<=768px){.home__projects-grid{grid-template-columns:1fr}}.progress-bar{align-items:center;gap:12px;display:flex}.progress-bar__label{color:var(--color-text-secondary);white-space:nowrap;font-size:.85rem}.progress-bar__track{background:var(--color-border);border-radius:2px;flex:1;height:4px;overflow:hidden}.progress-bar__fill{background:var(--color-accent);border-radius:2px;height:100%;transition:width .6s cubic-bezier(.22,1,.36,1)}.progress-bar__percent{color:var(--color-accent);text-align:right;min-width:36px;font-size:.85rem;font-weight:600}.sql-overview{flex-direction:column;gap:24px;padding-top:20px;display:flex}.sql-overview__breadcrumb{color:var(--color-text-secondary);margin-bottom:8px;font-size:.9rem}.sql-overview__breadcrumb a{color:var(--color-sql);font-weight:500}.sql-overview__breadcrumb-sep{color:var(--color-border);margin:0 8px}.sql-overview__title{color:var(--color-text);margin-bottom:16px;font-size:1.5rem;font-weight:700}.sql-overview__progress{background:var(--color-card);border-radius:var(--radius-card);border:1px solid var(--color-border);box-shadow:none;border-top:3px solid #ff6b6b;padding:24px}.sql-overview__list{flex-direction:column;gap:12px;display:flex}.sql-overview__card{background:var(--color-card);border-radius:var(--radius-card);border:1px solid var(--color-border);box-shadow:none;transition:transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-fast);border-top:3px solid #ff6b6b;align-items:center;gap:16px;padding:16px 24px;text-decoration:none;display:flex}.sql-overview__card:hover{border-color:#00000014;transform:translateY(-2px);box-shadow:0 2px 8px #0000000f}.sql-overview__card-num{color:#ff6b6b;text-align:center;min-width:32px;font-size:1.5rem;font-weight:700}.sql-overview__card-icon{justify-content:center;align-items:center;min-width:40px;display:flex}.sql-overview__card-emoji{font-size:1.5rem}.sql-overview__card-info{flex:1}.sql-overview__card-title{color:var(--color-text);margin-bottom:2px;font-size:1.05rem;font-weight:600}.sql-overview__card-points{color:var(--color-text-secondary);font-size:.8rem}.sql-overview__card-badge{text-align:center;min-width:24px;font-size:1rem;font-weight:700}.sql-overview__card-badge--completed{color:var(--color-python)}.sql-overview__card-badge--in_progress{color:#ff6b6b}.sql-overview__card--completed{opacity:.85}@media (width<=768px){.sql-overview__card{gap:12px;padding:12px 16px}}.python-overview{flex-direction:column;gap:24px;padding-top:20px;display:flex}.python-overview__breadcrumb{color:var(--color-text-secondary);margin-bottom:8px;font-size:.9rem}.python-overview__breadcrumb a{color:var(--color-python);font-weight:500}.python-overview__breadcrumb-sep{color:var(--color-border);margin:0 8px}.python-overview__title{color:var(--color-text);margin-bottom:16px;font-size:1.5rem;font-weight:700}.python-overview__progress{background:var(--color-card);border-radius:var(--radius-card);border:1px solid var(--color-border);box-shadow:none;border-top:3px solid #4ecdc4;padding:24px}.python-overview__list{flex-direction:column;gap:12px;display:flex}.python-overview__card{background:var(--color-card);border-radius:var(--radius-card);border:1px solid var(--color-border);box-shadow:none;transition:transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-fast);border-top:3px solid #4ecdc4;align-items:center;gap:16px;padding:16px 24px;text-decoration:none;display:flex}.python-overview__card:hover{border-color:#00000014;transform:translateY(-2px);box-shadow:0 2px 8px #0000000f}.python-overview__card-num{color:var(--color-python);text-align:center;min-width:32px;font-size:1.5rem;font-weight:700}.python-overview__card-icon{justify-content:center;align-items:center;min-width:40px;display:flex}.python-overview__card-emoji{font-size:1.5rem}.python-overview__card-info{flex:1}.python-overview__card-title{color:var(--color-text);margin-bottom:2px;font-size:1.05rem;font-weight:600}.python-overview__card-points{color:var(--color-text-secondary);font-size:.8rem}.python-overview__card-badge{text-align:center;min-width:24px;font-size:1rem;font-weight:700}.python-overview__card-badge--completed{color:var(--color-python)}.python-overview__card-badge--in_progress{color:#4ecdc4}.python-overview__card--completed{opacity:.85}@media (width<=768px){.python-overview__card{gap:12px;padding:12px 16px}}.thinking-overview{flex-direction:column;gap:24px;padding-top:20px;display:flex}.thinking-overview__breadcrumb{color:var(--color-text-secondary);margin-bottom:8px;font-size:.9rem}.thinking-overview__breadcrumb a{color:#d97706;font-weight:500}.thinking-overview__breadcrumb-sep{color:var(--color-border);margin:0 8px}.thinking-overview__title{color:var(--color-text);margin-bottom:16px;font-size:1.5rem;font-weight:700}.thinking-overview__progress{background:var(--color-card);border-radius:var(--radius-card);border:1px solid var(--color-border);box-shadow:none;border-top:3px solid #f59e0b;padding:24px}.thinking-overview__list{flex-direction:column;gap:12px;display:flex}.thinking-overview__card{background:var(--color-card);border-radius:var(--radius-card);border:1px solid var(--color-border);box-shadow:none;transition:transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-fast);border-top:3px solid #f59e0b;align-items:center;gap:16px;padding:16px 24px;text-decoration:none;display:flex}.thinking-overview__card:hover{border-color:#00000014;transform:translateY(-2px);box-shadow:0 2px 8px #0000000f}.thinking-overview__card-num{color:#d97706;text-align:center;min-width:32px;font-size:1.5rem;font-weight:700}.thinking-overview__card-icon{justify-content:center;align-items:center;min-width:40px;display:flex}.thinking-overview__card-emoji{font-size:1.5rem}.thinking-overview__card-info{flex:1}.thinking-overview__card-title{color:var(--color-text);margin-bottom:2px;font-size:1.05rem;font-weight:600}.thinking-overview__card-points{color:var(--color-text-secondary);font-size:.8rem}.thinking-overview__card-badge{text-align:center;min-width:24px;font-size:1rem;font-weight:700}.thinking-overview__card-badge--completed{color:var(--color-python)}.thinking-overview__card-badge--in_progress{color:#f59e0b}.thinking-overview__card--completed{opacity:.85}@media (width<=768px){.thinking-overview__card{gap:12px;padding:12px 16px}}.progress-page{max-width:720px;margin:0 auto;padding:0 0 48px}.progress-page__ring-section{text-align:center;margin-bottom:40px}.progress-page__ring-svg{justify-content:center;margin:0 auto 16px;display:flex}.progress-page__ring-circle{transition:stroke-dashoffset .5s}.progress-page__ring-text{fill:var(--color-text);font-size:26px;font-weight:700;font-family:var(--font-main)}.progress-page__ring-sub{fill:var(--color-text-secondary);font-size:11px;font-family:var(--font-main);font-weight:400}.progress-page__label{color:var(--color-text-secondary);margin-bottom:4px;font-size:.95rem}.progress-page__days{color:var(--color-sql);font-size:1.1rem;font-weight:600}.progress-page__section{margin-bottom:32px}.progress-page__section-title{border-bottom:2px solid var(--color-border);margin-bottom:12px;padding-bottom:8px;font-size:1.2rem;font-weight:600}.progress-page__section-title--sql{color:var(--color-sql)}.progress-page__section-title--python{color:var(--color-python)}.progress-page__list{flex-direction:column;gap:6px;display:flex}.progress-page__item{background:var(--color-card);border-radius:var(--radius-tag);transition:transform var(--transition-fast), box-shadow var(--transition-fast);border:1px solid var(--color-border);color:inherit;align-items:center;gap:10px;padding:12px 16px;text-decoration:none;display:flex}.progress-page__item:hover{transform:translate(4px);box-shadow:0 2px 8px #0000000f}.progress-page__item--completed{border-left:3px solid var(--color-python)}.progress-page__item--in_progress{border-left:3px solid var(--color-sql)}.progress-page__item-icon{justify-content:center;align-items:center;margin-right:12px;display:flex}.progress-page__item-emoji{font-size:1.2rem}.progress-page__item-name{flex:1;font-weight:500}.progress-page__badge{border-radius:20px;padding:4px 10px;font-size:.78rem;font-weight:600}.progress-page__badge--not_started{color:var(--color-text-secondary);background:#f5f0eb}.progress-page__badge--in_progress{color:var(--color-sql);background:#a78bfa26}.progress-page__badge--completed{color:var(--color-python);background:#4ecdc426}.progress-page__reset{text-align:center;border-top:1px solid var(--color-border);margin-top:32px;padding-top:24px}.progress-page__reset-warning{color:var(--color-accent);margin-bottom:8px;font-weight:600}.progress-page__reset-btn{border:2px solid var(--color-accent);color:var(--color-accent);border-radius:var(--radius-tag);cursor:pointer;transition:all var(--transition-fast);background:0 0;padding:8px 24px;font-family:inherit;font-size:.9rem;font-weight:600}.progress-page__reset-btn:hover{background:var(--color-accent);color:#fff}pre code.hljs{padding:1em;display:block;overflow-x:auto}code.hljs{padding:3px 5px}.hljs{color:#abb2bf;background:#282c34}.hljs-comment,.hljs-quote{color:#5c6370;font-style:italic}.hljs-doctag,.hljs-keyword,.hljs-formula{color:#c678dd}.hljs-section,.hljs-name,.hljs-selector-tag,.hljs-deletion,.hljs-subst{color:#e06c75}.hljs-literal{color:#56b6c2}.hljs-string,.hljs-regexp,.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string{color:#98c379}.hljs-attr,.hljs-variable,.hljs-template-variable,.hljs-type,.hljs-selector-class,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-number{color:#d19a66}.hljs-symbol,.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-title{color:#61aeee}.hljs-built_in,.hljs-title.class_,.hljs-class .hljs-title{color:#e6c07b}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}.funnel-chart{max-width:400px;font-family:var(--font-main);background:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius-card);margin:24px auto;padding:20px 24px}.funnel-step__row{align-items:center;gap:10px;padding:8px 0;display:flex}.funnel-step__dot{background:0 0;border:2px solid #6366f1;border-radius:50%;flex-shrink:0;width:10px;height:10px}.funnel-step__label{color:var(--color-text);flex:1;font-size:.9rem;font-weight:500}.funnel-step__pct{color:var(--color-text-secondary);font-variant-numeric:tabular-nums;font-size:.88rem;font-weight:600}.funnel-step__connector{align-items:center;gap:8px;padding-left:4px;display:flex}.funnel-step__line{background:var(--color-border);width:1px;height:16px;margin-left:1px}.funnel-step__conv{color:var(--color-text-secondary);background:#00000008;border-radius:3px;padding:2px 8px;font-size:.75rem}.tutorial-content{color:var(--color-text);overflow-wrap:break-word;word-break:break-word;font-size:1rem;line-height:1.8}.tutorial-content h1{border-bottom:2px solid var(--color-border);color:var(--color-text);margin:0 0 16px;padding-bottom:12px;font-size:1.8rem;font-weight:700}.tutorial-content h2{color:var(--color-text);margin:32px 0 12px;font-size:1.4rem;font-weight:600}.tutorial-content h3{color:#444;margin:24px 0 8px;font-size:1.15rem;font-weight:600}.tutorial-content h4{color:#555;margin:20px 0 8px;font-size:1.05rem;font-weight:600}.tutorial-content p{margin:12px 0}.tutorial-content ul,.tutorial-content ol{list-style:revert;margin:12px 0;padding-left:24px}.tutorial-content li{margin:6px 0}.tutorial-content blockquote{border-left:4px solid var(--color-sql);color:var(--color-text-secondary);background:#a78bfa0f;border-radius:0 8px 8px 0;margin:16px 0;padding:12px 16px;font-style:italic}.tutorial-content table{border-collapse:collapse;width:100%;margin:16px 0;font-size:.9rem}.tutorial-content th,.tutorial-content td{border:1px solid var(--color-border);text-align:left;word-break:break-word;overflow-wrap:break-word;padding:8px 12px}.tutorial-content th{background:#f5f0eb;font-weight:600}.tutorial-content hr{border:none;border-top:1px solid var(--color-border);margin:24px 0}.tutorial-content strong{color:#222;font-weight:600}.tutorial-content a{color:var(--color-accent);text-decoration:underline}.tutorial-inline-code{font-family:var(--font-code);color:var(--color-text);background:#f0ebe4;border-radius:4px;padding:2px 6px;font-size:.88em}.code-block-wrapper{border-radius:var(--radius-btn);background:#1e1e2e;margin:16px 0;position:relative;overflow:hidden}.code-block-header{background:#ffffff0f;border-bottom:1px solid #ffffff1a;justify-content:space-between;align-items:center;padding:6px 12px;display:flex}.code-block-header-left{align-items:center;gap:10px;display:flex}.code-block-header-right{align-items:center;gap:8px;display:flex}.code-block-lang{color:#9ca3af;font-size:.75rem;font-family:var(--font-code);text-transform:uppercase}.code-block-difficulty{border-radius:10px;padding:2px 8px;font-size:.7rem;font-weight:500}.code-block-difficulty--basic{color:#86efac;background:#22c55e33}.code-block-difficulty--intermediate{color:#fcd34d;background:#f59e0b33}.code-block-difficulty--advanced{color:#fca5a5;background:#ef444433}.code-block-try-btn,.code-block-copy-btn{color:#e5e7eb;cursor:pointer;transition:all var(--transition-fast);background:0 0;border:1px solid #fff3;border-radius:6px;padding:4px 12px;font-family:inherit;font-size:.8rem}.code-block-try-btn:hover{background:var(--color-accent);border-color:var(--color-accent);color:#fff}.code-block-copy-btn:hover{background:#ffffff1a}.code-block-wrapper pre{margin:0;padding:16px;overflow-x:auto;background:0 0!important}.code-block-wrapper code{font-family:var(--font-code);font-size:.88rem;background:0 0!important;padding:0!important}.tutorial-content pre{background:0 0;margin:0;padding:0}.collapsible-code-block{border-radius:var(--radius-btn);background:#1e1e2e;margin:16px 0}.collapsible-code-block__summary{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background var(--transition-fast);background:#ffffff0f;border-bottom:1px solid #ffffff1a;align-items:center;padding:10px 16px;display:flex}.collapsible-code-block__summary:hover{background:#ffffff1a}.collapsible-code-block__icon{color:#9ca3af;margin-right:10px;font-size:.75rem}.collapsible-code-block__title{color:#e5e7eb;font-size:.9rem;font-weight:500}.collapsible-code-block__content{padding:0}.collapsible-code-block__content .code-block-wrapper{border-radius:0;margin:0}.tutorial-details{border:1px solid var(--color-border);border-radius:var(--radius-btn);background:#ffffff80;margin:16px 0}.tutorial-summary{cursor:pointer;color:var(--color-text);align-items:center;gap:8px;padding:12px 16px;font-weight:600;list-style:none;display:flex}.tutorial-summary::-webkit-details-marker{display:none}.tutorial-summary:before{content:"▶";transition:transform var(--transition-fast);font-size:.75rem}.tutorial-details[open] .tutorial-summary:before{transform:rotate(90deg)}.tutorial-details .tutorial-content{padding:0 16px 16px}.tutorial-details table{margin:8px 0}.tutorial-details pre{background:#f5f0eb;border-radius:6px;padding:12px;overflow-x:auto}.sql-playground{font-family:var(--font-main);flex-direction:column;gap:12px;display:flex}.sql-playground--loading{color:var(--color-text-secondary);justify-content:center;align-items:center;padding:40px}.sql-playground__spinner{border:3px solid var(--color-border);border-top-color:var(--color-sql);border-radius:50%;width:32px;height:32px;margin-bottom:12px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.sql-playground__editor-area{flex-direction:column;gap:8px;display:flex}.sql-playground__editor{border-radius:var(--radius-btn);border:1px solid #333;overflow:hidden}.sql-playground__run-btn{background:var(--color-accent);color:#fff;border-radius:var(--radius-tag);cursor:pointer;transition:background var(--transition-fast);border:none;align-self:flex-end;padding:10px 24px;font-family:inherit;font-size:.95rem;font-weight:600}.sql-playground__run-btn:hover:not(:disabled){background:#e55a5a}.sql-playground__run-btn:disabled{opacity:.6;cursor:not-allowed}.sql-playground__result{border-radius:var(--radius-tag);padding:12px;font-size:.85rem;position:relative;overflow-x:auto}.sql-playground__result--success{border:2px solid var(--color-python);background:#4ecdc40d}.sql-playground__result--error{border:2px solid var(--color-accent);background:#ff6b6b0d}.sql-playground__error-msg{color:var(--color-accent);font-family:var(--font-code);white-space:pre-wrap;margin:0;font-size:.85rem}.sql-playground__empty{color:var(--color-text-secondary);margin:0;font-style:italic}.sql-playground__table-wrap{max-height:300px;overflow:auto}.sql-playground__table{border-collapse:collapse;width:100%;font-family:var(--font-code);font-size:.82rem}.sql-playground__table th,.sql-playground__table td{text-align:left;border-bottom:1px solid var(--color-border);white-space:nowrap;padding:8px 12px}.sql-playground__table th{color:var(--color-text);z-index:2;background:#ede7e0;border-bottom:2px solid #d5cdc4;font-weight:600;position:sticky;top:0}.sql-playground__table td{color:var(--color-text);background:var(--color-card)}.sql-playground__table tr:hover td{background:#a78bfa14}.sql-playground__row-count{color:var(--color-text-secondary);text-align:right;margin:8px 0 0;font-size:.78rem}.python-playground{font-family:var(--font-main);flex-direction:column;gap:12px;display:flex}.python-playground--loading{color:var(--color-text-secondary);justify-content:center;align-items:center;padding:40px}.python-playground__spinner{border:3px solid var(--color-border);border-top-color:var(--color-python);border-radius:50%;width:32px;height:32px;margin-bottom:12px;animation:.8s linear infinite spin}.python-playground__editor-area{flex-direction:column;gap:8px;display:flex}.python-playground__editor{border-radius:var(--radius-btn);border:1px solid #333;overflow:hidden}.python-playground__run-btn{color:#fff;border-radius:var(--radius-tag);cursor:pointer;transition:background var(--transition-fast);background:#43e97b;border:none;align-self:flex-end;padding:10px 24px;font-family:inherit;font-size:.95rem;font-weight:600}.python-playground__run-btn:hover:not(:disabled){background:#38d7ae}.python-playground__run-btn:disabled{opacity:.6;cursor:not-allowed}.python-playground__result{border-radius:var(--radius-tag);padding:12px;font-size:.85rem;position:relative;overflow-x:auto}.python-playground__result--success{border:2px solid var(--color-python);background:#4ecdc40d}.python-playground__result--error{border:2px solid var(--color-accent);background:#ff6b6b0d}.python-playground__error-msg{color:var(--color-accent);font-family:var(--font-code);white-space:pre-wrap;margin:0;font-size:.85rem}.python-playground__empty{color:var(--color-text-secondary);margin:0;font-style:italic}.python-playground__output{font-family:var(--font-code);color:var(--color-text);white-space:pre-wrap;word-break:break-word;max-height:300px;margin:0;font-size:.85rem;overflow-y:auto}.python-playground__loading-hint{color:var(--color-text-secondary);margin-top:4px;font-size:.8rem}.paywall-overlay{z-index:1000;background:#00000080;justify-content:center;align-items:center;animation:.3s paywall-fade-in;display:flex;position:fixed;inset:0}@keyframes paywall-fade-in{0%{opacity:0}to{opacity:1}}.paywall-card{background:var(--color-card);border-radius:var(--radius-card);text-align:center;width:100%;max-width:400px;padding:40px 32px 32px;animation:.3s paywall-card-in;position:relative}@keyframes paywall-card-in{0%{opacity:0;transform:translateY(12px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}.paywall-card__close{color:var(--color-text-secondary);border-radius:var(--radius-tag);transition:color var(--transition-fast), background var(--transition-fast);background:0 0;padding:4px 8px;font-size:1.1rem;position:absolute;top:14px;right:16px}.paywall-card__close:hover{color:var(--color-text);background:var(--color-border)}.paywall-card__icon{margin-bottom:16px;font-size:48px;line-height:1}.paywall-card__title{color:var(--color-text);margin-bottom:6px;font-size:1.35rem;font-weight:700}.paywall-card__subtitle{color:var(--color-text-secondary);margin-bottom:20px;font-size:.9rem}.paywall-card__price{justify-content:center;align-items:baseline;gap:8px;margin-bottom:24px;display:flex}.paywall-card__price-label{color:#ef4444;background:#ef44441a;border-radius:4px;padding:2px 8px;font-size:.85rem;font-weight:600}.paywall-card__price-value{color:var(--color-text);font-size:2.2rem;font-weight:800;line-height:1.2}.paywall-card__price-original{color:var(--color-text-secondary);font-size:1rem;text-decoration:line-through}.paywall-card__price-note{color:var(--color-text-secondary);margin-top:4px;font-size:.8rem;display:block}.paywall-card__actions{flex-direction:column;gap:12px;margin-bottom:20px;display:flex}.paywall-card__btn{border-radius:var(--radius-btn);width:100%;transition:transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);cursor:pointer;border:none;justify-content:center;align-items:center;gap:8px;padding:12px 0;font-size:.95rem;font-weight:600;text-decoration:none;display:inline-flex}.paywall-card__btn--xhs{color:#fff;background:linear-gradient(135deg,#ff2442 0%,#ff6b6b 100%)}.paywall-card__btn--xhs:hover{transform:translateY(-1px);box-shadow:0 4px 16px #ff244259}.paywall-card__btn-icon{font-size:1.1rem}.paywall-card__btn--primary{color:#fff;background:#6366f1}.paywall-card__btn--primary:hover{transform:translateY(-1px);box-shadow:0 3px 12px #6366f140}.paywall-card__btn--secondary{border:1.5px solid var(--color-border);color:var(--color-text-secondary);background:0 0}.paywall-card__btn--secondary:hover{color:#6366f1;border-color:#818cf8}.paywall-card__footer-text{color:var(--color-text-secondary);font-size:.75rem;line-height:1.5}@media (width<=480px){.paywall-card{margin:0 12px;padding:32px 20px 24px}.paywall-card__icon{font-size:40px}.paywall-card__price-value{font-size:1.8rem}}.detail-page{flex-direction:column;gap:16px;display:flex}.detail-page__progress-bar{z-index:1000;background:#0000001a;height:4px;position:fixed;top:0;left:0;right:0}.detail-page__progress-fill{background:linear-gradient(90deg,#a78bfa,#4ecdc4);height:100%;transition:width .1s ease-out}.detail-page__progress-text{color:var(--color-text-secondary);background:var(--color-card);z-index:1001;border-radius:10px;padding:2px 8px;font-size:.75rem;position:fixed;top:8px;right:16px;box-shadow:0 1px 3px #0000001a}.detail-page__breadcrumb{color:var(--color-text-secondary);font-size:.9rem}.detail-page__breadcrumb a{color:var(--color-accent);transition:opacity var(--transition-fast);font-weight:500}.detail-page__breadcrumb a:hover{opacity:.8}.detail-page__breadcrumb-sep{color:var(--color-border);margin:0 8px}.detail-page__overview{background:var(--color-card);border-radius:var(--radius-card);border:1px solid var(--color-border);box-shadow:none;width:100%;max-width:900px;margin:0 auto;padding:20px 24px}.detail-page__overview-header{border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;display:flex}.detail-page__overview-title{color:var(--color-text);margin:0;font-size:1.1rem;font-weight:700}.detail-page__overview-meta{align-items:center;gap:12px;display:flex}.detail-page__difficulty{color:#fff;border-radius:12px;padding:4px 12px;font-size:.8rem;font-weight:600}.detail-page__time{color:var(--color-text-secondary);font-size:.85rem}.detail-page__overview-body{grid-template-columns:1fr 1fr;gap:24px;display:grid}@media (width<=768px){.detail-page__overview-body{grid-template-columns:1fr}}.detail-page__goals,.detail-page__points{min-width:0}.detail-page__goals-title,.detail-page__points-title{color:var(--color-text);margin:0 0 10px;font-size:.95rem;font-weight:600}.detail-page__goals-list{margin:0;padding-left:20px;list-style:outside}.detail-page__goals-list li{color:var(--color-text-secondary);margin:6px 0;font-size:.9rem;line-height:1.5}.detail-page__points-tags{flex-wrap:wrap;gap:8px;display:flex}.detail-page__point-tag{color:#7c3aed;background:#a78bfa1a;border:1px solid #a78bfa33;border-radius:16px;padding:5px 12px;font-size:.82rem;display:inline-block}.detail-page__content{max-width:100%;display:block}.detail-page__main{flex-direction:column;gap:16px;max-width:900px;margin:0 auto;display:flex}.detail-page__header{background:var(--color-card);border-radius:var(--radius-card);border:1px solid var(--color-border);box-shadow:none;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:16px 24px;display:flex}.detail-page__title{color:var(--color-text);align-items:center;gap:8px;margin:0;font-size:1.3rem;font-weight:700;display:flex}.detail-page__emoji{font-size:1.5rem}.detail-page__actions{align-items:center;gap:12px;display:flex}.detail-page__complete-btn{background:var(--color-python);color:#fff;border-radius:var(--radius-tag);cursor:pointer;transition:opacity var(--transition-fast);border:none;padding:8px 20px;font-family:inherit;font-size:.9rem;font-weight:600}.detail-page__complete-btn:hover{opacity:.85}.detail-page__complete-btn--done{background:var(--color-text-secondary)}.detail-page__nav{gap:8px;display:flex}.detail-page__nav-btn{border:1px solid var(--color-border);border-radius:var(--radius-tag);color:var(--color-text);transition:background var(--transition-fast);background:#f5f0eb;padding:6px 14px;font-family:inherit;font-size:.85rem}.detail-page__nav-btn:hover{background:#ede7e0}.detail-page__tutorial{background:var(--color-card);border-radius:var(--radius-card);border:1px solid var(--color-border);box-shadow:none;padding:24px}.detail-page__loading{min-height:200px;color:var(--color-text-secondary);flex-direction:column;justify-content:center;align-items:center;gap:12px;font-size:.95rem;display:flex}.detail-page__loading-spinner{border:3px solid var(--color-border);border-top-color:var(--color-accent);border-radius:50%;width:32px;height:32px;animation:.8s linear infinite spin}.detail-page__toc-fab{background:var(--color-card);border:1px solid var(--color-border);cursor:pointer;z-index:100;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;font-size:1.5rem;transition:all .2s;display:flex;position:fixed;bottom:90px;left:20px;box-shadow:0 2px 12px #00000026}.detail-page__toc-fab:hover{transform:scale(1.1);box-shadow:0 4px 16px #0003}.detail-page__toc-panel{background:var(--color-card);border-radius:var(--radius-card);border:1px solid var(--color-border);z-index:101;flex-direction:column;width:300px;max-height:70vh;animation:.2s ease-out slideUp;display:flex;position:fixed;bottom:80px;left:20px;box-shadow:0 4px 20px #0003}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.detail-page__toc-panel-header{border-bottom:1px solid var(--color-border);background:var(--color-bg);flex-shrink:0;justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.detail-page__toc-title{color:var(--color-text);margin:0;font-size:.95rem;font-weight:600}.detail-page__toc-close{cursor:pointer;color:var(--color-text-secondary);background:0 0;border:none;padding:4px;font-size:1.2rem;line-height:1;transition:color .2s}.detail-page__toc-close:hover{color:var(--color-text)}.detail-page__toc-panel .detail-page__toc-list{scrollbar-width:thin;scrollbar-color:var(--color-border) transparent;flex:1;padding:8px 12px;overflow:hidden auto}.detail-page__toc-panel .detail-page__toc-list::-webkit-scrollbar{width:6px}.detail-page__toc-panel .detail-page__toc-list::-webkit-scrollbar-track{background:0 0}.detail-page__toc-panel .detail-page__toc-list::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:3px}.detail-page__toc-panel .detail-page__toc-item{white-space:normal;text-overflow:clip;word-wrap:break-word;padding:8px 10px;font-size:.85rem;line-height:1.4;overflow:visible}.detail-page__toc-panel .detail-page__toc-item--h3{padding-left:20px;font-size:.8rem}.detail-page__sidebar{display:none}.detail-page__toc{background:var(--color-card);border-radius:var(--radius-card);border:1px solid var(--color-border);box-shadow:none;padding:16px}.detail-page__toc-title{color:var(--color-text);border-bottom:1px solid var(--color-border);margin:0 0 12px;padding-bottom:10px;font-size:.95rem;font-weight:600}.detail-page__toc-list{flex-direction:column;gap:2px;display:flex}.detail-page__toc-item{color:var(--color-text-secondary);cursor:pointer;white-space:nowrap;text-overflow:ellipsis;border-left:3px solid #0000;border-radius:6px;padding:8px 12px;font-size:.85rem;text-decoration:none;transition:all .15s;display:block;overflow:hidden}.detail-page__toc-item:hover{color:var(--color-text);background:#a78bfa0f}.detail-page__toc-item--active{color:#7c3aed;background:#a78bfa14;border-left-color:#7c3aed;font-weight:600}.detail-page__toc-item--h3{padding-left:24px;font-size:.8rem}.detail-page__fab{z-index:900;color:#fff;cursor:pointer;transition:transform var(--transition-fast), box-shadow var(--transition-fast);border:none;border-radius:6px;align-items:center;gap:8px;padding:12px 20px;font-family:inherit;font-size:.9rem;font-weight:600;display:flex;position:fixed}.detail-page__fab:hover{transform:translateY(-2px)}.detail-page__fab-icon{font-size:.85rem}.detail-page__fab-label{white-space:nowrap}.detail-page__fab{background:#ff6b6b;bottom:32px;right:24px;box-shadow:0 2px 8px #ff6b6b40}.detail-page__fab:hover{box-shadow:0 4px 16px #ff6b6b4d}.detail-page__fab--python{background:#4ecdc4;box-shadow:0 2px 8px #4ecdc440}.detail-page__fab--python:hover{box-shadow:0 4px 16px #4ecdc44d}.detail-page__practice-panel{z-index:900;background:var(--color-card);border-radius:var(--radius-card);border:1px solid var(--color-border);width:520px;max-height:70vh;box-shadow:none;flex-direction:column;animation:.25s ease-out panel-in;display:flex;position:fixed;bottom:32px;right:24px}@keyframes panel-in{0%{opacity:0;transform:translateY(16px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}.detail-page__practice-panel-header{border-bottom:1px solid var(--color-border);flex-shrink:0;justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.detail-page__practice-panel-title{color:var(--color-text);font-size:.95rem;font-weight:600}.detail-page__practice-panel-close{color:var(--color-text-secondary);cursor:pointer;border-radius:var(--radius-tag);transition:background var(--transition-fast), color var(--transition-fast);background:0 0;border:none;padding:4px 8px;font-size:1.1rem}.detail-page__practice-panel-close:hover{color:var(--color-text);background:#0000000f}.detail-page__practice-panel-body{flex:1;padding:12px;overflow-y:auto}.confetti-overlay{pointer-events:none;z-index:9999;width:100vw;height:100vh;animation:1.5s ease-out forwards confetti;position:fixed;top:0;left:0}@keyframes confetti{0%{opacity:1;background:radial-gradient(circle,#ff6b6b26,#0000 60%)}to{opacity:0;background:0 0}}@media (width<=1100px){.detail-page__sidebar{display:none}}.detail-page__bottom-nav{border-top:1px solid var(--color-border);justify-content:space-between;gap:16px;margin-top:40px;padding-top:24px;display:flex}.detail-page__bottom-nav-btn{border:1px solid var(--color-border);border-radius:var(--radius-card);transition:all var(--transition-fast);background:#f8f5f2;flex-direction:column;flex:1;gap:4px;padding:16px 20px;text-decoration:none;display:flex}.detail-page__bottom-nav-btn:hover{border-color:var(--color-python);background:#f0ebe5}.detail-page__bottom-nav-btn--prev{text-align:left;align-items:flex-start}.detail-page__bottom-nav-btn--next{text-align:right;align-items:flex-end}.detail-page__bottom-nav-btn--disabled{visibility:hidden;flex:1}.detail-page__bottom-nav-label{color:var(--color-text-secondary);font-size:.75rem}.detail-page__bottom-nav-title{color:var(--color-text);font-size:1rem;font-weight:600}@media (width<=900px){.detail-page__tutorial{padding:16px}.detail-page__header{flex-direction:column;align-items:flex-start}.detail-page__nav{justify-content:space-between;width:100%}.detail-page__bottom-nav{flex-direction:column;gap:12px}.detail-page__bottom-nav-btn--prev,.detail-page__bottom-nav-btn--next{text-align:left;align-items:flex-start}.detail-page__practice-panel{width:auto;max-height:60vh;bottom:12px;left:12px;right:12px}.detail-page__fab{bottom:16px;right:16px}}.purchase{flex-direction:column;gap:48px;padding-bottom:64px;display:flex}.purchase__breadcrumb{color:var(--color-text-secondary);align-items:center;gap:6px;font-size:.85rem;display:flex}.purchase__breadcrumb a{color:var(--color-accent);transition:opacity var(--transition-fast)}.purchase__breadcrumb a:hover{opacity:.8}.purchase__breadcrumb-sep{color:var(--color-border)}.purchase__hero{text-align:center;padding:32px 0 0}.purchase__hero-title{color:var(--color-text);margin-bottom:8px;font-size:2.2rem;font-weight:700}.purchase__hero-subtitle{color:var(--color-text-secondary);font-size:1.1rem}.purchase__value-cards{grid-template-columns:repeat(3,1fr);gap:20px;display:grid}.purchase__value-card{background:var(--color-card);border-radius:var(--radius-card);border:1px solid var(--color-border);box-shadow:none;text-align:center;transition:transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);padding:28px 24px}.purchase__value-card:hover{border-color:#00000014;transform:translateY(-3px);box-shadow:0 2px 8px #0000000f}.purchase__value-icon{margin-bottom:12px;font-size:2rem;display:block}.purchase__value-title{margin-bottom:6px;font-size:1.05rem;font-weight:600}.purchase__value-desc{color:var(--color-text-secondary);font-size:.85rem}.purchase__pricing{justify-content:center;display:flex}.purchase__pricing-card{background:var(--color-card);border-radius:var(--radius-lg);border:1px solid var(--color-border);box-shadow:none;text-align:center;width:100%;max-width:480px;padding:40px 36px;position:relative;overflow:hidden}.purchase__pricing-card:before{content:"";background:var(--color-accent);height:3px;position:absolute;top:0;left:0;right:0}.purchase__pricing-badge{border-radius:var(--radius-pill);background:var(--color-accent);color:#fff;margin-bottom:20px;padding:4px 16px;font-size:.8rem;font-weight:600;display:inline-block}.purchase__price-row{justify-content:center;align-items:baseline;gap:10px;margin-bottom:24px;display:flex}.purchase__price{color:var(--color-accent);font-size:3rem;font-weight:700;line-height:1}.purchase__price-original{color:var(--color-text-secondary);font-size:1.1rem;text-decoration:line-through}.purchase__includes{text-align:left;margin-bottom:28px}.purchase__includes-item{border-bottom:1px solid var(--color-border);padding:8px 0;font-size:.9rem}.purchase__includes-item:last-child{border-bottom:none}.purchase__buy-btn{border-radius:var(--radius-btn);color:#fff;background:var(--color-accent);box-shadow:none;cursor:pointer;border:none;justify-content:center;align-items:center;gap:8px;width:100%;padding:14px 40px;font-size:1.05rem;font-weight:600;text-decoration:none;transition:transform .15s,box-shadow .15s;display:inline-flex}.purchase__buy-btn:hover{transform:translateY(-1px);box-shadow:0 3px 12px #ff6b6b40}.purchase__buy-btn--xhs{background:linear-gradient(135deg,#ff2442 0%,#ff6b6b 100%)}.purchase__buy-btn--xhs:hover{box-shadow:0 4px 16px #ff244259}.purchase__buy-btn-icon{font-size:1.2rem}.purchase__channels{border-top:1px dashed var(--color-border);flex-direction:column;gap:14px;margin-top:24px;padding-top:20px;display:flex}.purchase__channel{justify-content:space-between;align-items:center;font-size:.9rem;display:flex}.purchase__channel-name{font-weight:600}.purchase__channel-link{color:var(--color-accent);transition:opacity var(--transition-fast);font-weight:500}.purchase__channel-link:hover{opacity:.8}.purchase__channel-desc{color:var(--color-text-secondary);font-size:.85rem}.purchase__flow{border-top:1px dashed var(--color-border);text-align:left;margin-top:28px;padding-top:24px}.purchase__flow-title{color:var(--color-text);margin-bottom:16px;font-size:.95rem;font-weight:600}.purchase__flow-steps{flex-direction:column;gap:12px;display:flex}.purchase__flow-step{align-items:center;gap:12px;display:flex}.purchase__flow-step-num{color:#fff;background:linear-gradient(135deg,#ff2442 0%,#ff6b6b 100%);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;font-size:.85rem;font-weight:600;display:flex}.purchase__flow-step-text{color:var(--color-text-secondary);font-size:.9rem;line-height:1.4}.purchase__activation{width:100%;max-width:480px;margin:0 auto}.purchase__activation-title{text-align:center;margin-bottom:16px;font-size:1rem;font-weight:600}.purchase__activation-form{gap:10px;display:flex}.purchase__activation-input{border:2px solid var(--color-border);border-radius:var(--radius-btn);font-size:.95rem;font-family:var(--font-code);transition:border-color var(--transition-fast);outline:none;flex:1;padding:12px 16px}.purchase__activation-input:focus{border-color:var(--color-accent)}.purchase__activation-btn{border-radius:var(--radius-btn);color:#fff;background:var(--color-accent);padding:12px 28px;font-size:.95rem;font-weight:600;transition:opacity .15s}.purchase__activation-btn:hover{opacity:.9}.purchase__activation-result{border-radius:var(--radius-tag);text-align:center;margin-top:12px;padding:10px 16px;font-size:.9rem}.purchase__activation-result--success{color:#2f855a;background:#48bb781f}.purchase__activation-result--error{color:#c53030;background:#ff6b6b1f}.purchase__faq{width:100%;max-width:600px;margin:0 auto}.purchase__faq-title{margin-bottom:20px;font-size:1.2rem;font-weight:600}.purchase__faq-item{border-bottom:1px solid var(--color-border);padding:16px 0}.purchase__faq-item:last-child{border-bottom:none}.purchase__faq-question{margin-bottom:6px;font-size:.95rem;font-weight:600}.purchase__faq-answer{color:var(--color-text-secondary);font-size:.9rem}@media (width<=768px){.purchase__value-cards{grid-template-columns:1fr}.purchase__hero-title{font-size:1.6rem}.purchase__pricing-card{padding:28px 20px}.purchase__price{font-size:2.4rem}.purchase__activation-form{flex-direction:column}.purchase__activation-btn{width:100%}.purchase__flow-step{gap:8px}.purchase__flow-step-num{width:24px;height:24px;font-size:.8rem}.purchase__flow-step-text{font-size:.85rem}}.quiz-card{background:var(--color-card);border-radius:var(--radius-card);cursor:pointer;border:1px solid var(--color-border);box-shadow:none;padding:16px;transition:box-shadow .15s,transform .15s,border-color .15s}.quiz-card:hover{border-color:#00000014;transform:translateY(-2px);box-shadow:0 2px 8px #0000000f}.quiz-card--correct{border-color:#43a047}.quiz-card--wrong{border-color:#e53935}.quiz-card__header{flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px;display:flex}.quiz-card__index{color:var(--color-accent);font-size:.85rem;font-weight:700}.quiz-card__diff{border-radius:var(--radius-pill);padding:2px 10px;font-size:.75rem;font-weight:500}.quiz-card__diff--easy{color:#2e7d32;background:#e8f5e9}.quiz-card__diff--medium{color:#ef6c00;background:#fff3e0}.quiz-card__diff--hard{color:#c62828;background:#fce4ec}.quiz-card__cat{border-radius:var(--radius-pill);color:#7b1fa2;background:#f3e5f5;padding:2px 10px;font-size:.75rem}.quiz-card__stem{color:var(--color-text);-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:.95rem;line-height:1.6;display:-webkit-box;overflow:hidden}.quiz-card__status{margin-top:8px;font-size:.8rem;font-weight:500}.quiz-card__status--correct{color:#2e7d32}.quiz-card__status--wrong{color:#c62828}.option-card{border-radius:var(--radius-btn);border:1.5px solid var(--color-border);background:var(--color-card);cursor:pointer;text-align:left;align-items:flex-start;gap:12px;width:100%;padding:14px 16px;font-size:.92rem;line-height:1.5;transition:all .15s;display:flex}.option-card:hover:not(:disabled){border-color:var(--color-accent);background:#ff6b6b0a;transform:translate(4px)}.option-card--selected{border-color:var(--color-accent);background:#ff6b6b14}.option-card--correct{background:#e8f5e9;border-color:#43a047}.option-card--wrong{background:#fce4ec;border-color:#e53935}.option-card--dimmed{opacity:.5}.option-card__label{width:28px;height:28px;color:var(--color-text);background:#f0ebe5;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:.85rem;font-weight:700;display:flex}.option-card--correct .option-card__label{color:#fff;background:#43a047}.option-card--wrong .option-card__label{color:#fff;background:#e53935}.option-card__text{word-break:break-word;font-family:var(--font-code);flex:1;font-size:.85rem}.option-card__icon{flex-shrink:0;font-size:1.1rem;font-weight:700}.option-card--correct .option-card__icon{color:#43a047}.option-card--wrong .option-card__icon{color:#e53935}.quiz-progress{margin-bottom:20px}.quiz-progress__bar-wrap{background:var(--color-border);border-radius:3px;height:6px;margin-bottom:8px;overflow:hidden}.quiz-progress__bar{background:var(--color-accent);border-radius:3px;height:100%;transition:width .4s cubic-bezier(.22,1,.36,1)}.quiz-progress__info{color:var(--color-text-secondary);justify-content:space-between;font-size:.85rem;display:flex}.quiz-progress__score{color:#43a047;font-weight:600}.quiz-filter{margin-bottom:20px}.quiz-filter__search{margin-bottom:12px;position:relative}.quiz-filter__search-icon{width:18px;height:18px;color:var(--color-text-secondary);position:absolute;top:50%;left:12px;transform:translateY(-50%)}.quiz-filter__search-input{border:2px solid var(--color-border);border-radius:var(--radius-btn);background:var(--color-card);width:100%;color:var(--color-text);transition:border-color var(--transition-fast);font-size:.9rem;font-family:var(--font-main);padding:10px 12px 10px 40px}.quiz-filter__search-input:focus{border-color:var(--color-accent);outline:none}.quiz-filter__row{-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:6px;margin-bottom:8px;display:flex;overflow-x:auto}.quiz-filter__row::-webkit-scrollbar{display:none}.quiz-filter__row--wrap{flex-wrap:wrap}.quiz-filter__chip{border-radius:var(--radius-pill);white-space:nowrap;border:1.5px solid var(--color-border);background:var(--color-card);color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition-fast);padding:5px 14px;font-size:.78rem;font-weight:500}.quiz-filter__chip:hover{border-color:var(--color-accent);color:var(--color-accent)}.quiz-filter__chip--active{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}.quiz-stats{grid-template-columns:repeat(5,1fr);gap:8px;display:grid}.quiz-stats__item{flex-direction:column;align-items:center;gap:2px;display:flex}.quiz-stats__num{font-size:1.4rem;font-weight:700}.quiz-stats__num--primary{color:var(--color-accent)}.quiz-stats__num--success{color:#43a047}.quiz-stats__num--accent{color:#7b1fa2}.quiz-stats__num--danger{color:#e53935}.quiz-stats__label{color:var(--color-text-secondary);font-size:.72rem}.quiz-explanation{border-radius:var(--radius-card);background:#faf5f0;border-left:3px solid #7b1fa2;margin-top:16px;padding:16px}.quiz-explanation__title{color:#7b1fa2;margin-bottom:6px;font-size:.85rem;font-weight:600}.quiz-explanation__text{color:var(--color-text);font-size:.9rem;line-height:1.7}.quiz-btn{border-radius:var(--radius-btn);cursor:pointer;transition:all var(--transition-fast);border:none;padding:12px 32px;font-size:.95rem;font-weight:600}.quiz-btn--primary{background:var(--color-accent);color:#fff;box-shadow:none}.quiz-btn--primary:hover{opacity:.92}.quiz-btn--secondary{background:var(--color-card);color:var(--color-text);border:1.5px solid var(--color-border)}.quiz-btn--secondary:hover{border-color:var(--color-accent);color:var(--color-accent)}.quiz-btn--ghost{color:var(--color-text-secondary);background:0 0}.quiz-btn--ghost:hover{color:var(--color-accent)}.sql-kw{color:#7c3aed;font-weight:600}.sql-block{border-radius:var(--radius-btn);font-family:var(--font-code);white-space:pre-wrap;word-break:break-word;background:#f5f3ff;border:1px solid #e9e5f5;padding:12px 14px;font-size:.85rem;line-height:1.7;display:block;overflow-x:auto}.sql-inline{font-family:var(--font-code);background:#f5f3ff;border-radius:4px;padding:2px 6px;font-size:.85rem}.py-kw{color:#e91e63;font-weight:600}.py-builtin{color:#1565c0;font-weight:500}.py-lib{color:#0d9488;font-weight:600}.py-attr{color:#0891b2}.py-str{color:#2e7d32}.py-comment{color:#9e9e9e;font-style:italic}.code-inline{font-family:var(--font-code);background:#f0fdf4;border-radius:4px;padding:2px 6px;font-size:.85rem}.quiz-explanation__text code{font-family:var(--font-code);font-size:.85rem}.quiz-explanation__text .sql-kw,.quiz-explanation__text .py-kw{font-size:.85rem}.practice-page__stem h3 code{font-family:var(--font-code);font-size:.9rem}.assessment-page{flex-direction:column;gap:16px;display:flex}.assessment-page__intro{background:var(--color-card);border-radius:var(--radius-card);text-align:center;border:1px solid var(--color-border);box-shadow:none;padding:28px}.assessment-page__intro h2{color:var(--color-text);margin-bottom:10px;font-size:1.3rem;font-weight:700}.assessment-page__intro p{color:var(--color-text-secondary);margin-bottom:6px;font-size:.9rem;line-height:1.6}.assessment-page__badges{flex-wrap:wrap;justify-content:center;gap:12px;margin:16px 0;display:flex}.assessment-page__badge{border-radius:var(--radius-pill);color:#7b1fa2;background:#f3e5f5;padding:6px 14px;font-size:.78rem;font-weight:500}.challenge-page{flex-direction:column;gap:16px;display:flex}.challenge-page__header{background:var(--color-card);border-radius:var(--radius-card);border:1px solid var(--color-border);box-shadow:none;text-align:center;padding:24px}.challenge-page__header h2{color:var(--color-text);margin-bottom:8px;font-size:1.3rem;font-weight:700}.challenge-page__header p{color:var(--color-text-secondary);font-size:.9rem}.challenge-page__pass-line{color:#e53935;margin-top:8px;font-size:.82rem;font-weight:600}.level-up-result{text-align:center;padding:20px 0}.level-up-result__icon{margin-bottom:12px;font-size:4rem;display:block}.level-up-result__title{margin-bottom:8px;font-size:1.4rem;font-weight:700}.level-up-result__level{color:#7c3aed;margin-bottom:4px;font-size:1.1rem;font-weight:600}.level-up-result__desc{color:var(--color-text-secondary);margin-bottom:16px;font-size:.9rem}@media (width<=768px){.quiz-stats{grid-template-columns:repeat(3,1fr)}.option-card{padding:12px 14px}}@media (width<=480px){.quiz-stats{grid-template-columns:repeat(3,1fr);gap:4px}.quiz-stats__num{font-size:1.1rem}}.quiz-home{flex-direction:column;gap:28px;display:flex}.quiz-home__header{text-align:center;padding:20px 0}.quiz-home__title{color:var(--color-text);margin-bottom:6px;font-size:1.8rem;font-weight:700}.quiz-home__desc{color:var(--color-text-secondary);font-size:.95rem}.quiz-home__stats-wrap{background:var(--color-card);border-radius:var(--radius-card);border:1px solid var(--color-border);box-shadow:none;padding:20px}.quiz-stats-loading{text-align:center;color:var(--color-text-secondary);padding:20px;font-size:.9rem}.quiz-home__cards{flex-direction:column;gap:14px;display:flex}.quiz-home__entry{border-radius:var(--radius-card);background:var(--color-card);border:1px solid var(--color-border);box-shadow:none;transition:all var(--transition-normal);color:inherit;align-items:center;gap:16px;padding:20px;text-decoration:none;display:flex}.quiz-home__entry:hover{transform:translateY(-2px);box-shadow:0 2px 8px #0000000f}.quiz-home__entry--sql:hover{border-color:var(--color-sql)}.quiz-home__entry--python:hover{border-color:var(--color-python)}.quiz-home__entry--wrong:hover{border-color:#e53935}.quiz-home__entry-icon{border-radius:14px;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;display:flex}.quiz-home__entry-icon svg{width:24px;height:24px}.quiz-home__entry--sql .quiz-home__entry-icon{color:#7c3aed;background:#a78bfa1f}.quiz-home__entry--python .quiz-home__entry-icon{color:#0d9488;background:#4ecdc41f}.quiz-home__entry--wrong .quiz-home__entry-icon{color:#c62828;background:#e539351a}.quiz-home__entry-info{flex:1}.quiz-home__entry-info h2{margin-bottom:2px;font-size:1.1rem;font-weight:600}.quiz-home__entry-info p{color:var(--color-text-secondary);font-size:.82rem}.quiz-home__entry-arrow{color:var(--color-text-secondary);flex-shrink:0;font-size:1.3rem}.quiz-home__entry-arrow--soon{background:var(--color-border);border-radius:var(--radius-pill);color:var(--color-text-secondary);padding:4px 12px;font-size:.78rem}.sql-quiz{flex-direction:column;gap:20px;display:flex}.sql-quiz__breadcrumb{color:var(--color-text-secondary);font-size:.9rem}.sql-quiz__breadcrumb a{color:var(--color-sql);font-weight:500}.sql-quiz__sep{color:var(--color-border);margin:0 8px}.sql-quiz__header{margin-bottom:4px}.sql-quiz__title{color:var(--color-text);margin-bottom:4px;font-size:1.5rem;font-weight:700}.sql-quiz__desc{color:var(--color-text-secondary);font-size:.9rem}.sql-quiz__actions{flex-wrap:wrap;gap:10px;display:flex}.sql-quiz__section-title{color:var(--color-text);margin-bottom:14px;font-size:1.1rem;font-weight:600}.sql-quiz__cat-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;display:grid}.sql-quiz__cat-card{background:var(--color-card);border-radius:var(--radius-card);border:1.5px solid var(--color-border);box-shadow:none;cursor:pointer;flex-direction:column;align-items:center;gap:6px;padding:18px 12px;transition:all .15s;display:flex}.sql-quiz__cat-card:hover{border-color:var(--color-accent);transform:translateY(-2px);box-shadow:0 2px 8px #0000000f}.sql-quiz__cat-name{color:var(--color-text);font-size:.92rem;font-weight:600}.sql-quiz__cat-count{color:var(--color-text-secondary);font-size:.78rem}.sql-quiz__empty{text-align:center;color:var(--color-text-secondary);padding:40px 0;font-size:.95rem}.practice-page{flex-direction:column;gap:16px;display:flex}.practice-page__nav{justify-content:space-between;align-items:center;padding:8px 0;display:flex}.practice-page__title{font-size:1rem;font-weight:600}.practice-page__counter{color:var(--color-text-secondary);font-size:.85rem;font-weight:500}.practice-page__meta{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.practice-page__type{border-radius:var(--radius-pill);color:#1565c0;background:#e3f2fd;padding:2px 10px;font-size:.75rem;font-weight:500}.practice-page__stem{background:var(--color-card);border-radius:var(--radius-card);border:1px solid var(--color-border);box-shadow:none;padding:20px}.practice-page__stem h3{color:var(--color-text);font-size:1.05rem;font-weight:600;line-height:1.7}.practice-page__options{flex-direction:column;gap:10px;display:flex}.practice-page__next{justify-content:flex-end;padding-top:8px;display:flex}.practice-result{justify-content:center;padding:40px 0;display:flex}.practice-result__confetti{z-index:100;pointer-events:none;font-size:4rem;animation:1s confetti-bounce;position:fixed;top:20%;left:50%;transform:translate(-50%)}@keyframes confetti-bounce{0%{opacity:0;transform:translate(-50%)translateY(20px)scale(.5)}50%{opacity:1;transform:translate(-50%)translateY(-10px)scale(1.2)}to{opacity:0;transform:translate(-50%)translateY(-30px)scale(.8)}}.practice-result__card{background:var(--color-card);border-radius:var(--radius-lg);text-align:center;border:1px solid var(--color-border);box-shadow:none;width:100%;max-width:400px;padding:40px}.practice-result__title{color:var(--color-text);margin-bottom:24px;font-size:1.5rem;font-weight:700}.practice-result__score{justify-content:center;margin-bottom:24px;display:flex}.practice-result__circle{background:var(--color-accent);color:#fff;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;width:120px;height:120px;display:flex}.practice-result__percent{font-size:2rem;font-weight:700}.practice-result__fraction{opacity:.9;font-size:.85rem}.practice-result__stats{justify-content:center;gap:48px;margin-bottom:28px;display:flex}.practice-result__stat{flex-direction:column;align-items:center;display:flex}.practice-result__stat-num{font-size:1.6rem;font-weight:700}.practice-result__stat-label{color:var(--color-text-secondary);font-size:.85rem}.practice-result__actions{justify-content:center;gap:12px;display:flex}.wrong-book{flex-direction:column;gap:20px;display:flex}.wrong-book__breadcrumb{color:var(--color-text-secondary);font-size:.9rem}.wrong-book__breadcrumb a{color:#e53935;font-weight:500}.wrong-book__header{margin-bottom:4px}.wrong-book__title{color:var(--color-text);margin-bottom:4px;font-size:1.5rem;font-weight:700}.wrong-book__desc{color:var(--color-text-secondary);font-size:.9rem}.wrong-book__actions{gap:10px;display:flex}.wrong-book__subject-tabs{gap:6px;margin-bottom:12px;display:flex}.wrong-book__item-subject{border-radius:var(--radius-pill);color:#3949ab;background:#e8eaf6;padding:2px 8px;font-size:.72rem;font-weight:500}.wrong-book__list{flex-direction:column;gap:12px;display:flex}.wrong-book__item{background:var(--color-card);border-radius:var(--radius-card);border:1px solid var(--color-border);box-shadow:none;border-left:3px solid #e53935;padding:16px}.wrong-book__item-header{flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px;display:flex}.wrong-book__item-index{color:#e53935;font-size:.85rem;font-weight:700}.wrong-book__item-count{color:#e53935;border-radius:var(--radius-pill);background:#fce4ec;padding:2px 8px;font-size:.75rem;font-weight:500}.wrong-book__remove{color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;border-radius:50%;margin-left:auto;padding:4px 8px;font-size:1.2rem}.wrong-book__remove:hover{color:#e53935;background:#fce4ec}.wrong-book__item-stem{margin-bottom:10px;font-size:.92rem;line-height:1.6}.wrong-book__item-answer{color:#2e7d32;font-size:.85rem;font-family:var(--font-code);border-radius:var(--radius-btn);background:#e8f5e9;margin-bottom:8px;padding:8px 12px}.wrong-book__item-explanation{color:var(--color-text-secondary);border-radius:var(--radius-btn);background:#faf5f0;padding:10px 12px;font-size:.85rem;line-height:1.6}.wrong-book__empty{text-align:center;color:var(--color-text-secondary);padding:48px 0}.wrong-book__empty-icon{margin-bottom:12px;font-size:3rem;display:block}.quiz-hero{background:var(--color-card);border-radius:var(--radius-lg);border:1px solid var(--color-border);box-shadow:none;border-left:3px solid var(--level-color,#8bc34a);flex-direction:column;gap:16px;padding:24px;display:flex}.quiz-hero__level{align-items:center;gap:16px;display:flex}.quiz-hero__badge{background:var(--level-color,#8bc34a);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:56px;height:56px;font-size:.9rem;font-weight:800;display:flex}.quiz-hero__info{flex:1}.quiz-hero__name{color:var(--color-text);margin:0 0 4px;font-size:1.2rem;font-weight:700}.quiz-hero__desc{color:var(--color-text-secondary);margin:0;font-size:.85rem}.quiz-hero__actions{flex-wrap:wrap;gap:10px;display:flex}.quiz-progress-section{background:var(--color-card);border-radius:var(--radius-card);border:1px solid var(--color-border);box-shadow:none;padding:20px}.quiz-board-grid{grid-template-columns:1fr;gap:12px;display:grid}.quiz-board-item{align-items:center;gap:12px;display:flex}.quiz-board-item__name{color:var(--color-text);flex-shrink:0;min-width:80px;font-size:.85rem;font-weight:500}.quiz-board-item__bar-wrap{background:var(--color-border);border-radius:4px;flex:1;height:8px;overflow:hidden}.quiz-board-item__bar{border-radius:4px;height:100%;transition:width .5s}.quiz-board-item__stat{flex-shrink:0;align-items:center;gap:4px;min-width:48px;font-size:.82rem;font-weight:600;display:flex}.quiz-board-item__mastered{color:#43a047;font-weight:700}.quiz-section{flex-direction:column;gap:14px;display:flex}.quiz-btn--smart{color:#fff;border-radius:var(--radius-btn);cursor:pointer;box-shadow:none;background:#7c3aed;border:none;align-items:center;gap:6px;padding:8px 18px;font-size:.88rem;font-weight:600;transition:opacity .15s;display:inline-flex}.quiz-btn--smart:hover{opacity:.9}.quiz-btn--smart svg{flex-shrink:0}.quiz-trial-hint{color:#e65100;border-radius:var(--radius-btn);text-align:center;background:#fff3e0;border:1px solid #ffe0b2;padding:10px 16px;font-size:.85rem}.quiz-trial-lock{text-align:center;color:var(--color-text-secondary);background:var(--color-card);border-radius:var(--radius-card);border:1px dashed var(--color-border);padding:16px;font-size:.85rem}.practice-page__trial-badge{border-radius:var(--radius-pill);color:#e65100;background:#fff3e0;align-items:center;gap:4px;padding:3px 10px;font-size:.75rem;font-weight:600;display:inline-flex}.practice-result__upsell{border-radius:var(--radius-card);background:#f3e5f5;border:1px solid #e1bee7;margin-top:20px;padding:16px}.practice-result__upsell p{color:#6a1b9a;margin-bottom:12px;font-size:.88rem}.practice-result__upsell-btn{color:#fff;border-radius:var(--radius-btn);cursor:pointer;background:#7c3aed;border:none;padding:8px 20px;font-size:.88rem;font-weight:600;text-decoration:none;display:inline-block}.practice-result__upsell-btn:hover{opacity:.9}@media (width<=768px){.sql-quiz__cat-grid{grid-template-columns:repeat(2,1fr)}.practice-result__card{padding:28px 20px}.quiz-hero{padding:18px}.quiz-board-grid{gap:10px}}.projects-page{flex-direction:column;gap:32px;padding-top:20px;display:flex}.projects-page__header{flex-direction:column;gap:10px;display:flex}.projects-page__breadcrumb{color:var(--color-text-secondary);font-size:.88rem}.projects-page__breadcrumb a{color:var(--color-accent);font-weight:500;text-decoration:none}.projects-page__sep{color:var(--color-border);margin:0 8px}.projects-page__title{color:var(--color-text);font-size:1.8rem;font-weight:800}.projects-page__desc{color:var(--color-text-secondary);max-width:560px;font-size:.95rem;line-height:1.6}.projects-page__grid{grid-template-columns:repeat(2,1fr);gap:20px;display:grid}.project-card{background:var(--color-card);border:1px solid var(--color-border);color:inherit;animation:.4s cubic-bezier(.22,1,.36,1) both card-in;animation-delay:var(--card-delay,0s);border-radius:14px;flex-direction:column;text-decoration:none;transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s cubic-bezier(.22,1,.36,1);display:flex;overflow:hidden}@keyframes card-in{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.project-card:hover{transform:translateY(-4px);box-shadow:0 8px 30px #00000014}.project-card__cover{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);height:200px;position:relative;overflow:hidden}.project-card__cover-img{object-fit:cover;object-position:center;width:100%;height:100%}.project-card__iframe{pointer-events:none;transform-origin:0 0;border:none;width:200%;height:200%;transform:scale(.5)}.project-card__gradient-cover{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);justify-content:center;align-items:center;width:100%;height:100%;display:flex}.project-card__hero-emoji{filter:drop-shadow(0 4px 8px #00000026);font-size:4.5rem}.project-card__diff{color:#fff;letter-spacing:.02em;border-radius:50px;padding:3px 12px;font-size:.72rem;font-weight:600;position:absolute;top:12px;right:12px}.project-card__order{color:#ffffffb3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#00000040;font-size:.75rem;font-weight:700;position:absolute;bottom:10px;left:12px}.project-card__lock{background:#00000080;border-radius:6px;padding:4px 8px;font-size:1.2rem;position:absolute;top:12px;left:12px}.project-card__unlocked-badge{color:#fff;background:#22c55ee6;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;font-size:.85rem;font-weight:700;display:flex;position:absolute;top:12px;left:12px}.project-card__body{flex-direction:column;flex:1;gap:8px;padding:18px 20px 20px;display:flex}.project-card__title{color:var(--color-text);font-size:1.05rem;font-weight:700}.project-card__desc{color:var(--color-text-secondary);-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:.82rem;line-height:1.6;display:-webkit-box;overflow:hidden}.project-card__tags{flex-wrap:wrap;gap:6px;margin-top:4px;display:flex}.project-card__tag{color:#7c3aed;background:#a78bfa1a;border-radius:50px;padding:2px 10px;font-size:.7rem;font-weight:500}.project-card__meta{justify-content:space-between;align-items:center;margin-top:8px;display:flex}.project-card__chart-count{color:var(--color-text-secondary);font-size:.78rem}.project-card__arrow{color:var(--color-text-secondary);font-size:1.1rem;transition:transform .2s}.project-card:hover .project-card__arrow{color:var(--color-accent);transform:translate(3px)}@media (width<=768px){.projects-page__grid{grid-template-columns:1fr}.project-card__cover{height:180px}.projects-page__title{font-size:1.4rem}}.project-detail{flex-direction:column;gap:24px;display:flex}.project-detail__breadcrumb{color:var(--color-text-secondary);font-size:.88rem}.project-detail__breadcrumb a{color:var(--color-accent);font-weight:500;text-decoration:none}.project-detail__sep{color:var(--color-border);margin:0 8px}.project-detail__hero{background:var(--color-card);border:1px solid var(--color-border);border-radius:14px;flex-direction:column;gap:14px;padding:28px 28px 24px;display:flex}.project-detail__hero-left{align-items:center;gap:16px;display:flex}.project-detail__emoji{font-size:2.8rem}.project-detail__title{color:var(--color-text);font-size:1.5rem;font-weight:800}.project-detail__tags{flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px;display:flex}.project-detail__diff{color:#fff;border-radius:50px;padding:3px 12px;font-size:.72rem;font-weight:600}.project-detail__tag{color:#7c3aed;background:#a78bfa1a;border-radius:50px;padding:3px 12px;font-size:.72rem;font-weight:500}.project-detail__meta-tag{color:#0d9488;background:#4ecdc41a;border-radius:50px;padding:3px 12px;font-size:.72rem;font-weight:500}.project-detail__desc{color:var(--color-text-secondary);font-size:.92rem;line-height:1.7}.project-detail__section{background:var(--color-card);border:1px solid var(--color-border);border-radius:14px;transition:all .3s;overflow:hidden}.project-detail__section--expanded{border-color:var(--color-accent);box-shadow:0 0 0 1px #a78bfa1a}.project-detail__section-header{background:var(--color-bg);cursor:pointer;border:none;justify-content:space-between;align-items:center;width:100%;padding:18px 24px;font-size:.95rem;transition:background .15s;display:flex}.project-detail__section-header:hover{background:#a78bfa0d}.project-detail__section-header-left{align-items:center;gap:12px;display:flex}.project-detail__section-num{background:var(--color-accent);color:#fff;border-radius:6px;padding:3px 12px;font-size:.78rem;font-weight:700}.project-detail__section-title-text{color:var(--color-text);font-size:1rem;font-weight:600}.project-detail__section-toggle{color:var(--color-text-secondary);font-size:.7rem;transition:transform .3s}.project-detail__section-toggle--open{transform:rotate(180deg)}.project-detail__section-body{padding:24px 28px}.project-detail__step-lock{font-size:.7rem}.project-detail__locked-placeholder{text-align:center;color:var(--color-text-secondary);padding:40px 20px}.project-detail__locked-placeholder p{margin-bottom:12px;font-size:.95rem}.project-detail__unlock-btn{background:var(--color-accent);color:#fff;cursor:pointer;border:none;border-radius:50px;padding:10px 28px;font-size:.9rem;font-weight:600;transition:all .2s}.project-detail__unlock-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #a78bfa4d}.project-detail__subsection{border-top:1px solid var(--color-border)}.project-detail__subsection-header{cursor:pointer;background:#a78bfa08;border:none;justify-content:space-between;align-items:center;width:100%;padding:14px 24px;font-size:.9rem;transition:background .15s;display:flex}.project-detail__subsection-header:hover{background:#a78bfa14}.project-detail__subsection-body{padding:0 28px 24px}.project-detail__md{color:var(--color-text);font-size:.92rem;line-height:1.8}.project-detail__md h1{border-bottom:2px solid var(--color-border);margin-bottom:16px;padding-bottom:8px;font-size:1.5rem;font-weight:800}.project-detail__md h2{color:var(--color-text);margin-top:28px;margin-bottom:12px;font-size:1.2rem;font-weight:700}.project-detail__md h3{margin-top:20px;margin-bottom:8px;font-size:1.05rem;font-weight:600}.project-detail__md strong{color:var(--color-text);font-weight:700}.project-detail__md code{font-family:var(--font-code);background:#f5f0ea;border-radius:4px;padding:2px 6px;font-size:.85em}.project-detail__md pre{background:#1e1e2e;border-radius:10px;margin:16px 0;padding:18px;overflow-x:auto}.project-detail__md pre code{color:#cdd6f4;background:0 0;padding:0;font-size:.85rem}.project-detail__md blockquote{border-left:3px solid var(--color-accent);color:var(--color-text-secondary);background:#a78bfa0a;border-radius:0 6px 6px 0;margin:12px 0;padding:10px 16px}.project-detail__md li{margin-bottom:4px;margin-left:20px;list-style:outside}.project-detail__md table{border-collapse:collapse;width:100%;margin:16px 0;font-size:.88rem}.project-detail__md th{background:var(--color-bg);text-align:left;border-bottom:2px solid var(--color-border);padding:10px 14px;font-weight:600}.project-detail__md td{border-bottom:1px solid var(--color-border);padding:10px 14px}.project-detail__md img{border-radius:8px;max-width:100%;margin:12px 0;transition:transform .2s;display:block}.project-detail__md img:hover{transform:scale(1.01)}.project-detail__nav{justify-content:space-between;gap:16px;display:flex}.project-detail__nav-btn{border:1px solid var(--color-border);background:var(--color-card);border-radius:12px;flex-direction:column;flex:1;gap:4px;padding:16px 20px;text-decoration:none;transition:all .2s;display:flex}.project-detail__nav-btn:hover{border-color:var(--color-accent);transform:translateY(-1px)}.project-detail__nav-btn--next{text-align:right}.project-detail__nav-dir{color:var(--color-text-secondary);font-size:.78rem}.project-detail__nav-title{color:var(--color-text);font-size:.95rem;font-weight:600}.project-detail__lightbox{z-index:1000;cursor:zoom-out;background:#000000d9;justify-content:center;align-items:center;padding:40px;display:flex;position:fixed;inset:0}.project-detail__lightbox img{border-radius:8px;max-width:95%;max-height:90vh;box-shadow:0 8px 32px #0000004d}.project-detail__lightbox-close{color:#fff;cursor:pointer;background:#ffffff26;border:none;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-size:1.2rem;transition:background .15s;display:flex;position:absolute;top:20px;right:24px}.project-detail__lightbox-close:hover{background:#ffffff4d}@media (width<=768px){.project-detail__hero{padding:20px}.project-detail__section-body{padding:16px 18px}.project-detail__subsection-body{padding:0 18px 16px}.project-detail__title{font-size:1.2rem}.project-detail__nav{flex-direction:column}.project-detail__lightbox{padding:16px}.project-detail__file-groups{flex-direction:column}}.project-detail__download{flex-direction:column;gap:20px;display:flex}.project-detail__download-desc{color:var(--color-text-secondary);font-size:.9rem;line-height:1.6}.project-detail__file-groups{gap:20px;display:flex}.project-detail__file-group{background:var(--color-bg);border:1px solid var(--color-border);border-radius:10px;flex:1;padding:16px}.project-detail__file-group-title{color:var(--color-text);align-items:center;gap:8px;margin:0 0 12px;font-size:.9rem;font-weight:600;display:flex}.project-detail__file-icon{font-size:1.1rem}.project-detail__file-count{color:#7c3aed;background:#a78bfa1a;border-radius:50px;margin-left:auto;padding:2px 10px;font-size:.72rem;font-weight:500}.project-detail__file-list{flex-direction:column;gap:6px;max-height:240px;margin:0;padding:0;list-style:none;display:flex;overflow-y:auto}.project-detail__file-list li{background:var(--color-card);border-radius:6px;justify-content:space-between;align-items:center;margin:0;padding:6px 10px;font-size:.82rem;list-style:none;display:flex}.project-detail__file-name{color:var(--color-text);font-family:var(--font-code);text-overflow:ellipsis;white-space:nowrap;font-size:.8rem;overflow:hidden}.project-detail__file-ext{color:#0d9488;background:#4ecdc426;border-radius:4px;flex-shrink:0;margin-left:8px;padding:1px 8px;font-size:.68rem;font-weight:700}.project-detail__download-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#7c3aed,#6d28d9);border:none;border-radius:10px;justify-content:center;align-items:center;gap:8px;width:100%;padding:14px 24px;font-size:.95rem;font-weight:600;transition:all .2s;display:flex}.project-detail__download-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 16px #7c3aed59}.project-detail__download-btn:disabled{opacity:.7;cursor:not-allowed}:root{--color-bg:#faf5f0;--color-card:#fff;--color-accent:#ff6b6b;--color-sql:#a78bfa;--color-python:#4ecdc4;--color-yellow:#ffe66d;--color-text:#2d3436;--color-text-secondary:#636e72;--color-border:#f0ebe5;--radius-card:10px;--radius-btn:6px;--radius-tag:6px;--radius-lg:12px;--radius-pill:50px;--shadow-card:0 1px 3px #0000000a;--shadow-card-hover:0 4px 16px #00000014;--shadow-btn:0 2px 8px #ff6b6b33;--font-main:"Noto Sans SC", -apple-system, BlinkMacSystemFont, sans-serif;--font-code:"JetBrains Mono", "Fira Code", monospace;--transition-fast:.15s ease;--transition-normal:.25s cubic-bezier(.22, 1, .36, 1)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px}body{font-family:var(--font-main);color:var(--color-text);background-color:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.6}a{color:inherit;text-decoration:none}button{cursor:pointer;border:none;font-family:inherit}ul,ol{list-style:none}.fade-in{opacity:0;transition:opacity .5s,transform .5s;transform:translateY(24px)}.fade-in.visible{opacity:1;transform:translateY(0)}@media (width<=1024px){html{font-size:15px}}@media (width<=768px){html{font-size:14px}}