:root{color-scheme:light;--ink:#102b25;--green:#26796c;--cream:#f5f0e5;--line:#d9d6cc;--paper:#fffdf8;--coral:#d86448}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:"PingFang SC","Noto Sans CJK SC",system-ui,sans-serif;color:var(--ink);background:radial-gradient(circle at 85% 5%,#dce9e1 0,transparent 34%),linear-gradient(135deg,#faf7ef,#efe5d5)}
button,a{font:inherit}
.hub-shell{min-height:100vh;padding:16px 20px 20px}
.back-button,#switch-module{border:1px solid rgba(16,43,37,.14);border-radius:999px;background:rgba(255,253,248,.94);color:var(--ink);padding:9px 14px;cursor:pointer;box-shadow:0 6px 18px rgba(44,42,33,.08);backdrop-filter:blur(12px)}#switch-module{color:#176255}
.hub-home{max-width:1040px;margin:2vh auto 0;text-align:center}.eyebrow{color:var(--coral);font-weight:700;letter-spacing:.12em}.hub-home h1{margin:8px 0;font-family:Songti SC,STSong,serif;font-size:clamp(34px,5vw,58px);font-weight:600}.intro{margin:0 auto 26px;max-width:680px;color:#65736e;line-height:1.8}
.module-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}.module-card{min-height:188px;padding:24px;border:1px solid var(--line);border-radius:24px;background:rgba(255,253,248,.94);display:grid;grid-template-columns:auto 1fr;grid-template-rows:1fr auto;text-align:left;color:var(--ink);cursor:pointer;box-shadow:0 18px 40px rgba(57,50,37,.09);transition:.2s transform,.2s border-color,.2s box-shadow}.module-card:hover{transform:translateY(-4px);border-color:var(--green);box-shadow:0 22px 50px rgba(57,50,37,.14)}
.card-index{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--ink);color:white;font-size:12px;font-weight:800}.card-copy{align-self:center;padding-left:20px}.card-copy strong,.card-copy small{display:block}.card-copy strong{font:600 28px Songti SC,STSong,serif}.card-copy small{margin-top:10px;color:#6d7975}.card-arrow{grid-column:2;justify-self:end;color:var(--green);font-weight:700}
.module-stage{position:relative;max-width:1440px;margin:0 auto}.stage-toolbar{position:absolute;z-index:3;inset:12px 14px auto 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:none}.stage-toolbar>*{pointer-events:auto}.stage-actions{display:flex;align-items:center;gap:8px}.stage-toolbar a{border-radius:999px;background:rgba(255,253,248,.9);padding:9px 13px;color:var(--green);text-decoration:none;font-size:13px;box-shadow:0 6px 18px rgba(44,42,33,.07);backdrop-filter:blur(12px)}.module-tabs{height:86px;padding:8px 250px 8px;display:grid;grid-template-columns:1fr 1fr;gap:10px}.module-tabs button{min-width:0;padding:10px 16px;display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;text-align:left;border:1px solid rgba(16,43,37,.14);border-radius:15px;background:rgba(255,253,248,.82);color:#6d7975}.module-tabs i{grid-row:1/3;font:italic 700 20px Georgia,serif;color:#9aa5a0}.module-tabs b,.module-tabs small{display:block}.module-tabs b{font-size:13px}.module-tabs small{margin-top:3px;font-size:9px}.module-tabs button.active{border-color:var(--green);background:var(--green);color:white;box-shadow:0 9px 22px rgba(38,121,108,.18)}.module-tabs button.active i{color:white}.module-tabs button:not([data-tab-group]){display:none}.module-stage[data-group="listening"] .module-tabs button:not([data-tab-group="listening"]),.module-stage:is([data-group="writing"],[data-group="sight"],[data-group="rhythm"]) .module-tabs button:not([data-tab-group="writing"]){display:none}.frames{height:calc(100vh - 118px);min-height:534px;overflow:hidden;border:1px solid rgba(16,43,37,.15);border-radius:20px;background:white;box-shadow:0 18px 44px rgba(44,42,33,.12)}iframe{display:none;width:100%;height:100%;border:0;background:#f7f3ea}iframe.active{display:block}
@media(max-width:700px){.hub-shell{padding:8px}.hub-home{margin-top:1vh}.hub-home h1{font-size:34px}.intro{font-size:14px;margin-bottom:18px}.module-cards{grid-template-columns:1fr;gap:10px}.module-card{min-height:126px;padding:17px 18px;border-radius:18px}.card-copy strong{font-size:22px}.card-copy small{margin-top:6px}.stage-toolbar{position:relative;inset:auto;margin-bottom:7px}.stage-toolbar a{display:none}.back-button,#switch-module,.stage-toolbar a{padding:8px 10px;font-size:11px}.module-tabs{height:auto;padding:0 0 7px;gap:7px}.module-tabs button{min-height:62px;padding:8px 9px;grid-template-columns:27px 1fr;border-radius:12px}.module-tabs i{font-size:16px}.module-tabs b{font-size:11px}.module-tabs small{font-size:8px}.frames{height:calc(100vh - 126px);min-height:540px;border-radius:15px}}

/* Primary category layout: one combined listening entry and two independent writing entries. */
@media(min-width:701px){.module-cards{grid-template-columns:repeat(3,minmax(0,1fr))}.module-card{min-height:210px}.card-copy strong{font-size:25px}}
.stage-toolbar{position:relative;inset:auto;min-height:48px;margin:10px 0 0}
.module-tabs{width:min(1080px,100%);height:78px;margin:0 auto 10px;padding:0;gap:10px}
.module-tabs button{min-height:78px;padding:14px 18px;grid-template-columns:38px minmax(0,1fr);border-radius:15px}
.module-tabs i{font-size:22px}.module-tabs b{font-size:14px}.module-tabs small{font-size:10px}
.module-stage:is([data-group="writing"],[data-group="sight"],[data-group="rhythm"]) .module-tabs{display:none}
.module-stage:is([data-group="writing"],[data-group="sight"],[data-group="rhythm"]) .frames{height:calc(100vh - 90px);min-height:620px}
.module-stage[data-group="listening"] .frames{height:calc(100vh - 178px);min-height:534px}
@media(max-width:700px){.stage-toolbar{min-height:33px;margin:7px 0 0}.module-tabs{width:100%;height:auto;margin-bottom:7px;padding:0;gap:7px}.module-tabs button{min-height:68px;padding:10px 11px;grid-template-columns:30px 1fr;border-radius:12px}.module-tabs i{font-size:18px}.module-tabs b{font-size:12px}.module-tabs small{font-size:8px}.module-stage:is([data-group="writing"],[data-group="sight"],[data-group="rhythm"]) .frames{height:calc(100vh - 57px);min-height:540px}.module-stage[data-group="listening"] .frames{height:calc(100vh - 145px);min-height:520px}}

.module-card.sight-singing{text-decoration:none}
@media(min-width:701px){.module-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}