:root{color-scheme:light;--color-ink: #17212b;--color-muted: #5d6b78;--color-soft: #f6f8f7;--color-panel: #ffffff;--color-line: #dfe7e2;--color-primary: #176b5d;--color-primary-dark: #0f4c42;--color-accent: #d8942f;--color-sky: #dcecff;--color-leaf: #dff0de;--color-rose: #f7e2df;--shadow-panel: 0 12px 30px rgba(23, 33, 43, .08);--radius-sm: 6px;--radius-md: 8px;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.5rem;--space-6: 2rem;--space-7: 3rem;--font-sans: "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif}*{box-sizing:border-box}body{margin:0;background:linear-gradient(180deg,#f8faf5f5,#eef6f1f2),var(--color-soft);color:var(--color-ink);font-family:var(--font-sans);line-height:1.6;overflow-x:hidden}body.page-home{background:linear-gradient(90deg,#fffcf4fa,#eff7f2e6),url(/assets/home-background.webp) center top / cover fixed no-repeat,var(--color-soft)}body.page-character{background:linear-gradient(90deg,#f8faf5f5,#f8faf5d1),url(/assets/character-background.webp) right top / min(72vw,760px) auto fixed no-repeat,var(--color-soft)}a{color:inherit;text-decoration:none}button,input{font:inherit}.site-shell{min-height:100vh}.site-header{background:#fffffff0;border-bottom:1px solid var(--color-line);position:sticky;top:0;z-index:10;backdrop-filter:blur(12px)}.header-inner{align-items:center;display:flex;gap:var(--space-4);justify-content:space-between;margin:0 auto;max-width:1180px;padding:var(--space-3) var(--space-4)}.brand-link{align-items:center;display:inline-flex;gap:var(--space-2);font-weight:800;letter-spacing:0;line-height:1}.brand-logo{display:block;height:clamp(2.35rem,7vw,3.1rem);max-width:min(48vw,10.5rem);object-fit:contain;width:auto}.site-nav{display:none;gap:var(--space-3);color:var(--color-muted);font-size:.95rem}.site-main{margin:0 auto;max-width:1180px;padding:var(--space-5) var(--space-4) var(--space-7)}.hero-grid{align-items:start;display:grid;gap:var(--space-6);min-height:min(620px,calc(100vh - 4.5rem));padding-top:clamp(1rem,4vh,3rem)}.hero-copy{padding-top:var(--space-4)}.eyebrow{color:var(--color-primary);font-size:.92rem;font-weight:700;margin:0 0 var(--space-2)}.hero-title{font-size:4.25rem;line-height:1.08;margin:0;max-width:11em}.hero-text{color:var(--color-muted);font-size:1.08rem;margin:var(--space-4) 0 0;max-width:35rem}.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-4)}.feature-link{background:#ffffffc7;border:1px solid var(--color-line);border-radius:999px;color:var(--color-primary-dark);font-weight:800;padding:.45rem .8rem}.hero-workspace{display:grid;gap:var(--space-4)}.hero-preview{background:#fffffff0;border:1px solid var(--color-line);border-radius:var(--radius-md);box-shadow:var(--shadow-panel);padding:var(--space-4)}.preview-header{align-items:center;display:flex;gap:var(--space-3)}.preview-glyph{align-items:center;background:linear-gradient(135deg,#fff7e8,#fffdf6);border:1px solid #efdcb7;border-radius:var(--radius-sm);box-shadow:inset 0 -8px #d8942f14;display:inline-flex;flex:0 0 auto;font-size:3.35rem;font-weight:900;height:5.25rem;justify-content:center;line-height:1;width:5.25rem}.preview-summary{min-width:0}.preview-label{color:var(--color-accent);font-size:.86rem;font-weight:800;margin:0}.preview-title{font-size:1.85rem;line-height:1;margin:.2rem 0 var(--space-2)}.preview-tools,.preview-action-row{display:flex;flex-wrap:wrap;gap:var(--space-2)}.preview-tools span,.tool-pill{background:#eef5f2;border:1px solid #d8e8e2;border-radius:999px;color:var(--color-primary-dark);font-size:.86rem;font-weight:800;padding:.22rem .55rem}.preview-action-row{border-bottom:1px solid var(--color-line);border-top:1px solid var(--color-line);margin-top:var(--space-4);padding:var(--space-3) 0}.tool-pill:nth-child(2){background:#fff4dc;border-color:#efdcb7;color:#815311}.tool-pill:nth-child(3){background:var(--color-sky);border-color:#c9ddf5;color:#24577b}.preview-grid{display:grid;gap:var(--space-3);margin-top:var(--space-3)}.preview-block{border-left:3px solid var(--color-line);padding-left:var(--space-3)}.preview-block:nth-child(1){border-left-color:var(--color-primary)}.preview-block:nth-child(2){border-left-color:var(--color-accent)}.preview-block:nth-child(3){border-left-color:#7a9bc1}.preview-block:nth-child(4){border-left-color:#d99a8f}.preview-block-label{color:var(--color-muted);display:block;font-size:.84rem;font-weight:800}.preview-block p{margin:.2rem 0 0}.preview-link,.text-link{color:var(--color-primary-dark);display:inline-flex;font-weight:800;margin-top:var(--space-3)}.search-panel,.compact-search{background:#ffffffe6;border:1px solid var(--color-line);border-radius:var(--radius-md);box-shadow:var(--shadow-panel);backdrop-filter:blur(10px);padding:var(--space-4)}.search-panel{position:relative}.search-panel:before{background:linear-gradient(135deg,#d8942f38,#176b5d29);border-radius:var(--radius-md);content:"";inset:-.65rem;position:absolute;z-index:-1}.compact-search{box-shadow:none;padding:var(--space-3)}.search-row{display:grid;gap:var(--space-3)}.search-input{border:1px solid var(--color-line);border-radius:var(--radius-sm);color:var(--color-ink);min-height:3.25rem;padding:0 var(--space-4);width:100%}.search-input:focus{border-color:var(--color-primary);outline:3px solid rgba(23,107,93,.16)}.primary-action{align-items:center;background:var(--color-primary);border:0;border-radius:var(--radius-sm);color:#fff;cursor:pointer;display:inline-flex;font-weight:700;justify-content:center;min-height:3.25rem;padding:0 var(--space-5)}.primary-action:hover{background:var(--color-primary-dark)}.hint-row{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-4)}.query-chip,.tag-chip{background:#eef5f2;border:1px solid #d8e8e2;border-radius:999px;color:var(--color-primary-dark);display:inline-flex;font-size:.92rem;padding:.35rem .7rem}.section-band{margin-top:var(--space-7)}.hero-grid+.section-band{margin-top:var(--space-5)}.section-heading{align-items:end;display:flex;gap:var(--space-3);justify-content:space-between;margin-bottom:var(--space-4)}.section-title,.panel-title{font-size:1.35rem;line-height:1.3;margin:0}.panel-title{font-size:1.2rem;margin-bottom:var(--space-3)}.section-note{color:var(--color-muted);display:none;font-size:.95rem;margin:0}.section-help{color:var(--color-muted);font-size:.92rem;margin:calc(var(--space-2) * -.5) 0 var(--space-3)}.quick-grid,.idiom-grid,.content-grid,.search-results,.service-grid,.shortcut-grid,.seo-grid,.workflow-grid,.data-stat-grid{display:grid;gap:var(--space-3)}.quick-card,.idiom-card,.result-panel,.source-panel,.character-card,.notice-card,.service-card,.shortcut-card,.workflow-card,.data-stat-card{background:#ffffffe6;border:1px solid var(--color-line);border-radius:var(--radius-md);backdrop-filter:blur(10px)}.result-panel,.character-card,.source-panel{box-shadow:0 8px 20px #17212b0d}.quick-card,.result-panel,.source-panel,.notice-card,.service-card,.shortcut-card,.workflow-card,.data-stat-card{padding:var(--space-4)}.notice-card{position:relative;overflow:hidden}.notice-card:after{background:var(--color-leaf);border-radius:999px;content:"";height:4rem;opacity:.55;position:absolute;right:-1.25rem;top:-1.75rem;width:4rem}.data-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.data-stat-card{overflow:hidden;position:relative}.data-stat-card:after{background:var(--color-leaf);border-radius:999px;content:"";height:4rem;opacity:.45;position:absolute;right:-1.2rem;top:-1.7rem;width:4rem}.data-stat-value{color:var(--color-primary-dark);font-size:2rem;font-weight:900;line-height:1}.quick-card{background:linear-gradient(180deg,#ffffffeb,#fcf9efdb);min-height:11rem;transition:transform .16s ease,box-shadow .16s ease}.quick-card:hover,.idiom-card:hover,.shortcut-card:hover,.word-item:hover,.homophone-item:hover{box-shadow:var(--shadow-panel);transform:translateY(-2px)}.quick-char{font-size:2.25rem;font-weight:800;line-height:1;margin-bottom:var(--space-2)}.quick-sound,.sound-link{color:var(--color-primary);font-weight:700}.quick-words,.idiom-text,.list-text,.source-text,.muted-text{color:var(--color-muted);margin:var(--space-2) 0 0}.source-text a{color:var(--color-primary-dark);font-weight:800;text-decoration:underline;text-underline-offset:.15em}.idiom-card{overflow:hidden}.image-preview{align-items:center;aspect-ratio:16 / 9;background:radial-gradient(circle at 22% 28%,rgba(255,197,97,.42) 0 8%,transparent 9%),radial-gradient(circle at 70% 24%,rgba(92,164,196,.28) 0 12%,transparent 13%),radial-gradient(circle at 78% 72%,rgba(95,159,123,.3) 0 10%,transparent 11%),linear-gradient(135deg,#fff4dcf0,#ddefe4f0);display:flex;justify-content:center;padding:var(--space-4)}.image-preview--idiom{background:linear-gradient(180deg,#ffffff14,#17212b1a),url(/assets/idiom-chase-cartoon.webp) center / cover no-repeat}.image-preview--comic{aspect-ratio:1;background:var(--color-paper);padding:0}.comic-section{border-top:1px solid var(--color-line);padding-top:var(--space-5)}.comic-feature{margin:var(--space-4) 0 0}.comic-image{border:1px solid var(--color-line);border-radius:var(--radius-sm);display:block;height:auto;object-fit:cover;width:100%}.comic-feature figcaption{color:var(--color-muted);display:grid;font-size:.9rem;gap:var(--space-1);margin-top:var(--space-3)}.image-scene{background:#ffffffd6;border:1px solid rgba(255,255,255,.9);border-radius:var(--radius-md);color:var(--color-primary-dark);font-weight:800;padding:var(--space-3) var(--space-4)}.idiom-body{padding:var(--space-4)}.idiom-title,.list-title{font-size:1.08rem;margin:0}.service-card{overflow:hidden}.service-image{aspect-ratio:4 / 3;border-radius:var(--radius-sm);margin-bottom:var(--space-3);object-fit:cover;width:100%}.shortcut-band{background:#ffffff7a;border:1px solid var(--color-line);border-radius:var(--radius-md);padding:var(--space-4)}.shortcut-card{display:grid;gap:var(--space-1);transition:transform .16s ease,box-shadow .16s ease}.shortcut-card strong{font-size:1.75rem;line-height:1.2}.shortcut-card span:last-child{color:var(--color-muted)}.shortcut-label{color:var(--color-primary);font-size:.9rem;font-weight:800}.workflow-section{background:linear-gradient(135deg,#dcecff70,#f7e2df5c);border:1px solid rgba(223,231,226,.92);border-radius:var(--radius-md);padding:var(--space-4)}.workflow-card{border-top:4px solid var(--color-primary)}.workflow-card:nth-child(2){border-top-color:var(--color-accent)}.workflow-card:nth-child(3){border-top-color:#7a9bc1}.workflow-step{color:var(--color-primary);display:block;font-size:.86rem;font-weight:900;margin-bottom:var(--space-2)}.footer{border-top:1px solid var(--color-line);color:var(--color-muted);display:grid;font-size:.9rem;gap:var(--space-3);padding:var(--space-5) var(--space-4);text-align:center}.footer-links{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:center}.footer-links a{color:var(--color-primary-dark);font-weight:800}.breadcrumb{color:var(--color-muted);font-size:.92rem;margin:var(--space-4) 0}.breadcrumb a{color:var(--color-primary-dark);font-weight:700}.result-layout,.side-column{display:grid;gap:var(--space-4)}.character-card{background:linear-gradient(180deg,#fffffff0,#fffaefe6);padding:var(--space-5)}.character-main{align-items:center;display:flex;gap:var(--space-4)}.character-glyph{align-items:center;background:linear-gradient(135deg,#fff7e8,#fffdf6);border:1px solid #efdcb7;border-radius:var(--radius-md);box-shadow:inset 0 -8px #d8942f14;display:inline-flex;font-size:4.5rem;font-weight:900;height:7rem;justify-content:center;line-height:1;width:7rem}.character-title,.detail-title{font-size:2rem;margin:0}.sound-link{display:inline-flex;font-size:1.15rem;margin-top:var(--space-1)}.meta-grid{display:grid;gap:var(--space-2);grid-template-columns:repeat(2,minmax(0,1fr));margin-top:var(--space-4)}.learning-media{border-top:1px solid rgba(223,231,226,.92);display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-4);padding-top:var(--space-3)}.media-control-group{display:contents}.media-button{align-items:center;background:#fff;border:1px solid #cfe0d8;border-radius:var(--radius-sm);color:var(--color-primary-dark);cursor:pointer;display:inline-flex;font-weight:800;min-height:2.4rem;padding:.35rem .75rem}.media-button--audio{gap:var(--space-2)}.media-icon{fill:none;height:1.15rem;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2;width:1.15rem}.media-reading{line-height:1}.media-button:hover{background:#eef5f2}.media-button--quiet{color:var(--color-muted)}.media-button[data-state=error]{border-color:#d99a8f;color:#8f2f25}.stroke-panel{border-top:1px solid rgba(223,231,226,.92);margin-top:var(--space-4);padding-top:var(--space-4)}.stroke-canvas{align-items:center;aspect-ratio:1;background:linear-gradient(90deg,transparent calc(50% - 1px),rgba(216,148,47,.2) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)),linear-gradient(0deg,transparent calc(50% - 1px),rgba(216,148,47,.2) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)),#fffdf7;border:1px solid #efdcb7;border-radius:var(--radius-md);display:grid;justify-content:center;margin:0 auto;max-width:12rem;overflow:hidden;place-items:center;width:100%}.stroke-canvas svg{display:block;max-height:100%;max-width:100%}.stroke-actions{display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:center;margin-top:var(--space-3)}.compact-source{flex-basis:100%;font-size:.82rem;margin-top:var(--space-3)}.meta-item{background:var(--color-soft);border-radius:var(--radius-sm);padding:var(--space-3)}.meta-label{color:var(--color-muted);display:block;font-size:.86rem}.meta-value{display:block;font-weight:800;margin-top:var(--space-1)}.meta-note{color:var(--color-muted);display:inline-block;font-size:.9rem;font-weight:700;margin-left:var(--space-2)}.word-section{border-top:1px solid var(--color-line);padding-top:var(--space-4)}.word-section:first-of-type{border-top:0;padding-top:0}.word-section+.word-section{margin-top:var(--space-4)}.word-list,.homophone-list{display:grid;gap:var(--space-2);list-style:none;margin:var(--space-3) 0 0;padding:0}.word-item,.homophone-item{background:#ffffff9e;border:1px solid var(--color-line);border-radius:var(--radius-sm);display:block;padding:.7rem .8rem;transition:transform .16s ease,box-shadow .16s ease}.word-item--compact{padding:.55rem .7rem}.word-item--static-result:hover{box-shadow:none;transform:none}.word-link,.homophone-link{color:var(--color-primary-dark);font-weight:800}.word-link--static{cursor:default}.word-sound{color:var(--color-muted);display:inline-block;font-size:.92rem;margin-left:var(--space-2)}.split-list{display:grid;gap:var(--space-3)}.word-definition-list{display:grid;gap:var(--space-3);margin-top:var(--space-3)}.word-definition-list--compact{gap:var(--space-2)}.word-definition-item{background:#ffffffa8;border:1px solid var(--color-line);border-radius:var(--radius-sm);padding:var(--space-3)}.word-definition-title{font-size:1rem;margin:0}.mini-idiom-list{display:grid;gap:var(--space-2);list-style:none;margin:var(--space-3) 0 0;padding:0}.mini-idiom-list li{border-bottom:1px dashed var(--color-line);min-height:2.5rem;padding:.55rem 3.8rem .55rem 0;position:relative}.mini-idiom-list li:last-child{border-bottom:0;padding-bottom:0}.mini-idiom-list a{color:var(--color-primary-dark);font-size:.95rem;font-weight:800}.mini-idiom-tag{color:var(--color-muted);font-size:.76rem;line-height:1;position:absolute;right:0;top:.6rem}.compact-idiom-panel .panel-title{font-size:1rem}.compact-idiom-panel{position:relative}.idiom-legend{color:var(--color-muted);font-size:.72rem;line-height:1.35;margin:0;max-width:8rem;position:absolute;right:var(--space-4);text-align:right;top:var(--space-4)}.desktop-only{display:none}.mobile-only{display:block}.moe-text p{margin:0 0 var(--space-3)}.moe-text p:last-child{margin-bottom:0}.moe-text ruby{ruby-position:over}.moe-text rt{color:var(--color-muted);font-size:.62em}.detail-header{display:grid;gap:var(--space-2);margin-bottom:var(--space-4)}.policy-section{border-top:1px solid var(--color-line);margin-top:var(--space-4);padding-top:var(--space-4)}.policy-list{color:var(--color-muted);display:grid;gap:var(--space-2);margin:var(--space-3) 0 0;padding-left:1.3rem}.policy-section code{background:#eef5f2;border:1px solid #d8e8e2;border-radius:var(--radius-sm);color:var(--color-primary-dark);font-size:.95em;padding:.08rem .28rem}.policy-section a{color:var(--color-primary-dark);font-weight:800;text-decoration:underline;text-underline-offset:.15em}.source-list{display:grid;gap:var(--space-3);margin:var(--space-3) 0 0;padding-left:1.3rem}.source-list a{color:var(--color-primary-dark);font-weight:800;text-decoration:underline;text-underline-offset:.15em}.more-detail{border-top:1px dashed var(--color-line);margin-top:var(--space-3);padding-top:var(--space-3)}.more-detail summary{color:var(--color-primary-dark);cursor:pointer;font-weight:800}.more-detail .moe-text{margin-top:var(--space-3)}@media (min-width: 900px){.site-nav{display:flex}}@media (min-width: 720px){.hero-grid{align-items:center;grid-template-columns:minmax(0,.95fr) minmax(22rem,1.05fr)}.search-row{grid-template-columns:minmax(0,1fr) auto}.quick-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.data-stat-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.service-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.word-list{grid-template-columns:repeat(2,minmax(0,1fr))}.word-list--compact{grid-template-columns:repeat(4,minmax(0,1fr))}.split-list{grid-template-columns:repeat(2,minmax(0,1fr))}.shortcut-grid,.seo-grid,.workflow-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.idiom-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.section-note{display:block}.result-layout{grid-template-columns:minmax(15rem,.9fr) minmax(0,1.5fr)}.content-grid{grid-template-columns:minmax(0,1.6fr) minmax(16rem,.8fr)}.desktop-only{display:block}.mobile-only{display:none}.side-column{align-self:start;position:sticky;top:5rem}}@media (max-width: 719px){body.page-home,body.page-character{background-attachment:scroll}body.page-home{background-position:center top;background-size:auto 32rem}body.page-character{background-position:right 3rem top 4rem;background-size:560px auto}.hero-grid{min-height:auto;padding-top:var(--space-3)}.hero-title{font-size:2.8rem}.hero-text{font-size:1rem}.data-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.data-stat-card{padding:var(--space-3)}.data-stat-value{font-size:1.35rem}.preview-glyph{font-size:2.8rem;height:4.5rem;width:4.5rem}.site-main{padding-top:var(--space-3)}.section-band{margin-top:var(--space-5)}.service-card,.quick-card{min-height:auto}}@media (min-width: 1080px){.result-layout{grid-template-columns:minmax(15rem,.8fr) minmax(0,1.45fr) minmax(16rem,.8fr)}}