*{box-sizing:border-box}
:root{
  --font-body: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  --ink: #29262b;
  --muted: #736d75;
  --accent: #a34d7d;
  --bg: #fafafa;
  --surface: #ffffff;
  --accent-soft: #fcf3f8;
  --hover: #faf7f9;
  --line: #eeeeee;
  --card-line: #f4f4f4;
  --nav-surface: #ffffffed;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-card: 15px;
  --text-body: 16px;
  --text-md: 16px;
  --text-card-title: 17px;
  --text-section: 18px;
  --text-title: 29px;
  --text-title-mobile: 26px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 56px;
  --radius-card: 24px;
  --radius-nav: 32px;
  --radius-pill: 999px;
  --shadow-card: 0 4px 14px #00000004;
  --shadow-hover: 0 7px 20px #00000008;
  --shadow-nav: 0 5px 24px #00000005;
  --motion-fast: 180ms;
  --content-width: 1000px;
  --preview-bg: #f1f1f1;
  --radius-image: 14px;
  --touch-target: 44px;
}
body{margin:0;background:var(--bg);color:var(--ink);font:var(--text-md)/1.85 var(--font-body)}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--accent);outline-offset:var(--space-1)}
.skip{position:fixed;top:-100px;background:var(--surface);padding:10px;z-index:30}
.skip:focus{top:0}
.shell{max-width:var(--content-width);margin:0 auto;padding:var(--space-6) var(--space-4) calc(130px + env(safe-area-inset-bottom))}
main{outline:none}
.page-heading{margin-bottom:var(--space-6)}
h1{font-size:var(--text-title);line-height:1.5;letter-spacing:.03em;margin:0;font-weight:var(--weight-bold)}
h2{font-size:var(--text-section);margin:0;font-weight:var(--weight-bold)}
h3{font-size:var(--text-md);margin:0}
.grid{display:grid;grid-template-columns:1fr;gap:var(--space-4)}
.grid > *, .career-detail{min-width:0}
.card{overflow-wrap:anywhere}
.card{background:var(--surface);border:1px solid var(--card-line);border-radius:var(--radius-card);padding:var(--space-5);box-shadow:var(--shadow-card);transition:box-shadow var(--motion-fast),transform var(--motion-fast)}
@media(hover:hover) and (pointer:fine){.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}}
.card-icon{font-size:25px;margin-bottom:var(--space-3);line-height:1.4}
.card h3{font-size:var(--text-card-title);margin-bottom:var(--space-2)}
.card p{font-size:var(--text-card);color:var(--muted);margin:0 0 var(--space-3);line-height:1.9}
.tag{display:inline-block;font-size:var(--text-xs);line-height:1.5;color:var(--accent);background:var(--accent-soft);padding:var(--space-1) var(--space-2);border-radius:var(--radius-pill)}
.card-link{display:block;font-size:var(--text-sm);color:var(--muted);margin-top:var(--space-4);min-height:var(--touch-target);display:flex;align-items:center}
.bio{font-size:var(--text-body);color:var(--muted);margin:-15px 0 var(--space-6)}
.section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-4)}
.section-heading a{font-size:var(--text-sm);color:var(--muted)}
.profile-intro{background:var(--surface);border-radius:var(--radius-card);padding:var(--space-5);margin-bottom:var(--space-6)}
.profile-intro p{color:var(--muted);font-size:var(--text-body);margin-bottom:0}
.timeline>h2{margin-bottom:var(--space-4)}
.timeline>div{padding:var(--space-5) 0;border-bottom:1px solid var(--line);display:flex;gap:var(--space-5);align-items:baseline}
.timeline time{font-size:var(--text-sm);white-space:nowrap;color:var(--muted)}
.timeline h3{font-weight:var(--weight-medium)}
.empty{padding:var(--space-6) 0;color:var(--muted);font-size:var(--text-body)}
footer{margin-top:var(--space-8);display:flex;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;color:var(--muted);font-size:var(--text-xs)}
footer small{font-size:var(--text-xs)}
nav{position:fixed;bottom:calc(16px + env(safe-area-inset-bottom));max-width:calc(100% - 24px);width:350px;left:50%;transform:translateX(-50%);z-index:10;display:flex;gap:var(--space-1);padding:var(--space-2);border-radius:var(--radius-nav);background:var(--nav-surface);border:1px solid var(--surface);box-shadow:var(--shadow-nav);backdrop-filter:blur(15px)}
nav a{display:flex;align-items:center;justify-content:center;flex-direction:column;min-width:0;flex:1;height:58px;border-radius:var(--radius-card);color:var(--muted);line-height:1.4}
nav .nav-icon{display:block;width:32px;height:32px;flex-shrink:0;shape-rendering:crispEdges}
nav small{font-size:var(--text-xs);margin-top:var(--space-1)}
nav a[aria-current]{color:var(--accent);background:var(--accent-soft)}
nav a:hover{background:var(--hover)}

