:root{--bottom-nav-height: 64px;--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-top: env(safe-area-inset-top, 0px)}.layout{min-height:100vh;display:flex;flex-direction:column;padding-bottom:calc(var(--bottom-nav-height) + var(--safe-bottom))}.header{background-color:var(--color-bg-secondary);border-bottom:1px solid var(--color-border);position:relative;z-index:100;padding-top:var(--safe-top)}.header-content{max-width:1200px;margin:0 auto;padding:var(--spacing-sm) var(--spacing-lg);display:flex;align-items:center;justify-content:center}.logo{display:flex;align-items:center;gap:var(--spacing-sm);text-decoration:none;color:var(--color-text-primary);transition:opacity .2s}.logo:hover{opacity:.8}.logo-icon{font-size:1.5rem}.logo-text{font-size:1.25rem;font-weight:600;background:linear-gradient(135deg,var(--color-primary-light),var(--color-terminal));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.main{flex:1;padding:var(--spacing-lg) 0}.container{max-width:1200px;margin:0 auto;padding:0 var(--spacing-lg)}.bottom-nav{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-around;align-items:center;padding:6px 8px calc(6px + var(--safe-bottom));min-height:calc(var(--bottom-nav-height) + var(--safe-bottom));background:#111827f2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--color-border);z-index:1000}.bottom-nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px 8px;text-decoration:none;color:var(--color-text-muted);font-size:.7rem;transition:all .2s ease;min-width:50px;min-height:44px;border-radius:var(--radius-md)}.bottom-nav-item:hover{color:var(--color-text-secondary);background-color:#ffffff0d}.bottom-nav-item.active{color:var(--color-primary-light)}.bottom-nav-icon{font-size:1.4rem;line-height:1}.bottom-nav-label{font-size:.65rem;font-weight:500;white-space:nowrap}@media(min-width:769px){.header-content{justify-content:space-between;padding:var(--spacing-md) var(--spacing-lg)}.logo-text{font-size:1.25rem}.bottom-nav{position:static;min-height:auto;padding:var(--spacing-md);background:var(--color-bg-secondary);border-top:1px solid var(--color-border);justify-content:center;gap:var(--spacing-lg)}.bottom-nav-item{flex-direction:row;gap:var(--spacing-sm);font-size:.9rem;padding:var(--spacing-sm) var(--spacing-md)}.bottom-nav-icon{font-size:1.1rem}.bottom-nav-label{font-size:.85rem}.layout{padding-bottom:0}}@media(max-width:768px){.header{position:relative;z-index:100}.header-content{padding:var(--spacing-sm) var(--spacing-md)}.logo-text{font-size:1.1rem}.main{padding:var(--spacing-md) 0;padding-bottom:calc(var(--spacing-lg) + var(--safe-bottom))}.container{padding:0 var(--spacing-md)}}@media(max-width:375px){.bottom-nav-item{min-width:44px;padding:4px}.bottom-nav-icon{font-size:1.25rem}.bottom-nav-label{font-size:.6rem}}.home{display:flex;flex-direction:column;gap:var(--spacing-2xl)}.hero{text-align:center;padding:var(--spacing-2xl) 0;background:linear-gradient(135deg,var(--color-bg-secondary) 0%,var(--color-bg-tertiary) 100%);border-radius:var(--radius-xl);border:1px solid var(--color-border)}.hero-content{max-width:600px;margin:0 auto;padding:0 var(--spacing-lg)}.hero-title{font-size:2.5rem;margin-bottom:var(--spacing-md);font-weight:700}.hero-subtitle{color:var(--color-text-secondary);font-size:1.125rem;margin-bottom:var(--spacing-xl)}.hero-stats{display:flex;justify-content:center;gap:var(--spacing-xl);margin-bottom:var(--spacing-xl)}.stat{display:flex;flex-direction:column;align-items:center}.stat-number{font-size:2rem;font-weight:700;color:var(--color-primary-light);font-family:var(--font-mono)}.stat-label{font-size:.875rem;color:var(--color-text-muted)}.hero-cta{display:inline-block;background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));color:#fff;padding:var(--spacing-md) var(--spacing-xl);border-radius:var(--radius-lg);text-decoration:none;font-weight:600;font-size:1.125rem;transition:all .3s;box-shadow:var(--shadow-glow);margin-top:var(--spacing-lg);position:relative;z-index:1}.hero-cta:hover{transform:translateY(-2px);box-shadow:0 10px 30px #054ada66}.section-title{font-size:1.5rem;margin-bottom:var(--spacing-lg);color:var(--color-text-primary)}.progress-section{background-color:var(--color-bg-card);padding:var(--spacing-xl);border-radius:var(--radius-lg);border:1px solid var(--color-border)}.progress-card{background-color:var(--color-bg-secondary);padding:var(--spacing-lg);border-radius:var(--radius-md)}.progress-header{display:flex;justify-content:space-between;margin-bottom:var(--spacing-md)}.progress-text{color:var(--color-text-secondary)}.progress-percent{font-weight:600;color:var(--color-primary-light);font-family:var(--font-mono)}.progress-bar{height:8px;background-color:var(--color-bg-tertiary);border-radius:var(--radius-sm);overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--color-primary),var(--color-primary-light));border-radius:var(--radius-sm);transition:width .5s ease}.recommendation{margin-top:var(--spacing-lg)}.rec-card{display:flex;gap:var(--spacing-lg);background-color:var(--color-bg-card);padding:var(--spacing-xl);border-radius:var(--radius-lg);border:1px solid var(--color-border);text-decoration:none;color:inherit;transition:all .3s}.rec-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-glow)}.rec-icon{font-size:3rem;flex-shrink:0}.rec-content{flex:1}.rec-title{font-size:1.25rem;margin-bottom:var(--spacing-sm);color:var(--color-text-primary)}.rec-desc{color:var(--color-text-secondary);margin-bottom:var(--spacing-md);line-height:1.6}.rec-meta{display:flex;gap:var(--spacing-md)}.rec-stage{background-color:var(--color-primary);color:#fff;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);font-size:.75rem;font-weight:500}.rec-duration{color:var(--color-text-muted);font-size:.875rem}.learning-path{margin-top:var(--spacing-lg)}.stages-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--spacing-md)}.stage-card{background-color:var(--color-bg-card);padding:var(--spacing-lg);border-radius:var(--radius-lg);border:1px solid var(--color-border);text-decoration:none;color:inherit;text-align:center;transition:all .3s;position:relative}.stage-card:hover{transform:translateY(-4px);border-color:var(--color-primary);box-shadow:var(--shadow-glow)}.stage-number{position:absolute;top:var(--spacing-sm);left:var(--spacing-sm);background-color:var(--color-bg-tertiary);color:var(--color-text-muted);width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:600}.stage-icon{font-size:2.5rem;margin-bottom:var(--spacing-sm)}.stage-name{font-size:1rem;margin-bottom:var(--spacing-xs);color:var(--color-text-primary)}.stage-desc{font-size:.75rem;color:var(--color-text-muted);line-height:1.4}.quick-tools{margin-top:var(--spacing-lg)}.tools-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--spacing-md)}.tool-card{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm);background-color:var(--color-bg-card);padding:var(--spacing-lg);border-radius:var(--radius-lg);border:1px solid var(--color-border);text-decoration:none;color:inherit;transition:all .3s}.tool-card:hover{border-color:var(--color-terminal);background-color:var(--color-bg-tertiary)}.tool-icon{font-size:2rem}.tool-name{font-size:.875rem;color:var(--color-text-secondary)}@media(max-width:768px){.home{gap:var(--spacing-xl)}.hero{padding:var(--spacing-xl) var(--spacing-md) calc(var(--spacing-2xl) + var(--spacing-lg));margin:0 calc(-1 * var(--spacing-md));border-radius:0;display:flex;flex-direction:column;position:relative;overflow:visible}.hero-content{display:flex;flex-direction:column;gap:var(--spacing-xl)}.hero-title{font-size:1.5rem;line-height:1.3;margin-bottom:0}.hero-subtitle{font-size:.9rem;margin-bottom:0}.hero-stats{gap:var(--spacing-lg);flex-wrap:wrap;margin-bottom:var(--spacing-lg);margin-top:0}.stat-number{font-size:1.75rem}.hero-cta{padding:var(--spacing-md) var(--spacing-xl);font-size:1.1rem;width:100%;max-width:280px;margin-top:var(--spacing-sm);margin-bottom:calc(-1 * var(--spacing-2xl));display:inline-block;text-align:center;position:relative;z-index:10;align-self:center}.progress-section{padding:var(--spacing-xl) var(--spacing-md);margin-top:var(--spacing-2xl);position:relative;z-index:5}.rec-card{flex-direction:column;text-align:center;padding:var(--spacing-md)}.rec-icon{font-size:2.5rem}.rec-title{font-size:1.1rem}.rec-desc{font-size:.85rem}.rec-meta{justify-content:center;flex-wrap:wrap}.stages-grid{grid-template-columns:repeat(2,1fr);gap:var(--spacing-sm)}.stage-card{padding:var(--spacing-md)}.stage-icon{font-size:2rem}.stage-name{font-size:.85rem}.stage-desc{font-size:.7rem}.tools-grid{grid-template-columns:repeat(3,1fr);gap:var(--spacing-sm)}.tool-card{padding:var(--spacing-sm)}.tool-icon{font-size:1.5rem}.tool-name{font-size:.75rem}}@media(max-width:375px){.hero-title{font-size:1.25rem}.stages-grid{grid-template-columns:1fr}.tools-grid{grid-template-columns:repeat(2,1fr)}}.scenario-list{padding-bottom:var(--spacing-2xl)}.stage-section{margin-bottom:var(--spacing-xl)}.stage-header{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md) 0;padding-left:var(--spacing-md);border-left:4px solid;margin-bottom:var(--spacing-lg)}.stage-badge{color:#fff;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);font-size:.75rem;font-weight:600}.stage-title{font-size:1.25rem;flex:1}.stage-count{color:var(--color-text-muted);font-size:.875rem}.scenarios-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--spacing-md)}.scenario-card{display:flex;align-items:flex-start;gap:var(--spacing-md);background-color:var(--color-bg-card);padding:var(--spacing-lg);border-radius:var(--radius-lg);border:1px solid var(--color-border);text-decoration:none;color:inherit;transition:all .3s}.scenario-card:hover{border-color:var(--color-primary);transform:translate(4px)}.scenario-icon{font-size:2rem;flex-shrink:0}.scenario-content{flex:1;min-width:0}.scenario-title{font-size:1.1rem;margin-bottom:var(--spacing-xs);color:var(--color-text-primary)}.scenario-title-en{font-size:.75rem;color:var(--color-text-muted);font-family:var(--font-mono);margin-bottom:var(--spacing-sm)}.scenario-context{font-size:.875rem;color:var(--color-text-secondary);margin-bottom:var(--spacing-sm);line-height:1.5}.scenario-meta{display:flex;gap:var(--spacing-sm)}.scenario-concepts,.scenario-dialogues{font-size:.75rem;color:var(--color-text-muted);background-color:var(--color-bg-tertiary);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm)}.scenario-arrow{color:var(--color-text-muted);font-size:1.25rem;transition:color .2s}.scenario-card:hover .scenario-arrow{color:var(--color-primary-light)}.empty-stage{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-xl);background-color:var(--color-bg-secondary);border-radius:var(--radius-lg);border:1px dashed var(--color-border);color:var(--color-text-muted)}.empty-icon{font-size:1.5rem}@media(max-width:768px){.scenarios-grid{grid-template-columns:1fr}.stage-header{flex-wrap:wrap}.stage-title{font-size:1.1rem}}.code-block-container{background-color:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:var(--spacing-lg)}.code-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-sm) var(--spacing-md);background-color:var(--color-bg-tertiary);border-bottom:1px solid var(--color-border)}.code-title{display:flex;align-items:center;gap:var(--spacing-sm)}.code-lang{color:#fff;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);font-size:.75rem;font-weight:600;font-family:var(--font-mono)}.code-name{font-weight:500;color:var(--color-text-primary)}.code-actions{display:flex;gap:var(--spacing-xs)}.code-action{background:transparent;border:1px solid var(--color-border);color:var(--color-text-secondary);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);cursor:pointer;font-size:.875rem;transition:all .2s}.code-action:hover{border-color:var(--color-primary);color:var(--color-text-primary)}.code-action.active{background-color:var(--color-primary);border-color:var(--color-primary);color:#fff}.code-content{background-color:#0d1117;overflow-x:auto}.code-pre{margin:0;padding:var(--spacing-md);font-family:var(--font-mono);font-size:.875rem;line-height:1.6}.code-line{display:flex;align-items:flex-start}.line-number{color:#484f58;min-width:3ch;text-align:right;padding-right:var(--spacing-md);-webkit-user-select:none;user-select:none;flex-shrink:0}.line-content{color:#e6edf3;white-space:pre;flex:1;position:relative}.language-cobol .line-content{color:#e6edf3}.line-content:contains("*"){color:#8b949e}.language-jcl .line-content{color:#e6edf3}.language-jcl .line-content[data-starts-with="//"]{color:#7ee787}.line-annotation{position:absolute;right:0;background-color:var(--color-bg-tertiary);color:var(--color-terminal);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);font-size:.75rem;margin-left:var(--spacing-lg);white-space:nowrap;border:1px solid var(--color-border)}.code-explanation{padding:var(--spacing-md);background-color:var(--color-bg-secondary);border-top:1px solid var(--color-border)}.explanation-title{font-size:.875rem;margin-bottom:var(--spacing-sm);color:var(--color-text-primary)}.explanation-text{color:var(--color-text-secondary);font-size:.875rem;line-height:1.6}@media(max-width:768px){.code-block-container{margin-bottom:var(--spacing-md)}.code-header{flex-direction:row;flex-wrap:wrap;gap:var(--spacing-xs);padding:var(--spacing-sm)}.code-title{flex:1;min-width:0}.code-name{font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.code-actions{width:100%;justify-content:flex-end}.code-action{font-size:.75rem;padding:var(--spacing-xs) var(--spacing-sm);min-height:32px}.code-content{overflow-x:auto;-webkit-overflow-scrolling:touch}.code-pre{font-size:.7rem;padding:var(--spacing-sm);line-height:1.5}.line-number{padding-right:var(--spacing-sm);font-size:.65rem}.line-content{white-space:pre;word-wrap:normal}.line-annotation{display:none}.code-explanation{padding:var(--spacing-sm)}.explanation-text{font-size:.8rem}}@media(max-width:375px){.code-pre{font-size:.65rem}}.dialogue-panel{padding:var(--spacing-lg) 0}.panel-title{font-size:1.5rem;margin-bottom:var(--spacing-sm)}.panel-desc{color:var(--color-text-secondary);margin-bottom:var(--spacing-xl)}.dialogue-list{display:flex;flex-direction:column;gap:var(--spacing-lg)}.dialogue-item{display:flex;gap:var(--spacing-md);animation:slideIn .3s ease-out;animation-fill-mode:both}.dialogue-item:nth-child(1){animation-delay:.05s}.dialogue-item:nth-child(2){animation-delay:.1s}.dialogue-item:nth-child(3){animation-delay:.15s}.dialogue-item:nth-child(4){animation-delay:.2s}.dialogue-item:nth-child(5){animation-delay:.25s}.dialogue-item:nth-child(6){animation-delay:.3s}.dialogue-item:nth-child(7){animation-delay:.35s}.dialogue-item:nth-child(8){animation-delay:.4s}@keyframes slideIn{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:translate(0)}}.dialogue-avatar{flex-shrink:0}.avatar-emoji{font-size:2.5rem;display:block}.dialogue-content{flex:1}.dialogue-header{display:flex;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-xs)}.dialogue-role{font-weight:600;color:var(--color-text-primary)}.dialogue-role-en{font-size:.75rem;color:var(--color-text-muted);font-family:var(--font-mono)}.dialogue-bubble{background-color:var(--color-bg-card);padding:var(--spacing-md);border-radius:var(--radius-lg);border:1px solid var(--color-border);position:relative}.dialogue-bubble:before{content:"";position:absolute;left:-8px;top:12px;width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-right:8px solid var(--color-border)}.dialogue-bubble:after{content:"";position:absolute;left:-6px;top:13px;width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-right:7px solid var(--color-bg-card)}.dialogue-text{color:var(--color-text-primary);line-height:1.6;margin:0}.dialogue-text-en{color:var(--color-text-muted);font-size:.875rem;margin-top:var(--spacing-sm);font-style:italic}.dialogue-item.is-question .dialogue-bubble{border-color:var(--color-primary);background-color:#054ada1a}.dialogue-item.is-question .dialogue-bubble:after{border-right-color:#054ada1a}.question-badge{display:inline-block;margin-top:var(--spacing-sm);background-color:var(--color-primary);color:#fff;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);font-size:.75rem;font-weight:500}@media(max-width:768px){.avatar-emoji{font-size:2rem}.dialogue-bubble:before,.dialogue-bubble:after{display:none}}.quiz-panel{padding:var(--spacing-lg) 0}.quiz-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-lg);padding-bottom:var(--spacing-md);border-bottom:1px solid var(--color-border)}.quiz-progress{font-family:var(--font-mono);color:var(--color-text-secondary)}.quiz-type{background-color:var(--color-bg-tertiary);color:var(--color-primary-light);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);font-size:.75rem;font-weight:500}.quiz-question{margin-bottom:var(--spacing-xl)}.question-text{font-size:1.25rem;line-height:1.6;color:var(--color-text-primary);white-space:pre-line}.quiz-options{display:flex;flex-direction:column;gap:var(--spacing-md);margin-bottom:var(--spacing-xl)}.quiz-option{display:flex;align-items:flex-start;gap:var(--spacing-md);background-color:var(--color-bg-card);border:2px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-md);cursor:pointer;transition:all .2s;text-align:left;width:100%}.quiz-option:hover:not(:disabled){border-color:var(--color-primary);background-color:var(--color-bg-tertiary)}.quiz-option.selected{border-color:var(--color-primary);background-color:#054ada1a}.quiz-option.correct{border-color:var(--color-accent-success);background-color:#42be651a}.quiz-option.wrong{border-color:var(--color-accent-error);background-color:#fa4d561a}.quiz-option:disabled{cursor:default}.option-letter{flex-shrink:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background-color:var(--color-bg-tertiary);border-radius:50%;font-weight:600;color:var(--color-text-secondary)}.quiz-option.selected .option-letter{background-color:var(--color-primary);color:#fff}.quiz-option.correct .option-letter{background-color:var(--color-accent-success);color:#fff}.quiz-option.wrong .option-letter{background-color:var(--color-accent-error);color:#fff}.option-text{flex:1;color:var(--color-text-primary);line-height:1.5}.option-icon{font-size:1.25rem}.quiz-explanation{padding:var(--spacing-lg);border-radius:var(--radius-lg);margin-bottom:var(--spacing-xl)}.quiz-explanation.correct{background-color:#42be651a;border:1px solid var(--color-accent-success)}.quiz-explanation.wrong{background-color:#fa4d561a;border:1px solid var(--color-accent-error)}.explanation-title{font-size:1rem;margin-bottom:var(--spacing-sm)}.quiz-explanation.correct .explanation-title{color:var(--color-accent-success)}.quiz-explanation.wrong .explanation-title{color:var(--color-accent-error)}.explanation-text{color:var(--color-text-secondary);line-height:1.6}.quiz-actions{display:flex;justify-content:center}.btn-primary{background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));color:#fff;border:none;padding:var(--spacing-md) var(--spacing-xl);border-radius:var(--radius-lg);font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-glow)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.quiz-finished{display:flex;justify-content:center;align-items:center;min-height:400px}.quiz-result-card{text-align:center;background-color:var(--color-bg-card);padding:var(--spacing-2xl);border-radius:var(--radius-xl);border:1px solid var(--color-border);max-width:400px}.result-title{font-size:1.5rem;margin-bottom:var(--spacing-lg)}.result-score{display:flex;align-items:baseline;justify-content:center;gap:var(--spacing-xs);margin-bottom:var(--spacing-sm)}.score-number{font-size:4rem;font-weight:700;color:var(--color-primary-light);font-family:var(--font-mono)}.score-label{font-size:1.5rem;color:var(--color-text-secondary)}.result-detail{color:var(--color-text-muted);margin-bottom:var(--spacing-lg)}.result-feedback{background-color:var(--color-bg-tertiary);padding:var(--spacing-md);border-radius:var(--radius-md);margin-bottom:var(--spacing-xl);color:var(--color-text-secondary)}@media(max-width:768px){.quiz-panel{padding:var(--spacing-sm)}.quiz-header{flex-direction:column;gap:var(--spacing-sm);align-items:flex-start}.question-text{font-size:1rem;line-height:1.5}.quiz-options{gap:var(--spacing-sm)}.quiz-option{padding:var(--spacing-md);min-height:60px}.option-letter{width:36px;height:36px;font-size:1rem}.option-text{font-size:.9rem}.quiz-explanation{padding:var(--spacing-md)}.btn-primary{width:100%;padding:var(--spacing-md);min-height:48px}.quiz-finished{min-height:auto;padding:var(--spacing-md) 0}.quiz-result-card{padding:var(--spacing-xl);margin:0 var(--spacing-sm)}.score-number{font-size:3rem}.result-title{font-size:1.25rem}}@media(max-width:375px){.question-text{font-size:.95rem}.option-text{font-size:.85rem}}.scenario-detail{padding-bottom:var(--spacing-2xl)}.not-found{text-align:center;padding:var(--spacing-2xl)}.not-found h1{font-size:2rem;margin-bottom:var(--spacing-md)}.not-found p{color:var(--color-text-secondary);margin-bottom:var(--spacing-lg)}.detail-header{margin-bottom:var(--spacing-xl);padding-bottom:var(--spacing-lg);border-bottom:1px solid var(--color-border)}.detail-meta{display:flex;align-items:center;gap:var(--spacing-md);margin-bottom:var(--spacing-md)}.back-link{color:var(--color-text-secondary);text-decoration:none;font-size:.875rem}.back-link:hover{color:var(--color-primary-light)}.stage-badge{background-color:var(--color-primary);color:#fff;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);font-size:.75rem;font-weight:500}.detail-title-section{display:flex;align-items:center;gap:var(--spacing-md);margin-bottom:var(--spacing-sm)}.detail-icon{font-size:3rem}.detail-titles{flex:1}.detail-title{font-size:1.75rem;margin-bottom:var(--spacing-xs)}.detail-subtitle{color:var(--color-text-muted);font-size:.875rem}.detail-context{color:var(--color-text-secondary);font-size:1rem}.detail-tabs{display:flex;gap:var(--spacing-xs);margin-bottom:var(--spacing-lg);border-bottom:1px solid var(--color-border);overflow-x:auto;-webkit-overflow-scrolling:touch}.tab{background:transparent;border:none;color:var(--color-text-secondary);padding:var(--spacing-sm) var(--spacing-md);font-size:.875rem;cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;transition:all .2s}.tab:hover{color:var(--color-text-primary)}.tab.active{color:var(--color-primary-light);border-bottom-color:var(--color-primary)}.detail-content{min-height:400px}.concepts-panel{padding:var(--spacing-lg) 0}.panel-title{font-size:1.5rem;margin-bottom:var(--spacing-lg)}.concepts-list{display:flex;flex-direction:column;gap:var(--spacing-lg)}.concept-card{background-color:var(--color-bg-card);padding:var(--spacing-lg);border-radius:var(--radius-lg);border:1px solid var(--color-border)}.concept-header{display:flex;align-items:baseline;gap:var(--spacing-sm);margin-bottom:var(--spacing-sm)}.concept-term{font-size:1.25rem;color:var(--color-text-primary)}.concept-term-en{color:var(--color-text-muted);font-size:.75rem;font-family:var(--font-mono)}.concept-analogy{background-color:var(--color-bg-tertiary);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);margin-bottom:var(--spacing-sm);font-size:.875rem}.analogy-label{color:var(--color-terminal)}.concept-explanation{color:var(--color-text-secondary);line-height:1.6}.code-panel{padding:var(--spacing-lg) 0}.code-examples{display:flex;flex-direction:column;gap:var(--spacing-lg)}.detail-footer{display:flex;justify-content:space-between;align-items:center;margin-top:var(--spacing-xl);padding-top:var(--spacing-lg);border-top:1px solid var(--color-border)}.btn-secondary{background:transparent;border:1px solid var(--color-border);color:var(--color-text-secondary);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);text-decoration:none;font-size:.875rem;cursor:pointer;transition:all .2s}.btn-secondary:hover{border-color:var(--color-primary);color:var(--color-text-primary)}.btn-primary{background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));color:#fff;border:none;padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-md);font-size:.875rem;font-weight:600;cursor:pointer;transition:all .3s}.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-glow)}@media(max-width:768px){.detail-title-section{flex-direction:column;text-align:center}.detail-icon{font-size:2.5rem}.detail-title{font-size:1.5rem}.detail-tabs{padding-bottom:var(--spacing-xs)}.tab{padding:var(--spacing-xs) var(--spacing-sm);font-size:.8rem}.concept-header{flex-direction:column;gap:var(--spacing-xs)}.detail-footer{flex-direction:column;gap:var(--spacing-md)}.btn-secondary,.btn-primary{width:100%;text-align:center}}.code-lab{padding-bottom:var(--spacing-2xl)}.lab-tabs{display:flex;gap:var(--spacing-xs);margin-bottom:var(--spacing-lg);border-bottom:1px solid var(--color-border)}.lab-tab{background:transparent;border:none;color:var(--color-text-secondary);padding:var(--spacing-sm) var(--spacing-md);font-size:.875rem;cursor:pointer;border-bottom:2px solid transparent;transition:all .2s}.lab-tab:hover{color:var(--color-text-primary)}.lab-tab.active{color:var(--color-primary-light);border-bottom-color:var(--color-primary)}.editor-panel{display:grid;grid-template-columns:250px 1fr;gap:var(--spacing-lg);height:calc(100vh - 300px);min-height:500px}.editor-sidebar{background-color:var(--color-bg-card);border-radius:var(--radius-lg);border:1px solid var(--color-border);padding:var(--spacing-md);overflow-y:auto}.editor-sidebar h3{font-size:.875rem;margin-bottom:var(--spacing-md);color:var(--color-text-secondary)}.exercise-list{display:flex;flex-direction:column;gap:var(--spacing-xs)}.exercise-item{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm);border-radius:var(--radius-md);cursor:pointer;transition:all .2s}.exercise-item:hover{background-color:var(--color-bg-tertiary)}.exercise-item.active{background-color:var(--color-primary)}.exercise-item.locked{opacity:.5;cursor:not-allowed}.exercise-num{font-family:var(--font-mono);font-size:.75rem;color:var(--color-text-muted)}.exercise-item.active .exercise-num{color:#fff}.exercise-name{font-size:.875rem}.editor-main{display:flex;flex-direction:column;background-color:var(--color-bg-card);border-radius:var(--radius-lg);border:1px solid var(--color-border);overflow:hidden}.editor-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-sm) var(--spacing-md);background-color:var(--color-bg-tertiary);border-bottom:1px solid var(--color-border)}.editor-filename{font-family:var(--font-mono);font-size:.875rem;color:var(--color-text-secondary)}.editor-actions{display:flex;gap:var(--spacing-xs)}.editor-btn{background:transparent;border:1px solid var(--color-border);color:var(--color-text-secondary);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);font-size:.75rem;cursor:pointer;transition:all .2s}.editor-btn:hover{border-color:var(--color-primary);color:var(--color-text-primary)}.editor-btn.primary{background-color:var(--color-primary);border-color:var(--color-primary);color:#fff}.code-editor{flex:1;background-color:#0d1117;color:#e6edf3;border:none;padding:var(--spacing-md);font-family:var(--font-mono);font-size:.875rem;line-height:1.6;resize:none;outline:none}.code-editor.jcl{font-size:.8rem}.editor-console{background-color:var(--color-bg-secondary);border-top:1px solid var(--color-border);padding:var(--spacing-sm)}.console-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-sm)}.console-header span{font-size:.75rem;color:var(--color-text-muted)}.console-clear{background:transparent;border:none;color:var(--color-text-muted);font-size:.75rem;cursor:pointer}.console-clear:hover{color:var(--color-text-primary)}.console-output{font-family:var(--font-mono);font-size:.875rem;color:var(--color-terminal);min-height:60px}.console-prompt{margin-right:var(--spacing-sm)}.console-cursor{animation:blink 1s step-end infinite}.jcl-panel{display:flex;flex-direction:column;gap:var(--spacing-lg)}.jcl-info{background-color:var(--color-bg-card);padding:var(--spacing-lg);border-radius:var(--radius-lg);border:1px solid var(--color-border)}.jcl-info h3{margin-bottom:var(--spacing-sm)}.jcl-info p{color:var(--color-text-secondary)}.jcl-editor-container{display:grid;grid-template-columns:1fr 300px;gap:var(--spacing-lg)}.jcl-reference{background-color:var(--color-bg-card);padding:var(--spacing-lg);border-radius:var(--radius-lg);border:1px solid var(--color-border)}.jcl-reference h4{font-size:.875rem;margin-bottom:var(--spacing-md);color:var(--color-text-secondary)}.reference-list{list-style:none;display:flex;flex-direction:column;gap:var(--spacing-sm)}.reference-list li{font-size:.875rem;color:var(--color-text-secondary)}.reference-list code{color:var(--color-terminal);font-family:var(--font-mono)}.copybook-panel{display:flex;flex-direction:column;gap:var(--spacing-lg)}.copybook-demo{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-lg)}.copybook-input,.copybook-output{background-color:var(--color-bg-card);padding:var(--spacing-lg);border-radius:var(--radius-lg);border:1px solid var(--color-border)}.copybook-input h4,.copybook-output h4{font-size:.875rem;margin-bottom:var(--spacing-md);color:var(--color-text-secondary)}.structure-tree{font-family:var(--font-mono);font-size:.875rem}.tree-node{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-xs) 0;border-bottom:1px solid var(--color-border)}.tree-node:last-child{border-bottom:none}.tree-node.level-1{font-weight:600;color:var(--color-primary-light)}.tree-node.level-2{padding-left:var(--spacing-md);font-size:.8rem}.node-name{color:var(--color-text-primary)}.node-type{color:var(--color-terminal);font-size:.75rem}.node-size,.node-bytes{color:var(--color-text-muted);font-size:.75rem;margin-left:auto}.tree-children{margin-top:var(--spacing-xs)}@media(max-width:768px){.lab-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch}.lab-tab{white-space:nowrap}.editor-panel{grid-template-columns:1fr;grid-template-rows:auto 1fr;height:auto}.editor-sidebar{max-height:200px}.editor-main{min-height:400px}.jcl-editor-container{grid-template-columns:1fr}.jcl-reference{order:-1}.copybook-demo{grid-template-columns:1fr}}.glossary{padding-bottom:var(--spacing-2xl)}.glossary-search{position:relative;margin-bottom:var(--spacing-lg)}.search-input{width:100%;background-color:var(--color-bg-card);border:1px solid var(--color-border);color:var(--color-text-primary);padding:var(--spacing-md) var(--spacing-lg);padding-right:calc(var(--spacing-lg) + 2rem);border-radius:var(--radius-lg);font-size:1rem;transition:all .2s}.search-input:focus{outline:none;border-color:var(--color-primary)}.search-icon{position:absolute;right:var(--spacing-md);top:50%;transform:translateY(-50%);font-size:1.25rem;pointer-events:none}.category-tabs{display:flex;gap:var(--spacing-xs);margin-bottom:var(--spacing-lg);overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:var(--spacing-xs)}.category-tab{background-color:var(--color-bg-card);border:1px solid var(--color-border);color:var(--color-text-secondary);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);font-size:.875rem;cursor:pointer;white-space:nowrap;transition:all .2s}.category-tab:hover{border-color:var(--color-primary);color:var(--color-text-primary)}.category-tab.active{background-color:var(--color-primary);border-color:var(--color-primary);color:#fff}.terms-list{display:flex;flex-direction:column;gap:var(--spacing-md)}.term-card{background-color:var(--color-bg-card);padding:var(--spacing-lg);border-radius:var(--radius-lg);border:1px solid var(--color-border);transition:all .2s}.term-card:hover{border-color:var(--color-primary)}.term-header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--spacing-sm);margin-bottom:var(--spacing-sm)}.term-titles{flex:1;min-width:0}.term-name{font-size:1.25rem;margin-bottom:var(--spacing-xs);color:var(--color-text-primary)}.term-en{font-size:.75rem;color:var(--color-text-muted);font-family:var(--font-mono)}.term-category{color:#fff;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);font-size:.75rem;font-weight:500;flex-shrink:0}.term-definition{color:var(--color-text-secondary);line-height:1.6;margin-bottom:var(--spacing-sm)}.term-example{background-color:var(--color-bg-tertiary);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);font-size:.875rem}.example-label{color:var(--color-terminal)}.example-text{color:var(--color-text-secondary)}.empty-state{text-align:center;padding:var(--spacing-2xl);color:var(--color-text-muted)}.empty-icon{font-size:3rem;margin-bottom:var(--spacing-md)}@media(max-width:768px){.page-title{font-size:1.5rem}.search-input{font-size:16px}.category-tabs{gap:var(--spacing-xs)}.category-tab{padding:var(--spacing-xs) var(--spacing-sm);font-size:.8rem}.term-header{flex-direction:column}.term-category{align-self:flex-start}.term-name{font-size:1.1rem}}.quiz-page{padding-bottom:var(--spacing-2xl)}.quiz-modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--spacing-lg);margin-bottom:var(--spacing-2xl)}.quiz-mode-card{background-color:var(--color-bg-card);padding:var(--spacing-xl);border-radius:var(--radius-lg);border:1px solid var(--color-border);text-align:center;transition:all .3s}.quiz-mode-card:hover{border-color:var(--color-primary);transform:translateY(-2px)}.quiz-mode-card.featured{border-color:var(--color-primary);box-shadow:var(--shadow-glow)}.mode-icon{font-size:3rem;margin-bottom:var(--spacing-md)}.mode-title{font-size:1.25rem;margin-bottom:var(--spacing-sm)}.mode-desc{color:var(--color-text-secondary);margin-bottom:var(--spacing-lg);font-size:.875rem}.mode-btn{background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));color:#fff;border:none;padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-md);font-size:.875rem;font-weight:600;cursor:pointer;transition:all .3s}.mode-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-glow)}.mode-btn:disabled{opacity:.5;cursor:not-allowed}.scenario-select{display:flex;gap:var(--spacing-sm)}.select-input{flex:1;background-color:var(--color-bg-secondary);border:1px solid var(--color-border);color:var(--color-text-primary);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);font-size:.875rem}.quiz-stats{background-color:var(--color-bg-card);padding:var(--spacing-xl);border-radius:var(--radius-lg);border:1px solid var(--color-border)}.stats-title{font-size:1.25rem;margin-bottom:var(--spacing-lg)}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--spacing-md)}.stat-card{background-color:var(--color-bg-secondary);padding:var(--spacing-lg);border-radius:var(--radius-md);text-align:center}.stat-value{font-size:2rem;font-weight:700;color:var(--color-primary-light);font-family:var(--font-mono)}.stat-label{font-size:.75rem;color:var(--color-text-muted)}@media(max-width:768px){.page-title{font-size:1.5rem}.quiz-modes{grid-template-columns:1fr}.mode-icon{font-size:2.5rem}.stats-grid{grid-template-columns:repeat(2,1fr)}}.progress-page{padding-bottom:var(--spacing-2xl)}.page-header{margin-bottom:var(--spacing-xl);padding-bottom:var(--spacing-lg);border-bottom:1px solid var(--color-border)}.page-title{font-size:2rem;margin-bottom:var(--spacing-sm)}.page-desc{color:var(--color-text-secondary)}.overall-progress{display:flex;align-items:center;gap:var(--spacing-xl);background-color:var(--color-bg-card);padding:var(--spacing-xl);border-radius:var(--radius-lg);border:1px solid var(--color-border);margin-bottom:var(--spacing-xl)}.progress-circle{position:relative;width:150px;height:150px}.progress-ring{width:100%;height:100%;transform:rotate(-90deg)}.progress-ring-bg{fill:none;stroke:var(--color-bg-tertiary);stroke-width:8}.progress-ring-fill{fill:none;stroke:var(--color-primary);stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset .5s ease}.progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}.progress-percent{font-size:2.5rem;font-weight:700;color:var(--color-primary-light);font-family:var(--font-mono)}.progress-label{font-size:.875rem;color:var(--color-text-muted)}.progress-summary{display:flex;flex-direction:column;gap:var(--spacing-md);flex:1}.summary-item{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-sm) 0;border-bottom:1px solid var(--color-border)}.summary-item:last-child{border-bottom:none}.summary-value{font-size:1.5rem;font-weight:600;color:var(--color-primary-light);font-family:var(--font-mono)}.summary-label{color:var(--color-text-secondary);font-size:.875rem}.stages-progress{margin-bottom:var(--spacing-xl)}.section-title{font-size:1.5rem;margin-bottom:var(--spacing-lg)}.stages-list{display:flex;flex-direction:column;gap:var(--spacing-md)}.stage-progress-card{background-color:var(--color-bg-card);padding:var(--spacing-lg);border-radius:var(--radius-lg);border:1px solid var(--color-border);display:flex;align-items:center;gap:var(--spacing-lg)}.stage-info{display:flex;align-items:center;gap:var(--spacing-md);flex:1}.stage-num-badge{width:40px;height:40px;background-color:var(--color-bg-tertiary);color:var(--color-text-muted);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:1rem}.stage-details{flex:1}.stage-name{font-size:1rem;margin-bottom:var(--spacing-xs)}.stage-count{font-size:.75rem;color:var(--color-text-muted)}.stage-bar{display:flex;align-items:center;gap:var(--spacing-sm);min-width:150px}.stage-progress-bar{flex:1;height:6px;background-color:var(--color-bg-tertiary);border-radius:var(--radius-sm);overflow:hidden}.stage-progress-fill{height:100%;background:linear-gradient(90deg,var(--color-primary),var(--color-primary-light));border-radius:var(--radius-sm);transition:width .5s ease}.stage-percent{font-size:.875rem;color:var(--color-text-muted);font-family:var(--font-mono);min-width:40px;text-align:right}.achievements{margin-bottom:var(--spacing-xl)}.badges-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--spacing-md)}.badge-item{background-color:var(--color-bg-card);padding:var(--spacing-lg);border-radius:var(--radius-lg);border:1px solid var(--color-border);text-align:center;transition:all .3s}.badge-item.locked{opacity:.5}.badge-item:not(.locked){border-color:var(--color-accent-success);background-color:#42be651a}.badge-icon{font-size:2.5rem;margin-bottom:var(--spacing-sm)}.badge-name{font-size:.875rem;font-weight:600;margin-bottom:var(--spacing-xs)}.badge-desc{font-size:.75rem;color:var(--color-text-muted)}@media(max-width:768px){.overall-progress{flex-direction:column;text-align:center}.progress-circle{width:120px;height:120px}.progress-percent{font-size:2rem}.stage-progress-card{flex-direction:column;align-items:flex-start;gap:var(--spacing-sm)}.stage-bar{width:100%}.badges-grid{grid-template-columns:repeat(2,1fr)}.badge-icon{font-size:2rem}}:root{--color-primary: #054ADA;--color-primary-dark: #003d99;--color-primary-light: #4589ff;--color-terminal: #33FF00;--color-terminal-dim: #1a8000;--color-bg-primary: #1a1a2e;--color-bg-secondary: #16213e;--color-bg-tertiary: #0f3460;--color-bg-card: #252540;--color-text-primary: #ffffff;--color-text-secondary: #b8c5d6;--color-text-muted: #6b7a8f;--color-accent-success: #42be65;--color-accent-warning: #f1c21b;--color-accent-error: #fa4d56;--color-accent-info: #33FF00;--color-border: #3d3d5c;--shadow-card: 0 4px 6px -1px rgba(0, 0, 0, .3);--shadow-glow: 0 0 20px rgba(5, 74, 218, .3);--font-sans: "IBM Plex Sans", "Noto Sans TC", system-ui, sans-serif;--font-mono: "IBM Plex Mono", "Fira Code", monospace;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-sans);background-color:var(--color-bg-primary);color:var(--color-text-primary);line-height:1.6;min-height:100vh}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.3}h1{font-size:2rem}h2{font-size:1.75rem}h3{font-size:1.5rem}h4{font-size:1.25rem}code,pre,.font-mono{font-family:var(--font-mono)}.code-block{background-color:#0d1117;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-md);overflow-x:auto}.code-block .line-number{color:var(--color-text-muted);-webkit-user-select:none;user-select:none;padding-right:var(--spacing-md);text-align:right;min-width:3ch}.terminal-text{color:var(--color-terminal);text-shadow:0 0 5px rgba(51,255,0,.5)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--color-bg-secondary)}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--radius-sm)}::-webkit-scrollbar-thumb:hover{background:var(--color-primary-light)}@keyframes glow{0%,to{box-shadow:0 0 5px var(--color-primary)}50%{box-shadow:0 0 20px var(--color-primary),0 0 30px var(--color-primary-light)}}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}@keyframes slideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.animate-glow{animation:glow 2s ease-in-out infinite}.animate-blink{animation:blink 1s step-end infinite}.animate-slide-in{animation:slideIn .3s ease-out}.container{max-width:1200px;margin:0 auto;padding:var(--spacing-md)}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.gap-sm{gap:var(--spacing-sm)}.gap-md{gap:var(--spacing-md)}.gap-lg{gap:var(--spacing-lg)}.text-center{text-align:center}.text-terminal{color:var(--color-terminal)}.text-primary{color:var(--color-primary-light)}.text-muted{color:var(--color-text-muted)}@media(max-width:768px){html{font-size:16px;-webkit-text-size-adjust:100%;touch-action:manipulation}body{overflow-x:hidden;-webkit-overflow-scrolling:touch}.container{padding:var(--spacing-sm);padding-bottom:calc(var(--spacing-sm) + env(safe-area-inset-bottom));padding-left:calc(var(--spacing-sm) + env(safe-area-inset-left));padding-right:calc(var(--spacing-sm) + env(safe-area-inset-right))}button,a,input,select,textarea{min-height:44px;min-width:44px}.nav-link,.tab,.btn-primary,.btn-secondary{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}*{-webkit-overflow-scrolling:touch}}@supports (-webkit-touch-callout: none){html{height:-webkit-fill-available}body{min-height:-webkit-fill-available}.header{padding-top:env(safe-area-inset-top)}.footer{padding-bottom:env(safe-area-inset-bottom)}}@media(max-width:375px){html{font-size:15px}.container{padding:var(--spacing-xs)}}@media(max-height:500px)and (orientation:landscape){.hero{padding:var(--spacing-md) 0}.hero-title{font-size:1.5rem}}