:root{--paper:#f4efe6;--card:#fbf8f2;--ink:#2a2622;--ink2:#6b6259;--red:#a23a2c;--line:#ddd3c4}
@media (prefers-color-scheme:dark){:root{--paper:#1c1a17;--card:#25221e;--ink:#eee7dc;--ink2:#b3a999;--red:#d8705f;--line:#3a352e}}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.75 -apple-system,"PingFang TC","Noto Sans TC","Helvetica Neue",sans-serif}
.wrap{max-width:880px;margin:0 auto;padding:0 20px}
nav{padding:18px 0;font-size:.95rem}nav a{margin-right:14px}
header{padding:36px 0 24px;display:flex;gap:20px;align-items:center}
header img{width:84px;height:84px;border-radius:20px;box-shadow:0 4px 16px rgba(0,0,0,.12)}
h1{font:600 2rem/1.25 "Songti TC","Noto Serif TC",serif;margin:0}
.sub{color:var(--ink2);margin:.3em 0 0}
.badge{display:inline-block;margin-top:12px;padding:6px 14px;border:1.5px solid var(--red);color:var(--red);border-radius:6px;font-weight:600;font-size:.95rem}
h2{font:600 1.35rem/1.4 "Songti TC","Noto Serif TC",serif;margin:44px 0 12px;padding-left:12px;border-left:3px solid var(--red)}
.muted{color:var(--ink2)}
.shots{display:grid;grid-template-columns:repeat(2,minmax(0,280px));gap:14px;margin:24px 0}
.shots img{width:100%;border-radius:14px;border:1px solid var(--line)}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:18px 22px;margin:14px 0}
.apps{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:24px 0}
.app{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px;text-decoration:none;color:var(--ink)}
.app img{width:60px;height:60px;border-radius:14px;flex:none}
.app strong{display:block;font-size:1.1rem}.app span{color:var(--ink2);font-size:.95rem}
footer{margin:64px 0 40px;padding-top:20px;border-top:1px solid var(--line);font-size:.92rem;color:var(--ink2)}
a{color:var(--red)}
@media (max-width:600px){header{flex-direction:column;align-items:flex-start}.apps{grid-template-columns:1fr}h1{font-size:1.7rem}}
h3{font-size:1.08rem;margin:24px 0 6px}
h4{font-size:1rem;margin:16px 0 4px;color:var(--ink2)}
dl dt{font-weight:600;margin-top:14px}
dl dd{margin:4px 0 0}
ol li,ul li{margin:5px 0}
.lang{margin-top:64px;padding-top:8px;border-top:1px solid var(--line)}
.links{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.links h3{margin-top:0}
@media (max-width:600px){.links{grid-template-columns:1fr}}

/* Portfolio index: the homepage is an index of work, not a product card grid. */
.hub{--hub-paper:#f1f3ef;--hub-ink:#1d2928;--hub-muted:#52615d;--hub-line:#aebbb5;--hub-accent:#265b50;background:var(--hub-paper);color:var(--hub-ink);min-height:100dvh;font:16px/1.6 -apple-system,"PingFang TC","Noto Sans TC",sans-serif}
.hub *{box-sizing:border-box}
.hub a{color:inherit}
.hub a:focus-visible{outline:3px solid var(--hub-accent);outline-offset:4px}
.hub-shell{max-width:1500px;margin:auto;padding:0 clamp(20px,5vw,80px)}
.hub-skip{position:absolute;left:-10000px;top:0;z-index:10;background:#fff;padding:12px}
.hub-skip:focus{left:12px}
.hub-nav{min-height:68px;border-bottom:1px solid var(--hub-line);display:flex;justify-content:space-between;align-items:center;gap:24px}
.hub .hub-nav{padding:0;flex-direction:row}
.hub-brand{font-weight:700;letter-spacing:.07em;text-decoration:none;white-space:nowrap;font-size:.95rem}
.hub-brand span{color:var(--hub-accent)}
.hub-nav nav{display:flex;gap:clamp(16px,2.5vw,42px);font-size:.86rem}
.hub-nav nav a{text-decoration:none;white-space:nowrap}
.hub-nav nav a:hover,.hub-intro-side a:hover,.hub-section-head a:hover{text-decoration:underline;text-underline-offset:4px}
.hub-intro{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(250px,.65fr);column-gap:clamp(40px,7vw,120px);align-items:end;padding:clamp(70px,9vw,126px) 0 clamp(80px,9vw,130px)}
.hub-overline{font-size:.7rem;letter-spacing:.14em;font-weight:700;color:var(--hub-accent);margin:0 0 30px}
.hub h1{font:600 clamp(2.8rem,5.7vw,6.5rem)/1.2 "PingFang TC","Noto Sans TC",sans-serif;letter-spacing:-.075em;margin:0;max-width:13em;text-wrap:balance}
.hub-intro-side{padding-bottom:8px}
.hub-intro-side p{font-size:1rem;line-height:1.9;max-width:23em;margin:0 0 30px;color:var(--hub-muted)}
.hub-intro-side a{display:inline-flex;gap:35px;border-bottom:1px solid var(--hub-ink);padding-bottom:8px;text-decoration:none;font-size:.85rem;font-weight:600}
.hub-work,.hub-notes{padding:30px 0 100px}
.hub-section-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin:0 0 24px}
.hub-section-head h2{font:600 clamp(1.45rem,2vw,2rem)/1.3 "PingFang TC","Noto Sans TC",sans-serif;letter-spacing:-.04em;margin:0;padding:0;border:0}
.hub-section-head p,.hub-section-head a{font-size:.82rem;color:var(--hub-muted);margin:0;text-decoration:none}
.hub-work-list{border-top:1px solid var(--hub-ink)}
.hub-work-item{display:grid;grid-template-columns:40px 78px minmax(160px,1.1fr) minmax(220px,.9fr) 28px;align-items:center;gap:clamp(16px,2vw,32px);min-height:162px;padding:20px clamp(8px,2vw,26px);border-bottom:1px solid var(--hub-line);text-decoration:none;transition:background .2s ease,padding .2s ease}
.hub-work-item:hover{background:#e3ebe5;padding-left:clamp(15px,2.5vw,34px)}
.hub-work-item:active{background:#d5e0d8}
.hub-work-no,.hub-work-category{font-size:.69rem;letter-spacing:.13em;font-weight:700;color:var(--hub-accent)}
.hub-work-item img{width:68px;height:68px;object-fit:cover;border-radius:15px;background:#dce4de}
.hub-work-name{display:flex;flex-direction:column;gap:5px}
.hub-work-name strong{font:600 clamp(1.55rem,2.2vw,2.5rem)/1.25 "PingFang TC","Noto Sans TC",sans-serif;letter-spacing:-.05em}
.hub-work-desc{color:var(--hub-muted);font-size:.88rem;line-height:1.7}
.hub-work-arrow{font-size:1.5rem;justify-self:end;font-weight:300}
.hub-method{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,120px);background:var(--hub-ink);color:#ecf0ea;margin:0 calc(-1 * clamp(20px,5vw,80px));padding:clamp(60px,8vw,120px) clamp(20px,5vw,80px)}
.hub-method h2{font:600 clamp(2.4rem,4vw,4.7rem)/1.25 "PingFang TC","Noto Sans TC",sans-serif;letter-spacing:-.06em;margin:0;border:0;padding:0}
.hub-method div{align-self:end;max-width:31em;color:#d2dfd6;font-size:1.04rem;line-height:1.9}
.hub-method p{margin:0 0 1em}
.hub-notes{padding-top:100px}
.hub-note-list{border-top:1px solid var(--hub-ink)}
.hub-note-list a{display:grid;grid-template-columns:170px 1fr 24px;gap:30px;align-items:center;min-height:76px;border-bottom:1px solid var(--hub-line);text-decoration:none;font-size:1.08rem}
.hub-note-list a:hover{color:var(--hub-accent)}
.hub-note-list span{font-size:.76rem;font-weight:600;color:var(--hub-muted)}
.hub-note-list b{font-weight:400;justify-self:end}
.hub-lab{display:grid;grid-template-columns:1fr auto;align-items:end;gap:30px;border-top:1px solid var(--hub-ink);border-bottom:1px solid var(--hub-ink);padding:48px 0;margin:10px 0 100px}
.hub-lab p:first-child{font-size:.76rem;font-weight:600;color:var(--hub-accent);margin:0 0 18px}
.hub-lab h2{font:600 clamp(2.1rem,4vw,4.2rem)/1.2 "PingFang TC","Noto Sans TC",sans-serif;letter-spacing:-.06em;margin:0;border:0;padding:0}
.hub-lab p:last-child{font-size:.9rem;color:var(--hub-muted);max-width:36em;margin:14px 0 0}
.hub-lab>a{font-weight:600;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:8px;white-space:nowrap;font-size:.85rem}
.hub-english{max-width:700px;padding:0 0 100px}
.hub-english h2{font:600 1.25rem/1.35 -apple-system,sans-serif;margin:0 0 15px;border:0;padding:0}
.hub-english p{color:var(--hub-muted);font-size:.9rem;line-height:1.8}
.hub-footer{display:grid;grid-template-columns:2fr 1fr 1.5fr;gap:35px;border-top:1px solid var(--hub-ink);padding:32px 0 80px;font-size:.76rem;color:var(--hub-muted)}
.hub-footer p{margin:0 0 12px}
.hub-footer p:first-child{font-weight:700;color:var(--hub-ink)}
.hub-footer-links,.hub-footer-legal{display:flex;flex-direction:column;gap:8px}
.hub-footer a{text-decoration:none;color:var(--hub-muted)}
.hub-footer a:hover{text-decoration:underline}
.hub-footer-legal span{font-weight:700;color:var(--hub-ink)}
@media(max-width:900px){.hub-intro{grid-template-columns:1fr;gap:35px}.hub-intro-side{max-width:35em}.hub-work-item{grid-template-columns:35px 68px 1fr 24px}.hub-work-desc{grid-column:3;grid-row:2}.hub-work-arrow{grid-column:4;grid-row:1/3}.hub-work-item{row-gap:0}.hub-method{gap:40px}.hub-footer{grid-template-columns:1fr 1fr}.hub-footer div:first-child{grid-column:1/-1}}
@media(max-width:600px){.hub-nav{min-height:62px}.hub-nav nav{gap:15px;font-size:.73rem}.hub-nav nav a:nth-child(2){display:none}.hub-brand{font-size:.82rem}.hub-intro{padding:48px 0 52px;gap:26px}.hub-overline{font-size:.59rem;margin-bottom:20px}.hub h1{font-size:clamp(2.55rem,9.4vw,4rem);line-height:1.26}.hub-intro-side p{font-size:.94rem;margin-bottom:20px}.hub-work,.hub-notes{padding-bottom:72px}.hub-section-head{align-items:start;flex-direction:column;gap:7px}.hub-work-item{grid-template-columns:25px 52px 1fr 17px;gap:12px;min-height:124px;padding:16px 2px}.hub-work-item img{width:50px;height:50px;border-radius:11px}.hub-work-name strong{font-size:1.25rem}.hub-work-category,.hub-work-no{font-size:.58rem}.hub-work-desc{font-size:.75rem}.hub-work-arrow{font-size:1.1rem}.hub-method{grid-template-columns:1fr;gap:30px;padding-top:60px;padding-bottom:60px}.hub-method h2{font-size:2.5rem}.hub-method div{font-size:.95rem}.hub-notes{padding-top:70px}.hub-note-list a{grid-template-columns:1fr 18px;gap:3px 10px;padding:14px 0;min-height:75px;font-size:.9rem}.hub-note-list span{grid-column:1/-1}.hub-note-list b{grid-column:2;grid-row:2}.hub-lab{grid-template-columns:1fr;gap:20px;margin-bottom:70px}.hub-lab h2{font-size:2.5rem}.hub-lab>a{justify-self:start}.hub-english{padding-bottom:70px}.hub-footer{gap:28px}}
@media(prefers-reduced-motion:reduce){.hub-work-item{transition:none}}