@media(max-width:520px){.shell{padding-top:var(--space-6)}
.grid{grid-template-columns:1fr;gap:var(--space-4)}
.card{padding:var(--space-5)}
.page-heading{margin-bottom:var(--space-5)}
h1{font-size:var(--text-title-mobile)}


.timeline>div{gap:var(--space-4)}
}

@media(prefers-reduced-motion:reduce){*{transition:none!important}
}

/* Tab-specific hero; shared typography and navigation remain unchanged. */
.library-hero { position: relative; overflow: hidden; border-radius: var(--radius-card); background: #fafaf7; margin-bottom: var(--space-6); }
.library-hero h1 { position: absolute; top: var(--space-5); left: var(--space-5); z-index: 1; color: var(--ink); }
.library-hero img { display: block; width: 100%; height: auto; }

.bookshelf > h2 { margin-bottom: var(--space-6); }
.book-category + .book-category { margin-top: var(--space-7); }
.book-category > h3 { font-size: var(--text-body); color: var(--accent); margin-bottom: var(--space-4); font-weight: var(--weight-medium); }
.book-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.book-list article { padding: var(--space-5); border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--card-line); box-shadow: var(--shadow-card); }
.book-list h4 { font-size: var(--text-md); line-height: 1.8; font-weight: var(--weight-bold); margin: 0 0 var(--space-2); }
.book-list p { margin: 0; font-size: var(--text-sm); color: var(--muted); }

/* Library grid: three columns on desktop, two on tablet, one on phone. */
.book-list { grid-template-columns: 1fr; gap: var(--space-4); }
.book-list li { min-width: 0; }
.book-list article { height: 100%; display: flex; flex-direction: column; }
.book-list h4 { overflow-wrap: anywhere; }
.book-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: auto; padding-top: var(--space-5); }
.book-actions a { font-size: var(--text-sm); color: var(--muted); min-height: var(--touch-target); display: inline-flex; align-items: center; }
.book-actions .review-link { color: var(--accent); }
.library-hero { max-width: 624px; margin-left: auto; margin-right: auto; }
@media (min-width: 600px) { .grid, .book-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .grid, .book-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } .shell { padding-top: var(--space-7); } }

.book-cover { display: flex; justify-content: center; align-items: center; height: 180px; margin-bottom: var(--space-5); }
.book-cover img { display: block; max-width: 100%; width: auto; height: auto; max-height: 180px; object-fit: contain; }

.timeline .career-detail { border: 0; padding: 0; display: block; }
.career-detail p { color: var(--muted); font-size: var(--text-body); margin: var(--space-2) 0 0; }
.career-detail .career-role { font-size: var(--text-sm); }
.career-keywords { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); margin-top: var(--space-3); }
.career-keywords-label { color: var(--muted); font-size: var(--text-sm); }
.career-keywords ul { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: 0; }
.career-keywords li { border: 1px solid #eedee8; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent); padding: 2px 10px; font-size: var(--text-sm); line-height: 1.6; white-space: nowrap; }
.publications { margin-top: var(--space-7); }
.publications > h2 { margin-bottom: var(--space-5); }

.timeline > div { align-items: start; }
.timeline time { flex: 0 0 145px; line-height: 1.8; }
.hobbies { margin-top: var(--space-7); }
.hobbies > h3 { margin: var(--space-5) 0 var(--space-4); }
.hobbies p, .hobbies li { font-size: var(--text-body); color: var(--muted); }
.hobbies ul { padding-left: var(--space-5); }
.hobbies a { text-decoration: underline; text-underline-offset: 4px; }
@media(max-width:599px) { .timeline > div { flex-direction: column; gap: var(--space-2); } .timeline time { flex-basis: auto; } }

/* OGP previews share the article and social card layout. */
.card-preview { aspect-ratio: 1.91 / 1; display: flex; justify-content: center; align-items: center; margin-bottom: var(--space-4); }
.card-preview img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; border-radius: var(--radius-image); }
.works-group .card-preview { width: min(100%, 160px); }
.works-group .social-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.works-group .social-grid:has(> :only-child) { grid-template-columns: minmax(0, 550px); justify-content: center; }
.hobbies .grid { margin-bottom: var(--space-5); }

