:root { --ink:#10213d; --muted:#647089; --blue:#1762ee; --blue-deep:#0f46b0; --sky:#dbeeff; --cream:#fff8eb; --orange:#ffb447; --line:#dce3ee; --paper:#ffffff; --display:'Outfit','Noto Sans SC',sans-serif; --body:'Noto Sans SC',Arial,sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--body); -webkit-font-smoothing:antialiased; } button,input { font:inherit; } button { cursor:pointer; } a { color:inherit; text-decoration:none; } .skip-link { position:fixed; left:16px; top:-80px; z-index:30; background:#fff; padding:10px 14px; border-radius:8px; box-shadow:0 4px 15px #0002; } .skip-link:focus { top:16px; }
.site-header { height:78px; max-width:1280px; margin:auto; padding:0 44px; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:5; } .brand { display:flex; align-items:center; gap:10px; color:#0d4ba9; font-family:var(--display); font-size:20px; font-weight:800; letter-spacing:-.7px; } .brand > span > span { color:var(--ink); } .brand-mark { width:34px; height:34px; object-fit:contain; display:block; filter:drop-shadow(0 7px 10px #0d4ba91a); } .main-nav { display:flex; gap:35px; margin-left:100px; } .main-nav a { font-size:14px; color:#42516a; transition:color .2s; } .main-nav a:hover { color:var(--blue); } .header-action { border:0; color:white; background:var(--ink); padding:11px 17px; border-radius:999px; font-size:13px; font-weight:600; transition:transform .2s, background .2s; } .header-action:hover { background:var(--blue); transform:translateY(-2px); } .menu-toggle { display:none; background:transparent; border:0; width:42px; height:42px; } .menu-toggle span { display:block; width:22px; height:2px; background:var(--ink); margin:5px auto; }
.hero { min-height:calc(100vh - 78px); max-height:860px; overflow:hidden; position:relative; padding:112px max(44px, calc((100vw - 1192px)/2)) 98px; background:linear-gradient(180deg,#f7fbff 0%,#eaf5ff 100%); } .hero::after { content:''; position:absolute; inset:auto 0 0; height:130px; background:linear-gradient(transparent,#fff); pointer-events:none; } .hero-content { position:relative; z-index:2; max-width:650px; } .hero-year,.section-index { color:var(--blue); font-family:var(--display); font-size:12px; letter-spacing:1.65px; font-weight:700; margin:0 0 18px; } .hero h1 { font:900 clamp(64px,7.2vw,108px)/.93 var(--display); letter-spacing:-4.6px; margin:0; white-space:nowrap; word-break:keep-all; overflow-wrap:normal; } .hero-copy { margin:25px 0 34px; max-width:400px; font-size:18px; line-height:1.8; color:#42516a; } .hero-actions { display:flex; align-items:center; gap:21px; } .button { border:0; display:inline-flex; align-items:center; justify-content:center; gap:11px; border-radius:999px; padding:15px 23px; font-weight:700; font-size:14px; transition:transform .2s,box-shadow .2s,background .2s; } .button:hover { transform:translateY(-3px); box-shadow:0 10px 20px #10213d22; } .button svg,.text-button svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .button-primary { color:#fff; background:var(--blue); } .button-primary:hover { background:var(--blue-deep); } .button-quiet { color:var(--ink); background:transparent; padding-left:0; } .button-quiet:hover { box-shadow:none; color:var(--blue); }
.campus-visual { position:absolute; width:min(53vw,720px); height:580px; right:max(0px,calc((100vw - 1370px)/2)); bottom:20px; z-index:1; } .sun { position:absolute; right:95px; top:40px; height:105px; width:105px; border-radius:50%; background:#ffd773; box-shadow:0 0 0 21px #ffd77321; } .cloud { position:absolute; width:105px; height:27px; border-radius:40px; background:#fff; opacity:.77; } .cloud::before,.cloud::after { content:''; position:absolute; bottom:0; background:inherit; border-radius:50%; } .cloud::before { width:45px;height:45px;left:17px; } .cloud::after { width:35px;height:35px;right:16px; } .cloud-one { top:105px; left:155px; transform:scale(.62); } .cloud-two { top:185px; right:85px; transform:scale(.48); } .hill { position:absolute; border-radius:50% 50% 0 0; bottom:70px; } .hill-back { left:0; width:780px;height:215px;background:#a3d9c2; transform:rotate(-2deg); } .hill-front { right:-100px;width:720px;height:165px;background:#67bd9c; } .ground { position:absolute; bottom:0; width:100%; height:92px; background:#329576; border-radius:50% 50% 0 0/60% 60% 0 0; } .building { position:absolute; bottom:79px; background:#f9f7ed; border:5px solid #1d5484; border-bottom:0; box-shadow:inset -19px 0 #d1e6d3; } .building-main { width:260px;height:270px; right:203px; border-radius:8px 8px 0 0; display:grid;grid-template-columns:repeat(3,1fr);gap:15px;padding:36px 38px 0; } .building-main::before { content:'';position:absolute;top:-44px;left:20px;width:211px;height:42px;background:#f9f7ed;border:5px solid #1d5484;border-bottom:0;border-radius:130px 130px 0 0; } .building-side { width:130px;height:194px;right:77px;border-radius:8px 8px 0 0;display:grid;grid-template-columns:repeat(2,1fr);gap:16px;padding:30px 25px 0; } .building i { width:100%;height:22px;background:#5195cb;border:3px solid #1d5484; } .building b { position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:46px;height:76px;background:#d5a96c;border:4px solid #1d5484;border-bottom:0;border-radius:30px 30px 0 0; } .tree { position:absolute; bottom:80px; width:72px;height:125px;background:#8dc986;clip-path:polygon(50% 0,100% 58%,76% 58%,100% 100%,0 100%,24% 58%,0 58%); } .tree i { position:absolute;bottom:-40px;left:32px;width:12px;height:65px;background:#805735; } .tree-one { right:13px;transform:scale(.82); }.tree-two { left:130px;transform:scale(.9); }.tree-three { right:359px;transform:scale(.56);bottom:82px; } .welcome-card { position:absolute; right:20px;top:267px; transform:rotate(6deg); width:135px;padding:15px 14px;background:#fff;box-shadow:0 15px 25px #17365522;z-index:2; } .welcome-card span { font-family:var(--display);font-size:10px;font-weight:800;letter-spacing:1.4px;color:#ea6d3e; }.welcome-card strong { display:block;font-family:var(--display);font-size:21px;line-height:1;letter-spacing:-1px;margin-top:7px; }.hero-doodle { position:absolute;z-index:2;color:#ffa631;font-size:34px; }.hero-doodle-left { left:6%; top:23%; }.hero-doodle-right { right:47%;bottom:27%;font-size:25px;color:#266eea; }.scroll-cue { position:absolute;z-index:3;bottom:35px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:9px;align-items:center;color:#647089;font-size:11px;letter-spacing:.8px; }.scroll-cue span { display:block;width:1px;height:29px;background:#8ea0b8;position:relative; }.scroll-cue span::after { content:'';position:absolute;width:6px;height:6px;border-right:1px solid #8ea0b8;border-bottom:1px solid #8ea0b8;bottom:0;left:-3px;transform:rotate(45deg); }
.section { max-width:1192px; margin:0 auto; padding:137px 0; } .arrival { display:grid;grid-template-columns:1fr 1.08fr;gap:120px;align-items:center; }.section-intro h2,.guide h2,.community h2 { margin:0;font:800 clamp(38px,4.5vw,62px)/1.1 var(--display);letter-spacing:-2.7px; }.section-intro > p:last-child,.guide-heading > p,.community-copy > p:last-of-type { margin:27px 0 0;max-width:380px;color:var(--muted);font-size:15px;line-height:1.9; }.arrival-panel { background:var(--cream);padding:34px 39px;border-radius:3px;position:relative;overflow:hidden; }.arrival-panel::after { content:'✦';position:absolute;right:21px;bottom:9px;font-size:120px;color:#ffcc7b37; }.arrival-header { display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1;border-bottom:1px solid #e8d9bc;padding-bottom:23px; }.arrival-header p { margin:0 0 5px;color:#8a6b35;font-size:13px; }.arrival-header strong { font:700 21px var(--display);letter-spacing:-.6px; }.progress-ring { width:48px;height:48px; }.progress-ring svg { width:100%;height:100%;transform:rotate(-90deg); }.progress-ring path { fill:none;stroke-width:3.5; }.ring-track { stroke:#eadcbe; }.ring-value { stroke:var(--blue);stroke-linecap:round;transition:stroke-dasharray .3s; }.checklist { position:relative;z-index:1;margin:6px 0 10px; }.checklist label { display:flex;align-items:center;gap:14px;padding:15px 0;border-bottom:1px solid #eadfc8;cursor:pointer; }.checklist input { position:absolute;opacity:0; }.checkbox { width:20px;height:20px;border:1.7px solid #c6b894;border-radius:50%;display:grid;place-items:center;flex:0 0 20px;transition:.2s; }.checkbox::after { content:'';width:7px;height:4px;border-left:1.8px solid white;border-bottom:1.8px solid white;transform:rotate(-45deg) translate(1px,-1px);opacity:0; }.checklist input:checked + .checkbox { background:var(--blue);border-color:var(--blue); }.checklist input:checked + .checkbox::after { opacity:1; }.checklist strong { font-size:14px;display:block; }.checklist small { display:block;font-size:11px;color:#7a756d;margin-top:2px; }.text-button { position:relative;z-index:1;border:0;background:transparent;padding:11px 0 0;color:#174fbc;font-weight:700;font-size:13px;display:flex;align-items:center;gap:8px; }.text-button:hover { color:var(--blue-deep); }.text-button svg { width:16px; }
.guide { padding-top:65px; }.guide-heading { display:flex;justify-content:space-between;align-items:end;margin-bottom:49px; }.guide h2 em { color:var(--blue);font-style:normal; }.guide-heading > p { margin:0; }.guide-grid { display:grid;grid-template-columns:1.08fr 1fr 1fr;gap:18px; }.guide-card { min-height:374px;padding:28px;position:relative;overflow:hidden; }.guide-card-blue { background:#dceeff; }.guide-card-orange { background:#ffbd59; }.guide-card-cream { background:#f3f5f0; }.card-icon { width:37px;height:37px;display:grid;place-items:center;background:#ffffffa6;border-radius:50%; }.card-icon svg { width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round; }.guide-card > p { font-size:12px;font-weight:700;color:#446384;margin:34px 0 8px; }.guide-card-orange > p { color:#82531c; }.guide-card-cream > p { color:#69736e; }.guide-card h3 { position:relative;z-index:2;margin:0;font:800 25px/1.2 var(--display);letter-spacing:-1px; }.guide-card button { position:absolute;z-index:3;bottom:26px;left:28px;border:0;background:transparent;padding:0;font-weight:700;font-size:13px;color:var(--ink); }.guide-card button span { font-size:17px;margin-left:5px; }.card-shape { position:absolute;pointer-events:none; }.map-shape { right:-7px;bottom:-8px;width:194px;height:137px;transform:rotate(-6deg);background:linear-gradient(70deg,transparent 20%,#73a9d4 21% 28%,transparent 29% 46%,#73a9d4 47% 53%,transparent 54% 69%,#73a9d4 70% 77%,transparent 78%);opacity:.75; }.map-shape i { position:absolute;width:15px;height:15px;background:#1762ee;border-radius:50%; }.map-shape i:nth-child(1){left:25px;top:28px}.map-shape i:nth-child(2){right:52px;top:42px}.map-shape i:nth-child(3){right:15px;bottom:24px}.note-shape { width:152px;height:194px;right:4px;bottom:-38px;background:#fff7dc;transform:rotate(8deg);border:2px solid #c4832e;box-shadow:9px -7px #fff1c8; }.note-shape b { width:25px;height:25px;border-radius:50%;background:#ffb447;border:2px solid #c4832e;position:absolute;top:-14px;left:60px; }.note-shape i { display:block;margin:42px 20px 0;height:5px;background:#dfaa55; }.note-shape i + i { margin-top:14px;width:81px; }.note-shape i + i + i { width:97px; }.bookmark-shape { right:10px;bottom:-35px;color:#d2d8c9;font:800 200px/1 var(--display);transform:rotate(12deg); }.community { display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center;padding-bottom:133px; }.button-dark { margin-top:31px;background:var(--ink);color:#fff; }.community-scene { height:390px;position:relative;background:#eef7f2;overflow:hidden; }.post { position:absolute;width:174px;min-height:125px;padding:17px 15px 13px;background:#fff;box-shadow:0 10px 25px #1d533916;z-index:2; }.post p { font-weight:700;font-size:14px;line-height:1.4;margin:0 0 9px 35px; }.post small { font-size:10px;color:#7d8c86;margin-left:35px; }.avatar { position:absolute;left:15px;top:18px;display:grid;place-items:center;width:25px;height:25px;border-radius:50%;font-size:10px;font-weight:700; }.avatar-blue { background:#b9dbff;color:#15548c; }.avatar-orange { background:#ffe0a0;color:#9a631b; }.avatar-green { background:#b8e5d1;color:#27734f; }.post-one { left:70px;top:38px;transform:rotate(-5deg); }.post-two { right:44px;top:123px;transform:rotate(6deg); }.post-three { left:122px;bottom:39px;transform:rotate(3deg); }.orbit { position:absolute;border:1px solid #9cd0b8;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-28deg); }.orbit-one { width:370px;height:170px; }.orbit-two { width:250px;height:290px; }.center-spark { position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:40px;color:#37a677; }.assistant-banner { max-width:1280px;margin:0 auto 70px;background:var(--blue);color:white;display:grid;grid-template-columns:185px 1fr auto;align-items:center;gap:33px;padding:35px 61px 35px 43px;overflow:hidden;position:relative; }.assistant-banner::after { content:'✦';position:absolute;right:300px;top:-39px;color:#ffffff15;font:900 180px var(--display); }.assistant-banner p { position:relative;z-index:1;font-size:12px;font-weight:700;letter-spacing:1px;margin:0 0 5px;opacity:.76; }.assistant-banner h2 { position:relative;z-index:1;font:800 33px var(--display);letter-spacing:-1.3px;margin:0; }.assistant-orb { position:relative;z-index:1;width:107px;height:107px;border-radius:49% 51% 45% 55%/55% 45% 55% 45%;background:linear-gradient(135deg,#a7ddff,#b7b8ff);display:grid;place-items:center;transform:rotate(12deg);box-shadow:12px 11px #114bc4; }.assistant-orb span { color:var(--blue-deep);font:800 31px var(--display);transform:rotate(-12deg); }.button-white { position:relative;z-index:1;background:#fff;color:var(--blue);white-space:nowrap; }
footer { max-width:1192px;margin:auto;padding:33px 0 39px;border-top:1px solid var(--line);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:35px; }.footer-brand { font-size:17px; }.footer-brand .brand-mark { width:27px;height:27px; }.footer-brand > span > span { color:var(--ink); } footer p { color:#79869b;font-size:11px;line-height:1.6;max-width:430px; } footer > span { color:#9ca6b5;font:700 10px var(--display);letter-spacing:1.2px; }
footer{grid-template-columns:auto minmax(180px,1fr) auto auto;gap:24px}.tech-support{white-space:nowrap;color:#71839a;font-size:11px;line-height:1.6}.tech-support strong{color:#315c8e;font-weight:800}html[data-theme="dark"] .tech-support{color:#acc0d6}html[data-theme="dark"] .tech-support strong{color:#a8d7ff}@media(max-width:900px){footer{grid-template-columns:1fr;gap:8px}.tech-support{white-space:normal}}@media(max-width:620px){.tech-support{font-size:10px}}
.assistant-modal { position:fixed;inset:0;z-index:20;display:grid;place-items:center;visibility:hidden;opacity:0;transition:opacity .2s,visibility .2s; }.assistant-modal.is-open { visibility:visible;opacity:1; }.modal-backdrop { position:absolute;inset:0;background:#061a37a8;backdrop-filter:blur(4px); }.modal-card { position:relative;width:min(92vw,500px);background:#fff;padding:28px;border-radius:16px;box-shadow:0 30px 90px #0004;transform:translateY(18px) scale(.98);transition:transform .25s; }.is-open .modal-card { transform:translateY(0) scale(1); }.modal-close { position:absolute;right:16px;top:13px;background:none;border:0;color:#758298;font-size:29px;line-height:1; }.modal-top { display:flex;align-items:center;gap:13px;padding-bottom:20px;border-bottom:1px solid var(--line); }.mini-orb { width:43px;height:43px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#a7ddff,#b7b8ff);color:var(--blue-deep);font:800 15px var(--display); }.modal-top p { margin:0;color:var(--blue);font-size:11px;font-weight:700; }.modal-top h2 { margin:2px 0 0;font:800 21px var(--display);letter-spacing:-.6px; }.chat-feed { height:208px;overflow:auto;padding:19px 0;display:flex;flex-direction:column;gap:12px;min-width:0; }.chat-bubble { display:block;max-width:85%;min-width:0;width:fit-content;padding:12px 14px;border-radius:4px 14px 14px 14px;font-size:13px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word; }.assistant-message { background:#edf5ff;color:#244568;align-self:flex-start; }.user-message { background:var(--blue);color:#fff;border-radius:14px 4px 14px 14px;align-self:flex-end; }.source-note { align-self:flex-start;display:block;width:fit-content;max-width:85%;min-width:0;margin-top:-7px;color:#6e7f95;font-size:10px;line-height:1.4;text-decoration:none;white-space:normal;overflow-wrap:anywhere;word-break:break-word; }.source-note[href] { color:#2162bd;text-decoration:underline;text-underline-offset:2px; }.suggestion-row { display:flex;gap:8px;overflow:auto;padding-bottom:13px; }.suggestion-row button { flex:0 0 auto;border:1px solid #cddcf0;color:#2053a2;background:#fff;border-radius:999px;padding:7px 10px;font-size:11px; }.chat-form { display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:12px;padding:5px 6px 5px 13px; }.chat-form input { min-width:0;flex:1;border:0;outline:0;color:var(--ink);font-size:13px; }.chat-form button { width:34px;height:34px;border:0;border-radius:9px;background:var(--blue);color:#fff;display:grid;place-items:center; }.chat-form svg { width:17px;height:17px;fill:currentColor;stroke:none; }.toast { position:fixed;z-index:50;left:50%;bottom:25px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#10213d;color:#fff;padding:12px 17px;border-radius:999px;font-size:13px;box-shadow:0 10px 25px #10213d32;transition:.25s;white-space:nowrap;max-width:90vw;overflow:hidden;text-overflow:ellipsis; }.toast.show { opacity:1;transform:translate(-50%,0); }.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; }
@media (max-width:900px) { .site-header { padding:0 25px; }.main-nav { margin-left:auto;gap:19px; }.hero { padding-left:40px; padding-top:90px; }.campus-visual { opacity:.66;right:-220px; }.arrival,.community { grid-template-columns:1fr;gap:48px; }.section { padding:95px 40px; }.guide-heading { align-items:start;gap:35px; }.guide-grid { grid-template-columns:1fr 1fr; }.guide-card-blue { grid-column:span 2; }.assistant-banner { margin:0 40px 50px;grid-template-columns:110px 1fr;padding:28px; }.assistant-banner .button { grid-column:2;justify-self:start; }.assistant-orb { width:76px;height:76px;box-shadow:8px 8px #114bc4; }.assistant-banner h2 { font-size:27px; } footer { margin:0 40px;grid-template-columns:1fr;gap:10px; } }
@media (max-width:620px) { .site-header { height:67px;padding:0 19px; }.main-nav,.header-action { display:none; }.menu-toggle { display:block; }.site-header.nav-open .main-nav { display:flex;position:absolute;left:0;top:67px;margin:0;width:100%;padding:18px 25px;background:#fff;box-shadow:0 10px 20px #10213d12;flex-direction:column;gap:16px; }.hero { min-height:720px;max-height:none;padding:72px 25px 56px; }.hero h1 { font-size:clamp(49px,15vw,67px);letter-spacing:-3px; }.hero-copy { font-size:15px;max-width:290px; }.hero-actions { flex-direction:column;align-items:flex-start;gap:9px; }.campus-visual { width:540px;height:433px;right:-247px;bottom:10px;transform:scale(.83);transform-origin:bottom right; }.hero-doodle-left { left:85%;top:13%; }.hero-doodle-right { right:56%;bottom:42%; }.scroll-cue { display:none; }.section { padding:77px 25px; }.section-intro h2,.guide h2,.community h2 { font-size:41px;letter-spacing:-1.9px; }.arrival { gap:37px; }.arrival-panel { padding:25px 21px; }.guide { padding-top:25px; }.guide-heading { display:block;margin-bottom:27px; }.guide-heading > p { margin-top:20px; }.guide-grid { grid-template-columns:1fr;gap:12px; }.guide-card,.guide-card-blue { grid-column:span 1;min-height:292px; }.guide-card h3 { font-size:23px; }.community { gap:36px;padding-bottom:77px; }.community-scene { height:320px; }.post-one { left:19px; }.post-two { right:16px; }.post-three { left:70px; }.assistant-banner { margin:0 0 38px;grid-template-columns:83px 1fr;gap:17px;padding:23px 20px; }.assistant-banner h2 { font-size:23px; }.assistant-banner .button { font-size:12px;padding:11px 16px; }.assistant-orb { width:61px;height:61px; }.assistant-orb span { font-size:22px; } footer { margin:0 25px;padding:25px 0; }.footer-brand { margin-bottom:4px; } footer > span { display:none; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important;transition:none !important; } }
/* Standalone academic links use the existing guide-card action position. */
.guide-card > a { position:absolute;z-index:3;bottom:26px;left:28px;padding:0;font-weight:700;font-size:13px;color:var(--ink); }
.guide-card > a span { font-size:17px;margin-left:5px; }
.academic-advancement-link{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;margin-top:16px;padding:12px 14px;border:1px solid #d9e5ee;background:#f7fbff;color:var(--ink)}
.academic-advancement-link span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#dceeff;color:var(--blue);font-size:12px;font-weight:900}
.academic-advancement-link strong{font-size:12px}.academic-advancement-link small{display:block;margin-top:2px;color:#718393;font-size:10px}.academic-advancement-link b{color:var(--blue);font-size:14px}