:root,:root[data-theme=light]{--primary-color:#0284c7;--primary-hover:#0369a1;--bg-color:#f8fafc;--text-color:#0f172a;--muted-text:#64748b;--card-bg:#ffffffd9;--card-sub-bg:#f1f5f9e6;--border-color:#cbd5e1;--shadow-color:#0000000f;--editor-bg:#ffffffb8;--editor-border:#cbd5e1cc;--input-bg:#fff;--input-border:#cbd5e1;--candidate-bg:#fffffff5;--candidate-border:#cbd5e1;--candidate-hover:#0284c714;--guide-bg:#fff9;--guide-border:#0f172a29;--title-glow:drop-shadow(0 0 3px #fff) drop-shadow(0 0 10px #fffffff2) drop-shadow(0 0 22px #0284c7bf) drop-shadow(0 0 36px #0284c773);--subtitle-glow:0 0 4px #fff, 0 0 12px #fff, 0 0 24px #0284c7d9, 0 0 40px #0284c780;--kbd-bg:#0f172a0f;--kbd-border:#0f172a29;--kbd-text:#0f172a;--pill-bg:#0f172a0d;--pill-hover:#0f172a1a;--pill-text:#475569;--font-sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root[data-theme=dark]{--primary-color:#38bdf8;--primary-hover:#0ea5e9;--bg-color:#0f172a;--text-color:#f8fafc;--muted-text:#94a3b8;--card-bg:#1e293bcc;--card-sub-bg:#0f172a99;--border-color:#334155;--shadow-color:#0006;--editor-bg:#141821a6;--editor-border:#ffffff1f;--input-bg:#1e293b;--input-border:#334155;--candidate-bg:#14171cf5;--candidate-border:#ffffff1a;--candidate-hover:#38bdf826;--guide-bg:#0f172a73;--guide-border:#ffffff1f;--title-glow:drop-shadow(0 0 1px #000) drop-shadow(0 0 2px #000) drop-shadow(0 0 4px #000000f2) drop-shadow(0 0 9px #000000d9) drop-shadow(0 0 16px #000000bf);--subtitle-glow:0 0 1px #000, 0 0 3px #000, 0 0 7px #000000f2, 0 0 14px #000000bf;--kbd-bg:#ffffff14;--kbd-border:#ffffff2e;--kbd-text:#f8fafc;--pill-bg:#ffffff0f;--pill-hover:#ffffff1f;--pill-text:#94a3b8;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background-color:var(--bg-color);color:var(--text-color);min-height:100vh;line-height:1.6;transition:background-color .3s,color .3s}.glass-panel{background:var(--card-bg);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-color);border-radius:16px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}h1,h2,h3,h4,h5,h6{margin-bottom:1rem;font-weight:700;line-height:1.2}h1{background:linear-gradient(135deg, var(--primary-color), #8b5cf6);-webkit-text-fill-color:transparent;letter-spacing:-.02em;filter:none;-webkit-background-clip:text;background-clip:text;font-size:3.5rem;transition:filter .3s}.hero-subtitle{color:var(--text-color);opacity:.7;text-shadow:none;margin-bottom:3rem;font-size:1.2rem;font-weight:500;transition:text-shadow .3s,opacity .3s}.btn{cursor:pointer;background-color:var(--primary-color);color:#fff;border:none;border-radius:9999px;justify-content:center;align-items:center;padding:.75rem 2rem;font-size:1.125rem;font-weight:600;text-decoration:none;transition:all .3s cubic-bezier(.16,1,.3,1);display:inline-flex}.btn:hover{background-color:var(--primary-hover);transform:translateY(-2px);box-shadow:0 10px 15px -3px #0ea5e966}.btn:active{transform:translateY(0)}.pinyin-tab-btn{cursor:pointer;color:var(--muted-text);background-color:#0000;border:none;border-radius:6px;justify-content:center;align-items:center;padding:8px 16px;font-size:.9rem;font-weight:400;transition:all .3s cubic-bezier(.16,1,.3,1);display:inline-flex;position:relative}.pinyin-tab-btn.active{background-color:var(--primary-color);color:#fff;font-weight:600}.pinyin-tab-btn:hover{z-index:2;transform:translateY(-2px);box-shadow:0 10px 15px -3px #0ea5e966}.pinyin-tab-btn.active:hover{background-color:var(--primary-hover)}.pinyin-tab-btn:not(.active):hover{background-color:var(--pill-hover);color:var(--text-color)}.pinyin-tab-btn:active{transform:translateY(0)}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes blink{50%{opacity:0}}.animate-fade-in{animation:.8s cubic-bezier(.16,1,.3,1) forwards fadeIn}.container{max-width:1200px;margin:0 auto;padding:2rem}.blogger-content{color:var(--text-color)}.blogger-content table{border-collapse:collapse}.blogger-content table,.blogger-content td,.blogger-content th{border-color:var(--border-color)!important;color:var(--text-color)!important}.blogger-content .xl27,.blogger-content .xl20,.blogger-content .xl10{background-color:var(--card-sub-bg)!important;color:var(--text-color)!important}.blogger-content a{color:var(--primary-color)!important}body[data-photo-mode=true],html[data-photo-mode=true] body{background-repeat:no-repeat;background-attachment:fixed;min-height:100svh;transition:background-image .4s,background-color .4s}html[data-theme=dark] body[data-photo-mode=true]{background-color:#0b0f17}html[data-theme=light] body[data-photo-mode=true],:root:not([data-theme=dark]) body[data-photo-mode=true]{background-color:#f8fafc}@media (min-width:768px){html[data-theme=dark] body[data-photo-mode=true]{background-image:linear-gradient(180deg, #0b0f1766 0%, #0b0f1799 50%, #0b0f17b8 100%), var(--photo-bg-pc,url(/images/backgrounds/pc1.webp));background-position:50% 55%;background-size:cover}html[data-theme=light] body[data-photo-mode=true],:root:not([data-theme=dark]) body[data-photo-mode=true]{background-image:var(--photo-bg-pc,url(/images/backgrounds/pc1.webp));background-position:50% 55%;background-size:cover}}@media (max-width:767px){html[data-theme=dark] body[data-photo-mode=true]{background-image:linear-gradient(180deg, #0b0f176b 0%, #0b0f17a6 50%, #0b0f17c7 100%), var(--photo-bg-mobile,url(/images/backgrounds/mobile1.webp));background-position:top;background-size:cover}html[data-theme=light] body[data-photo-mode=true],:root:not([data-theme=dark]) body[data-photo-mode=true]{background-image:var(--photo-bg-mobile,url(/images/backgrounds/mobile1.webp));background-position:top;background-size:cover}}body[data-photo-mode=true] .glass-panel{background:var(--card-bg)!important;-webkit-backdrop-filter:blur(20px)!important;box-shadow:0 8px 32px var(--shadow-color)!important}body[data-photo-mode=true] header,html[data-photo-mode=true] header{background:var(--guide-bg)!important;border-bottom:1px solid var(--guide-border)!important;-webkit-backdrop-filter:blur(12px)!important;box-shadow:0 4px 20px var(--shadow-color)!important}body[data-photo-mode=true] h1,html[data-photo-mode=true] h1{filter:var(--title-glow)!important;font-weight:850!important}body[data-photo-mode=true] .hero-subtitle,html[data-photo-mode=true] .hero-subtitle{opacity:1!important;text-shadow:var(--subtitle-glow)!important;font-weight:700!important}html[data-theme=light] body[data-photo-mode=true] .pinyin-selector,:root:not([data-theme=dark]) body[data-photo-mode=true] .pinyin-selector,html[data-theme=light] body[data-photo-mode=true] .copy-btn,:root:not([data-theme=dark]) body[data-photo-mode=true] .copy-btn{background:var(--guide-bg)!important;border:1px solid var(--guide-border)!important;-webkit-backdrop-filter:blur(10px)!important;box-shadow:0 4px 16px var(--shadow-color)!important}html[data-theme=light] body[data-photo-mode=true] .pinyin-selector .pinyin-tab-btn:not(.active){color:#334155!important;font-weight:500!important}html[data-theme=light] body[data-photo-mode=true] .pinyin-selector .pinyin-tab-btn:not(.active):hover{color:var(--text-color)!important;background:#fff6!important}html[data-theme=light] body[data-photo-mode=true] .copy-btn:hover{background:#ffffffd9!important}.horizontal-roll-track::-webkit-scrollbar{height:8px}.horizontal-roll-track::-webkit-scrollbar-track{background:#0000000d;border-radius:4px}.horizontal-roll-track::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}.horizontal-roll-track::-webkit-scrollbar-thumb:hover{background:var(--primary-color)}.horizontal-roll-track>div{transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s}.horizontal-roll-track>div:hover{transform:translateY(-4px);box-shadow:0 10px 25px -5px var(--shadow-color), 0 0 15px #0284c733!important}.landing-sub-nav{scrollbar-width:none;-ms-overflow-style:none}.landing-sub-nav::-webkit-scrollbar{display:none}.sub-nav-btn{white-space:nowrap;transition:all .2s cubic-bezier(.16,1,.3,1)}.sub-nav-btn:hover:not(.active){transform:translateY(-1px);color:var(--text-color)!important;background:#ffffff26!important}.sub-nav-btn.active{box-shadow:0 2px 10px #0284c759!important}.landing-section-card{transition:border-color .3s,box-shadow .3s}.landing-section-card:target{border-color:var(--primary-color)!important;box-shadow:0 0 20px #0284c74d!important}.video-responsive-wrapper{width:100%;height:0;box-shadow:0 4px 16px var(--shadow-color);border-radius:12px;padding-bottom:56.25%;position:relative;overflow:hidden}.video-responsive-wrapper iframe{border:0;width:100%;height:100%;position:absolute;top:0;left:0}@keyframes copiedPopIn{0%{opacity:0;transform:translate(-50%,6px)scale(.92)}50%{transform:translate(-50%,-2px)scale(1.04)}to{opacity:1;transform:translate(-50%)scale(1)}}.copied-toast-bubble{color:#fff;white-space:nowrap;pointer-events:none;z-index:50;background:#10b981f2;border-radius:6px;align-items:center;gap:5px;padding:6px 12px;font-size:.825rem;font-weight:700;animation:.25s cubic-bezier(.16,1,.3,1) forwards copiedPopIn;display:flex;position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%);box-shadow:0 4px 14px #10b98166,0 2px 6px #00000026}.copied-toast-bubble:after{content:"";border:5px solid #0000;border-top-color:#10b981f2;border-bottom-width:0;position:absolute;top:100%;left:50%;transform:translate(-50%)}.app-header{padding:1rem 2rem;transition:padding .25s}.landing-section-panel{border-radius:16px;padding:2.5rem 3rem;transition:padding .25s,border-radius .25s}@media (max-width:768px){.container{padding-left:.4rem!important;padding-right:.4rem!important}.hero-header-box{padding:.25rem .25rem 1.25rem!important}.hero-title{margin-bottom:.35rem!important;font-size:1.85rem!important;line-height:1.25!important}.hero-subtitle{margin-bottom:.75rem!important;font-size:1.05rem!important}.sticky-sub-nav{margin-bottom:1.5rem!important;padding:.4rem .25rem!important}.sub-nav-item{padding:5px 10px!important;font-size:.8rem!important}.landing-sections-wrap{gap:1.5rem!important}.landing-section-panel{border-radius:12px!important;padding:1.25rem .65rem!important}.landing-sub-card{border-radius:8px!important;padding:.85rem .6rem!important}.online-cpime-box{margin-bottom:1.5rem!important;padding:1rem .65rem!important}.demo-videos-grid{grid-template-columns:1fr!important;gap:1rem!important}.pinyin-sample-table th,.pinyin-sample-table td{padding:8px 4px!important;font-size:.78rem!important}.download-card-btn{padding:.85rem .75rem!important}.blogger-content{word-break:break-word!important;overflow-wrap:anywhere!important;font-size:.875rem!important}}@media (max-width:640px){.app-header{padding:.5rem!important}.header-brand{gap:.45rem!important}.header-brand-title{letter-spacing:-.03em!important;font-size:1.15rem!important}.header-brand-title span{font-size:.95rem!important}.header-actions-wrap{gap:.35rem!important}.header-nav-menu{gap:.25rem!important}.nav-link{border:1px solid #0000!important;border-radius:8px!important;justify-content:center!important;width:32px!important;height:32px!important;padding:0!important;transition:all .2s!important}.nav-link.active{background:var(--candidate-hover)!important;border-color:var(--primary-color)!important}.nav-link .nav-text{display:none!important}.header-right-utils{gap:.25rem!important}.header-right-utils select{padding:4px 22px 4px 6px!important;font-size:.76rem!important}.container{padding-left:.25rem!important;padding-right:.25rem!important}.landing-section-panel{padding:1rem .5rem!important}.landing-sub-card{padding:.75rem .5rem!important}}