:root {
  --red:#E8412A; --gold:#F5A623; --ink:#1A1A2E; --ink2:#2D2D4E;
  --cream:#FDF8F0; --pale:#FFF5E6; --teal:#00A896;
  --purple:#7B5EA7; --green:#4CAF82;
  --font-main:'Nunito',sans-serif; --font-serif:'Noto Serif SC',serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-main);background:var(--cream);color:var(--ink);overflow-x:hidden;line-height:1.6}

.tutorials-nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;height:64px;background:rgba(253,248,240,0.92);backdrop-filter:blur(12px);border-bottom:1.5px solid rgba(232,65,42,0.12)}.nav-right{display:flex;align-items:center}
.tutorials-logo{display:flex;align-items:center;gap:10px;font-family:var(--font-serif);font-size:1.5rem;font-weight:700;color:var(--ink);text-decoration:none}
.tutorials-logo-mark{width:36px;height:36px;background:var(--red);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;color:white;font-family:var(--font-serif);box-shadow:3px 3px 0 var(--gold)}
.tutorials-back{display:flex;align-items:center;gap:8px;color:var(--ink2);text-decoration:none;font-weight:700;font-size:0.9rem;padding:8px 16px;border-radius:12px;border:1.5px solid rgba(26,26,46,0.15);transition:all 0.2s}
.tutorials-back:hover{background:var(--red);border-color:var(--red);color:white}
.tutorials-stories{display:flex;align-items:center;gap:8px;color:var(--gold);text-decoration:none;font-weight:800;font-size:0.9rem;padding:8px 16px;border-radius:12px;border:1.5px solid var(--gold);transition:all 0.2s;margin-right:12px}
.tutorials-stories:hover{background:var(--gold);color:var(--ink)}

.tutorials-container{max-width:1200px;margin:0 auto;padding:100px 5vw 60px}

