htmlvis\n<!DOCTYPE html>\n<html>\n<head>\n<style>\n body { font-family: var(--font); color: var(--fg); background: transparent; display: flex; flex-direction: column; align-items: center; padding: 20px; }\n .container { background: var(--bg-card); padding: 24px; border-radius: var(--radius); border: 1px solid var(--border); width: 100%; max-width: 500px; }\n .timeline-ui { display: flex; justify-content: space-between; position: relative; margin: 40px 0; padding: 0 20px; }\n .timeline-line { position: absolute; top: 50%; left: 0; right: 0; height: 2px; background: var(--border); z-index: 1; }\n .point { width: 16px; height: 16px; border-radius: 50%; background: var(--bg-muted); border: 3px solid var(--border); z-index: 2; cursor: pointer; transition: all 0.3s; }\n .point.active { background: var(--primary); border-color: var(--primary); transform: scale(1.3); box-shadow: 0 0 15px var(--primary); }\n .label { text-align: center; margin-top: 10px; font-weight: bold; font-size: 0.8rem; }\n .desc-box { background: var(--bg-muted); padding: 15px; border-radius: var(--radius); min-height: 80px; font-size: 0.95rem; line-height: 1.4; border-left: 4px solid var(--primary); }\n .mode-title { color: var(--primary); margin-bottom: 5px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; }\n</style>\n</head>\n<body>\n<div class='container'>\n <div class='mode-title' id='modeTitle'>Select a Zone</div>\n <div class='desc-box' id='desc'>Click a point on the timeline to see how native speakers 'view' time logic.</div>\n <div class='timeline-ui'>\n <div class='timeline-line'></div>\n <div style='display:flex; flex-direction:column; align-items:center;'>\n <div class='point' onclick='update(0)'></div>\n <div class='label'>The Archive</div>\n </div>\n <div style='display:flex; flex-direction:column; align-items:center;'>\n <div class='point' onclick='update(1)'></div>\n <div class='label'>The Bridge</div>\n </div>\n <div style='display:flex; flex-direction:column; align-items:center;'>\n <div class='point' onclick='update(2)'></div>\n <div class='label'>The Anchor</div>\n </div>\n </div>\n</div>\n<script>\n const data = [\n { title: 'The Archive', text: 'Events are isolated and \"dead\". Use this for storytelling or reporting facts that ended. Logic: \"It happened, and it stays there.\"' },\n { title: 'The Bridge', text: 'Past actions with Present relevance. You are looking at the *consequence* of the action, not the action itself. Logic: \"This is why things are like this now.\"' },\n { title: 'The Anchor', text: 'The absolute present reality. Your current state, habitual truths, or things in progress. Logic: \"This is the world as I see it now.\"' }\n ];\n function update(idx) {\n document.querySelectorAll('.point').forEach((p, i) => p.classList.toggle('active', i === idx));\n document.getElementById('modeTitle').textContent = data[idx].title;\n document.getElementById('desc').textContent = data[idx].text;\n }\n</script>\n</body>\n</html>\n\n\n### 4. The Projected Path (): Future Intent\n\nIn English, the future isn't a tense; it's a mood. We don't have a dedicated future verb ending like Romance languages (e.g., Spanish hablaré). Instead, we use different 'construction blocks' to show how certain we are or where our intention comes from.\n\n| Mental State | Construction Logic | Example |\n| :--- | :--- | :--- |\n| The Solid Plan | The Moving Anchor () used for future | "I'm meeting her at 5." (It's already in the diary) |\n| The Intent | Going to | "I'm going to start that project." (The decision is made) |\n| The Prediction | Will | "I think it will rain." (A spontaneous thought or guess) |\n\nhtmlvis\n<!DOCTYPE html>\n<html>\n<head>\n<style>\n body { font-family: var(--font); color: var(--fg); background: transparent; padding: 20px; }\n .card { background: var(--bg-card); border: 1px solid var(--border); padding: 20px; border-radius: var(--radius); }\n .slider-container { margin: 30px 0; }\n input[type=range] { width: 100%; accent-color: var(--primary); }\n .vibe-meter { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--fg-muted); margin-bottom: 10px; }\n .output { padding: 15px; background: var(--bg-muted); border-radius: var(--radius); border-top: 2px solid var(--primary); font-weight: 500; text-align: center; font-size: 1.1rem; }\n .logic-hint { margin-top: 10px; font-size: 0.85rem; color: var(--fg-muted); font-style: italic; }\n</style>\n</head>\n<body>\n<div class='card'>\n <h3>The Certainty Slider</h3>\n <p>How much control do you have over this future event?</p>\n <div class='slider-container'>\n <div class='vibe-meter'><span>Just a Guess</span><span>Deep Intention</span><span>Solid Calendar Plan</span></div>\n <input type='range' id='cert' min='0' max='2' step='1' value='1'>\n </div>\n <div class='output' id='phrase'>\"I am going to fly to Tokyo.\"</div>\n <div class='logic-hint' id='hint'>Logic: You have a plan/intention, but maybe not the tickets yet.</div>\n</div>\n<script>\n const maps = [\n { p: '\"I think I will fly to Tokyo.\"', h: 'Logic: Spontaneous prediction or a weak possibility.' },\n { p: '\"I am going to fly to Tokyo.\"', h: 'Logic: A pre-formed intention or strong evidence.' },\n { p: '\"I am flying to Tokyo tomorrow.\"', h: 'Logic: It is a fixed arrangement. The tickets are bought.' }\n ];\n document.getElementById('cert').addEventListener('input', (e) => {\n const val = e.target.value;\n document.getElementById('phrase').textContent = maps[val].p;\n document.getElementById('hint').textContent = maps[val].h;\n });\n</script>\n</body>\n</html>\n\n\n[OPEN_ENDED_QUESTION]\n\n## Real-World Application\n\n### The Performance Review\n\nImagine you are in a meeting with your boss. You need to use the Timeline Map to justify a raise. Look at how the logic shifts:\n\n1. The Archive (Closed Box): "Last year, I closed three major accounts." (Establishing facts/history).\n2. The Bridge (Connection): "Because of that, I have developed a new workflow that saves us 10 hours a week." (Connecting your past effort to the current benefit).\n3. The Anchor (Now): "I am currently leading the expansion team." (Showing your current value).\n4. The Projected Path (Future): "Next quarter, I am going to double our output." (Showing commitment and intent).\n\nBy moving through these zones, you create a complete narrative of value rather than just listing tasks. You aren't 'using tenses'; you are building a case.\n\n## Key Takeaways\n\n* The Anchor is the baseline of reality; use it for what is true right now.\n* The Archive is for storytelling; once you add a 'time stamp' (e.g., "last week"), the box is closed.\n* The Bridge is for results; if you care about the now but want to mention the before, use the bridge.\n* Future is about the source of the idea; spontaneous thoughts get 'will', plans get 'going to', and arrangements get 'the moving anchor'.\n* Stop asking "Which tense is correct?" and start asking "Which zone do I want the listener to look at?"*