:root{--paper:#f3f2ee;--sheet:#fbfaf7;--ink:#111;--ink-2:#5c5b57;--hair:#cfcdc6;--red:#e1263a;--red-ink:#c21a2e;--focus:#1f5fd6;--grid-show:#e1263a12;--font-text:"Inter","Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;--font-display:"Inter Tight","Inter","Noto Sans TC","PingFang TC",system-ui,sans-serif;--font-cjk:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;--s--2:.75rem;--s--1:.875rem;--s-0:1.0625rem;--s-1:1.25rem;--s-2:clamp(1.75rem,1.2rem + 2.2vw,3rem);--s-3:clamp(2.75rem,1.6rem + 4.6vw,5.5rem);--pad:clamp(16px,3.4vw,40px);--gap:clamp(12px,1.8vw,24px)}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--paper:#121211;--sheet:#1a1a19;--ink:#f1f0eb;--ink-2:#a3a29c;--hair:#33332f;--red:#ff4f63;--red-ink:#ff6b7c;--focus:#7fa8ff;--grid-show:#ff4f6314;--buncss-light: ;--buncss-dark:initial;color-scheme:dark}}:root[data-theme=dark]{--paper:#121211;--sheet:#1a1a19;--ink:#f1f0eb;--ink-2:#a3a29c;--hair:#33332f;--red:#ff4f63;--red-ink:#ff6b7c;--focus:#7fa8ff;--grid-show:#ff4f6314;--buncss-light: ;--buncss-dark:initial;color-scheme:dark}*,*:before,*:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:var(--paper);color:var(--ink);font-family:var(--font-text);font-size:var(--s-0);-webkit-font-smoothing:antialiased;margin:0;line-height:1.8}a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}a:hover{color:var(--red-ink)}:focus-visible{outline:2px solid var(--focus);outline-offset:3px}button{font:inherit}.latin{font-style:italic}.wrap{padding-inline:var(--pad);position:relative;width:100%;max-width:1360px;margin-inline-start:auto;margin-inline-end:auto}.g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}.gridlines{position:fixed;pointer-events:none;z-index:50;display:none;inset:0}.gridlines .wrap,.gridlines .g{height:100%}.gridlines i{background:var(--grid-show);border-inline:1px solid color-mix(in srgb,var(--red)30%,transparent)}.show-grid .gridlines{display:block}.mast{position:relative;background:var(--paper);border-bottom:2px solid var(--ink);font:500 var(--s--2)/1.45 var(--font-text);letter-spacing:.02em;padding-block-start:.85rem;padding-block-end:.7rem}.mast .g{align-items: end;row-gap:.35rem}.mast span{grid-column:span 3;min-width:0}.mast b{font-weight:800;font-family:var(--font-display);letter-spacing:-.01em}.mast .tools{display:flex;justify-content:flex-end;gap:.5rem}.chip{appearance:none;-webkit-appearance:none;border:1px solid var(--ink);color:var(--ink);font:600 .6875rem/1 var(--font-text);letter-spacing:.06em;cursor:pointer;text-transform:uppercase;background:0 0;border-radius:0;padding:.42rem .55rem}.chip[aria-pressed=true]{background:var(--ink);color:var(--paper)}@media (max-width:760px){.mast span{grid-column:span 6}}.hero{position:relative;min-height:100vh;display:flex;isolation:isolate;overflow:hidden;flex-direction:column;min-height:100svh}#sky{position:absolute;display:block;z-index:-1;pointer-events:none;width:100%;height:100%;inset:0}.stage{display:flex;flex-direction:column;flex:1;padding-top:clamp(1.25rem,3vw,2.25rem)}.intro{align-items: start;row-gap:1.4rem}.intro-l,.cap{text-shadow:0 0 1px var(--paper),0 0 4px var(--paper),0 0 10px var(--paper),0 0 18px var(--paper)}.intro-l{grid-column:1/span 6;display:flex;flex-direction:column;gap:.9rem;min-width:0}h1{font:900 var(--s-2)/1.08 var(--font-display);letter-spacing:-.015em;margin:0}.meta{display:flex;font:500 var(--s--2)/1.5 var(--font-text);color:var(--ink-2);flex-wrap:wrap;gap:.2rem 1.1rem;margin:0}.meta b{font:800 var(--s--1)/1 var(--font-display);color:var(--ink);font-variant-numeric:tabular-nums;margin-right:.15em}.hint-touch{display:none}@media (hover:none){.hint-mouse{display:none}.hint-touch{display:inline}}.cap{grid-column:8/span 5;display:flex;border-top:1px solid var(--ink);flex-direction:column;gap:.55rem;min-width:0;padding-top:.75rem}.seg{display:inline-flex;flex-wrap:wrap}.seg button{appearance:none;-webkit-appearance:none;font:600 .8125rem/1 var(--font-text);color:var(--ink);background:var(--paper);border:1px solid var(--ink);cursor:pointer;border-radius:0;margin:0 0 0 -1px;padding:.55rem .7rem}.seg button:first-child{margin-left:0}.seg button i{font-family:var(--font-display);font-weight:700}.seg button:hover{background:color-mix(in srgb,var(--ink)8%,var(--paper))}.seg button[aria-pressed=true]{background:var(--ink);color:var(--paper)}.cap-word{font:800 var(--s-1)/1.2 var(--font-display);letter-spacing:-.01em;margin:.35rem 0 0}.cap-word b{color:var(--red-ink);font-weight:900}.cap-word span{color:var(--ink-2);margin-inline-start:.12em;margin-inline-end:.12em;font-weight:500}.cap-text{font-size:var(--s--1);max-width:30em;min-height:3.4em;margin:0;line-height:1.7}.frame{position:relative;flex:1;min-height:clamp(220px,36svh,680px);margin-block-start:clamp(1.25rem,3vw,2.25rem);margin-block-end:clamp(1rem,2vw,1.5rem)}.frame canvas{position:absolute;display:block;z-index:-2;clip-path:inset(0 100% 0 0);width:100%;height:100%;inset:0}.no-gl .meta{display:none}.projects{row-gap:var(--gap);padding-bottom:clamp(16px,2.4vw,32px)}.card{grid-column:span 6;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"no url" "title title" "latin latin" "desc desc";background:var(--sheet);border-top:2px solid var(--ink);color:var(--ink);text-decoration:none;align-content: start;column-gap:1rem;min-width:0;padding:.8rem .95rem 1.05rem;transition:background-color .18s linear,color .18s linear}.card-no{grid-area:no;font:800 var(--s--2)/1.6 var(--font-display);letter-spacing:.04em;color:var(--red-ink)}.card-url{grid-area:url;display:flex;font:500 var(--s--2)/1.6 var(--font-text);color:var(--ink-2);overflow-wrap:anywhere;text-align:right;justify-self:end;align-items:baseline;gap:.6rem;min-width:0}.arr{font:800 var(--s-1)/1 var(--font-display);color:var(--ink);transition:transform .25s cubic-bezier(.2,.7,.3,1)}.card-title{grid-area:title;font:900 var(--s-2)/1.08 var(--font-display);letter-spacing:-.01em;margin-top:.55rem}.card-latin{grid-area:latin;font:italic 700 var(--s-0)/1.4 var(--font-display);margin-top:.2rem}.card-desc{grid-area:desc;font-size:var(--s--1);color:var(--ink-2);max-width:38em;margin-top:.6rem;line-height:1.65}.card:hover{background:var(--ink);color:var(--paper)}.card:focus-visible{background:var(--ink);color:var(--paper)}.card:hover .card-no{color:var(--red)}.card:focus-visible .card-no{color:var(--red)}.card:hover :-webkit-any(.card-url,.card-desc){color:color-mix(in srgb,var(--paper)72%,var(--ink))}.card:hover :-moz-any(.card-url,.card-desc){color:color-mix(in srgb,var(--paper)72%,var(--ink))}.card:hover :is(.card-url,.card-desc){color:color-mix(in srgb,var(--paper)72%,var(--ink))}.card:focus-visible :-webkit-any(.card-url,.card-desc){color:color-mix(in srgb,var(--paper)72%,var(--ink))}.card:focus-visible :-moz-any(.card-url,.card-desc){color:color-mix(in srgb,var(--paper)72%,var(--ink))}.card:focus-visible :is(.card-url,.card-desc){color:color-mix(in srgb,var(--paper)72%,var(--ink))}.card:hover .arr{color:var(--paper);transform:translate(.3rem)}.card:focus-visible .arr{color:var(--paper);transform:translate(.3rem)}.card:focus-visible{outline-offset:2px}@media (max-width:900px){.intro-l,.cap{grid-column:1/-1}.cap-text{min-height:5.1em}.card{grid-column:1/-1}}@media (max-width:560px){.card-desc{display:none}.card{grid-template-areas:"no url" "title title" "latin latin"}.frame{min-height:clamp(200px,34svh,420px)}}main{position:relative;background:var(--paper)}.sec{border-top:2px solid var(--ink);row-gap:clamp(1.75rem,3vw,2.5rem);padding-block-start:clamp(2.5rem,5vw,4.5rem);padding-block-end:clamp(2.5rem,5vw,4.5rem)}.sec-head{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items: start;row-gap:.8rem}.sec-no{grid-column:1/span 2;font:800 var(--s-3)/.82 var(--font-display);color:var(--red);margin:0}.sec-title{grid-column:3/span 7;display:flex;flex-direction:column;gap:.5rem}.sec-title h2{font:900 var(--s-2)/1.12 var(--font-display);letter-spacing:-.01em;text-wrap:balance;margin:0}.sec-title p{font-size:var(--s-1);max-width:34em;margin:0;line-height:1.7}.sec-tag{grid-column:10/span 3;font:600 var(--s--2)/1.5 var(--font-text);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);text-align:right;margin:0}@media (max-width:900px){.sec-no,.sec-title{grid-column:1/-1}.sec-tag{grid-column:1/-1;text-align:left;order:-1}}.spec{grid-column:1/-1;display:grid;grid-template-columns:subgrid;border-top:1px solid var(--ink);row-gap:1rem;padding-top:1rem}.spec-head{grid-column:3/span 3;min-width:0}.spec-head p{margin:0}.spec-no{font:800 var(--s--2)/1.6 var(--font-display);letter-spacing:.04em;color:var(--red-ink)}.spec h3{font:900 var(--s-1)/1.3 var(--font-display);margin:.15rem 0 0}.spec-head .sub{font:500 var(--s--1)/1.5 var(--font-text);color:var(--ink-2)}.spec-head .latin{font:italic 600 var(--s--1)/1.5 var(--font-display);color:var(--ink-2)}.roots{grid-column:6/span 7;display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));column-gap:var(--gap);border-bottom:1px solid var(--hair);row-gap:1rem;margin:0;padding-bottom:.9rem}.roots dt{font:italic 700 clamp(1.6rem,1rem + 1.9vw,2.5rem)/1.05 var(--font-display);letter-spacing:-.02em;white-space:nowrap}.roots dt.cjk{font:900 clamp(1.6rem,1rem + 1.9vw,2.5rem)/1.05 var(--font-cjk);letter-spacing:0}.roots dt .plus{color:var(--ink-2);margin-left:.12em;font-style:normal;font-weight:400}.roots dd{font-size:var(--s--1);margin:.4rem 0 0;line-height:1.55}.roots dd b{display:block;font-size:var(--s-1);color:var(--red-ink);font-weight:900}.roots dd span{color:var(--ink-2)}.spec-sum{grid-column:6/span 7;margin:0 0 1rem;line-height:1.75}.spec-sum b{margin-right:.3em;font-weight:900}.spec-sum a{white-space:nowrap;margin-left:.6em;font-weight:700}@media (max-width:900px){.spec-head,.roots,.spec-sum{grid-column:1/-1}}footer.site{border-top:2px solid var(--ink);font-size:var(--s--1);color:var(--ink-2);padding-block-start:2rem;padding-block-end:3.5rem;line-height:1.7}footer.site .g{row-gap:1.2rem}.colophon{grid-column:1/span 2;font:900 var(--s-0)/1.4 var(--font-display);color:var(--ink);margin:0}.foot-links{grid-column:10/span 3;list-style:none;color:var(--ink);margin:0;padding:0;font-weight:600}@media (max-width:900px){.colophon,.foot-links{grid-column:1/-1}}@media (prefers-reduced-motion:reduce){.card,.arr{transition:none}.hint-mouse{display:none}}