:root {
  font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans CJK SC", sans-serif;
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: #efebe5;
}
* { box-sizing: border-box; }
body, h1, h2, h3, p { margin: 0; }
button, a { color: inherit; font: inherit; -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; text-align: left; }
a { text-decoration: none; }
button { border: 0; }
img { display: block; }
[hidden] { display: none !important; }
button:focus-visible, a:focus-visible { outline: 2px solid #817b73; outline-offset: 4px; }
#app {
  --base: #efebe5;
  --name: #000;
  --ink: #211f1c;
  --subtle: #817b73;
  --profile-ink: #615c55;
  --about-ink: #615c55;
  --border: #fff;
  --glass: linear-gradient(180deg, rgba(247,245,240,.8), rgba(249,247,245,.56));
  --item: linear-gradient(164.73deg, rgba(255,255,255,.54) 35.518%, rgba(255,255,255,.06) 81.872%);
  --contact: linear-gradient(164.59deg, rgba(255,255,255,.36) 35.518%, rgba(255,255,255,.04) 81.872%);
  --about: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.1));
  --work: linear-gradient(180deg, #fff 30.769%, rgba(255,255,255,.1));
  --item-padding: 13px;
  --item-stroke: #fff;
  --work-padding: 5px 5px 9px;
  --work-gap: 8px;
  --contact-ink: #000;
  --cta: rgba(227,222,215,.7);
  --cta-ink: #211f1c;
  --cta-subtle: #413d38;
  --shadow: 0 2px 3.5px rgba(0,0,0,.06), 0 3px 6.5px rgba(0,0,0,.03), 0 9px 7.6px rgba(0,0,0,.02);
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  background: var(--base);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  color-scheme: light;
}
#app[data-tone="dark"] {
  --base: #000;
  --name: #fff;
  --ink: #efebe5;
  --subtle: #aaa39a;
  --profile-ink: #e3ded7;
  --about-ink: #d0cac2;
  --border: #424242;
  --glass: linear-gradient(180deg, rgba(25,25,25,.63), rgba(0,0,0,.28));
  --item: linear-gradient(169.12deg, rgba(87,87,87,.21) 16.436%, rgba(57,56,53,0) 88.874%);
  --contact: linear-gradient(152.06deg, rgba(87,87,87,.21) 20.403%, rgba(57,56,53,0) 63.976%);
  --about: linear-gradient(180deg, rgba(87,87,87,.21), rgba(57,56,53,0));
  --work: linear-gradient(180deg, rgba(87,87,87,.7), rgba(33,31,28,0));
  --item-padding: 12px;
  --item-stroke: transparent;
  --work-padding: 4px 4px 8px;
  --work-gap: 16px;
  --contact-ink: #f7f5f0;
  --cta: rgba(43,41,38,.4);
  --cta-ink: #d0cac2;
  --cta-subtle: #aaa39a;
  color-scheme: dark;
}
/* Figma layer blur 400 maps to CSS Gaussian blur 200; use the avatar itself.
   The clipping host is fixed, keeping overflow and scrolling out of the layer. */