.section-heading a { min-height: var(--touch-target); display: inline-flex; align-items: center; }
.profile-intro, .timeline { max-width: 720px; }

.content-group + .content-group { margin-top: var(--space-7); }
.content-group > h2 { margin-bottom: var(--space-5); }
.profile-media-panel { margin-top: var(--space-5); padding: var(--space-5); border: 1px solid #f2e5ec; border-radius: var(--radius-card); background: var(--accent-soft); }
.profile-media-panel h3 { margin-bottom: var(--space-3); }
.profile-media-panel ul { list-style: none; padding: 0; margin: 0; }
.profile-media-panel li { padding-block: var(--space-3); overflow-wrap: anywhere; }
.profile-media-panel li + li { border-top: 1px solid #eadce5; }
.profile-media-panel a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.profile-media-panel a:hover { text-decoration-thickness: 2px; }

.proposal-card { grid-column: 1 / -1; width: 100%; max-width: 720px; }
.proposal-card h3 { margin-bottom: var(--space-4); }
.proposal-list { margin: 0; padding-left: var(--space-5); }
.proposal-list li + li { margin-top: var(--space-4); }
.proposal-list p { margin: var(--space-2) 0 0; }
.proposal-card .proposal-summary { margin: var(--space-4) 0 0; }
.planning-card { grid-column: 1 / -1; width: 100%; max-width: 720px; }
.planning-card h3:not(:first-child) { margin-top: var(--space-5); }
.planning-card ul { margin: var(--space-3) 0 0; padding-left: var(--space-5); }
.planning-card li + li { margin-top: var(--space-2); }

/* X uses its official widget, without an extra card or image background. */
.social-post { min-width: 0; }
.social-post .twitter-tweet { margin: 0 auto !important; }
.social-post blockquote { padding: var(--space-4); margin: 0; }
.social-post iframe { max-width: 100%; }
.social-ogp-card { min-width: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-image); background: var(--surface); }
.social-ogp-card img { display: block; width: 100%; aspect-ratio: 1.91 / 1; object-fit: cover; background: var(--preview-bg); }
.social-ogp-title { padding: var(--space-3) var(--space-3) 0; font-size: var(--text-card); font-weight: var(--weight-bold); }
.social-ogp-account { padding: var(--space-1) var(--space-3) var(--space-3); color: var(--muted); font-size: var(--text-sm); }
.card h3 a { text-decoration: none; }
.card h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }

.personal { margin-top: var(--space-7); }
.personal > h2 { margin-bottom: var(--space-4); }
.github-activity { margin-top: var(--space-4); }
[data-contribution-chart] { overflow-x: auto; }
[data-contribution-chart] svg { display: block; width: 100%; min-width: 700px; }
[data-contribution-chart] text { font: 10px sans-serif; fill: var(--muted); }

[data-contribution-chart]:focus-visible { outline: 2px solid var(--accent); outline-offset: var(--space-1); }

.github-activity > h2 { margin-bottom: var(--space-2); }
.profile-links { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-4); }
.profile-links a { display: inline-flex; align-items: center; min-height: var(--touch-target); color: var(--muted); font-size: var(--text-sm); }

.card-photos { display: grid; gap: var(--space-4); margin-bottom: var(--space-4); }
.card-photos figure { margin: 0; }
.card-photos img { display: block; width: 100%; height: auto; border-radius: var(--radius-image); }
.card-photos figcaption { font-size: var(--text-sm); color: var(--muted); margin-top: var(--space-2); }