.breadcrumb{display:flex;align-items:center;gap:8px;margin-bottom:2rem;font-size:0.85rem;color:#888}
.breadcrumb a{color:var(--red);text-decoration:none;font-weight:700;transition:color 0.2s}
.breadcrumb a:hover{color:var(--gold)}
.breadcrumb span{color:#aaa}

.level-header{text-align:center;margin-bottom:3rem}
.level-badge{display:inline-flex;align-items:center;gap:6px;background:var(--red);color:white;padding:6px 14px;border-radius:20px;font-size:0.78rem;font-weight:800;letter-spacing:0.05em;text-transform:uppercase;margin-bottom:1rem}
.level-title{font-family:var(--font-serif);font-size:clamp(2rem,4vw,3rem);font-weight:700;color:var(--ink);margin-bottom:0.5rem}
.level-subtitle{font-size:1.1rem;color:#666;max-width:600px;margin:0 auto}

.lesson-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}
.lesson-card{background:white;border-radius:20px;overflow:hidden;border:2px solid rgba(26,26,46,0.06);box-shadow:4px 4px 0 rgba(26,26,46,0.06);transition:all 0.3s;text-decoration:none;color:inherit;display:block}
.lesson-card:hover{transform:translate(-3px,-3px);box-shadow:7px 7px 0 rgba(26,26,46,0.1)}
.lesson-card-header{padding:24px;background:linear-gradient(135deg,var(--red),#F5701A);position:relative}
.lesson-card-header::after{content:attr(data-lesson);position:absolute;right:-8px;bottom:-12px;font-family:var(--font-serif);font-size:4rem;font-weight:700;color:rgba(255,255,255,0.15);line-height:1}
.lesson-number{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:rgba(255,255,255,0.25);border-radius:12px;font-family:var(--font-serif);font-size:1.2rem;font-weight:700;color:white;margin-bottom:12px}
.lesson-card-header h3{font-family:var(--font-serif);font-size:1.3rem;font-weight:700;color:white;margin-bottom:4px}
.lesson-card-header p{color:rgba(255,255,255,0.85);font-size:0.85rem}
.lesson-card-body{padding:20px}
.lesson-meta{display:flex;gap:16px;margin-bottom:12px;font-size:0.8rem;color:#888}
.lesson-meta span{display:flex;align-items:center;gap:4px}
.lesson-preview{font-size:0.85rem;color:#666;line-height:1.5}

.lesson-header{margin-bottom:3rem}
.lesson-title{font-family:var(--font-serif);font-size:clamp(1.8rem,3.5vw,2.5rem);font-weight:700;color:var(--ink);margin-bottom:0.5rem}
.lesson-info{display:flex;gap:20px;flex-wrap:wrap;font-size:0.9rem;color:#888;margin-bottom:1.5rem}
.lesson-info span{display:flex;align-items:center;gap:6px;background:var(--pale);padding:6px 12px;border-radius:8px}
.lesson-description{font-size:1.05rem;color:#666;max-width:700px;line-height:1.7}

.section-block{margin-bottom:4rem}
.section-title{font-family:var(--font-serif);font-size:1.6rem;font-weight:700;color:var(--ink);margin-bottom:1.5rem;display:flex;align-items:center;gap:12px}
.section-title::before{content:'';width:4px;height:28px;background:var(--red);border-radius:2px}
.section-title span{font-size:0.85rem;color:var(--red);font-weight:800;text-transform:uppercase;letter-spacing:0.05em}

.vocabulary-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.vocab-card{background:white;border-radius:16px;padding:20px;border:2px solid rgba(26,26,46,0.06);box-shadow:3px 3px 0 rgba(26,26,46,0.05);transition:all 0.3s;cursor:pointer}
.vocab-card:hover{transform:translateY(-2px);box-shadow:5px 5px 0 rgba(26,26,46,0.08);border-color:var(--gold)}
.vocab-char{font-family:var(--font-serif);font-size:2.5rem;font-weight:700;color:var(--ink);text-align:center;margin-bottom:8px}
.vocab-pinyin{font-size:1rem;font-weight:700;color:var(--red);text-align:center;margin-bottom:6px}
.vocab-english{font-size:0.9rem;color:#666;text-align:center;margin-bottom:12px}
.vocab-example{font-size:0.8rem;color:#888;text-align:center;line-height:1.4;border-top:1px solid #f0f0f0;padding-top:10px}
.vocab-audio{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:12px;color:var(--teal);font-size:0.8rem;font-weight:700}

.dialogue-box{background:white;border-radius:20px;padding:24px;border:2px solid rgba(26,26,46,0.06);box-shadow:4px 4px 0 rgba(26,26,46,0.05);margin-bottom:20px}
.dialogue-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:12px;border-bottom:2px solid var(--pale)}
.dialogue-title{font-family:var(--font-serif);font-size:1.2rem;font-weight:700;color:var(--ink)}
.dialogue-speaker{display:flex;gap:12px;margin-bottom:16px}
.speaker{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:12px;font-weight:700;font-size:0.9rem}
.speaker-a{background:#FFE8E8;color:#C0392B}
.speaker-b{background:#E3F2FD;color:#1565C0}
.dialogue-line{margin-bottom:16px;padding:16px;border-radius:12px;background:var(--pale);transition:all 0.2s}
.dialogue-line:hover{background:var(--cream)}
.dialogue-line .chinese{font-family:var(--font-serif);font-size:1.1rem;color:var(--ink);margin-bottom:6px;line-height:1.6}
.dialogue-line .pinyin{font-size:0.95rem;color:var(--red);margin-bottom:6px;text-align:left}
.dialogue-line .english{font-size:0.9rem;color:#666;font-style:italic}
.dialogue-audio{display:flex;align-items:center;gap:8px;margin-top:8px;color:var(--teal);font-size:0.85rem;font-weight:700;cursor:pointer}

/* New Dialogue Container Styles */
.dialogue-container{background:white;border-radius:20px;padding:24px;border:2px solid rgba(26,26,46,0.06);box-shadow:4px 4px 0 rgba(26,26,46,0.05);margin-bottom:20px}
.dialogue-container h3{font-family:var(--font-serif);font-size:1.2rem;font-weight:700;color:var(--ink);margin-bottom:16px;display:flex;align-items:center;gap:8px}
.dialogue-container h3::before{content:'';width:3px;height:20px;background:var(--red);border-radius:2px}
.dialogue-item{margin-bottom:20px;padding:16px;border-radius:12px;background:var(--pale);transition:all 0.2s;cursor:pointer}
.dialogue-item:hover{background:var(--cream)}
.dialogue-item .chinese{font-family:var(--font-serif);font-size:1.1rem;color:var(--ink);margin-bottom:6px;line-height:1.6}
.dialogue-item .pinyin{font-size:0.95rem;color:var(--red);margin-bottom:6px;text-align:left}
.dialogue-item .english{font-size:0.9rem;color:#666;font-style:italic}

.grammar-box{background:white;border-radius:16px;padding:24px;border:2px solid rgba(26,26,46,0.06);box-shadow:4px 4px 0 rgba(26,26,46,0.05);margin-bottom:20px}
.grammar-title{font-family:var(--font-serif);font-size:1.1rem;font-weight:700;color:var(--ink);margin-bottom:12px;display:flex;align-items:center;gap:10px}
.grammar-title::before{content:'G';width:28px;height:28px;background:var(--purple);color:white;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:0.9rem;font-weight:700}
.grammar-rule{font-size:1rem;color:#444;line-height:1.7;margin-bottom:16px;padding:16px;background:var(--pale);border-radius:12px}
.grammar-examples{margin-top:16px}
.grammar-example{margin-bottom:12px;padding:12px;border-left:3px solid var(--gold);background:rgba(245,166,35,0.08)}
.grammar-example .chinese{font-family:var(--font-serif);font-size:1rem;color:var(--ink);margin-bottom:4px}
.grammar-example .pinyin{font-size:0.9rem;color:var(--red);margin-bottom:4px}
.grammar-example .english{font-size:0.85rem;color:#666;font-style:italic}

.reading-box{background:white;border-radius:20px;padding:28px;border:2px solid rgba(26,26,46,0.06);box-shadow:4px 4px 0 rgba(26,26,46,0.05)}
.reading-title{font-family:var(--font-serif);font-size:1.2rem;font-weight:700;color:var(--ink);margin-bottom:16px;display:flex;align-items:center;gap:10px}
.reading-title::before{content:'R';width:28px;height:28px;background:var(--green);color:white;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:0.9rem;font-weight:700}
.reading-text{font-family:var(--font-serif);font-size:1.15rem;color:var(--ink);line-height:2;margin-bottom:16px}
.reading-text .pinyin{color:var(--red);font-size:0.9rem;margin-right:4px}
.reading-translation{font-size:1rem;color:#666;line-height:1.7;padding:16px;background:var(--pale);border-radius:12px;border-left:4px solid var(--gold)}

.practice-section{background:var(--ink);border-radius:20px;padding:32px;margin-top:4rem}
.practice-section .section-title{color:white}
.practice-section .section-title::before{background:var(--gold)}
.practice-section .section-title span{color:var(--gold)}
.practice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.practice-card{background:rgba(255,255,255,0.05);border:1.5px solid rgba(255,255,255,0.1);border-radius:16px;padding:24px;transition:all 0.3s}
.practice-card:hover{background:rgba(255,255,255,0.08);transform:translateY(-4px)}
.practice-card h4{color:white;font-size:1.1rem;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:10px}
.practice-card h4::before{content:'';width:8px;height:8px;background:var(--gold);border-radius:50%}
.practice-card p{color:rgba(255,255,255,0.6);font-size:0.9rem;line-height:1.6}
.practice-btn{display:inline-flex;align-items:center;gap:8px;background:var(--gold);color:var(--ink);padding:10px 20px;border-radius:10px;text-decoration:none;font-weight:700;font-size:0.9rem;margin-top:16px;transition:all 0.2s}
.practice-btn:hover{background:var(--red);color:white}

.culture-box{background:linear-gradient(135deg,var(--pale),#FFF0D6);border-radius:20px;padding:28px;border:2px solid rgba(245,166,35,0.2);margin-top:3rem}
.culture-title{font-family:var(--font-serif);font-size:1.2rem;font-weight:700;color:var(--ink);margin-bottom:16px;display:flex;align-items:center;gap:10px}
.culture-title::before{content:'💡';font-size:1.3rem}
.culture-content{font-size:1rem;color:#444;line-height:1.8}
.culture-content p{margin-bottom:12px}

.controls-bar{position:relative;top:0;z-index:90;background:rgba(253,248,240,0.95);backdrop-filter:blur(10px);padding:16px 20px;border-radius:16px;border:2px solid rgba(26,26,46,0.08);box-shadow:0 4px 20px rgba(0,0,0,0.08);margin-bottom:2rem;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.control-btn{display:flex;align-items:center;gap:8px;padding:10px 18px;border-radius:10px;border:2px solid rgba(26,26,46,0.15);background:white;color:var(--ink);font-weight:700;font-size:0.9rem;cursor:pointer;transition:all 0.2s}
.control-btn:hover{background:var(--red);border-color:var(--red);color:white}
.control-btn.active{background:var(--red);border-color:var(--red);color:white}
.control-group{display:flex;align-items:center;gap:8px}
.control-label{font-size:0.85rem;color:#888;font-weight:700}

.progress-bar{height:6px;background:rgba(26,26,46,0.1);border-radius:3px;overflow:hidden;margin-top:16px}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--red),var(--gold));border-radius:3px;transition:width 0.3s}

.nav-buttons{display:flex;justify-content:space-between;margin-top:4rem;padding-top:2rem;border-top:2px solid rgba(26,26,46,0.08)}
.nav-btn{display:flex;align-items:center;gap:10px;padding:14px 28px;border-radius:14px;font-weight:800;font-size:1rem;text-decoration:none;transition:all 0.2s}
.nav-btn-prev{background:white;color:var(--ink);border:2px solid rgba(26,26,46,0.15)}
.nav-btn-prev:hover{background:var(--ink);color:white}
.nav-btn-next{background:var(--red);color:white;border:2px solid var(--red)}
.nav-btn-next:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 rgba(232,65,42,0.3)}

@media(max-width:768px){
  .tutorials-container{padding:80px 5vw 40px}
  .lesson-grid{grid-template-columns:1fr}
  .vocabulary-grid{grid-template-columns:repeat(2,1fr)}
  .review-grid{grid-template-columns:repeat(2,1fr)}
  .controls-bar{position:relative;top:0;margin-bottom:1.5rem}
  .dialogue-speaker{flex-direction:column;gap:8px}
  .nav-buttons{flex-direction:column;gap:12px}
  .nav-btn{width:100%;justify-content:center}
}

/* Review Section Styles */
.review-section{margin-bottom:2rem}
.review-section h3{font-family:var(--font-serif);font-size:1.2rem;font-weight:700;color:var(--ink);margin-bottom:1rem;display:flex;align-items:center;gap:8px}
.review-section h3::before{content:'';width:3px;height:20px;background:var(--gold);border-radius:2px}

.review-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-bottom:2rem}
.review-card{background:white;border-radius:16px;padding:20px;border:2px solid rgba(26,26,46,0.06);box-shadow:3px 3px 0 rgba(26,26,46,0.05);transition:all 0.3s;cursor:pointer}
.review-card:hover{transform:translateY(-2px);box-shadow:5px 5px 0 rgba(26,26,46,0.08);border-color:var(--gold)}
.review-char{font-family:var(--font-serif);font-size:2.5rem;font-weight:700;color:var(--ink);text-align:center;margin-bottom:8px}
.review-pinyin{font-size:1rem;font-weight:700;color:var(--red);text-align:center;margin-bottom:6px}
.review-english{font-size:0.9rem;color:#666;text-align:center}

.grammar-review{margin-top:1rem}