@font-face{font-family:Huninn;src:url("../../assets/fonts/Huninn-Regular.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
/* Kanade — a quiet room after midnight. */
:root{color-scheme:dark;--paper:#10121f;--white:#191c2e;--ink:#edf0fc;--muted:#b7bed4;--purple:#b5b1f2;--lilac:#292a44;--mint:#253442;--line:#363b54;--coral:#b5c9ec}
body{background:radial-gradient(ellipse at 90% 20%,#29234544,transparent 45%),#10121f;letter-spacing:.045em}
::selection{background:#665890;color:white}.site-header{background:#10121fe8;border-color:#adb0e51c}.brand-mark{background:#27263f;color:#d1cdfa;border-color:#8980bc}.brand small{color:#a6acc7}.nav a:last-child{border-color:#64617e}
.hero{position:relative;isolation:isolate;padding-top:0;background:#15172a;min-height:740px;overflow:hidden}
.hero:before{content:"";position:absolute;inset:0;z-index:-2;background-position:center;background-size:cover;background-repeat:no-repeat;}
.hero:before{background-image:url('../../assets/images/kanade-midnight.png');background-position:center 42%;opacity:.92}
.hero:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#10121ff5 0%,#10121fe3 24%,#10121f8c 49%,#10121f10 80%),linear-gradient(0deg,#10121f 0%,transparent 28%,#10121f22 100%)}
.hero-layout{grid-template-columns:1.1fr .9fr;min-height:675px;padding-top:76px;padding-bottom:78px;gap:20px}.hero-copy{max-width:620px}.eyebrow{color:#c8c4f6;font-size:10px;letter-spacing:.24em}.tiny-star{color:#d5d5fb}.hero h1{font-weight:500;font-size:clamp(38px,4.3vw,66px);line-height:1.55;letter-spacing:.08em;text-shadow:0 3px 32px #080a19}.hero h1 span:after{height:2px;background:linear-gradient(90deg,#a49bdb,#a49bdb00);bottom:-8px;transform:none}.hero-intro{color:#c1c6da;text-shadow:0 1px 8px #10121f}.hero-intro strong{color:#f2f0ff}.hero-actions{margin-top:34px}.primary{color:#17182b;background:#c2bdf3;border-color:#c2bdf3;box-shadow:0 6px 28px #9181da30}.primary:hover{background:#d5d0ff}.ghost{background:#16192a66;border-color:#7b7f9c66;color:#e5e6f6}.hero-stats{margin-top:46px}.hero-stats strong{color:#dddafc}.hero-stats span{color:#a5acc7}.hero-art{align-self:end;margin-bottom:12px;background:#121624a8;border:1px solid #c9c6ef44;box-shadow:none;transform:none;backdrop-filter:blur(14px);padding:17px 21px;border-radius:3px;max-width:350px;justify-self:end}.hero-art:before,.hero-art img,.art-sticker{display:none}.hero-art figcaption{padding:0;color:#d6d5ed;font-size:9px;display:block;line-height:2.1;letter-spacing:.12em}.hero-art figcaption span{display:block}.chapter-ticker{position:relative;background:#151827b3;border-color:#71748d33;color:#adb4d1;gap:35px;font-size:10px}.chapter-ticker i{color:#7d77a8}
.section{padding:100px 0}.section-kicker{color:#a7a2d8}.about-copy{color:#b5bdd3}.education-strip .about-note{background:#202237}.education-strip span{color:#b5b1e7}.section-dark{background:linear-gradient(135deg,#1d2133,#171b2d);border-color:#363b54}.skill-group{background:#1c2033;border-color:#454763;border-radius:3px 20px 3px 3px}.skill-index{color:#817ca8}.skill-tags span,.platform-row span{color:#bfc6df;border-color:#454964}.project-filter button{border-color:#424761;color:#c4cae0}.project-filter button:hover{background:#2c2d47}.project-filter button.active{color:#151729;background:#b9b3ec}.featured-project,.video-project,.project-card{background:#1a1e30;border-color:#3b405b}.project-card:hover{box-shadow:0 12px 36px #05081260;border-color:#8881b4}.featured-media{background:linear-gradient(135deg,#2e2b4b,#202c41)}.system-cover-content>p,.featured-badge{color:#c0b8e1}.system-cover-content h3{color:#eeebff}.featured-badge{border-color:#8d83b1}.system-cover-tags span{background:#4c456377;color:#e0d7f7}.system-orbit{border-color:#655b87}.system-node{background:#514766;border-color:#9c8bc0}.node-two{background:#77708c}.video-project-media{background:#202b38}.project-cover{filter:brightness(.8) saturate(.65)}.project-meta{color:#bfbaed}.text-link,.detail-button{color:#c7c0f3}.platform-row span{color:#b7c4e1}.workflow-banner{background:#24263c;border-color:#4a4967}.contact-section{background:#191c2d}.contact-card{background:#202439;border-color:#444963;color:#e5e8f5}.contact-card:hover{background:#292d46}.contact-card span{color:#b6bcd5}.copy-line{background:#393b58;color:#e0dcff;border-color:#686481}.site-footer,footer{background:#10121f;color:#adb5ce}.menu-button{background:#26283e;border-color:#56516f}dialog{background:#1c2033;color:#edf0fc;border-color:#53536f}dialog::backdrop{background:#070a16cc;backdrop-filter:blur(7px)}#detail-content p,#detail-content li{color:#c0c7dc}.dialog-close{background:#30334d;color:white}
@media(min-width:1600px){.hero:before{background-position:center 38%}.hero-layout{min-height:760px}}
@media(max-width:760px){.nav{background:#171a2c;border-color:#44435e}.hero{min-height:0}.hero:before{background-position:65% top;background-size:auto 640px;opacity:.85}.hero:after{background:linear-gradient(0deg,#10121f 2%,#10121ff0 29%,#10121fbb 56%,#10121f33 100%)}.hero-layout{display:flex;flex-direction:column;align-items:stretch;padding-top:250px;padding-bottom:34px;gap:24px}.hero-copy{position:relative}.hero h1{font-size:clamp(30px,7.5vw,44px);margin-top:17px}.hero-intro{font-size:13px}.hero-art{align-self:flex-end;margin:0;max-width:290px;padding:10px 15px}.hero-art figcaption{font-size:8px}.hero-stats{margin-top:30px}.hero-actions{gap:8px}.button{padding-inline:18px}.section{padding:64px 0}.chapter-ticker{gap:23px}.hero h1 span{white-space:normal}}


.new-project-image{height:210px;overflow:hidden;background:#24283c}.new-project-image img{width:100%;height:100%;object-fit:cover;transition:transform .4s}.new-project:hover .new-project-image img{transform:scale(1.035)}.project-status{border-left:2px solid #9d94cb;padding-left:12px;color:#c4bde5!important;font-size:11px!important}.new-project .text-link{margin-top:20px}.new-project[data-project="lantern"] .new-project-image img{object-position:center 35%}.new-project[data-project="stickers"] .new-project-image img{object-position:center 30%}

/* Soft rounded Traditional Chinese typography. */
body,button,input,h1,h2,h3,.brand,.brand-mark,.hero-stats strong,.chapter-ticker,.skill-index,.about-note p{font-family:"Huninn","Microsoft JhengHei",system-ui,sans-serif}
body{letter-spacing:.035em;line-height:1.95}h1,h2,h3{font-weight:400}.hero h1{font-weight:400;letter-spacing:.055em}.brand strong{font-weight:400;letter-spacing:.13em}.nav a,.button,.project-filter button{letter-spacing:.075em}.button,.nav a:last-child{border-radius:16px}.skill-group h3,.featured-content h3,.video-project-content h3{font-weight:400}.project-body h3{font-weight:400;line-height:1.7}.hero-art figcaption{font-family:"Huninn",sans-serif}
