:root{--ink:#153d48;--deep:#123640;--teal:#2e9689;--mint:#dff4eb;--yellow:#ffe08a;--coral:#ff856f;--paper:#fffdf7;--muted:#657a7c;--line:#d7e9df;--shadow:0 9px 0 #d7e8df}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:radial-gradient(circle at 10% 5%,#fff1c8 0 8%,transparent 28%),linear-gradient(135deg,#f8fbef 0%,#eef8f1 45%,#fff7e7 100%);font-family:"Be Vietnam Pro",sans-serif}.timo-shell{max-width:1240px;margin:auto;padding:0 28px}.timo-header{height:78px;display:flex;align-items:center;gap:24px}.back-link{color:var(--teal);font-size:12px;font-weight:800;text-decoration:none}.timo-brand{display:flex;align-items:center;gap:10px;margin:auto;font:800 20px/1 "Baloo 2",sans-serif}.timo-brand small{display:block;margin-top:4px;color:var(--muted);font:700 8px "Be Vietnam Pro",sans-serif;letter-spacing:.12em;text-transform:uppercase}.timo-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:13px 13px 13px 4px;color:var(--deep);background:var(--yellow);font-size:24px;box-shadow:0 4px 0 #e3bb54}.header-chip{display:flex;align-items:baseline;gap:5px;padding:8px 12px;border:1px solid #cfe4d9;border-radius:99px;background:#fff;color:var(--teal)}.header-chip strong{font:800 19px "Baloo 2",sans-serif}.header-chip small{font-size:9px;font-weight:800}.eyebrow{margin:0;color:#6c9b8f;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.timo-hero{position:relative;display:grid;grid-template-columns:1.15fr .85fr;min-height:365px;align-items:center;overflow:hidden;padding:48px 60px;border-radius:30px 30px 30px 8px;color:#effdf6;background:linear-gradient(120deg,#123f4a,#286d6d);box-shadow:0 12px 0 #c3ded3}.timo-hero:after{content:"TIMO 03";position:absolute;right:28px;bottom:-22px;color:rgba(255,255,255,.07);font:800 120px "Baloo 2",sans-serif;transform:rotate(-8deg)}.hero-copy{position:relative;z-index:1}.timo-hero .eyebrow{color:#b8e0c9}.timo-hero h1{margin:18px 0 14px;font:800 clamp(44px,6vw,75px)/.86 "Baloo 2",sans-serif;letter-spacing:-.03em}.timo-hero h1 em{color:var(--yellow);font-style:normal}.hero-copy>p:not(.eyebrow){max-width:560px;color:#cee4dc;font-size:13px;line-height:1.75}.hero-stats{display:flex;gap:12px;margin-top:25px}.hero-stats span{display:grid;gap:1px;min-width:92px;padding:9px 12px;border:1px solid rgba(255,255,255,.2);border-radius:13px;background:rgba(255,255,255,.08)}.hero-stats b{color:var(--yellow);font:800 22px "Baloo 2",sans-serif}.hero-stats small{color:#cce5dc;font-size:9px;font-weight:700}.hero-orbit{position:relative;width:300px;height:300px;margin:auto}.orbit-ring{position:absolute;border:1px dashed rgba(255,224,138,.55);border-radius:50%;inset:15px;animation:spin 24s linear infinite}.ring-two{inset:55px;border-style:solid;border-color:rgba(126,224,191,.35);animation-direction:reverse;animation-duration:17s}.orbit-core{position:absolute;inset:94px;display:grid;place-items:center;align-content:center;border:4px solid var(--yellow);border-radius:50%;color:var(--yellow);background:#1b5960;box-shadow:0 0 0 12px rgba(255,224,138,.08),0 12px 0 #0d3139;text-align:center;font:800 27px/1 "Baloo 2",sans-serif}.orbit-core small{margin-top:4px;font-size:14px}.orbit-token{position:absolute;display:grid;place-items:center;width:45px;height:45px;border-radius:15px;color:var(--deep);background:#fff8d8;box-shadow:0 5px 0 rgba(0,0,0,.15);font:800 24px "Baloo 2",sans-serif;animation:float 3s ease-in-out infinite}.token-one{left:10px;top:70px}.token-two{right:4px;top:36px;animation-delay:.7s}.token-three{right:20px;bottom:41px;animation-delay:1.1s}.token-four{left:28px;bottom:24px;animation-delay:1.5s}@keyframes spin{to{transform:rotate(360deg)}}@keyframes float{50%{transform:translateY(-10px) rotate(5deg)}}.mode-panel{margin:60px 0 34px}.mode-heading,.progress-footer{display:flex;align-items:end;justify-content:space-between;gap:20px}.mode-heading h2,.progress-footer h2{margin:4px 0 0;font:800 34px "Baloo 2",sans-serif}.outline-button{border:1px solid #bdd9cd;border-radius:99px;padding:10px 14px;color:var(--teal);background:#fff;font-size:11px;font-weight:800;cursor:pointer}.outline-button:hover{background:var(--mint)}.mode-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:20px}.mode-card{min-height:123px;padding:17px;border:2px solid transparent;border-radius:18px 18px 18px 5px;color:var(--ink);background:#fff;box-shadow:var(--shadow);text-align:left;cursor:pointer;transition:.18s}.mode-card:hover,.mode-card.active{transform:translateY(-4px);border-color:#74bca7}.mode-card.active{background:#e4f7ec}.mode-icon{display:grid;place-items:center;width:35px;height:35px;margin-bottom:13px;border-radius:11px;color:var(--deep);background:var(--yellow);font:800 17px "Baloo 2",sans-serif}.mode-card:nth-child(2) .mode-icon{background:#ffd3a0}.mode-card:nth-child(3) .mode-icon{background:#bfe9e0}.mode-card:nth-child(4) .mode-icon{background:#c8dcfa}.mode-card strong{display:block;font:800 16px/1.05 "Baloo 2",sans-serif}.mode-card small{display:block;margin-top:6px;color:var(--muted);font-size:9px;line-height:1.4}.workspace{display:grid;grid-template-columns:245px minmax(0,1fr);gap:25px;align-items:start}.topic-rail{padding:22px 14px;border-radius:22px 22px 22px 6px;background:#fff;box-shadow:var(--shadow)}.topic-tab{display:grid;grid-template-columns:35px 1fr;column-gap:9px;width:100%;margin-top:7px;padding:11px 9px;border:0;border-radius:13px;color:var(--ink);background:transparent;text-align:left;cursor:pointer}.topic-tab span{grid-row:1/span 2;display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:#eff7ee;font-size:16px}.topic-tab b{font-size:11px}.topic-tab small{margin-top:2px;color:var(--muted);font-size:9px}.topic-tab:hover,.topic-tab.active{color:var(--deep);background:#e6f6ed}.topic-tab.active span{background:var(--yellow)}.source-note{margin:18px 5px 0;padding:13px;border-radius:12px;background:#fff4d1}.source-note strong{font-size:10px}.source-note p{margin:5px 0 0;color:#6e7161;font-size:9px;line-height:1.55}.timo-quiz{min-width:0;padding:25px 27px 23px;border-radius:25px 25px 25px 7px;color:#eefcf6;background:var(--deep);box-shadow:0 10px 0 #bcd9ce}.quiz-toolbar,.question-meta,.quiz-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}.round-label{color:var(--yellow);font-size:10px;font-weight:800;letter-spacing:.1em}.question-count{margin-left:12px;color:#b8d5cc;font-size:10px}.toolbar-right{display:flex;align-items:center;gap:7px}.timer{min-width:55px;padding:6px 9px;border:1px solid #508878;border-radius:99px;color:var(--yellow);font:800 13px "Baloo 2",sans-serif;text-align:center}.icon-button{width:27px;height:27px;border:1px solid #508878;border-radius:50%;color:#d5eee3;background:transparent;font-weight:800;cursor:pointer}.icon-button:hover{border-color:var(--yellow);color:var(--yellow)}.quiz-progress{height:9px;margin:17px 0 17px;overflow:hidden;border-radius:99px;background:#315a60}.quiz-progress span{display:block;width:10%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--yellow),#7ee0bf);transition:width .25s}.category-pill{padding:6px 9px;border:1px solid #71ab98;border-radius:99px;color:#d9f5e8;font-size:10px;font-weight:800}.difficulty{color:#b9d3cb;font-size:10px}.question-card{margin-top:13px;padding:22px 22px 18px;border-radius:18px 18px 18px 5px;color:var(--ink);background:var(--paper)}.question-number{margin:0;color:#9cb6ad;font:800 12px "Baloo 2",sans-serif;letter-spacing:.08em}.question-card h2{margin:8px 0 13px;font:700 clamp(20px,3vw,27px)/1.35 "Be Vietnam Pro",sans-serif}.question-translation{margin:0 0 15px;padding:10px 12px;border-left:4px solid #f1c958;border-radius:0 10px 10px 0;background:#fff4cf}.question-translation span,.solution-grid span,.answer-block label,.work-block label,.answer-reveal span{display:block;color:#76918a;font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.question-translation p{margin:3px 0 0;color:#5e716d;font-size:11px;line-height:1.55}.diagram{margin:10px 0 16px;padding:10px;border:1px solid #dcece4;border-radius:13px;background:#f8fffa}.diagram svg{display:block;width:100%;max-height:170px}.answer-block{margin-top:18px}.answer-entry{display:flex;gap:9px;margin-top:7px}.answer-entry input{width:100%;min-width:0;padding:14px 15px;border:2px solid #cfe4da;border-radius:12px 12px 12px 4px;color:var(--ink);outline:0;font:700 16px "Be Vietnam Pro",sans-serif}.answer-entry input:focus{border-color:var(--teal);box-shadow:0 0 0 4px #dff4eb}.answer-entry input:disabled{background:#f2f7f3}.answer-entry button,.next-button{border:0;border-radius:12px 12px 12px 4px;color:var(--deep);background:var(--yellow);font-weight:800;cursor:pointer;box-shadow:0 4px 0 #e3bc5e}.answer-entry button{min-width:105px;font-size:13px}.answer-entry button:hover,.next-button:hover:not(:disabled){transform:translateY(-2px)}.answer-hint{margin:7px 0 0;color:#95a6a1;font-size:9px}.work-block{margin-top:17px}.work-block textarea{display:block;width:100%;min-height:89px;margin-top:7px;padding:11px 13px;border:1px dashed #bcd7ca;border-radius:11px;color:var(--ink);background:repeating-linear-gradient(to bottom,#fff 0,#fff 24px,#e1eee7 25px);font:500 12px/25px "Be Vietnam Pro",sans-serif;resize:vertical}.work-block textarea:focus{outline:2px solid #b8e4d1}.result-panel{margin-top:17px;padding:15px;border:2px solid #edcf72;border-radius:14px;background:#fdf6d8}.result-title{display:flex;align-items:center;gap:8px;color:#1d6d59}.result-title span{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;color:#fff;background:#2e9689;font-weight:800}.result-title strong{font:800 16px "Baloo 2",sans-serif}.answer-reveal{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0;padding:10px;border-radius:10px;background:#e5f6e9}.answer-reveal b{color:#1d735e;font:800 22px "Baloo 2",sans-serif}.solution-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.solution-grid>div{padding:10px;border-radius:10px;background:rgba(255,255,255,.65)}.solution-grid p{margin:5px 0 0;color:#496660;font-size:11px;line-height:1.6}.quiz-actions{margin-top:16px}.text-action{border:0;color:#b8d5cc;background:none;font-size:10px;font-weight:800;cursor:pointer}.text-action:hover{color:var(--yellow)}.next-button{min-width:180px;padding:13px 18px}.next-button:disabled{cursor:not-allowed;opacity:.4}.progress-footer{margin:70px 0 30px;padding:25px 28px;border-radius:22px 22px 22px 6px;background:#fff;box-shadow:var(--shadow)}.progress-cards{display:flex;gap:10px}.progress-cards>div{min-width:100px;padding:10px 13px;border-radius:13px;background:#edf8f0;text-align:center}.progress-cards strong{display:block;color:var(--teal);font:800 22px "Baloo 2",sans-serif}.progress-cards span{display:block;color:var(--muted);font-size:9px}footer{display:flex;justify-content:space-between;padding:24px 0 35px;color:#77918d;font-size:10px}footer a{color:var(--teal);font-weight:800;text-decoration:none}.correct-panel .result-title span{background:#2e9689}.wrong-panel{border-color:#ffb09f;background:#fff0e9}.wrong-panel .result-title{color:#b45745}.wrong-panel .result-title span{background:var(--coral)}@media(max-width:900px){.timo-hero{padding:38px 35px}.mode-grid{grid-template-columns:repeat(2,1fr)}.workspace{grid-template-columns:190px minmax(0,1fr)}.topic-tab{grid-template-columns:29px 1fr}.topic-tab span{width:27px;height:27px;font-size:13px}.topic-tab b{font-size:10px}}@media(max-width:650px){.timo-shell{padding:0 15px}.timo-header{height:66px;gap:10px}.back-link{font-size:10px}.timo-brand{font-size:16px;gap:6px}.timo-mark{width:30px;height:30px;font-size:19px}.header-chip{padding:6px 8px}.timo-hero{display:block;min-height:580px;padding:30px 23px}.hero-orbit{width:250px;height:250px;margin:22px auto 0}.orbit-core{inset:78px}.mode-panel{margin-top:50px}.mode-heading h2,.progress-footer h2{font-size:28px}.mode-grid{grid-template-columns:1fr 1fr;gap:10px}.mode-card{min-height:130px;padding:12px}.mode-card strong{font-size:14px}.workspace{grid-template-columns:1fr;gap:15px}.topic-rail{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:13px}.topic-rail>.eyebrow,.source-note{grid-column:1/-1}.topic-tab{margin:0;padding:8px 5px;display:block;text-align:center}.topic-tab span{margin:0 auto 4px}.topic-tab b,.topic-tab small{display:block;font-size:8px}.timo-quiz{padding:17px 13px}.question-card{padding:17px 14px}.question-card h2{font-size:18px}.answer-entry{display:block}.answer-entry button{width:100%;min-height:45px;margin-top:8px}.solution-grid{grid-template-columns:1fr}.progress-footer{display:block;padding:20px}.progress-cards{margin-top:16px;justify-content:space-between}.progress-cards>div{min-width:0;flex:1;padding:8px 4px}.progress-cards span{font-size:8px}footer{padding-bottom:25px}}
.diagram .grid line{stroke:#2d8d80;stroke-width:2}.diagram .grid .mark{fill:#ff856f}.diagram .shape{fill:#dff4eb;stroke:#2d8d80;stroke-width:3}.diagram .measure{stroke:#f1b83b;stroke-width:2;stroke-dasharray:6 4}.diagram text{fill:#58716d;font:700 12px "Be Vietnam Pro",sans-serif}.diagram .cube{fill:#bfe9e0;stroke:#2d8d80;stroke-width:2}.diagram .route{stroke:#2d8d80;stroke-width:5;stroke-linecap:round;stroke-dasharray:10 8}.diagram .point{fill:#ff856f;stroke:#fff;stroke-width:3}
.bank-filter{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-top:17px;padding:9px 11px;border:1px solid #d6e8df;border-radius:14px;background:rgba(255,255,255,.68)}.bank-filter>span{margin-right:auto;color:#64817a;font-size:10px;font-weight:800}.bank-filter-button{padding:7px 10px;border:1px solid #c7ded4;border-radius:99px;color:#52756c;background:#fff;font-size:9px;font-weight:800;cursor:pointer}.bank-filter-button:hover,.bank-filter-button.active{border-color:#58a990;color:#1b6858;background:#ddf3e8}.bank-filter>strong{width:100%;color:#839894;font-size:9px}.source-excerpt{margin:14px 0;padding:11px 12px;border:1px dashed #c6dcd1;border-radius:11px;background:#f7fcf8}.source-excerpt span{display:block;color:#6a9182;font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.source-excerpt p{max-height:165px;overflow:auto;margin:5px 0 0;color:#60736e;font:500 10px/1.65 "Be Vietnam Pro",sans-serif;white-space:pre-line}
.source-figure-image{display:block;width:min(100%,560px);max-height:330px;margin:2px auto 4px;object-fit:contain;border-radius:10px;background:#fff;box-shadow:0 4px 14px rgba(21,61,72,.08)}
.diagram:has(.source-figure-image){padding:12px;background:#fffdf8}
@media(max-width:650px){.source-figure-image{max-height:260px}.diagram:has(.source-figure-image){padding:8px}}
.diagram .outline{fill:none;stroke:#2d8d80;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}