:root{--teal:#008f8a;--teal-d:#0b7f7a;--ink:#0b3038;--muted:#506a71;--line:#dce9e8;--bg:#f3f8f9;--card:#fff}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.7 'PingFang HK','Microsoft JhengHei',Arial,sans-serif;-webkit-text-size-adjust:100%}
.ex-wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.ex-top{background:#fff;border-bottom:1px solid var(--line)}
.ex-top .ex-wrap{display:flex;align-items:center;gap:28px;height:64px}
.ex-brand img{display:block;height:38px;width:auto}
.ex-site-nav{display:flex;align-items:center;gap:25px;margin-right:auto;white-space:nowrap}
.ex-site-nav a{color:#506a71;text-decoration:none;font-size:14px;font-weight:600}
.ex-site-nav a:hover,.ex-site-nav a.is-current{color:var(--teal-d)}
.ex-back,.ex-link{color:var(--teal);text-decoration:none;font-weight:700;background:none;border:0;cursor:pointer;font:inherit;padding:0}
.ex-back{font-size:14px;white-space:nowrap}
.ex-main{padding-top:32px;padding-bottom:50px}
.ex-view:not(#view-home){max-width:860px;margin:0 auto}
.ex-view h1{font-size:27px;line-height:1.3;margin:0 0 8px}
.ex-sub{color:var(--muted);margin:0 0 22px}
.ex-home-intro{padding:34px 42px 31px;border-radius:18px;background:linear-gradient(115deg,#103e48,#0d6c6b);color:#fff;margin-bottom:32px}
.ex-eyebrow{display:block;color:#9be4dc;font-size:12px;font-weight:800;letter-spacing:2px;margin-bottom:12px}
.ex-home-intro h1{font-size:35px;letter-spacing:-.5px;margin:0 0 12px}
.ex-home-intro>p{max-width:700px;font-size:17px;line-height:1.75;margin:0 0 16px;color:#eff9f8}
.ex-intro-note{border-top:1px solid #ffffff35;padding-top:13px;color:#cae9e6;font-size:13px;line-height:1.7}
.ex-discover{margin-bottom:20px}
.ex-discover-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:19px}
.ex-discover h2{font-size:24px;line-height:1.3;margin:0 0 3px}
.ex-discover-head p{font-size:14px;color:var(--muted);margin:0}
.ex-search{display:flex;align-items:center;width:min(100%,360px);height:48px;background:#fff;border:1px solid #cbdfe1;border-radius:10px;padding:0 13px;transition:border-color .2s,box-shadow .2s}
.ex-search:focus-within{border-color:var(--teal);box-shadow:0 0 0 3px #008f8a24}
.ex-search-icon{color:var(--teal);font-size:27px;line-height:1;margin-right:8px;transform:rotate(-20deg)}
.ex-search input{border:0;outline:0;min-width:0;width:100%;font:inherit;color:var(--ink);background:transparent}
.ex-search input::placeholder{color:#698087}
.ex-categories{display:flex;flex-wrap:wrap;gap:9px}
.ex-category{border:1px solid #cfdee0;border-radius:999px;background:#fff;color:#365861;font:inherit;font-size:14px;font-weight:700;padding:7px 15px;cursor:pointer;white-space:nowrap}
.ex-category:hover{border-color:var(--teal)}
.ex-category[aria-pressed="true"]{background:var(--teal-d);border-color:var(--teal-d);color:#fff}
.ex-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ex-card{display:flex;flex-direction:column;min-width:0;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:23px;box-shadow:0 7px 22px #123b450b}
.ex-card[hidden]{display:none}
.ex-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}
.ex-card-number{font-size:13px;font-weight:700;color:#60777e;white-space:nowrap}
.ex-card h2{font-size:20px;line-height:1.45;margin:0 0 9px}
.ex-tag{display:inline-block;background:#e5f7f3;color:var(--teal-d);border-radius:999px;padding:3px 12px;font-size:13px;font-weight:800}
.ex-tag-warn{background:#fff3e0;color:#b66343;margin-left:6px}
.ex-report{margin-top:12px;text-align:right}
.ex-report button{background:none;border:0;color:#9bb0b4;font:inherit;font-size:12px;cursor:pointer;text-decoration:underline}
.ex-card-desc{color:var(--muted);margin:0 0 18px;font-size:14px;line-height:1.75;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.ex-card-bottom{margin-top:auto;border-top:1px solid #e8eff0;padding-top:16px}
.ex-meta{display:flex;flex-wrap:wrap;gap:8px 15px;color:#365861;font-size:13px;font-weight:700;margin:0 0 15px}
.ex-meta span{color:var(--muted);font-weight:400}
.ex-actions{display:flex;gap:10px;flex-wrap:wrap}
.ex-btn{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:10px;padding:11px 20px;font:inherit;font-weight:700;cursor:pointer}
.ex-card .ex-btn{font-size:15px;padding:10px 16px}
.ex-btn:hover:not(:disabled){border-color:var(--teal);box-shadow:0 3px 12px #008f8a18}
.ex-btn-primary:hover:not(:disabled){background:var(--teal-d);color:#fff}
.ex-btn:disabled{opacity:.45;cursor:default}
.ex-btn-primary{background:var(--teal);border-color:var(--teal);color:#fff}
.ex-empty{background:#fff;border:1px dashed #bfd6d8;border-radius:14px;text-align:center;padding:38px 20px;color:var(--muted);font-weight:700}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:where(button,input,select,a):focus-visible{outline:3px solid #f1a66a;outline-offset:3px}
.ex-setup-box{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:28px;display:grid;gap:18px;width:100%;box-shadow:0 7px 22px #123b450b}
.ex-field{display:grid;gap:6px;font-weight:700;font-size:14px}
.ex-field select{padding:11px 12px;border:1px solid #b9d2d8;border-radius:9px;font:inherit;background:#fff}
.ex-note{color:var(--muted);font-size:13px;margin:0}
.ex-quiz-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.ex-progress{font-weight:800}
.ex-timer{background:#fff1eb;color:#b66343;border-radius:999px;padding:4px 14px;font-weight:800;font-variant-numeric:tabular-nums}
.ex-quiz-caption{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:13px;font-weight:700;margin-bottom:7px}
.ex-bar{height:7px;background:#e2edec;border-radius:999px;overflow:hidden;margin-bottom:18px}
#q-bar{height:100%;width:0;background:var(--teal);transition:width .25s}
.ex-q{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px}
.ex-question-heading{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:13px}
.ex-question-number{background:#e5f7f3;border-radius:6px;color:var(--teal-d);font-size:12px;font-weight:800;padding:2px 9px}
.ex-q-topic{color:var(--teal-d);font-size:13px;font-weight:800;margin:0}
.ex-q-text{font-size:20px;line-height:1.55;font-weight:800;margin:0 0 22px}
.ex-opt{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:11px;padding:13px 15px;margin:0 0 10px;cursor:pointer;background:#fff;text-align:left;font:inherit;width:100%}
.ex-opt:hover{border-color:#a9d6d2;background:#f6fbfa}
.ex-opt:disabled{opacity:1;cursor:default}
.ex-opt:disabled:not(.right):not(.wrong):hover{border-color:var(--line);background:#fff}
.ex-opt:disabled>span:last-child{color:var(--ink);-webkit-text-fill-color:var(--ink)}
.ex-opt:disabled .k{color:var(--muted);-webkit-text-fill-color:var(--muted)}
.ex-opt .k{flex:0 0 26px;height:26px;border-radius:50%;border:1px solid #b9d2d8;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px}
.ex-opt.sel{border-color:var(--teal);background:#effaf8}
.ex-opt.sel .k{background:var(--teal);border-color:var(--teal);color:#fff}
.ex-opt.right{border-color:#2e9e6b;background:#eefaf3}
.ex-opt.right .k{background:#2e9e6b;border-color:#2e9e6b;color:#fff}
.ex-opt.right:disabled .k{color:#fff;-webkit-text-fill-color:#fff}
.ex-opt.wrong{border-color:#d9534f;background:#fdeeee}
.ex-opt.wrong .k{background:#d9534f;border-color:#d9534f;color:#fff}
.ex-opt.wrong:disabled .k{color:#fff;-webkit-text-fill-color:#fff}
.ex-feedback{border:1px solid #cce7dd;background:#f2faf6;border-radius:12px;padding:16px 18px;margin:20px 0 0;color:var(--ink);scroll-margin-bottom:96px}
.ex-feedback.is-incorrect{border-color:#f3d5cc;background:#fff7f4}
.ex-feedback-head{display:flex;align-items:center;gap:12px}
.ex-feedback-icon{display:flex;align-items:center;justify-content:center;flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:#209567;color:#fff;font-size:19px;font-weight:800}
.ex-feedback.is-incorrect .ex-feedback-icon{background:#d4514d}
.ex-feedback-head strong{display:block;font-size:16px;line-height:1.3}
.ex-feedback-head span:last-child{display:block;color:#35565d;font-size:14px;line-height:1.5;margin-top:2px}
.ex-feedback-explanation{border-top:1px solid #d8e9e4;padding-top:11px;margin:13px 0 0;font-size:15px;line-height:1.65}
.ex-feedback.is-incorrect .ex-feedback-explanation{border-color:#f0dcd5}
.ex-quiz-foot{display:flex;gap:10px;justify-content:space-between;margin-top:18px}
#view-quiz .ex-quiz-foot{position:sticky;bottom:0;z-index:5;background:var(--bg);border-top:1px solid var(--line);padding:13px 0 10px;margin-top:10px}
.ex-result-card{background:linear-gradient(135deg,#082f39,#0c545c);color:#fff;border-radius:18px;padding:30px;text-align:center}
.ex-result-card .score{font-size:56px;font-weight:900;line-height:1}
.ex-result-card .verdict{font-size:20px;font-weight:900;margin-top:8px}
.ex-result-card .pass{color:#7ce4d9}.ex-result-card .fail{color:#ff9b77}
.ex-result-card .sub{color:#c8e6e2;font-size:14px;margin-top:8px}
.ex-review{margin-top:24px;display:grid;gap:12px}
.ex-review h3{font-size:18px;margin:0}
.ex-rv{background:#fff;border:1px solid var(--line);border-radius:13px;padding:16px}
.ex-rv .tag{font-size:12px;font-weight:900;border-radius:999px;padding:2px 10px;display:inline-block;margin-bottom:8px}
.ex-rv .tag.ok{background:#eefaf3;color:#2e9e6b}.ex-rv .tag.no{background:#fdeeee;color:#d9534f}
.ex-rv .q{font-weight:800;margin:0 0 8px}
.ex-rv .a{font-size:14px;color:#315960;margin:2px 0}.ex-rv .a b{color:var(--ink)}
.ex-foot{color:var(--muted);font-size:13px;padding:26px 18px;text-align:center}
.ex-foot a{color:var(--teal);text-decoration:none}
.ex-loading{color:var(--muted)}
@media(max-width:760px){.ex-cards{grid-template-columns:1fr}.ex-discover-head{align-items:stretch;flex-direction:column;gap:14px}.ex-search{width:100%}}
@media(max-width:1050px){.ex-top .ex-wrap{gap:16px}.ex-site-nav{gap:14px}.ex-site-nav a{font-size:13px}}
@media(max-width:850px){.ex-site-nav{overflow-x:auto;scrollbar-width:none}.ex-site-nav::-webkit-scrollbar{display:none}.ex-back{display:none}}
@media(max-width:560px){.ex-wrap{padding:0 16px}.ex-top .ex-wrap{gap:16px}.ex-brand img{height:32px}.ex-site-nav{gap:15px}.ex-main{padding-top:18px}.ex-home-intro{padding:27px 22px;margin-bottom:27px}.ex-home-intro h1{font-size:28px}.ex-home-intro>p{font-size:15px}.ex-discover h2{font-size:21px}.ex-categories{flex-wrap:nowrap;overflow-x:auto;padding-bottom:8px;scrollbar-width:thin}.ex-card{padding:19px}.ex-card h2{font-size:18px}.ex-view:not(#view-home) h1{font-size:23px}.ex-setup-box{padding:20px}.ex-quiz-foot{flex-wrap:wrap}.ex-btn{flex:1 1 auto;text-align:center}}