:root{--ink:#213c3c;--muted:#707d75;--paper:#f5f3ec;--orange:#db5b32;--line:#d9ddd1;--green:#dce9dc}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:15px 'DM Sans',sans-serif}button,select{font:inherit;color:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #dc6c40;outline-offset:4px}header{max-width:1440px;margin:auto;padding:25px 48px;display:flex;align-items:center;border-bottom:1px solid var(--line);gap:24px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font-weight:800;font-size:15px;letter-spacing:1.4px}.brand small{display:block;font-size:8px;font-weight:600;letter-spacing:1.7px;margin-top:5px}.logo{background:var(--ink);color:#fff;border-radius:11px;width:44px;height:44px;font-size:38px;line-height:40px;text-align:center;position:relative;font-family:Georgia}.logo span{font:20px sans-serif;position:absolute;right:3px;top:1px;color:#eebc71}.school{margin-left:auto;font-size:10px;letter-spacing:1.3px}.circle{border:1px solid #bec8bc;background:none;border-radius:50%;height:30px;width:30px}main{max-width:1440px;padding:42px 48px 0;margin:auto}.intro{display:flex;justify-content:space-between;align-items:end;margin-bottom:28px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:var(--orange)}h1{font:700 clamp(32px,4vw,51px)/1.15 'Manrope',sans-serif;letter-spacing:-2px;margin:10px 0}h1 em{font:italic 1.1em Georgia;color:var(--orange)}.intro p{color:var(--muted);margin:12px 0 0}.instruction{font-size:11px;display:flex;gap:10px;align-items:center;padding-bottom:6px}.instruction span{color:var(--orange);font-weight:700;margin-left:9px}.controls{display:flex;gap:25px;background:#fffef9;padding:17px 21px;border:1px solid var(--line);border-radius:12px;align-items:center;margin-bottom:22px}.verb-label>span,.voice>span{display:block;font-size:9px;letter-spacing:1.5px;color:var(--muted);font-weight:700;margin-bottom:7px}select{min-width:220px;background:transparent;border:0;font-weight:700;font-size:17px;padding-right:12px}.forms{font-size:12px;color:var(--muted);flex:1}.forms b{color:var(--ink);display:block;margin-bottom:4px;font-weight:500}.segmented{display:flex;background:#eeeee7;border-radius:7px;padding:3px}.segmented button{border:0;background:transparent;padding:6px 18px;border-radius:5px;font-size:12px}.segmented .selected{background:var(--ink);color:white;box-shadow:0 2px 5px #163f3820}.compare{border:1px solid var(--line);background:none;padding:12px 16px;border-radius:7px;font-size:12px}.compare.on{background:var(--orange);color:#fff;border-color:var(--orange)}.cards{display:grid;grid-template-columns:1fr;gap:20px;min-height:340px}.card{background:white;border:1px solid var(--line);border-radius:15px;overflow:hidden;display:grid;grid-template-columns:1.08fr 1fr}.visual{position:relative;min-height:340px;background:#e4dfce;overflow:hidden;cursor:zoom-in}.scene{position:absolute;inset:0;background-repeat:no-repeat;background-size:200% 200%}.visual:after{content:'';position:absolute;inset:50% 0 0;background:linear-gradient(transparent,#18362d65);pointer-events:none}.scene-label{position:absolute;left:19px;top:18px;z-index:1;border-radius:30px;background:#fffef5eb;font-size:10px;letter-spacing:.8px;padding:8px 12px;font-weight:700}.zoom{position:absolute;bottom:17px;right:19px;z-index:1;color:#fff;background:#16362b88;border:1px solid #fff6;border-radius:20px;padding:6px 11px;font-size:11px}.scene-caption{position:absolute;bottom:22px;left:20px;color:white;z-index:1;font-size:12px;max-width:70%;text-shadow:0 1px 3px #0008}.card-body{padding:30px 35px;display:flex;flex-direction:column}.card-top{display:flex;align-items:center;gap:10px}.tag{color:var(--orange);font-size:9px;font-weight:700;letter-spacing:1.2px}.card-number{margin-left:auto;color:#a1aa9e;font-size:11px}h3{font:700 23px 'Manrope',sans-serif;margin:9px 0 20px;letter-spacing:-.5px}.sentence{font:500 clamp(21px,2.3vw,30px)/1.4 'Manrope',sans-serif;margin:0 0 9px}.sentence mark{color:var(--orange);background:none;font-weight:800}.translation{font-size:12px;color:var(--muted);margin:0 0 17px;line-height:1.6}.explanation{font-size:12px;line-height:1.6;border-top:1px solid #eaede4;padding-top:13px;margin:0}.mini{display:flex;align-items:center;gap:7px;font-size:9px;color:var(--muted);margin:16px 0 11px}.mini-line{flex:1;background:#dce2d6;height:3px;position:relative}.mini-line:before{content:'';position:absolute;left:var(--start);width:var(--length);height:6px;top:-1.5px;background:var(--orange);border-radius:5px}.mini-line:after{content:'';position:absolute;left:65%;height:11px;width:1px;background:var(--ink);top:-4px}.card-bottom{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:9px}.formula{font-size:10px;background:#f1f4ed;padding:7px 10px;border-radius:5px;color:#4d665b;flex:1}.speak{border:1px solid var(--line);border-radius:50%;background:none;width:30px;height:30px;font-size:15px}.timebox{margin-top:28px;padding:23px 26px 17px;border:1px solid var(--line);border-radius:12px;background:#eeefe7}.timehead{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.timehead h2{font:700 16px 'Manrope',sans-serif;margin:0}.timehead>span{font-size:10px;color:var(--muted)}.axis{display:grid;grid-template-columns:1fr 1.4fr 1fr;position:relative;text-align:center;font-size:9px;letter-spacing:1.8px;padding-bottom:15px;border-bottom:2px solid #aab8a7}.axis:after{content:'➜';position:absolute;right:-7px;bottom:-10px;color:#aab8a7;font-size:22px}.axis .now{color:var(--orange);font-weight:800}.axis .now:after{content:'';position:absolute;width:9px;height:9px;border:4px solid #eeefe7;background:var(--orange);border-radius:50%;box-sizing:content-box;bottom:-9px;left:calc(50% - 9px)}.timeline{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:26px;padding:23px 0 17px}.zone{display:grid;grid-template-columns:1fr;gap:7px;align-content:start}.zone:nth-child(2){grid-template-columns:1fr 1fr}.tense{position:relative;border:1px solid #d4dacf;background:#fafbf6;border-radius:7px;padding:10px 12px;text-align:left;transition:background .18s,transform .18s}.tense span{display:block;font-size:11px;font-weight:700}.tense small{display:block;font-size:9px;color:var(--muted);margin-top:3px}.tense.current{background:var(--ink);border-color:var(--ink);color:white;box-shadow:0 3px 7px #213c3c1c}.tense.current small{color:#c3d4c6}.tense.pinned{border-color:var(--orange);box-shadow:inset 3px 0 var(--orange)}.tense:hover{transform:translateY(-2px)}.timeline-foot{border-top:1px solid #d5dccf;padding-top:12px;display:flex;justify-content:space-between;font-size:9px;color:var(--muted)}.timeline-foot i{display:inline-block;width:6px;height:6px;background:var(--orange);border-radius:50%;margin-right:5px}.future-extra{display:flex;gap:8px;align-items:center;margin:17px 0 27px;font-size:10px;color:var(--muted);flex-wrap:wrap}.future-extra button{background:none;border:1px solid var(--line);border-radius:20px;padding:6px 10px;font-size:10px}.future-extra button.chosen{background:#dce9dc;color:var(--ink);border-color:#9aaa99}footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;padding:22px 0;font-size:9px;color:var(--muted)}footer span:last-child{letter-spacing:1px}footer b{padding-left:15px;color:var(--orange)}.comparing{grid-template-columns:1fr 1fr}.comparing .card{grid-template-columns:1fr}.comparing .visual{min-height:290px}.comparing .card-body{padding:22px}.comparing .sentence{font-size:23px}.comparing h3{font-size:19px;margin-bottom:13px}dialog{border:0;border-radius:17px;padding:35px;max-width:min(1000px,92vw);color:var(--ink);background:var(--paper)}dialog::backdrop{background:#162f2dd9}.close{position:absolute;right:10px;top:5px;border:0;background:none;font-size:28px}.zoom-scene{width:min(820px,80vw);aspect-ratio:1;position:relative;background-size:200% 200%;background-repeat:no-repeat}.helptext{max-width:600px;line-height:1.7}.helptext h2{font-family:Manrope}.notice{padding:14px;border-radius:8px;background:#fff1da;font-size:12px;line-height:1.6}.unavailable .sentence{font-size:23px}.unavailable .formula{background:#fff1da}@media(min-width:1500px){.visual{min-height:390px}}@media(max-width:1000px){main{padding:28px 24px 0}header{padding:20px 24px}.instruction{display:none}.controls{gap:15px}.forms{display:none}.voice{margin-left:auto}.school{font-size:8px}.card-body{padding:24px}.visual{min-height:330px}.timeline{gap:14px}.timeline-foot{gap:15px}}@media(max-width:700px){header{padding:15px 18px}.school{display:none}header .circle{margin-left:auto}main{padding:26px 16px 0}.intro p{font-size:13px}.controls{flex-wrap:wrap;padding:15px;gap:14px}.verb-label{width:100%}select{width:100%;font-size:18px}.voice{margin-left:0}.voice>span{display:none}.compare{margin-left:auto}.card{grid-template-columns:1fr}.visual{min-height:0;aspect-ratio:1.35}.card-body{padding:24px}.sentence{font-size:25px}.cards.comparing{grid-template-columns:1fr}.comparing .visual{min-height:0;aspect-ratio:1.35}.timebox{padding:18px 13px}.timehead{margin-bottom:22px}.timehead>span{display:none}.timeline{gap:8px;grid-template-columns:1fr 1.15fr 1fr}.zone:nth-child(2){grid-template-columns:1fr}.tense{padding:9px 7px;min-height:57px}.tense span{font-size:10px}.tense small{font-size:8px}.axis{grid-template-columns:1fr 1.15fr 1fr;letter-spacing:.7px;font-size:8px}.timeline-foot{line-height:1.5}.timeline-foot span:last-child{max-width:100px}footer{line-height:1.6;gap:15px}footer span:last-child{display:none}.zoom-scene{width:80vw}dialog{padding:30px 12px 15px}}
.time-stamp{position:absolute;top:58px;left:19px;z-index:1;color:#fff;background:#213c3cd9;border-radius:5px;padding:7px 10px;font-size:9px;letter-spacing:.7px}.pin-select{font-size:9px;color:var(--muted);margin:8px 0 17px}.pin-select select{display:block;font-size:18px;margin-top:5px;max-width:100%;min-width:0;width:100%}.mini-line{margin-top:12px}.mini-line span{position:absolute;left:65%;top:-16px;transform:translateX(-50%);font-size:8px;color:var(--ink)}
.visual{aspect-ratio:1;min-height:0}.comparing .visual{aspect-ratio:1;min-height:0}.card-body{justify-content:center}.card-bottom{margin-top:0}.scene{background-size:200% 200%}@media(min-width:1500px){.visual{min-height:0}}@media(max-width:700px){.visual,.comparing .visual{aspect-ratio:1}}
@media(min-width:1001px){header{padding-top:18px;padding-bottom:18px}main{padding-top:25px}.intro{margin-bottom:22px}h1{font-size:44px}.card{grid-template-columns:360px minmax(0,1fr)}.card-body{padding:24px 30px}.comparing .card{grid-template-columns:1fr}.comparing .visual{width:100%;aspect-ratio:1}.comparing .card-body{padding:22px}.timebox{margin-top:20px}.tense{padding-top:8px;padding-bottom:8px}.timehead{margin-bottom:20px}.timeline{padding-top:20px;padding-bottom:14px}}
.mini-line .anchor{position:absolute;left:45%;top:8px;transform:translateX(-50%);font-size:8px;font-weight:400;color:var(--muted)}.mini-line .anchor:before{content:'';position:absolute;height:10px;width:1px;background:#7e9282;top:-11px;left:50%}.mini{margin-bottom:16px}
.visual,.comparing .visual{aspect-ratio:var(--scene-ratio,1)}
.back-times{display:none}@media(max-width:700px){main{display:flex;flex-direction:column}.intro{order:0}.controls{order:1}.timebox{order:2;margin-top:0;margin-bottom:20px}.cards{order:3}.future-extra{order:4}footer{order:5}.back-times{display:block;font-size:11px;color:var(--orange);margin-bottom:15px;text-decoration:none}}
svg.scene{width:100%;height:100%;background:none}@media(min-width:1001px){.comparing .visual{height:280px;aspect-ratio:auto}.comparing .card-body{padding:20px 24px}.comparing .sentence{font-size:23px}}
.comparing .card-body{justify-content:flex-start}
.speech-settings{border:1px solid var(--line);border-radius:9px;background:#fffef9;margin:-8px 0 20px;padding:12px 17px;font-size:12px}.speech-settings summary{cursor:pointer;color:var(--ink);font-weight:600}.speech-options{display:flex;gap:13px;flex-wrap:wrap;align-items:end;padding-top:18px}.speech-options label{font-size:10px;color:var(--muted);flex:1;min-width:170px}.speech-options label:first-child{flex:3}.speech-options select{display:block;width:100%;min-width:0;font-size:12px;margin-top:8px;padding:8px;border:1px solid var(--line);border-radius:6px}.speech-options button{border:1px solid var(--line);border-radius:6px;background:#eef2e9;padding:10px 13px;font-size:12px}#speech-status{font-size:11px;line-height:1.6}.speech-hint{font-size:10px;color:var(--muted);line-height:1.6}.speech-error{color:#aa3c21}.school-logo{margin-left:auto;display:flex;align-items:center;gap:12px}.school-logo img{width:72px;height:64px;object-fit:contain}.school-logo .school{margin-left:0;max-width:210px;line-height:1.7}@media(max-width:700px){.speech-settings{order:1;margin-top:0}.school-logo{gap:0}.school-logo img{width:54px;height:48px}header .circle{margin-left:0}.school-logo .school{display:none}.speech-options label{width:100%;flex:auto}}

.brand-school-logo{display:block;width:58px;height:58px;object-fit:contain;flex-shrink:0}@media(max-width:700px){.brand-school-logo{width:48px;height:48px}header .circle{margin-left:auto}}