:root{--ink:#183a34;--muted:#51655f;--paper:#f7f5ed;--card:#fffef9;--line:#d7ded4;--lime:#d4eea2;--orange:#faac73;--green:#123c35;--shadow:0 16px 50px #173b3410}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,"Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;font-size:17px;line-height:1.65}button,input{font:inherit}button,a,input,label{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:default;opacity:.5}a{color:var(--green);text-underline-offset:4px}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #b25416;outline-offset:4px}button{border:0}.topbar{max-width:1240px;margin:auto;padding:24px 40px;display:flex;justify-content:space-between;gap:20px;align-items:center}.brand{display:flex;gap:13px;text-decoration:none;font-size:21px;font-weight:800;line-height:1.2}.brand small{display:block;font-size:10px;letter-spacing:1.9px;margin-top:7px}.brand-icon{display:grid;place-items:center;background:var(--green);color:var(--lime);width:44px;height:44px;border-radius:13px;font-size:34px}.top-actions{display:flex;align-items:center;gap:15px}.languages{border:1px solid var(--line);border-radius:40px;padding:4px;display:flex}.languages button{background:transparent;border-radius:30px;min-width:55px;padding:7px 10px;font-size:16px}.languages button[aria-pressed=true]{background:var(--green);color:white}.text-button{background:transparent;color:var(--ink);padding:8px;text-decoration:underline;text-underline-offset:4px;font-size:16px}.shell{max-width:1160px;padding:10px 40px 40px;margin:auto}#progress{display:flex;gap:0;margin:8px 0 37px;list-style:none}#progress .stage{flex:1;border-top:3px solid var(--line);padding-top:12px;color:var(--muted);font-size:14px;display:flex;gap:9px;align-items:center}#progress .stage.active{border-color:var(--green);color:var(--green);font-weight:750}#progress .stage.done{border-color:#91b37c}#progress .num{display:grid;place-items:center;background:#e8ebe1;border-radius:50%;width:25px;height:25px;flex-shrink:0;font-size:13px}#progress .active .num{background:var(--green);color:white}h1{font-size:clamp(32px,5.4vw,60px);line-height:1.15;letter-spacing:-1.8px;margin:16px 0 22px}h2{font-size:29px;line-height:1.25;letter-spacing:-.5px;margin:10px 0 18px}h3{font-size:20px;margin:0 0 10px}p{margin:12px 0}.eyebrow{font-size:13px;text-transform:uppercase;letter-spacing:2px;font-weight:750;color:var(--muted)}.lead{font-size:20px;color:var(--muted);max-width:680px}.hero{display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:center;margin:35px 0 28px}.hero-illustration{min-height:330px;position:relative;background:#e9e9d6;border:1px solid #dddcca;border-radius:32px;display:grid;place-items:center;overflow:hidden}.route-circle{position:absolute;width:270px;height:270px;border:1px dashed #758678;border-radius:50%;transform:rotate(-24deg)}.route-circle:after{content:"";position:absolute;width:160px;height:160px;left:60px;top:55px;border:1px dashed #758678;border-radius:50%}.compass{position:relative;display:grid;place-items:center;background:var(--card);width:155px;height:155px;border-radius:50%;box-shadow:var(--shadow);font-size:110px;line-height:1;transform:rotate(22deg)}.stamp{position:absolute;background:var(--lime);padding:8px 17px;border-radius:9px;border:1px solid #698063;font-size:13px;letter-spacing:2px;font-weight:700;bottom:34px;right:22px;transform:rotate(-9deg)}.float-label{position:absolute;top:28px;left:24px;font-size:13px;letter-spacing:1px}.safe-note{display:flex;gap:12px;border-radius:14px;background:#e9efdf;padding:16px 20px;font-size:16px;line-height:1.55}.safe-note .symbol{font-size:23px}.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin:25px 0}.choice{position:relative;display:flex;gap:12px;flex-direction:column;background:var(--card);border:1px solid var(--line);padding:23px;border-radius:20px;cursor:pointer;min-height:180px;box-shadow:var(--shadow)}.choice:has(input:checked){background:#eff6dd;border:2px solid var(--green);padding:22px}.choice input{position:absolute;right:18px;top:18px;width:20px;height:20px;accent-color:var(--green)}.choice .emoji{font-size:38px;line-height:1.3}.choice strong{font-size:21px}.choice .muted{font-size:16px}.muted{color:var(--muted)}.actions{display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap;margin-top:28px}.action-group{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.button{display:inline-flex;justify-content:center;align-items:center;gap:12px;padding:13px 24px;border-radius:50px;background:var(--green);color:white;font-weight:650;min-height:52px;text-decoration:none;font-size:17px}.button.secondary{border:1px solid var(--line);background:var(--card);color:var(--ink)}.button.lime{background:var(--lime);color:var(--ink)}.panel{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:28px;box-shadow:var(--shadow)}.narrow{max-width:850px;margin:auto}.badge{display:inline-block;background:#eef2e5;border-radius:30px;padding:6px 12px;font-size:13px;font-weight:700;letter-spacing:.4px}.badge.orange{background:#ffe4cf}.permission{display:flex;gap:18px;border-top:1px solid var(--line);padding:23px 0;align-items:flex-start;cursor:pointer}.permission:first-of-type{margin-top:20px}.permission input{margin-top:6px;width:24px;height:24px;accent-color:var(--green);flex-shrink:0}.permission strong{display:block;font-size:21px}.permission .muted{display:block;margin-top:6px;font-size:16px}.permission .badge{margin-top:8px}.permission:last-of-type{padding-bottom:7px}.error{color:#893916;background:#fff0e2;padding:12px 16px;border-radius:12px}.quiz-top{display:flex;justify-content:space-between;gap:20px;align-items:center}.quiz-top h1{font-size:35px;margin:12px 0}.meter{height:8px;border-radius:8px;background:#dfe6d7;overflow:hidden;margin:16px 0}.meter-fill{height:100%;background:var(--green);width:0;transition:width .15s}.quiz-instructions{background:#f0f1e8;border-radius:14px;padding:15px 20px;font-size:16px;margin:15px 0 24px}summary{cursor:pointer;font-weight:700}fieldset{border:0;padding:0;margin:0;min-width:0}fieldset.question{padding:23px 0;border-top:1px solid var(--line)}.question legend{float:left;width:100%;padding:0 0 15px;font-weight:650;font-size:20px}.question legend .q-number{font-size:14px;font-weight:600;color:var(--muted);display:block}.responses{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;clear:both}.response{border:1px solid var(--line);border-radius:12px;text-align:center;min-height:95px;padding:11px 8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.35;gap:6px;font-size:15px}.response input{width:18px;height:18px;margin:0;accent-color:var(--green)}.response:has(input:checked){background:var(--lime);border-color:var(--green);box-shadow:0 0 0 1px var(--green)}.response .value{font-size:18px;font-weight:700}.quiz-actions{position:sticky;bottom:0;background:var(--paper);padding:12px 0;border-top:1px solid var(--line);z-index:2;margin-top:15px}.result-layout{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}.traveler-card{padding:36px;background:var(--green);color:var(--paper);border-radius:28px;overflow:hidden;position:relative}.traveler-card .eyebrow{color:#c5d2ba}.traveler-card .card-art{height:145px;display:flex;align-items:center;justify-content:center;font-size:91px;letter-spacing:20px;border-bottom:1px dashed #799086;margin-bottom:20px}.traveler-card h2{font-size:37px}.traveler-card .badge{background:var(--lime);color:var(--green)}.traveler-card p{font-size:18px}.traveler-card small{display:block;margin-top:24px;color:#e0e8d7;font-size:14px}.score-row{padding:17px 0;border-bottom:1px solid var(--line)}.score-head{display:flex;justify-content:space-between;gap:12px;align-items:start}.score-head strong{font-size:18px}.score-head .score{white-space:nowrap;font-weight:700}.score-track{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-top:8px;height:9px}.score-track i{background:#e6e9de;border-radius:5px}.score-track i.on{background:#517360}.score-details{font-size:14px;color:var(--muted);margin-top:7px}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:25px 0}.evidence{border-left:4px solid #91aa71;padding:18px 20px;background:#f0f4e7;border-radius:0 16px 16px 0}.evidence.uncertain{border-color:var(--orange);background:#fff0e2}.evidence p{font-size:16px}.permissions-summary{list-style:none;padding:0;margin:18px 0}.permissions-summary li{padding:10px 0;display:flex;gap:12px;justify-content:space-between;border-bottom:1px solid var(--line)}.permission-status{white-space:nowrap;font-weight:700}.timer{font-size:46px;font-weight:750;line-height:1.2;letter-spacing:-1px;margin:15px 0}.audit{font-size:15px;width:100%;border-collapse:collapse}.audit td,.audit th{text-align:left;padding:9px;border-bottom:1px solid var(--line)}.sources-list{padding-left:20px;font-size:16px}.sources-list li{margin:16px 0}.formula{background:#edf2e4;padding:15px 18px;border-radius:12px;font-size:16px}.source-link{overflow-wrap:anywhere}dialog{max-width:740px;width:calc(100% - 30px);max-height:88vh;border:1px solid var(--line);border-radius:24px;padding:28px;color:var(--ink);background:var(--card);box-shadow:0 30px 90px #0003}dialog::backdrop{background:#123c3570;backdrop-filter:blur(4px)}dialog #modal-close{margin-top:20px}dialog h2{padding-right:5px}footer{max-width:1160px;margin:0 auto;padding:25px 40px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}footer #privacy-foot{margin-right:auto}.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}.skip{position:fixed;left:20px;top:-100px;padding:12px 20px;background:white;z-index:10}.skip:focus{top:10px}.clear-list{padding-left:21px}.clear-list li{margin:9px 0}@media(max-width:760px){.topbar{padding:18px 20px}.brand{font-size:18px}.brand small{font-size:8px;letter-spacing:1px}.brand-icon{width:37px;height:37px}.top-actions{gap:5px}.languages button{min-width:43px;padding:6px 8px}.top-actions .text-button{font-size:15px}.shell{padding:5px 20px 25px}#progress{margin-bottom:24px}#progress .stage{font-size:11px;flex-direction:column;align-items:flex-start;gap:7px;line-height:1.3;padding-right:5px}.hero{grid-template-columns:1fr;gap:22px;margin:10px 0 25px}.hero-illustration{min-height:230px}.compass{width:125px;height:125px;font-size:90px}.route-circle{width:230px;height:230px}.hero h1{margin:14px 0 20px}.lead{font-size:18px}.choices{grid-template-columns:1fr}.choice{min-height:110px;display:grid;grid-template-columns:48px 1fr;gap:0 15px;padding:18px}.choice:has(input:checked){padding:17px}.choice .emoji{grid-row:span 2;font-size:34px;margin-top:6px}.choice strong{padding-right:20px}.panel{padding:21px 18px;border-radius:20px}.permission{gap:13px}.permission strong{font-size:20px}.result-layout,.two-col{grid-template-columns:1fr}.traveler-card{padding:27px}.quiz-top{align-items:flex-start}.quiz-top h1{font-size:29px}.question legend{font-size:19px}.responses{gap:5px}.response{font-size:12px;min-height:105px;padding:8px 3px}.response .value{font-size:17px}.button{padding:12px 18px;font-size:16px}.actions{align-items:stretch}.quiz-actions{gap:8px}.quiz-actions .muted{font-size:14px}.safe-note{padding:14px 16px}footer{padding:22px 20px;gap:7px 13px}footer #privacy-foot{width:100%;margin-bottom:5px}.score-head strong{font-size:16px}dialog{padding:23px 18px}.timer{font-size:42px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Keep response labels readable on narrow classroom devices. */
.response{font-size:16px;overflow-wrap:anywhere}.score-details,.traveler-card small,.audit,footer{font-size:16px}.modal-languages{width:fit-content;margin:0 0 20px auto}#progress .stage{font-size:16px}.languages{flex-shrink:0}.languages button{white-space:nowrap}.answer-review{margin-bottom:22px}@media(max-width:760px){.topbar{gap:10px}.brand small{white-space:nowrap}.response{font-size:16px;min-height:142px}#progress .stage{font-size:16px}.quiz-actions{position:static}}@media(max-width:600px){.responses{grid-template-columns:1fr}.response{flex-direction:row;min-height:48px;padding:10px 12px;justify-content:flex-start;text-align:left;gap:13px;overflow-wrap:normal}.response input{width:20px;height:20px;flex-shrink:0}.response .value{width:18px;flex-shrink:0}.response>span:last-child{flex:1}}@media(max-width:520px){#progress .stage>span:not(.num){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}#progress .stage{padding-top:9px}}

.score-track{display:block;background:#e6e9de;overflow:hidden;border-radius:5px}.score-track i.score-fill{display:block;height:100%;width:0;background:#517360;border-radius:5px}

[hidden]{display:none!important}.welcome-short{min-height:500px}.type-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin:35px 0}.type-card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px}.type-icon{font-size:35px}.type-card h2{font-size:21px;letter-spacing:0;margin-top:13px}.type-card p{font-size:16px;color:var(--muted)}.tipi-responses{grid-template-columns:repeat(7,minmax(0,1fr))}.flow-panel{margin-top:28px}.data-flow{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin:24px 0;padding:0}.flow-node{position:relative;background:#edf3e4;padding:18px;border:1px solid var(--line);border-radius:17px}.flow-node:after{content:"→";position:absolute;right:-21px;top:40%;font-size:24px}.flow-node:last-child:after{display:none}.flow-node h3{margin-top:12px}.flow-node p{font-size:16px}.flow-node.reuse{background:#fff0e1}.data-flow.replaying .flow-node{animation:flowReveal .65s both}.data-flow.replaying .flow-node:nth-child(2){animation-delay:.65s}.data-flow.replaying .flow-node:nth-child(3){animation-delay:1.3s}.data-flow.replaying .flow-node:nth-child(4){animation-delay:1.95s}@keyframes flowReveal{from{opacity:.2;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media(max-width:1000px){.type-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:760px){.type-grid{grid-template-columns:1fr 1fr}.data-flow{grid-template-columns:1fr;gap:26px}.flow-node:after{content:"↓";right:50%;top:auto;bottom:-29px}.welcome-short{min-height:0}.tipi-responses{grid-template-columns:1fr}.type-card{padding:17px}}@media(prefers-reduced-motion:reduce){.data-flow.replaying .flow-node{animation:none}}

/* Traveler scenes shared by introduction, result and share-preview cards. */
.type-image{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:12px;margin:0 0 14px}
.card-visual{margin:18px 0 24px}
.traveler-image{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:18px}
.phishing-reflection{font-size:18px;line-height:1.7;background:#fff0e2;border-left:4px solid var(--orange);border-radius:0 14px 14px 0;padding:18px 20px;margin-top:22px}
@media(max-width:760px){.traveler-image{border-radius:14px}.phishing-reflection{font-size:17px;padding:16px}}

/* Readable copy for the four data-use process cards. */
.flow-node h3{font-size:21px;line-height:1.4;font-weight:750}
.flow-node p.flow-copy{font-size:18px;line-height:1.65;margin:10px 0 0;overflow-wrap:anywhere}
@media(max-width:760px){.flow-node p.flow-copy{font-size:18px}}