.hobby-group { margin: var(--space-5) 0; }
.hobby-group > h3, .has-posts > h3 { margin-bottom: var(--space-4); }
.has-posts { grid-column: 1 / -1; }
.hobbies .social-grid { grid-template-columns: minmax(0, 1fr); margin-bottom: 0; }
@media (min-width: 768px) { .hobbies .social-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { .hobbies .social-grid:has(> :only-child) { grid-template-columns: minmax(0, 1fr); max-width: 550px; margin-inline: auto; } }

.hobby-card h3 { font-size: var(--text-md); margin-bottom: var(--space-4); }

.qualifications { max-width: 720px; margin-top: var(--space-7); }
.qualifications ul { padding-left: var(--space-5); margin: var(--space-4) 0 0; color: var(--muted); }

/* Compact blog cards keep long titles readable and thumbnails unobtrusive. */
.writing-group .grid { gap: var(--space-3); }
.writing-group .card { padding: var(--space-4); border-radius: var(--space-4); }
.writing-group .card h3 { font-size: var(--text-card); line-height: 1.65; margin-bottom: 0; }
.writing-group .card-link { margin-top: var(--space-1); }
.writing-group .card:has(.card-preview) { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: var(--space-3); align-content: start; }
.writing-group .card-preview { grid-column: 1; grid-row: 1 / 3; width: 72px; margin: 0; min-height: var(--touch-target); }
.writing-group .card:has(.card-preview) h3, .writing-group .card:has(.card-preview) .card-link { grid-column: 2; }
.writing-group > h2 { margin-bottom: var(--space-4); }
.writing-group + .writing-group { margin-top: var(--space-6); }

/* Awards follow the profile qualifications. */
.qualifications + .content-group { margin-top: calc(var(--space-7) + var(--space-6)); }

.talk-list { padding-left: var(--space-5); margin: 0; }
.talk-list li + li { margin-top: var(--space-3); }
.talk-list a { display: inline-block; padding-block: var(--space-2); color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.talk-list a:hover { text-decoration-thickness: 2px; }
.award-context { display: block; color: var(--muted); font-size: var(--text-sm); }

/* Home travel log: a small digital atlas alongside the pixel navigation. */
.travel-log { margin-top: var(--space-7); }
.travel-log-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.travel-log-count, .travel-map-topline, .travel-map-bottomline { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .1em; }
.travel-log-count { display: flex; align-items: baseline; gap: var(--space-2); margin: 0; color: var(--accent); white-space: nowrap; }
.travel-log-count strong { font-size: 28px; line-height: 1; font-weight: 700; }
.travel-log-count span { font-size: 10px; }
.travel-map-frame { overflow: hidden; padding: var(--space-4); border: 1px solid #e7dce4; border-radius: var(--radius-card); background: #fcf9fb; box-shadow: var(--shadow-card); }
.travel-map-topline, .travel-map-bottomline { display: flex; justify-content: space-between; gap: var(--space-2); color: #8c7583; font-size: 10px; line-height: 1.3; }
.travel-map-topline span:last-child { color: var(--accent); }
.travel-map { display: block; width: 100%; height: auto; margin: var(--space-3) 0 var(--space-2); background: repeating-linear-gradient(0deg, transparent 0 3px, #a34d7d04 3px 4px); }
.travel-map-grid { fill: none; stroke: #e9dfe6; stroke-width: .8; stroke-dasharray: 2 5; }
.travel-map-land, .travel-map-visited { stroke: #fcf9fb; stroke-width: .9; stroke-linejoin: round; }
.travel-map-land { fill: #dbd5db; }
.travel-map-visited { fill: var(--accent); }
.travel-map-place { fill: var(--accent); stroke: #fcf9fb; stroke-width: 1.5; }
.travel-country-list { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: var(--space-4) 0 0; }
.travel-country-list li { display: inline-flex; align-items: center; gap: 1px; min-height: 32px; padding: 4px 10px; background: var(--surface); border: 1px solid #eee3ea; border-radius: 8px; font-size: var(--text-xs); line-height: 1.4; }
.travel-country-list li::before { content: ""; width: 6px; height: 6px; margin-right: 5px; background: var(--accent); }
.travel-country-list small { font-size: inherit; color: var(--muted); }
.travel-region-note { margin: var(--space-3) 0 0; color: var(--muted); font-size: var(--text-xs); line-height: 1.8; }
@media (max-width: 520px) {
  .travel-map-frame { padding: var(--space-3); }
  .travel-log-heading { gap: var(--space-2); }
  .travel-log-count { gap: var(--space-1); }
  .travel-log-count strong { font-size: 22px; }
  .travel-log-count span { font-size: 8px; }
}