/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}.collapse{visibility:collapse}.invisible{visibility:hidden}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.container{width:100%}.block{display:block}.contents{display:contents}.flex{display:flex}.flow-root{display:flow-root}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.inline-grid{display:inline-grid}.inline-table{display:inline-table}.list-item{display:list-item}.table{display:table}.table-caption{display:table-caption}.table-cell{display:table-cell}.table-column{display:table-column}.table-column-group{display:table-column-group}.table-footer-group{display:table-footer-group}.table-header-group{display:table-header-group}.table-row{display:table-row}.table-row-group{display:table-row-group}.flex-shrink{flex-shrink:1}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.transform\!{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)!important}.resize{resize:both}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.border{border-style:var(--tw-border-style);border-width:1px}.break-all{word-break:break-all}.capitalize{text-transform:capitalize}.lowercase{text-transform:lowercase}.uppercase{text-transform:uppercase}.italic{font-style:italic}.line-through{text-decoration-line:line-through}.overline{text-decoration-line:overline}.underline{text-decoration-line:underline}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter\!{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)!important}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}:root{--bg:#fff;--bg-soft:#f8fafc;--text:#1f2937;--primary:#0ea5e9;--border-color:#e5e7eb}.dark{--bg:#0b1220;--bg-soft:#0f172a;--text:#e5e7eb;--primary:#38bdf8;--border-color:#1f2937}*,:before,:after{box-sizing:border-box}html,body,#app{height:100%}body{color:var(--text);background:var(--bg);margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Arial,Noto Sans SC,Microsoft YaHei,sans-serif;line-height:1.6}h1,h2,h3{margin:.25rem 0 .75rem}p{margin:.25rem 0}*{box-sizing:border-box;margin:0;padding:0;font-family:Noto Sans SC,sans-serif}body{color:#2c3e50;background:linear-gradient(135deg,#667eea,#764ba2);justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.glass-container{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffffd9;border-radius:25px;grid-template:"header header""sidebar main"1fr/1fr 2fr;gap:20px;width:95%;max-width:1400px;min-height:90vh;padding:30px;display:grid;overflow:hidden;box-shadow:0 20px 50px #0003}header{border-bottom:2px solid #4ecdc44d;grid-area:header;justify-content:space-between;align-items:center;padding-bottom:20px;display:flex}.logo{align-items:center;gap:15px;display:flex}.logo-icon{color:#fff;background:linear-gradient(135deg,#4ecdc4,#45b7d1);border-radius:15px;justify-content:center;align-items:center;width:50px;height:50px;font-size:28px;font-weight:700;display:flex}.logo-text{-webkit-text-fill-color:transparent;background:linear-gradient(135deg,#4ecdc4,#764ba2);-webkit-background-clip:text;font-size:28px;font-weight:700}.nav-links{gap:25px;display:flex}.nav-link{cursor:pointer;color:inherit;border-radius:50px;padding:10px 20px;font-weight:500;text-decoration:none;transition:all .3s}.nav-link:hover{background:#4ecdc433}.nav-link.active{color:#fff;background:linear-gradient(135deg,#4ecdc4,#45b7d1);box-shadow:0 5px 15px #4ecdc466}.sidebar{flex-direction:column;grid-area:sidebar;gap:20px;display:flex}.search-section{background:#ffffffb3;border-radius:20px;padding:25px;box-shadow:0 10px 30px #0000000d}.section-title{color:#2c3e50;align-items:center;gap:10px;margin-bottom:20px;font-size:20px;font-weight:700;display:flex}.section-title i{color:#fff;background:#4ecdc4;border-radius:10px;justify-content:center;align-items:center;width:36px;height:36px;display:flex}.search-container{margin-bottom:25px;position:relative}.search-input{background:#ffffffe6;border:none;border-radius:15px;width:100%;padding:16px 20px 16px 50px;font-size:16px;transition:all .3s;box-shadow:0 5px 15px #0000000d}.search-input:focus{outline:none;box-shadow:0 5px 20px #4ecdc466}.search-icon{color:#4ecdc4;font-size:20px;position:absolute;top:50%;left:15px;transform:translateY(-50%)}.history-container{background:#ffffffb3;border-radius:15px;max-height:300px;padding:15px;overflow-y:auto}.history-title{color:#555;margin-bottom:10px;font-size:16px}.history-items{flex-wrap:wrap;gap:10px;display:flex}.history-item{cursor:pointer;background:#4ecdc433;border-radius:50px;padding:8px 15px;font-size:16px;transition:all .2s}.history-item:hover{background:#4ecdc466;transform:translateY(-2px)}.controls-section{background:#ffffffb3;border-radius:20px;flex-direction:column;gap:25px;padding:25px;display:flex;box-shadow:0 10px 30px #0000000d}.control-group{flex-direction:column;gap:15px;display:flex}.control-title{color:#2c3e50;font-size:18px;font-weight:600}.btn{cursor:pointer;border:none;border-radius:15px;justify-content:center;align-items:center;gap:10px;padding:16px 25px;font-size:18px;font-weight:600;transition:all .3s;display:flex}.btn-primary{color:#fff;background:linear-gradient(135deg,#4ecdc4,#45b7d1);box-shadow:0 8px 20px #4ecdc466}.btn-primary:hover{transform:translateY(-3px);box-shadow:0 12px 25px #4ecdc499}.btn-secondary{color:#2c3e50;background:#ffffffe6;box-shadow:0 5px 15px #00000014}.btn-secondary:hover{background:#fff;transform:translateY(-3px);box-shadow:0 8px 20px #0000001a}.setting-options{flex-direction:column;gap:12px;display:flex}.option-row{border-bottom:1px solid #0000000d;justify-content:space-between;align-items:center;padding:12px 0;display:flex}.option-label{color:#555;font-size:16px}.toggle-switch{width:50px;height:26px;display:inline-block;position:relative}.toggle-switch input{opacity:0;width:0;height:0}.slider{cursor:pointer;background-color:#ccc;border-radius:34px;transition:all .4s;position:absolute;top:0;right:0;bottom:0;left:0}.slider:before{content:"";background-color:#fff;border-radius:50%;width:18px;height:18px;transition:all .4s;position:absolute;bottom:4px;left:4px}input:checked+.slider{background:linear-gradient(135deg,#4ecdc4,#45b7d1)}input:checked+.slider:before{transform:translate(24px)}.size-controls{gap:10px;display:flex}.size-btn{cursor:pointer;background:#fffc;border:none;border-radius:10px;flex:1;padding:10px;transition:all .2s}.size-btn.active{color:#fff;background:linear-gradient(135deg,#4ecdc4,#45b7d1)}.main-section{flex-direction:column;grid-area:main;gap:20px;display:flex}.character-display{background:#ffffffb3;border-radius:20px;flex-direction:column;align-items:center;width:100%;min-width:900px;min-height:400px;padding:30px;display:flex;box-shadow:0 10px 30px #0000000d}.character-container{justify-content:center;align-items:center;width:100%;margin:20px 0;display:flex}.stroke-demo{flex-direction:column;align-items:center;display:flex}.hanzi-stage{cursor:pointer;width:300px;height:300px;position:relative}.hanzi-canvas{z-index:1;width:100%;height:100%;position:relative}.hanzi-canvas svg path.hanzi-hover-highlight{filter:drop-shadow(0 0 7px #ff7640bf);opacity:1!important;stroke:#ff503ceb!important}#hanzi-target{justify-content:center;align-items:center;width:300px;height:300px;display:flex}.stroke-breakdown-card{background:#ffffffb3;border-radius:20px;margin-top:20px;padding:25px;box-shadow:0 10px 30px #0000000d}.stroke-breakdown{background:#fffc;border-radius:15px;width:100%;margin-top:10px;padding:15px 20px}.breakdown-title{color:#2c3e50;text-align:center;margin-bottom:15px;font-size:18px;font-weight:600}.stroke-list{flex-wrap:wrap;justify-content:center;gap:15px;padding:10px 0;display:flex}.stroke-item{cursor:pointer;background:#ffffffe6;border-radius:10px;flex-direction:column;align-items:center;padding:10px 15px;transition:all .2s;display:flex;box-shadow:0 3px 8px #0000000d}.stroke-item:hover{transform:translateY(-3px);box-shadow:0 5px 12px #4ecdc44d}.stroke-item.disabled{opacity:.6;cursor:not-allowed}.stroke-item.disabled:hover{transform:none;box-shadow:0 3px 8px #0000000d}.stroke-number{color:#fff;background:#4ecdc4;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;margin-bottom:8px;font-size:14px;font-weight:600;display:flex}.stroke-char{color:#333;font-size:28px}.stroke-name{color:#666;margin-top:8px;font-size:14px}.stroke-controls{display:none}.character-info{justify-content:center;gap:30px;width:100%;margin-top:20px;display:flex}.info-item{text-align:center;background:#fffc;border-radius:15px;flex:1;max-width:150px;padding:12px 20px;box-shadow:0 5px 15px #0000000d}.info-label{color:#555;margin-bottom:5px;font-size:14px}.info-value{color:#4ecdc4;font-size:20px;font-weight:700}.meaning{text-align:center;max-width:600px;margin-top:20px;font-size:18px;line-height:1.6}.animation-section{display:none}.writing-section{z-index:100;background:#fff;border-radius:25px 25px 0 0;height:400px;padding:30px;transition:bottom .5s;position:fixed;bottom:-400px;left:0;right:0;box-shadow:0 -10px 40px #00000026}.writing-section.active{bottom:0}.writing-header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.writing-title-block{flex-direction:column;gap:6px;display:flex}.writing-title{color:#2c3e50;font-size:24px;font-weight:700}.stroke-check-status{min-height:20px;font-size:14px;font-weight:600}.stroke-check-status.info{color:#5b6770}.stroke-check-status.ok{color:#1e9d73}.stroke-check-status.warn{color:#e4572e}.writing-actions{align-items:center;gap:12px;display:flex}.clear-btn{color:#238a84;cursor:pointer;background:#4ecdc424;border:none;border-radius:10px;padding:8px 14px;font-size:14px;font-weight:600;transition:all .2s}.clear-btn:hover{background:#4ecdc43d;transform:translateY(-1px)}.close-btn{cursor:pointer;color:#f7931e;background:#f7931e1a;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-size:20px;transition:all .2s;display:flex}.close-btn:hover{background:#f7931e33;transform:rotate(90deg)}.writing-area{background:#f8f9fa;border:2px dashed #dee2e6;border-radius:15px;width:100%;height:300px;position:relative;overflow:hidden}.practice-stage{justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative}.writing-canvas{z-index:2;touch-action:none;cursor:crosshair;position:absolute;top:0;right:0;bottom:0;left:0}.tianzige-frame{background:#ffffffd1;border:2px dashed #f7931e73;position:absolute;top:50%;left:50%;overflow:hidden;transform:translate(-50%,-50%);box-shadow:inset 0 0 0 1px #f7931e26}.tianzige-line{pointer-events:none;position:absolute}.tianzige-line.horizontal{border-top:1px dashed #f7931e73;height:0;top:50%;left:0;right:0;transform:translateY(-50%)}.tianzige-line.vertical{border-left:1px dashed #f7931e73;width:0;top:0;bottom:0;left:50%;transform:translate(-50%)}.tianzige-line.diagonal-a{border-top:1px dashed #f7931e73;width:150%;height:0;top:50%;left:50%;transform:translate(-50%,-50%)rotate(45deg)}.tianzige-line.diagonal-b{border-top:1px dashed #f7931e73;width:150%;height:0;top:50%;left:50%;transform:translate(-50%,-50%)rotate(-45deg)}.character-outline{color:#f7931e38;pointer-events:none;z-index:1;line-height:1;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@media(max-width:992px){.glass-container{grid-template-columns:1fr;grid-template-areas:"header""sidebar""main"}}@media(max-width:768px){.character-info{flex-wrap:wrap}.info-item{min-width:120px}}.select-input{color:#2c3e50;background:#ffffffe6;border:none;border-radius:10px;width:100%;padding:10px 15px;font-size:16px;box-shadow:0 3px 10px #0000000d}.select-input:focus{outline:none;box-shadow:0 3px 15px #4ecdc44d}.content-textarea{resize:vertical;background:#ffffffe6;border:none;border-radius:15px;width:100%;height:150px;margin-bottom:15px;padding:15px;font-size:16px;box-shadow:0 5px 15px #0000000d}.content-textarea:focus{outline:none;box-shadow:0 5px 20px #4ecdc466}.preview-container{background:#ffffffb3;border-radius:20px;flex:1;width:100%;min-width:860px;padding:25px;box-shadow:0 10px 30px #0000000d}.preview-area{background:#f7f8fb;border-radius:15px;justify-content:center;align-items:flex-start;width:100%;min-width:860px;min-height:400px;margin:20px 0;padding:20px;display:flex;overflow:auto;box-shadow:inset 0 0 0 1px #0000000a}.preview-area .zitie-placeholder{width:100%}.zitie-pages{flex-direction:column;align-items:center;gap:20px;display:flex}.zitie-paper{box-sizing:border-box;background:#fff;border:1px solid #d9dde5;box-shadow:0 12px 26px #2d3e5024}.zitie-grid{border-top:none;border-left:none;width:-moz-fit-content;width:fit-content}.zitie-grid.is-pinyin-grid{border-top:none;border-left:none}.zitie-cell{box-sizing:border-box;border-bottom:1px solid #d8dde6;border-right:1px solid #d8dde6;position:relative;overflow:visible}.zitie-grid:not(.is-pinyin-grid) .zitie-cell{border-top:1px solid #d8dde6}.zitie-grid:not(.is-pinyin-grid) .zitie-cell.is-row-first{border-left:1px solid #d8dde6}.zitie-line{pointer-events:none;z-index:1;position:absolute}.zitie-line.horizontal{border-top:1px dashed #f5984680;top:50%;left:0;right:0;transform:translateY(-50%)}.zitie-line.vertical{border-left:1px dashed #f5984680;top:0;bottom:0;left:50%;transform:translate(-50%)}.zitie-line.diagonal-a{border-top:1px dashed #f5984680;width:150%;top:50%;left:50%;transform:translate(-50%,-50%)rotate(45deg)}.zitie-line.diagonal-b{border-top:1px dashed #f5984680;width:150%;top:50%;left:50%;transform:translate(-50%,-50%)rotate(-45deg)}.zitie-grid.is-pinyin-grid .zitie-cell{border-color:#22a36f;border-top-style:solid;border-top-width:1px;border-left-style:solid;border-left-width:1px}.zitie-cell.is-pinyin{--pinyin-head-height:22px;display:block}.zitie-placeholder{text-align:center;color:#aaa;font-size:18px;line-height:1.6}.preview-controls{justify-content:flex-end;gap:15px;display:flex}.templates-section{background:#ffffffb3;border-radius:20px;margin-top:20px;padding:25px;box-shadow:0 10px 30px #0000000d}.templates-grid{grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px;display:grid}.template-item{cursor:pointer;text-align:center;background:#fffc;border-radius:15px;padding:15px;transition:all .3s;box-shadow:0 5px 15px #0000000d}.template-item:hover{transform:translateY(-5px);box-shadow:0 8px 20px #0000001a}.template-item.active{border:2px solid #4ecdc4;box-shadow:0 5px 20px #4ecdc44d}.template-preview{background-position:50%;background-size:cover;border-radius:10px;height:100px;margin-bottom:10px}.tianzi-preview{background-image:url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100' height='100' fill='white' stroke='%23ddd' stroke-width='2'/%3E%3Cline x1='0' y1='50' x2='100' y2='50' stroke='%23ddd' stroke-width='1'/%3E%3Cline x1='50' y1='0' x2='50' y2='100' stroke='%23ddd' stroke-width='1'/%3E%3C/svg%3E")}.miezi-preview{background-image:url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100' height='100' fill='white' stroke='%23ddd' stroke-width='2'/%3E%3Cline x1='0' y1='50' x2='100' y2='50' stroke='%23ddd' stroke-width='1'/%3E%3Cline x1='50' y1='0' x2='50' y2='100' stroke='%23ddd' stroke-width='1'/%3E%3Cline x1='0' y1='0' x2='100' y2='100' stroke='%23ddd' stroke-width='1'/%3E%3Cline x1='100' y1='0' x2='0' y2='100' stroke='%23ddd' stroke-width='1'/%3E%3C/svg%3E")}.pinyin-preview{background-image:url("data:image/svg+xml,%3Csvg width='100' height='120' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100' height='120' fill='white' stroke='%23ddd' stroke-width='2'/%3E%3Cline x1='0' y1='30' x2='100' y2='30' stroke='%23ddd' stroke-width='1'/%3E%3Cline x1='0' y1='75' x2='100' y2='75' stroke='%23ddd' stroke-width='1'/%3E%3Cline x1='50' y1='30' x2='50' y2='120' stroke='%23ddd' stroke-width='1'/%3E%3C/svg%3E")}.template-name{color:#2c3e50;font-size:16px;font-weight:500}@media(max-width:992px){.templates-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:768px){.templates-grid{grid-template-columns:repeat(2,1fr)}.preview-controls{flex-direction:column}}@media print{.zitie-pages{gap:0}.zitie-paper{box-shadow:none;-moz-column-break-after:page;break-after:page;page-break-after:always}.zitie-paper:last-child{-moz-column-break-after:auto;break-after:auto;page-break-after:auto}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}