/* Home-only styles. Shared index.css remains isolated for the About page. */
:root {
  color-scheme: light;
  --paper: #f7f8fc;
  --ink: #242735;
  --muted: #656b7d;
  --line: #303a5c1f;
  --glass: #ffffff38;
  --edge: #ffffffd9;
  --shade: #3b47731c;
  --coral: #bb5042;
  --violet: #7958b8;
  --blue: #426cb9;
  --teal: #247e72;
  font-family: "hm", system-ui, sans-serif;
}
[data-theme="dark"] {
  color-scheme: dark;
  --paper: #121723;
  --ink: #eceef6;
  --muted: #afb5c8;
  --line: #dae4ff24;
  --glass: #1e29394d;
  --edge: #ffffff36;
  --shade: #00000040;
  --coral: #f29f91;
  --violet: #bf9eea;
  --blue: #9ebfff;
  --teal: #83cfbe;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
a:focus-visible { outline: 2px solid var(--blue); outline-offset: 6px; }
p, h1, h3 { margin: 0; }
/* The ambient layer alone clips its oversized decorative forms. */
.bg-decor { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.bg-grid, .bg-corner, .bg-spark, #particles { display: none; }
.bg-blob { position: absolute; border-radius: 50%; filter: blur(65px); opacity: .48; }
.bg-blob-1 { width: 45vw; height: 48vw; left: -22vw; top: -17vw; background: #f6d7d1; }
.bg-blob-2 { width: 45vw; height: 40vw; right: -14vw; bottom: -15vw; background: #b7cadf; }
.bg-blob-3 { width: 28vw; height: 30vw; left: 50%; top: 18%; background: #d4c7e4; opacity: .3; }
[data-theme="dark"] .bg-blob { opacity: .12; }
.wrap { width: min(1160px, 100%); margin: auto; padding: 88px 56px 64px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: clamp(48px, 7vw, 96px); }
.card { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 38px; overflow: visible; }
.avatar-box { perspective: 800px; }
.avatar-3d { position: relative; width: 120px; height: 120px; display: grid; place-items: center; }
.avatar-glow, .avatar-ring-inner { display: none; }
.avatar-ring-outer { position: absolute; inset: 0; border: 1px solid var(--edge); border-radius: 50%; background: linear-gradient(135deg, #ffffff80, #ffffff08 55%, #bdcee526); box-shadow: inset 1px 2px 2px #ffffff9c, inset -1px -1px 2px #8191b333, 0 8px 24px var(--shade); }
.avatar { width: 88px; height: 88px; border-radius: 50%; transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 220ms ease-out; }
.avatar img { display: block; width: 100%; height: 100%; border-radius: inherit; }
.meta { min-width: 0; }
.name { max-width: 8ch; font-size: clamp(3.5rem, 6.5vw, 5.7rem); font-weight: 700; letter-spacing: -.06em; line-height: .95; }
.motto { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 26px; color: var(--coral); font: 500 .76rem/1.6 "code", monospace; }
.motto-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.gpg-info { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 20px; color: var(--muted); font: .72rem/1.6 "code", monospace; }
.gpg-label { letter-spacing: .1em; }
.gpg-link { display: inline-flex; align-items: center; gap: 7px; }
.link-icon { width: 12px; height: 12px; opacity: .6; }
.gpg-link:hover { color: var(--blue); }
.subtitle { max-width: 25rem; margin-top: 28px; color: var(--muted); font-size: .96rem; line-height: 1.85; }
/* One thin optical surface, not four cards. External shadows never clip. */
.bento-nav { position: relative; min-width: 0; padding: 16px 30px; isolation: isolate; overflow: visible; }
.bento-nav::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border: 1px solid var(--edge); border-radius: 32px; background: linear-gradient(125deg, #ffffff40, #ffffff05 42%, #ffffff1c), var(--glass); backdrop-filter: blur(16px) saturate(125%); -webkit-backdrop-filter: blur(16px) saturate(125%); box-shadow: inset 1px 1px 1px #ffffffa6, inset -1px -1px 2px #64758d24, 0 16px 40px -22px var(--shade); }
/* A faint prismatic rim is limited to the material edge, not the text. */
.bento-nav::after { content: ""; pointer-events: none; position: absolute; inset: 1px; z-index: -1; border-radius: 31px; border: 1px solid transparent; border-right-color: #acb2d924; border-bottom-color: #a2c9cf29; }
.bento-item { --tint: var(--coral); position: relative; min-height: 116px; display: grid; grid-template-columns: 44px minmax(0, 1fr) 22px; gap: 5px 18px; align-content: center; align-items: center; padding: 26px 0; overflow: visible; }
.bento-item + .bento-item { border-top: 1px solid var(--line); }
.bento-blog { --tint: var(--violet); }
.bento-tech { --tint: var(--blue); }
.bento-wakatime { --tint: var(--teal); }
.bento-code { grid-area: 1 / 2; align-self: end; color: var(--tint); font: 600 .6rem/1.3 "code", monospace; letter-spacing: .12em; }
.bento-text { grid-area: 2 / 2; min-width: 0; }
.bento-text h3 { font-size: clamp(1.3rem, 2.1vw, 1.7rem); line-height: 1.12; letter-spacing: -.035em; font-weight: 600; }
.bento-icon { grid-area: 1 / 1 / 3 / 2; position: relative; display: grid; place-items: center; width: 42px; height: 48px; border-radius: 15px; color: var(--tint); background: linear-gradient(135deg, #ffffff75, #ffffff0d), color-mix(in srgb, var(--tint) 5%, transparent); border: 1px solid var(--edge); box-shadow: inset 1px 1px 1px #ffffff99, inset -1px -1px 1px #8893ae24, 0 4px 9px -5px var(--shade); transition: transform 200ms ease-out; }
.bento-icon svg { width: 21px; height: 21px; }
.bento-arrow { grid-area: 1 / 3 / 3 / 4; color: var(--muted); font: 1.15rem/1 system-ui; transition: transform 200ms ease-out, color 200ms ease; }
.bento-text { color: var(--ink); transition: color 180ms ease; }
@media (hover: hover) and (pointer: fine) {
  .bento-item:hover .bento-icon { transform: perspective(400px) rotateY(-8deg) translateY(-2px); }
  .bento-item:hover .bento-arrow { transform: translate(2px, -2px); color: var(--tint); }
  .bento-item:hover .bento-text { color: var(--tint); }
}
.bento-item:active .bento-icon { transform: scale(.96); transition-duration: 80ms; }
footer { text-align: center; color: var(--muted); font: .69rem/1.8 "code", monospace; padding: 16px 24px 24px; }
.footer-icp a:hover { color: var(--blue); }
.mobile-only { display: none; }
.theme-hint { position: fixed; right: 20px; bottom: 20px; display: flex; align-items: center; gap: 8px; color: var(--muted); padding: 8px 10px; font-size: .7rem; pointer-events: none; }
.theme-hint-icon { width: 13px; height: 13px; display: none; }
[data-theme="light"] .theme-hint-moon, [data-theme="dark"] .theme-hint-sun { display: block; }
@media (max-width: 900px) {
  .wrap { width: min(690px, 100%); grid-template-columns: 1fr; padding: 60px 32px 36px; gap: 48px; }
  .card { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 30px; align-items: center; }
  .name { max-width: none; font-size: clamp(2.9rem, 7vw, 4rem); }
  .subtitle { margin-top: 18px; }
}
@media (max-width: 560px) {
  .wrap { padding: 36px 24px 26px; gap: 36px; }
  .card { display: flex; align-items: flex-start; gap: 24px; }
  .avatar-3d { width: 100px; height: 100px; }
  .avatar { width: 76px; height: 76px; }
  .name { font-size: clamp(2.4rem, 10vw, 3.3rem); }
  .motto { margin-top: 18px; font-size: .72rem; }
  .gpg-info { margin-top: 12px; }
  .subtitle { font-size: .9rem; }
  .bento-nav { padding: 8px 18px; }
  .bento-nav::before { border-radius: 26px; }
  .bento-nav::after { border-radius: 25px; }
  .bento-item { min-height: 100px; grid-template-columns: 36px minmax(0, 1fr) 18px; column-gap: 13px; padding: 22px 0; }
  .bento-icon { width: 36px; height: 42px; border-radius: 12px; }
  .bento-text h3 { font-size: 1.24rem; }
  .theme-hint { display: none; }
  .desktop-only { display: none; }
  .mobile-only { display: block; }
}
@media (max-width: 360px) {
  .wrap { padding-inline: 18px; }
  .name { font-size: 2.25rem; }
  .bento-nav { padding-inline: 14px; }
  .bento-item { column-gap: 11px; }
  .bento-text h3 { font-size: 1.14rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .avatar, .bento-item:hover .bento-icon, .bento-item:active .bento-icon { transform: none; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .bento-nav::before { background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; border-color: var(--muted); }
  .bento-icon { background: var(--paper); border-color: var(--muted); }
}