@font-face{font-family:"IBM Plex Sans TC";src:url("./assets/IBMPlexSansTC-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Sans TC";src:url("./assets/IBMPlexSansTC-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"IBM Plex Sans TC";src:url("./assets/IBMPlexSansTC-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
:root{--ink:#11110f;--paper:#f4f4f1;--surface:#fbfbf8;--muted:#6e6e68;--line:#d4d4cd;--orange:#e64a2e;color-scheme:light;font-family:"IBM Plex Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;font-synthesis:none}
:root[data-theme="dark"]{--ink:#f1f1ee;--paper:#0a0a0a;--surface:#141412;--muted:#a3a39b;--line:#2c2c28;color-scheme:dark}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--ink:#f1f1ee;--paper:#0a0a0a;--surface:#141412;--muted:#a3a39b;--line:#2c2c28;color-scheme:dark}}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);line-height:1.6}
button,a{font:inherit;touch-action:manipulation}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible{outline:3px solid var(--orange);outline-offset:5px}
.page{width:100%;max-width:672px;margin:0 auto;padding:40px 16px 48px}
.toolbar{display:flex;justify-content:flex-end;margin-bottom:28px}



.card-stage{container-type:inline-size;perspective:1400px}
.business-card{display:block;width:100%;aspect-ratio:1.75;border:0;padding:0;background:transparent;cursor:pointer;text-align:left;border-radius:3cqw;color:#11110f;-webkit-tap-highlight-color:transparent}
.card-turn{display:block;position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .65s cubic-bezier(.2,.65,.25,1)}
.business-card[data-flipped="true"] .card-turn{transform:rotateY(180deg)}
/* The physical card stays white in both page themes. Container units preserve its proportions. */
.face{display:block;position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#fff;color:#11110f;color-scheme:light;border:1px solid #e5e5e0;border-radius:3cqw;box-shadow:0 1.8cqw 5cqw #0000000f;padding:5.2cqw;line-height:1.6}
.front{isolation:isolate}
.front-header{display:flex;align-items:flex-start;justify-content:space-between;position:relative;z-index:1}
.identity{display:flex;flex-direction:column;gap:.6cqw}
.identity img{display:block;width:27cqw;height:auto}

.coordinates{font-size:1.1cqw;letter-spacing:.09em;color:#666660;padding-top:.6cqw;text-align:right}
.coordinates::after{content:"";display:block;width:9cqw;height:.4cqw;background:var(--orange);margin:2cqw 0 0 auto}
.name{display:block;width:fit-content;font-size:10.5cqw;font-weight:700;line-height:1.12;letter-spacing:-.04em;margin-top:3.4cqw}
.name::after{content:"";display:block;width:9cqw;height:.65cqw;margin-top:1.4cqw;background:var(--orange)}
.subtitle{display:block;font-size:3.05cqw;font-weight:700;margin-top:2cqw;letter-spacing:-.025em}
.description{display:block;position:relative;z-index:1;font-size:2.08cqw;line-height:1.9;margin-top:2.2cqw;color:#454540}
.quote{display:block;position:absolute;left:5.2cqw;right:5.2cqw;bottom:4.2cqw;border-top:1px solid #e6e6e0;padding-top:1.7cqw;font-size:1.7cqw;color:#666660}
.planet{position:absolute;z-index:-1;width:43cqw;height:43cqw;right:-5cqw;top:13cqw;opacity:.055;filter:grayscale(1);pointer-events:none}
.back{transform:rotateY(180deg);display:flex;flex-direction:column;justify-content:space-between}
.back-content{display:grid;grid-template-columns:25cqw 1fr;gap:5cqw;align-items:center;flex:1}
.line-connect{display:flex;flex-direction:column;align-items:center;gap:1cqw}
.line-connect>strong{font-size:2.9cqw}
.line-connect img{width:24cqw;height:24cqw;display:block}
.line-connect>span{font-size:1.4cqw;letter-spacing:.13em;color:#666660}
.contact-details{display:grid;gap:.45cqw;border-left:1px solid #e6e6e0;padding-left:4cqw;min-width:0}
.contact-link{display:block}
.contact-details strong{display:block;font-size:1.6cqw;letter-spacing:.12em;color:var(--orange);line-height:1.4}
.contact-value{display:block;font-size:1.75cqw;letter-spacing:-.02em;white-space:nowrap}
.back-footer{display:block;border-top:1px solid #e6e6e0;padding-top:1.8cqw;margin-top:3cqw;font-size:1.6cqw;letter-spacing:.13em;color:#666660}
#flip-hint{text-align:center;color:var(--muted);font-size:12px;letter-spacing:.08em;margin:22px 0 26px}
.actions{display:flex;justify-content:center;gap:12px}
.actions a{display:flex;align-items:center;justify-content:center;gap:18px;min-height:48px;padding:12px 20px;background:var(--surface);border:1px solid var(--line);font-size:14px;font-weight:500;border-radius:6px}
.actions .line-action{background:var(--orange);color:#11110f;border-color:var(--orange)}
.actions a:hover{outline:1px solid var(--orange)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:absolute;left:16px;top:-100px;padding:12px;background:var(--surface);z-index:10}
.skip-link:focus{top:8px}
.no-script{font-size:13px;color:var(--muted);text-align:center}
@media(min-width:700px){.page{padding-top:72px}.toolbar{margin-bottom:32px}}
@media(prefers-reduced-motion:reduce){.card-turn{transition:none}}

/* Native links sit outside a button so keyboard and assistive activation work. */
[data-card-link]{position:relative;border-radius:4px;outline-offset:2px}
.contact-link{padding:.35cqw .6cqw}
[data-card-link].is-armed{background:#fff0e8;box-shadow:inset 0 0 0 2px var(--orange)}
.link-hint{display:none}
.is-armed .link-hint{display:block;position:absolute;right:.6cqw;top:0;font-size:1.55cqw;color:#9b2d18;letter-spacing:0;white-space:nowrap}
.line-connect.is-armed .link-hint{top:auto;bottom:-2.2cqw;left:0;right:0;text-align:center}
#flip-hint{display:block;border:0;background:transparent;padding:6px 12px;margin:22px auto 20px;cursor:pointer}
@media(max-width:520px){
 .page{padding:20px 16px 32px}.toolbar{margin-bottom:20px}
 .business-card{aspect-ratio:auto;height:720px;border-radius:14px}
 .face{padding:24px 20px;border-radius:14px}
 .front-header{display:block}.identity img{width:200px;max-width:100%}
 .coordinates{font-size:14px;text-align:left;padding-top:24px;letter-spacing:0}
 .coordinates::after{width:40px;height:2px;margin:12px 0 0}
 .name{font-size:72px;margin-top:52px}.name::after{width:40px;height:3px;margin-top:14px}
 .subtitle{font-size:23px;margin-top:24px;line-height:1.5}
 .description{font-size:17px;line-height:1.9;margin-top:24px}
 .quote{left:20px;right:20px;bottom:28px;padding-top:18px;font-size:14px;line-height:1.8}
 .planet{width:250px;height:250px;top:210px;right:-70px}
 .back-content{display:flex;flex-direction:column;gap:22px;align-items:stretch;flex:0}
 .line-connect{display:grid;grid-template-columns:112px minmax(0,1fr);grid-template-rows:auto auto;gap:8px 16px;min-height:112px;align-content:center;padding:4px}
 .line-connect img{grid-column:1;grid-row:1/3;width:112px;height:112px}
 .line-connect>strong{grid-column:2;grid-row:1;align-self:end;font-size:18px}
 .line-connect>span:not(.link-hint){grid-column:2;grid-row:2;align-self:start;font-size:14px;letter-spacing:0;line-height:1.5}
 .line-connect.is-armed .link-hint{bottom:-18px;font-size:14px}
 .contact-details{border-left:0;border-top:1px solid #e6e6e0;padding:12px 0 0;gap:4px}
 .contact-link{min-height:52px;padding:4px 6px}
 .contact-details strong{font-size:14px;line-height:1.5;letter-spacing:.08em}
 .contact-value{font-size:14px;line-height:1.5;white-space:normal;overflow-wrap:anywhere;letter-spacing:0}
 .is-armed .link-hint{font-size:14px;right:6px;top:4px}
 .back-footer{font-size:14px;letter-spacing:.04em;margin-top:16px;padding-top:16px}
 #flip-hint{font-size:14px;min-height:44px}.actions{gap:8px}.actions a{padding:12px;font-size:14px;gap:8px}
}

/* A compact introduction leaves the original card as the focal point. */
.profile{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.profile-avatar{display:block;flex:none;width:64px;height:64px;border-radius:50%;object-fit:cover;border:1px solid var(--line)}
.profile-copy{min-width:0}
.profile h1{font-size:22px;line-height:1.3;margin:0 0 6px;font-weight:700}
.profile-tagline{margin:0 0 6px;font-size:16px;line-height:1.6;font-weight:500}
.profile-services{margin:0;font-size:14px;color:var(--muted);line-height:1.6}
.actions{flex-direction:column;align-items:center}
.download-actions{display:flex;justify-content:center;gap:12px}

.profile-tagline span{display:inline-block}

.contact-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-width:100%}
.contact-actions a{padding-left:12px;padding-right:12px;text-align:center}

.subtitle>span{display:inline-block}