.avatar-backdrop { position: fixed; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.avatar-backdrop__image { display: none; }
[data-tone="dark"] .avatar-backdrop__image { opacity: .4; }
@supports ((filter: blur(1px)) or (-webkit-filter: blur(1px))) {
  .avatar-backdrop__image {
    display: block;
    position: absolute;
    left: 50%;
    top: 67px;
    width: max(509px, 100vw);
    max-width: 627px;
    height: 679px;
    object-fit: cover;
    transform: translateX(-50%);
    filter: blur(200px);
    -webkit-filter: blur(200px);
    opacity: .7;
  }
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: calc(100% - 32px);
  max-width: 600px;
  margin: 0 auto;
  padding: 37px 0 24px;
  padding-top: calc(37px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}
.profile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 0 12px 12px;
}
.profile::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 51px;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 16px;
  background: var(--glass);
  box-shadow: inset 0 0 0 1px var(--border), var(--shadow);
}
.identity { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.avatar-frame { width: 100px; height: 100px; flex: none; border-radius: 50%; background: var(--base); overflow: hidden; }
.avatar { width: 100px; height: 100px; border: 2px solid #fff; border-radius: 50%; object-fit: cover; }
.identity-text { width: 100%; text-align: center; overflow-wrap: anywhere; word-break: break-word; }
.profile-name { font-size: 24px; font-weight: 400; line-height: 1.2; color: var(--name); }
.profile-title, .profile-company { font-size: 14px; line-height: 1.5; color: var(--profile-ink); }
.profile-separator { width: 29px; height: 0; border-top: 1px solid var(--subtle); margin-top: -1px; }
.about {
  width: 100%;
  padding: 7px 13px;
  border-radius: 16px;
  background: var(--about);
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--about-ink);
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: pre-line;
}
.contacts { width: 100%; }
.contact-heading { font-size: 12px; font-weight: 400; line-height: 18px; color: var(--subtle); text-align: center; margin-bottom: 8px; }
.contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.contact { display: flex; align-items: center; gap: 2px; min-width: 0; padding: 7px 13px; border-radius: 32px; background: var(--contact); box-shadow: inset 0 0 0 1px var(--border); color: var(--contact-ink); font-size: 12px; line-height: 18px; }
.contact:last-child:nth-child(odd) { grid-column: 1 / -1; }
.contact-icon { width: 16px; height: 16px; flex: none; }
.contact-value { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.section { padding: 12px; border-radius: 16px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--border), var(--shadow); }
.section-heading { font-weight: 400; font-size: 12px; line-height: 18px; color: var(--subtle); margin-bottom: 8px; }
[data-tone="dark"] .section-heading { color: #d0cac2; }
.section-items { display: flex; flex-direction: column; gap: 8px; }
.section--work .section-items { gap: var(--work-gap); }
.glass-item { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; padding: var(--item-padding); border-radius: 8px; background: var(--item); box-shadow: inset 0 0 0 1px var(--item-stroke); }
.social-icon { display: flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; }
.social-glyph { width: 24px; height: 19.279px; object-fit: contain; }
.item-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.item-name { font-size: 14px; line-height: 1.2; font-weight: 400; overflow-wrap: anywhere; word-break: break-word; }
.item-secondary { font-size: 12px; line-height: 18px; color: var(--subtle); overflow-wrap: anywhere; word-break: break-word; white-space: pre-line; }
.service-media { position: relative; width: 60px; min-height: 34px; flex: none; align-self: stretch; border-radius: 4px; overflow: hidden; }
.service-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.service-item .item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work-item { padding: var(--work-padding); border-radius: 8px; background: var(--work); box-shadow: inset 0 0 0 1px var(--item-stroke); }
.work-media { position: relative; width: 100%; padding-top: 56.25%; overflow: hidden; border-radius: 4px; margin-bottom: 8px; }
.work-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.image-count { position: absolute; bottom: 12px; right: 12px; padding: 2px 13px; border-radius: 31px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; line-height: 18px; }
.work-text { display: flex; flex-direction: column; gap: 4px; }
.work-heading { display: flex; align-items: flex-start; gap: 4px; }
.work-heading .item-name { flex: 1; min-width: 0; }
.work-tag { max-width: 42%; text-align: right; }
.has-media .work-description { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.work-item:not(.has-media) { padding: 12px; }
.growth-cta { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: var(--cta); }
.creation-qr { width: 48px; height: 48px; flex: none; object-fit: contain; }
.growth-text { min-width: 0; flex: 1; }
.growth-title { font-weight: 400; font-size: 14px; line-height: 1.2; color: var(--cta-ink); overflow-wrap: anywhere; }
.growth-description { margin-top: 4px; font-size: 12px; line-height: 18px; color: var(--cta-subtle); }
.brand-footer { display: flex; justify-content: center; flex: none; }
.brand-mark { width: 29px; height: 67.261px; object-fit: contain; }
.copy-buffer { position: fixed; left: -10000px; top: 0; width: 1px; height: 1px; font-size: 16px; }
.copy-notice { visibility: hidden; position: fixed; z-index: 5; left: 50%; bottom: 32px; bottom: calc(32px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 24px; background: #211f1c; color: #fff; font-size: 12px; text-align: center; }
.copy-notice.is-visible { visibility: visible; }
/* Figma strokes fade from opaque at the top to transparent at the bottom.
   A masked pseudo-element preserves the translucent fill beneath the border. */
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .profile::before, .section { box-shadow: var(--shadow); }
  .about, .contact, .glass-item, .work-item { box-shadow: none; }
  .section, .about, .contact, .glass-item, .work-item { position: relative; }
  .profile::after, .section::after, .about::after, .contact::after, .glass-item::after, .work-item::after {
    content: "";
    position: absolute;
    pointer-events: none;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(180deg, var(--border), transparent);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }
  .profile::after { top: 51px; border-radius: 16px; z-index: -1; }
  .glass-item::after, .work-item::after { background: linear-gradient(180deg, var(--item-stroke), transparent); }
}
/* Gradients/borders are the baseline: unsupported backdrop-filter stays legible. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .profile::before, .section, .growth-cta { backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); }
}
/* Final mobile material adjustment; desktop and work-card surfaces stay frozen. */
@media (max-width: 767px) {
  [data-tone="light"] .profile::before,
  [data-tone="light"] .section--social,
  [data-tone="light"] .section--services {
    --glass: linear-gradient(180deg, rgba(247,245,240,.74), rgba(249,247,245,.518));
  }
  /* These two Figma sections disable the distant 9px shadow. */
  [data-tone="light"] .section--social,
  [data-tone="light"] .section--services {
    --shadow: 0 2px 3.5px rgba(0,0,0,.06), 0 3px 6.5px rgba(0,0,0,.03);
  }
  [data-tone="dark"] .profile::before,
  [data-tone="dark"] .profile::after,
  [data-tone="dark"] .section {
    --border: rgba(66,66,66,.6);
  }
}
@media (min-width: 768px) {
  .card { padding-top: 67px; padding-top: calc(67px + env(safe-area-inset-top, 0px)); }
  .profile { padding-bottom: 18px; }
  .avatar-backdrop__image { top: 155px; width: 509px; }
  #app[data-tone="light"] { --base: #f0ece5; }
  [data-tone="light"] .section { background: linear-gradient(180deg, #f7f5f0, rgba(249,247,245,.7)); }
  [data-tone="light"] .social-item:nth-child(-n+2), [data-tone="light"] .service-item { background: linear-gradient(171.4deg, rgba(255,255,255,.36) 35.518%, rgba(255,255,255,.04) 81.872%); }
}