/* v5 prototype: web fonts are loaded from open-source upstream CDNs so visitors do not need local font installation. */
@import url("https://fonts.googleapis.com/css2?family=Iansui&family=Noto+Sans+Symbols+2&family=Noto+Sans+Symbols:wght@400;500;600;700&display=swap");
:root{
  --pink:#ff7187;--pink-dark:#ea5c75;--pink-soft:#fff0f3;
  --ink:#242424;--muted:#6e6e6e;--paper:rgba(255,255,255,.88);
  --header-h:92px;--player-h:64px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;width:100%;min-height:100%;overflow-x:hidden;color:var(--ink)}
body{font-family:"Iansui","PMingLiU-ExtB","MingLiU-ExtB","Microsoft JhengHei",serif;background:#f8f3e8;padding-bottom:calc(var(--player-h) + 18px)}
button,select,input{font:inherit}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid rgba(234,92,117,.35);outline-offset:2px}
.page-bg{position:fixed;z-index:-2;inset:var(--header-h) 0 0;background-image:linear-gradient(rgba(255,255,255,.20),rgba(255,255,255,.38)),url("../images/index_bk_a.jpg");background-size:cover;background-position:center top;background-attachment:fixed}
header{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.96);border-bottom:1px solid rgba(0,0,0,.06);backdrop-filter:blur(8px)}
.header-inner{max-width:1500px;min-height:var(--header-h);margin:auto;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:block;flex:none}.logo{width:210px;height:auto;display:block}
.lesson-nav{display:flex;align-items:center;gap:4px;overflow-x:auto;white-space:nowrap;scrollbar-width:none}.lesson-nav::-webkit-scrollbar{display:none}
.lesson-nav a{text-decoration:none;color:#666;padding:10px 14px;border-radius:12px;font:500 15px/1 "Microsoft JhengHei",sans-serif;transition:.15s ease}
.lesson-nav a:hover{color:#202020;background:rgba(255,240,243,.55)}.lesson-nav a.active{font-weight:800;color:#202020;background:var(--pink-soft)}
main{max-width:1450px;margin:0 auto;padding:28px 28px 56px}
.title-block{background:rgba(255,255,255,.74);border:1px solid rgba(255,255,255,.8);border-radius:20px;text-align:center;padding:18px 20px;margin-bottom:20px;backdrop-filter:blur(4px)}
h1{margin:0;font-size:34px;letter-spacing:.05em}.tailo-title{font:500 19px/1.35 Arial,"Microsoft JhengHei",sans-serif;color:#666;margin-top:6px;letter-spacing:0;transition:opacity .12s ease}
.reading-card{position:relative;background:var(--paper);border:1px solid rgba(255,255,255,.78);border-radius:20px;padding:18px 24px 34px;box-shadow:0 10px 30px rgba(70,54,30,.08);backdrop-filter:blur(5px);overflow:visible}
.article{font-size:28px;line-height:2.55;letter-spacing:.02em;min-width:0;overflow:visible}
.page-section{position:relative;scroll-margin-top:120px;display:block;overflow:visible;min-height:0}.page-section+.page-section{margin-top:30px;padding-top:42px;border-top:1px dashed rgba(190,128,99,.34)}
.page-section+.page-section::before{content:attr(data-page-label);position:absolute;top:-15px;left:50%;transform:translateX(-50%);z-index:2;padding:4px 16px;border:1px solid rgba(225,147,161,.36);border-radius:999px;background:rgba(255,250,247,.96);color:#b25f70;font:700 13px/1.4 "Microsoft JhengHei",sans-serif;letter-spacing:.08em;white-space:nowrap;box-shadow:0 3px 10px rgba(100,70,60,.05)}
.article p{margin:0 0 24px;text-indent:1.7em;min-width:0;overflow-wrap:anywhere}.article p:last-child{margin-bottom:0}
.poem-title{margin:0 0 8px;text-align:center;color:#7d565d;font:800 20px/1.5 "Microsoft JhengHei",sans-serif;letter-spacing:.12em}.poem-title+p{text-align:center;text-indent:0}
.reading-unit{display:inline-grid;grid-template-rows:auto auto;justify-items:center;align-items:end;vertical-align:bottom;white-space:nowrap;cursor:pointer;margin:0 .03em;border-radius:5px;line-height:1;touch-action:manipulation;-webkit-tap-highlight-color:rgba(255,113,135,.16)}
.reading-unit:hover{background:rgba(255,113,135,.09)}
.reading-unit .tl{grid-row:1;font-family:"Iansui",Arial,"Microsoft JhengHei",sans-serif;font-size:.39em;font-weight:500;line-height:1.15;margin-bottom:.26em;text-indent:0;letter-spacing:0;user-select:none;color:transparent;-webkit-text-fill-color:transparent;background:linear-gradient(90deg,var(--pink-dark) 0%,var(--pink-dark) var(--fill,0%),#747474 var(--fill,0%),#747474 100%);-webkit-background-clip:text;background-clip:text}
.reading-unit .han{grid-row:2;display:block;font-family:"Iansui","PMingLiU-ExtB","MingLiU-ExtB","Microsoft JhengHei",serif;font-weight:500;line-height:1.08;text-indent:0;color:transparent;-webkit-text-fill-color:transparent;background:linear-gradient(90deg,var(--pink) 0%,var(--pink) var(--fill,0%),var(--ink) var(--fill,0%),var(--ink) 100%);-webkit-background-clip:text;background-clip:text}
.reading-unit.is-spoken{--fill:100%}.reading-unit.is-active{background:rgba(255,113,135,.05)}
.reading-punct{display:inline;font-family:"Iansui","PMingLiU-ExtB","MingLiU-ExtB","Microsoft JhengHei",serif;font-weight:400;vertical-align:bottom;line-height:1.08;margin:0 .02em .02em;text-indent:0;color:transparent;-webkit-text-fill-color:transparent;background:linear-gradient(90deg,var(--pink) 0%,var(--pink) var(--fill,0%),var(--ink) var(--fill,0%),var(--ink) 100%);-webkit-background-clip:text;background-clip:text}
.reading-punct.is-spoken{--fill:100%}
.note-marker{display:inline-block;position:relative;border:0;background:transparent;color:var(--pink-dark);-webkit-text-fill-color:var(--pink-dark);font-family:"Noto Sans Symbols 2","Noto Sans Symbols","Segoe UI Symbol",sans-serif;font-size:.96em;font-weight:400;line-height:1;vertical-align:-.04em;padding:0;margin:0 .055em;cursor:pointer;text-indent:0;appearance:none;-webkit-appearance:none}.note-marker:hover,.note-marker:focus-visible{color:#d94f69;-webkit-text-fill-color:#d94f69;text-shadow:0 0 .18em rgba(255,113,135,.22)}.note-marker:focus-visible{outline:2px solid rgba(255,113,135,.32);outline-offset:2px;border-radius:50%}
body.tailo-off .tailo-title,body.tailo-off .reading-unit .tl{display:none}.tailo-title[hidden]{display:none!important}
.page-badge{position:fixed;right:16px;top:50%;transform:translateY(-50%);z-index:70;background:rgba(235,91,116,.95);color:#fff;border-radius:16px 4px 4px 16px;padding:11px 12px 10px 15px;box-shadow:0 8px 22px rgba(173,73,91,.22);font-family:"Microsoft JhengHei",sans-serif;text-align:center;min-width:72px}.page-badge small{display:block;font-size:11px;opacity:.88;margin-bottom:2px}.page-badge strong{font-size:17px;letter-spacing:.04em}
.player{position:fixed;left:0;right:0;bottom:0;z-index:100;background:rgba(255,255,255,.98);border-top:1px solid #e8e8e8;box-shadow:0 -8px 26px rgba(0,0,0,.06);padding:9px 18px 10px;font-family:"Microsoft JhengHei",sans-serif}.player::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:url("../images/background_down.jpg") center/cover no-repeat;pointer-events:none}
.player-inner{max-width:1320px;margin:auto;display:flex;align-items:center;gap:11px}.play-btn{width:42px;height:42px;flex:none;border:0;border-radius:50%;background:var(--pink);color:#fff;font-size:17px;cursor:pointer;display:grid;place-items:center;padding:0}.time{font-size:12px;color:#777;min-width:38px;font-variant-numeric:tabular-nums}.seek{flex:1;min-width:80px;accent-color:var(--pink)}.speed{border:1px solid #ddd;border-radius:9px;padding:5px 7px;background:#fff}.tailo-toggle{border:1px solid #ffc2cc;border-radius:10px;background:#fff4f6;color:#a74556;padding:5px 8px;cursor:pointer;display:flex;align-items:center;gap:5px;white-space:nowrap;font-size:13px}.tailo-toggle-state{display:inline-grid;place-items:center;min-width:22px;border-radius:999px;background:var(--pink);color:#fff;padding:2px 5px;font-size:11px}.tailo-toggle[aria-pressed="false"]{background:#f7f7f7;color:#777;border-color:#ddd}.tailo-toggle[aria-pressed="false"] .tailo-toggle-state{background:#9a9a9a}.volume-wrap{display:flex;align-items:center;gap:5px;color:#777}.volume{width:88px;accent-color:var(--pink)}.desktop-hint{display:none;color:#777;font-size:12px;white-space:nowrap}.desktop-hint kbd{font:600 11px/1 Arial,sans-serif;border:1px solid #cfcfcf;border-bottom-width:2px;border-radius:5px;padding:3px 6px;background:#fafafa;color:#555}
footer{text-align:center;padding:20px 16px 26px;color:#7f756d;font:12px/1.6 "Microsoft JhengHei",sans-serif}
.note-modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(33,28,27,.42)}.note-modal.open{display:flex}.note-dialog{width:min(560px,calc(100vw - 32px));background:#fffdf9;border-radius:22px;position:relative;padding:26px 28px 28px;box-shadow:0 24px 70px rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.85);animation:pop .16s ease-out}@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}.note-close{position:absolute;right:13px;top:12px;width:36px;height:36px;border:0;border-radius:50%;background:#f4f1ee;color:#555;font:700 22px/1 Arial;cursor:pointer}.note-kicker{font:800 13px/1 "Microsoft JhengHei",sans-serif;color:var(--pink-dark);letter-spacing:.08em;margin-bottom:10px}.note-head{display:flex;align-items:center;gap:13px;padding-right:42px}.note-number{display:inline-grid;place-items:center;flex:none;width:40px;height:40px;font-family:"Noto Sans Symbols 2","Noto Sans Symbols","Segoe UI Symbol",sans-serif;font-size:32px;font-weight:500;line-height:1;color:var(--pink-dark);background:transparent}.note-title{margin:0;font-size:27px}.note-tailo{margin-top:5px;font:500 16px/1.4 Arial,sans-serif;color:#806f68}.note-body{font:18px/1.9 "Microsoft JhengHei",sans-serif;color:#3c3835;margin:20px 0 0}.note-audio-row{display:flex;align-items:center;gap:10px;margin-top:20px}.note-speaker{width:48px;height:48px;border:1px solid #ffc0ca;border-radius:50%;background:#fff4f6;color:var(--pink-dark);font-size:18px;cursor:pointer;display:grid;place-items:center}.note-audio-label{font:14px/1.5 "Microsoft JhengHei",sans-serif;color:#777}
.toast{position:fixed;left:50%;bottom:86px;transform:translateX(-50%) translateY(10px);z-index:180;background:rgba(45,42,40,.92);color:white;border-radius:999px;padding:9px 15px;font:13px/1.4 "Microsoft JhengHei",sans-serif;opacity:0;pointer-events:none;transition:.18s ease;max-width:min(520px,calc(100vw - 30px));text-align:center}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.noscript{margin:20px;padding:12px;background:#fff3f3;color:#7c303c;font-family:"Microsoft JhengHei",sans-serif}
@media (hover:hover) and (pointer:fine){.desktop-hint{display:inline-flex;align-items:center;gap:5px}}
@media (max-width:900px){
  :root{--header-h:138px;--player-h:62px}.page-bg{background-image:linear-gradient(rgba(255,255,255,.18),rgba(255,255,255,.38)),url("../images/index_bk_a_m.jpg");background-size:cover;background-position:center top;background-attachment:scroll}.header-inner{padding:9px 12px 8px;display:block}.logo{width:190px;max-width:72vw;margin-bottom:8px}.lesson-nav{width:100%;gap:0;padding-bottom:2px}.lesson-nav a{padding:9px 12px;font-size:14px}main{padding:14px 9px 46px}.title-block{padding:14px 10px;margin-bottom:12px;border-radius:17px}h1{font-size:29px;line-height:1.35}.tailo-title{font-size:17px}.reading-card{padding:14px 11px 26px;border-radius:17px;overflow:visible}.article{font-size:21px;line-height:2.6;letter-spacing:0}.article p{text-indent:1em;margin-bottom:18px}.reading-unit{margin:0 .015em}.reading-unit .tl{font-size:.36em;margin-bottom:.30em}.page-section{scroll-margin-top:150px}.page-section+.page-section{margin-top:23px;padding-top:35px}.page-badge{right:7px;top:auto;bottom:76px;transform:none;border-radius:14px;padding:7px 9px;min-width:59px}.page-badge small{font-size:9px}.page-badge strong{font-size:14px}.player{padding:8px max(9px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(9px,env(safe-area-inset-left))}.player-inner{gap:6px}.play-btn{width:40px;height:40px}.time{font-size:11px;min-width:34px}.speed{font-size:12px;padding:4px 5px}.tailo-toggle{font-size:12px;padding:4px 6px}.tailo-toggle-label{display:none}.volume-wrap,.desktop-hint{display:none!important}.note-dialog{padding:24px 20px 24px}.note-title{font-size:24px}.note-body{font-size:16px;line-height:1.8}.poem-title{font-size:17px}.toast{bottom:78px}
}
@media (max-width:520px){.player-inner{gap:5px}.time{display:none}.seek{min-width:64px}.speed{max-width:61px}.page-badge{opacity:.93}.article{font-size:20px}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
/* Approved prototype details retained in the rebuilt data-driven site. */
h1 .tailo-title{font:400 19px/1.3 "Iansui",Arial,"Microsoft JhengHei",sans-serif;color:#666;margin-left:14px;letter-spacing:0}
.usage-hint{margin:2px auto 30px;padding:13px 20px;width:fit-content;max-width:100%;text-align:center;color:#6f6161;background:rgba(255,250,247,.90);border:1px solid rgba(225,147,161,.34);border-radius:999px;font:600 18px/1.7 "Microsoft JhengHei",sans-serif;letter-spacing:.02em;box-shadow:0 4px 14px rgba(110,75,66,.05)}
.usage-line{display:inline;white-space:nowrap}.usage-line+.usage-line{margin-left:.25em}
footer{position:relative;width:100%;min-height:92px;margin-top:34px;padding:28px 20px 34px;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;font-family:"Microsoft JhengHei",sans-serif;font-size:18px;font-weight:600;letter-spacing:.06em;line-height:1.7;background-image:linear-gradient(rgba(255,92,111,.06),rgba(255,92,111,.06)),url("../images/background_down.jpg");background-repeat:repeat-x;background-position:center center;background-size:auto 100%;box-shadow:0 -6px 18px rgba(188,75,96,.08)}
footer::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(255,255,255,.45)}
@media (max-width:900px){h1 .tailo-title{display:block;margin:6px 0 0;font-size:17px}.usage-hint{width:100%;margin:0 auto 28px;padding:11px 14px;border-radius:15px;font-size:16px;line-height:1.65}.usage-line{display:block;width:100%;white-space:nowrap}.usage-line+.usage-line{margin-left:0;margin-top:.12em}footer{min-height:84px;margin-top:26px;padding:24px 16px 30px;font-size:16px;background-size:auto 100%}}
.page-section:first-child{position:relative;margin-top:28px;padding-top:46px;border-top:1px dashed rgba(190,128,99,.34)}
.page-section:first-child::before{content:attr(data-page-label);position:absolute;top:-15px;left:50%;transform:translateX(-50%);z-index:2;padding:4px 16px;border:1px solid rgba(225,147,161,.36);border-radius:999px;background:rgba(255,250,247,.96);color:#b25f70;font:700 13px/1.4 "Microsoft JhengHei",sans-serif;letter-spacing:.08em;white-space:nowrap;box-shadow:0 3px 10px rgba(100,70,60,.05)}
@media (max-width:900px){.page-section:first-child{margin-top:26px;padding-top:42px}.page-section:first-child::before{top:-14px;padding:4px 13px;font-size:12px}}
/* v5 Iansui tuning */
.article{font-family:"Iansui","PMingLiU-ExtB","MingLiU-ExtB","Microsoft JhengHei",serif;font-size:29px}.title-block h1,.note-title{font-family:"Iansui","Microsoft JhengHei",sans-serif}.reading-unit{margin:0 .018em}.reading-unit .tl{font-size:.41em;color:transparent}.reading-unit .han{letter-spacing:.005em}
@media(max-width:900px){.article{font-size:22px}.reading-unit .tl{font-size:.39em}}

body.tailo-off .reading-unit{grid-template-rows:auto}
body.tailo-off .reading-unit .han{grid-row:1}


/* v7 full-site refinements */
/* Annotation glyph is its own no-Tailo inline item; give it a full-character footprint so preceding Tailo cannot visually invade it. */
.note-marker{display:inline-grid;place-items:center;width:1.08em;min-width:1.08em;height:1.08em;font-size:1em;line-height:1;vertical-align:-.08em;margin:0 .12em 0 .10em;padding:0;overflow:visible;white-space:nowrap}
/* Slightly strengthen Han glyph weight for textbook-like legibility without changing size. */
.reading-unit .han,.reading-punct{font-weight:600}
/* Keep the Romanization centered above its own character and prevent neighboring marker overlap. */
.reading-unit{min-width:1.02em;padding-inline:.015em}
.reading-unit .tl{max-width:none;white-space:nowrap;overflow:visible}
@media(max-width:900px){.note-marker{font-size:1.02em;margin-left:.11em;margin-right:.12em}.reading-unit{min-width:1em}}

/* v8 accessibility, Chinese kinsoku and navigation refinements */
.reader-brand-row{display:flex;align-items:center;gap:12px;flex:none}
.home-link{display:inline-flex;align-items:center;gap:5px;text-decoration:none;color:#7b5f56;background:#fff7f5;border:1px solid #f2d6d8;border-radius:999px;padding:7px 11px;font:700 14px/1 "Microsoft JhengHei",sans-serif;white-space:nowrap}
.home-link:hover{background:#fff0f3;color:#a74556}
.reading-cluster{display:inline-flex;align-items:flex-end;vertical-align:bottom;white-space:nowrap;line-height:1}
.reading-unit .tl{font-size:16px;line-height:1.18;margin-bottom:.30em;font-weight:500}
.note-marker{display:inline;align-self:flex-end;width:auto;min-width:0;height:auto;font-size:.96em;line-height:1.08;vertical-align:baseline;margin:0 .10em .015em .08em;padding:0;transform:none}
.reading-punct{align-self:flex-end;vertical-align:baseline;margin-bottom:.015em}
.poem-title{font-family:"Iansui","Microsoft JhengHei",sans-serif;font-size:31px;line-height:1.5;font-weight:800;letter-spacing:.05em;margin:8px 0 18px;color:#7d565d}
.poem-title+p{text-align:left;text-indent:1.7em}
.article{line-height:2.72}
@media(max-width:900px){
  .reader-brand-row{justify-content:space-between;width:100%;gap:8px}.home-link{font-size:13px;padding:6px 9px}.reader-brand-row .logo{margin-bottom:8px}
  .reading-unit .tl{font-size:16px;line-height:1.2;margin-bottom:.34em}
  .article{line-height:2.92}
  .poem-title{font-size:26px;margin:8px 0 15px}.poem-title+p{text-indent:1em}
  .note-marker{font-size:1em;margin-left:.08em;margin-right:.10em}
}
@media(max-width:520px){.reading-unit .tl{font-size:16px}.article{line-height:3.0}.poem-title{font-size:25px}}