:root{--ink:#1b354b;--muted:#566875;--accent:#3d717a;--line:#dbe2e4;--paper:#fafbf9}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:28px}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Malgun Gothic","Apple SD Gothic Neo",system-ui,sans-serif;line-height:1.75;word-break:keep-all}a{color:inherit;text-decoration:none}a:focus-visible{outline:3px solid #397986;outline-offset:6px}a:hover{color:var(--accent)}.wrap{width:min(1120px,calc(100% - 80px));margin-inline:auto}.header{height:100px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;font-weight:700;font-size:16px}.brand-mark{display:grid;place-items:center;background:var(--ink);color:white;width:34px;height:34px;border-radius:9px;font-family:Georgia,serif;font-size:23px}.brand-sub{font-size:12px;color:var(--muted);font-weight:400}.header nav{display:flex;gap:30px;font-size:13px}.hero{display:grid;grid-template-columns:1.15fr 1fr;column-gap:56px;padding-top:76px}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:700;margin:0 0 26px;color:var(--accent)}.dot{display:inline-block;width:6px;height:6px;background:var(--accent);border-radius:50%;margin-right:8px;vertical-align:2px}.affiliation{font-size:14px;color:var(--muted);margin:0 0 13px}h1{font-size:clamp(44px,4.4vw,62px);line-height:1.3;letter-spacing:-3px;margin:0;font-weight:400}h1 span{font-weight:750}.intro{font-size:15px;line-height:1.95;color:var(--muted);margin:25px 0 30px}.button{display:inline-flex;align-items:center;gap:38px;padding:13px 21px;border:1px solid var(--ink);background:var(--ink);color:white;font-size:13px;border-radius:3px}.button:hover{background:#2d5367;color:#fff}.engineering-art{align-self:center;background:#eaf0ee;border:1px solid #dce5e2;border-radius:5px;overflow:hidden;transform:rotate(-2deg)}.art-heading,.art-caption{display:flex;justify-content:space-between;gap:12px;padding:20px 23px;font-size:9px;letter-spacing:1px;color:#46646d}.art-heading{border-bottom:1px solid #d3dfdc}.art-caption{border-top:1px solid #d3dfdc;letter-spacing:.4px;font-size:10px}.engineering-art svg{display:block;width:100%;height:auto}.hero-bottom{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;margin-top:68px;padding:22px 0;border-bottom:1px solid var(--line);font-size:11px;color:var(--muted)}.hero-bottom a{font-size:9px;letter-spacing:1.3px}.hero-bottom a span{margin-left:18px;font-size:15px}.section{padding-top:76px;padding-bottom:76px}.about,.course{display:grid;grid-template-columns:1fr 1.4fr;gap:80px}h2{font-size:29px;letter-spacing:-1.1px;line-height:1.5;margin:0;font-weight:650}.about .eyebrow,.course .eyebrow{margin-bottom:16px}.about-copy p{font-size:14px;color:var(--muted);margin:0 0 19px;line-height:2}.small-label{font-size:11px;margin-top:28px;color:var(--accent)}.small-label span{margin:0 16px;color:#b2bfc4}.interests{background:#eef2f1;border-block:1px solid #e0e7e5}.section-heading{display:flex;justify-content:space-between;gap:24px;align-items:end;margin-bottom:36px}.section-heading .eyebrow{margin-bottom:14px}.section-heading>p{font-size:12px;color:var(--muted);margin:0 0 5px}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.card{background:var(--paper);border:1px solid #dce4e1;border-radius:4px;padding:24px 22px 28px}.card-top{display:flex;justify-content:space-between;align-items:center;color:var(--accent);margin-bottom:35px}.card-top span:first-child{font-size:11px;font-family:Georgia,serif}.card-top span:last-child{font-size:29px;line-height:1}.card-en{font-size:8px;letter-spacing:.7px;min-height:28px;margin:0;color:var(--muted)}h3{font-size:21px;letter-spacing:-.6px;margin:0 0 15px}.card>p:last-child{font-size:12px;line-height:1.95;color:var(--muted);margin:0}.course-detail{border-left:2px solid #c6d7d6;padding-left:30px}.course-tag{font-size:10px;color:var(--accent);border:1px solid #c9d8d7;padding:4px 9px;display:inline-block;margin-bottom:12px}.course-detail h3{font-size:22px}.course-detail p{font-size:14px;color:var(--muted);max-width:520px;margin:0}.contact{display:flex;justify-content:space-between;align-items:center;gap:32px;background:var(--ink);color:white;padding:43px 42px;border-radius:5px}.contact .eyebrow{color:#b0cdd1;margin-bottom:12px}.contact h2{font-size:24px}.contact p:last-child{font-size:12px;color:#c4d0d9;margin-bottom:0}.contact>a{font-size:18px;border-bottom:1px solid #7e929f;padding:8px 0;white-space:nowrap}.contact>a:hover{color:#c7e3e6}.contact>a span{margin-left:24px}.footer{display:flex;justify-content:space-between;gap:16px;padding-block:32px;color:var(--muted);font-size:10px}.skip-link{position:absolute;left:20px;top:-100px;background:white;padding:12px;z-index:10}.skip-link:focus{top:10px}@media(min-width:1450px){.hero{padding-top:90px}}@media(max-width:1000px){.wrap{width:calc(100% - 48px)}.hero{gap:30px}.cards{grid-template-columns:repeat(2,1fr)}.about,.course{gap:40px}.contact{padding:32px;align-items:flex-start;flex-direction:column}.engineering-art{transform:none}.desktop-break{display:none}}@media(max-width:640px){.wrap{width:calc(100% - 40px)}.header{height:80px}.brand-sub{display:none}.header nav{gap:16px;font-size:11px}.brand{gap:8px;font-size:14px}.brand-mark{width:28px;height:28px;font-size:20px}.hero{padding-top:44px;grid-template-columns:1fr;gap:38px}h1{font-size:46px;letter-spacing:-2px}.eyebrow{font-size:10px;letter-spacing:1.5px}.hero .eyebrow{margin-bottom:22px}.intro{font-size:14px}.engineering-art{width:100%;max-width:420px;justify-self:center}.engineering-art svg{max-height:290px}.hero-bottom{margin-top:0;padding-top:0;gap:20px}.hero-bottom>span{max-width:160px}.hero-bottom a{font-size:8px;letter-spacing:.5px}.hero-bottom a span{margin-left:4px}.section{padding-block:48px}.about,.course{grid-template-columns:1fr;gap:26px}h2{font-size:25px}.about h2 br{display:none}.section-heading{display:block;margin-bottom:25px}.section-heading>p{margin-top:12px}.cards{gap:12px}.card{padding:20px 16px}.card-top{margin-bottom:24px}.card-en{font-size:8px;min-height:35px}h3{font-size:19px}.card>p:last-child{font-size:12px}.course-detail{padding-left:20px}.contact{padding:28px 23px;gap:20px}.contact h2{font-size:22px}.contact>a{font-size:clamp(14px,4vw,18px);white-space:normal;overflow-wrap:anywhere}.contact>a span{margin-left:8px}.footer{flex-wrap:wrap;font-size:9px;padding-block:25px}.footer span:nth-child(2){flex:1;text-align:center}}@media(max-width:360px){.cards{grid-template-columns:1fr}.card-en{min-height:0;margin-bottom:8px}.header nav{gap:10px}.brand{font-size:12px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Lightweight drone illustration; no external assets. */
.engineering-scene{position:relative;align-self:center;min-width:0}
.drone-demo{position:absolute;inset:0;z-index:2;pointer-events:none}
.drone-airspace{position:absolute;inset:64px 20px 62px;overflow:hidden}
.drone-flight{position:absolute;left:0;top:0;width:94px;animation:drone-tour 15s ease-in-out infinite;filter:drop-shadow(0 10px 6px #18364b26)}
.drone-body{display:block;width:100%;height:auto;animation:drone-bank 5s ease-in-out infinite}
.rotor{transform-box:fill-box;transform-origin:center;animation:rotor-spin .16s linear infinite}
/* Auto respects device preferences; Play is an explicit motion choice. */
.drone-mode{position:absolute;opacity:0;width:1px;height:1px;bottom:18px;right:30px;pointer-events:auto}
.drone-controls{position:absolute;right:15px;bottom:15px;display:flex;gap:3px;pointer-events:auto;padding:3px;border:1px solid #bacdcf;border-radius:22px;background:#fafbf9;color:#294b60;font-size:11px}
.drone-controls label{cursor:pointer;border-radius:18px;padding:6px 11px;min-height:32px;display:flex;align-items:center}
#drone-auto:checked~.drone-controls label[for="drone-auto"],#drone-play:checked~.drone-controls label[for="drone-play"],#drone-pause:checked~.drone-controls label[for="drone-pause"]{background:#1b354b;color:white}
#drone-auto:focus-visible~.drone-controls label[for="drone-auto"],#drone-play:focus-visible~.drone-controls label[for="drone-play"],#drone-pause:focus-visible~.drone-controls label[for="drone-pause"]{outline:3px solid #397986;outline-offset:2px}
#drone-pause:checked~.drone-airspace *{animation-play-state:paused}
.engineering-scene .art-caption{padding-bottom:58px}
@keyframes drone-tour{0%,100%{left:0;top:15%}25%{left:calc(100% - 94px);top:0}50%{left:calc(100% - 94px);top:calc(100% - 72px)}75%{left:0;top:55%}}
@keyframes drone-bank{0%,100%{transform:rotate(-5deg) translateY(0)}50%{transform:rotate(6deg) translateY(-7px)}}
@keyframes rotor-spin{to{transform:rotateY(360deg)}}
@media(max-width:640px){.engineering-scene{width:100%;max-width:420px;justify-self:center}.drone-airspace{inset:64px 12px 72px}.drone-flight{width:76px}}
@media(prefers-reduced-motion:reduce){#drone-auto:checked~.drone-airspace *{animation-play-state:paused}}

/* Moving round dashes represent particles along the original SVG streamlines. */
.air-particle-lane{
  fill:none;
  stroke:#317c88;
  stroke-width:3.8;
  stroke-linecap:round;
  stroke-dasharray:.01 24.99;
  stroke-dashoffset:0;
  opacity:.9;
  animation:airflow-travel var(--flow-duration,1.4s) linear infinite;
  animation-delay:var(--flow-delay,0s);
}
@keyframes airflow-travel{to{stroke-dashoffset:-25}}
.engineering-scene:has(#drone-pause:checked) .air-particle-lane{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
  .engineering-scene:has(#drone-auto:checked) .air-particle-lane{animation-play-state:paused}
}

/* Pointer and keyboard flight control; existing CSS flight remains a no-script fallback. */
.interactive-ready .drone-flight{animation:none;pointer-events:none}
.interactive-ready .drone-airspace{pointer-events:auto;cursor:crosshair;touch-action:manipulation;outline-offset:-3px;inset:64px 20px 132px}
.interactive-ready .drone-airspace:focus-visible{outline:2px dashed #397986;border-radius:5px}
.flight-hint{display:none;position:absolute;bottom:59px;left:15px;right:15px;margin:0;font-size:10px;text-align:center;color:#46646d;pointer-events:none}
.interactive-ready .flight-hint{display:block}
.interactive-ready .art-caption{padding-bottom:88px}
.flight-target{display:none;position:absolute;width:19px;height:19px;border:1.5px solid #397986;border-radius:50%;transform:translate(-50%,-50%);background:#d5eeec80;pointer-events:none}
.flight-target::before,.flight-target::after{content:"";position:absolute;background:#397986;left:50%;top:50%;transform:translate(-50%,-50%)}
.flight-target::before{width:7px;height:1px}.flight-target::after{width:1px;height:7px}
.manual-flight .flight-target{display:block}.flight-arrived .flight-target{opacity:.4}
@media(max-width:640px){.interactive-ready .drone-airspace{inset:64px 12px 132px}.flight-hint{font-size:9px}}


/* Page companions stay decorative and never intercept page links or drone controls. */
body{position:relative;padding-bottom:74px}
.ground-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:15}
.ground-layer[hidden],.companions-controls[hidden]{display:none}
.ground-party{position:absolute;left:0;top:0;width:156px;height:116px;will-change:transform;pointer-events:none}
.ground-facing{width:100%;height:100%;transform:scaleX(var(--facing,1));filter:drop-shadow(0 2px 2px #1b354b12)}
.ground-party svg{display:block;width:100%;height:100%;overflow:visible}
.robot-leg,.robot-arm,.dog-leg{transform-box:view-box;animation-play-state:paused;transform-origin:41px 73px}
.robot-leg.leg-back{animation:robot-step .7s ease-in-out infinite paused}.robot-leg.leg-front{animation:robot-step .7s ease-in-out -.35s infinite paused}
.robot-arm{transform-origin:41px 43px}.arm-front{animation:robot-step .7s ease-in-out infinite paused}.arm-back{animation:robot-step .7s ease-in-out -.35s infinite paused}
.dog-leg{transform-origin:120px 94px}.dog-back{animation:dog-step .42s ease-in-out infinite paused}.dog-front{animation:dog-step .42s ease-in-out -.21s infinite paused}
.robot-figure{animation:robot-bob .35s ease-in-out infinite paused}
.dog-figure{animation:dog-bob .42s ease-in-out -.15s infinite paused}
.dog-tail{transform-box:view-box;transform-origin:100px 85px;animation:tail-wag .5s ease-in-out infinite paused}
.ground-party.animated *{animation-play-state:running}
/* At rest, keep a gentle stepping/breathing motion and the dog's tail wag. */
.ground-party.animated:not(.walking) .robot-leg,.ground-party.animated:not(.walking) .robot-arm{animation-name:robot-idle-step;animation-duration:1.4s}
.ground-party.animated:not(.walking) .leg-front,.ground-party.animated:not(.walking) .arm-back{animation-delay:-.7s}
.ground-party.animated:not(.walking) .dog-leg{animation-name:dog-idle-step;animation-duration:1.1s}
.ground-party.animated:not(.walking) .dog-front{animation-delay:-.55s}
.ground-party.animated:not(.walking) .robot-figure{animation-duration:1.4s}
.ground-party.animated:not(.walking) .dog-figure{animation-duration:1.1s}
@keyframes robot-idle-step{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes dog-idle-step{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes robot-step{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}
@keyframes dog-step{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(12deg)}}
@keyframes robot-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes dog-bob{0%,100%{transform:translate(-2px,0)}50%{transform:translate(1px,-2px)}}
@keyframes tail-wag{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(18deg)}}
.ground-target{display:none;position:absolute;width:24px;height:9px;border:1px solid #4b9194;border-radius:50%;transform:translate(-50%,-50%);background:#85c5bd26}
.ground-layer[data-mode="manual"] .ground-target{display:block}
.ground-layer.arrived .ground-target{opacity:0}
.companions-controls{position:fixed;right:18px;bottom:16px;z-index:25;display:flex;align-items:center;gap:6px;padding:7px 9px 7px 14px;border:1px solid #cddcdd;border-radius:15px;background:#fafbf9f5;box-shadow:0 4px 20px #173a4b12;color:#29465c;font-size:11px}
.companions-controls>span{margin-right:5px;font-weight:700}.companions-controls small{display:block;font-size:9px;font-weight:400;color:#526d79}
.companions-controls button{border:0;border-radius:10px;padding:9px 11px;min-height:36px;background:transparent;color:inherit;font:inherit;cursor:pointer}
.companions-controls button[aria-pressed="true"]{background:#29465c;color:#fff}
.companions-controls button:focus-visible{outline:3px solid #397986;outline-offset:2px}
.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:640px){.ground-party{width:117px;height:87px}.companions-controls{right:10px;bottom:10px;gap:3px;padding:6px 8px}.companions-controls button{padding:8px}.companions-controls>span{font-size:10px}}
@media(prefers-reduced-motion:reduce){.ground-party.animated *{animation-play-state:paused}}

/* Four self-contained, illustrative engineering vignettes. */
.interests .card{padding:21px 18px 26px;min-width:0}
.interests .card-top{margin-bottom:18px}
.interest-visual{margin:0 -3px 24px;border:1px solid #dce7e3;border-radius:7px;overflow:hidden;background:#edf3ef;aspect-ratio:280/184}
.interest-visual svg{display:block;width:100%;height:100%}
.visual-grid{fill:none;stroke:#416d78;stroke-width:.6;opacity:.075}
.diagram-label{font-size:11px;font-weight:600;text-anchor:middle;fill:#294b60}
.diagram-small{font-size:8px;letter-spacing:.6px;fill:#577681}
.diagram-block{stroke:#a5bfc1;stroke-width:1}.diagram-block.light{fill:#f5f9f6}.diagram-block.dark{fill:#2a5266;stroke:#2a5266}
.signal-line,.signal-arrow{stroke:#72969d;stroke-width:1.5;fill:none}
.signal-pulse{stroke:#438f99;stroke-width:3;fill:none;stroke-dasharray:3 17;animation:card-signal 1s linear infinite}
@keyframes card-signal{to{stroke-dashoffset:-20}}
.graph-axis{stroke:#a0b8bd;fill:none;stroke-width:1}
.graph-reference{stroke:#b6aa84;stroke-dasharray:3 3;fill:none;stroke-width:1}
.response-base{fill:none;stroke:#7bafac;stroke-opacity:.2;stroke-width:2}
.response-draw{fill:none;stroke:#3c8c8d;stroke-width:2.2;stroke-dasharray:100;animation:card-response 5s ease-in-out infinite}
@keyframes card-response{0%,8%{stroke-dashoffset:100;opacity:1}75%,90%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:.1}}
.mini-flow-lines{fill:none;stroke:#8faeb5;stroke-width:1.1}
.mini-flow-particles path{fill:none;stroke:#3d8593;stroke-width:3.2;stroke-linecap:round;stroke-dasharray:.01 24.99;animation:card-flow 1.7s linear infinite;animation-delay:var(--lane-delay,0s)}
@keyframes card-flow{to{stroke-dashoffset:-25}}
.servo-shoulder{transform-origin:86px 127px;animation:card-shoulder 5s ease-in-out infinite}
.servo-elbow{transform-origin:109px 72px;animation:card-elbow 5s ease-in-out infinite}
.servo-needle{transform-origin:220px 109px;animation:card-needle 5s ease-in-out infinite}
@keyframes card-shoulder{0%,100%{transform:rotate(-10deg)}45%,65%{transform:rotate(9deg)}}
@keyframes card-elbow{0%,100%{transform:rotate(-12deg)}45%,65%{transform:rotate(16deg)}}
@keyframes card-needle{0%,100%{transform:rotate(-50deg)}45%,65%{transform:rotate(20deg)}}
.sensor-signal{fill:none;stroke:#71a5a4;stroke-width:1.5;stroke-dasharray:3 5;animation:card-sensor 1s linear infinite}
@keyframes card-sensor{to{stroke-dashoffset:-16}}
.sensor-led{animation:card-led 2.5s ease-in-out infinite}
@keyframes card-led{0%,100%{opacity:.45}50%{opacity:1}}
.farm-leaf{transform-box:fill-box;transform-origin:center bottom;animation:card-leaf 4s ease-in-out infinite}
.farm-leaf:nth-child(even){animation-delay:-2s}
@keyframes card-leaf{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(4deg)}}
.water-drop{animation:card-water 1.8s linear infinite}
@keyframes card-water{0%{transform:translateY(-2px);opacity:0}15%{opacity:.9}85%{opacity:.7}100%{transform:translateY(27px);opacity:0}}
.interest-heading-tools{text-align:right}
.interest-heading-tools p{margin:0 0 10px;font-size:12px;color:var(--muted)}
.interest-motion-button{font:inherit;font-size:11px;color:#365e6b;background:#fafbf9;border:1px solid #bed0d0;border-radius:20px;padding:7px 13px;min-height:34px;cursor:pointer}
.interest-motion-button:focus-visible{outline:3px solid #397986;outline-offset:3px}
.interests[data-visual-motion="pause"] .interest-visual *{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.interests[data-visual-motion="auto"] .interest-visual *{animation-play-state:paused}}
@media(max-width:640px){.interest-heading-tools{text-align:left;margin-top:15px}.interest-heading-tools p{margin-bottom:8px}}
@media(max-width:560px){.interests .cards{grid-template-columns:1fr}.interests .card{padding:22px}.interest-visual{max-height:225px}.interests .card-en{min-height:0;margin-bottom:8px}.interests .card>p:last-child{font-size:13px}.interests .card-top{margin-bottom:15px}}