@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;700&family=Playfair+Display:wght@700;800;900&display=swap');
:root{--sea:#173c46;--deep:#0d2931;--ink:#2e2920;--paper:#f4ead2;--cream:#fffaf0;--gold:#c78a2c;--red:#a64232;--blue:#2e7886;--line:rgba(46,41,32,.17);--muted:#716858}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{min-height:100vh;margin:0;color:var(--ink);background:var(--cream);font-family:'DM Sans',sans-serif}a{color:inherit}button{font:inherit}
.harbor-bar{width:min(1160px,calc(100% - 40px));height:82px;margin:auto;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.harbor-brand{text-decoration:none;font:900 25px/1 'Playfair Display',serif;letter-spacing:-1px}.harbor-brand span{color:var(--red)}.harbor-brand b{margin-left:5px;padding:4px 8px;color:var(--cream);background:var(--sea);font-size:15px}.harbor-link{padding:11px 15px;border:1px solid var(--line);text-decoration:none;font-size:13px;font-weight:700}
.harbor-hero{position:relative;width:min(1160px,calc(100% - 40px));min-height:570px;margin:auto;padding:120px 0 90px;overflow:hidden}.harbor-hero:after{content:'';position:absolute;right:-100px;bottom:-145px;width:540px;height:360px;border-radius:50% 50% 0 0;background:repeating-radial-gradient(ellipse at bottom,#286273 0 16px,#34798a 17px 30px);opacity:.16}.sun{position:absolute;right:130px;top:110px;width:180px;height:180px;border-radius:50%;background:#edbb5d;box-shadow:0 0 0 34px rgba(237,187,93,.12)}.kicker{margin:0 0 12px;color:var(--red);font-size:12px;font-weight:800;letter-spacing:2.4px;text-transform:uppercase}
.harbor-hero h1{position:relative;margin:0;color:var(--sea);font:900 clamp(58px,8vw,100px)/.9 'Playfair Display',serif;letter-spacing:-4px}.harbor-hero h1 em{color:var(--red);font-style:italic}.harbor-hero>p:not(.kicker){position:relative;max-width:600px;margin:28px 0;color:var(--muted);font-size:17px;line-height:1.7}
.harbor-button,.outline-button{display:inline-flex;min-height:50px;padding:0 21px;align-items:center;justify-content:center;border:0;text-decoration:none;cursor:pointer;font-weight:800}.harbor-button{color:white;background:var(--sea);box-shadow:5px 5px 0 var(--gold)}.harbor-button:hover{filter:brightness(1.12);transform:translateY(-2px)}
.history-note{width:min(1160px,calc(100% - 40px));margin:-35px auto 70px;padding:24px 28px;display:grid;grid-template-columns:220px 1fr;gap:25px;background:var(--paper);border:1px solid var(--line);border-left:5px solid var(--gold);box-shadow:0 14px 40px rgba(46,41,32,.08)}.history-note strong{font:800 22px 'Playfair Display',serif}.history-note p{margin:0;color:var(--muted);line-height:1.65}
.routes{padding:75px max(20px,calc((100% - 1160px)/2)) 100px;background:var(--paper)}.routes-heading h2{margin:0 0 30px;color:var(--sea);font:800 clamp(40px,5vw,60px) 'Playfair Display',serif}.route-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.route-card{position:relative;min-height:245px;padding:27px;border:1px solid var(--line);background:rgba(255,250,240,.8);text-decoration:none;transition:.2s}.route-card:hover{transform:translateY(-5px);border-color:var(--gold);box-shadow:0 18px 35px rgba(46,41,32,.1)}.route-icon{display:grid;width:55px;height:55px;place-items:center;color:white;background:var(--red);font:800 22px 'Playfair Display',serif}.route-count{position:absolute;right:25px;top:28px;color:var(--muted);font-size:12px}.route-card h3{margin:25px 0 7px;color:var(--sea);font:800 29px 'Playfair Display',serif}.route-card p{margin:0;color:var(--muted)}.route-action{display:block;margin-top:23px;color:var(--red);font-weight:800;font-size:13px}
.harbor-footer{width:min(1160px,calc(100% - 40px));margin:auto;padding:27px 0;display:flex;justify-content:space-between;color:var(--muted);font-size:12px;font-weight:700}
.letterdam-game{background:linear-gradient(rgba(255,250,240,.93),rgba(255,250,240,.96)),repeating-linear-gradient(0deg,transparent 0 31px,rgba(46,120,134,.09) 32px)}
.lesson-shell{width:min(900px,calc(100% - 40px));margin:auto;padding:55px 0 90px}.lesson-head{display:flex;align-items:center;gap:18px}.lesson-head h1{margin:0;color:var(--sea);font:800 clamp(35px,5vw,54px) 'Playfair Display',serif}.lesson-progress{margin:28px 0 18px;display:grid;grid-template-columns:130px 1fr 70px;align-items:center;gap:15px;color:var(--muted);font-size:13px;font-weight:700}.lesson-progress>div{height:8px;overflow:hidden;background:#e5dac3}.lesson-progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--gold),var(--red));transition:width .35s}.lesson-progress strong{color:var(--gold);text-align:right;font-size:18px}
.passage,.question-card{padding:30px;background:rgba(255,255,255,.84);border:1px solid var(--line);box-shadow:0 15px 40px rgba(46,41,32,.07)}.passage{margin-bottom:16px;border-top:4px solid var(--gold)}.passage span{color:var(--red);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1.8px}.passage p{margin:13px 0 0;font:600 17px/1.75 'DM Sans',sans-serif}.question-card{min-height:350px;border-top:4px solid var(--sea)}.question-card h2{margin:8px 0 25px;font:800 clamp(27px,4vw,38px)/1.2 'Playfair Display',serif}.question-context{padding:12px 15px;background:var(--paper);border-left:3px solid var(--gold);font-style:italic}.answer-area{display:grid;gap:10px}.choice-button,.word-token{padding:15px 17px;border:1px solid var(--line);background:var(--cream);color:var(--ink);text-align:left;cursor:pointer;font-weight:700}.choice-button:hover,.word-token:hover{border-color:var(--blue);transform:translateY(-1px)}.choice-button.correct{color:#176b4e;background:#e0f5e9;border-color:#4da37f}.choice-button.wrong{color:#8b2e26;background:#f8dfda;border-color:#c86b5e}.order-bank,.order-line{min-height:70px;padding:12px;display:flex;align-items:center;flex-wrap:wrap;gap:8px;border:1px dashed var(--blue);background:var(--cream)}.order-line{margin-bottom:12px;background:white}.word-token{padding:10px 13px}.lesson-actions{margin-top:22px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}.text-button{padding:10px 0;border:0;background:transparent;color:var(--blue);cursor:pointer;font-weight:800}.lesson-feedback{min-height:52px;margin-top:18px;padding:0;line-height:1.55}.lesson-feedback.good,.lesson-feedback.bad,.lesson-feedback.hint{padding:13px 15px}.lesson-feedback.good{background:#e0f5e9;color:#176b4e}.lesson-feedback.bad{background:#f8dfda;color:#8b2e26}.lesson-feedback.hint{background:#f5ecd7;color:#725419}
.finish-screen{position:fixed;inset:0;z-index:10;padding:20px;display:grid;place-items:center;background:rgba(13,41,49,.78);backdrop-filter:blur(7px)}.finish-screen[hidden]{display:none}.finish-screen section{width:min(520px,100%);padding:38px;background:var(--cream);border-top:6px solid var(--gold)}.finish-screen h2{margin:0;color:var(--sea);font:800 46px 'Playfair Display',serif}.finish-buttons{display:flex;gap:12px;margin-top:25px}.outline-button{border:1px solid var(--line)}
@media(max-width:680px){.sun{opacity:.35;right:-40px}.history-note{grid-template-columns:1fr}.route-grid{grid-template-columns:1fr}.lesson-progress{grid-template-columns:100px 1fr 55px}.passage,.question-card{padding:22px}.harbor-footer{flex-direction:column;gap:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.route-card,.lesson-progress i{transition:none}}