/* Usagi notebook: fluid composition, native motion, and a quiet reading surface. */
@font-face { font-family:"Notebook WenKai"; src:url("/assets/fonts/lxgw-wenkai-tc-brand-400.ttf") format("truetype"); font-style:normal; font-weight:400; font-display:swap; }
@font-face { font-family:"Notebook WenKai"; src:url("/assets/fonts/lxgw-wenkai-tc-brand-700.ttf") format("truetype"); font-style:normal; font-weight:700; font-display:swap; }
:root { --paper:#fffaf0; --surface:#fffdf8; --ink:#3b3028; --muted:#776e61; --line:#e8dfce; --accent:#edbc4d; --accent-dark:#85601c; --yellow:#ffe8a3; --radius:18px; --header-height:76px; --reading-toolbar-height:44px; --spring:cubic-bezier(.22,1,.36,1); }
body { background:var(--paper); overflow-wrap:break-word; }
::selection { background:#ffe3a0; color:#3b3028; }
.wrap { width:min(1280px,calc(100% - clamp(36px,8vw,144px))); }
.icon { flex-shrink:0; }
.site-header { background:#fffaf0ed; border-bottom:1px solid var(--line); backdrop-filter:blur(18px); z-index:100; }
.site-header:has(.menu-toggle[aria-expanded="true"]) { z-index:500; }
body.nav-open .reading-progress, body.nav-open .reading-companion { visibility:hidden; }
.header-inner { height:var(--header-height); }
.identity-avatar { width:38px; height:43px; object-fit:contain; transition:transform .5s var(--spring); }
.identity:hover .identity-avatar { transform:rotate(-12deg); }
.identity-name { font-size:17px; }
.desktop-nav { gap:34px; }
.desktop-nav [aria-current]:after { background:var(--accent); height:4px; border-radius:3px; bottom:5px; }
.icon-button { border-radius:50%; }
.icon-button:hover { background:#f9ebc9; }
.button { border-radius:999px; padding:17px 26px; font-size:14px; min-height:54px; transition:transform .45s var(--spring),box-shadow .45s var(--spring),background .2s; }
.button-primary { background:var(--ink); border-color:var(--ink); box-shadow:0 5px 0 #dccaad; }
.button-primary:hover { background:#584635; transform:translateY(-4px); box-shadow:0 9px 0 #dccaad; }
.button:active { transform:translateY(2px); box-shadow:0 1px 0 #dccaad; }
.text-link > span:last-child, .card-read > span:last-child { transition:transform .35s var(--spring); }
.text-link:hover > span:last-child, .card-read:hover > span:last-child { transform:translate(3px,-3px); }
.hero-shell { position:relative; overflow:hidden; background:radial-gradient(ellipse at 76% 40%,#ffe9a54d,transparent 60%),var(--paper); border-bottom:1px solid var(--line); }
.hero-shell:before { content:""; position:absolute; inset:0; background-image:radial-gradient(#c9ab7738 .8px,transparent .8px); background-size:22px 22px; mask-image:linear-gradient(to right,transparent,#000); pointer-events:none; }
.hero { position:relative; grid-template-columns:1.12fr 1fr; gap:30px; padding-block:64px 35px; min-height:560px; }
.hero-copy { position:relative; z-index:2; }
.hero-copy .eyebrow { font-size:10px; letter-spacing:1.8px; color:var(--muted); }
.tiny-dot { background:#7a9570; box-shadow:0 0 0 4px #dde6d4; width:6px; height:6px; }
.hero h1 { font-size:clamp(42px,5.3vw,76px); line-height:1.26; letter-spacing:-3px; font-weight:800; margin-top:28px; }
.hero h1 > .hero-line { color:var(--ink); display:inline-block; }
.hero-highlight { color:var(--accent-dark)!important; position:relative; isolation:isolate; white-space:nowrap; }
.hero-highlight:before { content:""; position:absolute; left:-3%; right:-3%; bottom:3%; height:32%; background:#ffe29a; border-radius:48% 33% 48% 38%; z-index:-1; transform:rotate(-3deg); }
.hero-description { font-size:16px; margin-top:26px; line-height:1.95; }
.hero-actions { margin-top:30px; gap:28px; }
.hero-note { color:var(--muted); font-size:11px; margin-top:34px; display:flex; align-items:center; gap:10px; }
.hero-note > span { font-size:22px; color:var(--accent-dark); }
.hero-bottom { position:relative; display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:18px 23px; font:9px/1.8 var(--mono); letter-spacing:1.4px; color:var(--muted); }
.scroll-cue { display:flex; gap:12px; align-items:center; font:12px var(--font); letter-spacing:1px; min-height:44px; }
.scroll-cue > span { font-size:23px; animation:scroll-nudge 2.6s ease-in-out infinite; }
.usagi-scene { position:relative; width:100%; aspect-ratio:1.08; max-width:550px; justify-self:center; isolation:isolate; --pointer-x:0; --pointer-y:0; --scroll-shift:0px; }
.scene-halo { position:absolute; inset:15% 8% 7%; border-radius:50%; background:#f7da80; box-shadow:inset 0 0 80px #fff2c3; transform:translateY(var(--scroll-shift)); }
.scene-halo:after { content:""; position:absolute; inset:8%; border:1px solid #fef8e1; border-radius:50%; }
.scene-orbit { position:absolute; inset:6% 1% 0; border:1px dashed #d7c59a; border-radius:50%; transform:rotate(-25deg); }
.orbit-two { inset:17% -5% 12%; transform:rotate(25deg); border-style:solid; opacity:.55; }
.scene-stamp { position:absolute; top:3%; left:25%; color:var(--accent-dark); font:9px var(--mono); letter-spacing:2px; transform:rotate(-7deg); }
.mascot-float { position:absolute; inset:12% 19% 9%; z-index:4; animation:mascot-float 5s ease-in-out infinite; }
.usagi-mascot { display:block; border:0; padding:0; background:none; width:100%; height:100%; cursor:pointer; touch-action:manipulation; transform:translate(calc(var(--pointer-x)*9px),calc(var(--pointer-y)*7px)) rotate(calc(var(--pointer-x)*5deg)); transition:transform .7s var(--spring); -webkit-tap-highlight-color:transparent; }
.usagi-mascot img { display:block; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 14px 0 #8e692412); }
.usagi-mascot:focus-visible { outline:3px dashed var(--accent-dark); outline-offset:8px; border-radius:45%; }
.scene-shadow { position:absolute; left:25%; right:25%; bottom:7%; height:5%; background:#a8883530; border-radius:50%; filter:blur(5px); animation:shadow-breathe 5s ease-in-out infinite; }
.scene-layer { position:absolute; z-index:5; transform:translate(calc(var(--pointer-x)*var(--depth,14px)),calc(var(--pointer-y)*var(--depth,14px) + var(--scroll-shift))); transition:transform .9s var(--spring); pointer-events:none; }
.layer-code { top:25%; left:-2%; --depth:-16px; width:43%; }
.layer-book { right:-1%; bottom:12%; --depth:22px; width:33%; }
.layer-spark { top:19%; right:7%; --depth:28px; }
.layer-flower { bottom:14%; left:9%; --depth:18px; }
.floating-note { padding:20px; border:1px solid #dfcfac; box-shadow:0 12px 25px #7250280d; background:#fffdf6; border-radius:12px; }
.code-note { transform:rotate(-9deg); animation:note-drift 7s ease-in-out infinite; }
.note-dots { display:flex; align-items:center; gap:10px; padding-bottom:10px; border-bottom:1px solid var(--line); }
.note-dots i { display:block; width:7px; height:7px; border-radius:50%; background:#ef7068; }
.note-dots i:nth-child(2) { background:#efc04d; }
.note-dots i:nth-child(3) { background:#7eaf6d; }
.code-note code { display:block; font:11px/1.9 var(--mono); margin-top:10px; color:#776449; white-space:nowrap; }
.code-note code span { color:#788b66; }
.code-note code em { font-style:normal; color:#ba8156; }
.book-note { transform:rotate(9deg); animation:book-drift 6s ease-in-out infinite; background:#e5ecd8; border-color:#ced8bd; padding:18px; }
.book-note > .icon { width:26px; height:26px; color:#667950; margin-bottom:11px; }
.book-note > span { display:block; font-size:15px; font-weight:650; line-height:1.55; }
.book-note i { display:block; font:9px var(--mono); color:#61754d; margin-top:15px; }
.scene-spark { display:block; color:#b88825; font-size:58px; animation:spark-turn 8s ease-in-out infinite; }
.scene-flower { display:block; font-size:76px; color:#c5a665; text-shadow:2px 2px #fff; animation:flower-sway 8s ease-in-out infinite; }
.usagi-speech { position:absolute; z-index:6; left:32%; top:7%; background:var(--ink); color:white; font-size:12px; padding:12px 18px; border-radius:18px 18px 18px 2px; opacity:0; transform:translateY(12px) rotate(-4deg); transition:opacity .25s,transform .4s var(--spring); pointer-events:none; }
.usagi-scene.is-greeting .usagi-speech { opacity:1; transform:translateY(0) rotate(-4deg); }
.scene-caption { position:absolute; bottom:-3%; width:100%; text-align:center; font-size:11px; color:var(--muted); }
.scene-caption span { display:inline-block; font-size:20px; margin-right:7px; transform:rotate(-20deg); }
.scene-confetti { position:absolute; inset:0; pointer-events:none; z-index:8; }
.confetti-piece { position:absolute; left:50%; top:48%; font-size:20px; color:var(--particle-color); }
.hero-feature { display:grid; grid-template-columns:230px minmax(0,1fr) 170px; gap:32px; align-items:center; background:transparent; color:var(--ink); padding:30px 0; border-bottom:1px solid var(--line); }
.hero-feature:before { display:none; }
.feature-label { display:grid; gap:8px; }
.feature-label .eyebrow { font-size:9px; letter-spacing:1px; color:var(--accent-dark); }
.feature-label span:last-child { color:var(--muted); font:12px var(--font); }
.feature-body { padding:0; }
.feature-body .eyebrow { font-size:10px; color:var(--muted); }
.feature-body h2 { font-size:21px; margin-top:7px; }
.feature-body h2 a:hover { color:var(--accent-dark); }
.feature-read { border:0; padding:0; display:grid; gap:8px; justify-content:end; color:var(--ink); }
.feature-read time { color:var(--muted); }
.intro-strip { border:0; padding-block:22px; }
.journal-section { padding-block:56px 64px; }
.section-heading h2 { font-size:clamp(27px,3vw,36px); }
.filter-bar { gap:10px; border:0; flex-wrap:wrap; padding-bottom:6px; }
.filter-bar button { border:1px solid var(--line); background:transparent; border-radius:999px; margin:0; padding:10px 18px; font-size:12px; transition:background .25s,color .25s,transform .3s var(--spring); }
.filter-bar button.active { background:#f8dd89; border-color:#e5c768; color:var(--ink); }
.filter-bar button:not(.active):hover { background:#fff0c5; border-color:#e5c768; transform:translateY(-2px); }
.filter-status { margin:12px 0 23px; }
.article-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.article-card { position:relative; display:flex; flex-direction:column; background:#fffdf8; border:1px solid var(--line); border-radius:18px; padding:26px; min-height:280px; box-shadow:0 5px 0 #e8dfce44; transition:transform .6s var(--spring),box-shadow .5s,border-color .3s; overflow:hidden; }
.article-card:before { content:""; display:block; width:30px; height:3px; border-radius:3px; background:#e5c56c; margin-bottom:22px; }
.article-card[data-group="ai"]:before { background:#99ad7c; }
.article-card[data-group="systems"]:before { background:#cf9b87; }
.article-card[data-group="notes"]:before { background:#a3acc6; }
.article-card:hover { transform:translateY(-7px) rotate(-.6deg); border-color:#d5bd83; box-shadow:0 15px 32px #75603e12,0 5px 0 #e8dfce44; }
.card-meta { flex-wrap:wrap; font-size:10px; margin-bottom:15px; }
.card-meta time { font-size:10px; }
.article-card h3 { font-size:20px; line-height:1.6; margin-bottom:12px; }
.article-card > p { font-size:13px; line-height:1.85; -webkit-line-clamp:3; margin-bottom:26px; }
.card-read { border-top:1px solid var(--line); padding-top:14px; min-height:44px; }
.card-read > span:last-child { font-size:21px; }
.topics-section { background:#f3efdF; border-block:1px solid var(--line); padding-block:58px; }
.topic-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.topic-card, .topic-card:first-child, .topic-card:nth-child(3) { background:#fffaf0; border:1px solid #e4dbc5; border-radius:16px; padding:24px; transition:transform .5s var(--spring),background .3s; }
.topic-card:hover { background:#fff3d4; transform:translateY(-5px); }
.topic-icon { width:44px; height:44px; display:grid; place-items:center; border-radius:50%; background:#f7e6b8!important; margin-bottom:25px; }
.topic-card:nth-child(2) .topic-icon { background:#e2e9d3!important; }
.topic-card:nth-child(3) .topic-icon { background:#f0dfd3!important; }
.topic-card:nth-child(4) .topic-icon { background:#e5e5ed!important; }
.topic-count { top:29px; right:21px; }
.topic-card p { max-width:none; padding-right:12px; }
.topic-arrow { right:21px; bottom:18px; }
.about-strip { padding-block:65px; }
.about-monogram { color:#6d805b; }
.about-github { border-radius:14px; background:#fffdf8; }
.site-footer { border-top:1px solid var(--line); background:#f4eddc; }
.footer-top { padding-block:40px; }
.footer-bottom { padding-bottom:100px; }
.page-heading { padding-block:58px 35px; }
.page-heading h1 { font-size:clamp(32px,4.2vw,54px); }
.inline-search, .search-field, .search-dialog { border-radius:14px; }
.collection-grid { gap:20px; }
.collection-card { background:#fffdf8; border-radius:16px; transition:transform .4s var(--spring),background .3s; }
.collection-card:hover { transform:translateY(-5px); background:#fff1cd; }
.collection-card h2 { font-size:21px; overflow-wrap:anywhere; }
.archive-row { border-radius:8px; }
.archive-row:hover { background:#f5edda; }
.year-links a { border-radius:999px; }
.project-card, .about-visual, .post-pagination a { border-radius:16px; background:#fffdf8; }
.project-icon, .contact-icon { border-radius:12px; background:#f5e9c8; }
.music-dock { border-radius:18px; border-color:var(--line); box-shadow:0 5px 24px #45332310; background:#fffdf8f5; }
.back-top { border-radius:50%; }
/* Article progress is measured against article-body, excluding tags and pagination. */
body[data-page="post"] .article-wrap { padding-top:74px; max-width:1200px; }
body[data-page="post"] { --reading-offset:calc(var(--header-height) + var(--reading-toolbar-height)); }
html:has(body[data-page="post"]) { scroll-padding-top:calc(var(--header-height) + var(--reading-toolbar-height) + 24px); }
.reading-companion { position:fixed; z-index:91; top:var(--header-height); left:0; width:100%; min-height:var(--reading-toolbar-height); display:flex; align-items:center; justify-content:center; gap:14px; padding:4px 18px; border-bottom:1px solid var(--line); background:#fffaf0f5; backdrop-filter:blur(12px); font-size:11px; }
.reading-companion > img { width:28px; height:30px; object-fit:contain; }
.reading-companion > div { display:flex; align-items:center; gap:16px; }
.reader-progress-label { font-size:11px; color:var(--muted); }
.reader-progress-track { display:block; width:100px; height:5px; border-radius:4px; background:#eae1ce; overflow:hidden; }
.reader-progress-track > span { display:block; height:100%; width:100%; background:#c9992f; transform:scaleX(var(--reading-progress,0)); transform-origin:left; }
.reader-percent { min-width:4ch; font:11px var(--mono); color:var(--accent-dark); }
.reader-remaining { color:var(--muted); border-left:1px solid var(--line); padding-left:14px; }
.reading-progress { position:fixed; top:calc(var(--header-height) + var(--reading-toolbar-height) - 1px); left:0; width:100%; height:3px; z-index:101; background:#eae1ce; pointer-events:none; }
.reading-progress-fill { width:100%; height:100%; background:linear-gradient(90deg,#e4b445,#b9a563); transform:scaleX(var(--reading-progress,0)); transform-origin:left; }
.reading-layout, .article-wrap .reading-layout { display:grid; grid-template-columns:minmax(0,760px) 220px; gap:clamp(32px,5vw,80px); align-items:start; }
.article-heading { max-width:890px; padding-block:32px 42px; }
.article-heading h1 { font-size:clamp(29px,3.4vw,44px); }
.prose { min-width:0; color:#403b33; font-size:17px; }
.prose .article-body > h2 { border-bottom:1px solid var(--line); padding-bottom:12px; margin-top:50px; }
.prose .article-body > :first-child { margin-top:0; }
.article-body h2, .article-body h3, .article-body h4 { scroll-margin-top:0; }
.prose img, .prose iframe { max-width:100%; border-radius:10px; }
.prose blockquote, .reading-points { background:#f7efdb; border-radius:0 12px 12px 0; }
.prose figure.highlight { border-radius:12px; background:#f5f1e6; }
.reading-aside, .article-wrap .reading-aside { position:sticky; top:155px; order:initial; margin-bottom:0; }
.article-toc { border-color:#ddbd69; padding:20px 0; background:transparent; border-radius:0; border-width:2px 0 0; }
.article-toc nav { max-height:calc(100svh - 330px); }
.article-toc li { display:block; margin-right:0; }
.article-toc .toc-level-2, .article-toc .toc-level-3 { display:block; }
.article-toc a { padding-left:12px; min-height:28px; }
.reader-card { padding:22px; background:#f6edcf; border:1px solid var(--line); border-radius:14px; }
.article-wrap .reader-card { display:block; }
.tag-links a { border-radius:999px; background:#f5ebd5; }
.no-script-note { padding-top:70px; color:var(--muted); font-size:12px; }
/* Content is visible by default. Only working observers opt in to reveal motion. */
[data-reveal] { opacity:0; transform:translateY(26px); transition:opacity .75s var(--spring),transform .85s var(--spring); transition-delay:var(--reveal-delay,0ms); }
[data-reveal].is-visible { opacity:1; transform:translateY(0); }
.article-card[data-reveal].is-visible:hover { transform:translateY(-7px) rotate(-.6deg); }
.motion-paused *, .motion-paused *:before, .motion-paused *:after { animation-play-state:paused!important; }
.motion-paused [data-reveal] { opacity:1; transform:none; transition:none; }
.motion-paused .usagi-mascot, .motion-paused .scene-layer { transform:none!important; transition:none; }
.motion-paused .scene-halo { transform:none; }
@keyframes mascot-float { 0%,100% { transform:translateY(0) rotate(-2deg); } 50% { transform:translateY(-13px) rotate(2deg); } }
@keyframes shadow-breathe { 0%,100% { transform:scaleX(1); opacity:1; } 50% { transform:scaleX(.83); opacity:.6; } }
@keyframes note-drift { 0%,100% { transform:translateY(0) rotate(-9deg); } 50% { transform:translateY(-9px) rotate(-5deg); } }
@keyframes book-drift { 0%,100% { transform:translateY(0) rotate(9deg); } 50% { transform:translateY(8px) rotate(5deg); } }
@keyframes spark-turn { 0%,100% { transform:rotate(-12deg) scale(.92); } 50% { transform:rotate(22deg) scale(1.12); } }
@keyframes flower-sway { 0%,100% { transform:rotate(-12deg); } 50% { transform:rotate(20deg); } }
@keyframes scroll-nudge { 0%,100% { transform:translateY(-3px); } 50% { transform:translateY(3px); } }
@media (min-width:1700px) { .hero { min-height:min(680px,70svh); padding-block:80px 45px; } }
@media (max-width:1100px) {
  .hero { min-height:500px; padding-top:45px; gap:16px; }
  .hero h1 { font-size:clamp(40px,5.2vw,62px); letter-spacing:-2px; }
  .hero-copy .eyebrow { font-size:9px; letter-spacing:1px; }
  .hero-feature { grid-template-columns:180px minmax(0,1fr) 120px; gap:22px; }
  .article-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .topic-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .topic-card p { font-size:12px; }
  .floating-note { padding:15px; }
  .code-note code { font-size:9px; }
  .book-note > span { font-size:13px; }
  .scene-spark { font-size:42px; }
  .scene-flower { font-size:56px; }
}
@media (max-width:850px) {
  .hero { grid-template-columns:1fr 1fr; min-height:440px; }
  .hero h1 { font-size:clamp(35px,5vw,43px); }
  .hero-description { font-size:14px; }
  .hero-actions { gap:18px; }
  .hero-actions .button { padding:14px 18px; font-size:12px; min-height:48px; gap:15px; }
  .hero-note { font-size:10px; margin-top:23px; }
  .scene-stamp { font-size:7px; }
  .hero-bottom { font-size:8px; }
  .hero-bottom > span:last-child { display:none; }
  .hero-feature { grid-template-columns:1fr 110px; }
  .feature-label { grid-column:1 / -1; display:flex; justify-content:space-between; }
  .feature-body h2 { font-size:19px; }
  .reading-layout, .article-wrap .reading-layout { display:flex; flex-direction:column; gap:30px; }
  .reading-aside, .article-wrap .reading-aside { position:static; order:-1; width:100%; }
  .article-toc { padding:15px 18px; border:1px solid var(--line); background:#f7efdb; border-radius:12px; }
  .article-toc nav { max-height:200px; }
  .article-toc .toc-level-2, .article-toc .toc-level-3 { display:block; }
  .article-wrap .reader-card { display:none; }
}
@media (max-width:600px) {
  :root { --header-height:68px; }
  .wrap { width:calc(100% - 40px); }
  .header-inner { height:var(--header-height); }
  .identity-avatar { width:31px; height:36px; }
  .mobile-nav:not([hidden]) { background:var(--paper); }
  .mobile-nav [aria-current] { background:#ffedb9; border-radius:8px; }
  .hero { grid-template-columns:1fr; gap:20px; padding-block:40px 30px; min-height:0; }
  .hero h1 { font-size:clamp(36px,9.4vw,55px); margin-top:22px; letter-spacing:-1.8px; }
  .hero-copy .eyebrow { font-size:8px; letter-spacing:1.1px; }
  .hero-description { font-size:14px; margin-top:20px; }
  .hero-actions { margin-top:24px; gap:25px; }
  .hero-actions .button { min-height:50px; padding:14px 22px; }
  .hero-note { margin-top:22px; }
  .usagi-scene { width:min(100%,420px); margin-top:5px; aspect-ratio:1.13; }
  .floating-note { padding:15px; }
  .code-note code { font-size:clamp(8px,2.3vw,11px); }
  .book-note > span { font-size:14px; }
  .scene-caption { bottom:-4%; font-size:10px; }
  .scene-stamp { font-size:8px; }
  .hero-bottom { padding-block:8px 14px; letter-spacing:.8px; }
  .hero-feature { padding-block:24px; gap:15px; grid-template-columns:1fr; }
  .feature-body h2 { font-size:20px; }
  .feature-read { display:flex; justify-content:space-between; padding-top:4px; }
  .intro-strip { padding-block:20px; }
  .intro-strip > div { font-size:11px; gap:10px; }
  .journal-section { padding-block:34px 42px; }
  .section-heading h2 { font-size:28px; }
  .article-grid { grid-template-columns:1fr; gap:18px; }
  .article-card { min-height:0; padding:23px; }
  .article-card:before { margin-bottom:17px; }
  .article-card h3 { font-size:20px; }
  .card-meta { justify-content:space-between; }
  .filter-bar { gap:7px; }
  .filter-bar button { font-size:11px; padding:10px 13px; }
  .journal-bottom { align-items:flex-start; flex-direction:column; gap:10px; }
  .topics-section { padding-block:38px; }
  .topic-grid { gap:12px; }
  .topic-card, .topic-card:first-child, .topic-card:nth-child(3) { padding:18px; }
  .topic-count { position:static; display:block; margin-bottom:12px; font-size:10px; }
  .topic-icon { margin-bottom:14px; width:38px; height:38px; }
  .topic-card h3 { font-size:16px; }
  .topic-card p { padding-right:0; font-size:11px; }
  .topic-arrow { bottom:13px; right:14px; font-size:17px; }
  .about-strip { grid-template-columns:1fr; padding-block:42px; gap:24px; }
  .about-index { display:flex; justify-content:space-between; align-items:center; }
  .about-monogram { font-size:44px; letter-spacing:-3px; margin:0; }
  .about-github { grid-column:auto; }
  .footer-top nav { gap:12px 20px; flex-wrap:wrap; }
  .footer-bottom { gap:13px; }
  .page-heading { padding-block:38px 27px; }
  .collection-grid { grid-template-columns:1fr; }
  .archive-year { grid-template-columns:1fr; gap:15px; }
  .archive-year > div:first-child { display:flex; gap:16px; align-items:center; }
  .archive-row { font-size:13px; padding-block:18px; }
  .article-heading { padding-block:28px; }
  .article-heading h1 { font-size:30px; }
  .prose { font-size:16px; }
  .prose .article-body > h2 { font-size:25px; margin-top:38px; }
  .reading-companion { gap:10px; padding-inline:10px; }
  .reading-companion > div { gap:10px; }
  .reader-progress-track { width:52px; }
  .reader-remaining { padding-left:10px; }
  .reader-progress-label { font-size:10px; }
  .music-dock { right:16px; bottom:16px; }
}
@media (max-width:360px) { .wrap { width:calc(100% - 32px); } .hero h1 { font-size:34px; } .hero-copy .eyebrow { font-size:7px; } .reader-remaining { font-size:10px; } .reading-companion { gap:7px; } }
@media (hover:none) { .article-card:hover, .topic-card:hover, .button:hover { transform:none; } }
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *:before, *:after { animation:none!important; transition:none!important; }
  [data-reveal] { opacity:1; transform:none; }
  .usagi-mascot, .scene-layer, .scene-halo { transform:none!important; }
}
@media print {
  .reading-progress, .reading-companion, .usagi-scene, .hero-bottom { display:none!important; }
  [data-reveal] { opacity:1; transform:none; }
  body[data-page="post"] .article-wrap { padding-top:0; }
  .reading-layout, .article-wrap .reading-layout { display:block; }
  .article-card { box-shadow:none; }
}
/* The author strip leads with the introduction, without a monogram. */
.about-strip { grid-template-columns:minmax(0,1fr) 260px; gap:60px; }
.about-strip h2 { margin-top:12px; }
.about-github { grid-column:auto; }
@media (max-width:600px) { .about-strip { grid-template-columns:1fr; gap:24px; } }
.motion-hidden *, .motion-hidden *:before, .motion-hidden *:after, .scene-asleep *, .scene-asleep *:before, .scene-asleep *:after { animation-play-state:paused!important; }
/* Native cross-document transitions enhance capable browsers without intercepting links. */
@view-transition { navigation:auto; }
::view-transition-old(root) { animation:page-out .2s ease-out both; }
::view-transition-new(root) { animation:page-in .45s var(--spring) both; }
@keyframes page-out { to { opacity:0; transform:translateY(-6px); } }
@keyframes page-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.motion-paused::view-transition-old(root), .motion-paused::view-transition-new(root) { animation:none; }
@media (prefers-reduced-motion:reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation:none; } }
@media (max-height:500px) and (min-width:601px) {
  :root { --header-height:56px; --reading-toolbar-height:36px; }
  .reading-companion > img { width:23px; height:26px; }
  .reading-aside, .article-wrap .reading-aside { top:116px; }
}
/* Context-specific Usagi illustrations: each section gets its own action. */
.usagi-art { display:block; object-fit:contain; height:auto; max-width:100%; }
.mascot-float { inset:3% 15% 2%; }
.usagi-mascot .hero-usagi { width:100%; height:100%; object-fit:contain; }
.layer-code { width:35%; left:-5%; top:32%; }
.layer-book { width:29%; right:-3%; bottom:7%; }
.scene-spark { font-size:45px; }
.scene-flower { font-size:58px; }
.topic-illustration { display:block; height:155px; margin:0 0 22px; }
.topic-usagi { width:170px; height:155px; margin-inline:auto; transition:transform .6s var(--spring); }
.topic-card { padding-top:30px!important; }
.topic-count { position:static; display:block; margin-bottom:12px; }
.topic-card h3 { font-size:18px; }
.topic-card:hover .topic-usagi { transform:translateY(-6px) rotate(-4deg); }
.about-strip { grid-template-columns:170px minmax(0,1fr) 240px; gap:35px; }
.author-usagi { align-self:center; }
.hello-usagi { width:165px; height:170px; }
.footer-note { display:flex; align-items:center; gap:18px; }
.footer-usagi { width:110px; height:100px; flex:0 0 auto; }
.footer-top { align-items:center; }
.reading-state-mark { display:grid; place-items:center; color:var(--accent-dark); width:28px; height:28px; }
.reading-state-mark .icon { width:18px; height:18px; }
.reading-usagi { width:130px; height:125px; margin:0 auto 14px; }
.reading-finish { display:flex; align-items:center; gap:34px; padding:32px 40px; margin-top:28px; border:1px solid var(--line); border-radius:20px; background:#f8efd3; }
.celebrate-usagi { width:150px; height:150px; flex:0 0 auto; }
.reading-finish h2 { font-size:24px; margin-top:8px; line-height:1.5; }
.reading-finish p { font-size:13px; color:var(--muted); line-height:1.9; margin-block:10px; }
@media (max-width:1100px) {
  .topic-illustration { height:145px; }
  .topic-usagi { height:145px; }
  .about-strip { grid-template-columns:130px minmax(0,1fr); gap:25px; }
  .hello-usagi { width:130px; height:145px; }
  .about-github { grid-column:2; }
}
@media (max-width:850px) {
  .layer-code { left:-4%; width:34%; }
  .layer-book { right:-3%; width:29%; }
  .floating-note { padding:12px; }
  .code-note code { font-size:8px; }
  .book-note > span { font-size:12px; }
  .book-note i { font-size:8px; }
  .scene-spark { font-size:34px; }
  .scene-flower { font-size:45px; }
}
@media (max-width:600px) {
  .topic-card, .topic-card:first-child, .topic-card:nth-child(3) { padding:17px!important; }
  .topic-illustration { height:112px; margin-bottom:15px; }
  .topic-usagi { width:125px; height:112px; }
  .topic-card h3 { font-size:15px; }
  .about-strip { grid-template-columns:95px minmax(0,1fr); gap:18px; }
  .hello-usagi { width:95px; height:120px; }
  .about-strip h2 { font-size:23px; }
  .about-strip .eyebrow { font-size:9px; }
  .about-github { grid-column:1 / -1; max-width:none; }
  .footer-top { gap:24px; }
  .footer-note { gap:14px; }
  .footer-usagi { width:88px; height:78px; }
  .layer-code { width:37%; left:-3%; }
  .layer-book { width:31%; right:-2%; }
  .reading-finish { flex-direction:column; text-align:center; gap:15px; padding:25px 22px; }
  .reading-finish .text-link { justify-content:center; }
  .celebrate-usagi { width:125px; height:125px; }
  .reading-finish h2 { font-size:23px; }
}
@media (prefers-reduced-motion:reduce) { .topic-card:hover .topic-usagi { transform:none; } }
.motion-paused .topic-card:hover .topic-usagi { transform:none; }
@media print { .author-usagi, .reading-finish { display:none!important; } }

/* Local, subsetted handwriting for the two requested brand signatures. */
.identity .brand-wordmark, .identity .brand-motto {
  font-family:"Notebook WenKai","Kaiti TC","KaiTi",serif;
  font-weight:400; font-synthesis:none; color:var(--ink);
}
.brand-wordmark span, .brand-motto span { margin-top:0; font-weight:inherit; color:inherit; }
.identity .brand-wordmark { display:inline-flex; align-items:baseline; gap:2px; line-height:1; white-space:nowrap; }
.brand-wordmark .brand-lead, .brand-wordmark .brand-tail { font-size:24px; letter-spacing:2px; }
.identity .brand-emphasis { position:relative; display:inline-block; font-weight:700; color:var(--accent-dark); isolation:isolate; }
.brand-wordmark .brand-emphasis { font-size:38px; line-height:1.05; margin-inline:1px; transform:rotate(-5deg); }
.brand-emphasis:after { content:""; position:absolute; z-index:-1; left:5%; right:-4%; bottom:5%; height:12%; background:#edbc4d75; border-radius:75% 25% 60% 35%; transform:rotate(-7deg); }
.footer-brand { flex:none; align-self:center; width:fit-content; }
.identity .brand-motto { display:flex; flex-wrap:wrap; align-items:baseline; gap:12px 18px; padding:4px 0 12px; }
.brand-motto .motto-line { display:flex; align-items:baseline; gap:6px; white-space:nowrap; }
.brand-motto .brand-emphasis { font-size:60px; line-height:1; transform:rotate(-4deg); }
.brand-motto .motto-words { font-size:29px; letter-spacing:3px; line-height:1.2; }
.brand-motto .motto-comma { display:inline; font-size:21px; letter-spacing:0; margin-left:-3px; }
.site-footer .footer-top { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:26px 40px; padding-block:54px 28px; }
.site-footer .footer-note { justify-self:end; gap:20px; }
.site-footer .footer-top nav { grid-column:1/-1; display:flex; justify-content:flex-start; flex-wrap:wrap; gap:14px 32px; border-top:1px solid var(--line); padding-top:24px; margin-top:4px; }
.site-footer .footer-top nav a { padding-block:5px; }
.site-footer .footer-top nav .footer-contact { display:inline-flex; align-items:center; gap:17px; font-size:21px; width:fit-content; }
.contact-letter { display:block; width:88px; height:66px; transition:transform .45s var(--spring); }
.footer-contact:hover .contact-letter { transform:translateY(-4px) rotate(-4deg); }
@media (prefers-reduced-motion:reduce) { .contact-letter { transition:none; } .footer-contact:hover .contact-letter { transform:none; } }
@media (max-width:1100px) {
  .identity .brand-motto { display:grid; gap:9px; }
  .brand-motto .motto-line:last-child { padding-left:12px; }
  .brand-motto .brand-emphasis { font-size:52px; }
  .brand-motto .motto-words { font-size:27px; }
}
@media (max-width:600px) {
  .site-header .identity { gap:9px; }
  .brand-wordmark .brand-lead, .brand-wordmark .brand-tail { font-size:21px; letter-spacing:1px; }
  .brand-wordmark .brand-emphasis { font-size:34px; }
  .brand-motto .brand-emphasis { font-size:44px; }
  .brand-motto .motto-words { font-size:23px; letter-spacing:2px; }
  .site-footer .footer-top { grid-template-columns:1fr; gap:24px; padding-block:36px 23px; }
  .site-footer .footer-note { justify-self:start; gap:16px; }
  .site-footer .footer-top nav { display:flex; padding-top:19px; margin-top:0; }
  .contact-letter { width:76px; height:57px; }
  .site-footer .footer-top nav .footer-contact { gap:14px; font-size:20px; }
}

/* Latest writing is a paper note; the journal totals live in their own index. */
.notebook-highlights { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:24px; padding-block:42px 8px; align-items:stretch; }
.featured-note { position:relative; background:var(--surface); border:1px solid var(--line); border-radius:8px 32px 8px 8px; padding:32px 36px 28px; box-shadow:0 6px 0 -2px #f3ecde,0 12px 28px #57432606; }
.featured-note:before { content:""; position:absolute; top:-7px; left:34px; width:66px; height:15px; background:#ecd29c8c; transform:rotate(-4deg); clip-path:polygon(3% 0,97% 0,100% 80%,96% 100%,2% 94%,0 13%); }
.featured-note:after { content:""; position:absolute; top:-1px; right:-1px; width:32px; height:32px; background:linear-gradient(225deg,var(--paper) 48%,#e8dfce 49%,#f2e8d3 54%); border-bottom-left-radius:8px; pointer-events:none; }
.note-kicker { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding-right:10px; }
.latest-label { display:inline-flex; align-items:center; gap:7px; padding:5px 10px; background:#fff0c7; border-radius:5px; color:var(--accent-dark); font-size:12px; font-weight:650; letter-spacing:1px; }
.note-topic { font-size:12px; color:var(--muted); }
.featured-note h2 { max-width:28em; font-size:clamp(24px,2.2vw,31px); line-height:1.5; letter-spacing:-.6px; margin-top:19px; }
.featured-note h2 a:hover { color:var(--accent-dark); }
.note-excerpt { color:var(--muted); font-size:14px; line-height:1.9; margin-top:13px; max-width:52em; }
.note-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px; margin-top:24px; padding-top:19px; border-top:1px dashed #dbceb5; }
.note-meta { display:flex; flex-wrap:wrap; gap:5px 14px; color:var(--muted); font-size:11px; }
.note-meta time { font-family:var(--mono); }
.note-read { display:inline-flex; align-items:center; gap:20px; min-height:44px; padding:11px 17px; background:#ffe5a0; border:1px solid #e8ca7d; border-radius:7px; font-size:13px; font-weight:650; transition:background .25s; }
.note-read:hover { background:#ffdc7e; }
.note-read > span, .index-archive > span { transition:transform .3s var(--spring); }
.note-read:hover > span, .index-archive:hover > span { transform:translate(2px,-2px); }
.notebook-index { display:flex; flex-direction:column; padding:28px; background:#eef0e5; border:1px solid #dfe3d2; border-radius:8px; }
.index-heading { display:flex; align-items:center; gap:12px; }
.index-book { display:grid; place-content:center; width:42px; height:42px; border:1px solid #cbd4b8; border-radius:50%; color:#617652; }
.index-book .icon { width:22px; height:22px; }
.index-heading h3 { font-size:18px; font-weight:650; line-height:1.5; letter-spacing:1px; }
.index-heading p { font-size:10px; color:var(--muted); line-height:1.7; margin-top:4px; }
.notebook-stats { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:29px 0 25px; }
.notebook-stats > div { display:flex; flex-direction:column-reverse; gap:6px; }
.notebook-stats dd { font-family:var(--mono); font-size:31px; line-height:1.2; color:#53634a; margin:0; letter-spacing:-1px; }
.notebook-stats dt { font-size:11px; color:var(--muted); }
.index-archive { display:flex; justify-content:space-between; align-items:center; min-height:44px; margin-top:auto; padding-top:14px; border-top:1px solid #ced7bf; font-size:12px; color:#53634a; }
@media (max-width:1000px) {
  .notebook-highlights { grid-template-columns:minmax(0,1fr) 250px; gap:18px; }
  .featured-note { padding:27px 25px 24px; }
  .notebook-index { padding:25px 22px; }
}
@media (max-width:760px) {
  .notebook-highlights { grid-template-columns:1fr; gap:20px; padding-block:32px 4px; }
  .notebook-index { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:17px 24px; padding:22px 25px; }
  .notebook-stats { margin:0; gap:24px; }
  .notebook-stats dd { font-size:27px; }
  .index-archive { grid-column:1/-1; width:100%; padding-top:13px; }
}
@media (max-width:420px) {
  .featured-note { padding:26px 20px 22px; }
  .featured-note h2 { font-size:23px; line-height:1.55; }
  .note-excerpt { font-size:12px; }
  .note-bottom { display:grid; gap:14px; }
  .note-read { width:100%; justify-content:space-between; }
  .notebook-index { padding:22px 20px; gap:20px; }
  .index-heading { grid-column:1/-1; }
  .notebook-stats { grid-column:1/-1; gap:20px; }
  .notebook-stats > div { flex-direction:row-reverse; justify-content:flex-end; align-items:baseline; gap:9px; }
  .notebook-stats dd { font-size:29px; }
}

/* One compact record icon opens the optional playback controls. */
.music-dock { width:52px; max-width:calc(100vw - 32px); border:0; border-radius:0; background:transparent; box-shadow:none; left:24px; right:auto; bottom:20px; z-index:110; }
.music-toolbar { display:block; min-height:0; padding:0; }
.music-toolbar .music-toggle { display:grid; place-items:center; width:52px; height:52px; min-height:52px; padding:0; border:1px solid #d9cbb5; border-radius:50%; background:#fffdf7f5; box-shadow:0 4px 18px #45332313; position:relative; transition:background .25s,box-shadow .25s; }
.music-toggle:hover { background:#fff3d6; box-shadow:0 4px 20px #45332320; }
.music-badge { display:block; width:38px; height:38px; }
.music-disc { transform-origin:24px 24px; animation:record-turn 5s linear infinite; animation-play-state:paused; }
.music-bars { opacity:0; transition:opacity .2s; }
.music-bar { transform-origin:center 42px; animation:music-beat .85s ease-in-out infinite alternate; animation-play-state:paused; }
.bar-two { animation-delay:-.4s; animation-duration:.7s; }
.bar-three { animation-delay:-.2s; animation-duration:1s; }
.music-dock[data-state="playing"] .music-disc, .music-dock[data-state="playing"] .music-bar { animation-play-state:running; }
.music-dock[data-state="playing"] .music-bars { opacity:1; }
.music-dock[data-state="playing"] .music-toggle { border-color:#d4b66a; background:#fff6de; }
.music-dock[data-state="loading"] .music-toggle:after { content:""; position:absolute; inset:3px; border:1.5px solid transparent; border-top-color:#ae8431; border-radius:50%; animation:record-turn 1.1s linear infinite; }
.music-dock[data-state="error"] .music-toggle, .music-dock[data-state="unavailable"] .music-toggle { border-color:#b99479; }
.music-panel { position:absolute; left:0; right:auto; bottom:calc(100% + 12px); width:280px; max-width:calc(100vw - 32px); background:#fffdf8; border:1px solid var(--line); border-radius:14px; box-shadow:0 10px 40px #4533231a; overflow:hidden; animation:music-panel-in .2s var(--spring); }
.music-panel-head { display:flex; align-items:center; gap:8px; padding:5px 9px 0 0; }
.music-panel-head .music-status { flex:1; }
.music-panel-head .music-play { flex:none; width:40px; height:40px; border:0; border-radius:50%; background:#fff0c9; }
.music-panel-head .music-play:hover { background:#ffe3a0; }
.music-panel .music-track button { width:100%; min-width:0; }
.music-panel .music-track span { overflow-wrap:anywhere; }
.music-panel .music-volume { white-space:nowrap; }
.music-panel .music-volume input { flex:1; width:auto; min-width:0; }
@keyframes record-turn { to { transform:rotate(360deg); } }
@keyframes music-beat { from { transform:scaleY(.35); } to { transform:scaleY(1); } }
@keyframes music-panel-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
.back-top { right:24px; bottom:20px; }
@media (max-width:600px) {
  .music-dock { left:16px; right:auto; bottom:16px; width:48px; }
  .music-toolbar .music-toggle { width:48px; height:48px; min-height:48px; }
  .music-badge { width:35px; height:35px; }
  .back-top { right:16px; bottom:16px; }
}
@media (prefers-reduced-motion:reduce) { .music-disc,.music-bar,.music-panel,.music-dock[data-state="loading"] .music-toggle:after { animation:none; } }
@media print { .music-dock { display:none!important; } }

/* Footer contact is a restrained utility link within the metadata row. */
.site-footer .footer-top { padding-block:38px 28px; gap:24px 40px; }
.site-footer .footer-bottom { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:20px; padding-block:22px 82px; }
.footer-meta { display:grid; gap:7px; color:var(--muted); font-size:10px; line-height:1.6; }
.footer-meta > span:first-child { font-size:11px; }
.footer-actions { display:flex; align-items:center; flex-wrap:wrap; gap:22px; }
.footer-actions nav { display:block; }
.footer-actions .footer-contact { display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:6px 11px; border:1px solid #d8cbb4; border-radius:6px; font-size:13px; color:var(--ink); background:#fffaf044; transition:background .2s,border-color .2s; }
.footer-actions .contact-letter { width:20px; height:20px; transition:none; }
.footer-actions .footer-contact:hover { background:#fffaf0; border-color:#b9a27a; }
.footer-actions .footer-contact:hover .contact-letter { transform:none; background:transparent; }
.footer-platform { font-size:10px; color:var(--muted); }
.link-chevron { display:inline-block; width:16px; height:16px; vertical-align:middle; flex:none; }
.footer-platform { display:inline-flex; align-items:center; gap:6px; }
@media (max-width:760px) {
  .site-footer .footer-bottom { grid-template-columns:1fr; gap:18px; }
  .footer-actions { justify-content:space-between; gap:14px; }
}
@media (max-width:600px) {
  .site-footer .footer-top { gap:20px; padding-block:30px 24px; }
  .site-footer .footer-bottom { padding-bottom:82px; }
}

/* One shared heading, followed by two straightforward directories. */
.contact-section { display:block; margin-block:40px 48px; padding:34px clamp(20px,3vw,40px); background:var(--surface); border:1px solid var(--line); border-radius:14px; }
.contact-intro { margin:0 0 27px; padding:0 0 25px; border-bottom:1px solid var(--line); }
.contact-intro .eyebrow { font-size:11px; letter-spacing:1.5px; }
.contact-intro h2 { font-size:clamp(25px,2.4vw,32px); line-height:1.5; margin:8px 0 10px; }
.contact-intro p { font-size:13px; line-height:1.9; color:var(--muted); max-width:42em; }
.contact-directory { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px; }
.contact-directory > section { min-width:0; }
.contact-directory h3 { font-size:17px; font-weight:650; line-height:1.5; margin:0 0 15px; }
.line-communities { border-left:1px solid var(--line); padding-left:32px; }
.contact-links a,.community-card { display:flex; align-items:center; gap:12px; min-height:76px; padding:13px 0; border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; transition:background .2s; }
.contact-links a:last-child,.community-card:last-child { border-bottom:0; }
.contact-links a:hover,.community-card:hover { background:#f8f8f0; }
.contact-links .contact-icon,.community-mark { display:grid; place-content:center; width:36px; height:36px; flex:none; border-radius:7px; }
.contact-links .contact-icon { color:#7b6848; background:#f2ecdf; }
.contact-icon .icon { width:18px; height:18px; }
.contact-copy { display:grid; gap:4px; flex:1; min-width:0; }
.contact-links .contact-label { font-size:14px; font-weight:600; line-height:1.5; }
.contact-links .contact-value { display:block; font-size:12px; line-height:1.6; color:var(--muted); overflow-wrap:anywhere; }
.contact-links a > .icon,.community-card > .icon { width:17px; height:17px; flex:none; margin-left:auto; color:var(--muted); }
.community-grid { display:grid; grid-template-columns:1fr; }
.community-mark { font:600 13px var(--mono); letter-spacing:-.5px; }
.tone-python { background:#e7ecdc; color:#586d43; }
.tone-csharp { background:#ece5f0; color:#756180; }
.tone-cpp { background:#e4ebf0; color:#567287; font-size:11px; }
.tone-java { background:#f2e8d8; color:#97713e; font-size:11px; }
.community-name { font-size:14px; font-weight:500; line-height:1.6; min-width:0; }
@media (max-width:900px) {
  .contact-directory { grid-template-columns:1fr; gap:25px; }
  .line-communities { border-left:0; padding-left:0; border-top:1px solid var(--line); padding-top:25px; }
}
@media (max-width:420px) {
  .contact-section { margin-block:25px 35px; padding:25px 18px; }
  .contact-directory h3 { font-size:16px; }
  .contact-intro p { font-size:12px; }
  .contact-links a,.community-card { gap:10px; min-height:72px; }
  .community-name { font-size:13px; }
}

/* A single scene bridges the introduction and opening story. */
.about-opening { position:relative; }
.about-opening .about-intro { padding-block:35px 110px; align-items:start; }
.about-opening .about-intro-copy { padding-top:8px; }
.about-opening .about-story { width:60%; max-width:790px; padding-block:40px 45px; border-top:1px solid var(--line); }
.about-opening .about-story h2 { font-size:30px; line-height:1.5; letter-spacing:-.8px; margin:0 0 20px; }
.about-opening .about-story p { font-size:15px; line-height:2; color:var(--muted); }
.about-usagi-stage { position:absolute; right:0; bottom:22px; width:37%; max-width:460px; aspect-ratio:1; isolation:isolate; overflow:clip; }
.about-usagi-glow { position:absolute; inset:14%; border-radius:50%; background:radial-gradient(circle,#fae8a8 0%,#f8efcf 58%,#f8efcf00 74%); opacity:.8; }
.about-usagi-orbit,.about-usagi-stars { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.about-usagi-orbit { color:#c4ab74; animation:about-orbit-turn 42s linear infinite; }
.about-usagi-stars { animation:about-star-glimmer 5s ease-in-out infinite; }
.about-usagi-bob { position:absolute; inset:10% 13% 16%; z-index:2; animation:about-usagi-bob 5.5s ease-in-out infinite; }
.about-usagi-character { display:block; width:100%; height:100%; border:0; padding:0; background:transparent; border-radius:45%; cursor:pointer; }
.about-usagi-character:focus-visible { outline:2px solid var(--accent); outline-offset:8px; }
.about-coding-usagi { width:100%; height:100%; object-fit:contain; display:block; }
.about-usagi-chip { position:absolute; display:grid; place-items:center; width:50px; height:50px; border:1px solid #d7cba9; border-radius:15px; background:#fffcf3; color:#907441; box-shadow:0 8px 24px #6c512d0a; animation:about-chip-drift 6s ease-in-out infinite; z-index:3; }
.about-usagi-chip .icon { width:24px; height:24px; }
.chip-code { left:3%; top:35%; transform:rotate(-12deg); }
.chip-book { right:5%; bottom:24%; background:#e9eedf; color:#6d7f58; border-color:#d6dfc6; animation-delay:-3s; }
.about-usagi-ground { position:absolute; left:31%; right:31%; bottom:15%; height:12px; border-radius:50%; background:#a5916922; filter:blur(3px); animation:about-ground-breathe 5.5s ease-in-out infinite; }
.about-usagi-caption { position:absolute; bottom:2%; width:100%; text-align:center; font-family:var(--font); font-size:16px; letter-spacing:1px; color:#8a7856; margin:0; }
.about-usagi-message { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@keyframes about-usagi-bob { 0%,100% { transform:translateY(0) rotate(-2deg); } 50% { transform:translateY(-12px) rotate(2deg); } }
@keyframes about-orbit-turn { to { transform:rotate(360deg); } }
@keyframes about-chip-drift { 0%,100% { translate:0 0; rotate:-8deg; } 50% { translate:0 -10px; rotate:6deg; } }
@keyframes about-star-glimmer { 0%,100% { opacity:.55; scale:.97; } 50% { opacity:1; scale:1.03; } }
@keyframes about-ground-breathe { 0%,100% { scale:1; opacity:1; } 50% { scale:.8; opacity:.55; } }
@media (max-width:1100px) and (min-width:901px) {
  .about-opening .about-intro { grid-template-columns:260px 1fr; gap:35px; padding-bottom:110px; }
  .about-opening .about-story { width:58%; }
  .about-usagi-stage { width:39%; }
}
@media (max-width:900px) {
  .about-opening { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr); column-gap:28px; }
  .about-opening .about-intro { grid-column:1/-1; padding-bottom:32px; }
  .about-opening .about-story { width:auto; max-width:none; padding-block:32px; }
  .about-opening .about-story h2 { font-size:26px; }
  .about-usagi-stage { position:relative; right:auto; bottom:auto; width:100%; align-self:center; }
  .about-usagi-chip { width:40px; height:40px; border-radius:12px; }
}
@media (max-width:650px) {
  .about-opening { display:block; }
  .about-opening .about-intro { gap:25px; padding-block:25px 32px; }
  .about-opening .about-story { padding-block:28px 12px; }
  .about-opening .about-story h2 { font-size:26px; }
  .about-opening .about-story p { font-size:14px; }
  .about-usagi-stage { width:min(100%,350px); margin:12px auto 25px; }
  .about-usagi-caption { font-size:15px; }
}
@media print { .about-usagi-stage { display:none; } .about-opening .about-story { width:100%; } }

/* Each index has its own illustrated introduction and motion rhythm. */
.heading-with-usagi { position:relative; }
.heading-with-usagi > h1,.heading-with-usagi > p { width:fit-content; max-width:100%; }
.index-usagi-scene { position:absolute; right:0; top:50%; translate:0 -50%; width:190px; height:172px; isolation:isolate; overflow:clip; }
.index-scene-glow { position:absolute; inset:12% 8% 5%; border-radius:50%; background:radial-gradient(ellipse,#f7e6ad80,transparent 72%); }
.scene-topics .index-scene-glow { background:radial-gradient(ellipse,#e4ebd7a8,transparent 72%); }
.index-character-motion { position:absolute; inset:2% 9% 5%; z-index:2; transform-origin:50% 85%; }
.index-usagi-character { display:block; width:100%; height:100%; border:0; background:transparent; padding:0; border-radius:45%; cursor:pointer; }
.index-usagi-character:focus-visible { outline:2px solid var(--accent-dark); outline-offset:-3px; }
.index-usagi-art { display:block; width:100%; height:100%; object-fit:contain; }
.scene-topics .index-character-motion { animation:curator-sway 4.5s ease-in-out infinite; }
.scene-writing .index-character-motion { animation:writer-nod 5s ease-in-out infinite; }
.index-scene-shadow { position:absolute; left:31%; right:24%; bottom:6%; height:10px; background:#957f4921; border-radius:50%; filter:blur(4px); animation:index-shadow 5s ease-in-out infinite; }
.index-card { position:absolute; z-index:3; width:25px; height:32px; border-radius:4px; border:1px solid #c3ceb6; background:#f4f7ee; padding:10px 5px; box-shadow:0 5px 12px #6b633412; }
.index-card:before { content:""; position:absolute; top:-3px; left:4px; width:12px; height:6px; border-radius:3px 3px 0 0; background:#bbcbaa; }
.index-card i,.index-paper i { display:block; height:2px; background:currentColor; border-radius:2px; opacity:.45; margin-bottom:7px; }
.card-sage { left:4%; top:37%; color:#7d9270; animation:sort-card-left 5s ease-in-out infinite; }
.card-rose { right:3%; top:21%; color:#b7887e; border-color:#e2c9bf; background:#fff4ed; animation:sort-card-right 5s ease-in-out -2.5s infinite; }
.card-rose:before { background:#e6bfb3; }
.index-tab { position:absolute; left:18%; top:14%; width:12px; height:6px; border:1px solid #bccaaa; background:#e0e9cf; border-radius:3px; rotate:-18deg; animation:index-spark 4s ease-in-out infinite; }
.index-star { position:absolute; color:#c7a453; pointer-events:none; z-index:3; animation:index-spark 4s ease-in-out infinite; }
.star-one { left:12%; top:20%; font-size:19px; }
.star-two { right:8%; bottom:24%; font-size:27px; animation-delay:-2s; }
.scene-topics .star-one { top:67%; color:#91a77d; }
.index-ink { position:absolute; inset:0; width:100%; height:100%; z-index:3; pointer-events:none; color:#b69753; }
.ink-line { stroke-dasharray:110; animation:journal-ink 5.5s ease-in-out infinite; }
.ink-underline { stroke-dasharray:80; animation:journal-ink 5.5s ease-in-out -1s infinite; }
.index-paper { position:absolute; right:4%; top:52%; width:24px; height:31px; border:1px solid #e1d2b4; border-radius:4px; background:#fffcf1; padding:9px 4px; color:#b8995f; animation:journal-paper 6s ease-in-out infinite; z-index:3; }
.index-paper i { margin-bottom:5px; }
.index-usagi-message { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@keyframes curator-sway { 0%,100% { transform:rotate(-2deg) translateY(0); } 50% { transform:rotate(2deg) translateY(-7px); } }
@keyframes writer-nod { 0%,100% { transform:translateY(0) rotate(0); } 35% { transform:translateY(4px) rotate(-1.5deg); } 65% { transform:translateY(-4px) rotate(1deg); } }
@keyframes sort-card-left { 0%,100% { transform:translate(0,0) rotate(-14deg); } 50% { transform:translate(10px,-15px) rotate(-4deg); } }
@keyframes sort-card-right { 0%,100% { transform:translate(0,0) rotate(12deg); } 50% { transform:translate(-9px,13px) rotate(3deg); } }
@keyframes journal-ink { 0%,10% { stroke-dashoffset:110; opacity:0; } 45%,75% { stroke-dashoffset:0; opacity:.8; } 100% { stroke-dashoffset:0; opacity:0; } }
@keyframes journal-paper { 0%,100% { transform:translateY(0) rotate(9deg); } 50% { transform:translateY(-9px) rotate(-2deg); } }
@keyframes index-spark { 0%,100% { opacity:.35; transform:scale(.8); } 50% { opacity:1; transform:scale(1); } }
@keyframes index-shadow { 0%,100% { opacity:.8; scale:1; } 50% { opacity:.5; scale:.85; } }
@media (max-width:1100px) {
  .index-usagi-scene { width:155px; height:145px; }
  .index-card { width:25px; height:32px; padding:10px 5px; }
  .index-card:before { width:12px; height:6px; top:-3px; }
  .index-paper { width:24px; height:31px; padding:9px 4px; }
  .index-star { font-size:14px; }
}
@media (max-width:750px) {
  .index-usagi-scene { width:125px; height:120px; }
  .index-card { width:20px; height:27px; padding:8px 4px; }
  .index-card:before { width:9px; }
  .index-paper { width:20px; height:27px; padding:8px 4px; }
  .index-card i,.index-paper i { height:1px; margin-bottom:4px; }
  .index-tab { width:12px; height:6px; }
}
@media (max-width:650px) {
  .index-usagi-scene { top:1px; translate:0 0; width:64px; height:60px; }
  .index-character-motion { inset:9% 9%; }
  .index-card { width:12px; height:16px; padding:5px 2px; border-radius:2px; }
  .index-card:before { width:6px; height:3px; top:-2px; left:2px; }
  .index-card i,.index-paper i { height:1px; margin-bottom:2px; }
  .index-paper { width:12px; height:16px; padding:5px 2px; border-radius:2px; }
  .index-tab { width:7px; height:4px; }
  .index-star { font-size:7px; }
  .star-two { font-size:10px; }
  .index-scene-shadow { height:4px; filter:blur(1px); }
}
@media print { .index-usagi-scene { display:none; } }

/* Plain text category blocks; names and counts come from content metadata. */
.category-directory { padding-block:30px 64px; }
.category-directory-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.category-tile { display:flex; flex-direction:column; min-width:0; min-height:148px; padding:25px 26px; background:#fffdf9; border:1px solid #e5dccb; border-radius:10px; transition:background .25s,border-color .25s,transform .3s var(--spring); }
.category-tile h2 { font-size:18px; line-height:1.65; font-weight:600; letter-spacing:-.2px; margin:0 0 19px; overflow-wrap:anywhere; }
.category-tile h2 > span { display:block; }
.category-tile h2 > span + span { margin-top:2px; }
.category-tile p { margin: auto 0 0; font-size:12px; line-height:1.8; color:var(--muted); }
.category-tile p strong { font:500 14px var(--mono); margin-right:3px; color:var(--ink); }
.category-tile:hover { background:#f9f4e8; border-color:#b9a785; transform:translateY(-2px); }
@media (max-width:1050px) { .category-directory-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) {
  .category-directory { padding-block:24px 42px; }
  .category-directory-grid { grid-template-columns:1fr; gap:12px; }
  .category-tile { min-height:112px; padding:20px 22px; border-radius:9px; }
  .category-tile h2 { font-size:17px; margin-bottom:12px; }
  .category-tile p { font-size:11px; }
}
@media (prefers-reduced-motion:reduce) { .category-tile { transition:none; } .category-tile:hover { transform:none; } }

/* Personal identity and three distinct academic milestones. */
.about-profile-heading { display:grid; grid-template-columns:minmax(250px,.9fr) minmax(0,2fr); gap:clamp(30px,4vw,60px); align-items:center; padding-block:50px 40px; border-bottom:1px solid var(--line); }
.profile-heading-copy { min-width:0; }
.profile-heading-copy > .eyebrow { display:block; font-size:9px; line-height:1.8; letter-spacing:1.4px; }
.profile-heading-copy h1 { font-size:clamp(38px,4.2vw,54px); line-height:1.4; letter-spacing:-1.4px; margin:17px 0 20px; font-weight:700; }
.profile-heading-copy > p { font-size:14px; line-height:1.9; color:var(--muted); margin:0; }
.education-summary { min-width:0; }
.education-summary-heading { display:flex; align-items:baseline; gap:14px; margin-bottom:22px; }
.education-summary-heading .eyebrow { order:2; font-size:9px; letter-spacing:1.4px; color:#958774; }
.education-summary-heading h2 { font-size:18px; line-height:1.5; font-weight:600; margin:0; }
.education-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; list-style:none; padding:0; margin:0; }
.education-entry { min-width:0; padding-right:20px; }
.education-entry + .education-entry { padding-left:20px; border-left:1px solid var(--line); }
.education-entry:last-child { padding-right:0; }
.education-illustration { display:block; width:64px; height:64px; margin-bottom:15px; }
.education-illustration img { display:block; width:100%; height:100%; }
.education-entry-copy { min-width:0; }
.education-degree { display:flex; gap:10px; align-items:center; margin-bottom:12px; }
.education-degree h3 { font-size:16px; line-height:1.5; font-weight:650; margin:0; }
.education-status { display:inline-flex; align-items:center; min-height:22px; padding:2px 7px; border-radius:4px; font-size:10px; line-height:1.4; color:#8c806c; background:#f1ecdf; white-space:nowrap; }
.education-status.status-current { color:#586e42; background:#e7eddb; }
.education-status.status-current:before { content:""; width:4px; height:4px; border-radius:50%; background:#839a61; margin-right:5px; }
.education-university { font-size:14px; font-weight:550; line-height:1.8; margin:0 0 3px; }
.education-program { color:var(--muted); font-size:12px; line-height:1.8; margin:0; }
@media (max-width:1100px) {
  .about-profile-heading { grid-template-columns:240px minmax(0,1fr); gap:30px; }
  .education-entry { padding-right:14px; }
  .education-entry + .education-entry { padding-left:14px; }
  .education-university { font-size:13px; }
  .education-program { font-size:11px; }
}
@media (max-width:900px) {
  .about-profile-heading { grid-template-columns:1fr; gap:30px; padding-block:35px; }
  .profile-heading-copy > .eyebrow { font-size:9px; }
  .profile-heading-copy h1 { font-size:38px; margin-block:12px 14px; }
  .education-summary { border-top:1px solid var(--line); padding-top:24px; }
  .education-university { min-height:0; font-size:14px; }
}
@media (max-width:650px) {
  .about-profile-heading { gap:25px; padding-block:30px; }
  .profile-heading-copy > .eyebrow { font-size:8px; letter-spacing:1px; }
  .profile-heading-copy h1 { font-size:34px; }
  .profile-heading-copy > p { font-size:12px; }
  .education-summary-heading { margin-bottom:9px; gap:12px; }
  .education-summary-heading h2 { font-size:17px; }
  .education-summary-heading .eyebrow { font-size:8px; }
  .education-list { grid-template-columns:1fr; }
  .education-entry,.education-entry + .education-entry { display:flex; align-items:center; gap:15px; padding:17px 0; border-left:0; }
  .education-entry + .education-entry { border-top:1px solid var(--line); }
  .education-entry:last-child { padding-bottom:0; }
  .education-illustration { width:54px; height:54px; margin:0; flex:none; }
  .education-degree { margin-bottom:5px; gap:9px; }
  .education-degree h3 { font-size:14px; }
  .education-status { font-size:9px; min-height:20px; }
  .education-university { font-size:14px; margin-bottom:1px; line-height:1.6; }
  .education-program { font-size:12px; }
}

/* Compact navigation sits above the article without changing its reading offset. */
@media (max-width:760px) {
  .mobile-nav:not([hidden]) { position:absolute; top:100%; left:20px; right:20px; display:block; padding:22px; max-height:calc(100dvh - var(--header-height) - 24px); overflow:auto; overscroll-behavior:contain; border:1px solid var(--line); border-radius:0 0 18px 18px; background:var(--surface); box-shadow:0 18px 48px #3b302824; animation:nav-enter .24s var(--spring); }
  .mobile-nav-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:0 0 16px; color:var(--muted); font-size:11px; letter-spacing:1px; }
  .mobile-nav-heading small { font-size:8px; letter-spacing:1px; }
  .mobile-nav-primary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .mobile-nav-primary a { display:flex; flex-direction:column; justify-content:center; gap:5px; min-height:74px; padding:13px 15px; border:1px solid transparent; border-radius:10px; background:#f6f1e7; font-size:15px; font-weight:600; transition:background .2s,border-color .2s; }
  .mobile-nav-primary small { color:var(--muted); font-size:10px; font-weight:400; }
  .mobile-nav a:hover { background:#f9edcc; }
  .mobile-nav-primary a[aria-current] { background:#f9edcc; border-color:#e6c97f; border-radius:10px; }
  .mobile-nav-secondary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:16px; padding-top:12px; border-top:1px solid var(--line); }
  .mobile-nav-secondary a { display:flex; align-items:center; justify-content:center; min-height:44px; padding:8px; font-size:12px; border-radius:8px; }
  .mobile-nav-secondary [aria-current] { color:var(--accent-dark); background:#f9edcc; }
  .menu-toggle { width:40px; height:40px; position:relative; }
  .menu-toggle[aria-expanded="true"] { background:#f9edcc; }
  .menu-toggle[aria-expanded="true"] .icon { visibility:hidden; }
  .menu-toggle[aria-expanded="true"]:before,.menu-toggle[aria-expanded="true"]:after { content:""; position:absolute; left:50%; top:50%; width:18px; height:2px; border-radius:2px; background:var(--ink); transform:translate(-50%,-50%) rotate(45deg); }
  .menu-toggle[aria-expanded="true"]:after { transform:translate(-50%,-50%) rotate(-45deg); }
  .menu-toggle:focus-visible { outline:2px solid var(--accent-dark); outline-offset:3px; }
}
@keyframes nav-enter { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:reduce) { .mobile-nav:not([hidden]) { animation:none; } }

/* Topic links end in a readable label instead of a diagonal arrow. */
.topic-card { display:flex; flex-direction:column; }
.topic-card p { flex:1; margin-bottom:18px; }
.topic-action { align-self:flex-start; padding:6px 12px; border:1px solid #dfd2b9; border-radius:999px; color:var(--accent-dark); font-size:11px; line-height:1.5; transition:background .2s,border-color .2s; }
.topic-card:hover .topic-action { background:#ffe8a3; border-color:#d9b451; }

/* Balance the motto and the notebook signature across the footer. */
.site-footer .footer-top { grid-template-columns:minmax(0,1fr) minmax(180px,auto); gap:24px; }
.identity .brand-motto { display:grid; gap:9px; padding:4px 0 8px; }
.brand-motto .motto-line:last-child { padding-left:12px; }
.brand-motto .motto-period { display:inline; font-size:inherit; letter-spacing:0; }
.site-footer .footer-note { justify-self:end; padding-left:24px; border-left:1px solid #dfd5bf; }
@media (max-width:760px) {
  .site-footer .footer-top { grid-template-columns:minmax(0,1fr) minmax(140px,auto); gap:20px; }
  .brand-motto .brand-emphasis { font-size:clamp(34px,6vw,44px); }
  .brand-motto .motto-words { font-size:clamp(17px,3.2vw,22px); letter-spacing:.5px; }
  .site-footer .footer-note { flex-direction:column; align-items:flex-start; gap:10px; padding-left:22px; }
  .footer-note .footer-usagi { width:82px; height:74px; }
  .site-footer .footer-note p { font-size:12px; }
  .site-footer .footer-note p span { font-size:10px; }
}
@media (max-width:480px) {
  .site-footer .footer-top { grid-template-columns:minmax(0,1fr) 125px; gap:12px; }
  .brand-motto .brand-emphasis { font-size:34px; }
  .brand-motto .motto-words { font-size:17px; letter-spacing:0; }
  .brand-motto .motto-line { gap:3px; }
  .brand-motto .motto-comma { font-size:16px; }
  .site-footer .footer-note { padding-left:14px; }
  .site-footer .footer-note p { font-size:11px; }
  .site-footer .footer-note p span { font-size:9px; }
}
@media (max-width:350px) {
  .site-footer .footer-top { grid-template-columns:1fr; }
  .site-footer .footer-note { flex-direction:row; justify-self:start; align-items:center; border-left:0; padding-left:0; }
}

/* Short section titles follow the available column width, not the whole screen. */
.about-strip > div:nth-child(2) { min-width:0; container-type:inline-size; }
.about-strip h2 { font-size:clamp(14px,8.6cqw,30px); white-space:nowrap; letter-spacing:-.5px; }
@media (max-width:760px) {
  .section-heading h2 { font-size:clamp(20px,4.5vw,30px); white-space:nowrap; }
}

@media (max-width:650px) {
  .heading-with-usagi { display:grid; grid-template-columns:minmax(0,1fr) 72px; column-gap:12px; }
  .heading-with-usagi > .eyebrow { grid-column:1/-1; }
  .heading-with-usagi > h1 { grid-column:1; grid-row:2; align-self:end; font-size:clamp(24px,6.5vw,32px); white-space:nowrap; }
  .heading-with-usagi > p { grid-column:1/-1; grid-row:3; width:auto; margin-top:18px; }
  .heading-with-usagi .index-usagi-scene { grid-column:2; grid-row:2; position:relative; top:auto; right:auto; translate:0 0; width:72px; height:68px; margin-top:0; align-self:end; }
}

/* Usagi's patisserie: drifting desserts stay behind every interactive surface. */
body { isolation:isolate; }
.dessert-atmosphere { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; user-select:none; contain:strict; --dessert-opacity:.44; }
.dessert-particle { position:absolute; top:100%; left:var(--dessert-left); width:var(--dessert-size); height:var(--dessert-size); opacity:0; animation:dessert-rise var(--dessert-duration) var(--dessert-delay) linear infinite; }
.dessert-particle img { display:block; width:100%; height:100%; animation:dessert-sway 7s ease-in-out infinite alternate; }
.hero-shell { background:radial-gradient(ellipse at 76% 40%,#ffe9a54d,transparent 60%); }
@keyframes dessert-rise {
  0% { opacity:0; transform:translate3d(0,0,0) rotate(var(--dessert-angle)); }
  8%,88% { opacity:var(--dessert-opacity); }
  100% { opacity:0; transform:translate3d(var(--dessert-drift),calc(-100dvh - 110px),0) rotate(calc(var(--dessert-angle) * -1)); }
}
@keyframes dessert-sway { from { transform:translateX(-5px) rotate(-6deg); } to { transform:translateX(5px) rotate(6deg); } }
@media (max-width:760px) { .dessert-atmosphere { --dessert-opacity:.36; } }
@media (prefers-reduced-motion:reduce) { .dessert-atmosphere { display:none; } }
@media print { .dessert-atmosphere { display:none!important; } }

.header-brand-group { display:flex; align-items:center; min-width:0; }
.header-music-slot { display:none; }
.hero-note .curiosity-spark { display:block; width:24px; height:24px; flex:none; }
.back-top { bottom:calc(32px + env(safe-area-inset-bottom,0px)); }
@media (max-width:760px) {
  .header-inner { gap:8px; }
  .header-brand-group { gap:10px; }
  .header-music-slot { display:block; flex:none; }
  .header-music-slot .music-dock { position:relative; width:40px; max-width:none; left:auto; right:auto; top:auto; bottom:auto; }
  .header-music-slot .music-toolbar .music-toggle { width:40px; height:40px; min-height:40px; border-color:#e3d8c5; box-shadow:none; background:#fffaf066; }
  .header-music-slot .music-badge { width:31px; height:31px; }
  .header-music-slot .music-panel { position:fixed; top:calc(var(--header-height) + 10px); left:20px; right:20px; bottom:auto; width:auto; max-width:420px; margin-inline:auto; max-height:calc(100dvh - var(--header-height) - 30px); overflow:auto; overscroll-behavior:contain; }
  .back-top { right:20px; bottom:calc(clamp(36px,6vh,64px) + env(safe-area-inset-bottom,0px)); }
}
@media (max-width:380px) {
  .header-brand-group { gap:8px; }
  .site-header .brand-wordmark .brand-lead,.site-header .brand-wordmark .brand-tail { font-size:19px; }
  .site-header .brand-wordmark .brand-emphasis { font-size:30px; }
}

/* Numbered article navigation with a readable current-position summary. */
.article-toc { border:1px solid var(--line); border-radius:14px; padding:18px 14px; background:var(--surface); }
.article-toc summary { align-items:center; gap:12px; font-size:13px; }
.toc-summary-title { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.toc-summary-title .icon { width:17px; height:17px; color:var(--accent-dark); }
.toc-summary-title small { font-size:10px; font-weight:400; color:var(--muted); }
.toc-toggle { display:flex; align-items:center; gap:5px; flex:none; font-size:10px; font-weight:400; color:var(--muted); }
.article-toc .toc-hide { display:none; }
.article-toc[open] .toc-show { display:none; }
.article-toc[open] .toc-hide { display:inline; }
.article-toc[open] .toc-toggle svg { rotate:180deg; }
.toc-position { display:grid; gap:4px; margin-top:14px; padding:12px 10px; background:#f6f1e5; border-radius:8px; }
.toc-position > span { color:var(--muted); font-size:9px; letter-spacing:1px; }
.toc-position strong { font-size:11px; line-height:1.6; font-weight:500; color:var(--accent-dark); overflow-wrap:anywhere; }
.article-toc nav { margin-top:12px; padding-right:4px; max-height:calc(100svh - 400px); scrollbar-color:#d9cbb1 transparent; }
.article-toc li { display:block; margin:0; padding:0; line-height:1.6; }
.article-toc a { display:flex; align-items:baseline; gap:8px; min-height:40px; padding:10px 8px; border-left:2px solid transparent; border-radius:6px; font-size:12px; }
.toc-number { flex:none; font:10px var(--mono); min-width:20px; color:#a28c69; }
.toc-title { min-width:0; overflow-wrap:anywhere; }
.article-toc .toc-level-2,.article-toc .toc-level-3 { display:block; padding-left:12px; font-size:11px; }
.article-toc .toc-level-2 a,.article-toc .toc-level-3 a { font-size:11px; min-height:34px; padding-block:7px; }
.article-toc .toc-level-2 .toc-number,.article-toc .toc-level-3 .toc-number { font-size:9px; }
.article-toc a:hover,.article-toc a[aria-current] { background:#f8edcf; border-left-color:var(--accent); color:var(--accent-dark); }
.article-toc a[aria-current] .toc-title { font-weight:600; }
@media (max-width:850px) {
  .article-toc { padding:16px; }
  .article-toc nav { max-height:none; overflow:visible; padding-right:0; }
  .toc-position { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; padding:9px 11px; }
  .toc-position strong { font-size:11px; }
  .article-toc a { font-size:13px; min-height:44px; }
  .article-toc .toc-level-2 a,.article-toc .toc-level-3 a { font-size:12px; min-height:40px; }
}

/* Adjacent reading: clear direction, quiet metadata, and one full-card target. */
.post-pagination { gap:16px; margin-top:48px; padding-top:28px; }
.post-pagination a.adjacent-post { display:grid; grid-template-columns:minmax(0,1fr) 36px; align-items:center; gap:18px; padding:24px; border-radius:16px; background:#fffdf8; border:1px solid #e6dece; text-decoration:none; transition:border-color .2s, background-color .2s, box-shadow .2s; }
.adjacent-copy { min-width:0; }
.adjacent-meta { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 12px; margin-bottom:12px; }
.adjacent-meta .adjacent-label { color:#866423; font-size:12px; font-weight:600; letter-spacing:.04em; }
.adjacent-meta time { color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; }
.post-pagination .adjacent-post strong { display:block; color:var(--ink); font-size:clamp(16px,1.45vw,19px); line-height:1.6; font-weight:600; overflow-wrap:anywhere; }
.adjacent-topic { display:block; margin-top:12px; font-size:11px; color:var(--muted); }
.post-pagination a.adjacent-post > .adjacent-control { position:static; display:grid; place-items:center; width:36px; height:36px; color:#85601c; background:#f6f0df; border:1px solid #e8dec5; border-radius:50%; font-size:inherit; transition:background-color .2s; }
.adjacent-control svg { display:block; }
.post-pagination a.adjacent-post:hover { background:#fffaf0; border-color:#bba572; box-shadow:0 5px 18px #7763370c; }
.post-pagination a.adjacent-post:hover .adjacent-control { background:#f2e4ba; }
.post-pagination a.adjacent-post:focus-visible { outline:2px solid #85601c; outline-offset:4px; }
@media (max-width:850px) {
  .post-pagination { gap:12px; margin-top:32px; padding-top:24px; }
  .post-pagination a.adjacent-post { padding:20px; gap:16px; }
  .post-pagination .adjacent-post strong { font-size:17px; line-height:1.55; }
}
@media (max-width:380px) {
  .post-pagination a.adjacent-post { padding:18px; gap:12px; grid-template-columns:minmax(0,1fr) 30px; }
  .post-pagination .adjacent-post strong { font-size:16px; }
  .post-pagination a.adjacent-post > .adjacent-control { width:30px; height:30px; }
}

/* Text-only collections remain usable as new labels are added. */
.collection-grid { gap:12px; }
.collection-card { display:flex; align-items:center; gap:18px; padding:24px; border-radius:12px; }
.collection-card:hover { transform:translateY(-2px); background:#fff9ed; }
.collection-order { flex:none; align-self:flex-start; margin-top:4px; color:#ad9870; font:12px/1.6 var(--mono); }
.collection-copy { min-width:0; }
.collection-card .collection-copy h2 { margin:0 0 6px; font-size:18px; line-height:1.5; }
.collection-card .collection-copy p { margin:0; font-size:12px; }
.about-github { gap:14px; padding:20px; border-style:solid; background:#fffdf8; }
.github-mark { display:grid; place-items:center; flex:none; width:42px; height:42px; border-radius:12px; color:#66553c; background:#f3eddc; }
.github-mark svg { width:23px; height:23px; }
.github-copy { display:grid; gap:3px; min-width:0; }
.github-copy strong { color:var(--ink); font-size:16px; font-weight:600; line-height:1.5; }
.github-copy > span { font-size:11px; }
.about-github > .github-action { font-size:11px; margin-left:auto; flex:none; color:#866423; padding-left:10px; border-left:1px solid var(--line); }
.about-github:hover { background:#fff8e9; border-color:#bba572; }
@media(max-width:600px) {
  .collection-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .collection-card { padding:18px 14px; gap:10px; }
  .collection-card .collection-copy h2 { font-size:16px; }
  .collection-card .collection-copy p { font-size:11px; }
}
@media(max-width:380px) { .collection-grid { grid-template-columns:1fr; } .collection-card { padding:18px; } .about-github { padding:16px; gap:10px; } }
.music-volume { display:flex; align-items:center; gap:12px; }
.music-volume input[type=range] { flex:1; min-width:0; height:28px; accent-color:#947126; touch-action:pan-y; }
.music-volume output { min-width:34px; text-align:right; font-size:11px; font-variant-numeric:tabular-nums; color:#74654c; }

/* Consistent SVG marks identify personal LINE and every LINE community. */
.contact-links .contact-icon-line { background:#f2ecdf; color:#7b6848; }
.contact-icon-line .icon { width:20px; height:20px; }
.line-communities h3 { display:flex; align-items:center; gap:8px; }
.line-communities h3 > .icon { width:23px; height:23px; flex:none; color:#7b6848; }

/* Expanded controls share the top navigation layer, above reader progress. */
.site-header:has(.music-toggle[aria-expanded="true"]),
.music-dock:has(.music-toggle[aria-expanded="true"]) { z-index:500; }

/* Desktop articles: navigation on the left, uninterrupted reading on the right. */
@media (min-width:851px) {
  .reading-layout, .article-wrap .reading-layout { grid-template-columns:240px minmax(0,760px); }
  .reading-layout > .reading-aside { grid-column:1; grid-row:1; }
  .reading-layout > .prose { grid-column:2; grid-row:1; }
}
@media (min-width:851px) {
  .reading-aside, .article-wrap .reading-aside { top:calc(var(--header-height) + var(--reading-toolbar-height) + 24px); }
  .reading-aside .article-toc nav { max-height:max(120px,calc(100svh - var(--header-height) - var(--reading-toolbar-height) - 340px)); }
  .article-wrap .reader-card { display:grid; grid-template-columns:64px minmax(0,1fr); align-items:center; gap:6px 10px; margin-top:16px; padding:14px; }
  .reader-card .reading-usagi { grid-column:1; grid-row:1 / 4; width:64px; height:64px; }
  .reader-card .eyebrow { grid-column:2; font-size:8px; letter-spacing:1px; }
  .reader-card p { grid-column:2; font-size:11px; line-height:1.7; margin:0; }
  .reader-card a { grid-column:2; font-size:10px; }
}

/* Align the identity and academic journey at both ends of the desktop row. */
.about-profile-heading { align-items:start; }
@media (min-width:901px) {
  .profile-heading-copy { align-self:stretch; display:flex; flex-direction:column; justify-content:space-between; }
  .education-degree { min-height:26px; }
}

/* Research and practice: aligned text cards with a shared reading rhythm. */
.about-projects .project-grid { gap:24px; align-items:stretch; }
.about-projects .project-card { display:grid; grid-template-rows:auto auto auto 1fr auto auto; min-width:0; padding:28px; border-radius:20px; background:linear-gradient(145deg,#fffdf8,#fcf8ee); box-shadow:0 6px 24px #715b3610; }
.about-projects .project-top { gap:10px; padding-bottom:20px; border-bottom:1px solid var(--line); color:var(--accent-dark); }
.project-number { font:12px var(--mono); opacity:.65; }
.project-kind { margin-left:auto; color:var(--muted); font-size:11px; }
.about-projects .project-card h3 { margin:20px 0 6px; font-size:clamp(22px,2.2vw,28px); line-height:1.4; letter-spacing:-.4px; }
.about-projects .project-subtitle { margin:0 0 18px; color:var(--accent-dark); font-size:13px; line-height:1.8; }
.about-projects .project-description { margin:0; font-size:14px; line-height:1.95; }
.project-detail { margin-top:24px; padding:14px 16px; border-left:2px solid #d7bc78; border-radius:0 10px 10px 0; background:#f3eddf; }
.project-detail > span { color:var(--muted); font-size:11px; letter-spacing:.08em; }
.about-projects .project-detail p { margin:5px 0 0; color:var(--ink); font-size:13px; line-height:1.8; }
.about-projects .project-tags { gap:7px; margin-top:18px; }
.about-projects .project-tags span { padding:5px 9px; border:1px solid #e8dcc3; border-radius:6px; background:#fffdf8; font-size:11px; line-height:1.4; }
@media (max-width:850px) { .about-projects .project-grid { grid-template-columns:1fr; } }
@media (max-width:480px) { .about-projects .project-card { padding:20px; border-radius:16px; } .about-projects .project-top { padding-bottom:15px; } .about-projects .project-card h3 { font-size:23px; } .project-detail { margin-top:20px; padding:12px; } }

@media (min-width:851px) { .about-projects .project-detail { min-height:103px; } }

/* Return controls follow the reading context; the footer needs no floating-button spacer. */
.site-footer .footer-bottom { padding-bottom:calc(28px + env(safe-area-inset-bottom,0px)); }
.back-top { display:inline-flex; align-items:center; justify-content:center; gap:5px; width:auto; height:42px; padding:0 12px; right:24px; bottom:calc(32px + env(safe-area-inset-bottom,0px)); border:1px solid #ddcfb7; border-radius:12px; background:#fffdf8; color:var(--accent-dark); box-shadow:0 4px 18px #5c48251a; font-size:12px; line-height:1; z-index:90; }
.back-top:hover { background:#f6edda; }
.footer-return { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:40px; padding:6px 10px; border:0; border-radius:8px; background:transparent; color:var(--accent-dark); font-size:12px; }
.footer-return:hover { background:#e8ddc4; }
body.modal-open .back-top, body:has(.menu-toggle[aria-expanded="true"]) .back-top, body:has(.music-toggle[aria-expanded="true"]) .back-top { visibility:hidden; pointer-events:none; }
@media (max-width:760px) {
  .back-top { right:16px; bottom:calc(36px + env(safe-area-inset-bottom,0px)); height:40px; padding-inline:10px; border-radius:10px; font-size:11px; }
  .footer-actions { display:grid; grid-template-columns:1fr auto; gap:12px 16px; align-items:center; }
  .footer-actions nav { grid-column:1; grid-row:1; }
  .footer-return { grid-column:2; grid-row:1; justify-self:end; }
  .footer-platform { grid-column:1/-1; grid-row:2; justify-self:start; }
}

@media (max-width:760px) { .footer-actions:not(:has(nav)) .footer-platform { grid-column:1; grid-row:1; } }