@font-face{font-family:TeachingKai;src:url('assets/fonts/teaching-kai.woff2') format('woff2');font-display:swap}
@font-face{font-family:ToneOZTeaching;src:url('assets/fonts/toneoz/toneoz-zhuyin-kai-traditional.woff2') format('woff2');font-display:swap;font-weight:400;font-style:normal}
:root{--ink:#244f45;--text:#2b3933;--muted:#6b786d;--line:#d6dfd1;--paper:#faf9f5;--blue:#2784ae;--kai:TeachingKai,'BiauKai','DFKai-SB',serif}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{height:100dvh;background:#eaece5;color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'PingFang TC','Microsoft JhengHei',sans-serif;display:grid;grid-template-rows:52px minmax(0,1fr) 108px;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}a{text-decoration:none;color:inherit}button,input{font:inherit}button{cursor:pointer;color:inherit;border:0;background:none}a,button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--blue);outline-offset:4px}button svg,a svg{width:22px;height:22px;flex-shrink:0}img{display:block;max-width:100%}h1,h2,p{margin:0}[hidden]{display:none!important}.topbar{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:0 25px;background:var(--paper);border-bottom:1px solid var(--line);z-index:3}.brand{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:700;letter-spacing:1px}.brand-symbol{font:30px var(--kai);background:var(--ink);color:#f8eed2;width:34px;height:35px;border-radius:10px 10px 10px 3px;display:grid;place-items:center}.top-hint{font-size:12px;color:var(--muted);margin-left:auto}.icon-button{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--line)}#main{position:relative;min-height:0;overflow:hidden;outline:none}.slide{position:absolute;left:50%;top:50%;width:var(--slide-w,1280px);height:var(--slide-h,720px);transform:translate(-50%,-50%) scale(var(--scale,1));transform-origin:center;background:var(--paper);border-radius:18px;box-shadow:0 2px 18px #3448340a;padding:34px 40px;display:flex;flex-direction:column;overflow:hidden}.slide-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-shrink:0}.slide-heading h1{font-size:42px;color:var(--ink);letter-spacing:1px;line-height:1.3}.slide-heading h1 .symbol{font:56px var(--kai);vertical-align:middle;margin-right:16px;color:var(--blue)}.slide-heading p{font-size:19px;color:var(--muted);margin-top:6px}.primary,.secondary{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:13px 24px;border-radius:10px;font-size:23px;font-weight:600;white-space:nowrap}.primary{background:var(--ink);color:#fff}.primary:hover{background:#153e33}.secondary{background:#eef1e7;border:1px solid var(--line);color:var(--ink)}button[data-audio][aria-pressed=true]{outline:3px solid #bb9359;outline-offset:4px}.slide-source{font-size:15px;color:var(--muted);padding-top:12px;flex-shrink:0}.home-title{font-size:47px;color:var(--ink);line-height:1.3;margin-bottom:10px}.home-subtitle{font-size:23px;color:var(--muted)}.home-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;flex:1;min-height:0;margin:34px 0 24px}.home-unit{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:#fffefb;border:1.5px solid var(--line);border-radius:16px}.home-unit:hover{background:#edf1e6;border-color:#86a18c}.home-unit .unit-symbol{font:110px var(--kai);color:var(--ink)}.home-unit span:last-child{font-size:23px;color:var(--muted)}.home-unit:nth-child(2){background:#f7eee2}.home-unit:nth-child(3){background:#eef2e7}.home-unit:nth-child(4){background:#eaf1f2}.home-bottom{display:flex;gap:20px;align-items:center;justify-content:space-between;flex-shrink:0}.home-song{display:flex;gap:20px;align-items:center;background:#f4ecdb;border:1px solid #e5dcc5;border-radius:13px;padding:12px 25px;flex:1;max-width:740px;font-size:27px;color:var(--ink);font-weight:650}.home-song img{width:95px;height:74px;object-fit:contain}.home-song svg{margin-left:auto}.home-extra{display:flex;flex-direction:column;align-items:end;gap:9px}.plain-link{font-size:20px;min-height:44px;display:inline-flex;align-items:center;gap:8px}.plain-link:hover{text-decoration:underline}.catalog-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:12px;flex:1;min-height:0;margin-top:26px}.catalog-tile{border:1px solid var(--line);border-radius:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#8b9286;background:#f0f1e9;gap:6px}.catalog-tile .tile-symbol{font:49px var(--kai)}.catalog-tile small{font-size:13px}.catalog-tile.ready{background:#fffefb;color:var(--ink);border-color:#91a487}.mnemonic-main{display:grid;grid-template-columns:330px 1fr 180px;gap:30px;align-items:center;flex:1;min-height:0;padding:16px 0}.mnemonic-main img{width:100%;height:100%;max-height:285px;object-fit:contain}.rhyme-copy{font-family:var(--kai);font-size:43px;min-width:0}.question-line{display:flex;align-items:center;gap:7px;margin-bottom:18px}.focus-symbol{font-size:1.3em;color:var(--blue)}.rhyme-line{white-space:nowrap}.repeat-symbols{font-size:47px;letter-spacing:16px;margin-top:18px;color:var(--blue)}.big-symbol{font:165px var(--kai);text-align:center;color:var(--blue);border-left:1px solid var(--line)}.practice{height:208px;flex-shrink:0;display:flex;flex-direction:column}.practice-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.practice-heading h2{font-size:25px;color:var(--ink)}.practice-heading p{font-size:17px;color:var(--muted);margin-left:20px;flex:1}.clear-button{display:flex;align-items:center;gap:8px;min-height:42px;font-size:19px}.writing-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1.5px solid #aebb9f;border-radius:9px;overflow:hidden;flex:1;min-height:0}.writing-example{display:flex;position:relative;align-items:center;justify-content:center;background:#eef2e7;border-right:1.5px solid #aebb9f}.model-symbol{font:125px var(--kai);color:var(--blue);line-height:1}.model-label{position:absolute;left:12px;top:9px;font-size:17px;color:#637260}.canvas-box{grid-column:span 2;position:relative;background:linear-gradient(to right,transparent calc(50% - .75px),#b7c6ac calc(50% - .75px),#b7c6ac calc(50% + .75px),transparent calc(50% + .75px)),linear-gradient(to bottom,transparent 49.6%,#dce4d5 49.6%,#dce4d5 50.4%,transparent 50.4%),#fffefb;min-width:0;min-height:0}.canvas-box:before{content:'';position:absolute;left:25%;right:25%;top:0;bottom:0;border-left:1px dashed #dce4d5;border-right:1px dashed #dce4d5;pointer-events:none}canvas{position:relative;width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}.word-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;flex:1;min-height:0;margin-top:25px}.word-card{border:1px solid var(--line);border-radius:13px;background:#fffefb;padding:22px 12px 16px;display:flex;flex-direction:column;align-items:center;position:relative;min-height:0;min-width:0;gap:15px}.word-card img{width:100%;height:100px;flex:1;min-height:0;object-fit:contain;padding:0 9px}.word-card .annotated{font-size:49px;flex-shrink:0;margin:7px 0}.word-card .primary{font-size:21px;min-height:52px;padding:10px 17px;flex-shrink:0;width:90%}.example-tag{position:absolute;top:12px;left:13px;font-size:14px;color:#a46f38;background:#f6e7d4;border-radius:4px;padding:3px 7px}.word-tip{font-size:21px;color:var(--muted);margin-top:17px;flex-shrink:0}.song-content{display:grid;grid-template-columns:.8fr 1.6fr;gap:30px;align-items:center;flex:1;min-height:0;margin-top:20px}.song-content>img{height:100%;max-height:430px;width:100%;object-fit:contain}.lyrics{font:35px var(--kai);min-width:0;display:flex;flex-direction:column;justify-content:space-evenly;height:100%;padding:2px 0}.lyric-line{display:flex;align-items:center;justify-content:center;gap:23px;white-space:nowrap}.song-actions{display:flex;gap:12px;flex-shrink:0}.annotated{display:inline-flex;align-items:center;white-space:nowrap;font-family:var(--kai);font-size:inherit;line-height:1;vertical-align:middle}.zi{display:inline-flex;align-items:center;margin-right:.1em;position:relative;height:1.5em}.han{font-size:1em;line-height:1.3}.phonetic{display:inline-flex;align-items:center;position:relative;font-size:.38em;height:3em;line-height:1.05;margin-left:.06em;margin-right:.12em;top:.14em;min-width:1.5em;justify-content:flex-start}.bpmf-base{display:flex;flex-direction:column;align-items:center;line-height:.95}.bpmf-base>span{display:inline-block;height:.95em;line-height:.95em;position:relative}.bpmf-base>span.target{color:var(--blue)}.tone{position:relative;left:-.05em;font-size:1em;line-height:1}.neutral{position:absolute;top:-.26em;left:.06em;width:1em;text-align:center;line-height:1}.controls{background:var(--paper);border-top:1px solid var(--line);padding:0 20px;z-index:3;min-width:0}.audio-row{height:46px;display:flex;align-items:center;gap:15px;border-bottom:1px solid #e9ece1;max-width:1200px;margin:auto}.audio-row>p{font-size:12px;color:var(--muted)}.speed{font-size:10px;color:var(--muted);margin-left:auto;white-space:nowrap}#player{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.mini-button{display:grid;place-items:center;width:35px;height:37px;flex-shrink:0;color:var(--ink)}.mini-button svg{width:18px;height:18px}#track-title{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}#elapsed,#duration{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}#seek{min-width:35px;max-width:280px;flex:1;accent-color:var(--ink);height:24px}.page-nav{height:60px;display:flex;justify-content:space-between;align-items:center;gap:12px;max-width:1200px;margin:auto}.nav-button{display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid #b7c9b0;border-radius:9px;min-height:43px;padding:7px 18px;font-size:15px;min-width:115px;color:var(--ink);font-weight:650}.nav-button.next{background:var(--ink);color:white;border-color:var(--ink)}.page-middle{display:flex;align-items:center;gap:20px;color:var(--muted);font-size:12px}.page-middle>a{padding:8px;font-size:13px;color:var(--ink)}#page-count{font-variant-numeric:tabular-nums;white-space:nowrap}#notice{position:fixed;left:50%;bottom:118px;transform:translateX(-50%);border-radius:8px;color:white;background:var(--ink);z-index:9;max-width:90vw;font-size:13px}#notice:not(:empty){padding:10px 18px}
.slide.portrait{padding:30px 28px;border-radius:15px}.portrait .slide-heading{gap:14px}.portrait .slide-heading h1{font-size:39px}.portrait .slide-heading h1 .symbol{font-size:54px;margin-right:10px}.portrait .slide-heading p{font-size:21px}.portrait .slide-heading>.primary{font-size:22px;padding:12px 16px;min-height:57px}.portrait .home-title{font-size:44px}.portrait .home-subtitle{font-size:25px}.portrait .home-grid{grid-template-columns:repeat(2,1fr);gap:20px;margin:30px 0 22px}.portrait .home-unit{gap:12px}.portrait .home-unit .unit-symbol{font-size:100px}.portrait .home-unit span:last-child{font-size:24px}.portrait .home-bottom{flex-direction:column;gap:16px}.portrait .home-song{width:100%;font-size:28px;padding:10px 21px}.portrait .home-extra{flex-direction:row;gap:24px;justify-content:space-between;width:100%}.portrait .plain-link{font-size:23px}.portrait .mnemonic-main{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:5px;justify-items:center;padding:14px 0 20px}.portrait .mnemonic-main img{max-height:280px;width:80%;min-height:0}.portrait .rhyme-copy{font-size:43px;text-align:center}.portrait .question-line{justify-content:center;margin-bottom:12px}.portrait .repeat-symbols{font-size:44px;margin-top:12px}.portrait .big-symbol{display:none}.portrait .practice{height:235px}.portrait .practice-heading{flex-wrap:wrap;gap:6px;margin-bottom:9px}.portrait .practice-heading h2{font-size:27px}.portrait .practice-heading p{order:3;width:100%;flex:auto;margin:0;font-size:20px}.portrait .clear-button{margin-left:auto;font-size:22px;min-height:48px}.portrait .model-symbol{font-size:132px}.portrait .model-label{font-size:20px}.portrait .word-grid{grid-template-columns:repeat(2,1fr);gap:18px;margin-top:23px}.portrait .word-card{padding:22px 10px 14px;gap:9px}.portrait .word-card .annotated{font-size:46px;margin:9px 0}.portrait .word-card .primary{font-size:24px;padding:11px;min-height:58px}.portrait .example-tag{font-size:17px}.portrait .word-tip{font-size:21px;line-height:1.6;margin-top:14px}.portrait .song-content{grid-template-columns:1fr;grid-template-rows:minmax(0,.65fr) minmax(0,1fr);gap:12px;margin-top:13px}.portrait .song-content>img{max-height:235px;width:75%;justify-self:center}.portrait .lyrics{font-size:31px}.portrait .lyric-line{gap:16px}.portrait .song-actions{gap:10px;margin-top:12px}.portrait .song-actions .primary,.portrait .song-actions .secondary{font-size:22px;padding:12px 16px;min-height:57px}.portrait .catalog-grid{grid-template-columns:repeat(6,1fr);gap:12px;margin-top:22px}.portrait .catalog-tile .tile-symbol{font-size:46px}.portrait .catalog-tile small{font-size:14px}
@media(max-width:600px){body{grid-template-rows:46px minmax(0,1fr) 100px}.topbar{padding:0 13px;gap:8px}.brand{font-size:15px;gap:7px}.brand-symbol{width:29px;height:30px;font-size:25px}.top-hint{display:none}.icon-button{width:32px;height:32px}.icon-button svg{width:18px;height:18px}.controls{padding:0 10px}.audio-row{height:42px;gap:7px}.speed{font-size:8px}.audio-row:has(#player:not([hidden])) .speed{display:none}.audio-row>p{font-size:11px}.page-nav{height:56px;gap:7px}.nav-button{font-size:13px;min-width:94px;min-height:42px;padding:8px 11px}.nav-button svg{width:17px;height:17px}.page-middle{gap:6px;font-size:10px}.page-middle>a{font-size:12px;padding:6px}.mini-button{width:28px;height:36px}#player{gap:5px}#track-title{font-size:10px;max-width:95px}#seek{max-width:none}#elapsed,#duration{font-size:9px}#notice{bottom:110px}}
@media(max-height:480px) and (orientation:landscape){body{grid-template-rows:38px minmax(0,1fr) 90px}.topbar{padding:0 16px}.brand{font-size:15px}.brand-symbol{width:28px;height:29px;font-size:23px}.audio-row{height:36px}.page-nav{height:52px}.nav-button{min-height:39px}.top-hint{font-size:11px}}
.mnemonic-main{grid-template-rows:minmax(0,1fr)}.mnemonic-main img{min-height:0;max-height:100%}
.portrait .slide-heading>.primary,.portrait .song-actions .primary,.portrait .song-actions .secondary{min-height:76px}.portrait .word-card .primary{min-height:76px}.portrait .clear-button,.portrait .plain-link{min-height:70px}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* Local draft: equal square cells, visible guides, illustrated unit entrances. */
.home-unit{padding:16px 12px;gap:22px;border:1.5px solid #cdd9c7;background:#fffefb;box-shadow:0 4px 0 #244f4507;transition:transform .15s,background .15s}
.home-unit:hover{transform:translateY(-3px)}
.unit-visual{display:flex;align-items:center;justify-content:center;gap:5px;width:100%;min-width:0}
.home-unit .unit-symbol{font-size:102px;flex-shrink:0}
.home-unit .unit-picture{width:142px;height:158px;object-fit:contain;mix-blend-mode:multiply}
.home-unit .unit-caption{display:flex;align-items:center;justify-content:center;gap:17px;font-size:22px;color:#526b5c}
.unit-caption svg{width:19px;height:19px}
.practice{height:264px;--cell-size:180px}
.practice-heading{min-height:44px;margin-bottom:12px}
.practice-heading h2{font-size:27px}
.writing-grid{height:auto;min-height:0;flex:none;width:100%;display:flex;justify-content:center;align-items:start;gap:22px;border:0;border-radius:0;overflow:visible}
.writing-column{width:var(--cell-size);flex:none;display:flex;flex-direction:column;gap:6px}
.cell-caption{display:block;line-height:22px;height:22px;text-align:center;font-size:17px;color:#65775f}
.writing-cell{position:relative;width:var(--cell-size);height:var(--cell-size);aspect-ratio:1;flex:none;border:2px solid #a2b396;border-radius:0;overflow:hidden;background:#fffefb;display:block}
.writing-example{background:#f1f5e8;border-right:2px solid #a2b396}
.canvas-box{grid-column:auto;background:#fffefb}
.canvas-box:before{display:none}
.guide-lines{display:block;position:absolute;inset:0;width:100%;height:100%;color:#a4b49a;z-index:1;pointer-events:none}
.writing-cell .model-symbol{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:contain;z-index:2;pointer-events:none}
.writing-cell canvas{position:absolute;inset:0;width:100%;height:100%;z-index:3}
.portrait .home-unit{gap:14px;padding:12px 10px}
.portrait .home-unit .unit-symbol{font-size:102px}
.portrait .home-unit .unit-picture{width:141px;height:150px}
.portrait .home-unit .unit-caption{font-size:23px;gap:15px}
.portrait .practice{height:300px}
.portrait .practice-heading{flex-wrap:nowrap;min-height:70px}
.portrait .cell-caption{font-size:19px}
.portrait .model-symbol{font-size:inherit}

/* Dedicated writing pages use physical viewport space, without scaling a slide. */
.practice-link{align-self:flex-end;min-height:52px;padding:9px 22px;font-size:21px;margin-top:6px}
.home-bottom{flex-direction:column;align-items:stretch;gap:14px}
.home-shortcuts{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.home-shortcuts .home-song{width:100%;max-width:none;min-width:0;min-height:100px;padding:10px 18px;gap:14px;font-size:26px}
.home-shortcuts .home-song img{width:80px;height:70px;flex-shrink:0}
.home-shortcuts .home-board{background:#e9efdf;border-color:#cbd8bd}
.board-icon{width:66px;height:70px;flex-shrink:0;display:grid;place-items:center;color:#456b51}
.board-icon svg{width:43px;height:43px}
.home-board small{display:block;font-size:15px;font-weight:400;color:var(--muted);margin-top:4px;letter-spacing:2px}
.home-extra{flex-direction:row;justify-content:space-between;align-items:center;width:100%}
.portrait .home-shortcuts{gap:16px}
.portrait .home-shortcuts .home-song{padding:10px 15px;gap:9px;font-size:25px;min-height:102px}
.portrait .home-shortcuts .home-song img{width:66px;height:68px}
.portrait .board-icon{width:56px;height:68px}
.portrait .home-shortcuts .home-song>svg{width:18px;height:18px}
.portrait .home-extra .plain-link{min-height:44px}
.portrait .practice-link{font-size:25px;min-height:76px}
body.writing-mode{grid-template-rows:52px minmax(0,1fr) 60px}
.writing-mode .audio-row{display:none}
.slide.writing-slide{inset:10px;transform:none;width:calc(100% - 20px);height:calc(100% - 20px);padding:16px 20px;border-radius:12px;gap:10px}
.writing-slide .slide-heading{gap:12px;min-height:45px;flex-wrap:wrap}
.writing-slide .slide-heading h1{font-size:29px;letter-spacing:.5px}
.writing-slide .slide-heading h1 .symbol{font-size:36px;margin-right:9px}
.drawing-tools{display:flex;align-items:center;gap:7px;margin-left:auto;flex-shrink:0}
.drawing-tools button{border:1px solid #c5d1bc;border-radius:7px;min-height:44px;padding:8px 13px;font-size:14px;background:#fffefb;color:var(--ink)}
.drawing-tools button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:white}
.drawing-tools #clear-canvas{background:#f1eadf;border-color:#e0d2bd}
.writing-workspace{display:grid;grid-template-columns:var(--model-size,100px) minmax(0,1fr);gap:var(--write-gap,20px);align-items:center;flex:1;min-height:0;min-width:0;overflow:hidden}
.small-model{width:var(--model-size,100px);display:flex;flex-direction:column;gap:9px;align-items:center;align-self:center}
.small-model .cell-caption{font-size:14px;line-height:20px;height:20px}
.small-model .writing-cell{width:var(--model-size,100px);height:var(--model-size,100px);flex-shrink:0}
.writing-workspace .writing-pad{width:var(--write-side,300px);height:var(--write-side,300px);justify-self:center;align-self:center;max-width:none;max-height:none;border:2px solid #8da582;background:#fffefb}
.writing-credit{font-size:11px;line-height:1.5;color:var(--muted);text-align:center;flex-shrink:0}
.writing-credit a{text-decoration:underline;text-underline-offset:3px}
.free-board .writing-workspace{grid-template-columns:minmax(0,1fr);gap:0}
.writing-slide .guide-lines{color:#acbba0}
@media(max-width:600px){
 body.writing-mode{grid-template-rows:46px minmax(0,1fr) 56px}
 .slide.writing-slide{inset:7px;width:calc(100% - 14px);height:calc(100% - 14px);padding:12px 10px;gap:8px}
 .writing-slide .slide-heading{min-height:40px;column-gap:7px;row-gap:4px}
 .writing-slide .slide-heading h1{font-size:21px;letter-spacing:0}
 .writing-slide .slide-heading h1 .symbol{font-size:29px;margin-right:5px}
 .drawing-tools{gap:4px}
 .drawing-tools button{padding:7px 8px;font-size:12px;min-height:40px}
 .writing-credit{font-size:10px}
 .small-model .cell-caption{font-size:12px}
}
@media(max-height:480px) and (orientation:landscape){
 body.writing-mode{grid-template-rows:38px minmax(0,1fr) 52px}
 .slide.writing-slide{inset:5px;width:calc(100% - 10px);height:calc(100% - 10px);padding:7px 14px;gap:5px}
 .writing-slide .slide-heading{min-height:36px}
 .writing-slide .slide-heading h1{font-size:22px}
 .writing-slide .slide-heading h1 .symbol{font-size:29px}
 .drawing-tools button{min-height:36px;padding:5px 10px;font-size:12px}
 .writing-credit{font-size:10px}
}

/* ToneOZ embeds the character, side annotation and tone in one IVS glyph. */
.annotated{font-family:ToneOZTeaching,var(--kai);font-weight:400;font-synthesis:none;line-height:1.5}
.toneoz-zi{display:inline-block;line-height:1.5;white-space:nowrap}
.brand-symbol,.unit-symbol,.tile-symbol,.slide-heading h1 .symbol,.focus-symbol,.repeat-symbols,.big-symbol{font-family:ToneOZTeaching,var(--kai);font-weight:400;font-synthesis:none}