@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600;700;900&family=Noto+Serif+TC:wght@900&display=swap');
:root{--ink:#44656f;--teal:#2198a2;--pink:#ed8e9f;--cream:#fffdf5}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:20px}body{margin:0;color:var(--ink);font-family:'Noto Sans TC','Microsoft JhengHei',sans-serif;background:#f7f7ed;background-image:radial-gradient(#d9e6dc 1px,transparent 1px);background-size:14px 14px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:0}a{color:inherit;text-decoration:none}a:focus-visible,button:focus-visible{outline:3px solid #c97942;outline-offset:5px}.demo{text-align:center;background:#dff2ed;color:#587f7c;font-size:11px;letter-spacing:2px;padding:5px}.demo span{color:#da9295}header{height:84px;padding:0 max(4%,calc((100% - 1150px)/2));display:flex;align-items:center;gap:35px;background:#fffef8;border-bottom:1px solid #c7dfd8;position:relative;z-index:2}.brand{display:flex;gap:10px;align-items:center;white-space:nowrap}.brand-mark{display:flex;align-items:center;justify-content:center;gap:1px;font-size:30px;color:#618d8d;font-weight:900}.brand-mark span{font-size:20px}.brand b{font-size:24px;font-weight:900;color:#32878e;letter-spacing:-1px}.brand b>span{color:#467875}.brand small{display:block;font-size:8px;letter-spacing:2px;color:#99aaa3}.brand+nav{display:flex;gap:38px;margin:auto;font-size:14px;font-weight:700}nav a:hover{color:#e48c91}.small-button{padding:11px 20px;background:#eef7f0;border:1px solid #c1ded1;border-radius:25px;color:#4c8c7c;font-size:13px;white-space:nowrap}.small-button span{margin-left:8px}.hero{height:690px;position:relative;isolation:isolate;background:#d6f1f4;overflow:hidden}.island-scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 48%;z-index:-2}.hero:after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:80px;background:linear-gradient(transparent,#f7f7ed);z-index:-1}.hero-content{max-width:1150px;margin:auto;padding:55px 0 80px;position:relative}.hero-kicker{display:inline-flex;align-items:center;gap:14px;margin:0 0 12px;padding:9px 20px;color:#48848a;font-size:13px;font-weight:700;letter-spacing:2px;background:#fffff0c9;border:1px solid #fff;border-radius:30px;box-shadow:0 4px 18px #6ba5a719}.hero-kicker>span{color:#e3ae61}.hero-brand{margin:0;line-height:1.1;max-width:570px;transform:rotate(-3deg);transform-origin:center;font-weight:900;filter:drop-shadow(0 5px 0 #51899129)}.logo-small{display:block;font-size:61px;letter-spacing:7px;color:#f7b7b9;padding-left:82px;paint-order:stroke fill;-webkit-text-stroke:8px #fffff8;text-shadow:2px 3px 0 #c37487}.logo-main{display:block;font-family:'Noto Serif TC','Microsoft JhengHei',serif;font-size:85px;letter-spacing:-4px;color:#469c9c;paint-order:stroke fill;-webkit-text-stroke:9px #fffff8;text-shadow:3px 4px 0 #286e82,5px 7px 0 #fff7d8;white-space:nowrap}.hero-brand small{display:block;font-size:10px;letter-spacing:4px;color:#61909a;margin:23px 0 0 30px;font-weight:700}.hero-description{margin:30px 0 23px 15px;font-size:23px;line-height:1.8;font-weight:700;color:#397784;text-shadow:0 2px 5px #fff}.hero-description>span{font-size:15px;font-weight:500;letter-spacing:1px}.hero-actions{display:flex;gap:13px;margin-left:12px;align-items:center}.primary,.secondary{display:flex;align-items:center;justify-content:center;gap:23px;min-height:74px;padding:12px 23px;border-radius:15px;transition:transform .18s,filter .18s;font-weight:900;font-size:22px}.primary{background:linear-gradient(#f9bf83,#efa269);border:3px solid #fff4d9;box-shadow:0 5px 0 #c98a5c,0 9px 15px #8f78502b;color:#78533b}.secondary{background:linear-gradient(#fffef2,#faf3d8);border:3px solid #fff;box-shadow:0 5px 0 #a7c9bf,0 9px 15px #7c9f9d22;color:#4c8e8a;font-size:20px}.primary small,.secondary small{display:block;font-size:9px;letter-spacing:3px;margin-top:2px;opacity:.7}.button-icon{font-size:33px;font-weight:500}.primary:hover,.secondary:hover{transform:translateY(-3px);filter:brightness(1.04)}.hero-note{font-size:11px;letter-spacing:1px;color:#6a8f88;margin:24px 0 0 17px}.scroll-cue{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:2px;color:#5a958e}.scroll-cue span{display:block;text-align:center;margin-top:5px}.server-strip{position:relative;max-width:1150px;margin:0 auto 28px;display:flex;align-items:center;justify-content:space-between;padding:15px 22px;border:1px solid #d6e2d6;border-radius:12px;background:#fffef8d9;font-size:12px}.server-strip>div{display:flex;align-items:center;gap:12px}.status-icon{color:#e1a868}.server-strip b{color:#618f85}.server-strip>a{color:#89a098}.muted{color:#8a9b95;font-size:13px;line-height:1.8}.section{max-width:1150px;margin:28px auto}.news-layout{display:grid;grid-template-columns:1.65fr 1fr;gap:25px}.news-main{background:#fffefa;border:1px solid #dae4d8;border-radius:20px;padding:27px 30px;box-shadow:0 6px 0 #e3e9dc}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.eyebrow{font-size:9px;letter-spacing:3px;color:#9aafa1;margin:0 0 4px;font-weight:700}h2{font-size:25px;letter-spacing:2px;color:#52897f;margin:0 0 20px}h3{margin:0 0 12px}.sample-tag{font-size:10px;color:#a8b2a6;border:1px solid #e0e6d8;padding:4px 8px;border-radius:20px}.tabs{display:flex;gap:22px;border-bottom:1px solid #e4e9df}.tabs button{background:none;color:#98a99e;font-weight:700;font-size:13px;padding:10px 4px;position:relative}.tabs button[aria-selected=true]{color:#569b91}.tabs button[aria-selected=true]:after{content:'';position:absolute;bottom:-2px;left:0;right:0;background:#81bdb1;height:3px;border-radius:8px}.news-item{background:none;display:flex;align-items:center;width:100%;gap:11px;padding:17px 0;text-align:left;color:#647c78;border-bottom:1px dashed #e0e6d8;font-size:13px}.news-item:last-child{border:0}.news-item>span{font-size:10px;background:#edf5ec;border-radius:5px;color:#7aab98;padding:4px 7px;white-space:nowrap}.news-item>span.event{background:#fff0e1;color:#c59a70}.news-item strong{font-weight:500;flex:1}.news-item time{font-size:10px;color:#a3afa4;white-space:nowrap}.news-item i{font-style:normal;color:#b9c6b9}.news-item:hover strong{color:#30998e}.welcome-card{position:relative;border:5px solid #fffef7;border-radius:20px;overflow:hidden;min-height:350px;background:#cfe8e2;box-shadow:0 6px 0 #e3e9dc}.paula-scene{position:absolute;inset:0;background:url('island-paula-v4.png') 85% 50% / auto 135% no-repeat}.welcome-card:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#eff8e9ec,#eff8e99c 40%,transparent 85%)}.welcome-copy{position:relative;z-index:1;padding:23px 20px}.ticket-label{font-size:11px;background:#fff8e5;color:#b18b64;border-radius:30px;padding:5px 12px;letter-spacing:1px}.welcome-copy h3{font-size:28px;color:#417d7d;letter-spacing:1px;margin:20px 0 10px}.welcome-copy p{font-size:13px;line-height:1.9;color:#739387}.welcome-copy a{display:inline-block;margin-top:70px;font-size:12px;font-weight:700;background:#fffef0d9;border-radius:30px;padding:10px 15px;border:1px solid #fff}.adventure{padding:30px 0 0}.adventure>.section-heading{padding:0 5px}.class-layout{display:grid;grid-template-columns:1fr 1.05fr;background:#fffdf6;border:1px solid #dae4d8;border-radius:22px;overflow:hidden;box-shadow:0 6px 0 #e3e9dc}.class-intro{padding:30px;background:linear-gradient(125deg,#e4f1e6,#f6f6e8)}.outlined-number{font-size:9px;color:#97afa0;letter-spacing:1px}.class-intro h3{font-size:28px;color:#679b89;margin:12px 0;line-height:1.5}.class-intro p{font-size:13px;line-height:1.9;color:#89a093}.class-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:24px}.class-tabs button{font-size:12px;padding:10px 14px;background:#fffdf3;color:#81a191;border:1px solid #d6e4d1;border-radius:20px}.class-tabs button[aria-selected=true]{color:#fff;background:#81b8a3;border-color:#81b8a3;box-shadow:0 3px 0 #699c8b}.class-details{padding:36px;align-content:center}.class-details>span{font-size:11px;letter-spacing:3px;color:#d0aa80}.class-details h3{font-size:23px;color:#5a9288;margin:13px 0}.class-details p{font-size:14px;line-height:2;color:#86988a}.pills{display:flex;gap:8px;flex-wrap:wrap}.pills span{background:#f1f4e9;border-radius:6px;font-size:11px;color:#9caa8e;padding:5px 9px}.class-details .fine{font-size:10px;color:#b4bca9;margin-top:20px}.feature-row{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin:30px 0 10px;padding:0 10px}.feature-row>div{border-right:1px solid #dbe3d3;padding-right:18px}.feature-row>div:last-child{border:0}.feature-row span{font-size:9px;letter-spacing:2px;color:#bfaa8a}.feature-row h3{font-size:17px;color:#7e9e89;margin:9px 0}.feature-row p{font-size:12px;line-height:1.9;color:#93a390}.guide{display:grid;grid-template-columns:.8fr 2fr;gap:30px;padding:28px;background:#fffdf6;border:1px solid #dde5d6;border-radius:20px}.guide h2{margin-bottom:12px}.guide ol{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.guide li{position:relative;padding-left:18px;border-left:1px solid #e4e8d9}.guide li>span{font-size:26px;color:#d8bd91;font-family:Georgia,serif;font-style:italic}.guide li h3{font-size:14px;color:#6f9785;margin:7px 0}.guide li p{font-size:12px;color:#9ba996;line-height:1.8}.guide li button,.guide li>a{position:absolute;right:0;top:0;padding:6px 10px;background:#eff3e6;color:#9aaf8d;border-radius:50%}footer{max-width:1150px;margin:38px auto;display:flex;gap:30px;align-items:center}footer p{flex:1;font-size:12px;color:#8da390;line-height:1.9}footer small{font-size:10px}.text-button{background:none;color:#8da390;font-size:12px}dialog{width:min(530px,90vw);border:1px solid #d5e4d1;border-radius:23px;background:#fffef7;padding:34px;color:#678779;box-shadow:0 20px 90px #37695c33}dialog::backdrop{background:#234e538c;backdrop-filter:blur(4px)}dialog h2{margin-top:15px}dialog p{font-size:14px;line-height:1.9}.close{position:absolute;right:16px;top:10px;font-size:28px;color:#8ba898;background:none}.modal-links{display:grid;gap:10px;font-size:12px;color:#4e9a8c;margin:15px 0}.modal-ok{margin-top:24px;font-size:14px;min-height:44px;border-radius:12px}
@media(min-width:1700px){.hero{height:760px}.hero-content{padding-top:90px}.island-scene{object-position:center 45%}}@media(max-width:1200px){header{padding:0 25px}.hero-content{padding-left:40px}.section,.server-strip{margin-left:25px;margin-right:25px}footer{padding:0 25px}.hero-brand{max-width:490px}.logo-main{font-size:76px}.hero:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#e8faff88,transparent 65%)}.news-item time{display:none}}
@media(max-width:900px){.brand+nav{gap:18px}.brand b{font-size:21px}header{gap:18px}.hero{height:650px}.hero-content{padding-top:60px}.logo-main{font-size:65px}.logo-small{font-size:48px}.hero-brand small{font-size:8px;letter-spacing:3px;margin-left:10px}.hero-kicker{font-size:11px;letter-spacing:1px}.hero-description{font-size:20px}.hero-description>span{font-size:13px}.hero-actions{gap:10px}.primary,.secondary{gap:15px;font-size:18px;padding:10px 15px;min-height:67px}.news-layout{grid-template-columns:1.4fr 1fr;gap:18px}.news-main{padding:23px 20px}.tabs{gap:14px}.tabs button{font-size:12px}.welcome-copy{padding:24px 15px}.welcome-copy h3{font-size:23px}.class-intro,.class-details{padding:25px}.guide{grid-template-columns:1fr}.section-heading>.muted{display:none}}
@media(max-width:650px){header{padding:12px 16px;height:auto;min-height:95px;flex-wrap:wrap;gap:12px}.brand b{font-size:21px}.brand-mark{font-size:25px}.brand-mark span{font-size:17px}.brand small{font-size:7px;letter-spacing:1.4px}.small-button{margin-left:auto;font-size:11px;padding:9px 13px}.brand+nav{order:3;width:100%;justify-content:center;font-size:12px;gap:36px}.demo{font-size:10px;letter-spacing:1px}.hero{height:770px}.island-scene{height:465px;object-position:76% center;object-fit:cover}.hero:before{background:linear-gradient(0deg,#eaf6ed 0%,#eaf6ed 35%,#eaf6ed00 62%)}.hero:after{height:70px}.hero-content{padding:320px 16px 55px;text-align:center}.hero-kicker{padding:7px 14px;margin-bottom:13px;font-size:10px;gap:9px;background:#fffff2ed}.hero-brand{margin:auto;max-width:350px}.logo-small{font-size:40px;padding-left:0;letter-spacing:5px;-webkit-text-stroke:6px #fffff8}.logo-main{font-size:62px;-webkit-text-stroke:7px #fffff8;letter-spacing:-3px}.hero-brand small{margin:17px 0 0;font-size:7px;letter-spacing:2.5px}.hero-description{margin:21px 0 15px;font-size:19px;line-height:1.7}.hero-description>span{font-size:12px;letter-spacing:.5px}.hero-actions{justify-content:center;margin-left:0;gap:12px}.primary,.secondary{min-height:60px;font-size:17px;padding:9px 16px;gap:16px}.primary small,.secondary small{font-size:7px;letter-spacing:2px}.button-icon{font-size:25px}.hero-note{font-size:9px;margin:19px 0 0;letter-spacing:.4px}.scroll-cue{bottom:9px;font-size:9px}.scroll-cue span{margin-top:2px}.section,.server-strip{margin:20px 14px}.server-strip{margin-top:0;padding:13px;font-size:10px}.server-strip>div{gap:7px}.server-strip .muted{display:none}.news-layout{grid-template-columns:1fr;gap:20px}.news-main{padding:22px}.news-item{font-size:12px;padding:16px 0}.news-item i{display:none}.tabs{gap:21px}.tabs button{font-size:11px}.welcome-card{min-height:275px}.paula-scene{background-position:85% 44%;background-size:auto 175%}.welcome-copy{padding:22px}.welcome-copy h3{font-size:26px}.welcome-copy a{margin-top:42px}.adventure{padding-top:15px}h2{font-size:23px}.class-layout{grid-template-columns:1fr}.class-intro{padding:25px}.class-intro h3{font-size:26px}.class-intro p{font-size:12px}.class-details{padding:25px}.class-details h3{font-size:21px}.class-details p{font-size:13px}.feature-row{grid-template-columns:1fr;gap:10px;margin:25px 0 0}.feature-row>div{border-right:0;border-bottom:1px solid #dbe3d3;padding:0 0 12px}.feature-row p br{display:none}.guide{padding:23px;gap:12px}.guide ol{grid-template-columns:1fr;gap:16px}.guide li>span{float:left;margin-right:15px}.guide li h3{margin-top:3px}.guide li p{margin-bottom:0}footer{margin:30px 0;flex-wrap:wrap;gap:10px;padding:0 22px}footer p{flex-basis:100%;font-size:11px}footer small{font-size:9px}dialog{padding:25px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.primary,.secondary{transition:none}}
/* Keep text readable over the illustrated sea without hiding Paula. */
@media(min-width:651px){.hero:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#effbefe6 0%,#effbefe0 15%,#effbf0b0 32%,#effbf02b 49%,transparent 61%)}.hero-description{color:#316773}.hero-note{color:#4b7369}.hero-brand small{color:#3e707e}}
header nav a[aria-current=page]{color:#358579;border-bottom:2px solid #8bb6a2;padding-bottom:5px}@media(max-width:1100px){header .brand+nav{gap:16px;font-size:12px}}@media(max-width:780px){header{height:auto;min-height:95px;padding-top:12px;padding-bottom:12px;flex-wrap:wrap;gap:12px}header .small-button{margin-left:auto}header .brand+nav{order:3;width:100%;justify-content:center;gap:clamp(10px,3vw,23px);font-size:12px;flex-wrap:wrap}}@media(max-width:650px){header .brand+nav{column-gap:clamp(10px,3vw,18px);row-gap:10px}}
.skill-entry{display:inline-block;margin:0 0 18px;color:#388c80;font-size:13px;font-weight:700;border-bottom:1px solid #a6c9b6;padding-bottom:4px}@media(max-width:900px){header .brand+nav{gap:16px;font-size:12px}}@media(max-width:650px){header .brand+nav{gap:23px;font-size:12px}}