@import"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;700&display=swap";:root{--bg-color: #fcfbf9;--text-color: #2c2929;--card-bg: #ffffff;--primary: #c0392b;--primary-hover: #a93226;--accent: #e67e22;--success: #27ae60;--border: #e0e0e0;--subtle-text: #7f8c8d;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px rgba(0, 0, 0, .05);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .05);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 20px;--font-main: "Outfit", system-ui, -apple-system, sans-serif}[data-theme=dark]{--bg-color: #1a1a1a;--text-color: #f5f5f5;--card-bg: #2d2d2d;--primary: #e74c3c;--primary-hover: #c0392b;--accent: #f39c12;--success: #2ecc71;--border: #404040;--subtle-text: #bdc3c7;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .3);--shadow-md: 0 4px 6px rgba(0, 0, 0, .3);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .3)}body{margin:0;font-family:var(--font-main);background-color:var(--bg-color);color:var(--text-color);-webkit-font-smoothing:antialiased;min-height:100vh}button{font-family:inherit;cursor:pointer;border:none;background:none}h1,h2,h3{margin:0;font-weight:600}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#dcdcdc;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#bdc3c7}.fade-in{animation:fadeIn .4s ease-out}.canvas-board{display:flex;justify-content:center;align-items:center;padding:2rem;width:100%}.chars-wrapper{display:flex;flex-wrap:wrap;justify-content:center;gap:0}.hanzi-target-container{position:relative;min-width:300px;min-height:300px;background:#fff;overflow:hidden;border:1px solid #ddd}.hanzi-target{position:relative;z-index:2}.grid-lines{position:absolute;inset:0;z-index:1;pointer-events:none}.grid-lines .line{position:absolute;background:transparent}.grid-lines .line.horizontal{top:50%;left:0;right:0;height:0;border-top:1.5px solid #ccc}.grid-lines .line.vertical{left:50%;top:0;bottom:0;width:0;border-left:1.5px solid #ccc}.grid-lines .line.diagonal-1{top:50%;left:50%;width:142%;height:0;border-top:1.5px solid #ddd;transform:translate(-50%,-50%) rotate(45deg)}.grid-lines .line.diagonal-2{top:50%;left:50%;width:142%;height:0;border-top:1.5px solid #ddd;transform:translate(-50%,-50%) rotate(-45deg)}.char-divider{width:2px;background:#ddd;z-index:10;height:302px;align-self:center;margin:0 -1px}.canvas-container{position:relative;background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:1rem;transition:transform .3s ease,box-shadow .3s ease}.canvas-container.test{border:2px solid var(--accent)}.canvas-container.practice{border:2px solid var(--success)}.canvas-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#ffffffe6;color:var(--subtle-text);font-weight:500;border-radius:var(--radius-lg)}.spinner{width:24px;height:24px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin 1s linear infinite;margin-top:1rem}.canvas-container.pointer-events-none{pointer-events:none}.canvas-container.interactive-blocking .hanzi-target-container{pointer-events:none;opacity:.9}.hanzi-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10}@keyframes spin{to{transform:rotate(360deg)}}.tutor-container{max-width:1000px;margin:0 auto;padding:1rem;display:flex;flex-direction:column;min-height:100vh;box-sizing:border-box;overflow-x:hidden}html,body{overflow-x:hidden;max-width:100%}.app-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding:1rem 0;border-bottom:1px solid var(--border);background:var(--bg-color)}@media(min-width:601px){.app-header{position:sticky;top:0;z-index:100;background:rgba(var(--header-bg-rgb, 252, 251, 249),.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);margin-bottom:2rem}[data-theme=dark] .app-header{background:#1a1a1af2}}.left-controls{display:flex;align-items:center;gap:6px}.right-controls{display:flex;align-items:center;gap:.5rem}.app-header h1{margin:0;font-size:1.5rem}.tutor-header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:1.5rem 0;width:100%}.left-placeholder,.right-placeholder{content:""}.center-controls{display:flex;align-items:center;gap:5rem;justify-content:center;width:fit-content;margin:0 auto}.header-btn-inline{color:var(--subtle-text);transition:all .2s cubic-bezier(.4,0,.2,1);background:transparent;border:none;padding:.5rem}.header-btn-inline:hover{color:var(--primary);transform:scale(1.1);background:rgba(var(--primary-rgb, 192, 57, 43),.05);border-radius:50%}.lesson-header-info{text-align:center;display:flex;flex-direction:column;align-items:center;gap:.5rem;flex-shrink:0}.lesson-header-info h1{font-size:1.25rem!important}.header-progress-container{display:flex;align-items:center;gap:.8rem;width:250px}.header-progress-bar{flex:1;height:8px;background:var(--border);border-radius:4px;overflow:hidden}.header-progress-fill{height:100%;background:var(--primary);transition:width .6s cubic-bezier(.4,0,.2,1)}.progress-label{font-size:.85rem;font-weight:700;color:var(--subtle-text);min-width:1.5rem}.progress-label.left{text-align:right}.progress-label.right{text-align:left}.icon-btn{padding:.5rem;color:var(--text-color);border-radius:var(--radius-sm);transition:background .2s}.icon-btn:hover{background:#0000000d}.logo-text{font-size:1.8rem;font-weight:800;margin:0;background:linear-gradient(45deg,var(--primary),#e67e22);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-.5px}.header-btn{display:flex;align-items:center;gap:.6rem;padding:.6rem 1rem;background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-color);font-weight:600;font-size:.95rem;transition:all .2s;box-shadow:var(--shadow-sm)}.header-btn:hover{background:var(--card-bg);color:var(--primary);border-color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow-md)}.progress-badge{font-weight:500;color:var(--subtle-text);background:var(--card-bg);padding:.5rem 1rem;border-radius:20px;box-shadow:var(--shadow-sm)}.main-stage{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2.5rem;width:100%;margin:0 auto;max-width:800px}.progress-stepper{display:flex;justify-content:center;align-items:center;gap:1rem}.step{display:flex;align-items:center;gap:.5rem;padding:.8rem 1.5rem;border-radius:30px;background:var(--card-bg);color:var(--subtle-text);box-shadow:var(--shadow-sm);font-weight:500;transition:all .3s ease}.step:hover{transform:translateY(-2px);background:#fff}.step.active{background:var(--primary);color:#fff;box-shadow:0 4px 10px #c0392b4d}.step.completed:not(.active){color:var(--success);border:1px solid var(--success)}.step-line{width:40px;height:2px;background:var(--border)}.stage-content{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;flex:1}.character-info-box{display:flex;align-items:center;justify-content:center;gap:1rem;background:#fff;padding:.8rem 2rem;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);border:1px solid var(--border);animation:fadeIn .3s ease-out;transition:opacity .3s,transform .3s}.character-info-box.hidden{opacity:0;transform:translateY(-5px);pointer-events:none}.info-visibility-wrapper{display:flex;flex-direction:column;align-items:center;gap:1.2rem;min-height:8rem;margin-bottom:2rem}.toggle-info-btn{padding:.6rem;background:#fff;color:var(--subtle-text);border:1px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .2s;box-shadow:var(--shadow-sm);z-index:5}.toggle-info-btn:hover{background:var(--card-bg);color:var(--primary);transform:scale(1.1);border-color:var(--subtle-text)}.character-info-box .meaning{font-size:1.5rem;font-weight:700;color:var(--text-color)}.character-info-box .pinyin{font-size:1.2rem;color:var(--primary);font-weight:500}.speak-btn{display:flex;align-items:center;justify-content:center;padding:.5rem;background:#fdf2f2;color:var(--primary);border-radius:50%;transition:all .2s}.speak-btn:hover{background:var(--primary);color:#fff;transform:scale(1.1)}.board-wrapper{display:flex;flex-direction:column;align-items:center;gap:2rem;width:100%}.instruction-text{font-size:1.2rem;color:var(--subtle-text);font-weight:300}.action-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.8rem 1.8rem;border-radius:var(--radius-md);font-weight:600;font-size:.95rem;transition:all .2s}.navigation-actions{display:flex;align-items:center;justify-content:center;gap:1.5rem;width:100%;margin:1.5rem auto 0}.action-btn.primary{background:var(--primary);color:#fff;box-shadow:0 4px 10px #c0392b4d}.action-btn.primary:hover{background:var(--primary-hover);transform:translateY(-2px)}.nav-btn{padding:.8rem;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);color:var(--subtle-text);display:flex;align-items:center;justify-content:center;border:1px solid var(--border);transition:all .2s}.nav-btn.small{padding:.6rem}.nav-btn:hover:not(:disabled){background:#fff;color:var(--primary);transform:scale(1.1);box-shadow:var(--shadow-md)}.nav-btn:disabled{opacity:.3;cursor:not-allowed;box-shadow:none}.menu-overlay{position:fixed;inset:0;background:#fffffff2;z-index:100;display:flex;flex-direction:column;padding:2rem;animation:fadeIn .2s ease-out}.menu-grid{max-width:800px;margin:0 auto;width:100%}.menu-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.char-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:1rem}.char-card{aspect-ratio:1;background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);font-size:2.5rem;display:flex;align-items:center;justify-content:center;position:relative;transition:all .2s}.char-card:hover{border-color:var(--primary);transform:translateY(-4px);box-shadow:var(--shadow-md)}.char-card.active{border-color:var(--primary);background:#fff5f5;color:var(--primary)}.char-card.done{border-color:var(--success)}.check-mark{position:absolute;top:8px;right:8px;color:var(--success)}.lesson-selector{padding:1rem 0}.lesson-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem}.lesson-card{background:var(--card-bg);border:1px solid transparent;border-radius:var(--radius-md);padding:1.5rem;display:flex;gap:1rem;align-items:flex-start;text-align:left;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;box-shadow:var(--shadow-sm)}.lesson-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}.lesson-card.active{background:#fff5f5;box-shadow:0 0 0 2px var(--primary)}.lesson-card.perfect-lesson{border-color:#f1c40f!important;background:linear-gradient(135deg,#fffcf0,#fff9e6)!important;box-shadow:0 4px 15px #f1c40f1a!important}.lesson-card.perfect-lesson:hover{box-shadow:0 8px 25px #f1c40f33!important;transform:translateY(-6px)}.lesson-check.gold{color:#f1c40f;filter:drop-shadow(0 0 5px rgba(241,196,15,.5));animation:pulse-gold 2s infinite ease-in-out}@keyframes pulse-gold{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.lesson-icon{background:#fdf2f2;color:var(--primary);padding:.8rem;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center}.lesson-card.completed .lesson-icon{background:#f0fdf4;color:var(--success)}.lesson-info h3{margin:0 0 .5rem;font-size:1.1rem;color:var(--text-color)}.lesson-info p{margin:0 0 .8rem;font-size:.9rem;color:var(--subtle-text);line-height:1.4}.lesson-progress-text{font-size:.85rem;font-weight:600;color:var(--subtle-text);margin-bottom:.4rem}.progress-row{width:100%}.lesson-progress-visual{margin-top:.8rem}.progress-bar-landscape{height:8px;width:100%;border-radius:4px;border-style:solid;overflow:hidden;display:block}.progress-fill{height:100%;transition:width .6s cubic-bezier(.4,0,.2,1)}.progress-pie-portrait{width:24px;height:24px;border-radius:50%;border:1.5px solid rgba(0,0,0,.05);display:none;box-shadow:0 1px 3px #0000001a}@media(orientation:portrait){.progress-bar-landscape{display:none!important}.progress-pie-portrait{display:block!important}.progress-row{display:flex;align-items:center;justify-content:space-between;gap:.8rem}.lesson-progress-visual{margin-top:0}.lesson-progress-text{margin-bottom:0!important}}@media(orientation:landscape){.progress-bar-landscape{display:block!important}.progress-pie-portrait{display:none!important}}.lesson-check{position:absolute;top:1rem;right:1rem;color:var(--success)}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.home-page{padding:2rem 0;display:flex;flex-direction:column;gap:4rem}.home-hero{text-align:center;padding:3rem 1rem;background:linear-gradient(135deg,#fff,#fff5f5);border-radius:var(--radius-lg);border:1px solid var(--border);box-shadow:var(--shadow-sm)}.home-hero h1{font-size:3.5rem;margin-bottom:1rem;background:linear-gradient(45deg,var(--primary),#e67e22);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.home-hero p{font-size:1.25rem;color:var(--subtle-text);max-width:600px;margin:0 auto}@media(max-width:600px){.tutor-container{padding:.5rem}.home-header{flex-direction:column;gap:1.5rem;padding:1.5rem 0;text-align:center;border-bottom:2px solid var(--border)}.home-header .left-controls{justify-content:center;width:100%}.home-header .right-controls{justify-content:center;width:100%;gap:.8rem}.tutor-header{display:flex;justify-content:center;padding:.5rem 0}.center-controls{gap:1.2rem;width:100%;justify-content:center;padding:0 .5rem}.lesson-header-info{flex:0 1 auto}.lesson-header-info h1{font-size:1rem!important}.header-progress-container{width:100%;max-width:180px;gap:.4rem}.main-stage{gap:1rem}.progress-stepper{gap:.4rem}.step{padding:.5rem .8rem;font-size:.85rem;gap:.3rem}.step-line{width:15px}.info-visibility-wrapper{min-height:6rem;gap:.8rem;margin-bottom:1rem}.character-info-box{padding:.5rem 1rem}.character-info-box .meaning{font-size:1.1rem}.character-info-box .pinyin{font-size:.95rem}.stage-content{padding:0 10px}.board-wrapper{gap:1rem}.hanzi-target-container{transform:scale(.8);margin:-30px 0}.navigation-actions{gap:.6rem;margin:.5rem auto 0;justify-content:center;width:fit-content}.action-btn{padding:.6rem 1.2rem;font-size:.85rem}.nav-btn{position:static;padding:.6rem;font-size:.85rem;aspect-ratio:1;width:40px;height:40px}.grid-lines{transform:scale(.85)}.home-page{padding:1rem 0;gap:2rem}.home-hero{padding:2rem 1rem}.home-hero h1{font-size:2.2rem}.home-hero p{font-size:1rem}.lesson-grid{grid-template-columns:1fr;gap:1rem}.lesson-card{padding:1rem;gap:.8rem}.section-header{margin-bottom:1.5rem}.section-header h2{font-size:1.5rem}.danger-zone{margin:3rem 0 1rem}.settings-link-btn{padding:.6rem 1.2rem;font-size:.95rem}.canvas-board.fade-in{padding:0}}.section-header{margin-bottom:2rem;display:flex;justify-content:space-between;align-items:center}.danger-zone{margin:6rem 0 2rem;padding-top:2rem;border-top:1px solid var(--border);text-align:center}.reset-all-btn{padding:.8rem 2rem;background:transparent;border:1.5px solid #bdc3c7;color:#7f8c8d;border-radius:var(--radius-md);font-weight:600;font-size:.95rem;transition:all .2s}.reset-all-btn:hover{background:#fdf2f2;color:var(--primary);border-color:var(--primary);transform:translateY(-2px)}.section-header h2{font-size:2rem;margin-bottom:.5rem}.section-header p{color:var(--subtle-text);margin:0}.settings-link-btn{display:flex;align-items:center;gap:.8rem;padding:.9rem 2rem;background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-color);font-weight:600;font-size:1.1rem;transition:all .2s;box-shadow:var(--shadow-sm)}.settings-link-btn:hover{background:var(--card-bg);color:var(--primary);border-color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow-md)}.home-stage{flex:1}.end-screen{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem 0;animation:fadeIn .5s ease-out}.end-card{background:#fff;padding:3rem;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);max-width:800px;width:100%;text-align:center;border:1px solid var(--border)}.end-header{margin-bottom:2rem}.trophy-icon{width:80px;height:80px;margin:0 auto 1.5rem;background:#fdf2f2;color:var(--primary);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 15px #c0392b33}.end-header h1{margin:0 0 .5rem;font-size:2.5rem;color:var(--text-color)}.stats-summary{display:flex;justify-content:center;gap:3rem;margin-bottom:3rem;padding:1.5rem;background:var(--card-bg);border-radius:var(--radius-md)}.stat-item{display:flex;flex-direction:column;align-items:center}.stat-value{font-size:2rem;font-weight:700;margin-bottom:.25rem}.stat-value.good{color:var(--success)}.stat-value.bad{color:var(--primary)}.stat-label{font-size:.9rem;color:var(--subtle-text);text-transform:uppercase;letter-spacing:.5px;font-weight:600}.character-report{text-align:left;margin-bottom:2rem}.character-report h3{margin:0 0 1rem;color:var(--subtle-text);font-size:1rem;text-transform:uppercase;letter-spacing:1px;font-weight:600}.report-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem}.report-card{background:#fff;padding:1rem;border-radius:var(--radius-md);border:1px solid var(--border);display:flex;flex-direction:column;gap:.5rem;transition:transform .2s}.report-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--primary);cursor:pointer}.report-card.perfect{border-color:var(--success);background:#f0fdf4}.report-card.perfect:hover{border-color:var(--success);box-shadow:0 4px 12px #22c55e33}.char-display{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}.char-display .char{font-size:2rem;font-weight:600;line-height:1}.char-display .pinyin{font-size:.9rem;color:var(--subtle-text);font-weight:500}.char-stats{display:flex;flex-direction:column;gap:.5rem;padding-top:.8rem;border-top:1px solid var(--border)}.stat-row{display:flex;align-items:center;justify-content:space-between;font-size:.9rem;color:var(--subtle-text)}.stat-row span:last-child{font-weight:600;color:var(--text-color)}.stat-row .icon{margin-right:.5rem}.stat-row .icon.error{color:var(--primary)}.stat-row .icon.success{color:var(--success)}.end-actions{display:flex;justify-content:center;gap:1rem;margin-top:2rem}.action-btn.secondary{background:#fff;border:1px solid var(--border);color:var(--text-color)}.action-btn.secondary:hover{background:var(--card-bg);border-color:var(--subtle-text)}.settings-page{flex:1;display:flex;justify-content:center;padding-top:2rem;animation:fadeIn .4s ease-out}.settings-card{background:#fff;width:100%;max-width:600px;height:fit-content;border-radius:var(--radius-lg);padding:3rem;box-shadow:var(--shadow-lg);border:1px solid var(--border)}.settings-section{display:flex;flex-direction:column;gap:1.5rem}.settings-section h2{font-size:1.25rem;margin:0 0 .5rem;color:var(--primary);text-transform:uppercase;letter-spacing:1px;font-weight:700}.setting-item{display:flex;justify-content:space-between;align-items:center;gap:2rem;padding:1.5rem 0;border-bottom:1px solid var(--border)}.setting-item:last-child{border-bottom:none}.setting-info label{display:block;font-weight:600;font-size:1.1rem;margin-bottom:.4rem;color:var(--text-color)}.setting-info p{margin:0;font-size:.9rem;color:var(--subtle-text);line-height:1.5}.switch{position:relative;display:inline-block;width:50px;height:28px;flex-shrink:0}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s}.slider:before{position:absolute;content:"";height:20px;width:20px;left:4px;bottom:4px;background-color:#fff;transition:.4s}input:checked+.slider{background-color:var(--primary)}input:focus+.slider{box-shadow:0 0 1px var(--primary)}input:checked+.slider:before{transform:translate(22px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.setting-item.vertical{flex-direction:column;align-items:flex-start;gap:1.5rem}.slider-group{width:100%;display:flex;flex-direction:column;align-items:center;gap:.8rem}.speed-badge{background:var(--primary);color:#fff;padding:.4rem 1rem;border-radius:20px;font-weight:700;font-size:1rem;box-shadow:0 4px 10px #c0392b33;animation:scaleIn .2s cubic-bezier(.175,.885,.32,1.275)}.speed-display-row{display:flex;align-items:center;gap:1rem}.reset-speed-btn{display:flex;align-items:center;gap:.5rem;padding:.3rem .8rem;background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);color:var(--subtle-text);font-size:.8rem;font-weight:600;cursor:pointer;transition:all .2s;margin-top:.2rem}.reset-speed-btn:hover{color:var(--primary);text-decoration:underline}@keyframes scaleIn{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}.slider-container{width:100%;max-width:400px;display:flex;align-items:center}.speed-slider{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:5px;background:#eee;outline:none;transition:background .2s}.speed-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--primary);cursor:pointer;box-shadow:0 2px 5px #0003;transition:transform .1s}.speed-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.speed-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--primary);cursor:pointer;border:none;box-shadow:0 2px 5px #0003}.theme-toggle-group{display:flex;align-items:center;justify-content:center;width:100%;gap:2rem;color:var(--subtle-text);padding:1rem 0}.theme-label{display:flex;align-items:center;gap:.5rem;font-weight:600;font-size:1rem;transition:all .2s}.theme-label.active{color:var(--primary)}.theme-label svg{transition:transform .2s}.theme-label.active svg{transform:scale(1.1)}[data-theme=dark] .hanzi-target-container{background:transparent}.workflow-editor{display:flex;flex-direction:column;gap:.8rem;margin-top:1rem}.workflow-item{display:flex;align-items:center;justify-content:space-between;background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-md);padding:.8rem 1rem;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s;cursor:grab}.workflow-item:active{cursor:grabbing}.workflow-item.dragging{opacity:.5;transform:scale(.98)}.workflow-item-left{display:flex;align-items:center;gap:.8rem}.drag-handle{color:var(--subtle-text);display:flex;align-items:center;cursor:grab}.step-number{font-weight:700;color:var(--text-color);font-size:1.1rem;min-width:1.5rem}.workflow-item-right{display:flex;align-items:center;gap:1rem}.workflow-mode-wrapper{display:flex;align-items:center;gap:.8rem;background:var(--card-bg);border:1px solid var(--border);padding:0 .5rem 0 .8rem;border-radius:var(--radius-sm);transition:border-color .2s}.workflow-mode-wrapper:focus-within{border-color:var(--primary);box-shadow:0 0 0 2px #c0392b1a}.mode-icon{color:var(--primary)}.workflow-mode-select{padding:.5rem 1.5rem .5rem 0;font:inherit;font-weight:600;border:none;background-color:transparent;color:var(--text-color);cursor:pointer;appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 0 center;background-size:1em}.workflow-mode-select:focus{outline:none}.workflow-item-right .delete-btn{color:#e74c3c;background:#fdf2f2}.workflow-item-right .delete-btn:hover{background:#fcd5d5}.add-step-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;margin-top:1rem;padding:1rem;background:transparent;border:2px dashed var(--border);border-radius:var(--radius-md);color:var(--primary);font-weight:600;font-size:1rem;cursor:pointer;transition:all .2s}.add-step-btn:hover{background:#fdf2f2;border-color:var(--primary)}.add-step-options{display:flex;flex-direction:column;gap:.8rem;margin-top:1.5rem}.add-step-options .action-btn{display:flex;justify-content:flex-start;padding:1rem;font-size:1.1rem}[data-theme=dark] .workflow-item{background:#2d2d2d;border-color:#444}[data-theme=dark] .workflow-mode-wrapper{background-color:#2d2d2d;border-color:#444}[data-theme=dark] .workflow-mode-select{background-color:transparent;border-color:transparent;color:#f1f1f1;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f1f1f1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e")}[data-theme=dark] .workflow-item-right .delete-btn{background:#e74c3c26}[data-theme=dark] .add-step-btn{border-color:#444}[data-theme=dark] .add-step-btn:hover{background:#c0392b26;border-color:var(--primary)}[data-theme=dark] .home-hero{background:linear-gradient(135deg,#2d2d2d,#1a1a1a);border-color:var(--border)}[data-theme=dark] .settings-card,[data-theme=dark] .canvas-container{background:var(--card-bg)}[data-theme=dark] .character-info-box{background:#2d2d2de6;border-color:var(--border)}[data-theme=dark] .grid-lines .line,[data-theme=dark] .speed-slider{background:#444}[data-theme=dark] .reset-speed-btn{color:var(--subtle-text)}[data-theme=dark] .settings-link-btn{background:var(--card-bg);border-color:var(--border);color:var(--text-color)}[data-theme=dark] .settings-link-btn:hover{border-color:var(--primary);background:#333}.resume-popup-overlay{position:fixed;inset:0;background:#0006;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:2rem}.resume-card{background:var(--card-bg);padding:2.5rem;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);max-width:440px;width:100%;text-align:center;border:1px solid var(--border)}.progress-stepper{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:2rem;background:var(--card-bg);padding:.8rem 1.5rem;border-radius:50px;box-shadow:var(--shadow-sm);width:fit-content;margin-left:auto;margin-right:auto;border:1px solid var(--border);flex-wrap:wrap;max-width:100%}.resume-icon{width:64px;height:64px;background:#fdf2f2;color:var(--primary);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem;box-shadow:0 4px 12px #c0392b26}.resume-card h2{margin:0 0 1rem;font-size:1.75rem;color:var(--text-color)}.resume-card p{margin:0 0 .5rem;color:var(--subtle-text)}.resume-card .resume-details{font-weight:600;color:var(--primary);font-size:1.1rem;margin:1.5rem 0 2rem}.resume-actions{display:flex;gap:1rem;justify-content:center}.resume-actions .action-btn{flex:1;justify-content:center}.tour-overlay{position:fixed;inset:0;z-index:10010;display:flex;align-items:center;justify-content:center;background:#0009;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:tour-fade-in .2s ease}@keyframes tour-fade-in{0%{opacity:0}to{opacity:1}}.tour-modal{background:var(--card-bg, #fff);border-radius:20px;padding:2.2rem 2.6rem;max-width:420px;width:90%;text-align:center;box-shadow:0 24px 64px #00000059;animation:tour-pop-in .3s cubic-bezier(.34,1.56,.64,1)}@keyframes tour-pop-in{0%{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}.tour-modal-icon{font-size:2.4rem;margin-bottom:.8rem;line-height:1}.tour-modal-title{font-size:1.45rem;font-weight:700;margin-bottom:.75rem;color:var(--text-color, #2c2929)}.tour-modal-body{font-size:1rem;color:var(--subtle-text, #666);line-height:1.65;margin-bottom:1.6rem}.tour-modal-actions{display:flex;gap:.9rem;justify-content:center}.tour-btn-primary{background:var(--primary, #c0392b);color:#fff;border:none;border-radius:10px;padding:.7rem 1.5rem;font-size:1rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:.35rem;transition:filter .18s,transform .15s}.tour-btn-primary:hover{filter:brightness(1.12);transform:scale(1.04)}.tour-btn-secondary{background:transparent;color:var(--subtle-text, #888);border:1.5px solid var(--border, #ddd);border-radius:10px;padding:.7rem 1.5rem;font-size:1rem;cursor:pointer;transition:background .18s}.tour-btn-secondary:hover{background:var(--background, #f5f5f5)}.tour-btn-next{margin:0 auto}.tour-click-blocker{position:fixed;inset:0;z-index:10000;pointer-events:all;cursor:not-allowed;background:#00000094;-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px);animation:tour-fade-in .25s ease}.tour-spotlight-box{position:fixed;z-index:10001;pointer-events:none;border-radius:14px;transition:top .25s ease,left .25s ease,width .25s ease,height .25s ease;background:#ffffff1a;box-shadow:0 0 0 9999px transparent,0 0 0 2px #fbbf24cc,0 0 15px #fbbf2466;animation:tour-spotlight-glow 1.8s ease-in-out infinite alternate}@keyframes tour-spotlight-glow{0%{box-shadow:0 0 0 9999px transparent,0 0 0 3px #fbbf24,0 0 0 7px #fbbf2459,0 0 22px 10px #fbbf244d}to{box-shadow:0 0 0 9999px transparent,0 0 0 3px #f59e0b,0 0 0 10px #fbbf248c,0 0 32px 14px #fbbf2473}}.tour-target-raised{position:relative!important;z-index:100000!important;pointer-events:auto!important;cursor:pointer!important}.tour-target-glow{background:#fff6!important;box-shadow:0 0 20px 5px #fff9!important;border-radius:50%!important}.tour-parent-raised{position:relative!important;z-index:99999!important;pointer-events:none!important}.tour-parent-raised>*{pointer-events:none}.tour-parent-raised .tour-target-raised{pointer-events:auto!important}.tour-arrow{width:0;height:0;position:fixed;z-index:10004;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}.tour-arrow-up{border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:13px solid #1a2035}.tour-arrow-down{border-left:9px solid transparent;border-right:9px solid transparent;border-top:13px solid #1a2035}.tour-arrow-left{border-top:9px solid transparent;border-bottom:9px solid transparent;border-right:13px solid #1a2035}.tour-arrow-right{border-top:9px solid transparent;border-bottom:9px solid transparent;border-left:13px solid #1a2035}.tour-spotlight-tooltip{background:#1a2035;color:#f0f0f0;border-radius:12px;padding:.8rem 1.1rem;font-size:.95rem;font-weight:500;line-height:1.55;text-align:center;box-shadow:0 6px 24px #00000073;animation:tour-fade-in .2s ease}.tour-info-banner{position:fixed;bottom:2rem;left:50%;transform:translate(-50%);z-index:10010;background:#1a2035;color:#f0f0f0;border-radius:999px;padding:.75rem 1.5rem;font-size:.95rem;font-weight:500;display:flex;align-items:center;gap:.65rem;box-shadow:0 6px 24px #00000059;white-space:nowrap;pointer-events:none;animation:tour-slide-up .3s ease}@keyframes tour-slide-up{0%{transform:translate(-50%) translateY(18px);opacity:0}to{transform:translate(-50%) translateY(0);opacity:1}}.tour-info-dot{width:9px;height:9px;border-radius:50%;background:#fbbf24;box-shadow:0 0 6px #fbbf24;flex-shrink:0;animation:tour-dot-pulse 1.6s ease-in-out infinite}@keyframes tour-dot-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.85)}}